From 58c6b665da710acebb906cbf99113f9ce220f83c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Mar 2025 14:45:19 +0530
Subject: [PATCH 1/3] remove: selector base; update: dependent components.

---
 v2/pink-sb/src/lib/selector/Base.svelte       | 31 -----------------
 v2/pink-sb/src/lib/selector/Checkbox.svelte   | 30 +++++++++++++---
 v2/pink-sb/src/lib/selector/Radio.svelte      | 30 +++++++++++++---
 v2/pink-sb/src/lib/selector/Switch.svelte     | 30 +++++++++++++---
 .../src/stories/Checkbox.stories.svelte       | 26 +++++++++++++-
 v2/pink-sb/src/stories/Radio.stories.svelte   | 34 ++++++++++++++++++-
 v2/pink-sb/src/stories/Switch.stories.svelte  | 32 +++++++++++++----
 7 files changed, 161 insertions(+), 52 deletions(-)
 delete mode 100644 v2/pink-sb/src/lib/selector/Base.svelte

diff --git a/v2/pink-sb/src/lib/selector/Base.svelte b/v2/pink-sb/src/lib/selector/Base.svelte
deleted file mode 100644
index 6a5ea3234f..0000000000
--- a/v2/pink-sb/src/lib/selector/Base.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { Layout, Typography } from '$lib/index.js';
-
-    export let id: string | null | undefined;
-    export let label: string | undefined;
-    export let description: string | undefined;
-</script>
-
-<Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
-    <slot />
-    {#if label}
-        <Layout.Stack inline gap="xxs">
-            <label for={id}>
-                <Typography.Text variant="m-500">{label}</Typography.Text>
-            </label>
-            {#if description}
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary"
-                    >{description}</Typography.Text
-                >
-            {:else if $$slots.description}
-                <slot name="description"></slot>
-            {/if}
-        </Layout.Stack>
-    {/if}
-</Layout.Stack>
-
-<style lang="scss">
-    label {
-        cursor: pointer;
-    }
-</style>
diff --git a/v2/pink-sb/src/lib/selector/Checkbox.svelte b/v2/pink-sb/src/lib/selector/Checkbox.svelte
index 4220da32d5..82cf4fafe9 100644
--- a/v2/pink-sb/src/lib/selector/Checkbox.svelte
+++ b/v2/pink-sb/src/lib/selector/Checkbox.svelte
@@ -2,8 +2,9 @@
     import { createCheckbox } from '@melt-ui/svelte';
     import { IconCheck, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
     import { createEventDispatcher } from 'svelte';
-    import Base from './Base.svelte';
     import Icon from '$lib/Icon.svelte';
+    import Text from '$lib/typography/Text.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
 
     export let disabled: boolean = false;
     export let id: string | undefined = undefined;
@@ -30,7 +31,7 @@
     });
 </script>
 
-<Base {label} {id} {description}>
+<Stack inline gap="s" alignItems="flex-start" direction="row">
     <button
         {id}
         {...$root}
@@ -46,12 +47,33 @@
         {/if}
     </button>
     <input {...$input} use:input {required} />
-    <slot name="description" slot="description" />
-</Base>
+
+    {#if label || description}
+        <Stack gap="xxs">
+            {#if label}
+                <label for={id}>
+                    <Text variant="m-500">{label}</Text>
+                </label>
+            {/if}
+
+            <slot name="description">
+                {#if description}
+                    <Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {description}
+                    </Text>
+                {/if}
+            </slot>
+        </Stack>
+    {/if}
+</Stack>
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
+    label {
+        cursor: pointer;
+    }
+
     button {
         @include transitions.common;
 
diff --git a/v2/pink-sb/src/lib/selector/Radio.svelte b/v2/pink-sb/src/lib/selector/Radio.svelte
index 63fcb41928..7a90b9a7cc 100644
--- a/v2/pink-sb/src/lib/selector/Radio.svelte
+++ b/v2/pink-sb/src/lib/selector/Radio.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import Base from './Base.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '$lib/typography/Text.svelte';
     import type { HTMLInputAttributes } from 'svelte/elements';
 
     type $$Props = Omit<HTMLInputAttributes, 'size'> & {
@@ -20,7 +21,7 @@
     export let radioInput: $$Props['radioInput'] = undefined;
 </script>
 
-<Base {label} {id} {description}>
+<Stack inline gap="s" alignItems="flex-start" direction="row">
     <input
         type="radio"
         bind:this={radioInput}
@@ -32,12 +33,33 @@
         class:s={size === 's'}
         {...$$restProps}
     />
-    <slot name="description" slot="description" />
-</Base>
+
+    {#if label || description}
+        <Stack gap="xxs">
+            {#if label}
+                <label for={id}>
+                    <Text variant="m-500">{label}</Text>
+                </label>
+            {/if}
+
+            <slot name="description">
+                {#if description}
+                    <Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {description}
+                    </Text>
+                {/if}
+            </slot>
+        </Stack>
+    {/if}
+</Stack>
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
+    label {
+        cursor: pointer;
+    }
+
     input {
         @include transitions.common;
 
diff --git a/v2/pink-sb/src/lib/selector/Switch.svelte b/v2/pink-sb/src/lib/selector/Switch.svelte
index a29ba0db8b..ac8df4f43e 100644
--- a/v2/pink-sb/src/lib/selector/Switch.svelte
+++ b/v2/pink-sb/src/lib/selector/Switch.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { createSwitch } from '@melt-ui/svelte';
     import { createEventDispatcher } from 'svelte';
-    import Base from './Base.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../typography/Text.svelte';
 
     export let checked: boolean = false;
     export let disabled: boolean = false;
@@ -30,17 +31,38 @@
     $: localChecked.set(checked);
 </script>
 
-<Base {label} {id} {description}>
+<Stack inline gap="s" alignItems="flex-start" direction="row">
     <button {...$root} use:root {disabled}>
         <span class="thumb" />
         <input {...$input} use:input on:invalid on:change {id} {required} />
     </button>
-    <slot name="description" slot="description" />
-</Base>
+
+    {#if label || description}
+        <Stack gap="xxs">
+            {#if label}
+                <label for={id}>
+                    <Text variant="m-500">{label}</Text>
+                </label>
+            {/if}
+
+            <slot name="description">
+                {#if description}
+                    <Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {description}
+                    </Text>
+                {/if}
+            </slot>
+        </Stack>
+    {/if}
+</Stack>
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
+    label {
+        cursor: pointer;
+    }
+
     button {
         @include transitions.common;
 
diff --git a/v2/pink-sb/src/stories/Checkbox.stories.svelte b/v2/pink-sb/src/stories/Checkbox.stories.svelte
index a13cd4f3c7..3779ae1c17 100644
--- a/v2/pink-sb/src/stories/Checkbox.stories.svelte
+++ b/v2/pink-sb/src/stories/Checkbox.stories.svelte
@@ -38,6 +38,9 @@
 <script>
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import { expect, within } from '@storybook/test';
+    import Anchor from '$lib/link/Anchor.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../lib/typography/Text.svelte';
 </script>
 
 <Template let:args>
@@ -46,7 +49,28 @@
 
 <Story name="Default" />
 <Story name="Checked" args={{ checked: true }} />
-<Story name="With description" args={{ description: 'This is a description text' }} />
 <Story name="Indeterminate" args={{ checked: 'indeterminate' }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
+<Story name="Descriptions">
+    <Stack gap="xxxl">
+        <Stack>
+            <Text variant="m-400">1. No description</Text>
+            <Selector.Checkbox label="Checkbox" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">2. Prop description</Text>
+            <Selector.Checkbox label="Checkbox" description="This is a description text" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">3. Slot description</Text>
+            <Selector.Checkbox label="Checkbox">
+                <Text variant="m-400" color="--fgcolor-neutral-tertiary" slot="description">
+                    This is a description as a slot. Here's a <Anchor href="#">link</Anchor> for demo.
+                </Text>
+            </Selector.Checkbox>
+        </Stack>
+    </Stack>
+</Story>
diff --git a/v2/pink-sb/src/stories/Radio.stories.svelte b/v2/pink-sb/src/stories/Radio.stories.svelte
index 5473888582..2532f969db 100644
--- a/v2/pink-sb/src/stories/Radio.stories.svelte
+++ b/v2/pink-sb/src/stories/Radio.stories.svelte
@@ -31,6 +31,9 @@
 <script>
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import { expect, within } from '@storybook/test';
+    import Anchor from '$lib/link/Anchor.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../lib/typography/Text.svelte';
 </script>
 
 <Template let:args>
@@ -39,7 +42,6 @@
 
 <Story name="Default" />
 <Story name="Checked" args={{ checked: true }} />
-<Story name="With description" args={{ description: 'This is a description text' }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
 <Story name="Group">
@@ -49,3 +51,33 @@
         <Selector.Radio id="id3" label="Option 3" group="group" name="group" value="3" />
     </Layout.Stack>
 </Story>
+
+<Story name="Descriptions">
+    <Stack gap="xxxl">
+        <Stack>
+            <Text variant="m-400">1. No description</Text>
+            <Selector.Radio label="Radio" value="1" id="id1" group="group" name="group" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">2. Prop description</Text>
+            <Selector.Radio
+                label="Radio"
+                value="2"
+                id="id2"
+                group="group"
+                name="group"
+                description="This is a description text"
+            />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">3. Slot description</Text>
+            <Selector.Radio label="Radio" value="3" id="id3" group="group" name="group">
+                <Text variant="m-400" color="--fgcolor-neutral-tertiary" slot="description">
+                    This is a description as a slot. Here's a <Anchor href="#">link</Anchor> for demo.
+                </Text>
+            </Selector.Radio>
+        </Stack>
+    </Stack>
+</Story>
diff --git a/v2/pink-sb/src/stories/Switch.stories.svelte b/v2/pink-sb/src/stories/Switch.stories.svelte
index aa0d910130..4729acaf9f 100644
--- a/v2/pink-sb/src/stories/Switch.stories.svelte
+++ b/v2/pink-sb/src/stories/Switch.stories.svelte
@@ -25,6 +25,9 @@
 <script>
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import { expect, within } from '@storybook/test';
+    import Anchor from '$lib/link/Anchor.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
+    import Text from '../lib/typography/Text.svelte';
 </script>
 
 <Template let:args>
@@ -32,13 +35,28 @@
 </Template>
 
 <Story name="Default" />
-<Story
-    name="With description"
-    args={{
-        description:
-            ' Provide a fallback file for advanced routing and proper page handling in SPA mode.'
-    }}
-/>
 <Story name="Checked" args={{ checked: true }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
+<Story name="Descriptions">
+    <Stack gap="xxxl">
+        <Stack>
+            <Text variant="m-400">1. No description</Text>
+            <Selector.Switch label="Switch" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">2. Prop description</Text>
+            <Selector.Switch label="Switch" description="This is a description text" />
+        </Stack>
+
+        <Stack>
+            <Text variant="m-400">3. Slot description</Text>
+            <Selector.Switch label="Switch">
+                <Text variant="m-400" color="--fgcolor-neutral-tertiary" slot="description">
+                    This is a description as a slot. Here's a <Anchor href="#">link</Anchor> for demo.
+                </Text>
+            </Selector.Switch>
+        </Stack>
+    </Stack>
+</Story>

From 33430f1c33050517a6d6f8799ac6eb25b56b28d7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Mar 2025 19:49:27 +0530
Subject: [PATCH 2/3] address internal comments.

---
 v2/pink-sb/src/lib/selector/Base.svelte     | 37 +++++++++++++++++++++
 v2/pink-sb/src/lib/selector/Checkbox.svelte | 34 ++++---------------
 v2/pink-sb/src/lib/selector/Radio.svelte    | 30 +++--------------
 v2/pink-sb/src/lib/selector/Switch.svelte   | 30 +++--------------
 4 files changed, 51 insertions(+), 80 deletions(-)
 create mode 100644 v2/pink-sb/src/lib/selector/Base.svelte

diff --git a/v2/pink-sb/src/lib/selector/Base.svelte b/v2/pink-sb/src/lib/selector/Base.svelte
new file mode 100644
index 0000000000..cedb1dcbe7
--- /dev/null
+++ b/v2/pink-sb/src/lib/selector/Base.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { Layout, Typography } from '$lib/index.js';
+
+    export let id: string | null | undefined;
+    export let label: string | undefined;
+    export let description: string | undefined;
+</script>
+
+<Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
+    <slot />
+
+    {#if label}
+        <Layout.Stack inline gap="xxs">
+            <label for={id}>
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+            </label>
+
+            {#if description}
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                    {description}
+                </Typography.Text>
+            {:else if $$slots.description}
+                <slot name="description" class="description"></slot>
+            {/if}
+        </Layout.Stack>
+    {/if}
+</Layout.Stack>
+
+<style lang="scss">
+    label {
+        cursor: pointer;
+    }
+
+    .description:empty {
+        display: none;
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/selector/Checkbox.svelte b/v2/pink-sb/src/lib/selector/Checkbox.svelte
index 82cf4fafe9..36e4c3c045 100644
--- a/v2/pink-sb/src/lib/selector/Checkbox.svelte
+++ b/v2/pink-sb/src/lib/selector/Checkbox.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
+    import Base from './Base.svelte';
+    import Icon from '$lib/Icon.svelte';
+    import { createEventDispatcher } from 'svelte';
     import { createCheckbox } from '@melt-ui/svelte';
     import { IconCheck, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
-    import { createEventDispatcher } from 'svelte';
-    import Icon from '$lib/Icon.svelte';
-    import Text from '$lib/typography/Text.svelte';
-    import Stack from '$lib/layout/Stack.svelte';
 
     export let disabled: boolean = false;
     export let id: string | undefined = undefined;
@@ -31,7 +30,7 @@
     });
 </script>
 
-<Stack inline gap="s" alignItems="flex-start" direction="row">
+<Base {label} {id} {description}>
     <button
         {id}
         {...$root}
@@ -47,33 +46,12 @@
         {/if}
     </button>
     <input {...$input} use:input {required} />
-
-    {#if label || description}
-        <Stack gap="xxs">
-            {#if label}
-                <label for={id}>
-                    <Text variant="m-500">{label}</Text>
-                </label>
-            {/if}
-
-            <slot name="description">
-                {#if description}
-                    <Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                        {description}
-                    </Text>
-                {/if}
-            </slot>
-        </Stack>
-    {/if}
-</Stack>
+    <slot name="description" slot="description" />
+</Base>
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
-    label {
-        cursor: pointer;
-    }
-
     button {
         @include transitions.common;
 
diff --git a/v2/pink-sb/src/lib/selector/Radio.svelte b/v2/pink-sb/src/lib/selector/Radio.svelte
index 7a90b9a7cc..63fcb41928 100644
--- a/v2/pink-sb/src/lib/selector/Radio.svelte
+++ b/v2/pink-sb/src/lib/selector/Radio.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import Stack from '$lib/layout/Stack.svelte';
-    import Text from '$lib/typography/Text.svelte';
+    import Base from './Base.svelte';
     import type { HTMLInputAttributes } from 'svelte/elements';
 
     type $$Props = Omit<HTMLInputAttributes, 'size'> & {
@@ -21,7 +20,7 @@
     export let radioInput: $$Props['radioInput'] = undefined;
 </script>
 
-<Stack inline gap="s" alignItems="flex-start" direction="row">
+<Base {label} {id} {description}>
     <input
         type="radio"
         bind:this={radioInput}
@@ -33,33 +32,12 @@
         class:s={size === 's'}
         {...$$restProps}
     />
-
-    {#if label || description}
-        <Stack gap="xxs">
-            {#if label}
-                <label for={id}>
-                    <Text variant="m-500">{label}</Text>
-                </label>
-            {/if}
-
-            <slot name="description">
-                {#if description}
-                    <Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                        {description}
-                    </Text>
-                {/if}
-            </slot>
-        </Stack>
-    {/if}
-</Stack>
+    <slot name="description" slot="description" />
+</Base>
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
-    label {
-        cursor: pointer;
-    }
-
     input {
         @include transitions.common;
 
diff --git a/v2/pink-sb/src/lib/selector/Switch.svelte b/v2/pink-sb/src/lib/selector/Switch.svelte
index ac8df4f43e..b287192aa4 100644
--- a/v2/pink-sb/src/lib/selector/Switch.svelte
+++ b/v2/pink-sb/src/lib/selector/Switch.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
+    import Base from './Base.svelte';
     import { createSwitch } from '@melt-ui/svelte';
     import { createEventDispatcher } from 'svelte';
-    import Stack from '$lib/layout/Stack.svelte';
-    import Text from '../typography/Text.svelte';
 
     export let checked: boolean = false;
     export let disabled: boolean = false;
@@ -31,38 +30,17 @@
     $: localChecked.set(checked);
 </script>
 
-<Stack inline gap="s" alignItems="flex-start" direction="row">
+<Base {label} {id} {description}>
     <button {...$root} use:root {disabled}>
         <span class="thumb" />
         <input {...$input} use:input on:invalid on:change {id} {required} />
     </button>
-
-    {#if label || description}
-        <Stack gap="xxs">
-            {#if label}
-                <label for={id}>
-                    <Text variant="m-500">{label}</Text>
-                </label>
-            {/if}
-
-            <slot name="description">
-                {#if description}
-                    <Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                        {description}
-                    </Text>
-                {/if}
-            </slot>
-        </Stack>
-    {/if}
-</Stack>
+    <slot name="description" slot="description" />
+</Base>
 
 <style lang="scss">
     @use '../../scss/mixins/transitions';
 
-    label {
-        cursor: pointer;
-    }
-
     button {
         @include transitions.common;
 

From 4ffd32a563a9b1c7f9b5422657438eb4f9a82616 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Mar 2025 19:54:03 +0530
Subject: [PATCH 3/3] update: correct wrapper.

---
 v2/pink-sb/src/lib/selector/Base.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/v2/pink-sb/src/lib/selector/Base.svelte b/v2/pink-sb/src/lib/selector/Base.svelte
index cedb1dcbe7..ba2b44b061 100644
--- a/v2/pink-sb/src/lib/selector/Base.svelte
+++ b/v2/pink-sb/src/lib/selector/Base.svelte
@@ -15,13 +15,15 @@
                 <Typography.Text variant="m-500">{label}</Typography.Text>
             </label>
 
-            {#if description}
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                    {description}
-                </Typography.Text>
-            {:else if $$slots.description}
-                <slot name="description" class="description"></slot>
-            {/if}
+            <div class="description">
+                {#if description}
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {description}
+                    </Typography.Text>
+                {:else if $$slots.description}
+                    <slot name="description"></slot>
+                {/if}
+            </div>
         </Layout.Stack>
     {/if}
 </Layout.Stack>