@shohojdhara/atomix 0.3.12 → 0.3.14

package/src/components/Form/Textarea.tsx

@@ -8,99 +8,101 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
  */
 export const Textarea = memo(
   forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      value,
-      onChange,
-      onBlur,
-      onFocus,
-      placeholder,
-      className = '',
-      style,
-      disabled = false,
-      required = false,
-      readOnly = false,
-      id,
-      name,
-      rows = 4,
-      cols,
-      maxLength,
-      minLength,
-      size = 'md',
-      variant,
-      invalid = false,
-      valid = false,
-      autoFocus = false,
-      ariaLabel,
-      ariaDescribedBy,
-      glass,
-    },
-    ref
-  ) => {
-    const { generateTextareaClass } = useTextarea({
-      size,
-      variant,
-      disabled,
-      invalid,
-      valid,
-    });
+    (
+      {
+        value,
+        defaultValue,
+        onChange,
+        onBlur,
+        onFocus,
+        placeholder,
+        className = '',
+        style,
+        disabled = false,
+        required = false,
+        readOnly = false,
+        id,
+        name,
+        rows = 4,
+        cols,
+        maxLength,
+        minLength,
+        size = 'md',
+        variant,
+        invalid = false,
+        valid = false,
+        autoFocus = false,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        glass,
+      },
+      ref
+    ) => {
+      const { generateTextareaClass } = useTextarea({
+        size,
+        variant,
+        disabled,
+        invalid,
+        valid,
+      });
 
-    const textareaClass = generateTextareaClass({
-      className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
-      size,
-      variant,
-      disabled,
-      invalid,
-      valid,
-    });
+      const textareaClass = generateTextareaClass({
+        className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
+        size,
+        variant,
+        disabled,
+        invalid,
+        valid,
+      });
 
-    // Custom styles for glass effect
-    const glassStyles = glass ? {} : {};
+      // Custom styles for glass effect
+      const glassStyles = glass ? {} : {};
 
-    const textareaElement = (
-      <textarea
-        ref={ref}
-        className={textareaClass}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        placeholder={placeholder}
-        disabled={disabled}
-        required={required}
-        readOnly={readOnly}
-        id={id}
-        name={name}
-        rows={rows}
-        cols={cols}
-        maxLength={maxLength}
-        minLength={minLength}
-        autoFocus={autoFocus}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-        style={glass ? { ...glassStyles, ...style } : style}
-      />
-    );
+      const textareaElement = (
+        <textarea
+          ref={ref}
+          className={textareaClass}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          readOnly={readOnly}
+          id={id}
+          name={name}
+          rows={rows}
+          cols={cols}
+          maxLength={maxLength}
+          minLength={minLength}
+          autoFocus={autoFocus}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+          style={glass ? { ...glassStyles, ...style } : style}
+        />
+      );
 
-    if (glass) {
-      // Default glass settings for textareas
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 180,
-        aberrationIntensity: 1,
-        cornerRadius: 8,
-        mode: 'shader' as const,
-      };
+      if (glass) {
+        // Default glass settings for textareas
+        const defaultGlassProps = {
+          displacementScale: 60,
+          blurAmount: 1,
+          saturation: 180,
+          aberrationIntensity: 1,
+          cornerRadius: 8,
+          mode: 'shader' as const,
+        };
 
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return <AtomixGlass {...glassProps}>{textareaElement}</AtomixGlass>;
-    }
+        return <AtomixGlass {...glassProps}>{textareaElement}</AtomixGlass>;
+      }
 
-    return textareaElement;
-  }
+      return textareaElement;
+    }
   )
 );
 

package/src/components/List/List.stories.tsx

