xyne-components 0.1.0 → 0.1.2

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/ListItem/ListItem.tsx","../src/Badge/Badge.tsx","../src/Label/Label.tsx","../src/Directory/Directory.tsx","../src/theme/defaultTheme.ts","../src/theme/createTheme.ts","../src/theme/ThemeProvider.tsx","../src/theme/ThemeContext.ts","../src/theme/ColorSchemeProvider.tsx","../src/theme/ColorSchemeContext.ts","../src/theme/useTheme.ts","../src/theme/useColorScheme.ts"],"sourcesContent":["export { ListItem } from './ListItem'\nexport type { ListItemProps } from './ListItem'\n\nexport { Badge } from './Badge'\nexport type { BadgeProps, BadgeVariant } from './Badge'\n\nexport { Label } from './Label'\nexport type { LabelProps, LabelVariant } from './Label'\n\nexport { Directory } from './Directory'\nexport type { DirectoryProps, DirectoryVariant } from './Directory'\n\nexport { ThemeProvider, createTheme, useTheme, DEFAULT_THEME, ColorSchemeProvider, useColorScheme } from './theme'\nexport type {\n  XyneTheme,\n  XyneThemeOverride,\n  XyneComponentTheme,\n  ThemeProviderProps,\n  ColorSchemeProviderProps,\n  ColorScheme,\n  ResolvedColorScheme,\n  ColorSchemeContextValue,\n} from './theme'\n","import React from 'react'\n\nexport interface ListItemProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** Primary label text */\n  label: string\n  /** Optional secondary line below the label */\n  subtext?: string\n  /** Item is visually selected */\n  selected?: boolean\n  /** Item is active (keyboard-highlighted / current) */\n  active?: boolean\n  /** Show the left vertical bar indicator @default true */\n  showBar?: boolean\n  /** 16×16 slot before the label */\n  leading?: React.ReactNode\n  /** 16×16 slot after the label */\n  trailing?: React.ReactNode\n}\n\nexport const ListItem = React.forwardRef<HTMLButtonElement, ListItemProps>(\n  (\n    {\n      label,\n      subtext,\n      selected,\n      active,\n      showBar = true,\n      leading,\n      trailing,\n      disabled,\n      className,\n      ...rest\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      {...rest}\n      className={`xc-list-item${className ? ` ${className}` : ''}`}\n      disabled={disabled}\n      // data attributes drive CSS state — no class modifiers\n      data-selected={selected || undefined}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n    >\n      {showBar && <span className=\"xc-list-item__bar\" aria-hidden=\"true\" />}\n\n      {leading != null && (\n        <span className=\"xc-list-item__leading\" aria-hidden=\"true\">\n          {leading}\n        </span>\n      )}\n\n      <span className=\"xc-list-item__text\">\n        <span className=\"xc-list-item__label\">{label}</span>\n        {subtext != null && (\n          <span className=\"xc-list-item__subtext\">{subtext}</span>\n        )}\n      </span>\n\n      {trailing != null && (\n        <span className=\"xc-list-item__trailing\" aria-hidden=\"true\">\n          {trailing}\n        </span>\n      )}\n    </button>\n  ),\n)\n\nListItem.displayName = 'ListItem'\n","import React from 'react'\n\nexport type BadgeVariant = 'badge' | 'dot'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual variant: \"badge\" (pill with count/text) or \"dot\" (tiny status indicator) @default 'badge' */\n  variant?: BadgeVariant\n  /** 12×12 icon slot, shown before the text (only for type=\"badge\") */\n  icon?: React.ReactNode\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ children, variant = 'badge', icon, className, style, ...rest }, ref) => (\n    <span\n      ref={ref}\n      {...rest}\n      className={`xc-badge${className ? ` ${className}` : ''}`}\n      data-variant={variant}\n      style={style}\n    >\n      {variant === 'badge' && icon != null && (\n        <span className=\"xc-badge__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      {variant === 'badge' && children}\n    </span>\n  ),\n)\n\nBadge.displayName = 'Badge'\n","import React from 'react'\n\nexport type LabelVariant = 'opened' | 'closed'\n\nexport interface LabelProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> {\n  children: React.ReactNode\n  /** Visual variant: \"opened\" (primary text) or \"closed\" (secondary text) @default 'closed' */\n  variant?: LabelVariant\n  /** 16×16 slot before the label text */\n  leading?: React.ReactNode\n  /** 16×16 slot after the label text */\n  trailing?: React.ReactNode\n}\n\nexport const Label = React.forwardRef<HTMLButtonElement, LabelProps>(\n  ({ children, variant = 'closed', leading, trailing, className, ...rest }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      {...rest}\n      className={`xc-label${className ? ` ${className}` : ''}`}\n      data-variant={variant}\n    >\n      {leading != null && (\n        <span className=\"xc-label__leading\" aria-hidden=\"true\">\n          {leading}\n        </span>\n      )}\n\n      <span className=\"xc-label__text\">\n        <span className=\"xc-label__content\">{children}</span>\n      </span>\n\n      {trailing != null && (\n        <span className=\"xc-label__trailing\" aria-hidden=\"true\">\n          {trailing}\n        </span>\n      )}\n    </button>\n  ),\n)\n\nLabel.displayName = 'Label'\n","import React from 'react'\n\nexport type DirectoryVariant = 'opened' | 'closed'\n\nexport interface DirectoryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text shown in the header row */\n  label: string\n  /** Visual variant: \"opened\" (children visible) or \"closed\" (collapsed) @default 'closed' */\n  variant?: DirectoryVariant\n  /** 16×16 slot before the label (folder icon) */\n  leading?: React.ReactNode\n  /** 16×16 slot after the label (chevron icon) */\n  trailing?: React.ReactNode\n  /** Called when the header row is clicked */\n  onHeaderClick?: React.MouseEventHandler<HTMLButtonElement>\n  /** Children rendered below the header when opened (typically ListItem components) */\n  children?: React.ReactNode\n}\n\nexport const Directory = React.forwardRef<HTMLDivElement, DirectoryProps>(\n  (\n    {\n      label,\n      variant = 'closed',\n      leading,\n      trailing,\n      onHeaderClick,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      {...rest}\n      className={`xc-directory${className ? ` ${className}` : ''}`}\n      data-variant={variant}\n    >\n      <button\n        type=\"button\"\n        className=\"xc-directory__header\"\n        onClick={onHeaderClick}\n      >\n        {leading != null && (\n          <span className=\"xc-directory__leading\" aria-hidden=\"true\">\n            {leading}\n          </span>\n        )}\n\n        <span className=\"xc-directory__text\">\n          <span className=\"xc-directory__label\">{label}</span>\n        </span>\n\n        {trailing != null && (\n          <span className=\"xc-directory__trailing\" aria-hidden=\"true\">\n            {trailing}\n          </span>\n        )}\n      </button>\n\n      {variant === 'opened' && children != null && (\n        <div className=\"xc-directory__content\">\n          {children}\n        </div>\n      )}\n    </div>\n  ),\n)\n\nDirectory.displayName = 'Directory'\n","import type { XyneTheme } from './types'\n\n/**\n * Default theme — values match tokens.css (light mode).\n * Used as the base for createTheme() deep-merge.\n */\nexport const DEFAULT_THEME: XyneTheme = {\n  colors: {\n    orange: {\n      '50': '#fff7ed',\n      '100': '#ffedd4',\n      '200': '#ffd6a8',\n      '300': '#ffb86a',\n      '400': '#ff8904',\n      '500': '#fe6d36',\n      '600': '#ea580c',\n      '700': '#c2410c',\n    },\n    gray: {\n      '25': '#f6f8fa',\n      '50': '#f9fafb',\n      '100': '#f2f4f7',\n      '200': '#e4e7ec',\n      '300': '#d0d5dd',\n      '400': '#98a2b3',\n      '500': '#667085',\n      '600': '#475467',\n      '700': '#344054',\n      '800': '#1d2939',\n      '900': '#101828',\n    },\n    red: {\n      '50': '#fef3f2',\n      '500': '#f04438',\n      '600': '#d92d20',\n      '700': '#b42318',\n    },\n    green: {\n      '50': '#ecfdf3',\n      '500': '#12b76a',\n      '600': '#039855',\n      '700': '#027a48',\n    },\n    yellow: {\n      '50': '#fffaeb',\n      '500': '#f79009',\n      '600': '#dc6803',\n      '700': '#b54708',\n    },\n    blue: {\n      '50': '#eff8ff',\n      '500': '#2e90fa',\n      '600': '#1570ef',\n      '700': '#175cd3',\n    },\n    purple: {\n      '50': '#f9f5ff',\n      '500': '#9e77ed',\n      '600': '#7f56d9',\n      '700': '#6941c6',\n    },\n    teal: {\n      '50': '#f0fdf9',\n      '500': '#15b79e',\n      '600': '#0e9384',\n      '700': '#107569',\n    },\n  },\n\n  text: {\n    primary: '#101828',\n    secondary: '#475467',\n    tertiary: '#667085',\n    disabled: '#c9d0db',\n    brand: '#e8601a',\n    inverse: '#f1f5f9',\n    error: '#d92d20',\n    success: '#039855',\n    warning: '#b54708',\n  },\n\n  bg: {\n    white: '#ffffff',\n    subtle: '#f9fafb',\n    surfaceHover: '#f1f5f9',\n    brand: '#fff4ee',\n    error: '#fef3f2',\n    success: '#ecfdf3',\n    warning: '#fffaeb',\n    neutral: '#f9fafb',\n    purple: '#f9f5ff',\n    blue: '#eff8ff',\n    teal: '#f0fdf9',\n  },\n\n  border: {\n    default: '#d6dce6',\n    subtle: '#f1f5f9',\n    strong: '#98a2b3',\n    brand: '#fe6d36',\n    error: '#fda29b',\n  },\n\n  shadow: {\n    xs: '0 1px 2px 0 rgba(16, 24, 40, 0.05)',\n    sm: '0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1)',\n    md: '0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.1)',\n    pressed: 'inset 0 0 4px 0 rgba(0, 0, 0, 0.15)',\n  },\n\n  radius: {\n    xs: '2px',\n    sm: '4px',\n    md: '8px',\n    lg: '12px',\n    xl: '16px',\n    full: '9999px',\n  },\n\n  spacing: {\n    '0': '0px',\n    '1': '2px',\n    '2': '4px',\n    '3': '6px',\n    '4': '8px',\n    '5': '10px',\n    '6': '12px',\n    '7': '14px',\n    '8': '16px',\n    '9': '18px',\n    '10': '20px',\n    '12': '24px',\n    '16': '32px',\n  },\n\n  fontFamily: \"Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n\n  fontWeight: {\n    regular: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n  },\n\n  fontSize: {\n    '2xs': '10px',\n    xs: '11px',\n    sm: '12px',\n    md: '14px',\n    lg: '16px',\n    xl: '18px',\n  },\n\n  lineHeight: {\n    '2xs': '14px',\n    xs: '16px',\n    sm: '18px',\n    md: '20px',\n    lg: '24px',\n    xl: '28px',\n  },\n\n  other: {},\n  components: {},\n}\n","import type { XyneTheme, XyneThemeOverride } from './types'\nimport { DEFAULT_THEME } from './defaultTheme'\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n}\n\nfunction deepMerge(\n  target: Record<string, unknown>,\n  source: Record<string, unknown>,\n): Record<string, unknown> {\n  const result: Record<string, unknown> = { ...target }\n  for (const key of Object.keys(source)) {\n    if (isPlainObject(source[key]) && isPlainObject(target[key])) {\n      result[key] = deepMerge(\n        target[key] as Record<string, unknown>,\n        source[key] as Record<string, unknown>,\n      )\n    } else {\n      result[key] = source[key]\n    }\n  }\n  return result\n}\n\n/** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */\nexport function createTheme(override: XyneThemeOverride): XyneTheme {\n  return deepMerge(\n    DEFAULT_THEME as unknown as Record<string, unknown>,\n    override as Record<string, unknown>,\n  ) as unknown as XyneTheme\n}\n","import React, { useMemo } from 'react'\nimport type { XyneThemeOverride } from './types'\nimport type { ColorScheme, ResolvedColorScheme } from './colorScheme.types'\nimport { ThemeContext } from './ThemeContext'\nimport { createTheme } from './createTheme'\nimport { ColorSchemeProvider } from './ColorSchemeProvider'\n\n/** Convert camelCase to kebab-case: \"surfaceHover\" → \"surface-hover\" */\nfunction camelToKebab(str: string): string {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)\n}\n\n/**\n * Generate CSS custom-property declarations from a theme override.\n * Only fields present in the override produce variables — tokens.css provides all defaults.\n */\nfunction themeOverrideToCssVars(override: XyneThemeOverride): Record<string, string> {\n  const vars: Record<string, string> = {}\n\n  if (override.colors) {\n    for (const [scale, shades] of Object.entries(override.colors)) {\n      for (const [shade, value] of Object.entries(shades)) {\n        vars[`--xc-color-${camelToKebab(scale)}-${shade}`] = value\n      }\n    }\n  }\n\n  if (override.text) {\n    for (const [key, value] of Object.entries(override.text)) {\n      vars[`--xc-color-text-${camelToKebab(key)}`] = value\n    }\n  }\n\n  if (override.bg) {\n    for (const [key, value] of Object.entries(override.bg)) {\n      vars[`--xc-color-bg-${camelToKebab(key)}`] = value\n    }\n  }\n\n  if (override.border) {\n    for (const [key, value] of Object.entries(override.border)) {\n      vars[`--xc-color-border-${camelToKebab(key)}`] = value\n    }\n  }\n\n  if (override.shadow) {\n    for (const [key, value] of Object.entries(override.shadow)) {\n      vars[`--xc-shadow-${camelToKebab(key)}`] = value\n    }\n  }\n\n  if (override.radius) {\n    for (const [key, value] of Object.entries(override.radius)) {\n      vars[`--xc-radius-${camelToKebab(key)}`] = value\n    }\n  }\n\n  if (override.spacing) {\n    for (const [key, value] of Object.entries(override.spacing)) {\n      vars[`--xc-space-${key}`] = value\n    }\n  }\n\n  if (override.fontFamily) {\n    vars['--xc-font-family'] = override.fontFamily\n  }\n\n  if (override.fontWeight) {\n    for (const [key, value] of Object.entries(override.fontWeight)) {\n      vars[`--xc-font-weight-${camelToKebab(key)}`] = value\n    }\n  }\n\n  if (override.fontSize) {\n    for (const [key, value] of Object.entries(override.fontSize)) {\n      vars[`--xc-font-size-${key}`] = value\n    }\n  }\n\n  if (override.lineHeight) {\n    for (const [key, value] of Object.entries(override.lineHeight)) {\n      vars[`--xc-line-height-${key}`] = value\n    }\n  }\n\n  return vars\n}\n\nexport interface ThemeProviderProps {\n  /** Theme override — deep-merged with DEFAULT_THEME */\n  theme?: XyneThemeOverride\n  /** CSS selector for variable injection. @default ':root' */\n  cssVariablesSelector?: string\n  /** Initial color scheme if nothing is stored. @default 'light' */\n  defaultColorScheme?: ColorScheme\n  /** Force a specific color scheme — ignores storage and user toggle. */\n  forceColorScheme?: ResolvedColorScheme\n  /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */\n  colorSchemeStorageKey?: string\n  /** Return the element to set `data-theme` on. @default () => document.documentElement */\n  getRootElement?: () => HTMLElement | undefined\n  children: React.ReactNode\n}\n\n/**\n * Provides theme context and injects CSS variable overrides via a <style> tag.\n * Wrap your app (or a subtree) to customise design tokens.\n *\n * @example\n * ```tsx\n * const theme = createTheme({ text: { brand: '#0066ff' } })\n * <ThemeProvider theme={theme}>{children}</ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n  theme: themeOverride = {},\n  cssVariablesSelector = ':root',\n  defaultColorScheme = 'light',\n  forceColorScheme,\n  colorSchemeStorageKey,\n  getRootElement,\n  children,\n}: ThemeProviderProps) {\n  const resolvedTheme = useMemo(\n    () => createTheme(themeOverride),\n    [themeOverride],\n  )\n\n  const cssText = useMemo(() => {\n    const vars = themeOverrideToCssVars(themeOverride)\n    const entries = Object.entries(vars)\n    if (entries.length === 0) return ''\n    const declarations = entries\n      .map(([k, v]) => `  ${k}: ${v};`)\n      .join('\\n')\n    return `${cssVariablesSelector} {\\n${declarations}\\n}`\n  }, [themeOverride, cssVariablesSelector])\n\n  return (\n    <ColorSchemeProvider\n      defaultColorScheme={defaultColorScheme}\n      forceColorScheme={forceColorScheme}\n      storageKey={colorSchemeStorageKey}\n      getRootElement={getRootElement}\n    >\n      <ThemeContext.Provider value={resolvedTheme}>\n        {cssText && <style data-xc-theme=\"\">{cssText}</style>}\n        {children}\n      </ThemeContext.Provider>\n    </ColorSchemeProvider>\n  )\n}\n","import { createContext } from 'react'\nimport type { XyneTheme } from './types'\nimport { DEFAULT_THEME } from './defaultTheme'\n\nexport const ThemeContext = createContext<XyneTheme>(DEFAULT_THEME)\n","import React, { useState, useEffect, useMemo, useCallback } from 'react'\nimport type { ColorScheme, ResolvedColorScheme, ColorSchemeContextValue } from './colorScheme.types'\nimport { ColorSchemeContext } from './ColorSchemeContext'\n\nconst STORAGE_KEY = 'xc-color-scheme'\n\nfunction getSystemPreference(): ResolvedColorScheme {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction readStorage(): ColorScheme | null {\n  if (typeof window === 'undefined') return null\n  try {\n    const stored = window.localStorage.getItem(STORAGE_KEY)\n    if (stored === 'light' || stored === 'dark' || stored === 'auto') return stored\n  } catch { /* localStorage unavailable */ }\n  return null\n}\n\nfunction applyToDOM(resolved: ResolvedColorScheme, getRootElement?: () => HTMLElement | undefined) {\n  if (typeof document === 'undefined') return\n  const root = getRootElement ? getRootElement() : document.documentElement\n  if (root) root.setAttribute('data-theme', resolved)\n}\n\nexport interface ColorSchemeProviderProps {\n  /** Initial color scheme if nothing is stored. @default 'light' */\n  defaultColorScheme?: ColorScheme\n  /** Force a specific color scheme — ignores storage and user toggle. */\n  forceColorScheme?: ResolvedColorScheme\n  /** localStorage key. @default 'xc-color-scheme' */\n  storageKey?: string\n  /** Return the element to set `data-theme` on. @default () => document.documentElement */\n  getRootElement?: () => HTMLElement | undefined\n  children: React.ReactNode\n}\n\nexport function ColorSchemeProvider({\n  defaultColorScheme = 'light',\n  forceColorScheme,\n  storageKey = STORAGE_KEY,\n  getRootElement,\n  children,\n}: ColorSchemeProviderProps) {\n  const [colorScheme, setColorSchemeRaw] = useState<ColorScheme>(() => {\n    if (forceColorScheme) return forceColorScheme\n    // Use a custom storage key by reading directly\n    if (typeof window !== 'undefined' && storageKey !== STORAGE_KEY) {\n      try {\n        const v = window.localStorage.getItem(storageKey)\n        if (v === 'light' || v === 'dark' || v === 'auto') return v\n      } catch { /* noop */ }\n    }\n    return readStorage() ?? defaultColorScheme\n  })\n\n  const [systemPreference, setSystemPreference] = useState<ResolvedColorScheme>(getSystemPreference)\n\n  const resolvedColorScheme: ResolvedColorScheme = forceColorScheme\n    ?? (colorScheme === 'auto' ? systemPreference : colorScheme)\n\n  // Listen for OS-level prefers-color-scheme changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\n    const handler = (e: MediaQueryListEvent) => {\n      setSystemPreference(e.matches ? 'dark' : 'light')\n    }\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  // Sync storage changes across tabs\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const handler = (e: StorageEvent) => {\n      if (e.key !== storageKey) return\n      const val = e.newValue\n      if (val === 'light' || val === 'dark' || val === 'auto') {\n        setColorSchemeRaw(val)\n      }\n    }\n    window.addEventListener('storage', handler)\n    return () => window.removeEventListener('storage', handler)\n  }, [storageKey])\n\n  // Apply data-theme to DOM whenever resolved value changes\n  useEffect(() => {\n    applyToDOM(resolvedColorScheme, getRootElement)\n  }, [resolvedColorScheme, getRootElement])\n\n  const setColorScheme = useCallback((scheme: ColorScheme) => {\n    if (forceColorScheme) return // forced — ignore\n    setColorSchemeRaw(scheme)\n    try {\n      window.localStorage.setItem(storageKey, scheme)\n    } catch { /* noop */ }\n  }, [forceColorScheme, storageKey])\n\n  const toggleColorScheme = useCallback(() => {\n    setColorScheme(resolvedColorScheme === 'dark' ? 'light' : 'dark')\n  }, [resolvedColorScheme, setColorScheme])\n\n  const value = useMemo<ColorSchemeContextValue>(() => ({\n    colorScheme,\n    resolvedColorScheme,\n    setColorScheme,\n    toggleColorScheme,\n  }), [colorScheme, resolvedColorScheme, setColorScheme, toggleColorScheme])\n\n  return (\n    <ColorSchemeContext.Provider value={value}>\n      {children}\n    </ColorSchemeContext.Provider>\n  )\n}\n","import { createContext } from 'react'\nimport type { ColorSchemeContextValue } from './colorScheme.types'\n\n/** Default (no-op) context — consumers outside a provider get static 'light'. */\nexport const ColorSchemeContext = createContext<ColorSchemeContextValue>({\n  colorScheme: 'light',\n  resolvedColorScheme: 'light',\n  setColorScheme: () => {},\n  toggleColorScheme: () => {},\n})\n","import { useContext } from 'react'\nimport type { XyneTheme } from './types'\nimport { ThemeContext } from './ThemeContext'\n\n/** Access the resolved theme object from the nearest ThemeProvider. */\nexport function useTheme(): XyneTheme {\n  return useContext(ThemeContext)\n}\n","import { useContext } from 'react'\nimport type { ColorSchemeContextValue } from './colorScheme.types'\nimport { ColorSchemeContext } from './ColorSchemeContext'\n\n/**\n * Access and control the current color scheme.\n *\n * @example\n * ```tsx\n * const { resolvedColorScheme, toggleColorScheme } = useColorScheme()\n * <button onClick={toggleColorScheme}>\n *   Current: {resolvedColorScheme}\n * </button>\n * ```\n */\nexport function useColorScheme(): ColorSchemeContextValue {\n  return useContext(ColorSchemeContext)\n}\n"],"mappings":"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","names":["React","import_react","import_jsx_runtime","React","import_react","import_jsx_runtime","React","import_react","import_jsx_runtime","React","import_react","import_react","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_react"]}
+{"version":3,"sources":["/Users/harshpreet.singh/Desktop/Juspay/xyne-spaces/components/dist/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,wjBAAC","file":"/Users/harshpreet.singh/Desktop/Juspay/xyne-spaces/components/dist/index.cjs"}

package/dist/index.d.cts

@@ -1,176 +1,10 @@
-import React, { CSSProperties } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-    /** Primary label text */
-    label: string;
-    /** Optional secondary line below the label */
-    subtext?: string;
-    /** Item is visually selected */
-    selected?: boolean;
-    /** Item is active (keyboard-highlighted / current) */
-    active?: boolean;
-    /** Show the left vertical bar indicator @default true */
-    showBar?: boolean;
-    /** 16×16 slot before the label */
-    leading?: React.ReactNode;
-    /** 16×16 slot after the label */
-    trailing?: React.ReactNode;
-}
-declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLButtonElement>>;
-
-type BadgeVariant = 'badge' | 'dot';
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Visual variant: "badge" (pill with count/text) or "dot" (tiny status indicator) @default 'badge' */
-    variant?: BadgeVariant;
-    /** 12×12 icon slot, shown before the text (only for type="badge") */
-    icon?: React.ReactNode;
-}
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-
-type LabelVariant = 'opened' | 'closed';
-interface LabelProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> {
-    children: React.ReactNode;
-    /** Visual variant: "opened" (primary text) or "closed" (secondary text) @default 'closed' */
-    variant?: LabelVariant;
-    /** 16×16 slot before the label text */
-    leading?: React.ReactNode;
-    /** 16×16 slot after the label text */
-    trailing?: React.ReactNode;
-}
-declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLButtonElement>>;
-
-type DirectoryVariant = 'opened' | 'closed';
-interface DirectoryProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Label text shown in the header row */
-    label: string;
-    /** Visual variant: "opened" (children visible) or "closed" (collapsed) @default 'closed' */
-    variant?: DirectoryVariant;
-    /** 16×16 slot before the label (folder icon) */
-    leading?: React.ReactNode;
-    /** 16×16 slot after the label (chevron icon) */
-    trailing?: React.ReactNode;
-    /** Called when the header row is clicked */
-    onHeaderClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /** Children rendered below the header when opened (typically ListItem components) */
-    children?: React.ReactNode;
-}
-declare const Directory: React.ForwardRefExoticComponent<DirectoryProps & React.RefAttributes<HTMLDivElement>>;
-
-/** Per-component theme configuration */
-interface XyneComponentTheme {
-    defaultProps?: Record<string, unknown>;
-    classNames?: Record<string, string>;
-    styles?: Record<string, CSSProperties>;
-}
-/** Full resolved theme object */
-interface XyneTheme {
-    /** Color scales — e.g. { orange: { '500': '#fe6d36' }, gray: { '900': '#101828' } } */
-    colors: Record<string, Record<string, string>>;
-    /** Semantic text colors — maps to --xc-color-text-{key} */
-    text: Record<string, string>;
-    /** Background colors — maps to --xc-color-bg-{key} */
-    bg: Record<string, string>;
-    /** Border colors — maps to --xc-color-border-{key} */
-    border: Record<string, string>;
-    /** Box shadows — maps to --xc-shadow-{key} */
-    shadow: Record<string, string>;
-    /** Border radius scale — maps to --xc-radius-{key} */
-    radius: Record<string, string>;
-    /** Spacing scale — maps to --xc-space-{key} */
-    spacing: Record<string, string>;
-    /** Default font family — maps to --xc-font-family */
-    fontFamily: string;
-    /** Font weight scale — maps to --xc-font-weight-{key} */
-    fontWeight: Record<string, string>;
-    /** Font size scale — maps to --xc-font-size-{key} */
-    fontSize: Record<string, string>;
-    /** Line height scale — maps to --xc-line-height-{key} */
-    lineHeight: Record<string, string>;
-    /** Arbitrary user-defined values, accessible via useTheme() */
-    other: Record<string, unknown>;
-    /** Per-component default props, classNames, and styles */
-    components: Record<string, XyneComponentTheme>;
-}
-/** Partial theme override — passed to createTheme() and ThemeProvider */
-type XyneThemeOverride = Partial<XyneTheme>;
-
-/**
- * Default theme — values match tokens.css (light mode).
- * Used as the base for createTheme() deep-merge.
- */
-declare const DEFAULT_THEME: XyneTheme;
-
-/** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */
-declare function createTheme(override: XyneThemeOverride): XyneTheme;
-
-type ColorScheme = 'light' | 'dark' | 'auto';
-type ResolvedColorScheme = 'light' | 'dark';
-interface ColorSchemeContextValue {
-    /** Current color scheme preference ('light' | 'dark' | 'auto') */
-    colorScheme: ColorScheme;
-    /** Resolved value — always 'light' or 'dark' (resolves 'auto' via OS preference) */
-    resolvedColorScheme: ResolvedColorScheme;
-    /** Set the color scheme preference */
-    setColorScheme: (scheme: ColorScheme) => void;
-    /** Toggle between light and dark (based on resolved value) */
-    toggleColorScheme: () => void;
-}
-
-interface ThemeProviderProps {
-    /** Theme override — deep-merged with DEFAULT_THEME */
-    theme?: XyneThemeOverride;
-    /** CSS selector for variable injection. @default ':root' */
-    cssVariablesSelector?: string;
-    /** Initial color scheme if nothing is stored. @default 'light' */
-    defaultColorScheme?: ColorScheme;
-    /** Force a specific color scheme — ignores storage and user toggle. */
-    forceColorScheme?: ResolvedColorScheme;
-    /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */
-    colorSchemeStorageKey?: string;
-    /** Return the element to set `data-theme` on. @default () => document.documentElement */
-    getRootElement?: () => HTMLElement | undefined;
-    children: React.ReactNode;
-}
-/**
- * Provides theme context and injects CSS variable overrides via a <style> tag.
- * Wrap your app (or a subtree) to customise design tokens.
- *
- * @example
- * ```tsx
- * const theme = createTheme({ text: { brand: '#0066ff' } })
- * <ThemeProvider theme={theme}>{children}</ThemeProvider>
- * ```
- */
-declare function ThemeProvider({ theme: themeOverride, cssVariablesSelector, defaultColorScheme, forceColorScheme, colorSchemeStorageKey, getRootElement, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-
-/** Access the resolved theme object from the nearest ThemeProvider. */
-declare function useTheme(): XyneTheme;
-
-interface ColorSchemeProviderProps {
-    /** Initial color scheme if nothing is stored. @default 'light' */
-    defaultColorScheme?: ColorScheme;
-    /** Force a specific color scheme — ignores storage and user toggle. */
-    forceColorScheme?: ResolvedColorScheme;
-    /** localStorage key. @default 'xc-color-scheme' */
-    storageKey?: string;
-    /** Return the element to set `data-theme` on. @default () => document.documentElement */
-    getRootElement?: () => HTMLElement | undefined;
-    children: React.ReactNode;
-}
-declare function ColorSchemeProvider({ defaultColorScheme, forceColorScheme, storageKey, getRootElement, children, }: ColorSchemeProviderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Access and control the current color scheme.
- *
- * @example
- * ```tsx
- * const { resolvedColorScheme, toggleColorScheme } = useColorScheme()
- * <button onClick={toggleColorScheme}>
- *   Current: {resolvedColorScheme}
- * </button>
- * ```
- */
-declare function useColorScheme(): ColorSchemeContextValue;
-
-export { Badge, type BadgeProps, type BadgeVariant, type ColorScheme, type ColorSchemeContextValue, ColorSchemeProvider, type ColorSchemeProviderProps, DEFAULT_THEME, Directory, type DirectoryProps, type DirectoryVariant, Label, type LabelProps, type LabelVariant, ListItem, type ListItemProps, type ResolvedColorScheme, ThemeProvider, type ThemeProviderProps, type XyneComponentTheme, type XyneTheme, type XyneThemeOverride, createTheme, useColorScheme, useTheme };
+export { ListItem, ListItemProps, ListItemSlotProps, ListItemSlots } from './ListItem/index.cjs';
+export { Badge, BadgeProps, BadgeSlotProps, BadgeSlots, BadgeVariant } from './Badge/index.cjs';
+export { Label, LabelProps, LabelSlotProps, LabelSlots, LabelVariant } from './Label/index.cjs';
+export { Directory, DirectoryProps, DirectorySlotProps, DirectorySlots, DirectoryVariant } from './Directory/index.cjs';
+export { C as ColorScheme, a as ColorSchemeContextValue, R as ResolvedColorScheme, X as XyneComponentTheme, b as XyneTheme, c as XyneThemeOverride } from './colorScheme.types-CqDRrNL0.cjs';
+export { ColorSchemeProvider, ColorSchemeProviderProps, DEFAULT_THEME, ThemeProvider, ThemeProviderProps, createTheme } from './theme/index.cjs';
+export { useColorScheme, useTheme } from './hooks/index.cjs';
+export { A as AsProp, P as PolymorphicComponentProps, a as PolymorphicComponentPropsWithRef, b as PolymorphicRef, S as SxProp, r as resolveSx } from './polymorphic-BpYm1AeE.cjs';
+import 'react';
+import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,176 +1,10 @@
-import React, { CSSProperties } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-    /** Primary label text */
-    label: string;
-    /** Optional secondary line below the label */
-    subtext?: string;
-    /** Item is visually selected */
-    selected?: boolean;
-    /** Item is active (keyboard-highlighted / current) */
-    active?: boolean;
-    /** Show the left vertical bar indicator @default true */
-    showBar?: boolean;
-    /** 16×16 slot before the label */
-    leading?: React.ReactNode;
-    /** 16×16 slot after the label */
-    trailing?: React.ReactNode;
-}
-declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLButtonElement>>;
-
-type BadgeVariant = 'badge' | 'dot';
-interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Visual variant: "badge" (pill with count/text) or "dot" (tiny status indicator) @default 'badge' */
-    variant?: BadgeVariant;
-    /** 12×12 icon slot, shown before the text (only for type="badge") */
-    icon?: React.ReactNode;
-}
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-
-type LabelVariant = 'opened' | 'closed';
-interface LabelProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> {
-    children: React.ReactNode;
-    /** Visual variant: "opened" (primary text) or "closed" (secondary text) @default 'closed' */
-    variant?: LabelVariant;
-    /** 16×16 slot before the label text */
-    leading?: React.ReactNode;
-    /** 16×16 slot after the label text */
-    trailing?: React.ReactNode;
-}
-declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLButtonElement>>;
-
-type DirectoryVariant = 'opened' | 'closed';
-interface DirectoryProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Label text shown in the header row */
-    label: string;
-    /** Visual variant: "opened" (children visible) or "closed" (collapsed) @default 'closed' */
-    variant?: DirectoryVariant;
-    /** 16×16 slot before the label (folder icon) */
-    leading?: React.ReactNode;
-    /** 16×16 slot after the label (chevron icon) */
-    trailing?: React.ReactNode;
-    /** Called when the header row is clicked */
-    onHeaderClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /** Children rendered below the header when opened (typically ListItem components) */
-    children?: React.ReactNode;
-}
-declare const Directory: React.ForwardRefExoticComponent<DirectoryProps & React.RefAttributes<HTMLDivElement>>;
-
-/** Per-component theme configuration */
-interface XyneComponentTheme {
-    defaultProps?: Record<string, unknown>;
-    classNames?: Record<string, string>;
-    styles?: Record<string, CSSProperties>;
-}
-/** Full resolved theme object */
-interface XyneTheme {
-    /** Color scales — e.g. { orange: { '500': '#fe6d36' }, gray: { '900': '#101828' } } */
-    colors: Record<string, Record<string, string>>;
-    /** Semantic text colors — maps to --xc-color-text-{key} */
-    text: Record<string, string>;
-    /** Background colors — maps to --xc-color-bg-{key} */
-    bg: Record<string, string>;
-    /** Border colors — maps to --xc-color-border-{key} */
-    border: Record<string, string>;
-    /** Box shadows — maps to --xc-shadow-{key} */
-    shadow: Record<string, string>;
-    /** Border radius scale — maps to --xc-radius-{key} */
-    radius: Record<string, string>;
-    /** Spacing scale — maps to --xc-space-{key} */
-    spacing: Record<string, string>;
-    /** Default font family — maps to --xc-font-family */
-    fontFamily: string;
-    /** Font weight scale — maps to --xc-font-weight-{key} */
-    fontWeight: Record<string, string>;
-    /** Font size scale — maps to --xc-font-size-{key} */
-    fontSize: Record<string, string>;
-    /** Line height scale — maps to --xc-line-height-{key} */
-    lineHeight: Record<string, string>;
-    /** Arbitrary user-defined values, accessible via useTheme() */
-    other: Record<string, unknown>;
-    /** Per-component default props, classNames, and styles */
-    components: Record<string, XyneComponentTheme>;
-}
-/** Partial theme override — passed to createTheme() and ThemeProvider */
-type XyneThemeOverride = Partial<XyneTheme>;
-
-/**
- * Default theme — values match tokens.css (light mode).
- * Used as the base for createTheme() deep-merge.
- */
-declare const DEFAULT_THEME: XyneTheme;
-
-/** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */
-declare function createTheme(override: XyneThemeOverride): XyneTheme;
-
-type ColorScheme = 'light' | 'dark' | 'auto';
-type ResolvedColorScheme = 'light' | 'dark';
-interface ColorSchemeContextValue {
-    /** Current color scheme preference ('light' | 'dark' | 'auto') */
-    colorScheme: ColorScheme;
-    /** Resolved value — always 'light' or 'dark' (resolves 'auto' via OS preference) */
-    resolvedColorScheme: ResolvedColorScheme;
-    /** Set the color scheme preference */
-    setColorScheme: (scheme: ColorScheme) => void;
-    /** Toggle between light and dark (based on resolved value) */
-    toggleColorScheme: () => void;
-}
-
-interface ThemeProviderProps {
-    /** Theme override — deep-merged with DEFAULT_THEME */
-    theme?: XyneThemeOverride;
-    /** CSS selector for variable injection. @default ':root' */
-    cssVariablesSelector?: string;
-    /** Initial color scheme if nothing is stored. @default 'light' */
-    defaultColorScheme?: ColorScheme;
-    /** Force a specific color scheme — ignores storage and user toggle. */
-    forceColorScheme?: ResolvedColorScheme;
-    /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */
-    colorSchemeStorageKey?: string;
-    /** Return the element to set `data-theme` on. @default () => document.documentElement */
-    getRootElement?: () => HTMLElement | undefined;
-    children: React.ReactNode;
-}
-/**
- * Provides theme context and injects CSS variable overrides via a <style> tag.
- * Wrap your app (or a subtree) to customise design tokens.
- *
- * @example
- * ```tsx
- * const theme = createTheme({ text: { brand: '#0066ff' } })
- * <ThemeProvider theme={theme}>{children}</ThemeProvider>
- * ```
- */
-declare function ThemeProvider({ theme: themeOverride, cssVariablesSelector, defaultColorScheme, forceColorScheme, colorSchemeStorageKey, getRootElement, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-
-/** Access the resolved theme object from the nearest ThemeProvider. */
-declare function useTheme(): XyneTheme;
-
-interface ColorSchemeProviderProps {
-    /** Initial color scheme if nothing is stored. @default 'light' */
-    defaultColorScheme?: ColorScheme;
-    /** Force a specific color scheme — ignores storage and user toggle. */
-    forceColorScheme?: ResolvedColorScheme;
-    /** localStorage key. @default 'xc-color-scheme' */
-    storageKey?: string;
-    /** Return the element to set `data-theme` on. @default () => document.documentElement */
-    getRootElement?: () => HTMLElement | undefined;
-    children: React.ReactNode;
-}
-declare function ColorSchemeProvider({ defaultColorScheme, forceColorScheme, storageKey, getRootElement, children, }: ColorSchemeProviderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Access and control the current color scheme.
- *
- * @example
- * ```tsx
- * const { resolvedColorScheme, toggleColorScheme } = useColorScheme()
- * <button onClick={toggleColorScheme}>
- *   Current: {resolvedColorScheme}
- * </button>
- * ```
- */
-declare function useColorScheme(): ColorSchemeContextValue;
-
-export { Badge, type BadgeProps, type BadgeVariant, type ColorScheme, type ColorSchemeContextValue, ColorSchemeProvider, type ColorSchemeProviderProps, DEFAULT_THEME, Directory, type DirectoryProps, type DirectoryVariant, Label, type LabelProps, type LabelVariant, ListItem, type ListItemProps, type ResolvedColorScheme, ThemeProvider, type ThemeProviderProps, type XyneComponentTheme, type XyneTheme, type XyneThemeOverride, createTheme, useColorScheme, useTheme };
+export { ListItem, ListItemProps, ListItemSlotProps, ListItemSlots } from './ListItem/index.js';
+export { Badge, BadgeProps, BadgeSlotProps, BadgeSlots, BadgeVariant } from './Badge/index.js';
+export { Label, LabelProps, LabelSlotProps, LabelSlots, LabelVariant } from './Label/index.js';
+export { Directory, DirectoryProps, DirectorySlotProps, DirectorySlots, DirectoryVariant } from './Directory/index.js';
+export { C as ColorScheme, a as ColorSchemeContextValue, R as ResolvedColorScheme, X as XyneComponentTheme, b as XyneTheme, c as XyneThemeOverride } from './colorScheme.types-CqDRrNL0.js';
+export { ColorSchemeProvider, ColorSchemeProviderProps, DEFAULT_THEME, ThemeProvider, ThemeProviderProps, createTheme } from './theme/index.js';
+export { useColorScheme, useTheme } from './hooks/index.js';
+export { A as AsProp, P as PolymorphicComponentProps, a as PolymorphicComponentPropsWithRef, b as PolymorphicRef, S as SxProp, r as resolveSx } from './polymorphic-BpYm1AeE.js';
+import 'react';
+import 'react/jsx-runtime';