@eyesee/ui-components 0.8.0 → 0.10.0

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,356 @@
+/**
+ * @callback TabsChangeHandler
+ * @param {TabOption} tab Selected tab object (normalised).
+ * @returns {void}
+ */
+/**
+ * Tab definition. Plain strings in `options` are used as the label.
+ *
+ * @typedef {object} TabOption
+ * @property {string}          label  - Display text. Key name configurable via `keyLabel`.
+ * @property {boolean}         [hidden=false]
+ *   When `true`, tab is not rendered. Default `false`.
+ * @property {boolean}         [disabled=false]
+ *   Tab is visible but not selectable. Default `false`.
+ * @property {string}          [tooltipText]
+ *   Tooltip body. Key name configurable via `keyTooltipText`.
+ * @property {string}          [tooltipTitle]
+ *   Tooltip title. Key name configurable via `keyTooltipTitle`.
+ * @property {React.ReactNode} [icon]
+ *   Leading icon. Key name configurable via `keyIcon`.
+ */
+/**
+ * @typedef {object} TabsProps
+ *
+ * @property {TabOption[]|string[]} options
+ *   Tab definitions. Strings become labels.
+ * @property {TabsChangeHandler} [onTabChange]
+ *   Fired when a non-disabled tab is clicked. Default `() => {}`.
+ * @property {TabOption|string}  [selectedTab]
+ *   Active tab. Defaults to `options[0]`. Matched on trimmed `label`.
+ * @property {'primary'|'secondary'} [variant='primary']
+ *   Colour theme for all tabs. Default `'primary'`.
+ * @property {'outline'|'white'|'color'} [type='outline']
+ *   Active indicator fill (`tabVariant="button"`). Default `'outline'`.
+ * @property {'text'|'button'}   [tabVariant='text']
+ *   `'text'` → `<span>`; `'button'` → segmented buttons. Default `'text'`.
+ * @property {'sm'|'md'|'lg'}   [spacing='md']
+ *   Tab padding. Default `'md'`.
+ * @property {'none'|'xs'|'sm'|'md'|'lg'|'xl'} [gapSpacing='none']
+ *   Gap between tabs. `'none'` merges button borders. Default `'none'`.
+ * @property {boolean}           [positionStandalone=false]
+ *   Button mode: each tab as a standalone pill. Default `false`.
+ * @property {boolean}           [underline=false]
+ *   Underline on the active text tab. Default `false`.
+ * @property {string}            [keyLabel='label']
+ *   Option property for the label. Default `'label'`.
+ * @property {string}            [keyTooltipText='tooltipText']
+ *   Option property for tooltip body. Default `'tooltipText'`.
+ * @property {string}            [keyTooltipTitle='tooltipTitle']
+ *   Option property for tooltip title. Default `'tooltipTitle'`.
+ * @property {string}            [keyIcon='icon']
+ *   Option property for the icon. Default `'icon'`.
+ * @property {React.ReactNode}   [startIcon=null]
+ *   Fallback icon when the option has no `icon`. Default `null`.
+ * @property {boolean}           [disabled=false]
+ *   Disables every tab in the group. Default `false`.
+ *
+ * @see {@link Tab}
+ */
+/**
+ * Controlled tab group. Pass `selectedTab` and update it in `onTabChange`.
+ *
+ * ## Props
+ *
+ * **options** `TabOption[] | string[]` — no default
+ * Tab definitions. Strings become labels.
+ *
+ * **onTabChange** `(tab: TabOption) => void` — default `() => {}`
+ * Fired when a non-disabled tab is clicked.
+ *
+ * **selectedTab** `TabOption | string` — default `options[0]`
+ * Active tab. Matched on trimmed `label`.
+ *
+ * **variant** `'primary' | 'secondary'` — default `'primary'`
+ * Colour theme for all tabs.
+ *
+ * **type** `'outline' | 'white' | 'color'` — default `'outline'`
+ * Active indicator fill for `tabVariant="button"`.
+ *
+ * **tabVariant** `'text' | 'button'` — default `'text'`
+ * `'text'` renders spans; `'button'` renders segmented buttons.
+ *
+ * **spacing** `'sm' | 'md' | 'lg'` — default `'md'`
+ * Tab padding.
+ *
+ * **gapSpacing** `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` — default `'none'`
+ * Gap between tabs. `'none'` merges button borders.
+ *
+ * **positionStandalone** `boolean` — default `false`
+ * Button mode: render each tab as a standalone pill.
+ *
+ * **underline** `boolean` — default `false`
+ * Underline on the active text tab.
+ *
+ * **keyLabel** `string` — default `'label'`
+ * Option property used as the display label.
+ *
+ * **keyTooltipText** `string` — default `'tooltipText'`
+ * Option property for tooltip body text.
+ *
+ * **keyTooltipTitle** `string` — default `'tooltipTitle'`
+ * Option property for tooltip title.
+ *
+ * **keyIcon** `string` — default `'icon'`
+ * Option property for the tab icon.
+ *
+ * **startIcon** `ReactNode` — default `null`
+ * Fallback icon when the option has no `icon`.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables every tab in the group.
+ *
+ * @param {TabsProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Text (tab-default)</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'overview', label: 'Overview' },
+ *     { name: 'details', label: 'Details' },
+ *     { name: 'history', label: 'History', disabled: true },
+ *   ]}
+ *   selectedTab={{ name: 'overview', label: 'Overview' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="text"
+ *   variant="secondary"
+ *   underline
+ * />
+ *
+ * @example <caption>Button — outline (grouped)</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'all', label: 'All' },
+ *     { name: 'drafts', label: 'Drafts' },
+ *     { name: 'published', label: 'Published' },
+ *     { name: 'archived', label: 'Archived' },
+ *   ]}
+ *   selectedTab={{ name: 'drafts', label: 'Drafts' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="button"
+ *   type="outline"
+ *   gapSpacing="none"
+ * />
+ *
+ * @example <caption>Button — white (grouped)</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'all', label: 'All' },
+ *     { name: 'drafts', label: 'Drafts' },
+ *     { name: 'published', label: 'Published' },
+ *     { name: 'archived', label: 'Archived' },
+ *   ]}
+ *   selectedTab={{ name: 'drafts', label: 'Drafts' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="button"
+ *   type="white"
+ *   gapSpacing="none"
+ * />
+ *
+ * @example <caption>Button — color (grouped)</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'all', label: 'All' },
+ *     { name: 'drafts', label: 'Drafts' },
+ *     { name: 'published', label: 'Published' },
+ *     { name: 'archived', label: 'Archived' },
+ *   ]}
+ *   selectedTab={{ name: 'drafts', label: 'Drafts' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="button"
+ *   type="color"
+ *   gapSpacing="none"
+ * />
+ *
+ * @example <caption>Button — standalone pills</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'summary', label: 'Summary' },
+ *     { name: 'insights', label: 'Insights' },
+ *     { name: 'settings', label: 'Settings', disabled: true },
+ *   ]}
+ *   selectedTab={{ name: 'summary', label: 'Summary' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="button"
+ *   type="outline"
+ *   positionStandalone
+ *   gapSpacing="sm"
+ * />
+ *
+ * @example <caption>Button — with gap spacing</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'all', label: 'All' },
+ *     { name: 'drafts', label: 'Drafts' },
+ *     { name: 'published', label: 'Published' },
+ *     { name: 'archived', label: 'Archived' },
+ *   ]}
+ *   selectedTab={{ name: 'all', label: 'All' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="button"
+ *   type="outline"
+ *   positionStandalone
+ *   gapSpacing="md"
+ * />
+ *
+ * @example <caption>WithIcons</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ * import { HomeIcon, SettingsIcon } from '@eyesee/ui-components/icons';
+ *
+ * <Tabs
+ *   options={[
+ *     { name: 'overview', label: 'Overview', icon: <HomeIcon iconSize="m" /> },
+ *     { name: 'details', label: 'Details' },
+ *     { name: 'settings', label: 'Settings', icon: <SettingsIcon iconSize="m" />, disabled: true },
+ *   ]}
+ *   selectedTab={{ name: 'overview', label: 'Overview' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="button"
+ *   variant="secondary"
+ *   type="outline"
+ * />
+ *
+ * @example <caption>WithTooltips</caption>
+ * import { Tabs } from '@eyesee/ui-components';
+ *
+ * <Tabs
+ *   options={[
+ *     {
+ *       name: 'overview',
+ *       label: 'Overview',
+ *       tooltipTitle: 'Overview',
+ *       tooltipText: 'Summary of the current project.',
+ *     },
+ *     {
+ *       name: 'details',
+ *       label: 'Details',
+ *       tooltipTitle: 'Details',
+ *       tooltipText: 'Extended metadata and configuration.',
+ *     },
+ *     { name: 'history', label: 'History', disabled: true },
+ *   ]}
+ *   selectedTab={{ name: 'overview', label: 'Overview' }}
+ *   onTabChange={(tab) => {}}
+ *   tabVariant="text"
+ *   underline
+ * />
+ */
+export function Tabs({ options, onTabChange, selectedTab, variant, type, spacing, gapSpacing, tabVariant, positionStandalone, underline, keyLabel, keyTooltipText, keyTooltipTitle, keyIcon, startIcon, disabled, }: TabsProps): import("react").ReactElement;
+export type TabsChangeHandler = (tab: TabOption) => void;
+/**
+ * Tab definition. Plain strings in `options` are used as the label.
+ */
+export type TabOption = {
+    /**
+     * - Display text. Key name configurable via `keyLabel`.
+     */
+    label: string;
+    /**
+     * When `true`, tab is not rendered. Default `false`.
+     */
+    hidden?: boolean;
+    /**
+     * Tab is visible but not selectable. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Tooltip body. Key name configurable via `keyTooltipText`.
+     */
+    tooltipText?: string;
+    /**
+     * Tooltip title. Key name configurable via `keyTooltipTitle`.
+     */
+    tooltipTitle?: string;
+    /**
+     * Leading icon. Key name configurable via `keyIcon`.
+     */
+    icon?: React.ReactNode;
+};
+export type TabsProps = {
+    /**
+     *   Tab definitions. Strings become labels.
+     */
+    options: TabOption[] | string[];
+    /**
+     * Fired when a non-disabled tab is clicked. Default `() => {}`.
+     */
+    onTabChange?: TabsChangeHandler;
+    /**
+     * Active tab. Defaults to `options[0]`. Matched on trimmed `label`.
+     */
+    selectedTab?: TabOption | string;
+    /**
+     * Colour theme for all tabs. Default `'primary'`.
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Active indicator fill (`tabVariant="button"`). Default `'outline'`.
+     */
+    type?: "outline" | "white" | "color";
+    /**
+     * `'text'` → `<span>`; `'button'` → segmented buttons. Default `'text'`.
+     */
+    tabVariant?: "text" | "button";
+    /**
+     * Tab padding. Default `'md'`.
+     */
+    spacing?: "sm" | "md" | "lg";
+    /**
+     * Gap between tabs. `'none'` merges button borders. Default `'none'`.
+     */
+    gapSpacing?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Button mode: each tab as a standalone pill. Default `false`.
+     */
+    positionStandalone?: boolean;
+    /**
+     * Underline on the active text tab. Default `false`.
+     */
+    underline?: boolean;
+    /**
+     * Option property for the label. Default `'label'`.
+     */
+    keyLabel?: string;
+    /**
+     * Option property for tooltip body. Default `'tooltipText'`.
+     */
+    keyTooltipText?: string;
+    /**
+     * Option property for tooltip title. Default `'tooltipTitle'`.
+     */
+    keyTooltipTitle?: string;
+    /**
+     * Option property for the icon. Default `'icon'`.
+     */
+    keyIcon?: string;
+    /**
+     * Fallback icon when the option has no `icon`. Default `null`.
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Disables every tab in the group. Default `false`.
+     */
+    disabled?: boolean;
+};

