@cerberus-design/react 0.15.0-next-7669d47 → 0.15.0-next-16cc2b5
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/build/legacy/_tsup-dts-rollup.d.cts +123 -29
- package/build/legacy/components/Accordion.cjs.map +1 -1
- package/build/legacy/components/AccordionItemGroup.cjs.map +1 -1
- package/build/legacy/components/Select.cjs +101 -60
- package/build/legacy/components/Select.cjs.map +1 -1
- package/build/legacy/components/{Modal.cjs → deprecated/Modal.cjs} +1 -1
- package/build/legacy/components/deprecated/Modal.cjs.map +1 -0
- package/build/legacy/components/{ModalDescription.cjs → deprecated/ModalDescription.cjs} +1 -1
- package/build/legacy/components/deprecated/ModalDescription.cjs.map +1 -0
- package/build/legacy/components/{ModalHeader.cjs → deprecated/ModalHeader.cjs} +1 -1
- package/build/legacy/components/deprecated/ModalHeader.cjs.map +1 -0
- package/build/legacy/components/{ModalHeading.cjs → deprecated/ModalHeading.cjs} +1 -1
- package/build/legacy/components/deprecated/ModalHeading.cjs.map +1 -0
- package/build/legacy/components/{NavMenuLink.cjs → deprecated/NavMenuLink.cjs} +2 -2
- package/build/legacy/components/deprecated/NavMenuLink.cjs.map +1 -0
- package/build/legacy/components/{NavMenuList.cjs → deprecated/NavMenuList.cjs} +2 -2
- package/build/legacy/components/deprecated/NavMenuList.cjs.map +1 -0
- package/build/legacy/components/{NavMenuTrigger.cjs → deprecated/NavMenuTrigger.cjs} +2 -2
- package/build/legacy/components/deprecated/NavMenuTrigger.cjs.map +1 -0
- package/build/legacy/config/types.cjs.map +1 -1
- package/build/legacy/index.cjs +207 -189
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +123 -29
- package/build/modern/{chunk-UZVQ4INR.js → chunk-AIJ75ENY.js} +2 -2
- package/build/modern/chunk-AIJ75ENY.js.map +1 -0
- package/build/modern/{chunk-NUMM4TNC.js → chunk-AUALRL3U.js} +2 -2
- package/build/modern/chunk-AUALRL3U.js.map +1 -0
- package/build/modern/{chunk-IGHMP4WA.js → chunk-AZRFYQO7.js} +1 -1
- package/build/modern/chunk-AZRFYQO7.js.map +1 -0
- package/build/modern/{chunk-PM7CWT3N.js → chunk-BRVZVAPT.js} +2 -2
- package/build/modern/chunk-BRVZVAPT.js.map +1 -0
- package/build/modern/{chunk-JIRW4XOJ.js → chunk-Q3I4H6EC.js} +2 -2
- package/build/modern/chunk-Q3I4H6EC.js.map +1 -0
- package/build/modern/{chunk-7NN3SJ7W.js → chunk-SWX5JWZR.js} +2 -2
- package/build/modern/chunk-SWX5JWZR.js.map +1 -0
- package/build/modern/{chunk-ZL6ZITLA.js → chunk-WECB67DC.js} +2 -2
- package/build/modern/chunk-WECB67DC.js.map +1 -0
- package/build/modern/{chunk-BAWZBF5Q.js → chunk-WN7TJX6J.js} +2 -2
- package/build/modern/chunk-X6WFDKKJ.js +90 -0
- package/build/modern/chunk-X6WFDKKJ.js.map +1 -0
- package/build/modern/{chunk-WPVDQRRF.js → chunk-YOTXFCCC.js} +2 -2
- package/build/modern/chunk-YOTXFCCC.js.map +1 -0
- package/build/modern/components/Accordion.js +1 -1
- package/build/modern/components/AccordionItemGroup.js +2 -2
- package/build/modern/components/Select.js +11 -4
- package/build/modern/components/deprecated/Modal.js +7 -0
- package/build/modern/components/deprecated/ModalDescription.js +7 -0
- package/build/modern/components/deprecated/ModalHeader.js +7 -0
- package/build/modern/components/deprecated/ModalHeading.js +7 -0
- package/build/modern/components/deprecated/NavMenuLink.js +8 -0
- package/build/modern/components/deprecated/NavMenuList.js +12 -0
- package/build/modern/components/deprecated/NavMenuTrigger.js +11 -0
- package/build/modern/index.js +52 -46
- package/build/modern/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Accordion.tsx +1 -0
- package/src/components/Select.tsx +191 -74
- package/src/components/{NavMenuLink.tsx → deprecated/NavMenuLink.tsx} +1 -1
- package/src/components/{NavMenuList.tsx → deprecated/NavMenuList.tsx} +3 -3
- package/src/components/{NavMenuTrigger.tsx → deprecated/NavMenuTrigger.tsx} +4 -4
- package/src/config/types.ts +1 -0
- package/src/index.ts +8 -8
- package/build/legacy/components/Modal.cjs.map +0 -1
- package/build/legacy/components/ModalDescription.cjs.map +0 -1
- package/build/legacy/components/ModalHeader.cjs.map +0 -1
- package/build/legacy/components/ModalHeading.cjs.map +0 -1
- package/build/legacy/components/NavMenuLink.cjs.map +0 -1
- package/build/legacy/components/NavMenuList.cjs.map +0 -1
- package/build/legacy/components/NavMenuTrigger.cjs.map +0 -1
- package/build/modern/chunk-7NN3SJ7W.js.map +0 -1
- package/build/modern/chunk-IGHMP4WA.js.map +0 -1
- package/build/modern/chunk-JIRW4XOJ.js.map +0 -1
- package/build/modern/chunk-KKHL3ZO4.js +0 -69
- package/build/modern/chunk-KKHL3ZO4.js.map +0 -1
- package/build/modern/chunk-NUMM4TNC.js.map +0 -1
- package/build/modern/chunk-PM7CWT3N.js.map +0 -1
- package/build/modern/chunk-UZVQ4INR.js.map +0 -1
- package/build/modern/chunk-WPVDQRRF.js.map +0 -1
- package/build/modern/chunk-ZL6ZITLA.js.map +0 -1
- package/build/modern/components/Modal.js +0 -7
- package/build/modern/components/ModalDescription.js +0 -7
- package/build/modern/components/ModalHeader.js +0 -7
- package/build/modern/components/ModalHeading.js +0 -7
- package/build/modern/components/NavMenuLink.js +0 -8
- package/build/modern/components/NavMenuList.js +0 -12
- package/build/modern/components/NavMenuTrigger.js +0 -11
- /package/build/modern/{chunk-BAWZBF5Q.js.map → chunk-WN7TJX6J.js.map} +0 -0
- /package/build/modern/components/{Modal.js.map → deprecated/Modal.js.map} +0 -0
- /package/build/modern/components/{ModalDescription.js.map → deprecated/ModalDescription.js.map} +0 -0
- /package/build/modern/components/{ModalHeader.js.map → deprecated/ModalHeader.js.map} +0 -0
- /package/build/modern/components/{ModalHeading.js.map → deprecated/ModalHeading.js.map} +0 -0
- /package/build/modern/components/{NavMenuLink.js.map → deprecated/NavMenuLink.js.map} +0 -0
- /package/build/modern/components/{NavMenuList.js.map → deprecated/NavMenuList.js.map} +0 -0
- /package/build/modern/components/{NavMenuTrigger.js.map → deprecated/NavMenuTrigger.js.map} +0 -0
- /package/src/components/{Modal.tsx → deprecated/Modal.tsx} +0 -0
- /package/src/components/{ModalDescription.tsx → deprecated/ModalDescription.tsx} +0 -0
- /package/src/components/{ModalHeader.tsx → deprecated/ModalHeader.tsx} +0 -0
- /package/src/components/{ModalHeading.tsx → deprecated/ModalHeading.tsx} +0 -0
|
@@ -96,6 +96,7 @@ import { KeyboardSensor } from '@dnd-kit/core';
|
|
|
96
96
|
import { KeyboardSensorOptions } from '@dnd-kit/core';
|
|
97
97
|
import { KeyboardSensorProps } from '@dnd-kit/core';
|
|
98
98
|
import { LabelVariantProps } from '@cerberus/styled-system/recipes';
|
|
99
|
+
import { ListCollection } from '@ark-ui/react/select';
|
|
99
100
|
import { MeasuringConfiguration } from '@dnd-kit/core';
|
|
100
101
|
import { MeasuringFrequency } from '@dnd-kit/core';
|
|
101
102
|
import { MeasuringStrategy } from '@dnd-kit/core';
|
|
@@ -107,7 +108,6 @@ import { MouseEventHandler } from 'react';
|
|
|
107
108
|
import { MouseSensor } from '@dnd-kit/core';
|
|
108
109
|
import { MouseSensorOptions } from '@dnd-kit/core';
|
|
109
110
|
import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
|
|
110
|
-
import type { OptionHTMLAttributes } from 'react';
|
|
111
111
|
import { Over } from '@dnd-kit/core';
|
|
112
112
|
import { PointerActivationConstraint } from '@dnd-kit/core';
|
|
113
113
|
import { PointerEventHandlers } from '@dnd-kit/core';
|
|
@@ -127,7 +127,11 @@ import { rectIntersection } from '@dnd-kit/core';
|
|
|
127
127
|
import { RefAttributes } from 'react';
|
|
128
128
|
import { RefObject } from 'react';
|
|
129
129
|
import { ScreenReaderInstructions } from '@dnd-kit/core';
|
|
130
|
-
import
|
|
130
|
+
import { SelectItemGroupLabelProps } from '@ark-ui/react/select';
|
|
131
|
+
import { SelectItemGroupProps } from '@ark-ui/react/select';
|
|
132
|
+
import { SelectItemProps } from '@ark-ui/react/select';
|
|
133
|
+
import { SelectRootProps } from '@ark-ui/react/select';
|
|
134
|
+
import { SelectValueChangeDetails } from '@ark-ui/react/select';
|
|
131
135
|
import { SelectVariantProps } from '@cerberus/styled-system/recipes';
|
|
132
136
|
import { Sensor } from '@dnd-kit/core';
|
|
133
137
|
import { SensorContext } from '@dnd-kit/core';
|
|
@@ -520,6 +524,19 @@ declare type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>
|
|
|
520
524
|
export { BaseNotificationHeadingProps }
|
|
521
525
|
export { BaseNotificationHeadingProps as BaseNotificationHeadingProps_alias_1 }
|
|
522
526
|
|
|
527
|
+
declare interface BaseSelectProps {
|
|
528
|
+
/**
|
|
529
|
+
* The placeholder text when no option is selected.
|
|
530
|
+
*/
|
|
531
|
+
placeholder?: string;
|
|
532
|
+
/**
|
|
533
|
+
* The label of the select.
|
|
534
|
+
*/
|
|
535
|
+
label: string;
|
|
536
|
+
}
|
|
537
|
+
export { BaseSelectProps }
|
|
538
|
+
export { BaseSelectProps as BaseSelectProps_alias_1 }
|
|
539
|
+
|
|
523
540
|
/**
|
|
524
541
|
* A component that allows the user to perform actions
|
|
525
542
|
* @see https://cerberus.digitalu.design/react/button
|
|
@@ -749,6 +766,18 @@ declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTrigger
|
|
|
749
766
|
export { createNavTriggerProps }
|
|
750
767
|
export { createNavTriggerProps as createNavTriggerProps_alias_1 }
|
|
751
768
|
|
|
769
|
+
/**
|
|
770
|
+
* A helper function to create a SelectCollection object.
|
|
771
|
+
* @param collection - An array of SelectCollectionItem objects that matches
|
|
772
|
+
* the following shape:
|
|
773
|
+
* ```ts
|
|
774
|
+
* [{ label: 'Hades', value: 'hades', disabled?: true }]
|
|
775
|
+
* ```
|
|
776
|
+
*/
|
|
777
|
+
declare function createSelectCollection(collection: SelectCollectionItem[]): ListCollection<SelectCollectionItem>;
|
|
778
|
+
export { createSelectCollection }
|
|
779
|
+
export { createSelectCollection as createSelectCollection_alias_1 }
|
|
780
|
+
|
|
752
781
|
/**
|
|
753
782
|
* Provides a CTA modal to the app.
|
|
754
783
|
* @see https://cerberus.digitalu.design/react/cta-modal
|
|
@@ -1117,6 +1146,7 @@ declare interface DefinedIcons<T extends IconType = IconType> {
|
|
|
1117
1146
|
invalidAlt: T;
|
|
1118
1147
|
redo: T;
|
|
1119
1148
|
selectArrow: T;
|
|
1149
|
+
selectChecked: T;
|
|
1120
1150
|
toggleChecked: T;
|
|
1121
1151
|
}
|
|
1122
1152
|
export { DefinedIcons }
|
|
@@ -1989,6 +2019,9 @@ declare type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
|
|
|
1989
2019
|
export { LegendProps }
|
|
1990
2020
|
export { LegendProps as LegendProps_alias_1 }
|
|
1991
2021
|
|
|
2022
|
+
export { ListCollection }
|
|
2023
|
+
export { ListCollection as ListCollection_alias_1 }
|
|
2024
|
+
|
|
1992
2025
|
/**
|
|
1993
2026
|
* Create a system configuration object to be used on the CerberusProvider.
|
|
1994
2027
|
* @param options The system configuration options you want to customize.
|
|
@@ -2552,19 +2585,45 @@ declare interface NotifyOptions {
|
|
|
2552
2585
|
export { NotifyOptions }
|
|
2553
2586
|
export { NotifyOptions as NotifyOptions_alias_1 }
|
|
2554
2587
|
|
|
2588
|
+
declare function Option_2(props: OptionProps): JSX_2.Element;
|
|
2589
|
+
export { Option_2 as Option }
|
|
2590
|
+
export { Option_2 as Option_alias_1 }
|
|
2591
|
+
|
|
2555
2592
|
/**
|
|
2556
|
-
*
|
|
2557
|
-
*
|
|
2593
|
+
* The OptionGroup component is a group of options in the dropdown list.
|
|
2594
|
+
* @definition [Select docs](https://cerberus.digitalu.design/react/select)
|
|
2595
|
+
* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
|
|
2558
2596
|
* @example
|
|
2559
2597
|
* ```tsx
|
|
2560
|
-
* <
|
|
2598
|
+
* <OptionGroup>
|
|
2599
|
+
* <OptionGroupLabel>Greek gods</OptionGroupLabel>
|
|
2600
|
+
* ...
|
|
2601
|
+
* </OptionGroup>
|
|
2561
2602
|
* ```
|
|
2562
2603
|
*/
|
|
2563
|
-
declare function
|
|
2564
|
-
export {
|
|
2565
|
-
export {
|
|
2604
|
+
declare function OptionGroup(props: SelectItemGroupProps): JSX_2.Element;
|
|
2605
|
+
export { OptionGroup }
|
|
2606
|
+
export { OptionGroup as OptionGroup_alias_1 }
|
|
2607
|
+
|
|
2608
|
+
/**
|
|
2609
|
+
* The OptionGroupLabel component is the label of the OptionGroup.
|
|
2610
|
+
* @definition [Select docs](https://cerberus.digitalu.design/react/select)
|
|
2611
|
+
* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
|
|
2612
|
+
* @example
|
|
2613
|
+
* ```tsx
|
|
2614
|
+
* <OptionGroupLabel>Greek gods</OptionGroupLabel>
|
|
2615
|
+
* ```
|
|
2616
|
+
*/
|
|
2617
|
+
declare function OptionGroupLabel(props: SelectItemGroupLabelProps): JSX_2.Element;
|
|
2618
|
+
export { OptionGroupLabel }
|
|
2619
|
+
export { OptionGroupLabel as OptionGroupLabel_alias_1 }
|
|
2566
2620
|
|
|
2567
|
-
declare
|
|
2621
|
+
declare interface OptionProps extends SelectItemProps {
|
|
2622
|
+
/**
|
|
2623
|
+
* The CollectionListItem to be displayed in the dropdown list.
|
|
2624
|
+
*/
|
|
2625
|
+
item: SelectCollectionItem;
|
|
2626
|
+
}
|
|
2568
2627
|
export { OptionProps }
|
|
2569
2628
|
export { OptionProps as OptionProps_alias_1 }
|
|
2570
2629
|
|
|
@@ -2830,42 +2889,77 @@ export { RootColorsResult as RootColorsResult_alias_1 }
|
|
|
2830
2889
|
export { ScreenReaderInstructions }
|
|
2831
2890
|
|
|
2832
2891
|
/**
|
|
2833
|
-
*
|
|
2834
|
-
*
|
|
2835
|
-
* @
|
|
2892
|
+
* The Select component is a dropdown list that allows users to select an
|
|
2893
|
+
* option from a list.
|
|
2894
|
+
* @definition [Select docs](https://cerberus.digitalu.design/react/select)
|
|
2895
|
+
* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
|
|
2836
2896
|
* @example
|
|
2837
2897
|
* ```tsx
|
|
2838
|
-
*
|
|
2839
|
-
*
|
|
2840
|
-
*
|
|
2841
|
-
*
|
|
2842
|
-
*
|
|
2843
|
-
*
|
|
2844
|
-
*
|
|
2845
|
-
*
|
|
2846
|
-
*
|
|
2898
|
+
* import { Select, Option, createListCollection } from '@cerberus-design/react'
|
|
2899
|
+
*
|
|
2900
|
+
* export function SelectBasicPreview() {
|
|
2901
|
+
* const collection = createListCollection({
|
|
2902
|
+
* items: [
|
|
2903
|
+
* { label: 'Hades', value: 'hades' },
|
|
2904
|
+
* { label: 'Persephone', value: 'persephone' },
|
|
2905
|
+
* { label: 'Zeus', value: 'zeus', disabled: true },
|
|
2906
|
+
* ]
|
|
2907
|
+
* })
|
|
2908
|
+
*
|
|
2909
|
+
* return (
|
|
2910
|
+
* <Select
|
|
2911
|
+
* collection={collection}
|
|
2912
|
+
* label="Select Relative"
|
|
2913
|
+
* placeholder="Choose option"
|
|
2914
|
+
* >
|
|
2915
|
+
* {collection.items.map((item) => (
|
|
2916
|
+
* <Option key={item.value} item={item} />
|
|
2917
|
+
* ))}
|
|
2918
|
+
* </Select>
|
|
2919
|
+
* )
|
|
2920
|
+
* }
|
|
2847
2921
|
*/
|
|
2848
2922
|
declare function Select(props: SelectProps): JSX_2.Element;
|
|
2849
2923
|
export { Select }
|
|
2850
2924
|
export { Select as Select_alias_1 }
|
|
2851
2925
|
|
|
2926
|
+
declare interface SelectCollection {
|
|
2927
|
+
/**
|
|
2928
|
+
* The items to be displayed in the dropdown list.
|
|
2929
|
+
*/
|
|
2930
|
+
items: SelectCollectionItem[];
|
|
2931
|
+
}
|
|
2932
|
+
export { SelectCollection }
|
|
2933
|
+
export { SelectCollection as SelectCollection_alias_1 }
|
|
2934
|
+
|
|
2852
2935
|
/**
|
|
2853
|
-
* This module contains the
|
|
2854
|
-
* @module
|
|
2936
|
+
* This module contains the Select components.
|
|
2937
|
+
* @module 'react/select'
|
|
2855
2938
|
*/
|
|
2856
|
-
declare
|
|
2939
|
+
declare interface SelectCollectionItem {
|
|
2857
2940
|
/**
|
|
2858
|
-
*
|
|
2941
|
+
* What is displayed in the dropdown list.
|
|
2859
2942
|
*/
|
|
2860
|
-
|
|
2943
|
+
label: string;
|
|
2861
2944
|
/**
|
|
2862
|
-
* The
|
|
2945
|
+
* The value of the selected item used in the form.
|
|
2863
2946
|
*/
|
|
2864
|
-
|
|
2865
|
-
|
|
2947
|
+
value: string;
|
|
2948
|
+
/**
|
|
2949
|
+
* If the item is disabled.
|
|
2950
|
+
*/
|
|
2951
|
+
disabled?: boolean;
|
|
2952
|
+
}
|
|
2953
|
+
export { SelectCollectionItem }
|
|
2954
|
+
export { SelectCollectionItem as SelectCollectionItem_alias_1 }
|
|
2955
|
+
|
|
2956
|
+
declare type SelectProps = SelectRootProps<SelectCollectionItem> & BaseSelectProps & SelectVariantProps;
|
|
2866
2957
|
export { SelectProps }
|
|
2867
2958
|
export { SelectProps as SelectProps_alias_1 }
|
|
2868
2959
|
|
|
2960
|
+
export { SelectValueChangeDetails }
|
|
2961
|
+
export { SelectValueChangeDetails as SelectValueChangeDetails_alias_1 }
|
|
2962
|
+
|
|
2869
2963
|
export { Sensor }
|
|
2870
2964
|
|
|
2871
2965
|
export { SensorContext }
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
Show
|
|
6
6
|
} from "./chunk-BUVVRQLZ.js";
|
|
7
7
|
|
|
8
|
-
// src/components/NavMenuList.tsx
|
|
8
|
+
// src/components/deprecated/NavMenuList.tsx
|
|
9
9
|
import { useMemo } from "react";
|
|
10
10
|
import { cx } from "@cerberus/styled-system/css";
|
|
11
11
|
import { vstack } from "@cerberus/styled-system/patterns";
|
|
@@ -83,4 +83,4 @@ export {
|
|
|
83
83
|
getPosition,
|
|
84
84
|
NavMenuList
|
|
85
85
|
};
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
86
|
+
//# sourceMappingURL=chunk-AIJ75ENY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../../context/navMenu'\nimport type { Positions } from '../../types'\nimport { Show } from '../Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n /**\n * The left position of the element.\n */\n left: string\n /**\n * The right position of the element.\n */\n right: string\n /**\n * The top position of the element.\n */\n top: string\n /**\n * The bottom position of the element.\n */\n bottom: string\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function getPosition(position: Positions): GetPositionResult {\n const defaultPositions = {\n left: 'auto',\n right: 'auto',\n top: 'auto',\n bottom: 'auto',\n }\n switch (position) {\n case 'right':\n return { ...defaultPositions, top: '0%', left: '105%' }\n case 'left':\n return { ...defaultPositions, top: '0%', right: '105%' }\n case 'bottom':\n return { ...defaultPositions, top: '110%' }\n case 'top':\n return { ...defaultPositions, bottom: '110%' }\n default:\n return defaultPositions\n }\n}\n\nconst navListStyles = vstack({\n alignItems: 'flex-start',\n bgColor: 'page.surface.100',\n boxShadow: 'lg',\n gap: '2',\n opacity: '0',\n p: '4',\n position: 'absolute',\n rounded: 'md',\n zIndex: 'dropdown',\n _motionSafe: {\n animationName: 'zoomIn',\n animationDelay: '100ms',\n animationDuration: '150ms',\n animationFillMode: 'both',\n animationTimingFunction: 'ease-in-out',\n },\n _positionBottom: {\n transformOrigin: 'top left',\n },\n _positionTop: {\n transformOrigin: 'bottom left',\n },\n _positionLeft: {\n transformOrigin: 'top right',\n },\n _positionRight: {\n transformOrigin: 'top left',\n },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n /**\n * The unique identifier for the NavMenuList. Required for accessibility.\n */\n id: string\n /**\n * The position of the NavMenuList.\n * @type 'top' | 'right' | 'bottom' | 'left'\n * @default 'bottom'\n */\n position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n * <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n const { position, ...nativeProps } = props\n const { menuRef, expanded } = useNavMenuContext()\n const locationStyles = useMemo(\n () => getPosition(position ?? 'bottom'),\n [position],\n )\n\n return (\n <Show when={expanded}>\n <ul\n {...nativeProps}\n data-position={position ?? 'bottom'}\n className={cx(nativeProps.className, navListStyles)}\n ref={menuRef}\n style={locationStyles}\n />\n </Show>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA0HjB;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// src/components/ModalHeader.tsx
|
|
1
|
+
// src/components/deprecated/ModalHeader.tsx
|
|
2
2
|
import { cx } from "@cerberus/styled-system/css";
|
|
3
3
|
import { vstack } from "@cerberus/styled-system/patterns";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -22,4 +22,4 @@ function ModalHeader(props) {
|
|
|
22
22
|
export {
|
|
23
23
|
ModalHeader
|
|
24
24
|
};
|
|
25
|
-
//# sourceMappingURL=chunk-
|
|
25
|
+
//# sourceMappingURL=chunk-AUALRL3U.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * @deprecated there is no replacement for this component\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n return (\n <div\n {...props}\n className={cx(\n props.className,\n vstack({\n alignItems: 'flex-start',\n gap: 'md',\n position: 'relative',\n }),\n )}\n />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAenB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n accordion,\n type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\n\nexport type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps\n\n/**\n * The context provider for the Accordion family.\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItemGroup heading=\"Item 1 heading\" value=\"one\">\n * This is the content\n * </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function Accordion(props: AccordionProps) {\n const { size, className, ...rootProps } = props\n const styles = accordion({ size })\n\n return (\n <ArkAccordion.Root\n collapsible\n className={cx(className, styles.root)}\n {...rootProps}\n />\n )\n}\n\ntype AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps\n\n/**\n * The item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItem(props: AccordionItemProps) {\n const { size, ...itemProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Item\n {...itemProps}\n className={cx(itemProps.className, styles.item)}\n />\n )\n}\n\nexport type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &\n AccordionVariantProps\n\n/**\n * The trigger for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItemTrigger(props: AccordionItemTriggerProps) {\n const { size, ...triggerProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemTrigger\n {...triggerProps}\n className={cx(triggerProps.className, styles.itemTrigger)}\n />\n )\n}\n\nexport type AccordionItemContentProps = ArkAccordion.ItemContentProps &\n AccordionVariantProps\n\n/**\n * The content for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemContent(props: AccordionItemContentProps) {\n const { size, ...contentProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemContent\n {...contentProps}\n className={cx(contentProps.className, styles.itemContent)}\n />\n )\n}\n"],"mappings":";AAAA,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAqBH;AALG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,WAAW,GAAG,UAAU,IAAI;AAC1C,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AAEjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,WAAW,OAAO,IAAI;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAqBO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,UAAU,WAAW,OAAO,IAAI;AAAA;AAAA,EAChD;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;","names":[]}
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
createNavTriggerProps
|
|
9
9
|
} from "./chunk-JF76VIL3.js";
|
|
10
10
|
|
|
11
|
-
// src/components/NavMenuTrigger.tsx
|
|
11
|
+
// src/components/deprecated/NavMenuTrigger.tsx
|
|
12
12
|
import {
|
|
13
13
|
useCallback
|
|
14
14
|
} from "react";
|
|
@@ -78,4 +78,4 @@ function NavMenuTrigger(props) {
|
|
|
78
78
|
export {
|
|
79
79
|
NavMenuTrigger
|
|
80
80
|
};
|
|
81
|
-
//# sourceMappingURL=chunk-
|
|
81
|
+
//# sourceMappingURL=chunk-BRVZVAPT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/NavMenuTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n type ButtonHTMLAttributes,\n type ElementType,\n type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../../context/navMenu'\nimport type { ButtonProps } from '../Button'\nimport { Show } from '../Show'\n\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n /**\n * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n * @default 'button'\n * @example\n * ```tsx\n * <NavMenuTrigger as={IconButton} href=\"/home\" />\n * ```\n */\n as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n const {\n as,\n palette,\n usage,\n shape,\n controls,\n expanded: propsExpanded,\n onClick,\n ...nativeProps\n } = props\n const { triggerRef, onToggle, expanded } = useNavMenuContext()\n const ariaProps = createNavTriggerProps({\n controls,\n expanded: propsExpanded ?? expanded,\n })\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n const handleClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n if (onClick) return onClick(e)\n onToggle()\n },\n [onClick, onToggle],\n )\n\n return (\n <Show\n when={hasAs}\n fallback={\n <button\n {...nativeProps}\n {...ariaProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n onClick={handleClick}\n ref={triggerRef}\n >\n {props.children}\n </button>\n }\n >\n {hasAs && (\n <AsSub\n {...nativeProps}\n {...ariaProps}\n onClick={handleClick}\n ref={triggerRef}\n />\n )}\n </Show>\n )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA+Df;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// src/components/Modal.tsx
|
|
1
|
+
// src/components/deprecated/Modal.tsx
|
|
2
2
|
import { cx } from "@cerberus/styled-system/css";
|
|
3
3
|
import { modal } from "@cerberus/styled-system/recipes";
|
|
4
4
|
import { forwardRef } from "react";
|
|
@@ -18,4 +18,4 @@ var Modal = forwardRef(ModalEl);
|
|
|
18
18
|
export {
|
|
19
19
|
Modal
|
|
20
20
|
};
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
21
|
+
//# sourceMappingURL=chunk-Q3I4H6EC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n return (\n <dialog\n {...props}\n className={cx(props.className, modal().dialog)}\n ref={ref}\n />\n )\n}\n\n/**\n * @deprecated use `Dialog` instead\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAKO,IAAM,QAAQ,WAAW,OAAO;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// src/components/ModalHeading.tsx
|
|
1
|
+
// src/components/deprecated/ModalHeading.tsx
|
|
2
2
|
import { cx } from "@cerberus/styled-system/css";
|
|
3
3
|
import { modal } from "@cerberus/styled-system/recipes";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -9,4 +9,4 @@ function ModalHeading(props) {
|
|
|
9
9
|
export {
|
|
10
10
|
ModalHeading
|
|
11
11
|
};
|
|
12
|
-
//# sourceMappingURL=chunk-
|
|
12
|
+
//# sourceMappingURL=chunk-SWX5JWZR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogHeading` instead\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAcb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// src/components/ModalDescription.tsx
|
|
1
|
+
// src/components/deprecated/ModalDescription.tsx
|
|
2
2
|
import { cx } from "@cerberus/styled-system/css";
|
|
3
3
|
import { modal } from "@cerberus/styled-system/recipes";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -9,4 +9,4 @@ function ModalDescription(props) {
|
|
|
9
9
|
export {
|
|
10
10
|
ModalDescription
|
|
11
11
|
};
|
|
12
|
-
//# sourceMappingURL=chunk-
|
|
12
|
+
//# sourceMappingURL=chunk-WECB67DC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogDescription` instead\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAcb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
AccordionItem,
|
|
6
6
|
AccordionItemContent,
|
|
7
7
|
AccordionItemTrigger
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-AZRFYQO7.js";
|
|
9
9
|
import {
|
|
10
10
|
Show
|
|
11
11
|
} from "./chunk-BUVVRQLZ.js";
|
|
@@ -38,4 +38,4 @@ function AccordionItemGroup(props) {
|
|
|
38
38
|
export {
|
|
39
39
|
AccordionItemGroup
|
|
40
40
|
};
|
|
41
|
-
//# sourceMappingURL=chunk-
|
|
41
|
+
//# sourceMappingURL=chunk-WN7TJX6J.js.map
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Text
|
|
3
|
+
} from "./chunk-RU5LOXWI.js";
|
|
4
|
+
import {
|
|
5
|
+
Portal
|
|
6
|
+
} from "./chunk-IQJDVFPP.js";
|
|
7
|
+
import {
|
|
8
|
+
Show
|
|
9
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
10
|
+
import {
|
|
11
|
+
useCerberusContext
|
|
12
|
+
} from "./chunk-GITT5645.js";
|
|
13
|
+
|
|
14
|
+
// src/components/Select.tsx
|
|
15
|
+
import {
|
|
16
|
+
Select as ArkSelect,
|
|
17
|
+
createListCollection
|
|
18
|
+
} from "@ark-ui/react/select";
|
|
19
|
+
import {
|
|
20
|
+
select
|
|
21
|
+
} from "@cerberus/styled-system/recipes";
|
|
22
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
23
|
+
import { HStack } from "@cerberus/styled-system/jsx";
|
|
24
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
25
|
+
function Select(props) {
|
|
26
|
+
const { collection, label, placeholder, size, ...rootProps } = props;
|
|
27
|
+
const { icons } = useCerberusContext();
|
|
28
|
+
const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
|
|
29
|
+
const styles = select({ size });
|
|
30
|
+
return /* @__PURE__ */ jsxs(
|
|
31
|
+
ArkSelect.Root,
|
|
32
|
+
{
|
|
33
|
+
className: styles.root,
|
|
34
|
+
collection,
|
|
35
|
+
...rootProps,
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsxs(ArkSelect.Label, { className: styles.label, children: [
|
|
38
|
+
label,
|
|
39
|
+
/* @__PURE__ */ jsx(Show, { when: props.required, children: /* @__PURE__ */ jsx(Text, { as: "span", color: "page.text.100", children: "(required)" }) })
|
|
40
|
+
] }),
|
|
41
|
+
/* @__PURE__ */ jsx(ArkSelect.Control, { className: styles.control, children: /* @__PURE__ */ jsxs(ArkSelect.Trigger, { className: styles.trigger, children: [
|
|
42
|
+
/* @__PURE__ */ jsx(ArkSelect.ValueText, { placeholder }),
|
|
43
|
+
/* @__PURE__ */ jsxs(HStack, { children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Show, { when: props.invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { "data-part": "invalid-icon" }) }),
|
|
45
|
+
/* @__PURE__ */ jsx(ArkSelect.Indicator, { className: styles.indicator, children: /* @__PURE__ */ jsx(SelectArrow, {}) })
|
|
46
|
+
] })
|
|
47
|
+
] }) }),
|
|
48
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ArkSelect.Positioner, { className: styles.positioner, children: /* @__PURE__ */ jsx(ArkSelect.Content, { className: styles.content, children: props.children }) }) }),
|
|
49
|
+
/* @__PURE__ */ jsx(ArkSelect.HiddenSelect, {})
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
function Option(props) {
|
|
55
|
+
const { item, ...itemProps } = props;
|
|
56
|
+
const { icons } = useCerberusContext();
|
|
57
|
+
const { selectChecked: CheckedIcon } = icons;
|
|
58
|
+
const styles = select();
|
|
59
|
+
return /* @__PURE__ */ jsxs(ArkSelect.Item, { ...itemProps, item, className: styles.item, children: [
|
|
60
|
+
/* @__PURE__ */ jsx(ArkSelect.ItemText, { className: styles.itemText, children: item?.label }),
|
|
61
|
+
/* @__PURE__ */ jsx(ArkSelect.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(CheckedIcon, {}) })
|
|
62
|
+
] });
|
|
63
|
+
}
|
|
64
|
+
function OptionGroup(props) {
|
|
65
|
+
return /* @__PURE__ */ jsx(ArkSelect.ItemGroup, { ...props });
|
|
66
|
+
}
|
|
67
|
+
function OptionGroupLabel(props) {
|
|
68
|
+
const styles = select();
|
|
69
|
+
return /* @__PURE__ */ jsx(
|
|
70
|
+
ArkSelect.ItemGroupLabel,
|
|
71
|
+
{
|
|
72
|
+
...props,
|
|
73
|
+
className: cx(props.className, styles.itemGroupLabel)
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
function createSelectCollection(collection) {
|
|
78
|
+
return createListCollection({
|
|
79
|
+
items: collection
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export {
|
|
84
|
+
Select,
|
|
85
|
+
Option,
|
|
86
|
+
OptionGroup,
|
|
87
|
+
OptionGroupLabel,
|
|
88
|
+
createSelectCollection
|
|
89
|
+
};
|
|
90
|
+
//# sourceMappingURL=chunk-X6WFDKKJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n Select as ArkSelect,\n createListCollection,\n type SelectRootProps,\n type SelectItemProps,\n type SelectItemGroupProps,\n type SelectItemGroupLabelProps,\n type ListCollection,\n type SelectValueChangeDetails,\n} from '@ark-ui/react/select'\nimport {\n select,\n type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Portal } from './Portal'\nimport { Show } from './Show'\nimport { Text } from './Text'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n /**\n * What is displayed in the dropdown list.\n */\n label: string\n /**\n * The value of the selected item used in the form.\n */\n value: string\n /**\n * If the item is disabled.\n */\n disabled?: boolean\n}\n\nexport interface SelectCollection {\n /**\n * The items to be displayed in the dropdown list.\n */\n items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n /**\n * The placeholder text when no option is selected.\n */\n placeholder?: string\n /**\n * The label of the select.\n */\n label: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n BaseSelectProps &\n SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n * const collection = createListCollection({\n * items: [\n * { label: 'Hades', value: 'hades' },\n * { label: 'Persephone', value: 'persephone' },\n * { label: 'Zeus', value: 'zeus', disabled: true },\n * ]\n * })\n *\n * return (\n * <Select\n * collection={collection}\n * label=\"Select Relative\"\n * placeholder=\"Choose option\"\n * >\n * {collection.items.map((item) => (\n * <Option key={item.value} item={item} />\n * ))}\n * </Select>\n * )\n * }\n */\nexport function Select(props: SelectProps) {\n const { collection, label, placeholder, size, ...rootProps } = props\n const { icons } = useCerberusContext()\n const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n const styles = select({ size })\n\n return (\n <ArkSelect.Root\n className={styles.root}\n collection={collection}\n {...rootProps}\n >\n <ArkSelect.Label className={styles.label}>\n {label}\n <Show when={props.required}>\n <Text as=\"span\" color=\"page.text.100\">\n (required)\n </Text>\n </Show>\n </ArkSelect.Label>\n\n <ArkSelect.Control className={styles.control}>\n <ArkSelect.Trigger className={styles.trigger}>\n <ArkSelect.ValueText placeholder={placeholder} />\n\n <HStack>\n <Show when={props.invalid}>\n <InvalidIcon data-part=\"invalid-icon\" />\n </Show>\n <ArkSelect.Indicator className={styles.indicator}>\n <SelectArrow />\n </ArkSelect.Indicator>\n </HStack>\n </ArkSelect.Trigger>\n </ArkSelect.Control>\n\n <Portal>\n <ArkSelect.Positioner className={styles.positioner}>\n <ArkSelect.Content className={styles.content}>\n {props.children}\n </ArkSelect.Content>\n </ArkSelect.Positioner>\n </Portal>\n\n <ArkSelect.HiddenSelect />\n </ArkSelect.Root>\n )\n}\n\nexport interface OptionProps extends SelectItemProps {\n /**\n * The CollectionListItem to be displayed in the dropdown list.\n */\n item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n const { item, ...itemProps } = props\n\n const { icons } = useCerberusContext()\n const { selectChecked: CheckedIcon } = icons\n\n const styles = select()\n\n return (\n <ArkSelect.Item {...itemProps} item={item} className={styles.item}>\n <ArkSelect.ItemText className={styles.itemText}>\n {item?.label}\n </ArkSelect.ItemText>\n <ArkSelect.ItemIndicator className={styles.itemIndicator}>\n <CheckedIcon />\n </ArkSelect.ItemIndicator>\n </ArkSelect.Item>\n )\n}\n\n/**\n * The OptionGroup component is a group of options in the dropdown list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroup>\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ...\n * </OptionGroup>\n * ```\n */\nexport function OptionGroup(props: SelectItemGroupProps) {\n return <ArkSelect.ItemGroup {...props} />\n}\n\n/**\n * The OptionGroupLabel component is the label of the OptionGroup.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ```\n */\nexport function OptionGroupLabel(props: SelectItemGroupLabelProps) {\n const styles = select()\n return (\n <ArkSelect.ItemGroupLabel\n {...props}\n className={cx(props.className, styles.itemGroupLabel)}\n />\n )\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n return createListCollection({\n items: collection,\n })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n"],"mappings":";;;;;;;;;;;;;;AAEA;AAAA,EACE,UAAU;AAAA,EACV;AAAA,OAOK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB,SAGI,KAHJ;AAbC,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,YAAY,OAAO,aAAa,MAAM,GAAG,UAAU,IAAI;AAC/D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,aAAa,SAAS,YAAY,IAAI;AAE3D,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAE9B,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC,WAAW,OAAO;AAAA,MAClB;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,UAAU,OAAV,EAAgB,WAAW,OAAO,OAChC;AAAA;AAAA,UACD,oBAAC,QAAK,MAAM,MAAM,UAChB,8BAAC,QAAK,IAAG,QAAO,OAAM,iBAAgB,wBAEtC,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,UAAU,SAAV,EAAkB,WAAW,OAAO,SACnC,+BAAC,UAAU,SAAV,EAAkB,WAAW,OAAO,SACnC;AAAA,8BAAC,UAAU,WAAV,EAAoB,aAA0B;AAAA,UAE/C,qBAAC,UACC;AAAA,gCAAC,QAAK,MAAM,MAAM,SAChB,8BAAC,eAAY,aAAU,gBAAe,GACxC;AAAA,YACA,oBAAC,UAAU,WAAV,EAAoB,WAAW,OAAO,WACrC,8BAAC,eAAY,GACf;AAAA,aACF;AAAA,WACF,GACF;AAAA,QAEA,oBAAC,UACC,8BAAC,UAAU,YAAV,EAAqB,WAAW,OAAO,YACtC,8BAAC,UAAU,SAAV,EAAkB,WAAW,OAAO,SAClC,gBAAM,UACT,GACF,GACF;AAAA,QAEA,oBAAC,UAAU,cAAV,EAAuB;AAAA;AAAA;AAAA,EAC1B;AAEJ;AASO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAE/B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,YAAY,IAAI;AAEvC,QAAM,SAAS,OAAO;AAEtB,SACE,qBAAC,UAAU,MAAV,EAAgB,GAAG,WAAW,MAAY,WAAW,OAAO,MAC3D;AAAA,wBAAC,UAAU,UAAV,EAAmB,WAAW,OAAO,UACnC,gBAAM,OACT;AAAA,IACA,oBAAC,UAAU,eAAV,EAAwB,WAAW,OAAO,eACzC,8BAAC,eAAY,GACf;AAAA,KACF;AAEJ;AAcO,SAAS,YAAY,OAA6B;AACvD,SAAO,oBAAC,UAAU,WAAV,EAAqB,GAAG,OAAO;AACzC;AAWO,SAAS,iBAAiB,OAAkC;AACjE,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;AAUO,SAAS,uBACd,YACsC;AACtC,SAAO,qBAAqB;AAAA,IAC1B,OAAO;AAAA,EACT,CAAC;AACH;","names":[]}
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
Show
|
|
3
3
|
} from "./chunk-BUVVRQLZ.js";
|
|
4
4
|
|
|
5
|
-
// src/components/NavMenuLink.tsx
|
|
5
|
+
// src/components/deprecated/NavMenuLink.tsx
|
|
6
6
|
import { css, cx } from "@cerberus/styled-system/css";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
function NavMenuLink(props) {
|
|
@@ -45,4 +45,4 @@ function NavMenuLink(props) {
|
|
|
45
45
|
export {
|
|
46
46
|
NavMenuLink
|
|
47
47
|
};
|
|
48
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-YOTXFCCC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from '../Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The element type to render as. Recommended to use for Next apps with the\n * `Link` component.\n */\n as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n const { as, ...nativeProps } = props\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n return (\n <li\n className={css({\n w: 'full',\n })}\n >\n <Show\n when={hasAs}\n fallback={\n <a\n {...nativeProps}\n className={cx(\n nativeProps.className,\n css({\n color: 'action.navigation.initial',\n textStyle: 'link',\n _hover: {\n color: 'action.navigation.hover',\n },\n }),\n )}\n />\n }\n >\n {hasAs && <AsSub {...nativeProps} />}\n </Show>\n </li>\n )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAkCd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
AccordionItemGroup
|
|
3
|
-
} from "../chunk-
|
|
3
|
+
} from "../chunk-WN7TJX6J.js";
|
|
4
4
|
import "../chunk-XZGXRRSQ.js";
|
|
5
|
-
import "../chunk-
|
|
5
|
+
import "../chunk-AZRFYQO7.js";
|
|
6
6
|
import "../chunk-BUVVRQLZ.js";
|
|
7
7
|
import "../chunk-GITT5645.js";
|
|
8
8
|
export {
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Option,
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
OptionGroup,
|
|
5
|
+
OptionGroupLabel,
|
|
6
|
+
Select,
|
|
7
|
+
createSelectCollection
|
|
8
|
+
} from "../chunk-X6WFDKKJ.js";
|
|
9
|
+
import "../chunk-RU5LOXWI.js";
|
|
10
|
+
import "../chunk-IQJDVFPP.js";
|
|
7
11
|
import "../chunk-BUVVRQLZ.js";
|
|
8
12
|
import "../chunk-GITT5645.js";
|
|
9
13
|
export {
|
|
10
14
|
Option,
|
|
11
|
-
|
|
15
|
+
OptionGroup,
|
|
16
|
+
OptionGroupLabel,
|
|
17
|
+
Select,
|
|
18
|
+
createSelectCollection
|
|
12
19
|
};
|
|
13
20
|
//# sourceMappingURL=Select.js.map
|