cortena-ui 1.3.0 → 1.4.0

package/dist/components/error-banner.js

@@ -0,0 +1,52 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { AlertTriangle, RefreshCw, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/error-banner.tsx
+const actionClass = /* @__PURE__ */ cn("inline-flex items-center justify-center rounded-[var(--ds-radius-sm)] p-1", "text-[color:var(--ds-destructive)] hover:bg-[var(--ds-destructive)]/10", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-destructive)]/40", "transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]");
+/**
+* ErrorBanner — the one error surface every screen uses: a warning icon, the
+* message, and optional Retry / Dismiss actions. Renders nothing for an empty
+* message so callers can pass their error state straight through.
+*/
+function ErrorBanner({ message, onDismiss, onRetry, className, ...props }) {
+	if (!message) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "error-banner",
+		role: "alert",
+		className: cn("flex items-start gap-3 rounded-[var(--ds-radius-md)] border px-4 py-3", "border-[var(--ds-destructive)]/30 bg-[var(--ds-destructive-soft)]", "text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]", "text-[color:var(--ds-destructive)]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(AlertTriangle, {
+				"aria-hidden": true,
+				className: "mt-0.5 size-4 shrink-0"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				"data-slot": "error-banner-message",
+				className: "flex-1",
+				children: message
+			}),
+			onRetry || onDismiss ? /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [onRetry ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onRetry,
+					"aria-label": "Retry",
+					className: actionClass,
+					children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5" })
+				}) : null, onDismiss ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDismiss,
+					"aria-label": "Dismiss",
+					className: actionClass,
+					children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+				}) : null]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { ErrorBanner };
+
+//# sourceMappingURL=error-banner.js.map

package/dist/components/error-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-banner.js","names":[],"sources":["../../src/components/error-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertTriangle, RefreshCw, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ErrorBannerProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  message: string;\n  onDismiss?: () => void;\n  onRetry?: () => void;\n}\n\nconst actionClass = /* @__PURE__ */ cn(\n  \"inline-flex items-center justify-center rounded-[var(--ds-radius-sm)] p-1\",\n  \"text-[color:var(--ds-destructive)] hover:bg-[var(--ds-destructive)]/10\",\n  \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-destructive)]/40\",\n  \"transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n);\n\n/**\n * ErrorBanner — the one error surface every screen uses: a warning icon, the\n * message, and optional Retry / Dismiss actions. Renders nothing for an empty\n * message so callers can pass their error state straight through.\n */\nfunction ErrorBanner({ message, onDismiss, onRetry, className, ...props }: ErrorBannerProps) {\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <div\n      data-slot=\"error-banner\"\n      role=\"alert\"\n      className={cn(\n        \"flex items-start gap-3 rounded-[var(--ds-radius-md)] border px-4 py-3\",\n        \"border-[var(--ds-destructive)]/30 bg-[var(--ds-destructive-soft)]\",\n        \"text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)]\",\n        \"text-[color:var(--ds-destructive)]\",\n        className,\n      )}\n      {...props}\n    >\n      <AlertTriangle aria-hidden className=\"mt-0.5 size-4 shrink-0\" />\n      <p data-slot=\"error-banner-message\" className=\"flex-1\">\n        {message}\n      </p>\n      {onRetry || onDismiss ? (\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {onRetry ? (\n            <button type=\"button\" onClick={onRetry} aria-label=\"Retry\" className={actionClass}>\n              <RefreshCw className=\"size-3.5\" />\n            </button>\n          ) : null}\n          {onDismiss ? (\n            <button type=\"button\" onClick={onDismiss} aria-label=\"Dismiss\" className={actionClass}>\n              <X className=\"size-3.5\" />\n            </button>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { ErrorBanner };\n"],"mappings":";;;;;;AAYA,MAAM,cAA8B,mBAClC,6EACA,0EACA,uFACA,gFACF;;;;;;AAOA,SAAS,YAAY,EAAE,SAAS,WAAW,SAAS,WAAW,GAAG,SAA2B;CAC3F,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,yEACA,qEACA,sFACA,sCACA,SACF;EACA,GAAI;EAVN,UAAA;GAYE,oBAAC,eAAD;IAAe,eAAA;IAAY,WAAU;GAA0B,CAAA;GAC/D,oBAAC,KAAD;IAAG,aAAU;IAAuB,WAAU;IAC3C,UAAA;GACA,CAAA;GACF,WAAW,YACV,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACC,oBAAC,UAAD;KAAQ,MAAK;KAAS,SAAS;KAAS,cAAW;KAAQ,WAAW;KACpE,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;IAC3B,CAAA,IACN,MACH,YACC,oBAAC,UAAD;KAAQ,MAAK;KAAS,SAAS;KAAW,cAAW;KAAU,WAAW;KACxE,UAAA,oBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;IACnB,CAAA,IACN,IACD;GACH,CAAA,IAAA;EACD;;AAET"}

