svelte-comp 1.2.5 → 1.2.6

package/dist/lib/Slider.svelte

@@ -1,253 +0,0 @@
-<!-- src/lib/Slider.svelte -->
-<script lang="ts">
-  /**
-   * @component Slider
-   * @description A customizable slider component for selecting a value from a range.
-   *
-   * @prop value {number} - The current value (bindable)
-   * @default 0
-   *
-   * @prop min {number} - Minimum value
-   * @default 0
-   *
-   * @prop max {number} - Maximum value
-   * @default 100
-   *
-   * @prop step {number} - Step size
-   * @default 1
-   *
-   * @prop sz {SizeKey} - Slider size
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Color variant
-   * @options default|neutral
-   * @default default
-   *
-   * @prop disabled {boolean} - Disable the slider
-   * @default false
-   *
-   * @prop showValue {boolean} - Show the current value
-   * @default false
-   *
-   * @prop onInput {(value: number) => void} - Fires on value change
-   *
-   * @prop class {string} - Custom wrapper classes
-   * @default ""
-   *
-   * @note Works with both keyboard and mouse.
-   * @note Size and variant control appearance.
-   * @note Uses proper ARIA attributes.
-   */
-  import type { HTMLAttributes } from "svelte/elements";
-  import type { SizeKey, ComponentVariant } from "./types";
-  import { TEXT } from "./types";
-  import { cx, clamp } from "../utils";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    disabled?: boolean;
-    showValue?: boolean;
-    onInput?: (value: number) => void;
-    class?: string;
-  };
-
-  let {
-    value = $bindable(0),
-    min = 0,
-    max = 100,
-    step = 1,
-    sz = "md",
-    variant = "default",
-    disabled = false,
-    showValue = false,
-    onInput,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const sizeTrack = $derived(
-    {
-      xs: "h-[4px]",
-      sm: "h-[5px]",
-      md: "h-[6px]",
-      lg: "h-[7px]",
-      xl: "h-[8px]",
-    }[sz]
-  );
-
-  const sizeThumb = $derived(
-    {
-      xs: "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
-      sm: "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
-      md: "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",
-      lg: "[&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6",
-      xl: "[&::-webkit-slider-thumb]:w-7 [&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:w-7 [&::-moz-range-thumb]:h-7",
-    }[sz]
-  );
-
-  const bar = $derived(
-    variant === "neutral"
-      ? "bg-[var(--color-bg-secondary)]"
-      : "bg-[var(--color-bg-primary)]"
-  );
-
-  const thumb = $derived(
-    variant === "neutral"
-      ? "[&::-webkit-slider-thumb]:bg-[var(--color-bg-secondary)] [&::-moz-range-thumb]:bg-[var(--color-bg-secondary)]"
-      : "[&::-webkit-slider-thumb]:bg-[var(--color-bg-primary)] [&::-moz-range-thumb]:bg-[var(--color-bg-primary)]"
-  );
-
-  const pct = $derived(
-    clamp(((value - min) / Math.max(1e-12, max - min)) * 100, 0, 100)
-  );
-
-  const rootClass = $derived(
-    cx(
-      "relative w-full data-[disabled=true]:opacity-[var(--opacity-disabled)]",
-      disabled ? "cursor-not-allowed" : "cursor-pointer",
-      externalClass
-    )
-  );
-
-  const trackClass = $derived(
-    cx(
-      "absolute top-1/2 -translate-y-1/2 w-full bg-[var(--color-bg-muted)] rounded overflow-hidden",
-      sizeTrack
-    )
-  );
-
-  const rangeBase =
-    "relative z-10 w-full h-10 bg-transparent appearance-none cursor-pointer disabled:cursor-not-allowed " +
-    "[&::-webkit-slider-thumb]:appearance-none " +
-    "[&::-webkit-slider-thumb]:rounded-[var(--radius-full)] " +
-    "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[var(--color-bg-surface)] " +
-    "[&::-webkit-slider-thumb]:shadow-[var(--shadow-color)] " +
-    "[&::-moz-range-thumb]:rounded-[var(--radius-full)] " +
-    "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-[var(--color-bg-surface)] " +
-    "[&::-moz-range-thumb]:shadow-[var(--shadow-color)] " +
-    "hover:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:scale-125 " +
-    "hover:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:scale-125 " +
-    "focus:outline-none focus-visible:outline-none " +
-    "focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--border-color-focus)] " +
-    "focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_var(--border-color-focus)] " +
-    "disabled:hover:[&::-webkit-slider-thumb]:scale-100 disabled:active:[&::-webkit-slider-thumb]:scale-100 " +
-    "disabled:hover:[&::-moz-range-thumb]:scale-100 disabled:active:[&::-moz-range-thumb]:scale-100";
-
-  const rangeClass = $derived(cx(rangeBase, sizeThumb, thumb));
-
-  function snap(v: number) {
-    const s = step || 1;
-    const ticks = Math.round((v - min) / s);
-    const snapped = min + ticks * s;
-    return clamp(Number(snapped.toFixed(6)), min, max);
-  }
-
-  let wrap: HTMLDivElement;
-
-  function setFromClientX(x: number) {
-    const r = wrap.getBoundingClientRect();
-    const ratio = clamp((x - r.left) / r.width, 0, 1);
-    value = snap(min + ratio * (max - min));
-    onInput?.(value);
-  }
-
-  function onTrackClick(e: MouseEvent) {
-    if (disabled) return;
-    setFromClientX(e.clientX);
-  }
-
-  function onRangeInput(e: Event) {
-    const t = e.currentTarget as HTMLInputElement;
-    value = snap(Number(t.value));
-    onInput?.(value);
-  }
-
-  function onKey(e: KeyboardEvent) {
-    if (disabled) return;
-    const span = max - min;
-    const big = Math.max(step || 1, Math.round(span / 10));
-    let v = value;
-
-    switch (e.key) {
-      case "ArrowLeft":
-      case "ArrowDown":
-        v = value - (step || 1);
-        break;
-      case "ArrowRight":
-      case "ArrowUp":
-        v = value + (step || 1);
-        break;
-      case "PageDown":
-        v = value - big;
-        break;
-      case "PageUp":
-        v = value + big;
-        break;
-      case "Home":
-        v = min;
-        break;
-      case "End":
-        v = max;
-        break;
-      default:
-        return;
-    }
-
-    value = snap(v);
-    onInput?.(value);
-    e.preventDefault();
-  }
-</script>
-
-<div
-  bind:this={wrap}
-  class={rootClass}
-  onclick={onTrackClick}
-  onfocusin={(e) => (rest as unknown as { onfocus?: (e: FocusEvent) => void }).onfocus?.(e as FocusEvent)}
-  onfocusout={(e) => (rest as unknown as { onblur?: (e: FocusEvent) => void }).onblur?.(e as FocusEvent)}
-  data-disabled={disabled ? "true" : undefined}
-  {...rest}
->
-  <div class="relative flex items-center w-full h-10">
-    <div class={trackClass}>
-      <div
-        class={cx("w-full h-full transition-[width]", bar)}
-        style={`width:${pct}%`}
-      ></div>
-    </div>
-
-    <input
-      type="range"
-      class={rangeClass}
-      {min}
-      {max}
-      {step}
-      {value}
-      oninput={onRangeInput}
-      onkeydown={onKey}
-      {disabled}
-      aria-label="slider"
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-valuenow={value}
-    />
-  </div>
-
-  {#if showValue}
-    <div class="flex justify-end mt-1">
-      <div
-        class="font-[var(--font-mono)] text-[var(--color-text-muted)] select-none {TEXT[
-          sz
-        ]}"
-      >
-        {value}
-      </div>
-    </div>
-  {/if}
-</div>

