@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/theme-tools.ts

@@ -7,8 +7,6 @@
 import { Theme, ThemeMetadata } from './theme/types';
 import { createTheme } from './theme/createTheme';
 import { extendTheme, mergeTheme } from './theme/composeTheme';
-import { ComponentOverrideManager } from './theme/overrides/ComponentOverrides';
-import { WhiteLabelManager } from './theme/whitelabel/WhiteLabelManager';
 import { generateCSSVariables } from './theme/generateCSSVariables';
 
 /**
@@ -34,7 +32,7 @@ export function createDarkVariant(lightTheme: Theme): Theme {
       mode: 'dark',
       background: {
         default: '#121212',
-        paper: '#1e1e1e',
+        subtle: '#1e1e1e',
       },
       text: {
         primary: '#ffffff',
@@ -49,19 +47,19 @@ export function createDarkVariant(lightTheme: Theme): Theme {
  */
 export function validateTheme(theme: Theme): { valid: boolean; errors: string[] } {
   const errors: string[] = [];
-  
+
   if (!theme.name) {
     errors.push('Theme must have a name');
   }
-  
+
   if (!theme.palette) {
     errors.push('Theme must have a palette');
   }
-  
+
   if (theme.palette && !theme.palette.primary) {
     errors.push('Theme palette must have a primary color');
   }
-  
+
   return {
     valid: errors.length === 0,
     errors,
@@ -78,61 +76,6 @@ export function themeToCSS(theme: Theme, selector = ':root'): string {
   });
 }
 
-/**
- * Apply overrides to theme easily
- */
-export function applyOverrides(
-  theme: Theme,
-  overrides: Record<string, any>
-): Theme {
-  const manager = new ComponentOverrideManager(theme);
-  
-  Object.entries(overrides).forEach(([component, override]) => {
-    manager.addOverride(component, override);
-  });
-  
-  const overriddenTheme = manager.getThemeWithOverrides();
-  if (!overriddenTheme) {
-    throw new Error('Failed to get theme with overrides: theme was not set');
-  }
-  
-  return overriddenTheme;
-}
-
-/**
- * Apply white label configuration
- */
-export function applyWhiteLabel(
-  theme: Theme,
-  brand: {
-    name: string;
-    primaryColor: string;
-    logo?: string;
-  }
-): Theme {
-  const manager = new WhiteLabelManager(theme);
-  
-  manager.configure({
-    brand: {
-      name: brand.name,
-      primaryColor: brand.primaryColor,
-      logo: brand.logo,
-    },
-    themeOverrides: {
-      palette: {
-        primary: { main: brand.primaryColor },
-      },
-    },
-  });
-  
-  const whiteLabeledTheme = manager.getWhiteLabeledTheme();
-  if (!whiteLabeledTheme) {
-    throw new Error('Failed to get white labeled theme: theme was not set');
-  }
-  
-  return whiteLabeledTheme;
-}
-
 /**
  * Get theme metadata
  */
