h2o-library 1.8.0 → 2.0.1

package/dist/esm/components/src/date-picker/date-picker.css

@@ -0,0 +1,160 @@
+.date-picker-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-family: inherit;
+}
+
+/* ── Header ── */
+
+.date-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.date-picker-labels {
+  display: flex;
+  flex: 1;
+  gap: 0.75rem;
+}
+
+.date-picker-label {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.date-picker-clear {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.date-picker-clear:hover {
+  color: hsl(var(--primary));
+}
+
+/* ── Single wrapper ── */
+
+.date-picker-wrapper {
+  position: relative;
+}
+
+/* ── Range wrapper: two fields side by side ── */
+
+.date-picker-range-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.date-picker-field-wrapper {
+  position: relative;
+}
+
+/* ── Trigger ── */
+
+.date-picker-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  border: 1.5px solid hsl(var(--muted));
+  border-radius: 0.5rem;
+  background: hsl(var(--input));
+  cursor: pointer;
+  transition: border-color 0.2s;
+  font-family: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+}
+
+.date-picker-trigger:hover:not([disabled]) {
+  border-color: hsl(var(--primary));
+}
+
+.date-picker-trigger:hover:not([disabled]) .date-picker-icon {
+  color: hsl(var(--primary));
+}
+
+.date-picker-trigger--open {
+  border-color: hsl(var(--primary));
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.date-picker-trigger--error {
+  border-color: hsl(var(--destructive));
+  background-color: hsl(var(--destructive-bg) / 0.3);
+}
+
+.date-picker-trigger[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.date-picker-placeholder {
+  color: hsl(var(--muted));
+  font-size: 0.875rem;
+}
+
+.date-picker-value {
+  color: hsl(var(--foreground));
+  font-size: 0.875rem;
+}
+
+.date-picker-icon {
+  color: hsl(var(--muted-200));
+  flex-shrink: 0;
+  transition: color 0.2s;
+}
+
+.date-picker-icon--open {
+  color: hsl(var(--primary));
+}
+
+/* ── Dropdown panel ── */
+
+.date-picker-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 200;
+  background-color: hsl(var(--input));
+  border: 1.5px solid hsl(var(--primary));
+  border-top: none;
+  border-radius: 0 0 0.5rem 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Strip the calendar's own border so it blends into the panel */
+.date-picker-panel .calendar-container {
+  border: none;
+  background: none;
+  max-width: none;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* ── Messages ── */
+
+.date-picker-note {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+}
+
+.date-picker-error-message {
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+}

package/dist/esm/components/src/date-picker/date-picker.d.ts

@@ -0,0 +1,35 @@
+import "./date-picker.css";
+/**
+ * Date input with inline `Calendar` popover: single `Date` or start/end `range` tuple.
+ *
+ * @property {"single"|"range"} [mode] - Field format and `value`/`onChange` shape. Default `"single"`.
+ * @property {Date|null|[Date|null,Date|null]} [value] - `null` means cleared; range uses tuple with partial `null` while picking.
+ * @property {(v:Date|null|[Date|null,Date|null]) => void} [onChange] - Emits the same shape as `value`.
+ * @property {Date} [minDate] - Inclusive lower bound for the calendar. Optional.
+ * @property {Date} [maxDate] - Inclusive upper bound. Optional.
+ * @property {Date[]} [disabledDates] - Unselectable days. Default `[]`.
+ * @property {string} [placeholder] - Empty input text. Default `"MM/DD/YYYY"`.
+ */
+interface DatePickerProps {
+    mode?: "single" | "range";
+    value?: Date | null | [Date | null, Date | null];
+    onChange?: (value: Date | null | [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    placeholder?: string;
+    label?: string;
+    endLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    error?: string;
+    note?: string;
+}
+/**
+ * Renders a text field that opens a `Calendar` for one date or a range, with min/max and disabled day rules.
+ *
+ * @param {DatePickerProps} props - `mode` drives value typing; `label` / `endLabel` for field captions.
+ * @returns {JSX.Element} The field group, popover calendar, and optional note/error.
+ */
+export declare const DatePicker: ({ mode, value, onChange, minDate, maxDate, disabledDates, placeholder, label, endLabel, disabled, className, error, note, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/date-picker/date-picker.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as a,Fragment as r}from"react/jsx-runtime";import"./date-picker.css";import{useState as l,useRef as i,useCallback as n}from"react";import{Calendar as t}from"../calendar/calendar.js";import{Icon as c}from"../icon/icon.js";import{useClickOutside as d}from"../../../hooks/src/use-click-outside.js";const s=e=>`${String(e.getMonth()+1).padStart(2,"0")}/${String(e.getDate()).padStart(2,"0")}/${e.getFullYear()}`,o=({mode:o="single",value:p,onChange:g,minDate:m,maxDate:k,disabledDates:u=[],placeholder:h="MM/DD/YYYY",label:N,endLabel:b="End Date",disabled:v=!1,className:D,error:f,note:j})=>{const[y,C]=l(!1),[A,S]=l("start"),Y=i(null);d(Y,(()=>{y&&C(!1)}));const w=null!=N?N:"range"===o?"Start Date":"Date",x="single"!==o||Array.isArray(p)?null:null!=p?p:null,$="range"===o&&Array.isArray(p)?p:[null,null],B="single"===o?!!x:!(!$[0]&&!$[1]),M=n(((e="start")=>{v||("range"===o?y&&A===e?C(!1):(S(e),C(!0)):C((e=>!e)))}),[v,o,y,A]),O=n((e=>{e instanceof Date&&(null==g||g(e),C(!1))}),[g]),E=n((e=>{Array.isArray(e)&&(null==g||g(e),e[0]&&e[1]&&C(!1))}),[g]),F=n((e=>{e.stopPropagation(),null==g||g("range"===o?[null,null]:null),C(!1)}),[g,o]),L=y&&("single"===o||"start"===A),P=y&&"range"===o&&"end"===A,q={minDate:m,maxDate:k,disabledDates:u};return e("div",{ref:Y,className:"date-picker-container"+(D?` ${D}`:""),children:[e("div",{className:"date-picker-header",children:[a("div",{className:"date-picker-labels",children:"single"===o?a("span",{className:"date-picker-label",children:w}):e(r,{children:[a("span",{className:"date-picker-label",children:w}),a("span",{className:"date-picker-label",children:b})]})}),B&&!v&&a("button",{type:"button",className:"date-picker-clear",onClick:F,children:"Clear"})]}),"single"===o&&e("div",{className:"date-picker-wrapper",children:[e("button",{type:"button",className:["date-picker-trigger",y?"date-picker-trigger--open":"",f?"date-picker-trigger--error":""].filter(Boolean).join(" "),onClick:()=>M(),disabled:v,children:[a("span",{className:x?"date-picker-value":"date-picker-placeholder",children:x?s(x):h}),a(c,{icon:"calendar",className:"date-picker-icon"+(y?" date-picker-icon--open":"")})]}),y&&a("div",{className:"date-picker-panel",children:a(t,Object.assign({mode:"single",value:null!=x?x:void 0,onChange:O},q))})]}),"range"===o&&e("div",{className:"date-picker-range-wrapper",children:[e("div",{className:"date-picker-field-wrapper",children:[e("button",{type:"button",className:["date-picker-trigger",L?"date-picker-trigger--open":"",f?"date-picker-trigger--error":""].filter(Boolean).join(" "),onClick:()=>M("start"),disabled:v,children:[a("span",{className:$[0]?"date-picker-value":"date-picker-placeholder",children:$[0]?s($[0]):h}),a(c,{icon:"calendar",className:"date-picker-icon"+(L?" date-picker-icon--open":"")})]}),L&&a("div",{className:"date-picker-panel",children:a(t,Object.assign({mode:"range",value:$,onChange:E},q))})]}),e("div",{className:"date-picker-field-wrapper",children:[e("button",{type:"button",className:["date-picker-trigger",P?"date-picker-trigger--open":"",f?"date-picker-trigger--error":""].filter(Boolean).join(" "),onClick:()=>M("end"),disabled:v,children:[a("span",{className:$[1]?"date-picker-value":"date-picker-placeholder",children:$[1]?s($[1]):h}),a(c,{icon:"calendar",className:"date-picker-icon"+(P?" date-picker-icon--open":"")})]}),P&&a("div",{className:"date-picker-panel",children:a(t,Object.assign({mode:"range",value:$,onChange:E},q))})]})]}),(j||f)&&a("small",{className:f?"date-picker-error-message":"date-picker-note",children:f||j})]})};export{o as DatePicker};
+//# sourceMappingURL=date-picker.js.map

package/dist/{css/src → esm/components/src/date-range-picker}/date-range-picker.css

@@ -2,9 +2,8 @@
   display: flex;
   background-color: hsl(var(--background));
   border-radius: 0.5rem;
-  box-shadow: var(--primary-shadow);
-  border: 1px solid hsl(var(--primary-muted));
-  font-family: sans-serif;
+  border: 1px solid hsl(var(--muted) / 50%);
+  font-family: inherit;
 }
 
 .date-range-picker__presets {
@@ -70,4 +69,4 @@
 
 .date-range-picker__calendars .calendar-container:nth-of-type(2) {
   grid-area: cal2;
-} 
+}

package/dist/esm/components/src/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,39 @@
+import "./date-range-picker.css";
+/**
+ * Built-in range shortcut id (e.g. `last_7_days`, `custom` to open the calendar only).
+ * @type {string}
+ */
+export type Preset = "today" | "last_7_days" | "last_30_days" | "last_3_months" | "last_6_months" | "last_12_months" | "month_to_date" | "year_to_date" | "next_7_days" | "next_30_days" | "next_3_months" | "next_6_months" | "next_12_months" | "rest_of_month" | "rest_of_year" | "custom";
+type PresetDirection = "last" | "next";
+/**
+ * Two-field range with preset radio list and embedded `Calendar` for `custom` / adjustments.
+ * **Controlled** via `value: [Date|null, Date|null]`.
+ *
+ * @property {[Date|null,Date|null]} [value] - Inclusive start/end; `null` slot means unset.
+ * @property {(value: [Date|null,Date|null]) => void} [onChange] - Emits the full tuple on change.
+ * @property {PresetDirection} [presetDirection] - `"last"` vs `"next"` preset menu. Default `"last"`.
+ * @property {Preset} [defaultPreset] - Initial active preset. Default `"custom"`.
+ * @property {(date: Date) => string} [formatDate] - Formats the two summary fields; default YYYY/MM/DD.
+ * @property {Date} [minDate] - Forwarded to `Calendar`. Optional.
+ * @property {Date} [maxDate] - Forwarded to `Calendar`. Optional.
+ */
+interface DateRangePickerProps {
+    value?: [Date | null, Date | null];
+    onChange?: (value: [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    presetDirection?: PresetDirection;
+    defaultPreset?: Preset;
+    /** Custom date display formatter. Defaults to YYYY/MM/DD. */
+    formatDate?: (date: Date) => string;
+    className?: string;
+}
+/**
+ * Renders preset radios plus a range `Calendar` and forwards remaining props (min/max, disabled days) to it.
+ *
+ * @param {DateRangePickerProps} props - `value`/`onChange` tuple, presets, and optional `className`.
+ * @returns {JSX.Element} The preset column, field pair, and popover `Calendar` when `custom` is active.
+ */
+export declare const DateRangePicker: ({ value, onChange, presetDirection, defaultPreset, formatDate, className, ...calendarProps }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/date-range-picker/date-range-picker.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import"./date-range-picker.css";import n,{useState as l,useMemo as s,useCallback as r}from"react";import{Calendar as o}from"../calendar/calendar.js";import{Radio as c}from"../radio/radio.js";import{Icon as u}from"../icon/icon.js";const d=[{label:"Today",value:"today"},{label:"Last 7 days",value:"last_7_days"},{label:"Last 30 days",value:"last_30_days"},{label:"Last 3 months",value:"last_3_months"},{label:"Last 6 months",value:"last_6_months"},{label:"Last 12 months",value:"last_12_months"},{label:"Month To Date",value:"month_to_date"},{label:"Year To Date",value:"year_to_date"},{label:"Custom Range",value:"custom"}],h=[{label:"Today",value:"today"},{label:"Next 7 days",value:"next_7_days"},{label:"Next 30 days",value:"next_30_days"},{label:"Next 3 months",value:"next_3_months"},{label:"Next 6 months",value:"next_6_months"},{label:"Next 12 months",value:"next_12_months"},{label:"Rest of Month",value:"rest_of_month"},{label:"Rest of Year",value:"rest_of_year"},{label:"Custom Range",value:"custom"}],i=e=>`${e.getFullYear()}/${(e.getMonth()+1).toString().padStart(2,"0")}/${e.getDate().toString().padStart(2,"0")}`,m=m=>{var{value:_=[null,null],onChange:D,presetDirection:g="last",defaultPreset:v="custom",formatDate:w,className:y}=m,b=e(m,["value","onChange","presetDirection","defaultPreset","formatDate","className"]);const[p,M]=l(_),[f,Y]=l(v),[x,N]=l(p[0]||new Date),[F,k]=l(null),C=null!=w?w:i,L="next"===g?h:d;n.useEffect((()=>{M(_),_[0]&&N(_[0])}),[_]);const j=s((()=>new Date(x.getFullYear(),x.getMonth()+1,1)),[x]),S=e=>{if(Y(e),"custom"===e)M([null,null]),null==D||D([null,null]);else{const t=(e=>{const t=new Date;switch(t.setHours(0,0,0,0),e){case"today":return[new Date(t),new Date(t)];case"last_7_days":{const e=new Date(t);return e.setDate(t.getDate()-6),[e,new Date(t)]}case"last_30_days":{const e=new Date(t);return e.setDate(t.getDate()-29),[e,new Date(t)]}case"last_3_months":{const e=new Date(t);return e.setMonth(t.getMonth()-3),[e,new Date(t)]}case"last_6_months":{const e=new Date(t);return e.setMonth(t.getMonth()-6),[e,new Date(t)]}case"last_12_months":{const e=new Date(t);return e.setFullYear(t.getFullYear()-1),[e,new Date(t)]}case"month_to_date":return[new Date(t.getFullYear(),t.getMonth(),1),new Date(t)];case"year_to_date":return[new Date(t.getFullYear(),0,1),new Date(t)];case"next_7_days":{const e=new Date(t);return e.setDate(t.getDate()+6),[new Date(t),e]}case"next_30_days":{const e=new Date(t);return e.setDate(t.getDate()+29),[new Date(t),e]}case"next_3_months":{const e=new Date(t);return e.setMonth(t.getMonth()+3),[new Date(t),e]}case"next_6_months":{const e=new Date(t);return e.setMonth(t.getMonth()+6),[new Date(t),e]}case"next_12_months":{const e=new Date(t);return e.setFullYear(t.getFullYear()+1),[new Date(t),e]}case"rest_of_month":{const e=new Date(t.getFullYear(),t.getMonth()+1,0);return[new Date(t),e]}case"rest_of_year":{const e=new Date(t.getFullYear(),11,31);return[new Date(t),e]}default:return null}})(e);t&&(M(t),null==D||D(t),N(t[0]))}},O=e=>{Array.isArray(e)&&(M(e),Y("custom"),null==D||D(e))},R=e=>{p[0]&&!p[1]&&k(e)},T=()=>{k(null)},$=r((()=>{N((e=>new Date(e.getFullYear(),e.getMonth()+1,1)))}),[]),E=r((()=>{N((e=>new Date(e.getFullYear(),e.getMonth()-1,1)))}),[]);return t("div",{className:"date-range-picker"+(y?` ${y}`:""),children:[a("div",{className:"date-range-picker__presets",children:L.map((e=>a(c,{label:e.label,name:"date-range-preset",value:e.value,checked:f===e.value,onChange:()=>S(e.value)},e.value)))}),t("div",{className:"date-range-picker__main",children:[t("div",{className:"date-range-picker__display",children:[p[0]?C(p[0]):"YYYY/MM/DD"," → ",p[1]?C(p[1]):"YYYY/MM/DD"]}),t("div",{className:"date-range-picker__calendars",children:[t("div",{className:"date-range-picker__header",children:[a("button",{className:"calendar-nav-button",onClick:E,"aria-label":"Previous month",children:a(u,{icon:"chevron-left"})}),a("div",{className:"calendar-title",children:x.toLocaleString("default",{month:"short",year:"numeric"})})]}),t("div",{className:"date-range-picker__header",children:[a("div",{className:"calendar-title",children:j.toLocaleString("default",{month:"short",year:"numeric"})}),a("button",{className:"calendar-nav-button",onClick:$,"aria-label":"Next month",children:a(u,{icon:"chevron-right"})})]}),a(o,Object.assign({mode:"range",value:p,onChange:O,month:x,hideHeader:!0,hideOutsideDays:!0,hoverDate:F,onDayMouseEnter:R,onDayMouseLeave:T},b)),a(o,Object.assign({mode:"range",value:p,onChange:O,month:j,hideHeader:!0,hideOutsideDays:!0,hoverDate:F,onDayMouseEnter:R,onDayMouseLeave:T},b))]})]})]})};export{m as DateRangePicker};
+//# sourceMappingURL=date-range-picker.js.map

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

@@ -15,6 +15,17 @@
   font-size: 0.875rem;
   font-weight: 500;
   color: hsl(var(--foreground));
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.dropdown-info-icon {
+  color: hsl(var(--muted-200));
+}
+
+.dropdown-info-icon:hover {
+  color: hsl(var(--primary));
 }
 
 .dropdown-clear {
@@ -36,17 +47,17 @@
   width: 100%;
   border-radius: 0.375rem;
   border: 1.5px solid hsl(var(--muted));
-  background: hsl(var(--background));
-  transition: border-color 0.2s, background-color 0.2s;
+  background: hsl(var(--input));
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
 }
 
 .dropdown-wrapper:not(.dropdown-disabled):not(.dropdown-error):hover {
   border-color: hsl(var(--primary));
 }
 
-.dropdown-wrapper.dropdown-focused:not(.dropdown-disabled):not(
-    .dropdown-error
-  ) {
+.dropdown-wrapper.dropdown-focused:not(.dropdown-disabled):not(.dropdown-error) {
   border-color: hsl(var(--primary-300));
 }
 
@@ -90,6 +101,12 @@
   white-space: nowrap;
 }
 
+.dropdown-value-placeholder {
+  color: hsl(var(--muted));
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
 .dropdown-chevron {
   flex-shrink: 0;
   margin-left: 0.5rem;
@@ -123,7 +140,7 @@
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
   border-radius: 0.375rem;
-  background-color: hsl(var(--background));
+  background-color: hsl(var(--input));
   border: 1px solid hsl(var(--muted));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   max-height: 15rem;
@@ -196,9 +213,7 @@
   transition: all 0.2s;
 }
 
-.dropdown-option:hover:not(.dropdown-option-disabled):not(
-    .dropdown-option-selected
-  ) {
+.dropdown-option:hover:not(.dropdown-option-disabled):not(.dropdown-option-selected) {
   background-color: hsl(var(--primary-disabled));
 }
 
@@ -222,13 +237,11 @@
   transition: color 0.2s;
 }
 
-.dropdown-wrapper:not(.dropdown-disabled):not(.dropdown-error):hover
-  + .dropdown-note {
+.dropdown-wrapper:not(.dropdown-disabled):not(.dropdown-error):hover + .dropdown-note {
   color: hsl(var(--primary));
 }
 
-.dropdown-wrapper.dropdown-focused:not(.dropdown-disabled):not(.dropdown-error)
-  + .dropdown-note {
+.dropdown-wrapper.dropdown-focused:not(.dropdown-disabled):not(.dropdown-error) + .dropdown-note {
   color: hsl(var(--primary));
 }
 

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

@@ -0,0 +1,53 @@
+import "./dropdown.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+/**
+ * One selectable item in a `Dropdown` `options` list.
+ *
+ * @property {string} label - User-visible text in the list and when selected.
+ * @property {string} value - Stable value passed to `onChange`.
+ * @property {boolean} [disabled] - When true, the option cannot be selected. Default `false`.
+ */
+export interface DropdownOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * Props for the `Dropdown` component. **Controlled** via `value` and `onChange`
+ * (selected option `value` string, or `undefined` when cleared).
+ *
+ * @property {DropdownOption[]} options - The full list to render and filter.
+ * @property {string|undefined} [value] - Selected option’s `value`, or `undefined` when empty/cleared.
+ * @property {(value: string|undefined) => void} [onChange] - Called on select or clear.
+ * @property {boolean} [enableSearch] - When true, filters options by a search string. Default `false`.
+ * @property {"top"|"bottom"|"auto"} [direction] - Where the panel opens relative to the field. Default `"auto"`.
+ */
+interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "value" | "onChange"> {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    showClear?: boolean;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    options: DropdownOption[];
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string | undefined) => void;
+    enableSearch?: boolean;
+    direction?: "top" | "bottom" | "auto";
+    arrowClassName?: string;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+/**
+ * Single-select combobox: trigger button, optional in-list search, clear, and field chrome (label, error, note).
+ *
+ * @param {DropdownProps} props - Controlled `value` / `onChange` and `options` list.
+ * @param {React.Ref<HTMLButtonElement>} ref - Reference to the trigger `<button>`.
+ * @returns {React.ReactElement} The closed trigger and absolutely positioned list when open.
+ */
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as o}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import"./dropdown.css";import r,{useId as l,useState as a,useRef as d,useMemo as s,useEffect as i}from"react";import{Icon as t}from"../icon/icon.js";import{Input as p}from"../input/input.js";import{useDropdownPosition as c}from"../../../hooks/src/use-dropdown-position.js";import{useClickOutside as m}from"../../../hooks/src/use-click-outside.js";const u=r.forwardRef(((r,u)=>{var{size:w="md",label:h,showClear:b,note:v,error:N="",className:f="",containerClassName:C="",disabled:$,options:g,value:j,onChange:k,placeholder:y="Select an option",enableSearch:x=!1,direction:z="auto",arrowClassName:P="",tooltip:S,tooltipPosition:O="top",onOpen:D,onClose:F}=r,L=o(r,["size","label","showClear","note","error","className","containerClassName","disabled","options","value","onChange","placeholder","enableSearch","direction","arrowClassName","tooltip","tooltipPosition","onOpen","onClose"]);const B=l(),[E,I]=a(!1),[K,R]=a(!1),[_,q]=a(""),A=d(null),G=d(null),H=c(A,E,z),J=g.find((o=>o.value===j)),M=s((()=>x&&_?g.filter((o=>o.label.toLowerCase().includes(_.toLowerCase()))):g),[g,_,x]);m(A,(()=>{E&&(I(!1),q(""),null==F||F())}));const Q=()=>{I(!1),q(""),null==F||F()};i((()=>{E&&x&&G.current&&G.current.focus()}),[E,x]);const T=`${B}-menu`;return e("div",{className:`dropdown-container ${C}`,ref:A,onKeyDown:o=>{"Escape"===o.key&&E&&Q()},children:[(h||b&&j)&&e("div",{className:"dropdown-header",children:[h&&e("label",{htmlFor:B,className:"dropdown-label",children:[h,S&&n(t,{icon:"info",size:16,tooltip:S,className:"dropdown-info-icon",tooltipPosition:O})]}),b&&j&&!$&&n("button",{type:"button",onClick:o=>{o.stopPropagation(),null==k||k(void 0)},className:"dropdown-clear","aria-label":"Clear selection",children:"Clear"})]}),e("div",{className:`dropdown-wrapper ${N?"dropdown-error":""} ${$?"dropdown-disabled":""} ${K?"dropdown-focused":""}`,children:[e("button",Object.assign({id:B,ref:u,type:"button",className:`dropdown dropdown-${w} ${f}`,onClick:()=>E?Q():void($||(I(!0),null==D||D())),onFocus:()=>R(!0),onBlur:()=>R(!1),disabled:$,"aria-expanded":E,"aria-haspopup":"listbox","aria-controls":E?T:void 0},L,{children:[n("span",{className:"dropdown-value"+(J?"":" dropdown-value-placeholder"),children:J?J.label:y}),n(t,{icon:"chevron-down",className:`dropdown-chevron ${E?"dropdown-chevron-open":""} ${P}`})]})),E&&e("div",{id:T,role:"listbox","aria-label":h,className:`dropdown-menu dropdown-menu-${H}`,style:{position:"absolute",["bottom"===H?"top":"bottom"]:"100%",left:0,right:0},children:[x&&n("div",{className:"dropdown-search-wrapper",children:n(p,{ref:G,placeholder:"Search...",size:"sm",value:_,onChange:o=>q(o.target.value),rightIcon:"search"})}),n("div",{className:"dropdown-options-wrapper",children:M.length>0?M.map((o=>n("button",{type:"button",role:"option","aria-selected":o.value===j,className:`dropdown-option ${o.value===j?"dropdown-option-selected":""} ${o.disabled?"dropdown-option-disabled":""}`,onClick:()=>(o=>{o.disabled||(null==k||k(o.value),Q())})(o),disabled:o.disabled,children:o.label},o.value))):n("div",{className:"dropdown-no-options",children:"No options found."})})]})]}),(v||N)&&n("small",{className:N?"dropdown-error-message":"dropdown-note",children:N||v})]})}));u.displayName="Dropdown";export{u as Dropdown};
+//# sourceMappingURL=dropdown.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/{css/src → esm/components/src/expandable-table}/expandable-table.css

@@ -31,24 +31,24 @@
   color: hsl(var(--primary));
 }
 
-/* Row immediately before an expanded row: bottom border primary (forms top edge of expanded block) */
 .expandable-table tbody tr:has(+ tr.expanded-row) td {
   border-bottom-color: hsl(var(--primary));
 }
 
-/* Expanded main row: no vertical borders between cells; only outer left/right and top/bottom */
 .expandable-table tr.expanded-row td {
   border-bottom: 1px solid hsl(var(--primary));
   border-left: none;
   border-right: none;
 }
+
 .expandable-table tr.expanded-row td:first-child {
   border-left: 1px solid hsl(var(--primary));
 }
+
 .expandable-table tr.expanded-row td:last-child {
   border-right: 1px solid hsl(var(--primary));
 }
-/* Top border primary (below header when first row, or below previous row) */
+
 .expandable-table tbody tr.expanded-row td {
   border-top: 1px solid hsl(var(--primary));
 }
@@ -61,17 +61,15 @@
   padding: 1rem;
 }
 
-/* Expandable content row: primary border on all sides (divider above + bottom/left/right) */
 .expandable-table .expandable-row td {
   padding: 0;
   border: 1px solid hsl(var(--primary));
 }
-/* When expandable content row is last in table, keep bottom border (table.css removes it otherwise) */
+
 .expandable-table tbody tr.expandable-row:last-child td {
   border-bottom: 1px solid hsl(var(--primary));
 }
 
-/* Animation for expanding/collapsing rows */
 .expandable-table .expandable-row {
   transition: all 0.3s ease-in-out;
 }