@telia/teddy 0.0.14 → 0.0.16

package/dist/components/radio-group/radio-group.js

@@ -1,10 +1,93 @@
-import "react/jsx-runtime";
-import "react";
-import "../../clsx-DB4S2d7J.js";
-import { R as d } from "../../radio-group-B--zT3OL.js";
-import "../label/label.js";
-import "../../utils/composeRefs.js";
-import "../../index-DpfSJps6.js";
+import { jsx } from "react/jsx-runtime";
+import React__default, { useRef } from "react";
+import clsx from "clsx";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Label as Label$1 } from "../label/label.js";
+import { useComposedRefs } from "../../utils/composeRefs.js";
+import { Slot } from "@radix-ui/react-slot";
+const styles = {
+  "teddy-radio-group": "_teddy-radio-group_1flae_1",
+  "teddy-radio-group__group-label": "_teddy-radio-group__group-label_1flae_10",
+  "teddy-radio-group__label": "_teddy-radio-group__label_1flae_13",
+  "teddy-radio-group__group-label--required": "_teddy-radio-group__group-label--required_1flae_23",
+  "teddy-radio-group__item": "_teddy-radio-group__item_1flae_26",
+  "teddy-radio-group__trigger": "_teddy-radio-group__trigger_1flae_54",
+  "teddy-radio-group__indicator": "_teddy-radio-group__indicator_1flae_111"
+};
+const rootClassName = "teddy-radio-group";
+const RootContext = React__default.createContext(void 0);
+const Root = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    const [groupLabelId, setGroupLabelId] = React__default.useState();
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { setGroupLabelId, required: props.required }, children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { "aria-labelledby": groupLabelId, ...props, ref: forwardRef, className: classes }) });
+  }
+);
+Root.displayName = "RadioGroup";
+const ItemContext = React__default.createContext(
+  void 0
+);
+const Item = React__default.forwardRef(({ className, ...props }, forwardRef) => {
+  const classes = clsx([styles[`${rootClassName}__item`]], className);
+  const triggerRef = useRef(null);
+  const triggerId = `${React__default.useId()}-trigger`;
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: { triggerRef, id: triggerId }, children: /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes }) });
+});
+Item.displayName = "RadioGroup.Item";
+const GroupLabel = React__default.forwardRef(
+  ({ className, asChild, as: Tag = "h3", children, ...props }, forwardRef) => {
+    const context = React__default.useContext(RootContext);
+    const classes = clsx(
+      [styles[`${rootClassName}__group-label`]],
+      {
+        [styles[`${rootClassName}__group-label--required`]]: context == null ? void 0 : context.required
+      },
+      className
+    );
+    const fallbackId = React__default.useId();
+    const id = props.id || fallbackId;
+    React__default.useEffect(() => {
+      if (context) {
+        context.setGroupLabelId(id);
+      }
+    }, [id, context]);
+    return /* @__PURE__ */ jsx(Slot, { ...props, id, ref: forwardRef, className: classes, children: asChild ? children : Tag ? /* @__PURE__ */ jsx(Tag, { children }) : null });
+  }
+);
+GroupLabel.displayName = "RadioGroup.GroupLabel";
+const Trigger = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__trigger`]], className);
+    const context = React__default.useContext(ItemContext);
+    const ref = useComposedRefs(forwardRef, context == null ? void 0 : context.triggerRef);
+    const id = props.id || (context == null ? void 0 : context.id);
+    return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, { ...props, id, ref, className: classes, children: children || /* @__PURE__ */ jsx(Indicator, {}) });
+  }
+);
+Trigger.displayName = "RadioGroup.Trigger";
+const Indicator = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { ...props, ref: forwardRef, className: classes });
+  }
+);
+Indicator.displayName = "RadioGroup.Indicator";
+const Label = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__label`]], className);
+    const context = React__default.useContext(ItemContext);
+    const htmlFor = props.htmlFor || (context == null ? void 0 : context.id);
+    return /* @__PURE__ */ jsx(Label$1, { ...props, htmlFor, ref: forwardRef, className: classes });
+  }
+);
+Label.displayName = "RadioGroup.Label";
+const RadioGroup = Object.assign(Root, {
+  Item,
+  Trigger,
+  Indicator,
+  Label,
+  GroupLabel
+});
 export {
-  d as RadioGroup
+  RadioGroup
 };

package/dist/components/spinner/index.js

@@ -1,4 +1,4 @@
-import { Spinner as n } from "./spinner.js";
+import { Spinner } from "./spinner.js";
 export {
-  n as Spinner
+  Spinner
 };

package/dist/components/spinner/spinner.js

