@alneas/appkit-react 0.2.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":["React","React$1","Layout","_isLeftSidebarCollapsed","mainLabel","props","HeaderContent","header","FooterContent","footer","SidebarContent","leftSidebar","RightPaneContent","rightPane","isRightPaneVisible","MainContent","scrollable","cn","selectable","headerPosition","className"],"sources":["../../../../src/ui/components/ui/layout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Viewport regions and flex/scroll options for Layout.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Layout\n */\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content in the non-scrolling top flex region; omitted means no header.\n   */\n  header?: React.ReactNode;\n  /**\n   * Content in the non-scrolling bottom flex region; omitted means no footer.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Sidebar element rendered directly; it controls its own width and collapse behavior.\n   */\n  leftSidebar?: React.ReactNode;\n  /**\n   * Optional content in the right aside, visible when isRightPaneVisible is true.\n   */\n  rightPane?: React.ReactNode;\n  /**\n   * Compatibility flag accepted but ignored by Layout; it does not change sidebar width.\n   */\n  isLeftSidebarCollapsed?: boolean;\n  /**\n   * Whether rightPane is mounted; defaults to true.\n   */\n  isRightPaneVisible?: boolean;\n  /**\n   * Enables overflow-y-auto on the main area; defaults to true.\n   */\n  scrollable?: boolean;\n  /**\n   * Allows main-area text selection; defaults to true, false adds select-none.\n   */\n  selectable?: boolean;\n  /**\n   * top places header above sidebar; right-of-sidebar places it beside sidebar. Defaults to top.\n   */\n  headerPosition?: 'top' | 'right-of-sidebar';\n}\n\n/**\n * Divides the viewport into fixed flex header/footer, a growing main area and optional side panes.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: _isLeftSidebarCollapsed=false, isRightPaneVisible=true, scrollable=true, selectable=true, headerPosition='top'.\n * @returns The rendered Layout composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The root uses h-screen/w-screen and clips overflow. scrollable and selectable default to true; the right pane overlays content below lg and sits in normal layout from lg. headerPosition defaults to top; right-of-sidebar moves header/footer beside the sidebar. isLeftSidebarCollapsed is accepted but ignored; the supplied sidebar owns its own collapse behavior. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Layout } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Layout header={<header>Project</header>} footer={<footer>Status</footer>} leftSidebar={<nav>Navigation</nav>} rightPane={<aside>Details</aside>}><p>Main content</p></Layout>);\n * }\n * ```\n */\nexport const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(\n  (\n    {\n      className,\n      header,\n      footer,\n      leftSidebar,\n      rightPane,\n      children,\n      isLeftSidebarCollapsed: _isLeftSidebarCollapsed = false,\n      isRightPaneVisible = true,\n      scrollable = true,\n      'aria-label': mainLabel = 'Main content',\n      selectable = true,\n      headerPosition = 'top',\n      ...props\n    },\n    ref,\n  ) => {\n    const HeaderContent = header && <div className='flex-none z-10 w-full'>{header}</div>;\n\n    const FooterContent = footer && <div className='flex-none z-10 w-full'>{footer}</div>;\n\n    // Render sidebar directly without aside wrapper - Sidebar component has its own container structure\n    const SidebarContent = leftSidebar;\n\n    const RightPaneContent = rightPane && isRightPaneVisible && (\n      <aside className='flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none'>\n        {rightPane}\n      </aside>\n    );\n\n    const MainContent = (\n      <main\n        aria-label={mainLabel}\n        tabIndex={scrollable ? 0 : undefined}\n        className={cn(\n          'flex-1 min-w-0 flex flex-col',\n          scrollable ? 'overflow-y-auto' : 'overflow-hidden',\n          !selectable && 'select-none',\n        )}\n      >\n        {children}\n      </main>\n    );\n\n    if (headerPosition === 'right-of-sidebar') {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'flex h-screen w-screen overflow-hidden bg-background text-foreground',\n            className,\n          )}\n          {...props}\n        >\n          {SidebarContent}\n          <div className='flex flex-col flex-1 min-w-0 overflow-hidden'>\n            {HeaderContent}\n            <div className='flex flex-1 overflow-hidden relative'>\n              {MainContent}\n              {RightPaneContent}\n            </div>\n            {FooterContent}\n          </div>\n        </div>\n      );\n    }\n\n    // Default: headerPosition === 'top'\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {HeaderContent}\n        <div className='flex flex-1 overflow-hidden relative'>\n          {SidebarContent}\n          {MainContent}\n          {RightPaneContent}\n        </div>\n        {FooterContent}\n      </div>\n    );\n  },\n);\nLayout.displayName = 'Layout';\n"],"mappings":";;;;;AA8DA,IAAaE,IAASF,EAAM,YAExB,EACE,cACA,WACA,WACA,gBACA,cACA,aACA,wBAAwBG,IAA0B,IAClD,wBAAqB,IACrB,gBAAa,IACb,cAAcC,IAAY,gBAC1B,gBAAa,IACb,oBAAiB,OACjB,GAAGC,KAEL,MACG;CACH,IAAMC,IAAgBC,KAAU,kBAAC,OAAD;EAAK,WAAU;EAAyB,UAAAA;CAAY,CAAA,GAE9EC,IAAgBC,KAAU,kBAAC,OAAD;EAAK,WAAU;EAAyB,UAAAA;CAAY,CAAA,GAG9EC,IAAiBC,GAEjBC,IAAmBC,KAAaC,KACpC,kBAAC,SAAD;EAAO,WAAU;EACd,UAAAD;CACI,CAAA,GAGHE,IACJ,kBAAC,QAAD;EACE,cAAYX;EACZ,UAAUY,IAAa,IAAI,KAAA;EAC3B,WAAWC,EACT,gCACAD,IAAa,oBAAoB,mBACjC,CAACE,KAAc,aACjB;EAEC;CACG,CAAA;CA2BR,OAxBIC,MAAmB,qBAEnB,kBAAC,OAAD;EACO;EACL,WAAWF,EACT,wEACAG,CACF;EACA,GAAIf;EANN,UAAA,CAQGK,GACD,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACGJ;IACD,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGS,GACAH,CACE;;IACJJ;GACE;EACF,CAAA,CAAA;C,KAMP,kBAAC,OAAD;EACO;EACL,WAAWS,EACT,iFACAG,CACF;EACA,GAAIf;EANN,UAAA;GAQGC;GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACGI;KACAK;KACAH;IACE;;GACJJ;EACE;;AAET,CACF;AACA,EAAO,cAAc"}
+{"version":3,"file":"layout.js","names":["Layout","_isLeftSidebarCollapsed","mainLabel","props","HeaderContent","header","FooterContent","footer","SidebarContent","leftSidebar","RightPaneContent","rightPane","isRightPaneVisible","MainContent","scrollable","cn","selectable","headerPosition","className"],"sources":["../../../../src/ui/components/ui/layout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Viewport regions and flex/scroll options for Layout.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Layout\n */\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content in the non-scrolling top flex region; omitted means no header.\n   */\n  header?: React.ReactNode;\n  /**\n   * Content in the non-scrolling bottom flex region; omitted means no footer.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Sidebar element rendered directly; it controls its own width and collapse behavior.\n   */\n  leftSidebar?: React.ReactNode;\n  /**\n   * Optional content in the right aside, visible when isRightPaneVisible is true.\n   */\n  rightPane?: React.ReactNode;\n  /**\n   * Compatibility flag accepted but ignored by Layout; it does not change sidebar width.\n   */\n  isLeftSidebarCollapsed?: boolean;\n  /**\n   * Whether rightPane is mounted; defaults to true.\n   */\n  isRightPaneVisible?: boolean;\n  /**\n   * Enables overflow-y-auto on the main area; defaults to true.\n   */\n  scrollable?: boolean;\n  /**\n   * Allows main-area text selection; defaults to true, false adds select-none.\n   */\n  selectable?: boolean;\n  /**\n   * top places header above sidebar; right-of-sidebar places it beside sidebar. Defaults to top.\n   */\n  headerPosition?: 'top' | 'right-of-sidebar';\n}\n\n/**\n * Divides the viewport into fixed flex header/footer, a growing main area and optional side panes.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: _isLeftSidebarCollapsed=false, isRightPaneVisible=true, scrollable=true, selectable=true, headerPosition='top'.\n * @returns The rendered Layout composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The root uses h-screen/w-screen and clips overflow. scrollable and selectable default to true; the right pane overlays content below lg and sits in normal layout from lg. headerPosition defaults to top; right-of-sidebar moves header/footer beside the sidebar. isLeftSidebarCollapsed is accepted but ignored; the supplied sidebar owns its own collapse behavior. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Layout } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Layout header={<header>Project</header>} footer={<footer>Status</footer>} leftSidebar={<nav>Navigation</nav>} rightPane={<aside>Details</aside>}><p>Main content</p></Layout>);\n * }\n * ```\n */\nexport function Layout({\n  ref,\n  className,\n  header,\n  footer,\n  leftSidebar,\n  rightPane,\n  children,\n  isLeftSidebarCollapsed: _isLeftSidebarCollapsed = false,\n  isRightPaneVisible = true,\n  scrollable = true,\n  'aria-label': mainLabel = 'Main content',\n  selectable = true,\n  headerPosition = 'top',\n  ...props\n}: React.PropsWithoutRef<LayoutProps> & React.RefAttributes<HTMLDivElement>) {\n  const HeaderContent = header && <div className='flex-none z-10 w-full'>{header}</div>;\n\n  const FooterContent = footer && <div className='flex-none z-10 w-full'>{footer}</div>;\n\n  // Render sidebar directly without aside wrapper - Sidebar component has its own container structure\n  const SidebarContent = leftSidebar;\n\n  const RightPaneContent = rightPane && isRightPaneVisible && (\n    <aside className='flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none'>\n      {rightPane}\n    </aside>\n  );\n\n  const MainContent = (\n    <main\n      aria-label={mainLabel}\n      tabIndex={scrollable ? 0 : undefined}\n      className={cn(\n        'flex-1 min-w-0 flex flex-col',\n        scrollable ? 'overflow-y-auto' : 'overflow-hidden',\n        !selectable && 'select-none',\n      )}\n    >\n      {children}\n    </main>\n  );\n\n  if (headerPosition === 'right-of-sidebar') {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-screen w-screen overflow-hidden bg-background text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {SidebarContent}\n        <div className='flex flex-col flex-1 min-w-0 overflow-hidden'>\n          {HeaderContent}\n          <div className='flex flex-1 overflow-hidden relative'>\n            {MainContent}\n            {RightPaneContent}\n          </div>\n          {FooterContent}\n        </div>\n      </div>\n    );\n  }\n\n  // Default: headerPosition === 'top'\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {HeaderContent}\n      <div className='flex flex-1 overflow-hidden relative'>\n        {SidebarContent}\n        {MainContent}\n        {RightPaneContent}\n      </div>\n      {FooterContent}\n    </div>\n  );\n}\nLayout.displayName = 'Layout';\n"],"mappings":";;;;;AA8DA,SAAgBA,EAAO,EACrB,QACA,cACA,WACA,WACA,gBACA,cACA,aACA,wBAAwBC,IAA0B,IAClD,wBAAqB,IACrB,gBAAa,IACb,cAAcC,IAAY,gBAC1B,gBAAa,IACb,oBAAiB,OACjB,GAAGC,KACwE;CAC3E,IAAMC,IAAgBC,KAAU,kBAAC,OAAD;EAAK,WAAU;EAAyB,UAAAA;CAAY,CAAA,GAE9EC,IAAgBC,KAAU,kBAAC,OAAD;EAAK,WAAU;EAAyB,UAAAA;CAAY,CAAA,GAG9EC,IAAiBC,GAEjBC,IAAmBC,KAAaC,KACpC,kBAAC,SAAD;EAAO,WAAU;EACd,UAAAD;CACI,CAAA,GAGHE,IACJ,kBAAC,QAAD;EACE,cAAYX;EACZ,UAAUY,IAAa,IAAI,KAAA;EAC3B,WAAWC,EACT,gCACAD,IAAa,oBAAoB,mBACjC,CAACE,KAAc,aACjB;EAEC;CACG,CAAA;CA2BR,OAxBIC,MAAmB,qBAEnB,kBAAC,OAAD;EACO;EACL,WAAWF,EACT,wEACAG,CACF;EACA,GAAIf;EANN,UAAA,CAQGK,GACD,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACGJ;IACD,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGS,GACAH,CACE;;IACJJ;GACE;EACF,CAAA,CAAA;C,KAMP,kBAAC,OAAD;EACO;EACL,WAAWS,EACT,iFACAG,CACF;EACA,GAAIf;EANN,UAAA;GAQGC;GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACGI;KACAK;KACAH;IACE;;GACJJ;EACE;;AAET;AACA,EAAO,cAAc"}

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

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./mobile-form-variants.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("@base-ui/react/button"),s=require("@base-ui/react/input");var c=i.forwardRef(({className:e,testId:n,...i},a)=>(0,r.jsx)(`form`,{ref:a,"data-slot":`mobile-form`,"data-testid":n,className:t.cn(`space-y-4 px-4 pb-safe`,e),...i}));c.displayName=`MobileForm`;var l=i.forwardRef(({title:e,description:n,className:i,children:a,...o},s)=>(0,r.jsxs)(`div`,{ref:s,"data-slot":`mobile-form-section`,className:t.cn(`space-y-3`,i),...o,children:[(e||n)&&(0,r.jsxs)(`div`,{className:`space-y-1`,children:[e&&(0,r.jsx)(`h3`,{className:`text-sm font-medium text-foreground`,children:e}),n&&(0,r.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:n})]}),(0,r.jsx)(`div`,{className:`space-y-3`,children:a})]}));l.displayName=`MobileFormSection`;var u=i.forwardRef(({label:e,error:n,helperText:a,icon:o,className:c,testId:l,...u},d)=>{let f=i.useId(),p=u.id??f,m=p+`-description`,{children:h,...g}=u;return(0,r.jsxs)(`div`,{className:`space-y-1.5`,"data-slot":`mobile-input-wrapper`,children:[(0,r.jsx)(`label`,{htmlFor:p,className:`text-sm font-medium text-foreground`,children:e}),(0,r.jsxs)(`div`,{className:`relative`,children:[o&&(0,r.jsx)(`div`,{className:`absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground`,children:o}),(0,r.jsx)(s.Input,{ref:d,"data-slot":`mobile-input`,"data-testid":l,"aria-invalid":!!n,className:t.cn(`w-full h-12 px-4 text-base rounded-lg border bg-background`,`transition-colors outline-none`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`,`aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,`placeholder:text-muted-foreground`,o&&`pl-10`,c),...g,id:p,"aria-describedby":[u[`aria-describedby`],(n||a)&&m].filter(Boolean).join(` `)||void 0})]}),n&&(0,r.jsx)(`p`,{id:m,className:`text-xs text-destructive`,children:n}),a&&!n&&(0,r.jsx)(`p`,{id:m,className:`text-xs text-muted-foreground`,children:a})]})});u.displayName=`MobileInput`;var d=i.forwardRef(({label:e,options:n,error:a,placeholder:o,className:s,testId:c,...l},u)=>{let d=i.useId(),f=l.id??d,p=f+`-description`;return(0,r.jsxs)(`div`,{className:`space-y-1.5`,"data-slot":`mobile-select-wrapper`,children:[(0,r.jsx)(`label`,{htmlFor:f,className:`text-sm font-medium text-foreground`,children:e}),(0,r.jsxs)(`select`,{ref:u,"data-slot":`mobile-select`,"data-testid":c,"aria-invalid":!!a,className:t.cn(`w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none`,`transition-colors outline-none`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`,`aria-invalid:border-destructive aria-invalid:ring-[3px]`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,s),...l,id:f,"aria-describedby":[l[`aria-describedby`],a&&p].filter(Boolean).join(` `)||void 0,children:[o&&(0,r.jsx)(`option`,{value:``,disabled:!0,children:o}),n.map(e=>(0,r.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),a&&(0,r.jsx)(`p`,{id:p,className:`text-xs text-destructive`,children:a})]})});d.displayName=`MobileSelect`;var f=i.forwardRef(({className:e,variant:i,size:s,loading:c,icon:l,disabled:u,children:d,testId:f,...p},m)=>(0,r.jsxs)(o.Button,{ref:m,"data-slot":`mobile-button`,"data-testid":f,"data-loading":c||void 0,"aria-busy":c||void 0,disabled:u||c,className:typeof e==`function`?r=>t.cn(n.mobileButtonVariants({variant:i,size:s}),e(r)):t.cn(n.mobileButtonVariants({variant:i,size:s,className:e})),...p,children:[c?(0,r.jsx)(a.Loader2,{className:`animate-spin`,"aria-hidden":`true`}):l,d]}));f.displayName=`MobileButton`;var p=i.forwardRef(({icon:e,label:i,position:a,extended:s,className:c,testId:l,...u},d)=>(0,r.jsxs)(o.Button,{ref:d,"data-slot":`fab`,"data-testid":l,className:typeof c==`function`?e=>t.cn(n.fabVariants({position:a,extended:s||!!i}),c(e)):t.cn(n.fabVariants({position:a,extended:s||!!i,className:c})),...u,children:[e,(s||i)&&i&&(0,r.jsx)(`span`,{className:`font-medium`,children:i})]}));p.displayName=`FAB`,exports.FAB=p,exports.MobileButton=f,exports.MobileForm=c,exports.MobileFormSection=l,exports.MobileInput=u,exports.MobileSelect=d;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./mobile-form-variants.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("@base-ui/react/button"),s=require("@base-ui/react/input");function c({ref:e,className:n,testId:i,...a}){return(0,r.jsx)(`form`,{ref:e,"data-slot":`mobile-form`,"data-testid":i,className:t.cn(`space-y-4 px-4 pb-safe`,n),...a})}c.displayName=`MobileForm`;function l({ref:e,title:n,description:i,className:a,children:o,...s}){return(0,r.jsxs)(`div`,{ref:e,"data-slot":`mobile-form-section`,className:t.cn(`space-y-3`,a),...s,children:[(n||i)&&(0,r.jsxs)(`div`,{className:`space-y-1`,children:[n&&(0,r.jsx)(`h3`,{className:`text-sm font-medium text-foreground`,children:n}),i&&(0,r.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:i})]}),(0,r.jsx)(`div`,{className:`space-y-3`,children:o})]})}l.displayName=`MobileFormSection`;function u({ref:e,label:n,error:a,helperText:o,icon:c,className:l,testId:u,...d}){let f=i.useId(),p=d.id??f,m=p+`-description`,{children:h,...g}=d;return(0,r.jsxs)(`div`,{className:`space-y-1.5`,"data-slot":`mobile-input-wrapper`,children:[(0,r.jsx)(`label`,{htmlFor:p,className:`text-sm font-medium text-foreground`,children:n}),(0,r.jsxs)(`div`,{className:`relative`,children:[c&&(0,r.jsx)(`div`,{className:`absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground`,children:c}),(0,r.jsx)(s.Input,{ref:e,"data-slot":`mobile-input`,"data-testid":u,"aria-invalid":!!a,className:t.cn(`w-full h-12 px-4 text-base rounded-lg border bg-background`,`transition-colors outline-none`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`,`aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,`placeholder:text-muted-foreground`,c&&`pl-10`,l),...g,id:p,"aria-describedby":[d[`aria-describedby`],(a||o)&&m].filter(Boolean).join(` `)||void 0})]}),a&&(0,r.jsx)(`p`,{id:m,className:`text-xs text-destructive`,children:a}),o&&!a&&(0,r.jsx)(`p`,{id:m,className:`text-xs text-muted-foreground`,children:o})]})}u.displayName=`MobileInput`;function d({ref:e,label:n,options:a,error:o,placeholder:s,className:c,testId:l,...u}){let d=i.useId(),f=u.id??d,p=f+`-description`;return(0,r.jsxs)(`div`,{className:`space-y-1.5`,"data-slot":`mobile-select-wrapper`,children:[(0,r.jsx)(`label`,{htmlFor:f,className:`text-sm font-medium text-foreground`,children:n}),(0,r.jsxs)(`select`,{ref:e,"data-slot":`mobile-select`,"data-testid":l,"aria-invalid":!!o,className:t.cn(`w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none`,`transition-colors outline-none`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`,`aria-invalid:border-destructive aria-invalid:ring-[3px]`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,c),...u,id:f,"aria-describedby":[u[`aria-describedby`],o&&p].filter(Boolean).join(` `)||void 0,children:[s&&(0,r.jsx)(`option`,{value:``,disabled:!0,children:s}),a.map(e=>(0,r.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),o&&(0,r.jsx)(`p`,{id:p,className:`text-xs text-destructive`,children:o})]})}d.displayName=`MobileSelect`;function f({ref:e,className:i,variant:s,size:c,loading:l,icon:u,disabled:d,children:f,testId:p,...m}){return(0,r.jsxs)(o.Button,{ref:e,"data-slot":`mobile-button`,"data-testid":p,"data-loading":l||void 0,"aria-busy":l||void 0,disabled:d||l,className:typeof i==`function`?e=>t.cn(n.mobileButtonVariants({variant:s,size:c}),i(e)):t.cn(n.mobileButtonVariants({variant:s,size:c,className:i})),...m,children:[l?(0,r.jsx)(a.Loader2,{className:`animate-spin`,"aria-hidden":`true`}):u,f]})}f.displayName=`MobileButton`;function p({ref:e,icon:i,label:a,position:s,extended:c,className:l,testId:u,...d}){return(0,r.jsxs)(o.Button,{ref:e,"data-slot":`fab`,"data-testid":u,className:typeof l==`function`?e=>t.cn(n.fabVariants({position:s,extended:c||!!a}),l(e)):t.cn(n.fabVariants({position:s,extended:c||!!a,className:l})),...d,children:[i,(c||a)&&a&&(0,r.jsx)(`span`,{className:`font-medium`,children:a})]})}p.displayName=`FAB`,exports.FAB=p,exports.MobileButton=f,exports.MobileForm=c,exports.MobileFormSection=l,exports.MobileInput=u,exports.MobileSelect=d;
 //# sourceMappingURL=mobile-form.cjs.map

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":["/** 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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"}
+{"version":3,"file":"mobile-form.cjs","names":["cn","React","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 */\nfunction MobileForm({\n  ref,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileFormProps> & React.RefAttributes<HTMLFormElement>) {\n  return (\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 */\nfunction MobileFormSection({\n  ref,\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<MobileFormSectionProps> & React.RefAttributes<HTMLDivElement>) {\n  return (\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 */\nfunction MobileInput({\n  ref,\n  label,\n  error,\n  helperText,\n  icon,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileInputProps> & React.RefAttributes<HTMLInputElement>) {\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 { children: _children, ...restProps } = 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'>\n        {label}\n      </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={\n            [props['aria-describedby'], (error || helperText) && descriptionId]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n        />\n      </div>\n      {error && (\n        <p id={descriptionId} className='text-xs text-destructive'>\n          {error}\n        </p>\n      )}\n      {helperText && !error && (\n        <p id={descriptionId} className='text-xs text-muted-foreground'>\n          {helperText}\n        </p>\n      )}\n    </div>\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 */\nfunction MobileSelect({\n  ref,\n  label,\n  options,\n  error,\n  placeholder,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileSelectProps> & React.RefAttributes<HTMLSelectElement>) {\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'>\n        {label}\n      </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={\n          [props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined\n        }\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 && (\n        <p id={descriptionId} className='text-xs text-destructive'>\n          {error}\n        </p>\n      )}\n    </div>\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 */\nfunction MobileButton({\n  ref,\n  className,\n  variant,\n  size,\n  loading,\n  icon,\n  disabled,\n  children,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileButtonProps> & React.RefAttributes<HTMLElement>) {\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={\n        typeof className === 'function'\n          ? (state) => cn(mobileButtonVariants({ variant, size }), className(state))\n          : cn(mobileButtonVariants({ variant, size, className }))\n      }\n      {...props}\n    >\n      {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n      {children}\n    </ButtonPrimitive>\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 */\nfunction FAB({\n  ref,\n  icon,\n  label,\n  position,\n  extended,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<FABProps> & React.RefAttributes<HTMLElement>) {\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={\n        typeof className === 'function'\n          ? (state) =>\n              cn(fabVariants({ position, extended: extended || !!label }), className(state))\n          : cn(fabVariants({ position, extended: extended || !!label, className }))\n      }\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":"A,8XA0CA,SAASe,EAAW,CAClB,MACA,YACA,SACA,GAAGC,GAC6E,CAChF,OACE,EAAAN,EAAA,IAAA,CAAC,OAAD,CACO,MACL,YAAU,cACV,cAAaO,EACb,UAAWjB,EAAAA,GAAG,yBAA0BkB,CAAS,EACjD,GAAIF,CACL,CAAA,CAEL,CACA,EAAW,YAAc,aAqCzB,SAASG,EAAkB,CACzB,MACA,QACA,cACA,YACA,WACA,GAAGH,GACmF,CACtF,OACE,EAAAN,EAAA,KAAA,CAAC,MAAD,CACO,MACL,YAAU,sBACV,UAAWV,EAAAA,GAAG,YAAakB,CAAS,EACpC,GAAIF,EAJN,SAAA,EAMII,GAASC,KACT,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,YAAf,SAAA,CACGU,IAAS,EAAAV,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,sCAAuC,SAAAU,CAAU,CAAA,EACxEC,IAAe,EAAAX,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,gCAAiC,SAAAW,CAAe,CAAA,CAC1E,CAEP,CAAA,GAAA,EAAAX,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,YAAa,UAAc,CAAA,CACvC,C,EAET,CACA,EAAkB,YAAc,oBAiDhC,SAASY,EAAY,CACnB,MACA,QACA,QACA,aACA,OACA,YACA,SACA,GAAGN,GAC+E,CAClF,IAAMO,EAActB,EAAM,MAAM,EAC1BuB,EAAYR,EAAM,IAAMO,EACxBE,EAAgBD,EAAY,eAE5B,CAAE,SAAUE,EAAW,GAAGC,GAAcX,EAI9C,OACE,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,cAAc,YAAU,uBAAvC,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAASc,EAAW,UAAU,sCAClC,SAAAI,CACI,CAAA,GACP,EAAAlB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACGmB,IACC,EAAAnB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iEACZ,SAAAmB,CACE,CAAA,GAEP,EAAAnB,EAAA,IAAA,CAACR,EAAAA,MAAD,CACO,MACL,YAAU,eACV,cAAae,EACb,eAAc,CAAC,CAACa,EAChB,UAAW9B,EAAAA,GAET,6DACA,iCAEA,gFAEA,yEACA,kGAEA,+EAEA,oCAEA6B,GAAQ,QACRX,CACF,EACA,GAAIS,EACJ,GAAIH,EACJ,mBACE,CAACR,EAAM,qBAAsBc,GAASC,IAAeN,CAAa,CAAC,CAChE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAAK,IAAA,EAEnB,CAAA,CACE,C,GACJK,IACC,EAAApB,EAAA,IAAA,CAAC,IAAD,CAAG,GAAIe,EAAe,UAAU,2BAC7B,SAAAK,CACA,CAAA,EAEJC,GAAc,CAACD,IACd,EAAApB,EAAA,IAAA,CAAC,IAAD,CAAG,GAAIe,EAAe,UAAU,gCAC7B,SAAAM,CACA,CAAA,CAEF,C,EAET,CACA,EAAY,YAAc,cA6D1B,SAASC,EAAa,CACpB,MACA,QACA,UACA,QACA,cACA,YACA,SACA,GAAGhB,GACiF,CACpF,IAAMO,EAActB,EAAM,MAAM,EAC1BuB,EAAYR,EAAM,IAAMO,EACxBE,EAAgBD,EAAY,eAClC,OACE,EAAAd,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,cAAc,YAAU,wBAAvC,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAASc,EAAW,UAAU,sCAClC,SAAAI,CACI,CAAA,GACP,EAAAlB,EAAA,KAAA,CAAC,SAAD,CACO,MACL,YAAU,gBACV,cAAaO,EACb,eAAc,CAAC,CAACa,EAChB,UAAW9B,EAAAA,GAET,6EACA,iCAEA,gFAEA,yEACA,0DAEA,+EACAkB,CACF,EACA,GAAIF,EACJ,GAAIQ,EACJ,mBACE,CAACR,EAAM,oBAAqBc,GAASL,CAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAAK,IAAA,GArBrF,SAAA,CAwBGQ,IACC,EAAAvB,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GACd,SAAAuB,CACK,CAAA,EAETC,EAAQ,IAAK,IACZ,EAAAxB,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAOyB,EAAI,MAChC,SAAAA,EAAI,KACC,EAFKA,EAAI,KAET,CACT,CACK,C,GACPL,IACC,EAAApB,EAAA,IAAA,CAAC,IAAD,CAAG,GAAIe,EAAe,UAAU,2BAC7B,SAAAK,CACA,CAAA,CAEF,C,EAET,CACA,EAAa,YAAc,eA0C3B,SAASM,EAAa,CACpB,MACA,YACA,UACA,OACA,UACA,OACA,WACA,WACA,SACA,GAAGpB,GAC2E,CAG9E,OACE,EAAAN,EAAA,KAAA,CAACP,EAAAA,OAAD,CACO,MACL,YAAU,gBACV,cAAac,EACb,eAAcoB,GAAW,IAAA,GACzB,YAAWA,GAAW,IAAA,GACtB,SATeC,GAAYD,EAU3B,UACE,OAAOnB,GAAc,WAChB,GAAUlB,EAAAA,GAAGI,EAAAA,qBAAqB,CAAE,UAAS,MAAK,CAAC,EAAGc,EAAUqB,CAAK,CAAC,EACvEvC,EAAAA,GAAGI,EAAAA,qBAAqB,CAAE,UAAS,OAAM,WAAU,CAAC,CAAC,EAE3D,GAAIY,EAZN,SAAA,CAcGqB,GAAU,EAAA3B,EAAA,IAAA,CAACL,EAAAA,QAAD,CAAS,UAAU,eAAe,cAAY,MAAQ,CAAA,EAAIwB,EACpEW,CACc,C,EAErB,CACA,EAAa,YAAc,eAyC3B,SAASC,EAAI,CACX,MACA,OACA,QACA,WACA,WACA,YACA,SACA,GAAGzB,GACkE,CACrE,OACE,EAAAN,EAAA,KAAA,CAACP,EAAAA,OAAD,CACO,MACL,YAAU,MACV,cAAac,EACb,UACE,OAAOC,GAAc,WAChB,GACClB,EAAAA,GAAGM,EAAAA,YAAY,CAAE,WAAU,SAAUoC,GAAY,CAAC,CAACd,CAAM,CAAC,EAAGV,EAAUqB,CAAK,CAAC,EAC/EvC,EAAAA,GAAGM,EAAAA,YAAY,CAAE,WAAU,SAAUoC,GAAY,CAAC,CAACd,EAAO,WAAU,CAAC,CAAC,EAE5E,GAAIZ,EAVN,SAAA,CAYGa,GACCa,GAAYd,IAAUA,IAAS,EAAAlB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,cAAe,SAAAkB,CAAY,CAAA,CAC7D,C,EAErB,CACA,EAAI,YAAc,M"}

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

@@ -30,7 +30,10 @@ export interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElemen
  * }
  * ```
  */
-declare const MobileForm: React.ForwardRefExoticComponent<MobileFormProps & React.RefAttributes<HTMLFormElement>>;
+declare function MobileForm({ ref, className, testId, ...props }: React.PropsWithoutRef<MobileFormProps> & React.RefAttributes<HTMLFormElement>): React.JSX.Element;
+declare namespace MobileForm {
+    var displayName: string;
+}
 /**
  * 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.
@@ -61,7 +64,10 @@ export interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElem
  * }
  * ```
  */
-declare const MobileFormSection: React.ForwardRefExoticComponent<MobileFormSectionProps & React.RefAttributes<HTMLDivElement>>;
+declare function MobileFormSection({ ref, title, description, className, children, ...props }: React.PropsWithoutRef<MobileFormSectionProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace MobileFormSection {
+    var displayName: string;
+}
 /**
  * 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.
@@ -104,7 +110,10 @@ export interface MobileInputProps extends React.ComponentProps<typeof InputPrimi
  * }
  * ```
  */
-declare const MobileInput: React.ForwardRefExoticComponent<Omit<MobileInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare function MobileInput({ ref, label, error, helperText, icon, className, testId, ...props }: React.PropsWithoutRef<MobileInputProps> & React.RefAttributes<HTMLInputElement>): React.JSX.Element;
+declare namespace MobileInput {
+    var displayName: string;
+}
 /**
  * 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.
@@ -158,7 +167,10 @@ export interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelect
  * }
  * ```
  */
-declare const MobileSelect: React.ForwardRefExoticComponent<MobileSelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare function MobileSelect({ ref, label, options, error, placeholder, className, testId, ...props }: React.PropsWithoutRef<MobileSelectProps> & React.RefAttributes<HTMLSelectElement>): React.JSX.Element;
+declare namespace MobileSelect {
+    var displayName: string;
+}
 /**
  * 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.
@@ -193,7 +205,10 @@ export interface MobileButtonProps extends ButtonPrimitive.Props, VariantProps<t
  * }
  * ```
  */
-declare const MobileButton: React.ForwardRefExoticComponent<Omit<MobileButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function MobileButton({ ref, className, variant, size, loading, icon, disabled, children, testId, ...props }: React.PropsWithoutRef<MobileButtonProps> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+declare namespace MobileButton {
+    var displayName: string;
+}
 /**
  * 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.
@@ -228,5 +243,8 @@ export interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fab
  * }
  * ```
  */
-declare const FAB: React.ForwardRefExoticComponent<Omit<FABProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function FAB({ ref, icon, label, position, extended, className, testId, ...props }: React.PropsWithoutRef<FABProps> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+declare namespace FAB {
+    var displayName: string;
+}
 export { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };

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

@@ -30,7 +30,10 @@ export interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElemen
  * }
  * ```
  */
-declare const MobileForm: React.ForwardRefExoticComponent<MobileFormProps & React.RefAttributes<HTMLFormElement>>;
+declare function MobileForm({ ref, className, testId, ...props }: React.PropsWithoutRef<MobileFormProps> & React.RefAttributes<HTMLFormElement>): React.JSX.Element;
+declare namespace MobileForm {
+    var displayName: string;
+}
 /**
  * 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.
@@ -61,7 +64,10 @@ export interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElem
  * }
  * ```
  */
-declare const MobileFormSection: React.ForwardRefExoticComponent<MobileFormSectionProps & React.RefAttributes<HTMLDivElement>>;
+declare function MobileFormSection({ ref, title, description, className, children, ...props }: React.PropsWithoutRef<MobileFormSectionProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace MobileFormSection {
+    var displayName: string;
+}
 /**
  * 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.
@@ -104,7 +110,10 @@ export interface MobileInputProps extends React.ComponentProps<typeof InputPrimi
  * }
  * ```
  */
-declare const MobileInput: React.ForwardRefExoticComponent<Omit<MobileInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare function MobileInput({ ref, label, error, helperText, icon, className, testId, ...props }: React.PropsWithoutRef<MobileInputProps> & React.RefAttributes<HTMLInputElement>): React.JSX.Element;
+declare namespace MobileInput {
+    var displayName: string;
+}
 /**
  * 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.
@@ -158,7 +167,10 @@ export interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelect
  * }
  * ```
  */
-declare const MobileSelect: React.ForwardRefExoticComponent<MobileSelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare function MobileSelect({ ref, label, options, error, placeholder, className, testId, ...props }: React.PropsWithoutRef<MobileSelectProps> & React.RefAttributes<HTMLSelectElement>): React.JSX.Element;
+declare namespace MobileSelect {
+    var displayName: string;
+}
 /**
  * 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.
@@ -193,7 +205,10 @@ export interface MobileButtonProps extends ButtonPrimitive.Props, VariantProps<t
  * }
  * ```
  */
-declare const MobileButton: React.ForwardRefExoticComponent<Omit<MobileButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function MobileButton({ ref, className, variant, size, loading, icon, disabled, children, testId, ...props }: React.PropsWithoutRef<MobileButtonProps> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+declare namespace MobileButton {
+    var displayName: string;
+}
 /**
  * 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.
@@ -228,5 +243,8 @@ export interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fab
  * }
  * ```
  */
-declare const FAB: React.ForwardRefExoticComponent<Omit<FABProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function FAB({ ref, icon, label, position, extended, className, testId, ...props }: React.PropsWithoutRef<FABProps> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+declare namespace FAB {
+    var displayName: string;
+}
 export { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };