@cryptlex/web-components 6.6.62 → 6.6.63
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 y,jsxs as
|
|
1
|
+
"use client";import{jsx as e,Fragment as y,jsxs as d}from"react/jsx-runtime";import{useId as I}from"react";import{Checkbox as w,composeRenderProps as x,CheckboxGroup as B}from"react-aria-components";import{useFieldContext as S}from"../utilities/form-context.js";import{classNames as r}from"../utilities/theme.js";import{labelVariants as z,FormField as D,FormFieldLabel as j,FormFieldDescription as G}from"./form.js";import{IcMinus as R,IcCheck as q}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"./card.js";import"@icons-pack/react-simple-icons";const n="group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",l="group-data-[invalid]/checkbox:border-destructive",g="focus:outline-none focus-visible:outline-none",p="group-data-[selected]/checkbox:bg-primary",$="relative shrink-0 h-6 w-11 rounded-full border border-input bg-elevation-mid transition-colors duration-200",K="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",L="flex shrink-0 items-center bg-elevation-mid rounded-md justify-center border border-input text-current ring-offset-background",T={sm:"size-icon",lg:"size-input"},f={sm:"size-3",lg:"size-icon"},Y=B;function V({className:o,label:t,description:s,errorMessage:u,requiredIndicator:k,variant:v="checkbox",size:i="sm",...m}){const C=I(),c=m.id||C,F=v==="switch",N=!!(t||s||u||k),b=e(w,{className:x(o,h=>r("group/checkbox cursor-pointer relative focus-ring flex items-center gap-x-2 disabled-muted",z,h)),id:c,...m,children:x(e(y,{}),(h,a)=>F?e("div",{className:r($,p,n,l,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive",g),children:e("div",{className:r(K,"group-data-[selected]/checkbox:translate-x-4.5",n,l)})}):d("div",{className:r(L,"group-data-[indeterminate]/checkbox:bg-primary",p,"group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground",n,l,"group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground",g,T[i]),children:[a.isIndeterminate&&e(R,{className:f[i]}),!a.isIndeterminate&&a.isSelected&&e(q,{className:f[i]})]}))});return N?e("div",{className:"group form-field",children:e(D,{errorMessage:u,htmlFor:c,children:d("div",{className:"flex items-start gap-1",children:[b,d("div",{className:"flex flex-col gap-1",children:[t&&e(j,{htmlFor:c,children:t}),s&&e(G,{children:s})]})]})})}):e("div",{className:"group flex",children:b})}function Z({...o}){const t=S({disabled:o.isDisabled});return e(V,{requiredIndicator:t.isRequired,isSelected:t.state.value,isDisabled:t.isSubmitting||o.isDisabled,onChange:()=>t.handleChange(!t.state.value),onBlur:t.handleBlur,...o})}export{V as Checkbox,Y as CheckboxGroup,Z 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-mid 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 shrink-0 items-center bg-elevation-mid rounded-md justify-center border border-input text-current ring-offset-background';\n\nconst sizeClasses = {\n sm: 'size-icon',\n lg: 'size-input',\n};\n\nconst iconSizeClasses = {\n sm: 'size-3',\n lg: 'size-icon',\n};\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps &\n FormFieldProps & {\n variant?: 'checkbox' | 'switch';\n size?: 'sm' | 'lg';\n };\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n variant = 'checkbox',\n size = '
|
|
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, FormFieldLabel, FormFieldDescription, 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-mid 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 shrink-0 items-center bg-elevation-mid rounded-md justify-center border border-input text-current ring-offset-background';\n\nconst sizeClasses = {\n sm: 'size-icon',\n lg: 'size-input',\n};\n\nconst iconSizeClasses = {\n sm: 'size-3',\n lg: 'size-icon',\n};\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps &\n FormFieldProps & {\n variant?: 'checkbox' | 'switch';\n size?: 'sm' | 'lg';\n };\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n requiredIndicator,\n variant = 'checkbox',\n size = 'sm',\n ...props\n}: Omit<CheckboxProps, 'children'>) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const isSwitch = variant === 'switch';\n const hasFormField = !!(label || description || errorMessage || requiredIndicator);\n const checkbox = (\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 sizeClasses[size]\n )}\n >\n {renderProps.isIndeterminate && <IcMinus className={iconSizeClasses[size]} />}\n {!renderProps.isIndeterminate && renderProps.isSelected && (\n <IcCheck className={iconSizeClasses[size]} />\n )}\n </div>\n );\n })}\n </AriaCheckbox>\n );\n if (!hasFormField) return <div className=\"group flex\">{checkbox}</div>;\n return (\n <div className=\"group form-field\">\n <FormField {...{ errorMessage, htmlFor: fieldId }}>\n <div className=\"flex items-start gap-1\">\n {checkbox}\n <div className=\"flex flex-col gap-1\">\n {label && <FormFieldLabel htmlFor={fieldId}>{label}</FormFieldLabel>}\n {description && <FormFieldDescription>{description}</FormFieldDescription>}\n </div>\n </div>\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.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","sizeClasses","iconSizeClasses","CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","requiredIndicator","variant","size","props","generatedId","useId","fieldId","isSwitch","hasFormField","checkbox","jsx","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","jsxs","IcMinus","IcCheck","FormField","FormFieldLabel","FormFieldDescription","TfCheckbox","field","useFieldContext"],"mappings":"slBAcA,MAAMA,EAAkB,8FAClBC,EAAuB,mDACvBC,EAAoB,gDACpBC,EAAyB,4CAEzBC,EACF,8GACEC,EACF,sIAEEC,EACF,gIAEEC,EAAc,CAChB,GAAI,YACJ,GAAI,YACR,EAEMC,EAAkB,CACpB,GAAI,SACJ,GAAI,WACR,EACaC,EAAgBC,EAMtB,SAASC,EAAS,CACrB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,QAAAC,EAAU,WACV,KAAAC,EAAO,KACP,GAAGC,CACP,EAAoC,CAChC,MAAMC,EAAcC,EAAA,EACdC,EAAUH,EAAM,IAAMC,EACtBG,EAAWN,IAAY,SACvBO,EAAe,CAAC,EAAEX,GAASC,GAAeC,GAAgBC,GAC1DS,EACFC,EAACC,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCiB,EACI,6FACAC,EACAlB,CAAA,CACJ,EAEJ,GAAIU,EACH,GAAGH,EAEH,SAAAS,EAAmBF,EAAAK,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IACvBV,EAEIG,EAAC,MAAA,CACG,UAAWG,EACPzB,EACAD,EACAH,EACAC,EACA,8EACAC,CAAA,EAGJ,SAAAwB,EAAC,MAAA,CACG,UAAWG,EACPxB,EACA,iDACAL,EACAC,CAAA,CACJ,CAAA,CACJ,CAAA,EAMRiC,EAAC,MAAA,CACG,UAAWL,EACPvB,EACA,iDACAH,EACA,qHACAH,EACAC,EACA,uKACAC,EACAK,EAAYW,CAAI,CAAA,EAGnB,SAAA,CAAAe,EAAY,iBAAmBP,EAACS,EAAA,CAAQ,UAAW3B,EAAgBU,CAAI,EAAG,EAC1E,CAACe,EAAY,iBAAmBA,EAAY,cACxCG,EAAA,CAAQ,UAAW5B,EAAgBU,CAAI,CAAA,CAAG,CAAA,CAAA,CAAA,CAI1D,CAAA,CAAA,EAGT,OAAKM,EAEDE,EAAC,MAAA,CAAI,UAAU,mBACX,WAACW,EAAA,CAAgB,aAAAtB,EAAc,QAASO,EACpC,SAAAY,EAAC,MAAA,CAAI,UAAU,yBACV,SAAA,CAAAT,EACDS,EAAC,MAAA,CAAI,UAAU,sBACV,SAAA,CAAArB,GAASa,EAACY,EAAA,CAAe,QAAShB,EAAU,SAAAT,EAAM,EAClDC,GAAeY,EAACa,EAAA,CAAsB,SAAAzB,CAAA,CAAY,CAAA,CAAA,CACvD,CAAA,CAAA,CACJ,EACJ,EACJ,IAZuB,MAAA,CAAI,UAAU,aAAc,SAAAW,EAAS,CAcpE,CAGO,SAASe,EAAW,CAAE,GAAGrB,GAA0B,CACtD,MAAMsB,EAAQC,EAAyB,CAAE,SAAUvB,EAAM,WAAY,EACrE,OACIO,EAACf,EAAA,CACG,kBAAmB8B,EAAM,WACzB,WAAYA,EAAM,MAAM,MACxB,WAAYA,EAAM,cAAgBtB,EAAM,WACxC,SAAU,IAAMsB,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGtB,CAAA,CAAA,CAGhB"}
|
package/dist/components/form.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsxs as a,Fragment as c,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{
|
|
1
|
+
"use client";import{jsxs as a,Fragment as c,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Label as u,Text as f,Group as p,composeRenderProps as m,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{Card as b,CardHeader as x,CardTitle as h}from"./card.js";import{IcInfo as v,IcError as F}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";const N=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function y({className:t,...e}){return r(u,{className:i(N(),t),...e})}function k({className:t,children:e,...n}){return a(f,{className:i("body-sm text-muted leading-tight",t),...n,slot:"description",children:[e,r(v,{className:"inline size-2 align-text-top ms-0.5"})]})}function w({className:t,children:e,...n}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",t),...n,children:[e,r(F,{className:"inline size-2 align-text-top ms-0.5"})]})}const j=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-mid input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function B({className:t,variant:e,...n}){return r(p,{className:m(t,o=>i(j({variant:e}),o)),...n})}function D({label:t,description:e,errorMessage:n,children:o,requiredIndicator:d,htmlFor:l}){return a(c,{children:[t&&a(y,{htmlFor:l,children:[t,d&&r("sup",{className:"text-destructive",children:"*"})]}),o,e&&r(k,{children:e}),n&&r(w,{htmlFor:l,children:n})]})}function A({className:t,...e}){return r(g,{className:m(t,n=>i("btn btn-ghost h-input px-2 -me-2",n)),...e})}function H({className:t,onSubmit:e,...n}){return r("form",{className:i(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...n})}function P({className:t,...e}){return r(b,{className:i("gap-input",t),...e})}function R({className:t,...e}){return r(x,{children:r(h,{className:i(t,"!body-base text-muted"),...e})})}function q({className:t,...e}){return r("nav",{className:i("flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function J({className:t,preview:e,...n}){return a("div",{className:"flex flex-col gap-icon lg:flex-row lg:items-start",children:[r("div",{className:i("grid grid-cols-1 gap-input mt-icon my-header w-full max-w-3xl",t),...n}),e&&r("div",{className:"lg:sticky lg:top-header lg:shrink-0",children:e})]})}export{B as FieldGroup,H as Form,q as FormActionFooter,D as FormField,A as FormFieldButton,k as FormFieldDescription,w as FormFieldError,y as FormFieldLabel,J as FormLayout,P as FormSection,R as FormSectionTitle,j as fieldGroupVariants,N as labelVariants};
|
|
2
2
|
//# sourceMappingURL=form.js.map
|