@@ -1,50 +1,57 @@
-import '../../assets/spinner.css';
-import { jsx as n } from "react/jsx-runtime";
-import { c as _ } from "../../clsx-DB4S2d7J.js";
-import y from "react";
-const a = "_dash_ywden_1", l = "_rotate_ywden_1", e = {
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+const dash = "_dash_ywden_1";
+const rotate = "_rotate_ywden_1";
+const styles = {
   "teddy-spinner--xxs": "_teddy-spinner--xxs_ywden_1",
   "teddy-spinner--xs": "_teddy-spinner--xs_ywden_5",
   "teddy-spinner--sm": "_teddy-spinner--sm_ywden_9",
   "teddy-spinner--md": "_teddy-spinner--md_ywden_13",
   "teddy-spinner--lg": "_teddy-spinner--lg_ywden_18",
   "teddy-spinner__circle": "_teddy-spinner__circle_ywden_23",
-  dash: a,
-  rotate: l,
+  dash,
+  rotate,
   "teddy-spinner__circle--disabled": "_teddy-spinner__circle--disabled_ywden_33",
   "teddy-spinner__circle--negative": "_teddy-spinner__circle--negative_ywden_36",
   "teddy-spinner__circle--negative-disabled": "_teddy-spinner__circle--negative-disabled_ywden_39"
-}, d = "teddy-spinner", p = {
+};
+const rootClassName = "teddy-spinner";
+const SPINNER_VARIANT = {
   PRIMARY: "primary",
   DISABLED: "disabled",
   NEGATIVE: "negative",
   NEGATIVE_DISABLED: "negative-disabled"
-}, o = {
+};
+const SPINNER_SIZE = {
   XXS: "xxs",
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, g = y.forwardRef(
-  ({ size: s = o.SM, variant: r = p.PRIMARY, className: i, ...t }, c) => /* @__PURE__ */ n(
-    "svg",
-    {
-      ...t,
-      viewBox: "0 0 50 50",
-      className: _([e[d], e[`${d}--${s}`], i]),
-      ref: c,
-      children: /* @__PURE__ */ n(
-        "circle",
-        {
-          className: _(e[`${d}__circle`], e[`${d}__circle--${r}`]),
-          cx: "25",
-          cy: "25",
-          r: "20"
-        }
-      )
-    }
-  )
+};
+const Spinner = React__default.forwardRef(
+  ({ size = SPINNER_SIZE.SM, variant = SPINNER_VARIANT.PRIMARY, className, ...props }, forwardRef) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...props,
+        viewBox: "0 0 50 50",
+        className: clsx([styles[rootClassName], styles[`${rootClassName}--${size}`], className]),
+        ref: forwardRef,
+        children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: clsx(styles[`${rootClassName}__circle`], styles[`${rootClassName}__circle--${variant}`]),
+            cx: "25",
+            cy: "25",
+            r: "20"
+          }
+        )
+      }
+    );
+  }
 );
 export {
-  g as Spinner
+  Spinner
 };

package/dist/components/text/index.js

@@ -1,4 +1,4 @@
-import { Text as r } from "./text.js";
+import { Text } from "./text.js";
 export {
-  r as Text
+  Text
 };

package/dist/components/text/text.js