@@ -71,7 +71,7 @@ export const Basic: Story = {
 export const VariantsShowcase: Story = {
   render: () => {
     return (
-      <div className="u-d-flex u-flex-column u-gap-8">
+      <div className="u-flex u-flex-column u-gap-8">
         {['Default', 'Dash', 'Number', 'Text'].map((title, index) => {
           const variant = index === 0 ? 'default' : title.toLowerCase();
           return createListSection(`${title} List`, variant, variant);
@@ -91,7 +91,7 @@ export const ListGroupShowcase: Story = {
     ];
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-8">
+      <div className="u-flex u-flex-column u-gap-8">
         <div>
           <h3 style={titleStyle}>Mixed Variants ListGroup</h3>
           <ListGroup>

package/src/components/Modal/Modal.stories.tsx

@@ -213,8 +213,8 @@ export const Sizes: Story = {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-4">
-        <div className="u-d-flex u-gap-4">
+      <div className="u-flex u-flex-column u-gap-4">
+        <div className="u-flex u-gap-4">
           <div
             className={`c-btn ${size === 'sm' ? 'c-btn--primary' : 'c-btn--secondary'}`}
             onClick={() => {
@@ -440,8 +440,8 @@ export const GlassModalSizes: Story = {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-4">
-        <div className="u-d-flex u-gap-4">
+      <div className="u-flex u-flex-column u-gap-4">
+        <div className="u-flex u-gap-4">
           <div
             className={`c-btn ${size === 'sm' ? 'c-btn--primary' : 'c-btn--secondary'}`}
             onClick={() => {

package/src/components/Navigation/Navbar/Navbar.stories.tsx

@@ -209,7 +209,7 @@ export const FixedBottom: Story = {
 // Navbar with different variants
 export const Variants: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3">
+    <div className="u-flex u-flex-column u-gap-3">
       <Navbar brand={<LogoBrand />} variant="primary">
         <Nav alignment="end">
           <NavItem>Link 1</NavItem>
@@ -293,7 +293,7 @@ export const Variants: Story = {
 // Navbar with different nav alignments
 export const NavAlignments: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3">
+    <div className="u-flex u-flex-column u-gap-3">
       <Navbar brand={<LogoBrand />}>
         <Nav alignment="start">
           <NavItem>Link 1</NavItem>
@@ -386,8 +386,8 @@ export const WithSearchField: Story = {
         <NavItem>Link 2</NavItem>
         <NavItem>Link 3</NavItem>
       </Nav>
-      <div className="u-ms-auto u-d-flex u-align-items-center">
-        <div className="c-search-form u-d-flex u-gap-2">
+      <div className="u-ms-auto u-flex u-items-center">
+        <div className="c-search-form u-flex u-gap-2">
           <input type="text" className="c-input c-input--sm" placeholder="Search..." />
           <button className="c-btn c-btn--primary c-btn--sm">
             <Icon name="MagnifyingGlass" size="sm" />
@@ -528,7 +528,7 @@ export const ResponsiveNavbar: Story = {
 // Mega Menu vs Dropdown Comparison
 export const MegaMenuVsDropdown: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3">
+    <div className="u-flex u-flex-column u-gap-3">
       <div>
         <h4 className="u-mb-3">Regular Dropdown</h4>
         <Navbar brand={<LogoBrand />}>

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -35,7 +35,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
       backdrop = false,
       closeOnOutsideClick = true,
       closeOnEscape = true,
-      ariaLabel = 'Main navigation',
+      'aria-label': ariaLabel = 'Main navigation',
       id,
       glass,
     },

package/src/components/Navigation/README.md

@@ -223,7 +223,7 @@ document.querySelector('.c-navbar').addEventListener('navbar:collapsed', (event)
 | `backdrop` | `boolean` | `false` | Show backdrop on mobile |
 | `closeOnOutsideClick` | `boolean` | `true` | Close on outside click |
 | `closeOnEscape` | `boolean` | `true` | Close on escape key |
-| `ariaLabel` | `string` | `'Main navigation'` | Accessible label |
+| `aria-label` | `string` | `'Main navigation'` | Accessible label |
 | `className` | `string` | - | Additional CSS classes |
 | `disabled` | `boolean` | `false` | Disable the navbar |
 

package/src/components/Pagination/Pagination.stories.tsx

@@ -58,7 +58,7 @@ const meta = {
       description: 'Size variant for pagination',
       defaultValue: 'md',
     },
-    ariaLabel: {
+    'aria-label': {
       control: 'text',
       description: 'Accessible label for the navigation element',
     },
@@ -71,6 +71,9 @@ const meta = {
       description: 'Enable glass morphism effect',
     },
   },
+  args: {
+    onPageChange: () => { },
+  },
 } satisfies Meta<typeof Pagination>;
 
 export default meta;
@@ -97,7 +100,7 @@ export const Default: Story = {
     showFirstLastButtons: true,
     showPrevNextButtons: true,
     size: 'md',
-    ariaLabel: 'Pagination',
+    'aria-label': 'Pagination',
   },
   parameters: {
     docs: {

package/src/components/Pagination/Pagination.tsx

@@ -62,7 +62,7 @@ export const Pagination: React.FC<PaginationProps> = memo(({
   size = PAGINATION_DEFAULTS.size,
   className = '',
   style,
-  ariaLabel = 'Pagination',
+  'aria-label': ariaLabel = 'Pagination',
   glass,
 }) => {
   const { paginationRange, goToPage, nextPage, prevPage, firstPage, lastPage } = usePagination({

package/src/components/PhotoViewer/PhotoViewer.stories.tsx

@@ -110,7 +110,7 @@ const PhotoViewerDemo: React.FC<{ images: ImageType[]; startIndex?: number }> =
         <p className="u-mb-4 u-text-secondary">
           Click on any image to open the PhotoViewer with full functionality.
         </p>
-        <div className="u-d-flex u-gap-4 u-mb-4">
+        <div className="u-flex u-gap-4 u-mb-4">
           <Badge variant="primary" label="Zoom & Pan" />
           <Badge variant="secondary" label="Keyboard Navigation" />
           <Badge variant="success" label="Touch Gestures" />
@@ -119,7 +119,7 @@ const PhotoViewerDemo: React.FC<{ images: ImageType[]; startIndex?: number }> =
       </div>
 
       <div
-        className="u-d-grid"
+        className="u-grid"
         style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}
       >
         {images.map((image, index) => (
@@ -132,8 +132,8 @@ const PhotoViewerDemo: React.FC<{ images: ImageType[]; startIndex?: number }> =
               onClick={() => openViewer(index)}
             />
             <div className="u-position-absolute u-bottom-0 u-start-0 u-end-0 u-bg-dark u-bg-opacity-75 u-p-3">
-              <h4 className="u-text-white u-fs-sm u-fw-medium u-mb-1">{image.title}</h4>
-              <p className="u-text-white u-fs-xs u-opacity-75 u-mb-0">{image.author}</p>
+              <h4 className="u-text-white u-text-sm u-font-medium u-mb-1">{image.title}</h4>
+              <p className="u-text-white u-text-xs u-opacity-75 u-mb-0">{image.author}</p>
             </div>
           </div>
         ))}
@@ -249,7 +249,7 @@ export const ThumbnailPositions: Story = {
             Choose a thumbnail position and click "Open Viewer" to see the layout.
           </p>
 
-          <div className="u-d-flex u-gap-3 u-mb-4">
+          <div className="u-flex u-gap-3 u-mb-4">
             {(['bottom', 'top', 'left', 'right', 'none'] as const).map(pos => (
               <Button
                 key={pos}
@@ -306,8 +306,8 @@ export const FeatureControls: Story = {
             Toggle features on/off to see how they affect the PhotoViewer behavior.
           </p>
 
-          <div className="u-d-flex u-gap-4 u-mb-4">
-            <label className="u-d-flex u-align-items-center u-gap-2">
+          <div className="u-flex u-gap-4 u-mb-4">
+            <label className="u-flex u-items-center u-gap-2">
               <input
                 type="checkbox"
                 checked={features.keyboard}
@@ -315,7 +315,7 @@ export const FeatureControls: Story = {
               />
               <span>Keyboard Navigation</span>
             </label>
-            <label className="u-d-flex u-align-items-center u-gap-2">
+            <label className="u-flex u-items-center u-gap-2">
               <input
                 type="checkbox"
                 checked={features.gestures}
@@ -323,7 +323,7 @@ export const FeatureControls: Story = {
               />
               <span>Touch Gestures</span>
             </label>
-            <label className="u-d-flex u-align-items-center u-gap-2">
+            <label className="u-flex u-items-center u-gap-2">
               <input
                 type="checkbox"
                 checked={features.fullscreen}
@@ -386,7 +386,7 @@ export const MobileOptimized: Story = {
           <li>Responsive controls and thumbnails</li>
           <li>Full-screen info panel on mobile</li>
         </ul>
-        <p className="u-text-tertiary u-fs-sm">
+        <p className="u-text-tertiary u-text-sm">
           Try this on a mobile device or use browser dev tools to simulate mobile viewport.
         </p>
       </div>

package/src/components/Popover/Popover.stories.tsx

@@ -83,7 +83,7 @@ const InteractivePopover = (args: React.ComponentProps<typeof Popover>) => {
 
   const content = (
     <>
-      <div className="u-d-flex u-align-items-center u-gap-7">
+      <div className="u-flex u-items-center u-gap-7">
         <span className="u-text-nowrap">Sort by</span>
         <div className="c-select">
           <select value={selectedOption} onChange={handleSelectChange}>

package/src/components/ProductReview/ProductReview.tsx

@@ -135,7 +135,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
               allowHalf={allowHalf}
               maxValue={maxRating}
               size="lg"
-              color={ratingColor}
+              variant={ratingColor}
             />
             <span className="c-rating__value">
               {rating > 0 ? rating.toFixed(1) : 'Select a rating'}

package/src/components/Progress/Progress.tsx

@@ -6,55 +6,55 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Progress = memo(
   forwardRef<HTMLDivElement, ProgressProps>(
-  (
-    {
-      value,
-      variant = 'primary',
-      size = 'md',
-      className = '',
-      style,
-      disabled = false,
-      ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
-      glass,
-    },
-    ref
-  ) => {
-    const { progressValue, progressStyle, progressClasses } = useProgress({
-      value,
-      variant,
-      size,
-      className,
-    });
+    (
+      {
+        value,
+        variant = 'primary',
+        size = 'md',
+        className = '',
+        style,
+        disabled = false,
+        'aria-label': ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
+        glass,
+      },
+      ref
+    ) => {
+      const { progressValue, progressStyle, progressClasses } = useProgress({
+        value,
+        variant,
+        size,
+        className,
+      });
 
-    const progressContent = (
-      <div
-        ref={ref}
-        className={progressClasses + (glass ? ' c-progress--glass' : '')}
-        style={{ ...progressStyle, ...style }}
-        role="progressbar"
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={progressValue}
-        aria-label={ariaLabel}
-        aria-disabled={disabled}
-      >
-        <div className={PROGRESS.CLASSES.BAR}></div>
-      </div>
-    );
+      const progressContent = (
+        <div
+          ref={ref}
+          className={progressClasses + (glass ? ' c-progress--glass' : '')}
+          style={{ ...progressStyle, ...style }}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={progressValue}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+        >
+          <div className={PROGRESS.CLASSES.BAR}></div>
+        </div>
+      );
 
-    if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 30,
-        blurAmount: 0.5,
-        cornerRadius: 8,
-        mode: 'shader' as const,
-      };
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-      return <AtomixGlass {...glassProps}>{progressContent}</AtomixGlass>;
-    }
+      if (glass) {
+        const defaultGlassProps = {
+          displacementScale: 30,
+          blurAmount: 0.5,
+          cornerRadius: 8,
+          mode: 'shader' as const,
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return <AtomixGlass {...glassProps}>{progressContent}</AtomixGlass>;
+      }
 
-    return progressContent;
-  }
+      return progressContent;
+    }
   )
 );
 

package/src/components/Rating/Rating.stories.tsx

@@ -38,7 +38,7 @@ const meta = {
       options: SIZES,
       description: 'The size of the rating stars',
     },
-    color: {
+    variant: {
       control: { type: 'select' },
       options: THEME_COLORS,
       description: 'The color variant of the rating',
@@ -104,14 +104,14 @@ export const Large: Story = {
   },
 };
 
-export const CustomColor: Story = {
+export const CustomVariant: Story = {
   args: {
     value: 4,
     maxValue: 5,
     allowHalf: false,
     readOnly: true,
     size: 'md',
-    color: 'warning',
+    variant: 'warning',
   },
 };
 
@@ -206,7 +206,7 @@ export const GlassCustom: Story = {
     allowHalf: true,
     readOnly: true,
     size: 'lg',
-    color: 'warning',
+    variant: 'warning',
     glass: {
       displacementScale: 80,
       blurAmount: 2,

package/src/components/Rating/Rating.tsx

@@ -13,8 +13,8 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
  * <Rating value={3} onChange={handleRatingChange} />
  *
  * @example
- * // Read-only with custom color
- * <Rating value={4.5} readOnly color="warning" />
+ * // Read-only with custom variant
+ * <Rating value={4.5} readOnly variant="warning" />
  *
  * @example
  * // With half-star support
@@ -29,7 +29,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
       allowHalf = false,
       readOnly = false,
       size = 'md',
-      color,
+      variant,
       onChange,
       className = '',
       style,
@@ -142,7 +142,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
       allowHalf,
       readOnly,
       size,
-      color,
+      variant,
       onChange,
     ]);
 
@@ -156,16 +156,16 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         allowHalf,
         readOnly,
         size,
-        color,
+        variant,
       });
-    }, [useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, color]);
+    }, [useVanillaJS, valueProp, defaultValue, maxValue, allowHalf, readOnly, size, variant]);
 
     // Determine CSS classes
     const ratingClasses = [
       'c-rating',
       size === 'sm' ? RATING.CLASSES.SMALL : '',
       size === 'lg' ? RATING.CLASSES.LARGE : '',
-      color ? `c-rating--${color}` : '',
+      variant ? `c-rating--${variant}` : '',
       className,
     ]
       .filter(Boolean)
@@ -201,7 +201,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
           'c-rating__star',
           isFullStar ? RATING.CLASSES.FULL : '',
           isHalfStar ? RATING.CLASSES.HALF : '',
-          color ? `c-rating__star--${color}` : '',
+          variant ? `c-rating__star--${variant}` : '',
           focusedIndex === i ? 'c-rating__star--focused' : '',
         ]
           .filter(Boolean)