nuxt-ui-elements 0.1.7 → 0.1.10

package/dist/runtime/components/backgrounds/BackgroundAurora.vue.d.ts

@@ -1,137 +0,0 @@
-import type { ColorInput } from "../../composables/useColorResolver.js";
-/**
- * Aurora - An animated aurora background component with gradient effects
- *
- * A beautiful CSS-based gradient animation that creates flowing aurora-like effects.
- * Perfect for hero sections, landing pages, or anywhere you want eye-catching backgrounds.
- */
-export type AuroraVariant = "calm" | "energetic" | "cosmic";
-export interface AuroraProps {
-    /**
-     * Pin the aurora to a specific corner or edge of the container.
-     *
-     * When set, creates a radial mask that constrains the aurora effect to originate from
-     * the specified position, creating a spotlight or glow effect from that corner/edge.
-     *
-     * When undefined, aurora flows freely across the entire container without masking.
-     *
-     * Use cases:
-     * - 'top-right': Glow from top-right corner (perfect for hero sections)
-     * - 'bottom-left': Accent from bottom corner
-     * - 'top': Top edge glow (header backgrounds)
-     * - undefined: Full-screen flowing effect (landing pages)
-     *
-     * @default 'top-right'
-     */
-    pin?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    /**
-     * Color for the aurora gradient. Supports:
-     * - Nuxt UI semantic: 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'
-     * - Tailwind colors: 'blue-500', 'red-600', 'purple-400', etc.
-     * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
-     *
-     * The component automatically generates multiple gradient shades from this base color
-     * with different lightness values for a rich, multi-tone aurora effect.
-     *
-     * @example 'primary' - Uses Nuxt UI theme primary color
-     * @example 'purple-500' - Tailwind purple
-     * @example '#8b5cf6' - Direct hex value
-     *
-     * @default 'primary'
-     */
-    color?: ColorInput;
-    /**
-     * Speed of the aurora animation (0-100, where 100 is fastest).
-     *
-     * Controls how quickly the aurora gradient flows across the screen.
-     * - 0: Paused (no animation)
-     * - 1-30: Slow, calm movement
-     * - 40-60: Medium, steady flow
-     * - 70-100: Fast, energetic motion
-     *
-     * Range: 0-100
-     * @default 50
-     */
-    speed?: number;
-    /**
-     * Opacity/visibility of the aurora effect (0-100).
-     *
-     * Controls the overall transparency of the aurora gradient overlay.
-     * Does NOT affect blur amount - use `variant` for preset blur configurations.
-     *
-     * - 0: Completely invisible
-     * - 30: Subtle, gentle glow
-     * - 50: Balanced visibility
-     * - 80-100: Bold, prominent effect
-     *
-     * Range: 0-100
-     * @default 50
-     */
-    opacity?: number;
-    /**
-     * Lightness adjustment for the base color in OKLCH color space (0-100).
-     *
-     * Controls the brightness/saturation of the generated gradient colors.
-     * - Lower values (30-50): Darker, more saturated colors (better for dark mode)
-     * - Higher values (60-80): Lighter, pastel colors (better for light mode)
-     *
-     * The component automatically adjusts this for dark mode, but you can override
-     * using the `dark` prop for custom dark mode appearance.
-     *
-     * Range: 0-100
-     * @default 70 (light mode), 40 (dark mode)
-     */
-    lightness?: number;
-    /**
-     * Dark mode overrides for color, lightness, and opacity.
-     *
-     * Allows you to customize the aurora appearance specifically for dark mode.
-     * Any property not specified will use the default light mode value.
-     *
-     * @example { color: 'blue-400', lightness: 30, opacity: 60 }
-     */
-    dark?: {
-        color?: ColorInput;
-        lightness?: number;
-        opacity?: number;
-    };
-    /**
-     * Animation style variant with preset configurations.
-     *
-     * When set, overrides `speed`, `opacity`, and blur settings with carefully tuned presets.
-     * - 'calm': Slow, gentle, heavily blurred (meditative feel)
-     * - 'energetic': Fast, vibrant, lightly blurred (dynamic feel)
-     * - 'cosmic': Medium speed, high opacity, moderate blur (space-like effect)
-     *
-     * Leave undefined to manually control speed and opacity.
-     */
-    variant?: AuroraVariant;
-    /**
-     * Reverse the animation direction.
-     *
-     * When true, the aurora flows in the opposite direction.
-     *
-     * @default false
-     */
-    reverse?: boolean;
-    /**
-     * Additional CSS classes for the container element.
-     */
-    class?: any;
-}
-export interface AuroraSlots {
-    /**
-     * Default slot content rendered on top of the aurora background.
-     *
-     * Content is positioned with z-index above the aurora effect.
-     */
-    default(): any;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/backgrounds/BackgroundFlickeringGrid.d.vue.ts

@@ -1,120 +0,0 @@
-import { type ColorInput } from "../../composables/useColorResolver.js";
-import type { ComponentConfig } from "../../types/tv.js";
-import backgroundFlickeringGridTheme from "../../themes/background-flickering-grid.js";
-type BackgroundFlickeringGrid = ComponentConfig<typeof backgroundFlickeringGridTheme>;
-/**
- * FlickeringGrid - An animated canvas-based grid background component
- */
-export interface FlickeringGridProps {
-    /**
-     * The square size of the grid (before scaling)
-     * @default 8
-     */
-    size?: number;
-    /**
-     * The gap between grid squares
-     * @default 8
-     */
-    gap?: number;
-    /**
-     * Animation speed (higher = faster flicker)
-     * Scale from 1 (slowest) to 10 (fastest)
-     * @default 5
-     */
-    speed?: number;
-    /**
-     * Apply fade/vignette effect with directional masking
-     * - 'radial': Radial fade from center (spotlight effect)
-     * - 'left', 'right', 'top', 'bottom': Linear fade from specified edge
-     *
-     */
-    fade?: "radial" | "left" | "right" | "top" | "bottom";
-    /**
-     * Color for the grid. Supports:
-     * - Nuxt UI semantic: 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'
-     * - Tailwind colors: 'blue-500', 'red-600', 'slate-200', etc.
-     * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
-     *
-     * This controls the base hue/color of the grid. Use `lightness` to adjust how bright/washed out it appears.
-     *
-     * @example 'primary' - Nuxt UI semantic color
-     * @example 'blue-500' - Tailwind color
-     * @example '#3b82f6' - Direct hex color value
-     *
-     * @default 'neutral'
-     */
-    color?: ColorInput;
-    /**
-     * Lightness adjustment in OKLCH color space (0-100).
-     *
-     * Controls how bright or washed-out the color appears WITHOUT changing transparency.
-     * This modifies the color itself, making it closer to white (higher values) or more saturated (lower values).
-     *
-     * Think of it as a "color brightness" slider:
-     * - Lower values (70-80): Darker, more saturated, vibrant colors
-     * - Medium values (85-92): Balanced, natural colors
-     * - Higher values (93-100): Very light, pastel, washed-out colors (approaching white)
-     *
-     * Use cases:
-     * - Subtle background: `color="blue-500" lightness={95}` → Very light blue tint
-     * - Bold accent: `color="blue-500" lightness={75}` → Vibrant, saturated blue
-     * - Combined with opacity: `lightness={90} opacity={0.3}` → Medium-tone color, very transparent
-     *
-     * Range: 0-100
-     * @default 95
-     */
-    lightness?: number;
-    /**
-     * Opacity/transparency of the grid squares (0-100).
-     *
-     * Controls how see-through the grid is WITHOUT changing the color itself.
-     * This is pure transparency - the color stays the same, just more/less visible.
-     *
-     * Think of it as a "visibility" slider:
-     * - 0: Completely invisible (transparent)
-     * - 30: Very subtle, barely visible
-     * - 50: Medium visibility
-     * - 80: Bold, prominent
-     * - 100: Fully opaque, no transparency
-     *
-     * Use cases:
-     * - Gentle texture: `opacity={20}` → Barely visible background pattern
-     * - Strong effect: `opacity={80}` → Prominent, eye-catching grid
-     * - Combined with lightness: `lightness={95} opacity={50}` → Light color, medium transparency
-     *
-     * Range: 0-100
-     * @default 50
-     */
-    opacity?: number;
-    /**
-     * Dark mode overrides for color, lightness, and opacity.
-     *
-     * Allows you to customize the grid appearance specifically for dark mode.
-     * Any property not specified will use the default light mode value.
-     *
-     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
-     */
-    dark?: {
-        color?: ColorInput;
-        lightness?: number;
-        opacity?: number;
-    };
-    /**
-     * UI slot customization
-     */
-    ui?: BackgroundFlickeringGrid["slots"];
-}
-export interface FlickeringGridSlots {
-    /**
-     * Default slot content rendered on top of the grid
-     */
-    default(): any;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FlickeringGridSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/backgrounds/BackgroundFlickeringGrid.vue

@@ -1,247 +0,0 @@
-<script>
-import backgroundFlickeringGridTheme from "../../themes/background-flickering-grid";
-</script>
-
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
-import { useColorMode } from "#imports";
-import { tv } from "../../utils/tv";
-import theme from "../../themes/background-flickering-grid";
-import { adjustLightness, darkenColor, oklchToRgb } from "../../composables/useThemeColors";
-import {
-  resolveColor
-} from "../../composables/useColorResolver";
-const {
-  size = 8,
-  gap = 9,
-  speed = 5,
-  color = "neutral",
-  lightness = 95,
-  opacity = 50,
-  ...props
-} = defineProps({
-  size: { type: Number, required: false },
-  gap: { type: Number, required: false },
-  speed: { type: Number, required: false },
-  fade: { type: String, required: false },
-  color: { type: null, required: false },
-  lightness: { type: Number, required: false },
-  opacity: { type: Number, required: false },
-  dark: { type: Object, required: false },
-  ui: { type: null, required: false }
-});
-const colorMode = useColorMode();
-const isDark = computed(() => colorMode.value === "dark");
-const effectiveColor = computed(() => {
-  if (isDark.value && props.dark?.color) {
-    return props.dark.color;
-  }
-  return color;
-});
-const effectiveLightness = computed(() => {
-  if (isDark.value && props.dark?.lightness !== void 0) {
-    return props.dark.lightness;
-  }
-  return lightness;
-});
-const effectiveOpacity = computed(() => {
-  const opacityValue = isDark.value && props.dark?.opacity !== void 0 ? props.dark.opacity : opacity;
-  return opacityValue / 100;
-});
-const internalSpeed = computed(() => {
-  return speed * 0.01;
-});
-defineSlots();
-const ui = computed(() => tv(theme)());
-const maskStyle = computed(() => {
-  if (!props.fade) return {};
-  let maskImage;
-  switch (props.fade) {
-    case "radial":
-      maskImage = "radial-gradient(circle at center, black 20%, transparent 90%)";
-      break;
-    case "left":
-      maskImage = "linear-gradient(to right, transparent 0%, black 30%)";
-      break;
-    case "right":
-      maskImage = "linear-gradient(to left, transparent 0%, black 30%)";
-      break;
-    case "top":
-      maskImage = "linear-gradient(to bottom, transparent 0%, black 30%)";
-      break;
-    case "bottom":
-      maskImage = "linear-gradient(to top, transparent 0%, black 30%)";
-      break;
-    default:
-      return {};
-  }
-  return {
-    maskImage,
-    WebkitMaskImage: maskImage
-  };
-});
-const containerRef = ref();
-const canvasRef = ref();
-const context = ref(null);
-const isInView = ref(false);
-const gridParams = ref(null);
-function parseColor(color2) {
-  const match = color2.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (match && match[1] && match[2] && match[3]) {
-    return [Number(match[1]), Number(match[2]), Number(match[3])];
-  }
-  return [255, 255, 255];
-}
-const gridColors = computed(() => {
-  const baseColor = resolveColor(effectiveColor.value);
-  const adjustedColor = adjustLightness(baseColor, effectiveLightness.value);
-  const baseRgb = oklchToRgb(adjustedColor);
-  const darkerColor = darkenColor(adjustedColor, 10);
-  const flickerRgb = oklchToRgb(darkerColor);
-  return {
-    base: parseColor(baseRgb),
-    flicker: parseColor(flickerRgb)
-  };
-});
-function lerp(a, b, t) {
-  return a + (b - a) * t;
-}
-function lerpColor(a, b, t) {
-  if (!a || a.length !== 3) a = [255, 255, 255];
-  if (!b || b.length !== 3) b = [255, 255, 255];
-  return [
-    Math.round(lerp(a[0], b[0], t)),
-    Math.round(lerp(a[1], b[1], t)),
-    Math.round(lerp(a[2], b[2], t))
-  ];
-}
-function rgbToString(rgb, alpha = 1) {
-  return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha})`;
-}
-function setupCanvas(canvas, width, height) {
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = width * dpr;
-  canvas.height = height * dpr;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  const cols = Math.floor(width / (size + gap));
-  const rows = Math.floor(height / (size + gap));
-  const squares = new Float32Array(cols * rows);
-  for (let i = 0; i < squares.length; i++) {
-    squares[i] = Math.random() * effectiveOpacity.value;
-  }
-  return { cols, rows, squares, dpr };
-}
-function updateSquares(squares, deltaTime) {
-  for (let i = 0; i < squares.length; i++) {
-    if (Math.random() < internalSpeed.value * deltaTime) {
-      squares[i] = Math.random() * effectiveOpacity.value;
-    }
-  }
-}
-function drawGrid(ctx, canvasWidth, canvasHeight, cols, rows, squares, dpr) {
-  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-  ctx.fillStyle = "transparent";
-  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-  const colors = gridColors.value;
-  for (let i = 0; i < cols; i++) {
-    for (let j = 0; j < rows; j++) {
-      const idx = i * rows + j;
-      const opacity2 = squares[idx] ?? 0;
-      let cellColor = colors.base;
-      let cellAlpha = opacity2;
-      if (opacity2 > 0.5 * effectiveOpacity.value) {
-        const blendT = (opacity2 - 0.5 * effectiveOpacity.value) / (0.5 * effectiveOpacity.value);
-        cellColor = lerpColor(colors.base, colors.flicker, blendT);
-        cellAlpha = Math.min(1, opacity2 + 0.2);
-      }
-      ctx.fillStyle = rgbToString(cellColor, cellAlpha);
-      ctx.fillRect(
-        i * (size + gap) * dpr,
-        j * (size + gap) * dpr,
-        size * dpr,
-        size * dpr
-      );
-    }
-  }
-}
-function updateCanvasSize() {
-  const newWidth = containerRef.value?.clientWidth || 0;
-  const newHeight = containerRef.value?.clientHeight || 0;
-  if (canvasRef.value) {
-    gridParams.value = setupCanvas(canvasRef.value, newWidth, newHeight);
-  }
-}
-let animationFrameId;
-let resizeObserver;
-let intersectionObserver;
-let lastTime = 0;
-function animate(time) {
-  if (!isInView.value || !gridParams.value || !context.value) return;
-  const deltaTime = (time - lastTime) / 1e3;
-  lastTime = time;
-  updateSquares(gridParams.value.squares, deltaTime);
-  drawGrid(
-    context.value,
-    canvasRef.value.width,
-    canvasRef.value.height,
-    gridParams.value.cols,
-    gridParams.value.rows,
-    gridParams.value.squares,
-    gridParams.value.dpr
-  );
-  animationFrameId = requestAnimationFrame(animate);
-}
-onMounted(() => {
-  if (!canvasRef.value || !containerRef.value) return;
-  context.value = canvasRef.value.getContext("2d");
-  if (!context.value) return;
-  updateCanvasSize();
-  resizeObserver = new ResizeObserver(() => {
-    updateCanvasSize();
-  });
-  intersectionObserver = new IntersectionObserver(
-    (entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      isInView.value = entry.isIntersecting;
-      if (isInView.value) {
-        lastTime = performance.now();
-        animationFrameId = requestAnimationFrame(animate);
-      }
-    },
-    { threshold: 0 }
-  );
-  resizeObserver.observe(containerRef.value);
-  intersectionObserver.observe(canvasRef.value);
-});
-onBeforeUnmount(() => {
-  if (animationFrameId) cancelAnimationFrame(animationFrameId);
-  resizeObserver?.disconnect();
-  intersectionObserver?.disconnect();
-});
-watch(
-  [
-    () => size,
-    () => gap,
-    () => color,
-    () => lightness,
-    () => opacity,
-    () => props.dark?.color,
-    () => props.dark?.lightness,
-    () => props.dark?.opacity
-  ],
-  () => {
-    updateCanvasSize();
-  }
-);
-</script>
-
-<template>
-  <div ref="containerRef" :class="ui.base({ class: [props.ui?.base] })">
-    <ClientOnly>
-      <canvas ref="canvasRef" :class="ui.canvas({ class: props.ui?.canvas })" :style="maskStyle" />
-    </ClientOnly>
-    <slot />
-  </div>
-</template>

package/dist/runtime/components/backgrounds/BackgroundFlickeringGrid.vue.d.ts

@@ -1,120 +0,0 @@
-import { type ColorInput } from "../../composables/useColorResolver.js";
-import type { ComponentConfig } from "../../types/tv.js";
-import backgroundFlickeringGridTheme from "../../themes/background-flickering-grid.js";
-type BackgroundFlickeringGrid = ComponentConfig<typeof backgroundFlickeringGridTheme>;
-/**
- * FlickeringGrid - An animated canvas-based grid background component
- */
-export interface FlickeringGridProps {
-    /**
-     * The square size of the grid (before scaling)
-     * @default 8
-     */
-    size?: number;
-    /**
-     * The gap between grid squares
-     * @default 8
-     */
-    gap?: number;
-    /**
-     * Animation speed (higher = faster flicker)
-     * Scale from 1 (slowest) to 10 (fastest)
-     * @default 5
-     */
-    speed?: number;
-    /**
-     * Apply fade/vignette effect with directional masking
-     * - 'radial': Radial fade from center (spotlight effect)
-     * - 'left', 'right', 'top', 'bottom': Linear fade from specified edge
-     *
-     */
-    fade?: "radial" | "left" | "right" | "top" | "bottom";
-    /**
-     * Color for the grid. Supports:
-     * - Nuxt UI semantic: 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'
-     * - Tailwind colors: 'blue-500', 'red-600', 'slate-200', etc.
-     * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
-     *
-     * This controls the base hue/color of the grid. Use `lightness` to adjust how bright/washed out it appears.
-     *
-     * @example 'primary' - Nuxt UI semantic color
-     * @example 'blue-500' - Tailwind color
-     * @example '#3b82f6' - Direct hex color value
-     *
-     * @default 'neutral'
-     */
-    color?: ColorInput;
-    /**
-     * Lightness adjustment in OKLCH color space (0-100).
-     *
-     * Controls how bright or washed-out the color appears WITHOUT changing transparency.
-     * This modifies the color itself, making it closer to white (higher values) or more saturated (lower values).
-     *
-     * Think of it as a "color brightness" slider:
-     * - Lower values (70-80): Darker, more saturated, vibrant colors
-     * - Medium values (85-92): Balanced, natural colors
-     * - Higher values (93-100): Very light, pastel, washed-out colors (approaching white)
-     *
-     * Use cases:
-     * - Subtle background: `color="blue-500" lightness={95}` → Very light blue tint
-     * - Bold accent: `color="blue-500" lightness={75}` → Vibrant, saturated blue
-     * - Combined with opacity: `lightness={90} opacity={0.3}` → Medium-tone color, very transparent
-     *
-     * Range: 0-100
-     * @default 95
-     */
-    lightness?: number;
-    /**
-     * Opacity/transparency of the grid squares (0-100).
-     *
-     * Controls how see-through the grid is WITHOUT changing the color itself.
-     * This is pure transparency - the color stays the same, just more/less visible.
-     *
-     * Think of it as a "visibility" slider:
-     * - 0: Completely invisible (transparent)
-     * - 30: Very subtle, barely visible
-     * - 50: Medium visibility
-     * - 80: Bold, prominent
-     * - 100: Fully opaque, no transparency
-     *
-     * Use cases:
-     * - Gentle texture: `opacity={20}` → Barely visible background pattern
-     * - Strong effect: `opacity={80}` → Prominent, eye-catching grid
-     * - Combined with lightness: `lightness={95} opacity={50}` → Light color, medium transparency
-     *
-     * Range: 0-100
-     * @default 50
-     */
-    opacity?: number;
-    /**
-     * Dark mode overrides for color, lightness, and opacity.
-     *
-     * Allows you to customize the grid appearance specifically for dark mode.
-     * Any property not specified will use the default light mode value.
-     *
-     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
-     */
-    dark?: {
-        color?: ColorInput;
-        lightness?: number;
-        opacity?: number;
-    };
-    /**
-     * UI slot customization
-     */
-    ui?: BackgroundFlickeringGrid["slots"];
-}
-export interface FlickeringGridSlots {
-    /**
-     * Default slot content rendered on top of the grid
-     */
-    default(): any;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FlickeringGridSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/composables/useColorResolver.d.ts

@@ -1,40 +0,0 @@
-import colors from "tailwindcss/colors";
-/**
- * Nuxt UI semantic colors
- */
-declare const SEMANTIC_COLORS: readonly ["primary", "secondary", "success", "info", "warning", "error", "neutral"];
-export type SemanticColor = (typeof SEMANTIC_COLORS)[number];
-/**
- * Tailwind color names
- */
-type TailwindColorName = keyof typeof colors;
-/**
- * Tailwind color shades
- */
-type TailwindShade = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950";
-/**
- * Tailwind color format: colorName-shade (e.g., 'blue-500', 'red-600')
- */
-export type TailwindColor = `${TailwindColorName}-${TailwindShade}`;
-/**
- * Supported color input formats
- */
-export type ColorInput = SemanticColor | TailwindColor | (string & {});
-/**
- * Resolve a color input to an actual color value
- * Supports:
- * - Nuxt UI semantic colors: 'primary', 'secondary', etc.
- * - Tailwind colors: 'blue-500', 'red-600', etc.
- * - Direct color values: '#3b82f6', 'oklch(0.6 0.15 250)', etc.
- *
- * @param colorInput - The color string to resolve
- * @param fallback - Fallback color if resolution fails (default: 'neutral')
- * @returns The resolved color value
- */
-export declare function resolveColor(colorInput: string | undefined, fallback?: SemanticColor): string;
-/**
- * Resolve a color and ensure it returns an OKLCH string
- * Useful when you need consistent color space for manipulation
- */
-export declare function resolveColorAsOklch(colorInput: string | undefined, fallback?: SemanticColor): string;
-export {};