@eyesee/ui-components 0.8.0 → 0.9.0

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,115 @@
+/**
+ * @callback ToggleChangeHandler
+ * @param {import('react').ChangeEvent<HTMLInputElement>} event
+ * @returns {void}
+ */
+/**
+ * @typedef {object} ToggleProps
+ *
+ * @property {boolean} [checked=false]
+ *   On state. Default `false`.
+ * @property {ToggleChangeHandler} [onChange]
+ *   Input change handler. Default `undefined`.
+ * @property {boolean} [disabled=false]
+ *   Native disabled. Default `false`.
+ * @property {'lg'|'md'} [size='lg']
+ *   `lg` → 40×20px; `md` → 32×16px. Default `'lg'`.
+ * @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 switch.
+ * @property {string} [aria-label]
+ *   Accessible name when `label` is omitted. Falls back to `'toggle'`.
+ */
+/**
+ * Design-system switch. Track is 2×1 pill; off = neutral track, on = brand track.
+ *
+ * ## Props
+ *
+ * **checked** `boolean` — default `false`
+ * On state.
+ *
+ * **onChange** `(event: ChangeEvent<HTMLInputElement>) => void` — no default
+ * Input change handler.
+ *
+ * **disabled** `boolean` — default `false`
+ * Native disabled.
+ *
+ * **size** `'lg' | 'md'` — default `'lg'`
+ * `lg` → 40×20px; `md` → 32×16px.
+ *
+ * **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 switch.
+ *
+ * **aria-label** `string` — no default
+ * Accessible name when `label` is omitted. Falls back to `'toggle'`.
+ *
+ * @param {ToggleProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { Toggle } from '@eyesee/ui-components';
+ *
+ * <Toggle size="lg" checked={false} aria-label="Example toggle" />
+ *
+ * @example <caption>Grid (Figma-like)</caption>
+ * import { Toggle } from '@eyesee/ui-components';
+ *
+ * <Toggle size="lg" checked aria-label="Large on" />
+ * <Toggle size="lg" disabled aria-label="Large disabled off" />
+ * <Toggle size="md" checked aria-label="Medium on" />
+ * <Toggle size="md" disabled checked aria-label="Medium disabled on" />
+ */
+export function Toggle({ label, checked, onChange, disabled, size, id: idProp, name, value, "aria-label": ariaLabel, }: ToggleProps): import("react").ReactElement;
+export type ToggleChangeHandler = (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+export type ToggleProps = {
+    /**
+     * On state. Default `false`.
+     */
+    checked?: boolean;
+    /**
+     * Input change handler. Default `undefined`.
+     */
+    onChange?: ToggleChangeHandler;
+    /**
+     * Native disabled. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * `lg` → 40×20px; `md` → 32×16px. Default `'lg'`.
+     */
+    size?: "lg" | "md";
+    /**
+     * Input id. Auto-generated when omitted.
+     */
+    id?: string;
+    /**
+     * Input `name`.
+     */
+    name?: string;
+    /**
+     * Input `value`.
+     */
+    value?: string;
+    /**
+     * Label text after the switch.
+     */
+    label?: string;
+    /**
+     * Accessible name when `label` is omitted. Falls back to `'toggle'`.
+     */
+    "aria-label"?: string;
+};

package/dist/components/Toggle/Toggle.js

@@ -15,7 +15,8 @@ const v = {
     default: "var(--color--icon--secondary--default)",
     disabled: "var(--color--icon--disabled--default)"
   }
-}, E = ({
+};
+function E({
   label: l,
   checked: r = !1,
   onChange: n,
@@ -25,8 +26,8 @@ const v = {
   name: i,
   value: m,
   "aria-label": u
-}) => {
-  const h = k(), s = d ?? h, p = v[a], f = r ? "checked" : "unchecked", b = c ? "disabled" : "default", t = y[f][b];
+}) {
+  const h = k(), s = d ?? h, f = v[a], p = r ? "checked" : "unchecked", b = c ? "disabled" : "default", t = y[p][b];
   return /* @__PURE__ */ g(
     "label",
     {
@@ -48,12 +49,12 @@ const v = {
             onChange: n
           }
         ),
-        /* @__PURE__ */ e("span", { className: o.track, "aria-hidden": !0, children: /* @__PURE__ */ e("span", { className: o.thumb, children: /* @__PURE__ */ e(N, { iconSize: p, strokeColor: t, fill: t }) }) }),
+        /* @__PURE__ */ e("span", { className: o.track, "aria-hidden": !0, children: /* @__PURE__ */ e("span", { className: o.thumb, children: /* @__PURE__ */ e(N, { iconSize: f, strokeColor: t, fill: t }) }) }),
         l ? /* @__PURE__ */ e("span", { className: o.labelText, children: l }) : null
       ]
     }
   );
