@arolariu/components 0.2.0 → 0.3.1

package/dist/components/ui/empty.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utilities.js";
+import { cva } from "class-variance-authority";
+import "react";
+function Empty({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty",
+        className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12", className),
+        ...props
+    });
+}
+function EmptyHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-header",
+        className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
+        ...props
+    });
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "bg-neutral-100 text-neutral-950 flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6 dark:bg-neutral-800 dark:text-neutral-50"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-icon",
+        "data-variant": variant,
+        className: cn(emptyMediaVariants({
+            variant,
+            className
+        })),
+        ...props
+    });
+}
+function EmptyTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-title",
+        className: cn("text-lg font-medium tracking-tight", className),
+        ...props
+    });
+}
+function EmptyDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-description",
+        className: cn("text-sm/relaxed text-neutral-500 dark:text-neutral-400 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50", className),
+        ...props
+    });
+}
+function EmptyContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-content",
+        className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
+        ...props
+    });
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+
+//# sourceMappingURL=empty.js.map

package/dist/components/ui/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components\\ui\\empty.js","sources":["webpack://@arolariu/components/./src/components/ui/empty.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nfunction Empty({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='empty'\r\n      className={cn(\r\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction EmptyHeader({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='empty-header'\r\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst emptyMediaVariants = cva(\"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\", {\r\n  variants: {\r\n    variant: {\r\n      default: \"bg-transparent\",\r\n      icon: \"bg-neutral-100 text-neutral-950 flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6 dark:bg-neutral-800 dark:text-neutral-50\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\nfunction EmptyMedia({className, variant = \"default\", ...props}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\r\n  return (\r\n    <div\r\n      data-slot='empty-icon'\r\n      data-variant={variant}\r\n      className={cn(emptyMediaVariants({variant, className}))}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction EmptyTitle({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='empty-title'\r\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction EmptyDescription({className, ...props}: React.ComponentProps<\"p\">) {\r\n  return (\r\n    <div\r\n      data-slot='empty-description'\r\n      className={cn(\r\n        \"text-sm/relaxed text-neutral-500 dark:text-neutral-400 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction EmptyContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='empty-content'\r\n      className={cn(\"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle};\r\n"],"names":["Empty","className","props","cn","EmptyHeader","emptyMediaVariants","cva","EmptyMedia","variant","EmptyTitle","EmptyDescription","EmptyContent"],"mappings":";;;;;AAMA,SAASA,MAAM,EAACC,SAAS,EAAE,GAAGC,OAAmC;IAC/D,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GACT,gIACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASE,YAAY,EAACH,SAAS,EAAE,GAAGC,OAAmC;IACrE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,yDAAyDF;QACtE,GAAGC,KAAK;;AAGf;AAEA,MAAMG,qBAAqBC,IAAI,+FAA+F;IAC5H,UAAU;QACR,SAAS;YACP,SAAS;YACT,MAAM;QACR;IACF;IACA,iBAAiB;QACf,SAAS;IACX;AACF;AAEA,SAASC,WAAW,EAACN,SAAS,EAAEO,UAAU,SAAS,EAAE,GAAGN,OAA6E;IACnI,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAcM;QACd,WAAWL,GAAGE,mBAAmB;YAACG;YAASP;QAAS;QACnD,GAAGC,KAAK;;AAGf;AAEA,SAASO,WAAW,EAACR,SAAS,EAAE,GAAGC,OAAmC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,sCAAsCF;QACnD,GAAGC,KAAK;;AAGf;AAEA,SAASQ,iBAAiB,EAACT,SAAS,EAAE,GAAGC,OAAiC;IACxE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GACT,iKACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASS,aAAa,EAACV,SAAS,EAAE,GAAGC,OAAmC;IACtE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,iFAAiFF;QAC9F,GAAGC,KAAK;;AAGf"}