package/dist/components/Tabs/Tabs.js

@@ -4,7 +4,7 @@ import E from "clsx";
 import { Tab as F } from "../Tab/Tab.js";
 import { normalizeTabsOptions as G, normalizeTabOption as H, getTrimmedLabel as f } from "./tabsUtils.js";
 import g from "./Tabs.module.scss.js";
-const Y = ({
+function Y({
   options: e,
   onTabChange: A = () => {
   },
@@ -22,7 +22,7 @@ const Y = ({
   keyIcon: d = "icon",
   startIcon: O = null,
   disabled: P = !1
-}) => {
+}) {
   const u = v(
     () => G(e, t, s, n, d),
     [e, t, s, n, d]
@@ -57,7 +57,7 @@ const Y = ({
       }
     );
   }) });
-};
+}
 export {
   Y as Tabs
 };

package/dist/components/Tabs/tabsUtils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Normalises tab option shapes for {@link Tabs}.
+ * @module tabsUtils
+ */
+/**
+ * Maps a string or object option to a normalised tab shape with `label`, tooltip, and `icon` keys.
+ *
+ * @param {import('./Tabs').TabOption|string|null|undefined} option
+ * @param {string} labelKey Property used as `label`.
+ * @param {string} tooltipTextKey Property used as `tooltipText`.
+ * @param {string} tooltipTitleKey Property used as `tooltipTitle`.
+ * @param {string} iconKey Property used as `icon`.
+ * @returns {import('./Tabs').TabOption|undefined}
+ */
+export function normalizeTabOption(option: import("./Tabs").TabOption | string | null | undefined, labelKey: string, tooltipTextKey: string, tooltipTitleKey: string, iconKey: string): import("./Tabs").TabOption | undefined;
+/**
+ * Normalises an array of tab options. Plain strings pass through unchanged.
+ *
+ * @param {import('./Tabs').TabOption[]|string[]} [options=[]]
+ * @param {string} labelKey
+ * @param {string} tooltipTextKey
+ * @param {string} tooltipTitleKey
+ * @param {string} iconKey
+ * @returns {import('./Tabs').TabOption[]}
+ */
+export function normalizeTabsOptions(options?: import("./Tabs").TabOption[] | string[], labelKey: string, tooltipTextKey: string, tooltipTitleKey: string, iconKey: string): import("./Tabs").TabOption[];
+/**
+ * Lowercases and trims a tab label for active-state comparison.
+ *
+ * @param {string} label
+ * @returns {string}
+ */
+export function getTrimmedLabel(label: string): string;

