@elmeragroup/fuse 0.1.0-canary.1

package/components/field/field-frame.js

@@ -0,0 +1,100 @@
+import { cn } from "../../styles/cn.js";
+import { iconCrossfadeHidden, iconCrossfadeShown, iconCrossfadeTransition } from "../../styles/utils.js";
+import { Check } from "../../icons/generated/check.js";
+import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
+import { FieldDescription, FieldError, FieldLabel, FieldLegend, FieldRoot, FieldSet } from "./field.js";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/field/field-frame.tsx
+/**
+* Package-private FieldFrame layout. No axes — the frame
+* has one layout; TextField's public recipe composes these slots under its own
+* names. The four exported class names below are the same slots, resolved once.
+*/
+const fieldFrameVariants = tv({ slots: {
+	root: "group flex flex-col gap-1",
+	labelRow: "flex items-center justify-between",
+	content: "flex flex-col gap-1",
+	description: "text-sm text-pretty"
+} });
+const fieldFrameSlots = fieldFrameVariants();
+/** Default `Field.Root` stack for labeled (non-legend) composites. */
+const fieldFrameRootClass = fieldFrameSlots.root();
+/**
+* The heading row's own layout. Composites append their own classes (TextareaField the
+* counter gap) through {@link FieldFrameClassNames.labelRow}.
+*/
+const fieldFrameLabelRowClass = fieldFrameSlots.labelRow();
+/** Default wrapper around control + description when that wrapper is opted into. */
+const fieldFrameContentClass = fieldFrameSlots.content();
+/**
+* Default `Field.Description` class. `text-pretty` lives here, not on TextField's public
+* slot: Field.Description already paints it, and PhoneNumberField must not import
+* TextField's recipe to re-state it.
+*/
+const fieldFrameDescriptionClass = fieldFrameSlots.description();
+/**
+* Package-private heading/description/error frame for every labeled composite.
+* `heading="legend"` is the fieldset skeleton CheckboxGroup and
+* RadioGroup used to rebuild beside this module.
+*
+* It is not exported through `package.json#exports` and has no client directive. It owns
+* no state and its consumers are already client modules, so a directive would only widen
+* the client graph. `source-contracts.test.ts` keeps it directive-free.
+*
+* Keep exactly one `Field.Root` per composite so a nested root cannot break label wiring.
+*/
+function FieldFrame({ heading = "label", label, status, isPending = false, isSuccess = false, description, errorMessage, invalid, disabled, name, className, classNames, children }) {
+	const hasCrossfade = isPending || isSuccess;
+	const headingClass = classNames?.label;
+	const descriptionNode = description ? /* @__PURE__ */ jsx(FieldDescription, {
+		className: cn(fieldFrameDescriptionClass, classNames?.description),
+		children: description
+	}) : null;
+	const body = heading === "legend" ? /* @__PURE__ */ jsxs(Fragment, { children: [descriptionNode, children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [children, descriptionNode] });
+	const content = classNames?.content === void 0 ? body : /* @__PURE__ */ jsx("div", {
+		className: classNames.content,
+		children: body
+	});
+	const headingRow = label || status != null || hasCrossfade ? /* @__PURE__ */ jsxs("div", {
+		className: cn(fieldFrameLabelRowClass, classNames?.labelRow),
+		children: [
+			label ? heading === "legend" ? /* @__PURE__ */ jsx(FieldLegend, {
+				variant: "label",
+				className: headingClass,
+				children: label
+			}) : /* @__PURE__ */ jsx(FieldLabel, {
+				className: headingClass,
+				children: label
+			}) : null,
+			status,
+			hasCrossfade ? /* @__PURE__ */ jsxs("div", {
+				className: "relative size-3.5",
+				children: [/* @__PURE__ */ jsx(SpinnerGap, {
+					"aria-hidden": true,
+					className: cn("animate-spin absolute inset-0 m-auto size-3", iconCrossfadeTransition, isSuccess ? iconCrossfadeHidden : iconCrossfadeShown)
+				}), /* @__PURE__ */ jsx(Check, {
+					"aria-hidden": true,
+					className: cn("absolute inset-0 m-auto size-3.5", iconCrossfadeTransition, isSuccess ? iconCrossfadeShown : iconCrossfadeHidden)
+				})]
+			}) : null
+		]
+	}) : null;
+	const framed = /* @__PURE__ */ jsxs(Fragment, { children: [
+		headingRow,
+		content,
+		/* @__PURE__ */ jsx(FieldError, { children: errorMessage })
+	] });
+	return /* @__PURE__ */ jsx(FieldRoot, {
+		name,
+		invalid,
+		disabled,
+		className,
+		children: heading === "legend" ? /* @__PURE__ */ jsx(FieldSet, { children: framed }) : framed
+	});
+}
+FieldFrame.displayName = "FieldFrame";
+//#endregion
+export { FieldFrame, fieldFrameContentClass, fieldFrameDescriptionClass, fieldFrameLabelRowClass, fieldFrameRootClass, fieldFrameVariants };
+
+//# sourceMappingURL=field-frame.js.map

package/components/field/field-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-frame.js","names":[],"sources":["../../../src/components/field/field-frame.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\n\nimport { tv } from \"tailwind-variants\";\n\nimport { Check } from \"../../icons/generated/check\";\nimport { SpinnerGap } from \"../../icons/generated/spinner-gap\";\nimport { cn } from \"../../styles/cn\";\nimport { iconCrossfadeHidden, iconCrossfadeShown, iconCrossfadeTransition } from \"../../styles/utils\";\nimport { FieldDescription, FieldError, FieldLabel, FieldLegend, FieldRoot, FieldSet } from \"./field\";\n\n/**\n * Package-private FieldFrame layout. No axes — the frame\n * has one layout; TextField's public recipe composes these slots under its own\n * names. The four exported class names below are the same slots, resolved once.\n */\nexport const fieldFrameVariants = tv({\n  slots: {\n    root: \"group flex flex-col gap-1\",\n    labelRow: \"flex items-center justify-between\",\n    content: \"flex flex-col gap-1\",\n    description: \"text-sm text-pretty\",\n  },\n});\n\nconst fieldFrameSlots = fieldFrameVariants();\n\n/** Default `Field.Root` stack for labeled (non-legend) composites. */\nexport const fieldFrameRootClass = fieldFrameSlots.root();\n\n/**\n * The heading row's own layout. Composites append their own classes (TextareaField the\n * counter gap) through {@link FieldFrameClassNames.labelRow}.\n */\nexport const fieldFrameLabelRowClass = fieldFrameSlots.labelRow();\n\n/** Default wrapper around control + description when that wrapper is opted into. */\nexport const fieldFrameContentClass = fieldFrameSlots.content();\n\n/**\n * Default `Field.Description` class. `text-pretty` lives here, not on TextField's public\n * slot: Field.Description already paints it, and PhoneNumberField must not import\n * TextField's recipe to re-state it.\n */\nexport const fieldFrameDescriptionClass = fieldFrameSlots.description();\n\n/**\n * One class argument per part the frame paints. `content` opts into the\n * control/description wrapper and is the wrapper's class as given — no default merge.\n */\nexport type FieldFrameClassNames = {\n  /** The heading row. */\n  labelRow?: string;\n  /** `Field.Label` or `Field.Legend`. */\n  label?: string;\n  /**\n   * The content wrapper around control + description. Rendered when this class is\n   * given, as this string exactly; omitted, both are direct children of `Field.Root` /\n   * `Field.Set`.\n   */\n  content?: string;\n  /** `Field.Description`. */\n  description?: string;\n};\n\nexport type FieldFrameHeading = \"label\" | \"legend\";\n\nexport type FieldFrameProps = {\n  /**\n   * How the heading is labelled. `\"label\"` (default) renders `Field.Label`; `\"legend\"`\n   * wraps the body in `Field.Set` and renders `Field.Legend variant=\"label\"`.\n   */\n  heading?: FieldFrameHeading;\n  /** Visible heading. Falsy renders no label/legend element. */\n  label?: string;\n  /**\n   * Component-owned status face at the end of the heading row — TextareaField's\n   * character counter, RadioGroup's pending spinner. Its presence forces the row to\n   * exist, the same way `isPending` and `isSuccess` do.\n   */\n  status?: ReactNode;\n  /** Shows the spinner face of the label-row crossfade. */\n  isPending?: boolean;\n  /** Shows the check face, which wins the crossfade over {@link FieldFrameProps.isPending}. */\n  isSuccess?: boolean;\n  /** Supporting copy, rendered as `Field.Description` when truthy. */\n  description?: ReactNode;\n  /** Error copy, rendered as `Field.Error`, which self-suppresses on falsy children. */\n  errorMessage?: ReactNode;\n  /** Forwarded to `Field.Root`. */\n  invalid?: boolean;\n  /** Forwarded to `Field.Root`. */\n  disabled?: boolean;\n  /** Forwarded to `Field.Root`. CheckboxGroup threads its `name` here. */\n  name?: string;\n  /** Extra classes, merged onto `Field.Root`. */\n  className?: string;\n  /** Per-part classes; see {@link FieldFrameClassNames}. */\n  classNames?: FieldFrameClassNames;\n  /** The control this frame labels. */\n  children: ReactNode;\n};\n\n/**\n * Package-private heading/description/error frame for every labeled composite.\n * `heading=\"legend\"` is the fieldset skeleton CheckboxGroup and\n * RadioGroup used to rebuild beside this module.\n *\n * It is not exported through `package.json#exports` and has no client directive. It owns\n * no state and its consumers are already client modules, so a directive would only widen\n * the client graph. `source-contracts.test.ts` keeps it directive-free.\n *\n * Keep exactly one `Field.Root` per composite so a nested root cannot break label wiring.\n */\nexport function FieldFrame({\n  heading = \"label\",\n  label,\n  status,\n  isPending = false,\n  isSuccess = false,\n  description,\n  errorMessage,\n  invalid,\n  disabled,\n  name,\n  className,\n  classNames,\n  children,\n}: FieldFrameProps): ReactElement {\n  const hasCrossfade = isPending || isSuccess;\n  const headingClass = classNames?.label;\n  const descriptionNode = description ? (\n    <FieldDescription className={cn(fieldFrameDescriptionClass, classNames?.description)}>\n      {description}\n    </FieldDescription>\n  ) : null;\n  const body =\n    heading === \"legend\" ? (\n      <>\n        {descriptionNode}\n        {children}\n      </>\n    ) : (\n      <>\n        {children}\n        {descriptionNode}\n      </>\n    );\n  const content = classNames?.content === undefined ? body : <div className={classNames.content}>{body}</div>;\n  const headingRow =\n    label || status != null || hasCrossfade ? (\n      <div className={cn(fieldFrameLabelRowClass, classNames?.labelRow)}>\n        {label ? (\n          heading === \"legend\" ? (\n            <FieldLegend variant=\"label\" className={headingClass}>\n              {label}\n            </FieldLegend>\n          ) : (\n            <FieldLabel className={headingClass}>{label}</FieldLabel>\n          )\n        ) : null}\n        {status}\n        {hasCrossfade ? (\n          <div className=\"relative size-3.5\">\n            <SpinnerGap\n              aria-hidden\n              className={cn(\n                \"animate-spin absolute inset-0 m-auto size-3\",\n                iconCrossfadeTransition,\n                isSuccess ? iconCrossfadeHidden : iconCrossfadeShown\n              )}\n            />\n            <Check\n              aria-hidden\n              className={cn(\n                \"absolute inset-0 m-auto size-3.5\",\n                iconCrossfadeTransition,\n                isSuccess ? iconCrossfadeShown : iconCrossfadeHidden\n              )}\n            />\n          </div>\n        ) : null}\n      </div>\n    ) : null;\n  const framed = (\n    <>\n      {headingRow}\n      {content}\n      <FieldError>{errorMessage}</FieldError>\n    </>\n  );\n\n  return (\n    <FieldRoot name={name} invalid={invalid} disabled={disabled} className={className}>\n      {heading === \"legend\" ? <FieldSet>{framed}</FieldSet> : framed}\n    </FieldRoot>\n  );\n}\n\nFieldFrame.displayName = \"FieldFrame\";\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,qBAAqB,GAAG,EACnC,OAAO;CACL,MAAM;CACN,UAAU;CACV,SAAS;CACT,aAAa;AACf,EACF,CAAC;AAED,MAAM,kBAAkB,mBAAmB;;AAG3C,MAAa,sBAAsB,gBAAgB,KAAK;;;;;AAMxD,MAAa,0BAA0B,gBAAgB,SAAS;;AAGhE,MAAa,yBAAyB,gBAAgB,QAAQ;;;;;;AAO9D,MAAa,6BAA6B,gBAAgB,YAAY;;;;;;;;;;;;AAsEtE,SAAgB,WAAW,EACzB,UAAU,SACV,OACA,QACA,YAAY,OACZ,YAAY,OACZ,aACA,cACA,SACA,UACA,MACA,WACA,YACA,YACgC;CAChC,MAAM,eAAe,aAAa;CAClC,MAAM,eAAe,YAAY;CACjC,MAAM,kBAAkB,cACtB,oBAAC,kBAAD;EAAkB,WAAW,GAAG,4BAA4B,YAAY,WAAW;EAChF,UAAA;CACe,CAAA,IAChB;CACJ,MAAM,OACJ,YAAY,WACV,qBAAA,UAAA,EAAA,UAAA,CACG,iBACA,QACD,EAAA,CAAA,IAEF,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,eACD,EAAA,CAAA;CAEN,MAAM,UAAU,YAAY,YAAY,KAAA,IAAY,OAAO,oBAAC,OAAD;EAAK,WAAW,WAAW;EAAU,UAAA;CAAU,CAAA;CAC1G,MAAM,aACJ,SAAS,UAAU,QAAQ,eACzB,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,YAAY,QAAQ;EAAhE,UAAA;GACG,QACC,YAAY,WACV,oBAAC,aAAD;IAAa,SAAQ;IAAQ,WAAW;IACrC,UAAA;GACU,CAAA,IAEb,oBAAC,YAAD;IAAY,WAAW;IAAe,UAAA;GAAkB,CAAA,IAExD;GACH;GACA,eACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,YAAD;KACE,eAAA;KACA,WAAW,GACT,+CACA,yBACA,YAAY,sBAAsB,kBACpC;IACD,CAAA,GACD,oBAAC,OAAD;KACE,eAAA;KACA,WAAW,GACT,oCACA,yBACA,YAAY,qBAAqB,mBACnC;IACD,CAAA,CACE;GACH,CAAA,IAAA;EACD;CACH,CAAA,IAAA;CACN,MAAM,SACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA;EACD,oBAAC,YAAD,EAAA,UAAa,aAAyB,CAAA;CACtC,EAAA,CAAA;CAGJ,OACE,oBAAC,WAAD;EAAiB;EAAe;EAAmB;EAAqB;EACrE,UAAA,YAAY,WAAW,oBAAC,UAAD,EAAA,UAAW,OAAiB,CAAA,IAAI;CAC/C,CAAA;AAEf;AAEA,WAAW,cAAc"}