package/dist/components/ui/field.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Label } from "./label";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const fieldVariants: (props?: {
+    orientation?: "horizontal" | "vertical" | "responsive";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element;
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+//# sourceMappingURL=field.d.ts.map

package/dist/components/ui/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAI5C,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,OAAkB,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAC,2CAS9H;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,QAAA,MAAM,aAAa;;iEAmBjB,CAAC;AAEH,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAU/H;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAa5E;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,iBAAS,gBAAgB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAazE;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAiBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,SAAS,CAAC,CAAC;CAChD,2CAmCA;AAED,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAC,CAAC"}

package/dist/components/ui/field.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useMemo } from "react";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
+import { cn } from "../../lib/utilities.js";
+function FieldSet({ className, ...props }) {
+    return /*#__PURE__*/ jsx("fieldset", {
+        "data-slot": "field-set",
+        className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+        ...props
+    });
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return /*#__PURE__*/ jsx("legend", {
+        "data-slot": "field-legend",
+        "data-variant": variant,
+        className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+        ...props
+    });
+}
+function FieldGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "field-group",
+        className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+        ...props
+    });
+}
+const fieldVariants = cva("group/field data-[invalid=true]:text-red-500 flex w-full gap-3 dark:data-[invalid=true]:text-red-900", {
+    variants: {
+        orientation: {
+            vertical: [
+                "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
+            ],
+            horizontal: [
+                "flex-row items-center",
+                "[&>[data-slot=field-label]]:flex-auto",
+                "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
+            ],
+            responsive: [
+                "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+                "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+                "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+            ]
+        }
+    },
+    defaultVariants: {
+        orientation: "vertical"
+    }
+});
+function Field({ className, orientation = "vertical", ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        role: "group",
+        "data-slot": "field",
+        "data-orientation": orientation,
+        className: cn(fieldVariants({
+            orientation
+        }), className),
+        ...props
+    });
+}
+function FieldContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "field-content",
+        className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+        ...props
+    });
+}
+function FieldLabel({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Label, {
+        "data-slot": "field-label",
+        className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:border-neutral-900 has-data-[state=checked]:bg-neutral-900/5 dark:has-data-[state=checked]:border-neutral-50 dark:dark:has-data-[state=checked]:bg-neutral-50/10 dark:has-data-[state=checked]:bg-neutral-50/5 dark:has-data-[state=checked]:bg-neutral-900/10", className),
+        ...props
+    });
+}
+function FieldTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "field-label",
+        className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+        ...props
+    });
+}
+function FieldDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx("p", {
+        "data-slot": "field-description",
+        className: cn("text-sm leading-normal font-normal text-neutral-500 group-has-[[data-orientation=horizontal]]/field:text-balance dark:text-neutral-400", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50", className),
+        ...props
+    });
+}
+function FieldSeparator({ children, className, ...props }) {
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "field-separator",
+        "data-content": Boolean(children) || void 0,
+        className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Separator, {
+                className: "absolute inset-0 top-1/2"
+            }),
+            children && /*#__PURE__*/ jsx("span", {
+                className: "relative mx-auto block w-fit bg-white px-2 text-neutral-500 dark:bg-neutral-950 dark:text-neutral-400",
+                "data-slot": "field-separator-content",
+                children: children
+            })
+        ]
+    });
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = useMemo(()=>{
+        if (children) return children;
+        if (!errors) return null;
+        if (errors?.length === 1 && errors[0]?.message) return errors[0].message;
+        return /*#__PURE__*/ jsx("ul", {
+            className: "ml-4 flex list-disc flex-col gap-1",
+            children: errors.map((error, index)=>error?.message && /*#__PURE__*/ jsx("li", {
+                    children: error.message
+                }, index))
+        });
+    }, [
+        children,
+        errors
+    ]);
+    if (!content) return null;
+    return /*#__PURE__*/ jsx("div", {
+        role: "alert",
+        "data-slot": "field-error",
+        className: cn("text-sm font-normal text-red-500 dark:text-red-900", className),
+        ...props,
+        children: content
+    });
+}
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+
+//# sourceMappingURL=field.js.map

