@eyesee/ui-components 0.7.0 → 0.9.0

package/dist/components/Fields/SelectField/selectUtils.d.ts

@@ -0,0 +1,35 @@
+export function normalizeSelectOptions(options: any[] | object | null | undefined): {
+    withSections: boolean;
+    sections: Array<{
+        sectionTitle: string;
+        options: Array<{
+            value: any;
+            label: any;
+            disabled: any;
+        }>;
+    }>;
+    options: Array<{
+        value: any;
+        label: any;
+        disabled: any;
+    }>;
+};
+export function toArrayValue(value: any): any[];
+export function getOptionByValue(flatOptions: any, val: any): any;
+export function hasSelectValue(value: any): boolean;
+export function resolveDefaultSelectValue(defaultValue: any): any;
+export function getEffectiveSelectValue(value: any, defaultValue: any): any;
+export function getSelectedOptions(value: any, flatOptions: any): any[];
+export function getSelectedLabelsPreview(value: any, flatOptions: any): string;
+export function getSelectFieldDisplayValue(value: any, defaultValue: any, flatOptions: any): any;
+export function emitSelectChange(onChange: any, nextValue: any): void;
+export function filterOptionsByQuery(options: any, searchValue: any): any;
+export function filterSectionsByQuery(sections: any, searchValue: any): any;
+export function areAllOptionsSelected(value: any, flatOptions: any): any;
+export function getNextToggleAllValues(value: any, flatOptions: any): any;
+export function getResolvedListItemType({ multiSelect, tags, listItemType }: {
+    multiSelect: any;
+    tags: any;
+    listItemType: any;
+}): any;
+export function isOptionSelected(value: any, opt: any): boolean;

package/dist/components/Fields/SelectField/useSelectFieldDropdownPosition.d.ts

@@ -0,0 +1,7 @@
+export function useSelectFieldDropdownPosition({ open, anchorRef, dropdownRef, dir: desiredDir, fixed, }: {
+    open: any;
+    anchorRef: any;
+    dropdownRef: any;
+    dir?: string;
+    fixed?: boolean;
+}): any;

package/dist/components/Fields/TextField/TextField.d.ts

