aplance-ui 1.2.2 → 1.4.0

package/registry/components/ui/input-fields/date-picker/types.ts

@@ -51,6 +51,8 @@ export type CommonDatePickerProps = Omit<
   timePickerPopover?: {
     position?: Position;
     align?: Align;
+    autoPosition?: boolean;
+    collisionPadding?: number;
   };
   /** Show popover footer actions (Clear/Done) in DatePicker. Default: true. */
   showActionFooter?: boolean;

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

@@ -23,6 +23,10 @@ export type EmojiPickerProps = {
   /** Popover placement. */
   popoverPosition?: Position;
   popoverAlign?: Align;
+  /** Auto-position the popover to stay within the viewport. Default: true. */
+  popoverAutoPosition?: boolean;
+  /** Viewport padding used by popover auto positioning. */
+  popoverCollisionPadding?: number;
   /**
    * Show the popover footer with a Done action so users can pick multiple
    * emojis before dismissing. Default: true. Set to `false` to hide the
@@ -51,6 +55,8 @@ export const EmojiPicker = ({
   columns = 9,
   popoverPosition = "bottom",
   popoverAlign = "end",
+  popoverAutoPosition,
+  popoverCollisionPadding,
   showActionFooter = true,
   disabled,
   className,
@@ -62,6 +68,8 @@ export const EmojiPicker = ({
     <Popover
       position={popoverPosition}
       align={popoverAlign}
+      autoPosition={popoverAutoPosition}
+      collisionPadding={popoverCollisionPadding}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       closeOnClickOutside

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

@@ -4,6 +4,7 @@ import {
   useEffect,
   useId,
   useCallback,
+  useLayoutEffect,
   type ReactNode,
   type ComponentProps,
 } from "react";
@@ -15,8 +16,13 @@ import s from "./tabs.module.css";
 export const variants = ["style1", "style2"] as const;
 export type Variant = (typeof variants)[number];
 
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 export type TabItem = {
   id: string;
+  // Consumers can compose counts, badges, icons, etc. at the call site.
+  // Dynamic label changes re-measure the indicator without the slide animation.
   label: ReactNode;
   content?: ReactNode;
   disabled?: boolean;
@@ -49,28 +55,35 @@ export const Tabs = ({
 
   const activeId = isControlled ? controlledActive : internalActive;
 
-  // Sliding indicator state
+  // `animate` separates deliberate tab switches from layout-driven re-fits.
   const listRef = useRef<HTMLDivElement>(null);
-  const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+  const [indicator, setIndicator] = useState({ left: 0, width: 0, animate: true });
 
-  const updateIndicator = useCallback((id: string) => {
+  const updateIndicator = useCallback((id: string, animate: boolean) => {
     const list = listRef.current;
     if (!list) return;
     const btn = list.querySelector<HTMLButtonElement>(`[data-tab-id="${id}"]`);
     if (!btn) return;
     const listRect = list.getBoundingClientRect();
     const btnRect = btn.getBoundingClientRect();
-    setIndicator({
-      left: btnRect.left - listRect.left,
-      width: btnRect.width,
-    });
+    // Measure in the scrollable list's content coordinates so the indicator
+    // stays aligned when the tab strip is horizontally scrolled.
+    const left = btnRect.left - listRect.left + list.scrollLeft;
+    const width = btnRect.width;
+    setIndicator((prev) =>
+      prev.left === left && prev.width === width ? prev : { left, width, animate },
+    );
   }, []);
 
-  useEffect(() => {
-    updateIndicator(activeId);
-  }, [activeId, updateIndicator]);
+  const prevActiveRef = useRef<string | null>(null);
+  useIsomorphicLayoutEffect(() => {
+    const isSwitch = prevActiveRef.current !== activeId;
+    prevActiveRef.current = activeId;
+    updateIndicator(activeId, isSwitch);
+  }, [tabs, activeId, updateIndicator]);
 
-  useResizeObserver(listRef, () => updateIndicator(activeId));
+  // Container and font reflows re-fit the indicator without animating.
+  useResizeObserver(listRef, () => updateIndicator(activeId, false));
   const handleSelect = (id: string) => {
     if (!isControlled) setInternalActive(id);
     onTabChange?.(id);
@@ -89,7 +102,11 @@ export const Tabs = ({
         {/* Animated indicator */}
         <span
           className={clsx(s.indicator, s[`indicator_${variant}`])}
