@eifi1/ui-kit 0.17.0 → 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,
@@ -1114,7 +1129,7 @@ function CardTitle({ className, as: Tag = "div", ...props }) {
     Tag,
     {
       "data-slot": "card-title",
-      className: cn(compact ? "text-sm font-medium" : "font-semibold", "leading-none", className),
+      className: cn(compact ? "text-sm font-medium leading-snug" : "font-semibold leading-none", className),
       ...props
     }
   );