nuxt-ui-elements 0.1.1 → 0.1.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -9,7 +9,8 @@ const module$1 = defineNuxtModule({
     prefix: "UE"
   },
   moduleDependencies: {
-    "motion-v/nuxt": {}
+    "motion-v/nuxt": {},
+    "@nuxtjs/color-mode": {}
   },
   setup(options, _nuxt) {
     const resolver = createResolver(import.meta.url);

package/dist/runtime/components/background/Aurora.d.vue.ts

@@ -48,13 +48,13 @@ export interface AuroraSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<AuroraProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
     pin: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
     speed: number;
     intensity: number;
     reverse: boolean;
-}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/background/Aurora.vue.d.ts

@@ -48,13 +48,13 @@ export interface AuroraSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<AuroraProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AuroraProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AuroraProps> & Readonly<{}>, {
     pin: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
     speed: number;
     intensity: number;
     reverse: boolean;
-}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuroraSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/background/FlickeringGrid.d.vue.ts

@@ -1,3 +1,4 @@
+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>;
@@ -7,61 +8,70 @@ type BackgroundFlickeringGrid = ComponentConfig<typeof backgroundFlickeringGridT
 export interface FlickeringGridProps {
     /**
      * The square size of the grid (before scaling)
-     * @default 12
+     * @default 8
      */
-    squareSize?: number;
+    size?: number;
     /**
      * The gap between grid squares
-     * @default 6
+     * @default 8
      */
-    gridGap?: number;
+    gap?: number;
     /**
-     * The flicker animation speed (higher = faster)
-     * @default 0.3
+     * Animation speed (higher = faster flicker)
+     * Scale from 1 (slowest) to 10 (fastest)
+     * @default 5
      */
-    flickerChance?: number;
+    speed?: number;
     /**
-     * Speed multiplier for flicker animation
-     * @default 1
+     * Apply fade/vignette effect with directional masking
+     * - 'radial': Radial fade from center (spotlight effect)
+     * - 'left', 'right', 'top', 'bottom': Linear fade from specified edge
+     *
      */
-    flickerSpeed?: number;
+    fade?: "radial" | "left" | "right" | "top" | "bottom";
     /**
-     * Gradient direction for the grid
-     * @default 'left-right'
-     */
-    gradientDirection?: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
-    /**
-     * Maximum opacity of flickering squares
-     * @default 0.3
-     */
-    maxOpacity?: number;
-    /**
-     * Apply radial fade to edges
-     * @default true
-     */
-    fade?: boolean;
-    /**
-     * Canvas width (defaults to container width)
-     */
-    width?: number;
-    /**
-     * Canvas height (defaults to container height)
-     */
-    height?: number;
-    /**
-     * Color variant
+     * 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)'
+     *
+     * Choose lighter shades (e.g., 'blue-200') for subtle backgrounds or darker shades (e.g., 'blue-600') for bolder effects.
+     *
+     * @example 'primary' - Nuxt UI semantic color
+     * @example 'blue-200' - Light Tailwind color for subtle effect
+     * @example 'blue-600' - Dark Tailwind color for bold effect
+     * @example '#e0f2fe' - Direct hex color value (light blue)
+     *
      * @default 'neutral'
      */
-    color?: BackgroundFlickeringGrid["variants"]["color"];
+    color?: ColorInput;
     /**
-     * Style variant
-     * @default 'subtle'
+     * Opacity/visibility of the grid squares.
+     * Controls how transparent the grid appears.
+     *
+     * - 0: Completely invisible
+     * - 0.3: Subtle, background texture
+     * - 0.5: Medium visibility
+     * - 0.8: Bold, prominent
+     * - 1: Fully opaque
+     *
+     * Range: 0-1
+     *
+     * @default 0.5
      */
-    variant?: BackgroundFlickeringGrid["variants"]["variant"];
+    opacity?: number;
     /**
-     * Additional CSS classes for the container
+     * Dark mode overrides for color 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', opacity: 0.3 }
      */
-    class?: any;
+    dark?: {
+        color?: ColorInput;
+        opacity?: number;
+    };
     /**
      * UI slot customization
      */
@@ -75,18 +85,7 @@ export interface FlickeringGridSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
-    color: BackgroundFlickeringGrid["variants"]["color"];
-    variant: BackgroundFlickeringGrid["variants"]["variant"];
-    class: any;
-    squareSize: number;
-    gridGap: number;
-    flickerChance: number;
-    flickerSpeed: number;
-    gradientDirection: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
-    maxOpacity: number;
-    fade: boolean;
-}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, FlickeringGridSlots>;
+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/background/FlickeringGrid.vue

@@ -4,66 +4,95 @@ import backgroundFlickeringGridTheme from "../../themes/background-flickering-gr
 
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useColorMode } from "#imports";
 import { tv } from "../../utils/tv";
-import { calculateGradientIntensity } from "../../composables/useGradient";
 import theme from "../../themes/background-flickering-grid";
-import { getThemeColor, adjustLightness, oklchToRgb } from "../../composables/useThemeColors";
-const props = defineProps({
-  squareSize: { type: Number, required: false, default: 8 },
-  gridGap: { type: Number, required: false, default: 8 },
-  flickerChance: { type: Number, required: false, default: 0.3 },
-  flickerSpeed: { type: Number, required: false, default: 0.2 },
-  gradientDirection: { type: String, required: false, default: "left-right" },
-  maxOpacity: { type: Number, required: false, default: 0.3 },
-  fade: { type: Boolean, required: false, default: true },
-  width: { type: Number, required: false },
-  height: { type: Number, required: false },
-  color: { type: null, required: false, default: "neutral" },
-  variant: { type: null, required: false, default: "subtle" },
-  class: { type: null, required: false, default: "" },
+import { darkenColor, oklchToRgb } from "../../composables/useThemeColors";
+import {
+  resolveColor
+} from "../../composables/useColorResolver";
+const {
+  size = 8,
+  gap = 9,
+  speed = 5,
+  color = "neutral",
+  opacity = 0.5,
+  ...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 },
+  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 effectiveOpacity = computed(() => {
+  if (isDark.value && props.dark?.opacity !== void 0) {
+    return props.dark.opacity;
+  }
+  return opacity;
+});
+const internalSpeed = computed(() => {
+  return speed * 0.01;
+});
 defineSlots();
-const ui = computed(
-  () => tv(theme)({
-    color: props.color,
-    variant: props.variant
-  })
-);
+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: "radial-gradient(circle at center, black 20%, transparent 90%)",
-    WebkitMaskImage: "radial-gradient(circle at center, black 20%, transparent 90%)"
+    maskImage,
+    WebkitMaskImage: maskImage
   };
 });
 const containerRef = ref();
 const canvasRef = ref();
 const context = ref(null);
 const isInView = ref(false);
-const canvasSize = ref({ width: 0, height: 0 });
 const gridParams = ref(null);
-function parseColor(color) {
-  const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+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 = getThemeColor(props.color, 500);
-  const lightnessMap = {
-    subtle: { start: 96, end: 98, flicker: 93 },
-    soft: { start: 92, end: 96, flicker: 88 },
-    solid: { start: 80, end: 92, flicker: 70 }
-  };
-  const lightness = lightnessMap[props.variant];
-  const startRgb = oklchToRgb(adjustLightness(baseColor, lightness.start));
-  const endRgb = oklchToRgb(adjustLightness(baseColor, lightness.end));
-  const flickerRgb = oklchToRgb(adjustLightness(baseColor, lightness.flicker));
+  const baseColor = resolveColor(effectiveColor.value);
+  const baseRgb = oklchToRgb(baseColor);
+  const darkerColor = darkenColor(baseColor, 10);
+  const flickerRgb = oklchToRgb(darkerColor);
   return {
-    start: parseColor(startRgb),
-    end: parseColor(endRgb),
+    base: parseColor(baseRgb),
     flicker: parseColor(flickerRgb)
   };
 });
@@ -82,64 +111,56 @@ function lerpColor(a, b, t) {
 function rgbToString(rgb, alpha = 1) {
   return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha})`;
 }
-function getGradientT(i, j, cols, rows) {
-  const x = cols > 1 ? i / (cols - 1) : 0.5;
-  const y = rows > 1 ? j / (rows - 1) : 0.5;
-  return calculateGradientIntensity(x, y, props.gradientDirection);
-}
 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 / (props.squareSize + props.gridGap));
-  const rows = Math.floor(height / (props.squareSize + props.gridGap));
+  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() * props.maxOpacity;
+    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() < props.flickerChance * props.flickerSpeed * deltaTime) {
-      squares[i] = Math.random() * props.maxOpacity;
+    if (Math.random() < internalSpeed.value * deltaTime) {
+      squares[i] = Math.random() * effectiveOpacity.value;
     }
   }
 }
-function drawGrid(ctx, width, height, cols, rows, squares, dpr) {
-  ctx.clearRect(0, 0, width, height);
+function drawGrid(ctx, canvasWidth, canvasHeight, cols, rows, squares, dpr) {
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
   ctx.fillStyle = "transparent";
-  ctx.fillRect(0, 0, width, height);
+  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 opacity = squares[idx] ?? 0;
-      const t = getGradientT(i, j, cols, rows);
-      const baseColor = lerpColor(colors.start, colors.end, t);
-      let cellColor = baseColor;
-      let cellAlpha = opacity;
-      if (opacity > 0.5 * props.maxOpacity) {
-        const blendT = (opacity - 0.5 * props.maxOpacity) / (0.5 * props.maxOpacity);
-        cellColor = lerpColor(baseColor, colors.flicker, blendT);
-        cellAlpha = Math.min(1, opacity + 0.2);
+      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 * (props.squareSize + props.gridGap) * dpr,
-        j * (props.squareSize + props.gridGap) * dpr,
-        props.squareSize * dpr,
-        props.squareSize * dpr
+        i * (size + gap) * dpr,
+        j * (size + gap) * dpr,
+        size * dpr,
+        size * dpr
       );
     }
   }
 }
 function updateCanvasSize() {
-  const newWidth = props.width || containerRef.value?.clientWidth || 0;
-  const newHeight = props.height || containerRef.value?.clientHeight || 0;
-  canvasSize.value = { width: newWidth, height: newHeight };
+  const newWidth = containerRef.value?.clientWidth || 0;
+  const newHeight = containerRef.value?.clientHeight || 0;
   if (canvasRef.value) {
     gridParams.value = setupCanvas(canvasRef.value, newWidth, newHeight);
   }
@@ -194,12 +215,12 @@ onBeforeUnmount(() => {
 });
 watch(
   [
-    () => props.gradientDirection,
-    () => props.squareSize,
-    () => props.gridGap,
-    () => props.maxOpacity,
-    () => props.color,
-    () => props.variant
+    () => size,
+    () => gap,
+    () => color,
+    () => opacity,
+    () => props.dark?.color,
+    () => props.dark?.opacity
   ],
   () => {
     updateCanvasSize();
@@ -208,19 +229,8 @@ watch(
 </script>
 
 <template>
-  <div
-    ref="containerRef"
-    data-slot="base"
-    :class="ui.base({ class: [props.ui?.base, props.class] })"
-  >
-    <canvas
-      ref="canvasRef"
-      data-slot="canvas"
-      :class="ui.canvas({ class: props.ui?.canvas })"
-      :style="maskStyle"
-      :width="canvasSize.width"
-      :height="canvasSize.height"
-    />
+  <div ref="containerRef" :class="ui.base({ class: [props.ui?.base] })">
+    <canvas ref="canvasRef" :class="ui.canvas({ class: props.ui?.canvas })" :style="maskStyle" />
     <slot />
   </div>
 </template>

package/dist/runtime/components/background/FlickeringGrid.vue.d.ts

@@ -1,3 +1,4 @@
+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>;
@@ -7,61 +8,70 @@ type BackgroundFlickeringGrid = ComponentConfig<typeof backgroundFlickeringGridT
 export interface FlickeringGridProps {
     /**
      * The square size of the grid (before scaling)
-     * @default 12
+     * @default 8
      */
-    squareSize?: number;
+    size?: number;
     /**
      * The gap between grid squares
-     * @default 6
+     * @default 8
      */
-    gridGap?: number;
+    gap?: number;
     /**
-     * The flicker animation speed (higher = faster)
-     * @default 0.3
+     * Animation speed (higher = faster flicker)
+     * Scale from 1 (slowest) to 10 (fastest)
+     * @default 5
      */
-    flickerChance?: number;
+    speed?: number;
     /**
-     * Speed multiplier for flicker animation
-     * @default 1
+     * Apply fade/vignette effect with directional masking
+     * - 'radial': Radial fade from center (spotlight effect)
+     * - 'left', 'right', 'top', 'bottom': Linear fade from specified edge
+     *
      */
-    flickerSpeed?: number;
+    fade?: "radial" | "left" | "right" | "top" | "bottom";
     /**
-     * Gradient direction for the grid
-     * @default 'left-right'
-     */
-    gradientDirection?: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
-    /**
-     * Maximum opacity of flickering squares
-     * @default 0.3
-     */
-    maxOpacity?: number;
-    /**
-     * Apply radial fade to edges
-     * @default true
-     */
-    fade?: boolean;
-    /**
-     * Canvas width (defaults to container width)
-     */
-    width?: number;
-    /**
-     * Canvas height (defaults to container height)
-     */
-    height?: number;
-    /**
-     * Color variant
+     * 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)'
+     *
+     * Choose lighter shades (e.g., 'blue-200') for subtle backgrounds or darker shades (e.g., 'blue-600') for bolder effects.
+     *
+     * @example 'primary' - Nuxt UI semantic color
+     * @example 'blue-200' - Light Tailwind color for subtle effect
+     * @example 'blue-600' - Dark Tailwind color for bold effect
+     * @example '#e0f2fe' - Direct hex color value (light blue)
+     *
      * @default 'neutral'
      */
-    color?: BackgroundFlickeringGrid["variants"]["color"];
+    color?: ColorInput;
     /**
-     * Style variant
-     * @default 'subtle'
+     * Opacity/visibility of the grid squares.
+     * Controls how transparent the grid appears.
+     *
+     * - 0: Completely invisible
+     * - 0.3: Subtle, background texture
+     * - 0.5: Medium visibility
+     * - 0.8: Bold, prominent
+     * - 1: Fully opaque
+     *
+     * Range: 0-1
+     *
+     * @default 0.5
      */
-    variant?: BackgroundFlickeringGrid["variants"]["variant"];
+    opacity?: number;
     /**
-     * Additional CSS classes for the container
+     * Dark mode overrides for color 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', opacity: 0.3 }
      */
-    class?: any;
+    dark?: {
+        color?: ColorInput;
+        opacity?: number;
+    };
     /**
      * UI slot customization
      */
@@ -75,18 +85,7 @@ export interface FlickeringGridSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("@vue/runtime-core").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
-    color: BackgroundFlickeringGrid["variants"]["color"];
-    variant: BackgroundFlickeringGrid["variants"]["variant"];
-    class: any;
-    squareSize: number;
-    gridGap: number;
-    flickerChance: number;
-    flickerSpeed: number;
-    gradientDirection: "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
-    maxOpacity: number;
-    fade: boolean;
-}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>, FlickeringGridSlots>;
+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

@@ -0,0 +1,40 @@
+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 {};

package/dist/runtime/composables/useColorResolver.js

@@ -0,0 +1,68 @@
+import { parse } from "culori";
+import { getThemeColor } from "./useThemeColors.js";
+import colors from "tailwindcss/colors";
+const SEMANTIC_COLORS = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+];
+function getTailwindDefaultColor(colorName, shade) {
+  const colorObj = colors[colorName];
+  if (colorObj && typeof colorObj === "object" && !Array.isArray(colorObj)) {
+    return colorObj[shade.toString()] || null;
+  }
+  return null;
+}
+function isSemanticColor(color) {
+  return SEMANTIC_COLORS.includes(color);
+}
+function isDirectColor(color) {
+  return color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl") || color.startsWith("oklch") || color.startsWith("lab") || color.startsWith("lch");
+}
+export function resolveColor(colorInput, fallback = "neutral") {
+  if (!colorInput || colorInput.trim() === "") {
+    return getThemeColor(fallback, 500);
+  }
+  const color = colorInput.trim();
+  if (isDirectColor(color)) {
+    const parsed = parse(color);
+    if (parsed) {
+      return color;
+    }
+    console.warn(`[resolveColor] Invalid color format: "${color}"`);
+  }
+  if (isSemanticColor(color)) {
+    return getThemeColor(color, 500);
+  }
+  const tailwindColorMatch = color.match(/^([a-z]+)-(\d{2,3})$/);
+  if (tailwindColorMatch) {
+    const [, colorName, shade] = tailwindColorMatch;
+    if (colorName && shade) {
+      if (typeof document !== "undefined") {
+        const resolvedColor = getThemeColor(colorName, parseInt(shade));
+        if (resolvedColor !== "oklch(50% 0 0)") {
+          return resolvedColor;
+        }
+      }
+      const defaultColor = getTailwindDefaultColor(colorName, parseInt(shade));
+      if (defaultColor) {
+        return defaultColor;
+      }
+    }
+  }
+  console.warn(
+    `[resolveColor] Could not resolve color: "${colorInput}". Supported formats: Nuxt UI semantic colors ('primary', 'secondary', etc.), Tailwind colors ('blue-500', 'red-600', etc.), or direct color values ('#3b82f6', 'oklch(...)', 'rgb(...)'). Falling back to "${fallback}".`
+  );
+  return getThemeColor(fallback, 500);
+}
+export function resolveColorAsOklch(colorInput, fallback = "neutral") {
+  const resolved = resolveColor(colorInput, fallback);
+  if (isSemanticColor(colorInput || "")) {
+    return resolved;
+  }
+  return resolved;
+}

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

@@ -1,4 +1,4 @@
-export type GradientDirection = "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in" | "top-left-bottom-right" | "bottom-right-top-left";
+export type GradientDirection = "left-right" | "right-left" | "top-bottom" | "bottom-top" | "in-out" | "out-in";
 /**
  * Calculate gradient intensity for a position based on direction
  * @param x - X coordinate (0-1)

package/dist/runtime/composables/useGradient.js

@@ -18,10 +18,6 @@ export function calculateGradientIntensity(x, y, direction) {
       const dy = y - 0.5;
       return 1 - Math.sqrt(dx * dx + dy * dy) * Math.sqrt(2);
     }
-    case "top-left-bottom-right":
-      return (x + y) / 2;
-    case "bottom-right-top-left":
-      return 1 - (x + y) / 2;
     default:
       return 0;
   }

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

@@ -16,6 +16,13 @@ export declare function createOklch(l: number, c: number, h: number): string;
  * Accepts any valid CSS color string
  */
 export declare function adjustLightness(colorStr: string, targetLightness: number): string;
+/**
+ * Darken a color by reducing its lightness
+ * @param colorStr - Any valid CSS color string
+ * @param amount - Amount to reduce lightness by (in percentage points, 0-100)
+ * @returns Darkened color string
+ */
+export declare function darkenColor(colorStr: string, amount?: number): string;
 /**
  * Adjust the chroma (saturation) of a color while preserving lightness and hue
  */

package/dist/runtime/composables/useThemeColors.js

@@ -24,6 +24,16 @@ export function adjustLightness(colorStr, targetLightness) {
   oklch.l = targetLightness / 100;
   return formatCss(oklch);
 }
+export function darkenColor(colorStr, amount = 10) {
+  const parsed = parse(colorStr);
+  if (!parsed) return colorStr;
+  const oklch = toOklch(parsed);
+  if (!oklch || oklch.l === void 0) return colorStr;
+  const currentLightness = oklch.l * 100;
+  const newLightness = Math.max(0, currentLightness - amount);
+  oklch.l = newLightness / 100;
+  return formatCss(oklch);
+}
 export function adjustChroma(colorStr, targetChroma) {
   const parsed = parse(colorStr);
   if (!parsed) return colorStr;
@@ -64,10 +74,7 @@ export function oklchToRgb(colorString) {
 export function getThemeColor(colorName, shade = 500) {
   if (typeof document === "undefined") return "oklch(50% 0 0)";
   const styles = getComputedStyle(document.documentElement);
-  let colorValue = styles.getPropertyValue(`--ui-color-${colorName}-${shade}`).trim();
-  if (!colorValue) {
-    colorValue = styles.getPropertyValue(`--color-${colorName}-${shade}`).trim();
-  }
+  const colorValue = styles.getPropertyValue(`--ui-color-${colorName}-${shade}`).trim();
   return colorValue || "oklch(50% 0 0)";
 }
 export function getColorShades(colorName, lightnessValues) {

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/themes/background-flickering-grid.d.ts

@@ -3,62 +3,5 @@ declare const _default: {
         base: string;
         canvas: string;
     };
-    variants: {
-        color: {
-            primary: string;
-            secondary: string;
-            success: string;
-            info: string;
-            warning: string;
-            error: string;
-            neutral: string;
-        };
-        variant: {
-            subtle: string;
-            soft: string;
-            solid: string;
-        };
-    };
-    compoundVariants: ({
-        color: "primary" | "secondary" | "success" | "info" | "warning" | "error";
-        variant: "subtle";
-        class: {
-            canvas: string;
-        };
-    } | {
-        color: "primary" | "secondary" | "success" | "info" | "warning" | "error";
-        variant: "soft";
-        class: {
-            canvas: string;
-        };
-    } | {
-        color: "primary" | "secondary" | "success" | "info" | "warning" | "error";
-        variant: "solid";
-        class: {
-            canvas: string;
-        };
-    } | {
-        color: "neutral";
-        variant: "subtle";
-        class: {
-            canvas: string;
-        };
-    } | {
-        color: "neutral";
-        variant: "soft";
-        class: {
-            canvas: string;
-        };
-    } | {
-        color: "neutral";
-        variant: "solid";
-        class: {
-            canvas: string;
-        };
-    })[];
-    defaultVariants: {
-        color: "neutral";
-        variant: "subtle";
-    };
 };
 export default _default;

package/dist/runtime/themes/background-flickering-grid.js

@@ -1,75 +1,6 @@
-const colors = ["primary", "secondary", "success", "info", "warning", "error"];
 export default {
   slots: {
-    base: "w-full h-full absolute inset-0 pointer-events-none",
-    canvas: "w-full h-full block"
-  },
-  variants: {
-    color: {
-      primary: "",
-      secondary: "",
-      success: "",
-      info: "",
-      warning: "",
-      error: "",
-      neutral: ""
-    },
-    variant: {
-      subtle: "",
-      soft: "",
-      solid: ""
-    }
-  },
-  compoundVariants: [
-    // Generate variants for each color + variant combination
-    ...colors.flatMap((color) => [
-      {
-        color,
-        variant: "subtle",
-        class: {
-          canvas: `[.bg-${color}-50_&]:_[--grid-end-color:theme(colors.${color}.50)] [.bg-${color}-100_&]:_[--grid-start-color:theme(colors.${color}.100)] [.bg-${color}-200_&]:_[--grid-flicker-color:theme(colors.${color}.200)]`
-        }
-      },
-      {
-        color,
-        variant: "soft",
-        class: {
-          canvas: `[.bg-${color}-100_&]:_[--grid-end-color:theme(colors.${color}.100)] [.bg-${color}-200_&]:_[--grid-start-color:theme(colors.${color}.200)] [.bg-${color}-300_&]:_[--grid-flicker-color:theme(colors.${color}.300)]`
-        }
-      },
-      {
-        color,
-        variant: "solid",
-        class: {
-          canvas: `[.bg-${color}-200_&]:_[--grid-end-color:theme(colors.${color}.200)] [.bg-${color}-400_&]:_[--grid-start-color:theme(colors.${color}.400)] [.bg-${color}-500_&]:_[--grid-flicker-color:theme(colors.${color}.500)]`
-        }
-      }
-    ]),
-    // Neutral variants (using gray)
-    {
-      color: "neutral",
-      variant: "subtle",
-      class: {
-        canvas: "[.bg-gray-50_&]:_[--grid-end-color:theme(colors.gray.50)] [.bg-gray-100_&]:_[--grid-start-color:theme(colors.gray.100)] [.bg-gray-200_&]:_[--grid-flicker-color:theme(colors.gray.200)]"
-      }
-    },
-    {
-      color: "neutral",
-      variant: "soft",
-      class: {
-        canvas: "[.bg-gray-100_&]:_[--grid-end-color:theme(colors.gray.100)] [.bg-gray-200_&]:_[--grid-start-color:theme(colors.gray.200)] [.bg-gray-300_&]:_[--grid-flicker-color:theme(colors.gray.300)]"
-      }
-    },
-    {
-      color: "neutral",
-      variant: "solid",
-      class: {
-        canvas: "[.bg-gray-200_&]:_[--grid-end-color:theme(colors.gray.200)] [.bg-gray-400_&]:_[--grid-start-color:theme(colors.gray.400)] [.bg-gray-500_&]:_[--grid-flicker-color:theme(colors.gray.500)]"
-      }
-    }
-  ],
-  defaultVariants: {
-    color: "neutral",
-    variant: "subtle"
+    base: "w-full h-full absolute inset-0",
+    canvas: "w-full h-full block pointer-events-none"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -55,7 +55,7 @@
     "lint:fix": "oxlint --fix --type-aware",
     "format": "oxfmt --write",
     "format:check": "oxfmt --check",
-    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish && git push --follow-tags",
+    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"