@eyesee/ui-components 0.8.0 → 0.10.0

package/dist/components/Pill/Pill.d.ts

@@ -0,0 +1,81 @@
+/**
+ * All props are optional.
+ *
+ * @typedef {object} PillProps
+ *
+ * @property {string}          [label='Completed']
+ *   Label text. Default `'Completed'`.
+ * @property {'light'|'dark'|'outline'} [color='light']
+ *   Visual variant. Default `'light'`.
+ * @property {'turquoise'|'purple'|'green'|'red'|'yellow'|'orange'|'greenyellow'|'neutral'} [status='turquoise']
+ *   Colour theme. Default `'turquoise'`.
+ * @property {React.ReactNode} [icon=null]
+ *   Optional leading icon. Default `null`.
+ */
+/**
+ * Compact inline pill for status labels and metadata.
+ *
+ * ## Props
+ *
+ * All optional.
+ *
+ * **label** `string` — default `'Completed'`
+ * Label text.
+ *
+ * **color** `'light' | 'dark' | 'outline'` — default `'light'`
+ * Visual variant: light (pale bg), dark (saturated bg), outline (border only).
+ *
+ * **status** `'turquoise' | 'purple' | 'green' | 'red' | 'yellow' | 'orange' | 'greenyellow' | 'neutral'` — default `'turquoise'`
+ * Colour theme.
+ *
+ * **icon** `ReactNode` — default `null`
+ * Optional leading icon.
+ *
+ * @param {PillProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { Pill } from '@eyesee/ui-components';
+ *
+ * <Pill label="Completed" color="light" status="turquoise" />
+ *
+ * @example <caption>Text only</caption>
+ * import { Pill } from '@eyesee/ui-components';
+ *
+ * <Pill label="Completed" />
+ *
+ * @example <caption>Color and status variants</caption>
+ * import { Pill } from '@eyesee/ui-components';
+ *
+ * <Pill label="Completed" color="light" status="turquoise" />
+ * <Pill label="Completed" color="dark" status="green" />
+ * <Pill label="Completed" color="outline" status="red" />
+ *
+ * @example <caption>In context</caption>
+ * import { Pill } from '@eyesee/ui-components';
+ *
+ * <span>Project Alpha</span>
+ * <Pill label="Completed" color="light" status="purple" />
+ */
+export function Pill({ label, color, status, icon }: PillProps): import("react").ReactElement;
+/**
+ * All props are optional.
+ */
+export type PillProps = {
+    /**
+     * Label text. Default `'Completed'`.
+     */
+    label?: string;
+    /**
+     * Visual variant. Default `'light'`.
+     */
+    color?: "light" | "dark" | "outline";
+    /**
+     * Colour theme. Default `'turquoise'`.
+     */
+    status?: "turquoise" | "purple" | "green" | "red" | "yellow" | "orange" | "greenyellow" | "neutral";
+    /**
+     * Optional leading icon. Default `null`.
+     */
+    icon?: React.ReactNode;
+};

package/dist/components/Pill/Pill.js

@@ -1,20 +1,15 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import a from "clsx";
-import { getPillStyles as u } from "./pillVariants.js";
+import u from "clsx";
+import { getPillStyles as a } from "./pillVariants.js";
 import l from "./Pill.module.scss.js";