package/components/field/field-variants.d.ts

@@ -0,0 +1,49 @@
+//#region src/components/field/field-variants.d.ts
+export declare const fieldVariants: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {
+      root: string;
+    };
+    horizontal: {
+      root: string;
+    };
+    responsive: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  heading: string;
+}, undefined, {
+  orientation: {
+    vertical: {
+      root: string;
+    };
+    horizontal: {
+      root: string;
+    };
+    responsive: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  heading: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {
+      root: string;
+    };
+    horizontal: {
+      root: string;
+    };
+    responsive: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  heading: string;
+}>>;
+//#endregion
+//# sourceMappingURL=field-variants.d.ts.map

package/components/field/field-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-variants.d.ts","names":[],"sources":["../../../src/components/field/field-variants.ts"],"mappings":";qBAQa,2CAAa;;IAOpB;MACE;;IAEF;MACE;;IAEF;MACE"}

package/components/field/field-variants.js

@@ -0,0 +1,24 @@
+import { tv } from "tailwind-variants";
+//#region src/components/field/field-variants.ts
+/**
+* Module-private Field recipes. Not exported from the public
+* entry — there is no proven recipe-borrowing use. `orientation` is the Root
+* axis; `heading` is the Label/Title shared class, resolved once at module
+* scope in `field.tsx`.
+*/
+const fieldVariants = tv({
+	slots: {
+		root: "group/field flex w-full gap-3 data-invalid:text-error",
+		heading: "text-sm font-medium flex w-fit gap-2 group-data-disabled/field:opacity-50"
+	},
+	variants: { orientation: {
+		vertical: { root: "flex-col *:w-full [&>.sr-only]:w-auto" },
+		horizontal: { root: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-field-heading:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px" },
+		responsive: { root: "@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-field-heading:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full [&>.sr-only]:w-auto" }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { fieldVariants };
+
+//# sourceMappingURL=field-variants.js.map

package/components/field/field-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-variants.js","names":[],"sources":["../../../src/components/field/field-variants.ts"],"sourcesContent":["/**\n * Module-private Field recipes. Not exported from the public\n * entry — there is no proven recipe-borrowing use. `orientation` is the Root\n * axis; `heading` is the Label/Title shared class, resolved once at module\n * scope in `field.tsx`.\n */\nimport { tv } from \"tailwind-variants\";\n\nexport const fieldVariants = tv({\n  slots: {\n    root: \"group/field flex w-full gap-3 data-invalid:text-error\",\n    heading: \"text-sm font-medium flex w-fit gap-2 group-data-disabled/field:opacity-50\",\n  },\n  variants: {\n    orientation: {\n      vertical: {\n        root: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      },\n      horizontal: {\n        root: \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-field-heading:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n      responsive: {\n        root: \"@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-field-heading:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full [&>.sr-only]:w-auto\",\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n"],"mappings":";;;;;;;;AAQA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,MAAM;EACN,SAAS;CACX;CACA,UAAU,EACR,aAAa;EACX,UAAU,EACR,MAAM,wCACR;EACA,YAAY,EACV,MAAM,4KACR;EACA,YAAY,EACV,MAAM,2TACR;CACF,EACF;CACA,iBAAiB,EACf,aAAa,WACf;AACF,CAAC"}

package/components/field/field.d.ts

@@ -0,0 +1,73 @@
+import { fieldVariants } from "./field-variants.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { VariantProps } from "tailwind-variants";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/field/field.d.ts
+export declare function FieldRoot({ className, orientation, ...props }: ComponentProps<typeof Field.Root> & VariantProps<typeof fieldVariants>): ReactElement;
+export declare namespace FieldRoot {
+  var displayName: string;
+}
+export declare function FieldSet({ className, ...props }: ComponentProps<typeof Fieldset.Root>): ReactElement;
+export declare namespace FieldSet {
+  var displayName: string;
+}
+export declare function FieldLegend({ className, variant, ...props }: ComponentProps<typeof Fieldset.Legend> & {
+  /**
+   * Emitted as `data-variant` and drives the text size: `"legend"` (default) titles the
+   * fieldset, `"label"` sizes it down to match a `Field.Label`.
+   */
+  variant?: "legend" | "label";
+}): ReactElement;
+export declare namespace FieldLegend {
+  var displayName: string;
+}
+export declare function FieldGroup({ className, ...props }: ComponentProps<"div">): ReactElement;
+export declare namespace FieldGroup {
+  var displayName: string;
+}
+export declare function FieldContent({ className, ...props }: ComponentProps<"div">): ReactElement;
+export declare namespace FieldContent {
+  var displayName: string;
+}
+/**
+ * A label whose direct child is a `Checkbox` renders as a choice row: centered with a pointer
+ * cursor. The heading weight is the same as any other label; a consumer `font-*` class wins through
+ * the merge.
+ */
+export declare function FieldLabel({ className, ...props }: ComponentProps<typeof Field.Label>): ReactElement;
+export declare namespace FieldLabel {
+  var displayName: string;
+}
+export declare function FieldTitle({ className, ...props }: ComponentProps<"div">): ReactElement;
+export declare namespace FieldTitle {
+  var displayName: string;
+}
+export declare function FieldControl(props: ComponentProps<typeof Field.Control>): ReactElement;
+export declare namespace FieldControl {
+  var displayName: string;
+}
+export declare function FieldDescription({ className, ...props }: ComponentProps<typeof Field.Description>): ReactElement;
+export declare namespace FieldDescription {
+  var displayName: string;
+}
+export declare function FieldItem(props: ComponentProps<typeof Field.Item>): ReactElement;
+export declare namespace FieldItem {
+  var displayName: string;
+}
+export declare function FieldSeparator({ children, className, ...props }: ComponentProps<"div"> & {
+  /**
+   * Optional inline content rendered over the rule — a label for the break between two
+   * groups of fields. Its presence is reflected as `data-content`.
+   */
+  children?: ReactNode;
+}): ReactElement;
+export declare namespace FieldSeparator {
+  var displayName: string;
+}
+export declare function FieldError({ className, children, ...props }: ComponentProps<typeof Field.Error>): ReactElement | null;
+export declare namespace FieldError {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","names":[],"sources":["../../../src/components/field/field.tsx"],"mappings":";;;;;;wBAcgB,YACd,WACA,gBACG,SACF,sBAAsB,MAAe,QAAQ,oBAAoB,iBAAiB;yBAJrE;MAAA;;wBAeA,WACd,cACG,SACF,sBAAsB,SAAkB,QAAQ;yBAHnC;MAAA;;wBAgBA,cACd,WACA,YACG,SACF,sBAAsB,SAAkB;;;;;EAKzC;IACE;yBAVY;MAAA;;wBAwBA,aAAa,cAAc,SAAS,wBAAwB;yBAA5D;MAAA;;wBAaA,eAAe,cAAc,SAAS,wBAAwB;yBAA9D;MAAA;;;;;;;wBAiBA,aACd,cACG,SACF,sBAAsB,MAAe,SAAS;yBAHjC;MAAA;;wBAoBA,aAAa,cAAc,SAAS,wBAAwB;yBAA5D;MAAA;;wBAWA,aAAa,OAAO,sBAAsB,MAAe,WAAW;yBAApE;MAAA;;wBAIA,mBACd,cACG,SACF,sBAAsB,MAAe,eAAe;yBAHvC;MAAA;;wBAgBA,UAAU,OAAO,sBAAsB,MAAe,QAAQ;yBAA9D;MAAA;;wBAIA,iBACd,UACA,cACG,SACF;;;;;EAKD,WAAW;IACT;yBAVY;MAAA;;wBA6BA,aACd,WACA,aACG,SACF,sBAAsB,MAAe,SAAS;yBAJjC;MAAA"}

package/components/field/field.js

@@ -0,0 +1,128 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { definedProps } from "../../internal/defined-props.js";
+import { mergeClassName } from "../../styles/merge-class-name.js";
+import { Separator } from "../separator/separator.js";
+import { fieldVariants } from "./field-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/field/field.tsx
+function FieldRoot({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Field.Root, {
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: mergeClassName(className, fieldVariants({ orientation }).root()),
+		...props
+	});
+}
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Root, {
+		"data-slot": "field-set",
+		className: mergeClassName(className, "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3"),
+		...definedProps(props)
+	});
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: mergeClassName(className, "font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base mb-3 text-balance"),
+		...definedProps(props)
+	});
+}
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 *:data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 *:data-[slot=radio-group]:gap-3", className),
+		...props
+	});
+}
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content leading-snug flex flex-1 flex-col gap-1", className),
+		...props
+	});
+}
+const fieldHeadingClassName = fieldVariants().heading();
+/**
+* A label whose direct child is a `Checkbox` renders as a choice row: centered with a pointer
+* cursor. The heading weight is the same as any other label; a consumer `font-*` class wins through
+* the merge.
+*/
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-slot": "field-label",
+		"data-field-heading": "",
+		className: mergeClassName(className, "group/field-label peer/field-label leading-snug has-data-checked:border-primary/30 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", "has-[>[data-slot=checkbox]]:items-center has-[>[data-slot=checkbox]]:cursor-pointer", fieldHeadingClassName),
+		...definedProps(props)
+	});
+}
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-title",
+		"data-field-heading": "",
+		className: cn("items-center", fieldHeadingClassName, className),
+		...props
+	});
+}
+function FieldControl(props) {
+	return /* @__PURE__ */ jsx(Field.Control, {
+		"data-slot": "field-control",
+		...definedProps(props)
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Description, {
+		"data-slot": "field-description",
+		className: mergeClassName(className, "text-sm leading-normal font-normal text-left text-pretty text-muted-foreground group-has-data-horizontal/field:text-balance last:mt-0 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary [[data-variant=legend]+&]:-mt-1.5"),
+		...definedProps(props)
+	});
+}
+function FieldItem(props) {
+	return /* @__PURE__ */ jsx(Field.Item, {
+		"data-slot": "field-item",
+		...props
+	});
+}
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": children ? "true" : "false",
+		className: cn("text-sm relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children ? /* @__PURE__ */ jsx("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children
+		}) : null]
+	});
+}
+function FieldError({ className, children, ...props }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(Field.Error, {
+		match: true,
+		role: "alert",
+		"data-slot": "field-error",
+		className: mergeClassName(className, "text-sm font-normal text-error"),
+		...definedProps(props),
+		children
+	});
+}
+FieldRoot.displayName = "Field.Root";
+FieldLabel.displayName = "Field.Label";
+FieldDescription.displayName = "Field.Description";
+FieldError.displayName = "Field.Error";
+FieldControl.displayName = "Field.Control";
+FieldItem.displayName = "Field.Item";
+FieldContent.displayName = "Field.Content";
+FieldGroup.displayName = "Field.Group";
+FieldSet.displayName = "Field.Set";
+FieldLegend.displayName = "Field.Legend";
+FieldSeparator.displayName = "Field.Separator";
+FieldTitle.displayName = "Field.Title";
+//#endregion
+export { FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldItem, FieldLabel, FieldLegend, FieldRoot, FieldSeparator, FieldSet, FieldTitle };
+
+//# sourceMappingURL=field.js.map