package/dist/components/field.d.ts

@@ -0,0 +1,64 @@
+"use client";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/field.d.ts
+/**
+ * Field.
+ *
+ * The shadcn Field shape over Base UI's Field and Fieldset. `Field` is
+ * `Field.Root`: it owns the label/control/description/error association, so a
+ * `FieldLabel` focuses its `FieldControl` (or any Base UI control such as
+ * Checkbox, Select, Switch) without an explicit `htmlFor`, and every message
+ * ends up in the control's `aria-describedby`.
+ *
+ * Validity: Base UI puts `data-invalid` on every part once the control fails
+ * native constraints or a `validate` callback, and adds `aria-invalid` to the
+ * control. Pass `invalid` on `Field` when an external library owns the state
+ * (the Form component does this from react-hook-form).
+ *
+ * `FieldError` follows the field's validity: static children show once the
+ * control is invalid or the Field is marked `invalid`; `match="valueMissing"`
+ * narrows that to one constraint. Given `errors` (a react-hook-form error
+ * list) it renders whenever the list has a message.
+ */
+declare const fieldVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface FieldProps extends React.ComponentProps<typeof Field.Root>, VariantProps<typeof fieldVariants> {}
+declare function Field$1({ className, orientation, invalid, ...props }: FieldProps): React.JSX.Element;
+/** Stacks a label and description beside a control in a horizontal Field. */
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface FieldLabelProps extends React.ComponentProps<typeof Field.Label> {}
+declare function FieldLabel({ className, ...props }: FieldLabelProps): React.JSX.Element;
+export interface FieldControlProps extends React.ComponentProps<typeof Field.Control> {}
+/**
+ * The field's `<input>`, styled like Input. Swap the element with `render`
+ * (`render={<Textarea />}`); the input styling still applies unless the
+ * rendered element's own className wins in tailwind-merge.
+ */
+declare function FieldControl({ className, ...props }: FieldControlProps): React.JSX.Element;
+export interface FieldDescriptionProps extends React.ComponentProps<typeof Field.Description> {}
+declare function FieldDescription({ className, ...props }: FieldDescriptionProps): React.JSX.Element;
+/** The shape react-hook-form gives for a field error; only `message` is read. */
+export interface FieldErrorItem {
+  message?: string | undefined;
+}
+export interface FieldErrorProps extends React.ComponentProps<typeof Field.Error> {
+  /**
+   * Errors from an external validator. Duplicate messages collapse; one message
+   * renders as text, several as a list.
+   */
+  errors?: ReadonlyArray<FieldErrorItem | undefined> | undefined;
+}
+declare function FieldError({ className, children, errors, match, ...props }: FieldErrorProps): React.JSX.Element | null;
+export interface FieldsetProps extends React.ComponentProps<typeof Fieldset.Root> {}
+declare function Fieldset$1({ className, ...props }: FieldsetProps): React.JSX.Element;
+export interface FieldsetLegendProps extends React.ComponentProps<typeof Fieldset.Legend> {}
+declare function FieldsetLegend({ className, ...props }: FieldsetLegendProps): React.JSX.Element;
+/** A vertical stack of Fields with the spacing a form uses between rows. */
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Field$1 as Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, Fieldset$1 as Fieldset, FieldsetLegend, fieldVariants };
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field.js