package/dist/components/Tabs/tabsUtils.js

@@ -1,18 +1,24 @@
-const o = (r, t, s, e, c) => {
+function m(r, t, n, e, c) {
   if (!r) return r;
-  const n = r[t], a = r[s], m = r[e], i = r[c];
+  const i = r[t], s = r[n], u = r[e], a = r[c];
   return {
     ...r,
-    label: n,
-    tooltipText: a,
-    tooltipTitle: m,
-    icon: i
+    label: i,
+    tooltipText: s,
+    tooltipTitle: u,
+    icon: a
   };
-}, T = (r = [], t, s, e, c) => Array.isArray(r) ? r.map(
-  (n) => o(n, t, s, e, c)
-) : [], u = (r) => (r == null ? void 0 : r.toLowerCase().trim()) ?? "";
+}
+function o(r = [], t, n, e, c) {
+  return Array.isArray(r) ? r.map(
+    (i) => m(i, t, n, e, c)
+  ) : [];
+}
+function T(r) {
+  return (r == null ? void 0 : r.toLowerCase().trim()) ?? "";
+}
 export {
-  u as getTrimmedLabel,
-  o as normalizeTabOption,
-  T as normalizeTabsOptions
+  T as getTrimmedLabel,
+  m as normalizeTabOption,
+  o as normalizeTabsOptions
 };

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @callback TagDismissHandler
+ * @returns {void}
+ */
+/**
+ * @typedef {object} TagProps
+ *
+ * @property {string} [label]
+ *   Visible label. Renders nothing when empty or null.
+ * @property {'rectangle'|'pill'} [shape='rectangle']
+ *   Rectangle (subtle radius) or pill. Default `'rectangle'`.
+ * @property {'default'|'secondary'|'disabled'} [state='default']
+ *   Foreground only. Default `'default'`.
+ * @property {boolean} [showLeadingIcon=false]
+ *   {@link HelpIcon} before the label. Default `false`.
+ * @property {boolean} [showDismiss=true]
+ *   Show dismiss control when `onDismiss` is set. Default `true`.
+ * @property {TagDismissHandler} [onDismiss]
+ *   Renders dismiss button when set. Default `undefined`.
+ */
+/**
+ * Inline tag with neutral subtle background. Dismiss renders only when `onDismiss` is set.
+ *
+ * ## Props
+ *
+ * **label** `string` — no default
+ * Visible label. Renders nothing when empty or null.
+ *
+ * **shape** `'rectangle' | 'pill'` — default `'rectangle'`
+ * Rectangle (subtle radius) or pill.
+ *
+ * **state** `'default' | 'secondary' | 'disabled'` — default `'default'`
+ * Foreground only; background stays neutral subtle.
+ *
+ * **showLeadingIcon** `boolean` — default `false`
+ * {@link HelpIcon} before the label.
+ *
+ * **showDismiss** `boolean` — default `true`
+ * Show dismiss control when `onDismiss` is set.
+ *
+ * **onDismiss** `() => void` — no default
+ * Renders dismiss button when set.
+ *
+ * @param {TagProps} props
+ * @returns {import('react').ReactElement|null}
+ *
+ * @example <caption>Default</caption>
+ * import { Tag } from '@eyesee/ui-components';
+ *
+ * <Tag label="Tag" shape="rectangle" state="default" onDismiss={() => {}} />
+ *
+ * @example <caption>States</caption>
+ * import { Tag } from '@eyesee/ui-components';
+ *
+ * <Tag label="Tag" state="default" showLeadingIcon />
+ * <Tag label="Tag" state="secondary" showLeadingIcon />
+ * <Tag label="Tag" state="disabled" showLeadingIcon />
+ *
+ * @example <caption>Layouts</caption>
+ * import { Tag } from '@eyesee/ui-components';
+ *
+ * <Tag label="Tag" showLeadingIcon onDismiss={() => {}} />
+ * <Tag label="Tag" onDismiss={() => {}} />
+ * <Tag label="Tag" />
+ */
+export function Tag({ label, shape, state, showLeadingIcon, showDismiss, onDismiss, }: TagProps): import("react").ReactElement | null;
+export type TagDismissHandler = () => void;
+export type TagProps = {
+    /**
+     * Visible label. Renders nothing when empty or null.
+     */
+    label?: string;
+    /**
+     * Rectangle (subtle radius) or pill. Default `'rectangle'`.
+     */
+    shape?: "rectangle" | "pill";
+    /**
+     * Foreground only. Default `'default'`.
+     */
+    state?: "default" | "secondary" | "disabled";
+    /**
+     * {@link HelpIcon} before the label. Default `false`.
+     */
+    showLeadingIcon?: boolean;
+    /**
+     * Show dismiss control when `onDismiss` is set. Default `true`.
+     */
+    showDismiss?: boolean;
+    /**
+     * Renders dismiss button when set. Default `undefined`.
+     */
+    onDismiss?: TagDismissHandler;
+};

