@eyesee/ui-components 0.8.0 → 0.10.0

package/dist/components/ImagePlaceholder/constantsImgPh.d.ts

@@ -0,0 +1,16 @@
+export const ASPECT_RATIOS: {
+    '1/1': string;
+    '4/3': string;
+    '16/9': string;
+    '9/16': string;
+};
+export const LINES: {
+    1: string;
+    2: string;
+};
+export namespace TEXT_POSITIONS {
+    let inside: string;
+    let outside: string;
+}
+export const TAG_TYPES: Set<string>;
+export const OVERLAYS: Set<string>;

package/dist/components/ImagePlaceholder/utilsImgPh.d.ts

@@ -0,0 +1,18 @@
+export function tagPropsFromTag(tag: any): {
+    label: any;
+    shape: any;
+    state: any;
+    showLeadingIcon: boolean;
+    onDismiss: any;
+};
+export function badgePropsFromTag(tag: any): {
+    label: any;
+    shape: any;
+    state: any;
+};
+export function pillPropsFromTag(tag: any): {
+    label: any;
+    color: any;
+    status: string;
+    icon: any;
+};

package/dist/components/ImageWithData/ImageWithData.d.ts

@@ -0,0 +1,284 @@
+/**
+ * @callback ImageWithDataCheckedHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImageWithDataCloseHandler
+ * @returns {void}
+ */
+/**
+ * @callback ImageWithDataIconClickHandler
+ * @returns {void}
+ */
+/**
+ * Pill tag config. Rendered as {@link Pill}.
+ *
+ * @typedef {object} ImageWithDataPillTag
+ * @property {'pill'} type
+ * @property {string} [label]
+ * @property {string} [text]
+ * @property {'light'|'dark'|'outline'} [color]
+ * @property {'turquoise'|'purple'|'green'|'red'|'yellow'|'orange'|'greenyellow'|'neutral'} [status]
+ * @property {React.ReactNode} [icon]
+ */
+/**
+ * Badge tag config. Rendered as {@link Badge}.
+ *
+ * @typedef {object} ImageWithDataBadgeTag
+ * @property {'badge'} type
+ * @property {string} [label]
+ * @property {string} [text]
+ * @property {'rectangle'|'pill'} [shape]
+ * @property {'neutral'|'warning'|'error'} [state]
+ */
+/**
+ * Tag config. Rendered as {@link Tag}.
+ *
+ * @typedef {object} ImageWithDataTagTag
+ * @property {'tag'} type
+ * @property {string} [label]
+ * @property {string} [text]
+ * @property {'rectangle'|'pill'} [shape]
+ * @property {'default'|'secondary'|'disabled'} [state]
+ * @property {boolean} [showLeadingIcon=false]
+ * @property {() => void} [onDismiss]
+ */
+/** @typedef {ImageWithDataPillTag|ImageWithDataBadgeTag|ImageWithDataTagTag} ImageWithDataTagConfig */
+/**
+ * @typedef {object} ImageWithDataProps
+ *
+ * @property {string} [id]
+ *   React key / card identifier.
+ * @property {string} [url]
+ *   Image source URL.
+ * @property {string} [text]
+ *   Caption below the image.
+ * @property {'inside'|'outside'} [textPosition='inside']
+ *   Caption placement. Default `'inside'`.
+ * @property {ImageWithDataTagConfig} [tag]
+ *   Optional {@link Pill}, {@link Badge}, or {@link Tag}.
+ *
+ * @property {'checkbox'|'close'|'icon'} [overlay]
+ *   Overlay control on the image.
+ * @property {boolean} [isChecked]
+ *   Checked state when `overlay` is `'checkbox'`.
+ * @property {ImageWithDataCheckedHandler} [onChecked]
+ *   Checkbox overlay toggle handler.
+ *
+ * @property {'1/1'|'4/3'|'16/9'|'9/16'} [aspectRatio='1/1']
+ *   Image frame aspect ratio. Default `'1/1'`.
+ * @property {'1'|'2'} [lines='1']
+ *   Max caption lines. Default `'1'`.
+ * @property {string|number|null} [number=null]
+ *   Metric shown beside the caption. Default `null`.
+ *
+ * @property {boolean} [disabled=false]
+ *   Disables the whole card. Default `false`.
+ * @property {boolean} [disabledOverlay=false]
+ *   Disables overlay controls only. Default `false`.
+ * @property {ImageWithDataCloseHandler} [onClose]
+ *   Close overlay click handler.
+ * @property {React.ReactNode} [icon]
+ *   Icon for `overlay="icon"`.
+ * @property {ImageWithDataIconClickHandler} [onIconClick]
+ *   Icon overlay click handler.
+ *
+ * @see {@link Button}
+ * @see {@link Pill}
+ * @see {@link Badge}
+ * @see {@link Tag}
+ * @see {@link Checkbox}
+ * @see {@link EllipsisTooltip}
+ */
+/**
+ * Image card with caption, optional tag, overlay controls, and supporting number.
+ *
+ * ## Props
+ *
+ * **id** `string` — no default
+ * React key / card identifier.
+ *
+ * **url** `string` — no default
+ * Image source URL.
+ *
+ * **text** `string` — no default
+ * Caption below the image.
+ *
+ * **textPosition** `'inside' | 'outside'` — default `'inside'`
+ * Caption placement relative to the card.
+ *
+ * **tag** `ImageWithDataTagConfig` — no default
+ * Optional tag on the image (no caption) or above the caption.
+ * - Pill: `type: 'pill'`, `label`, `color`, `status`, `icon`
+ * - Badge: `type: 'badge'`, `label`, `shape`, `state`
+ * - Tag: `type: 'tag'`, `label`, `shape`, `state`, `showLeadingIcon`, `onDismiss`
+ *
+ * **overlay** `'checkbox' | 'close' | 'icon'` — no default
+ * Overlay control on the image.
+ *
+ * **isChecked** `boolean` — no default
+ * Checked state when `overlay` is `'checkbox'`.
+ *
+ * **onChecked** `() => void` — no default
+ * Checkbox overlay toggle handler.
+ *
+ * **aspectRatio** `'1/1' | '4/3' | '16/9' | '9/16'` — default `'1/1'`
+ * Image frame aspect ratio.
+ *
+ * **lines** `'1' | '2'` — default `'1'`
+ * Max caption lines.
+ *
+ * **number** `string | number | null` — default `null`
+ * Metric shown beside the caption.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables the whole card.
+ *
+ * **disabledOverlay** `boolean` — default `false`
+ * Disables overlay controls only (also implied when `disabled`).
+ *
+ * **onClose** `() => void` — no default
+ * Close overlay click handler.
+ *
+ * **icon** `ReactNode` — no default
+ * Icon for `overlay="icon"` (rendered in {@link Button}).
+ *
+ * **onIconClick** `() => void` — no default
+ * Icon overlay click handler.
+ *
+ * @param {ImageWithDataProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData id="storybook-image" url="https://picsum.photos/400/400" text="Image caption" />
+ *
+ * @example <caption>WithNumber</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData url="https://picsum.photos/400/400" text="Image with supporting number" number={12} />
+ *
+ * @example <caption>WithTag</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData
+ *   url="https://picsum.photos/400/400"
+ *   text="Image caption"
+ *   tag={{ type: 'pill', label: 'Active', color: 'light', status: 'green' }}
+ * />
+ *
+ * @example <caption>CheckboxOverlay</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData url="https://picsum.photos/400/400" text="Image caption" overlay="checkbox" />
+ *
+ * @example <caption>Disabled</caption>
+ * import { ImageWithData } from '@eyesee/ui-components';
+ *
+ * <ImageWithData url="https://picsum.photos/400/400" text="Image caption" disabled overlay="checkbox" isChecked />
+ */
+export default function ImageWithData({ id, url, text, textPosition, tag, overlay, isChecked, onChecked, aspectRatio, lines, number, disabled, disabledOverlay, onClose, icon, onIconClick, }: ImageWithDataProps): import("react").ReactElement;
+export type ImageWithDataCheckedHandler = () => void;
+export type ImageWithDataCloseHandler = () => void;
+export type ImageWithDataIconClickHandler = () => void;
+/**
+ * Pill tag config. Rendered as {@link Pill}.
+ */
+export type ImageWithDataPillTag = {
+    type: "pill";
+    label?: string;
+    text?: string;
+    color?: "light" | "dark" | "outline";
+    status?: "turquoise" | "purple" | "green" | "red" | "yellow" | "orange" | "greenyellow" | "neutral";
+    icon?: React.ReactNode;
+};
+/**
+ * Badge tag config. Rendered as {@link Badge}.
+ */
+export type ImageWithDataBadgeTag = {
+    type: "badge";
+    label?: string;
+    text?: string;
+    shape?: "rectangle" | "pill";
+    state?: "neutral" | "warning" | "error";
+};
+/**
+ * Tag config. Rendered as {@link Tag}.
+ */
+export type ImageWithDataTagTag = {
+    type: "tag";
+    label?: string;
+    text?: string;
+    shape?: "rectangle" | "pill";
+    state?: "default" | "secondary" | "disabled";
+    showLeadingIcon?: boolean;
+    onDismiss?: () => void;
+};
+export type ImageWithDataTagConfig = ImageWithDataPillTag | ImageWithDataBadgeTag | ImageWithDataTagTag;
+export type ImageWithDataProps = {
+    /**
+     * React key / card identifier.
+     */
+    id?: string;
+    /**
+     * Image source URL.
+     */
+    url?: string;
+    /**
+     * Caption below the image.
+     */
+    text?: string;
+    /**
+     * Caption placement. Default `'inside'`.
+     */
+    textPosition?: "inside" | "outside";
+    /**
+     * Optional {@link Pill}, {@link Badge}, or {@link Tag}.
+     */
+    tag?: ImageWithDataTagConfig;
+    /**
+     * Overlay control on the image.
+     */
+    overlay?: "checkbox" | "close" | "icon";
+    /**
+     * Checked state when `overlay` is `'checkbox'`.
+     */
+    isChecked?: boolean;
+    /**
+     * Checkbox overlay toggle handler.
+     */
+    onChecked?: ImageWithDataCheckedHandler;
+    /**
+     * Image frame aspect ratio. Default `'1/1'`.
+     */
+    aspectRatio?: "1/1" | "4/3" | "16/9" | "9/16";
+    /**
+     * Max caption lines. Default `'1'`.
+     */
+    lines?: "1" | "2";
+    /**
+     * Metric shown beside the caption. Default `null`.
+     */
+    number?: string | number | null;
+    /**
+     * Disables the whole card. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Disables overlay controls only. Default `false`.
+     */
+    disabledOverlay?: boolean;
+    /**
+     * Close overlay click handler.
+     */
+    onClose?: ImageWithDataCloseHandler;
+    /**
+     * Icon for `overlay="icon"`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon overlay click handler.
+     */
+    onIconClick?: ImageWithDataIconClickHandler;
+};

