oihana-next-ui 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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";
@@ -46,6 +48,7 @@ import { FaSpinner              as SpinnerIcon        } from "react-icons/fa";
 import { GrStatusPlaceholder    as StatusIcon         } from "react-icons/gr";
 import { BsTextareaResize       as TextAreaIcon       } from "react-icons/bs" ;
 import { TiMessages             as ToastIcon          } from "react-icons/ti" ;
+import { LuMessageSquareText    as TooltipIcon        } from "react-icons/lu";
 import { FaToggleOn             as ToggleIcon         } from "react-icons/fa";
 
 const navigation =
@@ -91,6 +94,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 +114,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'   } ,
                 ]
             } ,
             {
@@ -123,6 +128,7 @@ const navigation =
                     { id : 'radialProgress' , type : LINK  , Icon : RadialProgressIcon , path  : '/lab/radialProgress' } ,
                     { id : 'spinners'       , type : LINK  , Icon : SpinnerIcon        , path  : '/lab/spinners'       } ,
                     { id : 'toasts'         , type : LINK  , Icon : ToastIcon          , path  : '/lab/toasts'         } ,
+                    { id : 'tooltips'       , type : LINK  , Icon : TooltipIcon        , path  : '/lab/tooltips'       } ,
                 ]
             } ,
             {

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' ,
@@ -33,6 +34,7 @@ const navigation =
                 radialProgress : 'Radial Progress' ,
                 spinners       : 'Spinners' ,
                 toasts         : 'Toasts' ,
+                tooltips       : 'Tooltips' ,
             form         : 'Formulaire' ,
                 checkboxes     : 'Cases à cocher' ,
                 inputs         : 'Champs de saisie' ,
@@ -45,6 +47,7 @@ const navigation =
             navigation   : 'Navigation' ,
                 lists          : 'Listes' ,
                 menus          : 'Menus' ,
+                megamenu       : 'Megamenu' ,
                 pagination     : 'Pagination' ,
             tests        : 'Tests' ,
 
@@ -59,6 +62,7 @@ const navigation =
             display      : 'Display' ,
                 avatars        : 'Avatars' ,
                 badges         : 'Badges' ,
+                effects        : 'Effects' ,
                 headers        : 'Headers' ,
                 images         : 'Images' ,
                 markdown       : 'Markdown' ,
@@ -82,6 +86,7 @@ const navigation =
                 radialProgress : 'Radial Progress' ,
                 spinners       : 'Spinners' ,
                 toasts         : 'Toasts' ,
+                tooltips       : 'Tooltips' ,
             form         : 'Form' ,
                 checkboxes     : 'Checkboxes' ,
                 inputs         : 'Inputs' ,
@@ -94,6 +99,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/app/lab/@tabs/tooltips/page.js

@@ -0,0 +1,29 @@
+'use client' ;
+
+import TooltipDemo from '@/demo/tooltips/TooltipDemo' ;
+import Container   from '@/display/Container' ;
+import Page        from '@/display/Page' ;
+
+/**
+ * Tooltip showcase page.
+ *
+ * @param {Object} props
+ */
+const TooltipsShowcase = () =>
+{
+    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">
+                    Tooltip Component
+                </h1>
+            </Container>
+
+            <TooltipDemo />
+
+        </Page>
+    ) ;
+} ;
+
+export default TooltipsShowcase ;

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/Tooltip.jsx

