@shohojdhara/atomix 0.2.4 → 0.2.6

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

@@ -201,13 +201,13 @@ export const Glass = {
     size: 'md',
     glass: true,
   },
-  render: (args) => {
+  render: (args: any) => {
     const [currentPage, setCurrentPage] = React.useState(args.currentPage);
     const handlePageChange = (page: number) => {
       setCurrentPage(page);
       args.onPageChange?.(page);
     };
-    
+
     return (
       <div
         style={{
@@ -249,17 +249,18 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => {
+  render: (args: any) => {
     const [currentPage, setCurrentPage] = React.useState(args.currentPage);
     const handlePageChange = (page: number) => {
       setCurrentPage(page);
       args.onPageChange?.(page);
     };
-    
+
     return (
       <div
         style={{
-          background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+          background:
+            'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           padding: '2rem',
@@ -271,7 +272,13 @@ export const GlassCustom = {
         }}
       >
         <div style={{ textAlign: 'center' }}>
-          <h3 style={{ color: 'white', marginBottom: '2rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          <h3
+            style={{
+              color: 'white',
+              marginBottom: '2rem',
+              textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+            }}
+          >
             Custom Glass Pagination
           </h3>
           <Pagination {...args} currentPage={currentPage} onPageChange={handlePageChange} />

package/src/components/Pagination/Pagination.tsx

@@ -61,6 +61,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons,
   size = PAGINATION_DEFAULTS.size,
   className = '',
+  style,
   ariaLabel = 'Pagination',
   glass,
 }) => {
@@ -77,7 +78,11 @@ export const Pagination: React.FC<PaginationProps> = ({
   }
 
   const paginationContent = (
-    <nav className={`c-pagination c-pagination--${size} ${className}`} aria-label={ariaLabel}>
+    <nav
+      className={`c-pagination c-pagination--${size} ${className}`}
+      style={style}
+      aria-label={ariaLabel}
+    >
       <ul className="c-pagination__items">
         {showFirstLastButtons && (
           <PaginationNavButton
@@ -169,11 +174,7 @@ export const Pagination: React.FC<PaginationProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {paginationContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{paginationContent}</AtomixGlass>;
   }
 
   return paginationContent;

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -111,7 +111,8 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
 
     const link = document.createElement('a');
     link.href = currentImage.src;
-    link.download = currentImage.title || `image-${currentIndex + 1}`;
+    const sanitizedTitle = (currentImage.title || `image-${currentIndex + 1}`).replace(/[^a-zA-Z0-9.-]/g, '_');
+    link.download = sanitizedTitle;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);

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

@@ -155,12 +155,14 @@ GlassPopover.args = {
   glass: true,
 };
 GlassPopover.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -182,12 +184,14 @@ GlassPopoverCustom.args = {
   },
 };
 GlassPopoverCustom.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -204,12 +208,14 @@ GlassPopoverHover.args = {
   glass: true,
 };
 GlassPopoverHover.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -225,12 +231,14 @@ GlassPopoverPositions.args = {
   defaultOpen: true,
 };
 GlassPopoverPositions.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),

package/src/components/Popover/Popover.tsx

@@ -28,6 +28,7 @@ export const Popover: React.FC<PopoverProps> = ({
   position = 'top',
   trigger = 'click',
   className = '',
+  style,
   delay = 0,
   offset = 12,
   defaultOpen = false,
@@ -72,6 +73,7 @@ export const Popover: React.FC<PopoverProps> = ({
           <div
             ref={popoverRef}
             className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${glass ? 'c-popover--glass' : ''} ${className}`}
+            style={style}
             id={popoverId}
             role="tooltip"
             aria-hidden={!isOpen}
@@ -88,7 +90,8 @@ export const Popover: React.FC<PopoverProps> = ({
                   mode: 'shader' as const,
                 };
 
-                const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+                const glassProps =
+                  glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
                 return (
                   <AtomixGlass {...glassProps}>

package/src/components/ProductReview/ProductReview.tsx

@@ -43,6 +43,11 @@ export interface ProductReviewProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -57,6 +62,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
   ratingColor = 'warning' as ThemeColor,
   onSubmit,
   className = '',
+  style,
 }) => {
   const [rating, setRating] = useState<number>(initialRating);
   const [comment, setComment] = useState<string>('');
@@ -90,7 +96,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
 
   if (submitted) {
     return (
-      <div className={containerClasses} ref={reviewRef}>
+      <div className={containerClasses} ref={reviewRef} style={style}>
         <div className="c-product-review__success">
           <h3>Thank you for your review!</h3>
           <p>Your feedback helps us improve our products.</p>
@@ -109,7 +115,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
   }
 
   return (
-    <div className={containerClasses} ref={reviewRef}>
+    <div className={containerClasses} ref={reviewRef} style={style}>
       <div className="c-product-review__header">
         <h3 className="c-product-review__title">Review {productName}</h3>
         {productImage && (

package/src/components/Progress/Progress.tsx

@@ -11,6 +11,7 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
       variant = 'primary',
       size = 'md',
       className = '',
+      style,
       disabled = false,
       ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
       glass,
@@ -28,7 +29,7 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
       <div
         ref={ref}
         className={progressClasses + (glass ? ' c-progress--glass' : '')}
-        style={progressStyle}
+        style={{ ...progressStyle, ...style }}
         role="progressbar"
         aria-valuemin={0}
         aria-valuemax={100}

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

@@ -121,7 +121,7 @@ export const Glass = {
     size: 'md',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -147,10 +147,11 @@ export const GlassInteractive = {
     size: 'md',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '3rem',
@@ -162,7 +163,9 @@ export const GlassInteractive = {
       }}
     >
       <div style={{ textAlign: 'center' }}>
-        <h3 style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}
+        >
           Interactive Glass Rating
         </h3>
         <Rating {...args} />
@@ -187,7 +190,7 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
@@ -211,7 +214,9 @@ export const GlassCustom = {
         `}
       </style>
       <div style={{ textAlign: 'center' }}>
-        <h3 style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}
+        >
           Custom Glass Rating
         </h3>
         <Rating {...args} />

package/src/components/Rating/Rating.tsx

@@ -32,6 +32,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
       color,
       onChange,
       className = '',
+      style,
       label,
       id,
       useVanillaJS = false,
@@ -269,6 +270,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         className={ratingClasses}
         ref={useForkRef(internalRef, ref)}
         id={id}
+        style={style}
         data-readonly={readOnly ? 'true' : 'false'}
         onMouseLeave={handleMouseLeave}
         role={readOnly ? 'img' : 'radiogroup'}
@@ -292,11 +294,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return (
-        <AtomixGlass {...glassProps}>
-          {ratingContent}
-        </AtomixGlass>
-      );
+      return <AtomixGlass {...glassProps}>{ratingContent}</AtomixGlass>;
     }
 
     return ratingContent;

package/src/components/River/River.tsx

@@ -19,6 +19,7 @@ export const River: React.FC<RiverProps> = ({
   showOverlay = true,
   contentWidth,
   className = '',
+  style,
 }) => {
   const {
     generateRiverClassNames,
@@ -41,11 +42,10 @@ export const River: React.FC<RiverProps> = ({
   });
 
   // Create custom style for river element with content width if provided
-  const riverStyle: React.CSSProperties | undefined = contentWidth
-    ? ({
-        [RIVER.ATTRIBUTES.CONTENT_WIDTH]: contentWidth,
-      } as React.CSSProperties)
-    : undefined;
+  const riverStyle: React.CSSProperties | undefined = {
+    ...(contentWidth ? { [RIVER.ATTRIBUTES.CONTENT_WIDTH]: contentWidth } : {}),
+    ...style,
+  };
 
   const renderBackground = () => {
     if (!hasBackgroundImage) return null;

package/src/components/SectionIntro/SectionIntro.tsx

@@ -67,6 +67,11 @@ export interface SectionIntroProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Custom style for the section intro
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -85,6 +90,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
   size = 'md',
   skeleton = false,
   className = '',
+  style,
 }) => {
   const sectionIntroRef = useRef<HTMLDivElement>(null);
   const sectionIntroInstance = useRef<any>(null);
@@ -116,7 +122,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
   // Render skeleton version
   if (skeleton) {
     return (
-      <div className={sectionIntroClasses} ref={sectionIntroRef}>
+      <div className={sectionIntroClasses} ref={sectionIntroRef} style={style}>
         <div className="c-sectionintro__container">
           {label && (
             <div className="c-sectionintro__label">
@@ -162,7 +168,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
 
   // Render normal version
   return (
-    <div className={sectionIntroClasses} ref={sectionIntroRef}>
+    <div className={sectionIntroClasses} ref={sectionIntroRef} style={style}>
       {renderBackground()}
       {label && <div className="c-sectionintro__label">{label}</div>}
       <h2 className="c-sectionintro__title">{title}</h2>

package/src/components/Slider/Slider.stories.tsx

@@ -799,10 +799,10 @@ export const Autoplay: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Slider with automatic playback that cycles through slides every 3 seconds.'
-      }
-    }
-  }
+        story: 'Slider with automatic playback that cycles through slides every 3 seconds.',
+      },
+    },
+  },
 };
 
 export const Vertical: Story = {

package/src/components/Slider/Slider.tsx

@@ -20,13 +20,14 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     navigation,
     pagination,
     className,
+    style,
     onSlideChange,
     ...rest
   } = props;
 
   if (!slides || slides.length === 0) {
     return (
-      <div className="c-slider c-slider--empty" style={{ height, width }}>
+      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
         <div className="c-slider__empty-message">No slides available</div>
       </div>
     );
@@ -92,7 +93,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
         overflow: 'hidden',
         position: 'relative',
         cursor: grabCursor && !touching ? 'grab' : touching ? 'grabbing' : 'default',
-        ...(rest as any).style,
+        ...style,
       }}
       onTouchStart={handleTouchStart}
       onTouchMove={handleTouchMove}
@@ -224,4 +225,4 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
   );
 });
 
-Slider.displayName = 'Slider';
+Slider.displayName = 'Slider';

package/src/components/Spinner/Spinner.tsx

@@ -9,6 +9,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
   variant = 'primary',
   fullscreen = false,
   className = '',
+  style,
   glass,
 }) => {
   const { generateSpinnerClass } = useSpinner({
@@ -25,7 +26,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
   });
 
   const spinnerContent = (
-    <div className={spinnerClass} role="status">
+    <div className={spinnerClass} style={style} role="status">
       <span className={SPINNER.VISUALLY_HIDDEN}>Loading...</span>
     </div>
   );

package/src/components/Steps/Steps.stories.tsx

@@ -174,7 +174,7 @@ export const Glass = {
     vertical: false,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -206,10 +206,11 @@ export const GlassVertical = {
     vertical: true,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',
@@ -246,7 +247,7 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',

package/src/components/Steps/Steps.tsx

@@ -46,6 +46,11 @@ export interface StepsProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Glass morphism effect for the steps component
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -62,6 +67,7 @@ export const Steps: React.FC<StepsProps> = ({
   vertical = false,
   onStepChange,
   className = '',
+  style,
   glass,
 }) => {
   const [currentStep, setCurrentStep] = useState(activeIndex);
@@ -98,6 +104,7 @@ export const Steps: React.FC<StepsProps> = ({
   const stepsContent = (
     <div
       className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
+      style={style}
       role="navigation"
       aria-label="Steps"
     >
@@ -131,11 +138,7 @@ export const Steps: React.FC<StepsProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {stepsContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{stepsContent}</AtomixGlass>;
   }
 
   return stepsContent;

package/src/components/Tab/Tab.stories.tsx

@@ -151,7 +151,7 @@ export const Glass = {
     activeIndex: 0,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -195,10 +195,11 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1519904981063-b0cf448d479e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1519904981063-b0cf448d479e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',

package/src/components/Tab/Tab.tsx

@@ -46,6 +46,11 @@ export interface TabProps {
    */
   className?: string;
 
+  /**
+   * Custom style for the tab component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Glass morphism effect for the tab component
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -61,6 +66,7 @@ export const Tab: React.FC<TabProps> = ({
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
   className = '',
+  style,
   glass,
 }) => {
   const [currentTab, setCurrentTab] = useState(activeIndex);
@@ -74,7 +80,7 @@ export const Tab: React.FC<TabProps> = ({
   };
 
   const tabContent = (
-    <div className={`c-tabs js-atomix-tab ${className}`}>
+    <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
       <ul className="c-tabs__nav">
         {items.map((item, index) => (
           <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
@@ -127,11 +133,7 @@ export const Tab: React.FC<TabProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {tabContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
   }
 
   return tabContent;

package/src/components/Testimonial/Testimonial.tsx

@@ -48,6 +48,11 @@ export interface TestimonialProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Custom style for the testimonial
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -59,6 +64,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
   size = '',
   skeleton = false,
   className = '',
+  style,
 }) => {
   const testimonialRef = useRef<HTMLDivElement>(null);
   const testimonialInstance = useRef<any>(null);
@@ -88,7 +94,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
   // Render skeleton version
   if (skeleton) {
     return (
-      <div className={testimonialClasses} ref={testimonialRef}>
+      <div className={testimonialClasses} ref={testimonialRef} style={style}>
         <blockquote className="c-testimonial__quote">
           <span className="c-skeleton"></span>
           <span className="c-skeleton"></span>
@@ -112,7 +118,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
 
   // Render normal version
   return (
-    <div className={testimonialClasses} ref={testimonialRef}>
+    <div className={testimonialClasses} ref={testimonialRef} style={style}>
       <blockquote className="c-testimonial__quote">{quote}</blockquote>
       {author && (
         <div className="c-testimonial__author">

package/src/components/Todo/Todo.tsx

@@ -15,6 +15,7 @@ export const Todo: React.FC<TodoProps> = ({
   placeholder = 'Add a new todo',
   showCompleted = true,
   className = '',
+  style,
   disabled = false,
 }) => {
   const { inputText, setInputText, addTodo, generateTodoClasses, generateItemClasses } = useTodo({
@@ -89,7 +90,7 @@ export const Todo: React.FC<TodoProps> = ({
   const todoClass = generateTodoClasses({ size, className, disabled });
 
   return (
-    <div className={todoClass}>
+    <div className={todoClass} style={style}>
       {title && <h2 className="c-todo__title">{title}</h2>}
 
       <form className="c-todo__form" onSubmit={handleFormSubmit}>