@shohojdhara/atomix 0.4.0 → 0.4.1

package/src/lib/composables/useAtomixGlass.ts

@@ -201,7 +201,6 @@ export function useAtomixGlass({
   onClick,
   debugCornerRadius = false,
   debugOverLight = false,
-  enablePerformanceMonitoring = false,
   children,
 }: UseAtomixGlassOptions): UseAtomixGlassReturn {
   // State
@@ -558,8 +557,6 @@ export function useAtomixGlass({
         return;
       }
 
-      const startTime = enablePerformanceMonitoring ? performance.now() : 0;
-
       // Use cached rect if available, otherwise get new one
       let rect = cachedRectRef.current;
       if (!rect || rect.width === 0 || rect.height === 0) {
@@ -582,17 +579,6 @@ export function useAtomixGlass({
       // React 18 automatically batches these updates
       setInternalMouseOffset(newOffset);
       setInternalGlobalMousePosition(globalPos);
-
-      if (
-        (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
-        enablePerformanceMonitoring
-      ) {
-        const endTime = performance.now();
-        // const duration = endTime - startTime;
-        // if (duration > 5) {
-        //   console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
-        // }
-      }
     },
     [
       mouseContainer,
@@ -600,7 +586,6 @@ export function useAtomixGlass({
       externalGlobalMousePosition,
       externalMouseOffset,
       effectiveDisableEffects,
-      enablePerformanceMonitoring,
     ]
   );
 

package/src/lib/theme/devtools/CLI.ts

@@ -1,4 +1,4 @@
-#!/usr/bin/env ts-node
+#!/usr/bin/env tsx
 
 /**
  * Atomix Theme DevTools CLI
@@ -11,17 +11,9 @@ import { Command } from 'commander';
 import chalk from 'chalk';
 import * as fs from 'fs';
 import * as path from 'path';
-// import { ThemeValidator } from './ThemeValidator.js';
+import { ThemeValidator } from './ThemeValidator';
 import boxen from 'boxen';
 
-// Stub validator for now to avoid ESM resolution issues in CLI
-// TODO: Fix ESM module resolution for ThemeValidator in CLI context
-class ThemeValidator {
-  validate() {
-    return { valid: true, errors: [], warnings: [], a11yIssues: [] };
-  }
-}
-
 const program = new Command();
 
 program.name('atomix-theme').description('Atomix Theme DevTools').version('0.1.0');

package/src/lib/types/components.ts

@@ -375,7 +375,7 @@ export type StateModifier =
  */
 export type IconPosition = 'left' | 'right';
 
-export type listvariant = 'dash' | 'number' | 'text';
+export type listvariant = 'dash' | 'number' | 'text' | 'default';
 /**;
  * List component properties
  */
@@ -1140,6 +1140,12 @@ export interface HeroProps
    * Granular part-based styling
    */
   parts?: HeroParts;
+
+  /**
+   * Custom background element to render behind the content
+   * @example <Hero.Background src="..." />
+   */
+  backgroundElement?: ReactNode;
 }
 
 /**
@@ -2440,7 +2446,7 @@ export interface SelectProps extends BaseComponentProps {
   /**
    * Select options
    */
-  options: SelectOption[];
+  options?: SelectOption[];
 
   /**
    * Selected value(s)

package/src/lib/utils/__tests__/componentUtils.test.ts

@@ -4,6 +4,8 @@ import {
   applyPartStyles,
   createCSSVarStyle,
   mergeComponentProps,
+  isYouTubeUrl,
+  extractYouTubeId,
 } from '../componentUtils';
 
 describe('componentUtils', () => {
@@ -58,6 +60,7 @@ describe('componentUtils', () => {
         className: 'base custom',
         id: 'test',
         'data-test': 'value',
+        style: {},
       });
     });
   });
@@ -94,8 +97,8 @@ describe('componentUtils', () => {
       };
       const result = createCSSVarStyle(cssVars);
       expect(result).toEqual({
-        '--atomix-button-padding-x': 16,
-        '--atomix-button-padding-y': 8,
+        '--atomix-button-padding-x': '16px',
+        '--atomix-button-padding-y': '8px',
       });
     });
 
@@ -141,4 +144,56 @@ describe('componentUtils', () => {
       expect(result).toEqual(baseProps);
     });
   });
+
+  describe('isYouTubeUrl', () => {
+    it('should return true for standard YouTube URLs', () => {
+      expect(isYouTubeUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe(true);
+      expect(isYouTubeUrl('http://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe(true);
+      expect(isYouTubeUrl('www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe(true);
+      expect(isYouTubeUrl('youtube.com/watch?v=dQw4w9WgXcQ')).toBe(true);
+    });
+
+    it('should return true for shortened YouTube URLs', () => {
+      expect(isYouTubeUrl('https://youtu.be/dQw4w9WgXcQ')).toBe(true);
+      expect(isYouTubeUrl('http://youtu.be/dQw4w9WgXcQ')).toBe(true);
+      expect(isYouTubeUrl('youtu.be/dQw4w9WgXcQ')).toBe(true);
+    });
+
+    it('should return true for embed YouTube URLs', () => {
+      expect(isYouTubeUrl('https://www.youtube.com/embed/dQw4w9WgXcQ')).toBe(true);
+    });
+
+    it('should return false for non-YouTube URLs', () => {
+      expect(isYouTubeUrl('https://vimeo.com/12345')).toBe(false);
+      expect(isYouTubeUrl('https://google.com')).toBe(false);
+      expect(isYouTubeUrl('random string')).toBe(false);
+      expect(isYouTubeUrl('')).toBe(false);
+    });
+  });
+
+  describe('extractYouTubeId', () => {
+    it('should extract ID from standard YouTube URLs', () => {
+      expect(extractYouTubeId('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe('dQw4w9WgXcQ');
+    });
+
+    it('should extract ID from shortened YouTube URLs', () => {
+      expect(extractYouTubeId('https://youtu.be/dQw4w9WgXcQ')).toBe('dQw4w9WgXcQ');
+    });
+
+    it('should extract ID from embed YouTube URLs', () => {
+      expect(extractYouTubeId('https://www.youtube.com/embed/dQw4w9WgXcQ')).toBe('dQw4w9WgXcQ');
+    });
+
+    it('should extract ID with additional query parameters', () => {
+      expect(extractYouTubeId('https://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=youtu.be')).toBe(
+        'dQw4w9WgXcQ'
+      );
+    });
+
+    it('should return null for non-YouTube URLs', () => {
+      expect(extractYouTubeId('https://vimeo.com/12345')).toBe(null);
+      expect(extractYouTubeId('https://google.com')).toBe(null);
+      expect(extractYouTubeId('')).toBe(null);
+    });
+  });
 });

package/src/lib/utils/__tests__/themeNaming.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { ThemeNaming } from '../themeNaming';
+
+describe('ThemeNaming', () => {
+  afterEach(() => {
+    // Reset prefix to default after each test
+    ThemeNaming.setPrefix('atomix');
+  });
+
+  describe('setPrefix / getPrefix', () => {
+    it('should have default prefix "atomix"', () => {
+      expect(ThemeNaming.getPrefix()).toBe('atomix');
+    });
+
+    it('should update prefix', () => {
+      ThemeNaming.setPrefix('custom');
+      expect(ThemeNaming.getPrefix()).toBe('custom');
+    });
+  });
+
+  describe('camelToKebab', () => {
+    it('should convert camelCase to kebab-case', () => {
+      expect(ThemeNaming.camelToKebab('camelCase')).toBe('camel-case');
+    });
+
+    it('should handle PascalCase', () => {
+      expect(ThemeNaming.camelToKebab('PascalCase')).toBe('pascal-case');
+    });
+
+    it('should handle simple strings', () => {
+      expect(ThemeNaming.camelToKebab('simple')).toBe('simple');
+    });
+
+    it('should handle empty string', () => {
+      expect(ThemeNaming.camelToKebab('')).toBe('');
+    });
+  });
+
+  describe('kebabToCamel', () => {
+    it('should convert kebab-case to camelCase', () => {
+      expect(ThemeNaming.kebabToCamel('kebab-case')).toBe('kebabCase');
+    });
+
+    it('should handle simple strings', () => {
+      expect(ThemeNaming.kebabToCamel('simple')).toBe('simple');
+    });
+
+    it('should handle empty string', () => {
+      expect(ThemeNaming.kebabToCamel('')).toBe('');
+    });
+  });
+
+  describe('cssVar', () => {
+    it('should create CSS variable with default prefix', () => {
+      expect(ThemeNaming.cssVar('tokenName')).toBe('--atomix-token-name');
+    });
+
+    it('should create CSS variable with custom prefix', () => {
+      ThemeNaming.setPrefix('custom');
+      expect(ThemeNaming.cssVar('tokenName')).toBe('--custom-token-name');
+    });
+  });
+
+  describe('bemClass', () => {
+    it('should create block class', () => {
+      expect(ThemeNaming.bemClass('block')).toBe('c-block');
+    });
+
+    it('should create block element class', () => {
+      expect(ThemeNaming.bemClass('block', 'element')).toBe('c-block__element');
+    });
+
+    it('should create block modifier class', () => {
+      expect(ThemeNaming.bemClass('block', undefined, 'mod')).toBe('c-block--mod');
+    });
+
+    it('should create block element modifier class', () => {
+      expect(ThemeNaming.bemClass('block', 'element', 'mod')).toBe('c-block__element--mod');
+    });
+  });
+
+  describe('variantClass', () => {
+    it('should create variant class', () => {
+      expect(ThemeNaming.variantClass('button', 'primary')).toBe('c-button--primary');
+    });
+  });
+
+  describe('sizeClass', () => {
+    it('should create size class', () => {
+      expect(ThemeNaming.sizeClass('button', 'lg')).toBe('c-button--lg');
+    });
+  });
+
+  describe('stateClass', () => {
+    it('should create state class', () => {
+      expect(ThemeNaming.stateClass('input', 'disabled')).toBe('c-input--disabled');
+    });
+  });
+
+  describe('utilityClass', () => {
+    it('should create utility class', () => {
+      expect(ThemeNaming.utilityClass('flex')).toBe('u-flex');
+    });
+  });
+
+  describe('layoutClass', () => {
+    it('should create layout class', () => {
+      expect(ThemeNaming.layoutClass('grid')).toBe('l-grid');
+    });
+  });
+
+  describe('objectClass', () => {
+    it('should create object class', () => {
+      expect(ThemeNaming.objectClass('container')).toBe('o-container');
+    });
+  });
+});

package/src/lib/utils/themeNaming.ts

@@ -28,7 +28,7 @@ export class ThemeNaming {
    * @param str - String to convert
    */
   static camelToKebab(str: string): string {
-    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
   }
 
   /**

package/src/styles/02-tools/_tools.breakpoints.scss

@@ -8,7 +8,7 @@
 // Breakpoint viewport sizes and media queries.
 @mixin media-breakpoint-up($name, $breakpoints: breakpoints.$grid-breakpoints) {
   $min: map.get($breakpoints, $name);
-  @if $min {
+  @if $min and $min != 0 {
     @media (min-width: $min) {
       @content;
     }

package/src/styles/02-tools/_tools.utility-api.scss

@@ -22,7 +22,7 @@ $utility-defaults: (
   class: null,
   state: null,
   local-vars: (),
-  rtl: true,
+  is-important: true,
 ) !default;
 
 // Core function to generate utility classes
@@ -77,11 +77,11 @@ $utility-defaults: (
           --atomix-u-#{$css-variable-name}: #{$value};
         } @else if $properties {
           @each $property in $properties {
-            #{$property}: $value if(map.get($utility, rtl), null, !important);
+            #{$property}: $value if(map.get($utility, is-important), !important, null);
           }
         } @else if $value != null {
           // Guard: only emit property declaration if value is not null
-          #{$property-class}: $value if(map.get($utility, rtl), null, !important);
+          #{$property-class}: $value if(map.get($utility, is-important), !important, null);
         }
 
         // Add local CSS variables if specified
@@ -111,11 +111,11 @@ $utility-defaults: (
           --atomix-u-#{$css-variable-name}#{$modifier}: #{$value};
         } @else if $properties {
           @each $property in $properties {
-            #{$property}: $value if(map.get($utility, rtl), null, !important);
+            #{$property}: $value if(map.get($utility, is-important), !important, null);
           }
         } @else if $value != null {
           // Guard: only emit property declaration if value is not null
-          #{$base-class}: $value if(map.get($utility, rtl), null, !important);
+          #{$base-class}: $value if(map.get($utility, is-important), !important, null);
         }
 
         // Add local CSS variables if specified
@@ -169,7 +169,7 @@ $utility-defaults: (
         values: map.get($config, values),
         class: map.get($config, class),
         state: map.get($config, state),
-        rtl: map.get($config, rtl),
+        is-important: map.get($config, is-important),
         css-var: map.get($config, css-var),
         local-vars: map.get($config, local-vars),
         responsive: map.get($config, responsive),

package/src/styles/99-utilities/_utilities.text.scss

@@ -99,7 +99,6 @@ $utilities-text: (
     values: (
       break: break-word,
     ),
-    rtl: false,
   ),
   'color': (
     property: color,