@ztwoint/z-ui 0.1.44 → 0.1.45

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/table';
 export * from './components/tooltip/tooltip';
 export * from './components/table-card';
 export * from './components/badge/badge';
+export * from './components/avatar/avatar';
 export * from './components/assets/icons/apartment-building';
 export * from './components/assets/icons/chevron-down';
 export * from './components/assets/icons/chevron-left';

package/dist/index.js

@@ -10,10 +10,10 @@ import { Z2SideNavBarFooter as s } from "./components/collapsible-side-nav-bar/s
 import { Z2SideNavBarGroup as v } from "./components/collapsible-side-nav-bar/side-nav-bar-group.js";
 import { Z2SideNavBarItem as M } from "./components/collapsible-side-nav-bar/side-nav-bar-item.js";
 import { Z2SideNavBarSeparator as N } from "./components/collapsible-side-nav-bar/side-nav-bar-separator.js";
-import { useZ2SideNavBar as E } from "./components/collapsible-side-nav-bar/context.js";
+import { useZ2SideNavBar as L } from "./components/collapsible-side-nav-bar/context.js";
 import { Z2Popover as F } from "./components/collapsible-side-nav-bar/popover/popover.js";
 import { ChevronUpIcon as _ } from "./components/assets/icons/chevron-up-icon.js";
-import { default as V } from "./components/assets/icons/sub-nav-indicator.js";
+import { default as h } from "./components/assets/icons/sub-nav-indicator.js";
 import { default as G } from "./components/assets/icons/circles-icon.js";
 import { default as U } from "./components/assets/icons/database-copy.js";
 import { default as k } from "./components/assets/icons/window-left-copy.js";
@@ -22,9 +22,9 @@ import { SIDEBAR_WIDTH as Y, SIDEBAR_WIDTH_COLLAPSED as j } from "./components/c
 import { CountryFlags as z } from "./components/country-flags/country-flags.js";
 import { Z2Dialog as X, Z2DialogClose as $, Z2DialogContent as oo, Z2DialogDescription as eo, Z2DialogFooter as ro, Z2DialogHeader as to, Z2DialogOverlay as ao, Z2DialogPortal as po, Z2DialogTitle as no, Z2DialogTrigger as lo } from "./components/dialog/dialog.js";
 import { DropdownContext as fo, Z2Dropdown as xo, Z2DropdownContent as io, Z2DropdownInput as Zo, Z2DropdownItem as uo, Z2DropdownSub as So, Z2DropdownSubContent as Do, Z2DropdownSubItem as To, Z2DropdownSubTrigger as bo } from "./components/dropdown/z2-dropdown.js";
-import { Z2DropdownMenu as Co, Z2DropdownMenuCheckboxItem as wo, Z2DropdownMenuContent as co, Z2DropdownMenuGroup as so, Z2DropdownMenuItem as Io, Z2DropdownMenuLabel as vo, Z2DropdownMenuPortal as Bo, Z2DropdownMenuRadioGroup as Mo, Z2DropdownMenuRadioItem as Ao, Z2DropdownMenuSeparator as No, Z2DropdownMenuShortcut as Po, Z2DropdownMenuSub as Eo, Z2DropdownMenuSubContent as Lo, Z2DropdownMenuSubTrigger as Fo, Z2DropdownMenuTrigger as Ho } from "./components/dropdown-menu/z2-dropdown-menu.js";
+import { Z2DropdownMenu as Co, Z2DropdownMenuCheckboxItem as wo, Z2DropdownMenuContent as co, Z2DropdownMenuGroup as so, Z2DropdownMenuItem as Io, Z2DropdownMenuLabel as vo, Z2DropdownMenuPortal as Bo, Z2DropdownMenuRadioGroup as Mo, Z2DropdownMenuRadioItem as Ao, Z2DropdownMenuSeparator as No, Z2DropdownMenuShortcut as Po, Z2DropdownMenuSub as Lo, Z2DropdownMenuSubContent as Eo, Z2DropdownMenuSubTrigger as Fo, Z2DropdownMenuTrigger as Ho } from "./components/dropdown-menu/z2-dropdown-menu.js";
 import { FileUploadArea as yo } from "./components/file-upload-area/file-upload-area.js";