package/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":["FieldPrimitive","FieldsetPrimitive"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { Fieldset as FieldsetPrimitive } from \"@base-ui/react/fieldset\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { mergeClassName } from \"../../styles/merge-class-name\";\nimport { Separator } from \"../separator/separator\";\nimport { fieldVariants } from \"./field-variants\";\n\nexport function FieldRoot({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Root> & VariantProps<typeof fieldVariants>): ReactElement {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={mergeClassName(className, fieldVariants({ orientation }).root())}\n      {...props}\n    />\n  );\n}\n\nexport function FieldSet({\n  className,\n  ...props\n}: ComponentProps<typeof FieldsetPrimitive.Root>): ReactElement {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot=\"field-set\"\n      className={mergeClassName(\n        className,\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\"\n      )}\n      {...definedProps(props)}\n    />\n  );\n}\n\nexport function FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: ComponentProps<typeof FieldsetPrimitive.Legend> & {\n  /**\n   * Emitted as `data-variant` and drives the text size: `\"legend\"` (default) titles the\n   * fieldset, `\"label\"` sizes it down to match a `Field.Label`.\n   */\n  variant?: \"legend\" | \"label\";\n}): ReactElement {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={mergeClassName(\n        className,\n        \"font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base mb-3 text-balance\"\n      )}\n      {...definedProps(props)}\n    />\n  );\n}\n\nexport function FieldGroup({ className, ...props }: ComponentProps<\"div\">): ReactElement {\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-7 *:data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 *:data-[slot=radio-group]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function FieldContent({ className, ...props }: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content leading-snug flex flex-1 flex-col gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nconst fieldHeadingClassName = fieldVariants().heading();\n\n/**\n * A label whose direct child is a `Checkbox` renders as a choice row: centered with a pointer\n * cursor. The heading weight is the same as any other label; a consumer `font-*` class wins through\n * the merge.\n */\nexport function FieldLabel({\n  className,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Label>): ReactElement {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      data-field-heading=\"\"\n      className={mergeClassName(\n        className,\n        \"group/field-label peer/field-label leading-snug has-data-checked:border-primary/30 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        \"has-[>[data-slot=checkbox]]:items-center has-[>[data-slot=checkbox]]:cursor-pointer\",\n        fieldHeadingClassName\n      )}\n      {...definedProps(props)}\n    />\n  );\n}\n\nexport function FieldTitle({ className, ...props }: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"field-title\"\n      data-field-heading=\"\"\n      className={cn(\"items-center\", fieldHeadingClassName, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldControl(props: ComponentProps<typeof FieldPrimitive.Control>): ReactElement {\n  return <FieldPrimitive.Control data-slot=\"field-control\" {...definedProps(props)} />;\n}\n\nexport function FieldDescription({\n  className,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Description>): ReactElement {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={mergeClassName(\n        className,\n        \"text-sm leading-normal font-normal text-left text-pretty text-muted-foreground group-has-data-horizontal/field:text-balance last:mt-0 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary [[data-variant=legend]+&]:-mt-1.5\"\n      )}\n      {...definedProps(props)}\n    />\n  );\n}\n\nexport function FieldItem(props: ComponentProps<typeof FieldPrimitive.Item>): ReactElement {\n  return <FieldPrimitive.Item data-slot=\"field-item\" {...props} />;\n}\n\nexport function FieldSeparator({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\"> & {\n  /**\n   * Optional inline content rendered over the rule — a label for the break between two\n   * groups of fields. Its presence is reflected as `data-content`.\n   */\n  children?: ReactNode;\n}): ReactElement {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={children ? \"true\" : \"false\"}\n      className={cn(\"text-sm relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2\", className)}\n      {...props}>\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          {children}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport function FieldError({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Error>): ReactElement | null {\n  if (!children) {\n    return null;\n  }\n  return (\n    <FieldPrimitive.Error\n      match\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={mergeClassName(className, \"text-sm font-normal text-error\")}\n      {...definedProps(props)}>\n      {children}\n    </FieldPrimitive.Error>\n  );\n}\n\nFieldRoot.displayName = \"Field.Root\";\nFieldLabel.displayName = \"Field.Label\";\nFieldDescription.displayName = \"Field.Description\";\nFieldError.displayName = \"Field.Error\";\nFieldControl.displayName = \"Field.Control\";\nFieldItem.displayName = \"Field.Item\";\nFieldContent.displayName = \"Field.Content\";\nFieldGroup.displayName = \"Field.Group\";\nFieldSet.displayName = \"Field.Set\";\nFieldLegend.displayName = \"Field.Legend\";\nFieldSeparator.displayName = \"Field.Separator\";\nFieldTitle.displayName = \"Field.Title\";\n"],"mappings":"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"}

