@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/AppShell/index.js

@@ -0,0 +1,213 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./AppShell.module.scss.js";
+import { SidebarProvider, Sidebar, useSidebar } from "../Sidebar/index.js";
+const AppShellContext = React.createContext({
+  layout: "default",
+  headerHeight: "56px",
+  sidebarWidth: "240px",
+  sidebarCollapsedWidth: "64px",
+  asideWidth: "280px",
+  asideVisible: false
+});
+function useAppShell() {
+  return React.useContext(AppShellContext);
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function extractConfigFromChildren(children) {
+  const config = {
+    headerHeight: "56px",
+    sidebarWidth: "240px",
+    sidebarCollapsedWidth: "64px",
+    sidebarCollapsible: "icon",
+    sidebarDefaultCollapsed: false,
+    asideWidth: "280px",
+    asideVisible: false
+  };
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === AppShellHeader) {
+      const props = child.props;
+      if (props.height) config.headerHeight = props.height;
+    }
+    if (child.type === AppShellSidebar) {
+      const props = child.props;
+      if (props.width) config.sidebarWidth = props.width;
+      if (props.collapsedWidth) config.sidebarCollapsedWidth = props.collapsedWidth;
+      if (props.collapsible) config.sidebarCollapsible = props.collapsible;
+      if (props.defaultCollapsed !== void 0) config.sidebarDefaultCollapsed = props.defaultCollapsed;
+    }
+    if (child.type === AppShellAside) {
+      const props = child.props;
+      if (props.width) config.asideWidth = props.width;
+      if (props.visible !== false) config.asideVisible = true;
+    }
+  });
+  return config;
+}
+function AppShellInner({
+  children,
+  className,
+  layout,
+  ...htmlProps
+}) {
+  const appShell = useAppShell();
+  const { collapsed, isMobile, collapsible } = useSidebar();
+  const classes = [
+    styles.root,
+    (layout === "sidebar" || layout === "sidebar-floating") && styles.sidebarLayout,
+    layout === "sidebar-floating" && styles.sidebarFloatingLayout,
+    className
+  ].filter(Boolean).join(" ");
+  const actualSidebarWidth = isMobile ? "0px" : collapsible === "icon" && collapsed ? appShell.sidebarCollapsedWidth : collapsible === "offcanvas" && collapsed ? "0px" : appShell.sidebarWidth;
+  const style = {
+    "--appshell-header-height": appShell.headerHeight,
+    "--appshell-sidebar-width": actualSidebarWidth,
+    "--appshell-sidebar-expanded-width": appShell.sidebarWidth,
+    "--appshell-sidebar-collapsed-width": appShell.sidebarCollapsedWidth,
+    "--appshell-aside-width": appShell.asideVisible ? appShell.asideWidth : "0px"
+  };
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, style, "data-layout": layout, "data-mobile": isMobile || void 0, children });
+}
+function AppShellRoot({
+  children,
+  layout = "default",
+  className,
+  ...htmlProps
+}) {
+  const config = React.useMemo(() => extractConfigFromChildren(children), [children]);
+  const contextValue = {
+    layout,
+    headerHeight: config.headerHeight,
+    sidebarWidth: config.sidebarWidth,
+    sidebarCollapsedWidth: config.sidebarCollapsedWidth,
+    asideWidth: config.asideWidth,
+    asideVisible: config.asideVisible
+  };
+  return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    SidebarProvider,
+    {
+      width: config.sidebarWidth,
+      collapsedWidth: config.sidebarCollapsedWidth,
+      collapsible: config.sidebarCollapsible,
+      defaultCollapsed: config.sidebarDefaultCollapsed,
+      children: /* @__PURE__ */ jsx(AppShellInner, { className, layout, ...htmlProps, children })
+    }
+  ) });
+}
+function AppShellHeader({
+  children,
+  height = "56px",
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const classes = [
+    styles.header,
+    (layout === "sidebar" || layout === "sidebar-floating") && styles.headerSidebar,
+    layout === "sidebar-floating" && styles.headerFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, style, children });
+}
+function AppShellSidebar({
+  children,
+  width = "240px",
+  collapsedWidth = "64px",
+  collapsible = "icon",
+  position = "left",
+  defaultCollapsed = false,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const isMobile = useIsMobile();
+  const { layout } = useAppShell();
+  const classes = [
+    styles.sidebar,
+    (layout === "sidebar" || layout === "sidebar-floating") && styles.sidebarFullHeight,
+    layout === "sidebar-floating" && styles.sidebarFloating,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, children: [
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        width,
+        collapsedWidth,
+        position,
+        collapsible,
+        defaultCollapsed,
+        "aria-label": ariaLabel,
+        children
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsx(Sidebar.Overlay, {})
+  ] });
+}
+function AppShellMain({
+  children,
+  padding = "md",
+  className,
+  id = "main-content",
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const classes = [
+    styles.main,
+    padding !== "none" && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
+    layout === "sidebar-floating" && styles.mainFloating,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("main", { ...htmlProps, className: classes, id, children });
+}
+function AppShellAside({
+  children,
+  width = "280px",
+  visible = true,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  if (!visible) {
+    return null;
+  }
+  const classes = [styles.aside, className].filter(Boolean).join(" ");
+  const style = {
+    "--aside-width": width,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx("aside", { ...htmlProps, className: classes, style, children });
+}
+const AppShell = Object.assign(AppShellRoot, {
+  Header: AppShellHeader,
+  Sidebar: AppShellSidebar,
+  Main: AppShellMain,
+  Aside: AppShellAside
+});
+export {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellRoot,
+  AppShellSidebar,
+  useAppShell
+};
+//# sourceMappingURL=index.js.map

package/dist/components/AppShell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/AppShell/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './AppShell.module.scss';\nimport {\n  SidebarProvider,\n  Sidebar,\n  useSidebar,\n  type SidebarCollapsible,\n} from '../Sidebar';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * ```\n * 'default'           'sidebar'          'sidebar-floating'\n * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐\n * │    Header    │    │    │ Header  │   │    │ Header  │\n * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤\n * │    │         │    │bar │         │   │bar │┌───────┐│\n * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││\n * │bar │         │    │    │         │   │    │└───────┘│\n * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘\n * ```\n */\nexport type AppShellLayout = 'default' | 'sidebar' | 'sidebar-floating';\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /**\n   * Layout mode:\n   *\n   * ```\n   * 'default'           'sidebar'          'sidebar-floating'\n   * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐\n   * │    Header    │    │    │ Header  │   │    │ Header  │\n   * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤\n   * │    │         │    │bar │         │   │bar │┌───────┐│\n   * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││\n   * │bar │         │    │    │         │   │    │└───────┘│\n   * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘\n   * ```\n   *\n   * - `'default'`: Header spans full width, sidebar below (default)\n   * - `'sidebar'`: Sidebar is full height, header sits beside it\n   * - `'sidebar-floating'`: Like `sidebar` but main content floats with rounded corners and a distinct background\n   */\n  layout?: AppShellLayout;\n}\n\nexport interface AppShellHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Header height (default: '56px') */\n  height?: string;\n}\n\nexport interface AppShellSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Width of expanded sidebar (default: '240px') */\n  width?: string;\n  /** Width when collapsed (default: '64px') */\n  collapsedWidth?: string;\n  /** Collapse behavior */\n  collapsible?: SidebarCollapsible;\n  /** Sidebar position */\n  position?: 'left' | 'right';\n  /** Default collapsed state */\n  defaultCollapsed?: boolean;\n}\n\nexport interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Content padding */\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nexport interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Aside width (default: '280px') */\n  width?: string;\n  /** Control visibility */\n  visible?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface AppShellContextValue {\n  layout: AppShellLayout;\n  headerHeight: string;\n  sidebarWidth: string;\n  sidebarCollapsedWidth: string;\n  asideWidth: string;\n  asideVisible: boolean;\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue>({\n  layout: 'default',\n  headerHeight: '56px',\n  sidebarWidth: '240px',\n  sidebarCollapsedWidth: '64px',\n  asideWidth: '280px',\n  asideVisible: false,\n});\n\nfunction useAppShell() {\n  return React.useContext(AppShellContext);\n}\n\n// ============================================\n// Hooks\n// ============================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mq = window.matchMedia('(max-width: 767px)');\n    setIsMobile(mq.matches);\n\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener('change', handler);\n    return () => mq.removeEventListener('change', handler);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================\n// Helper to extract config from children\n// ============================================\n\ninterface ExtractedConfig {\n  headerHeight: string;\n  sidebarWidth: string;\n  sidebarCollapsedWidth: string;\n  sidebarCollapsible: SidebarCollapsible;\n  sidebarDefaultCollapsed: boolean;\n  asideWidth: string;\n  asideVisible: boolean;\n}\n\nfunction extractConfigFromChildren(children: React.ReactNode): ExtractedConfig {\n  const config: ExtractedConfig = {\n    headerHeight: '56px',\n    sidebarWidth: '240px',\n    sidebarCollapsedWidth: '64px',\n    sidebarCollapsible: 'icon',\n    sidebarDefaultCollapsed: false,\n    asideWidth: '280px',\n    asideVisible: false,\n  };\n\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return;\n\n    if (child.type === AppShellHeader) {\n      const props = child.props as AppShellHeaderProps;\n      if (props.height) config.headerHeight = props.height;\n    }\n\n    if (child.type === AppShellSidebar) {\n      const props = child.props as AppShellSidebarProps;\n      if (props.width) config.sidebarWidth = props.width;\n      if (props.collapsedWidth) config.sidebarCollapsedWidth = props.collapsedWidth;\n      if (props.collapsible) config.sidebarCollapsible = props.collapsible;\n      if (props.defaultCollapsed !== undefined) config.sidebarDefaultCollapsed = props.defaultCollapsed;\n    }\n\n    if (child.type === AppShellAside) {\n      const props = child.props as AppShellAsideProps;\n      if (props.width) config.asideWidth = props.width;\n      if (props.visible !== false) config.asideVisible = true;\n    }\n  });\n\n  return config;\n}\n\n// ============================================\n// Internal component to apply CSS variables\n// ============================================\n\nfunction AppShellInner({\n  children,\n  className,\n  layout,\n  ...htmlProps\n}: {\n  children: React.ReactNode;\n  className?: string;\n  layout: AppShellLayout;\n} & React.HTMLAttributes<HTMLDivElement>) {\n  const appShell = useAppShell();\n  const { collapsed, isMobile, collapsible } = useSidebar();\n\n  const classes = [\n    styles.root,\n    (layout === 'sidebar' || layout === 'sidebar-floating') && styles.sidebarLayout,\n    layout === 'sidebar-floating' && styles.sidebarFloatingLayout,\n    className,\n  ].filter(Boolean).join(' ');\n\n  // Calculate actual sidebar width based on state\n  const actualSidebarWidth = isMobile\n    ? '0px'\n    : (collapsible === 'icon' && collapsed)\n      ? appShell.sidebarCollapsedWidth\n      : (collapsible === 'offcanvas' && collapsed)\n        ? '0px'\n        : appShell.sidebarWidth;\n\n  const style: React.CSSProperties = {\n    '--appshell-header-height': appShell.headerHeight,\n    '--appshell-sidebar-width': actualSidebarWidth,\n    '--appshell-sidebar-expanded-width': appShell.sidebarWidth,\n    '--appshell-sidebar-collapsed-width': appShell.sidebarCollapsedWidth,\n    '--appshell-aside-width': appShell.asideVisible ? appShell.asideWidth : '0px',\n  } as React.CSSProperties;\n\n  return (\n    <div {...htmlProps} className={classes} style={style} data-layout={layout} data-mobile={isMobile || undefined}>\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * AppShell - Root layout wrapper\n * Automatically wraps children with SidebarProvider\n */\nfunction AppShellRoot({\n  children,\n  layout = 'default',\n  className,\n  ...htmlProps\n}: AppShellProps) {\n  // Extract config from children using useMemo to avoid re-renders\n  const config = React.useMemo(() => extractConfigFromChildren(children), [children]);\n\n  const contextValue: AppShellContextValue = {\n    layout,\n    headerHeight: config.headerHeight,\n    sidebarWidth: config.sidebarWidth,\n    sidebarCollapsedWidth: config.sidebarCollapsedWidth,\n    asideWidth: config.asideWidth,\n    asideVisible: config.asideVisible,\n  };\n\n  return (\n    <AppShellContext.Provider value={contextValue}>\n      <SidebarProvider\n        width={config.sidebarWidth}\n        collapsedWidth={config.sidebarCollapsedWidth}\n        collapsible={config.sidebarCollapsible}\n        defaultCollapsed={config.sidebarDefaultCollapsed}\n      >\n        <AppShellInner className={className} layout={layout} {...htmlProps}>\n          {children}\n        </AppShellInner>\n      </SidebarProvider>\n    </AppShellContext.Provider>\n  );\n}\n\n/**\n * AppShell.Header - Fixed header slot\n */\nfunction AppShellHeader({\n  children,\n  height = '56px',\n  className,\n  style: styleProp,\n  ...htmlProps\n}: AppShellHeaderProps) {\n  const { layout } = useAppShell();\n\n  const classes = [\n    styles.header,\n    (layout === 'sidebar' || layout === 'sidebar-floating') && styles.headerSidebar,\n    layout === 'sidebar-floating' && styles.headerFloating,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const style: React.CSSProperties = {\n    '--header-height': height,\n    ...styleProp,\n  } as React.CSSProperties;\n\n  return (\n    <div {...htmlProps} className={classes} style={style}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * AppShell.Sidebar - Sidebar slot (delegates to Sidebar component)\n */\nfunction AppShellSidebar({\n  children,\n  width = '240px',\n  collapsedWidth = '64px',\n  collapsible = 'icon',\n  position = 'left',\n  defaultCollapsed = false,\n  'aria-label': ariaLabel,\n  className,\n  ...htmlProps\n}: AppShellSidebarProps) {\n  const isMobile = useIsMobile();\n  const { layout } = useAppShell();\n\n  const classes = [\n    styles.sidebar,\n    (layout === 'sidebar' || layout === 'sidebar-floating') && styles.sidebarFullHeight,\n    layout === 'sidebar-floating' && styles.sidebarFloating,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={classes}>\n      <Sidebar\n        width={width}\n        collapsedWidth={collapsedWidth}\n        position={position}\n        collapsible={collapsible}\n        defaultCollapsed={defaultCollapsed}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </Sidebar>\n      {isMobile && <Sidebar.Overlay />}\n    </div>\n  );\n}\n\n/**\n * AppShell.Main - Scrollable main content area\n */\nfunction AppShellMain({\n  children,\n  padding = 'md',\n  className,\n  id = 'main-content',\n  ...htmlProps\n}: AppShellMainProps) {\n  const { layout } = useAppShell();\n\n  const classes = [\n    styles.main,\n    padding !== 'none' && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],\n    layout === 'sidebar-floating' && styles.mainFloating,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <main {...htmlProps} className={classes} id={id}>\n      {children}\n    </main>\n  );\n}\n\n/**\n * AppShell.Aside - Optional right sidebar panel\n */\nfunction AppShellAside({\n  children,\n  width = '280px',\n  visible = true,\n  className,\n  style: styleProp,\n  ...htmlProps\n}: AppShellAsideProps) {\n  if (!visible) {\n    return null;\n  }\n\n  const classes = [styles.aside, className].filter(Boolean).join(' ');\n\n  const style: React.CSSProperties = {\n    '--aside-width': width,\n    ...styleProp,\n  } as React.CSSProperties;\n\n  return (\n    <aside {...htmlProps} className={classes} style={style}>\n      {children}\n    </aside>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const AppShell = Object.assign(AppShellRoot, {\n  Header: AppShellHeader,\n  Sidebar: AppShellSidebar,\n  Main: AppShellMain,\n  Aside: AppShellAside,\n});\n\nexport {\n  AppShellRoot,\n  AppShellHeader,\n  AppShellSidebar,\n  AppShellMain,\n  AppShellAside,\n  useAppShell,\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Avatar/Avatar.module.scss.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const avatar = "_avatar_uw9aa_1";
+const square = "_square_uw9aa_15";
+const xs = "_xs_uw9aa_19";
+const sm = "_sm_uw9aa_25";
+const md = "_md_uw9aa_31";
+const lg = "_lg_uw9aa_37";
+const xl = "_xl_uw9aa_43";
+const image = "_image_uw9aa_49";
+const initials = "_initials_uw9aa_55";
+const fallbackIcon = "_fallbackIcon_uw9aa_62";
+const group = "_group_uw9aa_68";
+const groupItem = "_groupItem_uw9aa_74";
+const overflow = "_overflow_uw9aa_102";
+const styles = {
+  avatar,
+  square,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  image,
+  initials,
+  fallbackIcon,
+  group,
+  groupItem,
+  overflow
+};
+exports.avatar = avatar;
+exports.default = styles;
+exports.fallbackIcon = fallbackIcon;
+exports.group = group;
+exports.groupItem = groupItem;
+exports.image = image;
+exports.initials = initials;
+exports.lg = lg;
+exports.md = md;
+exports.overflow = overflow;
+exports.sm = sm;
+exports.square = square;
+exports.xl = xl;
+exports.xs = xs;
+//# sourceMappingURL=Avatar.module.scss.cjs.map

package/dist/components/Avatar/Avatar.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Avatar/Avatar.module.scss.js

@@ -0,0 +1,45 @@
+const avatar = "_avatar_uw9aa_1";
+const square = "_square_uw9aa_15";
+const xs = "_xs_uw9aa_19";
+const sm = "_sm_uw9aa_25";
+const md = "_md_uw9aa_31";
+const lg = "_lg_uw9aa_37";
+const xl = "_xl_uw9aa_43";
+const image = "_image_uw9aa_49";
+const initials = "_initials_uw9aa_55";
+const fallbackIcon = "_fallbackIcon_uw9aa_62";
+const group = "_group_uw9aa_68";
+const groupItem = "_groupItem_uw9aa_74";
+const overflow = "_overflow_uw9aa_102";
+const styles = {
+  avatar,
+  square,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  image,
+  initials,
+  fallbackIcon,
+  group,
+  groupItem,
+  overflow
+};
+export {
+  avatar,
+  styles as default,
+  fallbackIcon,
+  group,
+  groupItem,
+  image,
+  initials,
+  lg,
+  md,
+  overflow,
+  sm,
+  square,
+  xl,
+  xs
+};
+//# sourceMappingURL=Avatar.module.scss.js.map

package/dist/components/Avatar/Avatar.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Avatar/index.cjs

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Avatar_module = require("./Avatar.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function stringToColor(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash % 360);
+  return `hsl(${hue}, 55%, 40%)`;
+}
+function getContrastTextColor(bgColor) {
+  const match = bgColor.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+  if (!match) return void 0;
+  const h = parseInt(match[1]);
+  const s = parseInt(match[2]) / 100;
+  const l = parseInt(match[3]) / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  r += m;
+  g += m;
+  b += m;
+  const lin = (v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  const lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return lum > 0.179 ? "#000000" : "#ffffff";
+}
+const AvatarBase = React__namespace.forwardRef(
+  function AvatarBase2({
+    src,
+    alt = "",
+    initials,
+    name,
+    size = "md",
+    customSize,
+    shape = "circle",
+    color,
+    imageStyle,
+    className,
+    style: styleProp,
+    ...htmlProps
+  }, ref) {
+    const imgRef = React__namespace.useRef(null);
+    const [imageError, setImageError] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+      setImageError(false);
+      const img = imgRef.current;
+      if (img && img.complete && img.naturalWidth === 0) {
+        setImageError(true);
+      }
+    }, [src]);
+    const showFallback = !src || imageError;
+    const displayInitials = initials || (name ? getInitials(name) : "");
+    const fallbackColor = color || (name ? stringToColor(name) : void 0);
+    const fallbackLabel = alt || name;
+    const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);
+    const avatarClasses = [
+      Avatar_module.default.avatar,
+      Avatar_module.default[size],
+      shape === "square" && Avatar_module.default.square,
+      className
+    ].filter(Boolean).join(" ");
+    const style = { ...styleProp };
+    if (customSize !== void 0) {
+      const resolvedSize = typeof customSize === "number" ? `${customSize}px` : customSize;
+      style.width = resolvedSize;
+      style.height = resolvedSize;
+      if (style.fontSize === void 0) {
+        style.fontSize = `calc(${resolvedSize} * 0.4)`;
+      }
+    }
+    if (showFallback && fallbackColor) {
+      style.backgroundColor = fallbackColor;
+      const textColor = getContrastTextColor(fallbackColor);
+      if (textColor) {
+        style["--avatar-initials-color"] = textColor;
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        ...htmlProps,
+        className: avatarClasses,
+        style,
+        role: hasFallbackLabel ? "img" : void 0,
+        "aria-label": hasFallbackLabel ? fallbackLabel : void 0,
+        "aria-hidden": showFallback && !hasFallbackLabel ? true : void 0,
+        children: [
+          !showFallback && /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              ref: imgRef,
+              src,
+              alt,
+              className: Avatar_module.default.image,
+              onError: () => setImageError(true),
+              style: { ...imageStyle }
+            }
+          ),
+          showFallback && displayInitials && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_module.default.initials, children: displayInitials }),
+          showFallback && !displayInitials && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: Avatar_module.default.fallbackIcon,
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function AvatarGroup({
+  max,
+  size = "md",
+  children,
+  className,
+  ...htmlProps
+}) {
+  const childArray = React__namespace.Children.toArray(children);
+  const displayCount = max && max < childArray.length ? max : childArray.length;
+  const overflowCount = max && childArray.length > max ? childArray.length - max : 0;
+  const groupClasses = [Avatar_module.default.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: groupClasses, children: [
+    childArray.slice(0, displayCount).map((child, index) => {
+      if (React__namespace.isValidElement(child)) {
+        return React__namespace.cloneElement(child, {
+          key: index,
+          size: child.props.size || size,
+          className: [Avatar_module.default.groupItem, child.props.className].filter(Boolean).join(" ")
+        });
+      }
+      return child;
+    }),
+    overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: [Avatar_module.default.avatar, Avatar_module.default[size], Avatar_module.default.overflow].join(" "), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Avatar_module.default.initials, children: [
+      "+",
+      overflowCount
+    ] }) })
+  ] });
+}
+const Avatar = Object.assign(AvatarBase, {
+  Group: AvatarGroup
+});
+exports.Avatar = Avatar;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Avatar.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image */\n  alt?: string;\n  /** Fallback initials (1-2 characters recommended) */\n  initials?: string;\n  /** Full name - used to generate initials if not provided */\n  name?: string;\n  /** Size variant */\n  size?: AvatarSize;\n  /** Custom avatar size (overrides size width/height) */\n  customSize?: number | string;\n  /** Shape variant */\n  shape?: 'circle' | 'square';\n  /** Custom background color for fallback */\n  color?: string;\n  /** Inline style for the underlying image element */\n  imageStyle?: React.CSSProperties;\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Maximum number of avatars to display */\n  max?: number;\n  /** Size for all avatars in the group */\n  size?: AvatarSize;\n  /** Children (Avatar components) */\n  children: React.ReactNode;\n}\n\n// ============================================\n// Helper Functions\n// ============================================\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase();\n  }\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();\n}\n\nfunction stringToColor(str: string): string {\n  // Generate a consistent color from a string\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  const hue = Math.abs(hash % 360);\n  return `hsl(${hue}, 55%, 40%)`;\n}\n\n/**\n * Compute a contrast-safe text color (white or black) for a given HSL background.\n * Uses WCAG relative luminance to pick whichever gives higher contrast.\n */\nfunction getContrastTextColor(bgColor: string): string | undefined {\n  const match = bgColor.match(/hsl\\((\\d+),\\s*(\\d+)%,\\s*(\\d+)%\\)/);\n  if (!match) return undefined;\n\n  const h = parseInt(match[1]);\n  const s = parseInt(match[2]) / 100;\n  const l = parseInt(match[3]) / 100;\n\n  // HSL → RGB\n  const c = (1 - Math.abs(2 * l - 1)) * s;\n  const x = c * (1 - Math.abs((h / 60) % 2 - 1));\n  const m = l - c / 2;\n  let r = 0, g = 0, b = 0;\n  if (h < 60) { r = c; g = x; }\n  else if (h < 120) { r = x; g = c; }\n  else if (h < 180) { g = c; b = x; }\n  else if (h < 240) { g = x; b = c; }\n  else if (h < 300) { r = x; b = c; }\n  else { r = c; b = x; }\n  r += m; g += m; b += m;\n\n  // Relative luminance (sRGB → linear)\n  const lin = (v: number) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n  const lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);\n\n  return lum > 0.179 ? '#000000' : '#ffffff';\n}\n\n// ============================================\n// Avatar Component\n// ============================================\n\nconst AvatarBase = React.forwardRef<HTMLDivElement, AvatarProps>(\n  function AvatarBase(\n    {\n      src,\n      alt = '',\n      initials,\n      name,\n      size = 'md',\n      customSize,\n      shape = 'circle',\n      color,\n      imageStyle,\n      className,\n      style: styleProp,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const imgRef = React.useRef<HTMLImageElement>(null);\n    const [imageError, setImageError] = React.useState(false);\n\n    // Reset error state when src changes; check if already-loaded image failed\n    React.useEffect(() => {\n      setImageError(false);\n      const img = imgRef.current;\n      if (img && img.complete && img.naturalWidth === 0) {\n        setImageError(true);\n      }\n    }, [src]);\n\n    const showFallback = !src || imageError;\n    const displayInitials = initials || (name ? getInitials(name) : '');\n    const fallbackColor = color || (name ? stringToColor(name) : undefined);\n    const fallbackLabel = alt || name;\n    const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);\n\n    const avatarClasses = [\n      styles.avatar,\n      styles[size],\n      shape === 'square' && styles.square,\n      className,\n    ].filter(Boolean).join(' ');\n\n    const style: React.CSSProperties = { ...styleProp };\n    if (customSize !== undefined) {\n      const resolvedSize = typeof customSize === 'number' ? `${customSize}px` : customSize;\n      style.width = resolvedSize;\n      style.height = resolvedSize;\n      if (style.fontSize === undefined) {\n        style.fontSize = `calc(${resolvedSize} * 0.4)`;\n      }\n    }\n\n    if (showFallback && fallbackColor) {\n      style.backgroundColor = fallbackColor;\n      const textColor = getContrastTextColor(fallbackColor);\n      if (textColor) {\n        (style as Record<string, string>)['--avatar-initials-color'] = textColor;\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...htmlProps}\n        className={avatarClasses}\n        style={style}\n        role={hasFallbackLabel ? 'img' : undefined}\n        aria-label={hasFallbackLabel ? fallbackLabel : undefined}\n        aria-hidden={showFallback && !hasFallbackLabel ? true : undefined}\n      >\n        {!showFallback && (\n          <img\n            ref={imgRef}\n            src={src}\n            alt={alt}\n            className={styles.image}\n            onError={() => setImageError(true)}\n            style={{ ...imageStyle }}\n          />\n        )}\n        {showFallback && displayInitials && (\n          <span className={styles.initials}>{displayInitials}</span>\n        )}\n        {showFallback && !displayInitials && (\n          <svg\n            className={styles.fallbackIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n          </svg>\n        )}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Avatar Group Component\n// ============================================\n\nfunction AvatarGroup({\n  max,\n  size = 'md',\n  children,\n  className,\n  ...htmlProps\n}: AvatarGroupProps) {\n  const childArray = React.Children.toArray(children);\n  const displayCount = max && max < childArray.length ? max : childArray.length;\n  const overflowCount = max && childArray.length > max ? childArray.length - max : 0;\n\n  const groupClasses = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={groupClasses}>\n      {childArray.slice(0, displayCount).map((child, index) => {\n        if (React.isValidElement<AvatarProps>(child)) {\n          return React.cloneElement(child, {\n            key: index,\n            size: child.props.size || size,\n            className: [styles.groupItem, child.props.className].filter(Boolean).join(' '),\n          });\n        }\n        return child;\n      })}\n      {overflowCount > 0 && (\n        <div className={[styles.avatar, styles[size], styles.overflow].join(' ')}>\n          <span className={styles.initials}>+{overflowCount}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const Avatar = Object.assign(AvatarBase, {\n  Group: AvatarGroup,\n});\n"],"names":["React","AvatarBase","styles","jsxs","jsx"],"mappings":"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"}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Fallback initials (1-2 characters recommended) */
+    initials?: string;
+    /** Full name - used to generate initials if not provided */
+    name?: string;
+    /** Size variant */
+    size?: AvatarSize;
+    /** Custom avatar size (overrides size width/height) */
+    customSize?: number | string;
+    /** Shape variant */
+    shape?: 'circle' | 'square';
+    /** Custom background color for fallback */
+    color?: string;
+    /** Inline style for the underlying image element */
+    imageStyle?: React.CSSProperties;
+}
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum number of avatars to display */
+    max?: number;
+    /** Size for all avatars in the group */
+    size?: AvatarSize;
+    /** Children (Avatar components) */
+    children: React.ReactNode;
+}
+declare function AvatarGroup({ max, size, children, className, ...htmlProps }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> & {
+    Group: typeof AvatarGroup;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAoKD,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA0BlB;AAMD,eAAO,MAAM,MAAM;;CAEjB,CAAC"}