@telia/teddy 0.0.3 → 0.0.5

package/dist/components/text-field/text-field.d.ts

@@ -1,11 +1,15 @@
-import React from 'react';
-import { HelperTextProps } from '../helper-text';
+import { InputGroupProps } from '../input';
 import { LabelProps } from '../label';
+import { HelperTextProps } from '../helper-text';
+import { default as React } from 'react';
+
 type ListOfErrors = Array<string | null | undefined> | null | undefined;
 type TextFieldContextValue = {
     id: string;
     errorId?: string;
+    setErrorId: React.Dispatch<React.SetStateAction<string | undefined>>;
     helperTextId?: string;
+    setHelperTextId: React.Dispatch<React.SetStateAction<string | undefined>>;
     disabled?: boolean;
     errors?: ListOfErrors;
     readOnly?: boolean;
@@ -13,12 +17,7 @@ type TextFieldContextValue = {
     isLoading?: boolean;
     isRequired?: boolean;
 };
-type Input = React.ComponentPropsWithoutRef<'input'>;
-type RootInputProps<T extends Input['value']> = Omit<Input, 'value'> & {
-    value?: T;
-    onValueChange?: (value: T) => void;
-};
-type TextFieldRootProps<T extends Input['value']> = React.ComponentPropsWithoutRef<'div'> & {
+type TextFieldRootProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Whether the input is disabled.
      */
@@ -40,18 +39,18 @@ type TextFieldRootProps<T extends Input['value']> = React.ComponentPropsWithoutR
      * Whether the input is required.
      */
     isRequired?: boolean;
-} & RootInputProps<T>;
-type TextFieldInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'id' | 'disabled' | 'readOnly' | 'required'> & {};
-type TextFieldDecoratorProps = React.ComponentPropsWithoutRef<'div'> & {};
+};
+type TextFieldInputProps = Omit<InputGroupProps['Input'], 'id' | 'disabled' | 'readOnly' | 'required'> & {};
+type TextFieldInputGroupProps = InputGroupProps['Root'] & {};
+type TextFieldIndicatorProps = InputGroupProps['Indicator'];
 type TextFieldLabelProps = LabelProps;
 type TextFieldHelperTextProps = HelperTextProps & {};
 type TextFieldErrorList = Omit<React.ComponentPropsWithoutRef<'ul'>, 'children'> & {
     children?: ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode) | React.ReactNode;
 };
 declare const TextFieldErrorList: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, "children"> & {
-    children?: React.ReactNode | ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode);
+    children?: ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode) | React.ReactNode;
 } & React.RefAttributes<HTMLUListElement>>;
-type TextFieldIndicatorProps = React.ComponentPropsWithoutRef<'svg'>;
 export declare const TextField: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
      * Whether the input is disabled.
@@ -74,26 +73,27 @@ export declare const TextField: React.ForwardRefExoticComponent<Omit<React.Detai
      * Whether the input is required.
      */
     isRequired?: boolean | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value"> & {
-    value?: string | number | readonly string[] | undefined;
-    onValueChange?: ((value: string | number | readonly string[] | undefined) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "disabled" | "id" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-label").LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    Input: React.ForwardRefExoticComponent<Omit<import('../input').InputProps, "id" | "disabled" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-label').LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
         disabled?: boolean | undefined;
+        isRequired?: boolean | undefined;
     } & React.RefAttributes<HTMLLabelElement>>;
-    Decorator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     HelperText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     ErrorList: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, "children"> & {
-        children?: React.ReactNode | ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode);
+        children?: ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode) | React.ReactNode;
     } & React.RefAttributes<HTMLUListElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+        isLoading?: boolean | undefined;
+        isValid?: boolean | undefined;
+    } & React.RefAttributes<SVGSVGElement>>;
 };
