@eyesee/ui-components 0.15.1 → 0.17.0

package/dist/components/Table/TableColumnHeader/TableColumnHeader.module.scss.js

@@ -0,0 +1,11 @@
+const e = "_headerTitle_118g8_3", t = "_sortHeader_118g8_13", s = "_sortIcons_118g8_20", o = {
+  headerTitle: e,
+  sortHeader: t,
+  sortIcons: s
+};
+export {
+  o as default,
+  e as headerTitle,
+  t as sortHeader,
+  s as sortIcons
+};

package/dist/components/Table/tableSort/tableSortUtils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @fileoverview Sort helpers for {@link Table} (client-side and header arrow behaviour).
+ */
+/**
+ * @typedef {object} TableSort
+ * @property {string} columnId
+ * @property {'asc'|'desc'} direction
+ */
+/**
+ * @typedef {object} TableSortColumn
+ * @property {string} id
+ * @property {(row: *) => string|number|null|undefined} [sortValue]
+ */
+/** @param {TableSort|null} sort @param {string} columnId @param {'asc'|'desc'} direction */
+export function getTableSortFromArrowClick(sort: TableSort | null, columnId: string, direction: "asc" | "desc"): {
+    columnId: string;
+    direction: "asc" | "desc";
+};
+/** @param {*[]} rows @param {TableSort|null} sort @param {TableSortColumn[]} columns */
+export function sortTableRows(rows: any[], sort: TableSort | null, columns: TableSortColumn[]): any[];
+export type TableSort = {
+    columnId: string;
+    direction: "asc" | "desc";
+};
+export type TableSortColumn = {
+    id: string;
+    sortValue?: (row: any) => string | number | null | undefined;
+};

package/dist/components/Table/tableSort/tableSortUtils.js

@@ -0,0 +1,20 @@
+function o(n, e, u) {
+  return (n == null ? void 0 : n.columnId) === e && n.direction === u ? null : { columnId: e, direction: u };
+}
+function f(n, e) {
+  return n == null || e == null ? n == null ? e == null ? 0 : 1 : -1 : typeof n == "number" && typeof e == "number" ? n - e : String(n).localeCompare(String(e), void 0, { numeric: !0 });
+}
+function d(n, e, u) {
+  var t;
+  if (!e)
+    return n;
+  const r = (t = u.find((l) => l.id === e.columnId)) == null ? void 0 : t.sortValue;
+  if (!r)
+    return n;
+  const i = e.direction === "asc" ? 1 : -1;
+  return [...n].sort((l, c) => i * f(r(l), r(c)));
+}
+export {
+  o as getTableSortFromArrowClick,
+  d as sortTableRows
+};

package/dist/components/Table/tableSort/useTableClientSort.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @typedef {import('./tableSortUtils').TableSort} TableSort
+ */
+/**
+ * @typedef {import('./tableSortUtils').TableSortColumn} TableSortColumn
+ */
+/**
+ * @typedef {object} UseTableClientSortOptions
+ * @property {*[]} rows
+ *   Source rows (unsorted).
+ * @property {TableSortColumn[]} columns
+ *   Column definitions with `sortValue` on sortable columns.
+ * @property {TableSort|null} [initialSort=null]
+ *   Initial sort state.
+ */
+/**
+ * @typedef {object} UseTableClientSortResult
+ * @property {TableSort|null} sort
+ *   Current sort (pass to {@link Table} as `sort`).
+ * @property {(sort: TableSort|null) => void} onSortChange
+ *   Sort change handler (pass to {@link Table} as `onSortChange`).
+ * @property {*[]} sortedRows
+ *   Rows sorted for the current `sort` (pass to {@link Table} as `rows`).
+ * @property {(sort: TableSort|null) => void} setSort
+ *   Imperative sort update.
+ */
+/**
+ * Manages client-side table sort state and derives sorted rows.
+ *
+ * @param {UseTableClientSortOptions} options
+ * @returns {UseTableClientSortResult}
+ *
+ * @example
+ * const { sort, onSortChange, sortedRows } = useTableClientSort({
+ *   rows: data,
+ *   columns,
+ * });
+ *
+ * <Table sort={sort} onSortChange={onSortChange} rows={sortedRows} columns={columns} />
+ */
+export function useTableClientSort({ rows, columns, initialSort }: UseTableClientSortOptions): UseTableClientSortResult;
+export type TableSort = import("./tableSortUtils").TableSort;
+export type TableSortColumn = import("./tableSortUtils").TableSortColumn;
+export type UseTableClientSortOptions = {
+    /**
+     *   Source rows (unsorted).
+     */
+    rows: any[];
+    /**
+     *   Column definitions with `sortValue` on sortable columns.
+     */
+    columns: TableSortColumn[];
+    /**
+     * Initial sort state.
+     */
+    initialSort?: TableSort | null;
+};
+export type UseTableClientSortResult = {
+    /**
+     *   Current sort (pass to {@link Table} as `sort`).
+     */
+    sort: TableSort | null;
+    /**
+     *   Sort change handler (pass to {@link Table} as `onSortChange`).
+     */
+    onSortChange: (sort: TableSort | null) => void;
+    /**
+     *   Rows sorted for the current `sort` (pass to {@link Table} as `rows`).
+     */
+    sortedRows: any[];
+    /**
+     *   Imperative sort update.
+     */
+    setSort: (sort: TableSort | null) => void;
+};

