@dirstack/ui 1.0.0

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

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { ControllerProps, ControllerRenderProps, FieldPath, FieldValues } from "react-hook-form";
+//#region src/components/form-row.d.ts
+/**
+ * `stack` puts the label above a full-width control, for dialogs and the checkout form;
+ * `rows` puts the label and its description beside the control, for a `divide-y`
+ * settings-style body.
+ */
+export type FormRowLayout = "rows" | "stack";
+type FormRowProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues> = Omit<ControllerProps<TFieldValues, TName, TTransformedValues>, "render"> & {
+  label: ReactNode;
+  description?: ReactNode;
+  isRequired?: boolean;
+  layout?: FormRowLayout;
+  className?: string;
+  /**
+   * Extra classes for the label itself, e.g. `text-xs` in a dense fieldset or
+   * `sr-only` where the surrounding row already names the control.
+   */
+  labelClassName?: string;
+  /**
+   * Extra classes for the value column in `rows` layout, e.g. `sm:items-end`
+   * to keep a switch at its intrinsic width instead of stretching.
+   */
+  valueClassName?: string;
+  children: (field: ControllerRenderProps<TFieldValues, TName>) => ReactNode;
+};
+/**
+ * One labelled form field in whichever frame the surrounding form asked for. Both layouts
+ * keep the `FormItem` / `FormLabel` / `FormControl` / `FormMessage` wiring, so validation,
+ * `htmlFor`, and the `aria-describedby` links behave the same either way.
+ */
+export declare function FormRow<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>({ label, description, isRequired, layout, className, labelClassName, valueClassName, children, ...props }: FormRowProps<TFieldValues, TName, TTransformedValues>): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=form-row.d.ts.map

package/dist/components/form-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-row.d.ts","names":[],"sources":["../../src/components/form-row.tsx"],"mappings":";;;;;;;;YAsBY;KAEP,aACH,qBAAqB,cAAc,aACnC,cAAc,UAAU,gBAAgB,UAAU,eAClD,qBAAqB,gBACnB,KAAK,gBAAgB,cAAc,OAAO;EAC5C,OAAO;EACP,cAAc;EACd;EACA,SAAS;EACT;;;;;EAKA;;;;;EAKA;EACA,WAAW,OAAO,sBAAsB,cAAc,WAAW;;;;;;;wBAQnD,QACd,qBAAqB,cAAc,aACnC,cAAc,UAAU,gBAAgB,UAAU,eAClD,qBAAqB,gBAErB,OACA,aACA,YACA,QACA,WACA,gBACA,gBACA,aACG,SACF,aAAa,cAAc,OAAO,sCAAmB,IAAA"}

package/dist/components/form-row.js

