kosui 0.0.26 → 0.0.28

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

@@ -0,0 +1,48 @@
+import type { SliderColor, SliderHandleLabelArrowProps, SliderHandleLabelProps, SliderHandleProps, SliderMarkDotProps, SliderMarkLabelProps, SliderMarkProps, SliderRadius, SliderSize } from "./index.js";
+import { type Snippet } from "svelte";
+export type Mark = {
+    value: number;
+    label?: string;
+};
+export declare class SliderContext {
+    #private;
+    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]>;
+    sliderEl: HTMLDivElement;
+    isHovered: boolean;
+    isDragging: boolean;
+    isFocused: 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);
+    get min(): number;
+    get max(): number;
+    get step(): number;
+    get marks(): Mark[];
+    get disabled(): boolean;
+    get label(): string;
+    get labelAlwaysOn(): boolean;
+    get inverted(): boolean;
+    get restrictToMarks(): boolean;
+    get color(): SliderColor;
+    get size(): SliderSize;
+    get radius(): SliderRadius;
+    get position(): number;
+    clamp: (val: number, minVal: number, maxVal: number) => number;
+    getValueFromPosition: (position: number) => number;
+    getPositionFromValue: (val: number) => number;
+    pointerDown: (event: PointerEvent) => void;
+    pointerMove: (event: PointerEvent) => void;
+    pointerUp: (event: PointerEvent) => void;
+    keyDown: (event: KeyboardEvent) => void;
+    focus: () => void;
+    blur: () => void;
+}
+export declare function setSliderContext(state: SliderContext): SliderContext;
+export declare function getSliderContext(): SliderContext;

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