@@ -0,0 +1,133 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { inputClassName } from "./input.js";
+import { labelVariants } from "./label.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/field.tsx
+/**
+* Field.
+*
+* The shadcn Field shape over Base UI's Field and Fieldset. `Field` is
+* `Field.Root`: it owns the label/control/description/error association, so a
+* `FieldLabel` focuses its `FieldControl` (or any Base UI control such as
+* Checkbox, Select, Switch) without an explicit `htmlFor`, and every message
+* ends up in the control's `aria-describedby`.
+*
+* Validity: Base UI puts `data-invalid` on every part once the control fails
+* native constraints or a `validate` callback, and adds `aria-invalid` to the
+* control. Pass `invalid` on `Field` when an external library owns the state
+* (the Form component does this from react-hook-form).
+*
+* `FieldError` follows the field's validity: static children show once the
+* control is invalid or the Field is marked `invalid`; `match="valueMissing"`
+* narrows that to one constraint. Given `errors` (a react-hook-form error
+* list) it renders whenever the list has a message.
+*/
+const fieldVariants = /* @__PURE__ */ cva("group/field flex w-full gap-2", {
+	variants: { orientation: {
+		vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+		horizontal: ["flex-row items-center [&>[data-slot=field-label]]:flex-auto", "has-[>[data-slot=field-content]]:items-start"]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const FieldInvalidContext = /* @__PURE__ */ React.createContext(false);
+function Field$1({ className, orientation = "vertical", invalid, ...props }) {
+	return /* @__PURE__ */ jsx(FieldInvalidContext.Provider, {
+		value: invalid === true,
+		children: /* @__PURE__ */ jsx(Field.Root, {
+			"data-slot": "field",
+			"data-orientation": orientation,
+			invalid,
+			className: cn(fieldVariants({ orientation }), className),
+			...props
+		})
+	});
+}
+/** Stacks a label and description beside a control in a horizontal Field. */
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-1 leading-snug", className),
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-slot": "field-label",
+		className: cn(labelVariants(), "w-fit", "data-[disabled]:pointer-events-none data-[disabled]:opacity-70", "data-[invalid]:text-[color:var(--ds-destructive)]", className),
+		...props
+	});
+}
+/**
+* The field's `<input>`, styled like Input. Swap the element with `render`
+* (`render={<Textarea />}`); the input styling still applies unless the
+* rendered element's own className wins in tailwind-merge.
+*/
+function FieldControl({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Control, {
+		"data-slot": "field-control",
+		className: cn(inputClassName, "data-[invalid]:border-[var(--ds-destructive)] data-[invalid]:ring-[3px] data-[invalid]:ring-[var(--ds-destructive)]/20", className),
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Description, {
+		"data-slot": "field-description",
+		className: cn("text-[length:var(--ds-text-caption)] leading-[var(--ds-text-caption--line-height)] font-normal text-[color:var(--ds-muted-foreground)]", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[color:var(--ds-primary)]", className),
+		...props
+	});
+}
+function FieldError({ className, children, errors, match, ...props }) {
+	const fieldInvalid = React.useContext(FieldInvalidContext);
+	const content = React.useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const unique = [...new Map(errors.map((e) => [e?.message, e])).values()].filter((e) => Boolean(e?.message));
+		if (unique.length === 0) return null;
+		if (unique.length === 1) return unique[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: unique.map((e) => /* @__PURE__ */ jsx("li", { children: e.message }, e.message))
+		});
+	}, [children, errors]);
+	if (errors !== void 0 && content === null) return null;
+	return /* @__PURE__ */ jsx(Field.Error, {
+		role: "alert",
+		"data-slot": "field-error",
+		match: match ?? (errors !== void 0 || fieldInvalid ? true : void 0),
+		className: cn("text-[length:var(--ds-text-caption)] leading-[var(--ds-text-caption--line-height)] font-normal text-[color:var(--ds-destructive)]", className),
+		...props,
+		children: content
+	});
+}
+function Fieldset$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Root, {
+		"data-slot": "fieldset",
+		className: cn("flex flex-col gap-4", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+		...props
+	});
+}
+function FieldsetLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		"data-slot": "fieldset-legend",
+		className: cn("text-[length:var(--ds-text-body-sm)] font-medium leading-none text-[color:var(--ds-foreground)]", "data-[disabled]:opacity-70", className),
+		...props
+	});
+}
+/** A vertical stack of Fields with the spacing a form uses between rows. */
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn("group/field-group flex w-full flex-col gap-6 [&>[data-slot=field-group]]:gap-4", className),
+		...props
+	});
+}
+//#endregion
+export { Field$1 as Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, Fieldset$1 as Fieldset, FieldsetLegend, fieldVariants };
+
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":["Field","FieldPrimitive","Fieldset","FieldsetPrimitive"],"sources":["../../src/components/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { Fieldset as FieldsetPrimitive } from \"@base-ui/react/fieldset\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { inputClassName } from \"@/components/input\";\nimport { labelVariants } from \"@/components/label\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Field.\n *\n * The shadcn Field shape over Base UI's Field and Fieldset. `Field` is\n * `Field.Root`: it owns the label/control/description/error association, so a\n * `FieldLabel` focuses its `FieldControl` (or any Base UI control such as\n * Checkbox, Select, Switch) without an explicit `htmlFor`, and every message\n * ends up in the control's `aria-describedby`.\n *\n * Validity: Base UI puts `data-invalid` on every part once the control fails\n * native constraints or a `validate` callback, and adds `aria-invalid` to the\n * control. Pass `invalid` on `Field` when an external library owns the state\n * (the Form component does this from react-hook-form).\n *\n * `FieldError` follows the field's validity: static children show once the\n * control is invalid or the Field is marked `invalid`; `match=\"valueMissing\"`\n * narrows that to one constraint. Given `errors` (a react-hook-form error\n * list) it renders whenever the list has a message.\n */\nconst fieldVariants = /* @__PURE__ */ cva(\"group/field flex w-full gap-2\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal: [\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start\",\n      ],\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nexport interface FieldProps\n  extends React.ComponentProps<typeof FieldPrimitive.Root>,\n    VariantProps<typeof fieldVariants> {}\n\n// Base UI's Field.Error reads the control's computed validity only; the\n// external `invalid` prop reaches the data attributes but not the error's\n// visibility. Carry it so FieldError can show its static message.\nconst FieldInvalidContext = /* @__PURE__ */ React.createContext(false);\n\nfunction Field({ className, orientation = \"vertical\", invalid, ...props }: FieldProps) {\n  return (\n    <FieldInvalidContext.Provider value={invalid === true}>\n      <FieldPrimitive.Root\n        data-slot=\"field\"\n        data-orientation={orientation}\n        invalid={invalid}\n        className={cn(fieldVariants({ orientation }), className)}\n        {...props}\n      />\n    </FieldInvalidContext.Provider>\n  );\n}\n\n/** Stacks a label and description beside a control in a horizontal Field. */\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-1 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps extends React.ComponentProps<typeof FieldPrimitive.Label> {}\n\nfunction FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        labelVariants(),\n        \"w-fit\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-70\",\n        \"data-[invalid]:text-[color:var(--ds-destructive)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldControlProps extends React.ComponentProps<typeof FieldPrimitive.Control> {}\n\n/**\n * The field's `<input>`, styled like Input. Swap the element with `render`\n * (`render={<Textarea />}`); the input styling still applies unless the\n * rendered element's own className wins in tailwind-merge.\n */\nfunction FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        inputClassName,\n        \"data-[invalid]:border-[var(--ds-destructive)] data-[invalid]:ring-[3px] data-[invalid]:ring-[var(--ds-destructive)]/20\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldDescriptionProps\n  extends React.ComponentProps<typeof FieldPrimitive.Description> {}\n\nfunction FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-[length:var(--ds-text-caption)] leading-[var(--ds-text-caption--line-height)] font-normal text-[color:var(--ds-muted-foreground)]\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-[color:var(--ds-primary)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The shape react-hook-form gives for a field error; only `message` is read. */\nexport interface FieldErrorItem {\n  message?: string | undefined;\n}\n\nexport interface FieldErrorProps extends React.ComponentProps<typeof FieldPrimitive.Error> {\n  /**\n   * Errors from an external validator. Duplicate messages collapse; one message\n   * renders as text, several as a list.\n   */\n  errors?: ReadonlyArray<FieldErrorItem | undefined> | undefined;\n}\n\nfunction FieldError({ className, children, errors, match, ...props }: FieldErrorProps) {\n  const fieldInvalid = React.useContext(FieldInvalidContext);\n  const content = React.useMemo(() => {\n    if (children) {\n      return children;\n    }\n    if (!errors?.length) {\n      return null;\n    }\n    const unique = [...new Map(errors.map((e) => [e?.message, e])).values()].filter(\n      (e): e is FieldErrorItem => Boolean(e?.message),\n    );\n    if (unique.length === 0) {\n      return null;\n    }\n    if (unique.length === 1) {\n      return unique[0]?.message;\n    }\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {unique.map((e) => (\n          <li key={e.message}>{e.message}</li>\n        ))}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (errors !== undefined && content === null) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      role=\"alert\"\n      data-slot=\"field-error\"\n      match={match ?? (errors !== undefined || fieldInvalid ? true : undefined)}\n      className={cn(\n        \"text-[length:var(--ds-text-caption)] leading-[var(--ds-text-caption--line-height)] font-normal text-[color:var(--ds-destructive)]\",\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n}\n\nexport interface FieldsetProps extends React.ComponentProps<typeof FieldsetPrimitive.Root> {}\n\nfunction Fieldset({ className, ...props }: FieldsetProps) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot=\"fieldset\"\n      className={cn(\n        \"flex flex-col gap-4\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldsetLegendProps extends React.ComponentProps<typeof FieldsetPrimitive.Legend> {}\n\nfunction FieldsetLegend({ className, ...props }: FieldsetLegendProps) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot=\"fieldset-legend\"\n      className={cn(\n        \"text-[length:var(--ds-text-body-sm)] font-medium leading-none text-[color:var(--ds-foreground)]\",\n        \"data-[disabled]:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A vertical stack of Fields with the spacing a form uses between rows. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group flex w-full flex-col gap-6 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Field,\n  FieldContent,\n  FieldLabel,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  Fieldset,\n  FieldsetLegend,\n  FieldGroup,\n  fieldVariants,\n};\n"],"mappings":"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"}

