kosui 0.2.0 → 0.5.0

package/dist/slider/slider.svelte

@@ -1,50 +1,16 @@
 <script lang="ts" module>
   import {
-    COLORS,
-    RADII,
-    SIZES,
     type Color,
     type ColorProp,
-    type Radius,
-    type RadiusProp,
+    type Shape,
+    type ShapeProp,
     type Size,
     type SizeProp,
   } from "../base.js";
-  import { mergeProps } from "../merge-props.js";
-  import {
-    setSliderContext,
-    SliderContext,
-    SliderHandle,
-    SliderHandleLabel,
-    SliderHandleLabelArrow,
-    SliderMark,
-    SliderMarkDot,
-    SliderMarkLabel,
-    type SliderHandleLabelArrowProps,
-    type SliderHandleLabelProps,
-    type SliderHandleProps,
-    type SliderMarkDotProps,
-    type SliderMarkLabelProps,
-    type SliderMarkProps,
-  } from "./index.js";
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-
-  export const SLIDER_COLORS = COLORS;
-  export type SliderColor = Color;
-  export type SliderColorProp = ColorProp;
-
-  export const SLIDER_SIZES = SIZES;
-  export type SliderSize = Size;
-  export type SliderSizeProp = SizeProp;
-
-  export const SLIDER_RADII = RADII;
-  export type SliderRadius = Radius;
-  export type SliderRadiusProp = RadiusProp;
-
-  export type Mark = {
+  import { cn, type ClassName } from "../utils.js";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  export type SliderMark = {
     value: number;
     label?: string;
   };
@@ -53,197 +19,200 @@
     value?: number;
     min?: number;
     max?: number;
-    step?: number;
-    marks?: Mark[];
-    disabled?: boolean;
-    label?: (value: number) => string;
-    labelAlwaysOn?: boolean;
-    inverted?: boolean;
-    restrictToMarks?: boolean;
-    onChange?: (value: number) => void;
-    onChangeEnd?: (value: number) => void;
-    sliderHandle?: Snippet<[SliderHandleProps]>;
-    sliderHandleLabel?: Snippet<[SliderHandleLabelProps]>;
-    sliderHandleLabelArrow?: Snippet<[SliderHandleLabelArrowProps]>;
-    sliderMark?: Snippet<[SliderMarkProps]>;
-    sliderMarkDot?: Snippet<[SliderMarkDotProps]>;
-    sliderMarkLabel?: Snippet<[SliderMarkLabelProps]>;
+    step?: number | "any";
+    marks?: SliderMark[];
+    format?: (value: number) => string;
+    showValue?: boolean;
+    el?: HTMLInputElement;
   } & ClassName &
-    SliderColorProp &
-    SliderSizeProp &
-    SliderRadiusProp &
-    HTMLAttributes<HTMLDivElement>;
+    ColorProp &
+    SizeProp &
+    ShapeProp &
+    Omit<
+      HTMLInputAttributes,
+      "type" | "value" | "min" | "max" | "step" | "size" | "class"
+    >;
+
+  const SIZES: Record<Size, string> = {
+    xs: "[--height:1.25rem] [--thumb:0.75rem] [--track:0.25rem]",
+    sm: "[--height:1.5rem] [--thumb:1rem] [--track:0.375rem]",
+    md: "[--height:1.75rem] [--thumb:1.25rem] [--track:0.5rem]",
+    lg: "[--height:2rem] [--thumb:1.5rem] [--track:0.625rem]",
+    xl: "[--height:2.25rem] [--thumb:1.75rem] [--track:0.75rem]",
+  };
+
+  const SHAPES: Record<Shape, string> = {
+    none: "[--radius:0]",
+    xs: "[--radius:0.25rem]",
+    sm: "[--radius:0.5rem]",
+    md: "[--radius:0.75rem]",
+    lg: "[--radius:1rem]",
+    xl: "[--radius:1.75rem]",
+    full: "[--radius:9999px]",
+  };
+
+  const COLORS: Record<Color, string> = {
+    primary: "text-m3-primary",
+    secondary: "text-m3-secondary",
+    tertiary: "text-m3-tertiary",
+    error: "text-m3-error",
+    plain: "",
+    inherit: "",
+  };
+
+  const clamp = (value: number, min: number, max: number) =>
+    Math.min(Math.max(value, min), max);
 </script>
 
 <script lang="ts">
   let {
-    value = $bindable(0),
+    value = $bindable(),
     min = 0,
     max = 100,
     step = 1,
     marks = [],
-    disabled = false,
-    label = (val: number) => val.toString(),
-    labelAlwaysOn = false,
-    inverted = false,
-    restrictToMarks = false,
-    onChange,
-    onChangeEnd,
-    sliderHandle = defaultSliderHandle,
-    sliderHandleLabel = defaultSliderHandleLabel,
-    sliderHandleLabelArrow = defaultSliderHandleLabelArrow,
-    sliderMark = defaultSliderMark,
-    sliderMarkDot = defaultSliderMarkDot,
-    sliderMarkLabel = defaultSliderMarkLabel,
+    format = String,
+    showValue = false,
+    el = $bindable(),
     class: className,
     color = "primary",
-    size = "md",
-    radius = "full",
+    size = "sm",
+    shape = "full",
+    disabled,
     ...restProps
   }: SliderProps = $props();
 
