@commercetools/nimbus 0.0.0-canary-20250807210749 → 0.0.0-canary-20250808141145
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/accordion-Bn6CnY0Y.cjs.js.map +1 -1
- package/dist/chunks/accordion-xfgQQjFK.es.js.map +1 -1
- package/dist/chunks/alert-BkF91mJ0.es.js.map +1 -1
- package/dist/chunks/alert-CQLVvNDD.cjs.js.map +1 -1
- package/dist/chunks/badge-CFwI3HLf.cjs.js.map +1 -1
- package/dist/chunks/badge-DVDR3-fy.es.js.map +1 -1
- package/dist/chunks/box-DD4jYgS7.es.js.map +1 -1
- package/dist/chunks/box-FU6tRPFs.cjs.js.map +1 -1
- package/dist/chunks/button-BBwNbl7S.cjs.js.map +1 -1
- package/dist/chunks/button-BTpQweka.es.js.map +1 -1
- package/dist/chunks/calendar-B4nCYXn4.es.js.map +1 -1
- package/dist/chunks/calendar-CKVscUm-.cjs.js.map +1 -1
- package/dist/chunks/card-B9z3AknN.cjs.js.map +1 -1
- package/dist/chunks/card-CvY06qIE.es.js.map +1 -1
- package/dist/chunks/checkbox-DywApPQh.cjs.js.map +1 -1
- package/dist/chunks/checkbox-yo64B6Gz.es.js.map +1 -1
- package/dist/chunks/code-CI8aUhmu.es.js.map +1 -1
- package/dist/chunks/code-Dg4Larbo.cjs.js.map +1 -1
- package/dist/chunks/combobox-D5lDtav9.cjs.js.map +1 -1
- package/dist/chunks/combobox-DWSsUEVz.es.js.map +1 -1
- package/dist/chunks/date-input-4hsVHJJo.es.js.map +1 -1
- package/dist/chunks/date-input-CGy4NHpW.cjs.js.map +1 -1
- package/dist/chunks/date-picker-BfA4uYkg.cjs.js.map +1 -1
- package/dist/chunks/date-picker-UO9jg5oK.es.js.map +1 -1
- package/dist/chunks/{date-range-picker-DGKM05wQ.es.js → date-range-picker-BU5JdXpV.es.js} +69 -69
- package/dist/chunks/date-range-picker-BU5JdXpV.es.js.map +1 -0
- package/dist/chunks/{date-range-picker-D7D7R_4k.cjs.js → date-range-picker-Uh8jNdzD.cjs.js} +2 -2
- package/dist/chunks/date-range-picker-Uh8jNdzD.cjs.js.map +1 -0
- package/dist/chunks/dialog-C1HRMUcF.es.js.map +1 -1
- package/dist/chunks/dialog-amEwvIoM.cjs.js.map +1 -1
- package/dist/chunks/form-field-C9PpQYF0.es.js.map +1 -1
- package/dist/chunks/form-field-CBFyTAo8.cjs.js.map +1 -1
- package/dist/chunks/grid-CugcJxRP.es.js.map +1 -1
- package/dist/chunks/grid-xr2A-OqD.cjs.js.map +1 -1
- package/dist/chunks/group-DKR1JLAy.es.js.map +1 -1
- package/dist/chunks/group-DtSrr9I-.cjs.js.map +1 -1
- package/dist/chunks/icon-BFNYuilh.es.js.map +1 -1
- package/dist/chunks/icon-D50i-dqv.cjs.js.map +1 -1
- package/dist/chunks/icon-button-BEaNe4rE.cjs.js.map +1 -1
- package/dist/chunks/icon-button-DqkVeZCx.es.js.map +1 -1
- package/dist/chunks/image-DCirAAnr.cjs.js.map +1 -1
- package/dist/chunks/image-rXPA3shk.es.js.map +1 -1
- package/dist/chunks/kbd-Bkhw9E6L.cjs.js.map +1 -1
- package/dist/chunks/kbd-Gxvodc1U.es.js.map +1 -1
- package/dist/chunks/link-BS1jRPrC.es.js.map +1 -1
- package/dist/chunks/link-COqOFX5Z.cjs.js.map +1 -1
- package/dist/chunks/list-8yfreyzi.cjs.js.map +1 -1
- package/dist/chunks/list-B21joBrq.es.js.map +1 -1
- package/dist/chunks/loading-spinner-BQd4UVQs.cjs.js.map +1 -1
- package/dist/chunks/loading-spinner-DwN-yshK.es.js.map +1 -1
- package/dist/chunks/multiline-text-input-BCHcfgz9.cjs.js.map +1 -1
- package/dist/chunks/multiline-text-input-sSdbj6tb.es.js.map +1 -1
- package/dist/chunks/nimbus-provider-Bf7NgBYl.cjs.js.map +1 -1
- package/dist/chunks/nimbus-provider-DiytQtCG.es.js.map +1 -1
- package/dist/chunks/number-input-BU6yMXV8.cjs.js.map +1 -1
- package/dist/chunks/number-input-DzwHfylo.es.js.map +1 -1
- package/dist/chunks/password-input-DdJ9gDUr.es.js.map +1 -1
- package/dist/chunks/password-input-DpINXGwE.cjs.js.map +1 -1
- package/dist/chunks/progress-bar-CCyJEPoU.es.js +75 -0
- package/dist/chunks/progress-bar-CCyJEPoU.es.js.map +1 -0
- package/dist/chunks/progress-bar-pMjw8h4h.cjs.js +2 -0
- package/dist/chunks/progress-bar-pMjw8h4h.cjs.js.map +1 -0
- package/dist/chunks/radio-input-BLVHJidw.cjs.js.map +1 -1
- package/dist/chunks/radio-input-CCm7Xqcz.es.js.map +1 -1
- package/dist/chunks/select-BZ2fZDHJ.cjs.js.map +1 -1
- package/dist/chunks/select-Cx0Yiwr-.es.js.map +1 -1
- package/dist/chunks/simple-grid-CFOP9g2P.es.js.map +1 -1
- package/dist/chunks/simple-grid-CHgTayx6.cjs.js.map +1 -1
- package/dist/chunks/stack-__ugxVHD.es.js.map +1 -1
- package/dist/chunks/stack-wFUhYQQb.cjs.js.map +1 -1
- package/dist/chunks/switch-BriJIKqx.es.js.map +1 -1
- package/dist/chunks/switch-GFsEXE6w.cjs.js.map +1 -1
- package/dist/chunks/tag-group-8CojIACI.es.js.map +1 -1
- package/dist/chunks/tag-group-D7GNkec5.cjs.js.map +1 -1
- package/dist/chunks/text--fhvW47o.cjs.js.map +1 -1
- package/dist/chunks/text-CFsPSPPs.es.js.map +1 -1
- package/dist/chunks/text-input-Dg1LSvlo.es.js.map +1 -1
- package/dist/chunks/text-input-DzIZYD16.cjs.js.map +1 -1
- package/dist/chunks/toggle-button-BcbQQcBy.cjs.js.map +1 -1
- package/dist/chunks/toggle-button-DhnBl8Gb.es.js.map +1 -1
- package/dist/chunks/toggle-button-group-BQfaNSZf.es.js.map +1 -1
- package/dist/chunks/toggle-button-group-C5nvmHRc.cjs.js.map +1 -1
- package/dist/chunks/{toolbar-C18za_6s.es.js → toolbar-DZrjQLFq.es.js} +2 -5
- package/dist/chunks/{toolbar-C18za_6s.es.js.map → toolbar-DZrjQLFq.es.js.map} +1 -1
- package/dist/chunks/toolbar-O-t4_xhL.cjs.js.map +1 -1
- package/dist/chunks/tooltip-Bi0556u1.es.js.map +1 -1
- package/dist/chunks/tooltip-DwXtfA_x.cjs.js.map +1 -1
- package/dist/chunks/visually-hidden-Bkimhan7.es.js.map +1 -1
- package/dist/chunks/visually-hidden-KeFRLonC.cjs.js.map +1 -1
- package/dist/components/components.cjs +1 -1
- package/dist/components/components.es.js +3 -3
- package/dist/components/date-range-picker.cjs +1 -1
- package/dist/components/date-range-picker.es.js +1 -1
- package/dist/components/progress-bar.cjs +1 -1
- package/dist/components/progress-bar.es.js +1 -1
- package/dist/components/toolbar.es.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.es.js +3 -3
- package/dist/setup-jsdom-polyfills.cjs.map +1 -1
- package/dist/setup-jsdom-polyfills.es.js.map +1 -1
- package/package.json +5 -5
- package/dist/chunks/date-range-picker-D7D7R_4k.cjs.js.map +0 -1
- package/dist/chunks/date-range-picker-DGKM05wQ.es.js.map +0 -1
- package/dist/chunks/progress-bar-CbZY1dE1.cjs.js +0 -2
- package/dist/chunks/progress-bar-CbZY1dE1.cjs.js.map +0 -1
- package/dist/chunks/progress-bar-VipTWl4r.es.js +0 -71
- package/dist/chunks/progress-bar-VipTWl4r.es.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),g=require("@chakra-ui/react"),T=require("./date-range-picker.recipe-BARriKKl.cjs.js"),R=require("@commercetools/nimbus-icons"),P=require("./DatePicker-Ch7j_XH3.cjs.js"),D=require("./Dialog-UM6kRwD8.cjs.js"),V=require("./Group-BQlSpW4r.cjs.js"),w=require("./extractStyleProps-lyk7D-zN.cjs.js"),S=require("./icon-button-BEaNe4rE.cjs.js"),j=require("./text--fhvW47o.cjs.js"),y=require("./date-input-CGy4NHpW.cjs.js"),z=require("./range-calendar-13GVqWSL.cjs.js"),C=require("./time-input-ByUOjN2R.cjs.js"),m=require("react"),E=require("./context-DURpz5en.cjs.js"),I=require("./Button-gAaN5cZZ.cjs.js"),q=require("./utils-sWqo2nmW.cjs.js"),B=require("./DateField-Bd9anPa4.cjs.js"),{withProvider:F,withContext
|
|
2
|
-
//# sourceMappingURL=date-range-picker-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),g=require("@chakra-ui/react"),T=require("./date-range-picker.recipe-BARriKKl.cjs.js"),R=require("@commercetools/nimbus-icons"),P=require("./DatePicker-Ch7j_XH3.cjs.js"),D=require("./Dialog-UM6kRwD8.cjs.js"),V=require("./Group-BQlSpW4r.cjs.js"),w=require("./extractStyleProps-lyk7D-zN.cjs.js"),S=require("./icon-button-BEaNe4rE.cjs.js"),j=require("./text--fhvW47o.cjs.js"),y=require("./date-input-CGy4NHpW.cjs.js"),z=require("./range-calendar-13GVqWSL.cjs.js"),C=require("./time-input-ByUOjN2R.cjs.js"),m=require("react"),E=require("./context-DURpz5en.cjs.js"),I=require("./Button-gAaN5cZZ.cjs.js"),q=require("./utils-sWqo2nmW.cjs.js"),B=require("./DateField-Bd9anPa4.cjs.js"),{withProvider:F,withContext:b}=g.createSlotRecipeContext({recipe:T.dateRangePickerSlotRecipe}),W=F("div","root"),G=b("div","group"),O=b("div","trigger"),A=b("div","popover"),H=b("div","calendar"),L=({hideTimeZone:o,hourCycle:i})=>{const{locale:t}=E.$18f2051aff69b9bf$export$43bb16f9c6d9e3f7(),c=m.useContext(P.$06d5b8ec9ee5d538$export$80d7ae1f804790be),{granularity:u,value:r}=c,p=m.useRef(null),l=m.useRef(r);return u==="day"?null:(m.useEffect(()=>{(r?.start&&l.current?.start?.compare(r.start)!==0||r?.end&&l.current?.end?.compare(r.end)!==0)&&setTimeout(()=>{const s=p.current;if(s){const d=s.querySelector('[role="spinbutton"]');d&&d.focus()}},50),l.current=r},[r]),e.jsxs(g.Flex,{ref:p,borderTop:"solid-25",borderColor:"neutral.3",py:"300",px:"400",alignItems:"center",justifyContent:"center",gap:"200",children:[e.jsxs(g.Flex,{alignItems:"center",gap:"200",children:[e.jsx(j.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:"Start time"}),e.jsx(C.TimeInput,{slot:"startTimeInput",locale:t,variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]}),e.jsxs(g.Flex,{alignItems:"center",gap:"200",children:[e.jsx(j.Text,{textStyle:"xs",fontWeight:"500",color:"neutral.12",minWidth:"fit-content",children:"End time"}),e.jsx(C.TimeInput,{slot:"endTimeInput",locale:t,variant:"ghost",size:"sm",hideTimeZone:o,hourCycle:i})]})]}))},M=({children:o})=>{const i=q.$64fa3d84918910a7$export$fabf2dc03a41866e(I.$d2b4bc8c273e7be6$export$24d547caef80ccd1)||{},t=m.useContext(P.$06d5b8ec9ee5d538$export$80d7ae1f804790be),c=n=>n?.day&&n?.month&&n?.year,u=!t?.value||!c(t.value.start)||!c(t.value.end),{granularity:r}=t,p=t?.value?.start&&"hour"in t.value.start?t.value.start:null,l=t?.value?.end&&"hour"in t.value.end?t.value.end:null,f=i?.isDisabled,s=n=>{const a=n==="start"?"Start":"End";switch(r){case"hour":return`${a} time (hour)`;case"minute":return`${a} time (hour and minute)`;case"second":return`${a} time (hour, minute, and second)`;default:return`${a} time`}},d={calendarToggle:{...i,onPress:n=>{const a=document?.activeElement;a&&a.blur(),i.onPress?.(n)}},clear:{onPress:()=>t?.setValue(null),"aria-label":"Clear input value",isDisabled:f,style:u?{display:"none"}:void 0,"aria-hidden":u?!0:void 0}},$={startTimeInput:{value:p,onChange:n=>{if(n!==null&&t?.value?.start){const a=t.value,x=a.start,h=a.end;if(x&&h){const v=x.set({hour:n.hour,minute:n.minute||0,second:n.second||0,millisecond:n.millisecond||0});t.setValue({start:v,end:h})}}},granularity:r==="day"?void 0:r,"aria-label":s("start")},endTimeInput:{value:l,onChange:n=>{if(n!==null&&t?.value?.end){const a=t.value,x=a.start,h=a.end;if(x&&h){const v=h.set({hour:n.hour,minute:n.minute||0,second:n.second||0,millisecond:n.millisecond||0});t.setValue({start:x,end:v})}}},granularity:r==="day"?void 0:r,"aria-label":s("end")}};return e.jsx(q.$64fa3d84918910a7$export$2881499e37b75b9a,{values:[[I.$d2b4bc8c273e7be6$export$24d547caef80ccd1,{slots:d}],[B.$40825cdb76e74f70$export$8e17ddc448e87c1e,{slots:$}]],children:o})},k=o=>{const{granularity:i="day",hideTimeZone:t,hourCycle:c}=o,u=g.useSlotRecipe({recipe:T.dateRangePickerSlotRecipe}),[r,p]=u.splitVariantProps(o),[l,f]=w.extractStyleProps(p),{size:s="md"}=r,d=s==="md"?"xs":"2xs",$=i==="day"?o.shouldCloseOnSelect:!1;return e.jsx(W,{...r,...l,asChild:!0,children:e.jsx(P.$06d5b8ec9ee5d538$export$17334619f3ac2224,{...f,shouldCloseOnSelect:$,children:e.jsxs(M,{children:[e.jsx(G,{asChild:!0,children:e.jsxs(V.$a049562f99e7db0e$export$eb2fcfdbd7ba97d4,{children:[e.jsx(y.DateInput,{slot:"start",size:s,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:c}),e.jsx(j.Text,{as:"span",px:"150",color:"neutral.11",userSelect:"none","aria-hidden":"true",slot:null,children:"–"}),e.jsx(y.DateInput,{slot:"end",size:s,variant:"plain",width:"auto",hideTimeZone:t,hourCycle:c}),e.jsxs(O,{children:[e.jsx(S.IconButton,{tone:"primary",variant:"ghost",size:d,slot:"clear",children:e.jsx(R.Close,{})}),e.jsx(S.IconButton,{tone:"primary",variant:"ghost",size:d,slot:"calendarToggle",children:e.jsx(R.CalendarMonth,{})})]})]})}),e.jsx(A,{asChild:!0,children:e.jsx(D.$07b14b47974efb58$export$5b6b19405a83ff9d,{placement:"bottom end",children:e.jsxs(D.$de32f1b87079253c$export$3ddf2d174ce01153,{children:[e.jsx(H,{children:e.jsx(z.RangeCalendar,{})}),e.jsx(L,{hideTimeZone:t,hourCycle:c})]})})})]})})})};k.displayName="DateRangePicker";exports.DateRangePicker=k;
|
|
2
|
+
//# sourceMappingURL=date-range-picker-Uh8jNdzD.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-range-picker-Uh8jNdzD.cjs.js","sources":["../../src/components/date-range-picker/date-range-picker.slots.tsx","../../src/components/date-range-picker/components/date-range-picker.time-input.tsx","../../src/components/date-range-picker/components/date-range-picker.custom-context.tsx","../../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createSlotRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n */\ninterface DateRangePickerRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface DateRangePickerRootProps\n extends HTMLChakraProps<\"div\", DateRangePickerRecipeProps> {}\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n recipe: dateRangePickerSlotRecipe,\n});\n\n/**\n * Root component that provides the styling context for the DateRangePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateRangePickerRootSlot = withProvider<\n HTMLDivElement,\n DateRangePickerRootProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput and trigger button.\n */\nexport const DateRangePickerGroupSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the trigger button that opens the calendar popover.\n */\nexport const DateRangePickerTriggerSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"trigger\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DateRangePickerPopoverSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DateRangePickerCalendarSlot = withContext<\n HTMLDivElement,\n HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DateRangePickerCalendarHeaderSlot = withContext<\n HTMLElement,\n HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DateRangePickerCalendarGridSlot = withContext<\n HTMLTableElement,\n HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DateRangePickerCalendarCellSlot = withContext<\n HTMLTableCellElement,\n HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport { DateRangePickerStateContext } from \"react-aria-components\";\nimport type { DateRangePickerTimeInputProps } from \"../date-range-picker.types\";\n\nexport const DateRangePickerTimeInput = ({\n hideTimeZone,\n hourCycle,\n}: DateRangePickerTimeInputProps) => {\n const { locale } = useLocale();\n const dateRangePickerState = useContext(DateRangePickerStateContext);\n const { granularity, value } = dateRangePickerState!;\n const timeInputRef = useRef<HTMLDivElement>(null);\n const previousValueRef = useRef(value);\n\n // do not show up to the party if you're not invited\n if (granularity === \"day\") {\n return null;\n }\n\n // DateRangePicker-specific: Focus the time input when date range changes (user selects dates from calendar)\n useEffect(() => {\n // DateRangePicker-specific: Check if date range changed by comparing start and end dates\n const hasValueChanged =\n (value?.start &&\n previousValueRef.current?.start?.compare(value.start) !== 0) ||\n (value?.end && previousValueRef.current?.end?.compare(value.end) !== 0);\n\n if (hasValueChanged) {\n // Small delay to ensure the DOM is ready\n setTimeout(() => {\n // Find the first focusable segment within the time input container\n const container = timeInputRef.current;\n if (container) {\n const firstSegment = container.querySelector(\n '[role=\"spinbutton\"]'\n ) as HTMLElement;\n\n if (firstSegment) {\n firstSegment.focus();\n }\n }\n }, 50);\n }\n\n // DateRangePicker-specific: Update previous value reference for range comparison\n previousValueRef.current = value;\n }, [value]);\n\n return (\n <Flex\n ref={timeInputRef}\n borderTop=\"solid-25\"\n borderColor=\"neutral.3\"\n py=\"300\"\n px=\"400\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap=\"200\"\n >\n {/* DateRangePicker-specific: Start DateInput with separate label */}\n <Flex alignItems=\"center\" gap=\"200\">\n {/* TODO: translate hardcoded string */}\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n Start time\n </Text>\n <TimeInput\n slot=\"startTimeInput\"\n locale={locale}\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n\n {/* DateRangePicker-specific: End DateInput with separate label */}\n <Flex alignItems=\"center\" gap=\"200\">\n {/* TODO: translate hardcoded string */}\n <Text\n textStyle=\"xs\"\n fontWeight=\"500\"\n color=\"neutral.12\"\n minWidth=\"fit-content\"\n >\n End time\n </Text>\n <TimeInput\n slot=\"endTimeInput\"\n locale={locale}\n variant=\"ghost\"\n size=\"sm\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Flex>\n </Flex>\n );\n};\n","import { useContext, type ReactNode } from \"react\";\nimport {\n Provider,\n ButtonContext,\n DateRangePickerStateContext,\n TimeFieldContext,\n useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\n\nexport const DateRangePickerCustomContext = ({\n children,\n}: {\n children: ReactNode;\n}) => {\n const buttonContext = useSlottedContext(ButtonContext) || {};\n const dateRangePickerState = useContext(DateRangePickerStateContext);\n\n // DateRangePicker-specific: Check if all 6 segments (start: day, month, year; end: day, month, year) have values\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const hasCompleteRangeDate = (date: any) =>\n date?.day && date?.month && date?.year;\n\n const incompleteValue =\n !dateRangePickerState?.value ||\n !hasCompleteRangeDate(dateRangePickerState.value.start) ||\n !hasCompleteRangeDate(dateRangePickerState.value.end);\n\n const { granularity } = dateRangePickerState!;\n\n // DateRangePicker-specific: Extract time values from start and end dates separately\n const startTimeValue =\n dateRangePickerState?.value?.start &&\n \"hour\" in dateRangePickerState.value.start\n ? dateRangePickerState.value.start\n : null;\n const endTimeValue =\n dateRangePickerState?.value?.end && \"hour\" in dateRangePickerState.value.end\n ? dateRangePickerState.value.end\n : null;\n\n // Try to get disabled state from the button context\n const isDateRangePickerDisabled = buttonContext?.isDisabled;\n\n // Generate default aria-label based on granularity if not provided\n const getDefaultTimeInputAriaLabel = (type: \"start\" | \"end\") => {\n const prefix = type === \"start\" ? \"Start\" : \"End\";\n switch (granularity) {\n case \"hour\":\n return `${prefix} time (hour)`;\n case \"minute\":\n return `${prefix} time (hour and minute)`;\n case \"second\":\n return `${prefix} time (hour, minute, and second)`;\n default:\n return `${prefix} time`;\n }\n };\n\n /**\n * Button slots\n * ================================\n */\n const buttonSlots = {\n /** toggles the calendar popover */\n calendarToggle: {\n ...buttonContext,\n onPress: (event: PressEvent) => {\n // Ensure any active input (e.g., date picker segment) loses focus\n // because blurring the input will close the popover if it's open (or was just opened)\n const activeElement = document?.activeElement as HTMLElement | null;\n\n if (activeElement) {\n activeElement.blur();\n }\n\n buttonContext.onPress?.(event);\n },\n },\n /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n clear: {\n // DateRangePicker-specific: Clear both start and end values\n onPress: () => dateRangePickerState?.setValue(null),\n \"aria-label\": \"Clear input value\",\n isDisabled: isDateRangePickerDisabled,\n // Hide the button when there's no value\n style: incompleteValue ? { display: \"none\" } : undefined,\n \"aria-hidden\": incompleteValue ? true : undefined,\n },\n };\n\n /**\n * TimeInput slots\n * ================================\n */\n\n // DateRangePicker-specific: Separate time input slots for start and end times\n const timeInputSlots = {\n startTimeInput: {\n value: startTimeValue,\n onChange: (value: TimeValue | null) => {\n if (value !== null && dateRangePickerState?.value?.start) {\n // DateRangePicker-specific: Update the start date with the new time\n const currentValue = dateRangePickerState.value;\n const startDate = currentValue.start;\n const endDate = currentValue.end;\n if (startDate && endDate) {\n const newStartDate = startDate.set({\n hour: value.hour,\n minute: value.minute || 0,\n second: value.second || 0,\n millisecond: value.millisecond || 0,\n });\n\n dateRangePickerState.setValue({\n start: newStartDate,\n end: endDate,\n });\n }\n }\n },\n granularity: granularity === \"day\" ? undefined : granularity,\n \"aria-label\": getDefaultTimeInputAriaLabel(\"start\"),\n },\n endTimeInput: {\n value: endTimeValue,\n onChange: (value: TimeValue | null) => {\n if (value !== null && dateRangePickerState?.value?.end) {\n // DateRangePicker-specific: Update the end date with the new time\n const currentValue = dateRangePickerState.value;\n const startDate = currentValue.start;\n const endDate = currentValue.end;\n if (startDate && endDate) {\n const newEndDate = endDate.set({\n hour: value.hour,\n minute: value.minute || 0,\n second: value.second || 0,\n millisecond: value.millisecond || 0,\n });\n\n dateRangePickerState.setValue({\n start: startDate,\n end: newEndDate,\n });\n }\n }\n },\n granularity: granularity === \"day\" ? undefined : granularity,\n \"aria-label\": getDefaultTimeInputAriaLabel(\"end\"),\n },\n };\n\n return (\n <Provider\n values={[\n [\n ButtonContext,\n {\n slots: buttonSlots,\n },\n ],\n [TimeFieldContext, { slots: timeInputSlots }],\n ]}\n >\n {children}\n </Provider>\n );\n};\n","import {\n DateRangePickerRootSlot,\n DateRangePickerGroupSlot,\n DateRangePickerTriggerSlot,\n DateRangePickerPopoverSlot,\n DateRangePickerCalendarSlot,\n} from \"./date-range-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n DateRangePicker as ReactAriaDateRangePicker,\n Group,\n Popover,\n Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react\";\nimport { dateRangePickerSlotRecipe } from \"./date-range-picker.recipe\";\nimport type { DateRangePickerProps } from \"./date-range-picker.types\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\nimport { DateInput, RangeCalendar, IconButton, Text } from \"@/components\";\nimport { DateRangePickerTimeInput } from \"./components/date-range-picker.time-input\";\nimport { DateRangePickerCustomContext } from \"./components/date-range-picker.custom-context\";\n\n/**\n * DateRangePicker\n * ============================================================\n * Combines a DateInput with a RangeCalendar popover for date range selection.\n * Users can either type a date range directly or select from the calendar.\n */\nexport const DateRangePicker = (props: DateRangePickerProps) => {\n // Forward hideTimeZone and hourCycle to child components (footer time inputs)\n const { granularity = \"day\", hideTimeZone, hourCycle } = props;\n const recipe = useSlotRecipe({ recipe: dateRangePickerSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n // Extract size and variant from recipe props to pass to DateInputs\n const { size = \"md\" } = recipeProps;\n\n // the size of the buttons overlaying the input\n const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n // When granularity is \"day\", use the prop value (defaults to true if not provided)\n // For other granularities (time-based), force to false so users can set both date and time\n const shouldCloseOnSelect =\n granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n return (\n <DateRangePickerRootSlot {...recipeProps} {...styleProps} asChild>\n <ReactAriaDateRangePicker\n {...otherProps}\n shouldCloseOnSelect={shouldCloseOnSelect}\n >\n <DateRangePickerCustomContext>\n <DateRangePickerGroupSlot asChild>\n <Group>\n <DateInput\n slot=\"start\"\n size={size}\n variant=\"plain\"\n width=\"auto\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n <Text\n as=\"span\"\n px=\"150\"\n color=\"neutral.11\"\n userSelect=\"none\"\n aria-hidden=\"true\"\n slot={null}\n >\n –\n </Text>\n <DateInput\n slot=\"end\"\n size={size}\n variant=\"plain\"\n width=\"auto\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n <DateRangePickerTriggerSlot>\n {/* @ts-expect-error react aria is adding the aria-label prop */}\n <IconButton\n tone=\"primary\"\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"clear\"\n >\n <Close />\n </IconButton>\n {/* @ts-expect-error react aria is adding the aria-label prop */}\n <IconButton\n tone=\"primary\"\n variant=\"ghost\"\n size={overlayButtonSize}\n slot=\"calendarToggle\"\n >\n <CalendarMonth />\n </IconButton>\n </DateRangePickerTriggerSlot>\n </Group>\n </DateRangePickerGroupSlot>\n <DateRangePickerPopoverSlot asChild>\n <Popover placement=\"bottom end\">\n <Dialog>\n <DateRangePickerCalendarSlot>\n <RangeCalendar />\n </DateRangePickerCalendarSlot>\n <DateRangePickerTimeInput\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n />\n </Dialog>\n </Popover>\n </DateRangePickerPopoverSlot>\n </DateRangePickerCustomContext>\n </ReactAriaDateRangePicker>\n </DateRangePickerRootSlot>\n );\n};\n\nDateRangePicker.displayName = \"DateRangePicker\";\n"],"names":["withProvider","withContext","createSlotRecipeContext","dateRangePickerSlotRecipe","DateRangePickerRootSlot","DateRangePickerGroupSlot","DateRangePickerTriggerSlot","DateRangePickerPopoverSlot","DateRangePickerCalendarSlot","DateRangePickerTimeInput","hideTimeZone","hourCycle","locale","useLocale","dateRangePickerState","useContext","DateRangePickerStateContext","granularity","value","timeInputRef","useRef","previousValueRef","useEffect","container","firstSegment","jsxs","Flex","jsx","Text","TimeInput","DateRangePickerCustomContext","children","buttonContext","useSlottedContext","ButtonContext","hasCompleteRangeDate","date","incompleteValue","startTimeValue","endTimeValue","isDateRangePickerDisabled","getDefaultTimeInputAriaLabel","type","prefix","buttonSlots","event","activeElement","timeInputSlots","currentValue","startDate","endDate","newStartDate","newEndDate","Provider","TimeFieldContext","DateRangePicker","props","recipe","useSlotRecipe","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","size","overlayButtonSize","shouldCloseOnSelect","ReactAriaDateRangePicker","Group","DateInput","IconButton","Close","CalendarMonth","Popover","Dialog","RangeCalendar"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-C1HRMUcF.es.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as ChakraDialog, Portal } from \"@chakra-ui/react\";\n\ninterface DialogContentProps extends ChakraDialog.ContentProps {\n portalled?: boolean;\n portalRef?: React.RefObject<HTMLElement>;\n backdrop?: boolean;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DialogContent = function DialogContent(props: DialogContentProps) {\n const {\n children,\n portalled = true,\n portalRef,\n backdrop = true,\n ref,\n ...rest\n } = props;\n\n return (\n <Portal disabled={!portalled} container={portalRef}>\n {backdrop && <ChakraDialog.Backdrop />}\n <ChakraDialog.Positioner>\n <ChakraDialog.Content ref={ref} {...rest} asChild={false}>\n {children}\n </ChakraDialog.Content>\n </ChakraDialog.Positioner>\n </Portal>\n );\n};\n\n// Create a type-safe composite object with explicit component definitions\ninterface DialogComponents {\n Root: typeof ChakraDialog.Root;\n Trigger: typeof ChakraDialog.Trigger;\n Content: typeof DialogContent;\n Backdrop: typeof ChakraDialog.Backdrop;\n Positioner: typeof ChakraDialog.Positioner;\n Title: typeof ChakraDialog.Title;\n Description: typeof ChakraDialog.Description;\n Body: typeof ChakraDialog.Body;\n Footer: typeof ChakraDialog.Footer;\n Header: typeof ChakraDialog.Header;\n CloseTrigger: typeof ChakraDialog.CloseTrigger;\n ActionTrigger: typeof ChakraDialog.ActionTrigger;\n}\n\n/**\n * # Dialog\n
|
|
1
|
+
{"version":3,"file":"dialog-C1HRMUcF.es.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as ChakraDialog, Portal } from \"@chakra-ui/react\";\n\ninterface DialogContentProps extends ChakraDialog.ContentProps {\n portalled?: boolean;\n portalRef?: React.RefObject<HTMLElement>;\n backdrop?: boolean;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DialogContent = function DialogContent(props: DialogContentProps) {\n const {\n children,\n portalled = true,\n portalRef,\n backdrop = true,\n ref,\n ...rest\n } = props;\n\n return (\n <Portal disabled={!portalled} container={portalRef}>\n {backdrop && <ChakraDialog.Backdrop />}\n <ChakraDialog.Positioner>\n <ChakraDialog.Content ref={ref} {...rest} asChild={false}>\n {children}\n </ChakraDialog.Content>\n </ChakraDialog.Positioner>\n </Portal>\n );\n};\n\n// Create a type-safe composite object with explicit component definitions\ninterface DialogComponents {\n Root: typeof ChakraDialog.Root;\n Trigger: typeof ChakraDialog.Trigger;\n Content: typeof DialogContent;\n Backdrop: typeof ChakraDialog.Backdrop;\n Positioner: typeof ChakraDialog.Positioner;\n Title: typeof ChakraDialog.Title;\n Description: typeof ChakraDialog.Description;\n Body: typeof ChakraDialog.Body;\n Footer: typeof ChakraDialog.Footer;\n Header: typeof ChakraDialog.Header;\n CloseTrigger: typeof ChakraDialog.CloseTrigger;\n ActionTrigger: typeof ChakraDialog.ActionTrigger;\n}\n\n/**\n * # Dialog\n *\n * displays a dialog\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/feedback/dialog}\n *\n * @experimental This component is experimental and may change or be removed in future versions.\n */\n// Export the Dialog composite with proper typing\nexport const Dialog: DialogComponents = {\n Root: ChakraDialog.Root,\n Trigger: ChakraDialog.Trigger,\n Content: DialogContent,\n Backdrop: ChakraDialog.Backdrop,\n Positioner: ChakraDialog.Positioner,\n Title: ChakraDialog.Title,\n Description: ChakraDialog.Description,\n Body: ChakraDialog.Body,\n Footer: ChakraDialog.Footer,\n Header: ChakraDialog.Header,\n CloseTrigger: ChakraDialog.CloseTrigger,\n ActionTrigger: ChakraDialog.ActionTrigger,\n};\n"],"names":["DialogContent","props","children","portalled","portalRef","backdrop","ref","rest","Portal","jsx","ChakraDialog","Dialog"],"mappings":";;AASA,MAAMA,IAAgB,SAAuBC,GAA2B;AACtE,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDN;AAEJ,2BACGO,GAAA,EAAO,UAAU,CAACL,GAAW,WAAWC,GACtC,UAAA;AAAA,IAAAC,KAAY,gBAAAI,EAACC,EAAa,UAAb,CAAA,CAAsB;AAAA,IACpC,gBAAAD,EAACC,EAAa,YAAb,EACC,4BAACA,EAAa,SAAb,EAAqB,KAAAJ,GAAW,GAAGC,GAAM,SAAS,IAChD,UAAAL,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,GA4BaS,IAA2B;AAAA,EACtC,MAAMD,EAAa;AAAA,EACnB,SAASA,EAAa;AAAA,EACtB,SAASV;AAAA,EACT,UAAUU,EAAa;AAAA,EACvB,YAAYA,EAAa;AAAA,EACzB,OAAOA,EAAa;AAAA,EACpB,aAAaA,EAAa;AAAA,EAC1B,MAAMA,EAAa;AAAA,EACnB,QAAQA,EAAa;AAAA,EACrB,QAAQA,EAAa;AAAA,EACrB,cAAcA,EAAa;AAAA,EAC3B,eAAeA,EAAa;AAC9B;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-amEwvIoM.cjs.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as ChakraDialog, Portal } from \"@chakra-ui/react\";\n\ninterface DialogContentProps extends ChakraDialog.ContentProps {\n portalled?: boolean;\n portalRef?: React.RefObject<HTMLElement>;\n backdrop?: boolean;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DialogContent = function DialogContent(props: DialogContentProps) {\n const {\n children,\n portalled = true,\n portalRef,\n backdrop = true,\n ref,\n ...rest\n } = props;\n\n return (\n <Portal disabled={!portalled} container={portalRef}>\n {backdrop && <ChakraDialog.Backdrop />}\n <ChakraDialog.Positioner>\n <ChakraDialog.Content ref={ref} {...rest} asChild={false}>\n {children}\n </ChakraDialog.Content>\n </ChakraDialog.Positioner>\n </Portal>\n );\n};\n\n// Create a type-safe composite object with explicit component definitions\ninterface DialogComponents {\n Root: typeof ChakraDialog.Root;\n Trigger: typeof ChakraDialog.Trigger;\n Content: typeof DialogContent;\n Backdrop: typeof ChakraDialog.Backdrop;\n Positioner: typeof ChakraDialog.Positioner;\n Title: typeof ChakraDialog.Title;\n Description: typeof ChakraDialog.Description;\n Body: typeof ChakraDialog.Body;\n Footer: typeof ChakraDialog.Footer;\n Header: typeof ChakraDialog.Header;\n CloseTrigger: typeof ChakraDialog.CloseTrigger;\n ActionTrigger: typeof ChakraDialog.ActionTrigger;\n}\n\n/**\n * # Dialog\n
|
|
1
|
+
{"version":3,"file":"dialog-amEwvIoM.cjs.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as ChakraDialog, Portal } from \"@chakra-ui/react\";\n\ninterface DialogContentProps extends ChakraDialog.ContentProps {\n portalled?: boolean;\n portalRef?: React.RefObject<HTMLElement>;\n backdrop?: boolean;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DialogContent = function DialogContent(props: DialogContentProps) {\n const {\n children,\n portalled = true,\n portalRef,\n backdrop = true,\n ref,\n ...rest\n } = props;\n\n return (\n <Portal disabled={!portalled} container={portalRef}>\n {backdrop && <ChakraDialog.Backdrop />}\n <ChakraDialog.Positioner>\n <ChakraDialog.Content ref={ref} {...rest} asChild={false}>\n {children}\n </ChakraDialog.Content>\n </ChakraDialog.Positioner>\n </Portal>\n );\n};\n\n// Create a type-safe composite object with explicit component definitions\ninterface DialogComponents {\n Root: typeof ChakraDialog.Root;\n Trigger: typeof ChakraDialog.Trigger;\n Content: typeof DialogContent;\n Backdrop: typeof ChakraDialog.Backdrop;\n Positioner: typeof ChakraDialog.Positioner;\n Title: typeof ChakraDialog.Title;\n Description: typeof ChakraDialog.Description;\n Body: typeof ChakraDialog.Body;\n Footer: typeof ChakraDialog.Footer;\n Header: typeof ChakraDialog.Header;\n CloseTrigger: typeof ChakraDialog.CloseTrigger;\n ActionTrigger: typeof ChakraDialog.ActionTrigger;\n}\n\n/**\n * # Dialog\n *\n * displays a dialog\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/feedback/dialog}\n *\n * @experimental This component is experimental and may change or be removed in future versions.\n */\n// Export the Dialog composite with proper typing\nexport const Dialog: DialogComponents = {\n Root: ChakraDialog.Root,\n Trigger: ChakraDialog.Trigger,\n Content: DialogContent,\n Backdrop: ChakraDialog.Backdrop,\n Positioner: ChakraDialog.Positioner,\n Title: ChakraDialog.Title,\n Description: ChakraDialog.Description,\n Body: ChakraDialog.Body,\n Footer: ChakraDialog.Footer,\n Header: ChakraDialog.Header,\n CloseTrigger: ChakraDialog.CloseTrigger,\n ActionTrigger: ChakraDialog.ActionTrigger,\n};\n"],"names":["DialogContent","props","children","portalled","portalRef","backdrop","ref","rest","Portal","jsx","ChakraDialog","Dialog"],"mappings":"gFASMA,EAAgB,SAAuBC,EAA2B,CACtE,KAAM,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EACA,SAAAC,EAAW,GACX,IAAAC,EACA,GAAGC,CAAA,EACDN,EAEJ,cACGO,EAAAA,OAAA,CAAO,SAAU,CAACL,EAAW,UAAWC,EACtC,SAAA,CAAAC,GAAYI,EAAAA,IAACC,SAAa,SAAb,CAAA,CAAsB,EACpCD,EAAAA,IAACC,EAAAA,OAAa,WAAb,CACC,eAACA,EAAAA,OAAa,QAAb,CAAqB,IAAAJ,EAAW,GAAGC,EAAM,QAAS,GAChD,SAAAL,EACH,CAAA,CACF,CAAA,EACF,CAEJ,EA4BaS,EAA2B,CACtC,KAAMD,EAAAA,OAAa,KACnB,QAASA,EAAAA,OAAa,QACtB,QAASV,EACT,SAAUU,EAAAA,OAAa,SACvB,WAAYA,EAAAA,OAAa,WACzB,MAAOA,EAAAA,OAAa,MACpB,YAAaA,EAAAA,OAAa,YAC1B,KAAMA,EAAAA,OAAa,KACnB,OAAQA,EAAAA,OAAa,OACrB,OAAQA,EAAAA,OAAa,OACrB,aAAcA,EAAAA,OAAa,aAC3B,cAAeA,EAAAA,OAAa,aAC9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field-C9PpQYF0.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\";\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\";\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-C9PpQYF0.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\";\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\";\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field-CBFyTAo8.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\";\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\";\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-CBFyTAo8.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\";\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\";\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-CugcJxRP.es.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import {\n Grid as ChakraGrid,\n GridItem,\n type GridProps as ChakraGridProps,\n} from \"@chakra-ui/react\";\n\n/**\n * # Grid\n
|
|
1
|
+
{"version":3,"file":"grid-CugcJxRP.es.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import {\n Grid as ChakraGrid,\n GridItem,\n type GridProps as ChakraGridProps,\n} from \"@chakra-ui/react\";\n\n/**\n * # Grid\n *\n * An easily customizable Grid component, re-exported from Chakra UI, that provides a consistent layout structure across different products.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}\n */\nexport interface GridProps extends ChakraGridProps {\n children?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst GridComponent = (props: GridProps) => {\n const { ref, ...restProps } = props;\n return <ChakraGrid ref={ref} {...restProps} />;\n};\n\nGridComponent.displayName = \"Grid\";\n\nexport const Grid = Object.assign(GridComponent, {\n Item: GridItem,\n});\n"],"names":["GridComponent","props","ref","restProps","jsx","ChakraGrid","Grid","GridItem"],"mappings":";;AAkBA,MAAMA,IAAgB,CAACC,MAAqB;AAC1C,QAAM,EAAE,KAAAC,GAAK,GAAGC,EAAA,IAAcF;AAC9B,SAAO,gBAAAG,EAACC,GAAA,EAAW,KAAAH,GAAW,GAAGC,EAAA,CAAW;AAC9C;AAEAH,EAAc,cAAc;AAErB,MAAMM,IAAO,uBAAO,OAAON,GAAe;AAAA,EAC/C,MAAMO;AACR,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-xr2A-OqD.cjs.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import {\n Grid as ChakraGrid,\n GridItem,\n type GridProps as ChakraGridProps,\n} from \"@chakra-ui/react\";\n\n/**\n * # Grid\n
|
|
1
|
+
{"version":3,"file":"grid-xr2A-OqD.cjs.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import {\n Grid as ChakraGrid,\n GridItem,\n type GridProps as ChakraGridProps,\n} from \"@chakra-ui/react\";\n\n/**\n * # Grid\n *\n * An easily customizable Grid component, re-exported from Chakra UI, that provides a consistent layout structure across different products.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}\n */\nexport interface GridProps extends ChakraGridProps {\n children?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n}\n\nconst GridComponent = (props: GridProps) => {\n const { ref, ...restProps } = props;\n return <ChakraGrid ref={ref} {...restProps} />;\n};\n\nGridComponent.displayName = \"Grid\";\n\nexport const Grid = Object.assign(GridComponent, {\n Item: GridItem,\n});\n"],"names":["GridComponent","props","ref","restProps","jsx","ChakraGrid","Grid","GridItem"],"mappings":"gFAkBMA,EAAiBC,GAAqB,CAC1C,KAAM,CAAE,IAAAC,EAAK,GAAGC,CAAA,EAAcF,EAC9B,OAAOG,EAAAA,IAACC,EAAAA,KAAA,CAAW,IAAAH,EAAW,GAAGC,CAAA,CAAW,CAC9C,EAEAH,EAAc,YAAc,OAErB,MAAMM,EAAO,OAAO,OAAON,EAAe,CAC/C,KAAMO,EAAAA,QACR,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-DKR1JLAy.es.js","sources":["../../src/components/group/group.slots.tsx","../../src/components/group/group.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\nimport { Group as RaGroup } from \"react-aria-components\";\nimport { groupRecipe } from \"./group.recipe\";\n\nconst { withContext } = createRecipeContext({\n recipe: groupRecipe,\n});\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n */\ninterface GroupRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\nexport interface GroupSlotProps\n extends HTMLChakraProps<\"div\", GroupRecipeProps> {}\n\n/**\n * Slot component that provides the styling context for the Group component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const GroupSlot = withContext<typeof RaGroup, GroupSlotProps>(RaGroup);\n","import { GroupSlot } from \"./group.slots\";\nimport type { GroupComponent } from \"./group.types\";\n\nexport const Group: GroupComponent = (props) => {\n const { ref, children, ...rest } = props;\n return (\n <GroupSlot ref={ref} {...rest}>\n {children}\n </GroupSlot>\n );\n};\n"],"names":["withContext","createRecipeContext","groupRecipe","GroupSlot","RaGroup","Group","props","ref","children","rest","jsx"],"mappings":";;;;AASA,MAAM,EAAE,aAAAA,EAAA,IAAgB,gBAAAC,EAAoB;AAAA,EAC1C,QAAQC;AACV,CAAC,
|
|
1
|
+
{"version":3,"file":"group-DKR1JLAy.es.js","sources":["../../src/components/group/group.slots.tsx","../../src/components/group/group.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\nimport { Group as RaGroup } from \"react-aria-components\";\nimport { groupRecipe } from \"./group.recipe\";\n\nconst { withContext } = createRecipeContext({\n recipe: groupRecipe,\n});\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n */\ninterface GroupRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface GroupSlotProps\n extends HTMLChakraProps<\"div\", GroupRecipeProps> {}\n\n/**\n * Slot component that provides the styling context for the Group component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const GroupSlot = withContext<typeof RaGroup, GroupSlotProps>(RaGroup);\n","import { GroupSlot } from \"./group.slots\";\nimport type { GroupComponent } from \"./group.types\";\n\nexport const Group: GroupComponent = (props) => {\n const { ref, children, ...rest } = props;\n return (\n <GroupSlot ref={ref} {...rest}>\n {children}\n </GroupSlot>\n );\n};\n"],"names":["withContext","createRecipeContext","groupRecipe","GroupSlot","RaGroup","Group","props","ref","children","rest","jsx"],"mappings":";;;;AASA,MAAM,EAAE,aAAAA,EAAA,IAAgB,gBAAAC,EAAoB;AAAA,EAC1C,QAAQC;AACV,CAAC,GAqBYC,IAAY,gBAAAH,EAA4CI,CAAO,GC7B/DC,IAAwB,CAACC,MAAU;AAC9C,QAAM,EAAE,KAAAC,GAAK,UAAAC,GAAU,GAAGC,MAASH;AACnC,SACE,gBAAAI,EAACP,GAAA,EAAU,KAAAI,GAAW,GAAGE,GACtB,UAAAD,GACH;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-DtSrr9I-.cjs.js","sources":["../../src/components/group/group.slots.tsx","../../src/components/group/group.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\nimport { Group as RaGroup } from \"react-aria-components\";\nimport { groupRecipe } from \"./group.recipe\";\n\nconst { withContext } = createRecipeContext({\n recipe: groupRecipe,\n});\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n */\ninterface GroupRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\nexport interface GroupSlotProps\n extends HTMLChakraProps<\"div\", GroupRecipeProps> {}\n\n/**\n * Slot component that provides the styling context for the Group component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const GroupSlot = withContext<typeof RaGroup, GroupSlotProps>(RaGroup);\n","import { GroupSlot } from \"./group.slots\";\nimport type { GroupComponent } from \"./group.types\";\n\nexport const Group: GroupComponent = (props) => {\n const { ref, children, ...rest } = props;\n return (\n <GroupSlot ref={ref} {...rest}>\n {children}\n </GroupSlot>\n );\n};\n"],"names":["withContext","createRecipeContext","groupRecipe","GroupSlot","RaGroup","Group","props","ref","children","rest","jsx"],"mappings":"iKASM,CAAE,YAAAA,CAAA,EAAgBC,sBAAoB,CAC1C,OAAQC,EAAAA,WACV,CAAC,
|
|
1
|
+
{"version":3,"file":"group-DtSrr9I-.cjs.js","sources":["../../src/components/group/group.slots.tsx","../../src/components/group/group.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\nimport { Group as RaGroup } from \"react-aria-components\";\nimport { groupRecipe } from \"./group.recipe\";\n\nconst { withContext } = createRecipeContext({\n recipe: groupRecipe,\n});\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the div element.\n */\ninterface GroupRecipeProps extends RecipeProps<\"div\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface GroupSlotProps\n extends HTMLChakraProps<\"div\", GroupRecipeProps> {}\n\n/**\n * Slot component that provides the styling context for the Group component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const GroupSlot = withContext<typeof RaGroup, GroupSlotProps>(RaGroup);\n","import { GroupSlot } from \"./group.slots\";\nimport type { GroupComponent } from \"./group.types\";\n\nexport const Group: GroupComponent = (props) => {\n const { ref, children, ...rest } = props;\n return (\n <GroupSlot ref={ref} {...rest}>\n {children}\n </GroupSlot>\n );\n};\n"],"names":["withContext","createRecipeContext","groupRecipe","GroupSlot","RaGroup","Group","props","ref","children","rest","jsx"],"mappings":"iKASM,CAAE,YAAAA,CAAA,EAAgBC,sBAAoB,CAC1C,OAAQC,EAAAA,WACV,CAAC,EAqBYC,EAAYH,EAA4CI,2CAAO,EC7B/DC,EAAyBC,GAAU,CAC9C,KAAM,CAAE,IAAAC,EAAK,SAAAC,EAAU,GAAGC,GAASH,EACnC,OACEI,EAAAA,IAACP,EAAA,CAAU,IAAAI,EAAW,GAAGE,EACtB,SAAAD,EACH,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-BFNYuilh.es.js","sources":["../../src/components/icon/icon.recipe.tsx","../../src/components/icon/icon.slots.tsx","../../src/components/icon/icon.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the Icon component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const iconRecipe = defineRecipe({\n className: \"nimbus-icon\",\n base: {\n display: \"inline-block\",\n },\n\n variants: {\n /**\n * allows applying a predefined size to the icon\n */\n size: {\n \"2xs\": { boxSize: \"600\" },\n xs: { boxSize: \"800\" },\n sm: { boxSize: \"900\" },\n md: { boxSize: \"1000\" },\n lg: { boxSize: \"1200\" },\n xl: { boxSize: \"1400\" },\n },\n },\n});\n","import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { iconRecipe } from \"./icon.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface IconRecipeProps extends RecipeProps<\"svg\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\nexport interface IconRootSlotProps\n extends HTMLChakraProps<\"svg\", IconRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: iconRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const IconRootSlot = withContext<SVGSVGElement, IconRootSlotProps>(\n \"svg\"\n);\n","import { IconRootSlot } from \"./icon.slots\";\nimport type { IconProps } from \"./icon.types\";\n\n/**\n * # Icon\n
|
|
1
|
+
{"version":3,"file":"icon-BFNYuilh.es.js","sources":["../../src/components/icon/icon.recipe.tsx","../../src/components/icon/icon.slots.tsx","../../src/components/icon/icon.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the Icon component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const iconRecipe = defineRecipe({\n className: \"nimbus-icon\",\n base: {\n display: \"inline-block\",\n },\n\n variants: {\n /**\n * allows applying a predefined size to the icon\n */\n size: {\n \"2xs\": { boxSize: \"600\" },\n xs: { boxSize: \"800\" },\n sm: { boxSize: \"900\" },\n md: { boxSize: \"1000\" },\n lg: { boxSize: \"1200\" },\n xl: { boxSize: \"1400\" },\n },\n },\n});\n","import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { iconRecipe } from \"./icon.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface IconRecipeProps extends RecipeProps<\"svg\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface IconRootSlotProps\n extends HTMLChakraProps<\"svg\", IconRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: iconRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const IconRootSlot = withContext<SVGSVGElement, IconRootSlotProps>(\n \"svg\"\n);\n","import { IconRootSlot } from \"./icon.slots\";\nimport type { IconProps } from \"./icon.types\";\n\n/**\n * # Icon\n *\n * displays icon components\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/media/icon}\n */\nexport const Icon = (props: IconProps) => {\n const { ref, ...restProps } = props;\n return <IconRootSlot ref={ref} asChild={!restProps.as} {...restProps} />;\n};\n\nIcon.displayName = \"Icon\";\n"],"names":["iconRecipe","defineRecipe","withContext","createRecipeContext","IconRootSlot","Icon","props","ref","restProps","jsx"],"mappings":";;AAMO,MAAMA,IAAa,gBAAAC,EAAa;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,SAAS;AAAA,EAAA;AAAA,EAGX,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,MAAM;AAAA,MACJ,OAAO,EAAE,SAAS,MAAA;AAAA,MAClB,IAAI,EAAE,SAAS,MAAA;AAAA,MACf,IAAI,EAAE,SAAS,MAAA;AAAA,MACf,IAAI,EAAE,SAAS,OAAA;AAAA,MACf,IAAI,EAAE,SAAS,OAAA;AAAA,MACf,IAAI,EAAE,SAAS,OAAA;AAAA,IAAO;AAAA,EACxB;AAEJ,CAAC,GCDK,EAAE,aAAAC,EAAA,IAAgB,gBAAAC,EAAoB,EAAE,QAAQH,GAAY,GAMrDI,IAAe,gBAAAF;AAAA,EAC1B;AACF,GCtBaG,IAAO,CAACC,MAAqB;AACxC,QAAM,EAAE,KAAAC,GAAK,GAAGC,EAAA,IAAcF;AAC9B,SAAO,gBAAAG,EAACL,KAAa,KAAAG,GAAU,SAAS,CAACC,EAAU,IAAK,GAAGA,GAAW;AACxE;AAEAH,EAAK,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-D50i-dqv.cjs.js","sources":["../../src/components/icon/icon.recipe.tsx","../../src/components/icon/icon.slots.tsx","../../src/components/icon/icon.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the Icon component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const iconRecipe = defineRecipe({\n className: \"nimbus-icon\",\n base: {\n display: \"inline-block\",\n },\n\n variants: {\n /**\n * allows applying a predefined size to the icon\n */\n size: {\n \"2xs\": { boxSize: \"600\" },\n xs: { boxSize: \"800\" },\n sm: { boxSize: \"900\" },\n md: { boxSize: \"1000\" },\n lg: { boxSize: \"1200\" },\n xl: { boxSize: \"1400\" },\n },\n },\n});\n","import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { iconRecipe } from \"./icon.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface IconRecipeProps extends RecipeProps<\"svg\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\nexport interface IconRootSlotProps\n extends HTMLChakraProps<\"svg\", IconRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: iconRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const IconRootSlot = withContext<SVGSVGElement, IconRootSlotProps>(\n \"svg\"\n);\n","import { IconRootSlot } from \"./icon.slots\";\nimport type { IconProps } from \"./icon.types\";\n\n/**\n * # Icon\n
|
|
1
|
+
{"version":3,"file":"icon-D50i-dqv.cjs.js","sources":["../../src/components/icon/icon.recipe.tsx","../../src/components/icon/icon.slots.tsx","../../src/components/icon/icon.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the Icon component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const iconRecipe = defineRecipe({\n className: \"nimbus-icon\",\n base: {\n display: \"inline-block\",\n },\n\n variants: {\n /**\n * allows applying a predefined size to the icon\n */\n size: {\n \"2xs\": { boxSize: \"600\" },\n xs: { boxSize: \"800\" },\n sm: { boxSize: \"900\" },\n md: { boxSize: \"1000\" },\n lg: { boxSize: \"1200\" },\n xl: { boxSize: \"1400\" },\n },\n },\n});\n","import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { iconRecipe } from \"./icon.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface IconRecipeProps extends RecipeProps<\"svg\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface IconRootSlotProps\n extends HTMLChakraProps<\"svg\", IconRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: iconRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const IconRootSlot = withContext<SVGSVGElement, IconRootSlotProps>(\n \"svg\"\n);\n","import { IconRootSlot } from \"./icon.slots\";\nimport type { IconProps } from \"./icon.types\";\n\n/**\n * # Icon\n *\n * displays icon components\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/media/icon}\n */\nexport const Icon = (props: IconProps) => {\n const { ref, ...restProps } = props;\n return <IconRootSlot ref={ref} asChild={!restProps.as} {...restProps} />;\n};\n\nIcon.displayName = \"Icon\";\n"],"names":["iconRecipe","defineRecipe","withContext","createRecipeContext","IconRootSlot","Icon","props","ref","restProps","jsx"],"mappings":"gFAMaA,EAAaC,EAAAA,aAAa,CACrC,UAAW,cACX,KAAM,CACJ,QAAS,cAAA,EAGX,SAAU,CAIR,KAAM,CACJ,MAAO,CAAE,QAAS,KAAA,EAClB,GAAI,CAAE,QAAS,KAAA,EACf,GAAI,CAAE,QAAS,KAAA,EACf,GAAI,CAAE,QAAS,MAAA,EACf,GAAI,CAAE,QAAS,MAAA,EACf,GAAI,CAAE,QAAS,MAAA,CAAO,CACxB,CAEJ,CAAC,ECDK,CAAE,YAAAC,CAAA,EAAgBC,EAAAA,oBAAoB,CAAE,OAAQH,EAAY,EAMrDI,EAAeF,EAC1B,KACF,ECtBaG,EAAQC,GAAqB,CACxC,KAAM,CAAE,IAAAC,EAAK,GAAGC,CAAA,EAAcF,EAC9B,OAAOG,EAAAA,IAACL,GAAa,IAAAG,EAAU,QAAS,CAACC,EAAU,GAAK,GAAGA,EAAW,CACxE,EAEAH,EAAK,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button-BEaNe4rE.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
|
|
1
|
+
{"version":3,"file":"icon-button-BEaNe4rE.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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button-DqkVeZCx.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
|
|
1
|
+
{"version":3,"file":"icon-button-DqkVeZCx.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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-DCirAAnr.cjs.js","sources":["../../src/components/image/image.tsx"],"sourcesContent":["import {\n Image as ChakraImage,\n type ImageProps as ChakraImageProps,\n} from \"@chakra-ui/react\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ImageProps extends ChakraImageProps {}\n\n/**\n * # Image\n
|
|
1
|
+
{"version":3,"file":"image-DCirAAnr.cjs.js","sources":["../../src/components/image/image.tsx"],"sourcesContent":["import {\n Image as ChakraImage,\n type ImageProps as ChakraImageProps,\n} from \"@chakra-ui/react\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ImageProps extends ChakraImageProps {}\n\n/**\n * # Image\n *\n * A component to display images with support for fallback.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/media/image}\n */\nexport const Image = (props: ImageProps) => {\n return <ChakraImage {...props} />;\n};\n\nImage.displayName = \"Image\";\n"],"names":["Image","props","jsx","ChakraImage"],"mappings":"gFAeaA,EAASC,GACbC,MAACC,EAAAA,MAAA,CAAa,GAAGF,CAAA,CAAO,EAGjCD,EAAM,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-rXPA3shk.es.js","sources":["../../src/components/image/image.tsx"],"sourcesContent":["import {\n Image as ChakraImage,\n type ImageProps as ChakraImageProps,\n} from \"@chakra-ui/react\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ImageProps extends ChakraImageProps {}\n\n/**\n * # Image\n
|
|
1
|
+
{"version":3,"file":"image-rXPA3shk.es.js","sources":["../../src/components/image/image.tsx"],"sourcesContent":["import {\n Image as ChakraImage,\n type ImageProps as ChakraImageProps,\n} from \"@chakra-ui/react\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ImageProps extends ChakraImageProps {}\n\n/**\n * # Image\n *\n * A component to display images with support for fallback.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/media/image}\n */\nexport const Image = (props: ImageProps) => {\n return <ChakraImage {...props} />;\n};\n\nImage.displayName = \"Image\";\n"],"names":["Image","props","jsx","ChakraImage"],"mappings":";;AAeO,MAAMA,IAAQ,CAACC,MACb,gBAAAC,EAACC,GAAA,EAAa,GAAGF,EAAA,CAAO;AAGjCD,EAAM,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kbd-Bkhw9E6L.cjs.js","sources":["../../src/components/kbd/kbd.slots.ts","../../src/components/kbd/kbd.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { kbdRecipe } from \"./kbd.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface KbdRecipeProps extends RecipeProps<\"kbd\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\nexport interface KbdRootSlotProps\n extends HTMLChakraProps<\"kbd\", KbdRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: kbdRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const KbdRootSlot = withContext<HTMLElement, KbdRootSlotProps>(\"kbd\");\n","import { KeyboardContext, useContextProps } from \"react-aria-components\";\nimport { mergeRefs, type KbdProps as ChakraKbdProps } from \"@chakra-ui/react\";\nimport { useRef } from \"react\";\nimport type React from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { KbdRootSlot } from \"./kbd.slots\";\n\nexport interface KbdProps extends Omit<ChakraKbdProps, \"slot\"> {\n ref?: React.Ref<HTMLElement>;\n slot?: string | null | undefined;\n}\n\n/**\n * # Kbd\n
|
|
1
|
+
{"version":3,"file":"kbd-Bkhw9E6L.cjs.js","sources":["../../src/components/kbd/kbd.slots.ts","../../src/components/kbd/kbd.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { kbdRecipe } from \"./kbd.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface KbdRecipeProps extends RecipeProps<\"kbd\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface KbdRootSlotProps\n extends HTMLChakraProps<\"kbd\", KbdRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: kbdRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const KbdRootSlot = withContext<HTMLElement, KbdRootSlotProps>(\"kbd\");\n","import { KeyboardContext, useContextProps } from \"react-aria-components\";\nimport { mergeRefs, type KbdProps as ChakraKbdProps } from \"@chakra-ui/react\";\nimport { useRef } from \"react\";\nimport type React from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { KbdRootSlot } from \"./kbd.slots\";\n\nexport interface KbdProps extends Omit<ChakraKbdProps, \"slot\"> {\n ref?: React.Ref<HTMLElement>;\n slot?: string | null | undefined;\n}\n\n/**\n * # Kbd\n *\n * Renders a keyboard shortcut or key combination, styled for visual clarity.\n * Typically used to visually represent keyboard keys.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/typography/kbd}\n */\nexport const Kbd = ({ ref: forwardedRef, slot, ...props }: KbdProps) => {\n const localRef = useRef<HTMLElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n const [rest] = useContextProps(props, ref, KeyboardContext);\n\n return <KbdRootSlot ref={ref} slot={slot || undefined} {...rest} />;\n};\n"],"names":["withContext","createRecipeContext","kbdRecipe","KbdRootSlot","Kbd","forwardedRef","slot","props","localRef","useRef","ref","useObjectRef","mergeRefs","rest","useContextProps","KeyboardContext"],"mappings":"sQAwBM,CAAE,YAAAA,CAAA,EAAgBC,EAAAA,oBAAoB,CAAE,OAAQC,EAAAA,UAAW,EAMpDC,EAAcH,EAA2C,KAAK,ECV9DI,EAAM,CAAC,CAAE,IAAKC,EAAc,KAAAC,EAAM,GAAGC,KAAsB,CACtE,MAAMC,EAAWC,EAAAA,OAAoB,IAAI,EACnCC,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUJ,EAAUH,CAAY,CAAC,EACpD,CAACQ,CAAI,EAAIC,EAAAA,0CAAgBP,EAAOG,EAAKK,EAAAA,yCAAe,EAE1D,aAAQZ,EAAA,CAAY,IAAAO,EAAU,KAAMJ,GAAQ,OAAY,GAAGO,EAAM,CACnE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kbd-Gxvodc1U.es.js","sources":["../../src/components/kbd/kbd.slots.ts","../../src/components/kbd/kbd.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { kbdRecipe } from \"./kbd.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface KbdRecipeProps extends RecipeProps<\"kbd\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\nexport interface KbdRootSlotProps\n extends HTMLChakraProps<\"kbd\", KbdRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: kbdRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const KbdRootSlot = withContext<HTMLElement, KbdRootSlotProps>(\"kbd\");\n","import { KeyboardContext, useContextProps } from \"react-aria-components\";\nimport { mergeRefs, type KbdProps as ChakraKbdProps } from \"@chakra-ui/react\";\nimport { useRef } from \"react\";\nimport type React from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { KbdRootSlot } from \"./kbd.slots\";\n\nexport interface KbdProps extends Omit<ChakraKbdProps, \"slot\"> {\n ref?: React.Ref<HTMLElement>;\n slot?: string | null | undefined;\n}\n\n/**\n * # Kbd\n
|
|
1
|
+
{"version":3,"file":"kbd-Gxvodc1U.es.js","sources":["../../src/components/kbd/kbd.slots.ts","../../src/components/kbd/kbd.tsx"],"sourcesContent":["import {\n type HTMLChakraProps,\n type RecipeProps,\n type UnstyledProp,\n createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { kbdRecipe } from \"./kbd.recipe\";\n\n/**\n * Base recipe props interface that combines Chakra UI's recipe props\n * with the unstyled prop option for the svg element.\n */\ninterface KbdRecipeProps extends RecipeProps<\"kbd\">, UnstyledProp {}\n\n/**\n * Root props interface that extends Chakra's HTML props with our recipe props.\n * This creates a complete set of props for the root element, combining\n * HTML attributes, Chakra's styling system, and our custom recipe props.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface KbdRootSlotProps\n extends HTMLChakraProps<\"kbd\", KbdRecipeProps> {}\n\nconst { withContext } = createRecipeContext({ recipe: kbdRecipe });\n\n/**\n * Root component that provides the styling context for the Icon component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const KbdRootSlot = withContext<HTMLElement, KbdRootSlotProps>(\"kbd\");\n","import { KeyboardContext, useContextProps } from \"react-aria-components\";\nimport { mergeRefs, type KbdProps as ChakraKbdProps } from \"@chakra-ui/react\";\nimport { useRef } from \"react\";\nimport type React from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { KbdRootSlot } from \"./kbd.slots\";\n\nexport interface KbdProps extends Omit<ChakraKbdProps, \"slot\"> {\n ref?: React.Ref<HTMLElement>;\n slot?: string | null | undefined;\n}\n\n/**\n * # Kbd\n *\n * Renders a keyboard shortcut or key combination, styled for visual clarity.\n * Typically used to visually represent keyboard keys.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/typography/kbd}\n */\nexport const Kbd = ({ ref: forwardedRef, slot, ...props }: KbdProps) => {\n const localRef = useRef<HTMLElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n const [rest] = useContextProps(props, ref, KeyboardContext);\n\n return <KbdRootSlot ref={ref} slot={slot || undefined} {...rest} />;\n};\n"],"names":["withContext","createRecipeContext","kbdRecipe","KbdRootSlot","Kbd","forwardedRef","slot","props","localRef","useRef","ref","useObjectRef","mergeRefs","rest","useContextProps","KeyboardContext"],"mappings":";;;;;;;AAwBA,MAAM,EAAE,aAAAA,EAAA,IAAgB,gBAAAC,EAAoB,EAAE,QAAQC,GAAW,GAMpDC,IAAc,gBAAAH,EAA2C,KAAK,GCV9DI,IAAM,CAAC,EAAE,KAAKC,GAAc,MAAAC,GAAM,GAAGC,QAAsB;AACtE,QAAMC,IAAWC,EAAoB,IAAI,GACnCC,IAAMC,EAAaC,EAAUJ,GAAUH,CAAY,CAAC,GACpD,CAACQ,CAAI,IAAIC,EAAgBP,GAAOG,GAAKK,CAAe;AAE1D,2BAAQZ,GAAA,EAAY,KAAAO,GAAU,MAAMJ,KAAQ,QAAY,GAAGO,GAAM;AACnE;"}
|