@tedi-design-system/react 17.0.0 → 17.1.0-rc.10

package/src/tedi/components/form/date-field/date-field.d.ts

@@ -0,0 +1,202 @@
+import { default as React } from 'react';
+import { DateRange, DayPickerProps, Locale, Matcher, OnSelectHandler } from 'react-day-picker';
+import { BreakpointSupport } from '../../../helpers';
+import { MultiValueFieldProps } from '../multi-value-field/multi-value-field';
+import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
+export type DateFieldMode = 'single' | 'multiple' | 'range';
+export type CalendarView = 'days' | 'months' | 'years';
+export type DateFieldCalendarTrigger = 'input' | 'button';
+type DateTextFieldProps = Omit<TextFieldProps, 'label' | 'id'>;
+type DateMultiValueFieldProps = Omit<MultiValueFieldProps, 'label' | 'id'>;
+/**
+ * Subset of DateField props that can be overridden per breakpoint via the
+ * `BreakpointSupport` API (e.g. `<DateField useNativePicker md={{ useNativePicker: false }} />`).
+ */
+type DateFieldBreakpointProps = {
+    /**
+     * Whether the calendar popover is interactive.
+     * @default true
+     */
+    enableCalendar?: boolean;
+    /**
+     * What opens the calendar — only the icon (`'button'`) or anywhere in the input (`'input'`).
+     * @default button
+     */
+    calendarTrigger?: DateFieldCalendarTrigger;
+    /**
+     * Swap the custom calendar for the browser's native `<input type="date">`.
+     * Only applies to `mode='single'`.
+     * @default false
+     */
+    useNativePicker?: boolean;
+    /**
+     * Number of months shown side-by-side. On mobile (`< md`) values > 1 are
+     * automatically clamped to 1 — the popover would otherwise be unscrollable
+     * on a phone viewport.
+     */
+    numberOfMonths?: number;
+};
+export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointProps>, Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect' | 'numberOfMonths'> {
+    /**
+     * Unique identifier for the date field.
+     */
+    id: string;
+    /**
+     * Field label. Required for accessibility.
+     */
+    label: string;
+    /**
+     * Determines the selection mode of the calendar.
+     * - `'single'` (default) – only one date can be selected. The `selected` prop should be a `Date` object or `undefined`.
+     * - `'multiple'` – multiple individual dates can be selected. The `selected` prop should be an array of `Date` objects.
+     * - `'range'` – a continuous date range can be selected. The `selected` prop should be an object with `from` and optional `to` properties, both being `Date` objects.
+     *
+     * @default single
+     */
+    mode?: DateFieldMode;
+    /**
+     * The currently selected date(s). The expected type depends on the `mode`:
+     * - For `mode="single"`, this should be a `Date` object or `undefined`.
+     * - For `mode="multiple"`, this should be an array of `Date` objects.
+     * - For `mode="range"`, this should be an object with a `from` property (a `Date` object) and an optional `to` property (also a `Date` object).
+     */
+    selected?: Date | Date[] | DateRange | undefined;
+    /**
+     * Callback fired when the user selects a date or date range. The exact parameters depend on the `mode`:
+     * - For `mode="single"`, the callback receives the selected `Date` object (or `undefined` if cleared).
+     * - For `mode="multiple"`, the callback receives an array of selected `Date` objects.
+     * - For `mode="range"`, the callback receives an object with `from` and optional `to` properties, both being `Date` objects (or `undefined` if cleared).
+     */
+    onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>;
+    /**
+     * Disable specific dates. Accepts the same matchers as React DayPicker's `disabled` prop.
+     */
+    disabled?: Matcher | Matcher[];
+    /**
+     * Input placeholder text when no date is selected.
+     */
+    placeholder?: string;
+    /**
+     * Additional class name(s) to apply to the component container.
+     */
+    className?: string;
+    /**
+     * Custom date formatting function. Receives the selected date(s) and should return a string for display in the input field.
+     * If not provided, a default formatter will be used that formats dates as "dd.MM.yyyy" in the "et-EE" locale.
+     */
+    formatDate?: (date: Date | Date[] | DateRange | undefined) => string;
+    /**
+     * Show days from adjacent months in the calendar view. Default is `true`.
+     *
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Custom date parsing function for user input. Receives the input string and should return a `Date`, an array of `Date`s, a `DateRange`, or `undefined` if the input is invalid or cleared.
+     * If not provided, the component will not allow manual input and will rely solely on the calendar picker for date selection.
+     */
+    parseDate?: (value: string) => Date | Date[] | DateRange | undefined;
+    /**
+     * Initial month to display when the calendar is opened. If not provided, defaults to the month of the currently selected date or the current month if no date is selected.
+     */
+    initialMonth?: Date;
+    /**
+     * When `true`, the date field is marked as required, and the calendar will enforce that a date is selected before allowing the user to close it. Default is `false`.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * How the month/year selector in the calendar header is rendered.
+     * Forwarded to the internal `Calendar` / `CalendarHeader`.
+     * - `'dropdown'` (default) — each picker is a `<Select>` dropdown.
+     * - `'grid'` — each picker opens a full grid of options.
+     * @default dropdown
+     */
+    monthYearSelectType?: 'dropdown' | 'grid';
+    /**
+     * **Selection granularity** — controls the level at which a click finalises
+     * the date selection rather than drilling further into days. Use a coarser
+     * level when the consumer only needs to pick a year or a month.
+     * - `'years'` — clicking a year selects Jan 1 of that year and closes; the
+     *   calendar opens on the year grid.
+     * - `'months'` — clicking a month selects the first day of that month; the
+     *   calendar opens on the month grid.
+     * - `'days'` (default) — full day-level selection; the calendar opens on
+     *   the day grid as usual.
+     *
+     * Distinct from the *currently visible* grid — that's managed internally
+     * and flips as the user navigates between year / month / day. This prop
+     * is the lowest level the user can drill down to before a click commits.
+     * @default 'days'
+     */
+    selectionLevel?: CalendarView;
+    /**
+     * The locale object for the calendar, used by React DayPicker. Defaults to Estonian locale.
+     */
+    locale?: Locale;
+    /**
+     * The locale code string used for date formatting. Defaults to 'et-EE'.
+     */
+    localeCode?: string;
+    /**
+     * When `true`, the calendar popover will automatically close after a date is selected. Default behavior is to close on select only in 'single' mode.
+     * You can override this behavior by explicitly setting this prop to `true` or `false`.
+     *
+     * @default depends on mode (true for 'single', false for 'multiple' and 'range')
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Custom footer content to display at the bottom of the calendar popover. Can be used to add action buttons or additional information.
+     * The footer will be rendered inside the calendar popover, below the calendar grid.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Initial value for uncontrolled usage
+     */
+    defaultValue?: Date | Date[] | DateRange;
+    /**
+     * Minimum selectable date. Dates before this will be disabled.
+     * If you want to disable past dates, you can also use the `disablePast` boolean prop.
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date. Dates after this will be disabled.
+     * If you want to disable future dates, you can also use the `disableFuture` boolean prop.
+     */
+    maxDate?: Date;
+    /**
+     * Disable all past dates. Dates before the current date will be disabled.
+     */
+    disablePast?: boolean;
+    /**
+     * Disable all future dates. Dates after the current date will be disabled.
+     */
+    disableFuture?: boolean;
+    /**
+     * Disable specific months dynamically. Receives a month `Date` object and should return `true` if that month should be disabled.
+     */
+    shouldDisableMonth?: (month: Date) => boolean;
+    /**
+     * Disable specific years dynamically. Receives a year `Date` object and should return `true` if that year should be disabled.
+     */
+    shouldDisableYear?: (year: Date) => boolean;
+    /**
+     * When `true`, the input field will be read-only, preventing manual text input. The calendar can still be opened and used for date selection.
+     * This is useful when you want to allow date selection only through the calendar picker and not allow users to type in dates manually.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify available days. Can be an array of `Date` objects or a function that receives a date and returns `true` if that date is available.
+     * This is useful for highlighting specific dates as available while keeping other dates enabled.
+     */
+    availableDays?: Date[] | ((date: Date) => boolean);
+    /**
+     * Props to pass down to the underlying TextField (in 'single' mode) or MultiValueField (in 'multiple' mode). This allows for additional customization of the input field, such as adding custom styles, attributes, or event handlers.
+     */
+    inputProps?: DateTextFieldProps | DateMultiValueFieldProps;
+}
+export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<TextFieldForwardRef>>;
+export {};

