@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Tooltip/Tooltip.tsx

@@ -37,6 +37,11 @@ export interface TooltipProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Delay before showing the tooltip (in milliseconds)
    */
@@ -60,6 +65,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   position = TOOLTIP.DEFAULTS.POSITION,
   trigger = TOOLTIP.DEFAULTS.TRIGGER,
   className = '',
+  style,
   delay = TOOLTIP.DEFAULTS.DELAY,
   offset = TOOLTIP.DEFAULTS.OFFSET,
   glass,
@@ -129,7 +135,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   }
 
   return (
-    <div className="u-position-relative u-d-inline-block">
+    <div className="u-position-relative u-d-inline-block" style={style}>
       <div
         className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
         {...triggerProps}
@@ -154,7 +160,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
                 mode: 'shader' as const,
               };
 
-              const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+              const glassProps =
+                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
               return (
                 <AtomixGlass {...glassProps}>

package/src/components/Upload/Upload.stories.tsx

@@ -5,26 +5,55 @@ import { Upload } from './Upload';
 export default {
   title: 'Components/Upload',
   component: Upload,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A modern file upload component with drag & drop functionality, progress tracking, and multiple size variants.',
+      },
+    },
+  },
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+      description: 'Size variant of the upload component',
+    },
     disabled: {
       control: { type: 'boolean' },
       defaultValue: false,
+      description: 'Whether the upload component is disabled',
     },
     maxSizeInMB: {
       control: { type: 'number' },
       defaultValue: 5,
+      description: 'Maximum file size in MB',
     },
     multiple: {
       control: { type: 'boolean' },
       defaultValue: false,
+      description: 'Whether multiple files can be selected',
     },
     title: {
       control: { type: 'text' },
       defaultValue: 'Drag and Drop files here',
+      description: 'Text for the drag and drop section',
+    },
+    supportedFilesText: {
+      control: { type: 'text' },
+      defaultValue: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+      description: 'Text describing supported file types',
     },
     buttonText: {
       control: { type: 'text' },
       defaultValue: 'Choose File',
+      description: 'Text for the upload button',
+    },
+    helperText: {
+      control: { type: 'text' },
+      defaultValue: 'Maximum size: 5MB',
+      description: 'Helper text displayed below the button',
     },
   },
 } as Meta<typeof Upload>;
@@ -38,11 +67,72 @@ const Template: StoryFn<typeof Upload> = args => (
 // Default upload component
 export const Default = Template.bind({});
 Default.args = {
+  size: 'md',
   title: 'Drag and Drop files here',
   supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
   buttonText: 'Choose File',
   helperText: 'Maximum size: 5MB',
 };
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'The default upload component with medium size and standard styling.',
+    },
+  },
+};
+
+// Size Variants
+export const SizeVariants: StoryFn<typeof Upload> = () => (
+  <div style={{ padding: '30px' }}>
+    <div style={{ marginBottom: '40px' }}>
+      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
+      <div style={{ maxWidth: '400px' }}>
+        <Upload
+          size="sm"
+          title="Small Upload Area"
+          supportedFilesText="PDF, JPEG, PNG"
+          buttonText="Choose File"
+          helperText="Max: 2MB"
+        />
+      </div>
+    </div>
+
+    <div style={{ marginBottom: '40px' }}>
+      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>
+        Medium Size (Default)
+      </h3>
+      <div style={{ maxWidth: '500px' }}>
+        <Upload
+          size="md"
+          title="Drag and Drop files here"
+          supportedFilesText="Files supported: PDF, XSLS, JPEG, PNG, Scanner"
+          buttonText="Choose File"
+          helperText="Maximum size: 5MB"
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Large Size</h3>
+      <div style={{ maxWidth: '700px' }}>
+        <Upload
+          size="lg"
+          title="Drop your files here for upload"
+          supportedFilesText="Supported formats: PDF, Excel, Word, Images, and more"
+          buttonText="Browse Files"
+          helperText="Maximum file size: 10MB per file"
+        />
+      </div>
+    </div>
+  </div>
+);
+SizeVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+    },
+  },
+};
 
 // Disabled state
 export const Disabled = Template.bind({});