package/dist/components/ui/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components\\ui\\field.js","sources":["webpack://@arolariu/components/./src/components/ui/field.tsx"],"sourcesContent":["\r\n\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {Label} from \"@/components/ui/label\";\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction FieldSet({className, ...props}: React.ComponentProps<\"fieldset\">) {\r\n  return (\r\n    <fieldset\r\n      data-slot='field-set'\r\n      className={cn(\"flex flex-col gap-6\", \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldLegend({className, variant = \"legend\", ...props}: React.ComponentProps<\"legend\"> & {variant?: \"legend\" | \"label\"}) {\r\n  return (\r\n    <legend\r\n      data-slot='field-legend'\r\n      data-variant={variant}\r\n      className={cn(\"mb-3 font-medium\", \"data-[variant=legend]:text-base\", \"data-[variant=label]:text-sm\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='field-group'\r\n      className={cn(\r\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst fieldVariants = cva(\"group/field data-[invalid=true]:text-red-500 flex w-full gap-3 dark:data-[invalid=true]:text-red-900\", {\r\n  variants: {\r\n    orientation: {\r\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\r\n      horizontal: [\r\n        \"flex-row items-center\",\r\n        \"[&>[data-slot=field-label]]:flex-auto\",\r\n        \"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start\",\r\n      ],\r\n      responsive: [\r\n        \"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\r\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\r\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\r\n      ],\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    orientation: \"vertical\",\r\n  },\r\n});\r\n\r\nfunction Field({className, orientation = \"vertical\", ...props}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\r\n  return (\r\n    <div\r\n      role='group'\r\n      data-slot='field'\r\n      data-orientation={orientation}\r\n      className={cn(fieldVariants({orientation}), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='field-content'\r\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldLabel({className, ...props}: React.ComponentProps<typeof Label>) {\r\n  return (\r\n    <Label\r\n      data-slot='field-label'\r\n      className={cn(\r\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\r\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4\",\r\n        \"has-data-[state=checked]:border-neutral-900 has-data-[state=checked]:bg-neutral-900/5 dark:has-data-[state=checked]:border-neutral-50 dark:dark:has-data-[state=checked]:bg-neutral-50/10 dark:has-data-[state=checked]:bg-neutral-50/5 dark:has-data-[state=checked]:bg-neutral-900/10\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldTitle({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='field-label'\r\n      className={cn(\r\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldDescription({className, ...props}: React.ComponentProps<\"p\">) {\r\n  return (\r\n    <p\r\n      data-slot='field-description'\r\n      className={cn(\r\n        \"text-sm leading-normal font-normal text-neutral-500 group-has-[[data-orientation=horizontal]]/field:text-balance dark:text-neutral-400\",\r\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\r\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldSeparator({\r\n  children,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  children?: React.ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      data-slot='field-separator'\r\n      data-content={Boolean(children) || undefined}\r\n      className={cn(\"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\", className)}\r\n      {...props}>\r\n      <Separator className='absolute inset-0 top-1/2' />\r\n      {children && (\r\n        <span\r\n          className='relative mx-auto block w-fit bg-white px-2 text-neutral-500 dark:bg-neutral-950 dark:text-neutral-400'\r\n          data-slot='field-separator-content'>\r\n          {children}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction FieldError({\r\n  className,\r\n  children,\r\n  errors,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  errors?: Array<{message?: string} | undefined>;\r\n}) {\r\n  // eslint-disable-next-line sonarjs/function-return-type -- expected different return type.\r\n  const content = React.useMemo(() => {\r\n    if (children) {\r\n      return children;\r\n    }\r\n\r\n    if (!errors) {\r\n      return null;\r\n    }\r\n\r\n    if (errors?.length === 1 && errors[0]?.message) {\r\n      return errors[0].message;\r\n    }\r\n\r\n    return (\r\n      <ul className='ml-4 flex list-disc flex-col gap-1'>\r\n        {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\r\n      </ul>\r\n    );\r\n  }, [children, errors]);\r\n\r\n  if (!content) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      role='alert'\r\n      data-slot='field-error'\r\n      className={cn(\"text-sm font-normal text-red-500 dark:text-red-900\", className)}\r\n      {...props}>\r\n      {content}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport {Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle};\r\n"],"names":["FieldSet","className","props","cn","FieldLegend","variant","FieldGroup","fieldVariants","cva","Field","orientation","FieldContent","FieldLabel","Label","FieldTitle","FieldDescription","FieldSeparator","children","Boolean","undefined","Separator","FieldError","errors","content","React","error","index"],"mappings":"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"}

package/dist/components/ui/form.d.ts

@@ -1,5 +1,4 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
@@ -16,10 +15,10 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
 };
-declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
-declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
-declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
 //# sourceMappingURL=form.d.ts.map