-const C = ({
-  label: e = "Completed",
-  color: o = "light",
-  status: s = "turquoise",
-  icon: t = null
-}) => {
-  const { backgroundColor: i, borderColor: n, color: c } = u(o, s), m = o === "outline";
+function C({ label: e = "Completed", color: o = "light", status: i = "turquoise", icon: t = null }) {
+  const { backgroundColor: s, borderColor: n, color: c } = a(o, i), m = o === "outline";
   return /* @__PURE__ */ p(
     "div",
     {
-      className: a(l.pill, m && l.pillOutline),
+      className: u(l.pill, m && l.pillOutline),
       style: {
-        backgroundColor: i,
+        backgroundColor: s,
         borderColor: n,
         color: c
       },
@@ -24,7 +19,7 @@ const C = ({
       ]
     }
   );
-};
+}
 export {
   C as Pill
 };

package/dist/components/Pill/pillVariants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @param {'light'|'dark'|'outline'} color
+ * @param {'turquoise'|'purple'|'green'|'red'|'yellow'|'orange'|'greenyellow'|'neutral'} status
+ * @returns {{ backgroundColor: string; borderColor: string; color: string }}
+ */
+export function getPillStyles(color: "light" | "dark" | "outline", status: "turquoise" | "purple" | "green" | "red" | "yellow" | "orange" | "greenyellow" | "neutral"): {
+    backgroundColor: string;
+    borderColor: string;
+    color: string;
+};
+/**
+ * Maps (color, status) props to CSS variable names for the Pill component.
+ * Matches Figma design: color=light|dark|outline, status=turquoise|purple|green|red|yellow|orange|greenyellow|neutral
+ */
+export const STATUSES: string[];
+export const COLORS: string[];

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @typedef {object} ProgressBarProps
+ *
+ * @property {number} [value=0]
+ *   Progress value (0–100) or numerator when `maxValue` is set. Default `0`.
+ * @property {number|null} [maxValue=null]
+ *   Denominator; converts `value` to a percentage. Default `null`.
+ * @property {string|number|null} [label=null]
+ *   Caption below the bar. Numbers render as `"N%"`. Default `null`.
+ * @property {string|null} [fillColor=null]
+ *   CSS colour for the fill. Default `null` (primary token).
+ * @property {string} [trackClassName]
+ *   Extra class on the track element.
+ * @property {string} [fillClassName]
+ *   Extra class on the fill element.
+ * @property {string} [labelClassName]
+ *   Extra class on the label element.
+ * @property {boolean} [displayPercentageText=false]
+ *   Show percentage beside the bar. Default `false`.
+ */
+/**
+ * Horizontal progress bar with optional label and inline percentage.
+ *
+ * ## Props
+ *
+ * **value** `number` — default `0`
+ * Progress value (0–100) or numerator when `maxValue` is set.
+ *
+ * **maxValue** `number | null` — default `null`
+ * Denominator; converts `value` to a percentage.
+ *
+ * **label** `string | number | null` — default `null`
+ * Caption below the bar. Numbers render as `"N%"`.
+ *
+ * **fillColor** `string | null` — default `null`
+ * CSS colour for the fill (defaults to primary token).
+ *
+ * **trackClassName** `string` — no default
+ * Extra class on the track element.
+ *
+ * **fillClassName** `string` — no default
+ * Extra class on the fill element.
+ *
+ * **labelClassName** `string` — no default
+ * Extra class on the label element.
+ *
+ * **displayPercentageText** `boolean` — default `false`
+ * Show percentage beside the bar.
+ *
+ * @param {ProgressBarProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { ProgressBar } from '@eyesee/ui-components';
+ *
+ * <ProgressBar value={60} label="Upload progress" displayPercentageText />
+ *
+ * @example <caption>WithMaximumValue</caption>
+ * import { ProgressBar } from '@eyesee/ui-components';
+ *
+ * <ProgressBar value={3} maxValue={5} label="3 of 5 completed" />
+ *
+ * @example <caption>CustomColor</caption>
+ * import { ProgressBar } from '@eyesee/ui-components';
+ *
+ * <ProgressBar
+ *   value={80}
+ *   label="Custom fill color"
+ *   fillColor="var(--color--background--success--default)"
+ * />
+ *
+ * @example <caption>WithoutLabel</caption>
+ * import { ProgressBar } from '@eyesee/ui-components';
+ *
+ * <ProgressBar value={60} label={null} displayPercentageText />
+ */
+export function ProgressBar({ value, maxValue, label, fillColor, trackClassName, fillClassName, labelClassName, displayPercentageText, }: ProgressBarProps): import("react").ReactElement;
+export type ProgressBarProps = {
+    /**
+     * Progress value (0–100) or numerator when `maxValue` is set. Default `0`.
+     */
+    value?: number;
+    /**
+     * Denominator; converts `value` to a percentage. Default `null`.
+     */
+    maxValue?: number | null;
+    /**
+     * Caption below the bar. Numbers render as `"N%"`. Default `null`.
+     */
+    label?: string | number | null;
+    /**
+     * CSS colour for the fill. Default `null` (primary token).
+     */
+    fillColor?: string | null;
+    /**
+     * Extra class on the track element.
+     */
+    trackClassName?: string;
+    /**
+     * Extra class on the fill element.
+     */
+    fillClassName?: string;
+    /**
+     * Extra class on the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Show percentage beside the bar. Default `false`.
+     */
+    displayPercentageText?: boolean;
+};

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,26 +1,27 @@
-import { jsxs as n, Fragment as g, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, Fragment as g, jsx as o } from "react/jsx-runtime";
 import l from "clsx";
 import e from "./ProgressBar.module.scss.js";
-const N = (r, s) => typeof r != "number" || Number.isNaN(r) ? 0 : typeof s == "number" ? Math.max(0, Math.min(100, Math.round(r / s * 100))) : Math.max(0, Math.min(100, r)), x = ({
+const N = (r, n) => typeof r != "number" || Number.isNaN(r) ? 0 : typeof n == "number" ? Math.max(0, Math.min(100, Math.round(r / n * 100))) : Math.max(0, Math.min(100, r));
+function x({
   value: r = 0,
-  maxValue: s = null,
+  maxValue: n = null,
   label: t = null,
-  fillColor: i = null,
+  fillColor: a = null,
   trackClassName: m,
   fillClassName: c,
   labelClassName: p,
-  displayPercentageText: d = !1
-}) => {
-  const a = N(r, s), f = typeof s == "number" && r < s, h = t !== null, u = typeof t == "number" ? `${t}%` : t;
-  return /* @__PURE__ */ n(g, { children: [
-    /* @__PURE__ */ n("div", { className: e.progressContainer, children: [
+  displayPercentageText: f = !1
+}) {
+  const i = N(r, n), d = typeof n == "number" && r < n, u = t !== null, h = typeof t == "number" ? `${t}%` : t;
+  return /* @__PURE__ */ s(g, { children: [
+    /* @__PURE__ */ s("div", { className: e.progressContainer, children: [
       /* @__PURE__ */ o(
         "div",
         {
           className: l(e.track, m),
           style: {
-            "--progress-value": `${a}%`,
-            "--progress-fill-color": i || "var(--color--background--primary--default)"
+            "--progress-value": `${i}%`,
+            "--progress-fill-color": a || "var(--color--background--primary--default)"
           },
           children: /* @__PURE__ */ o(
             "div",
@@ -28,21 +29,21 @@ const N = (r, s) => typeof r != "number" || Number.isNaN(r) ? 0 : typeof s == "n
               className: l(
                 e.fill,
                 e.fillCompleted,
-                f && e.fillCompletedIndeterminate,
+                d && e.fillCompletedIndeterminate,
                 c
               )
             }
           )
         }
       ),
-      d && /* @__PURE__ */ n("span", { className: e.progressPercentageText, children: [
-        a,
+      f && /* @__PURE__ */ s("span", { className: e.progressPercentageText, children: [
+        i,
         "%"
       ] })
     ] }),
-    h ? /* @__PURE__ */ o("p", { className: l(e.label, p), children: u }) : null
+    u ? /* @__PURE__ */ o("p", { className: l(e.label, p), children: h }) : null
   ] });
-};
+}
 export {
   x as ProgressBar
 };

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @typedef {object} RadioProps
+ *
+ * @property {'lg'|'md'} [size='lg']
+ *   Visual size: 20px (`lg`) or 16px (`md`). Default `'lg'`.
+ * @property {string} [label]
+ *   Optional label after the control.
+ * @property {string} [className]
+ *   Extra class on the root `<label>`.
+ *
+ * Native `<input type="radio">` props (`checked`, `disabled`, `name`, `value`, `onChange`, …)
+ * are spread onto the input. Rest props go to the native `<input type="radio">`.
+ */
+/**
+ * Design-system radio indicator.
+ *
+ * ## Props
+ *
+ * **size** `'lg' | 'md'` — default `'lg'`
+ * Visual size: 20px (`lg`) or 16px (`md`).
+ *
+ * **label** `string` — no default
+ * Optional label after the control.
+ *
+ * **className** `string` — no default
+ * Extra class on the root `<label>`.
+ *
+ * Native `<input type="radio">` props (`checked`, `disabled`, `name`, `value`, `onChange`, …)
+ * are spread onto the input. Rest props go to the native `<input type="radio">`.
+ *
+ * @param {RadioProps & import('react').InputHTMLAttributes<HTMLInputElement>} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Grid (Figma-like)</caption>
+ * import { Radio } from '@eyesee/ui-components';
+ *
+ * <Radio size="md" name="group" value="a" />
+ * <Radio size="md" name="group" value="b" checked readOnly />
+ * <Radio size="md" name="group" value="c" disabled />
+ */
+export function Radio({ size, label, className, ...inputProps }: RadioProps & import("react").InputHTMLAttributes<HTMLInputElement>): import("react").ReactElement;
+export type RadioProps = {
+    /**
+     * Visual size: 20px (`lg`) or 16px (`md`). Default `'lg'`.
+     */
+    size?: "lg" | "md";
+    /**
+     * Optional label after the control.
+     */
+    label?: string;
+    /**
+     * Extra class on the root `<label>`.
+     *
+     * Native `<input type="radio">` props (`checked`, `disabled`, `name`, `value`, `onChange`, …)
+     * are spread onto the input. Rest props go to the native `<input type="radio">`.
+     */
+    className?: string;
+};

package/dist/components/Radio/Radio.js

@@ -1,20 +1,21 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import c from "clsx";
-import s from "./Radio.module.scss.js";
+import l from "./Radio.module.scss.js";
 import { CircleIcon as t } from "../icons-v2/CircleIcon.js";
 const m = (
   /** @type {const} */
   ["lg", "md"]
-), N = ({ size: r = "lg", label: o, className: i, ...n }) => {
-  const a = m.includes(r) ? r : "lg";
-  return /* @__PURE__ */ e("label", { className: c(s.root, i), children: [
-    /* @__PURE__ */ e("span", { className: s.control, children: [
-      /* @__PURE__ */ l("input", { className: s.input, type: "radio", ...n }),
-      /* @__PURE__ */ l("span", { className: s.indicator, "aria-hidden": !0, children: /* @__PURE__ */ l(t, { iconSize: a === "lg" ? "m" : "s" }) })
+);
+function h({ size: s = "lg", label: i, className: o, ...e }) {
+  const a = m.includes(s) ? s : "lg";
+  return /* @__PURE__ */ n("label", { className: c(l.root, o), children: [
+    /* @__PURE__ */ n("span", { className: l.control, children: [
+      /* @__PURE__ */ r("input", { className: l.input, type: "radio", ...e }),
+      /* @__PURE__ */ r("span", { className: l.indicator, "aria-hidden": !0, children: /* @__PURE__ */ r(t, { iconSize: a === "lg" ? "m" : "s" }) })
     ] }),
-    o ? /* @__PURE__ */ l("span", { className: s.label, children: o }) : null
+    i ? /* @__PURE__ */ r("span", { className: l.label, children: i }) : null
   ] });
-};
+}
 export {
-  N as Radio
+  h as Radio
 };

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,204 @@
+/**
+ * @callback TabClickHandler
+ * @returns {void}
+ */
+/**
+ * @typedef {object} TabProps
+ *
+ * @property {string} [label='Tab']
+ *   Tab label. Default `'Tab'`.
+ * @property {React.ReactNode} [startIcon]
+ *   Icon before the label.
+ * @property {'primary'|'secondary'} [variant]
+ *   Colour theme for selected / hover states.
+ * @property {'outline'|'white'|'color'} [type]
+ *   Button variant background / border style.
+ * @property {'sm'|'md'|'lg'|'xl'} [spacing]
+ *   Padding size.
+ * @property {'standalone'|'left'|'middle'|'right'} [position]
+ *   Segmented button position (`as="button"` only).
+ * @property {boolean} [underline=false]
+ *   Bottom border when selected (`as="span"`). Default `false`.
+ * @property {boolean} [selected=false]
+ *   Selected look. Default `false`.
+ * @property {boolean} [disabled=false]
+ *   Disabled state. Default `false`.
+ * @property {TabClickHandler} [onClick]
+ *   Click handler. Default `() => {}`.
+ * @property {'button'|'span'} [as='button']
+ *   Root element; use `span` inside links. Default `'button'`.
+ * @property {React.ReactNode} [tooltipText=null]
+ *   Wraps label in {@link Tooltip} when set. Default `null`.
+ * @property {string|null} [tooltipTitle=null]
+ *   {@link Tooltip} title. Default `null`.
+ * @property {boolean} [shouldRemoveBorder=false]
+ *   Remove left border on adjacent segments. Default `false`.
+ *
+ * @see {@link Tooltip}
+ */
+/**
+ * Single tab. Text-style (`as="span"`) or segmented button (`as="button"`).
+ *
+ * ## Props
+ *
+ * **label** `string` — default `'Tab'`
+ * Tab label.
+ *
+ * **startIcon** `ReactNode` — no default
+ * Icon before the label.
+ *
+ * **variant** `'primary' | 'secondary'` — no default
+ * Colour theme for selected / hover states.
+ *
+ * **type** `'outline' | 'white' | 'color'` — no default
+ * Button variant background / border style.
+ *
+ * **spacing** `'sm' | 'md' | 'lg' | 'xl'` — no default
+ * Padding size.
+ *
+ * **position** `'standalone' | 'left' | 'middle' | 'right'` — no default
+ * Segmented button position (`as="button"` only).
+ *
+ * **underline** `boolean` — default `false`
+ * Bottom border when selected (`as="span"`).
+ *
+ * **selected** `boolean` — default `false`
+ * Selected look.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disabled state.
+ *
+ * **onClick** `() => void` — default `() => {}`
+ * Click handler.
+ *
+ * **as** `'button' | 'span'` — default `'button'`
+ * Root element; use `span` inside links.
+ *
+ * **tooltipText** `ReactNode` — default `null`
+ * Wraps label in {@link Tooltip} when set.
+ *
+ * **tooltipTitle** `string | null` — default `null`
+ * {@link Tooltip} title.
+ *
+ * **shouldRemoveBorder** `boolean` — default `false`
+ * Remove left border on adjacent segments.
+ *
+ * @param {TabProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Playground</caption>
+ * import { Tab } from '@eyesee/ui-components';
+ *
+ * <Tab
+ *   label="Overview"
+ *   as="button"
+ *   variant="secondary"
+ *   type="outline"
+ *   spacing="md"
+ *   position="standalone"
+ * />
+ *
+ * @example <caption>Text (span) + underline</caption>
+ * import { Tab } from '@eyesee/ui-components';
+ *
+ * <Tab
+ *   label="Overview"
+ *   as="span"
+ *   underline
+ *   selected
+ *   spacing="md"
+ *   variant="secondary"
+ * />
+ *
+ * @example <caption>Button (segmented)</caption>
+ * import { Tab } from '@eyesee/ui-components';
+ *
+ * <Tab label="All" as="button" variant="secondary" type="outline" spacing="md" position="left" />
+ * <Tab label="Drafts" as="button" variant="secondary" type="outline" spacing="md" position="middle" selected />
+ * <Tab label="Published" as="button" variant="secondary" type="outline" spacing="md" position="right" disabled />
+ *
+ * @example <caption>WithIcons</caption>
+ * import { Tab } from '@eyesee/ui-components';
+ * import { HomeIcon } from '@eyesee/ui-components/icons';
+ *
+ * <Tab label="Home" as="button" selected startIcon={<HomeIcon iconSize="m" />} />
+ *
+ * @example <caption>With tooltip</caption>
+ * import { Tab } from '@eyesee/ui-components';
+ *
+ * <Tab
+ *   label="Overview"
+ *   tooltipTitle="Tooltip title"
+ *   tooltipText="This is a very long tooltip text that should wrap to the next line if it exceeds the container width."
+ * />
+ *
+ * @example <caption>With tooltip (disabled tab disables tooltip)</caption>
+ * import { Tab } from '@eyesee/ui-components';
+ *
+ * <Tab
+ *   label="Overview"
+ *   tooltipTitle="Tooltip title"
+ *   tooltipText="Tooltip is disabled when the tab is disabled."
+ *   disabled
+ * />
+ */
+export function Tab({ label, startIcon, variant, spacing, type, position, underline, disabled, selected, onClick, as: Component, tooltipText, tooltipTitle, shouldRemoveBorder, }: TabProps): import("react").ReactElement;
+export type TabClickHandler = () => void;
+export type TabProps = {
+    /**
+     * Tab label. Default `'Tab'`.
+     */
+    label?: string;
+    /**
+     * Icon before the label.
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Colour theme for selected / hover states.
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Button variant background / border style.
+     */
+    type?: "outline" | "white" | "color";
+    /**
+     * Padding size.
+     */
+    spacing?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Segmented button position (`as="button"` only).
+     */
+    position?: "standalone" | "left" | "middle" | "right";
+    /**
+     * Bottom border when selected (`as="span"`). Default `false`.
+     */
+    underline?: boolean;
+    /**
+     * Selected look. Default `false`.
+     */
+    selected?: boolean;
+    /**
+     * Disabled state. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Click handler. Default `() => {}`.
+     */
+    onClick?: TabClickHandler;
+    /**
+     * Root element; use `span` inside links. Default `'button'`.
+     */
+    as?: "button" | "span";
+    /**
+     * Wraps label in {@link Tooltip} when set. Default `null`.
+     */
+    tooltipText?: React.ReactNode;
+    /**
+     * {@link Tooltip} title. Default `null`.
+     */
+    tooltipTitle?: string | null;
+    /**
+     * Remove left border on adjacent segments. Default `false`.
+     */
+    shouldRemoveBorder?: boolean;
+};

package/dist/components/Tab/Tab.js

@@ -3,7 +3,7 @@ import v from "clsx";
 import o from "./Tab.module.scss.js";
 import { Tooltip as w } from "../Tooltip/Tooltip.js";
 import { HelpIcon as T } from "../icons-v2/HelpIcon.js";
-const I = ({
+function I({
   label: m = "Tab",
   startIcon: u,
   variant: f,
@@ -19,7 +19,7 @@ const I = ({
   tooltipText: a = null,
   tooltipTitle: b = null,
   shouldRemoveBorder: N = !1
-}) => {
+}) {
   const c = v(
     o.tab,
     o[f],
@@ -47,7 +47,7 @@ const I = ({
     )
   ] });
   return l === "span" ? /* @__PURE__ */ t("span", { className: c, onClick: s, "aria-disabled": r, children: i }) : /* @__PURE__ */ t("button", { className: c, disabled: r, onClick: s, type: "button", children: i });
-};
+}
 export {
   I as Tab
 };