@mindlogic-ai/logician-ui 4.0.0-alpha.40 → 4.0.0-alpha.42
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/Select/Combobox.d.ts.map +1 -1
- package/dist/components/Select/Combobox.js +5 -1
- package/dist/components/Select/Combobox.js.map +1 -1
- package/dist/components/Select/Combobox.mjs +5 -1
- package/dist/components/Select/Combobox.mjs.map +1 -1
- package/dist/theme/formControls.d.ts +2 -0
- package/dist/theme/formControls.d.ts.map +1 -1
- package/dist/theme/formControls.js +2 -0
- package/dist/theme/formControls.js.map +1 -1
- package/dist/theme/formControls.mjs +2 -0
- package/dist/theme/formControls.mjs.map +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +45 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +46 -1
- package/dist/theme/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/Combobox.tsx +4 -1
- package/src/components/Select/Comparison.stories.tsx +19 -0
- package/src/theme/formControls.ts +2 -0
- package/src/theme/index.ts +49 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAgD9D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAmBpB,CAAC"}
|
|
@@ -4,11 +4,15 @@
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
|
+
var formControls = require('../../theme/formControls.js');
|
|
7
8
|
var mergeCss = require('../../utils/mergeCss.js');
|
|
8
9
|
var Select_styles = require('./Select.styles.js');
|
|
9
10
|
|
|
10
11
|
const Input = React.forwardRef(function ComboboxInput({ css, ...props }, ref) {
|
|
11
|
-
return (jsxRuntime.jsx(react.Combobox.Input, { ref: ref, ...props,
|
|
12
|
+
return (jsxRuntime.jsx(react.Combobox.Input, { ref: ref, ...props,
|
|
13
|
+
// The one typeable listbox: unlike Select's button trigger, iOS Safari
|
|
14
|
+
// zooms toward this input when its text is under 16px.
|
|
15
|
+
css: mergeCss.mergeCss(formControls.noZoomOnFocus, Select_styles.inputStyles, css) }));
|
|
12
16
|
});
|
|
13
17
|
const Content = React.forwardRef(function ComboboxContent({ css, ...props }, ref) {
|
|
14
18
|
return (jsxRuntime.jsx(react.Combobox.Content, { ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraCombobox","mergeCss","inputStyles","contentStyles","itemStyles"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraCombobox","mergeCss","noZoomOnFocus","inputStyles","contentStyles","itemStyles"],"mappings":";;;;;;;;;;AAQA,MAAM,KAAK,GAAGA,gBAAU,CACtB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,cAAA,CAACC,cAAc,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK;;;QAGT,GAAG,EAAEC,iBAAQ,CAACC,0BAAa,EAAEC,yBAAW,EAAE,GAAG,CAAC,EAAA,CAC9C;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGL,gBAAU,CACxB,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACEC,eAACC,cAAc,CAAC,OAAO,EAAA,EACrB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,UAAU,EAAA,GACrB,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACG,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGN,gBAAU,CACrB,SAAS,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC1C,QACEC,eAACC,cAAc,CAAC,IAAI,EAAA,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACI,wBAAU,EAAE,GAAG,CAAC,EAAA,CAC9B;AAEN,CAAC,CACF;AAED;;;;;AAKG;AACI,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAEL,cAAc,CAAC,IAAI;IACzB,aAAa,EAAEA,cAAc,CAAC,aAAa;IAC3C,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAEA,cAAc,CAAC,KAAK;IAC3B,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,KAAK;IACL,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,cAAc,EAAEA,cAAc,CAAC,cAAc;IAC7C,YAAY,EAAEA,cAAc,CAAC,YAAY;IACzC,UAAU,EAAEA,cAAc,CAAC,UAAU;IACrC,OAAO;IACP,KAAK,EAAEA,cAAc,CAAC,KAAK;IAC3B,SAAS,EAAEA,cAAc,CAAC,SAAS;IACnC,cAAc,EAAEA,cAAc,CAAC,cAAc;IAC7C,IAAI;IACJ,QAAQ,EAAEA,cAAc,CAAC,QAAQ;IACjC,aAAa,EAAEA,cAAc,CAAC,aAAa;IAC3C,WAAW,EAAEA,cAAc,CAAC,WAAW;;;;;"}
|
|
@@ -2,11 +2,15 @@
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { Combobox as Combobox$1 } from '@chakra-ui/react';
|
|
5
|
+
import { noZoomOnFocus } from '../../theme/formControls.mjs';
|
|
5
6
|
import { mergeCss } from '../../utils/mergeCss.mjs';
|
|
6
7
|
import { inputStyles, contentStyles, itemStyles } from './Select.styles.mjs';
|
|
7
8
|
|
|
8
9
|
const Input = forwardRef(function ComboboxInput({ css, ...props }, ref) {
|
|
9
|
-
return (jsx(Combobox$1.Input, { ref: ref, ...props,
|
|
10
|
+
return (jsx(Combobox$1.Input, { ref: ref, ...props,
|
|
11
|
+
// The one typeable listbox: unlike Select's button trigger, iOS Safari
|
|
12
|
+
// zooms toward this input when its text is under 16px.
|
|
13
|
+
css: mergeCss(noZoomOnFocus, inputStyles, css) }));
|
|
10
14
|
});
|
|
11
15
|
const Content = forwardRef(function ComboboxContent({ css, ...props }, ref) {
|
|
12
16
|
return (jsx(Combobox$1.Content, { ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.mjs","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCombobox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Combobox.mjs","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCombobox"],"mappings":";;;;;;;;AAQA,MAAM,KAAK,GAAG,UAAU,CACtB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEA,GAAA,CAACC,UAAc,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK;;;QAGT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,GAAG,CAAC,EAAA,CAC9C;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACED,IAACC,UAAc,CAAC,OAAO,EAAA,EACrB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,UAAU,EAAA,GACrB,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAG,UAAU,CACrB,SAAS,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC1C,QACED,IAACC,UAAc,CAAC,IAAI,EAAA,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAAA,CAC9B;AAEN,CAAC,CACF;AAED;;;;;AAKG;AACI,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAEA,UAAc,CAAC,IAAI;IACzB,aAAa,EAAEA,UAAc,CAAC,aAAa;IAC3C,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,KAAK,EAAEA,UAAc,CAAC,KAAK;IAC3B,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,KAAK;IACL,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,cAAc,EAAEA,UAAc,CAAC,cAAc;IAC7C,YAAY,EAAEA,UAAc,CAAC,YAAY;IACzC,UAAU,EAAEA,UAAc,CAAC,UAAU;IACrC,OAAO;IACP,KAAK,EAAEA,UAAc,CAAC,KAAK;IAC3B,SAAS,EAAEA,UAAc,CAAC,SAAS;IACnC,cAAc,EAAEA,UAAc,CAAC,cAAc;IAC7C,IAAI;IACJ,QAAQ,EAAEA,UAAc,CAAC,QAAQ;IACjC,aAAa,EAAEA,UAAc,CAAC,aAAa;IAC3C,WAAW,EAAEA,UAAc,CAAC,WAAW;;;;;"}
|
|
@@ -30,6 +30,8 @@ import type { SystemStyleObject } from '@chakra-ui/react';
|
|
|
30
30
|
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
31
31
|
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
32
32
|
*
|
|
33
|
+
* `Combobox`'s input spreads it too — it is the one typeable listbox.
|
|
34
|
+
*
|
|
33
35
|
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
34
36
|
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
35
37
|
* visually hidden native `<select>` that exists only for form submission and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formControls.d.ts","sourceRoot":"","sources":["../../src/theme/formControls.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D
|
|
1
|
+
{"version":3,"file":"formControls.d.ts","sourceRoot":"","sources":["../../src/theme/formControls.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,aAAa,EAAE,iBAE3B,CAAC"}
|
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
33
33
|
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
34
34
|
*
|
|
35
|
+
* `Combobox`'s input spreads it too — it is the one typeable listbox.
|
|
36
|
+
*
|
|
35
37
|
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
36
38
|
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
37
39
|
* visually hidden native `<select>` that exists only for form submission and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formControls.js","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA
|
|
1
|
+
{"version":3,"file":"formControls.js","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}
|
|
@@ -30,6 +30,8 @@
|
|
|
30
30
|
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
31
31
|
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
32
32
|
*
|
|
33
|
+
* `Combobox`'s input spreads it too — it is the one typeable listbox.
|
|
34
|
+
*
|
|
33
35
|
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
34
36
|
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
35
37
|
* visually hidden native `<select>` that exists only for form submission and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formControls.mjs","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";AAEA
|
|
1
|
+
{"version":3,"file":"formControls.mjs","sources":["../../src/theme/formControls.ts"],"sourcesContent":[null],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAsFA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,uCA2GrB,CAAC;AAuIH,eAAO,MAAM,MAAM,0CAAsC,CAAC;AAE1D,eAAO,MAAM,KAAK,0CAAS,CAAC;AAE5B,eAAO,MAAM,cAAc,yCAAS,CAAC;AACrC,eAAe,MAAM,CAAC"}
|
package/dist/theme/index.js
CHANGED
|
@@ -199,6 +199,46 @@ const textStyles = react.defineTextStyles({
|
|
|
199
199
|
value: SHARED_TEXT_STYLE_VALUES.overline,
|
|
200
200
|
},
|
|
201
201
|
});
|
|
202
|
+
/**
|
|
203
|
+
* `lg`/`xl` form-control font size.
|
|
204
|
+
*
|
|
205
|
+
* Chakra's input, textarea and select recipes put `sm`/`md` on the `sm`
|
|
206
|
+
* textStyle and `lg`/`xl` on `md`. This theme maps both textStyles to
|
|
207
|
+
* `subtitleAndP`, so every size rendered at the same 14px and only the height
|
|
208
|
+
* changed. `lg`/`xl` get their own step here (desktop 16px, phone 14px);
|
|
209
|
+
* `xs`/`sm`/`md` keep their current size on purpose, so call sites that do not
|
|
210
|
+
* pass `size` render exactly as before.
|
|
211
|
+
*
|
|
212
|
+
* Spacing tokens are em-based, so Chakra's `lg` `px: 4` grows with the font to
|
|
213
|
+
* 16px. `lg` drops to `px: 3` (12px) to stay close to `md`'s 10.5px.
|
|
214
|
+
*/
|
|
215
|
+
const FORM_CONTROL_LG_FONT_SIZE = { base: '1em', md: '1.143em' };
|
|
216
|
+
const formControlLgOverride = {
|
|
217
|
+
variants: {
|
|
218
|
+
size: {
|
|
219
|
+
lg: { fontSize: FORM_CONTROL_LG_FONT_SIZE, px: '3' },
|
|
220
|
+
xl: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
|
|
221
|
+
},
|
|
222
|
+
},
|
|
223
|
+
};
|
|
224
|
+
// Same `lg` step as Input, and the same height as Input `lg` (Chakra puts the
|
|
225
|
+
// select trigger one token taller). Chakra's `py: 3` is em-based, so at 16px it
|
|
226
|
+
// alone pushes the trigger past the min height; let the height token win.
|
|
227
|
+
const selectSlotRecipe = react.defineSlotRecipe({
|
|
228
|
+
slots: ['root', 'trigger', 'content'],
|
|
229
|
+
variants: {
|
|
230
|
+
size: {
|
|
231
|
+
lg: {
|
|
232
|
+
root: {
|
|
233
|
+
'--select-trigger-height': 'sizes.11',
|
|
234
|
+
'--select-trigger-padding-x': 'spacing.3',
|
|
235
|
+
},
|
|
236
|
+
trigger: { fontSize: FORM_CONTROL_LG_FONT_SIZE, py: '1.5' },
|
|
237
|
+
content: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
|
|
238
|
+
},
|
|
239
|
+
},
|
|
240
|
+
},
|
|
241
|
+
});
|
|
202
242
|
/**
|
|
203
243
|
* Chakra UI v3 theme configuration for Logician UI
|
|
204
244
|
*
|
|
@@ -278,8 +318,13 @@ const config = react.defineConfig({
|
|
|
278
318
|
colors: colors.semanticTokens.colors,
|
|
279
319
|
},
|
|
280
320
|
textStyles,
|
|
321
|
+
recipes: {
|
|
322
|
+
input: formControlLgOverride,
|
|
323
|
+
textarea: formControlLgOverride,
|
|
324
|
+
},
|
|
281
325
|
slotRecipes: {
|
|
282
326
|
table: table.tableSlotRecipe,
|
|
327
|
+
select: selectSlotRecipe,
|
|
283
328
|
},
|
|
284
329
|
},
|
|
285
330
|
});
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":["defineTextStyles","defineConfig","globalCss","animationStyles","keyframes","colors","durations","easings","semanticTokens","tableSlotRecipe","createSystem","defaultConfig"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":["defineTextStyles","defineSlotRecipe","defineConfig","globalCss","animationStyles","keyframes","colors","durations","easings","semanticTokens","tableSlotRecipe","createSystem","defaultConfig"],"mappings":"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"}
|
package/dist/theme/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { defineTextStyles, defineConfig, createSystem, defaultConfig } from '@chakra-ui/react';
|
|
2
|
+
import { defineTextStyles, defineSlotRecipe, defineConfig, createSystem, defaultConfig } from '@chakra-ui/react';
|
|
3
3
|
import { semanticTokens, colors } from './colors.mjs';
|
|
4
4
|
import { globalCss } from './global.mjs';
|
|
5
5
|
import { easings, durations, keyframes, animationStyles } from './motion.mjs';
|
|
@@ -195,6 +195,46 @@ const textStyles = defineTextStyles({
|
|
|
195
195
|
value: SHARED_TEXT_STYLE_VALUES.overline,
|
|
196
196
|
},
|
|
197
197
|
});
|
|
198
|
+
/**
|
|
199
|
+
* `lg`/`xl` form-control font size.
|
|
200
|
+
*
|
|
201
|
+
* Chakra's input, textarea and select recipes put `sm`/`md` on the `sm`
|
|
202
|
+
* textStyle and `lg`/`xl` on `md`. This theme maps both textStyles to
|
|
203
|
+
* `subtitleAndP`, so every size rendered at the same 14px and only the height
|
|
204
|
+
* changed. `lg`/`xl` get their own step here (desktop 16px, phone 14px);
|
|
205
|
+
* `xs`/`sm`/`md` keep their current size on purpose, so call sites that do not
|
|
206
|
+
* pass `size` render exactly as before.
|
|
207
|
+
*
|
|
208
|
+
* Spacing tokens are em-based, so Chakra's `lg` `px: 4` grows with the font to
|
|
209
|
+
* 16px. `lg` drops to `px: 3` (12px) to stay close to `md`'s 10.5px.
|
|
210
|
+
*/
|
|
211
|
+
const FORM_CONTROL_LG_FONT_SIZE = { base: '1em', md: '1.143em' };
|
|
212
|
+
const formControlLgOverride = {
|
|
213
|
+
variants: {
|
|
214
|
+
size: {
|
|
215
|
+
lg: { fontSize: FORM_CONTROL_LG_FONT_SIZE, px: '3' },
|
|
216
|
+
xl: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
|
|
217
|
+
},
|
|
218
|
+
},
|
|
219
|
+
};
|
|
220
|
+
// Same `lg` step as Input, and the same height as Input `lg` (Chakra puts the
|
|
221
|
+
// select trigger one token taller). Chakra's `py: 3` is em-based, so at 16px it
|
|
222
|
+
// alone pushes the trigger past the min height; let the height token win.
|
|
223
|
+
const selectSlotRecipe = defineSlotRecipe({
|
|
224
|
+
slots: ['root', 'trigger', 'content'],
|
|
225
|
+
variants: {
|
|
226
|
+
size: {
|
|
227
|
+
lg: {
|
|
228
|
+
root: {
|
|
229
|
+
'--select-trigger-height': 'sizes.11',
|
|
230
|
+
'--select-trigger-padding-x': 'spacing.3',
|
|
231
|
+
},
|
|
232
|
+
trigger: { fontSize: FORM_CONTROL_LG_FONT_SIZE, py: '1.5' },
|
|
233
|
+
content: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
},
|
|
237
|
+
});
|
|
198
238
|
/**
|
|
199
239
|
* Chakra UI v3 theme configuration for Logician UI
|
|
200
240
|
*
|
|
@@ -274,8 +314,13 @@ const config = defineConfig({
|
|
|
274
314
|
colors: semanticTokens.colors,
|
|
275
315
|
},
|
|
276
316
|
textStyles,
|
|
317
|
+
recipes: {
|
|
318
|
+
input: formControlLgOverride,
|
|
319
|
+
textarea: formControlLgOverride,
|
|
320
|
+
},
|
|
277
321
|
slotRecipes: {
|
|
278
322
|
table: tableSlotRecipe,
|
|
323
|
+
select: selectSlotRecipe,
|
|
279
324
|
},
|
|
280
325
|
},
|
|
281
326
|
});
|
package/dist/theme/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { forwardRef } from 'react';
|
|
2
2
|
import { Combobox as ChakraCombobox } from '@chakra-ui/react';
|
|
3
3
|
|
|
4
|
+
import { noZoomOnFocus } from '@/theme/formControls';
|
|
4
5
|
import { mergeCss } from '@/utils/mergeCss';
|
|
5
6
|
|
|
6
7
|
import { contentStyles, inputStyles, itemStyles } from './Select.styles';
|
|
@@ -11,7 +12,9 @@ const Input = forwardRef<HTMLInputElement, ChakraCombobox.InputProps>(
|
|
|
11
12
|
<ChakraCombobox.Input
|
|
12
13
|
ref={ref}
|
|
13
14
|
{...props}
|
|
14
|
-
|
|
15
|
+
// The one typeable listbox: unlike Select's button trigger, iOS Safari
|
|
16
|
+
// zooms toward this input when its text is under 16px.
|
|
17
|
+
css={mergeCss(noZoomOnFocus, inputStyles, css)}
|
|
15
18
|
/>
|
|
16
19
|
);
|
|
17
20
|
}
|
|
@@ -61,3 +61,22 @@ export const SideBySide = () => (
|
|
|
61
61
|
</Row>
|
|
62
62
|
</Stack>
|
|
63
63
|
);
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* The four form-control sizes, Input / Select / Textarea per row.
|
|
67
|
+
*/
|
|
68
|
+
export const SizeProgression = () => (
|
|
69
|
+
<Stack gap={8} maxW="360px">
|
|
70
|
+
{(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
|
|
71
|
+
<Row key={size} label={`size="${size}"`}>
|
|
72
|
+
<Input size={size} placeholder={`Input ${size}`} />
|
|
73
|
+
<SelectField
|
|
74
|
+
size={size}
|
|
75
|
+
options={categoryOptions}
|
|
76
|
+
placeholder={`Select ${size}`}
|
|
77
|
+
/>
|
|
78
|
+
<Textarea size={size} placeholder={`Textarea ${size}`} />
|
|
79
|
+
</Row>
|
|
80
|
+
))}
|
|
81
|
+
</Stack>
|
|
82
|
+
);
|
|
@@ -31,6 +31,8 @@ import type { SystemStyleObject } from '@chakra-ui/react';
|
|
|
31
31
|
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
32
32
|
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
33
33
|
*
|
|
34
|
+
* `Combobox`'s input spreads it too — it is the one typeable listbox.
|
|
35
|
+
*
|
|
34
36
|
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
35
37
|
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
36
38
|
* visually hidden native `<select>` that exists only for form submission and
|
package/src/theme/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
createSystem,
|
|
3
3
|
defaultConfig,
|
|
4
4
|
defineConfig,
|
|
5
|
+
defineSlotRecipe,
|
|
5
6
|
defineTextStyles,
|
|
6
7
|
} from '@chakra-ui/react';
|
|
7
8
|
|
|
@@ -205,6 +206,49 @@ export const textStyles = defineTextStyles({
|
|
|
205
206
|
},
|
|
206
207
|
});
|
|
207
208
|
|
|
209
|
+
/**
|
|
210
|
+
* `lg`/`xl` form-control font size.
|
|
211
|
+
*
|
|
212
|
+
* Chakra's input, textarea and select recipes put `sm`/`md` on the `sm`
|
|
213
|
+
* textStyle and `lg`/`xl` on `md`. This theme maps both textStyles to
|
|
214
|
+
* `subtitleAndP`, so every size rendered at the same 14px and only the height
|
|
215
|
+
* changed. `lg`/`xl` get their own step here (desktop 16px, phone 14px);
|
|
216
|
+
* `xs`/`sm`/`md` keep their current size on purpose, so call sites that do not
|
|
217
|
+
* pass `size` render exactly as before.
|
|
218
|
+
*
|
|
219
|
+
* Spacing tokens are em-based, so Chakra's `lg` `px: 4` grows with the font to
|
|
220
|
+
* 16px. `lg` drops to `px: 3` (12px) to stay close to `md`'s 10.5px.
|
|
221
|
+
*/
|
|
222
|
+
const FORM_CONTROL_LG_FONT_SIZE = { base: '1em', md: '1.143em' } as const;
|
|
223
|
+
|
|
224
|
+
const formControlLgOverride = {
|
|
225
|
+
variants: {
|
|
226
|
+
size: {
|
|
227
|
+
lg: { fontSize: FORM_CONTROL_LG_FONT_SIZE, px: '3' },
|
|
228
|
+
xl: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
|
|
229
|
+
},
|
|
230
|
+
},
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
// Same `lg` step as Input, and the same height as Input `lg` (Chakra puts the
|
|
234
|
+
// select trigger one token taller). Chakra's `py: 3` is em-based, so at 16px it
|
|
235
|
+
// alone pushes the trigger past the min height; let the height token win.
|
|
236
|
+
const selectSlotRecipe = defineSlotRecipe({
|
|
237
|
+
slots: ['root', 'trigger', 'content'],
|
|
238
|
+
variants: {
|
|
239
|
+
size: {
|
|
240
|
+
lg: {
|
|
241
|
+
root: {
|
|
242
|
+
'--select-trigger-height': 'sizes.11',
|
|
243
|
+
'--select-trigger-padding-x': 'spacing.3',
|
|
244
|
+
},
|
|
245
|
+
trigger: { fontSize: FORM_CONTROL_LG_FONT_SIZE, py: '1.5' },
|
|
246
|
+
content: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
|
|
247
|
+
},
|
|
248
|
+
},
|
|
249
|
+
},
|
|
250
|
+
});
|
|
251
|
+
|
|
208
252
|
/**
|
|
209
253
|
* Chakra UI v3 theme configuration for Logician UI
|
|
210
254
|
*
|
|
@@ -284,8 +328,13 @@ const config = defineConfig({
|
|
|
284
328
|
colors: semanticTokens.colors,
|
|
285
329
|
},
|
|
286
330
|
textStyles,
|
|
331
|
+
recipes: {
|
|
332
|
+
input: formControlLgOverride,
|
|
333
|
+
textarea: formControlLgOverride,
|
|
334
|
+
},
|
|
287
335
|
slotRecipes: {
|
|
288
336
|
table: tableSlotRecipe,
|
|
337
|
+
select: selectSlotRecipe,
|
|
289
338
|
},
|
|
290
339
|
},
|
|
291
340
|
});
|