sparkle-design 0.9.0

package/dist/components/ui/select/index.js

@@ -0,0 +1,281 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "radix-ui";
+import { Icon } from "../../../components/ui/icon/index.js";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+const selectTriggerVariants = cva([
+    "flex items-center justify-between w-full rounded-action border bg-white text-text-high transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2",
+    "overflow-hidden whitespace-nowrap",
+].join(" "), {
+    variants: {
+        size: {
+            sm: "h-8 py-1 pl-2 pr-1 gap-2 character-2-regular-pro",
+            md: "h-10 py-1 pl-3 pr-1.5 gap-2 character-3-regular-pro",
+            lg: "h-12 py-1 pl-4 pr-2 gap-2 character-4-regular-pro",
+        },
+        isInvalid: {
+            true: "bg-white border-negative-500 hover:border-negative-600 data-[state=open]:border-negative-600",
+            false: "border-neutral-500 hover:border-neutral-600 data-[state=open]:border-neutral-600",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed bg-neutral-50 border-neutral-200 hover:border-neutral-200 text-text-disabled",
+            false: "cursor-pointer",
+        },
+    },
+    compoundVariants: [
+        {
+            isInvalid: true,
+            isDisabled: true,
+            class: "bg-neutral-50 border-negative-200 hover:border-negative-200",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        isInvalid: false,
+        isDisabled: false,
+    },
+});
+const selectIconVariants = cva("", {
+    variants: {
+        size: {
+            sm: "icon-5-fill-0",
+            md: "icon-6-fill-0",
+            lg: "icon-7-fill-0",
+        },
+        isDisabled: {
+            true: "text-text-disabled",
+            false: "text-neutral-700",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        isDisabled: false,
+    },
+});
+const selectContentVariants = cva([
+    "bg-white text-text-high",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-action border shadow-float",
+].join(" "), {
+    variants: {
+        position: {
+            popper: "bg-white data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+            item: "",
+            "item-aligned": "",
+        },
+    },
+    defaultVariants: {
+        position: "popper",
+    },
+});
+const selectViewportVariants = cva("p-1", {
+    variants: {
+        position: {
+            popper: "h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            item: "",
+            "item-aligned": "",
+        },
+    },
+    defaultVariants: {
+        position: "popper",
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトはオプショングループの中から値を選択する形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Select component is used to capture user input by selecting a value from a group of options.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - `SelectTrigger` と横並びの Button は原則同じサイズにしてください。デフォルトの `SelectTrigger` に対しては `Button size="md"` を使ってください。
+ *   en: Keep Button size aligned when placing it next to `SelectTrigger`. Use `Button size="md"` with the default `SelectTrigger` size.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <div className="flex gap-2">
+ *   <Select>
+ *     <SelectTrigger size="md" className="w-60">
+ *       <SelectValue placeholder="選択してください" />
+ *     </SelectTrigger>
+ *   </Select>
+ *   <Button size="md">追加</Button>
+ * </div>
+ *
+ * // ❌ Wrong - 高さが揃わないサイズ不一致
+ * <div className="flex gap-2">
+ *   <Select>
+ *     <SelectTrigger size="md" className="w-60">
+ *       <SelectValue placeholder="選択してください" />
+ *     </SelectTrigger>
+ *   </Select>
+ *   <Button size="sm">追加</Button>
+ * </div>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Select>
+ *   <SelectTrigger size="md">
+ *     <SelectValue placeholder="選択してください" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">オプション1</SelectItem>
+ *     <SelectItem value="option2">オプション2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @param {React.ComponentProps<typeof SelectPrimitive.Root>} props
+ */
+function Select(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Root, Object.assign({ "data-slot": "select" }, props));
+}
+function SelectGroup(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Group, Object.assign({ "data-slot": "select-group" }, props));
+}
+function SelectValue(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Value, Object.assign({ "data-slot": "select-value" }, props));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトのトリガー部分で、クリックで選択肢リストを開閉するボタンとして機能します。
+ * - en: The trigger part of the select that functions as a button to open/close the option list when clicked.
+ *
+ * @param {SelectTriggerProps} props
+ */
+function SelectTrigger(_a) {
+    var { className, size, children, isInvalid, disabled } = _a, props = __rest(_a, ["className", "size", "children", "isInvalid", "disabled"]);
+    return (_jsxs(SelectPrimitive.Trigger, Object.assign({ "data-slot": "select-trigger", "data-size": size, "aria-invalid": isInvalid || undefined, className: cn(selectTriggerVariants({
+            size,
+            isInvalid,
+            isDisabled: disabled,
+        }), className), disabled: disabled }, props, { children: [_jsx("span", { className: "flex-1 min-w-0 text-left truncate", children: children }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(Icon, { icon: "arrow_drop_down", className: cn(selectIconVariants({ size, isDisabled: disabled }), "shrink-0") }) })] })));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトのドロップダウンリスト本体で、選択肢リストの表示・スクロール制御を行います。
+ * - en: The main dropdown list body of the select that handles display and scroll control of option lists.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectContent>
+ *   <SelectItem value="option1">オプション1</SelectItem>
+ * </SelectContent>
+ * ```
+ */
+function SelectContent(_a) {
+    var { className, children, position = "popper" } = _a, props = __rest(_a, ["className", "children", "position"]);
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, Object.assign({ "data-slot": "select-content", className: cn(selectContentVariants({ position }), className), position: position }, props, { children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn(selectViewportVariants({ position })), children: children }), _jsx(SelectScrollDownButton, {})] })) }));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトのラベル部分で、グループ化された選択肢のラベル表示に使います。
+ * - en: The label part of the select used to display labels for grouped options.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectLabel>カテゴリー</SelectLabel>
+ * ```
+ */
+function SelectLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.Label, Object.assign({ "data-slot": "select-label", className: cn("px-2 py-1.5 character-1-bold-pro text-text-high", className) }, props)));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの各選択肢アイテムで、選択可能なリスト項目として機能します。
+ * - en: Each selectable item in the select that functions as a selectable list item.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectItem value="option1">オプション1</SelectItem>
+ * ```
+ */
+function SelectItem(_a) {
+    var { className, children, textClassName } = _a, props = __rest(_a, ["className", "children", "textClassName"]);
+    return (_jsxs(SelectPrimitive.Item, Object.assign({ "data-slot": "select-item", className: cn([
+            "relative flex w-full cursor-pointer select-none items-center rounded-notice",
+            "py-1.5 pl-8 pr-2 text-sm",
+            "character-1-regular-pro text-neutral-700",
+            "outline-none focus:bg-neutral-100 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        ].join(" "), className) }, props, { children: [_jsx(SelectPrimitive.ItemIndicator, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Icon, { icon: "check", size: 4 }) }), _jsx(SelectPrimitive.ItemText, { className: cn("flex-1", textClassName), children: children })] })));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの区切り線で、選択肢リスト内の区切り表示に使います。
+ * - en: The separator line in the select used to display divisions within the option list.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectSeparator />
+ * ```
+ */
+function SelectSeparator(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.Separator, Object.assign({ "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-divider-low", className) }, props)));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの上スクロールボタンで、選択肢が多い場合にリストを上方向にスクロールします。
+ * - en: The up scroll button of the select that scrolls the list upward when there are many options.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectScrollUpButton />
+ * ```
+ */
+function SelectScrollUpButton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.ScrollUpButton, Object.assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(Icon, { icon: "expand_less", size: 4 }) })));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - セレクトの下スクロールボタンで、選択肢が多い場合にリストを下方向にスクロールします。
+ * - en: The down scroll button of the select that scrolls the list downward when there are many options.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <SelectScrollDownButton />
+ * ```
+ */
+function SelectScrollDownButton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.ScrollDownButton, Object.assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(Icon, { icon: "expand_more", size: 4 }) })));
+}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/ui/skeleton/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from "react";
+/**
+ * **概要 / Overview**
+ *
+ * - スケルトンはユーザーにコンテンツが読込中であることを提示するために使用するコンポーネントです。
+ * - en: The Skeleton component is used to indicate to users that content is loading.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Skeleton className="h-4 w-[250px]" />
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/components/ui/skeleton/index.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/skeleton/index.figma.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Skeleton } from "./index.js";
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+figma.connect(Skeleton, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=24%3A131", {
+    props: {},
+    example: props => _jsx(Skeleton, {}),
+});

package/dist/components/ui/skeleton/index.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+/**
+ * **概要 / Overview**
+ *
+ * - スケルトンはユーザーにコンテンツが読込中であることを提示するために使用するコンポーネントです。
+ * - en: The Skeleton component is used to indicate to users that content is loading.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Skeleton className="h-4 w-[250px]" />
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLDivElement>} props
+ */
+function Skeleton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("animate-pulse rounded-notice bg-skeleton-fill", className) }, props)));
+}
+export { Skeleton };

