@varialkit/segmentcontrol 0.1.1 → 0.1.3

package/docs.md

@@ -26,6 +26,22 @@ export function ViewSwitcher() {
 - Use `fullWidth` when the control should span its container.
 - Prefer 2-5 segments to keep labels readable.
 - By default, segments size to their content for stable label alignment; `fullWidth` stretches them evenly.
+- Active segments keep the same typography as inactive ones; selection emphasis comes from color, background, and a subtle border instead of a font-weight or shadow change.
+- Use the `radius` prop with `sm`, `md`, `lg`, or `full` to control segment cell rounding; the outer container stays slightly rounder than the cells where the token scale allows it.
+
+## Control Props
+
+`SegmentControl` accepts the following core props:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Currently selected segment value. |
+| `onChange` | `(value: string) => void` | Called when selection changes. |
+| `size` | `"small" | "medium" | "large" | "sm" | "md" | "lg"` | Controls control height, spacing, and typography scale. |
+| `radius` | `"sm" | "md" | "lg" | "full"` | Controls segment cell radius using shared radius tokens. |
+| `fullWidth` | `boolean` | Stretches segments evenly across the container. |
+| `movingBackground` | `boolean` | Uses a single animated background indicator that follows hover/focus. |
+| `surfaceStyle` | `"solid" | "translucent" | "glass" | { ... }` | Applies surface material treatment without changing layout tokens. |
 
 ## Segment Props
 

package/examples.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { iconNames } from "@solara/icons";
-import type { SolaraIconName } from "@solara/icons";
+import { iconNames } from "@varialkit/icons";
+import type { SolaraIconName } from "@varialkit/icons";
 import { SegmentControl } from "./src/SegmentControl";
-import type { SegmentControlSize } from "./src/SegmentControl.types";
+import type { SegmentControlRadius, SegmentControlSize } from "./src/SegmentControl.types";
 
 type PlaygroundProps = {
   size: SegmentControlSize;
+  radius: SegmentControlRadius;
   fullWidth: boolean;
   withIcons: boolean;
   movingBackground: boolean;
@@ -15,6 +16,7 @@ type PlaygroundProps = {
 
 const SegmentControlPlayground = ({
   size,
+  radius,
   fullWidth,
   withIcons,
   movingBackground,
@@ -42,6 +44,7 @@ const SegmentControlPlayground = ({
       value={value}
       onChange={setValue}
       size={size}
+      radius={radius}
       fullWidth={fullWidth}
       movingBackground={movingBackground}
     >
@@ -62,7 +65,7 @@ const SegmentControlPlayground = ({
 export const stories = {
   playground: {
     title: "Playground",
-    description: "Explore size, width, and disabled segment states.",
+    description: "Explore size, radius, width, and disabled segment states.",
     render: (props: PlaygroundProps) => <SegmentControlPlayground {...props} />,
     controls: [
       {
@@ -70,6 +73,11 @@ export const stories = {
         type: "select",
         options: ["small", "medium", "large"],
       },
+      {
+        name: "radius",
+        type: "select",
+        options: ["sm", "md", "lg", "full"],
+      },
       {
         name: "fullWidth",
         type: "boolean",
@@ -100,6 +108,7 @@ export const stories = {
     ],
     initialProps: {
       size: "medium",
+      radius: "full",
       fullWidth: false,
       withIcons: false,
       movingBackground: false,
@@ -130,7 +139,7 @@ export const stories = {
         </SegmentControl>
       </div>
     ),
-    code: `import { SegmentControl } from "@solara/segmentcontrol";
+    code: `import { SegmentControl } from "@varialkit/segmentcontrol";
 
 export function Example() {
   return (
@@ -166,7 +175,7 @@ export function Example() {
         <SegmentControl.Segment value="settings" ariaLabel="Settings" icon="arrow_swap_16" />
       </SegmentControl>
     ),
-    code: `import { SegmentControl } from "@solara/segmentcontrol";
+    code: `import { SegmentControl } from "@varialkit/segmentcontrol";
 
 export function Example() {
   return (
@@ -196,7 +205,7 @@ export function Example() {
         </SegmentControl.Segment>
       </SegmentControl>
     ),
-    code: `import { SegmentControl } from "@solara/segmentcontrol";
+    code: `import { SegmentControl } from "@varialkit/segmentcontrol";
 
 export function Example() {
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varialkit/segmentcontrol",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -9,7 +9,7 @@
     "./examples": "./examples.tsx"
   },
   "dependencies": {
-    "@varialkit/icons": "0.1.1"
+    "@varialkit/icons": "0.1.3"
   },
   "files": [
     "src",

package/src/SegmentControl.scss

@@ -4,6 +4,7 @@
   --segment-control-surface-color-rgb: var(--color-surface-100-rgb);
   --surface-border-color: var(--color-divider-secondary);
   --surface-border-color-rgb: var(--color-divider-secondary-rgb);
+  --segment-control-selected-ring-rgb: var(--color-divider-primary-rgb);
   --surface-opacity: 1;
   --surface-blur: 0px;
   --surface-shadow: var(--elevation-1);
@@ -14,6 +15,7 @@
   --segment-control-bg-active: var(--color-surface-0);
   --segment-control-bg-hover: var(--color-surface-200);
   --segment-control-bg-indicator: var(--segment-control-bg-active);
+  --segment-control-selected-ring: rgba(var(--segment-control-selected-ring-rgb), 0.5);
   --segment-control-shadow: var(--elevation-1);
   --segment-padding-y: var(--space-2);
   --segment-padding-x: var(--space-4);
@@ -22,12 +24,14 @@
   --segment-icon-size: 16px;
   --segment-gap: var(--space-2);
   --segment-height: var(--space-9);
+  --segment-cell-radius: var(--radius-pill);
+  --segment-container-radius: var(--radius-pill);
 
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: calc(var(--space-1) * var(--spacing-multiplier));
-  border-radius: var(--radius-pill);
+  border-radius: calc(var(--segment-container-radius) * var(--radius-multiplier));
   background-color: rgba(var(--segment-control-surface-color-rgb), var(--surface-opacity));
   padding: calc(var(--space-1) * var(--spacing-multiplier));
   box-shadow: transparent;
@@ -50,18 +54,37 @@
     var(--segment-indicator-top, 0px)
   );
   background-color: var(--segment-control-bg-indicator);
-  border-radius: var(--radius-pill);
-  box-shadow: var(--segment-control-shadow);
+  border-radius: calc(var(--segment-cell-radius) * var(--radius-multiplier));
+  border: 1px solid var(--segment-control-selected-ring);
   opacity: var(--segment-indicator-opacity, 0);
   transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
   pointer-events: none;
   z-index: 0;
 }
 
+.solara-segment-control--radius-sm {
+  --segment-cell-radius: var(--radius-sm);
+  --segment-container-radius: var(--radius-md);
+}
+
+.solara-segment-control--radius-md {
+  --segment-cell-radius: var(--radius-md);
+  --segment-container-radius: var(--radius-3);
+}
+
+.solara-segment-control--radius-lg {
+  --segment-cell-radius: var(--radius-3);
+  --segment-container-radius: var(--radius-lg);
+}
+
+.solara-segment-control--radius-full {
+  --segment-cell-radius: var(--radius-full);
+  --segment-container-radius: var(--radius-full);
+}
+
 .solara-segment-control--moving-bg {
   .solara-segment-control__segment {
     background-color: transparent;
-    box-shadow: none;
     position: relative;
     z-index: 1;
   }
@@ -72,7 +95,7 @@
 
   .solara-segment-control__segment[data-state="active"] {
     background-color: transparent;
-    box-shadow: none;
+    border-color: transparent;
   }
 }
 
@@ -113,8 +136,8 @@
   line-height: var(--segment-line-height);
   color: var(--segment-control-text);
   background-color: transparent;
-  border: none;
-  border-radius: var(--radius-pill);
+  border: 1px solid transparent;
+  border-radius: calc(var(--segment-cell-radius) * var(--radius-multiplier));
   cursor: pointer;
   transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
   white-space: nowrap;
@@ -145,8 +168,7 @@
 .solara-segment-control__segment[data-state="active"] {
   color: var(--segment-control-text-active);
   background-color: var(--segment-control-bg-active);
-  box-shadow: var(--elevation-1);
-  font-weight: 600;
+  border-color: var(--segment-control-selected-ring);
 }
 
 .solara-segment-control__segment:disabled,

package/src/SegmentControl.tsx

@@ -1,7 +1,12 @@
 import React, { Children, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Icon } from "@solara/icons";
-import type { IconProps } from "@solara/icons";
-import type { SegmentControlProps, SegmentControlSize, SegmentProps } from "./SegmentControl.types";
+import { Icon } from "@varialkit/icons";
+import type { IconProps } from "@varialkit/icons";
+import type {
+  SegmentControlProps,
+  SegmentControlRadius,
+  SegmentControlSize,
+  SegmentProps,
+} from "./SegmentControl.types";
 import "./SegmentControl.scss";
 
 const sizeAliasMap: Record<SegmentControlSize, "small" | "medium" | "large"> = {
@@ -13,6 +18,13 @@ const sizeAliasMap: Record<SegmentControlSize, "small" | "medium" | "large"> = {
   large: "large",
 };
 
+const radiusAliasMap: Record<SegmentControlRadius, "sm" | "md" | "lg" | "full"> = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  full: "full",
+};
+
 const classNames = (...classes: Array<string | undefined | false | null>) =>
   classes.filter(Boolean).join(" ");
 
@@ -60,6 +72,7 @@ export const SegmentControl: SegmentControlComponent = ({
   onChange,
   fullWidth = false,
   size = "medium",
+  radius = "full",
   movingBackground = false,
   surfaceStyle,
   children,
@@ -68,6 +81,7 @@ export const SegmentControl: SegmentControlComponent = ({
   ...props
 }: SegmentControlProps) => {
   const resolvedSize = sizeAliasMap[size];
+  const resolvedRadius = radiusAliasMap[radius];
   // Container ref is used to compute relative offsets for the moving indicator.
   const containerRef = useRef<HTMLDivElement | null>(null);
   // Each segment stores its DOM node so we can measure width/position on demand.
@@ -170,7 +184,7 @@ export const SegmentControl: SegmentControlComponent = ({
 
   // Surface styling is applied via data attributes so theme defaults remain centralized.
   const surfaceAttributes: Record<string, string | undefined> = {};
-  const surfaceStyleVars: React.CSSProperties = {};
+  const surfaceStyleVars: React.CSSProperties & Record<string, string> = {};
 
   if (surfaceStyle) {
     if (typeof surfaceStyle === "string") {
@@ -198,6 +212,7 @@ export const SegmentControl: SegmentControlComponent = ({
       className={classNames(
         "solara-segment-control",
         `solara-segment-control--size-${resolvedSize}`,
+        `solara-segment-control--radius-${resolvedRadius}`,
         fullWidth ? "solara-segment-control--full-width" : null,
         movingBackground ? "solara-segment-control--moving-bg" : null,
         className

package/src/SegmentControl.types.ts

@@ -1,8 +1,10 @@
 import React from "react";
-import type { IconProps } from "@solara/icons";
+import type { IconProps } from "@varialkit/icons";
 
 export type SegmentControlSize = "small" | "medium" | "large" | "sm" | "md" | "lg";
 
+export type SegmentControlRadius = "sm" | "md" | "lg" | "full";
+
 export type SegmentControlSurfaceStyle =
   | "solid"
   | "translucent"
@@ -32,6 +34,10 @@ export interface SegmentControlProps
    * Size of the segment control.
    */
   size?: SegmentControlSize;
+  /**
+   * Controls the rounding of segment cells, with the container rendered slightly rounder when possible.
+   */
+  radius?: SegmentControlRadius;
   /**
    * Controls surface material treatment without changing layout tokens.
    */