@rokkit/core 1.7.0 → 1.8.1

package/dist/colors/index.d.ts

@@ -1,4 +1,4 @@
-import type { PresetMiniColors } from '@unocss/preset-mini/colors';
+import { colors } from '@unocss/preset-mini/colors';
 import extraColors from './extra.json';
 export declare const shades: number[];
 export declare const defaultPalette: string[];
@@ -44,5 +44,5 @@ export declare const syntaxColors: {
         };
     };
 };
-export declare const defaultColors: PresetMiniColors & typeof extraColors;
+export declare const defaultColors: typeof colors & typeof extraColors;
 export { categoricalPalette, categoricalFamilies } from './brewer.js';

package/dist/dom.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Detects text direction based on HTML lang attribute
+ * @returns {'ltr' | 'rtl'}
+ */
+export function detectDirection(): "ltr" | "rtl";
+/**
+ * Checks if current document direction is RTL
+ * @returns {boolean}
+ */
+export function isRTL(): boolean;
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element: HTMLElement, attribute: string): HTMLElement | null;

package/dist/icons.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Generates icon shortcuts for a collection of icons
+ *
+ * @param {string[]} icons
+ * @param {string} collection
+ * @param {string} variants
+ * @returns {Object}
+ */
+export function iconShortcuts(icons: string[], collection: string, variants: string): Object;
+/**
+ * Detects whether an icon value is a CSS class or a literal character
+ * (kanji, emoji, single letter, etc.).
+ *
+ * Anything more than one grapheme is treated as a class — including bare
+ * semantic names like `file-svelte` which UnoCSS expands to the configured
+ * icon collection via `iconShortcuts(DEFAULT_ICONS, …)`. Single characters
+ * (kanji, emoji, single letters) render as literal text.
+ *
+ * @param {string | null | undefined} icon
+ * @returns {boolean} true if icon should render as a CSS class
+ */
+export function isIconClass(icon: string | null | undefined): boolean;
+/**
+ * A utility function that detects if a string is an image URL or image data (base64)
+ *
+ * @param {string} str - The string to check
+ * @returns {string|null} - Returns the original string if it's an image URL or image data, otherwise null
+ */
+export function getImage(str: string): string | null;

package/dist/keys.d.ts

@@ -0,0 +1,13 @@
+/** Item keys ↔ index paths (`[0, 2]` ↔ `'0-2'`). */
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path: string[]): string;
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key: string): string[];

package/dist/oklch.d.ts

@@ -0,0 +1,23 @@
+/** Colour conversion: hex ↔ `r,g,b` and hex ↔ OKLCH (CSS Color Level 4, via XYZ D65). */
+/**
+ * convert hex string to `{r},{g},{b}`
+ * @param {string} hex
+ * @return {string}
+ */
+export function hex2rgb(hex: string): string;
+/**
+ * Convert hex string to OKLCH components: `{L} {C} {H}`
+ * Uses CSS Color Level 4 two-step conversion via XYZ D65 for precision.
+ * @param {string} hex - 6-digit hex color (with or without #)
+ * @returns {string} space-separated OKLCH components for CSS `oklch(L C H / alpha)`
+ */
+export function hex2oklch(hex: string): string;
+/**
+ * Convert OKLCH components back to hex string.
+ * Uses CSS Color Level 4 two-step conversion via XYZ D65 for precision.
+ * @param {number} L - Lightness 0-1
+ * @param {number} C - Chroma >= 0
+ * @param {number} H - Hue 0-360 degrees
+ * @returns {string} hex color string (#rrggbb)
+ */
+export function oklch2hex(L: number, C: number, H: number): string;

