@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/chunk-LUD52ZJF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TextArea/TextArea.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Switch/Switch.tsx","../src/components/Label/Label.tsx","../src/components/Skeleton/Skeleton.tsx","../src/components/Separator/Separator.tsx","../src/components/Collapsible/Collapsible.tsx","../src/components/Select/Select.tsx","../src/tokens/motion.ts","../src/tokens/colors.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts","../src/tokens/radius.ts","../src/tokens/shadows.ts","../src/tokens/z-index.ts","../src/tokens/breakpoints.ts"],"names":["clsx","jsx","jsxs","React"],"mappings":"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","sourcesContent":["import { TextareaHTMLAttributes, forwardRef, useId } from 'react';\nimport clsx from 'clsx';\nimport './TextArea.css';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: string;\n  error?: boolean;\n  helperText?: string;\n}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, label, error, helperText, id, ...props }, ref) => {\n    const generatedId = useId();\n    const inputId = id || generatedId;\n\n    return (\n      <div className={clsx('ds-textarea', className)}>\n        {label && (\n          <label htmlFor={inputId} className=\"ds-textarea__label\">\n            {label}\n          </label>\n        )}\n        <div className=\"ds-textarea__input-wrapper\">\n          <textarea\n            id={inputId}\n            ref={ref}\n            className={clsx('ds-textarea__input', error && 'ds-textarea__input--error')}\n            {...props}\n          />\n        </div>\n        {helperText && (\n          <span className={clsx('ds-textarea__helper', error && 'ds-textarea__helper--error')}>\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n","import React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport clsx from 'clsx';\nimport './Checkbox.css';\n\nexport interface CheckboxProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  name?: string;\n  value?: string;\n  id?: string;\n  label?: string;\n  className?: string;\n}\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  ({ className, label, id, ...props }, ref) => {\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n\n    return (\n      <div className={clsx('ds-checkbox-wrapper', className)}>\n        <BaseCheckbox.Root id={checkboxId} ref={ref} className=\"ds-checkbox\" {...props}>\n          <BaseCheckbox.Indicator className=\"ds-checkbox__indicator\">\n            <svg\n              viewBox=\"0 0 14 14\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"ds-checkbox__icon\"\n            >\n              <path\n                d=\"M11.6666 3.5L5.24992 9.91667L2.33325 7\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n        {label && (\n          <label htmlFor={checkboxId} className=\"ds-checkbox__label\">\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n","import React from 'react';\nimport { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport clsx from 'clsx';\nimport './Switch.css';\n\nexport interface SwitchProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  name?: string;\n  value?: string;\n  id?: string;\n  label?: string;\n  className?: string;\n}\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ className, label, id, ...props }, ref) => {\n    const generatedId = React.useId();\n    const switchId = id || generatedId;\n\n    return (\n      <div className={clsx('ds-switch-wrapper', className)}>\n        <BaseSwitch.Root id={switchId} ref={ref} className=\"ds-switch\" {...props}>\n          <BaseSwitch.Thumb className=\"ds-switch__thumb\" />\n        </BaseSwitch.Root>\n        {label && (\n          <label htmlFor={switchId} className=\"ds-switch__label\">\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './Label.css';\n\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether the associated input is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * Accessible label component for form inputs.\n *\n * @example\n * <Label htmlFor=\"email\">Email address</Label>\n * <Label disabled>Disabled field</Label>\n */\nexport const Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, disabled, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={clsx('ds-label', disabled && 'ds-label--disabled', className)}\n        data-disabled={disabled || undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nLabel.displayName = 'Label';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './Skeleton.css';\n\nexport type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Loading placeholder with a shimmer animation.\n *\n * Apply `width` and `height` via `style` or a wrapping className to control size.\n *\n * @example\n * <Skeleton style={{ width: 200, height: 16 }} />\n * <Skeleton style={{ width: 40, height: 40, borderRadius: '50%' }} />\n */\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('ds-skeleton', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = 'Skeleton';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './Separator.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The orientation of the separator.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * Visual divider to separate content sections.\n *\n * @example\n * <Separator />\n * <Separator orientation=\"vertical\" />\n */\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className, orientation = 'horizontal', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={orientation}\n        className={clsx(\n          'ds-separator',\n          `ds-separator--${orientation}`,\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nSeparator.displayName = 'Separator';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './Collapsible.css';\n\n/* ============================================================================\n   COLLAPSIBLE — Compound component with context-driven open state\n   ============================================================================ */\n\ninterface CollapsibleContextValue {\n  open: boolean;\n  toggle: () => void;\n}\n\nconst CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null);\n\nfunction useCollapsibleContext() {\n  const context = React.useContext(CollapsibleContext);\n  if (!context) {\n    throw new Error('Collapsible compound components must be used within <Collapsible>');\n  }\n  return context;\n}\n\n/* --------------------------------------------------------------------------\n   Collapsible (Root)\n   -------------------------------------------------------------------------- */\n\nexport interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the collapsible is open (controlled). */\n  open?: boolean;\n  /** Callback fired when the open state changes. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(\n  ({ className, open: controlledOpen, onOpenChange, children, ...props }, ref) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n    const toggle = React.useCallback(() => {\n      const next = !open;\n      if (!isControlled) {\n        setUncontrolledOpen(next);\n      }\n      onOpenChange?.(next);\n    }, [open, isControlled, onOpenChange]);\n\n    const contextValue = React.useMemo(\n      () => ({ open, toggle }),\n      [open, toggle],\n    );\n\n    return (\n      <CollapsibleContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={clsx('ds-collapsible', className)}\n          data-state={open ? 'open' : 'closed'}\n          {...props}\n        >\n          {children}\n        </div>\n      </CollapsibleContext.Provider>\n    );\n  },\n);\n\nCollapsible.displayName = 'Collapsible';\n\n/* --------------------------------------------------------------------------\n   CollapsibleTrigger\n   -------------------------------------------------------------------------- */\n\nexport const CollapsibleTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggle } = useCollapsibleContext();\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    toggle();\n    onClick?.(e);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx('ds-collapsible__trigger', className)}\n      onClick={handleClick}\n      {...props}\n    />\n  );\n});\n\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\n/* --------------------------------------------------------------------------\n   CollapsibleContent\n   -------------------------------------------------------------------------- */\n\nexport const CollapsibleContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const { open } = useCollapsibleContext();\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const [maxHeight, setMaxHeight] = React.useState<number | undefined>(\n    open ? undefined : 0,\n  );\n\n  React.useEffect(() => {\n    const el = contentRef.current;\n    if (!el) return;\n\n    if (open) {\n      const scrollHeight = el.scrollHeight;\n      setMaxHeight(scrollHeight);\n      const timer = setTimeout(() => setMaxHeight(undefined), 200);\n      return () => clearTimeout(timer);\n    } else {\n      const scrollHeight = el.scrollHeight;\n      setMaxHeight(scrollHeight);\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setMaxHeight(0);\n        });\n      });\n    }\n  }, [open]);\n\n  return (\n    <div\n      ref={contentRef}\n      className={clsx('ds-collapsible__content', className)}\n      data-state={open ? 'open' : 'closed'}\n      style={{\n        maxHeight: maxHeight !== undefined ? `${maxHeight}px` : 'none',\n      }}\n      hidden={!open && maxHeight === 0}\n      {...props}\n    >\n      <div ref={ref} className=\"ds-collapsible__content-inner\">\n        {children}\n      </div>\n    </div>\n  );\n});\n\nCollapsibleContent.displayName = 'CollapsibleContent';\n","import React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport './Select.css';\n\n/* ============================================================================\n   SELECT ROOT\n   ============================================================================ */\n\nexport interface SelectProps {\n  /** Current selected value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string | null) => void;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is required */\n  required?: boolean;\n  /** Name for form submission */\n  name?: string;\n  /**\n   * Item label map for Value display resolution.\n   * When provided, Select.Value renders the label instead of the raw value.\n   * Accepts a record (e.g. `{ en: \"English\", fr: \"French\" }`) or an array\n   * of `{ value, label }` objects.\n   */\n  items?: Record<string, React.ReactNode> | ReadonlyArray<{ label: React.ReactNode; value: string }>;\n  /** Children (SelectTrigger, SelectContent, etc.) */\n  children: React.ReactNode;\n}\n\nexport function Select({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n  required,\n  name,\n  items,\n  children,\n}: SelectProps) {\n  return (\n    <BaseSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange ? (val) => onValueChange(val) : undefined}\n      disabled={disabled}\n      required={required}\n      name={name}\n      items={items}\n    >\n      {children}\n    </BaseSelect.Root>\n  );\n}\n\nSelect.displayName = 'Select';\n\n/* ============================================================================\n   SELECT TRIGGER\n   ============================================================================ */\n\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Placeholder text when no value selected */\n  placeholder?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  ({ className, placeholder = 'Select...', size = 'md', ...props }, ref) => {\n    return (\n      <div className=\"ds-select__trigger-wrapper\">\n        <BaseSelect.Trigger\n          ref={ref}\n          className={clsx('ds-select__trigger', `ds-select__trigger--${size}`, className)}\n          aria-label={props['aria-label'] || (typeof placeholder === 'string' ? placeholder : 'Select')}\n          {...props}\n        >\n          <BaseSelect.Value className=\"ds-select__value\" placeholder={placeholder} />\n          <BaseSelect.Icon className=\"ds-select__icon\" aria-hidden>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </BaseSelect.Trigger>\n      </div>\n    );\n  },\n);\n\nSelectTrigger.displayName = 'SelectTrigger';\n\n/* ============================================================================\n   SELECT CONTENT\n   ============================================================================ */\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Positioning side */\n  side?: 'top' | 'bottom';\n  /** Side offset in pixels */\n  sideOffset?: number;\n  /** Alignment */\n  align?: 'start' | 'center' | 'end';\n}\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  ({ className, side = 'bottom', sideOffset = 4, align = 'start', children, ...props }, ref) => {\n    return (\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignItemWithTrigger={false}\n        >\n          <BaseSelect.Popup ref={ref} className={clsx('ds-select__content', className)} {...props}>\n            <BaseSelect.List className=\"ds-select__list\">\n              {children}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    );\n  },\n);\n\nSelectContent.displayName = 'SelectContent';\n\n/* ============================================================================\n   SELECT ITEM\n   ============================================================================ */\n\nexport interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Value for this option */\n  value: string;\n  /** Display text */\n  children: React.ReactNode;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n}\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n  ({ className, value, children, disabled, ...props }, ref) => {\n    return (\n      <BaseSelect.Item\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        className={clsx('ds-select__item', className)}\n        {...props}\n      >\n        <BaseSelect.ItemIndicator className=\"ds-select__item-indicator\">\n          <CheckIcon />\n        </BaseSelect.ItemIndicator>\n        <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      </BaseSelect.Item>\n    );\n  },\n);\n\nSelectItem.displayName = 'SelectItem';\n\n/* ============================================================================\n   SELECT GROUP\n   ============================================================================ */\n\nexport interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Group label */\n  label?: string;\n}\n\nexport const SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ className, label, children, ...props }, ref) => {\n    return (\n      <BaseSelect.Group ref={ref} className={clsx('ds-select__group', className)} {...props}>\n        {label && (\n          <BaseSelect.GroupLabel className=\"ds-select__group-label\">{label}</BaseSelect.GroupLabel>\n        )}\n        {children}\n      </BaseSelect.Group>\n    );\n  },\n);\n\nSelectGroup.displayName = 'SelectGroup';\n\n/* ============================================================================\n   SELECT SEPARATOR\n   ============================================================================ */\n\nexport const SelectSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return <div ref={ref} className={clsx('ds-select__separator', className)} {...props} />;\n});\n\nSelectSeparator.displayName = 'SelectSeparator';\n\n/* ============================================================================\n   ICONS\n   ============================================================================ */\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n","/* ============================================================================\n   MOTION TOKENS & FRAMER CONFIG\n   ============================================================================ */\n\n/**\n * Duration tokens (seconds) for Framer Motion\n */\nexport const DURATION = {\n  micro: 0.15, // 150ms\n  short: 0.25, // 250ms\n  medium: 0.5, // 500ms\n  long: 1.0, // 1000ms\n} as const;\n\n/**\n * Easing definitions (cubic-bezier arrays) for Framer Motion\n */\nexport const EASING = {\n  standard: [0.16, 1, 0.3, 1], // Smooth, premium feel\n  emphasis: [0.34, 1.56, 0.64, 1], // Slight spring/overshoot\n  exit: [0.4, 0, 0.2, 1], // Quick, decisive exit\n  linear: [0, 0, 1, 1],\n} as const;\n\n/**\n * Standard transitions for Framer Motion\n */\nexport const TRANSITION = {\n  standard: {\n    duration: DURATION.medium,\n    ease: EASING.standard,\n  },\n  emphasis: {\n    duration: DURATION.medium,\n    ease: EASING.emphasis,\n  },\n  quick: {\n    duration: DURATION.short,\n    ease: EASING.standard,\n  },\n  spring: {\n    type: 'spring',\n    stiffness: 200,\n    damping: 20,\n  },\n} as const;\n\n/**\n * Layout Tokens\n */\nexport const DISTANCE = {\n  sm: 4,\n  md: 12,\n  lg: 24,\n  xl: 48,\n} as const;\n\n/**\n * Reusable Variants for Framer Motion\n */\nexport const VARIANTS = {\n  fadeIn: {\n    hidden: { opacity: 0 },\n    visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } },\n  },\n  fadeUp: {\n    hidden: { opacity: 0, y: 12 },\n    visible: { opacity: 1, y: 0, transition: { duration: DURATION.medium, ease: EASING.standard } },\n  },\n  fadeDown: {\n    hidden: { opacity: 0, y: -12 },\n    visible: { opacity: 1, y: 0, transition: { duration: DURATION.medium, ease: EASING.standard } },\n  },\n  scaleIn: {\n    hidden: { opacity: 0, scale: 0.95 },\n    visible: {\n      opacity: 1,\n      scale: 1,\n      transition: { duration: DURATION.short, ease: EASING.emphasis },\n    },\n  },\n  slideLeft: {\n    hidden: { opacity: 0, x: DISTANCE.lg },\n    visible: { opacity: 1, x: 0, transition: { duration: DURATION.medium, ease: EASING.standard } },\n  },\n  slideRight: {\n    hidden: { opacity: 0, x: -DISTANCE.lg },\n    visible: { opacity: 1, x: 0, transition: { duration: DURATION.medium, ease: EASING.standard } },\n  },\n  staggerContainer: {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.08,\n        delayChildren: 0.1,\n      },\n    },\n  },\n  pulse: {\n    hidden: { scale: 1 },\n    visible: {\n      scale: [1, 1.05, 1],\n      transition: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },\n    },\n  },\n  impact: {\n    hidden: { scale: 1 },\n    trigger: {\n      scale: [1, 0.95, 1.05, 1],\n      transition: { duration: 0.4, ease: 'backOut' },\n    },\n  },\n} as const;\n\n/** Stagger: eyebrow → title → subtitle → CTAs → media */\nexport const HERO_ENTRANCE = {\n  container: {\n    variants: {\n      hidden: { opacity: 1 },\n      visible: {\n        opacity: 1,\n        transition: {\n          staggerChildren: 0.12,\n          delayChildren: 0.05,\n        },\n      },\n    },\n  },\n  child: {\n    variants: VARIANTS.fadeUp,\n  },\n  delays: {\n    eyebrow: 0,\n    title: 0.05,\n    subtitle: 0.17,\n    cta: 0.29,\n    media: 0.41,\n  },\n} as const;\n\nexport const SECTION_REVEAL = {\n  container: {\n    variants: VARIANTS.staggerContainer,\n  },\n  content: {\n    variants: VARIANTS.fadeUp,\n  },\n  viewportMargin: '-15%' as const,\n} as const;\n\nexport const CARD_HOVER = {\n  rest: { y: 0, scale: 1 },\n  hover: {\n    y: -4,\n    scale: 1.01,\n    transition: { duration: DURATION.short, ease: EASING.standard },\n  },\n} as const;\n\nexport const PANEL_CROSSFADE = {\n  initial: { opacity: 0, y: 8 },\n  animate: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: DURATION.short, ease: EASING.standard },\n  },\n  exit: {\n    opacity: 0,\n    y: -8,\n    transition: { duration: DURATION.micro, ease: EASING.exit },\n  },\n} as const;\n\nexport const TAB_SLIDE = {\n  transition: TRANSITION.spring,\n  layout: true as const,\n} as const;\n\nexport const PRESETS = {\n  heroEntrance: HERO_ENTRANCE,\n  sectionReveal: SECTION_REVEAL,\n  cardHover: CARD_HOVER,\n  panelCrossfade: PANEL_CROSSFADE,\n  tabSlide: TAB_SLIDE,\n} as const;\n\nexport const REDUCED_VARIANTS = {\n  fadeOnly: {\n    hidden: { opacity: 0 },\n    visible: { opacity: 1, transition: { duration: DURATION.short } },\n  },\n  none: {\n    hidden: { opacity: 1 },\n    visible: { opacity: 1 },\n  },\n} as const;\n\nexport const REDUCED_PANEL_CROSSFADE = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1, transition: { duration: DURATION.micro } },\n  exit: { opacity: 0, transition: { duration: DURATION.micro } },\n} as const;\n\nexport type AnimationVariant = 'fadeIn' | 'fadeUp' | 'fadeDown' | 'scaleIn' | 'slideLeft' | 'slideRight';\n\nexport const VARIANT_MAP = {\n  fadeIn: VARIANTS.fadeIn,\n  fadeUp: VARIANTS.fadeUp,\n  fadeDown: VARIANTS.fadeDown,\n  scaleIn: VARIANTS.scaleIn,\n  slideLeft: VARIANTS.slideLeft,\n  slideRight: VARIANTS.slideRight,\n} satisfies Record<AnimationVariant, unknown>;\n\nexport const MOTION = {\n  DURATION,\n  EASING,\n  TRANSITION,\n  VARIANTS,\n  DISTANCE,\n  PRESETS,\n  REDUCED_VARIANTS,\n} as const;\n","export const COLORS = {\n  text: {\n    primary: 'var(--text-primary)',\n    secondary: 'var(--text-secondary)',\n    tertiary: 'var(--text-tertiary)',\n    disabled: 'var(--text-disabled)',\n  },\n  glass: {\n    base: 'var(--glass-base)',\n    baseHover: 'var(--glass-base-hover)',\n    baseActive: 'var(--glass-base-active)',\n    backdrop: 'var(--glass-backdrop)',\n  },\n  rim: {\n    top: 'var(--rim-light-top)',\n    bottom: 'var(--rim-light-bottom)',\n  },\n  brand: {\n    pink: 'var(--brand-pink)',\n    yellow: 'var(--brand-yellow)',\n    pinkGlow: 'var(--brand-pink-glow)',\n  },\n  status: {\n    success: 'var(--status-success)',\n    warning: 'var(--status-warning)',\n    error: 'var(--status-error)',\n    info: 'var(--status-info)',\n  },\n  button: {\n    primaryBg: 'var(--btn-primary-bg)',\n    primaryBgHover: 'var(--btn-primary-bg-hover)',\n    secondaryBg: 'var(--btn-secondary-bg)',\n    secondaryBgHover: 'var(--btn-secondary-bg-hover)',\n  },\n} as const;\n","export const SPACING = {\n  1: 'var(--space-1)',\n  2: 'var(--space-2)',\n  3: 'var(--space-3)',\n  4: 'var(--space-4)',\n  5: 'var(--space-5)',\n  6: 'var(--space-6)',\n  8: 'var(--space-8)',\n  10: 'var(--space-10)',\n  12: 'var(--space-12)',\n  16: 'var(--space-16)',\n  20: 'var(--space-20)',\n} as const;\n\nexport type SpacingToken = keyof typeof SPACING;\n","export const FONT_FAMILY = {\n  sans: 'var(--font-family)',\n  mono: 'var(--font-family-mono)',\n} as const;\n\nexport const FONT_SIZE = {\n  xs: 'var(--font-size-xs)',\n  sm: 'var(--font-size-sm)',\n  base: 'var(--font-size-base)',\n  lg: 'var(--font-size-lg)',\n  xl: 'var(--font-size-xl)',\n  '2xl': 'var(--font-size-2xl)',\n  '3xl': 'var(--font-size-3xl)',\n} as const;\n\nexport const FONT_WEIGHT = {\n  normal: 'var(--font-weight-normal)',\n  medium: 'var(--font-weight-medium)',\n  semibold: 'var(--font-weight-semibold)',\n  bold: 'var(--font-weight-bold)',\n} as const;\n\nexport const LINE_HEIGHT = {\n  tight: 'var(--line-height-tight)',\n  normal: 'var(--line-height-normal)',\n  relaxed: 'var(--line-height-relaxed)',\n} as const;\n","export const RADIUS = {\n  panel: 'var(--radius-panel)',\n  card: 'var(--radius-card)',\n  button: 'var(--radius-button)',\n  badge: 'var(--radius-badge)',\n  pill: 'var(--radius-pill)',\n} as const;\n\nexport type RadiusToken = keyof typeof RADIUS;\n","export const SHADOWS = {\n  glass: {\n    outer: 'var(--glass-shadow-outer)',\n    inner: 'var(--glass-shadow-inner)',\n    combined: 'var(--glass-shadow-combined)',\n    elevated: 'var(--glass-shadow-elevated)',\n    elevatedCombined: 'var(--glass-shadow-elevated-combined)',\n  },\n  interactive: {\n    rest: 'var(--shadow-interactive-rest)',\n    restSubtle: 'var(--shadow-interactive-rest-subtle)',\n    restLight: 'var(--shadow-interactive-rest-light)',\n    hover: 'var(--shadow-interactive-hover)',\n    hoverSubtle: 'var(--shadow-interactive-hover-subtle)',\n    active: 'var(--shadow-interactive-active)',\n  },\n} as const;\n","export const Z_INDEX = {\n  void: 'var(--z-void)',\n  glassPanel: 'var(--z-glass-panel)',\n  ornament: 'var(--z-ornament)',\n  dropdown: 'var(--z-dropdown)',\n  modalBackdrop: 'var(--z-modal-backdrop)',\n  modal: 'var(--z-modal)',\n  tooltip: 'var(--z-tooltip)',\n} as const;\n\nexport type ZIndexToken = keyof typeof Z_INDEX;\n","/* ============================================================================\n   BREAKPOINT TOKENS\n   ============================================================================ */\n\nexport const BREAKPOINTS = {\n  '3xs': 320,\n  '2xs': 375,\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n  '3xl': 1920,\n  '4xl': 2560,\n  '5xl': 3840,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\nexport const MEDIA_QUERIES = {\n  '3xs': `(min-width: ${BREAKPOINTS['3xs']}px)`,\n  '2xs': `(min-width: ${BREAKPOINTS['2xs']}px)`,\n  xs: `(min-width: ${BREAKPOINTS.xs}px)`,\n  sm: `(min-width: ${BREAKPOINTS.sm}px)`,\n  md: `(min-width: ${BREAKPOINTS.md}px)`,\n  lg: `(min-width: ${BREAKPOINTS.lg}px)`,\n  xl: `(min-width: ${BREAKPOINTS.xl}px)`,\n  '2xl': `(min-width: ${BREAKPOINTS['2xl']}px)`,\n  '3xl': `(min-width: ${BREAKPOINTS['3xl']}px)`,\n  '4xl': `(min-width: ${BREAKPOINTS['4xl']}px)`,\n  '5xl': `(min-width: ${BREAKPOINTS['5xl']}px)`,\n} as const;\n"]}

package/dist/{chunk-7UZ5DETZ.js → chunk-MBAG654R.js}

@@ -1,6 +1,5 @@
-import React2, { createContext, useId, useContext, useState, useEffect, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { createContext, useState, useEffect, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 // src/theme/AppearanceProvider.tsx
 
@@ -331,218 +330,7 @@ function initializeAppearance(settings) {
   const merged = { ...loaded, ...settings };
   applySettings(merged);
 }
-var AppearancePanel = React2.forwardRef(
-  ({ className, labels: l }, ref) => {
-    const {
-      theme,
-      brand,
-      navPlacement,
-      density,
-      radius,
-      customColor,
-      setTheme,
-      setBrand,
-      setNavPlacement,
-      setDensity,
-      setRadius,
-      setCustomColor,
-      resetToDefaults
-    } = useAppearance();
-    const colorPickerId = useId();
-    const themeOptions = [
-      { value: "light", label: l?.themeLight ?? "Light" },
-      { value: "light-contrast", label: l?.themeLightContrast ?? "Light (High Contrast)" },
-      { value: "dark", label: l?.themeDark ?? "Dark" },
-      { value: "dark-contrast", label: l?.themeDarkContrast ?? "Dark (High Contrast)" }
-    ];
-    const brandOptions = [
-      { value: "default", label: l?.brandDefault ?? "Default", description: l?.brandDefaultDescription ?? "Warm Intelligence" },
-      { value: "salesmind", label: l?.brandSalesmind ?? "SalesMind", description: l?.brandSalesmindDescription ?? "Pink-red + Gold" },
-      { value: "custom", label: l?.brandCustom ?? "Custom", description: l?.brandCustomDescription ?? "Your color" }
-    ];
-    const navOptions = [
-      { value: "left", label: l?.navLeft ?? "Left Sidebar" },
-      { value: "right", label: l?.navRight ?? "Right Sidebar" },
-      { value: "bottom", label: l?.navBottom ?? "Bottom Tabs" }
-    ];
-    const densityOptions = [
-      { value: "comfortable", label: l?.densityComfortable ?? "Comfortable", description: l?.densityComfortableDescription ?? "Generous spacing" },
-      { value: "compact", label: l?.densityCompact ?? "Compact", description: l?.densityCompactDescription ?? "Higher density" }
-    ];
-    const radiusOptions = [
-      { value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
-      { value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
-    ];
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx("ds-appearance-panel", className), children: [
-      /* @__PURE__ */ jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
-      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
-        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: clsx(
-              "ds-appearance-panel__option",
-              theme === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "theme",
-                  value: option.value,
-                  checked: theme === option.value,
-                  onChange: () => setTheme(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.brandHeading ?? "Brand" }),
-        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: clsx(
-              "ds-appearance-panel__option",
-              brand === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "brand",
-                  value: option.value,
-                  checked: brand === option.value,
-                  onChange: () => setBrand(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
-                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
-                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) }),
-        brand === "custom" && /* @__PURE__ */ jsxs("div", { className: "ds-appearance-panel__color-picker", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: colorPickerId, className: "ds-appearance-panel__color-label", children: l?.accentColorLabel ?? "Accent Color" }),
-          /* @__PURE__ */ jsxs("div", { className: "ds-appearance-panel__color-input-wrapper", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                id: colorPickerId,
-                value: customColor,
-                onChange: (e) => setCustomColor(e.target.value),
-                className: "ds-appearance-panel__color-input"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__color-value", children: customColor.toUpperCase() })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.densityHeading ?? "Density" }),
-        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: clsx(
-              "ds-appearance-panel__option",
-              "ds-appearance-panel__option--toggle",
-              density === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "density",
-                  value: option.value,
-                  checked: density === option.value,
-                  onChange: () => setDensity(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
-                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
-                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.geometryHeading ?? "Geometry" }),
-        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: clsx(
-              "ds-appearance-panel__option",
-              "ds-appearance-panel__option--toggle",
-              radius === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "radius",
-                  value: option.value,
-                  checked: radius === option.value,
-                  onChange: () => setRadius(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
-                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
-                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
-        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.navHeading ?? "Navigation Layout" }),
-        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: clsx(
-              "ds-appearance-panel__option",
-              navPlacement === option.value && "ds-appearance-panel__option--active"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: "nav",
-                  value: option.value,
-                  checked: navPlacement === option.value,
-                  onChange: () => setNavPlacement(option.value),
-                  className: "ds-appearance-panel__radio"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
-            ]
-          },
-          option.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: resetToDefaults, className: "ds-appearance-panel__reset", children: l?.resetLabel ?? "Reset to Defaults" })
-    ] });
-  }
-);
-AppearancePanel.displayName = "AppearancePanel";
 
-export { AppearancePanel, AppearanceProvider, accentForegroundRgb, hexToRgb, initializeAppearance, prefersReducedMotion, relativeLuminance2 as relativeLuminance, useAppearance };
+export { AppearanceProvider, accentForegroundRgb, hexToRgb, initializeAppearance, prefersReducedMotion, relativeLuminance2 as relativeLuminance, useAppearance };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-7UZ5DETZ.js.map
+//# sourceMappingURL=chunk-MBAG654R.js.map

package/dist/chunk-MBAG654R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/AppearanceProvider.tsx","../src/theme/ensure-readable-contrast.ts"],"names":["p","q","relativeLuminance"],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';\nimport { ensureReadableContrast } from './ensure-readable-contrast';\n\n/* ============================================================================\n   APPEARANCE TYPES\n   ============================================================================ */\n\nexport type Theme = 'light' | 'light-contrast' | 'dark' | 'dark-contrast';\nexport type Brand = 'default' | 'salesmind' | 'custom';\nexport type NavPlacement = 'left' | 'right' | 'bottom';\nexport type Density = 'comfortable' | 'compact';\nexport type Radius = 'playful' | 'sharp';\n\nexport interface AppearanceSettings {\n  theme: Theme;\n  brand: Brand;\n  navPlacement: NavPlacement;\n  density: Density;\n  radius: Radius;\n  /** Hex color for custom brand (e.g., \"#ff2d8a\") */\n  customColor: string;\n}\n\nexport interface AppearanceContextValue extends AppearanceSettings {\n  setTheme: (theme: Theme) => void;\n  setBrand: (brand: Brand) => void;\n  setNavPlacement: (nav: NavPlacement) => void;\n  setDensity: (density: Density) => void;\n  setRadius: (radius: Radius) => void;\n  setCustomColor: (color: string) => void;\n  setAppearance: (settings: Partial<AppearanceSettings>) => void;\n  resetToDefaults: () => void;\n}\n\n/* ============================================================================\n   CONSTANTS\n   ============================================================================ */\n\nconst STORAGE_KEY = 'void-appearance-settings';\n\nconst BRAND_PINK_HEX: Record<string, string> = {\n  default: '#f97316',\n  salesmind: '#ff005a',\n};\n\nconst DARK_SURFACE_HEX = '#08040a';\n\nconst DEFAULT_SETTINGS: AppearanceSettings = {\n  theme: 'dark',\n  brand: 'default',\n  navPlacement: 'left',\n  density: 'comfortable',\n  radius: 'playful',\n  customColor: '#f97316', // Default orange as fallback\n};\n\n/* ============================================================================\n   UTILITIES\n   ============================================================================ */\n\n/** Detect system color scheme preference */\n\n\n/** Convert hex color to RGB triplet string (e.g., \"255, 45, 138\") */\nfunction hexToRgb(hex: string): string {\n  // Remove # if present\n  const cleanHex = hex.replace(/^#/, '');\n\n  // Parse hex values\n  const r = parseInt(cleanHex.substring(0, 2), 16);\n  const g = parseInt(cleanHex.substring(2, 4), 16);\n  const b = parseInt(cleanHex.substring(4, 6), 16);\n\n  // Validate parsed values\n  if (isNaN(r) || isNaN(g) || isNaN(b)) {\n    // Fallback to default orange if parsing fails\n    return '249, 115, 22';\n  }\n\n  return `${r}, ${g}, ${b}`;\n}\n\n/**\n * Compute relative luminance of an RGB triplet using the WCAG 2.1 formula.\n * Returns a value between 0 (black) and 1 (white).\n * @see https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n */\nfunction relativeLuminance(r: number, g: number, b: number): number {\n  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map((c) =>\n    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n  );\n  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n}\n\n/**\n * Determine whether text on an accent-colored background should be black or white.\n * Returns \"0, 0, 0\" for light accents and \"255, 255, 255\" for dark accents.\n * Uses WCAG 2.1 relative luminance with a 0.179 threshold (equivalent to ~4.5:1\n * contrast ratio against white).\n */\nfunction accentForegroundRgb(hex: string): string {\n  const cleanHex = hex.replace(/^#/, '');\n  const r = parseInt(cleanHex.substring(0, 2), 16);\n  const g = parseInt(cleanHex.substring(2, 4), 16);\n  const b = parseInt(cleanHex.substring(4, 6), 16);\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) {\n    return '255, 255, 255'; // Fallback: white text\n  }\n\n  return relativeLuminance(r, g, b) > 0.179 ? '0, 0, 0' : '255, 255, 255';\n}\n\n/** Generate a complementary/secondary color from primary */\nfunction generateSecondaryColor(hex: string): string {\n  const cleanHex = hex.replace(/^#/, '');\n  const r = parseInt(cleanHex.substring(0, 2), 16);\n  const g = parseInt(cleanHex.substring(2, 4), 16);\n  const b = parseInt(cleanHex.substring(4, 6), 16);\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) {\n    return '255, 208, 0'; // Default yellow\n  }\n\n  // Shift hue by ~60 degrees for a harmonious secondary\n  // Simple approach: rotate RGB channels and boost brightness\n  const secondary = {\n    r: Math.min(255, g + 50),\n    g: Math.min(255, b + 100),\n    b: Math.min(255, r),\n  };\n\n  return `${secondary.r}, ${secondary.g}, ${secondary.b}`;\n}\n\n/** Load settings from localStorage */\nfunction loadSettings(): AppearanceSettings {\n  if (typeof window === 'undefined') return DEFAULT_SETTINGS;\n\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY);\n    if (stored) {\n      const parsed = JSON.parse(stored) as Partial<AppearanceSettings>;\n      return {\n        theme: parsed.theme || DEFAULT_SETTINGS.theme,\n        brand: parsed.brand || DEFAULT_SETTINGS.brand,\n        navPlacement: parsed.navPlacement || DEFAULT_SETTINGS.navPlacement,\n        density: parsed.density || DEFAULT_SETTINGS.density,\n        radius: parsed.radius || DEFAULT_SETTINGS.radius,\n        customColor: parsed.customColor || DEFAULT_SETTINGS.customColor,\n      };\n    }\n  } catch {\n    // Ignore parse errors\n  }\n\n  // Use default dark preference for initial theme if no stored value\n  return {\n    ...DEFAULT_SETTINGS,\n    theme: 'dark',\n  };\n}\n\n/** Save settings to localStorage */\nfunction saveSettings(settings: AppearanceSettings): void {\n  if (typeof window === 'undefined') return;\n\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n  } catch {\n    // Ignore storage errors (e.g., private browsing)\n  }\n}\n\n/** Apply settings to document.documentElement */\nfunction applySettings(settings: AppearanceSettings): void {\n  if (typeof document === 'undefined') return;\n\n  const root = document.documentElement;\n\n  // Apply data attributes\n  root.setAttribute('data-theme', settings.theme);\n  root.setAttribute('data-brand', settings.brand);\n  root.setAttribute('data-nav', settings.navPlacement);\n  root.setAttribute('data-density', settings.density);\n  root.setAttribute('data-radius', settings.radius);\n\n  // Handle custom brand RGB injection\n  if (settings.brand === 'custom') {\n    const primaryRgb = hexToRgb(settings.customColor);\n    const secondaryRgb = generateSecondaryColor(settings.customColor);\n    const foregroundRgb = accentForegroundRgb(settings.customColor);\n\n    root.style.setProperty('--custom-accent-rgb', primaryRgb);\n    root.style.setProperty('--custom-accent2-rgb', secondaryRgb);\n    root.style.setProperty('--custom-accent-fg-rgb', foregroundRgb);\n  } else {\n    root.style.removeProperty('--custom-accent-rgb');\n    root.style.removeProperty('--custom-accent2-rgb');\n    root.style.removeProperty('--custom-accent-fg-rgb');\n  }\n\n  const brandPinkHex =\n    settings.brand === 'custom'\n      ? settings.customColor\n      : BRAND_PINK_HEX[settings.brand] ?? BRAND_PINK_HEX.default;\n\n  root.style.setProperty(\n    '--brand-pink-readable',\n    ensureReadableContrast(brandPinkHex, DARK_SURFACE_HEX),\n  );\n}\n\n/** Check if user prefers reduced motion */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/* ============================================================================\n   CONTEXT\n   ============================================================================ */\n\nconst AppearanceContext = createContext<AppearanceContextValue | null>(null);\n\n/* ============================================================================\n   PROVIDER COMPONENT\n   ============================================================================ */\n\nexport interface AppearanceProviderProps {\n  /** Initial settings (overrides localStorage) */\n  initialSettings?: Partial<AppearanceSettings>;\n  /** Disable localStorage persistence */\n  disablePersistence?: boolean;\n  /** Children */\n  children: React.ReactNode;\n}\n\nexport function AppearanceProvider({\n  initialSettings,\n  disablePersistence = false,\n  children,\n}: AppearanceProviderProps) {\n  // Start with deterministic defaults to avoid SSR/client hydration mismatch.\n  // localStorage is read after mount in the effect below.\n  const [settings, setSettings] = useState<AppearanceSettings>(() => ({\n    ...DEFAULT_SETTINGS,\n    ...initialSettings,\n  }));\n\n  // After hydration, sync with localStorage (runs once on mount)\n  const [hydrated, setHydrated] = useState(false);\n  useEffect(() => {\n    if (!disablePersistence) {\n      const loaded = loadSettings();\n      setSettings({\n        ...loaded,\n        // initialSettings still take priority over localStorage\n        ...initialSettings,\n      });\n    }\n    setHydrated(true);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Apply settings to DOM whenever they change\n  useEffect(() => {\n    applySettings(settings);\n    if (!disablePersistence && hydrated) {\n      saveSettings(settings);\n    }\n  }, [settings, disablePersistence, hydrated]);\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      // Only auto-switch if user hasn't explicitly set a contrast variant\n      setSettings((prev) => {\n        if (prev.theme === 'light-contrast' || prev.theme === 'dark-contrast') {\n          return prev; // Don't override contrast preferences\n        }\n        return {\n          ...prev,\n          theme: e.matches ? 'light' : 'dark',\n        };\n      });\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, []);\n\n  // Listen for reduced motion preference changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Initial check is handled by CSS media queries in tokens.css\n    // This effect ensures we respect the preference dynamically\n    const handleChange = () => {\n      // Re-apply settings to ensure any motion-dependent values are updated\n      applySettings(settings);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [settings]);\n\n  const setTheme = useCallback((theme: Theme) => {\n    setSettings((prev) => ({ ...prev, theme }));\n  }, []);\n\n  const setBrand = useCallback((brand: Brand) => {\n    setSettings((prev) => ({ ...prev, brand }));\n  }, []);\n\n  const setNavPlacement = useCallback((navPlacement: NavPlacement) => {\n    setSettings((prev) => ({ ...prev, navPlacement }));\n  }, []);\n\n  const setDensity = useCallback((density: Density) => {\n    setSettings((prev) => ({ ...prev, density }));\n  }, []);\n\n  const setRadius = useCallback((radius: Radius) => {\n    setSettings((prev) => ({ ...prev, radius }));\n  }, []);\n\n  const setCustomColor = useCallback((customColor: string) => {\n    setSettings((prev) => ({ ...prev, customColor, brand: 'custom' }));\n  }, []);\n\n  const setAppearance = useCallback((partial: Partial<AppearanceSettings>) => {\n    setSettings((prev) => ({ ...prev, ...partial }));\n  }, []);\n\n  const resetToDefaults = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n\n  const contextValue: AppearanceContextValue = {\n    ...settings,\n    setTheme,\n    setBrand,\n    setNavPlacement,\n    setDensity,\n    setRadius,\n    setCustomColor,\n    setAppearance,\n    resetToDefaults,\n  };\n\n  return <AppearanceContext.Provider value={contextValue}>{children}</AppearanceContext.Provider>;\n}\n\n/* ============================================================================\n   HOOK\n   ============================================================================ */\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useAppearance(): AppearanceContextValue {\n  const context = useContext(AppearanceContext);\n\n  if (!context) {\n    throw new Error('useAppearance must be used within an AppearanceProvider');\n  }\n\n  return context;\n}\n\n/* ============================================================================\n   STANDALONE UTILITY (for use outside React, e.g., SSR or initial load)\n   ============================================================================ */\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function initializeAppearance(settings?: Partial<AppearanceSettings>): void {\n  const loaded = loadSettings();\n  const merged = { ...loaded, ...settings };\n  applySettings(merged);\n}\n\n/* ============================================================================\n   UTILITY EXPORTS\n   ============================================================================ */\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { hexToRgb, relativeLuminance, accentForegroundRgb, prefersReducedMotion };\n","/**\n * Derive a readable accent text color that meets WCAG AA contrast requirements.\n *\n * Given an accent color intended for small text (e.g., section eyebrow labels),\n * this module computes a lightness-adjusted variant that satisfies a minimum\n * contrast ratio against a given surface color. Hue and saturation are preserved\n * so the result stays recognisably \"on brand\".\n *\n * The WCAG math here intentionally matches `relativeLuminance` in\n * `AppearanceProvider.tsx` (same constants, same 0.03928 threshold) so that\n * contrast decisions are consistent across the design system.\n */\n\n/* ============================================================================\n   COLOR PARSING\n   ============================================================================ */\n\n/** Parse a 3- or 6-character hex string into an RGB triplet, or null on failure. */\nexport function parseHex(hex: string): [number, number, number] | null {\n  const clean = hex.replace(/^#/, '');\n\n  let r: number, g: number, b: number;\n\n  if (clean.length === 3) {\n    r = parseInt(clean[0] + clean[0], 16);\n    g = parseInt(clean[1] + clean[1], 16);\n    b = parseInt(clean[2] + clean[2], 16);\n  } else if (clean.length === 6) {\n    r = parseInt(clean.substring(0, 2), 16);\n    g = parseInt(clean.substring(2, 4), 16);\n    b = parseInt(clean.substring(4, 6), 16);\n  } else {\n    return null;\n  }\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;\n\n  return [r, g, b];\n}\n\n/** Format an RGB triplet as a 6-character hex string with `#` prefix. */\nexport function toHex(r: number, g: number, b: number): string {\n  const clamp = (n: number) => Math.max(0, Math.min(255, Math.round(n)));\n  return (\n    '#' +\n    [clamp(r), clamp(g), clamp(b)]\n      .map((c) => c.toString(16).padStart(2, '0'))\n      .join('')\n  );\n}\n\n/* ============================================================================\n   HSL CONVERSION\n   ============================================================================ */\n\n/** Convert an RGB triplet (0–255 each) to HSL (h: 0–360, s/l: 0–1). */\nexport function rgbToHsl(\n  r: number,\n  g: number,\n  b: number,\n): [number, number, number] {\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const l = (max + min) / 2;\n\n  if (max === min) return [0, 0, l]; // achromatic\n\n  const d = max - min;\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n  let h: number;\n  if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;\n  else if (max === gn) h = ((bn - rn) / d + 2) / 6;\n  else h = ((rn - gn) / d + 4) / 6;\n\n  return [h * 360, s, l];\n}\n\n/** Convert HSL (h: 0–360, s/l: 0–1) back to an RGB triplet (0–255 each). */\nexport function hslToRgb(\n  h: number,\n  s: number,\n  l: number,\n): [number, number, number] {\n  const hNorm = ((h % 360) + 360) % 360; // normalise negative hues\n\n  if (s === 0) {\n    const v = Math.round(l * 255);\n    return [v, v, v]; // achromatic\n  }\n\n  const hue2rgb = (p: number, q: number, t: number) => {\n    if (t < 0) t += 1;\n    if (t > 1) t -= 1;\n    if (t < 1 / 6) return p + (q - p) * 6 * t;\n    if (t < 1 / 2) return q;\n    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n    return p;\n  };\n\n  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n  const p = 2 * l - q;\n  const hFrac = hNorm / 360;\n\n  return [\n    Math.round(hue2rgb(p, q, hFrac + 1 / 3) * 255),\n    Math.round(hue2rgb(p, q, hFrac) * 255),\n    Math.round(hue2rgb(p, q, hFrac - 1 / 3) * 255),\n  ];\n}\n\n/* ============================================================================\n   WCAG CONTRAST\n   ============================================================================ */\n\n/**\n * Compute relative luminance using the WCAG 2.1 formula.\n *\n * Intentionally identical to the implementation in AppearanceProvider.tsx\n * so that all contrast decisions in the DS stay consistent.\n *\n * @see https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n */\nexport function relativeLuminance(r: number, g: number, b: number): number {\n  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map((c) =>\n    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n  );\n  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n}\n\n/**\n * WCAG 2.1 contrast ratio between two RGB triplets.\n * Result ranges from 1 (identical) to 21 (black vs white).\n */\nexport function contrastRatio(\n  fg: [number, number, number],\n  bg: [number, number, number],\n): number {\n  const l1 = relativeLuminance(...fg);\n  const l2 = relativeLuminance(...bg);\n  const lighter = Math.max(l1, l2);\n  const darker = Math.min(l1, l2);\n  return (lighter + 0.05) / (darker + 0.05);\n}\n\n/* ============================================================================\n   MAIN: DERIVE READABLE ACCENT COLOR\n   ============================================================================ */\n\n/** Default minimum contrast ratio — WCAG AA for small text. */\nconst DEFAULT_MIN_RATIO = 4.5;\n\n/** Maximum binary-search iterations (convergence is fast; 25 is generous). */\nconst MAX_ITERATIONS = 25;\n\n/**\n * Return an accent color adjusted to meet a minimum contrast ratio against\n * the given surface color. The hue and saturation of the original color are\n * preserved; only lightness is increased (for dark surfaces) or decreased\n * (for light surfaces) until the target ratio is reached.\n *\n * If the original color already satisfies the ratio, it is returned as-is.\n * If the input is malformed, `fallbackHex` (default: the original input) is\n * returned so consumers degrade gracefully.\n *\n * @param accentHex   Foreground accent color as a 3- or 6-char hex string\n * @param surfaceHex  Background surface color to contrast against\n * @param minRatio    Minimum WCAG contrast ratio (default 4.5 for AA small text)\n * @returns           Adjusted hex color string\n */\nexport function ensureReadableContrast(\n  accentHex: string,\n  surfaceHex: string,\n  minRatio = DEFAULT_MIN_RATIO,\n): string {\n  const fg = parseHex(accentHex);\n  const bg = parseHex(surfaceHex);\n\n  // Guard: if either input is unparseable, return the original accent unchanged.\n  if (!fg || !bg) return accentHex;\n\n  // Fast path: already meets contrast — no adjustment needed.\n  if (contrastRatio(fg, bg) >= minRatio) return accentHex;\n\n  const [h, s] = rgbToHsl(...fg);\n  const bgLuminance = relativeLuminance(...bg);\n\n  // Determine adjustment direction:\n  // On a dark surface (low luminance) we lighten; on a light surface we darken.\n  const shouldLighten = bgLuminance < 0.5;\n\n  const currentLightness = rgbToHsl(...fg)[2];\n  let lo: number, hi: number;\n  if (shouldLighten) {\n    lo = currentLightness;\n    hi = 1.0;\n  } else {\n    lo = 0;\n    hi = currentLightness;\n  }\n\n  let bestHex = accentHex;\n\n  for (let i = 0; i < MAX_ITERATIONS; i++) {\n    const mid = (lo + hi) / 2;\n    const [rr, gg, bb] = hslToRgb(h, s, mid);\n    const ratio = contrastRatio([rr, gg, bb], bg);\n\n    if (ratio >= minRatio) {\n      bestHex = toHex(rr, gg, bb);\n      if (shouldLighten) hi = mid;\n      else lo = mid;\n    } else {\n      if (shouldLighten) lo = mid;\n      else hi = mid;\n    }\n  }\n\n  return bestHex;\n}\n"]}

