aplance-ui 1.0.2 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
   "keywords": [
     "react",

package/registry/components/primitives/modal/modal.tsx

@@ -88,7 +88,7 @@ const releaseScrollLock = () => {
 
 // ─── Shared button passthrough ────────────────────────────────────────────────
 
-type ButtonPassthroughProps = {
+export type ButtonPassthroughProps = {
   variant?: ButtonVariant;
   size?: ButtonSize;
   layout?: ButtonLayout;
@@ -101,7 +101,7 @@ type ButtonPassthroughProps = {
 
 // ─── Modal ────────────────────────────────────────────────────────────────────
 
-type ModalProps = {
+export type ModalProps = {
   /**
    * Dialog content plus an optional <ModalTrigger>. ModalTrigger is hoisted
    * out of the dialog panel so it stays visible while the modal is closed.
@@ -378,7 +378,7 @@ export const Modal: FC<ModalProps> = ({
 // the trigger stays visible while the modal is closed. For fully controlled
 // modals the trigger can live elsewhere; call open() from useModal() instead.
 
-type ModalTriggerProps = ButtonPassthroughProps & {
+export type ModalTriggerProps = ButtonPassthroughProps & {
   asChild?: boolean;
 };
 
@@ -438,7 +438,7 @@ export const ModalTrigger: FC<ModalTriggerProps> = ({
 // Explicit close button inside footer/body (e.g. "Cancel").
 // The automatic X button is controlled by showCloseButton prop on Modal.
 
-type ModalCloseProps = ButtonPassthroughProps & {
+export type ModalCloseProps = ButtonPassthroughProps & {
   asChild?: boolean;
 };
 

package/registry/components/primitives/popover/popover.module.css

@@ -1,28 +1,23 @@
 
-.container {
-  /* its width can be managed from parent or user component container */
-  /* e.g. using with custom-select: .container can be anything and this will match it */
-  width: fit-content;
-  position: relative;
-  display: flex;
+.container {
+  width: fit-content;
+  position: relative;
+  display: flex;
   align-items: center;
   justify-content: center;
 
   .trigger {
-    width: 100%;
-    min-width: fit-content;
-    display: flex;
-    align-items: center;
-    /* add other styles from props */
-
-    &[data-disabled="true"] {
-      pointer-events: none;
+    width: 100%;
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+
+    &[data-disabled="true"] {
+      pointer-events: none;
     }
   }
-
-  .menu_wrapper {
-    /* style as needed at usage */
-    min-width: fit-content;
-    /* max-width: 100% !important; can be updated with !important */
-  }
-}
+
+  .menu_wrapper {
+    min-width: fit-content;
+  }
+}

package/registry/components/primitives/popover/popover.tsx

@@ -26,7 +26,7 @@ export type Coords = {
 };
 
 // Popover Component
-type PopoverProps = {
+export type PopoverProps = {
   children?: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -279,7 +279,7 @@ export const Popover: FC<PopoverProps> = ({
 };
 
 // Trigger
-type PopoverTriggerProps = ComponentProps<"button"> & {
+export type PopoverTriggerProps = ComponentProps<"button"> & {
   children?: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -355,7 +355,7 @@ export const PopoverTrigger: FC<PopoverTriggerProps> = ({
 };
 
 // Menu
-type PopoverMenuProps = {
+export type PopoverMenuProps = {
   children?: ReactNode;
   className?: string;
   style?: CSSProperties;

package/registry/components/ui/avatar/avatar.tsx

@@ -2,9 +2,9 @@ import clsx from "clsx";
 import s from "./avatar.module.css";
 import { getInitials, hashName } from "../../../lib/string";
 
-type AvatarSize = "sm" | "md" | "lg";
+export type AvatarSize = "sm" | "md" | "lg";
 
-type AvatarProps = {
+export type AvatarProps = {
   name: string;
   size?: AvatarSize;
   className?: string;
@@ -19,8 +19,6 @@ const COLORS = [
   { bg: "oklch(0.92 0.05 330)", fg: "oklch(0.4 0.15 330)" },
 ];
 
-
-
 export function Avatar({ name, size = "md", className }: AvatarProps) {
   const color = COLORS[hashName(name) % COLORS.length];
   const initials = getInitials(name) || "?";

package/registry/components/ui/badge/badge.tsx

@@ -1,16 +1,27 @@
 import clsx from "clsx";
 import s from "./badge.module.css";
 
-type BadgeVariant = "default" | "primary" | "success" | "warning" | "error" | "info";
-type BadgeSize = "default" | "sm";
+export type BadgeVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+export type BadgeSize = "default" | "sm";
 
-type BadgeProps = {
+export type BadgeProps = {
   variant?: BadgeVariant;
   size?: BadgeSize;
   className?: string;
   children: React.ReactNode;
 };
 
+export type CountBadgeProps = {
+  count: number;
+  className?: string;
+};
+
 export function Badge({ variant = "default", size = "default", className, children }: BadgeProps) {
   return (
     <span className={clsx(s.base, s[variant], size === "sm" && s.sm, className)}>
@@ -19,7 +30,7 @@ export function Badge({ variant = "default", size = "default", className, childr
   );
 }
 
-export function CountBadge({ count, className }: { count: number; className?: string }) {
+export function CountBadge({ count, className }: CountBadgeProps) {
   if (count <= 0) return null;
   return (
     <span className={clsx(s.count, className)} aria-label={`${count} notifications`}>

package/registry/components/ui/button/button.module.css

@@ -1,8 +1,4 @@
-/* contains all possible styles of button component
-with selectors for different variants and sizes and states
-*/
-
-.base {
+.base {
   --button-fg: var(--color-foreground);
   --button-placeholder: var(--button-fg);
   --button-icon: var(--button-fg);
@@ -28,8 +24,7 @@ with selectors for different variants and sizes and states
   outline: none;
   border: none;
 
-  /* necessary */
-  line-height: 1.125;
+  line-height: 1.125;
 
   svg {
     cursor: pointer;
@@ -41,8 +36,7 @@ with selectors for different variants and sizes and states
     font-size: var(--font-size-xs);
   }
 
-  /* Box layout - perfect square with centered content */
-  &.box {
+  &.box {
     width: var(--spacing-11);
     min-height: unset;
     justify-content: center;

package/registry/components/ui/button/button.tsx

@@ -45,7 +45,7 @@ type ElementModeProps<T extends "button" | "div" | "span"> = BaseProps & {
   href?: never;
 } & ComponentProps<T>;
 
-type ButtonProps =
+export type ButtonProps =
   | LinkModeProps
   | ElementModeProps<"button">
   | ElementModeProps<"div">

package/registry/components/ui/data-table/data-table.module.css

@@ -114,12 +114,10 @@
   overflow-x: auto;
   overflow-y: auto;
   border: var(--border-1) solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-  position: relative;
-  /* Add this smooth transition */
-  transition: opacity 0.2s ease;
-}
+  border-radius: var(--radius-md);
+  background: var(--color-background);
+  position: relative;
+}
 
 /* ─────────────────────────────────────────────
    Shared <table> - header wrap + body wrap.

package/registry/components/ui/data-table/data-table.tsx

@@ -12,11 +12,12 @@ import {
   type Updater,
 } from "@tanstack/react-table";
 import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
   type CSSProperties,
   type DragEvent as ReactDragEvent,
   type ReactNode,
@@ -73,11 +74,13 @@ const EMPTY_FILTER_VALUES: Record<string, string> = {};
 const ICON_SIZE = 15;
 const SORT_ICON_SIZE = 13;
 const ICON_STROKE = 1.6;
-const EMPTY_COLUMN_EXTRA_WIDTHS: Record<string, number> = {};
-// Grace period after `isLoading` flips false before committing to the empty
-// state. Eliminates the flash when consumers set isLoading=false a render
-// before populating rows, without making genuinely-empty results feel sluggish.
-const EMPTY_STATE_GRACE_MS = 150;
+const EMPTY_COLUMN_EXTRA_WIDTHS: Record<string, number> = {};
+// Grace period after `isLoading` flips false before committing to the empty
+// state. Eliminates the flash when consumers set isLoading=false a render
+// before populating rows, without making genuinely-empty results feel sluggish.
+const EMPTY_STATE_GRACE_MS = 150;
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
 
 export const DataTable = <TData extends { id: string }>({
   data,
@@ -349,12 +352,19 @@ export const DataTable = <TData extends { id: string }>({
   const tableColumnPinning = tableState.columnPinning;
   const tableColumnSizing = tableState.columnSizing;
   const tableColumnOrder = tableState.columnOrder;
-  const tableColumnVisibility = tableState.columnVisibility;
-  const tableGrouping = tableState.grouping;
-  const [bodyViewportWidth, setBodyViewportWidth] = useState(0);
-
-  const syncHeaderMetrics = useCallback(() => {
-    const body = bodyRef.current;
+  const tableColumnVisibility = tableState.columnVisibility;
+  const tableGrouping = tableState.grouping;
+  const [bodyViewportWidth, setBodyViewportWidth] = useState(0);
+  const bodyViewportWidthRef = useRef(0);
+
+  const commitBodyViewportWidth = useCallback((nextWidth: number) => {
+    if (bodyViewportWidthRef.current === nextWidth) return;
+    bodyViewportWidthRef.current = nextWidth;
+    setBodyViewportWidth(nextWidth);
+  }, []);
+
+  const syncHeaderMetrics = useCallback(() => {
+    const body = bodyRef.current;
     const header = headerRef.current;
     if (!body || !header) return;
 
@@ -369,32 +379,33 @@ export const DataTable = <TData extends { id: string }>({
     );
     header.parentElement?.setAttribute("data-has-scroll", hasScroll.toString());
 
-    // Re-sync horizontal scroll position after width changes so pinned
-    // columns stay perfectly aligned with their body counterparts.
-    header.scrollLeft = body.scrollLeft;
-    setBodyViewportWidth(body.clientWidth);
-  }, []);
-
-  useEffect(() => {
-    syncHeaderMetrics();
-  }, [
-    rows.length,
+    // Re-sync horizontal scroll position after width changes so pinned
+    // columns stay perfectly aligned with their body counterparts.
+    header.scrollLeft = body.scrollLeft;
+    commitBodyViewportWidth(body.clientWidth);
+  }, [commitBodyViewportWidth]);
+
+  useIsomorphicLayoutEffect(() => {
+    syncHeaderMetrics();
+  }, [
+    rows.length,
     headerCount,
     totalWidth,
     tableColumnPinning,
     tableColumnSizing,
     tableColumnOrder,
     tableColumnVisibility,
-    tableGrouping,
-    syncHeaderMetrics,
-  ]);
-
-  useEffect(() => {
-    const body = bodyRef.current;
-    if (!body) return;
-
-    const observer = new ResizeObserver(syncHeaderMetrics);
-    observer.observe(body);
+    tableGrouping,
+    syncHeaderMetrics,
+  ]);
+
+  useIsomorphicLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!body) return;
+    if (typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(syncHeaderMetrics);
+    observer.observe(body);
 
     return () => {
       observer.disconnect();
@@ -599,13 +610,16 @@ export const DataTable = <TData extends { id: string }>({
                                 isPinned === "right" && s.col_pinned_right,
                                 isLastPinnedCol && s.col_pinned_last,
                               )}
-                              style={baseStyle}
-                            >
-                              <div className={s.td_inner}>
-                                <Loader variant="skeleton" style={{height: "var(--spacing-9)"}}/>
-                              </div>
-                            </td>
-                          );
+                              style={baseStyle}
+                            >
+                              <div className={s.td_inner}>
+                                <Loader
+                                  variant="skeleton"
+                                  style={{ height: "var(--spacing-9)" }}
+                                />
+                              </div>
+                            </td>
+                          );
                         })}
                       </tr>
                     ),

package/registry/components/ui/data-table/filter-bar.tsx

@@ -1,33 +1,33 @@
-import { Fragment } from 'react'
-import type { FilterBarProps } from './types'
-import s from './data-table.module.css'
+import { Fragment } from "react";
+import type { FilterBarProps } from "./types";
+import s from "./data-table.module.css";
 
 /**
  * Headless single-row filter bar.
  * Each field owns its rendering via a render-prop and sets its own grid
  * column width. The bar never wraps - consumers pick widths that fit.
  *
- * Width defaults: input fields → `1fr`, actions → `auto`.
+ * Width defaults: input fields -> `1fr`, actions -> `auto`.
  */
 export const FilterBar = ({ fields, values, onChange }: FilterBarProps) => {
   const gridCols = fields
-    .map((f) => f.width ?? (f.type === 'action' ? 'auto' : '1fr'))
-    .join(' ')
+    .map((f) => f.width ?? (f.type === "action" ? "auto" : "1fr"))
+    .join(" ");
 
   return (
     <div className={s.filter_bar} style={{ gridTemplateColumns: gridCols }}>
       {fields.map((field, i) => (
         <Fragment
-          key={field.type === 'action' ? `act:${i}` : `k:${field.key}`}
+          key={field.type === "action" ? `act:${i}` : `k:${field.key}`}
         >
-          {field.type === 'action'
+          {field.type === "action"
             ? field.render()
             : field.render({
-                value: values[field.key] ?? '',
+                value: values[field.key] ?? "",
                 onChange: (v) => onChange(field.key, v),
               })}
         </Fragment>
       ))}
     </div>
-  )
-}
+  );
+};

package/registry/components/ui/data-table/pagination-bar.tsx

@@ -1,13 +1,13 @@
-import { Button } from '../button/button'
-import { CustomSelect } from '../input-fields/custom-select/custom-select'
-import type { PaginationBarProps } from './types'
-import s from './data-table.module.css'
 import {
   IconChevronLeft,
   IconChevronRight,
   IconChevronsLeft,
   IconChevronsRight,
-} from '@tabler/icons-react'
+} from "@tabler/icons-react";
+import { Button } from "../button/button";
+import { CustomSelect } from "../input-fields/custom-select/custom-select";
+import type { PaginationBarProps } from "./types";
+import s from "./data-table.module.css";
 
 export const PaginationBar = <TData,>({
   table,
@@ -21,22 +21,22 @@ export const PaginationBar = <TData,>({
   selectedCount,
   extra,
 }: PaginationBarProps<TData>) => {
-  const pageCount = table.getPageCount()
-  const total = totalCount ?? table.getRowCount()
-  const canPrev = table.getCanPreviousPage()
-  const canNext = table.getCanNextPage()
+  const pageCount = table.getPageCount();
+  const total = totalCount ?? table.getRowCount();
+  const canPrev = table.getCanPreviousPage();
+  const canNext = table.getCanNextPage();
 
   const goTo = (i: number) =>
-    onPaginationChange({ ...pagination, pageIndex: i })
+    onPaginationChange({ ...pagination, pageIndex: i });
   const setSize = (size: number) =>
-    onPaginationChange({ pageIndex: 0, pageSize: size })
+    onPaginationChange({ pageIndex: 0, pageSize: size });
 
   // Always show all page size options - current pageSize is guaranteed in the list.
   const sizeOptions = Array.from(
     new Set([...pageSizeOptions, pagination.pageSize]),
   )
     .sort((a, b) => a - b)
-    .map((n) => ({ value: String(n), label: String(n) }))
+    .map((n) => ({ value: String(n), label: String(n) }));
 
   return (
     <div className={s.pagination_bar}>
@@ -66,7 +66,7 @@ export const PaginationBar = <TData,>({
               <CustomSelect
                 options={sizeOptions}
                 value={String(pagination.pageSize)}
-                popover={{position: "top"}}
+                popover={{ position: "top" }}
                 onChange={(val) =>
                   setSize(Number(Array.isArray(val) ? val[0] : val))
                 }
@@ -76,7 +76,7 @@ export const PaginationBar = <TData,>({
           )}
 
           <p className={s.page_indicator}>
-            Page <span>{pagination.pageIndex + 1}</span> of{' '}
+            Page <span>{pagination.pageIndex + 1}</span> of{" "}
             <span>{pageCount}</span>
           </p>
 
@@ -121,5 +121,5 @@ export const PaginationBar = <TData,>({
         </div>
       )}
     </div>
-  )
-}
+  );
+};

package/registry/components/ui/empty-state/empty-state.tsx

@@ -2,7 +2,7 @@ import type { ElementType } from "react";
 import { Icon } from "../../primitives/icon/icon";
 import s from "./empty-state.module.css";
 
-type EmptyStateProps = {
+export type EmptyStateProps = {
   icon?: ElementType;
   title: string;
   description?: string;