@@ -0,0 +1,272 @@
+/**
+ * Textarea with auto-grow, optional resize, and trailing {@link Button} actions.
+ *
+ * ## Props
+ *
+ * Rest props (e.g. `maxLength`) pass through to the native `<textarea>`.
+ * Auto-sizing runs when `rows > 1` and `maxRows` is set.
+ *
+ * **label** `string` — no default
+ * Field label.
+ *
+ * **infoText** `string` — no default
+ * Helper text below the field. Overridden by `error.message`.
+ *
+ * **status** `'default' | 'error'` — default `'default'`
+ * Validation shell state.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables the textarea and all actions.
+ *
+ * **required** `boolean` — default `false`
+ * Shows required mark when `label` is set.
+ *
+ * **id** `string` — no default
+ * Textarea `id`. Auto-generated when omitted.
+ *
+ * **name** `string` — no default
+ * Textarea `name`. Also used as RHF field name with `control`.
+ *
+ * **value** `string` — no default
+ * Controlled value.
+ *
+ * **defaultValue** `string` — no default
+ * Uncontrolled initial value.
+ *
+ * **placeholder** `string` — default `'Text'`
+ * Placeholder text.
+ *
+ * **onChange** `(event: ChangeEvent<HTMLTextAreaElement>) => void` — default `() => {}`
+ * Textarea change handler.
+ *
+ * **onBlur** `(event: FocusEvent<HTMLTextAreaElement>) => void` — no default
+ * Textarea blur handler.
+ *
+ * **rows** `number` — default `4`
+ * Initial visible height in rows.
+ *
+ * **maxRows** `number` — default `10`
+ * Auto-grow limit when `rows > 1`.
+ *
+ * **expandable** `boolean` — default `false`
+ * Enables manual vertical resize (capped by CSS).
+ *
+ * **actions** `TextFieldAction[]` — default `[]`
+ * Trailing {@link Button} actions.
+ * - `id` `string` — required. Unique id.
+ * - `variant` `'primary' | 'secondary' | 'neutral' | 'destructive'` — default `'neutral'`
+ * - `type` `'fill' | 'outline' | 'blank'` — default `'outline'`
+ * - `icon` `ReactNode` — optional
+ * - `text` `string` — optional
+ * - `disabled` `boolean` — default `false`
+ * - `onClick` `() => void` — optional
+ *
+ * **control** `object` — no default
+ * react-hook-form `control`. With `name`, wires via `useController`.
+ *
+ * **rules** `object` — no default
+ * RHF validation rules.
+ *
+ * **error** `object` — no default
+ * RHF field error (`error.message` → info text and error status).
+ *
+ * **inputRef** `Ref` — no default
+ * Ref forwarded to the native `<textarea>`.
+ *
+ * **aria-label** `string` — default `'input field'` when no `label`
+ * Accessible name when `label` is omitted.
+ *
+ * @param {TextFieldProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { TextField } from '@eyesee/ui-components';
+ *
+ * <TextField
+ *   label="Project description"
+ *   infoText="Max 1000 characters"
+ *   placeholder="Enter project description"
+ *   rows={5}
+ *   maxRows={8}
+ *   maxLength={1000}
+ * />
+ *
+ * @example <caption>WithActions</caption>
+ * import { TextField } from '@eyesee/ui-components';
+ * import { PaperclipIcon, SendIcon } from '@eyesee/ui-components/icons';
+ *
+ * <TextField
+ *   label="Message"
+ *   infoText="Optional attachment + send"
+ *   placeholder="Type your message"
+ *   rows={4}
+ *   maxRows={6}
+ *   actions={[
+ *     { id: 'attach', variant: 'neutral', type: 'outline', icon: <PaperclipIcon /> },
+ *     { id: 'send', variant: 'primary', type: 'fill', icon: <SendIcon />, text: 'Send' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Expandable</caption>
+ * import { TextField } from '@eyesee/ui-components';
+ *
+ * <TextField
+ *   label="Expandable notes"
+ *   infoText="Drag-resize enabled (capped)"
+ *   placeholder="Try dragging the resize handle"
+ *   rows={3}
+ *   maxRows={10}
+ *   expandable
+ *   maxLength={2000}
+ * />
+ *
+ * @example <caption>SingleRow</caption>
+ * import { TextField } from '@eyesee/ui-components';
+ * import { SendIcon } from '@eyesee/ui-components/icons';
+ *
+ * <TextField
+ *   label="Single row"
+ *   infoText="rows=1 keeps a compact layout"
+ *   placeholder="Short message…"
+ *   rows={1}
+ *   maxRows={1}
+ *   actions={[
+ *     { id: 'send', variant: 'primary', type: 'fill', icon: <SendIcon />, text: 'Send' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Matrix (Figma-like)</caption>
+ * import { TextField } from '@eyesee/ui-components';
+ * import { SendIcon } from '@eyesee/ui-components/icons';
+ *
+ * <TextField label="Label" infoText="Info" placeholder="Type here…" rows={3} maxRows={6} />
+ * <TextField label="Label" infoText="Info" status="error" placeholder="Type here…" rows={3} maxRows={6} />
+ * <TextField label="Label" infoText="Info" disabled placeholder="Type here…" rows={1} maxRows={1} actions={[{ id: 'send', variant: 'primary', type: 'fill', icon: <SendIcon />, text: 'Send' }]} />
+ */
+export function TextField(props: TextFieldProps): import("react").ReactElement;
+export type TextFieldChangeHandler = (event: import("react").ChangeEvent<HTMLTextAreaElement>) => void;
+export type TextFieldBlurHandler = (event: import("react").FocusEvent<HTMLTextAreaElement>) => void;
+export type TextFieldActionClickHandler = () => void;
+/**
+ * Action button config rendered as {@link Button} inside the field.
+ */
+export type TextFieldAction = {
+    /**
+     *   Unique id (React key fallback).
+     */
+    id: string;
+    /**
+     * Optional React key override.
+     */
+    key?: string;
+    /**
+     * {@link Button} colour. Default `'neutral'`.
+     */
+    variant?: "primary" | "secondary" | "neutral" | "destructive";
+    /**
+     * {@link Button} visual style. Default `'outline'`.
+     */
+    type?: "fill" | "outline" | "blank";
+    /**
+     * Leading icon.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Button label.
+     */
+    text?: string;
+    /**
+     * Disables only this action. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Click handler.
+     */
+    onClick?: TextFieldActionClickHandler;
+};
+export type TextFieldProps = {
+    /**
+     * Field label.
+     */
+    label?: string;
+    /**
+     * Helper text below the field. Overridden by `error.message`.
+     */
+    infoText?: string;
+    /**
+     * Validation shell state. Default `'default'`.
+     */
+    status?: "default" | "error";
+    /**
+     * Disables the textarea and all actions. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Shows required mark when `label` is set. Default `false`.
+     */
+    required?: boolean;
+    /**
+     * Textarea `id`. Auto-generated when omitted.
+     */
+    id?: string;
+    /**
+     * Textarea `name`. Also used as RHF field name with `control`.
+     */
+    name?: string;
+    /**
+     * Controlled value.
+     */
+    value?: string;
+    /**
+     * Uncontrolled initial value.
+     */
+    defaultValue?: string;
+    /**
+     * Placeholder text. Default `'Text'`.
+     */
+    placeholder?: string;
+    /**
+     * Textarea change handler. Default `() => {}`.
+     */
+    onChange?: TextFieldChangeHandler;
+    /**
+     * Textarea blur handler.
+     */
+    onBlur?: TextFieldBlurHandler;
+    /**
+     * Initial visible height in rows. Default `4`.
+     */
+    rows?: number;
+    /**
+     * Auto-grow limit when `rows > 1`. Default `10`.
+     */
+    maxRows?: number;
+    /**
+     * Enables manual vertical resize (capped by CSS). Default `false`.
+     */
+    expandable?: boolean;
+    /**
+     * Trailing {@link Button} actions. Default `[]`.
+     */
+    actions?: TextFieldAction[];
+    /**
+     * react-hook-form `control`. With `name`, wires via `useController`.
+     */
+    control?: object;
+    /**
+     * RHF validation rules.
+     */
+    rules?: object;
+    /**
+     * RHF field error (`error.message` → info text and error status).
+     */
+    error?: object;
+    /**
+     * Ref forwarded to the native `<textarea>`.
+     */
+    inputRef?: any;
+    /**
+     * Accessible name when `label` is omitted. Default `'input field'`.
+     */
+    "aria-label"?: string;
+};

