@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/Upload/Upload.tsx

@@ -7,6 +7,11 @@ export interface UploadProps {
    */
   disabled?: boolean;
 
+  /**
+   * Size variant of the upload component
+   */
+  size?: 'sm' | 'md' | 'lg';
+
   /**
    * Maximum file size in MB
    */
@@ -71,6 +76,11 @@ export interface UploadProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Custom style for the upload component
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -83,6 +93,7 @@ type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
  */
 export const Upload: React.FC<UploadProps> = ({
   disabled = false,
+  size = 'md',
   maxSizeInMB = 5,
   acceptedFileTypes = [
     'application/pdf',
@@ -102,6 +113,7 @@ export const Upload: React.FC<UploadProps> = ({
   onFileUploadComplete,
   onFileUploadError,
   className = '',
+  style,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -272,15 +284,42 @@ export const Upload: React.FC<UploadProps> = ({
     setSuccessMessage(null);
   };
 
+  // Build CSS classes
+  const uploadClasses = [
+    'c-upload',
+    size !== 'md' && `c-upload--${size}`,
+    isDragging && UPLOAD.CLASSES.DRAGGING,
+    disabled && UPLOAD.CLASSES.DISABLED,
+    status === 'loading' && 'c-upload--loading',
+    status === 'success' && 'c-upload--success',
+    status === 'error' && 'c-upload--error',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return (
     <div
-      className={`c-upload ${isDragging ? UPLOAD.CLASSES.DRAGGING : ''} ${disabled ? UPLOAD.CLASSES.DISABLED : ''} ${className}`}
+      className={uploadClasses}
+      style={style}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
     >
-      <div className="c-upload__inner">
+      <div
+        className="c-upload__inner"
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-label={`${title}. ${supportedFilesText}. ${helperText}`}
+        aria-disabled={disabled}
+        onKeyDown={e => {
+          if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+            e.preventDefault();
+            handleButtonClick();
+          }
+        }}
+      >
         {/* Hidden file input */}
         <input
           type="file"
@@ -290,62 +329,62 @@ export const Upload: React.FC<UploadProps> = ({
           disabled={disabled}
           accept={acceptedFileTypes.join(',')}
           multiple={multiple}
+          aria-hidden="true"
         />
 
-        {/* Drag and drop area */}
-        <div className="c-upload__inner">
-          <div className="c-upload__icon">{icon}</div>
-          <h3 className="c-upload__title">{title}</h3>
-          <p className="c-upload__text">{supportedFilesText}</p>
-
-          <button
-            type="button"
-            className="c-upload__btn c-btn"
-            onClick={handleButtonClick}
-            disabled={disabled}
-          >
-            {buttonText}
-          </button>
-
-          <p className="c-upload__helper-text">{helperText}</p>
-        </div>
+        {/* Drag and drop area content */}
+        <div className="c-upload__icon">{icon}</div>
+        <h3 className="c-upload__title">{title}</h3>
+        <p className="c-upload__text">{supportedFilesText}</p>
+
+        <button
+          type="button"
+          className="c-upload__btn c-btn"
+          onClick={handleButtonClick}
+          disabled={disabled}
+        >
+          {buttonText}
+        </button>
 
-        {/* Progress and status area */}
-        {status !== 'idle' && (
-          <div
-            className="c-upload__loader"
-            style={{ '--upload-loader-percentage': uploadProgress } as React.CSSProperties}
-          >
-            {currentFile && (
-              <div className="c-upload__loader-status">
-                <h5 className="c-upload__loader-title">{currentFile.name}</h5>
-                <div className="c-upload__loader-progress">
-                  <div className="c-upload__loader-par">{uploadProgress}%</div>
-                  <div className="c-upload__loader-time">{timeLeft}</div>
-                </div>
+        <p className="c-upload__helper-text">{helperText}</p>
+      </div>
+
+      {/* Progress and status area */}
+      {status !== 'idle' && (
+        <div
+          className="c-upload__loader"
+          style={{ '--upload-loader-percentage': uploadProgress } as React.CSSProperties}
+        >
+          {currentFile && (
+            <div className="c-upload__loader-status">
+              <h5 className="c-upload__loader-title">{currentFile.name}</h5>
+              <div className="c-upload__loader-progress">
+                <div className="c-upload__loader-par">{uploadProgress}%</div>
+                <div className="c-upload__loader-time">{timeLeft}</div>
               </div>
-            )}
-
-            {(status === 'loading' || status === 'error' || status === 'success') && (
-              <div className="c-upload__loader-control">
-                <div className="c-upload__loader-bar">
-                  <svg>
-                    <circle cx="10" cy="10" r="10"></circle>
-                    <circle cx="10" cy="10" r="10"></circle>
-                  </svg>
-                </div>
-                <button
-                  type="button"
-                  className="c-upload__loader-close c-btn"
-                  onClick={resetUpload}
-                >
-                  <i className="icon-lux-x"></i>
-                </button>
+            </div>
+          )}
+
+          {(status === 'loading' || status === 'error' || status === 'success') && (
+            <div className="c-upload__loader-control">
+              <div className="c-upload__loader-bar">
+                <svg>
+                  <circle cx="10" cy="10" r="10"></circle>
+                  <circle cx="10" cy="10" r="10"></circle>
+                </svg>
               </div>
-            )}
-          </div>
-        )}
-      </div>
+              <button
+                type="button"
+                className="c-upload__loader-close"
+                onClick={resetUpload}
+                aria-label="Close upload progress"
+              >
+                <i className="icon-lux-x"></i>
+              </button>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -55,6 +55,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       glass = false,
       glassOpacity = 1,
       glassContent,
+      style,
       ...props
     },
     ref
@@ -170,7 +171,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
         const video = videoRef.current;
         if (video) {
           const tracks = video.textTracks;
-          console.log('Setting subtitle:', subtitleLang, 'Available tracks:', tracks.length);
+          console.log('Setting subtitle:', subtitleLang ? 'enabled' : 'disabled', 'Available tracks:', tracks.length);
 
           // Hide all tracks first
           for (let i = 0; i < tracks.length; i++) {
@@ -380,6 +381,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
           width,
           height,
           aspectRatio: aspectRatio ? aspectRatio.replace(':', '/') : undefined,
+          ...style,
         }}
         tabIndex={0}
         onClick={handleContainerClick}

package/src/components/index.ts

@@ -11,7 +11,6 @@ export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Callout, type CalloutProps } from './Callout/Callout';
 export { default as Card, type CardProps } from './Card/Card';
 export {
-  AdvancedChart,
   AnimatedChart,
   AreaChart,
   BarChart,
@@ -27,11 +26,9 @@ export {
   MultiAxisChart,
   PieChart,
   RadarChart,
-  RealTimeChart,
   ScatterChart,
   TreemapChart,
   WaterfallChart,
-  type AdvancedChartProps,
   type AnimatedChartProps,
   type AreaChartProps,
   type BarChartProps,
@@ -50,7 +47,6 @@ export {
   type MultiAxisChartProps,
   type PieChartProps,
   type RadarChartProps,
-  type RealTimeChartProps,
   type ScatterChartProps,
   type ScatterDataPoint,
   type TreemapChartProps,

package/src/layouts/Grid/Grid.stories.tsx

@@ -59,10 +59,7 @@ const DemoCard: React.FC<{
         variant === 'secondary' ? 'u-bg-success-subtle' : ''
       } ${variant === 'accent' ? 'u-bg-info-subtle' : ''}`}
     >
-      <div 
-        className="u-d-flex u-flex-column u-h-100"
-        style={{ minHeight: heightStyles[height] }}
-      >
+      <div className="u-d-flex u-flex-column u-h-100" style={{ minHeight: heightStyles[height] }}>
         <div className="u-flex-grow-1 u-d-flex u-align-items-center u-justify-content-center">
           <div className="u-text-center">{children}</div>
         </div>
@@ -170,7 +167,9 @@ export const GettingStarted: Story = {
 export const LayoutPatterns: Story = {
   render: () => (
     <div className="u-mb-8">
-      <h1 className="u-mb-6 u-text-brand-emphasis u-border-bottom u-pb-2">Common Layout Patterns</h1>
+      <h1 className="u-mb-6 u-text-brand-emphasis u-border-bottom u-pb-2">
+        Common Layout Patterns
+      </h1>
 
       {/* Sidebar Layout */}
       <div className="u-mb-8">
@@ -243,9 +242,7 @@ export const LayoutPatterns: Story = {
       {/* Article Layout */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Article Layout</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Centered content with optional sidebar:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Centered content with optional sidebar:</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={12} md={8} offsetMd={2}>
@@ -275,9 +272,7 @@ export const ColumnSizing: Story = {
       {/* Fixed Sizes */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Fixed Column Sizes</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Specify exact column widths (1-12):
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Specify exact column widths (1-12):</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={2}>
@@ -384,9 +379,7 @@ export const ColumnOffsets: Story = {
       {/* Basic Offsets */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Basic Offsets</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Push columns to the right using offsets:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Push columns to the right using offsets:</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={4}>
@@ -410,9 +403,7 @@ export const ColumnOffsets: Story = {
       {/* Centering */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">Centering Content</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Center columns using equal offsets:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Center columns using equal offsets:</p>
 
         <Grid className="u-mb-4">
           <GridCol xs={6} offsetXs={3}>
@@ -484,9 +475,7 @@ export const Containers: Story = {
         <Container type="fluid" className="u-mb-4">
           <DemoCard variant="secondary" height="md">
             <div className="u-fs-lg u-fw-bold">Fluid Container</div>
-            <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">
-              Full viewport width
-            </div>
+            <div className="u-fs-sm u-text-secondary-emphasis u-mt-2">Full viewport width</div>
           </DemoCard>
         </Container>
       </div>
@@ -678,9 +667,7 @@ export const AlignmentAndSpacing: Story = {
       {/* No Gutters */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">No Gutters</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">
-          Remove spacing between columns:
-        </p>
+        <p className="u-mb-4 u-text-secondary-emphasis">Remove spacing between columns:</p>
 
         <div className="u-mb-6">
           <h3 className="u-mb-3 u-text-secondary-emphasis u-fw-medium">With gutters (default)</h3>

package/src/layouts/Grid/Grid.tsx

@@ -21,6 +21,14 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    * No gutters between columns
    */
   noGutters?: boolean;
+  /**
+   * Flex direction
+   */
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /**
+   * Wrap behavior
+   */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
 }
 
 /**
@@ -37,7 +45,10 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const Grid = forwardRef<HTMLDivElement, GridProps>(
-  ({ children, className = '', justifyContent, alignItems, noGutters, ...props }, ref) => {
+  (
+    { children, className = '', justifyContent, alignItems, noGutters, direction, wrap, ...props },
+    ref
+  ) => {
     const classes = ['o-grid'];
 
     if (justifyContent) {
@@ -52,6 +63,14 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       classes.push('o-grid--no-gutters');
     }
 
+    if (direction) {
+      classes.push(`u-flex-direction-${direction}`);
+    }
+
+    if (wrap) {
+      classes.push(`u-flex-wrap-${wrap}`);
+    }
+
     if (className) {
       classes.push(className);
     }

package/src/layouts/Grid/GridCol.tsx

@@ -12,27 +12,27 @@ export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Number of columns to span at extra small breakpoint (default)
    */
-  xs?: number | 'auto';
+  xs?: number | 'auto' | boolean;
   /**
    * Number of columns to span at small breakpoint
    */
-  sm?: number | 'auto';
+  sm?: number | 'auto' | boolean;
   /**
    * Number of columns to span at medium breakpoint
    */
-  md?: number | 'auto';
+  md?: number | 'auto' | boolean;
   /**
    * Number of columns to span at large breakpoint
    */
-  lg?: number | 'auto';
+  lg?: number | 'auto' | boolean;
   /**
    * Number of columns to span at extra large breakpoint
    */
-  xl?: number | 'auto';
+  xl?: number | 'auto' | boolean;
   /**
    * Number of columns to span at extra extra large breakpoint
    */
-  xxl?: number | 'auto';
+  xxl?: number | 'auto' | boolean;
   /**
    * Offset at extra small breakpoint
    */
@@ -57,6 +57,22 @@ export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
    * Offset at extra extra large breakpoint
    */
   offsetXxl?: number;
+  /**
+   * Flex grow property
+   */
+  grow?: boolean;
+  /**
+   * Flex shrink property
+   */
+  shrink?: boolean;
+  /**
+   * Flex basis property
+   */
+  basis?: string;
+  /**
+   * Alignment of the column
+   */
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 }
 
 /**
@@ -80,6 +96,10 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
       offsetLg,
       offsetXl,
       offsetXxl,
+      grow,
+      shrink,
+      basis,
+      align,
       ...props
     },
     ref
@@ -88,56 +108,47 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
     const isDefaultAuto = !xs && !sm && !md && !lg && !xl && !xxl;
     const classes = isDefaultAuto ? ['o-grid__col', 'o-grid__col--auto'] : ['o-grid__col'];
 
-    // Add column size classes based on the exact SCSS pattern
-    // For xs (default breakpoint), the infix is empty
-    if (xs) {
-      if (xs === 'auto') {
-        classes.push('o-grid__col--auto');
-      } else {
-        classes.push(`o-grid__col--${xs}`);
-      }
-    }
+    // Helper function to process responsive props
+    const processResponsiveProp = (
+      value: number | 'auto' | boolean | undefined,
+      breakpoint: string
+    ) => {
+      if (value === undefined) return;
 
-    // For other breakpoints, the infix includes the dash
-    if (sm) {
-      if (sm === 'auto') {
-        classes.push('o-grid__col--sm-auto');
-      } else {
-        classes.push(`o-grid__col--sm-${sm}`);
+      // Handle boolean values
+      if (value === true) {
+        classes.push(breakpoint === 'xs' ? 'o-grid__col--auto' : `o-grid__col--${breakpoint}-auto`);
+        return;
       }
-    }
 
-    if (md) {
-      if (md === 'auto') {
-        classes.push('o-grid__col--md-auto');
-      } else {
-        classes.push(`o-grid__col--md-${md}`);
+      if (value === false) {
+        // False means don't apply any class for this breakpoint
+        return;
       }
-    }
 
-    if (lg) {
-      if (lg === 'auto') {
-        classes.push('o-grid__col--lg-auto');
+      // Handle string/number values
+      if (breakpoint === 'xs') {
+        if (value === 'auto') {
+          classes.push('o-grid__col--auto');
+        } else {
+          classes.push(`o-grid__col--${value}`);
+        }
       } else {
-        classes.push(`o-grid__col--lg-${lg}`);
+        if (value === 'auto') {
+          classes.push(`o-grid__col--${breakpoint}-auto`);
+        } else {
+          classes.push(`o-grid__col--${breakpoint}-${value}`);
+        }
       }
-    }
+    };
 
-    if (xl) {
-      if (xl === 'auto') {
-        classes.push('o-grid__col--xl-auto');
-      } else {
-        classes.push(`o-grid__col--xl-${xl}`);
-      }
-    }
-
-    if (xxl) {
-      if (xxl === 'auto') {
-        classes.push('o-grid__col--xxl-auto');
-      } else {
-        classes.push(`o-grid__col--xxl-${xxl}`);
-      }
-    }
+    // Add column size classes based on the exact SCSS pattern
+    processResponsiveProp(xs, 'xs');
+    processResponsiveProp(sm, 'sm');
+    processResponsiveProp(md, 'md');
+    processResponsiveProp(lg, 'lg');
+    processResponsiveProp(xl, 'xl');
+    processResponsiveProp(xxl, 'xxl');
 
     // Add offset classes based on the exact SCSS pattern
     if (offsetXs) classes.push(`o-grid__offset--${offsetXs}`);
@@ -147,6 +158,23 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
     if (offsetXl) classes.push(`o-grid__offset--xl-${offsetXl}`);
     if (offsetXxl) classes.push(`o-grid__offset--xxl-${offsetXxl}`);
 
+    // Add flex properties
+    if (grow !== undefined) {
+      classes.push(grow ? 'u-flex-grow-1' : 'u-flex-grow-0');
+    }
+
+    if (shrink !== undefined) {
+      classes.push(shrink ? 'u-flex-shrink-1' : 'u-flex-shrink-0');
+    }
+
+    if (basis) {
+      classes.push(`u-flex-basis-${basis}`);
+    }
+
+    if (align) {
+      classes.push(`u-align-self-${align}`);
+    }
+
     if (className) classes.push(className);
 
     return (