feat: align all components, stories, and tests with DaisyUI v5 and bu…

CONTEXT.md

@@ -1,4 +1,4 @@
-# Project Context: @creativecodeco/ui (v2.6.0)
+# Project Context: @creativecodeco/ui (v2.7.0)
 
 ## Purpose
 

Changelog.md

@@ -2,6 +2,28 @@
 
 # Changelog
 
+## v2.7.0 - Full DaisyUI v5 Specification Alignment, Combinations, Stories & Unit Tests
+
+### 👾 Feature & DaisyUI v5 Alignment
+
+- **Global Types (`SizeType` & `ColorType`)**: Add `'xl'` size (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) and `'neutral'` semantic color across base types (`src/types/ui/base/constants.types.ts`) and custom theme CSS files (`avatar.css`, `badge.css`, `button.css`, `checkbox.css`, `radio.css`, `textbox.css`).
+- **Display Components**:
+  - `Button`: Add DaisyUI v5 `variant` (`'outline' | 'dash' | 'soft' | 'ghost' | 'link'`), `shape` (`'square' | 'circle'`), `wide`, `block`, `active`, `size='xl'`, and automatic `<Badge />` rendering when `withBadge` and `badge` are provided.
+  - `Badge`: Add `variant` (`'outline' | 'dash' | 'soft' | 'ghost'`), `ColorButtonType` (`neutral`, `ghost`), and `size='xl'`.
+  - `Card`: Migrate legacy v4 classes (`card-bordered` -> `card-border`, `card-compact` -> `card-sm`) and add `size` (`xs`–`xl`), `dash` (`card-dash`), `side` (`card-side`), and `imageFull` (`image-full`).
+  - `Table`: Migrate to DaisyUI v5 `table-xs` and `row-hover` on `<tr>`, and add `size` (`xs`–`xl`), `pinRows` (`table-pin-rows`), and `pinCols` (`table-pin-cols`).
+  - `Carousel`, `Stat`, `Swap`, `Timeline`, `AvatarGroup`: Add `snap='start'` and `carousel-horizontal` in `Carousel`, `actions` (`.stat-actions`) in `Stat`, `indeterminateContent` (`.swap-indeterminate`) in `Swap`, `snapIcon` (`timeline-snap-icon`) in `Timeline`, and `xl` size in `AvatarGroup`.
+- **Feedback & Layout Components**:
+  - `Alert`: Add DaisyUI v5 style variants (`'soft' | 'outline' | 'dash'`) and `vertical` (`alert-vertical` / `alert-horizontal`) layout.
+  - `Modal`, `Toast`, `Tooltip`, `Skeleton`, `Spinner`, `Collapse`: Add `position` (`'top' | 'middle' | 'bottom' | 'start' | 'end'`) and `size='xl'` in `Modal`, `middle-*` (`toast-middle`) positions in `Toast`, `'start' | 'center' | 'end'` positions and `.tooltip-content` rich JSX support in `Tooltip`, `skeleton-text` in `Skeleton`, `loading-xl` in `Spinner`, and `close` (`collapse-close`) in `Collapse`.
+- **Navigation Components**:
+  - `Tabs`: Migrate to DaisyUI v5 `tabs-border`, `tabs-lift`, `tabs-box` (preserving backward compatibility with `bordered`, `lifted`, `boxed`), add `position` (`'top' | 'bottom'`), and support `tabs-xl`.
+  - `Menu`, `ActionDropdown`, `Steps`, `Fab`, `Drawer`, `Pagination`: Migrate to `menu-active`, `menu-disabled`, and `menu-focus`, wrap step icons in `<span className='step-icon'>`, add `mainAction` (`.fab-main-action`) in `Fab`, add `.drawer-content` in `Drawer`, and support `btn-xl` in `Pagination`.
+- **Form Controls**:
+  - `TextBox`, `TextArea`, `FileInput`, `Range`, `Toggle`: Add `ghost` modifier (`input-ghost`, `textarea-ghost`, `file-input-ghost`), `vertical` (`range-vertical`) in `Range`, and full `xl` size / `neutral` color support.
+- **Tailwind CSS v4 Safelisting**: Expand `@source inline(...)` in `src/theme/main.css` to guarantee all dynamic DaisyUI v5 modifiers, variants, sizes, and component classes are emitted in `lib/theme/main.css`.
+- **Storybook & Unit Tests**: Update 34 Storybook files (`*.stories.tsx`) with new `argTypes` and interactive stories, and expand unit tests (`*.test.tsx`) to 245 passing tests across 70 test suites.
+
 ## v2.6.0 - Component Standardization, A11y, Security Hardening & Dependency Upgrades
 
 ### 👾 Component Standardization & Design Polish

README.md

@@ -17,7 +17,7 @@
 ## Configuration
 
 > [!NOTE]
