@eifi1/ui-kit 0.22.0 → 0.23.0

package/dist/components/field-anatomy.js

@@ -1,84 +0,0 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { cn } from "../lib/cn.js";
-import { FieldLabel } from "./ui.js";
-function hasContent(node) {
-  return node !== void 0 && node !== null && node !== false && node !== "";
-}
-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)]";
-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 = { toggle: "pt-4", tiles: "pt-5" };
-function LabelStrip({
-  labelId,
-  label,
-  hint,
-  disabled,
-  pad,
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { 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 {
-  FieldBox,
-  FieldLabelLine,
-  LABEL_STRIP_PAD,
-  LabelStrip,
-  hasContent,
-  isTextHint,
-  useFieldMessages
-};
-//# sourceMappingURL=field-anatomy.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/field-anatomy.tsx"],"sourcesContent":["// Internal — not re-exported from the barrel. The pieces of a field's anatomy (its\n// label line, the caption and the error under it, the label STRIP over a bare group)\n// for the controls that are not built on `FloatingField`: the date and month pickers,\n// whose trigger is a button in a wrapper of their own, and the groups (ToggleGroup,\n// SwatchPicker, IconPicker), which have no field box at all.\n//\n// `Input` and `Select` keep their own copies in ui.tsx; these follow them class for\n// class, so a DatePicker's caption and a Select's caption are the same 11px line in\n// the same place (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./ui\";\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\n/**\n * A `hint` that is plain TEXT is a caption under the field; anything else (a\n * `FieldHint` \"?\") rides the label line — the rule `Select` set in 0.15: the label\n * line is 11px of strip shared with the label, and a sentence placed there was set on\n * top of both the label and the value.\n */\nexport function isTextHint(hint: ReactNode): boolean {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\nconst FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\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.\n *\n *  - `\"toggle\"` — 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.\n *  - `\"tiles\"` — 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.\n */\nexport const LABEL_STRIP_PAD = { toggle: \"pt-4\", tiles: \"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 */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  pad,\n  className,\n  children,\n}: {\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  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <div 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":";AAuEQ,mBAEI,KAFJ;AA7DR,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAIpB,SAAS,WAAW,MAA0B;AACnD,SAAO,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAC3E;AAQO,SAAS,WAAW,MAA0B;AACnD,SAAQ,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AACtE;AAEA,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAgBnB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMkB;AAChB,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,WAAW,WAAW,KAAK;AACjC,SAAO;AAAA,IACL,WAAW,QAAQ,OAAO,KAAK,YAAY,gBAAgB,QAAQ,gBAAgB;AAAA,IACnF,aACE,CAAC,aAAa,YAAY,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,IACtF,OACE,YAAY,WACV,iCACG;AAAA,kBACC,oBAAC,OAAE,IAAI,QAAQ,WAAW,qBACvB,gBACH;AAAA,MAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAW,mBACxB,iBACH;AAAA,OAEJ,IACE;AAAA,IACN,WAAW,CAAC,YAAY,WAAW,IAAI,IAAI,OAAO;AAAA,EACpD;AACF;AASO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,QAAQ,CAAC,QAAS,QAAO,gCAAG,UAAS;AACnD,SACE,qBAAC,SACE;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAUO,SAAS,eAAe,EAAE,OAAO,KAAK,GAA2C;AACtF,MAAI,CAAC,WAAW,IAAI,EAAG,QAAO,oBAAC,cAAY,iBAAM;AACjD;AAAA;AAAA;AAAA,IAGE,qBAAC,SAAI,WAAU,iFACb;AAAA,0BAAC,cAAW,WAAU,6BAA6B,iBAAM;AAAA,MACzD,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA,OACzE;AAAA;AAEJ;AAcO,MAAM,kBAAkB,EAAE,QAAQ,QAAQ,OAAO,OAAO;AAYxD,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,SACE,qBAAC,SAAI,WAAW,GAAG,oBAAoB,gBAAgB,GAAG,GAAG,SAAS,GACpE;AAAA,yBAAC,SAAI,WAAU,wEAIb;AAAA,0BAAC,cAAW,IAAI,SAAS,WAAW,GAAG,6BAA6B,YAAY,YAAY,GACzF,iBACH;AAAA,MACC,WAAW,IAAI,KAAK,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA,OAC9F;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/src/components/field-anatomy.tsx

@@ -1,190 +0,0 @@
-// Internal — not re-exported from the barrel. The pieces of a field's anatomy (its
-// label line, the caption and the error under it, the label STRIP over a bare group)
-// for the controls that are not built on `FloatingField`: the date and month pickers,
-// whose trigger is a button in a wrapper of their own, and the groups (ToggleGroup,
-// SwatchPicker, IconPicker), which have no field box at all.
-//
-// `Input` and `Select` keep their own copies in ui.tsx; these follow them class for
-// class, so a DatePicker's caption and a Select's caption are the same 11px line in
-// the same place (keksdose K4: "uniform field anatomy … today it is a patchwork").
-
-import { useId } from "react";
-import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { FieldLabel } from "./ui";
-
-/** `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. */
-export function hasContent(node: ReactNode): boolean {
-  return node !== undefined && node !== null && node !== false && node !== "";
-}
-
-/**
- * A `hint` that is plain TEXT is a caption under the field; anything else (a
- * `FieldHint` "?") rides the label line — the rule `Select` set in 0.15: the label
- * line is 11px of strip shared with the label, and a sentence placed there was set on
- * top of both the label and the value.
- */
-export function isTextHint(hint: ReactNode): boolean {
-  return (typeof hint === "string" && hint !== "") || typeof hint === "number";
-}
-
-const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
-
-export 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. */
-export function useFieldMessages({
-  hint,
-  error,
-  invalid,
-  describedBy,
-  ariaInvalid,
-}: {
-  hint?: ReactNode;
-  error?: ReactNode;
-  invalid?: boolean;
-  describedBy?: string;
-  ariaInvalid?: unknown;
-}): FieldMessages {
-  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(" ") || undefined,
-    below:
-      textHint || hasError ? (
-        <>
-          {textHint && (
-            <p id={hintId} className={FIELD_CAPTION_CLASS}>
-              {hint}
-            </p>
-          )}
-          {hasError && (
-            <p id={errorId} className={FIELD_ERROR_CLASS}>
-              {error}
-            </p>
-          )}
-        </>
-      ) : null,
-    labelHint: !textHint && hasContent(hint) ? hint : undefined,
-  };
-}
-
-/**
- * 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.
- */
-export function FieldBox({
-  below,
-  reserve,
-  children,
-}: {
-  below: ReactNode;
-  reserve: boolean;
-  children: ReactNode;
-}) {
-  if (below === null && !reserve) return <>{children}</>;
-  return (
-    <div>
-      {children}
-      {below}
-    </div>
-  );
-}
-
-/**
- * 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.
- */
-export function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {
-  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;
-  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.
-    <div className="pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1">
-      <FieldLabel className="static min-w-0 max-w-full">{label}</FieldLabel>
-      <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>
-    </div>
-  );
-}
-
-/**
- * How tall the strip over a bare group is.
- *
- *  - `"toggle"` — 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.
- *  - `"tiles"` — 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.
- */
-export const LABEL_STRIP_PAD = { toggle: "pt-4", tiles: "pt-5" } as const;
-
-/**
- * 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).
- */
-export function LabelStrip({
-  labelId,
-  label,
-  hint,
-  disabled,
-  pad,
-  className,
-  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;
-  className?: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className={cn("relative min-w-0", LABEL_STRIP_PAD[pad], className)}>
-      <div className="pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1">
-        {/* `static`: FieldLabel positions itself absolutely; here the ROW is
-            positioned, so the label and its "?" are centred on one line by the flex
-            layout (dev#468). */}
-        <FieldLabel id={labelId} className={cn("static min-w-0 max-w-full", disabled && "opacity-50")}>
-          {label}
-        </FieldLabel>
-        {hasContent(hint) && <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>}
-      </div>
-      {children}
-    </div>
-  );
-}