softable-pixels-web 1.1.7 → 1.1.9

package/dist/{ThemeContext-Dro_peJg.js → ThemeContext-CesN6Ejm.js}

@@ -54,6 +54,7 @@ const COMMON_MAP = {
 		sm: "0.25rem",
 		md: "0.375rem",
 		lg: "0.5rem",
+		xl: "0.75rem",
 		full: "9999rem"
 	},
 	fontSize: {
@@ -81,13 +82,15 @@ const defaultThemes = {
 			success: "#0EB24C",
 			warning: "#f59e0b",
 			error: "#ef4444",
+			destructive: "#ef4444",
 			invalid: "#f87171",
 			info: "#06b6d4",
 			background: {
 				primary: "#FFFFFF",
 				card: {
 					primary: "#F4F4F4",
-					secondary: "#F3F6F9"
+					secondary: "#F3F6F9",
+					hover: "#f2f2f2"
 				}
 			},
 			button: {
@@ -110,15 +113,19 @@ const defaultThemes = {
 				primary: "#222222",
 				secondary: "#6C6C6C",
 				disabled: "#A0A0A0",
-				inverse: "#FFFFFF"
+				inverse: "#FFFFFF",
+				error: "#EC3030"
 			}
 		},
 		...COMMON_MAP,
 		shadows: {
+			xs: "0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D",
 			sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
 			md: "0 4px 6px -1px rgba(0, 0, 0, 0.10)",
 			lg: "0 10px 15px -3px rgba(0, 0, 0, 0.10)",
-			xl: "0 20px 25px -5px rgba(0, 0, 0, 0.10)"
+			xl: "0 20px 25px -5px rgba(0, 0, 0, 0.10)",
+			"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+			"ring-1": "0 0 0 1px rgba(0, 0, 0, 0.05)"
 		}
 	},
 	dark: {
@@ -130,13 +137,15 @@ const defaultThemes = {
 			success: "#0EB24C",
 			warning: "#f59e0b",
 			error: "#ef4444",
+			destructive: "#ef4444",
 			invalid: "#f87171",
 			info: "#06b6d4",
 			background: {
 				primary: "#090909",
 				card: {
 					primary: "#F4F4F4",
-					secondary: "#202020"
+					secondary: "#202020",
+					hover: "#e7e7e7"
 				}
 			},
 			button: {
@@ -159,15 +168,19 @@ const defaultThemes = {
 				primary: "#ECECEC",
 				secondary: "#C7CFD8",
 				disabled: "#8B93A0",
-				inverse: "#090909"
+				inverse: "#090909",
+				error: "#EC3030"
 			}
 		},
 		...COMMON_MAP,
 		shadows: {
+			xs: "0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D",
 			sm: "0 1px 2px 0 rgba(0, 0, 0, 0.35)",
 			md: "0 4px 6px -1px rgba(0, 0, 0, 0.45)",
 			lg: "0 10px 15px -3px rgba(0, 0, 0, 0.50)",
-			xl: "0 20px 25px -5px rgba(0, 0, 0, 0.55)"
+			xl: "0 20px 25px -5px rgba(0, 0, 0, 0.55)",
+			"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.65)",
+			"ring-1": "0 0 0 1px rgba(0, 0, 0, 0.05)"
 		}
 	}
 };
@@ -361,6 +374,7 @@ function themeToCssVars(theme) {
 		"--px-color-success": theme.colors.success,
 		"--px-color-warning": theme.colors.warning,
 		"--px-color-error": theme.colors.error,
+		"--px-color-destructive": theme.colors.destructive,
 		"--px-color-invalid": theme.colors.invalid,
 		"--px-color-info": theme.colors.info,
 		"--px-color-disabled": theme.colors.disabled,
@@ -369,12 +383,14 @@ function themeToCssVars(theme) {
 		"--px-surface": theme.colors.surface,
 		"--px-background-card-primary": theme.colors.background.card.primary,
 		"--px-background-card-secondary": theme.colors.background.card.secondary,
+		"--px-background-card-hover": theme.colors.background.card.hover,
 		"--px-border-primary": theme.colors.border.primary,
 		"--px-border-secondary": theme.colors.border.secondary,
 		"--px-text-primary": theme.colors.text.primary,
 		"--px-text-secondary": theme.colors.text.secondary,
 		"--px-text-disabled": theme.colors.text.disabled,
 		"--px-text-inverse": theme.colors.text.inverse,
+		"--px-text-error": theme.colors.text.error,
 		"--px-btn-filled-bg": theme.colors.button.filled.background,
 		"--px-btn-filled-label": theme.colors.button.filled.label,
 		"--px-btn-outlined-border": theme.colors.button.outlined.borderColor,
@@ -390,6 +406,7 @@ function themeToCssVars(theme) {
 		"--px-radius-sm": theme.borderRadius.sm,
 		"--px-radius-md": theme.borderRadius.md,
 		"--px-radius-lg": theme.borderRadius.lg,
+		"--px-radius-xl": theme.borderRadius.xl,
 		"--px-radius-full": theme.borderRadius.full,
 		"--px-fs-xs": theme.fontSize.xs,
 		"--px-fs-sm": theme.fontSize.sm,
@@ -401,10 +418,13 @@ function themeToCssVars(theme) {
 		"--px-fw-medium": theme.fontWeight.medium,
 		"--px-fw-semibold": theme.fontWeight.semibold,
 		"--px-fw-bold": theme.fontWeight.bold,
+		"--px-shadow-xs": theme.shadows.xs,
 		"--px-shadow-sm": theme.shadows.sm,
 		"--px-shadow-md": theme.shadows.md,
 		"--px-shadow-lg": theme.shadows.lg,
-		"--px-shadow-xl": theme.shadows.xl
+		"--px-shadow-xl": theme.shadows.xl,
+		"--px-shadow-2xl": theme.shadows["2xl"],
+		"--px-ring-1": theme.shadows["ring-1"]
 	};
 }
 
@@ -516,4 +536,4 @@ function useTheme() {
 
 //#endregion
 export { useTheme as n, ThemeProvider as t };
-//# sourceMappingURL=ThemeContext-Dro_peJg.js.map
+//# sourceMappingURL=ThemeContext-CesN6Ejm.js.map

package/dist/ThemeContext-CesN6Ejm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext-CesN6Ejm.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends Array<infer U>\n    ? Array<DeepPartial<U>>\n    : T[P] extends object\n      ? DeepPartial<T[P]>\n      : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n  if (override === undefined) return clone(base)\n\n  if (!isPlainObject(base) || !isPlainObject(override)) {\n    return clone(override as T)\n  }\n\n  const result: any = Array.isArray(base) ? [] : {}\n\n  const baseKeys = Object.keys(base as any) as (keyof T)[]\n  const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n  const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n  for (const k of allKeys) {\n    const baseVal = (base as any)[k]\n    const overrideVal = (override as any)[k]\n\n    if (overrideVal === undefined) {\n      result[k] = clone(baseVal)\n      continue\n    }\n\n    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n      result[k] = deepMerge(baseVal, overrideVal)\n      continue\n    }\n\n    result[k] = clone(overrideVal)\n  }\n\n  return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n  return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n  if (v === undefined || v === null) return v\n  if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n  if (isPlainObject(v)) {\n    const out: any = {}\n    for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n    return out\n  }\n  return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n  spacing: {\n    xs: '0.25rem', // 4px\n    sm: '0.5rem', // 8px\n    md: '1rem', // 16px\n    lg: '1.5rem', // 24px\n    xl: '2rem', // 32px\n    '2xl': '3rem' // 48px\n  },\n  borderRadius: {\n    none: '0rem', // 0px\n    sm: '0.25rem', // 4px\n    md: '0.375rem', // 6px\n    lg: '0.5rem', // 8px\n    xl: '0.75rem', // 12px\n    full: '9999rem' // \"infinite\" radius equivalent\n  },\n  fontSize: {\n    xs: '0.75rem', // 12px\n    sm: '0.875rem', // 14px\n    md: '1rem', // 16px\n    lg: '1.125rem', // 18px\n    xl: '1.25rem', // 20px\n    '2xl': '1.5rem' // 24px\n  },\n  fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n  light: {\n    colors: {\n      scrollbar: '#0000001a',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C',\n      secondary: '#6C6C6C',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      destructive: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#FFFFFF',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#F3F6F9',\n          hover: '#f2f2f2'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#222222',\n          borderColor: '#DDDDDD'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#FBFBFB',\n      border: {\n        primary: '#E8E8E9',\n        secondary: '#E8E8E9'\n      },\n\n      text: {\n        primary: '#222222',\n        secondary: '#6C6C6C',\n        disabled: '#A0A0A0',\n        inverse: '#FFFFFF',\n        error: '#EC3030'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      xs: '0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D',\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)',\n      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n      'ring-1': '0 0 0 1px rgba(0, 0, 0, 0.05)'\n    }\n  },\n\n  dark: {\n    colors: {\n      scrollbar: '#858585',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C',\n      secondary: '#C7CFD8',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      destructive: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#090909',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#202020',\n          hover: '#e7e7e7'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#ECECEC',\n          borderColor: '#DDDDDD'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#090909',\n\n      border: {\n        primary: '#27282D',\n        secondary: '#27282D'\n      },\n\n      text: {\n        primary: '#ECECEC',\n        secondary: '#C7CFD8',\n        disabled: '#8B93A0',\n        inverse: '#090909',\n        error: '#EC3030'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      xs: '0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D',\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)',\n      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.65)',\n      'ring-1': '0 0 0 1px rgba(0, 0, 0, 0.05)'\n    }\n  }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n *   - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n *   Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n *   Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"`  => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n  root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n\n  for (const [key, value] of Object.entries(vars)) {\n    if (value == null) continue\n    root.style.setProperty(key, String(value))\n  }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  const prefersDark =\n    window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n  return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n *   `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n  if (typeof window === 'undefined') return () => {}\n\n  const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n  const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n  handler()\n\n  if (mq.addEventListener) {\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }\n\n  mq.addListener(handler as any)\n  return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n  if (mode !== 'system') return mode\n  return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n  userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n  return {\n    light: {},\n    dark: {},\n    ...(userThemes ?? {})\n  } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n  registry: ThemeRegistry,\n  resolvedName: string,\n  override?: Partial<ThemeTokens>\n): ThemeTokens {\n  const base: ThemeTokens =\n    resolvedName === 'dark'\n      ? (defaultThemes.dark as ThemeTokens)\n      : (defaultThemes.light as ThemeTokens)\n\n  const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n  const merged = deepMerge(base, selectedPatch)\n  return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n  return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n  if (typeof window === 'undefined') return null\n  try {\n    return window.localStorage\n  } catch {\n    return null\n  }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n *   The ThemeProvider is responsible for merging partial theme patches on top\n *   of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n *   for CSS variables. When consuming them, you can:\n *   - append `px` in JS (`${var}px`), or\n *   - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n *   background: 'var(--px-bg)',\n *   color: 'var(--px-text-primary)',\n *   borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n *   background: var(--px-surface);\n *   color: var(--px-text-primary);\n *   border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n  return {\n    /**\n     * Brand & intent colors\n     */\n    '--px-color-primary': theme.colors.primary,\n    '--px-color-secondary': theme.colors.secondary,\n    '--px-color-success': theme.colors.success,\n    '--px-color-warning': theme.colors.warning,\n    '--px-color-error': theme.colors.error,\n    '--px-color-destructive': theme.colors.destructive,\n    '--px-color-invalid': theme.colors.invalid,\n    '--px-color-info': theme.colors.info,\n    '--px-color-disabled': theme.colors.disabled,\n\n    /**\n     * Scrollbar\n     */\n    '--px-scrollbar': theme.colors.scrollbar,\n\n    /**\n     * Surfaces / backgrounds\n     */\n    '--px-bg': theme.colors.background.primary,\n    '--px-surface': theme.colors.surface,\n    '--px-background-card-primary': theme.colors.background.card.primary,\n    '--px-background-card-secondary': theme.colors.background.card.secondary,\n    '--px-background-card-hover': theme.colors.background.card.hover,\n\n    /**\n     * Borders\n     * -------\n     * Divider and outline colors.\n     */\n    '--px-border-primary': theme.colors.border.primary,\n    '--px-border-secondary': theme.colors.border.secondary,\n\n    /**\n     * Text\n     * ----\n     * Text colors for different emphasis levels.\n     */\n    '--px-text-primary': theme.colors.text.primary,\n    '--px-text-secondary': theme.colors.text.secondary,\n    '--px-text-disabled': theme.colors.text.disabled,\n    '--px-text-inverse': theme.colors.text.inverse,\n    '--px-text-error': theme.colors.text.error,\n\n    /**\n     * Buttons – Filled\n     * ----------------\n     * Filled button colors\n     */\n    '--px-btn-filled-bg': theme.colors.button.filled.background,\n    '--px-btn-filled-label': theme.colors.button.filled.label,\n\n    /**\n     * Buttons – Outlined\n     * ------------------\n     * Outlined button colors\n     */\n    '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n    '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n    /**\n     * Buttons – Ghost\n     * --------------\n     * Ghost button colors\n     */\n    '--px-btn-ghost-label': theme.colors.button.ghost.label,\n    /**\n     * Spacing\n     * -------------\n     * Numeric spacing tokens (commonly used as px).\n     */\n    '--px-space-xs': theme.spacing.xs,\n    '--px-space-sm': theme.spacing.sm,\n    '--px-space-md': theme.spacing.md,\n    '--px-space-lg': theme.spacing.lg,\n    '--px-space-xl': theme.spacing.xl,\n    '--px-space-2xl': theme.spacing['2xl'],\n\n    /**\n     * Border radius scale\n     * -------------------\n     * Numeric radius tokens (commonly used as px).\n     */\n    '--px-radius-none': theme.borderRadius.none,\n    '--px-radius-sm': theme.borderRadius.sm,\n    '--px-radius-md': theme.borderRadius.md,\n    '--px-radius-lg': theme.borderRadius.lg,\n    '--px-radius-xl': theme.borderRadius.xl,\n    '--px-radius-full': theme.borderRadius.full,\n\n    /**\n     * Typography scale\n     * ----------------\n     * Font sizes and font weights.\n     */\n    '--px-fs-xs': theme.fontSize.xs,\n    '--px-fs-sm': theme.fontSize.sm,\n    '--px-fs-md': theme.fontSize.md,\n    '--px-fs-lg': theme.fontSize.lg,\n    '--px-fs-xl': theme.fontSize.xl,\n    '--px-fs-2xl': theme.fontSize['2xl'],\n\n    '--px-fw-normal': theme.fontWeight.normal,\n    '--px-fw-medium': theme.fontWeight.medium,\n    '--px-fw-semibold': theme.fontWeight.semibold,\n    '--px-fw-bold': theme.fontWeight.bold,\n\n    /**\n     * Shadows\n     * -------\n     * CSS shadow strings for elevation.\n     */\n    '--px-shadow-xs': theme.shadows.xs,\n    '--px-shadow-sm': theme.shadows.sm,\n    '--px-shadow-md': theme.shadows.md,\n    '--px-shadow-lg': theme.shadows.lg,\n    '--px-shadow-xl': theme.shadows.xl,\n    '--px-shadow-2xl': theme.shadows['2xl'],\n    '--px-ring-1': theme.shadows['ring-1']\n  }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n'use client'\n\n// External Libraries\nimport {\n  useMemo,\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  useLayoutEffect\n} from 'react'\n\n// Utils\nimport {\n  buildTheme,\n  isThemeMode,\n  resolveName,\n  applyCssVars,\n  buildRegistry,\n  themeToCssVars,\n  applyThemeClass,\n  watchSystemTheme,\n  getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * useIsomorphicLayoutEffect\n * - On client: runs before paint (layout effect)\n * - On server: falls back to useEffect (no warnings)\n */\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  themes,\n  children,\n  override,\n  persistence,\n  persist = false,\n  defaultMode = 'system',\n  storageKey = 'px-theme',\n  fallback = null\n}) => {\n  const registry = useMemo(() => buildRegistry(themes), [themes])\n\n  function makeInitialMode(): ThemeMode {\n    if (persistence) {\n      try {\n        const saved = persistence.get()\n        return (saved ?? defaultMode) as ThemeMode\n      } catch {\n        return defaultMode\n      }\n    }\n\n    const ls = getLocalStorageSafe()\n    if (!ls) return defaultMode\n    const raw = ls.getItem(storageKey)?.replaceAll('\"', '')\n    return isThemeMode(raw) ? raw : defaultMode\n  }\n\n  const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n  /**\n   * Gate: only render children after we applied class + vars at least once.\n   * This prevents \"unstyled flash\" for your components.\n   */\n  const [isReady, setReady] = useState(false)\n\n  const resolvedName = useMemo(() => {\n    if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n    return resolveName(mode)\n  }, [mode])\n\n  const theme = useMemo(\n    () => buildTheme(registry, resolvedName, override),\n    [registry, resolvedName, override]\n  )\n\n  // keep in sync with OS when mode === \"system\"\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    if (mode !== 'system') return\n\n    return watchSystemTheme(() => {\n      setMode('system')\n    })\n  }, [mode])\n\n  /**\n   * Apply theme BEFORE paint (client) and then unlock rendering.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return\n\n    applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n    applyCssVars(themeToCssVars(theme))\n\n    // unlock after first successful application\n    setReady(true)\n  }, [resolvedName, theme])\n\n  /**\n   * Persist mode changes (optional).\n   */\n  useEffect(() => {\n    if (persistence) {\n      try {\n        persistence.set(mode)\n      } catch {}\n      return\n    }\n\n    if (!persist) return\n    const ls = getLocalStorageSafe()\n    if (!ls) return\n\n    try {\n      ls.setItem(storageKey, mode)\n    } catch {}\n  }, [mode, persist, storageKey, persistence])\n\n  function setTheme(next: ThemeMode) {\n    setMode(next)\n  }\n\n  function toggleTheme(a: string = 'light', b: string = 'dark') {\n    setMode(resolvedName === a ? b : a)\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  const ctxValue = useMemo(\n    () => ({\n      mode,\n      resolvedName,\n      theme,\n      isLoading: !isReady,\n      setTheme,\n      toggleTheme\n    }),\n    [mode, resolvedName, theme, isReady]\n  )\n\n  return (\n    <ThemeContext.Provider value={ctxValue}>\n      {isReady ? children : fallback}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useTheme(): ThemeContextData {\n  const ctx = useContext(ThemeContext)\n  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n  return ctx\n}\n"],"mappings":"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"}

package/dist/{Typography-BE-vQSfx.js → Typography-j84zoCoZ.js}

@@ -1,7 +1,7 @@
-import { n as styled, r as WEIGHTS, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
+import { n as styled, r as WEIGHTS, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/components/toolkit/Typography/config.ts
+//#region src/components/commons/toolkit/Typography/config.ts
 const primaryColor = "var(--px-text-primary)";
 const secondaryColor = "var(--px-text-secondary)";
 const typographyVariants = {
@@ -88,7 +88,7 @@ const alignText = {
 };
 
 //#endregion
-//#region src/components/toolkit/Typography/style.ts
+//#region src/components/commons/toolkit/Typography/style.ts
 function createTypographyStyles(props) {
 	const { isLoading, variant, align = "left", color } = props;
 	return styled({
@@ -116,7 +116,7 @@ function createTypographyStyles(props) {
 }
 
 //#endregion
-//#region src/components/toolkit/Typography/index.tsx
+//#region src/components/commons/toolkit/Typography/index.tsx
 function Typography(props) {
 	const { id, as, href, variant, children, className, placeholder, isLoading = false, styles: styleTypography } = props;
 	const { styles } = useThemedStyles(props, createTypographyStyles, {
@@ -158,4 +158,4 @@ function Typography(props) {
 
 //#endregion
 export { Typography as t };
-//# sourceMappingURL=Typography-BE-vQSfx.js.map
+//# sourceMappingURL=Typography-j84zoCoZ.js.map

package/dist/Typography-j84zoCoZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-j84zoCoZ.js","names":["typographyVariants: Record<TypographyVariant, SlotStyle>","variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, SlotStyle>"],"sources":["../src/components/commons/toolkit/Typography/config.ts","../src/components/commons/toolkit/Typography/style.ts","../src/components/commons/toolkit/Typography/index.tsx"],"sourcesContent":["// External Libraries\nimport type { JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\nimport { type SlotStyle, WEIGHTS } from '@hooks/useThemedStyles/types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, SlotStyle> = {\n  h1: {\n    fontSize: '3rem',\n    fontWeight: '700',\n    lineHeight: WEIGHTS.bold,\n    color: primaryColor\n  },\n  h2: {\n    fontSize: '2.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.5 / 2.25)',\n    color: primaryColor\n  },\n  h3: {\n    fontSize: '1.875rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.25 / 1.875)',\n    color: primaryColor\n  },\n  h4: {\n    fontSize: '1.5rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2 / 1.5)',\n    color: primaryColor\n  },\n  h5: {\n    fontSize: '1.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(1.75 / 1.25)',\n    color: primaryColor\n  },\n  b1: {\n    fontSize: '1rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: '1.5',\n    color: primaryColor\n  },\n  b2: {\n    fontSize: '0.875rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1.25 / 0.875)',\n    color: secondaryColor\n  },\n  b3: {\n    fontSize: '0.75rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1 / 0.75)',\n    color: secondaryColor\n  },\n  caption: {\n    fontSize: '0.65rem',\n    fontWeight: WEIGHTS.regular,\n    lineHeight: 'calc(1 / 0.65)',\n    color: secondaryColor\n  },\n  legal: {\n    fontSize: '0.65rem',\n    lineHeight: 'calc(1 / 0.65)',\n    fontWeight: WEIGHTS.light,\n    textTransform: 'uppercase',\n    letterSpacing: '0.025em',\n    color: secondaryColor\n  }\n}\n\nexport const variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  caption: 'span',\n  legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, SlotStyle> = {\n  left: { textAlign: 'left' },\n  center: { textAlign: 'center' },\n  right: { textAlign: 'right' },\n  justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport { type SlotStyle, styled } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps) {\n  const { isLoading, variant, align = 'left', color } = props\n\n  return styled({\n    base: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderBottom: '1px solid var(--pixel-border, #e5e7eb)',\n      gap: 0,\n      animation: isLoading ? 'animate-pulse 1.5s infinite' : undefined\n    },\n\n    loading: {\n      width: '50%',\n      height: '1em',\n      display: 'inline-block',\n      backgroundColor: 'var(--pixel-gray-300, #d1d5db)',\n      borderRadius: '0.25rem'\n    },\n\n    text: {\n      ...alignText[align],\n      ...typographyVariants[variant],\n      color: color ?? typographyVariants[variant].color\n    } as SlotStyle\n  })\n}\n","// Utils\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport function Typography(props: TypographyProps) {\n  const {\n    id,\n    as,\n    href,\n    variant,\n    children,\n    className,\n    placeholder,\n    isLoading = false,\n    styles: styleTypography\n  } = props\n\n  const { styles } = useThemedStyles(props, createTypographyStyles, {\n    pick: p => [p.isLoading, p.variant, p.align],\n    commonSlot: 'text',\n    applyCommonProps: true,\n    override: styleTypography\n  })\n\n  const Component = as ?? variantToElement[variant]\n\n  if (isLoading) {\n    return (\n      <span\n        id={id}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n        style={{ ...styles.text, ...styles.loading }}\n      />\n    )\n  }\n\n  const sharedProps = {\n    id,\n    style: styles.text,\n    'aria-label': placeholder,\n    className\n  }\n\n  if (href) {\n    return (\n      <a href={href} {...sharedProps}>\n        {children}\n      </a>\n    )\n  }\n\n  return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":";;;;AAOA,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAEvB,MAAaA,qBAA2D;CACtE,IAAI;EACF,UAAU;EACV,YAAY;EACZ,YAAY,QAAQ;EACpB,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,SAAS;EACP,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,OAAO;EACL,UAAU;EACV,YAAY;EACZ,YAAY,QAAQ;EACpB,eAAe;EACf,eAAe;EACf,OAAO;EACR;CACF;AAED,MAAaC,mBAGT;CACF,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,OAAO;CACR;AAED,MAAaC,YAA0C;CACrD,MAAM,EAAE,WAAW,QAAQ;CAC3B,QAAQ,EAAE,WAAW,UAAU;CAC/B,OAAO,EAAE,WAAW,SAAS;CAC7B,SAAS,EAAE,WAAW,WAAW;CAClC;;;;ACzFD,SAAgB,uBAAuB,OAAwB;CAC7D,MAAM,EAAE,WAAW,SAAS,QAAQ,QAAQ,UAAU;AAEtD,QAAO,OAAO;EACZ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,cAAc;GACd,KAAK;GACL,WAAW,YAAY,gCAAgC;GACxD;EAED,SAAS;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,iBAAiB;GACjB,cAAc;GACf;EAED,MAAM;GACJ,GAAG,UAAU;GACb,GAAG,mBAAmB;GACtB,OAAO,SAAS,mBAAmB,SAAS;GAC7C;EACF,CAAC;;;;;ACrBJ,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,IACA,IACA,MACA,SACA,UACA,WACA,aACA,YAAY,OACZ,QAAQ,oBACN;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;EAChE,OAAM,MAAK;GAAC,EAAE;GAAW,EAAE;GAAS,EAAE;GAAM;EAC5C,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACX,CAAC;CAEF,MAAM,YAAY,MAAM,iBAAiB;AAEzC,KAAI,UACF,QACE,oBAAC;EACK;EACJ,eAAY;EACZ,MAAK;EACL,OAAO;GAAE,GAAG,OAAO;GAAM,GAAG,OAAO;GAAS;GAC5C;CAIN,MAAM,cAAc;EAClB;EACA,OAAO,OAAO;EACd,cAAc;EACd;EACD;AAED,KAAI,KACF,QACE,oBAAC;EAAQ;EAAM,GAAI;EAChB;GACC;AAIR,QAAO,oBAAC;EAAU,GAAI;EAAc;GAAqB"}

package/dist/button.d.ts

@@ -1,3 +1,3 @@
-import "./types-CDUx-y9q.js";
-import { t as Button } from "./index-DVz2cTUe.js";
+import "./types-ubME1KhJ.js";
+import { t as Button } from "./index-YYjoEwNX.js";
 export { Button };

package/dist/button.js

@@ -1,5 +1,5 @@
-import "./useThemedStyles-3rUXJYgS.js";
-import "./Typography-BE-vQSfx.js";
-import { t as Button } from "./Button-BiSdxI2A.js";
+import "./useThemedStyles-MLtE91hE.js";
+import "./Typography-j84zoCoZ.js";
+import { t as Button } from "./Button-DCVmSier.js";
 
 export { Button };

package/dist/check-item.d.ts

@@ -1,2 +1,2 @@
-import { t as CheckItem } from "./index-akSk71wZ.js";
+import { t as CheckItem } from "./index-8GUY3yRY.js";
 export { CheckItem };

package/dist/check-item.js

@@ -1,6 +1,6 @@
-import "./Icon-Cv0qztmq.js";
-import "./useThemedStyles-3rUXJYgS.js";
-import "./Typography-BE-vQSfx.js";
-import { t as CheckItem } from "./CheckItem-DsIiS-2X.js";
+import "./useThemedStyles-MLtE91hE.js";
+import "./Icon-61UaAUrM.js";
+import "./Typography-j84zoCoZ.js";
+import { t as CheckItem } from "./CheckItem-itm2oIeW.js";
 
 export { CheckItem };

package/dist/checkbox.d.ts

@@ -1,3 +1,3 @@
-import "./types-CDUx-y9q.js";
-import { t as Checkbox } from "./index-C9iMLJTU.js";
+import "./types-ubME1KhJ.js";
+import { t as Checkbox } from "./index-Cmj1xJBu.js";
 export { Checkbox };

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import "./Icon-Cv0qztmq.js";
-import "./useThemedStyles-3rUXJYgS.js";
-import "./Typography-BE-vQSfx.js";
-import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
+import "./useThemedStyles-MLtE91hE.js";
+import "./Icon-61UaAUrM.js";
+import "./Typography-j84zoCoZ.js";
+import { t as Checkbox } from "./Checkbox-ly07FlTH.js";
 
 export { Checkbox };

package/dist/context-menu.d.ts

@@ -0,0 +1,2 @@
+import { t as ContextMenu } from "./index-BglHC9EI.js";
+export { ContextMenu };

package/dist/context-menu.js

@@ -0,0 +1,9 @@
+import "./useThemedStyles-MLtE91hE.js";
+import "./Switch-B4e9qBOu.js";
+import "./useDismiss-DJ1mh-X3.js";
+import "./useFloating--PcINgSt.js";
+import "./Popover-BsDGCJ-f.js";
+import "./Typography-j84zoCoZ.js";
+import { t as ContextMenu } from "./ContextMenu-fSz83oSd.js";
+
+export { ContextMenu };

package/dist/icon-button.d.ts

@@ -1,2 +1,2 @@
-import { t as IconButton } from "./index-CyvtOmP2.js";
+import { t as IconButton } from "./index-BHhl7wD8.js";
 export { IconButton };

package/dist/icon-button.js

@@ -1,4 +1,4 @@
-import "./useThemedStyles-3rUXJYgS.js";
-import { t as IconButton } from "./IconButton-BBdkzg3b.js";
+import "./useThemedStyles-MLtE91hE.js";
+import { t as IconButton } from "./IconButton-CsHFWO8K.js";
 
 export { IconButton };

package/dist/{index-DUrGjyKy.d.ts → index-2WYvBk8I.d.ts}

@@ -1,12 +1,26 @@
-import { t as CommonStyleProps } from "./styleProps-D405c8KF.js";
-import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
+import { t as CommonStyleProps } from "./styleProps-5iqKZpC1.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/components/toolkit/TabSwitch/styles.d.ts
-declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap;
+//#region src/components/commons/toolkit/TabSwitch/styles.d.ts
+declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
+  container: {
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    color: "var(--px-text-primary, #4b5563)";
+    width: string;
+    borderBottom: string;
+    gap: number;
+    __rules: {
+      '& svg': {
+        zIndex: number;
+      };
+    };
+  };
+};
 //#endregion
-//#region src/components/toolkit/TabSwitch/types.d.ts
+//#region src/components/commons/toolkit/TabSwitch/types.d.ts
 interface SwitchOption<T> {
   value: T;
   label: string;
@@ -26,8 +40,8 @@ interface TabSwitchProps<T> extends CommonStyleProps {
   onChange: (value: T) => void;
 }
 //#endregion
-//#region src/components/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
+//#region src/components/commons/toolkit/TabSwitch/index.d.ts
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-DUrGjyKy.d.ts.map
+//# sourceMappingURL=index-2WYvBk8I.d.ts.map

package/dist/{index-akSk71wZ.d.ts → index-8GUY3yRY.d.ts}

@@ -1,13 +1,13 @@
 import React from "react";
 
-//#region src/components/toolkit/CheckItem/types.d.ts
+//#region src/components/commons/toolkit/CheckItem/types.d.ts
 interface CheckItemProps {
   label: string;
   checked: boolean;
 }
 //#endregion
-//#region src/components/toolkit/CheckItem/index.d.ts
+//#region src/components/commons/toolkit/CheckItem/index.d.ts
 declare const CheckItem: React.FC<CheckItemProps>;
 //#endregion
 export { CheckItem as t };
-//# sourceMappingURL=index-akSk71wZ.d.ts.map
+//# sourceMappingURL=index-8GUY3yRY.d.ts.map

package/dist/index-BANOx3xI.d.ts

@@ -0,0 +1,44 @@
+import { t as FloatingOptions } from "./types-Dsf33Reg.js";
+import React, { MouseEventHandler, ReactNode, RefObject } from "react";
+
+//#region src/components/commons/toolkit/Popover/styles.d.ts
+declare function createPopoverStyles(_props: PopoverProps): {
+  popoverNode: {
+    position: "fixed";
+    left: number;
+    top: number;
+    zIndex: number;
+    padding: string;
+    boxShadow: "var(--px-ring-1)";
+    backgroundColor: "var(--px-bg)";
+    borderRadius: string;
+  };
+};
+//#endregion
+//#region src/components/commons/toolkit/Popover/types.d.ts
+type PopoverTriggerRenderProps = {
+  'aria-expanded': boolean;
+  ref: RefObject<HTMLElement>;
+  onClick: () => void;
+};
+interface PopoverProps {
+  open?: boolean;
+  closeOnEscape?: boolean;
+  closeOnOutsideClick?: boolean;
+  floatingOptions?: FloatingOptions;
+  anchorRef?: RefObject<HTMLElement>;
+  onOpenChange?: (v: boolean) => void;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  content: (ctx: {
+    close: () => void;
+  }) => ReactNode;
+  trigger?: (props: PopoverTriggerRenderProps) => ReactNode;
+  styles?: Partial<ReturnType<typeof createPopoverStyles>>;
+}
+//#endregion
+//#region src/components/commons/toolkit/Popover/index.d.ts
+declare const Popover: React.FC<PopoverProps>;
+//#endregion
+export { Popover as t };
+//# sourceMappingURL=index-BANOx3xI.d.ts.map

package/dist/{index-CyvtOmP2.d.ts → index-BHhl7wD8.d.ts}

@@ -1,8 +1,9 @@
-import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
 import { MouseEvent, ReactNode } from "react";
 
 //#region src/components/commons/buttons/IconButton/styles.d.ts
-declare function createIconButtonStyles(props: IconButtonProps): StyleMap;
+declare function createIconButtonStyles(props: IconButtonProps): {
+  button: any;
+};
 //#endregion
 //#region src/components/commons/buttons/IconButton/types.d.ts
 interface IconButtonProps {
@@ -23,4 +24,4 @@ type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
 declare const IconButton: React.FC<IconButtonProps>;
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=index-CyvtOmP2.d.ts.map
+//# sourceMappingURL=index-BHhl7wD8.d.ts.map

package/dist/index-BglHC9EI.d.ts

@@ -0,0 +1,61 @@
+import { n as Placement } from "./types-Dsf33Reg.js";
+import React, { ReactNode } from "react";
+
+//#region src/components/commons/toolkit/ContextMenu/styles.d.ts
+declare function createContextMenuStyles(_props: ContextMenuProps): {
+  trigger: {
+    width: string;
+    height: string;
+  };
+};
+//#endregion
+//#region src/components/commons/toolkit/ContextMenu/types.d.ts
+interface BaseOption {
+  id: string;
+  icon?: ReactNode;
+  label?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  shortcut?: ReactNode;
+}
+type MenuActionOption = BaseOption & {
+  type: 'action';
+  closeOnSelect?: boolean;
+  onSelect: () => void;
+};
+type MenuSwitchOption = BaseOption & {
+  type: 'switch';
+  checked: boolean;
+  closeOnSelect?: boolean;
+  onCheckedChange: (next: boolean) => void;
+};
+interface MenuDividerOption {
+  id: string;
+  type: 'divider';
+}
+interface MenuCustomOption extends BaseOption {
+  type: 'custom';
+  render: (ctx: {
+    close: () => void;
+  }) => ReactNode;
+}
+interface MenuGroupInput extends BaseOption {
+  type?: 'group';
+  children: MenuOptionInput[];
+}
+type MenuOptionInput = MenuGroupInput | MenuActionOption | MenuSwitchOption | MenuCustomOption | MenuDividerOption;
+interface ContextMenuProps {
+  trigger: ReactNode;
+  options: MenuOptionInput[];
+  offsetX?: number;
+  offsetY?: number;
+  columnWidth?: number;
+  placement?: Placement;
+  styles?: Partial<ReturnType<typeof createContextMenuStyles>>;
+}
+//#endregion
+//#region src/components/commons/toolkit/ContextMenu/index.d.ts
+declare const ContextMenu: React.FC<ContextMenuProps>;
+//#endregion
+export { ContextMenu as t };
+//# sourceMappingURL=index-BglHC9EI.d.ts.map

package/dist/{index-CIxyqe-m.d.ts → index-CCiP7SPG.d.ts}

@@ -71,9 +71,10 @@ interface ThemeTokens {
     /** Semantic colors (feedback) */
     success: string;
     warning: string;
+    info: string;
     error: string;
     invalid: string;
-    info: string;
+    destructive: string;
     disabled: string;
     scrollbar: string;
     button: {
@@ -97,6 +98,7 @@ interface ThemeTokens {
       card: {
         primary: string;
         secondary: string;
+        hover: string;
       };
     };
     surface: string;
@@ -117,6 +119,8 @@ interface ThemeTokens {
       disabled: string;
       /** Text color to use on top of strong backgrounds (e.g. primary buttons) */
       inverse: string;
+      /** Text color to use on error feedback */
+      error: string;
     };
   };
   /**
@@ -127,7 +131,7 @@ interface ThemeTokens {
   /**
    * Border radius scale (in px numbers).
    */
-  borderRadius: Record<'none' | 'sm' | 'md' | 'lg' | 'full', number | string>;
+  borderRadius: Record<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full', number | string>;
   /**
    * Font size scale (in px numbers).
    */
@@ -139,7 +143,7 @@ interface ThemeTokens {
   /**
    * Shadow tokens (CSS shadow strings).
    */
-  shadows: Record<'sm' | 'md' | 'lg' | 'xl', string>;
+  shadows: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'ring-1', string>;
   /**
    * Extension point.
    *
@@ -288,4 +292,4 @@ declare const ThemeProvider: React.FC<ThemeProviderProps>;
 declare function useTheme(): ThemeContextData;
 //#endregion
 export { ThemeName as a, ThemeRegistry as c, ThemeMode as i, ThemeTokens as l, useTheme as n, ThemePersistence as o, ThemeContextData as r, ThemeProviderProps as s, ThemeProvider as t };
-//# sourceMappingURL=index-CIxyqe-m.d.ts.map
+//# sourceMappingURL=index-CCiP7SPG.d.ts.map

package/dist/{index-C9iMLJTU.d.ts → index-Cmj1xJBu.d.ts}

@@ -1,7 +1,7 @@
-import { n as TypographyVariant } from "./types-CDUx-y9q.js";
+import { n as TypographyVariant } from "./types-ubME1KhJ.js";
 import React$1 from "react";
 
-//#region src/components/toolkit/Checkbox/types.d.ts
+//#region src/components/commons/toolkit/Checkbox/types.d.ts
 type CheckboxSize = 'sm' | 'md' | 'lg';
 type CheckboxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type LabelPlacement = 'left' | 'right';
@@ -22,8 +22,8 @@ interface CheckboxProps {
   onLabelChange?: (text: string) => void;
 }
 //#endregion
-//#region src/components/toolkit/Checkbox/index.d.ts
+//#region src/components/commons/toolkit/Checkbox/index.d.ts
 declare const Checkbox: React$1.FC<CheckboxProps>;
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=index-C9iMLJTU.d.ts.map
+//# sourceMappingURL=index-Cmj1xJBu.d.ts.map