@eyesee/ui-components 0.7.0 → 0.9.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @callback CheckboxChangeHandler
+ * @param {import('react').ChangeEvent<HTMLInputElement>} event
+ * @returns {void}
+ */
+/**
+ * @typedef {object} CheckboxProps
+ *
+ * @property {boolean} [checked=false]
+ *   Checked state. Default `false`.
+ * @property {boolean} [indeterminate=false]
+ *   Minus icon when `checked`. Default `false`.
+ * @property {CheckboxChangeHandler} [onChange]
+ *   Input change handler. Default `() => {}`.
+ * @property {boolean} [disabled=false]
+ *   Native disabled. Default `false`.
+ * @property {'lg'|'md'} [size='md']
+ *   `lg` → 20px (`m` token); `md` → 16px (`s`). Default `'md'`.
+ * @property {string} [id]
+ *   Input id. Auto-generated when omitted.
+ * @property {string} [name]
+ *   Input `name`.
+ * @property {string} [value]
+ *   Input `value`.
+ * @property {string} [label]
+ *   Label text after the box.
+ * @property {string} [aria-label]
+ *   Accessible name when `label` is omitted. Falls back to `'checkbox'`.
+ */
+/**
+ * Design-system checkbox. Icons render only when `checked` is true.
+ *
+ * ## Props
+ *
+ * **checked** `boolean` — default `false`
+ * Checked state.
+ *
+ * **indeterminate** `boolean` — default `false`
+ * Minus icon when `checked`.
+ *
+ * **onChange** `(event: ChangeEvent<HTMLInputElement>) => void` — default `() => {}`
+ * Input change handler.
+ *
+ * **disabled** `boolean` — default `false`
+ * Native disabled.
+ *
+ * **size** `'lg' | 'md'` — default `'md'`
+ * `lg` → 20px box (`m` token); `md` → 16px (`s`).
+ *
+ * **id** `string` — no default
+ * Input id. Auto-generated when omitted.
+ *
+ * **name** `string` — no default
+ * Input `name`.
+ *
+ * **value** `string` — no default
+ * Input `value`.
+ *
+ * **label** `string` — no default
+ * Label text after the box.
+ *
+ * **aria-label** `string` — no default
+ * Accessible name when `label` is omitted. Falls back to `'checkbox'`.
+ *
+ * @param {CheckboxProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { Checkbox } from '@eyesee/ui-components';
+ *
+ * <Checkbox checked={false} size="md" aria-label="Example checkbox" />
+ *
+ * @example <caption>All states (matrix)</caption>
+ * import { Checkbox } from '@eyesee/ui-components';
+ *
+ * <Checkbox size="lg" checked={false} aria-label="Unselected" />
+ * <Checkbox size="lg" checked aria-label="Selected" />
+ * <Checkbox size="lg" checked indeterminate aria-label="Indeterminate" />
+ * <Checkbox size="md" checked disabled aria-label="Disabled selected" />
+ */
+export function Checkbox({ label, checked, indeterminate, onChange, disabled, size, id: idProp, name, value, "aria-label": ariaLabel, }: CheckboxProps): import("react").ReactElement;
+export type CheckboxChangeHandler = (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+export type CheckboxProps = {
+    /**
+     * Checked state. Default `false`.
+     */
+    checked?: boolean;
+    /**
+     * Minus icon when `checked`. Default `false`.
+     */
+    indeterminate?: boolean;
+    /**
+     * Input change handler. Default `() => {}`.
+     */
+    onChange?: CheckboxChangeHandler;
+    /**
+     * Native disabled. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * `lg` → 20px (`m` token); `md` → 16px (`s`). Default `'md'`.
+     */
+    size?: "lg" | "md";
+    /**
+     * Input id. Auto-generated when omitted.
+     */
+    id?: string;
+    /**
+     * Input `name`.
+     */
+    name?: string;
+    /**
+     * Input `value`.
+     */
+    value?: string;
+    /**
+     * Label text after the box.
+     */
+    label?: string;
+    /**
+     * Accessible name when `label` is omitted. Falls back to `'checkbox'`.
+     */
+    "aria-label"?: string;
+};

package/dist/components/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsxs as z, jsx as r } from "react/jsx-runtime";
 import { useId as C } from "react";
