kosui 0.0.28 → 0.0.29

package/dist/alert/alert.svelte

@@ -1,28 +1,183 @@
 <script lang="ts" module>
-  import { Box, type BoxProps } from "../box/index.js";
-  import { twMerge } from "tailwind-merge";
+  import {
+    COLORS,
+    RADII,
+    type Color,
+    type ColorProp,
+    type Radius,
+    type RadiusProp,
+  } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
 
-  export type AlertProps = BoxProps;
+  export const ALERT_VARIANT = ["filled", "tonal", "plain"] as const;
+  export type AlertVariant = (typeof ALERT_VARIANT)[number];
+  export type AlertVariantProp = { variant?: AlertVariant };
+
+  export const ALERT_COLORS = COLORS;
+  export type AlertColor = Color;
+  export type AlertColorProp = ColorProp;
+
+  export type AlertOutlined = boolean;
+  export type AlertOutlinedProp = { outlined?: AlertOutlined };
+
+  export type AlertElevated = boolean;
+  export type AlertElevatedProp = { elevated?: AlertElevated };
+
+  export const ALERT_RADII = RADII;
+  export type AlertRadius = Radius;
+  export type AlertRadiusProp = RadiusProp;
+
+  export type AlertProps = {
+    children: Snippet<[]>;
+  } & AlertVariantProp &
+    AlertColorProp &
+    AlertRadiusProp &
+    AlertOutlinedProp &
+    AlertElevatedProp &
+    HTMLAttributes<HTMLDivElement>;
 </script>
 
 <script lang="ts">
