h2o-library 2.0.1 → 2.1.1

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

@@ -1,5 +1,6 @@
 import "./chip.css";
 import type React from "react";
+import { Icon } from "../icon/icon";
 import type { IconType, TooltipPosition } from "../../../types";
 /**
  * Props for the `Chip` component: extends `HTMLAttributes<HTMLElement>` with H2O badge fields.
@@ -7,6 +8,7 @@ import type { IconType, TooltipPosition } from "../../../types";
  *
  * @property {string} label - Visible text (required).
  * @property {import("../../../types").IconType} [icon] - Leading icon; overrides `dot` when present.
+ * @property {Omit<React.ComponentProps<typeof Icon>, "icon">} [iconProps] - Extra props forwarded to the built-in `Icon` (and its `<svg>`); overrides `iconSize`/`iconStrokeWidth`/`iconClassName`.
  * @property {"neutral"|"primary"|"success"|"warning"|"error"} [variant] - Color family. Default `"neutral"`.
  * @property {"sm"|"md"|"lg"} [size] - Padding and font. Default `"md"`.
  * @property {boolean} [dot] - Renders a status dot instead of an icon when no `icon`.
@@ -16,6 +18,7 @@ import type { IconType, TooltipPosition } from "../../../types";
 type ChipProps = React.HTMLAttributes<HTMLElement> & {
     label: string;
     icon?: IconType;
+    iconProps?: Omit<React.ComponentProps<typeof Icon>, "icon">;
     variant?: "neutral" | "primary" | "success" | "warning" | "error";
     size?: "sm" | "md" | "lg";
     iconStrokeWidth?: number;
@@ -33,5 +36,5 @@ type ChipProps = React.HTMLAttributes<HTMLElement> & {
  * @param {ChipProps} props - Extends native element props; includes `label` and presentation.
  * @returns {JSX.Element} A `span` or `button`-like chip per `onClick` usage.
  */
