@shohojdhara/atomix 0.3.12 → 0.3.14

package/src/components/Callout/Callout.stories.tsx

@@ -48,15 +48,15 @@ const meta = {
         type: { summary: 'ReactNode' },
       },
     },
-    oneLine: {
+    compact: {
       control: 'boolean',
-      description: 'Display the callout in one line',
+      description: 'Display the callout in compact mode',
       table: {
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' },
       },
     },
-    toast: {
+    isToast: {
       control: 'boolean',
       description: 'Display the callout as a toast notification',
       table: {
@@ -250,18 +250,18 @@ export const Dismissible: Story = {
   },
 };
 
-export const OneLine: Story = {
+export const Compact: Story = {
   args: {
     title: 'Quick notification',
     variant: 'info',
     icon: <InfoIcon />,
-    oneLine: true,
+    compact: true,
   },
   parameters: {
     docs: {
       description: {
         story:
-          'One-line callouts are more compact and display the title and icon in a single line.',
+          'Compact callouts are more space-efficient and display the title and icon in a single line.',
       },
     },
   },
@@ -273,7 +273,7 @@ export const Toast: Story = {
     children: 'This callout is styled as a toast notification.',
     variant: 'success',
     icon: <SuccessIcon />,
-    toast: true,
+    isToast: true,
     onClose: () => console.log('Toast closed'),
   },
   parameters: {
@@ -487,7 +487,7 @@ const ToastDemoTemplate = () => {
                 title={getTitle(toast.variant)}
                 variant={toast.variant as any}
                 icon={getIcon(toast.variant)}
-                toast={true}
+                isToast={true}
                 onClose={() => removeToast(toast.id)}
               >
                 {getMessage(toast.variant)}
@@ -958,7 +958,7 @@ export const GlassToast: Story = {
       'This glass toast notification combines the elegance of glass morphism with toast functionality.',
     variant: 'success',
     icon: <SuccessIcon />,
-    toast: true,
+    isToast: true,
     glass: true,
     onClose: () => console.log('Glass toast closed'),
   },
@@ -993,7 +993,7 @@ export const GlassOneLine: Story = {
     title: 'Glass one-line notification',
     variant: 'info',
     icon: <InfoIcon />,
-    oneLine: true,
+    compact: true,
     glass: true,
   },
   parameters: {
@@ -1325,7 +1325,7 @@ const GlassToastDemoTemplate = () => {
                 title={getTitle(toast.variant)}
                 variant={toast.variant as any}
                 icon={getIcon(toast.variant)}
-                toast={true}
+                isToast={true}
                 glass
                 onClose={() => removeToast(toast.id)}
               >

package/src/components/Callout/Callout.test.tsx

@@ -46,19 +46,19 @@ describe('Callout Component', () => {
       expect(container.firstChild).toHaveClass('c-callout--success');
     });
 
-    it('applies oneLine class when enabled', () => {
+    it('applies compact class when enabled', () => {
       const { container } = render(
-        <Callout title="Test" variant="primary" oneLine>
+        <Callout title="Test" variant="primary" compact>
           Content
         </Callout>
       );
 
-      expect(container.firstChild).toHaveClass('c-callout--oneline');
+      expect(container.firstChild).toHaveClass('c-callout--compact');
     });
 
     it('applies toast class when enabled', () => {
       const { container } = render(
-        <Callout title="Test" variant="primary" toast>
+        <Callout title="Test" variant="primary" isToast>
           Content
         </Callout>
       );
@@ -198,8 +198,8 @@ describe('Callout Component', () => {
           glass={true}
           onClose={handleClose}
           actions={actions}
-          oneLine
-          toast
+          compact
+          isToast
         >
           Glass content
         </Callout>
@@ -222,7 +222,7 @@ describe('Callout Component', () => {
       expect(outerCallout).toHaveClass(
         'c-callout',
         'c-callout--success',
-        'c-callout--oneline',
+        'c-callout--compact',
         'c-callout--toast',
         'c-callout--glass'
       );
@@ -270,7 +270,7 @@ describe('Callout Component', () => {
 
     it('applies alert role and assertive live region for toast alerts', () => {
       render(
-        <Callout title="Toast Error" variant="error" toast>
+        <Callout title="Toast Error" variant="error" isToast>
           Toast error message
         </Callout>
       );
@@ -281,7 +281,7 @@ describe('Callout Component', () => {
 
     it('applies polite live region for toast notifications', () => {
       render(
-        <Callout title="Toast Info" variant="info" toast>
+        <Callout title="Toast Info" variant="info" isToast>
           Toast info message
         </Callout>
       );
@@ -292,7 +292,7 @@ describe('Callout Component', () => {
 
     it('maintains accessibility with glass effect', () => {
       render(
-        <Callout title="Glass Error" variant="error" glass={true} toast>
+        <Callout title="Glass Error" variant="error" glass={true} isToast>
           Glass error message
         </Callout>
       );

package/src/components/Callout/Callout.tsx

@@ -14,8 +14,8 @@ export const Callout: React.FC<CalloutProps> = ({
   variant = 'primary',
   onClose,
   actions,
-  oneLine = false,
-  toast = false,
+  compact = false,
+  isToast = false,
   glass,
   className,
   style,
@@ -23,8 +23,8 @@ export const Callout: React.FC<CalloutProps> = ({
 }) => {
   const { generateCalloutClass, handleClose } = useCallout({
     variant,
-    oneLine,
-    toast,
+    compact,
+    isToast,
     glass,
     className,
     style,
@@ -37,7 +37,7 @@ export const Callout: React.FC<CalloutProps> = ({
     };
 
     // For toast notifications or alerts, use appropriate role and live region
-    if (toast) {
+    if (isToast) {
       baseAttributes.role = 'alert';
       baseAttributes['aria-live'] = 'polite';
     } else if (['warning', 'error'].includes(variant)) {
@@ -83,7 +83,7 @@ export const Callout: React.FC<CalloutProps> = ({
 
     return (
       <div
-        className={generateCalloutClass({ variant, oneLine, toast, glass, className })}
+        className={generateCalloutClass({ variant, compact, isToast, glass, className })}
         {...getAriaAttributes()}
         {...props}
         style={style}
@@ -102,7 +102,7 @@ export const Callout: React.FC<CalloutProps> = ({
 
   return (
     <div
-      className={generateCalloutClass({ variant, oneLine, toast, glass, className })}
+      className={generateCalloutClass({ variant, compact, isToast, glass, className })}
       {...getAriaAttributes()}
       {...props}
       style={style}

package/src/components/Callout/README.md

@@ -46,8 +46,8 @@ import { Callout } from '@atomix/react';
 | `variant` | `ThemeColor` | `'primary'` | Color variant |
 | `onClose` | `() => void` | - | Close handler function |
 | `actions` | `ReactNode` | - | Optional action buttons |
-| `oneLine` | `boolean` | `false` | Display in one line mode |
-| `toast` | `boolean` | `false` | Display as toast notification |
+| `compact` | `boolean` | `false` | Display in compact mode |
+| `isToast` | `boolean` | `false` | Display as toast notification |
 | `glass` | `AtomixGlassProps \| boolean` | `false` | Glass morphism effect |
 | `className` | `string` | - | Additional CSS classes |
 
@@ -121,14 +121,14 @@ When `glass={true}`, these default settings are used:
 
 ## Layout Options
 
-### One Line Mode
+### Compact Mode
 
 ```tsx
 <Callout
   title="Quick notification"
   variant="info"
   icon={<InfoIcon />}
-  oneLine={true}
+  compact={true}
 />
 ```
 
@@ -139,7 +139,7 @@ When `glass={true}`, these default settings are used:
   title="Toast Message"
   variant="success"
   icon={<SuccessIcon />}
-  toast={true}
+  isToast={true}
   onClose={() => handleClose()}
 >
   This appears as a toast notification
@@ -222,7 +222,7 @@ function ToastManager() {
           key={toast.id}
           title={toast.variant}
           variant={toast.variant}
-          toast={true}
+          isToast={true}
           glass={true}
           onClose={() => removeToast(toast.id)}
         >
@@ -368,7 +368,7 @@ function NotificationSystem() {
         variant="error"
         title="Error"
         icon={<X />}
-        toast={true}
+        isToast={true}
         glass={true}
         onClose={() => handleErrorClose()}
       >
@@ -384,7 +384,8 @@ function NotificationSystem() {
 ### From v1.x to v2.x
 
 - Glass prop added as optional feature
-- No breaking changes to existing props
+- **Prop Rename**: `oneLine` is now `compact`
+- **Prop Rename**: `toast` is now `isToast`
 - Enhanced accessibility attributes
 - Improved TypeScript definitions
 

package/src/components/Card/Card.tsx

@@ -43,8 +43,8 @@ export const Card = React.memo(
         glass,
         // Accessibility
         role,
-        ariaLabel,
-        ariaDescribedBy,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
         tabIndex,
         // Styling
         className = '',

package/src/components/Chart/Chart.stories.tsx

@@ -303,10 +303,10 @@ export const ChartGallery: Story = {
 
       // Custom toolbar with chart controls
       const customToolbar = (
-        <div className="u-d-flex u-gap-2 u-align-items-center u-flex-wrap u-mb-5">
-          <div className="u-border-start u-ps-2 u-d-flex u-gap-2 u-align-items-center">
+        <div className="u-flex u-gap-2 u-items-center u-flex-wrap u-mb-5">
+          <div className="u-border-start u-ps-2 u-flex u-gap-2 u-items-center">
             {/* Data Points Control */}
-            <div className="u-d-flex u-align-items-center u-gap-1">
+            <div className="u-flex u-items-center u-gap-1">
               <Icon name="Database" size="sm" />
               <input
                 type="range"
@@ -515,14 +515,14 @@ export const ChartGallery: Story = {
     return (
       <Container className="u-py-6">
         <Card className="u-mb-6 u-p-6 u-text-center">
-          <h1 className="u-mb-3 u-d-flex u-align-items-center u-justify-content-center u-gap-2">
+          <h1 className="u-mb-3 u-flex u-items-center u-justify-center u-gap-2">
             <Icon name="ChartBar" size="lg" />
             Atomix Chart Gallery
           </h1>
           <p className="u-mb-4 u-text-muted">
             Explore 20+ modern chart types with integrated toolbar controls
           </p>
-          <div className="u-d-flex u-gap-2 u-justify-content-center u-flex-wrap">
+          <div className="u-flex u-gap-2 u-justify-center u-flex-wrap">
             <Badge label="20+ Types" variant="primary" />
             <Badge label="Real-time" variant="success" />
             <Badge label="Interactive" variant="info" />
@@ -542,7 +542,7 @@ export const ChartGallery: Story = {
                       onClick={() => setSelectedType(key)}
                       active={selectedType === key}
                     >
-                      <div className="u-d-flex u-align-items-center u-gap-2">
+                      <div className="u-flex u-items-center u-gap-2">
                         <Icon name={icon as any} size="sm" />
                         <div>
                           <div>{label}</div>

package/src/components/Chart/Chart.tsx

@@ -353,7 +353,7 @@ const Chart = memo(
         >
             {(title || subtitle || showToolbar) && (
               <div
-                className={`${CHART.HEADER_CLASS} u-d-flex u-justify-between u-align-items-start u-gap-4`}
+                className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`}
               >
                 <div className={`${CHART.HEADER_CONTENT_CLASS} u-flex-1`}>
                   {title && <h3 className={`${CHART.TITLE_CLASS} u-mb-1`}>{title}</h3>}

package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx

@@ -127,7 +127,7 @@ export const WithoutStorage: Story = {
 export const InHeader: Story = {
   render: () => (
     <div
-      className="u-p-5 u-shadow u-d-flex u-justify-content-between u-align-items-center"
+      className="u-p-5 u-shadow u-flex u-justify-between u-items-center"
       style={{ width: '400px', borderRadius: '8px' }}
     >
       <span style={{ fontWeight: 600 }}>Toggle Theme</span>

package/src/components/DataTable/DataTable.tsx

@@ -137,26 +137,26 @@ export const DataTable: React.FC<DataTableProps> = memo(({
     e.preventDefault();
     e.stopPropagation();
     setResizingColumn(columnKey);
-    
+
     const startX = e.clientX;
     const startWidth = columnWidths[columnKey] || 100;
-    
+
     const handleMouseMove = (moveEvent: MouseEvent) => {
       const diff = moveEvent.clientX - startX;
       const newWidth = Math.max(50, startWidth + diff); // Minimum width of 50px
-      
+
       setColumnWidths(prev => ({
         ...prev,
         [columnKey]: newWidth,
       }));
     };
-    
+
     const handleMouseUp = () => {
       setResizingColumn(null);
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     };
-    
+
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
   }, [columnWidths]);
@@ -178,8 +178,10 @@ export const DataTable: React.FC<DataTableProps> = memo(({
     if (dragStartIndex !== null && dragStartIndex !== dropIndex && onColumnReorder) {
       const newOrder = [...visibleColumns.map(col => col.key)];
       const [removed] = newOrder.splice(dragStartIndex, 1);
-      newOrder.splice(dropIndex, 0, removed);
-      onColumnReorder(newOrder);
+      if (removed) {
+        newOrder.splice(dropIndex, 0, removed);
+        onColumnReorder(newOrder);
+      }
     }
     setDragStartIndex(null);
     setDragOverIndex(null);
@@ -246,7 +248,7 @@ export const DataTable: React.FC<DataTableProps> = memo(({
           {visibleColumns.map((column, index) => {
             const isDragging = dragStartIndex === index;
             const isDragOver = dragOverIndex === index;
-            
+
             return (
               <th
                 key={`header-${column.key}`}
@@ -363,8 +365,8 @@ export const DataTable: React.FC<DataTableProps> = memo(({
                   {selectionMode === 'multiple' ? (
                     <Checkbox
                       checked={isSelected}
-                      onChange={(e) => handleRowSelect(rowId, e.target.checked)}
-                      onClick={(e) => e.stopPropagation()}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleRowSelect(rowId, e.target.checked)}
+                      onClick={(e: React.MouseEvent<HTMLInputElement>) => e.stopPropagation()}
                       aria-label={`Select row ${rowIndex + 1}`}
                     />
                   ) : (
@@ -411,7 +413,7 @@ export const DataTable: React.FC<DataTableProps> = memo(({
           showFirstLastButtons={true}
           showPrevNextButtons={true}
           size="sm"
-          ariaLabel="Data table pagination"
+          aria-label="Data table pagination"
           className="c-data-table__pagination"
         />
       </div>
@@ -466,7 +468,7 @@ export const DataTable: React.FC<DataTableProps> = memo(({
                         <Checkbox
                           checked={columnVisibility[column.key] !== false}
                           onChange={() => handleColumnVisibilityToggle(column.key)}
-                          onClick={(e) => e.stopPropagation()}
+                          onClick={(e: React.MouseEvent<HTMLInputElement>) => e.stopPropagation()}
                         />
                         <span style={{ marginLeft: '0.5rem' }}>{column.title}</span>
                       </label>

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -135,7 +135,7 @@ export const DateRangeSelection: Story = {
     return (
       <div
         style={{ width: '300px' }}
-        className="u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
+        className="u-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
       >
         <DatePicker
           {...args}
@@ -875,9 +875,9 @@ export const DateRangeWithLimits: Story = {
     return (
       <div
         style={{ width: '400px' }}
-        className="u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
+        className="u-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
       >
-        <p className="u-text-info u-px-2 u-py-4 u-bg-info-subtle u-fs-xs u-text-center">
+        <p className="u-text-info u-px-2 u-py-4 u-bg-info-subtle u-text-xs u-text-center">
           Select a date range between {minDate.toLocaleDateString()} and{' '}
           {maxDate.toLocaleDateString()}
         </p>
@@ -913,7 +913,7 @@ export const InlineRangeSelection: Story = {
     return (
       <div
         style={{ width: '300px' }}
-        className="u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
+        className="u-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center"
       >
         <DatePicker
           {...args}
@@ -950,7 +950,7 @@ export const Sizes: Story = {
     return (
       <div
         style={{ width: '300px' }}
-        className={'u-d-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'}
+        className={'u-flex u-flex-column u-gap-4 u-mt-20 u-mx-auto u-items-center'}
       >
         <DatePicker {...args} size="sm" placeholder="Small (sm)" value={date} onChange={setDate} />
         <DatePicker {...args} size="md" placeholder="Medium (md)" value={date} onChange={setDate} />
@@ -1003,7 +1003,7 @@ export const DifferentFormats: Story = {
     const [date3, setDate3] = useState<Date | null>(initialDate);
 
     return (
-      <div className="u-w-75 u-mx-auto u-mt-20 u-d-flex u-gap-3">
+      <div className="u-w-75 u-mx-auto u-mt-20 u-flex u-gap-3">
         <DatePicker
           {...args}
           format="MM/dd/yyyy"

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -250,7 +250,7 @@ export const AllPlacements: Story = {
     return (
       <div className="u-p-5" style={{ height: '650px' }}>
         <div
-          className="u-d-grid"
+          className="u-grid"
           style={{
             gridTemplateColumns: 'repeat(4, 1fr)',
             gridTemplateRows: 'repeat(2, 1fr)',
@@ -261,7 +261,7 @@ export const AllPlacements: Story = {
           {placements.map(placement => (
             <div
               key={placement.value}
-              className="u-d-flex u-align-items-center u-justify-content-center"
+              className="u-flex u-items-center u-justify-center"
             >
               <Dropdown
                 trigger="click"
@@ -316,7 +316,7 @@ export const AllVariants: Story = {
 
     return (
       <div className="u-p-4" style={{ minHeight: '300px' }}>
-        <div className="u-d-flex u-flex-wrap u-gap-3">
+        <div className="u-flex u-flex-wrap u-gap-3">
           {[
             'primary',
             'secondary',
@@ -462,7 +462,7 @@ export const GlassAllVariants: Story = {
           padding: '2rem',
         }}
       >
-        <div className="u-d-flex u-flex-wrap u-gap-3">
+        <div className="u-flex u-flex-wrap u-gap-3">
           {[
             'primary',
             'secondary',

package/src/components/Form/Checkbox.stories.tsx

@@ -67,7 +67,7 @@ export const Checked: Story = {
 // Checkbox states
 export const States: Story = {
   render: (args: any) => (
-    <div className="u-d-flex u-flex-column u-gap-3">
+    <div className="u-flex u-flex-column u-gap-3">
       <Checkbox label="Default checkbox" />
       <Checkbox label="Checked checkbox" checked />
       <Checkbox label="Disabled checkbox" disabled />
@@ -82,7 +82,7 @@ export const States: Story = {
 // Without label
 export const WithoutLabel: Story = {
   args: {
-    ariaLabel: 'Checkbox without visible label',
+    'aria-label': 'Checkbox without visible label',
   },
 };
 
@@ -177,7 +177,7 @@ export const GlassStates: Story = {
         >
           Glass Checkbox States
         </h3>
-        <div className="u-d-flex u-flex-column u-gap-3">
+        <div className="u-flex u-flex-column u-gap-3">
           <Checkbox label="Glass Checkbox" glass />
           <Checkbox label="Glass Checked" checked glass />
           <Checkbox label="Glass Disabled" disabled glass />

package/src/components/Form/Checkbox.tsx

@@ -20,8 +20,9 @@ export const Checkbox: React.FC<CheckboxProps> = memo(({
   invalid = false,
   valid = false,
   indeterminate = false,
-  ariaLabel,
-  ariaDescribedBy,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  onClick,
   glass,
 }) => {
   const { generateCheckboxClass, checkboxRef } = useCheckbox({
@@ -47,6 +48,7 @@ export const Checkbox: React.FC<CheckboxProps> = memo(({
         className="c-checkbox__input"
         checked={checked}
         onChange={onChange}
+        onClick={onClick}
         disabled={disabled}
         required={required}
         id={id}

package/src/components/Form/Form.stories.tsx

@@ -127,14 +127,14 @@ export const CompleteForm: Story = {
         </FormGroup>
 
         <FormGroup label="Preferred contact method">
-          <div className="u-d-flex u-flex-column u-gap-2">
+          <div className="u-flex u-flex-column u-gap-2">
             <Radio id="contact-email" name="contactMethod" value="email" label="Email" checked />
             <Radio id="contact-phone" name="contactMethod" value="phone" label="Phone" />
             <Radio id="contact-mail" name="contactMethod" value="mail" label="Mail" />
           </div>
         </FormGroup>
 
-        <div className="u-d-flex u-gap-3 u-mt-4">
+        <div className="u-flex u-gap-3 u-mt-4">
           <button type="submit" className="c-btn c-btn--primary">
             Register
           </button>
@@ -306,7 +306,7 @@ export const Interactive: Story = {
             />
           </FormGroup>
 
-          <div className="u-d-flex u-gap-3 u-mt-4">
+          <div className="u-flex u-gap-3 u-mt-4">
             <button type="submit" className="c-btn c-btn--primary">
               Submit
             </button>

package/src/components/Form/FormGroup.stories.tsx

@@ -88,7 +88,7 @@ export const ValidationStates: Story = {
     required: true,
   },
   render: args => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <FormGroup label="Username" htmlFor="username" helperText="Username is available" valid>
         <Input id="username" value="johndoe" valid />
       </FormGroup>