-> **Current Version: `v2.6.0`** — This library is designed for **React 19** (`v19.3.1`), **Tailwind CSS v4** (`v4.3.3`), and **DaisyUI v5** (`v5.7.50`), and requires **Node.js 24 LTS** (`>=24.22.1`) and **npm 12** (`>=12.2.1`). The configuration is primarily CSS-first.
+> **Current Version: `v2.7.0`** — This library is designed for **React 19** (`v19.3.1`), **Tailwind CSS v4** (`v4.3.3`), and **DaisyUI v5** (`v5.7.50`), and requires **Node.js 24 LTS** (`>=24.22.1`) and **npm 12** (`>=12.2.1`). The configuration is primarily CSS-first.
 
 ### Install
 

package.json

@@ -15,7 +15,7 @@
     "react-hook-form",
     "storybook"
   ],
-  "version": "2.6.0",
+  "version": "2.7.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "repository": {
     "type": "git",

src/theme/avatar.css

@@ -30,6 +30,14 @@
   }
 }
 
+.avatar-size-xl {
+  @apply w-32;
+
+  > span {
+    @apply text-4xl;
+  }
+}
+
 .avatar-ring {
   @apply ring ring-primary ring-offset-base-100 ring-offset-2;
 }

src/theme/badge.css

@@ -1,7 +1,15 @@
+.badge-size-xl {
+  @apply badge-xl;
+}
+
 .badge-size-lg {
   @apply badge-lg;
 }
 
+.badge-size-md {
+  @apply badge-md;
+}
+
 .badge-size-sm {
   @apply badge-sm;
 }
@@ -22,6 +30,14 @@
   @apply badge-accent;
 }
 
+.badge-color-neutral {
+  @apply badge-neutral;
+}
+
+.badge-color-ghost {
+  @apply badge-ghost;
+}
+
 .badge-color-success {
   @apply badge-success;
 }

src/theme/button.css

@@ -76,10 +76,18 @@
   @apply btn-ghost;
 }
 
+.button-size-xl {
+  @apply btn-xl;
+}
+
 .button-size-lg {
   @apply btn-lg;
 }
 
+.button-size-md {
+  @apply btn-md;
+}
+
 .button-size-sm {
   @apply btn-sm;
 }

src/theme/checkbox.css

@@ -10,6 +10,10 @@
   @apply checkbox-accent;
 }
 
+.checkbox-color-neutral {
+  @apply checkbox-neutral;
+}
+
 .checkbox-color-success {
   @apply checkbox-success;
 }
@@ -41,3 +45,7 @@
 .checkbox-size-lg {
   @apply checkbox-lg;
 }
+
+.checkbox-size-xl {
+  @apply checkbox-xl;
+}

src/theme/main.css

@@ -11,7 +11,27 @@
 @plugin "daisyui";
 
 @source inline("{btn,badge,alert,toggle,range,select,textarea,file-input,progress,status,chat-bubble,step,tooltip,checkbox,radio,input,otp,divider,link,text,bg,border}-{primary,secondary,accent,info,success,warning,error,neutral,ghost}");
-@source inline("{btn,badge,toggle,range,select,textarea,file-input,checkbox,radio,input,otp,tab,table,menu,dock,kbd,loading,status}-{xs,sm,md,lg,xl}");
+@source inline("{btn,badge,toggle,range,select,textarea,file-input,checkbox,radio,input,otp,tabs,table,menu,dock,kbd,loading,status,aura,rating,megamenu,card}-{xs,sm,md,lg,xl}");
+@source inline("aura-{rainbow,holo,dual,silver,gold,glow}");
+@source inline("mask-{squircle,heart,hexagon,hexagon-2,decagon,pentagon,diamond,square,circle,star,star-2,triangle,triangle-2,triangle-3,triangle-4}");
+@source inline("stack-{top,bottom,start,end}");
+@source inline("dropdown-{top,bottom,left,right,start,center,end}");
+@source inline("collapse-{arrow,plus,open,close}");
+@source inline("swap-{rotate,flip,active,indeterminate}");
+@source inline("tabs-{border,lift,box,top,bottom}");
+@source inline("card-{border,dash,side}");
+@source inline("alert-{soft,outline,dash,vertical,horizontal}");
+@source inline("badge-{outline,dash,soft,ghost}");
+@source inline("btn-{outline,dash,soft,ghost,link,wide,block,square,circle,active,disabled}");
+@source inline("modal-{top,middle,bottom,start,end}");
+@source inline("toast-{start,center,end,top,middle,bottom}");
+@source inline("tooltip-{top,bottom,left,right,start,center,end,open,content}");
+@source inline("table-{pin-rows,pin-cols,zebra}");
+@source inline("timeline-{vertical,horizontal,compact,snap-icon}");
+@source inline("{input,textarea,file-input,select}-ghost");
+@source inline("range-vertical");
+@source inline("skeleton-text");
+@source inline("fab-{flower,close,main-action}");
 
 :root {
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

src/theme/radio.css

@@ -10,6 +10,10 @@
   @apply radio-accent;
 }
 
+.radio-color-neutral {
+  @apply radio-neutral;
+}
+
 .radio-color-success {
   @apply radio-success;
 }
@@ -41,3 +45,7 @@
 .radio-size-lg {
   @apply radio-lg;
 }
+
+.radio-size-xl {
+  @apply radio-xl;
+}

src/theme/textbox.css

