UNPKG

@cerberus-design/react

Version:

The Cerberus Design React component library.

1 lines 3.63 kB
{"version":3,"sources":["../../../../src/components/field/status-indicator.tsx","../../../../src/context/cerberus.tsx"],"sourcesContent":["'use client'\n\nimport { useFieldContext } from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { field } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface FieldStatusIndicatorProps\n extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The fallback content to display when the field is valid.\n */\n fallback?: ReactNode\n}\n\n/**\n * The invalid status indicator for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n * <FieldStatusIndicator />\n * </FieldRoot>\n * ```\n */\nexport function FieldStatusIndicator(props: FieldStatusIndicatorProps) {\n const { fallback, ...nativeProps } = props\n\n const fieldContext = useFieldContext()\n const styles = field()\n\n const { icons } = useCerberusContext()\n const { invalid: InvalidIcon } = icons\n\n if (!fieldContext) return null\n\n if (fieldContext.invalid) {\n return (\n <span\n {...nativeProps}\n aria-hidden=\"true\"\n data-invalid\n className={cx(nativeProps.className, styles.statusIndicator)}\n >\n <InvalidIcon />\n </span>\n )\n }\n\n return (\n <span\n {...nativeProps}\n aria-hidden=\"true\"\n data-part=\"end-indicator\"\n className={cx(nativeProps.className, styles.endIndicator)}\n >\n {fallback}\n </span>\n )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAgC;AAChC,iBAAmB;AACnB,qBAAsB;;;ACFtB,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ADEQ,IAAAC,sBAAA;AAnBD,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AAErC,QAAM,mBAAe,+BAAgB;AACrC,QAAM,aAAS,sBAAM;AAErB,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,MAAI,CAAC,aAAc,QAAO;AAE1B,MAAI,aAAa,SAAS;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ,gBAAY;AAAA,QACZ,eAAW,eAAG,YAAY,WAAW,OAAO,eAAe;AAAA,QAE3D,uDAAC,eAAY;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAY;AAAA,MACZ,aAAU;AAAA,MACV,eAAW,eAAG,YAAY,WAAW,OAAO,YAAY;AAAA,MAEvD;AAAA;AAAA,EACH;AAEJ;","names":["import_react","import_jsx_runtime"]}