oihana-next-ui 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": false,
   "description": "Oihana Next.js UI component library — reusable components, hooks and utilities built with React 19, Next.js, Tailwind CSS and DaisyUI",
   "author": {
@@ -57,48 +57,48 @@
     "daisyui": "^5.0.0"
   },
   "dependencies": {
-    "@maskito/core": "^5.2.2",
-    "@maskito/kit": "^5.2.2",
-    "@maskito/react": "^5.2.2",
+    "@maskito/core": "^5.3.1",
+    "@maskito/kit": "^5.3.1",
+    "@maskito/react": "^5.3.1",
     "@use-gesture/react": "^10.3.1",
     "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.20",
+    "dayjs": "^1.11.21",
     "flag-icons": "^7.5.0",
     "html-react-parser": "^5.2.17",
     "ky": "^1.14.3",
-    "motion": "^12.38.0",
+    "motion": "^12.42.0",
     "next": "16.2.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-icons": "^5.6.0",
-    "react-is": "^19.2.5",
+    "react-is": "^19.2.7",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
-    "react-use": "^17.6.0",
+    "react-use": "^17.6.1",
     "rehype-external-links": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "sanitize-html": "^2.17.3",
-    "tailwind-merge": "^3.5.0",
+    "sanitize-html": "^2.17.5",
+    "tailwind-merge": "^3.6.0",
     "validator": "^13.15.35",
     "vegas-js-core": "^1.0.47"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.0",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.6.0",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/typography": "^0.5.20",
+    "@types/node": "^25.9.4",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/sanitize-html": "^2.16.1",
     "babel-plugin-react-compiler": "1.0.0",
-    "daisyui": "^5.5.19",
+    "daisyui": "^5.6.2",
     "raw-loader": "^4.0.2",
     "sharp": "^0.34.5",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.2.4",
-    "tailwindcss-animated": "^2.0.0",
+    "tailwindcss": "^4.3.1",
+    "tailwindcss-animated": "^2.1.0",
     "tailwindcss-opentype": "^1.2.0"
   },
   "resolutions": {

package/src/@configs/navigation.js

@@ -18,6 +18,7 @@ import { RxAvatar               as AvatarIcon         } from "react-icons/rx";
 import { LuBadgeAlert           as BadgeIcon          } from "react-icons/lu";
 import { RiCheckboxFill         as CheckBoxIcon       } from "react-icons/ri";
 import { LuListCollapse         as CollapseIcon       } from "react-icons/lu";
+import { LuSparkles             as EffectIcon         } from "react-icons/lu";
 import { CiGrid31               as FlexIcon           } from "react-icons/ci";
 import { IoMdGrid               as GridIcon           } from "react-icons/io";
 import { FaPager                as HeaderIcon         } from "react-icons/fa6";
@@ -31,6 +32,7 @@ import { BsFillMarkdownFill     as MarkdownIcon       } from 'react-icons/bs' ;
 import { GiDominoMask           as MaskIcon           } from "react-icons/gi";
 import { RiLayoutMasonryFill    as MasonryIcon        } from "react-icons/ri";
 import { TfiLayoutMenuSeparated as MenuIcon           } from "react-icons/tfi" ;
+import { LuLayoutPanelTop       as MegamenuIcon       } from "react-icons/lu";
 import { SiDialogflow           as ModalIcon          } from "react-icons/si";
 import { MdAnimation            as MotionIcon         } from "react-icons/md";
 import { BiFoodMenu             as NavigationIcon     } from "react-icons/bi";
@@ -91,6 +93,7 @@ const navigation =
                 [
                     { id : 'avatars'    , type : LINK  , Icon : AvatarIcon     , path  : '/lab/avatars'    } ,
                     { id : 'badges'     , type : LINK  , Icon : BadgeIcon      , path  : '/lab/badges'     } ,
+                    { id : 'effects'    , type : LINK  , Icon : EffectIcon     , path  : '/lab/effects'    } ,
                     { id : 'images'     , type : LINK  , Icon : ImageIcon      , path  : '/lab/images'     } ,
                     { id : 'lists'      , type : LINK  , Icon : ListIcon       , path  : '/lab/lists'      } ,
                     { id : 'masks'      , type : LINK  , Icon : MaskIcon       , path  : '/lab/masks'      } ,
@@ -110,6 +113,7 @@ const navigation =
                 [
                     { id : 'pagination' , type : LINK  , Icon : PaginationIcon , path  : '/lab/pagination' } ,
                     { id : 'menus'      , type : LINK  , Icon : MenuIcon       , path  : '/lab/menus'      } ,
+                    { id : 'megamenu'   , type : LINK  , Icon : MegamenuIcon   , path  : '/lab/megamenu'   } ,
                 ]
             } ,
             {

package/src/@locale/navigation.js

@@ -10,6 +10,7 @@ const navigation =
             display      : 'Display' ,
                 avatars        : 'Avatars' ,
                 badges         : 'Badges' ,
+                effects        : 'Effets' ,
                 headers        : 'Entêtes' ,
                 images         : 'Images' ,
                 markdown       : 'Markdown' ,
@@ -45,6 +46,7 @@ const navigation =
             navigation   : 'Navigation' ,
                 lists          : 'Listes' ,
                 menus          : 'Menus' ,
+                megamenu       : 'Megamenu' ,
                 pagination     : 'Pagination' ,
             tests        : 'Tests' ,
 
@@ -59,6 +61,7 @@ const navigation =
             display      : 'Display' ,
                 avatars        : 'Avatars' ,
                 badges         : 'Badges' ,
+                effects        : 'Effects' ,
                 headers        : 'Headers' ,
                 images         : 'Images' ,
                 markdown       : 'Markdown' ,
@@ -94,6 +97,7 @@ const navigation =
             navigation   : 'Navigation' ,
                 lists          : 'Lists' ,
                 menus          : 'Menus' ,
+                megamenu       : 'Megamenu' ,
                 pagination     : 'Pagination' ,
             tests        : 'Tests' ,
 

package/src/app/lab/@tabs/effects/page.js

@@ -0,0 +1,31 @@
+'use client' ;
+
+import AuraDemo  from '@/demo/effects/AuraDemo' ;
+import Container from '@/display/Container' ;
+import Page      from '@/display/Page' ;
+
+/**
+ * Effects showcase page.
+ *
+ * Displays the visual effect components (Aura, …).
+ *
+ * @param {Object} props
+ */
+const EffectsShowcase = () =>
+{
+    return (
+        <Page full className='gap-8'>
+
+            <Container className="text-center" maxWidth="max-w-4xl">
+                <h1 className="text-4xl font-bold bg-linear-to-r from-secondary to-primary inline-block text-transparent bg-clip-text">
+                    Effect Components
+                </h1>
+            </Container>
+
+            <AuraDemo />
+
+        </Page>
+    ) ;
+} ;
+
+export default EffectsShowcase ;

package/src/app/lab/@tabs/megamenu/page.js

@@ -0,0 +1,29 @@
+'use client' ;
+
+import MegamenuDemo from '@/demo/menus/MegamenuDemo' ;
+import Container    from '@/display/Container' ;
+import Page         from '@/display/Page' ;
+
+/**
+ * Megamenu showcase page.
+ *
+ * @param {Object} props
+ */
+const MegamenuShowcase = () =>
+{
+    return (
+        <Page full className='gap-8'>
+
+            <Container className="text-center" maxWidth="max-w-4xl">
+                <h1 className="text-4xl font-bold bg-linear-to-r from-secondary to-primary inline-block text-transparent bg-clip-text">
+                    Megamenu Component
+                </h1>
+            </Container>
+
+            <MegamenuDemo />
+
+        </Page>
+    ) ;
+} ;
+
+export default MegamenuShowcase ;

package/src/components/Aura.jsx

@@ -0,0 +1,110 @@
+'use client' ;
+
+/**
+ * Aura component for DaisyUI 5.6.
+ *
+ * Wraps any content with a border light effect. By default the aura is always
+ * animating ; set `trigger="hover"` to only reveal and animate it on hover.
+ *
+ * The light effect is built on `currentColor`, so in `hover` mode the wrapper
+ * colour is forced transparent at rest. Make sure the wrapped content sets its
+ * own text colour (e.g. a `card` with `text-base-content`) so it stays visible.
+ *
+ * @module components/Aura
+ * @see https://daisyui.com/components/aura
+ *
+ * @example
+ * ```jsx
+ * // Always-on rainbow aura around a card
+ * <Aura variant="rainbow">
+ *     <div className="card bg-base-100"><div className="card-body">Hi</div></div>
+ * </Aura>
+ *
+ * // Reveal on hover only, custom colour and duration
+ * <Aura trigger="hover" color="primary" duration={2000}>
+ *     <button className="btn">Hover me</button>
+ * </Aura>
+ *
+ * // Custom colour + background tint (daisyUI custom-colour example)
+ * <Aura color="warning" background="warning">
+ *     <div className="card bg-base-100 text-base-content"><div className="card-body">Hi</div></div>
+ * </Aura>
+ * ```
+ */
+
+import cn from '../themes/helpers/cn' ;
+
+import getAuraClasses, { ALWAYS, HOVER } from '../themes/effects/aura' ;
+
+import getTextColor       from '../themes/colors/textColor' ;
+import getBackgroundColor from '../themes/colors/backgroundColor' ;
+import { TRANSPARENT }    from '../themes/colors/tailwindcss' ;
+
+/**
+ * @param {Object} props
+ * @param {React.ElementType} [props.as='div'] - Root element type.
+ * @param {string} [props.background] - Background tint colour constant (→ `bg-*`).
+ * @param {React.ReactNode} [props.children] - Wrapped content.
+ * @param {string} [props.className] - Additional class name.
+ * @param {string} [props.color] - Light colour constant (→ `text-*`).
+ * @param {number} [props.duration] - Animation duration in milliseconds.
+ * @param {React.Ref} [props.ref] - Forwarded ref.
+ * @param {import('../themes/effects/aura').AuraSize} [props.size='md'] - Aura size.
+ * @param {import('../themes/effects/aura').AuraTrigger} [props.trigger='always'] - 'always' or 'hover'.
+ * @param {import('../themes/effects/aura').AuraVariant} [props.variant] - Aura style variant.
+ */
+const Aura =
+({
+    as ,
+    background ,
+    children ,
+    className ,
+    color ,
+    duration ,
+    ref ,
+    size ,
+    style ,
+    trigger = ALWAYS ,
+    variant ,
+    ...rest
+}) =>
+{
+    const Component = as || 'div' ;
+
+    // Resolve the light colour class (e.g. 'text-primary') from the constant.
+    const colorClass = color ? Object.keys( getTextColor( color ) )[ 0 ] : null ;
+
+    // In `hover` mode the wrapper colour is transparent at rest and restored on
+    // hover, so the aura (built on currentColor) only shows while hovered.
+    const colorClasses = trigger === HOVER
+        ? cn(
+            getTextColor( TRANSPARENT ) ,
+            colorClass ? `hover:${ colorClass }` : 'hover:text-inherit' ,
+        )
+        : colorClass ;
+
+    const classNames = cn
+    (
+        getAuraClasses({ size , trigger , variant }) ,
+        colorClasses ,
+        background && getBackgroundColor( background ) ,
+        className ,
+    ) ;
+
+    // Duration drives the DaisyUI aura animation through the `--tw-duration` CSS
+    // variable. Setting it inline is JIT-proof (a `duration-[Nms]` class built at
+    // runtime would never be emitted by Tailwind).
+    const mergedStyle = duration != null
+        ? { '--tw-duration' : `${ duration }ms` , ...style }
+        : style ;
+
+    return (
+        <Component className={ classNames } ref={ ref } style={ mergedStyle } { ...rest }>
+            { children }
+        </Component>
+    ) ;
+} ;
+
+Aura.displayName = 'Aura' ;
+
+export default Aura ;

package/src/components/menus/Megamenu.jsx

@@ -0,0 +1,165 @@
+'use client' ;
+
+/**
+ * Megamenu component for DaisyUI 5.6.
+ *
+ * A data-driven megamenu : each item renders a trigger button + a native popover
+ * holding its content. Unique HTML ids (`popovertarget` / `popover`) are derived
+ * from `useId()`, so no manual id wiring is needed. Anchoring is handled by
+ * DaisyUI's CSS (native popover API + CSS anchor positioning).
+ *
+ * Several megamenus can coexist on a page : basic ones anchor each popover to its
+ * own preceding trigger (CSS anchor resolution is DOM-order based), and `wide` /
+ * `full` get a unique per-instance anchor name (see below) instead of daisyUI's
+ * shared `--megamenu`, so they never collide.
+ *
+ * ⚠️ At most **10** popovers per megamenu (DaisyUI limit). Requires a browser with
+ * popover + anchor positioning support (progressive enhancement — no polyfill).
+ *
+ * @module components/menus/Megamenu
+ * @see https://daisyui.com/components/megamenu
+ *
+ * @example
+ * ```jsx
+ * <Megamenu
+ *     responsive
+ *     width="wide"
+ *     items={[
+ *         { label: 'Services', links: [ { label: 'Enterprise', href: '#' }, { label: 'Security', href: '#' } ] },
+ *         { label: 'AI',       content: <div className="p-4">Custom content</div> },
+ *     ]}
+ * />
+ * ```
+ */
+
+import { Fragment, useId } from 'react' ;
+
+import cn from '../../themes/helpers/cn' ;
+
+import getMegamenuClasses, { FULL, MEGAMENU_ACTIVE, WIDE } from '../../themes/navigation/megamenu' ;
+import getMenuClasses from '../../themes/navigation/menu' ;
+
+/**
+ * DaisyUI supports at most 10 popovers inside a megamenu.
+ * @type {number}
+ */
+export const MAX_POPOVERS = 10 ;
+
+/**
+ * @typedef {Object} MegamenuItem
+ * @property {string} label - Trigger button label.
+ * @property {React.ReactNode} [content] - Popover content (takes precedence over `links`).
+ * @property {Array<{ label: string, href?: string }>} [links] - Convenience : renders a `menu` of links.
+ */
+
+/**
+ * @param {Object} props
+ * @param {string} [props.className] - Extra classes for the megamenu container.
+ * @param {MegamenuItem[]} [props.items=[]] - Menu items (max 10).
+ * @param {string} [props.popoverClassName] - Extra classes for each popover panel.
+ * @param {React.Ref} [props.ref] - Forwarded ref on the container.
+ * @param {boolean} [props.responsive=false] - Add a mobile trigger button + vertical layout on small screens.
+ * @param {import('../../themes/navigation/megamenu').MegamenuSize} [props.size] - Megamenu size.
+ * @param {string} [props.triggerClassName] - Extra classes for the mobile trigger button.
+ * @param {string} [props.triggerLabel='Menu'] - Mobile trigger button label.
+ * @param {boolean} [props.vertical=false] - Always vertical layout.
+ * @param {import('../../themes/navigation/megamenu').MegamenuWidth} [props.width] - Width modifier ('wide' | 'full').
+ */
+const Megamenu =
+({
+    className ,
+    items = [] ,
+    popoverClassName ,
+    ref ,
+    responsive = false ,
+    size ,
+    style ,
+    triggerClassName ,
+    triggerLabel = 'Menu' ,
+    vertical = false ,
+    width ,
+    ...rest
+}) =>
+{
+    const uid = useId() ;
+
+    // useId() can contain ':' — strip to a clean base usable as an HTML id.
+    const base        = `megamenu-${ uid.replace( /[^a-z0-9]/gi , '' ) }` ;
+    const containerId = base ;
+
+    // wide / full anchor every popover to the container via a shared CSS anchor.
+    // DaisyUI hard-codes `--megamenu`, which collides when several coexist ; we
+    // give each instance a unique anchor name (inline style, so JIT-proof) — this
+    // mirrors daisyUI's manual `[anchor-name:--megamenu-x]` pattern automatically.
+    const anchored   = width === WIDE || width === FULL ;
+    const anchorName = `--${ base }` ;
+
+    const list = Array.isArray( items ) ? items.slice( 0 , MAX_POPOVERS ) : [] ;
+
+    if ( process.env.NODE_ENV !== 'production' && Array.isArray( items ) && items.length > MAX_POPOVERS )
+    {
+        console.warn( `[Megamenu] DaisyUI supports at most ${ MAX_POPOVERS } popovers ; ${ items.length } provided, extra items are ignored.` ) ;
+    }
+
+    const classes = getMegamenuClasses({ className , responsive , size , vertical , width }) ;
+
+    // The container is only a popover when responsive (the mobile trigger toggles it).
+    const containerPopover = responsive ? { id : containerId , popover : 'auto' } : {} ;
+
+    const containerStyle = anchored ? { anchorName , ...style } : style ;
+    const popoverStyle   = anchored ? { positionAnchor : anchorName } : undefined ;
+
+    const renderContent = ( item ) =>
+    {
+        if ( item?.content )
+        {
+            return item.content ;
+        }
+
+        if ( Array.isArray( item?.links ) )
+        {
+            return (
+                <ul className={ getMenuClasses() }>
+                    { item.links.map( ( link , i ) => (
+                        <li key={ i }>
+                            <a href={ link?.href }>{ link?.label }</a>
+                        </li>
+                    ) ) }
+                </ul>
+            ) ;
+        }
+
+        return null ;
+    } ;
+
+    return (
+        <>
+            { responsive && (
+                <button className={ cn( 'btn sm:hidden' , triggerClassName ) } popoverTarget={ containerId }>
+                    { triggerLabel }
+                </button>
+            )}
+
+            <div className={ classes } ref={ ref } style={ containerStyle } { ...containerPopover } { ...rest }>
+                <span className={ MEGAMENU_ACTIVE } />
+
+                { list.map( ( item , index ) =>
+                {
+                    const popoverId = `${ base }-p${ index }` ;
+                    return (
+                        <Fragment key={ popoverId }>
+                            <button popoverTarget={ popoverId }>{ item?.label }</button>
+                            <div id={ popoverId } popover="auto" className={ popoverClassName } style={ popoverStyle }>
+                                { renderContent( item ) }
+                            </div>
+                        </Fragment>
+                    ) ;
+                } )}
+            </div>
+        </>
+    ) ;
+} ;
+
+Megamenu.displayName = 'Megamenu' ;
+
+export default Megamenu ;

package/src/demo/effects/AuraDemo.jsx

@@ -0,0 +1,125 @@
+'use client' ;
+
+import Container from '@/display/Container' ;
+import Divider   from '@/components/Divider' ;
+import Aura      from '@/components/Aura' ;
+
+/**
+ * Aura showcase — variants, sizes, custom colours, hover trigger and duration.
+ */
+const AuraDemo = () =>
+{
+    const variants = [ 'dual' , 'rainbow' , 'holo' , 'gold' , 'silver' , 'glow' ] ;
+    const auraSizes = [ 'xs' , 'sm' , 'md' , 'lg' , 'xl' ] ;
+
+    return (
+        <Container className="flex flex-col gap-8 bg-base-200/60 p-8 rounded-box" maxWidth="max-w-7xl">
+
+            <h2 className="text-3xl font-bold">Aura Examples</h2>
+
+            {/* Default */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Default</h3>
+                <div className="flex flex-wrap items-center gap-8">
+                    <Aura>
+                        <div className="card bg-base-100">
+                            <div className="card-body"><p>This card has aura</p></div>
+                        </div>
+                    </Aura>
+                    <Aura>
+                        <button className="btn">button with aura</button>
+                    </Aura>
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Variants */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Variants</h3>
+                <div className="flex flex-wrap items-center gap-8">
+                    { variants.map( ( variant ) => (
+                        <Aura key={ variant } variant={ variant }>
+                            <div className="card bg-base-100">
+                                <div className="card-body"><p>{ variant }</p></div>
+                            </div>
+                        </Aura>
+                    ) ) }
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Custom colour */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Custom colour & background</h3>
+                <div className="flex flex-wrap items-center gap-8">
+                    <Aura color="warning">
+                        <div className="card bg-base-100 text-base-content">
+                            <div className="card-body"><p>Custom colour</p></div>
+                        </div>
+                    </Aura>
+                    <Aura color="primary" background="primary">
+                        <div className="card bg-base-100 text-base-content">
+                            <div className="card-body"><p>Colour + background</p></div>
+                        </div>
+                    </Aura>
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Hover trigger */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Trigger: hover</h3>
+                <p className="text-sm text-base-content/70">The aura only lights up while hovering.</p>
+                <div className="flex flex-wrap items-center gap-8">
+                    <Aura trigger="hover" variant="rainbow">
+                        <div className="card bg-base-100 text-base-content">
+                            <div className="card-body"><p>Hover me (rainbow)</p></div>
+                        </div>
+                    </Aura>
+                    <Aura trigger="hover" color="primary">
+                        <button className="btn">Hover me</button>
+                    </Aura>
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Sizes */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Sizes</h3>
+                <div className="flex flex-wrap items-center gap-6">
+                    { auraSizes.map( ( size ) => (
+                        <Aura key={ size } size={ size }>
+                            <button className="btn">{ size.toUpperCase() }</button>
+                        </Aura>
+                    ) ) }
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Custom duration */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Custom duration</h3>
+                <div className="flex flex-wrap items-center gap-8">
+                    <Aura variant="rainbow" duration={ 2000 }>
+                        <div className="card bg-base-100">
+                            <div className="card-body"><p>2000ms duration</p></div>
+                        </div>
+                    </Aura>
+                    <Aura variant="rainbow" duration={ 10000 }>
+                        <div className="card bg-base-100">
+                            <div className="card-body"><p>10000ms duration</p></div>
+                        </div>
+                    </Aura>
+                </div>
+            </div>
+
+        </Container>
+    ) ;
+} ;
+
+export default AuraDemo ;

package/src/demo/menus/MegamenuDemo.jsx

@@ -0,0 +1,125 @@
+'use client' ;
+
+import Container from '@/display/Container' ;
+import Divider   from '@/components/Divider' ;
+import Megamenu  from '@/components/menus/Megamenu' ;
+
+/**
+ * Megamenu showcase.
+ *
+ * Several megamenus coexist on this page : basic ones anchor each popover to its
+ * own trigger (DOM-order anchor resolution), and wide/full get a unique anchor
+ * name per instance so they never collide.
+ */
+const MegamenuDemo = () =>
+{
+    const items =
+    [
+        {
+            label : 'Services' ,
+            links :
+            [
+                { label : 'Enterprise'   , href : '#' } ,
+                { label : 'CRM software' , href : '#' } ,
+                { label : 'Security'     , href : '#' } ,
+                { label : 'Consulting'   , href : '#' } ,
+            ] ,
+        } ,
+        {
+            label : 'AI' ,
+            links :
+            [
+                { label : 'AI infrastructure' , href : '#' } ,
+                { label : 'Image generation'  , href : '#' } ,
+                { label : 'MCP servers'       , href : '#' } ,
+            ] ,
+        } ,
+        {
+            label : 'Cloud Solutions' ,
+            links :
+            [
+                { label : 'Cloud computing'   , href : '#' } ,
+                { label : 'Storage solutions' , href : '#' } ,
+                { label : 'Database services' , href : '#' } ,
+                { label : 'CDN performance'   , href : '#' } ,
+            ] ,
+        } ,
+    ] ;
+
+    const plainItems =
+    [
+        { label : 'One'   , content : <div className="p-4">Content for the first item</div> } ,
+        { label : 'Two'   , content : <div className="p-4">Content for the second item</div> } ,
+        { label : 'Three' , content : <div className="p-4">Content for the third item</div> } ,
+    ] ;
+
+    return (
+        <Container className="flex flex-col gap-8 bg-base-200/60 p-8 rounded-box" maxWidth="max-w-7xl">
+
+            <h2 className="text-3xl font-bold">Megamenu</h2>
+            <p className="text-sm text-base-content/70">
+                Built on the native popover API + CSS anchor positioning (recent browsers).
+                Multiple megamenus coexist on this page.
+            </p>
+
+            {/* Responsive small menus */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Responsive small menus</h3>
+                <Megamenu
+                    responsive
+                    items     = { items }
+                    className = "w-full p-2 border border-base-300"
+                />
+            </div>
+
+            <Divider />
+
+            {/* Wide */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Wide popovers</h3>
+                <Megamenu
+                    responsive
+                    width     = "wide"
+                    items     = { items }
+                    className = "w-full p-2 border border-base-300"
+                />
+            </div>
+
+            <Divider />
+
+            {/* Full width inside a navbar */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Full width inside a navbar</h3>
+                <div className="navbar bg-base-100 shadow-sm">
+                    <div className="navbar-start">
+                        <a className="btn btn-ghost text-xl">daisyUI</a>
+                    </div>
+                    <div className="navbar-center">
+                        <Megamenu responsive width="full" items={ items } />
+                    </div>
+                    <div className="navbar-end">
+                        <button className="btn">Login</button>
+                    </div>
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Sizes — five basic megamenus coexisting */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Sizes</h3>
+                { [ 'xs' , 'sm' , 'md' , 'lg' , 'xl' ].map( ( size ) => (
+                    <Megamenu
+                        key={ size }
+                        size={ size }
+                        items={ plainItems }
+                        className="w-full p-2 border border-base-300"
+                    />
+                ) ) }
+            </div>
+
+        </Container>
+    ) ;
+} ;
+
+export default MegamenuDemo ;

package/src/themes/effects/aura.js

@@ -0,0 +1,162 @@
+/**
+ * Aura class name generator for DaisyUI 5.6.
+ *
+ * Aura is a border light effect that wraps around any component. The effect is
+ * always animating by default ; pass `trigger: 'hover'` to only light it up on
+ * hover (the gate is built on top of the DaisyUI classes, see the component).
+ *
+ * @module themes/effects/aura
+ * @see https://daisyui.com/components/aura
+ */
+
+import cn from '../helpers/cn' ;
+
+import { LG, MD, SM, XL, XS } from '../sizing/sizes' ;
+
+// Variants (styles)
+
+/**
+ * @typedef {'dual' | 'rainbow' | 'holo' | 'gold' | 'silver' | 'glow'} AuraVariant
+ */
+
+export const DUAL    = 'dual' ;
+export const RAINBOW = 'rainbow' ;
+export const HOLO    = 'holo' ;
+export const GOLD    = 'gold' ;
+export const SILVER  = 'silver' ;
+export const GLOW    = 'glow' ;
+
+/**
+ * Valid aura variants.
+ * @type {AuraVariant[]}
+ */
+export const variants = [ DUAL, RAINBOW, HOLO, GOLD, SILVER, GLOW ] ;
+
+const variantMap =
+{
+    [ DUAL    ] : 'aura-dual',
+    [ RAINBOW ] : 'aura-rainbow',
+    [ HOLO    ] : 'aura-holo',
+    [ GOLD    ] : 'aura-gold',
+    [ SILVER  ] : 'aura-silver',
+    [ GLOW    ] : 'aura-glow',
+} ;
+
+// Sizes
+
+/**
+ * @typedef {'xs' | 'sm' | 'md' | 'lg' | 'xl'} AuraSize
+ */
+
+/**
+ * Valid aura sizes.
+ * @type {AuraSize[]}
+ */
+export const sizes = [ XS, SM, MD, LG, XL ] ;
+
+const sizeMap =
+{
+    [ XS ] : 'aura-xs',
+    [ SM ] : 'aura-sm',
+    [ MD ] : 'aura-md',
+    [ LG ] : 'aura-lg',
+    [ XL ] : 'aura-xl',
+} ;
+
+// Triggers
+
+/**
+ * @typedef {'always' | 'hover'} AuraTrigger
+ */
+
+export const ALWAYS = 'always' ;
+export const HOVER  = 'hover' ;
+
+/**
+ * Valid aura triggers.
+ * @type {AuraTrigger[]}
+ */
+export const triggers = [ ALWAYS, HOVER ] ;
+
+export const AURA = 'aura' ;
+
+/**
+ * Pauses the rotation animation (rest state of the `hover` trigger).
+ * @type {string}
+ */
+export const AURA_PAUSED = '[animation-play-state:paused]' ;
+
+/**
+ * Resumes the rotation animation on hover (`hover` trigger).
+ * @type {string}
+ */
+export const AURA_RUNNING = 'hover:[animation-play-state:running]' ;
+
+/**
+ * Generates aura class names for DaisyUI 5.6.
+ *
+ * Colour (`text-*`) and background (`bg-*`) tints are NOT handled here — they
+ * are resolved from the colour constants by the `<Aura>` component, because the
+ * `hover` trigger needs to gate the colour on `currentColor`.
+ *
+ * The animation duration is NOT a class : it is driven by the `--tw-duration`
+ * CSS variable, applied as an inline style by the `<Aura>` component (a dynamic
+ * `duration-[Nms]` class would never be generated by Tailwind's JIT scanner).
+ *
+ * @param {Object} [props]
+ * @param {Object} [props.after] - Class overrides applied after.
+ * @param {Object} [props.before] - Class definitions applied before.
+ * @param {string} [props.beforeClassName] - CSS string prepended.
+ * @param {string} [props.className] - CSS string appended.
+ * @param {AuraSize} [props.size='md'] - Aura size (xs, sm, md, lg, xl).
+ * @param {AuraTrigger} [props.trigger='always'] - 'always' (default) or 'hover'.
+ * @param {AuraVariant} [props.variant] - Aura style variant.
+ *
+ * @returns {string} Combined class names.
+ *
+ * @example
+ * ```js
+ * getAuraClasses({ variant: 'rainbow', size: 'lg' }) ;
+ * // → 'aura aura-rainbow aura-lg'
+ *
+ * getAuraClasses({ trigger: 'hover' }) ;
+ * // → 'aura aura-md [animation-play-state:paused] hover:[animation-play-state:running]'
+ * ```
+ */
+export const getAuraClasses =
+({
+    after,
+    before,
+    beforeClassName,
+    className,
+    size = MD,
+    trigger = ALWAYS,
+    variant,
+}
+= {} ) => cn
+(
+    beforeClassName,
+    {
+        ...before,
+
+        [ AURA ] : true,
+
+        ...!!variantMap[variant] && { [ variantMap[variant] ] : true },
+        ...!!sizeMap[size]       && { [ sizeMap[size]       ] : true },
+        ...trigger === HOVER     && { [ AURA_PAUSED ] : true, [ AURA_RUNNING ] : true },
+
+        ...after,
+    },
+    className,
+) ;
+
+export default getAuraClasses ;
+
+/* Tailwind CSS safe list
+   `trigger="hover"` restores the light colour on hover via `hover:text-*`, which
+   is built at runtime — list the supported colours here so the JIT emits them.
+| hover:text-primary | hover:text-secondary    | hover:text-accent  |
+| hover:text-neutral | hover:text-info         | hover:text-success |
+| hover:text-warning | hover:text-error        | hover:text-inherit |
+| hover:text-base-content |
+*/

package/src/themes/navigation/megamenu.js

@@ -0,0 +1,128 @@
+/**
+ * Megamenu class name generator for DaisyUI 5.6.
+ *
+ * Megamenu is a large horizontal menu where each item opens a popover. It is
+ * built on the native HTML popover API and CSS anchor positioning, so the
+ * anchoring is handled entirely by DaisyUI's CSS — this generator only composes
+ * the class modifiers (width, size, vertical).
+ *
+ * @module themes/navigation/megamenu
+ * @see https://daisyui.com/components/megamenu
+ *
+ * @safelist
+ * ## Sizes
+ * - megamenu-xs | megamenu-sm | megamenu-md | megamenu-lg | megamenu-xl
+ * ## Width
+ * - megamenu-wide | megamenu-full
+ * ## Direction
+ * - megamenu-vertical | max-sm:megamenu-vertical
+ */
+
+import cn from '../helpers/cn' ;
+
+import { LG, MD, SM, XL, XS } from '../sizing/sizes' ;
+
+export const MEGAMENU        = 'megamenu' ;
+export const MEGAMENU_ACTIVE = 'megamenu-active' ;
+
+// Width
+
+/**
+ * @typedef {'wide' | 'full'} MegamenuWidth
+ */
+
+export const WIDE = 'wide' ;
+export const FULL = 'full' ;
+
+/**
+ * Valid megamenu width modifiers.
+ * @type {MegamenuWidth[]}
+ */
+export const widths = [ WIDE, FULL ] ;
+
+const widthMap =
+{
+    [ WIDE ] : 'megamenu-wide',
+    [ FULL ] : 'megamenu-full',
+} ;
+
+// Sizes
+
+/**
+ * @typedef {'xs' | 'sm' | 'md' | 'lg' | 'xl'} MegamenuSize
+ */
+
+/**
+ * Valid megamenu sizes.
+ * @type {MegamenuSize[]}
+ */
+export const sizes = [ XS, SM, MD, LG, XL ] ;
+
+const sizeMap =
+{
+    [ XS ] : 'megamenu-xs',
+    [ SM ] : 'megamenu-sm',
+    [ MD ] : 'megamenu-md',
+    [ LG ] : 'megamenu-lg',
+    [ XL ] : 'megamenu-xl',
+} ;
+
+// Direction
+
+export const MEGAMENU_VERTICAL        = 'megamenu-vertical' ;
+export const MEGAMENU_VERTICAL_MAX_SM = 'max-sm:megamenu-vertical' ;
+
+/**
+ * Generates megamenu container class names for DaisyUI 5.6.
+ *
+ * @param {Object} [props]
+ * @param {Object} [props.after] - Class overrides applied after.
+ * @param {Object} [props.before] - Class definitions applied before.
+ * @param {string} [props.beforeClassName] - CSS string prepended.
+ * @param {string} [props.className] - CSS string appended.
+ * @param {boolean} [props.responsive=false] - Show vertically on small screens (`max-sm:megamenu-vertical`).
+ * @param {MegamenuSize} [props.size='md'] - Megamenu size (xs, sm, md, lg, xl).
+ * @param {boolean} [props.vertical=false] - Always vertical (`megamenu-vertical`).
+ * @param {MegamenuWidth} [props.width] - Width modifier ('wide' | 'full').
+ *
+ * @returns {string} Combined class names.
+ *
+ * @example
+ * ```js
+ * getMegamenuClasses({ width: 'wide', size: 'lg' }) ;
+ * // → 'megamenu megamenu-wide megamenu-lg'
+ *
+ * getMegamenuClasses({ responsive: true }) ;
+ * // → 'megamenu megamenu-md max-sm:megamenu-vertical'
+ * ```
+ */
+export const getMegamenuClasses =
+({
+    after,
+    before,
+    beforeClassName,
+    className,
+    responsive = false,
+    size = MD,
+    vertical = false,
+    width,
+}
+= {} ) => cn
+(
+    beforeClassName,
+    MEGAMENU,
+    {
+        ...before,
+
+        ...!!widthMap[width] && { [ widthMap[width] ] : true },
+        ...!!sizeMap[size]   && { [ sizeMap[size]   ] : true },
+
+        [ MEGAMENU_VERTICAL        ] : vertical   === true,
+        [ MEGAMENU_VERTICAL_MAX_SM ] : responsive === true,
+
+        ...after,
+    },
+    className,
+) ;
+
+export default getMegamenuClasses ;

package/src/version.js

@@ -1,3 +1,3 @@
-const version = "0.2.3" ;
+const version = "0.2.4" ;
 
 export default version ;