package/dist/components/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAC,IAAI,EAAC,MAAM,sBAAsB,CAAC;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,4MAAe,CAAC;AAW1B,QAAA,MAAM,SAAS,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,cAEjI,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAQF,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYnE;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAYzF;AAED,iBAAS,WAAW,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAYjE;AAED,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAWxE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAiBpE;AAED,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAC,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2C,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAKjI,QAAA,MAAM,IAAI,4MAAe,CAAC;AAW1B,QAAA,MAAM,SAAS,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,cAEjI,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAQF,QAAA,MAAM,QAAQ,6GAYZ,CAAC;AAGH,QAAA,MAAM,SAAS,yJAcb,CAAC;AAGH,QAAA,MAAM,WAAW,8JAYf,CAAC;AAGH,QAAA,MAAM,eAAe,yHAWnB,CAAC;AAGH,QAAA,MAAM,WAAW,yHAmBhB,CAAC;AAGF,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAC,CAAC"}

package/dist/components/ui/form.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-import { createContext, useContext, useId } from "react";
-import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+import { createContext, forwardRef, useContext, useId } from "react";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
 import { Label } from "./label.js";
 import { cn } from "../../lib/utilities.js";
 const Form = FormProvider;
@@ -18,10 +18,7 @@ const FormField = ({ ...props })=>/*#__PURE__*/ jsx(FormFieldContext.Provider, {
 const useFormField = ()=>{
     const fieldContext = useContext(FormFieldContext);
     const itemContext = useContext(FormItemContext);
-    const { getFieldState } = useFormContext();
-    const formState = useFormState({
-        name: fieldContext.name
-    });
+    const { getFieldState, formState } = useFormContext();
     const fieldState = getFieldState(fieldContext.name, formState);
     if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
     const { id } = itemContext;
@@ -35,60 +32,64 @@ const useFormField = ()=>{
     };
 };
 const FormItemContext = /*#__PURE__*/ createContext({});
-function FormItem({ className, ...props }) {
+const FormItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     const id = useId();
     return /*#__PURE__*/ jsx(FormItemContext.Provider, {
         value: {
             id
         },
         children: /*#__PURE__*/ jsx("div", {
-            "data-slot": "form-item",
-            className: cn("grid gap-2", className),
+            ref: ref,
+            className: cn("space-y-2", className),
             ...props
         })
     });
-}
-function FormLabel({ className, ...props }) {
+});
+FormItem.displayName = "FormItem";
+const FormLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     const { error, formItemId } = useFormField();
     return /*#__PURE__*/ jsx(Label, {
-        "data-slot": "form-label",
-        "data-error": !!error,
-        className: cn("data-[error=true]:text-red-500 dark:data-[error=true]:text-red-900", className),
+        ref: ref,
+        className: cn(error && "text-red-500 dark:text-red-900", className),
         htmlFor: formItemId,
         ...props
     });
-}
-function FormControl({ ...props }) {
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = /*#__PURE__*/ forwardRef(({ ...props }, ref)=>{
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
     return /*#__PURE__*/ jsx(Slot, {
-        "data-slot": "form-control",
+        ref: ref,
         id: formItemId,
         "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
-        "aria-invalid": !!error,
+        "aria-invalid": Boolean(error),
         ...props
     });
-}
-function FormDescription({ className, ...props }) {
+});
+FormControl.displayName = "FormControl";
+const FormDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     const { formDescriptionId } = useFormField();
     return /*#__PURE__*/ jsx("p", {
-        "data-slot": "form-description",
+        ref: ref,
         id: formDescriptionId,
-        className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
+        className: cn("text-[0.8rem] text-neutral-500 dark:text-neutral-400", className),
         ...props
     });
-}
-function FormMessage({ className, ...props }) {
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
     const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message ?? "") : props.children;
+    const body = error ? String(error?.message ?? "") : children;
     if (!body) return null;
     return /*#__PURE__*/ jsx("p", {
-        "data-slot": "form-message",
+        ref: ref,
         id: formMessageId,
-        className: cn("text-sm text-red-500 dark:text-red-900", className),
+        className: cn("text-[0.8rem] font-medium text-red-500 dark:text-red-900", className),
         ...props,
         children: body
     });
