h2o-library 2.0.0 → 2.1.0

package/dist/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/index.d.ts

@@ -34,3 +34,5 @@ export * from "./src/segmented-toggle/segmented-toggle";
 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/esm/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;

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

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as o,jsxs as i}from"react/jsx-runtime";import"./button.css";import{Tooltip as n}from"../tooltip/tooltip.js";import{Icon as l}from"../icon/icon.js";import r from"react";const e=()=>i("svg",{className:"button__spinner",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",children:[o("circle",{className:"button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o("path",{className:"button__spinner-path",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),s=r.forwardRef(((r,s)=>{var{variant:a="primary",size:c="md",label:d,icon:m,iconStrokeWidth:u=1.5,iconOnly:b=!1,iconPosition:p="right",isLoading:h=!1,fullWidth:f=!1,tooltip:_,tooltipPosition:g="top",className:v="",disabled:N,children:j,"aria-label":w}=r,y=t(r,["variant","size","label","icon","iconStrokeWidth","iconOnly","iconPosition","isLoading","fullWidth","tooltip","tooltipPosition","className","disabled","children","aria-label"]);const x=["button",`button--${a}`,`button--${c}`,h&&"button--loading",b&&"button--icon-only",f&&"button--full-width",v].filter(Boolean).join(" "),W=null!=w?w:b?_:void 0,k=m?o(l,{icon:m,className:"button__icon",strokeWidth:u}):null,z=o("button",Object.assign({ref:s,className:x,disabled:h||N,"aria-busy":h||void 0,"aria-label":W},y,{children:b?h?o(e,{}):k:i("div",{className:"button__content",children:["left"===p&&!h&&k,d||j,"right"===p&&!h&&k,h&&o(e,{})]})}));return _?o(n,{text:_,position:g,children:z}):z}));s.displayName="Button";export{s as Button};
+import{__rest as o}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as t,jsxs as i}from"react/jsx-runtime";import"./button.css";import{Tooltip as n}from"../tooltip/tooltip.js";import{Icon as l}from"../icon/icon.js";import r from"react";import{cn as s}from"../../../utils/src/cn.js";const e=()=>i("svg",{className:"button__spinner",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",children:[t("circle",{className:"button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),t("path",{className:"button__spinner-path",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),a=r.forwardRef(((r,a)=>{var{variant:c="primary",size:d="md",label:m,icon:u,iconProps:b,iconStrokeWidth:p=1.5,iconOnly:h=!1,iconPosition:f="right",isLoading:_=!1,fullWidth:g=!1,tooltip:v,tooltipPosition:N="top",className:j="",disabled:w,children:y,"aria-label":x}=r,P=o(r,["variant","size","label","icon","iconProps","iconStrokeWidth","iconOnly","iconPosition","isLoading","fullWidth","tooltip","tooltipPosition","className","disabled","children","aria-label"]);const W=["button",`button--${c}`,`button--${d}`,_&&"button--loading",h&&"button--icon-only",g&&"button--full-width",j].filter(Boolean).join(" "),k=null!=x?x:h?v:void 0,z=u?t(l,Object.assign({icon:u,strokeWidth:p},b,{className:s("button__icon",null==b?void 0:b.className)})):null,O=t("button",Object.assign({ref:a,className:W,disabled:_||w,"aria-busy":_||void 0,"aria-label":k},P,{children:h?_?t(e,{}):z:i("div",{className:"button__content",children:["left"===f&&!_&&z,m||y,"right"===f&&!_&&z,_&&t(e,{})]})}));return v?t(n,{text:v,position:N,children:O}):O}));a.displayName="Button";export{a as Button};
 //# sourceMappingURL=button.js.map

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/expandable-search/expandable-search.css

@@ -0,0 +1,120 @@
+.expandable-search {
+  --expandable-search-height: 40px;
+  --expandable-search-width: 200px;
+
+  position: relative;
+  width: fit-content;
+  overflow: hidden;
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-md);
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.expandable-search--sm {
+  --expandable-search-height: 32px;
+}
+
+.expandable-search--md {
+  --expandable-search-height: 40px;
+}
+
+.expandable-search--lg {
+  --expandable-search-height: 48px;
+}
+
+.expandable-search--expanded {
+  border-color: hsl(var(--primary));
+  background: hsl(var(--input));
+}
+
+.expandable-search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: var(--expandable-search-height);
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.expandable-search--expanded .expandable-search-container {
+  width: calc(
+    var(--expandable-search-width) + var(--expandable-search-height)
+  );
+}
+
+.expandable-search-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--expandable-search-height);
+  height: var(--expandable-search-height);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: hsl(var(--primary));
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.expandable-search-button:hover {
+  background-color: hsl(var(--primary-disabled));
+}
+
+.expandable-search-button:focus-visible {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 2px;
+}
+
+.expandable-search--expanded .expandable-search-button:hover {
+  background-color: transparent;
+  color: hsl(var(--primary-300));
+}
+
+.expandable-search-input {
+  position: absolute;
+  top: 0;
+  right: var(--expandable-search-height);
+  width: var(--expandable-search-width);
+  height: var(--expandable-search-height);
+  padding: 0 0.875rem;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font-size: 0.875rem;
+  font-family: inherit;
+  transform: translateX(100%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    transform 0.1s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0s linear 0.3s;
+}
+
+.expandable-search-input::placeholder {
+  color: hsl(var(--muted));
+}
+
+.expandable-search--expanded .expandable-search-input {
+  transform: translateX(0);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
+    visibility 0s linear 0.1s;
+}

package/dist/esm/components/src/expandable-search/expandable-search.d.ts

@@ -0,0 +1,40 @@
+import "./expandable-search.css";
+/**
+ * Props for `ExpandableSearch`.
+ *
+ * @property {"sm"|"md"|"lg"} [size] - Trigger and expanded field height. Default `"md"`.
+ * @property {string} [value] - Controlled value. When provided, the parent owns state.
+ * @property {string} [defaultValue] - Initial value when uncontrolled. Default `""`.
+ * @property {boolean} [defaultExpanded] - Initial expanded state when uncontrolled. Default `false`.
+ * @property {string} [placeholder] - Input placeholder. Default `"Search..."`.
+ * @property {number} [expandedWidth] - Width of the input area in px when expanded. Default `200`.
+ * @property {(value: string) => void} [onChange] - Fires on each keystroke with the new value.
+ * @property {(expanded: boolean) => void} [onExpandedChange] - Fires when expanded state changes.
+ * @property {string} [className] - Extra class names on the wrapper.
+ * @property {string} [openAriaLabel] - Aria label for the trigger when collapsed. Default `"Open search"`.
+ * @property {string} [closeAriaLabel] - Aria label for the trigger when expanded. Default `"Close search"`.
+ */
+interface ExpandableSearchProps {
+    size?: "sm" | "md" | "lg";
+    value?: string;
+    defaultValue?: string;
+    defaultExpanded?: boolean;
+    placeholder?: string;
+    expandedWidth?: number;
+    onChange?: (value: string) => void;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    openAriaLabel?: string;
+    closeAriaLabel?: string;
+}
+/**
+ * Icon-only search trigger that expands into an inline input on click.
+ *
+ * Collapses automatically when the user clicks outside while the input is empty.
+ * Toggling while expanded clears the value. Supports controlled or uncontrolled value.
+ *
+ * @param {ExpandableSearchProps} props - Controlled/uncontrolled value and presentation.
+ * @returns {JSX.Element} A pill-shaped wrapper containing the input and toggle button.
+ */
+export declare const ExpandableSearch: ({ size, value, defaultValue, defaultExpanded, placeholder, expandedWidth, onChange, onExpandedChange, className, openAriaLabel, closeAriaLabel, }: ExpandableSearchProps) => JSX.Element;
+export {};

package/dist/esm/components/src/expandable-search/expandable-search.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import"./expandable-search.css";import{useState as n,useRef as l,useEffect as r}from"react";import{Icon as o}from"../icon/icon.js";import{useClickOutside as s}from"../../../hooks/src/use-click-outside.js";const c=({size:c="md",value:d,defaultValue:t="",defaultExpanded:i=!1,placeholder:p="Search...",expandedWidth:h=200,onChange:u,onExpandedChange:m,className:x="",openAriaLabel:b="Open search",closeAriaLabel:f="Close search"})=>{const v=void 0!==d,[g,C]=n(t),[N,j]=n(i),k=l(null),y=l(null),z=v?d:g,A=e=>{v||C(e),null==u||u(e)},E=e=>{j(e),null==m||m(e)};s(k,(()=>{N&&!z&&E(!1)})),r((()=>{var e;N&&(null===(e=y.current)||void 0===e||e.focus())}),[N]);const L=["expandable-search",`expandable-search--${c}`,N?"expandable-search--expanded":"",x].filter(Boolean).join(" ");return e("div",{ref:k,className:L,style:{"--expandable-search-width":`${h}px`},children:a("div",{className:"expandable-search-container",children:[e("input",{ref:y,type:"text",value:z,onChange:e=>{A(e.target.value)},placeholder:p,className:"expandable-search-input",tabIndex:N?0:-1,"aria-hidden":!N||void 0}),e("button",{type:"button",onClick:()=>{if(N)return A(""),void E(!1);E(!0)},className:"expandable-search-button","aria-label":N?f:b,"aria-expanded":N,children:e(o,{icon:N?"close":"search",size:{sm:14,md:16,lg:18}[c]})})]})})};export{c as ExpandableSearch};
+//# sourceMappingURL=expandable-search.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>>;