@me1a/ui 2.2.4 → 2.2.6
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/accordion/index.mjs +1 -1
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/avatar/index.mjs +1 -1
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.mjs +1 -1
- package/dist/badge/index.mjs.map +1 -1
- package/dist/box/index.mjs +1 -1
- package/dist/box/index.mjs.map +1 -1
- package/dist/breadcrumb/index.mjs +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/button/index.mjs.map +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/checkbox/index.mjs +1 -1
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/collapsible/index.mjs +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/command/index.mjs +1 -1
- package/dist/command/index.mjs.map +1 -1
- package/dist/container/index.mjs +1 -1
- package/dist/container/index.mjs.map +1 -1
- package/dist/dialog/index.mjs +1 -1
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/drawer/index.mjs +1 -1
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown-menu/index.mjs +1 -1
- package/dist/dropdown-menu/index.mjs.map +1 -1
- package/dist/form/index.mjs +1 -1
- package/dist/form/index.mjs.map +1 -1
- package/dist/hooks/index.mjs +1 -1
- package/dist/hooks/index.mjs.map +1 -1
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.map +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/input/index.mjs.map +1 -1
- package/dist/label/index.mjs +1 -1
- package/dist/label/index.mjs.map +1 -1
- package/dist/navigation-menu/index.mjs +1 -1
- package/dist/navigation-menu/index.mjs.map +1 -1
- package/dist/page-loader/index.mjs +1 -1
- package/dist/page-loader/index.mjs.map +1 -1
- package/dist/pagination/index.mjs +1 -1
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/index.mjs +1 -1
- package/dist/popover/index.mjs.map +1 -1
- package/dist/radio-group/index.mjs +1 -1
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/resizable/index.mjs +1 -1
- package/dist/resizable/index.mjs.map +1 -1
- package/dist/rhf-checkbox/index.mjs +1 -1
- package/dist/rhf-checkbox/index.mjs.map +1 -1
- package/dist/rhf-multi-select/index.mjs +1 -1
- package/dist/rhf-multi-select/index.mjs.map +1 -1
- package/dist/rhf-radio-button-group/index.mjs +1 -1
- package/dist/rhf-radio-button-group/index.mjs.map +1 -1
- package/dist/rhf-radio-group/index.mjs +1 -1
- package/dist/rhf-radio-group/index.mjs.map +1 -1
- package/dist/rhf-select/index.mjs +1 -1
- package/dist/rhf-select/index.mjs.map +1 -1
- package/dist/rhf-switch/index.mjs +1 -1
- package/dist/rhf-switch/index.mjs.map +1 -1
- package/dist/rhf-text-field/index.d.mts +55 -0
- package/dist/rhf-text-field/index.mjs +2 -0
- package/dist/rhf-text-field/index.mjs.map +1 -0
- package/dist/rhf-textarea/index.mjs +1 -1
- package/dist/rhf-textarea/index.mjs.map +1 -1
- package/dist/separator/index.mjs +1 -1
- package/dist/separator/index.mjs.map +1 -1
- package/dist/sheet/index.mjs +1 -1
- package/dist/sheet/index.mjs.map +1 -1
- package/dist/sidebar/index.mjs +1 -1
- package/dist/sidebar/index.mjs.map +1 -1
- package/dist/skeleton/index.mjs +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/stack/index.mjs +1 -1
- package/dist/stack/index.mjs.map +1 -1
- package/dist/switch/index.mjs +1 -1
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.mjs +1 -1
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.mjs +1 -1
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/text-field/index.mjs +1 -1
- package/dist/text-field/index.mjs.map +1 -1
- package/dist/textarea/index.mjs +1 -1
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.mjs +1 -1
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toaster/index.mjs +1 -1
- package/dist/toaster/index.mjs.map +1 -1
- package/dist/tooltip/index.mjs +1 -1
- package/dist/tooltip/index.mjs.map +1 -1
- package/dist/types/index.mjs +0 -1
- package/dist/types/index.mjs.map +1 -1
- package/dist/typography/index.mjs +1 -1
- package/dist/typography/index.mjs.map +1 -1
- package/dist/utils/index.mjs +1 -1
- package/dist/utils/index.mjs.map +1 -1
- package/package.json +5 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
"use client";import{useFormContext as Re}from"react-hook-form";import*as U from"react";import{ChevronDown as ue}from"lucide-react";import{clsx as oe}from"clsx";import{twMerge as re}from"tailwind-merge";function r(...e){return re(oe(e))}import{Popover as fe,PopoverContent as ge,PopoverTrigger as ye}from"@radix-ui/react-popover";import*as z from"react";import{Slot as ae}from"@radix-ui/react-slot";import{cva as me}from"class-variance-authority";import{Loader2 as ne}from"lucide-react";import{jsx as I,jsxs as se}from"react/jsx-runtime";var K=me("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),$=z.forwardRef(({className:e,variant:t,size:o,asChild:m=!1,startIcon:n,endIcon:s,loading:l=!1,disabled:P,children:c,type:F="button","aria-label":v,...u},y)=>{let C=m?ae:"button",p=P||l,a=v||(typeof c=="string"?c:void 0),te=w=>{(w.key==="Enter"||w.key===" ")&&(w.preventDefault(),!p&&u.onClick&&u.onClick(w))};return m?I(C,{className:r(K({variant:t,size:o,className:e})),ref:y,disabled:p,type:F,"aria-label":a,"aria-disabled":p,...u,children:c}):se(C,{className:r(K({variant:t,size:o,className:e})),ref:y,disabled:p,type:F,"aria-label":a,"aria-disabled":p,onKeyDown:te,...u,children:[l&&I(ne,{className:"mr-2 h-4 w-4 animate-spin",role:"status","aria-label":"Loading","aria-hidden":"true"}),!l&&n&&I("span",{className:"mr-2","aria-hidden":"true",children:n}),c,!l&&s&&I("span",{className:"ml-2","aria-hidden":"true",children:s})]})});$.displayName="Button";import*as x from"react";import{Command as i}from"cmdk";import{Search as ie}from"lucide-react";import{jsx as f,jsxs as de}from"react/jsx-runtime";var L=x.forwardRef(({className:e,...t},o)=>f(i,{ref:o,className:r("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",e),...t}));L.displayName=i.displayName;var V=x.forwardRef(({className:e,...t},o)=>de("div",{className:"flex items-center border-b px-3","cmdk-input-wrapper":"",children:[f(ie,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),f(i.Input,{ref:o,className:r("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",e),...t})]}));V.displayName=i.Input.displayName;var T=x.forwardRef(({className:e,...t},o)=>f(i.List,{ref:o,className:r("max-h-[300px] overflow-y-auto overflow-x-hidden",e),...t}));T.displayName=i.List.displayName;var k=x.forwardRef((e,t)=>f(i.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));k.displayName=i.Empty.displayName;var S=x.forwardRef(({className:e,...t},o)=>f(i.Group,{ref:o,className:r("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",e),...t}));S.displayName=i.Group.displayName;var W=x.forwardRef(({className:e,...t},o)=>f(i.Separator,{ref:o,className:r("-mx-1 h-px bg-border",e),...t}));W.displayName=i.Separator.displayName;var E=x.forwardRef(({className:e,...t},o)=>f(i.Item,{ref:o,className:r("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",e),...t}));E.displayName=i.Item.displayName;var J=({className:e,...t})=>f("span",{className:r("ml-auto text-xs tracking-widest text-muted-foreground",e),...t});J.displayName="CommandShortcut";import*as Q from"react";import{cva as le}from"class-variance-authority";import{jsx as ce}from"react/jsx-runtime";var pe=le("",{variants:{variant:{h1:"scroll-m-5 text-4xl font-extrabold tracking-tight lg:text-5xl",h2:"scroll-m-5 text-3xl font-semibold tracking-tight",h3:"scroll-m-5 text-2xl font-semibold tracking-tight",h4:"scroll-m-5 text-xl font-semibold tracking-tight",h5:"scroll-m-5 text-lg font-semibold tracking-tight",h6:"scroll-m-5 text-base font-semibold tracking-tight",p:"leading-7 [&:not(:first-child)]:mt-6",blockquote:"mt-6 border-l-2 border-slate-300 pl-6 italic",list:"my-6 ml-6 list-disc [&>li]:mt-2",lead:"text-xl text-muted-foreground",large:"text-lg font-semibold",small:"text-sm font-medium leading-none",muted:"text-sm text-muted-foreground"},align:{left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"}},defaultVariants:{variant:"p",align:"left"}}),O=Q.forwardRef(({className:e,variant:t,align:o,as:m="p",...n},s)=>ce(m,{className:r(pe({variant:t,align:o,className:e})),ref:s,...n}));O.displayName="Typography";import{jsx as g,jsxs as R}from"react/jsx-runtime";function X({options:e,value:t,onChange:o,placeholder:m="Select an option",disabled:n,required:s,error:l,className:P,fullWidth:c,searchable:F,id:v,renderCommandList:u}){let[y,C]=U.useState(!1),p=e?.find(a=>a.id===t);return g("div",{className:r(c&&"w-full"),children:R(fe,{open:y,onOpenChange:C,children:[g(ye,{asChild:!0,children:R($,{variant:"outline",role:"combobox","aria-expanded":y,"aria-controls":v?`${v}-content`:void 0,"aria-required":s,"aria-invalid":!!l,disabled:n,className:r("w-[13rem] justify-between",!t&&"text-muted-foreground",c&&"w-full",l&&"border-destructive focus-visible:ring-destructive",P),children:[p?p.label:m,g(ue,{className:r("opacity-50",y&&"rotate-180")})]})}),g(ge,{className:r("w-[13rem] p-0 rounded-md border bg-popover text-popover-foreground shadow-md",c&&"w-full"),align:"start",children:R(L,{children:[F&&g(V,{placeholder:"Search...",className:"h-9",disabled:n}),R(T,{className:"max-h-[12rem] overflow-y-auto",children:[g(k,{children:"No items found."}),u?u(e):g(S,{children:e?.map(a=>R(E,{value:a.label,onSelect:()=>{o(a.id),C(!1)},disabled:a.disabled,className:r("flex items-center justify-between cursor-pointer my-1",t===a.id&&"bg-accent text-accent-foreground",a.disabled&&"opacity-50 cursor-not-allowed",a.className),children:[R("div",{className:"flex items-center gap-1",children:[a.startIcon&&a.startIcon,g(O,{variant:"small",children:a.label})]}),a.endIcon&&g("div",{className:"ml-2",children:a.endIcon})]},a.id))})]})]})})]})})}import*as d from"react";import{Slot as he}from"@radix-ui/react-slot";import{Controller as Fe,FormProvider as lt,useFormContext as ve}from"react-hook-form";import*as Y from"react";import*as A from"@radix-ui/react-label";import{cva as xe}from"class-variance-authority";import{jsx as Ce}from"react/jsx-runtime";var be=xe("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),M=Y.forwardRef(({className:e,...t},o)=>Ce(A.Root,{ref:o,className:r(be(),e),...t}));M.displayName=A.Root.displayName;import{jsx as b}from"react/jsx-runtime";var Z=d.createContext({}),q=({...e})=>b(Z.Provider,{value:{name:e.name},children:b(Fe,{...e})}),N=()=>{let e=d.useContext(Z),t=d.useContext(j),{getFieldState:o,formState:m}=ve(),n=o(e.name,m);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:s}=t;return{id:s,name:e.name,formItemId:`${s}-form-item`,formDescriptionId:`${s}-form-item-description`,formMessageId:`${s}-form-item-message`,...n}},j=d.createContext({}),_=d.forwardRef(({className:e,...t},o)=>{let m=d.useId();return b(j.Provider,{value:{id:m},children:b("div",{ref:o,className:r("space-y-2",e),...t})})});_.displayName="FormItem";var D=d.forwardRef(({className:e,...t},o)=>{let{error:m,formItemId:n}=N();return b(M,{ref:o,className:r(m&&"text-destructive",e),htmlFor:n,...t})});D.displayName="FormLabel";var H=d.forwardRef(({...e},t)=>{let{error:o,formItemId:m,formDescriptionId:n,formMessageId:s}=N();return b(he,{ref:t,id:m,"aria-describedby":o?`${n} ${s}`:`${n}`,"aria-invalid":!!o,...e})});H.displayName="FormControl";var G=d.forwardRef(({className:e,...t},o)=>{let{formDescriptionId:m}=N();return b("p",{ref:o,id:m,className:r("text-sm text-muted-foreground",e),...t})});G.displayName="FormDescription";var B=d.forwardRef(({className:e,children:t,...o},m)=>{let{error:n,formMessageId:s}=N(),l=n?String(n?.message??""):t;return l?b("p",{ref:m,id:s,className:r("text-sm font-medium text-destructive",e),...o,children:l}):null});B.displayName="FormMessage";import{jsx as h,jsxs as ee}from"react/jsx-runtime";function vt({name:e,label:t,description:o,className:m,warningText:n,required:s,disabled:l,readOnly:P,placeholder:c,"aria-label":F,"aria-describedby":v,options:u,...y}){let{control:C}=Re();return h(q,{name:e,control:C,render:({field:p,fieldState:{error:a}})=>ee(_,{children:[t&&ee(D,{children:[t,s&&h("span",{className:"text-destructive ml-1",children:"*"})]}),h(H,{children:h(X,{...p,options:u,value:p.value||"",onChange:p.onChange,className:r(a&&"border-destructive focus-visible:ring-destructive",m),disabled:l||P,required:s,placeholder:c,"aria-label":F,"aria-describedby":v,"aria-invalid":!!a,"aria-required":s,...y})}),o&&h(G,{children:o}),a&&h(B,{children:a.message}),!a&&n&&h("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:n})]})})}export{vt as RHFSelect};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/button/button.tsx","../../src/components/atoms/command/command.tsx","../../src/components/atoms/typography/typography.tsx","../../src/components/atoms/select/select.tsx","../../src/components/atoms/label/label.tsx","../../src/components/rhf/form/form.tsx","../../src/components/rhf/rhf-select/rhf-select.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","cva","Button","z","className","variant","size","asChild","startIcon","endIcon","loading","disabled","children","type","ariaLabel","props","ref","Comp","Slot","isDisabled","buttonAriaLabel","handleKeyDown","event","jsx","jsxs","Loader2","Command","x","CommandPrimitive","CommandInput","Search","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","typographyVariants","Typography","Q","align","Component","Select","options","value","onChange","placeholder","required","error","fullWidth","searchable","id","renderCommandList","open","setOpen","U","selectedOption","option","Popover","PopoverTrigger","ChevronDown","PopoverContent","labelVariants","Label","Y","FormFieldContext","FormField","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","FormItem","FormLabel","formItemId","FormControl","formDescriptionId","formMessageId","FormDescription","FormMessage","body","RHFSelect","name","label","description","warningText","readOnly","ariaDescribedby","other","control","field"],"mappings":"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","file":"index.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\nimport { cn } from \"@/utils/cn\"\nimport { Loader2 } from \"lucide-react\"\nimport { ButtonProps } from \"./button.types\"\n\n/**\n * Button variant styles using class-variance-authority.\n * Defines the visual styles for different button variants and sizes.\n * Follows WCAG 2.1 Level AA guidelines for accessibility.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"lg\">Click me</Button>\n * ```\n */\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive: \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\"\n } as const,\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\"\n } as const\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\"\n }\n }\n)\n\n/**\n * A versatile button component that supports multiple variants, sizes, and can be rendered as a child component.\n * Built on top of Radix UI's Slot primitive for maximum flexibility.\n * Implements proper accessibility features and follows WCAG 2.1 Level AA guidelines.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-button--docs\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Destructive button with small size\n * <Button variant=\"destructive\" size=\"sm\">Delete</Button>\n *\n * // As a link\n * <Button variant=\"link\" asChild>\n * <a href=\"/about\">About</a>\n * </Button>\n *\n * // With icons\n * <Button startIcon={<Icon />}>With Start Icon</Button>\n * <Button endIcon={<Icon />}>With End Icon</Button>\n *\n * // Loading state\n * <Button loading>Loading</Button>\n * ```\n *\n * @param {ButtonProps} props - The component props\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref\n * @returns {JSX.Element} A button element\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n asChild = false,\n startIcon,\n endIcon,\n loading = false,\n disabled,\n children,\n type = \"button\",\n \"aria-label\": ariaLabel,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n const isDisabled = disabled || loading\n const buttonAriaLabel = ariaLabel || (typeof children === \"string\" ? children : undefined)\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault()\n if (!isDisabled && props.onClick) {\n props.onClick(event as unknown as React.MouseEvent<HTMLButtonElement>)\n }\n }\n }\n\n if (asChild) {\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={isDisabled}\n type={type}\n aria-label={buttonAriaLabel}\n aria-disabled={isDisabled}\n {...props}\n >\n {children}\n </Comp>\n )\n }\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={isDisabled}\n type={type}\n aria-label={buttonAriaLabel}\n aria-disabled={isDisabled}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {loading && (\n <Loader2\n className=\"mr-2 h-4 w-4 animate-spin\"\n role=\"status\"\n aria-label=\"Loading\"\n aria-hidden=\"true\"\n />\n )}\n {!loading && startIcon && (\n <span className=\"mr-2\" aria-hidden=\"true\">\n {startIcon}\n </span>\n )}\n {children}\n {!loading && endIcon && (\n <span className=\"ml-2\" aria-hidden=\"true\">\n {endIcon}\n </span>\n )}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/utils/index\"\nimport { Dialog, DialogContent } from \"@/components/atoms/dialog\"\nimport {\n type CommandProps,\n type CommandRef,\n type CommandDialogProps,\n type CommandInputProps,\n type CommandInputRef,\n type CommandListProps,\n type CommandListRef,\n type CommandEmptyProps,\n type CommandEmptyRef,\n type CommandGroupProps,\n type CommandGroupRef,\n type CommandSeparatorProps,\n type CommandSeparatorRef,\n type CommandItemProps,\n type CommandItemRef,\n type CommandShortcutProps\n} from \"./command.types\"\n\n/**\n * Command component that provides a command palette interface.\n * Built on top of cmdk and Radix UI's Dialog primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-command--docs\n *\n * @example\n * ```tsx\n * <Command>\n * <CommandInput placeholder=\"Search...\" />\n * <CommandList>\n * <CommandEmpty>No results found.</CommandEmpty>\n * <CommandGroup heading=\"Suggestions\">\n * <CommandItem>Calendar</CommandItem>\n * <CommandItem>Search</CommandItem>\n * </CommandGroup>\n * </CommandList>\n * </Command>\n * ```\n */\nconst Command = React.forwardRef<CommandRef, CommandProps>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n className\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0\">\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<CommandInputRef, CommandInputProps>(\n ({ className, ...props }, ref) => (\n <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n />\n </div>\n )\n)\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<CommandListRef, CommandListProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n {...props}\n />\n )\n)\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<CommandEmptyRef, CommandEmptyProps>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<CommandGroupRef, CommandGroupProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n className\n )}\n {...props}\n />\n )\n)\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<CommandSeparatorRef, CommandSeparatorProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 h-px bg-border\", className)}\n {...props}\n />\n )\n)\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<CommandItemRef, CommandItemProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n className\n )}\n {...props}\n />\n )\n)\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: CommandShortcutProps) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator\n}\n","import * as React from \"react\"\nimport { cn } from \"@/utils\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nconst typographyVariants = cva(\"\", {\n variants: {\n variant: {\n h1: \"scroll-m-5 text-4xl font-extrabold tracking-tight lg:text-5xl\",\n h2: \"scroll-m-5 text-3xl font-semibold tracking-tight\",\n h3: \"scroll-m-5 text-2xl font-semibold tracking-tight\",\n h4: \"scroll-m-5 text-xl font-semibold tracking-tight\",\n h5: \"scroll-m-5 text-lg font-semibold tracking-tight\",\n h6: \"scroll-m-5 text-base font-semibold tracking-tight\",\n p: \"leading-7 [&:not(:first-child)]:mt-6\",\n blockquote: \"mt-6 border-l-2 border-slate-300 pl-6 italic\",\n list: \"my-6 ml-6 list-disc [&>li]:mt-2\",\n lead: \"text-xl text-muted-foreground\",\n large: \"text-lg font-semibold\",\n small: \"text-sm font-medium leading-none\",\n muted: \"text-sm text-muted-foreground\"\n },\n align: {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n justify: \"text-justify\"\n }\n },\n defaultVariants: {\n variant: \"p\",\n align: \"left\"\n }\n})\n\nexport interface TypographyProps\n extends React.HTMLAttributes<HTMLElement>,\n VariantProps<typeof typographyVariants> {\n as?: React.ElementType\n}\n\n/**\n * Typography component for creating accessible text elements.\n * Built on top of shadcn/ui's Typography component.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-typography--docs\n *\n */\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n ({ className, variant, align, as: Component = \"p\", ...props }, ref) => {\n return (\n <Component\n className={cn(typographyVariants({ variant, align, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\n\nTypography.displayName = \"Typography\"\n\nexport { Typography, typographyVariants }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/utils\"\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@radix-ui/react-popover\"\nimport { Button } from \"../button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList\n} from \"../command\"\nimport { Typography } from \"../typography\"\n\nexport type SelectOption = {\n id: string\n label: string\n startIcon?: React.ReactNode\n endIcon?: React.ReactNode\n className?: string\n disabled?: boolean\n}\n\nexport type SelectProps = {\n /** Whether the select is searchable */\n searchable?: boolean\n /** Whether the select should take up the full width of its container */\n fullWidth?: boolean\n /** Currently selected value */\n value: string\n /** Array of options to display in the select */\n options: SelectOption[]\n /** Callback fired when the value changes */\n // eslint-disable-next-line no-unused-vars\n onChange: (value: string) => void\n /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */\n // eslint-disable-next-line no-unused-vars\n renderCommandList?: (options: SelectOption[]) => React.ReactNode\n /** Placeholder text to show when no value is selected */\n placeholder?: string\n /** Whether the select is disabled */\n disabled?: boolean\n /** Whether the select is required */\n required?: boolean\n /** Error message to display */\n error?: string\n /** Additional class name for the select */\n className?: string\n /** ID for the select element */\n id?: string\n}\n\n/**\n * SearchableSelect component that provides a searchable dropdown select input.\n * Built on top of Radix UI's Select primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs-atoms-select--docs\n *\n * @example\n * ```tsx\n * <Select\n * options={[\n * { id: \"1\", label: \"Option 1\" },\n * { id: \"2\", label: \"Option 2\" }\n * ]}\n * value=\"1\"\n * onChange={setValue}\n * required\n * />\n * ```\n */\nexport function Select({\n options,\n value,\n onChange,\n placeholder = \"Select an option\",\n disabled,\n required,\n error,\n className,\n fullWidth,\n searchable,\n id,\n renderCommandList\n}: SelectProps) {\n const [open, setOpen] = React.useState(false)\n const selectedOption = options?.find((option) => option.id === value)\n\n return (\n <div className={cn(fullWidth && \"w-full\")}>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={id ? `${id}-content` : undefined}\n aria-required={required}\n aria-invalid={!!error}\n disabled={disabled}\n className={cn(\n \"w-[13rem] justify-between\",\n !value && \"text-muted-foreground\",\n fullWidth && \"w-full\",\n error && \"border-destructive focus-visible:ring-destructive\",\n className\n )}\n >\n {selectedOption ? selectedOption.label : placeholder}\n <ChevronDown className={cn(\"opacity-50\", open && \"rotate-180\")} />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className={cn(\n \"w-[13rem] p-0 rounded-md border bg-popover text-popover-foreground shadow-md\",\n fullWidth && \"w-full\"\n )}\n align=\"start\"\n >\n <Command>\n {searchable && (\n <CommandInput placeholder=\"Search...\" className=\"h-9\" disabled={disabled} />\n )}\n <CommandList className=\"max-h-[12rem] overflow-y-auto\">\n <CommandEmpty>No items found.</CommandEmpty>\n {renderCommandList ? (\n renderCommandList(options)\n ) : (\n <CommandGroup>\n {options?.map((option) => (\n <CommandItem\n value={option.label}\n key={option.id}\n onSelect={() => {\n onChange(option.id)\n setOpen(false)\n }}\n disabled={option.disabled}\n className={cn(\n \"flex items-center justify-between cursor-pointer my-1\",\n value === option.id && \"bg-accent text-accent-foreground\",\n option.disabled && \"opacity-50 cursor-not-allowed\",\n option.className\n )}\n >\n <div className=\"flex items-center gap-1\">\n {option.startIcon && option.startIcon}\n <Typography variant=\"small\">{option.label}</Typography>\n </div>\n {option.endIcon && <div className=\"ml-2\">{option.endIcon}</div>}\n </CommandItem>\n ))}\n </CommandGroup>\n )}\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n ({ className, ...props }, ref) => (\n <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n type ControllerProps,\n type FieldPath,\n type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n </FormItemContext.Provider>\n )\n }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-sm font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField\n}\n","import * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Select } from \"@/components/atoms/select\"\nimport { cn } from \"@/utils/cn\"\nimport {\n FormControl,\n FormItem,\n FormMessage,\n FormLabel,\n FormDescription,\n FormField\n} from \"@/components/rhf/form\"\nimport { type RHFSelectProps } from \"./rhf-select.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A select component that integrates with React Hook Form.\n * Provides form validation, error handling, and accessibility features.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfselect--docs\n *\n * @example\n * ```tsx\n * <Form>\n * <RHFSelect\n * name=\"country\"\n * label=\"Country\"\n * options={[\n * { id: \"us\", label: \"United States\" },\n * { id: \"ca\", label: \"Canada\" }\n * ]}\n * />\n * </Form>\n * ```\n */\nexport function RHFSelect<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n description,\n className,\n warningText,\n required,\n disabled,\n readOnly,\n placeholder,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedby,\n options,\n ...other\n}: RHFSelectProps<TFieldValues, TName>) {\n const { control } = useFormContext<TFieldValues>()\n\n return (\n <FormField\n name={name}\n control={control}\n render={({ field, fieldState: { error } }) => (\n <FormItem>\n {label && (\n <FormLabel>\n {label}\n {required && <span className=\"text-destructive ml-1\">*</span>}\n </FormLabel>\n )}\n <FormControl>\n <Select\n {...field}\n options={options}\n value={field.value || \"\"}\n onChange={field.onChange}\n className={cn(\n error && \"border-destructive focus-visible:ring-destructive\",\n className\n )}\n disabled={disabled || readOnly}\n required={required}\n placeholder={placeholder}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-invalid={!!error}\n aria-required={required}\n {...other}\n />\n </FormControl>\n {description && <FormDescription>{description}</FormDescription>}\n {error && <FormMessage>{error.message}</FormMessage>}\n {!error && warningText && (\n <p className=\"text-sm text-yellow-600 dark:text-yellow-500\" role=\"alert\">\n {warningText}\n </p>\n )}\n </FormItem>\n )}\n />\n )\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/rhf/rhf-select/rhf-select.tsx","../../src/components/atoms/select/select.tsx","../../src/utils/cn.ts","../../src/components/atoms/button/button.tsx","../../src/components/atoms/command/command.tsx","../../src/components/atoms/typography/typography.tsx","../../src/components/rhf/form/form.tsx","../../src/components/atoms/label/label.tsx"],"sourcesContent":["\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Select } from \"@/components/atoms/select\"\nimport { cn } from \"@/utils/cn\"\nimport {\n FormControl,\n FormItem,\n FormMessage,\n FormLabel,\n FormDescription,\n FormField\n} from \"@/components/rhf/form\"\nimport { type RHFSelectProps } from \"./rhf-select.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A select component that integrates with React Hook Form.\n * Provides form validation, error handling, and accessibility features.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfselect--docs\n *\n * @example\n * ```tsx\n * <Form>\n * <RHFSelect\n * name=\"country\"\n * label=\"Country\"\n * options={[\n * { id: \"us\", label: \"United States\" },\n * { id: \"ca\", label: \"Canada\" }\n * ]}\n * />\n * </Form>\n * ```\n */\nexport function RHFSelect<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n description,\n className,\n warningText,\n required,\n disabled,\n readOnly,\n placeholder,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedby,\n options,\n ...other\n}: RHFSelectProps<TFieldValues, TName>) {\n const { control } = useFormContext<TFieldValues>()\n\n return (\n <FormField\n name={name}\n control={control}\n render={({ field, fieldState: { error } }) => (\n <FormItem>\n {label && (\n <FormLabel>\n {label}\n {required && <span className=\"text-destructive ml-1\">*</span>}\n </FormLabel>\n )}\n <FormControl>\n <Select\n {...field}\n options={options}\n value={field.value || \"\"}\n onChange={field.onChange}\n className={cn(\n error && \"border-destructive focus-visible:ring-destructive\",\n className\n )}\n disabled={disabled || readOnly}\n required={required}\n placeholder={placeholder}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-invalid={!!error}\n aria-required={required}\n {...other}\n />\n </FormControl>\n {description && <FormDescription>{description}</FormDescription>}\n {error && <FormMessage>{error.message}</FormMessage>}\n {!error && warningText && (\n <p className=\"text-sm text-yellow-600 dark:text-yellow-500\" role=\"alert\">\n {warningText}\n </p>\n )}\n </FormItem>\n )}\n />\n )\n}\n","\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/utils\"\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@radix-ui/react-popover\"\nimport { Button } from \"../button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList\n} from \"../command\"\nimport { Typography } from \"../typography\"\n\nexport type SelectOption = {\n id: string\n label: string\n startIcon?: React.ReactNode\n endIcon?: React.ReactNode\n className?: string\n disabled?: boolean\n}\n\nexport type SelectProps = {\n /** Whether the select is searchable */\n searchable?: boolean\n /** Whether the select should take up the full width of its container */\n fullWidth?: boolean\n /** Currently selected value */\n value: string\n /** Array of options to display in the select */\n options: SelectOption[]\n /** Callback fired when the value changes */\n // eslint-disable-next-line no-unused-vars\n onChange: (value: string) => void\n /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */\n // eslint-disable-next-line no-unused-vars\n renderCommandList?: (options: SelectOption[]) => React.ReactNode\n /** Placeholder text to show when no value is selected */\n placeholder?: string\n /** Whether the select is disabled */\n disabled?: boolean\n /** Whether the select is required */\n required?: boolean\n /** Error message to display */\n error?: string\n /** Additional class name for the select */\n className?: string\n /** ID for the select element */\n id?: string\n}\n\n/**\n * SearchableSelect component that provides a searchable dropdown select input.\n * Built on top of Radix UI's Select primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs-atoms-select--docs\n *\n * @example\n * ```tsx\n * <Select\n * options={[\n * { id: \"1\", label: \"Option 1\" },\n * { id: \"2\", label: \"Option 2\" }\n * ]}\n * value=\"1\"\n * onChange={setValue}\n * required\n * />\n * ```\n */\nexport function Select({\n options,\n value,\n onChange,\n placeholder = \"Select an option\",\n disabled,\n required,\n error,\n className,\n fullWidth,\n searchable,\n id,\n renderCommandList\n}: SelectProps) {\n const [open, setOpen] = React.useState(false)\n const selectedOption = options?.find((option) => option.id === value)\n\n return (\n <div className={cn(fullWidth && \"w-full\")}>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={id ? `${id}-content` : undefined}\n aria-required={required}\n aria-invalid={!!error}\n disabled={disabled}\n className={cn(\n \"w-[13rem] justify-between\",\n !value && \"text-muted-foreground\",\n fullWidth && \"w-full\",\n error && \"border-destructive focus-visible:ring-destructive\",\n className\n )}\n >\n {selectedOption ? selectedOption.label : placeholder}\n <ChevronDown className={cn(\"opacity-50\", open && \"rotate-180\")} />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className={cn(\n \"w-[13rem] p-0 rounded-md border bg-popover text-popover-foreground shadow-md\",\n fullWidth && \"w-full\"\n )}\n align=\"start\"\n >\n <Command>\n {searchable && (\n <CommandInput placeholder=\"Search...\" className=\"h-9\" disabled={disabled} />\n )}\n <CommandList className=\"max-h-[12rem] overflow-y-auto\">\n <CommandEmpty>No items found.</CommandEmpty>\n {renderCommandList ? (\n renderCommandList(options)\n ) : (\n <CommandGroup>\n {options?.map((option) => (\n <CommandItem\n value={option.label}\n key={option.id}\n onSelect={() => {\n onChange(option.id)\n setOpen(false)\n }}\n disabled={option.disabled}\n className={cn(\n \"flex items-center justify-between cursor-pointer my-1\",\n value === option.id && \"bg-accent text-accent-foreground\",\n option.disabled && \"opacity-50 cursor-not-allowed\",\n option.className\n )}\n >\n <div className=\"flex items-center gap-1\">\n {option.startIcon && option.startIcon}\n <Typography variant=\"small\">{option.label}</Typography>\n </div>\n {option.endIcon && <div className=\"ml-2\">{option.endIcon}</div>}\n </CommandItem>\n ))}\n </CommandGroup>\n )}\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\nimport { cn } from \"@/utils/cn\"\nimport { Loader2 } from \"lucide-react\"\nimport { ButtonProps } from \"./button.types\"\n\n/**\n * Button variant styles using class-variance-authority.\n * Defines the visual styles for different button variants and sizes.\n * Follows WCAG 2.1 Level AA guidelines for accessibility.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"lg\">Click me</Button>\n * ```\n */\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive: \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\"\n } as const,\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\"\n } as const\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\"\n }\n }\n)\n\n/**\n * A versatile button component that supports multiple variants, sizes, and can be rendered as a child component.\n * Built on top of Radix UI's Slot primitive for maximum flexibility.\n * Implements proper accessibility features and follows WCAG 2.1 Level AA guidelines.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-button--docs\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Destructive button with small size\n * <Button variant=\"destructive\" size=\"sm\">Delete</Button>\n *\n * // As a link\n * <Button variant=\"link\" asChild>\n * <a href=\"/about\">About</a>\n * </Button>\n *\n * // With icons\n * <Button startIcon={<Icon />}>With Start Icon</Button>\n * <Button endIcon={<Icon />}>With End Icon</Button>\n *\n * // Loading state\n * <Button loading>Loading</Button>\n * ```\n *\n * @param {ButtonProps} props - The component props\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref\n * @returns {JSX.Element} A button element\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n asChild = false,\n startIcon,\n endIcon,\n loading = false,\n disabled,\n children,\n type = \"button\",\n \"aria-label\": ariaLabel,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n const isDisabled = disabled || loading\n const buttonAriaLabel = ariaLabel || (typeof children === \"string\" ? children : undefined)\n\n // Handle keyboard interaction\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault()\n if (!isDisabled && props.onClick) {\n props.onClick(event as unknown as React.MouseEvent<HTMLButtonElement>)\n }\n }\n }\n\n if (asChild) {\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={isDisabled}\n type={type}\n aria-label={buttonAriaLabel}\n aria-disabled={isDisabled}\n {...props}\n >\n {children}\n </Comp>\n )\n }\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={isDisabled}\n type={type}\n aria-label={buttonAriaLabel}\n aria-disabled={isDisabled}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {loading && (\n <Loader2\n className=\"mr-2 h-4 w-4 animate-spin\"\n role=\"status\"\n aria-label=\"Loading\"\n aria-hidden=\"true\"\n />\n )}\n {!loading && startIcon && (\n <span className=\"mr-2\" aria-hidden=\"true\">\n {startIcon}\n </span>\n )}\n {children}\n {!loading && endIcon && (\n <span className=\"ml-2\" aria-hidden=\"true\">\n {endIcon}\n </span>\n )}\n </Comp>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/utils/index\"\nimport { Dialog, DialogContent } from \"@/components/atoms/dialog\"\nimport {\n type CommandProps,\n type CommandRef,\n type CommandDialogProps,\n type CommandInputProps,\n type CommandInputRef,\n type CommandListProps,\n type CommandListRef,\n type CommandEmptyProps,\n type CommandEmptyRef,\n type CommandGroupProps,\n type CommandGroupRef,\n type CommandSeparatorProps,\n type CommandSeparatorRef,\n type CommandItemProps,\n type CommandItemRef,\n type CommandShortcutProps\n} from \"./command.types\"\n\n/**\n * Command component that provides a command palette interface.\n * Built on top of cmdk and Radix UI's Dialog primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-command--docs\n *\n * @example\n * ```tsx\n * <Command>\n * <CommandInput placeholder=\"Search...\" />\n * <CommandList>\n * <CommandEmpty>No results found.</CommandEmpty>\n * <CommandGroup heading=\"Suggestions\">\n * <CommandItem>Calendar</CommandItem>\n * <CommandItem>Search</CommandItem>\n * </CommandGroup>\n * </CommandList>\n * </Command>\n * ```\n */\nconst Command = React.forwardRef<CommandRef, CommandProps>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n className\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0\">\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<CommandInputRef, CommandInputProps>(\n ({ className, ...props }, ref) => (\n <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n />\n </div>\n )\n)\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<CommandListRef, CommandListProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n {...props}\n />\n )\n)\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<CommandEmptyRef, CommandEmptyProps>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<CommandGroupRef, CommandGroupProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n className\n )}\n {...props}\n />\n )\n)\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<CommandSeparatorRef, CommandSeparatorProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 h-px bg-border\", className)}\n {...props}\n />\n )\n)\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<CommandItemRef, CommandItemProps>(\n ({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n className\n )}\n {...props}\n />\n )\n)\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: CommandShortcutProps) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator\n}\n","import * as React from \"react\"\nimport { cn } from \"@/utils\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nconst typographyVariants = cva(\"\", {\n variants: {\n variant: {\n h1: \"scroll-m-5 text-4xl font-extrabold tracking-tight lg:text-5xl\",\n h2: \"scroll-m-5 text-3xl font-semibold tracking-tight\",\n h3: \"scroll-m-5 text-2xl font-semibold tracking-tight\",\n h4: \"scroll-m-5 text-xl font-semibold tracking-tight\",\n h5: \"scroll-m-5 text-lg font-semibold tracking-tight\",\n h6: \"scroll-m-5 text-base font-semibold tracking-tight\",\n p: \"leading-7 [&:not(:first-child)]:mt-6\",\n blockquote: \"mt-6 border-l-2 border-slate-300 pl-6 italic\",\n list: \"my-6 ml-6 list-disc [&>li]:mt-2\",\n lead: \"text-xl text-muted-foreground\",\n large: \"text-lg font-semibold\",\n small: \"text-sm font-medium leading-none\",\n muted: \"text-sm text-muted-foreground\"\n },\n align: {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n justify: \"text-justify\"\n }\n },\n defaultVariants: {\n variant: \"p\",\n align: \"left\"\n }\n})\n\nexport interface TypographyProps\n extends React.HTMLAttributes<HTMLElement>,\n VariantProps<typeof typographyVariants> {\n as?: React.ElementType\n}\n\n/**\n * Typography component for creating accessible text elements.\n * Built on top of shadcn/ui's Typography component.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-typography--docs\n *\n */\nconst Typography = React.forwardRef<HTMLElement, TypographyProps>(\n ({ className, variant, align, as: Component = \"p\", ...props }, ref) => {\n return (\n <Component\n className={cn(typographyVariants({ variant, align, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\n\nTypography.displayName = \"Typography\"\n\nexport { Typography, typographyVariants }\n","\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n type ControllerProps,\n type FieldPath,\n type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n </FormItemContext.Provider>\n )\n }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-sm font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n ({ className, ...props }, ref) => (\n <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":"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","names":["useFormContext","React","ChevronDown","clsx","twMerge","cn","inputs","Popover","PopoverContent","PopoverTrigger","React","Slot","cva","Loader2","jsx","jsxs","buttonVariants","cva","Button","className","variant","size","asChild","startIcon","endIcon","loading","disabled","children","type","ariaLabel","props","ref","Comp","Slot","isDisabled","buttonAriaLabel","handleKeyDown","event","cn","React","CommandPrimitive","Search","jsx","jsxs","Command","className","props","ref","CommandPrimitive","cn","CommandInput","className","props","ref","jsxs","jsx","Search","CommandPrimitive","cn","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","React","cva","jsx","typographyVariants","Typography","className","variant","align","Component","props","ref","cn","jsx","jsxs","Select","options","value","onChange","placeholder","disabled","required","error","className","fullWidth","searchable","id","renderCommandList","open","setOpen","selectedOption","option","cn","Popover","PopoverTrigger","Button","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Typography","React","Slot","Controller","FormProvider","useFormContext","React","LabelPrimitive","cva","jsx","labelVariants","cva","Label","className","props","ref","cn","jsx","FormFieldContext","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","jsx","jsxs","RHFSelect","name","label","description","className","warningText","required","disabled","readOnly","placeholder","ariaLabel","ariaDescribedby","options","other","control","useFormContext","FormField","field","error","FormItem","FormLabel","FormControl","Select","cn","FormDescription","FormMessage"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
"use client";import{useFormContext as z}from"react-hook-form";import*as V from"react";import*as d from"@radix-ui/react-switch";import{clsx as k}from"clsx";import{twMerge as D}from"tailwind-merge";function m(...e){return D(k(e))}import{jsx as w}from"react/jsx-runtime";var F=V.forwardRef(({className:e,...o},t)=>w(d.Root,{className:m("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",e),...o,ref:t,children:w(d.Thumb,{className:m("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0")})}));F.displayName=d.Root.displayName;import*as r from"react";import{Slot as W}from"@radix-ui/react-slot";import{Controller as O,FormProvider as le,useFormContext as q}from"react-hook-form";import*as L from"react";import*as y from"@radix-ui/react-label";import{cva as E}from"class-variance-authority";import{jsx as A}from"react/jsx-runtime";var $=E("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),u=L.forwardRef(({className:e,...o},t)=>A(y.Root,{ref:t,className:m($(),e),...o}));u.displayName=y.Root.displayName;import{jsx as l}from"react/jsx-runtime";var N=r.createContext({}),v=({...e})=>l(N.Provider,{value:{name:e.name},children:l(O,{...e})}),c=()=>{let e=r.useContext(N),o=r.useContext(T),{getFieldState:t,formState:a}=q(),i=t(e.name,a);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:s}=o;return{id:s,name:e.name,formItemId:`${s}-form-item`,formDescriptionId:`${s}-form-item-description`,formMessageId:`${s}-form-item-message`,...i}},T=r.createContext({}),b=r.forwardRef(({className:e,...o},t)=>{let a=r.useId();return l(T.Provider,{value:{id:a},children:l("div",{ref:t,className:m("space-y-2",e),...o})})});b.displayName="FormItem";var P=r.forwardRef(({className:e,...o},t)=>{let{error:a,formItemId:i}=c();return l(u,{ref:t,className:m(a&&"text-destructive",e),htmlFor:i,...o})});P.displayName="FormLabel";var R=r.forwardRef(({...e},o)=>{let{error:t,formItemId:a,formDescriptionId:i,formMessageId:s}=c();return l(W,{ref:o,id:a,"aria-describedby":t?`${i} ${s}`:`${i}`,"aria-invalid":!!t,...e})});R.displayName="FormControl";var x=r.forwardRef(({className:e,...o},t)=>{let{formDescriptionId:a}=c();return l("p",{ref:t,id:a,className:m("text-sm text-muted-foreground",e),...o})});x.displayName="FormDescription";var h=r.forwardRef(({className:e,children:o,...t},a)=>{let{error:i,formMessageId:s}=c(),p=i?String(i?.message??""):o;return p?l("p",{ref:a,id:s,className:m("text-sm font-medium text-destructive",e),...t,children:p}):null});h.displayName="FormMessage";import{jsx as n,jsxs as C}from"react/jsx-runtime";function xe({name:e,label:o,description:t,className:a,warningText:i,required:s,disabled:p,readOnly:B,"aria-label":I,"aria-describedby":S,...M}){let{control:H}=z();return n(v,{name:e,control:H,render:({field:g,fieldState:{error:f}})=>C(b,{className:"flex flex-row items-start space-x-3 space-y-0",children:[n(R,{children:n(F,{checked:g.value,onCheckedChange:g.onChange,disabled:p,"aria-label":I,"aria-describedby":S,"aria-invalid":!!f,"aria-required":s,...M})}),C("div",{className:"space-y-1 leading-none",children:[o&&C(P,{children:[o,s&&n("span",{className:"text-destructive ml-1",children:"*"})]}),t&&n(x,{children:t}),f&&n(h,{children:f.message}),!f&&i&&n("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:i})]})]})})}export{xe as RHFSwitch};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/cn.ts","../../src/components/atoms/switch/switch.tsx","../../src/components/atoms/label/label.tsx","../../src/components/rhf/form/form.tsx","../../src/components/rhf/rhf-switch/rhf-switch.tsx"],"names":["cn","inputs","twMerge","clsx","Switch","V","className","props","ref","jsx","labelVariants","cva","Label","L","FormFieldContext","FormField","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","FormLabel","error","formItemId","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","RHFSwitch","name","label","description","warningText","required","disabled","readOnly","ariaLabel","ariaDescribedby","other","control","field","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/utils/index\"\nimport { SwitchProps } from \"./switch.types\"\n\n/**\n * Switch component that provides a toggle input control.\n * Built on top of Radix UI's Switch primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-switch--docs\n *\n * @example\n * ```tsx\n * <Switch />\n * <Switch defaultChecked />\n * <Switch disabled />\n * ```\n */\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(\n ({ className, ...props }, ref) => (\n <SwitchPrimitives.Root\n className={cn(\n \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitives.Thumb\n className={cn(\n \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitives.Root>\n )\n)\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n ({ className, ...props }, ref) => (\n <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n type ControllerProps,\n type FieldPath,\n type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n </FormItemContext.Provider>\n )\n }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-sm font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField\n}\n","import * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Switch } from \"@/components/atoms/switch\"\nimport {\n FormControl,\n FormItem,\n FormMessage,\n FormLabel,\n FormDescription,\n FormField\n} from \"@/components/rhf/form\"\nimport { type RHFSwitchProps } from \"./rhf-switch.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A switch component that integrates with React Hook Form.\n * Provides form validation, error handling, and accessibility features.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfswitch--docs\n *\n * @example\n * ```tsx\n * <Form>\n * <RHFSwitch name=\"notifications\" label=\"Enable notifications\" />\n * </Form>\n * ```\n */\nexport function RHFSwitch<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n description,\n className,\n warningText,\n required,\n disabled,\n readOnly,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedby,\n ...other\n}: RHFSwitchProps<TFieldValues, TName>) {\n const { control } = useFormContext<TFieldValues>()\n\n return (\n <FormField\n name={name}\n control={control}\n render={({ field, fieldState: { error } }) => (\n <FormItem className=\"flex flex-row items-start space-x-3 space-y-0\">\n <FormControl>\n <Switch\n checked={field.value}\n onCheckedChange={field.onChange}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-invalid={!!error}\n aria-required={required}\n {...other}\n />\n </FormControl>\n <div className=\"space-y-1 leading-none\">\n {label && (\n <FormLabel>\n {label}\n {required && <span className=\"text-destructive ml-1\">*</span>}\n </FormLabel>\n )}\n {description && <FormDescription>{description}</FormDescription>}\n {error && <FormMessage>{error.message}</FormMessage>}\n {!error && warningText && (\n <p className=\"text-sm text-yellow-600 dark:text-yellow-500\" role=\"alert\">\n {warningText}\n </p>\n )}\n </div>\n </FormItem>\n )}\n />\n )\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/rhf/rhf-switch/rhf-switch.tsx","../../src/components/atoms/switch/switch.tsx","../../src/utils/cn.ts","../../src/components/rhf/form/form.tsx","../../src/components/atoms/label/label.tsx"],"sourcesContent":["\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Switch } from \"@/components/atoms/switch\"\nimport {\n FormControl,\n FormItem,\n FormMessage,\n FormLabel,\n FormDescription,\n FormField\n} from \"@/components/rhf/form\"\nimport { type RHFSwitchProps } from \"./rhf-switch.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A switch component that integrates with React Hook Form.\n * Provides form validation, error handling, and accessibility features.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfswitch--docs\n *\n * @example\n * ```tsx\n * <Form>\n * <RHFSwitch name=\"notifications\" label=\"Enable notifications\" />\n * </Form>\n * ```\n */\nexport function RHFSwitch<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n description,\n className,\n warningText,\n required,\n disabled,\n readOnly,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedby,\n ...other\n}: RHFSwitchProps<TFieldValues, TName>) {\n const { control } = useFormContext<TFieldValues>()\n\n return (\n <FormField\n name={name}\n control={control}\n render={({ field, fieldState: { error } }) => (\n <FormItem className=\"flex flex-row items-start space-x-3 space-y-0\">\n <FormControl>\n <Switch\n checked={field.value}\n onCheckedChange={field.onChange}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-invalid={!!error}\n aria-required={required}\n {...other}\n />\n </FormControl>\n <div className=\"space-y-1 leading-none\">\n {label && (\n <FormLabel>\n {label}\n {required && <span className=\"text-destructive ml-1\">*</span>}\n </FormLabel>\n )}\n {description && <FormDescription>{description}</FormDescription>}\n {error && <FormMessage>{error.message}</FormMessage>}\n {!error && warningText && (\n <p className=\"text-sm text-yellow-600 dark:text-yellow-500\" role=\"alert\">\n {warningText}\n </p>\n )}\n </div>\n </FormItem>\n )}\n />\n )\n}\n","import * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/utils/index\"\nimport { SwitchProps } from \"./switch.types\"\n\n/**\n * Switch component that provides a toggle input control.\n * Built on top of Radix UI's Switch primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-switch--docs\n *\n * @example\n * ```tsx\n * <Switch />\n * <Switch defaultChecked />\n * <Switch disabled />\n * ```\n */\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(\n ({ className, ...props }, ref) => (\n <SwitchPrimitives.Root\n className={cn(\n \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n className\n )}\n {...props}\n ref={ref}\n >\n <SwitchPrimitives.Thumb\n className={cn(\n \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n )}\n />\n </SwitchPrimitives.Root>\n )\n)\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n type ControllerProps,\n type FieldPath,\n type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n </FormItemContext.Provider>\n )\n }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-sm font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n ({ className, ...props }, ref) => (\n <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":"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","names":["useFormContext","React","SwitchPrimitives","clsx","twMerge","cn","inputs","jsx","Switch","className","props","ref","cn","React","Slot","Controller","FormProvider","useFormContext","React","LabelPrimitive","cva","jsx","labelVariants","cva","Label","className","props","ref","cn","jsx","FormFieldContext","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","jsx","jsxs","RHFSwitch","name","label","description","className","warningText","required","disabled","readOnly","ariaLabel","ariaDescribedby","other","control","useFormContext","FormField","field","error","FormItem","FormControl","Switch","FormLabel","FormDescription","FormMessage"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { FieldValues, FieldPath } from 'react-hook-form';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Input component for creating accessible input fields.
|
|
7
|
+
* Built on top of shadcn/ui's Input component.
|
|
8
|
+
*
|
|
9
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-input--docs
|
|
10
|
+
*
|
|
11
|
+
*/
|
|
12
|
+
declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
13
|
+
|
|
14
|
+
interface RHFTextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Input>, "name"> {
|
|
15
|
+
/** The name of the field in the form */
|
|
16
|
+
name: TName;
|
|
17
|
+
/** Optional label for the field */
|
|
18
|
+
label?: string;
|
|
19
|
+
/** Optional description text below the field */
|
|
20
|
+
description?: string;
|
|
21
|
+
/** Optional warning text to display */
|
|
22
|
+
warningText?: string;
|
|
23
|
+
/** Whether the field is required */
|
|
24
|
+
required?: boolean;
|
|
25
|
+
/** Whether the field is disabled */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Whether the field is read-only */
|
|
28
|
+
readOnly?: boolean;
|
|
29
|
+
/** The type of input (text, number, email, etc.) */
|
|
30
|
+
type?: React.HTMLInputTypeAttribute;
|
|
31
|
+
/** Optional placeholder text */
|
|
32
|
+
placeholder?: string;
|
|
33
|
+
/** Optional aria-label for accessibility */
|
|
34
|
+
"aria-label"?: string;
|
|
35
|
+
/** Optional aria-describedby for accessibility */
|
|
36
|
+
"aria-describedby"?: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* A text field component that integrates with React Hook Form.
|
|
41
|
+
* Provides form validation, error handling, and accessibility features.
|
|
42
|
+
*
|
|
43
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhftextfield--docs
|
|
44
|
+
*
|
|
45
|
+
* * @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* <Form>
|
|
48
|
+
* <RHFTextField name="name" label="Name" />
|
|
49
|
+
* <RHFTextField name="email" label="Email" />
|
|
50
|
+
* </Form>
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
declare function RHFTextField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, type, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextFieldProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
54
|
+
|
|
55
|
+
export { RHFTextField };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{useFormContext as K}from"react-hook-form";import*as V from"react";import{clsx as A}from"clsx";import{twMerge as W}from"tailwind-merge";function m(...e){return W(A(e))}import{jsx as B}from"react/jsx-runtime";var C=V.forwardRef(({className:e,type:o,...t},r)=>B("input",{type:o,className:m("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:r,...t}));C.displayName="Input";import*as i from"react";import{Slot as z}from"@radix-ui/react-slot";import{Controller as G,FormProvider as ne,useFormContext as J}from"react-hook-form";import*as L from"react";import*as v from"@radix-ui/react-label";import{cva as k}from"class-variance-authority";import{jsx as q}from"react/jsx-runtime";var O=k("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),f=L.forwardRef(({className:e,...o},t)=>q(v.Root,{ref:t,className:m(O(),e),...o}));f.displayName=v.Root.displayName;import{jsx as n}from"react/jsx-runtime";var T=i.createContext({}),g=({...e})=>n(T.Provider,{value:{name:e.name},children:n(G,{...e})}),u=()=>{let e=i.useContext(T),o=i.useContext(I),{getFieldState:t,formState:r}=J(),a=t(e.name,r);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:l}=o;return{id:l,name:e.name,formItemId:`${l}-form-item`,formDescriptionId:`${l}-form-item-description`,formMessageId:`${l}-form-item-message`,...a}},I=i.createContext({}),x=i.forwardRef(({className:e,...o},t)=>{let r=i.useId();return n(I.Provider,{value:{id:r},children:n("div",{ref:t,className:m("space-y-2",e),...o})})});x.displayName="FormItem";var b=i.forwardRef(({className:e,...o},t)=>{let{error:r,formItemId:a}=u();return n(f,{ref:t,className:m(r&&"text-destructive",e),htmlFor:a,...o})});b.displayName="FormLabel";var R=i.forwardRef(({...e},o)=>{let{error:t,formItemId:r,formDescriptionId:a,formMessageId:l}=u();return n(z,{ref:o,id:r,"aria-describedby":t?`${a} ${l}`:`${a}`,"aria-invalid":!!t,...e})});R.displayName="FormControl";var P=i.forwardRef(({className:e,...o},t)=>{let{formDescriptionId:r}=u();return n("p",{ref:t,id:r,className:m("text-sm text-muted-foreground",e),...o})});P.displayName="FormDescription";var y=i.forwardRef(({className:e,children:o,...t},r)=>{let{error:a,formMessageId:l}=u(),p=a?String(a?.message??""):o;return p?n("p",{ref:r,id:l,className:m("text-sm font-medium text-destructive",e),...t,children:p}):null});y.displayName="FormMessage";import{jsx as d,jsxs as h}from"react/jsx-runtime";function Ce({name:e,label:o,description:t,className:r,type:a="text",warningText:l,required:p,disabled:N,readOnly:M,placeholder:w,"aria-label":H,"aria-describedby":D,onBlur:E,...S}){let{control:$}=K();return d(g,{name:e,control:$,render:({field:s,fieldState:{error:c}})=>h(x,{children:[o&&h(b,{children:[o,p&&d("span",{className:"text-destructive ml-1",children:"*"})]}),d(R,{children:d(C,{...s,type:a,value:a==="number"&&s.value===0?"":s.value,onChange:F=>{a==="number"?s.onChange(Number(F.target.value)):s.onChange(F.target.value)},onBlur:F=>{a!=="number"&&typeof s.value=="string"&&s.onChange(s.value.trim()),s.onBlur(),E?.(F)},className:m(c&&"border-destructive focus-visible:ring-destructive",r),disabled:N,readOnly:M,required:p,placeholder:w,"aria-label":H,"aria-describedby":D,"aria-invalid":!!c,"aria-required":p,...S})}),t&&d(P,{children:t}),c&&d(y,{children:c.message}),!c&&l&&d("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:l})]})})}export{Ce as RHFTextField};
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/rhf/rhf-text-field/rhf-text-field.tsx","../../src/components/atoms/input/input.tsx","../../src/utils/cn.ts","../../src/components/rhf/form/form.tsx","../../src/components/atoms/label/label.tsx"],"sourcesContent":["\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport { useFormContext, type FieldValues, type FieldPath } from \"react-hook-form\"\nimport { Input } from \"@/components/atoms/input\"\nimport { cn } from \"@/utils/cn\"\nimport {\n FormControl,\n FormItem,\n FormMessage,\n FormLabel,\n FormDescription,\n FormField\n} from \"@/components/rhf/form\"\nimport { type RHFTextFieldProps } from \"./rhf-text-field.types\"\n\n// ----------------------------------------------------------------------\n\n/**\n * A text field component that integrates with React Hook Form.\n * Provides form validation, error handling, and accessibility features.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhftextfield--docs\n *\n * * @example\n * ```tsx\n * <Form>\n * <RHFTextField name=\"name\" label=\"Name\" />\n * <RHFTextField name=\"email\" label=\"Email\" />\n * </Form>\n * ```\n */\nexport function RHFTextField<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n name,\n label,\n description,\n className,\n type = \"text\",\n warningText,\n required,\n disabled,\n readOnly,\n placeholder,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedby,\n onBlur,\n ...other\n}: RHFTextFieldProps<TFieldValues, TName>) {\n const { control } = useFormContext<TFieldValues>()\n\n return (\n <FormField\n name={name}\n control={control}\n render={({ field, fieldState: { error } }) => (\n <FormItem>\n {label && (\n <FormLabel>\n {label}\n {required && <span className=\"text-destructive ml-1\">*</span>}\n </FormLabel>\n )}\n <FormControl>\n <Input\n {...field}\n type={type}\n value={type === \"number\" && field.value === 0 ? \"\" : field.value}\n onChange={(e) => {\n if (type === \"number\") {\n field.onChange(Number(e.target.value))\n } else {\n field.onChange(e.target.value)\n }\n }}\n onBlur={(e) => {\n // trim if a string\n if (type !== \"number\" && typeof field.value === \"string\") {\n field.onChange(field.value.trim())\n }\n field.onBlur() // pass to react-hook-form\n onBlur?.(e) // pass to wrapper\n }}\n className={cn(\n error && \"border-destructive focus-visible:ring-destructive\",\n className\n )}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n placeholder={placeholder}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-invalid={!!error}\n aria-required={required}\n {...other}\n />\n </FormControl>\n {description && <FormDescription>{description}</FormDescription>}\n {error && <FormMessage>{error.message}</FormMessage>}\n {!error && warningText && (\n <p className=\"text-sm text-yellow-600 dark:text-yellow-500\" role=\"alert\">\n {warningText}\n </p>\n )}\n </FormItem>\n )}\n />\n )\n}\n","import * as React from \"react\"\n\nimport { cn } from \"@/utils/cn\"\n\n/**\n * Input component for creating accessible input fields.\n * Built on top of shadcn/ui's Input component.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-input--docs\n *\n */\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n ({ className, type, ...props }, ref) => {\n return (\n <input\n type={type}\n className={cn(\n \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n className\n )}\n ref={ref}\n {...props}\n />\n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","\"use client\";\n\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n FormProvider,\n useFormContext,\n type ControllerProps,\n type FieldPath,\n type FieldValues\n} from \"react-hook-form\"\n\nimport { cn } from \"@/utils/cn\"\nimport { Label } from \"@/components/atoms/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState, formState } = useFormContext()\n\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n </FormItemContext.Provider>\n )\n }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n ref={ref}\n className={cn(error && \"text-destructive\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n React.ElementRef<typeof Slot>,\n React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n aria-invalid={!!error}\n {...props}\n />\n )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn(\"text-sm font-medium text-destructive\", className)}\n {...props}\n >\n {body}\n </p>\n )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils/index\"\n\nconst labelVariants = cva(\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n VariantProps<typeof labelVariants> {}\n\n/**\n * Label component for creating accessible labels.\n * Built on top of Radix UI's Label primitive.\n *\n * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs\n *\n */\nconst Label = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n ({ className, ...props }, ref) => (\n <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n )\n)\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":"aAIA,OAAS,kBAAAA,MAAwD,kBCJjE,UAAYC,MAAW,QCAvB,OAA0B,QAAAC,MAAY,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CDSM,cAAAC,MAAA,oBAHN,IAAMC,EAAc,aAClB,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAE5BL,EAAC,SACC,KAAMG,EACN,UAAWG,EACT,0WACAJ,CACF,EACA,IAAKG,EACJ,GAAGD,EACN,CAGN,EACAH,EAAM,YAAc,QEvBpB,UAAYM,MAAW,QAEvB,OAAS,QAAAC,MAAY,uBACrB,OACE,cAAAC,EACA,gBAAAC,GACA,kBAAAC,MAIK,kBCbP,UAAYC,MAAW,QACvB,UAAYC,MAAoB,wBAChC,OAAS,OAAAC,MAA8B,2BAqBnC,cAAAC,MAAA,oBAjBJ,IAAMC,EAAgBC,EACpB,4FACF,EAaMC,EAAc,aAClB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACxBN,EAAgB,OAAf,CAAoB,IAAKM,EAAK,UAAWC,EAAGN,EAAc,EAAGG,CAAS,EAAI,GAAGC,EAAO,CAEzF,EACAF,EAAM,YAA6B,OAAK,YDWlC,cAAAK,MAAA,oBAVN,IAAMC,EAAyB,gBAAqC,CAAC,CAA0B,EAEzFC,EAAY,CAGhB,CACA,GAAGC,CACL,IAEIC,EAACH,EAAiB,SAAjB,CAA0B,MAAO,CAAE,KAAME,EAAM,IAAK,EACnD,SAAAC,EAACC,EAAA,CAAY,GAAGF,EAAO,EACzB,EAIEG,EAAe,IAAM,CACzB,IAAMC,EAAqB,aAAWN,CAAgB,EAChDO,EAAoB,aAAWC,CAAe,EAC9C,CAAE,cAAAC,EAAe,UAAAC,CAAU,EAAIC,EAAe,EAE9CC,EAAaH,EAAcH,EAAa,KAAMI,CAAS,EAE7D,GAAI,CAACJ,EACH,MAAM,IAAI,MAAM,gDAAgD,EAGlE,GAAM,CAAE,GAAAO,CAAG,EAAIN,EAEf,MAAO,CACL,GAAAM,EACA,KAAMP,EAAa,KACnB,WAAY,GAAGO,CAAE,aACjB,kBAAmB,GAAGA,CAAE,yBACxB,cAAe,GAAGA,CAAE,qBACpB,GAAGD,CACL,CACF,EAMMJ,EAAwB,gBAAoC,CAAC,CAAyB,EAEtFM,EAAiB,aACrB,CAAC,CAAE,UAAAC,EAAW,GAAGb,CAAM,EAAGc,IAAQ,CAChC,IAAMH,EAAW,QAAM,EAEvB,OACEV,EAACK,EAAgB,SAAhB,CAAyB,MAAO,CAAE,GAAAK,CAAG,EACpC,SAAAV,EAAC,OAAI,IAAKa,EAAK,UAAWC,EAAG,YAAaF,CAAS,EAAI,GAAGb,EAAO,EACnE,CAEJ,CACF,EACAY,EAAS,YAAc,WAEvB,IAAMI,EAAkB,aAGtB,CAAC,CAAE,UAAAH,EAAW,GAAGb,CAAM,EAAGc,IAAQ,CAClC,GAAM,CAAE,MAAAG,EAAO,WAAAC,CAAW,EAAIf,EAAa,EAE3C,OACEF,EAACkB,EAAA,CACC,IAAKL,EACL,UAAWC,EAAGE,GAAS,mBAAoBJ,CAAS,EACpD,QAASK,EACR,GAAGlB,EACN,CAEJ,CAAC,EACDgB,EAAU,YAAc,YAExB,IAAMI,EAAoB,aAGxB,CAAC,CAAE,GAAGpB,CAAM,EAAGc,IAAQ,CACvB,GAAM,CAAE,MAAAG,EAAO,WAAAC,EAAY,kBAAAG,EAAmB,cAAAC,CAAc,EAAInB,EAAa,EAE7E,OACEF,EAACsB,EAAA,CACC,IAAKT,EACL,GAAII,EACJ,mBAAmBD,EAAiC,GAAGI,CAAiB,IAAIC,CAAa,GAA9D,GAAGD,CAAiB,GAC/C,eAAc,CAAC,CAACJ,EACf,GAAGjB,EACN,CAEJ,CAAC,EACDoB,EAAY,YAAc,cAE1B,IAAMI,EAAwB,aAG5B,CAAC,CAAE,UAAAX,EAAW,GAAGb,CAAM,EAAGc,IAAQ,CAClC,GAAM,CAAE,kBAAAO,CAAkB,EAAIlB,EAAa,EAE3C,OACEF,EAAC,KACC,IAAKa,EACL,GAAIO,EACJ,UAAWN,EAAG,gCAAiCF,CAAS,EACvD,GAAGb,EACN,CAEJ,CAAC,EACDwB,EAAgB,YAAc,kBAE9B,IAAMC,EAAoB,aAGxB,CAAC,CAAE,UAAAZ,EAAW,SAAAa,EAAU,GAAG1B,CAAM,EAAGc,IAAQ,CAC5C,GAAM,CAAE,MAAAG,EAAO,cAAAK,CAAc,EAAInB,EAAa,EACxCwB,EAAOV,EAAQ,OAAOA,GAAO,SAAW,EAAE,EAAIS,EAEpD,OAAKC,EAKH1B,EAAC,KACC,IAAKa,EACL,GAAIQ,EACJ,UAAWP,EAAG,uCAAwCF,CAAS,EAC9D,GAAGb,EAEH,SAAA2B,EACH,EAXO,IAaX,CAAC,EACDF,EAAY,YAAc,cHjGd,OAEe,OAAAG,EAFf,QAAAC,MAAA,oBA5BL,SAASC,GAGd,CACA,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,YAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAcC,EACd,mBAAoBC,EACpB,OAAAC,EACA,GAAGC,CACL,EAA2C,CACzC,GAAM,CAAE,QAAAC,CAAQ,EAAIC,EAA6B,EAEjD,OACElB,EAACmB,EAAA,CACC,KAAMhB,EACN,QAASc,EACT,OAAQ,CAAC,CAAE,MAAAG,EAAO,WAAY,CAAE,MAAAC,CAAM,CAAE,IACtCpB,EAACqB,EAAA,CACE,UAAAlB,GACCH,EAACsB,EAAA,CACE,UAAAnB,EACAK,GAAYT,EAAC,QAAK,UAAU,wBAAwB,aAAC,GACxD,EAEFA,EAACwB,EAAA,CACC,SAAAxB,EAACyB,EAAA,CACE,GAAGL,EACJ,KAAMb,EACN,MAAOA,IAAS,UAAYa,EAAM,QAAU,EAAI,GAAKA,EAAM,MAC3D,SAAWM,GAAM,CACXnB,IAAS,SACXa,EAAM,SAAS,OAAOM,EAAE,OAAO,KAAK,CAAC,EAErCN,EAAM,SAASM,EAAE,OAAO,KAAK,CAEjC,EACA,OAASA,GAAM,CAETnB,IAAS,UAAY,OAAOa,EAAM,OAAU,UAC9CA,EAAM,SAASA,EAAM,MAAM,KAAK,CAAC,EAEnCA,EAAM,OAAO,EACbL,IAASW,CAAC,CACZ,EACA,UAAWC,EACTN,GAAS,oDACTf,CACF,EACA,SAAUI,EACV,SAAUC,EACV,SAAUF,EACV,YAAaG,EACb,aAAYC,EACZ,mBAAkBC,EAClB,eAAc,CAAC,CAACO,EAChB,gBAAeZ,EACd,GAAGO,EACN,EACF,EACCX,GAAeL,EAAC4B,EAAA,CAAiB,SAAAvB,EAAY,EAC7CgB,GAASrB,EAAC6B,EAAA,CAAa,SAAAR,EAAM,QAAQ,EACrC,CAACA,GAASb,GACTR,EAAC,KAAE,UAAU,+CAA+C,KAAK,QAC9D,SAAAQ,EACH,GAEJ,EAEJ,CAEJ","names":["useFormContext","React","clsx","twMerge","cn","inputs","jsx","Input","className","type","props","ref","cn","React","Slot","Controller","FormProvider","useFormContext","React","LabelPrimitive","cva","jsx","labelVariants","cva","Label","className","props","ref","cn","jsx","FormFieldContext","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body","jsx","jsxs","RHFTextField","name","label","description","className","type","warningText","required","disabled","readOnly","placeholder","ariaLabel","ariaDescribedby","onBlur","other","control","useFormContext","FormField","field","error","FormItem","FormLabel","FormControl","Input","e","cn","FormDescription","FormMessage"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
"use client";import{useFormContext as K}from"react-hook-form";import*as c from"react";import{clsx as A}from"clsx";import{twMerge as W}from"tailwind-merge";function m(...e){return W(A(e))}import{jsx as B}from"react/jsx-runtime";var v=c.forwardRef(({className:e,autoResize:t=!1,...r},a)=>{let s=c.useRef(null);return c.useEffect(()=>{if(!t||!s.current)return;let o=s.current,l=()=>{o.style.height="auto",o.style.height=`${o.scrollHeight}px`};return o.addEventListener("input",l),l(),()=>o.removeEventListener("input",l)},[t]),B("textarea",{className:m("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:a,...r})});v.displayName="Textarea";import*as i from"react";import{Slot as q}from"@radix-ui/react-slot";import{Controller as G,FormProvider as ne,useFormContext as J}from"react-hook-form";import*as V from"react";import*as C from"@radix-ui/react-label";import{cva as k}from"class-variance-authority";import{jsx as O}from"react/jsx-runtime";var z=k("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),f=V.forwardRef(({className:e,...t},r)=>O(C.Root,{ref:r,className:m(z(),e),...t}));f.displayName=C.Root.displayName;import{jsx as n}from"react/jsx-runtime";var L=i.createContext({}),g=({...e})=>n(L.Provider,{value:{name:e.name},children:n(G,{...e})}),F=()=>{let e=i.useContext(L),t=i.useContext(h),{getFieldState:r,formState:a}=J(),s=r(e.name,a);if(!e)throw new Error("useFormField should be used within <FormField>");let{id:o}=t;return{id:o,name:e.name,formItemId:`${o}-form-item`,formDescriptionId:`${o}-form-item-description`,formMessageId:`${o}-form-item-message`,...s}},h=i.createContext({}),x=i.forwardRef(({className:e,...t},r)=>{let a=i.useId();return n(h.Provider,{value:{id:a},children:n("div",{ref:r,className:m("space-y-2",e),...t})})});x.displayName="FormItem";var R=i.forwardRef(({className:e,...t},r)=>{let{error:a,formItemId:s}=F();return n(f,{ref:r,className:m(a&&"text-destructive",e),htmlFor:s,...t})});R.displayName="FormLabel";var b=i.forwardRef(({...e},t)=>{let{error:r,formItemId:a,formDescriptionId:s,formMessageId:o}=F();return n(q,{ref:t,id:a,"aria-describedby":r?`${s} ${o}`:`${s}`,"aria-invalid":!!r,...e})});b.displayName="FormControl";var P=i.forwardRef(({className:e,...t},r)=>{let{formDescriptionId:a}=F();return n("p",{ref:r,id:a,className:m("text-sm text-muted-foreground",e),...t})});P.displayName="FormDescription";var y=i.forwardRef(({className:e,children:t,...r},a)=>{let{error:s,formMessageId:o}=F(),l=s?String(s?.message??""):t;return l?n("p",{ref:a,id:o,className:m("text-sm font-medium text-destructive",e),...r,children:l}):null});y.displayName="FormMessage";import{jsx as p,jsxs as I}from"react/jsx-runtime";function Te({name:e,label:t,description:r,className:a,warningText:s,required:o,disabled:l,readOnly:N,placeholder:M,autoResize:w,"aria-label":E,"aria-describedby":H,onBlur:D,...S}){let{control:$}=K();return p(g,{name:e,control:$,render:({field:d,fieldState:{error:u}})=>I(x,{children:[t&&I(R,{children:[t,o&&p("span",{className:"text-destructive ml-1",children:"*"})]}),p(b,{children:p(v,{...d,value:d.value,onChange:T=>{d.onChange(T.target.value)},onBlur:T=>{typeof d.value=="string"&&d.onChange(d.value.trim()),d.onBlur(),D?.(T)},className:m(u&&"border-destructive focus-visible:ring-destructive",a),disabled:l,readOnly:N,required:o,placeholder:M,"aria-label":E,"aria-describedby":H,"aria-invalid":!!u,"aria-required":o,autoResize:w,...S})}),r&&p(P,{children:r}),u&&p(y,{children:u.message}),!u&&s&&p("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:s})]})})}export{Te as RHFTextarea};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|