sparkle-design 0.9.0

package/dist/components/ui/inline-message/index.js

@@ -0,0 +1,154 @@
+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";
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Icon } from "../../../components/ui/icon/index.js";
+import { IconButton } from "../../../components/ui/icon-button/index.js";
+import { cn } from "../../../lib/utils.js";
+// ステータスごとのスタイル定義
+const inlineMessageVariants = cva("relative w-[448px] max-w-full rounded-md border p-3 flex gap-2 items-start", {
+    variants: {
+        status: {
+            info: "bg-info-50 border-info-300",
+            warning: "bg-warning-50 border-warning-200",
+            negative: "bg-negative-50 border-negative-300",
+            success: "bg-success-50 border-success-300",
+        },
+    },
+    defaultVariants: {
+        status: "info",
+    },
+});
+// ステータスごとのアイコン名
+const statusIcons = {
+    info: "info",
+    warning: "warning",
+    negative: "error",
+    success: "check_circle",
+};
+// ステータスごとの色クラス
+const statusColorClasses = {
+    info: "text-info-400",
+    warning: "text-warning-500",
+    negative: "text-negative-400",
+    success: "text-success-400",
+};
+const InlineMessageContext = React.createContext(null);
+/**
+ * **概要 / Overview**
+ *
+ * - インラインメッセージはユーザーにシステムやサービスの状態を伝えるために使用するコンポーネントです。
+ * - en: The InlineMessage component is used to convey system or service status to users.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InlineMessage status="info" onClose={() => console.log('closed')}>
+ *   <InlineMessageTitle>情報</InlineMessageTitle>
+ *   <InlineMessageDescription>
+ *     これは情報メッセージです。
+ *   </InlineMessageDescription>
+ * </InlineMessage>
+ * ```
+ *
+ * @param {InlineMessageProps} props
+ */
+const InlineMessage = React.forwardRef((_a, ref) => {
+    var { className, status = "info", onClose, isCloseTrigger = true, children } = _a, props = __rest(_a, ["className", "status", "onClose", "isCloseTrigger", "children"]);
+    // 一意なIDを生成 / en: Generate unique IDs
+    const baseId = React.useId();
+    const titleId = `${baseId}-title`;
+    const descId = `${baseId}-desc`;
+    // 子コンポーネントの登録状態 / en: Registration state of child components
+    const [hasTitle, setHasTitle] = React.useState(false);
+    const [hasDesc, setHasDesc] = React.useState(false);
+    // 子コンポーネントが自分を登録するコールバック
+    // en: Callbacks for child components to register themselves
+    const registerTitle = React.useCallback(() => {
+        setHasTitle(true);
+        return () => setHasTitle(false);
+    }, []);
+    const registerDesc = React.useCallback(() => {
+        setHasDesc(true);
+        return () => setHasDesc(false);
+    }, []);
+    // Context値をメモ化 / en: Memoize context value
+    const contextValue = React.useMemo(() => ({ titleId, descId, registerTitle, registerDesc }), [titleId, descId, registerTitle, registerDesc]);
+    // ステータスに対応するアイコン情報の取得
+    const statusIcon = status ? statusIcons[status] : statusIcons.info;
+    // ステータスに対応する色クラスの取得
+    const colorClass = status
+        ? statusColorClasses[status]
+        : statusColorClasses.info;
+    return (_jsx(InlineMessageContext.Provider, { value: contextValue, children: _jsxs("div", Object.assign({ ref: ref, role: "alert", "aria-labelledby": hasTitle ? titleId : undefined, "aria-describedby": hasDesc ? descId : undefined, className: cn(inlineMessageVariants({ status }), className) }, props, { children: [_jsx("span", { className: "inline-flex p-1 items-center justify-center", "aria-hidden": "true", children: _jsx(Icon, { icon: statusIcon, size: 6, fill: false, className: cn(colorClass) }) }), _jsx("div", { className: "flex flex-col flex-1 min-h-8", children: children }), isCloseTrigger && onClose && (_jsx(IconButton, { icon: "close", size: "sm", variant: "ghost", theme: "neutral", onClick: onClose, "aria-label": "\u9589\u3058\u308B", className: "shrink-0" }))] })) }));
+});
+InlineMessage.displayName = "InlineMessage";
+/**
+ * **概要 / Overview**
+ *
+ * - インラインメッセージのタイトルコンポーネントです。
+ * - en: Title component for inline messages.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InlineMessageTitle>タイトル</InlineMessageTitle>
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLSpanElement>} props
+ */
+const InlineMessageTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const context = React.useContext(InlineMessageContext);
+    // マウント時に親へ登録、アンマウント時に解除
+    // en: Register on mount, unregister on unmount
+    React.useEffect(() => {
+        if (!context)
+            return;
+        return context.registerTitle();
+    }, [context]);
+    return (_jsx("div", { className: cn("flex items-center min-h-8"), children: _jsx("span", Object.assign({ ref: ref, id: context === null || context === void 0 ? void 0 : context.titleId, className: cn("character-3-bold-pro text-text-high", className) }, props)) }));
+});
+InlineMessageTitle.displayName = "InlineMessageTitle";
+/**
+ * **概要 / Overview**
+ *
+ * - インラインメッセージの説明文コンポーネントです。
+ * - en: Description component for inline messages.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InlineMessageDescription>詳細な説明文</InlineMessageDescription>
+ * ```
+ *
+ * @param {React.HTMLAttributes<HTMLParagraphElement>} props
+ */
+const InlineMessageDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const context = React.useContext(InlineMessageContext);
+    // マウント時に親へ登録、アンマウント時に解除
+    // en: Register on mount, unregister on unmount
+    React.useEffect(() => {
+        if (!context)
+            return;
+        return context.registerDesc();
+    }, [context]);
+    return (_jsx("div", { className: cn("flex items-center min-h-8"), children: _jsx("p", Object.assign({ ref: ref, id: context === null || context === void 0 ? void 0 : context.descId, className: cn("character-3-regular-pro text-text-middle", className) }, props)) }));
+});
+InlineMessageDescription.displayName = "InlineMessageDescription";
+export { InlineMessage, InlineMessageTitle, InlineMessageDescription };

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

