@cerberus-design/react 0.6.1 → 0.7.0

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -6,25 +6,32 @@ import { ChangeEvent } from 'react';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
+import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { iconButton } from '@cerberus/styled-system/recipes';
 import { input } from '@cerberus/styled-system/recipes';
 import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import type { KeyboardEventHandler } from 'react';
 import { label } from '@cerberus/styled-system/recipes';
+import { ModalIconVariantProps } from '@cerberus-design/styled-system/recipes';
 import { MutableRefObject } from 'react';
+import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
+import { TabsVariantProps } from '@cerberus-design/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 import { ToggleVariantProps } from '@cerberus-design/styled-system/recipes';
 
-declare let $cerberusIcons: DefinedIcons;
+declare let $cerberusIcons: Required<DefinedIcons>;
 export { $cerberusIcons }
 export { $cerberusIcons as $cerberusIcons_alias_1 }
 
@@ -58,6 +65,45 @@ declare type ColorModes = 'light' | 'dark';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
 
+/**
+ * Provides a confirm modal to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <ConfirmModal>
+ *   <SomeFeatureSection />
+ * </ConfirmModal>
+ *
+ * // Use the hook to show the confirm modal.
+ * const confirm = useConfirmModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await confirm.show({
+ *   heading: 'Add new payment method?',
+ *  description:
+ *   'This will add a new payment method to your account to be billed for future purchases.',
+ * actionText: 'Yes, add payment method',
+ * cancelText: 'No, cancel',
+ * })
+ * setConsent(userConsent)
+ * }, [confirm])
+ * ```
+ */
+declare function ConfirmModal(props: PropsWithChildren<ConfirmModalProviderProps>): JSX_2.Element;
+export { ConfirmModal }
+export { ConfirmModal as ConfirmModal_alias_1 }
+
+declare interface ConfirmModalProviderProps {
+}
+export { ConfirmModalProviderProps }
+export { ConfirmModalProviderProps as ConfirmModalProviderProps_alias_1 }
+
+declare interface ConfirmModalValue {
+    show: (options: ShowConfirmModalOptions) => Promise<boolean>;
+}
+export { ConfirmModalValue }
+export { ConfirmModalValue as ConfirmModalValue_alias_1 }
+
 declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTriggerAriaReturn;
 export { createNavTriggerProps }
 export { createNavTriggerProps as createNavTriggerProps_alias_1 }
@@ -73,14 +119,68 @@ export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
+    confirmModal?: CarbonIconType | ElementType;
+    promptModal?: CarbonIconType | ElementType;
     invalid: CarbonIconType | ElementType;
-    toggleChecked: CarbonIconType | ElementType;
+    toggleChecked?: CarbonIconType | ElementType;
 }
 
-declare function defineIcons(icons: DefinedIcons): DefinedIcons;
+declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
 
+declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): JSX_2.Element;
+export { FeatureFlag }
+export { FeatureFlag as FeatureFlag_alias_1 }
+
+declare interface FeatureFlagProps {
+    flag: string;
+}
+export { FeatureFlagProps }
+export { FeatureFlagProps as FeatureFlagProps_alias_1 }
+
+declare interface FeatureFlagProviderProps {
+    flags: FeatureFlagValue;
+}
+export { FeatureFlagProviderProps }
+export { FeatureFlagProviderProps as FeatureFlagProviderProps_alias_1 }
+
+/**
+ * Provides feature flags to the application.
+ * @param flags - The flags data for the provider.
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlags flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlags>
+ * ```
+ */
+declare function FeatureFlags(props: PropsWithChildren<FeatureFlagProviderProps>): JSX_2.Element;
+export { FeatureFlags }
+export { FeatureFlags as FeatureFlags_alias_1 }
+
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+declare interface FeatureFlagValue {
+    [key: string]: boolean;
+}
+export { FeatureFlagValue }
+export { FeatureFlagValue as FeatureFlagValue_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -223,6 +323,108 @@ declare type LabelRecipeProps = RecipeVariantProps<typeof label>;
 export { LabelRecipeProps }
 export { LabelRecipeProps as LabelRecipeProps_alias_1 }
 
+/**
+ * The Modal component is the root element for a customizable modal.
+ * @example
+ * ```tsx
+ * const { modalRef } = useModal()
+ *
+ * <Modal ref={modalRef}>
+ *  <ModalIcon icon={$cerberusIcons.alert} />
+ *  <h2>Modal Heading</h2>
+ *  <p>Modal description</p>
+ * </Modal>
+ * ```
+ */
+declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDialogElement>>;
+export { Modal }
+export { Modal as Modal_alias_1 }
+
+/**
+ * The ModalDescription component is a heading element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalDescription>Modal Heading</ModalDescription>
+ * </Modal>
+ * ```
+ */
+declare function ModalDescription(props: ModalDescriptionProps): JSX_2.Element;
+export { ModalDescription }
+export { ModalDescription as ModalDescription_alias_1 }
+
+/**
+ * This module contains the ModalDescription component for a customizable modal.
+ * @module
+ */
+declare type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export { ModalDescriptionProps }
+export { ModalDescriptionProps as ModalDescriptionProps_alias_1 }
+
+/**
+ * The ModalHeader component is a header element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalHeader>
+ *     <h2>Modal Heading</h2>
+ *   </ModalHeader>
+ * </Modal>
+ * ```
+ */
+declare function ModalHeader(props: ModalHeaderProps): JSX_2.Element;
+export { ModalHeader }
+export { ModalHeader as ModalHeader_alias_1 }
+
+/**
+ * This module contains the ModalHeader component for a customizable modal.
+ * @module
+ */
+declare type ModalHeaderProps = HTMLAttributes<HTMLDivElement>;
+export { ModalHeaderProps }
+export { ModalHeaderProps as ModalHeaderProps_alias_1 }
+
+/**
+ * The ModalHeading component is a heading element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalHeading>Modal Heading</ModalHeading>
+ * </Modal>
+ * ```
+ */
+declare function ModalHeading(props: ModalHeadingProps): JSX_2.Element;
+export { ModalHeading }
+export { ModalHeading as ModalHeading_alias_1 }
+
+/**
+ * This module contains the ModalHeading component for a customizable modal.
+ * @module
+ */
+declare type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>;
+export { ModalHeadingProps }
+export { ModalHeadingProps as ModalHeadingProps_alias_1 }
+
+declare function ModalIcon(props: PropsWithChildren<ModalIconProps>): JSX_2.Element;
+export { ModalIcon }
+export { ModalIcon as ModalIcon_alias_1 }
+
+declare type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>;
+export { ModalIconBaseProps }
+export { ModalIconBaseProps as ModalIconBaseProps_alias_1 }
+
+declare type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps;
+export { ModalIconProps }
+export { ModalIconProps as ModalIconProps_alias_1 }
+
+/**
+ * This module contains the Modal root component for a customizable modal.
+ * @module
+ */
+declare type ModalProps = HTMLAttributes<HTMLDialogElement>;
+export { ModalProps }
+export { ModalProps as ModalProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }
@@ -316,10 +518,75 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @param container - The props for the Portal component.
+ * @returns ReactPortal
+ */
+declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
+export { Portal }
+export { Portal as Portal_alias_1 }
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+declare interface PortalProps {
+    container?: Element | DocumentFragment;
+    key?: null | string;
+}
+export { PortalProps }
+export { PortalProps as PortalProps_alias_1 }
+
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * Provides a prompt modal to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <PromptModal>
+ *   <SomeFeatureSection />
+ * </PromptModal>
+ *
+ * // Use the hook to show the prompt modal.
+ * const prompt = usePromptModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const accepted = await prompt.show({
+ *   kind: 'destructive',
+ *   heading: 'Delete channel?',
+ *  description:
+ *   'This will permanently delete a channel on your account. There is no going back.',
+ * key: CHANNEL_NAME,
+ * actionText: 'Yes, delete channel',
+ * cancelText: 'No, cancel',
+ * })
+ * // do something with accepted
+ * }, [prompt])
+ * ```
+ */
+declare function PromptModal(props: PropsWithChildren<PromptModalProviderProps>): JSX_2.Element;
+export { PromptModal }
+export { PromptModal as PromptModal_alias_1 }
+
+declare interface PromptModalProviderProps {
+}
+export { PromptModalProviderProps }
+export { PromptModalProviderProps as PromptModalProviderProps_alias_1 }
+
+declare interface PromptModalValue {
+    show: (options: ShowPromptModalOptions) => Promise<string>;
+}
+export { PromptModalValue }
+export { PromptModalValue as PromptModalValue_alias_1 }
+
+declare type PromptShowResult = ((value: string | PromiseLike<string>) => void) | null;
+export { PromptShowResult }
+export { PromptShowResult as PromptShowResult_alias_1 }
+
 declare function Radio(props: PropsWithChildren<RadioProps>): JSX_2.Element;
 export { Radio }
 export { Radio as Radio_alias_1 }
@@ -352,6 +619,35 @@ declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
 export { Show }
 export { Show as Show_alias_1 }
 
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+declare interface ShowConfirmModalOptions {
+    kind?: 'destructive' | 'non-destructive';
+    heading: string;
+    description?: string;
+    actionText: string;
+    cancelText: string;
+}
+export { ShowConfirmModalOptions }
+export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
+
+/**
+ * This module provides a context and hook for the prompt modal.
+ * @module
+ */
+declare interface ShowPromptModalOptions {
+    kind?: 'destructive' | 'non-destructive';
+    heading: string;
+    description?: string;
+    key: string;
+    actionText: string;
+    cancelText: string;
+}
+export { ShowPromptModalOptions }
+export { ShowPromptModalOptions as ShowPromptModalOptions_alias_1 }
+
 declare interface ShowProps {
     when: boolean | null | undefined;
     fallback?: ReactNode;
@@ -359,6 +655,10 @@ declare interface ShowProps {
 export { ShowProps }
 export { ShowProps as ShowProps_alias_1 }
 
+declare type ShowResult = ((value: boolean | PromiseLike<boolean>) => void) | null;
+export { ShowResult }
+export { ShowResult as ShowResult_alias_1 }
+
 declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagRecipeProps & {
     onClick?: never;
 };
@@ -442,6 +742,7 @@ export { TabProps as TabProps_alias_1 }
 
 /**
  * The Tabs component provides a context to manage tab state.
+ * @param id - the id of the tabs component,
  * @param active - the default active tab id,
  * @param cache - whether to cache the active tab state in local storage
  * @example
@@ -458,7 +759,7 @@ export { TabProps as TabProps_alias_1 }
  * </Tabs>
  * ```
  */