-export declare const Chip: ({ label, icon, variant, size, iconStrokeWidth, iconClassName, iconSize, disabled, showBorder, dot, tooltip, tooltipPosition, className, onClick, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chip: ({ label, icon, iconProps, variant, size, iconStrokeWidth, iconClassName, iconSize, disabled, showBorder, dot, tooltip, tooltipPosition, className, onClick, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import{__rest as i}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as o,jsx as t}from"react/jsx-runtime";import"./chip.css";import{Icon as e}from"../icon/icon.js";import{Tooltip as s}from"../tooltip/tooltip.js";const n=n=>{var{label:a,icon:c,variant:l="neutral",size:r="md",iconStrokeWidth:d=1.5,iconClassName:p="",iconSize:m=14,disabled:h=!1,showBorder:b=!1,dot:v=!1,tooltip:k,tooltipPosition:N="top",className:j="",onClick:f}=n,u=i(n,["label","icon","variant","size","iconStrokeWidth","iconClassName","iconSize","disabled","showBorder","dot","tooltip","tooltipPosition","className","onClick"]);const z=!!f,C=v&&!c,x=["chip-base",`chip-${l}`,`chip--${r}`,b?"chip--border":"",C?"chip--dot":"",c?"chip--icon":"",h?"chip--disabled":"",j].filter(Boolean).join(" "),S=o("div",Object.assign({className:x,role:z?"button":void 0,tabIndex:z&&!h?0:void 0,"aria-disabled":h||void 0,onClick:h?void 0:f,onKeyDown:z&&!h?i=>{"Enter"!==i.key&&" "!==i.key||!f||(i.preventDefault(),f(i))}:void 0},u,{children:[C&&t("span",{className:"chip-dot"}),c&&t(e,{icon:c,size:m,strokeWidth:d,className:p}),t("span",{className:"chip-label",children:a})]}));return k?t(s,{text:k,position:N,children:S}):S};export{n as Chip};
+import{__rest as o}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as i,jsx as s}from"react/jsx-runtime";import"./chip.css";import{Icon as t}from"../icon/icon.js";import{Tooltip as e}from"../tooltip/tooltip.js";import{cn as c}from"../../../utils/src/cn.js";const n=n=>{var{label:a,icon:l,iconProps:r,variant:d="neutral",size:p="md",iconStrokeWidth:m=1.5,iconClassName:h="",iconSize:b=14,disabled:v=!1,showBorder:j=!1,dot:N=!1,tooltip:k,tooltipPosition:u="top",className:f="",onClick:z}=n,C=o(n,["label","icon","iconProps","variant","size","iconStrokeWidth","iconClassName","iconSize","disabled","showBorder","dot","tooltip","tooltipPosition","className","onClick"]);const x=!!z,P=N&&!l,S=["chip-base",`chip-${d}`,`chip--${p}`,j?"chip--border":"",P?"chip--dot":"",l?"chip--icon":"",v?"chip--disabled":"",f].filter(Boolean).join(" "),w=i("div",Object.assign({className:S,role:x?"button":void 0,tabIndex:x&&!v?0:void 0,"aria-disabled":v||void 0,onClick:v?void 0:z,onKeyDown:x&&!v?o=>{"Enter"!==o.key&&" "!==o.key||!z||(o.preventDefault(),z(o))}:void 0},C,{children:[P&&s("span",{className:"chip-dot"}),l&&s(t,Object.assign({icon:l,size:b,strokeWidth:m},r,{className:c(h,null==r?void 0:r.className)})),s("span",{className:"chip-label",children:a})]}));return k?s(e,{text:k,position:u,children:w}):w};export{n as Chip};
 //# sourceMappingURL=chip.js.map

package/dist/esm/components/src/content-switch/content-switch.d.ts

@@ -1,14 +1,17 @@
 import "./content-switch.css";
+import { Icon } from "../icon/icon";
 import type { IconType } from "../../../types";
 /**
  * Tab-like option in a `ContentSwitch` row (`role="tablist"` / `role="tab"`).
  * @property {string} value - Passed to `onChange` when selected.
  * @property {IconType} [icon] - Optional leading icon on the tab.
+ * @property {Omit<React.ComponentProps<typeof Icon>, "icon">} [iconProps] - Extra props forwarded to the built-in `Icon` (and its `<svg>`).
  */
 export type ContentSwitchOption = {
     label: string;
     value: string;
     icon?: IconType;
+    iconProps?: Omit<React.ComponentProps<typeof Icon>, "icon">;
     disabled?: boolean;
 };
 /**

package/dist/esm/components/src/content-switch/content-switch.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import"./content-switch.css";import{Icon as i}from"../icon/icon.js";import{cn as o}from"../../../utils/src/cn.js";const n=({options:n,selected:a,onChange:c,variant:s="primary",className:l,optionClassName:r,disabled:m=!1,ariaLabel:p})=>t("div",{role:"tablist","aria-label":p,className:o("primary"===s?"content-switch-primary":"content-switch-secondary",l),children:n.map((n=>{const s=m||n.disabled;return e("button",{type:"button",role:"tab","aria-selected":a===n.value,onClick:()=>!s&&c(n.value),disabled:s,className:o("content-switch-option",r,a===n.value&&"content-switch-option-selected",s&&"content-switch-option-disabled"),children:[n.icon&&t(i,{icon:n.icon,size:16,className:"content-switch-option-icon"}),n.label]},n.value)}))});export{n as ContentSwitch};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import"./content-switch.css";import{Icon as i}from"../icon/icon.js";import{cn as e}from"../../../utils/src/cn.js";const n=({options:n,selected:s,onChange:a,variant:c="primary",className:l,optionClassName:r,disabled:m=!1,ariaLabel:p})=>t("div",{role:"tablist","aria-label":p,className:e("primary"===c?"content-switch-primary":"content-switch-secondary",l),children:n.map((n=>{var c;const l=m||n.disabled;return o("button",{type:"button",role:"tab","aria-selected":s===n.value,onClick:()=>!l&&a(n.value),disabled:l,className:e("content-switch-option",r,s===n.value&&"content-switch-option-selected",l&&"content-switch-option-disabled"),children:[n.icon&&t(i,Object.assign({icon:n.icon,size:16},n.iconProps,{className:e("content-switch-option-icon",null===(c=n.iconProps)||void 0===c?void 0:c.className)})),n.label]},n.value)}))});export{n as ContentSwitch};
 //# sourceMappingURL=content-switch.js.map

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

@@ -1,11 +1,14 @@
 import "./input.css";
 import type { IconType, TooltipPosition } from "../../../types";
+import { Icon } from "../icon/icon";
 /**
  * Extends `HTMLInputElement` attributes
  *
  * @property {"sm"|"md"|"lg"} [size] - Field height and font scale. Default `"md"`.
  * @property {import("../../../types").IconType} [leftIcon] - Optional left decorative/action icon.
+ * @property {Omit<React.ComponentProps<typeof Icon>, "icon">} [leftIconProps] - Extra props forwarded to the left `Icon` (and its `<svg>`).
  * @property {import("../../../types").IconType} [rightIcon] - Optional right icon; pair with `onRightIconClick` for an action.
+ * @property {Omit<React.ComponentProps<typeof Icon>, "icon">} [rightIconProps] - Extra props forwarded to the right `Icon` (and its `<svg>`).
  * @property {boolean} [showClear] - Shows a clear control when the field has a value. Default `false`.
  * @property {string} [note] - Helper text below the field (non-error).
  * @property {string} [error] - Error message; styles the field as invalid when set.
@@ -16,7 +19,9 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     size?: "sm" | "md" | "lg";
     label?: string;
     leftIcon?: IconType;
+    leftIconProps?: Omit<React.ComponentProps<typeof Icon>, "icon">;
     rightIcon?: IconType;
+    rightIconProps?: Omit<React.ComponentProps<typeof Icon>, "icon">;
     onRightIconClick?: () => void;
     showClear?: boolean;
     note?: string;

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

@@ -1,2 +1,2 @@
-import{__rest as i}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as t,jsx as e}from"react/jsx-runtime";import"./input.css";import{forwardRef as o,useState as n,useId as s}from"react";import{Icon as a}from"../icon/icon.js";const l=o(((o,l)=>{var{size:c="md",label:r,leftIcon:p,rightIcon:d,onRightIconClick:u,showClear:m,note:h,error:b="",className:N="",containerClassName:v="",type:f="text",disabled:g,tooltip:C,tooltipPosition:y="top",value:I}=o,w=i(o,["size","label","leftIcon","rightIcon","onRightIconClick","showClear","note","error","className","containerClassName","type","disabled","tooltip","tooltipPosition","value"]);const[z,x]=n(!1),$=s(),j="password"===f,k={sm:16,md:20,lg:24},P=void 0!==I&&""!==I;return t("div",{className:`input-container ${v}`,children:[(r||m&&P)&&t("div",{className:"input-header",children:[r&&t("label",{htmlFor:$,className:"input-label",children:[r,C&&e(a,{icon:"info",size:16,tooltip:C,className:"input-info-icon",tooltipPosition:y})]}),m&&P&&!g&&e("button",{type:"button",onClick:()=>{var i;null===(i=w.onChange)||void 0===i||i.call(w,{target:{value:""}})},className:"input-clear",children:"Clear"})]}),t("div",{className:`input-wrapper ${b?"input-error":""} ${g?"input-disabled":""}`,children:[p&&e("div",{className:"input-icon-left",children:e(a,{icon:p,size:k[c]})}),e("input",Object.assign({id:$,ref:l,type:j?z?"text":"password":f,className:`input input-${c} ${(()=>{const i=void 0!==p,t=void 0!==d||j;return i&&t?"input-has-both-icons":i?"input-has-left-icon":t?"input-has-right-icon":""})()} ${N}`,disabled:g,value:I},w)),(d||j)&&e("div",{className:"input-icon-right",children:j?e("button",{type:"button",onClick:()=>x(!z),className:"input-icon-button",tabIndex:-1,"aria-label":z?"Hide password":"Show password",children:e(a,{icon:z?"eye":"eye-off",size:k[c]})}):d&&u?e("button",{type:"button",onClick:u,className:"input-icon-button",tabIndex:-1,disabled:g,children:e(a,{icon:d,size:k[c]})}):d?e(a,{icon:d,size:k[c]}):null})]}),(h||b)&&e("small",{className:b?"input-error-message":"input-note",children:b||h})]})}));l.displayName="Input";const c=l;export{c as Input};
+import{__rest as i}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as t,jsx as e}from"react/jsx-runtime";import"./input.css";import{forwardRef as o,useState as n,useId as s}from"react";import{Icon as a}from"../icon/icon.js";const l=o(((o,l)=>{var{size:c="md",label:r,leftIcon:p,leftIconProps:d,rightIcon:u,rightIconProps:m,onRightIconClick:h,showClear:b,note:N,error:g="",className:f="",containerClassName:v="",type:I="text",disabled:C,tooltip:y,tooltipPosition:j="top",value:w}=o,z=i(o,["size","label","leftIcon","leftIconProps","rightIcon","rightIconProps","onRightIconClick","showClear","note","error","className","containerClassName","type","disabled","tooltip","tooltipPosition","value"]);const[P,x]=n(!1),$=s(),k="password"===I,O={sm:16,md:20,lg:24},R=void 0!==w&&""!==w;return t("div",{className:`input-container ${v}`,children:[(r||b&&R)&&t("div",{className:"input-header",children:[r&&t("label",{htmlFor:$,className:"input-label",children:[r,y&&e(a,{icon:"info",size:16,tooltip:y,className:"input-info-icon",tooltipPosition:j})]}),b&&R&&!C&&e("button",{type:"button",onClick:()=>{var i;null===(i=z.onChange)||void 0===i||i.call(z,{target:{value:""}})},className:"input-clear",children:"Clear"})]}),t("div",{className:`input-wrapper ${g?"input-error":""} ${C?"input-disabled":""}`,children:[p&&e("div",{className:"input-icon-left",children:e(a,Object.assign({icon:p,size:O[c]},d))}),e("input",Object.assign({id:$,ref:l,type:k?P?"text":"password":I,className:`input input-${c} ${(()=>{const i=void 0!==p,t=void 0!==u||k;return i&&t?"input-has-both-icons":i?"input-has-left-icon":t?"input-has-right-icon":""})()} ${f}`,disabled:C,value:w},z)),(u||k)&&e("div",{className:"input-icon-right",children:k?e("button",{type:"button",onClick:()=>x(!P),className:"input-icon-button",tabIndex:-1,"aria-label":P?"Hide password":"Show password",children:e(a,{icon:P?"eye":"eye-off",size:O[c]})}):u&&h?e("button",{type:"button",onClick:h,className:"input-icon-button",tabIndex:-1,disabled:C,children:e(a,Object.assign({icon:u,size:O[c]},m))}):u?e(a,Object.assign({icon:u,size:O[c]},m)):null})]}),(N||g)&&e("small",{className:g?"input-error-message":"input-note",children:g||N})]})}));l.displayName="Input";const c=l;export{c as Input};
 //# sourceMappingURL=input.js.map

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

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

package/dist/esm/components/src/onboarding/onboarding.css

@@ -0,0 +1,178 @@
+.onboarding {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* Dim + click capture. Sits over the page; the spotlight glow draws the cutout. */
+.onboarding__blocker {
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+  animation: onboardingFade 0.2s ease;
+}
+
+/* Visual-only highlight ring around the target (clicks pass through). */
+.onboarding__spotlight {
+  position: fixed;
+  pointer-events: none;
+  box-shadow:
+    0 0 0 9999px rgba(0, 0, 0, 0.5),
+    0 0 0 2px hsl(var(--primary)),
+    0 0 18px 4px hsl(var(--primary) / 0.45);
+  transition:
+    top 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+    left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+    width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+    height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* When the spotlight is shown, its box-shadow provides the dim — hide the flat blockers' bg. */
+.onboarding:has(.onboarding__spotlight) .onboarding__blocker {
+  background: transparent;
+}
+
+.onboarding__popup {
+  position: fixed;
+  pointer-events: auto;
+  width: 320px;
+  max-width: calc(100vw - 24px);
+  background: hsl(var(--card, var(--background)));
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  box-shadow: 0 10px 38px rgba(0, 0, 0, 0.22);
+  padding: 16px;
+  animation: onboardingPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.onboarding__close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: hsl(var(--muted));
+  border-radius: var(--radius-sm, 6px);
+  cursor: pointer;
+}
+
+.onboarding__close:hover {
+  background: hsl(var(--primary) / 0.08);
+  color: hsl(var(--foreground));
+}
+
+.onboarding__close:focus-visible {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 1px;
+}
+
+.onboarding__title {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 6px;
+  padding-right: 24px;
+}
+
+.onboarding__content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: hsl(var(--muted));
+}
+
+.onboarding__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.onboarding__footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.onboarding__progress {
+  font-size: 12px;
+  color: hsl(var(--muted));
+  font-variant-numeric: tabular-nums;
+}
+
+/* Arrow caret pointing at the target. */
+.onboarding__arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--border));
+  transform: rotate(45deg);
+}
+
+.onboarding__popup[data-placement="bottom"] .onboarding__arrow {
+  top: -6px;
+  left: 50%;
+  margin-left: -5px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.onboarding__popup[data-placement="top"] .onboarding__arrow {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -5px;
+  border-left: none;
+  border-top: none;
+}
+
+.onboarding__popup[data-placement="right"] .onboarding__arrow {
+  left: -6px;
+  top: 50%;
+  margin-top: -5px;
+  border-top: none;
+  border-right: none;
+}
+
+.onboarding__popup[data-placement="left"] .onboarding__arrow {
+  right: -6px;
+  top: 50%;
+  margin-top: -5px;
+  border-bottom: none;
+  border-left: none;
+}
+
+@keyframes onboardingFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes onboardingPopIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .onboarding__blocker,
+  .onboarding__popup,
+  .onboarding__spotlight {
+    animation: none;
+    transition: none;
+  }
+}

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

