@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/cjs/utils/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","names":["p","q"],"sources":["../../../src/utils/theme.ts"],"sourcesContent":["// Import the theme types from the new types file\nimport { BackgroundImages, Color, SystemColors, Theme } from \"../types/theme\";\n\n/**\n * Adjusts the hue of a color by a given number of degrees.\n * Hue wraps around at 360.\n * @param color The Color object.\n * @param degrees The number of degrees to adjust the hue by.\n * @returns A new Color object.\n */\nexport function adjustHue(color: Color, degrees: number): Color {\n  let newHue = color.hue + degrees;\n  // Ensure hue wraps around 0-360\n  newHue = newHue % 360;\n  if (newHue < 0) {\n    newHue += 360;\n  }\n  return { ...color, hue: newHue };\n}\n\n/**\n * Applies the styles from a Theme object to the DOM.\n * This function manipulates the document head and root element class.\n * @param theme The Theme object to apply.\n */\nexport function applyThemeStyles(theme: Theme): void {\n  const css = generateThemeCSS(theme);\n  const style = document.createElement(\"style\");\n  style.textContent = css;\n  const existingStyle = document.head.querySelector(\"style[data-theme]\");\n\n  if (existingStyle) {\n    document.head.removeChild(existingStyle);\n  }\n  style.setAttribute(\"data-theme\", theme.id);\n  document.head.appendChild(style);\n\n  document.documentElement.className = `theme-${theme.id}`;\n}\n\n/**\n * Creates default system colors for a light theme.\n */\nexport function createDefaultSystemColors(): SystemColors {\n  return {\n    active_ui_element: { hue: 0, lightness: 80, saturation: 0 },\n    background: { hue: 0, lightness: 100, saturation: 0 },\n    borders: { hue: 0, lightness: 70, saturation: 0 },\n    high_contrast_text: { hue: 0, lightness: 10, saturation: 0 },\n    hovered_element_border: { hue: 0, lightness: 50, saturation: 0 },\n    hovered_solid_bg: { hue: 0, lightness: 35, saturation: 0 },\n    hovered_ui_element: { hue: 0, lightness: 85, saturation: 0 },\n    low_contrast_text: { hue: 0, lightness: 30, saturation: 0 },\n    solid_background: { hue: 0, lightness: 40, saturation: 0 },\n    subtle_background: { hue: 0, lightness: 95, saturation: 0 },\n    ui_element_background: { hue: 0, lightness: 90, saturation: 0 },\n    ui_element_border: { hue: 0, lightness: 60, saturation: 0 },\n  };\n}\n\n/**\n * Creates a default theme object.\n * This can be used as a fallback or starting point.\n */\nexport function createDefaultTheme(): Theme {\n  return {\n    background_images: {\n      login: \"\",\n      register: \"\",\n      reset_password: \"\",\n    },\n    id: \"default\",\n    name: \"Default Theme\",\n    system_colors: createDefaultSystemColors(),\n  };\n}\n\n/**\n * Creates a system colors object with all values at zero.\n * Useful for testing and reset operations.\n */\nexport function createZeroSystemColors(): SystemColors {\n  return {\n    active_ui_element: { hue: 0, lightness: 0, saturation: 0 },\n    background: { hue: 0, lightness: 0, saturation: 0 },\n    borders: { hue: 0, lightness: 0, saturation: 0 },\n    high_contrast_text: { hue: 0, lightness: 0, saturation: 0 },\n    hovered_element_border: { hue: 0, lightness: 0, saturation: 0 },\n    hovered_solid_bg: { hue: 0, lightness: 0, saturation: 0 },\n    hovered_ui_element: { hue: 0, lightness: 0, saturation: 0 },\n    low_contrast_text: { hue: 0, lightness: 0, saturation: 0 },\n    solid_background: { hue: 0, lightness: 0, saturation: 0 },\n    subtle_background: { hue: 0, lightness: 0, saturation: 0 },\n    ui_element_background: { hue: 0, lightness: 0, saturation: 0 },\n    ui_element_border: { hue: 0, lightness: 0, saturation: 0 },\n  };\n}\n\n/**\n * Darkens a color by a given percentage.\n * @param color The Color object.\n * @param amount The percentage amount to darken by (0-100).\n * @returns A new Color object.\n */\nexport function darkenColor(color: Color, amount: number): Color {\n  const newLightness = clamp(color.lightness - amount, 0, 100);\n  return { ...color, lightness: newLightness };\n}\n\n/**\n * Desaturates a color by a given percentage.\n * @param color The Color object.\n * @param amount The percentage amount to desaturate by (0-100).\n * @returns A new Color object.\n */\nexport function desaturateColor(color: Color, amount: number): Color {\n  const newSaturation = clamp(color.saturation - amount, 0, 100);\n  return { ...color, saturation: newSaturation };\n}\n\n/**\n * Attempts to adjust theme colors to meet WCAG contrast requirements.\n * It iterates through common color pairs and adjusts lightness if contrast is insufficient.\n * Returns a new Theme object if changes were made, otherwise returns the original theme.\n * @param theme The Theme object to check and potentially adjust.\n * @param textLevel The desired WCAG level for text contrast ('AA' or 'AAA'). Defaults to 'AA'.\n * @param nonTextLevel The desired WCAG level for non-text contrast ('AA'). Defaults to 'AA'.\n * @returns A new Theme object with adjusted colors if needed, or the original theme.\n */\nexport function ensureWcagContrast(\n  theme: Theme,\n  textLevel: \"AA\" | \"AAA\" = \"AA\",\n  nonTextLevel: \"AA\" = \"AA\", // Non-text only has AA (3:1) requirement\n): Theme {\n  const modifiedTheme = { ...theme, systemColors: { ...theme.system_colors } };\n  let changesMade = false;\n\n  const colors = modifiedTheme.systemColors;\n\n  // Define color pairs and their check type (text/non-text) and text size (normal/large)\n  // For simplicity, assume all text is 'normal' for now. Large text check can be added later if needed.\n  const colorPairs: {\n    bgKey: keyof SystemColors;\n    fgKey: keyof SystemColors;\n    type: \"non-text\" | \"text\";\n  }[] = [\n    { bgKey: \"background\", fgKey: \"high_contrast_text\", type: \"text\" },\n    { bgKey: \"background\", fgKey: \"low_contrast_text\", type: \"text\" },\n    {\n      bgKey: \"ui_element_background\",\n      fgKey: \"high_contrast_text\",\n      type: \"text\",\n    },\n    {\n      bgKey: \"ui_element_background\",\n      fgKey: \"low_contrast_text\",\n      type: \"text\",\n    },\n    {\n      bgKey: \"ui_element_background\",\n      fgKey: \"ui_element_border\",\n      type: \"non-text\",\n    },\n    {\n      bgKey: \"hovered_ui_element\",\n      fgKey: \"hovered_element_border\",\n      type: \"non-text\",\n    },\n    {\n      bgKey: \"ui_element_background\",\n      fgKey: \"active_ui_element\",\n      type: \"non-text\",\n    },\n    { bgKey: \"background\", fgKey: \"hovered_ui_element\", type: \"non-text\" },\n    { bgKey: \"background\", fgKey: \"solid_background\", type: \"non-text\" },\n    { bgKey: \"solid_background\", fgKey: \"hovered_solid_bg\", type: \"non-text\" },\n  ];\n\n  for (const { bgKey, fgKey, type } of colorPairs) {\n    const fgColor = colors[fgKey];\n    const bgColor = colors[bgKey];\n\n    let needsAdjustment = false;\n    let requiredRatio: number;\n\n    if (type === \"text\") {\n      requiredRatio = textLevel === \"AAA\" ? 7.0 : 4.5;\n      if (!meetsWcagTextContrast(fgColor, bgColor, textLevel, false)) {\n        // Assume normal text for now\n        needsAdjustment = true;\n      }\n    } else {\n      // non-text\n      requiredRatio = 3.0; // WCAG 2.1 SC 1.4.11 AA\n      if (!meetsWcagNonTextContrast(fgColor, bgColor)) {\n        needsAdjustment = true;\n      }\n    }\n\n    if (needsAdjustment) {\n      changesMade = true;\n      console.warn(\n        `WCAG Contrast Warning: Pair ${fgKey} vs ${bgKey} (Current Ratio: ${getContrastRatio(fgColor, bgColor)}) does not meet required ratio ${requiredRatio} for ${type === \"text\" ? textLevel + \" Text\" : \"Non-text\"}. Attempting to adjust.`,\n      );\n\n      // Simple adjustment strategy: Adjust foreground lightness first, then background lightness.\n      // Determine direction of adjustment for foreground\n      const fgLuminance = rgbToLuminance(...hslToRgb(fgColor));\n      const bgLuminance = rgbToLuminance(...hslToRgb(bgColor));\n\n      let adjustedFg = { ...fgColor };\n      let adjustedBg = { ...bgColor };\n      let currentRatio = getContrastRatio(adjustedFg, adjustedBg);\n      const step = 1; // Adjust lightness by 1% at a time\n      const maxAttempts = 200; // Total attempts limit\n\n      let attempts = 0;\n      let adjustingFg = true; // Start by adjusting foreground\n\n      while (currentRatio < requiredRatio && attempts < maxAttempts) {\n        attempts++;\n        const currentFgLuminance = rgbToLuminance(...hslToRgb(adjustedFg));\n        const currentBgLuminance = rgbToLuminance(...hslToRgb(adjustedBg));\n\n        let adjustedThisIteration = false;\n\n        if (adjustingFg) {\n          // Determine ideal direction for FG adjustment\n          // Determine ideal direction for FG adjustment to increase contrast:\n          // If FG is darker than BG, darkening FG increases contrast (direction -1)\n          // If FG is lighter than BG, lightening FG increases contrast (direction +1)\n          const fgAdjustmentDirection =\n            currentFgLuminance < currentBgLuminance ? -1 : 1;\n          const nextFgLightness = clamp(\n            adjustedFg.lightness + fgAdjustmentDirection * step,\n            0,\n            100,\n          );\n\n          if (adjustedFg.lightness === nextFgLightness) {\n            adjustingFg = false; // Switch to adjusting background\n            // Fall through to BG adjustment logic in the same iteration\n          } else {\n            // Adjust FG lightness\n            adjustedFg = { ...adjustedFg, lightness: nextFgLightness };\n            currentRatio = getContrastRatio(adjustedFg, adjustedBg);\n            adjustedThisIteration = true;\n          }\n        }\n\n        // If we are here and haven't adjusted FG, try adjusting BG\n        if (!adjustedThisIteration && !adjustingFg) {\n          // Determine ideal direction for BG adjustment relative to the *current* FG\n          // If BG is darker than FG, lightening BG increases contrast (direction +1)\n          // If BG is lighter than FG, darkening BG increases contrast (direction -1)\n          const bgAdjustmentDirection =\n            currentBgLuminance < currentFgLuminance ? 1 : -1;\n          const nextBgLightness = clamp(\n            adjustedBg.lightness + bgAdjustmentDirection * step,\n            0,\n            100,\n          );\n\n          if (adjustedBg.lightness === nextBgLightness) {\n            // BG hit a boundary and couldn't move further, stop\n            break; // Cannot adjust further\n          } else {\n            // Adjust BG lightness\n            adjustedBg = { ...adjustedBg, lightness: nextBgLightness };\n            currentRatio = getContrastRatio(adjustedFg, adjustedBg);\n            adjustedThisIteration = true;\n          }\n        }\n\n        // If neither color could be adjusted in this iteration, break to prevent infinite loops\n        if (!adjustedThisIteration) {\n          console.warn(\n            `  WCAG Contrast Warning: Neither FG nor BG could be adjusted further for ${fgKey} vs ${bgKey}. Current Ratio: ${currentRatio}. Required: ${requiredRatio}. Stopping.`,\n          );\n          break;\n        }\n      }\n\n      // Update the colors in the modified theme\n      modifiedTheme.systemColors[fgKey] = adjustedFg;\n      modifiedTheme.systemColors[bgKey] = adjustedBg;\n\n      if (getContrastRatio(adjustedFg, adjustedBg) < requiredRatio) {\n        console.warn(\n          `WCAG Contrast Warning: Pair ${fgKey} vs ${bgKey} could not meet required ratio ${requiredRatio} after ${attempts} attempts. Final Ratio: ${getContrastRatio(adjustedFg, adjustedBg)}.`,\n        );\n      }\n    }\n  }\n\n  // Return the modified theme if changes were made, otherwise return the original\n  return changesMade ? modifiedTheme : theme;\n}\n\n/**\n * Generates CSS variable declarations for a given theme.\n * @param theme The Theme object.\n * @returns A CSS string with variable declarations.\n */\nexport function generateThemeCSS(theme: Theme): string {\n  // Ensure systemColors and backgroundImages are objects before accessing entries.\n  // This handles cases where they might be null, undefined, or other non-object types.\n  const systemColors =\n    theme?.system_colors &&\n    typeof theme.system_colors === \"object\" &&\n    !Array.isArray(theme.system_colors)\n      ? theme.system_colors\n      : {};\n  const backgroundImages =\n    theme?.background_images &&\n    typeof theme.background_images === \"object\" &&\n    !Array.isArray(theme.background_images)\n      ? theme.background_images\n      : {};\n\n  const colorVariables = Object.entries(systemColors)\n    .map(([key, value]) => {\n      // Ensure value is a valid Color before converting\n      if (!isValidColor(value)) {\n        console.warn(\n          `Skipping invalid color for key \"${key}\" in theme \"${theme?.id}\"`,\n        );\n        return \"\"; // Skip invalid color entries\n      }\n      // Convert snake_case keys to kebab-case for CSS variables\n      return `--theme-${key.replace(/_/g, \"-\")}: ${hslToRawString(value)};`;\n    })\n    .filter((line) => line !== \"\") // Remove empty lines from skipped colors\n    .join(\"\\n  \");\n\n  const backgroundImageVariables = Object.entries(backgroundImages)\n    .map(([key, value]) => {\n      // Ensure value is a string before using\n      if (typeof value !== \"string\") {\n        console.warn(\n          `Skipping invalid background image URL for key \"${key}\" in theme \"${theme?.id}\"`,\n        );\n        return \"\"; // Skip invalid image entries\n      }\n      // Convert snake_case keys to kebab-case for CSS variables\n      return `--lume-bg-${key.replace(/_/g, \"-\")}: url(\"${value}\");`;\n    })\n    .filter((line) => line !== \"\") // Remove empty lines from skipped images\n    .join(\"\\n  \");\n\n  // Add a check for theme.id in case theme itself is null/undefined, although the initial checks handle this.\n  const themeId = theme?.id || \"unknown\";\n\n  return `\n:root.theme-${themeId} {\n  ${colorVariables}\n  ${backgroundImageVariables}\n}\n`;\n}\n\n/**\n * Calculates the contrast ratio between two colors.\n * Based on WCAG 2.x guidelines.\n * @param color1 The first Color object.\n * @param color2 The second Color object.\n * @returns The contrast ratio (1 to 21).\n */\nexport function getContrastRatio(color1: Color, color2: Color): number {\n  const [r1, g1, b1] = hslToRgb(color1);\n  const [r2, g2, b2] = hslToRgb(color2);\n\n  const luminance1 = rgbToLuminance(r1, g1, b1);\n  const luminance2 = rgbToLuminance(r2, g2, b2);\n\n  // Add 0.05 to the luminance values to account for ambient light\n  const lighter = Math.max(luminance1, luminance2);\n  const darker = Math.min(luminance1, luminance2);\n\n  // Calculate the contrast ratio\n  const ratio = (lighter + 0.05) / (darker + 0.05);\n\n  // Return ratio rounded to 2 decimal places\n  return Math.round(ratio * 100) / 100;\n}\n\n/**\n * Finds a specific theme by its ID from a list of themes.\n * @param themes The array of available themes.\n * @param themeId The ID of the theme to find.\n * @returns The found Theme object or undefined if not found.\n */\nexport function getThemeById(\n  themes: Theme[],\n  themeId: string,\n): Theme | undefined {\n  return themes.find((t) => t.id === themeId);\n}\n\n/**\n * Converts a Hex color string (#RRGGBB or #RGB) to an HSL Color object.\n * @param hex The hex color string.\n * @returns An HSL Color object or undefined if the hex string is invalid.\n */\nexport function hexToHsl(hex: string): Color | undefined {\n  // Validate hex string format (must start with # and be 3 or 6 hex characters)\n  const hexMatch = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(hex);\n\n  if (!hexMatch) {\n    console.error(`Invalid hex color format: ${hex}`);\n    return undefined;\n  }\n\n  let cleanHex = hexMatch[1]; // Get the hex part without '#'\n\n  // Expand 3-digit hex to 6-digit hex\n  if (cleanHex.length === 3) {\n    cleanHex =\n      cleanHex[0] +\n      cleanHex[0] +\n      cleanHex[1] +\n      cleanHex[1] +\n      cleanHex[2] +\n      cleanHex[2];\n  }\n\n  // Parse R, G, B values from the hex string\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  // Convert RGB to HSL using the rgbToHsl function\n  // rgbToHsl already handles clamping, but parseInt should give valid numbers here\n  return rgbToHsl(r, g, b);\n}\n\n/**\n * Converts a Color object to raw HSL values as a string.\n * @param color The Color object.\n * @returns A string in the format \"hue, saturation%, lightness%\".\n */\nexport function hslToRawString(color: Color): string {\n  return `${color.hue}, ${color.saturation}%, ${color.lightness}%`;\n}\n\n/**\n * Converts an HSL Color object to RGB values (0-255).\n * Needed for calculating luminance for contrast ratio.\n * @param color The HSL Color object.\n * @returns An array [r, g, b] with values in the range [0, 255].\n */\nexport function hslToRgb(color: Color): [number, number, number] {\n  const h = color.hue / 360;\n  const s = color.saturation / 100;\n  const l = color.lightness / 100;\n\n  let b, g, r;\n\n  if (s === 0) {\n    r = g = b = l; // Achromatic (gray)\n  } else {\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\n    r = hue2rgb(p, q, h + 1 / 3);\n    g = hue2rgb(p, q, h);\n    b = hue2rgb(p, q, h - 1 / 3);\n  }\n\n  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}\n\n/**\n * Converts a Color object to a CSS HSL string.\n * @param color The Color object.\n * @returns A string in the format \"hsl(hue, saturation%, lightness%)\".\n */\nexport function hslToString(color: Color): string {\n  return `hsl(${hslToRawString(color)})`;\n}\n\n/**\n * Checks if an object conforms to the BackgroundImages interface structure.\n * @param data The object to validate.\n * @returns True if the object is valid BackgroundImages, false otherwise.\n */\nexport function isValidBackgroundImages(data: any): data is BackgroundImages {\n  if (typeof data !== \"object\" || data === null) {\n    return false;\n  }\n  // Get expected keys from the BackgroundImages interface\n  const expectedKeys: (keyof BackgroundImages)[] = [\n    \"login\",\n    \"register\",\n    \"reset_password\",\n  ];\n\n  // Check if all expected keys are present and their values are strings\n  for (const key of expectedKeys) {\n    if (\n      !Object.prototype.hasOwnProperty.call(data, key) ||\n      typeof data[key] !== \"string\"\n    ) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * Checks if an object conforms to the Color interface structure.\n * @param data The object to validate.\n * @returns True if the object is a valid Color, false otherwise.\n */\nexport function isValidColor(data: any): data is Color {\n  return (\n    typeof data === \"object\" &&\n    data !== null &&\n    typeof data.hue === \"number\" &&\n    typeof data.saturation === \"number\" &&\n    typeof data.lightness === \"number\"\n    // Note: Range validation (0-360, 0-100) is typically done on the backend\n    // or during configuration loading, not strictly required by the TS interface structure.\n  );\n}\n\n/**\n * Checks if an object conforms to the SystemColors interface structure.\n * @param data The object to validate.\n * @returns True if the object is valid SystemColors, false otherwise.\n */\nexport function isValidSystemColors(data: any): data is SystemColors {\n  if (typeof data !== \"object\" || data === null) {\n    return false;\n  }\n  // Get expected keys from the SystemColors interface\n  const expectedKeys: (keyof SystemColors)[] = [\n    \"active_ui_element\",\n    \"background\",\n    \"borders\",\n    \"high_contrast_text\",\n    \"hovered_element_border\",\n    \"hovered_solid_bg\",\n    \"hovered_ui_element\",\n    \"low_contrast_text\",\n    \"solid_background\",\n    \"subtle_background\",\n    \"ui_element_background\",\n    \"ui_element_border\",\n  ];\n\n  // Check if all expected keys are present and their values are valid Colors\n  for (const key of expectedKeys) {\n    if (\n      !Object.prototype.hasOwnProperty.call(data, key) ||\n      !isValidColor(data[key])\n    ) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * Lightens a color by a given percentage.\n * @param color The Color object.\n * @param amount The percentage amount to lighten by (0-100).\n * @returns A new Color object.\n */\nexport function lightenColor(color: Color, amount: number): Color {\n  const newLightness = clamp(color.lightness + amount, 0, 100);\n  return { ...color, lightness: newLightness };\n}\n\n/**\n * Checks if the contrast ratio between two colors meets a specified WCAG level.\n * Assumes normal text size (not large text).\n * WCAG AA requires 4.5:1. WCAG AAA requires 7:1.\n * @param color1 The first Color object.\n * @param color2 The second Color object.\n * @param level The WCAG level to check against ('AA' or 'AAA').\n * @returns True if the contrast ratio meets the level, false otherwise.\n */\nexport function meetsWcagContrast(\n  color1: Color,\n  color2: Color,\n  level: \"AA\" | \"AAA\",\n): boolean {\n  // This function is kept for backward compatibility but meetsWcagTextContrast is preferred\n  // It assumes normal text size.\n  return meetsWcagTextContrast(color1, color2, level, false);\n}\n\n/**\n * Checks if the contrast ratio between two colors meets the WCAG 2.1 SC 1.4.11 Non-text Contrast (AA) requirement.\n * This applies to graphical objects and user interface components.\n * @param color1 The first Color object (e.g., icon color, border color).\n * @param color2 The second Color object (e.g., adjacent background color).\n * @returns True if the contrast ratio is 3:1 or higher, false otherwise.\n */\nexport function meetsWcagNonTextContrast(\n  color1: Color,\n  color2: Color,\n): boolean {\n  const ratio = getContrastRatio(color1, color2);\n  const requiredRatio = 3.0; // WCAG 2.1 SC 1.4.11 requires 3:1\n\n  return ratio >= requiredRatio;\n}\n\n/**\n * Checks if the contrast ratio between two colors meets a specified WCAG level for text.\n * WCAG 2.x/2.1 SC 1.4.3 (Minimum) and SC 1.4.6 (Enhanced).\n * @param color1 The first Color object (e.g., text color).\n * @param color2 The second Color object (e.g., background color).\n * @param level The WCAG level to check against ('AA' or 'AAA').\n * @param isLargeText True if the text is considered \"large text\" by WCAG definition.\n * @returns True if the contrast ratio meets the level for the given text size, false otherwise.\n */\nexport function meetsWcagTextContrast(\n  color1: Color,\n  color2: Color,\n  level: \"AA\" | \"AAA\",\n  isLargeText: boolean,\n): boolean {\n  const ratio = getContrastRatio(color1, color2);\n\n  let requiredRatio: number;\n  if (isLargeText) {\n    requiredRatio = level === \"AAA\" ? 4.5 : 3.0; // WCAG 2.x requirements for large text\n  } else {\n    requiredRatio = level === \"AAA\" ? 7.0 : 4.5; // WCAG 2.x requirements for normal text\n  }\n\n  return ratio >= requiredRatio;\n}\n\n/**\n * Merges properties from an overrides object into a base theme object.\n * Performs a deep merge for systemColors and backgroundImages.\n * @param base The base Theme object.\n * @param overrides The partial Theme object with overrides.\n * @returns A new Theme object with overrides applied.\n */\nexport function mergeThemes(\n  base: Theme,\n  overrides: Partial<Theme & { system_colors?: Partial<SystemColors> }>,\n): Theme {\n  // Start with a shallow copy of the base theme\n  const mergedTheme: Theme = { ...base };\n\n  // Apply top-level overrides (like name, default). ID should probably not be overridden.\n  if (overrides.name !== undefined) mergedTheme.name = overrides.name;\n  if (overrides.default !== undefined) mergedTheme.default = overrides.default;\n  // Add any other top-level properties from overrides if needed, excluding 'id'\n\n  // Deep merge systemColors\n  if (overrides.system_colors) {\n    mergedTheme.system_colors = {\n      ...base.system_colors, // Start with base colors\n      ...overrides.system_colors, // Apply overrides, including new ones\n    };\n  }\n  // If overrides.systemColors is undefined, keep base.systemColors\n\n  // Deep merge backgroundImages\n  if (overrides.background_images) {\n    mergedTheme.background_images = {\n      ...base.background_images, // Start with base images\n      ...overrides.background_images, // Apply overrides, including new ones\n    };\n  }\n\n  return mergedTheme;\n}\n\n/**\n * Converts RGB values (0-255) to an HSL Color object.\n * @param r Red value (0-255).\n * @param g Green value (0-255).\n * @param b Blue value (0-255).\n * @returns An HSL Color object.\n */\nexport function rgbToHsl(r: number, g: number, b: number): Color {\n  // Clamp R, G, B values to the range [0, 255]\n  r = clamp(r, 0, 255);\n  g = clamp(g, 0, 255);\n  b = clamp(b, 0, 255);\n\n  // Normalize R, G, B values to the range [0, 1]\n  const rNorm = r / 255;\n  const gNorm = g / 255;\n  const bNorm = b / 255;\n\n  const max = Math.max(rNorm, gNorm, bNorm);\n  const min = Math.min(rNorm, gNorm, bNorm);\n\n  let h = 0; // Hue\n  let s = 0; // Saturation\n  const l = (max + min) / 2; // Lightness\n\n  // If max == min, the color is a shade of gray (achromatic)\n  if (max !== min) {\n    const d = max - min;\n    // Calculate saturation\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n    // Calculate hue\n    switch (max) {\n      case bNorm:\n        h = (rNorm - gNorm) / d + 4;\n        break;\n      case gNorm:\n        h = (bNorm - rNorm) / d + 2;\n        break;\n      case rNorm:\n        h = (gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0);\n        break;\n    }\n\n    h /= 6; // Normalize hue to the range [0, 1]\n  }\n\n  // Convert H, S, L to the desired ranges (0-360 for H, 0-100 for S and L)\n  const hue = Math.round(h * 360);\n  const saturation = Math.round(s * 100);\n  const lightness = Math.round(l * 100);\n\n  return { hue, lightness, saturation };\n}\n\n/**\n * Calculates the relative luminance of an RGB color.\n * Based on WCAG 2.x guidelines.\n * @param r Red value (0-255).\n * @param g Green value (0-255).\n * @param b Blue value (0-255).\n * @returns The relative luminance (0-1).\n */\nexport function rgbToLuminance(r: number, g: number, b: number): number {\n  const channelLuminance = (channel: number) => {\n    const srgb = channel / 255;\n    return srgb <= 0.03928\n      ? srgb / 12.92\n      : Math.pow((srgb + 0.055) / 1.055, 2.4);\n  };\n\n  const lumR = channelLuminance(r);\n  const lumG = channelLuminance(g);\n  const lumB = channelLuminance(b);\n\n  return 0.2126 * lumR + 0.7152 * lumG + 0.0722 * lumB;\n}\n\n/**\n * Saturates a color by a given percentage.\n * @param color The Color object.\n * @param amount The percentage amount to saturate by (0-100).\n * @returns A new Color object.\n */\nexport function saturateColor(color: Color, amount: number): Color {\n  const newSaturation = clamp(color.saturation + amount, 0, 100);\n  return { ...color, saturation: newSaturation };\n}\n\n/**\n * Validates if an object conforms to the Theme interface structure.\n * @param data The object to validate.\n * @returns True if the object is a valid Theme, false otherwise.\n */\nexport function validateTheme(data: any): data is Theme {\n  if (typeof data !== \"object\" || data === null) {\n    return false;\n  }\n\n  // Check required top-level properties\n  if (typeof data.id !== \"string\" || typeof data.name !== \"string\") {\n    return false;\n  }\n\n  // Check nested structures\n  if (!isValidSystemColors(data.systemColors)) {\n    return false;\n  }\n\n  if (!isValidBackgroundImages(data.backgroundImages)) {\n    return false;\n  }\n\n  // Optional properties like 'default' can be checked here if needed,\n  // but the interface allows them to be missing or undefined.\n  if (data.default !== undefined && typeof data.default !== \"boolean\") {\n    return false;\n  }\n\n  return true;\n}\n\n/**\n * Clamps a value between a minimum and maximum.\n * @param value The value to clamp.\n * @param min The minimum allowed value.\n * @param max The maximum allowed value.\n * @returns The clamped value.\n */\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(value, max));\n}\n\n// Add other theme utility functions here as needed\n\n/**\n * Merges properties from an overrides object into a base theme object.\n * Useful for applying partial theme customizations.\n * export function mergeThemes(base: Theme, overrides: Partial<Theme>): Theme { ... }\n */\n\n/**\n * Validates if an object conforms to the Theme interface structure.\n * export function function validateTheme(theme: any): theme is Theme { ... }\n */\n"],"mappings":"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"}