package/components/field/index.d.ts

@@ -0,0 +1,18 @@
+import { FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldItem, FieldLabel, FieldLegend, FieldRoot, FieldSeparator, FieldSet, FieldTitle } from "./field.js";
+//#region src/components/field/index.d.ts
+export declare const Field: {
+  Root: typeof FieldRoot;
+  Label: typeof FieldLabel;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+  Control: typeof FieldControl;
+  Item: typeof FieldItem;
+  Content: typeof FieldContent;
+  Group: typeof FieldGroup;
+  Set: typeof FieldSet;
+  Legend: typeof FieldLegend;
+  Separator: typeof FieldSeparator;
+  Title: typeof FieldTitle;
+};
+//#endregion
+//# sourceMappingURL=index.d.ts.map

package/components/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/field/index.ts"],"mappings":";;qBAoBa;EACX,aAAI;EACJ,cAAK;EACL,oBAAW;EACX,cAAK;EACL,gBAAO;EACP,aAAI;EACJ,gBAAO;EACP,cAAK;EACL,YAAG;EACH,eAAM;EACN,kBAAS;EACT,cAAK"}

package/components/field/index.js

@@ -0,0 +1,25 @@
+import { FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldItem, FieldLabel, FieldLegend, FieldRoot, FieldSeparator, FieldSet, FieldTitle } from "./field.js";
+//#region src/components/field/index.ts
+/**
+* Server-visible namespace for `Field`.
+* The implementation stays a client module; this file has no directive,
+* so a server component can read each part instead of dotting into a client reference.
+*/
+const Field = {
+	Root: FieldRoot,
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError,
+	Control: FieldControl,
+	Item: FieldItem,
+	Content: FieldContent,
+	Group: FieldGroup,
+	Set: FieldSet,
+	Legend: FieldLegend,
+	Separator: FieldSeparator,
+	Title: FieldTitle
+};
+//#endregion
+export { Field };
+
+//# sourceMappingURL=index.js.map

