@kubetail/ui 2.7.1 → 3.0.0-rc2

package/dist/elements/field.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn as e } from "../lib/utils.js";
+import { Separator as t } from "./separator.js";
+import { Label as n } from "./label.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
+import { useMemo as o } from "react";
+//#region src/elements/field.tsx
+function s({ className: t, ...n }) {
+	return /* @__PURE__ */ r("fieldset", {
+		"data-slot": "field-set",
+		className: e("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", t),
+		...n
+	});
+}
+function c({ className: t, variant: n = "legend", ...i }) {
+	return /* @__PURE__ */ r("legend", {
+		"data-slot": "field-legend",
+		"data-variant": n,
+		className: e("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", t),
+		...i
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "field-group",
+		className: e("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", t),
+		...n
+	});
+}
+var u = a("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function d({ className: t, orientation: n = "vertical", ...i }) {
+	return /* @__PURE__ */ r("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": n,
+		className: e(u({ orientation: n }), t),
+		...i
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "field-content",
+		className: e("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", t),
+		...n
+	});
+}
+function p({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n, {
+		"data-slot": "field-label",
+		className: e("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", t),
+		...i
+	});
+}
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "field-label",
+		className: e("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", t),
+		...n
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ r("p", {
+		"data-slot": "field-description",
+		className: e("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
+		...n
+	});
+}
+function g({ children: n, className: a, ...o }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-separator",
+		"data-content": !!n,
+		className: e("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", a),
+		...o,
+		children: [/* @__PURE__ */ r(t, { className: "absolute inset-0 top-1/2" }), n && /* @__PURE__ */ r("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children: n
+		})]
+	});
+}
+function _({ className: t, children: n, errors: i, ...a }) {
+	let s = o(() => {
+		if (n) return n;
+		if (!i?.length) return null;
+		let e = [...new Map(i.map((e) => [e?.message, e])).values()];
+		return e?.length === 1 ? e[0]?.message : /* @__PURE__ */ r("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: e.map((e) => e?.message && /* @__PURE__ */ r("li", { children: e.message }, e.message))
+		});
+	}, [n, i]);
+	return s ? /* @__PURE__ */ r("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: e("text-sm font-normal text-destructive", t),
+		...a,
+		children: s
+	}) : null;
+}
+//#endregion
+export { d as Field, f as FieldContent, h as FieldDescription, _ as FieldError, l as FieldGroup, p as FieldLabel, c as FieldLegend, g as FieldSeparator, s as FieldSet, m as FieldTitle };
+
+//# sourceMappingURL=field.js.map

package/dist/elements/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../src/elements/field.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useMemo } from 'react';\n\nimport { Label } from '@/elements/label';\nimport { Separator } from '@/elements/separator';\nimport { cn } from '@/lib/utils';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',\n      horizontal:\n        'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      responsive:\n        'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nfunction Field({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',\n        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',\n        'last:mt-0 nth-last-2:-mt-1',\n        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<'div'> & {\n  errors?: ({ message?: string } | undefined)[];\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error) => error?.message && <li key={error.message}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn('text-sm font-normal text-destructive', className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":";;;;;;;;AASA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA2C;AAC3E,QACE,kBAAC,YAAD;EACE,aAAU;EACV,WAAW,EACT,oGACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EACnB,cACA,aAAU,UACV,GAAG,KACiE;AACpE,QACE,kBAAC,UAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,EAAG,mFAAmF,EAAU;EAC3G,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;AACxE,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,wIACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,IAAM,IAAgB,EAAI,sEAAsE;CAC9F,UAAU,EACR,aAAa;EACX,UAAU;EACV,YACE;EACF,YACE;EACH,EACF;CACD,iBAAiB,EACf,aAAa,YACd;CACF,CAAC;AAEF,SAAS,EAAM,EACb,cACA,iBAAc,YACd,GAAG,KACgE;AACnE,QACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,EAAG,EAAc,EAAE,gBAAa,CAAC,EAAE,EAAU;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;AAC1E,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,iEAAiE,EAAU;EACzF,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAW,EAAE,cAAW,GAAG,KAA6C;AAC/E,QACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,2VACA,qEACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;AACxE,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,iGACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAoC;AAC5E,QACE,kBAAC,KAAD;EACE,aAAU;EACV,WAAW,EACT,qJACA,8BACA,qEACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAe,EACtB,aACA,cACA,GAAG,KAGF;AACD,QACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc,CAAC,CAAC;EAChB,WAAW,EAAG,6EAA6E,EAAU;EACrG,GAAI;YAJN,CAME,kBAAC,GAAD,EAAW,WAAU,4BAA6B,CAAA,EACjD,KACC,kBAAC,QAAD;GACE,WAAU;GACV,aAAU;GAET;GACI,CAAA,CAEL;;;AAIV,SAAS,EAAW,EAClB,cACA,aACA,WACA,GAAG,KAGF;CACD,IAAM,IAAU,QAAc;AAC5B,MAAI,EACF,QAAO;AAGT,MAAI,CAAC,GAAQ,OACX,QAAO;EAGT,IAAM,IAAe,CAAC,GAAG,IAAI,IAAI,EAAO,KAAK,MAAU,CAAC,GAAO,SAAS,EAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAM1F,SAJI,GAAc,WAAW,IACpB,EAAa,IAAI,UAIxB,kBAAC,MAAD;GAAI,WAAU;aACX,EAAa,KAAK,MAAU,GAAO,WAAW,kBAAC,MAAD,EAAA,UAAyB,EAAM,SAAa,EAAnC,EAAM,QAA6B,CAAC;GACzF,CAAA;IAEN,CAAC,GAAU,EAAO,CAAC;AAMtB,QAJK,IAKH,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,EAAG,wCAAwC,EAAU;EAChE,GAAI;YAEH;EACG,CAAA,GAXC"}

