kosui 0.2.0 → 0.5.0

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

@@ -1,216 +0,0 @@
-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;
-    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);
-        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 handleRenderer() {
-        return this.#handleRenderer();
-    }
-    get handleLabelRenderer() {
-        return this.#handleLabelRenderer();
-    }
-    get handleLabelArrowRenderer() {
-        return this.#handleLabelArrowRenderer();
-    }
-    get markRenderer() {
-        return this.#markRenderer();
-    }
-    get markDotRenderer() {
-        return this.#markDotRenderer();
-    }
-    get markLabelRenderer() {
-        return this.#markLabelRenderer();
-    }
-    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);
-    };
-    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.clicked = true;
-        this.sliderEl.setPointerCapture(event.pointerId);
-        this.value = this.getValueFromPosition(event.clientX);
-        event.preventDefault();
-        event.stopImmediatePropagation();
-    };
-    pointerMove = (event) => {
-        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.clicked)
-            return;
-        this.dragging = false;
-        this.clicked = 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.focused = true;
-    };
-    blur = () => {
-        this.focused = 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

@@ -1,18 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,35 +0,0 @@
-<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.clicked ||
-        ctx.hovered ||
-        ctx.dragging ||
-        ctx.focused),
-  );
-</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

@@ -1,6 +0,0 @@
-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

@@ -1,54 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,25 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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/switch/switch-thumb.svelte

@@ -1,52 +0,0 @@
-<script lang="ts" module>
-  import type {
-    SwitchColorProp,
-    SwitchRadiusProp,
-    SwitchSizeProp,
-  } from "./index.js";
-  import type { ClassName } from "../utils.js";
-  import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-
-  export type SwitchThumbProps = {} & ClassName &
-    SwitchColorProp &
-    SwitchSizeProp &
-    SwitchRadiusProp &
-    HTMLAttributes<HTMLDivElement>;
-</script>
-
-<script lang="ts">
-  let {
-    class: className,
-    color = "primary",
-    size = "sm",
-    radius = "xl",
-    ...restProps
-  }: SwitchThumbProps = $props();
-</script>
-
-<div
-  class={twMerge(
-    "absolute top-0.5 left-0.5 shadow-sm transition-all",
-
-    color === "primary" && "bg-m3-on-primary",
-    color === "secondary" && "bg-m3-on-secondary",
-    color === "tertiary" && "bg-m3-on-tertiary",
-    color === "error" && "bg-m3-on-error",
-
-    size === "xs" && "size-3 group-aria-checked:translate-x-4",
-    size === "sm" && "size-4 group-aria-checked:translate-x-5",
-    size === "md" && "size-5 group-aria-checked:translate-x-6",
-    size === "lg" && "size-6 group-aria-checked:translate-x-7",
-    size === "xl" && "size-7 group-aria-checked:translate-x-8",
-
-    radius === "xs" && "rounded-xs",
-    radius === "sm" && "rounded-sm",
-    radius === "md" && "rounded-lg",
-    radius === "lg" && "rounded-2xl",
-    radius === "xl" && "rounded-4xl",
-
-    className,
-  )}
-  {...restProps}
-></div>

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

@@ -1,7 +0,0 @@
-import type { SwitchColorProp, SwitchRadiusProp, SwitchSizeProp } from "./index.js";
-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>;
-export default SwitchThumb;

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

@@ -1,9 +0,0 @@
-export declare class ToggleContext<T> {
-    #private;
-    setValue: (val: T | undefined) => void;
-    constructor(getValue: () => T | undefined, setValue: (val: T | undefined) => void);
-    get value(): T | undefined;
-    set value(value: T | undefined);
-}
-export declare function setToggleContext<T>(ctx: ToggleContext<T>): ToggleContext<T>;
-export declare function getToggleContext<T>(): ToggleContext<T>;

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

@@ -1,32 +0,0 @@
-import { getContext, setContext } from "svelte";
-export class ToggleContext {
-    #value = $state(undefined);
-    setValue;
-    constructor(getValue, setValue) {
-        this.#value = getValue();
-        this.setValue = setValue;
-        $effect(() => {
-            if (this.#value !== getValue()) {
-                this.#value = getValue();
-            }
-        });
-    }
-    get value() {
-        return this.#value;
-    }
-    set value(value) {
-        if (this.#value !== value) {
-            this.#value = value;
-            this.setValue(value);
-        }
-    }
-}
-export function setToggleContext(ctx) {
-    return setContext(ToggleContext, ctx);
-}
-export function getToggleContext() {
-    const ctx = getContext(ToggleContext);
-    if (!ctx)
-        throw new Error("ToggleContext is undefined");
-    return ctx;
-}