@telia/teddy 0.0.23 → 0.0.25

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;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { TextFieldContextValue } from './text-field';
+
+export type TextFieldErrorListProps = Omit<React.ComponentPropsWithoutRef<'ul'>, 'children'> & {
+    children?: ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode) | React.ReactNode;
+};
+export declare const ErrorList: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, "children"> & {
+    children?: ((args: Pick<TextFieldContextValue, 'errors'>) => React.ReactNode) | React.ReactNode;
+} & React.RefAttributes<HTMLUListElement>>;

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

@@ -0,0 +1,28 @@
+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 { s as styles, rootClassName, TextFieldContext } from "./text-field.js";
+const ErrorList = 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 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))) });
+  }
+);
+ErrorList.displayName = "ErrorList";
+export {
+  ErrorList
+};

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

@@ -0,0 +1,19 @@
+"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_helperText_helperText = require("../helper-text/helper-text.cjs");
+const components_textField_textField = require("./text-field.cjs");
+const HelperText = React.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React.useContext(components_textField_textField.TextFieldContext);
+    const classes = clsx([components_textField_textField.styles[`${components_textField_textField.rootClassName}__helper-text`]], className);
+    React.useEffect(() => {
+      context == null ? void 0 : context.setHelperTextId(`${context.id}-helper-text`);
+    }, [context]);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_helperText_helperText.HelperText, { id: context == null ? void 0 : context.helperTextId, ...props, ref: forwardRef, className: classes });
+  }
+);
+HelperText.displayName = "HelperText";
+exports.HelperText = HelperText;

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { HelperTextProps } from '../helper-text';
+
+export type TextFieldHelperTextProps = HelperTextProps;
+export declare const HelperText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import { HelperText as HelperText$1 } from "../helper-text/helper-text.js";
+import { TextFieldContext, s as styles, rootClassName } from "./text-field.js";
+const HelperText = React__default.forwardRef(
+  ({ className, ...props }, forwardRef) => {
+    const context = React__default.useContext(TextFieldContext);
+    const classes = clsx([styles[`${rootClassName}__helper-text`]], className);
+    React__default.useEffect(() => {
+      context == null ? void 0 : context.setHelperTextId(`${context.id}-helper-text`);
+    }, [context]);
+    return /* @__PURE__ */ jsx(HelperText$1, { id: context == null ? void 0 : context.helperTextId, ...props, ref: forwardRef, className: classes });
+  }
+);
+HelperText.displayName = "HelperText";
+export {
+  HelperText
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_input_index = require("../input/index.cjs");
+const components_textField_textField = require("./text-field.cjs");
+const Indicator = React.forwardRef(
+  (props, forwardRef) => {
+    const context = React.useContext(components_textField_textField.TextFieldContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_input_index.InputGroup.Indicator, { ...props, isValid: context == null ? void 0 : context.isValid, isLoading: context == null ? void 0 : context.isLoading, ref: forwardRef });
+  }
+);
+Indicator.displayName = "Indicator";
+exports.Indicator = Indicator;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { InputGroupProps } from '../input';
+import { indicatorFelidsInRoot } from './util';
+
+export type TextFieldIndicatorProps = Omit<InputGroupProps['Indicator'], (typeof indicatorFelidsInRoot)[number]>;
+export declare const Indicator: React.ForwardRefExoticComponent<TextFieldIndicatorProps & React.RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { InputGroup } from "../input/index.js";
+import { TextFieldContext } from "./text-field.js";
+const Indicator = React__default.forwardRef(
+  (props, forwardRef) => {
+    const context = React__default.useContext(TextFieldContext);
+    return /* @__PURE__ */ jsx(InputGroup.Indicator, { ...props, isValid: context == null ? void 0 : context.isValid, isLoading: context == null ? void 0 : context.isLoading, ref: forwardRef });
+  }
+);
+Indicator.displayName = "Indicator";
+export {
+  Indicator
+};