@@ -0,0 +1,100 @@
+import "./onboarding.css";
+import type React from "react";
+import type { ReactNode } from "react";
+import { type OnboardingStorage, type UseOnboardingReturn } from "../../../hooks/src/use-onboarding";
+/** Where a step popup sits relative to its target. `"center"` ignores the target and centers on screen. */
+export type OnboardingPlacement = "top" | "bottom" | "left" | "right" | "auto" | "center";
+/**
+ * How a step finds its anchor element:
+ * - `string` — a CSS selector (e.g. `"#sidebar"`, `".profile"`, `"[data-tour=save]"`). A bare word falls back to an element id.
+ * - `HTMLElement` — the element directly.
+ * - `() => HTMLElement | null` — resolved lazily when the step shows.
+ */
+export type OnboardingTarget = string | HTMLElement | (() => HTMLElement | null);
+/**
+ * A single step in an onboarding flow.
+ *
+ * @property {OnboardingTarget} [target] - Element to anchor + spotlight. Omit for a centered step (welcome/finish screens).
+ * @property {ReactNode} [title] - Heading shown at the top of the popup.
+ * @property {ReactNode} content - Body message (required).
+ * @property {OnboardingPlacement} [placement] - Popup side. Default: the flow's `placement` (which defaults to `"auto"`).
+ * @property {number} [spotlightPadding] - Extra px around the target in the spotlight cutout.
+ * @property {number} [spotlightRadius] - Spotlight corner radius in px.
+ * @property {boolean} [disableInteraction] - Block clicks on the spotlighted element. Default: the flow's `disableInteraction`.
+ */
+export interface OnboardingStep {
+    target?: OnboardingTarget;
+    title?: ReactNode;
+    content: ReactNode;
+    placement?: OnboardingPlacement;
+    spotlightPadding?: number;
+    spotlightRadius?: number;
+    disableInteraction?: boolean;
+    showBack?: boolean;
+    showSkip?: boolean;
+    nextLabel?: string;
+    backLabel?: string;
+    finishLabel?: string;
+}
+/** Context passed to `renderStep` / `renderFooter` for fully custom popup UI. */
+export interface OnboardingRenderContext extends UseOnboardingReturn {
+    step: OnboardingStep;
+}
+/** Imperative handle exposed via `ref` on `Onboarding`. */
+export type OnboardingHandle = UseOnboardingReturn;
+/**
+ * Props for `Onboarding`. Most are flow-wide defaults that individual steps can override.
+ *
+ * @property {string} id - Stable flow id; persistence key.
+ * @property {OnboardingStep[]} steps - Ordered steps.
+ * @property {boolean} [run] - Controlled active state. Omit to auto-manage (see `autoStart`).
+ */
+export interface OnboardingProps {
+    id: string;
+    steps: OnboardingStep[];
+    run?: boolean;
+    autoStart?: boolean;
+    persist?: boolean;
+    storage?: OnboardingStorage;
+    startDelay?: number;
+    placement?: OnboardingPlacement;
+    spotlightPadding?: number;
+    spotlightRadius?: number;
+    disableInteraction?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    keyboardNavigation?: boolean;
+    scrollIntoView?: boolean;
+    scrollBehavior?: ScrollBehavior;
+    offset?: number;
+    zIndex?: number;
+    showProgress?: boolean;
+    showSkip?: boolean;
+    showBack?: boolean;
+    showClose?: boolean;
+    nextLabel?: string;
+    backLabel?: string;
+    skipLabel?: string;
+    finishLabel?: string;
+    className?: string;
+    overlayClassName?: string;
+    onStart?: () => void;
+    onStepChange?: (index: number, previous: number, step: OnboardingStep) => void;
+    onSkip?: (index: number) => void;
+    onFinish?: () => void;
+    onClose?: () => void;
+    renderStep?: (ctx: OnboardingRenderContext) => ReactNode;
+    renderFooter?: (ctx: OnboardingRenderContext) => ReactNode;
+}
+/**
+ * Modular onboarding / product-tour overlay. Drive a flow by `id` with a `steps`
+ * array — each step spotlights an element (by selector/id) and shows a popup with
+ * Back / Skip / Next controls. Persists completion so a flow shows once.
+ *
+ * Headless control lives in {@link useOnboarding}; this component is the batteries-included UI.
+ *
+ * @param {OnboardingProps} props
+ * @param {React.Ref<OnboardingHandle>} ref - Imperative controls (`start`, `next`, `skip`, `reset`, …).
+ * @returns {JSX.Element | null} A portal with the spotlight overlay + popup while active.
+ */
+export declare const Onboarding: React.ForwardRefExoticComponent<OnboardingProps & React.RefAttributes<UseOnboardingReturn>>;

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

