kosui 0.0.27 → 0.0.29

package/dist/slider/slider-handle.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+  import { mergeProps } from "../merge-props.js";
+  import { getSliderContext } from "./index.js";
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SliderHandleProps = {} & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+</script>
+
+<script lang="ts">
+  let { class: className, ...restProps }: SliderHandleProps = $props();
+
+  const ctx = getSliderContext();
+</script>
+
+<div class="relative">
+  <div
+    class={twMerge(
+      "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",
+      ctx.color === "secondary" && "bg-m3-secondary",
+      ctx.color === "tertiary" && "bg-m3-tertiary",
+      ctx.color === "error" && "bg-m3-error",
+
+      ctx.size === "xs" && "size-3",
+      ctx.size === "sm" && "size-4",
+      ctx.size === "md" && "size-5",
+      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-4xl",
+      ctx.radius === "full" && "rounded-full",
+
+      className,
+    )}
+    {...mergeProps(restProps, {
+      onpointerenter: () => (ctx.hovered = true),
+      onpointerleave: () => (ctx.hovered = false),
+    })}
+  ></div>
+
+  {@render ctx.handleLabelRenderer({})}
+</div>

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

@@ -0,0 +1,6 @@
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+export type SliderHandleProps = {} & ClassName & HTMLAttributes<HTMLDivElement>;
+declare const SliderHandle: import("svelte").Component<SliderHandleProps, {}, "">;
+type SliderHandle = ReturnType<typeof SliderHandle>;
+export default SliderHandle;

package/dist/slider/slider-mark-dot.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { getSliderContext } from "./index.js";
+
+  export type SliderMarkDotProps = {} & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+  let { class: className, ...restProps }: SliderMarkDotProps = $props();
+  const ctx = getSliderContext();
+</script>
+
+<div
+  class={twMerge(
+    "rounded-full bg-m3-surface-container-lowest",
+
+    ctx.size === "sm" && "size-0.5",
+    ctx.size === "md" && "size-1",
+    ctx.size === "lg" && "size-1.5",
+    ctx.size === "xl" && "size-2",
+
+    className,
+  )}
+  {...restProps}
+></div>

package/dist/slider/slider-mark-dot.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+export type SliderMarkDotProps = {} & ClassName & HTMLAttributes<HTMLDivElement>;
+declare const SliderMarkDot: import("svelte").Component<SliderMarkDotProps, {}, "">;
+type SliderMarkDot = ReturnType<typeof SliderMarkDot>;
+export default SliderMarkDot;

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { mergeProps } from "../merge-props.js";
+  import type { ClassName } from "../utils.js";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { getSliderContext } from "./slider-context.svelte.js";
+
+  export type SliderMarkLabelProps = {
+    value: number;
+    label?: string;
+  } & ClassName &
+    HTMLButtonAttributes;
+  let {
+    value,
+    label,
+    class: className,
+    ...restProps
+  }: SliderMarkLabelProps = $props();
+
+  const ctx = getSliderContext();
+</script>
+
+{#if label}
+  <button
+    class={twMerge(
+      "absolute top-full mt-2 text-xs whitespace-nowrap text-m3-on-surface-variant",
+      "left-1/2 -translate-x-1/2",
+      className,
+    )}
+    {...mergeProps(restProps, {
+      onpointerdown: (e: PointerEvent) => e.stopImmediatePropagation(),
+      onclick: () => (ctx.value = value),
+    })}
+  >
+    {label}
+  </button>
+{/if}

package/dist/slider/slider-mark-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ClassName } from "../utils.js";
+import type { HTMLButtonAttributes } from "svelte/elements";
+export type SliderMarkLabelProps = {
+    value: number;
+    label?: string;
+} & ClassName & HTMLButtonAttributes;
+declare const SliderMarkLabel: import("svelte").Component<SliderMarkLabelProps, {}, "">;
+type SliderMarkLabel = ReturnType<typeof SliderMarkLabel>;
+export default SliderMarkLabel;

package/dist/slider/slider-mark.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { getSliderContext } from "./index.js";
+
+  export type SliderMarkProps = {
+    value: number;
+    label?: string;
+  } & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+
+  let {
+    value,
+    label,
+    class: className,
+    ...restProps
+  }: SliderMarkProps = $props();
+
+  const ctx = getSliderContext();
+</script>
+
+<div
+  class={twMerge(
+    "absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
+    className,
+  )}
+  style={`left: ${ctx.getPositionFromValue(value)}%`}
+  {...restProps}
+>
+  {@render ctx.markDotRenderer({})}
+  {@render ctx.markLabelRenderer({ value, label })}
+</div>

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

@@ -0,0 +1,9 @@
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+export type SliderMarkProps = {
+    value: number;
+    label?: string;
+} & ClassName & HTMLAttributes<HTMLDivElement>;
+declare const SliderMark: import("svelte").Component<SliderMarkProps, {}, "">;
+type SliderMark = ReturnType<typeof SliderMark>;
+export default SliderMark;

package/dist/slider/slider.svelte

@@ -0,0 +1,249 @@
+<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 = "full",
+    ...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,
+    ),
+  );
+
+  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)}
+  <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
+  class={twMerge(
+    "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",
+
+    marks.length > 0 && "mb-6",
+
+    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,
+  })}
+>
+  <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

@@ -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", "plain", "inherit"];
+export type SliderColor = Color;
+export type SliderColorProp = ColorProp;
+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 ["none", "xs", "sm", "md", "lg", "xl", "full"];
+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,15 +1,15 @@
 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";
-export declare const SWITCH_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+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", "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

@@ -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,18 +1,18 @@
 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 = {
     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/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;