package/dist/snippets.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Get snippet function from an object
+ * @param {Object} obj
+ * @param {string} key
+ * @param {null|Function} defaultSnippet
+ * @returns {Function|undefined}
+ */
+export function getSnippet(obj: Object, key: string, defaultSnippet?: null | Function): Function | undefined;
+/**
+ * Resolve which snippet to render for a proxy item.
+ *
+ * Reads the proxy's `snippet` field (via proxy.get('snippet'), honoring fields.snippet)
+ * for a per-item named override first (e.g. item.snippet = 'highlighted').
+ * Falls back to the component-level fallback snippet name (e.g. 'itemContent' / 'groupContent').
+ * Returns null if neither is found.
+ *
+ * @param {Record<string, unknown>} snippets  - snippets passed to the component
+ * @param {{ get: (key: string) => unknown }} proxy  - a ProxyItem; its snippet field is read via proxy.get('snippet')
+ * @param {string} [fallback]                  - fallback snippet name; defaults to ITEM_SNIPPET ('itemContent')
+ * @returns {Function | null}
+ */
+export function resolveSnippet(snippets: Record<string, unknown>, proxy: {
+    get: (key: string) => unknown;
+}, fallback?: string): Function | null;

package/dist/theme.d.ts

@@ -1,3 +1,11 @@
+import { ColorSpace } from './color-space';
+/** One palette: shade (`'50'`…`'950'`, `'DEFAULT'`) → colour value in the adapter's notation. */
+type Palette = Record<string, string>;
+/** Palette name → palette. */
+type Colors = Record<string, Palette>;
+/** Role (`primary`, `surface`…) → palette name. */
+type Mapping = Record<string, string>;
+type Adapter = ReturnType<typeof ColorSpace.create>;
 /**
  * Generate shades for a color using css variable and a ColorSpace adapter.
  *
@@ -5,9 +13,7 @@
  * @param {string|import('./color-space').ColorSpace} space - color space name or adapter instance
  * @returns {Record<string|number, string>}
  */
-export declare function shadesOf(name: any, space?: string): {
-    DEFAULT: string;
-};
+export declare function shadesOf(name: string, space?: string | Adapter): Record<string, string>;
 /**
  * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
  *
@@ -16,19 +22,7 @@ export declare function shadesOf(name: any, space?: string): {
  * @param {string} [colorSpace] - Color space name for CSS variable values.
  * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
  */
-export declare function themeRules(mapping: {
-    surface: string;
-    ink: string;
-    primary: string;
-    secondary: string;
-    tertiary: string;
-    accent: string;
-    success: string;
-    warning: string;
-    danger: string;
-    error: string;
-    info: string;
-} | undefined, colors: any, colorSpace: any): {};
+export declare function themeRules(mapping?: Mapping, colors?: Colors, colorSpace?: string): Record<string, string>;
 /**
  * Generates "on-color" text shortcuts for readable text on colored backgrounds.
  *
@@ -45,7 +39,7 @@ export declare function themeRules(mapping: {
  * @param {string} [onColor='#fafafa'] - resolved on-color hex for this role
  * @returns {Array} Array of shortcut definitions
  */
-export declare function contrastShortcuts(name: any, onColor?: string): (RegExp | (([, end]: [any, any]) => string))[][];
+export declare function contrastShortcuts(name: string, onColor?: string): (RegExp | (([, end]: string[]) => string))[][];
 /**
  * Near-black / near-white on-color endpoints. Not pure #000/#fff — a hair of
  * lift reads softer on a saturated fill while still clearing AA (near-black is
@@ -84,31 +78,19 @@ export declare class Theme {
      * @param {import('./types.js').ColorTheme & { colorSpace?: string }} param0
      */
     constructor({ colors, mapping, colorSpace }?: {
-        colors?: any;
-        mapping?: {
-            surface: string;
-            ink: string;
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            accent: string;
-            success: string;
-            warning: string;
-            danger: string;
-            error: string;
-            info: string;
-        } | undefined;
-        colorSpace?: string | undefined;
+        colors?: Colors;
+        mapping?: Record<string, string | null>;
+        colorSpace?: string;
     });
-    get colors(): any;
-    set colors(colors: any);
-    get mapping(): any;
-    set mapping(mapping: any);
+    get colors(): Colors;
+    set colors(colors: Colors);
+    get mapping(): Record<string, string | null>;
+    set mapping(mapping: Record<string, string | null>);
     get colorSpace(): string;
     set colorSpace(colorSpace: string);