package/src/tedi/components/form/date-field/date-field.es.js

@@ -0,0 +1,303 @@
+import { jsxs as He, Fragment as Je, jsx as y } from "react/jsx-runtime";
+import { useFloating as Ke, useClick as Qe, useInteractions as Xe, useDismiss as Ze, useRole as et, FloatingPortal as tt, FloatingFocusManager as rt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import Q from "../../../../../external/classnames/index.es.js";
+import X, { useState as w, useCallback as Z, useEffect as A, useMemo as ee } from "react";
+import { Calendar as it } from "../../content/calendar/calendar.es.js";
+import { MultiValueField as at } from "../multi-value-field/multi-value-field.es.js";
+import { TextField as nt } from "../textfield/textfield.es.js";
+import b from "./date-field.module.scss.es.js";
+import { et as ot } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+import { autoUpdate as st } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as lt, flip as ft, shift as ct, size as dt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useBreakpointProps as ut } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpoint as mt, isBreakpointBelow as pt } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { dateMatchModifiers as ht } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
+const gt = 4, de = 8, yt = X.forwardRef((v, C) => {
+  const { getCurrentBreakpointProps: ue } = ut(v.defaultServerBreakpoint), {
+    useNativePicker: me = !1,
+    enableCalendar: f = !0,
+    calendarTrigger: I = "button",
+    numberOfMonths: $
+  } = ue(v), {
+    id: te,
+    mode: c = "single",
+    label: re,
+    selected: F,
+    onSelect: i,
+    disabled: N,
+    placeholder: pe,
+    className: he,
+    formatDate: l,
+    required: V,
+    showOutsideDays: ge = !0,
+    parseDate: ye,
+    monthYearSelectType: be,
+    selectionLevel: P = "days",
+    locale: De = ot,
+    localeCode: E = "et-EE",
+    initialMonth: j,
+    closeOnSelect: xe,
+    footer: _e,
+    defaultValue: O,
+    minDate: W,
+    maxDate: S,
+    disablePast: ie,
+    disableFuture: ae,
+    shouldDisableMonth: Y,
+    shouldDisableYear: L,
+    readOnly: U,
+    availableDays: Ce,
+    inputProps: m,
+    useNativePicker: bt,
+    enableCalendar: Dt,
+    calendarTrigger: xt,
+    numberOfMonths: _t,
+    defaultServerBreakpoint: Ct,
+    sm: Ft,
+    md: Nt,
+    lg: kt,
+    xl: Mt,
+    xxl: wt,
+    ...Fe
+  } = v, d = me && c === "single", Ne = mt(v.defaultServerBreakpoint), ke = pt(Ne, "md") && typeof $ == "number" && $ > 1 ? 1 : $, [Me, h] = w(F ?? O), [u, D] = w(!1), [we, ne] = w(P), [Ae, x] = w(""), n = F !== void 0, o = n ? F : Me, oe = X.useRef(null), ve = X.useCallback(
+    (e) => {
+      oe.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+    },
+    [C]
+  ), Pe = (e) => {
+    if (!e) return "";
+    const r = e.getFullYear(), t = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0");
+    return `${r}-${t}-${a}`;
+  }, Oe = d && o instanceof Date ? Pe(o) : "", q = Z((e, r) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((t, a) => t.getTime() - a.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : r ?? /* @__PURE__ */ new Date(), []), [Re, z] = w(() => q(o, j));
+  A(() => {
+    u || z(q(o, j));
+  }, [o, j, u, q]), A(() => {
+    u && ne(P);
+  }, [u, P]), A(() => {
+    n && h(F);
+  }, [F, n]);
+  const g = ee(
+    () => new Intl.DateTimeFormat(E, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    }),
+    [E]
+  ), _ = Z(
+    (e) => {
+      if (!e) return "";
+      if (e instanceof Date) return g.format(e);
+      if (Array.isArray(e)) return e.map((r) => g.format(r)).join(", ");
+      if (e.from) {
+        const r = g.format(e.from);
+        return e.to ? `${r} – ${g.format(e.to)}` : r;
+      }
+      return "";
+    },
+    [g]
+  ), G = xe ?? c === "single", se = c === "multiple" && Array.isArray(o) ? o.map((e, r) => ({
+    id: r,
+    label: l ? l(e) : _(e),
+    date: e
+  })) : [], H = ee(() => {
+    const e = [];
+    return N && (Array.isArray(N) ? e.push(...N) : e.push(N)), W && e.push({ before: W }), S && e.push({ after: S }), ie && e.push({ before: /* @__PURE__ */ new Date() }), ae && e.push({ after: /* @__PURE__ */ new Date() }), Y && e.push((r) => Y(r)), L && e.push((r) => L(r)), e;
+  }, [N, W, S, ie, ae, Y, L]), le = Z(
+    (e) => ht(e, H),
+    [H]
+  ), Te = (e, r, t, a) => {
+    if (n || h(e), i == null || i(e, r, t, a), e) {
+      const p = l ? l(e) : _(e);
+      x(p);
+    } else
+      x("");
+    G && D(!1);
+  }, Be = (e) => {
+    if (le(e)) return;
+    n || h(e), i == null || i(e, e, {}, {});
+    const r = l ? l(e) : _(e);
+    x(r), G && D(!1);
+  }, Ie = ee(() => {
+    const e = new Date(2099, 11, 31), r = g.formatToParts(e), t = [], a = [];
+    for (const s of r)
+      s.type === "day" || s.type === "month" || s.type === "year" ? t.push(s.type) : s.type === "literal" && t.length > 0 && a.length < 2 && a.push(s.value);
+    const p = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Ue = t.map((s, k) => {
+      const T = s === "year" ? "\\d{4}" : "\\d{2}";
+      return `${k > 0 ? p(a[k - 1] ?? "") : ""}(${T})`;
+    }).join(""), qe = new RegExp(`^${Ue}$`);
+    return (s) => {
+      const k = s.match(qe);
+      if (!k) return;
+      const T = {};
+      t.forEach((ze, Ge) => {
+        T[ze] = Number(k[Ge + 1]);
+      });
+      const { day: B, month: J, year: K } = T;
+      if (B === void 0 || J === void 0 || K === void 0) return;
+      const M = new Date(K, J - 1, B);
+      if (!(isNaN(M.getTime()) || M.getFullYear() !== K || M.getMonth() !== J - 1 || M.getDate() !== B))
+        return M;
+    };
+  }, [g]), $e = (e) => {
+    x(e);
+    const t = (ye ?? (c === "single" ? Ie : () => {
+    }))(e);
+    (c === "single" && t instanceof Date || c === "multiple" && Array.isArray(t) || c === "range" && t && !Array.isArray(t) && "from" in t) && (t instanceof Date && le(t) || (n || h(t), i == null || i(t, t, {}, {}), t instanceof Date && z(t), G && D(!1)));
+  };
+  A(() => {
+    if (n) {
+      const e = l ? l(o) : _(o);
+      x(e);
+    }
+  }, [o, n, l, _]), A(() => {
+    if (!n && O) {
+      const e = l ? l(O) : _(O);
+      x(e);
+    }
+  }, []);
+  const Ve = Ke({
+    open: u,
+    onOpenChange: D,
+    placement: I === "input" ? "bottom-start" : "bottom-end",
+    middleware: [
+      lt(gt),
+      ft(),
+      ct({ padding: de }),
+      dt({
+        padding: de,
+        apply({ availableWidth: e, elements: r }) {
+          const t = r.floating;
+          t.style.width = "max-content", t.style.maxWidth = "", t.getBoundingClientRect().width > e ? (t.style.width = "min-content", t.style.maxWidth = `${e}px`) : (t.style.width = "", t.style.maxWidth = "");
+        }
+      })
+    ],
+    whileElementsMounted: st
+  }), { refs: fe, context: R, x: Ee, y: je, strategy: We } = Ve, Se = Qe(R), ce = Xe([
+    ...f && !d && I === "input" ? [Se] : [],
+    Ze(R),
+    et(R, { role: "dialog" })
+  ]), Ye = () => {
+    var r;
+    const e = (r = oe.current) == null ? void 0 : r.input;
+    if (e) {
+      if (typeof e.showPicker == "function")
+        try {
+          e.showPicker();
+          return;
+        } catch {
+        }
+      e.focus();
+    }
+  }, Le = (e) => {
+    if (!e) {
+      n || h(void 0), i == null || i(void 0, void 0, {}, {});
+      return;
+    }
+    const [r, t, a] = e.split("-").map(Number);
+    if (!r || !t || !a) return;
+    const p = new Date(r, t - 1, a);
+    Number.isNaN(p.getTime()) || (n || h(p), i == null || i(p, p, {}, {}));
+  };
+  return /* @__PURE__ */ He(Je, { children: [
+    /* @__PURE__ */ y(
+      "div",
+      {
+        className: Q(b["tedi-date-field__container"], he),
+        ...ce.getReferenceProps(),
+        ref: fe.setReference,
+        children: c === "multiple" ? /* @__PURE__ */ y(
+          at,
+          {
+            ...m,
+            id: te,
+            label: re,
+            values: se.map((e) => e.label),
+            icon: "calendar_today",
+            onIconClick: () => f && D((e) => !e),
+            iconButtonProps: f ? { "aria-expanded": u, "aria-haspopup": "dialog" } : void 0,
+            isClearable: !0,
+            required: V,
+            onChange: (e) => {
+              if (!Array.isArray(o)) return;
+              const r = se.filter((t) => e.includes(t.label)).map((t) => t.date);
+              n || h(r), i == null || i(r, {}, {}, {});
+            },
+            className: Q(b["tedi-date-field__textfield"], {
+              [b["tedi-date-field__icon--disabled"]]: !f || U
+            })
+          }
+        ) : /* @__PURE__ */ y(
+          nt,
+          {
+            ...m,
+            ref: ve,
+            id: te,
+            label: re,
+            readOnly: U,
+            value: d ? Oe : Ae,
+            placeholder: pe,
+            icon: "calendar_today",
+            isClearable: !0,
+            onIconClick: () => {
+              f && (d ? Ye() : D((e) => !e));
+            },
+            iconButtonProps: f && !d ? { "aria-expanded": u, "aria-haspopup": "dialog" } : void 0,
+            onChange: (e) => d ? Le(e) : $e(e),
+            required: V,
+            className: Q(b["tedi-date-field__textfield"], {
+              [b["tedi-date-field__textfield--disabled"]]: m == null ? void 0 : m.disabled,
+              [b["tedi-date-field__icon--disabled"]]: !f || U
+            }),
+            input: {
+              ...m == null ? void 0 : m.input,
+              ...d && { type: "date" },
+              ...f && !d && I === "input" ? { "aria-haspopup": "dialog", "aria-expanded": u } : {}
+            }
+          }
+        )
+      }
+    ),
+    f && !d && /* @__PURE__ */ y(tt, { children: u && /* @__PURE__ */ y(rt, { context: R, modal: !1, initialFocus: -1, children: /* @__PURE__ */ y(
+      "div",
+      {
+        ref: fe.setFloating,
+        ...ce.getFloatingProps({
+          style: {
+            position: We,
+            top: je ?? 0,
+            left: Ee ?? 0
+          }
+        }),
+        children: /* @__PURE__ */ y(
+          it,
+          {
+            ...Fe,
+            numberOfMonths: ke,
+            view: we,
+            selectionLevel: P,
+            currentMonth: Re,
+            setCurrentMonth: z,
+            setView: ne,
+            mode: c,
+            value: o,
+            locale: De,
+            localeCode: E,
+            showOutsideDays: ge,
+            disabledMatchers: H,
+            required: V,
+            availableDays: Ce,
+            footer: _e,
+            monthYearSelectType: be,
+            handleSelect: Te,
+            applyValue: Be,
+            className: b["tedi-date-field__calendar"]
+          }
+        )
+      }
+    ) }) })
+  ] });
+});
+yt.displayName = "DateField";
+export {
+  yt as DateField
+};