-  let {
-    el = $bindable(),
-    class: className,
-    variant = "elevated",
+  const {
+    variant = "tonal",
     color = "primary",
-    shape = "rounded",
-    backdrop = true,
-    ...restProps
+    radius = "sm",
+    outlined = false,
+    elevated = false,
+    children,
+    ...props
   }: AlertProps = $props();
 </script>
 
-<Box
-  bind:el
-  {variant}
-  {color}
-  {shape}
-  {backdrop}
-  class={twMerge("p-3", className)}
-  {...restProps}
-/>
+<div
+  {...mergeProps(props, {
+    class: [
+      "base",
+      `radius-${radius}`,
+      `variant-${variant}`,
+      `color-${color}`,
+      outlined && "outlined",
+      elevated && "elevated",
+    ],
+  })}
+>
+  {@render children()}
+</div>
+
+<style>
+  .base {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .elevated {
+    box-shadow:
+      0 1px 3px 0 rgb(from var(--md-sys-color-shadow, rgb(0 0 0)) r g b / 0.2),
+      0 1px 2px -1px
+        rgb(from var(--md-sys-color-shadow, rgb(0 0 0)) r g b / 0.2);
+  }
+
+  .variant-filled.color-primary {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+  }
+
+  .variant-filled.color-secondary {
+    background-color: var(--md-sys-color-secondary);
+    color: var(--md-sys-color-on-secondary);
+  }
+
+  .variant-filled.color-tertiary {
+    background-color: var(--md-sys-color-tertiary);
+    color: var(--md-sys-color-on-tertiary);
+  }
+
+  .variant-filled.color-error {
+    background-color: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+  }
+
+  .variant-filled.color-plain {
+    background-color: var(--md-sys-color-inverse-surface);
+    color: var(--md-sys-color-inverse-on-surface);
+  }
+
+  .variant-tonal.color-primary {
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+  }
+
+  .variant-tonal.color-secondary {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .variant-tonal.color-tertiary {
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+  }
+
+  .variant-tonal.color-error {
+    background-color: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+  }
+
+  .variant-tonal.color-plain {
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .outlined {
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .outlined.color-primary {
+    border-color: var(--md-sys-color-primary);
+  }
+
+  .outlined.color-secondary {
+    border-color: var(--md-sys-color-secondary);
+  }
+
+  .outlined.color-tertiary {
+    border-color: var(--md-sys-color-tertiary);
+  }
+
+  .outlined.color-error {
+    border-color: var(--md-sys-color-error);
+  }
+
+  .outlined.color-plain {
+    border-color: var(--md-sys-color-outline);
+  }
+
+  .radius-none {
+    border-radius: 0;
+  }
+
+  .radius-xs {
+    border-radius: var(--radius-xs);
+  }
+
+  .radius-sm {
+    border-radius: var(--radius-sm);
+  }
+
+  .radius-md {
+    border-radius: var(--radius-lg);
+  }
+
+  .radius-lg {
+    border-radius: var(--radius-2xl);
+  }
+
+  .radius-xl {
+    border-radius: var(--radius-4xl);
+  }
+
+  .radius-full {
+    border-radius: calc(infinity * 1px);
+  }
+</style>

package/dist/alert/alert.svelte.d.ts

@@ -1,5 +1,28 @@
-import { type BoxProps } from "../box/index.js";
-export type AlertProps = BoxProps;
-declare const Alert: import("svelte").Component<BoxProps, {}, "el">;
+import { type Color, type ColorProp, type Radius, type RadiusProp } from "../base.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export declare const ALERT_VARIANT: readonly ["filled", "tonal", "plain"];
+export type AlertVariant = (typeof ALERT_VARIANT)[number];
+export type AlertVariantProp = {
+    variant?: AlertVariant;
+};
+export declare const ALERT_COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
+export type AlertColor = Color;
+export type AlertColorProp = ColorProp;
+export type AlertOutlined = boolean;
+export type AlertOutlinedProp = {
+    outlined?: AlertOutlined;
+};
+export type AlertElevated = boolean;
+export type AlertElevatedProp = {
+    elevated?: AlertElevated;
+};
+export declare const ALERT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
+export type AlertRadius = Radius;
+export type AlertRadiusProp = RadiusProp;
+export type AlertProps = {
+    children: Snippet<[]>;
+} & AlertVariantProp & AlertColorProp & AlertRadiusProp & AlertOutlinedProp & AlertElevatedProp & HTMLAttributes<HTMLDivElement>;
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

package/dist/alert/index.d.ts

@@ -1 +1 @@
-export { default as Alert, type AlertProps } from "./alert.svelte";
+export { default as Alert, ALERT_COLORS, ALERT_RADII, ALERT_VARIANT, type AlertColor, type AlertColorProp, type AlertElevated, type AlertElevatedProp, type AlertOutlined, type AlertOutlinedProp, type AlertProps, type AlertRadius, type AlertRadiusProp, type AlertVariant, type AlertVariantProp, } from "./alert.svelte";

package/dist/alert/index.js

@@ -1 +1 @@
-export { default as Alert } from "./alert.svelte";
+export { default as Alert, ALERT_COLORS, ALERT_RADII, ALERT_VARIANT, } from "./alert.svelte";

package/dist/base.d.ts

@@ -3,7 +3,7 @@ export type Variant = (typeof VARIANTS)[number];
 export type VariantProp = {
     variant?: Variant;
 };
-export declare const COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export declare const COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
 export type Color = (typeof COLORS)[number];
 export type ColorProp = {
     color?: Color;
@@ -13,12 +13,12 @@ export type Shape = (typeof SHAPES)[number];
 export type ShapeProp = {
     shape?: Shape;
 };
-export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type Size = (typeof SIZES)[number];
 export type SizeProp = {
     size?: Size;
 };
-export declare const RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type Radius = (typeof RADII)[number];
 export type RadiusProp = {
     radius?: Radius;

package/dist/base.js

@@ -12,11 +12,12 @@ export const COLORS = [
     "secondary",
     "tertiary",
     "error",
+    "plain",
     "inherit",
 ];
 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 SIZES = ["xs", "sm", "md", "lg", "xl"];
+export const RADII = ["none", "xs", "sm", "md", "lg", "xl", "full"];
 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" &&

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

@@ -6,13 +6,13 @@ export type InputVariant = (typeof INPUT_VARIANTS)[number];
 export type InputVariantProp = {
     variant?: InputVariant;
 };
-export declare const INPUT_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export declare const INPUT_COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
 export type InputColor = Color;
 export type InputColorProp = ColorProp;
-export declare const INPUT_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const INPUT_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type InputSize = Size;
 export type InputSizeProp = SizeProp;
-export declare const INPUT_RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const INPUT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type InputRadius = Radius;
 export type InputRadiusProp = RadiusProp;
 export type InputProps = ElementRef & ClassName & InputVariantProp & InputSizeProp & InputRadiusProp & InputColorProp & Omit<HTMLInputAttributes, "size">;

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

@@ -15,9 +15,10 @@ export declare class SliderContext {
     markDotRenderer: Snippet<[SliderMarkDotProps]>;
     markLabelRenderer: Snippet<[SliderMarkLabelProps]>;
     sliderEl: HTMLDivElement;
-    isHovered: boolean;
-    isDragging: boolean;
-    isFocused: boolean;
+    hovered: boolean;
+    clicked: boolean;
+    dragging: boolean;
+    focused: boolean;
     constructor(getValue: () => number, setValue: (val: number) => void, min: () => number, max: () => number, step: () => number, marks: () => Mark[], disabled: () => boolean, label: (value: number) => string, labelAlwaysOn: () => boolean, inverted: () => boolean, restrictToMarks: () => boolean, color: () => SliderColor, size: () => SliderSize, radius: () => SliderRadius, onChange: ((value: number) => void) | undefined, onChangeEnd: ((value: number) => void) | undefined, handleRenderer: Snippet<[SliderHandleProps]>, handleLabelRenderer: Snippet<[SliderHandleLabelProps]>, handleLabelArrowRenderer: Snippet<[SliderHandleLabelArrowProps]>, markRenderer: Snippet<[SliderMarkProps]>, markDotRenderer: Snippet<[SliderMarkDotProps]>, markLabelRenderer: Snippet<[SliderMarkLabelProps]>);
     get value(): number;
     set value(value: number);
@@ -34,6 +35,7 @@ export declare class SliderContext {
     get size(): SliderSize;
     get radius(): SliderRadius;
     get position(): number;
+    get animated(): boolean;
     clamp: (val: number, minVal: number, maxVal: number) => number;
     getValueFromPosition: (position: number) => number;
     getPositionFromValue: (val: number) => number;

package/dist/slider/slider-context.svelte.js

@@ -24,9 +24,10 @@ export class SliderContext {
     markDotRenderer;
     markLabelRenderer;
     sliderEl;
-    isHovered = $state(false);
-    isDragging = $state(false);
-    isFocused = $state(false);
+    hovered = $state(false);
+    clicked = $state(false);
+    dragging = $state(false);
+    focused = $state(false);
     constructor(getValue, setValue, min, max, step, marks, disabled, label, labelAlwaysOn, inverted, restrictToMarks, color, size, radius, onChange, onChangeEnd, handleRenderer, handleLabelRenderer, handleLabelArrowRenderer, markRenderer, markDotRenderer, markLabelRenderer) {
         this.#value = new Bindable(getValue());
         this.#value.bind(getValue, setValue);
@@ -97,6 +98,9 @@ export class SliderContext {
     get position() {
         return this.getPositionFromValue(this.value);
     }
+    get animated() {
+        return !this.dragging || this.restrictToMarks;
+    }
     clamp = (val, minVal, maxVal) => {
         return Math.min(Math.max(val, minVal), maxVal);
     };
@@ -125,23 +129,25 @@ export class SliderContext {
     pointerDown = (event) => {
         if (this.disabled)
             return;
-        this.isDragging = true;
+        this.clicked = true;
         this.sliderEl.setPointerCapture(event.pointerId);
         this.value = this.getValueFromPosition(event.clientX);
         event.preventDefault();
         event.stopImmediatePropagation();
     };
     pointerMove = (event) => {
-        if (this.disabled || !this.isDragging)
+        if (this.disabled || !this.clicked)
             return;
+        this.dragging = true;
         this.value = this.getValueFromPosition(event.clientX);
         event.preventDefault();
         event.stopImmediatePropagation();
     };
     pointerUp = (event) => {
-        if (this.disabled || !this.isDragging)
+        if (this.disabled || !this.clicked)
             return;
-        this.isDragging = false;
+        this.dragging = false;
+        this.clicked = false;
         this.sliderEl.releasePointerCapture(event.pointerId);
         this.onChangeEnd?.(this.value);
         event.preventDefault();
@@ -175,10 +181,10 @@ export class SliderContext {
         this.onChangeEnd?.(this.value);
     };
     focus = () => {
-        this.isFocused = true;
+        this.focused = true;
     };
     blur = () => {
-        this.isFocused = false;
+        this.focused = false;
     };
 }
 export function setSliderContext(state) {

package/dist/slider/slider-handle-label.svelte

@@ -12,7 +12,11 @@
 
   const showLabel = $derived(
     !ctx.disabled &&
-      (ctx.labelAlwaysOn || ctx.isHovered || ctx.isDragging || ctx.isFocused),
+      (ctx.labelAlwaysOn ||
+        ctx.clicked ||
+        ctx.hovered ||
+        ctx.dragging ||
+        ctx.focused),
   );
 </script>
 

package/dist/slider/slider-handle.svelte

@@ -18,8 +18,9 @@
 <div class="relative">
   <div
     class={twMerge(
-      "border-2 border-m3-surface shadow-md transition-all",
+      "border-2 border-m3-surface shadow-md",
 
+      ctx.animated && "transition-all",
       !ctx.disabled && "hover:scale-110 focus:scale-110 active:scale-110",
 
       ctx.color === "primary" && "bg-m3-primary",
@@ -33,17 +34,19 @@
       ctx.size === "lg" && "size-6",
       ctx.size === "xl" && "size-7",
 
+      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-full",
+      ctx.radius === "xl" && "rounded-4xl",
+      ctx.radius === "full" && "rounded-full",
 
       className,
     )}
     {...mergeProps(restProps, {
-      onpointerenter: () => (ctx.isHovered = true),
-      onpointerleave: () => (ctx.isHovered = false),
+      onpointerenter: () => (ctx.hovered = true),
+      onpointerleave: () => (ctx.hovered = false),
     })}
   ></div>
 

package/dist/slider/slider.svelte

@@ -98,7 +98,7 @@
     class: className,
     color = "primary",
     size = "md",
-    radius = "xl",
+    radius = "full",
     ...restProps
   }: SliderProps = $props();
 
@@ -128,6 +128,16 @@
       sliderMarkLabel,
     ),
   );
+
+  const SIZE_RATIO: Record<Size, number> = {
+    xs: 1.5,
+    sm: 2,
+    md: 2.5,
+    lg: 3,
+    xl: 3.5,
+  };
+
+  let ratio = $derived(SIZE_RATIO[ctx.size]);
 </script>
 
 {#snippet defaultSliderHandle(props: SliderHandleProps)}
@@ -156,23 +166,26 @@
 
 <!-- Track -->
 <div
-  bind:this={ctx.sliderEl}
   class={twMerge(
-    "relative w-full cursor-pointer touch-none bg-m3-surface-container-highest select-none",
+    "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",
 
-    ctx.size === "xs" && "my-2.5 h-0.5",
-    ctx.size === "sm" && "my-3 h-1",
-    ctx.size === "md" && "my-3.5 h-2",
-    ctx.size === "lg" && "my-4 h-3",
-    ctx.size === "xl" && "my-4.5 h-4",
+    marks.length > 0 && "mb-6",
 
     className,
   )}
@@ -191,37 +204,46 @@
     onblur: ctx.blur,
   })}
 >
-  <!-- Filled track -->
-  <div
-    class={twMerge(
-      "absolute top-1/2 h-full -translate-y-1/2 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 === "xs" && "rounded-xs",
-      ctx.radius === "sm" && "rounded-sm",
-      ctx.radius === "md" && "rounded-lg",
-      ctx.radius === "lg" && "rounded-2xl",
-      ctx.radius === "xl" && "rounded-4xl",
-    )}
-    style={ctx.inverted
-      ? `right: 0; width: ${100 - ctx.position}%`
-      : `left: 0; width: ${ctx.position}%`}
-  ></div>
-
-  <!-- Marks -->
-  {#each marks as { value, label } (value)}
-    {@render ctx.markRenderer({ value, label })}
-  {/each}
-
-  <!-- Handle -->
-  <div
-    class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all"
-    style={`left: ${ctx.position}%`}
-  >
-    {@render ctx.handleRenderer({})}
+  <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({})}
+    </div>
   </div>
 </div>

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

@@ -3,13 +3,13 @@ import { type SliderHandleLabelArrowProps, type SliderHandleLabelProps, type Sli
 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", "inherit"];
+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", "inherit"];
+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 ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const SLIDER_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type SliderRadius = Radius;
 export type SliderRadiusProp = RadiusProp;
 export type Mark = {

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

@@ -3,13 +3,13 @@ import { type SwitchThumbProps } from "./index.js";
 import type { ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
-export declare const SWITCH_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+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", "inherit"];
+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 ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const SWITCH_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type SwitchRadius = Radius;
 export type SwitchRadiusProp = RadiusProp;
 export type SwitchProps = {

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

@@ -6,13 +6,13 @@ export type TextareaVariant = (typeof TEXTAREA_VARIANTS)[number];
 export type TextareaVariantProp = {
     variant?: TextareaVariant;
 };
-export declare const TEXTAREA_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+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", "inherit"];
+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 ["xs", "sm", "md", "lg", "xl", "inherit"];
+export declare const TEXTAREA_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type TextareaRadius = Radius;
 export type TextareaRadiusProp = RadiusProp;
 export type TextareaProps = ClassName & TextareaVariantProp & TextareaSizeProp & TextareaRadiusProp & TextareaColorProp & Omit<HTMLTextareaAttributes, "size">;

package/package.json

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