package/dist/components/Table/tableSort/useTableClientSort.js

@@ -0,0 +1,16 @@
+import { useState as u, useMemo as c, useCallback as i } from "react";
+import { sortTableRows as m } from "./tableSortUtils.js";
+function f({ rows: o, columns: e, initialSort: s = null }) {
+  const [t, r] = u(s), n = c(() => m(o, t, e), [e, o, t]), a = i((l) => {
+    r(l);
+  }, []);
+  return {
+    sort: t,
+    onSortChange: a,
+    sortedRows: n,
+    setSort: r
+  };
+}
+export {
+  f as useTableClientSort
+};

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

@@ -1,41 +1,41 @@
-const t = "_wrapper_1fyp1_3", o = "_fullWidth_1fyp1_11", _ = "_tooltip_1fyp1_18", n = "_dark_1fyp1_36", e = "_light_1fyp1_45", l = "_withArrow_1fyp1_56", i = "_top_1fyp1_64", c = "_bottom_1fyp1_72", p = "_left_1fyp1_80", s = "_right_1fyp1_88", f = "_header_1fyp1_112", r = "_titleRow_1fyp1_120", h = "_title_1fyp1_120", y = "_content_1fyp1_135", w = "_contentText_1fyp1_145", a = "_noTitleWithIcon_1fyp1_151", d = "_noTitleWithClose_1fyp1_155", T = "_closeButton_1fyp1_161", W = {
+const t = "_wrapper_1h62q_3", o = "_fullWidth_1h62q_10", _ = "_tooltip_1h62q_17", n = "_dark_1h62q_35", e = "_light_1h62q_44", h = "_withArrow_1h62q_55", l = "_top_1h62q_63", i = "_bottom_1h62q_71", c = "_left_1h62q_79", s = "_right_1h62q_87", r = "_header_1h62q_111", q = "_titleRow_1h62q_119", p = "_title_1h62q_119", w = "_content_1h62q_134", a = "_contentText_1h62q_144", d = "_noTitleWithIcon_1h62q_150", T = "_noTitleWithClose_1h62q_154", W = "_closeButton_1h62q_160", f = {
   wrapper: t,
   fullWidth: o,
   tooltip: _,
   dark: n,
   light: e,
-  withArrow: l,
-  top: i,
-  bottom: c,
-  left: p,
+  withArrow: h,
+  top: l,
+  bottom: i,
+  left: c,
   right: s,
-  header: f,
-  titleRow: r,
-  title: h,
-  content: y,
-  contentText: w,
-  noTitleWithIcon: a,
-  noTitleWithClose: d,
-  closeButton: T
+  header: r,
+  titleRow: q,
+  title: p,
+  content: w,
+  contentText: a,
+  noTitleWithIcon: d,
+  noTitleWithClose: T,
+  closeButton: W
 };
 export {
-  c as bottom,
-  T as closeButton,
-  y as content,
-  w as contentText,
+  i as bottom,
+  W as closeButton,
+  w as content,
+  a as contentText,
   n as dark,
-  W as default,
+  f as default,
   o as fullWidth,
-  f as header,
-  p as left,
+  r as header,
+  c as left,
   e as light,
-  d as noTitleWithClose,
-  a as noTitleWithIcon,
+  T as noTitleWithClose,
+  d as noTitleWithIcon,
   s as right,
-  h as title,
-  r as titleRow,
+  p as title,
+  q as titleRow,
   _ as tooltip,
-  i as top,
-  l as withArrow,
+  l as top,
+  h as withArrow,
   t as wrapper
 };

package/dist/components/icons-v2/EditSquareIcon.d.ts

@@ -0,0 +1,123 @@
+/**
+ * @callback EditSquareIconClickHandler
+ * @returns {void}
+ */
+/**
+ * Shared {@link IconProps} for this icon. All optional.
+ *
+ * @typedef {object} EditSquareIconProps
+ *
+ * @property {import('./constants').IconSize} [iconSize='m']
+ *   T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
+ * @property {EditSquareIconClickHandler} [onClick=null]
+ *   Click handler. When set the icon is clickable. Default `null`.
+ * @property {string} [fill='none']
+ *   SVG fill colour. Default `'none'`.
+ * @property {string} [strokeColor='currentColor']
+ *   SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
+ * @property {string} [strokeColorOnHover]
+ *   Stroke colour applied on hover.
+ * @property {string} [fillOnHover]
+ *   Fill colour applied on hover.
+ * @property {boolean} [disabled]
+ *   Applies disabled colour tokens and ignores clicks.
+ * @property {boolean} [animated=false]
+ *   When `true`, applies the spinner animation class. Default `false`.
+ * @property {number} [viewBoxSize]
+ *   Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
+ *
+ * @see {@link IconProps}
+ */
+/**
+ * SVG edit icon (document square with a pencil) used for an edit action.
+ * Source: 24×24 glyph scaled onto the 32×32 grid (`32/24`).
+ *
+ * ## Props
+ *
+ * All optional.
+ *
+ * **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
+ * T-shirt size token. Controls `width`/`height` and stroke width.
+ *
+ * **onClick** `() => void` — default `null`
+ * Click handler. When set the icon is clickable.
+ *
+ * **fill** `string` — default `'none'`
+ * SVG fill colour.
+ *
+ * **strokeColor** `string` — default `'currentColor'`
+ * SVG stroke colour. Accepts any valid CSS colour.
+ *
+ * **strokeColorOnHover** `string` — no default
+ * Stroke colour applied on hover.
+ *
+ * **fillOnHover** `string` — no default
+ * Fill colour applied on hover.
+ *
+ * **disabled** `boolean` — no default
+ * Applies disabled colour tokens and ignores clicks.
+ *
+ * **animated** `boolean` — default `false`
+ * When `true`, applies the spinner animation class.
+ *
+ * **viewBoxSize** `number` — no default
+ * Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
+ *
+ * @param {EditSquareIconProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Playground</caption>
+ * import { EditSquareIcon } from '@eyesee/ui-components/icons';
+ *
+ * <EditSquareIcon iconSize="m" strokeColor="#333333" fill="none" />
+ *
+ * @example <caption>Gallery</caption>
+ * import { EditSquareIcon } from '@eyesee/ui-components/icons';
+ *
+ * <EditSquareIcon iconSize="s" strokeColor="#333333" fill="none" />
+ * <EditSquareIcon iconSize="m" strokeColor="#333333" fill="none" />
+ * <EditSquareIcon iconSize="l" strokeColor="#333333" fill="none" />
+ */
+export const EditSquareIcon: (props: IconProps) => import("react").JSX.Element;
+export type EditSquareIconClickHandler = () => void;
+/**
+ * Shared {@link IconProps} for this icon. All optional.
+ */
+export type EditSquareIconProps = {
+    /**
+     * T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
+     */
+    iconSize?: import("./constants").IconSize;
+    /**
+     * Click handler. When set the icon is clickable. Default `null`.
+     */
+    onClick?: EditSquareIconClickHandler;
+    /**
+     * SVG fill colour. Default `'none'`.
+     */
+    fill?: string;
+    /**
+     * SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
+     */
+    strokeColor?: string;
+    /**
+     * Stroke colour applied on hover.
+     */
+    strokeColorOnHover?: string;
+    /**
+     * Fill colour applied on hover.
+     */
+    fillOnHover?: string;
+    /**
+     * Applies disabled colour tokens and ignores clicks.
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, applies the spinner animation class. Default `false`.
+     */
+    animated?: boolean;
+    /**
+     * Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
+     */
+    viewBoxSize?: number;
+};

package/dist/components/icons-v2/EditSquareIcon.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createIcon as C } from "./createIcon.js";
+const i = C(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ t(
+  "path",
+  {
+    d: "M9.3333 9.3333H8C7.2928 9.3333 6.6145 9.6143 6.1144 10.1144C5.6143 10.6145 5.3333 11.2928 5.3333 12V24C5.3333 24.7072 5.6143 25.3855 6.1144 25.8856C6.6145 26.3857 7.2928 26.6667 8 26.6667H20C20.7072 26.6667 21.3855 26.3857 21.8856 25.8856C22.3857 25.3855 22.6667 24.7072 22.6667 24V22.6667M21.3333 6.6667L25.3333 10.6667M27.18 8.7801C27.7051 8.255 28.0001 7.5428 28.0001 6.8001C28.0001 6.0575 27.7051 5.3453 27.18 4.8201C26.6549 4.295 25.9427 4 25.2 4C24.4573 4 23.7451 4.295 23.22 4.8201L12 16.0001V20.0001H16L27.18 8.7801Z",
+    stroke: o,
+    strokeWidth: r,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+export {
+  i as EditSquareIcon
+};

package/dist/components/icons-v2/index.d.ts

@@ -213,6 +213,7 @@ export { ColumnIcon } from "./ColumnIcon";
 export { ListCheckIcon } from "./ListCheckIcon";
 export { ImagesIcon } from "./ImagesIcon";
 export { EditImageIcon } from "./EditImageIcon";
+export { EditSquareIcon } from "./EditSquareIcon";
 export { AddImageIcon } from "./AddImageIcon";
 export { PackseeAttractIcon } from "./PackseeAttractIcon";
 export { PackseeEngageIcon } from "./PackseeEngageIcon";