oihana-next-ui 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.2.4",
+  "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": {

package/src/@configs/navigation.js

@@ -48,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 =
@@ -127,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

@@ -34,6 +34,7 @@ const navigation =
                 radialProgress : 'Radial Progress' ,
                 spinners       : 'Spinners' ,
                 toasts         : 'Toasts' ,
+                tooltips       : 'Tooltips' ,
             form         : 'Formulaire' ,
                 checkboxes     : 'Cases à cocher' ,
                 inputs         : 'Champs de saisie' ,
@@ -85,6 +86,7 @@ const navigation =
                 radialProgress : 'Radial Progress' ,
                 spinners       : 'Spinners' ,
                 toasts         : 'Toasts' ,
+                tooltips       : 'Tooltips' ,
             form         : 'Form' ,
                 checkboxes     : 'Checkboxes' ,
                 inputs         : 'Inputs' ,

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/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/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 ;
     }

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

@@ -0,0 +1,69 @@
+/**
+ * Resolves the single "winning" link path for the current pathname :
+ * among every `LINK` whose `path` matches (segment-aware), the LONGEST
+ * one wins. This is what disambiguates a destination nested under another
+ * — `/me/customers` wins over `/me`, so only « Mes clients » lights up,
+ * not « Mon profil ». A profile sub-page with no dedicated link
+ * (`/me/sessions`) has only `/me` as a match, so `/me` stays the winner.
+ *
+ * Pure, no React. Walks `COLLAPSE` children too (their own `path` is
+ * undefined and simply skipped). Returns `null` when nothing matches.
+ *
+ * @module contexts/navigation/helpers/findActiveLinkPath
+ *
+ * @param {Object[]} [items]    - Navigation tree (the provider's internal array).
+ * @param {string}   [pathname] - Current pathname.
+ * @returns {string|null} The longest matching link path, or `null`.
+ *
+ * @example
+ * ```js
+ * findActiveLinkPath(
+ *     [ { path: '/me' } , { path: '/me/customers' } ] ,
+ *     '/me/customers/137'
+ * ) ; // → '/me/customers'
+ * ```
+ */
+
+import notEmpty from 'vegas-js-core/src/strings/notEmpty' ;
+
+import isPathMatch from './isPathMatch' ;
+
+const findActiveLinkPath = ( items , pathname ) =>
+{
+    if ( !Array.isArray( items ) || items.length === 0 || !notEmpty( pathname ) )
+    {
+        return null ;
+    }
+
+    let best = null ;
+
+    const walk = list =>
+    {
+        for ( const item of list )
+        {
+            if ( !item )
+            {
+                continue ;
+            }
+
+            if ( notEmpty( item.path ) && isPathMatch( pathname , item.path ) )
+            {
+                if ( best === null || item.path.length > best.length )
+                {
+                    best = item.path ;
+                }
+            }
+
+            if ( Array.isArray( item.items ) && item.items.length > 0 )
+            {
+                walk( item.items ) ;
+            }
+        }
+    } ;
+
+    walk( items ) ;
+
+    return best ;
+} ;
+
+export default findActiveLinkPath ;

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