@@ -0,0 +1,46 @@
+import { DetailRow } from "./detail-row.js";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form-row.tsx
+/**
+* One labelled form field in whichever frame the surrounding form asked for. Both layouts
+* keep the `FormItem` / `FormLabel` / `FormControl` / `FormMessage` wiring, so validation,
+* `htmlFor`, and the `aria-describedby` links behave the same either way.
+*/
+function FormRow({ label, description, isRequired, layout = "stack", className, labelClassName, valueClassName, children, ...props }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		...props,
+		render: ({ field }) => {
+			if (layout === "rows") return /* @__PURE__ */ jsxs(DetailRow, {
+				density: "form",
+				render: /* @__PURE__ */ jsx(FormItem, {}),
+				label: /* @__PURE__ */ jsx(FormLabel, {
+					isRequired,
+					className: labelClassName,
+					children: label
+				}),
+				description: description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+				className,
+				valueClassName,
+				children: [/* @__PURE__ */ jsx(FormControl, { children: children(field) }), /* @__PURE__ */ jsx(FormMessage, {})]
+			});
+			return /* @__PURE__ */ jsxs(FormItem, {
+				className,
+				children: [
+					/* @__PURE__ */ jsx(FormLabel, {
+						isRequired,
+						className: labelClassName,
+						children: label
+					}),
+					/* @__PURE__ */ jsx(FormControl, { children: children(field) }),
+					description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+					/* @__PURE__ */ jsx(FormMessage, {})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { FormRow };
+
+//# sourceMappingURL=form-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-row.js","names":[],"sources":["../../src/components/form-row.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport type {\n  ControllerProps,\n  ControllerRenderProps,\n  FieldPath,\n  FieldValues,\n} from \"react-hook-form\"\nimport { DetailRow } from \"~/components/detail-row\"\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"~/components/form\"\n\n/**\n * `stack` puts the label above a full-width control, for dialogs and the checkout form;\n * `rows` puts the label and its description beside the control, for a `divide-y`\n * settings-style body.\n */\nexport type FormRowLayout = \"rows\" | \"stack\"\n\ntype FormRowProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n> = Omit<ControllerProps<TFieldValues, TName, TTransformedValues>, \"render\"> & {\n  label: ReactNode\n  description?: ReactNode\n  isRequired?: boolean\n  layout?: FormRowLayout\n  className?: string\n  /**\n   * Extra classes for the label itself, e.g. `text-xs` in a dense fieldset or\n   * `sr-only` where the surrounding row already names the control.\n   */\n  labelClassName?: string\n  /**\n   * Extra classes for the value column in `rows` layout, e.g. `sm:items-end`\n   * to keep a switch at its intrinsic width instead of stretching.\n   */\n  valueClassName?: string\n  children: (field: ControllerRenderProps<TFieldValues, TName>) => ReactNode\n}\n\n/**\n * One labelled form field in whichever frame the surrounding form asked for. Both layouts\n * keep the `FormItem` / `FormLabel` / `FormControl` / `FormMessage` wiring, so validation,\n * `htmlFor`, and the `aria-describedby` links behave the same either way.\n */\nexport function FormRow<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n>({\n  label,\n  description,\n  isRequired,\n  layout = \"stack\",\n  className,\n  labelClassName,\n  valueClassName,\n  children,\n  ...props\n}: FormRowProps<TFieldValues, TName, TTransformedValues>) {\n  return (\n    <FormField\n      {...props}\n      render={({ field }) => {\n        if (layout === \"rows\") {\n          return (\n            <DetailRow\n              density=\"form\"\n              render={<FormItem />}\n              label={\n                <FormLabel isRequired={isRequired} className={labelClassName}>\n                  {label}\n                </FormLabel>\n              }\n              description={description && <FormDescription>{description}</FormDescription>}\n              className={className}\n              valueClassName={valueClassName}\n            >\n              <FormControl>{children(field)}</FormControl>\n\n              <FormMessage />\n            </DetailRow>\n          )\n        }\n\n        return (\n          <FormItem className={className}>\n            <FormLabel isRequired={isRequired} className={labelClassName}>\n              {label}\n            </FormLabel>\n\n            <FormControl>{children(field)}</FormControl>\n\n            {description && <FormDescription>{description}</FormDescription>}\n\n            <FormMessage />\n          </FormItem>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAoDA,SAAgB,QAId,EACA,OACA,aACA,YACA,SAAS,SACT,WACA,gBACA,gBACA,UACA,GAAG,SACqD;CACxD,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,SAAS,EAAE,YAAY;GACrB,IAAI,WAAW,QACb,OACE,qBAAC,WAAD;IACE,SAAQ;IACR,QAAQ,oBAAC,UAAD,CAAW,CAAA;IACnB,OACE,oBAAC,WAAD;KAAuB;KAAY,WAAW;KAC3C,UAAA;IACQ,CAAA;IAEb,aAAa,eAAe,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA;IAChE;IACK;IAVlB,UAAA,CAYE,oBAAC,aAAD,EAAA,UAAc,SAAS,KAAK,EAAe,CAAA,GAE3C,oBAAC,aAAD,CAAc,CAAA,CACL;;GAIf,OACE,qBAAC,UAAD;IAAqB;IAArB,UAAA;KACE,oBAAC,WAAD;MAAuB;MAAY,WAAW;MAC3C,UAAA;KACQ,CAAA;KAEX,oBAAC,aAAD,EAAA,UAAc,SAAS,KAAK,EAAe,CAAA;KAE1C,eAAe,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA;KAE/D,oBAAC,aAAD,CAAc,CAAA;IACN;;EAEd;CACD,CAAA;AAEL"}

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

@@ -0,0 +1,24 @@
+import { useRender } from "@base-ui/react/use-render";
+import { ReactNode } from "react";
+//#region src/components/form-section.d.ts
+type FormSectionProps = Omit<useRender.ComponentProps<"section">, "title"> & {
+  id?: string;
+  /**
+   * Optional heading. Leave it out inside the settings dialog, whose header owns the title.
+   */
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /**
+   * Right-aligned actions after the rows, e.g. a save button. Rendered as the last row.
+   */
+  footer?: ReactNode;
+};
+/**
+ * A block of settings: one padded container whose children (optional heading, the rows,
+ * optional footer) stack with hairlines between them. Renders as a `<form>` via `render`
+ * when the rows are fields, so the form is the only wrapper.
+ */
+export declare function FormSection({ id, title, description, actions, footer, className, children, render, ...props }: FormSectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//# sourceMappingURL=form-section.d.ts.map

package/dist/components/form-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-section.d.ts","names":[],"sources":["../../src/components/form-section.tsx"],"mappings":";;;KAKK,mBAAmB,KAAK,UAAU;EACrC;;;;EAIA,QAAQ;EACR,cAAc;EACd,UAAU;;;;EAIV,SAAS;;;;;;;wBAQK,cACd,IACA,OACA,aACA,SACA,QACA,WACA,UACA,WACG,SACF,mCAAgB,+CAAA"}

package/dist/components/form-section.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/variants.js";
+import { SectionHeader } from "./section-header.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/form-section.tsx
+/**
+* A block of settings: one padded container whose children (optional heading, the rows,
+* optional footer) stack with hairlines between them. Renders as a `<form>` via `render`
+* when the rows are fields, so the form is the only wrapper.
+*/
+function FormSection({ id, title, description, actions, footer, className, children, render, ...props }) {
+	return useRender({
+		render,
+		defaultTagName: "section",
+		props: {
+			id,
+			className: cn("flex flex-col divide-y px-5 md:px-6", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				(title || actions) && /* @__PURE__ */ jsx(SectionHeader, {
+					size: "panel",
+					className: "py-4",
+					title,
+					description,
+					actions
+				}),
+				children,
+				footer && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end py-5",
+					children: footer
+				})
+			] }),
+			...props
+		}
+	});
+}
+//#endregion
+export { FormSection };
+
+//# sourceMappingURL=form-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-section.js","names":[],"sources":["../../src/components/form-section.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport type { ReactNode } from \"react\"\nimport { SectionHeader } from \"~/components/section-header\"\nimport { cn } from \"~/lib/variants\"\n\ntype FormSectionProps = Omit<useRender.ComponentProps<\"section\">, \"title\"> & {\n  id?: string\n  /**\n   * Optional heading. Leave it out inside the settings dialog, whose header owns the title.\n   */\n  title?: ReactNode\n  description?: ReactNode\n  actions?: ReactNode\n  /**\n   * Right-aligned actions after the rows, e.g. a save button. Rendered as the last row.\n   */\n  footer?: ReactNode\n}\n\n/**\n * A block of settings: one padded container whose children (optional heading, the rows,\n * optional footer) stack with hairlines between them. Renders as a `<form>` via `render`\n * when the rows are fields, so the form is the only wrapper.\n */\nexport function FormSection({\n  id,\n  title,\n  description,\n  actions,\n  footer,\n  className,\n  children,\n  render,\n  ...props\n}: FormSectionProps) {\n  return useRender({\n    render,\n    defaultTagName: \"section\",\n    props: {\n      id,\n      className: cn(\"flex flex-col divide-y px-5 md:px-6\", className),\n      children: (\n        <>\n          {(title || actions) && (\n            <SectionHeader\n              size=\"panel\"\n              className=\"py-4\"\n              title={title}\n              description={description}\n              actions={actions}\n            />\n          )}\n\n          {children}\n\n          {footer && <div className=\"flex justify-end py-5\">{footer}</div>}\n        </>\n      ),\n      ...props,\n    },\n  })\n}\n"],"mappings":";;;;;;;;;;AAwBA,SAAgB,YAAY,EAC1B,IACA,OACA,aACA,SACA,QACA,WACA,UACA,QACA,GAAG,SACgB;CACnB,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GACL;GACA,WAAW,GAAG,uCAAuC,SAAS;GAC9D,UACE,qBAAA,UAAA,EAAA,UAAA;KACI,SAAS,YACT,oBAAC,eAAD;KACE,MAAK;KACL,WAAU;KACH;KACM;KACJ;IACV,CAAA;IAGF;IAEA,UAAU,oBAAC,OAAD;KAAK,WAAU;KAAyB,UAAA;IAAY,CAAA;GAC/D,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;AACH"}

package/dist/components/form.d.ts

@@ -0,0 +1,28 @@
+import { Stack } from "./stack.js";
+import { Label } from "./label.js";
+import { useRender } from "@base-ui/react/use-render";
+import { ComponentProps } from "react";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+//#region src/components/form.d.ts
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>({ ...props }: ControllerProps<TFieldValues, TName, TTransformedValues>): import("react").JSX.Element;
+declare function useFormField(): {
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: import("react-hook-form").FieldError | undefined;
+  id: string;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+};
+declare function FormItem({ direction, ...props }: ComponentProps<typeof Stack>): import("react").JSX.Element;
+declare function FormLabel({ ...props }: ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FormControl({ children, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function FormDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function FormMessage({ className, children, ...props }: ComponentProps<"p">): import("react").JSX.Element | null;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","names":[],"sources":["../../src/components/form.tsx"],"mappings":";;;;;;cAiBM,OAAI,qBAAA,aAAA,gBAAA,qBAAA,gBAAA,UAAA,OAAA,WAAA,WAAA,eAAA,UAAA,aAAA,UAAA,WAAA,SAAA,WAAA,YAAA,OAAA,oBAAA,cAAA,YAAA,SAAA,UAAA,UAAA,uCAAA,kBAAA,cAAA,UAAA,wBAAA,MAAA,IAAA;iBAWD,UACP,qBAAqB,cAAc,aACnC,cAAc,UAAU,gBAAgB,UAAU,eAClD,qBAAqB,mBAChB,SAAS,gBAAgB,cAAc,OAAO,sCAAmB,IAAA;iBAQ/D;;;;;;;;;;;;iBAgCA,WAAW,cAAyB,SAAS,sBAAsB,yBAAM,IAAA;iBAUzE,eAAe,SAAS,sBAAsB,yBAAM,IAAA;iBAMpD,cAAc,UAAU,WAAW,SAAS,UAAU,wCAAqB,+CAAA;iBAgB3E,kBAAkB,cAAc,SAAS,sCAAmB,IAAA;iBAM5D,cAAc,WAAW,aAAa,SAAS,sCAAmB,IAAA"}

package/dist/components/form.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../lib/variants.js";
+import { Stack } from "./stack.js";
+import { descriptionClasses } from "../lib/classes.js";
+import { Label } from "./label.js";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { createContext, useContext, useId } from "react";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+//#region src/components/form.tsx
+const Form = FormProvider;
+const FormFieldContext = createContext(null);
+function FormField({ ...props }) {
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: { name: props.name },
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+}
+function useFormField() {
+	const fieldContext = useContext(FormFieldContext);
+	const itemContext = useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	if (!itemContext) throw new Error("useFormField should be used within <FormItem>");
+	const fieldState = getFieldState(fieldContext.name, formState);
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+}
+const FormItemContext = createContext(null);
+function FormItem({ direction = "column", ...props }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: { id },
+		children: /* @__PURE__ */ jsx(Stack, {
+			direction,
+			...props
+		})
+	});
+}
+function FormLabel({ ...props }) {
+	const { formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(Label, {
+		htmlFor: formItemId,
+		...props
+	});
+}
+function FormControl({ children, render, ...props }) {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return useRender({
+		render: render ?? children,
+		props: {
+			id: formItemId,
+			"aria-describedby": !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,
+			"aria-invalid": !!error,
+			...props
+		}
+	});
+}
+function FormDescription({ className, ...props }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx("p", {
+		id: formDescriptionId,
+		className: cn(descriptionClasses, className),
+		...props
+	});
+}
+function FormMessage({ className, children, ...props }) {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx("p", {
+		id: formMessageId,
+		className: cn("text-control font-medium text-danger", className),
+		...props,
+		children: body
+	});
+}
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+
+//# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../../src/components/form.tsx"],"sourcesContent":["\"use client\"\n\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { type ComponentProps, createContext, useContext, useId } from \"react\"\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\nimport { Label } from \"~/components/label\"\nimport { Stack } from \"~/components/stack\"\nimport { descriptionClasses } from \"~/lib/classes\"\nimport { cn } from \"~/lib/variants\"\n\nconst Form = FormProvider\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null)\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n  TTransformedValues = TFieldValues,\n>({ ...props }: ControllerProps<TFieldValues, TName, TTransformedValues>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nfunction useFormField() {\n  const fieldContext = useContext(FormFieldContext)\n  const itemContext = useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  if (!itemContext) {\n    throw new Error(\"useFormField should be used within <FormItem>\")\n  }\n\n  const fieldState = getFieldState(fieldContext.name, formState)\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\ninterface FormItemContextValue {\n  id: string\n}\n\nconst FormItemContext = createContext<FormItemContextValue | null>(null)\n\nfunction FormItem({ direction = \"column\", ...props }: ComponentProps<typeof Stack>) {\n  const id = useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Stack direction={direction} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({ ...props }: ComponentProps<typeof Label>) {\n  const { formItemId } = useFormField()\n\n  return <Label htmlFor={formItemId} {...props} />\n}\n\nfunction FormControl({ children, render, ...props }: useRender.ComponentProps<\"div\">) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  // Renders *as* its single child (the form field), merging id/aria onto it —\n  // the Base UI equivalent of Radix's `<Slot>`.\n  return useRender({\n    render: render ?? (children as useRender.RenderProp),\n    props: {\n      id: formItemId,\n      \"aria-describedby\": !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,\n      \"aria-invalid\": !!error,\n      ...props,\n    },\n  })\n}\n\nfunction FormDescription({ className, ...props }: ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return <p id={formDescriptionId} className={cn(descriptionClasses, className)} {...props} />\n}\n\nfunction FormMessage({ className, children, ...props }: ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      id={formMessageId}\n      className={cn(\"text-control font-medium text-danger\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  useFormField,\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,OAAO;AASb,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAS,UAIP,EAAE,GAAG,SAAmE;CACxE,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;EACnD,UAAA,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;AAEA,SAAS,eAAe;CACtB,MAAM,eAAe,WAAW,gBAAgB;CAChD,MAAM,cAAc,WAAW,eAAe;CAC9C,MAAM,EAAE,eAAe,cAAc,eAAe;CAEpD,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,IAAI,CAAC,aACH,MAAM,IAAI,MAAM,+CAA+C;CAGjE,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAC7D,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAMA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,SAAS,SAAS,EAAE,YAAY,UAAU,GAAG,SAAuC;CAClF,MAAM,KAAK,MAAM;CAEjB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;EACpC,UAAA,oBAAC,OAAD;GAAkB;GAAW,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;AAEA,SAAS,UAAU,EAAE,GAAG,SAAuC;CAC7D,MAAM,EAAE,eAAe,aAAa;CAEpC,OAAO,oBAAC,OAAD;EAAO,SAAS;EAAY,GAAI;CAAQ,CAAA;AACjD;AAEA,SAAS,YAAY,EAAE,UAAU,QAAQ,GAAG,SAA0C;CACpF,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAI7E,OAAO,UAAU;EACf,QAAQ,UAAW;EACnB,OAAO;GACL,IAAI;GACJ,oBAAoB,CAAC,QAAQ,oBAAoB,GAAG,kBAAkB,GAAG;GACzE,gBAAgB,CAAC,CAAC;GAClB,GAAG;EACL;CACF,CAAC;AACH;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA8B;CACrE,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,oBAAC,KAAD;EAAG,IAAI;EAAmB,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7F;AAEA,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,SAA8B;CAC3E,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,OAAO,IAAI;CAE9C,IAAI,CAAC,MACH,OAAO;CAGT,OACE,oBAAC,KAAD;EACE,IAAI;EACJ,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;EAEH,UAAA;CACA,CAAA;AAEP"}

package/dist/components/heading.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from "../lib/variants.js";
+import { useRender } from "@base-ui/react/use-render";
+import { ElementType, JSX } from "react";
+//#region src/components/heading.d.ts
+declare const headingVariants: import("tailwind-variants").TVReturnType<{
+  size: {
+    h1: "text-3xl text-pretty font-semibold md:text-4xl";
+    h2: "text-2xl font-semibold md:text-3xl";
+    h3: "text-2xl";
+    h4: "text-xl";
+    h5: "text-base font-medium tracking-micro";
+    h6: "text-sm font-medium";
+  };
+}, undefined, "font-display font-medium", {
+  size: {
+    h1: "text-3xl text-pretty font-semibold md:text-4xl";
+    h2: "text-2xl font-semibold md:text-3xl";
+    h3: "text-2xl";
+    h4: "text-xl";
+    h5: "text-base font-medium tracking-micro";
+    h6: "text-sm font-medium";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    h1: "text-3xl text-pretty font-semibold md:text-4xl";
+    h2: "text-2xl font-semibold md:text-3xl";
+    h3: "text-2xl";
+    h4: "text-xl";
+    h5: "text-base font-medium tracking-micro";
+    h6: "text-sm font-medium";
+  };
+}, undefined>>;
+export type HeadingProps = Omit<useRender.ComponentProps<"h2">, "size"> & VariantProps<typeof headingVariants> & {
+  /**
+   * Render as a different element type (h1–h6, span, ...).
+   */
+  as?: ElementType;
+};
+declare function Heading({ className, as, render, size, ...props }: HeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function H5(props: HeadingProps): JSX.Element;
+declare function H6(props: HeadingProps): JSX.Element;
+//#endregion
+export { H5, H6, Heading };
+//# sourceMappingURL=heading.d.ts.map

package/dist/components/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","names":[],"sources":["../../src/components/heading.tsx"],"mappings":";;;;cAIM,6CAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAmBT,eAAe,KAAK,UAAU,gCACxC,oBAAoB;;;;EAIlB,KAAK;;iBAGA,UAAU,WAAW,IAAI,QAAQ,SAAS,SAAS,+BAAY,+CAAA;iBAQ/D,GAAG,OAAO,eAAY,IAAA;iBAItB,GAAG,OAAO,eAAY,IAAA"}

package/dist/components/heading.js

@@ -0,0 +1,45 @@
+import { cn, variants } from "../lib/variants.js";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/heading.tsx
+const headingVariants = variants({
+	base: "font-display font-medium",
+	variants: { size: {
+		h1: "text-3xl text-pretty font-semibold md:text-4xl",
+		h2: "text-2xl font-semibold md:text-3xl",
+		h3: "text-2xl",
+		h4: "text-xl",
+		h5: "text-base font-medium tracking-micro",
+		h6: "text-sm font-medium"
+	} },
+	defaultVariants: { size: "h3" }
+});
+function Heading({ className, as, render, size, ...props }) {
+	return useRender({
+		render,
+		defaultTagName: as ?? size ?? "h2",
+		props: {
+			className: cn(headingVariants({
+				size,
+				className
+			})),
+			...props
+		}
+	});
+}
+function H5(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		size: "h5",
+		...props
+	});
+}
+function H6(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		size: "h6",
+		...props
+	});
+}
+//#endregion
+export { H5, H6, Heading };
+
+//# sourceMappingURL=heading.js.map

package/dist/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":[],"sources":["../../src/components/heading.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport type { ElementType, JSX } from \"react\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst headingVariants = variants({\n  base: \"font-display font-medium\",\n\n  variants: {\n    size: {\n      h1: \"text-3xl text-pretty font-semibold md:text-4xl\",\n      h2: \"text-2xl font-semibold md:text-3xl\",\n      h3: \"text-2xl\",\n      h4: \"text-xl\",\n      h5: \"text-base font-medium tracking-micro\",\n      h6: \"text-sm font-medium\",\n    },\n  },\n\n  defaultVariants: {\n    size: \"h3\",\n  },\n})\n\nexport type HeadingProps = Omit<useRender.ComponentProps<\"h2\">, \"size\"> &\n  VariantProps<typeof headingVariants> & {\n    /**\n     * Render as a different element type (h1–h6, span, ...).\n     */\n    as?: ElementType\n  }\n\nfunction Heading({ className, as, render, size, ...props }: HeadingProps) {\n  return useRender({\n    render,\n    defaultTagName: (as ?? size ?? \"h2\") as keyof JSX.IntrinsicElements,\n    props: { className: cn(headingVariants({ size, className })), ...props },\n  })\n}\n\nfunction H5(props: HeadingProps) {\n  return <Heading size=\"h5\" {...props} />\n}\n\nfunction H6(props: HeadingProps) {\n  return <Heading size=\"h6\" {...props} />\n}\n\nexport { H5, H6, Heading }\n"],"mappings":";;;;AAIA,MAAM,kBAAkB,SAAS;CAC/B,MAAM;CAEN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CAEA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;AAUD,SAAS,QAAQ,EAAE,WAAW,IAAI,QAAQ,MAAM,GAAG,SAAuB;CACxE,OAAO,UAAU;EACf;EACA,gBAAiB,MAAM,QAAQ;EAC/B,OAAO;GAAE,WAAW,GAAG,gBAAgB;IAAE;IAAM;GAAU,CAAC,CAAC;GAAG,GAAG;EAAM;CACzE,CAAC;AACH;AAEA,SAAS,GAAG,OAAqB;CAC/B,OAAO,oBAAC,SAAD;EAAS,MAAK;EAAK,GAAI;CAAQ,CAAA;AACxC;AAEA,SAAS,GAAG,OAAqB;CAC/B,OAAO,oBAAC,SAAD;EAAS,MAAK;EAAK,GAAI;CAAQ,CAAA;AACxC"}

