@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/field-parts.d.ts

@@ -0,0 +1,224 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+
+/**
+ * The pieces of a field's anatomy the kit's fields share — the static label, the hint
+ * (caption or "?"), the caption and the error under a field, the label strip over a
+ * bare group, the write lock on a control that saves itself. Private to the package —
+ * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,
+ * which ui.tsx re-exports as it always has.
+ *
+ * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and
+ * month pickers, whose trigger is a button in a wrapper of their own, and the groups
+ * with no field box) sat beside this one with its own copies of `isTextHint` and the
+ * caption class (keksdose K4: "uniform field anatomy … today it is a patchwork").
+ *
+ * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,
+ * the pickers and the native choice controls — the lint's no-cycle rule holds it.
+ */
+declare const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+declare const FLOATING_LABEL_STATIC: string;
+/**
+ * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
+ * button not a labelable input). Same placement as {@link FloatingField}'s static label,
+ * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
+ */
+interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
+    children: ReactNode;
+}
+declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
+/**
+ * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or
+ * something for the label line (a {@link FieldHint} "?", or any other node).
+ *
+ * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of
+ * strip shared with the label, and a sentence placed there ran over the label and into
+ * the value; a "?" under the field would be a button floating free of the label it
+ * explains.
+ */
+declare function isTextHint(hint: ReactNode): hint is string | number;
+/** The caption under a field — Select's and NumberInput's type, so every field's
+ *  standing advice reads alike. */
+declare const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+interface FieldHintParts {
+    /** The caller's `aria-describedby` with the caption's id appended — standing
+     *  advice first; the error (the news) is appended after this by the field. */
+    describedBy: string | undefined;
+    /** The caption's id while there is one. */
+    captionId: string | undefined;
+    /** The caption itself, or `undefined` for a hint that is not text. */
+    captionText: string | number | undefined;
+    /** A non-text hint (a FieldHint) for the label line — or, on a field with no label
+     *  line, the end edge outside the box. `undefined` when there is none. */
+    labelHint: ReactNode | undefined;
+}
+/**
+ * Split a field's `hint` into the caption under it (attached with `aria-describedby`)
+ * or the "?" on its label line. See {@link isTextHint}.
+ */
+declare function useFieldHint(hint: ReactNode, describedBy: string | undefined): FieldHintParts;
+/** The caption under a field, as {@link Select} draws its own. */
+declare function FieldCaption({ parts, className }: {
+    parts: FieldHintParts;
+    className?: string;
+}): react.JSX.Element | null;
+/**
+ * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,
+ * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.
+ * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in
+ * the row.
+ */
+declare const LABEL_IN_ROW = "static min-w-0";
+/**
+ * A static label and its "?" on one line, in the top strip of a field that lays out its
+ * own label — the combobox family, which cannot use {@link FloatingField} because the
+ * trigger, the anchored panel and the label hang off a box of their own.
+ *
+ * FloatingField's static row, with one difference: it stops at `end-9`, the column the
+ * chevron (or the clear "×") takes, so a long label truncates before it rather than
+ * putting the "?" on top of the chevron. The hint keeps its width; the label gives way.
+ */
+declare function StaticLabelRow({ hint, children }: {
+    hint: ReactNode;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * A field with no label line and a FieldHint "?": the hint at the end edge, OUTSIDE the
+ * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the
+ * field is returned exactly as it was, so the wrapper costs nothing where it does not
+ * apply.
+ */
+declare function EndHintRow({ hint, className, children, }: {
+    hint: ReactNode | undefined;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+interface LockReason {
+    /** The reason in force — the lock's (with `commit` under a locked
+     *  `WriteLockProvider`), else the control's own `disabledReason`. */
+    reason: ReactNode;
+    /** There is a reason: the control is locked the focusable way. */
+    locked: boolean;
+    /** The id of the reason's hidden copy, for the control's `aria-describedby`. */
+    reasonId: string;
+}
+/**
+ * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a
+ * switch, a checkbox or a select that saves on change, a list row whose click writes.
+ * The lock's reason wins over the control's own (`useCommitReason`).
+ */
+declare function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason;
+/**
+ * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for
+ * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so
+ * the Tooltip does not also clone its bubble's id into the description: the hidden copy
+ * already describes it, and the same sentence twice would be read on every focus.
+ *
+ * `className` is the wrapper's, which becomes the outermost element while locked — a
+ * control moves its own layout classes here so a lock does not reflow the form.
+ */
+declare function LockedReason({ lock, className, children, }: {
+    lock: LockReason;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box
+ * inside it keeps the native `required` (a form still refuses an empty set) but draws no
+ * star of its own — four stars on four languages would read as four separate demands.
+ * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.
+ */
+declare const RequiredStarOnLegend: react.Context<boolean>;
+/** `undefined`, `null`, `false` and `""` are what a caller's `cond && "…"` evaluates to
+ *  when there is nothing to say; none of them is content. A numeric `0` is. */
+declare function hasContent(node: ReactNode): boolean;
+interface FieldMessages {
+    /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */
+    isInvalid: boolean;
+    /** The caller's description, then the caption, then the error — the standing
+     *  advice before the news, as `useFieldError` in ui.tsx orders them. */
+    describedBy: string | undefined;
+    /** The caption and the error, for under the field; `null` when there is neither. */
+    below: ReactNode;
+    /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a
+     *  caption or there is none. */
+    labelHint: ReactNode;
+}
+/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */
+declare function useFieldMessages({ hint, error, invalid, describedBy, ariaInvalid, }: {
+    hint?: ReactNode;
+    error?: ReactNode;
+    invalid?: boolean;
+    describedBy?: string;
+    ariaInvalid?: unknown;
+}): FieldMessages;
+/**
+ * The field and what is under it, as one box — `FieldGroup` in ui.tsx, for the same
+ * reasons written there. Nothing of its own while there is nothing under the field and
+ * the caller passed no `error` key (the DOM is exactly what it was before these props);
+ * once `error` is passed the box is kept even with no message, so the trigger is never
+ * reparented — and remounted, losing focus — as the message comes and goes.
+ */
+declare function FieldBox({ below, reserve, children, }: {
+    below: ReactNode;
+    reserve: boolean;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a
+ * `FieldHint`, the label and its "?" laid out on ONE flex row (dev#468: two absolute
+ * offsets guessing at the same baseline put the "?" three pixels above its word).
+ * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and
+ * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a
+ * long label truncates before it rather than putting the "?" on top of it.
+ */
+declare function FieldLabelLine({ label, hint }: {
+    label: ReactNode;
+    hint?: ReactNode;
+}): react.JSX.Element;
+/**
+ * How tall the strip over a bare group is — the values {@link FieldStrip}'s `pad` takes,
+ * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than
+ * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).
+ *
+ *  - `"field"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,
+ *    measured): *"16px of label strip plus a 26px group is exactly a labelled Input"*,
+ *    so a status group in a row of 42px fields ends where they end. The label's line
+ *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback
+ *    #117 was about — starts at 19px, below the label's 17.75px. For content with a
+ *    border and an inset of its own; ToggleGroup's `labelPlacement="strip"`.
+ *  - `"clear"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has
+ *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the
+ *    tile's top edge, so the tile has to start below the whole label line — and so does
+ *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,
+ *    IconPicker, and FieldStrip's default.
+ */
+declare const LABEL_STRIP_PAD: {
+    readonly field: "pt-4";
+    readonly clear: "pt-5";
+};
+/**
+ * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:
+ * a segmented control or a row of swatches standing in a form row beside labelled
+ * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the
+ * type of a field's static label) without the group growing a field's border round
+ * it. `id` goes on the label so the group can be `aria-labelledby` it.
+ *
+ * `relative` is load-bearing twice over: the row is positioned against it, and a
+ * caller's `sr-only` label cannot escape it (sr-only-containment).
+ *
+ * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the
+ * `role="group"` its label names. The kit's own groups pass none, so their wrapper is
+ * the bare box it was in 0.22.
+ */
+declare function LabelStrip({ labelId, label, hint, disabled, pad, className, children, ...rest }: Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    labelId: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    /** Dim the label with its group, as `peer-disabled:` dims a field's own. */
+    disabled?: boolean;
+    pad: keyof typeof LABEL_STRIP_PAD;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, type FieldHintParts, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useFieldHint, useFieldMessages, useLockReason };

package/dist/components/field-parts.js

@@ -0,0 +1,156 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+const FLOATING_LABEL_STATIC = cn(
+  "pointer-events-none absolute start-3 top-1",
+  STATIC_LABEL_TYPE,
+  "max-w-[calc(100%-1.5rem)] truncate"
+);
+function FieldLabel({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
+}
+function isTextHint(hint) {
+  return typeof hint === "string" && hint !== "" || typeof hint === "number";
+}
+const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+function useFieldHint(hint, describedBy) {
+  const captionId = useId();
+  const text = isTextHint(hint);
+  return {
+    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,
+    captionId: text ? captionId : void 0,
+    captionText: text ? hint : void 0,
+    labelHint: !text && hasMessage(hint) ? hint : void 0
+  };
+}
+function FieldCaption({ parts, className }) {
+  if (parts.captionText === void 0) return null;
+  return /* @__PURE__ */ jsx("p", { id: parts.captionId, className: cn(FIELD_CAPTION_CLASS, className), children: parts.captionText });
+}
+const LABEL_IN_ROW = "static min-w-0";
+function StaticLabelRow({ hint, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+  ] });
+}
+function EndHintRow({
+  hint,
+  className,
+  children
+}) {
+  if (hint === void 0) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+    /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+  ] });
+}
+function useLockReason(commit, disabledReason) {
+  const reason = useCommitReason(commit, disabledReason);
+  const reasonId = useId();
+  return { reason, locked: hasMessage(reason), reasonId };
+}
+function LockedReason({
+  lock,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Tooltip, { label: lock.reason, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("span", { id: lock.reasonId, hidden: true, children: lock.reason })
+  ] }) });
+}
+const RequiredStarOnLegend = createContext(false);
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+function useFieldMessages({
+  hint,
+  error,
+  invalid,
+  describedBy,
+  ariaInvalid
+}) {
+  const hintId = useId();
+  const errorId = useId();
+  const textHint = isTextHint(hint);
+  const hasError = hasContent(error);
+  return {
+    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
+    describedBy: [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(" ") || void 0,
+    below: textHint || hasError ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: FIELD_CAPTION_CLASS, children: hint }),
+      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error })
+    ] }) : null,
+    labelHint: !textHint && hasContent(hint) ? hint : void 0
+  };
+}
+function FieldBox({
+  below,
+  reserve,
+  children
+}) {
+  if (below === null && !reserve) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    children,
+    below
+  ] });
+}
+function FieldLabelLine({ label, hint }) {
+  if (!hasContent(hint)) return /* @__PURE__ */ jsx(FieldLabel, { children: label });
+  return (
+    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint
+    // over the row (and take the "?"'s hover) otherwise.
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(FieldLabel, { className: "static min-w-0 max-w-full", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+    ] })
+  );
+}
+const LABEL_STRIP_PAD = { field: "pt-4", clear: "pt-5" };
+function LabelStrip({
+  labelId,
+  label,
+  hint,
+  disabled,
+  pad,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative min-w-0", LABEL_STRIP_PAD[pad], className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(FieldLabel, { id: labelId, className: cn("static min-w-0 max-w-full", disabled && "opacity-50"), children: label }),
+      hasContent(hint) && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+    ] }),
+    children
+  ] });
+}
+export {
+  EndHintRow,
+  FIELD_CAPTION_CLASS,
+  FLOATING_LABEL_STATIC,
+  FieldBox,
+  FieldCaption,
+  FieldLabel,
+  FieldLabelLine,
+  LABEL_IN_ROW,
+  LABEL_STRIP_PAD,
+  LabelStrip,
+  LockedReason,
+  RequiredStarOnLegend,
+  STATIC_LABEL_TYPE,
+  StaticLabelRow,
+  hasContent,
+  isTextHint,
+  useFieldHint,
+  useFieldMessages,
+  useLockReason
+};
+//# sourceMappingURL=field-parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself. Private to the package —\n * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,\n * which ui.tsx re-exports as it always has.\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below.\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    <span {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself, or `undefined` for a hint that is not text. */\n  captionText: string | number | undefined;\n  /** A non-text hint (a FieldHint) for the label line — or, on a field with no label\n   *  line, the end edge outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}.\n */\nexport function useFieldHint(hint: ReactNode, describedBy: string | undefined): FieldHintParts {\n  const captionId = useId();\n  const text = isTextHint(hint);\n  return {\n    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: text ? captionId : undefined,\n    captionText: text ? hint : undefined,\n    labelHint: !text && hasMessage(hint) ? hint : undefined,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row.\n */\nexport const LABEL_IN_ROW = \"static min-w-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasMessage(reason), reasonId };\n}\n\n/**\n * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for\n * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so\n * the Tooltip does not also clone its bubble's id into the description: the hidden copy\n * already describes it, and the same sentence twice would be read on every focus.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  className,\n  children,\n}: {\n  lock: LockReason;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <Tooltip label={lock.reason} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\n/** `undefined`, `null`, `false` and `\"\"` are what a caller's `cond && \"…\"` evaluates to\n *  when there is nothing to say; none of them is content. A numeric `0` is. */\nexport function hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then the error — the standing\n   *  advice before the news, as `useFieldError` in ui.tsx orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a\n   *  caption or there is none. */\n  labelHint: ReactNode;\n}\n\n/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */\nexport function useFieldMessages({\n  hint,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n}: {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n}): FieldMessages {\n  const hintId = useId();\n  const errorId = useId();\n  const textHint = isTextHint(hint);\n  const hasError = hasContent(error);\n  return {\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy:\n      [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(\" \") || undefined,\n    below:\n      textHint || hasError ? (\n        <>\n          {textHint && (\n            <p id={hintId} className={FIELD_CAPTION_CLASS}>\n              {hint}\n            </p>\n          )}\n          {hasError && (\n            <p id={errorId} className={FIELD_ERROR_CLASS}>\n              {error}\n            </p>\n          )}\n        </>\n      ) : null,\n    labelHint: !textHint && hasContent(hint) ? hint : undefined,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in ui.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise.\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      <FieldLabel className=\"static min-w-0 max-w-full\">{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is — the values {@link FieldStrip}'s `pad` takes,\n * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than\n * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).\n *\n *  - `\"field\"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,\n *    measured): *\"16px of label strip plus a 26px group is exactly a labelled Input\"*,\n *    so a status group in a row of 42px fields ends where they end. The label's line\n *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback\n *    #117 was about — starts at 19px, below the label's 17.75px. For content with a\n *    border and an inset of its own; ToggleGroup's `labelPlacement=\"strip\"`.\n *  - `\"clear\"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has\n *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the\n *    tile's top edge, so the tile has to start below the whole label line — and so does\n *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,\n *    IconPicker, and FieldStrip's default.\n */\nexport const LABEL_STRIP_PAD = { field: \"pt-4\", clear: \"pt-5\" } as const;\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  pad,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  pad: keyof typeof LABEL_STRIP_PAD;\n  children: ReactNode;\n}) {\n  return (\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD[pad], className)}>\n      <div className=\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\">\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(\"static min-w-0 max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/field-strip.d.ts

