h2o-library 1.8.0 → 2.0.1

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

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