package/components/field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/field/index.ts"],"sourcesContent":["/**\n * Server-visible namespace for `Field`.\n * The implementation stays a client module; this file has no directive,\n * so a server component can read each part instead of dotting into a client reference.\n */\nimport {\n  FieldRoot,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldControl,\n  FieldItem,\n  FieldContent,\n  FieldGroup,\n  FieldSet,\n  FieldLegend,\n  FieldSeparator,\n  FieldTitle,\n} from \"./field\";\n\nexport const Field = {\n  Root: FieldRoot,\n  Label: FieldLabel,\n  Description: FieldDescription,\n  Error: FieldError,\n  Control: FieldControl,\n  Item: FieldItem,\n  Content: FieldContent,\n  Group: FieldGroup,\n  Set: FieldSet,\n  Legend: FieldLegend,\n  Separator: FieldSeparator,\n  Title: FieldTitle,\n};\n"],"mappings":";;;;;;;AAoBA,MAAa,QAAQ;CACnB,MAAM;CACN,OAAO;CACP,aAAa;CACb,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,KAAK;CACL,QAAQ;CACR,WAAW;CACX,OAAO;AACT"}

package/components/frame/frame.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps, ReactElement } from "react";
+//#region src/components/frame/frame.d.ts
+export type FrameRootProps = ComponentProps<"div"> & {
+  /**
+   * Fuse adjacent `Frame.Panel`s into one card (shared radii and hairline). Default
+   * `false` keeps a 4px muted gutter between panels.
+   */
+  stackedPanels?: boolean;
+};
+export type FramePanelProps = ComponentProps<"div">;
+export type FrameHeaderProps = ComponentProps<"header">;
+export type FrameTitleProps = ComponentProps<"div">;
+export type FrameDescriptionProps = ComponentProps<"div">;
+export type FrameFooterProps = ComponentProps<"footer">;
+declare function FrameRoot({ className, stackedPanels, ...props }: FrameRootProps): ReactElement;
+declare function FramePanel({ className, ...props }: FramePanelProps): ReactElement;
+declare function FrameHeader({ className, ...props }: FrameHeaderProps): ReactElement;
+declare function FrameTitle({ className, ...props }: FrameTitleProps): ReactElement;
+declare function FrameDescription({ className, ...props }: FrameDescriptionProps): ReactElement;
+declare function FrameFooter({ className, ...props }: FrameFooterProps): ReactElement;
+export declare const Frame: {
+  Root: typeof FrameRoot;
+  Panel: typeof FramePanel;
+  Header: typeof FrameHeader;
+  Title: typeof FrameTitle;
+  Description: typeof FrameDescription;
+  Footer: typeof FrameFooter;
+};
+//#endregion
+//# sourceMappingURL=frame.d.ts.map

