h2o-library 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -20,6 +20,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ---
 
+## [2.0.1] — 2026-05-14
+
+### Added
+
+- **ExpandableSearch** — Reintroduced as a first-class component. Icon-only trigger that expands into an inline input on click, collapses on outside click when empty, supports controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) usage, three sizes (`sm`/`md`/`lg`), and customizable `expandedWidth`. Trigger exposes `aria-expanded`; hidden input is removed from the tab order when collapsed. `onChange` receives the new string value directly (no synthetic event).
+
+---
+
 ## [2.0.0] — 2026-04-29
 
 First tracked release. Establishes the package's public API surface and module layout.
@@ -71,4 +79,5 @@ First tracked release. Establishes the package's public API surface and module l
 None for this release.
 
 [Unreleased]: #unreleased
+[2.0.1]: #201--2026-05-14
 [2.0.0]: #200--2026-04-29

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

@@ -34,3 +34,4 @@ 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";

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

@@ -34,3 +34,4 @@ 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";

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

@@ -34,3 +34,4 @@ 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";

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/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{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";
 //# sourceMappingURL=index.js.map

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

@@ -34,3 +34,4 @@ 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";

package/dist/hooks/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 {};