sparkle-design 0.9.0

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

@@ -0,0 +1,177 @@
+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";
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+// タグのスタイル定義
+const tagVariants = cva("inline-flex items-center justify-center rounded-notice h-fit min-w-0", {
+    variants: {
+        variant: {
+            solid: "",
+            outline: "border",
+            subtle: "",
+        },
+        size: {
+            sm: "py-0 px-2 min-w-10 character-1-bold-pro",
+            md: "py-0.5 px-2 min-w-12 character-1-bold-pro",
+            lg: "py-1 px-2 min-w-14 character-2-bold-pro",
+        },
+        status: {
+            neutral: "",
+            info: "",
+            success: "",
+            warning: "",
+            negative: "",
+        },
+    },
+    compoundVariants: [
+        // === SOLID バリアント ===
+        // neutral + solid
+        {
+            variant: "solid",
+            status: "neutral",
+            className: "bg-neutral-500 text-white",
+        },
+        // info + solid
+        {
+            variant: "solid",
+            status: "info",
+            className: "bg-primary-500 text-white",
+        },
+        // success + solid
+        {
+            variant: "solid",
+            status: "success",
+            className: "bg-success-500 text-white",
+        },
+        // warning + solid
+        {
+            variant: "solid",
+            status: "warning",
+            className: "bg-warning-500 text-white",
+        },
+        // negative + solid
+        {
+            variant: "solid",
+            status: "negative",
+            className: "bg-negative-500 text-white",
+        },
+        // === OUTLINE バリアント ===
+        // neutral + outline
+        {
+            variant: "outline",
+            status: "neutral",
+            className: "border-neutral-500 text-neutral-500 bg-white",
+        },
+        // info + outline
+        {
+            variant: "outline",
+            status: "info",
+            className: "border-primary-500 text-primary-500 bg-white",
+        },
+        // success + outline
+        {
+            variant: "outline",
+            status: "success",
+            className: "border-success-500 text-success-500 bg-white",
+        },
+        // warning + outline
+        {
+            variant: "outline",
+            status: "warning",
+            className: "border-warning-500 text-warning-500 bg-white",
+        },
+        // negative + outline
+        {
+            variant: "outline",
+            status: "negative",
+            className: "border-negative-500 text-negative-500 bg-white",
+        },
+        // === SUBTLE バリアント ===
+        // neutral + subtle
+        {
+            variant: "subtle",
+            status: "neutral",
+            className: "bg-neutral-100 text-neutral-600",
+        },
+        // info + subtle
+        {
+            variant: "subtle",
+            status: "info",
+            className: "bg-primary-100 text-primary-600",
+        },
+        // success + subtle
+        {
+            variant: "subtle",
+            status: "success",
+            className: "bg-success-100 text-success-600",
+        },
+        // warning + subtle
+        {
+            variant: "subtle",
+            status: "warning",
+            className: "bg-warning-100 text-warning-600",
+        },
+        // negative + subtle
+        {
+            variant: "subtle",
+            status: "negative",
+            className: "bg-negative-100 text-negative-600",
+        },
+    ],
+    defaultVariants: {
+        variant: "solid",
+        size: "md",
+        status: "neutral",
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - タグは特定の要素にラベリングをすることで情報を分類・整理したり、情報にステータスを付与するために使用するコンポーネントです。
+ * - en: The Tag component is used to categorize and organize information by labeling specific elements, or to assign status to information.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - 通知数や件数などの数値情報には `Tag` を使わず、`Badge` を使ってください。
+ *   en: Do not use `Tag` for numeric information such as notification counts. Use `Badge` instead.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <>
+ *   <Tag status="success">完了</Tag>
+ *   <Badge>3</Badge>
+ * </>
+ *
+ * // ❌ Wrong - 件数表示に Tag を使わない
+ * <Tag status="info">3件</Tag>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Tag variant="solid" size="md" status="info">情報</Tag>
+ * ```
+ *
+ * @param {TagProps} props
+ */
+const Tag = React.forwardRef((_a, ref) => {
+    var { className, variant, size, status, children } = _a, props = __rest(_a, ["className", "variant", "size", "status", "children"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn(tagVariants({ variant, size, status, className })) }, props, { children: _jsx("span", { className: "min-w-0 truncate", children: children }) })));
+});
+Tag.displayName = "Tag";
+export { Tag, tagVariants };

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

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * **概要 / Overview**
+ *
+ * - テキストエリアは複数行のテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Textarea component is used to capture user input in the form of multi-line text fields.
+ */
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * テキストエリアコンポーネントのプロパティ定義
+ * 標準のTextarea属性に加えてバリアントプロパティを拡張
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+    /**
+     * エラー状態かどうか
+     * en: Whether the textarea is in an error state
+     */
+    isInvalid?: boolean;
+    /**
+     * 無効状態かどうか
+     * en: Whether the textarea is disabled
+     */
+    isDisabled?: boolean;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - テキストエリアは複数行のテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Textarea component is used to capture user input in the form of multi-line text fields.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Textarea size="md" placeholder="複数行のテキストを入力してください" />
+ * ```
+ *
+ * @param {TextareaProps} props
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea, textareaVariants };

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

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

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Textarea } 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(Textarea, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2876-24038", {
+    props: {
+        size: figma.enum("size", { sm: "sm", md: "md", lg: "lg" }),
+        isInvalid: figma.boolean("isInvalid"),
+        isDisabled: figma.enum("state", {
+            disabled: true,
+        }),
+        defaultValue: figma.boolean("isEmpty", {
+            true: undefined,
+            false: figma.string("value"),
+        }),
+        placeholder: figma.boolean("isEmpty", {
+            true: figma.string("value"),
+            false: undefined,
+        }),
+    },
+    example: props => (_jsx(Textarea, { size: props.size, isInvalid: props.isInvalid, isDisabled: props.isDisabled, placeholder: props.placeholder, defaultValue: props.defaultValue })),
+});

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