@@ -0,0 +1,2 @@
+import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import"./onboarding.css";import{forwardRef as n,useImperativeHandle as i,useRef as l,useState as r,useCallback as a,useEffect as s,useLayoutEffect as d}from"react";import{createPortal as h}from"react-dom";import{Button as c}from"../button/button.js";import{Icon as u}from"../icon/icon.js";import{useOnboarding as p}from"../../../hooks/src/use-onboarding.js";import{cn as f}from"../../../utils/src/cn.js";function g(t){if(!t)return null;if("function"==typeof t)return t();if("string"!=typeof t)return t;if("undefined"==typeof document)return null;let e=document.querySelector(t);return!e&&/^[A-Za-z][\w-]*$/.test(t)&&(e=document.getElementById(t)),e}const m=n((function({id:n,steps:m,run:v,autoStart:b,persist:w,storage:y,startDelay:k,placement:_="auto",spotlightPadding:x=8,spotlightRadius:L=8,disableInteraction:N=!0,closeOnOverlayClick:S=!1,closeOnEsc:C=!0,keyboardNavigation:E=!0,scrollIntoView:z=!0,scrollBehavior:I="smooth",offset:M=12,zIndex:j=1e3,showProgress:B=!0,showSkip:D=!0,showBack:O=!0,showClose:R=!0,nextLabel:F="Next",backLabel:A="Back",skipLabel:P="Skip",finishLabel:H="Done",className:V,overlayClassName:W,onStart:q,onStepChange:Z,onSkip:$,onFinish:G,onClose:J,renderStep:K,renderFooter:Q},T){var U,X,Y,tt,et,ot,nt,it,lt,rt,at,st;const dt=p({id:n,total:m.length,run:v,autoStart:b,persist:w,storage:y,startDelay:k,onStart:q,onStepChange:(t,e)=>null==Z?void 0:Z(t,e,m[t]),onSkip:$,onFinish:G,onStop:J});i(T,(()=>dt),[dt]);const{active:ht,index:ct}=dt,ut=m[ct],pt=l(null),[ft,gt]=r(null),[mt,vt]=r(null),bt=null!==(U=null==ut?void 0:ut.placement)&&void 0!==U?U:_,wt=null!==(X=null==ut?void 0:ut.spotlightPadding)&&void 0!==X?X:x,yt=null!==(Y=null==ut?void 0:ut.spotlightRadius)&&void 0!==Y?Y:L,kt=null!==(tt=null==ut?void 0:ut.disableInteraction)&&void 0!==tt?tt:N,_t=a((()=>{if(!ht||!ut)return;const t="center"===bt?null:g(ut.target),e=t?(()=>{const e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height}})():null;gt(e);const o=pt.current,n=o?{width:o.offsetWidth,height:o.offsetHeight}:{width:320,height:160};vt(function(t,e,o,n,i=12){var l;const r=window.innerWidth,a=window.innerHeight,s=t=>Math.max(i,Math.min(t,r-e.width-i)),d=t=>Math.max(i,Math.min(t,a-e.height-i));if(!t||"center"===o)return{top:Math.max(i,(a-e.height)/2),left:Math.max(i,(r-e.width)/2),placement:"center"};const h={top:t.top,bottom:a-(t.top+t.height),left:t.left,right:r-(t.left+t.width)},c=["bottom","top","right","left"];let u;if("auto"===o){const t={bottom:h.bottom>=e.height+n,top:h.top>=e.height+n,right:h.right>=e.width+n,left:h.left>=e.width+n};u=null!==(l=c.find((e=>t[e])))&&void 0!==l?l:[...c].sort(((t,e)=>h[e]-h[t]))[0]}else u=o;const p=t.left+t.width/2-e.width/2,f=t.top+t.height/2-e.height/2;switch(u){case"top":return{top:d(t.top-e.height-n),left:s(p),placement:"top"};case"bottom":return{top:d(t.top+t.height+n),left:s(p),placement:"bottom"};case"left":return{top:d(f),left:s(t.left-e.width-n),placement:"left"};default:return{top:d(f),left:s(t.left+t.width+n),placement:"right"}}}(e,n,bt,M))}),[ht,ut,bt,M]);if(s((()=>{if(!ht||!ut||"center"===bt)return;if(!z)return;const t=g(ut.target);null==t||t.scrollIntoView({behavior:I,block:"center",inline:"center"})}),[ht,ct,ut,bt,z,I]),d((()=>{_t()}),[_t,ct]),s((()=>{if(!ht)return;const t=()=>_t();return window.addEventListener("resize",t),window.addEventListener("scroll",t,!0),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t,!0)}}),[ht,_t]),s((()=>{if(!ht||!kt)return;const t=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=t}}),[ht,kt]),s((()=>{var t;ht&&(null===(t=pt.current)||void 0===t||t.focus())}),[ht,ct]),s((()=>{if(!ht)return;const t=t=>{if("Escape"===t.key&&C)return t.preventDefault(),void dt.skip();E&&("ArrowRight"===t.key||"Enter"===t.key?(t.preventDefault(),dt.next()):"ArrowLeft"===t.key&&(t.preventDefault(),dt.prev()))};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)}),[ht,C,E,dt]),!ht||!ut||"undefined"==typeof document)return null;const xt=Object.assign(Object.assign({},dt),{step:ut}),Lt=!!ft&&"center"!==bt?{top:ft.top-wt,left:ft.left-wt,width:ft.width+2*wt,height:ft.height+2*wt}:null,Nt=()=>{S&&dt.skip()},St=[];kt||!Lt?St.push({inset:0}):St.push({top:0,left:0,right:0,height:Math.max(0,Lt.top)},{top:Lt.top+Lt.height,left:0,right:0,bottom:0},{top:Lt.top,left:0,width:Math.max(0,Lt.left),height:Lt.height},{top:Lt.top,left:Lt.left+Lt.width,right:0,height:Lt.height});const Ct=(null!==(et=ut.showBack)&&void 0!==et?et:O)&&!dt.isFirst,Et=null!==(ot=ut.showSkip)&&void 0!==ot?ot:D,zt=dt.isLast?null!==(nt=ut.finishLabel)&&void 0!==nt?nt:H:null!==(it=ut.nextLabel)&&void 0!==it?it:F,It=null!==(lt=ut.backLabel)&&void 0!==lt?lt:A;return h(t("div",{className:f("onboarding",W),style:{zIndex:j},role:"presentation",children:[St.map(((t,o)=>e("div",{className:"onboarding__blocker",style:t,onClick:Nt,"aria-hidden":"true"},o))),Lt&&e("div",{className:"onboarding__spotlight",style:{top:Lt.top,left:Lt.left,width:Lt.width,height:Lt.height,borderRadius:yt},"aria-hidden":"true"}),t("div",{ref:pt,className:f("onboarding__popup",V),"data-placement":null!==(rt=null==mt?void 0:mt.placement)&&void 0!==rt?rt:"center",role:"dialog","aria-modal":kt,"aria-label":"string"==typeof ut.title?ut.title:"Onboarding step",tabIndex:-1,style:{top:null!==(at=null==mt?void 0:mt.top)&&void 0!==at?at:0,left:null!==(st=null==mt?void 0:mt.left)&&void 0!==st?st:0,visibility:mt?"visible":"hidden"},children:[(null==mt?void 0:mt.placement)&&"center"!==mt.placement&&e("span",{className:"onboarding__arrow","aria-hidden":"true"}),K?K(xt):t(o,{children:[R&&e("button",{type:"button",className:"onboarding__close","aria-label":"Close onboarding",onClick:()=>dt.skip(),children:e(u,{icon:"close",size:16})}),null!=ut.title&&e("div",{className:"onboarding__title",children:ut.title}),e("div",{className:"onboarding__content",children:ut.content}),Q?Q(xt):t("div",{className:"onboarding__footer",children:[e("div",{className:"onboarding__footer-left",children:B&&t("span",{className:"onboarding__progress","aria-live":"polite",children:[ct+1," of ",m.length]})}),t("div",{className:"onboarding__footer-right",children:[Et&&!dt.isLast&&e(c,{variant:"ghost",size:"sm",label:P,onClick:()=>dt.skip()}),Ct&&e(c,{variant:"secondary",size:"sm",label:It,onClick:()=>dt.prev()}),e(c,{variant:"primary",size:"sm",label:zt,onClick:()=>dt.next()})]})]})]})]})]}),document.body)}));export{m as Onboarding};
+//# sourceMappingURL=onboarding.js.map