-declare function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element;
+declare function Tabs(props: PropsWithChildren<TabsProps & TabsVariantProps>): JSX.Element;
 export { Tabs }
 export { Tabs as Tabs_alias_1 }
 
@@ -474,6 +775,7 @@ declare interface TabsContextValue {
     tabs: MutableRefObject<HTMLButtonElement[]>;
     id: string;
     active: string;
+    styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>;
     onTabUpdate: (active: string) => void;
 }
 export { TabsContextValue }
@@ -583,14 +885,44 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
 export { ToggleProps }
 export { ToggleProps as ToggleProps_alias_1 }
 
+declare function trapFocus(modalRef: RefObject<HTMLDialogElement>): KeyboardEventHandler<HTMLDialogElement>;
+export { trapFocus }
+export { trapFocus as trapFocus_alias_1 }
+
+declare function useConfirmModal(): ConfirmModalValue;
+export { useConfirmModal }
+export { useConfirmModal as useConfirmModal_alias_1 }
+
+declare function useFeatureFlags(key: string): boolean;
+export { useFeatureFlags }
+export { useFeatureFlags as useFeatureFlags_alias_1 }
+
 declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }
 
+declare function useModal(): UseModalReturnValue;
+export { useModal }
+export { useModal as useModal_alias_1 }
+
+/**
+ * This module provides a hook for using a custom modal.
+ * @module
+ */
+declare interface UseModalReturnValue {
+    modalRef: RefObject<HTMLDialogElement>;
+    show: () => void;
+    close: () => void;
+}
+
 declare function useNavMenuContext(): NavMenuContextValue;
 export { useNavMenuContext }
 export { useNavMenuContext as useNavMenuContext_alias_1 }
 
+declare function usePromptModal(): PromptModalValue;
+export { usePromptModal }
+export { usePromptModal as usePromptModal_alias_1 }
+
 declare function useTabsContext(): TabsContextValue;
 export { useTabsContext }
 export { useTabsContext as useTabsContext_alias_1 }

package/build/legacy/aria-helpers/tabs.aria.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-S7HBD2A7.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-KFUXGX33.js";
+import "../chunk-7KJIZIAU.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/legacy/aria-helpers/trap-focus.aria.js

@@ -0,0 +1,7 @@
+import {
+  trapFocus
+} from "../chunk-KESKDLX6.js";
+export {
+  trapFocus
+};
+//# sourceMappingURL=trap-focus.aria.js.map

package/build/legacy/aria-helpers/trap-focus.aria.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/chunk-2F5TB2EV.js

@@ -0,0 +1,25 @@
+// src/components/ModalHeader.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { vstack } from "@cerberus-design/styled-system/patterns";
+import { jsx } from "react/jsx-runtime";
+function ModalHeader(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cx(
+        props.className,
+        vstack({
+          alignItems: "flex-start",
+          gap: "4",
+          mb: "8"
+        })
+      )
+    }
+  );
+}
+
+export {
+  ModalHeader
+};
+//# sourceMappingURL=chunk-2F5TB2EV.js.map

package/build/legacy/chunk-2F5TB2EV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { vstack } from '@cerberus-design/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 * The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\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: '4',\n          mb: '8',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAuBnB;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,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-4CAT3FHV.js