package/src/tedi/components/form/date-field/date-field.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-field__calendar":"tedi-date-field__calendar-56bdb86f","tedi-date-field__textfield":"tedi-date-field__textfield-c80668a6","tedi-date-field__textfield--disabled":"tedi-date-field__textfield--disabled-5f79b37d","tedi-date-field__icon--disabled":"tedi-date-field__icon--disabled-0e13b2f6","tedi-date-field__container":"tedi-date-field__container-78414b07"};exports.default=e;

package/src/tedi/components/form/date-field/date-field.module.scss.es.js

@@ -0,0 +1,10 @@
+const e = {
+  "tedi-date-field__calendar": "tedi-date-field__calendar-56bdb86f",
+  "tedi-date-field__textfield": "tedi-date-field__textfield-c80668a6",
+  "tedi-date-field__textfield--disabled": "tedi-date-field__textfield--disabled-5f79b37d",
+  "tedi-date-field__icon--disabled": "tedi-date-field__icon--disabled-0e13b2f6",
+  "tedi-date-field__container": "tedi-date-field__container-78414b07"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/field/field.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),M=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),n=require("../input-group/input-group.cjs.js"),_=require("./field.module.scss.cjs.js"),m=e.forwardRef((l,p)=>{var d;const{id:k,name:v,value:i,type:x,defaultValue:I,onChange:a,onChangeEvent:r,disabled:q,readOnly:y,required:N,invalid:R,placeholder:V,className:g,onFocus:j,onBlur:F,isTextArea:P,inputProps:b,textareaProps:h,...O}=l,t=e.useRef(null),[S,T]=e.useState(i??I??""),w=i??S;e.useImperativeHandle(p,()=>t.current);const C=o=>{const c=o.currentTarget.value;T(c),a==null||a(c),r==null||r(o)},s=(d=n.useOptionalInputGroup)==null?void 0:d.call(n),A=e.useId(),B=l.id??(s==null?void 0:s.inputId)??A,H=M.default(_.default["tedi-field"],g),u={...O,id:B,name:v,value:w,placeholder:V,disabled:q,readOnly:y,required:N,"aria-invalid":R||void 0,onChange:C,onFocus:j,onBlur:F,className:H,ref:t};return P?f.jsx("textarea",{...h,...u,ref:t}):f.jsx("input",{...b,...u,type:x,ref:t})});m.displayName="Field";exports.Field=m;