-import { DEFAULT_ACCEPT as ho } from "./components/file-upload-area/file-upload-area.const.js";
+import { DEFAULT_ACCEPT as Vo } from "./components/file-upload-area/file-upload-area.const.js";
 import { Input as Ro } from "./components/input/input.js";
 import { NavHeader as Wo } from "./components/nav-header/nav-header.js";
 import { NavItem as Oo } from "./components/nav-header/nav-item/nav-item.js";
@@ -40,11 +40,11 @@ import { TableContext as se, useTableContext as Ie } from "./components/table/ta
 import { TableCell as Be } from "./components/table/components/table-cell.js";
 import { TextCell as Ae } from "./components/table/components/cell/text-cell.js";
 import { NumberCell as Pe } from "./components/table/components/cell/number-cell.js";
-import { BooleanCell as Le } from "./components/table/components/cell/boolean-cell.js";
+import { BooleanCell as Ee } from "./components/table/components/cell/boolean-cell.js";
 import { TableHeader as He } from "./components/table/components/table-header/table-header.js";
 import "react/jsx-runtime";
 import { TableRow as ye } from "./components/table/components/table-row.js";
-import { TableEmptyState as he } from "./components/table/components/table-empty-state.js";
+import { TableEmptyState as Ve } from "./components/table/components/table-empty-state.js";
 import { TableLoadingState as Re } from "./components/table/components/table-loading-state.js";
 import { Pagination as We } from "./components/table/components/pagination/pagination.js";
 import { TableHeaderWrapper as Oe } from "./components/table/components/table-header-wrapper.js";
@@ -59,28 +59,31 @@ import "react";
 import { Z2Tooltip as nr } from "./components/tooltip/tooltip.js";
 import { default as mr } from "./components/table-card/table-card.js";
 import { Badge as xr, badgeVariants as ir } from "./components/badge/badge.js";
