@shohojdhara/atomix 0.3.0 → 0.3.1

package/src/lib/types/components.ts

@@ -27,15 +27,15 @@ export interface GlassSize {
 
 /**
  * OverLight configuration - can be boolean, 'auto', or object with settings
- * 
+ *
  * @example
  * // Boolean - explicit control
  * overLight={true}
- * 
+ *
  * @example
  * // Auto-detection - automatically detects background brightness
  * overLight="auto"
- * 
+ *
  * @example
  * // Object config - auto-detection with custom settings
  * overLight={{
@@ -46,22 +46,19 @@ export interface GlassSize {
  *   saturationBoost: 1.5
  * }}
  */
-export type OverLightConfig =
-  | boolean
-  | 'auto'
-  | OverLightObjectConfig;
+export type OverLightConfig = boolean | 'auto' | OverLightObjectConfig;
 
 /**
  * OverLight object configuration
- * 
+ *
  * When using object mode, the component will auto-detect background brightness
  * and apply the custom settings. All properties are optional and will use
  * sensible defaults if not provided.
- * 
+ *
  * @example
  * // Minimal config - only threshold
  * overLight={{ threshold: 0.8 }}
- * 
+ *
  * @example
  * // Full config with all properties
  * overLight={{
@@ -75,99 +72,99 @@ export type OverLightConfig =
 export interface OverLightObjectConfig {
   /**
    * Luminance threshold for auto-detection (0.1 - 1.0)
-   * 
+   *
    * Backgrounds with average luminance above this threshold will be
    * considered "light" and trigger overLight mode.
-   * 
+   *
    * @default 0.7
    * @minimum 0.1
    * @maximum 1.0
-   * 
+   *
    * @example
    * // More sensitive detection (triggers on lighter backgrounds)
    * threshold: 0.6
-   * 
+   *
    * @example
    * // Less sensitive detection (only very light backgrounds)
    * threshold: 0.85
    */
   threshold?: number;
-  
+
   /**
    * Base opacity for overLight layers (0.1 - 1.0)
-   * 
+   *
    * Controls the opacity of the base and overlay layers when overLight
    * mode is active. This value is multiplied by hover/active intensity
    * multipliers for dynamic effects.
-   * 
+   *
    * @default 0.5 (dynamic, depends on hover/active state)
    * @minimum 0.1
    * @maximum 1.0
-   * 
+   *
    * @example
    * // Subtle overlay
    * opacity: 0.3
-   * 
+   *
    * @example
    * // Strong overlay
    * opacity: 0.7
    */
   opacity?: number;
-  
+
   /**
    * Contrast enhancement multiplier (0.5 - 2.5)
-   * 
+   *
    * Increases the contrast of the glass effect for better visibility
    * on light backgrounds. Higher values create more dramatic effects.
-   * 
+   *
    * @default 1.4 (dynamic, includes mouse influence)
    * @minimum 0.5
    * @maximum 2.5
-   * 
+   *
    * @example
    * // Subtle contrast boost
    * contrast: 1.2
-   * 
+   *
    * @example
    * // High contrast for maximum visibility
    * contrast: 2.0
    */
   contrast?: number;
-  
+
   /**
    * Brightness adjustment multiplier (0.5 - 2.0)
-   * 
+   *
    * Adjusts the overall brightness of the glass effect. Values above 1.0
    * brighten the effect, while values below 1.0 darken it.
-   * 
+   *
    * @default 0.85 (dynamic, includes mouse influence)
    * @minimum 0.5
    * @maximum 2.0
-   * 
+   *
    * @example
    * // Neutral brightness
    * brightness: 1.0
-   * 
+   *
    * @example
    * // Brighter effect
    * brightness: 1.2
    */
   brightness?: number;
-  
+
   /**
    * Saturation boost multiplier (0.5 - 3.0)
-   * 
+   *
    * Enhances color saturation for more vibrant glass effects on light
    * backgrounds. This works in conjunction with the base saturation prop.
-   * 
+   *
    * @default 1.3 (dynamic, includes mouse influence)
    * @minimum 0.5
    * @maximum 3.0
-   * 
+   *
    * @example
    * // Moderate saturation boost
    * saturationBoost: 1.2
-   * 
+   *
    * @example
    * // High saturation for vivid effects
    * saturationBoost: 2.0
@@ -231,16 +228,16 @@ export interface AtomixGlassProps {
 
   /**
    * Debug mode for overLight detection and configuration
-   * 
+   *
    * When enabled, logs detailed information about:
    * - Auto-detection results (luminance values, threshold comparison)
    * - Final overLight configuration values
    * - Detection timing and performance
-   * 
+   *
    * Useful for debugging auto-detection issues and fine-tuning thresholds.
-   * 
+   *
    * @default false
-   * 
+   *
    * @example
    * <AtomixGlass overLight="auto" debugOverLight={true}>
    *   Content
@@ -414,10 +411,22 @@ export interface ButtonProps extends BaseComponentProps {
   size?: Size;
 
   /**
-   * Optional icon
+   * Optional icon (ReactNode)
    */
   icon?: ReactNode;
 
+  /**
+   * Icon name from Phosphor Icons (simplified icon prop)
+   * When provided, automatically creates an Icon component
+   * @example iconName="Rocket" iconSize="sm"
+   */
+  iconName?: string;
+
+  /**
+   * Icon size (used with iconName prop)
+   */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
   /**
    * Icon position (start or end)
    */
@@ -514,6 +523,17 @@ export interface ButtonProps extends BaseComponentProps {
    */
   tabIndex?: number;
 
+  /**
+   * Link URL - when provided, button renders as Next.js Link or anchor element
+   * Automatically wraps with Next.js Link if available, otherwise uses anchor
+   */
+  href?: string;
+
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
   /**
    * Custom style for the button
    */
@@ -1217,21 +1237,6 @@ export interface SideMenuProps extends BaseComponentProps {
    */
   children: ReactNode;
 
-  /**
-   * Menu items
-   */
-  menuItems?: {
-    title?: ReactNode;
-    toggleIcon?: ReactNode;
-    items?: {
-      title?: ReactNode;
-      icon?: ReactNode;
-      href?: string;
-      onClick?: (event: React.MouseEvent) => void;
-      active?: boolean;
-      disabled?: boolean;
-    }[];
-  }[];
   /**
    * Whether the menu is open (for controlled component)
    */
@@ -1275,10 +1280,60 @@ export interface SideMenuProps extends BaseComponentProps {
   glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 
   /**
-   * Optional custom link component (e.g., Next.js Link)
+   * Optional custom link component (e.g., Next.js Link, React Router Link)
    * Will be passed to all SideMenuItem components
+   *
+   * @example
+   * ```tsx
+   * // Next.js
+   * import Link from 'next/link';
+   * <SideMenu LinkComponent={Link} />
+   *
+   * // React Router
+   * import { Link } from 'react-router-dom';
+   * <SideMenu LinkComponent={Link} />
+   * ```
+   */
+  LinkComponent?: React.ComponentType<{
+    href?: string;
+    to?: string;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    target?: string;
+    rel?: string;
+    'aria-disabled'?: boolean;
+    'aria-current'?: string;
+    tabIndex?: number;
+    ref?: React.Ref<HTMLAnchorElement>;
+  }>;
+
+  /**
+   * Menu items
    */
-  LinkComponent?: React.ElementType;
+  menuItems?: Array<{
+    title?: ReactNode;
+    toggleIcon?: ReactNode;
+    items?: Array<{
+      title?: ReactNode;
+      icon?: ReactNode | undefined;
+      href?: string | undefined;
+      onClick?: (event: React.MouseEvent) => void | undefined;
+      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;
+    }>;
+  }>;
 }
 
 /**
@@ -1331,9 +1386,33 @@ export interface SideMenuItemProps extends BaseComponentProps {
   rel?: string;
 
   /**
-   * Optional custom link component
-   */
-  LinkComponent?: React.ElementType;
+   * Optional custom link component (e.g., Next.js Link, React Router Link)
+   * If not provided, will use LinkComponent from parent SideMenu context
+   *
+   * @example
+   * ```tsx
+   * // Next.js
+   * import Link from 'next/link';
+   * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
+   *
+   * // React Router
+   * import { Link } from 'react-router-dom';
+   * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
+   * ```
+   */
+  LinkComponent?: React.ComponentType<{
+    href?: string;
+    to?: string;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    target?: string;
+    rel?: string;
+    'aria-disabled'?: boolean;
+    'aria-current'?: string;
+    tabIndex?: number;
+    ref?: React.Ref<HTMLAnchorElement>;
+  }>;
 }
 
 /**
@@ -3362,6 +3441,16 @@ export interface CardProps extends BaseComponentProps {
    */
   elevation?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 
+  /**
+   * Enable hover effects (adds hover elevation and transition)
+   */
+  hoverable?: boolean;
+
+  /**
+   * Elevation level on hover (only applies when hoverable is true)
+   */
+  hoverElevation?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
   /**
    * Row layout (horizontal card)
    */

package/src/styles/01-settings/_index.scss

@@ -36,7 +36,7 @@
 @forward './settings.link';
 @forward './settings.list-group';
 @forward './settings.list';
-@forward './settings.maps';
+@forward './settings.design-tokens';
 @forward './settings.menu';
 @forward './settings.messages';
 @forward './settings.modal';
@@ -64,4 +64,4 @@
 @forward './settings.typography';
 @forward './settings.upload';
 @forward './settings.video-player';
-@forward './settings.z-layers';
+@forward './settings.z-layers';

package/src/styles/01-settings/_settings.badge.scss

@@ -6,8 +6,8 @@
 $badge-font-size: fonts.$font-size-xs !default;
 $badge-font-weight: fonts.$font-weight-normal !default;
 
-$badge-padding-x: map.get($spacing-sizes, 2.5) !default; //10px
-$badge-padding-y: map.get($spacing-sizes, 1.5) !default; //6px
+$badge-padding-x: map.get($spacing-sizes, 'px-10') !default; //10px
+$badge-padding-y: map.get($spacing-sizes, 'px-6') !default; //6px
 $badge-padding-y-sm: map.get($spacing-sizes, 1) !default; //4px
 $badge-padding-y-lg: map.get($spacing-sizes, 2) !default; //8px
 

package/src/styles/01-settings/_settings.border-radius.scss

@@ -4,7 +4,7 @@
 $border-radius: map.get($spacing-sizes, 2) !default; //8px
 $border-radius-sm: map.get($spacing-sizes, 1) !default; //4px
 $border-radius-md: map.get($spacing-sizes, 1) !default; //4px
-$border-radius-lg: map.get($spacing-sizes, 2.5) !default; //10px
+$border-radius-lg: map.get($spacing-sizes, 'px-10') !default; //10px
 $border-radius-xl: map.get($spacing-sizes, 3) !default; //12px
 $border-radius-xxl: map.get($spacing-sizes, 4) !default; //16px
 $border-radius-3xl: map.get($spacing-sizes, 6) !default; //24px