nuxt-ui-elements 0.1.2 → 0.1.3

package/dist/module.json

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

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

@@ -35,28 +35,43 @@ export interface FlickeringGridProps {
      * - 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-500' - Tailwind color
-     * @example '#3b82f6' - Direct hex color value
+     * @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?: ColorInput;
     /**
-     * Lightness value for the grid (controls how light/subtle the grid appears)
-     * Range: 0-100, where higher values = lighter/more subtle
-     * @default 95
-     */
-    lightness?: number;
-    /**
-     * Fine-grained element customization (similar to Nuxt UI's ui prop)
+     * 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
      *
-     * @example { colorDark: 'blue-300' } - Override color for dark mode
+     * Range: 0-1
+     *
+     * @default 0.5
      */
+    opacity?: number;
     /**
-     * Override color specifically for dark mode
+     * 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 }
      */
-    colorDark?: ColorInput;
+    dark?: {
+        color?: ColorInput;
+        opacity?: number;
+    };
     /**
      * UI slot customization
      */

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

@@ -7,7 +7,7 @@ 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, oklchToRgb } from "../../composables/useThemeColors";
+import { darkenColor, oklchToRgb } from "../../composables/useThemeColors";
 import {
   resolveColor
 } from "../../composables/useColorResolver";
@@ -16,7 +16,7 @@ const {
   gap = 9,
   speed = 5,
   color = "neutral",
-  lightness = 95,
+  opacity = 0.5,
   ...props
 } = defineProps({
   size: { type: Number, required: false },
@@ -24,32 +24,27 @@ const {
   speed: { type: Number, required: false },
   fade: { type: String, required: false },
   color: { type: null, required: false },
-  lightness: { type: Number, required: false },
-  colorDark: { 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.colorDark) {
-    return props.colorDark;
+  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;
 });
-const effectiveOpacity = computed(() => {
-  const minLightness = 70;
-  const maxLightness = 100;
-  const maxOpacity = 0.8;
-  const minOpacity = 0.15;
-  const t = Math.max(
-    0,
-    Math.min(1, (lightness - minLightness) / (maxLightness - minLightness))
-  );
-  return maxOpacity - t * (maxOpacity - minOpacity);
-});
 defineSlots();
 const ui = computed(() => tv(theme)());
 const maskStyle = computed(() => {
@@ -93,10 +88,9 @@ function parseColor(color2) {
 }
 const gridColors = computed(() => {
   const baseColor = resolveColor(effectiveColor.value);
-  const lightnessBase = lightness;
-  const lightnessFlicker = Math.max(0, lightness - 10);
-  const baseRgb = oklchToRgb(adjustLightness(baseColor, lightnessBase));
-  const flickerRgb = oklchToRgb(adjustLightness(baseColor, lightnessFlicker));
+  const baseRgb = oklchToRgb(baseColor);
+  const darkerColor = darkenColor(baseColor, 10);
+  const flickerRgb = oklchToRgb(darkerColor);
   return {
     base: parseColor(baseRgb),
     flicker: parseColor(flickerRgb)
@@ -146,13 +140,13 @@ function drawGrid(ctx, canvasWidth, canvasHeight, cols, rows, squares, dpr) {
   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 opacity2 = squares[idx] ?? 0;
       let cellColor = colors.base;
-      let cellAlpha = opacity;
-      if (opacity > 0.5 * effectiveOpacity.value) {
-        const blendT = (opacity - 0.5 * effectiveOpacity.value) / (0.5 * effectiveOpacity.value);
+      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, opacity + 0.2);
+        cellAlpha = Math.min(1, opacity2 + 0.2);
       }
       ctx.fillStyle = rgbToString(cellColor, cellAlpha);
       ctx.fillRect(
@@ -219,9 +213,19 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect();
   intersectionObserver?.disconnect();
 });
-watch([() => size, () => gap, () => color, () => lightness], () => {
-  updateCanvasSize();
-});
+watch(
+  [
+    () => size,
+    () => gap,
+    () => color,
+    () => opacity,
+    () => props.dark?.color,
+    () => props.dark?.opacity
+  ],
+  () => {
+    updateCanvasSize();
+  }
+);
 </script>
 
 <template>

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

@@ -35,28 +35,43 @@ export interface FlickeringGridProps {
      * - 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-500' - Tailwind color
-     * @example '#3b82f6' - Direct hex color value
+     * @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?: ColorInput;
     /**
-     * Lightness value for the grid (controls how light/subtle the grid appears)
-     * Range: 0-100, where higher values = lighter/more subtle
-     * @default 95
-     */
-    lightness?: number;
-    /**
-     * Fine-grained element customization (similar to Nuxt UI's ui prop)
+     * 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
      *
-     * @example { colorDark: 'blue-300' } - Override color for dark mode
+     * Range: 0-1
+     *
+     * @default 0.5
      */
+    opacity?: number;
     /**
-     * Override color specifically for dark mode
+     * 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 }
      */
-    colorDark?: ColorInput;
+    dark?: {
+        color?: ColorInput;
+        opacity?: number;
+    };
     /**
      * UI slot customization
      */

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.2",
+  "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"