@@ -45,6 +45,7 @@ import getTooltipClassNames from '../themes/components/tooltip' ;
 
 /**
  * @param {Object} props
+ * @param {import('../themes/components/tooltip').TooltipAlignment} [props.align] - Tooltip alignment ('start' | 'center' | 'end').
  * @param {React.ElementType} [props.as] - Root element type.
  * @param {React.ReactNode} [props.children] - Tooltip trigger content.
  * @param {string} [props.className] - Additional class name.
@@ -57,6 +58,7 @@ import getTooltipClassNames from '../themes/components/tooltip' ;
  */
 const Tooltip =
 ({
+    align ,
     as ,
     children ,
     className ,
@@ -73,7 +75,7 @@ const Tooltip =
 
     const Component = as || 'div' ;
 
-    const classNames = getTooltipClassNames({ className , color , open , position }) ;
+    const classNames = getTooltipClassNames({ align , className , color , open , position }) ;
 
     return (
         <Component

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/components/menus/MenuLink.jsx

@@ -75,7 +75,7 @@ const MenuLink =
                 <Tooltip
                     className={ tooltipClassName }
                     color={ tooltipColor }
-                    label={ tooltip }
+                    tip={ tooltip }
                     position={ tooltipPosition }
                     show={ showTooltip && !disabled }
                 >

package/src/components/ranges/Range.jsx

@@ -13,6 +13,8 @@ const Range =
     error,
     color,
     size = 'md',
+    orientation = 'horizontal',
+    height = 'h-64',
     min = 0,
     max = 100,
     step = 1,
@@ -33,6 +35,8 @@ const Range =
     ...rangeProps
 }) =>
 {
+    const isVertical = orientation === 'vertical' ;
+
     const isControlled = controlledValue !== undefined ;
     const [ internalValue, setInternalValue ] = useState( defaultValue ?? min ) ;
 
@@ -54,12 +58,13 @@ const Range =
 
     const rangeClasses = getRangeClasses({
         color: hasError ? 'error' : color,
+        orientation,
         size,
         className: rangeClassName,
     }) ;
 
-    // Generate markers
-    const markers = showMarkers ? (() =>
+    // Generate markers (horizontal only — vertical markers are not supported yet)
+    const markers = ( showMarkers && !isVertical ) ? (() =>
     {
         const count = Math.floor(( max - min ) / step ) + 1 ;
         const items = [] ;
@@ -74,8 +79,8 @@ const Range =
         return items ;
     })() : null ;
 
-    // Generate marker labels
-    const labels = markerLabels ? markerLabels.map(( label, i ) => (
+    // Generate marker labels (horizontal only)
+    const labels = ( markerLabels && !isVertical ) ? markerLabels.map(( label, i ) => (
         <span key={ i } className="text-xs">{ label }</span>
     )) : null ;
 
@@ -119,12 +124,12 @@ const Range =
                     </span>
                 )}
 
-                <div className="flex-1 max-w-full">
+                <div className={ cn( isVertical ? height : 'flex-1 max-w-full' ) }>
                     <input
                         type="range"
                         id={ id }
                         name={ name }
-                        className={ cn( rangeClasses, 'w-full' ) }
+                        className={ cn( rangeClasses, !isVertical && 'w-full' ) }
                         min={ min }
                         max={ max }
                         step={ step }

package/src/components/rating/Rating.jsx

@@ -41,7 +41,7 @@ import cn             from '../../themes/helpers/cn' ;
  * @param {number} [props.defaultValue] - Default value for uncontrolled mode
  * @param {Function} [props.onChange] - Change handler (value) => void
  * @param {number} [props.count=5] - Number of stars/items
- * @param {import('../../themes/components/rating').RatingSize} [props.size='md'] - Size: 'xs', 'sm', 'md', 'lg', 'xl'
+ * @param {import('../../themes/components/rating').RatingSize | import('../../themes/components/rating').ResponsiveRatingSize} [props.size='md'] - Size: scalar ('xs'…'xl') or responsive object (e.g. `{ xs: 'sm', md: 'lg' }`)
  * @param {import('../../themes/components/mask').MaskShape} [props.shape='star-2'] - Mask shape
  * @param {import('../../themes/colors/backgroundColor').BackgroundColorValue} [props.color] - Background color
  * @param {boolean} [props.half=false] - Enable half-star ratings

package/src/contexts/navigation/context.js

@@ -17,6 +17,9 @@ import { createContext } from 'react' ;
  *   priority chain: persisted → auto(pathname) → item.defaultOpen → defaultMode.
  * @property {string | null} pathname - Current pathname, captured by the
  *   provider so consumers (e.g. `Collapse`) don't have to read it again.
+ * @property {string | null} activePath - Longest LINK path matching the
+ *   current route (the single "winning" link). `null` when nothing
+ *   matches. Consumed by `Link` to decide its active state.
  */
 
 /**

package/src/contexts/navigation/helpers/containsActivePath.js

@@ -6,8 +6,9 @@
  * @module contexts/navigation/helpers/containsActivePath
  */
 
-import notEmpty   from 'vegas-js-core/src/strings/notEmpty' ;
-import startsWith from 'vegas-js-core/src/strings/startsWith' ;
+import notEmpty from 'vegas-js-core/src/strings/notEmpty' ;
+
+import isPathMatch from './isPathMatch' ;
 
 /**
  * Walks the `items` tree under the given navigation node and returns
@@ -38,7 +39,7 @@ const containsActivePath = ( item , pathname ) =>
         return false ;
     }
 
-    if ( notEmpty( item.path ) && startsWith( pathname , item.path ) )
+    if ( notEmpty( item.path ) && isPathMatch( pathname , item.path ) )
     {
         return true ;
     }