@mindlogic-ai/logician-ui 5.0.0-alpha.29 → 5.0.0-alpha.30

package/dist/components/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EACL,sBAAsB,EAEvB,MAAM,0BAA0B,CAAC;AAQlC,eAAO,MAAM,gBAAgB;;;;kDA8I3B,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EACL,sBAAsB,EAEvB,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,gBAAgB;;;;kDAoJ3B,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -8,17 +8,17 @@ var controlSizes = require('../../theme/controlSizes.js');
 var mergeCss = require('../../utils/mergeCss.js');
 var SegmentedControl_styles = require('./SegmentedControl.styles.js');
 
-// Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
-// 14px font it is 3.5px, and Ark positions the indicator from the item's
-// integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
-// and its bottom gap was a pixel narrower than its top.
-const ROOT_PADDING = `${SegmentedControl_styles.SEGMENT_ROOT_PADDING_PX}px`;
 const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref) {
     const { options, value, onSelect, defaultValue, size = 'md', borderRadius = 'md', css, ...rest } = props;
     // Same textStyle as every other control at this size (see controlSizes):
     // the item height is em inside a ScaledContext, so equal type is what keeps
     // the outer height equal to Button's there too.
     const spec = controlSizes.getControlSize(size);
+    // Root padding in px, not the `1` spacing token: that token is 0.25em, so at
+    // a 14px font it is 3.5px, and Ark positions the indicator from the item's
+    // integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px
+    // low and its bottom gap was a pixel narrower than its top.
+    const rootPadding = `${SegmentedControl_styles.segmentRootPaddingPx(size)}px`;
     // Normalize options to the format expected by SegmentGroup.Items
     const items = options.map((option) => ({
         value: option.value,
@@ -26,11 +26,11 @@ const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref)
         disabled: option.disabled,
     }));
     // Concentric with the root: inner radius = outer radius − root padding
-    // (ROOT_PADDING), floored at 0, so the gap between the two curves stays even.
+    // (rootPadding), floored at 0, so the gap between the two curves stays even.
     const indicatorRadius = typeof borderRadius === 'string'
-        ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${ROOT_PADDING}))`
+        ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${rootPadding}))`
         : typeof borderRadius === 'number'
