kosui 0.0.24 → 0.0.25

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export * from "./portal";
 export * from "./progress";
 export * from "./shortcut";
 export * from "./skeleton";
+export * from "./switch";
 export * from "./textarea";
 export * from "./toggle";
 export * from "./tooltip";

package/dist/index.js

@@ -33,6 +33,7 @@ export * from "./portal";
 export * from "./progress";
 export * from "./shortcut";
 export * from "./skeleton";
+export * from "./switch";
 export * from "./textarea";
 export * from "./toggle";
 export * from "./tooltip";

package/dist/input/input.svelte

@@ -1,20 +1,18 @@
 <script lang="ts" module>
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
   import {
     COLORS,
-    noop,
     RADII,
     SIZES,
-    type ClassName,
     type Color,
     type ColorProp,
-    type ElementRef,
     type Radius,
     type RadiusProp,
     type Size,
     type SizeProp,
-  } from "..";
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
+  } from "../base";
+  import { noop, type ClassName, type ElementRef } from "../utils";
 
   export const INPUT_VARIANTS = ["outlined", "filled", "inherit"] as const;
   export type InputVariant = (typeof INPUT_VARIANTS)[number];
@@ -60,6 +58,8 @@
   bind:this={el}
   use:ref
   class={twMerge(
+    "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" &&
@@ -82,8 +82,6 @@
     radius == "lg" && "rounded-2xl",
     radius == "xl" && "rounded-4xl",
 
-    "disabled:cursor-not-allowed disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/38",
-
     className,
   )}
   {...restProps}

package/dist/input/input.svelte.d.ts

@@ -1,5 +1,6 @@
-import { type ClassName, type Color, type ColorProp, type ElementRef, type Radius, type RadiusProp, type Size, type SizeProp } from "..";
 import type { HTMLInputAttributes } from "svelte/elements";
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base";
+import { type ClassName, type ElementRef } from "../utils";
 export declare const INPUT_VARIANTS: readonly ["outlined", "filled", "inherit"];
 export type InputVariant = (typeof INPUT_VARIANTS)[number];
 export type InputVariantProp = {

package/dist/switch/index.d.ts

@@ -0,0 +1 @@
+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";

package/dist/switch/index.js

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

package/dist/switch/switch.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" module>
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import {
+    COLORS,
+    RADII,
+    SIZES,
+    type Color,
+    type ColorProp,
+    type Radius,
+    type RadiusProp,
+    type Size,
+    type SizeProp,
+  } from "../base";
+  import { mergeProps } from "../merge-props";
+  import type { ClassName } from "../utils";
+
+  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;
+
+  export type SwitchProps = {
+    checked?: boolean;
+  } & ClassName &
+    SwitchSizeProp &
+    SwitchRadiusProp &
+    SwitchColorProp &
+    HTMLButtonAttributes;
+</script>
+
+<script lang="ts">
+  let {
+    checked = $bindable(false),
+    class: className,
+    color = "primary",
+    size = "sm",
+    radius = "xl",
+    ...restProps
+  }: SwitchProps = $props();
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  class={twMerge(
+    "group relative inline-flex cursor-pointer transition-all focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+
+    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",
+
+    className,
+  )}
+  {...mergeProps(restProps, { onclick: () => (checked = !checked) })}
+>
+  <!-- Track -->
+  <div
+    class={twMerge(
+      "bg-m3-surface-container-highest transition-colors",
+
+      color === "primary" && "group-aria-checked:bg-m3-primary",
+      color === "secondary" && "group-aria-checked:bg-m3-secondary",
+      color === "tertiary" && "group-aria-checked:bg-m3-tertiary",
+      color === "error" && "group-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",
+
+      radius === "xs" && "rounded-xs",
+      radius === "sm" && "rounded-sm",
+      radius === "md" && "rounded-lg",
+      radius === "lg" && "rounded-2xl",
+      radius === "xl" && "rounded-4xl",
+    )}
+  ></div>
+  <!-- Thumb -->
+  <div
+    class={twMerge(
+      "absolute top-0.5 left-0.5 bg-m3-on-primary shadow-sm transition-all",
+
+      size === "xs" && "size-3 group-aria-checked:translate-x-4",
+      size === "sm" && "size-4 group-aria-checked:translate-x-5",
+      size === "md" && "size-5 group-aria-checked:translate-x-6",
+      size === "lg" && "size-6 group-aria-checked:translate-x-7",
+      size === "xl" && "size-7 group-aria-checked:translate-x-8",
+
+      radius === "xs" && "rounded-xs",
+      radius === "sm" && "rounded-sm",
+      radius === "md" && "rounded-lg",
+      radius === "lg" && "rounded-2xl",
+      radius === "xl" && "rounded-4xl",
+    )}
+  ></div>
+</button>

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

@@ -0,0 +1,18 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base";
+import type { ClassName } from "../utils";
+export declare const SWITCH_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export type SwitchColor = Color;
+export type SwitchColorProp = ColorProp;
+export declare const SWITCH_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type SwitchSize = Size;
+export type SwitchSizeProp = SizeProp;
+export declare const SWITCH_RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type SwitchRadius = Radius;
+export type SwitchRadiusProp = RadiusProp;
+export type SwitchProps = {
+    checked?: boolean;
+} & ClassName & SwitchSizeProp & SwitchRadiusProp & SwitchColorProp & HTMLButtonAttributes;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/textarea/textarea.svelte

@@ -53,6 +53,8 @@
 <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" &&
@@ -75,9 +77,6 @@
     radius == "lg" && "rounded-2xl",
     radius == "xl" && "rounded-4xl",
 
-    "disabled:cursor-not-allowed disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/38",
-
-    "px-3 py-2",
     className,
   )}
   {...restProps}

package/dist/toggle/toggle-group.svelte

@@ -36,6 +36,13 @@
   );
 </script>
 
-<div bind:this={el} use:ref class={twMerge("flex", className)} {...restProps}>
+<div
+  bind:this={el}
+  use:ref
+  role="listbox"
+  aria-orientation="horizontal"
+  class={twMerge("flex", className)}
+  {...restProps}
+>
   {@render children()}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "license": "MIT",
   "repository": {