kosui 0.0.20 → 0.0.24

package/dist/autocomplete/autocomplete-input.svelte

@@ -1,14 +1,8 @@
 <script module lang="ts">
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import { type Variants } from "../base";
-  import { Input } from "../input";
-  import type { ClassName, ElementRef } from "../utils";
+  import { Input, type InputProps } from "..";
   import { getAutocompleteContext } from "./autocomplete-context.svelte";
 
-  export type AutocompleteInputProps = {} & ElementRef &
-    ClassName &
-    Variants &
-    Omit<HTMLInputAttributes, "autocomplete">;
+  export type AutocompleteInputProps = InputProps;
 </script>
 
 <script lang="ts">

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

@@ -1,7 +1,5 @@
-import type { HTMLInputAttributes } from "svelte/elements";
-import { type Variants } from "../base";
-import type { ClassName, ElementRef } from "../utils";
-export type AutocompleteInputProps = {} & ElementRef & ClassName & Variants & Omit<HTMLInputAttributes, "autocomplete">;
-declare const AutocompleteInput: import("svelte").Component<AutocompleteInputProps, {}, "el" | "value">;
+import { type InputProps } from "..";
+export type AutocompleteInputProps = InputProps;
+declare const AutocompleteInput: import("svelte").Component<InputProps, {}, "el" | "value">;
 type AutocompleteInput = ReturnType<typeof AutocompleteInput>;
 export default AutocompleteInput;

package/dist/base.d.ts

