@tedi-design-system/react 14.0.0-rc.1

package/src/tedi/components/form/choice-group/choice-group.es.js

@@ -0,0 +1,119 @@
+import { jsx as n, jsxs as _, Fragment as Z } from "react/jsx-runtime";
+import F from "../../../../../external/classnames/index.es.js";
+import y, { useState as ee } from "react";
+import { FeedbackText as te } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as re } from "../form-label/form-label.es.js";
+import { Checkbox as oe } from "../checkbox/checkbox.es.js";
+import I from "./choice-group.module.scss.es.js";
+import { ChoiceGroupContext as ne } from "./choice-group-context.es.js";
+import { ChoiceGroupItem as j } from "./components/choice-group-item/choice-group-item.es.js";
+import { useBreakpoint as ie, isBreakpointBelow as G } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { useLabels as le } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as ae } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Row as H } from "../../layout/grid/row.es.js";
+import { Col as de } from "../../layout/grid/col.es.js";
+const se = (u) => {
+  const { getLabel: p } = le(), B = ie(u.defaultServerBreakpoint), { getCurrentBreakpointProps: E } = ae(u.defaultServerBreakpoint), {
+    id: s,
+    className: R,
+    label: h,
+    required: T,
+    helper: m,
+    items: o,
+    variant: C = "default",
+    direction: f = C === "default" || G(B, "md") ? "column" : "row",
+    rowProps: b,
+    name: S,
+    inputType: i = "radio",
+    value: w,
+    defaultValue: A,
+    onChange: a,
+    hideLabel: $,
+    indeterminateCheck: d,
+    indeterminateCheckProps: g = {},
+    color: q,
+    layout: x,
+    showIndicator: P,
+    ...W
+  } = E(u), { ...X } = g, Y = (g == null ? void 0 : g.indented) ?? !0, L = (m == null ? void 0 : m.id) ?? `${s}-helper`, M = d && i === "checkbox", [z, N] = ee(() => {
+    if (A) return A;
+    if (i === "radio") {
+      const e = o.find((l) => l.defaultChecked);
+      return e ? e.value : null;
+    }
+    return i === "checkbox" ? o.filter((e) => e.defaultChecked).map((e) => e.value) : null;
+  }), v = (e = u.value) => !!a && typeof e < "u", r = v(w) ? w : z, k = y.useMemo(() => (r == null ? void 0 : r.length) === 0, [r == null ? void 0 : r.length]), c = y.useMemo(
+    () => {
+      var e;
+      return (r == null ? void 0 : r.length) === ((e = o == null ? void 0 : o.filter((l) => !l.disabled)) == null ? void 0 : e.length);
+    },
+    [r == null ? void 0 : r.length, o]
+  ), D = y.useMemo(() => !k && !c, [c, k]), J = y.useMemo(() => {
+    const e = c ? "all" : k ? "none" : "some";
+    return typeof d == "string" ? d : typeof d == "function" ? d(e) : d ? p(e === "all" ? "table.filter.remove-all" : "table.filter.select-all") : "";
+  }, [p, d, c, k]), K = {
+    name: S,
+    inputType: i,
+    onChange: (e, l) => {
+      let t = r;
+      i === "checkbox" && t ? t = l ? Array.isArray(t) ? [...t, e] : [e] : Array.isArray(t) ? t.filter((V) => V !== e) : t : t = e, v() || N(Array.isArray(t) ? [...t] : t), a == null || a(t);
+    },
+    currentValue: r
+  }, O = F(I["tedi-choice-group"], R), Q = F(I["tedi-choice-group__inner"], b == null ? void 0 : b.className, {
+    [I["tedi-choice-group__inner--indented"]]: M && Y
+  }), U = () => {
+    var l;
+    const e = c ? [] : (l = o == null ? void 0 : o.filter((t) => !t.disabled)) == null ? void 0 : l.map((t) => t.value);
+    v() || N([...e]), a == null || a(e);
+  };
+  return /* @__PURE__ */ n(ne.Provider, { value: K, children: /* @__PURE__ */ _("fieldset", { ...W, className: O, id: s, name: S, "aria-describedby": L, children: [
+    h && typeof h == "string" ? /* @__PURE__ */ n(re, { id: s, label: h, required: T, hideLabel: $, renderWithoutLabel: !0 }) : /* @__PURE__ */ n("label", { htmlFor: s, children: h }),
+    /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(de, { children: o != null && o.length ? /* @__PURE__ */ _(Z, { children: [
+      M && /* @__PURE__ */ n(
+        oe,
+        {
+          id: `${s}-indeterminate`,
+          value: "indeterminate",
+          name: "indeterminate",
+          ...X,
+          label: J,
+          indeterminate: D,
+          checked: c,
+          onChange: U
+        }
+      ),
+      /* @__PURE__ */ n(
+        H,
+        {
+          direction: f,
+          gutterX: f === "row" && x === "segmented" ? 0 : 2,
+          gutterY: f === "row" && x === "segmented" ? 0 : 1,
+          gap: C === "default" && (G(B, "md") || f === "row") ? 1 : 0,
+          ...b,
+          className: Q,
+          role: i === "radio" ? "radiogroup" : void 0,
+          "aria-labelledby": i === "radio" ? s : void 0,
+          children: o.map((e) => /* @__PURE__ */ n(
+            j,
+            {
+              ...e,
+              color: q,
+              variant: C,
+              type: i,
+              layout: x,
+              showIndicator: P,
+              direction: f
+            },
+            e.id
+          ))
+        }
+      )
+    ] }) : /* @__PURE__ */ n("p", { children: p("table.filter.no-options") }) }) }),
+    m && /* @__PURE__ */ n(te, { ...m, id: L })
+  ] }) });
+};
+se.Item = j;
+export {
+  se as ChoiceGroup,
+  se as default
+};

package/src/tedi/components/form/choice-group/choice-group.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-choice-group":"tedi-choice-group-4908e385","tedi-choice-group__inner--indented":"tedi-choice-group__inner--indented-7210e5a8"};exports.default=e;

package/src/tedi/components/form/choice-group/choice-group.module.scss.es.js

@@ -0,0 +1,7 @@
+const e = {
+  "tedi-choice-group": "tedi-choice-group-4908e385",
+  "tedi-choice-group__inner--indented": "tedi-choice-group__inner--indented-7210e5a8"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/choice-group/choice-group.types.d.ts

@@ -0,0 +1,6 @@
+export type ChoiceGroupItemType = 'radio' | 'checkbox';
+export type ChoiceGroupItemVariant = 'default' | 'card';
+export type ChoiceGroupItemLayout = 'segmented' | 'separated';
+export type ChoiceGroupItemColor = 'primary' | 'secondary';
+export type ChoiceGroupIndeterminateState = 'none' | 'some' | 'all';
+export type ChoiceGroupValue = string | string[] | null;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),E=require("react"),F=require("../../../checkbox/checkbox.cjs.js"),L=require("../../../feedback-text/feedback-text.cjs.js"),R=require("../../../radio/radio.cjs.js"),S=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),H=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),O=require("../../../../layout/grid/col.cjs.js"),j=r=>{const{getCurrentBreakpointProps:q}=H.useBreakpointProps(r.defaultServerBreakpoint),{id:u,label:k,value:o,className:v,direction:m,disabled:l,colProps:y=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:N,helper:a,tooltip:B,type:s="radio",variant:n="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=q(r),{currentValue:d,name:b,onChange:f,inputType:I}=E.useContext(S.ChoiceGroupContext),i=Array.isArray(d)?d.includes(o):o===d,P=d===void 0?r.defaultChecked:i,g=(c,_)=>{f==null||f(c,_),p==null||p(c,_)},M=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),T=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${n}`],e.default[`tedi-choice-group-item--${n}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],s&&e.default[`tedi-choice-group-item--${s}`],{[e.default["tedi-choice-group-item--disabled"]]:l},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),w=s==="radio"?R.Radio:F.Checkbox,A=c=>{c.target.tagName!=="LABEL"&&!l&&n==="card"&&g(o,!i)};return t.jsx(O.Col,{...y,className:M,children:t.jsx("div",{className:T,onClick:A,children:n==="default"||C?t.jsx(w,{id:u,label:k,value:o,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:l,checked:i,defaultChecked:P,onChange:g,hideLabel:N,helper:a?{...a,className:h.default(e.default["tedi-choice-group-item__feedback-text"],a.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:u,value:o,name:b,type:I,disabled:l,checked:i,defaultChecked:d===void 0?r.defaultChecked:void 0,onChange:c=>g(o,c.target.checked),className:e.default["tedi-choice-group-item__input"],role:s==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:u,className:e.default["tedi-choice-group-item__label"],children:[k,a&&t.jsx(L.FeedbackText,{...a,id:u,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=j;exports.default=j;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../../../helpers';
+import { ColProps, Direction } from '../../../../layout/grid';
+import { ChoiceInputProps } from '../../../choice-input.types';
+import { ChoiceGroupItemColor, ChoiceGroupItemLayout, ChoiceGroupItemType, ChoiceGroupItemVariant } from '../../choice-group.types';
+interface ChoiceGroupItemBreakpointProps extends Omit<ChoiceInputProps, 'name'> {
+    direction?: Direction;
+    showIndicator?: boolean;
+    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    className?: string;
+    type?: ChoiceGroupItemType;
+    variant?: ChoiceGroupItemVariant;
+    color?: ChoiceGroupItemColor;
+    colProps?: ColProps;
+    layout?: ChoiceGroupItemLayout;
+}
+export interface ExtendedChoiceGroupItemProps extends BreakpointSupport<ChoiceGroupItemBreakpointProps> {
+    id: string;
+    label: string | React.ReactNode;
+    value: string;
+}
+export declare const ChoiceGroupItem: (props: ExtendedChoiceGroupItemProps) => React.ReactElement;
+export default ChoiceGroupItem;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.es.js

@@ -0,0 +1,91 @@
+import { jsx as a, jsxs as y, Fragment as L } from "react/jsx-runtime";
+import u from "../../../../../../../external/classnames/index.es.js";
+import P from "react";
+import { Checkbox as M } from "../../../checkbox/checkbox.es.js";
+import { FeedbackText as R } from "../../../feedback-text/feedback-text.es.js";
+import { Radio as T } from "../../../radio/radio.es.js";
+import { ChoiceGroupContext as H } from "../../choice-group-context.es.js";
+import e from "./choice-group-item.module.scss.es.js";
+import { useBreakpointProps as S } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Col as V } from "../../../../layout/grid/col.es.js";
+const ee = (d) => {
+  const { getCurrentBreakpointProps: x } = S(d.defaultServerBreakpoint), {
+    id: n,
+    label: C,
+    value: o,
+    className: v,
+    direction: p,
+    disabled: m,
+    colProps: $ = p === "column" ? { width: 12 } : { width: "auto" },
+    onChange: h,
+    hideLabel: B,
+    helper: c,
+    tooltip: j,
+    type: s = "radio",
+    variant: l = "default",
+    color: I = "primary",
+    layout: w,
+    showIndicator: k,
+    justifyContent: _ = "start"
+  } = x(d), { currentValue: r, name: N, onChange: f, inputType: A } = P.useContext(H), t = Array.isArray(r) ? r.includes(o) : o === r, E = r === void 0 ? d.defaultChecked : t, g = (i, b) => {
+    f == null || f(i, b), h == null || h(i, b);
+  }, F = u(
+    e[`tedi-choice-group-item--${w === "separated" ? "separated" : "segmented"}`],
+    p && e[`tedi-choice-group-item--${p}`]
+  ), G = u(
+    e["tedi-choice-group-item"],
+    e[`tedi-choice-group-item--${l}`],
+    e[`tedi-choice-group-item--${l}-${I}`],
+    k && e["tedi-choice-group-item--indicator"],
+    s && e[`tedi-choice-group-item--${s}`],
+    { [e["tedi-choice-group-item--disabled"]]: m },
+    { [e["tedi-choice-group-item--checked"]]: t },
+    { [`justify-content-${_}`]: _ }
+  );
+  return /* @__PURE__ */ a(V, { ...$, className: F, children: /* @__PURE__ */ a("div", { className: G, onClick: (i) => {
+    i.target.tagName !== "LABEL" && !m && l === "card" && g(o, !t);
+  }, children: l === "default" || k ? /* @__PURE__ */ a(
+    s === "radio" ? T : M,
+    {
+      id: n,
+      label: C,
+      value: o,
+      name: N,
+      className: u(e["tedi-choice-group-item__indicator"], v),
+      disabled: m,
+      checked: t,
+      defaultChecked: E,
+      onChange: g,
+      hideLabel: B,
+      helper: c ? { ...c, className: u(e["tedi-choice-group-item__feedback-text"], c.className) } : void 0,
+      tooltip: j,
+      "data-testid": "choice-group-item-indicator",
+      "aria-checked": t
+    }
+  ) : /* @__PURE__ */ y(L, { children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        id: n,
+        value: o,
+        name: N,
+        type: A,
+        disabled: m,
+        checked: t,
+        defaultChecked: r === void 0 ? d.defaultChecked : void 0,
+        onChange: (i) => g(o, i.target.checked),
+        className: e["tedi-choice-group-item__input"],
+        role: s === "radio" ? "radio" : void 0,
+        "aria-checked": t
+      }
+    ),
+    /* @__PURE__ */ y("label", { htmlFor: n, className: e["tedi-choice-group-item__label"], children: [
+      C,
+      c && /* @__PURE__ */ a(R, { ...c, id: n, className: e["tedi-choice-group-item__feedback-text"] })
+    ] })
+  ] }) }) });
+};
+export {
+  ee as ChoiceGroupItem,
+  ee as default
+};

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-choice-group-item":"tedi-choice-group-item-427c7527","tedi-choice-group-item--card":"tedi-choice-group-item--card-8fc3694a","tedi-choice-group-item--card__feedback-text":"tedi-choice-group-item--card__feedback-text-f124d2c4","tedi-choice-group-item__input":"tedi-choice-group-item__input-7f8978bd","tedi-choice-group-item--card__label":"tedi-choice-group-item--card__label-3706d8e1","tedi-choice-group-item--disabled":"tedi-choice-group-item--disabled-9e588377","tedi-choice-group-item__feedback-text":"tedi-choice-group-item__feedback-text-c4f883af","tedi-choice-group-item--card-primary":"tedi-choice-group-item--card-primary-17806082","tedi-choice-group-item--checkbox":"tedi-choice-group-item--checkbox-d8e2518f","tedi-choice-group-item--checked":"tedi-choice-group-item--checked-add34e3f","tedi-choice-group-item__indicator":"tedi-choice-group-item__indicator-72d3142f","tedi-choice-group-item__label":"tedi-choice-group-item__label-aa5aae03","tedi-choice-group-item--card-secondary":"tedi-choice-group-item--card-secondary-1ee614f7","tedi-choice-group-item--segmented":"tedi-choice-group-item--segmented-8d812ae2","tedi-choice-group-item--column":"tedi-choice-group-item--column-09c83229","tedi-choice-group-item--row":"tedi-choice-group-item--row-dd5ba42c","tedi-choice-group-item--separated":"tedi-choice-group-item--separated-e086464b","tedi-choice-group-item--radio":"tedi-choice-group-item--radio-2766bb38"};exports.default=e;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.module.scss.es.js