@@ -0,0 +1,192 @@
+import { Bindable } from "../bindable.svelte.js";
+import { Shortcut } from "../shortcut/shortcut.js";
+import { getContext, setContext } from "svelte";
+export class SliderContext {
+    #value;
+    #min;
+    #max;
+    #step;
+    #marks;
+    #disabled;
+    #label;
+    #labelAlwaysOn;
+    #inverted;
+    #restrictToMarks;
+    #color;
+    #size;
+    #radius;
+    onChange;
+    onChangeEnd;
+    handleRenderer;
+    handleLabelRenderer;
+    handleLabelArrowRenderer;
+    markRenderer;
+    markDotRenderer;
+    markLabelRenderer;
+    sliderEl;
+    isHovered = $state(false);
+    isDragging = $state(false);
+    isFocused = $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);
+        this.#min = min;
+        this.#max = max;
+        this.#step = step;
+        this.#marks = marks;
+        this.#disabled = disabled;
+        this.#label = label;
+        this.#labelAlwaysOn = labelAlwaysOn;
+        this.#inverted = inverted;
+        this.#restrictToMarks = restrictToMarks;
+        this.#color = color;
+        this.#size = size;
+        this.#radius = radius;
+        this.onChange = onChange;
+        this.onChangeEnd = onChangeEnd;
+        this.handleRenderer = handleRenderer;
+        this.handleLabelRenderer = handleLabelRenderer;
+        this.handleLabelArrowRenderer = handleLabelArrowRenderer;
+        this.markRenderer = markRenderer;
+        this.markDotRenderer = markDotRenderer;
+        this.markLabelRenderer = markLabelRenderer;
+    }
+    get value() {
+        return this.#value.value;
+    }
+    set value(value) {
+        this.#value.value = this.clamp(value, this.min, this.max);
+        this.onChange?.(this.value);
+    }
+    get min() {
+        return this.#min();
+    }
+    get max() {
+        return this.#max();
+    }
+    get step() {
+        return this.#step();
+    }
+    get marks() {
+        return this.#marks();
+    }
+    get disabled() {
+        return this.#disabled();
+    }
+    get label() {
+        return this.#label(this.value);
+    }
+    get labelAlwaysOn() {
+        return this.#labelAlwaysOn();
+    }
+    get inverted() {
+        return this.#inverted();
+    }
+    get restrictToMarks() {
+        return this.#restrictToMarks();
+    }
+    get color() {
+        return this.#color();
+    }
+    get size() {
+        return this.#size();
+    }
+    get radius() {
+        return this.#radius();
+    }
+    get position() {
+        return this.getPositionFromValue(this.value);
+    }
+    clamp = (val, minVal, maxVal) => {
+        return Math.min(Math.max(val, minVal), maxVal);
+    };
+    getValueFromPosition = (position) => {
+        const rect = this.sliderEl.getBoundingClientRect();
+        const percentage = this.clamp((position - rect.left) / rect.width, 0, 1);
+        const range = this.max - this.min;
+        let newValue = this.min + (this.inverted ? 1 - percentage : percentage) * range;
+        if (this.restrictToMarks && this.marks.length > 0) {
+            // Find closest mark
+            const closest = this.marks.reduce((prev, curr) => Math.abs(curr.value - newValue) < Math.abs(prev.value - newValue)
+                ? curr
+                : prev);
+            newValue = closest.value;
+        }
+        else {
+            // Round to step
+            newValue = Math.round(newValue / this.step) * this.step;
+        }
+        return this.clamp(newValue, this.min, this.max);
+    };
+    getPositionFromValue = (val) => {
+        const percentage = (val - this.min) / (this.max - this.min);
+        return this.inverted ? (1 - percentage) * 100 : percentage * 100;
+    };
+    pointerDown = (event) => {
+        if (this.disabled)
+            return;
+        this.isDragging = true;
+        this.sliderEl.setPointerCapture(event.pointerId);
+        this.value = this.getValueFromPosition(event.clientX);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    pointerMove = (event) => {
+        if (this.disabled || !this.isDragging)
+            return;
+        this.value = this.getValueFromPosition(event.clientX);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    pointerUp = (event) => {
+        if (this.disabled || !this.isDragging)
+            return;
+        this.isDragging = false;
+        this.sliderEl.releasePointerCapture(event.pointerId);
+        this.onChangeEnd?.(this.value);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    keyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (Shortcut.ARROW_UP.matches(event) ||
+            Shortcut.ARROW_RIGHT.matches(event)) {
+            this.value = this.value + this.step;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.ARROW_DOWN.matches(event) ||
+            Shortcut.ARROW_LEFT.matches(event)) {
+            this.value = this.value - this.step;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.HOME.matches(event)) {
+            this.value = this.min;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.END.matches(event)) {
+            this.value = this.max;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        this.onChangeEnd?.(this.value);
+    };
+    focus = () => {
+        this.isFocused = true;
+    };
+    blur = () => {
+        this.isFocused = false;
+    };
+}
+export function setSliderContext(state) {
+    return setContext(SliderContext, state);
+}
+export function getSliderContext() {
+    const ctx = getContext(SliderContext);
+    if (!ctx)
+        throw new Error("SliderContext is undefined");
+    return ctx;
+}

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SliderHandleLabelArrowProps = {} & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+  let { class: className, ...restProps }: SliderHandleLabelArrowProps =
+    $props();
+</script>
+
+<div
+  class={twMerge(
+    "absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 border-t-4 border-r-4 border-l-4 border-transparent border-t-m3-outline-variant",
+    className,
+  )}
+  {...restProps}
+></div>

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

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { getSliderContext } from "./index.js";
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SliderHandleLabelProps = {} & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+  let { class: className, ...restProps }: SliderHandleLabelProps = $props();
+
+  const ctx = getSliderContext();
+
+  const showLabel = $derived(
+    !ctx.disabled &&
+      (ctx.labelAlwaysOn || ctx.isHovered || ctx.isDragging || ctx.isFocused),
+  );
+</script>
+
+{#if showLabel}
+  <div
+    role="tooltip"
+    class={twMerge(
+      "pointer-events-none absolute bottom-full left-1/2 mb-1 -translate-x-1/2 rounded-md border border-m3-outline-variant bg-m3-surface-container px-2 py-1 text-xs whitespace-nowrap text-m3-on-surface shadow-sm transition-opacity duration-200",
+      className,
+    )}
+    {...restProps}
+  >
+    {ctx.label}
+    {@render ctx.handleLabelArrowRenderer({})}
+  </div>
+{/if}

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

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

package/dist/slider/slider-handle.svelte

@@ -0,0 +1,51 @@
+<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 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 === "xs" && "rounded-xs",
+      ctx.radius === "sm" && "rounded-sm",
+      ctx.radius === "md" && "rounded-lg",
+      ctx.radius === "lg" && "rounded-2xl",
+      ctx.radius === "xl" && "rounded-full",
+
+      className,
+    )}
+    {...mergeProps(restProps, {
+      onpointerenter: () => (ctx.isHovered = true),
+      onpointerleave: () => (ctx.isHovered = 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;