package/dist/elements/form.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`),n=require(`./label.cjs`);let r=require(`react/jsx-runtime`),i=require(`@radix-ui/react-slot`),a=require(`react`),o=require(`@radix-ui/react-label`);o=e.__toESM(o,1);let s=require(`react-hook-form`);var c=s.FormProvider,l=(0,a.createContext)({}),u=(0,a.createContext)({}),d=({...e})=>{let t=(0,a.useMemo)(()=>({name:e.name}),[e.name]);return(0,r.jsx)(l.Provider,{value:t,children:(0,r.jsx)(s.Controller,{...e})})},f=()=>{let e=(0,a.useContext)(l),t=(0,a.useContext)(u),{getFieldState:n}=(0,s.useFormContext)(),r=(0,s.useFormState)({name:e.name}),i=n(e.name,r);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:o}=t;return{id:o,name:e.name,formItemId:`${o}-form-item`,formDescriptionId:`${o}-form-item-description`,formMessageId:`${o}-form-item-message`,...i}};function p({className:e,...n}){let i=(0,a.useId)(),o=(0,a.useMemo)(()=>({id:i}),[i]);return(0,r.jsx)(u.Provider,{value:o,children:(0,r.jsx)(`div`,{"data-slot":`form-item`,className:t.cn(`grid gap-2`,e),...n})})}function m({className:e,...i}){let{error:a,formItemId:o}=f();return(0,r.jsx)(n.Label,{"data-slot":`form-label`,"data-error":!!a,className:t.cn(`data-[error=true]:text-destructive`,e),htmlFor:o,...i})}function h({...e}){let{error:t,formItemId:n,formDescriptionId:a,formMessageId:o}=f();return(0,r.jsx)(i.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${a} ${o}`:a,"aria-invalid":!!t,...e})}function g({className:e,...n}){let{formDescriptionId:i}=f();return(0,r.jsx)(`p`,{"data-slot":`form-description`,id:i,className:t.cn(`text-muted-foreground text-sm`,e),...n})}function _({className:e,...n}){let{error:i,formMessageId:a}=f(),o=i?String(i?.message??``):n.children;return o?(0,r.jsx)(`p`,{"data-slot":`form-message`,id:a,className:t.cn(`text-destructive text-sm`,e),...n,children:o}):null}exports.Form=c,exports.FormControl=h,exports.FormDescription=g,exports.FormField=d,exports.FormItem=p,exports.FormLabel=m,exports.FormMessage=_,exports.useFormField=f;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`),t=require(`./label.cjs`);let n=require(`react/jsx-runtime`),r=require(`react`),i=require(`react-hook-form`);var a=i.FormProvider,o=(0,r.createContext)({}),s=(0,r.createContext)({}),c=({...e})=>{let t=(0,r.useMemo)(()=>({name:e.name}),[e.name]);return(0,n.jsx)(o.Provider,{value:t,children:(0,n.jsx)(i.Controller,{...e})})},l=()=>{let e=(0,r.useContext)(o),t=(0,r.useContext)(s),{getFieldState:n}=(0,i.useFormContext)(),a=(0,i.useFormState)({name:e.name}),c=n(e.name,a);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:l}=t;return{id:l,name:e.name,formItemId:`${l}-form-item`,formDescriptionId:`${l}-form-item-description`,formMessageId:`${l}-form-item-message`,...c}};function u({className:t,...i}){let a=(0,r.useId)(),o=(0,r.useMemo)(()=>({id:a}),[a]);return(0,n.jsx)(s.Provider,{value:o,children:(0,n.jsx)(`div`,{"data-slot":`form-item`,className:e.cn(`grid gap-2`,t),...i})})}function d({className:r,...i}){let{error:a,formItemId:o}=l();return(0,n.jsx)(t.Label,{"data-slot":`form-label`,"data-error":!!a,className:e.cn(`data-[error=true]:text-destructive`,r),htmlFor:o,...i})}function f({children:e}){let{error:t,formItemId:i,formDescriptionId:a,formMessageId:o}=l(),s=r.Children.only(e);return(0,r.isValidElement)(s)?(0,r.cloneElement)(s,{"data-slot":`form-control`,id:i,"aria-describedby":t?`${a} ${o}`:a,"aria-invalid":!!t}):(0,n.jsx)(n.Fragment,{children:e})}function p({className:t,...r}){let{formDescriptionId:i}=l();return(0,n.jsx)(`p`,{"data-slot":`form-description`,id:i,className:e.cn(`text-muted-foreground text-sm`,t),...r})}function m({className:t,...r}){let{error:i,formMessageId:a}=l(),o=i?String(i?.message??``):r.children;return o?(0,n.jsx)(`p`,{"data-slot":`form-message`,id:a,className:e.cn(`text-destructive text-sm`,t),...r,children:o}):null}exports.Form=a,exports.FormControl=f,exports.FormDescription=p,exports.FormField=c,exports.FormItem=u,exports.FormLabel=d,exports.FormMessage=m,exports.useFormField=l;
 //# sourceMappingURL=form.cjs.map

package/dist/elements/form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.cjs","names":[],"sources":["../../src/elements/form.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useId, useMemo } from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\n\nimport { cn } from '@/lib/utils';\nimport { Label } from '@/elements/label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const value = useMemo(() => ({ name: props.name }), [props.name]);\n\n  return (\n    <FormFieldContext.Provider value={value}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n  const value = useMemo(() => ({ id }), [id]);\n\n  return (\n    <FormItemContext.Provider value={value}>\n      <div data-slot=\"form-item\" className={cn('grid gap-2', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn('data-[error=true]:text-destructive', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p data-slot=\"form-message\" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>\n      {body}\n    </p>\n  );\n}\n\nexport { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"mappings":"yWAkBA,IAAM,EAAO,EAAA,aASP,GAAA,EAAA,EAAA,eAAwD,EAAE,CAA0B,CAMpF,GAAA,EAAA,EAAA,eAAsD,EAAE,CAAyB,CAEjF,GAGJ,CACA,GAAG,KACuC,CAC1C,IAAM,GAAA,EAAA,EAAA,cAAuB,CAAE,KAAM,EAAM,KAAM,EAAG,CAAC,EAAM,KAAK,CAAC,CAEjE,OACE,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAAkC,kBAChC,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,GAAI,EAAS,CAAA,CACC,CAAA,EAI1B,MAAqB,CACzB,IAAM,GAAA,EAAA,EAAA,YAA0B,EAAiB,CAC3C,GAAA,EAAA,EAAA,YAAyB,EAAgB,CACzC,CAAE,kBAAA,EAAA,EAAA,iBAAkC,CACpC,GAAA,EAAA,EAAA,cAAyB,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,EAGH,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,GAAA,EAAA,EAAA,QAAY,CACZ,GAAA,EAAA,EAAA,cAAuB,CAAE,KAAI,EAAG,CAAC,EAAG,CAAC,CAE3C,OACE,EAAA,EAAA,KAAC,EAAgB,SAAjB,CAAiC,kBAC/B,EAAA,EAAA,KAAC,MAAD,CAAK,YAAU,YAAY,UAAW,EAAA,GAAG,aAAc,EAAU,CAAE,GAAI,EAAS,CAAA,CACvD,CAAA,CAI/B,SAAS,EAAU,CAAE,YAAW,GAAG,GAA2D,CAC5F,GAAM,CAAE,QAAO,cAAe,GAAc,CAE5C,OACE,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,YAAU,aACV,aAAY,CAAC,CAAC,EACd,UAAW,EAAA,GAAG,qCAAsC,EAAU,CAC9D,QAAS,EACT,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,GAAG,GAA4C,CACpE,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CAE9E,OACE,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,YAAU,eACV,GAAI,EACJ,mBAAmB,EAA4B,GAAG,EAAkB,GAAG,IAA5C,EAC3B,eAAc,CAAC,CAAC,EAChB,GAAI,EACJ,CAAA,CAIN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAA,EAAA,KAAC,IAAD,CACE,YAAU,mBACV,GAAI,EACJ,UAAW,EAAA,GAAG,gCAAiC,EAAU,CACzD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAoC,CACvE,GAAM,CAAE,QAAO,iBAAkB,GAAc,CACzC,EAAO,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,EAAM,SAM1D,OAJK,GAKH,EAAA,EAAA,KAAC,IAAD,CAAG,YAAU,eAAe,GAAI,EAAe,UAAW,EAAA,GAAG,2BAA4B,EAAU,CAAE,GAAI,WACtG,EACC,CAAA,CANG"}
+{"version":3,"file":"form.cjs","names":[],"sources":["../../src/elements/form.tsx"],"sourcesContent":["'use client';\n\nimport { Children, cloneElement, createContext, isValidElement, useContext, useId, useMemo } from 'react';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\n\nimport { cn } from '@/lib/utils';\nimport { Label } from '@/elements/label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const value = useMemo(() => ({ name: props.name }), [props.name]);\n\n  return (\n    <FormFieldContext.Provider value={value}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n  const value = useMemo(() => ({ id }), [id]);\n\n  return (\n    <FormItemContext.Provider value={value}>\n      <div data-slot=\"form-item\" className={cn('grid gap-2', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn('data-[error=true]:text-destructive', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ children }: { children: React.ReactNode }) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n  const child = Children.only(children);\n\n  if (!isValidElement<Record<string, unknown>>(child)) {\n    return <>{children}</>;\n  }\n\n  return cloneElement(child, {\n    'data-slot': 'form-control',\n    id: formItemId,\n    'aria-describedby': !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,\n    'aria-invalid': !!error,\n  });\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p data-slot=\"form-message\" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>\n      {body}\n    </p>\n  );\n}\n\nexport { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"mappings":"6QAgBA,IAAM,EAAO,EAAA,aASP,GAAA,EAAA,EAAA,eAAwD,EAAE,CAA0B,CAMpF,GAAA,EAAA,EAAA,eAAsD,EAAE,CAAyB,CAEjF,GAGJ,CACA,GAAG,KACuC,CAC1C,IAAM,GAAA,EAAA,EAAA,cAAuB,CAAE,KAAM,EAAM,KAAM,EAAG,CAAC,EAAM,KAAK,CAAC,CAEjE,OACE,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAAkC,kBAChC,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,GAAI,EAAS,CAAA,CACC,CAAA,EAI1B,MAAqB,CACzB,IAAM,GAAA,EAAA,EAAA,YAA0B,EAAiB,CAC3C,GAAA,EAAA,EAAA,YAAyB,EAAgB,CACzC,CAAE,kBAAA,EAAA,EAAA,iBAAkC,CACpC,GAAA,EAAA,EAAA,cAAyB,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,EAGH,SAAS,EAAS,CAAE,YAAW,GAAG,GAAsC,CACtE,IAAM,GAAA,EAAA,EAAA,QAAY,CACZ,GAAA,EAAA,EAAA,cAAuB,CAAE,KAAI,EAAG,CAAC,EAAG,CAAC,CAE3C,OACE,EAAA,EAAA,KAAC,EAAgB,SAAjB,CAAiC,kBAC/B,EAAA,EAAA,KAAC,MAAD,CAAK,YAAU,YAAY,UAAW,EAAA,GAAG,aAAc,EAAU,CAAE,GAAI,EAAS,CAAA,CACvD,CAAA,CAI/B,SAAS,EAAU,CAAE,YAAW,GAAG,GAA6C,CAC9E,GAAM,CAAE,QAAO,cAAe,GAAc,CAE5C,OACE,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,YAAU,aACV,aAAY,CAAC,CAAC,EACd,UAAW,EAAA,GAAG,qCAAsC,EAAU,CAC9D,QAAS,EACT,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAA2C,CAChE,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CACxE,EAAQ,EAAA,SAAS,KAAK,EAAS,CAMrC,OAJI,EAAA,EAAA,gBAAyC,EAAM,EAInD,EAAA,EAAA,cAAoB,EAAO,CACzB,YAAa,eACb,GAAI,EACJ,mBAAqB,EAA4B,GAAG,EAAkB,GAAG,IAA5C,EAC7B,eAAgB,CAAC,CAAC,EACnB,CAAC,EARO,EAAA,EAAA,KAAA,EAAA,SAAA,CAAG,WAAY,CAAA,CAW1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAA,EAAA,KAAC,IAAD,CACE,YAAU,mBACV,GAAI,EACJ,UAAW,EAAA,GAAG,gCAAiC,EAAU,CACzD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAoC,CACvE,GAAM,CAAE,QAAO,iBAAkB,GAAc,CACzC,EAAO,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,EAAM,SAM1D,OAJK,GAKH,EAAA,EAAA,KAAC,IAAD,CAAG,YAAU,eAAe,GAAI,EAAe,UAAW,EAAA,GAAG,2BAA4B,EAAU,CAAE,GAAI,WACtG,EACC,CAAA,CANG"}

package/dist/elements/form.d.ts

@@ -1,6 +1,5 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
 import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+import { Label } from '@/elements/label';
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
 declare const useFormField: () => {
@@ -16,8 +15,10 @@ declare const useFormField: () => {
     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 FormLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ children }: {
+    children: React.ReactNode;
+}): 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 | null;
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/elements/form.js

@@ -1,82 +1,79 @@
 "use client";
 import { cn as e } from "../lib/utils.js";
 import { Label as t } from "./label.js";
-import { jsx as n } from "react/jsx-runtime";
-import { Slot as r } from "@radix-ui/react-slot";
-import { createContext as i, useContext as a, useId as o, useMemo as s } from "react";
-import "@radix-ui/react-label";
-import { Controller as c, FormProvider as l, useFormContext as u, useFormState as d } from "react-hook-form";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+import { Children as i, cloneElement as a, createContext as o, isValidElement as s, useContext as c, useId as l, useMemo as u } from "react";
+import { Controller as d, FormProvider as f, useFormContext as p, useFormState as m } from "react-hook-form";
 //#region src/elements/form.tsx
-var f = l, p = i({}), m = i({}), h = ({ ...e }) => {
-	let t = s(() => ({ name: e.name }), [e.name]);
-	return /* @__PURE__ */ n(p.Provider, {
+var h = f, g = o({}), _ = o({}), v = ({ ...e }) => {
+	let t = u(() => ({ name: e.name }), [e.name]);
+	return /* @__PURE__ */ r(g.Provider, {
 		value: t,
-		children: /* @__PURE__ */ n(c, { ...e })
+		children: /* @__PURE__ */ r(d, { ...e })
 	});
-}, g = () => {
-	let e = a(p), t = a(m), { getFieldState: n } = u(), r = d({ name: e.name }), i = n(e.name, r);
+}, y = () => {
+	let e = c(g), t = c(_), { getFieldState: n } = p(), r = m({ name: e.name }), i = n(e.name, r);
 	if (!e) throw Error("useFormField should be used within <FormField>");
-	let { id: o } = t;
+	let { id: a } = t;
 	return {
-		id: o,
+		id: a,
 		name: e.name,
-		formItemId: `${o}-form-item`,
-		formDescriptionId: `${o}-form-item-description`,
-		formMessageId: `${o}-form-item-message`,
+		formItemId: `${a}-form-item`,
+		formDescriptionId: `${a}-form-item-description`,
+		formMessageId: `${a}-form-item-message`,
 		...i
 	};
 };
-function _({ className: t, ...r }) {
-	let i = o(), a = s(() => ({ id: i }), [i]);
-	return /* @__PURE__ */ n(m.Provider, {
+function b({ className: t, ...n }) {
+	let i = l(), a = u(() => ({ id: i }), [i]);
+	return /* @__PURE__ */ r(_.Provider, {
 		value: a,
-		children: /* @__PURE__ */ n("div", {
+		children: /* @__PURE__ */ r("div", {
 			"data-slot": "form-item",
 			className: e("grid gap-2", t),
-			...r
+			...n
 		})
 	});
 }
-function v({ className: r, ...i }) {
-	let { error: a, formItemId: o } = g();
-	return /* @__PURE__ */ n(t, {
+function x({ className: n, ...i }) {
+	let { error: a, formItemId: o } = y();
+	return /* @__PURE__ */ r(t, {
 		"data-slot": "form-label",
 		"data-error": !!a,
-		className: e("data-[error=true]:text-destructive", r),
+		className: e("data-[error=true]:text-destructive", n),
 		htmlFor: o,
 		...i
 	});
 }
-function y({ ...e }) {
-	let { error: t, formItemId: i, formDescriptionId: a, formMessageId: o } = g();
-	return /* @__PURE__ */ n(r, {
+function S({ children: e }) {
+	let { error: t, formItemId: o, formDescriptionId: c, formMessageId: l } = y(), u = i.only(e);
+	return s(u) ? a(u, {
 		"data-slot": "form-control",
-		id: i,
-		"aria-describedby": t ? `${a} ${o}` : a,
-		"aria-invalid": !!t,
-		...e
-	});
+		id: o,
+		"aria-describedby": t ? `${c} ${l}` : c,
+		"aria-invalid": !!t
+	}) : /* @__PURE__ */ r(n, { children: e });
 }
-function b({ className: t, ...r }) {
-	let { formDescriptionId: i } = g();
-	return /* @__PURE__ */ n("p", {
+function C({ className: t, ...n }) {
+	let { formDescriptionId: i } = y();
+	return /* @__PURE__ */ r("p", {
 		"data-slot": "form-description",
 		id: i,
 		className: e("text-muted-foreground text-sm", t),
-		...r
+		...n
 	});
 }
-function x({ className: t, ...r }) {
-	let { error: i, formMessageId: a } = g(), o = i ? String(i?.message ?? "") : r.children;
-	return o ? /* @__PURE__ */ n("p", {
+function w({ className: t, ...n }) {
+	let { error: i, formMessageId: a } = y(), o = i ? String(i?.message ?? "") : n.children;
+	return o ? /* @__PURE__ */ r("p", {
 		"data-slot": "form-message",
 		id: a,
 		className: e("text-destructive text-sm", t),
-		...r,
+		...n,
 		children: o
 	}) : null;
 }
 //#endregion
-export { f as Form, y as FormControl, b as FormDescription, h as FormField, _ as FormItem, v as FormLabel, x as FormMessage, g as useFormField };
+export { h as Form, S as FormControl, C as FormDescription, v as FormField, b as FormItem, x as FormLabel, w as FormMessage, y as useFormField };
 
 //# sourceMappingURL=form.js.map

package/dist/elements/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../src/elements/form.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useId, useMemo } from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\n\nimport { cn } from '@/lib/utils';\nimport { Label } from '@/elements/label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const value = useMemo(() => ({ name: props.name }), [props.name]);\n\n  return (\n    <FormFieldContext.Provider value={value}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n  const value = useMemo(() => ({ id }), [id]);\n\n  return (\n    <FormItemContext.Provider value={value}>\n      <div data-slot=\"form-item\" className={cn('grid gap-2', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn('data-[error=true]:text-destructive', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p data-slot=\"form-message\" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>\n      {body}\n    </p>\n  );\n}\n\nexport { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAO,GASP,IAAmB,EAAqC,EAAE,CAA0B,EAMpF,IAAkB,EAAoC,EAAE,CAAyB,EAEjF,KAGJ,EACA,GAAG,QACuC;CAC1C,IAAM,IAAQ,SAAe,EAAE,MAAM,EAAM,MAAM,GAAG,CAAC,EAAM,KAAK,CAAC;AAEjE,QACE,kBAAC,EAAiB,UAAlB;EAAkC;YAChC,kBAAC,GAAD,EAAY,GAAI,GAAS,CAAA;EACC,CAAA;GAI1B,UAAqB;CACzB,IAAM,IAAe,EAAW,EAAiB,EAC3C,IAAc,EAAW,EAAgB,EACzC,EAAE,qBAAkB,GAAgB,EACpC,IAAY,EAAa,EAAE,MAAM,EAAa,MAAM,CAAC,EACrD,IAAa,EAAc,EAAa,MAAM,EAAU;AAE9D,KAAI,CAAC,EACH,OAAU,MAAM,iDAAiD;CAGnE,IAAM,EAAE,UAAO;AAEf,QAAO;EACL;EACA,MAAM,EAAa;EACnB,YAAY,GAAG,EAAG;EAClB,mBAAmB,GAAG,EAAG;EACzB,eAAe,GAAG,EAAG;EACrB,GAAG;EACJ;;AAGH,SAAS,EAAS,EAAE,cAAW,GAAG,KAAsC;CACtE,IAAM,IAAK,GAAO,EACZ,IAAQ,SAAe,EAAE,OAAI,GAAG,CAAC,EAAG,CAAC;AAE3C,QACE,kBAAC,EAAgB,UAAjB;EAAiC;YAC/B,kBAAC,OAAD;GAAK,aAAU;GAAY,WAAW,EAAG,cAAc,EAAU;GAAE,GAAI;GAAS,CAAA;EACvD,CAAA;;AAI/B,SAAS,EAAU,EAAE,cAAW,GAAG,KAA2D;CAC5F,IAAM,EAAE,UAAO,kBAAe,GAAc;AAE5C,QACE,kBAAC,GAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAW,EAAG,sCAAsC,EAAU;EAC9D,SAAS;EACT,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,GAAG,KAA4C;CACpE,IAAM,EAAE,UAAO,eAAY,sBAAmB,qBAAkB,GAAc;AAE9E,QACE,kBAAC,GAAD;EACE,aAAU;EACV,IAAI;EACJ,oBAAmB,IAA4B,GAAG,EAAkB,GAAG,MAA5C;EAC3B,gBAAc,CAAC,CAAC;EAChB,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAoC;CAC3E,IAAM,EAAE,yBAAsB,GAAc;AAE5C,QACE,kBAAC,KAAD;EACE,aAAU;EACV,IAAI;EACJ,WAAW,EAAG,iCAAiC,EAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,cAAW,GAAG,KAAoC;CACvE,IAAM,EAAE,UAAO,qBAAkB,GAAc,EACzC,IAAO,IAAQ,OAAO,GAAO,WAAW,GAAG,GAAG,EAAM;AAM1D,QAJK,IAKH,kBAAC,KAAD;EAAG,aAAU;EAAe,IAAI;EAAe,WAAW,EAAG,4BAA4B,EAAU;EAAE,GAAI;YACtG;EACC,CAAA,GANG"}
+{"version":3,"file":"form.js","names":[],"sources":["../../src/elements/form.tsx"],"sourcesContent":["'use client';\n\nimport { Children, cloneElement, createContext, isValidElement, useContext, useId, useMemo } from 'react';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\n\nimport { cn } from '@/lib/utils';\nimport { Label } from '@/elements/label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const value = useMemo(() => ({ name: props.name }), [props.name]);\n\n  return (\n    <FormFieldContext.Provider value={value}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = useId();\n  const value = useMemo(() => ({ id }), [id]);\n\n  return (\n    <FormItemContext.Provider value={value}>\n      <div data-slot=\"form-item\" className={cn('grid gap-2', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn('data-[error=true]:text-destructive', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ children }: { children: React.ReactNode }) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n  const child = Children.only(children);\n\n  if (!isValidElement<Record<string, unknown>>(child)) {\n    return <>{children}</>;\n  }\n\n  return cloneElement(child, {\n    'data-slot': 'form-control',\n    id: formItemId,\n    'aria-describedby': !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,\n    'aria-invalid': !!error,\n  });\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p data-slot=\"form-message\" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>\n      {body}\n    </p>\n  );\n}\n\nexport { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"mappings":";;;;;;;AAgBA,IAAM,IAAO,GASP,IAAmB,EAAqC,EAAE,CAA0B,EAMpF,IAAkB,EAAoC,EAAE,CAAyB,EAEjF,KAGJ,EACA,GAAG,QACuC;CAC1C,IAAM,IAAQ,SAAe,EAAE,MAAM,EAAM,MAAM,GAAG,CAAC,EAAM,KAAK,CAAC;AAEjE,QACE,kBAAC,EAAiB,UAAlB;EAAkC;YAChC,kBAAC,GAAD,EAAY,GAAI,GAAS,CAAA;EACC,CAAA;GAI1B,UAAqB;CACzB,IAAM,IAAe,EAAW,EAAiB,EAC3C,IAAc,EAAW,EAAgB,EACzC,EAAE,qBAAkB,GAAgB,EACpC,IAAY,EAAa,EAAE,MAAM,EAAa,MAAM,CAAC,EACrD,IAAa,EAAc,EAAa,MAAM,EAAU;AAE9D,KAAI,CAAC,EACH,OAAU,MAAM,iDAAiD;CAGnE,IAAM,EAAE,UAAO;AAEf,QAAO;EACL;EACA,MAAM,EAAa;EACnB,YAAY,GAAG,EAAG;EAClB,mBAAmB,GAAG,EAAG;EACzB,eAAe,GAAG,EAAG;EACrB,GAAG;EACJ;;AAGH,SAAS,EAAS,EAAE,cAAW,GAAG,KAAsC;CACtE,IAAM,IAAK,GAAO,EACZ,IAAQ,SAAe,EAAE,OAAI,GAAG,CAAC,EAAG,CAAC;AAE3C,QACE,kBAAC,EAAgB,UAAjB;EAAiC;YAC/B,kBAAC,OAAD;GAAK,aAAU;GAAY,WAAW,EAAG,cAAc,EAAU;GAAE,GAAI;GAAS,CAAA;EACvD,CAAA;;AAI/B,SAAS,EAAU,EAAE,cAAW,GAAG,KAA6C;CAC9E,IAAM,EAAE,UAAO,kBAAe,GAAc;AAE5C,QACE,kBAAC,GAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAW,EAAG,sCAAsC,EAAU;EAC9D,SAAS;EACT,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,eAA2C;CAChE,IAAM,EAAE,UAAO,eAAY,sBAAmB,qBAAkB,GAAc,EACxE,IAAQ,EAAS,KAAK,EAAS;AAMrC,QAJK,EAAwC,EAAM,GAI5C,EAAa,GAAO;EACzB,aAAa;EACb,IAAI;EACJ,oBAAqB,IAA4B,GAAG,EAAkB,GAAG,MAA5C;EAC7B,gBAAgB,CAAC,CAAC;EACnB,CAAC,GARO,kBAAA,GAAA,EAAG,aAAY,CAAA;;AAW1B,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAoC;CAC3E,IAAM,EAAE,yBAAsB,GAAc;AAE5C,QACE,kBAAC,KAAD;EACE,aAAU;EACV,IAAI;EACJ,WAAW,EAAG,iCAAiC,EAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,cAAW,GAAG,KAAoC;CACvE,IAAM,EAAE,UAAO,qBAAkB,GAAc,EACzC,IAAO,IAAQ,OAAO,GAAO,WAAW,GAAG,GAAG,EAAM;AAM1D,QAJK,IAKH,kBAAC,KAAD;EAAG,aAAU;EAAe,IAAI;EAAe,WAAW,EAAG,4BAA4B,EAAU;EAAE,GAAI;YACtG;EACC,CAAA,GANG"}

package/dist/elements/input-group.cjs

@@ -0,0 +1,2 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`),n=require(`./textarea.cjs`),r=require(`./button.cjs`),i=require(`./input.cjs`);let a=require(`react/jsx-runtime`),o=require(`class-variance-authority`),s=require(`react`);s=e.__toESM(s,1);function c({className:e,...n}){return(0,a.jsx)(`div`,{"data-slot":`input-group`,role:`group`,className:t.cn(`group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5`,e),...n})}var l=(0,o.cva)(`flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4`,{variants:{align:{"inline-start":`order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]`,"inline-end":`order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]`,"block-start":`order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2`,"block-end":`order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2`}},defaultVariants:{align:`inline-start`}});function u({className:e,align:n=`inline-start`,...r}){return(0,a.jsx)(`div`,{role:`group`,"data-slot":`input-group-addon`,"data-align":n,className:t.cn(l({align:n}),e),onClick:e=>{e.target.closest(`button`)||e.currentTarget.parentElement?.querySelector(`input`)?.focus()},...r})}var d=(0,o.cva)(`flex items-center gap-2 text-sm shadow-none`,{variants:{size:{xs:`h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5`,sm:``,"icon-xs":`size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0`,"icon-sm":`size-8 p-0 has-[>svg]:p-0`}},defaultVariants:{size:`xs`}});function f({className:e,type:n=`button`,variant:i=`ghost`,size:o=`xs`,...s}){return(0,a.jsx)(r.Button,{type:n,"data-size":o,variant:i,className:t.cn(d({size:o}),e),...s})}function p({className:e,...n}){return(0,a.jsx)(`span`,{className:t.cn(`flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4`,e),...n})}function m({className:e,...n}){return(0,a.jsx)(i.Input,{"data-slot":`input-group-control`,className:t.cn(`flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent`,e),...n})}function h({className:e,...r}){return(0,a.jsx)(n.Textarea,{"data-slot":`input-group-control`,className:t.cn(`flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent`,e),...r})}exports.InputGroup=c,exports.InputGroupAddon=u,exports.InputGroupButton=f,exports.InputGroupInput=m,exports.InputGroupText=p,exports.InputGroupTextarea=h;
+//# sourceMappingURL=input-group.cjs.map