-}
+});
+FormMessage.displayName = "FormMessage";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
 
 //# sourceMappingURL=form.js.map

package/dist/components/ui/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\form.js","sources":["webpack://@arolariu/components/./src/components/ui/form.tsx"],"sourcesContent":["\r\n\r\n/* eslint-disable */\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport * as React from \"react\";\r\nimport {\r\n  Controller,\r\n  FormProvider,\r\n  useFormContext,\r\n  useFormState,\r\n  type ControllerProps,\r\n  type FieldPath,\r\n  type FieldValues,\r\n} from \"react-hook-form\";\r\n\r\nimport {Label} from \"@/components/ui/label\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst Form = FormProvider;\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n  name: TName;\r\n};\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\r\n\r\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\r\n  ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{name: props.name}}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  );\r\n};\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext);\r\n  const itemContext = React.useContext(FormItemContext);\r\n  const {getFieldState} = useFormContext();\r\n  const formState = useFormState({name: fieldContext.name});\r\n  const fieldState = getFieldState(fieldContext.name, formState);\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\");\r\n  }\r\n\r\n  const {id} = itemContext;\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  };\r\n};\r\n\r\ntype FormItemContextValue = {\r\n  id: string;\r\n};\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\r\n\r\nfunction FormItem({className, ...props}: React.ComponentProps<\"div\">) {\r\n  const id = React.useId();\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{id}}>\r\n      <div\r\n        data-slot='form-item'\r\n        className={cn(\"grid gap-2\", className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  );\r\n}\r\n\r\nfunction FormLabel({className, ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n  const {error, formItemId} = useFormField();\r\n\r\n  return (\r\n    <Label\r\n      data-slot='form-label'\r\n      data-error={!!error}\r\n      className={cn(\"data-[error=true]:text-red-500 dark:data-[error=true]:text-red-900\", className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FormControl({...props}: React.ComponentProps<typeof Slot>) {\r\n  const {error, formItemId, formDescriptionId, formMessageId} = useFormField();\r\n\r\n  return (\r\n    <Slot\r\n      data-slot='form-control'\r\n      id={formItemId}\r\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\r\n      aria-invalid={!!error}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FormDescription({className, ...props}: React.ComponentProps<\"p\">) {\r\n  const {formDescriptionId} = useFormField();\r\n\r\n  return (\r\n    <p\r\n      data-slot='form-description'\r\n      id={formDescriptionId}\r\n      className={cn(\"text-sm text-neutral-500 dark:text-neutral-400\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FormMessage({className, ...props}: React.ComponentProps<\"p\">) {\r\n  const {error, formMessageId} = useFormField();\r\n  const body = error ? String(error?.message ?? \"\") : props.children;\r\n\r\n  if (!body) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <p\r\n      data-slot='form-message'\r\n      id={formMessageId}\r\n      className={cn(\"text-sm text-red-500 dark:text-red-900\", className)}\r\n      {...props}>\r\n      {body}\r\n    </p>\r\n  );\r\n}\r\n\r\nexport {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField};\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","Error","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body","String"],"mappings":";;;;;;;AAoBA,MAAMA,OAAOC;AASb,MAAMC,mBAAmB,WAAnBA,GAAmBC,cAA2C,CAAC;AAErE,MAAMC,YAAY,CAAkH,EAClI,GAAGC,OACkC,GAC9B,WAAP,GACE,IAACH,iBAAiB,QAAQ;QAAC,OAAO;YAAC,MAAMG,MAAM,IAAI;QAAA;kBACjD,kBAACC,YAAUA;YAAE,GAAGD,KAAK;;;AAK3B,MAAME,eAAe;IACnB,MAAMC,eAAeL,WAAiBD;IACtC,MAAMO,cAAcN,WAAiBO;IACrC,MAAM,EAACC,aAAa,EAAC,GAAGC;IACxB,MAAMC,YAAYC,aAAa;QAAC,MAAMN,aAAa,IAAI;IAAA;IACvD,MAAMO,aAAaJ,cAAcH,aAAa,IAAI,EAAEK;IAEpD,IAAI,CAACL,cACH,MAAM,IAAIQ,MAAM;IAGlB,MAAM,EAACC,EAAE,EAAC,GAAGR;IAEb,OAAO;QACLQ;QACA,MAAMT,aAAa,IAAI;QACvB,YAAY,GAAGS,GAAG,UAAU,CAAC;QAC7B,mBAAmB,GAAGA,GAAG,sBAAsB,CAAC;QAChD,eAAe,GAAGA,GAAG,kBAAkB,CAAC;QACxC,GAAGF,UAAU;IACf;AACF;AAMA,MAAML,kBAAkB,WAAlBA,GAAkBP,cAA0C,CAAC;AAEnE,SAASe,SAAS,EAACC,SAAS,EAAE,GAAGd,OAAmC;IAClE,MAAMY,KAAKd;IAEX,OAAO,WAAP,GACE,IAACO,gBAAgB,QAAQ;QAAC,OAAO;YAACO;QAAE;kBAClC,kBAAC;YACC,aAAU;YACV,WAAWG,GAAG,cAAcD;YAC3B,GAAGd,KAAK;;;AAIjB;AAEA,SAASgB,UAAU,EAACF,SAAS,EAAE,GAAGd,OAAwD;IACxF,MAAM,EAACiB,KAAK,EAAEC,UAAU,EAAC,GAAGhB;IAE5B,OAAO,WAAP,GACE,IAACiB,OAAKA;QACJ,aAAU;QACV,cAAY,CAAC,CAACF;QACd,WAAWF,GAAG,sEAAsED;QACpF,SAASI;QACR,GAAGlB,KAAK;;AAGf;AAEA,SAASoB,YAAY,EAAC,GAAGpB,OAAyC;IAChE,MAAM,EAACiB,KAAK,EAAEC,UAAU,EAAEG,iBAAiB,EAAEC,aAAa,EAAC,GAAGpB;IAE9D,OAAO,WAAP,GACE,IAACqB,MAAIA;QACH,aAAU;QACV,IAAIL;QACJ,oBAAkB,QAAkC,GAAGG,kBAAkB,CAAC,EAAEC,eAAe,GAAhE,GAAGD,mBAAmB;QACjD,gBAAc,CAAC,CAACJ;QACf,GAAGjB,KAAK;;AAGf;AAEA,SAASwB,gBAAgB,EAACV,SAAS,EAAE,GAAGd,OAAiC;IACvE,MAAM,EAACqB,iBAAiB,EAAC,GAAGnB;IAE5B,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,IAAImB;QACJ,WAAWN,GAAG,kDAAkDD;QAC/D,GAAGd,KAAK;;AAGf;AAEA,SAASyB,YAAY,EAACX,SAAS,EAAE,GAAGd,OAAiC;IACnE,MAAM,EAACiB,KAAK,EAAEK,aAAa,EAAC,GAAGpB;IAC/B,MAAMwB,OAAOT,QAAQU,OAAOV,OAAO,WAAW,MAAMjB,MAAM,QAAQ;IAElE,IAAI,CAAC0B,MACH,OAAO;IAGT,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,IAAIJ;QACJ,WAAWP,GAAG,0CAA0CD;QACvD,GAAGd,KAAK;kBACR0B;;AAGP"}
+{"version":3,"file":"components\\ui\\form.js","sources":["webpack://@arolariu/components/./src/components/ui/form.tsx"],"sourcesContent":["\r\n\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport * as React from \"react\";\r\nimport {Controller, FormProvider, useFormContext, type ControllerProps, type FieldPath, type FieldValues} from \"react-hook-form\";\r\n\r\nimport {Label} from \"@/components/ui/label\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst Form = FormProvider;\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n  name: TName;\r\n};\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\r\n\r\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\r\n  ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{name: props.name}}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  );\r\n};\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext);\r\n  const itemContext = React.useContext(FormItemContext);\r\n  const {getFieldState, formState} = useFormContext();\r\n\r\n  const fieldState = getFieldState(fieldContext.name, formState);\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\");\r\n  }\r\n\r\n  const {id} = itemContext;\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  };\r\n};\r\n\r\ntype FormItemContextValue = {\r\n  id: string;\r\n};\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\r\n\r\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {\r\n  const id = React.useId();\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{id}}>\r\n      <div\r\n        ref={ref}\r\n        className={cn(\"space-y-2\", className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  );\r\n});\r\nFormItem.displayName = \"FormItem\";\r\n\r\nconst FormLabel = React.forwardRef<\r\n  React.ComponentRef<typeof LabelPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\r\n>(({className, ...props}, ref) => {\r\n  const {error, formItemId} = useFormField();\r\n\r\n  return (\r\n    <Label\r\n      ref={ref}\r\n      className={cn(error && \"text-red-500 dark:text-red-900\", className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormLabel.displayName = \"FormLabel\";\r\n\r\nconst FormControl = React.forwardRef<React.ComponentRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({...props}, ref) => {\r\n  const {error, formItemId, formDescriptionId, formMessageId} = useFormField();\r\n\r\n  return (\r\n    <Slot\r\n      ref={ref}\r\n      id={formItemId}\r\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`}\r\n      aria-invalid={Boolean(error)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormControl.displayName = \"FormControl\";\r\n\r\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({className, ...props}, ref) => {\r\n  const {formDescriptionId} = useFormField();\r\n\r\n  return (\r\n    <p\r\n      ref={ref}\r\n      id={formDescriptionId}\r\n      className={cn(\"text-[0.8rem] text-neutral-500 dark:text-neutral-400\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nFormDescription.displayName = \"FormDescription\";\r\n\r\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\r\n  ({className, children, ...props}, ref) => {\r\n    const {error, formMessageId} = useFormField();\r\n    const body = error ? String(error?.message ?? \"\") : children;\r\n\r\n    if (!body) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <p\r\n        ref={ref}\r\n        id={formMessageId}\r\n        className={cn(\"text-[0.8rem] font-medium text-red-500 dark:text-red-900\", className)}\r\n        {...props}>\r\n        {body}\r\n      </p>\r\n    );\r\n  },\r\n);\r\nFormMessage.displayName = \"FormMessage\";\r\n\r\nexport {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField};\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","Error","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","Boolean","FormDescription","FormMessage","children","body","String"],"mappings":"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"}

