@refineui/utilities 0.0.1

package/lib/animation.cjs

@@ -0,0 +1,139 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/animation.ts
+var animation_exports = {};
+__export(animation_exports, {
+  createAnimationStyle: () => createAnimationStyle,
+  createTransitionStyle: () => createTransitionStyle,
+  getReducedMotionQuery: () => getReducedMotionQuery,
+  motionDurations: () => motionDurations,
+  motionEasings: () => motionEasings,
+  motionKeyframesCss: () => motionKeyframesCss,
+  motionMsToNumber: () => motionMsToNumber,
+  motionPresets: () => motionPresets
+});
+module.exports = __toCommonJS(animation_exports);
+var motionDurations = {
+  // Resolve via `@refineui/tokens` CSS (Foundation → semanticInteraction roles)
+  instant: "var(--refineui-motion-duration-instant)",
+  fast: "var(--refineui-motion-duration-fast)",
+  normal: "var(--refineui-motion-duration-normal)",
+  slow: "var(--refineui-motion-duration-slow)",
+  toast: "var(--refineui-motion-duration-panel)"
+};
+var motionEasings = {
+  standard: "var(--refineui-motion-easing-standard)",
+  emphasized: "var(--refineui-motion-easing-emphasized)",
+  linear: "var(--refineui-motion-easing-linear)"
+};
+var motionPresets = {
+  fadeIn: { keyframes: "refineui-fade-in", duration: "normal", easing: "standard", fillMode: "both" },
+  fadeOut: { keyframes: "refineui-fade-out", duration: "normal", easing: "standard", fillMode: "both" },
+  fadeInUp: { keyframes: "refineui-fade-in-up", duration: "normal", easing: "standard", fillMode: "both" },
+  fadeInDown: { keyframes: "refineui-fade-in-down", duration: "normal", easing: "standard", fillMode: "both" },
+  scaleIn: { keyframes: "refineui-scale-in", duration: "normal", easing: "emphasized", fillMode: "both" },
+  scaleOut: { keyframes: "refineui-scale-out", duration: "normal", easing: "emphasized", fillMode: "both" }
+};
+function createAnimationStyle(options) {
+  const preset = motionPresets[options.preset];
+  const duration = options.duration ?? preset.duration;
+  const easing = options.easing ?? preset.easing;
+  if (options.reduceMotion) {
+    return {
+      animationName: "none",
+      animationDuration: motionDurations.instant,
+      animationDelay: "0ms"
+    };
+  }
+  return {
+    animationName: preset.keyframes,
+    animationDuration: typeof duration === "string" && duration in motionDurations ? motionDurations[duration] : duration,
+    animationTimingFunction: typeof easing === "string" && easing in motionEasings ? motionEasings[easing] : easing,
+    animationDelay: `${Math.max(0, options.delayMs ?? 0)}ms`,
+    animationIterationCount: options.iterationCount ?? 1,
+    animationDirection: options.direction ?? "normal",
+    animationPlayState: options.playState ?? "running",
+    animationFillMode: options.fillMode ?? preset.fillMode ?? "both"
+  };
+}
+function createTransitionStyle(options) {
+  const duration = options.duration ?? "fast";
+  const easing = options.easing ?? "standard";
+  const props = Array.isArray(options.properties) ? options.properties.join(", ") : options.properties;
+  if (options.reduceMotion) {
+    return {
+      transitionProperty: props,
+      transitionDuration: motionDurations.instant,
+      transitionTimingFunction: motionEasings.linear,
+      transitionDelay: "0ms"
+    };
+  }
+  return {
+    transitionProperty: props,
+    transitionDuration: typeof duration === "string" && duration in motionDurations ? motionDurations[duration] : duration,
+    transitionTimingFunction: typeof easing === "string" && easing in motionEasings ? motionEasings[easing] : easing,
+    transitionDelay: `${Math.max(0, options.delayMs ?? 0)}ms`
+  };
+}
+function getReducedMotionQuery() {
+  return "@media (prefers-reduced-motion: reduce)";
+}
+function motionMsToNumber(value) {
+  if (value.endsWith("ms")) return Number.parseFloat(value.slice(0, -2)) || 0;
+  if (value.endsWith("s")) return (Number.parseFloat(value.slice(0, -1)) || 0) * 1e3;
+  return Number.parseFloat(value) || 0;
+}
+var motionKeyframesCss = `
+@keyframes refineui-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes refineui-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes refineui-fade-in-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes refineui-fade-in-down {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes refineui-scale-in {
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes refineui-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.98); }
+}
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createAnimationStyle,
+  createTransitionStyle,
+  getReducedMotionQuery,
+  motionDurations,
+  motionEasings,
+  motionKeyframesCss,
+  motionMsToNumber,
+  motionPresets
+});

package/lib/animation.d.cts

@@ -0,0 +1,54 @@
+import { CSSProperties } from 'react';
+
+declare const motionDurations: {
+    readonly instant: "var(--refineui-motion-duration-instant)";
+    readonly fast: "var(--refineui-motion-duration-fast)";
+    readonly normal: "var(--refineui-motion-duration-normal)";
+    readonly slow: "var(--refineui-motion-duration-slow)";
+    readonly toast: "var(--refineui-motion-duration-panel)";
+};
+declare const motionEasings: {
+    readonly standard: "var(--refineui-motion-easing-standard)";
+    readonly emphasized: "var(--refineui-motion-easing-emphasized)";
+    readonly linear: "var(--refineui-motion-easing-linear)";
+};
+type MotionDuration = keyof typeof motionDurations;
+type MotionEasing = keyof typeof motionEasings;
+type MotionPresetName = "fadeIn" | "fadeOut" | "fadeInUp" | "fadeInDown" | "scaleIn" | "scaleOut";
+type MotionPreset = Readonly<{
+    keyframes: string;
+    duration: MotionDuration;
+    easing: MotionEasing;
+    fillMode?: CSSProperties["animationFillMode"];
+}>;
+declare const motionPresets: Readonly<Record<MotionPresetName, MotionPreset>>;
+type AnimationStyleOptions = Readonly<{
+    preset: MotionPresetName;
+    duration?: MotionDuration | string;
+    easing?: MotionEasing | string;
+    delayMs?: number;
+    iterationCount?: CSSProperties["animationIterationCount"];
+    direction?: CSSProperties["animationDirection"];
+    playState?: CSSProperties["animationPlayState"];
+    fillMode?: CSSProperties["animationFillMode"];
+    reduceMotion?: boolean;
+}>;
+declare function createAnimationStyle(options: AnimationStyleOptions): CSSProperties;
+type TransitionStyleOptions = Readonly<{
+    properties: string | readonly string[];
+    duration?: MotionDuration | string;
+    easing?: MotionEasing | string;
+    delayMs?: number;
+    reduceMotion?: boolean;
+}>;
+declare function createTransitionStyle(options: TransitionStyleOptions): CSSProperties;
+declare function getReducedMotionQuery(): string;
+/** "180ms" -> 180 */
+declare function motionMsToNumber(value: string): number;
+/**
+ * Optional CSS you can include once in a global stylesheet.
+ * If you use `createAnimationStyle`, ensure these keyframes exist.
+ */
+declare const motionKeyframesCss = "\n@keyframes refineui-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n@keyframes refineui-fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n@keyframes refineui-fade-in-up {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes refineui-fade-in-down {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes refineui-scale-in {\n  from { opacity: 0; transform: scale(0.98); }\n  to { opacity: 1; transform: scale(1); }\n}\n@keyframes refineui-scale-out {\n  from { opacity: 1; transform: scale(1); }\n  to { opacity: 0; transform: scale(0.98); }\n}\n";
+
+export { type AnimationStyleOptions, type MotionDuration, type MotionEasing, type MotionPresetName, type TransitionStyleOptions, createAnimationStyle, createTransitionStyle, getReducedMotionQuery, motionDurations, motionEasings, motionKeyframesCss, motionMsToNumber, motionPresets };

package/lib/animation.d.ts

@@ -0,0 +1,54 @@
+import { CSSProperties } from 'react';
+
+declare const motionDurations: {
+    readonly instant: "var(--refineui-motion-duration-instant)";
+    readonly fast: "var(--refineui-motion-duration-fast)";
+    readonly normal: "var(--refineui-motion-duration-normal)";
+    readonly slow: "var(--refineui-motion-duration-slow)";
+    readonly toast: "var(--refineui-motion-duration-panel)";
+};
+declare const motionEasings: {
+    readonly standard: "var(--refineui-motion-easing-standard)";
+    readonly emphasized: "var(--refineui-motion-easing-emphasized)";
+    readonly linear: "var(--refineui-motion-easing-linear)";
+};
+type MotionDuration = keyof typeof motionDurations;
+type MotionEasing = keyof typeof motionEasings;
+type MotionPresetName = "fadeIn" | "fadeOut" | "fadeInUp" | "fadeInDown" | "scaleIn" | "scaleOut";
+type MotionPreset = Readonly<{
+    keyframes: string;
+    duration: MotionDuration;
+    easing: MotionEasing;
+    fillMode?: CSSProperties["animationFillMode"];
+}>;
+declare const motionPresets: Readonly<Record<MotionPresetName, MotionPreset>>;
+type AnimationStyleOptions = Readonly<{
+    preset: MotionPresetName;
+    duration?: MotionDuration | string;
+    easing?: MotionEasing | string;
+    delayMs?: number;
+    iterationCount?: CSSProperties["animationIterationCount"];
+    direction?: CSSProperties["animationDirection"];
+    playState?: CSSProperties["animationPlayState"];
+    fillMode?: CSSProperties["animationFillMode"];
+    reduceMotion?: boolean;
+}>;
+declare function createAnimationStyle(options: AnimationStyleOptions): CSSProperties;
+type TransitionStyleOptions = Readonly<{
+    properties: string | readonly string[];
+    duration?: MotionDuration | string;
+    easing?: MotionEasing | string;
+    delayMs?: number;
+    reduceMotion?: boolean;
+}>;
+declare function createTransitionStyle(options: TransitionStyleOptions): CSSProperties;
+declare function getReducedMotionQuery(): string;
+/** "180ms" -> 180 */
+declare function motionMsToNumber(value: string): number;
+/**
+ * Optional CSS you can include once in a global stylesheet.
+ * If you use `createAnimationStyle`, ensure these keyframes exist.
+ */
+declare const motionKeyframesCss = "\n@keyframes refineui-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n@keyframes refineui-fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n@keyframes refineui-fade-in-up {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes refineui-fade-in-down {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes refineui-scale-in {\n  from { opacity: 0; transform: scale(0.98); }\n  to { opacity: 1; transform: scale(1); }\n}\n@keyframes refineui-scale-out {\n  from { opacity: 1; transform: scale(1); }\n  to { opacity: 0; transform: scale(0.98); }\n}\n";
+
+export { type AnimationStyleOptions, type MotionDuration, type MotionEasing, type MotionPresetName, type TransitionStyleOptions, createAnimationStyle, createTransitionStyle, getReducedMotionQuery, motionDurations, motionEasings, motionKeyframesCss, motionMsToNumber, motionPresets };

package/lib/animation.js

@@ -0,0 +1,107 @@
+// src/animation.ts
+var motionDurations = {
+  // Resolve via `@refineui/tokens` CSS (Foundation → semanticInteraction roles)
+  instant: "var(--refineui-motion-duration-instant)",
+  fast: "var(--refineui-motion-duration-fast)",
+  normal: "var(--refineui-motion-duration-normal)",
+  slow: "var(--refineui-motion-duration-slow)",
+  toast: "var(--refineui-motion-duration-panel)"
+};
+var motionEasings = {
+  standard: "var(--refineui-motion-easing-standard)",
+  emphasized: "var(--refineui-motion-easing-emphasized)",
+  linear: "var(--refineui-motion-easing-linear)"
+};
+var motionPresets = {
+  fadeIn: { keyframes: "refineui-fade-in", duration: "normal", easing: "standard", fillMode: "both" },
+  fadeOut: { keyframes: "refineui-fade-out", duration: "normal", easing: "standard", fillMode: "both" },
+  fadeInUp: { keyframes: "refineui-fade-in-up", duration: "normal", easing: "standard", fillMode: "both" },
+  fadeInDown: { keyframes: "refineui-fade-in-down", duration: "normal", easing: "standard", fillMode: "both" },
+  scaleIn: { keyframes: "refineui-scale-in", duration: "normal", easing: "emphasized", fillMode: "both" },
+  scaleOut: { keyframes: "refineui-scale-out", duration: "normal", easing: "emphasized", fillMode: "both" }
+};
+function createAnimationStyle(options) {
+  const preset = motionPresets[options.preset];
+  const duration = options.duration ?? preset.duration;
+  const easing = options.easing ?? preset.easing;
+  if (options.reduceMotion) {
+    return {
+      animationName: "none",
+      animationDuration: motionDurations.instant,
+      animationDelay: "0ms"
+    };
+  }
+  return {
+    animationName: preset.keyframes,
+    animationDuration: typeof duration === "string" && duration in motionDurations ? motionDurations[duration] : duration,
+    animationTimingFunction: typeof easing === "string" && easing in motionEasings ? motionEasings[easing] : easing,
+    animationDelay: `${Math.max(0, options.delayMs ?? 0)}ms`,
+    animationIterationCount: options.iterationCount ?? 1,
+    animationDirection: options.direction ?? "normal",
+    animationPlayState: options.playState ?? "running",
+    animationFillMode: options.fillMode ?? preset.fillMode ?? "both"
+  };
+}
+function createTransitionStyle(options) {
+  const duration = options.duration ?? "fast";
+  const easing = options.easing ?? "standard";
+  const props = Array.isArray(options.properties) ? options.properties.join(", ") : options.properties;
+  if (options.reduceMotion) {
+    return {
+      transitionProperty: props,
+      transitionDuration: motionDurations.instant,
+      transitionTimingFunction: motionEasings.linear,
+      transitionDelay: "0ms"
+    };
+  }
+  return {
+    transitionProperty: props,
+    transitionDuration: typeof duration === "string" && duration in motionDurations ? motionDurations[duration] : duration,
+    transitionTimingFunction: typeof easing === "string" && easing in motionEasings ? motionEasings[easing] : easing,
+    transitionDelay: `${Math.max(0, options.delayMs ?? 0)}ms`
+  };
+}
+function getReducedMotionQuery() {
+  return "@media (prefers-reduced-motion: reduce)";
+}
+function motionMsToNumber(value) {
+  if (value.endsWith("ms")) return Number.parseFloat(value.slice(0, -2)) || 0;
+  if (value.endsWith("s")) return (Number.parseFloat(value.slice(0, -1)) || 0) * 1e3;
+  return Number.parseFloat(value) || 0;
+}
+var motionKeyframesCss = `
+@keyframes refineui-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes refineui-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes refineui-fade-in-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes refineui-fade-in-down {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes refineui-scale-in {
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes refineui-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.98); }
+}
+`;
+export {
+  createAnimationStyle,
+  createTransitionStyle,
+  getReducedMotionQuery,
+  motionDurations,
+  motionEasings,
+  motionKeyframesCss,
+  motionMsToNumber,
+  motionPresets
+};

package/lib/color.cjs

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/color.ts
+var color_exports = {};
+__export(color_exports, {
+  hexToRgba: () => hexToRgba,
+  isColorTokenRef: () => isColorTokenRef,
+  paletteColorCssVar: () => paletteColorCssVar,
+  paletteColorToken: () => paletteColorToken,
+  resolveColorToken: () => resolveColorToken,
+  resolveColorTokenValue: () => resolveColorTokenValue,
+  semanticColorCssVar: () => semanticColorCssVar,
+  semanticColorToken: () => semanticColorToken,
+  shadowWithColor: () => shadowWithColor,
+  toKebab: () => toKebab
+});
+module.exports = __toCommonJS(color_exports);
+function toKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])(\d)/g, "$1-$2").toLowerCase();
+}
+function semanticColorToken(name) {
+  return { type: "semantic", name };
+}
+function paletteColorToken(name) {
+  return { type: "palette", name };
+}
+function semanticColorCssVar(name) {
+  return `var(--refineui-color-alias-${toKebab(name)})`;
+}
+function paletteColorCssVar(name) {
+  return `var(--refineui-color-${toKebab(name)})`;
+}
+function resolveColorToken(token) {
+  return token.type === "semantic" ? semanticColorCssVar(token.name) : paletteColorCssVar(token.name);
+}
+function isColorTokenRef(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value;
+  if (candidate.type !== "semantic" && candidate.type !== "palette") return false;
+  return typeof candidate.name === "string";
+}
+function resolveColorTokenValue(value) {
+  return typeof value === "string" ? value : resolveColorToken(value);
+}
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  const r = h.length === 3 ? parseInt(h[0] + h[0], 16) : parseInt(h.slice(0, 2), 16);
+  const g = h.length === 3 ? parseInt(h[1] + h[1], 16) : parseInt(h.slice(2, 4), 16);
+  const b = h.length === 3 ? parseInt(h[2] + h[2], 16) : parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function shadowWithColor(keyDim, ambientDim, keyColor, ambientColor) {
+  return `${keyDim} ${keyColor}, ${ambientDim} ${ambientColor}`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  hexToRgba,
+  isColorTokenRef,
+  paletteColorCssVar,
+  paletteColorToken,
+  resolveColorToken,
+  resolveColorTokenValue,
+  semanticColorCssVar,
+  semanticColorToken,
+  shadowWithColor,
+  toKebab
+});

package/lib/color.d.cts

@@ -0,0 +1,27 @@
+type SemanticColorTokenRef<TName extends string = string> = Readonly<{
+    type: "semantic";
+    name: TName;
+}>;
+type PaletteColorTokenRef<TName extends string = string> = Readonly<{
+    type: "palette";
+    name: TName;
+}>;
+type ColorTokenRef = SemanticColorTokenRef | PaletteColorTokenRef;
+type ColorTokenValue = ColorTokenRef | string;
+declare function toKebab(str: string): string;
+declare function semanticColorToken<TName extends string>(name: TName): SemanticColorTokenRef<TName>;
+declare function paletteColorToken<TName extends string>(name: TName): PaletteColorTokenRef<TName>;
+declare function semanticColorCssVar(name: string): string;
+declare function paletteColorCssVar(name: string): string;
+declare function resolveColorToken(token: ColorTokenRef): string;
+declare function isColorTokenRef(value: unknown): value is ColorTokenRef;
+declare function resolveColorTokenValue<T extends string>(value: T): T;
+declare function resolveColorTokenValue(value: ColorTokenRef): string;
+/**
+ * Convert hex to rgba (e.g. palette colors)
+ */
+declare function hexToRgba(hex: string, alpha: number): string;
+/** Build a box-shadow string from dimensions (x y blur spread) + colors */
+declare function shadowWithColor(keyDim: string, ambientDim: string, keyColor: string, ambientColor: string): string;
+
+export { type ColorTokenRef, type ColorTokenValue, type PaletteColorTokenRef, type SemanticColorTokenRef, hexToRgba, isColorTokenRef, paletteColorCssVar, paletteColorToken, resolveColorToken, resolveColorTokenValue, semanticColorCssVar, semanticColorToken, shadowWithColor, toKebab };

package/lib/color.d.ts

@@ -0,0 +1,27 @@
+type SemanticColorTokenRef<TName extends string = string> = Readonly<{
+    type: "semantic";
+    name: TName;
+}>;
+type PaletteColorTokenRef<TName extends string = string> = Readonly<{
+    type: "palette";
+    name: TName;
+}>;
+type ColorTokenRef = SemanticColorTokenRef | PaletteColorTokenRef;
+type ColorTokenValue = ColorTokenRef | string;
+declare function toKebab(str: string): string;
+declare function semanticColorToken<TName extends string>(name: TName): SemanticColorTokenRef<TName>;
+declare function paletteColorToken<TName extends string>(name: TName): PaletteColorTokenRef<TName>;
+declare function semanticColorCssVar(name: string): string;
+declare function paletteColorCssVar(name: string): string;
+declare function resolveColorToken(token: ColorTokenRef): string;
+declare function isColorTokenRef(value: unknown): value is ColorTokenRef;
+declare function resolveColorTokenValue<T extends string>(value: T): T;
+declare function resolveColorTokenValue(value: ColorTokenRef): string;
+/**
+ * Convert hex to rgba (e.g. palette colors)
+ */
+declare function hexToRgba(hex: string, alpha: number): string;
+/** Build a box-shadow string from dimensions (x y blur spread) + colors */
+declare function shadowWithColor(keyDim: string, ambientDim: string, keyColor: string, ambientColor: string): string;
+
+export { type ColorTokenRef, type ColorTokenValue, type PaletteColorTokenRef, type SemanticColorTokenRef, hexToRgba, isColorTokenRef, paletteColorCssVar, paletteColorToken, resolveColorToken, resolveColorTokenValue, semanticColorCssVar, semanticColorToken, shadowWithColor, toKebab };

package/lib/color.js

@@ -0,0 +1,50 @@
+// src/color.ts
+function toKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])(\d)/g, "$1-$2").toLowerCase();
+}
+function semanticColorToken(name) {
+  return { type: "semantic", name };
+}
+function paletteColorToken(name) {
+  return { type: "palette", name };
+}
+function semanticColorCssVar(name) {
+  return `var(--refineui-color-alias-${toKebab(name)})`;
+}
+function paletteColorCssVar(name) {
+  return `var(--refineui-color-${toKebab(name)})`;
+}
+function resolveColorToken(token) {
+  return token.type === "semantic" ? semanticColorCssVar(token.name) : paletteColorCssVar(token.name);
+}
+function isColorTokenRef(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value;
+  if (candidate.type !== "semantic" && candidate.type !== "palette") return false;
+  return typeof candidate.name === "string";
+}
+function resolveColorTokenValue(value) {
+  return typeof value === "string" ? value : resolveColorToken(value);
+}
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  const r = h.length === 3 ? parseInt(h[0] + h[0], 16) : parseInt(h.slice(0, 2), 16);
+  const g = h.length === 3 ? parseInt(h[1] + h[1], 16) : parseInt(h.slice(2, 4), 16);
+  const b = h.length === 3 ? parseInt(h[2] + h[2], 16) : parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function shadowWithColor(keyDim, ambientDim, keyColor, ambientColor) {
+  return `${keyDim} ${keyColor}, ${ambientDim} ${ambientColor}`;
+}
+export {
+  hexToRgba,
+  isColorTokenRef,
+  paletteColorCssVar,
+  paletteColorToken,
+  resolveColorToken,
+  resolveColorTokenValue,
+  semanticColorCssVar,
+  semanticColorToken,
+  shadowWithColor,
+  toKebab
+};