@fragments-sdk/ui 0.12.0 → 0.14.0

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

@@ -1 +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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"}
+{"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  style: styleProp,\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    ...styleProp,\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/index.cjs

@@ -82,6 +82,7 @@ const AvatarBase = React__namespace.forwardRef(
     shape = "circle",
     color,
     imageStyle,
+    imageProps,
     className,
     style: styleProp,
     ...htmlProps
@@ -137,10 +138,17 @@ const AvatarBase = React__namespace.forwardRef(
             "img",
             {
               ref: imgRef,
+              ...imageProps,
               src,
               alt,
               className: Avatar_module.default.image,
-              onError: () => setImageError(true),
+              onError: (event) => {
+                var _a;
+                (_a = imageProps == null ? void 0 : imageProps.onError) == null ? void 0 : _a.call(imageProps, event);
+                if (!event.defaultPrevented) {
+                  setImageError(true);
+                }
+              },
               style: { ...imageStyle }
             }
           ),

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

@@ -1 +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\n/**\n * Avatar for user photos, initials, or placeholder icons.\n * @see https://usefragments.com/components/avatar\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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"}
+{"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\n/**\n * Avatar for user photos, initials, or placeholder icons.\n * @see https://usefragments.com/components/avatar\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  /** Additional props for the underlying img element */\n  imageProps?: Omit<\n    React.ImgHTMLAttributes<HTMLImageElement>,\n    'src' | 'alt' | 'className' | 'style'\n  >;\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      imageProps,\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            {...imageProps}\n            src={src}\n            alt={alt}\n            className={styles.image}\n            onError={(event) => {\n              imageProps?.onError?.(event);\n              if (!event.defaultPrevented) {\n                setImageError(true);\n              }\n            }}\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

@@ -23,6 +23,8 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     color?: string;
     /** Inline style for the underlying image element */
     imageStyle?: React.CSSProperties;
+    /** Additional props for the underlying img element */
+    imageProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className' | 'style'>;
 }
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Maximum number of avatars to display */

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

@@ -1 +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;;;GAGG;AACH,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"}
+{"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;;;GAGG;AACH,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;IACjC,sDAAsD;IACtD,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACzC,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,OAAO,CACtC,CAAC;CACH;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;AA2KD,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA0BlB;AAMD,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Avatar/index.js

@@ -63,6 +63,7 @@ const AvatarBase = React.forwardRef(
     shape = "circle",
     color,
     imageStyle,
+    imageProps,
     className,
     style: styleProp,
     ...htmlProps
@@ -118,10 +119,17 @@ const AvatarBase = React.forwardRef(
             "img",
             {
               ref: imgRef,
+              ...imageProps,
               src,
               alt,
               className: styles.image,
-              onError: () => setImageError(true),
+              onError: (event) => {
+                var _a;
+                (_a = imageProps == null ? void 0 : imageProps.onError) == null ? void 0 : _a.call(imageProps, event);
+                if (!event.defaultPrevented) {
+                  setImageError(true);
+                }
+              },
               style: { ...imageStyle }
             }
           ),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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\n/**\n * Avatar for user photos, initials, or placeholder icons.\n * @see https://usefragments.com/components/avatar\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":["AvatarBase"],"mappings":"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"}
+{"version":3,"file":"index.js","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\n/**\n * Avatar for user photos, initials, or placeholder icons.\n * @see https://usefragments.com/components/avatar\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  /** Additional props for the underlying img element */\n  imageProps?: Omit<\n    React.ImgHTMLAttributes<HTMLImageElement>,\n    'src' | 'alt' | 'className' | 'style'\n  >;\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      imageProps,\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            {...imageProps}\n            src={src}\n            alt={alt}\n            className={styles.image}\n            onError={(event) => {\n              imageProps?.onError?.(event);\n              if (!event.defaultPrevented) {\n                setImageError(true);\n              }\n            }}\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":["AvatarBase"],"mappings":"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"}

package/dist/components/Badge/index.cjs

@@ -29,19 +29,21 @@ const BadgeRoot = React__namespace.forwardRef(
     dot = false,
     icon,
     onRemove,
+    announce = false,
     className,
     "aria-label": ariaLabel,
+    role,
     ...htmlProps
   }, ref) {
     const classes = [Badge_module.default.badge, Badge_module.default[size], Badge_module.default[variant], className].filter(Boolean).join(" ");
-    const effectiveAriaLabel = ariaLabel || (variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+    const effectiveAriaLabel = ariaLabel || (announce && variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         ref,
         ...htmlProps,
         className: classes,
-        role: effectiveAriaLabel ? "status" : void 0,
+        role: role ?? (announce ? "status" : void 0),
         "aria-label": effectiveAriaLabel,
         children: [
           dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.dot, "aria-hidden": "true" }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Badge.module.scss';\n\n/**\n * Badge for status indicators, labels, and counts.\n * @see https://usefragments.com/components/badge\n */\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  /** Visual style variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/badge#variants */\n  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';\n  /** Badge size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show a status dot before the label */\n  dot?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Makes the badge removable. Called when dismiss button is clicked. */\n  onRemove?: () => void;\n}\n\nconst BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      children,\n      variant = 'default',\n      size = 'md',\n      dot = false,\n      icon,\n      onRemove,\n      className,\n      'aria-label': ariaLabel,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [styles.badge, styles[size], styles[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    // For status badges, include the status in the aria-label if not provided\n    const effectiveAriaLabel = ariaLabel || (\n      variant !== 'default' && variant !== 'outline'\n        ? `${variant}: ${typeof children === 'string' ? children : ''}`\n        : undefined\n    );\n\n    return (\n      <span\n        ref={ref}\n        {...htmlProps}\n        className={classes}\n        role={effectiveAriaLabel ? 'status' : undefined}\n        aria-label={effectiveAriaLabel}\n      >\n        {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n        {onRemove && (\n          <BaseButton\n            onClick={onRemove}\n            aria-label={`Remove ${typeof children === 'string' ? children : 'badge'}`}\n            className={styles.remove}\n          >\n            &times;\n          </BaseButton>\n        )}\n      </span>\n    );\n  }\n);\n\nexport const Badge = Object.assign(BadgeRoot, {\n  Root: BadgeRoot,\n});\n"],"names":["React","Badge","styles","jsxs","jsx","BaseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,YAAYA,iBAAM;AAAA,EACtB,SAASC,OACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU,CAACC,aAAAA,QAAO,OAAOA,aAAAA,QAAO,IAAI,GAAGA,aAAAA,QAAO,OAAO,GAAG,SAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,qBAAqB,cACzB,YAAY,aAAa,YAAY,YACjC,GAAG,OAAO,KAAK,OAAO,aAAa,WAAW,WAAW,EAAE,KAC3D;AAGN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,MAAM,qBAAqB,WAAW;AAAA,QACtC,cAAY;AAAA,QAEX,UAAA;AAAA,UAAA,sCAAQ,QAAA,EAAK,WAAWD,aAAAA,QAAO,KAAK,eAAY,QAAO;AAAA,UACvD,uCACE,QAAA,EAAK,WAAWA,aAAAA,QAAO,MAAM,eAAY,QACvC,UAAA,KAAA,CACH;AAAA,UAEFE,+BAAC,UAAM,UAAS;AAAA,UACf,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAY,UAAU,OAAO,aAAa,WAAW,WAAW,OAAO;AAAA,cACvE,WAAWH,aAAAA,QAAO;AAAA,cACnB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Badge.module.scss';\n\n/**\n * Badge for status indicators, labels, and counts.\n * @see https://usefragments.com/components/badge\n */\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  /** Visual style variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/badge#variants */\n  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';\n  /** Badge size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show a status dot before the label */\n  dot?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Makes the badge removable. Called when dismiss button is clicked. */\n  onRemove?: () => void;\n  /** Announce badge content as status to assistive tech (opt-in).\n   * @default false */\n  announce?: boolean;\n}\n\nconst BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      children,\n      variant = 'default',\n      size = 'md',\n      dot = false,\n      icon,\n      onRemove,\n      announce = false,\n      className,\n      'aria-label': ariaLabel,\n      role,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [styles.badge, styles[size], styles[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    // For status badges, include the status in the aria-label if not provided\n    const effectiveAriaLabel = ariaLabel || (\n      announce && variant !== 'default' && variant !== 'outline'\n        ? `${variant}: ${typeof children === 'string' ? children : ''}`\n        : undefined\n    );\n\n    return (\n      <span\n        ref={ref}\n        {...htmlProps}\n        className={classes}\n        role={role ?? (announce ? 'status' : undefined)}\n        aria-label={effectiveAriaLabel}\n      >\n        {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n        {onRemove && (\n          <BaseButton\n            onClick={onRemove}\n            aria-label={`Remove ${typeof children === 'string' ? children : 'badge'}`}\n            className={styles.remove}\n          >\n            &times;\n          </BaseButton>\n        )}\n      </span>\n    );\n  }\n);\n\nexport const Badge = Object.assign(BadgeRoot, {\n  Root: BadgeRoot,\n});\n"],"names":["React","Badge","styles","jsxs","jsx","BaseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,YAAYA,iBAAM;AAAA,EACtB,SAASC,OACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU,CAACC,aAAAA,QAAO,OAAOA,aAAAA,QAAO,IAAI,GAAGA,aAAAA,QAAO,OAAO,GAAG,SAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,qBAAqB,cACzB,YAAY,YAAY,aAAa,YAAY,YAC7C,GAAG,OAAO,KAAK,OAAO,aAAa,WAAW,WAAW,EAAE,KAC3D;AAGN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,MAAM,SAAS,WAAW,WAAW;AAAA,QACrC,cAAY;AAAA,QAEX,UAAA;AAAA,UAAA,sCAAQ,QAAA,EAAK,WAAWD,aAAAA,QAAO,KAAK,eAAY,QAAO;AAAA,UACvD,uCACE,QAAA,EAAK,WAAWA,aAAAA,QAAO,MAAM,eAAY,QACvC,UAAA,KAAA,CACH;AAAA,UAEFE,+BAAC,UAAM,UAAS;AAAA,UACf,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAY,UAAU,OAAO,aAAa,WAAW,WAAW,OAAO;AAAA,cACvE,WAAWH,aAAAA,QAAO;AAAA,cACnB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;;"}

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

@@ -18,6 +18,9 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     icon?: React.ReactNode;
     /** Makes the badge removable. Called when dismiss button is clicked. */
     onRemove?: () => void;
+    /** Announce badge content as status to assistive tech (opt-in).
+     * @default false */
+    announce?: boolean;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>> & {
     Root: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;iEAE6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3E;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAyDD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;iEAE6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3E;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;wBACoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2DD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Badge/index.js

@@ -10,19 +10,21 @@ const BadgeRoot = React.forwardRef(
     dot = false,
     icon,
     onRemove,
+    announce = false,
     className,
     "aria-label": ariaLabel,
+    role,
     ...htmlProps
   }, ref) {
     const classes = [styles.badge, styles[size], styles[variant], className].filter(Boolean).join(" ");
-    const effectiveAriaLabel = ariaLabel || (variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+    const effectiveAriaLabel = ariaLabel || (announce && variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         ...htmlProps,
         className: classes,
-        role: effectiveAriaLabel ? "status" : void 0,
+        role: role ?? (announce ? "status" : void 0),
         "aria-label": effectiveAriaLabel,
         children: [
           dot && /* @__PURE__ */ jsx("span", { className: styles.dot, "aria-hidden": "true" }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Badge.module.scss';\n\n/**\n * Badge for status indicators, labels, and counts.\n * @see https://usefragments.com/components/badge\n */\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  /** Visual style variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/badge#variants */\n  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';\n  /** Badge size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show a status dot before the label */\n  dot?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Makes the badge removable. Called when dismiss button is clicked. */\n  onRemove?: () => void;\n}\n\nconst BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      children,\n      variant = 'default',\n      size = 'md',\n      dot = false,\n      icon,\n      onRemove,\n      className,\n      'aria-label': ariaLabel,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [styles.badge, styles[size], styles[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    // For status badges, include the status in the aria-label if not provided\n    const effectiveAriaLabel = ariaLabel || (\n      variant !== 'default' && variant !== 'outline'\n        ? `${variant}: ${typeof children === 'string' ? children : ''}`\n        : undefined\n    );\n\n    return (\n      <span\n        ref={ref}\n        {...htmlProps}\n        className={classes}\n        role={effectiveAriaLabel ? 'status' : undefined}\n        aria-label={effectiveAriaLabel}\n      >\n        {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n        {onRemove && (\n          <BaseButton\n            onClick={onRemove}\n            aria-label={`Remove ${typeof children === 'string' ? children : 'badge'}`}\n            className={styles.remove}\n          >\n            &times;\n          </BaseButton>\n        )}\n      </span>\n    );\n  }\n);\n\nexport const Badge = Object.assign(BadgeRoot, {\n  Root: BadgeRoot,\n});\n"],"names":["Badge","BaseButton"],"mappings":";;;;AA2BA,MAAM,YAAY,MAAM;AAAA,EACtB,SAASA,OACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU,CAAC,OAAO,OAAO,OAAO,IAAI,GAAG,OAAO,OAAO,GAAG,SAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,qBAAqB,cACzB,YAAY,aAAa,YAAY,YACjC,GAAG,OAAO,KAAK,OAAO,aAAa,WAAW,WAAW,EAAE,KAC3D;AAGN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,MAAM,qBAAqB,WAAW;AAAA,QACtC,cAAY;AAAA,QAEX,UAAA;AAAA,UAAA,2BAAQ,QAAA,EAAK,WAAW,OAAO,KAAK,eAAY,QAAO;AAAA,UACvD,4BACE,QAAA,EAAK,WAAW,OAAO,MAAM,eAAY,QACvC,UAAA,KAAA,CACH;AAAA,UAEF,oBAAC,UAAM,UAAS;AAAA,UACf,YACC;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAY,UAAU,OAAO,aAAa,WAAW,WAAW,OAAO;AAAA,cACvE,WAAW,OAAO;AAAA,cACnB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Badge.module.scss';\n\n/**\n * Badge for status indicators, labels, and counts.\n * @see https://usefragments.com/components/badge\n */\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  /** Visual style variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/badge#variants */\n  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';\n  /** Badge size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show a status dot before the label */\n  dot?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Makes the badge removable. Called when dismiss button is clicked. */\n  onRemove?: () => void;\n  /** Announce badge content as status to assistive tech (opt-in).\n   * @default false */\n  announce?: boolean;\n}\n\nconst BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      children,\n      variant = 'default',\n      size = 'md',\n      dot = false,\n      icon,\n      onRemove,\n      announce = false,\n      className,\n      'aria-label': ariaLabel,\n      role,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [styles.badge, styles[size], styles[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    // For status badges, include the status in the aria-label if not provided\n    const effectiveAriaLabel = ariaLabel || (\n      announce && variant !== 'default' && variant !== 'outline'\n        ? `${variant}: ${typeof children === 'string' ? children : ''}`\n        : undefined\n    );\n\n    return (\n      <span\n        ref={ref}\n        {...htmlProps}\n        className={classes}\n        role={role ?? (announce ? 'status' : undefined)}\n        aria-label={effectiveAriaLabel}\n      >\n        {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n        {onRemove && (\n          <BaseButton\n            onClick={onRemove}\n            aria-label={`Remove ${typeof children === 'string' ? children : 'badge'}`}\n            className={styles.remove}\n          >\n            &times;\n          </BaseButton>\n        )}\n      </span>\n    );\n  }\n);\n\nexport const Badge = Object.assign(BadgeRoot, {\n  Root: BadgeRoot,\n});\n"],"names":["Badge","BaseButton"],"mappings":";;;;AA8BA,MAAM,YAAY,MAAM;AAAA,EACtB,SAASA,OACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU,CAAC,OAAO,OAAO,OAAO,IAAI,GAAG,OAAO,OAAO,GAAG,SAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,qBAAqB,cACzB,YAAY,YAAY,aAAa,YAAY,YAC7C,GAAG,OAAO,KAAK,OAAO,aAAa,WAAW,WAAW,EAAE,KAC3D;AAGN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,MAAM,SAAS,WAAW,WAAW;AAAA,QACrC,cAAY;AAAA,QAEX,UAAA;AAAA,UAAA,2BAAQ,QAAA,EAAK,WAAW,OAAO,KAAK,eAAY,QAAO;AAAA,UACvD,4BACE,QAAA,EAAK,WAAW,OAAO,MAAM,eAAY,QACvC,UAAA,KAAA,CACH;AAAA,UAEF,oBAAC,UAAM,UAAS;AAAA,UACf,YACC;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAY,UAAU,OAAO,aAAa,WAAW,WAAW,OAAO;AAAA,cACvE,WAAW,OAAO;AAAA,cACnB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;"}

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

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const grid = "_grid_5fm9r_1";
-const columns2 = "_columns2_5fm9r_7";
-const columns3 = "_columns3_5fm9r_11";
-const columns4 = "_columns4_5fm9r_15";
-const gapNone = "_gapNone_5fm9r_32";
-const gapXs = "_gapXs_5fm9r_36";
-const gapSm = "_gapSm_5fm9r_40";
-const gapMd = "_gapMd_5fm9r_44";
-const gapLg = "_gapLg_5fm9r_48";
-const gapXl = "_gapXl_5fm9r_52";
-const item = "_item_5fm9r_56";
+const grid = "_grid_svc6l_1";
+const columns2 = "_columns2_svc6l_7";
+const columns3 = "_columns3_svc6l_11";
+const columns4 = "_columns4_svc6l_15";
+const gapNone = "_gapNone_svc6l_32";
+const gapXs = "_gapXs_svc6l_36";
+const gapSm = "_gapSm_svc6l_40";
+const gapMd = "_gapMd_svc6l_44";
+const gapLg = "_gapLg_svc6l_48";
+const gapXl = "_gapXl_svc6l_52";
+const item = "_item_svc6l_56";
 const styles = {
   grid,
   columns2,

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

@@ -1,14 +1,14 @@
-const grid = "_grid_5fm9r_1";
-const columns2 = "_columns2_5fm9r_7";
-const columns3 = "_columns3_5fm9r_11";
-const columns4 = "_columns4_5fm9r_15";
-const gapNone = "_gapNone_5fm9r_32";
-const gapXs = "_gapXs_5fm9r_36";
-const gapSm = "_gapSm_5fm9r_40";
-const gapMd = "_gapMd_5fm9r_44";
-const gapLg = "_gapLg_5fm9r_48";
-const gapXl = "_gapXl_5fm9r_52";
-const item = "_item_5fm9r_56";
+const grid = "_grid_svc6l_1";
+const columns2 = "_columns2_svc6l_7";
+const columns3 = "_columns3_svc6l_11";
+const columns4 = "_columns4_svc6l_15";
+const gapNone = "_gapNone_svc6l_32";
+const gapXs = "_gapXs_svc6l_36";
+const gapSm = "_gapSm_svc6l_40";
+const gapMd = "_gapMd_svc6l_44";
+const gapLg = "_gapLg_svc6l_48";
+const gapXl = "_gapXl_svc6l_52";
+const item = "_item_svc6l_56";
 const styles = {
   grid,
   columns2,

package/dist/components/BentoGrid/index.cjs

@@ -45,7 +45,8 @@ const BentoGrid = React__namespace.forwardRef(
     columns = 3,
     gap = "md",
     className,
-    style
+    style,
+    ...htmlProps
   }, ref) {
     const classes = [
       BentoGrid_module.default.grid,
@@ -53,7 +54,7 @@ const BentoGrid = React__namespace.forwardRef(
       gapClasses[gap],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, style, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, style, children });
   }
 );
 const BentoGridItem = React__namespace.forwardRef(
@@ -61,16 +62,18 @@ const BentoGridItem = React__namespace.forwardRef(
     children,
     colSpan,
     rowSpan,
-    className
+    className,
+    style,
+    ...htmlProps
   }, ref) {
     const spanVars = {
       ...getSpanVars(colSpan, "bento-col-span"),
       ...getSpanVars(rowSpan, "bento-row-span")
     };
     const hasVars = Object.keys(spanVars).length > 0;
-    const inlineStyle = hasVars ? spanVars : void 0;
+    const inlineStyle = hasVars ? { ...spanVars, ...style } : style;
     const classes = [BentoGrid_module.default.item, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, style: inlineStyle, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, style: inlineStyle, children });
   }
 );
 BentoGrid.Item = BentoGridItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/BentoGrid/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './BentoGrid.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\ntype SpanValue = 1 | 2 | 3;\n\nexport interface ResponsiveSpan {\n  /** Default (mobile-first) */\n  base?: SpanValue;\n  /** ≥640px */\n  sm?: SpanValue;\n  /** ≥768px */\n  md?: SpanValue;\n  /** ≥1024px */\n  lg?: SpanValue;\n  /** ≥1280px */\n  xl?: SpanValue;\n}\n\nexport interface BentoGridProps {\n  children?: React.ReactNode;\n  /** Number of columns (default: 3) — auto-collapses responsively */\n  columns?: 2 | 3 | 4;\n  /** Gap between grid items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nexport interface BentoGridItemProps {\n  children?: React.ReactNode;\n  /** Columns to span — number for all breakpoints, object for per-breakpoint */\n  colSpan?: SpanValue | ResponsiveSpan;\n  /** Rows to span — number for all breakpoints, object for per-breakpoint */\n  rowSpan?: SpanValue | ResponsiveSpan;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Helpers\n// ============================================\n\nconst gapClasses: Record<NonNullable<BentoGridProps['gap']>, string> = {\n  none: styles.gapNone,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n};\n\nfunction getSpanVars(\n  span: SpanValue | ResponsiveSpan | undefined,\n  prefix: string\n): Record<string, number> {\n  if (!span || span === 1) return {};\n  if (typeof span === 'number') return { [`--${prefix}`]: span };\n  const vars: Record<string, number> = {};\n  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;\n  if (span.sm) vars[`--${prefix}-sm`] = span.sm;\n  if (span.md) vars[`--${prefix}-md`] = span.md;\n  if (span.lg) vars[`--${prefix}-lg`] = span.lg;\n  if (span.xl) vars[`--${prefix}-xl`] = span.xl;\n  return vars;\n}\n\n// ============================================\n// BentoGrid Component\n// ============================================\n\nexport const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(\n  function BentoGrid(\n    {\n      children,\n      columns = 3,\n      gap = 'md',\n      className,\n      style,\n    },\n    ref\n  ) {\n    const classes = [\n      styles.grid,\n      styles[`columns${columns}`],\n      gapClasses[gap],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div ref={ref} className={classes} style={style}>\n        {children}\n      </div>\n    );\n  }\n) as BentoGridComponent;\n\n// ============================================\n// BentoGrid.Item Sub-component\n// ============================================\n\nconst BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(\n  function BentoGridItem(\n    {\n      children,\n      colSpan,\n      rowSpan,\n      className,\n    },\n    ref\n  ) {\n    const spanVars = {\n      ...getSpanVars(colSpan, 'bento-col-span'),\n      ...getSpanVars(rowSpan, 'bento-row-span'),\n    };\n\n    const hasVars = Object.keys(spanVars).length > 0;\n    const inlineStyle = hasVars\n      ? (spanVars as unknown as React.CSSProperties)\n      : undefined;\n\n    const classes = [styles.item, className].filter(Boolean).join(' ');\n\n    return (\n      <div ref={ref} className={classes} style={inlineStyle}>\n        {children}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Compound component type\n// ============================================\n\ninterface BentoGridComponent\n  extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {\n  Item: typeof BentoGridItem;\n}\n\n(BentoGrid as BentoGridComponent).Item = BentoGridItem;\n"],"names":["styles","React","BentoGrid","BentoGridItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,aAAiE;AAAA,EACrE,MAAMA,iBAAAA,QAAO;AAAA,EACb,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AACb;AAEA,SAAS,YACP,MACA,QACwB;AACxB,MAAI,CAAC,QAAQ,SAAS,UAAU,CAAA;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO,EAAE,CAAC,KAAK,MAAM,EAAE,GAAG,KAAA;AACxD,QAAM,OAA+B,CAAA;AACrC,MAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,KAAK;AAC3D,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,SAAO;AACT;AAMO,MAAM,YAAYC,iBAAM;AAAA,EAC7B,SAASC,WACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,UAAU;AAAA,MACdF,iBAAAA,QAAO;AAAA,MACPA,iBAAAA,QAAO,UAAU,OAAO,EAAE;AAAA,MAC1B,WAAW,GAAG;AAAA,MACd;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,0CACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAChC,UACH;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgBC,iBAAM;AAAA,EAC1B,SAASE,eACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,WAAW;AAAA,MACf,GAAG,YAAY,SAAS,gBAAgB;AAAA,MACxC,GAAG,YAAY,SAAS,gBAAgB;AAAA,IAAA;AAG1C,UAAM,UAAU,OAAO,KAAK,QAAQ,EAAE,SAAS;AAC/C,UAAM,cAAc,UACf,WACD;AAEJ,UAAM,UAAU,CAACH,iBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,0CACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAAO,aACvC,UACH;AAAA,EAEJ;AACF;AAWC,UAAiC,OAAO;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/BentoGrid/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './BentoGrid.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\ntype SpanValue = 1 | 2 | 3;\n\nexport interface ResponsiveSpan {\n  /** Default (mobile-first) */\n  base?: SpanValue;\n  /** ≥640px */\n  sm?: SpanValue;\n  /** ≥768px */\n  md?: SpanValue;\n  /** ≥1024px */\n  lg?: SpanValue;\n  /** ≥1280px */\n  xl?: SpanValue;\n}\n\nexport interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Number of columns (default: 3) — auto-collapses responsively */\n  columns?: 2 | 3 | 4;\n  /** Gap between grid items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport interface BentoGridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  /** Columns to span — number for all breakpoints, object for per-breakpoint */\n  colSpan?: SpanValue | ResponsiveSpan;\n  /** Rows to span — number for all breakpoints, object for per-breakpoint */\n  rowSpan?: SpanValue | ResponsiveSpan;\n}\n\n// ============================================\n// Helpers\n// ============================================\n\nconst gapClasses: Record<NonNullable<BentoGridProps['gap']>, string> = {\n  none: styles.gapNone,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n};\n\nfunction getSpanVars(\n  span: SpanValue | ResponsiveSpan | undefined,\n  prefix: string\n): Record<string, number> {\n  if (!span || span === 1) return {};\n  if (typeof span === 'number') return { [`--${prefix}`]: span };\n  const vars: Record<string, number> = {};\n  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;\n  if (span.sm) vars[`--${prefix}-sm`] = span.sm;\n  if (span.md) vars[`--${prefix}-md`] = span.md;\n  if (span.lg) vars[`--${prefix}-lg`] = span.lg;\n  if (span.xl) vars[`--${prefix}-xl`] = span.xl;\n  return vars;\n}\n\n// ============================================\n// BentoGrid Component\n// ============================================\n\nexport const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(\n  function BentoGrid(\n    {\n      children,\n      columns = 3,\n      gap = 'md',\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [\n      styles.grid,\n      styles[`columns${columns}`],\n      gapClasses[gap],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div ref={ref} {...htmlProps} className={classes} style={style}>\n        {children}\n      </div>\n    );\n  }\n) as BentoGridComponent;\n\n// ============================================\n// BentoGrid.Item Sub-component\n// ============================================\n\nconst BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(\n  function BentoGridItem(\n    {\n      children,\n      colSpan,\n      rowSpan,\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const spanVars = {\n      ...getSpanVars(colSpan, 'bento-col-span'),\n      ...getSpanVars(rowSpan, 'bento-row-span'),\n    };\n\n    const hasVars = Object.keys(spanVars).length > 0;\n    const inlineStyle = hasVars\n      ? ({ ...(spanVars as unknown as React.CSSProperties), ...style } as React.CSSProperties)\n      : style;\n\n    const classes = [styles.item, className].filter(Boolean).join(' ');\n\n    return (\n      <div ref={ref} {...htmlProps} className={classes} style={inlineStyle}>\n        {children}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Compound component type\n// ============================================\n\ninterface BentoGridComponent\n  extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {\n  Item: typeof BentoGridItem;\n}\n\n(BentoGrid as BentoGridComponent).Item = BentoGridItem;\n"],"names":["styles","React","BentoGrid","jsx","BentoGridItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,aAAiE;AAAA,EACrE,MAAMA,iBAAAA,QAAO;AAAA,EACb,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AACb;AAEA,SAAS,YACP,MACA,QACwB;AACxB,MAAI,CAAC,QAAQ,SAAS,UAAU,CAAA;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO,EAAE,CAAC,KAAK,MAAM,EAAE,GAAG,KAAA;AACxD,QAAM,OAA+B,CAAA;AACrC,MAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,KAAK;AAC3D,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,SAAO;AACT;AAMO,MAAM,YAAYC,iBAAM;AAAA,EAC7B,SAASC,WACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU;AAAA,MACdF,iBAAAA,QAAO;AAAA,MACPA,iBAAAA,QAAO,UAAU,OAAO,EAAE;AAAA,MAC1B,WAAW,GAAG;AAAA,MACd;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACEG,2BAAAA,IAAC,SAAI,KAAW,GAAG,WAAW,WAAW,SAAS,OAC/C,UACH;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgBF,iBAAM;AAAA,EAC1B,SAASG,eACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,WAAW;AAAA,MACf,GAAG,YAAY,SAAS,gBAAgB;AAAA,MACxC,GAAG,YAAY,SAAS,gBAAgB;AAAA,IAAA;AAG1C,UAAM,UAAU,OAAO,KAAK,QAAQ,EAAE,SAAS;AAC/C,UAAM,cAAc,UACf,EAAE,GAAI,UAA6C,GAAG,UACvD;AAEJ,UAAM,UAAU,CAACJ,iBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,WACEG,+BAAC,SAAI,KAAW,GAAG,WAAW,WAAW,SAAS,OAAO,aACtD,SAAA,CACH;AAAA,EAEJ;AACF;AAWC,UAAiC,OAAO;;"}

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

@@ -12,25 +12,19 @@ export interface ResponsiveSpan {
     /** ≥1280px */
     xl?: SpanValue;
 }
-export interface BentoGridProps {
+export interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /** Number of columns (default: 3) — auto-collapses responsively */
     columns?: 2 | 3 | 4;
     /** Gap between grid items */
     gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Additional class name */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
 }
-export interface BentoGridItemProps {
+export interface BentoGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /** Columns to span — number for all breakpoints, object for per-breakpoint */
     colSpan?: SpanValue | ResponsiveSpan;
     /** Rows to span — number for all breakpoints, object for per-breakpoint */
     rowSpan?: SpanValue | ResponsiveSpan;
-    /** Additional class name */
-    className?: string;
 }
 export declare const BentoGrid: BentoGridComponent;
 declare const BentoGridItem: React.ForwardRefExoticComponent<BentoGridItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BentoGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD,eAAO,MAAM,SAAS,EA0BjB,kBAAkB,CAAC;AAMxB,QAAA,MAAM,aAAa,2FA4BlB,CAAC;AAMF,UAAU,kBACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7F,IAAI,EAAE,OAAO,aAAa,CAAC;CAC5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BentoGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;CACtC;AAkCD,eAAO,MAAM,SAAS,EA2BjB,kBAAkB,CAAC;AAMxB,QAAA,MAAM,aAAa,2FA8BlB,CAAC;AAMF,UAAU,kBACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7F,IAAI,EAAE,OAAO,aAAa,CAAC;CAC5B"}