@@ -0,0 +1,118 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+    isFocused?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputVariantProps = VariantProps<typeof inputVariants>;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Inputサイズ指定
+     * en: Input size specification
+     */
+    size?: InputVariantProps["size"];
+    /**
+     * 無効にするかどうか
+     * en: Whether to disable the input
+     */
+    isDisabled?: boolean;
+    /**
+     * フォーカスするかどうか
+     * en: Whether to focus the input
+     */
+    isFocused?: boolean;
+    /**
+     * フィールドが無効かどうか
+     * en: Whether the field is invalid
+     */
+    isInvalid?: boolean;
+    /**
+     * アイコンボタンを有効にするフラグ
+     * en: Flag to enable the icon button
+     */
+    isTrigger?: boolean;
+    /**
+     * ボタンに表示するアイコン名
+     * en: Icon name displayed in the button
+     */
+    triggerIcon?: string;
+    /**
+     * アイコンボタンのアクセシビリティラベル
+     * en: Accessibility label for the icon button
+     */
+    triggerAriaLabel?: string;
+    /**
+     * アイコンボタンクリック時のコールバック
+     * en: Callback function for icon button click
+     */
+    onIconButtonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - インプットはテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Input component is used to capture user input in the form of a text field.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - Input の横にアイコンボタンを手動で配置しないでください。`isTrigger` / `triggerIcon` props を使用してください。
+ *   en: Do not manually place an IconButton next to Input. Use `isTrigger` / `triggerIcon` props instead.
+ * - Input と横並びの Button は原則同じサイズにしてください。デフォルトの Input には `Button size="md"`、省スペース UI では `Input size="sm"` と `Button size="sm"` を使ってください。
+ *   en: Keep Button size aligned when placing it next to Input. Use `Button size="md"` with the default Input, or pair `Input size="sm"` with `Button size="sm"` in compact UIs.
+ * - 無効状態は `isDisabled` を優先して使ってください。HTML 標準の `disabled` も互換のため受け付けますが、Sparkle Design のコードでは `isDisabled` に統一します。
+ *   en: Prefer `isDisabled` for disabled state. The native `disabled` prop is still supported for compatibility, but Sparkle Design code should standardize on `isDisabled`.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <>
+ *   <Input
+ *     isTrigger
+ *     triggerIcon="search"
+ *     triggerAriaLabel="検索"
+ *     onIconButtonClick={() => {}}
+ *   />
+ *   <div className="flex gap-2">
+ *     <Input placeholder="検索..." />
+ *     <Button size="md">検索</Button>
+ *   </div>
+ *   <div className="flex gap-2">
+ *     <Input size="sm" placeholder="メッセージ" />
+ *     <Button size="sm">送信</Button>
+ *   </div>
+ *   <Input isDisabled placeholder="無効状態" />
+ * </>
+ *
+ * // ❌ Wrong - 手動配置
+ * <div className="flex">
+ *   <Input />
+ *   <IconButton icon="search" aria-label="検索" />
+ * </div>
+ *
+ * // ❌ Wrong - サイズ不一致
+ * <div className="flex gap-2">
+ *   <Input placeholder="検索..." />
+ *   <Button size="sm">検索</Button>
+ * </div>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Input
+ *   size="md"
+ *   placeholder="テキストを入力"
+ *   isTrigger
+ *   triggerIcon="search"
+ * />
+ * ```
+ *
+ * @param {InputProps} props
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Input } 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(Input, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1274%3A63045", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        isDisabled: figma.enum("state", {
+            disabled: true,
+        }),
+        // isFocused: figma.boolean("isFocused"),
+        isInvalid: figma.boolean("isInvalid"),
+        defaultValue: figma.boolean("isEmpty", {
+            true: undefined,
+            false: figma.string("value"),
+        }),
+        placeholder: figma.boolean("isEmpty", {
+            true: figma.string("value"),
+            false: undefined,
+        }),
+        // No matching props could be found for these Figma properties:
+        isTrigger: figma.boolean("isTrigger"),
+        // "isFocused": figma.boolean('isFocused'),
+    },
+    example: props => (_jsx(Input, { size: props.size, isDisabled: props.isDisabled, isInvalid: props.isInvalid, defaultValue: props.defaultValue, isTrigger: props.isTrigger, placeholder: props.placeholder })),
+});

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

@@ -0,0 +1,256 @@
+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";
+/**
+ * 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";
+import { IconButton } from "../../../components/ui/icon-button/index.js";
+// 入力フィールドのスタイル定義
+const inputVariants = cva("flex gap-0 items-center w-full rounded-action border bg-white transition-colors p-1", {
+    variants: {
+        size: {
+            sm: "h-8 character-2-regular-pro",
+            md: "h-10 character-3-regular-pro",
+            lg: "h-12 character-4-regular-pro",
+        },
+        isInvalid: {
+            true: "border-negative-500",
+            false: "border-neutral-500",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed",
+            false: "",
+        },
+        isFocused: {
+            true: "ring-2 ring-[var(--color-ring-normal)] ring-offset-2 outline-hidden",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // 通常状態
+        {
+            isInvalid: false,
+            isDisabled: false,
+            className: "border-neutral-500 hover:border-neutral-600",
+        },
+        // エラー状態
+        {
+            isInvalid: true,
+            isDisabled: false,
+            className: "border-negative-500 hover:border-negative-600 bg-white",
+        },
+        // 無効状態
+        {
+            isInvalid: false,
+            isDisabled: true,
+            className: "border-neutral-200 bg-neutral-50",
+        },
+        // エラー+無効状態
+        {
+            isInvalid: true,
+            isDisabled: true,
+            className: "border-negative-200 bg-neutral-50",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        isInvalid: false,
+        isDisabled: false,
+        isFocused: false,
+    },
+});
+// 複数のrefをマージするユーティリティ関数
+function useMergeRefs(...refs) {
+    return React.useCallback((value) => {
+        refs.forEach(ref => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    }, [refs]);
+}
+/**
+ * **概要 / Overview**
+ *
+ * - インプットはテキストフィールドの形式でユーザーからの入力を取得するために使用するコンポーネントです。
+ * - en: The Input component is used to capture user input in the form of a text field.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - Input の横にアイコンボタンを手動で配置しないでください。`isTrigger` / `triggerIcon` props を使用してください。
+ *   en: Do not manually place an IconButton next to Input. Use `isTrigger` / `triggerIcon` props instead.
+ * - Input と横並びの Button は原則同じサイズにしてください。デフォルトの Input には `Button size="md"`、省スペース UI では `Input size="sm"` と `Button size="sm"` を使ってください。
+ *   en: Keep Button size aligned when placing it next to Input. Use `Button size="md"` with the default Input, or pair `Input size="sm"` with `Button size="sm"` in compact UIs.
+ * - 無効状態は `isDisabled` を優先して使ってください。HTML 標準の `disabled` も互換のため受け付けますが、Sparkle Design のコードでは `isDisabled` に統一します。
+ *   en: Prefer `isDisabled` for disabled state. The native `disabled` prop is still supported for compatibility, but Sparkle Design code should standardize on `isDisabled`.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <>
+ *   <Input
+ *     isTrigger
+ *     triggerIcon="search"
+ *     triggerAriaLabel="検索"
+ *     onIconButtonClick={() => {}}
+ *   />
+ *   <div className="flex gap-2">
+ *     <Input placeholder="検索..." />
+ *     <Button size="md">検索</Button>
+ *   </div>
+ *   <div className="flex gap-2">
+ *     <Input size="sm" placeholder="メッセージ" />
+ *     <Button size="sm">送信</Button>
+ *   </div>
+ *   <Input isDisabled placeholder="無効状態" />
+ * </>
+ *
+ * // ❌ Wrong - 手動配置
+ * <div className="flex">
+ *   <Input />
+ *   <IconButton icon="search" aria-label="検索" />
+ * </div>
+ *
+ * // ❌ Wrong - サイズ不一致
+ * <div className="flex gap-2">
+ *   <Input placeholder="検索..." />
+ *   <Button size="sm">検索</Button>
+ * </div>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Input
+ *   size="md"
+ *   placeholder="テキストを入力"
+ *   isTrigger
+ *   triggerIcon="search"
+ * />
+ * ```
+ *
+ * @param {InputProps} props
+ */
+const Input = React.forwardRef((_a, ref) => {
+    var { className, size, isInvalid = false, isDisabled = false, isTrigger = false, triggerIcon = "edit", triggerAriaLabel, onIconButtonClick, disabled, defaultValue, value, onChange, onBlur, onFocus } = _a, props = __rest(_a, ["className", "size", "isInvalid", "isDisabled", "isTrigger", "triggerIcon", "triggerAriaLabel", "onIconButtonClick", "disabled", "defaultValue", "value", "onChange", "onBlur", "onFocus"]);
+    // Refs
+    const containerRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const mergedInputRef = useMergeRefs(inputRef, ref);
+    // 状態管理
+    const [isInputFocused, setIsInputFocused] = React.useState(false);
+    const [isIconButtonFocused, setIsIconButtonFocused] = React.useState(false);
+    // HTML標準のdisabled属性とisDisabledプロパティを組み合わせた実際の無効状態
+    const isInputDisabled = Boolean(isDisabled || disabled);
+    // 入力値が変更されたときの処理
+    const handleChange = React.useCallback((e) => {
+        if (isInputDisabled)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange, isInputDisabled]);
+    // Input要素のフォーカス処理
+    const handleInputFocus = React.useCallback((e) => {
+        if (isInputDisabled)
+            return;
+        setIsInputFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [isInputDisabled, onFocus]);
+    const handleInputBlur = React.useCallback((e) => {
+        // ボタンにフォーカスが移った場合は、入力欄のフォーカスは解除しない
+        if (buttonRef.current !== e.relatedTarget) {
+            setIsInputFocused(false);
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [onBlur]);
+    // ボタンのフォーカス処理
+    const handleIconButtonFocus = React.useCallback(() => {
+        if (isInputDisabled)
+            return;
+        setIsIconButtonFocused(true);
+        setIsInputFocused(false);
+    }, [isInputDisabled]);
+    const handleIconButtonBlur = React.useCallback((e) => {
+        // 入力欄にフォーカスが移った場合は、ボタンのフォーカスは解除しない
+        if (inputRef.current !== e.relatedTarget) {
+            setIsIconButtonFocused(false);
+        }
+    }, []);
+    // コンテナクリック時にインプットにフォーカスを当てる
+    const handleContainerClick = React.useCallback((e) => {
+        if (isInputDisabled)
+            return;
+        // アイコンボタン上でのクリックを除外
+        if (buttonRef.current &&
+            (buttonRef.current === e.target ||
+                buttonRef.current.contains(e.target))) {
+            return;
+        }
+        // 入力要素が無効でなければフォーカスを当てる
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isInputDisabled]);
+    // 外部クリックでフォーカスを解除するためのハンドラ
+    React.useEffect(() => {
+        // 無効状態の場合はイベントリスナーを追加しない
+        if (isInputDisabled)
+            return;
+        const handleOutsideClick = (e) => {
+            // コンポーネント外のクリックを検出
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setIsInputFocused(false);
+                setIsIconButtonFocused(false);
+            }
+        };
+        // イベントリスナーを追加
+        document.addEventListener("mousedown", handleOutsideClick);
+        // クリーンアップ関数
+        return () => {
+            document.removeEventListener("mousedown", handleOutsideClick);
+        };
+    }, [isInputDisabled]);
+    // ボタンサイズの計算
+    const iconButtonSize = React.useMemo(() => {
+        switch (size) {
+            case "sm":
+                return "xs";
+            case "lg":
+                return "md";
+            default:
+                return "sm";
+        }
+    }, [size]);
+    return (_jsxs("div", { ref: containerRef, className: cn(inputVariants({
+            size,
+            isInvalid,
+            isDisabled: isInputDisabled,
+            isFocused: isInputFocused && !isIconButtonFocused,
+            className,
+        }), !isInputDisabled && "cursor-text" // 入力可能な場合はテキストカーソルを表示
+        ), 
+        // NOTE: not supportエラーがLintで出るためコメントアウト
+        // aria-disabled={isInputDisabled}
+        // aria-invalid={isInvalid === null ? undefined : isInvalid}
+        onClick: handleContainerClick, role: "presentation", tabIndex: -1, children: [_jsx("input", Object.assign({ ref: mergedInputRef, disabled: isInputDisabled, "aria-invalid": isInvalid || undefined, className: cn("w-full h-full bg-transparent border-none outline-hidden focus:outline-hidden", "text-text-high placeholder:text-text-placeholder px-2", isInputDisabled &&
+                    "cursor-not-allowed text-neutral-400 placeholder:text-text-disabled"), onChange: handleChange, onFocus: handleInputFocus, onBlur: handleInputBlur, defaultValue: defaultValue, value: value, "aria-disabled": isInputDisabled }, props)), isTrigger && (_jsx(IconButton, { ref: buttonRef, icon: triggerIcon, theme: "neutral", variant: "ghost", size: iconButtonSize, onClick: onIconButtonClick, isDisabled: isInputDisabled, disabled: isInputDisabled, type: "button" // フォーム内でデフォルトのsubmit動作を防ぐ
+                , "aria-label": triggerAriaLabel, onFocus: handleIconButtonFocus, onBlur: handleIconButtonBlur }))] }));
+});
+Input.displayName = "Input";
+export { Input, inputVariants };

package/dist/components/ui/input-password/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type InputProps } from "@/components/ui/input";
+export interface InputPasswordProps extends Omit<InputProps, "type" | "triggerIcon" | "triggerAriaLabel" | "isTrigger" | "onIconButtonClick"> {
+}
+/**
+ * **概要 / Overview**
+ *
+ * - インプットパスワードはパスワードの情報をユーザーから取得するために使用するコンポーネントです。
+ * - en: The InputPassword component is used to capture password information from users.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InputPassword
+ *   size="md"
+ *   placeholder="パスワードを入力してください"
+ * />
+ * ```
+ *
+ * @param {InputPasswordProps} props
+ */
+declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+export { InputPassword };

package/dist/components/ui/input-password/index.figma.d.ts

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

package/dist/components/ui/input-password/index.figma.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { InputPassword } 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(InputPassword, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=174%3A3296", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        size: figma.enum("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        disabled: figma.enum("state", {
+            disable: true,
+        }),
+        isFocused: figma.boolean("isFocused"),
+        isInvalid: figma.boolean("isInvaild"),
+        defaultValue: figma.boolean("isEmpty", {
+            true: undefined,
+            false: figma.string("value"),
+        }),
+        placeholder: figma.boolean("isEmpty", {
+            true: figma.string("value"),
+            false: undefined,
+        }),
+        // No matching props could be found for these Figma properties:
+        // "isFocused": figma.boolean('isFocused'),
+        // "value": figma.string('value')
+    },
+    example: props => (_jsx(InputPassword, { size: props.size, disabled: props.disabled, isFocused: props.isFocused, isInvalid: props.isInvalid, defaultValue: props.defaultValue, placeholder: props.placeholder })),
+});

package/dist/components/ui/input-password/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { Input } from "../../../components/ui/input/index.js";
+/**
+ * **概要 / Overview**
+ *
+ * - インプットパスワードはパスワードの情報をユーザーから取得するために使用するコンポーネントです。
+ * - en: The InputPassword component is used to capture password information from users.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <InputPassword
+ *   size="md"
+ *   placeholder="パスワードを入力してください"
+ * />
+ * ```
+ *
+ * @param {InputPasswordProps} props
+ */
+const InputPassword = React.forwardRef((props, ref) => {
+    // パスワードの表示状態を管理
+    const [isVisibility, setIsVisibility] = React.useState(false);
+    // パスワード表示切り替えハンドラー
+    const handleTogglePasswordVisibility = React.useCallback(() => {
+        setIsVisibility(prev => !prev);
+    }, []);
+    return (_jsx(Input, Object.assign({ ref: ref, type: isVisibility ? "text" : "password", triggerIcon: isVisibility ? "visibility_off" : "visibility", triggerAriaLabel: isVisibility ? "パスワードを隠す" : "パスワードを表示する", isTrigger: true, onIconButtonClick: handleTogglePasswordVisibility }, props)));
+});
+InputPassword.displayName = "InputPassword";
+export { InputPassword };