aplance-ui 1.2.1 → 1.3.0

package/registry/components/ui/input-fields/input/input.tsx

@@ -24,9 +24,13 @@ import type { BaseInputFieldProps } from "../common/types";
 
 export type InputType =
   | "text"
+  | "email"
+  | "tel"
+  | "url"
   | "password"
   | "search"
   | "number"
+  | "file"
   | "radio"
   | "date"
   | "month"
@@ -37,6 +41,45 @@ export type InputType =
   | "color"
   | "range";
 
+const styledInputTypes: readonly InputType[] = [
+  "text",
+  "email",
+  "tel",
+  "url",
+  "password",
+  "search",
+  "number",
+  "file",
+  "date",
+  "month",
+  "week",
+  "time",
+  "datetime-local",
+] as const;
+
+const clearableInputTypes: readonly InputType[] = [
+  "text",
+  "email",
+  "tel",
+  "url",
+  "password",
+  "search",
+  "number",
+  "file",
+] as const;
+
+const fitWidthInputTypes: readonly InputType[] = [
+  "checkbox",
+  "radio",
+  "color",
+] as const;
+const dateInputTypes: readonly InputType[] = [
+  "date",
+  "month",
+  "week",
+  "datetime-local",
+] as const;
+
 type BaseProps = BaseInputFieldProps & {
   type?: InputType;
   onClear?: () => void;
@@ -98,41 +141,16 @@ export const Input = ({
 
   const showPasswordToggle = isPassword && hasValue;
   const showClearButton =
-    showClear &&
-    hasValue &&
-    ![
-      "radio",
-      "range",
-      "color",
-      "date",
-      "month",
-      "week",
-      "time",
-      "datetime-local",
-      "checkbox",
-    ].includes(type);
+    showClear && hasValue && clearableInputTypes.includes(type);
 
-  const stylesToApplyFields = [
-    "text",
-    "password",
-    "search",
-    "number",
-    "date",
-    "month",
-    "week",
-    "time",
-    "datetime-local",
-    "file",
-  ].includes(type);
-  const stylesFitWidth = ["checkbox", "radio", "color"].includes(type);
+  const stylesToApplyFields = styledInputTypes.includes(type);
+  const stylesFitWidth = fitWidthInputTypes.includes(type);
   const hasButtonStyle = buttonStyle !== "none";
   const buttonToneClass = hasButtonStyle
     ? sButton[`tone_${buttonStyle}`]
     : undefined;
 
-  const isDateFamily = ["date", "month", "week", "datetime-local"].includes(
-    type,
-  );
+  const isDateFamily = dateInputTypes.includes(type);
   const isTimeFamily = type === "time";
 
   const showDateCalendarIcon = isDateFamily && !iconEnd;
@@ -156,6 +174,16 @@ export const Input = ({
     onChange?.(e);
   };
 
+  // A programmatic value set (e.g. react-hook-form populating a field on reset)
+  // sets the DOM value via the ref WITHOUT firing onChange, so `hasValue` can lag
+  // the real value and the reveal/clear actions stay hidden on a pre-filled
+  // field. Re-sync from the actual value on focus so they appear as soon as the
+  // field is interacted with.
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHasValue(e.target.value.length > 0);
+    props.onFocus?.(e);
+  };
+
   const handleClear = () => {
     const element = inputRef.current;
     if (!element) return;
@@ -261,6 +289,7 @@ export const Input = ({
             style={dynamicInputStyle}
             {...props}
             onChange={handleInputChange}
+            onFocus={handleFocus}
           />
 
           <div className={clsx(sCommon.action_end_wrapper)}>

package/registry/components/ui/input-fields/media-input/media-input.module.css

@@ -204,6 +204,35 @@
   &[data-status="error"] {
     border-color: var(--color-error-foreground);
   }
+
+  &[data-status="uploaded"] {
+    border-color: var(--color-success-foreground);
+  }
+}
+
+/* Progress bar shown along the bottom edge of a tile during upload. The
+   width comes from `style={{ width: <pct>% }}` set inline on .progress_fill. */
+.preview_progress_track {
+  width: 100%;
+  height: var(--spacing-2);
+  border-radius: var(--radius-full);
+  background-color: var(--color-muted);
+  overflow: hidden;
+}
+
+.preview_progress_fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  background-color: var(--color-primary);
+  transition: width var(--transition-base);
+}
+
+.preview_done_badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-success-foreground);
+  font-size: var(--font-size-xs);
 }
 
 /* List layout - single row with thumb on the left and metadata fills the rest.

package/registry/components/ui/input-fields/media-input/media-preview.tsx

@@ -1,13 +1,9 @@
 import { type FC, type MouseEvent } from "react";
 import clsx from "clsx";
-import { IconX } from "@tabler/icons-react";
+import { IconCircleCheck, IconX } from "@tabler/icons-react";
 import { Icon } from "../../../primitives/icon/icon";
 import { Button } from "../../button/button";
-import type {
-  MediaFile,
-  MediaPreviewLayout,
-  MediaPreviewSize,
-} from "./types";
+import type { MediaFile, MediaPreviewLayout, MediaPreviewSize } from "./types";
 import { formatBytes, previewKindOf } from "./utils";
 import { KIND_LABEL, iconForKind } from "./kind-icons";
 import s from "./media-input.module.css";
@@ -72,9 +68,31 @@ export const MediaPreview: FC<MediaPreviewProps> = ({
         </span>
         <span className={s.preview_sub}>
           <span>{KIND_LABEL[kind]}</span>
-          <span aria-hidden="true">·</span>
+          <span aria-hidden="true">-</span>
           <span>{formatBytes(file.file.size)}</span>
         </span>
+        {file.status === "uploading" && typeof file.progress === "number" ? (
+          <div
+            className={s.preview_progress_track}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={file.progress}
+          >
+            <div
+              className={s.preview_progress_fill}
+              style={{ width: `${String(file.progress)}%` }}
+            />
+          </div>
+        ) : null}
+        {file.status === "uploaded" ? (
+          <span className={s.preview_done_badge}>
+            <Icon size="sm" aria-hidden="true">
+              <IconCircleCheck />
+            </Icon>
+            Uploaded
+          </span>
+        ) : null}
         {file.error && <span className={s.preview_error}>{file.error}</span>}
       </div>
 

package/registry/components/ui/tabs/tabs.module.css

@@ -1,5 +1,5 @@
 /* ─────────────────────────────────────────────
-   Tabs – root
+   Tabs - root
 ───────────────────────────────────────────── */
 .root {
   display: flex;
@@ -15,8 +15,20 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  /* Scroll horizontally when the tabs don't fit (e.g. many status tabs on a
+     phone) instead of clipping/overflowing the page. The active indicator is
+     absolutely positioned inside, so it scrolls with the tabs and stays aligned.
+     Scrollbar hidden for a clean strip - the partially-shown edge tab signals
+     scrollability. */
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
-  /* style1 – pill container */
+  /* style1 - pill container */
   &.list_style1 {
     background: var(--color-muted);
     border-radius: var(--radius-md);
@@ -24,7 +36,7 @@
     gap: var(--spacing-1);
   }
 
-  /* style2 – underline container */
+  /* style2 - underline container */
   &.list_style2 {
     border-bottom: var(--border-1) solid var(--color-border);
     gap: var(--spacing-6);
@@ -45,7 +57,7 @@
     width var(--transition-base);
   will-change: left, width;
 
-  /* style1 – filled pill */
+  /* style1 - filled pill */
   &.indicator_style1 {
     top: var(--spacing-1);
     height: calc(100% - var(--spacing-1) * 2);
@@ -54,7 +66,7 @@
     box-shadow: var(--shadow-sm);
   }
 
-  /* style2 – bottom line */
+  /* style2 - bottom line */
   &.indicator_style2 {
     top: auto;
     bottom: -1px;
@@ -65,7 +77,7 @@
 }
 
 /* ─────────────────────────────────────────────
-   Tab button – shared base
+   Tab button - shared base
 ───────────────────────────────────────────── */
 .tab {
   position: relative;
@@ -73,6 +85,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Never shrink in the scroller - keep the label on one line and scroll. */
+  flex-shrink: 0;
   font-family: var(--font-family-1);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
@@ -91,7 +105,7 @@
     cursor: not-allowed;
   }
 
-  /* style1 – pill tab */
+  /* style1 - pill tab */
   &.tab_style1 {
     padding: var(--spacing-3) var(--spacing-6);
     border-radius: calc(var(--radius-md) - var(--spacing-1));
@@ -110,7 +124,7 @@
     }
   }
 
-  /* style2 – underline tab */
+  /* style2 - underline tab */
   &.tab_style2 {
     padding: var(--spacing-3) var(--spacing-1);
     min-height: var(--spacing-11);

package/registry/components/ui/tabs/tabs.tsx

@@ -61,7 +61,11 @@ export const Tabs = ({
     const listRect = list.getBoundingClientRect();
     const btnRect = btn.getBoundingClientRect();
     setIndicator({
-      left: btnRect.left - listRect.left,
+      // `list` is a horizontal scroller and the indicator is absolutely
+      // positioned inside it, so its `left` is measured in content coordinates.
+      // Add scrollLeft, otherwise the indicator drifts away from the active tab
+      // once the strip is scrolled.
+      left: btnRect.left - listRect.left + list.scrollLeft,
       width: btnRect.width,
     });
   }, []);

package/registry/hooks/useFocusOutside.tsx

@@ -3,14 +3,23 @@ import { type RefObject, useEffect } from "react";
 type UseFocusOutsideOptions = {
   enabled?: boolean;
   event?: "mousedown" | "mouseup" | "click";
+  /**
+   * CSS selector for elements that count as "inside" even when they aren't
+   * contained by any `ref`. Needed for portaled descendant layers - a
+   * `Popover` menu opened from within a `Modal` renders under `document.body`
+   * via `createPortal`, so it's outside the modal's `contentRef` even though
+   * it's logically nested. Without this, the modal's outside-click handler
+   * fires when you click a dropdown option and dismisses the dialog.
+   */
+  ignoreSelector?: string;
 };
 
 export function useFocusOutside(
   refs: RefObject<HTMLElement | null>[],
   handler: (event: MouseEvent) => void,
-  options: UseFocusOutsideOptions = {}
+  options: UseFocusOutsideOptions = {},
 ) {
-  const { enabled = true, event = "mousedown" } = options;
+  const { enabled = true, event = "mousedown", ignoreSelector } = options;
 
   useEffect(() => {
     if (!enabled) return;
@@ -19,15 +28,21 @@ export function useFocusOutside(
       const target = e.target as Node;
 
       const clickedInside = refs.some(
-        (ref) => ref.current && ref.current.contains(target)
+        (ref) => ref.current && ref.current.contains(target),
       );
+      if (clickedInside) return;
 
-      if (!clickedInside) {
-        handler(e);
+      // A click inside a portaled layer (e.g. a popover menu) counts as
+      // "inside" so the host (modal/drawer) doesn't dismiss itself.
+      if (ignoreSelector) {
+        const el = target instanceof Element ? target : target.parentElement;
+        if (el?.closest(ignoreSelector)) return;
       }
+
+      handler(e);
     };
 
     document.addEventListener(event, listener);
     return () => document.removeEventListener(event, listener);
-  }, [refs, handler, enabled, event]);
+  }, [refs, handler, enabled, event, ignoreSelector]);
 }

package/registry/hooks/useHasMounted.ts

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react";
+
+// The value never changes after the initial client commit, so nothing to
+// subscribe to - a no-op unsubscribe.
+const noopSubscribe = (): (() => void) => () => {};
+const getClientSnapshot = (): boolean => true;
+const getServerSnapshot = (): boolean => false;
+
+/**
+ * `false` during SSR and on the FIRST client render, then `true` after mount.
+ *
+ * Gate any UI that depends on client-only state the server can't know (RTK Query
+ * caches, cookies, localStorage) behind this so the hydrated markup matches the
+ * server HTML - otherwise React throws the "tree hydrated but some attributes
+ * didn't match" warning (and won't patch the difference). The real client state
+ * reveals on the tick right after hydration.
+ *
+ * Built on `useSyncExternalStore` (React's hydration-safe server/client split)
+ * rather than a `useEffect` mount flag, so there's no setState-in-effect.
+ */
+export const useHasMounted = (): boolean =>
+  useSyncExternalStore(noopSubscribe, getClientSnapshot, getServerSnapshot);

package/registry/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.aplance.com/registry.schema.json",
   "version": 4,
-  "generated": "2026-05-15T13:59:14.737Z",
+  "generated": "2026-06-15T07:36:30.820Z",
   "units": [
     {
       "name": "accordion",
@@ -199,6 +199,7 @@
         "select-button"
       ],
       "externalDeps": [
+        "@tabler/icons-react",
         "clsx",
         "react"
       ]
@@ -505,7 +506,8 @@
       "deps": [
         "button",
         "icon",
-        "useFocusOutside"
+        "useFocusOutside",
+        "useHasMounted"
       ],
       "externalDeps": [
         "@tabler/icons-react",
@@ -550,7 +552,8 @@
         "components/primitives/popover/popover.tsx"
       ],
       "deps": [
-        "useFocusOutside"
+        "useFocusOutside",
+        "useHasMounted"
       ],
       "externalDeps": [
         "clsx",
@@ -782,6 +785,21 @@
         "react"
       ]
     },
+    {
+      "name": "useHasMounted",
+      "kind": "hook",
+      "group": null,
+      "files": [
+        "hooks/useHasMounted.ts"
+      ],
+      "clientFiles": [
+        "hooks/useHasMounted.ts"
+      ],
+      "deps": [],
+      "externalDeps": [
+        "react"
+      ]
+    },
     {
       "name": "useResizeObserver",
       "kind": "hook",