@mindlogic-ai/logician-ui 5.0.0-alpha.1 → 5.0.0-alpha.2
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/dist/components/LineGraph/seriesColors.d.ts +2 -0
- package/dist/components/LineGraph/seriesColors.d.ts.map +1 -1
- package/dist/components/LineGraph/seriesColors.js.map +1 -1
- package/dist/components/LineGraph/seriesColors.mjs.map +1 -1
- package/dist/components/Select/Select.d.ts +5 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +2 -2
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/Select.mjs +3 -3
- package/dist/components/Select/Select.mjs.map +1 -1
- package/dist/components/Select/Select.styles.d.ts +38 -0
- package/dist/components/Select/Select.styles.d.ts.map +1 -1
- package/dist/components/Select/Select.styles.js +35 -0
- package/dist/components/Select/Select.styles.js.map +1 -1
- package/dist/components/Select/Select.styles.mjs +35 -2
- package/dist/components/Select/Select.styles.mjs.map +1 -1
- package/dist/components/Select/Select.types.d.ts +10 -0
- package/dist/components/Select/Select.types.d.ts.map +1 -1
- package/dist/components/Select/SelectField.d.ts +1 -1
- package/dist/components/Select/SelectField.d.ts.map +1 -1
- package/dist/components/Select/SelectField.js +3 -2
- package/dist/components/Select/SelectField.js.map +1 -1
- package/dist/components/Select/SelectField.mjs +3 -2
- package/dist/components/Select/SelectField.mjs.map +1 -1
- package/dist/components/Select/index.d.ts +1 -0
- package/dist/components/Select/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/LineGraph/seriesColors.ts +2 -0
- package/src/components/Select/Comparison.stories.tsx +19 -0
- package/src/components/Select/Select.stories.tsx +55 -0
- package/src/components/Select/Select.styles.ts +36 -1
- package/src/components/Select/Select.tsx +13 -3
- package/src/components/Select/Select.types.ts +11 -0
- package/src/components/Select/SelectField.tsx +7 -3
- package/src/components/Select/index.ts +1 -0
- package/src/theme/SemanticTokens.mdx +26 -0
- package/src/theme/claude.md +3 -0
|
@@ -6,6 +6,8 @@ import type { SystemHue } from '@/theme/colors';
|
|
|
6
6
|
* that carry no meaning in the system. Red, yellow and green are the danger,
|
|
7
7
|
* warning and success colours, and blue is info and links, so none of them
|
|
8
8
|
* may colour a series by default — a red "UV" line reads as an error.
|
|
9
|
+
* (Blue is reserved for data as a whole: a single-measure chart is a blue
|
|
10
|
+
* monochrome ramp — SemanticTokens.mdx, "Blue means data and links".)
|
|
9
11
|
*
|
|
10
12
|
* Every stroke clears 3:1 against the page in both modes. Cyan, mint and
|
|
11
13
|
* orange are too light at their base value in light mode (≈1.9:1), so they
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seriesColors.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/seriesColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD
|
|
1
|
+
{"version":3,"file":"seriesColors.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/seriesColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD;;;;;;;;;;;;;GAaG;AACH,KAAK,SAAS,GAAG;IACf,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;IAC7D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAAS,SAAS,EASjD,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,GACtB,OAAO,MAAM,EACb,SAAS,MAAM,EACf,QAAQ,OAAO,KACd,MAKF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seriesColors.js","sources":["../../../src/components/LineGraph/seriesColors.ts"],"sourcesContent":[null],"names":["SYSTEM_HUES"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"seriesColors.js","sources":["../../../src/components/LineGraph/seriesColors.ts"],"sourcesContent":[null],"names":["SYSTEM_HUES"],"mappings":";;;;;AAsBO,MAAM,iBAAiB,GAAyB;AACrD,IAAA,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;AAC/B,IAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;AAChC,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AAC9B,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AAC9B,IAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;AAChC,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5B,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5B,IAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;;AAGhC;AACO,MAAM,WAAW,GAAG,CACzB,KAAa,EACb,OAAe,EACf,MAAe,KACL;IACV,IAAI,KAAK,KAAK,CAAC;AAAE,QAAA,OAAO,OAAO;AAC/B,IAAA,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAClB,iBAAiB,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,iBAAiB,CAAC,MAAM,CAAC;IAC3D,OAAO,MAAM,GAAGA,6BAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,GAAGA,6BAAW,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACrE;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seriesColors.mjs","sources":["../../../src/components/LineGraph/seriesColors.ts"],"sourcesContent":[null],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"seriesColors.mjs","sources":["../../../src/components/LineGraph/seriesColors.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAsBO,MAAM,iBAAiB,GAAyB;AACrD,IAAA,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;AAC/B,IAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;AAChC,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AAC9B,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AAC9B,IAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;AAChC,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5B,IAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;AAC5B,IAAA,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;;AAGhC;AACO,MAAM,WAAW,GAAG,CACzB,KAAa,EACb,OAAe,EACf,MAAe,KACL;IACV,IAAI,KAAK,KAAK,CAAC;AAAE,QAAA,OAAO,OAAO;AAC/B,IAAA,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAClB,iBAAiB,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,iBAAiB,CAAC,MAAM,CAAC;IAC3D,OAAO,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;AACrE;;;;"}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { Select as ChakraSelect } from '@chakra-ui/react';
|
|
2
|
+
import type { SelectVariant } from './Select.types';
|
|
3
|
+
export interface SelectTriggerProps extends ChakraSelect.TriggerProps {
|
|
4
|
+
variant?: SelectVariant;
|
|
5
|
+
}
|
|
2
6
|
/**
|
|
3
7
|
* Compound Select primitives — Chakra's `Select` namespace with the Logician
|
|
4
8
|
* design-system styling baked into the visual parts (`Trigger`, `Content`,
|
|
@@ -12,7 +16,7 @@ export declare const Select: {
|
|
|
12
16
|
Context: <T extends unknown>(props: import("@ark-ui/react").SelectContextProps<T>) => import("react").ReactNode;
|
|
13
17
|
Label: import("react").ForwardRefExoticComponent<ChakraSelect.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
14
18
|
Control: import("react").ForwardRefExoticComponent<ChakraSelect.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
-
Trigger: import("react").ForwardRefExoticComponent<
|
|
19
|
+
Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
16
20
|
ValueText: import("react").ForwardRefExoticComponent<ChakraSelect.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
17
21
|
IndicatorGroup: import("react").ForwardRefExoticComponent<ChakraSelect.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
18
22
|
Indicator: import("react").ForwardRefExoticComponent<ChakraSelect.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAW1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,YAAY;IACnE,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAqDD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoBlB,CAAC"}
|
|
@@ -7,8 +7,8 @@ var react = require('@chakra-ui/react');
|
|
|
7
7
|
var mergeCss = require('../../utils/mergeCss.js');
|
|
8
8
|
var Select_styles = require('./Select.styles.js');
|
|
9
9
|
|
|
10
|
-
const Trigger = React.forwardRef(function SelectTrigger({ css, ...props }, ref) {
|
|
11
|
-
return (jsxRuntime.jsx(react.Select.Trigger, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.triggerStyles, css) }));
|
|
10
|
+
const Trigger = React.forwardRef(function SelectTrigger({ css, variant = 'outline', ...props }, ref) {
|
|
11
|
+
return (jsxRuntime.jsx(react.Select.Trigger, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.triggerStyles, variant === 'ghost' && Select_styles.ghostTriggerStyles, css) }));
|
|
12
12
|
});
|
|
13
13
|
const Content = React.forwardRef(function SelectContent({ css, ...props }, ref) {
|
|
14
14
|
return (jsxRuntime.jsx(react.Select.Content, { ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSelect","mergeCss","triggerStyles","contentStyles","itemStyles","indicatorStyles"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSelect","mergeCss","triggerStyles","ghostTriggerStyles","contentStyles","itemStyles","indicatorStyles"],"mappings":";;;;;;;;;AAkBA,MAAM,OAAO,GAAGA,gBAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,QACEC,cAAA,CAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CACXC,2BAAa,EACb,OAAO,KAAK,OAAO,IAAIC,gCAAkB,EACzC,GAAG,CACJ,EAAA,CACD;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGL,gBAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,eAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACG,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGN,gBAAU,CACrB,SAAS,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IACxC,QACEC,eAACC,YAAY,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAE,GAAG,EAAEC,iBAAQ,CAACI,wBAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAGP,gBAAU,CAC1B,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACEC,eAACC,YAAY,CAAC,SAAS,EAAA,EACrB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACK,6BAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEN,YAAY,CAAC,IAAI;IACvB,aAAa,EAAEA,YAAY,CAAC,aAAa;IACzC,OAAO,EAAEA,YAAY,CAAC,OAAO;IAC7B,KAAK,EAAEA,YAAY,CAAC,KAAK;IACzB,OAAO,EAAEA,YAAY,CAAC,OAAO;IAC7B,OAAO;IACP,SAAS,EAAEA,YAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,YAAY,CAAC,cAAc;IAC3C,SAAS;IACT,YAAY,EAAEA,YAAY,CAAC,YAAY;IACvC,YAAY,EAAEA,YAAY,CAAC,YAAY;IACvC,UAAU,EAAEA,YAAY,CAAC,UAAU;IACnC,OAAO;IACP,SAAS,EAAEA,YAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,YAAY,CAAC,cAAc;IAC3C,IAAI;IACJ,QAAQ,EAAEA,YAAY,CAAC,QAAQ;IAC/B,aAAa,EAAEA,YAAY,CAAC,aAAa;IACzC,WAAW,EAAEA,YAAY,CAAC,WAAW;;;;;"}
|
|
@@ -3,10 +3,10 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { Select as Select$1 } from '@chakra-ui/react';
|
|
5
5
|
import { mergeCss } from '../../utils/mergeCss.mjs';
|
|
6
|
-
import { triggerStyles, contentStyles, itemStyles, indicatorStyles } from './Select.styles.mjs';
|
|
6
|
+
import { ghostTriggerStyles, triggerStyles, contentStyles, itemStyles, indicatorStyles } from './Select.styles.mjs';
|
|
7
7
|
|
|
8
|
-
const Trigger = forwardRef(function SelectTrigger({ css, ...props }, ref) {
|
|
9
|
-
return (jsx(Select$1.Trigger, { ref: ref, ...props, css: mergeCss(triggerStyles, css) }));
|
|
8
|
+
const Trigger = forwardRef(function SelectTrigger({ css, variant = 'outline', ...props }, ref) {
|
|
9
|
+
return (jsx(Select$1.Trigger, { ref: ref, ...props, css: mergeCss(triggerStyles, variant === 'ghost' && ghostTriggerStyles, css) }));
|
|
10
10
|
});
|
|
11
11
|
const Content = forwardRef(function SelectContent({ css, ...props }, ref) {
|
|
12
12
|
return (jsx(Select$1.Content, { ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraSelect"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraSelect"],"mappings":";;;;;;;AAkBA,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,QACEA,GAAA,CAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CACX,aAAa,EACb,OAAO,KAAK,OAAO,IAAI,kBAAkB,EACzC,GAAG,CACJ,EAAA,CACD;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACED,IAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAG,UAAU,CACrB,SAAS,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IACxC,QACED,IAACC,QAAY,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACED,IAACC,QAAY,CAAC,SAAS,EAAA,EACrB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEA,QAAY,CAAC,IAAI;IACvB,aAAa,EAAEA,QAAY,CAAC,aAAa;IACzC,OAAO,EAAEA,QAAY,CAAC,OAAO;IAC7B,KAAK,EAAEA,QAAY,CAAC,KAAK;IACzB,OAAO,EAAEA,QAAY,CAAC,OAAO;IAC7B,OAAO;IACP,SAAS,EAAEA,QAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,QAAY,CAAC,cAAc;IAC3C,SAAS;IACT,YAAY,EAAEA,QAAY,CAAC,YAAY;IACvC,YAAY,EAAEA,QAAY,CAAC,YAAY;IACvC,UAAU,EAAEA,QAAY,CAAC,UAAU;IACnC,OAAO;IACP,SAAS,EAAEA,QAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,QAAY,CAAC,cAAc;IAC3C,IAAI;IACJ,QAAQ,EAAEA,QAAY,CAAC,QAAQ;IAC/B,aAAa,EAAEA,QAAY,CAAC,aAAa;IACzC,WAAW,EAAEA,QAAY,CAAC,WAAW;;;;;"}
|
|
@@ -45,6 +45,35 @@ export declare const triggerStyles: {
|
|
|
45
45
|
'--focus-color': string;
|
|
46
46
|
'--error-color': string;
|
|
47
47
|
};
|
|
48
|
+
/**
|
|
49
|
+
* `variant="ghost"` delta on top of `triggerStyles`, for dense rows (settings
|
|
50
|
+
* lists) where a column of bordered triggers outweighs the card around them.
|
|
51
|
+
* No border at rest; hover brings back `border.control`, focus/open keep the
|
|
52
|
+
* normal ring, and an invalid field keeps its red border at rest so an error
|
|
53
|
+
* is never hidden. The chevron identifies the control (`fg.muted`, well over
|
|
54
|
+
* the 3:1 non-text floor), which is what lets the resting border go.
|
|
55
|
+
*/
|
|
56
|
+
export declare const ghostTriggerStyles: {
|
|
57
|
+
bg: string;
|
|
58
|
+
borderColor: string;
|
|
59
|
+
pe: string;
|
|
60
|
+
'& [data-part=value-text]': {
|
|
61
|
+
maxW: string;
|
|
62
|
+
whiteSpace: string;
|
|
63
|
+
};
|
|
64
|
+
_hover: {
|
|
65
|
+
borderColor: string;
|
|
66
|
+
};
|
|
67
|
+
_disabled: {
|
|
68
|
+
cursor: string;
|
|
69
|
+
fontWeight: string;
|
|
70
|
+
bg: "transparent";
|
|
71
|
+
color: "disabled.fg";
|
|
72
|
+
borderColor: "transparent";
|
|
73
|
+
opacity: 1;
|
|
74
|
+
boxShadow: "none";
|
|
75
|
+
};
|
|
76
|
+
};
|
|
48
77
|
/** Combobox text input — the typeable control. */
|
|
49
78
|
export declare const inputStyles: {
|
|
50
79
|
bg: string;
|
|
@@ -87,6 +116,15 @@ export declare const contentStyles: {
|
|
|
87
116
|
boxShadow: string;
|
|
88
117
|
padding: string;
|
|
89
118
|
};
|
|
119
|
+
/**
|
|
120
|
+
* Dropdown panel for a ghost trigger — at least as wide as the trigger, but
|
|
121
|
+
* grown to the longest option, since a content-sized trigger is often
|
|
122
|
+
* narrower than the options it opens.
|
|
123
|
+
*/
|
|
124
|
+
export declare const ghostContentStyles: {
|
|
125
|
+
width: string;
|
|
126
|
+
minW: string;
|
|
127
|
+
};
|
|
90
128
|
/** Individual option for both Select and Combobox. */
|
|
91
129
|
export declare const itemStyles: {
|
|
92
130
|
borderRadius: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+BH,8CAA8C;AAC9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOzB,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEvB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAWtB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,eAAe;;CAE3B,CAAC"}
|
|
1
|
+
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+BH,8CAA8C;AAC9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAe9B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEvB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAWtB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,eAAe;;CAE3B,CAAC"}
|
|
@@ -46,6 +46,30 @@ const triggerStyles = {
|
|
|
46
46
|
boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
|
|
47
47
|
},
|
|
48
48
|
};
|
|
49
|
+
/**
|
|
50
|
+
* `variant="ghost"` delta on top of `triggerStyles`, for dense rows (settings
|
|
51
|
+
* lists) where a column of bordered triggers outweighs the card around them.
|
|
52
|
+
* No border at rest; hover brings back `border.control`, focus/open keep the
|
|
53
|
+
* normal ring, and an invalid field keeps its red border at rest so an error
|
|
54
|
+
* is never hidden. The chevron identifies the control (`fg.muted`, well over
|
|
55
|
+
* the 3:1 non-text floor), which is what lets the resting border go.
|
|
56
|
+
*/
|
|
57
|
+
const ghostTriggerStyles = {
|
|
58
|
+
bg: 'transparent',
|
|
59
|
+
borderColor: 'transparent',
|
|
60
|
+
// Content-sized: Chakra caps the value at `maxW: 80%` of the trigger and
|
|
61
|
+
// overlays the chevron, which is circular once the trigger sizes to the
|
|
62
|
+
// value — it truncates to "앱 …". Lift the cap and reserve the chevron's
|
|
63
|
+
// room (indicator group = icon + padding on both sides) instead.
|
|
64
|
+
pe: 'calc(var(--select-trigger-padding-x) * 2 + 1rem)',
|
|
65
|
+
'& [data-part=value-text]': { maxW: 'none', whiteSpace: 'nowrap' },
|
|
66
|
+
_hover: { borderColor: 'border.control' },
|
|
67
|
+
_disabled: {
|
|
68
|
+
...disabledControl.disabledText,
|
|
69
|
+
cursor: 'not-allowed',
|
|
70
|
+
fontWeight: 'semibold',
|
|
71
|
+
},
|
|
72
|
+
};
|
|
49
73
|
/** Combobox text input — the typeable control. */
|
|
50
74
|
const inputStyles = {
|
|
51
75
|
...fieldBase,
|
|
@@ -59,6 +83,15 @@ const contentStyles = {
|
|
|
59
83
|
boxShadow: '0px 5px 20px 0px rgba(0, 0, 0, 0.10)',
|
|
60
84
|
padding: '4px',
|
|
61
85
|
};
|
|
86
|
+
/**
|
|
87
|
+
* Dropdown panel for a ghost trigger — at least as wide as the trigger, but
|
|
88
|
+
* grown to the longest option, since a content-sized trigger is often
|
|
89
|
+
* narrower than the options it opens.
|
|
90
|
+
*/
|
|
91
|
+
const ghostContentStyles = {
|
|
92
|
+
width: 'max-content',
|
|
93
|
+
minW: 'var(--reference-width)',
|
|
94
|
+
};
|
|
62
95
|
/** Individual option for both Select and Combobox. */
|
|
63
96
|
const itemStyles = {
|
|
64
97
|
borderRadius: '4px',
|
|
@@ -78,6 +111,8 @@ const indicatorStyles = {
|
|
|
78
111
|
};
|
|
79
112
|
|
|
80
113
|
exports.contentStyles = contentStyles;
|
|
114
|
+
exports.ghostContentStyles = ghostContentStyles;
|
|
115
|
+
exports.ghostTriggerStyles = ghostTriggerStyles;
|
|
81
116
|
exports.indicatorStyles = indicatorStyles;
|
|
82
117
|
exports.inputStyles = inputStyles;
|
|
83
118
|
exports.itemStyles = itemStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.js","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":["disabledControl"],"mappings":";;;;;AAAA;;;;;;;;AAQG;AAIH,MAAM,SAAS,GAAG;AAChB,IAAA,eAAe,EAAE,mCAAmC;AACpD,IAAA,eAAe,EAAE,mCAAmC;CACrD;AAED,MAAM,SAAS,GAAG;AAChB,IAAA,GAAG,SAAS;AACZ,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACvC,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACxC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAGA,+BAAe;AAClB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;CACF;AAED;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,GAAG,SAAS;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;;AAGH;AACO,MAAM,WAAW,GAAG;AACzB,IAAA,GAAG,SAAS;;AAGd;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,OAAO,EAAE,KAAK;;AAGhB;AACO,MAAM,UAAU,GAAG;AACxB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE;;AAG1D;AACO,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE,UAAU
|
|
1
|
+
{"version":3,"file":"Select.styles.js","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":["disabledControl","disabledText"],"mappings":";;;;;AAAA;;;;;;;;AAQG;AAIH,MAAM,SAAS,GAAG;AAChB,IAAA,eAAe,EAAE,mCAAmC;AACpD,IAAA,eAAe,EAAE,mCAAmC;CACrD;AAED,MAAM,SAAS,GAAG;AAChB,IAAA,GAAG,SAAS;AACZ,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACvC,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACxC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAGA,+BAAe;AAClB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;CACF;AAED;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,GAAG,SAAS;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;;AAGH;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,WAAW,EAAE,aAAa;;;;;AAK1B,IAAA,EAAE,EAAE,kDAAkD;IACtD,0BAA0B,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;AAClE,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE;AACzC,IAAA,SAAS,EAAE;AACT,QAAA,GAAGC,4BAAY;AACf,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;;AAGH;AACO,MAAM,WAAW,GAAG;AACzB,IAAA,GAAG,SAAS;;AAGd;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,OAAO,EAAE,KAAK;;AAGhB;;;;AAIG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,IAAI,EAAE,wBAAwB;;AAGhC;AACO,MAAM,UAAU,GAAG;AACxB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE;;AAG1D;AACO,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE,UAAU;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { disabledControl } from '../../utils/disabledControl.mjs';
|
|
2
|
+
import { disabledControl, disabledText } from '../../utils/disabledControl.mjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Shared style objects for the Select and Combobox components.
|
|
@@ -44,6 +44,30 @@ const triggerStyles = {
|
|
|
44
44
|
boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
|
|
45
45
|
},
|
|
46
46
|
};
|
|
47
|
+
/**
|
|
48
|
+
* `variant="ghost"` delta on top of `triggerStyles`, for dense rows (settings
|
|
49
|
+
* lists) where a column of bordered triggers outweighs the card around them.
|
|
50
|
+
* No border at rest; hover brings back `border.control`, focus/open keep the
|
|
51
|
+
* normal ring, and an invalid field keeps its red border at rest so an error
|
|
52
|
+
* is never hidden. The chevron identifies the control (`fg.muted`, well over
|
|
53
|
+
* the 3:1 non-text floor), which is what lets the resting border go.
|
|
54
|
+
*/
|
|
55
|
+
const ghostTriggerStyles = {
|
|
56
|
+
bg: 'transparent',
|
|
57
|
+
borderColor: 'transparent',
|
|
58
|
+
// Content-sized: Chakra caps the value at `maxW: 80%` of the trigger and
|
|
59
|
+
// overlays the chevron, which is circular once the trigger sizes to the
|
|
60
|
+
// value — it truncates to "앱 …". Lift the cap and reserve the chevron's
|
|
61
|
+
// room (indicator group = icon + padding on both sides) instead.
|
|
62
|
+
pe: 'calc(var(--select-trigger-padding-x) * 2 + 1rem)',
|
|
63
|
+
'& [data-part=value-text]': { maxW: 'none', whiteSpace: 'nowrap' },
|
|
64
|
+
_hover: { borderColor: 'border.control' },
|
|
65
|
+
_disabled: {
|
|
66
|
+
...disabledText,
|
|
67
|
+
cursor: 'not-allowed',
|
|
68
|
+
fontWeight: 'semibold',
|
|
69
|
+
},
|
|
70
|
+
};
|
|
47
71
|
/** Combobox text input — the typeable control. */
|
|
48
72
|
const inputStyles = {
|
|
49
73
|
...fieldBase,
|
|
@@ -57,6 +81,15 @@ const contentStyles = {
|
|
|
57
81
|
boxShadow: '0px 5px 20px 0px rgba(0, 0, 0, 0.10)',
|
|
58
82
|
padding: '4px',
|
|
59
83
|
};
|
|
84
|
+
/**
|
|
85
|
+
* Dropdown panel for a ghost trigger — at least as wide as the trigger, but
|
|
86
|
+
* grown to the longest option, since a content-sized trigger is often
|
|
87
|
+
* narrower than the options it opens.
|
|
88
|
+
*/
|
|
89
|
+
const ghostContentStyles = {
|
|
90
|
+
width: 'max-content',
|
|
91
|
+
minW: 'var(--reference-width)',
|
|
92
|
+
};
|
|
60
93
|
/** Individual option for both Select and Combobox. */
|
|
61
94
|
const itemStyles = {
|
|
62
95
|
borderRadius: '4px',
|
|
@@ -75,5 +108,5 @@ const indicatorStyles = {
|
|
|
75
108
|
color: 'fg.muted',
|
|
76
109
|
};
|
|
77
110
|
|
|
78
|
-
export { contentStyles, indicatorStyles, inputStyles, itemStyles, triggerStyles };
|
|
111
|
+
export { contentStyles, ghostContentStyles, ghostTriggerStyles, indicatorStyles, inputStyles, itemStyles, triggerStyles };
|
|
79
112
|
//# sourceMappingURL=Select.styles.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.mjs","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAIH,MAAM,SAAS,GAAG;AAChB,IAAA,eAAe,EAAE,mCAAmC;AACpD,IAAA,eAAe,EAAE,mCAAmC;CACrD;AAED,MAAM,SAAS,GAAG;AAChB,IAAA,GAAG,SAAS;AACZ,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACvC,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACxC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,eAAe;AAClB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;CACF;AAED;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,GAAG,SAAS;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;;AAGH;AACO,MAAM,WAAW,GAAG;AACzB,IAAA,GAAG,SAAS;;AAGd;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,OAAO,EAAE,KAAK;;AAGhB;AACO,MAAM,UAAU,GAAG;AACxB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE;;AAG1D;AACO,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE,UAAU;;;;;"}
|
|
1
|
+
{"version":3,"file":"Select.styles.mjs","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAIH,MAAM,SAAS,GAAG;AAChB,IAAA,eAAe,EAAE,mCAAmC;AACpD,IAAA,eAAe,EAAE,mCAAmC;CACrD;AAED,MAAM,SAAS,GAAG;AAChB,IAAA,GAAG,SAAS;AACZ,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACvC,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACxC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,eAAe;AAClB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;CACF;AAED;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,GAAG,SAAS;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;;AAGH;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,WAAW,EAAE,aAAa;;;;;AAK1B,IAAA,EAAE,EAAE,kDAAkD;IACtD,0BAA0B,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;AAClE,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE;AACzC,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,YAAY;AACf,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;;AAGH;AACO,MAAM,WAAW,GAAG;AACzB,IAAA,GAAG,SAAS;;AAGd;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,OAAO,EAAE,KAAK;;AAGhB;;;;AAIG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,IAAI,EAAE,wBAAwB;;AAGhC;AACO,MAAM,UAAU,GAAG;AACxB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE;;AAG1D;AACO,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE,UAAU;;;;;"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
export type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
3
|
+
/**
|
|
4
|
+
* `outline` (default) — the bordered trigger shared with Input and Textarea.
|
|
5
|
+
* `ghost` — no border at rest, shown on hover/focus; for dense settings rows.
|
|
6
|
+
*/
|
|
7
|
+
export type SelectVariant = 'outline' | 'ghost';
|
|
3
8
|
export interface SelectOption<T = string> {
|
|
4
9
|
label: string;
|
|
5
10
|
value: T;
|
|
@@ -42,6 +47,11 @@ interface FieldBaseProps<T> {
|
|
|
42
47
|
width?: string | number;
|
|
43
48
|
}
|
|
44
49
|
export interface SelectFieldProps<T = string> extends FieldBaseProps<T> {
|
|
50
|
+
/**
|
|
51
|
+
* Trigger look. `ghost` drops the resting border and sizes the field to its
|
|
52
|
+
* content (`width` defaults to `auto` instead of `full`).
|
|
53
|
+
*/
|
|
54
|
+
variant?: SelectVariant;
|
|
45
55
|
/**
|
|
46
56
|
* Deal the options in one after another when the list opens.
|
|
47
57
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,cAAc,CAAC,CAAC;IACxB,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACrE;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
|
|
1
|
+
{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,cAAc,CAAC,CAAC;IACxB,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
|
|
@@ -7,5 +7,5 @@ import { SelectFieldProps } from './Select.types';
|
|
|
7
7
|
* For multi-select, grouped options or custom layouts, compose the `Select`
|
|
8
8
|
* primitives directly.
|
|
9
9
|
*/
|
|
10
|
-
export declare function SelectField<T = string>({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size, invalid, disabled, readOnly, required, name, width, stagger, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function SelectField<T = string>({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size, invalid, disabled, readOnly, required, name, variant, width, stagger, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
//# sourceMappingURL=SelectField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,EACtC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAmB,EACnB,KAA6C,EAC7C,OAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA4ErB"}
|
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
var staggerProps = require('../../utils/staggerProps.js');
|
|
8
8
|
var Select = require('./Select.js');
|
|
9
|
+
var Select_styles = require('./Select.styles.js');
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Single-select dropdown with the Logician design-system styling applied.
|
|
@@ -15,7 +16,7 @@ var Select = require('./Select.js');
|
|
|
15
16
|
* For multi-select, grouped options or custom layouts, compose the `Select`
|
|
16
17
|
* primitives directly.
|
|
17
18
|
*/
|
|
18
|
-
function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, width = 'full', stagger = false, }) {
|
|
19
|
+
function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, variant = 'outline', width = variant === 'ghost' ? 'auto' : 'full', stagger = false, }) {
|
|
19
20
|
const collection = React.useMemo(() => react.createListCollection({
|
|
20
21
|
items: options,
|
|
21
22
|
itemToValue: (item) => String(item.value),
|
|
@@ -26,7 +27,7 @@ function SelectField({ options, value, defaultValue, onChange, placeholder, labe
|
|
|
26
27
|
return (jsxRuntime.jsxs(Select.Select.Root, { collection: collection, size: size, width: width, invalid: invalid, disabled: disabled, readOnly: readOnly, required: required, name: name, value: value === undefined ? undefined : toKeys(value), defaultValue: defaultValue === undefined ? undefined : toKeys(defaultValue), onValueChange: (details) => {
|
|
27
28
|
const selected = details.items[0];
|
|
28
29
|
onChange?.(selected ? selected.value : null);
|
|
29
|
-
}, children: [jsxRuntime.jsx(Select.Select.HiddenSelect, {}), label != null ? (jsxRuntime.jsx(Select.Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsxRuntime.jsx(Select.Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxRuntime.jsxs(Select.Select.Control, { children: [jsxRuntime.jsx(Select.Select.Trigger, { children: jsxRuntime.jsx(Select.Select.ValueText, { placeholder: placeholder }) }), jsxRuntime.jsx(Select.Select.IndicatorGroup, { children: jsxRuntime.jsx(Select.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(Select.Select.Positioner, { children: jsxRuntime.jsx(Select.Select.Content, { children: options.map((option, index) => (jsxRuntime.jsxs(Select.Select.Item, { item: option, ...(stagger ? staggerProps.staggerProps(index) : {}), children: [jsxRuntime.jsx(Select.Select.ItemText, { children: option.label }), jsxRuntime.jsx(Select.Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
|
|
30
|
+
}, children: [jsxRuntime.jsx(Select.Select.HiddenSelect, {}), label != null ? (jsxRuntime.jsx(Select.Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsxRuntime.jsx(Select.Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxRuntime.jsxs(Select.Select.Control, { children: [jsxRuntime.jsx(Select.Select.Trigger, { variant: variant, children: jsxRuntime.jsx(Select.Select.ValueText, { placeholder: placeholder }) }), jsxRuntime.jsx(Select.Select.IndicatorGroup, { children: jsxRuntime.jsx(Select.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(Select.Select.Positioner, { children: jsxRuntime.jsx(Select.Select.Content, { css: variant === 'ghost' ? Select_styles.ghostContentStyles : undefined, children: options.map((option, index) => (jsxRuntime.jsxs(Select.Select.Item, { item: option, ...(stagger ? staggerProps.staggerProps(index) : {}), children: [jsxRuntime.jsx(Select.Select.ItemText, { children: option.label }), jsxRuntime.jsx(Select.Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
exports.SelectField = SelectField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["useMemo","createListCollection","_jsxs","Select","_jsx","Portal","staggerProps"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SelectField.js","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["useMemo","createListCollection","_jsxs","Select","_jsx","Portal","ghostContentStyles","staggerProps"],"mappings":";;;;;;;;;;AASA;;;;;;;AAOG;AACG,SAAU,WAAW,CAAa,EACtC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,EAC7C,OAAO,GAAG,KAAK,GACK,EAAA;IACpB,MAAM,UAAU,GAAGA,aAAO,CACxB,MACEC,0BAAoB,CAAC;AACnB,QAAA,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACzC,YAAY,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK;QAClC,cAAc,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjD,KAAA,CAAC,EACJ,CAAC,OAAO,CAAC,CACV;IAED,MAAM,MAAM,GAAG,CAAC,GAAyB,KACvC,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAExD,IAAA,QACEC,eAAA,CAACC,aAAM,CAAC,IAAI,IACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,EACtD,YAAY,EACV,YAAY,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,EAE/D,aAAa,EAAE,CAAC,OAAO,KAAI;YACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;AACjC,YAAA,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;AAC9C,QAAA,CAAC,aAEDC,cAAA,CAACD,aAAM,CAAC,YAAY,EAAA,EAAA,CAAG,EAOtB,KAAK,IAAI,IAAI,IACZC,eAACD,aAAM,CAAC,KAAK,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAgB,KAEpC,CAAC,SAAS,IAAI,WAAW,MACvBC,cAAA,CAACD,aAAM,CAAC,KAAK,IAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAAE,SAAS,IAAI,WAAW,EAAA,CAAgB,CAC/D,CACF,EACDD,eAAA,CAACC,aAAM,CAAC,OAAO,eACbC,cAAA,CAACD,aAAM,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,YAC9BC,cAAA,CAACD,aAAM,CAAC,SAAS,EAAA,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI,EAAA,CAC/B,EACjBC,cAAA,CAACD,aAAM,CAAC,cAAc,EAAA,EAAA,QAAA,EACpBC,eAACD,aAAM,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACE,IACT,EACjBC,cAAA,CAACC,YAAM,EAAA,EAAA,QAAA,EACLD,cAAA,CAACD,aAAM,CAAC,UAAU,EAAA,EAAA,QAAA,EAChBC,cAAA,CAACD,aAAM,CAAC,OAAO,IACb,GAAG,EAAE,OAAO,KAAK,OAAO,GAAGG,gCAAkB,GAAG,SAAS,EAAA,QAAA,EAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACzBJ,eAAA,CAACC,aAAM,CAAC,IAAI,IACV,IAAI,EAAE,MAAM,EAAA,IAEP,OAAO,GAAGI,yBAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAExCH,eAACD,aAAM,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,EAAA,CAAmB,EACjDC,cAAA,CAACD,aAAM,CAAC,aAAa,KAAG,CAAA,EAAA,EAJnB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAKb,CACf,CAAC,EAAA,CACa,GACC,EAAA,CACb,CAAA,EAAA,CACG;AAElB;;;;"}
|
|
@@ -4,6 +4,7 @@ import { useMemo } from 'react';
|
|
|
4
4
|
import { createListCollection, Portal } from '@chakra-ui/react';
|
|
5
5
|
import { staggerProps } from '../../utils/staggerProps.mjs';
|
|
6
6
|
import { Select } from './Select.mjs';
|
|
7
|
+
import { ghostContentStyles } from './Select.styles.mjs';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Single-select dropdown with the Logician design-system styling applied.
|
|
@@ -13,7 +14,7 @@ import { Select } from './Select.mjs';
|
|
|
13
14
|
* For multi-select, grouped options or custom layouts, compose the `Select`
|
|
14
15
|
* primitives directly.
|
|
15
16
|
*/
|
|
16
|
-
function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, width = 'full', stagger = false, }) {
|
|
17
|
+
function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, variant = 'outline', width = variant === 'ghost' ? 'auto' : 'full', stagger = false, }) {
|
|
17
18
|
const collection = useMemo(() => createListCollection({
|
|
18
19
|
items: options,
|
|
19
20
|
itemToValue: (item) => String(item.value),
|
|
@@ -24,7 +25,7 @@ function SelectField({ options, value, defaultValue, onChange, placeholder, labe
|
|
|
24
25
|
return (jsxs(Select.Root, { collection: collection, size: size, width: width, invalid: invalid, disabled: disabled, readOnly: readOnly, required: required, name: name, value: value === undefined ? undefined : toKeys(value), defaultValue: defaultValue === undefined ? undefined : toKeys(defaultValue), onValueChange: (details) => {
|
|
25
26
|
const selected = details.items[0];
|
|
26
27
|
onChange?.(selected ? selected.value : null);
|
|
27
|
-
}, children: [jsx(Select.HiddenSelect, {}), label != null ? (jsx(Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsx(Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxs(Select.Control, { children: [jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: placeholder }) }), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Portal, { children: jsx(Select.Positioner, { children: jsx(Select.Content, { children: options.map((option, index) => (jsxs(Select.Item, { item: option, ...(stagger ? staggerProps(index) : {}), children: [jsx(Select.ItemText, { children: option.label }), jsx(Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
|
|
28
|
+
}, children: [jsx(Select.HiddenSelect, {}), label != null ? (jsx(Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsx(Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxs(Select.Control, { children: [jsx(Select.Trigger, { variant: variant, children: jsx(Select.ValueText, { placeholder: placeholder }) }), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Portal, { children: jsx(Select.Positioner, { children: jsx(Select.Content, { css: variant === 'ghost' ? ghostContentStyles : undefined, children: options.map((option, index) => (jsxs(Select.Item, { item: option, ...(stagger ? staggerProps(index) : {}), children: [jsx(Select.ItemText, { children: option.label }), jsx(Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
export { SelectField };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.mjs","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectField.mjs","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA;;;;;;;AAOG;AACG,SAAU,WAAW,CAAa,EACtC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,EAC7C,OAAO,GAAG,KAAK,GACK,EAAA;IACpB,MAAM,UAAU,GAAG,OAAO,CACxB,MACE,oBAAoB,CAAC;AACnB,QAAA,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACzC,YAAY,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK;QAClC,cAAc,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjD,KAAA,CAAC,EACJ,CAAC,OAAO,CAAC,CACV;IAED,MAAM,MAAM,GAAG,CAAC,GAAyB,KACvC,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAExD,IAAA,QACEA,IAAA,CAAC,MAAM,CAAC,IAAI,IACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,EACtD,YAAY,EACV,YAAY,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,EAE/D,aAAa,EAAE,CAAC,OAAO,KAAI;YACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;AACjC,YAAA,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;AAC9C,QAAA,CAAC,aAEDC,GAAA,CAAC,MAAM,CAAC,YAAY,EAAA,EAAA,CAAG,EAOtB,KAAK,IAAI,IAAI,IACZA,IAAC,MAAM,CAAC,KAAK,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAgB,KAEpC,CAAC,SAAS,IAAI,WAAW,MACvBA,GAAA,CAAC,MAAM,CAAC,KAAK,IAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAAE,SAAS,IAAI,WAAW,EAAA,CAAgB,CAC/D,CACF,EACDD,IAAA,CAAC,MAAM,CAAC,OAAO,eACbC,GAAA,CAAC,MAAM,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,YAC9BA,GAAA,CAAC,MAAM,CAAC,SAAS,EAAA,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI,EAAA,CAC/B,EACjBA,GAAA,CAAC,MAAM,CAAC,cAAc,EAAA,EAAA,QAAA,EACpBA,IAAC,MAAM,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACE,IACT,EACjBA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EACLA,GAAA,CAAC,MAAM,CAAC,UAAU,EAAA,EAAA,QAAA,EAChBA,GAAA,CAAC,MAAM,CAAC,OAAO,IACb,GAAG,EAAE,OAAO,KAAK,OAAO,GAAG,kBAAkB,GAAG,SAAS,EAAA,QAAA,EAExD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACzBD,IAAA,CAAC,MAAM,CAAC,IAAI,IACV,IAAI,EAAE,MAAM,EAAA,IAEP,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAExCC,IAAC,MAAM,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,EAAA,CAAmB,EACjDA,GAAA,CAAC,MAAM,CAAC,aAAa,KAAG,CAAA,EAAA,EAJnB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAKb,CACf,CAAC,EAAA,CACa,GACC,EAAA,CACb,CAAA,EAAA,CACG;AAElB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,mBAAmB,gBAAgB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,SAAS,EACT,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,mBAAmB,gBAAgB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,SAAS,EACT,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}
|
package/package.json
CHANGED
|
@@ -8,6 +8,8 @@ import { SYSTEM_HUES } from '@/theme/palette.generated';
|
|
|
8
8
|
* that carry no meaning in the system. Red, yellow and green are the danger,
|
|
9
9
|
* warning and success colours, and blue is info and links, so none of them
|
|
10
10
|
* may colour a series by default — a red "UV" line reads as an error.
|
|
11
|
+
* (Blue is reserved for data as a whole: a single-measure chart is a blue
|
|
12
|
+
* monochrome ramp — SemanticTokens.mdx, "Blue means data and links".)
|
|
11
13
|
*
|
|
12
14
|
* Every stroke clears 3:1 against the page in both modes. Cyan, mint and
|
|
13
15
|
* orange are too light at their base value in light mode (≈1.9:1), so they
|
|
@@ -54,6 +54,25 @@ export const SideBySide = () => (
|
|
|
54
54
|
<SelectField options={categoryOptions} placeholder="Select" invalid />
|
|
55
55
|
<Textarea placeholder="Textarea" invalid />
|
|
56
56
|
</Row>
|
|
57
|
+
<Row label='Select variant="ghost" — default / invalid / disabled'>
|
|
58
|
+
<SelectField
|
|
59
|
+
variant="ghost"
|
|
60
|
+
options={categoryOptions}
|
|
61
|
+
placeholder="Select"
|
|
62
|
+
/>
|
|
63
|
+
<SelectField
|
|
64
|
+
variant="ghost"
|
|
65
|
+
options={categoryOptions}
|
|
66
|
+
placeholder="Select"
|
|
67
|
+
invalid
|
|
68
|
+
/>
|
|
69
|
+
<SelectField
|
|
70
|
+
variant="ghost"
|
|
71
|
+
options={categoryOptions}
|
|
72
|
+
placeholder="Select"
|
|
73
|
+
disabled
|
|
74
|
+
/>
|
|
75
|
+
</Row>
|
|
57
76
|
<Row label="Disabled">
|
|
58
77
|
<Input placeholder="Input" disabled />
|
|
59
78
|
<SelectField options={categoryOptions} placeholder="Select" disabled />
|
|
@@ -2,10 +2,12 @@ import { useState } from 'react';
|
|
|
2
2
|
import {
|
|
3
3
|
Box,
|
|
4
4
|
createListCollection,
|
|
5
|
+
Flex,
|
|
5
6
|
HStack,
|
|
6
7
|
Portal,
|
|
7
8
|
Span,
|
|
8
9
|
Stack,
|
|
10
|
+
Text,
|
|
9
11
|
} from '@chakra-ui/react';
|
|
10
12
|
import { Meta } from '@storybook/react';
|
|
11
13
|
|
|
@@ -78,6 +80,59 @@ export const Disabled = () => (
|
|
|
78
80
|
</Box>
|
|
79
81
|
);
|
|
80
82
|
|
|
83
|
+
/**
|
|
84
|
+
* `variant="ghost"` — no resting border, sized to its content. For dense
|
|
85
|
+
* settings rows where a column of bordered triggers outweighs the card.
|
|
86
|
+
* Hover shows the control border.
|
|
87
|
+
*/
|
|
88
|
+
export const Ghost = () => {
|
|
89
|
+
const rows = [
|
|
90
|
+
['크레딧 한도 변경', '관리자가 내 크레딧 한도를 바꾸면 알려드립니다.'],
|
|
91
|
+
['크레딧 잔량 부족', '내 크레딧이 얼마 남지 않으면 알려드립니다.'],
|
|
92
|
+
['결제 실패', '결제에 실패하거나 자동으로 환불되면 알려드립니다.'],
|
|
93
|
+
];
|
|
94
|
+
const channelOptions = [
|
|
95
|
+
{ label: '앱 알림', value: 'app' },
|
|
96
|
+
{ label: '앱 알림 + 이메일', value: 'app_email' },
|
|
97
|
+
{ label: '끄기', value: 'off' },
|
|
98
|
+
];
|
|
99
|
+
return (
|
|
100
|
+
<Box
|
|
101
|
+
maxW="640px"
|
|
102
|
+
borderWidth="1px"
|
|
103
|
+
borderColor="border.subtle"
|
|
104
|
+
borderRadius="12px"
|
|
105
|
+
>
|
|
106
|
+
{rows.map(([title, description], index) => (
|
|
107
|
+
<Flex
|
|
108
|
+
key={title}
|
|
109
|
+
align="center"
|
|
110
|
+
justify="space-between"
|
|
111
|
+
gap={4}
|
|
112
|
+
px={4}
|
|
113
|
+
py={3}
|
|
114
|
+
borderTopWidth={index === 0 ? 0 : '1px'}
|
|
115
|
+
borderColor="border.subtle"
|
|
116
|
+
>
|
|
117
|
+
<Box>
|
|
118
|
+
<Text fontWeight="semibold">{title}</Text>
|
|
119
|
+
<Text color="fg.muted" fontSize="sm">
|
|
120
|
+
{description}
|
|
121
|
+
</Text>
|
|
122
|
+
</Box>
|
|
123
|
+
<SelectField
|
|
124
|
+
variant="ghost"
|
|
125
|
+
size="sm"
|
|
126
|
+
ariaLabel={title}
|
|
127
|
+
options={channelOptions}
|
|
128
|
+
defaultValue="app"
|
|
129
|
+
/>
|
|
130
|
+
</Flex>
|
|
131
|
+
))}
|
|
132
|
+
</Box>
|
|
133
|
+
);
|
|
134
|
+
};
|
|
135
|
+
|
|
81
136
|
export const ManyOptions = () => {
|
|
82
137
|
const manyOptions = Array.from({ length: 100 }, (_, i) => ({
|
|
83
138
|
label: `Option ${i + 1}`,
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* update these values to match.
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
|
-
import { disabledControl } from '@/utils/disabledControl';
|
|
11
|
+
import { disabledControl, disabledText } from '@/utils/disabledControl';
|
|
12
12
|
|
|
13
13
|
const focusVars = {
|
|
14
14
|
'--focus-color': 'var(--chakra-colors-primary-main)',
|
|
@@ -47,6 +47,31 @@ export const triggerStyles = {
|
|
|
47
47
|
},
|
|
48
48
|
};
|
|
49
49
|
|
|
50
|
+
/**
|
|
51
|
+
* `variant="ghost"` delta on top of `triggerStyles`, for dense rows (settings
|
|
52
|
+
* lists) where a column of bordered triggers outweighs the card around them.
|
|
53
|
+
* No border at rest; hover brings back `border.control`, focus/open keep the
|
|
54
|
+
* normal ring, and an invalid field keeps its red border at rest so an error
|
|
55
|
+
* is never hidden. The chevron identifies the control (`fg.muted`, well over
|
|
56
|
+
* the 3:1 non-text floor), which is what lets the resting border go.
|
|
57
|
+
*/
|
|
58
|
+
export const ghostTriggerStyles = {
|
|
59
|
+
bg: 'transparent',
|
|
60
|
+
borderColor: 'transparent',
|
|
61
|
+
// Content-sized: Chakra caps the value at `maxW: 80%` of the trigger and
|
|
62
|
+
// overlays the chevron, which is circular once the trigger sizes to the
|
|
63
|
+
// value — it truncates to "앱 …". Lift the cap and reserve the chevron's
|
|
64
|
+
// room (indicator group = icon + padding on both sides) instead.
|
|
65
|
+
pe: 'calc(var(--select-trigger-padding-x) * 2 + 1rem)',
|
|
66
|
+
'& [data-part=value-text]': { maxW: 'none', whiteSpace: 'nowrap' },
|
|
67
|
+
_hover: { borderColor: 'border.control' },
|
|
68
|
+
_disabled: {
|
|
69
|
+
...disabledText,
|
|
70
|
+
cursor: 'not-allowed',
|
|
71
|
+
fontWeight: 'semibold',
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
|
|
50
75
|
/** Combobox text input — the typeable control. */
|
|
51
76
|
export const inputStyles = {
|
|
52
77
|
...fieldBase,
|
|
@@ -62,6 +87,16 @@ export const contentStyles = {
|
|
|
62
87
|
padding: '4px',
|
|
63
88
|
};
|
|
64
89
|
|
|
90
|
+
/**
|
|
91
|
+
* Dropdown panel for a ghost trigger — at least as wide as the trigger, but
|
|
92
|
+
* grown to the longest option, since a content-sized trigger is often
|
|
93
|
+
* narrower than the options it opens.
|
|
94
|
+
*/
|
|
95
|
+
export const ghostContentStyles = {
|
|
96
|
+
width: 'max-content',
|
|
97
|
+
minW: 'var(--reference-width)',
|
|
98
|
+
};
|
|
99
|
+
|
|
65
100
|
/** Individual option for both Select and Combobox. */
|
|
66
101
|
export const itemStyles = {
|
|
67
102
|
borderRadius: '4px',
|
|
@@ -5,18 +5,28 @@ import { mergeCss } from '@/utils/mergeCss';
|
|
|
5
5
|
|
|
6
6
|
import {
|
|
7
7
|
contentStyles,
|
|
8
|
+
ghostTriggerStyles,
|
|
8
9
|
indicatorStyles,
|
|
9
10
|
itemStyles,
|
|
10
11
|
triggerStyles,
|
|
11
12
|
} from './Select.styles';
|
|
13
|
+
import type { SelectVariant } from './Select.types';
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
export interface SelectTriggerProps extends ChakraSelect.TriggerProps {
|
|
16
|
+
variant?: SelectVariant;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const Trigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
|
|
20
|
+
function SelectTrigger({ css, variant = 'outline', ...props }, ref) {
|
|
15
21
|
return (
|
|
16
22
|
<ChakraSelect.Trigger
|
|
17
23
|
ref={ref}
|
|
18
24
|
{...props}
|
|
19
|
-
css={mergeCss(
|
|
25
|
+
css={mergeCss(
|
|
26
|
+
triggerStyles,
|
|
27
|
+
variant === 'ghost' && ghostTriggerStyles,
|
|
28
|
+
css
|
|
29
|
+
)}
|
|
20
30
|
/>
|
|
21
31
|
);
|
|
22
32
|
}
|
|
@@ -2,6 +2,12 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
export type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* `outline` (default) — the bordered trigger shared with Input and Textarea.
|
|
7
|
+
* `ghost` — no border at rest, shown on hover/focus; for dense settings rows.
|
|
8
|
+
*/
|
|
9
|
+
export type SelectVariant = 'outline' | 'ghost';
|
|
10
|
+
|
|
5
11
|
export interface SelectOption<T = string> {
|
|
6
12
|
label: string;
|
|
7
13
|
value: T;
|
|
@@ -46,6 +52,11 @@ interface FieldBaseProps<T> {
|
|
|
46
52
|
}
|
|
47
53
|
|
|
48
54
|
export interface SelectFieldProps<T = string> extends FieldBaseProps<T> {
|
|
55
|
+
/**
|
|
56
|
+
* Trigger look. `ghost` drops the resting border and sizes the field to its
|
|
57
|
+
* content (`width` defaults to `auto` instead of `full`).
|
|
58
|
+
*/
|
|
59
|
+
variant?: SelectVariant;
|
|
49
60
|
/**
|
|
50
61
|
* Deal the options in one after another when the list opens.
|
|
51
62
|
*
|
|
@@ -4,6 +4,7 @@ import { createListCollection, Portal } from '@chakra-ui/react';
|
|
|
4
4
|
import { staggerProps } from '@/utils/staggerProps';
|
|
5
5
|
|
|
6
6
|
import { Select } from './Select';
|
|
7
|
+
import { ghostContentStyles } from './Select.styles';
|
|
7
8
|
import { SelectFieldProps } from './Select.types';
|
|
8
9
|
|
|
9
10
|
/**
|
|
@@ -28,7 +29,8 @@ export function SelectField<T = string>({
|
|
|
28
29
|
readOnly,
|
|
29
30
|
required,
|
|
30
31
|
name,
|
|
31
|
-
|
|
32
|
+
variant = 'outline',
|
|
33
|
+
width = variant === 'ghost' ? 'auto' : 'full',
|
|
32
34
|
stagger = false,
|
|
33
35
|
}: SelectFieldProps<T>) {
|
|
34
36
|
const collection = useMemo(
|
|
@@ -79,7 +81,7 @@ export function SelectField<T = string>({
|
|
|
79
81
|
)
|
|
80
82
|
)}
|
|
81
83
|
<Select.Control>
|
|
82
|
-
<Select.Trigger>
|
|
84
|
+
<Select.Trigger variant={variant}>
|
|
83
85
|
<Select.ValueText placeholder={placeholder} />
|
|
84
86
|
</Select.Trigger>
|
|
85
87
|
<Select.IndicatorGroup>
|
|
@@ -88,7 +90,9 @@ export function SelectField<T = string>({
|
|
|
88
90
|
</Select.Control>
|
|
89
91
|
<Portal>
|
|
90
92
|
<Select.Positioner>
|
|
91
|
-
<Select.Content
|
|
93
|
+
<Select.Content
|
|
94
|
+
css={variant === 'ghost' ? ghostContentStyles : undefined}
|
|
95
|
+
>
|
|
92
96
|
{options.map((option, index) => (
|
|
93
97
|
<Select.Item
|
|
94
98
|
item={option}
|
|
@@ -50,6 +50,32 @@ Emphasis is weight, not colour: headings use `fg.default`, never `primary.*`.
|
|
|
50
50
|
Status colours mean status — don't borrow `success`/`warning` for decoration;
|
|
51
51
|
that is what `category.*` is for.
|
|
52
52
|
|
|
53
|
+
## Blue means data and links
|
|
54
|
+
|
|
55
|
+
Blue is the one hue BAZE gives a meaning outside status: **data and links**.
|
|
56
|
+
Use it for both, and for nothing decorative.
|
|
57
|
+
|
|
58
|
+
- **Links** — `fg.link` / `fg.linkHover` (blue ink, #48607A / #AFC7E1), in chat
|
|
59
|
+
messages, markdown and app copy alike. Never ink-black or coral for a link.
|
|
60
|
+
- **Data visualisation** — usage/share bars, single-measure bar and line charts,
|
|
61
|
+
maps, heatmaps, progress-by-share: a **blue monochrome ramp**, never a
|
|
62
|
+
rainbow and never a grey ramp. Steps differ in lightness only (the saturated
|
|
63
|
+
`blue.base` is left out); the largest value gets the strongest step.
|
|
64
|
+
|
|
65
|
+
| Step | Light | Dark |
|
|
66
|
+
| --- | --- | --- |
|
|
67
|
+
| 1 (largest) | `#48607A` (`blue.ink`) · white label | `#AFC7E1` (`blue.inkDark`) · ink label |
|
|
68
|
+
| 2 | `#7492B3` · ink label | `#7492B3` · ink label |
|
|
69
|
+
| 3 | `#AFC7E1` · ink label | `#48607A` · white label |
|
|
70
|
+
| 4 | `#DFEBF9` (`blue.surface`) · ink label | `#232F3D` (`blue.surfaceDark`) · white label |
|
|
71
|
+
|
|
72
|
+
Pick each label by measured contrast (≥ 4.5:1), not by step number.
|
|
73
|
+
A chart that must tell several *categories* apart (multi-series lines) keeps
|
|
74
|
+
`CHART_SERIES_HUES` in `LineGraph/seriesColors.ts`, which leaves blue out so
|
|
75
|
+
no series reads as a link or an info state.
|
|
76
|
+
`info` is also blue; status always comes with an icon and words, so a blue
|
|
77
|
+
chart is never mistaken for an info notice.
|
|
78
|
+
|
|
53
79
|
## Modes
|
|
54
80
|
|
|
55
81
|
Every role flips with the colour mode (`_light` / `_dark`) and has a
|
package/src/theme/claude.md
CHANGED
|
@@ -249,6 +249,9 @@ follow the scheme and high contrast. Base font size is 14px.
|
|
|
249
249
|
4. Beige (`secondary.surface*`) is for small surfaces (bubbles, soft
|
|
250
250
|
badges/tags, the modal header band), never rows or panels.
|
|
251
251
|
5. Disabled = `disabled.*`, not opacity. Focus = `focusRing`.
|
|
252
|
+
6. Blue means data and links: links are `fg.link`; data visualisation
|
|
253
|
+
(usage bars, single-measure charts, maps) is a blue monochrome ramp, never a
|
|
254
|
+
rainbow or grey ramp. Values: SemanticTokens.mdx → "Blue means data and links".
|
|
252
255
|
|
|
253
256
|
## Extending the Theme
|
|
254
257
|
|