@commercetools/nimbus 0.0.0-canary-20250827101922 → 0.0.0-canary-20250828113610
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{alert-BxQlH4k1.es.js → alert-BSP6Q3el.es.js} +2 -2
- package/dist/chunks/{alert-BxQlH4k1.es.js.map → alert-BSP6Q3el.es.js.map} +1 -1
- package/dist/chunks/{alert-BZUgI30X.cjs.js → alert-C88EdygK.cjs.js} +2 -2
- package/dist/chunks/{alert-BZUgI30X.cjs.js.map → alert-C88EdygK.cjs.js.map} +1 -1
- package/dist/chunks/button-B9biGn83.es.js +59 -0
- package/dist/chunks/{button-B4HX0fM_.es.js.map → button-B9biGn83.es.js.map} +1 -1
- package/dist/chunks/button-BCrCWnMd.cjs.js +2 -0
- package/dist/chunks/{button-qv44IWcR.cjs.js.map → button-BCrCWnMd.cjs.js.map} +1 -1
- package/dist/chunks/{calendar-DABzfMco.es.js → calendar-B9IgFF4u.es.js} +2 -2
- package/dist/chunks/{calendar-DABzfMco.es.js.map → calendar-B9IgFF4u.es.js.map} +1 -1
- package/dist/chunks/{calendar-v3st4EyG.cjs.js → calendar-BU_04xoY.cjs.js} +2 -2
- package/dist/chunks/{calendar-v3st4EyG.cjs.js.map → calendar-BU_04xoY.cjs.js.map} +1 -1
- package/dist/chunks/{combobox-Ah0GQqSW.cjs.js → combobox-BvfBQq9k.cjs.js} +2 -2
- package/dist/chunks/{combobox-Ah0GQqSW.cjs.js.map → combobox-BvfBQq9k.cjs.js.map} +1 -1
- package/dist/chunks/{combobox-D_IGHRck.es.js → combobox-ClhyR7hp.es.js} +3 -3
- package/dist/chunks/{combobox-D_IGHRck.es.js.map → combobox-ClhyR7hp.es.js.map} +1 -1
- package/dist/chunks/data-table-BZdQfaxu.cjs.js +2 -0
- package/dist/chunks/data-table-BZdQfaxu.cjs.js.map +1 -0
- package/dist/chunks/{data-table-DbhVtDHQ.es.js → data-table-WHEWdh5f.es.js} +1665 -1526
- package/dist/chunks/data-table-WHEWdh5f.es.js.map +1 -0
- package/dist/chunks/{date-picker-Bpi1PgR2.es.js → date-picker--1p1znhu.es.js} +3 -3
- package/dist/chunks/{date-picker-Bpi1PgR2.es.js.map → date-picker--1p1znhu.es.js.map} +1 -1
- package/dist/chunks/{date-picker-DNROhe7B.cjs.js → date-picker-BAf5yyGT.cjs.js} +2 -2
- package/dist/chunks/{date-picker-DNROhe7B.cjs.js.map → date-picker-BAf5yyGT.cjs.js.map} +1 -1
- package/dist/chunks/{date-range-picker-CXKG84tw.es.js → date-range-picker-J-FqEMGo.es.js} +3 -3
- package/dist/chunks/{date-range-picker-CXKG84tw.es.js.map → date-range-picker-J-FqEMGo.es.js.map} +1 -1
- package/dist/chunks/{date-range-picker-tyjYdQx1.cjs.js → date-range-picker-zxwhdmlC.cjs.js} +2 -2
- package/dist/chunks/{date-range-picker-tyjYdQx1.cjs.js.map → date-range-picker-zxwhdmlC.cjs.js.map} +1 -1
- package/dist/chunks/{form-field-JpzG70WX.cjs.js → form-field-B9PncHWr.cjs.js} +2 -2
- package/dist/chunks/{form-field-JpzG70WX.cjs.js.map → form-field-B9PncHWr.cjs.js.map} +1 -1
- package/dist/chunks/{form-field-DePRnFqm.es.js → form-field-wK_anzOw.es.js} +2 -2
- package/dist/chunks/{form-field-DePRnFqm.es.js.map → form-field-wK_anzOw.es.js.map} +1 -1
- package/dist/chunks/{icon-button-CCrfnUUB.cjs.js → icon-button-BPQdpTPZ.cjs.js} +2 -2
- package/dist/chunks/{icon-button-CCrfnUUB.cjs.js.map → icon-button-BPQdpTPZ.cjs.js.map} +1 -1
- package/dist/chunks/{icon-button-O_dSWgZr.es.js → icon-button-a3WVC7IH.es.js} +2 -2
- package/dist/chunks/{icon-button-O_dSWgZr.es.js.map → icon-button-a3WVC7IH.es.js.map} +1 -1
- package/dist/chunks/{password-input-BtbZYHE8.es.js → password-input-BWFYKcBT.es.js} +2 -2
- package/dist/chunks/{password-input-BtbZYHE8.es.js.map → password-input-BWFYKcBT.es.js.map} +1 -1
- package/dist/chunks/{password-input-CGsQktks.cjs.js → password-input-D8R9Y9Ro.cjs.js} +2 -2
- package/dist/chunks/{password-input-CGsQktks.cjs.js.map → password-input-D8R9Y9Ro.cjs.js.map} +1 -1
- package/dist/chunks/{range-calendar-BNAIdxfK.es.js → range-calendar-B7-Z0ksl.es.js} +2 -2
- package/dist/chunks/{range-calendar-BNAIdxfK.es.js.map → range-calendar-B7-Z0ksl.es.js.map} +1 -1
- package/dist/chunks/{range-calendar-BW4gqU35.cjs.js → range-calendar-CswayeNh.cjs.js} +2 -2
- package/dist/chunks/{range-calendar-BW4gqU35.cjs.js.map → range-calendar-CswayeNh.cjs.js.map} +1 -1
- package/dist/chunks/{rich-text-input-D3xrDvLR.es.js → rich-text-input-Bty0WhBM.es.js} +2 -2
- package/dist/chunks/{rich-text-input-D3xrDvLR.es.js.map → rich-text-input-Bty0WhBM.es.js.map} +1 -1
- package/dist/chunks/{rich-text-input-iDEygf74.cjs.js → rich-text-input-Cvcywluc.cjs.js} +2 -2
- package/dist/chunks/{rich-text-input-iDEygf74.cjs.js.map → rich-text-input-Cvcywluc.cjs.js.map} +1 -1
- package/dist/chunks/{select-wby2GRxc.es.js → select-BwGMCDw8.es.js} +2 -2
- package/dist/chunks/{select-wby2GRxc.es.js.map → select-BwGMCDw8.es.js.map} +1 -1
- package/dist/chunks/{select-DihySN1w.cjs.js → select-DnmavfXh.cjs.js} +2 -2
- package/dist/chunks/{select-DihySN1w.cjs.js.map → select-DnmavfXh.cjs.js.map} +1 -1
- package/dist/chunks/{split-button-RydlGh27.cjs.js → split-button-BMpznhkI.cjs.js} +2 -2
- package/dist/chunks/{split-button-RydlGh27.cjs.js.map → split-button-BMpznhkI.cjs.js.map} +1 -1
- package/dist/chunks/{split-button-CcVa5yVH.es.js → split-button-a7my5Dc8.es.js} +3 -3
- package/dist/chunks/{split-button-CcVa5yVH.es.js.map → split-button-a7my5Dc8.es.js.map} +1 -1
- package/dist/chunks/{tag-group-Cwcr_VDp.cjs.js → tag-group-3YoW3lJr.cjs.js} +2 -2
- package/dist/chunks/{tag-group-Cwcr_VDp.cjs.js.map → tag-group-3YoW3lJr.cjs.js.map} +1 -1
- package/dist/chunks/{tag-group-DQ0jVbpR.es.js → tag-group-BBldLRQt.es.js} +2 -2
- package/dist/chunks/{tag-group-DQ0jVbpR.es.js.map → tag-group-BBldLRQt.es.js.map} +1 -1
- package/dist/components/alert.cjs +1 -1
- package/dist/components/alert.es.js +1 -1
- package/dist/components/button.cjs +1 -1
- package/dist/components/button.es.js +1 -1
- package/dist/components/calendar.cjs +1 -1
- package/dist/components/calendar.es.js +1 -1
- package/dist/components/combobox.cjs +1 -1
- package/dist/components/combobox.es.js +1 -1
- package/dist/components/components.cjs +1 -1
- package/dist/components/components.es.js +15 -15
- package/dist/components/data-table.cjs +1 -1
- package/dist/components/data-table.es.js +1 -1
- package/dist/components/date-picker.cjs +1 -1
- package/dist/components/date-picker.es.js +1 -1
- package/dist/components/date-range-picker.cjs +1 -1
- package/dist/components/date-range-picker.es.js +1 -1
- package/dist/components/form-field.cjs +1 -1
- package/dist/components/form-field.es.js +1 -1
- package/dist/components/icon-button.cjs +1 -1
- package/dist/components/icon-button.es.js +1 -1
- package/dist/components/password-input.cjs +1 -1
- package/dist/components/password-input.es.js +1 -1
- package/dist/components/range-calendar.cjs +1 -1
- package/dist/components/range-calendar.es.js +1 -1
- package/dist/components/rich-text-input.cjs +1 -1
- package/dist/components/rich-text-input.es.js +1 -1
- package/dist/components/select.cjs +1 -1
- package/dist/components/select.es.js +1 -1
- package/dist/components/split-button.cjs +1 -1
- package/dist/components/split-button.es.js +1 -1
- package/dist/components/tag-group.cjs +1 -1
- package/dist/components/tag-group.es.js +1 -1
- package/dist/components.d.ts +82 -37
- package/dist/data-table.d.ts +84 -37
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +85 -40
- package/dist/index.es.js +15 -15
- package/package.json +5 -5
- package/dist/chunks/button-B4HX0fM_.es.js +0 -57
- package/dist/chunks/button-qv44IWcR.cjs.js +0 -2
- package/dist/chunks/data-table-COrv-ddO.cjs.js +0 -2
- package/dist/chunks/data-table-COrv-ddO.cjs.js.map +0 -1
- package/dist/chunks/data-table-DbhVtDHQ.es.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field-JpzG70WX.cjs.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.recipe.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldInputSlotProps,\n FormFieldLabelSlotProps,\n} from \"../form-field.slots\";\n\nexport type FormFieldContextPayloadType = {\n label: ReactNode;\n labelSlotProps?: FormFieldLabelSlotProps;\n input: ReactNode;\n inputSlotProps?: FormFieldInputSlotProps;\n description: ReactNode;\n descriptionSlotProps?: FormFieldDescriptionSlotProps;\n error: ReactNode;\n errorSlotProps?: FormFieldErrorSlotProps;\n info: ReactNode;\n isInvalid?: boolean;\n isRequired?: boolean;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n context: FormFieldContextPayloadType;\n setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n context: {\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n },\n setContext: () => {},\n});\n","import { defineSlotRecipe } from \"@chakra-ui/react/styled-system\";\n\nconst columnLayout = `\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n`;\nconst rowLayout = `\n\"label input\"\n\"label description\"\n\"label error\"\n`;\n\n/**\n * Recipe configuration for the FormField component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const formFieldRecipe = defineSlotRecipe({\n slots: [\"root\", \"label\", \"input\", \"description\", \"error\", \"popover\"],\n // Unique class name prefix for the component\n className: \"nimbus-ui-form-field\",\n\n base: {\n root: {\n \"--grid-gap\": \"spacing.100\",\n\n display: \"grid\",\n width: \"auto\",\n },\n label: {\n gridArea: \"label\",\n fontWeight: \"500\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n input: {\n gridArea: \"input\",\n },\n description: {\n gridArea: \"description\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n error: {\n gridArea: \"error\",\n color: \"critical.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n popover: {\n \"--scrollbar-color\": \"colors.neutral.8\",\n \"--scrollbar-bg\": \"colors.neutral.3\",\n bg: \"neutral.1\",\n maxWidth: \"xl\",\n borderRadius: \"200\",\n boxShadow: \"6\",\n border: \"solid-25\",\n borderColor: \"neutral.8\",\n maxHeight: \"40svh\",\n overflow: \"auto\",\n scrollbarWidth: \"thin\",\n scrollbarColor: \"var(--scrollbar-color) var(--scrollbar-bg)\",\n focusRing: \"outside\",\n },\n },\n\n variants: {\n size: {\n md: {\n root: {\n \"--form-field-font-size\": \"fontSizes.350\",\n \"--form-field-line-height\": \"lineHeights.500\",\n },\n },\n sm: {\n root: {\n \"--form-field-font-size\": \"fontSizes.300\",\n \"--form-field-line-height\": \"lineHeights.450\",\n },\n },\n },\n direction: {\n column: {\n root: {\n gridTemplateAreas: columnLayout,\n },\n input: {\n mt: \"var(--grid-gap)\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n row: {\n root: {\n gridTemplateAreas: rowLayout,\n gridTemplateColumns: \"auto 1fr\",\n gridColumnGap: \"200\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n },\n },\n\n // Default variant values when not explicitly specified\n defaultVariants: {\n direction: \"column\",\n size: \"md\",\n },\n});\n","/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n type HTMLChakraProps,\n type RecipeVariantProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\n\nimport { formFieldRecipe } from \"./form-field.recipe\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: formFieldRecipe,\n});\n\n// Root slot\nexport interface FormFieldRootSlotProps\n extends HTMLChakraProps<\n \"div\",\n RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp\n > {}\n\nexport const FormFieldRootSlot = withProvider<\n HTMLDivElement,\n FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport interface FormFieldLabelSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldLabelSlot = withContext<\n HTMLDivElement,\n FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport interface FormFieldInputSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldInputSlot = withContext<\n HTMLDivElement,\n FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport interface FormFieldDescriptionSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldDescriptionSlot = withContext<\n HTMLDivElement,\n FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport interface FormFieldErrorSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldErrorSlot = withContext<\n HTMLDivElement,\n FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport interface FormFieldPopoverSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldPopoverSlot = withContext<\n HTMLDivElement,\n FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useEffect,\n useState,\n} from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField } from \"react-aria\";\nimport {\n FormFieldContext,\n type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n FormFieldDescriptionSlot,\n FormFieldErrorSlot,\n FormFieldInputSlot,\n FormFieldLabelSlot,\n FormFieldPopoverSlot,\n FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}\n */\nexport const FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n { isInvalid, isRequired, isDisabled, isReadOnly, children, ...props },\n ref\n ) => {\n const [context, setContext] = useState<FormFieldContextPayloadType>({\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n });\n\n const useFieldArgs: Parameters<typeof useField>[0] = {\n description: context.description,\n errorMessage: context.error,\n };\n\n if (context.label) {\n useFieldArgs.label = context.label;\n } else {\n // Context will always start out null, so we need to stub out some aria attributes\n // FIXME: This is a hack to get the form field to work, but it's not the best solution\n // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n useFieldArgs[\"aria-label\"] = \"empty-label\";\n useFieldArgs[\"aria-labelledby\"] = \"empty-label\";\n }\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField(useFieldArgs);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }));\n }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n const inputProps = {\n ...fieldProps,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n };\n\n return (\n <FormFieldContext.Provider value={{ context, setContext }}>\n <FormFieldRootSlot ref={ref} {...props}>\n {context.label && (\n <FormFieldLabelSlot {...context.labelSlotProps}>\n <label {...labelProps}>\n {context.label}\n {isRequired && <sup aria-hidden=\"true\">*</sup>}\n </label>\n {context.info && (\n <DialogTrigger>\n <Box\n as=\"span\"\n display=\"inline-block\"\n position=\"relative\"\n width=\"1ch\"\n height=\"1ch\"\n ml=\"200\"\n >\n <Box\n as=\"span\"\n display=\"inline-flex\"\n position=\"absolute\"\n top=\"50%\"\n right=\"50%\"\n transform=\"translate(50%, -50%)\"\n >\n <IconButton\n aria-label=\"__MORE INFO\"\n size=\"2xs\"\n tone=\"info\"\n variant=\"link\"\n >\n <HelpOutline />\n </IconButton>\n </Box>\n </Box>\n <Popover>\n <FormFieldPopoverSlot asChild>\n <Dialog>\n <Box p=\"300\">{context.info}</Box>\n </Dialog>\n </FormFieldPopoverSlot>\n </Popover>\n </DialogTrigger>\n )}\n </FormFieldLabelSlot>\n )}\n {context.input && (\n <FormFieldInputSlot {...context.inputSlotProps}>\n {Children.map(context.input, (child) => {\n // Important: Check if the child is a valid React element before cloning.\n if (isValidElement(child)) {\n return cloneElement(child, inputProps);\n }\n // If it's not a valid element (e.g., text node, null, undefined), return it as is.\n return child;\n })}\n </FormFieldInputSlot>\n )}\n {context.description && (\n <FormFieldDescriptionSlot\n {...descriptionProps}\n {...context.descriptionSlotProps}\n >\n {context.description}\n </FormFieldDescriptionSlot>\n )}\n {isInvalid && context.error && (\n <FormFieldErrorSlot\n {...errorMessageProps}\n {...context.errorSlotProps}\n >\n <Box\n as={ErrorOutline}\n display=\"inline-flex\"\n boxSize=\"400\"\n verticalAlign=\"text-bottom\"\n mr=\"100\"\n />\n {context.error}\n </FormFieldErrorSlot>\n )}\n {children}\n </FormFieldRootSlot>\n </FormFieldContext.Provider>\n );\n }\n);\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldLabel = ({\n children,\n ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n label: children,\n labelSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldInput = ({\n children,\n ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n input: children,\n inputSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldDescription = ({\n children,\n ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n description: children,\n descriptionSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldError = ({\n children,\n ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n error: children,\n errorSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n /**\n * The content to display in the InfoBox\n */\n children: ReactNode;\n};\n\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n info: children,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { FormFieldRoot } from \"./components/form-field.root\";\nimport { FormFieldLabel } from \"./components/form-field.label\";\nimport { FormFieldInput } from \"./components/form-field.input\";\nimport { FormFieldDescription } from \"./components/form-field.description\";\nimport { FormFieldError } from \"./components/form-field.error\";\nimport { FormFieldInfoBox } from \"./components/form-field.info-box\";\n\nexport const FormField = {\n Root: FormFieldRoot,\n Label: FormFieldLabel,\n Input: FormFieldInput,\n Description: FormFieldDescription,\n Error: FormFieldError,\n InfoBox: FormFieldInfoBox,\n};\n\nexport {\n FormFieldRoot as _FormFieldRoot,\n FormFieldLabel as _FormFieldLabel,\n FormFieldInput as _FormFieldInput,\n FormFieldDescription as _FormFieldDescription,\n FormFieldError as _FormFieldError,\n FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","columnLayout","rowLayout","formFieldRecipe","defineSlotRecipe","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardRef","isInvalid","isRequired","isDisabled","isReadOnly","children","props","ref","context","setContext","useState","useFieldArgs","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","Children","child","isValidElement","cloneElement","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"form-field-B9PncHWr.cjs.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.recipe.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldInputSlotProps,\n FormFieldLabelSlotProps,\n} from \"../form-field.slots\";\n\nexport type FormFieldContextPayloadType = {\n label: ReactNode;\n labelSlotProps?: FormFieldLabelSlotProps;\n input: ReactNode;\n inputSlotProps?: FormFieldInputSlotProps;\n description: ReactNode;\n descriptionSlotProps?: FormFieldDescriptionSlotProps;\n error: ReactNode;\n errorSlotProps?: FormFieldErrorSlotProps;\n info: ReactNode;\n isInvalid?: boolean;\n isRequired?: boolean;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n context: FormFieldContextPayloadType;\n setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n context: {\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n },\n setContext: () => {},\n});\n","import { defineSlotRecipe } from \"@chakra-ui/react/styled-system\";\n\nconst columnLayout = `\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n`;\nconst rowLayout = `\n\"label input\"\n\"label description\"\n\"label error\"\n`;\n\n/**\n * Recipe configuration for the FormField component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const formFieldRecipe = defineSlotRecipe({\n slots: [\"root\", \"label\", \"input\", \"description\", \"error\", \"popover\"],\n // Unique class name prefix for the component\n className: \"nimbus-ui-form-field\",\n\n base: {\n root: {\n \"--grid-gap\": \"spacing.100\",\n\n display: \"grid\",\n width: \"auto\",\n },\n label: {\n gridArea: \"label\",\n fontWeight: \"500\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n input: {\n gridArea: \"input\",\n },\n description: {\n gridArea: \"description\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n error: {\n gridArea: \"error\",\n color: \"critical.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n popover: {\n \"--scrollbar-color\": \"colors.neutral.8\",\n \"--scrollbar-bg\": \"colors.neutral.3\",\n bg: \"neutral.1\",\n maxWidth: \"xl\",\n borderRadius: \"200\",\n boxShadow: \"6\",\n border: \"solid-25\",\n borderColor: \"neutral.8\",\n maxHeight: \"40svh\",\n overflow: \"auto\",\n scrollbarWidth: \"thin\",\n scrollbarColor: \"var(--scrollbar-color) var(--scrollbar-bg)\",\n focusRing: \"outside\",\n },\n },\n\n variants: {\n size: {\n md: {\n root: {\n \"--form-field-font-size\": \"fontSizes.350\",\n \"--form-field-line-height\": \"lineHeights.500\",\n },\n },\n sm: {\n root: {\n \"--form-field-font-size\": \"fontSizes.300\",\n \"--form-field-line-height\": \"lineHeights.450\",\n },\n },\n },\n direction: {\n column: {\n root: {\n gridTemplateAreas: columnLayout,\n },\n input: {\n mt: \"var(--grid-gap)\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n row: {\n root: {\n gridTemplateAreas: rowLayout,\n gridTemplateColumns: \"auto 1fr\",\n gridColumnGap: \"200\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n },\n },\n\n // Default variant values when not explicitly specified\n defaultVariants: {\n direction: \"column\",\n size: \"md\",\n },\n});\n","/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n type HTMLChakraProps,\n type RecipeVariantProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\n\nimport { formFieldRecipe } from \"./form-field.recipe\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: formFieldRecipe,\n});\n\n// Root slot\nexport interface FormFieldRootSlotProps\n extends HTMLChakraProps<\n \"div\",\n RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp\n > {}\n\nexport const FormFieldRootSlot = withProvider<\n HTMLDivElement,\n FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport interface FormFieldLabelSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldLabelSlot = withContext<\n HTMLDivElement,\n FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport interface FormFieldInputSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldInputSlot = withContext<\n HTMLDivElement,\n FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport interface FormFieldDescriptionSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldDescriptionSlot = withContext<\n HTMLDivElement,\n FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport interface FormFieldErrorSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldErrorSlot = withContext<\n HTMLDivElement,\n FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport interface FormFieldPopoverSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldPopoverSlot = withContext<\n HTMLDivElement,\n FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useEffect,\n useState,\n} from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField } from \"react-aria\";\nimport {\n FormFieldContext,\n type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n FormFieldDescriptionSlot,\n FormFieldErrorSlot,\n FormFieldInputSlot,\n FormFieldLabelSlot,\n FormFieldPopoverSlot,\n FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}\n */\nexport const FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n { isInvalid, isRequired, isDisabled, isReadOnly, children, ...props },\n ref\n ) => {\n const [context, setContext] = useState<FormFieldContextPayloadType>({\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n });\n\n const useFieldArgs: Parameters<typeof useField>[0] = {\n description: context.description,\n errorMessage: context.error,\n };\n\n if (context.label) {\n useFieldArgs.label = context.label;\n } else {\n // Context will always start out null, so we need to stub out some aria attributes\n // FIXME: This is a hack to get the form field to work, but it's not the best solution\n // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n useFieldArgs[\"aria-label\"] = \"empty-label\";\n useFieldArgs[\"aria-labelledby\"] = \"empty-label\";\n }\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField(useFieldArgs);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }));\n }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n const inputProps = {\n ...fieldProps,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n };\n\n return (\n <FormFieldContext.Provider value={{ context, setContext }}>\n <FormFieldRootSlot ref={ref} {...props}>\n {context.label && (\n <FormFieldLabelSlot {...context.labelSlotProps}>\n <label {...labelProps}>\n {context.label}\n {isRequired && <sup aria-hidden=\"true\">*</sup>}\n </label>\n {context.info && (\n <DialogTrigger>\n <Box\n as=\"span\"\n display=\"inline-block\"\n position=\"relative\"\n width=\"1ch\"\n height=\"1ch\"\n ml=\"200\"\n >\n <Box\n as=\"span\"\n display=\"inline-flex\"\n position=\"absolute\"\n top=\"50%\"\n right=\"50%\"\n transform=\"translate(50%, -50%)\"\n >\n <IconButton\n aria-label=\"__MORE INFO\"\n size=\"2xs\"\n tone=\"info\"\n variant=\"link\"\n >\n <HelpOutline />\n </IconButton>\n </Box>\n </Box>\n <Popover>\n <FormFieldPopoverSlot asChild>\n <Dialog>\n <Box p=\"300\">{context.info}</Box>\n </Dialog>\n </FormFieldPopoverSlot>\n </Popover>\n </DialogTrigger>\n )}\n </FormFieldLabelSlot>\n )}\n {context.input && (\n <FormFieldInputSlot {...context.inputSlotProps}>\n {Children.map(context.input, (child) => {\n // Important: Check if the child is a valid React element before cloning.\n if (isValidElement(child)) {\n return cloneElement(child, inputProps);\n }\n // If it's not a valid element (e.g., text node, null, undefined), return it as is.\n return child;\n })}\n </FormFieldInputSlot>\n )}\n {context.description && (\n <FormFieldDescriptionSlot\n {...descriptionProps}\n {...context.descriptionSlotProps}\n >\n {context.description}\n </FormFieldDescriptionSlot>\n )}\n {isInvalid && context.error && (\n <FormFieldErrorSlot\n {...errorMessageProps}\n {...context.errorSlotProps}\n >\n <Box\n as={ErrorOutline}\n display=\"inline-flex\"\n boxSize=\"400\"\n verticalAlign=\"text-bottom\"\n mr=\"100\"\n />\n {context.error}\n </FormFieldErrorSlot>\n )}\n {children}\n </FormFieldRootSlot>\n </FormFieldContext.Provider>\n );\n }\n);\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldLabel = ({\n children,\n ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n label: children,\n labelSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldInput = ({\n children,\n ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n input: children,\n inputSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldDescription = ({\n children,\n ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n description: children,\n descriptionSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldError = ({\n children,\n ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n error: children,\n errorSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n /**\n * The content to display in the InfoBox\n */\n children: ReactNode;\n};\n\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n info: children,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { FormFieldRoot } from \"./components/form-field.root\";\nimport { FormFieldLabel } from \"./components/form-field.label\";\nimport { FormFieldInput } from \"./components/form-field.input\";\nimport { FormFieldDescription } from \"./components/form-field.description\";\nimport { FormFieldError } from \"./components/form-field.error\";\nimport { FormFieldInfoBox } from \"./components/form-field.info-box\";\n\nexport const FormField = {\n Root: FormFieldRoot,\n Label: FormFieldLabel,\n Input: FormFieldInput,\n Description: FormFieldDescription,\n Error: FormFieldError,\n InfoBox: FormFieldInfoBox,\n};\n\nexport {\n FormFieldRoot as _FormFieldRoot,\n FormFieldLabel as _FormFieldLabel,\n FormFieldInput as _FormFieldInput,\n FormFieldDescription as _FormFieldDescription,\n FormFieldError as _FormFieldError,\n FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","columnLayout","rowLayout","formFieldRecipe","defineSlotRecipe","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardRef","isInvalid","isRequired","isDisabled","isReadOnly","children","props","ref","context","setContext","useState","useFieldArgs","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","Children","child","isValidElement","cloneElement","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { a as H } from "./config-ufbQ08Vi.es.js";
|
|
|
4
4
|
import { c as y } from "./create-slot-recipe-context-DBNItnlK.es.js";
|
|
5
5
|
import { e as B, $ as L, a as I } from "./Dialog-C7IjW1jR.es.js";
|
|
6
6
|
import { B as m } from "./box-C8731OYq.es.js";
|
|
7
|
-
import { I as M } from "./icon-button-
|
|
7
|
+
import { I as M } from "./icon-button-a3WVC7IH.es.js";
|
|
8
8
|
import { HelpOutline as R, ErrorOutline as T } from "@commercetools/nimbus-icons";
|
|
9
9
|
import { $ as W } from "./useField-Ce9zQxmx.es.js";
|
|
10
10
|
const a = /* @__PURE__ */ z({
|
|
@@ -307,4 +307,4 @@ export {
|
|
|
307
307
|
Z as e,
|
|
308
308
|
q as f
|
|
309
309
|
};
|
|
310
|
-
//# sourceMappingURL=form-field-
|
|
310
|
+
//# sourceMappingURL=form-field-wK_anzOw.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field-DePRnFqm.es.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.recipe.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldInputSlotProps,\n FormFieldLabelSlotProps,\n} from \"../form-field.slots\";\n\nexport type FormFieldContextPayloadType = {\n label: ReactNode;\n labelSlotProps?: FormFieldLabelSlotProps;\n input: ReactNode;\n inputSlotProps?: FormFieldInputSlotProps;\n description: ReactNode;\n descriptionSlotProps?: FormFieldDescriptionSlotProps;\n error: ReactNode;\n errorSlotProps?: FormFieldErrorSlotProps;\n info: ReactNode;\n isInvalid?: boolean;\n isRequired?: boolean;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n context: FormFieldContextPayloadType;\n setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n context: {\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n },\n setContext: () => {},\n});\n","import { defineSlotRecipe } from \"@chakra-ui/react/styled-system\";\n\nconst columnLayout = `\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n`;\nconst rowLayout = `\n\"label input\"\n\"label description\"\n\"label error\"\n`;\n\n/**\n * Recipe configuration for the FormField component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const formFieldRecipe = defineSlotRecipe({\n slots: [\"root\", \"label\", \"input\", \"description\", \"error\", \"popover\"],\n // Unique class name prefix for the component\n className: \"nimbus-ui-form-field\",\n\n base: {\n root: {\n \"--grid-gap\": \"spacing.100\",\n\n display: \"grid\",\n width: \"auto\",\n },\n label: {\n gridArea: \"label\",\n fontWeight: \"500\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n input: {\n gridArea: \"input\",\n },\n description: {\n gridArea: \"description\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n error: {\n gridArea: \"error\",\n color: \"critical.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n popover: {\n \"--scrollbar-color\": \"colors.neutral.8\",\n \"--scrollbar-bg\": \"colors.neutral.3\",\n bg: \"neutral.1\",\n maxWidth: \"xl\",\n borderRadius: \"200\",\n boxShadow: \"6\",\n border: \"solid-25\",\n borderColor: \"neutral.8\",\n maxHeight: \"40svh\",\n overflow: \"auto\",\n scrollbarWidth: \"thin\",\n scrollbarColor: \"var(--scrollbar-color) var(--scrollbar-bg)\",\n focusRing: \"outside\",\n },\n },\n\n variants: {\n size: {\n md: {\n root: {\n \"--form-field-font-size\": \"fontSizes.350\",\n \"--form-field-line-height\": \"lineHeights.500\",\n },\n },\n sm: {\n root: {\n \"--form-field-font-size\": \"fontSizes.300\",\n \"--form-field-line-height\": \"lineHeights.450\",\n },\n },\n },\n direction: {\n column: {\n root: {\n gridTemplateAreas: columnLayout,\n },\n input: {\n mt: \"var(--grid-gap)\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n row: {\n root: {\n gridTemplateAreas: rowLayout,\n gridTemplateColumns: \"auto 1fr\",\n gridColumnGap: \"200\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n },\n },\n\n // Default variant values when not explicitly specified\n defaultVariants: {\n direction: \"column\",\n size: \"md\",\n },\n});\n","/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n type HTMLChakraProps,\n type RecipeVariantProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\n\nimport { formFieldRecipe } from \"./form-field.recipe\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: formFieldRecipe,\n});\n\n// Root slot\nexport interface FormFieldRootSlotProps\n extends HTMLChakraProps<\n \"div\",\n RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp\n > {}\n\nexport const FormFieldRootSlot = withProvider<\n HTMLDivElement,\n FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport interface FormFieldLabelSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldLabelSlot = withContext<\n HTMLDivElement,\n FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport interface FormFieldInputSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldInputSlot = withContext<\n HTMLDivElement,\n FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport interface FormFieldDescriptionSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldDescriptionSlot = withContext<\n HTMLDivElement,\n FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport interface FormFieldErrorSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldErrorSlot = withContext<\n HTMLDivElement,\n FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport interface FormFieldPopoverSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldPopoverSlot = withContext<\n HTMLDivElement,\n FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useEffect,\n useState,\n} from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField } from \"react-aria\";\nimport {\n FormFieldContext,\n type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n FormFieldDescriptionSlot,\n FormFieldErrorSlot,\n FormFieldInputSlot,\n FormFieldLabelSlot,\n FormFieldPopoverSlot,\n FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}\n */\nexport const FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n { isInvalid, isRequired, isDisabled, isReadOnly, children, ...props },\n ref\n ) => {\n const [context, setContext] = useState<FormFieldContextPayloadType>({\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n });\n\n const useFieldArgs: Parameters<typeof useField>[0] = {\n description: context.description,\n errorMessage: context.error,\n };\n\n if (context.label) {\n useFieldArgs.label = context.label;\n } else {\n // Context will always start out null, so we need to stub out some aria attributes\n // FIXME: This is a hack to get the form field to work, but it's not the best solution\n // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n useFieldArgs[\"aria-label\"] = \"empty-label\";\n useFieldArgs[\"aria-labelledby\"] = \"empty-label\";\n }\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField(useFieldArgs);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }));\n }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n const inputProps = {\n ...fieldProps,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n };\n\n return (\n <FormFieldContext.Provider value={{ context, setContext }}>\n <FormFieldRootSlot ref={ref} {...props}>\n {context.label && (\n <FormFieldLabelSlot {...context.labelSlotProps}>\n <label {...labelProps}>\n {context.label}\n {isRequired && <sup aria-hidden=\"true\">*</sup>}\n </label>\n {context.info && (\n <DialogTrigger>\n <Box\n as=\"span\"\n display=\"inline-block\"\n position=\"relative\"\n width=\"1ch\"\n height=\"1ch\"\n ml=\"200\"\n >\n <Box\n as=\"span\"\n display=\"inline-flex\"\n position=\"absolute\"\n top=\"50%\"\n right=\"50%\"\n transform=\"translate(50%, -50%)\"\n >\n <IconButton\n aria-label=\"__MORE INFO\"\n size=\"2xs\"\n tone=\"info\"\n variant=\"link\"\n >\n <HelpOutline />\n </IconButton>\n </Box>\n </Box>\n <Popover>\n <FormFieldPopoverSlot asChild>\n <Dialog>\n <Box p=\"300\">{context.info}</Box>\n </Dialog>\n </FormFieldPopoverSlot>\n </Popover>\n </DialogTrigger>\n )}\n </FormFieldLabelSlot>\n )}\n {context.input && (\n <FormFieldInputSlot {...context.inputSlotProps}>\n {Children.map(context.input, (child) => {\n // Important: Check if the child is a valid React element before cloning.\n if (isValidElement(child)) {\n return cloneElement(child, inputProps);\n }\n // If it's not a valid element (e.g., text node, null, undefined), return it as is.\n return child;\n })}\n </FormFieldInputSlot>\n )}\n {context.description && (\n <FormFieldDescriptionSlot\n {...descriptionProps}\n {...context.descriptionSlotProps}\n >\n {context.description}\n </FormFieldDescriptionSlot>\n )}\n {isInvalid && context.error && (\n <FormFieldErrorSlot\n {...errorMessageProps}\n {...context.errorSlotProps}\n >\n <Box\n as={ErrorOutline}\n display=\"inline-flex\"\n boxSize=\"400\"\n verticalAlign=\"text-bottom\"\n mr=\"100\"\n />\n {context.error}\n </FormFieldErrorSlot>\n )}\n {children}\n </FormFieldRootSlot>\n </FormFieldContext.Provider>\n );\n }\n);\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldLabel = ({\n children,\n ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n label: children,\n labelSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldInput = ({\n children,\n ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n input: children,\n inputSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldDescription = ({\n children,\n ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n description: children,\n descriptionSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldError = ({\n children,\n ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n error: children,\n errorSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n /**\n * The content to display in the InfoBox\n */\n children: ReactNode;\n};\n\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n info: children,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { FormFieldRoot } from \"./components/form-field.root\";\nimport { FormFieldLabel } from \"./components/form-field.label\";\nimport { FormFieldInput } from \"./components/form-field.input\";\nimport { FormFieldDescription } from \"./components/form-field.description\";\nimport { FormFieldError } from \"./components/form-field.error\";\nimport { FormFieldInfoBox } from \"./components/form-field.info-box\";\n\nexport const FormField = {\n Root: FormFieldRoot,\n Label: FormFieldLabel,\n Input: FormFieldInput,\n Description: FormFieldDescription,\n Error: FormFieldError,\n InfoBox: FormFieldInfoBox,\n};\n\nexport {\n FormFieldRoot as _FormFieldRoot,\n FormFieldLabel as _FormFieldLabel,\n FormFieldInput as _FormFieldInput,\n FormFieldDescription as _FormFieldDescription,\n FormFieldError as _FormFieldError,\n FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","columnLayout","rowLayout","formFieldRecipe","defineSlotRecipe","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardRef","isInvalid","isRequired","isDisabled","isReadOnly","children","props","ref","context","setContext","useState","useFieldArgs","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","Children","child","isValidElement","cloneElement","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"form-field-wK_anzOw.es.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.recipe.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldInputSlotProps,\n FormFieldLabelSlotProps,\n} from \"../form-field.slots\";\n\nexport type FormFieldContextPayloadType = {\n label: ReactNode;\n labelSlotProps?: FormFieldLabelSlotProps;\n input: ReactNode;\n inputSlotProps?: FormFieldInputSlotProps;\n description: ReactNode;\n descriptionSlotProps?: FormFieldDescriptionSlotProps;\n error: ReactNode;\n errorSlotProps?: FormFieldErrorSlotProps;\n info: ReactNode;\n isInvalid?: boolean;\n isRequired?: boolean;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n context: FormFieldContextPayloadType;\n setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n context: {\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n },\n setContext: () => {},\n});\n","import { defineSlotRecipe } from \"@chakra-ui/react/styled-system\";\n\nconst columnLayout = `\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n`;\nconst rowLayout = `\n\"label input\"\n\"label description\"\n\"label error\"\n`;\n\n/**\n * Recipe configuration for the FormField component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const formFieldRecipe = defineSlotRecipe({\n slots: [\"root\", \"label\", \"input\", \"description\", \"error\", \"popover\"],\n // Unique class name prefix for the component\n className: \"nimbus-ui-form-field\",\n\n base: {\n root: {\n \"--grid-gap\": \"spacing.100\",\n\n display: \"grid\",\n width: \"auto\",\n },\n label: {\n gridArea: \"label\",\n fontWeight: \"500\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n input: {\n gridArea: \"input\",\n },\n description: {\n gridArea: \"description\",\n color: \"neutral.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n error: {\n gridArea: \"error\",\n color: \"critical.11\",\n fontSize: \"var(--form-field-font-size)\",\n lineHeight: \"var(--form-field-line-height)\",\n },\n popover: {\n \"--scrollbar-color\": \"colors.neutral.8\",\n \"--scrollbar-bg\": \"colors.neutral.3\",\n bg: \"neutral.1\",\n maxWidth: \"xl\",\n borderRadius: \"200\",\n boxShadow: \"6\",\n border: \"solid-25\",\n borderColor: \"neutral.8\",\n maxHeight: \"40svh\",\n overflow: \"auto\",\n scrollbarWidth: \"thin\",\n scrollbarColor: \"var(--scrollbar-color) var(--scrollbar-bg)\",\n focusRing: \"outside\",\n },\n },\n\n variants: {\n size: {\n md: {\n root: {\n \"--form-field-font-size\": \"fontSizes.350\",\n \"--form-field-line-height\": \"lineHeights.500\",\n },\n },\n sm: {\n root: {\n \"--form-field-font-size\": \"fontSizes.300\",\n \"--form-field-line-height\": \"lineHeights.450\",\n },\n },\n },\n direction: {\n column: {\n root: {\n gridTemplateAreas: columnLayout,\n },\n input: {\n mt: \"var(--grid-gap)\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n row: {\n root: {\n gridTemplateAreas: rowLayout,\n gridTemplateColumns: \"auto 1fr\",\n gridColumnGap: \"200\",\n },\n description: {\n mt: \"var(--grid-gap)\",\n },\n error: {\n mt: \"var(--grid-gap)\",\n },\n },\n },\n },\n\n // Default variant values when not explicitly specified\n defaultVariants: {\n direction: \"column\",\n size: \"md\",\n },\n});\n","/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n type HTMLChakraProps,\n type RecipeVariantProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\n\nimport { formFieldRecipe } from \"./form-field.recipe\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: formFieldRecipe,\n});\n\n// Root slot\nexport interface FormFieldRootSlotProps\n extends HTMLChakraProps<\n \"div\",\n RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp\n > {}\n\nexport const FormFieldRootSlot = withProvider<\n HTMLDivElement,\n FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport interface FormFieldLabelSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldLabelSlot = withContext<\n HTMLDivElement,\n FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport interface FormFieldInputSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldInputSlot = withContext<\n HTMLDivElement,\n FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport interface FormFieldDescriptionSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldDescriptionSlot = withContext<\n HTMLDivElement,\n FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport interface FormFieldErrorSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldErrorSlot = withContext<\n HTMLDivElement,\n FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport interface FormFieldPopoverSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldPopoverSlot = withContext<\n HTMLDivElement,\n FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useEffect,\n useState,\n} from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField } from \"react-aria\";\nimport {\n FormFieldContext,\n type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n FormFieldDescriptionSlot,\n FormFieldErrorSlot,\n FormFieldInputSlot,\n FormFieldLabelSlot,\n FormFieldPopoverSlot,\n FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}\n */\nexport const FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n { isInvalid, isRequired, isDisabled, isReadOnly, children, ...props },\n ref\n ) => {\n const [context, setContext] = useState<FormFieldContextPayloadType>({\n label: null,\n description: null,\n error: null,\n info: null,\n input: null,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n });\n\n const useFieldArgs: Parameters<typeof useField>[0] = {\n description: context.description,\n errorMessage: context.error,\n };\n\n if (context.label) {\n useFieldArgs.label = context.label;\n } else {\n // Context will always start out null, so we need to stub out some aria attributes\n // FIXME: This is a hack to get the form field to work, but it's not the best solution\n // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n useFieldArgs[\"aria-label\"] = \"empty-label\";\n useFieldArgs[\"aria-labelledby\"] = \"empty-label\";\n }\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField(useFieldArgs);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }));\n }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n const inputProps = {\n ...fieldProps,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n };\n\n return (\n <FormFieldContext.Provider value={{ context, setContext }}>\n <FormFieldRootSlot ref={ref} {...props}>\n {context.label && (\n <FormFieldLabelSlot {...context.labelSlotProps}>\n <label {...labelProps}>\n {context.label}\n {isRequired && <sup aria-hidden=\"true\">*</sup>}\n </label>\n {context.info && (\n <DialogTrigger>\n <Box\n as=\"span\"\n display=\"inline-block\"\n position=\"relative\"\n width=\"1ch\"\n height=\"1ch\"\n ml=\"200\"\n >\n <Box\n as=\"span\"\n display=\"inline-flex\"\n position=\"absolute\"\n top=\"50%\"\n right=\"50%\"\n transform=\"translate(50%, -50%)\"\n >\n <IconButton\n aria-label=\"__MORE INFO\"\n size=\"2xs\"\n tone=\"info\"\n variant=\"link\"\n >\n <HelpOutline />\n </IconButton>\n </Box>\n </Box>\n <Popover>\n <FormFieldPopoverSlot asChild>\n <Dialog>\n <Box p=\"300\">{context.info}</Box>\n </Dialog>\n </FormFieldPopoverSlot>\n </Popover>\n </DialogTrigger>\n )}\n </FormFieldLabelSlot>\n )}\n {context.input && (\n <FormFieldInputSlot {...context.inputSlotProps}>\n {Children.map(context.input, (child) => {\n // Important: Check if the child is a valid React element before cloning.\n if (isValidElement(child)) {\n return cloneElement(child, inputProps);\n }\n // If it's not a valid element (e.g., text node, null, undefined), return it as is.\n return child;\n })}\n </FormFieldInputSlot>\n )}\n {context.description && (\n <FormFieldDescriptionSlot\n {...descriptionProps}\n {...context.descriptionSlotProps}\n >\n {context.description}\n </FormFieldDescriptionSlot>\n )}\n {isInvalid && context.error && (\n <FormFieldErrorSlot\n {...errorMessageProps}\n {...context.errorSlotProps}\n >\n <Box\n as={ErrorOutline}\n display=\"inline-flex\"\n boxSize=\"400\"\n verticalAlign=\"text-bottom\"\n mr=\"100\"\n />\n {context.error}\n </FormFieldErrorSlot>\n )}\n {children}\n </FormFieldRootSlot>\n </FormFieldContext.Provider>\n );\n }\n);\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldLabel = ({\n children,\n ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n label: children,\n labelSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldInput = ({\n children,\n ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n input: children,\n inputSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldDescription = ({\n children,\n ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n description: children,\n descriptionSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldError = ({\n children,\n ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n error: children,\n errorSlotProps,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n /**\n * The content to display in the InfoBox\n */\n children: ReactNode;\n};\n\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n info: children,\n }));\n }, [children, setContext]);\n\n return null;\n};\n","import { FormFieldRoot } from \"./components/form-field.root\";\nimport { FormFieldLabel } from \"./components/form-field.label\";\nimport { FormFieldInput } from \"./components/form-field.input\";\nimport { FormFieldDescription } from \"./components/form-field.description\";\nimport { FormFieldError } from \"./components/form-field.error\";\nimport { FormFieldInfoBox } from \"./components/form-field.info-box\";\n\nexport const FormField = {\n Root: FormFieldRoot,\n Label: FormFieldLabel,\n Input: FormFieldInput,\n Description: FormFieldDescription,\n Error: FormFieldError,\n InfoBox: FormFieldInfoBox,\n};\n\nexport {\n FormFieldRoot as _FormFieldRoot,\n FormFieldLabel as _FormFieldLabel,\n FormFieldInput as _FormFieldInput,\n FormFieldDescription as _FormFieldDescription,\n FormFieldError as _FormFieldError,\n FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","columnLayout","rowLayout","formFieldRecipe","defineSlotRecipe","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardRef","isInvalid","isRequired","isDisabled","isReadOnly","children","props","ref","context","setContext","useState","useFieldArgs","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","Children","child","isValidElement","cloneElement","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const u=require("react/jsx-runtime"),f=require("react"),i=require("@chakra-ui/react"),a=require("./button-
|
|
2
|
-
//# sourceMappingURL=icon-button-
|
|
1
|
+
"use strict";const u=require("react/jsx-runtime"),f=require("react"),i=require("@chakra-ui/react"),a=require("./button-BCrCWnMd.cjs.js"),R=require("./useObjectRef-dXOJdONs.cjs.js"),e=t=>{const{children:r,ref:n,...o}=t,s=f.useRef(null),c=R.$df56164dff5785e2$export$4338b53315abf666(i.mergeRefs(s,n));return u.jsx(a.Button,{px:0,py:0,...o,ref:c,children:r})};e.displayName="IconButton";exports.IconButton=e;
|
|
2
|
+
//# sourceMappingURL=icon-button-BPQdpTPZ.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button-
|
|
1
|
+
{"version":3,"file":"icon-button-BPQdpTPZ.cjs.js","sources":["../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport type { IconButtonProps } from \"./icon-button.types\";\nimport { Button } from \"@/components\";\n\n/**\n * # IconButton\n *\n * displays a button with an icon only as child\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/iconbutton}\n */\nexport const IconButton = (props: IconButtonProps) => {\n const { children, ref: forwardedRef, ...restProps } = props;\n\n // Create a local ref and merge with forwarded ref\n const localRef = useRef<HTMLButtonElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n return (\n <Button px={0} py={0} {...restProps} ref={ref}>\n {children}\n </Button>\n );\n};\n\nIconButton.displayName = \"IconButton\";\n"],"names":["IconButton","props","children","forwardedRef","restProps","localRef","useRef","ref","useObjectRef","mergeRefs","jsx","Button"],"mappings":"qLAaaA,EAAcC,GAA2B,CACpD,KAAM,CAAE,SAAAC,EAAU,IAAKC,EAAc,GAAGC,GAAcH,EAGhDI,EAAWC,EAAAA,OAA0B,IAAI,EACzCC,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUJ,EAAUF,CAAY,CAAC,EAE1D,OACEO,MAACC,EAAAA,QAAO,GAAI,EAAG,GAAI,EAAI,GAAGP,EAAW,IAAAG,EAClC,SAAAL,CAAA,CACH,CAEJ,EAEAF,EAAW,YAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as n } from "react";
|
|
3
3
|
import { mergeRefs as p } from "@chakra-ui/react";
|
|
4
|
-
import { B as a } from "./button-
|
|
4
|
+
import { B as a } from "./button-B9biGn83.es.js";
|
|
5
5
|
import { $ as c } from "./useObjectRef-CaJ5pgjX.es.js";
|
|
6
6
|
const i = (o) => {
|
|
7
7
|
const { children: r, ref: t, ...e } = o, f = n(null), s = c(p(f, t));
|
|
@@ -11,4 +11,4 @@ i.displayName = "IconButton";
|
|
|
11
11
|
export {
|
|
12
12
|
i as I
|
|
13
13
|
};
|
|
14
|
-
//# sourceMappingURL=icon-button-
|
|
14
|
+
//# sourceMappingURL=icon-button-a3WVC7IH.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button-
|
|
1
|
+
{"version":3,"file":"icon-button-a3WVC7IH.es.js","sources":["../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport type { IconButtonProps } from \"./icon-button.types\";\nimport { Button } from \"@/components\";\n\n/**\n * # IconButton\n *\n * displays a button with an icon only as child\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/iconbutton}\n */\nexport const IconButton = (props: IconButtonProps) => {\n const { children, ref: forwardedRef, ...restProps } = props;\n\n // Create a local ref and merge with forwarded ref\n const localRef = useRef<HTMLButtonElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n return (\n <Button px={0} py={0} {...restProps} ref={ref}>\n {children}\n </Button>\n );\n};\n\nIconButton.displayName = \"IconButton\";\n"],"names":["IconButton","props","children","forwardedRef","restProps","localRef","useRef","ref","useObjectRef","mergeRefs","jsx","Button"],"mappings":";;;;;AAaO,MAAMA,IAAa,CAACC,MAA2B;AACpD,QAAM,EAAE,UAAAC,GAAU,KAAKC,GAAc,GAAGC,MAAcH,GAGhDI,IAAWC,EAA0B,IAAI,GACzCC,IAAMC,EAAaC,EAAUJ,GAAUF,CAAY,CAAC;AAE1D,SACE,gBAAAO,EAACC,KAAO,IAAI,GAAG,IAAI,GAAI,GAAGP,GAAW,KAAAG,GAClC,UAAAL,EAAA,CACH;AAEJ;AAEAF,EAAW,cAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as r, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as f, useState as w } from "react";
|
|
3
3
|
import { B as e } from "./box-C8731OYq.es.js";
|
|
4
|
-
import { I as h } from "./icon-button-
|
|
4
|
+
import { I as h } from "./icon-button-a3WVC7IH.es.js";
|
|
5
5
|
import { b as n } from "./tooltip-BOK0Uejw.es.js";
|
|
6
6
|
import { T as u } from "./text-input-DlNFZk9-.es.js";
|
|
7
7
|
import { VisibilityOff as P, Visibility as S } from "@commercetools/nimbus-icons";
|
|
@@ -47,4 +47,4 @@ b.displayName = "PasswordInput";
|
|
|
47
47
|
export {
|
|
48
48
|
b as P
|
|
49
49
|
};
|
|
50
|
-
//# sourceMappingURL=password-input-
|
|
50
|
+
//# sourceMappingURL=password-input-BWFYKcBT.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input-
|
|
1
|
+
{"version":3,"file":"password-input-BWFYKcBT.es.js","sources":["../../src/components/password-input/password-input.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { Box, IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\n\n/**\n * # PasswordInput\n *\n * A password input is a text field that hides entered characters for secure password entry.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/passwordinput}\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n (props, forwardedRef) => {\n const { size = \"md\", isDisabled } = props;\n const [showPassword, setShowPassword] = useState(false);\n const toggleVisibility = () => setShowPassword(!showPassword);\n\n /** size icon based on input size */\n const iconSize = size === \"md\" ? \"xs\" : \"2xs\";\n /**\n * position the icon button at the right edge of the input based on\n * the size of the input\n */\n const iconPositionProps =\n size === \"md\"\n ? {\n top: \"100\",\n right: \"400\",\n }\n : {\n top: \"50\",\n right: \"400\",\n };\n\n /** safe space between the text within the input and the icon button */\n const iconButtonSafeSpace = size === \"md\" ? \"1400\" : \"1100\";\n\n return (\n <Box display=\"inline-block\" position=\"relative\">\n <TextInput\n width=\"full\"\n ref={forwardedRef}\n type={showPassword ? \"text\" : \"password\"}\n {...props}\n pr={iconButtonSafeSpace}\n />\n <Box position=\"absolute\" {...iconPositionProps}>\n <Tooltip.Root>\n <IconButton\n size={iconSize}\n variant=\"ghost\"\n tone=\"primary\"\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n onPress={toggleVisibility}\n isDisabled={isDisabled}\n >\n {showPassword ? <VisibilityOff /> : <Visibility />}\n </IconButton>\n <Tooltip.Content>\n {showPassword ? \"Hide password\" : \"Show Password\"}\n </Tooltip.Content>\n </Tooltip.Root>\n </Box>\n </Box>\n );\n }\n);\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["PasswordInput","forwardRef","props","forwardedRef","size","isDisabled","showPassword","setShowPassword","useState","toggleVisibility","iconSize","iconPositionProps","jsxs","Box","jsx","TextInput","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":";;;;;;;AAaO,MAAMA,IAAgB,gBAAAC;AAAA,EAC3B,CAACC,GAAOC,MAAiB;AACvB,UAAM,EAAE,MAAAC,IAAO,MAAM,YAAAC,EAAA,IAAeH,GAC9B,CAACI,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAmB,MAAMF,EAAgB,CAACD,CAAY,GAGtDI,IAAWN,MAAS,OAAO,OAAO,OAKlCO,IACJP,MAAS,OACL;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,IAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,IAAA;AAMf,WACE,gBAAAQ,EAACC,GAAA,EAAI,SAAQ,gBAAe,UAAS,YACnC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,KAAKZ;AAAA,UACL,MAAMG,IAAe,SAAS;AAAA,UAC7B,GAAGJ;AAAA,UACJ,IATsBE,MAAS,OAAO,SAAS;AAAA,QAS3C;AAAA,MAAA;AAAA,MAEN,gBAAAU,EAACD,KAAI,UAAS,YAAY,GAAGF,GAC3B,UAAA,gBAAAC,EAACI,EAAQ,MAAR,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAMP;AAAA,YACN,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAYJ,IAAe,kBAAkB;AAAA,YAC7C,SAASG;AAAA,YACT,YAAAJ;AAAA,YAEC,UAAAC,IAAe,gBAAAQ,EAACI,GAAA,CAAA,CAAc,sBAAMC,GAAA,CAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEjDH,EAAQ,SAAR,EACE,UAAAV,IAAe,kBAAkB,gBAAA,CACpC;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAN,EAAc,cAAc;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const s=require("react/jsx-runtime"),e=require("react"),n=require("./box-BPfqlznQ.cjs.js"),b=require("./icon-button-
|
|
2
|
-
//# sourceMappingURL=password-input-
|
|
1
|
+
"use strict";const s=require("react/jsx-runtime"),e=require("react"),n=require("./box-BPfqlznQ.cjs.js"),b=require("./icon-button-BPQdpTPZ.cjs.js"),r=require("./tooltip-DjUjwciC.cjs.js"),j=require("./text-input-i2bZeQZZ.cjs.js"),c=require("@commercetools/nimbus-icons"),a=e.forwardRef((i,d)=>{const{size:t="md",isDisabled:l}=i,[o,u]=e.useState(!1),p=()=>u(!o),x=t==="md"?"xs":"2xs",w=t==="md"?{top:"100",right:"400"}:{top:"50",right:"400"},h=t==="md"?"1400":"1100";return s.jsxs(n.Box,{display:"inline-block",position:"relative",children:[s.jsx(j.TextInput,{width:"full",ref:d,type:o?"text":"password",...i,pr:h}),s.jsx(n.Box,{position:"absolute",...w,children:s.jsxs(r.Tooltip.Root,{children:[s.jsx(b.IconButton,{size:x,variant:"ghost",tone:"primary","aria-label":o?"Hide password":"Show password",onPress:p,isDisabled:l,children:o?s.jsx(c.VisibilityOff,{}):s.jsx(c.Visibility,{})}),s.jsx(r.Tooltip.Content,{children:o?"Hide password":"Show Password"})]})})]})});a.displayName="PasswordInput";exports.PasswordInput=a;
|
|
2
|
+
//# sourceMappingURL=password-input-D8R9Y9Ro.cjs.js.map
|
package/dist/chunks/{password-input-CGsQktks.cjs.js.map → password-input-D8R9Y9Ro.cjs.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input-
|
|
1
|
+
{"version":3,"file":"password-input-D8R9Y9Ro.cjs.js","sources":["../../src/components/password-input/password-input.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { Box, IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\n\n/**\n * # PasswordInput\n *\n * A password input is a text field that hides entered characters for secure password entry.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/passwordinput}\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n (props, forwardedRef) => {\n const { size = \"md\", isDisabled } = props;\n const [showPassword, setShowPassword] = useState(false);\n const toggleVisibility = () => setShowPassword(!showPassword);\n\n /** size icon based on input size */\n const iconSize = size === \"md\" ? \"xs\" : \"2xs\";\n /**\n * position the icon button at the right edge of the input based on\n * the size of the input\n */\n const iconPositionProps =\n size === \"md\"\n ? {\n top: \"100\",\n right: \"400\",\n }\n : {\n top: \"50\",\n right: \"400\",\n };\n\n /** safe space between the text within the input and the icon button */\n const iconButtonSafeSpace = size === \"md\" ? \"1400\" : \"1100\";\n\n return (\n <Box display=\"inline-block\" position=\"relative\">\n <TextInput\n width=\"full\"\n ref={forwardedRef}\n type={showPassword ? \"text\" : \"password\"}\n {...props}\n pr={iconButtonSafeSpace}\n />\n <Box position=\"absolute\" {...iconPositionProps}>\n <Tooltip.Root>\n <IconButton\n size={iconSize}\n variant=\"ghost\"\n tone=\"primary\"\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n onPress={toggleVisibility}\n isDisabled={isDisabled}\n >\n {showPassword ? <VisibilityOff /> : <Visibility />}\n </IconButton>\n <Tooltip.Content>\n {showPassword ? \"Hide password\" : \"Show Password\"}\n </Tooltip.Content>\n </Tooltip.Root>\n </Box>\n </Box>\n );\n }\n);\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["PasswordInput","forwardRef","props","forwardedRef","size","isDisabled","showPassword","setShowPassword","useState","toggleVisibility","iconSize","iconPositionProps","iconButtonSafeSpace","jsxs","Box","jsx","TextInput","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":"6QAaaA,EAAgBC,EAAAA,WAC3B,CAACC,EAAOC,IAAiB,CACvB,KAAM,CAAE,KAAAC,EAAO,KAAM,WAAAC,CAAA,EAAeH,EAC9B,CAACI,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChDC,EAAmB,IAAMF,EAAgB,CAACD,CAAY,EAGtDI,EAAWN,IAAS,KAAO,KAAO,MAKlCO,EACJP,IAAS,KACL,CACE,IAAK,MACL,MAAO,KAAA,EAET,CACE,IAAK,KACL,MAAO,KAAA,EAITQ,EAAsBR,IAAS,KAAO,OAAS,OAErD,OACES,EAAAA,KAACC,EAAAA,IAAA,CAAI,QAAQ,eAAe,SAAS,WACnC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,UAAA,CACC,MAAM,OACN,IAAKb,EACL,KAAMG,EAAe,OAAS,WAC7B,GAAGJ,EACJ,GAAIU,CAAA,CAAA,EAENG,EAAAA,IAACD,EAAAA,KAAI,SAAS,WAAY,GAAGH,EAC3B,SAAAE,OAACI,EAAAA,QAAQ,KAAR,CACC,SAAA,CAAAF,EAAAA,IAACG,EAAAA,WAAA,CACC,KAAMR,EACN,QAAQ,QACR,KAAK,UACL,aAAYJ,EAAe,gBAAkB,gBAC7C,QAASG,EACT,WAAAJ,EAEC,SAAAC,EAAeS,MAACI,EAAAA,cAAA,CAAA,CAAc,QAAMC,EAAAA,WAAA,CAAA,CAAW,CAAA,CAAA,QAEjDH,EAAAA,QAAQ,QAAR,CACE,SAAAX,EAAe,gBAAkB,eAAA,CACpC,CAAA,CAAA,CACF,CAAA,CACF,CAAA,EACF,CAEJ,CACF,EAEAN,EAAc,YAAc"}
|
|
@@ -6,7 +6,7 @@ import { $ as M, a as i } from "./useDateFormatter-D9HBAX1w.es.js";
|
|
|
6
6
|
import { c as w, d as N } from "./utils-BkdW_cdL.es.js";
|
|
7
7
|
import { B as D } from "./box-C8731OYq.es.js";
|
|
8
8
|
import { $ as P } from "./context-Pt-0ojuK.es.js";
|
|
9
|
-
import { I as h } from "./icon-button-
|
|
9
|
+
import { I as h } from "./icon-button-a3WVC7IH.es.js";
|
|
10
10
|
import { T as u } from "./text-B2wziCK6.es.js";
|
|
11
11
|
import { S as x } from "./stack-CBx-c8hI.es.js";
|
|
12
12
|
import { V as k } from "./visually-hidden-vh07nrZa.es.js";
|
|
@@ -184,4 +184,4 @@ const { withProvider: _, withContext: n } = /* @__PURE__ */ L({
|
|
|
184
184
|
export {
|
|
185
185
|
ve as R
|
|
186
186
|
};
|
|
187
|
-
//# sourceMappingURL=range-calendar-
|
|
187
|
+
//# sourceMappingURL=range-calendar-B7-Z0ksl.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-calendar-BNAIdxfK.es.js","sources":["../../src/components/range-calendar/range-calendar.slots.tsx","../../src/components/range-calendar/components/range-calendar.grids.tsx","../../src/components/range-calendar/components/range-calendar.header.tsx","../../src/components/range-calendar/components/range-calendar.custom-context.tsx","../../src/components/range-calendar/range-calendar.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n createSlotRecipeContext,\n type HTMLChakraProps,\n type RecipeVariantProps,\n} from \"@chakra-ui/react/styled-system\";\nimport { rangeCalendarSlotRecipe } from \"./range-calendar.recipe\";\nimport type { RangeCalendarProps } from \"react-aria-components\";\nimport type { DateValue } from \"@internationalized/date\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"rangeCalendar\",\n});\n\nexport interface RangeCalendarRootSlotProps\n extends HTMLChakraProps<\n \"div\",\n RecipeVariantProps<typeof rangeCalendarSlotRecipe> &\n RangeCalendarProps<DateValue>\n > {}\nexport const RangeCalendarRootSlot = withProvider<\n HTMLDivElement,\n RangeCalendarRootSlotProps\n>(\"div\", \"root\");\n\nexport interface RangeCalendarHeaderSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const RangeCalendarHeaderSlot = withContext<\n HTMLDivElement,\n RangeCalendarHeaderSlotProps\n>(\"div\", \"header\");\n\nexport interface RangeCalendarGridsSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const RangeCalendarGridsSlot = withContext<\n HTMLDivElement,\n RangeCalendarGridsSlotProps\n>(\"div\", \"grids\");\n\nexport interface RangeCalendarMonthTitleSlotProps\n extends HTMLChakraProps<\"div\"> {}\nexport const RangeCalendarMonthTitleSlot = withContext<\n HTMLDivElement,\n RangeCalendarMonthTitleSlotProps\n>(\"div\", \"monthTitle\");\n\nexport interface RangeCalendarGridSlotProps extends HTMLChakraProps<\"table\"> {}\nexport const RangeCalendarGridSlot = withContext<\n HTMLTableElement,\n RangeCalendarGridSlotProps\n>(\"table\", \"grid\");\n\nexport interface RangeCalendarGridHeaderSlotProps\n extends HTMLChakraProps<\"thead\"> {}\nexport const RangeCalendarGridHeaderSlot = withContext<\n HTMLTableSectionElement,\n RangeCalendarGridHeaderSlotProps\n>(\"thead\", \"gridHeader\");\n\nexport interface RangeCalendarHeaderCellSlotProps\n extends HTMLChakraProps<\"th\"> {}\nexport const RangeCalendarHeaderCellSlot = withContext<\n HTMLTableCellElement,\n RangeCalendarHeaderCellSlotProps\n>(\"th\", \"headerCell\");\n\nexport interface RangeCalendarGridBodySlotProps\n extends HTMLChakraProps<\"tbody\"> {}\nexport const RangeCalendarGridBodySlot = withContext<\n HTMLTableSectionElement,\n RangeCalendarGridBodySlotProps\n>(\"tbody\", \"gridBody\");\n\nexport interface RangeCalendarCellSlotProps extends HTMLChakraProps<\"td\"> {}\nexport const RangeCalendarCellSlot = withContext<\n HTMLTableCellElement,\n RangeCalendarCellSlotProps\n>(\"td\", \"bodyCell\");\n","import { useContext } from \"react\";\nimport { today, getLocalTimeZone } from \"@internationalized/date\";\nimport {\n CalendarGrid as RaCalendarGrid,\n CalendarGridBody as RaCalendarGridBody,\n CalendarGridHeader as RaCalendarGridHeader,\n CalendarHeaderCell as RaCalendarHeaderCell,\n CalendarCell as RaCalendarCell,\n useSlottedContext,\n RangeCalendarContext,\n RangeCalendarStateContext,\n useLocale,\n} from \"react-aria-components\";\nimport { Box } from \"@/components\";\n\nimport {\n RangeCalendarCellSlot,\n RangeCalendarGridBodySlot,\n RangeCalendarGridHeaderSlot,\n RangeCalendarGridsSlot,\n RangeCalendarGridSlot,\n RangeCalendarHeaderCellSlot,\n RangeCalendarMonthTitleSlot,\n} from \"../range-calendar.slots\";\n\nexport const RangeCalendarGrids = () => {\n const { locale } = useLocale();\n const context = useSlottedContext(RangeCalendarContext);\n\n const calendarState = useContext(RangeCalendarStateContext)!;\n const visibleMonthsCount = context?.visibleDuration?.months || 1;\n const todayDate = today(getLocalTimeZone());\n const showMonthTitles = visibleMonthsCount > 1;\n\n return (\n <RangeCalendarGridsSlot>\n {Array.from({ length: visibleMonthsCount }, (_, index) => {\n const gridDate = calendarState.visibleRange.start.add({\n months: index,\n });\n const monthName = new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(gridDate.toDate(getLocalTimeZone()));\n\n return (\n <Box\n key={monthName}\n width={visibleMonthsCount == 1 ? \"full\" : \"auto\"}\n >\n {showMonthTitles && (\n <RangeCalendarMonthTitleSlot>\n {monthName}\n </RangeCalendarMonthTitleSlot>\n )}\n <RangeCalendarGridSlot asChild>\n <RaCalendarGrid offset={{ months: index }} weekdayStyle=\"short\">\n <RangeCalendarGridHeaderSlot asChild>\n <RaCalendarGridHeader>\n {(day) => (\n <RangeCalendarHeaderCellSlot asChild>\n <RaCalendarHeaderCell>{day}</RaCalendarHeaderCell>\n </RangeCalendarHeaderCellSlot>\n )}\n </RaCalendarGridHeader>\n </RangeCalendarGridHeaderSlot>\n <RangeCalendarGridBodySlot asChild>\n <RaCalendarGridBody>\n {(date) => {\n const isToday = date.compare(todayDate) === 0;\n return (\n <RangeCalendarCellSlot asChild data-today={isToday}>\n <RaCalendarCell date={date} />\n </RangeCalendarCellSlot>\n );\n }}\n </RaCalendarGridBody>\n </RangeCalendarGridBodySlot>\n </RaCalendarGrid>\n </RangeCalendarGridSlot>\n </Box>\n );\n })}\n </RangeCalendarGridsSlot>\n );\n};\n","import {\n RangeCalendarContext,\n Heading,\n useSlottedContext,\n} from \"react-aria-components\";\nimport {\n Box,\n Flex,\n IconButton,\n Stack,\n Text,\n VisuallyHidden,\n} from \"@/components\";\nimport {\n KeyboardArrowLeft,\n KeyboardArrowRight,\n} from \"@commercetools/nimbus-icons\";\nimport { RangeCalendarHeaderSlot } from \"../range-calendar.slots\";\n\nexport const RangeCalendarHeader = () => {\n const rangeCalendarProps = useSlottedContext(RangeCalendarContext);\n\n // Needed to decide whether to show a single month or a range\n const visibleDurationMonths =\n rangeCalendarProps?.visibleDuration?.months || 1;\n const showRangeLabel = visibleDurationMonths > 1;\n\n return (\n <RangeCalendarHeaderSlot>\n <Flex>\n <Stack direction=\"row\" alignItems=\"center\">\n {/** solely for screen readers, if not present, a11y issues are raised */}\n <VisuallyHidden>\n <Heading />\n </VisuallyHidden>\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton\n slot={showRangeLabel ? \"previous\" : \"previous-month\"}\n size=\"xs\"\n variant=\"ghost\"\n tone=\"primary\"\n >\n <KeyboardArrowLeft />\n </IconButton>\n <Text\n textStyle=\"sm\"\n fontWeight=\"500\"\n color=\"neutral.11\"\n width={showRangeLabel ? \"4000\" : \"2000\"}\n textAlign=\"center\"\n aria-hidden=\"true\"\n slot={showRangeLabel ? \"monthRange\" : \"month\"}\n />\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton\n slot={showRangeLabel ? \"next\" : \"next-month\"}\n size=\"xs\"\n variant=\"ghost\"\n tone=\"primary\"\n >\n <KeyboardArrowRight />\n </IconButton>\n </Stack>\n <Box flexGrow=\"1\" />\n <Stack direction=\"row\" alignItems=\"center\">\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton\n slot=\"previous-year\"\n size=\"xs\"\n variant=\"ghost\"\n tone=\"primary\"\n >\n <KeyboardArrowLeft />\n </IconButton>\n <Text\n textStyle=\"sm\"\n fontWeight=\"500\"\n color=\"neutral.11\"\n width=\"1400\"\n textAlign=\"center\"\n aria-hidden=\"true\"\n slot=\"year\"\n />\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton slot=\"next-year\" size=\"xs\" variant=\"ghost\" tone=\"primary\">\n <KeyboardArrowRight />\n </IconButton>\n </Stack>\n </Flex>\n </RangeCalendarHeaderSlot>\n );\n};\n","import { getLocalTimeZone } from \"@internationalized/date\";\nimport { useContext } from \"react\";\nimport {\n Provider,\n ButtonContext,\n RangeCalendarStateContext,\n TextContext,\n useLocale,\n} from \"react-aria-components\";\n\nexport const RangeCalendarCustomContext = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const { locale } = useLocale();\n const buttonContext = useContext(ButtonContext)!;\n const textContext = useContext(TextContext)!;\n const calendarState = useContext(RangeCalendarStateContext)!;\n\n /**\n * Button slots\n * ================================\n */\n const buttonSlots = {\n \"next-month\": {\n onPress: () => calendarState.focusNextSection(),\n \"aria-label\": \"Next month\",\n },\n \"previous-month\": {\n onPress: () => calendarState.focusPreviousSection(),\n \"aria-label\": \"Previous month\",\n },\n \"next-year\": {\n onPress: () => calendarState.focusNextSection(true),\n \"aria-label\": \"Next year\",\n },\n \"previous-year\": {\n onPress: () => calendarState.focusPreviousSection(true),\n \"aria-label\": \"Previous year\",\n },\n };\n\n /**\n * Text slots\n * ================================\n */\n const monthLabel = new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(calendarState.focusedDate.toDate(getLocalTimeZone()));\n\n const monthRangeLabel = [\n new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(calendarState.visibleRange.start.toDate(getLocalTimeZone())),\n new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(calendarState.visibleRange.end.toDate(getLocalTimeZone())),\n ].join(\" - \");\n\n const yearLabel = new Intl.DateTimeFormat(locale, {\n year: \"numeric\",\n }).format(calendarState.focusedDate.toDate(getLocalTimeZone()));\n\n const textSlots = {\n month: { children: monthLabel },\n monthRange: { children: monthRangeLabel },\n year: { children: yearLabel },\n };\n\n return (\n <Provider\n values={[\n [\n ButtonContext,\n {\n ...buttonContext,\n slots: {\n ...(buttonContext &&\n typeof buttonContext === \"object\" &&\n \"slots\" in buttonContext\n ? buttonContext.slots\n : {}),\n ...buttonSlots,\n },\n },\n ],\n [\n TextContext,\n {\n ...textContext,\n slots: {\n ...(textContext &&\n typeof textContext === \"object\" &&\n \"slots\" in textContext\n ? textContext.slots\n : {}),\n ...textSlots,\n },\n },\n ],\n ]}\n >\n {children}\n </Provider>\n );\n};\n","import type { RangeCalendarProps } from \"./range-calendar.types\";\nimport type { DateValue } from \"@internationalized/date\";\n\nimport { RangeCalendar as RaRangeCalendar } from \"react-aria-components\";\n\nimport { RangeCalendarRootSlot } from \"./range-calendar.slots\";\nimport { RangeCalendarGrids } from \"./components/range-calendar.grids\";\nimport { RangeCalendarHeader } from \"./components/range-calendar.header\";\nimport { rangeCalendarSlotRecipe } from \"./range-calendar.recipe\";\nimport { useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { RangeCalendarCustomContext } from \"./components/range-calendar.custom-context\";\n\nexport const RangeCalendar = (props: RangeCalendarProps<DateValue>) => {\n const recipe = useRecipe({ recipe: rangeCalendarSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n return (\n <RangeCalendarRootSlot {...recipeProps} {...styleProps} asChild>\n <RaRangeCalendar {...otherProps}>\n <RangeCalendarCustomContext>\n <RangeCalendarHeader />\n <RangeCalendarGrids />\n </RangeCalendarCustomContext>\n </RaRangeCalendar>\n </RangeCalendarRootSlot>\n );\n};\n"],"names":["withProvider","withContext","createSlotRecipeContext","RangeCalendarRootSlot","RangeCalendarHeaderSlot","RangeCalendarGridsSlot","RangeCalendarMonthTitleSlot","RangeCalendarGridSlot","RangeCalendarGridHeaderSlot","RangeCalendarHeaderCellSlot","RangeCalendarGridBodySlot","RangeCalendarCellSlot","RangeCalendarGrids","locale","useLocale","context","useSlottedContext","RangeCalendarContext","calendarState","useContext","RangeCalendarStateContext","visibleMonthsCount","todayDate","today","getLocalTimeZone","showMonthTitles","jsx","_","index","gridDate","monthName","jsxs","Box","RaCalendarGrid","RaCalendarGridHeader","day","RaCalendarHeaderCell","RaCalendarGridBody","date","isToday","RaCalendarCell","RangeCalendarHeader","showRangeLabel","Flex","Stack","VisuallyHidden","Heading","IconButton","KeyboardArrowLeft","Text","KeyboardArrowRight","RangeCalendarCustomContext","children","buttonContext","ButtonContext","textContext","TextContext","buttonSlots","monthLabel","monthRangeLabel","yearLabel","textSlots","Provider","RangeCalendar","props","recipe","useRecipe","rangeCalendarSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","RaRangeCalendar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"range-calendar-B7-Z0ksl.es.js","sources":["../../src/components/range-calendar/range-calendar.slots.tsx","../../src/components/range-calendar/components/range-calendar.grids.tsx","../../src/components/range-calendar/components/range-calendar.header.tsx","../../src/components/range-calendar/components/range-calendar.custom-context.tsx","../../src/components/range-calendar/range-calendar.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n createSlotRecipeContext,\n type HTMLChakraProps,\n type RecipeVariantProps,\n} from \"@chakra-ui/react/styled-system\";\nimport { rangeCalendarSlotRecipe } from \"./range-calendar.recipe\";\nimport type { RangeCalendarProps } from \"react-aria-components\";\nimport type { DateValue } from \"@internationalized/date\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"rangeCalendar\",\n});\n\nexport interface RangeCalendarRootSlotProps\n extends HTMLChakraProps<\n \"div\",\n RecipeVariantProps<typeof rangeCalendarSlotRecipe> &\n RangeCalendarProps<DateValue>\n > {}\nexport const RangeCalendarRootSlot = withProvider<\n HTMLDivElement,\n RangeCalendarRootSlotProps\n>(\"div\", \"root\");\n\nexport interface RangeCalendarHeaderSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const RangeCalendarHeaderSlot = withContext<\n HTMLDivElement,\n RangeCalendarHeaderSlotProps\n>(\"div\", \"header\");\n\nexport interface RangeCalendarGridsSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const RangeCalendarGridsSlot = withContext<\n HTMLDivElement,\n RangeCalendarGridsSlotProps\n>(\"div\", \"grids\");\n\nexport interface RangeCalendarMonthTitleSlotProps\n extends HTMLChakraProps<\"div\"> {}\nexport const RangeCalendarMonthTitleSlot = withContext<\n HTMLDivElement,\n RangeCalendarMonthTitleSlotProps\n>(\"div\", \"monthTitle\");\n\nexport interface RangeCalendarGridSlotProps extends HTMLChakraProps<\"table\"> {}\nexport const RangeCalendarGridSlot = withContext<\n HTMLTableElement,\n RangeCalendarGridSlotProps\n>(\"table\", \"grid\");\n\nexport interface RangeCalendarGridHeaderSlotProps\n extends HTMLChakraProps<\"thead\"> {}\nexport const RangeCalendarGridHeaderSlot = withContext<\n HTMLTableSectionElement,\n RangeCalendarGridHeaderSlotProps\n>(\"thead\", \"gridHeader\");\n\nexport interface RangeCalendarHeaderCellSlotProps\n extends HTMLChakraProps<\"th\"> {}\nexport const RangeCalendarHeaderCellSlot = withContext<\n HTMLTableCellElement,\n RangeCalendarHeaderCellSlotProps\n>(\"th\", \"headerCell\");\n\nexport interface RangeCalendarGridBodySlotProps\n extends HTMLChakraProps<\"tbody\"> {}\nexport const RangeCalendarGridBodySlot = withContext<\n HTMLTableSectionElement,\n RangeCalendarGridBodySlotProps\n>(\"tbody\", \"gridBody\");\n\nexport interface RangeCalendarCellSlotProps extends HTMLChakraProps<\"td\"> {}\nexport const RangeCalendarCellSlot = withContext<\n HTMLTableCellElement,\n RangeCalendarCellSlotProps\n>(\"td\", \"bodyCell\");\n","import { useContext } from \"react\";\nimport { today, getLocalTimeZone } from \"@internationalized/date\";\nimport {\n CalendarGrid as RaCalendarGrid,\n CalendarGridBody as RaCalendarGridBody,\n CalendarGridHeader as RaCalendarGridHeader,\n CalendarHeaderCell as RaCalendarHeaderCell,\n CalendarCell as RaCalendarCell,\n useSlottedContext,\n RangeCalendarContext,\n RangeCalendarStateContext,\n useLocale,\n} from \"react-aria-components\";\nimport { Box } from \"@/components\";\n\nimport {\n RangeCalendarCellSlot,\n RangeCalendarGridBodySlot,\n RangeCalendarGridHeaderSlot,\n RangeCalendarGridsSlot,\n RangeCalendarGridSlot,\n RangeCalendarHeaderCellSlot,\n RangeCalendarMonthTitleSlot,\n} from \"../range-calendar.slots\";\n\nexport const RangeCalendarGrids = () => {\n const { locale } = useLocale();\n const context = useSlottedContext(RangeCalendarContext);\n\n const calendarState = useContext(RangeCalendarStateContext)!;\n const visibleMonthsCount = context?.visibleDuration?.months || 1;\n const todayDate = today(getLocalTimeZone());\n const showMonthTitles = visibleMonthsCount > 1;\n\n return (\n <RangeCalendarGridsSlot>\n {Array.from({ length: visibleMonthsCount }, (_, index) => {\n const gridDate = calendarState.visibleRange.start.add({\n months: index,\n });\n const monthName = new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(gridDate.toDate(getLocalTimeZone()));\n\n return (\n <Box\n key={monthName}\n width={visibleMonthsCount == 1 ? \"full\" : \"auto\"}\n >\n {showMonthTitles && (\n <RangeCalendarMonthTitleSlot>\n {monthName}\n </RangeCalendarMonthTitleSlot>\n )}\n <RangeCalendarGridSlot asChild>\n <RaCalendarGrid offset={{ months: index }} weekdayStyle=\"short\">\n <RangeCalendarGridHeaderSlot asChild>\n <RaCalendarGridHeader>\n {(day) => (\n <RangeCalendarHeaderCellSlot asChild>\n <RaCalendarHeaderCell>{day}</RaCalendarHeaderCell>\n </RangeCalendarHeaderCellSlot>\n )}\n </RaCalendarGridHeader>\n </RangeCalendarGridHeaderSlot>\n <RangeCalendarGridBodySlot asChild>\n <RaCalendarGridBody>\n {(date) => {\n const isToday = date.compare(todayDate) === 0;\n return (\n <RangeCalendarCellSlot asChild data-today={isToday}>\n <RaCalendarCell date={date} />\n </RangeCalendarCellSlot>\n );\n }}\n </RaCalendarGridBody>\n </RangeCalendarGridBodySlot>\n </RaCalendarGrid>\n </RangeCalendarGridSlot>\n </Box>\n );\n })}\n </RangeCalendarGridsSlot>\n );\n};\n","import {\n RangeCalendarContext,\n Heading,\n useSlottedContext,\n} from \"react-aria-components\";\nimport {\n Box,\n Flex,\n IconButton,\n Stack,\n Text,\n VisuallyHidden,\n} from \"@/components\";\nimport {\n KeyboardArrowLeft,\n KeyboardArrowRight,\n} from \"@commercetools/nimbus-icons\";\nimport { RangeCalendarHeaderSlot } from \"../range-calendar.slots\";\n\nexport const RangeCalendarHeader = () => {\n const rangeCalendarProps = useSlottedContext(RangeCalendarContext);\n\n // Needed to decide whether to show a single month or a range\n const visibleDurationMonths =\n rangeCalendarProps?.visibleDuration?.months || 1;\n const showRangeLabel = visibleDurationMonths > 1;\n\n return (\n <RangeCalendarHeaderSlot>\n <Flex>\n <Stack direction=\"row\" alignItems=\"center\">\n {/** solely for screen readers, if not present, a11y issues are raised */}\n <VisuallyHidden>\n <Heading />\n </VisuallyHidden>\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton\n slot={showRangeLabel ? \"previous\" : \"previous-month\"}\n size=\"xs\"\n variant=\"ghost\"\n tone=\"primary\"\n >\n <KeyboardArrowLeft />\n </IconButton>\n <Text\n textStyle=\"sm\"\n fontWeight=\"500\"\n color=\"neutral.11\"\n width={showRangeLabel ? \"4000\" : \"2000\"}\n textAlign=\"center\"\n aria-hidden=\"true\"\n slot={showRangeLabel ? \"monthRange\" : \"month\"}\n />\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton\n slot={showRangeLabel ? \"next\" : \"next-month\"}\n size=\"xs\"\n variant=\"ghost\"\n tone=\"primary\"\n >\n <KeyboardArrowRight />\n </IconButton>\n </Stack>\n <Box flexGrow=\"1\" />\n <Stack direction=\"row\" alignItems=\"center\">\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton\n slot=\"previous-year\"\n size=\"xs\"\n variant=\"ghost\"\n tone=\"primary\"\n >\n <KeyboardArrowLeft />\n </IconButton>\n <Text\n textStyle=\"sm\"\n fontWeight=\"500\"\n color=\"neutral.11\"\n width=\"1400\"\n textAlign=\"center\"\n aria-hidden=\"true\"\n slot=\"year\"\n />\n {/* @ts-expect-error - custom-context will add aria-label via the \"slot\" prop */}\n <IconButton slot=\"next-year\" size=\"xs\" variant=\"ghost\" tone=\"primary\">\n <KeyboardArrowRight />\n </IconButton>\n </Stack>\n </Flex>\n </RangeCalendarHeaderSlot>\n );\n};\n","import { getLocalTimeZone } from \"@internationalized/date\";\nimport { useContext } from \"react\";\nimport {\n Provider,\n ButtonContext,\n RangeCalendarStateContext,\n TextContext,\n useLocale,\n} from \"react-aria-components\";\n\nexport const RangeCalendarCustomContext = ({\n children,\n}: {\n children: React.ReactNode;\n}) => {\n const { locale } = useLocale();\n const buttonContext = useContext(ButtonContext)!;\n const textContext = useContext(TextContext)!;\n const calendarState = useContext(RangeCalendarStateContext)!;\n\n /**\n * Button slots\n * ================================\n */\n const buttonSlots = {\n \"next-month\": {\n onPress: () => calendarState.focusNextSection(),\n \"aria-label\": \"Next month\",\n },\n \"previous-month\": {\n onPress: () => calendarState.focusPreviousSection(),\n \"aria-label\": \"Previous month\",\n },\n \"next-year\": {\n onPress: () => calendarState.focusNextSection(true),\n \"aria-label\": \"Next year\",\n },\n \"previous-year\": {\n onPress: () => calendarState.focusPreviousSection(true),\n \"aria-label\": \"Previous year\",\n },\n };\n\n /**\n * Text slots\n * ================================\n */\n const monthLabel = new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(calendarState.focusedDate.toDate(getLocalTimeZone()));\n\n const monthRangeLabel = [\n new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(calendarState.visibleRange.start.toDate(getLocalTimeZone())),\n new Intl.DateTimeFormat(locale, {\n month: \"long\",\n }).format(calendarState.visibleRange.end.toDate(getLocalTimeZone())),\n ].join(\" - \");\n\n const yearLabel = new Intl.DateTimeFormat(locale, {\n year: \"numeric\",\n }).format(calendarState.focusedDate.toDate(getLocalTimeZone()));\n\n const textSlots = {\n month: { children: monthLabel },\n monthRange: { children: monthRangeLabel },\n year: { children: yearLabel },\n };\n\n return (\n <Provider\n values={[\n [\n ButtonContext,\n {\n ...buttonContext,\n slots: {\n ...(buttonContext &&\n typeof buttonContext === \"object\" &&\n \"slots\" in buttonContext\n ? buttonContext.slots\n : {}),\n ...buttonSlots,\n },\n },\n ],\n [\n TextContext,\n {\n ...textContext,\n slots: {\n ...(textContext &&\n typeof textContext === \"object\" &&\n \"slots\" in textContext\n ? textContext.slots\n : {}),\n ...textSlots,\n },\n },\n ],\n ]}\n >\n {children}\n </Provider>\n );\n};\n","import type { RangeCalendarProps } from \"./range-calendar.types\";\nimport type { DateValue } from \"@internationalized/date\";\n\nimport { RangeCalendar as RaRangeCalendar } from \"react-aria-components\";\n\nimport { RangeCalendarRootSlot } from \"./range-calendar.slots\";\nimport { RangeCalendarGrids } from \"./components/range-calendar.grids\";\nimport { RangeCalendarHeader } from \"./components/range-calendar.header\";\nimport { rangeCalendarSlotRecipe } from \"./range-calendar.recipe\";\nimport { useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { RangeCalendarCustomContext } from \"./components/range-calendar.custom-context\";\n\nexport const RangeCalendar = (props: RangeCalendarProps<DateValue>) => {\n const recipe = useRecipe({ recipe: rangeCalendarSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n return (\n <RangeCalendarRootSlot {...recipeProps} {...styleProps} asChild>\n <RaRangeCalendar {...otherProps}>\n <RangeCalendarCustomContext>\n <RangeCalendarHeader />\n <RangeCalendarGrids />\n </RangeCalendarCustomContext>\n </RaRangeCalendar>\n </RangeCalendarRootSlot>\n );\n};\n"],"names":["withProvider","withContext","createSlotRecipeContext","RangeCalendarRootSlot","RangeCalendarHeaderSlot","RangeCalendarGridsSlot","RangeCalendarMonthTitleSlot","RangeCalendarGridSlot","RangeCalendarGridHeaderSlot","RangeCalendarHeaderCellSlot","RangeCalendarGridBodySlot","RangeCalendarCellSlot","RangeCalendarGrids","locale","useLocale","context","useSlottedContext","RangeCalendarContext","calendarState","useContext","RangeCalendarStateContext","visibleMonthsCount","todayDate","today","getLocalTimeZone","showMonthTitles","jsx","_","index","gridDate","monthName","jsxs","Box","RaCalendarGrid","RaCalendarGridHeader","day","RaCalendarHeaderCell","RaCalendarGridBody","date","isToday","RaCalendarCell","RangeCalendarHeader","showRangeLabel","Flex","Stack","VisuallyHidden","Heading","IconButton","KeyboardArrowLeft","Text","KeyboardArrowRight","RangeCalendarCustomContext","children","buttonContext","ButtonContext","textContext","TextContext","buttonSlots","monthLabel","monthRangeLabel","yearLabel","textSlots","Provider","RangeCalendar","props","recipe","useRecipe","rangeCalendarSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","RaRangeCalendar"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),a=require("./Heading-CQJ-3eon.cjs.js"),w=require("./create-slot-recipe-context-HIF51Igr.cjs.js"),$=require("react"),c=require("./useDateFormatter-G9oGkNG5.cjs.js"),p=require("./utils-BHdR5Nww.cjs.js"),R=require("./box-BPfqlznQ.cjs.js"),v=require("./context-D0_cRaDZ.cjs.js"),h=require("./icon-button-
|
|
2
|
-
//# sourceMappingURL=range-calendar-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),a=require("./Heading-CQJ-3eon.cjs.js"),w=require("./create-slot-recipe-context-HIF51Igr.cjs.js"),$=require("react"),c=require("./useDateFormatter-G9oGkNG5.cjs.js"),p=require("./utils-BHdR5Nww.cjs.js"),R=require("./box-BPfqlznQ.cjs.js"),v=require("./context-D0_cRaDZ.cjs.js"),h=require("./icon-button-BPQdpTPZ.cjs.js"),g=require("./text-hUMahKuA.cjs.js"),j=require("./stack-B6PqFPMh.cjs.js"),q=require("./visually-hidden-Uhh-2Y-q.cjs.js"),u=require("@commercetools/nimbus-icons"),D=require("./flex-BhVeeItQ.cjs.js"),P=require("./index-COhQ_99G.cjs.js"),I=require("./extractStyleProps-yFm0qaXg.cjs.js"),C=require("./Button-DQ_WkLNH.cjs.js"),y=require("./Text-BWSfeB9p.cjs.js"),T=require("./use-recipe-BZ_iqCkN.cjs.js"),{withProvider:B,withContext:s}=w.createSlotRecipeContext({key:"rangeCalendar"}),H=B("div","root"),A=s("div","header"),F=s("div","grids"),G=s("div","monthTitle"),L=s("table","grid"),k=s("thead","gridHeader"),M=s("th","headerCell"),N=s("tbody","gridBody"),z=s("td","bodyCell"),K=()=>{const{locale:d}=v.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7(),n=p.$64fa3d84918910a7$export$fabf2dc03a41866e(a.$dfd62f934fc76fed$export$233dd9682e1ad64b),t=$.useContext(a.$dfd62f934fc76fed$export$5e0fc348c00f87a0),r=n?.visibleDuration?.months||1,o=c.$14e0f24ef4ac5c92$export$d0bdf45af03a6ea3(c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2()),i=r>1;return e.jsx(F,{children:Array.from({length:r},(m,l)=>{const b=t.visibleRange.start.add({months:l}),f=new Intl.DateTimeFormat(d,{month:"long"}).format(b.toDate(c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2()));return e.jsxs(R.Box,{width:r==1?"full":"auto",children:[i&&e.jsx(G,{children:f}),e.jsx(L,{asChild:!0,children:e.jsxs(a.$dfd62f934fc76fed$export$5bd780d491cfc46c,{offset:{months:l},weekdayStyle:"short",children:[e.jsx(k,{asChild:!0,children:e.jsx(a.$dfd62f934fc76fed$export$22e2d15eaa4d2377,{children:x=>e.jsx(M,{asChild:!0,children:e.jsx(a.$dfd62f934fc76fed$export$ad2135cac3a11b3d,{children:x})})})}),e.jsx(N,{asChild:!0,children:e.jsx(a.$dfd62f934fc76fed$export$e11f8ba65d857bff,{children:x=>{const S=x.compare(o)===0;return e.jsx(z,{asChild:!0,"data-today":S,children:e.jsx(a.$dfd62f934fc76fed$export$5d847498420df57b,{date:x})})}})})]})})]},f)})})},V=()=>{const t=(p.$64fa3d84918910a7$export$fabf2dc03a41866e(a.$dfd62f934fc76fed$export$233dd9682e1ad64b)?.visibleDuration?.months||1)>1;return e.jsx(A,{children:e.jsxs(D.Flex,{children:[e.jsxs(j.Stack,{direction:"row",alignItems:"center",children:[e.jsx(q.VisuallyHidden,{children:e.jsx(a.$5cb03073d3f54797$export$a8a3e93435678ff9,{})}),e.jsx(h.IconButton,{slot:t?"previous":"previous-month",size:"xs",variant:"ghost",tone:"primary",children:e.jsx(u.KeyboardArrowLeft,{})}),e.jsx(g.Text,{textStyle:"sm",fontWeight:"500",color:"neutral.11",width:t?"4000":"2000",textAlign:"center","aria-hidden":"true",slot:t?"monthRange":"month"}),e.jsx(h.IconButton,{slot:t?"next":"next-month",size:"xs",variant:"ghost",tone:"primary",children:e.jsx(u.KeyboardArrowRight,{})})]}),e.jsx(R.Box,{flexGrow:"1"}),e.jsxs(j.Stack,{direction:"row",alignItems:"center",children:[e.jsx(h.IconButton,{slot:"previous-year",size:"xs",variant:"ghost",tone:"primary",children:e.jsx(u.KeyboardArrowLeft,{})}),e.jsx(g.Text,{textStyle:"sm",fontWeight:"500",color:"neutral.11",width:"1400",textAlign:"center","aria-hidden":"true",slot:"year"}),e.jsx(h.IconButton,{slot:"next-year",size:"xs",variant:"ghost",tone:"primary",children:e.jsx(u.KeyboardArrowRight,{})})]})]})})},W=({children:d})=>{const{locale:n}=v.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7(),t=$.useContext(C.$d2b4bc8c273e7be6$export$24d547caef80ccd1),r=$.useContext(y.$514c0188e459b4c0$export$9afb8bc826b033ea),o=$.useContext(a.$dfd62f934fc76fed$export$5e0fc348c00f87a0),i={"next-month":{onPress:()=>o.focusNextSection(),"aria-label":"Next month"},"previous-month":{onPress:()=>o.focusPreviousSection(),"aria-label":"Previous month"},"next-year":{onPress:()=>o.focusNextSection(!0),"aria-label":"Next year"},"previous-year":{onPress:()=>o.focusPreviousSection(!0),"aria-label":"Previous year"}},m=new Intl.DateTimeFormat(n,{month:"long"}).format(o.focusedDate.toDate(c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2())),l=[new Intl.DateTimeFormat(n,{month:"long"}).format(o.visibleRange.start.toDate(c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2())),new Intl.DateTimeFormat(n,{month:"long"}).format(o.visibleRange.end.toDate(c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2()))].join(" - "),b=new Intl.DateTimeFormat(n,{year:"numeric"}).format(o.focusedDate.toDate(c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2())),f={month:{children:m},monthRange:{children:l},year:{children:b}};return e.jsx(p.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[C.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{...t,slots:{...t&&typeof t=="object"&&"slots"in t?t.slots:{},...i}}],[y.$514c0188e459b4c0$export$9afb8bc826b033ea,{...r,slots:{...r&&typeof r=="object"&&"slots"in r?r.slots:{},...f}}]],children:d})},_=d=>{const n=T.useRecipe({recipe:P.rangeCalendarSlotRecipe}),[t,r]=n.splitVariantProps(d),[o,i]=I.extractStyleProps(r);return e.jsx(H,{...t,...o,asChild:!0,children:e.jsx(a.$dfd62f934fc76fed$export$a4f5c8b89d277a8d,{...i,children:e.jsxs(W,{children:[e.jsx(V,{}),e.jsx(K,{})]})})})};exports.RangeCalendar=_;
|
|
2
|
+
//# sourceMappingURL=range-calendar-CswayeNh.cjs.js.map
|