kosui 0.0.27 → 0.0.28

package/dist/slider/slider.svelte

@@ -0,0 +1,227 @@
+<script lang="ts" module>
+  import {
+    COLORS,
+    RADII,
+    SIZES,
+    type Color,
+    type ColorProp,
+    type Radius,
+    type RadiusProp,
+    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 = {
+    value: number;
+    label?: string;
+  };
+
+  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>;
+</script>
+
+<script lang="ts">
+  let {
+    value = $bindable(0),
+    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,
+    class: className,
+    color = "primary",
+    size = "md",
+    radius = "xl",
+    ...restProps
+  }: SliderProps = $props();
+
+  const ctx = setSliderContext(
+    new SliderContext(
+      () => value,
+      (newValue) => (value = newValue),
+      () => min,
+      () => max,
+      () => step,
+      () => marks,
+      () => disabled,
+      label,
+      () => labelAlwaysOn,
+      () => inverted,
+      () => restrictToMarks,
+      () => color,
+      () => size,
+      () => radius,
+      onChange,
+      onChangeEnd,
+      sliderHandle,
+      sliderHandleLabel,
+      sliderHandleLabelArrow,
+      sliderMark,
+      sliderMarkDot,
+      sliderMarkLabel,
+    ),
+  );
+</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
+  bind:this={ctx.sliderEl}
+  class={twMerge(
+    "relative w-full cursor-pointer touch-none bg-m3-surface-container-highest select-none",
+
+    ctx.disabled && "cursor-not-allowed opacity-50",
+
+    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.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",
+
+    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,
+  })}
+>
+  <!-- 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>
+</div>

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

@@ -0,0 +1,41 @@
+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", "inherit"];
+export type SliderColor = Color;
+export type SliderColorProp = ColorProp;
+export declare const SLIDER_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type SliderSize = Size;
+export type SliderSizeProp = SizeProp;
+export declare const SLIDER_RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type SliderRadius = Radius;
+export type SliderRadiusProp = RadiusProp;
+export type Mark = {
+    value: number;
+    label?: string;
+};
+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">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/switch/switch-thumb.svelte

@@ -4,8 +4,8 @@
     SwitchRadiusProp,
     SwitchSizeProp,
   } from "./index.js";
-  import { type ClassName } from "../utils.js";
-  import { type HTMLAttributes } from "svelte/elements";
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export type SwitchThumbProps = {} & ClassName &

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

@@ -1,6 +1,6 @@
 import type { SwitchColorProp, SwitchRadiusProp, SwitchSizeProp } from "./index.js";
-import { type ClassName } from "../utils.js";
-import { type HTMLAttributes } from "svelte/elements";
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 export type SwitchThumbProps = {} & ClassName & SwitchColorProp & SwitchSizeProp & SwitchRadiusProp & HTMLAttributes<HTMLDivElement>;
 declare const SwitchThumb: import("svelte").Component<SwitchThumbProps, {}, "">;
 type SwitchThumb = ReturnType<typeof SwitchThumb>;

package/dist/switch/switch.svelte

@@ -12,9 +12,9 @@
   } from "../base.js";
   import { mergeProps } from "../merge-props.js";
   import { SwitchThumb, type SwitchThumbProps } from "./index.js";
-  import { type ClassName } from "../utils.js";
-  import { type Snippet } from "svelte";
-  import { type HTMLButtonAttributes } from "svelte/elements";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export const SWITCH_COLORS = COLORS;

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

@@ -1,8 +1,8 @@
 import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
 import { type SwitchThumbProps } from "./index.js";
-import { type ClassName } from "../utils.js";
-import { type Snippet } from "svelte";
-import { type HTMLButtonAttributes } from "svelte/elements";
+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 type SwitchColor = Color;
 export type SwitchColorProp = ColorProp;

package/dist/textarea/textarea.svelte

