@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Input/Textarea.stories.svelte

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Textarea from './Textarea.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Textarea',
-    component: Textarea,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      placeholder: { control: 'text' },
-      rows: { control: 'number' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      maxlength: { control: 'number' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Multi-line text input component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Description"
-        placeholder="Enter your description..."
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Bio"
-        placeholder="Tell us about yourself..."
-        bind:value={value}
-      />
-      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Max Length">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Short Bio"
-        placeholder="Keep it brief..."
-        maxlength={200}
-        helperText="Maximum 200 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Comments"
-        placeholder="Enter your comments..."
-        errorText="Please provide at least 10 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Custom Rows">
-  {#snippet template()}
-    <div class="space-y-6 max-w-md">
-      <Textarea
-        label="Small (2 rows)"
-        placeholder="Two rows..."
-        rows={2}
-      />
-      <Textarea
-        label="Medium (4 rows)"
-        placeholder="Four rows..."
-        rows={4}
-      />
-      <Textarea
-        label="Large (8 rows)"
-        placeholder="Eight rows..."
-        rows={8}
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Disabled Textarea"
-        placeholder="Cannot edit this..."
-        disabled
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-2xl">
-      <Textarea
-        label="Default"
-        placeholder="Enter text..."
-      />
-      <Textarea
-        label="With Error"
-        placeholder="Enter text..."
-        errorText="This field is required"
-      />
-      <Textarea
-        label="Disabled"
-        placeholder="Cannot edit..."
-        disabled
-      />
-      <Textarea
-        label="With Helper"
-        placeholder="Enter text..."
-        helperText="Optional additional information"
-      />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Textarea',
+    component: Textarea,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      placeholder: { control: 'text' },
+      rows: { control: 'number' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      maxlength: { control: 'number' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Multi-line text input component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Description"
+        placeholder="Enter your description..."
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        bind:value={value}
+      />
+      <p class="text-sm text-muted-foreground mt-2">{value.length} characters</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Max Length">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Short Bio"
+        placeholder="Keep it brief..."
+        maxlength={200}
+        helperText="Maximum 200 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Comments"
+        placeholder="Enter your comments..."
+        errorText="Please provide at least 10 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Custom Rows">
+  {#snippet template()}
+    <div class="space-y-6 max-w-md">
+      <Textarea
+        label="Small (2 rows)"
+        placeholder="Two rows..."
+        rows={2}
+      />
+      <Textarea
+        label="Medium (4 rows)"
+        placeholder="Four rows..."
+        rows={4}
+      />
+      <Textarea
+        label="Large (8 rows)"
+        placeholder="Eight rows..."
+        rows={8}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Disabled Textarea"
+        placeholder="Cannot edit this..."
+        disabled
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-2xl">
+      <Textarea
+        label="Default"
+        placeholder="Enter text..."
+      />
+      <Textarea
+        label="With Error"
+        placeholder="Enter text..."
+        errorText="This field is required"
+      />
+      <Textarea
+        label="Disabled"
+        placeholder="Cannot edit..."
+        disabled
+      />
+      <Textarea
+        label="With Helper"
+        placeholder="Enter text..."
+        helperText="Optional additional information"
+      />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Input/Textarea.svelte

@@ -1,105 +1,105 @@
-<script lang="ts">
-  import { typography } from "../../tokens/typography";
-
-  interface Props {
-    value?: unknown;
-    placeholder?: string;
-    rows?: number;
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    id?: string;
-    name?: string;
-    label?: string;
-    error?: string;
-    maxlength?: number | null;
-    minlength?: number | null;
-    class?: string;
-    oninput?: (detail: { value: string }) => void;
-    onchange?: (detail: { value: string }) => void;
-    onblur?: (event: FocusEvent) => void;
-    onfocus?: (event: FocusEvent) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
-    onkeyup?: (event: KeyboardEvent) => void;
-    onkeypress?: (event: KeyboardEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    value = $bindable(""),
-    placeholder = "",
-    rows = 4,
-    disabled = false,
-    required = false,
-    readonly = false,
-    id = "",
-    name = "",
-    label = "",
-    error = "",
-    maxlength = null,
-    minlength = null,
-    class: className = "",
-    oninput,
-    onchange,
-    onblur,
-    onfocus,
-    onkeydown,
-    onkeyup,
-    onkeypress,
-    ...restProps
-  }: Props = $props();
-
-  function handleInput(event: Event) {
-    const target = event.target as HTMLTextAreaElement;
-    value = target.value;
-    oninput?.({ value: target.value });
-  }
-
-  function handleChange(event: Event) {
-    const target = event.target as HTMLTextAreaElement;
-    onchange?.({ value: target.value });
-  }
-
-  function handleBlur(event: FocusEvent) {
-    onblur?.(event);
-  }
-
-  function handleFocus(event: FocusEvent) {
-    onfocus?.(event);
-  }
-</script>
-
-<div class="flex flex-col gap-2 w-full">
-  {#if label}
-    <label for={id || name} class={`${typography.label} leading-tight`}>
-      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-    </label>
-  {/if}
-
-  <textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {maxlength}
-    {minlength}
-    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onblur={handleBlur}
-    onfocus={handleFocus}
-    {onkeydown}
-    {onkeyup}
-    {onkeypress}
-    aria-required={required}
-    aria-invalid={!!error}
-    {...restProps}
-  ></textarea>
-
-  {#if error}
-    <p class={typography.error}>{error}</p>
-  {/if}
-</div>
+<script lang="ts">
+  import { typography } from "../../tokens/typography";
+
+  interface Props {
+    value?: unknown;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    label?: string;
+    error?: string;
+    maxlength?: number | null;
+    minlength?: number | null;
+    class?: string;
+    oninput?: (detail: { value: string }) => void;
+    onchange?: (detail: { value: string }) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(""),
+    placeholder = "",
+    rows = 4,
+    disabled = false,
+    required = false,
+    readonly = false,
+    id = "",
+    name = "",
+    label = "",
+    error = "",
+    maxlength = null,
+    minlength = null,
+    class: className = "",
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onkeydown,
+    onkeyup,
+    onkeypress,
+    ...restProps
+  }: Props = $props();
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    value = target.value;
+    oninput?.({ value: target.value });
+  }
+
+  function handleChange(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    onchange?.({ value: target.value });
+  }
+
+  function handleBlur(event: FocusEvent) {
+    onblur?.(event);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    onfocus?.(event);
+  }
+</script>
+
+<div class="flex flex-col gap-2 w-full">
+  {#if label}
+    <label for={id || name} class={`${typography.label} leading-tight`}>
+      {label}{#if required}<span class="text-accent-danger font-medium text-sm ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="{typography.sm} w-full p-2.5 bg-bg-secondary leading-normal border rounded-lg resize-y transition-colors focus:outline-hidden focus:ring-4 focus:ring-focus-ring placeholder-muted-foreground {error ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus:border-interactive-border'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={handleFocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
+    aria-required={required}
+    aria-invalid={!!error}
+    {...restProps}
+  ></textarea>
+
+  {#if error}
+    <p class={typography.error}>{error}</p>
+  {/if}
+</div>

package/dist/primitives/Label/Label.spec.js

@@ -31,57 +31,57 @@ describe('Label Colors', () => {
   test('default color is gray', () => {
     const { container } = render(Label);
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-text-primary');
   });
 
-  test('gray color applies text-gray-900', () => {
+  test('gray color applies text-text-primary', () => {
     const { container } = render(Label, { props: { color: 'gray' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-text-primary');
   });
 
-  test('green color applies text-green-700', () => {
+  test('green color applies text-status-success-text', () => {
     const { container } = render(Label, { props: { color: 'green' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-green-700');
+    expect(label).toHaveClass('text-status-success-text');
   });
 
-  test('red color applies text-red-700', () => {
+  test('red color applies text-status-error-text', () => {
     const { container } = render(Label, { props: { color: 'red' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-red-700');
+    expect(label).toHaveClass('text-status-error-text');
   });
 
-  test('disabled color applies text-gray-400', () => {
+  test('disabled color applies text-muted-foreground', () => {
     const { container } = render(Label, { props: { color: 'disabled' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-400');
+    expect(label).toHaveClass('text-muted-foreground');
   });
 });
 
-describe('Label Dark Mode', () => {
-  test('gray has dark mode class', () => {
+describe('Label Token-Based Colors', () => {
+  test('gray uses text-text-primary', () => {
     const { container } = render(Label, { props: { color: 'gray' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-gray-300');
+    expect(label).toHaveClass('text-text-primary');
   });
 
-  test('green has dark mode class', () => {
+  test('green uses text-status-success-text', () => {
     const { container } = render(Label, { props: { color: 'green' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-green-500');
+    expect(label).toHaveClass('text-status-success-text');
   });
 
-  test('red has dark mode class', () => {
+  test('red uses text-status-error-text', () => {
     const { container } = render(Label, { props: { color: 'red' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-red-500');
+    expect(label).toHaveClass('text-status-error-text');
   });
 
-  test('disabled has dark mode class', () => {
+  test('disabled uses text-muted-foreground', () => {
     const { container } = render(Label, { props: { color: 'disabled' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-gray-500');
+    expect(label).toHaveClass('text-muted-foreground');
   });
 });
 
@@ -148,8 +148,7 @@ describe('Label Color Fallback', () => {
   test('falls back to gray when an invalid color is provided', () => {
     const { container } = render(Label, { props: { color: 'invalid-color' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
-    expect(label).toHaveClass('dark:text-gray-300');
+    expect(label).toHaveClass('text-text-primary');
   });
 });
 
@@ -160,7 +159,7 @@ describe('Label Class Composition', () => {
     });
     const label = container.querySelector('label');
     expect(label).toHaveClass('text-sm'); // from defaultClass
-    expect(label).toHaveClass('text-green-700'); // from color
+    expect(label).toHaveClass('text-status-success-text'); // from color
     expect(label).toHaveClass('extra-class'); // from custom class
   });
 });

package/dist/primitives/Label/Label.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    color?: 'gray' | 'green' | 'red' | 'disabled';
-    defaultClass?: string;
-    show?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    color = "gray",
-    defaultClass = "text-sm rtl:text-right font-medium block",
-    show = true,
-    class: className = "",
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const colorClasses = {
-    gray: "text-gray-900 dark:text-gray-300",
-    green: "text-green-700 dark:text-green-500",
-    red: "text-red-700 dark:text-red-500",
-    disabled: "text-gray-400 dark:text-gray-500"
-  };
-
-  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
-</script>
-
-{#if show}
-  <!-- svelte-ignore a11y_label_has_associated_control -->
-  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
-{:else}
-  {#if children}{@render children()}{/if}
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color?: 'gray' | 'green' | 'red' | 'disabled';
+    defaultClass?: string;
+    show?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    color = "gray",
+    defaultClass = "text-sm rtl:text-right font-medium block",
+    show = true,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const colorClasses = {
+    gray: "text-text-primary",
+    green: "text-status-success-text",
+    red: "text-status-error-text",
+    disabled: "text-muted-foreground"
+  };
+
+  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y_label_has_associated_control -->
+  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
+{:else}
+  {#if children}{@render children()}{/if}
+{/if}