h2o-library 1.7.1 → 2.0.0

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

@@ -1,3 +1,10 @@
+.textarea-root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+}
+
 .textarea-container {
   display: flex;
   flex-direction: column;
@@ -51,9 +58,10 @@
   width: 100%;
   border-radius: var(--radius-md);
   border: 1.5px solid hsl(var(--muted));
-  background: hsl(var(--background));
-  transition: border-color 0.2s, background-color 0.2s;
-  height: 100%;
+  background: hsl(var(--input));
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
 }
 
 .textarea-wrapper-resizable::after {
@@ -63,7 +71,7 @@
   bottom: 0;
   width: 24px;
   height: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 15C18.6709 15 18 14.3291 18 13.5C18 12.6709 18.6709 12 19.5 12C20.3291 12 21 12.6709 21 13.5C21 14.3291 20.3291 15 19.5 15ZM19.5 9C18.6709 9 18 8.32908 18 7.5C18 6.67092 18.6709 6 19.5 6C20.3291 6 21 6.67092 21 7.5C21 8.32908 20.3291 9 19.5 9ZM13.5 21C12.6709 21 12 20.3291 12 19.5C12 18.6738 12.6709 18 13.5 18C14.3291 18 15 18.6738 15 19.5C15 20.3291 14.3291 21 13.5 21ZM13.5 15C12.6709 15 12 14.3291 12 13.5C12 12.6709 12.6709 12 13.5 12C14.3291 12 15 12.6709 15 13.5C15 14.3291 14.3291 15 13.5 15ZM7.5 21C6.67383 21 6 20.3291 6 19.5C6 18.6738 6.67383 18 7.5 18C8.32912 18 9 18.6738 9 19.5C9 20.3291 8.32912 21 7.5 21ZM19.5 18C20.3291 18 21 18.6738 21 19.5C21 20.3291 20.3291 21 19.5 21C18.6709 21 18 20.3291 18 19.5C18 18.6738 18.6709 18 19.5 18Z' fill='black'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 15C18.6709 15 18 14.3291 18 13.5C18 12.6709 18.6709 12 19.5 12C20.3291 12 21 12.6709 21 13.5C21 14.3291 20.3291 15 19.5 15ZM19.5 9C18.6709 9 18 8.32908 18 7.5C18 6.67092 18.6709 6 19.5 6C20.3291 6 21 6.67092 21 7.5C21 8.32908 20.3291 9 19.5 9ZM13.5 21C12.6709 21 12 20.3291 12 19.5C12 18.6738 12.6709 18 13.5 18C14.3291 18 15 18.6738 15 19.5C15 20.3291 14.3291 21 13.5 21ZM13.5 15C12.6709 15 12 14.3291 12 13.5C12 12.6709 12.6709 12 13.5 12C14.3291 12 15 12.6709 15 13.5C15 14.3291 14.3291 15 13.5 15ZM7.5 21C6.67383 21 6 20.3291 6 19.5C6 18.6738 6.67383 18 7.5 18C8.32912 18 9 18.6738 9 19.5C9 20.3291 8.32912 21 7.5 21ZM19.5 18C20.3291 18 21 18.6738 21 19.5C21 20.3291 20.3291 21 19.5 21C18.6709 21 18 20.3291 18 19.5C18 18.6738 18.6709 18 19.5 18Z' fill='hsl(var(--muted))'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 16px;
@@ -77,13 +85,15 @@
   opacity: 1;
 }
 
+.textarea-wrapper-resizable .textarea-counter {
+  right: 1.75rem;
+}
+
 .textarea-wrapper:not(.textarea-disabled):not(.textarea-error):hover {
   border-color: hsl(var(--primary));
 }
 
-.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):has(
-    textarea:focus
-  ) {
+.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):has(textarea:focus) {
   border-color: hsl(var(--primary-300));
 }
 
@@ -114,6 +124,7 @@
   appearance: none;
   -webkit-appearance: none;
   font-family: inherit;
+  font-size: 0.875rem;
 }
 
 .textarea-wrapper-resizable .textarea {
@@ -128,37 +139,19 @@
   cursor: not-allowed;
 }
 