package/components/frame/frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","names":[],"sources":["../../../src/components/frame/frame.tsx"],"mappings":";;YAIY,iBAAiB;;;;;EAK3B;;YAEU,kBAAkB;YAClB,mBAAmB;YACnB,kBAAkB;YAClB,wBAAwB;YACxB,mBAAmB;iBAEtB,YAAY,WAAW,kBAA0B,SAAS,iBAAiB;iBAgB3E,aAAa,cAAc,SAAS,kBAAkB;iBAatD,cAAc,cAAc,SAAS,mBAAmB;iBAMxD,aAAa,cAAc,SAAS,kBAAkB;iBAItD,mBAAmB,cAAc,SAAS,wBAAwB;iBAUlE,cAAc,cAAc,SAAS,mBAAmB;qBAiBpD;EACX,aAAI;EACJ,cAAK;EACL,eAAM;EACN,cAAK;EACL,oBAAW;EACX,eAAM"}

package/components/frame/frame.js

@@ -0,0 +1,63 @@
+import { cn } from "../../styles/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/frame/frame.tsx
+function FrameRoot({ className, stackedPanels = false, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "frame",
+		className: cn("relative flex flex-col rounded-xl bg-muted/72 p-1", stackedPanels ? "*:has-[+[data-slot=frame-panel]]:rounded-b-none *:has-[+[data-slot=frame-panel]]:before:hidden *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0" : "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1", className),
+		...props
+	});
+}
+function FramePanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "frame-panel",
+		className: cn("shadow-xs/5 before:shadow-[0_1px_--theme(--color-black/6%)] relative rounded-xl border bg-background bg-clip-padding p-5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(--theme(--radius-xl)-1px)]", className),
+		...props
+	});
+}
+function FrameHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "frame-panel-header",
+		className: cn("flex flex-col px-5 py-4", className),
+		...props
+	});
+}
+function FrameTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "frame-panel-title",
+		className: cn("text-sm font-semibold", className),
+		...props
+	});
+}
+function FrameDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "frame-panel-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+function FrameFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		"data-slot": "frame-panel-footer",
+		className: cn("flex flex-col gap-1 px-5 py-4", className),
+		...props
+	});
+}
+FrameRoot.displayName = "Frame.Root";
+FramePanel.displayName = "Frame.Panel";
+FrameHeader.displayName = "Frame.Header";
+FrameTitle.displayName = "Frame.Title";
+FrameDescription.displayName = "Frame.Description";
+FrameFooter.displayName = "Frame.Footer";
+const Frame = {
+	Root: FrameRoot,
+	Panel: FramePanel,
+	Header: FrameHeader,
+	Title: FrameTitle,
+	Description: FrameDescription,
+	Footer: FrameFooter
+};
+//#endregion
+export { Frame };
+
+//# sourceMappingURL=frame.js.map

