@eifi1/ui-kit 0.6.1 → 0.7.1

package/dist/components/ui.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
@@ -80,7 +81,7 @@ const PHONE_QUERY = "(max-width: 767px)";
 const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
 const FIELD_TRIGGER = cn(
   FIELD_BASE,
-  "relative flex items-center justify-between gap-2 text-left hover:bg-[var(--bg-hover)]"
+  "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]"
 );
 function FieldChevron({ className, ...rest }) {
   return /* @__PURE__ */ jsx(
@@ -89,21 +90,21 @@ function FieldChevron({ className, ...rest }) {
       ...rest,
       "aria-hidden": true,
       className: cn(
-        "pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+        "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
         className
       )
     }
   );
 }
 const FLOATING_LABEL_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
+  "pointer-events-none absolute start-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
   "max-w-[calc(100%-1.5rem)] truncate",
   "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
   "peer-disabled:opacity-50"
 );
 const FLOATING_ROW_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 flex items-center gap-1 transition-all",
+  "pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all",
   "max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]",
   "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
   "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
@@ -111,7 +112,7 @@ const FLOATING_ROW_CLASS = cn(
 );
 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 left-3 top-1",
+  "pointer-events-none absolute start-3 top-1",
   STATIC_LABEL_TYPE,
   "max-w-[calc(100%-1.5rem)] truncate"
 );
@@ -143,8 +144,8 @@ function FloatingField({
     /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
       children,
       withHint ? (
-        // Static: `inset-x-3` rather than `left-3`, so a long label truncates at
-        // the field's own right padding instead of running under the chevron.
+        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at
+        // the field's own end padding instead of running under the chevron.
         // Animated: the row floats with the label and is only as wide as it needs
         // to be. Either way the hint keeps its width (`shrink-0`) and the label
         // is the one that gives way.
@@ -164,7 +165,7 @@ function FloatingField({
 }
 function FieldHint({
   label,
-  side = "left",
+  side = "start",
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -273,7 +274,7 @@ const Input = forwardRef(function Input2({
       disabled: rest.disabled,
       "aria-label": revealed ? passwordText.hide : passwordText.show,
       "aria-pressed": revealed,
-      className: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50",
+      className: "absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50",
       children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
     }
   ) : null;
@@ -305,7 +306,7 @@ const Input = forwardRef(function Input2({
           ...rest,
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
-          className: cn(FIELD_BASE, "pr-9", inputClassName, isInvalid && FIELD_INVALID)
+          className: cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID)
         }
       ),
       revealToggle
@@ -325,7 +326,7 @@ const Input = forwardRef(function Input2({
         onClick: handleClick,
         className: cn(
           asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : FLOATING_INPUT_CLASS,
-          isPassword && "pr-9",
+          isPassword && "pe-9",
           inputClassName,
           isInvalid && FIELD_INVALID
         )
@@ -335,10 +336,11 @@ const Input = forwardRef(function Input2({
   ] }) });
 });
 Input.displayName = "Input";
-const SELECT_SM = "h-7 py-0 pl-2 pr-7 text-xs";
+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 generated = useId();
   const nativeSize = typeof size === "number" ? size : void 0;
+  const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
   const small = size === "sm" && label === void 0;
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -347,7 +349,8 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
     rest["aria-describedby"],
     rest["aria-invalid"]
   );
-  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "right-1.5 size-3.5" : void 0 });
+  const chevron = rest.disabled || listBox ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
+  const dress = listBox ? "overflow-y-auto" : "appearance-none pe-9";
   if (label === void 0) {
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
@@ -361,7 +364,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
           "aria-describedby": describedBy,
           className: cn(
             FIELD_BASE,
-            "appearance-none pr-9",
+            dress,
             small && SELECT_SM,
             selectClassName,
             isInvalid && FIELD_INVALID
@@ -384,8 +387,11 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
         "aria-describedby": describedBy,
         className: cn(
           FIELD_BASE,
-          FIELD_FLOATING_PAD,
-          "peer appearance-none pr-9",
+          // The floated label takes the top strip of a list box too, so its first
+          // row starts under the label rather than behind it.
+          listBox ? "pt-5 pb-1" : FIELD_FLOATING_PAD,
+          "peer",
+          dress,
           selectClassName,
           isInvalid && FIELD_INVALID
         ),
@@ -563,6 +569,7 @@ function Tabs({
   label,
   panelId,
   onRemove,
+  removeOn = "every",
   onAdd,
   addLabel,
   labels,
@@ -573,6 +580,7 @@ function Tabs({
   const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
   const stripRef = useRef(null);
   const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
+  const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
   const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
   const pendingFocus = useRef(null);
   const requestRemove = (id) => {
@@ -597,12 +605,12 @@ function Tabs({
     strip.querySelectorAll('[role="tab"]')[index]?.focus();
   }, [tabs, active]);
   const onTabKeyDown = (e, tab) => {
-    if (e.key === "Delete" && isRemovable(tab)) {
+    if (e.key === "Delete" && deletesOnKey(tab)) {
       e.preventDefault();
       if (!busy) requestRemove(tab.id);
       return;
     }
-    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    const step = horizontalStep(e.key, e.currentTarget);
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
     if (!strip) return;
@@ -646,7 +654,7 @@ function Tabs({
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : void 0,
           id: isActive && panelId ? `${panelId}-tab` : void 0,
-          "aria-keyshortcuts": removable ? "Delete" : void 0,
+          "aria-keyshortcuts": deletesOnKey(tab) ? "Delete" : void 0,
           onKeyDown: (e) => onTabKeyDown(e, tab),
           className: cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,