package/dist/cjs/utils/theme.d.cts

@@ -0,0 +1,198 @@
+import { BackgroundImages, Color, SystemColors, Theme } from "../types/theme.cjs";
+
+//#region src/utils/theme.d.ts
+
+/**
+ * Adjusts the hue of a color by a given number of degrees.
+ * Hue wraps around at 360.
+ * @param color The Color object.
+ * @param degrees The number of degrees to adjust the hue by.
+ * @returns A new Color object.
+ */
+declare function adjustHue(color: Color, degrees: number): Color;
+/**
+ * Applies the styles from a Theme object to the DOM.
+ * This function manipulates the document head and root element class.
+ * @param theme The Theme object to apply.
+ */
+declare function applyThemeStyles(theme: Theme): void;
+/**
+ * Creates default system colors for a light theme.
+ */
+declare function createDefaultSystemColors(): SystemColors;
+/**
+ * Creates a default theme object.
+ * This can be used as a fallback or starting point.
+ */
+declare function createDefaultTheme(): Theme;
+/**
+ * Creates a system colors object with all values at zero.
+ * Useful for testing and reset operations.
+ */
+declare function createZeroSystemColors(): SystemColors;
+/**
+ * Darkens a color by a given percentage.
+ * @param color The Color object.
+ * @param amount The percentage amount to darken by (0-100).
+ * @returns A new Color object.
+ */
+declare function darkenColor(color: Color, amount: number): Color;
+/**
+ * Desaturates a color by a given percentage.
+ * @param color The Color object.
+ * @param amount The percentage amount to desaturate by (0-100).
+ * @returns A new Color object.
+ */
+declare function desaturateColor(color: Color, amount: number): Color;
+/**
+ * Attempts to adjust theme colors to meet WCAG contrast requirements.
+ * It iterates through common color pairs and adjusts lightness if contrast is insufficient.
+ * Returns a new Theme object if changes were made, otherwise returns the original theme.
+ * @param theme The Theme object to check and potentially adjust.
+ * @param textLevel The desired WCAG level for text contrast ('AA' or 'AAA'). Defaults to 'AA'.
+ * @param nonTextLevel The desired WCAG level for non-text contrast ('AA'). Defaults to 'AA'.
+ * @returns A new Theme object with adjusted colors if needed, or the original theme.
+ */
+declare function ensureWcagContrast(theme: Theme, textLevel?: "AA" | "AAA", nonTextLevel?: "AA"): Theme;
+/**
+ * Generates CSS variable declarations for a given theme.
+ * @param theme The Theme object.
+ * @returns A CSS string with variable declarations.
+ */
+declare function generateThemeCSS(theme: Theme): string;
+/**
+ * Calculates the contrast ratio between two colors.
+ * Based on WCAG 2.x guidelines.
+ * @param color1 The first Color object.
+ * @param color2 The second Color object.
+ * @returns The contrast ratio (1 to 21).
+ */
+declare function getContrastRatio(color1: Color, color2: Color): number;
+/**
+ * Finds a specific theme by its ID from a list of themes.
+ * @param themes The array of available themes.
+ * @param themeId The ID of the theme to find.
+ * @returns The found Theme object or undefined if not found.
+ */
+declare function getThemeById(themes: Theme[], themeId: string): Theme | undefined;
+/**
+ * Converts a Hex color string (#RRGGBB or #RGB) to an HSL Color object.
+ * @param hex The hex color string.
+ * @returns An HSL Color object or undefined if the hex string is invalid.
+ */
+declare function hexToHsl(hex: string): Color | undefined;
+/**
+ * Converts a Color object to raw HSL values as a string.
+ * @param color The Color object.
+ * @returns A string in the format "hue, saturation%, lightness%".
+ */
+declare function hslToRawString(color: Color): string;
+/**
+ * Converts an HSL Color object to RGB values (0-255).
+ * Needed for calculating luminance for contrast ratio.
+ * @param color The HSL Color object.
+ * @returns An array [r, g, b] with values in the range [0, 255].
+ */
+declare function hslToRgb(color: Color): [number, number, number];
+/**
+ * Converts a Color object to a CSS HSL string.
+ * @param color The Color object.
+ * @returns A string in the format "hsl(hue, saturation%, lightness%)".
+ */
+declare function hslToString(color: Color): string;
+/**
+ * Checks if an object conforms to the BackgroundImages interface structure.
+ * @param data The object to validate.
+ * @returns True if the object is valid BackgroundImages, false otherwise.
+ */
+declare function isValidBackgroundImages(data: any): data is BackgroundImages;
+/**
+ * Checks if an object conforms to the Color interface structure.
+ * @param data The object to validate.
+ * @returns True if the object is a valid Color, false otherwise.
+ */
+declare function isValidColor(data: any): data is Color;
+/**
+ * Checks if an object conforms to the SystemColors interface structure.
+ * @param data The object to validate.
+ * @returns True if the object is valid SystemColors, false otherwise.
+ */
+declare function isValidSystemColors(data: any): data is SystemColors;
+/**
+ * Lightens a color by a given percentage.
+ * @param color The Color object.
+ * @param amount The percentage amount to lighten by (0-100).
+ * @returns A new Color object.
+ */
+declare function lightenColor(color: Color, amount: number): Color;
+/**
+ * Checks if the contrast ratio between two colors meets a specified WCAG level.
+ * Assumes normal text size (not large text).
+ * WCAG AA requires 4.5:1. WCAG AAA requires 7:1.
+ * @param color1 The first Color object.
+ * @param color2 The second Color object.
+ * @param level The WCAG level to check against ('AA' or 'AAA').
+ * @returns True if the contrast ratio meets the level, false otherwise.
+ */
+declare function meetsWcagContrast(color1: Color, color2: Color, level: "AA" | "AAA"): boolean;
+/**
+ * Checks if the contrast ratio between two colors meets the WCAG 2.1 SC 1.4.11 Non-text Contrast (AA) requirement.
+ * This applies to graphical objects and user interface components.
+ * @param color1 The first Color object (e.g., icon color, border color).
+ * @param color2 The second Color object (e.g., adjacent background color).
+ * @returns True if the contrast ratio is 3:1 or higher, false otherwise.
+ */
+declare function meetsWcagNonTextContrast(color1: Color, color2: Color): boolean;
+/**
+ * Checks if the contrast ratio between two colors meets a specified WCAG level for text.
+ * WCAG 2.x/2.1 SC 1.4.3 (Minimum) and SC 1.4.6 (Enhanced).
+ * @param color1 The first Color object (e.g., text color).
+ * @param color2 The second Color object (e.g., background color).
+ * @param level The WCAG level to check against ('AA' or 'AAA').
+ * @param isLargeText True if the text is considered "large text" by WCAG definition.
+ * @returns True if the contrast ratio meets the level for the given text size, false otherwise.
+ */
+declare function meetsWcagTextContrast(color1: Color, color2: Color, level: "AA" | "AAA", isLargeText: boolean): boolean;
+/**
+ * Merges properties from an overrides object into a base theme object.
+ * Performs a deep merge for systemColors and backgroundImages.
+ * @param base The base Theme object.
+ * @param overrides The partial Theme object with overrides.
+ * @returns A new Theme object with overrides applied.
+ */
+declare function mergeThemes(base: Theme, overrides: Partial<Theme & {
+  system_colors?: Partial<SystemColors>;
+}>): Theme;
+/**
+ * Converts RGB values (0-255) to an HSL Color object.
+ * @param r Red value (0-255).
+ * @param g Green value (0-255).
+ * @param b Blue value (0-255).
+ * @returns An HSL Color object.
+ */
+declare function rgbToHsl(r: number, g: number, b: number): Color;
+/**
+ * Calculates the relative luminance of an RGB color.
+ * Based on WCAG 2.x guidelines.
+ * @param r Red value (0-255).
+ * @param g Green value (0-255).
+ * @param b Blue value (0-255).
+ * @returns The relative luminance (0-1).
+ */
+declare function rgbToLuminance(r: number, g: number, b: number): number;
+/**
+ * Saturates a color by a given percentage.
+ * @param color The Color object.
+ * @param amount The percentage amount to saturate by (0-100).
+ * @returns A new Color object.
+ */
+declare function saturateColor(color: Color, amount: number): Color;
+/**
+ * Validates if an object conforms to the Theme interface structure.
+ * @param data The object to validate.
+ * @returns True if the object is a valid Theme, false otherwise.
+ */
+declare function validateTheme(data: any): data is Theme;
+//#endregion
+export { adjustHue, applyThemeStyles, createDefaultSystemColors, createDefaultTheme, createZeroSystemColors, darkenColor, desaturateColor, ensureWcagContrast, generateThemeCSS, getContrastRatio, getThemeById, hexToHsl, hslToRawString, hslToRgb, hslToString, isValidBackgroundImages, isValidColor, isValidSystemColors, lightenColor, meetsWcagContrast, meetsWcagNonTextContrast, meetsWcagTextContrast, mergeThemes, rgbToHsl, rgbToLuminance, saturateColor, validateTheme };
+//# sourceMappingURL=theme.d.cts.map