-            ? `max(0px, calc(${borderRadius}px - ${ROOT_PADDING}))`
+            ? `max(0px, calc(${borderRadius}px - ${rootPadding}))`
             : borderRadius;
     return (jsxRuntime.jsxs(react.SegmentGroup.Root, { ref: ref, value: value, defaultValue: defaultValue ?? options[0]?.value, onValueChange: (details) => {
             if (onSelect) {
@@ -63,7 +63,7 @@ const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref)
         // row) clipped its straight edges and left only the rounded corners.
         // Inset, it is drawn inside the root padding, where the indicator never
         // reaches.
-        bg: "bg.subtle", p: ROOT_PADDING, borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss.mergeCss({
+        bg: "bg.subtle", p: rootPadding, borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss.mergeCss({
             '--segment-indicator-bg': `var(--chakra-colors-bg-raised)`,
             '--segment-indicator-shadow': `var(--chakra-shadows-xs)`,
             boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-default)',

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["SEGMENT_ROOT_PADDING_PX","forwardRef","getControlSize","_jsxs","SegmentGroup","mergeCss","_jsx","indicatorTravel","segmentItemHeight"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["forwardRef","getControlSize","segmentRootPaddingPx","_jsxs","SegmentGroup","mergeCss","_jsx","indicatorTravel","segmentItemHeight"],"mappings":"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"}

package/dist/components/SegmentedControl/SegmentedControl.mjs

@@ -4,19 +4,19 @@ import { forwardRef } from 'react';
 import { SegmentGroup } from '@chakra-ui/react';
 import { getControlSize } from '../../theme/controlSizes.mjs';
 import { mergeCss } from '../../utils/mergeCss.mjs';
-import { SEGMENT_ROOT_PADDING_PX, indicatorTravel, segmentItemHeight } from './SegmentedControl.styles.mjs';
+import { segmentRootPaddingPx, indicatorTravel, segmentItemHeight } from './SegmentedControl.styles.mjs';
 
-// Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
-// 14px font it is 3.5px, and Ark positions the indicator from the item's
-// integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
-// and its bottom gap was a pixel narrower than its top.
-const ROOT_PADDING = `${SEGMENT_ROOT_PADDING_PX}px`;
 const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
     const { options, value, onSelect, defaultValue, size = 'md', borderRadius = 'md', css, ...rest } = props;
     // Same textStyle as every other control at this size (see controlSizes):
     // the item height is em inside a ScaledContext, so equal type is what keeps
     // the outer height equal to Button's there too.
     const spec = getControlSize(size);
+    // Root padding in px, not the `1` spacing token: that token is 0.25em, so at
+    // a 14px font it is 3.5px, and Ark positions the indicator from the item's
+    // integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px
+    // low and its bottom gap was a pixel narrower than its top.
+    const rootPadding = `${segmentRootPaddingPx(size)}px`;
     // Normalize options to the format expected by SegmentGroup.Items
     const items = options.map((option) => ({
         value: option.value,
@@ -24,11 +24,11 @@ const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
         disabled: option.disabled,
     }));
     // Concentric with the root: inner radius = outer radius − root padding
-    // (ROOT_PADDING), floored at 0, so the gap between the two curves stays even.
+    // (rootPadding), floored at 0, so the gap between the two curves stays even.
     const indicatorRadius = typeof borderRadius === 'string'
-        ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${ROOT_PADDING}))`
+        ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${rootPadding}))`
         : typeof borderRadius === 'number'
-            ? `max(0px, calc(${borderRadius}px - ${ROOT_PADDING}))`
+            ? `max(0px, calc(${borderRadius}px - ${rootPadding}))`
             : borderRadius;
     return (jsxs(SegmentGroup.Root, { ref: ref, value: value, defaultValue: defaultValue ?? options[0]?.value, onValueChange: (details) => {
             if (onSelect) {
@@ -61,7 +61,7 @@ const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
         // row) clipped its straight edges and left only the rounded corners.
         // Inset, it is drawn inside the root padding, where the indicator never
         // reaches.
-        bg: "bg.subtle", p: ROOT_PADDING, borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss({
+        bg: "bg.subtle", p: rootPadding, borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss({
             '--segment-indicator-bg': `var(--chakra-colors-bg-raised)`,
             '--segment-indicator-shadow': `var(--chakra-shadows-xs)`,
             boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-default)',

package/dist/components/SegmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/SegmentedControl/SegmentedControl.styles.d.ts

@@ -14,21 +14,27 @@ import type { SystemStyleObject } from '@chakra-ui/react';
  */
 export declare const indicatorTravel: SystemStyleObject;
 /**
- * The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
- * why px). Shared with the item-height calc so the two cannot disagree.
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
  */
-export declare const SEGMENT_ROOT_PADDING_PX = 4;
+export declare const segmentRootPaddingPx: (size: unknown) => number;
 /**
- * Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
  * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
  * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
  * for sm / md / lg inside a 16px `ScaledContext`.
  *
  * A `calc()` on the height token rather than a smaller token: the root padding
- * is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
- * so no single token equals "Button height − 8px" at every font size. The old
- * one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
- * came out 1px taller than Button at the real 14px root.
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
  */
 export declare const segmentItemHeight: (size: unknown) => string;
 //# sourceMappingURL=SegmentedControl.styles.d.ts.map

package/dist/components/SegmentedControl/SegmentedControl.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQ1D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,iBAM7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,MAKT,CAAC"}
+{"version":3,"file":"SegmentedControl.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQ1D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,iBAM7B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,OAAO,KAAG,MACZ,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,MAKN,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.styles.js

@@ -24,27 +24,33 @@ const indicatorTravel = {
     },
 };
 /**
- * The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
- * why px). Shared with the item-height calc so the two cannot disagree.
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
  */
-const SEGMENT_ROOT_PADDING_PX = 4;
+const segmentRootPaddingPx = (size) => size === 'xs' || size === '2xs' ? 2 : 4;
 /**
- * Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
  * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
  * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
  * for sm / md / lg inside a 16px `ScaledContext`.
  *
  * A `calc()` on the height token rather than a smaller token: the root padding
- * is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
- * so no single token equals "Button height − 8px" at every font size. The old
- * one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
- * came out 1px taller than Button at the real 14px root.
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
  */
 const segmentItemHeight = (size) => `calc(${controlSizes.controlHeightVar((typeof size === 'string' && size in controlSizes.controlSizes
     ? size
-    : 'md'))} - ${SEGMENT_ROOT_PADDING_PX * 2}px)`;
+    : 'md'))} - ${segmentRootPaddingPx(size) * 2}px)`;
 
-exports.SEGMENT_ROOT_PADDING_PX = SEGMENT_ROOT_PADDING_PX;
 exports.indicatorTravel = indicatorTravel;
 exports.segmentItemHeight = segmentItemHeight;
+exports.segmentRootPaddingPx = segmentRootPaddingPx;
 //# sourceMappingURL=SegmentedControl.styles.js.map

package/dist/components/SegmentedControl/SegmentedControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":["controlHeightVar","controlSizes"],"mappings":";;;;;AAQA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;AAGH;;;AAGG;AACI,MAAM,uBAAuB,GAAG;AAEvC;;;;;;;;;;;AAWG;MACU,iBAAiB,GAAG,CAAC,IAAa,KAC7C,CAAA,KAAA,EAAQA,6BAAgB,EACrB,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAIC;AACnC,MAAE;MACA,IAAI,EACT,MAAM,uBAAuB,GAAG,CAAC,CAAA,GAAA;;;;;;"}
+{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":["controlHeightVar","controlSizes"],"mappings":";;;;;AAQA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;AAGH;;;;;;;;;AASG;AACI,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAChD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,GAAG,CAAC,GAAG;AAExC;;;;;;;;;;;AAWG;MACU,iBAAiB,GAAG,CAAC,IAAa,KAC7C,CAAA,KAAA,EAAQA,6BAAgB,EACrB,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAIC;AACnC,MAAE;AACF,MAAE,IAAI,EACT,CAAA,GAAA,EAAM,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,GAAA;;;;;;"}

package/dist/components/SegmentedControl/SegmentedControl.styles.mjs

@@ -22,25 +22,31 @@ const indicatorTravel = {
     },
 };
 /**
- * The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
- * why px). Shared with the item-height calc so the two cannot disagree.
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
  */
-const SEGMENT_ROOT_PADDING_PX = 4;
+const segmentRootPaddingPx = (size) => size === 'xs' || size === '2xs' ? 2 : 4;
 /**
- * Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
  * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
  * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
  * for sm / md / lg inside a 16px `ScaledContext`.
  *
  * A `calc()` on the height token rather than a smaller token: the root padding
- * is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
- * so no single token equals "Button height − 8px" at every font size. The old
- * one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
- * came out 1px taller than Button at the real 14px root.
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
  */
 const segmentItemHeight = (size) => `calc(${controlHeightVar((typeof size === 'string' && size in controlSizes
     ? size
-    : 'md'))} - ${SEGMENT_ROOT_PADDING_PX * 2}px)`;
+    : 'md'))} - ${segmentRootPaddingPx(size) * 2}px)`;
 
-export { SEGMENT_ROOT_PADDING_PX, indicatorTravel, segmentItemHeight };
+export { indicatorTravel, segmentItemHeight, segmentRootPaddingPx };
 //# sourceMappingURL=SegmentedControl.styles.mjs.map

package/dist/components/SegmentedControl/SegmentedControl.styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;AAGH;;;AAGG;AACI,MAAM,uBAAuB,GAAG;AAEvC;;;;;;;;;;;AAWG;MACU,iBAAiB,GAAG,CAAC,IAAa,KAC7C,CAAA,KAAA,EAAQ,gBAAgB,EACrB,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI;AACnC,MAAE;MACA,IAAI,EACT,MAAM,uBAAuB,GAAG,CAAC,CAAA,GAAA;;;;"}
+{"version":3,"file":"SegmentedControl.styles.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;AAGH;;;;;;;;;AASG;AACI,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAChD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,GAAG,CAAC,GAAG;AAExC;;;;;;;;;;;AAWG;MACU,iBAAiB,GAAG,CAAC,IAAa,KAC7C,CAAA,KAAA,EAAQ,gBAAgB,EACrB,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI;AACnC,MAAE;AACF,MAAE,IAAI,EACT,CAAA,GAAA,EAAM,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,GAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.30",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/SegmentedControl/SegmentedControl.styles.ts

@@ -28,26 +28,33 @@ export const indicatorTravel: SystemStyleObject = {
 };
 
 /**
- * The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
- * why px). Shared with the item-height calc so the two cannot disagree.
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
  */
-export const SEGMENT_ROOT_PADDING_PX = 4;
+export const segmentRootPaddingPx = (size: unknown): number =>
+  size === 'xs' || size === '2xs' ? 2 : 4;
 
 /**
- * Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
  * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
  * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
  * for sm / md / lg inside a 16px `ScaledContext`.
  *
  * A `calc()` on the height token rather than a smaller token: the root padding
- * is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
- * so no single token equals "Button height − 8px" at every font size. The old
- * one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
- * came out 1px taller than Button at the real 14px root.
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
  */
 export const segmentItemHeight = (size: unknown): string =>
   `calc(${controlHeightVar(
     (typeof size === 'string' && size in controlSizes
       ? size
       : 'md') as ControlSize
-  )} - ${SEGMENT_ROOT_PADDING_PX * 2}px)`;
+  )} - ${segmentRootPaddingPx(size) * 2}px)`;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -6,20 +6,14 @@ import { mergeCss } from '@/utils/mergeCss';
 
 import {
   indicatorTravel,
-  SEGMENT_ROOT_PADDING_PX,
   segmentItemHeight,
+  segmentRootPaddingPx,
 } from './SegmentedControl.styles';
 import {
   SegmentedControlOption,
   SegmentedControlProps,
 } from './SegmentedControl.types';
 
-// Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
-// 14px font it is 3.5px, and Ark positions the indicator from the item's
-// integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
-// and its bottom gap was a pixel narrower than its top.
-const ROOT_PADDING = `${SEGMENT_ROOT_PADDING_PX}px`;
-
 export const SegmentedControl = forwardRef<
   HTMLDivElement,
   SegmentedControlProps
@@ -40,6 +34,12 @@ export const SegmentedControl = forwardRef<
   // the outer height equal to Button's there too.
   const spec = getControlSize(size);
 
+  // Root padding in px, not the `1` spacing token: that token is 0.25em, so at
+  // a 14px font it is 3.5px, and Ark positions the indicator from the item's
+  // integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px
+  // low and its bottom gap was a pixel narrower than its top.
+  const rootPadding = `${segmentRootPaddingPx(size)}px`;
+
   // Normalize options to the format expected by SegmentGroup.Items
   const items = options.map((option: SegmentedControlOption) => ({
     value: option.value,
@@ -48,12 +48,12 @@ export const SegmentedControl = forwardRef<
   }));
 
   // Concentric with the root: inner radius = outer radius − root padding
-  // (ROOT_PADDING), floored at 0, so the gap between the two curves stays even.
+  // (rootPadding), floored at 0, so the gap between the two curves stays even.
   const indicatorRadius =
     typeof borderRadius === 'string'
-      ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${ROOT_PADDING}))`
+      ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${rootPadding}))`
       : typeof borderRadius === 'number'
-        ? `max(0px, calc(${borderRadius}px - ${ROOT_PADDING}))`
+        ? `max(0px, calc(${borderRadius}px - ${rootPadding}))`
         : borderRadius;
 
   return (
@@ -94,7 +94,7 @@ export const SegmentedControl = forwardRef<
       // Inset, it is drawn inside the root padding, where the indicator never
       // reaches.
       bg="bg.subtle"
-      p={ROOT_PADDING}
+      p={rootPadding}
       borderRadius={borderRadius}
       w="fit-content"
       {...rest}

package/src/theme/controlSizes.test.ts

@@ -1,7 +1,10 @@
 import { defaultSystem } from '@chakra-ui/react';
 import { describe, expect, it } from 'vitest';
 
-import { segmentItemHeight } from '../components/SegmentedControl/SegmentedControl.styles';
+import {
+  segmentItemHeight,
+  segmentRootPaddingPx,
+} from '../components/SegmentedControl/SegmentedControl.styles';
 import { getTagSizeStyles } from '../components/Tag/Tag.styles';
 import {
   CONTROL_RADIUS,
@@ -97,10 +100,12 @@ describe('controlSizes — every other control resolves to the same scale', () =
   });
 
   it.each(CORE_CONTROL_SIZES)(
-    'SegmentedControl %s: item + 2×4px root padding = the height token',
+    'SegmentedControl %s: item + 2 × root padding = the height token',
     (size) => {
+      const padding = size === 'xs' ? 2 : 4;
+      expect(segmentRootPaddingPx(size)).toBe(padding);
       expect(segmentItemHeight(size)).toBe(
-        `calc(var(--chakra-sizes-${controlSizes[size].height}) - 8px)`
+        `calc(var(--chakra-sizes-${controlSizes[size].height}) - ${padding * 2}px)`
       );
     }
   );