package/dist/elements/input-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.cjs","names":[],"sources":["../../src/elements/input-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Textarea } from '@/elements/textarea';\nimport { cn } from '@/lib/utils';\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n        'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n        'block-start':\n          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n        'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    // The click handler is a pointer-only convenience that forwards focus to the sibling input,\n    // which is itself the keyboard-accessible control — no keyboard handler is needed.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: 'button' | 'submit' | 'reset';\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };\n"],"mappings":"+VAUA,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,YAAU,cACV,KAAK,QACL,UAAW,EAAA,GACT,wlCACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,IAAM,GAAA,EAAA,EAAA,KACJ,0PACA,CACE,SAAU,CACR,MAAO,CACL,eAAgB,uEAChB,aAAc,sEACd,cACE,oGACF,YAAa,mGACd,CACF,CACD,gBAAiB,CACf,MAAO,eACR,CACF,CACF,CAED,SAAS,EAAgB,CACvB,YACA,QAAQ,eACR,GAAG,GAC0E,CAC7E,OAIE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,QACL,YAAU,oBACV,aAAY,EACZ,UAAW,EAAA,GAAG,EAAwB,CAAE,QAAO,CAAC,CAAE,EAAU,CAC5D,QAAU,GAAM,CACT,EAAE,OAAuB,QAAQ,SAAS,EAG/C,EAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO,EAEhE,GAAI,EACJ,CAAA,CAIN,IAAM,GAAA,EAAA,EAAA,KAA+B,8CAA+C,CAClF,SAAU,CACR,KAAM,CACJ,GAAI,4FACJ,GAAI,GACJ,UAAW,8DACX,UAAW,4BACZ,CACF,CACD,gBAAiB,CACf,KAAM,KACP,CACF,CAAC,CAEF,SAAS,EAAiB,CACxB,YACA,OAAO,SACP,UAAU,QACV,OAAO,KACP,GAAG,GAIA,CACH,OACE,EAAA,EAAA,KAAC,EAAA,OAAD,CACQ,OACN,YAAW,EACF,UACT,UAAW,EAAA,GAAG,EAAyB,CAAE,OAAM,CAAC,CAAE,EAAU,CAC5D,GAAI,EACJ,CAAA,CAIN,SAAS,EAAe,CAAE,YAAW,GAAG,GAAuC,CAC7E,OACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EAAA,GACT,yHACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAwC,CAC/E,OACE,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,YAAU,sBACV,UAAW,EAAA,GACT,mLACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAmB,CAAE,YAAW,GAAG,GAA2C,CACrF,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,YAAU,sBACV,UAAW,EAAA,GACT,oMACA,EACD,CACD,GAAI,EACJ,CAAA"}

