@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.
Files changed (37) hide show
  1. package/dist/components/LineGraph/seriesColors.d.ts +2 -0
  2. package/dist/components/LineGraph/seriesColors.d.ts.map +1 -1
  3. package/dist/components/LineGraph/seriesColors.js.map +1 -1
  4. package/dist/components/LineGraph/seriesColors.mjs.map +1 -1
  5. package/dist/components/Select/Select.d.ts +5 -1
  6. package/dist/components/Select/Select.d.ts.map +1 -1
  7. package/dist/components/Select/Select.js +2 -2
  8. package/dist/components/Select/Select.js.map +1 -1
  9. package/dist/components/Select/Select.mjs +3 -3
  10. package/dist/components/Select/Select.mjs.map +1 -1
  11. package/dist/components/Select/Select.styles.d.ts +38 -0
  12. package/dist/components/Select/Select.styles.d.ts.map +1 -1
  13. package/dist/components/Select/Select.styles.js +35 -0
  14. package/dist/components/Select/Select.styles.js.map +1 -1
  15. package/dist/components/Select/Select.styles.mjs +35 -2
  16. package/dist/components/Select/Select.styles.mjs.map +1 -1
  17. package/dist/components/Select/Select.types.d.ts +10 -0
  18. package/dist/components/Select/Select.types.d.ts.map +1 -1
  19. package/dist/components/Select/SelectField.d.ts +1 -1
  20. package/dist/components/Select/SelectField.d.ts.map +1 -1
  21. package/dist/components/Select/SelectField.js +3 -2
  22. package/dist/components/Select/SelectField.js.map +1 -1
  23. package/dist/components/Select/SelectField.mjs +3 -2
  24. package/dist/components/Select/SelectField.mjs.map +1 -1
  25. package/dist/components/Select/index.d.ts +1 -0
  26. package/dist/components/Select/index.d.ts.map +1 -1
  27. package/package.json +1 -1
  28. package/src/components/LineGraph/seriesColors.ts +2 -0
  29. package/src/components/Select/Comparison.stories.tsx +19 -0
  30. package/src/components/Select/Select.stories.tsx +55 -0
  31. package/src/components/Select/Select.styles.ts +36 -1
  32. package/src/components/Select/Select.tsx +13 -3
  33. package/src/components/Select/Select.types.ts +11 -0
  34. package/src/components/Select/SelectField.tsx +7 -3
  35. package/src/components/Select/index.ts +1 -0
  36. package/src/theme/SemanticTokens.mdx +26 -0
  37. 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;;;;;;;;;;;GAWG;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
+ {"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":";;;;;AAoBO,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
+ {"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":";;;AAoBO,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
+ {"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<ChakraSelect.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
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;AA0D1D;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoBlB,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":";;;;;;;;;AAYA,MAAM,OAAO,GAAGA,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,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACC,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGJ,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,CAACE,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGL,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,CAACG,wBAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAGN,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,CAACI,6BAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEL,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;;;;;"}
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":";;;;;;;AAYA,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEA,IAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;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;;;;;"}
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":"AAMA,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,KAAc,EACd,OAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA0ErB"}
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":";;;;;;;;;AAQA;;;;;;;AAOG;SACa,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,KAAK,GAAG,MAAM,EACd,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,KAAG,EAOtB,KAAK,IAAI,IAAI,IACZC,cAAA,CAACD,aAAM,CAAC,KAAK,EAAA,EAAA,QAAA,EAAE,KAAK,GAAgB,KAEpC,CAAC,SAAS,IAAI,WAAW,MACvBC,eAACD,aAAM,CAAC,KAAK,EAAA,EAAC,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,cACbC,cAAA,CAACD,aAAM,CAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAA,CAAI,GAC/B,EACjBC,cAAA,CAACD,aAAM,CAAC,cAAc,EAAA,EAAA,QAAA,EACpBC,cAAA,CAACD,aAAM,CAAC,SAAS,KAAG,EAAA,CACE,CAAA,EAAA,CACT,EACjBC,cAAA,CAACC,YAAM,EAAA,EAAA,QAAA,EACLD,cAAA,CAACD,aAAM,CAAC,UAAU,EAAA,EAAA,QAAA,EAChBC,cAAA,CAACD,aAAM,CAAC,OAAO,EAAA,EAAA,QAAA,EACZ,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACzBD,eAAA,CAACC,aAAM,CAAC,IAAI,EAAA,EACV,IAAI,EAAE,MAAM,EAAA,IAEP,OAAO,GAAGG,yBAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAExCF,cAAA,CAACD,aAAM,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,GAAmB,EACjDC,cAAA,CAACD,aAAM,CAAC,aAAa,EAAA,EAAA,CAAG,CAAA,EAAA,EAJnB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAKb,CACf,CAAC,EAAA,CACa,GACC,EAAA,CACb,CAAA,EAAA,CACG;AAElB;;;;"}
1
+ {"version":3,"file":"SelectField.js","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["useMemo","createListCollection","_jsxs","Select","_jsx","Portal","ghostContentStyles","staggerProps"],"mappings":"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"}
@@ -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":"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"}
1
+ {"version":3,"file":"SelectField.mjs","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
@@ -1,5 +1,6 @@
1
1
  export { Combobox } from './Combobox';
2
2
  export { ComboboxField } from './ComboboxField';
3
+ export type { SelectTriggerProps } from './Select';
3
4
  export { Select } from './Select';
4
5
  export type * from './Select.types';
5
6
  export { SelectField } from './SelectField';
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindlogic-ai/logician-ui",
3
- "version": "5.0.0-alpha.1",
3
+ "version": "5.0.0-alpha.2",
4
4
  "description": "A comprehensive React design system built on Chakra UI",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -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
- const Trigger = forwardRef<HTMLButtonElement, ChakraSelect.TriggerProps>(
14
- function SelectTrigger({ css, ...props }, ref) {
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(triggerStyles, css)}
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
- width = 'full',
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}
@@ -1,5 +1,6 @@
1
1
  export { Combobox } from './Combobox';
2
2
  export { ComboboxField } from './ComboboxField';
3
+ export type { SelectTriggerProps } from './Select';
3
4
  export { Select } from './Select';
4
5
  export type * from './Select.types';
5
6
  export { SelectField } from './SelectField';
@@ -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
@@ -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