@shohojdhara/atomix 0.3.12 → 0.3.14

package/src/lib/types/components.ts

@@ -179,7 +179,7 @@ export interface OverLightObjectConfig {
  * AtomixGlass component props interface
  */
 export interface AtomixGlassProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   displacementScale?: number;
   blurAmount?: number;
   saturation?: number;
@@ -349,6 +349,7 @@ export interface ListProps extends BaseComponentProps {
 
   /**
    * List size
+   * @default 'md'
    */
   size?: Size;
 
@@ -399,11 +400,13 @@ export interface ButtonProps extends BaseComponentProps {
 
   /**
    * Button variant
+   * @default 'solid'
    */
   variant?: Variant;
 
   /**
    * Button size
+   * @default 'md'
    */
   size?: Size;
 
@@ -521,22 +524,22 @@ export interface ButtonProps extends BaseComponentProps {
   /**
    * ARIA label for accessibility
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ARIA described by reference
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * ARIA expanded state (for toggle buttons)
    */
-  ariaExpanded?: boolean;
+  'aria-expanded'?: boolean;
 
   /**
    * ARIA controls reference
    */
-  ariaControls?: string;
+  'aria-controls'?: string;
 
   /**
    * Tab index for keyboard navigation
@@ -601,11 +604,13 @@ export interface BadgeProps extends BaseComponentProps {
 
   /**
    * Badge color variant
+   * @default 'primary'
    */
   variant?: ThemeColor;
 
   /**
    * Badge size
+   * @default 'md'
    */
   size?: Size;
 
@@ -614,6 +619,16 @@ export interface BadgeProps extends BaseComponentProps {
    */
   icon?: ReactNode;
 
+  /**
+   * Callback for dismissible badges (shows close button when provided)
+   */
+  onRemove?: () => void;
+
+  /**
+   * Accessible label for the badge
+   */
+  'aria-label'?: string;
+
   /**
    * Glass morphism effect for the badge
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -696,14 +711,14 @@ export interface CalloutProps extends BaseComponentProps {
   actions?: ReactNode;
 
   /**
-   * Display in one line mode
+   * Display in compact (one-line) mode
    */
-  oneLine?: boolean;
+  compact?: boolean;
 
   /**
    * Display as toast notification
    */
-  toast?: boolean;
+  isToast?: boolean;
 
   /**
    * Glass morphism effect for the callout
@@ -756,14 +771,19 @@ export interface AccordionProps extends BaseComponentProps {
    */
   disabled?: boolean;
 
+  /**
+   * Callback called when the open state changes
+   */
   onOpenChange?: (open: boolean) => void;
 
   /**
+   * @deprecated Use onOpenChange instead
    * Optional open handler
    */
   onOpen?: () => void;
 
   /**
+   * @deprecated Use onOpenChange instead
    * Optional close handler
    */
   onClose?: () => void;
@@ -1027,11 +1047,13 @@ export interface HeroProps extends BaseComponentProps {
 export interface SpinnerProps extends BaseComponentProps {
   /**
    * Spinner color variant
+   * @default 'primary'
    */
   variant?: ThemeColor;
 
   /**
    * Spinner size
+   * @default 'md'
    */
   size?: Size;
 
@@ -1040,6 +1062,18 @@ export interface SpinnerProps extends BaseComponentProps {
    */
   fullscreen?: boolean;
 
+  /**
+   * Accessible label for screen readers
+   * @default 'Loading'
+   */
+  'aria-label'?: string;
+
+  /**
+   * ARIA role for the spinner
+   * @default 'status'
+   */
+  role?: 'status' | 'alert';
+
   /**
    * Glass morphism effect for the spinner
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -1142,7 +1176,7 @@ export interface NavbarProps extends BaseComponentProps {
   /**
    * Custom aria-label for the navigation
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ID for the navbar (used for accessibility)
@@ -1909,13 +1943,14 @@ export interface PaginationProps extends BaseComponentProps {
 
   /**
    * Size variant for the pagination component
+   * @default 'md'
    */
   size?: Size;
 
   /**
    * Accessible label for the navigation element
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * Glass morphism effect for the pagination component
@@ -2096,6 +2131,7 @@ export interface FormGroupProps extends BaseComponentProps {
 export interface InputProps extends BaseComponentProps {
   /**
    * Input type
+   * @default 'text'
    */
   type?: string;
 
@@ -2104,6 +2140,11 @@ export interface InputProps extends BaseComponentProps {
    */
   value?: string | number;
 
+  /**
+   * Default value for uncontrolled input
+   */
+  defaultValue?: string | number;
+
   /**
    * Change handler
    */
@@ -2156,6 +2197,7 @@ export interface InputProps extends BaseComponentProps {
 
   /**
    * Size variant
+   * @default 'md'
    */
   size?: Size;
 
@@ -2207,12 +2249,12 @@ export interface InputProps extends BaseComponentProps {
   /**
    * Accessible label (if no visible label)
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ID of element that describes this input
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * Glass morphism effect
@@ -2341,6 +2383,7 @@ export interface SelectProps extends BaseComponentProps {
 
   /**
    * Size variant
+   * @default 'md'
    */
   size?: Size;
 
@@ -2362,12 +2405,12 @@ export interface SelectProps extends BaseComponentProps {
   /**
    * Accessible label (if no visible label)
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ID of element that describes this select
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * Glass morphism effect for the select
@@ -2448,12 +2491,12 @@ export interface CheckboxProps extends BaseComponentProps {
   /**
    * Accessible label (if no visible label)
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ID of element that describes this checkbox
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * Glass morphism effect for the checkbox
@@ -2461,6 +2504,11 @@ export interface CheckboxProps extends BaseComponentProps {
    */
   glass?: AtomixGlassProps | boolean;
 
+  /**
+   * Click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+
   /**
    * Error message to display
    */
@@ -2560,12 +2608,12 @@ export interface RadioProps extends BaseComponentProps {
   /**
    * Accessible label (if no visible label)
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ID of element that describes this radio
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * Glass morphism effect for the radio button
@@ -2629,6 +2677,11 @@ export interface TextareaProps extends BaseComponentProps {
    */
   value?: string;
 
+  /**
+   * Default value for uncontrolled textarea
+   */
+  defaultValue?: string;
+
   /**
    * Change handler
    */
@@ -2671,6 +2724,7 @@ export interface TextareaProps extends BaseComponentProps {
 
   /**
    * Number of rows
+   * @default 4
    */
   rows?: number;
 
@@ -2691,6 +2745,7 @@ export interface TextareaProps extends BaseComponentProps {
 
   /**
    * Size variant
+   * @default 'md'
    */
   size?: Size;
 
@@ -2717,12 +2772,12 @@ export interface TextareaProps extends BaseComponentProps {
   /**
    * Accessible label (if no visible label)
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ID of element that describes this textarea
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * Glass morphism effect
@@ -2970,7 +3025,7 @@ export interface BreadcrumbOptions {
   /**
    * Accessible label for the breadcrumb navigation
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * Glass morphism effect for the breadcrumb
@@ -3379,7 +3434,7 @@ export interface ProgressProps extends BaseComponentProps {
   /**
    * Accessible label for screen readers
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * Glass morphism effect for the progress bar
@@ -3456,9 +3511,9 @@ export interface RatingProps extends BaseComponentProps {
   size?: Size;
 
   /**
-   * Color theme
+   * Color variant
    */
-  color?: ThemeColor;
+  variant?: ThemeColor;
 
   /**
    * Optional callback when rating changes
@@ -3910,12 +3965,12 @@ export interface CardProps extends BaseComponentProps {
   /**
    * ARIA label for accessibility
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /**
    * ARIA described by reference
    */
-  ariaDescribedBy?: string;
+  'aria-describedby'?: string;
 
   /**
    * Tab index for keyboard navigation

package/src/lib/utils/themeNaming.ts

@@ -36,7 +36,7 @@ export class ThemeNaming {
    * @param str - String to convert
    */
   static kebabToCamel(str: string): string {
-    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    return str.replace(/-([a-z])/g, (g) => g[1]?.toUpperCase() ?? '');
   }
 
   /**

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

@@ -93,16 +93,18 @@
     box-sizing: border-box;
     overflow: hidden;
     pointer-events: none;
-    /* postcss-ignore-start */
+    /* autoprefixer: ignore next */
     -webkit-mask:
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
+    /* autoprefixer: ignore next */
     -webkit-mask-composite: xor;
+    /* autoprefixer: ignore next */
     mask:
       linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
       linear-gradient(var(--atomix-black, #000000) 0 0);
+    /* autoprefixer: ignore next */
     mask-composite: exclude;
-    /* postcss-ignore-end */
 
     position: var(--atomix-glass-position);
     top: var(--atomix-glass-top);
@@ -119,24 +121,20 @@
     mix-blend-mode: screen;
     z-index: var(--atomix-z-index-5, 5);
     background: var(--atomix-glass-border-gradient-1, none);
-    box-shadow: var(
-      --atomix-glass-border-shadow,
-      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
-    );
+    box-shadow: var(--atomix-glass-border-shadow,
+        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
   }
 
   &__border-2 {
     mix-blend-mode: overlay;
     z-index: var(--atomix-z-index-6, 6);
     background: var(--atomix-glass-border-gradient-2, none);
-    box-shadow: var(
-      --atomix-glass-border-shadow,
-      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
-    );
+    box-shadow: var(--atomix-glass-border-shadow,
+        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
   }
 
   // Container styles
@@ -195,6 +193,7 @@
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
+
     &--dark {
       background-color: var(--atomix-gray-9, #1f2937);
     }
@@ -255,4 +254,4 @@
   @media (prefers-contrast: high) {
     border-width: var(--atomix-spacing-0-5, 0.125rem);
   }
-}
+}

package/src/styles/06-components/_components.callout.scss

@@ -11,12 +11,12 @@
   --#{config.$prefix}callout-width: #{callout.$callout-width};
   --#{config.$prefix}callout-padding-x: #{rem.rem(callout.$callout-padding-x)};
   --#{config.$prefix}callout-padding-y: #{rem.rem(callout.$callout-padding-y)};
-  --#{config.$prefix}callout-tost-padding-x: #{rem.rem(callout.$callout-tost-padding-x)};
-  --#{config.$prefix}callout-tost-padding-y: #{rem.rem(callout.$callout-tost-padding-y)};
+  --#{config.$prefix}callout-toast-padding-x: #{rem.rem(callout.$callout-tost-padding-x)};
+  --#{config.$prefix}callout-toast-padding-y: #{rem.rem(callout.$callout-tost-padding-y)};
   --#{config.$prefix}callout-bg: #{callout.$callout-bg};
   --#{config.$prefix}callout-border-radius: #{callout.$callout-border-radius};
   --#{config.$prefix}callout-border-color: #{callout.$callout-border-color};
-  --#{config.$prefix}callout-border-witdh: #{callout.$callout-border-width};
+  --#{config.$prefix}callout-border-width: #{callout.$callout-border-width};
   --#{config.$prefix}callout-title-font-size: #{callout.$callout-title-font-size};
   --#{config.$prefix}callout-title-font-weight: #{callout.$callout-title-font-weight};
   --#{config.$prefix}callout-title-color: #{callout.$callout-title-color};
@@ -43,13 +43,9 @@
   padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
   @include dynamic-background(var(--#{config.$prefix}callout-bg));
   border-radius: var(--#{config.$prefix}callout-border-radius);
-  border: var(--#{config.$prefix}callout-border-witdh) solid
-    var(--#{config.$prefix}callout-border-color);
-  transition:
-    opacity var(--#{config.$prefix}callout-transition-duration)
-      var(--#{config.$prefix}callout-transition-timing),
-    transform var(--#{config.$prefix}callout-transition-duration)
-      var(--#{config.$prefix}callout-transition-timing);
+  border: var(--#{config.$prefix}callout-border-witdh) solid var(--#{config.$prefix}callout-border-color);
+  transition: opacity var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing),
+  transform var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing);
 
   &__content {
     width: 100%;
@@ -124,7 +120,7 @@
     }
   }
 
-  &--oneline {
+  &--compact {
     #{$root} {
       &__message {
         display: flex;
@@ -139,8 +135,7 @@
     position: relative;
     max-width: rem.rem(350px);
     width: 100%;
-    padding: var(--#{config.$prefix}callout-tost-padding-y)
-      var(--#{config.$prefix}callout-tost-padding-x);
+    padding: var(--#{config.$prefix}callout-tost-padding-y) var(--#{config.$prefix}callout-tost-padding-x);
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
@@ -156,16 +151,14 @@
       }
 
       &__actions {
-        padding-left: calc(
-          var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer)
-        );
+        padding-left: calc(var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer));
         margin-top: var(--#{config.$prefix}callout-actions-spacer-y);
       }
 
       &__close-btn {
         position: absolute;
-        top: var(--#{config.$prefix}callout-tost-padding-y);
-        right: var(--#{config.$prefix}callout-tost-padding-x);
+        top: var(--#{config.$prefix}callout-toast-padding-y);
+        right: var(--#{config.$prefix}callout-toast-padding-x);
       }
     }
 
@@ -177,23 +170,29 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color == 'primary') {
+      @if ($color =='primary') {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}brand-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}brand-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}brand-text-emphasis);
-      } @else if($color == 'light') {
+      }
+
+      @else if($color =='light') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-text-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}tertiary-text-emphasis);
-      } @else if($color == 'dark') {
+      }
+
+      @else if($color =='dark') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-text-color: #{$gray-4};
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}dark-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
-      } @else {
+      }
+
+      @else {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}#{$color}-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}#{$color}-text-emphasis);
@@ -213,15 +212,12 @@
       justify-content: center;
       align-items: center;
       padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-      border: var(--#{config.$prefix}callout-border-witdh) solid
-        color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
+      border: var(--#{config.$prefix}callout-border-width) solid color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
       max-width: var(--#{config.$prefix}callout-width);
       border-radius: var(--#{config.$prefix}callout-border-radius);
       width: 100%;
-      @include dynamic-background(
-        var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true
-      );
+      @include dynamic-background(var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true);
     }
 
     // Adjust text colors for glass effect
@@ -235,10 +231,8 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
-      @include dynamic-background(
-        var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true
-      );
+      @include dynamic-background(var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true);
       box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
@@ -300,6 +294,7 @@
     opacity: 0;
     transform: translateY(-20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -311,8 +306,9 @@
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

package/src/styles/06-components/_index.scss

@@ -51,4 +51,4 @@
 @forward 'components.upload';
 @forward 'components.video-player';
 @forward 'components.photoviewer';
-@forward 'components.image-gallery';
+@forward 'components.image-gallery';

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

@@ -6,8 +6,19 @@ $utilities-display: (
     responsive: true,
     print: true,
     property: display,
-    class: u-d,
-    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
-      none,
+    class: u,
+    values: (
+      inline: inline,
+      'inline-block': inline-block, 
+      block: block,
+      grid: grid,
+      'inline-grid': inline-grid,
+      table: table,
+      'table-row': table-row,
+      'table-cell': table-cell,
+      flex: flex,
+      'inline-flex': inline-flex,
+      none: none,
+    ),
   ),
 );

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

@@ -19,19 +19,19 @@ $utilities-flex: (
   'flex-grow': (
     responsive: true,
     property: flex-grow,
-    class: u-flex,
+    class: u-flex-grow,
     values: (
-      grow-0: 0,
-      grow-1: 1,
+      '0': 0,
+      '1': 1,
     ),
   ),
   'flex-shrink': (
     responsive: true,
     property: flex-shrink,
-    class: u-flex,
+    class: u-flex-shrink,
     values: (
-      shrink-0: 0,
-      shrink-1: 1,
+      '0': 0,
+      '1': 1,
     ),
   ),
   'flex-wrap': (
@@ -43,7 +43,7 @@ $utilities-flex: (
   'justify-content': (
     responsive: true,
     property: justify-content,
-    class: u-justify-content,
+    class: u-justify,
     values: (
       start: flex-start,
       end: flex-end,
@@ -56,7 +56,7 @@ $utilities-flex: (
   'align-items': (
     responsive: true,
     property: align-items,
-    class: u-align-items,
+    class: u-items,
     values: (
       start: flex-start,
       end: flex-end,
@@ -68,7 +68,7 @@ $utilities-flex: (
   'align-content': (
     responsive: true,
     property: align-content,
-    class: u-align-content,
+    class: u-content,
     values: (
       start: flex-start,
       end: flex-end,
@@ -81,7 +81,7 @@ $utilities-flex: (
   'align-self': (
     responsive: true,
     property: align-self,
-    class: u-align-self,
+    class: u-self,
     values: (
       auto: auto,
       start: flex-start,