package/dist/esm/_virtual/rolldown_runtime.js

@@ -0,0 +1,41 @@
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esmMin = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __hasOwnProp.call(mod, "module.exports") ? mod["module.exports"] : __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
+});
+
+//#endregion
+export { __esmMin, __exportAll, __require, __toCommonJS };

package/dist/esm/components/Copyable.d.ts

@@ -0,0 +1,43 @@
+//#region src/components/Copyable.d.ts
+interface CopyableProps {
+  /**
+   * The text to be copied
+   */
+  text: string;
+  /**
+   * The display text (if different from the copied text)
+   */
+  displayText?: string;
+  /**
+   * Maximum length before truncating (default: 20)
+   */
+  maxLength?: number;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+  /**
+   * Tooltip text for copy action (default: "Copy")
+   */
+  copyTooltip?: string;
+  /**
+   * Tooltip text when copied (default: "Copied!")
+   */
+  copiedTooltip?: string;
+  /**
+   * Whether to show the copy icon (default: true)
+   */
+  showIcon?: boolean;
+}
+declare function Copyable({
+  text,
+  displayText,
+  maxLength,
+  className,
+  copyTooltip,
+  copiedTooltip,
+  showIcon
+}: CopyableProps): any;
+//#endregion
+export { Copyable };
+//# sourceMappingURL=Copyable.d.ts.map