@@ -0,0 +1,51 @@
+/**
+ * Segment-aware path matcher : tells whether a navigation `path` covers
+ * the current `pathname`.
+ *
+ * A path matches when the pathname is exactly it, or a descendant of it
+ * on a segment boundary — so `/me` matches `/me` and `/me/sessions` but
+ * NOT `/menu`. The root `'/'` only ever matches `'/'` (it would otherwise
+ * shadow every route).
+ *
+ * Single source of truth shared by `findActiveLinkPath` (link highlight)
+ * and `containsActivePath` (collapse open / active-ancestor), so both
+ * surfaces agree on what "active" means.
+ *
+ * @module contexts/navigation/helpers/isPathMatch
+ *
+ * @param {string} [pathname] - Current pathname (e.g. from `usePathname`).
+ * @param {string} [path]     - A navigation link `path`.
+ * @returns {boolean}
+ *
+ * @example
+ * ```js
+ * isPathMatch( '/me/sessions' , '/me' ) ;        // → true
+ * isPathMatch( '/me/customers' , '/me' ) ;       // → true  (use longest-match to disambiguate)
+ * isPathMatch( '/menu' , '/me' ) ;               // → false (segment boundary)
+ * isPathMatch( '/anything' , '/' ) ;             // → false (root matches only '/')
+ * ```
+ */
+
+import notEmpty from 'vegas-js-core/src/strings/notEmpty' ;
+
+const isPathMatch = ( pathname , path ) =>
+{
+    if ( !notEmpty( pathname ) || !notEmpty( path ) )
+    {
+        return false ;
+    }
+
+    if ( pathname === path )
+    {
+        return true ;
+    }
+
+    if ( path === '/' )
+    {
+        return false ;
+    }
+
+    return pathname.startsWith( path + '/' ) ;
+} ;
+
+export default isPathMatch ;

package/src/contexts/navigation/provider.js

@@ -6,18 +6,24 @@ import { usePathname } from 'next/navigation' ;
 
 import useI18n from '../locale/useI18n' ;
 
-import {
+import
+{
     loadCollapseState ,
     persistCollapseState ,
-} from './helpers/collapseStorage' ;
+}
+from './helpers/collapseStorage' ;
+
 import {
-    COLLAPSE_MODES ,
-    COLLAPSE_MODE_VALUES ,
+    COLLAPSE_MODES        ,
+    COLLAPSE_MODE_VALUES  ,
     DEFAULT_COLLAPSE_MODE ,
-} from './helpers/constants' ;
+}
+from './helpers/constants' ;
+
 import findActiveAncestorIds from './helpers/findActiveAncestorIds' ;
-import mapI18nItem from './helpers/mapI18nItem' ;
-import resolveCollapseOpen from './helpers/resolveCollapseOpen' ;
+import findActiveLinkPath    from './helpers/findActiveLinkPath' ;
+import mapI18nItem           from './helpers/mapI18nItem' ;
+import resolveCollapseOpen   from './helpers/resolveCollapseOpen' ;
 
 import NavigationContext from './context' ;
 
@@ -72,6 +78,15 @@ const NavigationProvider =
                      ? _navigation.map( ( item ) => mapI18nItem( item , locale ) )
                      : null ;
 
+    // The single active link path: longest LINK path matching the
+    // current route. Drives the active-link highlight (see Link.jsx) so
+    // a nested destination (/me/customers) deactivates its parent (/me).
+    const activePath = useMemo
+    (
+        () => findActiveLinkPath( _navigation , pathname ) ,
+        [ _navigation , pathname ] ,
+    ) ;
+
     // Collapse state is initialised empty so the first server render is
     // deterministic (no localStorage on the server). Hydration happens in
     // the effect below, after mount, which never causes a hydration
@@ -188,15 +203,16 @@ const NavigationProvider =
 
     const value = useMemo( () =>
     ({
-        navigation ,
-        setNavigation ,
-        defaultMode ,
+        activePath ,
         collapses ,
-        setCollapse ,
+        defaultMode ,
         getCollapseOpen ,
+        navigation ,
         pathname ,
+        setNavigation ,
+        setCollapse ,
     })
-    , [ navigation , defaultMode , collapses , setCollapse , getCollapseOpen , pathname ] ) ;
+    , [ activePath , defaultMode , collapses , getCollapseOpen , navigation , pathname , setCollapse ] ) ;
 
     return (
         <NavigationContext value={ value }>

package/src/demo/ranges/RangeDemo.jsx

@@ -452,6 +452,34 @@ const RangeDemo = () =>
                 </div>
             </div>
 
+            <Divider />
+
+            {/* Vertical (daisyUI 5.6) */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Vertical</h3>
+                <p className="text-sm text-base-content/70">
+                    <code>orientation="vertical"</code> — height adjustable via the <code>height</code> prop
+                    (default <code>h-64</code>). Markers are not rendered in vertical mode.
+                </p>
+
+                <div className="flex items-end gap-10">
+                    <Range orientation="vertical" defaultValue={ 40 } />
+                    <Range orientation="vertical" defaultValue={ 60 } color="primary" />
+                    <Range orientation="vertical" defaultValue={ 30 } color="secondary" size="lg" />
+                    <Range orientation="vertical" defaultValue={ 80 } color="accent" size="sm" height="h-40" />
+
+                    <Range
+                        label="Volume"
+                        orientation="vertical"
+                        defaultValue={ 55 }
+                        color="success"
+                        showValue
+                        valuePosition="bottom"
+                        formatValue={ (v) => `${v}%` }
+                    />
+                </div>
+            </div>
+
         </Container>
     ) ;
 } ;

