@cryptlex/web-components 6.6.6-alpha58 → 6.6.6-alpha59
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as k,jsxs as v}from"react/jsx-runtime";import{useId as C}from"react";import{Checkbox as y,composeRenderProps as l,CheckboxGroup as
|
|
1
|
+
"use client";import{jsx as e,Fragment as k,jsxs as v}from"react/jsx-runtime";import{useId as C}from"react";import{Checkbox as y,composeRenderProps as l,CheckboxGroup as N}from"react-aria-components";import{useFieldContext as I}from"../utilities/form-context.js";import{classNames as r}from"../utilities/theme.js";import{FormField as w,labelVariants as B}from"./form.js";import{IcMinus as F,IcCheck as j}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";const i="group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",a="group-data-[invalid]/checkbox:border-destructive",u="focus:outline-none focus-visible:outline-none",b="group-data-[selected]/checkbox:bg-primary",S="relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-2 transition-colors duration-200",z="absolute top-1/2 -translate-y-1/2 left-0.5 h-5 w-5 rounded-full bg-background border border-input transition-transform duration-200",D="flex size-input shrink-0 items-center bg-elevation-2 justify-center border border-input text-current ring-offset-background",H=N;function G({className:o,label:t,description:m,errorMessage:h,requiredIndicator:p,variant:x="checkbox",...c}){const g=C(),n=c.id||g,f=x==="switch";return e("div",{className:"group form-field",children:e(w,{label:t,description:m,errorMessage:h,requiredIndicator:p,htmlFor:n,children:e(y,{className:l(o,d=>r("group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted",B,d)),id:n,...c,children:l(e(k,{}),(d,s)=>f?e("div",{className:r(S,b,i,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive",u),children:e("div",{className:r(z,"group-data-[selected]/checkbox:translate-x-4.5",i,a)})}):e("div",{className:r(D,"group-data-[indeterminate]/checkbox:bg-primary",b,"group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground",i,a,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground",u),children:v("span",{className:"flex items-center justify-center",children:[s.isIndeterminate&&e(F,{className:"size-icon"}),!s.isIndeterminate&&s.isSelected&&e(j,{className:"size-icon"})]})}))})})})}function J({...o}){const t=I({disabled:o.isDisabled});return e(G,{requiredIndicator:t.isRequired,isSelected:t.state.value,isDisabled:t.form.state.isSubmitting||o.isDisabled,onChange:()=>t.handleChange(!t.state.value),onBlur:t.handleBlur,...o})}export{G as Checkbox,H as CheckboxGroup,J as TfCheckbox};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, labelVariants, type FormFieldProps } from './form';\nimport { IcCheck, IcMinus } from './icons';\n\nconst disabledClasses = 'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50';\nconst invalidBorderClasses = 'group-data-[invalid]/checkbox:border-destructive';\nconst focusResetClasses = 'focus:outline-none focus-visible:outline-none';\nconst selectedPrimaryClasses = 'group-data-[selected]/checkbox:bg-primary';\n\nconst switchBaseClasses =\n 'relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-2 transition-colors duration-200';\nconst switchKnobClasses =\n 'absolute top-1/2 -translate-y-1/2 left-0.5 h-5 w-5 rounded-full bg-background border border-input transition-transform duration-200';\n\nconst checkboxBaseClasses =\n 'flex size-input shrink-0 items-center bg-elevation-2 justify-center border border-input text-current ring-offset-background';\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps &\n FormFieldProps & {\n variant?: 'checkbox' | 'switch';\n };\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n variant = 'checkbox',\n ...props\n}: Omit<CheckboxProps, 'children'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const isSwitch = variant === 'switch';\n return (\n <div className=\"group form-field\">\n <FormField\n {...{\n label,\n description,\n errorMessage,\n requiredIndicator,\n htmlFor: fieldId,\n }}\n >\n <AriaCheckbox\n className={composeRenderProps(className, className =>\n classNames(\n 'group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted',\n labelVariants,\n className\n )\n )}\n id={fieldId}\n {...props}\n >\n {composeRenderProps(<></>, (_, renderProps) => {\n if (isSwitch) {\n return (\n <div\n className={classNames(\n switchBaseClasses,\n selectedPrimaryClasses,\n disabledClasses,\n invalidBorderClasses,\n 'group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive',\n focusResetClasses\n )}\n >\n <div\n className={classNames(\n switchKnobClasses,\n 'group-data-[selected]/checkbox:translate-x-4.5',\n disabledClasses,\n invalidBorderClasses\n )}\n />\n </div>\n );\n }\n\n return (\n <div\n className={classNames(\n checkboxBaseClasses,\n 'group-data-[indeterminate]/checkbox:bg-primary',\n selectedPrimaryClasses,\n 'group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground',\n disabledClasses,\n invalidBorderClasses,\n 'group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground',\n focusResetClasses\n )}\n >\n {renderProps.isIndeterminate && <IcMinus className=\"size-icon\" />}\n
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["'use client';\nimport { useId } from 'react';\nimport {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, labelVariants, type FormFieldProps } from './form';\nimport { IcCheck, IcMinus } from './icons';\n\nconst disabledClasses = 'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50';\nconst invalidBorderClasses = 'group-data-[invalid]/checkbox:border-destructive';\nconst focusResetClasses = 'focus:outline-none focus-visible:outline-none';\nconst selectedPrimaryClasses = 'group-data-[selected]/checkbox:bg-primary';\n\nconst switchBaseClasses =\n 'relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-2 transition-colors duration-200';\nconst switchKnobClasses =\n 'absolute top-1/2 -translate-y-1/2 left-0.5 h-5 w-5 rounded-full bg-background border border-input transition-transform duration-200';\n\nconst checkboxBaseClasses =\n 'flex size-input shrink-0 items-center bg-elevation-2 justify-center border border-input text-current ring-offset-background';\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps &\n FormFieldProps & {\n variant?: 'checkbox' | 'switch';\n };\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n variant = 'checkbox',\n ...props\n}: Omit<CheckboxProps, 'children'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const isSwitch = variant === 'switch';\n return (\n <div className=\"group form-field\">\n <FormField\n {...{\n label,\n description,\n errorMessage,\n requiredIndicator,\n htmlFor: fieldId,\n }}\n >\n <AriaCheckbox\n className={composeRenderProps(className, className =>\n classNames(\n 'group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted',\n labelVariants,\n className\n )\n )}\n id={fieldId}\n {...props}\n >\n {composeRenderProps(<></>, (_, renderProps) => {\n if (isSwitch) {\n return (\n <div\n className={classNames(\n switchBaseClasses,\n selectedPrimaryClasses,\n disabledClasses,\n invalidBorderClasses,\n 'group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive',\n focusResetClasses\n )}\n >\n <div\n className={classNames(\n switchKnobClasses,\n 'group-data-[selected]/checkbox:translate-x-4.5',\n disabledClasses,\n invalidBorderClasses\n )}\n />\n </div>\n );\n }\n\n return (\n <div\n className={classNames(\n checkboxBaseClasses,\n 'group-data-[indeterminate]/checkbox:bg-primary',\n selectedPrimaryClasses,\n 'group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground',\n disabledClasses,\n invalidBorderClasses,\n 'group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground',\n focusResetClasses\n )}\n >\n <span className=\"flex items-center justify-center\">\n {renderProps.isIndeterminate && <IcMinus className=\"size-icon\" />}\n {!renderProps.isIndeterminate && renderProps.isSelected && (\n <IcCheck className=\"size-icon\" />\n )}\n </span>\n </div>\n );\n })}\n </AriaCheckbox>\n </FormField>\n </div>\n );\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'onBlur' | 'isChecked'>;\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n const field = useFieldContext<boolean>({ disabled: props.isDisabled });\n return (\n <Checkbox\n requiredIndicator={field.isRequired}\n isSelected={field.state.value}\n isDisabled={field.form.state.isSubmitting || props.isDisabled}\n onChange={() => field.handleChange(!field.state.value)}\n onBlur={field.handleBlur}\n {...props}\n />\n );\n}\n"],"names":["disabledClasses","invalidBorderClasses","focusResetClasses","selectedPrimaryClasses","switchBaseClasses","switchKnobClasses","checkboxBaseClasses","CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","requiredIndicator","variant","props","generatedId","useId","fieldId","isSwitch","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","jsxs","IcMinus","IcCheck","TfCheckbox","field","useFieldContext"],"mappings":"+eAcA,MAAMA,EAAkB,8FAClBC,EAAuB,mDACvBC,EAAoB,gDACpBC,EAAyB,4CAEzBC,EACF,4GACEC,EACF,sIAEEC,EACF,8HAESC,EAAgBC,EAKtB,SAASC,EAAS,CACrB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,QAAAC,EAAU,WACV,GAAGC,CACP,EAAoC,CAChC,MAAMC,EAAcC,EAAA,EACdC,EAAUH,EAAM,IAAMC,EACtBG,EAAWL,IAAY,SAC7B,OACIM,EAAC,MAAA,CAAI,UAAU,mBACX,SAAAA,EAACC,EAAA,CAEO,MAAAX,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,QAASK,EAGb,SAAAE,EAACE,EAAA,CACG,UAAWC,EAAmBd,EAAWA,GACrCe,EACI,6FACAC,EACAhB,CAAA,CACJ,EAEJ,GAAIS,EACH,GAAGH,EAEH,SAAAQ,EAAmBH,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IACvBT,EAEIC,EAAC,MAAA,CACG,UAAWI,EACPrB,EACAD,EACAH,EACAC,EACA,8EACAC,CAAA,EAGJ,SAAAmB,EAAC,MAAA,CACG,UAAWI,EACPpB,EACA,iDACAL,EACAC,CAAA,CACJ,CAAA,CACJ,CAAA,EAMRoB,EAAC,MAAA,CACG,UAAWI,EACPnB,EACA,iDACAH,EACA,qHACAH,EACAC,EACA,uKACAC,CAAA,EAGJ,SAAA4B,EAAC,OAAA,CAAK,UAAU,mCACX,SAAA,CAAAD,EAAY,iBAAmBR,EAACU,EAAA,CAAQ,UAAU,YAAY,EAC9D,CAACF,EAAY,iBAAmBA,EAAY,YACzCR,EAACW,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAEvC,CAAA,CAAA,CAGX,CAAA,CAAA,CACL,CAAA,EAER,CAER,CAGO,SAASC,EAAW,CAAE,GAAGjB,GAA0B,CACtD,MAAMkB,EAAQC,EAAyB,CAAE,SAAUnB,EAAM,WAAY,EACrE,OACIK,EAACZ,EAAA,CACG,kBAAmByB,EAAM,WACzB,WAAYA,EAAM,MAAM,MACxB,WAAYA,EAAM,KAAK,MAAM,cAAgBlB,EAAM,WACnD,SAAU,IAAMkB,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGlB,CAAA,CAAA,CAGhB"}
|