@mindlogic-ai/logician-ui 5.0.0-alpha.27 → 5.0.0-alpha.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  2. package/dist/components/SegmentedControl/SegmentedControl.js +24 -11
  3. package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
  4. package/dist/components/SegmentedControl/SegmentedControl.mjs +24 -11
  5. package/dist/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/SegmentedControl/SegmentedControl.tsx +25 -11
package/dist/components/SegmentedControl/SegmentedControl.d.ts.map CHANGED
@@ -1 +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;AAKhD,OAAO,EACL,sBAAsB,EAEvB,MAAM,0BAA0B,CAAC;AAkBlC,eAAO,MAAM,gBAAgB;;;;kDAkI3B,CAAC"}
1
+ {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKhD,OAAO,EACL,sBAAsB,EAEvB,MAAM,0BAA0B,CAAC;AAwBlC,eAAO,MAAM,gBAAgB;;;;kDA0I3B,CAAC"}
package/dist/components/SegmentedControl/SegmentedControl.js CHANGED
@@ -14,13 +14,18 @@ const fontSizeBySize = {
14
14
  md: 'sm',
15
15
  lg: 'md',
16
16
  };
17
- // Item heights so that itemHeight + 2×root-padding(p="1") equals the Button height for each size
17
+ // Item heights so that itemHeight + 2×ROOT_PADDING (4px) equals the Button height for each size
18
18
  const itemHeightBySize = {
19
19
  xs: '6', // 32 - 8 = 24px
20
20
  sm: '7', // 36 - 8 = 28px
21
21
  md: '8', // 40 - 8 = 32px
22
22
  lg: '9', // 44 - 8 = 36px
23
23
  };
24
+ // Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
25
+ // 14px font it is 3.5px, and Ark positions the indicator from the item's
26
+ // integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
27
+ // and its bottom gap was a pixel narrower than its top.
28
+ const ROOT_PADDING = '4px';
24
29
  const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref) {
25
30
  const { options, value, onSelect, defaultValue, size = 'md', borderRadius = 'md', css, ...rest } = props;
26
31
  const fontSize = fontSizeBySize[size] ?? 'sm';
@@ -31,10 +36,13 @@ const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref)
31
36
  label: option.label,
32
37
  disabled: option.disabled,
33
38
  }));
34
- // Use theme borderRadius token directly via CSS variable
39
+ // Concentric with the root: inner radius = outer radius − root padding
40
+ // (ROOT_PADDING), floored at 0, so the gap between the two curves stays even.
35
41
  const indicatorRadius = typeof borderRadius === 'string'