package/dist/components/ui/slider/index.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+declare const sliderRootVariants: (props?: ({
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SliderVariantProps = VariantProps<typeof sliderRootVariants>;
+type SliderPrimitiveProps = Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "orientation">;
+export interface SliderProps extends SliderPrimitiveProps {
+    /**
+     * スライダーが無効化されているかどうか
+     * en: Whether the slider is disabled
+     */
+    isDisabled?: SliderVariantProps["isDisabled"];
+    /**
+     * スライダーの最大値
+     * en: The maximum value of the slider
+     */
+    max?: SliderPrimitiveProps["max"];
+    /**
+     * スライダーの最小値
+     * en: The minimum value of the slider
+     */
+    min?: SliderPrimitiveProps["min"];
+    /**
+     * スライダーのステップ値
+     * en: The step value of the slider
+     */
+    step?: SliderPrimitiveProps["step"];
+    /**
+     * スライダーの値（制御コンポーネント用）
+     * en: The value of the slider (for controlled component)
+     */
+    value?: SliderPrimitiveProps["value"];
+    /**
+     * スライダーの初期値（非制御コンポーネント用）
+     * en: The default value of the slider (for uncontrolled component)
+     */
+    defaultValue?: SliderPrimitiveProps["defaultValue"];
+    /**
+     * スライダーの値が変更されたときに呼び出されるコールバック
+     * en: Callback invoked when the value of the slider changes
+     */
+    onValueChange?: SliderPrimitiveProps["onValueChange"];
+    /**
+     * スライダーの単位表示を設定
+     * en: Set the unit display of the slider
+     */
+    unit?: string;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - スライダーは任意の範囲の中からユーザーに特定の数値を選択してもらうために使用するコンポーネントです。
+ * - en: The Slider component is used to select a value within a range.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Slider
+ *   value={[50]}
+ *   onValueChange={setValue}
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ * />
+ * ```
+ *
+ * @param {SliderProps} props
+ */
+declare function Slider({ className, isDisabled, disabled, value, defaultValue, onValueChange, unit, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Slider {
+    var displayName: string | undefined;
+}
+export { Slider };

package/dist/components/ui/slider/index.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/slider/index.figma.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Slider } from "./index.js";
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+figma.connect(Slider, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=15094%3A965", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        disabled: figma.enum("state", {
+            disabled: true,
+        }),
+        // No matching props could be found for these Figma properties:
+        // "value": figma.string('value'),
+        // "position": figma.enum('position', {
+        //   "0%": "0-",
+        //   "20%": "20-",
+        //   "40%": "40-",
+        //   "60%": "60-",
+        //   "80%": "80-",
+        //   "100%": "100-"
+        // })
+    },
+    example: props => _jsx(Slider, { disabled: props.disabled }),
+});

package/dist/components/ui/slider/index.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+import { getIndicatorMinCh } from "./utils.js";
+const sliderRootVariants = cva("relative flex touch-none select-none items-center py-1.5 flex-1 min-w-0", {
+    variants: {
+        isDisabled: {
+            true: "cursor-not-allowed",
+        },
+    },
+    defaultVariants: {
+        isDisabled: false,
+    },
+});
+const sliderRangeVariants = cva("absolute h-full bg-primary-500", {
+    variants: {
+        isDisabled: {
+            true: "bg-neutral-200",
+        },
+    },
+    defaultVariants: {
+        isDisabled: false,
+    },
+});
+const sliderThumbVariants = cva([
+    "relative block rounded-full border border-neutral-500 bg-white shadow-raise cursor-pointer",
+    "ring-offset-background transition-colors hover:bg-neutral-100",
+    "focus:outline-hidden focus:bg-primary-100 focus:border-primary-200",
+    "focus:ring-2 focus:ring-[var(--color-ring-normal)] focus:ring-offset-2",
+    "h-4 w-4",
+    // タッチターゲットを24x24px以上に拡張（WCAG 2.5.8）
+    // en: Expand touch target to 24x24px minimum (WCAG 2.5.8)
+    "before:absolute before:content-[''] before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:min-h-6 before:min-w-6",
+].join(" "), {
+    variants: {
+        isDisabled: {
+            true: "pointer-events-none bg-neutral-100 hover:bg-neutral-100 border-none cursor-not-allowed",
+        },
+    },
+    defaultVariants: {
+        isDisabled: false,
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - スライダーは任意の範囲の中からユーザーに特定の数値を選択してもらうために使用するコンポーネントです。
+ * - en: The Slider component is used to select a value within a range.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Slider
+ *   value={[50]}
+ *   onValueChange={setValue}
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ * />
+ * ```
+ *
+ * @param {SliderProps} props
+ */
+function Slider(_a) {
+    var _b;
+    var { className, isDisabled, disabled, value, defaultValue, onValueChange, unit } = _a, props = __rest(_a, ["className", "isDisabled", "disabled", "value", "defaultValue", "onValueChange", "unit"]);
+    const isDisabledState = Boolean(isDisabled || disabled);
+    // 非制御コンポーネントの場合の内部状態管理
+    const [internalValue, setInternalValue] = React.useState(defaultValue || [(_b = props === null || props === void 0 ? void 0 : props.min) !== null && _b !== void 0 ? _b : 0]);
+    // 制御コンポーネントかどうかを判定
+    const isControlled = value !== undefined;
+    // 現在の値を取得（制御/非制御コンポーネントに対応）
+    const currentValue = isControlled ? value : internalValue;
+    // 値変更ハンドラー
+    const handleValueChange = React.useCallback((newValue) => {
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [isControlled, onValueChange]);
+    // 最小幅のみ制御するため style のみ指定
+    // en: Control only min width
+    const valueMinWidthStyle = React.useMemo(() => {
+        const ch = getIndicatorMinCh(props === null || props === void 0 ? void 0 : props.max, unit);
+        // NOTE: 端にThumbが来た時サイズ変化してしまうため、Thumbの半径分の余白を加算
+        return ch > 0 ? { minWidth: `calc(${ch}ch + var(--spacing) * 2)` } : {};
+    }, [props === null || props === void 0 ? void 0 : props.max, unit]);
+    return (_jsxs("div", { className: "flex justify-center gap-3 w-full", children: [_jsxs(SliderPrimitive.Root, Object.assign({ "data-slot": "slider", disabled: isDisabledState, "aria-disabled": isDisabledState, className: cn(sliderRootVariants({ isDisabled: isDisabledState }), className), value: value, defaultValue: defaultValue, onValueChange: handleValueChange }, props, { children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("relative w-full grow overflow-hidden rounded-xs h-1", isDisabledState
+                            ? "bg-neutral-100 cursor-not-allowed"
+                            : "bg-neutral-200 cursor-pointer"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn(sliderRangeVariants({ isDisabled: isDisabledState })) }) }), _jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn(sliderThumbVariants({ isDisabled: isDisabledState })) })] })), _jsxs("span", { className: cn("text-right tabular-nums character-3-regular-mono flex-shrink-0", isDisabledState
+                    ? "text-text-disabled cursor-not-allowed"
+                    : "text-text-middle"), style: valueMinWidthStyle, children: [currentValue[0], unit] })] }));
+}
+Slider.displayName = SliderPrimitive.Root.displayName;
+export { Slider };

