@alneas/appkit-react 0.1.0 → 0.2.0

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

@@ -2,16 +2,44 @@ import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import * as React from 'react';
 /**
- * RadioCardGroup Component
- * カードスタイルのラジオグループコンポーネント
+ * Coordinates mutually exclusive choices displayed as cards.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered RadioCardGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place card items under RadioCardGroup with distinct value strings. label and detail are optional React nodes rendered inside the radio control; children are appended below them. Base UI owns selection and focus; the host owns persistence. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { RadioCardGroup, RadioCardItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<RadioCardGroup defaultValue="basic" aria-label="Plan"><RadioCardItem value="basic" label="Basic" detail="For personal use" /><RadioCardItem value="team" label="Team" /></RadioCardGroup>);
+ * }
+ * ```
  */
 declare const RadioCardGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
- * RadioCardItem Component
- * カードスタイルのラジオアイテムコンポーネント
+ * Renders one card choice with label/detail content and a checked indicator.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered RadioCardItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place card items under RadioCardGroup with distinct value strings. label and detail are optional React nodes rendered inside the radio control; children are appended below them. Base UI owns selection and focus; the host owns persistence. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { RadioCardGroup, RadioCardItem } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<RadioCardGroup defaultValue="basic" aria-label="Plan"><RadioCardItem value="basic" label="Basic" detail="For personal use" /><RadioCardItem value="team" label="Team" /></RadioCardGroup>);
+ * }
+ * ```
  */
 declare const RadioCardItem: React.ForwardRefExoticComponent<Omit<RadioPrimitive.Root.Props<any> & {
+    /**
+     * Visible control/option text or content; does not perform persistence or validation.
+     */
     label?: React.ReactNode;
+    /**
+     * Optional supporting content below the radio-card label.
+     */
     detail?: React.ReactNode;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { RadioCardGroup, RadioCardItem };

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

@@ -1 +1 @@
-{"version":3,"file":"radio-card.js","names":["React","RadioGroupPrimitive","RadioPrimitive","React$1","RadioCardGroup","props","RadioGroup","cn","className","RadioCardItem","Radio","label","Label","detail","children","CheckCircleIcon"],"sources":["../../../../src/ui/components/ui/radio-card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { CheckCircleIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { Label } from './label';\n\n/**\n * RadioCardGroup Component\n * カードスタイルのラジオグループコンポーネント\n */\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive\n        ref={ref}\n        data-slot='radio-card-group'\n        className={cn('grid gap-2', className)}\n        {...props}\n      />\n    );\n  },\n);\nRadioCardGroup.displayName = 'RadioCardGroup';\n\n/**\n * RadioCardItem Component\n * カードスタイルのラジオアイテムコンポーネント\n */\nconst RadioCardItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioPrimitive.Root.Props & {\n    label?: React.ReactNode;\n    detail?: React.ReactNode;\n  }\n>(({ className, children, label, detail, ...props }, ref) => {\n  return (\n    <RadioPrimitive.Root\n      ref={ref}\n      data-slot='radio-card-item'\n      className={cn(\n        'group/radio-card relative flex cursor-pointer rounded-lg px-4 py-3 shadow-sm border border-input bg-card text-card-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-checked:border-primary aria-checked:bg-primary/5',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex w-full items-center justify-between'>\n        <div className='flex items-center'>\n          <div className='text-sm text-left'>\n            {label && (\n              <Label className='font-medium cursor-pointer block text-foreground group-aria-checked/radio-card:text-primary'>\n                {label}\n              </Label>\n            )}\n            {detail && (\n              <span className='text-xs text-muted-foreground block mt-0.5 group-aria-checked/radio-card:text-primary/80'>\n                {detail}\n              </span>\n            )}\n            {children}\n          </div>\n        </div>\n        <RadioPrimitive.Indicator className='shrink-0 text-primary ml-2'>\n          <CheckCircleIcon className='h-5 w-5' />\n        </RadioPrimitive.Indicator>\n      </div>\n    </RadioPrimitive.Root>\n  );\n});\nRadioCardItem.displayName = 'RadioCardItem';\n\nexport { RadioCardGroup, RadioCardItem };\n"],"mappings":";;;;;;;;;AAYA,IAAMI,IAAiBJ,EAAM,YAC1B,EAAE,cAAW,GAAGK,KAAS,MAEtB,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,WAAWM,EAAG,cAAcC,CAAS;CACrC,GAAIH;AACL,CAAA,CAGP;AACA,EAAe,cAAc;AAM7B,IAAMI,IAAgBT,EAAM,YAMzB,EAAE,cAAW,aAAU,UAAO,WAAQ,GAAGK,KAAS,MAEjD,kBAACH,EAAe,MAAhB;CACO;CACL,aAAU;CACV,WAAWK,EACT,4XACAC,CACF;CACA,GAAIH;CAEJ,UAAA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACGM,KACC,kBAACC,GAAD;MAAO,WAAU;MACd,UAAAD;KACI,CAAA;KAERE,KACC,kBAAC,QAAD;MAAM,WAAU;MACb,UAAAA;KACG,CAAA;KAEPC;IACE;;EACF,CAAA,GACL,kBAACZ,EAAe,WAAhB;GAA0B,WAAU;GAClC,UAAA,kBAACa,GAAD,EAAiB,WAAU,UAAW,CAAA;EACd,CAAA,CACvB;;AACc,CAAA,CAExB;AACD,EAAc,cAAc"}
+{"version":3,"file":"radio-card.js","names":["React","RadioGroupPrimitive","RadioPrimitive","React$1","RadioCardGroup","props","RadioGroup","cn","className","RadioCardItem","Radio","label","Label","detail","children","CheckCircleIcon"],"sources":["../../../../src/ui/components/ui/radio-card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { CheckCircleIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { Label } from './label';\n\n/**\n * Coordinates mutually exclusive choices displayed as cards.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered RadioCardGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place card items under RadioCardGroup with distinct value strings. label and detail are optional React nodes rendered inside the radio control; children are appended below them. Base UI owns selection and focus; the host owns persistence. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { RadioCardGroup, RadioCardItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<RadioCardGroup defaultValue=\"basic\" aria-label=\"Plan\"><RadioCardItem value=\"basic\" label=\"Basic\" detail=\"For personal use\" /><RadioCardItem value=\"team\" label=\"Team\" /></RadioCardGroup>);\n * }\n * ```\n */\nconst RadioCardGroup = React.forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive\n        ref={ref}\n        data-slot='radio-card-group'\n        className={cn('grid gap-2', className)}\n        {...props}\n      />\n    );\n  },\n);\nRadioCardGroup.displayName = 'RadioCardGroup';\n\n/**\n * Renders one card choice with label/detail content and a checked indicator.\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 RadioCardItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place card items under RadioCardGroup with distinct value strings. label and detail are optional React nodes rendered inside the radio control; children are appended below them. Base UI owns selection and focus; the host owns persistence. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { RadioCardGroup, RadioCardItem } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<RadioCardGroup defaultValue=\"basic\" aria-label=\"Plan\"><RadioCardItem value=\"basic\" label=\"Basic\" detail=\"For personal use\" /><RadioCardItem value=\"team\" label=\"Team\" /></RadioCardGroup>);\n * }\n * ```\n */\nconst RadioCardItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioPrimitive.Root.Props & {\n    /**\n     * Visible control/option text or content; does not perform persistence or validation.\n     */\n    label?: React.ReactNode;\n    /**\n     * Optional supporting content below the radio-card label.\n     */\n    detail?: React.ReactNode;\n  }\n>(({ className, children, label, detail, ...props }, ref) => {\n  return (\n    <RadioPrimitive.Root\n      ref={ref}\n      data-slot='radio-card-item'\n      className={cn(\n        'group/radio-card relative flex cursor-pointer rounded-lg px-4 py-3 shadow-sm border border-input bg-card text-card-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-checked:border-primary aria-checked:bg-primary/5',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex w-full items-center justify-between'>\n        <div className='flex items-center'>\n          <div className='text-sm text-left'>\n            {label && (\n              <Label className='font-medium cursor-pointer block text-foreground group-aria-checked/radio-card:text-primary'>\n                {label}\n              </Label>\n            )}\n            {detail && (\n              <span className='text-xs text-muted-foreground block mt-0.5 group-aria-checked/radio-card:text-primary/80'>\n                {detail}\n              </span>\n            )}\n            {children}\n          </div>\n        </div>\n        <RadioPrimitive.Indicator className='shrink-0 text-primary ml-2'>\n          <CheckCircleIcon className='h-5 w-5' />\n        </RadioPrimitive.Indicator>\n      </div>\n    </RadioPrimitive.Root>\n  );\n});\nRadioCardItem.displayName = 'RadioCardItem';\n\nexport { RadioCardGroup, RadioCardItem };\n"],"mappings":";;;;;;;;;AAuBA,IAAMI,IAAiBJ,EAAM,YAC1B,EAAE,cAAW,GAAGK,KAAS,MAEtB,kBAACJ,GAAD;CACO;CACL,aAAU;CACV,WAAWM,EAAG,cAAcC,CAAS;CACrC,GAAIH;AACL,CAAA,CAGP;AACA,EAAe,cAAc;AAiB7B,IAAMI,IAAgBT,EAAM,YAYzB,EAAE,cAAW,aAAU,UAAO,WAAQ,GAAGK,KAAS,MAEjD,kBAACH,EAAe,MAAhB;CACO;CACL,aAAU;CACV,WAAWK,EACT,4XACAC,CACF;CACA,GAAIH;CAEJ,UAAA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACGM,KACC,kBAACC,GAAD;MAAO,WAAU;MACd,UAAAD;KACI,CAAA;KAERE,KACC,kBAAC,QAAD;MAAM,WAAU;MACb,UAAAA;KACG,CAAA;KAEPC;IACE;;EACF,CAAA,GACL,kBAACZ,EAAe,WAAhB;GAA0B,WAAU;GAClC,UAAA,kBAACa,GAAD,EAAiB,WAAU,UAAW,CAAA;EACd,CAAA,CACvB;;AACc,CAAA,CAExB;AACD,EAAc,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.cjs","names":["React","RadioGroupPrimitive","cn","RadioPrimitive","CircleIcon","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","lucide_react","_base_ui_react_radio_group","_base_ui_react_radio","RadioGroup","props","className","RadioGroupItem"],"sources":["../../../../src/ui/components/ui/radio-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * RadioGroup Component\n * ラジオグループコンポーネント\n */\nconst RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive\n        ref={ref}\n        data-slot='radio-group'\n        className={cn('grid gap-2 w-full', className)}\n        {...props}\n      />\n    );\n  },\n);\nRadioGroup.displayName = 'RadioGroup';\n\nconst RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioPrimitive.Root\n        ref={ref}\n        data-slot='radio-group-item'\n        className={cn(\n          'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        <RadioPrimitive.Indicator\n          data-slot='radio-group-indicator'\n          className='group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center'\n        >\n          <CircleIcon className='absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current' />\n        </RadioPrimitive.Indicator>\n      </RadioPrimitive.Root>\n    );\n  },\n);\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":"A,2VAWA,IAAMY,EAAaZ,EAAM,YACtB,CAAE,YAAW,GAAGa,GAAS,KAEtB,EAAAN,EAAA,IAAA,CAACN,EAAAA,WAAD,CACO,MACL,YAAU,cACV,UAAWC,EAAAA,GAAG,oBAAqBY,CAAS,EAC5C,GAAID,CACL,CAAA,CAGP,EACA,EAAW,YAAc,aAEzB,IAAME,EAAiBf,EAAM,YAC1B,CAAE,YAAW,GAAGa,GAAS,KAEtB,EAAAN,EAAA,IAAA,CAACJ,EAAAA,MAAe,KAAhB,CACO,MACL,YAAU,mBACV,UAAWD,EAAAA,GACT,4eACAY,CACF,EACA,GAAID,EAEJ,UAAA,EAAAN,EAAA,IAAA,CAACJ,EAAAA,MAAe,UAAhB,CACE,YAAU,wBACV,UAAU,4GAEV,UAAA,EAAAI,EAAA,IAAA,CAACH,EAAAA,WAAD,CAAY,UAAU,iFAAmF,CAAA,CACjF,CAAA,CACP,CAAA,CAG3B,EACA,EAAe,YAAc,iB"}
+{"version":3,"file":"radio-group.cjs","names":["React","RadioGroupPrimitive","cn","RadioPrimitive","CircleIcon","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","lucide_react","_base_ui_react_radio_group","_base_ui_react_radio","RadioGroup","props","className","RadioGroupItem"],"sources":["../../../../src/ui/components/ui/radio-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates a grid of mutually exclusive radio choices.\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 RadioGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<RadioGroup defaultValue=\"email\" aria-label=\"Contact method\"><div><RadioGroupItem id=\"email\" value=\"email\" /><Label htmlFor=\"email\">Email</Label></div><div><RadioGroupItem id=\"phone\" value=\"phone\" /><Label htmlFor=\"phone\">Phone</Label></div></RadioGroup>);\n * }\n * ```\n */\nconst RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive\n        ref={ref}\n        data-slot='radio-group'\n        className={cn('grid gap-2 w-full', className)}\n        {...props}\n      />\n    );\n  },\n);\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * Renders one radio choice with a built-in circular checked indicator.\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 RadioGroupItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the built-in checked indicator.\n * @example\n * ```tsx\n * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<RadioGroup defaultValue=\"email\" aria-label=\"Contact method\"><div><RadioGroupItem id=\"email\" value=\"email\" /><Label htmlFor=\"email\">Email</Label></div><div><RadioGroupItem id=\"phone\" value=\"phone\" /><Label htmlFor=\"phone\">Phone</Label></div></RadioGroup>);\n * }\n * ```\n */\nconst RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioPrimitive.Root\n        ref={ref}\n        data-slot='radio-group-item'\n        className={cn(\n          'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        <RadioPrimitive.Indicator\n          data-slot='radio-group-indicator'\n          className='group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center'\n        >\n          <CircleIcon className='absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current' />\n        </RadioPrimitive.Indicator>\n      </RadioPrimitive.Root>\n    );\n  },\n);\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":"A,2VAsBA,IAAMY,EAAaZ,EAAM,YACtB,CAAE,YAAW,GAAGa,GAAS,KAEtB,EAAAN,EAAA,IAAA,CAACN,EAAAA,WAAD,CACO,MACL,YAAU,cACV,UAAWC,EAAAA,GAAG,oBAAqBY,CAAS,EAC5C,GAAID,CACL,CAAA,CAGP,EACA,EAAW,YAAc,aAiBzB,IAAME,EAAiBf,EAAM,YAC1B,CAAE,YAAW,GAAGa,GAAS,KAEtB,EAAAN,EAAA,IAAA,CAACJ,EAAAA,MAAe,KAAhB,CACO,MACL,YAAU,mBACV,UAAWD,EAAAA,GACT,4eACAY,CACF,EACA,GAAID,EAEJ,UAAA,EAAAN,EAAA,IAAA,CAACJ,EAAAA,MAAe,UAAhB,CACE,YAAU,wBACV,UAAU,4GAEV,UAAA,EAAAI,EAAA,IAAA,CAACH,EAAAA,WAAD,CAAY,UAAU,iFAAmF,CAAA,CACjF,CAAA,CACP,CAAA,CAG3B,EACA,EAAe,YAAc,iB"}

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

@@ -2,9 +2,35 @@ import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import * as React from 'react';
 /**
- * RadioGroup Component
- * ラジオグループコンポーネント
+ * Coordinates a grid of mutually exclusive radio choices.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered RadioGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<RadioGroup defaultValue="email" aria-label="Contact method"><div><RadioGroupItem id="email" value="email" /><Label htmlFor="email">Email</Label></div><div><RadioGroupItem id="phone" value="phone" /><Label htmlFor="phone">Phone</Label></div></RadioGroup>);
+ * }
+ * ```
  */
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders one radio choice with a built-in circular checked indicator.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered RadioGroupItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the built-in checked indicator.
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<RadioGroup defaultValue="email" aria-label="Contact method"><div><RadioGroupItem id="email" value="email" /><Label htmlFor="email">Email</Label></div><div><RadioGroupItem id="phone" value="phone" /><Label htmlFor="phone">Phone</Label></div></RadioGroup>);
+ * }
+ * ```
+ */
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioPrimitive.Root.Props<any>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { RadioGroup, RadioGroupItem };

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

@@ -2,9 +2,35 @@ import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import * as React from 'react';
 /**
- * RadioGroup Component
- * ラジオグループコンポーネント
+ * Coordinates a grid of mutually exclusive radio choices.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered RadioGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<RadioGroup defaultValue="email" aria-label="Contact method"><div><RadioGroupItem id="email" value="email" /><Label htmlFor="email">Email</Label></div><div><RadioGroupItem id="phone" value="phone" /><Label htmlFor="phone">Phone</Label></div></RadioGroup>);
+ * }
+ * ```
  */
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders one radio choice with a built-in circular checked indicator.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered RadioGroupItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the built-in checked indicator.
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<RadioGroup defaultValue="email" aria-label="Contact method"><div><RadioGroupItem id="email" value="email" /><Label htmlFor="email">Email</Label></div><div><RadioGroupItem id="phone" value="phone" /><Label htmlFor="phone">Phone</Label></div></RadioGroup>);
+ * }
+ * ```
+ */
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioPrimitive.Root.Props<any>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { RadioGroup, RadioGroupItem };

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["React","RadioGroupPrimitive","RadioPrimitive","React$1","RadioGroup$1","RadioGroup","props","cn","className","RadioGroupItem","Radio","CircleIcon"],"sources":["../../../../src/ui/components/ui/radio-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * RadioGroup Component\n * ラジオグループコンポーネント\n */\nconst RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive\n        ref={ref}\n        data-slot='radio-group'\n        className={cn('grid gap-2 w-full', className)}\n        {...props}\n      />\n    );\n  },\n);\nRadioGroup.displayName = 'RadioGroup';\n\nconst RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioPrimitive.Root\n        ref={ref}\n        data-slot='radio-group-item'\n        className={cn(\n          'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        <RadioPrimitive.Indicator\n          data-slot='radio-group-indicator'\n          className='group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center'\n        >\n          <CircleIcon className='absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current' />\n        </RadioPrimitive.Indicator>\n      </RadioPrimitive.Root>\n    );\n  },\n);\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;AAWA,IAAMK,IAAaL,EAAM,YACtB,EAAE,cAAW,GAAGM,KAAS,MAEtB,kBAACL,GAAD;CACO;CACL,aAAU;CACV,WAAWM,EAAG,qBAAqBC,CAAS;CAC5C,GAAIF;AACL,CAAA,CAGP;AACA,EAAW,cAAc;AAEzB,IAAMG,IAAiBT,EAAM,YAC1B,EAAE,cAAW,GAAGM,KAAS,MAEtB,kBAACJ,EAAe,MAAhB;CACO;CACL,aAAU;CACV,WAAWK,EACT,6eACAC,CACF;CACA,GAAIF;CAEJ,UAAA,kBAACJ,EAAe,WAAhB;EACE,aAAU;EACV,WAAU;EAEV,UAAA,kBAACS,GAAD,EAAY,WAAU,kFAAmF,CAAA;CACjF,CAAA;AACP,CAAA,CAG3B;AACA,EAAe,cAAc"}
+{"version":3,"file":"radio-group.js","names":["React","RadioGroupPrimitive","RadioPrimitive","React$1","RadioGroup$1","RadioGroup","props","cn","className","RadioGroupItem","Radio","CircleIcon"],"sources":["../../../../src/ui/components/ui/radio-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates a grid of mutually exclusive radio choices.\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 RadioGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<RadioGroup defaultValue=\"email\" aria-label=\"Contact method\"><div><RadioGroupItem id=\"email\" value=\"email\" /><Label htmlFor=\"email\">Email</Label></div><div><RadioGroupItem id=\"phone\" value=\"phone\" /><Label htmlFor=\"phone\">Phone</Label></div></RadioGroup>);\n * }\n * ```\n */\nconst RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioGroupPrimitive\n        ref={ref}\n        data-slot='radio-group'\n        className={cn('grid gap-2 w-full', className)}\n        {...props}\n      />\n    );\n  },\n);\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * Renders one radio choice with a built-in circular checked indicator.\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 RadioGroupItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Items require RadioGroup context and distinct values. Supply labels or accessible names for each item. The wrapper delegates controlled/default selection and keyboard behavior to Base UI. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the built-in checked indicator.\n * @example\n * ```tsx\n * import { RadioGroup, RadioGroupItem, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<RadioGroup defaultValue=\"email\" aria-label=\"Contact method\"><div><RadioGroupItem id=\"email\" value=\"email\" /><Label htmlFor=\"email\">Email</Label></div><div><RadioGroupItem id=\"phone\" value=\"phone\" /><Label htmlFor=\"phone\">Phone</Label></div></RadioGroup>);\n * }\n * ```\n */\nconst RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioPrimitive.Root.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <RadioPrimitive.Root\n        ref={ref}\n        data-slot='radio-group-item'\n        className={cn(\n          'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        <RadioPrimitive.Indicator\n          data-slot='radio-group-indicator'\n          className='group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center'\n        >\n          <CircleIcon className='absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current' />\n        </RadioPrimitive.Indicator>\n      </RadioPrimitive.Root>\n    );\n  },\n);\nRadioGroupItem.displayName = 'RadioGroupItem';\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;AAsBA,IAAMK,IAAaL,EAAM,YACtB,EAAE,cAAW,GAAGM,KAAS,MAEtB,kBAACL,GAAD;CACO;CACL,aAAU;CACV,WAAWM,EAAG,qBAAqBC,CAAS;CAC5C,GAAIF;AACL,CAAA,CAGP;AACA,EAAW,cAAc;AAiBzB,IAAMG,IAAiBT,EAAM,YAC1B,EAAE,cAAW,GAAGM,KAAS,MAEtB,kBAACJ,EAAe,MAAhB;CACO;CACL,aAAU;CACV,WAAWK,EACT,6eACAC,CACF;CACA,GAAIF;CAEJ,UAAA,kBAACJ,EAAe,WAAhB;EACE,aAAU;EACV,WAAU;EAEV,UAAA,kBAACS,GAAD,EAAY,WAAU,kFAAmF,CAAA;CACjF,CAAA;AACP,CAAA,CAG3B;AACA,EAAe,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.cjs","names":["PanelGroup","cn","Panel","PanelResizeHandle","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","react_resizable_panels","ResizablePanelGroup","props","className","ResizablePanel","ResizableHandle","withHandle"],"sources":["../../../../src/ui/components/ui/resizable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * ドラッグで幅や高さをリサイズ可能なパネルを配置するためのグループコンテナ。\n */\nfunction ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>) {\n  return (\n    <PanelGroup\n      data-slot='resizable-panel-group'\n      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * リサイズ可能な個々のパネル領域。\n */\nfunction ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {\n  return <Panel data-slot='resizable-panel' {...props} />;\n}\n\n/**\n * パネル間の境界線であり、ドラッグしてサイズ変更を行うためのハンドル。\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof PanelResizeHandle> & {\n  withHandle?: boolean;\n}) {\n  return (\n    <PanelResizeHandle\n      data-slot='resizable-handle'\n      className={cn(\n        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && <div className='bg-border h-6 w-1 rounded-lg z-10 flex shrink-0' />}\n    </PanelResizeHandle>\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"mappings":"A,wSAUA,SAASS,EAAoB,CAAE,YAAW,GAAGC,GAAkD,CAC7F,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,MAAD,CACE,YAAU,wBACV,UAAWC,EAAAA,GAAG,oEAAqEU,CAAS,EAC5F,GAAID,CACL,CAAA,CAEL,CAKA,SAASE,EAAe,CAAE,GAAGF,GAA6C,CACxE,OAAO,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,MAAD,CAAO,YAAU,kBAAkB,GAAIQ,CAAQ,CAAA,CACxD,CAKA,SAASG,EAAgB,CACvB,aACA,YACA,GAAGH,GAGF,CACD,OACE,EAAAJ,EAAA,IAAA,CAACH,EAAAA,UAAD,CACE,YAAU,mBACV,UAAWF,EAAAA,GACT,4oBACAU,CACF,EACA,GAAID,EAEH,SAAAI,IAAc,EAAAR,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iDAAmD,CAAA,CAChE,CAAA,CAEvB,C"}
+{"version":3,"file":"resizable.cjs","names":["PanelGroup","cn","Panel","PanelResizeHandle","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","react_resizable_panels","ResizablePanelGroup","props","className","ResizablePanel","ResizableHandle","withHandle"],"sources":["../../../../src/ui/components/ui/resizable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates adjacent resizable panels through react-resizable-panels Group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered ResizablePanelGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ResizablePanelGroup orientation=\"horizontal\"><ResizablePanel defaultSize=\"50%\">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize=\"50%\">Right</ResizablePanel></ResizablePanelGroup>);\n * }\n * ```\n */\nfunction ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>) {\n  return (\n    <PanelGroup\n      data-slot='resizable-panel-group'\n      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders one panel managed by its surrounding resizable group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered ResizablePanel composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ResizablePanelGroup orientation=\"horizontal\"><ResizablePanel defaultSize=\"50%\">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize=\"50%\">Right</ResizablePanel></ResizablePanelGroup>);\n * }\n * ```\n */\nfunction ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {\n  return <Panel data-slot='resizable-panel' {...props} />;\n}\n\n/**\n * Renders the draggable panel separator with an optional visible handle.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered ResizableHandle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.  children are replaced by the optional withHandle grip.\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ResizablePanelGroup orientation=\"horizontal\"><ResizablePanel defaultSize=\"50%\">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize=\"50%\">Right</ResizablePanel></ResizablePanelGroup>);\n * }\n * ```\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof PanelResizeHandle> & {\n  /**\n   * Adds a small visible grip when true; defaults to false/absent.\n   */\n  withHandle?: boolean;\n}) {\n  return (\n    <PanelResizeHandle\n      data-slot='resizable-handle'\n      className={cn(\n        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && <div className='bg-border h-6 w-1 rounded-lg z-10 flex shrink-0' />}\n    </PanelResizeHandle>\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"mappings":"A,wSAsBA,SAASS,EAAoB,CAAE,YAAW,GAAGC,GAAkD,CAC7F,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,MAAD,CACE,YAAU,wBACV,UAAWC,EAAAA,GAAG,oEAAqEU,CAAS,EAC5F,GAAID,CACL,CAAA,CAEL,CAiBA,SAASE,EAAe,CAAE,GAAGF,GAA6C,CACxE,OAAO,EAAAJ,EAAA,IAAA,CAACJ,EAAAA,MAAD,CAAO,YAAU,kBAAkB,GAAIQ,CAAQ,CAAA,CACxD,CAiBA,SAASG,EAAgB,CACvB,aACA,YACA,GAAGH,GAMF,CACD,OACE,EAAAJ,EAAA,IAAA,CAACH,EAAAA,UAAD,CACE,YAAU,mBACV,UAAWF,EAAAA,GACT,4oBACAU,CACF,EACA,GAAID,EAEH,SAAAI,IAAc,EAAAR,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iDAAmD,CAAA,CAChE,CAAA,CAEvB,C"}

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

@@ -1,17 +1,56 @@
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
 import * as React from 'react';
 /**
- * ドラッグで幅や高さをリサイズ可能なパネルを配置するためのグループコンテナ。
+ * Coordinates adjacent resizable panels through react-resizable-panels Group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered ResizablePanelGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ResizablePanelGroup orientation="horizontal"><ResizablePanel defaultSize="50%">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize="50%">Right</ResizablePanel></ResizablePanelGroup>);
+ * }
+ * ```
  */
 declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>): React.JSX.Element;
 /**
- * リサイズ可能な個々のパネル領域。
+ * Renders one panel managed by its surrounding resizable group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered ResizablePanel composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ResizablePanelGroup orientation="horizontal"><ResizablePanel defaultSize="50%">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize="50%">Right</ResizablePanel></ResizablePanelGroup>);
+ * }
+ * ```
  */
 declare function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>): React.JSX.Element;
 /**
- * パネル間の境界線であり、ドラッグしてサイズ変更を行うためのハンドル。
+ * Renders the draggable panel separator with an optional visible handle.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered ResizableHandle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.  children are replaced by the optional withHandle grip.
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ResizablePanelGroup orientation="horizontal"><ResizablePanel defaultSize="50%">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize="50%">Right</ResizablePanel></ResizablePanelGroup>);
+ * }
+ * ```
  */
 declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof PanelResizeHandle> & {
+    /**
+     * Adds a small visible grip when true; defaults to false/absent.
+     */
     withHandle?: boolean;
 }): React.JSX.Element;
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

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

@@ -1,17 +1,56 @@
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
 import * as React from 'react';
 /**
- * ドラッグで幅や高さをリサイズ可能なパネルを配置するためのグループコンテナ。
+ * Coordinates adjacent resizable panels through react-resizable-panels Group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered ResizablePanelGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ResizablePanelGroup orientation="horizontal"><ResizablePanel defaultSize="50%">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize="50%">Right</ResizablePanel></ResizablePanelGroup>);
+ * }
+ * ```
  */
 declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>): React.JSX.Element;
 /**
- * リサイズ可能な個々のパネル領域。
+ * Renders one panel managed by its surrounding resizable group.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered ResizablePanel composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ResizablePanelGroup orientation="horizontal"><ResizablePanel defaultSize="50%">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize="50%">Right</ResizablePanel></ResizablePanelGroup>);
+ * }
+ * ```
  */
 declare function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>): React.JSX.Element;
 /**
- * パネル間の境界線であり、ドラッグしてサイズ変更を行うためのハンドル。
+ * Renders the draggable panel separator with an optional visible handle.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered ResizableHandle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.  children are replaced by the optional withHandle grip.
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<ResizablePanelGroup orientation="horizontal"><ResizablePanel defaultSize="50%">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize="50%">Right</ResizablePanel></ResizablePanelGroup>);
+ * }
+ * ```
  */
 declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof PanelResizeHandle> & {
+    /**
+     * Adds a small visible grip when true; defaults to false/absent.
+     */
     withHandle?: boolean;
 }): React.JSX.Element;
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","names":["PanelGroup","PanelResizeHandle","ResizablePanelGroup","props","Group","cn","className","ResizablePanel","Panel","ResizableHandle","Separator","withHandle"],"sources":["../../../../src/ui/components/ui/resizable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * ドラッグで幅や高さをリサイズ可能なパネルを配置するためのグループコンテナ。\n */\nfunction ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>) {\n  return (\n    <PanelGroup\n      data-slot='resizable-panel-group'\n      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * リサイズ可能な個々のパネル領域。\n */\nfunction ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {\n  return <Panel data-slot='resizable-panel' {...props} />;\n}\n\n/**\n * パネル間の境界線であり、ドラッグしてサイズ変更を行うためのハンドル。\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof PanelResizeHandle> & {\n  withHandle?: boolean;\n}) {\n  return (\n    <PanelResizeHandle\n      data-slot='resizable-handle'\n      className={cn(\n        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && <div className='bg-border h-6 w-1 rounded-lg z-10 flex shrink-0' />}\n    </PanelResizeHandle>\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"mappings":";;;;;;;AAUA,SAASE,EAAoB,EAAE,cAAW,GAAGC,KAAkD;CAC7F,OACE,kBAACH,GAAD;EACE,aAAU;EACV,WAAWK,EAAG,qEAAqEC,CAAS;EAC5F,GAAIH;CACL,CAAA;AAEL;AAKA,SAASI,EAAe,EAAE,GAAGJ,KAA6C;CACxE,OAAO,kBAACK,GAAD;EAAO,aAAU;EAAkB,GAAIL;CAAQ,CAAA;AACxD;AAKA,SAASM,EAAgB,EACvB,eACA,cACA,GAAGN,KAGF;CACD,OACE,kBAACF,GAAD;EACE,aAAU;EACV,WAAWI,EACT,6oBACAC,CACF;EACA,GAAIH;EAEH,UAAAQ,KAAc,kBAAC,OAAD,EAAK,WAAU,kDAAmD,CAAA;CAChE,CAAA;AAEvB"}
+{"version":3,"file":"resizable.js","names":["PanelGroup","PanelResizeHandle","ResizablePanelGroup","props","Group","cn","className","ResizablePanel","Panel","ResizableHandle","Separator","withHandle"],"sources":["../../../../src/ui/components/ui/resizable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Coordinates adjacent resizable panels through react-resizable-panels Group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered ResizablePanelGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ResizablePanelGroup orientation=\"horizontal\"><ResizablePanel defaultSize=\"50%\">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize=\"50%\">Right</ResizablePanel></ResizablePanelGroup>);\n * }\n * ```\n */\nfunction ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>) {\n  return (\n    <PanelGroup\n      data-slot='resizable-panel-group'\n      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders one panel managed by its surrounding resizable group.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered ResizablePanel composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ResizablePanelGroup orientation=\"horizontal\"><ResizablePanel defaultSize=\"50%\">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize=\"50%\">Right</ResizablePanel></ResizablePanelGroup>);\n * }\n * ```\n */\nfunction ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {\n  return <Panel data-slot='resizable-panel' {...props} />;\n}\n\n/**\n * Renders the draggable panel separator with an optional visible handle.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered ResizableHandle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Place panels and handles as siblings inside the group and give the host a nonzero size. Props follow the installed react-resizable-panels Group/Panel/Separator API; this wrapper does not add size persistence. withHandle defaults to false/absent.  children are replaced by the optional withHandle grip.\n * @example\n * ```tsx\n * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ResizablePanelGroup orientation=\"horizontal\"><ResizablePanel defaultSize=\"50%\">Left</ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize=\"50%\">Right</ResizablePanel></ResizablePanelGroup>);\n * }\n * ```\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof PanelResizeHandle> & {\n  /**\n   * Adds a small visible grip when true; defaults to false/absent.\n   */\n  withHandle?: boolean;\n}) {\n  return (\n    <PanelResizeHandle\n      data-slot='resizable-handle'\n      className={cn(\n        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && <div className='bg-border h-6 w-1 rounded-lg z-10 flex shrink-0' />}\n    </PanelResizeHandle>\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"mappings":";;;;;;;AAsBA,SAASE,EAAoB,EAAE,cAAW,GAAGC,KAAkD;CAC7F,OACE,kBAACH,GAAD;EACE,aAAU;EACV,WAAWK,EAAG,qEAAqEC,CAAS;EAC5F,GAAIH;CACL,CAAA;AAEL;AAiBA,SAASI,EAAe,EAAE,GAAGJ,KAA6C;CACxE,OAAO,kBAACK,GAAD;EAAO,aAAU;EAAkB,GAAIL;CAAQ,CAAA;AACxD;AAiBA,SAASM,EAAgB,EACvB,eACA,cACA,GAAGN,KAMF;CACD,OACE,kBAACF,GAAD;EACE,aAAU;EACV,WAAWI,EACT,6oBACAC,CACF;EACA,GAAIH;EAEH,UAAAQ,KAAc,kBAAC,OAAD,EAAK,WAAU,kDAAmD,CAAA;CAChE,CAAA;AAEvB"}

package/dist/ui/components/ui/responsive-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-list.cjs","names":["cn","React","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","DataList","getValue","keys","key","value","item","k","data","testId","emptyMessage","className","columns","col","onRowClick","keyField","mobileCardClassName","idx","gapClasses","ResponsiveGrid","props","colClasses","cols","gap","SwipeableItem","translateX","setTranslateX","startX","setStartX","isDragging","setIsDragging","handleTouchStart","handleTouchMove","diff","handleTouchEnd","threshold","onSwipeRight","onSwipeLeft","rightAction","leftAction","PullToRefresh","isPulling","setIsPulling","isRefreshing","setIsRefreshing","pullDistance","setPullDistance","startY","distance","pullThreshold","onRefresh"],"sources":["../../../../src/ui/components/ui/responsive-list.tsx"],"sourcesContent":["/**\n * レスポンシブデータリストコンポーネント\n *\n * shadcn/ui パターンに準拠:\n * - テーマトークン使用 (bg-card, text-muted-foreground など)\n * - testId prop 対応\n * - data-slot 属性\n */\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n// ============================================================================\n// DataList - Table on desktop, Cards on mobile\n// ============================================================================\n\nexport interface DataListColumn<T> {\n  key: keyof T | string;\n  header: string;\n  render?: (item: T) => React.ReactNode;\n  className?: string;\n  /** Hide this column on mobile */\n  mobileHidden?: boolean;\n  /** Show label on mobile card (default: true) */\n  mobileLabel?: boolean;\n}\n\nexport interface DataListProps<T> {\n  data: T[];\n  columns: DataListColumn<T>[];\n  keyField: keyof T;\n  onRowClick?: (item: T) => void;\n  emptyMessage?: string;\n  className?: string;\n  mobileCardClassName?: string;\n  testId?: string;\n}\n\n/**\n * PCサイズではテーブル形式、モバイルサイズではカード形式でデータを表示するレスポンシブなデータリストコンポーネント。\n */\nfunction DataList<T extends Record<string, unknown>>({\n  data,\n  columns,\n  keyField,\n  onRowClick,\n  emptyMessage = 'データがありません',\n  className,\n  mobileCardClassName,\n  testId,\n}: DataListProps<T>) {\n  const getValue = (item: T, key: string): unknown => {\n    const keys = key.split('.');\n    let value: unknown = item;\n    for (const k of keys) {\n      value = (value as Record<string, unknown>)?.[k];\n    }\n    return value;\n  };\n\n  if (data.length === 0) {\n    return (\n      <div\n        data-slot='data-list-empty'\n        data-testid={testId ? `${testId}-empty` : undefined}\n        className='flex items-center justify-center py-12 text-muted-foreground'\n      >\n        {emptyMessage}\n      </div>\n    );\n  }\n\n  return (\n    <div data-slot='data-list' data-testid={testId} className={cn('w-full', className)}>\n      {/* Desktop Table */}\n      <div className='hidden md:block overflow-x-auto'>\n        <table className='w-full text-sm'>\n          <thead>\n            <tr className='border-b bg-muted/50'>\n              {columns.map((col) => (\n                <th\n                  key={String(col.key)}\n                  className={cn('py-3 px-4 text-left font-medium text-foreground', col.className)}\n                >\n                  {col.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {data.map((item) => (\n              <tr\n                key={String(item[keyField])}\n                data-slot='data-list-row'\n                className={cn(\n                  'border-b transition-colors hover:bg-muted/50',\n                  onRowClick && 'cursor-pointer',\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((col) => (\n                  <td key={String(col.key)} className={cn('py-3 px-4', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Mobile Cards */}\n      <div className='md:hidden space-y-3'>\n        {data.map((item) => (\n          <div\n            key={String(item[keyField])}\n            data-slot='data-list-card'\n            className={cn(\n              'p-4 border rounded-lg bg-card text-card-foreground shadow-sm',\n              onRowClick && 'cursor-pointer active:bg-muted/50',\n              mobileCardClassName,\n            )}\n            onClick={() => onRowClick?.(item)}\n          >\n            {columns\n              .filter((col) => !col.mobileHidden)\n              .map((col, idx) => (\n                <div\n                  key={String(col.key)}\n                  className={cn(\n                    'flex justify-between items-center',\n                    idx > 0 && 'mt-2 pt-2 border-t border-dashed border-border',\n                  )}\n                >\n                  {col.mobileLabel !== false && (\n                    <span className='text-sm text-muted-foreground'>{col.header}</span>\n                  )}\n                  <span className={cn('font-medium', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </span>\n                </div>\n              ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// ResponsiveGrid\n// ============================================================================\n\nexport interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: {\n    default?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n  };\n  gap?: 'none' | 'sm' | 'default' | 'lg';\n}\n\nconst gapClasses = {\n  none: 'gap-0',\n  sm: 'gap-2',\n  default: 'gap-4',\n  lg: 'gap-6',\n};\n\n/**\n * デバイスの画面幅に合わせてカラム数を切り替えることができるレスポンシブグリッドレイアウト。\n */\nfunction ResponsiveGrid({\n  children,\n  cols = { default: 1, md: 2, lg: 3 },\n  gap = 'default',\n  className,\n  ...props\n}: ResponsiveGridProps) {\n  // Build grid classes dynamically\n  const colClasses = [\n    cols.default && `grid-cols-${cols.default}`,\n    cols.sm && `sm:grid-cols-${cols.sm}`,\n    cols.md && `md:grid-cols-${cols.md}`,\n    cols.lg && `lg:grid-cols-${cols.lg}`,\n    cols.xl && `xl:grid-cols-${cols.xl}`,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      data-slot='responsive-grid'\n      className={cn('grid', gapClasses[gap], colClasses, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// SwipeableItem\n// ============================================================================\n\nexport interface SwipeableItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  onSwipeLeft?: () => void;\n  onSwipeRight?: () => void;\n  leftAction?: React.ReactNode;\n  rightAction?: React.ReactNode;\n  threshold?: number;\n}\n\n/**\n * タッチデバイスなどで左右スワイプ操作によるアクション（削除や編集など）を実行できるコンポーネント。\n */\nfunction SwipeableItem({\n  children,\n  onSwipeLeft,\n  onSwipeRight,\n  leftAction,\n  rightAction,\n  threshold = 50,\n  className,\n  ...props\n}: SwipeableItemProps) {\n  const [translateX, setTranslateX] = React.useState(0);\n  const [startX, setStartX] = React.useState(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartX(e.touches[0].clientX);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n    const diff = e.touches[0].clientX - startX;\n    const maxSwipe = 100;\n    setTranslateX(Math.max(-maxSwipe, Math.min(maxSwipe, diff)));\n  };\n\n  const handleTouchEnd = () => {\n    setIsDragging(false);\n    if (translateX > threshold && onSwipeRight) {\n      onSwipeRight();\n    } else if (translateX < -threshold && onSwipeLeft) {\n      onSwipeLeft();\n    }\n    setTranslateX(0);\n  };\n\n  return (\n    <div\n      data-slot='swipeable-item'\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      {/* Background actions */}\n      <div className='absolute inset-0 flex'>\n        <div className='flex-1 flex items-center justify-start px-4 bg-green-500 text-white'>\n          {rightAction}\n        </div>\n        <div className='flex-1 flex items-center justify-end px-4 bg-destructive text-destructive-foreground'>\n          {leftAction}\n        </div>\n      </div>\n\n      {/* Swipeable content */}\n      <div\n        className='relative bg-background transition-transform'\n        style={{\n          transform: `translateX(${translateX}px)`,\n          transition: isDragging ? 'none' : 'transform 0.2s',\n        }}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// PullToRefresh\n// ============================================================================\n\nexport interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {\n  onRefresh: () => Promise<void>;\n  pullThreshold?: number;\n}\n\n/**\n * モバイル端末などで画面上部を下に引っ張ってデータを更新する（Pull to Refresh）機能を実装するコンポーネント。\n */\nfunction PullToRefresh({\n  children,\n  onRefresh,\n  pullThreshold = 80,\n  className,\n  ...props\n}: PullToRefreshProps) {\n  const [isPulling, setIsPulling] = React.useState(false);\n  const [isRefreshing, setIsRefreshing] = React.useState(false);\n  const [pullDistance, setPullDistance] = React.useState(0);\n  const startY = React.useRef(0);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    if (window.scrollY === 0) {\n      startY.current = e.touches[0].clientY;\n      setIsPulling(true);\n    }\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isPulling) return;\n    const distance = e.touches[0].clientY - startY.current;\n    if (distance > 0) {\n      setPullDistance(Math.min(distance * 0.5, 100));\n    }\n  };\n\n  const handleTouchEnd = async () => {\n    if (pullDistance >= pullThreshold) {\n      setIsRefreshing(true);\n      await onRefresh();\n      setIsRefreshing(false);\n    }\n    setIsPulling(false);\n    setPullDistance(0);\n  };\n\n  return (\n    <div\n      data-slot='pull-to-refresh'\n      className={cn('relative', className)}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      {...props}\n    >\n      {/* Pull indicator */}\n      <div\n        className='absolute left-1/2 -translate-x-1/2 flex items-center justify-center transition-all'\n        style={{\n          top: pullDistance - 40,\n          opacity: pullDistance / pullThreshold,\n        }}\n      >\n        <div\n          className={cn(\n            'w-6 h-6 border-2 border-primary border-t-transparent rounded-full',\n            isRefreshing && 'animate-spin',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div\n        style={{\n          transform: `translateY(${pullDistance}px)`,\n          transition: isPulling ? 'none' : 'transform 0.2s',\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh };\n"],"mappings":"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"}
+{"version":3,"file":"responsive-list.cjs","names":["cn","React","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","DataList","getValue","keys","key","value","item","k","data","testId","emptyMessage","className","columns","col","onRowClick","keyField","mobileCardClassName","idx","gapClasses","ResponsiveGrid","props","colClasses","cols","gap","SwipeableItem","translateX","setTranslateX","startX","setStartX","isDragging","setIsDragging","handleTouchStart","handleTouchMove","diff","handleTouchEnd","threshold","onSwipeRight","onSwipeLeft","rightAction","leftAction","PullToRefresh","isPulling","setIsPulling","isRefreshing","setIsRefreshing","pullDistance","setPullDistance","startY","distance","pullThreshold","onRefresh"],"sources":["../../../../src/ui/components/ui/responsive-list.tsx"],"sourcesContent":["/** Responsive record presentation and touch interaction wrappers; the host owns data loading and actions. */\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n// ============================================================================\n// DataList - Table on desktop, Cards on mobile\n// ============================================================================\n\n/**\n * One desktop-table/mobile-card column and optional row renderer.\n * @typeParam T - Complete row shape used by record keys, renderers and callbacks.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see DataList\n */\nexport interface DataListColumn<T> {\n  /**\n   * Row property or dot-separated lookup path used for default rendering and column keys.\n   */\n  key: keyof T | string;\n  /**\n   * Column heading, also used as a mobile card label unless mobileLabel=false.\n   */\n  header: string;\n  /**\n   * Custom renderer receiving the complete row; may run for both desktop and mobile markup.\n   * @param item - Complete row supplied by the renderer/click handler.\n   * @returns Content rendered for this row/option.\n   */\n  render?: (item: T) => React.ReactNode;\n  /**\n   * Additional classes merged with wrapper styling; see the component for the targeted element.\n   */\n  className?: string;\n  /**\n   * Hides this column only in mobile cards; omitted/false keeps it visible.\n   */\n  mobileHidden?: boolean;\n  /**\n   * Shows the column header beside the mobile value unless explicitly false.\n   */\n  mobileLabel?: boolean;\n}\n\n/**\n * Records, stable row keys and responsive rendering behavior for DataList.\n * @typeParam T - Complete row shape used by record keys, renderers and callbacks.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see DataList\n */\nexport interface DataListProps<T> {\n  /**\n   * Rows in display order; an empty array renders only emptyMessage.\n   */\n  data: T[];\n  /**\n   * Column definitions in display order; reused for desktop and mobile markup.\n   */\n  columns: DataListColumn<T>[];\n  /**\n   * Row field whose String(value) supplies React keys; provide unique stable values.\n   */\n  keyField: keyof T;\n  /**\n   * Called with the row on desktop-row or mobile-card click; adds pointer styling but no keyboard activation.\n   * @param item - Complete row supplied by the renderer/click handler.\n   * @returns No value; complete the host callback action.\n   */\n  onRowClick?: (item: T) => void;\n  /**\n   * Text shown when data is empty.\n   * @defaultValue データがありません\n   */\n  emptyMessage?: string;\n  /**\n   * Additional classes merged with wrapper styling; see the component for the targeted element.\n   */\n  className?: string;\n  /**\n   * Additional classes on each mobile card.\n   */\n  mobileCardClassName?: string;\n  /**\n   * Root data-testid for nonempty data; the empty state uses `${testId}-empty`.\n   */\n  testId?: string;\n}\n\n/**\n * Renders the same records as a desktop table and mobile cards using responsive visibility classes.\n * @typeParam T - Record shape used by data, column render callbacks and row-click callbacks; must extend Record<string, unknown>.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: emptyMessage='データがありません'.\n * @returns The rendered DataList composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction DataList<T extends Record<string, unknown>>({\n  data,\n  columns,\n  keyField,\n  onRowClick,\n  emptyMessage = 'データがありません',\n  className,\n  mobileCardClassName,\n  testId,\n}: DataListProps<T>) {\n  const getValue = (item: T, key: string): unknown => {\n    const keys = key.split('.');\n    let value: unknown = item;\n    for (const k of keys) {\n      value = (value as Record<string, unknown>)?.[k];\n    }\n    return value;\n  };\n\n  if (data.length === 0) {\n    return (\n      <div\n        data-slot='data-list-empty'\n        data-testid={testId ? `${testId}-empty` : undefined}\n        className='flex items-center justify-center py-12 text-muted-foreground'\n      >\n        {emptyMessage}\n      </div>\n    );\n  }\n\n  return (\n    <div data-slot='data-list' data-testid={testId} className={cn('w-full', className)}>\n      {/* Desktop Table */}\n      <div className='hidden md:block overflow-x-auto'>\n        <table className='w-full text-sm'>\n          <thead>\n            <tr className='border-b bg-muted/50'>\n              {columns.map((col) => (\n                <th\n                  key={String(col.key)}\n                  className={cn('py-3 px-4 text-left font-medium text-foreground', col.className)}\n                >\n                  {col.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {data.map((item) => (\n              <tr\n                key={String(item[keyField])}\n                data-slot='data-list-row'\n                className={cn(\n                  'border-b transition-colors hover:bg-muted/50',\n                  onRowClick && 'cursor-pointer',\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((col) => (\n                  <td key={String(col.key)} className={cn('py-3 px-4', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Mobile Cards */}\n      <div className='md:hidden space-y-3'>\n        {data.map((item) => (\n          <div\n            key={String(item[keyField])}\n            data-slot='data-list-card'\n            className={cn(\n              'p-4 border rounded-lg bg-card text-card-foreground shadow-sm',\n              onRowClick && 'cursor-pointer active:bg-muted/50',\n              mobileCardClassName,\n            )}\n            onClick={() => onRowClick?.(item)}\n          >\n            {columns\n              .filter((col) => !col.mobileHidden)\n              .map((col, idx) => (\n                <div\n                  key={String(col.key)}\n                  className={cn(\n                    'flex justify-between items-center',\n                    idx > 0 && 'mt-2 pt-2 border-t border-dashed border-border',\n                  )}\n                >\n                  {col.mobileLabel !== false && (\n                    <span className='text-sm text-muted-foreground'>{col.header}</span>\n                  )}\n                  <span className={cn('font-medium', col.className)}>\n                    {col.render ? col.render(item) : String(getValue(item, String(col.key)) ?? '')}\n                  </span>\n                </div>\n              ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// ResponsiveGrid\n// ============================================================================\n\n/**\n * Native div attributes and dynamically constructed breakpoint column classes.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see ResponsiveGrid\n */\nexport interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint column counts; defaults to { default: 1, md: 2, lg: 3 }. A supplied object replaces the default, with no merging. Requested dynamic utility classes must exist in host CSS.\n   */\n  cols?: {\n    /**\n     * Column count below the sm breakpoint; if omitted in a supplied cols object, no base column class is added.\n     */\n    default?: number;\n    /**\n     * Column count from the sm breakpoint; a requested utility class must exist in the host CSS.\n     */\n    sm?: number;\n    /**\n     * Column count from the md breakpoint; a requested utility class must exist in the host CSS.\n     */\n    md?: number;\n    /**\n     * Column count from the lg breakpoint; a requested utility class must exist in the host CSS.\n     */\n    lg?: number;\n    /**\n     * Column count from the xl breakpoint; a requested utility class must exist in the host CSS.\n     */\n    xl?: number;\n  };\n  /**\n   * Gap preset: none=gap-0, sm=gap-2, default=gap-4, lg=gap-6; defaults to default.\n   */\n  gap?: 'none' | 'sm' | 'default' | 'lg';\n}\n\nconst gapClasses = {\n  none: 'gap-0',\n  sm: 'gap-2',\n  default: 'gap-4',\n  lg: 'gap-6',\n};\n\n/**\n * Builds grid-column utility classes for caller-selected breakpoints.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: cols={ default: 1, md: 2, lg: 3 }, gap='default'.\n * @returns The rendered ResponsiveGrid composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. cols defaults to { default: 1, md: 2, lg: 3 }; supplying cols replaces that object without merging omitted breakpoints.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction ResponsiveGrid({\n  children,\n  cols = { default: 1, md: 2, lg: 3 },\n  gap = 'default',\n  className,\n  ...props\n}: ResponsiveGridProps) {\n  // Build grid classes dynamically\n  const colClasses = [\n    cols.default && `grid-cols-${cols.default}`,\n    cols.sm && `sm:grid-cols-${cols.sm}`,\n    cols.md && `md:grid-cols-${cols.md}`,\n    cols.lg && `lg:grid-cols-${cols.lg}`,\n    cols.xl && `xl:grid-cols-${cols.xl}`,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      data-slot='responsive-grid'\n      className={cn('grid', gapClasses[gap], colClasses, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// SwipeableItem\n// ============================================================================\n\n/**\n * Native outer div attributes and touch-swipe action configuration.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see SwipeableItem\n */\nexport interface SwipeableItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Called at touch end when left displacement exceeds threshold; the wrapper then resets translation.\n   * @returns No value; complete the host callback action.\n   */\n  onSwipeLeft?: () => void;\n  /**\n   * Called at touch end when right displacement exceeds threshold; the wrapper then resets translation.\n   * @returns No value; complete the host callback action.\n   */\n  onSwipeRight?: () => void;\n  /**\n   * Background content revealed by a leftward swipe.\n   */\n  leftAction?: React.ReactNode;\n  /**\n   * Background content revealed by a rightward swipe.\n   */\n  rightAction?: React.ReactNode;\n  /**\n   * Strict activation threshold in CSS pixels; defaults to 50. Translation is capped at ±100, so thresholds >=100 never activate.\n   */\n  threshold?: number;\n}\n\n/**\n * Reveals side actions during a horizontal touch swipe and notifies the host after a threshold.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: threshold=50.\n * @returns The rendered SwipeableItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. threshold defaults to 50 CSS pixels; displacement is clamped to ±100px and resets after touch end. leftAction appears during a left swipe, rightAction during a right swipe. Callbacks run only when displacement strictly exceeds the threshold.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction SwipeableItem({\n  children,\n  onSwipeLeft,\n  onSwipeRight,\n  leftAction,\n  rightAction,\n  threshold = 50,\n  className,\n  ...props\n}: SwipeableItemProps) {\n  const [translateX, setTranslateX] = React.useState(0);\n  const [startX, setStartX] = React.useState(0);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartX(e.touches[0].clientX);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n    const diff = e.touches[0].clientX - startX;\n    const maxSwipe = 100;\n    setTranslateX(Math.max(-maxSwipe, Math.min(maxSwipe, diff)));\n  };\n\n  const handleTouchEnd = () => {\n    setIsDragging(false);\n    if (translateX > threshold && onSwipeRight) {\n      onSwipeRight();\n    } else if (translateX < -threshold && onSwipeLeft) {\n      onSwipeLeft();\n    }\n    setTranslateX(0);\n  };\n\n  return (\n    <div\n      data-slot='swipeable-item'\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      {/* Background actions */}\n      <div className='absolute inset-0 flex'>\n        <div className='flex-1 flex items-center justify-start px-4 bg-green-500 text-white'>\n          {rightAction}\n        </div>\n        <div className='flex-1 flex items-center justify-end px-4 bg-destructive text-destructive-foreground'>\n          {leftAction}\n        </div>\n      </div>\n\n      {/* Swipeable content */}\n      <div\n        className='relative bg-background transition-transform'\n        style={{\n          transform: `translateX(${translateX}px)`,\n          transition: isDragging ? 'none' : 'transform 0.2s',\n        }}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// PullToRefresh\n// ============================================================================\n\n/**\n * Native outer div attributes and asynchronous downward-pull refresh configuration.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see PullToRefresh\n */\nexport interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Called and awaited after an eligible downward pull; the host performs refresh and handles errors. Rejection leaves the local refreshing state set.\n   * @returns A promise resolving when host refresh work completes; rejection is not caught by the wrapper.\n   */\n  onRefresh: () => Promise<void>;\n  /**\n   * Visual pull distance in CSS pixels required for refresh; defaults to 80. Visual distance is half touch displacement capped at 100; values >100 cannot activate.\n   */\n  pullThreshold?: number;\n}\n\n/**\n * Tracks downward touch motion and requests an asynchronous refresh after a threshold.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: pullThreshold=80.\n * @returns The rendered PullToRefresh composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. DataList mounts both desktop/mobile representations; CSS switches visibility at md, so custom render callbacks may execute for both. It does not virtualize or add keyboard row activation. keyField must give stable unique stringifiable keys. ResponsiveGrid creates dynamic Tailwind classes: the host CSS must include the requested classes. Touch helpers do not add mouse/keyboard equivalents or persistence. A pull starts only when window.scrollY is zero. Visual distance is half the pointer displacement, capped at 100 CSS pixels; pullThreshold defaults to 80. Refresh is awaited, but there is no concurrency guard or finally cleanup: rejection leaves refreshing/pull state set. Handle errors inside onRefresh when recovery is needed. Native touch handlers supplied in props override the wrapper handlers.\n * @example\n * ```tsx\n * import type { ComponentProps } from 'react';\n * import { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example({ refresh }: { refresh: () => Promise<void> }) {\n *   return (<PullToRefresh onRefresh={async () => { await refresh(); }}><ResponsiveGrid><SwipeableItem onSwipeLeft={() => console.log(\"Left swipe\")}><DataList data={[{ id: \"one\", title: \"Draft\" }]} keyField=\"id\" columns={[{ key: \"title\", header: \"Title\" }]} /></SwipeableItem></ResponsiveGrid></PullToRefresh>);\n * }\n * ```\n */\nfunction PullToRefresh({\n  children,\n  onRefresh,\n  pullThreshold = 80,\n  className,\n  ...props\n}: PullToRefreshProps) {\n  const [isPulling, setIsPulling] = React.useState(false);\n  const [isRefreshing, setIsRefreshing] = React.useState(false);\n  const [pullDistance, setPullDistance] = React.useState(0);\n  const startY = React.useRef(0);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    if (window.scrollY === 0) {\n      startY.current = e.touches[0].clientY;\n      setIsPulling(true);\n    }\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isPulling) return;\n    const distance = e.touches[0].clientY - startY.current;\n    if (distance > 0) {\n      setPullDistance(Math.min(distance * 0.5, 100));\n    }\n  };\n\n  const handleTouchEnd = async () => {\n    if (pullDistance >= pullThreshold) {\n      setIsRefreshing(true);\n      await onRefresh();\n      setIsRefreshing(false);\n    }\n    setIsPulling(false);\n    setPullDistance(0);\n  };\n\n  return (\n    <div\n      data-slot='pull-to-refresh'\n      className={cn('relative', className)}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      {...props}\n    >\n      {/* Pull indicator */}\n      <div\n        className='absolute left-1/2 -translate-x-1/2 flex items-center justify-center transition-all'\n        style={{\n          top: pullDistance - 40,\n          opacity: pullDistance / pullThreshold,\n        }}\n      >\n        <div\n          className={cn(\n            'w-6 h-6 border-2 border-primary border-t-transparent rounded-full',\n            isRefreshing && 'animate-spin',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div\n        style={{\n          transform: `translateY(${pullDistance}px)`,\n          transition: isPulling ? 'none' : 'transform 0.2s',\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { DataList, ResponsiveGrid, SwipeableItem, PullToRefresh };\n"],"mappings":"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"}