package/dist/components/form.d.ts

@@ -0,0 +1,37 @@
+"use client";
+import { FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldProps } from "./field.js";
+import * as React from "react";
+import { ControllerProps, FieldError, FieldPath, FieldValues, SubmitHandler, UseFormReturn, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+//#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>): React.JSX.Element;
+export interface UseFormFieldReturn {
+  id: string;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: FieldError | undefined;
+}
+declare function useFormField(): UseFormFieldReturn;
+export interface FormItemProps extends Omit<FieldProps, "invalid" | "name"> {}
+declare function FormItem({ className, ...props }: FormItemProps): React.JSX.Element;
+export interface FormLabelProps extends FieldLabelProps {}
+declare function FormLabel({ className, ...props }: FormLabelProps): React.JSX.Element;
+export interface FormControlProps extends React.HTMLAttributes<HTMLElement> {
+  /** The single control element; it receives `id`, `aria-describedby` and `aria-invalid`. */
+  children: React.ReactElement;
+}
+declare function FormControl({ children, ...props }: FormControlProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export interface FormDescriptionProps extends FieldDescriptionProps {}
+declare function FormDescription({ className, ...props }: FormDescriptionProps): React.JSX.Element;
+export interface FormMessageProps extends Omit<FieldErrorProps, "errors" | "match"> {}
+declare function FormMessage({ className, children, ...props }: FormMessageProps): React.JSX.Element | null;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type SubmitHandler, type UseFormReturn, useForm, useFormField, zodResolver };
+//# sourceMappingURL=form.d.ts.map

package/dist/components/form.js

@@ -0,0 +1,103 @@
+"use client";
+"use client";
+import { Field, FieldDescription, FieldError as FieldError$1, FieldLabel } from "./field.js";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Controller, FormProvider, useForm, useFormContext, useFormState } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+//#region src/components/form.tsx
+const Form = FormProvider;
+const FormFieldContext = /* @__PURE__ */ React.createContext(null);
+function FormField(props) {
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: { name: props.name },
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+}
+const FormItemContext = /* @__PURE__ */ React.createContext(null);
+function useFormFieldState() {
+	const fieldContext = React.useContext(FormFieldContext);
+	if (!fieldContext) throw new Error("useFormField must be used within <FormField>");
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+	return {
+		name: fieldContext.name,
+		...fieldState
+	};
+}
+function useFormField() {
+	const fieldState = useFormFieldState();
+	const itemContext = React.useContext(FormItemContext);
+	if (!itemContext) throw new Error("useFormField must be used within <FormItem>");
+	const { id } = itemContext;
+	return {
+		id,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+}
+function FormItem({ className, ...props }) {
+	const id = React.useId();
+	const { name, error } = useFormFieldState();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: { id },
+		children: /* @__PURE__ */ jsx(Field, {
+			"data-slot": "form-item",
+			name,
+			invalid: Boolean(error),
+			className,
+			...props
+		})
+	});
+}
+function FormLabel({ className, ...props }) {
+	const { formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldLabel, {
+		"data-slot": "form-label",
+		htmlFor: formItemId,
+		className,
+		...props
+	});
+}
+function FormControl({ children, ...props }) {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return useRender({
+		render: children,
+		props: {
+			id: formItemId,
+			"aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+			"aria-invalid": error ? true : void 0,
+			...props
+		}
+	});
+}
+function FormDescription({ className, ...props }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldDescription, {
+		"data-slot": "form-description",
+		id: formDescriptionId,
+		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(FieldError$1, {
+		"data-slot": "form-message",
+		id: formMessageId,
+		match: true,
+		className,
+		...props,
+		children: body
+	});
+}
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useForm, useFormField, zodResolver };
+
+//# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":["FieldError"],"sources":["../../src/components/form.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldError as RHFFieldError,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  type FieldDescriptionProps,\n  type FieldErrorProps,\n  type FieldLabelProps,\n  type FieldProps,\n} from \"@/components/field\";\n\n/**\n * Form.\n *\n * The shadcn react-hook-form recipe, with the parts built on Field so a form\n * written this way and one written with Field directly look the same:\n *\n * ```tsx\n * const form = useForm({ resolver: zodResolver(schema), defaultValues: { email: \"\" } });\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField control={form.control} name=\"email\" render={({ field }) => (\n *       <FormItem>\n *         <FormLabel>Email</FormLabel>\n *         <FormControl><Input {...field} /></FormControl>\n *         <FormDescription>Where we send receipts.</FormDescription>\n *         <FormMessage />\n *       </FormItem>\n *     )} />\n *   </form>\n * </Form>\n * ```\n *\n * `FormItem` is a Field marked `invalid` from the react-hook-form error, so\n * `data-invalid` lands on the label and any Base UI control. `FormControl`\n * has no element of its own: it merges `id`, `aria-describedby` and\n * `aria-invalid` onto its single child, so a plain Input, Textarea or a Base\n * UI Checkbox/Select/Switch all work. `FormLabel` targets that `id`.\n *\n * `useForm` and `zodResolver` are re-exported so a consumer imports one package.\n */\nexport { useForm } from \"react-hook-form\";\nexport type { SubmitHandler, UseFormReturn } from \"react-hook-form\";\nexport { zodResolver } from \"@hookform/resolvers/zod\";\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 = /* @__PURE__ */ React.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\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = /* @__PURE__ */ React.createContext<FormItemContextValue | null>(null);\n\nfunction useFormFieldState() {\n  const fieldContext = React.useContext(FormFieldContext);\n  if (!fieldContext) {\n    throw new Error(\"useFormField must be used within <FormField>\");\n  }\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n  return { name: fieldContext.name, ...fieldState };\n}\n\nexport interface UseFormFieldReturn {\n  id: string;\n  name: string;\n  formItemId: string;\n  formDescriptionId: string;\n  formMessageId: string;\n  invalid: boolean;\n  isDirty: boolean;\n  isTouched: boolean;\n  isValidating: boolean;\n  error?: RHFFieldError | undefined;\n}\n\nfunction useFormField(): UseFormFieldReturn {\n  const fieldState = useFormFieldState();\n  const itemContext = React.useContext(FormItemContext);\n  if (!itemContext) {\n    throw new Error(\"useFormField must be used within <FormItem>\");\n  }\n  const { id } = itemContext;\n  return {\n    id,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n}\n\nexport interface FormItemProps extends Omit<FieldProps, \"invalid\" | \"name\"> {}\n\nfunction FormItem({ className, ...props }: FormItemProps) {\n  const id = React.useId();\n  const { name, error } = useFormFieldState();\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field\n        data-slot=\"form-item\"\n        name={name}\n        invalid={Boolean(error)}\n        className={className}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  );\n}\n\nexport interface FormLabelProps extends FieldLabelProps {}\n\nfunction FormLabel({ className, ...props }: FormLabelProps) {\n  const { formItemId } = useFormField();\n  return (\n    <FieldLabel data-slot=\"form-label\" htmlFor={formItemId} className={className} {...props} />\n  );\n}\n\nexport interface FormControlProps extends React.HTMLAttributes<HTMLElement> {\n  /** The single control element; it receives `id`, `aria-describedby` and `aria-invalid`. */\n  children: React.ReactElement;\n}\n\nfunction FormControl({ children, ...props }: FormControlProps) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n  return useRender({\n    render: children,\n    props: {\n      id: formItemId,\n      \"aria-describedby\": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,\n      \"aria-invalid\": error ? true : undefined,\n      ...props,\n    },\n  });\n}\n\nexport interface FormDescriptionProps extends FieldDescriptionProps {}\n\nfunction FormDescription({ className, ...props }: FormDescriptionProps) {\n  const { formDescriptionId } = useFormField();\n  return (\n    <FieldDescription\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport interface FormMessageProps extends Omit<FieldErrorProps, \"errors\" | \"match\"> {}\n\nfunction FormMessage({ className, children, ...props }: FormMessageProps) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error.message ?? \"\") : children;\n  if (!body) {\n    return null;\n  }\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} match className={className} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  Form,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  useFormField,\n};\n"],"mappings":";;;;;;;;;AA2DA,MAAM,OAAO;AASb,MAAM,mBAAmC,sBAAM,cAA4C,IAAI;AAE/F,SAAS,UAIP,OAAiE;CACjE,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;EACnD,UAAA,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;AAMA,MAAM,kBAAkC,sBAAM,cAA2C,IAAI;AAE7F,SAAS,oBAAoB;CAC3B,MAAM,eAAe,MAAM,WAAW,gBAAgB;CACtD,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,8CAA8C;CAEhE,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,YAAY,aAAa,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAC7D,OAAO;EAAE,MAAM,aAAa;EAAM,GAAG;CAAW;AAClD;AAeA,SAAS,eAAmC;CAC1C,MAAM,aAAa,kBAAkB;CACrC,MAAM,cAAc,MAAM,WAAW,eAAe;CACpD,IAAI,CAAC,aACH,MAAM,IAAI,MAAM,6CAA6C;CAE/D,MAAM,EAAE,OAAO;CACf,OAAO;EACL;EACA,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAIA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;CACxD,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,EAAE,MAAM,UAAU,kBAAkB;CAC1C,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;EACpC,UAAA,oBAAC,OAAD;GACE,aAAU;GACJ;GACN,SAAS,QAAQ,KAAK;GACX;GACX,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAIA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EAAE,eAAe,aAAa;CACpC,OACE,oBAAC,YAAD;EAAY,aAAU;EAAa,SAAS;EAAuB;EAAW,GAAI;CAAQ,CAAA;AAE9F;AAOA,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;CAC7D,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAC7E,OAAO,UAAU;EACf,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,oBAAoB,QAAQ,GAAG,kBAAkB,GAAG,kBAAkB;GACtE,gBAAgB,QAAQ,OAAO,KAAA;GAC/B,GAAG;EACL;CACF,CAAC;AACH;AAIA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;CACtE,MAAM,EAAE,sBAAsB,aAAa;CAC3C,OACE,oBAAC,kBAAD;EACE,aAAU;EACV,IAAI;EACO;EACX,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,SAA2B;CACxE,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,MAAM,WAAW,EAAE,IAAI;CACnD,IAAI,CAAC,MACH,OAAO;CAET,OACE,oBAACA,cAAD;EAAY,aAAU;EAAe,IAAI;EAAe,OAAA;EAAiB;EAAW,GAAI;EACrF,UAAA;CACS,CAAA;AAEhB"}

