@eifi1/ui-kit 0.16.1 → 0.18.0

package/dist/components/ui.js

@@ -9,6 +9,7 @@ import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link.js";
+import { useCommitReason } from "./write-lock.js";
 const BUTTON_BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const BUTTON_SIZES = {
   md: "gap-2 px-3 py-2 text-sm",
@@ -144,7 +145,8 @@ function ButtonElement({
   stretch,
   tone = "default",
   pressed,
-  disabledReason,
+  disabledReason: ownDisabledReason,
+  commit,
   pending,
   className,
   onClick,
@@ -157,6 +159,7 @@ function ButtonElement({
   ...rest
 }) {
   const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
@@ -486,7 +489,8 @@ function IconButtonElement({
   tooltipSide,
   tooltipPortal,
   tooltipLazy = true,
-  disabledReason,
+  disabledReason: ownDisabledReason,
+  commit,
   pending,
   glyphSize,
   badge,
@@ -507,6 +511,7 @@ function IconButtonElement({
   const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
   const keep = disabledStyle === "keep";
   const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
@@ -742,8 +747,12 @@ function useFieldError(error, invalid, describedBy, ariaInvalid) {
     errorEl: hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
   };
 }
-function FieldGroup({ errorEl, children }) {
-  if (errorEl === null) return /* @__PURE__ */ jsx(Fragment, { children });
+function FieldGroup({
+  errorEl,
+  reserve = false,
+  children
+}) {
+  if (errorEl === null && !reserve) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsxs("div", { children: [
     children,
     errorEl
@@ -758,19 +767,21 @@ function resolvePasswordRevealLabels(partial) {
   return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };
 }
 const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
-const Input = forwardRef(function Input2({
-  className,
-  inputClassName,
-  label,
-  id,
-  placeholder,
-  type,
-  variant = "field",
-  invalid,
-  error,
-  passwordLabels,
-  ...rest
-}, ref) {
+const Input = forwardRef(function Input2(props, ref) {
+  const {
+    className,
+    inputClassName,
+    label,
+    id,
+    placeholder,
+    type,
+    variant = "field",
+    invalid,
+    error,
+    passwordLabels,
+    ...rest
+  } = props;
+  const reserve = "error" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -805,7 +816,7 @@ const Input = forwardRef(function Input2({
   ) : null;
   if (label === void 0) {
     if (!isPassword) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(
         "input",
         {
           ref,
@@ -820,7 +831,7 @@ const Input = forwardRef(function Input2({
         }
       ) });
     }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -837,7 +848,7 @@ const Input = forwardRef(function Input2({
       revealToggle
     ] }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -862,7 +873,9 @@ const Input = forwardRef(function Input2({
 });
 Input.displayName = "Input";
 const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
-const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, size, selectClassName, ...rest }, ref) {
+const Select = forwardRef(function Select2(props, ref) {
+  const { className, label, id, children, invalid, error, hint, size, selectClassName, ...rest } = props;
+  const reserve = "error" in props;
   const generated = useId();
   const nativeSize = typeof size === "number" ? size : void 0;
   const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
@@ -906,7 +919,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
       }
     );
     if (hasContent(hint) && !textHint) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
         /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
           select,
           chevron
@@ -914,12 +927,12 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
         /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
       ] }) });
     }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       select,
       chevron
     ] }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint: textHint ? void 0 : hint, children: [
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint: textHint ? void 0 : hint, children: [
     /* @__PURE__ */ jsx(
       "select",
       {
@@ -947,7 +960,9 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
   ] }) });
 });
 Select.displayName = "Select";
-const Textarea = forwardRef(function Textarea2({ className, label, id, placeholder, invalid, error, ...rest }, ref) {
+const Textarea = forwardRef(function Textarea2(props, ref) {
+  const { className, label, id, placeholder, invalid, error, ...rest } = props;
+  const reserve = "error" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -957,7 +972,7 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
     rest["aria-invalid"]
   );
   if (label === void 0) {
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
@@ -970,7 +985,7 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
@@ -1016,6 +1031,12 @@ const CARD_PADDING_STRONG = {
   sm: "p-[11px]",
   md: "p-[15px]"
 };
+const CARD_TONE_WASH = {
+  warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
+  danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
+  info: "bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]",
+  success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]"
+};
 const CARD_TONES_STRONG = {
   warning: "border-2 border-[var(--warning)]",
   danger: "border-2 border-[var(--danger-border-strong)]",
@@ -1023,6 +1044,7 @@ const CARD_TONES_STRONG = {
   success: "border-2 border-[var(--success)]"
 };
 const CardPaddedContext = createContext(false);
+const CardDensityContext = createContext("comfortable");
 function Card({
   className,
   children,
@@ -1030,6 +1052,8 @@ function Card({
   variant = "default",
   tone,
   toneStrength = "soft",
+  toneFill = false,
+  density = "comfortable",
   padding,
   ...rest
 }) {
@@ -1042,6 +1066,7 @@ function Card({
     {
       "data-tone": tone,
       "data-tone-strength": strong ? "strong" : void 0,
+      "data-density": density === "compact" ? "compact" : void 0,
       ...rest,
       className: cn(
         variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : variant === "outline" ? (
@@ -1056,16 +1081,18 @@ function Card({
         ),
         toned && (bordered ? toned.border : toned.fill),
         strong && tone && CARD_TONES_STRONG[tone],
+        toneFill && bordered && tone && CARD_TONE_WASH[tone],
         toned?.title,
         ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],
         className
       ),
-      children: /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: ownPadding !== void 0, children })
+      children: /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: ownPadding !== void 0, children: /* @__PURE__ */ jsx(CardDensityContext.Provider, { value: density, children }) })
     }
   );
 }
 function CardHeader({ className, stackAction = false, ...props }) {
   const padded = useContext(CardPaddedContext);
+  const compact = useContext(CardDensityContext) === "compact";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1085,6 +1112,7 @@ function CardHeader({ className, stackAction = false, ...props }) {
         // never inherits an ancestor header's two columns.
         "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
         padded ? "px-0 pt-0" : "px-6 pt-6",
+        compact && "gap-0.5",
         // One column under `sm`, and the action back into the flow (DOM order, so
         // after the description when it is written after it), at the start edge.
         // The descendant selector outranks CardAction's own placement classes.
@@ -1096,14 +1124,23 @@ function CardHeader({ className, stackAction = false, ...props }) {
   );
 }
 function CardTitle({ className, as: Tag = "div", ...props }) {
-  return /* @__PURE__ */ jsx(Tag, { "data-slot": "card-title", className: cn("font-semibold leading-none", className), ...props });
+  const compact = useContext(CardDensityContext) === "compact";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "data-slot": "card-title",
+      className: cn(compact ? "text-sm font-medium leading-snug" : "font-semibold leading-none", className),
+      ...props
+    }
+  );
 }
 function CardDescription({ className, ...props }) {
+  const compact = useContext(CardDensityContext) === "compact";
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-sm text-[var(--text-muted)]", className),
+      className: cn(compact ? "text-xs" : "text-sm", "text-[var(--text-muted)]", className),
       ...props
     }
   );