package/dist/components/ImageWithData/ImageWithData.js

@@ -3,7 +3,7 @@ import { useState as z } from "react";
 import n from "clsx";
 import { Checkbox as F } from "../Checkbox/Checkbox.js";
 import { tagPropsFromTag as R, badgePropsFromTag as _, pillPropsFromTag as j } from "../ImagePlaceholder/utilsImgPh.js";
-import { ASPECT_RATIOS as f, TAG_TYPES as b, OVERLAYS as B, TEXT_POSITIONS as x, LINES as D } from "../ImagePlaceholder/constantsImgPh.js";
+import { ASPECT_RATIOS as h, TAG_TYPES as b, OVERLAYS as B, TEXT_POSITIONS as x, LINES as D } from "../ImagePlaceholder/constantsImgPh.js";
 import { ImageOffIcon as W } from "../icons-v2/ImageOffIcon.js";
 import { XIcon as X } from "../icons-v2/XIcon.js";
 import e from "./ImageWithData.module.scss.js";
@@ -12,7 +12,7 @@ import { EllipsisTooltip as Y } from "../EllipsisTooltip/EllipsisTooltip.js";
 import { Tag as G } from "../Tag/Tag.js";
 import { Badge as V } from "../Badge/Badge.js";
 import { Pill as q } from "../Pill/Pill.js";