package/dist/components/ui/hover-card.d.ts

@@ -1,7 +1,7 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import * as React from "react";
-declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { HoverCard, HoverCardContent, HoverCardTrigger };
 //# sourceMappingURL=hover-card.d.ts.map

package/dist/components/ui/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,SAAS,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAOlF;AAED,iBAAS,gBAAgB,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAO5F;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAezD;AAED,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,SAAS,6CAA0B,CAAC;AAE1C,QAAA,MAAM,gBAAgB,oHAA6B,CAAC;AAEpD,QAAA,MAAM,gBAAgB,oKAcpB,CAAC;AAGH,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC"}

package/dist/components/ui/hover-card.js

@@ -1,32 +1,18 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Content, Portal, Root, Trigger } from "@radix-ui/react-hover-card";
-import "react";
+import { Content, Root, Trigger } from "@radix-ui/react-hover-card";
+import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-function HoverCard({ ...props }) {
-    return /*#__PURE__*/ jsx(Root, {
-        "data-slot": "hover-card",
+const HoverCard = Root;
+const HoverCardTrigger = Trigger;
+const HoverCardContent = /*#__PURE__*/ forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ jsx(Content, {
+        ref: ref,
+        align: align,
+        sideOffset: sideOffset,
+        className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50", className),
         ...props
-    });
-}
-function HoverCardTrigger({ ...props }) {
-    return /*#__PURE__*/ jsx(Trigger, {
-        "data-slot": "hover-card-trigger",
-        ...props
-    });
-}
-function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
-    return /*#__PURE__*/ jsx(Portal, {
-        "data-slot": "hover-card-portal",
-        children: /*#__PURE__*/ jsx(Content, {
-            "data-slot": "hover-card-content",
-            align: align,
-            sideOffset: sideOffset,
-            className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-hidden dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50", className),
-            ...props
-        })
-    });
-}
+    }));
+HoverCardContent.displayName = Content.displayName;
 export { HoverCard, HoverCardContent, HoverCardTrigger };
 
 //# sourceMappingURL=hover-card.js.map