package/dist/components/input.d.ts

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+//#region src/components/input.d.ts
+/**
+ * Input.
+ *
+ * A plain `<input>`; Base UI has no primitive for it and none is needed. The
+ * look is cortenaweb's: sunken surface, subtle border that strengthens on hover
+ * and takes the ring colour on focus. `aria-invalid` swaps the border and ring
+ * for the destructive pair so a Field can mark errors without extra classes.
+ */
+declare const inputClassName: string;
+export interface InputProps extends React.ComponentProps<"input"> {}
+declare function Input({ className, type, ...props }: InputProps): React.JSX.Element;
+//#endregion
+export { Input, inputClassName };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.js

@@ -0,0 +1,26 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input.tsx
+/**
+* Input.
+*
+* A plain `<input>`; Base UI has no primitive for it and none is needed. The
+* look is cortenaweb's: sunken surface, subtle border that strengthens on hover
+* and takes the ring colour on focus. `aria-invalid` swaps the border and ring
+* for the destructive pair so a Field can mark errors without extra classes.
+*/
+const inputClassName = /* @__PURE__ */ cn("flex h-10 w-full min-w-0 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-muted)] px-3 py-2", "text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]", "placeholder:text-[color:var(--ds-text-tertiary)]", "transition-[border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:border-[var(--ds-border-strong)]", "outline-none focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "file:border-0 file:bg-transparent file:text-[length:var(--ds-text-body-sm)] file:font-medium file:text-[color:var(--ds-foreground)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--ds-destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--ds-destructive)]/20");
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn(inputClassName, className),
+		...props
+	});
+}
+//#endregion
+export { Input, inputClassName };
+
+//# 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":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Input.\n *\n * A plain `<input>`; Base UI has no primitive for it and none is needed. The\n * look is cortenaweb's: sunken surface, subtle border that strengthens on hover\n * and takes the ring colour on focus. `aria-invalid` swaps the border and ring\n * for the destructive pair so a Field can mark errors without extra classes.\n */\nconst inputClassName = /* @__PURE__ */ cn(\n  \"flex h-10 w-full min-w-0 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-muted)] px-3 py-2\",\n  \"text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]\",\n  \"placeholder:text-[color:var(--ds-text-tertiary)]\",\n  \"transition-[border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n  \"hover:border-[var(--ds-border-strong)]\",\n  \"outline-none focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n  \"file:border-0 file:bg-transparent file:text-[length:var(--ds-text-body-sm)] file:font-medium file:text-[color:var(--ds-foreground)]\",\n  \"disabled:cursor-not-allowed disabled:opacity-50\",\n  \"aria-invalid:border-[var(--ds-destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--ds-destructive)]/20\",\n);\n\nexport interface InputProps extends React.ComponentProps<\"input\"> {}\n\nfunction Input({ className, type, ...props }: InputProps) {\n  return <input type={type} data-slot=\"input\" className={cn(inputClassName, className)} {...props} />;\n}\n\nexport { Input, inputClassName };\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,iBAAiC,mBACrC,0HACA,8HACA,oDACA,qGACA,0CACA,sHACA,uIACA,mDACA,kHACF;AAIA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAqB;CACxD,OAAO,oBAAC,SAAD;EAAa;EAAM,aAAU;EAAQ,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACpG"}