-/* Textarea sizes */
-.textarea-sm {
-  font-size: 0.875rem;
-  min-height: 80px;
-}
-
-.textarea-md {
-  font-size: 1rem;
-  min-height: 100px;
-}
-
-.textarea-lg {
-  font-size: 1.125rem;
-  min-height: 120px;
-}
-
 .textarea-note {
   font-size: 0.875rem;
   color: hsl(var(--muted-200));
   transition: color 0.2s;
 }
 
-.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):hover
-  + .textarea-note {
+.textarea-container:not(:has(.textarea-disabled)):not(:has(.textarea-error)):hover
+  ~ .textarea-note {
   color: hsl(var(--primary));
 }
 
-.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):has(
-    textarea:focus
-  )
-  + .textarea-note {
+.textarea-container:not(:has(.textarea-disabled)):not(:has(.textarea-error)):has(textarea:focus)
+  ~ .textarea-note {
   color: hsl(var(--primary));
 }
 
@@ -186,6 +179,10 @@
   line-height: 1;
 }
 
-.textarea-wrapper-resizable .textarea-counter {
-  right: 1.75rem;
+.textarea-counter--warning {
+  color: hsl(var(--warning-200));
+}
+
+.textarea-counter--danger {
+  color: hsl(var(--destructive));
 }

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

@@ -0,0 +1,33 @@
+import "./textarea.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+/**
+ * Props for `Textarea`: extends `HTMLTextAreaElement` attributes (omits legacy HTML `size`).
+ *
+ * @property {string} [label] - Optional field label with optional info tooltip.
+ * @property {boolean} [showClear] - Renders clear when non-empty. Default `false`.
+ * @property {string} [note] - Helper line under the field.
+ * @property {string} [error] - Error line; invalid styling when set.
+ * @property {number} [maxLength] - When set, shows a live character counter vs this cap (e.g., 12/200).
+ * @property {"none"|"vertical"} [resize] - CSS resize mode. Default `"none"`.
+ */
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    label?: string;
+    showClear?: boolean;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    maxLength?: number;
+    resize?: "none" | "vertical";
+}
+/**
+ * Multi-line input with label, clear, optional counter from `maxLength`, and note/error rows.
+ *
+ * @param {TextareaProps} props - Native `textarea` props plus H2O chrome.
+ * @param {React.Ref<HTMLTextAreaElement>} ref - Forwarded to `<textarea>`.
+ * @returns {React.ReactElement} Labeled field wrapper and counter when applicable.
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import"./textarea.css";import r,{useId as l,useState as o,useCallback as n}from"react";import{Icon as i}from"../icon/icon.js";const s=r.forwardRef(((r,s)=>{var{label:c,showClear:m,note:d,error:u="",className:x="",containerClassName:p="",disabled:h,tooltip:g,tooltipPosition:f="top",maxLength:v,resize:N="none",value:b,defaultValue:C,onChange:w}=r,j=e(r,["label","showClear","note","error","className","containerClassName","disabled","tooltip","tooltipPosition","maxLength","resize","value","defaultValue","onChange"]);const y=l(),z=void 0!==b,[$,L]=o((()=>"string"==typeof C?C.length:0)),P=z?"string"==typeof b?b.length:0:$,V=n((e=>{z||null==v||L(e.target.value.length),null==w||w(e)}),[z,v,w]),k=!!z&&""!==b,F=(()=>{if(!v)return"textarea-counter";const e=P/v;return e>=1?"textarea-counter textarea-counter--danger":e>=.8?"textarea-counter textarea-counter--warning":"textarea-counter"})();return a("div",{className:`textarea-root ${p}`,children:[a("div",{className:"textarea-container",children:[(c||m&&k)&&a("div",{className:"textarea-header",children:[c&&a("label",{htmlFor:y,className:"textarea-label",children:[c,g&&t(i,{icon:"info",size:16,tooltip:g,className:"textarea-info-icon",tooltipPosition:f})]}),m&&k&&!h&&t("button",{type:"button",onClick:()=>{null==w||w({target:{value:""}}),z||null==v||L(0)},className:"textarea-clear",children:"Clear"})]}),a("div",{className:`textarea-wrapper ${u?"textarea-error":""} ${h?"textarea-disabled":""} ${"vertical"===N?"textarea-wrapper-resizable":""}`,children:[t("textarea",Object.assign({id:y,ref:s,className:`textarea ${x}`,disabled:h,maxLength:v,value:b,defaultValue:C,onChange:V,style:{resize:"vertical"===N?"vertical":"none"}},j)),null!=v&&a("span",{className:F,"aria-live":"polite",children:[P," / ",v]})]})]}),(d||u)&&t("small",{className:u?"textarea-error-message":"textarea-note",children:u||d})]})}));s.displayName="Textarea";export{s as Textarea};
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1,249 @@
+.time-picker-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+/* ── Header ── */
+
+.time-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.time-picker-labels {
+  display: flex;
+  flex: 1;
+  gap: 0.75rem;
+}
+
+.time-picker-label {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+/* Group label for range mode */
+.time-picker-group-label {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.time-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;
+}
+
+.time-picker-clear:hover {
+  color: hsl(var(--primary));
+}
+
+/* ── Fields row ── */
+
+.time-picker-fields {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Range: two combined fields side by side */
+.time-picker-fields--range {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+}
+
+/* ── Combined field ── */
+
+.time-picker-field {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  height: 2.5rem;
+  border: 1.5px solid hsl(var(--muted));
+  border-radius: 0.5rem;
+  transition: border-color 0.2s;
+  font-family: inherit;
+  font-size: 0.875rem;
+  background: hsl(var(--input));
+}
+
+.time-picker-field:hover:not(.time-picker-field--disabled) {
+  border-color: hsl(var(--primary));
+}
+
+.time-picker-field:hover:not(.time-picker-field--disabled) .time-picker-icon {
+  color: hsl(var(--primary));
+}
+
+.time-picker-field--open {
+  border-color: hsl(var(--primary));
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.time-picker-field--error {
+  border-color: hsl(var(--destructive));
+  background-color: hsl(var(--destructive-bg) / 0.3);
+}
+
+.time-picker-field--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Each clickable half ── */
+
+.time-picker-half {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.625rem;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  min-width: 0;
+}
+
+.time-picker-half:focus-visible {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: -2px;
+  border-radius: 0.375rem;
+}
+
+/* Vertical divider between halves */
+.time-picker-half-divider {
+  width: 1px;
+  background-color: hsl(var(--muted));
+  margin: 0.4rem 0;
+  flex-shrink: 0;
+}
+
+/* ── Value / placeholder text ── */
+
+.time-picker-placeholder {
+  color: hsl(var(--muted));
+  font-size: 0.875rem;
+  letter-spacing: 0.04em;
+}
+
+.time-picker-value {
+  color: hsl(var(--foreground));
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Active half highlight (open state) */
+.time-picker-half--active .time-picker-placeholder {
+  color: hsl(var(--primary));
+}
+
+.time-picker-half--active .time-picker-value {
+  color: hsl(var(--primary));
+}
+
+/* ── Clock icon ── */
+
+.time-picker-icon {
+  color: hsl(var(--muted-200));
+  flex-shrink: 0;
+  transition: color 0.2s;
+}
+
+.time-picker-icon--open {
+  color: hsl(var(--primary));
+}
+
+/* ── Dropdown list ── */
+
+.time-picker-dropdown {
+  position: absolute;
+  top: 100%;
+  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;
+  max-height: 11rem;
+  overflow-y: auto;
+  width: calc(50% + 1.5px);
+  /* Thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted)) transparent;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.time-picker-dropdown--dragging {
+  cursor: grabbing;
+}
+
+.time-picker-dropdown--left {
+  left: -1.5px;
+}
+
+.time-picker-dropdown--right {
+  right: -1.5px;
+}
+
+.time-picker-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+
+.time-picker-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.time-picker-dropdown::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--muted));
+  border-radius: 2px;
+}
+
+.time-picker-option {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: hsl(var(--primary));
+  cursor: pointer;
+  transition: background-color 0.15s;
+  font-variant-numeric: tabular-nums;
+}
+
+.time-picker-option:hover {
+  background-color: hsl(var(--primary-muted));
+}
+
+.time-picker-option--selected {
+  background-color: hsl(var(--primary-muted));
+  font-weight: 600;
+}
+
+/* ── Messages ── */
+
+.time-picker-note {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+}
+
+.time-picker-error-message {
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+}

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

@@ -0,0 +1,31 @@
+import "./time-picker.css";
+/**
+ * Time selection UI: one clock or a start/end **range**; hour/minute columns with optional 12h format.
+ *
+ * @property {"single"|"range"} [mode] - `single` uses `value` as `string | null`; `range` as `[string|null, string|null]`. Default `"single"`.
+ * @property {string|null|[string|null,string|null]} [value] - `"HH:MM"`, partial `"HH:"` while picking hour, or `null` for empty. Range: tuple of same.
+ * @property {(v: string|null|[string|null,string|null]) => void} [onChange] - Emits the same shapes as `value` as the user picks.
+ * @property {12|24} [hourFormat] - 12- or 24-hour labels. Default `24`.
+ * @property {number} [minuteStep] - Minutes grid step, e.g. `5` → `00,05,…,55`. Default `5`.
+ */
+interface TimePickerProps {
+    mode?: "single" | "range";
+    value?: string | null | [string | null, string | null];
+    onChange?: (value: string | null | [string | null, string | null]) => void;
+    hourFormat?: 12 | 24;
+    minuteStep?: number;
+    startLabel?: string;
+    endLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    error?: string;
+    note?: string;
+}
+/**
+ * Picker for a time or time range, with hour/minute dropdowns and optional labels or validation chrome.
+ *
+ * @param {TimePickerProps} props - Mode, `value`/`onChange` shape, and `hourFormat` / `minuteStep`.
+ * @returns {JSX.Element} The field group(s) and time lists when open.
+ */
+export declare const TimePicker: ({ mode, value, onChange, hourFormat, minuteStep, startLabel, endLabel, disabled, className, error, note, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import{useState as t,useRef as i,useCallback as l,useEffect as o}from"react";import{Icon as c}from"../icon/icon.js";import"./time-picker.css";import{useClickOutside as a}from"../../../hooks/src/use-click-outside.js";const s=e=>{if(!e)return{hour:"",minute:""};const[n="",r=""]=e.split(":");return{hour:n,minute:r}},u=(e,n)=>e?n?`${e}:${n}`:`${e}:`:null,p=({options:e,selected:r,onSelect:l,selectedRef:c,side:a})=>{const s=i(null),[u,p]=t(!1),d=i(null),m=i(!1);o((()=>{if(c.current&&s.current){const e=c.current,n=s.current;n.scrollTop=e.offsetTop-n.clientHeight/2+e.clientHeight/2}}),[c,r]);const h=e=>{const n=d.current,r=s.current;n&&e.pointerId===n.pointerId&&(n.moved&&(m.current=!0),d.current=null,(null==r?void 0:r.hasPointerCapture(e.pointerId))&&r.releasePointerCapture(e.pointerId)),p(!1)};return n("div",{role:"listbox",className:`time-picker-dropdown time-picker-dropdown--${a}${u?" time-picker-dropdown--dragging":""}`,ref:s,onPointerDown:e=>{if(0!==e.button)return;if("touch"===e.pointerType)return;const n=s.current;n&&(d.current={pointerId:e.pointerId,startY:e.clientY,startScroll:n.scrollTop,moved:!1,grabAnnounced:!1,captureSet:!1})},onPointerMove:e=>{const n=d.current,r=s.current;if(!n||e.pointerId!==n.pointerId||!r)return;const t=e.clientY-n.startY;Math.abs(t)>3&&(n.moved=!0,n.captureSet||(n.captureSet=!0,r.setPointerCapture(e.pointerId))),n.moved&&(0===t||n.grabAnnounced||(n.grabAnnounced=!0,p(!0)),r.scrollTop=n.startScroll-t)},onPointerUp:h,onPointerCancel:h,onLostPointerCapture:()=>{d.current=null,p(!1)},children:e.map((e=>{const t=e===r;return n("div",{ref:t?c:null,role:"option","aria-selected":t,tabIndex:-1,className:"time-picker-option"+(t?" time-picker-option--selected":""),onClick:n=>{n.stopPropagation(),m.current?m.current=!1:l(e)},onKeyDown:n=>{if("Enter"===n.key||" "===n.key){if(n.preventDefault(),n.stopPropagation(),m.current)return void(m.current=!1);l(e)}},children:e},e)}))})},d=({parts:r,hours:t,minutes:l,openField:o,onOpenField:a,onHourSelect:s,onMinuteSelect:u,disabled:d,error:m})=>{const h=i(null),k=i(null),f="hour"===o,g="minute"===o,v=["time-picker-field",f||g?"time-picker-field--open":"",m?"time-picker-field--error":"",d?"time-picker-field--disabled":""].filter(Boolean).join(" ");return e("div",{className:v,children:[e("div",{className:"time-picker-half"+(f?" time-picker-half--active":""),onClick:()=>!d&&a(f?null:"hour"),role:"button",tabIndex:d?-1:0,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),d||a(f?null:"hour"))},children:[n("span",{className:r.hour?"time-picker-value":"time-picker-placeholder",children:r.hour||"HH"}),n(c,{icon:"clock",className:"time-picker-icon"+(f?" time-picker-icon--open":"")})]}),n("div",{className:"time-picker-half-divider"}),e("div",{className:"time-picker-half"+(g?" time-picker-half--active":""),onClick:()=>!d&&a(g?null:"minute"),role:"button",tabIndex:d?-1:0,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),d||a(g?null:"minute"))},children:[n("span",{className:r.minute?"time-picker-value":"time-picker-placeholder",children:r.minute||"MM"}),n(c,{icon:"clock",className:"time-picker-icon"+(g?" time-picker-icon--open":"")})]}),f&&n(p,{side:"left",options:t,selected:r.hour,onSelect:s,selectedRef:h}),g&&n(p,{side:"right",options:l,selected:r.minute,onSelect:u,selectedRef:k})]})},m=({mode:o="single",value:c,onChange:p,hourFormat:m=24,minuteStep:h=5,startLabel:k="Start Time",endLabel:f="End Time",disabled:g=!1,className:v,error:b,note:S})=>{const[N,y]=t(null),[I,C]=t(null),P=i(null);a(P,(()=>{N&&(y(null),C(null))}));const A=24===m?Array.from({length:24},((e,n)=>String(n).padStart(2,"0"))):Array.from({length:12},((e,n)=>String(n+1).padStart(2,"0")));const M=(F=h,Array.from({length:Math.ceil(60/F)},((e,n)=>String(n*F).padStart(2,"0"))));var F;const H="single"!==o||Array.isArray(c)?{hour:"",minute:""}:s(c),[w,D]="range"===o&&Array.isArray(c)?c:[null,null],T=s(w),x=s(D),$=!(!H.hour&&!H.minute),j="single"===o?$:!(!w&&!D),E=l((e=>{e.stopPropagation(),null==p||p("range"===o?[null,null]:null),y(null),C(null)}),[p,o]),O=l(((e,n)=>{null===n?(y(null),C(null)):(y(e),C(n))}),[]),Y=l((e=>{const n=u(e,H.minute);null==p||p(n),H.minute?(y(null),C(null)):C("minute")}),[p,H.minute]),K=l((e=>{const n=u(H.hour,e);null==p||p(n),y(null),C(null)}),[p,H.hour]),L=l(((e,n)=>{const r="start"===e?T:x,t=u(n,r.minute);null==p||p("start"===e?[t,D]:[w,t]),r.minute?(y(null),C(null)):C("minute")}),[p,T,x,w,D]),R=l(((e,n)=>{const r=u(("start"===e?T:x).hour,n);null==p||p("start"===e?[r,D]:[w,r]),y(null),C(null)}),[p,T,x,w,D]),B=e=>N===e?I:null;return e("div",{ref:P,className:"time-picker-container"+(v?` ${v}`:""),children:[e("div",{className:"time-picker-header",children:[n("div",{className:"time-picker-labels",children:e(r,"single"===o?{children:[n("span",{className:"time-picker-label",children:"Hour"}),n("span",{className:"time-picker-label",children:"Minute"})]}:{children:[n("span",{className:"time-picker-group-label",children:k}),n("span",{className:"time-picker-group-label",children:f})]})}),j&&!g&&n("button",{type:"button",className:"time-picker-clear",onClick:E,children:"Clear"})]}),"single"===o?n("div",{className:"time-picker-fields",children:n(d,{parts:H,hours:A,minutes:M,openField:B("single"),onOpenField:e=>O("single",e),onHourSelect:Y,onMinuteSelect:K,disabled:g,error:b})}):e("div",{className:"time-picker-fields--range",children:[n(d,{parts:T,hours:A,minutes:M,openField:B("start"),onOpenField:e=>O("start",e),onHourSelect:e=>L("start",e),onMinuteSelect:e=>R("start",e),disabled:g,error:b}),n(d,{parts:x,hours:A,minutes:M,openField:B("end"),onOpenField:e=>O("end",e),onHourSelect:e=>L("end",e),onMinuteSelect:e=>R("end",e),disabled:g,error:b})]}),(S||b)&&n("small",{className:b?"time-picker-error-message":"time-picker-note",children:b||S})]})};export{m as TimePicker};
+//# sourceMappingURL=time-picker.js.map

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

@@ -1,32 +1,72 @@
 .toast-container {
   position: fixed;
-  bottom: 1rem;
-  right: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  z-index: 50;
+  z-index: 600;
   max-width: 420px;
   width: calc(100% - 2rem);
+  pointer-events: none;
+}
+
+.toast-container > * {
+  pointer-events: all;
+}
+
+/* ── Position variants ── */
+
+.toast-container--bottom-right {
+  bottom: 1rem;
+  right: 1rem;
+}
+
+.toast-container--bottom-left {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.toast-container--top-right {
+  top: 1rem;
+  right: 1rem;
+}
+
+.toast-container--top-left {
+  top: 1rem;
+  left: 1rem;
 }
 
+.toast-container--top-center {
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-container--bottom-center {
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* ── Toast card ── */
+
 .toast {
   display: flex;
   gap: 0.75rem;
   padding: 1rem;
   border-radius: var(--radius-md);
-  background: white;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  animation: slideIn 0.2s ease-out;
+  animation: toastSlideIn 0.2s ease-out;
 }
 
-@keyframes slideIn {
+@keyframes toastSlideIn {
   from {
-    transform: translateX(100%);
+    transform: translateY(0.5rem);
     opacity: 0;
   }
   to {
-    transform: translateX(0);
+    transform: translateY(0);
     opacity: 1;
   }
 }
@@ -65,6 +105,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .toast-close:hover {
@@ -78,20 +119,17 @@
   margin-top: 0.75rem;
 }
 
-/* Variant styles */
+/* ── Variant icon colors ── */
 
 .toast-info .toast-icon {
   color: hsl(var(--primary));
 }
-
 .toast-error .toast-icon {
   color: hsl(var(--destructive));
 }
-
 .toast-warning .toast-icon {
   color: hsl(var(--warning));
 }
-
 .toast-success .toast-icon {
   color: hsl(var(--success));
 }

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

@@ -0,0 +1,54 @@
+import "./toast.css";
+import type React from "react";
+/**
+ * Color/semantic key for a toast: maps to icon and ARIA `role` (`error`/`warning` → `alert`, others often `status`).
+ * @type {("info"|"error"|"warning"|"success")}
+ */
+export type ToastVariant = "info" | "error" | "warning" | "success";
+/**
+ * Viewport region where `ToastProvider` positions the toast container (CSS BEM variant).
+ * @type {("top-right"|"top-left"|"bottom-right"|"bottom-left"|"top-center"|"bottom-center")}
+ */
+export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+interface ToastAction {
+    label: string;
+    action: () => void;
+}
+/**
+ * Options passed to `useToast().show(options)`; describes one transient notification.
+ *
+ * @property {ToastVariant} variant - Visual/semantic style.
+ * @property {string} title - Bold heading in the toast header.
+ * @property {string} [description] - Optional body copy under the title.
+ * @property {ToastAction} [primaryAction] - Primary CTA; presence disables auto-dismiss by default.
+ * @property {ToastAction} [secondaryAction] - Secondary CTA; same as primary for auto-dismiss rules.
+ * @property {number} [duration] - Auto-close delay in ms. Default `5000`; `0` disables (`primaryAction` / `secondaryAction` also keep it open without timer).
+ */
+export interface ToastOptions {
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    primaryAction?: ToastAction;
+    secondaryAction?: ToastAction;
+    duration?: number;
+}
+/**
+ * Props for `ToastProvider` — mount once near the app root to enable `useToast()`.
+ *
+ * @property {React.ReactNode} children - Your app; context is available to descendants.
+ * @property {ToastPosition} [position] - Viewport region for the stack. Default `"bottom-right"`.
+ * @property {number} [maxToasts] - Max simultaneous toasts; older may be evicted. Default `5`.
+ */
+interface ToastProviderProps {
+    children: React.ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+}
+/**
+ * Context provider: renders `children` and a fixed-position stack of toasts; wires timers and `maxToasts` cap.
+ *
+ * @param {object} props - `position`, `maxToasts`, and `children`.
+ * @returns {JSX.Element} Provider element plus the global toast region.
+ */
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import"./toast.css";import{useState as a,useRef as s,useEffect as r,useCallback as i}from"react";import{Icon as e}from"../icon/icon.js";import{Button as n}from"../button/button.js";import{ToastContext as c}from"h2o-library/hooks";const l={info:"info",error:"alert",warning:"info",success:"check"},m=({variant:a,title:s,description:r,primaryAction:i,secondaryAction:c,onClose:m})=>t("div",{className:`toast toast-${a}`,role:"error"===a||"warning"===a?"alert":"status",children:[o("div",{className:"toast-icon",children:o(e,{icon:l[a],size:20})}),t("div",{className:"toast-content",children:[t("div",{className:"toast-header",children:[o("h3",{className:"toast-title",children:s}),o("button",{className:"toast-close",onClick:m,"aria-label":"Close toast",children:o(e,{icon:"close",size:16})})]}),r&&o("p",{className:"toast-description",children:r}),(i||c)&&t("div",{className:"toast-actions",children:[c&&o(n,{className:"toast-action toast-action-secondary",size:"sm",variant:"secondary",label:c.label,onClick:()=>{c.action(),m()}}),i&&o(n,{label:i.label,className:"toast-action toast-action-primary",variant:"info"===a?"primary":"error"===a?"danger":a,size:"sm",onClick:()=>{i.action(),m()}})]})]})]}),d=({children:e,position:n="bottom-right",maxToasts:l=5})=>{const[d,u]=a([]),h=s({});r((()=>{const t=h.current;return()=>{Object.values(t).forEach(clearTimeout)}}),[]);const p=i((t=>{u((o=>o.filter((o=>o.id!==t)))),clearTimeout(h.current[t]),delete h.current[t]}),[]),b=i((t=>{const o=Math.random().toString(36).substring(2,11),{duration:a=5e3}=t,s=Object.assign(Object.assign({},t),{id:o,onClose:()=>p(o)});u((t=>{const o=[...t,s];return l>0?o.slice(-l):o}));return!(t.primaryAction||t.secondaryAction)&&a>0&&(h.current[o]=setTimeout((()=>p(o)),a)),o}),[p,l]);return t(c.Provider,{value:{show:b,dismiss:p},children:[e,o("div",{className:`toast-container toast-container--${n}`,children:d.map((t=>o(m,Object.assign({},t),t.id)))})]})};export{d as ToastProvider};
+//# sourceMappingURL=toast.js.map