package/src/tedi/components/form/field/field.d.ts

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+export type FieldElement = HTMLInputElement | HTMLTextAreaElement;
+export interface FieldProps {
+    /**
+     * Unique identifier for the field element.
+     */
+    id?: string;
+    /**
+     * Name attribute used in forms and form submissions.
+     */
+    name?: string;
+    /**
+     * Controlled value of the field.
+     */
+    value?: string;
+    /**
+     * The type of the input element (e.g. 'text', 'email', 'password', 'number', 'tel', 'url', etc.).
+     *
+     * **Note**: This prop is ignored when `isTextArea={true}`.
+     * @default 'text'
+     */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    /**
+     * Default value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when value changes (returns string value only).
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Native change event callback (full event access).
+     */
+    onChangeEvent?: React.ChangeEventHandler<FieldElement>;
+    /**
+     * Disables the field and prevents user interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Makes the field read-only (user cannot edit but can focus/select).
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as required in form validation.
+     */
+    required?: boolean;
+    /**
+     * Marks the field visually and semantically as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Placeholder text displayed when the field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Custom CSS class for the input/textarea element.
+     */
+    className?: string;
+    /**
+     * ARIA description reference (used for helper/error text association).
+     */
+    'aria-describedby'?: string;
+    /**
+     * Accessible label for screen readers when no visible label exists.
+     */
+    'aria-label'?: string;
+    /**
+     * Focus event handler.
+     */
+    onFocus?: React.FocusEventHandler<FieldElement>;
+    /**
+     * Blur event handler.
+     */
+    onBlur?: React.FocusEventHandler<FieldElement>;
+    /**
+     * Renders a textarea instead of an input element.
+     */
+    isTextArea?: boolean;
+    /**
+     * Native input element props override (input only).
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Native textarea element props override (textarea only).
+     */
+    textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<FieldElement>>;

package/src/tedi/components/form/field/field.es.js

@@ -0,0 +1,54 @@
+import { jsx as c } from "react/jsx-runtime";
+import B from "../../../../../external/classnames/index.es.js";
+import a, { forwardRef as H } from "react";
+import { useOptionalInputGroup as S } from "../input-group/input-group.es.js";
+import k from "./field.module.scss.es.js";
+const z = H((n, m) => {
+  var i;
+  const {
+    id: D,
+    name: f,
+    value: l,
+    type: p,
+    defaultValue: v,
+    onChange: r,
+    onChangeEvent: t,
+    disabled: I,
+    readOnly: x,
+    required: N,
+    invalid: V,
+    placeholder: y,
+    className: R,
+    onFocus: h,
+    onBlur: F,
+    isTextArea: P,
+    inputProps: g,
+    textareaProps: w,
+    ...C
+  } = n, e = a.useRef(null), [O, T] = a.useState(l ?? v ?? ""), _ = l ?? O;
+  a.useImperativeHandle(m, () => e.current);
+  const b = (d) => {
+    const u = d.currentTarget.value;
+    T(u), r == null || r(u), t == null || t(d);
+  }, s = (i = S) == null ? void 0 : i(), j = a.useId(), q = n.id ?? (s == null ? void 0 : s.inputId) ?? j, A = B(k["tedi-field"], R), o = {
+    ...C,
+    id: q,
+    name: f,
+    value: _,
+    placeholder: y,
+    disabled: I,
+    readOnly: x,
+    required: N,
+    "aria-invalid": V || void 0,
+    onChange: b,
+    onFocus: h,
+    onBlur: F,
+    className: A,
+    ref: e
+  };
+  return P ? /* @__PURE__ */ c("textarea", { ...w, ...o, ref: e }) : /* @__PURE__ */ c("input", { ...g, ...o, type: p, ref: e });
+});
+z.displayName = "Field";
+export {
+  z as Field
+};

package/src/tedi/components/form/field/field.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-field":"tedi-field-df48ad86"};exports.default=e;

package/src/tedi/components/form/field/field.module.scss.es.js

@@ -0,0 +1,6 @@
+const d = {
+  "tedi-field": "tedi-field-df48ad86"
+};
+export {
+  d as default
+};