@stackone/malachite 0.62.0 → 0.63.0

package/dist/index.d.ts

@@ -943,6 +943,14 @@ export declare interface MalachiteTheme {
             trackChecked: string;
             knob: string;
         };
+        segmentedControl: {
+            trackBackground: string;
+            itemForeground: string;
+            itemHoverForeground: string;
+            selectedBackground: string;
+            selectedForeground: string;
+            selectedShadow: string;
+        };
         dropdown: {
             border: string;
             borderActive: string;
@@ -1221,6 +1229,7 @@ export declare interface PartialMalachiteTheme {
         buttonList?: Partial<MalachiteTheme['colors']['buttonList']>;
         pillButton?: Partial<MalachiteTheme['colors']['pillButton']>;
         toggle?: Partial<MalachiteTheme['colors']['toggle']>;
+        segmentedControl?: Partial<MalachiteTheme['colors']['segmentedControl']>;
         dropdown?: Partial<MalachiteTheme['colors']['dropdown']>;
         tag?: Partial<MalachiteTheme['colors']['tag']>;
         numberTag?: Partial<MalachiteTheme['colors']['numberTag']>;
@@ -1342,6 +1351,43 @@ declare interface SectionTitleProps {
     style?: default_2.CSSProperties;
 }
 
+/**
+ * A pill track of mutually-exclusive options — the segmented "one of these" control.
+ *
+ * Owns the track background, the selected-thumb chrome and the radiogroup semantics in
+ * one place, so consumers never hand-roll a track around `PillButton` (whose `default`
+ * variant tokens are tuned for standalone filter pills, not for a sunken track).
+ *
+ * Selection is conveyed non-visually via `role="radio"` + `aria-checked`, and by a
+ * foreground-colour change as well as the thumb, so it does not rest on background
+ * colour alone.
+ */
+export declare const SegmentedControl: <T extends string = string>({ options, value, onChange, size, fullWidth, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: SegmentedControlProps<T>) => JSX_2.Element;
+
+export declare interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: default_2.ReactNode;
+    disabled?: boolean;
+}
+
+export declare interface SegmentedControlProps<T extends string = string> {
+    options: SegmentedControlOption<T>[];
+    /** The selected option's value. A value not present in `options` renders nothing selected. */
+    value: T;
+    onChange: (value: T) => void;
+    size?: SegmentedControlSize;
+    /** Stretch the track to its container and split it into equal segments. */
+    fullWidth?: boolean;
+    /** Disables every segment. Individual segments can also be disabled via `options`. */
+    disabled?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+
+export declare type SegmentedControlSize = 'small' | 'medium';
+
 /**
  * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
  * This is used internally by form components to escape Shadow DOM boundaries.

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as s, b as t, c as o, d as i, B as r, e as n, f as l, C as p, g as T, h as d, i as m, j as c, k as S, l as h, m as u, D as g, n as C, o as y, p as F, F as w, q as x, r as f, s as k, t as v, u as B, v as L, w as P, x as b, I as A, K as D, L as z, y as R, M, z as I, N, O as V, P as j, E as q, G as E, H as G, J as H, Q as J, R as K, S as O, T as W, U as Q, V as U, W as X, X as Y, Y as Z, Z as $, $ as _, a0 as aa, a1 as ea, a2 as sa, a3 as ta, a4 as oa, a5 as ia, a6 as ra, a7 as na, a8 as la, a9 as pa, aa as Ta, ab as da, ac as ma, ad as ca, ae as Sa, af as ha, ag as ua, ah as ga, ai as Ca, aj as ya, ak as Fa, al as wa, am as xa, an as fa, ao as ka, ap as va, aq as Ba, ar as La, as as Pa, at as ba } from "./index-CAu3SySY.js";
+import { A as s, b as t, c as o, d as i, B as r, e as n, f as l, C as p, g as T, h as d, i as m, j as S, k as c, l as h, m as u, D as g, n as C, o as y, p as F, F as w, q as x, r as f, s as k, t as v, u as B, v as L, w as P, x as b, I as A, K as D, L as z, y as R, M, z as I, N, O as V, P as j, E as q, G as E, H as G, J as H, Q as J, R as K, S as O, T as W, U as Q, V as U, W as X, X as Y, Y as Z, Z as $, $ as _, a0 as aa, a1 as ea, a2 as sa, a3 as ta, a4 as oa, a5 as ia, a6 as ra, a7 as na, a8 as la, a9 as pa, aa as Ta, ab as da, ac as ma, ad as Sa, ae as ca, af as ha, ag as ua, ah as ga, ai as Ca, aj as ya, ak as Fa, al as wa, am as xa, an as fa, ao as ka, ap as va, aq as Ba, ar as La, as as Pa, at as ba, au as Aa } from "./index-Bi3n5zTv.js";
 export {
   s as Accordion,
   t as ActionMenu,
@@ -11,8 +11,8 @@ export {
   T as Checkbox,
   d as ClampText,
   m as CodeBlock,
-  c as CollapsibleSection,
-  S as Confetti,
+  S as CollapsibleSection,
+  c as Confetti,
   h as ConnectionHeader,
   u as CustomIcons,
   g as DefinitionRow,
@@ -44,43 +44,44 @@ export {
   J as Progress,
   K as Radio,
   O as Search,
-  W as ShadowEscape,
-  Q as SidePanel,
-  U as SidePanelNavFooter,
-  X as Skeleton,
-  Y as Spacer,
-  Z as SpacingSize,
-  $ as Spinner,
-  _ as SplitScreenLayout,
-  aa as StatBadge,
-  ea as Statistic,
-  sa as StatusBadge,
-  ta as Stepper,
-  oa as Surface,
-  ia as SurfaceRow,
-  ra as Swatch,
-  na as Table,
-  la as Tabs,
-  pa as Tag,
-  Ta as TextArea,
-  da as ThemeScope,
-  ma as Toggle,
+  W as SegmentedControl,
+  Q as ShadowEscape,
+  U as SidePanel,
+  X as SidePanelNavFooter,
+  Y as Skeleton,
+  Z as Spacer,
+  $ as SpacingSize,
+  _ as Spinner,
+  aa as SplitScreenLayout,
+  ea as StatBadge,
+  sa as Statistic,
+  ta as StatusBadge,
+  oa as Stepper,
+  ia as Surface,
+  ra as SurfaceRow,
+  na as Swatch,
+  la as Table,
+  pa as Tabs,
+  Ta as Tag,
+  da as TextArea,
+  ma as ThemeScope,
+  Sa as Toggle,
   ca as Toolbar,
-  Sa as Tooltip,
-  ha as TruncatedTooltip,
-  ua as Typography,
-  ga as WizardLayout,
-  Ca as applyCustomTheme,
-  ya as applyDarkTheme,
-  Fa as applyLightTheme,
-  wa as applyTheme,
-  xa as applyThemeVars,
-  fa as darkTheme,
-  ka as defaultTheme,
-  va as getCurrentTheme,
-  Ba as getCurrentThemeMode,
-  La as initializeTheme,
-  Pa as resetTheme,
-  ba as toggleTheme
+  ha as Tooltip,
+  ua as TruncatedTooltip,
+  ga as Typography,
+  Ca as WizardLayout,
+  ya as applyCustomTheme,
+  Fa as applyDarkTheme,
+  wa as applyLightTheme,
+  xa as applyTheme,
+  fa as applyThemeVars,
+  ka as darkTheme,
+  va as defaultTheme,
+  Ba as getCurrentTheme,
+  La as getCurrentThemeMode,
+  Pa as initializeTheme,
+  ba as resetTheme,
+  Aa as toggleTheme
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "type": "module",
   "module": "dist/index.js",
   "main": "dist/index.js",