@eyesee/ui-components 0.7.0 → 0.9.0

package/dist/components/ExpandableItem/ExpandableItem.js

@@ -3,23 +3,23 @@ import { useState as d } from "react";
 import s from "./ExpandableItem.module.scss.js";
 import { ChevronDownIcon as h } from "../icons-v2/ChevronDownIcon.js";
 import { ChevronUpIcon as u } from "../icons-v2/ChevronUpIcon.js";
-const j = ({
+function j({
   title: n,
   children: r,
   defaultOpen: a = !1,
   arrowPositionEnd: m = !1
-}) => {
+}) {
   const [o, l] = d(a), c = (f) => {
     l(f.target.open);
-  }, p = o ? u : h, i = m ? "space-between" : "flex-start";
+  }, i = o ? u : h, p = m ? "space-between" : "flex-start";
   return /* @__PURE__ */ t("details", { className: s.details, open: o, onToggle: c, children: [
-    /* @__PURE__ */ t("summary", { className: s.summary, style: { justifyContent: i }, children: [
+    /* @__PURE__ */ t("summary", { className: s.summary, style: { justifyContent: p }, children: [
       /* @__PURE__ */ e("span", { className: s.summaryText, children: n }),
-      /* @__PURE__ */ e(p, {})
+      /* @__PURE__ */ e(i, {})
     ] }),
     /* @__PURE__ */ e("section", { children: r })
   ] });
-};
+}
 export {
   j as ExpandableItem
 };

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

@@ -0,0 +1,309 @@
+/**
+ * @callback InputFieldChangeHandler
+ * @param {import('react').ChangeEvent<HTMLInputElement>} event
+ * @returns {void}
+ */
+/**
+ * @callback InputFieldEnterHandler
+ * @returns {void}
+ */
+/**
+ * @callback InputFieldFieldClickHandler
+ * @returns {void}
+ */
+/**
+ * @callback InputFieldEndIconClickHandler
+ * @returns {void}
+ */
+/**
+ * @callback InputFieldBlurHandler
+ * @param {import('react').FocusEvent<HTMLInputElement>} event
+ * @returns {void}
+ */
+/**
+ * @typedef {object} InputFieldProps
+ *
+ * @property {string} [label]
+ *   Field label.
+ * @property {string} [infoText]
+ *   Helper or character-count text below the field. Overridden by `error.message`.
+ * @property {'default'|'error'} [status='default']
+ *   Validation shell state. Default `'default'`.
+ * @property {boolean} [disabled=false]
+ *   Disables the input. Default `false`.
+ * @property {boolean} [required=false]
+ *   Shows required mark when `label` is set. Default `false`.
+ *
+ * @property {string} [id]
+ *   Input `id`. Auto-generated when omitted.
+ * @property {string} [name]
+ *   Input `name`; also RHF field name with `control`.
+ * @property {string} [type='text']
+ *   Native input `type`. Default `'text'`.
+ * @property {string} [value]
+ *   Controlled value.
+ * @property {string} [defaultValue]
+ *   Uncontrolled initial value.
+ * @property {string} [placeholder='Text']
+ *   Placeholder text. Default `'Text'`.
+ *
+ * @property {InputFieldChangeHandler} [onChange]
+ *   Input change handler. Default `() => {}`.
+ * @property {InputFieldBlurHandler} [onBlur]
+ *   Input blur handler.
+ *
+ * @property {'lg'|'md'|'sm'|'xs'} [size='lg']
+ *   Field height. Default `'lg'`.
+ * @property {React.ReactNode} [startIcon]
+ *   Leading icon inside the field.
+ * @property {React.ReactNode} [endIcon]
+ *   Trailing icon inside the field.
+ * @property {InputFieldEndIconClickHandler} [onEndIconClick]
+ *   Click handler for `endIcon`.
+ * @property {InputFieldEnterHandler} [onEnter]
+ *   Fired on Enter when not disabled.
+ * @property {InputFieldFieldClickHandler} [onFieldClick]
+ *   Click handler for the field shell (not the native input).
+ * @property {React.ReactNode} [content]
+ *   Custom inline content; hides placeholder and uses a visually hidden input.
+ *
+ * @property {object} [control]
+ *   react-hook-form `control`. With `name`, wires via `useController`.
+ * @property {object} [rules]
+ *   RHF validation rules.
+ * @property {object} [error]
+ *   RHF field error (`error.message` → info text and error status).
+ * @property {import('react').Ref} [inputRef]
+ *   Ref forwarded to the native `<input>`.
+ *
+ * @property {string} [aria-label]
+ *   Accessible name when `label` is omitted. Default `'input field'`.
+ *
+ * @see {@link InputFieldContainer}
+ */
+/**
+ * Inner input chrome used by {@link InputField} and {@link SelectField}.
+ *
+ * @param {InputFieldProps} props
+ * @returns {import('react').ReactElement}
+ */
+export function InputFieldContent({ id, name, type, value, defaultValue, placeholder, disabled, onChange, startIcon, endIcon, onEndIconClick, onEnter, onFieldClick, size, ariaLabel, label, inputProps, containerFieldClassName, content, }: InputFieldProps): import("react").ReactElement;
+/**
+ * Single-line input with label, icons, and optional react-hook-form wiring.
+ *
+ * ## Props
+ *
+ * Rest props (e.g. `maxLength`, `autoComplete`) pass through to the native `<input>`.
+ *
+ * **label** `string` — no default
+ * Field label.
+ *
+ * **infoText** `string` — no default
+ * Helper or character-count text below the field. Overridden by `error.message`.
+ *
+ * **status** `'default' | 'error'` — default `'default'`
+ * Validation shell state.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables the input.
+ *
+ * **required** `boolean` — default `false`
+ * Shows required mark when `label` is set.
+ *
+ * **id** `string` — no default
+ * Input `id`. Auto-generated when omitted.
+ *
+ * **name** `string` — no default
+ * Input `name`. Also used as RHF field name with `control`.
+ *
+ * **type** `string` — default `'text'`
+ * Native input `type`.
+ *
+ * **value** `string` — no default
+ * Controlled value.
+ *
+ * **defaultValue** `string` — no default
+ * Uncontrolled initial value.
+ *
+ * **placeholder** `string` — default `'Text'`
+ * Placeholder text.
+ *
+ * **onChange** `(event: ChangeEvent<HTMLInputElement>) => void` — default `() => {}`
+ * Input change handler.
+ *
+ * **onBlur** `(event: FocusEvent<HTMLInputElement>) => void` — no default
+ * Input blur handler.
+ *
+ * **size** `'lg' | 'md' | 'sm' | 'xs'` — default `'lg'`
+ * Field height.
+ *
+ * **startIcon** `ReactNode` — no default
+ * Leading icon inside the field.
+ *
+ * **endIcon** `ReactNode` — no default
+ * Trailing icon inside the field.
+ *
+ * **onEndIconClick** `() => void` — no default
+ * Click handler for `endIcon`.
+ *
+ * **onEnter** `() => void` — no default
+ * Fired on Enter when not disabled.
+ *
+ * **onFieldClick** `() => void` — no default
+ * Click handler for the field shell.
+ *
+ * **content** `ReactNode` — default `null`
+ * Custom inline content; hides placeholder and uses a visually hidden input.
+ *
+ * **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 `<input>`.
+ *
+ * **aria-label** `string` — default `'input field'` when no `label`
+ * Accessible name when `label` is omitted.
+ *
+ * @param {InputFieldProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Playground</caption>
+ * import { InputField } from '@eyesee/ui-components';
+ * import { SearchIcon, CalendarIcon } from '@eyesee/ui-components/icons';
+ *
+ * <InputField
+ *   label="Label"
+ *   infoText="100/160"
+ *   placeholder="Text"
+ *   size="lg"
+ *   startIcon={<SearchIcon iconSize="m" />}
+ *   endIcon={<CalendarIcon iconSize="m" />}
+ * />
+ *
+ * @example <caption>In Context</caption>
+ * import { InputField } from '@eyesee/ui-components';
+ * import { SearchIcon, CalendarIcon } from '@eyesee/ui-components/icons';
+ *
+ * <InputField
+ *   label="Project name"
+ *   placeholder="e.g. Brand Lift Spring 2026"
+ *   infoText="12/24"
+ *   status="default"
+ *   startIcon={<SearchIcon iconSize="m" />}
+ *   endIcon={<CalendarIcon iconSize="m" />}
+ * />
+ */
+export function InputField(props: InputFieldProps): import("react").ReactElement;
+export type InputFieldChangeHandler = (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+export type InputFieldEnterHandler = () => void;
+export type InputFieldFieldClickHandler = () => void;
+export type InputFieldEndIconClickHandler = () => void;
+export type InputFieldBlurHandler = (event: import("react").FocusEvent<HTMLInputElement>) => void;
+export type InputFieldProps = {
+    /**
+     * Field label.
+     */
+    label?: string;
+    /**
+     * Helper or character-count text below the field. Overridden by `error.message`.
+     */
+    infoText?: string;
+    /**
+     * Validation shell state. Default `'default'`.
+     */
+    status?: "default" | "error";
+    /**
+     * Disables the input. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Shows required mark when `label` is set. Default `false`.
+     */
+    required?: boolean;
+    /**
+     * Input `id`. Auto-generated when omitted.
+     */
+    id?: string;
+    /**
+     * Input `name`; also RHF field name with `control`.
+     */
+    name?: string;
+    /**
+     * Native input `type`. Default `'text'`.
+     */
+    type?: string;
+    /**
+     * Controlled value.
+     */
+    value?: string;
+    /**
+     * Uncontrolled initial value.
+     */
+    defaultValue?: string;
+    /**
+     * Placeholder text. Default `'Text'`.
+     */
+    placeholder?: string;
+    /**
+     * Input change handler. Default `() => {}`.
+     */
+    onChange?: InputFieldChangeHandler;
+    /**
+     * Input blur handler.
+     */
+    onBlur?: InputFieldBlurHandler;
+    /**
+     * Field height. Default `'lg'`.
+     */
+    size?: "lg" | "md" | "sm" | "xs";
+    /**
+     * Leading icon inside the field.
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Trailing icon inside the field.
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * Click handler for `endIcon`.
+     */
+    onEndIconClick?: InputFieldEndIconClickHandler;
+    /**
+     * Fired on Enter when not disabled.
+     */
+    onEnter?: InputFieldEnterHandler;
+    /**
+     * Click handler for the field shell (not the native input).
+     */
+    onFieldClick?: InputFieldFieldClickHandler;
+    /**
+     * Custom inline content; hides placeholder and uses a visually hidden input.
+     */
+    content?: React.ReactNode;
+    /**
+     * 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 `<input>`.
+     */
+    inputRef?: any;
+    /**
+     * Accessible name when `label` is omitted. Default `'input field'`.
+     */
+    "aria-label"?: string;
+};

package/dist/components/Fields/InputField/InputField.js

@@ -1,84 +1,89 @@
-import { jsx as c, jsxs as x } from "react/jsx-runtime";
-import o from "clsx";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import s from "clsx";
 import e from "./InputField.module.scss.js";
-import { createField as Z } from "../InputFieldContainer.js";
-const b = (
+import { createField as V } from "../InputFieldContainer.js";
+const Z = (
   /** @type {const} */
   ["lg", "md", "sm", "xs"]
-), q = ({
-  id: N,
-  name: p,
+);
+function b({
+  id: r,
+  name: N,
   type: y = "text",
   value: g,
   defaultValue: D,
   placeholder: w = "Text",
   disabled: i = !1,
-  onChange: K = () => {
+  onChange: F = () => {
   },
-  startIcon: n,
-  endIcon: m,
-  onEndIconClick: s,
-  onEnter: r,
-  onFieldClick: d,
+  startIcon: c,
+  endIcon: d,
+  onEndIconClick: n,
+  onEnter: m,
+  onFieldClick: u,
   size: f = "lg",
-  ariaLabel: S,
-  label: j,
+  ariaLabel: K,
+  label: S,
   inputProps: l = {},
-  containerFieldClassName: F,
-  content: u = null
-}) => {
-  const T = b.includes(f) ? f : "lg", a = u != null, V = (t) => {
-    var h;
-    t.key === "Enter" && r && !i && (t.preventDefault(), r()), (h = l.onKeyDown) == null || h.call(l, t);
-  }, v = /* @__PURE__ */ c(
+  containerFieldClassName: j,
+  content: v = null
+}) {
+  const R = Z.includes(f) ? f : "lg", t = v != null, T = (a) => {
+    var x;
+    a.key === "Enter" && m && !i && (a.preventDefault(), m()), (x = l.onKeyDown) == null || x.call(l, a);
+  }, h = /* @__PURE__ */ o(
     "input",
     {
-      id: N,
-      name: p,
+      id: r,
+      name: N,
       type: y,
-      value: a ? "" : g,
-      defaultValue: a ? void 0 : D,
-      placeholder: a ? void 0 : w,
+      value: t ? "" : g,
+      defaultValue: t ? void 0 : D,
+      placeholder: t ? void 0 : w,
       disabled: i,
-      onChange: K,
-      "aria-label": S ?? (j ? void 0 : "input field"),
+      onChange: F,
+      "aria-label": K ?? (S ? void 0 : "input field"),
       ...l,
-      className: o(a && e.hiddenInput, l.className),
-      onKeyDown: V
+      className: s(t && e.hiddenInput, l.className),
+      onKeyDown: T
     }
   );
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: o(
+      className: s(
         e.field,
-        F,
-        e[T],
-        d && e.clickable
+        j,
+        e[R],
+        u && e.clickable
       ),
-      onClick: i ? void 0 : d,
+      onClick: i ? void 0 : u,
       children: [
-        n ? /* @__PURE__ */ c("span", { "data-field-icon": !0, className: o(e.icon), children: n }) : null,
-        a ? /* @__PURE__ */ x("div", { className: e.content, children: [
-          u,
-          v
-        ] }) : v,
-        m ? /* @__PURE__ */ c(
+        c ? /* @__PURE__ */ o("span", { "data-field-icon": !0, className: s(e.icon), children: c }) : null,
+        t ? /* @__PURE__ */ p("div", { className: e.content, children: [
+          v,
+          h
+        ] }) : h,
+        d ? /* @__PURE__ */ o(
           "span",
           {
             "data-field-icon": !0,
-            className: o(e.icon, s && e.clickable),
-            onClick: i ? void 0 : (t) => {
-              t.stopPropagation(), s == null || s();
+            className: s(e.icon, n && e.clickable),
+            onClick: i ? void 0 : (a) => {
+              a.stopPropagation(), n == null || n();
             },
-            children: m
+            children: d
           }
         ) : null
       ]
     }
   );
-}, H = Z(q);
+}
+const q = V(b);
+function H(r) {
+  return /* @__PURE__ */ o(q, { ...r });
+}
 export {
   H as InputField,
-  q as InputFieldContent
+  b as InputFieldContent
 };

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

@@ -0,0 +1,11 @@
+export function InputFieldContainer({ id, label, isRequiredField, validationStatus, disabled, computedInfoText, children, }: {
+    id: string;
+    label?: string;
+    isRequiredField?: boolean;
+    validationStatus?: string;
+    disabled?: boolean;
+    computedInfoText?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export function createField(FieldContentComponent: any): (props: any) => import("react").JSX.Element;
+export function withFieldContainer(FieldContentComponent: any): (props: any) => import("react").JSX.Element;