@telia/teddy 0.0.24 → 0.0.26

package/dist/components/tabs/tabs-root.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
+const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const styles = {
+  "teddy-tabs__list": "_teddy-tabs__list_1finq_3",
+  "teddy-tabs--full-width": "_teddy-tabs--full-width_1finq_30",
+  "teddy-tabs__trigger": "_teddy-tabs__trigger_1finq_33",
+  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1finq_48"
+};
+const rootClassName = "teddy-tabs";
+const RootContext = React.createContext(void 0);
+const Root = React.forwardRef(
+  ({ className, onValueChange, fullWidth, snapCenter = true, ...props }, forwardRef) => {
+    const [activeElement, setActiveElement] = React.useState(null);
+    const listElement = React.useRef(null);
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      prop: props.value,
+      onChange: onValueChange,
+      defaultProp: props.defaultValue
+    });
+    const classes = clsx(
+      [styles[`${rootClassName}`]],
+      { [styles[`${rootClassName}--full-width`]]: fullWidth },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RootContext.Provider,
+      {
+        value: {
+          activeElement,
+          setActiveElement,
+          snapCenter,
+          value,
+          listElement
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          TabsPrimitive__namespace.Root,
+          {
+            ...props,
+            onValueChange: utils_composeEventHandlers.composeEventHandlers(setValue, onValueChange),
+            ref: forwardRef,
+            className: classes
+          }
+        )
+      }
+    );
+  }
+);
+Root.displayName = "Root";
+exports.Root = Root;
+exports.RootContext = RootContext;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

package/dist/components/tabs/tabs-root.d.ts

@@ -17,15 +17,12 @@ export type RootProps = Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive
      */
     snapCenter?: boolean;
 };
-type ActiveElement = {
-    left: number;
-    width: number;
-    bottom: number;
-};
 type RootContextType = {
-    activeElement: ActiveElement | null;
-    setActiveElement: React.Dispatch<React.SetStateAction<ActiveElement | null>>;
+    activeElement: HTMLButtonElement | null;
+    setActiveElement: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
+    listElement: React.RefObject<HTMLDivElement>;
     snapCenter: boolean;
+    value: string | undefined;
 };
 export declare const RootContext: React.Context<RootContextType | undefined>;
 export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {

package/dist/components/tabs/tabs-root.js

@@ -2,18 +2,25 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 const styles = {
-  "teddy-tabs__list": "_teddy-tabs__list_1sgsx_3",
-  "teddy-tabs--full-width": "_teddy-tabs--full-width_1sgsx_10",
-  "teddy-tabs__trigger": "_teddy-tabs__trigger_1sgsx_13",
-  "teddy-tabs__indicator": "_teddy-tabs__indicator_1sgsx_28",
-  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1sgsx_34"
+  "teddy-tabs__list": "_teddy-tabs__list_1finq_3",
+  "teddy-tabs--full-width": "_teddy-tabs--full-width_1finq_30",
+  "teddy-tabs__trigger": "_teddy-tabs__trigger_1finq_33",
+  "teddy-tabs__scroll-button": "_teddy-tabs__scroll-button_1finq_48"
 };
 const rootClassName = "teddy-tabs";
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ className, fullWidth, snapCenter = true, ...props }, forwardRef) => {
+  ({ className, onValueChange, fullWidth, snapCenter = true, ...props }, forwardRef) => {
     const [activeElement, setActiveElement] = React__default.useState(null);
+    const listElement = React__default.useRef(null);
+    const [value, setValue] = useControllableState({
+      prop: props.value,
+      onChange: onValueChange,
+      defaultProp: props.defaultValue
+    });
     const classes = clsx(
       [styles[`${rootClassName}`]],
       { [styles[`${rootClassName}--full-width`]]: fullWidth },
@@ -25,9 +32,19 @@ const Root = React__default.forwardRef(
         value: {
           activeElement,
           setActiveElement,
-          snapCenter
+          snapCenter,
+          value,
+          listElement
         },
-        children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...props, ref: forwardRef, className: classes })
+        children: /* @__PURE__ */ jsx(
+          TabsPrimitive.Root,
+          {
+            ...props,
+            onValueChange: composeEventHandlers(setValue, onValueChange),
+            ref: forwardRef,
+            className: classes
+          }
+        )
       }
     );
   }

package/dist/components/tabs/tabs-scroll-button.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_tabs_tabsRoot = require("./tabs-root.cjs");
+const components_scrollArea_index = require("../scroll-area/index.cjs");
+const ScrollButton = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__scroll-button`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea.Button, { variant: "text", ...props, className: classes, ref: forwardRef });
+  }
+);
+ScrollButton.displayName = "ScrollButton";
+exports.ScrollButton = ScrollButton;

package/dist/components/tabs/tabs-scroll.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_tabs_tabsRoot = require("./tabs-root.cjs");
+const components_scrollArea_index = require("../scroll-area/index.cjs");
+const components_tabs_tabsScrollButton = require("./tabs-scroll-button.cjs");
+const ScrollContext = React.createContext(false);
+const Scroll = React.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__scroll`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsxs(components_scrollArea_index.ScrollArea, { ...props, className: classes, ref: forwardRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScrollButton.ScrollButton, { direction: "left" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_tabs_tabsScrollButton.ScrollButton, { direction: "right" }),
+      children
+    ] }) });
+  }
+);
+Scroll.displayName = "Scroll";
+exports.Scroll = Scroll;
+exports.ScrollContext = ScrollContext;

package/dist/components/tabs/tabs-trigger.cjs

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const TabsPrimitive = require("@radix-ui/react-tabs");
+const clsx = require("clsx");
+const components_tabs_tabsRoot = require("./tabs-root.cjs");
+const components_scrollArea_index = require("../scroll-area/index.cjs");
+const components_button_button = require("../button/button.cjs");
+const utils_composeRefs = require("../../utils/composeRefs.cjs");
+const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
+const Trigger = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const classes = clsx([components_tabs_tabsRoot.styles[`${components_tabs_tabsRoot.rootClassName}__trigger`]], className);
+    const innerElementRef = React.useRef(null);
+    const context = React.useContext(components_tabs_tabsRoot.RootContext);
+    React.useEffect(() => {
+      if ((context == null ? void 0 : context.value) === props.value && innerElementRef.current) {
+        const newTab = innerElementRef.current;
+        context == null ? void 0 : context.setActiveElement(newTab);
+        const tabsContainer = context == null ? void 0 : context.listElement.current;
+        if (!newTab || !tabsContainer)
+          return;
+        const newTabWidth = newTab.offsetWidth / tabsContainer.offsetWidth;
+        context == null ? void 0 : context.setActiveElement(innerElementRef.current);
+        tabsContainer.style.setProperty("--_width", newTabWidth.toFixed(3));
+        tabsContainer.style.setProperty("--_left", newTab.offsetLeft + "px");
+        tabsContainer.style.setProperty("--_duration", tokens_motion_variables.teddyMotionDuration200);
+      }
+    }, [context, props.value]);
+    if (context == null ? void 0 : context.snapCenter) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { ...props, ref: utils_composeRefs.composeRefs(forwardRef, innerElementRef), className: classes }) }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { ...props, ref: utils_composeRefs.composeRefs(forwardRef, innerElementRef), className: classes }) });
+  }
+);
+Trigger.displayName = "Trigger";
+exports.Trigger = Trigger;

package/dist/components/tabs/tabs-trigger.js

@@ -3,23 +3,33 @@ import React__default from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
 import { s as styles, rootClassName, RootContext } from "./tabs-root.js";
-import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { ScrollArea } from "../scroll-area/index.js";
 import { Button } from "../button/button.js";
+import { composeRefs } from "../../utils/composeRefs.js";
+import { teddyMotionDuration200 } from "../../tokens/motion/variables.js";
 const Trigger = React__default.forwardRef(
   ({ className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}__trigger`]], className);
+    const innerElementRef = React__default.useRef(null);
     const context = React__default.useContext(RootContext);
-    function onClick() {
-      return composeEventHandlers(
-        props.onClick,
-        (e) => context == null ? void 0 : context.setActiveElement(e.currentTarget.getBoundingClientRect())
-      );
-    }
+    React__default.useEffect(() => {
+      if ((context == null ? void 0 : context.value) === props.value && innerElementRef.current) {
+        const newTab = innerElementRef.current;
+        context == null ? void 0 : context.setActiveElement(newTab);
+        const tabsContainer = context == null ? void 0 : context.listElement.current;
+        if (!newTab || !tabsContainer)
+          return;
+        const newTabWidth = newTab.offsetWidth / tabsContainer.offsetWidth;
+        context == null ? void 0 : context.setActiveElement(innerElementRef.current);
+        tabsContainer.style.setProperty("--_width", newTabWidth.toFixed(3));
+        tabsContainer.style.setProperty("--_left", newTab.offsetLeft + "px");
+        tabsContainer.style.setProperty("--_duration", teddyMotionDuration200);
+      }
+    }, [context, props.value]);
     if (context == null ? void 0 : context.snapCenter) {
-      return /* @__PURE__ */ jsx(ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, onClick, ref: forwardRef, className: classes }) }) });
+      return /* @__PURE__ */ jsx(ScrollArea.Item, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, ref: composeRefs(forwardRef, innerElementRef), className: classes }) }) });
     }
-    return /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, onClick, ref: forwardRef, className: classes }) });
+    return /* @__PURE__ */ jsx(Button, { variant: "primary", asChild: true, children: /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { ...props, ref: composeRefs(forwardRef, innerElementRef), className: classes }) });
   }
 );
 Trigger.displayName = "Trigger";

package/dist/components/text/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_text_text = require("./text.cjs");
+exports.Text = components_text_text.Text;

package/dist/components/text/text.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const clsx = require("clsx");
+const React = require("react");
+const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
+const tokens_color_variables = require("../../tokens/color/variables.cjs");
+const styles = {
+  "teddy-text": "_teddy-text_15w9u_2",
+  "teddy-text--disabled": "_teddy-text--disabled_15w9u_8",
+  "teddy-text--hyphens": "_teddy-text--hyphens_15w9u_11",
+  "teddy-text--paragraph-100": "_teddy-text--paragraph-100_15w9u_14",
+  "teddy-text--paragraph-100-medium": "_teddy-text--paragraph-100-medium_15w9u_20",
+  "teddy-text--paragraph-100-bold": "_teddy-text--paragraph-100-bold_15w9u_27",
+  "teddy-text--paragraph-200": "_teddy-text--paragraph-200_15w9u_34",
+  "teddy-text--preamble-100": "_teddy-text--preamble-100_15w9u_40",
+  "teddy-text--preamble-200": "_teddy-text--preamble-200_15w9u_46",
+  "teddy-text--additional-100": "_teddy-text--additional-100_15w9u_52",
+  "teddy-text--additional-100-medium": "_teddy-text--additional-100-medium_15w9u_58",
+  "teddy-text--overline-100": "_teddy-text--overline-100_15w9u_65",
+  "teddy-text--overline-200": "_teddy-text--overline-200_15w9u_72"
+};
+const rootClassName = "teddy-text";
+const Text = React.forwardRef(({ faded, ...props }, forwardRef) => {
+  const color = faded ? tokens_color_variables.teddyColorTextMedium : props.color;
+  const {
+    className,
+    children,
+    disabled,
+    enableHyphenation,
+    variant = "paragraph-100",
+    asChild,
+    as: Tag = "p",
+    ...rest
+  } = utils_generateStyling_index.extractProps({ ...props, color });
+  const classes = clsx(
+    styles[rootClassName],
+    styles[`${rootClassName}--${variant}`],
+    {
+      [styles[`${rootClassName}--hyphens`]]: enableHyphenation,
+      [styles[`${rootClassName}--disabled`]]: disabled
+    },
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ...rest, ref: forwardRef, className: classes, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+});
+Text.displayName = "Text";
+exports.Text = Text;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_textField_textField = require("./text-field.cjs");
+const components_textField_textFieldInput = require("./text-field-input.cjs");
+const components_textField_textFieldLabel = require("./text-field-label.cjs");
+const components_textField_textFieldInputGroup = require("./text-field-input-group.cjs");
+const components_textField_textFieldHelperText = require("./text-field-helper-text.cjs");
+const components_textField_textFieldErrorList = require("./text-field-error-list.cjs");
+const components_textField_textFieldIndicator = require("./text-field-indicator.cjs");
+const components_textField_textFieldButton = require("./text-field-button.cjs");
+const components_textField_textFieldClearButton = require("./text-field-clear-button.cjs");
+components_textField_textField.Root.displayName = "TextField";
+components_textField_textFieldInput.Input.displayName = "TextField.Input";
+components_textField_textFieldLabel.Label.displayName = "TextField.Label";
+components_textField_textFieldInputGroup.InputGroup.displayName = "TextField.Group";
+components_textField_textFieldHelperText.HelperText.displayName = "TextField.HelperText";
+components_textField_textFieldErrorList.ErrorList.displayName = "TextField.ErrorList";
+components_textField_textFieldIndicator.Indicator.displayName = "TextField.Indicator";
+components_textField_textFieldButton.Button.displayName = "TextField.Button";
+components_textField_textFieldClearButton.ClearButton.displayName = "TextField.ClearButton";
+const TextField = Object.assign(components_textField_textField.Root, {
+  Input: components_textField_textFieldInput.Input,
+  Label: components_textField_textFieldLabel.Label,
+  InputGroup: components_textField_textFieldInputGroup.InputGroup,
+  HelperText: components_textField_textFieldHelperText.HelperText,
+  ErrorList: components_textField_textFieldErrorList.ErrorList,
+  Indicator: components_textField_textFieldIndicator.Indicator,
+  Button: components_textField_textFieldButton.Button,
+  ClearButton: components_textField_textFieldClearButton.ClearButton
+});
+exports.TextField = TextField;

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

@@ -1,2 +1,63 @@
-export { TextField } from './text-field';
-export type { TextFieldProps } from './text-field';
+import { TextFieldRootProps } from './text-field';
+import { TextFieldInputProps } from './text-field-input';
+import { TextFieldLabelProps } from './text-field-label';
+import { TextFieldInputGroupProps } from './text-field-input-group';
+import { TextFieldHelperTextProps } from './text-field-helper-text';
+import { TextFieldErrorListProps } from './text-field-error-list';
+import { TextFieldIndicatorProps } from './text-field-indicator';
+import { TextFieldButtonProps } from './text-field-button';
+import { TextFieldClearButtonProps } from './text-field-clear-button';
+
+export declare const TextField: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<import('../input/input-indicator').InputIndicatorProps, "isLoading" | "isValid"> & {
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    errors?: (string | null | undefined)[] | null | undefined;
+    isRequired?: boolean | undefined;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Input: import('react').ForwardRefExoticComponent<TextFieldInputProps & import('react').RefAttributes<HTMLInputElement>>;
+    Label: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-label').LabelProps & import('react').RefAttributes<HTMLLabelElement>, "ref"> & {
+        disabled?: boolean | undefined;
+        isRequired?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLLabelElement>>;
+    InputGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        frameClassName?: string | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    HelperText: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    ErrorList: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, "children"> & {
+        children?: import('react').ReactNode | ((args: Pick<import('./text-field').TextFieldContextValue, "errors">) => import('react').ReactNode);
+    } & import('react').RefAttributes<HTMLUListElement>>;
+    Indicator: import('react').ForwardRefExoticComponent<TextFieldIndicatorProps & import('react').RefAttributes<SVGSVGElement>>;
+    Button: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+        asChild?: boolean | undefined;
+        loading?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    } & {
+        iconOnly: true;
+        "aria-label": string;
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+        asChild?: boolean | undefined;
+        loading?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    } & {
+        iconOnly?: false | undefined;
+        "aria-label"?: string | undefined;
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
+        variant?: "attached" | "separated" | undefined;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    ClearButton: import('react').ForwardRefExoticComponent<import('../input/input-clear-button').ClearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export type TextFieldProps = {
+    Root: TextFieldRootProps;
+    Input: TextFieldInputProps;
+    Label: TextFieldLabelProps;
+    Group: TextFieldInputGroupProps;
+    HelperText: TextFieldHelperTextProps;
+    ErrorList: TextFieldErrorListProps;
+    Indicator: TextFieldIndicatorProps;
+    Button: TextFieldButtonProps;
+    ClearButton: TextFieldClearButtonProps;
+};

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

@@ -1,4 +1,31 @@
-import { TextField } from "./text-field.js";
+import { Root } from "./text-field.js";
+import { Input } from "./text-field-input.js";
+import { Label } from "./text-field-label.js";
+import { InputGroup } from "./text-field-input-group.js";
+import { HelperText } from "./text-field-helper-text.js";
+import { ErrorList } from "./text-field-error-list.js";
+import { Indicator } from "./text-field-indicator.js";
+import { Button } from "./text-field-button.js";
+import { ClearButton } from "./text-field-clear-button.js";
+Root.displayName = "TextField";
+Input.displayName = "TextField.Input";
+Label.displayName = "TextField.Label";
+InputGroup.displayName = "TextField.Group";
+HelperText.displayName = "TextField.HelperText";
+ErrorList.displayName = "TextField.ErrorList";
+Indicator.displayName = "TextField.Indicator";
+Button.displayName = "TextField.Button";
+ClearButton.displayName = "TextField.ClearButton";
+const TextField = Object.assign(Root, {
+  Input,
+  Label,
+  InputGroup,
+  HelperText,
+  ErrorList,
+  Indicator,
+  Button,
+  ClearButton
+});
 export {
   TextField
 };

package/dist/components/text-field/text-field-button.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const components_textField_textField = require("./text-field.cjs");
+const components_button_button = require("../button/button.cjs");
+const Button = React.forwardRef(
+  ({ className, variant, iconOnly, ...props }, forwardRef) => {
+    const classes = clsx(
+      [components_textField_textField.styles[`${components_textField_textField.rootClassName}__button`]],
+      {
+        [components_textField_textField.styles[`${components_textField_textField.rootClassName}__button--attached`]]: variant === "attached",
+        [components_textField_textField.styles[`${components_textField_textField.rootClassName}__button--separated`]]: variant === "separated"
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        ...props,
+        variant: "primary",
+        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+exports.Button = Button;

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { Button as PrimitiveButton } from '../button';
+
+export type TextFieldButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'> & {
+    variant?: 'attached' | 'separated';
+};
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    asChild?: boolean | undefined;
+    loading?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+} & {
+    iconOnly: true;
+    "aria-label": string;
+} & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    asChild?: boolean | undefined;
+    loading?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+} & {
+    iconOnly?: false | undefined;
+    "aria-label"?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
+    variant?: "attached" | "separated" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./text-field.js";
+import { Button as Button$1 } from "../button/button.js";
+const Button = React__default.forwardRef(
+  ({ className, variant, iconOnly, ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles[`${rootClassName}__button`]],
+      {
+        [styles[`${rootClassName}__button--attached`]]: variant === "attached",
+        [styles[`${rootClassName}__button--separated`]]: variant === "separated"
+      },
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ...props,
+        variant: "primary",
+        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
+        ref: forwardRef,
+        className: classes
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/components/text-field/text-field-clear-button.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_input_inputClearButton = require("../input/input-clear-button.cjs");
+const ClearButton = React.forwardRef(
+  (props, forwardRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(components_input_inputClearButton.ClearButton, { ...props, ref: forwardRef });
+  }
+);
+ClearButton.displayName = "ClearButton";
+exports.ClearButton = ClearButton;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ClearButtonProps } from '../input/input-clear-button';
+
+export type TextFieldClearButtonProps = ClearButtonProps;
+/** This is a button that is used to clear the input field  */
+export declare const ClearButton: React.ForwardRefExoticComponent<ClearButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { ClearButton as ClearButton$1 } from "../input/input-clear-button.js";
+const ClearButton = React__default.forwardRef(
+  (props, forwardRef) => {
+    return /* @__PURE__ */ jsx(ClearButton$1, { ...props, ref: forwardRef });
+  }
+);
+ClearButton.displayName = "ClearButton";
+export {
+  ClearButton
+};

package/dist/components/text-field/text-field-error-list.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const components_fieldErrorText_fieldErrorText = require("../field-error-text/field-error-text.cjs");
+const components_textField_textField = require("./text-field.cjs");
+const ErrorList = React.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([components_textField_textField.styles[`${components_textField_textField.rootClassName}__error-list`]], className);
+    const context = React.useContext(components_textField_textField.TextFieldContext);
+    const errors = context == null ? void 0 : context.errors;
+    React.useEffect(() => {
+      if (!context)
+        return;
+      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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(components_fieldErrorText_fieldErrorText.FieldErrorText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_fieldErrorText_fieldErrorText.FieldErrorText.Indicator, {}),
+      error
+    ] }) }, error))) });
+  }
+);
+ErrorList.displayName = "ErrorList";
+exports.ErrorList = ErrorList;