kosui 0.2.0 → 0.5.0

package/dist/textarea/textarea.svelte

@@ -1,82 +1,42 @@
 <script module lang="ts">
-  import {
-    COLORS,
-    RADII,
-    SIZES,
-    type Color,
-    type ColorProp,
-    type Radius,
-    type RadiusProp,
-    type Size,
-    type SizeProp,
-  } from "../base.js";
-  import type { ClassName } from "../utils.js";
+  import type { ColorProp, ShapeProp, Size, SizeProp } from "../base.js";
+  import { fieldClasses, type InputVariant } from "../input/field.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { HTMLTextareaAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
 
-  export const TEXTAREA_VARIANTS = ["outlined", "filled", "inherit"] as const;
-  export type TextareaVariant = (typeof TEXTAREA_VARIANTS)[number];
-  export type TextareaVariantProp = { variant?: TextareaVariant };
-
-  export const TEXTAREA_COLORS = COLORS;
-  export type TextareaColor = Color;
-  export type TextareaColorProp = ColorProp;
-
-  export const TEXTAREA_SIZES = SIZES;
-  export type TextareaSize = Size;
-  export type TextareaSizeProp = SizeProp;
-
-  export const TEXTAREA_RADII = RADII;
-  export type TextareaRadius = Radius;
-  export type TextareaRadiusProp = RadiusProp;
-
-  export type TextareaProps = ClassName &
-    TextareaVariantProp &
-    TextareaSizeProp &
-    TextareaRadiusProp &
-    TextareaColorProp &
-    Omit<HTMLTextareaAttributes, "size">;
+  export type TextareaProps = {
+    variant?: InputVariant;
+    el?: HTMLTextAreaElement;
+  } & ClassName &
+    ColorProp &
+    SizeProp &
+    ShapeProp &
+    Omit<HTMLTextareaAttributes, "class">;
+
+  const SIZES: Record<Size, string> = {
+    xs: "px-2.5 py-1.5 text-xs",
+    sm: "px-3 py-2 text-sm",
+    md: "px-3.5 py-2.5 text-base",
+    lg: "px-4 py-3 text-lg",
+    xl: "px-5 py-4 text-xl",
+  };
 </script>
 
 <script lang="ts">
   let {
     value = $bindable(),
+    el = $bindable(),
     class: className,
     variant = "outlined",
     color = "primary",
     size = "sm",
-    radius = "md",
+    shape = "xs",
     ...restProps
   }: TextareaProps = $props();
 </script>
 
 <textarea
   bind:value
-  class={twMerge(
-    "px-3 py-2 disabled:cursor-not-allowed disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/38",
-
-    variant === "outlined" &&
-      "bg-m3-surface-container-lowest outline-1 outline-m3-outline-variant hover:outline-m3-outline/80 disabled:hover:outline-m3-outline-variant",
-    variant === "filled" &&
-      "bg-m3-surface-container hover:bg-m3-surface-container-high focus:outline-1",
-
-    color === "primary" && "focus-visible:outline-m3-primary",
-    color === "secondary" && "focus-visible:outline-m3-secondary",
-    color === "tertiary" && "focus-visible:outline-m3-tertiary",
-    color === "error" && "focus-visible:outline-m3-error",
-
-    size === "xs" && "px-2.5 py-1.5 text-xs",
-    size === "sm" && "px-3 py-1.5 text-sm",
-    size === "md" && "px-3.5 py-2 text-base",
-    size === "lg" && "px-4 py-2.5 text-lg",
-    size === "xl" && "px-5 py-4 text-xl",
-
-    radius == "xs" && "rounded-xs",
-    radius == "sm" && "rounded-sm",
-    radius == "md" && "rounded-lg",
-    radius == "lg" && "rounded-2xl",
-    radius == "xl" && "rounded-4xl",
-
-    className,
-  )}
+  bind:this={el}
+  class={cn(fieldClasses({ variant, color, shape }), SIZES[size], className)}
   {...restProps}></textarea>

package/dist/textarea/textarea.svelte.d.ts

@@ -1,21 +1,11 @@
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
-import type { ClassName } from "../utils.js";
+import type { ColorProp, ShapeProp, SizeProp } from "../base.js";
+import { type InputVariant } from "../input/field.js";
+import { type ClassName } from "../utils.js";
 import type { HTMLTextareaAttributes } from "svelte/elements";