@@ -153,9 +96,9 @@ export function getThemeMetadata(theme: Theme): ThemeMetadata {
  * Check if theme supports dark mode
  */
 export function supportsDarkMode(theme: Theme): boolean {
-  return theme.palette?.mode === 'dark' || 
-         theme.supportsDarkMode === true ||
-         Boolean(theme.a11y?.modes?.includes('dark'));
+  return theme.palette?.mode === 'dark' ||
+    theme.supportsDarkMode === true ||
+    Boolean(theme.a11y?.modes?.includes('dark'));
 }
 
 /**
@@ -179,7 +122,4 @@ export function importTheme(json: string): Theme {
 // Re-export commonly used functions
 export { createTheme, extendTheme, mergeTheme };
 export { generateCSSVariables };
-export { ComponentOverrideManager } from './theme/overrides/ComponentOverrides';
-export { WhiteLabelManager } from './theme/whitelabel/WhiteLabelManager';
 export { RTLManager } from './theme/i18n/rtl';
-export { ThemeAnalytics } from './theme/monitoring/ThemeAnalytics';

package/src/lib/types/components.ts

@@ -261,13 +261,7 @@ export type Size = 'sm' | 'md' | 'lg';
 /**
  * Available theme variants in the Shaj theme system
  */
-export type ThemeName =
-  | 'shaj-default'
-  | 'shaj-ocean'
-  | 'shaj-sunset'
-  | 'shaj-forest'
-  | 'shaj-midnight'
-  | 'shaj-pastel';
+export type ThemeName = string;
 
 // ============================================================================
 // END THEME SYSTEM TYPES
@@ -412,19 +406,19 @@ export interface ButtonProps extends BaseComponentProps {
    * Button size
    */
   size?: Size;
-  
+
   /**
    * Part-based styling (NEW)
    * Allows styling individual button parts
    */
   parts?: ButtonParts;
-  
+
   /**
    * CSS variable overrides (NEW)
    * Runtime CSS custom property overrides
    */
   cssVars?: Partial<Record<ButtonCSSVariable, string | number>>;
-  
+
   /**
    * Slot-based customization (NEW)
    * Complete control over rendering
@@ -637,6 +631,69 @@ 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
  */
@@ -722,6 +779,27 @@ export interface AccordionProps extends BaseComponentProps {
    */
   icon?: ReactNode;
 
+  /**
+   * Whether the accordion is open
+   */
+  isOpen?: boolean;
+
+  /**
+   * Whether the accordion is disabled
+   */
+  disabled?: boolean;
+
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Optional open handler
+   */
+  onOpen?: () => void;
+
+  /**
+   * Optional close handler
+   */
+  onClose?: () => void;
   /**
    * Glass morphism effect for the accordion
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -1002,6 +1080,60 @@ export interface SpinnerProps extends BaseComponentProps {
   glass?: AtomixGlassProps | boolean;
 }
 
+/**
+ * Icon size options
+ */
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Icon weight/style options
+ */
+export type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+
+/**
+ * Phosphor icon type - excludes internal Phosphor exports
+ */
+export type PhosphorIconsType = Exclude<
+  keyof typeof import('@phosphor-icons/react'),
+  '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
  */
@@ -1383,16 +1515,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;
     }>;
   }>;
 }
@@ -2734,18 +2866,59 @@ export interface BreadcrumbItem {
   active?: boolean;
 
   /**
-   * Icon name from Phosphor Icons
+   * Icon name from Phosphor Icons or ReactNode
    */
-  icon?: string;
+  icon?: string | ReactNode;
 
   /**
    * Optional click handler
    */
-  onClick?: (event: MouseEvent) => void;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+
+  /**
+   * Custom style for the breadcrumb item
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Additional className
+   */
+  className?: string;
 }
 
 /**
- * Breadcrumb options interface
+ * 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)
  */
 export interface BreadcrumbOptions {
   /**
@@ -3418,17 +3591,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
@@ -4816,23 +4989,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)
@@ -4895,16 +5068,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
@@ -4940,23 +5113,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
@@ -4971,16 +5144,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
@@ -6233,36 +6406,6 @@ export interface FooterSocialLinkProps extends BaseComponentProps {
  */
 export type GlassMode = 'standard' | 'polar' | 'prominent' | 'shader';
 
-/**
- * Glass container size configuration
- */
-export interface GlassSize {
-  /**
-   * Width of the glass container
-   */
-  width: number;
-
-  /**
-   * Height of the glass container
-   */
-  height: number;
-}
-
-/**
- * Mouse position coordinates
- */
-export interface MousePosition {
-  /**
-   * X coordinate
-   */
-  x: number;
-
-  /**
-   * Y coordinate
-   */
-  y: number;
-}
-
 /**
  * Glass container component properties
  */

package/src/lib/types/partProps.ts

@@ -384,22 +384,6 @@ export function mergePartStyles(
   };
 }
 
-/**
- * Utility function to apply part styles to props
- */
-export function applyPartStyles<T extends Record<string, any>>(
-  props: T,
-  part?: PartStyleProps
-): T {
-  if (!part) return props;
-
-  return {
-    ...props,
-    className: [props.className, part.className].filter(Boolean).join(' '),
-    style: { ...props.style, ...part.style },
-  };
-}
-
 /**
  * Map of component names to their part types
  */