package/dist/components/Fields/TextField/TextField.js

@@ -1,66 +1,73 @@
-import { jsxs as N, jsx as u } from "react/jsx-runtime";
-import y from "clsx";
+import { jsx as m, jsxs as C } from "react/jsx-runtime";
+import g from "clsx";
 import p from "./TextField.module.scss.js";
-import { createField as w } from "../InputFieldContainer.js";
-import { Button as $ } from "../../Button/Button.js";
-const j = (s, r, m) => {
-  const h = window.getComputedStyle(s), t = parseFloat(h.lineHeight) || 20, x = r * t, l = m * t;
-  s.style.height = "auto";
-  const d = Math.max(x, Math.min(s.scrollHeight, l));
-  s.style.height = `${d}px`, s.style.resize = l > s.scrollHeight ? "vertical" : "none";
-}, z = ({
-  id: s,
-  name: r,
-  type: m = "text",
-  value: h,
-  defaultValue: t,
-  placeholder: x = "Text",
-  disabled: l = !1,
-  onChange: d = () => {
+import { createField as N } from "../InputFieldContainer.js";
+import { Button as w } from "../../Button/Button.js";
+const $ = (r, l, d) => {
+  const x = window.getComputedStyle(r), s = parseFloat(x.lineHeight) || 20, h = l * s, t = d * s;
+  r.style.height = "auto";
+  const u = Math.max(h, Math.min(r.scrollHeight, t));
+  r.style.height = `${u}px`, r.style.resize = t > r.scrollHeight ? "vertical" : "none";
+};
+function j({
+  id: r,
+  name: l,
+  type: d = "text",
+  value: x,
+  defaultValue: s,
+  placeholder: h = "Text",
+  disabled: t = !1,
+  onChange: u = () => {
   },
-  rows: g = 4,
-  maxRows: f = 10,
-  expandable: H = !1,
-  ariaLabel: i,
-  label: v,
-  inputProps: F = {},
-  actions: T = [],
-  containerFieldClassName: b
-}) => /* @__PURE__ */ N("div", { className: y(p.field, b), children: [
-  /* @__PURE__ */ u(
-    "textarea",
-    {
-      id: s,
-      name: r,
-      type: m,
-      className: y(p.input, H && p.expandableField),
-      value: h,
-      defaultValue: t,
-      placeholder: x,
-      disabled: l,
-      onChange: d,
-      rows: g,
-      onInput: (e) => j(e.currentTarget, g, f),
-      "aria-label": i ?? (v ? void 0 : "input field"),
-      ...F
-    }
-  ),
-  /* @__PURE__ */ u("span", { className: p.buttonWrapper, children: T.map((e, k) => {
-    const C = (e == null ? void 0 : e.key) ?? (e == null ? void 0 : e.id) ?? `${r ?? s}-action-${k}`;
-    return /* @__PURE__ */ u(
-      $,
+  rows: f = 4,
+  maxRows: y = 10,
+  expandable: i = !1,
+  ariaLabel: F,
+  label: H,
+  inputProps: T = {},
+  actions: n = [],
+  containerFieldClassName: v
+}) {
+  return /* @__PURE__ */ C("div", { className: g(p.field, v), children: [
+    /* @__PURE__ */ m(
+      "textarea",
       {
-        variant: (e == null ? void 0 : e.variant) ?? "neutral",
-        type: (e == null ? void 0 : e.type) ?? "outline",
-        icon: e == null ? void 0 : e.icon,
-        text: e == null ? void 0 : e.text,
-        disabled: l || (e == null ? void 0 : e.disabled),
-        onClick: e == null ? void 0 : e.onClick
-      },
-      C
-    );
-  }) })
-] }), W = w(z);
+        id: r,
+        name: l,
+        type: d,
+        className: g(p.input, i && p.expandableField),
+        value: x,
+        defaultValue: s,
+        placeholder: h,
+        disabled: t,
+        onChange: u,
+        rows: f,
+        onInput: (e) => $(e.currentTarget, f, y),
+        "aria-label": F ?? (H ? void 0 : "input field"),
+        ...T
+      }
+    ),
+    /* @__PURE__ */ m("span", { className: p.buttonWrapper, children: n.map((e, b) => {
+      const k = (e == null ? void 0 : e.key) ?? (e == null ? void 0 : e.id) ?? `${l ?? r}-action-${b}`;
+      return /* @__PURE__ */ m(
+        w,
+        {
+          variant: (e == null ? void 0 : e.variant) ?? "neutral",
+          type: (e == null ? void 0 : e.type) ?? "outline",
+          icon: e == null ? void 0 : e.icon,
+          text: e == null ? void 0 : e.text,
+          disabled: t || (e == null ? void 0 : e.disabled),
+          onClick: e == null ? void 0 : e.onClick
+        },
+        k
+      );
+    }) })
+  ] });
+}
+const z = N(j);
+function I(r) {
+  return /* @__PURE__ */ m(z, { ...r });
+}
 export {
-  W as TextField
+  I as TextField
 };

