@ttoss/ui 6.4.1 → 6.5.0

package/dist/esm/index.js

@@ -761,16 +761,16 @@ var variantTokens = {
     selectedColor: "action.text.primary.default",
     unselectedColor: "display.text.primary.default",
     hoverBg: "action.background.muted.default",
-    divider: "action.text.primary.default",
+    divider: "action.text.muted.default",
     thumb: "action.background.primary.default",
-    border: "display.border.primary.default"
+    border: "display.border.muted.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",
+    divider: "action.text.muted.default",
     thumb: "action.background.secondary.default",
     border: "display.border.muted.default"
   },
@@ -779,9 +779,26 @@ var variantTokens = {
     selectedColor: "action.text.accent.default",
     unselectedColor: "action.text.accent.default",
     hoverBg: "action.background.muted.default",
-    divider: "action.text.accent.default",
+    divider: "action.text.muted.default",
     thumb: "action.background.accent.default",
-    border: "display.border.primary.default"
+    border: "display.border.muted.default"
+  }
+};
+var sizeTokens = {
+  sm: {
+    paddingX: "2",
+    paddingY: "1",
+    fontSize: "sm"
+  },
+  md: {
+    paddingX: "3",
+    paddingY: "2",
+    fontSize: "md"
+  },
+  lg: {
+    paddingX: "5",
+    paddingY: "3",
+    fontSize: "lg"
   }
 };
 var SegmentedControl = /* @__PURE__ */__name(({
@@ -792,6 +809,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
   disabled,
   className,
   variant = "accent",
+  size = "md",
   sx,
   ...rest
 }) => {
@@ -815,9 +833,11 @@ var SegmentedControl = /* @__PURE__ */__name(({
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
   const tokens = variantTokens[variant];
+  const sizeStyles = sizeTokens[size];
   return /* @__PURE__ */React11.createElement(Flex2, {
     className,
     "data-variant": variant,
+    "data-size": size,
     sx: {
       width: "100%",
       borderRadius: "4xl",
@@ -843,9 +863,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
       ".rc-segmented-item": {
         borderRadius: "4xl",
         margin: 0,
-        paddingX: "5",
-        paddingY: "3",
-        fontSize: "lg",
+        paddingX: sizeStyles.paddingX,
+        paddingY: sizeStyles.paddingY,
+        fontSize: sizeStyles.fontSize,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",

package/dist/index.d.ts

@@ -167,8 +167,16 @@ interface SegmentedControlProps {
     sx?: FlexProps['sx'];
     /** Visual variant that maps to theme color tokens */
     variant?: 'primary' | 'secondary' | 'accent';
+    /**
+     * Size variant that controls padding and font size.
+     *
+     * - `sm`: Compact size with reduced padding and smaller text, suited for dense layouts.
+     * - `md`: Default size with balanced padding and typography for general use.
+     * - `lg`: Larger size with increased padding and larger text for emphasis.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare const SegmentedControl: ({ options, value: propValue, defaultValue, onChange, disabled, className, variant, sx, ...rest }: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+declare const SegmentedControl: ({ options, value: propValue, defaultValue, onChange, disabled, className, variant, size, 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.4.1",
+  "version": "6.5.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",