@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/types/badge.js

@@ -0,0 +1,42 @@
+//#region src/types/badge.ts
+const BADGE_THEME = {
+	critical: {
+		base: "bg-orange-100 text-orange-800",
+		dark: "dark:bg-orange-900/30 dark:text-orange-400",
+		hover: "hover:bg-orange-200"
+	},
+	default: {
+		base: "bg-gray-100 text-gray-800",
+		dark: "dark:bg-gray-800 dark:text-gray-200",
+		hover: "hover:bg-gray-200"
+	},
+	destructive: {
+		base: "bg-red-100 text-red-800",
+		dark: "dark:bg-red-900/30 dark:text-red-400",
+		hover: "hover:bg-red-200"
+	},
+	info: {
+		base: "bg-cyan-100 text-cyan-800",
+		dark: "dark:bg-cyan-900/30 dark:text-cyan-400",
+		hover: "hover:bg-cyan-200"
+	},
+	secondary: {
+		base: "bg-blue-100 text-blue-800",
+		dark: "dark:bg-blue-900/30 dark:text-blue-400",
+		hover: "hover:bg-blue-200"
+	},
+	success: {
+		base: "bg-green-100 text-green-800",
+		dark: "dark:bg-green-900/30 dark:text-green-400",
+		hover: "hover:bg-green-200"
+	},
+	warning: {
+		base: "bg-yellow-100 text-yellow-800",
+		dark: "dark:bg-yellow-900/30 dark:text-yellow-400",
+		hover: "hover:bg-yellow-200"
+	}
+};
+
+//#endregion
+export { BADGE_THEME };
+//# sourceMappingURL=badge.js.map

package/dist/esm/types/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/types/badge.ts"],"sourcesContent":["export type BadgeConfig<T extends string> = Record<\n  T,\n  {\n    base: string;\n    dark: string;\n    hover?: string;\n    label?: string;\n  }\n>;\n\nexport type BadgeVariant =\n  | \"critical\"\n  | \"default\"\n  | \"destructive\"\n  | \"info\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\";\n\nexport const BADGE_THEME: Record<\n  BadgeVariant,\n  {\n    base: string;\n    dark: string;\n    hover: string;\n  }\n> = {\n  critical: {\n    base: \"bg-orange-100 text-orange-800\",\n    dark: \"dark:bg-orange-900/30 dark:text-orange-400\",\n    hover: \"hover:bg-orange-200\",\n  },\n  default: {\n    base: \"bg-gray-100 text-gray-800\",\n    dark: \"dark:bg-gray-800 dark:text-gray-200\",\n    hover: \"hover:bg-gray-200\",\n  },\n  destructive: {\n    base: \"bg-red-100 text-red-800\",\n    dark: \"dark:bg-red-900/30 dark:text-red-400\",\n    hover: \"hover:bg-red-200\",\n  },\n  info: {\n    base: \"bg-cyan-100 text-cyan-800\",\n    dark: \"dark:bg-cyan-900/30 dark:text-cyan-400\",\n    hover: \"hover:bg-cyan-200\",\n  },\n  secondary: {\n    base: \"bg-blue-100 text-blue-800\",\n    dark: \"dark:bg-blue-900/30 dark:text-blue-400\",\n    hover: \"hover:bg-blue-200\",\n  },\n  success: {\n    base: \"bg-green-100 text-green-800\",\n    dark: \"dark:bg-green-900/30 dark:text-green-400\",\n    hover: \"hover:bg-green-200\",\n  },\n  warning: {\n    base: \"bg-yellow-100 text-yellow-800\",\n    dark: \"dark:bg-yellow-900/30 dark:text-yellow-400\",\n    hover: \"hover:bg-yellow-200\",\n  },\n};\n"],"mappings":";AAmBA,MAAa,cAOT;CACF,UAAU;EACR,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,WAAW;EACT,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACF"}

package/dist/esm/types/index.d.ts

@@ -0,0 +1,3 @@
+import { BADGE_THEME, BadgeConfig, BadgeVariant } from "./badge.js";
+import { BackgroundImages, Color, SystemColors, Theme } from "./theme.js";
+export { BADGE_THEME, BackgroundImages, BadgeConfig, BadgeVariant, Color, SystemColors, Theme };

package/dist/esm/types/index.js

@@ -0,0 +1,3 @@
+import { BADGE_THEME } from "./badge.js";
+
+export { BADGE_THEME };

package/dist/esm/types/theme.d.ts

@@ -0,0 +1,35 @@
+//#region src/types/theme.d.ts
+interface BackgroundImages {
+  login: string;
+  register: string;
+  reset_password: string;
+}
+interface Color {
+  hue: number;
+  lightness: number;
+  saturation: number;
+}
+interface SystemColors {
+  active_ui_element: Color;
+  background: Color;
+  borders: Color;
+  high_contrast_text: Color;
+  hovered_element_border: Color;
+  hovered_solid_bg: Color;
+  hovered_ui_element: Color;
+  low_contrast_text: Color;
+  solid_background: Color;
+  subtle_background: Color;
+  ui_element_background: Color;
+  ui_element_border: Color;
+}
+interface Theme {
+  background_images: BackgroundImages;
+  default?: boolean;
+  id: string;
+  name: string;
+  system_colors: SystemColors;
+}
+//#endregion
+export { BackgroundImages, Color, SystemColors, Theme };
+//# sourceMappingURL=theme.d.ts.map