-import { InfoIcon as dr } from "./components/assets/icons/info-icon.js";
-import { useTheme as Sr } from "./lib/theme.hook.js";
-import { cn as Tr } from "./lib/utils.js";
-import { Z2PopoverTrigger as gr } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
-import { Z2PopoverContent as wr } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
+import { Avatar as dr, AvatarWithLabel as ur } from "./components/avatar/avatar.js";
+import { InfoIcon as Dr } from "./components/assets/icons/info-icon.js";
+import { useTheme as br } from "./lib/theme.hook.js";
+import { cn as Cr } from "./lib/utils.js";
+import { Z2PopoverTrigger as cr } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
+import { Z2PopoverContent as Ir } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
 export {
   p as Alert,
   f as AlertCirclesIcon,
   n as AlertDescription,
   l as AlertTitle,
+  dr as Avatar,
+  ur as AvatarWithLabel,
   xr as Badge,
-  Le as BooleanCell,
+  Ee as BooleanCell,
   i as Button,
   _ as ChevronUpIcon,
   G as CirclesIcon,
   z as CountryFlags,
-  ho as DEFAULT_ACCEPT,
+  Vo as DEFAULT_ACCEPT,
   Ce as DEFAULT_EMPTY_MESSAGE,
   U as DatabaseCopy,
   fo as DropdownContext,
   yo as FileUploadArea,
-  dr as InfoIcon,
+  Dr as InfoIcon,
   Ro as Input,
   Xe as MagnifierIcon,
   Wo as NavHeader,
@@ -91,14 +94,14 @@ export {
   Y as SIDEBAR_WIDTH,
   j as SIDEBAR_WIDTH_COLLAPSED,
   J as SidebarLeftShowCopy,
-  V as SubNavIndicator,
+  h as SubNavIndicator,
   we as TABLE_CSS_CLASSES,
   Ze as Table,
   Se as TableBody,
   mr as TableCard,
   Be as TableCell,
   se as TableContext,
-  he as TableEmptyState,
+  Ve as TableEmptyState,
   or as TableFilter,
   je as TableFooter,
   ze as TableFooterContent,
@@ -136,8 +139,8 @@ export {
   Ao as Z2DropdownMenuRadioItem,
   No as Z2DropdownMenuSeparator,
   Po as Z2DropdownMenuShortcut,
-  Eo as Z2DropdownMenuSub,
-  Lo as Z2DropdownMenuSubContent,
+  Lo as Z2DropdownMenuSub,
+  Eo as Z2DropdownMenuSubContent,
   Fo as Z2DropdownMenuSubTrigger,
   Ho as Z2DropdownMenuTrigger,
   So as Z2DropdownSub,
@@ -145,8 +148,8 @@ export {
   To as Z2DropdownSubItem,
   bo as Z2DropdownSubTrigger,
   F as Z2Popover,
-  wr as Z2PopoverContent,
-  gr as Z2PopoverTrigger,
+  Ir as Z2PopoverContent,
+  cr as Z2PopoverTrigger,
   Qo as Z2Select,
   Yo as Z2SelectContent,
   jo as Z2SelectGroup,
@@ -175,10 +178,10 @@ export {
   nr as Z2Tooltip,
   ir as badgeVariants,
   Z as buttonVariants,
-  Tr as cn,
+  Cr as cn,
   Te as extractCellValue,
   be as getNestedValue,
   Ie as useTableContext,
-  Sr as useTheme,
-  E as useZ2SideNavBar
+  br as useTheme,
+  L as useZ2SideNavBar
 };

package/dist/types/components/avatar/avatar.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Props for the Avatar Root component.
+ * @interface RootProps
+ */
+interface RootProps {
+    /** Size variant of the avatar. Affects width, height, border radius, and text size */
+    size: 'xxs' | 'xs' | 'sm' | 'md';
+    /** Color theme of the avatar using design system color tokens */
+    color: 'orange' | 'purple' | 'green' | 'blue';
+    /** Child components, typically Avatar.Label or Avatar.Element */
+    children: React.ReactNode;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the root div element */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+/**
+ * Avatar Root component - the container for avatar content.
+ *
+ * @param props - The component props
+ * @param props.size - Size variant (xxs: 18px, xs: 22px, sm: 26px, md: 30px)
+ * @param props.color - Color theme using design system tokens
+ * @param props.children - Child components (typically Avatar.Label)
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the root div element
+ * @returns The rendered avatar container
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root size="sm" color="orange">
+ *   <Avatar.Label label="JD" />
+ * </Avatar.Root>
+ * ```
+ */
+declare function Root({ size, color, children, className, ref, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the Avatar Element component.
+ * @interface ElementProps
+ */
+interface ElementProps {
+    /** Text content to display in the avatar (typically initials) */
+    label: string;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the span element */
+    ref?: React.RefObject<HTMLSpanElement>;
+    /** When true, merges props with the first child instead of rendering a span */
+    asChild?: boolean;
+    /** Child components (only used when asChild is true) */
+    children?: React.ReactNode;
+}
+/**
+ * Avatar Element component - flexible text/content renderer with asChild support.
+ *
+ * @param props - The component props
+ * @param props.label - Text to display (typically user initials)
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the element
+ * @param props.asChild - When true, uses Radix Slot to merge with first child
+ * @param props.children - Child components (only when asChild is true)
+ * @returns The rendered element with avatar text styling
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Element label="JD" />
+ *
+ * // With asChild for custom elements
+ * <Avatar.Element label="JD" asChild>
+ *   <button>Custom Button</button>
+ * </Avatar.Element>
+ * ```
+ */
+declare function Element({ label, className, ref, asChild, children, ...props }: ElementProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the Avatar Label component.
+ * @interface LabelProps
+ */
+interface LabelProps {
+    /** Text content to display in the avatar (typically user initials) */
+    label: string;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the span element */
+    ref?: React.RefObject<HTMLSpanElement>;
+}
+/**
+ * Avatar Label component - simplified wrapper around Avatar.Element.
+ *
+ * @param props - The component props
+ * @param props.label - Text to display (typically user initials)
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the span element
+ * @returns The rendered label with avatar text styling
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Label label="JD" />
+ * <Avatar.Label label="AB" className="text-yellow-300" />
+ * ```
+ */
+declare function Label({ label, className, ref, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the AvatarWithLabel convenience component.
+ * @interface AvatarWithLabelProps
+ */
+interface AvatarWithLabelProps {
+    /** Text content to display in the avatar (typically user initials) */
+    label: string;
+    /** Size variant of the avatar. Affects width, height, border radius, and text size */
+    size: 'xxs' | 'xs' | 'sm' | 'md';
+    /** Color theme of the avatar using design system color tokens */
+    color: 'orange' | 'purple' | 'green' | 'blue';
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Ref object for the root div element */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+/**
+ * AvatarWithLabel - A convenience component that combines Avatar.Root and Avatar.Label.
+ * Perfect for simple use cases where you just need an avatar with text.
+ *
+ * @param props - The component props
+ * @param props.label - Text to display (typically user initials)
+ * @param props.size - Size variant (xxs: 18px, xs: 22px, sm: 26px, md: 30px)
+ * @param props.color - Color theme using design system tokens
+ * @param props.className - Additional CSS classes
+ * @param props.ref - Ref for the root div element
+ * @returns The rendered avatar with label
+ *
+ * @example
+ * ```tsx
+ * <AvatarWithLabel label="JD" size="sm" color="orange" />
+ * <AvatarWithLabel label="AB" size="md" color="blue" className="rounded-full" />
+ * ```
+ */
+declare function AvatarWithLabel({ label, size, color, className, ref, ...props }: AvatarWithLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Avatar compound component with multiple variants for flexible usage.
+ *
+ * @namespace Avatar
+ * @property {React.ComponentType<RootProps>} Root - Container component for avatar content
+ * @property {React.ComponentType<ElementProps>} Element - Flexible text/content renderer with asChild support
+ * @property {React.ComponentType<LabelProps>} Label - Simplified text renderer (wrapper around Element)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Avatar.Root size="sm" color="orange">
+ *   <Avatar.Label label="JD" />
+ * </Avatar.Root>
+ *
+ * // With custom styling
+ * <Avatar.Root size="md" color="blue" className="rounded-full border-2 border-white">
+ *   <Avatar.Label label="AB" className="text-yellow-300" />
+ * </Avatar.Root>
+ *
+ * // Using Element with asChild for custom components
+ * <Avatar.Root size="sm" color="green">
+ *   <Avatar.Element label="CD" asChild>
+ *     <button onClick={handleClick}>Clickable Avatar</button>
+ *   </Avatar.Element>
+ * </Avatar.Root>
+ * ```
+ */
+declare const Avatar: {
+    Root: typeof Root;
+    Element: typeof Element;
+    Label: typeof Label;
+};
+/**
+ * @fileoverview Avatar component library providing both compound and convenience components.
+ *
+ * This module exports:
+ * - Avatar: A compound component with Root, Element, and Label sub-components
+ * - AvatarWithLabel: A convenience component that combines Root and Label
+ *
+ * Features:
+ * - Multiple sizes (xxs, xs, sm, md) with responsive scaling
+ * - Color themes using design system tokens
+ * - Customizable styling via className
+ * - Radix Slot support for advanced composition
+ * - TypeScript support with comprehensive prop types
+ * - Optimized typography for readability at all sizes
+ */
+export { Avatar, AvatarWithLabel, ElementProps, LabelProps, RootProps, AvatarWithLabelProps };

package/dist/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './components/table';
 export * from './components/tooltip/tooltip';
 export * from './components/table-card';
 export * from './components/badge/badge';
+export * from './components/avatar/avatar';
 export * from './components/assets/icons/apartment-building';
 export * from './components/assets/icons/chevron-down';
 export * from './components/assets/icons/chevron-left';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",