package/dist/esm/components/src/radio-group/radio-group.d.ts

@@ -1,16 +1,19 @@
 import "./radio-group.css";
+import { Icon } from "../icon/icon";
 import type { IconType, TooltipPosition } from "../../../types";
 /**
  * One entry in a `RadioGroup` `options` array.
  * @property {string} label - Option title.
  * @property {string} value - Emitted to `onChange` when selected.
  * @property {import("../../../types").IconType} [icon] - Optional leading icon.
+ * @property {Omit<React.ComponentProps<typeof Icon>, "icon">} [iconProps] - Extra props forwarded to the built-in `Icon` (and its `<svg>`).
  * @property {"active"|"inactive"} [dot] - Optional status dot style when no icon.
  */
 export interface RadioOption {
     label: string;
     value: string;
     icon?: IconType;
+    iconProps?: Omit<React.ComponentProps<typeof Icon>, "icon">;
     dot?: "active" | "inactive";
     disabled?: boolean;
     tooltip?: string;

package/dist/esm/components/src/radio-group/radio-group.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as i}from"react/jsx-runtime";import"./radio-group.css";import{Icon as a}from"../icon/icon.js";const r=({options:r,selected:e,onChange:t,ariaLabel:l,size:d="md",className:p="",optionClassName:s=""})=>o("div",{role:"radiogroup","aria-label":l,className:`radio-group radio-group--${d} ${p}`,children:r.map((r=>{var l;return i("button",{type:"button",onClick:()=>!r.disabled&&t(r.value),disabled:r.disabled,className:`radio-group-option ${e===r.value?"radio-group-option-selected":""} ${r.disabled?"radio-group-option-disabled":""} ${s}`,role:"radio","aria-checked":e===r.value,children:[r.dot&&o("span",{className:`radio-group-option-dot radio-group-option-dot--${r.dot}`}),o("span",{className:"radio-group-option-label",children:r.label}),r.icon&&o(a,{icon:r.icon,size:16,className:"radio-group-option-icon"}),r.tooltip&&o(a,{icon:"info",size:14,tooltip:r.tooltip,tooltipPosition:null!==(l=r.tooltipPosition)&&void 0!==l?l:"top",className:"radio-group-option-info"})]},r.value)}))});export{r as RadioGroup};
+import{jsx as o,jsxs as i}from"react/jsx-runtime";import"./radio-group.css";import{Icon as a}from"../icon/icon.js";import{cn as r}from"../../../utils/src/cn.js";const e=({options:e,selected:s,onChange:t,ariaLabel:l,size:n="md",className:p="",optionClassName:d=""})=>o("div",{role:"radiogroup","aria-label":l,className:`radio-group radio-group--${n} ${p}`,children:e.map((e=>{var l,n;return i("button",{type:"button",onClick:()=>!e.disabled&&t(e.value),disabled:e.disabled,className:`radio-group-option ${s===e.value?"radio-group-option-selected":""} ${e.disabled?"radio-group-option-disabled":""} ${d}`,role:"radio","aria-checked":s===e.value,children:[e.dot&&o("span",{className:`radio-group-option-dot radio-group-option-dot--${e.dot}`}),o("span",{className:"radio-group-option-label",children:e.label}),e.icon&&o(a,Object.assign({icon:e.icon,size:16},e.iconProps,{className:r("radio-group-option-icon",null===(l=e.iconProps)||void 0===l?void 0:l.className)})),e.tooltip&&o(a,{icon:"info",size:14,tooltip:e.tooltip,tooltipPosition:null!==(n=e.tooltipPosition)&&void 0!==n?n:"top",className:"radio-group-option-info"})]},e.value)}))});export{e as RadioGroup};
 //# sourceMappingURL=radio-group.js.map