-          style={{ left: indicator.left, width: indicator.width }}
+          style={{
+            left: indicator.left,
+            width: indicator.width,
+            transition: indicator.animate ? undefined : "none",
+          }}
           aria-hidden="true"
         />
 

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/hooks/useMediaQuery.ts

@@ -0,0 +1,38 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+const noopSubscribe = (): (() => void) => () => {};
+
+const canUseMatchMedia = (): boolean =>
+  typeof window !== "undefined" && typeof window.matchMedia === "function";
+
+const getMatch = (query: string): boolean =>
+  canUseMatchMedia() ? window.matchMedia(query).matches : false;
+
+/**
+ * Subscribe to a CSS media query; re-renders whenever it flips.
+ *
+ * SSR-safe via `useSyncExternalStore`: returns `false` on the server and on the
+ * first client render (so the hydrated markup matches the server HTML), then
+ * settles to the real `window.matchMedia` result on the next client tick - the
+ * same hydration split as `useHasMounted`. Keep the `query` string stable (a
+ * module-level const, not an inline template) so the subscription does not
+ * re-bind on every render.
+ */
+export const useMediaQuery = (query: string): boolean => {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (!canUseMatchMedia()) return noopSubscribe();
+
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onStoreChange);
+      return () => mql.removeEventListener("change", onStoreChange);
+    },
+    [query],
+  );
+
+  return useSyncExternalStore(
+    subscribe,
+    () => getMatch(query),
+    () => false,
+  );
+};

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-09-11T04:18:36.662Z",
   "units": [
     {
       "name": "accordion",
@@ -213,6 +213,7 @@
         "components/ui/data-table/data-table.module.css",
         "components/ui/data-table/data-table.tsx",
         "components/ui/data-table/filter-bar.tsx",
+        "components/ui/data-table/filter-modal.tsx",
         "components/ui/data-table/pagination-bar.tsx",
         "components/ui/data-table/types.ts",
         "components/ui/data-table/useDataTable.tsx",
@@ -221,6 +222,7 @@
       "clientFiles": [
         "components/ui/data-table/checkbox-column.tsx",
         "components/ui/data-table/data-table.tsx",
+        "components/ui/data-table/filter-modal.tsx",
         "components/ui/data-table/pagination-bar.tsx",
         "components/ui/data-table/types.ts",
         "components/ui/data-table/useDataTable.tsx",
@@ -229,10 +231,13 @@
       "deps": [
         "button",
         "custom-select",
+        "icon",
         "input",
         "lib-dom",
         "loader",
-        "tooltip"
+        "modal",
+        "tooltip",
+        "useMediaQuery"
       ],
       "externalDeps": [
         "@tabler/icons-react",
@@ -506,7 +511,8 @@
       "deps": [
         "button",
         "icon",
-        "useFocusOutside"
+        "useFocusOutside",
+        "useHasMounted"
       ],
       "externalDeps": [
         "@tabler/icons-react",
@@ -551,7 +557,8 @@
         "components/primitives/popover/popover.tsx"
       ],
       "deps": [
-        "useFocusOutside"
+        "useFocusOutside",
+        "useHasMounted"
       ],
       "externalDeps": [
         "clsx",
@@ -783,6 +790,36 @@
         "react"
       ]
     },
+    {
+      "name": "useHasMounted",
+      "kind": "hook",
+      "group": null,
+      "files": [
+        "hooks/useHasMounted.ts"
+      ],
+      "clientFiles": [
+        "hooks/useHasMounted.ts"
+      ],
+      "deps": [],
+      "externalDeps": [
+        "react"
+      ]
+    },
+    {
+      "name": "useMediaQuery",
+      "kind": "hook",
+      "group": null,
+      "files": [
+        "hooks/useMediaQuery.ts"
+      ],
+      "clientFiles": [
+        "hooks/useMediaQuery.ts"
+      ],
+      "deps": [],
+      "externalDeps": [
+        "react"
+      ]
+    },
     {
       "name": "useResizeObserver",
       "kind": "hook",