@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/lib/types/components.ts

@@ -560,6 +560,36 @@ export interface ButtonProps extends BaseComponentProps {
   style?: React.CSSProperties;
 }
 
+/**
+ * ButtonGroup component properties
+ */
+export interface ButtonGroupProps extends BaseComponentProps {
+  /**
+   * ButtonGroup children (should be Button components)
+   */
+  children?: ReactNode;
+
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+
+  /**
+   * Inline style for the component root element
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * ARIA label for accessibility
+   */
+  'aria-label'?: string;
+
+  /**
+   * ARIA role for the button group
+   */
+  role?: string;
+}
+
 /**
  * Badge component properties
  */
@@ -631,69 +661,6 @@ export interface BadgeProps extends BaseComponentProps {
   };
 }
 
-/**
- * Block component properties (legacy - use BlockProps from component instead)
- * @deprecated Use BlockProps from '@atomix/components/Block' instead
- */
-export interface LegacyBlockProps extends BaseComponentProps {
-  /**
-   * The content to be rendered within the block
-   */
-  children: ReactNode;
-
-  /**
-   * The HTML element to render as
-   * @default 'section'
-   */
-  as?: 'section' | 'div' | 'article' | 'aside' | 'main';
-
-  /**
-   * Spacing size for vertical padding
-   * @default 'md'
-   */
-  spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
-
-  /**
-   * Container configuration
-   */
-  container?: {
-    /**
-     * Container type for content width
-     */
-    type?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
-    /**
-     * Additional container classes
-     */
-    className?: string;
-  };
-
-  /**
-   * Whether to enable full-width content
-   * @default false
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Background color variant
-   */
-  background?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'invert'
-    | 'brand'
-    | 'error'
-    | 'success'
-    | 'warning'
-    | 'info'
-    | 'light';
-
-  /**
-   * Custom style for the block
-   */
-  style?: React.CSSProperties;
-}
-
 /**
  * Callout component properties
  */
@@ -1098,42 +1065,6 @@ export type PhosphorIconsType = Exclude<
   'IconContext' | 'IconBase' | 'createIcon' | 'default' | 'SSR'
 >;
 
-/**
- * Icon component properties (legacy - use IconProps from component instead)
- * @deprecated Use IconProps from '@atomix/components/Icon' instead
- */
-export interface LegacyIconProps extends BaseComponentProps {
-  /**
-   * Icon name from Phosphor Icons
-   */
-  name: PhosphorIconsType;
-
-  /**
-   * Icon size
-   */
-  size?: IconSize | number;
-
-  /**
-   * Icon weight/style
-   */
-  weight?: IconWeight;
-
-  /**
-   * Icon color
-   */
-  color?: string;
-
-  /**
-   * Alt text for accessibility
-   */
-  alt?: string;
-
-  /**
-   * Custom style
-   */
-  style?: React.CSSProperties;
-}
-
 /**
  * Navbar position options
  */