package/dist/esm/components/Copyable.js

@@ -0,0 +1,53 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "@lumeweb/portal-framework-ui-core";
+import React, { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+
+//#region src/components/Copyable.tsx
+function Copyable({ text, displayText, maxLength = 20, className, copyTooltip = "Copy", copiedTooltip = "Copied!", showIcon = true }) {
+	const [isCopied, setIsCopied] = useState(false);
+	const timerRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			setIsCopied(true);
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				setIsCopied(false);
+				timerRef.current = null;
+			}, 2e3);
+		} catch (err) {
+			console.error("Failed to copy text: ", err);
+		}
+	};
+	const textToDisplay = displayText || text;
+	const truncatedText = textToDisplay.length > maxLength ? `${textToDisplay.substring(0, maxLength)}...` : textToDisplay;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleCopy,
+			"aria-label": isCopied ? copiedTooltip : copyTooltip,
+			className: cn("inline-flex items-center gap-1 text-sm hover:bg-muted/50 rounded px-2 py-1 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono",
+				children: truncatedText
+			}), showIcon && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: isCopied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+			})]
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: isCopied ? copiedTooltip : copyTooltip }) })] }) });
+}
+var init_Copyable = __esmMin(() => {});
+
+//#endregion
+init_Copyable();
+export { Copyable, init_Copyable };
+//# sourceMappingURL=Copyable.js.map