package/src/demo/rating/RatingDemo.jsx

@@ -673,6 +673,23 @@ const RatingDemo = () =>
                 </div>
             </div>
 
+            <Divider />
+
+            {/* Responsive size (daisyUI 5.6) */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Responsive size</h3>
+                <p className="text-sm text-base-content/70">
+                    <code>size</code> accepts a breakpoint→size object. Resize the window:
+                    this rating grows <code>sm → md → lg → xl</code> across breakpoints.
+                </p>
+                <Rating
+                    name="rating-responsive"
+                    defaultValue={ 3 }
+                    color="warning"
+                    size={ { xs: 'sm', md: 'md', lg: 'lg', xl: 'xl' } }
+                />
+            </div>
+
         </Container>
     ) ;
 } ;

package/src/demo/tooltips/TooltipDemo.jsx

@@ -0,0 +1,100 @@
+'use client' ;
+
+import Container from '@/display/Container' ;
+import Divider   from '@/components/Divider' ;
+import Tooltip   from '@/components/Tooltip' ;
+
+/**
+ * Tooltip showcase — positions, the new start/center/end alignments, colours,
+ * forced-open state and rich content.
+ */
+const TooltipDemo = () =>
+{
+    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">Tooltip</h2>
+
+            {/* Positions */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Positions</h3>
+                <div className="flex flex-wrap items-center gap-6 p-6">
+                    <Tooltip tip="Top"    position="top"><button className="btn">Top</button></Tooltip>
+                    <Tooltip tip="Bottom" position="bottom"><button className="btn">Bottom</button></Tooltip>
+                    <Tooltip tip="Left"   position="left"><button className="btn">Left</button></Tooltip>
+                    <Tooltip tip="Right"  position="right"><button className="btn">Right</button></Tooltip>
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Alignments (new in 5.6) */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Alignments (start / center / end)</h3>
+                <p className="text-sm text-base-content/70">
+                    Independent from the position. Shown forced-open on a wide trigger so the offset is visible.
+                </p>
+
+                <div className="flex flex-col gap-12 pt-16 pb-4">
+                    <div className="flex flex-wrap gap-12">
+                        <Tooltip tip="Aligned to start" position="top" align="start" color="primary" open>
+                            <button className="btn w-64">top · start</button>
+                        </Tooltip>
+                        <Tooltip tip="Centered" position="top" align="center" color="primary" open>
+                            <button className="btn w-64">top · center</button>
+                        </Tooltip>
+                        <Tooltip tip="Aligned to end" position="top" align="end" color="primary" open>
+                            <button className="btn w-64">top · end</button>
+                        </Tooltip>
+                    </div>
+                </div>
+
+                <div className="flex flex-col gap-12 pb-16 pt-4">
+                    <div className="flex flex-wrap gap-12">
+                        <Tooltip tip="Aligned to start" position="bottom" align="start" color="secondary" open>
+                            <button className="btn w-64">bottom · start</button>
+                        </Tooltip>
+                        <Tooltip tip="Centered" position="bottom" align="center" color="secondary" open>
+                            <button className="btn w-64">bottom · center</button>
+                        </Tooltip>
+                        <Tooltip tip="Aligned to end" position="bottom" align="end" color="secondary" open>
+                            <button className="btn w-64">bottom · end</button>
+                        </Tooltip>
+                    </div>
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Colours */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Colours</h3>
+                <div className="flex flex-wrap items-center gap-6 p-6">
+                    { [ 'primary' , 'secondary' , 'accent' , 'info' , 'success' , 'warning' , 'error' ].map( ( color ) => (
+                        <Tooltip key={ color } tip={ color } color={ color } position="top">
+                            <button className="btn">{ color }</button>
+                        </Tooltip>
+                    ) ) }
+                </div>
+            </div>
+
+            <Divider />
+
+            {/* Rich content */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold">Rich content</h3>
+                <div className="flex flex-wrap items-center gap-6 p-6">
+                    <Tooltip position="top" color="neutral">
+                        <button className="btn">Hover me</button>
+                        <div className="tooltip-content">
+                            <p className="text-sm">Rich <strong>HTML</strong> content</p>
+                        </div>
+                    </Tooltip>
+                </div>
+            </div>
+
+        </Container>
+    ) ;
+} ;
+
+export default TooltipDemo ;

package/src/display/ui/navigation/Link.jsx

@@ -4,18 +4,22 @@
  * @module components/menu/Link
  */
 
+import { use } from 'react' ;
+
 import NextLink from 'next/link' ;
 
 import { usePathname } from 'next/navigation' ;
 
 import isObject   from 'vegas-js-core/src/isPlainObject' ;
 import notEmpty   from 'vegas-js-core/src/strings/notEmpty' ;
-import startsWith from 'vegas-js-core/src/strings/startsWith' ;
 
 import cn from '../../../themes/helpers/cn' ;
 
 import Badge from '../../../components/Badge' ;
 
+import NavigationContext from '../../../contexts/navigation/context' ;
+import isPathMatch       from '../../../contexts/navigation/helpers/isPathMatch' ;
+
 /**
  * Returns a Badge element from a string or object definition.
  *
@@ -106,7 +110,13 @@ const Link =
 {
     const pathname = usePathname() ;
 
-    const active = startsWith( pathname , path ) ;
+    // Defensive read: a Link may be rendered without a NavigationProvider
+    // (legacy / standalone). With a provider, the single winning path is
+    // pre-computed (longest match) → exact equality. Without, fall back to
+    // a local segment-aware match so a lone Link still highlights itself.
+    const navigation = use( NavigationContext ) ;
+
+    const active = navigation ? path === navigation.activePath : isPathMatch( pathname , path ) ;
 
     const classNames = cn
     (

package/src/themes/components/range.js

@@ -20,6 +20,8 @@ import {
     WARNING,
 } from '../colors' ;
 
+import { HORIZONTAL, VERTICAL } from '../enums/orientations' ;
+
 /**
  * Valid range colors.
  * @type {string[]}
@@ -70,6 +72,18 @@ const sizeMap =
     [ XS ] : 'range-xs',
 } ;
 
+/**
+ * Valid range orientations.
+ * @type {string[]}
+ */
+export const orientations = [ HORIZONTAL, VERTICAL ] ;
+
+// Horizontal is the default (no modifier class) ; only vertical adds one.
+const orientationMap =
+{
+    [ VERTICAL ] : 'range-vertical',
+} ;
+
 export const RANGE = 'range' ;
 
 /**
@@ -81,6 +95,7 @@ export const RANGE = 'range' ;
  * @param {string} [props.beforeClassName] - CSS string prepended.
  * @param {string} [props.className] - CSS string appended.
  * @param {string} [props.color] - Range color variant.
+ * @param {string} [props.orientation='horizontal'] - Range orientation ('horizontal' | 'vertical').
  * @param {string} [props.size='md'] - Range size (xs, sm, md, lg, xl).
  *
  * @returns {string} Combined class names.
@@ -90,8 +105,8 @@ export const RANGE = 'range' ;
  * getRangeClasses({ color: 'primary', size: 'lg' }) ;
  * // → 'range range-primary range-lg'
  *
- * getRangeClasses({ color: 'success' }) ;
- * // → 'range range-success range-md'
+ * getRangeClasses({ orientation: 'vertical', color: 'success' }) ;
+ * // → 'range range-vertical range-success range-md'
  * ```
  */
 export const getRangeClasses =
@@ -101,6 +116,7 @@ export const getRangeClasses =
     beforeClassName,
     className,
     color,
+    orientation = HORIZONTAL,
     size = MD,
 }
 = {} ) => cn