-import n from "clsx";
+import l from "clsx";
 import { CheckmarkLargeIcon as I } from "../icons-v2/CheckmarkLargeIcon.js";
 import { MinusIcon as y } from "../icons-v2/MinusIcon.js";
 import { iconSizes as a } from "../icons-v2/constants.js";
 import o from "./Checkbox.module.scss.js";
-const N = (e) => e === "lg" ? "m" : "s", W = ({
+const N = (e) => e === "lg" ? "m" : "s";
+function W({
   label: e,
   checked: c = !1,
   indeterminate: t = !1,
@@ -13,16 +14,16 @@ const N = (e) => e === "lg" ? "m" : "s", W = ({
   },
   disabled: i = !1,
   size: p = "md",
-  id: x,
-  name: d,
-  value: f,
+  id: f,
+  name: x,
+  value: d,
   "aria-label": h
-}) => {
-  const k = C(), b = x ?? k, s = N(p), u = a[s] ?? a.m, l = "var(--color--icon--on-color--on-color)";
+}) {
+  const k = C(), b = f ?? k, s = N(p), u = a[s] ?? a.m, n = "var(--color--icon--on-color--on-color)";
   return /* @__PURE__ */ z(
     "label",
     {
-      className: n(o.checkboxWrapper, i && o.disabled),
+      className: l(o.checkboxWrapper, i && o.disabled),
       style: { "--checkbox-size": u },
       children: [
         /* @__PURE__ */ r(
@@ -30,8 +31,8 @@ const N = (e) => e === "lg" ? "m" : "s", W = ({
           {
             id: b,
             type: "checkbox",
-            name: d,
-            value: f,
+            name: x,
+            value: d,
             className: o.input,
             checked: c,
             disabled: i,
@@ -39,12 +40,12 @@ const N = (e) => e === "lg" ? "m" : "s", W = ({
             onChange: m
           }
         ),
-        /* @__PURE__ */ r("span", { className: n(o.checkbox, c && o.filled), "aria-hidden": !0, children: c && (t ? /* @__PURE__ */ r(y, { iconSize: s, strokeColor: l }) : /* @__PURE__ */ r(I, { iconSize: s, strokeColor: l })) }),
+        /* @__PURE__ */ r("span", { className: l(o.checkbox, c && o.filled), "aria-hidden": !0, children: c && (t ? /* @__PURE__ */ r(y, { iconSize: s, strokeColor: n }) : /* @__PURE__ */ r(I, { iconSize: s, strokeColor: n })) }),
         e ? /* @__PURE__ */ r("span", { className: o.labelText, children: e }) : null
       ]
     }
   );
-};
+}
 export {
   W as Checkbox
 };

package/dist/components/DropdownList/DropdownList.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @callback DropdownListLoadMoreHandler
+ * @returns {void}
+ */
+/**
+ * @typedef {object} DropdownListProps
+ *
+ * @property {React.ReactNode} children
+ *   Menu rows (typically {@link ListItem}).
+ * @property {'start'|'end'}     [align='start']
+ *   Horizontal alignment relative to the trigger. Default `'start'`.
+ * @property {string}            [className]
+ *   Extra class on the menu `<div>`.
+ * @property {'down'|'up'}       [dir='down']
+ *   Opens below or above the trigger. Default `'down'`.
+ * @property {string}            [id]
+ *   Id for `aria-controls` wiring.
+ * @property {React.RefObject}   [listRef]
+ *   Ref forwarded to the menu `<div>`.
+ * @property {string}            [maxWidth='320px']
+ *   Maximum list width. Default `'320px'`.
+ * @property {string}            [maxHeight]
+ *   Maximum list height (enables scroll).
+ * @property {DropdownListLoadMoreHandler} [onLoadMore]
+ *   Called when scrolling near the list bottom.
+ * @property {object}            [style]
+ *   Inline styles merged onto the menu `<div>`.
+ *
+ * @see {@link ListItem}
+ */
+/**
+ * Floating menu container. Positioned absolutely relative to a positioned ancestor.
+ *
+ * ## Props
+ *
+ * **children** `ReactNode` — no default
+ * Menu rows (typically {@link ListItem}).
+ *
+ * **align** `'start' | 'end'` — default `'start'`
+ * Horizontal alignment relative to the trigger.
+ *
+ * **className** `string` — no default
+ * Extra class on the menu `<div>`.
+ *
+ * **dir** `'down' | 'up'` — default `'down'`
+ * Opens below or above the trigger.
+ *
+ * **id** `string` — no default
+ * Id for `aria-controls` wiring.
+ *
+ * **listRef** `RefObject` — no default
+ * Ref forwarded to the menu `<div>`.
+ *
+ * **maxWidth** `string` — default `'320px'`
+ * Maximum list width.
+ *
+ * **maxHeight** `string` — no default
+ * Maximum list height (enables scroll).
+ *
+ * **onLoadMore** `() => void` — no default
+ * Called when scrolling near the list bottom.
+ *
+ * **style** `object` — no default
+ * Inline styles merged onto the menu `<div>`.
+ *
+ * @param {DropdownListProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { DropdownList } from '@eyesee/ui-components';
+ *
+ * <DropdownList>
+ *   <li role="menuitem">Edit</li>
+ *   <li role="menuitem">Duplicate</li>
+ *   <li role="menuitem">Archive</li>
+ *   <li role="menuitem">Delete</li>
+ * </DropdownList>
+ *
+ * @example <caption>Short list (2 items)</caption>
+ * import { DropdownList } from '@eyesee/ui-components';
+ *
+ * <DropdownList>
+ *   <li role="menuitem">Rename</li>
+ *   <li role="menuitem">Remove</li>
+ * </DropdownList>
+ *
+ * @example <caption>Long list (8 items)</caption>
+ * import { DropdownList } from '@eyesee/ui-components';
+ *
+ * <DropdownList>
+ *   <li role="menuitem">Open</li>
+ *   <li role="menuitem">Edit</li>
+ *   <li role="menuitem">Duplicate</li>
+ *   <li role="menuitem">Move to…</li>
+ *   <li role="menuitem">Copy link</li>
+ *   <li role="menuitem">Export</li>
+ *   <li role="menuitem">Archive</li>
+ *   <li role="menuitem">Delete</li>
+ * </DropdownList>
+ *
+ * @example <caption>Load more on scroll</caption>
+ * import { DropdownList } from '@eyesee/ui-components';
+ *
+ * <DropdownList maxHeight="220px" onLoadMore={() => {}}>
+ *   {Array.from({ length: 20 }, (_, i) => (
+ *     <li key={i} role="menuitem">Option {i + 1}</li>
+ *   ))}
+ * </DropdownList>
+ */
+export function DropdownList({ children, align, className, dir, id, listRef, maxWidth, maxHeight, onLoadMore, style: styleProp, }: DropdownListProps): import("react").ReactElement;
+export type DropdownListLoadMoreHandler = () => void;
+export type DropdownListProps = {
+    /**
+     *   Menu rows (typically {@link ListItem}).
+     */
+    children: React.ReactNode;
+    /**
+     * Horizontal alignment relative to the trigger. Default `'start'`.
+     */
+    align?: "start" | "end";
+    /**
+     * Extra class on the menu `<div>`.
+     */
+    className?: string;
+    /**
+     * Opens below or above the trigger. Default `'down'`.
+     */
+    dir?: "down" | "up";
+    /**
+     * Id for `aria-controls` wiring.
+     */
+    id?: string;
+    /**
+     * Ref forwarded to the menu `<div>`.
+     */
+    listRef?: import("react").RefObject<any>;
+    /**
+     * Maximum list width. Default `'320px'`.
+     */
+    maxWidth?: string;
+    /**
+     * Maximum list height (enables scroll).
+     */
+    maxHeight?: string;
+    /**
+     * Called when scrolling near the list bottom.
+     */
+    onLoadMore?: DropdownListLoadMoreHandler;
+    /**
+     * Inline styles merged onto the menu `<div>`.
+     */
+    style?: object;
+};

package/dist/components/DropdownList/DropdownList.js

@@ -1,40 +1,40 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as g } from "react/jsx-runtime";
 import w from "clsx";
 import r from "./DropdownList.module.scss.js";
-const a = ({
+function a({
   children: e,
-  align: s = "start",
-  className: n,
+  align: n = "start",
+  className: s,
   dir: o = "down",
   id: c,
-  listRef: p,
-  maxWidth: i = "320px",
+  listRef: i,
+  maxWidth: p = "320px",
   maxHeight: m,
   onLoadMore: t,
   style: d
-}) => {
-  const f = (g) => {
-    const l = g.currentTarget;
+}) {
+  const f = (u) => {
+    const l = u.currentTarget;
     l.scrollHeight - l.scrollTop - l.clientHeight < 48 && (t == null || t());
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ g(
     "div",
     {
-      ref: p,
+      ref: i,
       id: c,
       className: w(
         r.dropdown,
         o === "up" && r.dropdownUp,
-        s === "end" && r.alignEnd,
-        n
+        n === "end" && r.alignEnd,
+        s
       ),
       role: "menu",
-      style: { maxWidth: i, maxHeight: m, ...d },
+      style: { maxWidth: p, maxHeight: m, ...d },
       onScroll: f,
       children: e
     }
   );
-};
+}
 export {
   a as DropdownList
 };

package/dist/components/EllipsisTooltip/EllipsisTooltip.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Returns whether an element's content overflows its box.
+ *
+ * @param {HTMLElement|null} el
+ * @returns {boolean}
+ */
+export function isEllipsisActive(el: HTMLElement | null): boolean;
+/**
+ * @typedef {object} EllipsisTooltipProps
+ *
+ * @property {React.ReactNode} children
+ *   Content to measure; also used as tooltip body when truncated.
+ * @property {'top'|'bottom'|'left'|'right'} [position='top']
+ *   Passed to {@link Tooltip}. Default `'top'`.
+ * @property {'dark'|'light'}  [variant='light']
+ *   Passed to {@link Tooltip}. Default `'light'`.
+ * @property {boolean}         [showArrow=false]
+ *   Passed to {@link Tooltip}. Default `false`.
+ * @property {string}          [className]
+ *   Extra class on the truncation wrapper `<div>`.
+ * @property {object}          [wrapperStyle]
+ *   Inline styles on the truncation wrapper `<div>`.
+ *
+ * @see {@link Tooltip}
+ */
+/**
+ * Wraps content and shows a {@link Tooltip} only when truncated.
+ *
+ * ## Props
+ *
+ * **children** `ReactNode` — no default
+ * Content to measure; also used as tooltip body when truncated.
+ *
+ * **position** `'top' | 'bottom' | 'left' | 'right'` — default `'top'`
+ * Passed to {@link Tooltip}.
+ *
+ * **variant** `'dark' | 'light'` — default `'light'`
+ * Passed to {@link Tooltip}.
+ *
+ * **showArrow** `boolean` — default `false`
+ * Passed to {@link Tooltip}.
+ *
+ * **className** `string` — no default
+ * Extra class on the truncation wrapper `<div>`.
+ *
+ * **wrapperStyle** `object` — no default
+ * Inline styles on the truncation wrapper `<div>`.
+ *
+ * @param {EllipsisTooltipProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { EllipsisTooltip } from '@eyesee/ui-components';
+ *
+ * const longText =
+ *   'This is a very long label that should be truncated inside a narrow container and reveal the full text in a tooltip on hover.';
+ *
+ * <EllipsisTooltip>
+ *   <p style={{ margin: 0, whiteSpace: 'nowrap' }}>{longText}</p>
+ * </EllipsisTooltip>
+ *
+ * @example <caption>Short text</caption>
+ * import { EllipsisTooltip } from '@eyesee/ui-components';
+ *
+ * <EllipsisTooltip>
+ *   <p style={{ margin: 0, whiteSpace: 'nowrap' }}>Short label</p>
+ * </EllipsisTooltip>
+ *
+ * @example <caption>Multi line</caption>
+ * import { EllipsisTooltip } from '@eyesee/ui-components';
+ *
+ * const longText =
+ *   'This is a very long label that should be truncated inside a narrow container and reveal the full text in a tooltip on hover.';
+ *
+ * <EllipsisTooltip>
+ *   <p
+ *     style={{
+ *       margin: 0,
+ *       display: '-webkit-box',
+ *       WebkitBoxOrient: 'vertical',
+ *       WebkitLineClamp: 2,
+ *     }}
+ *   >
+ *     {longText}
+ *   </p>
+ * </EllipsisTooltip>
+ */
+export function EllipsisTooltip({ children, position, variant, showArrow, className, wrapperStyle, }: EllipsisTooltipProps): import("react").ReactElement;
+export type EllipsisTooltipProps = {
+    /**
+     *   Content to measure; also used as tooltip body when truncated.
+     */
+    children: React.ReactNode;
+    /**
+     * Passed to {@link Tooltip}. Default `'top'`.
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * Passed to {@link Tooltip}. Default `'light'`.
+     */
+    variant?: "dark" | "light";
+    /**
+     * Passed to {@link Tooltip}. Default `false`.
+     */
+    showArrow?: boolean;
+    /**
+     * Extra class on the truncation wrapper `<div>`.
+     */
+    className?: string;
+    /**
+     * Inline styles on the truncation wrapper `<div>`.
+     */
+    wrapperStyle?: object;
+};

package/dist/components/EllipsisTooltip/EllipsisTooltip.js

@@ -1,40 +1,40 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useRef as E, useState as h, useCallback as g, useLayoutEffect as x } from "react";
-import k from "clsx";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import c from "./EllipsisTooltip.module.scss.js";
-function y(t) {
+import { useRef as a, useState as E, useCallback as h, useLayoutEffect as g } from "react";
+import x from "clsx";
+import { Tooltip as W } from "../Tooltip/Tooltip.js";
+import k from "./EllipsisTooltip.module.scss.js";
+function v(t) {
   return t ? t.scrollWidth > t.clientWidth || t.scrollHeight > t.clientHeight : !1;
 }
-const j = ({
+function j({
   children: t,
-  position: n = "top",
+  position: c = "top",
   variant: f = "light",
-  showArrow: m = !1,
-  className: p,
+  showArrow: n = !1,
+  className: u,
   wrapperStyle: s
-}) => {
-  const o = E(null), [a, u] = h(!1), i = g(() => {
-    const l = o.current;
-    u(!!l && !!t && y(l));
+}) {
+  const i = a(null), [p, m] = E(!1), o = h(() => {
+    const l = i.current;
+    m(!!l && !!t && v(l));
   }, [t]);
-  x(() => {
-    i();
-  }, [i, s]);
-  const e = /* @__PURE__ */ r("div", { ref: o, className: k(c.wrapper, p), style: s, children: t });
-  return !a || !t ? e : /* @__PURE__ */ r(
-    v,
+  g(() => {
+    o();
+  }, [o, s]);
+  const e = /* @__PURE__ */ r("div", { ref: i, className: x(k.wrapper, u), style: s, children: t });
+  return !p || !t ? e : /* @__PURE__ */ r(
+    W,
     {
-      className: c.anchor,
+      fullWidth: !0,
       content: t,
-      position: n,
+      position: c,
       variant: f,
-      showArrow: m,
+      showArrow: n,
       children: e
     }
   );
-};
+}
 export {
   j as EllipsisTooltip,
-  y as isEllipsisActive
+  v as isEllipsisActive
 };

package/dist/components/EllipsisTooltip/EllipsisTooltip.module.scss.js

@@ -1,9 +1,7 @@
-const r = "_anchor_dujlo_3", o = "_wrapper_dujlo_10", a = {
-  anchor: r,
-  wrapper: o
+const a = "_wrapper_ib6aa_3", p = {
+  wrapper: a
 };
 export {
-  r as anchor,
-  a as default,
-  o as wrapper
+  p as default,
+  a as wrapper
 };

package/dist/components/ExpandableItem/ExpandableItem.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @typedef {object} ExpandableItemProps
+ *
+ * @property {string}          title
+ *   Header text shown in the summary bar.
+ * @property {React.ReactNode} children
+ *   Content revealed when expanded.
+ * @property {boolean}         [defaultOpen=false]
+ *   Start expanded on first mount. Default `false`.
+ * @property {boolean}         [arrowPositionEnd=false]
+ *   Place chevron at the end of the summary row. Default `false`.
+ */
+/**
+ * Accordion section on native `<details>`/`<summary>`.
+ *
+ * ## Props
+ *
+ * **title** `string` — no default
+ * Header text shown in the summary bar.
+ *
+ * **children** `ReactNode` — no default
+ * Content revealed when expanded.
+ *
+ * **defaultOpen** `boolean` — default `false`
+ * Start expanded on first mount.
+ *
+ * **arrowPositionEnd** `boolean` — default `false`
+ * Place chevron at the end of the summary row.
+ *
+ * @param {ExpandableItemProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default (closed)</caption>
+ * import { ExpandableItem } from '@eyesee/ui-components';
+ *
+ * <ExpandableItem title="Section title" defaultOpen={false}>
+ *   <p>This is the body content revealed when the item is expanded.</p>
+ * </ExpandableItem>
+ *
+ * @example <caption>Default Open</caption>
+ * import { ExpandableItem } from '@eyesee/ui-components';
+ *
+ * <ExpandableItem title="Section title" defaultOpen>
+ *   <p>Content is visible on load because defaultOpen is true.</p>
+ * </ExpandableItem>
+ *
+ * @example <caption>Rich Content</caption>
+ * import { ExpandableItem } from '@eyesee/ui-components';
+ *
+ * <ExpandableItem title="Filter options" defaultOpen>
+ *   <ul>
+ *     <li>Option A</li>
+ *     <li>Option B</li>
+ *     <li>Option C</li>
+ *   </ul>
+ * </ExpandableItem>
+ *
+ * @example <caption>Multiple Stacked</caption>
+ * import { ExpandableItem } from '@eyesee/ui-components';
+ *
+ * <ExpandableItem title="General settings" defaultOpen>
+ *   <p>General settings content goes here.</p>
+ * </ExpandableItem>
+ * <ExpandableItem title="Advanced options">
+ *   <p>Advanced options content goes here.</p>
+ * </ExpandableItem>
+ * <ExpandableItem title="Permissions">
+ *   <p>Permissions content goes here.</p>
+ * </ExpandableItem>
+ */
+export function ExpandableItem({ title, children, defaultOpen, arrowPositionEnd, }: ExpandableItemProps): import("react").ReactElement;
+export type ExpandableItemProps = {
+    /**
+     *   Header text shown in the summary bar.
+     */
+    title: string;
+    /**
+     *   Content revealed when expanded.
+     */
+    children: React.ReactNode;
+    /**
+     * Start expanded on first mount. Default `false`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Place chevron at the end of the summary row. Default `false`.
+     */
+    arrowPositionEnd?: boolean;
+};