@@ -0,0 +1,94 @@
+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";
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+/**
+ * **概要 / Overview**
+ *
+ * - テキストエリアは複数行のテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Textarea component is used to capture user input in the form of multi-line text fields.
+ */
+const textareaVariants = cva(
+// ベーススタイル
+"flex w-full rounded-action border bg-white px-3 py-1 ring-offset-background placeholder:text-base-400 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--color-ring-normal)] focus-visible:ring-offset-2 resize", {
+    variants: {
+        // サイズバリアント（sm, md, lg）
+        size: {
+            sm: "min-h-[56px] character-2-regular-pro",
+            md: "min-h-[56px] character-3-regular-pro",
+            lg: "min-h-[64px] character-4-regular-pro",
+        },
+        // エラー状態のバリアント
+        isInvalid: {
+            true: "border-negative-500 hover:border-negative-600 focus-visible:border-negative-600",
+            false: "border-neutral-500 hover:border-neutral-600 focus-visible:border-neutral-600",
+        },
+        // 無効状態のバリアント
+        isDisabled: {
+            false: "",
+            true: "cursor-not-allowed text-base-300 placeholder:text-base-300 focus-visible:ring-0",
+        },
+    },
+    // 複合バリアント（複数の状態の組み合わせ）
+    compoundVariants: [
+        // 無効状態かつエラー状態の場合
+        {
+            isInvalid: true,
+            isDisabled: true,
+            className: "bg-neutral-50 border-negative-200 hover:border-negative-200",
+        },
+        // 無効状態かつ通常状態の場合
+        {
+            isInvalid: false,
+            isDisabled: true,
+            className: "bg-neutral-50 border-neutral-200 hover:border-neutral-200",
+        },
+    ],
+    // デフォルト値
+    defaultVariants: {
+        size: "md",
+        isInvalid: false,
+        isDisabled: false,
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - テキストエリアは複数行のテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Textarea component is used to capture user input in the form of multi-line text fields.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Textarea size="md" placeholder="複数行のテキストを入力してください" />
+ * ```
+ *
+ * @param {TextareaProps} props
+ */
+const Textarea = React.forwardRef((_a, ref) => {
+    var { className, isInvalid, size, isDisabled, disabled } = _a, props = __rest(_a, ["className", "isInvalid", "size", "isDisabled", "disabled"]);
+    // 後方互換性のため、isDisabledが優先、次にdisabledを使用
+    const isTextareaDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled;
+    return (_jsx("textarea", Object.assign({ "aria-invalid": isInvalid || undefined, className: cn(textareaVariants({
+            size,
+            isInvalid,
+            isDisabled: isTextareaDisabled,
+        }), className), disabled: isTextareaDisabled, ref: ref }, props)));
+});
+Textarea.displayName = "Textarea";
+export { Textarea, textareaVariants };

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Toaster } from "sonner";
+export type { ExternalToast, ToastClassnames, ToastT } from "sonner";
+type ReactToastProps = React.ComponentProps<typeof Toaster>;
+export interface ToastProps extends Omit<ReactToastProps, "id"> {
+    /**
+     * トーストの識別子
+     * en: Identifier of the toast
+     */
+    id?: string | number;
+    /**
+     * トーストのタイトル
+     * en: Title of the toast
+     */
+    title?: string;
+    /**
+     * トーストの説明
+     * en: Description of the toast
+     */
+    description: string;
+    /**
+     * 閉じるボタンを表示するかどうか
+     * en: Whether to show the close button
+     */
+    isCloseTrigger?: boolean;
+    /**
+     * トーストの表示時間（ミリ秒）
+     * en: Duration of the toast (in milliseconds)
+     */
+    duration?: ReactToastProps["duration"];
+}
+/**
+ * **概要 / Overview**
+ *
+ * - トーストはアクションの発生時にユーザーへフィードバックを行うために使用するコンポーネントです。
+ * - en: Toasts are used to provide feedback to users when actions occur.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <>
+ *   <Toaster />
+ *   <Button onClick={() => toast({
+ *     title: "保存しました",
+ *     description: "1件の変更が反映されました",
+ *   })}>
+ *     トーストを表示
+ *   </Button>
+ * </>
+ * ```
+ *
+ * @param {ToastProps} props
+ */
+export declare function Toast({ className, title, description, isCloseTrigger, id, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * - トーストはアクションの発生時にユーザーへフィードバックを行うために使用するコンポーネントです。
+ * - en: Toasts are used to provide feedback to users when actions occur.
+ */
+export declare function toast(props: Omit<ToastProps, "id" | "position">): string | number;
+export { Toaster };

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Toast } 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(Toast, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1266%3A13444", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        title: figma.boolean("isTitle", {
+            true: figma.string("title"),
+            false: undefined,
+        }),
+        description: figma.string("description"),
+        isCloseTrigger: figma.boolean("isCloseTrigger"),
+        // No matching props could be found for these Figma properties:
+        // "isCloseTrigger": figma.boolean('isCloseTrigger'),
+        // "isTitle": figma.boolean('isTitle'),
+        // "title": figma.string('title'),
+        // "description": figma.string('description')
+    },
+    example: props => (_jsx(Toast, { title: props.title, description: props.description, isCloseTrigger: props.isCloseTrigger })),
+});

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