@@ -0,0 +1,105 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/**
+ * How far down the content starts, under the 11px label — see {@link FieldStripProps.pad}.
+ *
+ *  - `"clear"` (default) — 20px: the content starts below the label's whole line box.
+ *  - `"field"` — 16px: the strip plus a 26px bordered control is exactly a labelled
+ *    {@link Input}'s 42px.
+ */
+type FieldStripPad = "clear" | "field";
+/** What a {@link FieldStrip} hands render-prop children. */
+interface FieldStripIds {
+    /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)
+     *  under `group={false}`, or anything else that has to point at it. */
+    labelId: string;
+    /** The ids of the caption and the error while they are on screen, else `undefined`.
+     *  The group is described by them already; spread this on the content under
+     *  `group={false}`, where there is no group to describe. */
+    describedBy: string | undefined;
+}
+interface FieldStripProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** The 11px static label, on the line a labelled field's label sits on. */
+    label: ReactNode;
+    /**
+     * Field anatomy, as on {@link Input}: plain text is a caption under the content (and
+     * describes the group); a {@link FieldHint} "?" rides the label line.
+     */
+    hint?: ReactNode;
+    /** A message under the content, in `--danger`, describing the group. `null`,
+     *  `false` and `""` are no error. The content's own controls are the caller's to
+     *  mark `aria-invalid`; a `group` cannot be. */
+    error?: ReactNode;
+    /**
+     * Dims the label with the content, as a disabled field's label dims. The content is
+     * the caller's: disable (or hide) its controls yourself — keksdose's location cell
+     * turns its map into a picture and drops its buttons, which no flag here could guess.
+     */
+    disabled?: boolean;
+    /**
+     * How tall the strip is — what the content needs, measured in keksdose (`pt-5` /
+     * `pt-4`, the 0.22 `LABEL_STRIP_PAD`):
+     *
+     *  - `"clear"` (default) — 20px. The content starts below the label's whole line box
+     *    (4px down, 13.75px tall). For content with no inset of its own: a map, a row of
+     *    buttons, a pill, a line of text, a row of tiles whose selection is their frame
+     *    (SwatchPicker, IconPicker).
+     *  - `"field"` — 16px. The strip plus a 26px bordered control (1 + 2 + 20 + 2 + 1) is
+     *    exactly a labelled Input's 42px, so the row's bottom edges line up. The label's
+     *    line box runs 1.75px into the control's top hairline, so only content with an
+     *    inset of its own keeps clear of it — the segmented group's 2px moat
+     *    (ToggleGroup's `labelPlacement="strip"`).
+     *
+     * A responsive strip is a `className`: it merges after the pad, so keksdose's status
+     * cell writes `className="pt-5 @3xl:pt-4"` (20px on a phone, 16px in the desktop row).
+     */
+    pad?: FieldStripPad;
+    /**
+     * The wrapper is a `role="group"` named by the label (default), so a screen reader
+     * entering the map or the first button hears "Location, group" — what the visible
+     * label tells a sighted reader the content is about.
+     *
+     * `false` for content that is a labelled group ITSELF (a `role="radiogroup"` of the
+     * app's own, a TileRadioGroup's container, a fieldset): a group inside a group, both
+     * named "Pattern", is read twice. The wrapper is then a plain box, and the content
+     * takes the name from the render-prop's `labelId` (and the caption and error from
+     * its `describedBy`).
+     */
+    group?: boolean;
+    /** The content. A function receives {@link FieldStripIds}. */
+    children: ReactNode | ((ids: FieldStripIds) => ReactNode);
+}
+/**
+ * The kit's label strip for content of your own — keksdose G8.
+ *
+ * 0.22 gave three groups a strip label (keksdose K2): ToggleGroup's
+ * `labelPlacement="strip"`, SwatchPicker's and IconPicker's `label`. Each draws the
+ * 11px label (and its `FieldHint`) on the same line as the labelled fields beside it,
+ * over content WITHOUT a field's border round it. keksdose's transaction row has one
+ * cell left that is not one of those groups: the location — a map, a "Locate me" and a
+ * "Search" button — still built by hand as a `relative` cell, a floated `FieldLabel`
+ * and a `pt-5` box (transaction-location-field.tsx), and so is the reconciled-status
+ * stand-in (cleared-status-toggle.tsx, `ClearedStatusLocked`). This is the strip on its
+ * own, the same component the three groups draw theirs with:
+ *
+ * ```tsx
+ * <FieldStrip label={t("transactions.location")} className={className}>
+ *   <div className="space-y-2">
+ *     <PinMap … />
+ *     <div className="flex flex-wrap gap-2"><Button …>Locate me</Button>…</div>
+ *   </div>
+ * </FieldStrip>
+ * ```
+ *
+ * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a
+ * `leading-tight` line); the content starts `pad` down, full width. `className` styles
+ * the wrapper — the grid or flex item in the caller's row — and merges after the pad.
+ *
+ * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form
+ * that labels its fields that way. This is for a row whose fields float their labels
+ * inside them, where a label above would be the only one of its kind.
+ */
+declare function FieldStrip({ label, hint, error, disabled, pad, group, className, children, ...rest }: FieldStripProps): react.JSX.Element;
+
+export { FieldStrip, type FieldStripIds, type FieldStripPad, type FieldStripProps };