-    mapVariant(color: any, variant: any): {};
-    getColorRules(mapping?: null): {};
-    getPalette(mapping?: null): {};
+    mapVariant(color: Palette, variant: string): Record<string, string>;
+    getColorRules(mapping?: Mapping | null): Record<string, Record<string, string>>;
+    getPalette(mapping?: Mapping | null): Record<string, string>;
     /**
      * Returns the named-token layer as a map of `--{name}: <resolved value>` entries.
      *
@@ -146,5 +128,6 @@ export declare class Theme {
      * Mirrors what getPalette does for all roles, but scoped to one.
      */
     getPaletteForRole(role: string): Record<string, string>;
-    getShortcuts(name: any): (RegExp | (([, end]: [any, any]) => string))[][];
+    getShortcuts(name: string): (RegExp | (([, end]: string[]) => string))[][];
 }
+export {};

package/dist/utils.d.ts

@@ -1,122 +1,6 @@
-/**
- * Detects text direction based on HTML lang attribute
- * @returns {'ltr' | 'rtl'}
- */
-export function detectDirection(): "ltr" | "rtl";
-/**
- * Checks if current document direction is RTL
- * @returns {boolean}
- */
-export function isRTL(): boolean;
-/**
- * Finds the closest ancestor of the given element that has the given attribute.
- *
- * @param {HTMLElement} element
- * @param {string} attribute
- * @returns {HTMLElement|null}
- */
-export function getClosestAncestorWithAttribute(element: HTMLElement, attribute: string): HTMLElement | null;
-/**
- * A function that performs no operations.
- */
-export function noop(): void;
-/**
- * Generates a random id
- *
- * @returns {string} A random id
- */
-export function id(prefix?: string): string;
-/**
- * Check if a value is a json object
- *
- * @param {*} val
- * @returns {boolean}
- */
-export function isObject(val: any): boolean;
-/**
- * Converts the value to a string. If the value is an object, it will convert it to a JSON string.
- *
- * @param {*} value
- * @returns {string}
- */
-export function toString(value: any): string;
-/**
- * Generates icon shortcuts for a collection of icons
- *
- * @param {string[]} icons
- * @param {string} collection
- * @param {string} variants
- * @returns {Object}
- */
-export function iconShortcuts(icons: string[], collection: string, variants: string): Object;
-/**
- * Scales the path by the size
- *
- * @param {number} size
- * @param {string|number} x
- * @returns {string|number}
- */
-export function scaledPath(size: number, x: string | number): string | number;
-/**
- * Gets a key string from path
- * @param {string[]} path
- * @returns {string}
- */
-export function getKeyFromPath(path: string[]): string;
-/**
- * Gets a path array from key string
- * @param {string} key
- * @returns {string[]}
- */
-export function getPathFromKey(key: string): string[];
-/**
- * Get snippet function from an object
- * @param {Object} obj
- * @param {string} key
- * @param {null|Function} defaultSnippet
- * @returns {Function|undefined}
- */
-export function getSnippet(obj: Object, key: string, defaultSnippet?: null | Function): Function | undefined;
-export function resolveSnippet(snippets: any, proxy: any, fallback?: string): Function | null;
-/**
- * convert hex string to `{r},{g},{b}`
- * @param {string} hex
- * @return {string}
- */
-export function hex2rgb(hex: string): string;
-/**
- * Convert hex string to OKLCH components: `{L} {C} {H}`
- * Uses CSS Color Level 4 two-step conversion via XYZ D65 for precision.
- * @param {string} hex - 6-digit hex color (with or without #)
- * @returns {string} space-separated OKLCH components for CSS `oklch(L C H / alpha)`
- */
-export function hex2oklch(hex: string): string;
-/**
- * Convert OKLCH components back to hex string.
- * Uses CSS Color Level 4 two-step conversion via XYZ D65 for precision.
- * @param {number} L - Lightness 0-1
- * @param {number} C - Chroma >= 0
- * @param {number} H - Hue 0-360 degrees
- * @returns {string} hex color string (#rrggbb)
- */
-export function oklch2hex(L: number, C: number, H: number): string;
-/**
- * Detects whether an icon value is a CSS class or a literal character
- * (kanji, emoji, single letter, etc.).
- *
- * Anything more than one grapheme is treated as a class — including bare
- * semantic names like `file-svelte` which UnoCSS expands to the configured
- * icon collection via `iconShortcuts(DEFAULT_ICONS, …)`. Single characters
- * (kanji, emoji, single letters) render as literal text.
- *
- * @param {string | null | undefined} icon
- * @returns {boolean} true if icon should render as a CSS class
- */
-export function isIconClass(icon: string | null | undefined): boolean;
-/**
- * A utility function that detects if a string is an image URL or image data (base64)
- *
- * @param {string} str - The string to check
- * @returns {string|null} - Returns the original string if it's an image URL or image data, otherwise null
- */
-export function getImage(str: string): string | null;
+export * from "./dom.js";
+export * from "./values.js";
+export * from "./icons.js";
+export * from "./keys.js";
+export * from "./snippets.js";
+export * from "./oklch.js";

