@ttoss/ui 6.3.1 → 6.4.0

package/dist/esm/index.js

@@ -755,6 +755,35 @@ 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 variantTokens = {
+  primary: {
+    selectedBg: "action.background.primary.default",
+    selectedColor: "action.text.primary.default",
+    unselectedColor: "display.text.primary.default",
+    hoverBg: "action.background.muted.default",
+    divider: "action.text.primary.default",
+    thumb: "action.background.primary.default",
+    border: "display.border.primary.default"
+  },
+  secondary: {
+    selectedBg: "action.background.secondary.default",
+    selectedColor: "action.text.secondary.default",
+    unselectedColor: "display.text.secondary.default",
+    hoverBg: "action.background.muted.default",
+    divider: "action.text.secondary.default",
+    thumb: "action.background.secondary.default",
+    border: "display.border.muted.default"
+  },
+  accent: {
+    selectedBg: "action.background.accent.default",
+    selectedColor: "action.text.accent.default",
+    unselectedColor: "action.text.accent.default",
+    hoverBg: "action.background.muted.default",
+    divider: "action.text.accent.default",
+    thumb: "action.background.accent.default",
+    border: "display.border.primary.default"
+  }
+};
 var SegmentedControl = /* @__PURE__ */__name(({
   options,
   value: propValue,
@@ -762,6 +791,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
   onChange,
   disabled,
   className,
+  variant = "accent",
   sx,
   ...rest
 }) => {
@@ -784,13 +814,15 @@ var SegmentedControl = /* @__PURE__ */__name(({
     } : option;
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
+  const tokens = variantTokens[variant];
   return /* @__PURE__ */React11.createElement(Flex2, {
     className,
+    "data-variant": variant,
     sx: {
       width: "100%",
       borderRadius: "4xl",
       border: "sm",
-      borderColor: "display.border.primary.default",
+      borderColor: tokens.border,
       overflow: "hidden",
       position: "relative",
       ".rc-segmented": {
@@ -817,7 +849,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        color: "action.text.accent.default",
+        color: tokens.unselectedColor,
         flex: "1 1 auto",
         minWidth: "min-content",
         whiteSpace: "nowrap",
@@ -828,28 +860,28 @@ var SegmentedControl = /* @__PURE__ */__name(({
         cursor: "pointer",
         "&:focus": {
           outline: "2px solid",
-          outlineColor: "action.background.accent.default",
+          outlineColor: tokens.selectedBg,
           outlineOffset: "2px",
           boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)"
         },
         "&:focus-visible": {
           outline: "2px solid",
-          outlineColor: "action.background.accent.default",
+          outlineColor: tokens.selectedBg,
           outlineOffset: "2px"
         },
         "&:hover:not(.rc-segmented-item-selected)": {
-          backgroundColor: "action.background.muted.default"
+          backgroundColor: tokens.hoverBg
         },
         'input[type="radio"]': {
           display: "none"
         }
       },
       ".rc-segmented-item-selected": {
-        backgroundColor: "action.background.accent.default",
-        color: "action.text.accent.active"
+        backgroundColor: tokens.selectedBg,
+        color: tokens.selectedColor
       },
       ".rc-segmented-thumb": {
-        backgroundColor: "action.background.accent.default",
+        backgroundColor: tokens.thumb,
         borderRadius: "4xl",
         zIndex: -1,
         margin: 0,
@@ -903,7 +935,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
       sx: {
         height: "60%",
         width: "1px",
-        backgroundColor: "action.text.accent.default",
+        backgroundColor: tokens.divider,
         opacity: 0.4,
         alignSelf: "center",
         zIndex: 3

package/dist/index.d.ts

@@ -165,8 +165,10 @@ interface SegmentedControlProps {
     disabled?: boolean;
     className?: string;
     sx?: FlexProps['sx'];
+    /** Visual variant that maps to theme color tokens */
+    variant?: 'primary' | 'secondary' | 'accent';
 }
-declare const SegmentedControl: ({ options, value: propValue, defaultValue, onChange, disabled, className, sx, ...rest }: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+declare const SegmentedControl: ({ options, value: propValue, defaultValue, onChange, disabled, className, variant, sx, ...rest }: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * We're using React Select component to build ttoss Select.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -29,7 +29,7 @@
     "react-select": "^5.10.2",
     "react-tooltip": "^5.30.0",
     "theme-ui": "^0.17.2",
-    "@ttoss/theme": "^2.8.0"
+    "@ttoss/theme": "^2.8.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11",