@@ -1,9 +1,8 @@
-import '../../assets/text.css';
-import { jsx as a } from "react/jsx-runtime";
-import { $ as l } from "../../index-DpfSJps6.js";
-import { c as n } from "../../clsx-DB4S2d7J.js";
-import c from "react";
-const t = {
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import React__default from "react";
+const styles = {
   "teddy-text": "_teddy-text_2zpdm_1",
   "teddy-text--disabled": "_teddy-text--disabled_2zpdm_7",
   "teddy-text--hyphens": "_teddy-text--hyphens_2zpdm_10",
@@ -17,21 +16,23 @@ const t = {
   "teddy-text--additional-100-medium": "_teddy-text--additional-100-medium_2zpdm_57",
   "teddy-text--overline-100": "_teddy-text--overline-100_2zpdm_64",
   "teddy-text--overline-200": "_teddy-text--overline-200_2zpdm_71"
-}, e = "teddy-text", h = c.forwardRef(
-  ({ className: p, children: d, disabled: r, enableHyphenation: _, variant: m = "paragraph-100", asChild: x, as: y = "p", ...o }, s) => {
-    const i = n(
-      t[e],
-      t[`${e}--${m}`],
+};
+const rootClassName = "teddy-text";
+const Text = React__default.forwardRef(
+  ({ className, children, disabled, enableHyphenation, variant = "paragraph-100", asChild, as: Tag = "p", ...props }, forwardRef) => {
+    const classes = clsx(
+      styles[rootClassName],
+      styles[`${rootClassName}--${variant}`],
       {
-        [t[`${e}--hyphens`]]: _,
-        [t[`${e}--disabled`]]: r
+        [styles[`${rootClassName}--hyphens`]]: enableHyphenation,
+        [styles[`${rootClassName}--disabled`]]: disabled
       },
-      p
+      className
     );
-    return /* @__PURE__ */ a(l, { ...o, ref: s, className: i, children: x ? d : /* @__PURE__ */ a(y, { children: d }) });
+    return /* @__PURE__ */ jsx(Slot, { ...props, ref: forwardRef, className: classes, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
   }
 );
-h.displayName = "Text";
+Text.displayName = "Text";
 export {
-  h as Text
+  Text
 };

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

@@ -1,4 +1,4 @@
-import { TextField as r } from "./text-field.js";
+import { TextField } from "./text-field.js";
 export {
-  r as TextField
+  TextField
 };

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

@@ -1,118 +1,138 @@
-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 = {
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import { FieldErrorText } from "../field-error-text/field-error-text.js";
+import { HelperText } from "../helper-text/helper-text.js";
+import { Label } from "../label/label.js";
+import { InputGroup } from "../input/input.js";
+const fadeInAnimation = "_fadeInAnimation_1i091_1";
+const scaleInAnimation = "_scaleInAnimation_1i091_1";
+const styles = {
   "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 }, R) => {
-    const h = i.useId(), L = c.id || h, C = u([p[m]], t), [E, g] = i.useState(void 0), [w, A] = i.useState(void 0);
-    return /* @__PURE__ */ o("div", { ...c, ref: R, className: C, children: /* @__PURE__ */ o(
-      f.Provider,
+  fadeInAnimation,
+  scaleInAnimation
+};
+const rootClassName = "teddy-text-field";
+const TextFieldContext = React__default.createContext(void 0);
+const TextFieldRoot = React__default.forwardRef(
+  ({ className, children, readOnly, disabled, errors, isValid, isLoading, isRequired, ...props }, forwardRef) => {
+    const fallbackId = React__default.useId();
+    const id = props.id || fallbackId;
+    const classes = clsx([styles[rootClassName]], className);
+    const [helperTextId, setHelperTextId] = React__default.useState(void 0);
+    const [errorId, setErrorId] = React__default.useState(void 0);
+    return /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes, children: /* @__PURE__ */ jsx(
+      TextFieldContext.Provider,
       {
         value: {
-          errors: a,
-          id: L,
-          errorId: w,
-          setErrorId: A,
-          helperTextId: E,
-          setHelperTextId: g,
-          disabled: r,
-          readOnly: e,
-          isValid: s,
-          isLoading: l,
-          isRequired: n
+          errors,
+          id,
+          errorId,
+          setErrorId,
+          helperTextId,
+          setHelperTextId,
+          disabled,
+          readOnly,
+          isValid,
+          isLoading,
+          isRequired
         },
-        children: d
+        children
       }
     ) });
   }
 );
-_.displayName = "TextField";
-const F = i.forwardRef((t, d) => {
-  var a;
-  const e = i.useContext(f), r = e == null ? void 0 : e.id;
-  return /* @__PURE__ */ o(
-    I.Input,
+TextFieldRoot.displayName = "TextField";
+const TextFieldInput = React__default.forwardRef((props, forwardRef) => {
+  var _a;
+  const context = React__default.useContext(TextFieldContext);
+  const id = context == null ? void 0 : context.id;
+  return /* @__PURE__ */ jsx(
+    InputGroup.Input,
     {
-      ...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,
-      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
+      ...props,
+      "aria-describedby": [context == null ? void 0 : context.errorId, context == null ? void 0 : context.helperTextId].filter(Boolean).join(" "),
+      disabled: context == null ? void 0 : context.disabled,
+      readOnly: context == null ? void 0 : context.readOnly,
+      required: context == null ? void 0 : context.isRequired,
+      isLoading: context == null ? void 0 : context.isLoading,
+      validationState: (context == null ? void 0 : context.isValid) ? "valid" : ((_a = context == null ? void 0 : context.errors) == null ? void 0 : _a.length) ? "invalid" : void 0,
+      id,
+      ref: forwardRef
     }
   );
 });
-F.displayName = "TextField.Input";
-const y = i.forwardRef((t, d) => /* @__PURE__ */ o(I, { ...t, ref: d }));
-y.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 });
+TextFieldInput.displayName = "TextField.Input";
+const TextFieldInputGroup = React__default.forwardRef((props, forwardRef) => {
+  return /* @__PURE__ */ jsx(InputGroup, { ...props, ref: forwardRef });
+});
+TextFieldInputGroup.displayName = "TextField.InputGroup";
+const TextFieldIndicator = React__default.forwardRef(
+  (props, forwardRef) => {
+    const context = React__default.useContext(TextFieldContext);
+    return /* @__PURE__ */ jsx(InputGroup.Indicator, { isValid: context == null ? void 0 : context.isValid, isLoading: context == null ? void 0 : context.isLoading, ...props, ref: forwardRef });
   }
 );
-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,
+TextFieldIndicator.displayName = "TextField.Indicator";
+const TextFieldLabel = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React__default.useContext(TextFieldContext);
+    const classes = clsx([styles[`${rootClassName}__label`]], className);
+    const id = props.id || (context == null ? void 0 : context.id);
+    return /* @__PURE__ */ jsx(
+      Label,
       {
-        ...d,
-        isRequired: r == null ? void 0 : r.isRequired,
-        htmlFor: s,
-        disabled: r == null ? void 0 : r.disabled,
-        ref: e,
-        className: a
+        ...props,
+        isRequired: context == null ? void 0 : context.isRequired,
+        htmlFor: id,
+        disabled: context == null ? void 0 : context.disabled,
+        ref: forwardRef,
+        className: classes
       }
     );
   }
 );
-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.useEffect(() => {
-      r == null || r.setHelperTextId(`${r.id}-helper-text`);
-    }, [r]), /* @__PURE__ */ o($, { id: r == null ? void 0 : r.helperTextId, ...d, ref: e, className: a });
+TextFieldLabel.displayName = "TextField.Label";
+const TextFieldHelperText = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React__default.useContext(TextFieldContext);
+    const classes = clsx([styles[`${rootClassName}__help-text`]], className);
+    React__default.useEffect(() => {
+      context == null ? void 0 : context.setHelperTextId(`${context.id}-helper-text`);
+    }, [context]);
+    return /* @__PURE__ */ jsx(HelperText, { id: context == null ? void 0 : context.helperTextId, ...props, ref: forwardRef, className: classes });
   }
 );
-x.displayName = "TextField.HelperText";
-const N = 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.useEffect(() => {
-      if (!s)
+TextFieldHelperText.displayName = "TextField.HelperText";
+const TextFieldErrorList = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__error-list`]], className);
+    const context = React__default.useContext(TextFieldContext);
+    const errors = context == null ? void 0 : context.errors;
+    React__default.useEffect(() => {
+      if (!context)
         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))) });
+      const errorId = (errors == null ? void 0 : errors.length) ? `${context.id}-error` : void 0;
+      context == null ? void 0 : context.setErrorId(errorId);
+    }, [errors, context]);
+    if (!context || !context.errors)
+      return null;
+    return /* @__PURE__ */ jsx("ul", { id: context.errorId, "aria-live": "assertive", ...props, ref: forwardRef, className: classes, children: typeof children === "function" ? children({ errors }) : children || (errors == null ? void 0 : errors.map((error) => /* @__PURE__ */ jsx(FieldErrorText, { asChild: true, children: /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(FieldErrorText.Indicator, {}),
+      error
+    ] }) }, error))) });
   }
 );
-N.displayName = "TextField.ErrorList";
-const D = Object.assign(_, {
-  Input: F,
-  Label: v,
-  InputGroup: y,
-  HelperText: x,
-  ErrorList: N,
-  Indicator: b
+TextFieldErrorList.displayName = "TextField.ErrorList";
+const TextField = Object.assign(TextFieldRoot, {
+  Input: TextFieldInput,
+  Label: TextFieldLabel,
+  InputGroup: TextFieldInputGroup,
+  HelperText: TextFieldHelperText,
+  ErrorList: TextFieldErrorList,
+  Indicator: TextFieldIndicator
 });
 export {
-  D as TextField
+  TextField
 };

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

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

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

@@ -1,17 +1,19 @@
-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 = {
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import { Slot } from "@radix-ui/react-slot";
+const styles = {
   "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 });
+};
+const rootClassName = "teddy-text-spacing";
+const TextSpacing = React__default.forwardRef(
+  ({ className, asChild = false, children, ...props }, forwardRef) => {
+    const Comp = asChild ? Slot : "div";
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    return /* @__PURE__ */ jsx(Comp, { ...props, ref: forwardRef, className: classes, children });
   }
 );
-x.displayName = "TextSpacing";
+TextSpacing.displayName = "TextSpacing";
 export {
-  x as TextSpacing
+  TextSpacing
 };

package/dist/components/toggle/index.js

@@ -1,4 +1,4 @@
-import { T as g } from "../../badge-C6I_qxYL.js";
+import { Toggle } from "./toggle.js";
 export {
-  g as Toggle
+  Toggle
 };

package/dist/components/toggle/toggle.d.ts

@@ -1,4 +1,4 @@
-import { Label } from '..';
+import { Label } from '../label';
 import { default as React } from 'react';
 
 import * as SwitchPrimitive from '@radix-ui/react-switch';