@accelint/design-toolkit 2.6.0 → 4.0.0
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.
- package/dist/components/accordion/index.d.ts +42 -0
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/accordion/styles.d.ts +1 -1
- package/dist/components/accordion/styles.js +1 -1
- package/dist/components/accordion/styles.js.map +1 -1
- package/dist/components/avatar/index.d.ts +29 -0
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/avatar/styles.d.ts +1 -1
- package/dist/components/badge/index.d.ts +24 -0
- package/dist/components/badge/index.js.map +1 -1
- package/dist/components/badge/styles.d.ts +1 -1
- package/dist/components/button/index.d.ts +104 -0
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/styles.d.ts +31 -109
- package/dist/components/button/styles.js +1 -1
- package/dist/components/button/styles.js.map +1 -1
- package/dist/components/button/types.d.ts +6 -4
- package/dist/components/checkbox/index.d.ts +33 -0
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/styles.d.ts +4 -4
- package/dist/components/checkbox/styles.js +1 -1
- package/dist/components/checkbox/styles.js.map +1 -1
- package/dist/components/chip/index.d.ts +34 -0
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/chip/styles.d.ts +4 -4
- package/dist/components/chip/styles.js +1 -1
- package/dist/components/chip/styles.js.map +1 -1
- package/dist/components/classification-badge/index.d.ts +15 -0
- package/dist/components/classification-badge/index.js.map +1 -1
- package/dist/components/classification-banner/index.d.ts +11 -0
- package/dist/components/classification-banner/index.js.map +1 -1
- package/dist/components/color-picker/styles.d.ts +1 -1
- package/dist/components/color-picker/styles.js +1 -1
- package/dist/components/color-picker/styles.js.map +1 -1
- package/dist/components/combobox-field/index.d.ts +1 -0
- package/dist/components/combobox-field/styles.d.ts +6 -6
- package/dist/components/combobox-field/styles.js +1 -1
- package/dist/components/combobox-field/styles.js.map +1 -1
- package/dist/components/combobox-field/types.d.ts +1 -0
- package/dist/components/date-field/index.d.ts +45 -3
- package/dist/components/date-field/index.js +1 -1
- package/dist/components/date-field/index.js.map +1 -1
- package/dist/components/date-field/styles.d.ts +41 -51
- package/dist/components/date-field/styles.js +1 -1
- package/dist/components/date-field/styles.js.map +1 -1
- package/dist/components/date-field/types.d.ts +12 -15
- package/dist/components/details-list/styles.d.ts +1 -1
- package/dist/components/dialog/index.d.ts +48 -36
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/styles.d.ts +60 -0
- package/dist/components/dialog/styles.js +2 -0
- package/dist/components/dialog/styles.js.map +1 -0
- package/dist/components/dialog/types.d.ts +14 -0
- package/dist/components/dialog/types.js +2 -0
- package/dist/components/dialog/types.js.map +1 -0
- package/dist/components/drawer/events.d.ts +8 -0
- package/dist/components/drawer/events.js +2 -0
- package/dist/components/drawer/events.js.map +1 -0
- package/dist/components/drawer/index.d.ts +89 -43
- package/dist/components/drawer/index.js +1 -1
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/styles.d.ts +50 -16
- package/dist/components/drawer/styles.js +1 -1
- package/dist/components/drawer/styles.js.map +1 -1
- package/dist/components/drawer/types.d.ts +154 -238
- package/dist/components/drawer/types.js +1 -1
- package/dist/components/drawer/types.js.map +1 -1
- package/dist/components/hero/styles.d.ts +1 -1
- package/dist/components/hotkey/index.d.ts +32 -1
- package/dist/components/hotkey/index.js +1 -1
- package/dist/components/hotkey/index.js.map +1 -1
- package/dist/components/hotkey/styles.d.ts +1 -1
- package/dist/components/icon/index.d.ts +29 -0
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/icon/styles.d.ts +1 -1
- package/dist/components/input/index.d.ts +19 -0
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/styles.d.ts +1 -1
- package/dist/components/input/styles.js +1 -1
- package/dist/components/input/styles.js.map +1 -1
- package/dist/components/input/types.d.ts +1 -0
- package/dist/components/label/index.d.ts +19 -0
- package/dist/components/label/index.js.map +1 -1
- package/dist/components/label/styles.d.ts +1 -1
- package/dist/components/menu/index.d.ts +69 -7
- package/dist/components/menu/index.js +1 -1
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/menu/styles.d.ts +11 -38
- package/dist/components/menu/styles.js +1 -1
- package/dist/components/menu/styles.js.map +1 -1
- package/dist/components/menu/types.d.ts +11 -16
- package/dist/components/options/index.d.ts +41 -0
- package/dist/components/options/index.js.map +1 -1
- package/dist/components/options/styles.d.ts +6 -6
- package/dist/components/options/styles.js +1 -1
- package/dist/components/options/styles.js.map +1 -1
- package/dist/components/options/types.d.ts +1 -1
- package/dist/components/popover/index.d.ts +36 -2
- package/dist/components/popover/index.js +1 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/popover/styles.d.ts +1 -1
- package/dist/components/query-builder/index.d.ts +24 -0
- package/dist/components/query-builder/index.js.map +1 -1
- package/dist/components/radio/index.d.ts +31 -0
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/styles.d.ts +4 -4
- package/dist/components/radio/styles.js +1 -1
- package/dist/components/radio/styles.js.map +1 -1
- package/dist/components/search-field/styles.d.ts +1 -1
- package/dist/components/search-field/styles.js +1 -1
- package/dist/components/search-field/styles.js.map +1 -1
- package/dist/components/search-field/types.d.ts +1 -0
- package/dist/components/select-field/index.d.ts +44 -0
- package/dist/components/select-field/index.js +1 -1
- package/dist/components/select-field/index.js.map +1 -1
- package/dist/components/select-field/styles.d.ts +7 -7
- package/dist/components/select-field/styles.js +1 -1
- package/dist/components/select-field/styles.js.map +1 -1
- package/dist/components/select-field/types.d.ts +1 -0
- package/dist/components/skeleton/styles.d.ts +1 -1
- package/dist/components/slider/index.d.ts +15 -20
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/styles.d.ts +84 -0
- package/dist/components/slider/styles.js +2 -0
- package/dist/components/slider/styles.js.map +1 -0
- package/dist/components/slider/types.d.ts +22 -0
- package/dist/components/slider/types.js +2 -0
- package/dist/components/slider/types.js.map +1 -0
- package/dist/components/switch/index.d.ts +36 -0
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/styles.d.ts +24 -22
- package/dist/components/switch/styles.js +1 -1
- package/dist/components/switch/styles.js.map +1 -1
- package/dist/components/switch/types.d.ts +1 -0
- package/dist/components/tabs/index.d.ts +46 -0
- package/dist/components/tabs/index.js.map +1 -1
- package/dist/components/text-area-field/index.d.ts +20 -0
- package/dist/components/text-area-field/index.js.map +1 -1
- package/dist/components/text-area-field/styles.d.ts +7 -7
- package/dist/components/text-area-field/styles.js +1 -1
- package/dist/components/text-area-field/styles.js.map +1 -1
- package/dist/components/text-field/index.d.ts +62 -0
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/components/text-field/styles.d.ts +7 -7
- package/dist/components/text-field/types.d.ts +1 -0
- package/dist/components/tooltip/index.d.ts +42 -0
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/styles.d.ts +1 -1
- package/dist/components/view-stack/events.d.ts +9 -0
- package/dist/components/view-stack/events.js +2 -0
- package/dist/components/view-stack/events.js.map +1 -0
- package/dist/components/view-stack/index.d.ts +13 -10
- package/dist/components/view-stack/index.js +1 -1
- package/dist/components/view-stack/index.js.map +1 -1
- package/dist/components/view-stack/types.d.ts +13 -9
- package/dist/index.css +3 -3
- package/dist/index.d.ts +23 -19
- package/dist/index.js +1 -1
- package/dist/lib/types.d.ts +6 -2
- package/dist/lib/utils.d.ts +15 -5
- package/dist/lib/utils.js +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +1449 -774
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/themes.css +12 -0
- package/dist/tokens/tokens.css +12 -0
- package/dist/variants/variants.css +19 -5
- package/package.json +16 -9
- package/dist/components/box/index.d.ts +0 -19
- package/dist/components/box/index.js +0 -2
- package/dist/components/box/index.js.map +0 -1
- package/dist/components/drawer/context.d.ts +0 -13
- package/dist/components/drawer/context.js +0 -2
- package/dist/components/drawer/context.js.map +0 -1
- package/dist/components/drawer/state.d.ts +0 -26
- package/dist/components/drawer/state.js +0 -2
- package/dist/components/drawer/state.js.map +0 -1
|
@@ -1,41 +1,53 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { RefObject, PropsWithChildren, ReactNode } from 'react';
|
|
3
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import '
|
|
7
|
-
import '
|
|
8
|
-
import 'tailwind-merge';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ComponentProps } from 'react';
|
|
4
|
+
import { DialogTrigger, HeadingProps, ContextValue } from 'react-aria-components';
|
|
5
|
+
import { DialogProps } from './types.js';
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
7
|
+
declare const DialogContext: react.Context<ContextValue<DialogProps, HTMLDivElement>>;
|
|
8
|
+
declare function DialogTitle({ children, className }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
9
|
+
declare namespace DialogTitle {
|
|
10
|
+
var displayName: string;
|
|
11
|
+
}
|
|
12
|
+
declare function DialogContent({ children, className }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
|
|
13
|
+
declare namespace DialogContent {
|
|
14
|
+
var displayName: string;
|
|
15
|
+
}
|
|
16
|
+
declare function DialogFooter({ children, className }: ComponentProps<'footer'>): react_jsx_runtime.JSX.Element;
|
|
17
|
+
declare namespace DialogFooter {
|
|
18
|
+
var displayName: string;
|
|
18
19
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Dialog - A modal dialog component for important content and interactions
|
|
22
|
+
*
|
|
23
|
+
* Provides accessible modal functionality with focus management, backdrop handling,
|
|
24
|
+
* and keyboard navigation. Supports multiple sizes and customizable dismissal behavior.
|
|
25
|
+
* Perfect for confirmations, forms, or any content requiring user focus.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* // Basic dialog with trigger
|
|
29
|
+
* <Dialog.Trigger>
|
|
30
|
+
* <Button>Open Dialog</Button>
|
|
31
|
+
* <Dialog>
|
|
32
|
+
* {({ close }) => (
|
|
33
|
+
* <>
|
|
34
|
+
* <Dialog.Title>Confirm Action</Dialog.Title>
|
|
35
|
+
* <p>Are you sure you want to continue?</p>
|
|
36
|
+
* <Dialog.Footer>
|
|
37
|
+
* <Dialog.Button onPress={close}>Confirm</Dialog.Button>
|
|
38
|
+
* </Dialog.Footer>
|
|
39
|
+
* </>
|
|
40
|
+
* )}
|
|
41
|
+
* </Dialog>
|
|
42
|
+
* </Dialog.Trigger>
|
|
43
|
+
*/
|
|
44
|
+
declare function Dialog({ ref, ...props }: DialogProps): react_jsx_runtime.JSX.Element;
|
|
45
|
+
declare namespace Dialog {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
var Trigger: typeof DialogTrigger;
|
|
48
|
+
var Title: typeof DialogTitle;
|
|
49
|
+
var Content: typeof DialogContent;
|
|
50
|
+
var Footer: typeof DialogFooter;
|
|
36
51
|
}
|
|
37
|
-
declare const DialogTitle: ({ children, className, }: PropsWithChildren<{
|
|
38
|
-
className?: string;
|
|
39
|
-
}>) => react_jsx_runtime.JSX.Element;
|
|
40
52
|
|
|
41
|
-
export { Dialog,
|
|
53
|
+
export { Dialog, DialogContext };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {jsx}from'react/jsx-runtime';import {
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import'client-only';import {isSlottedContextValue}from'./../../lib/utils.js';import {UNSAFE_PortalProvider}from'@react-aria/overlays';import {useIsSSR}from'@react-aria/ssr';import {createContext,useState,useEffect,useContext}from'react';import {useContextProps,ModalOverlay,composeRenderProps,Modal,Dialog,DialogTrigger,Heading,OverlayTriggerStateContext}from'react-aria-components';import {ButtonContext}from'../button/index.js';import {DialogStyles}from'./styles.js';const {overlay:h,modal:B,dialog:U,title:_,content:I,footer:L}=DialogStyles(),d=createContext(null);function g({children:e,className:o}){return jsx(Heading,{slot:"title",className:_({className:o}),children:e})}g.displayName="Dialog.Title";function f({children:e,className:o}){return jsx("div",{className:I({className:o}),children:e})}f.displayName="Dialog.Content";function P({children:e,className:o}){const a=useContext(d),s=(isSlottedContextValue(a)?null:a?.size)??"small",n=useContext(OverlayTriggerStateContext);return jsx("footer",{className:L({className:o}),children:jsx(ButtonContext.Provider,{value:{size:s,onPress:n?.close??(()=>{})},children:e})})}P.displayName="Dialog.Footer";function r({ref:e,...o}){[o,e]=useContextProps(o,e??null,d);const a=useIsSSR(),[s,n]=useState(a?null:document.body),{children:v,classNames:m,parentRef:c,size:C="small",...D}=o;return useEffect(()=>{const l=c?.current,i=a?null:document.createElement("div");return l&&i&&(l.appendChild(i),n(i)),()=>{i?.remove(),n(a?null:document.body);}},[a,c]),jsx(d.Provider,{value:o,children:jsx(UNSAFE_PortalProvider,{getContainer:()=>s,children:jsx(ModalOverlay,{...D,ref:e,className:composeRenderProps(m?.overlay,l=>h({className:l})),"data-size":C,children:jsx(Modal,{className:composeRenderProps(m?.modal,l=>B({className:l})),children:jsx(Dialog,{className:U({className:m?.dialog}),children:v})})})})})}r.displayName="Dialog",r.Trigger=DialogTrigger,r.Title=g,r.Content=f,r.Footer=P;export{r as Dialog,d as DialogContext};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/dialog/index.tsx"],"names":["useDialogContext","h","ctx","DialogContext","z","size","jsx","RACDialogTrigger","s","isDismissable","Dialog","rest","v","ref","useState","isSSR","N","node","P","port","setPortal","parentRef","RACModalOverlay","cn","n","O","children","DialogContent","S","dialogSize","buttonSize","buttonSizes","Button","w","DialogFooter","DialogTitle","DialogBody"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { cn } from '@/lib/utils';\nimport { useIsSSR } from '@react-aria/ssr';\nimport 'client-only';\nimport { cva } from 'class-variance-authority';\nimport {\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n createContext,\n forwardRef,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport {\n type DialogRenderProps,\n type DialogTriggerProps,\n Dialog as RACDialog,\n DialogTrigger as RACDialogTrigger,\n Heading as RACHeading,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport type { ButtonProps } from '../button/types';\n\nconst dialogClasses = cva(\n 'flex flex-col align-end font-light text-body-m text-default-dark',\n {\n variants: {\n size: {\n sm: 'min-w-[280px] max-w-[280px] rounded-medium p-l',\n lg: 'min-w-[320px] max-w-[720px] rounded-large p-xl',\n },\n defaultVariants: {\n size: 'sm',\n },\n },\n },\n);\n\nconst buttonSizes: Record<string, ButtonProps['size']> = {\n sm: 'small',\n lg: 'medium',\n};\n\ntype DialogSize = 'sm' | 'lg';\n\ninterface DialogContextValue {\n size: DialogSize;\n isDismissable?: boolean;\n isKeyboardDismissDisabled?: boolean;\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n parentRef?: RefObject<HTMLElement | null>;\n}\n\nconst DialogContext = createContext<DialogContextValue>({ size: 'sm' });\n\nconst useDialogContext = () => {\n const ctx = useContext(DialogContext);\n if (!ctx) {\n throw new Error('Dialog components must be used within <Dialog>');\n }\n return ctx;\n};\n\nexport interface DialogProps extends DialogTriggerProps {\n size?: DialogSize;\n isDismissable?: boolean;\n isKeyboardDismissDisabled?: boolean;\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n parentRef?: RefObject<HTMLElement | null>;\n}\n\nexport const Dialog = ({\n children,\n size,\n isOpen,\n onOpenChange,\n isDismissable = true,\n isKeyboardDismissDisabled = true,\n parentRef,\n}: DialogProps) => {\n return (\n <RACDialogTrigger>\n <DialogContext.Provider\n value={{\n size: size ?? 'sm',\n isDismissable,\n isOpen,\n onOpenChange,\n parentRef,\n isKeyboardDismissDisabled,\n }}\n >\n {children}\n </DialogContext.Provider>\n </RACDialogTrigger>\n );\n};\nDialog.displayName = 'Dialog';\n\ninterface DialogBodyProps {\n children: ReactNode | ReactNode[] | ((opts: DialogRenderProps) => ReactNode);\n}\n\nconst DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(\n ({ children, ...rest }, ref) => {\n const {\n size,\n isDismissable,\n isOpen,\n onOpenChange,\n parentRef,\n isKeyboardDismissDisabled,\n } = useDialogContext();\n const isSSR = useIsSSR();\n const [portal, setPortal] = useState(isSSR ? null : document.body);\n\n useEffect(() => {\n const node = parentRef?.current;\n /* Ensure proper ssr hydration TODO */\n const port = isSSR ? null : document.createElement('div');\n\n if (node && port) {\n node.appendChild(port);\n setPortal(port);\n }\n\n return () => {\n port?.remove();\n\n setPortal(isSSR ? null : document.body);\n };\n }, [isSSR, parentRef]);\n\n return portal ? (\n <RACModalOverlay\n UNSTABLE_portalContainer={portal}\n isKeyboardDismissDisabled={!isDismissable && isKeyboardDismissDisabled}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n isDismissable={isDismissable}\n className='absolute inset-0 flex items-center justify-center'\n {...rest}\n >\n <RACModal\n ref={ref}\n className={cn(\n 'flex flex-col justify-center bg-surface-overlay align-start',\n size === 'sm' && 'rounded-medium',\n size === 'lg' && 'rounded-large',\n )}\n >\n <RACDialog className={dialogClasses({ size })}>{children}</RACDialog>\n </RACModal>\n </RACModalOverlay>\n ) : null;\n },\n);\nDialogBody.displayName = 'DialogBody';\n\nconst DialogContent = ({\n children,\n className,\n}: PropsWithChildren<{ className?: string }>) => {\n const { size } = useDialogContext();\n return (\n <div\n className={cn(\n 'flex flex-col',\n size === 'sm' && 'gap-xs',\n size === 'lg' && 'gap-l',\n className,\n )}\n >\n {children}\n </div>\n );\n};\n\nexport const DialogTitle = ({\n children,\n className,\n}: PropsWithChildren<{ className?: string }>) => {\n const { size } = useDialogContext();\n return (\n <RACHeading\n slot='title'\n className={cn(\n 'text-default-light',\n size === 'sm' && 'mb-s text-header-m',\n size === 'lg' && 'mb-m text-header-l',\n className,\n )}\n >\n {children}\n </RACHeading>\n );\n};\n\nconst DialogButton = ({ children, className, ...props }: ButtonProps) => {\n const { size: dialogSize } = useDialogContext();\n const buttonSize = buttonSizes[dialogSize];\n return (\n <Button\n size={buttonSize}\n {...props}\n //overriding the style to deal with rac's pressed state inherited\n //from the trigger state\n className={cn('pressed:bg-initial', className)}\n >\n {children}\n </Button>\n );\n};\n\nconst DialogFooter = ({\n children,\n className,\n}: PropsWithChildren<{ className?: string }>) => {\n const { size } = useDialogContext();\n return (\n <div\n className={cn(\n 'flex justify-end gap-xs',\n size === 'sm' && 'mt-l',\n size === 'lg' && 'mt-xl',\n className,\n )}\n >\n {children}\n </div>\n );\n};\n\nDialog.Button = DialogButton;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Title = DialogTitle;\nDialog.Body = DialogBody;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/dialog/index.tsx"],"names":["title","DialogStyles","DialogContext","DialogTitle","S","className","jsx","Heading","t","M","children","DialogContent","context","useContext","y","state","p","R","size","DialogFooter","props","ref","isSSR","useIsSSR","portal","x","E","classNames","parentRef","useEffect","node","T","port","setPortal","N","rest","composeRenderProps","modal","u","dialog","F","Dialog"],"mappings":"yfAwCwB,MAAA,CAAA,SAAQA,CAAAA,KAAO,CAAA,CAAA,CAAA,MAAS,CAAA,CAAA,CAAA,KAAWC,CAAa,EAE3DC,QACkD,CAAA,CAE/D,MAAA,CAAA,CAAA,CAASC,aAAY,EAAE,CAAA,CAAA,CAAAC,aAAA,CAAA,MAAU,SAAAC,CAAU,EAAiB,QAExDC,EAACC,CAAAA,SAAa,CAAA,CAAA,CAAA,CAAA,CAAA,OAAQC,GAAA,CAAAC,OAAA,CAAWT,CAAAA,YAAQK,CAAU,SAChD,CAAA,CAAA,CAAAK,CAAAA,SAIK,CAAA,CAAA,CAAA,CAAA,CAAA,QAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,YAEjBC,cAA0B,CAAA,SAAAN,CAAU,CAAA,CAA0B,QAC9DC,CAAAA,CAAC,UAAI,CAAA,CAAA,CAAA,CAAA,CAAA,OAAqBE,GAAA,CAAA,KAAA,CAAAH,CAAU,SAAK,CAAA,CAAA,CAAAK,UAEpC,CAAA,CAAA,CAAA,CAAA,CAAA,QAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,4BAEM,CAAA,SAAAL,CAAU,CAAA,CAA6B,QACjEO,CAAUC,EAAWX,SAEK,EAAI,CAAA,CAAA,CAAA,qBAAyB,CAAA,CAAA,CAAA,CAAAY,qBAAA,CAAA,CAAA,CACvDC,CAAAA,IAA6C,CAAA,CAEnD,SACG,OAAA,CAAA,CAAA,CAAOC,UAAA,CAAAC,0BAAA,CAAA,CAAA,OAAkBT,GAAE,CAAA,QAAA,CAAAH,CAAU,SACpC,CAAA,CAAA,CAAAC,UAAe,CAAA,CAAA,CAAd,CACC,CAAA,aACEY,aAAAA,CACA,QAASH,OAAO,CAAA,CAAA,IAAU,CAAA,CAAG,QAG9B,CAAA,CAAA,EAAA,KACH,GAKNI,iBAA2B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WA0BpB,CAAA,eAAgC,CAAgB,SACtBC,CAAAA,CAAOC,CAAAA,GAAO,CAAA,CAAA,CAAA,GAAmB,CAEhE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAMC,EAAQC,CAAAA,eAAS,CAAA,CACjB,CAACC,CAAAA,EAAiB,IAAaF,CAAAA,CAAQ,QAAO,CAAA,CAAAG,QAAA,EAAA,CAAS,CAAA,CAAA,CAAA,CAAI,EAC3DC,QAAE,CAAA,CAAA,CAAA,IAAA,CAAA,QAAU,CAAA,IAAA,CAAAC,CAAAA,CAAY,QAAA,CAAA,CAAAC,CAAAA,UAAkB,CAAA,CAAA,CAAA,SAAqBR,EAErE,CAAA,IAAA,CAAA,CAAAS,CAAAA,OACE,CAAA,GAAA,CAAMC,EAAOF,CAAAA,CAAAA,OAAWG,SAAA,CAElBC,IAAe,CAAA,kBAAgB,CAAA,CAAA,CAAA,CAAA,CAAA,IAAc,CAAA,QAEnD,CAAA,aACO,eAELC,GAAc,CAAA,iBAID,CAAA,CAEbA,CAAAA,CAAUX,EAAQ,CAAA,CAAA,CAAA,IAAO,CAAA,CAAA,EAAA,QAC3B,CACF,CAAA,CAAG,CAACA,MAGFhB,aAAC,EAAuB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOc,EAC7B,CAAA,CAAAZ,GAAA,CAAA,CAAA,CAAA,QAAuB,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,QAAoBgB,CACzChB,GAAA,CAAA0B,qBAAA,CAAA,CAAA,YACMC,CAAAA,KACCd,CAAAA,QACL,CAAAb,GAAA,CAAW4B,aAAmBT,CAAAA,GAAY,CAAA,CAAA,GAAA,CAAA,CAAUtB,iCACxCA,OAEZ,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAEA,CAAA,CAAA,CAAA,CAAA,CAAAC,CAAAA,WACE,CAAA,CAAA,CAAW8B,aAAuC/B,KAAAA,CAAAA,CAChDgC,SAAQ,CAAAC,kBAAA,CAAA,CAAAjC,EAAW,YAGrBC,SAAY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAWiC,QAAS,CAAA/B,GAAA,CAAAgC,MAAA,CAAWb,CAAAA,SAAoB,CAAA,CAC5D,CAAA,CAAA,SACH,EACF,EACF,MAKRc,EAAO,CAAA,QAAA,CAAA,CAAA,CAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACrBA,EAAO,CAAA,WACA,CAAA,SACA,CAAA,CAAA,OAAU9B,CACjB8B,cAAO,CAAA,CAAA,KAAStB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,OAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,MAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { isSlottedContextValue } from '@/lib/utils';\nimport { UNSAFE_PortalProvider } from '@react-aria/overlays';\nimport { useIsSSR } from '@react-aria/ssr';\nimport {\n type ComponentProps,\n createContext,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport {\n Dialog as AriaDialog,\n type ContextValue,\n DialogTrigger,\n Heading,\n type HeadingProps,\n Modal,\n ModalOverlay,\n OverlayTriggerStateContext,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { ButtonContext } from '../button';\nimport { DialogStyles } from './styles';\nimport type { DialogProps } from './types';\n\nconst { overlay, modal, dialog, title, content, footer } = DialogStyles();\n\nexport const DialogContext =\n createContext<ContextValue<DialogProps, HTMLDivElement>>(null);\n\nfunction DialogTitle({ children, className }: HeadingProps) {\n return (\n <Heading slot='title' className={title({ className })}>\n {children}\n </Heading>\n );\n}\nDialogTitle.displayName = 'Dialog.Title';\n\nfunction DialogContent({ children, className }: ComponentProps<'div'>) {\n return <div className={content({ className })}>{children}</div>;\n}\nDialogContent.displayName = 'Dialog.Content';\n\nfunction DialogFooter({ children, className }: ComponentProps<'footer'>) {\n const context = useContext(DialogContext);\n const size =\n (isSlottedContextValue(context) ? null : context?.size) ?? 'small';\n const state = useContext(OverlayTriggerStateContext);\n\n return (\n <footer className={footer({ className })}>\n <ButtonContext.Provider\n value={{\n size,\n onPress: state?.close ?? (() => undefined),\n }}\n >\n {children}\n </ButtonContext.Provider>\n </footer>\n );\n}\n\nDialogFooter.displayName = 'Dialog.Footer';\n\n/**\n * Dialog - A modal dialog component for important content and interactions\n *\n * Provides accessible modal functionality with focus management, backdrop handling,\n * and keyboard navigation. Supports multiple sizes and customizable dismissal behavior.\n * Perfect for confirmations, forms, or any content requiring user focus.\n *\n * @example\n * // Basic dialog with trigger\n * <Dialog.Trigger>\n * <Button>Open Dialog</Button>\n * <Dialog>\n * {({ close }) => (\n * <>\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <p>Are you sure you want to continue?</p>\n * <Dialog.Footer>\n * <Dialog.Button onPress={close}>Confirm</Dialog.Button>\n * </Dialog.Footer>\n * </>\n * )}\n * </Dialog>\n * </Dialog.Trigger>\n */\nexport function Dialog({ ref, ...props }: DialogProps) {\n [props, ref] = useContextProps(props, ref ?? null, DialogContext);\n\n const isSSR = useIsSSR();\n const [portal, setPortal] = useState(isSSR ? null : document.body);\n const { children, classNames, parentRef, size = 'small', ...rest } = props;\n\n useEffect(() => {\n const node = parentRef?.current;\n // TODO: Ensure proper ssr hydration\n const port = isSSR ? null : document.createElement('div');\n\n if (node && port) {\n node.appendChild(port);\n\n setPortal(port);\n }\n\n return () => {\n port?.remove();\n\n setPortal(isSSR ? null : document.body);\n };\n }, [isSSR, parentRef]);\n\n return (\n <DialogContext.Provider value={props}>\n <UNSAFE_PortalProvider getContainer={() => portal}>\n <ModalOverlay\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.overlay, (className) =>\n overlay({ className }),\n )}\n data-size={size}\n >\n <Modal\n className={composeRenderProps(classNames?.modal, (className) =>\n modal({ className }),\n )}\n >\n <AriaDialog className={dialog({ className: classNames?.dialog })}>\n {children}\n </AriaDialog>\n </Modal>\n </ModalOverlay>\n </UNSAFE_PortalProvider>\n </DialogContext.Provider>\n );\n}\nDialog.displayName = 'Dialog';\nDialog.Trigger = DialogTrigger;\nDialog.Title = DialogTitle;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\n"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
declare const DialogStyles: tailwind_variants.TVReturnType<{
|
|
5
|
+
[key: string]: {
|
|
6
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
content?: tailwind_merge.ClassNameValue;
|
|
8
|
+
dialog?: tailwind_merge.ClassNameValue;
|
|
9
|
+
footer?: tailwind_merge.ClassNameValue;
|
|
10
|
+
title?: tailwind_merge.ClassNameValue;
|
|
11
|
+
overlay?: tailwind_merge.ClassNameValue;
|
|
12
|
+
modal?: tailwind_merge.ClassNameValue;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
} | {
|
|
16
|
+
[x: string]: {
|
|
17
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
18
|
+
content?: tailwind_merge.ClassNameValue;
|
|
19
|
+
dialog?: tailwind_merge.ClassNameValue;
|
|
20
|
+
footer?: tailwind_merge.ClassNameValue;
|
|
21
|
+
title?: tailwind_merge.ClassNameValue;
|
|
22
|
+
overlay?: tailwind_merge.ClassNameValue;
|
|
23
|
+
modal?: tailwind_merge.ClassNameValue;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
} | {}, {
|
|
27
|
+
overlay: string;
|
|
28
|
+
modal: string[];
|
|
29
|
+
dialog: string[];
|
|
30
|
+
title: string[];
|
|
31
|
+
content: string[];
|
|
32
|
+
footer: string[];
|
|
33
|
+
}, undefined, {
|
|
34
|
+
[key: string]: {
|
|
35
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
36
|
+
content?: tailwind_merge.ClassNameValue;
|
|
37
|
+
dialog?: tailwind_merge.ClassNameValue;
|
|
38
|
+
footer?: tailwind_merge.ClassNameValue;
|
|
39
|
+
title?: tailwind_merge.ClassNameValue;
|
|
40
|
+
overlay?: tailwind_merge.ClassNameValue;
|
|
41
|
+
modal?: tailwind_merge.ClassNameValue;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
} | {}, {
|
|
45
|
+
overlay: string;
|
|
46
|
+
modal: string[];
|
|
47
|
+
dialog: string[];
|
|
48
|
+
title: string[];
|
|
49
|
+
content: string[];
|
|
50
|
+
footer: string[];
|
|
51
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
52
|
+
overlay: string;
|
|
53
|
+
modal: string[];
|
|
54
|
+
dialog: string[];
|
|
55
|
+
title: string[];
|
|
56
|
+
content: string[];
|
|
57
|
+
footer: string[];
|
|
58
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
59
|
+
|
|
60
|
+
export { DialogStyles };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {tv}from'tailwind-variants';const o=tv({slots:{overlay:"group/dialog absolute inset-0 flex items-center justify-center",modal:["flex flex-col justify-center bg-surface-overlay align-start","group-size-small/dialog:rounded-medium","group-size-large/dialog:rounded-large","shadow-elevation-overlay"],dialog:["focus-visible:outline-none","flex flex-col align-end font-light text-body-m text-default-dark","group-size-small/dialog:w-[280px] group-size-small/dialog:rounded-medium group-size-small/dialog:p-l","group-size-large/dialog:min-w-[320px] group-size-small/dialog:max-w-[720px] group-size-large/dialog:rounded-medium group-size-large/dialog:p-xl"],title:["text-default-light","group-size-small/dialog:mb-s group-size-small/dialog:text-header-m","group-size-large/dialog:mb-m group-size-large/dialog:text-header-l"],content:["flex flex-col","foreground-primary-muted","group-size-small/dialog:gap-xs","group-size-large/dialog:gap-l"],footer:["flex justify-end gap-xs","group-size-small/dialog:mt-l","group-size-large/dialog:mt-xl"]}});export{o as DialogStyles};//# sourceMappingURL=styles.js.map
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/dialog/styles.ts"],"names":["DialogStyles","tv"],"mappings":"mCAcO,MAAMA,EAAeC,EAAAA,CAAG,CAC7B,MAAO,CACL,OAAA,CAAS,iEACT,KAAA,CAAO,CACL,8DACA,wCAAA,CACA,uCAAA,CACA,0BACF,CAAA,CACA,MAAA,CAAQ,CACN,4BAAA,CACA,kEAAA,CACA,uGACA,iJACF,CAAA,CACA,MAAO,CACL,oBAAA,CACA,qEACA,oEACF,CAAA,CACA,QAAS,CACP,eAAA,CACA,2BACA,gCAAA,CACA,+BACF,EACA,MAAA,CAAQ,CACN,0BACA,8BAAA,CACA,+BACF,CACF,CACF,CAAC","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from 'tailwind-variants';\n\nexport const DialogStyles = tv({\n slots: {\n overlay: 'group/dialog absolute inset-0 flex items-center justify-center',\n modal: [\n 'flex flex-col justify-center bg-surface-overlay align-start',\n 'group-size-small/dialog:rounded-medium',\n 'group-size-large/dialog:rounded-large',\n 'shadow-elevation-overlay',\n ],\n dialog: [\n 'focus-visible:outline-none',\n 'flex flex-col align-end font-light text-body-m text-default-dark',\n 'group-size-small/dialog:w-[280px] group-size-small/dialog:rounded-medium group-size-small/dialog:p-l',\n 'group-size-large/dialog:min-w-[320px] group-size-small/dialog:max-w-[720px] group-size-large/dialog:rounded-medium group-size-large/dialog:p-xl',\n ],\n title: [\n 'text-default-light',\n 'group-size-small/dialog:mb-s group-size-small/dialog:text-header-m',\n 'group-size-large/dialog:mb-m group-size-large/dialog:text-header-l',\n ],\n content: [\n 'flex flex-col',\n 'foreground-primary-muted',\n 'group-size-small/dialog:gap-xs',\n 'group-size-large/dialog:gap-l',\n ],\n footer: [\n 'flex justify-end gap-xs',\n 'group-size-small/dialog:mt-l',\n 'group-size-large/dialog:mt-xl',\n ],\n },\n});\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { RefAttributes, RefObject } from 'react';
|
|
2
|
+
import { ModalOverlayProps, DialogProps as DialogProps$1 } from 'react-aria-components';
|
|
3
|
+
|
|
4
|
+
type DialogProps = Omit<ModalOverlayProps, 'children' | 'className'> & Pick<DialogProps$1, 'children'> & RefAttributes<HTMLDivElement> & {
|
|
5
|
+
classNames?: {
|
|
6
|
+
overlay?: ModalOverlayProps['className'];
|
|
7
|
+
modal?: ModalOverlayProps['className'];
|
|
8
|
+
dialog?: DialogProps$1['className'];
|
|
9
|
+
};
|
|
10
|
+
parentRef?: RefObject<HTMLElement | null>;
|
|
11
|
+
size?: 'small' | 'large';
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export type { DialogProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/drawer/events.ts"],"names":["DrawerEventNamespace","DrawerEventTypes"],"mappings":"AAYO,MAAMA,CAAAA,CAAuB,QAAA,CAEvBC,CAAAA,CAAmB,CAC9B,MAAO,CAAA,EAAGD,CAAoB,CAAA,MAAA,CAAA,CAC9B,IAAA,CAAM,GAAGA,CAAoB,CAAA,KAAA,CAAA,CAC7B,MAAA,CAAQ,CAAA,EAAGA,CAAoB,CAAA,OAAA,CACjC","file":"events.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const DrawerEventNamespace = 'Drawer';\n\nexport const DrawerEventTypes = {\n close: `${DrawerEventNamespace}:close`,\n open: `${DrawerEventNamespace}:open`,\n toggle: `${DrawerEventNamespace}:toggle`,\n} as const;\n"]}
|
|
@@ -1,48 +1,94 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ComponentPropsWithRef } from 'react';
|
|
4
|
+
import { UniqueId } from '@accelint/core';
|
|
5
|
+
import { ViewStackViewProps } from '../view-stack/types.js';
|
|
6
|
+
import { DrawerProps, DrawerLayoutProps, DrawerMenuProps, DrawerMenuItemProps, DrawerTitleProps, DrawerTriggerProps, DrawerContextValue } from './types.js';
|
|
7
|
+
import '@accelint/bus';
|
|
8
|
+
import 'react-aria-components';
|
|
9
|
+
import '../view-stack/events.js';
|
|
10
|
+
import '../../lib/types.js';
|
|
3
11
|
import '@react-types/shared';
|
|
4
|
-
import '
|
|
12
|
+
import 'tailwind-variants';
|
|
13
|
+
import '../button/types.js';
|
|
14
|
+
import '../button/styles.js';
|
|
15
|
+
import 'tailwind-merge';
|
|
16
|
+
import './events.js';
|
|
17
|
+
import './styles.js';
|
|
5
18
|
|
|
6
|
-
declare const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
Menu: {
|
|
17
|
-
({ children, className, position, ...props }: DrawerMenuProps): react_jsx_runtime.JSX.Element;
|
|
18
|
-
displayName: string;
|
|
19
|
-
Item: {
|
|
20
|
-
({ id, children, className, ...rest }: DrawerMenuItemProps): react_jsx_runtime.JSX.Element;
|
|
21
|
-
displayName: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
Trigger: {
|
|
25
|
-
({ for: drawerId, children, behavior, }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
|
|
26
|
-
displayName: string;
|
|
27
|
-
};
|
|
28
|
-
Panel: {
|
|
29
|
-
({ id, children, className, ...props }: DrawerPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
30
|
-
displayName: string;
|
|
31
|
-
};
|
|
32
|
-
Header: {
|
|
33
|
-
({ children, className }: DrawerContainerProps): react_jsx_runtime.JSX.Element;
|
|
34
|
-
displayName: string;
|
|
35
|
-
};
|
|
36
|
-
Title: ({ children, className }: DrawerContainerProps) => react_jsx_runtime.JSX.Element;
|
|
37
|
-
Footer: {
|
|
38
|
-
({ children, className }: DrawerContainerProps): react_jsx_runtime.JSX.Element;
|
|
39
|
-
displayName: string;
|
|
40
|
-
};
|
|
41
|
-
Content: {
|
|
42
|
-
({ children, className }: DrawerContainerProps): react_jsx_runtime.JSX.Element;
|
|
43
|
-
displayName: string;
|
|
44
|
-
};
|
|
45
|
-
Provider: ({ children, onStateChange }: DrawerProviderProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
declare const DrawerContext: react.Context<DrawerContextValue>;
|
|
20
|
+
declare const DrawerEventHandlers: {
|
|
21
|
+
readonly close: (stack: UniqueId) => void;
|
|
22
|
+
readonly open: (view: UniqueId) => void;
|
|
23
|
+
readonly toggle: (view: UniqueId) => void;
|
|
24
|
+
readonly back: (stack: UniqueId) => void;
|
|
25
|
+
readonly clear: (stack: UniqueId) => void;
|
|
26
|
+
readonly push: (view: UniqueId) => void;
|
|
27
|
+
readonly reset: (stack: UniqueId) => void;
|
|
46
28
|
};
|
|
29
|
+
declare function DrawerTrigger({ children, for: events }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
declare namespace DrawerTrigger {
|
|
31
|
+
var displayName: string;
|
|
32
|
+
}
|
|
33
|
+
declare function DrawerLayoutMain({ className, ...rest }: ComponentPropsWithRef<'main'>): react_jsx_runtime.JSX.Element;
|
|
34
|
+
declare namespace DrawerLayoutMain {
|
|
35
|
+
var displayName: string;
|
|
36
|
+
}
|
|
37
|
+
declare function DrawerLayout({ className, extend, push, ...rest }: DrawerLayoutProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
declare namespace DrawerLayout {
|
|
39
|
+
var displayName: string;
|
|
40
|
+
var Main: typeof DrawerLayoutMain;
|
|
41
|
+
}
|
|
42
|
+
declare function DrawerMenuItem({ for: id, children, className, toggle, views, ...rest }: DrawerMenuItemProps): react_jsx_runtime.JSX.Element | null;
|
|
43
|
+
declare namespace DrawerMenuItem {
|
|
44
|
+
var displayName: string;
|
|
45
|
+
}
|
|
46
|
+
declare function DrawerMenu({ className, position, children, ...rest }: DrawerMenuProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
declare namespace DrawerMenu {
|
|
48
|
+
var displayName: string;
|
|
49
|
+
var Item: typeof DrawerMenuItem;
|
|
50
|
+
}
|
|
51
|
+
declare function DrawerPanel({ className, ...rest }: ComponentPropsWithRef<'div'>): react_jsx_runtime.JSX.Element;
|
|
52
|
+
declare namespace DrawerPanel {
|
|
53
|
+
var displayName: string;
|
|
54
|
+
}
|
|
55
|
+
declare function DrawerView({ id, children, className, ...rest }: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime.JSX.Element;
|
|
56
|
+
declare namespace DrawerView {
|
|
57
|
+
var displayName: string;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* To change size of title, use the `level` prop: `1`-`3` (large), `4`-`6` (medium).
|
|
61
|
+
*
|
|
62
|
+
* `level` also changes the semantic heading tag number `h1`-`h6`
|
|
63
|
+
*/
|
|
64
|
+
declare function DrawerHeaderTitle({ className, level, ...rest }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
|
|
65
|
+
declare namespace DrawerHeaderTitle {
|
|
66
|
+
var displayName: string;
|
|
67
|
+
}
|
|
68
|
+
declare function DrawerHeader({ className, ...rest }: ComponentPropsWithRef<'header'>): react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare namespace DrawerHeader {
|
|
70
|
+
var displayName: string;
|
|
71
|
+
var Title: typeof DrawerHeaderTitle;
|
|
72
|
+
}
|
|
73
|
+
declare function DrawerContent({ className, ...rest }: ComponentPropsWithRef<'div'>): react_jsx_runtime.JSX.Element;
|
|
74
|
+
declare namespace DrawerContent {
|
|
75
|
+
var displayName: string;
|
|
76
|
+
}
|
|
77
|
+
declare function DrawerFooter({ className, ...rest }: ComponentPropsWithRef<'footer'>): react_jsx_runtime.JSX.Element;
|
|
78
|
+
declare namespace DrawerFooter {
|
|
79
|
+
var displayName: string;
|
|
80
|
+
}
|
|
81
|
+
declare function Drawer({ id, children, className, defaultView, placement, size, onChange, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
|
|
82
|
+
declare namespace Drawer {
|
|
83
|
+
var displayName: string;
|
|
84
|
+
var Layout: typeof DrawerLayout;
|
|
85
|
+
var Menu: typeof DrawerMenu;
|
|
86
|
+
var Panel: typeof DrawerPanel;
|
|
87
|
+
var View: typeof DrawerView;
|
|
88
|
+
var Header: typeof DrawerHeader;
|
|
89
|
+
var Content: typeof DrawerContent;
|
|
90
|
+
var Footer: typeof DrawerFooter;
|
|
91
|
+
var Trigger: typeof DrawerTrigger;
|
|
92
|
+
}
|
|
47
93
|
|
|
48
|
-
export { Drawer };
|
|
94
|
+
export { Drawer, DrawerContext, DrawerEventHandlers };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {jsx}from'react/jsx-runtime';import'client-only';import {
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import'client-only';import {containsExactChildren}from'./../../lib/react.js';import {Broadcast}from'@accelint/bus';import {isUUID}from'@accelint/core';import {Pressable}from'@react-aria/interactions';import {createContext,useRef,useState,useCallback,useEffect,useContext}from'react';import {composeRenderProps,Heading,Header}from'react-aria-components';import {ToggleButton}from'../button/index.js';import {Icon}from'../icon/index.js';import {ViewStackEventHandlers,ViewStack,ViewStackContext}from'../view-stack/index.js';import {ViewStackEventTypes}from'../view-stack/events.js';import {DrawerEventTypes}from'./events.js';import {DrawerStyles,DrawerMenuStyles,DrawerTitleStyles}from'./styles.js';const {layout:j,main:ee,drawer:re,panel:te,view:ae,header:ne,content:oe,footer:ie}=DrawerStyles(),{menu:se,item:pe}=DrawerMenuStyles(),l=Broadcast.getInstance(),R=createContext({register:()=>{},unregister:()=>{}}),le={...ViewStackEventHandlers,close:ViewStackEventHandlers.clear,open:e=>l.emit(DrawerEventTypes.open,{view:e}),toggle:e=>l.emit(DrawerEventTypes.toggle,{view:e})};function g({children:e,for:r}){const{parent:n}=useContext(ViewStackContext);function o(){for(const i of Array.isArray(r)?r:[r]){let[p,m]=isUUID(i)?["push",i]:i.split(":");m??=n,m&&le[p](m);}}return jsx(Pressable,{onPress:o,children:e})}g.displayName="Drawer.Trigger";function q({className:e,...r}){return jsx("main",{...r,className:ee({className:e})})}q.displayName="Drawer.Layout.Main";function P({className:e,extend:r="left right",push:n,...o}){return jsx("div",{...o,className:j({className:e}),"data-extend":r,"data-push":n})}P.displayName="Drawer.Layout",P.Main=q;function N({for:e,children:r,className:n,toggle:o,views:i,...p}){const{parent:m,stack:y}=useContext(ViewStackContext),c=y.at(-1),w=o?"toggle":"open";return m?jsx(g,{for:`${w}:${e}`,children:jsx(ToggleButton,{...p,className:composeRenderProps(n,u=>pe({className:u})),role:"tab",variant:"icon",isSelected:e===c||!!i?.some(u=>e===u),children:composeRenderProps(r,u=>jsx(Icon,{children:u}))})}):null}N.displayName="Drawer.Menu.Item";function d({className:e,position:r="center",children:n,...o}){return containsExactChildren({children:n,componentName:d.displayName,restrictions:[[N,{min:1}],[g,{min:0,max:0}]]}),jsx("nav",{...o,className:se({position:r,className:e}),children:n})}d.displayName="Drawer.Menu",d.Item=N;function h({className:e,...r}){return jsx("div",{...r,className:te({className:e})})}h.displayName="Drawer.Panel";function H({id:e,children:r,className:n,...o}){const{register:i,unregister:p}=useContext(R);return useEffect(()=>{i(e);},[i,p,e]),jsx(ViewStack.View,{id:e,children:jsx("div",{...o,className:ae({className:n}),role:"tabpanel",children:r})})}H.displayName="Drawer.View";function b({className:e,level:r,...n}){return jsx(Heading,{...n,className:DrawerTitleStyles({className:e,level:r}),level:r})}b.displayName="Drawer.Title";function C({className:e,...r}){return jsx(Header,{...r,className:ne({className:e})})}C.displayName="Drawer.Header",C.Title=b;function L({className:e,...r}){return jsx("div",{...r,className:oe({className:e})})}L.displayName="Drawer.Content";function W({className:e,...r}){return jsx("footer",{...r,className:ie({className:e})})}W.displayName="Drawer.Footer";function s({id:e,children:r,className:n,defaultView:o,placement:i="left",size:p="medium",onChange:m,...y}){containsExactChildren({children:r,componentName:s.displayName,restrictions:[[d,{min:0,max:1}],[h,{min:1,max:1}]]});const c=useRef(new Set),[w,u]=useState(o||null),T=useCallback(a=>{c.current.has(a?.payload?.view)&&(l.emit(ViewStackEventTypes.clear,{stack:e}),l.emit(ViewStackEventTypes.push,a.payload));},[e]),V=useCallback(a=>{c.current.has(a?.payload?.view)&&(l.emit(ViewStackEventTypes.clear,{stack:e}),w!==a?.payload?.view&&l.emit(ViewStackEventTypes.push,a.payload));},[e,w]);return useEffect(()=>{const a=[l.on(DrawerEventTypes.open,T),l.on(DrawerEventTypes.toggle,V)];return ()=>{for(const A of a)A();}},[T,V]),jsx(R.Provider,{value:{register:a=>c.current.add(a),unregister:a=>c.current.delete(a)},children:jsx(ViewStack,{id:e,defaultView:o,onChange:a=>{u(a),m?.(a);},children:jsx("div",{...y,className:re({className:n}),"data-open":!!w||null,"data-placement":i,"data-size":p,children:r})})})}s.displayName="Drawer",s.Layout=P,s.Menu=d,s.Panel=h,s.View=H,s.Header=C,s.Content=L,s.Footer=W,s.Trigger=g;export{s as Drawer,R as DrawerContext,le as DrawerEventHandlers};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/drawer/index.tsx"],"names":["panel","title","menu","DrawerMenuStyles","O","children","onStateChange","useDrawersState","DrawersContext","R","drawerState","B","DrawerLayout","className","extend","jsx","push","isOpen","getDrawerState","registerDrawer","initialState","createDefaultDrawerState","id","$","k","onOpenChange","DrawerContext","currentState","t","H","rest","placement","size","DrawerMenu","position","props","DrawerMenuItem","isSelectedMenuItem","w","handlePress","openDrawer","state","Button","h","item","isSelected","Icon","F","u","toggleDrawer","handleOnPress","behavior","L","drawerId","closeDrawer","PressResponder","x","DrawerTrigger","b","DrawerHeader","DrawerMain","DrawerContent","Drawer","DrawerPanel","DrawerTitle","DrawerFooter","DrawerProvider"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\nimport 'client-only';\nimport { PressResponder, Pressable } from '@react-aria/interactions';\nimport { useCallback, useEffect } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport {\n DrawerContext,\n DrawersContext,\n useDrawerContext,\n useDrawersContext,\n useDrawersState,\n} from './context';\nimport { createDefaultDrawerState } from './state';\nimport { DrawerMenuStyles, DrawerStyles } from './styles';\nimport type {\n DrawerContainerProps,\n DrawerLayoutProps,\n DrawerMenuItemProps,\n DrawerMenuProps,\n DrawerPanelProps,\n DrawerProps,\n DrawerProviderProps,\n DrawerTriggerProps,\n} from './types';\n\nconst { layout, main, drawer, content, panel, header, footer, title } =\n DrawerStyles();\n\nconst { menu, item } = DrawerMenuStyles();\n\nconst DrawerProvider = ({ children, onStateChange }: DrawerProviderProps) => {\n const drawerState = useDrawersState({\n onStateChange,\n });\n\n return (\n <DrawersContext.Provider value={drawerState}>\n {children}\n </DrawersContext.Provider>\n );\n};\n\nconst DrawerLayout = ({\n children,\n className,\n extend = 'left right',\n push,\n}: DrawerLayoutProps) => {\n return (\n <div\n className={layout({ className })}\n data-extend={extend}\n data-push={push}\n >\n {children}\n </div>\n );\n};\nDrawerLayout.displayName = 'Drawer.Layout';\n\nexport const Drawer = ({\n id,\n placement = 'left',\n isOpen = false,\n size = 'medium',\n defaultSelectedMenuItemId,\n className,\n children,\n onOpenChange,\n onStateChange,\n ...rest\n}: DrawerProps) => {\n const { getDrawerState, registerDrawer } = useDrawersContext();\n const currentState = getDrawerState(id);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: this should only run if these props change\n useEffect(() => {\n const initialState = createDefaultDrawerState({\n id,\n selectedMenuItemId: defaultSelectedMenuItemId,\n isOpen,\n });\n registerDrawer(initialState, {\n onOpenChange,\n onStateChange,\n });\n }, [isOpen, size, placement]);\n\n return (\n <DrawerContext.Provider value={{ state: currentState }}>\n <div\n {...rest}\n className={drawer({ className })}\n data-placement={placement}\n data-drawer-id={id}\n data-size={size}\n data-open={currentState.isOpen || null}\n >\n {children}\n </div>\n </DrawerContext.Provider>\n );\n};\n\nconst DrawerMenu = ({\n children,\n className,\n position = 'middle',\n ...props\n}: DrawerMenuProps) => {\n return (\n <nav\n className={menu({\n position,\n className,\n })}\n {...props}\n >\n {children}\n </nav>\n );\n};\nDrawerMenu.displayName = 'Drawer.Menu';\n\nconst DrawerMenuItem = ({\n id,\n children,\n className,\n ...rest\n}: DrawerMenuItemProps) => {\n const { openDrawer, isSelectedMenuItem } = useDrawersContext();\n const { state } = useDrawerContext();\n const isSelected = isSelectedMenuItem(state.selectedMenuItemId, id);\n\n const handlePress = () => {\n openDrawer(state.id, id);\n };\n return (\n <Button\n {...rest}\n variant='icon'\n className={item({ className })}\n aria-selected={isSelected}\n aria-controls={`panel-${id}`}\n id={`tab-${id}`}\n data-selected={isSelected ? true : undefined}\n onPress={handlePress}\n >\n <Icon>{children}</Icon>\n </Button>\n );\n};\nDrawerMenuItem.displayName = 'Drawer.Menu.Item';\n\nconst DrawerPanel = ({\n id,\n children,\n className,\n ...props\n}: DrawerPanelProps) => {\n const { state } = useDrawerContext();\n const isSelected = state?.selectedMenuItemId === id;\n\n if (!isSelected) {\n return null;\n }\n\n return (\n <div\n {...props}\n className={panel({ className })}\n id={`panel-${id}`}\n role='tabpanel'\n aria-labelledby={`tab-${id}`}\n >\n {children}\n </div>\n );\n};\nDrawerPanel.displayName = 'Drawer.Panel';\n\nconst DrawerTrigger = ({\n for: drawerId,\n children,\n behavior = 'toggle',\n}: DrawerTriggerProps) => {\n const { toggleDrawer, openDrawer, closeDrawer } = useDrawersContext();\n\n const handleOnPress = useCallback(() => {\n if (behavior === 'open') {\n openDrawer(drawerId);\n } else if (behavior === 'close') {\n closeDrawer(drawerId);\n } else {\n toggleDrawer(drawerId);\n }\n }, [behavior, drawerId, openDrawer, closeDrawer, toggleDrawer]);\n\n return (\n <PressResponder onPress={handleOnPress}>\n <Pressable>{children}</Pressable>\n </PressResponder>\n );\n};\nDrawerTrigger.displayName = 'Drawer.Trigger';\n\nconst DrawerHeader = ({ children, className }: DrawerContainerProps) => {\n return (\n <div\n className={header({\n className,\n })}\n >\n {children}\n </div>\n );\n};\nDrawerHeader.displayName = 'Drawer.Header';\n\nconst DrawerTitle = ({ children, className }: DrawerContainerProps) => {\n return <div className={title({ className })}>{children}</div>;\n};\nDrawerHeader.displayName = 'Drawer.Title';\n\nconst DrawerFooter = ({ children, className }: DrawerContainerProps) => {\n return <div className={footer({ className })}>{children}</div>;\n};\nDrawerFooter.displayName = 'Drawer.Footer';\n\nconst DrawerMain = ({ children, className }: DrawerContainerProps) => (\n <main className={main({ className })}>{children}</main>\n);\nDrawerMain.displayName = 'Drawer.Main';\n\nconst DrawerContent = ({ children, className }: DrawerContainerProps) => {\n return <div className={content({ className })}>{children}</div>;\n};\nDrawerContent.displayName = 'Drawer.Content';\n\nDrawer.Layout = DrawerLayout;\nDrawer.Main = DrawerMain;\nDrawerMenu.Item = DrawerMenuItem;\nDrawer.Menu = DrawerMenu;\nDrawer.Trigger = DrawerTrigger;\nDrawer.Panel = DrawerPanel;\nDrawer.Header = DrawerHeader;\nDrawer.Title = DrawerTitle;\nDrawer.Footer = DrawerFooter;\nDrawer.Content = DrawerContent;\nDrawer.Provider = DrawerProvider;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/drawer/index.tsx"],"names":["header","DrawerStyles","item","bus","Broadcast","createContext","Z","Y","B","ViewStackEventHandlers","$","view","U","D","DrawerTrigger","children","events","useContext","ViewStackContext","handlePress","type","v","E","isUUID","id","parent","DrawerEventHandlers","event","jsx","Pressable","t","O","className","rest","main","DrawerLayoutMain","DrawerLayout","extend","push","DrawerMenuItem","toggle","action","composeRenderProps","Q","S","views","X","DrawerMenu","position","I","DrawerPanel","panel","register","DrawerContext","useEffect","ViewStack","x","M","DrawerHeaderTitle","level","K","_","DrawerHeader","J","DrawerContent","content","defaultView","placement","size","activeView","setActiveView","useState","useCallback","data","G","ViewStackEventTypes","k","handleToggle","f","listeners","DrawerEventTypes","off","handleOpen","onChange","drawer","Drawer","DrawerFooter"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { containsExactChildren } from '@/lib/react';\nimport { Broadcast } from '@accelint/bus';\nimport { type UniqueId, isUUID } from '@accelint/core';\nimport { Pressable } from '@react-aria/interactions';\nimport {\n type ComponentPropsWithRef,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Header, Heading, composeRenderProps } from 'react-aria-components';\nimport { ToggleButton } from '../button';\nimport { Icon } from '../icon';\nimport {\n ViewStack,\n ViewStackContext,\n ViewStackEventHandlers,\n} from '../view-stack';\nimport { ViewStackEventTypes } from '../view-stack/events';\nimport type { ViewStackViewProps } from '../view-stack/types';\nimport { DrawerEventTypes } from './events';\nimport { DrawerMenuStyles, DrawerStyles, DrawerTitleStyles } from './styles';\nimport type {\n DrawerContextValue,\n DrawerEvent,\n DrawerLayoutProps,\n DrawerMenuItemProps,\n DrawerMenuProps,\n DrawerOpenEvent,\n DrawerProps,\n DrawerTitleProps,\n DrawerToggleEvent,\n DrawerTriggerProps,\n} from './types';\n\nconst { layout, main, drawer, panel, view, header, content, footer } =\n DrawerStyles();\nconst { menu, item } = DrawerMenuStyles();\nconst bus = Broadcast.getInstance<DrawerEvent>();\n\nexport const DrawerContext = createContext<DrawerContextValue>({\n register: () => undefined,\n unregister: () => undefined,\n});\n\nexport const DrawerEventHandlers = {\n ...ViewStackEventHandlers,\n close: ViewStackEventHandlers.clear,\n open: (view: UniqueId) => bus.emit(DrawerEventTypes.open, { view }),\n toggle: (view: UniqueId) => bus.emit(DrawerEventTypes.toggle, { view }),\n} as const;\n\nfunction DrawerTrigger({ children, for: events }: DrawerTriggerProps) {\n const { parent } = useContext(ViewStackContext);\n\n function handlePress() {\n for (const type of Array.isArray(events) ? events : [events]) {\n let [event, id] = (isUUID(type) ? ['push', type] : type.split(':')) as [\n 'back' | 'clear' | 'close' | 'open' | 'push' | 'reset' | 'toggle',\n UniqueId | undefined | null,\n ];\n\n id ??= parent;\n\n if (!id) {\n continue;\n }\n\n DrawerEventHandlers[event](id);\n }\n }\n\n return <Pressable onPress={handlePress}>{children}</Pressable>;\n}\nDrawerTrigger.displayName = 'Drawer.Trigger';\n\nfunction DrawerLayoutMain({\n className,\n ...rest\n}: ComponentPropsWithRef<'main'>) {\n return <main {...rest} className={main({ className })} />;\n}\nDrawerLayoutMain.displayName = 'Drawer.Layout.Main';\n\nfunction DrawerLayout({\n className,\n extend = 'left right',\n push,\n ...rest\n}: DrawerLayoutProps) {\n return (\n <div\n {...rest}\n className={layout({ className })}\n data-extend={extend}\n data-push={push}\n />\n );\n}\nDrawerLayout.displayName = 'Drawer.Layout';\nDrawerLayout.Main = DrawerLayoutMain;\n\nfunction DrawerMenuItem({\n for: id,\n children,\n className,\n toggle,\n views,\n ...rest\n}: DrawerMenuItemProps) {\n const { parent, stack } = useContext(ViewStackContext);\n const view = stack.at(-1);\n const action = toggle ? 'toggle' : 'open';\n\n if (!parent) {\n return null;\n }\n\n return (\n <DrawerTrigger for={`${action}:${id}`}>\n <ToggleButton\n {...rest}\n className={composeRenderProps(className, (className) =>\n item({ className }),\n )}\n role='tab'\n variant='icon'\n isSelected={id === view || !!views?.some((view) => id === view)}\n >\n {composeRenderProps(children, (children) => (\n <Icon>{children}</Icon>\n ))}\n </ToggleButton>\n </DrawerTrigger>\n );\n}\nDrawerMenuItem.displayName = 'Drawer.Menu.Item';\n\nfunction DrawerMenu({\n className,\n position = 'center',\n children,\n ...rest\n}: DrawerMenuProps) {\n containsExactChildren({\n children,\n componentName: DrawerMenu.displayName,\n restrictions: [\n [DrawerMenuItem, { min: 1 }],\n [DrawerTrigger, { min: 0, max: 0 }],\n ],\n });\n return (\n <nav\n {...rest}\n className={menu({\n position,\n className,\n })}\n >\n {children}\n </nav>\n );\n}\nDrawerMenu.displayName = 'Drawer.Menu';\nDrawerMenu.Item = DrawerMenuItem;\n\nfunction DrawerPanel({ className, ...rest }: ComponentPropsWithRef<'div'>) {\n return <div {...rest} className={panel({ className })} />;\n}\nDrawerPanel.displayName = 'Drawer.Panel';\n\nfunction DrawerView({\n id,\n children,\n className,\n ...rest\n}: ViewStackViewProps & ComponentPropsWithRef<'div'>) {\n const { register, unregister } = useContext(DrawerContext);\n\n useEffect(() => {\n register(id);\n\n () => unregister(id);\n }, [register, unregister, id]);\n\n return (\n <ViewStack.View id={id}>\n <div {...rest} className={view({ className })} role='tabpanel'>\n {children}\n </div>\n </ViewStack.View>\n );\n}\nDrawerView.displayName = 'Drawer.View';\n\n/**\n * To change size of title, use the `level` prop: `1`-`3` (large), `4`-`6` (medium).\n *\n * `level` also changes the semantic heading tag number `h1`-`h6`\n */\nfunction DrawerHeaderTitle({ className, level, ...rest }: DrawerTitleProps) {\n return (\n <Heading\n {...rest}\n className={DrawerTitleStyles({ className, level })}\n level={level}\n />\n );\n}\nDrawerHeaderTitle.displayName = 'Drawer.Title';\n\nfunction DrawerHeader({ className, ...rest }: ComponentPropsWithRef<'header'>) {\n return <Header {...rest} className={header({ className })} />;\n}\nDrawerHeader.displayName = 'Drawer.Header';\nDrawerHeader.Title = DrawerHeaderTitle;\n\nfunction DrawerContent({ className, ...rest }: ComponentPropsWithRef<'div'>) {\n return <div {...rest} className={content({ className })} />;\n}\nDrawerContent.displayName = 'Drawer.Content';\n\nfunction DrawerFooter({ className, ...rest }: ComponentPropsWithRef<'footer'>) {\n return <footer {...rest} className={footer({ className })} />;\n}\nDrawerFooter.displayName = 'Drawer.Footer';\n\nexport function Drawer({\n id,\n children,\n className,\n defaultView,\n placement = 'left',\n size = 'medium',\n onChange,\n ...rest\n}: DrawerProps) {\n containsExactChildren({\n children,\n componentName: Drawer.displayName,\n restrictions: [\n [DrawerMenu, { min: 0, max: 1 }],\n [DrawerPanel, { min: 1, max: 1 }],\n ],\n });\n\n const views = useRef(new Set<UniqueId>());\n const [activeView, setActiveView] = useState<UniqueId | null>(\n defaultView || null,\n );\n\n const handleOpen = useCallback(\n (data: DrawerOpenEvent) => {\n if (views.current.has(data?.payload?.view)) {\n bus.emit(ViewStackEventTypes.clear, { stack: id });\n bus.emit(ViewStackEventTypes.push, data.payload);\n }\n },\n [id],\n );\n const handleToggle = useCallback(\n (data: DrawerToggleEvent) => {\n if (views.current.has(data?.payload?.view)) {\n bus.emit(ViewStackEventTypes.clear, { stack: id });\n if (activeView !== data?.payload?.view) {\n bus.emit(ViewStackEventTypes.push, data.payload);\n }\n }\n },\n [id, activeView],\n );\n\n useEffect(() => {\n const listeners = [\n bus.on(DrawerEventTypes.open, handleOpen),\n bus.on(DrawerEventTypes.toggle, handleToggle),\n ];\n\n return () => {\n for (const off of listeners) {\n off();\n }\n };\n }, [handleOpen, handleToggle]);\n\n return (\n <DrawerContext.Provider\n value={{\n register: (view: UniqueId) => views.current.add(view),\n unregister: (view: UniqueId) => views.current.delete(view),\n }}\n >\n <ViewStack\n id={id}\n defaultView={defaultView}\n onChange={(view) => {\n setActiveView(view);\n onChange?.(view);\n }}\n >\n <div\n {...rest}\n className={drawer({ className })}\n data-open={!!activeView || null}\n data-placement={placement}\n data-size={size}\n >\n {children}\n </div>\n </ViewStack>\n </DrawerContext.Provider>\n );\n}\nDrawer.displayName = 'Drawer';\n\nDrawer.Layout = DrawerLayout;\nDrawer.Menu = DrawerMenu;\nDrawer.Panel = DrawerPanel;\nDrawer.View = DrawerView;\nDrawer.Header = DrawerHeader;\nDrawer.Content = DrawerContent;\nDrawer.Footer = DrawerFooter;\nDrawer.Trigger = DrawerTrigger;\n"]}
|