package/dist/chunk-OMP6FAZ6.cjs

@@ -0,0 +1,183 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/Sidebar/Sidebar.tsx
+var Sidebar = React__default.default.forwardRef(
+  ({ position = "left", width = 280, collapsed = false, className, children }, ref) => {
+    const style = {
+      "--sidebar-width": typeof width === "number" ? `${width}px` : width
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "aside",
+      {
+        ref,
+        className: clsx__default.default(
+          "ds-sidebar",
+          `ds-sidebar--${position}`,
+          collapsed && "ds-sidebar--collapsed",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-sidebar__content", children })
+      }
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+var SidebarSection = React__default.default.forwardRef(
+  ({ title, className, children }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx__default.default("ds-sidebar__section", className), children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-sidebar__section-title", children: title }),
+      children
+    ] });
+  }
+);
+SidebarSection.displayName = "SidebarSection";
+var SidebarItem = React__default.default.forwardRef(
+  ({ active = false, icon, onClick, className, children }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        className: clsx__default.default("ds-sidebar__item", active && "ds-sidebar__item--active", className),
+        onClick,
+        type: "button",
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-sidebar__item-icon", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-sidebar__item-label", children })
+        ]
+      }
+    );
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+var HomeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9,22 9,12 15,12 15,22" })
+] });
+var ChartIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })
+] });
+var UsersIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+] });
+var SettingsIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+] });
+var DEFAULT_NAV_ITEMS = [
+  { key: "dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(HomeIcon, {}) },
+  { key: "analytics", label: "Analytics", icon: /* @__PURE__ */ jsxRuntime.jsx(ChartIcon, {}) },
+  { key: "contacts", label: "Contacts", icon: /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, {}) },
+  { key: "settings", label: "Settings", icon: /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon, {}) }
+];
+function getNavFromDocument() {
+  if (typeof document === "undefined") return "left";
+  const nav = document.documentElement.getAttribute("data-nav");
+  if (nav === "left" || nav === "right" || nav === "bottom") {
+    return nav;
+  }
+  return "left";
+}
+var Shell = React__default.default.forwardRef(
+  ({
+    layout,
+    className,
+    children,
+    navItems = DEFAULT_NAV_ITEMS,
+    activeNav = "dashboard",
+    onNavChange,
+    systemSectionTitle = "System"
+  }, ref) => {
+    const [computedLayout, setComputedLayout] = React.useState(
+      layout || getNavFromDocument()
+    );
+    React.useEffect(() => {
+      if (layout) {
+        setComputedLayout(layout);
+        return;
+      }
+      if (typeof document === "undefined") return;
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && mutation.attributeName === "data-nav") {
+            setComputedLayout(getNavFromDocument());
+          }
+        });
+      });
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-nav"]
+      });
+      setComputedLayout(getNavFromDocument());
+      return () => observer.disconnect();
+    }, [layout]);
+    const handleNavClick = (key) => {
+      onNavChange?.(key);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx__default.default("ds-shell", `ds-shell--${computedLayout}`, className),
+        "data-shell-layout": computedLayout,
+        children: [
+          (computedLayout === "left" || computedLayout === "right") && /* @__PURE__ */ jsxRuntime.jsxs(Sidebar, { position: computedLayout, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SidebarSection, { children: navItems.slice(0, 3).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarItem,
+              {
+                icon: item.icon,
+                active: activeNav === item.key,
+                onClick: () => handleNavClick(item.key),
+                children: item.label
+              },
+              item.key
+            )) }),
+            navItems.length > 3 && /* @__PURE__ */ jsxRuntime.jsx(SidebarSection, { title: systemSectionTitle, children: navItems.slice(3).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarItem,
+              {
+                icon: item.icon,
+                active: activeNav === item.key,
+                onClick: () => handleNavClick(item.key),
+                children: item.label
+              },
+              item.key
+            )) })
+          ] }),
+          computedLayout === "bottom" && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "ds-shell__tab-bar", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: clsx__default.default("ds-shell__tab-item", activeNav === item.key && "ds-shell__tab-item--active"),
+              onClick: () => handleNavClick(item.key),
+              "aria-label": item.label,
+              children: item.icon
+            },
+            item.key
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx("main", { className: "ds-shell__content", children })
+        ]
+      }
+    );
+  }
+);
+Shell.displayName = "Shell";
+
+exports.Shell = Shell;
+exports.Sidebar = Sidebar;
+exports.SidebarItem = SidebarItem;
+exports.SidebarSection = SidebarSection;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-OMP6FAZ6.cjs.map