package/dist/esm/hooks/index.d.ts

@@ -12,6 +12,7 @@ export * from "./src/use-key-press";
 export * from "./src/use-long-press";
 export * from "./src/use-media-query";
 export * from "./src/use-mouse";
+export * from "./src/use-onboarding";
 export * from "./src/use-timeout";
 export { useToast, ToastContext, type ToastContextType } from "./src/use-toast";
 export * from "./src/use-window-scroll";

package/dist/esm/hooks/src/use-click-outside.d.ts

@@ -9,5 +9,5 @@ type Handler = (event: MouseEvent | TouchEvent) => void;
  * @param handler - Called when an outside interaction happens.
  * @param mouseEvent - Which mouse event to listen for (defaults to `"mousedown"`).
  */
-export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: Handler, mouseEvent?: "mousedown" | "mouseup"): void;
 export {};

package/dist/esm/hooks/src/use-dropdown-position.d.ts

@@ -7,4 +7,4 @@ import type { RefObject } from "react";
  * @param direction - Force `"top"`/`"bottom"` or let it auto-detect.
  * @param menuHeight - Expected menu height (px) used for the calculation.
  */
-export declare function useDropdownPosition(containerRef: RefObject<HTMLElement>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";
+export declare function useDropdownPosition(containerRef: RefObject<HTMLElement | null>, isOpen: boolean, direction?: "top" | "bottom" | "auto", menuHeight?: number): "top" | "bottom";

package/dist/esm/hooks/src/use-onboarding.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Pluggable persistence adapter for onboarding flows. Swap to back completion
+ * with cookies, a backend, or anything else by implementing these two methods.
+ *
+ * @property {(id: string) => boolean} isCompleted - Whether the flow `id` was already finished/skipped.
+ * @property {(id: string, completed: boolean) => void} setCompleted - Persist (or clear) completion for `id`.
+ */
+export interface OnboardingStorage {
+    isCompleted: (id: string) => boolean;
+    setCompleted: (id: string, completed: boolean) => void;
+}
+export declare const localStorageOnboarding: OnboardingStorage;
+export declare const memoryOnboarding: OnboardingStorage;
+/**
+ * Options for {@link useOnboarding}.
+ *
+ * @property {string} id - Stable flow identifier; used as the persistence key.
+ * @property {number} total - Number of steps in the flow.
+ * @property {boolean} [run] - Controlled active state. Omit to let the hook manage start/stop internally.
+ * @property {boolean} [autoStart] - In uncontrolled mode, start on mount when the flow is not yet completed. Default `true`.
+ * @property {boolean} [persist] - Persist completion so a finished/skipped flow does not auto-restart. Default `true`.
+ * @property {OnboardingStorage} [storage] - Persistence adapter. Default `localStorageOnboarding`.
+ * @property {number} [startDelay] - Delay (ms) before auto-start, e.g. to let the page settle. Default `0`.
+ */
+export interface UseOnboardingOptions {
+    id: string;
+    total: number;
+    run?: boolean;
+    autoStart?: boolean;
+    persist?: boolean;
+    storage?: OnboardingStorage;
+    startDelay?: number;
+    onStart?: () => void;
+    onStepChange?: (index: number, previous: number) => void;
+    onSkip?: (index: number) => void;
+    onFinish?: () => void;
+    onStop?: () => void;
+}
+/** Imperative control surface + state returned by {@link useOnboarding}. */
+export interface UseOnboardingReturn {
+    active: boolean;
+    index: number;
+    total: number;
+    isFirst: boolean;
+    isLast: boolean;
+    completed: boolean;
+    start: () => void;
+    stop: () => void;
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+    skip: () => void;
+    finish: () => void;
+    reset: () => void;
+}
+/**
+ * Headless onboarding/tour state machine: drives a flow by `id`, tracks the
+ * current step, persists completion, and supports controlled or uncontrolled use.
+ *
+ * Pair with the `Onboarding` component for ready-made coachmarks, or render your
+ * own UI from the returned state for a fully custom flow.
+ *
+ * @param {UseOnboardingOptions} options
+ * @returns {UseOnboardingReturn} State (`active`, `index`, `isFirst`, …) and controls (`next`, `prev`, `skip`, `finish`, `reset`, …).
+ */
+export declare function useOnboarding({ id, total, run, autoStart, persist, storage, startDelay, onStart, onStepChange, onSkip, onFinish, onStop, }: UseOnboardingOptions): UseOnboardingReturn;

package/dist/esm/hooks/src/use-onboarding.js

@@ -0,0 +1,2 @@
+import{useState as t,useRef as n,useCallback as e,useEffect as o}from"react";const r="h2o-onboarding:",i={isCompleted:t=>{try{return"undefined"!=typeof window&&"1"===window.localStorage.getItem(r+t)}catch(t){return!1}},setCompleted:(t,n)=>{try{if("undefined"==typeof window)return;n?window.localStorage.setItem(r+t,"1"):window.localStorage.removeItem(r+t)}catch(t){}}};function a({id:r,total:a,run:l,autoStart:c=!0,persist:s=!0,storage:u=i,startDelay:p=0,onStart:d,onStepChange:S,onSkip:v,onFinish:g,onStop:h}){const m=void 0!==l,[C,f]=t(!1),[w,k]=t(0),[y,F]=t((()=>!!s&&u.isCompleted(r))),x=m?l:C,I=n(0),T=e((t=>{I.current=t,k(t)}),[]),M=n({onStart:d,onStepChange:S,onSkip:v,onFinish:g,onStop:h,storage:u,persist:s,id:r});M.current={onStart:d,onStepChange:S,onSkip:v,onFinish:g,onStop:h,storage:u,persist:s,id:r};const b=e((t=>{const{persist:n,storage:e,id:o}=M.current;n&&e.setCompleted(o,t),F(t)}),[]),D=e((()=>{var t,n;T(0),m||f(!0),null===(n=(t=M.current).onStart)||void 0===n||n.call(t)}),[m,T]),L=e((()=>{var t,n;m||f(!1),null===(n=(t=M.current).onStop)||void 0===n||n.call(t)}),[m]),j=e((t=>{var n,e;const o=Math.max(0,Math.min(t,a-1)),r=I.current;o!==r&&(T(o),null===(e=(n=M.current).onStepChange)||void 0===e||e.call(n,o,r))}),[a,T]),q=e((()=>{var t,n,e,o;b(!0),m||f(!1),null===(n=(t=M.current).onFinish)||void 0===n||n.call(t),null===(o=(e=M.current).onStop)||void 0===o||o.call(e)}),[m,b]),z=e((()=>{var t,n;const e=I.current;e>=a-1?q():(T(e+1),null===(n=(t=M.current).onStepChange)||void 0===n||n.call(t,e+1,e))}),[a,q,T]),A=e((()=>{var t,n;const e=I.current;e<=0||(T(e-1),null===(n=(t=M.current).onStepChange)||void 0===n||n.call(t,e-1,e))}),[T]),B=e((()=>{var t,n,e,o;b(!0),m||f(!1),null===(n=(t=M.current).onSkip)||void 0===n||n.call(t,I.current),null===(o=(e=M.current).onStop)||void 0===o||o.call(e)}),[m,b]),E=e((()=>{b(!1)}),[b]),G=n(!1);o((()=>{if(!m&&c&&!G.current&&!(s&&u.isCompleted(r)||a<=0)){if(G.current=!0,p>0){const t=setTimeout(D,p);return()=>clearTimeout(t)}D()}}),[m,c,s,r,a,p]);const H=n(x);return o((()=>{x&&!H.current&&T(0),H.current=x}),[x,T]),{active:x,index:w,total:a,isFirst:w<=0,isLast:w>=a-1,completed:y,start:D,stop:L,next:z,prev:A,goTo:j,skip:B,finish:q,reset:E}}export{i as localStorageOnboarding,a as useOnboarding};
+//# sourceMappingURL=use-onboarding.js.map

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export{ToastProvider}from"./components/src/toast/toast.js";export{Button}from"./components/src/button/button.js";export{Checkbox,CheckboxGroup}from"./components/src/checkbox/checkbox.js";export{Icon}from"./components/src/icon/icon.js";export{Radio}from"./components/src/radio/radio.js";export{Tooltip}from"./components/src/tooltip/tooltip.js";export{Toggle}from"./components/src/toggle/toggle.js";export{ContentSwitch}from"./components/src/content-switch/content-switch.js";export{Input}from"./components/src/input/input.js";export{Textarea}from"./components/src/textarea/textarea.js";export{Dropdown}from"./components/src/dropdown/dropdown.js";export{Slider}from"./components/src/slider/slider.js";export{SidePanel}from"./components/src/side-panel/side-panel.js";export{Modal}from"./components/src/modal/modal.js";export{Tag}from"./components/src/tag/tag.js";export{Accordion}from"./components/src/accordion/accordion.js";export{MultiSelect}from"./components/src/multi-select/multi-select.js";export{RadioGroup}from"./components/src/radio-group/radio-group.js";export{Tabs}from"./components/src/tabs/tabs.js";export{PopOver,PopOverContent,PopOverTrigger}from"./components/src/popover/popover.js";export{Pagination}from"./components/src/pagination/pagination.js";export{Table}from"./components/src/table/table.js";export{Logo}from"./components/src/logo/logo.js";export{Calendar}from"./components/src/calendar/calendar.js";export{MonthCalendar}from"./components/src/month-calendar/month-calendar.js";export{Loader}from"./components/src/loader/loader.js";export{Message}from"./components/src/message/message.js";export{MultiMenu}from"./components/src/multi-menu/multi-menu.js";export{CompactMultiSelect}from"./components/src/compact-multi-select/compact-multi-select.js";export{DateRangePicker}from"./components/src/date-range-picker/date-range-picker.js";export{ExpandableTable}from"./components/src/expandable-table/expandable-table.js";export{Chip}from"./components/src/chip/chip.js";export{SegmentedToggle}from"./components/src/segmented-toggle/segmented-toggle.js";export{Skeleton}from"./components/src/skeleton/skeleton.js";export{DatePicker}from"./components/src/date-picker/date-picker.js";export{TimePicker}from"./components/src/time-picker/time-picker.js";export{ExpandableSearch}from"./components/src/expandable-search/expandable-search.js";
+export{ToastProvider}from"./components/src/toast/toast.js";export{Button}from"./components/src/button/button.js";export{Checkbox,CheckboxGroup}from"./components/src/checkbox/checkbox.js";export{Icon}from"./components/src/icon/icon.js";export{Radio}from"./components/src/radio/radio.js";export{Tooltip}from"./components/src/tooltip/tooltip.js";export{Toggle}from"./components/src/toggle/toggle.js";export{ContentSwitch}from"./components/src/content-switch/content-switch.js";export{Input}from"./components/src/input/input.js";export{Textarea}from"./components/src/textarea/textarea.js";export{Dropdown}from"./components/src/dropdown/dropdown.js";export{Slider}from"./components/src/slider/slider.js";export{SidePanel}from"./components/src/side-panel/side-panel.js";export{Modal}from"./components/src/modal/modal.js";export{Tag}from"./components/src/tag/tag.js";export{Accordion}from"./components/src/accordion/accordion.js";export{MultiSelect}from"./components/src/multi-select/multi-select.js";export{RadioGroup}from"./components/src/radio-group/radio-group.js";export{Tabs}from"./components/src/tabs/tabs.js";export{PopOver,PopOverContent,PopOverTrigger}from"./components/src/popover/popover.js";export{Pagination}from"./components/src/pagination/pagination.js";export{Table}from"./components/src/table/table.js";export{Logo}from"./components/src/logo/logo.js";export{Calendar}from"./components/src/calendar/calendar.js";export{MonthCalendar}from"./components/src/month-calendar/month-calendar.js";export{Loader}from"./components/src/loader/loader.js";export{Message}from"./components/src/message/message.js";export{MultiMenu}from"./components/src/multi-menu/multi-menu.js";export{CompactMultiSelect}from"./components/src/compact-multi-select/compact-multi-select.js";export{DateRangePicker}from"./components/src/date-range-picker/date-range-picker.js";export{ExpandableTable}from"./components/src/expandable-table/expandable-table.js";export{Chip}from"./components/src/chip/chip.js";export{SegmentedToggle}from"./components/src/segmented-toggle/segmented-toggle.js";export{Skeleton}from"./components/src/skeleton/skeleton.js";export{DatePicker}from"./components/src/date-picker/date-picker.js";export{TimePicker}from"./components/src/time-picker/time-picker.js";export{ExpandableSearch}from"./components/src/expandable-search/expandable-search.js";export{Onboarding}from"./components/src/onboarding/onboarding.js";
 //# sourceMappingURL=index.js.map

package/dist/hooks/components/index.d.ts

@@ -35,3 +35,4 @@ export * from "./src/skeleton/skeleton";
 export * from "./src/date-picker/date-picker";
 export * from "./src/time-picker/time-picker";
 export * from "./src/expandable-search/expandable-search";
+export * from "./src/onboarding/onboarding";

package/dist/hooks/components/src/button/button.d.ts

@@ -1,5 +1,6 @@
 import "./button.css";
 import type { IconType, TooltipPosition } from "../../../types";
+import { Icon } from "../icon/icon";
 import React from "react";
 /**
  * Extends native `HTMLButtonElement` attributes
@@ -11,6 +12,7 @@ import React from "react";
  * @property {"left"|"right"} [iconPosition] - Icon position relative to the label. Default `"right"`.
  * @property {boolean} [iconOnly] - Icon without visible text.
  * @property {number} [iconStrokeWidth] - SVG stroke width for the icon. Default `1.5`.
+ * @property {Omit<React.ComponentProps<typeof Icon>, "icon">} [iconProps] - Extra props forwarded to the built-in `Icon` (and its `<svg>`); overrides defaults like `size`/`strokeWidth`.
  * @property {boolean} [isLoading] - Shows a spinner and disables the button. Default `false`.
  * @property {boolean} [fullWidth] - Stretches to 100% width of the container. Default `false`.
  * @property {string} [tooltip] - If set, wraps the button in a `Tooltip` with this text.
@@ -22,6 +24,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     label?: string;
     iconStrokeWidth?: number;
     icon?: IconType;
+    iconProps?: Omit<React.ComponentProps<typeof Icon>, "icon">;
     iconPosition?: "left" | "right";
     iconOnly?: boolean;
     isLoading?: boolean;