aplance-ui 1.2.2 → 1.3.0

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

@@ -22,67 +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"
-  | "email"
-  | "tel"
-  | "url"
-  | "password"
-  | "search"
-  | "number"
-  | "file"
-  | "radio"
-  | "date"
-  | "month"
+export type InputType =
+  | "text"
+  | "email"
+  | "tel"
+  | "url"
+  | "password"
+  | "search"
+  | "number"
+  | "file"
+  | "radio"
+  | "date"
+  | "month"
   | "week"
   | "time"
   | "datetime-local"
   | "checkbox"
-  | "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;
+  | "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;
 };
 
@@ -139,18 +139,18 @@ export const Input = ({
   const generatedId = useId();
   const inputId = props.id ?? generatedId;
 
-  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 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;
@@ -174,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;
@@ -279,6 +289,7 @@ export const Input = ({
             style={dynamicInputStyle}
             {...props}
             onChange={handleInputChange}
+            onFocus={handleFocus}
           />
 
           <div className={clsx(sCommon.action_end_wrapper)}>

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/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-26T16:15:51.026Z",
+  "generated": "2026-06-15T07:36:30.820Z",
   "units": [
     {
       "name": "accordion",
@@ -506,7 +506,8 @@
       "deps": [
         "button",
         "icon",
-        "useFocusOutside"
+        "useFocusOutside",
+        "useHasMounted"
       ],
       "externalDeps": [
         "@tabler/icons-react",
@@ -551,7 +552,8 @@
         "components/primitives/popover/popover.tsx"
       ],
       "deps": [
-        "useFocusOutside"
+        "useFocusOutside",
+        "useHasMounted"
       ],
       "externalDeps": [
         "clsx",
@@ -783,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",