@telia/teddy 0.0.3 → 0.0.4

package/dist/components/navigation-menu/navigation-menu.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import { N as n } from "../../navigation-menu-BgN7IKev.js";
+import "../../utils/composeRefs.js";
+import "../visually-hidden/visually-hidden.js";
+import "../../utils/composeEventHandlers.js";
+export {
+  n as NavigationMenu
+};

package/dist/components/spinner/spinner.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 declare const SPINNER_VARIANT: {
     readonly PRIMARY: "primary";
     readonly DISABLED: "disabled";

package/dist/components/spinner/spinner.js

@@ -1,4 +1,4 @@
-import "../../assets/spinner.css";
+import '../../assets/spinner.css';
 import { jsx as _ } from "react/jsx-runtime";
 import { c as s } from "../../clsx-DB4S2d7J.js";
 import a from "react";
@@ -19,14 +19,14 @@ const l = "_dash_qjx6c_1", p = "_rotate_qjx6c_1", e = {
   DISABLED: "disabled",
   NEGATIVE: "negative",
   NEGATIVE_DISABLED: "negative-disabled"
-}, o = {
+}, y = {
   XXS: "xxs",
   XS: "xs",
   SM: "sm",
   MD: "md",
   LG: "lg"
-}, g = a.forwardRef(
-  ({ size: n = o.SM, variant: r = x.PRIMARY, className: i, ...c }, t) => /* @__PURE__ */ _(
+}, q = a.forwardRef(
+  ({ size: n = y.SM, variant: r = x.PRIMARY, className: i, ...c }, t) => /* @__PURE__ */ _(
     "svg",
     {
       ...c,
@@ -46,5 +46,5 @@ const l = "_dash_qjx6c_1", p = "_rotate_qjx6c_1", e = {
   )
 );
 export {
-  g as Spinner
+  q as Spinner
 };

package/dist/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './switch';
+export type { SwitchProps } from './switch';

package/dist/components/switch/index.js

@@ -0,0 +1,4 @@
+import { S as t } from "../../badge-CbHdlkcM.js";
+export {
+  t as Switch
+};

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,44 @@
+import { Label } from '..';
+import { default as React } from 'react';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+/** -------------------------------------------------------------------------------------------------
+ * SwitchRoot
+ * -----------------------------------------------------------------------------------------------*/
+type SwitchRootProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'id'> & {
+    /** The id you want to use to connect the label to the switch. If not provided, it will be generated */
+    id?: string;
+};
+/** -------------------------------------------------------------------------------------------------
+ * SwitchLabel
+ * -----------------------------------------------------------------------------------------------*/
+type SwitchLabelProps = Omit<React.ComponentPropsWithoutRef<typeof Label>, 'id'>;
+/** -------------------------------------------------------------------------------------------------
+ * SwitchInput
+ * -----------------------------------------------------------------------------------------------*/
+type SwitchInputProps = Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'id'>;
+/** -------------------------------------------------------------------------------------------------
+ * SwitchThumb
+ * -----------------------------------------------------------------------------------------------*/
+type SwitchThumbProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Thumb>;
+declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "id"> & {
+    /** The id you want to use to connect the label to the switch. If not provided, it will be generated */
+    id?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Label: React.ForwardRefExoticComponent<SwitchLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    Input: React.ForwardRefExoticComponent<SwitchInputProps & React.RefAttributes<HTMLButtonElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Indicator: React.ForwardRefExoticComponent<Partial<Omit<React.SVGProps<SVGSVGElement> & {
+        name: "link" | "map" | "menu" | "search" | "summary" | "time" | "video" | "filter" | "image" | "stop" | "key" | "x" | "download" | "split" | "alert" | "radio" | "email" | "copy" | "add" | "reverse" | "infinite" | "visible" | "help" | "zoom-out" | "zoom" | "sync" | "close" | "error" | "focus" | "play" | "alarm-off" | "alarm-on" | "attachment" | "bookmark-filled" | "bookmark" | "copy-filled" | "dislike" | "edit" | "heart-filled" | "heart" | "invisible" | "like" | "lock-open" | "lock" | "login" | "logout" | "maximize" | "minimize" | "mute" | "password-invisible" | "password-visible" | "play-filled" | "remove-filled" | "remove" | "save" | "send" | "settings" | "share" | "shuffle" | "skip-back-10sec" | "skip-back-30sec" | "skip-forward-10sec" | "skip-forward-30sec" | "star-filled" | "star" | "switch-arrows" | "tv-next" | "tv-pause" | "tv-previous" | "tv-stop" | "upload" | "volume" | "connected-building" | "home" | "hospital" | "industry" | "premises-datacenter" | "premises-large" | "premises-medium" | "premises-small" | "premises" | "store" | "address-book" | "b2b-customer" | "care" | "chat-robot" | "chat" | "child-1" | "child-2" | "conversation" | "customer-dialogue" | "dsl-hub" | "end-user" | "handshake" | "headphones" | "letter" | "mms" | "new-contact" | "new-group" | "news" | "parental-guide" | "people-hub" | "people" | "portal" | "signature" | "smiley-happy" | "smiley-sad" | "sms" | "support" | "user-admin" | "vcard" | "voicemail" | "battery" | "bluetooth" | "broadband" | "broken-phone" | "cast" | "cloud-connect" | "connected" | "core-router" | "daas-device" | "data-transfer" | "desktop" | "devices" | "esim-simcard" | "esim" | "face-id" | "fiber" | "fingerprint" | "fiveg" | "fourg" | "home-installation" | "industrial-iot" | "internet" | "it-service" | "laptop" | "mobile-broadband" | "network" | "phone-recycling" | "phone-ringing" | "phone" | "rack" | "refill-card" | "remote-control" | "repair" | "roaming" | "router" | "secure-device" | "sense-car" | "server" | "service-device" | "service-supervision" | "slow-wifi" | "smart-wifi" | "smartphone" | "smartwatch" | "tablet" | "trade-phone" | "tv" | "usb" | "voice-switch" | "wallplug" | "wireless-off" | "wireless-weak" | "wireless" | "world-alert" | "world-off" | "world-question" | "bar-chart" | "doc" | "document-doc" | "document-edit" | "document-pdf" | "document-ppt" | "excel" | "folder-copy" | "folder-new" | "folder" | "gif" | "graph" | "media-content" | "org-chart" | "pie-chart" | "print" | "register" | "report" | "simcard" | "spell-check" | "credit-card" | "euro" | "invoice" | "kontantkort" | "kr" | "late-payment" | "money-back-euro" | "money-back-kr" | "money-euro" | "money-kr" | "pay-monthly-euro" | "pay-monthly-kr" | "pay-once-euro" | "pay-once-kr" | "payment-success" | "savings" | "wallet" | "airplay" | "camera" | "entertainment" | "external" | "film" | "games" | "megaphone" | "microphone" | "music" | "player-settings" | "record" | "stream" | "trailer" | "video-conference" | "activity-level" | "ai-robot" | "bag" | "basketball" | "blood-pressure" | "bulb" | "business-continuity" | "business-intelligence" | "calendar" | "cart" | "close-circle" | "cloud" | "coffee" | "compass" | "construction" | "cookie" | "delivery" | "drone" | "education" | "efficiency" | "environment" | "facemask" | "flag" | "food" | "fraud" | "getting-started" | "home-care" | "job-search" | "layers" | "measuring-health" | "moisture" | "offering" | "offshore" | "optimization" | "pebble" | "pet-dog" | "pin" | "plane" | "plus-minus" | "police" | "power-grid" | "present" | "press-button" | "price" | "pulse" | "recycle" | "reservation" | "route" | "ruler" | "satellite" | "secured-1" | "secured-2" | "security-camera" | "shopping" | "snowflake" | "speedometer" | "spyware" | "suitcase" | "sustainability" | "tag" | "temperature" | "thinking" | "train" | "transfer" | "undo" | "wavelength" | "weather" | "world" | "android" | "apple" | "bankid" | "facebook" | "instagram" | "linkedin" | "snapchat" | "whatsapp" | "windows" | "youtube" | "alert-filled" | "check-circle-filled" | "check-circle" | "error-filled" | "info-filled" | "info" | "question-filled" | "question" | "warning" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-subdirectory" | "arrow-up" | "card-view" | "checkmark-bold" | "checkmark" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "grid-view" | "list-view" | "minus-bold" | "minus" | "more-horizontal" | "more-vertical" | "plus" | "services" | "sorter" | "table-view";
+        size?: ("sm" | "md" | "lg" | "xl" | "font" | "xxs" | "xs") | undefined;
+        children?: React.ReactNode;
+    }, "ref">> & React.RefAttributes<SVGSVGElement>>;
+};
+type SwitchProps = {
+    Root: SwitchRootProps;
+    Label: SwitchLabelProps;
+    Input: SwitchInputProps;
+    Thumb: SwitchThumbProps;
+};
+export { Switch };
+export type { SwitchProps };

package/dist/components/switch/switch.js

@@ -0,0 +1,23 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import { S as n } from "../../badge-CbHdlkcM.js";
+import "../../assets/5161b177f001ea1a.svg";
+import "../icon/icon.js";
+import "../grid/grid.js";
+import "../../navigation-menu-BgN7IKev.js";
+import "../link/link.js";
+import "../button/button.js";
+import "../field-error-text/field-error-text.js";
+import "../helper-text/helper-text.js";
+import "../input/input.js";
+import "../label/label.js";
+import "../spinner/spinner.js";
+import "../text/text.js";
+import "../text-field/text-field.js";
+import "../heading/heading.js";
+import "../visually-hidden/visually-hidden.js";
+import "../text-spacing/text-spacing.js";
+export {
+  n as Switch
+};

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

@@ -1,9 +1,9 @@
-import React from 'react';
-declare const paragraphVariants: readonly ["paragraph-100", "paragraph-100-medium", "paragraph-100-bold", "paragraph-200", "preamble-100", "preamble-200", "additional-100", "additional-100-medium", "overline-100", "overline-200"];
+import { default as React } from 'react';
+
 type AsChildProps = {
     asChild: true;
     as?: never;
-} & React.ComponentPropsWithoutRef<'p'>;
+} & React.ComponentPropsWithoutRef<'span'>;
 type SpanProps = {
     as?: 'span';
     asChild?: false;
@@ -17,17 +17,24 @@ type LabelProps = {
     asChild?: false;
 } & React.ComponentPropsWithoutRef<'label'>;
 type PProps = {
+    /**
+     * @default 'p'
+     */
     as: 'p';
     asChild?: false;
 } & React.ComponentPropsWithoutRef<'p'>;
-type TextVariant = (typeof paragraphVariants)[number];
+type TextVariant = 'paragraph-100' | 'paragraph-100-medium' | 'paragraph-100-bold' | 'paragraph-200' | 'preamble-100' | 'preamble-200' | 'additional-100' | 'additional-100-medium' | 'overline-100' | 'overline-200';
 type TextProps = {
     enableHyphenation?: boolean;
     disabled?: boolean;
-    variant?: 'paragraph-100' | 'paragraph-100-medium' | 'paragraph-100-bold' | 'paragraph-200' | 'preamble-100' | 'preamble-200' | 'additional-100' | 'additional-100-medium' | 'overline-100' | 'overline-200';
+    /**
+     * @default 'paragraph-100'
+     */
+    variant?: TextVariant;
 } & (AsChildProps | SpanProps | DivProps | LabelProps | PProps);
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>> & {
-    paragraphVariants: readonly ["paragraph-100", "paragraph-100-medium", "paragraph-100-bold", "paragraph-200", "preamble-100", "preamble-200", "additional-100", "additional-100-medium", "overline-100", "overline-200"];
-};
+/**
+ * Text is used to render text elements. By default, it renders as a `p` tag.
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
 export { Text };
 export type { TextProps, TextVariant };

package/dist/components/text/text.js

@@ -1,51 +1,37 @@
-import "../../assets/text.css";
+import '../../assets/text.css';
 import { jsx as a } from "react/jsx-runtime";
-import { a as b } from "../../index-TI1xsy6a.js";
+import { $ as l } from "../../index-DpfSJps6.js";
 import { c as n } from "../../clsx-DB4S2d7J.js";
-import f from "react";
-const e = {
-  "teddy-text": "_teddy-text_ebzsf_1",
-  "teddy-text--disabled": "_teddy-text--disabled_ebzsf_7",
-  "teddy-text--hyphens": "_teddy-text--hyphens_ebzsf_10",
-  "teddy-text--paragraph-100": "_teddy-text--paragraph-100_ebzsf_13",
-  "teddy-text--paragraph-100-medium": "_teddy-text--paragraph-100-medium_ebzsf_19",
-  "teddy-text--paragraph-100-bold": "_teddy-text--paragraph-100-bold_ebzsf_26",
-  "teddy-text--paragraph-200": "_teddy-text--paragraph-200_ebzsf_33",
-  "teddy-text--preamble-100": "_teddy-text--preamble-100_ebzsf_39",
-  "teddy-text--preamble-200": "_teddy-text--preamble-200_ebzsf_45",
-  "teddy-text--additional-100": "_teddy-text--additional-100_ebzsf_51",
-  "teddy-text--additional-100-medium": "_teddy-text--additional-100-medium_ebzsf_57",
-  "teddy-text--overline-100": "_teddy-text--overline-100_ebzsf_64",
-  "teddy-text--overline-200": "_teddy-text--overline-200_ebzsf_71"
-}, t = "teddy-text", h = [
-  "paragraph-100",
-  "paragraph-100-medium",
-  "paragraph-100-bold",
-  "paragraph-200",
-  "preamble-100",
-  "preamble-200",
-  "additional-100",
-  "additional-100-medium",
-  "overline-100",
-  "overline-200"
-], r = f.forwardRef(
-  ({ className: p, children: d, disabled: s, enableHyphenation: _, variant: o = "paragraph-100", asChild: i, as: x = "p", ...y }, l) => {
-    const m = n(
-      e[t],
-      e[`${t}--${o}`],
+import c from "react";
+const t = {
+  "teddy-text": "_teddy-text_2zpdm_1",
+  "teddy-text--disabled": "_teddy-text--disabled_2zpdm_7",
+  "teddy-text--hyphens": "_teddy-text--hyphens_2zpdm_10",
+  "teddy-text--paragraph-100": "_teddy-text--paragraph-100_2zpdm_13",
+  "teddy-text--paragraph-100-medium": "_teddy-text--paragraph-100-medium_2zpdm_19",
+  "teddy-text--paragraph-100-bold": "_teddy-text--paragraph-100-bold_2zpdm_26",
+  "teddy-text--paragraph-200": "_teddy-text--paragraph-200_2zpdm_33",
+  "teddy-text--preamble-100": "_teddy-text--preamble-100_2zpdm_39",
+  "teddy-text--preamble-200": "_teddy-text--preamble-200_2zpdm_45",
+  "teddy-text--additional-100": "_teddy-text--additional-100_2zpdm_51",
+  "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}`],
       {
-        [e[`${t}--hyphens`]]: _,
-        [e[`${t}--disabled`]]: s
+        [t[`${e}--hyphens`]]: _,
+        [t[`${e}--disabled`]]: r
       },
       p
     );
-    return /* @__PURE__ */ a(b, { ...y, ref: l, className: m, children: i ? d : /* @__PURE__ */ a(x, { children: d }) });
+    return /* @__PURE__ */ a(l, { ...o, ref: s, className: i, children: x ? d : /* @__PURE__ */ a(y, { children: d }) });
   }
 );
-r.displayName = "Text";
-const v = Object.assign(r, {
-  paragraphVariants: h
-});
+h.displayName = "Text";
 export {
-  v as Text
+  h as Text
 };

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
+};