@@ -50,6 +140,13 @@ Disabled.args = {
   ...Default.args,
   disabled: true,
 };
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component in disabled state with reduced opacity and no interactions.',
+    },
+  },
+};
 
 // Manual state controls
 const WithStateControls: React.FC = () => {
@@ -203,12 +300,29 @@ const WithStateControls: React.FC = () => {
 };
 
 export const WithControls: StoryFn<typeof Upload> = () => <WithStateControls />;
+WithControls.parameters = {
+  docs: {
+    description: {
+      story:
+        'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+    },
+  },
+};
 
 // Custom Icon
 export const CustomIcon = Template.bind({});
 CustomIcon.args = {
   ...Default.args,
   icon: <i className="icon-lux-upload-cloud"></i>,
+  title: 'Upload your documents',
+  supportedFilesText: 'Drag files here or click to browse',
+};
+CustomIcon.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component with a custom icon and personalized text content.',
+    },
+  },
 };
 
 // Multiple file upload
@@ -217,4 +331,142 @@ MultipleFiles.args = {
   ...Default.args,
   multiple: true,
   buttonText: 'Choose Files',
+  title: 'Upload multiple files',
+  supportedFilesText: 'Select multiple files at once',
+  helperText: 'Maximum size: 5MB per file',
+};
+MultipleFiles.parameters = {
+  docs: {
+    description: {
+      story: 'Upload component configured to accept multiple files at once.',
+    },
+  },
+};
+
+// Drag and Drop Demo
+export const DragDropDemo: StoryFn<typeof Upload> = () => {
+  const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
+  const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
+
+  const handleFileSelect = (files: File[]) => {
+    const fileNames = files.map(file => file.name);
+    setUploadedFiles(prev => [...prev, ...fileNames]);
+  };
+
+  return (
+    <div style={{ padding: '30px' }}>
+      <div style={{ marginBottom: '20px' }}>
+        <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '10px' }}>
+          Interactive Drag & Drop Demo
+        </h3>
+        <p style={{ color: '#666', fontSize: '14px', marginBottom: '20px' }}>
+          Try dragging files over the upload area to see the hover effects, or click to select
+          files.
+        </p>
+      </div>
+
+      <div style={{ maxWidth: '600px', marginBottom: '20px' }}>
+        <Upload
+          title="Drag files here to see the magic ✨"
+          supportedFilesText="PDF, Images, Documents - All welcome!"
+          buttonText="Or click to browse"
+          helperText="Watch the upload area respond to your interactions"
+          onFileSelect={handleFileSelect}
+          multiple={true}
+        />
+      </div>
+
+      {uploadedFiles.length > 0 && (
+        <div
+          style={{
+            padding: '16px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            border: '1px solid #e9ecef',
+          }}
+        >
+          <h4
+            style={{ fontSize: '14px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}
+          >
+            Selected Files:
+          </h4>
+          <ul style={{ margin: 0, paddingLeft: '20px' }}>
+            {uploadedFiles.map((fileName, index) => (
+              <li key={index} style={{ fontSize: '14px', color: '#6c757d', marginBottom: '4px' }}>
+                {fileName}
+              </li>
+            ))}
+          </ul>
+          <button
+            onClick={() => setUploadedFiles([])}
+            style={{
+              marginTop: '12px',
+              padding: '6px 12px',
+              fontSize: '12px',
+              backgroundColor: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Clear List
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+DragDropDemo.parameters = {
+  docs: {
+    description: {
+      story:
+        'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+    },
+  },
+};
+
+// Different File Types
+export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
+  <div style={{ padding: '30px' }}>
+    <div style={{ marginBottom: '40px' }}>
+      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
+      <div style={{ maxWidth: '500px' }}>
+        <Upload
+          title="Upload Images"
+          supportedFilesText="JPEG, PNG, GIF, WebP"
+          buttonText="Choose Images"
+          helperText="Maximum size: 10MB"
+          acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif', 'image/webp']}
+          multiple={true}
+        />
+      </div>
+    </div>
+
+    <div style={{ marginBottom: '40px' }}>
+      <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Documents Only</h3>
+      <div style={{ maxWidth: '500px' }}>
+        <Upload
+          title="Upload Documents"
+          supportedFilesText="PDF, Word, Excel, PowerPoint"
+          buttonText="Choose Documents"
+          helperText="Maximum size: 25MB"
+          acceptedFileTypes={[
+            'application/pdf',
+            'application/msword',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          ]}
+        />
+      </div>
+    </div>
+  </div>
+);
+FileTypeRestrictions.parameters = {
+  docs: {
+    description: {
+      story: 'Upload components configured for specific file types with appropriate messaging.',
+    },
+  },
 };

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,