-export declare const TEXTAREA_VARIANTS: readonly ["outlined", "filled", "inherit"];
-export type TextareaVariant = (typeof TEXTAREA_VARIANTS)[number];
-export type TextareaVariantProp = {
-    variant?: TextareaVariant;
-};
-export declare const TEXTAREA_COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
-export type TextareaColor = Color;
-export type TextareaColorProp = ColorProp;
-export declare const TEXTAREA_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
-export type TextareaSize = Size;
-export type TextareaSizeProp = SizeProp;
-export declare const TEXTAREA_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
-export type TextareaRadius = Radius;
-export type TextareaRadiusProp = RadiusProp;
-export type TextareaProps = ClassName & TextareaVariantProp & TextareaSizeProp & TextareaRadiusProp & TextareaColorProp & Omit<HTMLTextareaAttributes, "size">;
-declare const Textarea: import("svelte").Component<TextareaProps, {}, "value">;
+export type TextareaProps = {
+    variant?: InputVariant;
+    el?: HTMLTextAreaElement;
+} & ClassName & ColorProp & SizeProp & ShapeProp & Omit<HTMLTextareaAttributes, "class">;
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "el" | "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/theme.css

@@ -0,0 +1,191 @@
+@source "./";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-m3-primary: var(--md-sys-color-primary);
+  --color-m3-surface-tint: var(--md-sys-color-surface-tint);
+  --color-m3-on-primary: var(--md-sys-color-on-primary);
+  --color-m3-primary-container: var(--md-sys-color-primary-container);
+  --color-m3-on-primary-container: var(--md-sys-color-on-primary-container);
+  --color-m3-secondary: var(--md-sys-color-secondary);
+  --color-m3-on-secondary: var(--md-sys-color-on-secondary);
+  --color-m3-secondary-container: var(--md-sys-color-secondary-container);
+  --color-m3-on-secondary-container: var(--md-sys-color-on-secondary-container);
+  --color-m3-tertiary: var(--md-sys-color-tertiary);
+  --color-m3-on-tertiary: var(--md-sys-color-on-tertiary);
+  --color-m3-tertiary-container: var(--md-sys-color-tertiary-container);
+  --color-m3-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
+  --color-m3-error: var(--md-sys-color-error);
+  --color-m3-on-error: var(--md-sys-color-on-error);
+  --color-m3-error-container: var(--md-sys-color-error-container);
+  --color-m3-on-error-container: var(--md-sys-color-on-error-container);
+  --color-m3-background: var(--md-sys-color-background);
+  --color-m3-on-background: var(--md-sys-color-on-background);
+  --color-m3-surface: var(--md-sys-color-surface);
+  --color-m3-on-surface: var(--md-sys-color-on-surface);
+  --color-m3-surface-variant: var(--md-sys-color-surface-variant);
+  --color-m3-on-surface-variant: var(--md-sys-color-on-surface-variant);
+  --color-m3-outline: var(--md-sys-color-outline);
+  --color-m3-outline-variant: var(--md-sys-color-outline-variant);
+  --color-m3-shadow: var(--md-sys-color-shadow);
+  --color-m3-scrim: var(--md-sys-color-scrim);
+  --color-m3-inverse-surface: var(--md-sys-color-inverse-surface);
+  --color-m3-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
+  --color-m3-inverse-primary: var(--md-sys-color-inverse-primary);
+  --color-m3-primary-fixed: var(--md-sys-color-primary-fixed);
+  --color-m3-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
+  --color-m3-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
+  --color-m3-on-primary-fixed-variant: var(
+    --md-sys-color-on-primary-fixed-variant
+  );
+  --color-m3-secondary-fixed: var(--md-sys-color-secondary-fixed);
+  --color-m3-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
+  --color-m3-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
+  --color-m3-on-secondary-fixed-variant: var(
+    --md-sys-color-on-secondary-fixed-variant
+  );
+  --color-m3-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
+  --color-m3-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
+  --color-m3-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
+  --color-m3-on-tertiary-fixed-variant: var(
+    --md-sys-color-on-tertiary-fixed-variant
+  );
+  --color-m3-surface-dim: var(--md-sys-color-surface-dim);
+  --color-m3-surface-bright: var(--md-sys-color-surface-bright);
+  --color-m3-surface-container-lowest: var(
+    --md-sys-color-surface-container-lowest
+  );
+  --color-m3-surface-container-low: var(--md-sys-color-surface-container-low);
+  --color-m3-surface-container: var(--md-sys-color-surface-container);
+  --color-m3-surface-container-high: var(--md-sys-color-surface-container-high);
+  --color-m3-surface-container-highest: var(
+    --md-sys-color-surface-container-highest
+  );
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --md-sys-color-primary: rgb(17 102 130);
+    --md-sys-color-surface-tint: rgb(17 102 130);
+    --md-sys-color-on-primary: rgb(255 255 255);
+    --md-sys-color-primary-container: rgb(189 233 255);
+    --md-sys-color-on-primary-container: rgb(0 31 42);
+    --md-sys-color-secondary: rgb(77 97 108);
+    --md-sys-color-on-secondary: rgb(255 255 255);
+    --md-sys-color-secondary-container: rgb(208 230 242);
+    --md-sys-color-on-secondary-container: rgb(8 30 39);
+    --md-sys-color-tertiary: rgb(93 91 125);
+    --md-sys-color-on-tertiary: rgb(255 255 255);
+    --md-sys-color-tertiary-container: rgb(227 223 255);
+    --md-sys-color-on-tertiary-container: rgb(25 24 54);
+    --md-sys-color-error: rgb(186 26 26);
+    --md-sys-color-on-error: rgb(255 255 255);
+    --md-sys-color-error-container: rgb(255 218 214);
+    --md-sys-color-on-error-container: rgb(65 0 2);
+    --md-sys-color-background: rgb(246 250 253);
+    --md-sys-color-on-background: rgb(23 28 31);
+    --md-sys-color-surface: rgb(246 250 253);
+    --md-sys-color-on-surface: rgb(23 28 31);
+    --md-sys-color-surface-variant: rgb(220 228 233);
+    --md-sys-color-on-surface-variant: rgb(64 72 76);
+    --md-sys-color-outline: rgb(112 120 125);
+    --md-sys-color-outline-variant: rgb(192 200 205);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(44 49 52);
+    --md-sys-color-inverse-on-surface: rgb(237 241 245);
+    --md-sys-color-inverse-primary: rgb(139 208 239);
+    --md-sys-color-primary-fixed: rgb(189 233 255);
+    --md-sys-color-on-primary-fixed: rgb(0 31 42);
+    --md-sys-color-primary-fixed-dim: rgb(139 208 239);
+    --md-sys-color-on-primary-fixed-variant: rgb(0 77 100);
+    --md-sys-color-secondary-fixed: rgb(208 230 242);
+    --md-sys-color-on-secondary-fixed: rgb(8 30 39);
+    --md-sys-color-secondary-fixed-dim: rgb(180 202 214);
+    --md-sys-color-on-secondary-fixed-variant: rgb(53 74 83);
+    --md-sys-color-tertiary-fixed: rgb(227 223 255);
+    --md-sys-color-on-tertiary-fixed: rgb(25 24 54);
+    --md-sys-color-tertiary-fixed-dim: rgb(198 194 234);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(69 67 100);
+    --md-sys-color-surface-dim: rgb(214 219 222);
+    --md-sys-color-surface-bright: rgb(246 250 253);
+    --md-sys-color-surface-container-lowest: rgb(255 255 255);
+    --md-sys-color-surface-container-low: rgb(240 244 248);
+    --md-sys-color-surface-container: rgb(234 238 242);
+    --md-sys-color-surface-container-high: rgb(228 233 236);
+    --md-sys-color-surface-container-highest: rgb(223 227 231);
+  }
+
+  .dark {
+    color-scheme: dark;
+    --md-sys-color-primary: rgb(139 208 239);
+    --md-sys-color-surface-tint: rgb(139 208 239);
+    --md-sys-color-on-primary: rgb(0 53 70);
+    --md-sys-color-primary-container: rgb(0 77 100);
+    --md-sys-color-on-primary-container: rgb(189 233 255);
+    --md-sys-color-secondary: rgb(180 202 214);
+    --md-sys-color-on-secondary: rgb(31 51 60);
+    --md-sys-color-secondary-container: rgb(53 74 83);
+    --md-sys-color-on-secondary-container: rgb(208 230 242);
+    --md-sys-color-tertiary: rgb(198 194 234);
+    --md-sys-color-on-tertiary: rgb(46 45 77);
+    --md-sys-color-tertiary-container: rgb(69 67 100);
+    --md-sys-color-on-tertiary-container: rgb(227 223 255);
+    --md-sys-color-error: rgb(255 180 171);
+    --md-sys-color-on-error: rgb(105 0 5);
+    --md-sys-color-error-container: rgb(147 0 10);
+    --md-sys-color-on-error-container: rgb(255 218 214);
+    --md-sys-color-background: rgb(15 20 23);
+    --md-sys-color-on-background: rgb(223 227 231);
+    --md-sys-color-surface: rgb(15 20 23);
+    --md-sys-color-on-surface: rgb(223 227 231);
+    --md-sys-color-surface-variant: rgb(64 72 76);
+    --md-sys-color-on-surface-variant: rgb(192 200 205);
+    --md-sys-color-outline: rgb(138 146 151);
+    --md-sys-color-outline-variant: rgb(64 72 76);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(223 227 231);
+    --md-sys-color-inverse-on-surface: rgb(44 49 52);
+    --md-sys-color-inverse-primary: rgb(17 102 130);
+    --md-sys-color-primary-fixed: rgb(189 233 255);
+    --md-sys-color-on-primary-fixed: rgb(0 31 42);
+    --md-sys-color-primary-fixed-dim: rgb(139 208 239);
+    --md-sys-color-on-primary-fixed-variant: rgb(0 77 100);
+    --md-sys-color-secondary-fixed: rgb(208 230 242);
+    --md-sys-color-on-secondary-fixed: rgb(8 30 39);
+    --md-sys-color-secondary-fixed-dim: rgb(180 202 214);
+    --md-sys-color-on-secondary-fixed-variant: rgb(53 74 83);
+    --md-sys-color-tertiary-fixed: rgb(227 223 255);
+    --md-sys-color-on-tertiary-fixed: rgb(25 24 54);
+    --md-sys-color-tertiary-fixed-dim: rgb(198 194 234);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(69 67 100);
+    --md-sys-color-surface-dim: rgb(15 20 23);
+    --md-sys-color-surface-bright: rgb(53 58 61);
+    --md-sys-color-surface-container-lowest: rgb(10 15 17);
+    --md-sys-color-surface-container-low: rgb(23 28 31);
+    --md-sys-color-surface-container: rgb(27 32 35);
+    --md-sys-color-surface-container-high: rgb(38 43 45);
+    --md-sys-color-surface-container-highest: rgb(48 53 56);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-m3-outline-variant);
+  }
+
+  body {
+    background-color: var(--color-m3-surface);
+    color: var(--color-m3-on-surface);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}