package/dist/esm/components/Copyable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copyable.js","names":[],"sources":["../../../src/components/Copyable.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { Copy, Check } from \"lucide-react\";\nimport { cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@lumeweb/portal-framework-ui-core\";\n\ninterface CopyableProps {\n  /**\n   * The text to be copied\n   */\n  text: string;\n  /**\n   * The display text (if different from the copied text)\n   */\n  displayText?: string;\n  /**\n   * Maximum length before truncating (default: 20)\n   */\n  maxLength?: number;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Tooltip text for copy action (default: \"Copy\")\n   */\n  copyTooltip?: string;\n  /**\n   * Tooltip text when copied (default: \"Copied!\")\n   */\n  copiedTooltip?: string;\n  /**\n   * Whether to show the copy icon (default: true)\n   */\n  showIcon?: boolean;\n}\n\nexport function Copyable({\n  text,\n  displayText,\n  maxLength = 20,\n  className,\n  copyTooltip = \"Copy\",\n  copiedTooltip = \"Copied!\",\n  showIcon = true,\n}: CopyableProps) {\n  const [isCopied, setIsCopied] = useState(false);\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, []);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n      \n      // Clear any existing timer before setting a new one\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n      \n      // Set new timer and store its ID in the ref\n      timerRef.current = setTimeout(() => {\n        setIsCopied(false);\n        timerRef.current = null;\n      }, 2000);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  const textToDisplay = displayText || text;\n  const truncatedText = textToDisplay.length > maxLength \n    ? `${textToDisplay.substring(0, maxLength)}...` \n    : textToDisplay;\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            aria-label={isCopied ? copiedTooltip : copyTooltip}\n            className={cn(\n              \"inline-flex items-center gap-1 text-sm hover:bg-muted/50 rounded px-2 py-1 transition-colors\",\n              \"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n              className\n            )}\n          >\n            <span className=\"font-mono\">{truncatedText}</span>\n            {showIcon && (\n              <span className=\"text-muted-foreground\">\n                {isCopied ? (\n                  <Check className=\"h-3 w-3\" />\n                ) : (\n                  <Copy className=\"h-3 w-3\" />\n                )}\n              </span>\n            )}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>{isCopied ? copiedTooltip : copyTooltip}</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"],"mappings":";;;;;;;AAmCA,SAAgB,SAAS,EACvB,MACA,aACA,YAAY,IACZ,WACA,cAAc,QACd,gBAAgB,WAChB,WAAW,QACK;CAChB,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,WAAW,OAA8B,KAAK;AAEpD,iBAAgB;AACd,eAAa;AACX,OAAI,SAAS,QACX,cAAa,SAAS,QAAQ;;IAGjC,EAAE,CAAC;CAEN,MAAM,aAAa,YAAY;AAC7B,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,eAAY,KAAK;AAGjB,OAAI,SAAS,QACX,cAAa,SAAS,QAAQ;AAIhC,YAAS,UAAU,iBAAiB;AAClC,gBAAY,MAAM;AAClB,aAAS,UAAU;MAClB,IAAK;WACD,KAAK;AACZ,WAAQ,MAAM,yBAAyB,IAAI;;;CAI/C,MAAM,gBAAgB,eAAe;CACrC,MAAM,gBAAgB,cAAc,SAAS,YACzC,GAAG,cAAc,UAAU,GAAG,UAAU,CAAC,OACzC;AAEJ,QACE,oBAAC,6BACC,qBAAC,sBACC,oBAAC;EAAe;YACd,qBAAC;GACC,MAAK;GACL,SAAS;GACT,cAAY,WAAW,gBAAgB;GACvC,WAAW,GACT,gGACA,uEACA,UACD;cAED,oBAAC;IAAK,WAAU;cAAa;KAAqB,EACjD,YACC,oBAAC;IAAK,WAAU;cACb,WACC,oBAAC,SAAM,WAAU,YAAY,GAE7B,oBAAC,QAAK,WAAU,YAAY;KAEzB;IAEF;GACM,EACjB,oBAAC,4BACC,oBAAC,iBAAG,WAAW,gBAAgB,cAAgB,GAChC,IACT,GACM"}