package/dist/components/Tag/Tag.js

@@ -8,14 +8,15 @@ const f = {
   default: e.stateDefault,
   secondary: e.stateSecondary,
   disabled: e.stateDisabled
-}, A = ({
+};
+function A({
   label: s,
   shape: l = "rectangle",
   state: t = "default",
   showLeadingIcon: i = !1,
   showDismiss: r = !0,
   onDismiss: n
-}) => {
+}) {
   if (s == null || s === "") return null;
   const c = (u.includes(l) ? l : "rectangle") === "pill" ? e.shapePill : e.shapeRectangle;
   return /* @__PURE__ */ o("span", { className: d(e.tag, c, f[t] ?? e.stateDefault), children: [
@@ -33,7 +34,7 @@ const f = {
       }
     ) : null
   ] });
-};
+}
 export {
   A as Tag
 };

package/dist/components/Tag/tagVariants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tag (Figma) — foreground-only states; background stays neutral subtle.
+ * `shape`: rectangle (4px radius) | pill
+ * `state`: default | secondary | disabled — affects label and icon colour only.
+ */
+export const TAG_SHAPES: string[];
+export const TAG_STATES: string[];

package/dist/components/TextHoverable/TextHoverable.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @typedef {object} TextHoverableProps
+ *
+ * @property {React.ReactNode} children
+ *   Content inside the hoverable span.
+ * @property {string} [className]
+ *   Extra class on the root `<span>`.
+ *
+ * Rest props go to the root `<span>`.
+ */
+/**
+ * Inline text with dashed underline on hover.
+ *
+ * ## Props
+ *
+ * **children** `ReactNode` — no default
+ * Content inside the hoverable span.
+ *
+ * **className** `string` — no default
+ * Extra class on the root `<span>`.
+ *
+ * Rest props go to the root `<span>`.
+ *
+ * @param {TextHoverableProps & import('react').HTMLAttributes<HTMLSpanElement>} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { TextHoverable, Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip content="Helpful additional context" showArrow>
+ *   <TextHoverable>hoverable text</TextHoverable>
+ * </Tooltip>
+ */
+export function TextHoverable({ children, className, ...props }: TextHoverableProps & import("react").HTMLAttributes<HTMLSpanElement>): import("react").ReactElement;
+export type TextHoverableProps = {
+    /**
+     *   Content inside the hoverable span.
+     */
+    children: React.ReactNode;
+    /**
+     * Extra class on the root `<span>`.
+     *
+     * Rest props go to the root `<span>`.
+     */
+    className?: string;
+};

package/dist/components/TextHoverable/TextHoverable.js

@@ -1,7 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
 import a from "clsx";
-import t from "./TextHoverable.module.scss.js";
-const x = ({ children: o, className: r, ...s }) => /* @__PURE__ */ e("span", { className: a(t.textHoverable, r), ...s, children: /* @__PURE__ */ e("span", { className: t.text, children: o }) });
+import r from "./TextHoverable.module.scss.js";
+function p({ children: t, className: o, ...s }) {
+  return /* @__PURE__ */ e("span", { className: a(r.textHoverable, o), ...s, children: /* @__PURE__ */ e("span", { className: r.text, children: t }) });
+}
 export {
-  x as TextHoverable
+  p as TextHoverable
 };