@cerberus-design/react 0.5.2 → 0.6.0-next-9dc8f7b
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.ts +157 -49
- package/build/legacy/aria-helpers/tabs.aria.js +1 -1
- package/build/legacy/{chunk-XFWARXLU.js → chunk-2ATICEW3.js} +1 -1
- package/build/legacy/chunk-2ATICEW3.js.map +1 -0
- package/build/legacy/chunk-3CBN7U25.js +24 -0
- package/build/legacy/chunk-3CBN7U25.js.map +1 -0
- package/build/{modern/chunk-R4H3352X.js → legacy/chunk-4O4QFF4S.js} +2 -3
- package/build/legacy/{chunk-R4H3352X.js.map → chunk-4O4QFF4S.js.map} +1 -1
- package/build/legacy/chunk-5MNCW677.js +11 -0
- package/build/legacy/chunk-5MNCW677.js.map +1 -0
- package/build/{modern/chunk-7BXBIDZB.js → legacy/chunk-5XNLWIZO.js} +11 -8
- package/build/legacy/chunk-5XNLWIZO.js.map +1 -0
- package/build/{modern/chunk-JA4IX7GN.js → legacy/chunk-6DIGPXAD.js} +2 -2
- package/build/legacy/chunk-734PGVLT.js +58 -0
- package/build/legacy/chunk-734PGVLT.js.map +1 -0
- package/build/legacy/{chunk-WSQTX34C.js → chunk-G2QMBSK5.js} +2 -2
- package/build/{modern/chunk-OXVNTE4A.js → legacy/chunk-HE3HFKYU.js} +8 -7
- package/build/legacy/chunk-HE3HFKYU.js.map +1 -0
- package/build/legacy/{chunk-MJB3V6J4.js → chunk-RPZAPUCF.js} +3 -4
- package/build/legacy/{chunk-MJB3V6J4.js.map → chunk-RPZAPUCF.js.map} +1 -1
- package/build/legacy/{chunk-BT2B5C7M.js → chunk-S7HBD2A7.js} +2 -3
- package/build/legacy/{chunk-BT2B5C7M.js.map → chunk-S7HBD2A7.js.map} +1 -1
- package/build/legacy/chunk-SCQVXJBT.js +22 -0
- package/build/legacy/chunk-SCQVXJBT.js.map +1 -0
- package/build/{modern/chunk-NIMWIOIA.js → legacy/chunk-SLHX5K6I.js} +1 -1
- package/build/legacy/chunk-SLHX5K6I.js.map +1 -0
- package/build/legacy/{chunk-5TBINKAO.js → chunk-TCO46FK7.js} +1 -1
- package/build/legacy/chunk-TCO46FK7.js.map +1 -0
- package/build/legacy/{chunk-YVUZSAJG.js → chunk-VGHVH2T3.js} +1 -1
- package/build/legacy/chunk-VGHVH2T3.js.map +1 -0
- package/build/legacy/chunk-WE3JNSNO.js +33 -0
- package/build/legacy/chunk-WE3JNSNO.js.map +1 -0
- package/build/legacy/{chunk-LD5ZV46F.js → chunk-X4YQ27D5.js} +14 -7
- package/build/legacy/chunk-X4YQ27D5.js.map +1 -0
- package/build/legacy/{chunk-MYRKQVDI.js → chunk-YA2UV2AB.js} +2 -2
- package/build/legacy/{chunk-SVZU6LPF.js → chunk-YJCWUN33.js} +2 -2
- package/build/legacy/components/Button.js +1 -1
- package/build/legacy/components/FieldMessage.js +1 -1
- package/build/legacy/components/IconButton.js +1 -1
- package/build/legacy/components/Input.js +4 -2
- package/build/legacy/components/Label.js +2 -2
- package/build/legacy/components/NavMenuLink.js +2 -2
- package/build/legacy/components/NavMenuList.js +2 -2
- package/build/legacy/components/NavMenuTrigger.js +2 -2
- package/build/legacy/components/Radio.js +9 -0
- package/build/legacy/components/Radio.js.map +1 -0
- package/build/legacy/components/Show.js +1 -1
- package/build/legacy/components/Tab.js +2 -2
- package/build/legacy/components/TabPanel.js +2 -2
- package/build/legacy/components/Tag.js +2 -2
- package/build/legacy/components/Textarea.js +1 -1
- package/build/legacy/components/Toggle.js +11 -0
- package/build/legacy/components/Toggle.js.map +1 -0
- package/build/legacy/config/cerbIcons.js +7 -0
- package/build/legacy/config/cerbIcons.js.map +1 -0
- package/build/legacy/config/defineIcons.js +10 -0
- package/build/legacy/config/defineIcons.js.map +1 -0
- package/build/legacy/hooks/useToggle.js +8 -0
- package/build/legacy/hooks/useToggle.js.map +1 -0
- package/build/legacy/index.js +48 -29
- package/build/legacy/noExternals.d.ts +1 -0
- package/build/modern/_tsup-dts-rollup.d.ts +157 -49
- package/build/modern/aria-helpers/tabs.aria.js +1 -1
- package/build/modern/{chunk-XFWARXLU.js → chunk-2ATICEW3.js} +1 -1
- package/build/modern/chunk-2ATICEW3.js.map +1 -0
- package/build/modern/chunk-3CBN7U25.js +24 -0
- package/build/modern/chunk-3CBN7U25.js.map +1 -0
- package/build/{legacy/chunk-R4H3352X.js → modern/chunk-4O4QFF4S.js} +2 -3
- package/build/modern/{chunk-R4H3352X.js.map → chunk-4O4QFF4S.js.map} +1 -1
- package/build/modern/chunk-5MNCW677.js +11 -0
- package/build/modern/chunk-5MNCW677.js.map +1 -0
- package/build/{legacy/chunk-JA4IX7GN.js → modern/chunk-6DIGPXAD.js} +2 -2
- package/build/modern/chunk-734PGVLT.js +58 -0
- package/build/modern/chunk-734PGVLT.js.map +1 -0
- package/build/modern/{chunk-WSQTX34C.js → chunk-G2QMBSK5.js} +2 -2
- package/build/{legacy/chunk-OXVNTE4A.js → modern/chunk-HE3HFKYU.js} +8 -7
- package/build/modern/chunk-HE3HFKYU.js.map +1 -0
- package/build/modern/chunk-QEA6N6TN.js +22 -0
- package/build/modern/chunk-QEA6N6TN.js.map +1 -0
- package/build/modern/{chunk-MJB3V6J4.js → chunk-RPZAPUCF.js} +3 -4
- package/build/modern/{chunk-MJB3V6J4.js.map → chunk-RPZAPUCF.js.map} +1 -1
- package/build/modern/{chunk-BT2B5C7M.js → chunk-S7HBD2A7.js} +2 -3
- package/build/modern/{chunk-BT2B5C7M.js.map → chunk-S7HBD2A7.js.map} +1 -1
- package/build/{legacy/chunk-NIMWIOIA.js → modern/chunk-SLHX5K6I.js} +1 -1
- package/build/modern/chunk-SLHX5K6I.js.map +1 -0
- package/build/{legacy/chunk-7BXBIDZB.js → modern/chunk-SLIOCQBZ.js} +11 -8
- package/build/modern/chunk-SLIOCQBZ.js.map +1 -0
- package/build/modern/{chunk-IQP6HSC4.js → chunk-SUP7U42W.js} +2 -2
- package/build/modern/{chunk-5TBINKAO.js → chunk-TCO46FK7.js} +1 -1
- package/build/modern/chunk-TCO46FK7.js.map +1 -0
- package/build/modern/{chunk-YVUZSAJG.js → chunk-VGHVH2T3.js} +1 -1
- package/build/modern/chunk-VGHVH2T3.js.map +1 -0
- package/build/modern/chunk-WE3JNSNO.js +33 -0
- package/build/modern/chunk-WE3JNSNO.js.map +1 -0
- package/build/modern/{chunk-LD5ZV46F.js → chunk-X4YQ27D5.js} +14 -7
- package/build/modern/chunk-X4YQ27D5.js.map +1 -0
- package/build/modern/{chunk-SVZU6LPF.js → chunk-YJCWUN33.js} +2 -2
- package/build/modern/components/Button.js +1 -1
- package/build/modern/components/FieldMessage.js +1 -1
- package/build/modern/components/IconButton.js +1 -1
- package/build/modern/components/Input.js +4 -2
- package/build/modern/components/Label.js +2 -2
- package/build/modern/components/NavMenuLink.js +2 -2
- package/build/modern/components/NavMenuList.js +2 -2
- package/build/modern/components/NavMenuTrigger.js +2 -2
- package/build/modern/components/Radio.js +9 -0
- package/build/modern/components/Radio.js.map +1 -0
- package/build/modern/components/Show.js +1 -1
- package/build/modern/components/Tab.js +2 -2
- package/build/modern/components/TabPanel.js +2 -2
- package/build/modern/components/Tag.js +2 -2
- package/build/modern/components/Textarea.js +1 -1
- package/build/modern/components/Toggle.js +11 -0
- package/build/modern/components/Toggle.js.map +1 -0
- package/build/modern/config/cerbIcons.js +7 -0
- package/build/modern/config/cerbIcons.js.map +1 -0
- package/build/modern/config/defineIcons.js +10 -0
- package/build/modern/config/defineIcons.js.map +1 -0
- package/build/modern/hooks/useToggle.js +8 -0
- package/build/modern/hooks/useToggle.js.map +1 -0
- package/build/modern/index.js +48 -29
- package/build/modern/noExternals.d.ts +1 -0
- package/package.json +7 -6
- package/src/components/Button.tsx +3 -6
- package/src/components/FieldMessage.tsx +4 -2
- package/src/components/IconButton.tsx +6 -9
- package/src/components/Input.tsx +21 -7
- package/src/components/Label.tsx +9 -6
- package/src/components/Radio.tsx +35 -0
- package/src/components/Tag.tsx +27 -24
- package/src/components/Textarea.tsx +3 -1
- package/src/components/Toggle.tsx +55 -0
- package/src/config/cerbIcons.ts +12 -0
- package/src/config/defineIcons.ts +19 -0
- package/src/hooks/useToggle.ts +30 -0
- package/src/index.ts +7 -0
- package/build/legacy/aria-helpers/nav-menu.aria.d.ts +0 -2
- package/build/legacy/aria-helpers/tabs.aria.d.ts +0 -1
- package/build/legacy/chunk-5TBINKAO.js.map +0 -1
- package/build/legacy/chunk-7BXBIDZB.js.map +0 -1
- package/build/legacy/chunk-LD5ZV46F.js.map +0 -1
- package/build/legacy/chunk-NIMWIOIA.js.map +0 -1
- package/build/legacy/chunk-OXVNTE4A.js.map +0 -1
- package/build/legacy/chunk-XFWARXLU.js.map +0 -1
- package/build/legacy/chunk-YVUZSAJG.js.map +0 -1
- package/build/legacy/components/Button.d.ts +0 -2
- package/build/legacy/components/FieldMessage.d.ts +0 -2
- package/build/legacy/components/IconButton.d.ts +0 -3
- package/build/legacy/components/Input.d.ts +0 -2
- package/build/legacy/components/Label.d.ts +0 -2
- package/build/legacy/components/NavMenuLink.d.ts +0 -2
- package/build/legacy/components/NavMenuList.d.ts +0 -3
- package/build/legacy/components/NavMenuTrigger.d.ts +0 -2
- package/build/legacy/components/Show.d.ts +0 -2
- package/build/legacy/components/Tab.d.ts +0 -2
- package/build/legacy/components/TabList.d.ts +0 -2
- package/build/legacy/components/TabPanel.d.ts +0 -2
- package/build/legacy/components/Tag.d.ts +0 -4
- package/build/legacy/components/Textarea.d.ts +0 -2
- package/build/legacy/context/field.d.ts +0 -3
- package/build/legacy/context/navMenu.d.ts +0 -5
- package/build/legacy/context/tabs.d.ts +0 -5
- package/build/legacy/context/theme.d.ts +0 -8
- package/build/legacy/hooks/useTheme.d.ts +0 -1
- package/build/legacy/index.d.ts +0 -58
- package/build/legacy/types.d.ts +0 -1
- package/build/modern/aria-helpers/nav-menu.aria.d.ts +0 -2
- package/build/modern/aria-helpers/tabs.aria.d.ts +0 -1
- package/build/modern/chunk-5TBINKAO.js.map +0 -1
- package/build/modern/chunk-7BXBIDZB.js.map +0 -1
- package/build/modern/chunk-LD5ZV46F.js.map +0 -1
- package/build/modern/chunk-NIMWIOIA.js.map +0 -1
- package/build/modern/chunk-OXVNTE4A.js.map +0 -1
- package/build/modern/chunk-XFWARXLU.js.map +0 -1
- package/build/modern/chunk-YVUZSAJG.js.map +0 -1
- package/build/modern/components/Button.d.ts +0 -2
- package/build/modern/components/FieldMessage.d.ts +0 -2
- package/build/modern/components/IconButton.d.ts +0 -3
- package/build/modern/components/Input.d.ts +0 -2
- package/build/modern/components/Label.d.ts +0 -2
- package/build/modern/components/NavMenuLink.d.ts +0 -2
- package/build/modern/components/NavMenuList.d.ts +0 -3
- package/build/modern/components/NavMenuTrigger.d.ts +0 -2
- package/build/modern/components/Show.d.ts +0 -2
- package/build/modern/components/Tab.d.ts +0 -2
- package/build/modern/components/TabList.d.ts +0 -2
- package/build/modern/components/TabPanel.d.ts +0 -2
- package/build/modern/components/Tag.d.ts +0 -4
- package/build/modern/components/Textarea.d.ts +0 -2
- package/build/modern/context/field.d.ts +0 -3
- package/build/modern/context/navMenu.d.ts +0 -5
- package/build/modern/context/tabs.d.ts +0 -5
- package/build/modern/context/theme.d.ts +0 -8
- package/build/modern/hooks/useTheme.d.ts +0 -1
- package/build/modern/index.d.ts +0 -58
- package/build/modern/types.d.ts +0 -1
- /package/build/legacy/{chunk-JA4IX7GN.js.map → chunk-6DIGPXAD.js.map} +0 -0
- /package/build/legacy/{chunk-WSQTX34C.js.map → chunk-G2QMBSK5.js.map} +0 -0
- /package/build/legacy/{chunk-MYRKQVDI.js.map → chunk-YA2UV2AB.js.map} +0 -0
- /package/build/legacy/{chunk-SVZU6LPF.js.map → chunk-YJCWUN33.js.map} +0 -0
- /package/build/modern/{chunk-JA4IX7GN.js.map → chunk-6DIGPXAD.js.map} +0 -0
- /package/build/modern/{chunk-WSQTX34C.js.map → chunk-G2QMBSK5.js.map} +0 -0
- /package/build/modern/{chunk-IQP6HSC4.js.map → chunk-SUP7U42W.js.map} +0 -0
- /package/build/modern/{chunk-SVZU6LPF.js.map → chunk-YJCWUN33.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/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\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuTrigger controls=\"nav-menu-list\">\n * Menu\n * </NavMenuTrigger>\n * </NavMenu>\n * ```\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;AA2Df;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
|
|
1
|
+
{"version":3,"sources":["../../src/components/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\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuTrigger controls=\"nav-menu-list\">\n * Menu\n * </NavMenuTrigger>\n * </NavMenu>\n * ```\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;AA2Df;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":[]}
|
|
@@ -18,8 +18,7 @@ function useTabsKeyboardNavigation() {
|
|
|
18
18
|
const index = activeTab === -1 ? tabs.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
|
|
19
19
|
const nextIndex = getNextIndex(index, tabs.current.length);
|
|
20
20
|
const prevIndex = getPrevIndex(index, tabs.current.length);
|
|
21
|
-
if (index === -1)
|
|
22
|
-
return;
|
|
21
|
+
if (index === -1) return;
|
|
23
22
|
switch (event.key) {
|
|
24
23
|
case "ArrowLeft":
|
|
25
24
|
event.preventDefault();
|
|
@@ -62,4 +61,4 @@ function useTabsKeyboardNavigation() {
|
|
|
62
61
|
export {
|
|
63
62
|
useTabsKeyboardNavigation
|
|
64
63
|
};
|
|
65
|
-
//# sourceMappingURL=chunk-
|
|
64
|
+
//# sourceMappingURL=chunk-S7HBD2A7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n const { tabs } = useTabsContext()\n const [activeTab, setActiveTab] = useState(-1)\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const index =\n activeTab === -1\n ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n : activeTab\n const nextIndex = getNextIndex(index, tabs.current.length)\n const prevIndex = getPrevIndex(index, tabs.current.length)\n\n // If the active tab is not found, do nothing\n if (index === -1) return\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault()\n setActiveTab(prevIndex)\n tabs.current[prevIndex].focus()\n break\n case 'ArrowRight':\n event.preventDefault()\n setActiveTab(nextIndex)\n tabs.current[nextIndex].focus()\n break\n case 'Home':\n event.preventDefault()\n setActiveTab(0)\n tabs.current[0].focus()\n break\n case 'End':\n event.preventDefault()\n setActiveTab(tabs.current.length - 1)\n tabs.current[tabs.current.length - 1].focus()\n break\n default:\n break\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n }\n }, [activeTab, tabs.current])\n\n return {\n ref: (tab: HTMLButtonElement) => {\n if (tab && !tabs.current.includes(tab)) {\n tabs.current.push(tab)\n }\n },\n }\n}\n"],"mappings":";;;;;AAEA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAE7C,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACV,KAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU;
|
|
1
|
+
{"version":3,"sources":["../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n const { tabs } = useTabsContext()\n const [activeTab, setActiveTab] = useState(-1)\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const index =\n activeTab === -1\n ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n : activeTab\n const nextIndex = getNextIndex(index, tabs.current.length)\n const prevIndex = getPrevIndex(index, tabs.current.length)\n\n // If the active tab is not found, do nothing\n if (index === -1) return\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault()\n setActiveTab(prevIndex)\n tabs.current[prevIndex].focus()\n break\n case 'ArrowRight':\n event.preventDefault()\n setActiveTab(nextIndex)\n tabs.current[nextIndex].focus()\n break\n case 'Home':\n event.preventDefault()\n setActiveTab(0)\n tabs.current[0].focus()\n break\n case 'End':\n event.preventDefault()\n setActiveTab(tabs.current.length - 1)\n tabs.current[tabs.current.length - 1].focus()\n break\n default:\n break\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n }\n }, [activeTab, tabs.current])\n\n return {\n ref: (tab: HTMLButtonElement) => {\n if (tab && !tabs.current.includes(tab)) {\n tabs.current.push(tab)\n }\n },\n }\n}\n"],"mappings":";;;;;AAEA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAE7C,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACV,KAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU,GAAI;AAElB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,CAAC;AACd,eAAK,QAAQ,CAAC,EAAE,MAAM;AACtB;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,KAAK,QAAQ,SAAS,CAAC;AACpC,eAAK,QAAQ,KAAK,QAAQ,SAAS,CAAC,EAAE,MAAM;AAC5C;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,OAAO,CAAC;AAE5B,SAAO;AAAA,IACL,KAAK,CAAC,QAA2B;AAC/B,UAAI,OAAO,CAAC,KAAK,QAAQ,SAAS,GAAG,GAAG;AACtC,aAAK,QAAQ,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// src/hooks/useToggle.ts
|
|
2
|
+
import { useCallback, useMemo, useState } from "react";
|
|
3
|
+
function useToggle(options) {
|
|
4
|
+
const [checked, setChecked] = useState((options == null ? void 0 : options.checked) ?? "");
|
|
5
|
+
const onChange = options == null ? void 0 : options.onChange;
|
|
6
|
+
const handleChange = useCallback(
|
|
7
|
+
(e) => {
|
|
8
|
+
const target = e.currentTarget;
|
|
9
|
+
setChecked((prev) => {
|
|
10
|
+
return prev === target.value ? "" : target.value;
|
|
11
|
+
});
|
|
12
|
+
onChange == null ? void 0 : onChange(e);
|
|
13
|
+
},
|
|
14
|
+
[onChange]
|
|
15
|
+
);
|
|
16
|
+
return useMemo(() => ({ checked, handleChange }), [checked, handleChange]);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export {
|
|
20
|
+
useToggle
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=chunk-SCQVXJBT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useToggle.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useState, type ChangeEvent } from 'react'\n\nexport interface UseToggleOptions {\n checked?: string\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n}\nexport interface ToggleHookReturn {\n checked: string\n handleChange: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport function useToggle(options?: UseToggleOptions): ToggleHookReturn {\n const [checked, setChecked] = useState<string>(options?.checked ?? '')\n const onChange = options?.onChange\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const target = e.currentTarget as HTMLInputElement\n setChecked((prev) => {\n return prev === target.value ? '' : target.value\n })\n onChange?.(e)\n },\n [onChange],\n )\n\n return useMemo(() => ({ checked, handleChange }), [checked, handleChange])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,gBAAkC;AAW1D,SAAS,UAAU,SAA8C;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,UAAiB,mCAAS,YAAW,EAAE;AACrE,QAAM,WAAW,mCAAS;AAE1B,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,iBAAW,CAAC,SAAS;AACnB,eAAO,SAAS,OAAO,QAAQ,KAAK,OAAO;AAAA,MAC7C,CAAC;AACD,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,QAAQ,OAAO,EAAE,SAAS,aAAa,IAAI,CAAC,SAAS,YAAY,CAAC;AAC3E;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { Positions } from '../types'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n extends ButtonHTMLAttributes<HTMLButtonElement> {\n ariaLabel: string\n tooltipPosition?: Positions\n}\nexport type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>\nexport type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n const { ariaLabel, palette, usage, size, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n data-tooltip\n data-position={props.tooltipPosition ?? 'top'}\n aria-label={ariaLabel ?? 'Icon Button'}\n className={cx(\n nativeProps.className,\n iconButton({\n palette,\n usage,\n size,\n }),\n )}\n />\n )\n}\n"],"mappings":";AACA,SAAS,UAAmC;AAC5C,SAAS,kBAAkB;AAuBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaHTMLAttributes } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\nimport type { InputRecipeProps } from './Input'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaBaseProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n describedBy?: string\n id: string\n}\nexport type TextareaProps = InputRecipeProps & TextareaBaseProps\n\n/**\n * A component that allows the user to input large blocks of text.\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx\n */\nexport function Textarea(props: TextareaProps): JSX.Element {\n const { describedBy, ...nativeProps } = props\n const { invalid, ...fieldState } = useFieldContext()\n\n return (\n <textarea\n {...nativeProps}\n {...fieldState}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n props.className,\n input().input,\n css({\n pxi: '2',\n py: '2',\n resize: 'vertical',\n }),\n )}\n rows={4}\n />\n )\n}\n"],"mappings":";;;;;AAGA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAa;AAyBlB;AALG,SAAS,SAAS,OAAmC;AAC1D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,gBAAgB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,MACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM,EAAE;AAAA,QACR,IAAI;AAAA,UACF,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { fieldMessage } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\n\nexport type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>\nexport interface FieldMessageBaseProps\n extends HTMLAttributes<HTMLParagraphElement> {\n id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageRecipe\n\n/**\n * A component that provides feedback about the field.\n * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)\n * @example\n * ```tsx\n * <Field>\n * <Label htmlFor=\"first_name\">First Name</Label>\n * <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n * <FieldMessage id=\"help:first_name\">\n * This will only be used in your account information.\n * </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n const { invalid } = useFieldContext()\n return (\n <small\n {...props}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(props.className, fieldMessage())}\n />\n )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAmC;AAC5C,SAAS,oBAAoB;AAgCzB;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW,GAAG,MAAM,WAAW,aAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useFieldContext
|
|
3
|
+
} from "./chunk-ZAU4JVLL.js";
|
|
4
|
+
|
|
5
|
+
// src/components/Radio.tsx
|
|
6
|
+
import { cx } from "@cerberus-design/styled-system/css";
|
|
7
|
+
import { hstack } from "@cerberus-design/styled-system/patterns";
|
|
8
|
+
import { radio } from "@cerberus-design/styled-system/recipes";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
function Radio(props) {
|
|
11
|
+
const { children, size, ...nativeProps } = props;
|
|
12
|
+
const { invalid, ...state } = useFieldContext();
|
|
13
|
+
const styles = radio({ size });
|
|
14
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("group", hstack(), styles.root), tabIndex: 0, children: [
|
|
15
|
+
/* @__PURE__ */ jsx(
|
|
16
|
+
"input",
|
|
17
|
+
{
|
|
18
|
+
...nativeProps,
|
|
19
|
+
...state,
|
|
20
|
+
...invalid && { "aria-invalid": true },
|
|
21
|
+
className: cx(nativeProps.className, styles.input),
|
|
22
|
+
tabIndex: -1,
|
|
23
|
+
type: "radio"
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
children
|
|
27
|
+
] });
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export {
|
|
31
|
+
Radio
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=chunk-WE3JNSNO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack } from '@cerberus-design/styled-system/patterns'\nimport { radio } from '@cerberus-design/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus-design/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n const { children, size, ...nativeProps } = props\n const { invalid, ...state } = useFieldContext()\n const styles = radio({ size })\n\n return (\n <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n <input\n {...nativeProps}\n {...state}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(nativeProps.className, styles.input)}\n tabIndex={-1}\n type=\"radio\"\n />\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AAkBlB,SACE,KADF;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAE7B,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,OAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}
|
|
@@ -1,20 +1,25 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Show
|
|
3
|
-
} from "./chunk-R4H3352X.js";
|
|
4
1
|
import {
|
|
5
2
|
useFieldContext
|
|
6
3
|
} from "./chunk-ZAU4JVLL.js";
|
|
4
|
+
import {
|
|
5
|
+
Show
|
|
6
|
+
} from "./chunk-4O4QFF4S.js";
|
|
7
|
+
import {
|
|
8
|
+
$cerberusIcons
|
|
9
|
+
} from "./chunk-3CBN7U25.js";
|
|
7
10
|
|
|
8
11
|
// src/components/Input.tsx
|
|
9
|
-
import { WarningFilled } from "@cerberus/icons";
|
|
10
12
|
import { input } from "@cerberus/styled-system/recipes";
|
|
11
13
|
import { cx } from "@cerberus/styled-system/css";
|
|
12
14
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
15
|
function Input(props) {
|
|
14
|
-
const { describedBy, size, ...nativeProps } = props;
|
|
16
|
+
const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
|
|
15
17
|
const inputStyles = input({ size });
|
|
16
18
|
const { invalid, ...fieldStates } = useFieldContext();
|
|
19
|
+
const hasEndIcon = Boolean(endIcon);
|
|
20
|
+
const { invalid: InvalidIcon } = $cerberusIcons;
|
|
17
21
|
return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
|
|
22
|
+
/* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
|
|
18
23
|
/* @__PURE__ */ jsx(
|
|
19
24
|
"input",
|
|
20
25
|
{
|
|
@@ -22,14 +27,16 @@ function Input(props) {
|
|
|
22
27
|
...fieldStates,
|
|
23
28
|
...describedBy && { "aria-describedby": describedBy },
|
|
24
29
|
...invalid && { "aria-invalid": true },
|
|
30
|
+
"data-start-icon": Boolean(startIcon),
|
|
25
31
|
className: cx("peer", nativeProps.className, inputStyles.input)
|
|
26
32
|
}
|
|
27
33
|
),
|
|
28
|
-
/* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(
|
|
34
|
+
/* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { className: inputStyles.icon }) }),
|
|
35
|
+
/* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
|
|
29
36
|
] });
|
|
30
37
|
}
|
|
31
38
|
|
|
32
39
|
export {
|
|
33
40
|
Input
|
|
34
41
|
};
|
|
35
|
-
//# sourceMappingURL=chunk-
|
|
42
|
+
//# sourceMappingURL=chunk-X4YQ27D5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n describedBy?: string\n id: string\n startIcon?: ReactNode\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n const { invalid: InvalidIcon } = $cerberusIcons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,UAAmC;AAuBxC,SAEI,KAFJ;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useTabsKeyboardNavigation
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-S7HBD2A7.js";
|
|
4
4
|
import {
|
|
5
5
|
useTabsContext
|
|
6
6
|
} from "./chunk-DQOYTLGB.js";
|
|
@@ -123,4 +123,4 @@ var btnStyles = css({
|
|
|
123
123
|
export {
|
|
124
124
|
Tab
|
|
125
125
|
};
|
|
126
|
-
//# sourceMappingURL=chunk-
|
|
126
|
+
//# sourceMappingURL=chunk-YA2UV2AB.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Show
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-4O4QFF4S.js";
|
|
4
4
|
import {
|
|
5
5
|
useTabsContext
|
|
6
6
|
} from "./chunk-DQOYTLGB.js";
|
|
@@ -40,4 +40,4 @@ function TabPanel(props) {
|
|
|
40
40
|
export {
|
|
41
41
|
TabPanel
|
|
42
42
|
};
|
|
43
|
-
//# sourceMappingURL=chunk-
|
|
43
|
+
//# sourceMappingURL=chunk-YJCWUN33.js.map
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Input
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-R4H3352X.js";
|
|
4
|
+
} from "../chunk-X4YQ27D5.js";
|
|
6
5
|
import "../chunk-ZAU4JVLL.js";
|
|
6
|
+
import "../chunk-4O4QFF4S.js";
|
|
7
|
+
import "../chunk-3CBN7U25.js";
|
|
8
|
+
import "../chunk-5MNCW677.js";
|
|
7
9
|
export {
|
|
8
10
|
Input
|
|
9
11
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
NavMenuTrigger
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-RPZAPUCF.js";
|
|
5
5
|
import "../chunk-KJUCHZHV.js";
|
|
6
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-4O4QFF4S.js";
|
|
7
7
|
import "../chunk-JF76VIL3.js";
|
|
8
8
|
export {
|
|
9
9
|
NavMenuTrigger
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/build/legacy/index.js
CHANGED
|
@@ -1,53 +1,77 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Radio
|
|
3
|
+
} from "./chunk-WE3JNSNO.js";
|
|
4
|
+
import {
|
|
5
|
+
Tab
|
|
6
|
+
} from "./chunk-YA2UV2AB.js";
|
|
7
|
+
import {
|
|
8
|
+
TabList
|
|
9
|
+
} from "./chunk-5GSXIYD3.js";
|
|
1
10
|
import {
|
|
2
11
|
TabPanel
|
|
3
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-YJCWUN33.js";
|
|
4
13
|
import {
|
|
5
14
|
Tag
|
|
6
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-5XNLWIZO.js";
|
|
7
16
|
import {
|
|
8
17
|
Textarea
|
|
9
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-TCO46FK7.js";
|
|
19
|
+
import {
|
|
20
|
+
Toggle
|
|
21
|
+
} from "./chunk-734PGVLT.js";
|
|
22
|
+
import {
|
|
23
|
+
Button
|
|
24
|
+
} from "./chunk-2ATICEW3.js";
|
|
25
|
+
import {
|
|
26
|
+
FieldMessage
|
|
27
|
+
} from "./chunk-VGHVH2T3.js";
|
|
28
|
+
import {
|
|
29
|
+
IconButton
|
|
30
|
+
} from "./chunk-SLHX5K6I.js";
|
|
10
31
|
import {
|
|
11
32
|
Input
|
|
12
|
-
} from "./chunk-
|
|
33
|
+
} from "./chunk-X4YQ27D5.js";
|
|
13
34
|
import {
|
|
14
35
|
Label
|
|
15
|
-
} from "./chunk-
|
|
36
|
+
} from "./chunk-HE3HFKYU.js";
|
|
37
|
+
import {
|
|
38
|
+
Field,
|
|
39
|
+
useFieldContext
|
|
40
|
+
} from "./chunk-ZAU4JVLL.js";
|
|
16
41
|
import {
|
|
17
42
|
NavMenuLink
|
|
18
|
-
} from "./chunk-
|
|
43
|
+
} from "./chunk-6DIGPXAD.js";
|
|
19
44
|
import {
|
|
20
45
|
NavMenuList,
|
|
21
46
|
getPosition
|
|
22
|
-
} from "./chunk-
|
|
47
|
+
} from "./chunk-G2QMBSK5.js";
|
|
23
48
|
import {
|
|
24
49
|
NavMenuTrigger
|
|
25
|
-
} from "./chunk-
|
|
50
|
+
} from "./chunk-RPZAPUCF.js";
|
|
26
51
|
import {
|
|
27
52
|
NavMenu,
|
|
28
53
|
useNavMenuContext
|
|
29
54
|
} from "./chunk-KJUCHZHV.js";
|
|
30
55
|
import {
|
|
31
56
|
Show
|
|
32
|
-
} from "./chunk-
|
|
33
|
-
import {
|
|
34
|
-
Tab
|
|
35
|
-
} from "./chunk-MYRKQVDI.js";
|
|
36
|
-
import {
|
|
37
|
-
TabList
|
|
38
|
-
} from "./chunk-5GSXIYD3.js";
|
|
57
|
+
} from "./chunk-4O4QFF4S.js";
|
|
39
58
|
import "./chunk-55J6XMHW.js";
|
|
40
59
|
import {
|
|
41
60
|
createNavTriggerProps
|
|
42
61
|
} from "./chunk-JF76VIL3.js";
|
|
43
62
|
import {
|
|
44
63
|
useTabsKeyboardNavigation
|
|
45
|
-
} from "./chunk-
|
|
64
|
+
} from "./chunk-S7HBD2A7.js";
|
|
46
65
|
import {
|
|
47
66
|
Tabs,
|
|
48
67
|
TabsContext,
|
|
49
68
|
useTabsContext
|
|
50
69
|
} from "./chunk-DQOYTLGB.js";
|
|
70
|
+
import {
|
|
71
|
+
$cerberusIcons,
|
|
72
|
+
defineIcons
|
|
73
|
+
} from "./chunk-3CBN7U25.js";
|
|
74
|
+
import "./chunk-5MNCW677.js";
|
|
51
75
|
import {
|
|
52
76
|
MODE_KEY,
|
|
53
77
|
THEME_KEY,
|
|
@@ -56,19 +80,10 @@ import {
|
|
|
56
80
|
useThemeContext
|
|
57
81
|
} from "./chunk-SXXWC6UD.js";
|
|
58
82
|
import {
|
|
59
|
-
|
|
60
|
-
} from "./chunk-
|
|
61
|
-
import {
|
|
62
|
-
FieldMessage
|
|
63
|
-
} from "./chunk-YVUZSAJG.js";
|
|
64
|
-
import {
|
|
65
|
-
Field,
|
|
66
|
-
useFieldContext
|
|
67
|
-
} from "./chunk-ZAU4JVLL.js";
|
|
68
|
-
import {
|
|
69
|
-
IconButton
|
|
70
|
-
} from "./chunk-NIMWIOIA.js";
|
|
83
|
+
useToggle
|
|
84
|
+
} from "./chunk-SCQVXJBT.js";
|
|
71
85
|
export {
|
|
86
|
+
$cerberusIcons,
|
|
72
87
|
Button,
|
|
73
88
|
Field,
|
|
74
89
|
FieldMessage,
|
|
@@ -80,6 +95,7 @@ export {
|
|
|
80
95
|
NavMenuLink,
|
|
81
96
|
NavMenuList,
|
|
82
97
|
NavMenuTrigger,
|
|
98
|
+
Radio,
|
|
83
99
|
Show,
|
|
84
100
|
THEME_KEY,
|
|
85
101
|
Tab,
|
|
@@ -90,13 +106,16 @@ export {
|
|
|
90
106
|
Tag,
|
|
91
107
|
Textarea,
|
|
92
108
|
ThemeProvider,
|
|
109
|
+
Toggle,
|
|
93
110
|
createNavTriggerProps,
|
|
111
|
+
defineIcons,
|
|
94
112
|
getPosition,
|
|
95
113
|
useFieldContext,
|
|
96
114
|
useNavMenuContext,
|
|
97
115
|
useTabsContext,
|
|
98
116
|
useTabsKeyboardNavigation,
|
|
99
117
|
useTheme,
|
|
100
|
-
useThemeContext
|
|
118
|
+
useThemeContext,
|
|
119
|
+
useToggle
|
|
101
120
|
};
|
|
102
121
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|