h2o-library 1.7.1 → 2.0.0

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

@@ -3,8 +3,7 @@
   max-width: 24rem;
   background-color: hsl(var(--background));
   border-radius: 0.5rem;
-  box-shadow: var(--primary-shadow);
-  border: 1px solid hsl(var(--primary-muted));
+  border: 1px solid hsl(var(--muted) / 50%);
   padding: 0 1rem;
 }
 
@@ -57,15 +56,12 @@
   text-align: center;
   font-size: 0.7rem;
   font-weight: 500;
-  padding: 0.35rem; /* increasing here will increase the width of the calendar */
+  padding: 0.25rem; /* increasing here will increase the width of the calendar */
   text-transform: uppercase;
 }
 
 .calendar-day {
   aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   cursor: pointer;
   border: none;
   background: none;
@@ -82,125 +78,96 @@
   color: hsl(var(--muted-200));
 }
 
-.calendar-day:not(:disabled):not(.selected):not(.in-range):hover {
+.calendar-day-inner {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+/* Hover */
+.calendar-day:not(:disabled):not(.selected):not(.in-range):hover .calendar-day-inner {
   background-color: hsl(var(--primary));
   color: white;
-  border-radius: 50%;
   transition: background-color 0.2s ease-in-out;
 }
 
-.calendar-day.selected {
+/* Selected */
+.calendar-day.selected .calendar-day-inner {
   background-color: hsl(var(--primary));
   color: white;
-  border-radius: 50%;
-  &:hover {
-    background-color: hsl(var(--primary-200));
-  }
 }
 
+.calendar-day.selected:hover .calendar-day-inner {
+  background-color: hsl(var(--primary-200));
+}
+
+/* In-range: full-width background strip on the button itself */
 .calendar-day.in-range:not(.range-start):not(.range-end) {
   background-color: hsl(var(--primary-muted));
   border-radius: 0;
-  &:hover {
-    color: hsl(var(--primary));
-    transition: color 0.2s ease-in-out;
-  }
 }
 
-.calendar-day.range-start {
-  background-color: hsl(var(--primary));
-  color: white;
-  border-radius: 50%;
-  position: relative;
-  &:hover {
-    &::before {
-      background-color: hsl(var(--primary-200));
-      transition: background-color 0.2s ease-in-out;
-    }
-  }
-  &::before {
-    content: attr(data-number);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: hsl(var(--primary));
-    z-index: 10;
-    border-radius: 50%;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: hsl(var(--primary-muted));
-    border-radius: 50% 0 0 50%;
-  }
-}
-
-.calendar-day.range-end {
+.calendar-day.in-range:not(.range-start):not(.range-end):hover .calendar-day-inner {
+  color: hsl(var(--primary));
+  transition: color 0.2s ease-in-out;
+}
+
+/* Range endpoints: circle on inner span */
+.calendar-day.range-start .calendar-day-inner,
+.calendar-day.range-end .calendar-day-inner {
   background-color: hsl(var(--primary));
   color: white;
-  border-radius: 50%;
-  position: relative;
-  &:hover {
-    &::before {
-      background-color: hsl(var(--primary-200));
-      transition: background-color 0.2s ease-in-out;
-    }
-  }
-  &::before {
-    content: attr(data-number);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: hsl(var(--primary));
-    z-index: 10;
-    border-radius: 50%;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    border-radius: 0 50% 50% 0;
-    background-color: hsl(var(--primary-muted));
-  }
 }
 
-.calendar-day.in-range.week-start:not(.range-start):not(.range-end) {
-  border-radius: 50% 0 0 50% !important;
+.calendar-day.range-start:hover .calendar-day-inner,
+.calendar-day.range-end:hover .calendar-day-inner {
+  background-color: hsl(var(--primary-200));
+  transition: background-color 0.2s ease-in-out;
 }
 
-.calendar-day.in-range.week-end:not(.range-start):not(.range-end) {
-  border-radius: 0 50% 50% 0 !important;
+/* Range tail — sits behind .calendar-day-inner (z-index: 1 < 2) */
+.calendar-day.range-start:not(.range-end)::after,
+.calendar-day.range-end:not(.range-start)::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: hsl(var(--primary-muted));
+  z-index: 1;
 }
 
 .calendar-day.range-start:not(.range-end)::after {
+  border-radius: 50% 0 0 50%;
   right: 0;
 }
 
 .calendar-day.range-end:not(.range-start)::after {
+  border-radius: 0 50% 50% 0;
   left: 0;
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end) {
+/* Week/month edge rounding for the in-range strip */
+.calendar-day.in-range.week-start:not(.range-start):not(.range-end) {
+  border-radius: 50% 0 0 50% !important;
+}
+
+.calendar-day.in-range.week-end:not(.range-start):not(.range-end) {
+  border-radius: 0 50% 50% 0 !important;
+}
+
+/* Today */
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end) .calendar-day-inner {
   font-weight: bold;
   color: hsl(var(--primary));
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(
-    :disabled
-  ):hover {
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(:disabled):hover
+  .calendar-day-inner {
   color: white;
 }
 
@@ -208,20 +175,19 @@
   z-index: 50;
   position: absolute;
   bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: white;
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end)
-  .today-indicator {
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end) .today-indicator {
   background-color: hsl(var(--primary));
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(
-    :disabled
-  ):hover
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(:disabled):hover
   .today-indicator {
   background-color: white;
 }

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

@@ -0,0 +1,43 @@
+import "./calendar.css";
+/**
+ * @type {("single"|"range")} - Single date, or a start/end range (inclusive range mode behavior).
+ */
+export type CalendarMode = "single" | "range";
+/**
+ * Day grid calendar: single day or range, optional week selection, and disabled/min/max bounds.
+ *
+ * @property {CalendarMode} [mode] - `single` vs start/end `range`. Default `"single"`.
+ * @property {Date|[Date|null,Date|null]} [value] - Selected day or a tuple for range (nulls for partial range).
+ * @property {(v:Date|[Date|null,Date|null]) => void} [onChange] - Emits `Date` in single mode, tuple in range.
+ * @property {Date} [minDate] - No selection before this calendar day. Optional.
+ * @property {Date} [maxDate] - No selection after this calendar day. Optional.
+ * @property {boolean} [weekSelection] - In `range` mode, select whole weeks. Default `false`.
+ * @property {Date[]} [disabledDates] - Unselectable specific days.
+ * @property {0|1} [weekStartsOn] - 0 = Sunday, 1 = Monday. Default `0`.
+ */
+interface CalendarProps {
+    mode?: CalendarMode;
+    value?: Date | [Date | null, Date | null];
+    onChange?: (value: Date | [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    weekSelection?: boolean;
+    disabledDates?: Date[];
+    month?: Date;
+    onMonthChange?: (month: Date) => void;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
+    weekStartsOn?: 0 | 1;
+    className?: string;
+}
+/**
+ * Renders a navigable month grid; supports controlled `month`, hover state for range preview, and outside-month days.
+ *
+ * @param {CalendarProps} props - Mode, value, optional `weekSelection`, and `weekStartsOn`.
+ * @returns {JSX.Element} The calendar root with header and day cells.
+ */
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, weekSelection, disabledDates, month, onMonthChange, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, weekStartsOn, className, }: CalendarProps) => JSX.Element | null;
+export { Calendar };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"./calendar.css";import{useState as n,useEffect as a,useCallback as r,useMemo as o}from"react";import{Icon as i}from"../icon/icon.js";const l=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],s=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],c=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},g=({mode:g="single",value:d,onChange:u,minDate:D,maxDate:h,weekSelection:m=!1,disabledDates:y=[],month:f,onMonthChange:S,hideHeader:v=!1,hideOutsideDays:w=!1,hoverDate:M,onDayMouseEnter:A,onDayMouseLeave:N,weekStartsOn:p=0,className:b})=>{const[F,k]=n((()=>f||("single"===g&&d instanceof Date?d:"range"===g&&Array.isArray(d)&&d[0]?d[0]:new Date)));a((()=>{f&&k(f)}),[f]),a((()=>{if(!f)if("single"===g&&d instanceof Date){const e=d;k((t=>t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()?t:e))}else if("range"===g&&Array.isArray(d)&&d[0]&&d[1]){const e=d[0];k((t=>t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()?t:e))}}),[d,g,f]);const[C,Y]=n(null),L=void 0!==M?M:C,x=1===p?s:l,O=r((e=>{const t=(e.getDay()-p+7)%7,n=new Date(e);n.setDate(e.getDate()-t);const a=new Date(n);return a.setDate(n.getDate()+6),[n,a]}),[p]),T=r((e=>{const t=e.getFullYear(),n=e.getMonth(),a=new Date(t,n,1),r=new Date(t,n+1,0).getDate(),o=(a.getDay()-p+7)%7,i=[],l=new Date(t,n,0);for(let e=o-1;e>=0;e--)i.push({date:new Date(t,n-1,l.getDate()-e),isCurrentMonth:!1});for(let e=1;e<=r;e++)i.push({date:new Date(t,n,e),isCurrentMonth:!0});const s=(5===Math.ceil(i.length/7)?35:42)-i.length;for(let e=1;e<=s;e++)i.push({date:new Date(t,n+1,e),isCurrentMonth:!1});return i}),[p]),j=o((()=>T(F)),[F,T]),E=r((e=>{const t=c(e);return!!(D&&t<c(D))||(!!(h&&t>c(h))||!!y.some((t=>t.toDateString()===e.toDateString())))}),[D,h,y]),H=r((e=>{if("single"===g&&d instanceof Date)return e.toDateString()===d.toDateString();if("range"===g&&Array.isArray(d)){const[t,n]=d;return!!t&&(n?e.toDateString()===t.toDateString()||e.toDateString()===n.toDateString():e.toDateString()===t.toDateString())}return!1}),[g,d]),I=r((e=>{if("range"!==g||!Array.isArray(d))return!1;const[t,n]=d,a=c(e);if(!t||!n){if(t&&L){const e=c(t<L?t:L),n=c(t<L?L:t);return a>e&&a<n}return!1}const r=c(t<n?t:n),o=c(t<n?n:t);return a>=r&&a<=o}),[g,d,L]),W=r((e=>{if(!E(e))if("single"===g)null==u||u(e);else if("range"===g){if(m){const[t,n]=O(e);return void(null==u||u([t,n]))}if(!Array.isArray(d))return void(null==u||u([e,null]));const[t,n]=d;if(!t||n)null==u||u([e,null]);else{null==u||u([t<e?t:e,t<e?e:t])}}}),[g,d,u,E,m,O]),$=r((e=>{if(A)A(e);else if("range"===g&&Array.isArray(d)&&d[0]&&!d[1])if(m){const[,t]=O(e);Y(t)}else Y(e)}),[g,d,m,O,A]),B=r((()=>{N?N():Y(null)}),[N]),P=r((()=>{const e=new Date(F.getFullYear(),F.getMonth()+1);k(e),null==S||S(e)}),[F,S]),q=r((()=>{const e=new Date(F.getFullYear(),F.getMonth()-1);k(e),null==S||S(e)}),[F,S]),z=r((e=>e.toDateString()===(new Date).toDateString()),[]),G=e("div",{className:"calendar-grid",children:[x.map((e=>t("div",{className:"calendar-weekday",children:e},e))),j.map((({date:n,isCurrentMonth:a})=>{var r,o;if(w&&!a)return t("div",{className:"calendar-day"},n.toISOString());const i=H(n),l=I(n),s=E(n),c="range"===g&&Array.isArray(d)&&(null===(r=d[0])||void 0===r?void 0:r.toDateString())===n.toDateString(),u="range"===g&&Array.isArray(d)&&(null===(o=d[1])||void 0===o?void 0:o.toDateString())===n.toDateString(),D=(n.getDay()-p+7)%7==0,h=(n.getDay()-p+7)%7==6,m=1===n.getDate(),y=new Date(n.getFullYear(),n.getMonth()+1,0).getDate()===n.getDate(),f=z(n);return t("button",{className:["calendar-day",a?"":"outside-month",i?"selected":"",l?"in-range":"",c?"range-start":"",u?"range-end":"",D||m?"week-start":"",h||y?"week-end":"",f?"today":""].filter(Boolean).join(" "),disabled:s,onClick:()=>W(n),onMouseEnter:()=>$(n),onMouseLeave:B,"aria-label":n.toLocaleDateString("default",{weekday:"long",month:"long",day:"numeric",year:"numeric"}),"aria-pressed":i,children:e("span",{className:"calendar-day-inner",children:[n.getDate(),f&&t("div",{className:"today-indicator"})]})},n.toISOString())}))]});return v?t("div",{className:"calendar-container calendar-container--no-header"+(b?` ${b}`:""),children:G}):e("div",{className:"calendar-container"+(b?` ${b}`:""),children:[e("div",{className:"calendar-header",children:[t("button",{className:"calendar-nav-button",onClick:q,"aria-label":"Previous month",children:t(i,{icon:"chevron-left"})}),e("div",{className:"calendar-title",children:[F.toLocaleString("default",{month:"long"}),", ",F.toLocaleString("default",{year:"numeric"})]}),t("button",{className:"calendar-nav-button",onClick:P,"aria-label":"Next month",children:t(i,{icon:"chevron-right"})})]}),G]})};export{g as Calendar};
+//# sourceMappingURL=calendar.js.map

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

@@ -1,10 +1,17 @@
+.checkbox-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .checkbox-label {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   cursor: pointer;
   user-select: none;
+  min-width: 0;
 }
 
 .checkbox-label input {
@@ -14,13 +21,55 @@
   height: 0;
 }
 
+/* Size variants — set on .checkbox-wrapper so variables cascade to label AND note/error */
+
+.checkbox--sm {
+  --cb-size: 16px;
+  --cb-radius: 3px;
+  --cb-mark-top: 1px;
+  --cb-mark-left: 4px;
+  --cb-mark-w: 4px;
+  --cb-mark-h: 8px;
+  --cb-dash-w: 8px;
+  --cb-dash-top: 5px;
+  --cb-dash-left: 2px;
+  font-size: 0.75rem;
+}
+
+.checkbox--md {
+  --cb-size: 20px;
+  --cb-radius: 4px;
+  --cb-mark-top: 2px;
+  --cb-mark-left: 6px;
+  --cb-mark-w: 5px;
+  --cb-mark-h: 10px;
+  --cb-dash-w: 10px;
+  --cb-dash-top: 7px;
+  --cb-dash-left: 3px;
+  font-size: 0.875rem;
+}
+
+.checkbox--lg {
+  --cb-size: 24px;
+  --cb-radius: 5px;
+  --cb-mark-top: 2px;
+  --cb-mark-left: 7px;
+  --cb-mark-w: 6px;
+  --cb-mark-h: 12px;
+  --cb-dash-w: 12px;
+  --cb-dash-top: 9px;
+  --cb-dash-left: 4px;
+  font-size: 1rem;
+}
+
 .checkbox-box {
   position: relative;
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  flex-shrink: 0;
+  width: var(--cb-size, 20px);
+  height: var(--cb-size, 20px);
   border: 2px solid hsl(var(--muted));
-  border-radius: 4px;
+  border-radius: var(--cb-radius, 4px);
   transition: all 0.2s;
 }
 
@@ -31,10 +80,10 @@
 .checkbox-box::after {
   content: "";
   position: absolute;
-  top: 2px;
-  left: 6px;
-  width: 5px;
-  height: 10px;
+  top: var(--cb-mark-top, 2px);
+  left: var(--cb-mark-left, 6px);
+  width: var(--cb-mark-w, 5px);
+  height: var(--cb-mark-h, 10px);
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg) scale(0);
@@ -52,11 +101,11 @@
   transform: none;
   opacity: 1;
   border: none;
-  width: 10px;
+  width: var(--cb-dash-w, 10px);
   height: 2px;
   background: white;
-  top: 7px;
-  left: 3px;
+  top: var(--cb-dash-top, 7px);
+  left: var(--cb-dash-left, 3px);
 }
 
 .checkbox-label input:checked + .checkbox-box {
@@ -65,9 +114,7 @@
 }
 
 .checkbox-label:not(:has(input:disabled)):hover input:checked + .checkbox-box,
-.checkbox-label:not(:has(input:disabled)):hover
-  input:indeterminate
-  + .checkbox-box {
+.checkbox-label:not(:has(input:disabled)):hover input:indeterminate + .checkbox-box {
   background-color: hsl(var(--primary-200));
   border-color: hsl(var(--primary-200));
 }
@@ -77,11 +124,20 @@
   opacity: 1;
 }
 
+.checkbox-label-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
 .checkbox-text {
   color: hsl(var(--foreground));
-  max-width: 80%;
-  white-space: nowrap;
+  min-width: 0;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 
@@ -105,8 +161,7 @@
   border-color: hsl(var(--primary-200));
 }
 
-.checkbox-card:not(:has(input:disabled)):has(input:checked):hover
-  .checkbox-text {
+.checkbox-card:not(:has(input:disabled)):has(input:checked):hover .checkbox-text {
   color: hsl(var(--primary-200));
 }
 
@@ -148,3 +203,26 @@
 .checkbox-label:has(input:disabled) .checkbox-box {
   opacity: 0.5;
 }
+
+/* Tooltip icon */
+.checkbox-info-icon {
+  color: hsl(var(--muted-200));
+  flex-shrink: 0;
+}
+
+.checkbox-info-icon:hover {
+  color: hsl(var(--primary));
+}
+
+/* Note and error */
+.checkbox-note {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-200));
+  padding-left: calc(var(--cb-size, 20px) + 10px);
+}
+
+.checkbox-error {
+  font-size: 0.75rem;
+  color: hsl(var(--destructive));
+  padding-left: calc(var(--cb-size, 20px) + 10px);
+}

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

@@ -0,0 +1,58 @@
+import "./checkbox.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+/**
+ * Checkbox field: extends `HTMLInputElement` props except `type` and design-system `size`.
+ *
+ * @property {boolean} [isIndeterminate] - Sets the native `indeterminate` property (tri-state). Default `false`.
+ * @property {boolean} [isCard] - Card layout vs inline. Default `false`.
+ * @property {"sm"|"md"|"lg"} [size] - Scale. Default `"md"`.
+ * @property {string} [error] - Error text under the field; invalid styles when set.
+ */
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    isCard?: boolean;
+    isIndeterminate?: boolean;
+    error?: string;
+    note?: string;
+    size?: "sm" | "md" | "lg";
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+/**
+ * Checkbox with optional label, card layout, indeterminate state, note/error rows, and label tooltip.
+ *
+ * @param {CheckboxProps} props - Extends native checkbox props; use `checked` / `onChange` for control.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded to `<input type="checkbox">`.
+ * @returns {React.ReactElement} Wrapper and validation region.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Parent row that coordinates `Checkbox` children: tracks `checkedStates[]` and parent `indeterminate`.
+ *
+ * @property {string} label - Parent (select-all) row label.
+ * @property {React.ReactNode} children - Usually `Checkbox` elements whose `checked`/`defaultChecked` seed state.
+ * @property {(checkedStates: boolean[]) => void} [onChange] - Emits the full boolean array on any child toggle.
+ * @property {boolean} [disabled] - Disables the parent and children when `true`.
+ */
+interface CheckboxGroupProps {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    /** Called whenever any child changes, with the full array of checked states. */
+    onChange?: (checkedStates: boolean[]) => void;
+    size?: "sm" | "md" | "lg";
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+/**
+ * Select-all / grouped checkboxes with derived parent `indeterminate` from child states.
+ *
+ * @param {CheckboxGroupProps} props - `label`, `children`, optional `onChange`.
+ * @returns {JSX.Element} Parent checkbox row and nested children.
+ */
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as c,jsxs as o}from"react/jsx-runtime";import"./checkbox.css";import l,{useRef as a,useCallback as s,useEffect as n,useState as i}from"react";import{Icon as t}from"../icon/icon.js";const r=l.forwardRef(((l,i)=>{var{label:r,containerClassName:d="",labelClassName:h="",isCard:m=!1,isIndeterminate:p=!1,error:b,note:k,size:x="md",tooltip:u,tooltipPosition:N="top"}=l,f=e(l,["label","containerClassName","labelClassName","isCard","isIndeterminate","error","note","size","tooltip","tooltipPosition"]);const C=a(null),v=s((e=>{C.current=e,"function"==typeof i?i(e):i&&(i.current=e)}),[i]);n((()=>{C.current&&(C.current.indeterminate=p)}),[p]);const g=u?c(t,{icon:"info",size:14,tooltip:u,className:"checkbox-info-icon",tooltipPosition:N}):null;return o("div",m?{className:`checkbox-wrapper checkbox--${x} ${d}`,children:[o("label",{className:"checkbox-label checkbox-card",children:[r&&o("div",{className:"checkbox-label-row",children:[c("span",{className:`checkbox-text ${h}`,title:r,children:r}),g]}),c("input",Object.assign({type:"checkbox",ref:v},f)),c("span",{className:"checkbox-box"})]}),k&&!b&&c("span",{className:"checkbox-note",children:k}),b&&c("span",{className:"checkbox-error",children:b})]}:{className:`checkbox-wrapper checkbox--${x} ${d}`,children:[o("label",{className:"checkbox-label",children:[c("input",Object.assign({type:"checkbox",ref:v},f)),c("span",{className:"checkbox-box"}),r&&o("div",{className:"checkbox-label-row",children:[c("span",{className:`checkbox-text ${h}`,children:r}),g]})]}),k&&!b&&c("span",{className:"checkbox-note",children:k}),b&&c("span",{className:"checkbox-error",children:b})]})}));r.displayName="Checkbox";const d=({label:e,children:a,className:s="",disabled:n,onChange:t,size:d,tooltip:h,tooltipPosition:m})=>{const p=l.Children.toArray(a),[b,k]=i((()=>p.map((e=>{var c,o;return!!l.isValidElement(e)&&!(null===(o=null!==(c=e.props.defaultChecked)&&void 0!==c?c:e.props.checked)||void 0===o||!o)})))),x=b.length>0&&b.every(Boolean),u=b.some(Boolean)&&!x,N=e=>c=>{var o,a;const s=b.map(((o,l)=>l===e?c.target.checked:o));k(s),null==t||t(s),l.isValidElement(p[e])&&(null===(a=(o=p[e].props).onChange)||void 0===a||a.call(o,c))},f=p.map(((e,c)=>l.isValidElement(e)?l.cloneElement(e,{key:c,checked:b[c],defaultChecked:void 0,onChange:N(c)}):e));return o("div",{className:`checkbox-group ${s}`,children:[c(r,{label:e,checked:x,isIndeterminate:u,disabled:n,onChange:e=>{const c=b.map((()=>e.target.checked));k(c),null==t||t(c)},size:d,tooltip:h,tooltipPosition:m}),c("div",{className:"checkbox-group-children",children:f})]})};export{r as Checkbox,d as CheckboxGroup};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1,123 @@
+.chip-base {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1.5px solid transparent;
+  transition: opacity 0.2s;
+}
+
+.chip--icon {
+  padding-left: 0.375rem;
+}
+
+.chip-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Variants ── */
+
+.chip-neutral {
+  background-color: hsl(var(--muted-25));
+  color: hsl(var(--foreground) / 0.8);
+}
+.chip-neutral.chip--border {
+  border-color: hsl(var(--muted));
+}
+
+.chip-primary {
+  background-color: hsl(var(--primary-muted));
+  color: hsl(var(--primary));
+}
+.chip-primary.chip--border {
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.chip-success {
+  background-color: hsl(var(--success-bg) / 0.5);
+  color: hsl(var(--success));
+}
+.chip-success.chip--border {
+  border-color: hsl(var(--success) / 0.4);
+}
+
+.chip-warning {
+  background-color: hsl(var(--warning-bg) / 0.5);
+  color: hsl(var(--warning-200));
+}
+.chip-warning.chip--border {
+  border-color: hsl(var(--warning-200) / 0.4);
+}
+
+.chip-error {
+  background-color: hsl(var(--destructive-bg) / 0.5);
+  color: hsl(var(--destructive));
+}
+.chip-error.chip--border {
+  border-color: hsl(var(--destructive) / 0.4);
+}
+
+/* ── Status dot ── */
+
+.chip-dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background-color: currentColor;
+  flex-shrink: 0;
+}
+
+.chip--sm .chip-dot {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.chip--lg .chip-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+/* ── Sizes ── */
+
+.chip--sm {
+  font-size: 0.7rem;
+  padding: 0.175rem 0.45rem;
+  gap: 0.25rem;
+}
+
+.chip--md {
+  font-size: 0.8rem;
+  padding: 0.25rem 0.625rem;
+}
+
+.chip--lg {
+  font-size: 0.875rem;
+  padding: 0.35rem 0.75rem;
+  gap: 0.35rem;
+}
+
+/* ── States ── */
+
+.chip--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+[role="button"].chip-base {
+  cursor: pointer;
+}
+
+[role="button"].chip-base:not(.chip--disabled):hover {
+  opacity: 0.8;
+}
+
+[role="button"].chip-base:focus-visible {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,37 @@
+import "./chip.css";
+import type React from "react";
+import type { IconType, TooltipPosition } from "../../../types";
+/**
+ * Props for the `Chip` component: extends `HTMLAttributes<HTMLElement>` with H2O badge fields.
+ * `dot` and `icon` are mutually exclusive; if both are set, `icon` wins.
+ *
+ * @property {string} label - Visible text (required).
+ * @property {import("../../../types").IconType} [icon] - Leading icon; overrides `dot` when present.
+ * @property {"neutral"|"primary"|"success"|"warning"|"error"} [variant] - Color family. Default `"neutral"`.
+ * @property {"sm"|"md"|"lg"} [size] - Padding and font. Default `"md"`.
+ * @property {boolean} [dot] - Renders a status dot instead of an icon when no `icon`.
+ * @property {boolean} [showBorder] - Outlined style. Default `false`.
+ * @property {string} [tooltip] - Optional info tooltip on hover/focus.
+ */
+type ChipProps = React.HTMLAttributes<HTMLElement> & {
+    label: string;
+    icon?: IconType;
+    variant?: "neutral" | "primary" | "success" | "warning" | "error";
+    size?: "sm" | "md" | "lg";
+    iconStrokeWidth?: number;
+    iconClassName?: string;
+    iconSize?: number;
+    disabled?: boolean;
+    showBorder?: boolean;
+    dot?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+};
+/**
+ * Small label with optional icon or status dot, tooltip, and semantic `variant` colors.
+ *
+ * @param {ChipProps} props - Extends native element props; includes `label` and presentation.
+ * @returns {JSX.Element} A `span` or `button`-like chip per `onClick` usage.
+ */
+export declare const Chip: ({ label, icon, variant, size, iconStrokeWidth, iconClassName, iconSize, disabled, showBorder, dot, tooltip, tooltipPosition, className, onClick, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export {};