package/dist/esm/utils/asyncUtils.d.ts

@@ -0,0 +1,5 @@
+//#region src/utils/asyncUtils.d.ts
+declare function runWhenIdle(callback: () => void): void;
+//#endregion
+export { runWhenIdle };
+//# sourceMappingURL=asyncUtils.d.ts.map

package/dist/esm/utils/asyncUtils.js

@@ -0,0 +1,9 @@
+//#region src/utils/asyncUtils.ts
+function runWhenIdle(callback) {
+	if (typeof requestIdleCallback !== "undefined") requestIdleCallback(callback);
+	else setTimeout(callback, 200);
+}
+
+//#endregion
+export { runWhenIdle };
+//# sourceMappingURL=asyncUtils.js.map

package/dist/esm/utils/asyncUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asyncUtils.js","names":[],"sources":["../../../src/utils/asyncUtils.ts"],"sourcesContent":["export function runWhenIdle(callback: () => void) {\n  if (typeof requestIdleCallback !== \"undefined\") {\n    requestIdleCallback(callback);\n  } else {\n    setTimeout(callback, 200);\n  }\n}\n"],"mappings":";AAAA,SAAgB,YAAY,UAAsB;AAChD,KAAI,OAAO,wBAAwB,YACjC,qBAAoB,SAAS;KAE7B,YAAW,UAAU,IAAI"}

package/dist/esm/utils/fileSize.d.ts

@@ -0,0 +1,5 @@
+//#region src/utils/fileSize.d.ts
+declare function formatFileSize(bytes: number): string;
+//#endregion
+export { formatFileSize };
+//# sourceMappingURL=fileSize.d.ts.map

package/dist/esm/utils/fileSize.js

@@ -0,0 +1,18 @@
+//#region src/utils/fileSize.ts
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 Bytes";
+	const k = 1024;
+	const sizes = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+//#endregion
+export { formatFileSize };
+//# sourceMappingURL=fileSize.js.map

package/dist/esm/utils/fileSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileSize.js","names":[],"sources":["../../../src/utils/fileSize.ts"],"sourcesContent":["export function formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 Bytes\";\n\n  const k = 1024;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return (\n    Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i]\n  );\n}\n"],"mappings":";AAAA,SAAgB,eAAe,OAAuB;AACpD,KAAI,UAAU,EAAG,QAAO;CAExB,MAAM,IAAI;CACV,MAAM,QAAQ;EAAC;EAAS;EAAM;EAAM;EAAM;EAAK;CAC/C,MAAM,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;AAEnD,QACE,OAAO,YAAY,QAAQ,KAAK,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,MAAM"}

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { runWhenIdle } from "./asyncUtils.js";
+import { formatFileSize } from "./fileSize.js";
+import { 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 } from "./theme.js";
+export { adjustHue, applyThemeStyles, createDefaultSystemColors, createDefaultTheme, createZeroSystemColors, darkenColor, desaturateColor, ensureWcagContrast, formatFileSize, generateThemeCSS, getContrastRatio, getThemeById, hexToHsl, hslToRawString, hslToRgb, hslToString, isValidBackgroundImages, isValidColor, isValidSystemColors, lightenColor, meetsWcagContrast, meetsWcagNonTextContrast, meetsWcagTextContrast, mergeThemes, rgbToHsl, rgbToLuminance, runWhenIdle, saturateColor, validateTheme };

package/dist/esm/utils/index.js

@@ -0,0 +1,10 @@
+import { adjustHue, applyThemeStyles, createDefaultSystemColors, createDefaultTheme, createZeroSystemColors, darkenColor, desaturateColor, ensureWcagContrast, generateThemeCSS, getContrastRatio, getThemeById, hexToHsl, hslToRawString, hslToRgb, hslToString, init_theme, isValidBackgroundImages, isValidColor, isValidSystemColors, lightenColor, meetsWcagContrast, meetsWcagNonTextContrast, meetsWcagTextContrast, mergeThemes, rgbToHsl, rgbToLuminance, saturateColor, validateTheme } from "./theme.js";
+import { runWhenIdle } from "./asyncUtils.js";
+import { formatFileSize } from "./fileSize.js";
+
+//#region src/utils/index.ts
+init_theme();
+
+//#endregion
+export { adjustHue, applyThemeStyles, createDefaultSystemColors, createDefaultTheme, createZeroSystemColors, darkenColor, desaturateColor, ensureWcagContrast, formatFileSize, generateThemeCSS, getContrastRatio, getThemeById, hexToHsl, hslToRawString, hslToRgb, hslToString, isValidBackgroundImages, isValidColor, isValidSystemColors, lightenColor, meetsWcagContrast, meetsWcagNonTextContrast, meetsWcagTextContrast, mergeThemes, rgbToHsl, rgbToLuminance, runWhenIdle, saturateColor, validateTheme };
+//# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./asyncUtils\";\nexport * from \"./fileSize\";\nexport * from \"./theme\";\n"],"mappings":""}

package/dist/esm/utils/theme.d.ts

@@ -0,0 +1,198 @@
+import { BackgroundImages, Color, SystemColors, Theme } from "../types/theme.js";
+
+//#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.ts.map