@@ -10,8 +10,8 @@
     type Size,
     type SizeProp,
   } from "../base.js";
-  import { type ClassName } from "../utils.js";
-  import { type HTMLTextareaAttributes } from "svelte/elements";
+  import 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;

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

@@ -1,6 +1,6 @@
 import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
-import { type ClassName } from "../utils.js";
-import { type HTMLTextareaAttributes } from "svelte/elements";
+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 = {

package/dist/toggle/toggle-button.svelte

@@ -1,10 +1,10 @@
 <script module lang="ts">
-  import { type Variants } from "../base.js";
+  import type { Variants } from "../base.js";
   import { mergeProps } from "../merge-props.js";
   import { getToggleContext } from "./index.js";
   import { noop, type ClassName, type ElementRef } from "../utils.js";
-  import { type Snippet } from "svelte";
-  import { type HTMLButtonAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export type ToggleButtonProps<T> = {

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

@@ -1,7 +1,7 @@
-import { type Variants } from "../base.js";
+import type { Variants } from "../base.js";
 import { type ClassName, type ElementRef } from "../utils.js";
-import { type Snippet } from "svelte";
-import { type HTMLButtonAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 export type ToggleButtonProps<T> = {
     value: T;
     children: Snippet;

package/dist/toggle/toggle-group.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import { setToggleContext, ToggleContext } from "./index.js";
   import { noop, type ClassName, type ElementRef } from "../utils.js";
-  import { type Snippet } from "svelte";
-  import { type HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export type ToggleGroupProps<T> = {

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

@@ -1,6 +1,6 @@
 import { type ClassName, type ElementRef } from "../utils.js";
-import { type Snippet } from "svelte";
-import { type HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export type ToggleGroupProps<T> = {
     value?: T;
     onChange?: (value?: T) => void;

package/dist/tooltip/tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import { Popover, type PopoverProps } from "../popover/index.js";
-  import { type ClassName } from "../utils.js";
-  import { type Snippet } from "svelte";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
 
   export type TooltipTriggerProps = {
@@ -36,8 +36,9 @@
     ...restProps
   }: TooltipProps = $props();
 
-  const isTouchDevice =
-    "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  function isTouchDevice() {
+    return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  }
 
   let timeout: number;
 
@@ -64,7 +65,7 @@
       }
     : {
         ref: (ref) => (anchorEl = ref),
-        onmouseenter: () => !isTouchDevice && show(),
+        onmouseenter: () => !isTouchDevice() && show(),
         onmouseleave: () => hide(),
         ontouchstart: () => show(delay),
         ontouchend: () => cancel(),

package/dist/tooltip/tooltip.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type PopoverProps } from "../popover/index.js";
-import { type ClassName } from "../utils.js";
-import { type Snippet } from "svelte";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
 export type TooltipTriggerProps = {
     ref: (el: HTMLElement) => void;
     onclick?: () => void;

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import { type ClassNameValue } from "tailwind-merge";
+import type { ClassNameValue } from "tailwind-merge";
 export declare function noop(): void;
 export type ElementRef = {
     el?: HTMLElement;

package/dist/utils.js

@@ -1,4 +1,3 @@
-import {} from "tailwind-merge";
 export function noop() { }
 export function uid({ prefix = "", separator = "-" } = {}) {
     const parts = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.2",
-    "@lucide/svelte": "^0.539.0",
+    "@lucide/svelte": "^0.542.0",
     "marked": "^16.1.1"
   },
   "peerDependencies": {
@@ -39,7 +39,7 @@
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
     "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
@@ -79,9 +79,9 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
-    "test:unit": "vitest",
-    "test": "pnpm run \"/^(build|check|lint|test:unit)$/\"",
+    "test:unit": "vitest run",
     "test:e2e": "playwright test",
+    "test": "pnpm run \"/^(build|check|lint|test:unit)$/\"",
     "ci:publish": "changeset publish"
   }
 }