h2o-library 1.7.1 → 2.0.0

package/dist/{css/src → esm/components/src/modal}/modal.css

@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: center;
   z-index: 500;
+  padding: 1rem;
   animation: overlayShow 0.15s ease-out;
 }
 
@@ -14,14 +15,32 @@
   border-radius: 0.5rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   max-height: 85vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
   animation: modalShow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* ── Size variants ── */
+
+.modal--sm {
+  max-width: 24rem;
+}
+.modal--md {
+  max-width: 32rem;
+}
+.modal--lg {
+  max-width: 48rem;
+}
+
+/* ── Header ── */
+
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1.5rem;
+  flex-shrink: 0;
 }
 
 .modal-title-container {
@@ -57,12 +76,27 @@
   color: hsl(var(--primary));
 }
 
+/* ── Content ── */
+
 .modal-content {
-  padding: 1.5rem;
+  padding: 0 1.5rem 1.5rem;
   overflow-y: auto;
-  max-height: calc(85vh - 4rem);
+  flex: 1;
 }
 
+/* ── Footer ── */
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem 1.5rem;
+  border-top: 1px solid hsl(var(--muted) / 0.3);
+  flex-shrink: 0;
+}
+
+/* ── Animations ── */
+
 @keyframes overlayShow {
   from {
     opacity: 0;

package/dist/esm/components/src/modal/modal.d.ts

@@ -0,0 +1,35 @@
+import "./modal.css";
+import type React from "react";
+/**
+ * Modal dialog: **controlled** by `isOpen`; optional `onClose` for overlay/Escape/close button.
+ *
+ * @property {boolean} isOpen - Renders the portal and trap when `true`.
+ * @property {() => void} [onClose] - If omitted, the header close is hidden / no-op depending on design.
+ * @property {React.ReactNode} children - Primary dialog body.
+ * @property {React.ReactNode} [footer] - Sticky action row below the body.
+ * @property {"sm"|"md"|"lg"} [size] - Max width of the card. Default `"md"`.
+ */
+interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Centered overlay card with `role="dialog"`, focus trap, and optional title/description slots.
+ *
+ * @param {object} props - `isOpen` and content slots; BEM `className` parts for theming.
+ * @returns {JSX.Element | null} The dialog portal when `isOpen`, else `null`.
+ */
+export declare const Modal: ({ isOpen, onClose, title, description, children, footer, size, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: ModalProps) => React.ReactPortal | null;
+export {};

package/dist/esm/components/src/modal/modal.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import"./modal.css";import{useRef as l,useEffect as a}from"react";import{createPortal as t}from"react-dom";import{Button as s}from"../button/button.js";import{useFocusTrap as r}from"../../../hooks/src/use-focus-trap.js";let d=0;const n=({isOpen:n,onClose:i,title:m,description:c,children:u,footer:N,size:v="md",className:h="",titleContainerClassName:p="",titleClassName:y="",descriptionClassName:f="",closeButtonClassName:C="",headerClassName:b="",contentClassName:$=""})=>{const k=l(null),w=l("modal-title-"+ ++d).current;return r(k,n),a((()=>{const e=e=>{"Escape"===e.key&&n&&i&&i()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)}),[n,i]),a((()=>{if(n){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}}),[n]),n?t(e("div",{className:"modal-overlay",children:o("div",{ref:k,role:"dialog","aria-modal":"true","aria-labelledby":m?w:void 0,className:`modal modal--${v}${h?` ${h}`:""}`,children:[o("div",{className:"modal-header"+(b?` ${b}`:""),children:[o("div",{className:"modal-title-container"+(p?` ${p}`:""),children:[m&&e("h2",{id:w,className:"modal-title"+(y?` ${y}`:""),children:m}),c&&e("p",{className:"modal-description"+(f?` ${f}`:""),children:c})]}),i&&e(s,{variant:"secondary",size:"sm",onClick:i,className:"modal-close"+(C?` ${C}`:""),"aria-label":"Close modal",icon:"close",iconOnly:!0})]}),e("div",{className:"modal-content"+($?` ${$}`:""),children:u}),N&&e("div",{className:"modal-footer",children:N})]})}),document.body):null};export{n as Modal};
+//# sourceMappingURL=modal.js.map

package/dist/{css/src → esm/components/src/month-calendar}/month-calendar.css

@@ -3,8 +3,7 @@
   max-width: 24rem;
   background-color: hsl(var(--background));
   border-radius: 0.5rem;
-  box-shadow: var(--primary-shadow);
-  border: 1px solid hsl(var(--primary-muted));
+  border: 1px solid hsl(var(--muted) / 50%);
   padding: 0 1rem;
 }
 

package/dist/esm/components/src/month-calendar/month-calendar.d.ts

@@ -0,0 +1,28 @@
+import "./month-calendar.css";
+/**
+ * Month/year picker: grid of 12 months or a decade of years; no day-level selection.
+ *
+ * @property {Date} [value] - Optional controlled selection (month precision; only month/year are meaningful).
+ * @property {(value: Date) => void} [onChange] - Fires with the first day of the selected month.
+ * @property {Date} [minDate] - Inclusive lower bound; whole months before this are disabled.
+ * @property {Date} [maxDate] - Inclusive upper bound; months after are disabled.
+ * @property {Date[]} [disabledDates] - Extra disabled calendar days; months with only disabled coverage may be limited by implementation.
+ * @property {(year: number) => void} [onYearChange] - Fires when the user navigates to another year in month view.
+ */
+interface MonthCalendarProps {
+    value?: Date;
+    onChange?: (value: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    onYearChange?: (year: number) => void;
+    className?: string;
+}
+/**
+ * Browses years and months in two views; enforces `minDate` / `maxDate` and optional `disabledDates`.
+ *
+ * @param {MonthCalendarProps} props - Value, change handler, and bounds.
+ * @returns {JSX.Element} The month/year navigation UI and grid.
+ */
+declare const MonthCalendar: ({ value, onChange, minDate, maxDate, onYearChange, className, }: MonthCalendarProps) => JSX.Element;
+export { MonthCalendar };

package/dist/esm/components/src/month-calendar/month-calendar.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import"./month-calendar.css";import n,{useState as t,useCallback as r}from"react";import{Icon as l}from"../icon/icon.js";const o=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],c=({value:e,currentYear:n,isMonthDisabled:t,onMonthSelect:r})=>a("div",{className:"month-calendar-grid","data-view":"months",children:o.map(((l,o)=>{const c=void 0!==e&&e.getFullYear()===n&&e.getMonth()===o,s=t(o);return a("button",{className:`month-calendar-item ${c?"selected":""} ${s?"disabled":""}`,onClick:()=>r(o),disabled:s,"aria-label":`${new Date(n,o,1).toLocaleString("default",{month:"long"})} ${n}`,children:l},l)}))}),s=({value:e,startYear:n,isYearDisabled:t,onYearSelect:r})=>{const l=Array.from({length:10},((e,a)=>n+a));return a("div",{className:"month-calendar-grid","data-view":"years",children:l.map((n=>{const l=void 0!==e&&e.getFullYear()===n,o=t(n);return a("button",{className:`month-calendar-item ${l?"selected":""} ${o?"disabled":""}`,onClick:()=>r(n),disabled:o,"aria-label":String(n),children:n},n)}))})},i=({value:o,onChange:i,minDate:d,maxDate:m,onYearChange:h,className:u})=>{var v;const[b,g]=t(null!==(v=null==o?void 0:o.getFullYear())&&void 0!==v?v:(new Date).getFullYear()),[D,Y]=t("months");n.useEffect((()=>{void 0!==o&&g(o.getFullYear())}),[o]);const f=r((e=>{if(!d&&!m)return!1;const a=new Date(b,e,1),n=new Date(b,e+1,0);return!!(d&&n<d)||!!(m&&a>m)}),[b,d,m]),N=r((e=>{if(!d&&!m)return!1;const a=new Date(e,0,1),n=new Date(e,11,31);return!!(d&&n<d)||!!(m&&a>m)}),[d,m]),p=r((()=>{if("months"===D){const e=b-1;g(e),null==h||h(e)}else g((e=>e-10))}),[D,b,h]),w=r((()=>{if("months"===D){const e=b+1;g(e),null==h||h(e)}else g((e=>e+10))}),[D,b,h]),$=r((()=>{Y((e=>"months"===e?"years":"months"))}),[]),M=r((e=>{f(e)||null==i||i(new Date(b,e,1))}),[b,f,i]),C=r((e=>{N(e)||(g(e),Y("months"),null==h||h(e))}),[N,h]),[S,y]=(e=>{const a=10*Math.floor(e/10);return[a,a+9]})(b);return e("div",{className:"month-calendar-container"+(u?` ${u}`:""),children:[e("div",{className:"month-calendar-header",children:[a("button",{className:"month-calendar-nav-button",onClick:p,"aria-label":"months"===D?"Previous year":"Previous decade",children:a(l,{icon:"chevron-left"})}),a("button",{className:"month-calendar-title",onClick:$,children:"months"===D?b:`${S} – ${y}`}),a("button",{className:"month-calendar-nav-button",onClick:w,"aria-label":"months"===D?"Next year":"Next decade",children:a(l,{icon:"chevron-right"})})]}),"months"===D?a(c,{value:o,currentYear:b,isMonthDisabled:f,onMonthSelect:M}):a(s,{value:o,startYear:S,isYearDisabled:N,onYearSelect:C})]})};export{i as MonthCalendar};
+//# sourceMappingURL=month-calendar.js.map

package/dist/{css/src → esm/components/src/multi-menu}/multi-menu.css

@@ -1,52 +1,34 @@
-/* src/styles/src/multi-menu.css */
 .multi-menu-container {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
-  gap: 0.375rem;
-  width: 100%;
-}
-
-.multi-menu-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
 }
 
 .multi-menu-trigger-wrapper {
   position: relative;
   display: flex;
-  width: 100%;
   border-radius: 0.375rem;
   border: 1.5px solid hsl(var(--muted));
-  background: hsl(var(--background));
-  transition: border-color 0.2s, background-color 0.2s;
+  background: hsl(var(--input));
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
 }
 
-.multi-menu-trigger-wrapper:not(.multi-menu-disabled):not(.multi-menu-error):hover {
+.multi-menu-trigger-wrapper:not(.multi-menu-disabled):hover {
   border-color: hsl(var(--primary));
 }
 
-.multi-menu-trigger-wrapper.multi-menu-focused:not(.multi-menu-disabled):not(
-    .multi-menu-error
-  ) {
+.multi-menu-trigger-wrapper:not(.multi-menu-disabled):focus-within {
   border-color: hsl(var(--primary-300));
 }
 
-.multi-menu-trigger-wrapper.multi-menu-error {
-  border-color: hsl(var(--destructive));
-  background-color: hsl(var(--destructive-bg) / 0.3);
-}
-
-.multi-menu-trigger-wrapper.multi-menu-error:hover,
-.multi-menu-trigger-wrapper.multi-menu-error.multi-menu-focused {
-  border-color: hsl(var(--destructive));
-}
-
 .multi-menu-trigger-wrapper.multi-menu-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+/* ── Trigger button ── */
+
 .multi-menu-trigger {
   width: 100%;
   display: flex;
@@ -84,11 +66,21 @@
   transform: rotate(180deg);
 }
 
-.multi-menu-trigger-sm { height: 2rem; font-size: 0.875rem; }
-.multi-menu-trigger-md { height: 2.5rem; font-size: 1rem; }
-.multi-menu-trigger-lg { height: 3rem; font-size: 1.125rem; }
+.multi-menu-trigger-sm {
+  height: 2rem;
+  font-size: 0.875rem;
+}
+.multi-menu-trigger-md {
+  height: 2.5rem;
+  font-size: 1rem;
+}
+.multi-menu-trigger-lg {
+  height: 3rem;
+  font-size: 1.125rem;
+}
+
+/* ── Cascading panels ── */
 
-/* Menu panels */
 .multi-menu-panels {
   position: absolute;
   top: 100%;
@@ -99,6 +91,12 @@
   z-index: 50;
 }
 
+.multi-menu-panels-flip {
+  left: auto;
+  right: 0;
+  flex-direction: row-reverse;
+}
+
 .multi-menu-panel {
   padding: 0.25rem;
   border-radius: 0.375rem;
@@ -126,6 +124,13 @@
   margin-left: 0.25rem;
 }
 
+.multi-menu-panels-flip .multi-menu-panel + .multi-menu-panel {
+  margin-left: 0;
+  margin-right: 0.25rem;
+}
+
+/* ── Menu items ── */
+
 .multi-menu-option {
   width: 100%;
   display: flex;
@@ -139,11 +144,13 @@
   text-align: left;
   cursor: pointer;
   border-radius: 0.25rem;
-  transition: all 0.2s;
+  transition: background-color 0.15s;
   white-space: nowrap;
+  outline: none;
 }
 
-.multi-menu-option:hover:not(.multi-menu-option-disabled) {
+.multi-menu-option:hover:not(.multi-menu-option-disabled),
+.multi-menu-option:focus:not(.multi-menu-option-disabled) {
   background-color: hsl(var(--primary-disabled));
 }
 
@@ -167,24 +174,3 @@
   flex-shrink: 0;
   color: hsl(var(--muted-200));
 }
-
-.multi-menu-note {
-  font-size: 0.875rem;
-  color: hsl(var(--muted-200));
-  transition: color 0.2s;
-}
-
-.multi-menu-trigger-wrapper:not(.multi-menu-disabled):not(.multi-menu-error):hover
-  + .multi-menu-note {
-  color: hsl(var(--primary));
-}
-
-.multi-menu-trigger-wrapper.multi-menu-focused:not(.multi-menu-disabled):not(.multi-menu-error)
-  + .multi-menu-note {
-  color: hsl(var(--primary));
-}
-
-.multi-menu-error-message {
-  font-size: 0.875rem;
-  color: hsl(var(--destructive));
-} 

package/dist/esm/components/src/multi-menu/multi-menu.d.ts

@@ -0,0 +1,39 @@
+import "./multi-menu.css";
+import React from "react";
+/**
+ * One node in a nested `MultiMenu` tree (siblings at the same level need unique `value`s).
+ *
+ * @property {string} label - Menu row label.
+ * @property {string} value - Stable id; must be unique among siblings.
+ * @property {() => void} [onClick] - Fires when a leaf (no `subItems`) is activated; skipped when `subItems` exist.
+ * @property {MultiMenuItem[]} [subItems] - If present, opens a sub-panel with these entries.
+ */
+export interface MultiMenuItem {
+    label: string;
+    value: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    subItems?: MultiMenuItem[];
+}
+/**
+ * Hierarchical “overflow” / actions menu: trigger button and cascading flyouts from `items`.
+ * Extends `HTMLButtonElement` attributes except `size` (use design-system `size` instead).
+ *
+ * @property {MultiMenuItem[]} items - Top-level item tree.
+ * @property {string} [label] - Trigger button text. Default `"Options"`.
+ */
+interface MultiMenuProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    containerClassName?: string;
+    items: MultiMenuItem[];
+}
+/**
+ * Renders a menu trigger and nested panels; supports keyboard navigation and click-outside close.
+ *
+ * @param {MultiMenuProps} props - Tree in `items` and trigger props.
+ * @param {React.Ref<HTMLButtonElement>} ref - For the top-level menu trigger.
+ * @returns {React.ReactElement} Markup for the trigger and any open flyout(s).
+ */
+export declare const MultiMenu: React.ForwardRefExoticComponent<MultiMenuProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/components/src/multi-menu/multi-menu.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as l,jsxs as t}from"react/jsx-runtime";import"./multi-menu.css";import n,{useState as i,useRef as u,useEffect as r,useCallback as o}from"react";import{Icon as s}from"../icon/icon.js";import{useClickOutside as a}from"../../../hooks/src/use-click-outside.js";const c=n.forwardRef(((n,c)=>{var{size:m="md",label:d="Options",className:v="",containerClassName:p="",disabled:b,items:f}=n,h=e(n,["size","label","className","containerClassName","disabled","items"]);const[g,y]=i(!1),[k,N]=i([]),[w,S]=i(!1),A=u(null);a(A,(()=>{g&&(y(!1),N([]))})),r((()=>{if(!g)return;const e=setTimeout((()=>{var e;const l=null===(e=A.current)||void 0===e?void 0:e.querySelector('[role="menu"]'),t=null==l?void 0:l.querySelector('[role="menuitem"]:not([disabled])');null==t||t.focus()}),0);return()=>clearTimeout(e)}),[g]);const D=o(((e,l)=>{var t;if(!e.disabled)if(e.subItems){const t=k.slice(0,l);k[l]===e.value?N(t):N([...t,e.value])}else null===(t=e.onClick)||void 0===t||t.call(e),y(!1),N([])}),[k]),I=[f];let q=f;for(const e of k){const l=q.find((l=>l.value===e));if(!(null==l?void 0:l.subItems))break;I.push(l.subItems),q=l.subItems}return l("div",{className:"multi-menu-container"+(p?` ${p}`:""),ref:A,onKeyDown:e=>{var l,t,n,i,u;if("Escape"===e.key)return e.preventDefault(),y(!1),N([]),void(null===(t=null===(l=A.current)||void 0===l?void 0:l.querySelector(".multi-menu-trigger"))||void 0===t||t.focus());if(!g)return void("Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),y(!0)));const r=k.length,o=null===(n=A.current)||void 0===n?void 0:n.querySelectorAll('[role="menu"]');if(!o||0===o.length)return;const s=o[r];if(!s)return;const a=Array.from(s.querySelectorAll('[role="menuitem"]:not([disabled])')),c=document.activeElement,m=a.indexOf(c);switch(e.key){case"ArrowDown":e.preventDefault();null===(i=a[m<0?0:(m+1)%a.length])||void 0===i||i.focus();break;case"ArrowUp":e.preventDefault();null===(u=a[m<0?a.length-1:(m-1+a.length)%a.length])||void 0===u||u.focus();break;case"ArrowRight":if(e.preventDefault(),m>=0&&"true"===c.dataset.hasSubmenu){const e=c.dataset.value;N((l=>[...l.slice(0,r),e])),setTimeout((()=>{var e,l;const t=null===(e=A.current)||void 0===e?void 0:e.querySelectorAll('[role="menu"]'),n=null==t?void 0:t[r+1],i=null==n?void 0:n.querySelectorAll('[role="menuitem"]:not([disabled])');null===(l=null==i?void 0:i[0])||void 0===l||l.focus()}),0)}break;case"ArrowLeft":if(e.preventDefault(),k.length>0){const e=k[k.length-1];N((e=>e.slice(0,-1))),setTimeout((()=>{var l;const t=null===(l=A.current)||void 0===l?void 0:l.querySelector(`[data-value="${CSS.escape(e)}"]`);null==t||t.focus()}),0)}break;case"Enter":case" ":m>=0&&(e.preventDefault(),c.click())}},children:t("div",{className:"multi-menu-trigger-wrapper"+(b?" multi-menu-disabled":""),children:[t("button",Object.assign({ref:c,type:"button",className:`multi-menu-trigger multi-menu-trigger-${m}${v?` ${v}`:""}`,onClick:()=>{var e;if(!b){if(!g){const l=null===(e=A.current)||void 0===e?void 0:e.getBoundingClientRect();S(!!l&&l.left>window.innerWidth/2)}y(!g)}},disabled:b,"aria-haspopup":"menu","aria-expanded":g},h,{children:[l("span",{className:"multi-menu-trigger-value",children:d}),l(s,{icon:"chevron-down",className:"multi-menu-chevron"+(g?" multi-menu-chevron-open":"")})]})),g&&l("div",{className:"multi-menu-panels"+(w?" multi-menu-panels-flip":""),onMouseLeave:e=>{var l;(null===(l=A.current)||void 0===l?void 0:l.contains(e.relatedTarget))||N([])},children:I.map(((e,n)=>l("div",{className:"multi-menu-panel",role:"menu",children:e.map((e=>t("button",{type:"button",role:"menuitem","aria-haspopup":e.subItems?"menu":void 0,"aria-disabled":e.disabled,"data-value":e.value,"data-has-submenu":e.subItems?"true":void 0,className:`multi-menu-option${e.disabled?" multi-menu-option-disabled":""}${k.includes(e.value)&&e.subItems?" multi-menu-option-active":""}`,onClick:()=>D(e,n),onMouseEnter:()=>((e,l)=>{if(e.disabled)return;const t=k.slice(0,l);e.subItems&&t.push(e.value),N(t)})(e,n),disabled:e.disabled,tabIndex:-1,children:[l("span",{className:"multi-menu-option-label",children:e.label}),e.subItems&&l(s,{icon:"chevron-right",className:"multi-menu-option-chevron"})]},e.value)))},n)))})]})})}));c.displayName="MultiMenu";export{c as MultiMenu};
+//# sourceMappingURL=multi-menu.js.map

package/dist/{css/src → esm/components/src/multi-select}/multi-select.css

@@ -17,6 +17,7 @@
   padding: 0.2rem 0.3rem 0.2rem 0.3rem;
   cursor: pointer;
   transition: all 0.2s;
+  background-color: hsl(var(--input));
 }
 
 .multi-select-trigger-container-open {
@@ -60,7 +61,8 @@
 .multi-select-trigger-placeholder {
   color: hsl(var(--muted));
   font-size: 0.875rem;
-  padding-left: 0.3rem;
+  font-weight: 400;
+  padding-left: 0.5rem;
 }
 
 .multi-select-trigger-icon {
@@ -97,7 +99,7 @@
   border-radius: 0 0 0.5rem 0.5rem;
   border: 1.5px solid hsl(var(--primary));
   border-top: none;
-  background-color: hsl(var(--background));
+  background-color: hsl(var(--input));
   z-index: 100;
   padding: 0.5rem;
   display: flex;
@@ -121,3 +123,93 @@
   max-height: 18rem;
   overflow-y: auto;
 }
+
+/* Header */
+.multi-select-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.multi-select-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.multi-select-clear {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.multi-select-clear:hover {
+  color: hsl(var(--primary));
+}
+
+/* Wrapper */
+.multi-select-wrapper {
+  position: relative;
+}
+
+/* Counter shown in open state */
+.multi-select-counter {
+  font-size: 0.875rem;
+  color: hsl(var(--primary));
+}
+
+/* Overflow ("+N more") display */
+.multi-select-overflow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.multi-select-overflow-tags {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.25rem;
+}
+
+/* Size variants for trigger */
+.multi-select-trigger-sm {
+  height: 2rem;
+  font-size: 0.875rem;
+}
+
+.multi-select-trigger-md {
+  height: 2.5rem;
+  font-size: 1rem;
+}
+
+.multi-select-trigger-lg {
+  height: 3rem;
+  font-size: 1.125rem;
+}
+
+/* Disabled state */
+.multi-select-trigger-disabled .multi-select-trigger-container {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Error state */
+.multi-select-trigger-error .multi-select-trigger-container {
+  border-color: hsl(var(--destructive));
+  background-color: hsl(var(--destructive-bg) / 0.3);
+}
+
+/* Note and error messages */
+.multi-select-note {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+}
+
+.multi-select-error-message {
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+}

package/dist/esm/components/src/multi-select/multi-select.d.ts

@@ -0,0 +1,49 @@
+import "./multi-select.css";
+import React from "react";
+/**
+ * A selectable item in the dropdown list; `value` must be unique across `options`.
+ * @property {string} label - Shown in the list and in selected tags.
+ * @property {string} value - Stable id stored in the selection array.
+ */
+export interface MultiSelectOption {
+    label: string;
+    value: string;
+}
+/**
+ * **Controlled** multi-select: `value` is the full set of selected `{ label, value }` objects, not just keys.
+ *
+ * @property {MultiSelectOption[]} options - Full catalog; filtered when `showSearch` is on.
+ * @property {MultiSelectOption[]} value - Current selection (order preserved for tags).
+ * @property {(options: MultiSelectOption[]) => void} onChange - Emits the new array on any change.
+ * @property {number} [maxSelectedOptions] - Hard cap; further picks are ignored when reached.
+ * @property {boolean} [showSearch] - When `true`, shows a search field in the panel. Default `true`.
+ * @property {boolean} [showSelectAll] - When `true`, exposes a select-all control in the list. Default `false`.
+ */
+interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value: MultiSelectOption[];
+    onChange: (options: MultiSelectOption[]) => void;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    note?: string;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    containerClassName?: string;
+    maxSelectedOptions?: number;
+    showClear?: boolean;
+    toggleLabel?: string;
+    onToggle?: (checked: boolean) => void;
+    showSearch?: boolean;
+    showSelectAll?: boolean;
+}
+/**
+ * Field that opens a list with checkboxes, optional search, select-all, max cap, and selected rows as `Tag`s.
+ *
+ * @param {MultiSelectProps} props - Controlled `value` / `onChange` plus `options`.
+ * @param {React.Ref<HTMLDivElement>} ref - Container ref.
+ * @returns {React.ReactElement} Trigger, open panel, and tag stack.
+ */
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/src/multi-select/multi-select.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as l,Fragment as t}from"react/jsx-runtime";import"./multi-select.css";import a,{useState as s,useId as i,useRef as c,useCallback as o,useMemo as r}from"react";import{Input as n}from"../input/input.js";import{Toggle as m}from"../toggle/toggle.js";import{Checkbox as u}from"../checkbox/checkbox.js";import{Icon as d}from"../icon/icon.js";import{Tag as g}from"../tag/tag.js";import{useClickOutside as h}from"../../../hooks/src/use-click-outside.js";const p=[],v=a.forwardRef((({options:a,value:v=p,onChange:N,placeholder:b,label:f,error:C="",note:k,disabled:w=!1,size:$="md",className:x="",containerClassName:j="",maxSelectedOptions:y,showClear:S,toggleLabel:R,onToggle:D,showSearch:L=!0,showSelectAll:z=!0},A)=>{const[E,I]=s(!1),[M,O]=s(""),K=i(),T=c(null),q=o((e=>{T.current=e,"function"==typeof A?A(e):A&&(A.current=e)}),[A]);h(T,(()=>{E&&(I(!1),O(""))}));const B=e=>{N(v.filter((l=>l.value!==e.value)))},F=r((()=>a.filter((e=>e.label.toLowerCase().includes(M.toLowerCase())))),[a,M]),G=null!=b?b:`Select ${null!=f?f:"options"}`;return e("div",{ref:q,className:`multi-select-container ${j}`,children:[(f||S&&v.length>0)&&e("div",{className:"multi-select-header",children:[f&&l("span",{className:"multi-select-label",children:f}),S&&v.length>0&&!w&&l("button",{type:"button",onClick:()=>N([]),className:"multi-select-clear","aria-label":"Clear selection",children:"Clear"})]}),e("div",{className:`multi-select-wrapper ${C?"multi-select-trigger-error":""} ${w?"multi-select-trigger-disabled":""}`,children:[e("div",{className:`multi-select-trigger-container multi-select-trigger-${$} ${E?"multi-select-trigger-container-open":""} ${x}`,onClick:()=>!w&&I(!E),onKeyDown:e=>{w||("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),I((e=>!e))),"Escape"===e.key&&E&&(e.preventDefault(),I(!1),O("")))},role:"combobox","aria-controls":K,"aria-expanded":E,"aria-haspopup":"listbox",tabIndex:w?-1:0,children:[l("div",{className:"multi-select-trigger",children:E?l("span",{className:"multi-select-counter",children:`${v.length}/${a.length} ${null!=f?f:"selected"}`}):l(t,{children:0===v.length?l("div",{className:"multi-select-trigger-placeholder",children:G}):v.length<=2?v.map((e=>l(g,{label:e.label,onRemove:()=>B(e),className:"multi-select-tag"},e.value))):e("div",{className:"multi-select-overflow",children:[l("div",{className:"multi-select-overflow-tags",children:v.slice(0,2).map((e=>l(g,{label:e.label,onRemove:()=>B(e),className:"multi-select-tag"},e.value)))}),l("span",{className:"multi-select-show-more",children:`+${v.length-2} More`})]})})}),l(d,{icon:"chevron-down",className:"multi-select-trigger-icon "+(E?"multi-select-trigger-icon-open":"")})]}),E&&e("div",{id:K,role:"listbox","aria-label":null!=f?f:"Options",className:"multi-select-options-container",children:[l("div",{className:"multi-select-selected-options-container",children:v.map((e=>l(g,{label:e.label,onRemove:()=>B(e),className:"multi-select-tag"},e.value)))}),L&&l(n,{placeholder:`Search ${null!=f?f:"options"}`,rightIcon:"search",containerClassName:"multi-select-search-input",size:"sm",value:M,onChange:e=>O(e.target.value)}),R&&D&&l(m,{label:R,isCard:!0,className:"multi-select-toggle",onChange:e=>D(e.target.checked)}),z&&l(m,{label:"Select All",isCard:!0,className:"multi-select-toggle",checked:v.length===a.length,onChange:e=>{e.target.checked?(()=>{const e=null!=y?y:a.length;N(a.slice(0,e))})():N([])}}),l("div",{className:"multi-select-options-list",children:F.map((e=>l("div",{className:"multi-select-options-list-item",children:l(u,{label:e.label,checked:v.some((l=>l.value===e.value)),onChange:()=>(e=>{v.some((l=>l.value===e.value))?N(v.filter((l=>l.value!==e.value))):void 0!==y&&v.length>=y||N([...v,e])})(e),className:"multi-select-option",isCard:!0})},e.value)))})]})]}),(k||C)&&l("small",{className:C?"multi-select-error-message":"multi-select-note",children:C||k})]})}));v.displayName="MultiSelect";export{v as MultiSelect};
+//# sourceMappingURL=multi-select.js.map

package/dist/{css/src → esm/components/src/pagination}/pagination.css

@@ -78,3 +78,20 @@
 .pagination-page-active:hover {
   background-color: hsl(var(--primary-200)) !important;
 }
+
+.pagination-ellipsis {
+  min-width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  color: hsl(var(--muted));
+  user-select: none;
+}
+
+.pagination-info {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+  white-space: nowrap;
+}

package/dist/esm/components/src/pagination/pagination.d.ts

@@ -0,0 +1,33 @@
+import "./pagination.css";
+/**
+ * Page/limit UI: **controlled** `currentPage`, `perPage`, and `totalPages`.
+ *
+ * @property {number} currentPage - 1-based index of the active page.
+ * @property {number} totalPages - Total page count from the server or client math.
+ * @property {number} perPage - Rows per page (synced with `Dropdown` for `onPerPageChange`).
+ * @property {number} [totalItems] - Optional; shown in the summary line when provided.
+ * @property {{label: string, value: number}[]} [perPageOptions] - Dropdown entries; default presets 10–50.
+ * @property {(page: number) => void} onPageChange - Called with the new 1-based page.
+ * @property {(perPage: number) => void} onPerPageChange - Called when the user changes page size.
+ */
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    perPage: number;
+    totalItems?: number;
+    perPageOptions?: {
+        label: string;
+        value: number;
+    }[];
+    onPageChange: (page: number) => void;
+    onPerPageChange: (perPage: number) => void;
+    className?: string;
+}
+/**
+ * Renders first/prev/next/last, numeric page window, and a per-page `Dropdown` when `perPageOptions` is set.
+ *
+ * @param {PaginationProps} props - Page + limit state and handlers.
+ * @returns {JSX.Element} The pagination toolbar.
+ */
+export declare function Pagination({ currentPage, totalPages, perPage, totalItems, perPageOptions, onPageChange, onPerPageChange, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/pagination/pagination.js

@@ -0,0 +1,2 @@
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import"./pagination.css";import{Dropdown as i}from"../dropdown/dropdown.js";import{Icon as n}from"../icon/icon.js";function l({currentPage:l,totalPages:o,perPage:r,totalItems:s,perPageOptions:t=[{label:"10 per page",value:10},{label:"20 per page",value:20},{label:"30 per page",value:30},{label:"50 per page",value:50}],onPageChange:p,onPerPageChange:c,className:g=""}){const d=t.map((a=>({label:a.label,value:String(a.value)}))),h=(l-1)*r+1,m=void 0!==s?Math.min(l*r,s):l*r;return a("div",{className:`pagination ${g}`,children:[e("div",{className:"pagination-per-page",children:e(i,{value:String(r),onChange:a=>void 0!==a&&c(Number(a)),options:d,size:"sm",direction:"top"})}),void 0!==s&&a("span",{className:"pagination-info",children:[h,"–",m," of ",s]}),a("div",{className:"pagination-controls",children:[e("button",{className:"pagination-arrow",onClick:()=>p(1),disabled:1===l,"aria-label":"First page",children:e(n,{icon:"double-chevron-left",size:16})}),e("button",{className:"pagination-arrow",onClick:()=>p(l-1),disabled:1===l,"aria-label":"Previous page",children:e(n,{icon:"chevron-left",size:16})}),e("div",{className:"pagination-pages",children:(()=>{const a=[];if(o<=5)return Array.from({length:o},((a,e)=>e+1));a.push(1);let e=Math.max(2,l-1),i=Math.min(o-1,l+1);l<=3&&(i=Math.min(4,o-1)),l>=o-2&&(e=Math.max(o-3,2)),e>2&&a.push("ellipsis");for(let n=e;n<=i;n++)a.push(n);return i<o-1&&a.push("ellipsis"),a.push(o),a})().map(((a,i)=>"ellipsis"===a?e("span",{className:"pagination-ellipsis","aria-hidden":"true",children:"..."},`ellipsis-${i}`):e("button",{className:"pagination-page "+(a===l?"pagination-page-active":""),onClick:()=>p(a),"aria-label":`Page ${a}`,"aria-current":a===l?"page":void 0,children:a},a)))}),e("button",{className:"pagination-arrow",onClick:()=>p(l+1),disabled:l===o,"aria-label":"Next page",children:e(n,{icon:"chevron-right",size:16})}),e("button",{className:"pagination-arrow",onClick:()=>p(o),disabled:l===o,"aria-label":"Last page",children:e(n,{icon:"double-chevron-right",size:16})})]})]})}export{l as Pagination};
+//# sourceMappingURL=pagination.js.map

package/dist/{css/src → esm/components/src/popover}/popover.css

@@ -1,9 +1,18 @@
 .popover-trigger {
-  width: 100%;
+  display: inline-flex;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.popover-trigger:focus-visible {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 
 .popover-content {
-  z-index: 50;
+  z-index: 300;
   animation: popoverShow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: var(--origin, top);
 }