aplance-ui 1.3.0 → 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/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,32 +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({
-      // `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,
-    });
+    // 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);
@@ -93,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/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-06-15T07:36:30.820Z",
+  "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",
@@ -800,6 +805,21 @@
         "react"
       ]
     },
+    {
+      "name": "useMediaQuery",
+      "kind": "hook",
+      "group": null,
+      "files": [
+        "hooks/useMediaQuery.ts"
+      ],
+      "clientFiles": [
+        "hooks/useMediaQuery.ts"
+      ],
+      "deps": [],
+      "externalDeps": [
+        "react"
+      ]
+    },
     {
       "name": "useResizeObserver",
       "kind": "hook",