@ttoss/ui 5.5.10 → 5.6.0

package/dist/esm/index.js

@@ -734,11 +734,185 @@ 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";
+import { jsx as jsx16, jsxs as jsxs7 } 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__ */jsxs7(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__ */jsxs7(React11.Fragment, {
+            children: [/* @__PURE__ */jsxs7(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 Icon8 } from "@ttoss/react-icons";
-import * as React11 from "react";
+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 jsxs8 } from "react/jsx-runtime";
 var Control = props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
@@ -757,7 +931,7 @@ var Control = props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */jsx16(Box, {
+  return /* @__PURE__ */jsx17(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -766,7 +940,7 @@ var Control = props => {
         paddingY: "3"
       }
     },
-    children: /* @__PURE__ */jsx16(components.Control, {
+    children: /* @__PURE__ */jsx17(components.Control, {
       ...props
     })
   });
@@ -779,7 +953,7 @@ var DropdownIndicator = props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */jsx16(Text, {
+  return /* @__PURE__ */jsx17(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -787,7 +961,7 @@ var DropdownIndicator = props => {
       display: "flex",
       alignItems: "center"
     },
-    children: /* @__PURE__ */jsx16(Icon8, {
+    children: /* @__PURE__ */jsx17(Icon8, {
       icon: "picker-down"
     })
   });
@@ -795,7 +969,7 @@ var DropdownIndicator = props => {
 var IndicatorsContainer = ({
   children
 }) => {
-  return /* @__PURE__ */jsx16(Box, {
+  return /* @__PURE__ */jsx17(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -806,7 +980,7 @@ var IndicatorsContainer = ({
 var Placeholder = ({
   children
 }) => {
-  return /* @__PURE__ */jsx16(Text, {
+  return /* @__PURE__ */jsx17(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -825,10 +999,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
       })
@@ -858,28 +1032,28 @@ var ValueContainer = ({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */jsxs7(Flex, {
+  return /* @__PURE__ */jsxs8(Flex, {
     sx: {
       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(Icon8, {
         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 +1062,13 @@ var ValueContainer = ({
         fontSize: "md",
         color: trailingIconColor
       },
-      children: /* @__PURE__ */jsx16(Icon8, {
+      children: /* @__PURE__ */jsx17(Icon8, {
         icon: hasError ? "warning-alt" : trailingIcon
       })
     })]
   });
 };
-var Select = React11.forwardRef(({
+var Select = React12.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -903,7 +1077,7 @@ var Select = React11.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */jsx16(ReactSelect, {
+  return /* @__PURE__ */jsx17(ReactSelect, {
     ref,
     components: {
       Control,
@@ -939,9 +1113,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 +1127,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,
@@ -981,16 +1155,16 @@ var Switch = props => {
 
 // src/components/Textarea.tsx
 import { Icon as Icon9 } from "@ttoss/react-icons";
-import * as React12 from "react";
+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 jsxs9 } from "react/jsx-runtime";
+var Textarea = React13.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */jsxs8(Flex, {
+  return /* @__PURE__ */jsxs9(Flex, {
     className,
     sx: {
       ...sx,
@@ -998,7 +1172,7 @@ var Textarea = React12.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx19(TextareaUI, {
+    children: [/* @__PURE__ */jsx20(TextareaUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -1010,13 +1184,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(Icon9, {
         inline: true,
         icon: trailingIcon
       })
@@ -1027,10 +1201,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 +1231,7 @@ var Tooltip = props => {
         }
       };
     },
-    children: /* @__PURE__ */jsx20(TooltipReact, {
+    children: /* @__PURE__ */jsx21(TooltipReact, {
       className,
       ...props,
       children: props.children
@@ -1069,16 +1243,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 jsxs10 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx21(Fragment, {
-    children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
+  return /* @__PURE__ */jsx22(Fragment2, {
+    children: /* @__PURE__ */jsxs10(ThemeUIProvider, {
       theme,
-      children: [/* @__PURE__ */jsx21(Global, {
+      children: [/* @__PURE__ */jsx22(Global, {
         styles: css`
             ${fonts.map(url => {
           return `@import url('${url}');`;
@@ -1097,4 +1271,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, 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';
@@ -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.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -25,6 +25,7 @@
   "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",
@@ -43,9 +44,9 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/config": "^1.35.3",
+    "@ttoss/react-icons": "^0.4.11",
     "@ttoss/test-utils": "^2.1.23",
-    "@ttoss/react-icons": "^0.4.11"
+    "@ttoss/config": "^1.35.3"
   },
   "keywords": [
     "React",