luan-ui 0.5.2 → 0.6.0

package/dist/components/form-field/form-field.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-run
 import { FormHelper } from "../form-helper/form-helper";
 import { Label } from "../label/label";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { Children, forwardRef, isValidElement, } from "react";
+import { Children, isValidElement } from "react";
 import { FormFieldProvider } from "./form-field-context";
 const formFieldStyles = getVariants({
     base: "flex gap-2",
@@ -25,7 +25,7 @@ const formFieldStyles = getVariants({
  * </FormField>
  * ```
  */
-export const FormField = forwardRef(({ className, children, orientation = "vertical", disabled, required, error, ...props }, ref) => {
+export function FormField({ className, children, orientation = "vertical", disabled, required, error, ref, ...props }) {
     const childElements = Children.toArray(children);
     const label = childElements.find((child) => isValidElement(child) && child.type === Label);
     const helperText = childElements.find((child) => isValidElement(child) && child.type === FormHelper);
@@ -41,6 +41,5 @@ export const FormField = forwardRef(({ className, children, orientation = "verti
             required,
             error,
         }, children: _jsx("div", { ref: ref, className: formFieldStyles({ orientation, className }), ...props, children: orientation === "horizontal" ? (_jsxs(_Fragment, { children: [input, _jsxs("div", { className: "flex flex-col", children: [label, helperText] })] })) : (_jsxs(_Fragment, { children: [label, input, helperText] })) }) }));
-});
-FormField.displayName = "FormField";
+}
 //# sourceMappingURL=form-field.js.map

package/dist/components/form-field/form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"/","sources":["components/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EACN,QAAQ,EAER,UAAU,EACV,cAAc,GACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,MAAM,eAAe,GAAG,WAAW,CAAC;IACnC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACT,WAAW,EAAE;YACZ,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,UAAU;SACpB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAClC,CACC,EACC,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CACxD,CAAC;IACF,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CACpC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC7D,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CACT,cAAc,CAAC,KAAK,CAAC;QACrB,KAAK,CAAC,IAAI,KAAK,KAAK;QACpB,KAAK,CAAC,IAAI,KAAK,UAAU,CAC1B,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CAAC,IAAI,CACX,gEAAgE,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,KAAC,iBAAiB,IACjB,KAAK,EAAE;YACN,QAAQ;YACR,QAAQ;YACR,KAAK;SACL,YAED,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAClD,KAAK,YAER,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/B,8BACE,KAAK,EACN,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAK,EACL,UAAU,IACN,IACJ,CACH,CAAC,CAAC,CAAC,CACH,8BACE,KAAK,EACL,KAAK,EACL,UAAU,IACT,CACH,GACI,GACa,CACpB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import { FormHelper } from \"@components/form-helper/form-helper\";\nimport { Label } from \"@components/label/label\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport {\n\tChildren,\n\ttype ComponentPropsWithoutRef,\n\tforwardRef,\n\tisValidElement,\n} from \"react\";\nimport { FormFieldProvider } from \"./form-field-context\";\n\nexport type FormFieldProps = ComponentPropsWithoutRef<\"div\"> & {\n\torientation?: \"horizontal\" | \"vertical\";\n\tdisabled?: boolean;\n\trequired?: boolean;\n\terror?: boolean;\n};\n\nconst formFieldStyles = getVariants({\n\tbase: \"flex gap-2\",\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-start\",\n\t\t\tvertical: \"flex-col\",\n\t\t},\n\t},\n});\n\n/**\n * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.\n *\n * @example\n * ```tsx\n * <FormField>\n *  <Label>Email</Label>\n *  <Input />\n *  <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\torientation = \"vertical\",\n\t\t\tdisabled,\n\t\t\trequired,\n\t\t\terror,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst childElements = Children.toArray(children);\n\t\tconst label = childElements.find(\n\t\t\t(child) => isValidElement(child) && child.type === Label,\n\t\t);\n\t\tconst helperText = childElements.find(\n\t\t\t(child) => isValidElement(child) && child.type === FormHelper,\n\t\t);\n\t\tconst input = childElements.find(\n\t\t\t(child) =>\n\t\t\t\tisValidElement(child) &&\n\t\t\t\tchild.type !== Label &&\n\t\t\t\tchild.type !== FormHelper,\n\t\t);\n\n\t\tif (!label || !input) {\n\t\t\tconsole.warn(\n\t\t\t\t\"FormField requires both Label and Input components as children\",\n\t\t\t);\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<FormFieldProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tdisabled,\n\t\t\t\t\trequired,\n\t\t\t\t\terror,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={formFieldStyles({ orientation, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{orientation === \"horizontal\" ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{input}\n\t\t\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t{input}\n\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</FormFieldProvider>\n\t\t);\n\t},\n);\n\nFormField.displayName = \"FormField\";\n"]}
+{"version":3,"file":"form-field.js","sourceRoot":"/","sources":["components/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAuB,cAAc,EAAY,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAUzD,MAAM,eAAe,GAAG,WAAW,CAAC;IACnC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACT,WAAW,EAAE;YACZ,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,UAAU;SACpB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACQ;IAChB,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CACxD,CAAC;IACF,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CACpC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC7D,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CACT,cAAc,CAAC,KAAK,CAAC;QACrB,KAAK,CAAC,IAAI,KAAK,KAAK;QACpB,KAAK,CAAC,IAAI,KAAK,UAAU,CAC1B,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CAAC,IAAI,CACX,gEAAgE,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,KAAC,iBAAiB,IACjB,KAAK,EAAE;YACN,QAAQ;YACR,QAAQ;YACR,KAAK;SACL,YAED,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAClD,KAAK,YAER,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/B,8BACE,KAAK,EACN,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAK,EACL,UAAU,IACN,IACJ,CACH,CAAC,CAAC,CAAC,CACH,8BACE,KAAK,EACL,KAAK,EACL,UAAU,IACT,CACH,GACI,GACa,CACpB,CAAC;AACH,CAAC","sourcesContent":["import { FormHelper } from \"@components/form-helper/form-helper\";\nimport { Label } from \"@components/label/label\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { Children, type ComponentProps, isValidElement, type Ref } from \"react\";\nimport { FormFieldProvider } from \"./form-field-context\";\n\nexport type FormFieldProps = ComponentProps<\"div\"> & {\n\torientation?: \"horizontal\" | \"vertical\";\n\tdisabled?: boolean;\n\trequired?: boolean;\n\terror?: boolean;\n\tref?: Ref<HTMLDivElement>;\n};\n\nconst formFieldStyles = getVariants({\n\tbase: \"flex gap-2\",\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-start\",\n\t\t\tvertical: \"flex-col\",\n\t\t},\n\t},\n});\n\n/**\n * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.\n *\n * @example\n * ```tsx\n * <FormField>\n *  <Label>Email</Label>\n *  <Input />\n *  <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport function FormField({\n\tclassName,\n\tchildren,\n\torientation = \"vertical\",\n\tdisabled,\n\trequired,\n\terror,\n\tref,\n\t...props\n}: FormFieldProps) {\n\tconst childElements = Children.toArray(children);\n\tconst label = childElements.find(\n\t\t(child) => isValidElement(child) && child.type === Label,\n\t);\n\tconst helperText = childElements.find(\n\t\t(child) => isValidElement(child) && child.type === FormHelper,\n\t);\n\tconst input = childElements.find(\n\t\t(child) =>\n\t\t\tisValidElement(child) &&\n\t\t\tchild.type !== Label &&\n\t\t\tchild.type !== FormHelper,\n\t);\n\n\tif (!label || !input) {\n\t\tconsole.warn(\n\t\t\t\"FormField requires both Label and Input components as children\",\n\t\t);\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<FormFieldProvider\n\t\t\tvalue={{\n\t\t\t\tdisabled,\n\t\t\t\trequired,\n\t\t\t\terror,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={formFieldStyles({ orientation, className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{orientation === \"horizontal\" ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{input}\n\t\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{input}\n\t\t\t\t\t\t{helperText}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</FormFieldProvider>\n\t);\n}\n"]}

package/dist/components/form-helper/form-helper.d.ts

@@ -1,7 +1,8 @@
-import { type ComponentPropsWithoutRef } from "react";
-export type FormHelperProps = ComponentPropsWithoutRef<"div"> & {
+import type { ComponentProps, Ref } from "react";
+export type FormHelperProps = ComponentProps<"div"> & {
     error?: boolean;
     disabled?: boolean;
+    ref?: Ref<HTMLDivElement>;
 };
 /**
  * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.
@@ -15,7 +16,4 @@ export type FormHelperProps = ComponentPropsWithoutRef<"div"> & {
  * </FormField>
  * ```
  */
-export declare const FormHelper: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    error?: boolean;
-    disabled?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare function FormHelper({ className, children, error: initialError, disabled: initialDisabled, ref, ...props }: FormHelperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-helper/form-helper.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { forwardRef } from "react";
 const formHelperStyles = getVariants({
     base: "text-gray-500 text-sm",
     variants: {
@@ -32,11 +31,11 @@ const formHelperStyles = getVariants({
  * </FormField>
  * ```
  */
-export const FormHelper = forwardRef(({ className, children, error: initialError, disabled: initialDisabled, ...props }, ref) => {
+export function FormHelper({ className, children, error: initialError, disabled: initialDisabled, ref, ...props }) {
     const { error, disabled } = useFormContext({
         error: initialError,
         disabled: initialDisabled,
     });
     return (_jsx("div", { ref: ref, className: formHelperStyles({ error, disabled, className }), role: error ? "alert" : "status", ...props, children: children }));
-});
+}
 //# sourceMappingURL=form-helper.js.map

package/dist/components/form-helper/form-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-helper.js","sourceRoot":"/","sources":["components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlE,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,eAAe;SACrB;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,eAAe;SAC1B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CACnC,CACC,EACC,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC3D,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAC5B,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport type FormHelperProps = ComponentPropsWithoutRef<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\n};\n\nconst formHelperStyles = getVariants({\n\tbase: \"text-gray-500 text-sm\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"text-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"text-gray-300\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName: \"text-gray-300\",\n\t\t},\n\t],\n});\n\n/**\n * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.\n *\n * @example\n * ```tsx\n * <FormField>\n *  <Label>Email</Label>\n *  <Input />\n *  <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport const FormHelper = forwardRef<HTMLDivElement, FormHelperProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\terror: initialError,\n\t\t\tdisabled: initialDisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { error, disabled } = useFormContext({\n\t\t\terror: initialError,\n\t\t\tdisabled: initialDisabled,\n\t\t});\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\n"]}
+{"version":3,"file":"form-helper.js","sourceRoot":"/","sources":["components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,eAAe;SACrB;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,eAAe;SAC1B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC3D,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAC5B,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type FormHelperProps = ComponentProps<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\n\tref?: Ref<HTMLDivElement>;\n};\n\nconst formHelperStyles = getVariants({\n\tbase: \"text-gray-500 text-sm\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"text-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"text-gray-300\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName: \"text-gray-300\",\n\t\t},\n\t],\n});\n\n/**\n * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.\n *\n * @example\n * ```tsx\n * <FormField>\n *  <Label>Email</Label>\n *  <Input />\n *  <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport function FormHelper({\n\tclassName,\n\tchildren,\n\terror: initialError,\n\tdisabled: initialDisabled,\n\tref,\n\t...props\n}: FormHelperProps) {\n\tconst { error, disabled } = useFormContext({\n\t\terror: initialError,\n\t\tdisabled: initialDisabled,\n\t});\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/icon/icon.d.ts

@@ -1,6 +1,6 @@
+import { useRender } from "@base-ui/react/use-render";
 import type { ResponsiveValue } from "../../utilities/responsive/responsive";
-export type IconProps = React.SVGProps<SVGSVGElement> & {
-    asChild?: boolean;
+export type IconProps = useRender.ComponentProps<"svg"> & {
     size?: ResponsiveValue<"small" | "medium" | "large">;
 };
 export declare const SIZES: {
@@ -27,28 +27,22 @@ export declare const SIZES: {
 };
 /**
  * A flexible icon component that serves as a wrapper for SVG icons.
- * Must be used with asChild={true} to render the actual icon component.
+ * Use the render prop to render the actual icon component.
  *
  * @example
- * // Correct usage
- * <Icon asChild size="medium">
- *   <HomeIcon />
- * </Icon>
+ * // Basic usage with render prop
+ * <Icon render={<HomeIcon />} size="medium" />
  *
  * @example
  * // With different sizes
- * <Icon asChild size="small">
- *   <UserIcon />
- * </Icon>
+ * <Icon render={<UserIcon />} size="small" />
  *
  * @example
  * // With custom className
- * <Icon asChild className="text-blue-500">
- *   <SettingsIcon />
- * </Icon>
+ * <Icon render={<SettingsIcon />} className="text-blue-500" />
  *
- * @param {boolean} [props.asChild] - Should always be true when using this component
+ * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - The icon element or render function
  * @param {ResponsiveValue<"small" | "medium" | "large">} [props.size="medium"] - The size of the icon
  * @param {string} [props.className] - Additional CSS classes to apply
  */
-export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function Icon({ className, size, render, ref, ...props }: IconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/icon/icon.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "../slot/slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { forwardRef } from "react";
 export const SIZES = {
     sm: {
         small: "sm:h-4 sm:w-4",
@@ -36,32 +35,34 @@ const iconStyles = getVariants({
 });
 /**
  * A flexible icon component that serves as a wrapper for SVG icons.
- * Must be used with asChild={true} to render the actual icon component.
+ * Use the render prop to render the actual icon component.
  *
  * @example
- * // Correct usage
- * <Icon asChild size="medium">
- *   <HomeIcon />
- * </Icon>
+ * // Basic usage with render prop
+ * <Icon render={<HomeIcon />} size="medium" />
  *
  * @example
  * // With different sizes
- * <Icon asChild size="small">
- *   <UserIcon />
- * </Icon>
+ * <Icon render={<UserIcon />} size="small" />
  *
  * @example
  * // With custom className
- * <Icon asChild className="text-blue-500">
- *   <SettingsIcon />
- * </Icon>
+ * <Icon render={<SettingsIcon />} className="text-blue-500" />
  *
- * @param {boolean} [props.asChild] - Should always be true when using this component
+ * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - The icon element or render function
  * @param {ResponsiveValue<"small" | "medium" | "large">} [props.size="medium"] - The size of the icon
  * @param {string} [props.className] - Additional CSS classes to apply
  */
-export const Icon = forwardRef(({ className, size = "medium", asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : "svg";
-    return (_jsx(Comp, { ref: ref, className: iconStyles({ size, className }), ...props }));
-});
+export function Icon({ className, size = "medium", render, ref, ...props }) {
+    const defaultProps = {
+        className: iconStyles({ size, className }),
+    };
+    const element = useRender({
+        defaultTagName: "svg",
+        render,
+        ref,
+        props: mergeProps(defaultProps, props),
+    });
+    return element;
+}
 //# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"/","sources":["components/icon/icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;CACD,CAAC;AAEF,MAAM,UAAU,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,2BAA2B;IACjC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,OAAO,CACN,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CACzE,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type IconProps = React.SVGProps<SVGSVGElement> & {\n\tasChild?: boolean;\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:h-4 sm:w-4\",\n\t\tmedium: \"sm:h-6 sm:w-6\",\n\t\tlarge: \"sm:h-8 sm:w-8\",\n\t},\n\tmd: {\n\t\tsmall: \"md:h-4 md:w-4\",\n\t\tmedium: \"md:h-6 md:w-6\",\n\t\tlarge: \"md:h-8 md:w-8\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:h-4 lg:w-4\",\n\t\tmedium: \"lg:h-6 lg:w-6\",\n\t\tlarge: \"lg:h-8 lg:w-8\",\n\t},\n\txl: {\n\t\tsmall: \"xl:h-4 xl:w-4\",\n\t\tmedium: \"xl:h-6 xl:w-6\",\n\t\tlarge: \"xl:h-8 xl:w-8\",\n\t},\n};\n\nconst iconStyles = getVariants({\n\tbase: \"fill-current text-current\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"h-4 w-4\",\n\t\t\tmedium: \"h-6 w-6\",\n\t\t\tlarge: \"h-8 w-8\",\n\t\t},\n\t},\n});\n\n/**\n * A flexible icon component that serves as a wrapper for SVG icons.\n * Must be used with asChild={true} to render the actual icon component.\n *\n * @example\n * // Correct usage\n * <Icon asChild size=\"medium\">\n *   <HomeIcon />\n * </Icon>\n *\n * @example\n * // With different sizes\n * <Icon asChild size=\"small\">\n *   <UserIcon />\n * </Icon>\n *\n * @example\n * // With custom className\n * <Icon asChild className=\"text-blue-500\">\n *   <SettingsIcon />\n * </Icon>\n *\n * @param {boolean} [props.asChild] - Should always be true when using this component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the icon\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(\n\t({ className, size = \"medium\", asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"svg\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={iconStyles({ size, className })} {...props} />\n\t\t);\n\t},\n);\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"/","sources":["components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAM/D,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;CACD,CAAC;AAEF,MAAM,UAAU,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,2BAA2B;IACjC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,IAAI,CAAC,EACpB,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACG;IACX,MAAM,YAAY,GAAkC;QACnD,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KAC1C,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,CAAC;QACzB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AAChB,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\n\nexport type IconProps = useRender.ComponentProps<\"svg\"> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:h-4 sm:w-4\",\n\t\tmedium: \"sm:h-6 sm:w-6\",\n\t\tlarge: \"sm:h-8 sm:w-8\",\n\t},\n\tmd: {\n\t\tsmall: \"md:h-4 md:w-4\",\n\t\tmedium: \"md:h-6 md:w-6\",\n\t\tlarge: \"md:h-8 md:w-8\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:h-4 lg:w-4\",\n\t\tmedium: \"lg:h-6 lg:w-6\",\n\t\tlarge: \"lg:h-8 lg:w-8\",\n\t},\n\txl: {\n\t\tsmall: \"xl:h-4 xl:w-4\",\n\t\tmedium: \"xl:h-6 xl:w-6\",\n\t\tlarge: \"xl:h-8 xl:w-8\",\n\t},\n};\n\nconst iconStyles = getVariants({\n\tbase: \"fill-current text-current\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"h-4 w-4\",\n\t\t\tmedium: \"h-6 w-6\",\n\t\t\tlarge: \"h-8 w-8\",\n\t\t},\n\t},\n});\n\n/**\n * A flexible icon component that serves as a wrapper for SVG icons.\n * Use the render prop to render the actual icon component.\n *\n * @example\n * // Basic usage with render prop\n * <Icon render={<HomeIcon />} size=\"medium\" />\n *\n * @example\n * // With different sizes\n * <Icon render={<UserIcon />} size=\"small\" />\n *\n * @example\n * // With custom className\n * <Icon render={<SettingsIcon />} className=\"text-blue-500\" />\n *\n * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - The icon element or render function\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the icon\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport function Icon({\n\tclassName,\n\tsize = \"medium\",\n\trender,\n\tref,\n\t...props\n}: IconProps) {\n\tconst defaultProps: useRender.ElementProps<\"svg\"> = {\n\t\tclassName: iconStyles({ size, className }),\n\t};\n\n\tconst element = useRender({\n\t\tdefaultTagName: \"svg\",\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps<\"svg\">(defaultProps, props),\n\t});\n\n\treturn element;\n}\n"]}

package/dist/components/input/input.d.ts

@@ -1,5 +1,7 @@
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+import type { ComponentProps, Ref } from "react";
+export type InputProps = ComponentProps<"input"> & {
     error?: boolean;
+    ref?: Ref<HTMLInputElement>;
 };
 /**
  * A basic input component with styling.
@@ -9,7 +11,5 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  * <Input placeholder="Enter your email" id="email" />
  * ```
  */
-declare const Input: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
-    error?: boolean;
-} & import("react").RefAttributes<HTMLInputElement>>;
+declare function Input({ className, disabled: initialDisabled, required: initialRequired, error: initialError, ref, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export { Input };

package/dist/components/input/input.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { forwardRef } from "react";
 const inputStyles = getVariants({
     base: "rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800",
     variants: {
@@ -28,14 +27,13 @@ const inputStyles = getVariants({
  * <Input placeholder="Enter your email" id="email" />
  * ```
  */
-const Input = forwardRef(({ className, disabled: initialDisabled, required: initialRequired, error: initialError, ...props }, ref) => {
+function Input({ className, disabled: initialDisabled, required: initialRequired, error: initialError, ref, ...props }) {
     const { disabled, required, error } = useFormContext({
         disabled: initialDisabled,
         required: initialRequired,
         error: initialError,
     });
     return (_jsx("input", { className: inputStyles({ disabled, error, className }), disabled: disabled, required: required, "aria-invalid": error, ...props, ref: ref }));
-});
-Input.displayName = "Input";
+}
 export { Input };
 //# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"/","sources":["components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,oIAAoI;IAC1I,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,gBAAgB;SACtB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,iEAAiE;SAClE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,KAAK,KACf,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC,CACD,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n\terror?: boolean;\n};\n\nconst inputStyles = getVariants({\n\tbase: \"rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"border-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName:\n\t\t\t\t\"border-gray-400 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t],\n});\n\n/**\n * A basic input component with styling.\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter your email\" id=\"email\" />\n * ```\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\terror: initialError,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, required, error } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\terror: initialError,\n\t\t});\n\t\treturn (\n\t\t\t<input\n\t\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\t\tdisabled={disabled}\n\t\t\t\trequired={required}\n\t\t\t\taria-invalid={error}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"]}
+{"version":3,"file":"input.js","sourceRoot":"/","sources":["components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAQ/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,oIAAoI;IAC1I,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,gBAAgB;SACtB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,iEAAiE;SAClE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,KAAK,KACf,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type InputProps = ComponentProps<\"input\"> & {\n\terror?: boolean;\n\tref?: Ref<HTMLInputElement>;\n};\n\nconst inputStyles = getVariants({\n\tbase: \"rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"border-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName:\n\t\t\t\t\"border-gray-400 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t],\n});\n\n/**\n * A basic input component with styling.\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter your email\" id=\"email\" />\n * ```\n */\nfunction Input({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\terror: initialError,\n\tref,\n\t...props\n}: InputProps) {\n\tconst { disabled, required, error } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t\terror: initialError,\n\t});\n\treturn (\n\t\t<input\n\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\taria-invalid={error}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n}\n\nexport { Input };\n"]}

package/dist/components/label/label.d.ts

@@ -1,4 +1,5 @@
-export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+import type { ComponentProps } from "react";
+export type LabelProps = ComponentProps<"label"> & {
     required?: boolean;
 };
 /**
@@ -10,7 +11,5 @@ export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
  * <Input id="email" />
  * ```
  */
-declare const Label: import("react").ForwardRefExoticComponent<import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-    required?: boolean;
-} & import("react").RefAttributes<HTMLLabelElement>>;
+declare function Label({ className, required: initialRequired, children, ref, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
 export { Label };

package/dist/components/label/label.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
 import { cn } from "../../utilities/cn/cn";
-import { Label as RadixLabel } from "radix-ui";
-import { forwardRef } from "react";
 /**
  * A label component that can be used to label form fields.
  *
@@ -12,12 +10,13 @@ import { forwardRef } from "react";
  * <Input id="email" />
  * ```
  */
-const Label = forwardRef(({ className, required: initialRequired, children, ...props }, ref) => {
+function Label({ className, required: initialRequired, children, ref, ...props }) {
     const { required } = useFormContext({
         required: initialRequired,
     });
-    return (_jsxs(RadixLabel.Root, { className: cn("font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
-});
-Label.displayName = RadixLabel.Root.displayName;
+    return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime
+    _jsxs("label", { className: cn("font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
+}
 export { Label };
 //# sourceMappingURL=label.js.map

package/dist/components/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"/","sources":["components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC;;;;;;;;GAQG;AACH,MAAM,KAAK,GAAG,UAAU,CACvB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,MAAC,UAAU,CAAC,IAAI,IACf,SAAS,EAAE,EAAE,CACZ,6FAA6F,EAC7F,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACV,CAClB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Label as RadixLabel } from \"radix-ui\";\nimport { forwardRef } from \"react\";\n\nexport type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n\trequired?: boolean;\n};\n\n/**\n * A label component that can be used to label form fields.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n\t({ className, required: initialRequired, children, ...props }, ref) => {\n\t\tconst { required } = useFormContext({\n\t\t\trequired: initialRequired,\n\t\t});\n\t\treturn (\n\t\t\t<RadixLabel.Root\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{required && <span>*</span>}\n\t\t\t</RadixLabel.Root>\n\t\t);\n\t},\n);\n\nLabel.displayName = RadixLabel.Root.displayName;\n\nexport { Label };\n"]}
+{"version":3,"file":"label.js","sourceRoot":"/","sources":["components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO;IACN,uFAAuF;IACvF,iBACC,SAAS,EAAE,EAAE,CACZ,6FAA6F,EAC7F,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACpB,CACR,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type LabelProps = ComponentProps<\"label\"> & {\n\trequired?: boolean;\n};\n\n/**\n * A label component that can be used to label form fields.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n * ```\n */\nfunction Label({\n\tclassName,\n\trequired: initialRequired,\n\tchildren,\n\tref,\n\t...props\n}: LabelProps) {\n\tconst { required } = useFormContext({\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t\"font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t\t{required && <span>*</span>}\n\t\t</label>\n\t);\n}\n\nexport { Label };\n"]}

package/dist/components/pagination/pagination.d.ts

@@ -1,20 +1,22 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type PropsWithChildren, type Ref } from "react";
 /**
  * Pagination
  */
-export type PaginationProps = {
+export type PaginationProps = useRender.ComponentProps<"nav"> & {
     children?: React.ReactNode;
     page: number;
     totalPages: number;
     onPageChange: (page: number) => void;
-    asChild?: boolean;
-} & React.HTMLAttributes<HTMLElement>;
+    className?: string;
+};
 /**
  * Pagination component that provides navigation controls for a set of pages.
  *
  * @param {number} props.page - The current active page number
  * @param {number} props.totalPages - The total number of pages
  * @param {(page: number) => void} props.onPageChange - Callback function called when page changes
- * @param {boolean} [props.asChild] - Whether to render the root element as a child component
+ * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of nav
  * @param {React.ReactNode} [props.children] - The content to render within the pagination component
  * @param {string} [props.className] - Additional CSS classes to apply
  *
@@ -27,20 +29,23 @@ export type PaginationProps = {
  *   <PaginationNext>Next</PaginationNext>
  * </Pagination>
  * ```
+ *
+ * @example
+ * // With render prop to change the element
+ * ```tsx
+ * <Pagination render={<div />} page={1} totalPages={10} onPageChange={handleChange}>
+ *   ...
+ * </Pagination>
+ * ```
  */
-declare const Pagination: import("react").ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    page: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    asChild?: boolean;
-} & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+declare function Pagination({ children, page: initialPage, totalPages: initialTotalPages, onPageChange, className, render, ...props }: PaginationProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * Pagination Item
  */
 export type PaginationItemProps = {
     children?: React.ReactNode;
     index?: number;
+    ref?: Ref<HTMLButtonElement>;
 } & React.HTMLAttributes<HTMLButtonElement>;
 /**
  * Individual page item within the Pagination component.
@@ -49,13 +54,13 @@ export type PaginationItemProps = {
  * ```tsx
  * <PaginationItem index={1}>1</PaginationItem>
  */
-declare const PaginationItem: import("react").ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    index?: number;
-} & import("react").HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+declare function PaginationItem({ index, children, className, ref, ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Pagination Prev
  */
+export type PaginationPrevProps = PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>> & {
+    ref?: Ref<HTMLButtonElement>;
+};
 /**
  * Previous page button component for the Pagination.
  * Automatically disabled when on the first page.
@@ -65,12 +70,13 @@ declare const PaginationItem: import("react").ForwardRefExoticComponent<{
  * <PaginationPrev>Previous</PaginationPrev>
  * ```
  */
-declare const PaginationPrev: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+declare function PaginationPrev({ children, className, ref, ...props }: PaginationPrevProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Pagination Next
  */
+export type PaginationNextProps = PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>> & {
+    ref?: Ref<HTMLButtonElement>;
+};
 /**
  * Next page button component for the Pagination.
  * Automatically disabled when on the last page.
@@ -80,7 +86,5 @@ declare const PaginationPrev: import("react").ForwardRefExoticComponent<import("
  * <PaginationNext>Next</PaginationNext>
  * ```
  */
-declare const PaginationNext: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+declare function PaginationNext({ children, className, ref, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
 export { Pagination, PaginationItem, PaginationPrev, PaginationNext };

package/dist/components/pagination/pagination.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "../slot/slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cn } from "../../utilities/cn/cn";
 import { mergeRefs } from "../../utilities/merge-refs/merge-refs";
 import { getTruncatedElements } from "../../utilities/pagination/get-truncated-elements";
 import { handleKeyboardNavigation } from "../../utilities/pagination/keyboard-navigation";
 import clsx from "clsx";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 const PaginationContext = createContext(undefined);
 const usePaginationContext = () => {
     const context = useContext(PaginationContext);
@@ -20,7 +21,7 @@ const usePaginationContext = () => {
  * @param {number} props.page - The current active page number
  * @param {number} props.totalPages - The total number of pages
  * @param {(page: number) => void} props.onPageChange - Callback function called when page changes
- * @param {boolean} [props.asChild] - Whether to render the root element as a child component
+ * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of nav
  * @param {React.ReactNode} [props.children] - The content to render within the pagination component
  * @param {string} [props.className] - Additional CSS classes to apply
  *
@@ -33,8 +34,16 @@ const usePaginationContext = () => {
  *   <PaginationNext>Next</PaginationNext>
  * </Pagination>
  * ```
+ *
+ * @example
+ * // With render prop to change the element
+ * ```tsx
+ * <Pagination render={<div />} page={1} totalPages={10} onPageChange={handleChange}>
+ *   ...
+ * </Pagination>
+ * ```
  */
-const Pagination = forwardRef(({ children, page: initialPage, totalPages: initialTotalPages, onPageChange, className, asChild, ...props }, ref) => {
+function Pagination({ children, page: initialPage, totalPages: initialTotalPages, onPageChange, className, render, ...props }) {
     const [page, setPage] = useState(initialPage);
     const [totalPages, setTotalPages] = useState(initialTotalPages);
     const [hasNextPage, setHasNextPage] = useState(page < totalPages);
@@ -76,9 +85,17 @@ const Pagination = forwardRef(({ children, page: initialPage, totalPages: initia
         hasPreviousPage,
         registerRef: registerRefWrapper,
     }), [page, totalPages, hasNextPage, hasPreviousPage, registerRefWrapper]);
-    const Component = asChild ? Slot : "nav";
-    return (_jsx(Component, { "aria-label": "Pagination", className: clsx("flex items-center gap-1", className), ...props, ref: ref, children: _jsx(PaginationContext.Provider, { value: memoContextValue, children: getTruncatedElements({ page, children }) }) }));
-});
+    const defaultProps = {
+        "aria-label": "Pagination",
+        className: clsx("flex items-center gap-1", className),
+        children: (_jsx(PaginationContext.Provider, { value: memoContextValue, children: getTruncatedElements({ page, children }) })),
+    };
+    return useRender({
+        defaultTagName: "nav",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 /**
  * Individual page item within the Pagination component.
  *
@@ -86,7 +103,7 @@ const Pagination = forwardRef(({ children, page: initialPage, totalPages: initia
  * ```tsx
  * <PaginationItem index={1}>1</PaginationItem>
  */
-const PaginationItem = forwardRef(({ index, children, className, ...props }, ref) => {
+function PaginationItem({ index, children, className, ref, ...props }) {
     const { registerRef, page, setPage } = usePaginationContext();
     const isActive = page === index;
     const handleClick = () => {
@@ -97,10 +114,7 @@ const PaginationItem = forwardRef(({ index, children, className, ...props }, ref
     return (_jsx("button", { type: "button", onClick: handleClick, ref: mergeRefs(ref, (el) => registerRef(index ?? 0, el)), className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200", {
             "bg-gray-700 text-white hover:bg-gray-800": isActive,
         }, className), "aria-current": isActive ? "page" : undefined, ...props, children: children ?? index }));
-});
-/**
- * Pagination Prev
- */
+}
 /**
  * Previous page button component for the Pagination.
  * Automatically disabled when on the first page.
@@ -110,13 +124,10 @@ const PaginationItem = forwardRef(({ index, children, className, ...props }, ref
  * <PaginationPrev>Previous</PaginationPrev>
  * ```
  */
-const PaginationPrev = forwardRef(({ children, className, ...props }, ref) => {
+function PaginationPrev({ children, className, ref, ...props }) {
     const { registerRef, page, setPage, hasPreviousPage } = usePaginationContext();
     return (_jsx("button", { type: "button", onClick: () => setPage(page - 1), ref: mergeRefs(ref, (el) => registerRef(0, el)), disabled: !hasPreviousPage, className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25", className), ...props, children: children }));
-});
-/**
- * Pagination Next
- */
+}
 /**
  * Next page button component for the Pagination.
  * Automatically disabled when on the last page.
@@ -126,9 +137,9 @@ const PaginationPrev = forwardRef(({ children, className, ...props }, ref) => {
  * <PaginationNext>Next</PaginationNext>
  * ```
  */
-const PaginationNext = forwardRef(({ children, className, ...props }, ref) => {
+function PaginationNext({ children, className, ref, ...props }) {
     const { page, setPage, hasNextPage, registerRef, totalPages } = usePaginationContext();
     return (_jsx("button", { type: "button", className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25", className), onClick: () => setPage(page + 1), disabled: !hasNextPage, ref: mergeRefs(ref, (el) => registerRef(totalPages + 1, el)), ...props, children: children }));
-});
+}
 export { Pagination, PaginationItem, PaginationPrev, PaginationNext };
 //# sourceMappingURL=pagination.js.map