package/dist/components/input.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from "../lib/variants.js";
+import { ComponentProps } from "react";
+//#region src/components/input.d.ts
+declare const inputVariants: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: "px-2 py-1 font-normal rounded-md";
+    md: "px-3 py-2 rounded-md";
+    lg: "px-4 py-2.5 rounded-lg sm:text-sm";
+  };
+}, undefined, "appearance-none min-h-0 w-full self-stretch bg-card text-foreground text-control break-words disabled:text-secondary-foreground/50", {
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined, import("tailwind-variants").TVReturnType<{
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined, "border border-transparent outline-transparent", {
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined>>>;
+type InputProps = Omit<ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>;
+declare function Input({ className, hover, focus, size, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input, inputVariants };
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../src/components/input.tsx"],"mappings":";;;cAIM,2CAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoBd,aAAa,KAAK,mCAAmC,oBAAoB;iBAErE,QAAQ,WAAW,OAAO,OAAO,SAAS,SAAS,6BAAU,IAAA"}

package/dist/components/input.js

@@ -0,0 +1,33 @@
+import { cn, variants } from "../lib/variants.js";
+import { interactiveVariants } from "../lib/interactive.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input.tsx
+const inputVariants = variants({
+	extend: interactiveVariants,
+	base: "appearance-none min-h-0 w-full self-stretch bg-card text-foreground text-control break-words disabled:text-secondary-foreground/50",
+	variants: { size: {
+		sm: "px-2 py-1 font-normal rounded-md",
+		md: "px-3 py-2 rounded-md",
+		lg: "px-4 py-2.5 rounded-lg sm:text-sm"
+	} },
+	defaultVariants: {
+		hover: false,
+		focus: true,
+		bordered: true,
+		size: "md"
+	}
+});
+function Input({ className, hover, focus, size, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		className: cn(inputVariants({
+			hover,
+			focus,
+			size
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Input, inputVariants };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { interactiveVariants } from \"~/lib/interactive\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst inputVariants = variants({\n  extend: interactiveVariants,\n  base: \"appearance-none min-h-0 w-full self-stretch bg-card text-foreground text-control break-words disabled:text-secondary-foreground/50\",\n\n  variants: {\n    size: {\n      sm: \"px-2 py-1 font-normal rounded-md\",\n      md: \"px-3 py-2 rounded-md\",\n      lg: \"px-4 py-2.5 rounded-lg sm:text-sm\",\n    },\n  },\n\n  defaultVariants: {\n    hover: false,\n    focus: true,\n    bordered: true,\n    size: \"md\",\n  },\n})\n\ntype InputProps = Omit<ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>\n\nfunction Input({ className, hover, focus, size, ...props }: InputProps) {\n  return <input className={cn(inputVariants({ hover, focus, size }), className)} {...props} />\n}\n\nexport { Input, inputVariants }\n"],"mappings":";;;;AAIA,MAAM,gBAAgB,SAAS;CAC7B,QAAQ;CACR,MAAM;CAEN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CAEA,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,UAAU;EACV,MAAM;CACR;AACF,CAAC;AAID,SAAS,MAAM,EAAE,WAAW,OAAO,OAAO,MAAM,GAAG,SAAqB;CACtE,OAAO,oBAAC,SAAD;EAAO,WAAW,GAAG,cAAc;GAAE;GAAO;GAAO;EAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7F"}

package/dist/components/kbd.d.ts

@@ -0,0 +1,28 @@
+import { VariantProps } from "../lib/variants.js";
+import { ComponentProps } from "react";
+//#region src/components/kbd.d.ts
+declare const kbdVariants: import("tailwind-variants").TVReturnType<{
+  variant: {
+    soft: "border-transparent bg-accent";
+    secondary: "bg-background";
+  };
+}, undefined, "inline-flex gap-[0.1em] -my-0.5 px-[0.4em] py-[0.088em] whitespace-nowrap tabular-nums rounded-sm border text-xs/tight font-medium text-muted-foreground", {
+  variant: {
+    soft: "border-transparent bg-accent";
+    secondary: "bg-background";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    soft: "border-transparent bg-accent";
+    secondary: "bg-background";
+  };
+}, undefined>>;
+type KbdProps = ComponentProps<"kbd"> & VariantProps<typeof kbdVariants> & {
+  meta?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  ctrl?: boolean;
+};
+export declare function Kbd({ children, className, variant, meta, shift, alt, ctrl, ...props }: KbdProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","names":[],"sources":["../../src/components/kbd.tsx"],"mappings":";;;cAGM,yCAAW;;;;;;;;;;;;;;;;KAeZ,WAAW,wBACd,oBAAoB;EAClB;EACA;EACA;EACA;;wBAGY,MAAM,UAAU,WAAW,SAAS,MAAM,OAAO,KAAK,SAAS,SAAS,2BAAQ,IAAA"}

package/dist/components/kbd.js

@@ -0,0 +1,31 @@
+import { cn, variants } from "../lib/variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/kbd.tsx
+const kbdVariants = variants({
+	base: "inline-flex gap-[0.1em] -my-0.5 px-[0.4em] py-[0.088em] whitespace-nowrap tabular-nums rounded-sm border text-xs/tight font-medium text-muted-foreground",
+	variants: { variant: {
+		soft: "border-transparent bg-accent",
+		secondary: "bg-background"
+	} },
+	defaultVariants: { variant: "secondary" }
+});
+function Kbd({ children, className, variant, meta, shift, alt, ctrl, ...props }) {
+	return /* @__PURE__ */ jsxs("kbd", {
+		className: cn(kbdVariants({
+			variant,
+			className
+		})),
+		...props,
+		children: [
+			shift && /* @__PURE__ */ jsx("span", { children: "⇧" }),
+			meta && /* @__PURE__ */ jsx("span", { children: "⌘" }),
+			alt && /* @__PURE__ */ jsx("span", { children: "⌥" }),
+			ctrl && /* @__PURE__ */ jsx("span", { children: "⌃" }),
+			children && /* @__PURE__ */ jsx("span", { children })
+		]
+	});
+}
+//#endregion
+export { Kbd };
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst kbdVariants = variants({\n  base: \"inline-flex gap-[0.1em] -my-0.5 px-[0.4em] py-[0.088em] whitespace-nowrap tabular-nums rounded-sm border text-xs/tight font-medium text-muted-foreground\",\n\n  variants: {\n    variant: {\n      soft: \"border-transparent bg-accent\",\n      secondary: \"bg-background\",\n    },\n  },\n\n  defaultVariants: {\n    variant: \"secondary\",\n  },\n})\n\ntype KbdProps = ComponentProps<\"kbd\"> &\n  VariantProps<typeof kbdVariants> & {\n    meta?: boolean\n    shift?: boolean\n    alt?: boolean\n    ctrl?: boolean\n  }\n\nexport function Kbd({ children, className, variant, meta, shift, alt, ctrl, ...props }: KbdProps) {\n  return (\n    <kbd className={cn(kbdVariants({ variant, className }))} {...props}>\n      {shift && <span>⇧</span>}\n      {meta && <span>⌘</span>}\n      {alt && <span>⌥</span>}\n      {ctrl && <span>⌃</span>}\n      {children && <span>{children}</span>}\n    </kbd>\n  )\n}\n"],"mappings":";;;AAGA,MAAM,cAAc,SAAS;CAC3B,MAAM;CAEN,UAAU,EACR,SAAS;EACP,MAAM;EACN,WAAW;CACb,EACF;CAEA,iBAAiB,EACf,SAAS,YACX;AACF,CAAC;AAUD,SAAgB,IAAI,EAAE,UAAU,WAAW,SAAS,MAAM,OAAO,KAAK,MAAM,GAAG,SAAmB;CAChG,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;EAA7D,UAAA;GACG,SAAS,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;GACtB,QAAQ,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;GACrB,OAAO,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;GACpB,QAAQ,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA;GACrB,YAAY,oBAAC,QAAD,EAAO,SAAe,CAAA;EAChC;;AAET"}

package/dist/components/label.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from "../lib/variants.js";
+import { ComponentProps } from "react";
+//#region src/components/label.d.ts
+declare const labelVariants: import("tailwind-variants").TVReturnType<{
+  isRequired: {
+    true: "after:ml-0.5 after:text-danger after:content-['*']";
+  };
+}, undefined, "self-start text-sm font-medium text-foreground [&[for]]:cursor-pointer", {
+  isRequired: {
+    true: "after:ml-0.5 after:text-danger after:content-['*']";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  isRequired: {
+    true: "after:ml-0.5 after:text-danger after:content-['*']";
+  };
+}, undefined>>;
+type LabelProps = ComponentProps<"label"> & VariantProps<typeof labelVariants>;
+declare function Label({ className, isRequired, ...props }: LabelProps): import("react").JSX.Element;
+//#endregion
+export { Label };
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../src/components/label.tsx"],"mappings":";;;cAKM,2CAAa;;;;;;;;;;;;;KAUd,aAAa,0BAA0B,oBAAoB;iBAEvD,QAAQ,WAAW,eAAe,SAAS,6BAAU,IAAA"}

package/dist/components/label.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn, variants } from "../lib/variants.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/label.tsx
+const labelVariants = variants({
+	base: "self-start text-sm font-medium text-foreground [&[for]]:cursor-pointer",
+	variants: { isRequired: { true: "after:ml-0.5 after:text-danger after:content-['*']" } }
+});
+function Label({ className, isRequired, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		className: cn(labelVariants({
+			isRequired,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+export { Label };
+
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":[],"sources":["../../src/components/label.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport { cn, variants, type VariantProps } from \"~/lib/variants\"\n\nconst labelVariants = variants({\n  base: \"self-start text-sm font-medium text-foreground [&[for]]:cursor-pointer\",\n\n  variants: {\n    isRequired: {\n      true: \"after:ml-0.5 after:text-danger after:content-['*']\",\n    },\n  },\n})\n\ntype LabelProps = ComponentProps<\"label\"> & VariantProps<typeof labelVariants>\n\nfunction Label({ className, isRequired, ...props }: LabelProps) {\n  // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- htmlFor is supplied by callers (e.g. FormLabel)\n  return <label className={cn(labelVariants({ isRequired, className }))} {...props} />\n}\n\nexport { Label }\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,SAAS;CAC7B,MAAM;CAEN,UAAU,EACR,YAAY,EACV,MAAM,qDACR,EACF;AACF,CAAC;AAID,SAAS,MAAM,EAAE,WAAW,YAAY,GAAG,SAAqB;CAE9D,OAAO,oBAAC,SAAD;EAAO,WAAW,GAAG,cAAc;GAAE;GAAY;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AACrF"}