@accelint/design-toolkit 2.5.0 → 3.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.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/badge/index.d.ts +24 -0
- package/dist/components/badge/index.js.map +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 +28 -106
- 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 +3 -3
- 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.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.js +1 -1
- package/dist/components/color-picker/styles.js.map +1 -1
- package/dist/components/combobox-field/index.d.ts +19 -0
- package/dist/components/combobox-field/index.js +2 -0
- package/dist/components/combobox-field/index.js.map +1 -0
- package/dist/components/combobox-field/styles.d.ts +72 -0
- package/dist/components/combobox-field/styles.js +2 -0
- package/dist/components/combobox-field/styles.js.map +1 -0
- package/dist/components/combobox-field/types.d.ts +29 -0
- package/dist/components/date-field/index.d.ts +44 -0
- package/dist/components/date-field/index.js.map +1 -1
- package/dist/components/date-field/styles.d.ts +3 -3
- package/dist/components/date-field/styles.js +1 -1
- package/dist/components/date-field/styles.js.map +1 -1
- package/dist/components/dialog/index.d.ts +26 -4
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- 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/hotkey/index.d.ts +56 -0
- package/dist/components/hotkey/index.js +2 -0
- package/dist/components/hotkey/index.js.map +1 -0
- package/dist/components/hotkey/styles.d.ts +53 -0
- package/dist/components/hotkey/styles.js +2 -0
- package/dist/components/hotkey/styles.js.map +1 -0
- package/dist/components/hotkey/types.d.ts +8 -0
- package/dist/components/hotkey/types.js +2 -0
- package/dist/components/hotkey/types.js.map +1 -0
- package/dist/components/icon/index.d.ts +29 -0
- package/dist/components/icon/index.js.map +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 +2 -24
- 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/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 +19 -43
- package/dist/components/menu/styles.js +1 -1
- package/dist/components/menu/styles.js.map +1 -1
- package/dist/components/menu/types.d.ts +17 -15
- 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 +3 -3
- package/dist/components/options/styles.js +1 -1
- package/dist/components/options/styles.js.map +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/query-builder/index.d.ts +24 -0
- package/dist/components/query-builder/index.js.map +1 -1
- package/dist/components/query-builder/value-selector.js +1 -1
- package/dist/components/query-builder/value-selector.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 +3 -3
- package/dist/components/radio/styles.js +1 -1
- package/dist/components/radio/styles.js.map +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 +67 -0
- package/dist/components/select-field/index.js +2 -0
- package/dist/components/select-field/index.js.map +1 -0
- package/dist/components/select-field/styles.d.ts +60 -0
- package/dist/components/select-field/styles.js +2 -0
- package/dist/components/select-field/styles.js.map +1 -0
- package/dist/components/select-field/types.d.ts +27 -0
- package/dist/components/select-field/types.js +2 -0
- package/dist/components/select-field/types.js.map +1 -0
- package/dist/components/slider/index.d.ts +36 -2
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- 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 +23 -21
- 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 +3 -3
- 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 +3 -3
- 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.map +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 +31 -0
- package/dist/components/view-stack/index.js +2 -0
- package/dist/components/view-stack/index.js.map +1 -0
- package/dist/components/view-stack/types.d.ts +62 -0
- package/dist/components/view-stack/types.js +2 -0
- package/dist/components/view-stack/types.js.map +1 -0
- package/dist/index.css +20 -0
- package/dist/index.d.ts +24 -17
- package/dist/index.js +1 -1
- package/dist/lib/types.d.ts +6 -2
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +1081 -676
- package/dist/variants/variants.css +6 -5
- package/package.json +11 -6
- 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/combobox/index.d.ts +0 -27
- package/dist/components/combobox/index.js +0 -2
- package/dist/components/combobox/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
- package/dist/components/navigation-stack/index.d.ts +0 -20
- package/dist/components/navigation-stack/index.js +0 -2
- package/dist/components/navigation-stack/index.js.map +0 -1
- package/dist/components/navigation-stack/types.d.ts +0 -31
- /package/dist/components/{navigation-stack → combobox-field}/types.js +0 -0
- /package/dist/components/{navigation-stack → combobox-field}/types.js.map +0 -0
|
@@ -11,6 +11,21 @@ declare function ClassificationBadgeProvider({ children, ...props }: ProviderPro
|
|
|
11
11
|
declare namespace ClassificationBadgeProvider {
|
|
12
12
|
var displayName: string;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* ClassificationBadge - A specialized badge for security and data classification
|
|
16
|
+
*
|
|
17
|
+
* Provides standardized visual indicators for data classification levels such as
|
|
18
|
+
* confidential, secret, or public information. Designed for compliance with
|
|
19
|
+
* security standards and information governance requirements.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Basic classification badge
|
|
23
|
+
* <ClassificationBadge level="confidential" />
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* // Classification with custom styling
|
|
27
|
+
* <ClassificationBadge level="secret" />
|
|
28
|
+
*/
|
|
14
29
|
declare function ClassificationBadge({ ref, ...props }: ClassificationBadgeProps): react_jsx_runtime.JSX.Element;
|
|
15
30
|
declare namespace ClassificationBadge {
|
|
16
31
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/classification-badge/index.tsx"],"names":["c","props","o","ClassificationBadgeProvider","ref","useContextProps","ClassificationBadgeStylesDefaults","m","rest","C","ClassificationBadge"],"mappings":"sNAsByE,CAAA,CAAAA,aAAA,CAAI,IAE7E,EAAA,SACE,CAAA,CAAA,CAAA,QACA,CAAA,CAAGC,CACL,GACE,CAAA,CAAA,CAAA,CAAA,OAC8BC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,KAClC,CAAA,CAAA,CAAA,QAGP,CACAC,CAAAA,CAA4B,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/classification-badge/index.tsx"],"names":["c","props","o","ClassificationBadgeProvider","ref","useContextProps","ClassificationBadgeStylesDefaults","m","rest","C","ClassificationBadge"],"mappings":"sNAsByE,CAAA,CAAAA,aAAA,CAAI,IAE7E,EAAA,SACE,CAAA,CAAA,CAAA,QACA,CAAA,CAAGC,CACL,GACE,CAAA,CAAA,CAAA,CAAA,OAC8BC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,KAClC,CAAA,CAAA,CAAA,QAGP,CACAC,CAAAA,CAA4B,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,8BAiBnC,CAAA,SACL,CAAA,CAAA,CAAAC,GACA,CAAA,CAAGH,CACL,GACE,CAACA,CAAAA,CAAOG,CAAG,CAAA,CAAIC,CAAAA,CACbJ,EACAG,eAAAA,CAAAA,CAAO,CAAA,CAAA,EAAA,IAIT,CAAA,CAAA,CAAA,CAAA,cAEE,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,IAAO,CAAA,CAAA,CAAA,gBACGE,CAAkC,CAAA,CAAAC,iCAAA,CAAA,OACzCC,CACL,IAEA,CAAA,CAAA,CAAA,CAAA,iBAEK,CAAGA,CAAAA,cAEF,CAAAC,yBAAA,CAAA,CAAA,OACA,CAAA,CAAA,CAAA,SACD,CACD,CAAA,CAAA,CAAA,CAAA,WAEC,CAAA,CAAA,CAAA,QAGP,CACAC,CAAAA,CAAoB,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,qBACd,CAAA,CAAA,CAAA,QAAWP,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\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport { type ContextValue, useContextProps } from 'react-aria-components';\nimport {\n ClassificationBadgeStyles,\n ClassificationBadgeStylesDefaults,\n} from './styles';\nimport type { ClassificationBadgeProps } from './types';\n\nexport const ClassificationBadgeContext =\n createContext<ContextValue<ClassificationBadgeProps, HTMLSpanElement>>(null);\n\nfunction ClassificationBadgeProvider({\n children,\n ...props\n}: ProviderProps<ClassificationBadgeProps>) {\n return (\n <ClassificationBadgeContext.Provider value={props}>\n {children}\n </ClassificationBadgeContext.Provider>\n );\n}\nClassificationBadgeProvider.displayName = 'ClassificationBadge.Provider';\n\n/**\n * ClassificationBadge - A specialized badge for security and data classification\n *\n * Provides standardized visual indicators for data classification levels such as\n * confidential, secret, or public information. Designed for compliance with\n * security standards and information governance requirements.\n *\n * @example\n * // Basic classification badge\n * <ClassificationBadge level=\"confidential\" />\n *\n * @example\n * // Classification with custom styling\n * <ClassificationBadge level=\"secret\" />\n */\nexport function ClassificationBadge({\n ref,\n ...props\n}: ClassificationBadgeProps) {\n [props, ref] = useContextProps(\n props,\n ref ?? null,\n ClassificationBadgeContext,\n );\n\n const {\n children,\n className,\n size = 'medium',\n variant = ClassificationBadgeStylesDefaults.variant,\n ...rest\n } = props;\n\n return (\n <span\n {...rest}\n className={ClassificationBadgeStyles({\n variant,\n className,\n })}\n data-size={size}\n >\n {children}\n </span>\n );\n}\nClassificationBadge.displayName = 'ClassificationBadge';\nClassificationBadge.Provider = ClassificationBadgeProvider;\n"]}
|
|
@@ -11,6 +11,17 @@ declare function ClassificationBannerProvider({ children, ...props }: ProviderPr
|
|
|
11
11
|
declare namespace ClassificationBannerProvider {
|
|
12
12
|
var displayName: string;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* ClassificationBanner - A prominent banner for displaying security classification
|
|
16
|
+
*
|
|
17
|
+
* Provides a full-width banner component for displaying security classification
|
|
18
|
+
* information at the top or bottom of pages. Essential for applications handling
|
|
19
|
+
* classified or sensitive information requiring clear visual indicators.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Top classification banner
|
|
23
|
+
* <ClassificationBanner variant="confidential" />
|
|
24
|
+
*/
|
|
14
25
|
declare function ClassificationBanner({ ref, ...props }: ClassificationBannerProps): react_jsx_runtime.JSX.Element;
|
|
15
26
|
declare namespace ClassificationBanner {
|
|
16
27
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/classification-banner/index.tsx"],"names":["createContext","f","props","t","ClassificationBannerProvider","ref","useContextProps","ClassificationBannerStylesDefaults","m","rest","p","ClassificationBanner"],"mappings":"kNAsBEA,MAAuE,CAAA,CAAAC,aAAA,CAAI,IAE7E,EAAA,SACE,CAAA,CAAA,CAAA,UACGC,CACL,GACE,CAAA,CAAA,CAAA,CAAA,OAC+BC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,KACnC,CAAA,CAAA,CAAA,QAGP,CACAC,CAAAA,CAA6B,eAAc,CAAA,+
|
|
1
|
+
{"version":3,"sources":["../../../src/components/classification-banner/index.tsx"],"names":["createContext","f","props","t","ClassificationBannerProvider","ref","useContextProps","ClassificationBannerStylesDefaults","m","rest","p","ClassificationBanner"],"mappings":"kNAsBEA,MAAuE,CAAA,CAAAC,aAAA,CAAI,IAE7E,EAAA,SACE,CAAA,CAAA,CAAA,UACGC,CACL,GACE,CAAA,CAAA,CAAA,CAAA,OAC+BC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,KACnC,CAAA,CAAA,CAAA,QAGP,CACAC,CAAAA,CAA6B,eAAc,CAAA,+BAapC,CAAA,SACL,CAAA,CAAA,CAAAC,KACGH,CACL,GACE,CAACA,CAAAA,CAAOG,CAAG,CAAA,CAAIC,CAAAA,CACbJ,CAAAA,CACAG,eAAAA,CAAAA,CAAO,CAAA,CAAA,EAAA,IAIT,CAAA,CAAA,CAAA,CAAA,eAEE,CAAA,CAAA,CAAA,OAAUE,CAAmC,CAAA,CAAAC,kCAAA,CAAA,OAC7C,CAAA,QACA,CAAA,CAAGC,CACL,GAAIP,CAEJ,CAAA,CAAA,CAAA,CAAA,OACGC,GAAA,CAAA,KACE,CAAGM,IACJ,CAAA,CAAA,SACE,CAAAC,0BAAA,CAAA,CAAA,OACA,CAAA,CAAA,CAAA,SACD,CAEA,YAGP,CACAC,CAAAA,CAAqB,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,sBACd,CAAA,CAAA,CAAA,QAAWP,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\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport { type ContextValue, useContextProps } from 'react-aria-components';\nimport {\n ClassificationBannerStyles,\n ClassificationBannerStylesDefaults,\n} from './styles';\nimport type { ClassificationBannerProps } from './types';\n\nexport const ClassificationBannerContext =\n createContext<ContextValue<ClassificationBannerProps, HTMLDivElement>>(null);\n\nfunction ClassificationBannerProvider({\n children,\n ...props\n}: ProviderProps<ClassificationBannerProps>) {\n return (\n <ClassificationBannerContext.Provider value={props}>\n {children}\n </ClassificationBannerContext.Provider>\n );\n}\nClassificationBannerProvider.displayName = 'ClassificationBanner.Provider';\n\n/**\n * ClassificationBanner - A prominent banner for displaying security classification\n *\n * Provides a full-width banner component for displaying security classification\n * information at the top or bottom of pages. Essential for applications handling\n * classified or sensitive information requiring clear visual indicators.\n *\n * @example\n * // Top classification banner\n * <ClassificationBanner variant=\"confidential\" />\n */\nexport function ClassificationBanner({\n ref,\n ...props\n}: ClassificationBannerProps) {\n [props, ref] = useContextProps(\n props,\n ref ?? null,\n ClassificationBannerContext,\n );\n\n const {\n className,\n variant = ClassificationBannerStylesDefaults.variant,\n children,\n ...rest\n } = props;\n\n return (\n <div\n {...rest}\n className={ClassificationBannerStyles({\n variant,\n className,\n })}\n >\n {children}\n </div>\n );\n}\nClassificationBanner.displayName = 'ClassificationBanner';\nClassificationBanner.Provider = ClassificationBannerProvider;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';const i=tv({slots:{picker:"flex flex-wrap gap-s",item:["w-fit cursor-pointer outline outline-transparent","focus:outline-interactive-hover","hover:outline-interactive-hover","selected:outline-highlight"],swatch:"size-l"}});export{i as ColorPickerStyles};//# sourceMappingURL=styles.js.map
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const i=tv({slots:{picker:"flex flex-wrap gap-s",item:["w-fit cursor-pointer outline outline-transparent","focus-visible:outline-interactive-hover","hover:outline-interactive-hover","selected:cursor-default selected:outline-highlight"],swatch:"size-l"}});export{i as ColorPickerStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/color-picker/styles.ts"],"names":["e"],"mappings":"6CAeS,CACLA,EAAA,CAAA,CAAA,6FAGE,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/color-picker/styles.ts"],"names":["e"],"mappings":"6CAeS,CACLA,EAAA,CAAA,CAAA,6FAGE,CAAA,yCACA,CAAA,sFAGM,CAAA,CAAA,MAEZ,CAAC,QAAA,CAAA,CAAA","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 '@/lib/utils';\n\nexport const ColorPickerStyles = tv({\n slots: {\n picker: 'flex flex-wrap gap-s',\n item: [\n 'w-fit cursor-pointer outline outline-transparent',\n 'focus-visible:outline-interactive-hover',\n 'hover:outline-interactive-hover',\n 'selected:cursor-default selected:outline-highlight',\n ],\n swatch: 'size-l',\n },\n});\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ContextValue } from 'react-aria-components';
|
|
4
|
+
import { OptionsDataItem } from '../options/types.js';
|
|
5
|
+
import { ComboBoxFieldProps } from './types.js';
|
|
6
|
+
import '../icon/types.js';
|
|
7
|
+
import '../button/types.js';
|
|
8
|
+
import '../../lib/types.js';
|
|
9
|
+
import 'tailwind-variants';
|
|
10
|
+
import '../button/styles.js';
|
|
11
|
+
import 'tailwind-merge';
|
|
12
|
+
|
|
13
|
+
declare const ComboBoxFieldContext: react.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
|
|
14
|
+
declare function ComboBoxField<T extends OptionsDataItem>({ ref, ...props }: ComboBoxFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare namespace ComboBoxField {
|
|
16
|
+
var displayName: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { ComboBoxField, ComboBoxFieldContext };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {ChevronDown}from'@accelint/icons';import {createContext}from'react';import {useContextProps,ComboBox,composeRenderProps,Input,Button,Text,FieldError,Popover,Virtualizer,ListLayout}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Options}from'../options/index.js';import {ComboBoxStyles}from'./styles.js';const {field:q,label:w,control:H,input:A,trigger:G,description:J,error:K,popover:Q}=ComboBoxStyles(),c=createContext(null);function W({ref:t,...i}){[i,t]=useContextProps(i,t??null,c);const{children:x,classNames:e,description:a,errorMessage:b,inputProps:P,label:n,layoutOptions:v,menuTrigger:C="focus",size:m="medium",isInvalid:f,...y}=i,p=b||null,d=m==="small";return jsx(ComboBox,{...y,ref:t,className:composeRenderProps(e?.field,l=>q({className:l})),menuTrigger:C,isInvalid:f||(p?true:void 0),"data-size":m,children:({isDisabled:l,isInvalid:B,isRequired:N})=>jsxs(Fragment,{children:[!!n&&!d&&jsx(Label,{className:w({className:e?.label}),isDisabled:l,isRequired:N,children:n}),jsxs("div",{className:H({className:e?.control}),children:[jsx(Input,{...P,className:composeRenderProps(e?.input,r=>A({className:r}))}),jsx(Button,{className:composeRenderProps(e?.trigger,r=>G({className:r})),children:jsx(Icon,{size:"small",children:jsx(ChevronDown,{})})})]}),!!a&&!(d||B)&&jsx(Text,{className:J({className:e?.description}),slot:"description",children:a}),jsx(FieldError,{className:composeRenderProps(e?.error,r=>K({className:r})),children:p}),jsx(Popover,{className:composeRenderProps(e?.popover,r=>Q({className:r})),children:jsx(Virtualizer,{layout:ListLayout,layoutOptions:v,children:jsx(Options,{children:x})})})]})})}W.displayName="ComboBox";export{W as ComboBoxField,c as ComboBoxFieldContext};//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/combobox-field/index.tsx"],"names":["input","trigger","description","error","ComboBoxStyles","ComboBoxFieldProvider","k","children","props","ComboBoxFieldContext","labelProp","isInvalidProp","errorMessageProp","size","jsx","ComboBox","rest","ref","composeRenderProps","o","I","className","s","menuTrigger","errorMessage","isInvalid","Fragment","u","X","label","classNames","R","isDisabled","isRequired","control","D","Button","T","Icon","h","descriptionProp","g","M","FieldError","O","popover","z","L","S"],"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 type { ProviderProps } from '@/lib/types';\nimport { ChevronDown } from '@accelint/icons';\nimport { createContext } from 'react';\nimport {\n Button,\n ComboBox,\n type ContextValue,\n FieldError,\n Input,\n ListLayout,\n Popover,\n Text,\n Virtualizer,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport type { OptionsDataItem } from '../options/types';\nimport { ComboBoxStyles } from './styles';\nimport type { ComboBoxFieldProps } from './types';\n\nconst { field, label, control, input, trigger, description, error, popover } =\n ComboBoxStyles();\n\nexport const ComboBoxFieldContext =\n // biome-ignore lint/suspicious/noExplicitAny: Setting a type would restrict it beyond what the component allows to extend to\n createContext<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>(null);\n\nfunction ComboBoxFieldProvider<T extends OptionsDataItem>({\n children,\n ...props\n}: ProviderProps<ComboBoxFieldProps<T>>) {\n return (\n <ComboBoxFieldContext.Provider value={props}>\n {children}\n </ComboBoxFieldContext.Provider>\n );\n}\nComboBoxFieldProvider.displayName = 'ComboBoxField.Provider';\n\nexport function ComboBoxField<T extends OptionsDataItem>({\n ref,\n ...props\n}: ComboBoxFieldProps<T>) {\n [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n const {\n children,\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n inputProps,\n label: labelProp,\n layoutOptions,\n menuTrigger = 'focus',\n size = 'medium',\n isInvalid: isInvalidProp,\n ...rest\n } = props;\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <ComboBox<T>\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n menuTrigger={menuTrigger}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n data-size={size}\n >\n {(\n { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={label({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <div className={control({ className: classNames?.control })}>\n <Input\n {...inputProps}\n className={composeRenderProps(classNames?.input, (className) =>\n input({ className }),\n )}\n />\n <Button\n className={composeRenderProps(classNames?.trigger, (className) =>\n trigger({ className }),\n )}\n >\n <Icon size='small'>\n <ChevronDown />\n </Icon>\n </Button>\n </div>\n {!!descriptionProp && !(isSmall || isInvalid) && (\n <Text\n className={description({\n className: classNames?.description,\n })}\n slot='description'\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n <Popover\n className={composeRenderProps(classNames?.popover, (className) =>\n popover({ className }),\n )}\n >\n <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n <Options>{children}</Options>\n </Virtualizer>\n </Popover>\n </>\n )}\n </ComboBox>\n );\n}\nComboBoxField.displayName = 'ComboBox';\n"]}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import * as tailwind_merge from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
declare const ComboBoxStyles: tailwind_variants.TVReturnType<{
|
|
5
|
+
[key: string]: {
|
|
6
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
+
input?: tailwind_merge.ClassNameValue;
|
|
8
|
+
label?: tailwind_merge.ClassNameValue;
|
|
9
|
+
popover?: tailwind_merge.ClassNameValue;
|
|
10
|
+
trigger?: tailwind_merge.ClassNameValue;
|
|
11
|
+
control?: tailwind_merge.ClassNameValue;
|
|
12
|
+
description?: tailwind_merge.ClassNameValue;
|
|
13
|
+
field?: tailwind_merge.ClassNameValue;
|
|
14
|
+
error?: tailwind_merge.ClassNameValue;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
} | {
|
|
18
|
+
[x: string]: {
|
|
19
|
+
[x: string]: tailwind_merge.ClassNameValue | {
|
|
20
|
+
input?: tailwind_merge.ClassNameValue;
|
|
21
|
+
label?: tailwind_merge.ClassNameValue;
|
|
22
|
+
popover?: tailwind_merge.ClassNameValue;
|
|
23
|
+
trigger?: tailwind_merge.ClassNameValue;
|
|
24
|
+
control?: tailwind_merge.ClassNameValue;
|
|
25
|
+
description?: tailwind_merge.ClassNameValue;
|
|
26
|
+
field?: tailwind_merge.ClassNameValue;
|
|
27
|
+
error?: tailwind_merge.ClassNameValue;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
} | {}, {
|
|
31
|
+
field: string;
|
|
32
|
+
label: string;
|
|
33
|
+
control: string[];
|
|
34
|
+
input: string[];
|
|
35
|
+
trigger: string[];
|
|
36
|
+
description: string[];
|
|
37
|
+
error: string;
|
|
38
|
+
popover: string;
|
|
39
|
+
}, undefined, {
|
|
40
|
+
[key: string]: {
|
|
41
|
+
[key: string]: tailwind_merge.ClassNameValue | {
|
|
42
|
+
input?: tailwind_merge.ClassNameValue;
|
|
43
|
+
label?: tailwind_merge.ClassNameValue;
|
|
44
|
+
popover?: tailwind_merge.ClassNameValue;
|
|
45
|
+
trigger?: tailwind_merge.ClassNameValue;
|
|
46
|
+
control?: tailwind_merge.ClassNameValue;
|
|
47
|
+
description?: tailwind_merge.ClassNameValue;
|
|
48
|
+
field?: tailwind_merge.ClassNameValue;
|
|
49
|
+
error?: tailwind_merge.ClassNameValue;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
} | {}, {
|
|
53
|
+
field: string;
|
|
54
|
+
label: string;
|
|
55
|
+
control: string[];
|
|
56
|
+
input: string[];
|
|
57
|
+
trigger: string[];
|
|
58
|
+
description: string[];
|
|
59
|
+
error: string;
|
|
60
|
+
popover: string;
|
|
61
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
62
|
+
field: string;
|
|
63
|
+
label: string;
|
|
64
|
+
control: string[];
|
|
65
|
+
input: string[];
|
|
66
|
+
trigger: string[];
|
|
67
|
+
description: string[];
|
|
68
|
+
error: string;
|
|
69
|
+
popover: string;
|
|
70
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
71
|
+
|
|
72
|
+
export { ComboBoxStyles };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {tv}from'tailwind-variants';const i=tv({slots:{field:"group/combobox-field flex flex-col gap-xs",label:"",control:["flex items-center rounded-medium px-s py-xs outline","group-size-medium/combobox-field:min-w-[160px] group-size-medium/combobox-field:max-w-[400px]","group-size-small/combobox-field:min-w-[80px] group-size-small/combobox-field:max-w-[200px]","group-enabled/combobox-field:fg-default-light group-enabled/combobox-field:outline-interactive","group-enabled/combobox-field:placeholder:fg-default-dark","group-enabled/combobox-field:focus-visible-within:outline-highlight","group-enabled/combobox-field:hover:outline-interactive-hover","group-enabled/combobox-field:group-invalid/combobox-field:outline-serious","group-disabled/combobox-field:fg-disabled group-disabled/combobox-field:outline-interactive-disabled"],input:["grow font-display outline-none","group-size-medium/combobox-field:text-body-s","group-size-small/combobox-field:text-body-xs"],trigger:["fg-default-light","group-open/combobox-field:rotate-180 group-open/combobox-field:transform","group-disabled/combobox-field:fg-disabled"],description:["fg-default-dark text-body-xs","group-disabled/combobox-field:fg-disabled"],error:"fg-serious text-body-xs",popover:"-ml-s min-w-[calc(var(--trigger-width)+(var(--spacing-s)*2))]"}});export{i as ComboBoxStyles};//# sourceMappingURL=styles.js.map
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/combobox-field/styles.ts"],"names":["ComboBoxStyles","tv"],"mappings":"mCAcO,MAAMA,EAAiBC,EAAAA,CAAG,CAC/B,MAAO,CACL,KAAA,CAAO,4CACP,KAAA,CAAO,EAAA,CACP,QAAS,CACP,qDAAA,CACA,gGACA,4FAAA,CACA,gGAAA,CACA,0DAAA,CACA,qEAAA,CACA,8DAAA,CACA,2EAAA,CACA,sGACF,CAAA,CACA,KAAA,CAAO,CACL,gCAAA,CACA,8CAAA,CACA,8CACF,CAAA,CACA,OAAA,CAAS,CACP,kBAAA,CACA,0EAAA,CACA,2CACF,EACA,WAAA,CAAa,CACX,+BACA,2CACF,CAAA,CACA,MAAO,yBAAA,CACP,OAAA,CAAS,+DACX,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 ComboBoxStyles = tv({\n slots: {\n field: 'group/combobox-field flex flex-col gap-xs',\n label: '',\n control: [\n 'flex items-center rounded-medium px-s py-xs outline',\n 'group-size-medium/combobox-field:min-w-[160px] group-size-medium/combobox-field:max-w-[400px]',\n 'group-size-small/combobox-field:min-w-[80px] group-size-small/combobox-field:max-w-[200px]',\n 'group-enabled/combobox-field:fg-default-light group-enabled/combobox-field:outline-interactive',\n 'group-enabled/combobox-field:placeholder:fg-default-dark',\n 'group-enabled/combobox-field:focus-visible-within:outline-highlight',\n 'group-enabled/combobox-field:hover:outline-interactive-hover',\n 'group-enabled/combobox-field:group-invalid/combobox-field:outline-serious',\n 'group-disabled/combobox-field:fg-disabled group-disabled/combobox-field:outline-interactive-disabled',\n ],\n input: [\n 'grow font-display outline-none',\n 'group-size-medium/combobox-field:text-body-s',\n 'group-size-small/combobox-field:text-body-xs',\n ],\n trigger: [\n 'fg-default-light',\n 'group-open/combobox-field:rotate-180 group-open/combobox-field:transform',\n 'group-disabled/combobox-field:fg-disabled',\n ],\n description: [\n 'fg-default-dark text-body-xs',\n 'group-disabled/combobox-field:fg-disabled',\n ],\n error: 'fg-serious text-body-xs',\n popover: '-ml-s min-w-[calc(var(--trigger-width)+(var(--spacing-s)*2))]',\n },\n});\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { RefAttributes } from 'react';
|
|
2
|
+
import { ComboBoxProps, VirtualizerProps, ListLayoutOptions, LabelProps, InputProps, FieldErrorProps, PopoverProps } from 'react-aria-components';
|
|
3
|
+
import { ButtonProps } from '../button/types.js';
|
|
4
|
+
import { OptionsDataItem, OptionsProps } from '../options/types.js';
|
|
5
|
+
import '../../lib/types.js';
|
|
6
|
+
import 'tailwind-variants';
|
|
7
|
+
import '../button/styles.js';
|
|
8
|
+
import 'tailwind-merge';
|
|
9
|
+
import '../icon/types.js';
|
|
10
|
+
|
|
11
|
+
type ComboBoxFieldProps<T extends OptionsDataItem> = Omit<ComboBoxProps<T>, 'children' | 'className'> & Pick<VirtualizerProps<ListLayoutOptions>, 'layoutOptions'> & Pick<OptionsProps<T>, 'children'> & RefAttributes<HTMLDivElement> & {
|
|
12
|
+
classNames?: {
|
|
13
|
+
field?: ComboBoxProps<T>['className'];
|
|
14
|
+
label?: LabelProps['className'];
|
|
15
|
+
control?: string;
|
|
16
|
+
input?: InputProps['className'];
|
|
17
|
+
trigger?: ButtonProps['className'];
|
|
18
|
+
description?: string;
|
|
19
|
+
error?: FieldErrorProps['className'];
|
|
20
|
+
popover?: PopoverProps['className'];
|
|
21
|
+
};
|
|
22
|
+
label?: string;
|
|
23
|
+
inputProps?: Omit<InputProps, 'className'>;
|
|
24
|
+
description?: string;
|
|
25
|
+
errorMessage?: string;
|
|
26
|
+
size?: 'small' | 'medium';
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export type { ComboBoxFieldProps };
|
|
@@ -7,6 +7,50 @@ import 'tailwind-variants';
|
|
|
7
7
|
import './styles.js';
|
|
8
8
|
import 'tailwind-merge';
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* DateField - A comprehensive date input component with segmented editing
|
|
12
|
+
*
|
|
13
|
+
* Provides accessible date input functionality with separate segments for day,
|
|
14
|
+
* month, and year. Includes calendar icon, validation states, and international
|
|
15
|
+
* date format support with keyboard navigation between segments.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* // Basic date field
|
|
19
|
+
* <DateField label="Birth Date" />
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Date field with validation
|
|
23
|
+
* <DateField
|
|
24
|
+
* label="Event Date"
|
|
25
|
+
* isRequired
|
|
26
|
+
* isInvalid={hasError}
|
|
27
|
+
* errorMessage="Please select a valid date"
|
|
28
|
+
* />
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* // Date field with custom formatting
|
|
32
|
+
* <DateField
|
|
33
|
+
* label="Meeting Date"
|
|
34
|
+
* shortMonth={false}
|
|
35
|
+
* placeholder="Select meeting date"
|
|
36
|
+
* />
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* // Compact date field
|
|
40
|
+
* <DateField
|
|
41
|
+
* label="Due Date"
|
|
42
|
+
* size="small"
|
|
43
|
+
* description="When is this task due?"
|
|
44
|
+
* />
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* // Controlled date field
|
|
48
|
+
* <DateField
|
|
49
|
+
* label="Selected Date"
|
|
50
|
+
* value={selectedDate}
|
|
51
|
+
* onChange={setSelectedDate}
|
|
52
|
+
* />
|
|
53
|
+
*/
|
|
10
54
|
declare function DateField<T extends DateValue>({ classNames, description: descriptionProp, errorMessage: errorMessageProp, isDisabled, isInvalid: isInvalidProp, isReadOnly, label, placeholder, slot, size, shortMonth, isRequired, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
11
55
|
|
|
12
56
|
export { DateField };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["dateInput","descriptionText","error","DateFieldStyles","R","value","isFocused","shortMonth","displayValue","isReadOnly","months","FormattedDateSegment","segment","jsx","DateSegment","t","c","dateSegment","DateInput","className","ref","props","jsxs","dateInputContainer","f","icon","d","classNames","isInvalidProp","isSmall","size","AriaDateField","field","isDisabled","isInvalid","label","Label","b","isRequired","AriaText","T","descriptionProp","errorMessage"],"mappings":"yUAkCEA,KACA,CAAA,KAAA,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,oBACAC,CAAAA,IACA,CAAA,CAAA,CAAAC,eAEF,EAAIC,CAAAA,KAEW,CACb,CAAA,CAAA,WAEA,CAAA,CAAA,CAAA,CAAAC,eACA,EAAA,CAAA,CAAA,CAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,MACA,KACF,CAAA,KAGE,MAAAC,CAAAA,KACA,CAAA,KAAAC,EACA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,yBAEA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAAC,WAGE,CAAA,CAAA,UAGF,CAAIC,CAAAA,CAAmC,GAAGH,CAAK,GAE/C,SAAKI,CAAcH,KACFE,CAAa,eAAe,EAClCD,EAAAA,CAAAA,CACTC,CAAAA,CAAeE,UAAuB,CAAA,CAAA,CAGjCF,GAQHG,CAAAA,CAAuB,CAAC,GAC5B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,EACA,WAAAL,CAAAA,CACA,CAAA,OAEIK,CAAAA,CAAQ,WAAS,CAAA,CAAA,CAAA,GAAA,CAAaA,CAAAA,SAAiB,GAC1CC,WAINC,CAAA,CAAY,UAAkB,CAAAC,GAAA,CAAAC,QAAA,CAAA,EAAA,CAAA,CAAAD,GAAWE,YAAY,CAAC,CAAC,OACrD,YAAQ,CAAA,CAAA,CAAA,EAAA,CAAS,eAEX,CAAkB,CAAA,IAAgB,GAAA,OAAA,CAAYV,CAAAA,KAEjDK,CAAAA,CAAQ,CAAA,CAAA,GACd,EAIEM,UACJ,CAAA,CAAA,CAAA,CAAAC,CAAAA,CACA,KAAAC,CAAM,CAAA,CAAA,CAAA,CAAA,CACN,UACGC,CACL,CAAA,CAAA,GAEIC,CAAC,OAAI,IAAA,CAAA,CAAA,CAAA,GAAWC,CAAAA,CAAmB,GAAEC,IAClC,iBAAS,CAAA,CAAA,CAAA,EAAA,CACRX,CAAAA,QAAM,CAAA,CAAA,CAAA,GAAWY,4BAEjB,CAAA,CACE,KACJZ,QACMQ,CAAAA,GACJ,aAA8BF,CAAYA,aACxCnB,CAAAA,CAAU,cAGZ,CAAA0B,kBACA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAEJ,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["dateInput","descriptionText","error","DateFieldStyles","R","value","isFocused","shortMonth","displayValue","isReadOnly","months","FormattedDateSegment","segment","jsx","DateSegment","t","c","dateSegment","DateInput","className","ref","props","jsxs","dateInputContainer","f","icon","d","classNames","isInvalidProp","isSmall","size","AriaDateField","field","isDisabled","isInvalid","label","Label","b","isRequired","AriaText","T","descriptionProp","errorMessage"],"mappings":"yUAkCEA,KACA,CAAA,KAAA,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,oBACAC,CAAAA,IACA,CAAA,CAAA,CAAAC,eAEF,EAAIC,CAAAA,KAEW,CACb,CAAA,CAAA,WAEA,CAAA,CAAA,CAAA,CAAAC,eACA,EAAA,CAAA,CAAA,CAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,MACA,KAAA,CACA,KAAA,CACA,MACA,KACF,CAAA,KAGE,MAAAC,CAAAA,KACA,CAAA,KAAAC,EACA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,yBAEA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAAC,WAGE,CAAA,CAAA,UAGF,CAAIC,CAAAA,CAAmC,GAAGH,CAAK,GAE/C,SAAKI,CAAcH,KACFE,CAAa,eAAe,EAClCD,EAAAA,CAAAA,CACTC,CAAAA,CAAeE,UAAuB,CAAA,CAAA,CAGjCF,GAQHG,CAAAA,CAAuB,CAAC,GAC5B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,EACA,WAAAL,CAAAA,CACA,CAAA,OAEIK,CAAAA,CAAQ,WAAS,CAAA,CAAA,CAAA,GAAA,CAAaA,CAAAA,SAAiB,GAC1CC,WAINC,CAAA,CAAY,UAAkB,CAAAC,GAAA,CAAAC,QAAA,CAAA,EAAA,CAAA,CAAAD,GAAWE,YAAY,CAAC,CAAC,OACrD,YAAQ,CAAA,CAAA,CAAA,EAAA,CAAS,eAEX,CAAkB,CAAA,IAAgB,GAAA,OAAA,CAAYV,CAAAA,KAEjDK,CAAAA,CAAQ,CAAA,CAAA,GACd,EAIEM,UACJ,CAAA,CAAA,CAAA,CAAAC,CAAAA,CACA,KAAAC,CAAM,CAAA,CAAA,CAAA,CAAA,CACN,UACGC,CACL,CAAA,CAAA,GAEIC,CAAC,OAAI,IAAA,CAAA,CAAA,CAAA,GAAWC,CAAAA,CAAmB,GAAEC,IAClC,iBAAS,CAAA,CAAA,CAAA,EAAA,CACRX,CAAAA,QAAM,CAAA,CAAA,CAAA,GAAWY,4BAEjB,CAAA,CACE,KACJZ,QACMQ,CAAAA,GACJ,aAA8BF,CAAYA,aACxCnB,CAAAA,CAAU,cAGZ,CAAA0B,kBACA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAEJ,CAgDG,uBACLC,CAAAA,SACA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAA,0BAEA,CAAA,CAAWC,WACX,CAAA,CAAAnB,CAAAA,SAEA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,KACA,cAAO,CAAA,CACP,YAAAF,CAAa,CAAA,CAAA,mBAGf,CAAsB,CACpB,kBACMsB,CAAAA,GAAUC,CAAAA,CAAS,QAEzB,CAAA,CAAA,CAAA,EAAA,IACGC,EAAA,CACE,CAAA,UACD,CAAA,0BACWH,CAAAA,UAAwC,CAAA,CAAA,CAAA,SACnD,CAAA,CAAA,GAAYnB,EACZ,IAAA,CAAA,kBAC8BkB,CAAY,CAAA,CAAA,IAAQR,CAAAA,CAAAA,CAChDa,SAAQ,CAAAN,kBAAA,CAAA,CAAAP,EAAW,KAGpB,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,aACGc,CAAAA,CAAY,QAAA,CAAA,CAAAC,CAAU,UAGrB,CAAA,CAAA,CAAA,UAAYC,CAAAA,CAAAA,GACVC,KAAApB,QACC,CAAA,CAAA,QAAWW,GAAY,CAAA,EAAA,CAAA,EACvBZ,GAAA,CAAAsB,KAAA,CAAA,CAAA,SACA,CAAA,CAAA,EAAA,KAAA,CAAYC,WAEXH,CAAAA,CACH,qBAGuB,CAAA,CAAA,CAAA,CAAA,CACvBpB,OAAMe,SACN,CAAA,CAAA,OAEC,CAAA,IAAClB,CAAAA,CAAAA,CACAC,oBAAwC,CAAA,CAAA,EAAAE,GAAA,CAAYR,EAAY,CAAA,OAG/C,CAAA,CAAEsB,CAAAA,UACrBhB,CAAAA,CAAC0B,EAAA,CAAS,CAAA,CAAA,CAAA,GAAA,EAAA,CAAA,GAA2B,CAAC,GAAI,CAAA,EAAAxB,GAAA,CAAKyB,IAAA,CAAA,CAAA,SAAA,CAAA,CAC5C,SAAAC,CAAAA,sBAI2Bd,CAAY,QAAQR,UAAAA,CAAAA,CAChDjB,SAAQ,CAAAwB,kBAAA,CAAA,CAAAP,EAAW,YAGpBuB,SAMb,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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 'client-only';\nimport Calendar from '@accelint/icons/calendar';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateSegment as TDateSegment } from '@react-stately/datepicker';\nimport {\n DateField as AriaDateField,\n DateInput as AriaDateInput,\n type DateSegmentProps as AriaDateSegmentProps,\n Text as AriaText,\n DateSegment,\n type DateSegmentRenderProps,\n FieldError,\n composeRenderProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { DateFieldStyles } from './styles';\nimport type { DateFieldProps, DateInputProps } from './types';\n\nconst {\n field,\n dateInput,\n dateInputContainer,\n icon,\n descriptionText,\n error,\n dateSegment,\n} = DateFieldStyles();\n\nconst months = [\n 'JAN',\n 'FEB',\n 'MAR',\n 'APR',\n 'MAY',\n 'JUN',\n 'JUL',\n 'AUG',\n 'SEP',\n 'OCT',\n 'NOV',\n 'DEC',\n];\n\nconst MonthDateSegment = ({\n value,\n isFocused,\n isPlaceholder,\n placeholder,\n isReadOnly,\n shortMonth,\n}: DateSegmentRenderProps & { shortMonth?: boolean }) => {\n if (isPlaceholder) {\n return placeholder;\n }\n\n let displayValue: string | undefined = `${value}`;\n\n if (!isReadOnly && isFocused) {\n displayValue = displayValue.padStart(2, '0');\n } else if (shortMonth) {\n displayValue = months[(value ?? 0) - 1];\n }\n\n return displayValue;\n};\n\ninterface FormattedDateSegmentProps extends AriaDateSegmentProps {\n segment: TDateSegment;\n shortMonth?: boolean;\n}\n\nconst FormattedDateSegment = ({\n segment,\n shortMonth,\n ...props\n}: FormattedDateSegmentProps) => {\n if (segment.type === 'literal' && segment.text !== ':') {\n return <></>;\n }\n\n return (\n <DateSegment segment={segment} className={dateSegment({})} {...props}>\n {segment.type === 'month'\n ? (renderProps) => (\n <MonthDateSegment {...renderProps} shortMonth={shortMonth} />\n )\n : segment.text}\n </DateSegment>\n );\n};\n\nconst DateInput = ({\n className,\n ref = null,\n size,\n ...props\n}: DateInputProps) => {\n return (\n <div className={dateInputContainer({})}>\n {size === 'medium' ? (\n <Icon className={icon({})}>\n <Calendar />\n </Icon>\n ) : null}\n <AriaDateInput\n {...props}\n className={composeRenderProps(className, (className) =>\n dateInput({\n className,\n }),\n )}\n data-size={size}\n />\n </div>\n );\n};\n\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @example\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n *\n * @example\n * // Date field with validation\n * <DateField\n * label=\"Event Date\"\n * isRequired\n * isInvalid={hasError}\n * errorMessage=\"Please select a valid date\"\n * />\n *\n * @example\n * // Date field with custom formatting\n * <DateField\n * label=\"Meeting Date\"\n * shortMonth={false}\n * placeholder=\"Select meeting date\"\n * />\n *\n * @example\n * // Compact date field\n * <DateField\n * label=\"Due Date\"\n * size=\"small\"\n * description=\"When is this task due?\"\n * />\n *\n * @example\n * // Controlled date field\n * <DateField\n * label=\"Selected Date\"\n * value={selectedDate}\n * onChange={setSelectedDate}\n * />\n */\nexport function DateField<T extends DateValue>({\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n isDisabled,\n isInvalid: isInvalidProp,\n isReadOnly,\n label,\n placeholder,\n slot,\n size = 'medium',\n shortMonth = true,\n isRequired,\n ...props\n}: DateFieldProps<T>) {\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n return (\n <AriaDateField<T>\n {...props}\n isDisabled={isDisabled}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n isReadOnly={isReadOnly}\n slot={slot}\n className={composeRenderProps(classNames?.field, (className) =>\n field({ className }),\n )}\n >\n {(\n { isDisabled, isInvalid }, // Rely on internal state, not props, since state could differ from props\n ) => (\n <>\n {!isSmall && label && (\n <Label\n className={classNames?.label}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {label}\n </Label>\n )}\n <DateInput\n className={classNames?.input}\n size={size}\n isInvalid={isInvalid}\n >\n {(segment) => (\n <FormattedDateSegment segment={segment} shortMonth={shortMonth} />\n )}\n </DateInput>\n {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n <AriaText className={descriptionText({})} slot='description'>\n {descriptionProp}\n </AriaText>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n error({ className }),\n )}\n >\n {errorMessage}\n </FieldError>\n </>\n )}\n </AriaDateField>\n );\n}\n"]}
|
|
@@ -8,8 +8,8 @@ declare const DateFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
8
8
|
[key: string]: {
|
|
9
9
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
10
10
|
icon?: tailwind_merge.ClassNameValue;
|
|
11
|
-
error?: tailwind_merge.ClassNameValue;
|
|
12
11
|
field?: tailwind_merge.ClassNameValue;
|
|
12
|
+
error?: tailwind_merge.ClassNameValue;
|
|
13
13
|
dateInputContainer?: tailwind_merge.ClassNameValue;
|
|
14
14
|
dateSegment?: tailwind_merge.ClassNameValue;
|
|
15
15
|
dateInput?: tailwind_merge.ClassNameValue;
|
|
@@ -20,8 +20,8 @@ declare const DateFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
20
20
|
[x: string]: {
|
|
21
21
|
[x: string]: tailwind_merge.ClassNameValue | {
|
|
22
22
|
icon?: tailwind_merge.ClassNameValue;
|
|
23
|
-
error?: tailwind_merge.ClassNameValue;
|
|
24
23
|
field?: tailwind_merge.ClassNameValue;
|
|
24
|
+
error?: tailwind_merge.ClassNameValue;
|
|
25
25
|
dateInputContainer?: tailwind_merge.ClassNameValue;
|
|
26
26
|
dateSegment?: tailwind_merge.ClassNameValue;
|
|
27
27
|
dateInput?: tailwind_merge.ClassNameValue;
|
|
@@ -40,8 +40,8 @@ declare const DateFieldStyles: tailwind_variants.TVReturnType<{
|
|
|
40
40
|
[key: string]: {
|
|
41
41
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
42
42
|
icon?: tailwind_merge.ClassNameValue;
|
|
43
|
-
error?: tailwind_merge.ClassNameValue;
|
|
44
43
|
field?: tailwind_merge.ClassNameValue;
|
|
44
|
+
error?: tailwind_merge.ClassNameValue;
|
|
45
45
|
dateInputContainer?: tailwind_merge.ClassNameValue;
|
|
46
46
|
dateSegment?: tailwind_merge.ClassNameValue;
|
|
47
47
|
dateInput?: tailwind_merge.ClassNameValue;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'tailwind-variants';const t={size:"medium"},
|
|
1
|
+
import {tv}from'tailwind-variants';const t={size:"medium"},l=tv({slots:{field:"group/date-field flex flex-col gap-xs",dateInput:["group/date-field flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive","disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled","text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus-visible-within:outline-highlight","invalid:outline-serious","size-medium:pl-[32px] size-medium:text-body-s","size-small:text-body-xs"],dateInputContainer:"relative flex",icon:["-translate-y-1/2 absolute top-1/2 left-s text-default-light","group-disabled/date-field:text-disabled"],descriptionText:["fg-default-dark text-body-xs empty:hidden","group-disabled/date-field:fg-disabled"],error:"fg-serious text-body-xs empty:hidden",dateSegment:"focus-visible:bg-highlight focus-visible:text-inverse-light focus-visible:outline-none"},defaultVariants:t});export{l as DateFieldStyles,t as DateFieldStylesDefault};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/date-field/styles.ts"],"names":["DateFieldStylesDefault","DateFieldStyles","tv"],"mappings":"mCAcO,MAAMA,EAAyB,CACpC,IAAA,CAAM,QACR,CAAA,CAEaC,CAAAA,CAAkBC,GAAG,CAChC,KAAA,CAAO,CACL,KAAA,CAAO,uCAAA,CACP,UAAW,CACT,wGAAA,CACA,kGACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/date-field/styles.ts"],"names":["DateFieldStylesDefault","DateFieldStyles","tv"],"mappings":"mCAcO,MAAMA,EAAyB,CACpC,IAAA,CAAM,QACR,CAAA,CAEaC,CAAAA,CAAkBC,GAAG,CAChC,KAAA,CAAO,CACL,KAAA,CAAO,uCAAA,CACP,UAAW,CACT,wGAAA,CACA,kGACA,yHAAA,CACA,yBAAA,CACA,gDACA,yBACF,CAAA,CACA,mBAAoB,eAAA,CACpB,IAAA,CAAM,CACJ,6DAAA,CACA,yCACF,EACA,eAAA,CAAiB,CACf,4CACA,uCACF,CAAA,CACA,MAAO,sCAAA,CACP,WAAA,CACE,wFACJ,CAAA,CACA,eAAA,CAAiBF,CACnB,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 DateFieldStylesDefault = {\n size: 'medium',\n} as const;\n\nexport const DateFieldStyles = tv({\n slots: {\n field: 'group/date-field flex flex-col gap-xs',\n dateInput: [\n 'group/date-field flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive',\n 'disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled',\n 'text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus-visible-within:outline-highlight',\n 'invalid:outline-serious',\n 'size-medium:pl-[32px] size-medium:text-body-s',\n 'size-small:text-body-xs',\n ],\n dateInputContainer: 'relative flex',\n icon: [\n '-translate-y-1/2 absolute top-1/2 left-s text-default-light',\n 'group-disabled/date-field:text-disabled',\n ],\n descriptionText: [\n 'fg-default-dark text-body-xs empty:hidden',\n 'group-disabled/date-field:fg-disabled',\n ],\n error: 'fg-serious text-body-xs empty:hidden',\n dateSegment:\n 'focus-visible:bg-highlight focus-visible:text-inverse-light focus-visible:outline-none',\n },\n defaultVariants: DateFieldStylesDefault,\n});\n"]}
|
|
@@ -3,6 +3,7 @@ import { RefObject, PropsWithChildren, ReactNode } from 'react';
|
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { DialogTriggerProps, DialogRenderProps } from 'react-aria-components';
|
|
5
5
|
import { ButtonProps } from '../button/types.js';
|
|
6
|
+
import '../../lib/types.js';
|
|
6
7
|
import 'tailwind-variants';
|
|
7
8
|
import '../button/styles.js';
|
|
8
9
|
import 'tailwind-merge';
|
|
@@ -16,6 +17,30 @@ interface DialogProps extends DialogTriggerProps {
|
|
|
16
17
|
onOpenChange?: (isOpen: boolean) => void;
|
|
17
18
|
parentRef?: RefObject<HTMLElement | null>;
|
|
18
19
|
}
|
|
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>
|
|
30
|
+
* <Button>Open Dialog</Button>
|
|
31
|
+
* <Dialog.Body>
|
|
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.Body>
|
|
42
|
+
* </Dialog>
|
|
43
|
+
*/
|
|
19
44
|
declare const Dialog: {
|
|
20
45
|
({ children, size, isOpen, onOpenChange, isDismissable, isKeyboardDismissDisabled, parentRef, }: DialogProps): react_jsx_runtime.JSX.Element;
|
|
21
46
|
displayName: string;
|
|
@@ -34,8 +59,5 @@ declare const Dialog: {
|
|
|
34
59
|
interface DialogBodyProps {
|
|
35
60
|
children: ReactNode | ReactNode[] | ((opts: DialogRenderProps) => ReactNode);
|
|
36
61
|
}
|
|
37
|
-
declare const DialogTitle: ({ children, className, }: PropsWithChildren<{
|
|
38
|
-
className?: string;
|
|
39
|
-
}>) => react_jsx_runtime.JSX.Element;
|
|
40
62
|
|
|
41
|
-
export { Dialog, type DialogProps
|
|
63
|
+
export { Dialog, type DialogProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {jsx}from'react/jsx-runtime';import {cn}from'./../../lib/utils.js';import {useIsSSR}from'@react-aria/ssr';import'client-only';import {cva}from'class-variance-authority';import {createContext,forwardRef,useState,useEffect,useContext}from'react';import {ModalOverlay,Modal,Dialog,DialogTrigger,Heading}from'react-aria-components';import {Button}from'../button/index.js';const M=cva("flex flex-col align-end font-light text-body-m text-default-dark",{variants:{size:{sm:"min-w-[280px] max-w-[280px] rounded-medium p-l",lg:"min-w-[320px] max-w-[720px] rounded-large p-xl"},defaultVariants:{size:"sm"}}}),E={sm:"small",lg:"medium"},b=createContext({size:"sm"}),r=()=>{const e=useContext(b);if(!e)throw new Error("Dialog components must be used within <Dialog>");return e},l=({children:e,size:t,isOpen:o,onOpenChange:i,isDismissable:a=true,isKeyboardDismissDisabled:m=true,parentRef:p})=>jsx(DialogTrigger,{children:jsx(b.Provider,{value:{size:t??"sm",isDismissable:a,isOpen:o,onOpenChange:i,parentRef:p,isKeyboardDismissDisabled:m},children:e})});l.displayName="Dialog";const x=forwardRef(({children:e,...t},o)=>{const{size:i,isDismissable:a,isOpen:m,onOpenChange:p,parentRef:c,isKeyboardDismissDisabled:y}=r(),d=useIsSSR(),[u,D]=useState(d?null:document.body);return useEffect(()=>{const f=c?.current,g=d?null:document.createElement("div");return f&&g&&(f.appendChild(g),D(g)),()=>{g?.remove(),D(d?null:document.body);}},[d,c]),u?jsx(ModalOverlay,{UNSTABLE_portalContainer:u,isKeyboardDismissDisabled:!a&&y,isOpen:m,onOpenChange:p,isDismissable:a,className:"absolute inset-0 flex items-center justify-center",...t,children:jsx(Modal,{ref:o,className:cn("flex flex-col justify-center bg-surface-overlay align-start",i==="sm"&&"rounded-medium",i==="lg"&&"rounded-large"),children:jsx(Dialog,{className:M({size:i}),children:e})})}):null});x.displayName="DialogBody";const H=({children:e,className:t})=>{const{size:o}=r();return jsx("div",{className:cn("flex flex-col",o==="sm"&&"gap-xs",o==="lg"&&"gap-l",t),children:e})},j=({children:e,className:t})=>{const{size:o}=r();return jsx(Heading,{slot:"title",className:cn("text-default-light",o==="sm"&&"mb-s text-header-m",o==="lg"&&"mb-m text-header-l",t),children:e})},K=({children:e,className:t,...o})=>{const{size:i}=r(),a=E[i];return jsx(Button,{size:a,...o,className:cn("pressed:bg-initial",t),children:e})},L=({children:e,className:t})=>{const{size:o}=r();return jsx("div",{className:cn("flex justify-end gap-xs",o==="sm"&&"mt-l",o==="lg"&&"mt-xl",t),children:e})};l.Button=K,l.Content=H,l.Footer=L,l.Title=j,l.Body=x;export{l as Dialog
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import {cn}from'./../../lib/utils.js';import {useIsSSR}from'@react-aria/ssr';import'client-only';import {cva}from'class-variance-authority';import {createContext,forwardRef,useState,useEffect,useContext}from'react';import {ModalOverlay,Modal,Dialog,DialogTrigger,Heading}from'react-aria-components';import {Button}from'../button/index.js';const M=cva("flex flex-col align-end font-light text-body-m text-default-dark",{variants:{size:{sm:"min-w-[280px] max-w-[280px] rounded-medium p-l",lg:"min-w-[320px] max-w-[720px] rounded-large p-xl"},defaultVariants:{size:"sm"}}}),E={sm:"small",lg:"medium"},b=createContext({size:"sm"}),r=()=>{const e=useContext(b);if(!e)throw new Error("Dialog components must be used within <Dialog>");return e},l=({children:e,size:t,isOpen:o,onOpenChange:i,isDismissable:a=true,isKeyboardDismissDisabled:m=true,parentRef:p})=>jsx(DialogTrigger,{children:jsx(b.Provider,{value:{size:t??"sm",isDismissable:a,isOpen:o,onOpenChange:i,parentRef:p,isKeyboardDismissDisabled:m},children:e})});l.displayName="Dialog";const x=forwardRef(({children:e,...t},o)=>{const{size:i,isDismissable:a,isOpen:m,onOpenChange:p,parentRef:c,isKeyboardDismissDisabled:y}=r(),d=useIsSSR(),[u,D]=useState(d?null:document.body);return useEffect(()=>{const f=c?.current,g=d?null:document.createElement("div");return f&&g&&(f.appendChild(g),D(g)),()=>{g?.remove(),D(d?null:document.body);}},[d,c]),u?jsx(ModalOverlay,{UNSTABLE_portalContainer:u,isKeyboardDismissDisabled:!a&&y,isOpen:m,onOpenChange:p,isDismissable:a,className:"absolute inset-0 flex items-center justify-center",...t,children:jsx(Modal,{ref:o,className:cn("flex flex-col justify-center bg-surface-overlay align-start",i==="sm"&&"rounded-medium",i==="lg"&&"rounded-large"),children:jsx(Dialog,{className:M({size:i}),children:e})})}):null});x.displayName="DialogBody";const H=({children:e,className:t})=>{const{size:o}=r();return jsx("div",{className:cn("flex flex-col",o==="sm"&&"gap-xs",o==="lg"&&"gap-l",t),children:e})},j=({children:e,className:t})=>{const{size:o}=r();return jsx(Heading,{slot:"title",className:cn("text-default-light",o==="sm"&&"mb-s text-header-m",o==="lg"&&"mb-m text-header-l",t),children:e})},K=({children:e,className:t,...o})=>{const{size:i}=r(),a=E[i];return jsx(Button,{size:a,...o,className:cn("pressed:bg-initial",t),children:e})},L=({children:e,className:t})=>{const{size:o}=r();return jsx("div",{className:cn("flex justify-end gap-xs",o==="sm"&&"mt-l",o==="lg"&&"mt-xl",t),children:e})};l.Button=K,l.Content=H,l.Footer=L,l.Title=j,l.Body=x;export{l as Dialog};//# 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":["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":"qcA4CQ,CAAI,oEACA,CAAA,EAAA,CAAA,gDAGJ,CAAA,CAAA,iBAOF,IAAA,CAAA,IACJ,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EACN,CAAA,OAa0D,CAAA,EAAA,CAAM,QAE1DA,CAAmB,CAAA,CAAA,CAAAC,aAAM,CAC7B,CAAA,IAAA,CAAMC,IAAiBC,CAAa,CAAA,CACpC,CAAA,CAAA,IACE,CAAA,MAAM,CAAA,CAAAC,UAAI,CAAA,CAAA,CAAA,CAAA,GAAM,CAAA,CAAA,CAAA,MAAA,IAAA,KAAA,CAAA,gDAuClB,CAAA,CAAA,OACA,CAAA,CAAA,CAAAC,CAAAA,CACA,CAAA,CAAA,QACA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,MACA,CAAA,CAAA,CAAA,YAAgB,CAAA,CAChB,CAAA,aAAA,CAAA,CAAA,CAAA,IAAA,CAAA,0BAIEC,CAAAA,CAACC,IAAA,CACC,SAAAD,CAAAA,CAACH,CAAAA,8BACC,CAAOK,GACL,CAAA,CAAA,CAAA,QAAc,CAAA,CACd,eAAAC,IACA,CAAA,aACA,CAAA,CAAA,CAAA,MACA,CAAA,CAAA,CAAA,YACA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,yBAQVC,CAAO,CAAA,CAAA,CAAA,QAAA,CAAc,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,WAOnB,CAAC,QAAE,CAAA,MAAaC,CAAK,CAAAC,UAAGC,CAAAA,CAAAA,CAAAA,QAEpB,CAAA,CAAA,CAAA,GAAAR,CACA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,oBAEA,CAAA,CAAA,CAAA,MACA,CAAA,CAAA,CAAA,YACA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,yBAG0BS,CAAAA,CAASC,CAAAA,CAAQ,CAAA,EAAA,CAAA,CAAO,gBAAS,CAAA,CAAAC,QAAA,CAAI,CAAA,CAEjE,IAAA,CAAA,QAAgB,CACd,MAAMC,OAAkBC,SAAA,CAAA,IAElBC,CAAAA,MAAe,CAAA,CAAO,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,QAAmB,CAAA,aAE5CA,CAAAA,KACL,CAAA,CAAA,OAAA,CAAYA,EAAI,CACrBC,GAAc,CAAA,CAAA,WAIR,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAEbA,CAAAA,CAAUL,CAAAA,IAAQ,CAAA,CAAO,UAAS,CAAA,CAAA,CAAI,CACxC,CACF,IAAIA,CAAOM,QAGRC,CAAAA,4DAEC,CAAA,CAAA,CAAA,yBAEA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,MACA,CAAA,CAAA,CAAA,YACA,CAAA,CAAA,CAAA,aAAU,CAAA,CAAA,CAAA,SAAA,CAAA,mDAIR,CAAA,GAAKT,EACL,QAAA,CAAAL,GAAWe,CAAAA,KACT,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,SAAA,CAAAC,EAAA,CAAA,6DACiB,CAAA,CAAA,GAAA,sBACA,CAAA,CAAA,GAAA,IAGnB,EAAA,eAAW,CAAA,CAAA,QAA2B,CAAAhB,GAAA,CAAAiB,MAAApB,CAAK,CAAC,WAAIqB,CAAAA,CAAS,IAE7D,CAAA,CACE,CAAA,CAAA,CAAA,QAGG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAc,CAAA,CAAA,CAAA,CAAA,CAAA,WAEnBC,CAAAA,YACJD,CAAAA,MACA,CAAA,CAAA,CAAA,CAAA,oBAEa,CAAI1B,CAAAA,CAAiB,SAEhCM,CAAAA,IAAC,CAAA,CAAA,CAAA,CACC,CAAA,EAAA,CAAA,OAAWiB,GACT,CAAA,KAAA,CAAA,CAAA,SACAlB,CAAAA,EAAAA,CAAS,eACTA,CAAAA,CAAAA,GAAS,IAAA,EAAQ,QAEnB,CAAA,CAEC,SAAAqB,OAKa,CAAC,CACnB,CAAA,CAAA,QAAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAEA,CAAA,CAAA,CAAA,SAAa,CAAI1B,CAAAA,CAAiB,GAClC,CAAA,KACEM,CAAAA,IACE,CAAA,CAAA,CAAA,CAAA,CAAK,EAAA,CAAA,OACLE,GAAA,CAAAoB,OAAA,CAAA,CAAA,IAAWL,CACT,OAAA,CAAA,SAAA,CAAAC,EAAA,CAAA,oBACiB,CAAA,CAAA,GAAA,IAAA,EAAA,oBACA,CAAA,CAAA,GAAA,IAAA,EAAA,oBASJ,CAAC,CAAE,CAAA,CAAA,QAAAE,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAuC,SAC/D,CAAA,CAAA,CAAMG,GAAe7B,EAAiB,GACxC8B,CAAaC,KACnB,CAAA,IAAA,CAAA,CACEzB,CAAAA,CAAC0B,CAAAA,EACC,CAAA,CAAA,CAAA,CAAA,CAAMF,CAAAA,CACL,CAAA,OAGDtB,GAAA,CAAAyB,MAAA,CAAA,CAAA,IAAc,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,SAAA,CAAAT,EAAA,CAAA,oBAOC,CAAC,CACpB,CAAA,CAAA,QAAAE,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAEA,CAAA,CAAA,CAAA,UAAiB1B,CAAAA,CAAiB,GAClC,CAAA,KACEM,CAAAA,IAAC,CAAA,CAAA,CAAA,CACC,CAAA,EAAA,CAAA,UACE,CAAA,KAAA,CAAA,CAAA,SAAA,CAAAkB,EAAA,CAAA,yBAEAnB,CAAAA,CAAS,GAAA,YAEX,CAAA,CAEC,GAAA,IAAA,EAAAqB,OAKA,CAAA,CAAA,CAAA,CAAA,QACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAUC,CAAAA,MACV,CAAA,CAAA,CAAA,CAASO,CAAAA,OACT,CAAA,CAAQC,CAAAA,CACfzB,CAAAA,MAAc0B,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,IAAAA,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\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\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>\n * <Button>Open Dialog</Button>\n * <Dialog.Body>\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.Body>\n * </Dialog>\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\nconst 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"]}
|
|
@@ -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"]}
|