package/dist/esm/components/FilterChip.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/FilterChip.d.ts
+type FilterChipVariant = "date" | "default" | "numeric" | "text";
+declare function FilterChip({
+  className,
+  label,
+  onRemove,
+  variant
+}: {
+  className?: string;
+  label: string;
+  onRemove: () => void;
+  variant?: FilterChipVariant;
+}): any;
+//#endregion
+export { FilterChip };
+//# sourceMappingURL=FilterChip.d.ts.map

package/dist/esm/components/FilterChip.js

@@ -0,0 +1,53 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { ThemedBadge, init_ThemedBadge } from "./ThemedBadge.js";
+import { Button, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+
+//#region src/components/FilterChip.tsx
+function FilterChip({ className, label, onRemove, variant = "default" }) {
+	return /* @__PURE__ */ jsxs(ThemedBadge, {
+		className: cn("gap-1 pr-1.5", className),
+		config: FILTER_CHIP_THEME,
+		value: variant,
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Button, {
+			"aria-label": `Remove ${label} filter`,
+			className: "ml-1 h-5 w-5 p-0 hover:bg-transparent",
+			onClick: onRemove,
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+		})]
+	});
+}
+var FILTER_CHIP_THEME;
+var init_FilterChip = __esmMin(() => {
+	init_ThemedBadge();
+	FILTER_CHIP_THEME = {
+		date: {
+			base: "bg-blue-100 text-blue-800",
+			dark: "dark:bg-blue-900/20 dark:text-blue-200",
+			hover: "hover:bg-blue-200/80 dark:hover:bg-blue-800/80"
+		},
+		default: {
+			base: "bg-muted/40 text-muted-foreground",
+			dark: "dark:bg-gray-700 dark:text-gray-300",
+			hover: "hover:bg-muted/60 dark:hover:bg-gray-600"
+		},
+		numeric: {
+			base: "bg-purple-100 text-purple-800",
+			dark: "dark:bg-purple-900/20 dark:text-purple-200",
+			hover: "hover:bg-purple-200/80 dark:hover:bg-purple-800/80"
+		},
+		text: {
+			base: "bg-green-100 text-green-800",
+			dark: "dark:bg-green-900/20 dark:text-green-200",
+			hover: "hover:bg-green-200/80 dark:hover:bg-green-800/80"
+		}
+	};
+});
+
+//#endregion
+init_FilterChip();
+export { FilterChip, init_FilterChip };
+//# sourceMappingURL=FilterChip.js.map

