@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/hover-card.d.ts

@@ -1,14 +1,50 @@
 import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
 /**
- * マウスホバーで詳細情報を表示するホバーカードのルートコンポーネント。
+ * Coordinates a preview card shown for its trigger.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered HoverCard composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Trigger and Content require HoverCard context. Content supplies its portal and positioner; Base UI PreviewCard owns timing, open state and interaction behavior.
+ * @example
+ * ```tsx
+ * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<HoverCard><HoverCardTrigger href="/profile">Profile</HoverCardTrigger><HoverCardContent>Profile details</HoverCardContent></HoverCard>);
+ * }
+ * ```
  */
 declare function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props): import('react').JSX.Element;
 /**
- * ホバーカードを表示するためのトリガー要素（ホバー対象）。
+ * Renders the interactive target associated with a preview card.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered HoverCardTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Trigger and Content require HoverCard context. Content supplies its portal and positioner; Base UI PreviewCard owns timing, open state and interaction behavior.
+ * @example
+ * ```tsx
+ * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<HoverCard><HoverCardTrigger href="/profile">Profile</HoverCardTrigger><HoverCardContent>Profile details</HoverCardContent></HoverCard>);
+ * }
+ * ```
  */
 declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import('react').JSX.Element;
 /**
- * ホバー時に表示される詳細情報のコンテンツコンテナ。
+ * Portals and positions the preview popup relative to its trigger.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: side='bottom', sideOffset=4, align='center', alignOffset=4.
+ * @returns The rendered HoverCardContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Trigger and Content require HoverCard context. Content supplies its portal and positioner; Base UI PreviewCard owns timing, open state and interaction behavior.
+ * @example
+ * ```tsx
+ * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<HoverCard><HoverCardTrigger href="/profile">Profile</HoverCardTrigger><HoverCardContent>Profile details</HoverCardContent></HoverCard>);
+ * }
+ * ```
  */
 declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): import('react').JSX.Element;
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/ui/components/ui/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":["PreviewCardPrimitive","HoverCard","props","PreviewCard","HoverCardTrigger","HoverCardContent","cn","className"],"sources":["../../../../src/ui/components/ui/hover-card.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * マウスホバーで詳細情報を表示するホバーカードのルートコンポーネント。\n */\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot='hover-card' {...props} />;\n}\n\n/**\n * ホバーカードを表示するためのトリガー要素（ホバー対象）。\n */\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return <PreviewCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />;\n}\n\n/**\n * ホバー時に表示される詳細情報のコンテンツコンテナ。\n */\nfunction HoverCardContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot='hover-card-portal'>\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className='isolate z-50'\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot='hover-card-content'\n          className={cn(\n            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden',\n            className,\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AASA,SAASC,EAAU,EAAE,GAAGC,KAA0C;CAChE,OAAO,kBAACF,EAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAIE;CAAQ,CAAA;AACvE;AAKA,SAASE,EAAiB,EAAE,GAAGF,KAA6C;CAC1E,OAAO,kBAACF,EAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAIE;CAAQ,CAAA;AAClF;AAKA,SAASG,EAAiB,EACxB,cACA,UAAO,UACP,gBAAa,GACb,WAAQ,UACR,iBAAc,GACd,GAAGH,KAE2F;CAC9F,OACE,kBAACF,EAAqB,QAAtB;EAA6B,aAAU;EACrC,UAAA,kBAACA,EAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAU;GAEV,UAAA,kBAACA,EAAqB,OAAtB;IACE,aAAU;IACV,WAAWM,EACT,scACAC,CACF;IACA,GAAIL;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}
+{"version":3,"file":"hover-card.js","names":["PreviewCardPrimitive","HoverCard","props","PreviewCard","HoverCardTrigger","HoverCardContent","cn","className"],"sources":["../../../../src/ui/components/ui/hover-card.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates a preview card shown for its trigger.\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 HoverCard composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Trigger and Content require HoverCard context. Content supplies its portal and positioner; Base UI PreviewCard owns timing, open state and interaction behavior.\n * @example\n * ```tsx\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<HoverCard><HoverCardTrigger href=\"/profile\">Profile</HoverCardTrigger><HoverCardContent>Profile details</HoverCardContent></HoverCard>);\n * }\n * ```\n */\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot='hover-card' {...props} />;\n}\n\n/**\n * Renders the interactive target associated with a preview card.\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 HoverCardTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Trigger and Content require HoverCard context. Content supplies its portal and positioner; Base UI PreviewCard owns timing, open state and interaction behavior.\n * @example\n * ```tsx\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<HoverCard><HoverCardTrigger href=\"/profile\">Profile</HoverCardTrigger><HoverCardContent>Profile details</HoverCardContent></HoverCard>);\n * }\n * ```\n */\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return <PreviewCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />;\n}\n\n/**\n * Portals and positions the preview popup relative to its trigger.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: side='bottom', sideOffset=4, align='center', alignOffset=4.\n * @returns The rendered HoverCardContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Trigger and Content require HoverCard context. Content supplies its portal and positioner; Base UI PreviewCard owns timing, open state and interaction behavior.\n * @example\n * ```tsx\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<HoverCard><HoverCardTrigger href=\"/profile\">Profile</HoverCardTrigger><HoverCardContent>Profile details</HoverCardContent></HoverCard>);\n * }\n * ```\n */\nfunction HoverCardContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot='hover-card-portal'>\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className='isolate z-50'\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot='hover-card-content'\n          className={cn(\n            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden',\n            className,\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AAqBA,SAASC,EAAU,EAAE,GAAGC,KAA0C;CAChE,OAAO,kBAACF,EAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAIE;CAAQ,CAAA;AACvE;AAiBA,SAASE,EAAiB,EAAE,GAAGF,KAA6C;CAC1E,OAAO,kBAACF,EAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAIE;CAAQ,CAAA;AAClF;AAiBA,SAASG,EAAiB,EACxB,cACA,UAAO,UACP,gBAAa,GACb,WAAQ,UACR,iBAAc,GACd,GAAGH,KAE2F;CAC9F,OACE,kBAACF,EAAqB,QAAtB;EAA6B,aAAU;EACrC,UAAA,kBAACA,EAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAU;GAEV,UAAA,kBAACA,EAAqB,OAAtB;IACE,aAAU;IACV,WAAWM,EACT,scACAC,CACF;IACA,GAAIL;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","names":["cn","cva","Button","Input","Textarea","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_ui_components_ui_input","require_ui_components_ui_textarea","react_jsx_runtime","react","class_variance_authority","InputGroup","props","className","inputGroupAddonVariants","InputGroupAddon","align","inputGroupButtonVariants","InputGroupButton","size","InputGroupText","InputGroupInput","InputGroupTextarea"],"sources":["../../../../src/ui/components/ui/input-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../components/ui/button';\nimport { Input } from '../../components/ui/input';\nimport { Textarea } from '../../components/ui/textarea';\n\n/**\n * 入力フィールドとアイコン、ボタンなどのアドオン要素を一体化して表示するためのコンテナ。\n */\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-group'\n      role='group'\n      className={cn(\n        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',\n        'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',\n        'block-start':\n          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',\n        'block-end':\n          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\n/**\n * 入力グループの前後や上下に配置されるアドオン領域。\n */\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='input-group-addon'\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('gap-2 text-sm shadow-none flex items-center', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\n/**\n * 入力グループ内に配置されるアクション用ボタン。\n */\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: 'button' | 'submit' | 'reset';\n    render?: React.ReactElement;\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 入力グループ内でテキストや記号を表示するためのコンポーネント。\n */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される入力フィールド。\n */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される複数行入力フィールド。\n */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":"A,oYAaA,SAASa,EAAW,CAAE,YAAW,GAAGC,GAAsC,CACxE,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,KAAK,QACL,UAAWV,EAAAA,GACT,kmCACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAEA,IAAME,GAAA,EAA0Bf,EAAAA,IAAAA,CAC9B,0PACA,CACE,SAAU,CACR,MAAO,CACL,eAAgB,uEAChB,aAAc,sEACd,cACE,oGACF,YACE,kGACJ,CACF,EACA,gBAAiB,CACf,MAAO,cACT,CACF,CACF,EAKA,SAASgB,EAAgB,CACvB,YACA,QAAQ,eACR,GAAGH,GAC0E,CAC7E,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,QACL,YAAU,oBACV,aAAYQ,EACZ,UAAWlB,EAAAA,GAAGgB,EAAwB,CAAE,OAAM,CAAC,EAAGD,CAAS,EAC3D,QAAU,GAAM,CACT,EAAE,OAAuB,QAAQ,QAAQ,GAG9C,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM,CAC/D,EACA,GAAID,CACL,CAAA,CAEL,CAEA,IAAMK,GAAA,EAA2BlB,EAAAA,IAAAA,CAAI,8CAA+C,CAClF,SAAU,CACR,KAAM,CACJ,GAAI,4FACJ,GAAI,GACJ,UAAW,8DACX,UAAW,2BACb,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAKD,SAASmB,EAAiB,CACxB,YACA,OAAO,SACP,UAAU,QACV,OAAO,KACP,GAAGN,GAKA,CACH,OACE,EAAAJ,EAAA,IAAA,CAACR,EAAAA,OAAD,CACQ,OACN,YAAWmB,EACF,UACT,UAAWrB,EAAAA,GAAGmB,EAAyB,CAAE,MAAK,CAAC,EAAGJ,CAAS,EAC3D,GAAID,CACL,CAAA,CAEL,CAKA,SAASQ,EAAe,CAAE,YAAW,GAAGR,GAAuC,CAC7E,OACE,EAAAJ,EAAA,IAAA,CAAC,OAAD,CACE,UAAWV,EAAAA,GACT,yHACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASS,EAAgB,CAAE,YAAW,GAAGT,GAAwC,CAC/E,OACE,EAAAJ,EAAA,IAAA,CAACP,EAAAA,MAAD,CACE,YAAU,sBACV,UAAWH,EAAAA,GACT,mLACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASU,EAAmB,CAAE,YAAW,GAAGV,GAA2C,CACrF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,SAAD,CACE,YAAU,sBACV,UAAWJ,EAAAA,GACT,oMACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,C"}
+{"version":3,"file":"input-group.cjs","names":["cn","cva","Button","Input","Textarea","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_ui_components_ui_input","require_ui_components_ui_textarea","react_jsx_runtime","react","class_variance_authority","InputGroup","props","className","inputGroupAddonVariants","InputGroupAddon","align","inputGroupButtonVariants","InputGroupButton","size","InputGroupText","InputGroupInput","InputGroupTextarea"],"sources":["../../../../src/ui/components/ui/input-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../components/ui/button';\nimport { Input } from '../../components/ui/input';\nimport { Textarea } from '../../components/ui/textarea';\n\n/**\n * Visually combines an input with leading, trailing or stacked add-ons.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-group'\n      role='group'\n      className={cn(\n        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      /**\n       * Add-on placement within an input group.\n       * Accepted values: 'inline-start', 'inline-end', 'block-start', 'block-end'.\n       * @defaultValue 'inline-start'\n       * @see inputGroupAddonVariants\n       */\n      align: {\n        'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',\n        'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',\n        'block-start':\n          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',\n        'block-end':\n          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\n/**\n * Positions input add-on content and focuses the neighboring input when clicked.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: align='inline-start'.\n * @returns The rendered InputGroupAddon composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='input-group-addon'\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('gap-2 text-sm shadow-none flex items-center', {\n  variants: {\n    /**\n     * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n     * Accepted values: xs, sm, 'icon-xs', 'icon-sm'.\n     * @defaultValue 'xs'\n     * @see inputGroupButtonVariants\n     */\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\n/**\n * Renders a compact action button inside an input group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: type='button', variant='ghost', size='xs'.\n * @returns The rendered InputGroupButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    /**\n     * Native button type; InputGroupButton defaults to button to avoid implicit form submission.\n     */\n    type?: 'button' | 'submit' | 'reset';\n    /**\n     * Custom Base UI render element; it must accept forwarded/merged interaction props and refs. No asChild adapter is provided.\n     */\n    render?: React.ReactElement;\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles static text or symbols inside an input group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroupText composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders an Appkit input with group-compatible borderless styling.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroupInput composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a textarea with group-compatible borderless styling.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroupTextarea composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":"A,oYAyBA,SAASa,EAAW,CAAE,YAAW,GAAGC,GAAsC,CACxE,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,cACV,KAAK,QACL,UAAWV,EAAAA,GACT,kmCACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAEA,IAAME,GAAA,EAA0Bf,EAAAA,IAAAA,CAC9B,0PACA,CACE,SAAU,CAOR,MAAO,CACL,eAAgB,uEAChB,aAAc,sEACd,cACE,oGACF,YACE,kGACJ,CACF,EACA,gBAAiB,CACf,MAAO,cACT,CACF,CACF,EAiBA,SAASgB,EAAgB,CACvB,YACA,QAAQ,eACR,GAAGH,GAC0E,CAC7E,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,QACL,YAAU,oBACV,aAAYQ,EACZ,UAAWlB,EAAAA,GAAGgB,EAAwB,CAAE,OAAM,CAAC,EAAGD,CAAS,EAC3D,QAAU,GAAM,CACT,EAAE,OAAuB,QAAQ,QAAQ,GAG9C,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM,CAC/D,EACA,GAAID,CACL,CAAA,CAEL,CAEA,IAAMK,GAAA,EAA2BlB,EAAAA,IAAAA,CAAI,8CAA+C,CAClF,SAAU,CAOR,KAAM,CACJ,GAAI,4FACJ,GAAI,GACJ,UAAW,8DACX,UAAW,2BACb,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAiBD,SAASmB,EAAiB,CACxB,YACA,OAAO,SACP,UAAU,QACV,OAAO,KACP,GAAGN,GAWA,CACH,OACE,EAAAJ,EAAA,IAAA,CAACR,EAAAA,OAAD,CACQ,OACN,YAAWmB,EACF,UACT,UAAWrB,EAAAA,GAAGmB,EAAyB,CAAE,MAAK,CAAC,EAAGJ,CAAS,EAC3D,GAAID,CACL,CAAA,CAEL,CAiBA,SAASQ,EAAe,CAAE,YAAW,GAAGR,GAAuC,CAC7E,OACE,EAAAJ,EAAA,IAAA,CAAC,OAAD,CACE,UAAWV,EAAAA,GACT,yHACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASS,EAAgB,CAAE,YAAW,GAAGT,GAAwC,CAC/E,OACE,EAAAJ,EAAA,IAAA,CAACP,EAAAA,MAAD,CACE,YAAU,sBACV,UAAWH,EAAAA,GACT,mLACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASU,EAAmB,CAAE,YAAW,GAAGV,GAA2C,CACrF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,SAAD,CACE,YAAU,sBACV,UAAWJ,EAAAA,GACT,oMACAe,CACF,EACA,GAAID,CACL,CAAA,CAEL,C"}

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

@@ -2,36 +2,114 @@ import { VariantProps } from 'class-variance-authority';
 import { Button } from './button.cjs';
 import * as React from 'react';
 /**
- * 入力フィールドとアイコン、ボタンなどのアドオン要素を一体化して表示するためのコンテナ。
+ * Visually combines an input with leading, trailing or stacked add-ons.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * 入力グループの前後や上下に配置されるアドオン領域。
+ * Positions input add-on content and focuses the neighboring input when clicked.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: align='inline-start'.
+ * @returns The rendered InputGroupAddon composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
     size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * 入力グループ内に配置されるアクション用ボタン。
+ * Renders a compact action button inside an input group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: type='button', variant='ghost', size='xs'.
+ * @returns The rendered InputGroupButton composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
+    /**
+     * Native button type; InputGroupButton defaults to button to avoid implicit form submission.
+     */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Custom Base UI render element; it must accept forwarded/merged interaction props and refs. No asChild adapter is provided.
+     */
     render?: React.ReactElement;
 }): React.JSX.Element;
 /**
- * 入力グループ内でテキストや記号を表示するためのコンポーネント。
+ * Styles static text or symbols inside an input group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroupText composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
- * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される入力フィールド。
+ * Renders an Appkit input with group-compatible borderless styling.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroupInput composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
 /**
- * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される複数行入力フィールド。
+ * Renders a textarea with group-compatible borderless styling.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroupTextarea composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

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

@@ -2,36 +2,114 @@ import { VariantProps } from 'class-variance-authority';
 import { Button } from './button.js';
 import * as React from 'react';
 /**
- * 入力フィールドとアイコン、ボタンなどのアドオン要素を一体化して表示するためのコンテナ。
+ * Visually combines an input with leading, trailing or stacked add-ons.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * 入力グループの前後や上下に配置されるアドオン領域。
+ * Positions input add-on content and focuses the neighboring input when clicked.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: align='inline-start'.
+ * @returns The rendered InputGroupAddon composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
     size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * 入力グループ内に配置されるアクション用ボタン。
+ * Renders a compact action button inside an input group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: type='button', variant='ghost', size='xs'.
+ * @returns The rendered InputGroupButton composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
+    /**
+     * Native button type; InputGroupButton defaults to button to avoid implicit form submission.
+     */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Custom Base UI render element; it must accept forwarded/merged interaction props and refs. No asChild adapter is provided.
+     */
     render?: React.ReactElement;
 }): React.JSX.Element;
 /**
- * 入力グループ内でテキストや記号を表示するためのコンポーネント。
+ * Styles static text or symbols inside an input group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroupText composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
- * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される入力フィールド。
+ * Renders an Appkit input with group-compatible borderless styling.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroupInput composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
 /**
- * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される複数行入力フィールド。
+ * Renders a textarea with group-compatible borderless styling.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered InputGroupTextarea composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.
+ * @example
+ * ```tsx
+ * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label="Username" /><InputGroupAddon align="inline-end"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);
+ * }
+ * ```
  */
 declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":["InputGroup","props","cn","className","inputGroupAddonVariants","cva","InputGroupAddon","align","inputGroupButtonVariants","InputGroupButton","Button","size","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"sources":["../../../../src/ui/components/ui/input-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../components/ui/button';\nimport { Input } from '../../components/ui/input';\nimport { Textarea } from '../../components/ui/textarea';\n\n/**\n * 入力フィールドとアイコン、ボタンなどのアドオン要素を一体化して表示するためのコンテナ。\n */\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-group'\n      role='group'\n      className={cn(\n        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',\n        'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',\n        'block-start':\n          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',\n        'block-end':\n          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\n/**\n * 入力グループの前後や上下に配置されるアドオン領域。\n */\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='input-group-addon'\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('gap-2 text-sm shadow-none flex items-center', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\n/**\n * 入力グループ内に配置されるアクション用ボタン。\n */\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: 'button' | 'submit' | 'reset';\n    render?: React.ReactElement;\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 入力グループ内でテキストや記号を表示するためのコンポーネント。\n */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される入力フィールド。\n */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 入力グループ内で枠線や個別のスタイルを持たない状態で配置される複数行入力フィールド。\n */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;;AAaA,SAASA,EAAW,EAAE,cAAW,GAAGC,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWC,EACT,mmCACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMG,IAA0BC,EAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAKA,SAASC,EAAgB,EACvB,cACA,WAAQ,gBACR,GAAGL,KAC0E;CAC7E,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAYM;EACZ,WAAWL,EAAGE,EAAwB,EAAE,SAAM,CAAC,GAAGD,CAAS;EAC3D,UAAU,MAAM;GACd,AAAK,EAAE,OAAuB,QAAQ,QAAQ,KAG9C,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM;EAC/D;EACA,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMO,IAA2BH,EAAI,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;AAKD,SAASI,EAAiB,EACxB,cACA,UAAO,UACP,aAAU,SACV,UAAO,MACP,GAAGR,KAKA;CACH,OACE,kBAACS,GAAD;EACQ;EACN,aAAWC;EACF;EACT,WAAWT,EAAGM,EAAyB,EAAE,QAAK,CAAC,GAAGL,CAAS;EAC3D,GAAIF;CACL,CAAA;AAEL;AAKA,SAASW,EAAe,EAAE,cAAW,GAAGX,KAAuC;CAC7E,OACE,kBAAC,QAAD;EACE,WAAWC,EACT,0HACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASY,EAAgB,EAAE,cAAW,GAAGZ,KAAwC;CAC/E,OACE,kBAACa,GAAD;EACE,aAAU;EACV,WAAWZ,EACT,oLACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASc,EAAmB,EAAE,cAAW,GAAGd,KAA2C;CACrF,OACE,kBAACe,GAAD;EACE,aAAU;EACV,WAAWd,EACT,qMACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL"}
+{"version":3,"file":"input-group.js","names":["InputGroup","props","cn","className","inputGroupAddonVariants","cva","InputGroupAddon","align","inputGroupButtonVariants","InputGroupButton","Button","size","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"sources":["../../../../src/ui/components/ui/input-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../components/ui/button';\nimport { Input } from '../../components/ui/input';\nimport { Textarea } from '../../components/ui/textarea';\n\n/**\n * Visually combines an input with leading, trailing or stacked add-ons.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='input-group'\n      role='group'\n      className={cn(\n        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      /**\n       * Add-on placement within an input group.\n       * Accepted values: 'inline-start', 'inline-end', 'block-start', 'block-end'.\n       * @defaultValue 'inline-start'\n       * @see inputGroupAddonVariants\n       */\n      align: {\n        'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',\n        'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',\n        'block-start':\n          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',\n        'block-end':\n          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\n/**\n * Positions input add-on content and focuses the neighboring input when clicked.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: align='inline-start'.\n * @returns The rendered InputGroupAddon composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role='group'\n      data-slot='input-group-addon'\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('gap-2 text-sm shadow-none flex items-center', {\n  variants: {\n    /**\n     * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n     * Accepted values: xs, sm, 'icon-xs', 'icon-sm'.\n     * @defaultValue 'xs'\n     * @see inputGroupButtonVariants\n     */\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\n/**\n * Renders a compact action button inside an input group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: type='button', variant='ghost', size='xs'.\n * @returns The rendered InputGroupButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    /**\n     * Native button type; InputGroupButton defaults to button to avoid implicit form submission.\n     */\n    type?: 'button' | 'submit' | 'reset';\n    /**\n     * Custom Base UI render element; it must accept forwarded/merged interaction props and refs. No asChild adapter is provided.\n     */\n    render?: React.ReactElement;\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles static text or symbols inside an input group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroupText composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders an Appkit input with group-compatible borderless styling.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroupInput composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a textarea with group-compatible borderless styling.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered InputGroupTextarea composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose these slots as siblings inside InputGroup. Addon clicks focus the first input unless the target is inside a button; a caller onClick spread afterward replaces that handler. InputGroupInput uses native input props and provides no label prop. InputGroupButton defaults to type=button, variant=ghost, size=xs.\n * @example\n * ```tsx\n * import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<InputGroup><InputGroupAddon><InputGroupText>@</InputGroupText></InputGroupAddon><InputGroupInput aria-label=\"Username\" /><InputGroupAddon align=\"inline-end\"><InputGroupButton>Check</InputGroupButton></InputGroupAddon></InputGroup>);\n * }\n * ```\n */\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot='input-group-control'\n      className={cn(\n        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;;AAyBA,SAASA,EAAW,EAAE,cAAW,GAAGC,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWC,EACT,mmCACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMG,IAA0BC,EAC9B,2PACA;CACE,UAAU,EAOR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAiBA,SAASC,EAAgB,EACvB,cACA,WAAQ,gBACR,GAAGL,KAC0E;CAC7E,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAYM;EACZ,WAAWL,EAAGE,EAAwB,EAAE,SAAM,CAAC,GAAGD,CAAS;EAC3D,UAAU,MAAM;GACd,AAAK,EAAE,OAAuB,QAAQ,QAAQ,KAG9C,EAAE,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM;EAC/D;EACA,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMO,IAA2BH,EAAI,+CAA+C;CAClF,UAAU,EAOR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;AAiBD,SAASI,EAAiB,EACxB,cACA,UAAO,UACP,aAAU,SACV,UAAO,MACP,GAAGR,KAWA;CACH,OACE,kBAACS,GAAD;EACQ;EACN,aAAWC;EACF;EACT,WAAWT,EAAGM,EAAyB,EAAE,QAAK,CAAC,GAAGL,CAAS;EAC3D,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASW,EAAe,EAAE,cAAW,GAAGX,KAAuC;CAC7E,OACE,kBAAC,QAAD;EACE,WAAWC,EACT,0HACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASY,EAAgB,EAAE,cAAW,GAAGZ,KAAwC;CAC/E,OACE,kBAACa,GAAD;EACE,aAAU;EACV,WAAWZ,EACT,oLACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASc,EAAmB,EAAE,cAAW,GAAGd,KAA2C;CACrF,OACE,kBAACe,GAAD;EACE,aAAU;EACV,WAAWd,EACT,qMACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.cjs","names":["OTPInput","cn","React","OTPInputContext","Minus","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","lucide_react","input_otp","InputOTP","props","containerClassName","className","InputOTPGroup","InputOTPSlot","index","isActive","char","hasFakeCaret","InputOTPSeparator"],"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":"A,qTAWA,SAASW,EAAS,CAChB,YACA,qBACA,GAAGC,GAGF,CACD,OACE,EAAAL,EAAA,IAAA,CAACP,EAAAA,SAAD,CACE,YAAU,YACV,mBAAoBC,EAAAA,GAClB,yDACAY,CACF,EACA,WAAY,GACZ,UAAWZ,EAAAA,GAAG,8BAA+Ba,CAAS,EACtD,GAAIF,CACL,CAAA,CAEL,CAKA,SAASG,EAAc,CAAE,YAAW,GAAGH,GAAsC,CAC3E,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,kBACV,UAAWN,EAAAA,GACT,8KACAa,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAKA,SAASI,EAAa,CACpB,QACA,YACA,GAAGJ,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,YADJV,EAAM,WAAWC,EAAAA,eACA,CAAA,EAAiB,MAAMc,IAAU,CAAC,EAE3E,OACE,EAAAV,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,iBACV,cAAaW,EACb,UAAWjB,EAAAA,GACT,gfACAa,CACF,EACA,GAAIF,EAPN,SAAA,CASGO,EACAC,IACC,EAAAb,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wEACb,UAAA,EAAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iFAAmF,CAAA,CAC/F,CAAA,CAEJ,C,EAET,CAKA,SAASc,EAAkB,CAAE,GAAGT,GAAsC,CACpE,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,sBACV,UAAU,yDACV,KAAK,YACL,GAAIK,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAACH,EAAAA,MAAD,CAAQ,CAAA,CACL,CAAA,CAET,C"}
+{"version":3,"file":"input-otp.cjs","names":["OTPInput","cn","React","OTPInputContext","Minus","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","lucide_react","input_otp","InputOTP","props","containerClassName","className","InputOTPGroup","InputOTPSlot","index","isActive","char","hasFakeCaret","InputOTPSeparator"],"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":"A,qTAuBA,SAASW,EAAS,CAChB,YACA,qBACA,GAAGC,GAMF,CACD,OACE,EAAAL,EAAA,IAAA,CAACP,EAAAA,SAAD,CACE,YAAU,YACV,mBAAoBC,EAAAA,GAClB,yDACAY,CACF,EACA,WAAY,GACZ,UAAWZ,EAAAA,GAAG,8BAA+Ba,CAAS,EACtD,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASG,EAAc,CAAE,YAAW,GAAGH,GAAsC,CAC3E,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,kBACV,UAAWN,EAAAA,GACT,8KACAa,CACF,EACA,GAAIF,CACL,CAAA,CAEL,CAiBA,SAASI,EAAa,CACpB,QACA,YACA,GAAGJ,GAMF,CAED,GAAM,CAAE,OAAM,eAAc,YADJV,EAAM,WAAWC,EAAAA,eACA,CAAA,EAAiB,MAAMc,IAAU,CAAC,EAE3E,OACE,EAAAV,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,iBACV,cAAaW,EACb,UAAWjB,EAAAA,GACT,gfACAa,CACF,EACA,GAAIF,EAPN,SAAA,CASGO,EACAC,IACC,EAAAb,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wEACb,UAAA,EAAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iFAAmF,CAAA,CAC/F,CAAA,CAEJ,C,EAET,CAiBA,SAASc,EAAkB,CAAE,GAAGT,GAAsC,CACpE,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,YAAU,sBACV,UAAU,yDACV,KAAK,YACL,GAAIK,EAEJ,UAAA,EAAAL,EAAA,IAAA,CAACH,EAAAA,MAAD,CAAQ,CAAA,CACL,CAAA,CAET,C"}

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

@@ -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 };