package/dist/lib/Slider.svelte.d.ts

@@ -1,56 +0,0 @@
-/**
-   * @component Slider
-   * @description A customizable slider component for selecting a value from a range.
-   *
-   * @prop value {number} - The current value (bindable)
-   * @default 0
-   *
-   * @prop min {number} - Minimum value
-   * @default 0
-   *
-   * @prop max {number} - Maximum value
-   * @default 100
-   *
-   * @prop step {number} - Step size
-   * @default 1
-   *
-   * @prop sz {SizeKey} - Slider size
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {ComponentVariant} - Color variant
-   * @options default|neutral
-   * @default default
-   *
-   * @prop disabled {boolean} - Disable the slider
-   * @default false
-   *
-   * @prop showValue {boolean} - Show the current value
-   * @default false
-   *
-   * @prop onInput {(value: number) => void} - Fires on value change
-   *
-   * @prop class {string} - Custom wrapper classes
-   * @default ""
-   *
-   * @note Works with both keyboard and mouse.
-   * @note Size and variant control appearance.
-   * @note Uses proper ARIA attributes.
-   */
-import type { HTMLAttributes } from "svelte/elements";
-import type { SizeKey, ComponentVariant } from "./types";
-type Props = HTMLAttributes<HTMLDivElement> & {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    sz?: SizeKey;
-    variant?: ComponentVariant;
-    disabled?: boolean;
-    showValue?: boolean;
-    onInput?: (value: number) => void;
-    class?: string;
-};
-declare const Slider: import("svelte").Component<Props, {}, "value">;
-type Slider = ReturnType<typeof Slider>;
-export default Slider;

package/dist/lib/Splitter.svelte

@@ -1,150 +0,0 @@
-<!-- src/lib/Splitter.svelte -->
-<script lang="ts">
-  /**
-   * @component Splitter
-   * @description Resizable split panel container with horizontal or vertical orientation.
-   *
-   * @prop direction {'horizontal' | 'vertical'} - Split orientation
-   * @options horizontal|vertical
-   * @default horizontal
-   *
-   * @prop initialSize {number} - Initial size of the first panel as percentage
-   * @default 30
-   *
-   * @prop dividerSize {number} - Width/height of the divider handle in pixels
-   * @default 4
-   *
-   * @prop minSize {number} - Minimum size of the first panel as percentage
-   * @default 10
-   *
-   * @prop maxSize {number} - Maximum size of the first panel as percentage
-   * @default 90
-   *
-   * @prop first {Snippet} - Content for the first panel
-   *
-   * @prop second {Snippet} - Content for the second panel
-   *
-   * @note Uses pointer events for smooth dragging with proper event delegation
-   * @note Responsive - automatically adjusts to container resize
-   * @note Accessible with proper cursor hints and hover states
-   * @note No wrapper elements - panels render directly for clean DOM structure
-   * @note Supports any content type through snippet rendering
-   */
-
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    direction?: "horizontal" | "vertical";
-    initialSize?: number;
-    dividerSize?: number;
-    minSize?: number;
-    maxSize?: number;
-    first?: Snippet;
-    second?: Snippet;
-  };
-
-  let {
-    direction = "horizontal",
-    initialSize = 30,
-    dividerSize = 4,
-    minSize = 10,
-    maxSize = 90,
-    first,
-    second,
-  }: Props = $props();
-
-  let container: HTMLElement;
-
-  let size = $derived(initialSize);
-  let isDragging = $state(false);
-  let startSize = 0;
-  let startPos = 0;
-  let containerSize = 0;
-
-  function getContainerSize(): number {
-    if (!container) return 0;
-    return direction === "horizontal"
-      ? container.offsetWidth
-      : container.offsetHeight;
-  }
-
-  function startDrag(e: PointerEvent): void {
-    isDragging = true;
-    startSize = size;
-    startPos = direction === "horizontal" ? e.clientX : e.clientY;
-    containerSize = getContainerSize();
-
-    document.addEventListener("pointermove", onDrag);
-    document.addEventListener("pointerup", stopDrag);
-    document.addEventListener("pointercancel", stopDrag);
-
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function onDrag(e: PointerEvent): void {
-    if (!isDragging) return;
-
-    const currentPos = direction === "horizontal" ? e.clientX : e.clientY;
-    const delta = currentPos - startPos;
-    const deltaPercent = (delta / containerSize) * 100;
-    const newSize = startSize + deltaPercent;
-
-    size = Math.max(minSize, Math.min(maxSize, newSize));
-
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function stopDrag(): void {
-    isDragging = false;
-    document.removeEventListener("pointermove", onDrag);
-    document.removeEventListener("pointerup", stopDrag);
-    document.removeEventListener("pointercancel", stopDrag);
-  }
-
-  $effect(() => {
-    const onResize = () => {
-      containerSize = getContainerSize();
-    };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  });
-</script>
-
-<div
-  bind:this={container}
-  class="w-full h-full overflow-hidden"
-  class:flex={direction === "horizontal"}
-  class:flex-col={direction === "vertical"}
->
-  {#if direction === "horizontal"}
-    <div class="overflow-auto min-w-0 min-h-0" style="width: {size}%">
-      {@render first?.()}
-    </div>
-
-    <div
-      class="touch-none select-none z-10 cursor-col-resize bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)] transition-colors"
-      style="width: {dividerSize}px"
-      onpointerdown={startDrag}
-    ></div>
-
-    <div class="overflow-auto min-w-0 min-h-0 flex-1">
-      {@render second?.()}
-    </div>
-  {:else}
-    <div class="overflow-auto min-w-0 min-h-0" style="height: {size}%">
-      {@render first?.()}
-    </div>
-
-    <div
-      class="touch-none select-none z-10 cursor-row-resize bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)] transition-colors"
-      style="height: {dividerSize}px"
-      onpointerdown={startDrag}
-    ></div>
-
-    <div class="overflow-auto min-w-0 min-h-0" style="height: calc(100% - {size}% - {dividerSize}px)">
-      {@render second?.()}
-    </div>
-  {/if}
-</div>

package/dist/lib/Splitter.svelte.d.ts

@@ -1,43 +0,0 @@
-/**
-   * @component Splitter
-   * @description Resizable split panel container with horizontal or vertical orientation.
-   *
-   * @prop direction {'horizontal' | 'vertical'} - Split orientation
-   * @options horizontal|vertical
-   * @default horizontal
-   *
-   * @prop initialSize {number} - Initial size of the first panel as percentage
-   * @default 30
-   *
-   * @prop dividerSize {number} - Width/height of the divider handle in pixels
-   * @default 4
-   *
-   * @prop minSize {number} - Minimum size of the first panel as percentage
-   * @default 10
-   *
-   * @prop maxSize {number} - Maximum size of the first panel as percentage
-   * @default 90
-   *
-   * @prop first {Snippet} - Content for the first panel
-   *
-   * @prop second {Snippet} - Content for the second panel
-   *
-   * @note Uses pointer events for smooth dragging with proper event delegation
-   * @note Responsive - automatically adjusts to container resize
-   * @note Accessible with proper cursor hints and hover states
-   * @note No wrapper elements - panels render directly for clean DOM structure
-   * @note Supports any content type through snippet rendering
-   */
-import type { Snippet } from "svelte";
-type Props = {
-    direction?: "horizontal" | "vertical";
-    initialSize?: number;
-    dividerSize?: number;
-    minSize?: number;
-    maxSize?: number;
-    first?: Snippet;
-    second?: Snippet;
-};
-declare const Splitter: import("svelte").Component<Props, {}, "">;
-type Splitter = ReturnType<typeof Splitter>;
-export default Splitter;

package/dist/lib/Switch.svelte

@@ -1,167 +0,0 @@
-<!-- src/lib/Switch.svelte -->
-<script lang="ts">
-  /**
-   * @component Switch
-   * @description A compact toggle switch component built on top of a native `<input type="checkbox">`. Supports optional labels around the control and works naturally with `bind:checked`.
-   *
-   * @prop sz {SizeKey} - Size preset for the control
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop checked {boolean} - Current state (bindable)
-   * @default false
-   *
-   * @prop leftLabel {string} - Optional label rendered on the left side
-   *
-   * @prop rightLabel {string} - Optional label rendered on the right side
-   *
-   * @prop topLabel {string} - Optional label placed above the switch
-   *
-   * @prop onChange {(v: boolean) => void} - Fired on toggle with the new value
-   *
-   * @prop class {string} - External wrapper classes
-   * @default ""
-   *
-   * @note Built over a real checkbox so browser accessibility comes for free: keyboard (Space/Enter), focus ring, and screen reader semantics.
-   * @note Labels do not affect the actual checkbox hitbox, but the whole area is clickable if wrapped correctly.
-   * @note Size preset adjusts track width, knob size, and spacing.
-   * @note Reflects `disabled` by dimming visuals and removing pointer events.
-   * @note The component keeps no internal state besides the bound `checked` value, so it's predictable in forms and controlled UI.
-   */
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import type { SizeKey } from "./types";
-  import { TEXT } from "./types";
-  import { cx, uid } from "../utils";
-
-  type Props = HTMLInputAttributes & {
-    sz?: SizeKey;
-    checked?: boolean;
-    leftLabel?: string;
-    rightLabel?: string;
-    topLabel?: string;
-    onChange?: (v: boolean) => void;
-    class?: string;
-  };
-
-  let {
-    sz = "md",
-    checked = $bindable(false),
-    leftLabel,
-    rightLabel,
-    topLabel,
-    onChange,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const inputId = $derived(rest.id ?? uid("sw-"));
-
-  const track = {
-    xs: "w-8 h-4",
-    sm: "w-10 h-5",
-    md: "w-12 h-6",
-    lg: "w-14 h-7",
-    xl: "w-16 h-8",
-  } as const;
-
-  const knob = {
-    xs: "h-[14px] w-[14px]",
-    sm: "h-[17px] w-[17px]",
-    md: "h-5 w-5",
-    lg: "h-6 w-6",
-    xl: "h-7 w-7",
-  } as const;
-
-  const pad = {
-    xs: "p-[1px]",
-    sm: "p-[1.5px]",
-    md: "p-[2px]",
-    lg: "p-[2px]",
-    xl: "p-[2px]",
-  } as const;
-
-  const isDisabled = $derived(
-    "disabled" in rest ? Boolean(rest.disabled) : false
-  );
-
-  function toggle() {
-    if (isDisabled) return;
-    checked = !checked;
-    onChange?.(checked);
-  }
-
-  const justifyClass = $derived(checked ? "justify-end" : "justify-start");
-
-  const trackClass = $derived(
-    cx(
-      "relative inline-flex items-center rounded-full border transition focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)]",
-      track[sz],
-      pad[sz],
-      checked
-        ? "bg-[var(--color-bg-primary)] border-[var(--color-bg-primary)]"
-        : "bg-[var(--color-bg-muted)] border-[var(--border-color-default)]",
-      isDisabled
-        ? "opacity-[var(--opacity-disabled)] cursor-not-allowed"
-        : "cursor-pointer",
-      justifyClass
-    )
-  );
-
-  const rootClass = $derived(
-    cx("inline-flex flex-col items-center gap-1 select-none", externalClass)
-  );
-
-  const knobClass = $derived(
-    cx(
-      knob[sz],
-      "rounded-full bg-white border border-[var(--border-color-default)] shadow-sm"
-    )
-  );
-</script>
-
-<label class={rootClass} for={inputId}>
-  {#if topLabel}
-    <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
-      {topLabel}
-    </span>
-  {/if}
-
-  <div class="inline-flex items-center gap-2">
-    {#if leftLabel}
-      <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
-        {leftLabel}
-      </span>
-    {/if}
-
-    <input
-      id={inputId}
-      type="checkbox"
-      {checked}
-      {...rest}
-      class="sr-only"
-      aria-checked={checked}
-      aria-invalid={rest["aria-invalid"] || undefined}
-      aria-describedby={rest["aria-describedby"]}
-      onchange={() => toggle()}
-    />
-
-    <button
-      type="button"
-      class={trackClass}
-      onclick={toggle}
-      aria-pressed={checked}
-      aria-label={typeof rest["aria-label"] === "string"
-        ? rest["aria-label"]
-        : "Switch"}
-      disabled={isDisabled}
-    >
-      <span class={knobClass}></span>
-    </button>
-
-    {#if rightLabel}
-      <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
-        {rightLabel}
-      </span>
-    {/if}
-  </div>
-</label>