36
- ? `var(--chakra-radii-${borderRadius})`
37
- : borderRadius;
42
+ ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${ROOT_PADDING}))`
43
+ : typeof borderRadius === 'number'
44
+ ? `max(0px, calc(${borderRadius}px - ${ROOT_PADDING}))`
45
+ : borderRadius;
38
46
  return (jsxRuntime.jsxs(react.SegmentGroup.Root, { ref: ref, value: value, defaultValue: defaultValue ?? options[0]?.value, onValueChange: (details) => {
39
47
  if (onSelect) {
40
48
  onSelect(details.value);
@@ -43,8 +51,9 @@ const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref)
43
51
  // Track is bg.subtle and the selected indicator rides on `bg.raised` — a
44
52
  // raised neutral surface that resolves white in light and a lighter
45
53
  // neutral than the track in dark, so the thumb reads as lifted
46
- // above the track in both modes. The indicator also gains a shadow: an md drop
47
- // shadow in light, and in dark — where a drop shadow is invisible on a
54
+ // above the track in both modes. The indicator also gains a shadow: an xs drop
55
+ // shadow in light (md's 4px/8px drop filled the 4px track padding below the
56
+ // thumb and made it read as sagging), and in dark — where a drop shadow is invisible on a
48
57
  // dark canvas — a soft ambient shadow + a translucent-white hairline edge.
49
58
  //
50
59
  // The track itself only contrasts where the page wash is darker (light) or
@@ -60,14 +69,18 @@ const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref)
60
69
  // it. `border.default` keeps the edge present but light — `border.strong`
61
70
  // reads as a heavy box for a control that normally has no outline.) Both
62
71
  // rings are box-shadows (not borders) so the matched item-height math is
63
- // preserved.
64
- bg: "bg.subtle", p: "1", borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss.mergeCss({
72
+ // preserved, and both are inset: an outer ring sits 1px outside the box,
73
+ // so any `overflow` ancestor flush with the control (a horizontal scroll
74
+ // row) clipped its straight edges and left only the rounded corners.
75
+ // Inset, it is drawn inside the root padding, where the indicator never
76
+ // reaches.
77
+ bg: "bg.subtle", p: ROOT_PADDING, borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss.mergeCss({
65
78
  '--segment-indicator-bg': `var(--chakra-colors-bg-raised)`,
66
- '--segment-indicator-shadow': `var(--chakra-shadows-md)`,
67
- boxShadow: '0 0 0 1px var(--chakra-colors-border-default)',
79
+ '--segment-indicator-shadow': `var(--chakra-shadows-xs)`,
80
+ boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-default)',
68
81
  '.dark &': {
69
82
  '--segment-indicator-shadow': '0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08)',
70
- boxShadow: '0 0 0 1px rgba(255, 255, 255, 0.12)',
83
+ boxShadow: 'inset 0 0 0 1px rgba(255, 255, 255, 0.12)',
71
84
  },
72
85
  }, css), children: [jsxRuntime.jsx(react.SegmentGroup.Indicator, { borderRadius: indicatorRadius,
73
86
  // `travel`, delivered through custom properties — see the comment on
package/dist/components/SegmentedControl/SegmentedControl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsxs","SegmentGroup","mergeCss","_jsx","indicatorTravel"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsxs","SegmentGroup","mergeCss","_jsx","indicatorTravel"],"mappings":"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"}
package/dist/components/SegmentedControl/SegmentedControl.mjs CHANGED
@@ -12,13 +12,18 @@ const fontSizeBySize = {
12
12
  md: 'sm',
13
13
  lg: 'md',
14
14
  };
15
- // Item heights so that itemHeight + 2×root-padding(p="1") equals the Button height for each size
15
+ // Item heights so that itemHeight + 2×ROOT_PADDING (4px) equals the Button height for each size
16
16
  const itemHeightBySize = {
17
17
  xs: '6', // 32 - 8 = 24px
18
18
  sm: '7', // 36 - 8 = 28px
19
19
  md: '8', // 40 - 8 = 32px
20
20
  lg: '9', // 44 - 8 = 36px
21
21
  };
22
+ // Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
23
+ // 14px font it is 3.5px, and Ark positions the indicator from the item's
24
+ // integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
25
+ // and its bottom gap was a pixel narrower than its top.
26
+ const ROOT_PADDING = '4px';
22
27
  const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
23
28
  const { options, value, onSelect, defaultValue, size = 'md', borderRadius = 'md', css, ...rest } = props;
24
29
  const fontSize = fontSizeBySize[size] ?? 'sm';
@@ -29,10 +34,13 @@ const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
29
34
  label: option.label,
30
35
  disabled: option.disabled,
31
36
  }));
32
- // Use theme borderRadius token directly via CSS variable
37
+ // Concentric with the root: inner radius = outer radius − root padding
38
+ // (ROOT_PADDING), floored at 0, so the gap between the two curves stays even.
33
39
  const indicatorRadius = typeof borderRadius === 'string'
34
- ? `var(--chakra-radii-${borderRadius})`
35
- : borderRadius;
40
+ ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${ROOT_PADDING}))`
41
+ : typeof borderRadius === 'number'
42
+ ? `max(0px, calc(${borderRadius}px - ${ROOT_PADDING}))`
43
+ : borderRadius;
36
44
  return (jsxs(SegmentGroup.Root, { ref: ref, value: value, defaultValue: defaultValue ?? options[0]?.value, onValueChange: (details) => {
37
45
  if (onSelect) {
38
46
  onSelect(details.value);
@@ -41,8 +49,9 @@ const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
41
49
  // Track is bg.subtle and the selected indicator rides on `bg.raised` — a
42
50
  // raised neutral surface that resolves white in light and a lighter
43
51
  // neutral than the track in dark, so the thumb reads as lifted
44
- // above the track in both modes. The indicator also gains a shadow: an md drop
45
- // shadow in light, and in dark — where a drop shadow is invisible on a
52
+ // above the track in both modes. The indicator also gains a shadow: an xs drop
53
+ // shadow in light (md's 4px/8px drop filled the 4px track padding below the
54
+ // thumb and made it read as sagging), and in dark — where a drop shadow is invisible on a
46
55
  // dark canvas — a soft ambient shadow + a translucent-white hairline edge.
47
56
  //
48
57
  // The track itself only contrasts where the page wash is darker (light) or
@@ -58,14 +67,18 @@ const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
58
67
  // it. `border.default` keeps the edge present but light — `border.strong`
59
68
  // reads as a heavy box for a control that normally has no outline.) Both
60
69
  // rings are box-shadows (not borders) so the matched item-height math is
61
- // preserved.
62
- bg: "bg.subtle", p: "1", borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss({
70
+ // preserved, and both are inset: an outer ring sits 1px outside the box,
71
+ // so any `overflow` ancestor flush with the control (a horizontal scroll
72
+ // row) clipped its straight edges and left only the rounded corners.
73
+ // Inset, it is drawn inside the root padding, where the indicator never
74
+ // reaches.
75
+ bg: "bg.subtle", p: ROOT_PADDING, borderRadius: borderRadius, w: "fit-content", ...rest, css: mergeCss({
63
76
  '--segment-indicator-bg': `var(--chakra-colors-bg-raised)`,
64
- '--segment-indicator-shadow': `var(--chakra-shadows-md)`,
65
- boxShadow: '0 0 0 1px var(--chakra-colors-border-default)',
77
+ '--segment-indicator-shadow': `var(--chakra-shadows-xs)`,
78
+ boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-default)',
66
79
  '.dark &': {
67
80
  '--segment-indicator-shadow': '0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08)',
68
- boxShadow: '0 0 0 1px rgba(255, 255, 255, 0.12)',
81
+ boxShadow: 'inset 0 0 0 1px rgba(255, 255, 255, 0.12)',
69
82
  },
70
83
  }, css), children: [jsx(SegmentGroup.Indicator, { borderRadius: indicatorRadius,
71
84
  // `travel`, delivered through custom properties — see the comment on
package/dist/components/SegmentedControl/SegmentedControl.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindlogic-ai/logician-ui",
3
- "version": "5.0.0-alpha.27",
3
+ "version": "5.0.0-alpha.28",
4
4
  "description": "A comprehensive React design system built on Chakra UI",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/components/SegmentedControl/SegmentedControl.tsx CHANGED
@@ -17,7 +17,7 @@ const fontSizeBySize: Record<string, string> = {
17
17
  lg: 'md',
18
18
  };
19
19
 
20
- // Item heights so that itemHeight + 2×root-padding(p="1") equals the Button height for each size
20
+ // Item heights so that itemHeight + 2×ROOT_PADDING (4px) equals the Button height for each size
21
21
  const itemHeightBySize: Record<string, string> = {
22
22
  xs: '6', // 32 - 8 = 24px
23
23
  sm: '7', // 36 - 8 = 28px
@@ -25,6 +25,12 @@ const itemHeightBySize: Record<string, string> = {
25
25
  lg: '9', // 44 - 8 = 36px
26
26
  };
27
27
 
28
+ // Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
29
+ // 14px font it is 3.5px, and Ark positions the indicator from the item's
30
+ // integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
31
+ // and its bottom gap was a pixel narrower than its top.
32
+ const ROOT_PADDING = '4px';
33
+
28
34
  export const SegmentedControl = forwardRef<
29
35
  HTMLDivElement,
30
36
  SegmentedControlProps
@@ -50,11 +56,14 @@ export const SegmentedControl = forwardRef<
50
56
  disabled: option.disabled,
51
57
  }));
52
58
 
53
- // Use theme borderRadius token directly via CSS variable
59
+ // Concentric with the root: inner radius = outer radius − root padding
60
+ // (ROOT_PADDING), floored at 0, so the gap between the two curves stays even.
54
61
  const indicatorRadius =
55
62
  typeof borderRadius === 'string'
56
- ? `var(--chakra-radii-${borderRadius})`
57
- : borderRadius;
63
+ ? `max(0px, calc(var(--chakra-radii-${borderRadius}) - ${ROOT_PADDING}))`
64
+ : typeof borderRadius === 'number'
65
+ ? `max(0px, calc(${borderRadius}px - ${ROOT_PADDING}))`
66
+ : borderRadius;
58
67
 
59
68
  return (
60
69
  <SegmentGroup.Root
@@ -70,8 +79,9 @@ export const SegmentedControl = forwardRef<
70
79
  // Track is bg.subtle and the selected indicator rides on `bg.raised` — a
71
80
  // raised neutral surface that resolves white in light and a lighter
72
81
  // neutral than the track in dark, so the thumb reads as lifted
73
- // above the track in both modes. The indicator also gains a shadow: an md drop
74
- // shadow in light, and in dark — where a drop shadow is invisible on a
82
+ // above the track in both modes. The indicator also gains a shadow: an xs drop
83
+ // shadow in light (md's 4px/8px drop filled the 4px track padding below the
84
+ // thumb and made it read as sagging), and in dark — where a drop shadow is invisible on a
75
85
  // dark canvas — a soft ambient shadow + a translucent-white hairline edge.
76
86
  //
77
87
  // The track itself only contrasts where the page wash is darker (light) or
@@ -87,21 +97,25 @@ export const SegmentedControl = forwardRef<
87
97
  // it. `border.default` keeps the edge present but light — `border.strong`
88
98
  // reads as a heavy box for a control that normally has no outline.) Both
89
99
  // rings are box-shadows (not borders) so the matched item-height math is
90
- // preserved.
100
+ // preserved, and both are inset: an outer ring sits 1px outside the box,
101
+ // so any `overflow` ancestor flush with the control (a horizontal scroll
102
+ // row) clipped its straight edges and left only the rounded corners.
103
+ // Inset, it is drawn inside the root padding, where the indicator never
104
+ // reaches.
91
105
  bg="bg.subtle"
92
- p="1"
106
+ p={ROOT_PADDING}
93
107
  borderRadius={borderRadius}
94
108
  w="fit-content"
95
109
  {...rest}
96
110
  css={mergeCss(
97
111
  {
98
112
  '--segment-indicator-bg': `var(--chakra-colors-bg-raised)`,
99
- '--segment-indicator-shadow': `var(--chakra-shadows-md)`,
100
- boxShadow: '0 0 0 1px var(--chakra-colors-border-default)',
113
+ '--segment-indicator-shadow': `var(--chakra-shadows-xs)`,
114
+ boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-default)',
101
115
  '.dark &': {
102
116
  '--segment-indicator-shadow':
103
117
  '0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08)',
104
- boxShadow: '0 0 0 1px rgba(255, 255, 255, 0.12)',
118
+ boxShadow: 'inset 0 0 0 1px rgba(255, 255, 255, 0.12)',
105
119
  },
106
120
  },
107
121
  css