package/dist/components/kbd.d.ts

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+//#region src/components/kbd.d.ts
+/**
+ * Kbd — an inline keyboard-key cap. Mono caption-sm text on the sunken
+ * surface, with a heavier bottom border for the key-cap read.
+ */
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): React.JSX.Element;
+//#endregion
+export { Kbd };
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd.js

@@ -0,0 +1,20 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd.tsx
+/**
+* Kbd — an inline keyboard-key cap. Mono caption-sm text on the sunken
+* surface, with a heavier bottom border for the key-cap read.
+*/
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("inline-flex items-center px-1.5 py-0.5", "font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-sm)] leading-none", "bg-[var(--ds-muted)] text-[color:var(--ds-muted-foreground)]", "border border-b-2 border-[var(--ds-border)] rounded-[var(--ds-radius-sm)]", className),
+		...props
+	});
+}
+//#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":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Kbd — an inline keyboard-key cap. Mono caption-sm text on the sunken\n * surface, with a heavier bottom border for the key-cap read.\n */\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"inline-flex items-center px-1.5 py-0.5\",\n        \"font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-sm)] leading-none\",\n        \"bg-[var(--ds-muted)] text-[color:var(--ds-muted-foreground)]\",\n        \"border border-b-2 border-[var(--ds-border)] rounded-[var(--ds-radius-sm)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd };\n"],"mappings":";;;;;;;;;AASA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAsC;CACjE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0CACA,+FACA,gEACA,6EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/label.d.ts

