@cryptlex/web-components 6.7.11 → 6.7.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{classNames as e}from"../utilities/theme.js";import{l as t}from"../icons.js";import{Button as n}from"./button.js";import{useIsMobile as r}from"../utilities/use-mobile.js";import{createContext as i,useContext as a,useState as o}from"react";import{
|
|
1
|
+
"use client";import{classNames as e}from"../utilities/theme.js";import{l as t}from"../icons.js";import{Button as n}from"./button.js";import{useIsMobile as r}from"../utilities/use-mobile.js";import{createContext as i,useContext as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Dialog as u,DialogTrigger as d,Heading as f,Modal as p,ModalOverlay as m,OverlayTriggerStateContext as h,composeRenderProps as g}from"react-aria-components";var _=l([`fixed z-50 gap-icon bg-surface-secondary border-stroke-primary 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 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table`,bottom:`inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]`,left:`inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg 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 overflow-hidden border-l rounded-l-lg data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm`}}}),v=d,y=({className:t,isDismissable:n=!0,...r})=>s(m,{isDismissable:n,className:g(t,t=>e(`fixed inset-0 z-50 bg-background-overlay`,`data-[exiting]:duration-100 data-[exiting]:animate-out`,`data-[entering]:animate-in`,t)),...r}),b=i({side:void 0,onClose:null});function x({className:t,children:n,side:i,role:o,closeButton:c=!0,...l}){let d=r();i??=d?`bottom`:void 0;let f=a(h);return s(b.Provider,{value:{side:i,onClose:c?f?.close??null:null},children:s(p,{className:g(t,t=>e(i?_({side:i}):[`fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-surface-tertiary 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`],t)),...l,children:s(u,{role:o,className:e(!i&&`grid h-full gap-icon relative`,`h-full outline-none`),children:n})})})}function S({className:r,...i}){let{side:o,onClose:l}=a(b);return c(`div`,{className:e(`flex flex-col p-icon border-b rounded-t-3xl gap-y-2`,o?`bg-surface-secondary`:`bg-surface-tertiary`,r),...i,children:[s(`div`,{className:`md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-stroke-primary`}),c(`div`,{className:`flex items-start justify-between gap-0`,children:[s(`div`,{className:`flex flex-col gap-y-2 text-left min-w-0`,children:i.children}),l&&c(n,{variant:`ghost`,size:`icon`,onPress:l,className:`!rounded-full`,children:[s(t,{className:`size-6`}),s(`span`,{className:`sr-only`,children:`Close`})]})]})]})}function C({className:t,...n}){let{side:r}=a(b);return s(`div`,{className:e(`flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none`,r&&`bg-surface-secondary`,t),...n})}function w({className:t,...n}){let{side:r}=a(b);return s(`div`,{className:e(`flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto`,r&&`bg-surface-secondary`,t),...n})}function T({className:t,...n}){return s(f,{slot:`title`,className:e(`heading-4 font-semibold leading-none tracking-tight text-text-primary`,t),...n})}function E({className:t,...n}){return s(`p`,{className:e(`flex flex-col gap-y-1 text-center sm:text-left`,t),...n})}var D=i(null);function O({children:e}){let[t,n]=o(!1),[i,a]=o(null),l=e=>{a(e),n(!0)},u=()=>{n(!1)},d=r();return c(D.Provider,{value:{openDialog:l,closeDialog:u,isOpen:t},children:[e,s(v,{isOpen:t,onOpenChange:n,children:s(y,{isDismissable:!0,children:s(x,{side:d?`bottom`:void 0,children:i})})})]})}function k(){let e=a(D);if(!e)throw Error(`useControlledDialog must be used within ControlledDialogProvider`);return e}export{O as ControlledDialogProvider,w as DialogBody,x as DialogContent,E as DialogDescription,C as DialogFooter,S as DialogHeader,y as DialogOverlay,T as DialogTitle,v as DialogTrigger,k as useControlledDialog};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","names":[],"sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\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 { useIsMobile } from '../utilities/use-mobile';\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-surface-secondary border-stroke-primary 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 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n bottom: 'inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]',\n left: 'inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg 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 overflow-hidden border-l rounded-l-lg 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 return (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, className =>\n classNames(\n 'fixed inset-0 z-50 bg-background-overlay',\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\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 */\nconst DialogSideContext = createContext<DialogContentProps['side']>(undefined);\n\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n const isMobile = useIsMobile();\n side = side ?? (isMobile ? 'bottom' : undefined);\n return (\n <DialogSideContext.Provider value={side}>\n <AriaModal\n className={composeRenderProps(className, className =>\n classNames(\n side\n ? sheetVariants({ side })\n : [\n 'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-surface-tertiary 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-6 md:top-3\">\n <Button variant={'ghost'} onPress={renderProps.close} className=\"!rounded-full\">\n <IcClose className=\"size-6\" />\n <span className=\"sr-only\">Close</span>\n </Button>\n </div>\n )}\n </>\n ))}\n </AriaDialog>\n </AriaModal>\n </DialogSideContext.Provider>\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 const side = useContext(DialogSideContext);\n return (\n <div\n className={classNames(\n 'flex flex-col p-icon border-b rounded-t-3xl gap-y-2 text-left',\n side ? 'bg-surface-secondary' : 'bg-surface-tertiary',\n className\n )}\n {...props}\n >\n <div className=\"md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-stroke-primary\" />\n {props.children}\n </div>\n );\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 const side = useContext(DialogSideContext);\n return (\n <div\n className={classNames(\n 'flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none',\n side && 'bg-surface-secondary',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Body section of the dialog\n */\nexport function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n const side = useContext(DialogSideContext);\n return (\n <div\n className={classNames(\n 'flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto',\n side && 'bg-surface-secondary',\n className\n )}\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-4 font-semibold leading-none tracking-tight text-text-primary', 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\n/**\n * Context type for controlled dialog state and actions.\n */\ntype ControlledDialogContextType = {\n /** Opens the dialog with the provided content */\n openDialog: (content: ReactNode) => void;\n /** Closes the dialog */\n closeDialog: () => void;\n /** Whether the dialog is currently open */\n isOpen: boolean;\n};\n\nconst ControlledDialogContext = createContext<ControlledDialogContextType | null>(null);\n\n/**\n * Provider that manages a scoped dialog controlled via hooks.\n *\n * @example\n * ```tsx\n * <ControlledDialogProvider>\n * <MyComponent />\n * </ControlledDialogProvider>\n *\n * // Inside MyComponent:\n * function MyComponent() {\n * const { openDialog } = useControlledDialog();\n * return (\n * <Button onPress={() => openDialog(<div>Dialog content</div>)}>\n * Open Dialog\n * </Button>\n * );\n * }\n * ```\n */\nexport function ControlledDialogProvider({ children }: { children: ReactNode }) {\n const [isOpen, setIsOpen] = useState(false);\n const [content, setContent] = useState<ReactNode>(null);\n\n const openDialog = (dialogContent: ReactNode) => {\n setContent(dialogContent);\n setIsOpen(true);\n };\n\n const closeDialog = () => {\n setIsOpen(false);\n };\n const isMobile = useIsMobile();\n return (\n <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n {children}\n <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n <DialogOverlay isDismissable>\n <DialogContent side={isMobile ? 'bottom' : undefined}>{content}</DialogContent>\n </DialogOverlay>\n </DialogTrigger>\n </ControlledDialogContext.Provider>\n );\n}\n\n/**\n * Hook to access the controlled dialog from within a ControlledDialogProvider.\n *\n * @throws Error if used outside of ControlledDialogProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { openDialog, closeDialog, isOpen } = useControlledDialog();\n *\n * return (\n * <Button onPress={() => openDialog(\n * <DialogHeader>\n * <DialogTitle>Confirm</DialogTitle>\n * </DialogHeader>\n * )}>\n * Open\n * </Button>\n * );\n * }\n * ```\n */\nexport function useControlledDialog() {\n const context = useContext(ControlledDialogContext);\n if (!context) {\n throw new Error('useControlledDialog must be used within ControlledDialogProvider');\n }\n return context;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dialog.js","names":[],"sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\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 OverlayTriggerStateContext,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\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-surface-secondary border-stroke-primary 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 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n bottom: 'inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]',\n left: 'inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg 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 overflow-hidden border-l rounded-l-lg 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 return (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, className =>\n classNames(\n 'fixed inset-0 z-50 bg-background-overlay',\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\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>, 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 */\n/** State shared by `DialogHeader`/`DialogFooter`/`DialogBody` with their nearest `DialogContent`. */\ntype DialogContentContextValue = {\n side: DialogContentProps['side'];\n /** The dialog's `close` handler, or `null` when `closeButton` is disabled. */\n onClose: (() => void) | null;\n};\n\nconst DialogContentContext = createContext<DialogContentContextValue>({ side: undefined, onClose: null });\n\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n const isMobile = useIsMobile();\n side = side ?? (isMobile ? 'bottom' : undefined);\n const overlayState = useContext(OverlayTriggerStateContext);\n\n return (\n <DialogContentContext.Provider value={{ side, onClose: closeButton ? (overlayState?.close ?? null) : null }}>\n <AriaModal\n className={composeRenderProps(className, className =>\n classNames(\n side\n ? sheetVariants({ side })\n : [\n 'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-surface-tertiary 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 {children}\n </AriaDialog>\n </AriaModal>\n </DialogContentContext.Provider>\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 const { side, onClose } = useContext(DialogContentContext);\n return (\n <div\n className={classNames(\n 'flex flex-col p-icon border-b rounded-t-3xl gap-y-2',\n side ? 'bg-surface-secondary' : 'bg-surface-tertiary',\n className\n )}\n {...props}\n >\n <div className=\"md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-stroke-primary\" />\n <div className=\"flex items-start justify-between gap-0\">\n <div className=\"flex flex-col gap-y-2 text-left min-w-0\">{props.children}</div>\n {onClose && (\n <Button variant={'ghost'} size=\"icon\" onPress={onClose} className=\"!rounded-full\">\n <IcClose className=\"size-6\" />\n <span className=\"sr-only\">Close</span>\n </Button>\n )}\n </div>\n </div>\n );\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 const { side } = useContext(DialogContentContext);\n return (\n <div\n className={classNames(\n 'flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none',\n side && 'bg-surface-secondary',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Body section of the dialog\n */\nexport function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n const { side } = useContext(DialogContentContext);\n return (\n <div\n className={classNames(\n 'flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto',\n side && 'bg-surface-secondary',\n className\n )}\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-4 font-semibold leading-none tracking-tight text-text-primary', 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\n/**\n * Context type for controlled dialog state and actions.\n */\ntype ControlledDialogContextType = {\n /** Opens the dialog with the provided content */\n openDialog: (content: ReactNode) => void;\n /** Closes the dialog */\n closeDialog: () => void;\n /** Whether the dialog is currently open */\n isOpen: boolean;\n};\n\nconst ControlledDialogContext = createContext<ControlledDialogContextType | null>(null);\n\n/**\n * Provider that manages a scoped dialog controlled via hooks.\n *\n * @example\n * ```tsx\n * <ControlledDialogProvider>\n * <MyComponent />\n * </ControlledDialogProvider>\n *\n * // Inside MyComponent:\n * function MyComponent() {\n * const { openDialog } = useControlledDialog();\n * return (\n * <Button onPress={() => openDialog(<div>Dialog content</div>)}>\n * Open Dialog\n * </Button>\n * );\n * }\n * ```\n */\nexport function ControlledDialogProvider({ children }: { children: ReactNode }) {\n const [isOpen, setIsOpen] = useState(false);\n const [content, setContent] = useState<ReactNode>(null);\n\n const openDialog = (dialogContent: ReactNode) => {\n setContent(dialogContent);\n setIsOpen(true);\n };\n\n const closeDialog = () => {\n setIsOpen(false);\n };\n const isMobile = useIsMobile();\n return (\n <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n {children}\n <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n <DialogOverlay isDismissable>\n <DialogContent side={isMobile ? 'bottom' : undefined}>{content}</DialogContent>\n </DialogOverlay>\n </DialogTrigger>\n </ControlledDialogContext.Provider>\n );\n}\n\n/**\n * Hook to access the controlled dialog from within a ControlledDialogProvider.\n *\n * @throws Error if used outside of ControlledDialogProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { openDialog, closeDialog, isOpen } = useControlledDialog();\n *\n * return (\n * <Button onPress={() => openDialog(\n * <DialogHeader>\n * <DialogTitle>Confirm</DialogTitle>\n * </DialogHeader>\n * )}>\n * Open\n * </Button>\n * );\n * }\n * ```\n */\nexport function useControlledDialog() {\n const context = useContext(ControlledDialogContext);\n if (!context) {\n throw new Error('useControlledDialog must be used within ControlledDialogProvider');\n }\n return context;\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.12",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"*.{ts,tsx,css,json}": "prettier --write"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@cryptlex/web-api-types": "2.
|
|
51
|
+
"@cryptlex/web-api-types": "2.171.0",
|
|
52
52
|
"@dnd-kit/core": "6.3.1",
|
|
53
53
|
"@dnd-kit/sortable": "10.0.0",
|
|
54
54
|
"@dnd-kit/utilities": "3.2.2",
|