package/dist/values.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A function that performs no operations.
+ */
+export function noop(): void;
+/**
+ * Generates a random id
+ *
+ * @returns {string} A random id
+ */
+export function id(prefix?: string): string;
+/**
+ * Check if a value is a json object
+ *
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isObject(val: any): boolean;
+/**
+ * Converts the value to a string. If the value is an object, it will convert it to a JSON string.
+ *
+ * @param {*} value
+ * @returns {string}
+ */
+export function toString(value: any): string;
+/**
+ * Scales the path by the size
+ *
+ * @param {number} size
+ * @param {string|number} x
+ * @returns {string|number}
+ */
+export function scaledPath(size: number, x: string | number): string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "repository": {
     "type": "git",
@@ -47,6 +47,6 @@
     "ramda": "^0.32.0"
   },
   "devDependencies": {
-    "@rokkit/icons": "1.7.0"
+    "@rokkit/icons": "1.8.0"
   }
 }

package/src/colors/index.ts

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { colors } from '@unocss/preset-mini/colors'
-import type { PresetMiniColors } from '@unocss/preset-mini/colors'
 import syntaxColorPalette from './syntax.json' with { type: 'json' }
 import extraColors from './extra.json' with { type: 'json' }
 
@@ -19,7 +16,9 @@ export const defaultPalette = [
 ]
 
 export const syntaxColors = syntaxColorPalette
-export const defaultColors: PresetMiniColors & typeof extraColors = {
+// `typeof colors`: preset-mini 66 no longer exports a `PresetMiniColors` type — the value is
+// the source of truth for its own shape.
+export const defaultColors: typeof colors & typeof extraColors = {
 	...colors,
 	...extraColors
 }

package/src/dom.js

@@ -0,0 +1,60 @@
+/** DOM reads: the document's text direction, and attribute lookups up the tree. */
+
+/**
+ * RTL language codes (ISO 639-1)
+ * @type {string[]}
+ */
+const RTL_LANGUAGES = [
+	'ar', // Arabic
+	'he', // Hebrew
+	'fa', // Persian/Farsi
+	'ur', // Urdu
+	'yi', // Yiddish
+	'ps', // Pashto
+	'sd', // Sindhi
+	'ug', // Uyghur
+	'ku', // Kurdish (Sorani)
+	'dv' // Divehi/Maldivian
+]
+
+/**
+ * Checks dir/lang attributes of the html element for RTL
+ * @returns {'ltr' | 'rtl'}
+ */
+function dirFromHtmlElement() {
+	const htmlDir = document.documentElement.getAttribute('dir')
+	if (htmlDir === 'rtl' || htmlDir === 'ltr') return htmlDir
+
+	const lang = document.documentElement.getAttribute('lang')
+	const primaryLang = lang ? lang.split('-')[0].toLowerCase() : ''
+	return RTL_LANGUAGES.includes(primaryLang) ? 'rtl' : 'ltr'
+}
+
+/**
+ * Detects text direction based on HTML lang attribute
+ * @returns {'ltr' | 'rtl'}
+ */
+export function detectDirection() {
+	if (typeof document === 'undefined') return 'ltr'
+	return dirFromHtmlElement()
+}
+
+/**
+ * Checks if current document direction is RTL
+ * @returns {boolean}
+ */
+export function isRTL() {
+	return detectDirection() === 'rtl'
+}
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}