package/dist/components/FileType/FileType.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @typedef {object} FileTypeProps
+ *
+ * @property {string} extension
+ *   File extension, with or without leading dot (case-insensitive).
+ * @property {number} [size=64]
+ *   Rendered square size in px. Default `64`.
+ * @property {string} [className]
+ *   Extra class on the wrapper `<div>`.
+ */
+/**
+ * Figma-style file type icon. Unknown extensions use a neutral badge colour.
+ *
+ * ## Props
+ *
+ * **extension** `string` — no default
+ * File extension, with or without leading dot (case-insensitive).
+ *
+ * **size** `number` — default `64`
+ * Rendered square size in px.
+ *
+ * **className** `string` — no default
+ * Extra class on the wrapper `<div>`.
+ *
+ * @param {FileTypeProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { FileType } from '@eyesee/ui-components';
+ *
+ * <FileType extension="PDF" size={64} />
+ *
+ * @example <caption>Gallery</caption>
+ * import { FileType } from '@eyesee/ui-components';
+ *
+ * <FileType extension="DOC" size={64} />
+ * <FileType extension="PDF" size={64} />
+ * <FileType extension="XLSX" size={64} />
+ *
+ * @example <caption>Normalization</caption>
+ * import { FileType } from '@eyesee/ui-components';
+ *
+ * <FileType extension=".pdf" size={64} />
+ * <FileType extension=" pdf " size={64} />
+ * <FileType extension="Docx" size={64} />
+ */
+export function FileType({ extension, size, className }: FileTypeProps): import("react").ReactElement;
+export type FileTypeProps = {
+    /**
+     *   File extension, with or without leading dot (case-insensitive).
+     */
+    extension: string;
+    /**
+     * Rendered square size in px. Default `64`.
+     */
+    size?: number;
+    /**
+     * Extra class on the wrapper `<div>`.
+     */
+    className?: string;
+};

package/dist/components/FileType/FileType.js

@@ -1,4 +1,4 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
 import i from "clsx";
 import { PaperIcon as b } from "./PaperIcon.js";
 import l from "./FileType.module.scss.js";