@@ -0,0 +1,23 @@
+const e = {
+  "tedi-choice-group-item": "tedi-choice-group-item-427c7527",
+  "tedi-choice-group-item--card": "tedi-choice-group-item--card-8fc3694a",
+  "tedi-choice-group-item--card__feedback-text": "tedi-choice-group-item--card__feedback-text-f124d2c4",
+  "tedi-choice-group-item__input": "tedi-choice-group-item__input-7f8978bd",
+  "tedi-choice-group-item--card__label": "tedi-choice-group-item--card__label-3706d8e1",
+  "tedi-choice-group-item--disabled": "tedi-choice-group-item--disabled-9e588377",
+  "tedi-choice-group-item__feedback-text": "tedi-choice-group-item__feedback-text-c4f883af",
+  "tedi-choice-group-item--card-primary": "tedi-choice-group-item--card-primary-17806082",
+  "tedi-choice-group-item--checkbox": "tedi-choice-group-item--checkbox-d8e2518f",
+  "tedi-choice-group-item--checked": "tedi-choice-group-item--checked-add34e3f",
+  "tedi-choice-group-item__indicator": "tedi-choice-group-item__indicator-72d3142f",
+  "tedi-choice-group-item__label": "tedi-choice-group-item__label-aa5aae03",
+  "tedi-choice-group-item--card-secondary": "tedi-choice-group-item--card-secondary-1ee614f7",
+  "tedi-choice-group-item--segmented": "tedi-choice-group-item--segmented-8d812ae2",
+  "tedi-choice-group-item--column": "tedi-choice-group-item--column-09c83229",
+  "tedi-choice-group-item--row": "tedi-choice-group-item--row-dd5ba42c",
+  "tedi-choice-group-item--separated": "tedi-choice-group-item--separated-e086464b",
+  "tedi-choice-group-item--radio": "tedi-choice-group-item--radio-2766bb38"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/choice-group/index.d.ts

@@ -0,0 +1,4 @@
+export * from './choice-group';
+export * from './choice-group-context';
+export * from './choice-group.types';
+export * from './components/choice-group-item/choice-group-item';

package/src/tedi/components/form/choice-input.types.d.ts

@@ -0,0 +1,63 @@
+import { FeedbackTextProps } from './feedback-text/feedback-text';
+export interface ChoiceInputProps {
+    /**
+     * ID property
+     */
+    id: string;
+    /**
+     * Label text
+     */
+    label: string | React.ReactNode;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+    /**
+     * Value property
+     */
+    value: string;
+    /**
+     * name of the input
+     */
+    name: string;
+    /**
+     * is the label hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * If the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * onChange handler
+     */
+    onChange?: (value: string, checked: boolean) => void;
+    /**
+     * Helper text displayed below the input.
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * If the check is controlled from outside the components
+     */
+    checked?: boolean;
+    /**
+     * If the check is checked by default
+     */
+    defaultChecked?: boolean;
+    /**
+     * If the item should be in hover state
+     */
+    hover?: boolean;
+    /**
+     * Provide content for tooltip.
+     */
+    tooltip?: string;
+    /**
+     *  Input size
+     */
+    size?: 'default' | 'large';
+    /**
+     * Whether the input is marked as invalid.
+     */
+    invalid?: boolean;
+}

package/src/tedi/components/form/feedback-text/feedback-text.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),t=require("./feedback-text.module.scss.cjs.js"),a=d=>{const{text:i,id:r,className:l,type:e="hint",position:s="left",...o}=d,c=e==="valid"||e==="error"?"alert":void 0,u=e==="error"||e==="valid"?"assertive":"polite";return n.jsx("div",{"data-name":"feedback-text",...o,id:r,className:f.default(t.default["tedi-feedback-text"],t.default[`tedi-feedback-text--${e}`],t.default[`tedi-feedback-text--${s}`],l),role:c,"aria-live":u,children:i})};exports.FeedbackText=a;exports.default=a;