package/dist/elements/input-group.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from '@/elements/button';
+declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => 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" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
+}): 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, InputGroupText, InputGroupInput, InputGroupTextarea };

package/dist/elements/input-group.js

@@ -0,0 +1,80 @@
+"use client";
+import { cn as e } from "../lib/utils.js";
+import { Textarea as t } from "./textarea.js";
+import { Button as n } from "./button.js";
+import { Input as r } from "./input.js";
+import { jsx as i } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
+import "react";
+//#region src/elements/input-group.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: e("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", t),
+		...n
+	});
+}
+var s = a("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function c({ className: t, align: n = "inline-start", ...r }) {
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": n,
+		className: e(s({ align: n }), t),
+		onClick: (e) => {
+			e.target.closest("button") || e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...r
+	});
+}
+var l = a("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function u({ className: t, type: r = "button", variant: a = "ghost", size: o = "xs", ...s }) {
+	return /* @__PURE__ */ i(n, {
+		type: r,
+		"data-size": o,
+		variant: a,
+		className: e(l({ size: o }), t),
+		...s
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ i("span", {
+		className: e("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ i(r, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...n
+	});
+}
+function p({ className: n, ...r }) {
+	return /* @__PURE__ */ i(t, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", n),
+		...r
+	});
+}
+//#endregion
+export { o as InputGroup, c as InputGroupAddon, u as InputGroupButton, f as InputGroupInput, d as InputGroupText, p as InputGroupTextarea };
+
+//# sourceMappingURL=input-group.js.map

package/dist/elements/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../src/elements/input-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Textarea } from '@/elements/textarea';\nimport { cn } from '@/lib/utils';\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n        'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n        'block-start':\n          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n        'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    // The click handler is a pointer-only convenience that forwards focus to the sibling input,\n    // which is itself the keyboard-accessible control — no keyboard handler is needed.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest('button')) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = 'button',\n  variant = 'ghost',\n  size = 'xs',\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: 'button' | 'submit' | 'reset';\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };\n"],"mappings":";;;;;;;;;AAUA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;AACxE,QACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,EACT,ylCACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,IAAM,IAA0B,EAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aAAa;EACd,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,EAAgB,EACvB,cACA,WAAQ,gBACR,GAAG,KAC0E;AAC7E,QAIE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,EAAG,EAAwB,EAAE,UAAO,CAAC,EAAE,EAAU;EAC5D,UAAU,MAAM;AACT,KAAE,OAAuB,QAAQ,SAAS,IAG/C,EAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEhE,GAAI;EACJ,CAAA;;AAIN,IAAM,IAA2B,EAAI,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;EACZ,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAEF,SAAS,EAAiB,EACxB,cACA,UAAO,UACP,aAAU,SACV,UAAO,MACP,GAAG,KAIA;AACH,QACE,kBAAC,GAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,EAAG,EAAyB,EAAE,SAAM,CAAC,EAAE,EAAU;EAC5D,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAe,EAAE,cAAW,GAAG,KAAuC;AAC7E,QACE,kBAAC,QAAD;EACE,WAAW,EACT,0HACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAwC;AAC/E,QACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,oLACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAmB,EAAE,cAAW,GAAG,KAA2C;AACrF,QACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,qMACA,EACD;EACD,GAAI;EACJ,CAAA"}

package/dist/elements/input.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react/jsx-runtime`);function n({className:n,type:r,...i}){return(0,t.jsx)(`input`,{type:r,"data-slot":`input`,className:e.cn(`file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,n),...i})}exports.Input=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react/jsx-runtime`),n=require(`@base-ui/react/input`);function r({className:r,type:i,...a}){return(0,t.jsx)(n.Input,{type:i,"data-slot":`input`,className:e.cn(`h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40`,r),...a})}exports.Input=r;
 //# sourceMappingURL=input.cjs.map

package/dist/elements/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":[],"sources":["../../src/elements/input.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":"uLAEA,SAAS,EAAM,CAAE,YAAW,OAAM,GAAG,GAAwC,CAC3E,OACE,EAAA,EAAA,KAAC,QAAD,CACQ,OACN,YAAU,QACV,UAAW,EAAA,GACT,kcACA,gFACA,yGACA,EACD,CACD,GAAI,EACJ,CAAA"}
+{"version":3,"file":"input.cjs","names":[],"sources":["../../src/elements/input.tsx"],"sourcesContent":["import { Input as InputPrimitive } from '@base-ui/react/input';\n\nimport { cn } from '@/lib/utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":"yNAIA,SAAS,EAAM,CAAE,YAAW,OAAM,GAAG,GAAwC,CAC3E,OACE,EAAA,EAAA,KAAC,EAAA,MAAD,CACQ,OACN,YAAU,QACV,UAAW,EAAA,GACT,4oBACA,EACD,CACD,GAAI,EACJ,CAAA"}

package/dist/elements/input.js

@@ -1,15 +1,16 @@
 import { cn as e } from "../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
+import { Input as n } from "@base-ui/react/input";
 //#region src/elements/input.tsx
-function n({ className: n, type: r, ...i }) {
-	return /* @__PURE__ */ t("input", {
-		type: r,
+function r({ className: r, type: i, ...a }) {
+	return /* @__PURE__ */ t(n, {
+		type: i,
 		"data-slot": "input",
-		className: e("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", n),
-		...i
+		className: e("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", r),
+		...a
 	});
 }
 //#endregion
-export { n as Input };
+export { r as Input };
 
 //# sourceMappingURL=input.js.map

package/dist/elements/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/elements/input.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;AAEA,SAAS,EAAM,EAAE,cAAW,SAAM,GAAG,KAAwC;AAC3E,QACE,kBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,EACT,mcACA,iFACA,0GACA,EACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"input.js","names":[],"sources":["../../src/elements/input.tsx"],"sourcesContent":["import { Input as InputPrimitive } from '@base-ui/react/input';\n\nimport { cn } from '@/lib/utils';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;;AAIA,SAAS,EAAM,EAAE,cAAW,SAAM,GAAG,KAAwC;AAC3E,QACE,kBAAC,GAAD;EACQ;EACN,aAAU;EACV,WAAW,EACT,6oBACA,EACD;EACD,GAAI;EACJ,CAAA"}

package/dist/elements/label.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`);let n=require(`react/jsx-runtime`),r=require(`@radix-ui/react-label`);r=e.__toESM(r,1);function i({className:e,...i}){return(0,n.jsx)(r.Root,{"data-slot":`label`,className:t.cn(`flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50`,e),...i})}exports.Label=i;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`);let n=require(`react/jsx-runtime`),r=require(`react`);r=e.__toESM(r,1);function i({className:e,...r}){return(0,n.jsx)(`label`,{"data-slot":`label`,className:t.cn(`flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50`,e),...r})}exports.Label=i;
 //# sourceMappingURL=label.cjs.map

package/dist/elements/label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"label.cjs","names":[],"sources":["../../src/elements/label.tsx"],"sourcesContent":["'use client';\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\n\nimport { cn } from '@/lib/utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":"0PAMA,SAAS,EAAM,CAAE,YAAW,GAAG,GAA2D,CACxF,OACE,EAAA,EAAA,KAAC,EAAe,KAAhB,CACE,YAAU,QACV,UAAW,EAAA,GACT,sNACA,EACD,CACD,GAAI,EACJ,CAAA"}
+{"version":3,"file":"label.cjs","names":[],"sources":["../../src/elements/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<'label'>) {\n  return (\n    // eslint-disable-next-line jsx-a11y/label-has-associated-control\n    <label\n      data-slot=\"label\"\n      className={cn(\n        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":"0OAMA,SAAS,EAAM,CAAE,YAAW,GAAG,GAAwC,CACrE,OAEE,EAAA,EAAA,KAAC,QAAD,CACE,YAAU,QACV,UAAW,EAAA,GACT,sNACA,EACD,CACD,GAAI,EACJ,CAAA"}

package/dist/elements/label.d.ts

@@ -1,3 +1,3 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+declare function Label({ className, ...props }: React.ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
 export { Label };