@getmicdrop/svelte-components 5.4.0 → 5.4.1

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-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>

package/dist/primitives/Input/Textarea.svelte

@@ -1,79 +1,79 @@
-<script>
-  import { typography } from "../../tokens/typography";
-
-  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();
-
-  function handleInput(event) {
-    value = event.target.value;
-    oninput?.({ value });
-  }
-
-  function handleChange(event) {
-    onchange?.({ value: event.target.value });
-  }
-
-  function handleBlur(event) {
-    onblur?.(event);
-  }
-
-  function handleFocus(event) {
-    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-none 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>
+  import { typography } from "../../tokens/typography";
+
+  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();
+
+  function handleInput(event) {
+    value = event.target.value;
+    oninput?.({ value });
+  }
+
+  function handleChange(event) {
+    onchange?.({ value: event.target.value });
+  }
+
+  function handleBlur(event) {
+    onblur?.(event);
+  }
+
+  function handleFocus(event) {
+    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-none 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>

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-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}