package/src/tedi/components/form/feedback-text/feedback-text.d.ts

@@ -0,0 +1,29 @@
+export type FeedbackTextType = 'hint' | 'valid' | 'error';
+export type FeedbackTextPosition = 'left' | 'right';
+export interface FeedbackTextProps {
+    /**
+     * Helper text
+     */
+    text: string;
+    /**
+     * ID to reference the helper from aria-describedby attributes.
+     * If omitted, then the id might be set through a parent component.
+     */
+    id?: string;
+    /**
+     * Additional custom class.
+     */
+    className?: string;
+    /**
+     * Type of form-helper.
+     * @default hint
+     */
+    type?: FeedbackTextType;
+    /**
+     * Position of the helper.
+     * @default left
+     */
+    position?: FeedbackTextPosition;
+}
+export declare const FeedbackText: (props: FeedbackTextProps) => JSX.Element;
+export default FeedbackText;

package/src/tedi/components/form/feedback-text/feedback-text.es.js

@@ -0,0 +1,27 @@
+import { jsx as m } from "react/jsx-runtime";
+import f from "../../../../../external/classnames/index.es.js";
+import t from "./feedback-text.module.scss.es.js";
+const v = (a) => {
+  const { text: r, id: i, className: s, type: e = "hint", position: o = "left", ...d } = a, c = e === "valid" || e === "error" ? "alert" : void 0, l = e === "error" || e === "valid" ? "assertive" : "polite";
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-name": "feedback-text",
+      ...d,
+      id: i,
+      className: f(
+        t["tedi-feedback-text"],
+        t[`tedi-feedback-text--${e}`],
+        t[`tedi-feedback-text--${o}`],
+        s
+      ),
+      role: c,
+      "aria-live": l,
+      children: r
+    }
+  );
+};
+export {
+  v as FeedbackText,
+  v as default
+};

package/src/tedi/components/form/feedback-text/feedback-text.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-feedback-text":"tedi-feedback-text-832e790c","tedi-feedback-text--valid":"tedi-feedback-text--valid-406b61a2","tedi-feedback-text--error":"tedi-feedback-text--error-06f6742d","tedi-feedback-text--left":"tedi-feedback-text--left-7591cb38","tedi-feedback-text--right":"tedi-feedback-text--right-df4a0ff5"};exports.default=e;

package/src/tedi/components/form/feedback-text/feedback-text.module.scss.es.js

@@ -0,0 +1,10 @@
+const e = {
+  "tedi-feedback-text": "tedi-feedback-text-832e790c",
+  "tedi-feedback-text--valid": "tedi-feedback-text--valid-406b61a2",
+  "tedi-feedback-text--error": "tedi-feedback-text--error-06f6742d",
+  "tedi-feedback-text--left": "tedi-feedback-text--left-7591cb38",
+  "tedi-feedback-text--right": "tedi-feedback-text--right-df4a0ff5"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),F=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),y=require("../../../helpers/hooks/use-file-upload.cjs.js"),u=require("../../base/icon/icon.cjs.js"),C=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),D=require("../form-label/form-label.cjs.js"),t=require("./file-dropzone.module.scss.cjs.js"),N=require("../../cards/card/card.cjs.js"),S=require("../../cards/card/card-content/card-content.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),I=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),L=require("../../layout/grid/row.cjs.js"),m=require("../../layout/grid/col.cjs.js"),x=o=>{const{getLabel:a}=k.useLabels(),{label:p=a("file-dropzone.label"),className:z,disabled:s=!1,helper:i,id:d}=o,{innerFiles:r,uploadErrorHelper:n,onFileChange:g,onFileRemove:b}=y.useFileUpload(o),{getRootProps:j,getInputProps:v,isDragActive:q}=F.useDropzone({accept:o.accept?{"application/*":[o.accept]}:void 0,multiple:o.multiple,maxSize:o.maxSize?o.maxSize*1024**2:void 0,onDrop:l=>{g({target:{files:l}})}}),_=h.default(t.default["tedi-file-dropzone"],{[t.default["tedi-file-dropzone--disabled"]]:s},{[t.default["tedi-file-dropzone--invalid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="error"},{[t.default["tedi-file-dropzone--valid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="valid"},{[t.default["tedi-file-dropzone--drop-over"]]:q},z),c=i?(i==null?void 0:i.id)??`${d}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...j(),className:_,children:[e.jsx("input",{...v()}),e.jsxs("div",{className:t.default["tedi-file-dropzone__label-wrapper"],children:[e.jsx(u.Icon,{color:s?"tertiary":"secondary",size:24,name:"attach_file"}),e.jsx(D.FormLabel,{id:d,label:p,className:t.default["tedi-file-dropzone__label"]})]})]}),i?e.jsx(f.FeedbackText,{...i,id:c}):n?e.jsx(f.FeedbackText,{...n,id:c}):null,!!r.length&&e.jsx(I.VerticalSpacing,{size:.5,className:t.default["tedi-file-dropzone__file-list"],children:r.map(l=>e.jsx(N.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(S.CardContent,{padding:{bottom:.5,left:.5,right:.5,top:.5},children:e.jsxs(L.Row,{alignItems:"center",children:[e.jsxs(m.Col,{className:t.default["tedi-file-dropzone__file-name"],children:[l.name," ",l.isValid===!1&&e.jsx(u.Icon,{name:"info",color:"danger",display:"inline",size:18})]}),e.jsx(m.Col,{width:"auto",children:e.jsx(C.ClosingButton,{title:a("clear"),onClick:()=>b(l)})})]})})},l.id||l.name))})]})};exports.FileDropzone=x;exports.default=x;

package/src/tedi/components/form/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,12 @@
+import { UseFileUploadProps } from '../../../helpers/hooks/use-file-upload';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FormLabelProps } from '../form-label/form-label';
+export interface FileDropzoneProps extends Omit<FormLabelProps, 'size' | 'hideLabel'>, UseFileUploadProps {
+    className?: string;
+    name: string;
+    label: string;
+    helper?: FeedbackTextProps;
+    disabled?: boolean;
+}
+export declare const FileDropzone: (props: FileDropzoneProps) => JSX.Element;
+export default FileDropzone;

package/src/tedi/components/form/file-dropzone/file-dropzone.es.js

@@ -0,0 +1,76 @@
+import { jsxs as r, Fragment as N, jsx as i } from "react/jsx-runtime";
+import x from "../../../../../external/classnames/index.es.js";
+import { useDropzone as C } from "../../../../../external/react-dropzone/dist/es/index.es.js";
+import { useFileUpload as D } from "../../../helpers/hooks/use-file-upload.es.js";
+import { Icon as p } from "../../base/icon/icon.es.js";
+import { ClosingButton as I } from "../../buttons/closing-button/closing-button.es.js";
+import { FeedbackText as f } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as S } from "../form-label/form-label.es.js";
+import o from "./file-dropzone.module.scss.es.js";
+import { Card as k } from "../../cards/card/card.es.js";
+import { CardContent as w } from "../../cards/card/card-content/card-content.es.js";
+import { useLabels as L } from "../../../providers/label-provider/use-labels.es.js";
+import { VerticalSpacing as R } from "../../layout/vertical-spacing/vertical-spacing.es.js";
+import { Row as V } from "../../layout/grid/row.es.js";
+import { Col as z } from "../../layout/grid/col.es.js";
+const Y = (l) => {
+  const { getLabel: n } = L(), { label: g = n("file-dropzone.label"), className: b, disabled: d = !1, helper: e, id: m } = l, { innerFiles: s, uploadErrorHelper: t, onFileChange: v, onFileRemove: h } = D(l), { getRootProps: u, getInputProps: _, isDragActive: y } = C({
+    accept: l.accept ? { "application/*": [l.accept] } : void 0,
+    multiple: l.multiple,
+    maxSize: l.maxSize ? l.maxSize * 1024 ** 2 : void 0,
+    onDrop: (a) => {
+      v({
+        target: { files: a }
+      });
+    }
+  }), F = x(
+    o["tedi-file-dropzone"],
+    { [o["tedi-file-dropzone--disabled"]]: d },
+    { [o["tedi-file-dropzone--invalid"]]: ((t == null ? void 0 : t.type) || (e == null ? void 0 : e.type)) === "error" },
+    { [o["tedi-file-dropzone--valid"]]: ((t == null ? void 0 : t.type) || (e == null ? void 0 : e.type)) === "valid" },
+    { [o["tedi-file-dropzone--drop-over"]]: y },
+    b
+  ), c = e ? (e == null ? void 0 : e.id) ?? `${m}-helper` : void 0;
+  return /* @__PURE__ */ r(N, { children: [
+    /* @__PURE__ */ r("div", { ...u(), className: F, children: [
+      /* @__PURE__ */ i("input", { ..._() }),
+      /* @__PURE__ */ r("div", { className: o["tedi-file-dropzone__label-wrapper"], children: [
+        /* @__PURE__ */ i(p, { color: d ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
+        /* @__PURE__ */ i(S, { id: m, label: g, className: o["tedi-file-dropzone__label"] })
+      ] })
+    ] }),
+    e ? /* @__PURE__ */ i(f, { ...e, id: c }) : t ? /* @__PURE__ */ i(f, { ...t, id: c }) : null,
+    !!s.length && /* @__PURE__ */ i(R, { size: 0.5, className: o["tedi-file-dropzone__file-list"], children: s.map((a) => /* @__PURE__ */ i(
+      k,
+      {
+        background: a.isValid === !1 ? "danger-primary" : "tertiary",
+        borderless: !0,
+        className: o["tedi-file-dropzone__file-item"],
+        children: /* @__PURE__ */ i(
+          w,
+          {
+            padding: {
+              bottom: 0.5,
+              left: 0.5,
+              right: 0.5,
+              top: 0.5
+            },
+            children: /* @__PURE__ */ r(V, { alignItems: "center", children: [
+              /* @__PURE__ */ r(z, { className: o["tedi-file-dropzone__file-name"], children: [
+                a.name,
+                " ",
+                a.isValid === !1 && /* @__PURE__ */ i(p, { name: "info", color: "danger", display: "inline", size: 18 })
+              ] }),
+              /* @__PURE__ */ i(z, { width: "auto", children: /* @__PURE__ */ i(I, { title: n("clear"), onClick: () => h(a) }) })
+            ] })
+          }
+        )
+      },
+      a.id || a.name
+    )) })
+  ] });
+};
+export {
+  Y as FileDropzone,
+  Y as default
+};

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-name":"tedi-file-dropzone__file-name-f9bf2a63"};exports.default=e;

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js

@@ -0,0 +1,14 @@
+const e = {
+  "tedi-file-dropzone": "tedi-file-dropzone-70698e52",
+  "tedi-file-dropzone__label-wrapper": "tedi-file-dropzone__label-wrapper-78360685",
+  "tedi-file-dropzone__label": "tedi-file-dropzone__label-5c15bc34",
+  "tedi-file-dropzone--disabled": "tedi-file-dropzone--disabled-0e01143d",
+  "tedi-file-dropzone--invalid": "tedi-file-dropzone--invalid-159cce6d",
+  "tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
+  "tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
+  "tedi-file-dropzone__file-list": "tedi-file-dropzone__file-list-c1ededa3",
+  "tedi-file-dropzone__file-name": "tedi-file-dropzone__file-name-f9bf2a63"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/file-upload/examples/multiple-handled.d.ts

@@ -0,0 +1,3 @@
+import { StoryFn } from '@storybook/react';
+import FileUpload from '../file-upload';
+export declare const MultipleHandledTemplate: StoryFn<typeof FileUpload>;

package/src/tedi/components/form/file-upload/file-upload.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),D=require("react"),P=require("../../../helpers/hooks/use-file-upload.cjs.js"),V=require("../../base/typography/text/text.cjs.js"),v=require("../../buttons/button/button.cjs.js"),W=require("../../buttons/closing-button/closing-button.cjs.js"),A=require("../form-label/form-label.cjs.js"),E=require("../../misc/separator/separator.cjs.js"),G=require("../../tags/tag/tag.cjs.js"),q=require("../feedback-text/feedback-text.cjs.js"),l=require("./file-upload.module.scss.cjs.js"),J=require("../../../providers/label-provider/use-labels.cjs.js"),y=require("../../../helpers/hooks/use-breakpoint.cjs.js"),K=require("../../layout/grid/row.cjs.js"),F=require("../../layout/grid/col.cjs.js"),B=C=>{const{getLabel:c}=J.useLabels(),{id:n,name:k,accept:x,multiple:g,onChange:f,className:L,defaultFiles:N,onDelete:T,hasClearButton:U=!0,files:o,readOnly:m,disabled:s=!1,maxSize:w,validateIndividually:M=!1,size:r="default",helper:i,...R}=C,{innerFiles:h,uploadErrorHelper:a,onFileChange:S,onFileRemove:z,handleClear:b}=P.useFileUpload({accept:x,maxSize:w,multiple:g,validateIndividually:M,defaultFiles:N,onChange:f,onDelete:T,files:o}),I=y.useBreakpoint(),O=_.default(l.default["tedi-file-upload"],{[l.default["tedi-file-upload--disabled"]]:s},L),u=i?(i==null?void 0:i.id)??`${n}-helper`:void 0,d=D.useMemo(()=>o&&f?o:h,[o,h,f]),$=(t,p)=>e.jsx("li",{children:e.jsx(G.Tag,{color:t.isValid===!1?"danger":"primary",onClose:!t.isLoading&&!s&&!m?()=>z(t):void 0,isLoading:t.isLoading,children:t.name})},p),j=()=>d.length>1?e.jsx("ul",{className:l.default["tedi-file-upload__items"],children:d.map((t,p)=>$(t,p))}):d.length===1?e.jsx(V.Text,{className:l.default["tedi-file-upload__items"],children:d[0].name}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:l.default["tedi-file-upload__label-wrapper"],children:e.jsx(A.FormLabel,{id:n,...R,renderWithoutLabel:m,className:l.default["tedi-file-upload__label"],size:r})}),m?j():e.jsx("div",{className:_.default(l.default["tedi-file-upload__container"],{[l.default["tedi-file-upload--disabled"]]:s,[l.default["tedi-file-upload--error"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="error",[l.default["tedi-file-upload--valid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="valid"},{[l.default[`tedi-file-upload__container--${r}`]]:r}),children:e.jsx("div",{className:l.default["tedi-file-upload__content"],children:e.jsxs(K.Row,{children:[e.jsx(F.Col,{className:"display-flex",children:j()}),e.jsx(F.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:O,children:[e.jsx("input",{id:n,type:"file",name:k,accept:x,onChange:S,multiple:g,disabled:s,"aria-invalid":!!a}),U&&d.length>0&&!s&&e.jsxs(e.Fragment,{children:[y.isBreakpointBelow(I,"md")?e.jsx(v.Button,{visualType:"neutral",iconLeft:"close","aria-describedby":u,disabled:s,onClick:b,className:l.default["tedi-file-upload__button"],children:c("clear")}):e.jsx(W.ClosingButton,{onClick:b,size:"medium",title:c("clear")}),e.jsx(E.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(v.Button,{visualType:"neutral",iconLeft:"file_upload","aria-describedby":u,disabled:s,onClick:()=>{var t;return(t=document.getElementById(n))==null?void 0:t.click()},className:l.default["tedi-file-upload__button"],size:r,children:c("file-upload.add")})]})})]})})}),i?e.jsx(q.FeedbackText,{...i,id:u}):a?e.jsx(q.FeedbackText,{...a,id:u}):null]})};exports.FileUpload=B;exports.default=B;

package/src/tedi/components/form/file-upload/file-upload.d.ts

@@ -0,0 +1,67 @@
+import { FileUploadFile } from '../../../helpers/hooks/use-file-upload';
+import { FormLabelProps } from '../../form/form-label/form-label';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+export interface FileUploadProps extends FormLabelProps {
+    /**
+     * Additional class names for styling the component.
+     */
+    className?: string;
+    /**
+     * The name of the file input field, used for form submission and accessibility.
+     */
+    name: string;
+    /**
+     * A helper text or error message to display below the file upload field.
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * Specifies the allowed file types (e.g., "image/png, image/jpeg").
+     */
+    accept?: string;
+    /**
+     * Allows multiple file selection if `true`. Defaults to `false`.
+     */
+    multiple?: boolean;
+    /**
+     * Callback function triggered when files are added or changed.
+     */
+    onChange?: (files: FileUploadFile[]) => void;
+    /**
+     * An array of preloaded files that appear in the upload field by default.
+     */
+    defaultFiles?: FileUploadFile[];
+    /**
+     * Callback function triggered when a file is removed.
+     */
+    onDelete?: (file: FileUploadFile) => void;
+    /**
+     * Determines whether a "Clear" button is shown to remove all files.
+     */
+    hasClearButton?: boolean;
+    /**
+     * A controlled list of uploaded files. If provided, `onChange` should be used to update them.
+     */
+    files?: FileUploadFile[];
+    /**
+     * If `true`, prevents file selection and removal, making the field read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Disables the file upload field, preventing interactions.
+     */
+    disabled?: boolean;
+    /**
+     * Maximum allowed file size in bytes.
+     */
+    maxSize?: number;
+    /**
+     * If `true`, validates each file separately instead of rejecting all at once.
+     */
+    validateIndividually?: boolean;
+    /**
+     * Determines the visual size of the file upload field. Defaults to `"default"`.
+     */
+    size?: 'small' | 'default';
+}
+export declare const FileUpload: (props: FileUploadProps) => JSX.Element;
+export default FileUpload;