package/dist/toggle/index.d.ts

@@ -1,3 +1,2 @@
 export { default as ToggleButton, type ToggleButtonProps, } from "./toggle-button.svelte";
-export { getToggleContext, setToggleContext, ToggleContext, } from "./toggle-context.svelte.js";
 export { default as ToggleGroup, type ToggleGroupProps, } from "./toggle-group.svelte";

package/dist/toggle/index.js

@@ -1,3 +1,2 @@
 export { default as ToggleButton, } from "./toggle-button.svelte";
-export { getToggleContext, setToggleContext, ToggleContext, } from "./toggle-context.svelte.js";
 export { default as ToggleGroup, } from "./toggle-group.svelte";

package/dist/toggle/toggle-button.svelte

@@ -1,19 +1,62 @@
 <script module lang="ts">
-  import type { Variants } from "../base.js";
+  import type { Color, Shape, Size } from "../base.js";
   import { mergeProps } from "../merge-props.js";
-  import { getToggleContext } from "./index.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import { getToggleContext } from "./toggle-context.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
+  import type { HTMLInputAttributes } from "svelte/elements";
 
   export type ToggleButtonProps<T> = {
     value: T;
     children: Snippet;
-  } & ElementRef &
-    ClassName &
-    Omit<Variants, "variant"> &
-    Omit<HTMLButtonAttributes, "value">;
+    el?: HTMLInputElement;
+  } & ClassName &
+    Omit<
+      HTMLInputAttributes,
+      "value" | "type" | "name" | "checked" | "children" | "class"
+    >;
+
+  const SIZES: Record<Size, string> = {
+    xs: "h-7 gap-1.5 px-3 text-xs",
+    sm: "h-9 gap-2 px-4 text-sm",
+    md: "h-11 gap-2 px-5 text-base",
+    lg: "h-13 gap-2.5 px-6 text-lg",
+    xl: "h-15 gap-3 px-7 text-xl",
+  };
+
+  const SHAPES: Record<Shape, string> = {
+    none: "",
+    xs: "first:rounded-l-sm last:rounded-r-sm",
+    sm: "first:rounded-l-lg last:rounded-r-lg",
+    md: "first:rounded-l-xl last:rounded-r-xl",
+    lg: "first:rounded-l-2xl last:rounded-r-2xl",
+    xl: "first:rounded-l-[1.75rem] last:rounded-r-[1.75rem]",
+    full: "first:rounded-l-full last:rounded-r-full",
+  };
+
+  const COLORS: Record<Color, string> = {
+    primary:
+      "border-m3-primary text-m3-primary has-checked:bg-m3-primary has-checked:text-m3-on-primary",
+    secondary:
+      "border-m3-secondary text-m3-secondary has-checked:bg-m3-secondary has-checked:text-m3-on-secondary",
+    tertiary:
+      "border-m3-tertiary text-m3-tertiary has-checked:bg-m3-tertiary has-checked:text-m3-on-tertiary",
+    error:
+      "border-m3-error text-m3-error has-checked:bg-m3-error has-checked:text-m3-on-error",
+    plain:
+      "border-current has-checked:bg-current/10 has-checked:shadow-[inset_0_0_0_2px_currentColor]",
+    inherit:
+      "border-current has-checked:bg-current/10 has-checked:shadow-[inset_0_0_0_2px_currentColor]",
+  };
+
+  const FOCUS: Record<Color, string> = {
+    primary: "focus-visible:outline-m3-primary",
+    secondary: "focus-visible:outline-m3-secondary",
+    tertiary: "focus-visible:outline-m3-tertiary",
+    error: "focus-visible:outline-m3-error",
+    plain: "focus-visible:outline-current",
+    inherit: "focus-visible:outline-current",
+  };
 </script>
 
 <script lang="ts" generics="T">
