@cryptlex/web-components 6.2.0 → 6.3.0
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/components/badge.js +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/field.js.map +1 -1
- package/dist/components/numberfield.js +1 -1
- package/dist/components/numberfield.js.map +1 -1
- package/dist/components/searchfield.js +1 -1
- package/dist/components/searchfield.js.map +1 -1
- package/dist/components/textfield.js +1 -1
- package/dist/components/textfield.js.map +1 -1
- package/lib/utilities.css +20 -32
- package/package.json +1 -1
package/dist/components/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{classNames as i}from"../utils/primitives.js";import"clsx";function m({className:n,children:t,...r}){return e("span",{className:i("text-muted leading-none text-sm px-1 inline-flex items-center justify-center select-none bg-
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{classNames as i}from"../utils/primitives.js";import"clsx";function m({className:n,children:t,...r}){return e("span",{className:i("text-muted leading-none text-sm px-1 inline-flex items-center justify-center select-none bg-popover border h-input focus:outline-hidden focus:ring-1 focus:ring-ring",n),...r,children:e("span",{children:t})})}export{m as Badge};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sources":["../../lib/components/badge.tsx"],"sourcesContent":["import { classNames } from \"lib/utils/primitives\";\n\nexport function Badge({ className, children, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={classNames(\n\t\t\t\t\"text-muted leading-none text-sm px-1 inline-flex items-center justify-center select-none bg-
|
|
1
|
+
{"version":3,"file":"badge.js","sources":["../../lib/components/badge.tsx"],"sourcesContent":["import { classNames } from \"lib/utils/primitives\";\n\nexport function Badge({ className, children, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={classNames(\n\t\t\t\t\"text-muted leading-none text-sm px-1 inline-flex items-center justify-center select-none bg-popover border h-input focus:outline-hidden focus:ring-1 focus:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* Contents */}\n\t\t\t<span>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</span>\n\t);\n}\n"],"names":["Badge","className","children","props","jsx","classNames"],"mappings":"yGAEO,SAASA,EAAM,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,GAAuC,CACtF,OACCC,EAAC,OAAA,CACA,UAAWC,EACV,uKACAJ,CAAA,EAEA,GAAGE,EAGJ,SAAAC,EAAC,QACC,SAAAF,CAAA,CACF,CAAA,CAAA,CAGH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,Fragment as a}from"react/jsx-runtime";import{Checkbox as u,composeRenderProps as c,CheckboxGroup as m}from"react-aria-components";import{FormField as b,labelVariants as p}from"./field.js";import{useTfFieldContext as h}from"../utils/form-utils.js";import{classNames as d}from"../utils/primitives.js";import{Minus as x,Check as g}from"lucide-react";import"class-variance-authority";import"../utils/form-context.js";import"@tanstack/react-form";import"react";import"clsx";const B=m;function f({className:r,label:o,description:s,errorMessage:n,...l}){return e("div",{className:"group form-field",children:e(b,{label:o,description:s,errorMessage:n,children:e(u,{className:c(r,t=>d("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2","disabled-muted",p,t)),...l,children:c(e(a,{}),(t,i)=>e(a,{children:e("div",{className:d("flex size-input shrink-0 items-center bg-
|
|
1
|
+
import{jsx as e,Fragment as a}from"react/jsx-runtime";import{Checkbox as u,composeRenderProps as c,CheckboxGroup as m}from"react-aria-components";import{FormField as b,labelVariants as p}from"./field.js";import{useTfFieldContext as h}from"../utils/form-utils.js";import{classNames as d}from"../utils/primitives.js";import{Minus as x,Check as g}from"lucide-react";import"class-variance-authority";import"../utils/form-context.js";import"@tanstack/react-form";import"react";import"clsx";const B=m;function f({className:r,label:o,description:s,errorMessage:n,...l}){return e("div",{className:"group form-field",children:e(b,{label:o,description:s,errorMessage:n,children:e(u,{className:c(r,t=>d("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2","disabled-muted",p,t)),...l,children:c(e(a,{}),(t,i)=>e(a,{children:e("div",{className:d("flex size-input shrink-0 items-center bg-popover justify-center border border-input text-current ring-offset-background","group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground","group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50","group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground","focus:outline-none focus-visible:outline-none"),children:i.isIndeterminate?e(x,{className:"size-icon"}):i.isSelected?e(g,{className:"size-icon"}):null})}))})})})}function T({...r}){const o=h({disabled:r.isDisabled});return e(f,{isSelected:o.state.value,isDisabled:o.form.state.isSubmitting||r.isDisabled,onChange:()=>o.handleChange(!o.state.value),onBlur:o.handleBlur,...r})}export{f as Checkbox,B as CheckboxGroup,T as TfCheckbox};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["import {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport {\n FormField,\n labelVariants,\n type FormFieldProps,\n} from \"lib/components/field\";\nimport { useTfFieldContext } from \"lib/utils/form-utils\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { Check, Minus } from \"lucide-react\";\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n ...props\n}: Omit<CheckboxProps, \"children\">) {\n return (\n <div className=\"group form-field\">\n <FormField\n label={label}\n description={description}\n errorMessage={errorMessage}\n >\n <AriaCheckbox\n className={composeRenderProps(className, (className) =>\n classNames(\n \"group/checkbox cursor-pointer focus-ring flex items-center gap-x-2\",\n /* Disabled */\n \"disabled-muted\",\n labelVariants,\n className\n )\n )}\n {...props}\n >\n {composeRenderProps(<></>, (_, renderProps) => (\n <>\n <div\n className={classNames(\n \"flex size-input shrink-0 items-center bg-
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["import {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n composeRenderProps,\n type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport {\n FormField,\n labelVariants,\n type FormFieldProps,\n} from \"lib/components/field\";\nimport { useTfFieldContext } from \"lib/utils/form-utils\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { Check, Minus } from \"lucide-react\";\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({\n className,\n label,\n description,\n errorMessage,\n ...props\n}: Omit<CheckboxProps, \"children\">) {\n return (\n <div className=\"group form-field\">\n <FormField\n label={label}\n description={description}\n errorMessage={errorMessage}\n >\n <AriaCheckbox\n className={composeRenderProps(className, (className) =>\n classNames(\n \"group/checkbox cursor-pointer focus-ring flex items-center gap-x-2\",\n /* Disabled */\n \"disabled-muted\",\n labelVariants,\n className\n )\n )}\n {...props}\n >\n {composeRenderProps(<></>, (_, renderProps) => (\n <>\n <div\n className={classNames(\n \"flex size-input shrink-0 items-center bg-popover justify-center border border-input text-current ring-offset-background\",\n /* Selected */\n \"group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground group-data-[selected]/checkbox:text-primary-foreground\",\n /* Disabled */\n \"group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50\",\n /* Invalid */\n \"group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground\",\n /* Resets */\n \"focus:outline-none focus-visible:outline-none\"\n )}\n >\n {renderProps.isIndeterminate ? (\n <Minus className=\"size-icon\" />\n ) : renderProps.isSelected ? (\n <Check className=\"size-icon\" />\n ) : null}\n </div>\n </>\n ))}\n </AriaCheckbox>\n </FormField>\n </div>\n );\n}\n\nexport type TfCheckboxProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n \"onChange\" | \"onBlur\" | \"isChecked\"\n>;\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n const field = useTfFieldContext<boolean>({ disabled: props.isDisabled });\n return (\n <Checkbox\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":["CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","props","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","Minus","Check","TfCheckbox","field","useTfFieldContext"],"mappings":"qeAgBO,MAAMA,EAAgBC,EAEtB,SAASC,EAAS,CACvB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EAAoC,CAClC,OACEC,EAAC,MAAA,CAAI,UAAU,mBACb,SAAAA,EAACC,EAAA,CACC,MAAAL,EACA,YAAAC,EACA,aAAAC,EAEA,SAAAE,EAACE,EAAA,CACC,UAAWC,EAAmBR,EAAYA,GACxCS,EACE,qEAEA,iBACAC,EACAV,CAAA,CACF,EAED,GAAGI,EAEH,WAAmBC,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IAC7BR,EAAAM,EAAA,CACE,SAAAN,EAAC,MAAA,CACC,UAAWI,EACT,0HAEA,+MAEA,8FAEA,wNAEA,+CAAA,EAGD,SAAAI,EAAY,gBACXR,EAACS,EAAA,CAAM,UAAU,WAAA,CAAY,EAC3BD,EAAY,WACdR,EAACU,EAAA,CAAM,UAAU,YAAY,EAC3B,IAAA,CAAA,EAER,CACD,CAAA,CAAA,CACH,CAAA,EAEJ,CAEJ,CAMO,SAASC,EAAW,CAAE,GAAGZ,GAA0B,CACxD,MAAMa,EAAQC,EAA2B,CAAE,SAAUd,EAAM,WAAY,EACvE,OACEC,EAACN,EAAA,CACC,WAAYkB,EAAM,MAAM,MACxB,WAAYA,EAAM,KAAK,MAAM,cAAgBb,EAAM,WACnD,SAAU,IAAMa,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGb,CAAA,CAAA,CAGV"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{DialogTrigger as u,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utils/primitives.js";import{X as y}from"lucide-react";import"./loader.js";import"clsx";const N=c(["fixed z-50 gap-4 bg-popover transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),M=u,O=({className:t,isDismissable:e=!0,...
|
|
1
|
+
import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{DialogTrigger as u,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utils/primitives.js";import{X as y}from"lucide-react";import"./loader.js";import"clsx";const N=c(["fixed z-50 gap-4 bg-popover transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),M=u,O=({className:t,isDismissable:e=!0,...o})=>a(x,{isDismissable:e,className:l(t,n=>i("fixed inset-0 z-50 bg-popover/20","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",n)),...o});function P({className:t,children:e,side:o,role:n,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(o?N({side:o,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:n,className:i(!o&&"grid h-full gap-4 relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-1 top-1",children:s(v,{size:"icon",variant:"destructive",onPress:m.close,className:"opacity-70 transition-opacity data-[hovered]:opacity-100",children:[a(y,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function k({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function B({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function R({className:t,...e}){return a(b,{slot:"title",className:i("text-lg font-semibold leading-none tracking-tight",t),...e})}function V({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{P as DialogContent,V as DialogDescription,B as DialogFooter,k as DialogHeader,O as DialogOverlay,R as DialogTitle,M as DialogTrigger};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n DialogTrigger as AriaDialogTrigger,\n Heading as AriaHeading,\n HeadingProps as AriaHeadingProps,\n Modal as AriaModal,\n ModalOverlay as AriaModalOverlay,\n ModalOverlayProps as AriaModalOverlayProps,\n composeRenderProps\n} from \"react-aria-components\"\n\nimport { Button } from \"lib/components/button\"\nimport { classNames } from \"lib/utils/primitives\"\nimport { X } from \"lucide-react\"\n\nconst sheetVariants = cva(\n [\n \"fixed z-50 gap-4 bg-popover transition ease-in-out\",\n \"data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0\",\n ],\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm\",\n },\n },\n }\n)\n\nexport const DialogTrigger = AriaDialogTrigger\n\nexport const DialogOverlay = ({\n className,\n isDismissable = true,\n ...props\n}: AriaModalOverlayProps) => (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, (className) =>\n classNames(\n \"fixed inset-0 z-50 bg-
|
|
1
|
+
{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n DialogTrigger as AriaDialogTrigger,\n Heading as AriaHeading,\n HeadingProps as AriaHeadingProps,\n Modal as AriaModal,\n ModalOverlay as AriaModalOverlay,\n ModalOverlayProps as AriaModalOverlayProps,\n composeRenderProps\n} from \"react-aria-components\"\n\nimport { Button } from \"lib/components/button\"\nimport { classNames } from \"lib/utils/primitives\"\nimport { X } from \"lucide-react\"\n\nconst sheetVariants = cva(\n [\n \"fixed z-50 gap-4 bg-popover transition ease-in-out\",\n \"data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200 data-[exiting]:animate-out data-[exiting]:fade-out-0\",\n ],\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm\",\n },\n },\n }\n)\n\nexport const DialogTrigger = AriaDialogTrigger\n\nexport const DialogOverlay = ({\n className,\n isDismissable = true,\n ...props\n}: AriaModalOverlayProps) => (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, (className) =>\n classNames(\n \"fixed inset-0 z-50 bg-popover/20\",\n /* Exiting */\n \"data-[exiting]:duration-100 data-[exiting]:animate-out\",\n /* Entering */\n \"data-[entering]:animate-in\",\n className\n )\n )}\n {...props}\n />\n)\n\nexport interface DialogContentProps\n extends Omit<React.ComponentProps<typeof AriaModal>, \"children\">,\n VariantProps<typeof sheetVariants> {\n children?: AriaDialogProps[\"children\"]\n role?: AriaDialogProps[\"role\"]\n closeButton?: boolean\n}\n\nexport function DialogContent({\n className,\n children,\n side,\n role,\n closeButton = true,\n ...props\n}: DialogContentProps) {\n return (\n <AriaModal\n className={composeRenderProps(className, (className) =>\n classNames(\n side\n ? sheetVariants({ side, className: \"h-full p-6\" })\n : [\"fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full\"],\n className\n )\n )}\n {...props}\n >\n <AriaDialog\n role={role}\n className={classNames(!side && \"grid h-full gap-4 relative\", \"h-full outline-none\")}\n >\n {composeRenderProps(children, (children, renderProps) => (\n <>\n {children}\n {closeButton && (\n <div className=\"absolute right-1 top-1\">\n <Button\n size={'icon'}\n variant={'destructive'}\n onPress={renderProps.close}\n className=\"opacity-70 transition-opacity data-[hovered]:opacity-100\"\n >\n <X />\n <span className=\"sr-only\">Close</span>\n </Button>\n </div>\n )}\n </>\n ))}\n </AriaDialog>\n </AriaModal>\n )\n}\n\nexport function DialogHeader({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={classNames(\n \"flex flex-col gap-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function DialogFooter({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n return (\n <div\n className={classNames(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n return (\n <AriaHeading\n slot=\"title\"\n className={classNames(\n \"text-lg font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function DialogDescription({\n className,\n ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n return (\n <p\n className={classNames(\n \"flex flex-col gap-y-1 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n )\n}"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","X","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription"],"mappings":"8YAiBA,MAAMA,EAAgBC,EACpB,CACE,qDACA,qKAAA,EAEF,CACE,SAAU,CACR,KAAM,CACJ,IAAK,yGACL,OACE,kHACF,KAAM,yHACN,MACE,4HAAA,CACJ,CACF,CAEJ,EAEaC,EAAgBC,EAEhBC,EAAgB,CAAC,CAC5B,UAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,IACEC,EAACC,EAAA,CACC,cAAAH,EACA,UAAWI,EAAmBL,EAAYA,GACxCM,EACE,mCAEA,yDAEA,6BACAN,CAAA,CACF,EAED,GAAGE,CAAA,CACN,EAWK,SAASK,EAAc,CAC5B,UAAAP,EACA,SAAAQ,EACA,KAAAC,EACA,KAAAC,EACA,YAAAC,EAAc,GACd,GAAGT,CACL,EAAuB,CACrB,OACEC,EAACS,EAAA,CACC,UAAWP,EAAmBL,EAAYA,GACxCM,EACEG,EACId,EAAc,CAAE,KAAAc,EAAM,UAAW,YAAA,CAAc,EAC/C,CAAC,8TAA8T,EACnUT,CAAA,CACF,EAED,GAAGE,EAEJ,SAAAC,EAACU,EAAA,CACC,KAAAH,EACA,UAAWJ,EAAW,CAACG,GAAQ,6BAA8B,qBAAqB,EAEjF,SAAAJ,EAAmBG,EAAU,CAACA,EAAUM,IACvCC,EAAAC,EAAA,CACG,SAAA,CAAAR,EACAG,GACCR,EAAC,MAAA,CAAI,UAAU,yBACb,SAAAY,EAACE,EAAA,CACC,KAAM,OACN,QAAS,cACT,QAASH,EAAY,MACrB,UAAU,2DAEV,SAAA,CAAAX,EAACe,EAAA,EAAE,EACHf,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACjC,CACF,CAAA,EAEJ,CACD,CAAA,CAAA,CACH,CAAA,CAGN,CAEO,SAASgB,EAAa,CAC3B,UAAAnB,EACA,GAAGE,CACL,EAAyC,CACvC,OACEC,EAAC,MAAA,CACC,UAAWG,EACT,iDACAN,CAAA,EAED,GAAGE,CAAA,CAAA,CAGV,CAEO,SAASkB,EAAa,CAC3B,UAAApB,EACA,GAAGE,CACL,EAAyC,CACvC,OACEC,EAAC,MAAA,CACC,UAAWG,EACT,8DACAN,CAAA,EAED,GAAGE,CAAA,CAAA,CAGV,CAEO,SAASmB,EAAY,CAAE,UAAArB,EAAW,GAAGE,GAA2B,CACrE,OACEC,EAACmB,EAAA,CACC,KAAK,QACL,UAAWhB,EACT,oDACAN,CAAA,EAED,GAAGE,CAAA,CAAA,CAGV,CAEO,SAASqB,EAAkB,CAChC,UAAAvB,EACA,GAAGE,CACL,EAA+C,CAC7C,OACEC,EAAC,IAAA,CACC,UAAWG,EACT,iDACAN,CAAA,EAED,GAAGE,CAAA,CAAA,CAGV"}
|
package/dist/components/field.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsxs as o,Fragment as l,jsx as n}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as d,composeRenderProps as m,Label as c,Text as u}from"react-aria-components";import{classNames as r}from"../utils/primitives.js";import{Info as f,CircleX as p}from"lucide-react";import"clsx";const
|
|
1
|
+
"use client";import{jsxs as o,Fragment as l,jsx as n}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as d,composeRenderProps as m,Label as c,Text as u}from"react-aria-components";import{classNames as r}from"../utils/primitives.js";import{Info as f,CircleX as p}from"lucide-react";import"clsx";const g=s(["select-none text-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function x({className:e,...t}){return n(c,{className:r(g(),e),...t})}function v({className:e,children:t,...i}){return o(u,{className:r("text-sm text-muted leading-tight",e),...i,slot:"description",children:[t,n(f,{className:"inline size-2 align-text-top ms-0.5"})]})}function h({className:e,children:t,...i}){return o("div",{className:r("text-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",e),...i,children:[t,n(p,{className:"inline size-2 align-text-top ms-0.5"})]})}const b=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim ring-offset-background","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function z({className:e,variant:t,...i}){return n(d,{className:m(e,a=>r(b({variant:t}),a)),...i})}function L({label:e,description:t,errorMessage:i,children:a}){return o(l,{children:[e&&n(x,{children:e}),a,t&&n(v,{children:t}),i&&n(h,{children:i})]})}export{v as FieldDescription,h as FieldError,z as FieldGroup,x as FieldLabel,L as FormField,b as fieldGroupVariants,g as labelVariants};
|
|
2
2
|
//# sourceMappingURL=field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sources":["../../lib/components/field.tsx"],"sourcesContent":["\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n Group as AriaGroup,\n GroupProps as AriaGroupProps,\n Label as AriaLabel,\n LabelProps as AriaLabelProps,\n Text as AriaText,\n TextProps as AriaTextProps,\n composeRenderProps\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\nimport { CircleX, Info } from \"lucide-react\"\n\nexport const labelVariants = cva([\n \"select-none text-sm font-medium leading-none\",\n /* Disabled */\n \"disabled-muted\",\n /* Invalid */\n \"group-data-[invalid]:text-destructive\",\n])\n\nexport function FieldLabel({ className, ...props }: AriaLabelProps) {\n return (\n <AriaLabel className={classNames(labelVariants(), className)} {...props} />\n )\n}\n\nexport function FieldDescription({ className, children, ...props }: AriaTextProps) {\n return (\n <AriaText\n className={classNames(\"text-sm text-muted leading-tight\", className)}\n {...props}\n slot=\"description\"\n >\n {children}<Info className=\"inline size-2 align-text-top ms-0.5\" />\n </AriaText>\n )\n}\n// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but\n// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.\nexport function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n return (\n <div\n className={classNames(\"text-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in\", className)}\n {...props}\n >\n {children}<CircleX className=\"inline size-2 align-text-top ms-0.5\" />\n </div>\n )\n}\n\nexport const fieldGroupVariants = cva(\"\", {\n variants: {\n variant: {\n default: [\n // TODO standardize the padding here\n \"relative flex
|
|
1
|
+
{"version":3,"file":"field.js","sources":["../../lib/components/field.tsx"],"sourcesContent":["\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n Group as AriaGroup,\n GroupProps as AriaGroupProps,\n Label as AriaLabel,\n LabelProps as AriaLabelProps,\n Text as AriaText,\n TextProps as AriaTextProps,\n composeRenderProps\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\nimport { CircleX, Info } from \"lucide-react\"\n\nexport const labelVariants = cva([\n \"select-none text-sm font-medium leading-none\",\n /* Disabled */\n \"disabled-muted\",\n /* Invalid */\n \"group-data-[invalid]:text-destructive\",\n])\n\nexport function FieldLabel({ className, ...props }: AriaLabelProps) {\n return (\n <AriaLabel className={classNames(labelVariants(), className)} {...props} />\n )\n}\n\nexport function FieldDescription({ className, children, ...props }: AriaTextProps) {\n return (\n <AriaText\n className={classNames(\"text-sm text-muted leading-tight\", className)}\n {...props}\n slot=\"description\"\n >\n {children}<Info className=\"inline size-2 align-text-top ms-0.5\" />\n </AriaText>\n )\n}\n// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but\n// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.\nexport function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n return (\n <div\n className={classNames(\"text-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in\", className)}\n {...props}\n >\n {children}<CircleX className=\"inline size-2 align-text-top ms-0.5\" />\n </div>\n )\n}\n\nexport const fieldGroupVariants = cva(\"\", {\n variants: {\n variant: {\n default: [\n // TODO standardize the padding here\n \"relative flex w-full items-center overflow-hidden border border-input bg-popover input-dim ring-offset-background\",\n /* Focus Within */\n \"focus-ring\",\n /* Disabled */\n \"disabled-muted\",\n ],\n ghost: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n})\n\nexport interface GroupProps\n extends AriaGroupProps,\n VariantProps<typeof fieldGroupVariants> { }\n\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n return (\n <AriaGroup\n className={composeRenderProps(className, (className) =>\n classNames(fieldGroupVariants({ variant }), className)\n )}\n {...props}\n />\n )\n}\n\nexport type FormFieldProps = {\n label?: string\n description?: React.ReactNode\n errorMessage?: string\n // | ((validation: AriaValidationResult) => string)\n}\n\nexport function FormField({ label, description, errorMessage, children }: FormFieldProps & {\n children: React.ReactNode\n}) {\n return <>\n {label && <FieldLabel>{label}</FieldLabel>}\n {children}\n {description && (<FieldDescription>{description}</FieldDescription>)}\n {errorMessage && <FieldError>{errorMessage}</FieldError>}\n </>\n}\n"],"names":["labelVariants","cva","FieldLabel","className","props","jsx","AriaLabel","classNames","FieldDescription","children","jsxs","AriaText","Info","FieldError","CircleX","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","Fragment"],"mappings":"yUAgBO,MAAMA,EAAgBC,EAAI,CAC/B,+CAEA,iBAEA,uCACF,CAAC,EAEM,SAASC,EAAW,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAClE,OACEC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CAE7E,CAEO,SAASI,EAAiB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CACjF,OACEM,EAACC,EAAA,CACC,UAAWJ,EAAW,mCAAoCJ,CAAS,EAClE,GAAGC,EACJ,KAAK,cAEJ,SAAA,CAAAK,EAASJ,EAACO,EAAA,CAAK,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGtE,CAGO,SAASC,EAAW,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA6C,CAChG,OACEM,EAAC,MAAA,CACC,UAAWH,EAAW,mHAAoHJ,CAAS,EAClJ,GAAGC,EAEH,SAAA,CAAAK,EAASJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGzE,CAEO,MAAMC,EAAqBd,EAAI,GAAI,CACxC,SAAU,CACR,QAAS,CACP,QAAS,CAEP,oHAEA,aAEA,gBAAA,EAEF,MAAO,EAAA,CACT,EAEF,gBAAiB,CACf,QAAS,SAAA,CAEb,CAAC,EAMM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACvE,OACEC,EAACa,EAAA,CACC,UAAWC,EAAmBhB,EAAYA,GACxCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAEtD,GAAGC,CAAA,CAAA,CAGV,CASO,SAASgB,EAAU,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,SAAAd,GAE3D,CACD,OAAOC,EAAAc,EAAA,CACJ,SAAA,CAAAH,GAAShB,EAACH,GAAY,SAAAmB,CAAA,CAAM,EAC5BZ,EACAa,GAAgBjB,EAACG,EAAA,CAAkB,SAAAc,CAAA,CAAY,EAC/CC,GAAgBlB,EAACQ,EAAA,CAAY,SAAAU,CAAA,CAAa,CAAA,EAC7C,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as d}from"react/jsx-runtime";import{NumberField as c,composeRenderProps as n,Input as p}from"react-aria-components";import{Button as f}from"./button.js";import{useTfFieldContext as h}from"../utils/form-utils.js";import{getFieldErrorMessage as l,classNames as i}from"../utils/primitives.js";import{ChevronUp as b,ChevronDown as N}from"lucide-react";import{FormField as g,FieldGroup as F}from"./field.js";import"class-variance-authority";import"./loader.js";import"../utils/form-context.js";import"@tanstack/react-form";import"react";import"clsx";const x=c;function v({className:o,...t}){return r(p,{className:n(o,e=>i("w-fit min-w-0 flex-1 border-r border-transparent bg-
|
|
1
|
+
import{jsx as r,jsxs as d}from"react/jsx-runtime";import{NumberField as c,composeRenderProps as n,Input as p}from"react-aria-components";import{Button as f}from"./button.js";import{useTfFieldContext as h}from"../utils/form-utils.js";import{getFieldErrorMessage as l,classNames as i}from"../utils/primitives.js";import{ChevronUp as b,ChevronDown as N}from"lucide-react";import{FormField as g,FieldGroup as F}from"./field.js";import"class-variance-authority";import"./loader.js";import"../utils/form-context.js";import"@tanstack/react-form";import"react";import"clsx";const x=c;function v({className:o,...t}){return r(p,{className:n(o,e=>i("w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...t})}function w({className:o,...t}){return d("div",{className:i("absolute right-0 flex h-full flex-col border-l",o),...t,children:[r(m,{slot:"increment",children:r(b,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(m,{slot:"decrement",children:r(N,{"aria-hidden":!0,className:"size-icon"})})]})}function m({className:o,...t}){return r(f,{className:n(o,e=>i("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...t})}function C({label:o,description:t,errorMessage:e,className:s,...a}){return r(x,{className:n(s,u=>i("group form-field",u)),...a,children:r(g,{label:o,description:t,errorMessage:e,children:d(F,{children:[r(v,{}),r(w,{})]})})})}function R({isDisabled:o,...t}){const e=h({disabled:o});return r(C,{isInvalid:!!l(e),isDisabled:o||e.form.state.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:l(e),...t})}export{C as NumberField,R as TfNumberField};
|
|
2
2
|
//# sourceMappingURL=numberfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["import {\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n composeRenderProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"lib/components/button\";\nimport { useTfFieldContext } from \"lib/utils/form-utils\";\nimport { classNames, getFieldErrorMessage } from \"lib/utils/primitives\";\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { FieldGroup, FormField, type FormFieldProps } from \"./field\";\n\nconst ANumberField = AriaNumberField;\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, (className) =>\n classNames(\n \"w-fit min-w-0 flex-1 border-r border-transparent bg-
|
|
1
|
+
{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["import {\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n composeRenderProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"lib/components/button\";\nimport { useTfFieldContext } from \"lib/utils/form-utils\";\nimport { classNames, getFieldErrorMessage } from \"lib/utils/primitives\";\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { FieldGroup, FormField, type FormFieldProps } from \"./field\";\n\nconst ANumberField = AriaNumberField;\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, (className) =>\n classNames(\n \"w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\",\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction NumberFieldSteppers({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n className={classNames(\n \"absolute right-0 flex h-full flex-col border-l\",\n className\n )}\n {...props}\n >\n <NumberFieldStepper slot=\"increment\">\n <ChevronUp aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n <div className=\"border-b\" />\n <NumberFieldStepper slot=\"decrement\">\n <ChevronDown aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n </div>\n );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n return (\n <Button\n className={composeRenderProps(className, (className) =>\n classNames(\"w-auto grow h-3 px-0.5 text-muted-foreground\", className)\n )}\n variant={\"ghost\"}\n size={\"none\"}\n {...props}\n />\n );\n}\n\ntype NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, (className) =>\n classNames(\"group form-field\", className)\n )}\n {...props}\n >\n <FormField\n label={label}\n description={description}\n errorMessage={errorMessage}\n >\n <FieldGroup>\n <NumberFieldInput />\n <NumberFieldSteppers />\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfNumberField({\n isDisabled,\n ...props\n}: Omit<\n React.ComponentProps<typeof NumberField>,\n \"value\" | \"id\" | \"onChange\" | \"onBlur\"\n>) {\n const field = useTfFieldContext<number>({ disabled: isDisabled });\n\n return (\n <NumberField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n id={field.name}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","ChevronUp","ChevronDown","Button","NumberField","label","description","errorMessage","FormField","FieldGroup","TfNumberField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"sjBAeA,MAAMA,EAAeC,EAErB,SAASC,EAAiB,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACjE,OACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAYA,GACxCK,EACE,wJACAL,CAAA,CACF,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASK,EAAoB,CAC3B,UAAAN,EACA,GAAGC,CACL,EAAgC,CAC9B,OACEM,EAAC,MAAA,CACC,UAAWF,EACT,iDACAL,CAAA,EAED,GAAGC,EAEJ,SAAA,CAAAC,EAACM,EAAA,CAAmB,KAAK,YACvB,SAAAN,EAACO,GAAU,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC/C,EACAP,EAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAACM,EAAA,CAAmB,KAAK,YACvB,SAAAN,EAACQ,GAAY,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CACjD,CAAA,CAAA,CAAA,CAGN,CAEA,SAASF,EAAmB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CACpE,OACEC,EAACS,EAAA,CACC,UAAWP,EAAmBJ,EAAYA,GACxCK,EAAW,+CAAgDL,CAAS,CAAA,EAEtE,QAAS,QACT,KAAM,OACL,GAAGC,CAAA,CAAA,CAGV,CAGO,SAASW,EAAY,CAC1B,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAf,EACA,GAAGC,CACL,EAAqB,CACnB,OACEC,EAACL,EAAA,CACC,UAAWO,EAAmBJ,EAAYA,GACxCK,EAAW,mBAAoBL,CAAS,CAAA,EAEzC,GAAGC,EAEJ,SAAAC,EAACc,EAAA,CACC,MAAAH,EACA,YAAAC,EACA,aAAAC,EAEA,WAACE,EAAA,CACC,SAAA,CAAAf,EAACH,EAAA,EAAiB,IACjBO,EAAA,CAAA,CAAoB,CAAA,CAAA,CACvB,CAAA,CAAA,CACF,CAAA,CAGN,CAEO,SAASY,EAAc,CAC5B,WAAAC,EACA,GAAGlB,CACL,EAGG,CACD,MAAMmB,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACEjB,EAACU,EAAA,CACC,UAAW,CAAC,CAACU,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGV"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{SearchIcon as s,XIcon as m}from"lucide-react";import{composeRenderProps as n,SearchField as p,Input as u,Button as h}from"react-aria-components";import{classNames as
|
|
1
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{SearchIcon as s,XIcon as m}from"lucide-react";import{composeRenderProps as n,SearchField as p,Input as u,Button as h}from"react-aria-components";import{classNames as t}from"../utils/primitives.js";import{FormField as f,FieldGroup as g}from"./field.js";import"clsx";import"class-variance-authority";function F({className:r,...o}){return e(p,{className:n(r,i=>t("group",i)),...o})}function b({className:r,...o}){return e(u,{className:n(r,i=>t("min-w-0 ring-0 focus-visible:outline-none flex-1 bg-popover px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",i)),...o})}function x({className:r,...o}){return e(h,{className:n(r,i=>t("mr-1 opacity-70 ring-offset-background transition-opacity","data-[hovered]:opacity-100","data-[disabled]:pointer-events-none","group-data-[empty]:invisible",i)),...o})}function w({label:r,description:o,className:i,errorMessage:a,...c}){return e(F,{className:n(i,d=>t("group form-field",d)),...c,children:e(f,{label:r,description:o,errorMessage:a,children:l(g,{children:[e(s,{"aria-hidden":!0,className:"size-icon text-muted-foreground"}),e(b,{placeholder:""}),e(x,{children:e(m,{"aria-hidden":!0,className:"size-icon"})})]})})})}export{w as SearchField};
|
|
2
2
|
//# sourceMappingURL=searchfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from \"lucide-react\"\nimport {\n Button as AriaButton,\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n SearchField as AriaSearchField,\n SearchFieldProps as AriaSearchFieldProps,\n composeRenderProps\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\n\nimport { FieldGroup, FormField, type FormFieldProps } from \"./field\"\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n return (\n <AriaSearchField\n className={composeRenderProps(className, (className) =>\n classNames(\"group\", className)\n )}\n {...props}\n />\n )\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, (className) =>\n classNames(\n \"min-w-0 ring-0 focus-visible:outline-none flex-1 bg-
|
|
1
|
+
{"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from \"lucide-react\"\nimport {\n Button as AriaButton,\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n SearchField as AriaSearchField,\n SearchFieldProps as AriaSearchFieldProps,\n composeRenderProps\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\n\nimport { FieldGroup, FormField, type FormFieldProps } from \"./field\"\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n return (\n <AriaSearchField\n className={composeRenderProps(className, (className) =>\n classNames(\"group\", className)\n )}\n {...props}\n />\n )\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, (className) =>\n classNames(\n \"min-w-0 ring-0 focus-visible:outline-none flex-1 bg-popover px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\",\n className\n )\n )}\n {...props}\n />\n )\n}\n\nfunction SearchFieldClear({ className, ...props }: AriaButtonProps) {\n return (\n <AriaButton\n className={composeRenderProps(className, (className) =>\n classNames(\n \"mr-1 opacity-70 ring-offset-background transition-opacity\",\n /* Hover */\n \"data-[hovered]:opacity-100\",\n /* Disabled */\n \"data-[disabled]:pointer-events-none\",\n /* Empty */\n \"group-data-[empty]:invisible\",\n className\n )\n )}\n {...props}\n />\n )\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps { };\nexport function SearchField({\n label,\n description,\n className,\n errorMessage,\n ...props\n}: SearchFieldProps) {\n return (\n <ASearchField\n className={composeRenderProps(className, (className) =>\n classNames(\"group form-field\", className)\n )}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <FieldGroup>\n <SearchIcon aria-hidden className=\"size-icon text-muted-foreground\" />\n <ASearchFieldInput placeholder=\"\" />\n <SearchFieldClear>\n <XIcon aria-hidden className=\"size-icon\" />\n </SearchFieldClear>\n </FieldGroup>\n </FormField>\n </ASearchField>\n )\n}"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","classNames","ASearchFieldInput","AriaInput","SearchFieldClear","AriaButton","SearchField","label","description","errorMessage","FormField","FieldGroup","SearchIcon","XIcon"],"mappings":"mWAeA,SAASA,EAAa,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACnE,OACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAYA,GACxCK,EAAW,QAASL,CAAS,CAAA,EAE9B,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASK,EAAkB,CAAE,UAAAN,EAAW,GAAGC,GAAyB,CAClE,OACEC,EAACK,EAAA,CACC,UAAWH,EAAmBJ,EAAYA,GACxCK,EACE,qJACAL,CAAA,CACF,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASO,EAAiB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAClE,OACEC,EAACO,EAAA,CACC,UAAWL,EAAmBJ,EAAYA,GACxCK,EACE,4DAEA,6BAEA,sCAEA,+BACAL,CAAA,CACF,EAED,GAAGC,CAAA,CAAA,CAGV,CAGO,SAASS,EAAY,CAC1B,MAAAC,EACA,YAAAC,EACA,UAAAZ,EACA,aAAAa,EACA,GAAGZ,CACL,EAAqB,CACnB,OACEC,EAACH,EAAA,CACC,UAAWK,EAAmBJ,EAAYA,GACxCK,EAAW,mBAAoBL,CAAS,CAAA,EAEzC,GAAGC,EAEJ,WAACa,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EACjD,WAACE,EAAA,CACC,SAAA,CAAAb,EAACc,EAAA,CAAW,cAAW,GAAC,UAAU,kCAAkC,EACpEd,EAACI,EAAA,CAAkB,YAAY,EAAA,CAAG,EAClCJ,EAACM,GACC,SAAAN,EAACe,EAAA,CAAM,cAAW,GAAC,UAAU,YAAY,CAAA,CAC3C,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CAGN"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{TextField as u,composeRenderProps as i,TextArea as f,Input as p}from"react-aria-components";import{useTfFieldContext as c}from"../utils/form-utils.js";import{getFieldErrorMessage as d,classNames as n}from"../utils/primitives.js";import{FormField as g}from"./field.js";import"../utils/form-context.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"lucide-react";const x=u;function b({className:r,...t}){return o(p,{className:i(r,e=>n("flex input-dim w-full border border-input bg-
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{TextField as u,composeRenderProps as i,TextArea as f,Input as p}from"react-aria-components";import{useTfFieldContext as c}from"../utils/form-utils.js";import{getFieldErrorMessage as d,classNames as n}from"../utils/primitives.js";import{FormField as g}from"./field.js";import"../utils/form-context.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"lucide-react";const x=u;function b({className:r,...t}){return o(p,{className:i(r,e=>n("flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground","disabled-muted","focus-ring",e)),...t})}function T({className:r,...t}){return o(f,{className:i(r,e=>n("flex min-h-32 w-full border border-input bg-popover px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted",e)),...t})}function h({label:r,description:t,errorMessage:e,textArea:l,className:m,...a}){return o(x,{className:i(m,s=>n("group form-field",s)),...a,children:o(g,{label:r,errorMessage:e,description:t,children:l?o(T,{}):o(b,{})})})}function j({isDisabled:r,...t}){const e=c({disabled:r});return o(h,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!d(e),errorMessage:d(e),...t})}export{h as TextField,j as TfTextField};
|
|
2
2
|
//# sourceMappingURL=textfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["import {\n Input as AriaInput,\n InputProps as AriaInputProps,\n TextArea as AriaTextArea,\n TextAreaProps as AriaTextAreaProps,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n} from \"react-aria-components\";\n\nimport { useTfFieldContext } from \"lib/utils/form-utils\";\nimport { classNames, getFieldErrorMessage } from \"lib/utils/primitives\";\nimport { FormField, type FormFieldProps } from \"./field\";\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, (className) =>\n classNames(\n \"flex input-dim w-full border border-input bg-
|
|
1
|
+
{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["import {\n Input as AriaInput,\n InputProps as AriaInputProps,\n TextArea as AriaTextArea,\n TextAreaProps as AriaTextAreaProps,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n} from \"react-aria-components\";\n\nimport { useTfFieldContext } from \"lib/utils/form-utils\";\nimport { classNames, getFieldErrorMessage } from \"lib/utils/primitives\";\nimport { FormField, type FormFieldProps } from \"./field\";\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, (className) =>\n classNames(\n \"flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground\",\n /* Disabled */\n \"disabled-muted\",\n /* Focused */\n \"focus-ring\",\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n return (\n <AriaTextArea\n className={composeRenderProps(className, (className) =>\n classNames(\n \"flex min-h-32 w-full border border-input bg-popover px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground\",\n /* Focused */\n \"focus-ring\",\n /* Disabled */\n \"disabled-muted\",\n className\n )\n )}\n {...props}\n />\n );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n textArea?: boolean;\n}\n\nexport function TextField({\n label,\n description,\n errorMessage,\n textArea,\n className,\n ...props\n}: TextFieldProps) {\n return (\n <ATextField\n className={composeRenderProps(className, (className) =>\n classNames(\"group form-field\", className)\n )}\n {...props}\n >\n <FormField\n label={label}\n errorMessage={errorMessage}\n description={description}\n >\n {textArea ? <TextArea /> : <Input />}\n </FormField>\n </ATextField>\n );\n}\n\nexport function TfTextField({\n isDisabled,\n ...props\n}: React.ComponentProps<typeof TextField>) {\n const field = useTfFieldContext<string>({ disabled: isDisabled });\n\n return (\n <TextField\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n id={field.name}\n name={field.name}\n onBlur={field.handleBlur}\n onChange={field.handleChange}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n />\n );\n}\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","classNames","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","FormField","TfTextField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"0cAcA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACtD,OACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAYA,GACxCK,EACE,gLAEA,iBAEA,aACAL,CAAA,CACF,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASK,EAAS,CAAE,UAAAN,EAAW,GAAGC,GAA4B,CAC5D,OACEC,EAACK,EAAA,CACC,UAAWH,EAAmBJ,EAAYA,GACxCK,EACE,iIAEA,aAEA,iBACAL,CAAA,CACF,EAED,GAAGC,CAAA,CAAA,CAGV,CAMO,SAASO,EAAU,CACxB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAZ,EACA,GAAGC,CACL,EAAmB,CACjB,OACEC,EAACL,EAAA,CACC,UAAWO,EAAmBJ,EAAYA,GACxCK,EAAW,mBAAoBL,CAAS,CAAA,EAEzC,GAAGC,EAEJ,SAAAC,EAACW,EAAA,CACC,MAAAJ,EACA,aAAAE,EACA,YAAAD,EAEC,SAAAE,EAAWV,EAACI,EAAA,CAAA,CAAS,IAAMP,EAAA,CAAA,CAAM,CAAA,CAAA,CACpC,CAAA,CAGN,CAEO,SAASe,EAAY,CAC1B,WAAAC,EACA,GAAGd,CACL,EAA2C,CACzC,MAAMe,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACEb,EAACM,EAAA,CACC,WAAYO,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,KAAMA,EAAM,KACZ,OAAQA,EAAM,WACd,SAAUA,EAAM,aAChB,UAAW,CAAC,CAACE,EAAqBF,CAAK,EACvC,aAAcE,EAAqBF,CAAK,EACvC,GAAGf,CAAA,CAAA,CAGV"}
|
package/lib/utilities.css
CHANGED
|
@@ -2,12 +2,20 @@
|
|
|
2
2
|
@apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
+
@utility ol {
|
|
6
|
+
@apply list-decimal list-inside;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@utility ul {
|
|
10
|
+
@apply list-disc list-inside;
|
|
11
|
+
}
|
|
12
|
+
|
|
5
13
|
@utility caption {
|
|
6
|
-
@apply text-
|
|
14
|
+
@apply text-sm font-medium;
|
|
7
15
|
}
|
|
8
16
|
|
|
9
17
|
@utility body {
|
|
10
|
-
@apply text-
|
|
18
|
+
@apply text-base leading-relaxed;
|
|
11
19
|
}
|
|
12
20
|
|
|
13
21
|
@utility h5 {
|
|
@@ -19,15 +27,15 @@
|
|
|
19
27
|
}
|
|
20
28
|
|
|
21
29
|
@utility h3 {
|
|
22
|
-
@apply text-
|
|
30
|
+
@apply text-2xl font-normal leading-snug;
|
|
23
31
|
}
|
|
24
32
|
|
|
25
33
|
@utility h2 {
|
|
26
|
-
@apply text-
|
|
34
|
+
@apply text-3xl font-light leading-snug;
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
@utility h1 {
|
|
30
|
-
@apply text-
|
|
38
|
+
@apply text-5xl leading-tight font-extralight;
|
|
31
39
|
}
|
|
32
40
|
|
|
33
41
|
/* Fluid grid with minimum width */
|
|
@@ -43,7 +51,7 @@
|
|
|
43
51
|
@apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-70;
|
|
44
52
|
}
|
|
45
53
|
@utility input {
|
|
46
|
-
@apply border border-input bg-
|
|
54
|
+
@apply border border-input bg-popover px-icon py-2 body placeholder:text-muted-foreground disabled-muted focus-ring;
|
|
47
55
|
}
|
|
48
56
|
|
|
49
57
|
/* A base set of classes for elements that can be clicked */
|
|
@@ -51,16 +59,16 @@
|
|
|
51
59
|
@apply inline-flex gap-1 text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
|
|
52
60
|
}
|
|
53
61
|
@utility btn-primary {
|
|
54
|
-
@apply border border-primary text-primary bg-
|
|
62
|
+
@apply border border-primary text-primary bg-popover hover:bg-primary/10 data-[hovered]:bg-primary/10 focus:bg-primary/10 data-[focused]:bg-primary/10;
|
|
55
63
|
}
|
|
56
64
|
@utility btn-destructive {
|
|
57
|
-
@apply border border-destructive text-destructive bg-
|
|
65
|
+
@apply border border-destructive text-destructive bg-popover hover:bg-destructive/10 data-[hovered]:bg-destructive/10 focus:bg-destructive/10 data-[focused]:bg-destructive/10;
|
|
58
66
|
}
|
|
59
67
|
@utility btn-neutral {
|
|
60
|
-
@apply border border-input text-accent bg-
|
|
68
|
+
@apply border border-input text-accent bg-popover hover:bg-accent/10 data-[hovered]:bg-accent/10 focus:bg-accent/10 data-[focused]:bg-accent/10;
|
|
61
69
|
}
|
|
62
70
|
@utility btn-secondary {
|
|
63
|
-
@apply border border-secondary text-secondary bg-
|
|
71
|
+
@apply border border-secondary text-secondary bg-popover hover:bg-secondary/10 data-[hovered]:bg-secondary/10 focus:bg-secondary/10 data-[focused]:bg-secondary/10;
|
|
64
72
|
}
|
|
65
73
|
@utility btn-ghost {
|
|
66
74
|
@apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
|
|
@@ -79,36 +87,16 @@
|
|
|
79
87
|
@apply flex flex-col gap-1;
|
|
80
88
|
}
|
|
81
89
|
|
|
82
|
-
|
|
83
|
-
@utility prose {
|
|
84
|
-
/* TODO, starting points are not correct, use tw-type */
|
|
85
|
-
li {
|
|
86
|
-
@apply list-inside;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
ul > li {
|
|
90
|
-
@apply list-disc;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
ol > li {
|
|
94
|
-
@apply list-decimal;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
p, ul, ol, blockquote, pre {
|
|
98
|
-
@apply my-2;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
90
|
@utility steps {
|
|
103
91
|
@apply ps-0;
|
|
104
92
|
> ol {
|
|
105
|
-
@apply list-none ps-0;
|
|
106
93
|
counter-reset: steps-counter;
|
|
94
|
+
@apply list-none ps-0;
|
|
107
95
|
}
|
|
108
96
|
|
|
109
97
|
> ol > li {
|
|
110
|
-
@apply relative ps-input pb-2 min-h-12;
|
|
111
98
|
counter-increment: steps-counter;
|
|
99
|
+
@apply relative ps-input pb-2 min-h-12;
|
|
112
100
|
}
|
|
113
101
|
> ol > li + li {
|
|
114
102
|
@apply mt-0;
|