@ttoss/ui 6.1.0 → 6.2.0

package/dist/esm/index.js

@@ -0,0 +1,1352 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+
+// src/components/Button.tsx
+import { Icon } from "@ttoss/react-icons";
+import * as React2 from "react";
+import { Button as ButtonUi } from "theme-ui";
+var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
+  const {
+    children,
+    leftIcon,
+    rightIcon,
+    loading,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */React2.createElement(ButtonUi, {
+    type: "button",
+    ...restProps,
+    ref,
+    sx: {
+      cursor: "pointer",
+      paddingX: "6",
+      paddingY: "4",
+      fontFamily: "body",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4",
+      "&:disabled": {
+        cursor: "not-allowed"
+      },
+      ...restProps.sx
+    }
+  }, loading && /* @__PURE__ */React2.createElement(Icon, {
+    inline: true,
+    icon: "three-dots-loading"
+  }), !loading && leftIcon && /* @__PURE__ */React2.createElement(Icon, {
+    inline: true,
+    icon: leftIcon
+  }), children, rightIcon && /* @__PURE__ */React2.createElement(Icon, {
+    inline: true,
+    icon: rightIcon
+  }));
+});
+Button.displayName = "Button";
+
+// src/components/ActionButton.tsx
+var ActionButton = /* @__PURE__ */__name(({
+  icon,
+  variant = "default",
+  sx,
+  ...props
+}) => {
+  const variantStyles = {
+    default: {
+      backgroundColor: "action.background.secondary.default",
+      color: "action.text.primary.default",
+      border: "sm",
+      borderColor: "action.background.primary.default",
+      transition: "all 0.2s",
+      ":is(:focus-within, :hover):not(:disabled)": {
+        backgroundColor: "action.background.secondary.active",
+        borderColor: "action.border.secondary.active",
+        color: "action.text.secondary.active"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default"
+      }
+    },
+    accent: {
+      backgroundColor: "action.background.accent.default",
+      color: "action.text.accent.default",
+      border: "none",
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "action.background.muted.default",
+        color: "action.text.muted.default"
+      }
+    },
+    quiet: {
+      backgroundColor: "action.background.muted.default",
+      color: "action.text.accent.default",
+      border: "none",
+      borderColor: "transparent",
+      ":disabled": {
+        cursor: "default",
+        opacity: 0.6,
+        color: "action.text.muted.default"
+      }
+    }
+  };
+  return /* @__PURE__ */React.createElement(Button, {
+    leftIcon: icon,
+    sx: {
+      paddingY: "2",
+      paddingX: "4",
+      // Apply variant-specific styles
+      ...variantStyles[variant],
+      ...sx
+    },
+    ...props
+  });
+}, "ActionButton");
+
+// src/components/Badge.tsx
+import { Icon as Icon2 } from "@ttoss/react-icons";
+import { Badge as BadgeUi } from "theme-ui";
+
+// src/components/Text.tsx
+import { Text } from "theme-ui";
+
+// src/components/Badge.tsx
+var Badge = /* @__PURE__ */__name(({
+  icon,
+  children,
+  sx,
+  chip,
+  onDelete,
+  ...props
+}) => {
+  return /* @__PURE__ */React.createElement(BadgeUi, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      fontFamily: "body",
+      fontWeight: "normal",
+      lineHeight: "base",
+      fontSize: "sm",
+      paddingX: "2",
+      borderRadius: "informative",
+      paddingY: "1",
+      gap: "2",
+      ...sx
+    },
+    ...props
+  }, icon && /* @__PURE__ */React.createElement(Icon2, {
+    inline: true,
+    icon
+  }), children, chip && /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      cursor: "pointer",
+      lineHeight: 0,
+      color: "currentcolor",
+      alignSelf: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Icon2, {
+    onClick: onDelete,
+    inline: true,
+    icon: "close"
+  })));
+}, "Badge");
+
+// src/components/Box.tsx
+import { Box } from "theme-ui";
+
+// src/components/Card.tsx
+import * as React3 from "react";
+import { Box as Box2, Card as CardUi } from "theme-ui";
+var Card = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React3.createElement(CardUi, {
+    ...props,
+    sx: {
+      backgroundColor: "display.background.secondary.default",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      borderRadius: "lg",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content",
+      boxShadow: "2px 4px 8px #E5E7EB",
+      ...props.sx
+    }
+  });
+}, "Card");
+var CardTitle = /* @__PURE__ */__name(({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */React3.createElement(Box2, {
+    ...props,
+    sx: {
+      paddingY: "4",
+      paddingX: "8",
+      width: "full",
+      borderBottom: "md",
+      borderBottomColor: "display.border.muted.default",
+      ...props.sx
+    }
+  }, children);
+}, "CardTitle");
+var CardBody = /* @__PURE__ */__name(({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */React3.createElement(Box2, {
+    ...props,
+    sx: {
+      paddingY: "4",
+      paddingX: "8",
+      width: "full",
+      backgroundColor: "display.background.muted.default",
+      ...props.sx
+    }
+  }, children);
+}, "CardBody");
+var CardFooter = /* @__PURE__ */__name(({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */React3.createElement(Box2, {
+    ...props,
+    sx: {
+      paddingY: "2",
+      paddingX: "8",
+      width: "full",
+      ...props.sx
+    }
+  }, children);
+}, "CardFooter");
+Card.Title = CardTitle;
+Card.Body = CardBody;
+Card.Footer = CardFooter;
+
+// src/components/Checkbox.tsx
+import * as React4 from "react";
+import { Checkbox as CheckBoxUi } from "theme-ui";
+var Checkbox = /* @__PURE__ */React4.forwardRef(({
+  indeterminate = false,
+  ...rest
+}, ref) => {
+  const innerRef = React4.useRef(null);
+  const setRefs = React4.useCallback(element => {
+    innerRef.current = element;
+    if (typeof ref === "function") {
+      ref(element);
+    } else if (ref) {
+      ref.current = element;
+    }
+  }, [ref]);
+  React4.useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  if (indeterminate) {
+    return /* @__PURE__ */React4.createElement("input", {
+      type: "checkbox",
+      ref: setRefs,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */React4.createElement(CheckBoxUi, {
+    ref: setRefs,
+    ...rest
+  });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/CloseButton.tsx
+import { Close as CloseUI } from "theme-ui";
+var CloseButton = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(CloseUI, {
+    type: "button",
+    "aria-label": props.ariaLabel,
+    sx: {
+      ...props.sx
+    },
+    ...props
+  });
+}, "CloseButton");
+
+// src/components/Container.tsx
+import * as React5 from "react";
+import { Container as ContainerUi } from "theme-ui";
+var Container = /* @__PURE__ */React5.forwardRef((props, ref) => {
+  return /* @__PURE__ */React5.createElement(ContainerUi, {
+    ref,
+    ...props
+  });
+});
+Container.displayName = "Container";
+
+// src/components/Divider.tsx
+import { Divider } from "theme-ui";
+
+// src/components/Flex.tsx
+import { Flex } from "theme-ui";
+
+// src/components/Grid.tsx
+import { Grid } from "theme-ui";
+
+// src/components/Heading.tsx
+import { Heading } from "theme-ui";
+
+// src/components/HelpText.tsx
+var HelpText = /* @__PURE__ */__name(({
+  sx,
+  disabled,
+  negative,
+  ...props
+}) => {
+  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
+  return /* @__PURE__ */React.createElement(Text, {
+    variant,
+    sx: {
+      fontSize: "sm",
+      fontFamily: "body",
+      lineHeight: "normal",
+      ...sx
+    },
+    "aria-disabled": disabled ? "true" : void 0,
+    ...props
+  });
+}, "HelpText");
+
+// src/components/IconButton.tsx
+import { Icon as Icon3 } from "@ttoss/react-icons";
+import { IconButton as IconButtonUi } from "theme-ui";
+var IconButton = /* @__PURE__ */__name(props => {
+  const {
+    icon,
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */React.createElement(IconButtonUi, {
+    type: "button",
+    ...restProps,
+    sx: {
+      cursor: "pointer",
+      borderRadius: "sm",
+      "&:disabled": {
+        cursor: "not-allowed"
+      },
+      ...restProps.sx
+    }
+  }, icon ? /* @__PURE__ */React.createElement(Icon3, {
+    inline: true,
+    icon
+  }) : children);
+}, "IconButton");
+
+// src/components/Image.tsx
+import { Image } from "theme-ui";
+
+// src/components/InfiniteLinearProgress.tsx
+import * as React6 from "react";
+
+// src/components/LinearProgress.tsx
+import { Progress } from "theme-ui";
+
+// src/components/InfiniteLinearProgress.tsx
+var MAX_PROGRESS = 100;
+var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(oldProgress => {
+        if (oldProgress === MAX_PROGRESS) {
+          return 0;
+        }
+        let diff = 0;
+        if (oldProgress > 0.97 * MAX_PROGRESS) {
+          diff -= 0.75 * MAX_PROGRESS;
+        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
+          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
+        } else {
+          diff = Math.random() * (MAX_PROGRESS * 0.02);
+        }
+        return Math.min(oldProgress + diff, MAX_PROGRESS);
+      });
+    }, 100);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  return /* @__PURE__ */React6.createElement(Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
+}, "InfiniteLinearProgress");
+
+// src/components/Input.tsx
+import { Input as InputUI } from "theme-ui";
+var isInputIconConfig = /* @__PURE__ */__name(icon => {
+  return icon !== void 0 && typeof icon === "object" && "icon" in icon && (typeof icon.icon === "string" || typeof icon.icon === "object" && "body" in icon.icon);
+}, "isInputIconConfig");
+var normalizeIcon = /* @__PURE__ */__name(icon => {
+  if (!icon) {
+    return void 0;
+  }
+  if (isInputIconConfig(icon)) {
+    return icon;
+  }
+  return {
+    icon
+  };
+}, "normalizeIcon");
+var Input = /* @__PURE__ */__name(({
+  leadingIcon,
+  trailingIcon: trailingIconProp,
+  className,
+  sx,
+  ...inputProps
+}) => {
+  const normalizedLeadingIcon = normalizeIcon(leadingIcon);
+  const normalizedTrailingIconProp = normalizeIcon(trailingIconProp);
+  const ariaInvalid = inputProps["aria-invalid"];
+  const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+  const trailingIcon = isInvalid ? {
+    ...normalizedTrailingIconProp,
+    icon: "warning-alt"
+  } : normalizedTrailingIconProp;
+  const isWarning = !isInvalid && trailingIcon?.icon === "warning-alt";
+  const wrapperClassName = [className, isWarning && "is-warning"].filter(Boolean).join(" ");
+  return /* @__PURE__ */React.createElement(Flex, {
+    className: wrapperClassName,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    }
+  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
+    ...normalizedLeadingIcon,
+    "data-testid": "input-leading-icon",
+    variant: normalizedLeadingIcon.variant ?? "info",
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      left: "1rem",
+      ...normalizedLeadingIcon.sx
+    }
+  }), /* @__PURE__ */React.createElement(InputUI, {
+    sx: {
+      fontFamily: "body",
+      paddingY: "3",
+      paddingX: "4",
+      ...sx,
+      paddingLeft: leadingIcon ? "10" : void 0,
+      paddingRight: trailingIcon ? "10" : void 0,
+      margin: 0
+    },
+    className,
+    ...inputProps
+  }), trailingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
+    ...trailingIcon,
+    "data-testid": "input-trailing-icon",
+    variant: trailingIcon.variant ?? "info",
+    sx: {
+      position: "absolute",
+      right: "1rem",
+      alignSelf: "center",
+      color: isWarning ? "feedback.text.caution.default" : void 0,
+      fontSize: "xl",
+      ...trailingIcon.sx
+    }
+  }));
+}, "Input");
+
+// src/components/InputNumber.tsx
+import { Icon as Icon4 } from "@ttoss/react-icons";
+import * as React7 from "react";
+import { Input as Input2 } from "theme-ui";
+var InputNumber = /* @__PURE__ */React7.forwardRef(({
+  sx,
+  value,
+  infoIcon,
+  onChange,
+  onClickInfoIcon,
+  ...inputProps
+}, ref) => {
+  const sxProps = React7.useMemo(() => {
+    const size = String(typeof value === "undefined" ? 0 : value).length;
+    if (inputProps["aria-invalid"] === "true") {
+      return {
+        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
+        textAlign: "left",
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        ...sx,
+        paddingLeft: "6",
+        paddingRight: "5",
+        margin: 0
+      };
+    }
+    return {
+      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
+      textAlign: "center",
+      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
+      },
+      fontFamily: "body",
+      paddingY: "2",
+      paddingX: "4",
+      ...sx,
+      paddingLeft: "5",
+      paddingRight: "5",
+      margin: 0
+    };
+  }, [inputProps, value, sx]);
+  const handleChangeUp = /* @__PURE__ */__name(() => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(-1);
+      return;
+    }
+    onChange(value - 1);
+  }, "handleChangeUp");
+  const handleChangeDown = /* @__PURE__ */__name(() => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(1);
+      return;
+    }
+    onChange(value + 1);
+  }, "handleChangeDown");
+  return /* @__PURE__ */React7.createElement(Flex, {
+    sx: {
+      width: "fit-content",
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    ref,
+    "aria-invalid": inputProps["aria-invalid"]
+  }, /* @__PURE__ */React7.createElement(Input2, {
+    ref,
+    variant: "forms.inputNumber",
+    sx: sxProps,
+    type: "number",
+    onChange: /* @__PURE__ */__name(e => {
+      onChange(Number(e.target.value));
+    }, "onChange"),
+    value,
+    ...inputProps
+  }), /* @__PURE__ */React7.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      left: "1rem",
+      zIndex: 1,
+      cursor: "pointer"
+    },
+    onClick: handleChangeUp
+  }, /* @__PURE__ */React7.createElement(Icon4, {
+    icon: "picker-down"
+  })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      right: "2.5rem",
+      zIndex: 1,
+      cursor: onClickInfoIcon ? "pointer" : "default"
+    },
+    onClick: onClickInfoIcon
+  }, /* @__PURE__ */React7.createElement(Icon4, {
+    icon: "info"
+  })), /* @__PURE__ */React7.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      right: "1rem",
+      zIndex: 1,
+      cursor: "pointer"
+    },
+    onClick: handleChangeDown
+  }, /* @__PURE__ */React7.createElement(Icon4, {
+    icon: "picker-up"
+  })));
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/InputPassword.tsx
+import * as React8 from "react";
+var InputPassword = /* @__PURE__ */__name(({
+  showPasswordByDefault = false,
+  ...inputPasswordProps
+}) => {
+  const [hidePass, setHidePass] = React8.useState(Boolean(!showPasswordByDefault));
+  const {
+    icon,
+    inputType
+  } = React8.useMemo(() => {
+    return {
+      icon: hidePass ? "view-off" : "view-on",
+      inputType: hidePass ? "password" : "text"
+    };
+  }, [hidePass]);
+  const handleClick = /* @__PURE__ */__name(() => {
+    setHidePass(prev => {
+      return !prev;
+    });
+  }, "handleClick");
+  return /* @__PURE__ */React8.createElement(Input, {
+    ...inputPasswordProps,
+    trailingIcon: {
+      icon,
+      onClick: handleClick
+    },
+    type: inputType
+  });
+}, "InputPassword");
+
+// src/components/Label.tsx
+import { Icon as Icon5 } from "@ttoss/react-icons";
+import * as React9 from "react";
+import { Label as LabelUi } from "theme-ui";
+
+// src/components/Tooltip.tsx
+import { Tooltip as TooltipReact } from "react-tooltip";
+var Tooltip = /* @__PURE__ */__name(({
+  variant = "info",
+  sx,
+  ...props
+}) => {
+  const className = `tooltip-component tooltip-${variant}`;
+  const getVariantStyles = /* @__PURE__ */__name(variantType => {
+    const variants = {
+      info: {
+        backgroundColor: "input.background.secondary.default",
+        color: "feedback.text.secondary.default",
+        borderColor: "feedback.border.secondary.default"
+      },
+      success: {
+        backgroundColor: "feedback.background.positive.default",
+        color: "feedback.text.positive.default",
+        borderColor: "feedback.border.positive.default"
+      },
+      warning: {
+        backgroundColor: "feedback.background.caution.default",
+        color: "feedback.text.caution.default",
+        borderColor: "feedback.border.caution.default"
+      },
+      error: {
+        backgroundColor: "feedback.background.negative.default",
+        color: "feedback.text.negative.default",
+        borderColor: "feedback.border.negative.default"
+      }
+    };
+    return variants[variantType] || variants.info;
+  }, "getVariantStyles");
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: /* @__PURE__ */__name(({
+      fonts
+    }) => {
+      const variantStyles = getVariantStyles(variant);
+      return {
+        ".example-arrow": {
+          display: "none"
+        },
+        ".tooltip-component": {
+          fontFamily: fonts?.body,
+          paddingY: "2",
+          paddingX: "3",
+          border: "sm",
+          borderRadius: "xl",
+          zIndex: "tooltip",
+          opacity: "1",
+          lineHeight: "shorter",
+          letterSpacing: "wide",
+          a: {
+            color: "feedback.text.secondary.default",
+            fontFamily: "body",
+            textDecorationLine: "underline",
+            lineHeight: "normal"
+          },
+          ...variantStyles,
+          ...sx
+        },
+        [`&.tooltip-${variant}`]: variantStyles
+      };
+    }, "sx")
+  }, /* @__PURE__ */React.createElement(TooltipReact, {
+    className,
+    ...props,
+    classNameArrow: "example-arrow"
+  }, props.children));
+}, "Tooltip");
+
+// src/components/Label.tsx
+var TOOLTIP_LABEL = "tooltip";
+var Label = /* @__PURE__ */__name(({
+  children,
+  tooltip,
+  sx,
+  ...props
+}) => {
+  const id = React9.useId();
+  const tooltipId = `${id}-tooltip`;
+  return /* @__PURE__ */React9.createElement(LabelUi, {
+    sx: {
+      alignItems: "center",
+      fontSize: "sm",
+      lineHeight: "normal",
+      width: "fit-content",
+      color: "input.text.secondary.default",
+      ...sx
+    },
+    ...props
+  }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
+    "data-tooltip-id": tooltipId,
+    sx: {
+      color: "currentcolor",
+      cursor: "pointer",
+      marginLeft: "1"
+    },
+    "aria-label": TOOLTIP_LABEL
+  }, /* @__PURE__ */React9.createElement(Icon5, {
+    icon: "info"
+  }), /* @__PURE__ */React9.createElement(Tooltip, {
+    id: tooltipId,
+    ...tooltip
+  })));
+}, "Label");
+
+// src/components/Link.tsx
+import * as React10 from "react";
+import { Link as LinkUi } from "theme-ui";
+var Link = /* @__PURE__ */React10.forwardRef(({
+  quiet,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */React10.createElement(LinkUi, {
+    className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
+    ...props,
+    ref
+  });
+});
+Link.displayName = "Link";
+
+// src/components/Paragraph.tsx
+import { Paragraph } from "theme-ui";
+
+// src/components/Radio.tsx
+import { Radio } from "theme-ui";
+
+// src/components/SegmentedControl.tsx
+import * as React11 from "react";
+import { Box as Box3, Flex as Flex2 } from "theme-ui";
+var SegmentedControl = /* @__PURE__ */__name(({
+  options,
+  value: propValue,
+  defaultValue,
+  onChange,
+  disabled,
+  className,
+  sx,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
+  React11.useEffect(() => {
+    if (propValue !== void 0) {
+      setInternalValue(propValue);
+    }
+  }, [propValue]);
+  const handleChange = /* @__PURE__ */__name(newValue => {
+    setInternalValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }, "handleChange");
+  const normalizedOptions = options.map(option => {
+    return typeof option === "string" || typeof option === "number" ? {
+      label: option,
+      value: option
+    } : option;
+  });
+  const currentValue = propValue !== void 0 ? propValue : internalValue;
+  return /* @__PURE__ */React11.createElement(Flex2, {
+    className,
+    sx: {
+      width: "100%",
+      borderRadius: "4xl",
+      border: "sm",
+      borderColor: "display.border.primary.default",
+      overflow: "hidden",
+      position: "relative",
+      ".rc-segmented": {
+        width: "100%",
+        padding: "0",
+        backgroundColor: "display.background.primary.default",
+        position: "relative",
+        display: "flex",
+        flexGrow: 1
+      },
+      ".rc-segmented-group, .custom-segmented-group": {
+        borderRadius: "4xl",
+        gap: "0",
+        display: "flex",
+        width: "100%",
+        position: "relative"
+      },
+      ".rc-segmented-item": {
+        borderRadius: "4xl",
+        margin: 0,
+        paddingX: "5",
+        paddingY: "3",
+        fontSize: "lg",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "action.text.accent.default",
+        flex: "1 1 auto",
+        minWidth: "min-content",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        zIndex: 2,
+        transition: "background-color 0.2s ease, color 0.2s ease",
+        cursor: "pointer",
+        "&:focus": {
+          outline: "2px solid",
+          outlineColor: "action.background.accent.default",
+          outlineOffset: "2px",
+          boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)"
+        },
+        "&:focus-visible": {
+          outline: "2px solid",
+          outlineColor: "action.background.accent.default",
+          outlineOffset: "2px"
+        },
+        "&:hover:not(.rc-segmented-item-selected)": {
+          backgroundColor: "action.background.muted.default"
+        },
+        'input[type="radio"]': {
+          display: "none"
+        }
+      },
+      ".rc-segmented-item-selected": {
+        backgroundColor: "action.background.accent.default",
+        color: "action.text.accent.active"
+      },
+      ".rc-segmented-thumb": {
+        backgroundColor: "action.background.accent.default",
+        borderRadius: "4xl",
+        zIndex: -1,
+        margin: 0,
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: 0,
+        transition: "transform 0.2s ease, left 0.2s ease"
+      },
+      ".rc-segmented-item-disabled": {
+        opacity: 0.5,
+        cursor: "not-allowed",
+        backgroundColor: "action.background.muted.disabled"
+      },
+      ...sx
+    },
+    ...rest
+  }, /* @__PURE__ */React11.createElement("div", {
+    className: "rc-segmented"
+  }, /* @__PURE__ */React11.createElement(Flex2, {
+    className: "rc-segmented-group custom-segmented-group"
+  }, normalizedOptions.map((option, index) => {
+    const isSelected = option.value === currentValue;
+    const isLastItem = index === normalizedOptions.length - 1;
+    const isItemDisabled = disabled || option.disabled;
+    const showDivider = !isLastItem && option.value !== currentValue && normalizedOptions[index + 1].value !== currentValue;
+    return /* @__PURE__ */React11.createElement(React11.Fragment, {
+      key: `${index}-${option.value}`
+    }, /* @__PURE__ */React11.createElement(Box3, {
+      as: "label",
+      className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
+      onClick: /* @__PURE__ */__name(() => {
+        if (!disabled && !option.disabled) {
+          handleChange(option.value);
+        }
+      }, "onClick")
+    }, /* @__PURE__ */React11.createElement("input", {
+      type: "radio",
+      value: option.value,
+      checked: isSelected,
+      disabled: isItemDisabled,
+      onChange: /* @__PURE__ */__name(e => {
+        if (!disabled && !option.disabled && e.target.checked) {
+          handleChange(option.value);
+        }
+      }, "onChange")
+    }), /* @__PURE__ */React11.createElement("div", {
+      className: "rc-segmented-item-label"
+    }, option.label)), showDivider && /* @__PURE__ */React11.createElement(Box3, {
+      className: "segmented-divider",
+      sx: {
+        height: "60%",
+        width: "1px",
+        backgroundColor: "action.text.accent.default",
+        opacity: 0.4,
+        alignSelf: "center",
+        zIndex: 3
+      }
+    }));
+  }), currentValue !== void 0 && /* @__PURE__ */React11.createElement("div", {
+    className: "rc-segmented-thumb",
+    style: {
+      width: `${100 / normalizedOptions.length}%`,
+      transform: `translateX(${normalizedOptions.findIndex(option => {
+        return option.value === currentValue;
+      }) * 100}%)`
+    }
+  }))));
+}, "SegmentedControl");
+
+// src/components/Select.tsx
+import { Icon as Icon6 } from "@ttoss/react-icons";
+import * as React12 from "react";
+import ReactSelect, { components } from "react-select";
+var Control = /* @__PURE__ */__name(props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const borderColor = (() => {
+    if (isDisabled) {
+      return "display.border.muted.default";
+    }
+    if (hasError) {
+      return "display.border.negative.default";
+    }
+    return "display.border.muted.default";
+  })();
+  const backgroundColor = (() => {
+    if (isDisabled) {
+      return "display.background.muted.default";
+    }
+    return "display.background.secondary.default";
+  })();
+  return /* @__PURE__ */React12.createElement(Box, {
+    sx: {
+      ".react-select__control": {
+        borderColor,
+        backgroundColor,
+        paddingX: "4",
+        paddingY: "3"
+      }
+    }
+  }, /* @__PURE__ */React12.createElement(components.Control, props));
+}, "Control");
+var DropdownIndicator = /* @__PURE__ */__name(props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const color = (() => {
+    if (isDisabled) {
+      return "display.text.muted.default";
+    }
+    return "text";
+  })();
+  return /* @__PURE__ */React12.createElement(Text, {
+    sx: {
+      fontSize: "md",
+      color,
+      alignSelf: "center",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /* @__PURE__ */React12.createElement(Icon6, {
+    icon: "picker-down"
+  }));
+}, "DropdownIndicator");
+var IndicatorsContainer = /* @__PURE__ */__name(({
+  children
+}) => {
+  return /* @__PURE__ */React12.createElement(Box, {
+    sx: {
+      marginLeft: "4",
+      border: "none"
+    }
+  }, children);
+}, "IndicatorsContainer");
+var Placeholder = /* @__PURE__ */__name(({
+  children
+}) => {
+  return /* @__PURE__ */React12.createElement(Text, {
+    sx: {
+      color: "onMuted",
+      alignSelf: "center"
+    }
+  }, children);
+}, "Placeholder");
+var SelectContainer = /* @__PURE__ */__name(({
+  children,
+  ...props
+}) => {
+  const {
+    sx,
+    css: css2
+  } = props.selectProps;
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /* @__PURE__ */
+    React12.createElement(Box, {
+      sx,
+      css: css2
+    }, /* @__PURE__ */React12.createElement(components.SelectContainer, props, children))
+  );
+}, "SelectContainer");
+var ValueContainer = /* @__PURE__ */__name(({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...props
+}) => {
+  const {
+    leadingIcon,
+    trailingIcon,
+    isSearchable
+  } = props.selectProps;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const trailingIconColor = (() => {
+    if (hasError) {
+      return "danger";
+    }
+    return "text";
+  })();
+  const finalLeadingIcon = (() => {
+    if (!isSearchable) {
+      return leadingIcon;
+    }
+    return leadingIcon || "search";
+  })();
+  return /* @__PURE__ */React12.createElement(Flex, {
+    sx: {
+      gap: "4",
+      flex: 1
+    }
+  }, finalLeadingIcon && /* @__PURE__ */React12.createElement(Text, {
+    sx: {
+      alignSelf: "center",
+      pointerEvents: "none",
+      lineHeight: 0,
+      fontSize: "md"
+    }
+  }, /* @__PURE__ */React12.createElement(Icon6, {
+    icon: finalLeadingIcon
+  })), /* @__PURE__ */React12.createElement(Flex, {
+    sx: {
+      flex: 1,
+      alignItems: "center"
+    }
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React12.createElement(Text, {
+    className: hasError ? "error-icon" : "",
+    sx: {
+      alignSelf: "center",
+      pointerEvents: "none",
+      lineHeight: 0,
+      fontSize: "md",
+      color: trailingIconColor
+    }
+  }, /* @__PURE__ */React12.createElement(Icon6, {
+    icon: hasError ? "warning-alt" : trailingIcon
+  })));
+}, "ValueContainer");
+var Select = /* @__PURE__ */React12.forwardRef(({
+  ...props
+}, ref) => {
+  const value = props.options?.find(option => {
+    if ("value" in option) {
+      return option.value === props.value;
+    }
+    return false;
+  });
+  return /* @__PURE__ */React12.createElement(ReactSelect, {
+    ref,
+    /**
+     * https://react-select.com/components
+     */
+    components: {
+      Control,
+      DropdownIndicator,
+      IndicatorsContainer,
+      Placeholder,
+      SelectContainer,
+      ValueContainer
+    },
+    isDisabled: props.disabled,
+    ...props,
+    value,
+    onChange: /* @__PURE__ */__name(value2 => {
+      props.onChange?.(value2?.value);
+    }, "onChange"),
+    styles: {
+      input: /* @__PURE__ */__name(baseStyles => {
+        return {
+          ...baseStyles,
+          position: "absolute"
+        };
+      }, "input")
+    },
+    /**
+     * https://react-select.com/styles#the-classnameprefix-prop
+     */
+    classNamePrefix: "react-select"
+  });
+});
+Select.displayName = "Select";
+
+// src/components/Slider.tsx
+import { Slider } from "theme-ui";
+
+// src/components/Spinner.tsx
+import { Spinner } from "theme-ui";
+
+// src/components/Stack.tsx
+var Stack = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Flex, {
+    ...props,
+    sx: {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      ...props.sx
+    }
+  });
+}, "Stack");
+
+// src/components/Switch.tsx
+import { Switch as SwitchUi } from "theme-ui";
+var Switch = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(SwitchUi, {
+    ...props,
+    role: "switch",
+    "aria-checked": props.checked || false,
+    sx: {
+      backgroundColor: "input.background.muted.disabled",
+      "input:checked ~ &": {
+        backgroundColor: "input.background.accent.default"
+      },
+      "input ~ & > div": {
+        backgroundColor: "input.background.primary.default"
+      },
+      "input:checked ~ & > div": {
+        backgroundColor: "input.text.primary.default"
+      },
+      "input:focus ~ &": {
+        outline: "md",
+        outlineColor: "input.border.accent.default",
+        outlineOffset: "0px"
+      },
+      ...props.sx
+    }
+  });
+}, "Switch");
+
+// src/components/Tag.tsx
+import * as React13 from "react";
+var tagVariantMap = {
+  positive: {
+    bg: "feedback.background.positive.default",
+    color: "feedback.text.positive.default"
+  },
+  accent: {
+    bg: "action.background.accent.default",
+    color: "action.text.accent.default"
+  },
+  caution: {
+    bg: "feedback.background.caution.default",
+    color: "feedback.text.caution.default"
+  },
+  muted: {
+    bg: "display.background.muted.default",
+    color: "display.text.muted.default"
+  },
+  negative: {
+    bg: "feedback.background.negative.default",
+    color: "feedback.text.negative.default"
+  },
+  primary: {
+    bg: "action.background.primary.default",
+    color: "action.text.primary.default"
+  },
+  secondary: {
+    bg: "action.background.secondary.default",
+    color: "action.text.secondary.default"
+  },
+  default: {
+    bg: "action.background.muted.default",
+    color: "action.text.muted.default"
+  }
+};
+var Tag = /* @__PURE__ */__name(({
+  children,
+  variant = "default",
+  sx
+}) => {
+  const colors = tagVariantMap[variant];
+  const baseStyles = {
+    ml: 2,
+    px: 2,
+    py: 0,
+    fontSize: "xs",
+    borderRadius: "full",
+    backgroundColor: colors.bg,
+    color: colors.color,
+    border: "1px solid",
+    borderColor: "border.default",
+    fontWeight: "medium",
+    lineHeight: 1.5,
+    display: "inline-flex",
+    alignItems: "center"
+  };
+  if (Array.isArray(children)) {
+    return /* @__PURE__ */React13.createElement(Box, {
+      as: "span",
+      sx: {
+        ml: 2,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 1,
+        ...sx
+      }
+    }, children.map((child, i) => {
+      return /* @__PURE__ */React13.createElement(Box, {
+        key: i,
+        as: "span",
+        sx: {
+          ...baseStyles,
+          px: 2,
+          py: 0,
+          fontSize: "xs",
+          backgroundColor: colors.bg,
+          color: colors.color
+        }
+      }, child);
+    }));
+  }
+  return /* @__PURE__ */React13.createElement(Box, {
+    as: "span",
+    sx: {
+      ...baseStyles,
+      ...sx
+    }
+  }, children);
+}, "Tag");
+
+// src/components/Textarea.tsx
+import { Icon as Icon7 } from "@ttoss/react-icons";
+import * as React14 from "react";
+import { Textarea as TextareaUI } from "theme-ui";
+var Textarea = /* @__PURE__ */React14.forwardRef(({
+  trailingIcon,
+  className,
+  sx,
+  ...textareaProps
+}, ref) => {
+  return /* @__PURE__ */React14.createElement(Flex, {
+    className,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    }
+  }, /* @__PURE__ */React14.createElement(TextareaUI, {
+    ref,
+    sx: {
+      fontFamily: "body",
+      paddingY: "4",
+      paddingX: "5",
+      ...sx,
+      paddingRight: trailingIcon ? "7" : void 0,
+      margin: 0
+    },
+    className,
+    ...textareaProps
+  }), trailingIcon && /* @__PURE__ */React14.createElement(Text, {
+    sx: {
+      position: "absolute",
+      right: "1.25rem",
+      top: "0.75rem"
+    }
+  }, /* @__PURE__ */React14.createElement(Icon7, {
+    inline: true,
+    icon: trailingIcon
+  })));
+});
+Textarea.displayName = "Textarea";
+
+// src/components/TooltipIcon.tsx
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import * as React15 from "react";
+var TooltipIcon = /* @__PURE__ */__name(({
+  icon,
+  onClick,
+  tooltip,
+  "data-testid": dataTestId,
+  variant,
+  sx
+}) => {
+  const id = React15.useId();
+  const tooltipId = `${id}-tooltip`;
+  return /* @__PURE__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(Text, {
+    "data-testid": dataTestId,
+    "data-tooltip-id": tooltip ? tooltipId : void 0,
+    sx: {
+      cursor: onClick ? "pointer" : "default",
+      ...sx
+    },
+    onClick,
+    variant
+  }, /* @__PURE__ */React15.createElement(Icon8, {
+    inline: true,
+    icon
+  })), tooltip && /* @__PURE__ */React15.createElement(Tooltip, {
+    id: tooltipId,
+    ...tooltip,
+    variant
+  }));
+}, "TooltipIcon");
+
+// src/theme/ThemeProvider.tsx
+import { css, Global } from "@emotion/react";
+import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
+import { ThemeUIProvider } from "theme-ui";
+var ThemeProvider = /* @__PURE__ */__name(({
+  children,
+  theme = BruttalTheme,
+  fonts = BruttalFonts
+}) => {
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(ThemeUIProvider, {
+    theme
+  }, /* @__PURE__ */React.createElement(Global, {
+    styles: css`
+            ${fonts.map(url => {
+      return `@import url('${url}');`;
+    }).join("\n")}
+          `
+  }), children));
+}, "ThemeProvider");
+
+// src/theme/useTheme.ts
+import { useThemeUI } from "theme-ui";
+var useTheme = useThemeUI;
+
+// src/index.ts
+import { keyframes } from "@emotion/react";
+import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
+import { BaseStyles, Global as Global2 } from "theme-ui";
+export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };