aplance-ui 1.2.1 → 1.2.2

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

@@ -22,24 +22,67 @@ import { FieldMessage } from "../common/field-message/field-message";
 import { Icon } from "../../../primitives/icon/icon";
 import type { BaseInputFieldProps } from "../common/types";
 
-export type InputType =
-  | "text"
-  | "password"
-  | "search"
-  | "number"
-  | "radio"
-  | "date"
-  | "month"
+export type InputType =
+  | "text"
+  | "email"
+  | "tel"
+  | "url"
+  | "password"
+  | "search"
+  | "number"
+  | "file"
+  | "radio"
+  | "date"
+  | "month"
   | "week"
   | "time"
   | "datetime-local"
   | "checkbox"
-  | "color"
-  | "range";
-
-type BaseProps = BaseInputFieldProps & {
-  type?: InputType;
-  onClear?: () => void;
+  | "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;
   showClear?: boolean;
 };
 
@@ -96,43 +139,18 @@ export const Input = ({
   const generatedId = useId();
   const inputId = props.id ?? generatedId;
 
-  const showPasswordToggle = isPassword && hasValue;
-  const showClearButton =
-    showClear &&
-    hasValue &&
-    ![
-      "radio",
-      "range",
-      "color",
-      "date",
-      "month",
-      "week",
-      "time",
-      "datetime-local",
-      "checkbox",
-    ].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 hasButtonStyle = buttonStyle !== "none";
-  const buttonToneClass = hasButtonStyle
-    ? sButton[`tone_${buttonStyle}`]
-    : undefined;
-
-  const isDateFamily = ["date", "month", "week", "datetime-local"].includes(
-    type,
-  );
+  const showPasswordToggle = isPassword && hasValue;
+  const showClearButton =
+    showClear && hasValue && clearableInputTypes.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 = dateInputTypes.includes(type);
   const isTimeFamily = type === "time";
 
   const showDateCalendarIcon = isDateFamily && !iconEnd;

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/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/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-05-26T16:15:51.026Z",
   "units": [
     {
       "name": "accordion",
@@ -199,6 +199,7 @@
         "select-button"
       ],
       "externalDeps": [
+        "@tabler/icons-react",
         "clsx",
         "react"
       ]