@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/input-otp.d.ts

@@ -1,23 +1,77 @@
 import { OTPInput } from 'input-otp';
 import * as React from 'react';
 /**
- * ワンタイムパスワード（OTP）入力のためのルートコンポーネント。
+ * Coordinates a single OTP input and its visual character slots.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputOTP composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputOTP maxLength={4} aria-label="Verification code"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);
+ * }
+ * ```
  */
 declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    /**
+     * Additional classes applied to the outer input-otp container rather than its input.
+     */
     containerClassName?: string;
 }): React.JSX.Element;
 /**
- * OTPの入力スロットをグループ化するためのコンテナ。
+ * Lays out adjacent OTP slots as a visually joined group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputOTPGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputOTP maxLength={4} aria-label="Verification code"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);
+ * }
+ * ```
  */
 declare function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * OTP入力用の1桁分を表す個々のスロット（入力枠）。
+ * Displays one zero-based slot from the surrounding OTP input context.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputOTPSlot composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputOTP maxLength={4} aria-label="Verification code"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);
+ * }
+ * ```
  */
 declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<'div'> & {
+    /**
+     * Zero-based index into the surrounding OTP context slots; choose an index smaller than maxLength.
+     */
     index: number;
 }): React.JSX.Element;
 /**
- * OTPスロットのグループ同士を区切るためのセパレーター。
+ * Renders a visual separator between OTP slot groups.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputOTPSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.  children are replaced by the fixed minus icon.
+ * @example
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputOTP maxLength={4} aria-label="Verification code"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);
+ * }
+ * ```
  */
 declare function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/dist/ui/components/ui/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":["React","React$1","InputOTP","props","OTPInput","cn","containerClassName","className","InputOTPGroup","InputOTPSlot","OTPInputContext","index","isActive","char","hasFakeCaret","InputOTPSeparator","Minus"],"sources":["../../../../src/ui/components/ui/input-otp.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { OTPInput, OTPInputContext } from 'input-otp';\n\nimport { cn } from '../../lib/utils';\nimport { Minus } from 'lucide-react';\n\n/**\n * ワンタイムパスワード（OTP）入力のためのルートコンポーネント。\n */\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot='input-otp'\n      containerClassName={cn(\n        'cn-input-otp flex items-center has-disabled:opacity-50',\n        containerClassName,\n      )}\n      spellCheck={false}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * OTPの入力スロットをグループ化するためのコンテナ。\n */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-otp-group'\n      className={cn(\n        'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * OTP入力用の1桁分を表す個々のスロット（入力枠）。\n */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot='input-otp-slot'\n      data-active={isActive}\n      className={cn(\n        'dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>\n          <div className='animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px' />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * OTPスロットのグループ同士を区切るためのセパレーター。\n */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-otp-separator'\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role='separator'\n      {...props}\n    >\n      <Minus />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;AAWA,SAASE,EAAS,EAChB,cACA,uBACA,GAAGC,KAGF;CACD,OACE,kBAACC,GAAD;EACE,aAAU;EACV,oBAAoBC,EAClB,0DACAC,CACF;EACA,YAAY;EACZ,WAAWD,EAAG,+BAA+BE,CAAS;EACtD,GAAIJ;CACL,CAAA;AAEL;AAKA,SAASK,EAAc,EAAE,cAAW,GAAGL,KAAsC;CAC3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,+KACAE,CACF;EACA,GAAIJ;CACL,CAAA;AAEL;AAKA,SAASM,EAAa,EACpB,UACA,cACA,GAAGN,KAGF;CAED,IAAM,EAAE,SAAM,iBAAc,gBADJH,EAAM,WAAWU,CACA,CAAA,EAAiB,MAAMC,MAAU,CAAC;CAE3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,eAAaC;EACb,WAAWP,EACT,ifACAE,CACF;EACA,GAAIJ;EAPN,UAAA,CASGU,GACAC,KACC,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,OAAD,EAAK,WAAU,kFAAmF,CAAA;EAC/F,CAAA,CAEJ;;AAET;AAKA,SAASC,EAAkB,EAAE,GAAGZ,KAAsC;CACpE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAU;EACV,MAAK;EACL,GAAIA;EAEJ,UAAA,kBAACa,GAAD,CAAQ,CAAA;CACL,CAAA;AAET"}
+{"version":3,"file":"input-otp.js","names":["React","React$1","InputOTP","props","OTPInput","cn","containerClassName","className","InputOTPGroup","InputOTPSlot","OTPInputContext","index","isActive","char","hasFakeCaret","InputOTPSeparator","Minus"],"sources":["../../../../src/ui/components/ui/input-otp.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { OTPInput, OTPInputContext } from 'input-otp';\n\nimport { cn } from '../../lib/utils';\nimport { Minus } from 'lucide-react';\n\n/**\n * Coordinates a single OTP input and its visual character slots.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputOTP composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputOTP maxLength={4} aria-label=\"Verification code\"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);\n * }\n * ```\n */\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  /**\n   * Additional classes applied to the outer input-otp container rather than its input.\n   */\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot='input-otp'\n      containerClassName={cn(\n        'cn-input-otp flex items-center has-disabled:opacity-50',\n        containerClassName,\n      )}\n      spellCheck={false}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Lays out adjacent OTP slots as a visually joined group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputOTPGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputOTP maxLength={4} aria-label=\"Verification code\"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);\n * }\n * ```\n */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-otp-group'\n      className={cn(\n        'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Displays one zero-based slot from the surrounding OTP input context.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputOTPSlot composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputOTP maxLength={4} aria-label=\"Verification code\"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);\n * }\n * ```\n */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  /**\n   * Zero-based index into the surrounding OTP context slots; choose an index smaller than maxLength.\n   */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot='input-otp-slot'\n      data-active={isActive}\n      className={cn(\n        'dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>\n          <div className='animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px' />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Renders a visual separator between OTP slot groups.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputOTPSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. InputOTPSlot reads input-otp context and its index must be within maxLength. Missing context/out-of-range slots render no character. containerClassName styles the outer OTP container, className the input. spellCheck defaults to false but remaining props can override it. The host owns verification and expiry.  children are replaced by the fixed minus icon.\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputOTP maxLength={4} aria-label=\"Verification code\"><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /></InputOTPGroup><InputOTPSeparator /><InputOTPGroup><InputOTPSlot index={2} /><InputOTPSlot index={3} /></InputOTPGroup></InputOTP>);\n * }\n * ```\n */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-otp-separator'\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role='separator'\n      {...props}\n    >\n      <Minus />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;AAuBA,SAASE,EAAS,EAChB,cACA,uBACA,GAAGC,KAMF;CACD,OACE,kBAACC,GAAD;EACE,aAAU;EACV,oBAAoBC,EAClB,0DACAC,CACF;EACA,YAAY;EACZ,WAAWD,EAAG,+BAA+BE,CAAS;EACtD,GAAIJ;CACL,CAAA;AAEL;AAiBA,SAASK,EAAc,EAAE,cAAW,GAAGL,KAAsC;CAC3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,+KACAE,CACF;EACA,GAAIJ;CACL,CAAA;AAEL;AAiBA,SAASM,EAAa,EACpB,UACA,cACA,GAAGN,KAMF;CAED,IAAM,EAAE,SAAM,iBAAc,gBADJH,EAAM,WAAWU,CACA,CAAA,EAAiB,MAAMC,MAAU,CAAC;CAE3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,eAAaC;EACb,WAAWP,EACT,ifACAE,CACF;EACA,GAAIJ;EAPN,UAAA,CASGU,GACAC,KACC,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,OAAD,EAAK,WAAU,kFAAmF,CAAA;EAC/F,CAAA,CAEJ;;AAET;AAiBA,SAASC,EAAkB,EAAE,GAAGZ,KAAsC;CACpE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAU;EACV,MAAK;EACL,GAAIA;EAEJ,UAAA,kBAACa,GAAD,CAAQ,CAAA;CACL,CAAA;AAET"}

package/dist/ui/components/ui/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":["React","getNextNumericValue","normalizeNumericInput","InputPrimitive","cn","require_runtime","require_ui_lib_utils","require_ui_lib_ime_utils","react_jsx_runtime","react","_base_ui_react_input","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","event","handleChange","testId","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Input component props\n * テキスト入力コンポーネントのプロップス\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests\n   */\n  testId?: string;\n}\n\n/**\n * Input Component\n * テキスト入力コンポーネント\n *\n * `type=\"number\"` が指定された場合、以下の高度な挙動が自動的に適用されます：\n * - IMEの強制切り替え防止 (`type=\"text\"` としてレンダリング)\n * - 全角数字から半角数字への自動変換および非数値文字の自動削除（コピペにも対応）\n * - キーボードの上下キー (\\`ArrowUp\\`/\\`ArrowDown\\`) による数値の増減\n * - モバイルでの数字キーボード表示 (\\`inputMode=\"numeric\"\\`, \\`pattern=\"[0-9\\\\.\\\\-]*\"\\`)\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, testId, ...props }, ref) => {\n    // Explicitly exclude children from props since input is a void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as InputProps & { children?: React.ReactNode };\n\n    const isNumeric = type === 'number';\n    const effectiveType = isNumeric ? 'text' : type;\n    const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n    const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        e.preventDefault();\n        const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n        const step = parseFloat(String(props.step || '1'));\n        const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n        // Create a synthetic event to trigger onChange if needed,\n        // but since Input is often used with controlled value, we just need to call onChange if it exists.\n        // However, most React apps use controlled components.\n        // For uncontrolled ones, we'd need to set e.target.value.\n        if (props.onChange) {\n          const event = {\n            target: {\n              ...e.target,\n              value: String(nextValue),\n              name: props.name,\n            },\n            currentTarget: {\n              ...e.currentTarget,\n              value: String(nextValue),\n              name: props.name,\n            },\n          } as any;\n          props.onChange(event);\n        }\n      }\n      props.onKeyDown?.(e as any);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isNumeric) {\n        e.target.value = normalizeNumericInput(e.target.value);\n      }\n      props.onChange?.(e as any);\n    };\n\n    return (\n      <InputPrimitive\n        ref={ref}\n        {...restProps}\n        type={effectiveType}\n        inputMode={inputMode}\n        pattern={pattern}\n        data-slot='input'\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        className={cn(\n          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":"A,8TA2BA,IAAMW,EAAQX,EAAM,YACjB,CAAE,YAAW,OAAM,SAAQ,GAAGY,GAAS,IAAQ,CAE9C,GAAM,CACJ,SAAUC,EACV,GAAGC,GACDF,EAEEG,EAAYC,IAAS,SACrBC,EAAgBF,EAAY,OAASC,EACrCE,EAAYN,EAAM,YAAcG,EAAY,UAAY,IAAA,IACxDI,EAAUP,EAAM,UAAYG,EAAY,eAAiB,IAAA,IAEzDK,EAAiB,GAA6C,CAClE,GAAIL,IAAc,EAAE,MAAQ,WAAa,EAAE,MAAQ,aAAc,CAC/D,EAAE,eAAe,EACjB,IAAMM,EAAY,EAAE,MAAQ,UAAY,KAAO,OACzCC,EAAO,WAAW,OAAOV,EAAM,MAAQ,GAAG,CAAC,EAC3CW,EAAYtB,EAAAA,oBAAoBW,EAAM,MAAcS,EAAWC,CAAI,EAMzE,GAAIV,EAAM,SAAU,CAClB,IAAMY,EAAQ,CACZ,OAAQ,CACN,GAAG,EAAE,OACL,MAAO,OAAOD,CAAS,EACvB,KAAMX,EAAM,IACd,EACA,cAAe,CACb,GAAG,EAAE,cACL,MAAO,OAAOW,CAAS,EACvB,KAAMX,EAAM,IACd,CACF,EACAA,EAAM,SAASY,CAAK,CACtB,CACF,CACAZ,EAAM,YAAY,CAAQ,CAC5B,EAEMa,EAAgB,GAA2C,CAC3DV,IACF,EAAE,OAAO,MAAQb,EAAAA,sBAAsB,EAAE,OAAO,KAAK,GAEvDU,EAAM,WAAW,CAAQ,CAC3B,EAEA,OACE,EAAAJ,EAAA,IAAA,CAACL,EAAAA,MAAD,CACO,MACL,GAAIW,EACJ,KAAMG,EACK,YACF,UACT,YAAU,QACV,cAAaS,EACb,UAAWN,EACX,SAAUK,EACV,UAAWrB,EAAAA,GACT,qpBACAuB,CACF,CACD,CAAA,CAEL,CACF,EACA,EAAM,YAAc,Q"}
+{"version":3,"file":"input.cjs","names":["React","getNextNumericValue","normalizeNumericInput","InputPrimitive","cn","require_runtime","require_ui_lib_utils","require_ui_lib_ime_utils","react_jsx_runtime","react","_base_ui_react_input","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","event","handleChange","testId","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Input\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a Base UI input with optional test ID and IME-aware numeric normalization.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Input composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\\.\\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { Input, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [quantity, setQuantity] = useState(\"1\");\n *   return (<><Label htmlFor=\"quantity\">Quantity</Label><Input id=\"quantity\" type=\"number\" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);\n * }\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, testId, ...props }, ref) => {\n    // Explicitly exclude children from props since input is a void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as InputProps & { children?: React.ReactNode };\n\n    const isNumeric = type === 'number';\n    const effectiveType = isNumeric ? 'text' : type;\n    const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n    const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        e.preventDefault();\n        const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n        const step = parseFloat(String(props.step || '1'));\n        const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n        // Create a synthetic event to trigger onChange if needed,\n        // but since Input is often used with controlled value, we just need to call onChange if it exists.\n        // However, most React apps use controlled components.\n        // For uncontrolled ones, we'd need to set e.target.value.\n        if (props.onChange) {\n          const event = {\n            target: {\n              ...e.target,\n              value: String(nextValue),\n              name: props.name,\n            },\n            currentTarget: {\n              ...e.currentTarget,\n              value: String(nextValue),\n              name: props.name,\n            },\n          } as any;\n          props.onChange(event);\n        }\n      }\n      props.onKeyDown?.(e as any);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isNumeric) {\n        e.target.value = normalizeNumericInput(e.target.value);\n      }\n      props.onChange?.(e as any);\n    };\n\n    return (\n      <InputPrimitive\n        ref={ref}\n        {...restProps}\n        type={effectiveType}\n        inputMode={inputMode}\n        pattern={pattern}\n        data-slot='input'\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        className={cn(\n          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":"A,8TAmCA,IAAMW,EAAQX,EAAM,YACjB,CAAE,YAAW,OAAM,SAAQ,GAAGY,GAAS,IAAQ,CAE9C,GAAM,CACJ,SAAUC,EACV,GAAGC,GACDF,EAEEG,EAAYC,IAAS,SACrBC,EAAgBF,EAAY,OAASC,EACrCE,EAAYN,EAAM,YAAcG,EAAY,UAAY,IAAA,IACxDI,EAAUP,EAAM,UAAYG,EAAY,eAAiB,IAAA,IAEzDK,EAAiB,GAA6C,CAClE,GAAIL,IAAc,EAAE,MAAQ,WAAa,EAAE,MAAQ,aAAc,CAC/D,EAAE,eAAe,EACjB,IAAMM,EAAY,EAAE,MAAQ,UAAY,KAAO,OACzCC,EAAO,WAAW,OAAOV,EAAM,MAAQ,GAAG,CAAC,EAC3CW,EAAYtB,EAAAA,oBAAoBW,EAAM,MAAcS,EAAWC,CAAI,EAMzE,GAAIV,EAAM,SAAU,CAClB,IAAMY,EAAQ,CACZ,OAAQ,CACN,GAAG,EAAE,OACL,MAAO,OAAOD,CAAS,EACvB,KAAMX,EAAM,IACd,EACA,cAAe,CACb,GAAG,EAAE,cACL,MAAO,OAAOW,CAAS,EACvB,KAAMX,EAAM,IACd,CACF,EACAA,EAAM,SAASY,CAAK,CACtB,CACF,CACAZ,EAAM,YAAY,CAAQ,CAC5B,EAEMa,EAAgB,GAA2C,CAC3DV,IACF,EAAE,OAAO,MAAQb,EAAAA,sBAAsB,EAAE,OAAO,KAAK,GAEvDU,EAAM,WAAW,CAAQ,CAC3B,EAEA,OACE,EAAAJ,EAAA,IAAA,CAACL,EAAAA,MAAD,CACO,MACL,GAAIW,EACJ,KAAMG,EACK,YACF,UACT,YAAU,QACV,cAAaS,EACb,UAAWN,EACX,SAAUK,EACV,UAAWrB,EAAAA,GACT,qpBACAuB,CACF,CACD,CAAA,CAEL,CACF,EACA,EAAM,YAAc,Q"}

package/dist/ui/components/ui/input.d.cts

@@ -1,24 +1,32 @@
 import { Input as InputPrimitive } from '@base-ui/react/input';
 import * as React from 'react';
 /**
- * Input component props
- * テキスト入力コンポーネントのプロップス
+ * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Input
  */
 export interface InputProps extends React.ComponentProps<typeof InputPrimitive> {
     /**
-     * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
      */
     testId?: string;
 }
 /**
- * Input Component
- * テキスト入力コンポーネント
+ * Renders a Base UI input with optional test ID and IME-aware numeric normalization.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Input composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\.\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Input, Label } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
  *
- * `type="number"` が指定された場合、以下の高度な挙動が自動的に適用されます：
- * - IMEの強制切り替え防止 (`type="text"` としてレンダリング)
- * - 全角数字から半角数字への自動変換および非数値文字の自動削除（コピペにも対応）
- * - キーボードの上下キー (\`ArrowUp\`/\`ArrowDown\`) による数値の増減
- * - モバイルでの数字キーボード表示 (\`inputMode="numeric"\`, \`pattern="[0-9\\.\\-]*"\`)
+ * export function Example() {
+ *   const [quantity, setQuantity] = useState("1");
+ *   return (<><Label htmlFor="quantity">Quantity</Label><Input id="quantity" type="number" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);
+ * }
+ * ```
  */
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -1,24 +1,32 @@
 import { Input as InputPrimitive } from '@base-ui/react/input';
 import * as React from 'react';
 /**
- * Input component props
- * テキスト入力コンポーネントのプロップス
+ * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Input
  */
 export interface InputProps extends React.ComponentProps<typeof InputPrimitive> {
     /**
-     * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
      */
     testId?: string;
 }
 /**
- * Input Component
- * テキスト入力コンポーネント
+ * Renders a Base UI input with optional test ID and IME-aware numeric normalization.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered Input composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\.\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Input, Label } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
  *
- * `type="number"` が指定された場合、以下の高度な挙動が自動的に適用されます：
- * - IMEの強制切り替え防止 (`type="text"` としてレンダリング)
- * - 全角数字から半角数字への自動変換および非数値文字の自動削除（コピペにも対応）
- * - キーボードの上下キー (\`ArrowUp\`/\`ArrowDown\`) による数値の増減
- * - モバイルでの数字キーボード表示 (\`inputMode="numeric"\`, \`pattern="[0-9\\.\\-]*"\`)
+ * export function Example() {
+ *   const [quantity, setQuantity] = useState("1");
+ *   return (<><Label htmlFor="quantity">Quantity</Label><Input id="quantity" type="number" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);
+ * }
+ * ```
  */
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["React","InputPrimitive","React$1","Input$1","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","getNextNumericValue","event","handleChange","normalizeNumericInput","testId","cn","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Input component props\n * テキスト入力コンポーネントのプロップス\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * AI/E2E Test用の安定ID / Stable test identifier for AI and E2E tests\n   */\n  testId?: string;\n}\n\n/**\n * Input Component\n * テキスト入力コンポーネント\n *\n * `type=\"number\"` が指定された場合、以下の高度な挙動が自動的に適用されます：\n * - IMEの強制切り替え防止 (`type=\"text\"` としてレンダリング)\n * - 全角数字から半角数字への自動変換および非数値文字の自動削除（コピペにも対応）\n * - キーボードの上下キー (\\`ArrowUp\\`/\\`ArrowDown\\`) による数値の増減\n * - モバイルでの数字キーボード表示 (\\`inputMode=\"numeric\"\\`, \\`pattern=\"[0-9\\\\.\\\\-]*\"\\`)\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, testId, ...props }, ref) => {\n    // Explicitly exclude children from props since input is a void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as InputProps & { children?: React.ReactNode };\n\n    const isNumeric = type === 'number';\n    const effectiveType = isNumeric ? 'text' : type;\n    const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n    const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        e.preventDefault();\n        const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n        const step = parseFloat(String(props.step || '1'));\n        const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n        // Create a synthetic event to trigger onChange if needed,\n        // but since Input is often used with controlled value, we just need to call onChange if it exists.\n        // However, most React apps use controlled components.\n        // For uncontrolled ones, we'd need to set e.target.value.\n        if (props.onChange) {\n          const event = {\n            target: {\n              ...e.target,\n              value: String(nextValue),\n              name: props.name,\n            },\n            currentTarget: {\n              ...e.currentTarget,\n              value: String(nextValue),\n              name: props.name,\n            },\n          } as any;\n          props.onChange(event);\n        }\n      }\n      props.onKeyDown?.(e as any);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isNumeric) {\n        e.target.value = normalizeNumericInput(e.target.value);\n      }\n      props.onChange?.(e as any);\n    };\n\n    return (\n      <InputPrimitive\n        ref={ref}\n        {...restProps}\n        type={effectiveType}\n        inputMode={inputMode}\n        pattern={pattern}\n        data-slot='input'\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        className={cn(\n          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":";;;;;;;AA2BA,IAAMI,IAAQJ,EAAM,YACjB,EAAE,cAAW,SAAM,WAAQ,GAAGK,KAAS,MAAQ;CAE9C,IAAM,EACJ,UAAUC,GACV,GAAGC,MACDF,GAEEG,IAAYC,MAAS,UACrBC,IAAgBF,IAAY,SAASC,GACrCE,IAAYN,EAAM,cAAcG,IAAY,YAAY,KAAA,IACxDI,IAAUP,EAAM,YAAYG,IAAY,iBAAiB,KAAA,IAEzDK,KAAiB,MAA6C;EAClE,IAAIL,MAAc,EAAE,QAAQ,aAAa,EAAE,QAAQ,cAAc;GAC/D,EAAE,eAAe;GACjB,IAAMM,IAAY,EAAE,QAAQ,YAAY,OAAO,QACzCC,IAAO,WAAW,OAAOV,EAAM,QAAQ,GAAG,CAAC,GAC3CW,IAAYC,EAAoBZ,EAAM,OAAcS,GAAWC,CAAI;GAMzE,IAAIV,EAAM,UAAU;IAClB,IAAMa,IAAQ;KACZ,QAAQ;MACN,GAAG,EAAE;MACL,OAAO,OAAOF,CAAS;MACvB,MAAMX,EAAM;KACd;KACA,eAAe;MACb,GAAG,EAAE;MACL,OAAO,OAAOW,CAAS;MACvB,MAAMX,EAAM;KACd;IACF;IACA,EAAM,SAASa,CAAK;GACtB;EACF;EACA,EAAM,YAAY,CAAQ;CAC5B,GAEMC,KAAgB,MAA2C;EAI/D,AAHIX,MACF,EAAE,OAAO,QAAQY,EAAsB,EAAE,OAAO,KAAK,IAEvDf,EAAM,WAAW,CAAQ;CAC3B;CAEA,OACE,kBAACJ,GAAD;EACO;EACL,GAAIM;EACJ,MAAMG;EACK;EACF;EACT,aAAU;EACV,eAAaW;EACb,WAAWR;EACX,UAAUM;EACV,WAAWG,EACT,spBACAC,CACF;CACD,CAAA;AAEL,CACF;AACA,EAAM,cAAc"}
+{"version":3,"file":"input.js","names":["React","InputPrimitive","React$1","Input$1","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","getNextNumericValue","event","handleChange","normalizeNumericInput","testId","cn","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Input\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a Base UI input with optional test ID and IME-aware numeric normalization.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Input composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\\.\\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { Input, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [quantity, setQuantity] = useState(\"1\");\n *   return (<><Label htmlFor=\"quantity\">Quantity</Label><Input id=\"quantity\" type=\"number\" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);\n * }\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, testId, ...props }, ref) => {\n    // Explicitly exclude children from props since input is a void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as InputProps & { children?: React.ReactNode };\n\n    const isNumeric = type === 'number';\n    const effectiveType = isNumeric ? 'text' : type;\n    const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n    const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        e.preventDefault();\n        const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n        const step = parseFloat(String(props.step || '1'));\n        const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n        // Create a synthetic event to trigger onChange if needed,\n        // but since Input is often used with controlled value, we just need to call onChange if it exists.\n        // However, most React apps use controlled components.\n        // For uncontrolled ones, we'd need to set e.target.value.\n        if (props.onChange) {\n          const event = {\n            target: {\n              ...e.target,\n              value: String(nextValue),\n              name: props.name,\n            },\n            currentTarget: {\n              ...e.currentTarget,\n              value: String(nextValue),\n              name: props.name,\n            },\n          } as any;\n          props.onChange(event);\n        }\n      }\n      props.onKeyDown?.(e as any);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isNumeric) {\n        e.target.value = normalizeNumericInput(e.target.value);\n      }\n      props.onChange?.(e as any);\n    };\n\n    return (\n      <InputPrimitive\n        ref={ref}\n        {...restProps}\n        type={effectiveType}\n        inputMode={inputMode}\n        pattern={pattern}\n        data-slot='input'\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        className={cn(\n          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":";;;;;;;AAmCA,IAAMI,IAAQJ,EAAM,YACjB,EAAE,cAAW,SAAM,WAAQ,GAAGK,KAAS,MAAQ;CAE9C,IAAM,EACJ,UAAUC,GACV,GAAGC,MACDF,GAEEG,IAAYC,MAAS,UACrBC,IAAgBF,IAAY,SAASC,GACrCE,IAAYN,EAAM,cAAcG,IAAY,YAAY,KAAA,IACxDI,IAAUP,EAAM,YAAYG,IAAY,iBAAiB,KAAA,IAEzDK,KAAiB,MAA6C;EAClE,IAAIL,MAAc,EAAE,QAAQ,aAAa,EAAE,QAAQ,cAAc;GAC/D,EAAE,eAAe;GACjB,IAAMM,IAAY,EAAE,QAAQ,YAAY,OAAO,QACzCC,IAAO,WAAW,OAAOV,EAAM,QAAQ,GAAG,CAAC,GAC3CW,IAAYC,EAAoBZ,EAAM,OAAcS,GAAWC,CAAI;GAMzE,IAAIV,EAAM,UAAU;IAClB,IAAMa,IAAQ;KACZ,QAAQ;MACN,GAAG,EAAE;MACL,OAAO,OAAOF,CAAS;MACvB,MAAMX,EAAM;KACd;KACA,eAAe;MACb,GAAG,EAAE;MACL,OAAO,OAAOW,CAAS;MACvB,MAAMX,EAAM;KACd;IACF;IACA,EAAM,SAASa,CAAK;GACtB;EACF;EACA,EAAM,YAAY,CAAQ;CAC5B,GAEMC,KAAgB,MAA2C;EAI/D,AAHIX,MACF,EAAE,OAAO,QAAQY,EAAsB,EAAE,OAAO,KAAK,IAEvDf,EAAM,WAAW,CAAQ;CAC3B;CAEA,OACE,kBAACJ,GAAD;EACO;EACL,GAAIM;EACJ,MAAMG;EACK;EACF;EACT,aAAU;EACV,eAAaW;EACb,WAAWR;EACX,UAAUM;EACV,WAAWG,EACT,spBACAC,CACF;CACD,CAAA;AAEL,CACF;AACA,EAAM,cAAc"}

package/dist/ui/components/ui/item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"item.cjs","names":["cn","Separator","cva","useRender","mergeProps","require_runtime","require_ui_lib_utils","require_ui_components_ui_separator","react_jsx_runtime","react","class_variance_authority","_base_ui_react_merge_props","_base_ui_react_use_render","ItemGroup","props","className","ItemSeparator","itemVariants","Item","itemMediaVariants","ItemMedia","variant","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"sources":["../../../../src/ui/components/ui/item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n/**\n * リスト形式のアイテムをグループ化するコンテナコンポーネント。\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      role='list'\n      data-slot='item-group'\n      className={cn(\n        'gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムグループ内のアイテム同士を区切るためのセパレーター（区切り線）。\n */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='item-separator'\n      orientation='horizontal'\n      className={cn('my-2', className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  '[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted/50 border-transparent',\n      },\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * リストやグリッド内の個々のアイテムを表す基本コンポーネント。\n */\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n}\n\nconst itemMediaVariants = cva(\n  'gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * アイテム内のアバター、アイコン、画像などのメディア要素を表示するコンポーネント。\n */\nfunction ItemMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot='item-media'\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテム内のコンテンツ（タイトルや説明など）を格納するコンテナ。\n */\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-content'\n      className={cn(\n        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムのタイトル。\n */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-title'\n      className={cn(\n        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムの補助的な説明テキスト。\n */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot='item-description'\n      className={cn(\n        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムに関連するアクションボタンや操作子を配置するコンポーネント。\n */\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot='item-actions' className={cn('gap-2 flex items-center', className)} {...props} />\n  );\n}\n\n/**\n * アイテムの上部にメタ情報などを配置するヘッダー領域。\n */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-header'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * アイテムの下部にメタ情報やアクションを配置するフッター領域。\n */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-footer'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":"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"}
+{"version":3,"file":"item.cjs","names":["cn","Separator","cva","useRender","mergeProps","require_runtime","require_ui_lib_utils","require_ui_components_ui_separator","react_jsx_runtime","react","class_variance_authority","_base_ui_react_merge_props","_base_ui_react_use_render","ItemGroup","props","className","ItemSeparator","itemVariants","Item","itemMediaVariants","ItemMedia","variant","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"sources":["../../../../src/ui/components/ui/item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n/**\n * Renders a list-role container for vertically arranged item cards.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      role='list'\n      data-slot='item-group'\n      className={cn(\n        'gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Draws a horizontal divider between item cards.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot='item-separator'\n      orientation='horizontal'\n      className={cn('my-2', className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  '[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors',\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, outline, muted.\n       * @defaultValue 'default'\n       * @see itemVariants\n       */\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted/50 border-transparent',\n      },\n      /**\n       * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n       * Accepted values: default, sm, xs.\n       * @defaultValue 'default'\n       * @see itemVariants\n       */\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Renders a list-item surface with configurable size, border treatment and render element.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default', size='default'.\n * @returns The rendered Item composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n}\n\nconst itemMediaVariants = cva(\n  'gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, icon, image.\n       * @defaultValue 'default'\n       * @see itemMediaVariants\n       */\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * Styles leading media as plain content, an icon or a cropped image.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered ItemMedia composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot='item-media'\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/**\n * Arranges an item title and supporting content in a flexible column.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-content'\n      className={cn(\n        'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles a single-line item title.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-title'\n      className={cn(\n        'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles a two-line item description and embedded links.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot='item-description'\n      className={cn(\n        'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Aligns host-provided item action controls.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemActions composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot='item-actions' className={cn('gap-2 flex items-center', className)} {...props} />\n  );\n}\n\n/**\n * Lays out full-width metadata above the main item content.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-header'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Lays out full-width metadata or controls below item content.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered ItemFooter composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.\n * @example\n * ```tsx\n * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant=\"icon\">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type=\"button\">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);\n * }\n * ```\n */\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-footer'\n      className={cn('gap-2 flex basis-full items-center justify-between', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n"],"mappings":"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"}

package/dist/ui/components/ui/item.d.cts

@@ -3,11 +3,35 @@ import { VariantProps } from 'class-variance-authority';
 import { Separator } from './separator.cjs';
 import * as React from 'react';
 /**
- * リスト形式のアイテムをグループ化するコンテナコンポーネント。
+ * Renders a list-role container for vertically arranged item cards.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムグループ内のアイテム同士を区切るためのセパレーター（区切り線）。
+ * Draws a horizontal divider between item cards.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
@@ -15,38 +39,134 @@ declare const itemVariants: (props?: ({
     size?: "default" | "xs" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * リストやグリッド内の個々のアイテムを表す基本コンポーネント。
+ * Renders a list-item surface with configurable size, border treatment and render element.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default', size='default'.
+ * @returns The rendered Item composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
     variant?: "image" | "default" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * アイテム内のアバター、アイコン、画像などのメディア要素を表示するコンポーネント。
+ * Styles leading media as plain content, an icon or a cropped image.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered ItemMedia composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 /**
- * アイテム内のコンテンツ（タイトルや説明など）を格納するコンテナ。
+ * Arranges an item title and supporting content in a flexible column.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムのタイトル。
+ * Styles a single-line item title.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemTitle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムの補助的な説明テキスト。
+ * Styles a two-line item description and embedded links.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemDescription composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
 /**
- * アイテムに関連するアクションボタンや操作子を配置するコンポーネント。
+ * Aligns host-provided item action controls.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemActions composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムの上部にメタ情報などを配置するヘッダー領域。
+ * Lays out full-width metadata above the main item content.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemHeader composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**
- * アイテムの下部にメタ情報やアクションを配置するフッター領域。
+ * Lays out full-width metadata or controls below item content.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered ItemFooter composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These slots provide presentation, not selection or navigation. Item renders a div unless render is supplied; custom render elements must accept merged props. variant and size default to default; ItemMedia variant also defaults to default. ItemGroup role=list does not automatically assign role=listitem to children; the host may supply appropriate semantics.
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ItemGroup><Item><ItemHeader>Today</ItemHeader><ItemMedia variant="icon">D</ItemMedia><ItemContent><ItemTitle>Draft</ItemTitle><ItemDescription>Ready to review</ItemDescription></ItemContent><ItemActions><button type="button">Open</button></ItemActions><ItemFooter>Updated recently</ItemFooter></Item><ItemSeparator /></ItemGroup>);
+ * }
+ * ```
  */
 declare function ItemFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };