@televet/kibble-ui 5.0.26-sc.3 → 5.0.26
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/{avatarGroup.component-DgR3EqDJ.js → avatarGroup.component-BPhQpVYM.js} +2 -2
- package/dist/chunks/{avatarGroup.component-DgR3EqDJ.js.map → avatarGroup.component-BPhQpVYM.js.map} +1 -1
- package/dist/chunks/{avatarGroup.component-CIj4qETQ.js → avatarGroup.component-CJCQSIyr.js} +2 -2
- package/dist/chunks/{avatarGroup.component-CIj4qETQ.js.map → avatarGroup.component-CJCQSIyr.js.map} +1 -1
- package/dist/chunks/{buttonGroup.component-ITatUbCf.js → buttonGroup.component-CO5lC36l.js} +2 -2
- package/dist/chunks/{buttonGroup.component-ITatUbCf.js.map → buttonGroup.component-CO5lC36l.js.map} +1 -1
- package/dist/chunks/{buttonGroup.component-BDN5oxew.js → buttonGroup.component-pR0mvmm7.js} +2 -2
- package/dist/chunks/{buttonGroup.component-BDN5oxew.js.map → buttonGroup.component-pR0mvmm7.js.map} +1 -1
- package/dist/chunks/calendar.component-6Z5lc-eR.js +2 -0
- package/dist/chunks/calendar.component-6Z5lc-eR.js.map +1 -0
- package/dist/chunks/calendar.component-Dx7c4EIy.js +62 -0
- package/dist/chunks/calendar.component-Dx7c4EIy.js.map +1 -0
- package/dist/chunks/{checkbox.component-CId1KMX3.js → checkbox.component-C132vkan.js} +2 -2
- package/dist/chunks/{checkbox.component-CId1KMX3.js.map → checkbox.component-C132vkan.js.map} +1 -1
- package/dist/chunks/{checkbox.component-2QYi-1Um.js → checkbox.component-DUJCiZr2.js} +2 -2
- package/dist/chunks/{checkbox.component-2QYi-1Um.js.map → checkbox.component-DUJCiZr2.js.map} +1 -1
- package/dist/chunks/{checkboxGroup.component-7ACU5_4p.js → checkboxGroup.component-2U0ZW1TD.js} +2 -2
- package/dist/chunks/{checkboxGroup.component-7ACU5_4p.js.map → checkboxGroup.component-2U0ZW1TD.js.map} +1 -1
- package/dist/chunks/{checkboxGroup.component-MS4j5Kq3.js → checkboxGroup.component-DW9qUlSm.js} +3 -3
- package/dist/chunks/{checkboxGroup.component-MS4j5Kq3.js.map → checkboxGroup.component-DW9qUlSm.js.map} +1 -1
- package/dist/chunks/{conversationCard.component-9rv6mttl.js → conversationCard.component-CscMIq51.js} +2 -2
- package/dist/chunks/{conversationCard.component-9rv6mttl.js.map → conversationCard.component-CscMIq51.js.map} +1 -1
- package/dist/chunks/{conversationCard.component-DCLDx0JX.js → conversationCard.component-xIYvp6K5.js} +3 -3
- package/dist/chunks/{conversationCard.component-DCLDx0JX.js.map → conversationCard.component-xIYvp6K5.js.map} +1 -1
- package/dist/chunks/{datePicker.component-DgbWKb2q.js → datePicker.component-BuGpHTzS.js} +2 -2
- package/dist/chunks/{datePicker.component-DgbWKb2q.js.map → datePicker.component-BuGpHTzS.js.map} +1 -1
- package/dist/chunks/{datePicker.component-BTNp4pkH.js → datePicker.component-DeK6pPeC.js} +4 -4
- package/dist/chunks/{datePicker.component-BTNp4pkH.js.map → datePicker.component-DeK6pPeC.js.map} +1 -1
- package/dist/chunks/{datePicker.provider-u-PZcKWc.js → datePicker.provider-C1vLiJEb.js} +6 -6
- package/dist/chunks/{datePicker.provider-u-PZcKWc.js.map → datePicker.provider-C1vLiJEb.js.map} +1 -1
- package/dist/chunks/{datePicker.provider-CclRyVCb.js → datePicker.provider-i35-VNAb.js} +2 -2
- package/dist/chunks/{datePicker.provider-CclRyVCb.js.map → datePicker.provider-i35-VNAb.js.map} +1 -1
- package/dist/chunks/dateTimePicker.component-BwKD6TeU.js +306 -0
- package/dist/chunks/dateTimePicker.component-BwKD6TeU.js.map +1 -0
- package/dist/chunks/dateTimePicker.component-C7SFD9Py.js +2 -0
- package/dist/chunks/dateTimePicker.component-C7SFD9Py.js.map +1 -0
- package/dist/chunks/endOfMonth-ClO3w4vF.js +2 -0
- package/dist/chunks/endOfMonth-ClO3w4vF.js.map +1 -0
- package/dist/chunks/endOfMonth-D0kCU08_.js +19 -0
- package/dist/chunks/endOfMonth-D0kCU08_.js.map +1 -0
- package/dist/chunks/{format-CqTHHSak.js → format-dJJ72A--.js} +3 -3
- package/dist/chunks/{format-CqTHHSak.js.map → format-dJJ72A--.js.map} +1 -1
- package/dist/chunks/isToday-Q8lj3mkM.js +23 -0
- package/dist/chunks/{isToday-iCYsPDMT.js.map → isToday-Q8lj3mkM.js.map} +1 -1
- package/dist/chunks/{menu.component-B-8F68kW.js → menu.component-D2V9Q1Y5.js} +2 -2
- package/dist/chunks/{menu.component-B-8F68kW.js.map → menu.component-D2V9Q1Y5.js.map} +1 -1
- package/dist/chunks/{menu.component-C6x9T6yo.js → menu.component-WHzMw5ZI.js} +3 -3
- package/dist/chunks/{menu.component-C6x9T6yo.js.map → menu.component-WHzMw5ZI.js.map} +1 -1
- package/dist/chunks/{numberInput.component-DbvfT3X-.js → numberInput.component-CRDRjrTH.js} +2 -2
- package/dist/chunks/{numberInput.component-DbvfT3X-.js.map → numberInput.component-CRDRjrTH.js.map} +1 -1
- package/dist/chunks/{numberInput.component-DCqJn2Ct.js → numberInput.component-DGPEz0Fv.js} +2 -2
- package/dist/chunks/{numberInput.component-DCqJn2Ct.js.map → numberInput.component-DGPEz0Fv.js.map} +1 -1
- package/dist/chunks/{pinInput.types-CRndmftA.js → pinInput.types-Can9f1Eu.js} +2 -2
- package/dist/chunks/{pinInput.types-CRndmftA.js.map → pinInput.types-Can9f1Eu.js.map} +1 -1
- package/dist/chunks/{pinInput.types-DqQt83Gy.js → pinInput.types-bIGh7aUS.js} +2 -2
- package/dist/chunks/{pinInput.types-DqQt83Gy.js.map → pinInput.types-bIGh7aUS.js.map} +1 -1
- package/dist/chunks/{radioGroup.types-CAXsF2Kb.js → radioGroup.types-DzSpA07h.js} +3 -3
- package/dist/chunks/{radioGroup.types-CAXsF2Kb.js.map → radioGroup.types-DzSpA07h.js.map} +1 -1
- package/dist/chunks/{radioGroup.types-CJ0YVfw_.js → radioGroup.types-U1ep9nrN.js} +2 -2
- package/dist/chunks/{radioGroup.types-CJ0YVfw_.js.map → radioGroup.types-U1ep9nrN.js.map} +1 -1
- package/dist/chunks/{rating.component-BAZbrMUk.js → rating.component-BWBPSEEk.js} +2 -2
- package/dist/chunks/{rating.component-BAZbrMUk.js.map → rating.component-BWBPSEEk.js.map} +1 -1
- package/dist/chunks/{rating.component-zhZb2naU.js → rating.component-DsHkKmA7.js} +2 -2
- package/dist/chunks/{rating.component-zhZb2naU.js.map → rating.component-DsHkKmA7.js.map} +1 -1
- package/dist/chunks/{ratingDots.component-elJxBu6D.js → ratingDots.component-BhWM7kTg.js} +2 -2
- package/dist/chunks/{ratingDots.component-elJxBu6D.js.map → ratingDots.component-BhWM7kTg.js.map} +1 -1
- package/dist/chunks/{ratingDots.component-DdCKYqlJ.js → ratingDots.component-CZ370iI3.js} +2 -2
- package/dist/chunks/{ratingDots.component-DdCKYqlJ.js.map → ratingDots.component-CZ370iI3.js.map} +1 -1
- package/dist/chunks/{select.component-qfwHZeAS.js → select.component-DckP-f8y.js} +3 -3
- package/dist/chunks/{select.component-qfwHZeAS.js.map → select.component-DckP-f8y.js.map} +1 -1
- package/dist/chunks/{select.component-Bz5vEwHi.js → select.component-OrsHXCMz.js} +2 -2
- package/dist/chunks/{select.component-Bz5vEwHi.js.map → select.component-OrsHXCMz.js.map} +1 -1
- package/dist/chunks/{switch.component-BjQDRlc3.js → switch.component-BYEMhBCA.js} +2 -2
- package/dist/chunks/{switch.component-BjQDRlc3.js.map → switch.component-BYEMhBCA.js.map} +1 -1
- package/dist/chunks/{switch.component-B7aBQUCG.js → switch.component-DjN67nap.js} +2 -2
- package/dist/chunks/{switch.component-B7aBQUCG.js.map → switch.component-DjN67nap.js.map} +1 -1
- package/dist/chunks/{tagBlock.component-vtBWiOLi.js → tagBlock.component-B899iqQP.js} +2 -2
- package/dist/chunks/{tagBlock.component-vtBWiOLi.js.map → tagBlock.component-B899iqQP.js.map} +1 -1
- package/dist/chunks/{tagBlock.component-D--q_dqh.js → tagBlock.component-CT7_RyJ-.js} +2 -2
- package/dist/chunks/{tagBlock.component-D--q_dqh.js.map → tagBlock.component-CT7_RyJ-.js.map} +1 -1
- package/dist/chunks/{textInput.component-D3OYUjHL.js → textInput.component-BeiTxTkS.js} +2 -2
- package/dist/chunks/{textInput.component-D3OYUjHL.js.map → textInput.component-BeiTxTkS.js.map} +1 -1
- package/dist/chunks/{textInput.component-Cj9j8DqH.js → textInput.component-CwTc0h_F.js} +2 -2
- package/dist/chunks/{textInput.component-Cj9j8DqH.js.map → textInput.component-CwTc0h_F.js.map} +1 -1
- package/dist/chunks/{textarea.component-DnJ9y2v3.js → textarea.component-BIg_XX_R.js} +2 -2
- package/dist/chunks/{textarea.component-DnJ9y2v3.js.map → textarea.component-BIg_XX_R.js.map} +1 -1
- package/dist/chunks/{textarea.component-Cb3kTPuL.js → textarea.component-C6Wt1Pk8.js} +2 -2
- package/dist/chunks/{textarea.component-Cb3kTPuL.js.map → textarea.component-C6Wt1Pk8.js.map} +1 -1
- package/dist/chunks/{theme.provider-6Q7cs-Zb.js → theme.provider-C_F9M-W3.js} +3 -3
- package/dist/chunks/theme.provider-C_F9M-W3.js.map +1 -0
- package/dist/chunks/{theme.provider-NzQochsc.js → theme.provider-CtbJ04tc.js} +167 -175
- package/dist/chunks/theme.provider-CtbJ04tc.js.map +1 -0
- package/dist/chunks/{timePicker.component--sP-VAU6.js → timePicker.component-CsvyXSRc.js} +3 -3
- package/dist/chunks/{timePicker.component--sP-VAU6.js.map → timePicker.component-CsvyXSRc.js.map} +1 -1
- package/dist/chunks/{timePicker.component-BQavnU5-.js → timePicker.component-D5hw80VV.js} +2 -2
- package/dist/chunks/{timePicker.component-BQavnU5-.js.map → timePicker.component-D5hw80VV.js.map} +1 -1
- package/dist/chunks/{timeRange.component-CNgdynZc.js → timeRange.component-9Bs6kd18.js} +2 -2
- package/dist/chunks/{timeRange.component-CNgdynZc.js.map → timeRange.component-9Bs6kd18.js.map} +1 -1
- package/dist/chunks/{timeRange.component-CK1x2GMK.js → timeRange.component-D3Db8lvh.js} +2 -2
- package/dist/chunks/{timeRange.component-CK1x2GMK.js.map → timeRange.component-D3Db8lvh.js.map} +1 -1
- package/dist/chunks/{timestamp.component-DkLjxUsy.js → timestamp.component-DiZwy6CA.js} +3 -3
- package/dist/chunks/{timestamp.component-DkLjxUsy.js.map → timestamp.component-DiZwy6CA.js.map} +1 -1
- package/dist/chunks/{withFormControl-tp8w4b63.js → withFormControl-DW9A6BSL.js} +25 -24
- package/dist/chunks/{withFormControl-tp8w4b63.js.map → withFormControl-DW9A6BSL.js.map} +1 -1
- package/dist/chunks/{withFormControl-BQWcby9D.js → withFormControl-QV_Jridv.js} +2 -2
- package/dist/chunks/{withFormControl-BQWcby9D.js.map → withFormControl-QV_Jridv.js.map} +1 -1
- package/dist/cjs/components/AvatarGroup/index.cjs +1 -1
- package/dist/cjs/components/ButtonGroup/index.cjs +1 -1
- package/dist/cjs/components/Calendar/index.cjs +1 -1
- package/dist/cjs/components/Checkbox/index.cjs +1 -1
- package/dist/cjs/components/CheckboxGroup/index.cjs +1 -1
- package/dist/cjs/components/ConversationCard/index.cjs +1 -1
- package/dist/cjs/components/DatePicker/index.cjs +1 -1
- package/dist/cjs/components/DateTimePicker/index.cjs +1 -1
- package/dist/cjs/components/Menu/index.cjs +1 -1
- package/dist/cjs/components/NumberInput/index.cjs +1 -1
- package/dist/cjs/components/PinInput/index.cjs +1 -1
- package/dist/cjs/components/RadioGroup/index.cjs +1 -1
- package/dist/cjs/components/Rating/index.cjs +1 -1
- package/dist/cjs/components/RatingDots/index.cjs +1 -1
- package/dist/cjs/components/Select/index.cjs +1 -1
- package/dist/cjs/components/Switch/index.cjs +1 -1
- package/dist/cjs/components/TagBlock/index.cjs +1 -1
- package/dist/cjs/components/TextInput/index.cjs +1 -1
- package/dist/cjs/components/Textarea/index.cjs +1 -1
- package/dist/cjs/components/TimePicker/index.cjs +1 -1
- package/dist/cjs/components/TimeRange/index.cjs +1 -1
- package/dist/cjs/components/index.cjs +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/theme/index.cjs +1 -1
- package/dist/esm/cli/generate-theme-types.js +0 -0
- package/dist/esm/cli/postinstall.js +0 -0
- package/dist/esm/components/AvatarGroup/index.js +1 -1
- package/dist/esm/components/ButtonGroup/index.js +1 -1
- package/dist/esm/components/Calendar/index.js +4 -2
- package/dist/esm/components/Checkbox/index.js +1 -1
- package/dist/esm/components/CheckboxGroup/index.js +1 -1
- package/dist/esm/components/ConversationCard/index.js +1 -1
- package/dist/esm/components/DatePicker/index.js +2 -2
- package/dist/esm/components/DateTimePicker/index.js +1 -1
- package/dist/esm/components/Menu/index.js +1 -1
- package/dist/esm/components/NumberInput/index.js +1 -1
- package/dist/esm/components/PinInput/index.js +1 -1
- package/dist/esm/components/RadioGroup/index.js +1 -1
- package/dist/esm/components/Rating/index.js +1 -1
- package/dist/esm/components/RatingDots/index.js +1 -1
- package/dist/esm/components/Select/index.js +1 -1
- package/dist/esm/components/Switch/index.js +1 -1
- package/dist/esm/components/TagBlock/index.js +1 -1
- package/dist/esm/components/TextInput/index.js +1 -1
- package/dist/esm/components/Textarea/index.js +1 -1
- package/dist/esm/components/TimePicker/index.js +1 -1
- package/dist/esm/components/TimeRange/index.js +1 -1
- package/dist/esm/components/Timestamp/index.js +1 -1
- package/dist/esm/components/index.js +126 -124
- package/dist/esm/index.js +154 -152
- package/dist/esm/theme/index.js +1 -1
- package/dist/types/components/Calendar/calendar.component.d.ts +19 -1
- package/dist/types/components/Calendar/calendar.utils.d.ts +3 -0
- package/dist/types/components/Calendar/calendarFooterButton.component.d.ts +31 -0
- package/dist/types/components/Calendar/calendarTodayButton.component.d.ts +10 -0
- package/dist/types/components/Calendar/index.d.ts +2 -0
- package/package.json +1 -1
- package/dist/chunks/calendar.component-D-1uis5P.js +0 -18
- package/dist/chunks/calendar.component-D-1uis5P.js.map +0 -1
- package/dist/chunks/calendar.component-zZHTvsvc.js +0 -2
- package/dist/chunks/calendar.component-zZHTvsvc.js.map +0 -1
- package/dist/chunks/dateTimePicker.component-CvNBzSf6.js +0 -2
- package/dist/chunks/dateTimePicker.component-CvNBzSf6.js.map +0 -1
- package/dist/chunks/dateTimePicker.component-DgyypWQR.js +0 -317
- package/dist/chunks/dateTimePicker.component-DgyypWQR.js.map +0 -1
- package/dist/chunks/isToday-iCYsPDMT.js +0 -23
- package/dist/chunks/theme.provider-6Q7cs-Zb.js.map +0 -1
- package/dist/chunks/theme.provider-NzQochsc.js.map +0 -1
- package/dist/types/theme/recipes/Field/field.recipe.d.ts +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const n=require("./jsx-runtime-BjDatQAs.js"),c=require("react"),N=require("./withFormControl-
|
|
2
|
-
//# sourceMappingURL=switch.component-
|
|
1
|
+
"use strict";const n=require("./jsx-runtime-BjDatQAs.js"),c=require("react"),N=require("./withFormControl-QV_Jridv.js"),w=require("./attr-BMs6szZx.js"),$=require("./create-slot-recipe-context-HXE1VazG.js"),f=require("./factory-a2SJjEvR.js"),i=require("./use-locale-context-ym21RUxU.js"),S=require("./use-field-context-Cm29IQ7H.js"),u=require("./index-CQURjLlA.js"),m=require("./index-DLe40do7.js"),_=t=>t&&t.__esModule?t:{default:t},A=_(c),[R,h]=i.createContext({name:"SwitchContext",hookName:"useSwitchContext",providerName:"<SwitchProvider />"}),C=c.forwardRef((t,r)=>{const e=h(),s=u.mergeProps(e.getControlProps(),t);return n.jsxRuntimeExports.jsx(i.ark.span,{...s,ref:r})});C.displayName="SwitchControl";const j=c.forwardRef((t,r)=>{const e=h(),s=u.mergeProps(e.getHiddenInputProps(),t),o=S.useFieldContext();return n.jsxRuntimeExports.jsx(i.ark.input,{"aria-describedby":o?.ariaDescribedby,...s,ref:r})});j.displayName="SwitchHiddenInput";const P=c.forwardRef((t,r)=>{const e=h(),s=u.mergeProps(e.getLabelProps(),t);return n.jsxRuntimeExports.jsx(i.ark.span,{...s,ref:r})});P.displayName="SwitchLabel";const I=t=>{const r=c.useId(),{getRootNode:e}=i.useEnvironmentContext(),{dir:s}=i.useLocaleContext(),o=S.useFieldContext(),a={id:r,ids:{label:o?.ids.label,hiddenInput:o?.ids.control},dir:s,disabled:o?.disabled,readOnly:o?.readOnly,invalid:o?.invalid,required:o?.required,getRootNode:e,...t},d=i.useMachine(m.machine,a);return m.connect(d,i.normalizeProps)},b=c.forwardRef((t,r)=>{const[e,s]=i.createSplitProps()(t,["checked","defaultChecked","disabled","form","id","ids","invalid","label","name","onCheckedChange","readOnly","required","value"]),o=I(e),a=u.mergeProps(o.getRootProps(),s);return n.jsxRuntimeExports.jsx(R,{value:o,children:n.jsxRuntimeExports.jsx(i.ark.label,{...a,ref:r})})});b.displayName="SwitchRoot";const k=c.forwardRef((t,r)=>{const[{value:e},s]=i.createSplitProps()(t,["value"]),o=u.mergeProps(e.getRootProps(),s);return n.jsxRuntimeExports.jsx(R,{value:e,children:n.jsxRuntimeExports.jsx(i.ark.label,{...o,ref:r})})});k.displayName="SwitchRootProvider";const g=c.forwardRef((t,r)=>{const e=h(),s=u.mergeProps(e.getThumbProps(),t);return n.jsxRuntimeExports.jsx(i.ark.span,{...s,ref:r})});g.displayName="SwitchThumb";const{withProvider:v,withContext:x,useStyles:L}=$.createSlotRecipeContext({key:"switch"});v(k,"root",{forwardAsChild:!0});const F=v(b,"root",{forwardAsChild:!0}),H=x(P,"label",{forwardAsChild:!0}),O=x(g,"thumb",{forwardAsChild:!0}),M=x(C,"control",{forwardAsChild:!0,defaultProps:{children:n.jsxRuntimeExports.jsx(O,{})}});c.forwardRef(function(r,e){const s=h(),o=L(),{fallback:a,children:d,unstyled:l,...p}=r;return n.jsxRuntimeExports.jsx(f.chakra.span,{ref:e,"data-checked":w.dataAttr(s.checked),...p,css:[l?void 0:o.indicator,r.css],children:s.checked?d:a})});c.forwardRef(function(r,e){const s=h(),{fallback:o,children:a,...d}=r;return n.jsxRuntimeExports.jsx(f.chakra.span,{ref:e,"data-checked":w.dataAttr(s.checked),...d,children:s.checked?a:o})});const D=j,y=A.default.forwardRef(({children:t,indeterminate:r=!1,onContrast:e,label:s,rootRef:o,size:a="md",switchRef:d,["data-testid"]:l="kibble-switch",...p},E)=>{const q=c.useMemo(()=>r?e?"indeterminateOnContrast":"indeterminate":e?"onContrast":"default",[r,e]);return n.jsxRuntimeExports.jsxs(F,{className:"Switch","data-testid":l,ref:o,size:a,variant:q,...p,children:[n.jsxRuntimeExports.jsx(D,{className:"Switch_Input","data-testid":`${l}-input`,ref:d||E}),n.jsxRuntimeExports.jsx(M,{className:"Switch_Control","data-testid":`${l}-control`}),!!t&&n.jsxRuntimeExports.jsx(H,{"data-testid":`${l}-label`,children:t})]})});y.displayName="Switch";const T=N.withFormControl(y);exports.WrappedSwitch=T;
|
|
2
|
+
//# sourceMappingURL=switch.component-BYEMhBCA.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.component-BjQDRlc3.js","sources":["../../node_modules/@ark-ui/react/dist/components/switch/use-switch-context.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-control.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-hidden-input.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-label.js","../../node_modules/@ark-ui/react/dist/components/switch/use-switch.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root-provider.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-thumb.js","../../node_modules/@chakra-ui/react/dist/esm/components/switch/switch.js","../../src/components/Switch/switch.component.tsx"],"sourcesContent":["'use client';\nimport { createContext } from '../../utils/create-context.js';\n\nconst [SwitchProvider, useSwitchContext] = createContext({\n name: \"SwitchContext\",\n hookName: \"useSwitchContext\",\n providerName: \"<SwitchProvider />\"\n});\n\nexport { SwitchProvider, useSwitchContext };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchControl = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getControlProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchControl.displayName = \"SwitchControl\";\n\nexport { SwitchControl };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from '../field/use-field-context.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchHiddenInput = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);\n const field = useFieldContext();\n return /* @__PURE__ */ jsx(ark.input, { \"aria-describedby\": field?.ariaDescribedby, ...mergedProps, ref });\n});\nSwitchHiddenInput.displayName = \"SwitchHiddenInput\";\n\nexport { SwitchHiddenInput };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchLabel = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getLabelProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchLabel.displayName = \"SwitchLabel\";\n\nexport { SwitchLabel };\n","'use client';\nimport { useMachine, normalizeProps } from '@zag-js/react';\nimport * as zagSwitch from '@zag-js/switch';\nimport { useId } from 'react';\nimport { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';\nimport { useLocaleContext } from '../../providers/locale/use-locale-context.js';\nimport { useFieldContext } from '../field/use-field-context.js';\n\nconst useSwitch = (props) => {\n const id = useId();\n const { getRootNode } = useEnvironmentContext();\n const { dir } = useLocaleContext();\n const field = useFieldContext();\n const machineProps = {\n id,\n ids: {\n label: field?.ids.label,\n hiddenInput: field?.ids.control\n },\n dir,\n disabled: field?.disabled,\n readOnly: field?.readOnly,\n invalid: field?.invalid,\n required: field?.required,\n getRootNode,\n ...props\n };\n const service = useMachine(zagSwitch.machine, machineProps);\n return zagSwitch.connect(service, normalizeProps);\n};\n\nexport { useSwitch };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { useSwitch } from './use-switch.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRoot = forwardRef((props, ref) => {\n const [switchProps, localProps] = createSplitProps()(props, [\n \"checked\",\n \"defaultChecked\",\n \"disabled\",\n \"form\",\n \"id\",\n \"ids\",\n \"invalid\",\n \"label\",\n \"name\",\n \"onCheckedChange\",\n \"readOnly\",\n \"required\",\n \"value\"\n ]);\n const switchContext = useSwitch(switchProps);\n const mergedProps = mergeProps(switchContext.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: switchContext, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRoot.displayName = \"SwitchRoot\";\n\nexport { SwitchRoot };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRootProvider = forwardRef((props, ref) => {\n const [{ value: api }, localProps] = createSplitProps()(props, [\"value\"]);\n const mergedProps = mergeProps(api.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRootProvider.displayName = \"SwitchRootProvider\";\n\nexport { SwitchRootProvider };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchThumb = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getThumbProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchThumb.displayName = \"SwitchThumb\";\n\nexport { SwitchThumb };\n","\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { Switch, useSwitchContext } from '@ark-ui/react/switch';\nimport { forwardRef } from 'react';\nimport { dataAttr } from '../../utils/attr.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\n\nconst {\n withProvider,\n withContext,\n useStyles: useSwitchStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"switch\" });\nconst SwitchRootProvider = withProvider(Switch.RootProvider, \"root\", { forwardAsChild: true });\nconst SwitchRoot = withProvider(\n Switch.Root,\n \"root\",\n { forwardAsChild: true }\n);\nconst SwitchPropsProvider = PropsProvider;\nconst SwitchLabel = withContext(\n Switch.Label,\n \"label\",\n { forwardAsChild: true }\n);\nconst SwitchThumb = withContext(\n Switch.Thumb,\n \"thumb\",\n { forwardAsChild: true }\n);\nconst SwitchControl = withContext(\n Switch.Control,\n \"control\",\n {\n forwardAsChild: true,\n defaultProps: { children: /* @__PURE__ */ jsx(SwitchThumb, {}) }\n }\n);\nconst SwitchIndicator = forwardRef(function SwitchIndicator2(props, ref) {\n const api = useSwitchContext();\n const styles = useSwitchStyles();\n const { fallback, children, unstyled, ...rest } = props;\n return /* @__PURE__ */ jsx(\n chakra.span,\n {\n ref,\n \"data-checked\": dataAttr(api.checked),\n ...rest,\n css: [!unstyled ? styles.indicator : void 0, props.css],\n children: api.checked ? children : fallback\n }\n );\n});\nconst SwitchThumbIndicator = forwardRef(function SwitchThumbIndicator2(props, ref) {\n const api = useSwitchContext();\n const { fallback, children, ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, \"data-checked\": dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });\n});\nconst SwitchContext = Switch.Context;\nconst SwitchHiddenInput = Switch.HiddenInput;\n\nexport { SwitchContext, SwitchControl, SwitchHiddenInput, SwitchIndicator, SwitchLabel, SwitchPropsProvider, SwitchRoot, SwitchRootProvider, SwitchThumb, SwitchThumbIndicator, useSwitchStyles };\n","import React, { useMemo } from 'react';\nimport { Switch as CSwitch } from '@chakra-ui/react/switch';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\n\nexport interface SwitchProps extends WithFormControlProps, Omit<CSwitch.RootProps, 'label' | 'onChange'> {\n /**\n * If true, the switch will be indeterminate. This only affects the switch visually and does not modify the checked property.\n * @default false\n */\n indeterminate?: boolean;\n /** Ref to the switch component. */\n rootRef?: React.Ref<HTMLLabelElement | null>;\n /**\n * Size of the switch.\n * @default md\n */\n size?: FormControlSize;\n /** Ref to the hiddeninput element. */\n switchRef?: React.Ref<HTMLInputElement | null>;\n /**\n * Data test id for the switch.\n * @default kibble-switch\n */\n 'data-testid'?: string;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n children,\n indeterminate = false,\n onContrast,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n rootRef,\n size = 'md',\n switchRef,\n ['data-testid']: dataTestId = 'kibble-switch',\n ...rest\n },\n ref,\n ): React.JSX.Element => {\n const _computedVariant = useMemo(() => {\n if (indeterminate) {\n return onContrast ? 'indeterminateOnContrast' : 'indeterminate';\n } else {\n return onContrast ? 'onContrast' : 'default';\n }\n }, [indeterminate, onContrast]);\n\n return (\n <CSwitch.Root\n className=\"Switch\"\n data-testid={dataTestId}\n ref={rootRef}\n size={size}\n variant={_computedVariant}\n {...rest}\n >\n <CSwitch.HiddenInput className=\"Switch_Input\" data-testid={`${dataTestId}-input`} ref={switchRef || ref} />\n <CSwitch.Control className=\"Switch_Control\" data-testid={`${dataTestId}-control`} />\n {!!children && <CSwitch.Label data-testid={`${dataTestId}-label`}>{children}</CSwitch.Label>}\n </CSwitch.Root>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\nconst WrappedSwitch = withFormControl<SwitchProps>(Switch);\n\nexport { WrappedSwitch as Switch };\n"],"names":["SwitchProvider","useSwitchContext","createContext","SwitchControl","forwardRef","props","ref","switchContext","mergedProps","mergeProps","jsx","ark","SwitchHiddenInput","field","useFieldContext","SwitchLabel","useSwitch","id","useId","getRootNode","useEnvironmentContext","dir","useLocaleContext","machineProps","service","useMachine","zagSwitch.machine","zagSwitch.connect","normalizeProps","SwitchRoot","switchProps","localProps","createSplitProps","SwitchRootProvider","api","SwitchThumb","withProvider","withContext","useSwitchStyles","createSlotRecipeContext","Switch.RootProvider","Switch.Root","Switch.Label","Switch.Thumb","Switch.Control","styles","fallback","children","unstyled","rest","chakra","dataAttr","Switch.HiddenInput","Switch","React","indeterminate","onContrast","label","rootRef","size","switchRef","dataTestId","_computedVariant","useMemo","jsxs","CSwitch.Root","CSwitch.HiddenInput","CSwitch.Control","CSwitch.Label","WrappedSwitch","withFormControl"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
|
|
1
|
+
{"version":3,"file":"switch.component-BYEMhBCA.js","sources":["../../node_modules/@ark-ui/react/dist/components/switch/use-switch-context.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-control.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-hidden-input.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-label.js","../../node_modules/@ark-ui/react/dist/components/switch/use-switch.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root-provider.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-thumb.js","../../node_modules/@chakra-ui/react/dist/esm/components/switch/switch.js","../../src/components/Switch/switch.component.tsx"],"sourcesContent":["'use client';\nimport { createContext } from '../../utils/create-context.js';\n\nconst [SwitchProvider, useSwitchContext] = createContext({\n name: \"SwitchContext\",\n hookName: \"useSwitchContext\",\n providerName: \"<SwitchProvider />\"\n});\n\nexport { SwitchProvider, useSwitchContext };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchControl = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getControlProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchControl.displayName = \"SwitchControl\";\n\nexport { SwitchControl };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from '../field/use-field-context.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchHiddenInput = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);\n const field = useFieldContext();\n return /* @__PURE__ */ jsx(ark.input, { \"aria-describedby\": field?.ariaDescribedby, ...mergedProps, ref });\n});\nSwitchHiddenInput.displayName = \"SwitchHiddenInput\";\n\nexport { SwitchHiddenInput };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchLabel = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getLabelProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchLabel.displayName = \"SwitchLabel\";\n\nexport { SwitchLabel };\n","'use client';\nimport { useMachine, normalizeProps } from '@zag-js/react';\nimport * as zagSwitch from '@zag-js/switch';\nimport { useId } from 'react';\nimport { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';\nimport { useLocaleContext } from '../../providers/locale/use-locale-context.js';\nimport { useFieldContext } from '../field/use-field-context.js';\n\nconst useSwitch = (props) => {\n const id = useId();\n const { getRootNode } = useEnvironmentContext();\n const { dir } = useLocaleContext();\n const field = useFieldContext();\n const machineProps = {\n id,\n ids: {\n label: field?.ids.label,\n hiddenInput: field?.ids.control\n },\n dir,\n disabled: field?.disabled,\n readOnly: field?.readOnly,\n invalid: field?.invalid,\n required: field?.required,\n getRootNode,\n ...props\n };\n const service = useMachine(zagSwitch.machine, machineProps);\n return zagSwitch.connect(service, normalizeProps);\n};\n\nexport { useSwitch };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { useSwitch } from './use-switch.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRoot = forwardRef((props, ref) => {\n const [switchProps, localProps] = createSplitProps()(props, [\n \"checked\",\n \"defaultChecked\",\n \"disabled\",\n \"form\",\n \"id\",\n \"ids\",\n \"invalid\",\n \"label\",\n \"name\",\n \"onCheckedChange\",\n \"readOnly\",\n \"required\",\n \"value\"\n ]);\n const switchContext = useSwitch(switchProps);\n const mergedProps = mergeProps(switchContext.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: switchContext, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRoot.displayName = \"SwitchRoot\";\n\nexport { SwitchRoot };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRootProvider = forwardRef((props, ref) => {\n const [{ value: api }, localProps] = createSplitProps()(props, [\"value\"]);\n const mergedProps = mergeProps(api.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRootProvider.displayName = \"SwitchRootProvider\";\n\nexport { SwitchRootProvider };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchThumb = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getThumbProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchThumb.displayName = \"SwitchThumb\";\n\nexport { SwitchThumb };\n","\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { Switch, useSwitchContext } from '@ark-ui/react/switch';\nimport { forwardRef } from 'react';\nimport { dataAttr } from '../../utils/attr.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\n\nconst {\n withProvider,\n withContext,\n useStyles: useSwitchStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"switch\" });\nconst SwitchRootProvider = withProvider(Switch.RootProvider, \"root\", { forwardAsChild: true });\nconst SwitchRoot = withProvider(\n Switch.Root,\n \"root\",\n { forwardAsChild: true }\n);\nconst SwitchPropsProvider = PropsProvider;\nconst SwitchLabel = withContext(\n Switch.Label,\n \"label\",\n { forwardAsChild: true }\n);\nconst SwitchThumb = withContext(\n Switch.Thumb,\n \"thumb\",\n { forwardAsChild: true }\n);\nconst SwitchControl = withContext(\n Switch.Control,\n \"control\",\n {\n forwardAsChild: true,\n defaultProps: { children: /* @__PURE__ */ jsx(SwitchThumb, {}) }\n }\n);\nconst SwitchIndicator = forwardRef(function SwitchIndicator2(props, ref) {\n const api = useSwitchContext();\n const styles = useSwitchStyles();\n const { fallback, children, unstyled, ...rest } = props;\n return /* @__PURE__ */ jsx(\n chakra.span,\n {\n ref,\n \"data-checked\": dataAttr(api.checked),\n ...rest,\n css: [!unstyled ? styles.indicator : void 0, props.css],\n children: api.checked ? children : fallback\n }\n );\n});\nconst SwitchThumbIndicator = forwardRef(function SwitchThumbIndicator2(props, ref) {\n const api = useSwitchContext();\n const { fallback, children, ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, \"data-checked\": dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });\n});\nconst SwitchContext = Switch.Context;\nconst SwitchHiddenInput = Switch.HiddenInput;\n\nexport { SwitchContext, SwitchControl, SwitchHiddenInput, SwitchIndicator, SwitchLabel, SwitchPropsProvider, SwitchRoot, SwitchRootProvider, SwitchThumb, SwitchThumbIndicator, useSwitchStyles };\n","import React, { useMemo } from 'react';\nimport { Switch as CSwitch } from '@chakra-ui/react/switch';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\n\nexport interface SwitchProps extends WithFormControlProps, Omit<CSwitch.RootProps, 'label' | 'onChange'> {\n /**\n * If true, the switch will be indeterminate. This only affects the switch visually and does not modify the checked property.\n * @default false\n */\n indeterminate?: boolean;\n /** Ref to the switch component. */\n rootRef?: React.Ref<HTMLLabelElement | null>;\n /**\n * Size of the switch.\n * @default md\n */\n size?: FormControlSize;\n /** Ref to the hiddeninput element. */\n switchRef?: React.Ref<HTMLInputElement | null>;\n /**\n * Data test id for the switch.\n * @default kibble-switch\n */\n 'data-testid'?: string;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n children,\n indeterminate = false,\n onContrast,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n rootRef,\n size = 'md',\n switchRef,\n ['data-testid']: dataTestId = 'kibble-switch',\n ...rest\n },\n ref,\n ): React.JSX.Element => {\n const _computedVariant = useMemo(() => {\n if (indeterminate) {\n return onContrast ? 'indeterminateOnContrast' : 'indeterminate';\n } else {\n return onContrast ? 'onContrast' : 'default';\n }\n }, [indeterminate, onContrast]);\n\n return (\n <CSwitch.Root\n className=\"Switch\"\n data-testid={dataTestId}\n ref={rootRef}\n size={size}\n variant={_computedVariant}\n {...rest}\n >\n <CSwitch.HiddenInput className=\"Switch_Input\" data-testid={`${dataTestId}-input`} ref={switchRef || ref} />\n <CSwitch.Control className=\"Switch_Control\" data-testid={`${dataTestId}-control`} />\n {!!children && <CSwitch.Label data-testid={`${dataTestId}-label`}>{children}</CSwitch.Label>}\n </CSwitch.Root>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\nconst WrappedSwitch = withFormControl<SwitchProps>(Switch);\n\nexport { WrappedSwitch as Switch };\n"],"names":["SwitchProvider","useSwitchContext","createContext","SwitchControl","forwardRef","props","ref","switchContext","mergedProps","mergeProps","jsx","ark","SwitchHiddenInput","field","useFieldContext","SwitchLabel","useSwitch","id","useId","getRootNode","useEnvironmentContext","dir","useLocaleContext","machineProps","service","useMachine","zagSwitch.machine","zagSwitch.connect","normalizeProps","SwitchRoot","switchProps","localProps","createSplitProps","SwitchRootProvider","api","SwitchThumb","withProvider","withContext","useSwitchStyles","createSlotRecipeContext","Switch.RootProvider","Switch.Root","Switch.Label","Switch.Thumb","Switch.Control","styles","fallback","children","unstyled","rest","chakra","dataAttr","Switch.HiddenInput","Switch","React","indeterminate","onContrast","label","rootRef","size","switchRef","dataTestId","_computedVariant","useMemo","jsxs","CSwitch.Root","CSwitch.HiddenInput","CSwitch.Control","CSwitch.Label","WrappedSwitch","withFormControl"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { j as c } from "./jsx-runtime-C5mzlN2N.js";
|
|
2
2
|
import A, { forwardRef as n, useId as I, useMemo as L } from "react";
|
|
3
|
-
import { w as _ } from "./withFormControl-
|
|
3
|
+
import { w as _ } from "./withFormControl-DW9A6BSL.js";
|
|
4
4
|
import { d as w } from "./attr-sm10PXOd.js";
|
|
5
5
|
import { c as H } from "./create-slot-recipe-context-D_FXDJGp.js";
|
|
6
6
|
import { c as S } from "./factory-BQshv7_b.js";
|
|
@@ -152,4 +152,4 @@ const ct = _(N);
|
|
|
152
152
|
export {
|
|
153
153
|
ct as W
|
|
154
154
|
};
|
|
155
|
-
//# sourceMappingURL=switch.component-
|
|
155
|
+
//# sourceMappingURL=switch.component-DjN67nap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.component-B7aBQUCG.js","sources":["../../node_modules/@ark-ui/react/dist/components/switch/use-switch-context.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-control.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-hidden-input.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-label.js","../../node_modules/@ark-ui/react/dist/components/switch/use-switch.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root-provider.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-thumb.js","../../node_modules/@chakra-ui/react/dist/esm/components/switch/switch.js","../../src/components/Switch/switch.component.tsx"],"sourcesContent":["'use client';\nimport { createContext } from '../../utils/create-context.js';\n\nconst [SwitchProvider, useSwitchContext] = createContext({\n name: \"SwitchContext\",\n hookName: \"useSwitchContext\",\n providerName: \"<SwitchProvider />\"\n});\n\nexport { SwitchProvider, useSwitchContext };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchControl = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getControlProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchControl.displayName = \"SwitchControl\";\n\nexport { SwitchControl };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from '../field/use-field-context.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchHiddenInput = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);\n const field = useFieldContext();\n return /* @__PURE__ */ jsx(ark.input, { \"aria-describedby\": field?.ariaDescribedby, ...mergedProps, ref });\n});\nSwitchHiddenInput.displayName = \"SwitchHiddenInput\";\n\nexport { SwitchHiddenInput };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchLabel = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getLabelProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchLabel.displayName = \"SwitchLabel\";\n\nexport { SwitchLabel };\n","'use client';\nimport { useMachine, normalizeProps } from '@zag-js/react';\nimport * as zagSwitch from '@zag-js/switch';\nimport { useId } from 'react';\nimport { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';\nimport { useLocaleContext } from '../../providers/locale/use-locale-context.js';\nimport { useFieldContext } from '../field/use-field-context.js';\n\nconst useSwitch = (props) => {\n const id = useId();\n const { getRootNode } = useEnvironmentContext();\n const { dir } = useLocaleContext();\n const field = useFieldContext();\n const machineProps = {\n id,\n ids: {\n label: field?.ids.label,\n hiddenInput: field?.ids.control\n },\n dir,\n disabled: field?.disabled,\n readOnly: field?.readOnly,\n invalid: field?.invalid,\n required: field?.required,\n getRootNode,\n ...props\n };\n const service = useMachine(zagSwitch.machine, machineProps);\n return zagSwitch.connect(service, normalizeProps);\n};\n\nexport { useSwitch };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { useSwitch } from './use-switch.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRoot = forwardRef((props, ref) => {\n const [switchProps, localProps] = createSplitProps()(props, [\n \"checked\",\n \"defaultChecked\",\n \"disabled\",\n \"form\",\n \"id\",\n \"ids\",\n \"invalid\",\n \"label\",\n \"name\",\n \"onCheckedChange\",\n \"readOnly\",\n \"required\",\n \"value\"\n ]);\n const switchContext = useSwitch(switchProps);\n const mergedProps = mergeProps(switchContext.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: switchContext, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRoot.displayName = \"SwitchRoot\";\n\nexport { SwitchRoot };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRootProvider = forwardRef((props, ref) => {\n const [{ value: api }, localProps] = createSplitProps()(props, [\"value\"]);\n const mergedProps = mergeProps(api.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRootProvider.displayName = \"SwitchRootProvider\";\n\nexport { SwitchRootProvider };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchThumb = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getThumbProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchThumb.displayName = \"SwitchThumb\";\n\nexport { SwitchThumb };\n","\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { Switch, useSwitchContext } from '@ark-ui/react/switch';\nimport { forwardRef } from 'react';\nimport { dataAttr } from '../../utils/attr.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\n\nconst {\n withProvider,\n withContext,\n useStyles: useSwitchStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"switch\" });\nconst SwitchRootProvider = withProvider(Switch.RootProvider, \"root\", { forwardAsChild: true });\nconst SwitchRoot = withProvider(\n Switch.Root,\n \"root\",\n { forwardAsChild: true }\n);\nconst SwitchPropsProvider = PropsProvider;\nconst SwitchLabel = withContext(\n Switch.Label,\n \"label\",\n { forwardAsChild: true }\n);\nconst SwitchThumb = withContext(\n Switch.Thumb,\n \"thumb\",\n { forwardAsChild: true }\n);\nconst SwitchControl = withContext(\n Switch.Control,\n \"control\",\n {\n forwardAsChild: true,\n defaultProps: { children: /* @__PURE__ */ jsx(SwitchThumb, {}) }\n }\n);\nconst SwitchIndicator = forwardRef(function SwitchIndicator2(props, ref) {\n const api = useSwitchContext();\n const styles = useSwitchStyles();\n const { fallback, children, unstyled, ...rest } = props;\n return /* @__PURE__ */ jsx(\n chakra.span,\n {\n ref,\n \"data-checked\": dataAttr(api.checked),\n ...rest,\n css: [!unstyled ? styles.indicator : void 0, props.css],\n children: api.checked ? children : fallback\n }\n );\n});\nconst SwitchThumbIndicator = forwardRef(function SwitchThumbIndicator2(props, ref) {\n const api = useSwitchContext();\n const { fallback, children, ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, \"data-checked\": dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });\n});\nconst SwitchContext = Switch.Context;\nconst SwitchHiddenInput = Switch.HiddenInput;\n\nexport { SwitchContext, SwitchControl, SwitchHiddenInput, SwitchIndicator, SwitchLabel, SwitchPropsProvider, SwitchRoot, SwitchRootProvider, SwitchThumb, SwitchThumbIndicator, useSwitchStyles };\n","import React, { useMemo } from 'react';\nimport { Switch as CSwitch } from '@chakra-ui/react/switch';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\n\nexport interface SwitchProps extends WithFormControlProps, Omit<CSwitch.RootProps, 'label' | 'onChange'> {\n /**\n * If true, the switch will be indeterminate. This only affects the switch visually and does not modify the checked property.\n * @default false\n */\n indeterminate?: boolean;\n /** Ref to the switch component. */\n rootRef?: React.Ref<HTMLLabelElement | null>;\n /**\n * Size of the switch.\n * @default md\n */\n size?: FormControlSize;\n /** Ref to the hiddeninput element. */\n switchRef?: React.Ref<HTMLInputElement | null>;\n /**\n * Data test id for the switch.\n * @default kibble-switch\n */\n 'data-testid'?: string;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n children,\n indeterminate = false,\n onContrast,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n rootRef,\n size = 'md',\n switchRef,\n ['data-testid']: dataTestId = 'kibble-switch',\n ...rest\n },\n ref,\n ): React.JSX.Element => {\n const _computedVariant = useMemo(() => {\n if (indeterminate) {\n return onContrast ? 'indeterminateOnContrast' : 'indeterminate';\n } else {\n return onContrast ? 'onContrast' : 'default';\n }\n }, [indeterminate, onContrast]);\n\n return (\n <CSwitch.Root\n className=\"Switch\"\n data-testid={dataTestId}\n ref={rootRef}\n size={size}\n variant={_computedVariant}\n {...rest}\n >\n <CSwitch.HiddenInput className=\"Switch_Input\" data-testid={`${dataTestId}-input`} ref={switchRef || ref} />\n <CSwitch.Control className=\"Switch_Control\" data-testid={`${dataTestId}-control`} />\n {!!children && <CSwitch.Label data-testid={`${dataTestId}-label`}>{children}</CSwitch.Label>}\n </CSwitch.Root>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\nconst WrappedSwitch = withFormControl<SwitchProps>(Switch);\n\nexport { WrappedSwitch as Switch };\n"],"names":["SwitchProvider","useSwitchContext","createContext","SwitchControl","forwardRef","props","ref","switchContext","mergedProps","mergeProps","jsx","ark","SwitchHiddenInput","field","useFieldContext","SwitchLabel","useSwitch","id","useId","getRootNode","useEnvironmentContext","dir","useLocaleContext","machineProps","service","useMachine","zagSwitch.machine","zagSwitch.connect","normalizeProps","SwitchRoot","switchProps","localProps","createSplitProps","SwitchRootProvider","api","SwitchThumb","withProvider","withContext","useSwitchStyles","createSlotRecipeContext","Switch.RootProvider","Switch.Root","Switch.Label","Switch.Thumb","Switch.Control","styles","fallback","children","unstyled","rest","chakra","dataAttr","Switch.HiddenInput","Switch","React","indeterminate","onContrast","label","rootRef","size","switchRef","dataTestId","_computedVariant","useMemo","jsxs","CSwitch.Root","CSwitch.HiddenInput","CSwitch.Control","CSwitch.Label","WrappedSwitch","withFormControl"],"mappings":";;;;;;;;;;AAGA,MAAM,CAACA,GAAgBC,CAAgB,IAAIC,EAAc;AAAA,EACvD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,cAAc;AAChB,CAAC,GCAKC,IAAgBC,EAAW,CAACC,GAAOC,MAAQ;AAC/C,QAAMC,IAAgBN,EAAkB,GAClCO,IAAcC,EAAWF,EAAc,gBAAe,GAAIF,CAAK;AACrE,SAAuBK,gBAAAA,EAAAA,IAAIC,EAAI,MAAM,EAAE,GAAGH,GAAa,KAAAF,GAAK;AAC9D,CAAC;AACDH,EAAc,cAAc;ACJ5B,MAAMS,IAAoBR,EAAW,CAACC,GAAOC,MAAQ;AACnD,QAAMC,IAAgBN,EAAkB,GAClCO,IAAcC,EAAWF,EAAc,oBAAmB,GAAIF,CAAK,GACnEQ,IAAQC,EAAiB;AAC/B,SAAuBJ,gBAAAA,EAAG,IAACC,EAAI,OAAO,EAAE,oBAAoBE,GAAO,iBAAiB,GAAGL,GAAa,KAAAF,GAAK;AAC3G,CAAC;AACDM,EAAkB,cAAc;ACPhC,MAAMG,IAAcX,EAAW,CAACC,GAAOC,MAAQ;AAC7C,QAAMC,IAAgBN,EAAkB,GAClCO,IAAcC,EAAWF,EAAc,cAAa,GAAIF,CAAK;AACnE,SAAuBK,gBAAAA,EAAAA,IAAIC,EAAI,MAAM,EAAE,GAAGH,GAAa,KAAAF,GAAK;AAC9D,CAAC;AACDS,EAAY,cAAc;ACJ1B,MAAMC,IAAY,CAACX,MAAU;AAC3B,QAAMY,IAAKC,EAAO,GACZ,EAAE,aAAAC,EAAa,IAAGC,EAAuB,GACzC,EAAE,KAAAC,EAAK,IAAGC,EAAkB,GAC5BT,IAAQC,EAAiB,GACzBS,IAAe;AAAA,IACnB,IAAAN;AAAA,IACA,KAAK;AAAA,MACH,OAAOJ,GAAO,IAAI;AAAA,MAClB,aAAaA,GAAO,IAAI;AAAA,IACzB;AAAA,IACD,KAAAQ;AAAA,IACA,UAAUR,GAAO;AAAA,IACjB,UAAUA,GAAO;AAAA,IACjB,SAASA,GAAO;AAAA,IAChB,UAAUA,GAAO;AAAA,IACjB,aAAAM;AAAA,IACA,GAAGd;AAAA,EACJ,GACKmB,IAAUC,EAAWC,GAAmBH,CAAY;AAC1D,SAAOI,EAAkBH,GAASI,CAAc;AAClD,GCpBMC,IAAazB,EAAW,CAACC,GAAOC,MAAQ;AAC5C,QAAM,CAACwB,GAAaC,CAAU,IAAIC,EAAgB,EAAG3B,GAAO;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAG,GACKE,IAAgBS,EAAUc,CAAW,GACrCtB,IAAcC,EAAWF,EAAc,aAAY,GAAIwB,CAAU;AACvE,SAAuBrB,gBAAAA,EAAG,IAACV,GAAgB,EAAE,OAAOO,GAAe,UAA0BG,gBAAAA,EAAAA,IAAIC,EAAI,OAAO,EAAE,GAAGH,GAAa,KAAAF,EAAG,CAAE,EAAC,CAAE;AACxI,CAAC;AACDuB,EAAW,cAAc;ACrBzB,MAAMI,IAAqB7B,EAAW,CAACC,GAAOC,MAAQ;AACpD,QAAM,CAAC,EAAE,OAAO4B,KAAOH,CAAU,IAAIC,IAAmB3B,GAAO,CAAC,OAAO,CAAC,GAClEG,IAAcC,EAAWyB,EAAI,aAAY,GAAIH,CAAU;AAC7D,SAAuBrB,gBAAAA,EAAG,IAACV,GAAgB,EAAE,OAAOkC,GAAK,UAA0BxB,gBAAAA,EAAAA,IAAIC,EAAI,OAAO,EAAE,GAAGH,GAAa,KAAAF,EAAG,CAAE,EAAC,CAAE;AAC9H,CAAC;AACD2B,EAAmB,cAAc;ACNjC,MAAME,IAAc/B,EAAW,CAACC,GAAOC,MAAQ;AAC7C,QAAMC,IAAgBN,EAAkB,GAClCO,IAAcC,EAAWF,EAAc,cAAa,GAAIF,CAAK;AACnE,SAAuBK,gBAAAA,EAAAA,IAAIC,EAAI,MAAM,EAAE,GAAGH,GAAa,KAAAF,GAAK;AAC9D,CAAC;AACD6B,EAAY,cAAc;ACH1B,MAAM;AAAA,EACJ,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAWC;AAEb,IAAIC,EAAwB,EAAE,KAAK,SAAQ,CAAE;AAClBH,EAAaI,GAAqB,QAAQ,EAAE,gBAAgB,GAAM,CAAA;AAC7F,MAAMX,IAAaO;AAAA,EACjBK;AAAAA,EACA;AAAA,EACA,EAAE,gBAAgB,GAAI;AACxB,GAEM1B,IAAcsB;AAAA,EAClBK;AAAAA,EACA;AAAA,EACA,EAAE,gBAAgB,GAAI;AACxB,GACMP,IAAcE;AAAA,EAClBM;AAAAA,EACA;AAAA,EACA,EAAE,gBAAgB,GAAI;AACxB,GACMxC,IAAgBkC;AAAA,EACpBO;AAAAA,EACA;AAAA,EACA;AAAA,IACE,gBAAgB;AAAA,IAChB,cAAc,EAAE,UAA0BlC,gBAAAA,MAAIyB,GAAa,CAAA,CAAE,EAAC;AAAA,EAClE;AACA;AACwB/B,EAAW,SAA0BC,GAAOC,GAAK;AACvE,QAAM4B,IAAMjC,EAAkB,GACxB4C,IAASP,EAAiB,GAC1B,EAAE,UAAAQ,GAAU,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAM,IAAG5C;AAClD,SAAuBK,gBAAAA,EAAG;AAAA,IACxBwC,EAAO;AAAA,IACP;AAAA,MACE,KAAA5C;AAAA,MACA,gBAAgB6C,EAASjB,EAAI,OAAO;AAAA,MACpC,GAAGe;AAAA,MACH,KAAK,CAAED,IAA8B,SAAnBH,EAAO,WAAoBxC,EAAM,GAAG;AAAA,MACtD,UAAU6B,EAAI,UAAUa,IAAWD;AAAA,IACzC;AAAA,EACG;AACH,CAAC;AAC4B1C,EAAW,SAA+BC,GAAOC,GAAK;AACjF,QAAM4B,IAAMjC,EAAkB,GACxB,EAAE,UAAA6C,GAAU,UAAAC,GAAU,GAAGE,EAAM,IAAG5C;AACxC,SAAuBK,gBAAAA,EAAAA,IAAIwC,EAAO,MAAM,EAAE,KAAA5C,GAAK,gBAAgB6C,EAASjB,EAAI,OAAO,GAAG,GAAGe,GAAM,UAAUf,EAAI,UAAUa,IAAWD,GAAU;AAC9I,CAAC;AAED,MAAMlC,IAAoBwC,GClCpBC,IAASC,EAAM;AAAA,EACnB,CACE;AAAA,IACE,UAAAP;AAAA,IACA,eAAAQ,IAAgB;AAAA,IAChB,YAAAC;AAAA;AAAA,IAEA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,CAAC,gBAAgBC,IAAa;AAAA,IAC9B,GAAGZ;AAAA,KAEL3C,MACsB;AAChB,UAAAwD,IAAmBC,EAAQ,MAC3BR,IACKC,IAAa,4BAA4B,kBAEzCA,IAAa,eAAe,WAEpC,CAACD,GAAeC,CAAU,CAAC;AAG5B,WAAAQ,gBAAAA,EAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAaJ;AAAA,QACb,KAAKH;AAAA,QACL,MAAAC;AAAA,QACA,SAASG;AAAA,QACR,GAAGb;AAAA,QAEJ,UAAA;AAAA,UAACvC,gBAAAA,EAAAA,IAAAwD,GAAA,EAAoB,WAAU,gBAAe,eAAa,GAAGL,CAAU,UAAU,KAAKD,KAAatD,EAAK,CAAA;AAAA,UACzGI,gBAAAA,MAACyD,GAAA,EAAgB,WAAU,kBAAiB,eAAa,GAAGN,CAAU,YAAY;AAAA,UACjF,CAAC,CAACd,KAAarC,gBAAAA,EAAA,IAAA0D,GAAA,EAAc,eAAa,GAAGP,CAAU,UAAW,UAAAd,EAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC9E;AAAA,EAAA;AAGN;AAEAM,EAAO,cAAc;AACf,MAAAgB,KAAgBC,EAA6BjB,CAAM;","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
|
|
1
|
+
{"version":3,"file":"switch.component-DjN67nap.js","sources":["../../node_modules/@ark-ui/react/dist/components/switch/use-switch-context.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-control.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-hidden-input.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-label.js","../../node_modules/@ark-ui/react/dist/components/switch/use-switch.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root-provider.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-thumb.js","../../node_modules/@chakra-ui/react/dist/esm/components/switch/switch.js","../../src/components/Switch/switch.component.tsx"],"sourcesContent":["'use client';\nimport { createContext } from '../../utils/create-context.js';\n\nconst [SwitchProvider, useSwitchContext] = createContext({\n name: \"SwitchContext\",\n hookName: \"useSwitchContext\",\n providerName: \"<SwitchProvider />\"\n});\n\nexport { SwitchProvider, useSwitchContext };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchControl = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getControlProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchControl.displayName = \"SwitchControl\";\n\nexport { SwitchControl };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from '../field/use-field-context.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchHiddenInput = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);\n const field = useFieldContext();\n return /* @__PURE__ */ jsx(ark.input, { \"aria-describedby\": field?.ariaDescribedby, ...mergedProps, ref });\n});\nSwitchHiddenInput.displayName = \"SwitchHiddenInput\";\n\nexport { SwitchHiddenInput };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchLabel = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getLabelProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchLabel.displayName = \"SwitchLabel\";\n\nexport { SwitchLabel };\n","'use client';\nimport { useMachine, normalizeProps } from '@zag-js/react';\nimport * as zagSwitch from '@zag-js/switch';\nimport { useId } from 'react';\nimport { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';\nimport { useLocaleContext } from '../../providers/locale/use-locale-context.js';\nimport { useFieldContext } from '../field/use-field-context.js';\n\nconst useSwitch = (props) => {\n const id = useId();\n const { getRootNode } = useEnvironmentContext();\n const { dir } = useLocaleContext();\n const field = useFieldContext();\n const machineProps = {\n id,\n ids: {\n label: field?.ids.label,\n hiddenInput: field?.ids.control\n },\n dir,\n disabled: field?.disabled,\n readOnly: field?.readOnly,\n invalid: field?.invalid,\n required: field?.required,\n getRootNode,\n ...props\n };\n const service = useMachine(zagSwitch.machine, machineProps);\n return zagSwitch.connect(service, normalizeProps);\n};\n\nexport { useSwitch };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { useSwitch } from './use-switch.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRoot = forwardRef((props, ref) => {\n const [switchProps, localProps] = createSplitProps()(props, [\n \"checked\",\n \"defaultChecked\",\n \"disabled\",\n \"form\",\n \"id\",\n \"ids\",\n \"invalid\",\n \"label\",\n \"name\",\n \"onCheckedChange\",\n \"readOnly\",\n \"required\",\n \"value\"\n ]);\n const switchContext = useSwitch(switchProps);\n const mergedProps = mergeProps(switchContext.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: switchContext, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRoot.displayName = \"SwitchRoot\";\n\nexport { SwitchRoot };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRootProvider = forwardRef((props, ref) => {\n const [{ value: api }, localProps] = createSplitProps()(props, [\"value\"]);\n const mergedProps = mergeProps(api.getRootProps(), localProps);\n return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRootProvider.displayName = \"SwitchRootProvider\";\n\nexport { SwitchRootProvider };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchThumb = forwardRef((props, ref) => {\n const switchContext = useSwitchContext();\n const mergedProps = mergeProps(switchContext.getThumbProps(), props);\n return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchThumb.displayName = \"SwitchThumb\";\n\nexport { SwitchThumb };\n","\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { Switch, useSwitchContext } from '@ark-ui/react/switch';\nimport { forwardRef } from 'react';\nimport { dataAttr } from '../../utils/attr.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\n\nconst {\n withProvider,\n withContext,\n useStyles: useSwitchStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"switch\" });\nconst SwitchRootProvider = withProvider(Switch.RootProvider, \"root\", { forwardAsChild: true });\nconst SwitchRoot = withProvider(\n Switch.Root,\n \"root\",\n { forwardAsChild: true }\n);\nconst SwitchPropsProvider = PropsProvider;\nconst SwitchLabel = withContext(\n Switch.Label,\n \"label\",\n { forwardAsChild: true }\n);\nconst SwitchThumb = withContext(\n Switch.Thumb,\n \"thumb\",\n { forwardAsChild: true }\n);\nconst SwitchControl = withContext(\n Switch.Control,\n \"control\",\n {\n forwardAsChild: true,\n defaultProps: { children: /* @__PURE__ */ jsx(SwitchThumb, {}) }\n }\n);\nconst SwitchIndicator = forwardRef(function SwitchIndicator2(props, ref) {\n const api = useSwitchContext();\n const styles = useSwitchStyles();\n const { fallback, children, unstyled, ...rest } = props;\n return /* @__PURE__ */ jsx(\n chakra.span,\n {\n ref,\n \"data-checked\": dataAttr(api.checked),\n ...rest,\n css: [!unstyled ? styles.indicator : void 0, props.css],\n children: api.checked ? children : fallback\n }\n );\n});\nconst SwitchThumbIndicator = forwardRef(function SwitchThumbIndicator2(props, ref) {\n const api = useSwitchContext();\n const { fallback, children, ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, \"data-checked\": dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });\n});\nconst SwitchContext = Switch.Context;\nconst SwitchHiddenInput = Switch.HiddenInput;\n\nexport { SwitchContext, SwitchControl, SwitchHiddenInput, SwitchIndicator, SwitchLabel, SwitchPropsProvider, SwitchRoot, SwitchRootProvider, SwitchThumb, SwitchThumbIndicator, useSwitchStyles };\n","import React, { useMemo } from 'react';\nimport { Switch as CSwitch } from '@chakra-ui/react/switch';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\n\nexport interface SwitchProps extends WithFormControlProps, Omit<CSwitch.RootProps, 'label' | 'onChange'> {\n /**\n * If true, the switch will be indeterminate. This only affects the switch visually and does not modify the checked property.\n * @default false\n */\n indeterminate?: boolean;\n /** Ref to the switch component. */\n rootRef?: React.Ref<HTMLLabelElement | null>;\n /**\n * Size of the switch.\n * @default md\n */\n size?: FormControlSize;\n /** Ref to the hiddeninput element. */\n switchRef?: React.Ref<HTMLInputElement | null>;\n /**\n * Data test id for the switch.\n * @default kibble-switch\n */\n 'data-testid'?: string;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n (\n {\n children,\n indeterminate = false,\n onContrast,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n label,\n rootRef,\n size = 'md',\n switchRef,\n ['data-testid']: dataTestId = 'kibble-switch',\n ...rest\n },\n ref,\n ): React.JSX.Element => {\n const _computedVariant = useMemo(() => {\n if (indeterminate) {\n return onContrast ? 'indeterminateOnContrast' : 'indeterminate';\n } else {\n return onContrast ? 'onContrast' : 'default';\n }\n }, [indeterminate, onContrast]);\n\n return (\n <CSwitch.Root\n className=\"Switch\"\n data-testid={dataTestId}\n ref={rootRef}\n size={size}\n variant={_computedVariant}\n {...rest}\n >\n <CSwitch.HiddenInput className=\"Switch_Input\" data-testid={`${dataTestId}-input`} ref={switchRef || ref} />\n <CSwitch.Control className=\"Switch_Control\" data-testid={`${dataTestId}-control`} />\n {!!children && <CSwitch.Label data-testid={`${dataTestId}-label`}>{children}</CSwitch.Label>}\n </CSwitch.Root>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\nconst WrappedSwitch = withFormControl<SwitchProps>(Switch);\n\nexport { WrappedSwitch as Switch };\n"],"names":["SwitchProvider","useSwitchContext","createContext","SwitchControl","forwardRef","props","ref","switchContext","mergedProps","mergeProps","jsx","ark","SwitchHiddenInput","field","useFieldContext","SwitchLabel","useSwitch","id","useId","getRootNode","useEnvironmentContext","dir","useLocaleContext","machineProps","service","useMachine","zagSwitch.machine","zagSwitch.connect","normalizeProps","SwitchRoot","switchProps","localProps","createSplitProps","SwitchRootProvider","api","SwitchThumb","withProvider","withContext","useSwitchStyles","createSlotRecipeContext","Switch.RootProvider","Switch.Root","Switch.Label","Switch.Thumb","Switch.Control","styles","fallback","children","unstyled","rest","chakra","dataAttr","Switch.HiddenInput","Switch","React","indeterminate","onContrast","label","rootRef","size","switchRef","dataTestId","_computedVariant","useMemo","jsxs","CSwitch.Root","CSwitch.HiddenInput","CSwitch.Control","CSwitch.Label","WrappedSwitch","withFormControl"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),d=require("react"),a=require("./index-BQRnVsAg.js"),h=require("./button.component-DjdgBXDC.js"),E=require("./heading.component-DnoZOXdz.js"),N=require("./menu.component-
|
|
2
|
-
//# sourceMappingURL=tagBlock.component-
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),d=require("react"),a=require("./index-BQRnVsAg.js"),h=require("./button.component-DjdgBXDC.js"),E=require("./heading.component-DnoZOXdz.js"),N=require("./menu.component-D2V9Q1Y5.js"),v=require("./spinner.component-Dq6u4vVL.js"),q=require("./tag.component-C98Wf07v.js"),_=require("./text.component-BDDz5KQP.js"),i=require("./flex-BOU6tYUd.js"),w=require("./h-stack-D4MnHHRc.js"),T=n=>n&&n.__esModule?n:{default:n},$=T(d);var c=(n=>(n.Inactive="Inactive",n.Deleted="Deleted",n))(c||{});const y={size:"sm",variant:"secondarySubtle",iconName:"plus",text:"Add",hideCaret:!0},D=({title:n,menuProps:p,tags:o,canBeDeleted:B=!1,onClearAll:k,onRemoveTag:u,onDelete:R,hasError:m=!1,errorText:C="This field contains an error",displayTagsInGroups:x,loading:j=!1,["data-testid"]:r="kibble-tag-block"})=>{const b=d.useCallback(s=>{u&&u(s,o)},[u,o]),f=$.default.useMemo(()=>{if(!x)return[];const s={};for(const t of o){const l=t.groupLabel||"-";s[l]||(s[l]=[]),s[l].push(t)}return Object.entries(s).map(([t,l])=>({groupLabel:t,tags:l}))},[o,x]),g=d.useCallback(s=>s.map(t=>{const l=t.label.includes(c.Inactive)||t.label.includes(c.Deleted);return e.jsxRuntimeExports.jsx(q.Tag,{className:"TagBlock__Tag","data-testid":`${r}-tag`,mr:1,mb:1,label:t.label,onClose:()=>b(t.value),closeButtonDisplay:"always",fontWeight:"normal",color:l?"text.placeholder":"text",size:"md"},t.value)}),[b,r]);return e.jsxRuntimeExports.jsxs(a.Box,{className:"TagBlock","data-testid":r,position:"relative",mb:3,py:2,pl:4,pr:2,bg:"background.subtle",borderRadius:"lg",boxShadow:m?"0 0 0 2px var(--chakra-colors-border-danger)":"",border:"1px",borderColor:"border",overflow:j?"hidden":void 0,children:[e.jsxRuntimeExports.jsxs(i.Flex,{className:"TagBlock__ButtonContainer","data-testid":`${r}-button-container`,justifyContent:"space-between",children:[e.jsxRuntimeExports.jsxs(w.HStack,{gap:1,minH:10,children:[n&&e.jsxRuntimeExports.jsx(_.WrappedText,{className:"TagBlock__Title",mr:2,fontWeight:"bold",children:n}),e.jsxRuntimeExports.jsx(N.Menu,{"data-testid":`${r}-menu`,...p,buttonProps:p?.buttonProps||y}),e.jsxRuntimeExports.jsx(h.Button,{className:"TagBlock__Button--ClearAll","data-testid":`${r}-clear-all-button`,size:"sm",iconName:"arrowCircle",variant:"ghostNeutral",onClick:k,disabled:o.length<=0,children:"Clear All"})]}),B&&e.jsxRuntimeExports.jsx(a.Box,{children:e.jsxRuntimeExports.jsx(h.Button,{className:"TagBlock__Button--Delete","data-testid":`${r}-delete-button`,iconName:"trashcan",variant:"ghostNeutral",onClick:R,justifySelf:"flex-end"})})]}),!!o.length&&e.jsxRuntimeExports.jsx(i.Flex,{className:"TagBlock__TagContainer","data-testid":`${r}-tag-container`,mt:2,pb:1,alignContent:"space-between",flexWrap:"wrap",justifyContent:"flex-start",alignItems:"flex-start",children:x&&f.length?e.jsxRuntimeExports.jsx(i.Flex,{direction:"column",children:f.map(({groupLabel:s,tags:t})=>e.jsxRuntimeExports.jsxs(a.Box,{mb:2,children:[e.jsxRuntimeExports.jsx(a.Box,{className:"TagBlock__GroupTitle","data-testid":`${r}-group-title`,children:e.jsxRuntimeExports.jsx(E.WrappedHeading,{size:"xs",pb:2,children:s})}),e.jsxRuntimeExports.jsx(i.Flex,{alignContent:"space-between",flexWrap:"wrap",justifyContent:"flex-start",alignItems:"flex-start",children:g(t)})]},s))}):g(o)}),j&&e.jsxRuntimeExports.jsx(v.Spinner,{fullScreen:!0}),m&&e.jsxRuntimeExports.jsx(_.WrappedText,{className:"TagBlock__Error","data-testid":`${r}-error`,mt:2,size:"xs",variant:"danger",children:C})]})};exports.TagBlock=D;exports.TagDisabledState=c;
|
|
2
|
+
//# sourceMappingURL=tagBlock.component-B899iqQP.js.map
|
package/dist/chunks/{tagBlock.component-vtBWiOLi.js.map → tagBlock.component-B899iqQP.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagBlock.component-vtBWiOLi.js","sources":["../../src/components/TagBlock/tagBlock.types.ts","../../src/components/TagBlock/tagBlock.component.tsx"],"sourcesContent":["export enum TagDisabledState {\n Inactive = 'Inactive',\n Deleted = 'Deleted',\n}\n\nexport interface TagBlockTag {\n label: string;\n value: string;\n groupLabel?: string;\n}\n","import React, { useCallback } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Menu, MenuProps } from 'components/Menu/menu.component';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Tag } from 'components/Tag/tag.component';\nimport { Text } from 'components/Text/text.component';\nimport { TagBlockTag, TagDisabledState } from './tagBlock.types';\nimport { MenuButtonProps } from 'components/Menu/components/MenuButton/menuButton.component';\n\ninterface BaseTagBlockProps {\n /**\n * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.\n * @default false\n */\n displayTagsInGroups?: boolean;\n /**\n * The error message to be displayed if the `hasError` prop is set to true.\n * @default This field contains an error\n */\n errorText?: string;\n /**\n * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.\n * @default false\n */\n hasError?: boolean;\n /**\n * If true, a loading spinner will cover the tag block preventing users from making further selections.\n * @default false\n */\n loading?: boolean;\n /** Configuration for the Menu component. See `Menu` stories for more information. */\n menuProps?: MenuProps;\n /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */\n onClearAll?: () => void;\n /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */\n onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n /** The selected items to be shown as tags in the tag block. */\n tags: TagBlockTag[];\n /** The title of the tag block, if provided, will be shown next to the add new menu button. */\n title?: string;\n /** Data test id for the tag block. */\n 'data-testid'?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted?: false;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted: true;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete: () => void;\n}\n\nexport type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;\n\nconst defaultMenuButtonProps: MenuButtonProps = {\n size: 'sm',\n variant: 'secondarySubtle',\n iconName: 'plus',\n text: 'Add',\n hideCaret: true,\n};\n\nexport const TagBlock = ({\n title,\n menuProps,\n tags,\n canBeDeleted = false,\n onClearAll,\n onRemoveTag,\n onDelete,\n hasError = false,\n errorText = 'This field contains an error',\n displayTagsInGroups,\n loading = false,\n ['data-testid']: dataTestId = 'kibble-tag-block',\n}: TagBlockProps): React.JSX.Element => {\n const handleRemoveTag = useCallback(\n (value: string): void => {\n if (onRemoveTag) {\n onRemoveTag(value, tags);\n }\n },\n [onRemoveTag, tags],\n );\n\n const tagsByGroup = React.useMemo(() => {\n if (!displayTagsInGroups) {\n return [];\n }\n const grouped = {} as Record<string, TagBlockTag[]>;\n for (const tag of tags) {\n const group = tag.groupLabel || '-';\n if (!grouped[group]) {\n grouped[group] = [];\n }\n grouped[group].push(tag);\n }\n return Object.entries(grouped).map(([groupLabel, tags]) => ({\n groupLabel,\n tags,\n }));\n }, [tags, displayTagsInGroups]);\n\n const renderTags = useCallback(\n (tags: TagBlockTag[]) => {\n return tags.map((tag) => {\n const isDisabled =\n tag.label.includes(TagDisabledState.Inactive) || tag.label.includes(TagDisabledState.Deleted);\n\n return (\n <Tag\n className=\"TagBlock__Tag\"\n data-testid={`${dataTestId}-tag`}\n mr={1}\n mb={1}\n key={tag.value}\n label={tag.label}\n onClose={(): void => handleRemoveTag(tag.value)}\n closeButtonDisplay=\"always\"\n fontWeight=\"normal\"\n color={isDisabled ? 'text.placeholder' : 'text'}\n size=\"md\"\n />\n );\n });\n },\n [handleRemoveTag, dataTestId],\n );\n\n return (\n <Box\n className=\"TagBlock\"\n data-testid={dataTestId}\n position=\"relative\"\n mb={3}\n py={2}\n pl={4}\n pr={2}\n bg=\"background.subtle\"\n borderRadius=\"lg\"\n boxShadow={hasError ? `0 0 0 2px var(--chakra-colors-border-danger)` : ''}\n border=\"1px\"\n borderColor=\"border\"\n overflow={loading ? 'hidden' : undefined}\n >\n <Flex\n className=\"TagBlock__ButtonContainer\"\n data-testid={`${dataTestId}-button-container`}\n justifyContent=\"space-between\"\n >\n <HStack gap={1} minH={10}>\n {title && (\n <Text className=\"TagBlock__Title\" mr={2} fontWeight=\"bold\">\n {title}\n </Text>\n )}\n <Menu\n data-testid={`${dataTestId}-menu`}\n {...menuProps}\n buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n />\n <Button\n className=\"TagBlock__Button--ClearAll\"\n data-testid={`${dataTestId}-clear-all-button`}\n size=\"sm\"\n iconName=\"arrowCircle\"\n variant=\"ghostNeutral\"\n onClick={onClearAll}\n disabled={tags.length <= 0}\n >\n Clear All\n </Button>\n </HStack>\n {canBeDeleted && (\n <Box>\n <Button\n className=\"TagBlock__Button--Delete\"\n data-testid={`${dataTestId}-delete-button`}\n iconName=\"trashcan\"\n variant=\"ghostNeutral\"\n onClick={onDelete}\n justifySelf=\"flex-end\"\n />\n </Box>\n )}\n </Flex>\n {Boolean(tags.length) && (\n <Flex\n className=\"TagBlock__TagContainer\"\n data-testid={`${dataTestId}-tag-container`}\n mt={2}\n pb={1}\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {displayTagsInGroups && tagsByGroup.length ? (\n <Flex direction=\"column\">\n {tagsByGroup.map(({ groupLabel, tags }) => (\n <Box key={groupLabel} mb={2}>\n <Box className=\"TagBlock__GroupTitle\" data-testid={`${dataTestId}-group-title`}>\n <Heading size=\"xs\" pb={2}>\n {groupLabel}\n </Heading>\n </Box>\n <Flex\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {renderTags(tags)}\n </Flex>\n </Box>\n ))}\n </Flex>\n ) : (\n renderTags(tags)\n )}\n </Flex>\n )}\n {loading && <Spinner fullScreen />}\n {hasError && (\n <Text className=\"TagBlock__Error\" data-testid={`${dataTestId}-error`} mt={2} size=\"xs\" variant=\"danger\">\n {errorText}\n </Text>\n )}\n </Box>\n );\n};\n"],"names":["TagDisabledState","defaultMenuButtonProps","TagBlock","title","menuProps","tags","canBeDeleted","onClearAll","onRemoveTag","onDelete","hasError","errorText","displayTagsInGroups","loading","dataTestId","handleRemoveTag","useCallback","value","tagsByGroup","React","grouped","tag","group","groupLabel","renderTags","isDisabled","jsx","Tag","jsxs","Box","Flex","HStack","Text","Menu","Button","Heading","Spinner"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tagBlock.component-B899iqQP.js","sources":["../../src/components/TagBlock/tagBlock.types.ts","../../src/components/TagBlock/tagBlock.component.tsx"],"sourcesContent":["export enum TagDisabledState {\n Inactive = 'Inactive',\n Deleted = 'Deleted',\n}\n\nexport interface TagBlockTag {\n label: string;\n value: string;\n groupLabel?: string;\n}\n","import React, { useCallback } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Menu, MenuProps } from 'components/Menu/menu.component';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Tag } from 'components/Tag/tag.component';\nimport { Text } from 'components/Text/text.component';\nimport { TagBlockTag, TagDisabledState } from './tagBlock.types';\nimport { MenuButtonProps } from 'components/Menu/components/MenuButton/menuButton.component';\n\ninterface BaseTagBlockProps {\n /**\n * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.\n * @default false\n */\n displayTagsInGroups?: boolean;\n /**\n * The error message to be displayed if the `hasError` prop is set to true.\n * @default This field contains an error\n */\n errorText?: string;\n /**\n * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.\n * @default false\n */\n hasError?: boolean;\n /**\n * If true, a loading spinner will cover the tag block preventing users from making further selections.\n * @default false\n */\n loading?: boolean;\n /** Configuration for the Menu component. See `Menu` stories for more information. */\n menuProps?: MenuProps;\n /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */\n onClearAll?: () => void;\n /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */\n onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n /** The selected items to be shown as tags in the tag block. */\n tags: TagBlockTag[];\n /** The title of the tag block, if provided, will be shown next to the add new menu button. */\n title?: string;\n /** Data test id for the tag block. */\n 'data-testid'?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted?: false;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted: true;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete: () => void;\n}\n\nexport type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;\n\nconst defaultMenuButtonProps: MenuButtonProps = {\n size: 'sm',\n variant: 'secondarySubtle',\n iconName: 'plus',\n text: 'Add',\n hideCaret: true,\n};\n\nexport const TagBlock = ({\n title,\n menuProps,\n tags,\n canBeDeleted = false,\n onClearAll,\n onRemoveTag,\n onDelete,\n hasError = false,\n errorText = 'This field contains an error',\n displayTagsInGroups,\n loading = false,\n ['data-testid']: dataTestId = 'kibble-tag-block',\n}: TagBlockProps): React.JSX.Element => {\n const handleRemoveTag = useCallback(\n (value: string): void => {\n if (onRemoveTag) {\n onRemoveTag(value, tags);\n }\n },\n [onRemoveTag, tags],\n );\n\n const tagsByGroup = React.useMemo(() => {\n if (!displayTagsInGroups) {\n return [];\n }\n const grouped = {} as Record<string, TagBlockTag[]>;\n for (const tag of tags) {\n const group = tag.groupLabel || '-';\n if (!grouped[group]) {\n grouped[group] = [];\n }\n grouped[group].push(tag);\n }\n return Object.entries(grouped).map(([groupLabel, tags]) => ({\n groupLabel,\n tags,\n }));\n }, [tags, displayTagsInGroups]);\n\n const renderTags = useCallback(\n (tags: TagBlockTag[]) => {\n return tags.map((tag) => {\n const isDisabled =\n tag.label.includes(TagDisabledState.Inactive) || tag.label.includes(TagDisabledState.Deleted);\n\n return (\n <Tag\n className=\"TagBlock__Tag\"\n data-testid={`${dataTestId}-tag`}\n mr={1}\n mb={1}\n key={tag.value}\n label={tag.label}\n onClose={(): void => handleRemoveTag(tag.value)}\n closeButtonDisplay=\"always\"\n fontWeight=\"normal\"\n color={isDisabled ? 'text.placeholder' : 'text'}\n size=\"md\"\n />\n );\n });\n },\n [handleRemoveTag, dataTestId],\n );\n\n return (\n <Box\n className=\"TagBlock\"\n data-testid={dataTestId}\n position=\"relative\"\n mb={3}\n py={2}\n pl={4}\n pr={2}\n bg=\"background.subtle\"\n borderRadius=\"lg\"\n boxShadow={hasError ? `0 0 0 2px var(--chakra-colors-border-danger)` : ''}\n border=\"1px\"\n borderColor=\"border\"\n overflow={loading ? 'hidden' : undefined}\n >\n <Flex\n className=\"TagBlock__ButtonContainer\"\n data-testid={`${dataTestId}-button-container`}\n justifyContent=\"space-between\"\n >\n <HStack gap={1} minH={10}>\n {title && (\n <Text className=\"TagBlock__Title\" mr={2} fontWeight=\"bold\">\n {title}\n </Text>\n )}\n <Menu\n data-testid={`${dataTestId}-menu`}\n {...menuProps}\n buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n />\n <Button\n className=\"TagBlock__Button--ClearAll\"\n data-testid={`${dataTestId}-clear-all-button`}\n size=\"sm\"\n iconName=\"arrowCircle\"\n variant=\"ghostNeutral\"\n onClick={onClearAll}\n disabled={tags.length <= 0}\n >\n Clear All\n </Button>\n </HStack>\n {canBeDeleted && (\n <Box>\n <Button\n className=\"TagBlock__Button--Delete\"\n data-testid={`${dataTestId}-delete-button`}\n iconName=\"trashcan\"\n variant=\"ghostNeutral\"\n onClick={onDelete}\n justifySelf=\"flex-end\"\n />\n </Box>\n )}\n </Flex>\n {Boolean(tags.length) && (\n <Flex\n className=\"TagBlock__TagContainer\"\n data-testid={`${dataTestId}-tag-container`}\n mt={2}\n pb={1}\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {displayTagsInGroups && tagsByGroup.length ? (\n <Flex direction=\"column\">\n {tagsByGroup.map(({ groupLabel, tags }) => (\n <Box key={groupLabel} mb={2}>\n <Box className=\"TagBlock__GroupTitle\" data-testid={`${dataTestId}-group-title`}>\n <Heading size=\"xs\" pb={2}>\n {groupLabel}\n </Heading>\n </Box>\n <Flex\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {renderTags(tags)}\n </Flex>\n </Box>\n ))}\n </Flex>\n ) : (\n renderTags(tags)\n )}\n </Flex>\n )}\n {loading && <Spinner fullScreen />}\n {hasError && (\n <Text className=\"TagBlock__Error\" data-testid={`${dataTestId}-error`} mt={2} size=\"xs\" variant=\"danger\">\n {errorText}\n </Text>\n )}\n </Box>\n );\n};\n"],"names":["TagDisabledState","defaultMenuButtonProps","TagBlock","title","menuProps","tags","canBeDeleted","onClearAll","onRemoveTag","onDelete","hasError","errorText","displayTagsInGroups","loading","dataTestId","handleRemoveTag","useCallback","value","tagsByGroup","React","grouped","tag","group","groupLabel","renderTags","isDisabled","jsx","Tag","jsxs","Box","Flex","HStack","Text","Menu","Button","Heading","Spinner"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import v, { useCallback as g } from "react";
|
|
|
3
3
|
import { B as s } from "./index-9BerxEcw.js";
|
|
4
4
|
import { B as j } from "./button.component-BO6oee_V.js";
|
|
5
5
|
import { W as w } from "./heading.component-CpSAN3cv.js";
|
|
6
|
-
import { M as W } from "./menu.component-
|
|
6
|
+
import { M as W } from "./menu.component-WHzMw5ZI.js";
|
|
7
7
|
import { S as $ } from "./spinner.component-CNHQ8UDz.js";
|
|
8
8
|
import { T as y } from "./tag.component-CMsZIhN-.js";
|
|
9
9
|
import { W as B } from "./text.component-DhuUgP3j.js";
|
|
@@ -167,4 +167,4 @@ export {
|
|
|
167
167
|
G as T,
|
|
168
168
|
d as a
|
|
169
169
|
};
|
|
170
|
-
//# sourceMappingURL=tagBlock.component-
|
|
170
|
+
//# sourceMappingURL=tagBlock.component-CT7_RyJ-.js.map
|
package/dist/chunks/{tagBlock.component-D--q_dqh.js.map → tagBlock.component-CT7_RyJ-.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tagBlock.component-D--q_dqh.js","sources":["../../src/components/TagBlock/tagBlock.types.ts","../../src/components/TagBlock/tagBlock.component.tsx"],"sourcesContent":["export enum TagDisabledState {\n Inactive = 'Inactive',\n Deleted = 'Deleted',\n}\n\nexport interface TagBlockTag {\n label: string;\n value: string;\n groupLabel?: string;\n}\n","import React, { useCallback } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Menu, MenuProps } from 'components/Menu/menu.component';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Tag } from 'components/Tag/tag.component';\nimport { Text } from 'components/Text/text.component';\nimport { TagBlockTag, TagDisabledState } from './tagBlock.types';\nimport { MenuButtonProps } from 'components/Menu/components/MenuButton/menuButton.component';\n\ninterface BaseTagBlockProps {\n /**\n * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.\n * @default false\n */\n displayTagsInGroups?: boolean;\n /**\n * The error message to be displayed if the `hasError` prop is set to true.\n * @default This field contains an error\n */\n errorText?: string;\n /**\n * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.\n * @default false\n */\n hasError?: boolean;\n /**\n * If true, a loading spinner will cover the tag block preventing users from making further selections.\n * @default false\n */\n loading?: boolean;\n /** Configuration for the Menu component. See `Menu` stories for more information. */\n menuProps?: MenuProps;\n /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */\n onClearAll?: () => void;\n /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */\n onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n /** The selected items to be shown as tags in the tag block. */\n tags: TagBlockTag[];\n /** The title of the tag block, if provided, will be shown next to the add new menu button. */\n title?: string;\n /** Data test id for the tag block. */\n 'data-testid'?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted?: false;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted: true;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete: () => void;\n}\n\nexport type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;\n\nconst defaultMenuButtonProps: MenuButtonProps = {\n size: 'sm',\n variant: 'secondarySubtle',\n iconName: 'plus',\n text: 'Add',\n hideCaret: true,\n};\n\nexport const TagBlock = ({\n title,\n menuProps,\n tags,\n canBeDeleted = false,\n onClearAll,\n onRemoveTag,\n onDelete,\n hasError = false,\n errorText = 'This field contains an error',\n displayTagsInGroups,\n loading = false,\n ['data-testid']: dataTestId = 'kibble-tag-block',\n}: TagBlockProps): React.JSX.Element => {\n const handleRemoveTag = useCallback(\n (value: string): void => {\n if (onRemoveTag) {\n onRemoveTag(value, tags);\n }\n },\n [onRemoveTag, tags],\n );\n\n const tagsByGroup = React.useMemo(() => {\n if (!displayTagsInGroups) {\n return [];\n }\n const grouped = {} as Record<string, TagBlockTag[]>;\n for (const tag of tags) {\n const group = tag.groupLabel || '-';\n if (!grouped[group]) {\n grouped[group] = [];\n }\n grouped[group].push(tag);\n }\n return Object.entries(grouped).map(([groupLabel, tags]) => ({\n groupLabel,\n tags,\n }));\n }, [tags, displayTagsInGroups]);\n\n const renderTags = useCallback(\n (tags: TagBlockTag[]) => {\n return tags.map((tag) => {\n const isDisabled =\n tag.label.includes(TagDisabledState.Inactive) || tag.label.includes(TagDisabledState.Deleted);\n\n return (\n <Tag\n className=\"TagBlock__Tag\"\n data-testid={`${dataTestId}-tag`}\n mr={1}\n mb={1}\n key={tag.value}\n label={tag.label}\n onClose={(): void => handleRemoveTag(tag.value)}\n closeButtonDisplay=\"always\"\n fontWeight=\"normal\"\n color={isDisabled ? 'text.placeholder' : 'text'}\n size=\"md\"\n />\n );\n });\n },\n [handleRemoveTag, dataTestId],\n );\n\n return (\n <Box\n className=\"TagBlock\"\n data-testid={dataTestId}\n position=\"relative\"\n mb={3}\n py={2}\n pl={4}\n pr={2}\n bg=\"background.subtle\"\n borderRadius=\"lg\"\n boxShadow={hasError ? `0 0 0 2px var(--chakra-colors-border-danger)` : ''}\n border=\"1px\"\n borderColor=\"border\"\n overflow={loading ? 'hidden' : undefined}\n >\n <Flex\n className=\"TagBlock__ButtonContainer\"\n data-testid={`${dataTestId}-button-container`}\n justifyContent=\"space-between\"\n >\n <HStack gap={1} minH={10}>\n {title && (\n <Text className=\"TagBlock__Title\" mr={2} fontWeight=\"bold\">\n {title}\n </Text>\n )}\n <Menu\n data-testid={`${dataTestId}-menu`}\n {...menuProps}\n buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n />\n <Button\n className=\"TagBlock__Button--ClearAll\"\n data-testid={`${dataTestId}-clear-all-button`}\n size=\"sm\"\n iconName=\"arrowCircle\"\n variant=\"ghostNeutral\"\n onClick={onClearAll}\n disabled={tags.length <= 0}\n >\n Clear All\n </Button>\n </HStack>\n {canBeDeleted && (\n <Box>\n <Button\n className=\"TagBlock__Button--Delete\"\n data-testid={`${dataTestId}-delete-button`}\n iconName=\"trashcan\"\n variant=\"ghostNeutral\"\n onClick={onDelete}\n justifySelf=\"flex-end\"\n />\n </Box>\n )}\n </Flex>\n {Boolean(tags.length) && (\n <Flex\n className=\"TagBlock__TagContainer\"\n data-testid={`${dataTestId}-tag-container`}\n mt={2}\n pb={1}\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {displayTagsInGroups && tagsByGroup.length ? (\n <Flex direction=\"column\">\n {tagsByGroup.map(({ groupLabel, tags }) => (\n <Box key={groupLabel} mb={2}>\n <Box className=\"TagBlock__GroupTitle\" data-testid={`${dataTestId}-group-title`}>\n <Heading size=\"xs\" pb={2}>\n {groupLabel}\n </Heading>\n </Box>\n <Flex\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {renderTags(tags)}\n </Flex>\n </Box>\n ))}\n </Flex>\n ) : (\n renderTags(tags)\n )}\n </Flex>\n )}\n {loading && <Spinner fullScreen />}\n {hasError && (\n <Text className=\"TagBlock__Error\" data-testid={`${dataTestId}-error`} mt={2} size=\"xs\" variant=\"danger\">\n {errorText}\n </Text>\n )}\n </Box>\n );\n};\n"],"names":["TagDisabledState","defaultMenuButtonProps","TagBlock","title","menuProps","tags","canBeDeleted","onClearAll","onRemoveTag","onDelete","hasError","errorText","displayTagsInGroups","loading","dataTestId","handleRemoveTag","useCallback","value","tagsByGroup","React","grouped","tag","group","groupLabel","renderTags","isDisabled","jsx","Tag","jsxs","Box","Flex","HStack","Text","Menu","Button","Heading","Spinner"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tagBlock.component-CT7_RyJ-.js","sources":["../../src/components/TagBlock/tagBlock.types.ts","../../src/components/TagBlock/tagBlock.component.tsx"],"sourcesContent":["export enum TagDisabledState {\n Inactive = 'Inactive',\n Deleted = 'Deleted',\n}\n\nexport interface TagBlockTag {\n label: string;\n value: string;\n groupLabel?: string;\n}\n","import React, { useCallback } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Menu, MenuProps } from 'components/Menu/menu.component';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Tag } from 'components/Tag/tag.component';\nimport { Text } from 'components/Text/text.component';\nimport { TagBlockTag, TagDisabledState } from './tagBlock.types';\nimport { MenuButtonProps } from 'components/Menu/components/MenuButton/menuButton.component';\n\ninterface BaseTagBlockProps {\n /**\n * If true, tags will be grouped by the `groupName` property of the tag object. If false, tags will be displayed in a single group.\n * @default false\n */\n displayTagsInGroups?: boolean;\n /**\n * The error message to be displayed if the `hasError` prop is set to true.\n * @default This field contains an error\n */\n errorText?: string;\n /**\n * If true, the tag block will show an error message and have error styling. You can customize the error message with the `errorText` prop.\n * @default false\n */\n hasError?: boolean;\n /**\n * If true, a loading spinner will cover the tag block preventing users from making further selections.\n * @default false\n */\n loading?: boolean;\n /** Configuration for the Menu component. See `Menu` stories for more information. */\n menuProps?: MenuProps;\n /** Callback function fired when user clicks the clear all button which unselects all items in the menu and removes all tags from the tag block. */\n onClearAll?: () => void;\n /** Callback function fired when user clicks the close button on an individual tag to remove the tag from the tag block. Args include the tag id of the deleted tag and an array of the remaining selected tags. */\n onRemoveTag?: (tag: string, selectedTags: TagBlockTag[]) => void;\n /** The selected items to be shown as tags in the tag block. */\n tags: TagBlockTag[];\n /** The title of the tag block, if provided, will be shown next to the add new menu button. */\n title?: string;\n /** Data test id for the tag block. */\n 'data-testid'?: string;\n}\n\ninterface DefaultTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted?: false;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete?: never;\n}\n\ninterface DeletableTagBlockProps extends BaseTagBlockProps {\n /**\n * If true, a delete button will be shown so that the block can be removed. If set to true the `handleDelete` prop should also be specified.\n * @default false\n */\n canBeDeleted: true;\n /** Function passed to be called when clicking the delete button on the tag block. Only relevant if the `canBeDeleted` prop is true. */\n onDelete: () => void;\n}\n\nexport type TagBlockProps = DefaultTagBlockProps | DeletableTagBlockProps;\n\nconst defaultMenuButtonProps: MenuButtonProps = {\n size: 'sm',\n variant: 'secondarySubtle',\n iconName: 'plus',\n text: 'Add',\n hideCaret: true,\n};\n\nexport const TagBlock = ({\n title,\n menuProps,\n tags,\n canBeDeleted = false,\n onClearAll,\n onRemoveTag,\n onDelete,\n hasError = false,\n errorText = 'This field contains an error',\n displayTagsInGroups,\n loading = false,\n ['data-testid']: dataTestId = 'kibble-tag-block',\n}: TagBlockProps): React.JSX.Element => {\n const handleRemoveTag = useCallback(\n (value: string): void => {\n if (onRemoveTag) {\n onRemoveTag(value, tags);\n }\n },\n [onRemoveTag, tags],\n );\n\n const tagsByGroup = React.useMemo(() => {\n if (!displayTagsInGroups) {\n return [];\n }\n const grouped = {} as Record<string, TagBlockTag[]>;\n for (const tag of tags) {\n const group = tag.groupLabel || '-';\n if (!grouped[group]) {\n grouped[group] = [];\n }\n grouped[group].push(tag);\n }\n return Object.entries(grouped).map(([groupLabel, tags]) => ({\n groupLabel,\n tags,\n }));\n }, [tags, displayTagsInGroups]);\n\n const renderTags = useCallback(\n (tags: TagBlockTag[]) => {\n return tags.map((tag) => {\n const isDisabled =\n tag.label.includes(TagDisabledState.Inactive) || tag.label.includes(TagDisabledState.Deleted);\n\n return (\n <Tag\n className=\"TagBlock__Tag\"\n data-testid={`${dataTestId}-tag`}\n mr={1}\n mb={1}\n key={tag.value}\n label={tag.label}\n onClose={(): void => handleRemoveTag(tag.value)}\n closeButtonDisplay=\"always\"\n fontWeight=\"normal\"\n color={isDisabled ? 'text.placeholder' : 'text'}\n size=\"md\"\n />\n );\n });\n },\n [handleRemoveTag, dataTestId],\n );\n\n return (\n <Box\n className=\"TagBlock\"\n data-testid={dataTestId}\n position=\"relative\"\n mb={3}\n py={2}\n pl={4}\n pr={2}\n bg=\"background.subtle\"\n borderRadius=\"lg\"\n boxShadow={hasError ? `0 0 0 2px var(--chakra-colors-border-danger)` : ''}\n border=\"1px\"\n borderColor=\"border\"\n overflow={loading ? 'hidden' : undefined}\n >\n <Flex\n className=\"TagBlock__ButtonContainer\"\n data-testid={`${dataTestId}-button-container`}\n justifyContent=\"space-between\"\n >\n <HStack gap={1} minH={10}>\n {title && (\n <Text className=\"TagBlock__Title\" mr={2} fontWeight=\"bold\">\n {title}\n </Text>\n )}\n <Menu\n data-testid={`${dataTestId}-menu`}\n {...menuProps}\n buttonProps={menuProps?.buttonProps || defaultMenuButtonProps}\n />\n <Button\n className=\"TagBlock__Button--ClearAll\"\n data-testid={`${dataTestId}-clear-all-button`}\n size=\"sm\"\n iconName=\"arrowCircle\"\n variant=\"ghostNeutral\"\n onClick={onClearAll}\n disabled={tags.length <= 0}\n >\n Clear All\n </Button>\n </HStack>\n {canBeDeleted && (\n <Box>\n <Button\n className=\"TagBlock__Button--Delete\"\n data-testid={`${dataTestId}-delete-button`}\n iconName=\"trashcan\"\n variant=\"ghostNeutral\"\n onClick={onDelete}\n justifySelf=\"flex-end\"\n />\n </Box>\n )}\n </Flex>\n {Boolean(tags.length) && (\n <Flex\n className=\"TagBlock__TagContainer\"\n data-testid={`${dataTestId}-tag-container`}\n mt={2}\n pb={1}\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {displayTagsInGroups && tagsByGroup.length ? (\n <Flex direction=\"column\">\n {tagsByGroup.map(({ groupLabel, tags }) => (\n <Box key={groupLabel} mb={2}>\n <Box className=\"TagBlock__GroupTitle\" data-testid={`${dataTestId}-group-title`}>\n <Heading size=\"xs\" pb={2}>\n {groupLabel}\n </Heading>\n </Box>\n <Flex\n alignContent=\"space-between\"\n flexWrap=\"wrap\"\n justifyContent=\"flex-start\"\n alignItems=\"flex-start\"\n >\n {renderTags(tags)}\n </Flex>\n </Box>\n ))}\n </Flex>\n ) : (\n renderTags(tags)\n )}\n </Flex>\n )}\n {loading && <Spinner fullScreen />}\n {hasError && (\n <Text className=\"TagBlock__Error\" data-testid={`${dataTestId}-error`} mt={2} size=\"xs\" variant=\"danger\">\n {errorText}\n </Text>\n )}\n </Box>\n );\n};\n"],"names":["TagDisabledState","defaultMenuButtonProps","TagBlock","title","menuProps","tags","canBeDeleted","onClearAll","onRemoveTag","onDelete","hasError","errorText","displayTagsInGroups","loading","dataTestId","handleRemoveTag","useCallback","value","tagsByGroup","React","grouped","tag","group","groupLabel","renderTags","isDisabled","jsx","Tag","jsxs","Box","Flex","HStack","Text","Menu","Button","Heading","Spinner"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { j as t } from "./jsx-runtime-C5mzlN2N.js";
|
|
2
2
|
import j, { forwardRef as N, useMemo as w } from "react";
|
|
3
|
-
import { w as F } from "./withFormControl-
|
|
3
|
+
import { w as F } from "./withFormControl-DW9A6BSL.js";
|
|
4
4
|
import { B as y } from "./button.component-BO6oee_V.js";
|
|
5
5
|
import { C as P } from "./characterCounter.component-DI_FQNUR.js";
|
|
6
6
|
import { F as R } from "./flex-CX-8gE9T.js";
|
|
@@ -105,4 +105,4 @@ const O = F(l);
|
|
|
105
105
|
export {
|
|
106
106
|
O as W
|
|
107
107
|
};
|
|
108
|
-
//# sourceMappingURL=textInput.component-
|
|
108
|
+
//# sourceMappingURL=textInput.component-BeiTxTkS.js.map
|
package/dist/chunks/{textInput.component-D3OYUjHL.js.map → textInput.component-BeiTxTkS.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.component-
|
|
1
|
+
{"version":3,"file":"textInput.component-BeiTxTkS.js","sources":["../../node_modules/@ark-ui/react/dist/components/field/field-input.js","../../node_modules/@chakra-ui/react/dist/esm/components/input/input.js","../../src/components/TextInput/textInput.records.ts","../../src/components/TextInput/textInput.component.tsx"],"sourcesContent":["'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from './use-field-context.js';\n\nconst FieldInput = forwardRef((props, ref) => {\n const field = useFieldContext();\n const mergedProps = mergeProps(field?.getInputProps(), props);\n return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });\n});\nFieldInput.displayName = \"FieldInput\";\n\nexport { FieldInput };\n","\"use strict\";\n\"use client\";\nimport { Field } from '@ark-ui/react/field';\nimport { createRecipeContext } from '../../styled-system/create-recipe-context.js';\n\nconst { withContext, PropsProvider } = createRecipeContext({\n key: \"input\"\n});\nconst Input = withContext(Field.Input);\nconst InputPropsProvider = PropsProvider;\n\nexport { Input, InputPropsProvider };\n","import { ButtonSize } from 'components/Button/button.types';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\n\nexport const closeButtonSizeMap: Record<FormControlSize, ButtonSize> = {\n sm: 'xs',\n md: 'sm',\n lg: 'md',\n};\n","import React, { useMemo } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { Input as CInput, InputProps as CInputProps } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\nimport { Button } from 'components/Button/button.component';\nimport { CharacterCounter } from 'components/CharacterCounter/characterCounter.component';\nimport { closeButtonSizeMap } from './textInput.records';\n\nexport interface TextInputBaseProps extends WithFormControlProps {\n /** The maximum number of characters that can be entered into the input. */\n charLimit?: number;\n /** Ref to the input element. */\n inputRef?: React.Ref<HTMLInputElement | null>;\n /** Left addon element. */\n leftAddon?: React.ReactNode;\n /** Left element inside the input. */\n leftElement?: React.ReactNode;\n /**\n * If true, the input will render a contrasting variant.\n * @default false\n */\n onContrast?: boolean;\n /** Placeholder text for the input field. */\n placeholder?: string;\n /** Right addon element. */\n rightAddon?: React.ReactNode;\n /** Right element inside the input. */\n rightElement?: React.ReactNode;\n /** The size of the input. */\n size?: FormControlSize;\n /**\n * Data test id for the text input.\n * @default kibble-text-input\n */\n 'data-testid'?: string;\n}\n\nexport interface DefaultTextInputProps extends TextInputBaseProps {\n /**\n * If true, the input will have a button to clear out the field.\n * @default false\n */\n clearable?: never;\n /** Callback function when the clear button is clicked. */\n onClear?: never;\n}\n\nexport interface ClearableTextInputProps extends TextInputBaseProps {\n /**\n * If true, the input will have a button to clear out the field.\n * @default false\n */\n clearable?: boolean;\n /** Callback function when the clear button is clicked. */\n onClear?: (val: string | number | readonly string[]) => void;\n}\n\nexport type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;\n\nexport type TextInputProps = KTextInputProps & CInputProps;\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n (\n {\n charLimit = undefined,\n clearable = false,\n disabled = false,\n inputRef,\n invalid,\n leftAddon,\n leftElement,\n onClear,\n onContrast,\n rightAddon,\n rightElement,\n size = 'md',\n value,\n ['data-testid']: dataTestId = 'kibble-text-input',\n ...rest\n },\n ref,\n ): React.JSX.Element => {\n const handleClear = (): void => {\n if (onClear) {\n onClear(value || '');\n }\n };\n\n if (clearable && !!value && !disabled) {\n rightElement = (\n <Button\n className=\"TextInput__ClearButton\"\n data-testid={`${dataTestId}-clear-button`}\n size={closeButtonSizeMap[size as FormControlSize]}\n variant=\"ghostNeutral\"\n onClick={handleClear}\n iconName=\"close\"\n />\n );\n }\n\n const currentCharCount = useMemo(() => value?.toString()?.length || 0, [value]);\n\n return (\n <Flex className=\"TextInput__Wrapper\" w=\"100%\" flexDirection=\"column\" gap={1} alignItems=\"flex-end\">\n <InputGroup\n className=\"TextInput__InputGroup\"\n data-testid={`${dataTestId}-input-group`}\n startElement={leftElement}\n startElementProps={{\n color: 'inherit',\n _groupDisabled: { opacity: 0.6 },\n }}\n endElement={rightElement}\n endElementProps={{\n color: 'inherit',\n paddingInline: 1.5,\n _groupDisabled: { opacity: 0.6 },\n }}\n startAddon={leftAddon}\n endAddon={rightAddon}\n >\n <CInput\n data-testid={dataTestId}\n className=\"TextInput\"\n ref={inputRef || ref}\n value={value}\n size={size}\n disabled={disabled}\n {...(invalid && { 'aria-invalid': true })}\n variant={onContrast ? 'onContrast' : 'default'}\n {...rest}\n />\n </InputGroup>\n {!!charLimit && (\n <CharacterCounter\n data-testid={`${dataTestId}-character-counter`}\n withLimit={true}\n limit={charLimit}\n currentCount={currentCharCount}\n />\n )}\n </Flex>\n );\n },\n);\n\nTextInput.displayName = 'TextInput';\nconst WrappedTextInput = withFormControl<TextInputProps>(TextInput);\n\nexport { WrappedTextInput as TextInput };\n"],"names":["FieldInput","forwardRef","props","ref","field","useFieldContext","mergedProps","mergeProps","jsx","ark","withContext","createRecipeContext","Input","Field.Input","closeButtonSizeMap","TextInput","React","charLimit","clearable","disabled","inputRef","invalid","leftAddon","leftElement","onClear","onContrast","rightAddon","rightElement","size","value","dataTestId","rest","handleClear","Button","currentCharCount","useMemo","jsxs","Flex","InputGroup","CInput","CharacterCounter","WrappedTextInput","withFormControl"],"mappings":";;;;;;;;;;;AAOA,MAAMA,IAAaC,EAAW,CAACC,GAAOC,MAAQ;AAC5C,QAAMC,IAAQC,EAAiB,GACzBC,IAAcC,EAAWH,GAAO,cAAa,GAAIF,CAAK;AAC5D,SAAuBM,gBAAAA,EAAAA,IAAIC,EAAI,OAAO,EAAE,GAAGH,GAAa,KAAAH,GAAK;AAC/D,CAAC;AACDH,EAAW,cAAc;ACPzB,MAAM,EAAE,aAAAU,EAA2B,IAAIC,EAAoB;AAAA,EACzD,KAAK;AACP,CAAC,GACKC,IAAQF,EAAYG,CAAW,GCLxBC,IAA0D;AAAA,EACrE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GCwDMC,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,CAAC,gBAAgBC,IAAa;AAAA,IAC9B,GAAGC;AAAA,KAEL5B,MACsB;AACtB,UAAM6B,IAAc,MAAY;AAC9B,MAAIR,KACFA,EAAQK,KAAS,EAAE;AAAA,IAEvB;AAEA,IAAIX,KAAeW,KAAS,CAACV,MAEzBQ,IAAAnB,gBAAAA,EAAA;AAAA,MAACyB;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAa,GAAGH,CAAU;AAAA,QAC1B,MAAMhB,EAAmBc,CAAuB;AAAA,QAChD,SAAQ;AAAA,QACR,SAASI;AAAA,QACT,UAAS;AAAA,MAAA;AAAA,IACX;AAIE,UAAAE,IAAmBC,EAAQ,MAAMN,GAAO,YAAY,UAAU,GAAG,CAACA,CAAK,CAAC;AAG5E,WAAAO,gBAAAA,EAAA,KAACC,GAAK,EAAA,WAAU,sBAAqB,GAAE,QAAO,eAAc,UAAS,KAAK,GAAG,YAAW,YACtF,UAAA;AAAA,MAAA7B,gBAAAA,EAAA;AAAA,QAAC8B;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa,GAAGR,CAAU;AAAA,UAC1B,cAAcP;AAAA,UACd,mBAAmB;AAAA,YACjB,OAAO;AAAA,YACP,gBAAgB,EAAE,SAAS,IAAI;AAAA,UACjC;AAAA,UACA,YAAYI;AAAA,UACZ,iBAAiB;AAAA,YACf,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAgB,EAAE,SAAS,IAAI;AAAA,UACjC;AAAA,UACA,YAAYL;AAAA,UACZ,UAAUI;AAAA,UAEV,UAAAlB,gBAAAA,EAAA;AAAA,YAAC+B;AAAAA,YAAA;AAAA,cACC,eAAaT;AAAA,cACb,WAAU;AAAA,cACV,KAAKV,KAAYjB;AAAA,cACjB,OAAA0B;AAAA,cACA,MAAAD;AAAA,cACA,UAAAT;AAAA,cACC,GAAIE,KAAW,EAAE,gBAAgB,GAAK;AAAA,cACvC,SAASI,IAAa,eAAe;AAAA,cACpC,GAAGM;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MACF;AAAA,MACC,CAAC,CAACd,KACDT,gBAAAA,EAAA;AAAA,QAACgC;AAAA,QAAA;AAAA,UACC,eAAa,GAAGV,CAAU;AAAA,UAC1B,WAAW;AAAA,UACX,OAAOb;AAAA,UACP,cAAciB;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB,GAEJ;AAAA,EAAA;AAGN;AAEAnB,EAAU,cAAc;AAClB,MAAA0B,IAAmBC,EAAgC3B,CAAS;","x_google_ignoreList":[0,1]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),u=require("react"),g=require("./withFormControl-
|
|
2
|
-
//# sourceMappingURL=textInput.component-
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),u=require("react"),g=require("./withFormControl-QV_Jridv.js"),q=require("./button.component-DjdgBXDC.js"),E=require("./characterCounter.component-BRHLt929.js"),N=require("./flex-BOU6tYUd.js"),w=require("./input-group-DUdSDk4o.js"),F=require("./create-recipe-context-CDw-39SC.js"),b=require("./use-locale-context-ym21RUxU.js"),y=require("./use-field-context-Cm29IQ7H.js"),P=require("./index-CQURjLlA.js"),T=t=>t&&t.__esModule?t:{default:t},k=T(u),l=u.forwardRef((t,s)=>{const r=y.useFieldContext(),i=P.mergeProps(r?.getInputProps(),t);return e.jsxRuntimeExports.jsx(b.ark.input,{...i,ref:s})});l.displayName="FieldInput";const{withContext:D}=F.createRecipeContext({key:"input"}),B=D(l),G={sm:"xs",md:"sm",lg:"md"},d=k.default.forwardRef(({charLimit:t=void 0,clearable:s=!1,disabled:r=!1,inputRef:i,invalid:x,leftAddon:m,leftElement:f,onClear:a,onContrast:C,rightAddon:_,rightElement:c,size:p="md",value:n,["data-testid"]:o="kibble-text-input",...h},j)=>{const I=()=>{a&&a(n||"")};s&&n&&!r&&(c=e.jsxRuntimeExports.jsx(q.Button,{className:"TextInput__ClearButton","data-testid":`${o}-clear-button`,size:G[p],variant:"ghostNeutral",onClick:I,iconName:"close"}));const R=u.useMemo(()=>n?.toString()?.length||0,[n]);return e.jsxRuntimeExports.jsxs(N.Flex,{className:"TextInput__Wrapper",w:"100%",flexDirection:"column",gap:1,alignItems:"flex-end",children:[e.jsxRuntimeExports.jsx(w.InputGroup,{className:"TextInput__InputGroup","data-testid":`${o}-input-group`,startElement:f,startElementProps:{color:"inherit",_groupDisabled:{opacity:.6}},endElement:c,endElementProps:{color:"inherit",paddingInline:1.5,_groupDisabled:{opacity:.6}},startAddon:m,endAddon:_,children:e.jsxRuntimeExports.jsx(B,{"data-testid":o,className:"TextInput",ref:i||j,value:n,size:p,disabled:r,...x&&{"aria-invalid":!0},variant:C?"onContrast":"default",...h})}),!!t&&e.jsxRuntimeExports.jsx(E.CharacterCounter,{"data-testid":`${o}-character-counter`,withLimit:!0,limit:t,currentCount:R})]})});d.displayName="TextInput";const M=g.withFormControl(d);exports.WrappedTextInput=M;
|
|
2
|
+
//# sourceMappingURL=textInput.component-CwTc0h_F.js.map
|
package/dist/chunks/{textInput.component-Cj9j8DqH.js.map → textInput.component-CwTc0h_F.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.component-
|
|
1
|
+
{"version":3,"file":"textInput.component-CwTc0h_F.js","sources":["../../node_modules/@ark-ui/react/dist/components/field/field-input.js","../../node_modules/@chakra-ui/react/dist/esm/components/input/input.js","../../src/components/TextInput/textInput.records.ts","../../src/components/TextInput/textInput.component.tsx"],"sourcesContent":["'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from './use-field-context.js';\n\nconst FieldInput = forwardRef((props, ref) => {\n const field = useFieldContext();\n const mergedProps = mergeProps(field?.getInputProps(), props);\n return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });\n});\nFieldInput.displayName = \"FieldInput\";\n\nexport { FieldInput };\n","\"use strict\";\n\"use client\";\nimport { Field } from '@ark-ui/react/field';\nimport { createRecipeContext } from '../../styled-system/create-recipe-context.js';\n\nconst { withContext, PropsProvider } = createRecipeContext({\n key: \"input\"\n});\nconst Input = withContext(Field.Input);\nconst InputPropsProvider = PropsProvider;\n\nexport { Input, InputPropsProvider };\n","import { ButtonSize } from 'components/Button/button.types';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\n\nexport const closeButtonSizeMap: Record<FormControlSize, ButtonSize> = {\n sm: 'xs',\n md: 'sm',\n lg: 'md',\n};\n","import React, { useMemo } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { withFormControl, WithFormControlProps } from 'hocs/withFormControl/withFormControl';\nimport { Input as CInput, InputProps as CInputProps } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\nimport { FormControlSize } from 'hocs/withFormControl/withFormControl.types';\nimport { Button } from 'components/Button/button.component';\nimport { CharacterCounter } from 'components/CharacterCounter/characterCounter.component';\nimport { closeButtonSizeMap } from './textInput.records';\n\nexport interface TextInputBaseProps extends WithFormControlProps {\n /** The maximum number of characters that can be entered into the input. */\n charLimit?: number;\n /** Ref to the input element. */\n inputRef?: React.Ref<HTMLInputElement | null>;\n /** Left addon element. */\n leftAddon?: React.ReactNode;\n /** Left element inside the input. */\n leftElement?: React.ReactNode;\n /**\n * If true, the input will render a contrasting variant.\n * @default false\n */\n onContrast?: boolean;\n /** Placeholder text for the input field. */\n placeholder?: string;\n /** Right addon element. */\n rightAddon?: React.ReactNode;\n /** Right element inside the input. */\n rightElement?: React.ReactNode;\n /** The size of the input. */\n size?: FormControlSize;\n /**\n * Data test id for the text input.\n * @default kibble-text-input\n */\n 'data-testid'?: string;\n}\n\nexport interface DefaultTextInputProps extends TextInputBaseProps {\n /**\n * If true, the input will have a button to clear out the field.\n * @default false\n */\n clearable?: never;\n /** Callback function when the clear button is clicked. */\n onClear?: never;\n}\n\nexport interface ClearableTextInputProps extends TextInputBaseProps {\n /**\n * If true, the input will have a button to clear out the field.\n * @default false\n */\n clearable?: boolean;\n /** Callback function when the clear button is clicked. */\n onClear?: (val: string | number | readonly string[]) => void;\n}\n\nexport type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;\n\nexport type TextInputProps = KTextInputProps & CInputProps;\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n (\n {\n charLimit = undefined,\n clearable = false,\n disabled = false,\n inputRef,\n invalid,\n leftAddon,\n leftElement,\n onClear,\n onContrast,\n rightAddon,\n rightElement,\n size = 'md',\n value,\n ['data-testid']: dataTestId = 'kibble-text-input',\n ...rest\n },\n ref,\n ): React.JSX.Element => {\n const handleClear = (): void => {\n if (onClear) {\n onClear(value || '');\n }\n };\n\n if (clearable && !!value && !disabled) {\n rightElement = (\n <Button\n className=\"TextInput__ClearButton\"\n data-testid={`${dataTestId}-clear-button`}\n size={closeButtonSizeMap[size as FormControlSize]}\n variant=\"ghostNeutral\"\n onClick={handleClear}\n iconName=\"close\"\n />\n );\n }\n\n const currentCharCount = useMemo(() => value?.toString()?.length || 0, [value]);\n\n return (\n <Flex className=\"TextInput__Wrapper\" w=\"100%\" flexDirection=\"column\" gap={1} alignItems=\"flex-end\">\n <InputGroup\n className=\"TextInput__InputGroup\"\n data-testid={`${dataTestId}-input-group`}\n startElement={leftElement}\n startElementProps={{\n color: 'inherit',\n _groupDisabled: { opacity: 0.6 },\n }}\n endElement={rightElement}\n endElementProps={{\n color: 'inherit',\n paddingInline: 1.5,\n _groupDisabled: { opacity: 0.6 },\n }}\n startAddon={leftAddon}\n endAddon={rightAddon}\n >\n <CInput\n data-testid={dataTestId}\n className=\"TextInput\"\n ref={inputRef || ref}\n value={value}\n size={size}\n disabled={disabled}\n {...(invalid && { 'aria-invalid': true })}\n variant={onContrast ? 'onContrast' : 'default'}\n {...rest}\n />\n </InputGroup>\n {!!charLimit && (\n <CharacterCounter\n data-testid={`${dataTestId}-character-counter`}\n withLimit={true}\n limit={charLimit}\n currentCount={currentCharCount}\n />\n )}\n </Flex>\n );\n },\n);\n\nTextInput.displayName = 'TextInput';\nconst WrappedTextInput = withFormControl<TextInputProps>(TextInput);\n\nexport { WrappedTextInput as TextInput };\n"],"names":["FieldInput","forwardRef","props","ref","field","useFieldContext","mergedProps","mergeProps","jsx","ark","withContext","createRecipeContext","Input","Field.Input","closeButtonSizeMap","TextInput","React","charLimit","clearable","disabled","inputRef","invalid","leftAddon","leftElement","onClear","onContrast","rightAddon","rightElement","size","value","dataTestId","rest","handleClear","Button","currentCharCount","useMemo","jsxs","Flex","InputGroup","CInput","CharacterCounter","WrappedTextInput","withFormControl"],"mappings":"wfAOMA,EAAaC,EAAU,WAAC,CAACC,EAAOC,IAAQ,CAC5C,MAAMC,EAAQC,EAAAA,gBAAiB,EACzBC,EAAcC,EAAU,WAACH,GAAO,cAAa,EAAIF,CAAK,EAC5D,OAAuBM,EAAAA,kBAAAA,IAAIC,EAAAA,IAAI,MAAO,CAAE,GAAGH,EAAa,IAAAH,EAAK,CAC/D,CAAC,EACDH,EAAW,YAAc,aCPzB,KAAM,CAAE,YAAAU,CAA2B,EAAIC,sBAAoB,CACzD,IAAK,OACP,CAAC,EACKC,EAAQF,EAAYG,CAAW,ECLxBC,EAA0D,CACrE,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,ECwDMC,EAAYC,EAAM,QAAA,WACtB,CACE,CACE,UAAAC,EAAY,OACZ,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,CAAC,eAAgBC,EAAa,oBAC9B,GAAGC,GAEL5B,IACsB,CACtB,MAAM6B,EAAc,IAAY,CAC1BR,GACFA,EAAQK,GAAS,EAAE,CAEvB,EAEIX,GAAeW,GAAS,CAACV,IAEzBQ,EAAAnB,EAAA,kBAAA,IAACyB,EAAA,OAAA,CACC,UAAU,yBACV,cAAa,GAAGH,CAAU,gBAC1B,KAAMhB,EAAmBc,CAAuB,EAChD,QAAQ,eACR,QAASI,EACT,SAAS,OAAA,CACX,GAIE,MAAAE,EAAmBC,UAAQ,IAAMN,GAAO,YAAY,QAAU,EAAG,CAACA,CAAK,CAAC,EAG5E,OAAAO,EAAA,kBAAA,KAACC,EAAK,KAAA,CAAA,UAAU,qBAAqB,EAAE,OAAO,cAAc,SAAS,IAAK,EAAG,WAAW,WACtF,SAAA,CAAA7B,EAAA,kBAAA,IAAC8B,EAAA,WAAA,CACC,UAAU,wBACV,cAAa,GAAGR,CAAU,eAC1B,aAAcP,EACd,kBAAmB,CACjB,MAAO,UACP,eAAgB,CAAE,QAAS,EAAI,CACjC,EACA,WAAYI,EACZ,gBAAiB,CACf,MAAO,UACP,cAAe,IACf,eAAgB,CAAE,QAAS,EAAI,CACjC,EACA,WAAYL,EACZ,SAAUI,EAEV,SAAAlB,EAAA,kBAAA,IAAC+B,EAAA,CACC,cAAaT,EACb,UAAU,YACV,IAAKV,GAAYjB,EACjB,MAAA0B,EACA,KAAAD,EACA,SAAAT,EACC,GAAIE,GAAW,CAAE,eAAgB,EAAK,EACvC,QAASI,EAAa,aAAe,UACpC,GAAGM,CAAA,CAAA,CACN,CACF,EACC,CAAC,CAACd,GACDT,EAAA,kBAAA,IAACgC,EAAA,iBAAA,CACC,cAAa,GAAGV,CAAU,qBAC1B,UAAW,GACX,MAAOb,EACP,aAAciB,CAAA,CAAA,CAChB,EAEJ,CAAA,CAGN,EAEAnB,EAAU,YAAc,YAClB,MAAA0B,EAAmBC,kBAAgC3B,CAAS","x_google_ignoreList":[0,1]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const l=require("./jsx-runtime-BjDatQAs.js"),c=require("react"),h=require("./withFormControl-
|
|
2
|
-
//# sourceMappingURL=textarea.component-
|
|
1
|
+
"use strict";const l=require("./jsx-runtime-BjDatQAs.js"),c=require("react"),h=require("./withFormControl-QV_Jridv.js"),v=require("./characterCounter.component-BRHLt929.js"),w=require("./flex-BOU6tYUd.js"),b=require("./create-recipe-context-CDw-39SC.js"),p=require("./index-CQURjLlA.js"),x=require("./use-locale-context-ym21RUxU.js"),C=require("./use-field-context-Cm29IQ7H.js"),F=e=>e&&e.__esModule?e:{default:e},y=F(c);var R=e=>{if(!e)return;const t=p.getComputedStyle(e),o=p.getWindow(e),i=p.getDocument(e),r=()=>{requestAnimationFrame(()=>{e.style.height="auto";let a;t.boxSizing==="content-box"?a=e.scrollHeight-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):a=e.scrollHeight+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),t.maxHeight!=="none"&&a>parseFloat(t.maxHeight)?(t.overflowY==="hidden"&&(e.style.overflowY="scroll"),a=parseFloat(t.maxHeight)):t.overflowY!=="hidden"&&(e.style.overflowY="hidden"),e.style.height=`${a}px`})};e.addEventListener("input",r),e.form?.addEventListener("reset",r);const n=Object.getPrototypeOf(e),s=Object.getOwnPropertyDescriptor(n,"value");Object.defineProperty(e,"value",{...s,set(){s?.set?.apply(this,arguments),r()}});const d=new o.ResizeObserver(()=>{requestAnimationFrame(()=>r())});d.observe(e);const u=new o.MutationObserver(()=>r());return u.observe(e,{attributes:!0,attributeFilter:["rows","placeholder"]}),i.fonts?.addEventListener("loadingdone",r),()=>{e.removeEventListener("input",r),e.form?.removeEventListener("reset",r),i.fonts?.removeEventListener("loadingdone",r),d.disconnect(),u.disconnect()}};const m=c.forwardRef((e,t)=>{const{autoresize:o,...i}=e,r=c.useRef(null),n=C.useFieldContext(),s=p.mergeProps(n?.getTextareaProps(),{style:{resize:o?"none":void 0}},i);return c.useEffect(()=>{if(o)return R(r.current)},[o]),l.jsxRuntimeExports.jsx(x.ark.textarea,{...s,ref:x.composeRefs(t,r)})});m.displayName="FieldTextarea";const{withContext:j}=b.createRecipeContext({key:"textarea"}),T=j(m),f=y.default.forwardRef(({charLimit:e=void 0,invalid:t,onContrast:o,resize:i="none",textareaRef:r,value:n,["data-testid"]:s="kibble-textarea",...d},u)=>{const a=o?"onContrast":"default",g=c.useMemo(()=>n?.toString()?.length||0,[n]);return l.jsxRuntimeExports.jsxs(w.Flex,{className:"Textarea__Wrapper",flexDirection:"column",w:"100%",gap:1,alignItems:"flex-end",children:[l.jsxRuntimeExports.jsx(T,{className:"Textarea","data-testid":s,ref:r||u,resize:i,variant:a,value:n,...t&&{"aria-invalid":!0},minH:"140px",...d}),!!e&&l.jsxRuntimeExports.jsx(v.CharacterCounter,{"data-testid":`${s}-character-counter`,withLimit:!0,limit:e,currentCount:g})]})});f.displayName="Textarea";const q=h.withFormControl(f);exports.WrappedTextarea=q;
|
|
2
|
+
//# sourceMappingURL=textarea.component-BIg_XX_R.js.map
|