package/dist/chunk-OMP6FAZ6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Sidebar/Sidebar.tsx","../src/components/Shell/Shell.tsx"],"names":["React","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport './Sidebar.css';\n\nexport interface SidebarProps {\n  /** Position of the sidebar */\n  position?: 'left' | 'right';\n  /** Width of the sidebar */\n  width?: number | string;\n  /** Whether the sidebar is collapsed */\n  collapsed?: boolean;\n  /** Custom class name */\n  className?: string;\n  /** Child content */\n  children?: React.ReactNode;\n}\n\n/**\n * Sidebar — Level 1 Glass Panel\n *\n * A floating sidebar that maintains 24px minimum distance from viewport edges.\n * Uses Signature Glass treatment with full optical stack.\n */\nexport const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(\n  ({ position = 'left', width = 280, collapsed = false, className, children }, ref) => {\n    const style: React.CSSProperties = {\n      '--sidebar-width': typeof width === 'number' ? `${width}px` : width,\n    } as React.CSSProperties;\n\n    return (\n      <aside\n        ref={ref}\n        className={clsx(\n          'ds-sidebar',\n          `ds-sidebar--${position}`,\n          collapsed && 'ds-sidebar--collapsed',\n          className,\n        )}\n        style={style}\n      >\n        <div className=\"ds-sidebar__content\">{children}</div>\n      </aside>\n    );\n  },\n);\n\nSidebar.displayName = 'Sidebar';\n\n/* Sidebar Section */\nexport interface SidebarSectionProps {\n  title?: string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport const SidebarSection = React.forwardRef<HTMLDivElement, SidebarSectionProps>(\n  ({ title, className, children }, ref) => {\n    return (\n      <div ref={ref} className={clsx('ds-sidebar__section', className)}>\n        {title && <h3 className=\"ds-sidebar__section-title\">{title}</h3>}\n        {children}\n      </div>\n    );\n  },\n);\n\nSidebarSection.displayName = 'SidebarSection';\n\n/* Sidebar Item */\nexport interface SidebarItemProps {\n  /** Whether this item is active */\n  active?: boolean;\n  /** Icon element */\n  icon?: React.ReactNode;\n  /** Click handler */\n  onClick?: () => void;\n  /** Custom class name */\n  className?: string;\n  /** Child content */\n  children?: React.ReactNode;\n}\n\nexport const SidebarItem = React.forwardRef<HTMLButtonElement, SidebarItemProps>(\n  ({ active = false, icon, onClick, className, children }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx('ds-sidebar__item', active && 'ds-sidebar__item--active', className)}\n        onClick={onClick}\n        type=\"button\"\n      >\n        {icon && <span className=\"ds-sidebar__item-icon\">{icon}</span>}\n        <span className=\"ds-sidebar__item-label\">{children}</span>\n      </button>\n    );\n  },\n);\n\nSidebarItem.displayName = 'SidebarItem';\n","import React, { useEffect, useState } from 'react';\nimport clsx from 'clsx';\nimport { Sidebar, SidebarSection, SidebarItem } from '../Sidebar/Sidebar';\nimport './Shell.css';\n\n// Icons\nconst HomeIcon = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\n    <polyline points=\"9,22 9,12 15,12 15,22\" />\n  </svg>\n);\nconst ChartIcon = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\" />\n    <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\" />\n    <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\" />\n  </svg>\n);\nconst UsersIcon = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n    <circle cx=\"9\" cy=\"7\" r=\"4\" />\n    <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n    <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n  </svg>\n);\nconst SettingsIcon = () => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\" />\n  </svg>\n);\n\nimport type { NavPlacement } from '../../theme/AppearanceProvider';\n\nexport interface ShellProps {\n  /**\n   * Navigation placement.\n   * If undefined, reads from document.documentElement.dataset.nav\n   */\n  layout?: NavPlacement;\n  /** Custom class name */\n  className?: string;\n  /** Content */\n  children?: React.ReactNode;\n  /** Navigation items (optional - uses defaults if not provided) */\n  navItems?: NavItem[];\n  /** Active nav item key */\n  activeNav?: string;\n  /** Nav item click handler */\n  onNavChange?: (key: string) => void;\n  /** Title for the \"System\" sidebar section when navItems.length > 3. @default \"System\" */\n  systemSectionTitle?: string;\n}\n\nexport interface NavItem {\n  key: string;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst DEFAULT_NAV_ITEMS: NavItem[] = [\n  { key: 'dashboard', label: 'Dashboard', icon: <HomeIcon /> },\n  { key: 'analytics', label: 'Analytics', icon: <ChartIcon /> },\n  { key: 'contacts', label: 'Contacts', icon: <UsersIcon /> },\n  { key: 'settings', label: 'Settings', icon: <SettingsIcon /> },\n];\n\n/**\n * Read data-nav from HTML element\n */\nfunction getNavFromDocument(): NavPlacement {\n  if (typeof document === 'undefined') return 'left';\n  const nav = document.documentElement.getAttribute('data-nav');\n  if (nav === 'left' || nav === 'right' || nav === 'bottom') {\n    return nav;\n  }\n  return 'left';\n}\n\nexport const Shell = React.forwardRef<HTMLDivElement, ShellProps>(\n  (\n    {\n      layout,\n      className,\n      children,\n      navItems = DEFAULT_NAV_ITEMS,\n      activeNav = 'dashboard',\n      onNavChange,\n      systemSectionTitle = 'System',\n    },\n    ref,\n  ) => {\n    // Support both prop-driven and attribute-driven layout\n    const [computedLayout, setComputedLayout] = useState<NavPlacement>(\n      layout || getNavFromDocument(),\n    );\n\n    useEffect(() => {\n      if (layout) {\n        setComputedLayout(layout);\n        return;\n      }\n\n      // Watch for data-nav changes via MutationObserver\n      if (typeof document === 'undefined') return;\n\n      const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-nav') {\n            setComputedLayout(getNavFromDocument());\n          }\n        });\n      });\n\n      observer.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-nav'],\n      });\n\n      // Initial read\n      setComputedLayout(getNavFromDocument());\n\n      return () => observer.disconnect();\n    }, [layout]);\n\n    const handleNavClick = (key: string) => {\n      onNavChange?.(key);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('ds-shell', `ds-shell--${computedLayout}`, className)}\n        data-shell-layout={computedLayout}\n      >\n        {/* Sidebar Navigation */}\n        {(computedLayout === 'left' || computedLayout === 'right') && (\n          <Sidebar position={computedLayout}>\n            <SidebarSection>\n              {navItems.slice(0, 3).map((item) => (\n                <SidebarItem\n                  key={item.key}\n                  icon={item.icon}\n                  active={activeNav === item.key}\n                  onClick={() => handleNavClick(item.key)}\n                >\n                  {item.label}\n                </SidebarItem>\n              ))}\n            </SidebarSection>\n            {navItems.length > 3 && (\n              <SidebarSection title={systemSectionTitle}>\n                {navItems.slice(3).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    icon={item.icon}\n                    active={activeNav === item.key}\n                    onClick={() => handleNavClick(item.key)}\n                  >\n                    {item.label}\n                  </SidebarItem>\n                ))}\n              </SidebarSection>\n            )}\n          </Sidebar>\n        )}\n\n        {/* Bottom Tab Bar Navigation */}\n        {computedLayout === 'bottom' && (\n          <nav className=\"ds-shell__tab-bar\">\n            {navItems.map((item) => (\n              <button\n                key={item.key}\n                className={clsx('ds-shell__tab-item', activeNav === item.key && 'ds-shell__tab-item--active')}\n                onClick={() => handleNavClick(item.key)}\n                aria-label={item.label}\n              >\n                {item.icon}\n              </button>\n            ))}\n          </nav>\n        )}\n\n        {/* Main Content Area */}\n        <main className=\"ds-shell__content\">{children}</main>\n      </div>\n    );\n  },\n);\n\nShell.displayName = 'Shell';\n"]}