@@ -15,16 +15,17 @@ const m = (e) => String(e || "").trim().replace(/^\./, "").toUpperCase(), p = {
   HTMLX: { label: "XHTML", color: "#222222" },
   TIF: { label: "TIFF", color: "#32A7FE" },
   TIFF: { label: "TIFF", color: "#32A7FE" }
-}, E = ({ extension: e, size: r = 64, className: s }) => {
+};
+function E({ extension: e, size: r = 64, className: s }) {
   const c = m(e), a = p[c] || {
     label: c || "",
     color: "#667085"
-  }, t = r / 64;
-  return /* @__PURE__ */ o("div", { className: i(l.wrapper, s), style: { width: r, height: r }, children: /* @__PURE__ */ n("div", { className: l.inner, style: { transform: `scale(${t})` }, children: [
+  }, n = r / 64;
+  return /* @__PURE__ */ o("div", { className: i(l.wrapper, s), style: { width: r, height: r }, children: /* @__PURE__ */ t("div", { className: l.inner, style: { transform: `scale(${n})` }, children: [
     /* @__PURE__ */ o("div", { className: l.paper, children: /* @__PURE__ */ o(b, { className: l.paperSvg }) }),
     a.label ? /* @__PURE__ */ o("div", { className: l.badge, style: { backgroundColor: a.color }, children: /* @__PURE__ */ o("span", { className: l.badgeText, children: a.label }) }) : null
   ] }) });
-};
+}
 export {
   E as FileType
 };

package/dist/components/FileType/PaperIcon.d.ts

@@ -0,0 +1,5 @@
+export function PaperIcon({ width, height, ...props }: {
+    [x: string]: any;
+    width?: number;
+    height?: number;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,75 @@
+/**
+ * @typedef {import('../ImagePlaceholder/ImagePlaceholder').ImagePlaceholderProps} ImagePlaceholderBaseProps
+ */
+/**
+ * All {@link ImagePlaceholder} props plus hover-preview options.
+ *
+ * @typedef {ImagePlaceholderBaseProps & { previewSize?: number }} ImageHoverPreviewProps
+ */
+/**
+ * {@link ImagePlaceholder} with a fixed-size hover preview portaled to `#modal` or `document.body`.
+ *
+ * ## Props
+ *
+ * Accepts every {@link ImagePlaceholder} prop, plus:
+ *
+ * **previewSize** `number` — default `200`
+ * Width and height of the hover preview in pixels.
+ *
+ * **url** `string` — no default
+ * Image source (from {@link ImagePlaceholder}).
+ *
+ * **text** `string` — no default
+ * Caption text (from {@link ImagePlaceholder}).
+ *
+ * **textPosition** `'inside' | 'outside'` — default `'inside'`
+ * Caption placement (from {@link ImagePlaceholder}).
+ *
+ * **aspectRatio** `'1/1' | '4/3' | '16/9' | '9/16'` — default `'1/1'`
+ * Thumbnail aspect ratio (from {@link ImagePlaceholder}).
+ *
+ * **lines** `'1' | '2'` — default `'1'`
+ * Max caption lines (from {@link ImagePlaceholder}).
+ *
+ * @param {ImageHoverPreviewProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { ImageHoverPreview } from '@eyesee/ui-components';
+ *
+ * <ImageHoverPreview
+ *   url="https://picsum.photos/400/400"
+ *   text="Hover to preview"
+ *   textPosition="outside"
+ *   aspectRatio="1/1"
+ *   lines="1"
+ * />
+ *
+ * @example <caption>Large preview</caption>
+ * import { ImageHoverPreview } from '@eyesee/ui-components';
+ *
+ * <ImageHoverPreview
+ *   url="https://picsum.photos/400/400"
+ *   text="Large preview"
+ *   previewSize={280}
+ *   textPosition="outside"
+ * />
+ *
+ * @example <caption>Inside caption</caption>
+ * import { ImageHoverPreview } from '@eyesee/ui-components';
+ *
+ * <ImageHoverPreview
+ *   url="https://picsum.photos/400/400"
+ *   text="Caption inside image area"
+ *   textPosition="inside"
+ *   aspectRatio="4/3"
+ * />
+ */
+export function ImageHoverPreview({ previewSize, ...imagePlaceholderProps }: ImageHoverPreviewProps): import("react").ReactElement;
+export type ImagePlaceholderBaseProps = any;
+/**
+ * All {@link ImagePlaceholder} props plus hover-preview options.
+ */
+export type ImageHoverPreviewProps = ImagePlaceholderBaseProps & {
+    previewSize?: number;
+};