@@ -0,0 +1,57 @@
+/**
+ * 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";
+// eslint-disable-next-line import/no-unresolved -- SonnerはESMのエクスポート構造によりLintの解決が失敗するため。 en: Sonner's ESM export map confuses the lint resolver.
+import { Toaster, toast as sonnerToast } from "sonner";
+import { cn } from "../../../lib/utils.js";
+import { IconButton } from "../../../components/ui/icon-button/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - トーストはアクションの発生時にユーザーへフィードバックを行うために使用するコンポーネントです。
+ * - en: Toasts are used to provide feedback to users when actions occur.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <>
+ *   <Toaster />
+ *   <Button onClick={() => toast({
+ *     title: "保存しました",
+ *     description: "1件の変更が反映されました",
+ *   })}>
+ *     トーストを表示
+ *   </Button>
+ * </>
+ * ```
+ *
+ * @param {ToastProps} props
+ */
+export function Toast({ className, title, description, isCloseTrigger = true, id, }) {
+    return (_jsxs("div", { role: "status", className: cn("shadow-float px-3 py-2 text-text-high flex w-[320px] rounded-notice gap-2 bg-neutral-50 border border-divider-middle", className), children: [_jsxs("div", { className: "h-full flex flex-col justify-center gap-0 px-1 grow", children: [title && (_jsx("p", { className: "character-3-bold-pro min-h-8 flex items-center", children: title })), _jsx("p", { className: "character-3-regular-pro min-h-8 flex items-center", children: description })] }), isCloseTrigger && (_jsx(IconButton, { icon: "close", size: "sm", variant: "ghost", theme: "neutral", "aria-label": "\u9589\u3058\u308B", onClick: () => {
+                    sonnerToast.dismiss(id);
+                } }))] }));
+}
+/**
+ * - トーストはアクションの発生時にユーザーへフィードバックを行うために使用するコンポーネントです。
+ * - en: Toasts are used to provide feedback to users when actions occur.
+ */
+export function toast(props) {
+    const { title, description, isCloseTrigger } = props, rest = __rest(props, ["title", "description", "isCloseTrigger"]);
+    return sonnerToast.custom(id => (_jsx(Toast, { title: title, description: description, isCloseTrigger: isCloseTrigger, id: id })), Object.assign(Object.assign({}, rest), { position: "top-center" }));
+}
+export { Toaster };

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+/**
+ * TooltipContentコンポーネントのプロパティ型
+ * en: Props type for TooltipContent component
+ */
+interface TooltipContentProps extends React.ComponentProps<typeof TooltipPrimitive.Content> {
+    /**
+     * ツールチップの表示位置を指定します。
+     * en: Specifies the position of the tooltip (top, right, bottom, left).
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * トリガー要素とツールチップの間の距離を指定します。
+     * en: Specifies the distance between the trigger element and the tooltip.
+     */
+    sideOffset?: number;
+}
+/**
+ * TooltipProvider コンポーネント
+ * en: TooltipProvider component
+ */
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+/**
+ * **概要 / Overview**
+ *
+ * - ツールチップは情報を一時的に補足するために使用するコンポーネントです。
+ * - en: The Tooltip component is used to provide additional information temporarily.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Tooltip Trigger</TooltipTrigger>
+ *   <TooltipContent>Tooltip Content</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @param {React.ComponentProps<typeof TooltipPrimitive.Root>} props
+ */
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TooltipTrigger コンポーネント
+ * en: TooltipTrigger component
+ */
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TooltipContent コンポーネント
+ * en: TooltipContent component
+ */
+declare function TooltipContent({ className, side, sideOffset, children, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipContentProps, };

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

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Tooltip, TooltipContent, TooltipTrigger } 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(TooltipContent, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=973%3A684", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        side: figma.enum("side", {
+            top: "top",
+            right: "right",
+            bottom: "bottom",
+            left: "left",
+        }),
+        // No matching props could be found for these Figma properties:
+        label: figma.string("label"),
+    },
+    example: props => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: "Tooltip Trigger" }), _jsx(TooltipContent, { side: props.side, children: props.label })] })),
+});

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

