h2o-library 1.7.1 → 2.0.0

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

@@ -0,0 +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};
+//# sourceMappingURL=chip.js.map

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

@@ -40,11 +40,15 @@
   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;
 }
 
-.compact-multi-select-wrapper:not(.compact-multi-select-disabled):not(.compact-multi-select-error):hover {
+.compact-multi-select-wrapper:not(.compact-multi-select-disabled):not(
+    .compact-multi-select-error
+  ):hover {
   border-color: hsl(var(--primary));
 }
 
@@ -128,44 +132,14 @@
   font-size: 1.125rem;
 }
 
-/* Tags for selected items */
-.compact-multi-select-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  background-color: hsl(var(--primary-muted));
-  color: hsl(var(--primary-400));
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.compact-multi-select-tag-remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: hsl(var(--primary-400));
-  opacity: 0.7;
-  transition: opacity 0.2s;
-}
-
-.compact-multi-select-tag-remove:hover {
-  opacity: 1;
-}
-
 /* Dropdown Menu */
 .compact-multi-select-menu {
   z-index: 50;
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
   border-radius: 0.375rem;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--muted));
+  background-color: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   max-height: 15rem;
   display: flex;
@@ -174,7 +148,7 @@
 
 .compact-multi-select-search-wrapper {
   padding: 0.5rem;
-  border-bottom: 1.5px solid hsl(var(--muted));
+  border-bottom: 1.5px solid hsl(var(--border));
 }
 
 .compact-multi-select-options-wrapper {
@@ -247,7 +221,9 @@
   transition: color 0.2s;
 }
 
-.compact-multi-select-wrapper:not(.compact-multi-select-disabled):not(.compact-multi-select-error):hover
+.compact-multi-select-wrapper:not(.compact-multi-select-disabled):not(
+    .compact-multi-select-error
+  ):hover
   + .compact-multi-select-note {
   color: hsl(var(--primary));
 }
@@ -292,4 +268,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-} 
+}

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

@@ -0,0 +1,52 @@
+import "./compact-multi-select.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+/**
+ * One row in `CompactMultiSelect` `options`.
+ * @property {string} label - Visible text.
+ * @property {string} value - Stable id in the `onChange` payload.
+ * @property {boolean} [disabled] - Excludes or grays out the option. Default `false`.
+ */
+export interface CompactMultiSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * Compact multi-select: tag list, optional search, max selections, and dropdown direction.
+ * **Controlled** via `value` / `onChange` as an array of {@link CompactMultiSelectOption}.
+ *
+ * @property {CompactMultiSelectOption[]} options - Full list to pick from.
+ * @property {CompactMultiSelectOption[]} [value] - Current selection; default `[]`.
+ * @property {(value: CompactMultiSelectOption[]) => void} [onChange] - Emits the new selection array.
+ * @property {number} [maxSelections] - Upper bound on selected count, if set.
+ */
+interface CompactMultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    showClear?: boolean;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    options: CompactMultiSelectOption[];
+    placeholder?: string;
+    value?: CompactMultiSelectOption[];
+    onChange?: (value: CompactMultiSelectOption[]) => void;
+    disabled?: boolean;
+    enableSearch?: boolean;
+    maxSelections?: number;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    direction?: "top" | "bottom" | "auto";
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+/**
+ * Multi-value dropdown in a single row of tags; supports search, tooltips, and panel flip.
+ *
+ * @param {CompactMultiSelectProps} props - Options, selection, and layout props.
+ * @param {React.Ref<HTMLDivElement>} ref - Root wrapper ref.
+ * @returns {React.ReactElement} The field, tags, and open list.
+ */
+export declare const CompactMultiSelect: React.ForwardRefExoticComponent<CompactMultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

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

package/dist/{css/src → esm/components/src/content-switch}/content-switch.css

@@ -45,7 +45,7 @@
   padding: 0.5rem;
   border: 1px solid transparent;
   transition: border-color 0.3s ease-in-out;
-  background-color: hsl(var(--background));
+  background-color: hsl(var(--input));
   width: fit-content;
   &:hover {
     border-color: hsl(var(--primary-disabled));
@@ -91,3 +91,19 @@
 .content-switch-option-disabled.content-switch-option-selected {
   opacity: 0.7;
 }
+
+.content-switch-option-icon {
+  flex-shrink: 0;
+}
+
+.content-switch-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}

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

@@ -0,0 +1,39 @@
+import "./content-switch.css";
+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.
+ */
+export type ContentSwitchOption = {
+    label: string;
+    value: string;
+    icon?: IconType;
+    disabled?: boolean;
+};
+/**
+ * **Controlled** `selected` value string; `variant` picks primary vs secondary surface styles.
+ *
+ * @property {ContentSwitchOption[]} options - Tab definitions.
+ * @property {string} selected - Must match one `option.value` for the active tab.
+ * @property {(value: string) => void} onChange - Fires with the chosen `value`.
+ * @property {"primary"|"secondary"} [variant] - Style preset. Default `"primary"`.
+ */
+type ContentSwitchProps = {
+    options: ContentSwitchOption[];
+    variant?: "primary" | "secondary";
+    className?: string;
+    optionClassName?: string;
+    selected: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+};
+/**
+ * Underline / chip style tab strip for switching content; `role="tablist"` with keyboard focus on tabs.
+ *
+ * @param {ContentSwitchProps} props - `options`, `selected`, `onChange`, and global `disabled` to dim all.
+ * @returns {JSX.Element} The tablist container and one `button` tab per option.
+ */
+export declare const ContentSwitch: ({ options, selected, onChange, variant, className, optionClassName, disabled, ariaLabel, }: ContentSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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};
+//# sourceMappingURL=content-switch.js.map

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 {};