@@ -0,0 +1,11 @@
+// src/components/Portal.tsx
+import { createPortal } from "react-dom";
+function Portal(props) {
+  const container = props.container || document.body;
+  return createPortal(props.children, container, props.key);
+}
+
+export {
+  Portal
+};
+//# sourceMappingURL=chunk-4CAT3FHV.js.map

package/build/legacy/chunk-4CAT3FHV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  container?: Element | DocumentFragment\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/legacy/chunk-4M3EUP57.js

@@ -0,0 +1,22 @@
+// src/context/feature-flags.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var FeatureFlagContext = createContext(null);
+function FeatureFlags(props) {
+  return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+}
+function useFeatureFlags(key) {
+  const context = useContext(FeatureFlagContext);
+  if (context === null) {
+    throw new Error(
+      "useFeatureFlag must be used within a FeatureFlags Provider"
+    );
+  }
+  return context[key] ?? false;
+}
+
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=chunk-4M3EUP57.js.map

package/build/legacy/chunk-4M3EUP57.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n  [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n  flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n *  featureOne: true,\n *  featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n *    <FeatureFlag flag=\"featureOne\">\n *      This is visible.\n *    </FeatureFlag>\n *   <FeatureFlag flag=\"featureTwo\">\n *     This is hidden.\n *   </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n  props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n  return (\n    <FeatureFlagContext.Provider value={props.flags}>\n      {props.children}\n    </FeatureFlagContext.Provider>\n  )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n  const context = useContext(FeatureFlagContext)\n  if (context === null) {\n    throw new Error(\n      'useFeatureFlag must be used within a FeatureFlags Provider',\n    )\n  }\n  return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}

package/build/{modern/chunk-X4YQ27D5.js → legacy/chunk-5GEC53G7.js}

@@ -1,12 +1,12 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-3CBN7U25.js";
+} from "./chunk-6TXQZ3PB.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-X4YQ27D5.js.map
+//# sourceMappingURL=chunk-5GEC53G7.js.map

package/build/legacy/{chunk-YJCWUN33.js → chunk-67S42J4B.js}

@@ -3,15 +3,15 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/components/TabPanel.tsx
-import { css, cx } from "@cerberus/styled-system/css";
+import { cx } from "@cerberus/styled-system/css";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
-  const { active } = useTabsContext();
+  const { active, styles } = useTabsContext();
   const isActive = useMemo(() => active === tab, [active, tab]);
   return /* @__PURE__ */ jsx(Show, { when: isActive, children: /* @__PURE__ */ jsx(
     "div",
@@ -19,18 +19,7 @@ function TabPanel(props) {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": tab,
-      className: cx(
-        nativeProps.className,
-        css({
-          rounded: "md",
-          _focusVisible: {
-            boxShadow: "none",
-            outline: "3px solid",
-            outlineColor: "action.border.focus",
-            outlineOffset: "2px"
-          }
-        })
-      ),
+      className: cx(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"
     }
@@ -40,4 +29,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-YJCWUN33.js.map
+//# sourceMappingURL=chunk-67S42J4B.js.map

package/build/legacy/chunk-67S42J4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TabPanel.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { Show } from './Show'\n\n/**\n * This module provides a TabPanel component.\n * @module\n */\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs provider.\n * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <TabPanel tab=\"overview\">\n *   Overview content\n * </TabPanel>\n * ```\n */\nexport function TabPanel(props: TabPanelProps) {\n  const { tab, ...nativeProps } = props\n  const { active, styles } = useTabsContext()\n  const isActive = useMemo(() => active === tab, [active, tab])\n\n  return (\n    <Show when={isActive}>\n      <div\n        {...nativeProps}\n        {...(isActive && { tabIndex: 0 })}\n        aria-labelledby={tab}\n        className={cx(nativeProps.className, styles.tabPanel)}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,QAAQ,OAAO,IAAI,eAAe;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,WAAW,GAAG,YAAY,WAAW,OAAO,QAAQ;AAAA,MACpD,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/legacy/{chunk-3CBN7U25.js → chunk-6TXQZ3PB.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-5MNCW677.js";
+} from "./chunk-C45DY4VE.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -12,7 +12,10 @@ function _validateIconsProperties(icons) {
 }
 function defineIcons(icons) {
   _validateIconsProperties(icons);
-  $cerberusIcons = icons;
+  $cerberusIcons = {
+    ...defaultIcons,
+    ...icons
+  };
   return $cerberusIcons;
 }
 var $cerberusIcons = defaultIcons;
@@ -21,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-3CBN7U25.js.map
+//# sourceMappingURL=chunk-6TXQZ3PB.js.map

package/build/legacy/chunk-6TXQZ3PB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAA6C;AACvE,2BAAyB,KAAK;AAC9B,mBAAiB;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SAAO;AACT;AAIO,IAAI,iBAAiB;","names":[]}