@@ -111,8 +127,9 @@ export const getRangeClasses =
 
         [ RANGE ] : true,
 
-        ...!!colorMap[color] && { [ colorMap[color] ] : true },
-        ...!!sizeMap[size]   && { [ sizeMap[size]   ] : true },
+        ...!!orientationMap[orientation] && { [ orientationMap[orientation] ] : true },
+        ...!!colorMap[color]             && { [ colorMap[color] ] : true },
+        ...!!sizeMap[size]               && { [ sizeMap[size]   ] : true },
 
         ...after,
     },

package/src/themes/components/rating.js

@@ -3,15 +3,35 @@
  *
  * @module themes/components/rating
  * @see https://daisyui.com/components/rating
+ *
+ * @safelist
+ * ## Sizes (responsive — daisyUI 5.6)
+ * - rating-xs | rating-sm | rating-md | rating-lg | rating-xl
+ * - sm:rating-xs | sm:rating-sm | sm:rating-md | sm:rating-lg | sm:rating-xl
+ * - md:rating-xs | md:rating-sm | md:rating-md | md:rating-lg | md:rating-xl
+ * - lg:rating-xs | lg:rating-sm | lg:rating-md | lg:rating-lg | lg:rating-xl
+ * - xl:rating-xs | xl:rating-sm | xl:rating-md | xl:rating-lg | xl:rating-xl
+ * - 2xl:rating-xs | 2xl:rating-sm | 2xl:rating-md | 2xl:rating-lg | 2xl:rating-xl
  */
 
 import cn from '../helpers/cn' ;