@@ -46,6 +46,18 @@
   }
 }
 
+.textbox-size-xl {
+  @apply input-xl;
+
+  &.textbox-with-left-icon {
+    @apply pl-10;
+  }
+
+  &.textbox-with-right-icon {
+    @apply pr-10;
+  }
+}
+
 .textbox-left-icon {
   @apply absolute z-10;
 }
@@ -66,6 +78,10 @@
   @apply top-6 left-3;
 }
 
+.textbox-left-icon-size-xl {
+  @apply top-7 left-3;
+}
+
 .textbox-right-icon {
   @apply absolute z-10;
 }
@@ -86,6 +102,10 @@
   @apply top-6 right-3;
 }
 
+.textbox-right-icon-size-xl {
+  @apply top-7 right-3;
+}
+
 .textbox-color-primary {
   @apply input-primary;
 }
@@ -98,6 +118,10 @@
   @apply input-accent;
 }
 
+.textbox-color-neutral {
+  @apply input-neutral;
+}
+
 .textbox-color-success {
   @apply input-success;
 }

src/types/ui/base/constants.types.ts

@@ -1,6 +1,13 @@
-export type SizeType = 'xs' | 'sm' | 'md' | 'lg';
+export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ColorType =
-  'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error';
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'neutral'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'error';
 export type ColorButtonType =
   | 'primary'
   | 'secondary'

src/ui/components/display/aura/aura.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Aura> = {
       control: 'select',
       options: ['rainbow', 'holo', 'dual', 'silver', 'gold']
     },
-    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     glow: { control: 'boolean' }
   }
 };
@@ -48,3 +48,25 @@ export const Variants: Story = {
     </div>
   )
 };
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-6 p-4'>
+      <Aura size='xs' glow>
+        <button className='btn btn-xs'>XS</button>
+      </Aura>
+      <Aura size='sm' glow>
+        <button className='btn btn-sm'>SM</button>
+      </Aura>
+      <Aura size='md' glow>
+        <button className='btn btn-md'>MD</button>
+      </Aura>
+      <Aura size='lg' glow>
+        <button className='btn btn-lg'>LG</button>
+      </Aura>
+      <Aura size='xl' glow>
+        <button className='btn btn-xl'>XL</button>
+      </Aura>
+    </div>
+  )
+};

src/ui/components/display/avatar-group/avatar-group.component.tsx

@@ -7,7 +7,8 @@ const sizeClasses: Record<string, string> = {
   xs: 'w-6 h-6',
   sm: 'w-8 h-8',
   md: 'w-12 h-12',
-  lg: 'w-16 h-16'
+  lg: 'w-16 h-16',
+  xl: 'w-20 h-20'
 };
 
 const AvatarGroup = ({

src/ui/components/display/avatar-group/avatar-group.stories.tsx

@@ -6,7 +6,7 @@ const meta: Meta<typeof AvatarGroup> = {
   component: AvatarGroup,
   tags: ['autodocs'],
   argTypes: {
-    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] }
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] }
   }
 };
 

src/ui/components/display/avatar-group/avatar-group.test.tsx

@@ -33,4 +33,9 @@ describe('<AvatarGroup />', () => {
     expect(screen.queryByAltText('User 3')).not.toBeInTheDocument();
     expect(screen.getByText('+2')).toBeInTheDocument();
   });
+
+  it('applies xl size class', () => {
+    const { container } = render(<AvatarGroup avatars={avatars} size='xl' />);
+    expect(container.querySelector('.avatar > div')).toHaveClass('w-20');
+  });
 });

src/ui/components/display/avatar/avatar.stories.tsx

@@ -53,7 +53,7 @@ const meta: Meta<typeof Avatar> = {
     size: {
       description: 'Size',
       type: 'string',
-      options: ['xs', 'sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       control: { type: 'select' },
       table: {
         type: {
@@ -101,6 +101,12 @@ export const SizeLg: Story = {
   }
 };
 
+export const SizeXl: Story = {
+  args: {
+    size: 'xl'
+  }
+};
+
 export const Image: Story = {
   args: {
     src: imageAvatar

src/ui/components/display/badge/badge.component.tsx

@@ -6,6 +6,7 @@ import type { BadgeType } from '@/types';
 const Badge = ({
   children,
   color,
+  variant,
   icon: Icon,
   iconPosition = 'left',
   outline,
@@ -20,12 +21,17 @@ const Badge = ({
     return <Icon />;
   }, [Icon]);
 
+  const isStyledVariant = Boolean(outline || variant);
+
   return (
     <div
       className={cls('badge', className, {
-        [`badge-color-${color}`]: !outline && color,
-        [`badge-${color}`]: outline && color,
-        'badge-outline': outline,
+        [`badge-color-${color}`]: !isStyledVariant && color,
+        [`badge-${color}`]: isStyledVariant && color,
+        'badge-outline': outline || variant === 'outline',
+        'badge-dash': variant === 'dash',
+        'badge-soft': variant === 'soft',
+        'badge-ghost': variant === 'ghost',
         [`badge-size-${size}`]: size !== 'md',
         'gap-2': Icon
       })}