@@ -21,42 +64,33 @@
     value,
     children,
     el = $bindable(),
-    ref = noop,
     class: className,
-    color = "primary",
-    shape = "rounded",
-    type = "button",
     ...restProps
   }: ToggleButtonProps<T> = $props();
 
-  const ctx = getToggleContext<T>();
+  const ctx = getToggleContext();
 </script>
 
-<button
-  bind:this={el}
-  use:ref
-  role="option"
-  aria-selected={ctx.value === value}
-  class={twMerge(
-    "bg-md-background text-md-on-surface flex items-center gap-1 border-y border-l px-4 py-2 text-sm last:border-r",
-
-    shape === "square" && "",
-    shape === "rounded" && "first:rounded-l-md last:rounded-r-md",
-    shape === "circle" && "first:rounded-l-full last:rounded-r-full",
-
-    color === "primary" &&
-      "border-m3-primary text-m3-primary aria-selected:bg-m3-primary aria-selected:text-m3-on-primary",
-    color === "secondary" &&
-      "border-m3-secondary text-m3-secondary aria-selected:bg-m3-secondary aria-selected:text-m3-on-secondary",
-    color === "tertiary" &&
-      "border-m3-tertiary text-m3-tertiary aria-selected:bg-m3-tertiary aria-selected:text-m3-on-tertiary",
-    color === "error" &&
-      "border-m3-error text-m3-error aria-selected:bg-m3-error aria-selected:text-m3-on-error",
-
+<label
+  class={cn(
+    "relative inline-flex cursor-pointer items-center justify-center border-y border-l select-none last:border-r has-disabled:cursor-not-allowed has-disabled:opacity-38",
+    SIZES[ctx.size],
+    SHAPES[ctx.shape],
+    COLORS[ctx.color],
     className,
   )}
-  {type}
-  {...mergeProps(restProps, { onclick: () => (ctx.value = value) })}
 >
+  <input
+    bind:this={el}
+    type="radio"
+    name={ctx.name}
+    value={String(value)}
+    checked={ctx.value === value}
+    class={cn(
+      "absolute -inset-px cursor-[inherit] appearance-none rounded-[inherit] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+      FOCUS[ctx.color],
+    )}
+    {...mergeProps(restProps, { onchange: () => ctx.select(value) })}
+  />
   {@render children()}
-</button>
+</label>

package/dist/toggle/toggle-button.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { Variants } from "../base.js";
-import { type ClassName, type ElementRef } from "../utils.js";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLInputAttributes } from "svelte/elements";
 export type ToggleButtonProps<T> = {
     value: T;
     children: Snippet;
-} & ElementRef & ClassName & Omit<Variants, "variant"> & Omit<HTMLButtonAttributes, "value">;
+    el?: HTMLInputElement;
+} & ClassName & Omit<HTMLInputAttributes, "value" | "type" | "name" | "checked" | "children" | "class">;
 declare function $$render<T>(): {
     props: ToggleButtonProps<T>;
     exports: {};

package/dist/toggle/toggle-context.d.ts

@@ -0,0 +1,10 @@
+import type { Color, Shape, Size } from "../base.js";
+export type ToggleContext<T = unknown> = {
+    readonly value: T | undefined;
+    readonly name: string;
+    readonly color: Color;
+    readonly size: Size;
+    readonly shape: Shape;
+    select(value: T): void;
+};
+export declare const getToggleContext: () => ToggleContext<unknown>, setToggleContext: (context: ToggleContext<unknown>) => ToggleContext<unknown>;

package/dist/toggle/toggle-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "svelte";
+export const [getToggleContext, setToggleContext] = createContext();

package/dist/toggle/toggle-group.svelte

@@ -1,47 +1,66 @@
 <script module lang="ts">
-  import { setToggleContext, ToggleContext } from "./index.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import type { ColorProp, ShapeProp, SizeProp } from "../base.js";
+  import { setToggleContext } from "./toggle-context.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
 
   export type ToggleGroupProps<T> = {
     value?: T;
-    onChange?: (value?: T) => void;
-    children: Snippet<[]>;
-  } & ElementRef &
-    ClassName &
-    Omit<HTMLAttributes<HTMLDivElement>, "children">;
+    onChange?: (value: T) => void;
+    name?: string;
+    children: Snippet;
+    el?: HTMLDivElement;
+  } & ClassName &
+    ColorProp &
+    SizeProp &
+    ShapeProp &
+    Omit<HTMLAttributes<HTMLDivElement>, "children" | "class">;
 </script>
 
 <script lang="ts" generics="T">
   let {
     value = $bindable(),
     onChange,
+    name,
     children,
     el = $bindable(),
-    ref = noop,
     class: className,
+    color = "primary",
+    size = "sm",
+    shape = "full",
     ...restProps
   }: ToggleGroupProps<T> = $props();
 