-const ae = ({
+function ae({
   id: T,
   url: k,
   text: s,
@@ -21,7 +21,7 @@ const ae = ({
   overlay: i,
   isChecked: v,
   onChecked: d,
-  aspectRatio: I = f["1/1"],
+  aspectRatio: I = h["1/1"],
   lines: S = D[1],
   number: p = null,
   disabled: m = !1,
@@ -29,8 +29,8 @@ const ae = ({
   onClose: E,
   icon: g,
   onIconClick: P
-}) => {
-  const [c, y] = z(!1), h = () => {
+}) {
+  const [c, y] = z(!1), u = () => {
     switch (r == null ? void 0 : r.type) {
       case "pill":
         return /* @__PURE__ */ o(q, { ...j(r) });
@@ -41,7 +41,7 @@ const ae = ({
       default:
         return null;
     }
-  }, u = !s || t === x.outside ? "8px" : "8px 8px 0 0", A = Number(S), O = n(e.contentText, e.contentTextClamped), w = { WebkitLineClamp: A }, l = C || m;
+  }, f = !s || t === x.outside ? "8px" : "8px 8px 0 0", A = Number(S), O = n(e.contentText, e.contentTextClamped), w = { WebkitLineClamp: A }, l = C || m;
   return /* @__PURE__ */ a("div", { className: n(e.imagePlaceholder, m && e.disabled), children: [
     /* @__PURE__ */ a(
       "div",
@@ -51,14 +51,14 @@ const ae = ({
           i === "checkbox" && e.clickable,
           i === "checkbox" && !c && e.checkboxSelectable
         ),
-        style: { borderRadius: u },
+        style: { borderRadius: f },
         onClick: i === "checkbox" && !c && !m ? d : void 0,
         children: [
           /* @__PURE__ */ o(
             "div",
             {
               className: e.imageFrame,
-              style: { aspectRatio: f[I], borderRadius: u },
+              style: { aspectRatio: h[I], borderRadius: f },
               children: c ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
                 W,
                 {
@@ -76,7 +76,7 @@ const ae = ({
               )
             }
           ),
-          !s && b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: h() }) : null,
+          !s && b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: u() }) : null,
           B.has(i) && /* @__PURE__ */ a("div", { className: e.overlay, onClick: (L) => L.stopPropagation(), children: [
             i === "checkbox" && !c ? /* @__PURE__ */ o(
               F,
@@ -114,7 +114,7 @@ const ae = ({
       }
     ),
     s ? /* @__PURE__ */ a("div", { className: n(e.belowImage, e[t]), children: [
-      b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: h() }) : null,
+      b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: u() }) : null,
       /* @__PURE__ */ a("div", { className: e.content, children: [
         /* @__PURE__ */ o(
           Y,
@@ -130,7 +130,7 @@ const ae = ({
       ] })
     ] }) : null
   ] }, T);
-};
+}
 export {
   ae as default
 };

package/dist/components/Infobox/Infobox.d.ts

@@ -0,0 +1,90 @@
+/**
+ * All props are optional.
+ *
+ * @typedef {object} InfoboxProps
+ *
+ * @property {string}          [title='']
+ *   Heading text. Default `''`.
+ * @property {string}          [text='']
+ *   Body copy below the heading (or inline when no title). Default `''`.
+ * @property {'fill'|'outline'} [color='fill']
+ *   Visual style. Default `'fill'`.
+ * @property {'success'|'error'|'primary'|'warning'} [status='success']
+ *   Semantic status colour. Default `'success'`.
+ * @property {React.ReactNode} [icon=null]
+ *   Optional custom leading icon. Default `null`.
+ * @property {boolean}         [fullWidth=false]
+ *   Stretch to parent width. Default `false`.
+ */
+/**
+ * Informational block with semantic status colours.
+ *
+ * ## Props
+ *
+ * All optional.
+ *
+ * **title** `string` — default `''`
+ * Heading text.
+ *
+ * **text** `string` — default `''`
+ * Body copy below the heading (or inline when no title).
+ *
+ * **color** `'fill' | 'outline'` — default `'fill'`
+ * Visual style.
+ *
+ * **status** `'success' | 'error' | 'primary' | 'warning'` — default `'success'`
+ * Semantic status colour.
+ *
+ * **icon** `ReactNode` — default `null`
+ * Optional custom leading icon.
+ *
+ * **fullWidth** `boolean` — default `false`
+ * Stretch to parent width.
+ *
+ * @param {InfoboxProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { Infobox } from '@eyesee/ui-components';
+ *
+ * <Infobox status="success" color="fill" />
+ *
+ * @example <caption>All variants</caption>
+ * import { Infobox } from '@eyesee/ui-components';
+ *
+ * <Infobox status="success" color="fill" />
+ * <Infobox status="success" color="outline" />
+ * <Infobox status="error" color="fill" />
+ * <Infobox status="primary" color="outline" />
+ * <Infobox status="warning" color="fill" />
+ */
+export function Infobox({ title, text, color, status, icon, fullWidth, }: InfoboxProps): import("react").ReactElement;
+/**
+ * All props are optional.
+ */
+export type InfoboxProps = {
+    /**
+     * Heading text. Default `''`.
+     */
+    title?: string;
+    /**
+     * Body copy below the heading (or inline when no title). Default `''`.
+     */
+    text?: string;
+    /**
+     * Visual style. Default `'fill'`.
+     */
+    color?: "fill" | "outline";
+    /**
+     * Semantic status colour. Default `'success'`.
+     */
+    status?: "success" | "error" | "primary" | "warning";
+    /**
+     * Optional custom leading icon. Default `null`.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Stretch to parent width. Default `false`.
+     */
+    fullWidth?: boolean;
+};

package/dist/components/Infobox/Infobox.js

@@ -1,16 +1,16 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import x from "clsx";
-import { getInfoboxStyles as p, INFOBOX_STATUSES as h, INFOBOX_COLORS as N } from "./infoboxVariants.js";
+import { getInfoboxStyles as p, INFOBOX_STATUSES as h, INFOBOX_COLORS as u } from "./infoboxVariants.js";
 import s from "./Infobox.module.scss.js";
-const y = ({
+function y({
   title: o = "",
   text: t = "",
   color: c = "fill",
   status: i = "success",
   icon: n = null,
   fullWidth: r = !1
-}) => {
-  const f = h.includes(i) ? i : "success", m = N.includes(c) ? c : "fill", d = p(m, f), l = !!o;
+}) {
+  const f = h.includes(i) ? i : "success", m = u.includes(c) ? c : "fill", d = p(m, f), l = !!o;
   return /* @__PURE__ */ a(
     "div",
     {
@@ -27,7 +27,7 @@ const y = ({
       ]
     }
   );
-};
+}
 export {
   y as Infobox
 };

package/dist/components/Infobox/infoboxVariants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {'fill'|'outline'} color
+ * @param {'success'|'error'|'primary'|'warning'} status
+ * @returns {Record<string, string>}
+ */
+export function getInfoboxStyles(color: "fill" | "outline", status: "success" | "error" | "primary" | "warning"): Record<string, string>;
+export const INFOBOX_STATUSES: string[];
+export const INFOBOX_COLORS: string[];