+
+import getResponsiveDefinition , { create } from '../helpers/getResponsiveDefinition' ;
+
 import { LG, MD, SM, XL, XS } from '../sizing/sizes' ;
 
 // Sizes
 
 /**
  * @typedef {'xs' | 'sm' | 'md' | 'lg' | 'xl'} RatingSize
+ *
+ * @typedef {Object} ResponsiveRatingSize
+ * @property {RatingSize} [xs] - Default size (no breakpoint prefix).
+ * @property {RatingSize} [sm]
+ * @property {RatingSize} [md]
+ * @property {RatingSize} [lg]
+ * @property {RatingSize} [xl]
+ * @property {RatingSize} [xxl]
  */
 
 /**
@@ -20,14 +40,18 @@ import { LG, MD, SM, XL, XS } from '../sizing/sizes' ;
  */
 export const sizes = [ XS, SM, MD, LG, XL ] ;
 
-const sizeMap =
-{
-    [ XS ] : 'rating-xs',
-    [ SM ] : 'rating-sm',
-    [ MD ] : 'rating-md',
-    [ LG ] : 'rating-lg',
-    [ XL ] : 'rating-xl',
-} ;
+/**
+ * Generates responsive rating size classes (daisyUI 5.6).
+ *
+ * Accepts a scalar size or a breakpoint→size object ; `xs` is the prefix-less
+ * default. Responsive classes are built at runtime, hence the `@safelist` above.
+ *
+ * @type {Function}
+ */
+export const getRatingSize = getResponsiveDefinition(
+    create( 'rating-' ) ,
+    value => sizes.includes( value )
+) ;
 
 export const RATING        = 'rating' ;
 export const RATING_HALF   = 'rating-half' ;
@@ -42,7 +66,7 @@ export const RATING_HIDDEN = 'rating-hidden' ;
  * @param {string} [props.beforeClassName] - ClassName to prepend.
  * @param {string} [props.className] - ClassName to append.
  * @param {boolean} [props.half=false] - Enable half-star ratings.