@@ -0,0 +1,14 @@
+"use client";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/components/label.d.ts
+/**
+ * Label — a plain `<label>`. Base UI's Label lives inside Field, so this is
+ * the standalone form caption for anything that is not a Field.
+ */
+declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface LabelProps extends React.ComponentProps<"label">, VariantProps<typeof labelVariants> {}
+declare function Label({ className, ...props }: LabelProps): React.JSX.Element;
+//#endregion
+export { Label, labelVariants };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.js

@@ -0,0 +1,28 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/label.tsx
+/**
+* Label — a plain `<label>`. Base UI's Label lives inside Field, so this is
+* the standalone form caption for anything that is not a Field.
+*/
+const labelVariants = /* @__PURE__ */ cva([
+	"inline-flex items-center gap-2 select-none",
+	"text-[length:var(--ds-text-body-sm)] font-medium leading-none",
+	"text-[color:var(--ds-foreground)]",
+	"peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+	"group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-70"
+]);
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn(labelVariants(), className),
+		...props
+	});
+}
+//#endregion
+export { Label, labelVariants };
+
+//# 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 { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Label — a plain `<label>`. Base UI's Label lives inside Field, so this is\n * the standalone form caption for anything that is not a Field.\n */\nconst labelVariants = /* @__PURE__ */ cva([\n  \"inline-flex items-center gap-2 select-none\",\n  \"text-[length:var(--ds-text-body-sm)] font-medium leading-none\",\n  \"text-[color:var(--ds-foreground)]\",\n  \"peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  \"group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-70\",\n]);\n\nexport interface LabelProps\n  extends React.ComponentProps<\"label\">, VariantProps<typeof labelVariants> {}\n\nfunction Label({ className, ...props }: LabelProps) {\n  return <label data-slot=\"label\" className={cn(labelVariants(), className)} {...props} />;\n}\n\nexport { Label, labelVariants };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,gBAAgC,oBAAI;CACxC;CACA;CACA;CACA;CACA;AACF,CAAC;AAKD,SAAS,MAAM,EAAE,WAAW,GAAG,SAAqB;CAClD,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAQ,WAAW,GAAG,cAAc,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF"}

package/dist/components/loading-skeleton.d.ts

@@ -0,0 +1,22 @@
+"use client";
+import * as React from "react";
+//#region src/components/loading-skeleton.d.ts
+export type LoadingSkeletonPreset = "list" | "table" | "card" | "form";
+export interface LoadingSkeletonProps extends React.ComponentProps<"div"> {
+  /** Which shape of content is loading. */
+  preset?: LoadingSkeletonPreset;
+  /** Rows (list, table, form) or cards. Each preset has a sensible default. */
+  rows?: number;
+  /** Columns for `table` and `card`. */
+  columns?: number;
+}
+/**
+ * LoadingSkeleton — page-level placeholders assembled from Skeleton, one per
+ * shape of content: a list of rows with an avatar, a table with a header row,
+ * a grid of cards, or a stacked form. Announces itself as busy so assistive
+ * technology knows the region is loading; the blocks themselves are hidden.
+ */
+declare function LoadingSkeleton({ className, preset, rows, columns, ...props }: LoadingSkeletonProps): React.JSX.Element;
+//#endregion
+export { LoadingSkeleton };
+//# sourceMappingURL=loading-skeleton.d.ts.map