h2o-library 1.7.1 → 2.0.0

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

@@ -0,0 +1,53 @@
+import "./popover.css";
+import type { ReactNode } from "react";
+import type React from "react";
+/**
+ * **Controlled** headless popover: `isOpen` / `setIsOpen` and children compose with `PopOverTrigger` + `PopOverContent`.
+ *
+ * @property {boolean} isOpen - When `true`, `PopOverContent` computes position and listens for outside close.
+ * @property {(isOpen: boolean) => void} setIsOpen - Toggle or close the panel (same contract as `useState` setter).
+ * @property {React.ReactNode} children - Must include one `PopOverTrigger` and one `PopOverContent` (siblings under this provider).
+ * @property {"left"|"right"} [alignment] - Horizontal align of the panel vs the trigger. Default `"left"`.
+ * @property {number} [offset] - Gap in px between trigger bottom and panel top. Default `8`.
+ */
+interface PopOverProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    children: React.ReactNode;
+    alignment?: "left" | "right";
+    /** Gap in px between trigger and floating panel. Default: 8. */
+    offset?: number;
+    className?: string;
+}
+/**
+ * React context root for a floating popover: shares `isOpen` and trigger ref with trigger + content.
+ *
+ * @param {PopOverProps} props - `isOpen` / `setIsOpen` and `children` tree.
+ * @returns {JSX.Element} The provider and optional `className` on the wrapper `div`.
+ */
+export declare const PopOver: ({ children, isOpen, setIsOpen, alignment, offset, className, }: PopOverProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The toggling surface for a popover: click / Enter / Space flips `isOpen`; `ref` targets this `div` for anchoring.
+ *
+ * @param {object} props
+ * @param {ReactNode} props.children - Trigger contents (e.g. a `Button`).
+ * @param {string} [props.className] - Extra classes on the trigger `div`.
+ * @returns {JSX.Element} A `div` with `role="button"`, focusable, and `aria-expanded` bound to `isOpen`.
+ */
+export declare const PopOverTrigger: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Portal-mounted panel: positions under (or flips above) the trigger, closes on outside click and Escape.
+ *
+ * @param {object} props
+ * @param {ReactNode} props.children - Panel body.
+ * @param {string} [props.className] - Extra classes on the floating `div`.
+ * @returns {JSX.Element | null} The fixed panel when `isOpen`, else `null`.
+ */
+export declare const PopOverContent: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import"./popover.css";import{createContext as t,useRef as n,useContext as r,useState as i,useEffect as o}from"react";import{createPortal as s}from"react-dom";const d=t(null),l=({children:t,isOpen:r,setIsOpen:i,alignment:o="left",offset:s=8,className:l=""})=>{const c=n(null);return e(d.Provider,{value:{isOpen:r,setIsOpen:i,triggerRef:c,alignment:o,offset:s},children:e("div",{className:"popover-container"+(l?` ${l}`:""),children:t})})},c=({children:t,className:n=""})=>{const i=r(d);if(!i)throw new Error("PopOverTrigger must be used within PopOver");return e("div",{role:"button",tabIndex:0,ref:i.triggerRef,className:"popover-trigger"+(n?` ${n}`:""),"aria-haspopup":"dialog","aria-expanded":i.isOpen,onClick:()=>i.setIsOpen(!i.isOpen),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),i.setIsOpen(!i.isOpen))},children:t})},p=({children:t,className:l=""})=>{const c=r(d),p=n(null),[a,u]=i(null);if(!c)throw new Error("PopOverContent must be used within PopOver");return o((()=>{const e=()=>{if(c.triggerRef.current&&p.current){const e=c.triggerRef.current.getBoundingClientRect(),t=p.current.getBoundingClientRect();let n=e.bottom+c.offset,r="left"===c.alignment?e.left:e.right-t.width;r+t.width>window.innerWidth&&(r=window.innerWidth-t.width-16),r<0&&(r=16),n+t.height>window.innerHeight&&(n=e.top-t.height-c.offset),u({top:n,left:r})}};return c.isOpen&&(e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,{passive:!0})),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e)}}),[c.isOpen,c.alignment,c.offset,c.triggerRef]),o((()=>{const e=e=>{p.current&&!p.current.contains(e.target)&&c.triggerRef.current&&!c.triggerRef.current.contains(e.target)&&c.setIsOpen(!1)},t=e=>{"Escape"===e.key&&c.setIsOpen(!1)};return c.isOpen&&(document.addEventListener("mousedown",e),document.addEventListener("keydown",t)),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}}),[c]),c.isOpen?s(e("div",{className:"popover-content"+(l?` ${l}`:""),ref:p,style:{position:"fixed",top:a?`${a.top}px`:0,left:a?`${a.left}px`:0,visibility:a?"visible":"hidden"},children:t}),document.body):null};export{l as PopOver,p as PopOverContent,c as PopOverTrigger};
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1,196 @@
+/* Size variants — set on .radio-wrapper so variables cascade to note/error too */
+
+.radio--sm {
+  --rb-size: 16px;
+  --rb-dot: 6px;
+  font-size: 0.75rem;
+}
+
+.radio--md {
+  --rb-size: 20px;
+  --rb-dot: 8px;
+  font-size: 0.875rem;
+}
+
+.radio--lg {
+  --rb-size: 24px;
+  --rb-dot: 10px;
+  font-size: 1rem;
+}
+
+.radio-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.radio-label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  min-width: 0;
+}
+
+.radio-label input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.radio-button {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--rb-size, 20px);
+  height: var(--rb-size, 20px);
+  border: 2px solid hsl(var(--muted));
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.radio-label:not(:has(input:disabled)):hover .radio-button {
+  border-color: hsl(var(--primary));
+}
+
+.radio-button::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--rb-dot, 8px);
+  height: var(--rb-dot, 8px);
+  border-radius: 50%;
+  background-color: white;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.2s;
+}
+
+.radio-label input:checked + .radio-button {
+  border-color: hsl(var(--primary));
+  background-color: hsl(var(--primary));
+}
+
+.radio-label:not(:has(input:disabled)):hover input:checked + .radio-button {
+  border-color: hsl(var(--primary-300));
+  background-color: hsl(var(--primary-300));
+}
+
+.radio-label input:checked + .radio-button::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.radio-label:has(input:disabled) {
+  cursor: not-allowed;
+}
+
+.radio-label input:disabled + .radio-button {
+  border-color: hsl(var(--muted));
+}
+
+.radio-label input:checked:disabled + .radio-button {
+  opacity: 0.5;
+}
+
+.radio-label input:disabled + .radio-button + .radio-label-content .radio-text {
+  color: hsl(var(--muted));
+}
+
+.radio-label-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.radio-label-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.radio-text {
+  color: hsl(var(--foreground));
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.radio-description {
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-200));
+  font-weight: normal;
+}
+
+/* Note and error */
+.radio-note {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-200));
+  padding-left: calc(var(--rb-size, 20px) + 10px);
+}
+
+.radio-error-message {
+  font-size: 0.75rem;
+  color: hsl(var(--destructive));
+  padding-left: calc(var(--rb-size, 20px) + 10px);
+}
+
+/* Tooltip icon */
+.radio-info-icon {
+  color: hsl(var(--muted-200));
+  flex-shrink: 0;
+}
+
+.radio-info-icon:hover {
+  color: hsl(var(--primary));
+}
+
+/* Card variant */
+.radio-card {
+  padding: 0.5rem 0.7rem;
+  border: 1.5px solid hsl(var(--muted));
+  border-radius: 0.5rem;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+  width: 100%;
+}
+
+.radio-card:not(:has(input:disabled)):hover {
+  border-color: hsl(var(--primary-200));
+}
+
+.radio-card:has(input:checked) {
+  border-color: hsl(var(--primary));
+  background-color: hsl(var(--primary) / 0.04);
+}
+
+.radio-card:not(:has(input:disabled)):hover .radio-card:has(input:checked) {
+  border-color: hsl(var(--primary-200));
+}
+
+.radio-card:has(input:checked) .radio-text {
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+.radio-card:has(input:checked) .radio-button {
+  border-color: hsl(var(--primary));
+  background-color: hsl(var(--primary));
+}
+
+.radio-card:has(input:checked:disabled) {
+  border-color: hsl(var(--primary-disabled));
+  background-color: transparent;
+}
+
+.radio-card:has(input:checked:disabled) .radio-text {
+  color: hsl(var(--primary-disabled));
+}

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

@@ -0,0 +1,31 @@
+import "./radio.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+/**
+ * Single radio control: extends `HTMLInputElement` except `type` and design-system `size`.
+ *
+ * @property {string} [label] - Legend next to the circle.
+ * @property {string} [description] - Subtext under the label in card mode.
+ * @property {boolean} [isCard] - Large card layout vs inline. Default `false`.
+ * @property {"sm"|"md"|"lg"} [size] - Visual scale. Default `"md"`.
+ */
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    containerClassName?: string;
+    error?: string;
+    note?: string;
+    size?: "sm" | "md" | "lg";
+    isCard?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+/**
+ * Radio `input` with optional label row, validation text, and info tooltip on the label.
+ *
+ * @param {RadioProps} props - Native `checked`/`onChange` plus label and `isCard`.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded to the `<input type="radio">`.
+ * @returns {React.ReactElement} Wrapper `div` with `label` and optional error/note.
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as o}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";import"./radio.css";import r from"react";import{Icon as e}from"../icon/icon.js";const s=r.forwardRef(((r,s)=>{var{label:t,description:l,containerClassName:n="",error:d,note:c,size:m="md",isCard:p=!1,tooltip:N,tooltipPosition:b="top"}=r,f=o(r,["label","description","containerClassName","error","note","size","isCard","tooltip","tooltipPosition"]);const h=N?i(e,{icon:"info",size:14,tooltip:N,className:"radio-info-icon",tooltipPosition:b}):null,u=t||l?a("div",{className:"radio-label-content",children:[t&&a("div",{className:"radio-label-row",children:[i("span",{className:"radio-text",children:t}),h]}),l&&i("span",{className:"radio-description",children:l})]}):null;return a("div",{className:`radio-wrapper radio--${m} ${n}`,children:[a("label",{className:"radio-label"+(p?" radio-card":""),children:[i("input",Object.assign({type:"radio",ref:s},f)),i("span",{className:"radio-button"}),u]}),c&&!d&&i("span",{className:"radio-note",children:c}),d&&i("span",{className:"radio-error-message",children:d})]})}));s.displayName="Radio";export{s as Radio};
+//# sourceMappingURL=radio.js.map

package/dist/esm/components/src/radio-group/radio-group.css

@@ -0,0 +1,93 @@
+.radio-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.radio-group-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  border: 1.5px solid hsl(var(--muted));
+  background: transparent;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s,
+    color 0.2s;
+  font-size: 0.875rem;
+  font-family: inherit;
+}
+
+.radio-group-option:not(.radio-group-option-disabled):hover {
+  border-color: hsl(var(--primary));
+  color: hsl(var(--primary));
+}
+
+/* Selected state */
+.radio-group-option-selected {
+  border-color: hsl(var(--primary));
+  background-color: hsl(var(--primary) / 0.06);
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+.radio-group-option-selected:not(.radio-group-option-disabled):hover {
+  border-color: hsl(var(--primary-200));
+  background-color: hsl(var(--primary-200) / 0.08);
+  color: hsl(var(--primary-200));
+}
+
+.radio-group-option-label {
+  line-height: 1;
+}
+
+.radio-group-option-icon {
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+.radio-group-option-info {
+  flex-shrink: 0;
+  color: hsl(var(--muted-200));
+}
+
+.radio-group-option-selected .radio-group-option-info {
+  color: hsl(var(--primary) / 0.6);
+}
+
+/* Status dot */
+.radio-group-option-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.radio-group-option-dot--active {
+  background-color: hsl(var(--success));
+}
+
+.radio-group-option-dot--inactive {
+  background-color: hsl(var(--destructive));
+}
+
+/* Disabled */
+.radio-group-option-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Size variants */
+.radio-group--sm .radio-group-option {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+.radio-group--lg .radio-group-option {
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+}

package/dist/esm/components/src/radio-group/radio-group.d.ts

@@ -0,0 +1,42 @@
+import "./radio-group.css";
+import type { IconType, TooltipPosition } from "../../../types";
+/**
+ * One entry in a `RadioGroup` `options` array.
+ * @property {string} label - Option title.
+ * @property {string} value - Emitted to `onChange` when selected.
+ * @property {import("../../../types").IconType} [icon] - Optional leading icon.
+ * @property {"active"|"inactive"} [dot] - Optional status dot style when no icon.
+ */
+export interface RadioOption {
+    label: string;
+    value: string;
+    icon?: IconType;
+    dot?: "active" | "inactive";
+    disabled?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+/**
+ * **Controlled** radio group: `selected` is the `value` of the chosen `RadioOption`.
+ *
+ * @property {RadioOption[]} options - The full set of choices.
+ * @property {string} selected - Current `value` (must match one option, or be managed by the parent for empty state).
+ * @property {(value: string) => void} onChange - Called with the new `value` on selection.
+ */
+interface RadioGroupProps {
+    options: RadioOption[];
+    selected: string;
+    onChange: (value: string) => void;
+    ariaLabel?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    optionClassName?: string;
+}
+/**
+ * Horizontal/vertical list of option “cards” with shared `role="radiogroup"` and keyboard roving.
+ *
+ * @param {RadioGroupProps} props - `options`, `selected`, and `onChange` are required.
+ * @returns {JSX.Element} The radiogroup container and one button per option.
+ */
+export declare const RadioGroup: ({ options, selected, onChange, ariaLabel, size, className, optionClassName, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/radio-group/radio-group.js

@@ -0,0 +1,2 @@
+import{jsx as o,jsxs as i}from"react/jsx-runtime";import"./radio-group.css";import{Icon as a}from"../icon/icon.js";const r=({options:r,selected:e,onChange:t,ariaLabel:l,size:d="md",className:p="",optionClassName:s=""})=>o("div",{role:"radiogroup","aria-label":l,className:`radio-group radio-group--${d} ${p}`,children:r.map((r=>{var l;return i("button",{type:"button",onClick:()=>!r.disabled&&t(r.value),disabled:r.disabled,className:`radio-group-option ${e===r.value?"radio-group-option-selected":""} ${r.disabled?"radio-group-option-disabled":""} ${s}`,role:"radio","aria-checked":e===r.value,children:[r.dot&&o("span",{className:`radio-group-option-dot radio-group-option-dot--${r.dot}`}),o("span",{className:"radio-group-option-label",children:r.label}),r.icon&&o(a,{icon:r.icon,size:16,className:"radio-group-option-icon"}),r.tooltip&&o(a,{icon:"info",size:14,tooltip:r.tooltip,tooltipPosition:null!==(l=r.tooltipPosition)&&void 0!==l?l:"top",className:"radio-group-option-info"})]},r.value)}))});export{r as RadioGroup};
+//# sourceMappingURL=radio-group.js.map

package/dist/{css/src → esm/components/src/segmented-toggle}/segmented-toggle.css

@@ -3,7 +3,7 @@
   width: fit-content;
   border-radius: 0.3rem;
   border: 1.5px solid hsl(var(--muted) / 0.6);
-  background-color: hsl(var(--secondary-bg));
+  background-color: hsl(var(--input));
   transition: border-color 0.2s ease-in-out;
   padding: 0.2rem;
   gap: 0.125rem;

package/dist/esm/components/src/segmented-toggle/segmented-toggle.d.ts

@@ -0,0 +1,50 @@
+import "./segmented-toggle.css";
+import type React from "react";
+import type { SVGProps } from "react";
+import type { IconType } from "../../../types";
+/** Extra attributes forwarded to `Icon` (per segment). */
+type SegmentedToggleIconProps = Omit<SVGProps<SVGSVGElement>, "children"> & {
+    size?: number;
+    strokeWidth?: number;
+};
+/**
+ * One segment in a `SegmentedToggle` row.
+ *
+ * @property {string} label - Button text.
+ * @property {string} value - Emitted to `onChange` when that segment is selected.
+ * @property {IconType} [icon] - Optional leading icon (per-option `iconProps` fine-tune the `Icon`).
+ */
+export type SegmentedToggleOption = {
+    label: string;
+    value: string;
+    icon?: IconType;
+    iconProps?: SegmentedToggleIconProps;
+    labelProps?: React.HTMLAttributes<HTMLSpanElement>;
+    disabled?: boolean;
+};
+/**
+ * **Controlled** `selected` + `onChange` string; `options` render as a connected button group.
+ *
+ * @property {SegmentedToggleOption[]} options - Segments; may include per-option `disabled`.
+ * @property {string} selected - Current `value` (must match an option for correct pressed state).
+ * @property {(value: string) => void} onChange - Fires with the option `value` on click or keyboard.
+ * @property {string} [ariaLabel] - Accessible name for the `role="radiogroup"` container.
+ */
+interface SegmentedToggleProps {
+    options: SegmentedToggleOption[];
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    optionClassName?: string;
+    selected: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * Horizontal iOS-style segmented control with optional icons, keyboard roving, and `aria-pressed` sync.
+ *
+ * @param {SegmentedToggleProps} props - `options`, `selected`, and `onChange` are required.
+ * @returns {JSX.Element} The `radiogroup` container and one button per option.
+ */
+export declare function SegmentedToggle({ options, size, className, optionClassName, selected, onChange, disabled, ariaLabel, }: SegmentedToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/segmented-toggle/segmented-toggle.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as o,jsxs as l}from"react/jsx-runtime";import"./segmented-toggle.css";import{useRef as n}from"react";import{Icon as i}from"../icon/icon.js";import{cn as t}from"../../../utils/src/cn.js";const s={sm:16,md:20,lg:24};function a({option:n,size:a}){var r,d,c,m,g,u;const p=null!==(d=null===(r=n.iconProps)||void 0===r?void 0:r.size)&&void 0!==d?d:s[a],v=null!==(c=n.iconProps)&&void 0!==c?c:{},{className:f}=v,b=e(v,["className"]),h=null!==(m=n.labelProps)&&void 0!==m?m:{},{className:N}=h,j=e(h,["className"]);return l("span",{className:"segmented-toggle-option-content",children:[n.icon&&o(i,Object.assign({icon:n.icon},b,{size:null!==(u=null===(g=n.iconProps)||void 0===g?void 0:g.size)&&void 0!==u?u:p,className:t("segmented-toggle-option-icon",f)})),o("span",Object.assign({className:t("segmented-toggle-option-label",N)},j,{children:n.label}))]})}function r({options:e,size:l="md",className:i,optionClassName:s,selected:r,onChange:d,disabled:c=!1,ariaLabel:m}){const g=n(null);return o("div",{ref:g,className:t("segmented-toggle",`segmented-toggle--${l}`,i),role:"radiogroup","aria-label":m,children:e.map(((n,i)=>{const m=c||n.disabled;return o("button",{type:"button",role:"radio","aria-checked":r===n.value,onClick:()=>!m&&d(n.value),disabled:m,onKeyDown:o=>((o,l)=>{var n,i;const t=e.map(((e,o)=>({opt:e,i:o}))).filter((({opt:e})=>!e.disabled&&!c)),s=t.findIndex((({i:e})=>e===l));let a;if("ArrowRight"===o.key){o.preventDefault();const e=t[(s+1)%t.length];a=null==e?void 0:e.i}else if("ArrowLeft"===o.key){o.preventDefault();const e=t[(s-1+t.length)%t.length];a=null==e?void 0:e.i}if(void 0!==a){const o=null===(n=g.current)||void 0===n?void 0:n.querySelectorAll('[role="radio"]');null===(i=null==o?void 0:o[a])||void 0===i||i.focus(),d(e[a].value)}})(o,i),className:t("segmented-toggle-option",s,r===n.value&&"segmented-toggle-option-selected",m&&"segmented-toggle-option-disabled",n.icon&&"segmented-toggle-option-has-icon"),children:o(a,{option:n,size:l})},n.value)}))})}export{r as SegmentedToggle};
+//# sourceMappingURL=segmented-toggle.js.map

package/dist/{css/src → esm/components/src/side-panel}/side-panel.css

@@ -3,7 +3,7 @@
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  z-index: 50;
+  z-index: 400;
   animation: overlayShow 0.15s ease-out;
 }
 
@@ -15,28 +15,49 @@
   justify-content: flex-start;
 }
 
+/* Full-bleed */
+.side-panel-scrim {
+  flex: 1 1 0;
+  min-width: 0;
+  align-self: stretch;
+  min-height: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
 .side-panel {
   background-color: hsl(var(--background));
   width: 100%;
-  max-width: 24rem;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
-.side-panel-right {
-  animation: sidePanelShowRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
+/* ── Size variants ── */
 
-.side-panel-left {
-  animation: sidePanelShowLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+.side-panel--sm {
+  max-width: 20rem;
+}
+.side-panel--md {
+  max-width: 24rem;
+}
+.side-panel--lg {
+  max-width: 36rem;
 }
 
+/* ── Header ── */
+
 .side-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1.5rem;
+  flex-shrink: 0;
 }
 
 .side-panel-title-container {
@@ -72,11 +93,43 @@
   color: hsl(var(--primary));
 }
 
+/* ── Content ── */
+
 .side-panel-content {
-  overflow: hidden;
+  overflow-y: auto;
   flex: 1;
 }
 
+/* ── Footer ── */
+
+.side-panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem 1.5rem;
+  border-top: 1px solid hsl(var(--muted) / 0.3);
+  flex-shrink: 0;
+}
+
+/* ── Animations ── */
+
+.side-panel-right {
+  animation: sidePanelShowRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.side-panel-left {
+  animation: sidePanelShowLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes sidePanelShowRight {
   from {
     opacity: 0;
@@ -97,4 +150,4 @@
     opacity: 1;
     transform: translateX(0);
   }
-}
+}

package/dist/esm/components/src/side-panel/side-panel.d.ts

@@ -0,0 +1,36 @@
+import "./side-panel.css";
+import type React from "react";
+/**
+ * Slide-in panel (drawer) props: **controlled** `isOpen`; focus trap and Escape close when open.
+ *
+ * @property {boolean} isOpen - When `true`, mounts the portal and traps focus.
+ * @property {() => void} onClose - Called from the close button and Escape.
+ * @property {"left"|"right"} [position] - Slide origin. Default `"right"`.
+ * @property {"sm"|"md"|"lg"} [size] - Panel width preset. Default `"md"`.
+ * @property {React.ReactNode} children - Main scrollable body between header and optional `footer`.
+ */
+interface SidePanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    position?: "left" | "right";
+    size?: "sm" | "md" | "lg";
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Off-canvas panel with title/description, default close control, and optional `footer` slot.
+ *
+ * @param {SidePanelProps} props - `isOpen` / `onClose` plus layout BEM class overrides.
+ * @returns {JSX.Element | null} Portal content when `isOpen`, else `null`.
+ */
+export declare const SidePanel: ({ isOpen, onClose, position, size, title, description, children, footer, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: SidePanelProps) => JSX.Element | null;
+export {};

package/dist/esm/components/src/side-panel/side-panel.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as l,Fragment as s}from"react/jsx-runtime";import"./side-panel.css";import{useRef as a,useEffect as i}from"react";import{createPortal as n}from"react-dom";import{Button as t}from"../button/button.js";import{useFocusTrap as o}from"../../../hooks/src/use-focus-trap.js";let r=0;const d=({isOpen:d,onClose:c,position:m="right",size:p="md",title:u,description:h,children:f,footer:v,className:y="",titleContainerClassName:N="",titleClassName:b="",descriptionClassName:C="",closeButtonClassName:$="",headerClassName:k="",contentClassName:g=""})=>{const w=a(null),j=a("side-panel-title-"+ ++r).current;if(o(w,d),i((()=>{const e=e=>{"Escape"===e.key&&d&&c()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)}),[d,c]),i((()=>{if(d){const e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}}}),[d]),!d)return null;const E=e("button",{type:"button",className:"side-panel-scrim","aria-label":"Close panel",onClick:c}),x=l("div",{ref:w,role:"dialog","aria-modal":"true","aria-labelledby":u?j:void 0,className:`side-panel side-panel--${p} ${"left"===m?"side-panel-left":"side-panel-right"}${y?` ${y}`:""}`,children:[l("div",{className:"side-panel-header"+(k?` ${k}`:""),children:[l("div",{className:"side-panel-title-container"+(N?` ${N}`:""),children:[u&&e("h2",{id:j,className:"side-panel-title"+(b?` ${b}`:""),children:u}),h&&e("p",{className:"side-panel-description"+(C?` ${C}`:""),children:h})]}),e(t,{variant:"secondary",size:"sm",onClick:c,className:"side-panel-close"+($?` ${$}`:""),"aria-label":"Close panel",icon:"close",iconOnly:!0})]}),e("div",{className:"side-panel-content"+(g?` ${g}`:""),children:f}),v&&e("div",{className:"side-panel-footer",children:v})]});return n(e("div",{className:"side-panel-overlay "+("left"===m?"side-panel-overlay-left":"side-panel-overlay-right"),children:l(s,"right"===m?{children:[E,x]}:{children:[x,E]})}),document.body)};export{d as SidePanel};
+//# sourceMappingURL=side-panel.js.map