package/dist/components/field-strip.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { LabelStrip, useFieldMessages } from "./field-parts.js";
+function FieldStrip({
+  label,
+  hint,
+  error,
+  disabled = false,
+  pad = "clear",
+  group = true,
+  className,
+  children,
+  ...rest
+}) {
+  const labelId = useId();
+  const messages = useFieldMessages({ hint, error });
+  const content = typeof children === "function" ? children({ labelId, describedBy: messages.describedBy }) : children;
+  const groupDescribedBy = [rest["aria-describedby"], messages.describedBy].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    LabelStrip,
+    {
+      ...rest,
+      ...group ? {
+        role: "group",
+        // An explicit name wins, as on the kit's labelled groups.
+        "aria-labelledby": rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0 ? labelId : rest["aria-labelledby"],
+        "aria-describedby": groupDescribedBy
+      } : null,
+      labelId,
+      label,
+      hint: messages.labelHint,
+      disabled,
+      pad,
+      className,
+      children: [
+        content,
+        messages.below
+      ]
+    }
+  );
+}
+export {
+  FieldStrip
+};
+//# sourceMappingURL=field-strip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-strip.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { LabelStrip, useFieldMessages } from \"./field-parts\";\n\n/**\n * How far down the content starts, under the 11px label — see {@link FieldStripProps.pad}.\n *\n *  - `\"clear\"` (default) — 20px: the content starts below the label's whole line box.\n *  - `\"field\"` — 16px: the strip plus a 26px bordered control is exactly a labelled\n *    {@link Input}'s 42px.\n */\nexport type FieldStripPad = \"clear\" | \"field\";\n\n/** What a {@link FieldStrip} hands render-prop children. */\nexport interface FieldStripIds {\n  /** The label's id — for content that names ITSELF by the label (`aria-labelledby`)\n   *  under `group={false}`, or anything else that has to point at it. */\n  labelId: string;\n  /** The ids of the caption and the error while they are on screen, else `undefined`.\n   *  The group is described by them already; spread this on the content under\n   *  `group={false}`, where there is no group to describe. */\n  describedBy: string | undefined;\n}\n\nexport interface FieldStripProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The 11px static label, on the line a labelled field's label sits on. */\n  label: ReactNode;\n  /**\n   * Field anatomy, as on {@link Input}: plain text is a caption under the content (and\n   * describes the group); a {@link FieldHint} \"?\" rides the label line.\n   */\n  hint?: ReactNode;\n  /** A message under the content, in `--danger`, describing the group. `null`,\n   *  `false` and `\"\"` are no error. The content's own controls are the caller's to\n   *  mark `aria-invalid`; a `group` cannot be. */\n  error?: ReactNode;\n  /**\n   * Dims the label with the content, as a disabled field's label dims. The content is\n   * the caller's: disable (or hide) its controls yourself — keksdose's location cell\n   * turns its map into a picture and drops its buttons, which no flag here could guess.\n   */\n  disabled?: boolean;\n  /**\n   * How tall the strip is — what the content needs, measured in keksdose (`pt-5` /\n   * `pt-4`, the 0.22 `LABEL_STRIP_PAD`):\n   *\n   *  - `\"clear\"` (default) — 20px. The content starts below the label's whole line box\n   *    (4px down, 13.75px tall). For content with no inset of its own: a map, a row of\n   *    buttons, a pill, a line of text, a row of tiles whose selection is their frame\n   *    (SwatchPicker, IconPicker).\n   *  - `\"field\"` — 16px. The strip plus a 26px bordered control (1 + 2 + 20 + 2 + 1) is\n   *    exactly a labelled Input's 42px, so the row's bottom edges line up. The label's\n   *    line box runs 1.75px into the control's top hairline, so only content with an\n   *    inset of its own keeps clear of it — the segmented group's 2px moat\n   *    (ToggleGroup's `labelPlacement=\"strip\"`).\n   *\n   * A responsive strip is a `className`: it merges after the pad, so keksdose's status\n   * cell writes `className=\"pt-5 @3xl:pt-4\"` (20px on a phone, 16px in the desktop row).\n   */\n  pad?: FieldStripPad;\n  /**\n   * The wrapper is a `role=\"group\"` named by the label (default), so a screen reader\n   * entering the map or the first button hears \"Location, group\" — what the visible\n   * label tells a sighted reader the content is about.\n   *\n   * `false` for content that is a labelled group ITSELF (a `role=\"radiogroup\"` of the\n   * app's own, a TileRadioGroup's container, a fieldset): a group inside a group, both\n   * named \"Pattern\", is read twice. The wrapper is then a plain box, and the content\n   * takes the name from the render-prop's `labelId` (and the caption and error from\n   * its `describedBy`).\n   */\n  group?: boolean;\n  /** The content. A function receives {@link FieldStripIds}. */\n  children: ReactNode | ((ids: FieldStripIds) => ReactNode);\n}\n\n/**\n * The kit's label strip for content of your own — keksdose G8.\n *\n * 0.22 gave three groups a strip label (keksdose K2): ToggleGroup's\n * `labelPlacement=\"strip\"`, SwatchPicker's and IconPicker's `label`. Each draws the\n * 11px label (and its `FieldHint`) on the same line as the labelled fields beside it,\n * over content WITHOUT a field's border round it. keksdose's transaction row has one\n * cell left that is not one of those groups: the location — a map, a \"Locate me\" and a\n * \"Search\" button — still built by hand as a `relative` cell, a floated `FieldLabel`\n * and a `pt-5` box (transaction-location-field.tsx), and so is the reconciled-status\n * stand-in (cleared-status-toggle.tsx, `ClearedStatusLocked`). This is the strip on its\n * own, the same component the three groups draw theirs with:\n *\n * ```tsx\n * <FieldStrip label={t(\"transactions.location\")} className={className}>\n *   <div className=\"space-y-2\">\n *     <PinMap … />\n *     <div className=\"flex flex-wrap gap-2\"><Button …>Locate me</Button>…</div>\n *   </div>\n * </FieldStrip>\n * ```\n *\n * The label sits where a field's static label sits (`top-1`, `inset-x-3`, 11px in a\n * `leading-tight` line); the content starts `pad` down, full width. `className` styles\n * the wrapper — the grid or flex item in the caller's row — and merges after the pad.\n *\n * Not a {@link Field}: that one sets a 14px label ABOVE its control, in flow, for a form\n * that labels its fields that way. This is for a row whose fields float their labels\n * inside them, where a label above would be the only one of its kind.\n */\nexport function FieldStrip({\n  label,\n  hint,\n  error,\n  disabled = false,\n  pad = \"clear\",\n  group = true,\n  className,\n  children,\n  ...rest\n}: FieldStripProps) {\n  const labelId = useId();\n  const messages = useFieldMessages({ hint, error });\n  const content = typeof children === \"function\" ? children({ labelId, describedBy: messages.describedBy }) : children;\n  // The caller's own description first, then the caption, then the error — the order\n  // every kit field reads them in.\n  const groupDescribedBy = [rest[\"aria-describedby\"], messages.describedBy].filter(Boolean).join(\" \") || undefined;\n  return (\n    <LabelStrip\n      {...rest}\n      {...(group\n        ? {\n            role: \"group\",\n            // An explicit name wins, as on the kit's labelled groups.\n            \"aria-labelledby\":\n              rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n                ? labelId\n                : rest[\"aria-labelledby\"],\n            \"aria-describedby\": groupDescribedBy,\n          }\n        : null)}\n      labelId={labelId}\n      label={label}\n      hint={messages.labelHint}\n      disabled={disabled}\n      pad={pad}\n      className={className}\n    >\n      {content}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":";AA4HI;AA5HJ,SAAS,aAAa;AAEtB,SAAS,YAAY,wBAAwB;AAwGtC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACjD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,SAAS,aAAa,SAAS,YAAY,CAAC,IAAI;AAG5G,QAAM,mBAAmB,CAAC,KAAK,kBAAkB,GAAG,SAAS,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AACvG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,QACD;AAAA,QACE,MAAM;AAAA;AAAA,QAEN,mBACE,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM,SAC5D,UACA,KAAK,iBAAiB;AAAA,QAC5B,oBAAoB;AAAA,MACtB,IACA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,SAAS;AAAA;AAAA;AAAA,EACZ;AAEJ;","names":[]}