package/src/icons.js

@@ -0,0 +1,94 @@
+/** Icons: shortcut maps for a collection, class-vs-literal detection, image sources. */
+import { DATA_IMAGE_REGEX } from './constants'
+
+/**
+ * Generates icon shortcuts for a collection of icons
+ *
+ * @param {string[]} icons
+ * @param {string} collection
+ * @param {string} variants
+ * @returns {Object}
+ */
+export function iconShortcuts(icons, collection, variants) {
+	const suffix = variants ? `-${variants}` : ''
+	const shortcuts = !collection
+		? {}
+		: icons.reduce(
+				(acc, name) => ({
+					...acc,
+					[name]: [collection, name].join(':') + suffix
+				}),
+				{}
+			)
+
+	return shortcuts
+}
+
+/**
+ * Detects whether an icon value is a CSS class or a literal character
+ * (kanji, emoji, single letter, etc.).
+ *
+ * Anything more than one grapheme is treated as a class — including bare
+ * semantic names like `file-svelte` which UnoCSS expands to the configured
+ * icon collection via `iconShortcuts(DEFAULT_ICONS, …)`. Single characters
+ * (kanji, emoji, single letters) render as literal text.
+ *
+ * @param {string | null | undefined} icon
+ * @returns {boolean} true if icon should render as a CSS class
+ */
+export function isIconClass(icon) {
+	if (!icon || typeof icon !== 'string') return false
+	// Spread to count graphemes, not UTF-16 code units, so multi-codepoint
+	// emoji (e.g. 👨‍👩‍👧‍👦) and single CJK characters don't get misread.
+	return [...icon].length > 1
+}
+
+/**
+ * Checks if a string is a valid image URL
+ *
+ * @param {string} str - The string to check
+ * @returns {boolean} - Returns true if the string is an image URL
+ */
+function isImageUrl(str) {
+	// Fallback regex-based validation
+	const fallbackValidation = () => {
+		const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
+		return urlRegex.test(str)
+	}
+
+	// Check if the string looks like a URL
+	try {
+		// Use browser-native URL constructor if available
+		if (typeof URL !== 'undefined') {
+			const url = new URL(str)
+			// Only accept HTTP/HTTPS protocols
+			if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+				return false
+			}
+			// Check common image extensions
+			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff']
+			const path = url.pathname.toLowerCase()
+			return imageExtensions.some((ext) => path.endsWith(ext))
+		}
+
+		// Fallback if URL constructor is not available
+		return fallbackValidation()
+	} catch {
+		// Fallback if URL constructor fails
+		return fallbackValidation()
+	}
+}
+/**
+ * A utility function that detects if a string is an image URL or image data (base64)
+ *
+ * @param {string} str - The string to check
+ * @returns {string|null} - Returns the original string if it's an image URL or image data, otherwise null
+ */
+export function getImage(str) {
+	if (DATA_IMAGE_REGEX.test(str)) return str
+	// Check if it's a URL
+
+	if (isImageUrl(str)) return str
+
+	return null
+}

package/src/keys.js

@@ -0,0 +1,19 @@
+/** Item keys ↔ index paths (`[0, 2]` ↔ `'0-2'`). */
+
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path) {
+	return Array.isArray(path) ? path.join('-') : [path].join('-')
+}
+
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key) {
+	return key.split('-').map(Number)
+}