package/dist/esm/components/FilterChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.js","names":[],"sources":["../../../src/components/FilterChip.tsx"],"sourcesContent":["import { Button, cn } from \"@lumeweb/portal-framework-ui-core\";\nimport { X } from \"lucide-react\";\nimport React from \"react\";\n\nimport { ThemedBadge } from \"@/components/ThemedBadge\";\nimport { type BadgeConfig } from \"@/types\";\n\ntype FilterChipVariant = \"date\" | \"default\" | \"numeric\" | \"text\";\n\nconst FILTER_CHIP_THEME: BadgeConfig<FilterChipVariant> = {\n  date: {\n    base: \"bg-blue-100 text-blue-800\",\n    dark: \"dark:bg-blue-900/20 dark:text-blue-200\",\n    hover: \"hover:bg-blue-200/80 dark:hover:bg-blue-800/80\",\n  },\n  default: {\n    base: \"bg-muted/40 text-muted-foreground\",\n    dark: \"dark:bg-gray-700 dark:text-gray-300\",\n    hover: \"hover:bg-muted/60 dark:hover:bg-gray-600\",\n  },\n  numeric: {\n    base: \"bg-purple-100 text-purple-800\",\n    dark: \"dark:bg-purple-900/20 dark:text-purple-200\",\n    hover: \"hover:bg-purple-200/80 dark:hover:bg-purple-800/80\",\n  },\n  text: {\n    base: \"bg-green-100 text-green-800\",\n    dark: \"dark:bg-green-900/20 dark:text-green-200\",\n    hover: \"hover:bg-green-200/80 dark:hover:bg-green-800/80\",\n  },\n};\n\nexport function FilterChip({\n  className,\n  label,\n  onRemove,\n  variant = \"default\",\n}: {\n  className?: string;\n  label: string;\n  onRemove: () => void;\n  variant?: FilterChipVariant;\n}) {\n  return (\n    <ThemedBadge\n      className={cn(\"gap-1 pr-1.5\", className)}\n      config={FILTER_CHIP_THEME}\n      value={variant}>\n      <span>{label}</span>\n      <Button\n        aria-label={`Remove ${label} filter`}\n        className=\"ml-1 h-5 w-5 p-0 hover:bg-transparent\"\n        onClick={onRemove}\n        variant=\"ghost\">\n        <X className=\"h-3.5 w-3.5\" />\n      </Button>\n    </ThemedBadge>\n  );\n}\n"],"mappings":";;;;;;;;AAgCA,SAAgB,WAAW,EACzB,WACA,OACA,UACA,UAAU,aAMT;AACD,QACE,qBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,QAAQ;EACR,OAAO;aACP,oBAAC,oBAAM,QAAa,EACpB,oBAAC;GACC,cAAY,UAAU,MAAM;GAC5B,WAAU;GACV,SAAS;GACT,SAAQ;aACR,oBAAC,KAAE,WAAU,gBAAgB;IACtB;GACG;;;;mBApDqC;CAKjD,oBAAoD;EACxD,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACR;EACD,SAAS;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACR;EACD,SAAS;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACR;EACF"}