@@ -1840,6 +1771,16 @@ export interface PaginationProps extends BaseComponentProps {
    */
   showPrevNextButtons?: boolean;
 
+  /**
+   * Whether to show search input for jumping to a specific page
+   */
+  showSearch?: boolean;
+
+  /**
+   * Placeholder text for the search input
+   */
+  searchPlaceholder?: string;
+
   /**
    * Custom class for the pagination container
    */
@@ -2886,37 +2827,6 @@ export interface BreadcrumbItem {
   className?: string;
 }
 
-/**
- * Breadcrumb component properties (legacy - use BreadcrumbProps from component instead)
- * @deprecated Use BreadcrumbProps from '@atomix/components/Breadcrumb' instead
- */
-export interface LegacyBreadcrumbProps extends BaseComponentProps {
-  /**
-   * Array of breadcrumb items
-   */
-  items: BreadcrumbItem[];
-
-  /**
-   * Custom divider character or element
-   */
-  divider?: ReactNode;
-
-  /**
-   * Aria label for the navigation
-   */
-  ariaLabel?: string;
-
-  /**
-   * Optional custom link component
-   */
-  LinkComponent?: React.ElementType;
-
-  /**
-   * Custom style for the breadcrumb
-   */
-  style?: React.CSSProperties;
-}
-
 /**
  * Breadcrumb options interface (for vanilla JS)
  */

package/src/lib/utils/componentUtils.ts

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import type { PartStyleProps } from '../types/partProps';
-import { cssVarsToStyle } from '../theme/cssVariableMapper';
+import { cssVarsToStyle } from '../theme/adapters/cssVariableMapper';
 
 /**
  * Merge multiple class names
@@ -114,7 +114,7 @@ export function hasCustomization(props: {
  * Create data attributes for debugging
  */
 export function createDebugAttrs(componentName: string, variant?: string): Record<string, string> {
-  if (process.env.NODE_ENV !== 'development') return {};
+  if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'development') return {};
   
   return {
     'data-component': componentName,

package/src/lib/utils/memoryMonitor.ts

@@ -34,7 +34,7 @@ export function isMemoryMonitoringAvailable(): boolean {
   return (
     typeof performance !== 'undefined' &&
     'memory' in performance &&
-    process.env.NODE_ENV === 'development'
+    (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
   );
 }
 
@@ -133,7 +133,7 @@ export function monitorMemoryUsage(
     if (snapshot) {
       if (callback) {
         callback(snapshot);
-      } else if (process.env.NODE_ENV === 'development') {
+      } else if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
         console.log('[Memory Monitor]', {
           used: formatBytes(snapshot.usedJSHeapSize),
           total: formatBytes(snapshot.totalJSHeapSize),
@@ -175,7 +175,7 @@ export function trackComponentMemory(componentName: string) {
       const after = getMemorySnapshot();
       if (before && after) {
         const leakInfo = detectMemoryLeak(before, after);
-        if (leakInfo.hasLeak && process.env.NODE_ENV === 'development') {
+        if (leakInfo.hasLeak && (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')) {
           console.warn(
             `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
             leakInfo

package/src/lib/utils/themeNaming.ts

@@ -0,0 +1,135 @@
+/**
+ * Theme Naming Utility
+ * 
+ * Provides consistent naming conventions for CSS classes, CSS variables,
+ * and JavaScript properties throughout the theme system.
+ */
+
+export class ThemeNaming {
+  private static prefix = 'atomix';
+
+  /**
+   * Set the global prefix for all theme tokens
+   * @param newPrefix - New prefix to use
+   */
+  static setPrefix(newPrefix: string): void {
+    this.prefix = newPrefix;
+  }
+
+  /**
+   * Get the current prefix
+   */
+  static getPrefix(): string {
+    return this.prefix;
+  }
+
+  /**
+   * Convert camelCase to kebab-case for CSS variables
+   * @param str - String to convert
+   */
+  static camelToKebab(str: string): string {
+    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+  }
+
+  /**
+   * Convert kebab-case to camelCase for JavaScript properties
+   * @param str - String to convert
+   */
+  static kebabToCamel(str: string): string {
+    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  }
+
+  /**
+   * Create a CSS variable name
+   * @param token - Token name in camelCase
+   */
+  static cssVar(token: string): string {
+    return `--${this.prefix}-${this.camelToKebab(token)}`;
+  }
+
+  /**
+   * Create a BEM CSS class name
+   * @param block - Block name
+   * @param element - Element name (optional)
+   * @param modifier - Modifier name (optional)
+   */
+  static bemClass(block: string, element?: string, modifier?: string): string {
+    let className = `c-${block}`;
+
+    if (element) {
+      className += `__${element}`;
+    }
+
+    if (modifier) {
+      className += `--${modifier}`;
+    }
+
+    return className;
+  }
+
+  /**
+   * Create a variant class name
+   * @param component - Component name
+   * @param variant - Variant name
+   */
+  static variantClass(component: string, variant: string): string {
+    return `c-${component}--${variant}`;
+  }
+
+  /**
+   * Create a size class name
+   * @param component - Component name
+   * @param size - Size name
+   */
+  static sizeClass(component: string, size: string): string {
+    return `c-${component}--${size}`;
+  }
+
+  /**
+   * Create a state class name
+   * @param component - Component name
+   * @param state - State name
+   */
+  static stateClass(component: string, state: string): string {
+    return `c-${component}--${state}`;
+  }
+
+  /**
+   * Create a utility class name
+   * @param utility - Utility name
+   */
+  static utilityClass(utility: string): string {
+    return `u-${utility}`;
+  }
+
+  /**
+   * Create a layout class name
+   * @param layout - Layout name
+   */
+  static layoutClass(layout: string): string {
+    return `l-${layout}`;
+  }
+
+  /**
+   * Create an object class name
+   * @param object - Object name
+   */
+  static objectClass(object: string): string {
+    return `o-${object}`;
+  }
+}
+
+// Export constants for common naming patterns
+export const THEME_NAMING = {
+  PREFIX: 'atomix',
+  CSS_VAR: ThemeNaming.cssVar,
+  BEM_CLASS: ThemeNaming.bemClass,
+  VARIANT_CLASS: ThemeNaming.variantClass,
+  SIZE_CLASS: ThemeNaming.sizeClass,
+  STATE_CLASS: ThemeNaming.stateClass,
+  UTILITY_CLASS: ThemeNaming.utilityClass,
+  LAYOUT_CLASS: ThemeNaming.layoutClass,
+  OBJECT_CLASS: ThemeNaming.objectClass,
+  CAMEL_TO_KEBAB: ThemeNaming.camelToKebab,
+  KEBAB_TO_CAMEL: ThemeNaming.kebabToCamel,
+};

package/src/styles/01-settings/_settings.design-tokens.scss

@@ -195,7 +195,10 @@ $theme-font-weight: (
 
 // scss-docs-start utilities-colors
 
-// @TODO: Replace $theme-colors with css var
+// Note: Future enhancement - Consider using CSS custom properties (--atomix-*)
+// generated from $theme-colors instead of SCSS maps for utilities generation.
+// This would enable runtime theme switching for utility classes.
+// Current implementation uses SCSS maps which is correct for build-time generation.
 
 $utilities-colors: $theme-colors !default;
 

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

@@ -1,7 +1,9 @@
 @use 'sass:color';
+@use 'sass:map';
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.button' as button;
 @use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.design-tokens' as tokens;
 @use '../01-settings/settings.border-radius' as *;
 @use 'tools.to-rgb' as *;
 @use 'tools.border-radius' as *;
@@ -16,99 +18,84 @@
   $active-background: null,
   $active-border: null
 ) {
-  $btn-text-color: colors.$white;
-  $btn-text-hover-color: colors.$white;
+  $btn-text-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-text-hover-color: var(--#{config.$prefix}white, #{colors.$white});
 
   @if ($color == 'light') {
-    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
-    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
-  }
-
-  @if ($color == 'secondary') {
-    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
-    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+  } @else if ($color == 'secondary') {
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis, #{colors.$dark-text});
   }
 
   --#{config.$prefix}btn-color: #{$btn-text-color};
-  --#{config.$prefix}btn-bg: #{$background};
-  --#{config.$prefix}btn-border-color: #{$border};
+  --#{config.$prefix}btn-bg: var(--#{config.$prefix}#{$color}, #{$background});
+  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color}, #{$border});
   --#{config.$prefix}btn-hover-color: #{$btn-text-hover-color};
-  --#{config.$prefix}btn-hover-bg: #{if(
-      $hover-background,
-      $hover-background,
-      color.scale($background, $lightness: -15%)
-    )};
-  --#{config.$prefix}btn-hover-border-color: #{if(
-      $hover-border,
-      $hover-border,
-      color.scale($border, $lightness: -10%)
-    )};
-  --#{config.$prefix}btn-active-color: #{colors.$white};
-  --#{config.$prefix}btn-active-bg: #{if(
-      $active-background,
-      $active-background,
-      color.scale($background, $lightness: -20%)
-    )};
-  --#{config.$prefix}btn-active-border-color: #{if(
-      $active-border,
-      $active-border,
-      color.scale($border, $lightness: -25%)
-    )};
-  --#{config.$prefix}btn-disabled-color: #{colors.$white};
-  --#{config.$prefix}btn-disabled-bg: #{$background};
-  --#{config.$prefix}btn-disabled-border-color: #{$background};
+  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -15%)});
+  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -10%)});
+  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}white, #{colors.$white});
+  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$color}-hover, #{color.scale($background, $lightness: -20%)});
+  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$color}-hover, #{color.scale($border, $lightness: -25%)});
+  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}white, #{colors.$white});
+  --#{config.$prefix}btn-disabled-bg: var(--#{config.$prefix}#{$color}, #{$background});
+  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color}, #{$border});
 }
 
 // Button outline variant mixin
 @mixin btn-outline-variant(
   $color,
-  $color-hover: 'light',
-  $hover-background: $color,
-  $hover-border: $color,
-  $active-background: $color,
-  $active-border: $color
+  $color-hover: null,
+  $hover-background: null,
+  $hover-border: null,
+  $active-background: null,
+  $active-border: null
 ) {
-  @if ($hover-background == 'primary') {
-    $hover-background: 'primary';
-  }
-
-  @if ($hover-background == 'light') {
-    $hover-background: 'secondary';
-  }
-
-  @if ($hover-background == 'dark') {
-    $hover-background: 'secondary';
-  }
-
-  $btn-color: $color;
-
-  @if ($color == 'secondary') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
-
-  @if ($color == 'dark') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
+  $btn-color: var(--#{config.$prefix}#{$color}, #{map.get(tokens.$theme-colors, $color)});
+  $btn-hover-color: if(
+    $color-hover, 
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    var(--#{config.$prefix}white, #{colors.$white})
+  );
+  $btn-hover-bg: if(
+    $hover-background, 
+    var(--#{config.$prefix}#{$hover-background}, #{map.get(tokens.$theme-colors, $hover-background)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)})
+  );
+  $btn-hover-border: if(
+    $hover-border, 
+    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)})
+  );
+  $btn-active-color: if(
+    $color-hover, 
+    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}), 
+    var(--#{config.$prefix}white, #{colors.$white})
+  );
+  $btn-active-bg: if(
+    $active-background, 
+    var(--#{config.$prefix}#{$active-background}, #{map.get(tokens.$theme-colors, $active-background)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)})
+  );
+  $btn-active-border: if(
+    $active-border, 
+    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}), 
+    var(--#{config.$prefix}#{$color}-hover, #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)})
+  );
 
-  @if ($color == 'light') {
-    $btn-color: 'invert';
-    $color-hover: 'invert';
-  }
-
-  --#{config.$prefix}btn-color: var(--#{config.$prefix}#{$btn-color});
+  --#{config.$prefix}btn-color: #{$btn-color};
   --#{config.$prefix}btn-bg: transparent;
-  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color});
-  --#{config.$prefix}btn-hover-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$hover-background});
-  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$hover-border});
-  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$active-background});
-  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$active-border});
-  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}#{$color});
+  --#{config.$prefix}btn-border-color: #{$btn-color};
+  --#{config.$prefix}btn-hover-color: #{$btn-hover-color};
+  --#{config.$prefix}btn-hover-bg: #{$btn-hover-bg};
+  --#{config.$prefix}btn-hover-border-color: #{$btn-hover-border};
+  --#{config.$prefix}btn-active-color: #{$btn-active-color};
+  --#{config.$prefix}btn-active-bg: #{$btn-active-bg};
+  --#{config.$prefix}btn-active-border-color: #{$btn-active-border};
+  --#{config.$prefix}btn-disabled-color: #{$btn-color};
   --#{config.$prefix}btn-disabled-bg: transparent;
-  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color});
+  --#{config.$prefix}btn-disabled-border-color: #{$btn-color};
 }
 
 // Button size mixin
@@ -117,4 +104,4 @@
   --#{config.$prefix}btn-padding-x: #{$padding-x};
   --#{config.$prefix}btn-font-size: #{$font-size};
   --#{config.$prefix}btn-border-radius: #{$border-radius};
-}
+}

package/src/styles/06-components/_components.atomix-glass.scss

@@ -1,6 +1,8 @@
 // Component: AtomixGlass
 // =============================================================================
 
+@use '../02-tools/tools.component' as *;
+
 .c-atomix-glass {
   position: relative;
 
@@ -38,19 +40,19 @@
   }
 
   &__hover-1 {
-    transition: opacity 0.2s ease-out;
+    transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
     opacity: var(--atomix-glass-hover-1-opacity, 0);
     background: var(--atomix-glass-hover-1-gradient, none);
   }
 
   &__hover-2 {
-    transition: opacity 0.4s ease-out;
+    transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
     opacity: var(--atomix-glass-hover-2-opacity, 0);
     background: var(--atomix-glass-hover-2-gradient, none);
   }
 
   &__hover-3 {
-    transition: opacity 0.6s ease-out;
+    transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
     opacity: var(--atomix-glass-hover-3-opacity, 0);
     background: var(--atomix-glass-hover-3-gradient, none);
   }
@@ -91,6 +93,7 @@
     box-sizing: border-box;
     overflow: hidden;
     pointer-events: none;
+    /* postcss-ignore-start */
     -webkit-mask:
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
@@ -99,6 +102,7 @@
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
     mask-composite: exclude;
+    /* postcss-ignore-end */
 
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
@@ -233,6 +237,12 @@
     --atomix-glass-transition: none;
   }
 
+  // Focus ring for interactive elements (when onClick is provided)
+  &[role='button'],
+  &[tabindex]:not([tabindex='-1']) {
+    @include focus-ring;
+  }
+
   // Responsive and accessibility
   @media (prefers-reduced-motion: reduce) {
     --atomix-glass-transition: none;