package/dist/components/ui/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\hover-card.js","sources":["webpack://@arolariu/components/./src/components/ui/hover-card.tsx"],"sourcesContent":["\r\n\r\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction HoverCard({...props}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\r\n  return (\r\n    <HoverCardPrimitive.Root\r\n      data-slot='hover-card'\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction HoverCardTrigger({...props}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\r\n  return (\r\n    <HoverCardPrimitive.Trigger\r\n      data-slot='hover-card-trigger'\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction HoverCardContent({\r\n  className,\r\n  align = \"center\",\r\n  sideOffset = 4,\r\n  ...props\r\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\r\n  return (\r\n    <HoverCardPrimitive.Portal data-slot='hover-card-portal'>\r\n      <HoverCardPrimitive.Content\r\n        data-slot='hover-card-content'\r\n        align={align}\r\n        sideOffset={sideOffset}\r\n        className={cn(\r\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-hidden dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      />\r\n    </HoverCardPrimitive.Portal>\r\n  );\r\n}\r\n\r\nexport {HoverCard, HoverCardContent, HoverCardTrigger};\r\n"],"names":["HoverCard","props","HoverCardPrimitive","HoverCardTrigger","HoverCardContent","className","align","sideOffset","cn"],"mappings":";;;;;AAOA,SAASA,UAAU,EAAC,GAAGC,OAA4D;IACjF,OAAO,WAAP,GACE,IAACC,MAAuB;QACtB,aAAU;QACT,GAAGD,KAAK;;AAGf;AAEA,SAASE,iBAAiB,EAAC,GAAGF,OAA+D;IAC3F,OAAO,WAAP,GACE,IAACC,SAA0B;QACzB,aAAU;QACT,GAAGD,KAAK;;AAGf;AAEA,SAASG,iBAAiB,EACxBC,SAAS,EACTC,QAAQ,QAAQ,EAChBC,aAAa,CAAC,EACd,GAAGN,OACqD;IACxD,OAAO,WAAP,GACE,IAACC,QAAyB;QAAC,aAAU;kBACnC,kBAACA,SAA0B;YACzB,aAAU;YACV,OAAOI;YACP,YAAYC;YACZ,WAAWC,GACT,gjBACAH;YAED,GAAGJ,KAAK;;;AAIjB"}
+{"version":3,"file":"components\\ui\\hover-card.js","sources":["webpack://@arolariu/components/./src/components/ui/hover-card.tsx"],"sourcesContent":["\r\n\r\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst HoverCard = HoverCardPrimitive.Root;\r\n\r\nconst HoverCardTrigger = HoverCardPrimitive.Trigger;\r\n\r\nconst HoverCardContent = React.forwardRef<\r\n  React.ComponentRef<typeof HoverCardPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\r\n>(({className, align = \"center\", sideOffset = 4, ...props}, ref) => (\r\n  <HoverCardPrimitive.Content\r\n    ref={ref}\r\n    align={align}\r\n    sideOffset={sideOffset}\r\n    className={cn(\r\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;\r\n\r\nexport {HoverCard, HoverCardContent, HoverCardTrigger};\r\n"],"names":["HoverCard","HoverCardPrimitive","HoverCardTrigger","HoverCardContent","React","className","align","sideOffset","props","ref","cn"],"mappings":";;;;;AAOA,MAAMA,YAAYC;AAElB,MAAMC,mBAAmBD;AAEzB,MAAME,mBAAmB,WAAnBA,GAAmBC,WAGvB,CAAC,EAACC,SAAS,EAAEC,QAAQ,QAAQ,EAAEC,aAAa,CAAC,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GAC1D,IAACR,SAA0B;QACzB,KAAKQ;QACL,OAAOH;QACP,YAAYC;QACZ,WAAWG,GACT,8iBACAL;QAED,GAAGG,KAAK;;AAGbL,iBAAiB,WAAW,GAAGF,QAAAA,WAAsC"}

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Button } from "./button";
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: {
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupButtonVariants: (props?: {
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/ui/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAK9C,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA0BrE;AAED,QAAA,MAAM,uBAAuB;;iEAe5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgB5E;AAED,QAAA,MAAM,wBAAwB;;iEAY5B,CAAC;AAEH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAUnG;AAED,iBAAS,cAAc,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAU1E;AAED,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQ5E;AAED,iBAAS,kBAAkB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlF;AAED,OAAO,EAAC,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,kBAAkB,EAAC,CAAC"}