-  setToggleContext(
-    new ToggleContext(
-      () => value,
-      (newValue) => {
-        value = newValue;
-        onChange?.(newValue);
-      },
-    ),
-  );
+  const id = $props.id();
+
+  setToggleContext({
+    get value() {
+      return value;
+    },
+    get name() {
+      return name ?? id;
+    },
+    get color() {
+      return color;
+    },
+    get size() {
+      return size;
+    },
+    get shape() {
+      return shape;
+    },
+    select(selected) {
+      value = selected as T;
+      onChange?.(selected as T);
+    },
+  });
 </script>
 
 <div
   bind:this={el}
-  use:ref
-  role="listbox"
-  aria-orientation="horizontal"
-  class={twMerge("flex", className)}
+  role="radiogroup"
+  class={cn("flex", className)}
   {...restProps}
 >
   {@render children()}

package/dist/toggle/toggle-group.svelte.d.ts

@@ -1,11 +1,14 @@
-import { type ClassName, type ElementRef } from "../utils.js";
+import type { ColorProp, ShapeProp, SizeProp } from "../base.js";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type ToggleGroupProps<T> = {
     value?: T;
-    onChange?: (value?: T) => void;
-    children: Snippet<[]>;
-} & ElementRef & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+    onChange?: (value: T) => void;
+    name?: string;
+    children: Snippet;
+    el?: HTMLDivElement;
+} & ClassName & ColorProp & SizeProp & ShapeProp & Omit<HTMLAttributes<HTMLDivElement>, "children" | "class">;
 declare function $$render<T>(): {
     props: ToggleGroupProps<T>;
     exports: {};