@@ -1,20 +1,34 @@
-export declare const variants: readonly ["elevated", "filled", "tonal", "outlined", "plain", "text"];
-export declare const colors: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
-export declare const shapes: readonly ["square", "rounded", "circle"];
-export declare const underlines: readonly ["always", "hover", "none"];
-export type Variant = {
-    variant?: (typeof variants)[number];
+export declare const VARIANTS: readonly ["elevated", "filled", "tonal", "outlined", "plain", "text"];
+export type Variant = (typeof VARIANTS)[number];
+export type VariantProp = {
+    variant?: Variant;
 };
-export type Color = {
-    color?: (typeof colors)[number];
+export declare const COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export type Color = (typeof COLORS)[number];
+export type ColorProp = {
+    color?: Color;
 };
-export type Shape = {
-    shape?: (typeof shapes)[number];
+export declare const SHAPES: readonly ["square", "rounded", "circle"];
+export type Shape = (typeof SHAPES)[number];
+export type ShapeProp = {
+    shape?: Shape;
 };
-export type Underline = {
-    underline?: (typeof underlines)[number];
+export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type Size = (typeof SIZES)[number];
+export type SizeProp = {
+    size?: Size;
 };
-export type Variants = Variant & Color & Shape & Underline & {
+export declare const RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type Radius = (typeof RADII)[number];
+export type RadiusProp = {
+    radius?: Radius;
+};
+export declare const UNDERLINES: readonly ["always", "hover", "none"];
+export type Underline = (typeof UNDERLINES)[number];
+export type UnderlineProp = {
+    underline?: Underline;
+};
+export type Variants = VariantProp & ColorProp & ShapeProp & UnderlineProp & {
     hover?: boolean;
     focus?: boolean;
 };

package/dist/base.js

@@ -1,5 +1,5 @@
 import { twMerge } from "tailwind-merge";
-export const variants = [
+export const VARIANTS = [
     "elevated",
     "filled",
     "tonal",
@@ -7,15 +7,17 @@ export const variants = [
     "plain",
     "text",
 ];
-export const colors = [
+export const COLORS = [
     "primary",
     "secondary",
     "tertiary",
     "error",
     "inherit",
 ];
-export const shapes = ["square", "rounded", "circle"];
-export const underlines = ["always", "hover", "none"];
+export const SHAPES = ["square", "rounded", "circle"];
+export const SIZES = ["xs", "sm", "md", "lg", "xl", "inherit"];
+export const RADII = ["xs", "sm", "md", "lg", "xl", "inherit"];
+export const UNDERLINES = ["always", "hover", "none"];
 const hoverBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", variant === "filled" && "hover:opacity-90", variant === "tonal" && "hover:opacity-80", variant === "text" && "hover:opacity-80", variant === "elevated" &&
     color === "primary" &&
     "hover:bg-m3-primary-container/30", variant === "elevated" &&

package/dist/index.d.ts

@@ -38,4 +38,5 @@ export * from "./toggle";
 export * from "./tooltip";
 export * from "./base";
 export * from "./merge-props";
+export * from "./stores.svelte";
 export * from "./utils";

package/dist/index.js

@@ -38,4 +38,5 @@ export * from "./toggle";
 export * from "./tooltip";
 export * from "./base";
 export * from "./merge-props";
+export * from "./stores.svelte";
 export * from "./utils";

package/dist/input/index.d.ts

@@ -1 +1 @@
-export { default as Input, type InputProps } from "./input.svelte";
+export { default as Input, INPUT_COLORS, INPUT_RADII, INPUT_SIZES, INPUT_VARIANTS, type InputColor, type InputColorProp, type InputProps, type InputRadius, type InputRadiusProp, type InputSize, type InputSizeProp, type InputVariant, type InputVariantProp, } from "./input.svelte";

package/dist/input/index.js

@@ -1 +1 @@
-export { default as Input } from "./input.svelte";
+export { default as Input, INPUT_COLORS, INPUT_RADII, INPUT_SIZES, INPUT_VARIANTS, } from "./input.svelte";

package/dist/input/input.svelte

@@ -1,13 +1,44 @@
 <script lang="ts" module>
+  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";
-  import { baseClasses, type Variants } 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];
+  export type InputVariantProp = { variant?: InputVariant };
+
+  export const INPUT_COLORS = COLORS;
+  export type InputColor = Color;
+  export type InputColorProp = ColorProp;
+
+  export const INPUT_SIZES = SIZES;
+  export type InputSize = Size;
+  export type InputSizeProp = SizeProp;
+
+  export const INPUT_RADII = RADII;
+  export type InputRadius = Radius;
+  export type InputRadiusProp = RadiusProp;
 
   export type InputProps = ElementRef &
     ClassName &
-    Variants &
-    HTMLInputAttributes;
+    InputVariantProp &
+    InputSizeProp &
+    InputRadiusProp &
+    InputColorProp &
+    Omit<HTMLInputAttributes, "size">;
 </script>
 
 <script lang="ts">
@@ -17,24 +48,42 @@
     ref = noop,
     class: className,
     variant = "outlined",
-    color = "secondary",
-    shape = "rounded",
+    color = "primary",
+    size = "sm",
+    radius = "md",
     ...restProps
   }: InputProps = $props();
 </script>
 
 <input
+  bind:value
   bind:this={el}
   use:ref
-  bind:value
   class={twMerge(
-    "bg-m3-surface-container",
-    baseClasses({ variant, color, shape, hover: true, focus: true }),
+    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",
 
-    (variant === "outlined" || variant === "plain") &&
-      "hover:bg-m3-surface-container-low focus-visible:bg-m3-surface-container-low",
+    "disabled:cursor-not-allowed disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/38",
 
-    "h-9 px-3",
     className,
   )}
   {...restProps}

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

@@ -1,7 +1,20 @@
+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 Variants } from "../base";
-import { type ClassName, type ElementRef } from "../utils";
-export type InputProps = ElementRef & ClassName & Variants & HTMLInputAttributes;
+export declare const INPUT_VARIANTS: readonly ["outlined", "filled", "inherit"];
+export type InputVariant = (typeof INPUT_VARIANTS)[number];
+export type InputVariantProp = {
+    variant?: InputVariant;
+};
+export declare const INPUT_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export type InputColor = Color;
+export type InputColorProp = ColorProp;
+export declare const INPUT_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type InputSize = Size;
+export type InputSizeProp = SizeProp;
+export declare const INPUT_RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type InputRadius = Radius;
+export type InputRadiusProp = RadiusProp;
+export type InputProps = ElementRef & ClassName & InputVariantProp & InputSizeProp & InputRadiusProp & InputColorProp & Omit<HTMLInputAttributes, "size">;
 declare const Input: import("svelte").Component<InputProps, {}, "el" | "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/stores.svelte.d.ts

@@ -0,0 +1,18 @@
+type StoreOpts = {
+    storage?: Storage;
+};
+type LoadOpts<T> = {
+    decode?: (data: string) => T;
+};
+type SaveOpts<T> = {
+    encode?: (value: T) => string;
+};
+export declare function load<T>(key: string, init: T, opts: LoadOpts<T> & StoreOpts): T;
+export declare function save<T>(key: string, value: T, opts: SaveOpts<T> & StoreOpts): void;
+export type Storable<T> = {
+    value: T;
+};
+export declare function useLocalStorage<T>(key: string, init: T, opts?: LoadOpts<T> & SaveOpts<T> & StoreOpts): Storable<T>;
+export declare const loads: (key: string, init: string | null, opts?: StoreOpts) => string | null;
+export declare const saves: (key: string, value: string | null, opts?: StoreOpts) => void;
+export {};

package/dist/stores.svelte.js

@@ -0,0 +1,28 @@
+export function load(key, init, opts) {
+    const { storage = localStorage, decode = (data) => (data ? JSON.parse(data) : init), } = opts;
+    const data = storage.getItem(key);
+    return data ? decode(data) : init;
+}
+export function save(key, value, opts) {
+    const { storage = localStorage, encode = (value) => JSON.stringify(value) } = opts;
+    if (value) {
+        storage.setItem(key, encode(value));
+    }
+    else {
+        storage.removeItem(key);
+    }
+}
+export function useLocalStorage(key, init, opts = {}) {
+    let value = $state(load(key, init, opts));
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            save(key, value, opts);
+        },
+    };
+}
+export const loads = (key, init, opts = {}) => load(key, init, { decode: (data) => data, ...opts });
+export const saves = (key, value, opts = {}) => save(key, value, { encode: (value) => String(value), ...opts });

package/dist/textarea/index.d.ts

@@ -1 +1 @@
-export { default as Textarea, type TextareaProps } from "./textarea.svelte";
+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";

package/dist/textarea/index.js

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

package/dist/textarea/textarea.svelte

@@ -1,38 +1,81 @@
 <script module lang="ts">
-  import { baseClasses, type Variants } from "../base";
-  import { noop, type ClassName, type ElementRef } from "../utils";
+  import {
+    COLORS,
+    RADII,
+    SIZES,
+    type Color,
+    type ColorProp,
+    type Radius,
+    type RadiusProp,
+    type Size,
+    type SizeProp,
+  } from "..";
+  import { type ClassName } from "../utils";
   import type { HTMLTextareaAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
-  export type TextareaProps = ElementRef &
-    ClassName &
-    Variants &
-    HTMLTextareaAttributes;
+  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">;
 </script>
 
 <script lang="ts">
   let {
     value = $bindable(),
-    el = $bindable(),
-    ref = noop,
     class: className,
     variant = "outlined",
-    color = "secondary",
-    shape = "rounded",
+    color = "primary",
+    size = "sm",
+    radius = "md",
     ...restProps
   }: TextareaProps = $props();
 </script>
 
 <textarea
-  bind:this={el}
-  use:ref
   bind:value
   class={twMerge(
-    "bg-m3-surface-container",
-    baseClasses({ variant, color, shape, hover: true, focus: true }),
+    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",
 
-    (variant === "outlined" || variant === "plain") &&
-      "hover:bg-m3-surface-container-low focus-visible:bg-m3-surface-container-low",
+    "disabled:cursor-not-allowed disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/38",
 
     "px-3 py-2",
     className,

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

@@ -1,7 +1,21 @@
-import { type Variants } from "../base";
-import { type ClassName, type ElementRef } from "../utils";
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "..";
+import { type ClassName } from "../utils";
 import type { HTMLTextareaAttributes } from "svelte/elements";
-export type TextareaProps = ElementRef & ClassName & Variants & HTMLTextareaAttributes;
-declare const Textarea: import("svelte").Component<TextareaProps, {}, "el" | "value">;
+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", "inherit"];
+export type TextareaColor = Color;
+export type TextareaColorProp = ColorProp;
+export declare const TEXTAREA_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type TextareaSize = Size;
+export type TextareaSizeProp = SizeProp;
+export declare const TEXTAREA_RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+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">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "kosui",
-  "version": "0.0.20",
+  "version": "0.0.24",
   "type": "module",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kosolabs/kosui.git"
+  },
   "engines": {
     "node": ">= 20"
   },
@@ -39,6 +43,7 @@
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^24.1.0",