-};
+}
 export {
   E as Toggle
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,294 @@
+/**
+ * @callback TooltipOpenChangeHandler
+ * @param {boolean} open Next open state.
+ * @returns {void}
+ */
+/**
+ * @typedef {object} TooltipProps
+ *
+ * @property {React.ReactNode} children
+ *   Trigger element wrapped by the tooltip.
+ * @property {React.ReactNode} content
+ *   Tooltip body. When empty, children render without a tooltip.
+ * @property {string}          [title]
+ *   Optional heading above the body.
+ * @property {boolean}         [showInfoIcon=false]
+ *   Show help icon beside title or content. Default `false`.
+ * @property {'dark'|'light'}  [variant='dark']
+ *   Visual style. Default `'dark'`.
+ * @property {boolean}         [showArrow=false]
+ *   Directional arrow pointing at the trigger. Default `false`.
+ * @property {boolean}         [defaultVisible=false]
+ *   Start open and stay open until dismissed. Default `false`.
+ * @property {boolean}         [closable=false]
+ *   Show close button. Default `false`.
+ * @property {boolean}         [disabled=false]
+ *   Disable tooltip entirely. Default `false`.
+ * @property {string}          [className]
+ *   Extra class on the wrapper `<div>`.
+ * @property {string}          [contentClassName]
+ *   Extra class on the tooltip panel.
+ * @property {'top'|'bottom'|'left'|'right'} [position='top']
+ *   Preferred placement; flips when viewport is tight. Default `'top'`.
+ * @property {number}          [maxWidth=240]
+ *   Maximum tooltip width in pixels. Default `240`.
+ * @property {boolean}         [fullWidth=false]
+ *   Wrapper stretches to 100% of parent. Default `false`.
+ * @property {boolean}         [open]
+ *   Controlled open state. When set, internal hover state is bypassed.
+ * @property {TooltipOpenChangeHandler} [onOpenChange]
+ *   Fired when open state changes (hover, close, or controlled updates).
+ * @property {Element}         [portalContainer]
+ *   Portal target. Default `document.body`.
+ */
+/**
+ * Hover tooltip with viewport-aware positioning and optional close control.
+ *
+ * ## Props
+ *
+ * **children** `ReactNode` — no default
+ * Trigger element wrapped by the tooltip.
+ *
+ * **content** `ReactNode` — no default
+ * Tooltip body. When empty, children render without a tooltip.
+ *
+ * **title** `string` — no default
+ * Optional heading above the body.
+ *
+ * **showInfoIcon** `boolean` — default `false`
+ * Show help icon beside title or content.
+ *
+ * **variant** `'dark' | 'light'` — default `'dark'`
+ * Visual style.
+ *
+ * **showArrow** `boolean` — default `false`
+ * Directional arrow pointing at the trigger.
+ *
+ * **defaultVisible** `boolean` — default `false`
+ * Start open and stay open until dismissed.
+ *
+ * **closable** `boolean` — default `false`
+ * Show close button.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disable tooltip entirely.
+ *
+ * **className** `string` — no default
+ * Extra class on the wrapper `<div>`.
+ *
+ * **contentClassName** `string` — no default
+ * Extra class on the tooltip panel.
+ *
+ * **position** `'top' | 'bottom' | 'left' | 'right'` — default `'top'`
+ * Preferred placement; flips when viewport is tight.
+ *
+ * **maxWidth** `number` — default `240`
+ * Maximum tooltip width in pixels.
+ *
+ * **fullWidth** `boolean` — default `false`
+ * Wrapper stretches to 100% of parent.
+ *
+ * **open** `boolean` — no default
+ * Controlled open state. When set, internal hover state is bypassed.
+ *
+ * **onOpenChange** `(open: boolean) => void` — no default
+ * Fired when open state changes.
+ *
+ * **portalContainer** `Element` — default `document.body`
+ * Portal target for the tooltip panel.
+ *
+ * @param {TooltipProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Playground</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="dark"
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ *   closable
+ *   position="right"
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>With title</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>With info icon on title</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>With info icon on content</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Light with arrow</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="light"
+ *   showArrow
+ *   position="right"
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Dark closable</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="dark"
+ *   closable
+ *   defaultVisible
+ *   position="bottom"
+ *   title="Lorem ipsum"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Design light content only</caption>
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * <Tooltip
+ *   variant="light"
+ *   content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ *   showInfoIcon
+ *   showArrow
+ *   position="bottom"
+ *   defaultVisible
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Controlled open</caption>
+ * import { useState } from 'react';
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * const [open, setOpen] = useState(true);
+ *
+ * <Tooltip
+ *   title="Controlled"
+ *   content="This tooltip is controlled via the open prop."
+ *   position="right"
+ *   showArrow
+ *   open={open}
+ *   onOpenChange={setOpen}
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ *
+ * @example <caption>Closable dismisses until defaultVisible</caption>
+ * import { useState } from 'react';
+ * import { Tooltip } from '@eyesee/ui-components';
+ *
+ * const [defaultVisible, setDefaultVisible] = useState(true);
+ *
+ * <Tooltip
+ *   title="Closable + defaultVisible"
+ *   content="Close me, then toggle defaultVisible off/on to reset dismissal."
+ *   closable
+ *   defaultVisible={defaultVisible}
+ *   position="bottom"
+ *   showArrow
+ * >
+ *   <button type="button">Hover me</button>
+ * </Tooltip>
+ */
+export function Tooltip({ children, content, title, showInfoIcon, variant, showArrow, defaultVisible, closable, disabled, className, contentClassName, position, maxWidth, fullWidth, open: controlledOpen, onOpenChange, portalContainer, }: TooltipProps): import("react").ReactElement;
+export type TooltipOpenChangeHandler = (open: boolean) => void;
+export type TooltipProps = {
+    /**
+     *   Trigger element wrapped by the tooltip.
+     */
+    children: React.ReactNode;
+    /**
+     *   Tooltip body. When empty, children render without a tooltip.
+     */
+    content: React.ReactNode;
+    /**
+     * Optional heading above the body.
+     */
+    title?: string;
+    /**
+     * Show help icon beside title or content. Default `false`.
+     */
+    showInfoIcon?: boolean;
+    /**
+     * Visual style. Default `'dark'`.
+     */
+    variant?: "dark" | "light";
+    /**
+     * Directional arrow pointing at the trigger. Default `false`.
+     */
+    showArrow?: boolean;
+    /**
+     * Start open and stay open until dismissed. Default `false`.
+     */
+    defaultVisible?: boolean;
+    /**
+     * Show close button. Default `false`.
+     */
+    closable?: boolean;
+    /**
+     * Disable tooltip entirely. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Extra class on the wrapper `<div>`.
+     */
+    className?: string;
+    /**
+     * Extra class on the tooltip panel.
+     */
+    contentClassName?: string;
+    /**
+     * Preferred placement; flips when viewport is tight. Default `'top'`.
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * Maximum tooltip width in pixels. Default `240`.
+     */
+    maxWidth?: number;
+    /**
+     * Wrapper stretches to 100% of parent. Default `false`.
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled open state. When set, internal hover state is bypassed.
+     */
+    open?: boolean;
+    /**
+     * Fired when open state changes (hover, close, or controlled updates).
+     */
+    onOpenChange?: TooltipOpenChangeHandler;
+    /**
+     * Portal target. Default `document.body`.
+     */
+    portalContainer?: Element;
+};

package/dist/components/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import { HelpIcon as k } from "../icons-v2/HelpIcon.js";
 import { XIcon as B } from "../icons-v2/XIcon.js";
 import o from "./Tooltip.module.scss.js";
 import { useTooltipPositioning as J } from "./useTooltipPositioning.js";
-const b = ({
+function b({
   children: v,
   content: f,
   title: t,
@@ -24,7 +24,7 @@ const b = ({
   open: T,
   onOpenChange: r,
   portalContainer: $
-}) => {
+}) {
   const [H, d] = L(i), [u, P] = L(!1), l = T !== void 0, x = l ? T : H, y = (c) => {
     m || u || (l || d(c), r == null || r(c));
   }, I = () => {
@@ -98,7 +98,7 @@ const b = ({
       ]
     }
   );
-};
+}
 export {
   b as Tooltip
 };

package/dist/components/Tooltip/useTooltipPositioning.d.ts

@@ -0,0 +1,21 @@
+export function useTooltipPositioning({ open, desiredPosition, showArrow, maxWidth, viewportPadding, gap, arrowSafePadding, }: {
+    open: any;
+    desiredPosition: any;
+    showArrow: any;
+    maxWidth: any;
+    viewportPadding?: number;
+    gap?: any;
+    arrowSafePadding?: number;
+}): {
+    wrapperRef: import("react").MutableRefObject<any>;
+    tooltipRef: import("react").MutableRefObject<any>;
+    layout: {
+        resolvedPosition: any;
+        top: number;
+        left: number;
+        arrowLeft: any;
+        arrowTop: any;
+    };
+    isPositioned: boolean;
+    recompute: () => void;
+};

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

@@ -0,0 +1,2 @@
+export const AdIcon: (props: IconProps) => import("react").JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,13 @@
+/**
+ * SVG message bubble with a plus sign, used for "add message" actions.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AddMessageIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG user avatar with a plus sign, used for "add user" actions.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AddUserIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG adjustments/sliders icon used to represent settings or tuning actions.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AdjustmentsIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG alert/warning triangle icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlertIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG text align-center icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlignCenterIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG align-horizontally icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlignHorizontallyIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG text align-justify icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlignJustifyIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG text align-left icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlignLeftIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG text align-right icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlignRightIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG align-vertically icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const AlignVerticallyIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+/**
+ * SVG icon representing two typographic glyphs side-by-side, used to indicate
+ * text or font options.
+ *
+ * Unlike most icons in this set, `AlphabetIcon` accepts an additional `fill`
+ * prop so the letters can be filled with a solid colour (e.g. to
+ * represent a selected font colour).
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour for the letter
+ *   paths. Defaults to `'none'` (transparent). Pass a colour value to produce
+ *   a filled appearance.
+ * @returns {JSX.Element}
+ */
+export const AlphabetIcon: (props: IconProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * SVG archive/box icon.
+ *
+ * @param {object}    props
+ * @param {string}    [props.strokeColor='currentColor'] - SVG stroke colour.
+ *   Accepts any valid CSS colour value.
+ * @param {import('./constants').IconSize} [props.iconSize='m']
+ *   T-shirt size token that controls the rendered `width`/`height` and
+ *   `stroke-width` via {@link iconSizes} and {@link iconStrokeWidths}.
+ * @param {string}    [props.fill='none'] - SVG fill colour.
+ * @returns {JSX.Element}
+ */
+export const ArchiveIcon: (props: IconProps) => import("react").JSX.Element;