@mindlogic-ai/logician-ui 5.0.0-alpha.1 → 5.0.0-alpha.3
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/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +5 -3
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/Badge.mjs +5 -3
- package/dist/components/Badge/Badge.mjs.map +1 -1
- package/dist/components/Badge/Badge.types.d.ts +7 -5
- package/dist/components/Badge/Badge.types.d.ts.map +1 -1
- 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/Badge/Badge.stories.tsx +193 -3
- package/src/components/Badge/Badge.tsx +5 -3
- package/src/components/Badge/Badge.types.ts +7 -5
- package/src/components/Badge/Badge.usage.mdx +265 -0
- 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/foundations/BrandColour.mdx +301 -0
- package/src/foundations/BrandColour.stories.tsx +334 -0
- package/src/guidelines/ComponentPageTemplate.mdx +84 -0
- package/src/guidelines/FeedbackActions.mdx +162 -23
- package/src/guidelines/_components/Lang.tsx +175 -0
- package/src/guidelines/_components/TokenTable.tsx +136 -0
- package/src/theme/SemanticTokens.mdx +26 -0
- package/src/theme/claude.md +3 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AA0C9C,eAAO,MAAM,KAAK,6DAAgD,CAAC"}
|
|
@@ -10,9 +10,11 @@ var Badge_styles = require('./Badge.styles.js');
|
|
|
10
10
|
/**
|
|
11
11
|
* Badge — a small, non-interactive label.
|
|
12
12
|
*
|
|
13
|
-
* `neutral` (default) is the
|
|
14
|
-
* `danger` / `info`
|
|
15
|
-
*
|
|
13
|
+
* `neutral` (default) is the everyday badge; `success` / `warning` /
|
|
14
|
+
* `danger` / `info` carry a well-defined meaning (a status, or for `info` a
|
|
15
|
+
* system fact such as scope or permission). For an unread/notification number
|
|
16
|
+
* use `CountBadge`; for a removable, selectable or category-only label use
|
|
17
|
+
* `Tag`.
|
|
16
18
|
*
|
|
17
19
|
* @example
|
|
18
20
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["forwardRef","resolveBadgeVariant","_jsx","ChakraBadge","baseStyles","variantStyles","polymorphic"],"mappings":";;;;;;;;;AAOA
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["forwardRef","resolveBadgeVariant","_jsx","ChakraBadge","baseStyles","variantStyles","polymorphic"],"mappings":";;;;;;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACH,MAAM,SAAS,GAAGA,gBAAU,CAC1B,CACE,EAAE,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAiB,EAC3D,GAAqC,KACnC;AACF,IAAA,MAAM,QAAQ,GAAGC,gCAAmB,CAAC,OAAO,CAAC;IAC7C,QACEC,cAAA,CAACC,WAAW,EAAA,EAAA,GACNC,uBAAU,EAAA,GACVC,0BAAa,CAAC,QAAQ,CAAC,EAC3B,CAAC,EAAC,aAAa,EACf,aAAa,EAAE,aAAa,EAAA,GACxB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CACF;AAED;AACA,SAAS,CAAC,WAAW,GAAG,OAAO;MAElB,KAAK,GAAGC,uBAAW,CAAwB,SAAS;;;;"}
|
|
@@ -8,9 +8,11 @@ import { resolveBadgeVariant, variantStyles, baseStyles } from './Badge.styles.m
|
|
|
8
8
|
/**
|
|
9
9
|
* Badge — a small, non-interactive label.
|
|
10
10
|
*
|
|
11
|
-
* `neutral` (default) is the
|
|
12
|
-
* `danger` / `info`
|
|
13
|
-
*
|
|
11
|
+
* `neutral` (default) is the everyday badge; `success` / `warning` /
|
|
12
|
+
* `danger` / `info` carry a well-defined meaning (a status, or for `info` a
|
|
13
|
+
* system fact such as scope or permission). For an unread/notification number
|
|
14
|
+
* use `CountBadge`; for a removable, selectable or category-only label use
|
|
15
|
+
* `Tag`.
|
|
14
16
|
*
|
|
15
17
|
* @example
|
|
16
18
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraBadge"],"mappings":";;;;;;;AAOA
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraBadge"],"mappings":";;;;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAAE,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAiB,EAC3D,GAAqC,KACnC;AACF,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC7C,QACEA,GAAA,CAACC,OAAW,EAAA,EAAA,GACN,UAAU,EAAA,GACV,aAAa,CAAC,QAAQ,CAAC,EAC3B,CAAC,EAAC,aAAa,EACf,aAAa,EAAE,aAAa,EAAA,GACxB,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CACF;AAED;AACA,SAAS,CAAC,WAAW,GAAG,OAAO;MAElB,KAAK,GAAG,WAAW,CAAwB,SAAS;;;;"}
|
|
@@ -4,11 +4,13 @@ import type { PolymorphicProps } from '../../types/polymorphic';
|
|
|
4
4
|
/**
|
|
5
5
|
* Badge variants (5.0).
|
|
6
6
|
*
|
|
7
|
-
* - `neutral` (default):
|
|
8
|
-
*
|
|
9
|
-
* - `success` / `warning` / `danger` / `info`:
|
|
10
|
-
*
|
|
11
|
-
*
|
|
7
|
+
* - `neutral` (default): `bg.muted` + `secondary.fgStrong` — an attribute
|
|
8
|
+
* with no state ("Pro", "Beta", "Draft").
|
|
9
|
+
* - `success` / `warning` / `danger` / `info`: `{status}.bg` + `{status}.fg`,
|
|
10
|
+
* for a meaning every user shares and that is well defined. `info` is a
|
|
11
|
+
* non-error system fact: scope ("이 그룹만"), permission, read-only, "New".
|
|
12
|
+
* A label that only classifies or groups is a `Tag` with `category`, never
|
|
13
|
+
* a status colour. The same label gets the same variant on every screen.
|
|
12
14
|
*
|
|
13
15
|
* **Breaking in 5.0:** `primary` and `secondary` were removed. At runtime they
|
|
14
16
|
* still render (as `neutral`) and warn once in development.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE
|
|
1
|
+
{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,CAAC;AAEzD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,IAAI,CAAC,GAAG;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,CAAC,QAAQ,SAAS,WAAW,GAAG,MAAM,IAC1D,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC"}
|
|
@@ -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":"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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":";;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectField.mjs","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -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"}
|