package/components/frame/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","names":[],"sources":["../../../src/components/frame/frame.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement } from \"react\";\n\nimport { cn } from \"../../styles/cn\";\n\nexport type FrameRootProps = ComponentProps<\"div\"> & {\n  /**\n   * Fuse adjacent `Frame.Panel`s into one card (shared radii and hairline). Default\n   * `false` keeps a 4px muted gutter between panels.\n   */\n  stackedPanels?: boolean;\n};\nexport type FramePanelProps = ComponentProps<\"div\">;\nexport type FrameHeaderProps = ComponentProps<\"header\">;\nexport type FrameTitleProps = ComponentProps<\"div\">;\nexport type FrameDescriptionProps = ComponentProps<\"div\">;\nexport type FrameFooterProps = ComponentProps<\"footer\">;\n\nfunction FrameRoot({ className, stackedPanels = false, ...props }: FrameRootProps): ReactElement {\n  return (\n    <div\n      data-slot=\"frame\"\n      className={cn(\n        \"relative flex flex-col rounded-xl bg-muted/72 p-1\",\n        stackedPanels\n          ? \"*:has-[+[data-slot=frame-panel]]:rounded-b-none *:has-[+[data-slot=frame-panel]]:before:hidden *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0\"\n          : \"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FramePanel({ className, ...props }: FramePanelProps): ReactElement {\n  return (\n    <div\n      data-slot=\"frame-panel\"\n      className={cn(\n        \"shadow-xs/5 before:shadow-[0_1px_--theme(--color-black/6%)] relative rounded-xl border bg-background bg-clip-padding p-5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(--theme(--radius-xl)-1px)]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FrameHeader({ className, ...props }: FrameHeaderProps): ReactElement {\n  return (\n    <header data-slot=\"frame-panel-header\" className={cn(\"flex flex-col px-5 py-4\", className)} {...props} />\n  );\n}\n\nfunction FrameTitle({ className, ...props }: FrameTitleProps): ReactElement {\n  return <div data-slot=\"frame-panel-title\" className={cn(\"text-sm font-semibold\", className)} {...props} />;\n}\n\nfunction FrameDescription({ className, ...props }: FrameDescriptionProps): ReactElement {\n  return (\n    <div\n      data-slot=\"frame-panel-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FrameFooter({ className, ...props }: FrameFooterProps): ReactElement {\n  return (\n    <footer\n      data-slot=\"frame-panel-footer\"\n      className={cn(\"flex flex-col gap-1 px-5 py-4\", className)}\n      {...props}\n    />\n  );\n}\n\nFrameRoot.displayName = \"Frame.Root\";\nFramePanel.displayName = \"Frame.Panel\";\nFrameHeader.displayName = \"Frame.Header\";\nFrameTitle.displayName = \"Frame.Title\";\nFrameDescription.displayName = \"Frame.Description\";\nFrameFooter.displayName = \"Frame.Footer\";\n\nexport const Frame = {\n  Root: FrameRoot,\n  Panel: FramePanel,\n  Header: FrameHeader,\n  Title: FrameTitle,\n  Description: FrameDescription,\n  Footer: FrameFooter,\n};\n"],"mappings":";;;AAiBA,SAAS,UAAU,EAAE,WAAW,gBAAgB,OAAO,GAAG,SAAuC;CAC/F,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qDACA,gBACI,qOACA,4DACJ,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAwC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAyC;CAC5E,OACE,oBAAC,UAAD;EAAQ,aAAU;EAAqB,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE5G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAwC;CAC1E,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAoB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC3G;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAA8C;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAyC;CAC5E,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc;AACxB,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAC/B,YAAY,cAAc;AAE1B,MAAa,QAAQ;CACnB,MAAM;CACN,OAAO;CACP,QAAQ;CACR,OAAO;CACP,aAAa;CACb,QAAQ;AACV"}