@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/mobile-form-variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-form-variants.cjs","names":["cva","class_variance_authority","mobileButtonVariants","fabVariants"],"sources":["../../../../src/ui/components/ui/mobile-form-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const mobileButtonVariants = cva(\n  // Base styles\n  [\n    'inline-flex items-center justify-center gap-2 rounded-lg font-medium',\n    'transition-all outline-none select-none shrink-0',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'active:scale-[0.98]',\n    \"[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n      },\n      size: {\n        sm: 'h-10 px-4 text-sm',\n        default: 'h-12 px-6 text-base',\n        lg: 'h-14 px-8 text-lg',\n        full: 'h-12 w-full text-base',\n        icon: 'h-12 w-12',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const fabVariants = cva(\n  [\n    'fixed z-50 flex items-center justify-center gap-2',\n    'bg-primary text-primary-foreground shadow-lg',\n    'transition-all active:scale-95',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-offset-2 outline-none',\n    \"[&_svg:not([class*='size-'])]:size-6 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      position: {\n        'bottom-right': 'right-4 bottom-20',\n        'bottom-center': 'left-1/2 -translate-x-1/2 bottom-20',\n        'bottom-left': 'left-4 bottom-20',\n      },\n      extended: {\n        true: 'h-14 px-6 rounded-full',\n        false: 'h-14 w-14 rounded-full',\n      },\n    },\n    defaultVariants: {\n      position: 'bottom-right',\n      extended: false,\n    },\n  },\n);\n"],"mappings":"A,0HAEA,IAAaE,GAAA,EAAuBF,EAAAA,IAAAA,CAElC,CACE,uEACA,mDACA,sDACA,mDACA,sBACA,mFACF,CAAC,CAAC,KAAK,GAAG,EACV,CACE,SAAU,CACR,QAAS,CACP,QAAS,yDACT,UAAW,+DACX,QAAS,iFACT,MAAO,+CACP,YAAa,oEACf,EACA,KAAM,CACJ,GAAI,oBACJ,QAAS,sBACT,GAAI,oBACJ,KAAM,wBACN,KAAM,WACR,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEaG,GAAA,EAAcH,EAAAA,IAAAA,CACzB,CACE,oDACA,+CACA,iCACA,+FACA,mFACF,CAAC,CAAC,KAAK,GAAG,EACV,CACE,SAAU,CACR,SAAU,CACR,eAAgB,oBAChB,gBAAiB,sCACjB,cAAe,kBACjB,EACA,SAAU,CACR,KAAM,yBACN,MAAO,wBACT,CACF,EACA,gBAAiB,CACf,SAAU,eACV,SAAU,EACZ,CACF,CACF,E"}
+{"version":3,"file":"mobile-form-variants.cjs","names":["cva","class_variance_authority","mobileButtonVariants","fabVariants"],"sources":["../../../../src/ui/components/ui/mobile-form-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Builds large-touch button classes for mobile forms.\n * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.\n * @returns The combined CSS class string for the supplied variant axes and additional class/className values.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);\n * }\n * ```\n */\nexport const mobileButtonVariants = cva(\n  // Base styles\n  [\n    'inline-flex items-center justify-center gap-2 rounded-lg font-medium',\n    'transition-all outline-none select-none shrink-0',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'active:scale-[0.98]',\n    \"[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, secondary, outline, ghost, destructive.\n       * @defaultValue 'default'\n       * @see mobileButtonVariants\n       */\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n      },\n      /**\n       * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n       * Accepted values: sm, default, lg, full, icon.\n       * @defaultValue 'default'\n       * @see mobileButtonVariants\n       */\n      size: {\n        sm: 'h-10 px-4 text-sm',\n        default: 'h-12 px-6 text-base',\n        lg: 'h-14 px-8 text-lg',\n        full: 'h-12 w-full text-base',\n        icon: 'h-12 w-12',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Builds fixed-position classes for circular or extended floating action buttons.\n * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.\n * @returns The fixed-position FAB class string; position defaults to bottom-right and extended to false.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);\n * }\n * ```\n */\nexport const fabVariants = cva(\n  [\n    'fixed z-50 flex items-center justify-center gap-2',\n    'bg-primary text-primary-foreground shadow-lg',\n    'transition-all active:scale-95',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-offset-2 outline-none',\n    \"[&_svg:not([class*='size-'])]:size-6 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      /**\n       * Fixed floating-action placement relative to the viewport.\n       * Accepted values: 'bottom-right', 'bottom-center', 'bottom-left'.\n       * @defaultValue 'bottom-right'\n       * @see fabVariants\n       */\n      position: {\n        'bottom-right': 'right-4 bottom-20',\n        'bottom-center': 'left-1/2 -translate-x-1/2 bottom-20',\n        'bottom-left': 'left-4 bottom-20',\n      },\n      /**\n       * Whether the floating action surface uses extended padding instead of a circular footprint.\n       * Accepted values: true, false.\n       * @defaultValue false\n       * @see fabVariants\n       */\n      extended: {\n        true: 'h-14 px-6 rounded-full',\n        false: 'h-14 w-14 rounded-full',\n      },\n    },\n    defaultVariants: {\n      position: 'bottom-right',\n      extended: false,\n    },\n  },\n);\n"],"mappings":"A,0HAiBA,IAAaE,GAAA,EAAuBF,EAAAA,IAAAA,CAElC,CACE,uEACA,mDACA,sDACA,mDACA,sBACA,mFACF,CAAC,CAAC,KAAK,GAAG,EACV,CACE,SAAU,CAOR,QAAS,CACP,QAAS,yDACT,UAAW,+DACX,QAAS,iFACT,MAAO,+CACP,YAAa,oEACf,EAOA,KAAM,CACJ,GAAI,oBACJ,QAAS,sBACT,GAAI,oBACJ,KAAM,wBACN,KAAM,WACR,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAiBaG,GAAA,EAAcH,EAAAA,IAAAA,CACzB,CACE,oDACA,+CACA,iCACA,+FACA,mFACF,CAAC,CAAC,KAAK,GAAG,EACV,CACE,SAAU,CAOR,SAAU,CACR,eAAgB,oBAChB,gBAAiB,sCACjB,cAAe,kBACjB,EAOA,SAAU,CACR,KAAM,yBACN,MAAO,wBACT,CACF,EACA,gBAAiB,CACf,SAAU,eACV,SAAU,EACZ,CACF,CACF,E"}

package/dist/ui/components/ui/mobile-form-variants.d.cts

@@ -1,7 +1,37 @@
+/**
+ * Builds large-touch button classes for mobile forms.
+ * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.
+ * @returns The combined CSS class string for the supplied variant axes and additional class/className values.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);
+ * }
+ * ```
+ */
 export declare const mobileButtonVariants: (props?: ({
     variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "full" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Builds fixed-position classes for circular or extended floating action buttons.
+ * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.
+ * @returns The fixed-position FAB class string; position defaults to bottom-right and extended to false.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);
+ * }
+ * ```
+ */
 export declare const fabVariants: (props?: ({
     position?: "bottom-right" | "bottom-center" | "bottom-left" | null | undefined;
     extended?: boolean | null | undefined;

package/dist/ui/components/ui/mobile-form-variants.d.ts

@@ -1,7 +1,37 @@
+/**
+ * Builds large-touch button classes for mobile forms.
+ * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.
+ * @returns The combined CSS class string for the supplied variant axes and additional class/className values.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);
+ * }
+ * ```
+ */
 export declare const mobileButtonVariants: (props?: ({
     variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "full" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Builds fixed-position classes for circular or extended floating action buttons.
+ * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.
+ * @returns The fixed-position FAB class string; position defaults to bottom-right and extended to false.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.
+ * @example
+ * ```tsx
+ * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);
+ * }
+ * ```
+ */
 export declare const fabVariants: (props?: ({
     position?: "bottom-right" | "bottom-center" | "bottom-left" | null | undefined;
     extended?: boolean | null | undefined;

package/dist/ui/components/ui/mobile-form-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-form-variants.js","names":["mobileButtonVariants","cva","fabVariants"],"sources":["../../../../src/ui/components/ui/mobile-form-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const mobileButtonVariants = cva(\n  // Base styles\n  [\n    'inline-flex items-center justify-center gap-2 rounded-lg font-medium',\n    'transition-all outline-none select-none shrink-0',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'active:scale-[0.98]',\n    \"[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n      },\n      size: {\n        sm: 'h-10 px-4 text-sm',\n        default: 'h-12 px-6 text-base',\n        lg: 'h-14 px-8 text-lg',\n        full: 'h-12 w-full text-base',\n        icon: 'h-12 w-12',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const fabVariants = cva(\n  [\n    'fixed z-50 flex items-center justify-center gap-2',\n    'bg-primary text-primary-foreground shadow-lg',\n    'transition-all active:scale-95',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-offset-2 outline-none',\n    \"[&_svg:not([class*='size-'])]:size-6 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      position: {\n        'bottom-right': 'right-4 bottom-20',\n        'bottom-center': 'left-1/2 -translate-x-1/2 bottom-20',\n        'bottom-left': 'left-4 bottom-20',\n      },\n      extended: {\n        true: 'h-14 px-6 rounded-full',\n        false: 'h-14 w-14 rounded-full',\n      },\n    },\n    defaultVariants: {\n      position: 'bottom-right',\n      extended: false,\n    },\n  },\n);\n"],"mappings":";;;AAEA,IAAaA,IAAuBC,EAElC;CACE;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,aAAa;EACf;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;GACN,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF,GAEaC,IAAcD,EACzB;CACE;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GACV;CACE,UAAU;EACR,UAAU;GACR,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;EACjB;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CACF"}
+{"version":3,"file":"mobile-form-variants.js","names":["mobileButtonVariants","cva","fabVariants"],"sources":["../../../../src/ui/components/ui/mobile-form-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Builds large-touch button classes for mobile forms.\n * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.\n * @returns The combined CSS class string for the supplied variant axes and additional class/className values.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);\n * }\n * ```\n */\nexport const mobileButtonVariants = cva(\n  // Base styles\n  [\n    'inline-flex items-center justify-center gap-2 rounded-lg font-medium',\n    'transition-all outline-none select-none shrink-0',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'active:scale-[0.98]',\n    \"[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, secondary, outline, ghost, destructive.\n       * @defaultValue 'default'\n       * @see mobileButtonVariants\n       */\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n      },\n      /**\n       * Control size preset selected by the consumer; sizes are class-based rather than numeric dimensions.\n       * Accepted values: sm, default, lg, full, icon.\n       * @defaultValue 'default'\n       * @see mobileButtonVariants\n       */\n      size: {\n        sm: 'h-10 px-4 text-sm',\n        default: 'h-12 px-6 text-base',\n        lg: 'h-14 px-8 text-lg',\n        full: 'h-12 w-full text-base',\n        icon: 'h-12 w-12',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Builds fixed-position classes for circular or extended floating action buttons.\n * @param props - Optional declared variant axes and additional class/className values; omission applies the CVA defaults documented below.\n * @returns The fixed-position FAB class string; position defaults to bottom-right and extended to false.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. variant and size default to default; sizes sm/lg/full/icon are also supported. These pure CVA helpers return class strings and do not add behavior or DOM attributes.\n * @example\n * ```tsx\n * import { mobileButtonVariants, fabVariants } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><div className={mobileButtonVariants()}>Touch button</div><div className={fabVariants()}>Floating action</div></>);\n * }\n * ```\n */\nexport const fabVariants = cva(\n  [\n    'fixed z-50 flex items-center justify-center gap-2',\n    'bg-primary text-primary-foreground shadow-lg',\n    'transition-all active:scale-95',\n    'focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-offset-2 outline-none',\n    \"[&_svg:not([class*='size-'])]:size-6 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ].join(' '),\n  {\n    variants: {\n      /**\n       * Fixed floating-action placement relative to the viewport.\n       * Accepted values: 'bottom-right', 'bottom-center', 'bottom-left'.\n       * @defaultValue 'bottom-right'\n       * @see fabVariants\n       */\n      position: {\n        'bottom-right': 'right-4 bottom-20',\n        'bottom-center': 'left-1/2 -translate-x-1/2 bottom-20',\n        'bottom-left': 'left-4 bottom-20',\n      },\n      /**\n       * Whether the floating action surface uses extended padding instead of a circular footprint.\n       * Accepted values: true, false.\n       * @defaultValue false\n       * @see fabVariants\n       */\n      extended: {\n        true: 'h-14 px-6 rounded-full',\n        false: 'h-14 w-14 rounded-full',\n      },\n    },\n    defaultVariants: {\n      position: 'bottom-right',\n      extended: false,\n    },\n  },\n);\n"],"mappings":";;;AAiBA,IAAaA,IAAuBC,EAElC;CACE;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GACV;CACE,UAAU;EAOR,SAAS;GACP,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,aAAa;EACf;EAOA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;GACN,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF,GAiBaC,IAAcD,EACzB;CACE;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GACV;CACE,UAAU;EAOR,UAAU;GACR,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;EACjB;EAOA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CACF"}

package/dist/ui/components/ui/mobile-form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-form.cjs","names":["React","cn","InputPrimitive","ButtonPrimitive","mobileButtonVariants","Loader2","fabVariants","require_runtime","require_ui_lib_utils","require_ui_components_ui_mobile_form_variants","react_jsx_runtime","react","lucide_react","_base_ui_react_button","_base_ui_react_input","MobileForm","props","testId","className","MobileFormSection","title","description","MobileInput","generatedId","controlId","descriptionId","_children","restProps","label","icon","error","helperText","MobileSelect","placeholder","options","opt","MobileButton","loading","disabled","state","children","FAB","extended"],"sources":["../../../../src/ui/components/ui/mobile-form.tsx"],"sourcesContent":["/**\n * モバイル最適化フォームコンポーネント\n *\n * shadcn/ui パターンに準拠:\n * - CVA でバリアント管理\n * - @base-ui/react プリミティブ使用\n * - テーマトークン使用\n * - testId prop 対応\n */\n\nimport * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { mobileButtonVariants, fabVariants } from './mobile-form-variants';\n\n// ============================================================================\n// Mobile Form Container\n// ============================================================================\n\nexport interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {\n  testId?: string;\n}\n\nconst MobileForm = React.forwardRef<HTMLFormElement, MobileFormProps>(\n  ({ className, testId, ...props }, ref) => (\n    <form\n      ref={ref}\n      data-slot='mobile-form'\n      data-testid={testId}\n      className={cn('space-y-4 px-4 pb-safe', className)}\n      {...props}\n    />\n  ),\n);\nMobileForm.displayName = 'MobileForm';\n\n// ============================================================================\n// Mobile Form Section\n// ============================================================================\n\nexport interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  description?: string;\n}\n\nconst MobileFormSection = React.forwardRef<HTMLDivElement, MobileFormSectionProps>(\n  ({ title, description, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='mobile-form-section'\n      className={cn('space-y-3', className)}\n      {...props}\n    >\n      {(title || description) && (\n        <div className='space-y-1'>\n          {title && <h3 className='text-sm font-medium text-foreground'>{title}</h3>}\n          {description && <p className='text-xs text-muted-foreground'>{description}</p>}\n        </div>\n      )}\n      <div className='space-y-3'>{children}</div>\n    </div>\n  ),\n);\nMobileFormSection.displayName = 'MobileFormSection';\n\n// ============================================================================\n// Mobile Input (uses @base-ui/react Input)\n// ============================================================================\n\nexport interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {\n  label: string;\n  error?: string;\n  helperText?: string;\n  icon?: React.ReactNode;\n  testId?: string;\n}\n\nconst MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(\n  ({ label, error, helperText, icon, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    // Exclude children from the void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as MobileInputProps & {\n      children?: React.ReactNode;\n      };\n\n    return (\n      <div className='space-y-1.5' data-slot='mobile-input-wrapper'>\n        <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n        <div className='relative'>\n          {icon && (\n            <div className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'>\n              {icon}\n            </div>\n          )}\n          <InputPrimitive\n            ref={ref}\n            data-slot='mobile-input'\n            data-testid={testId}\n            aria-invalid={!!error}\n            className={cn(\n              // Base styles\n              'w-full h-12 px-4 text-base rounded-lg border bg-background',\n              'transition-colors outline-none',\n              // Focus\n              'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n              // Error\n              'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n              'aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]',\n              // Disabled\n              'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n              // Placeholder\n              'placeholder:text-muted-foreground',\n              // Icon padding\n              icon && 'pl-10',\n              className,\n            )}\n            {...restProps}\n            id={controlId}\n            aria-describedby={[props['aria-describedby'], (error || helperText) && descriptionId].filter(Boolean).join(' ') || undefined}\n          />\n        </div>\n        {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n        {helperText && !error && <p id={descriptionId} className='text-xs text-muted-foreground'>{helperText}</p>}\n      </div>\n    );\n  },\n);\nMobileInput.displayName = 'MobileInput';\n\n// ============================================================================\n// Mobile Select\n// ============================================================================\n\nexport interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  label: string;\n  options: Array<{ value: string; label: string }>;\n  error?: string;\n  placeholder?: string;\n  testId?: string;\n}\n\nconst MobileSelect = React.forwardRef<HTMLSelectElement, MobileSelectProps>(\n  ({ label, options, error, placeholder, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    return (\n    <div className='space-y-1.5' data-slot='mobile-select-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n      <select\n        ref={ref}\n        data-slot='mobile-select'\n        data-testid={testId}\n        aria-invalid={!!error}\n        className={cn(\n          // Base\n          'w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none',\n          'transition-colors outline-none',\n          // Focus\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          // Error\n          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n          'aria-invalid:border-destructive aria-invalid:ring-[3px]',\n          // Disabled\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n        id={controlId}\n        aria-describedby={[props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined}\n      >\n        {placeholder && (\n          <option value='' disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n    </div>\n  );\n  },\n);\nMobileSelect.displayName = 'MobileSelect';\n\n// ============================================================================\n// Mobile Button (CVA variants + @base-ui/react Button)\n// ============================================================================\n\nexport interface MobileButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {\n  loading?: boolean;\n  icon?: React.ReactNode;\n  testId?: string;\n}\n\nconst MobileButton = React.forwardRef<HTMLElement, MobileButtonProps>(\n  ({ className, variant, size, loading, icon, disabled, children, testId, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='mobile-button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(mobileButtonVariants({ variant, size }), className(state)) : cn(mobileButtonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nMobileButton.displayName = 'MobileButton';\n\n// ============================================================================\n// Floating Action Button (FAB)\n// ============================================================================\n\nexport interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {\n  icon: React.ReactNode;\n  label?: string;\n  testId?: string;\n}\n\nconst FAB = React.forwardRef<HTMLElement, FABProps>(\n  ({ icon, label, position, extended, className, testId, ...props }, ref) => (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={typeof className === 'function' ? state => cn(fabVariants({ position, extended: extended || !!label }), className(state)) : cn(fabVariants({ position, extended: extended || !!label, className }))}\n      {...props}\n    >\n      {icon}\n      {(extended || label) && label && <span className='font-medium'>{label}</span>}\n    </ButtonPrimitive>\n  ),\n);\nFAB.displayName = 'FAB';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };\n"],"mappings":"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"}
+{"version":3,"file":"mobile-form.cjs","names":["React","cn","InputPrimitive","ButtonPrimitive","mobileButtonVariants","Loader2","fabVariants","require_runtime","require_ui_lib_utils","require_ui_components_ui_mobile_form_variants","react_jsx_runtime","react","lucide_react","_base_ui_react_button","_base_ui_react_input","MobileForm","props","testId","className","MobileFormSection","title","description","MobileInput","generatedId","controlId","descriptionId","_children","restProps","label","icon","error","helperText","MobileSelect","placeholder","options","opt","MobileButton","loading","disabled","state","children","FAB","extended"],"sources":["../../../../src/ui/components/ui/mobile-form.tsx"],"sourcesContent":["/** Mobile-sized native and Base UI form controls with linked labels and Appkit variants. */\n\nimport * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { mobileButtonVariants, fabVariants } from './mobile-form-variants';\n\n// ============================================================================\n// Mobile Form Container\n// ============================================================================\n\n/**\n * Native form attributes and a stable selector for MobileForm.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileForm\n */\nexport interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a mobile-spaced native form without adding a form-state provider.\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 MobileForm composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileForm = React.forwardRef<HTMLFormElement, MobileFormProps>(\n  ({ className, testId, ...props }, ref) => (\n    <form\n      ref={ref}\n      data-slot='mobile-form'\n      data-testid={testId}\n      className={cn('space-y-4 px-4 pb-safe', className)}\n      {...props}\n    />\n  ),\n);\nMobileForm.displayName = 'MobileForm';\n\n// ============================================================================\n// Mobile Form Section\n// ============================================================================\n\n/**\n * Native div attributes and optional section heading/description.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileFormSection\n */\nexport interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional section heading rendered before its content.\n   */\n  title?: string;\n  /**\n   * Supporting text displayed by the owning component.\n   */\n  description?: string;\n}\n\n/**\n * Groups mobile form controls under an optional title and description.\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 MobileFormSection composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileFormSection = React.forwardRef<HTMLDivElement, MobileFormSectionProps>(\n  ({ title, description, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='mobile-form-section'\n      className={cn('space-y-3', className)}\n      {...props}\n    >\n      {(title || description) && (\n        <div className='space-y-1'>\n          {title && <h3 className='text-sm font-medium text-foreground'>{title}</h3>}\n          {description && <p className='text-xs text-muted-foreground'>{description}</p>}\n        </div>\n      )}\n      <div className='space-y-3'>{children}</div>\n    </div>\n  ),\n);\nMobileFormSection.displayName = 'MobileFormSection';\n\n// ============================================================================\n// Mobile Input (uses @base-ui/react Input)\n// ============================================================================\n\n/**\n * Base UI input attributes with required visible label and linked helper/error content.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileInput\n */\nexport interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Supporting text linked through aria-describedby when no error is present.\n   */\n  helperText?: string;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled large-touch input with generated IDs and linked helper/error text.\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 MobileInput composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(\n  ({ label, error, helperText, icon, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    // Exclude children from the void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as MobileInputProps & {\n      children?: React.ReactNode;\n      };\n\n    return (\n      <div className='space-y-1.5' data-slot='mobile-input-wrapper'>\n        <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n        <div className='relative'>\n          {icon && (\n            <div className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'>\n              {icon}\n            </div>\n          )}\n          <InputPrimitive\n            ref={ref}\n            data-slot='mobile-input'\n            data-testid={testId}\n            aria-invalid={!!error}\n            className={cn(\n              // Base styles\n              'w-full h-12 px-4 text-base rounded-lg border bg-background',\n              'transition-colors outline-none',\n              // Focus\n              'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n              // Error\n              'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n              'aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]',\n              // Disabled\n              'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n              // Placeholder\n              'placeholder:text-muted-foreground',\n              // Icon padding\n              icon && 'pl-10',\n              className,\n            )}\n            {...restProps}\n            id={controlId}\n            aria-describedby={[props['aria-describedby'], (error || helperText) && descriptionId].filter(Boolean).join(' ') || undefined}\n          />\n        </div>\n        {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n        {helperText && !error && <p id={descriptionId} className='text-xs text-muted-foreground'>{helperText}</p>}\n      </div>\n    );\n  },\n);\nMobileInput.displayName = 'MobileInput';\n\n// ============================================================================\n// Mobile Select\n// ============================================================================\n\n/**\n * Native select attributes with required label and option data.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileSelect\n */\nexport interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Native option entries in display order; each value must be a stable unique string and label is its visible text.\n   */\n  options: Array<{ /**\n * Identity for this choice within the surrounding group; provide a distinct stable string.\n */\n  /**\n   * Identity for this choice within the surrounding group; provide a distinct stable string.\n   */\n  value: string; /**\n * Visible control/option text or content; does not perform persistence or validation.\n */\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string }>;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Text displayed while no value is selected/entered; omitted means no placeholder.\n   */\n  placeholder?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled native select with generated IDs and linked error text.\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 MobileSelect composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileSelect = React.forwardRef<HTMLSelectElement, MobileSelectProps>(\n  ({ label, options, error, placeholder, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    return (\n    <div className='space-y-1.5' data-slot='mobile-select-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n      <select\n        ref={ref}\n        data-slot='mobile-select'\n        data-testid={testId}\n        aria-invalid={!!error}\n        className={cn(\n          // Base\n          'w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none',\n          'transition-colors outline-none',\n          // Focus\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          // Error\n          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n          'aria-invalid:border-destructive aria-invalid:ring-[3px]',\n          // Disabled\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n        id={controlId}\n        aria-describedby={[props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined}\n      >\n        {placeholder && (\n          <option value='' disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n    </div>\n  );\n  },\n);\nMobileSelect.displayName = 'MobileSelect';\n\n// ============================================================================\n// Mobile Button (CVA variants + @base-ui/react Button)\n// ============================================================================\n\n/**\n * Base UI button attributes with mobile variants, loading state and optional icon.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileButton\n */\nexport interface MobileButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a large-touch Base UI button with optional loading spinner or leading icon.\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 MobileButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileButton = React.forwardRef<HTMLElement, MobileButtonProps>(\n  ({ className, variant, size, loading, icon, disabled, children, testId, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='mobile-button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(mobileButtonVariants({ variant, size }), className(state)) : cn(mobileButtonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nMobileButton.displayName = 'MobileButton';\n\n// ============================================================================\n// Floating Action Button (FAB)\n// ============================================================================\n\n/**\n * Base UI button attributes and fixed-position floating-action styling.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see FAB\n */\nexport interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {\n  /**\n   * Required visual content in the floating action button; provide aria-label for icon-only use.\n   */\n  icon: React.ReactNode;\n  /**\n   * Optional visible text; a truthy label forces extended styling even when extended=false.\n   */\n  label?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a fixed floating action button that expands when label content is supplied.\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 FAB composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst FAB = React.forwardRef<HTMLElement, FABProps>(\n  ({ icon, label, position, extended, className, testId, ...props }, ref) => (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={typeof className === 'function' ? state => cn(fabVariants({ position, extended: extended || !!label }), className(state)) : cn(fabVariants({ position, extended: extended || !!label, className }))}\n      {...props}\n    >\n      {icon}\n      {(extended || label) && label && <span className='font-medium'>{label}</span>}\n    </ButtonPrimitive>\n  ),\n);\nFAB.displayName = 'FAB';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };\n"],"mappings":"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"}

package/dist/ui/components/ui/mobile-form.d.cts

@@ -2,54 +2,231 @@ import { Input as InputPrimitive } from '@base-ui/react/input';
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 import { mobileButtonVariants, fabVariants } from './mobile-form-variants.cjs';
+/** Mobile-sized native and Base UI form controls with linked labels and Appkit variants. */
+import * as React from 'react';
 /**
- * モバイル最適化フォームコンポーネント
- *
- * shadcn/ui パターンに準拠:
- * - CVA でバリアント管理
- * - @base-ui/react プリミティブ使用
- * - テーマトークン使用
- * - testId prop 対応
+ * Native form attributes and a stable selector for MobileForm.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see MobileForm
  */
-import * as React from 'react';
 export interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
+     */
     testId?: string;
 }
+/**
+ * Renders a mobile-spaced native form without adding a form-state provider.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered MobileForm composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title="Contact"><MobileInput label="Name" /><MobileSelect label="Method" defaultValue="email" options={[{ value: "email", label: "Email" }]} /><MobileButton type="submit">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label="Create" /></>);
+ * }
+ * ```
+ */
 declare const MobileForm: React.ForwardRefExoticComponent<MobileFormProps & React.RefAttributes<HTMLFormElement>>;
+/**
+ * Native div attributes and optional section heading/description.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see MobileFormSection
+ */
 export interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional section heading rendered before its content.
+     */
     title?: string;
+    /**
+     * Supporting text displayed by the owning component.
+     */
     description?: string;
 }
+/**
+ * Groups mobile form controls under an optional title and description.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered MobileFormSection composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title="Contact"><MobileInput label="Name" /><MobileSelect label="Method" defaultValue="email" options={[{ value: "email", label: "Email" }]} /><MobileButton type="submit">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label="Create" /></>);
+ * }
+ * ```
+ */
 declare const MobileFormSection: React.ForwardRefExoticComponent<MobileFormSectionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Base UI input attributes with required visible label and linked helper/error content.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see MobileInput
+ */
 export interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {
+    /**
+     * Visible control/option text or content; does not perform persistence or validation.
+     */
     label: string;
+    /**
+     * Error text displayed and used to mark the control invalid; the host supplies validation results.
+     */
     error?: string;
+    /**
+     * Supporting text linked through aria-describedby when no error is present.
+     */
     helperText?: string;
+    /**
+     * Leading visual content; provide an accessible name separately when it is the only button content.
+     */
     icon?: React.ReactNode;
+    /**
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
+     */
     testId?: string;
 }
+/**
+ * Renders a labeled large-touch input with generated IDs and linked helper/error text.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered MobileInput composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title="Contact"><MobileInput label="Name" /><MobileSelect label="Method" defaultValue="email" options={[{ value: "email", label: "Email" }]} /><MobileButton type="submit">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label="Create" /></>);
+ * }
+ * ```
+ */
 declare const MobileInput: React.ForwardRefExoticComponent<Omit<MobileInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Native select attributes with required label and option data.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see MobileSelect
+ */
 export interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Visible control/option text or content; does not perform persistence or validation.
+     */
     label: string;
+    /**
+     * Native option entries in display order; each value must be a stable unique string and label is its visible text.
+     */
     options: Array<{
-        value: string;
+        /**
+         * Identity for this choice within the surrounding group; provide a distinct stable string.
+         */
+        value: string; /**
+       * Visible control/option text or content; does not perform persistence or validation.
+       */
+        /**
+         * Visible control/option text or content; does not perform persistence or validation.
+         */
         label: string;
     }>;
+    /**
+     * Error text displayed and used to mark the control invalid; the host supplies validation results.
+     */
     error?: string;
+    /**
+     * Text displayed while no value is selected/entered; omitted means no placeholder.
+     */
     placeholder?: string;
+    /**
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
+     */
     testId?: string;
 }
+/**
+ * Renders a labeled native select with generated IDs and linked error text.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered MobileSelect composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title="Contact"><MobileInput label="Name" /><MobileSelect label="Method" defaultValue="email" options={[{ value: "email", label: "Email" }]} /><MobileButton type="submit">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label="Create" /></>);
+ * }
+ * ```
+ */
 declare const MobileSelect: React.ForwardRefExoticComponent<MobileSelectProps & React.RefAttributes<HTMLSelectElement>>;
+/**
+ * Base UI button attributes with mobile variants, loading state and optional icon.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see MobileButton
+ */
 export interface MobileButtonProps extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {
+    /**
+     * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.
+     */
     loading?: boolean;
+    /**
+     * Leading visual content; provide an accessible name separately when it is the only button content.
+     */
     icon?: React.ReactNode;
+    /**
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
+     */
     testId?: string;
 }
+/**
+ * Renders a large-touch Base UI button with optional loading spinner or leading icon.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered MobileButton composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title="Contact"><MobileInput label="Name" /><MobileSelect label="Method" defaultValue="email" options={[{ value: "email", label: "Email" }]} /><MobileButton type="submit">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label="Create" /></>);
+ * }
+ * ```
+ */
 declare const MobileButton: React.ForwardRefExoticComponent<Omit<MobileButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * Base UI button attributes and fixed-position floating-action styling.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see FAB
+ */
 export interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {
+    /**
+     * Required visual content in the floating action button; provide aria-label for icon-only use.
+     */
     icon: React.ReactNode;
+    /**
+     * Optional visible text; a truthy label forces extended styling even when extended=false.
+     */
     label?: string;
+    /**
+     * Stable data-testid assigned to the rendered control/container; omitted means no selector.
+     */
     testId?: string;
 }
+/**
+ * Renders a fixed floating action button that expands when label content is supplied.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FAB composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title="Contact"><MobileInput label="Name" /><MobileSelect label="Method" defaultValue="email" options={[{ value: "email", label: "Email" }]} /><MobileButton type="submit">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label="Create" /></>);
+ * }
+ * ```
+ */
 declare const FAB: React.ForwardRefExoticComponent<Omit<FABProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };