@ttoss/ui 5.5.10 → 5.6.1

package/dist/esm/index.js

@@ -264,44 +264,16 @@ var Checkbox = React2.forwardRef(({
 Checkbox.displayName = "Checkbox";
 
 // src/components/CloseButton.tsx
-import { Icon as Icon3 } from "@ttoss/react-icons";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Close as CloseUI } from "theme-ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var CloseButton = props => {
-  return /* @__PURE__ */jsxs3(Button, {
+  return /* @__PURE__ */jsx6(CloseUI, {
     type: "button",
+    "aria-label": props.ariaLabel,
     sx: {
-      fontFamily: "body",
-      display: "flex",
-      alignItems: "center",
-      cursor: "pointer",
-      lineHeight: "normal",
-      padding: "2",
-      backgroundColor: "action.background.primary.active",
-      color: "action.text.primary.default",
-      border: "sm",
-      borderColor: "action.border.primary.default",
-      borderRadius: "sm",
-      gap: 2,
-      ":disabled": {
-        border: "sm",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default",
-        cursor: "not-allowed"
-      },
-      ":is(:focus-within, :hover):not(:disabled)": {
-        color: "action.text.secondary.active",
-        backgroundColor: "action.background.secondary.active",
-        borderColor: "action.border.secondary.active"
-      },
       ...props.sx
     },
-    ...props,
-    children: [props.label && /* @__PURE__ */jsx6("span", {
-      children: props.label
-    }), /* @__PURE__ */jsx6(Icon3, {
-      icon: "close"
-    })]
+    ...props
   });
 };
 
@@ -352,7 +324,7 @@ var HelpText = ({
 };
 
 // src/components/IconButton.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
+import { Icon as Icon3 } from "@ttoss/react-icons";
 import { IconButton as IconButtonUi } from "theme-ui";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var IconButton = props => {
@@ -372,7 +344,7 @@ var IconButton = props => {
       },
       ...restProps.sx
     },
-    children: icon ? /* @__PURE__ */jsx9(Icon4, {
+    children: icon ? /* @__PURE__ */jsx9(Icon3, {
       inline: true,
       icon
     }) : children
@@ -422,10 +394,10 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Input.tsx
-import { Icon as Icon5 } from "@ttoss/react-icons";
+import { Icon as Icon4 } from "@ttoss/react-icons";
 import * as React5 from "react";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var Input = React5.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
@@ -437,7 +409,7 @@ var Input = React5.forwardRef(({
 }, ref) => {
   const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
   const isWarning = !inputProps["aria-invalid"] && trailingIcon === "warning-alt";
-  return /* @__PURE__ */jsxs4(Flex, {
+  return /* @__PURE__ */jsxs3(Flex, {
     className: `${className} ${isWarning ? "is-warning" : ""}`,
     sx: {
       ...sx,
@@ -454,7 +426,7 @@ var Input = React5.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx11(Icon4, {
         inline: true,
         icon: leadingIcon
       })
@@ -482,7 +454,7 @@ var Input = React5.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx11(Icon4, {
         inline: true,
         icon: trailingIcon
       })
@@ -492,10 +464,10 @@ var Input = React5.forwardRef(({
 Input.displayName = "Input";
 
 // src/components/InputNumber.tsx
-import { Icon as Icon6 } from "@ttoss/react-icons";
+import { Icon as Icon5 } from "@ttoss/react-icons";
 import * as React6 from "react";
 import { Input as Input2 } from "theme-ui";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var InputNumber = React6.forwardRef(({
   sx,
   value,
@@ -556,7 +528,7 @@ var InputNumber = React6.forwardRef(({
     }
     onChange(value + 1);
   };
-  return /* @__PURE__ */jsxs5(Flex, {
+  return /* @__PURE__ */jsxs4(Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -585,7 +557,7 @@ var InputNumber = React6.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx12(Icon6, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "picker-down"
       })
     }), infoIcon && /* @__PURE__ */jsx12(Text, {
@@ -597,7 +569,7 @@ var InputNumber = React6.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx12(Icon6, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "info"
       })
     }), /* @__PURE__ */jsx12(Text, {
@@ -609,7 +581,7 @@ var InputNumber = React6.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx12(Icon6, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "picker-up"
       })
     })]
@@ -667,10 +639,10 @@ var InputPassword = React8.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/Label.tsx
-import { Icon as Icon7 } from "@ttoss/react-icons";
+import { Icon as Icon6 } from "@ttoss/react-icons";
 import * as React9 from "react";
 import { Label as LabelUi } from "theme-ui";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
@@ -680,7 +652,7 @@ var Label = ({
 }) => {
   const id = React9.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */jsxs6(LabelUi, {
+  return /* @__PURE__ */jsxs5(LabelUi, {
     "data-tooltip-id": tooltipId,
     sx: {
       alignItems: "center",
@@ -691,13 +663,13 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */jsxs6(Text, {
+    children: [children, tooltip && /* @__PURE__ */jsxs5(Text, {
       sx: {
         color: "currentcolor",
         cursor: "pointer"
       },
       "aria-label": TOOLTIP_LABEL,
-      children: [/* @__PURE__ */jsx14(Icon7, {
+      children: [/* @__PURE__ */jsx14(Icon6, {
         inline: true,
         icon: "fluent:info-24-regular"
       }), /* @__PURE__ */jsx14(Tooltip, {
@@ -734,11 +706,185 @@ import { Paragraph } from "theme-ui";
 // src/components/Radio.tsx
 import { Radio } from "theme-ui";
 
-// src/components/Select.tsx
-import { Icon as Icon8 } from "@ttoss/react-icons";
+// src/components/SegmentedControl.tsx
 import * as React11 from "react";
+import { Box as Box3, Flex as Flex2 } from "theme-ui";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var SegmentedControl = ({
+  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 = newValue => {
+    setInternalValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  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__ */jsx16(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,
+    children: /* @__PURE__ */jsx16("div", {
+      className: "rc-segmented",
+      children: /* @__PURE__ */jsxs6(Flex2, {
+        className: "rc-segmented-group custom-segmented-group",
+        children: [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__ */jsxs6(React11.Fragment, {
+            children: [/* @__PURE__ */jsxs6(Box3, {
+              as: "label",
+              className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
+              onClick: () => {
+                if (!disabled && !option.disabled) {
+                  handleChange(option.value);
+                }
+              },
+              children: [/* @__PURE__ */jsx16("input", {
+                type: "radio",
+                value: option.value,
+                checked: isSelected,
+                disabled: isItemDisabled,
+                onChange: e => {
+                  if (!disabled && !option.disabled && e.target.checked) {
+                    handleChange(option.value);
+                  }
+                }
+              }), /* @__PURE__ */jsx16("div", {
+                className: "rc-segmented-item-label",
+                children: option.label
+              })]
+            }), showDivider && /* @__PURE__ */jsx16(Box3, {
+              className: "segmented-divider",
+              sx: {
+                height: "60%",
+                width: "1px",
+                backgroundColor: "action.text.accent.default",
+                opacity: 0.4,
+                alignSelf: "center",
+                zIndex: 3
+              }
+            })]
+          }, `${index}-${option.value}`);
+        }), currentValue !== void 0 && /* @__PURE__ */jsx16("div", {
+          className: "rc-segmented-thumb",
+          style: {
+            width: `${100 / normalizedOptions.length}%`,
+            transform: `translateX(${normalizedOptions.findIndex(option => {
+              return option.value === currentValue;
+            }) * 100}%)`
+          }
+        })]
+      })
+    })
+  });
+};
+
+// src/components/Select.tsx
+import { Icon as Icon7 } from "@ttoss/react-icons";
+import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
@@ -757,7 +903,7 @@ var Control = props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */jsx16(Box, {
+  return /* @__PURE__ */jsx17(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -766,7 +912,7 @@ var Control = props => {
         paddingY: "3"
       }
     },
-    children: /* @__PURE__ */jsx16(components.Control, {
+    children: /* @__PURE__ */jsx17(components.Control, {
       ...props
     })
   });
@@ -779,7 +925,7 @@ var DropdownIndicator = props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */jsx16(Text, {
+  return /* @__PURE__ */jsx17(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -787,7 +933,7 @@ var DropdownIndicator = props => {
       display: "flex",
       alignItems: "center"
     },
-    children: /* @__PURE__ */jsx16(Icon8, {
+    children: /* @__PURE__ */jsx17(Icon7, {
       icon: "picker-down"
     })
   });
@@ -795,7 +941,7 @@ var DropdownIndicator = props => {
 var IndicatorsContainer = ({
   children
 }) => {
-  return /* @__PURE__ */jsx16(Box, {
+  return /* @__PURE__ */jsx17(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -806,7 +952,7 @@ var IndicatorsContainer = ({
 var Placeholder = ({
   children
 }) => {
-  return /* @__PURE__ */jsx16(Text, {
+  return /* @__PURE__ */jsx17(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -825,10 +971,10 @@ var SelectContainer = ({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    jsx16(Box, {
+    jsx17(Box, {
       sx,
       css: css2,
-      children: /* @__PURE__ */jsx16(components.SelectContainer, {
+      children: /* @__PURE__ */jsx17(components.SelectContainer, {
         ...props,
         children
       })
@@ -863,23 +1009,23 @@ var ValueContainer = ({
       gap: "4",
       flex: 1
     },
-    children: [finalLeadingIcon && /* @__PURE__ */jsx16(Text, {
+    children: [finalLeadingIcon && /* @__PURE__ */jsx17(Text, {
       sx: {
         alignSelf: "center",
         pointerEvents: "none",
         lineHeight: 0,
         fontSize: "md"
       },
-      children: /* @__PURE__ */jsx16(Icon8, {
+      children: /* @__PURE__ */jsx17(Icon7, {
         icon: finalLeadingIcon
       })
-    }), /* @__PURE__ */jsx16(Flex, {
+    }), /* @__PURE__ */jsx17(Flex, {
       sx: {
         flex: 1,
         alignItems: "center"
       },
       children
-    }), (trailingIcon || hasError) && /* @__PURE__ */jsx16(Text, {
+    }), (trailingIcon || hasError) && /* @__PURE__ */jsx17(Text, {
       className: hasError ? "error-icon" : "",
       sx: {
         alignSelf: "center",
@@ -888,13 +1034,13 @@ var ValueContainer = ({
         fontSize: "md",
         color: trailingIconColor
       },
-      children: /* @__PURE__ */jsx16(Icon8, {
+      children: /* @__PURE__ */jsx17(Icon7, {
         icon: hasError ? "warning-alt" : trailingIcon
       })
     })]
   });
 };
-var Select = React11.forwardRef(({
+var Select = React12.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -903,7 +1049,7 @@ var Select = React11.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */jsx16(ReactSelect, {
+  return /* @__PURE__ */jsx17(ReactSelect, {
     ref,
     components: {
       Control,
@@ -939,9 +1085,9 @@ import { Slider } from "theme-ui";
 import { Spinner } from "theme-ui";
 
 // src/components/Stack.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Stack = props => {
-  return /* @__PURE__ */jsx17(Flex, {
+  return /* @__PURE__ */jsx18(Flex, {
     ...props,
     sx: {
       flexDirection: "column",
@@ -953,9 +1099,9 @@ var Stack = props => {
 
 // src/components/Switch.tsx
 import { Switch as SwitchUi } from "theme-ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Switch = props => {
-  return /* @__PURE__ */jsx18(SwitchUi, {
+  return /* @__PURE__ */jsx19(SwitchUi, {
     ...props,
     role: "switch",
     "aria-checked": props.checked || false,
@@ -980,11 +1126,11 @@ var Switch = props => {
 };
 
 // src/components/Textarea.tsx
-import { Icon as Icon9 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import * as React13 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-var Textarea = React12.forwardRef(({
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+var Textarea = React13.forwardRef(({
   trailingIcon,
   className,
   sx,
@@ -998,7 +1144,7 @@ var Textarea = React12.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx19(TextareaUI, {
+    children: [/* @__PURE__ */jsx20(TextareaUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -1010,13 +1156,13 @@ var Textarea = React12.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx19(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx20(Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx19(Icon9, {
+      children: /* @__PURE__ */jsx20(Icon8, {
         inline: true,
         icon: trailingIcon
       })
@@ -1027,10 +1173,10 @@ Textarea.displayName = "Textarea";
 
 // src/components/Tooltip.tsx
 import { Tooltip as TooltipReact } from "react-tooltip";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Tooltip = props => {
   const className = "tooltip-component";
-  return /* @__PURE__ */jsx20(Box, {
+  return /* @__PURE__ */jsx21(Box, {
     sx: ({
       fonts
     }) => {
@@ -1057,7 +1203,7 @@ var Tooltip = props => {
         }
       };
     },
-    children: /* @__PURE__ */jsx20(TooltipReact, {
+    children: /* @__PURE__ */jsx21(TooltipReact, {
       className,
       ...props,
       children: props.children
@@ -1069,16 +1215,16 @@ var Tooltip = props => {
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
 import { ThemeUIProvider } from "theme-ui";
-import { Fragment, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx21(Fragment, {
+  return /* @__PURE__ */jsx22(Fragment2, {
     children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
       theme,
-      children: [/* @__PURE__ */jsx21(Global, {
+      children: [/* @__PURE__ */jsx22(Global, {
         styles: css`
             ${fonts.map(url => {
           return `@import url('${url}');`;
@@ -1097,4 +1243,4 @@ var useTheme = useThemeUI;
 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, Select, Slider, Spinner, Stack, Switch, Text, Textarea, ThemeProvider, Tooltip, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+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, Text, Textarea, ThemeProvider, Tooltip, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconType } from '@ttoss/react-icons';
 import * as React from 'react';
 import * as theme_ui from 'theme-ui';
-import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, TextProps, IconButtonProps as IconButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, FlexProps, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
+import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SxProp, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
 export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
 import { Props } from 'react-select';
 import { ITooltip } from 'react-tooltip';
@@ -41,8 +41,8 @@ interface CheckboxProps extends CheckboxProps$1 {
 }
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type CloseButtonProps = ButtonProps & {
-    label?: string;
+type CloseButtonProps = CloseProps & {
+    ariaLabel?: string;
 };
 declare const CloseButton: (props: CloseButtonProps) => react_jsx_runtime.JSX.Element;
 
@@ -97,6 +97,21 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
+interface SegmentedControlProps {
+    options: (string | number | {
+        label: React.ReactNode;
+        value: string | number;
+        disabled?: boolean;
+    })[];
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    disabled?: boolean;
+    className?: string;
+    sx?: FlexProps['sx'];
+}
+declare const SegmentedControl: ({ options, value: propValue, defaultValue, onChange, disabled, className, sx, ...rest }: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * We're using React Select component to build ttoss Select.
  * More info about React Select: https://react-select.com/home
@@ -158,4 +173,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.5.10",
+  "version": "5.6.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -25,10 +25,11 @@
   "sideEffects": false,
   "dependencies": {
     "@theme-ui/match-media": "^0.17.1",
+    "rc-segmented": "^2.7.0",
     "react-select": "^5.9.0",
     "react-tooltip": "^5.28.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.5.7"
+    "@ttoss/theme": "^2.5.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -44,8 +45,8 @@
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "@ttoss/config": "^1.35.3",
-    "@ttoss/test-utils": "^2.1.23",
-    "@ttoss/react-icons": "^0.4.11"
+    "@ttoss/react-icons": "^0.4.11",
+    "@ttoss/test-utils": "^2.1.23"
   },
   "keywords": [
     "React",