-export type TextFieldProps<T extends Input['value']> = {
-    Root: TextFieldRootProps<T>;
+export type TextFieldProps = {
+    Root: TextFieldRootProps;
     Input: TextFieldInputProps;
     Label: TextFieldLabelProps;
-    Decorator: TextFieldDecoratorProps;
+    Group: TextFieldInputGroupProps;
     HelperText: TextFieldHelperTextProps;
     ErrorList: TextFieldErrorList;
     Indicator: TextFieldIndicatorProps;

package/dist/components/text-field/text-field.js

@@ -1,141 +1,118 @@
-import "../../assets/text-field.css";
-import { jsx as s, jsxs as v } from "react/jsx-runtime";
-import { c } from "../../clsx-DB4S2d7J.js";
-import a from "react";
-import { FieldErrorText as x } from "../field-error-text/field-error-text.js";
-import { HelperText as L } from "../helper-text/helper-text.js";
-import "../../assets/f2a2f391a886d395.svg";
-import { Icon as E } from "../icon/icon.js";
-import { Label as O } from "../label/label.js";
-import { Spinner as P } from "../spinner/spinner.js";
-const A = "_fadeInAnimation_370v0_1", w = "_scaleInAnimation_370v0_1", l = {
-  "teddy-text-field": "_teddy-text-field_370v0_17",
-  "teddy-text-field__frame": "_teddy-text-field__frame_370v0_23",
-  "teddy-text-field__input": "_teddy-text-field__input_370v0_30",
-  "teddy-text-field__decorator": "_teddy-text-field__decorator_370v0_47",
-  "teddy-text-field__decorator--disabled": "_teddy-text-field__decorator--disabled_370v0_54",
-  "teddy-text-field__decorator--read-only": "_teddy-text-field__decorator--read-only_370v0_54",
-  "teddy-text-field__decorator--error": "_teddy-text-field__decorator--error_370v0_68",
-  "teddy-text-field__decorator--valid": "_teddy-text-field__decorator--valid_370v0_71",
-  "teddy-text-field__indicator": "_teddy-text-field__indicator_370v0_74",
-  fadeInAnimation: A,
-  scaleInAnimation: w,
-  "teddy-text-field__error-list": "_teddy-text-field__error-list_370v0_80"
-}, n = "teddy-text-field", u = a.createContext(void 0), I = a.forwardRef(function({ className: i, children: r, readOnly: d, disabled: t, errors: e, isValid: o, isLoading: _, isRequired: f, ...m }, $) {
-  const h = a.useId(), p = m.id || h, R = c([l[n]], i), D = e != null && e.length ? `${p}-error` : void 0;
-  return /* @__PURE__ */ s("div", { ...m, ref: $, className: R, children: /* @__PURE__ */ s(
-    u.Provider,
+import '../../assets/text-field.css';
+import { jsx as o, jsxs as H } from "react/jsx-runtime";
+import { c as u } from "../../clsx-DB4S2d7J.js";
+import i from "react";
+import { FieldErrorText as T } from "../field-error-text/field-error-text.js";
+import { HelperText as $ } from "../helper-text/helper-text.js";
+import { Label as j } from "../label/label.js";
+import { InputGroup as I } from "../input/input.js";
+const q = "_fadeInAnimation_1i091_1", G = "_scaleInAnimation_1i091_1", p = {
+  "teddy-text-field": "_teddy-text-field_1i091_17",
+  "teddy-text-field__error-list": "_teddy-text-field__error-list_1i091_23",
+  fadeInAnimation: q,
+  scaleInAnimation: G
+}, m = "teddy-text-field", f = i.createContext(void 0), _ = i.forwardRef(
+  ({ className: t, children: d, readOnly: e, disabled: r, errors: a, isValid: s, isLoading: l, isRequired: n, ...c }, N) => {
+    const R = i.useId(), h = c.id || R, C = u([p[m]], t), [E, g] = i.useState(void 0), [w, A] = i.useState(void 0);
+    return /* @__PURE__ */ o("div", { ...c, ref: N, className: C, children: /* @__PURE__ */ o(
+      f.Provider,
+      {
+        value: {
+          errors: a,
+          id: h,
+          errorId: w,
+          setErrorId: A,
+          helperTextId: E,
+          setHelperTextId: g,
+          disabled: r,
+          readOnly: e,
+          isValid: s,
+          isLoading: l,
+          isRequired: n
+        },
+        children: d
+      }
+    ) });
+  }
+);
+_.displayName = "TextField";
+const y = i.forwardRef((t, d) => {
+  var a;
+  const e = i.useContext(f), r = e == null ? void 0 : e.id;
+  return /* @__PURE__ */ o(
+    I.Input,
     {
-      value: {
-        errors: e,
-        id: p,
-        errorId: D,
-        disabled: t,
-        readOnly: d,
-        isValid: o,
-        isLoading: _,
-        isRequired: f
-      },
-      children: r
-    }
-  ) });
-});
-I.displayName = "TextFieldRoot";
-const T = a.forwardRef(
-  ({ className: i, ...r }, d) => {
-    const t = a.useContext(F), e = a.useContext(u), o = c([l[`${n}__input`]], i), _ = t !== void 0, f = e == null ? void 0 : e.id, m = {
-      "aria-invalid": e != null && e.errorId ? !0 : void 0,
-      "aria-describedby": e == null ? void 0 : e.errorId,
-      id: f,
-      className: o,
+      ...t,
+      "aria-describedby": [e == null ? void 0 : e.errorId, e == null ? void 0 : e.helperTextId].filter(Boolean).join(" "),
       disabled: e == null ? void 0 : e.disabled,
       readOnly: e == null ? void 0 : e.readOnly,
-      required: e == null ? void 0 : e.isRequired
-    };
-    return _ ? /* @__PURE__ */ s("input", { ...r, ...m, ref: d }) : /* @__PURE__ */ s(y, { children: /* @__PURE__ */ s("input", { ...r, ...m, ref: d }) });
+      required: e == null ? void 0 : e.isRequired,
+      isLoading: e == null ? void 0 : e.isLoading,
+      validationState: e != null && e.isValid ? "valid" : (a = e == null ? void 0 : e.errors) != null && a.length ? "invalid" : void 0,
+      id: r,
+      ref: d
+    }
+  );
+});
+y.displayName = "TextField.Input";
+const F = i.forwardRef((t, d) => /* @__PURE__ */ o(I, { ...t, ref: d }));
+F.displayName = "TextField.InputGroup";
+const b = i.forwardRef(
+  (t, d) => {
+    const e = i.useContext(f);
+    return /* @__PURE__ */ o(I.Indicator, { isValid: e == null ? void 0 : e.isValid, isLoading: e == null ? void 0 : e.isLoading, ...t, ref: d });
   }
 );
-T.displayName = "TextFieldInput";
-function H(i) {
-  const r = i == null ? void 0 : i.target;
-  if (r.closest("input, button, a"))
-    return;
-  const d = [...i.currentTarget.getElementsByTagName("input")].find((_) => _);
-  if (!d)
-    return;
-  const o = (d.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : d.value.length;
-  requestAnimationFrame(() => {
-    try {
-      d.setSelectionRange(o, o);
-    } finally {
-      d.focus();
-    }
-  });
-}
-const F = a.createContext(void 0), y = a.forwardRef(
-  ({ className: i, children: r, ...d }, t) => {
-    const e = a.useContext(u), o = c(
-      [l[`${n}__decorator`]],
+b.displayName = "TextField.Indicator";
+const v = i.forwardRef(
+  ({ className: t, ...d }, e) => {
+    const r = i.useContext(f), a = u([p[`${m}__label`]], t), s = d.id || (r == null ? void 0 : r.id);
+    return /* @__PURE__ */ o(
+      j,
       {
-        [l[`${n}__decorator--disabled`]]: e == null ? void 0 : e.disabled,
-        [l[`${n}__decorator--read-only`]]: e == null ? void 0 : e.readOnly,
-        [l[`${n}__decorator--error`]]: e == null ? void 0 : e.errorId,
-        [l[`${n}__decorator--valid`]]: e == null ? void 0 : e.isValid
-      },
-      i
+        ...d,
+        isRequired: r == null ? void 0 : r.isRequired,
+        htmlFor: s,
+        disabled: r == null ? void 0 : r.disabled,
+        ref: e,
+        className: a
+      }
     );
-    return /* @__PURE__ */ v("div", { ...d, onPointerDown: H, ref: t, className: o, children: [
-      /* @__PURE__ */ s(F.Provider, { value: !0, children: r }),
-      /* @__PURE__ */ s("div", { className: l[`${n}__frame`] })
-    ] });
-  }
-);
-y.displayName = "TextFieldDecorator";
-const N = a.forwardRef(
-  ({ className: i, ...r }, d) => {
-    const t = c([l[`${n}__label`]], i), e = a.useContext(u), o = r.id || (e == null ? void 0 : e.id);
-    return /* @__PURE__ */ s(O, { ...r, htmlFor: o, disabled: e == null ? void 0 : e.disabled, ref: d, className: t });
-  }
-);
-N.displayName = "TextFieldLabel";
-const b = a.forwardRef(
-  ({ className: i, ...r }, d) => {
-    const t = c([l[`${n}__help-text`]], i);
-    return /* @__PURE__ */ s(L, { ...r, ref: d, className: t });
   }
 );
-b.displayName = "TextFieldHelperText";
-const C = a.forwardRef(
-  ({ className: i, children: r, ...d }, t) => {
-    var _;
-    const e = c([l[`${n}__error-list`]], i), o = a.useContext(u);
-    return !o || !o.errors ? null : /* @__PURE__ */ s("ul", { id: o.errorId, "aria-live": "assertive", ...d, ref: t, className: e, children: typeof r == "function" ? r({ errors: o.errors }) : r || ((_ = o.errors) == null ? void 0 : _.map((f) => /* @__PURE__ */ s(x, { asChild: !0, children: /* @__PURE__ */ v("li", { children: [
-      /* @__PURE__ */ s(x.Indicator, {}),
-      f
-    ] }) }, f))) });
+v.displayName = "TextField.Label";
+const x = i.forwardRef(
+  ({ className: t, ...d }, e) => {
+    const r = i.useContext(f), a = u([p[`${m}__help-text`]], t);
+    return i.useLayoutEffect(() => {
+      r == null || r.setHelperTextId(`${r.id}-helper-text`);
+    }, [r]), /* @__PURE__ */ o($, { id: r == null ? void 0 : r.helperTextId, ...d, ref: e, className: a });
   }
 );
-C.displayName = "TextFieldErrorList";
-const g = a.forwardRef(
-  ({ className: i, ...r }, d) => {
-    const t = a.useContext(u);
-    if (!(t != null && t.isValid) && !(t != null && t.isLoading))
-      return null;
-    if (!(t != null && t.isValid) && (t != null && t.isLoading))
-      return /* @__PURE__ */ s(P, { className: i, size: "xs", ...r, ref: d });
-    const e = c([l[`${n}__indicator`]], i);
-    return /* @__PURE__ */ s(E, { ...r, size: "md", name: "check-circle-filled", className: e, ref: d });
+x.displayName = "TextField.HelperText";
+const L = i.forwardRef(
+  ({ className: t, children: d, ...e }, r) => {
+    const a = u([p[`${m}__error-list`]], t), s = i.useContext(f), l = s == null ? void 0 : s.errors;
+    return i.useLayoutEffect(() => {
+      if (!s)
+        return;
+      const n = l != null && l.length ? `${s.id}-error` : void 0;
+      s == null || s.setErrorId(n);
+    }, [l, s]), !s || !s.errors ? null : /* @__PURE__ */ o("ul", { id: s.errorId, "aria-live": "assertive", ...e, ref: r, className: a, children: typeof d == "function" ? d({ errors: l }) : d || (l == null ? void 0 : l.map((n) => /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ H("li", { children: [
+      /* @__PURE__ */ o(T.Indicator, {}),
+      n
+    ] }) }, n))) });
   }
 );
-g.displayName = "TextFieldIndicator";
-const J = Object.assign(I, {
-  Input: T,
-  Label: N,
-  Decorator: y,
-  HelperText: b,
-  ErrorList: C,
-  Indicator: g
+L.displayName = "TextField.ErrorList";
+const D = Object.assign(_, {
+  Input: y,
+  Label: v,
+  InputGroup: F,
+  HelperText: x,
+  ErrorList: L,
+  Indicator: b
 });
 export {
-  J as TextField
+  D as TextField
 };

package/dist/components/text-spacing/index.d.ts

@@ -0,0 +1,2 @@
+export { TextSpacing } from './text-spacing';
+export type { TextSpacingProps } from './text-spacing';

package/dist/components/text-spacing/index.js

@@ -0,0 +1,4 @@
+import { TextSpacing as p } from "./text-spacing.js";
+export {
+  p as TextSpacing
+};

package/dist/components/text-spacing/text-spacing.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * TextSpacing
+ * -----------------------------------------------------------------------------------------------*/
+type TextSpacingProps = React.ComponentPropsWithoutRef<'div'> & {
+    asChild?: boolean;
+};
+/**
+ * TextSpacing is used to add spacing between text elements.
+ * Wrap the elements you want to add spacing in the TextSpacing component.
+ * The spacing will be applied to Teddy's Text and Heading components.
+ * https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=9470-27984&mode=design&t=vJa9KJPym42lrLT9-4
+ */
+declare const TextSpacing: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { TextSpacing };
+export type { TextSpacingProps };

package/dist/components/text-spacing/text-spacing.js

@@ -0,0 +1,17 @@
+import '../../assets/text-spacing.css';
+import { jsx as p } from "react/jsx-runtime";
+import { c as d } from "../../clsx-DB4S2d7J.js";
+import m from "react";
+import { $ as i } from "../../index-DpfSJps6.js";
+const n = {
+  "teddy-text-spacing": "_teddy-text-spacing_dwbo8_1"
+}, f = "teddy-text-spacing", x = m.forwardRef(
+  ({ className: t, asChild: e = !1, children: s, ...c }, o) => {
+    const a = e ? i : "div", r = d([n[`${f}`]], t);
+    return /* @__PURE__ */ p(a, { ...c, ref: o, className: r, children: s });
+  }
+);
+x.displayName = "TextSpacing";
+export {
+  x as TextSpacing
+};

package/dist/components/visually-hidden/index.d.ts

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from './visually-hidden';
+export type { VisuallyHiddenProps } from './visually-hidden';

package/dist/components/visually-hidden/index.js

@@ -0,0 +1,4 @@
+import { VisuallyHidden as i } from "./visually-hidden.js";
+export {
+  i as VisuallyHidden
+};

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+type VisuallyHiddenProps = React.ComponentPropsWithoutRef<'span'> & {
+    visibleOnFocus?: boolean;
+    asChild?: boolean;
+};
+/**
+ * This component is used to hide content visually, but still accessible to screen readers
+ * */
+declare const VisuallyHidden: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    visibleOnFocus?: boolean | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { VisuallyHidden };
+export type { VisuallyHiddenProps };

package/dist/components/visually-hidden/visually-hidden.js

@@ -0,0 +1,24 @@
+import '../../assets/visually-hidden.css';
+import { jsx as r } from "react/jsx-runtime";
+import { c as n } from "../../clsx-DB4S2d7J.js";
+import y from "react";
+import { $ as u } from "../../index-DpfSJps6.js";
+const e = {
+  "teddy-visually-hidden": "_teddy-visually-hidden_15nus_1",
+  "teddy-visually-hidden--focusable": "_teddy-visually-hidden--focusable_15nus_15"
+}, d = "teddy-visually-hidden", f = y.forwardRef(
+  ({ className: a, visibleOnFocus: s, asChild: l, ...o }, t) => {
+    const c = l ? u : "span", i = n(
+      {
+        [e[`${d}`]]: !s,
+        [e[`${d}--focusable`]]: s
+      },
+      a
+    );
+    return /* @__PURE__ */ r(c, { ...o, ref: t, className: i });
+  }
+);
+f.displayName = "VisuallyHidden";
+export {
+  f as VisuallyHidden
+};