- * @param {RatingSize} [props.size='md'] - Rating size.
+ * @param {RatingSize | ResponsiveRatingSize} [props.size='md'] - Rating size (scalar or responsive object).
  *
  * @returns {string} The rating className expression.
  *
@@ -54,6 +78,9 @@ export const RATING_HIDDEN = 'rating-hidden' ;
  * getRatingClasses({ size: 'lg' }) ;
  * // → 'rating rating-lg'
  *
+ * getRatingClasses({ size: { xs: 'sm', md: 'lg', xl: 'xl' } }) ;
+ * // → 'rating rating-sm md:rating-lg xl:rating-xl'
+ *
  * getRatingClasses({ half: true, size: 'xl' }) ;
  * // → 'rating rating-half rating-xl'
  * ```
@@ -73,12 +100,12 @@ const getRatingClasses =
     {
         ...before,
 
-        ...half === true     && { [ RATING_HALF ] : true } ,
-        ...!!sizeMap[size]   && { [ sizeMap[size] ] : true } ,
+        ...half === true && { [ RATING_HALF ] : true } ,
+        ...!!size        && getRatingSize( size ) ,
 
         ...after,
     },
     className,
 ) ;
 
-export default getRatingClasses ;
+export default getRatingClasses ;

package/src/themes/components/tooltip.js

@@ -19,6 +19,8 @@ import {
 }
 from '../colors' ;
 
+import { CENTER , END , START } from '../enums/alignments' ;
+
 // Colors
 
 /**
@@ -79,6 +81,27 @@ const positionMap =
     [ TOP    ] : 'tooltip-top' ,
 } ;
 
+// Alignments
+
+export { CENTER , END , START } from '../enums/alignments' ;
+
+/**
+ * @typedef {'start' | 'center' | 'end'} TooltipAlignment
+ */
+
+/**
+ * Valid tooltip alignments (independent from the position axis).
+ * @type {TooltipAlignment[]}
+ */
+export const alignments = [ START , CENTER , END ] ;
+
+const alignmentMap =
+{
+    [ START  ] : 'tooltip-start' ,
+    [ CENTER ] : 'tooltip-center' ,
+    [ END    ] : 'tooltip-end' ,
+} ;
+
 export const TOOLTIP         = 'tooltip' ;
 export const TOOLTIP_CONTENT = 'tooltip-content' ;
 
@@ -86,6 +109,7 @@ export const TOOLTIP_CONTENT = 'tooltip-content' ;
  * Generates a DaisyUI tooltip className expression.
  *
  * @param {Object} [props]
+ * @param {TooltipAlignment} [props.align] - Tooltip alignment ('start' | 'center' | 'end').
  * @param {Object} [props.after] - Class definitions to append.
  * @param {Object} [props.before] - Class definitions to prepend.
  * @param {string} [props.beforeClassName] - ClassName to prepend.
@@ -104,12 +128,13 @@ export const TOOLTIP_CONTENT = 'tooltip-content' ;
  * getTooltipClassNames({ position: 'bottom' , color: 'error' }) ;
  * // → 'tooltip tooltip-error tooltip-bottom'
  *
- * getTooltipClassNames({ open: true , color: 'info' , position: 'left' }) ;
- * // → 'tooltip tooltip-info tooltip-left tooltip-open'
+ * getTooltipClassNames({ position: 'top' , align: 'start' , color: 'info' }) ;
+ * // → 'tooltip tooltip-info tooltip-top tooltip-start'
  * ```
  */
 const getTooltipClassNames =
 ({
+    align ,
     after ,
     before ,
     beforeClassName ,
@@ -127,6 +152,7 @@ const getTooltipClassNames =
 
         ...!!colorMap[color]         && { [colorMap[color]]         : true } ,
         ...!!positionMap[position]   && { [positionMap[position]]   : true } ,
+        ...!!alignmentMap[align]     && { [alignmentMap[align]]     : true } ,
         ...open === true             && { 'tooltip-open'            : true } ,
 
         ...after ,

package/src/version.js

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