aplance-ui 1.3.0 → 1.5.0

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/lib/string.ts

@@ -17,7 +17,7 @@ export function hashName(name: string): number {
  * Extract 1-2 letter initials from a name (e.g. "John Doe" -> "JD")
  */
 export function getInitials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) return parts[0][0] + parts[1][0];
-  return parts[0]?.substring(0, 2) || "?";
+  const [first = "", second = ""] = name.trim().split(/\s+/);
+  if (second) return first.charAt(0) + second.charAt(0);
+  return first.substring(0, 2) || "?";
 }

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-11-11T06:11:34.254Z",
   "units": [
     {
       "name": "accordion",
@@ -15,6 +15,7 @@
         "components/ui/accordion/accordion.tsx"
       ],
       "deps": [
+        "button",
         "useResizeObserver"
       ],
       "externalDeps": [
@@ -213,6 +214,8 @@
         "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/filters.tsx",
         "components/ui/data-table/pagination-bar.tsx",
         "components/ui/data-table/types.ts",
         "components/ui/data-table/useDataTable.tsx",
@@ -221,6 +224,8 @@
       "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/filters.tsx",
         "components/ui/data-table/pagination-bar.tsx",
         "components/ui/data-table/types.ts",
         "components/ui/data-table/useDataTable.tsx",
@@ -229,10 +234,14 @@
       "deps": [
         "button",
         "custom-select",
+        "icon",
         "input",
         "lib-dom",
         "loader",
-        "tooltip"
+        "modal",
+        "scroll-rail",
+        "tooltip",
+        "useMediaQuery"
       ],
       "externalDeps": [
         "@tabler/icons-react",
@@ -561,6 +570,27 @@
         "react-dom"
       ]
     },
+    {
+      "name": "scroll-rail",
+      "kind": "component",
+      "group": "ui",
+      "files": [
+        "components/ui/scroll-rail/scroll-rail.module.css",
+        "components/ui/scroll-rail/scroll-rail.tsx"
+      ],
+      "clientFiles": [
+        "components/ui/scroll-rail/scroll-rail.tsx"
+      ],
+      "deps": [
+        "button",
+        "useResizeObserver"
+      ],
+      "externalDeps": [
+        "@tabler/icons-react",
+        "clsx",
+        "react"
+      ]
+    },
     {
       "name": "select",
       "kind": "component",
@@ -571,7 +601,9 @@
         "components/ui/input-fields/common/types.ts",
         "components/ui/input-fields/select/select.tsx"
       ],
-      "clientFiles": [],
+      "clientFiles": [
+        "components/ui/input-fields/select/select.tsx"
+      ],
       "deps": [
         "button",
         "field-message",
@@ -659,7 +691,9 @@
         "components/ui/input-fields/switch/switch.module.css",
         "components/ui/input-fields/switch/switch.tsx"
       ],
-      "clientFiles": [],
+      "clientFiles": [
+        "components/ui/input-fields/switch/switch.tsx"
+      ],
       "deps": [
         "button",
         "field-message"
@@ -681,6 +715,7 @@
         "components/ui/tabs/tabs.tsx"
       ],
       "deps": [
+        "scroll-rail",
         "useResizeObserver"
       ],
       "externalDeps": [
@@ -800,6 +835,21 @@
         "react"
       ]
     },
+    {
+      "name": "useMediaQuery",
+      "kind": "hook",
+      "group": null,
+      "files": [
+        "hooks/useMediaQuery.ts"
+      ],
+      "clientFiles": [
+        "hooks/useMediaQuery.ts"
+      ],
+      "deps": [],
+      "externalDeps": [
+        "react"
+      ]
+    },
     {
       "name": "useResizeObserver",
       "kind": "hook",