@@ -0,0 +1,65 @@
+/**
+ * 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 { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "../../../lib/utils.js";
+/**
+ * TooltipProvider コンポーネント
+ * en: TooltipProvider component
+ */
+function TooltipProvider(_a) {
+    var { delayDuration = 0 } = _a, props = __rest(_a, ["delayDuration"]);
+    return (_jsx(TooltipPrimitive.Provider, Object.assign({ "data-slot": "tooltip-provider", delayDuration: delayDuration }, props)));
+}
+/**
+ * **概要 / Overview**
+ *
+ * - ツールチップは情報を一時的に補足するために使用するコンポーネントです。
+ * - en: The Tooltip component is used to provide additional information temporarily.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Tooltip Trigger</TooltipTrigger>
+ *   <TooltipContent>Tooltip Content</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @param {React.ComponentProps<typeof TooltipPrimitive.Root>} props
+ */
+function Tooltip(_a) {
+    var props = __rest(_a, []);
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, Object.assign({ "data-slot": "tooltip" }, props)) }));
+}
+/**
+ * TooltipTrigger コンポーネント
+ * en: TooltipTrigger component
+ */
+function TooltipTrigger(_a) {
+    var props = __rest(_a, []);
+    return _jsx(TooltipPrimitive.Trigger, Object.assign({ "data-slot": "tooltip-trigger" }, props));
+}
+/**
+ * TooltipContent コンポーネント
+ * en: TooltipContent component
+ */
+function TooltipContent(_a) {
+    var { className, side = "top", sideOffset = 0, children } = _a, props = __rest(_a, ["className", "side", "sideOffset", "children"]);
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, Object.assign({ "data-slot": "tooltip-content", side: side, sideOffset: sideOffset, className: cn("bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", "z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice", "px-2 py-1 character-2-regular-pro text-white", className) }, props, { children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-neutral-900 fill-neutral-900 shadow-float z-50 size-3 translate-y-[calc(-50%_-_1px)] rotate-45 rounded-xs" })] })) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, };