package/dist/esm/components/Forms.d.ts

@@ -0,0 +1,55 @@
+import { Checkbox } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { FieldName } from "@conform-to/react";
+
+//#region src/components/Forms.d.ts
+declare const Field: ({
+  className,
+  errors,
+  inputProps,
+  labelProps
+}: {
+  className?: string;
+  errors?: ListOfErrors;
+  inputProps: React.HTMLProps<HTMLInputElement> & {
+    name: FieldName<string>;
+  };
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+}) => any;
+declare const FieldCheckbox: ({
+  className,
+  errors,
+  inputProps,
+  labelProps
+}: {
+  className?: string;
+  errors?: ListOfErrors;
+  inputProps: React.ComponentPropsWithoutRef<typeof Checkbox> & {
+    form: string;
+    name: string;
+    value?: string;
+  };
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+}) => any;
+type ListOfErrors = (null | string | undefined)[] | null | undefined;
+declare function ErrorList({
+  errors,
+  id
+}: {
+  errors?: ListOfErrors;
+  id?: string;
+}): any;
+declare function TextareaField({
+  className,
+  errors,
+  labelProps,
+  textareaProps
+}: {
+  className?: string;
+  errors?: ListOfErrors;
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+  textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+}): any;
+//#endregion
+export { ErrorList, Field, FieldCheckbox, ListOfErrors, TextareaField };
+//# sourceMappingURL=Forms.d.ts.map