@mindlogic-ai/logician-ui 5.0.0-alpha.28 → 5.0.0-alpha.29
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.
- package/MIGRATION-5.0.md +38 -0
- package/USAGE.md +20 -0
- package/dist/components/DatePicker/DatePicker.types.d.ts +12 -0
- package/dist/components/DatePicker/DatePicker.types.d.ts.map +1 -0
- package/dist/components/DatePicker/RangeDatePicker.d.ts +2 -1
- package/dist/components/DatePicker/RangeDatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/RangeDatePicker.js +4 -2
- package/dist/components/DatePicker/RangeDatePicker.js.map +1 -1
- package/dist/components/DatePicker/RangeDatePicker.mjs +4 -2
- package/dist/components/DatePicker/RangeDatePicker.mjs.map +1 -1
- package/dist/components/DatePicker/SingleDatePicker.d.ts +2 -1
- package/dist/components/DatePicker/SingleDatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/SingleDatePicker.js +4 -2
- package/dist/components/DatePicker/SingleDatePicker.js.map +1 -1
- package/dist/components/DatePicker/SingleDatePicker.mjs +4 -2
- package/dist/components/DatePicker/SingleDatePicker.mjs.map +1 -1
- package/dist/components/DatePicker/index.d.ts +1 -0
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/MonthPicker/MonthPicker.d.ts.map +1 -1
- package/dist/components/MonthPicker/MonthPicker.js +3 -2
- package/dist/components/MonthPicker/MonthPicker.js.map +1 -1
- package/dist/components/MonthPicker/MonthPicker.mjs +3 -2
- package/dist/components/MonthPicker/MonthPicker.mjs.map +1 -1
- package/dist/components/MonthPicker/MonthPicker.types.d.ts +7 -1
- package/dist/components/MonthPicker/MonthPicker.types.d.ts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.js +7 -18
- package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.mjs +8 -19
- package/dist/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.styles.d.ts +18 -0
- package/dist/components/SegmentedControl/SegmentedControl.styles.d.ts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.styles.js +24 -0
- package/dist/components/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.styles.mjs +23 -1
- package/dist/components/SegmentedControl/SegmentedControl.styles.mjs.map +1 -1
- package/dist/components/Tag/Tag.d.ts.map +1 -1
- package/dist/components/Tag/Tag.js +14 -2
- package/dist/components/Tag/Tag.js.map +1 -1
- package/dist/components/Tag/Tag.mjs +15 -3
- package/dist/components/Tag/Tag.mjs.map +1 -1
- package/dist/components/Tag/Tag.styles.d.ts +20 -2
- package/dist/components/Tag/Tag.styles.d.ts.map +1 -1
- package/dist/components/Tag/Tag.styles.js +81 -0
- package/dist/components/Tag/Tag.styles.js.map +1 -1
- package/dist/components/Tag/Tag.styles.mjs +81 -1
- package/dist/components/Tag/Tag.styles.mjs.map +1 -1
- package/dist/components/Tag/Tag.types.d.ts +15 -2
- package/dist/components/Tag/Tag.types.d.ts.map +1 -1
- package/dist/components/Tag/index.d.ts +2 -2
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -1
- package/dist/index.mjs.map +1 -1
- package/dist/theme/controlSizes.d.ts +91 -0
- package/dist/theme/controlSizes.d.ts.map +1 -0
- package/dist/theme/controlSizes.js +143 -0
- package/dist/theme/controlSizes.js.map +1 -0
- package/dist/theme/controlSizes.mjs +135 -0
- package/dist/theme/controlSizes.mjs.map +1 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +12 -43
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +12 -43
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/recipes/controls.d.ts +94 -0
- package/dist/theme/recipes/controls.d.ts.map +1 -0
- package/dist/theme/recipes/controls.js +154 -0
- package/dist/theme/recipes/controls.js.map +1 -0
- package/dist/theme/recipes/controls.mjs +144 -0
- package/dist/theme/recipes/controls.mjs.map +1 -0
- package/package.json +1 -1
- package/src/components/DatePicker/DatePicker.types.ts +12 -0
- package/src/components/DatePicker/RangeDatePicker.tsx +7 -1
- package/src/components/DatePicker/SingleDatePicker.tsx +7 -1
- package/src/components/DatePicker/index.ts +1 -0
- package/src/components/MonthPicker/MonthPicker.tsx +7 -1
- package/src/components/MonthPicker/MonthPicker.types.ts +8 -1
- package/src/components/SegmentedControl/SegmentedControl.styles.ts +31 -0
- package/src/components/SegmentedControl/SegmentedControl.tsx +15 -22
- package/src/components/SegmentedControl/SegmentedControl.usage.mdx +15 -8
- package/src/components/Tag/Tag.styles.ts +117 -2
- package/src/components/Tag/Tag.test.tsx +87 -1
- package/src/components/Tag/Tag.tsx +22 -1
- package/src/components/Tag/Tag.types.ts +16 -2
- package/src/components/Tag/index.ts +2 -0
- package/src/components/claude.md +23 -0
- package/src/index.ts +12 -0
- package/src/theme/ControlSizes.stories.tsx +586 -0
- package/src/theme/claude.md +8 -0
- package/src/theme/controlSizes.test.ts +148 -0
- package/src/theme/controlSizes.ts +162 -0
- package/src/theme/index.ts +21 -46
- package/src/theme/recipes/controls.ts +171 -0
|
@@ -2,32 +2,21 @@
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { SegmentGroup } from '@chakra-ui/react';
|
|
5
|
+
import { getControlSize } from '../../theme/controlSizes.mjs';
|
|
5
6
|
import { mergeCss } from '../../utils/mergeCss.mjs';
|
|
6
|
-
import { indicatorTravel } from './SegmentedControl.styles.mjs';
|
|
7
|
+
import { SEGMENT_ROOT_PADDING_PX, indicatorTravel, segmentItemHeight } from './SegmentedControl.styles.mjs';
|
|
7
8
|
|
|
8
|
-
// Match font sizes to the equivalent Chakra button sizes
|
|
9
|
-
const fontSizeBySize = {
|
|
10
|
-
xs: 'xs',
|
|
11
|
-
sm: 'sm',
|
|
12
|
-
md: 'sm',
|
|
13
|
-
lg: 'md',
|
|
14
|
-
};
|
|
15
|
-
// Item heights so that itemHeight + 2×ROOT_PADDING (4px) equals the Button height for each size
|
|
16
|
-
const itemHeightBySize = {
|
|
17
|
-
xs: '6', // 32 - 8 = 24px
|
|
18
|
-
sm: '7', // 36 - 8 = 28px
|
|
19
|
-
md: '8', // 40 - 8 = 32px
|
|
20
|
-
lg: '9', // 44 - 8 = 36px
|
|
21
|
-
};
|
|
22
9
|
// Root padding in px, not the `1` spacing token: that token is 0.25em, so at a
|
|
23
10
|
// 14px font it is 3.5px, and Ark positions the indicator from the item's
|
|
24
11
|
// integer offsetTop/offsetLeft (3.5 rounds to 4). The thumb then sat 0.5px low
|
|
25
12
|
// and its bottom gap was a pixel narrower than its top.
|
|
26
|
-
const ROOT_PADDING =
|
|
13
|
+
const ROOT_PADDING = `${SEGMENT_ROOT_PADDING_PX}px`;
|
|
27
14
|
const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
|
|
28
15
|
const { options, value, onSelect, defaultValue, size = 'md', borderRadius = 'md', css, ...rest } = props;
|
|
29
|
-
|
|
30
|
-
|
|
16
|
+
// Same textStyle as every other control at this size (see controlSizes):
|
|
17
|
+
// the item height is em inside a ScaledContext, so equal type is what keeps
|
|
18
|
+
// the outer height equal to Button's there too.
|
|
19
|
+
const spec = getControlSize(size);
|
|
31
20
|
// Normalize options to the format expected by SegmentGroup.Items
|
|
32
21
|
const items = options.map((option) => ({
|
|
33
22
|
value: option.value,
|
|
@@ -83,7 +72,7 @@ const SegmentedControl = forwardRef(function SegmentedControl(props, ref) {
|
|
|
83
72
|
}, css), children: [jsx(SegmentGroup.Indicator, { borderRadius: indicatorRadius,
|
|
84
73
|
// `travel`, delivered through custom properties — see the comment on
|
|
85
74
|
// `indicatorTravel` for why the ordinary preset cannot reach this part.
|
|
86
|
-
css: indicatorTravel }), items.map((item) => (jsxs(SegmentGroup.Item, { value: item.value, disabled: item.disabled, cursor: item.disabled ? 'not-allowed' : 'pointer', flex: "1", height:
|
|
75
|
+
css: indicatorTravel }), items.map((item) => (jsxs(SegmentGroup.Item, { value: item.value, disabled: item.disabled, cursor: item.disabled ? 'not-allowed' : 'pointer', flex: "1", height: segmentItemHeight(size), textStyle: spec.textStyle, px: spec.actionPaddingX, gap: spec.gap, _hover: { bg: 'transparent' }, children: [jsx(SegmentGroup.ItemText, { "data-text": typeof item.label === 'string' ? item.label : undefined, color: "fg.muted", fontWeight: "500", whiteSpace: "nowrap", display: "inline-flex", flexDirection: "column", alignItems: "center", css: {
|
|
87
76
|
'&::after': {
|
|
88
77
|
content: 'attr(data-text)',
|
|
89
78
|
fontWeight: '600',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -13,4 +13,22 @@ import type { SystemStyleObject } from '@chakra-ui/react';
|
|
|
13
13
|
* moment to promote it.
|
|
14
14
|
*/
|
|
15
15
|
export declare const indicatorTravel: SystemStyleObject;
|
|
16
|
+
/**
|
|
17
|
+
* The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
|
|
18
|
+
* why px). Shared with the item-height calc so the two cannot disagree.
|
|
19
|
+
*/
|
|
20
|
+
export declare const SEGMENT_ROOT_PADDING_PX = 4;
|
|
21
|
+
/**
|
|
22
|
+
* Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
|
|
23
|
+
* Button height for the same size — `controlSizes[size].height`, i.e. 28 /
|
|
24
|
+
* 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
|
|
25
|
+
* for sm / md / lg inside a 16px `ScaledContext`.
|
|
26
|
+
*
|
|
27
|
+
* A `calc()` on the height token rather than a smaller token: the root padding
|
|
28
|
+
* is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
|
|
29
|
+
* so no single token equals "Button height − 8px" at every font size. The old
|
|
30
|
+
* one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
|
|
31
|
+
* came out 1px taller than Button at the real 14px root.
|
|
32
|
+
*/
|
|
33
|
+
export declare const segmentItemHeight: (size: unknown) => string;
|
|
16
34
|
//# sourceMappingURL=SegmentedControl.styles.d.ts.map
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var controlSizes = require('../../theme/controlSizes.js');
|
|
5
|
+
|
|
4
6
|
/**
|
|
5
7
|
* `travel`, but delivered through custom properties.
|
|
6
8
|
*
|
|
@@ -21,6 +23,28 @@ const indicatorTravel = {
|
|
|
21
23
|
'--transition-duration': 'var(--chakra-durations-motion-instant)',
|
|
22
24
|
},
|
|
23
25
|
};
|
|
26
|
+
/**
|
|
27
|
+
* The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
|
|
28
|
+
* why px). Shared with the item-height calc so the two cannot disagree.
|
|
29
|
+
*/
|
|
30
|
+
const SEGMENT_ROOT_PADDING_PX = 4;
|
|
31
|
+
/**
|
|
32
|
+
* Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
|
|
33
|
+
* Button height for the same size — `controlSizes[size].height`, i.e. 28 /
|
|
34
|
+
* 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
|
|
35
|
+
* for sm / md / lg inside a 16px `ScaledContext`.
|
|
36
|
+
*
|
|
37
|
+
* A `calc()` on the height token rather than a smaller token: the root padding
|
|
38
|
+
* is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
|
|
39
|
+
* so no single token equals "Button height − 8px" at every font size. The old
|
|
40
|
+
* one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
|
|
41
|
+
* came out 1px taller than Button at the real 14px root.
|
|
42
|
+
*/
|
|
43
|
+
const segmentItemHeight = (size) => `calc(${controlSizes.controlHeightVar((typeof size === 'string' && size in controlSizes.controlSizes
|
|
44
|
+
? size
|
|
45
|
+
: 'md'))} - ${SEGMENT_ROOT_PADDING_PX * 2}px)`;
|
|
24
46
|
|
|
47
|
+
exports.SEGMENT_ROOT_PADDING_PX = SEGMENT_ROOT_PADDING_PX;
|
|
25
48
|
exports.indicatorTravel = indicatorTravel;
|
|
49
|
+
exports.segmentItemHeight = segmentItemHeight;
|
|
26
50
|
//# sourceMappingURL=SegmentedControl.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
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;;;;;;"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { controlHeightVar, controlSizes } from '../../theme/controlSizes.mjs';
|
|
3
|
+
|
|
2
4
|
/**
|
|
3
5
|
* `travel`, but delivered through custom properties.
|
|
4
6
|
*
|
|
@@ -19,6 +21,26 @@ const indicatorTravel = {
|
|
|
19
21
|
'--transition-duration': 'var(--chakra-durations-motion-instant)',
|
|
20
22
|
},
|
|
21
23
|
};
|
|
24
|
+
/**
|
|
25
|
+
* The root's padding in px (see `ROOT_PADDING` in SegmentedControl.tsx for
|
|
26
|
+
* why px). Shared with the item-height calc so the two cannot disagree.
|
|
27
|
+
*/
|
|
28
|
+
const SEGMENT_ROOT_PADDING_PX = 4;
|
|
29
|
+
/**
|
|
30
|
+
* Item height so that the OUTER height (item + 2 × ROOT_PADDING) equals the
|
|
31
|
+
* Button height for the same size — `controlSizes[size].height`, i.e. 28 /
|
|
32
|
+
* 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
|
|
33
|
+
* for sm / md / lg inside a 16px `ScaledContext`.
|
|
34
|
+
*
|
|
35
|
+
* A `calc()` on the height token rather than a smaller token: the root padding
|
|
36
|
+
* is a fixed 4px while the sizes tokens are rem (em inside a ScaledContext),
|
|
37
|
+
* so no single token equals "Button height − 8px" at every font size. The old
|
|
38
|
+
* one-token-smaller table (`6`/`7`/`8`/`9`) was written for a 16px rem and
|
|
39
|
+
* came out 1px taller than Button at the real 14px root.
|
|
40
|
+
*/
|
|
41
|
+
const segmentItemHeight = (size) => `calc(${controlHeightVar((typeof size === 'string' && size in controlSizes
|
|
42
|
+
? size
|
|
43
|
+
: 'md'))} - ${SEGMENT_ROOT_PADDING_PX * 2}px)`;
|
|
22
44
|
|
|
23
|
-
export { indicatorTravel };
|
|
45
|
+
export { SEGMENT_ROOT_PADDING_PX, indicatorTravel, segmentItemHeight };
|
|
24
46
|
//# sourceMappingURL=SegmentedControl.styles.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.styles.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAmJ1C,yEAAyE;AACzE,eAAO,MAAM,GAAG,2DAA4C,CAAC"}
|
|
@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
var focusRing = require('../../utils/focusRing.js');
|
|
8
|
+
var mergeCss = require('../../utils/mergeCss.js');
|
|
8
9
|
var polymorphic = require('../../types/polymorphic.js');
|
|
9
10
|
var Tag_styles = require('./Tag.styles.js');
|
|
10
11
|
|
|
@@ -20,6 +21,13 @@ var Tag_styles = require('./Tag.styles.js');
|
|
|
20
21
|
* toggle (`selected` passed) or renders as a `button` / `a`. Render filter
|
|
21
22
|
* chips `as="button"` so they are keyboard-operable.
|
|
22
23
|
*
|
|
24
|
+
* **Size depends on that.** A static tag is a badge and keeps Chakra's badge
|
|
25
|
+
* sizes (`sm` 15.75px · `md` 17.5px · `lg` 21px · `xl` 28px at the 14px root).
|
|
26
|
+
* An interactive tag is a control that sits in a row with buttons and inputs,
|
|
27
|
+
* so its `size` (`xs`–`xl`, default `md`) follows the shared control scale
|
|
28
|
+
* (`controlSizes`): the same height, type, padding and icon size as a
|
|
29
|
+
* `Button` of that size.
|
|
30
|
+
*
|
|
23
31
|
* @example
|
|
24
32
|
* ```tsx
|
|
25
33
|
* <Tag>Draft</Tag>
|
|
@@ -30,7 +38,7 @@ var Tag_styles = require('./Tag.styles.js');
|
|
|
30
38
|
* ```
|
|
31
39
|
*/
|
|
32
40
|
const TagImpl = React.forwardRef((props, ref) => {
|
|
33
|
-
const { tone: toneProp, selected: selectedProp, category, icon, disabled = false, onClick, children, colorPalette: legacyPalette, variant: legacyVariant, as, __legacyComponent: legacyComponent, ...rest } = props;
|
|
41
|
+
const { tone: toneProp, selected: selectedProp, category, icon, disabled = false, onClick, children, colorPalette: legacyPalette, variant: legacyVariant, as, size, css: cssProp, __legacyComponent: legacyComponent, ...rest } = props;
|
|
34
42
|
let tone = toneProp;
|
|
35
43
|
let selected = selectedProp;
|
|
36
44
|
if (legacyComponent !== undefined ||
|
|
@@ -52,10 +60,14 @@ const TagImpl = React.forwardRef((props, ref) => {
|
|
|
52
60
|
// order. `as="button"` gets the real attribute instead.
|
|
53
61
|
const disabledNonNative = disabled && wantsInteraction && !isButton;
|
|
54
62
|
const styles = Tag_styles.getTagStyles({ tone, selected, category, interactive });
|
|
63
|
+
// Decided on `wantsInteraction`, not `interactive`, so disabling a filter
|
|
64
|
+
// chip does not shrink it.
|
|
65
|
+
const { sizeStyles, recipeSize, cssVars } = Tag_styles.getTagSizeStyles(size, wantsInteraction);
|
|
66
|
+
const css = cssVars ? mergeCss.mergeCss(cssVars, cssProp) : cssProp;
|
|
55
67
|
const handleClick = disabled
|
|
56
68
|
? (event) => event.preventDefault()
|
|
57
69
|
: onClick;
|
|
58
|
-
return (jsxRuntime.jsxs(react.Tag.Root, { border: "1px solid", borderRadius: "md", boxShadow: "none",
|
|
70
|
+
return (jsxRuntime.jsxs(react.Tag.Root, { border: "1px solid", borderRadius: "md", boxShadow: "none", fontWeight: "semibold", size: recipeSize, ...sizeStyles, ...styles, ...focusRing.focusRing, "data-selected": selected ? '' : undefined, "data-disabled": disabled ? '' : undefined, "aria-pressed": isButton && selectedProp !== undefined ? !!selected : undefined, "aria-disabled": disabledNonNative ? true : undefined, ...(isButton && { type: 'button', disabled }), onClick: handleClick, ...rest, ...(disabledNonNative && { tabIndex: -1 }), as: as, css: css, ref: ref, children: [icon != null ? (jsxRuntime.jsx(react.Tag.StartElement, { color: category ? `category.${category}.fg` : undefined, fontWeight: "bold", children: icon })) : null, children] }));
|
|
59
71
|
});
|
|
60
72
|
TagImpl.displayName = 'Tag';
|
|
61
73
|
/** Type-level polymorphism over the same runtime — see `polymorphic`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":[null],"names":["forwardRef","mapLegacyTagProps","warnLegacyTagProps","getTagStyles","_jsxs","ChakraTag","focusRing","_jsx","polymorphic"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":[null],"names":["forwardRef","mapLegacyTagProps","warnLegacyTagProps","getTagStyles","getTagSizeStyles","mergeCss","_jsxs","ChakraTag","focusRing","_jsx","polymorphic"],"mappings":"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"}
|
|
@@ -3,8 +3,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { Tag as Tag$1 } from '@chakra-ui/react';
|
|
5
5
|
import { focusRing } from '../../utils/focusRing.mjs';
|
|
6
|
+
import { mergeCss } from '../../utils/mergeCss.mjs';
|
|
6
7
|
import { polymorphic } from '../../types/polymorphic.mjs';
|
|
7
|
-
import { mapLegacyTagProps, warnLegacyTagProps, getTagStyles } from './Tag.styles.mjs';
|
|
8
|
+
import { mapLegacyTagProps, warnLegacyTagProps, getTagStyles, getTagSizeStyles } from './Tag.styles.mjs';
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* Tag — a label for categorising, filtering and removable selections. Since
|
|
@@ -18,6 +19,13 @@ import { mapLegacyTagProps, warnLegacyTagProps, getTagStyles } from './Tag.style
|
|
|
18
19
|
* toggle (`selected` passed) or renders as a `button` / `a`. Render filter
|
|
19
20
|
* chips `as="button"` so they are keyboard-operable.
|
|
20
21
|
*
|
|
22
|
+
* **Size depends on that.** A static tag is a badge and keeps Chakra's badge
|
|
23
|
+
* sizes (`sm` 15.75px · `md` 17.5px · `lg` 21px · `xl` 28px at the 14px root).
|
|
24
|
+
* An interactive tag is a control that sits in a row with buttons and inputs,
|
|
25
|
+
* so its `size` (`xs`–`xl`, default `md`) follows the shared control scale
|
|
26
|
+
* (`controlSizes`): the same height, type, padding and icon size as a
|
|
27
|
+
* `Button` of that size.
|
|
28
|
+
*
|
|
21
29
|
* @example
|
|
22
30
|
* ```tsx
|
|
23
31
|
* <Tag>Draft</Tag>
|
|
@@ -28,7 +36,7 @@ import { mapLegacyTagProps, warnLegacyTagProps, getTagStyles } from './Tag.style
|
|
|
28
36
|
* ```
|
|
29
37
|
*/
|
|
30
38
|
const TagImpl = forwardRef((props, ref) => {
|
|
31
|
-
const { tone: toneProp, selected: selectedProp, category, icon, disabled = false, onClick, children, colorPalette: legacyPalette, variant: legacyVariant, as, __legacyComponent: legacyComponent, ...rest } = props;
|
|
39
|
+
const { tone: toneProp, selected: selectedProp, category, icon, disabled = false, onClick, children, colorPalette: legacyPalette, variant: legacyVariant, as, size, css: cssProp, __legacyComponent: legacyComponent, ...rest } = props;
|
|
32
40
|
let tone = toneProp;
|
|
33
41
|
let selected = selectedProp;
|
|
34
42
|
if (legacyComponent !== undefined ||
|
|
@@ -50,10 +58,14 @@ const TagImpl = forwardRef((props, ref) => {
|
|
|
50
58
|
// order. `as="button"` gets the real attribute instead.
|
|
51
59
|
const disabledNonNative = disabled && wantsInteraction && !isButton;
|
|
52
60
|
const styles = getTagStyles({ tone, selected, category, interactive });
|
|
61
|
+
// Decided on `wantsInteraction`, not `interactive`, so disabling a filter
|
|
62
|
+
// chip does not shrink it.
|
|
63
|
+
const { sizeStyles, recipeSize, cssVars } = getTagSizeStyles(size, wantsInteraction);
|
|
64
|
+
const css = cssVars ? mergeCss(cssVars, cssProp) : cssProp;
|
|
53
65
|
const handleClick = disabled
|
|
54
66
|
? (event) => event.preventDefault()
|
|
55
67
|
: onClick;
|
|
56
|
-
return (jsxs(Tag$1.Root, { border: "1px solid", borderRadius: "md", boxShadow: "none",
|
|
68
|
+
return (jsxs(Tag$1.Root, { border: "1px solid", borderRadius: "md", boxShadow: "none", fontWeight: "semibold", size: recipeSize, ...sizeStyles, ...styles, ...focusRing, "data-selected": selected ? '' : undefined, "data-disabled": disabled ? '' : undefined, "aria-pressed": isButton && selectedProp !== undefined ? !!selected : undefined, "aria-disabled": disabledNonNative ? true : undefined, ...(isButton && { type: 'button', disabled }), onClick: handleClick, ...rest, ...(disabledNonNative && { tabIndex: -1 }), as: as, css: css, ref: ref, children: [icon != null ? (jsx(Tag$1.StartElement, { color: category ? `category.${category}.fg` : undefined, fontWeight: "bold", children: icon })) : null, children] }));
|
|
57
69
|
});
|
|
58
70
|
TagImpl.displayName = 'Tag';
|
|
59
71
|
/** Type-level polymorphism over the same runtime — see `polymorphic`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraTag","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.mjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraTag","_jsx"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { TagRootProps } from '@chakra-ui/react';
|
|
1
|
+
import type { ConditionalValue, SystemStyleObject, TagRootProps } from '@chakra-ui/react';
|
|
2
2
|
import type { SystemHue } from '@/theme/colors';
|
|
3
|
-
import { TagColorPalette, TagTone, TagVariant } from './Tag.types';
|
|
3
|
+
import { TagColorPalette, TagSize, TagTone, TagVariant } from './Tag.types';
|
|
4
4
|
type StyleProps = Partial<TagRootProps>;
|
|
5
5
|
/**
|
|
6
6
|
* Colour per tone (5.0 BAZE tokens). `hoverBorder` is applied only when the
|
|
@@ -24,6 +24,24 @@ export interface TagStyleOptions {
|
|
|
24
24
|
* `tone`.
|
|
25
25
|
*/
|
|
26
26
|
export declare const getTagStyles: ({ tone, selected, category, interactive, }?: TagStyleOptions) => StyleProps;
|
|
27
|
+
type ResponsiveTagSize = ConditionalValue<TagSize>;
|
|
28
|
+
/**
|
|
29
|
+
* Size styles for a tag.
|
|
30
|
+
*
|
|
31
|
+
* - **Interactive** (a filter chip, a toggle, a link): the shared control
|
|
32
|
+
* scale — the same height, type, inline padding, gap, icon size and radius
|
|
33
|
+
* as a `Button` of that `size` (default `md`), so a chip row lines up with
|
|
34
|
+
* the search field and buttons next to it. A responsive `size` resolves the
|
|
35
|
+
* scale per breakpoint. A composed `TagLabel` inherits the control type
|
|
36
|
+
* instead of the badge recipe's smaller label type.
|
|
37
|
+
* - **Static** (a badge): Chakra's tag sizes, unchanged. `xs` exists only on
|
|
38
|
+
* the control scale, so a static `xs` falls back to the smallest badge.
|
|
39
|
+
*/
|
|
40
|
+
export declare const getTagSizeStyles: (size: ResponsiveTagSize | undefined, interactive: boolean) => {
|
|
41
|
+
sizeStyles: StyleProps;
|
|
42
|
+
recipeSize: TagRootProps["size"];
|
|
43
|
+
cssVars?: SystemStyleObject;
|
|
44
|
+
};
|
|
27
45
|
/**
|
|
28
46
|
* Result of mapping a 4.x `colorPalette × variant` pair onto 5.0 Tag props.
|
|
29
47
|
* `needsHuman` marks a pair 5.0 cannot render faithfully (a status `solid`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAShD,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE5E,KAAK,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAChC,OAAO,EACP;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CA2BxD,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,QAAQ,EAAE,OAAO,EAM7B,CAAC;AASF,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,6CAK1B,eAAoB,KAAG,UAkCzB,CAAC;AAEF,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AA+CnD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,GAC3B,MAAM,iBAAiB,GAAG,SAAS,EACnC,aAAa,OAAO,KACnB;IACD,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAuC7B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAKF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAC5B,cAAc,eAAe,GAAG,MAAM,GAAG,SAAS,EAClD,SAAS,UAAU,GAAG,MAAM,GAAG,SAAS,KACvC,mBAqBF,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,KAAK,GAAG,MAAM,EACzB,cAAc,OAAO,EACrB,SAAS,OAAO,EAChB,UAAU,mBAAmB,KAC5B,IAwBF,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,wBAAwB,QAAO,IAAsB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var controlSizes = require('../../theme/controlSizes.js');
|
|
4
5
|
var disabledControl = require('../../utils/disabledControl.js');
|
|
5
6
|
var isDev = require('../../utils/isDev.js');
|
|
6
7
|
|
|
@@ -88,6 +89,85 @@ const getTagStyles = ({ tone = 'neutral', selected = false, category, interactiv
|
|
|
88
89
|
_disabled: { ...disabledControl.disabledControl, cursor: 'not-allowed' },
|
|
89
90
|
};
|
|
90
91
|
};
|
|
92
|
+
const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
93
|
+
/**
|
|
94
|
+
* Map every leaf of a Chakra conditional value (`'sm'`, `['xs', null, 'md']`,
|
|
95
|
+
* `{ base: 'xs', md: 'lg' }`, nested conditions) through `fn`, keeping its
|
|
96
|
+
* shape so Chakra still applies each result at its breakpoint. `null` array
|
|
97
|
+
* slots ("no change at this breakpoint") stay `null`.
|
|
98
|
+
*/
|
|
99
|
+
const mapConditional = (value, fn) => {
|
|
100
|
+
if (Array.isArray(value)) {
|
|
101
|
+
return value.map((v) => (v == null ? null : mapConditional(v, fn)));
|
|
102
|
+
}
|
|
103
|
+
if (isPlainObject(value)) {
|
|
104
|
+
return Object.fromEntries(Object.entries(value).map(([k, v]) => [
|
|
105
|
+
k,
|
|
106
|
+
v == null ? v : mapConditional(v, fn),
|
|
107
|
+
]));
|
|
108
|
+
}
|
|
109
|
+
return fn(value);
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* An interactive tag must draw a control size at every width. A responsive
|
|
113
|
+
* value that starts above `base` (`{ md: 'lg' }`, `[null, 'sm']`) would leave
|
|
114
|
+
* the narrowest screens on the badge recipe, so they start at the default `md`.
|
|
115
|
+
*/
|
|
116
|
+
const withBaseSize = (size) => {
|
|
117
|
+
if (size == null)
|
|
118
|
+
return 'md';
|
|
119
|
+
if (Array.isArray(size)) {
|
|
120
|
+
return size[0] == null ? ['md', ...size.slice(1)] : size;
|
|
121
|
+
}
|
|
122
|
+
if (isPlainObject(size)) {
|
|
123
|
+
return 'base' in size && size.base != null ? size : { base: 'md', ...size };
|
|
124
|
+
}
|
|
125
|
+
return size;
|
|
126
|
+
};
|
|
127
|
+
/**
|
|
128
|
+
* Size styles for a tag.
|
|
129
|
+
*
|
|
130
|
+
* - **Interactive** (a filter chip, a toggle, a link): the shared control
|
|
131
|
+
* scale — the same height, type, inline padding, gap, icon size and radius
|
|
132
|
+
* as a `Button` of that `size` (default `md`), so a chip row lines up with
|
|
133
|
+
* the search field and buttons next to it. A responsive `size` resolves the
|
|
134
|
+
* scale per breakpoint. A composed `TagLabel` inherits the control type
|
|
135
|
+
* instead of the badge recipe's smaller label type.
|
|
136
|
+
* - **Static** (a badge): Chakra's tag sizes, unchanged. `xs` exists only on
|
|
137
|
+
* the control scale, so a static `xs` falls back to the smallest badge.
|
|
138
|
+
*/
|
|
139
|
+
const getTagSizeStyles = (size, interactive) => {
|
|
140
|
+
const recipeSize = size == null
|
|
141
|
+
? undefined
|
|
142
|
+
: mapConditional(size, (s) => s === 'xs' ? 'sm' : s);
|
|
143
|
+
if (!interactive)
|
|
144
|
+
return { sizeStyles: { fontSize: 'sm' }, recipeSize };
|
|
145
|
+
const scale = withBaseSize(size);
|
|
146
|
+
const pick = (key) => mapConditional(scale, (s) => controlSizes.getControlSize(s)[key]);
|
|
147
|
+
const height = pick('height');
|
|
148
|
+
return {
|
|
149
|
+
sizeStyles: {
|
|
150
|
+
h: height,
|
|
151
|
+
minH: height,
|
|
152
|
+
px: pick('actionPaddingX'),
|
|
153
|
+
gap: pick('gap'),
|
|
154
|
+
textStyle: pick('textStyle'),
|
|
155
|
+
borderRadius: controlSizes.CONTROL_RADIUS,
|
|
156
|
+
},
|
|
157
|
+
recipeSize,
|
|
158
|
+
cssVars: {
|
|
159
|
+
// The `icon` slot is sized by this variable.
|
|
160
|
+
'--tag-element-size': mapConditional(scale, (s) => `var(--chakra-sizes-${controlSizes.getControlSize(s).iconSize.replace('.', '\\.')})`),
|
|
161
|
+
// The tag recipe gives its label the badge type (`xs` at sm/md). Inside
|
|
162
|
+
// a control that would shrink the label below the root's control type
|
|
163
|
+
// (12.25px instead of Button's 14px at desktop md), so it inherits.
|
|
164
|
+
'& .chakra-tag__label': {
|
|
165
|
+
fontSize: 'inherit',
|
|
166
|
+
lineHeight: 'inherit',
|
|
167
|
+
},
|
|
168
|
+
},
|
|
169
|
+
};
|
|
170
|
+
};
|
|
91
171
|
const PLAIN_PALETTES = new Set(['primary', 'secondary', 'neutral']);
|
|
92
172
|
const STATUS_PALETTES = new Set(['danger', 'success', 'warning']);
|
|
93
173
|
/**
|
|
@@ -158,6 +238,7 @@ const warnLegacyTagProps = (component, colorPalette, variant, resolved) => {
|
|
|
158
238
|
: ' Replace the props with that.'));
|
|
159
239
|
};
|
|
160
240
|
|
|
241
|
+
exports.getTagSizeStyles = getTagSizeStyles;
|
|
161
242
|
exports.getTagStyles = getTagStyles;
|
|
162
243
|
exports.mapLegacyTagProps = mapLegacyTagProps;
|
|
163
244
|
exports.tagToneStyles = tagToneStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.js","sources":["../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":[null],"names":["disabledControl","isDev"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.styles.js","sources":["../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":[null],"names":["disabledControl","getControlSize","CONTROL_RADIUS","isDev"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { CONTROL_RADIUS, getControlSize } from '../../theme/controlSizes.mjs';
|
|
2
3
|
import { disabledControl } from '../../utils/disabledControl.mjs';
|
|
3
4
|
import { isDev } from '../../utils/isDev.mjs';
|
|
4
5
|
|
|
@@ -86,6 +87,85 @@ const getTagStyles = ({ tone = 'neutral', selected = false, category, interactiv
|
|
|
86
87
|
_disabled: { ...disabledControl, cursor: 'not-allowed' },
|
|
87
88
|
};
|
|
88
89
|
};
|
|
90
|
+
const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
91
|
+
/**
|
|
92
|
+
* Map every leaf of a Chakra conditional value (`'sm'`, `['xs', null, 'md']`,
|
|
93
|
+
* `{ base: 'xs', md: 'lg' }`, nested conditions) through `fn`, keeping its
|
|
94
|
+
* shape so Chakra still applies each result at its breakpoint. `null` array
|
|
95
|
+
* slots ("no change at this breakpoint") stay `null`.
|
|
96
|
+
*/
|
|
97
|
+
const mapConditional = (value, fn) => {
|
|
98
|
+
if (Array.isArray(value)) {
|
|
99
|
+
return value.map((v) => (v == null ? null : mapConditional(v, fn)));
|
|
100
|
+
}
|
|
101
|
+
if (isPlainObject(value)) {
|
|
102
|
+
return Object.fromEntries(Object.entries(value).map(([k, v]) => [
|
|
103
|
+
k,
|
|
104
|
+
v == null ? v : mapConditional(v, fn),
|
|
105
|
+
]));
|
|
106
|
+
}
|
|
107
|
+
return fn(value);
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* An interactive tag must draw a control size at every width. A responsive
|
|
111
|
+
* value that starts above `base` (`{ md: 'lg' }`, `[null, 'sm']`) would leave
|
|
112
|
+
* the narrowest screens on the badge recipe, so they start at the default `md`.
|
|
113
|
+
*/
|
|
114
|
+
const withBaseSize = (size) => {
|
|
115
|
+
if (size == null)
|
|
116
|
+
return 'md';
|
|
117
|
+
if (Array.isArray(size)) {
|
|
118
|
+
return size[0] == null ? ['md', ...size.slice(1)] : size;
|
|
119
|
+
}
|
|
120
|
+
if (isPlainObject(size)) {
|
|
121
|
+
return 'base' in size && size.base != null ? size : { base: 'md', ...size };
|
|
122
|
+
}
|
|
123
|
+
return size;
|
|
124
|
+
};
|
|
125
|
+
/**
|
|
126
|
+
* Size styles for a tag.
|
|
127
|
+
*
|
|
128
|
+
* - **Interactive** (a filter chip, a toggle, a link): the shared control
|
|
129
|
+
* scale — the same height, type, inline padding, gap, icon size and radius
|
|
130
|
+
* as a `Button` of that `size` (default `md`), so a chip row lines up with
|
|
131
|
+
* the search field and buttons next to it. A responsive `size` resolves the
|
|
132
|
+
* scale per breakpoint. A composed `TagLabel` inherits the control type
|
|
133
|
+
* instead of the badge recipe's smaller label type.
|
|
134
|
+
* - **Static** (a badge): Chakra's tag sizes, unchanged. `xs` exists only on
|
|
135
|
+
* the control scale, so a static `xs` falls back to the smallest badge.
|
|
136
|
+
*/
|
|
137
|
+
const getTagSizeStyles = (size, interactive) => {
|
|
138
|
+
const recipeSize = size == null
|
|
139
|
+
? undefined
|
|
140
|
+
: mapConditional(size, (s) => s === 'xs' ? 'sm' : s);
|
|
141
|
+
if (!interactive)
|
|
142
|
+
return { sizeStyles: { fontSize: 'sm' }, recipeSize };
|
|
143
|
+
const scale = withBaseSize(size);
|
|
144
|
+
const pick = (key) => mapConditional(scale, (s) => getControlSize(s)[key]);
|
|
145
|
+
const height = pick('height');
|
|
146
|
+
return {
|
|
147
|
+
sizeStyles: {
|
|
148
|
+
h: height,
|
|
149
|
+
minH: height,
|
|
150
|
+
px: pick('actionPaddingX'),
|
|
151
|
+
gap: pick('gap'),
|
|
152
|
+
textStyle: pick('textStyle'),
|
|
153
|
+
borderRadius: CONTROL_RADIUS,
|
|
154
|
+
},
|
|
155
|
+
recipeSize,
|
|
156
|
+
cssVars: {
|
|
157
|
+
// The `icon` slot is sized by this variable.
|
|
158
|
+
'--tag-element-size': mapConditional(scale, (s) => `var(--chakra-sizes-${getControlSize(s).iconSize.replace('.', '\\.')})`),
|
|
159
|
+
// The tag recipe gives its label the badge type (`xs` at sm/md). Inside
|
|
160
|
+
// a control that would shrink the label below the root's control type
|
|
161
|
+
// (12.25px instead of Button's 14px at desktop md), so it inherits.
|
|
162
|
+
'& .chakra-tag__label': {
|
|
163
|
+
fontSize: 'inherit',
|
|
164
|
+
lineHeight: 'inherit',
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
};
|
|
168
|
+
};
|
|
89
169
|
const PLAIN_PALETTES = new Set(['primary', 'secondary', 'neutral']);
|
|
90
170
|
const STATUS_PALETTES = new Set(['danger', 'success', 'warning']);
|
|
91
171
|
/**
|
|
@@ -156,5 +236,5 @@ const warnLegacyTagProps = (component, colorPalette, variant, resolved) => {
|
|
|
156
236
|
: ' Replace the props with that.'));
|
|
157
237
|
};
|
|
158
238
|
|
|
159
|
-
export { getTagStyles, mapLegacyTagProps, tagToneStyles, tagTones, warnLegacyTagProps };
|
|
239
|
+
export { getTagSizeStyles, getTagStyles, mapLegacyTagProps, tagToneStyles, tagTones, warnLegacyTagProps };
|
|
160
240
|
//# sourceMappingURL=Tag.styles.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.mjs","sources":["../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.styles.mjs","sources":["../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAmBA;;;AAGG;AACI,MAAM,aAAa,GAGtB;AACF,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,UAAU;AACnB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,WAAW,EAAE,kBAAkB;AAChC,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,WAAW,EAAE,gBAAgB;AAC9B,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,WAAW,EAAE,gBAAgB;AAC9B,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,WAAW,EAAE,eAAe;AAC7B,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,WAAW,EAAE,aAAa;AAC3B,KAAA;;AAGH;AACO,MAAM,QAAQ,GAAc;IACjC,SAAS;IACT,SAAS;IACT,SAAS;IACT,QAAQ;IACR,MAAM;;AAGR;AACA,MAAM,cAAc,GAAe;AACjC,IAAA,kBAAkB,EAAE,uCAAuC;AAC3D,IAAA,kBAAkB,EAAE,MAAM;AAC1B,IAAA,wBAAwB,EAAE,UAAU;CACrC;AASD;;;AAGG;MACU,YAAY,GAAG,CAAC,EAC3B,IAAI,GAAG,SAAS,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,WAAW,GAAG,KAAK,GAAA,GACA,EAAE,KAAgB;AACrC,IAAA,IAAI,MAAkB;IACtB,IAAI,QAAQ,EAAE;AACZ,QAAA,MAAM,GAAG;AACP,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,cAAc;YACrB,IAAI,WAAW,IAAI;AACjB,gBAAA,MAAM,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;AACpC,gBAAA,OAAO,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;aACvC,CAAC;SACH;IACH;SAAO,IAAI,QAAQ,EAAE;AACnB,QAAA,MAAM,GAAG;YACP,OAAO,EAAE,CAAA,SAAA,EAAY,QAAQ,CAAA,QAAA,CAAU;AACvC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,IAAI,WAAW,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,CAAC;SACpE;IACH;SAAO;AACL,QAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,GACnC,aAAa,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,OAAO;AAC9C,QAAA,MAAM,GAAG;YACP,OAAO;YACP,KAAK;AACL,YAAA,IAAI,WAAW,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC;SAC7D;IACH;IAEA,OAAO;AACL,QAAA,WAAW,EAAE,aAAa;AAC1B,QAAA,GAAG,MAAM;AACT,QAAA,GAAG,cAAc;QACjB,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS;QAC3C,SAAS,EAAE,EAAE,GAAG,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE;KACzD;AACH;AAIA,MAAM,aAAa,GAAG,CAAC,KAAc,KACnC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEtE;;;;;AAKG;AACH,MAAM,cAAc,GAAG,CACrB,KAAwB,EACxB,EAAwB,KACD;AACvB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACxB,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,GAAG,IAAI,GAAI,cAAc,CAAC,CAAC,EAAE,EAAE,CAAO,CAAC,CAAC;IAC5E;AACA,IAAA,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK;YACpC,CAAC;AACD,YAAA,CAAC,IAAI,IAAI,GAAG,CAAC,GAAG,cAAc,CAAC,CAAsB,EAAE,EAAE,CAAC;AAC3D,SAAA,CAAC,CACoB;IAC1B;AACA,IAAA,OAAO,EAAE,CAAC,KAAgB,CAAC;AAC7B,CAAC;AAED;;;;AAIG;AACH,MAAM,YAAY,GAAG,CACnB,IAAmC,KACd;IACrB,IAAI,IAAI,IAAI,IAAI;AAAE,QAAA,OAAO,IAAI;AAC7B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACvB,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;IAC1D;AACA,IAAA,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;QACvB,OAAO,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE;IAC7E;AACA,IAAA,OAAO,IAAI;AACb,CAAC;AAED;;;;;;;;;;;AAWG;MACU,gBAAgB,GAAG,CAC9B,IAAmC,EACnC,WAAoB,KAKlB;AACF,IAAA,MAAM,UAAU,GACd,IAAI,IAAI;AACN,UAAE;UACC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,KACtB,CAAC,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC,CACG;AAChC,IAAA,IAAI,CAAC,WAAW;QAAE,OAAO,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE;AACvE,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC;IAChC,MAAM,IAAI,GAAG,CAAkC,GAAM,KACnD,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AACtD,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC7B,OAAO;AACL,QAAA,UAAU,EAAE;AACV,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC1B,YAAA,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC;AAChB,YAAA,SAAS,EAAE,IAAI,CAAC,WAAW,CAA4B;AACvD,YAAA,YAAY,EAAE,cAAc;AAC7B,SAAA;QACD,UAAU;AACV,QAAA,OAAO,EAAE;;YAEP,oBAAoB,EAAE,cAAc,CAClC,KAAK,EACL,CAAC,CAAC,KACA,CAAA,mBAAA,EAAsB,cAAc,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA,CAAA,CAAG,CAC1E;;;;AAID,YAAA,sBAAsB,EAAE;AACtB,gBAAA,QAAQ,EAAE,SAAS;AACnB,gBAAA,UAAU,EAAE,SAAS;AACtB,aAAA;AACmB,SAAA;KACvB;AACH;AAcA,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;AACnE,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAEjE;;;;;;;;;;;;;;;;;AAiBG;MACU,iBAAiB,GAAG,CAC/B,YAAkD,EAClD,OAAwC,KACjB;AACvB,IAAA,MAAM,OAAO,GAAG,YAAY,IAAI,SAAS;AACzC,IAAA,MAAM,CAAC,GAAG,OAAO,IAAI,MAAM;IAC3B,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;IACzC,MAAM,MAAM,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC;AAE3C,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE;IACnE,QAAQ,CAAC;AACP,QAAA,KAAK,MAAM;AACT,YAAA,OAAO;kBACH,EAAE,IAAI,EAAE,OAAkB,EAAE,UAAU,EAAE,KAAK;kBAC7C,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE;AAC5C,QAAA,KAAK,OAAO;AACV,YAAA,OAAO;kBACH,EAAE,IAAI,EAAE,OAAkB,EAAE,UAAU,EAAE,IAAI;AAC9C,kBAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAC5D,QAAA,KAAK,SAAS;YACZ,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE;AAChD,QAAA;YACE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE;;AAElD;AAEA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU;AAEhC;;;AAGG;AACI,MAAM,kBAAkB,GAAG,CAChC,SAAyB,EACzB,YAAqB,EACrB,OAAgB,EAChB,QAA6B,KACrB;IACR,IAAI,CAAC,KAAK,EAAE;QAAE;AACd,IAAA,MAAM,GAAG,GAAG,CAAA,EAAG,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE;AACrE,IAAA,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE;AACrB,IAAA,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;AACf,IAAA,MAAM,WAAW,GAAG,SAAS,KAAK,MAAM,GAAG,aAAa,GAAG,cAAc;AACzE,IAAA,MAAM,EAAE,GAAG,QAAQ,CAAC;AAClB,UAAE;AACF,UAAE,QAAQ,CAAC,IAAI,KAAK;AAClB,cAAE;AACF,cAAE,CAAA,WAAA,EAAc,QAAQ,CAAC,IAAI,IAAI;AACrC,IAAA,MAAM,IAAI,GACR,SAAS,KAAK;AACZ,UAAE;UACA,EAAE;AACR,IAAA,OAAO,CAAC,IAAI,CACV,iBAAiB,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,WAAW,KAAK,MAAM,CAC1D,YAAY,CACb,CAAA,WAAA,EAAc,MAAM,CAAC,OAAO,CAAC,CAAA,wCAAA,CAA0C;AACtE,QAAA,CAAA,aAAA,EAAgB,EAAE,CAAA,CAAA,CAAG;SACpB,QAAQ,CAAC;AACR,cAAE;AACF,cAAE,+BAA+B,CAAC,CACvC;AACH;;;;"}
|