package/dist/components/ui/slider/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 数値の桁数を算出（符号・小数点は除外）
+ * en: Count digits of a number (exclude sign and decimal part)
+ */
+export declare function getDigitCount(max?: number): number;
+/**
+ * 単位の見かけ幅(ch)を概算
+ * 全角/CJKや絵文字は 2ch、それ以外は 1ch として加算
+ * en: Approximate visual width of unit in ch. Count full-width/CJK and emoji as 2ch, others as 1ch
+ */
+export declare function getUnitChWidth(unit?: string): number;
+/**
+ * 値インディケーターの最小幅(ch)を算出
+ * en: Calculate the min ch width for the value indicator
+ */
+export declare function getIndicatorMinCh(max?: number, unit?: string): number;

package/dist/components/ui/slider/utils.js

@@ -0,0 +1,56 @@
+/**
+ * 数値の桁数を算出（符号・小数点は除外）
+ * en: Count digits of a number (exclude sign and decimal part)
+ */
+export function getDigitCount(max) {
+    const maxVal = max !== null && max !== void 0 ? max : 100;
+    const digits = Math.abs(Math.trunc(maxVal))
+        .toString()
+        .replace(/\D/g, "").length;
+    return Math.max(1, digits);
+}
+/**
+ * 単位の見かけ幅(ch)を概算
+ * 全角/CJKや絵文字は 2ch、それ以外は 1ch として加算
+ * en: Approximate visual width of unit in ch. Count full-width/CJK and emoji as 2ch, others as 1ch
+ */
+export function getUnitChWidth(unit) {
+    if (!unit)
+        return 0;
+    const isFullwidth = (codePoint) => {
+        if (codePoint >= 0x1100 &&
+            (codePoint <= 0x115f ||
+                codePoint === 0x2329 ||
+                codePoint === 0x232a ||
+                (codePoint >= 0x2e80 && codePoint <= 0xa4cf && codePoint !== 0x303f) ||
+                (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+                (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+                (codePoint >= 0xfe10 && codePoint <= 0xfe19) ||
+                (codePoint >= 0xfe30 && codePoint <= 0xfe6f) ||
+                (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+                (codePoint >= 0xffe0 && codePoint <= 0xffe6) ||
+                (codePoint >= 0x1b000 && codePoint <= 0x1b001) ||
+                (codePoint >= 0x1f200 && codePoint <= 0x1f251) ||
+                (codePoint >= 0x20000 && codePoint <= 0x3fffd))) {
+            return true;
+        }
+        return false;
+    };
+    const isEmoji = (codePoint) => (codePoint >= 0x1f000 && codePoint <= 0x1fbff) ||
+        (codePoint >= 0x1f900 && codePoint <= 0x1f9ff);
+    let width = 0;
+    for (const ch of [...unit]) {
+        const cp = ch.codePointAt(0);
+        if (cp === undefined)
+            continue;
+        width += isFullwidth(cp) || isEmoji(cp) ? 2 : 1;
+    }
+    return width;
+}
+/**
+ * 値インディケーターの最小幅(ch)を算出
+ * en: Calculate the min ch width for the value indicator
+ */
+export function getIndicatorMinCh(max, unit) {
+    return getDigitCount(max) + getUnitChWidth(unit);
+}