-  const ctx = setSliderContext(
-    new SliderContext(
-      () => value,
-      (newValue) => (value = newValue),
-      () => min,
-      () => max,
-      () => step,
-      () => marks,
-      () => disabled,
-      (val) => label(val),
-      () => labelAlwaysOn,
-      () => inverted,
-      () => restrictToMarks,
-      () => color,
-      () => size,
-      () => radius,
-      (val) => onChange?.(val),
-      (val) => onChangeEnd?.(val),
-      () => sliderHandle,
-      () => sliderHandleLabel,
-      () => sliderHandleLabelArrow,
-      () => sliderMark,
-      () => sliderMarkDot,
-      () => sliderMarkLabel,
-    ),
-  );
-
-  const SIZE_RATIO: Record<Size, number> = {
-    xs: 1.5,
-    sm: 2,
-    md: 2.5,
-    lg: 3,
-    xl: 3.5,
-  };
+  const fractionOf = (at: number) =>
+    max > min ? (clamp(at, min, max) - min) / (max - min) : 0;
 
-  let ratio = $derived(SIZE_RATIO[ctx.size]);
+  let current = $derived(value ?? (min + max) / 2);
+  let text = $derived(format(current));
 </script>
 
-{#snippet defaultSliderHandle(props: SliderHandleProps)}
-  <SliderHandle {...props} />
-{/snippet}
-
-{#snippet defaultSliderHandleLabel(props: SliderHandleLabelProps)}
-  <SliderHandleLabel {...props} />
-{/snippet}
-
-{#snippet defaultSliderHandleLabelArrow(props: SliderHandleLabelArrowProps)}
-  <SliderHandleLabelArrow {...props} />
-{/snippet}
-
-{#snippet defaultSliderMark(props: SliderMarkProps)}
-  <SliderMark {...props} />
-{/snippet}
-
-{#snippet defaultSliderMarkDot(props: SliderMarkDotProps)}
-  <SliderMarkDot {...props} />
-{/snippet}
-
-{#snippet defaultSliderMarkLabel(props: SliderMarkLabelProps)}
-  <SliderMarkLabel {...props} />
-{/snippet}
-
-<!-- Track -->
 <div
-  class={twMerge(
-    "cursor-pointer bg-m3-surface-container-highest px-2 select-none",
-
-    ctx.disabled && "cursor-not-allowed opacity-50",
-
-    ctx.radius === "none" && "rounded-none",
-    ctx.radius === "xs" && "rounded-xs",
-    ctx.radius === "sm" && "rounded-sm",
-    ctx.radius === "md" && "rounded-lg",
-    ctx.radius === "lg" && "rounded-2xl",
-    ctx.radius === "xl" && "rounded-4xl",
-    ctx.radius === "full" && "rounded-full",
-
-    ctx.size === "xs" && "my-1 h-0.5 px-1.5",
-    ctx.size === "sm" && "my-1 h-1 px-2",
-    ctx.size === "md" && "my-1 h-2 px-2.5",
-    ctx.size === "lg" && "my-1 h-3 px-3",
-    ctx.size === "xl" && "my-1 h-4 px-3.5",
-
-    marks.length > 0 && "mb-6",
-
+  class={cn(
+    "slider relative w-full",
+    SIZES[size],
+    SHAPES[shape],
+    COLORS[color],
+    marks.some((mark) => mark.label) && "pb-5",
+    disabled && "opacity-38",
     className,
   )}
-  {...mergeProps(restProps, {
-    role: "slider",
-    tabindex: ctx.disabled ? -1 : 0,
-    "aria-valuenow": ctx.value,
-    "aria-valuemin": ctx.min,
-    "aria-valuemax": ctx.max,
-    "aria-disabled": ctx.disabled,
-    onpointerdown: ctx.pointerDown,
-    onpointermove: ctx.pointerMove,
-    onpointerup: ctx.pointerUp,
-    onkeydown: ctx.keyDown,
-    onfocus: ctx.focus,
-    onblur: ctx.blur,
-  })}
+  style:--fraction={fractionOf(current)}
 >
-  <div bind:this={ctx.sliderEl} class="relative h-full">
-    <!-- Filled track -->
-    <div
-      class={twMerge(
-        "absolute h-full",
-
-        ctx.animated && "transition-all",
-
-        ctx.color === "primary" && "bg-m3-primary",
-        ctx.color === "secondary" && "bg-m3-secondary",
-        ctx.color === "tertiary" && "bg-m3-tertiary",
-        ctx.color === "error" && "bg-m3-error",
-
-        ctx.radius === "none" && "rounded-none",
-        ctx.radius === "xs" && "rounded-xs",
-        ctx.radius === "sm" && "rounded-sm",
-        ctx.radius === "md" && "rounded-lg",
-        ctx.radius === "lg" && "rounded-2xl",
-        ctx.radius === "xl" && "rounded-4xl",
-        ctx.radius === "full" && "rounded-full",
-      )}
-      style={ctx.inverted
-        ? `right: 0; margin-right: calc(var(--spacing) * -${ratio}); width: calc(${100 - ctx.position}% + var(--spacing) * ${ratio})`
-        : `left: 0; margin-left: calc(var(--spacing) * -${ratio}); width: calc(${ctx.position}% + var(--spacing) * ${ratio})`}
-    ></div>
-
-    <!-- Marks -->
-    {#each marks as { value, label } (value)}
-      {@render ctx.markRenderer({ value, label })}
-    {/each}
-
-    <!-- Handle -->
-    <div
-      class={twMerge(
-        "absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
-        ctx.animated && "transition-all",
-      )}
-      style={`left: ${ctx.position}%`}
-    >
-      {@render ctx.handleRenderer({})}
+  <input
+    bind:this={el}
+    bind:value
+    type="range"
+    {min}
+    {max}
+    {step}
+    {disabled}
+    aria-valuetext={text}
+    class="peer block h-(--height) w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed"
+    {...restProps}
+  />
+
+  {#if marks.length > 0}
+    <div aria-hidden="true" class="pointer-events-none">
+      {#each marks as mark (mark.value)}
+        {#if mark.value !== current}
+          <span
+            class="at dot absolute top-[calc(var(--height)/2)] size-1 -translate-1/2 rounded-full"
+            class:filled={mark.value <= current}
+            style:--at={fractionOf(mark.value)}
+          ></span>
+        {/if}
+        {#if mark.label}
+          <span
+            class="at absolute top-(--height) -translate-x-1/2 pt-1 text-xs whitespace-nowrap text-m3-on-surface-variant"
+            style:--at={fractionOf(mark.value)}
+          >
+            {mark.label}
+          </span>
+        {/if}
+      {/each}
     </div>
-  </div>
+  {/if}
+
+  <span
+    aria-hidden="true"
+    class={cn(
+      "at pointer-events-none absolute bottom-full mb-1 -translate-x-1/2 rounded-md bg-m3-inverse-surface px-2 py-1 text-xs whitespace-nowrap text-m3-inverse-on-surface opacity-0 transition-opacity peer-hover:opacity-100 peer-focus-visible:opacity-100 peer-active:opacity-100",
+      showValue && "opacity-100",
+      disabled && "hidden",
+    )}
+    style:--at={fractionOf(current)}
+  >
+    {text}
+  </span>
 </div>
+
+<style>@layer components { 
+  .slider {
+    --fill-at: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--fraction));
+    --track-fill: linear-gradient(
+      to right,
+      currentColor var(--fill-at),
+      color-mix(in oklab, currentColor 24%, transparent) var(--fill-at)
+    );
+  }
+
+  .at {
+    left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at));
+  }
+
+  .dot {
+    background: currentColor;
+  }
+
+  .dot.filled {
+    background: var(--md-sys-color-surface);
+  }
+
+  input::-webkit-slider-runnable-track {
+    height: var(--track);
+    border-radius: var(--radius);
+    background: var(--track-fill);
+  }
+
+  input::-moz-range-track {
+    height: var(--track);
+    border-radius: var(--radius);
+    background: var(--track-fill);
+  }
+
+  input::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--thumb);
+    height: var(--thumb);
+    margin-top: calc((var(--track) - var(--thumb)) / 2);
+    border-radius: var(--radius);
+    background: currentColor;
+    box-shadow: 0 0 0 2px var(--md-sys-color-surface);
+  }
+
+  input::-moz-range-thumb {
+    width: var(--thumb);
+    height: var(--thumb);
+    border: none;
+    border-radius: var(--radius);
+    background: currentColor;
+    box-shadow: 0 0 0 2px var(--md-sys-color-surface);
+  }
+
+  input:focus-visible {
+    outline: none;
+  }
+
+  input:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid currentColor;
+    outline-offset: 3px;
+  }
+
+  input:focus-visible::-moz-range-thumb {
+    outline: 2px solid currentColor;
+    outline-offset: 3px;
+  }
+ }</style>

package/dist/slider/slider.svelte.d.ts

@@ -1,18 +1,7 @@
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
-import { type SliderHandleLabelArrowProps, type SliderHandleLabelProps, type SliderHandleProps, type SliderMarkDotProps, type SliderMarkLabelProps, type SliderMarkProps } from "./index.js";
-import type { ClassName } from "../utils.js";
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-export declare const SLIDER_COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
-export type SliderColor = Color;
-export type SliderColorProp = ColorProp;
-export declare const SLIDER_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
-export type SliderSize = Size;
-export type SliderSizeProp = SizeProp;
-export declare const SLIDER_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
-export type SliderRadius = Radius;
-export type SliderRadiusProp = RadiusProp;
-export type Mark = {
+import { type ColorProp, type ShapeProp, type SizeProp } from "../base.js";
+import { type ClassName } from "../utils.js";
+import type { HTMLInputAttributes } from "svelte/elements";
+export type SliderMark = {
     value: number;
     label?: string;
 };
@@ -20,22 +9,12 @@ export type SliderProps = {
     value?: number;
     min?: number;
     max?: number;
-    step?: number;
-    marks?: Mark[];
-    disabled?: boolean;
-    label?: (value: number) => string;
-    labelAlwaysOn?: boolean;
-    inverted?: boolean;
-    restrictToMarks?: boolean;
-    onChange?: (value: number) => void;
-    onChangeEnd?: (value: number) => void;
-    sliderHandle?: Snippet<[SliderHandleProps]>;
-    sliderHandleLabel?: Snippet<[SliderHandleLabelProps]>;
-    sliderHandleLabelArrow?: Snippet<[SliderHandleLabelArrowProps]>;
-    sliderMark?: Snippet<[SliderMarkProps]>;
-    sliderMarkDot?: Snippet<[SliderMarkDotProps]>;
-    sliderMarkLabel?: Snippet<[SliderMarkLabelProps]>;
-} & ClassName & SliderColorProp & SliderSizeProp & SliderRadiusProp & HTMLAttributes<HTMLDivElement>;
-declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
+    step?: number | "any";
+    marks?: SliderMark[];
+    format?: (value: number) => string;
+    showValue?: boolean;
+    el?: HTMLInputElement;
+} & ClassName & ColorProp & SizeProp & ShapeProp & Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "step" | "size" | "class">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "el" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/switch/index.d.ts

@@ -1,2 +1 @@
-export { default as SwitchThumb, type SwitchThumbProps, } from "./switch-thumb.svelte";
-export { default as Switch, SWITCH_COLORS, SWITCH_RADII, SWITCH_SIZES, type SwitchColor, type SwitchColorProp, type SwitchProps, type SwitchRadius, type SwitchRadiusProp, type SwitchSize, type SwitchSizeProp, } from "./switch.svelte";
+export { default as Switch, type SwitchProps } from "./switch.svelte";

package/dist/switch/index.js

@@ -1,2 +1 @@
-export { default as SwitchThumb, } from "./switch-thumb.svelte";
-export { default as Switch, SWITCH_COLORS, SWITCH_RADII, SWITCH_SIZES, } from "./switch.svelte";
+export { default as Switch } from "./switch.svelte";

package/dist/switch/switch.svelte

@@ -1,91 +1,67 @@
 <script lang="ts" module>
   import {
-    COLORS,
-    RADII,
-    SIZES,
-    type Color,
+    baseClasses,
     type ColorProp,
-    type Radius,
-    type RadiusProp,
+    type ShapeProp,
     type Size,
     type SizeProp,
   } from "../base.js";
-  import { mergeProps } from "../merge-props.js";
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-  import SwitchThumb, { type SwitchThumbProps } from "./switch-thumb.svelte";
-
-  export const SWITCH_COLORS = COLORS;
-  export type SwitchColor = Color;
-  export type SwitchColorProp = ColorProp;
-
-  export const SWITCH_SIZES = SIZES;
-  export type SwitchSize = Size;
-  export type SwitchSizeProp = SizeProp;
-
-  export const SWITCH_RADII = RADII;
-  export type SwitchRadius = Radius;
-  export type SwitchRadiusProp = RadiusProp;
+  import { cn, type ClassName } from "../utils.js";
+  import type { HTMLInputAttributes } from "svelte/elements";
 
   export type SwitchProps = {
     checked?: boolean;
-    thumb?: Snippet<[SwitchThumbProps]>;
+    el?: HTMLInputElement;
   } & ClassName &
-    SwitchColorProp &
-    SwitchSizeProp &
-    SwitchRadiusProp &
-    HTMLButtonAttributes;
+    ColorProp &
+    SizeProp &
+    ShapeProp &
+    Omit<HTMLInputAttributes, "type" | "role" | "size" | "class" | "checked">;
+
+  const SIZES: Record<Size, string> = {
+    xs: "h-4 w-7 before:size-2 checked:before:translate-x-3",
+    sm: "h-6 w-10 before:size-4 checked:before:translate-x-4",
+    md: "h-7 w-12 before:size-5 checked:before:translate-x-5",
+    lg: "h-8 w-13 before:size-6 checked:before:translate-x-5",
+    xl: "h-9 w-15 before:size-7 checked:before:translate-x-6",
+  };
 </script>
 
 <script lang="ts">
   let {
-    checked = $bindable(false),
-    thumb = defaultThumb,
+    checked = $bindable(),
+    el = $bindable(),
     class: className,
     color = "primary",
     size = "sm",
-    radius = "xl",
+    shape = "full",
     ...restProps
   }: SwitchProps = $props();
 </script>
 
-{#snippet defaultThumb(props: SwitchThumbProps)}
-  <SwitchThumb {...props} />
-{/snippet}
-
-<button
-  type="button"
+<input
+  bind:this={el}
+  bind:checked
+  type="checkbox"
   role="switch"
-  aria-checked={checked}
-  class={twMerge(
-    "group relative inline-flex cursor-pointer bg-m3-surface-container-highest transition-all focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  class={cn(
+    "relative inline-block shrink-0 cursor-pointer appearance-none bg-m3-surface-container-highest align-middle ring-2 ring-m3-outline ring-inset before:absolute before:top-1 before:left-1 before:rounded-[inherit] before:bg-m3-outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-38 motion-safe:transition-colors motion-safe:before:transition-all",
 
     color === "primary" &&
-      "focus-visible:outline-m3-primary aria-checked:bg-m3-primary",
+      "checked:bg-m3-primary checked:ring-m3-primary checked:before:bg-m3-on-primary focus-visible:outline-m3-primary",
     color === "secondary" &&
-      "focus-visible:outline-m3-secondary aria-checked:bg-m3-secondary",
+      "checked:bg-m3-secondary checked:ring-m3-secondary checked:before:bg-m3-on-secondary focus-visible:outline-m3-secondary",
     color === "tertiary" &&
-      "focus-visible:outline-m3-tertiary aria-checked:bg-m3-tertiary",
+      "checked:bg-m3-tertiary checked:ring-m3-tertiary checked:before:bg-m3-on-tertiary focus-visible:outline-m3-tertiary",
     color === "error" &&
-      "focus-visible:outline-m3-error aria-checked:bg-m3-error",
-
-    size === "xs" && "h-4 w-8",
-    size === "sm" && "h-5 w-10",
-    size === "md" && "h-6 w-12",
-    size === "lg" && "h-7 w-14",
-    size === "xl" && "h-8 w-16",
+      "checked:bg-m3-error checked:ring-m3-error checked:before:bg-m3-on-error focus-visible:outline-m3-error",
+    (color === "plain" || color === "inherit") &&
+      "checked:bg-current checked:ring-current checked:before:bg-m3-surface focus-visible:outline-current",
 
-    radius === "xs" && "rounded-xs",
-    radius === "sm" && "rounded-sm",
-    radius === "md" && "rounded-lg",
-    radius === "lg" && "rounded-2xl",
-    radius === "xl" && "rounded-4xl",
+    SIZES[size],
+    baseClasses({ shape }),
 
     className,
   )}
-  {...mergeProps(restProps, { onclick: () => (checked = !checked) })}
->
-  {@render thumb({ color, size, radius })}
-</button>
+  {...restProps}
+/>

package/dist/switch/switch.svelte.d.ts

@@ -1,21 +1,10 @@
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
-import type { ClassName } from "../utils.js";
-import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-import { type SwitchThumbProps } from "./switch-thumb.svelte";
-export declare const SWITCH_COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
-export type SwitchColor = Color;
-export type SwitchColorProp = ColorProp;
-export declare const SWITCH_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
-export type SwitchSize = Size;
-export type SwitchSizeProp = SizeProp;
-export declare const SWITCH_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
-export type SwitchRadius = Radius;
-export type SwitchRadiusProp = RadiusProp;
+import { type ColorProp, type ShapeProp, type SizeProp } from "../base.js";
+import { type ClassName } from "../utils.js";
+import type { HTMLInputAttributes } from "svelte/elements";
 export type SwitchProps = {
     checked?: boolean;
-    thumb?: Snippet<[SwitchThumbProps]>;
-} & ClassName & SwitchColorProp & SwitchSizeProp & SwitchRadiusProp & HTMLButtonAttributes;
-declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
+    el?: HTMLInputElement;
+} & ClassName & ColorProp & SizeProp & ShapeProp & Omit<HTMLInputAttributes, "type" | "role" | "size" | "class" | "checked">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "el" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/textarea/index.d.ts

@@ -1 +1 @@
-export { default as Textarea, TEXTAREA_COLORS, TEXTAREA_RADII, TEXTAREA_SIZES, TEXTAREA_VARIANTS, type TextareaColor, type TextareaColorProp, type TextareaProps, type TextareaRadius, type TextareaRadiusProp, type TextareaSize, type TextareaSizeProp, type TextareaVariant, type TextareaVariantProp, } from "./textarea.svelte";
+export { default as Textarea, type TextareaProps } from "./textarea.svelte";

package/dist/textarea/index.js

@@ -1 +1 @@
-export { default as Textarea, TEXTAREA_COLORS, TEXTAREA_RADII, TEXTAREA_SIZES, TEXTAREA_VARIANTS, } from "./textarea.svelte";
+export { default as Textarea } from "./textarea.svelte";