@cryptlex/web-components 6.6.6-alpha19 → 6.6.6-alpha21

package/dist/components/dialog.js

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as u}from"class-variance-authority";import{DialogTrigger as c,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcClose as N}from"./icons.js";import"./loader.js";import"clsx";import"react";const D=u(["fixed z-50 gap-icon bg-popover transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),O=c,P=({className:t,isDismissable:e=!0,...n})=>a(x,{isDismissable:e,className:l(t,o=>i("fixed inset-0 z-50 bg-popover/20","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",o)),...n});function k({className:t,children:e,side:n,role:o,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(n?D({side:n,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:o,className:i(!n&&"grid h-full gap-icon relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-2 top-1",children:s(v,{size:"icon",variant:"neutral",onPress:m.close,className:"rounded-full",children:[a(N,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function B({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function I({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function R({className:t,...e}){return a(b,{slot:"title",className:i("heading-3 font-semibold leading-none tracking-tight",t),...e})}function V({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{k as DialogContent,V as DialogDescription,I as DialogFooter,B as DialogHeader,P as DialogOverlay,R as DialogTitle,O as DialogTrigger};
+import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as u}from"class-variance-authority";import{DialogTrigger as c,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcClose as N}from"./icons.js";import"./loader.js";import"clsx";import"react";const D=u(["fixed z-50 gap-icon bg-elevation-1 transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),M=c,O=({className:t,isDismissable:e=!0,...n})=>a(x,{isDismissable:e,className:l(t,o=>i("fixed inset-0 z-50 bg-background/10","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",o)),...n});function P({className:t,children:e,side:n,role:o,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(n?D({side:n,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-elevation-1 p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:o,className:i(!n&&"grid h-full gap-icon relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-2 top-1",children:s(v,{size:"icon",variant:"neutral",onPress:m.close,className:"rounded-full",children:[a(N,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function B({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function I({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function R({className:t,...e}){return a(b,{slot:"title",className:i("heading-3 font-semibold leading-none tracking-tight",t),...e})}function V({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{P as DialogContent,V as DialogDescription,I as DialogFooter,B as DialogHeader,O as DialogOverlay,R as DialogTitle,M as DialogTrigger};
 //# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-popover transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>...</DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => (\n    <AriaModalOverlay\n        isDismissable={isDismissable}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'fixed inset-0 z-50 bg-popover/20',\n                /* Exiting */\n                'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                /* Entering */\n                'data-[entering]:animate-in',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    /**\n     * Render function or nodes for the dialog panel contents.\n     */\n    children?: AriaDialogProps['children'];\n\n    /**\n     * ARIA role of the dialog.\n     *\n     * Use `\"alertdialog\"` for destructive/confirmation flows that require\n     * explicit acknowledgement.\n     * @defaultValue \"dialog\"\n     */\n    role?: AriaDialogProps['role'];\n\n    /**\n     * Show a built-in close button in the top-right corner.\n     * @defaultValue true\n     */\n    closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>\n *       <DialogHeader>\n *         <DialogTitle>Sign up</DialogTitle>\n *       </DialogHeader>\n *       ...\n *     </DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    return (\n        <AriaModal\n            className={composeRenderProps(className, className =>\n                classNames(\n                    side\n                        ? sheetVariants({ side, className: 'h-full p-6' })\n                        : [\n                              'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                          ],\n                    className\n                )\n            )}\n            {...props}\n        >\n            <AriaDialog\n                role={role}\n                className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n            >\n                {composeRenderProps(children, (children, renderProps) => (\n                    <>\n                        {children}\n                        {closeButton && (\n                            <div className=\"absolute right-2 top-1\">\n                                <Button\n                                    size={'icon'}\n                                    variant={'neutral'}\n                                    onPress={renderProps.close}\n                                    className=\"rounded-full\"\n                                >\n                                    <IcClose />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            </div>\n                        )}\n                    </>\n                ))}\n            </AriaDialog>\n        </AriaModal>\n    );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={classNames('flex flex-col gap-y-2 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n *   This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription"],"mappings":"+ZAuBA,MAAMA,EAAgBC,EAClB,CACI,wDACA,qKAAA,EAEJ,CACI,SAAU,CACN,KAAM,CACF,IAAK,yGACL,OAAQ,kHACR,KAAM,yHACN,MAAO,4HAAA,CACX,CACJ,CAER,EAkBaC,EAAgBC,EAEhBC,EAAgB,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAgB,GAAM,GAAGC,KAChEC,EAACC,EAAA,CACG,cAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,mCAEA,yDAEA,6BACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EA+CG,SAASK,EAAc,CAAE,UAAAP,EAAW,SAAAQ,EAAU,KAAAC,EAAM,KAAAC,EAAM,YAAAC,EAAc,GAAM,GAAGT,GAA6B,CACjH,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBL,EAAWA,GACrCM,EACIG,EACMd,EAAc,CAAE,KAAAc,EAAM,UAAW,YAAA,CAAc,EAC/C,CACI,8TAAA,EAEVT,CAAA,CACJ,EAEH,GAAGE,EAEJ,SAAAC,EAACU,EAAA,CACG,KAAAH,EACA,UAAWJ,EAAW,CAACG,GAAQ,gCAAiC,qBAAqB,EAEpF,SAAAJ,EAAmBG,EAAU,CAACA,EAAUM,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAR,EACAG,GACGR,EAAC,MAAA,CAAI,UAAU,yBACX,SAAAY,EAACE,EAAA,CACG,KAAM,OACN,QAAS,UACT,QAASH,EAAY,MACrB,UAAU,eAEV,SAAA,CAAAX,EAACe,EAAA,EAAQ,EACTf,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,CACJ,CAAA,EAER,CACH,CAAA,CAAA,CACL,CAAA,CAGZ,CAYO,SAASgB,EAAa,CAAE,UAAAnB,EAAW,GAAGE,GAA+C,CACxF,OAAOC,EAAC,OAAI,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC/G,CAaO,SAASkB,EAAa,CAAE,UAAApB,EAAW,GAAGE,GAA+C,CACxF,OACIC,EAAC,MAAA,CACG,UAAWG,EAAW,8DAA+DN,CAAS,EAC7F,GAAGE,CAAA,CAAA,CAGhB,CAQO,SAASmB,EAAY,CAAE,UAAArB,EAAW,GAAGE,GAA2B,CACnE,OACIC,EAACmB,EAAA,CACG,KAAK,QACL,UAAWhB,EAAW,sDAAuDN,CAAS,EACrF,GAAGE,CAAA,CAAA,CAGhB,CAYO,SAASqB,EAAkB,CAAE,UAAAvB,EAAW,GAAGE,GAAqD,CACnG,OAAOC,EAAC,KAAE,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC7G"}
+{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-elevation-1 transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>...</DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => (\n    <AriaModalOverlay\n        isDismissable={isDismissable}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'fixed inset-0 z-50 bg-background/10',\n                /* Exiting */\n                'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                /* Entering */\n                'data-[entering]:animate-in',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    /**\n     * Render function or nodes for the dialog panel contents.\n     */\n    children?: AriaDialogProps['children'];\n\n    /**\n     * ARIA role of the dialog.\n     *\n     * Use `\"alertdialog\"` for destructive/confirmation flows that require\n     * explicit acknowledgement.\n     * @defaultValue \"dialog\"\n     */\n    role?: AriaDialogProps['role'];\n\n    /**\n     * Show a built-in close button in the top-right corner.\n     * @defaultValue true\n     */\n    closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>\n *       <DialogHeader>\n *         <DialogTitle>Sign up</DialogTitle>\n *       </DialogHeader>\n *       ...\n *     </DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    return (\n        <AriaModal\n            className={composeRenderProps(className, className =>\n                classNames(\n                    side\n                        ? sheetVariants({ side, className: 'h-full p-6' })\n                        : [\n                              'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-elevation-1 p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                          ],\n                    className\n                )\n            )}\n            {...props}\n        >\n            <AriaDialog\n                role={role}\n                className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n            >\n                {composeRenderProps(children, (children, renderProps) => (\n                    <>\n                        {children}\n                        {closeButton && (\n                            <div className=\"absolute right-2 top-1\">\n                                <Button\n                                    size={'icon'}\n                                    variant={'neutral'}\n                                    onPress={renderProps.close}\n                                    className=\"rounded-full\"\n                                >\n                                    <IcClose />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            </div>\n                        )}\n                    </>\n                ))}\n            </AriaDialog>\n        </AriaModal>\n    );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={classNames('flex flex-col gap-y-2 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n *   This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription"],"mappings":"+ZAuBA,MAAMA,EAAgBC,EAClB,CACI,4DACA,qKAAA,EAEJ,CACI,SAAU,CACN,KAAM,CACF,IAAK,yGACL,OAAQ,kHACR,KAAM,yHACN,MAAO,4HAAA,CACX,CACJ,CAER,EAkBaC,EAAgBC,EAEhBC,EAAgB,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAgB,GAAM,GAAGC,KAChEC,EAACC,EAAA,CACG,cAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,sCAEA,yDAEA,6BACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EA+CG,SAASK,EAAc,CAAE,UAAAP,EAAW,SAAAQ,EAAU,KAAAC,EAAM,KAAAC,EAAM,YAAAC,EAAc,GAAM,GAAGT,GAA6B,CACjH,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBL,EAAWA,GACrCM,EACIG,EACMd,EAAc,CAAE,KAAAc,EAAM,UAAW,YAAA,CAAc,EAC/C,CACI,kUAAA,EAEVT,CAAA,CACJ,EAEH,GAAGE,EAEJ,SAAAC,EAACU,EAAA,CACG,KAAAH,EACA,UAAWJ,EAAW,CAACG,GAAQ,gCAAiC,qBAAqB,EAEpF,SAAAJ,EAAmBG,EAAU,CAACA,EAAUM,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAR,EACAG,GACGR,EAAC,MAAA,CAAI,UAAU,yBACX,SAAAY,EAACE,EAAA,CACG,KAAM,OACN,QAAS,UACT,QAASH,EAAY,MACrB,UAAU,eAEV,SAAA,CAAAX,EAACe,EAAA,EAAQ,EACTf,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,CACJ,CAAA,EAER,CACH,CAAA,CAAA,CACL,CAAA,CAGZ,CAYO,SAASgB,EAAa,CAAE,UAAAnB,EAAW,GAAGE,GAA+C,CACxF,OAAOC,EAAC,OAAI,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC/G,CAaO,SAASkB,EAAa,CAAE,UAAApB,EAAW,GAAGE,GAA+C,CACxF,OACIC,EAAC,MAAA,CACG,UAAWG,EAAW,8DAA+DN,CAAS,EAC7F,GAAGE,CAAA,CAAA,CAGhB,CAQO,SAASmB,EAAY,CAAE,UAAArB,EAAW,GAAGE,GAA2B,CACnE,OACIC,EAACmB,EAAA,CACG,KAAK,QACL,UAAWhB,EAAW,sDAAuDN,CAAS,EACrF,GAAGE,CAAA,CAAA,CAGhB,CAYO,SAASqB,EAAkB,CAAE,UAAAvB,EAAW,GAAGE,GAAqD,CACnG,OAAOC,EAAC,KAAE,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC7G"}

package/dist/components/form.d.ts

@@ -27,7 +27,7 @@ export declare function FormFieldDescription({ className, children, ...props }:
  * This approach needs further discussion and exploration.
  *
  */
-export declare function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>): import("react/jsx-runtime").JSX.Element;
 /**
  * Class variance authority variants for field groups.
  * Provides styling variants for different types of form field containers.
@@ -52,18 +52,22 @@ export declare function FieldGroup({ className, variant, ...props }: GroupProps)
  */
 export type FormFieldProps = {
     /** Optional label text for the form field */
-    label?: string;
+    label?: React.ReactNode;
     /** Optional description or help text */
     description?: React.ReactNode;
     /** Optional error message to display */
     errorMessage?: string;
+    /** Show required indicator on field label */
+    requiredIndicator?: boolean;
+    /** Not defining the htmlFor on labels will lead to accessibilty warnings */
+    htmlFor?: string;
 };
 /**
  * A wrapper component for form fields that provides consistent layout and styling.
  * Automatically renders label, children, description, and error message in the correct order.
  * @returns A complete form field with all associated elements
  */
-export declare function FormField({ label, description, errorMessage, children, }: FormFieldProps & {
+export declare function FormField({ label, description, errorMessage, children, requiredIndicator, htmlFor, }: FormFieldProps & {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 /**
@@ -85,3 +89,5 @@ export declare function FormSection({ className, ...props }: React.ComponentProp
  * A title component for form sections.
  */
 export declare function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>): import("react/jsx-runtime").JSX.Element;
+export declare function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+export declare function FormLayout({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as a,Fragment as m,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as d,composeRenderProps as l,Label as c,Text as u,Button as f}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{IcInfo as p,IcError as g}from"./icons.js";import"clsx";import"react";const b=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function h({className:e,...t}){return r(c,{className:i(b(),e),...t})}function x({className:e,children:t,...n}){return a(u,{className:i("body-sm text-muted leading-tight",e),...n,slot:"description",children:[t,r(p,{className:"inline size-2 align-text-top ms-0.5"})]})}function F({className:e,children:t,...n}){return a("div",{className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",e),...n,children:[t,r(g,{className:"inline size-2 align-text-top ms-0.5"})]})}const v=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function w({className:e,variant:t,...n}){return r(d,{className:l(e,o=>i(v({variant:t}),o)),...n})}function z({label:e,description:t,errorMessage:n,children:o}){return a(m,{children:[e&&r(h,{children:e}),o,t&&r(x,{children:t}),n&&r(F,{children:n})]})}function B({className:e,...t}){return r(f,{className:l(e,n=>i("btn btn-ghost h-input px-2 -me-2",n)),...t})}function D({className:e,onSubmit:t,...n}){return r("form",{className:i(e),onSubmit:o=>{o.preventDefault(),t?.(o)},...n})}function E({className:e,...t}){return r("section",{className:i("flex flex-col gap-input border-x p-icon",e),...t})}function L({className:e,...t}){return r("h2",{className:i("heading-4",e),...t})}export{w as FieldGroup,D as Form,z as FormField,B as FormFieldButton,x as FormFieldDescription,F as FormFieldError,h as FormFieldLabel,E as FormSection,L as FormSectionTitle,v as fieldGroupVariants,b as labelVariants};
+"use client";import{jsxs as a,Fragment as d,jsx as n}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Group as u,composeRenderProps as c,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{IcInfo as b,IcError as h}from"./icons.js";import"clsx";import"react";const x=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function F({className:t,...e}){return n(f,{className:i(x(),t),...e})}function N({className:t,children:e,...r}){return a(p,{className:i("body-sm text-muted leading-tight",t),...r,slot:"description",children:[e,n(b,{className:"inline size-2 align-text-top ms-0.5"})]})}function v({className:t,children:e,...r}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...r,children:[e,n(h,{className:"inline size-2 align-text-top ms-0.5"})]})}const y=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function k({className:t,variant:e,...r}){return n(u,{className:c(t,o=>i(y({variant:e}),o)),...r})}function w({label:t,description:e,errorMessage:r,children:o,requiredIndicator:m,htmlFor:s}){return a(d,{children:[t&&a(F,{htmlFor:s,children:[t,m&&n("sup",{className:"text-destructive",children:"*"})]}),o,e&&n(N,{children:e}),r&&n(v,{htmlFor:s,children:r})]})}function B({className:t,...e}){return n(g,{className:c(t,r=>i("btn btn-ghost h-input px-2 -me-2",r)),...e})}function D({className:t,onSubmit:e,...r}){return n("form",{className:i(t),onSubmit:o=>{o.preventDefault(),e?.(o)},...r})}function E({className:t,...e}){return n("section",{className:i("flex flex-col gap-input border-x p-icon",t),...e})}function T({className:t,...e}){return n("h2",{className:i("heading-4",t),...e})}function A({className:t,...e}){return n("nav",{className:i("flex items-center justify-end h-header bg-glass-1 sticky bottom-0 z-50 py-icon px-input border-t",t),...e})}function P({className:t,...e}){return n("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-input mt-icon my-header",...e})}export{k as FieldGroup,D as Form,A as FormActionFooter,w as FormField,B as FormFieldButton,N as FormFieldDescription,v as FormFieldError,F as FormFieldLabel,P as FormLayout,E as FormSection,T as FormSectionTitle,y as fieldGroupVariants,x as labelVariants};
 //# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n    return (\n        <div\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </div>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: string;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    // | ((validation: AriaValidationResult) => string)\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && <FormFieldLabel>{label}</FormFieldLabel>}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={classNames('flex flex-col gap-input border-x p-icon', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return <h2 className={classNames('heading-4', className)} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","FormSectionTitle"],"mappings":"kWAsBO,MAAMA,EAAgBC,EAAI,CAC7B,+CAEA,iBAEA,uCACJ,CAAC,EAUM,SAASC,EAAe,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpE,OAAOC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CACpF,CAMO,SAASI,EAAqB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CACnF,OACIM,EAACC,EAAA,CAAS,UAAWJ,EAAW,mCAAoCJ,CAAS,EAAI,GAAGC,EAAO,KAAK,cAC3F,SAAA,CAAAK,EACDJ,EAACO,EAAA,CAAO,UAAU,qCAAA,CAAsC,CAAA,EAC5D,CAER,CASO,SAASC,EAAe,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA6C,CAClG,OACIM,EAAC,MAAA,CACG,UAAWH,EACP,mHACAJ,CAAA,EAEH,GAAGC,EAEH,SAAA,CAAAK,EACDJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGrE,CAMO,MAAMC,EAAqBd,EAAI,GAAI,CACtC,SAAU,CACN,QAAS,CACL,QAAS,CACL,sJAEA,aAEA,gBAAA,EAEJ,MAAO,EAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,SAAA,CAEjB,CAAC,EAYM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACrE,OACIC,EAACa,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAExD,GAAGC,CAAA,CAAA,CAGhB,CAqBO,SAASgB,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAd,CACJ,EAEG,CACC,OACIC,EAAAc,EAAA,CACK,SAAA,CAAAH,GAAShB,EAACH,GAAgB,SAAAmB,CAAA,CAAM,EAChCZ,EACAa,GAAejB,EAACG,EAAA,CAAsB,SAAAc,CAAA,CAAY,EAClDC,GAAgBlB,EAACQ,EAAA,CAAgB,SAAAU,CAAA,CAAa,CAAA,EACnD,CAER,CAMO,SAASE,EAAgB,CAAE,UAAAtB,EAAW,GAAGC,GAA0B,CACtE,OACIC,EAACqB,EAAA,CACG,UAAWP,EAAmBhB,EAAWA,GACrCI,EAAW,mCAAoCJ,CAAS,CAAA,EAE3D,GAAGC,CAAA,CAAA,CAGhB,CAMO,SAASuB,EAAK,CAAE,UAAAxB,EAAW,SAAAyB,EAAU,GAAGxB,GAAuC,CAClF,OACIC,EAAC,OAAA,CACG,UAAWE,EAAWJ,CAAS,EAC/B,SAAU0B,GAAK,CAEXA,EAAE,eAAA,EAEFD,IAAWC,CAAC,CAChB,EACC,GAAGzB,CAAA,CAAA,CAGhB,CAMO,SAAS0B,EAAY,CAAE,UAAA3B,EAAW,GAAGC,GAA0C,CAClF,OAAOC,EAAC,WAAQ,UAAWE,EAAW,0CAA2CJ,CAAS,EAAI,GAAGC,EAAO,CAC5G,CAKO,SAAS2B,EAAiB,CAAE,UAAA5B,EAAW,GAAGC,GAAqC,CAClF,OAAOC,EAAC,MAAG,UAAWE,EAAW,YAAaJ,CAAS,EAAI,GAAGC,EAAO,CACzE"}
+{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={classNames('flex flex-col gap-input border-x p-icon', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return <h2 className={classNames('heading-4', className)} {...props} />;\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end h-header bg-glass-1 sticky bottom-0 z-50 py-icon px-input border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={'grid grid-cols-1 lg:grid-cols-2 gap-input mt-icon my-header'} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","FormSectionTitle","FormActionFooter","FormLayout"],"mappings":"kWAsBO,MAAMA,EAAgBC,EAAI,CAC7B,+CAEA,iBAEA,uCACJ,CAAC,EAUM,SAASC,EAAe,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpE,OAAOC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CACpF,CAMO,SAASI,EAAqB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CACnF,OACIM,EAACC,EAAA,CAAS,UAAWJ,EAAW,mCAAoCJ,CAAS,EAAI,GAAGC,EAAO,KAAK,cAC3F,SAAA,CAAAK,EACDJ,EAACO,EAAA,CAAO,UAAU,qCAAA,CAAsC,CAAA,EAC5D,CAER,CASO,SAASC,EAAe,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA+C,CACpG,OACIM,EAAC,QAAA,CACG,KAAK,QACL,UAAWH,EACP,mHACAJ,CAAA,EAEH,GAAGC,EAEH,SAAA,CAAAK,EACDJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGrE,CAMO,MAAMC,EAAqBd,EAAI,GAAI,CACtC,SAAU,CACN,QAAS,CACL,QAAS,CACL,0JAEA,aAEA,gBAAA,EAEJ,MAAO,EAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,SAAA,CAEjB,CAAC,EAYM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACrE,OACIC,EAACa,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAExD,GAAGC,CAAA,CAAA,CAGhB,CAwBO,SAASgB,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAd,EACA,kBAAAe,EACA,QAAAC,CACJ,EAEG,CACC,OACIf,EAAAgB,EAAA,CACK,SAAA,CAAAL,GACGX,EAACR,GAAe,QAAAuB,EACX,SAAA,CAAAJ,EACAG,GAAqBnB,EAAC,MAAA,CAAI,UAAU,mBAAmB,SAAA,GAAA,CAAC,CAAA,EAC7D,EAEHI,EACAa,GAAejB,EAACG,EAAA,CAAsB,SAAAc,CAAA,CAAY,EAClDC,GAAgBlB,EAACQ,EAAA,CAAe,QAAAY,EAAmB,SAAAF,CAAA,CAAa,CAAA,EACrE,CAER,CAMO,SAASI,EAAgB,CAAE,UAAAxB,EAAW,GAAGC,GAA0B,CACtE,OACIC,EAACuB,EAAA,CACG,UAAWT,EAAmBhB,EAAWA,GACrCI,EAAW,mCAAoCJ,CAAS,CAAA,EAE3D,GAAGC,CAAA,CAAA,CAGhB,CAMO,SAASyB,EAAK,CAAE,UAAA1B,EAAW,SAAA2B,EAAU,GAAG1B,GAAuC,CAClF,OACIC,EAAC,OAAA,CACG,UAAWE,EAAWJ,CAAS,EAC/B,SAAU4B,GAAK,CAEXA,EAAE,eAAA,EAEFD,IAAWC,CAAC,CAChB,EACC,GAAG3B,CAAA,CAAA,CAGhB,CAMO,SAAS4B,EAAY,CAAE,UAAA7B,EAAW,GAAGC,GAA0C,CAClF,OAAOC,EAAC,WAAQ,UAAWE,EAAW,0CAA2CJ,CAAS,EAAI,GAAGC,EAAO,CAC5G,CAKO,SAAS6B,EAAiB,CAAE,UAAA9B,EAAW,GAAGC,GAAqC,CAClF,OAAOC,EAAC,MAAG,UAAWE,EAAW,YAAaJ,CAAS,EAAI,GAAGC,EAAO,CACzE,CAEO,SAAS8B,EAAiB,CAAE,UAAA/B,EAAW,GAAGC,GAAsC,CACnF,OACIC,EAAC,MAAA,CACG,UAAWE,EACP,mGACAJ,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAAS+B,EAAW,CAAE,UAAAhC,EAAW,GAAGC,GAAsC,CAC7E,OAAOC,EAAC,MAAA,CAAI,UAAW,8DAAgE,GAAGD,EAAO,CACrG"}

package/dist/components/icons.d.ts

@@ -78,5 +78,15 @@ export declare const IcWebPortal: CtxIcon;
 export declare const IcScale: CtxIcon;
 export declare const IcLicensingModel: CtxIcon;
 export declare const IcFingerprint: CtxIcon;
+export declare const IcProduct: CtxIcon;
 export declare const IcCopy: CtxIcon;
 export declare const IcExternalLink: CtxIcon;
+export declare const IcAnalytics: CtxIcon;
+export declare const IcFeature: CtxIcon;
+export declare const IcEntitlementSet: CtxIcon;
+export declare const IcFile: CtxIcon;
+export declare const IcFiles: CtxIcon;
+export declare const IcChannel: CtxIcon;
+export declare const IcPlatform: CtxIcon;
+export declare const IcDownload: CtxIcon;
+export declare const IcProfile: CtxIcon;