@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/lib/theme-tools.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Tools for Library Users
- * 
+ *
  * Developer-friendly utilities for working with Atomix themes
  */
 
@@ -49,7 +49,7 @@ export function createDarkVariant(lightTheme: Theme): Theme {
       },
     },
   };
-  
+
   // Create a new theme by extending the light theme with the dark variant
   const extendedTheme: Theme = {
     ...lightTheme,
@@ -67,7 +67,7 @@ export function createDarkVariant(lightTheme: Theme): Theme {
       },
     },
   };
-  
+
   return extendedTheme;
 }
 
@@ -125,9 +125,11 @@ export function getThemeMetadata(theme: Theme): ThemeMetadata {
  * Check if theme supports dark mode
  */
 export function supportsDarkMode(theme: Theme): boolean {
-  return theme.palette?.mode === 'dark' ||
+  return (
+    theme.palette?.mode === 'dark' ||
     theme.supportsDarkMode === true ||
-    Boolean(theme.a11y?.modes?.includes('dark'));
+    Boolean(theme.a11y?.modes?.includes('dark'))
+  );
 }
 
 /**
@@ -150,4 +152,4 @@ export function importTheme(json: string): Theme {
 
 // Note: createTheme, extendTheme, mergeTheme, and generateCSSVariables
 // are already exported from './theme' module. Import them directly from there.
-// This file only exports theme-tools specific utilities.
+// This file only exports theme-tools specific utilities.

package/src/lib/types/components.ts

@@ -1,7 +1,44 @@
 import { ReactNode } from 'react';
-import type { ButtonParts, CardParts, InputParts, ModalParts, DropdownParts, BadgeParts, ProgressParts, CheckboxParts, RadioParts } from './partProps';
-import type { SlotProps, ButtonRootSlotProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonSpinnerSlotProps, BadgeRootSlotProps, BadgeIconSlotProps, BadgeLabelSlotProps, ProgressRootSlotProps, ProgressBarSlotProps, CheckboxRootSlotProps, CheckboxInputSlotProps, CheckboxLabelSlotProps, RadioRootSlotProps, RadioInputSlotProps, RadioLabelSlotProps } from '../patterns/slots';
-import type { ButtonCSSVariable, CardCSSVariable, InputCSSVariable, ModalCSSVariable, DropdownCSSVariable, BadgeCSSVariable, ProgressCSSVariable, CheckboxCSSVariable, RadioCSSVariable } from '../constants/cssVariables';
+import type {
+  ButtonParts,
+  CardParts,
+  InputParts,
+  ModalParts,
+  DropdownParts,
+  BadgeParts,
+  ProgressParts,
+  CheckboxParts,
+  RadioParts,
+} from './partProps';
+import type {
+  SlotProps,
+  ButtonRootSlotProps,
+  ButtonIconSlotProps,
+  ButtonLabelSlotProps,
+  ButtonSpinnerSlotProps,
+  BadgeRootSlotProps,
+  BadgeIconSlotProps,
+  BadgeLabelSlotProps,
+  ProgressRootSlotProps,
+  ProgressBarSlotProps,
+  CheckboxRootSlotProps,
+  CheckboxInputSlotProps,
+  CheckboxLabelSlotProps,
+  RadioRootSlotProps,
+  RadioInputSlotProps,
+  RadioLabelSlotProps,
+} from '../patterns/slots';
+import type {
+  ButtonCSSVariable,
+  CardCSSVariable,
+  InputCSSVariable,
+  ModalCSSVariable,
+  DropdownCSSVariable,
+  BadgeCSSVariable,
+  ProgressCSSVariable,
+  CheckboxCSSVariable,
+  RadioCSSVariable,
+} from '../constants/cssVariables';
 
 // ============================================================================
 // AtomixGlass Types
@@ -199,7 +236,14 @@ export interface AtomixGlassProps {
   /**
    * Shader variant for shader mode
    */
-  shaderVariant?: 'liquidGlass' | 'premiumGlass' | 'appleFluid' | 'liquidMetal' | 'plasma' | 'waves' | 'noise';
+  shaderVariant?:
+    | 'liquidGlass'
+    | 'premiumGlass'
+    | 'appleFluid'
+    | 'liquidMetal'
+    | 'plasma'
+    | 'waves'
+    | 'noise';
 
   /**
    * Accessibility props
@@ -331,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
  */
@@ -914,14 +958,40 @@ export interface HeroBackgroundSliderConfig {
   customTransition?: (currentIndex: number, nextIndex: number) => string | React.CSSProperties;
 }
 
+/**
+ * Hero component parts for granular styling
+ */
+export interface HeroParts {
+  root?: { className?: string; style?: React.CSSProperties };
+  container?: { className?: string; style?: React.CSSProperties };
+  grid?: { className?: string; style?: React.CSSProperties };
+  content?: { className?: string; style?: React.CSSProperties };
+  title?: { className?: string; style?: React.CSSProperties };
+  subtitle?: { className?: string; style?: React.CSSProperties };
+  text?: { className?: string; style?: React.CSSProperties };
+  actions?: { className?: string; style?: React.CSSProperties };
+  imageWrapper?: { className?: string; style?: React.CSSProperties };
+  image?: { className?: string; style?: React.CSSProperties };
+  background?: { className?: string; style?: React.CSSProperties };
+  overlay?: { className?: string; style?: React.CSSProperties };
+}
+
 /**
  * Hero component properties
  */
-export interface HeroProps extends BaseComponentProps {
+export interface HeroProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'>,
+    BaseComponentProps {
   /**
    * Hero title
    */
-  title: string;
+  title: ReactNode;
+
+  /**
+   * HTML Heading level for the title
+   * @default 'h1'
+   */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
 
   /**
    * Hero subtitle
@@ -973,11 +1043,31 @@ export interface HeroProps extends BaseComponentProps {
    */
   imageColSize?: number;
 
+  /**
+   * Custom grid column class name for image
+   */
+  imageColClassName?: string;
+
+  /**
+   * Custom inline style for image column
+   */
+  imageColStyle?: React.CSSProperties;
+
   /**
    * Custom grid column size for content (default is 5)
    */
   contentColSize?: number;
 
+  /**
+   * Custom grid column class name for content
+   */
+  contentColClassName?: string;
+
+  /**
+   * Custom inline style for content column
+   */
+  contentColStyle?: React.CSSProperties;
+
   /**
    * Custom width for the hero content (overrides the default CSS variable)
    */
@@ -1039,6 +1129,23 @@ export interface HeroProps extends BaseComponentProps {
    * Takes precedence over backgroundImageSrc and videoBackground props
    */
   backgroundSlider?: HeroBackgroundSliderConfig;
+
+  /**
+   * Reverse the stacking order of content and image on mobile devices
+   * @default false
+   */
+  reverseOnMobile?: boolean;
+
+  /**
+   * Granular part-based styling
+   */
+  parts?: HeroParts;
+
+  /**
+   * Custom background element to render behind the content
+   * @example <Hero.Background src="..." />
+   */
+  backgroundElement?: ReactNode;
 }
 
 /**
@@ -1468,16 +1575,16 @@ export interface SideMenuProps extends BaseComponentProps {
       active?: boolean | undefined;
       disabled?: boolean | undefined;
       as?:
-      | React.ComponentType<{
-        href?: string;
-        to?: string;
-        children: React.ReactNode;
-        className?: string;
-        onClick?: (event: React.MouseEvent) => void;
-        target?: string;
-        rel?: string;
-      }>
-      | undefined;
+        | React.ComponentType<{
+            href?: string;
+            to?: string;
+            children: React.ReactNode;
+            className?: string;
+            onClick?: (event: React.MouseEvent) => void;
+            target?: string;
+            rel?: string;
+          }>
+        | undefined;
     }>;
   }>;
 }
@@ -2339,7 +2446,7 @@ export interface SelectProps extends BaseComponentProps {
   /**
    * Select options
    */
-  options: SelectOption[];
+  options?: SelectOption[];
 
   /**
    * Selected value(s)
@@ -3677,17 +3784,17 @@ export interface VideoPlayerProps extends BaseComponentProps {
    * - object: Custom glass configuration
    */
   glass?:
-  | boolean
-  | {
-    displacementScale?: number;
-    blurAmount?: number;
-    saturation?: number;
-    aberrationIntensity?: number;
-    elasticity?: number;
-    cornerRadius?: number;
-    mode?: 'standard' | 'polar' | 'prominent' | 'shader';
-    overLight?: boolean;
-  };
+    | boolean
+    | {
+        displacementScale?: number;
+        blurAmount?: number;
+        saturation?: number;
+        aberrationIntensity?: number;
+        elasticity?: number;
+        cornerRadius?: number;
+        mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+        overLight?: boolean;
+      };
 
   /**
    * Glass overlay opacity (0-1) when glass variant is enabled
@@ -5075,23 +5182,23 @@ export interface SliderProps extends BaseComponentProps {
    * Whether to enable mouse wheel control
    */
   mousewheel?:
-  | boolean
-  | {
-    forceToAxis?: boolean;
-    sensitivity?: number;
-    releaseOnEdges?: boolean;
-  };
+    | boolean
+    | {
+        forceToAxis?: boolean;
+        sensitivity?: number;
+        releaseOnEdges?: boolean;
+      };
 
   /**
    * Whether to enable keyboard control
    */
   keyboard?:
-  | boolean
-  | {
-    enabled?: boolean;
-    onlyInViewport?: boolean;
-    pageUpDown?: boolean;
-  };
+    | boolean
+    | {
+        enabled?: boolean;
+        onlyInViewport?: boolean;
+        pageUpDown?: boolean;
+      };
 
   /**
    * Whether to grab cursor on hover (default: true)
@@ -5154,16 +5261,16 @@ export interface SliderProps extends BaseComponentProps {
    * Whether to free mode (no snap to slides)
    */
   freeMode?:
-  | boolean
-  | {
-    enabled?: boolean;
-    sticky?: boolean;
-    momentumRatio?: number;
-    momentumVelocityRatio?: number;
-    momentumBounce?: boolean;
-    momentumBounceRatio?: number;
-    minimumVelocity?: number;
-  };
+    | boolean
+    | {
+        enabled?: boolean;
+        sticky?: boolean;
+        momentumRatio?: number;
+        momentumVelocityRatio?: number;
+        momentumBounce?: boolean;
+        momentumBounceRatio?: number;
+        minimumVelocity?: number;
+      };
 
   /**
    * Whether to watch for slides and wrapper size changes
@@ -5199,23 +5306,23 @@ export interface SliderProps extends BaseComponentProps {
    * Hash navigation
    */
   hashNavigation?:
-  | boolean
-  | {
-    watchState?: boolean;
-    replaceState?: boolean;
-  };
+    | boolean
+    | {
+        watchState?: boolean;
+        replaceState?: boolean;
+      };
 
   /**
    * History navigation
    */
   history?:
-  | boolean
-  | {
-    enabled?: boolean;
-    root?: string;
-    replaceState?: boolean;
-    key?: string;
-  };
+    | boolean
+    | {
+        enabled?: boolean;
+        root?: string;
+        replaceState?: boolean;
+        key?: string;
+      };
 
   /**
    * Controller configuration
@@ -5230,16 +5337,16 @@ export interface SliderProps extends BaseComponentProps {
    * A11y configuration
    */
   a11y?:
-  | boolean
-  | {
-    enabled?: boolean;
-    prevSlideMessage?: string;
-    nextSlideMessage?: string;
-    firstSlideMessage?: string;
-    lastSlideMessage?: string;
-    paginationBulletMessage?: string;
-    notificationClass?: string;
-  };
+    | boolean
+    | {
+        enabled?: boolean;
+        prevSlideMessage?: string;
+        nextSlideMessage?: string;
+        firstSlideMessage?: string;
+        lastSlideMessage?: string;
+        paginationBulletMessage?: string;
+        notificationClass?: string;
+      };
 
   /**
    * Slide change callback

package/src/lib/types/partProps.ts

@@ -1,6 +1,6 @@
 /**
  * Part-Based Styling Props
- * 
+ *
  * Type definitions for styling individual component parts with className and style props.
  * This enables granular customization of component internals.
  */

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__/csv.test.ts

@@ -40,6 +40,6 @@ describe('sanitizeCSVCell', () => {
 
   it('should handle mixed cases', () => {
     // Dangerous character + quotes + newlines
-    expect(sanitizeCSVCell('=cmd|\' /C calc\'!A0\n')).toBe("'=cmd|' /C calc'!A0 ");
+    expect(sanitizeCSVCell("=cmd|' /C calc'!A0\n")).toBe("'=cmd|' /C calc'!A0 ");
   });
 });

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/componentUtils.ts

@@ -1,6 +1,6 @@
 /**
  * Component Utilities
- * 
+ *
  * Helper functions for component development with the new customization system
  */
 
@@ -39,7 +39,7 @@ export function createCSSVarStyle(
   baseStyle?: React.CSSProperties
 ): React.CSSProperties {
   if (!cssVars) return baseStyle || {};
-  
+
   const varStyle = cssVarsToStyle(cssVars);
   return { ...varStyle, ...baseStyle };
 }
@@ -102,11 +102,7 @@ export function createPartProps<T extends { className?: string; style?: React.CS
 /**
  * Check if component has customization
  */
-export function hasCustomization(props: {
-  parts?: any;
-  cssVars?: any;
-  slots?: any;
-}): boolean {
+export function hasCustomization(props: { parts?: any; cssVars?: any; slots?: any }): boolean {
   return Boolean(props.parts || props.cssVars || props.slots);
 }
 
@@ -115,7 +111,7 @@ export function hasCustomization(props: {
  */
 export function createDebugAttrs(componentName: string, variant?: string): Record<string, string> {
   if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'development') return {};
-  
+
   return {
     'data-component': componentName,
     ...(variant && { 'data-variant': variant }),
@@ -126,7 +122,7 @@ export function createDebugAttrs(componentName: string, variant?: string): Recor
  * Generate a UUID v4
  */
 export function generateUUID(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
     const r = (Math.random() * 16) | 0;
     const v = c === 'x' ? r : (r & 0x3) | 0x8;
     return v.toString(16);
@@ -146,18 +142,18 @@ export function isYouTubeUrl(url: string): boolean {
  */
 export function extractYouTubeId(url: string): string | null {
   if (!isYouTubeUrl(url)) return null;
-  
+
   const patterns = [
     /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
     /youtube\.com\/.*[?&]v=([^&\n?#]+)/,
   ];
-  
+
   for (const pattern of patterns) {
     const match = url.match(pattern);
     if (match && match[1]) {
       return match[1];
     }
   }
-  
+
   return null;
 }