@mindlogic-ai/logician-ui 4.0.0-alpha.39 → 4.0.0-alpha.41
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/PinInput/PinInput.d.ts +1 -4
- package/dist/components/PinInput/PinInput.d.ts.map +1 -1
- package/dist/components/PinInput/PinInput.js +5 -22
- package/dist/components/PinInput/PinInput.js.map +1 -1
- package/dist/components/PinInput/PinInput.mjs +8 -25
- package/dist/components/PinInput/PinInput.mjs.map +1 -1
- package/dist/components/PinInput/PinInput.types.d.ts +7 -24
- package/dist/components/PinInput/PinInput.types.d.ts.map +1 -1
- package/dist/theme/formControls.d.ts +5 -7
- package/dist/theme/formControls.d.ts.map +1 -1
- package/dist/theme/formControls.js +5 -7
- package/dist/theme/formControls.js.map +1 -1
- package/dist/theme/formControls.mjs +5 -7
- 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 -2
- package/src/components/PinInput/PinInput.stories.tsx +36 -9
- package/src/components/PinInput/PinInput.tsx +54 -45
- package/src/components/PinInput/PinInput.types.ts +17 -25
- package/src/components/Select/Comparison.stories.tsx +19 -0
- package/src/theme/formControls.ts +5 -7
- package/src/theme/index.ts +49 -0
|
@@ -1,6 +1,3 @@
|
|
|
1
1
|
import { PinInputProps } from './PinInput.types';
|
|
2
|
-
export declare const PinInput:
|
|
3
|
-
({ value, onChange, inputStyle, autoFocus, isNumberOnly, ...rest }: PinInputProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
2
|
+
export declare const PinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
6
3
|
//# sourceMappingURL=PinInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,QAAQ,4GAgDpB,CAAC"}
|
|
@@ -3,30 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var ReactPinInput = require('react-pin-input');
|
|
7
6
|
var react = require('@chakra-ui/react');
|
|
7
|
+
var formControls = require('../../theme/formControls.js');
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const grayColor = react.useToken('colors', 'border.default')[0];
|
|
14
|
-
React.useEffect(() => {
|
|
15
|
-
// Automatically focus the PinInput component on mount
|
|
16
|
-
if (autoFocus)
|
|
17
|
-
pinInputRef.current?.focus();
|
|
18
|
-
}, []);
|
|
19
|
-
return (jsxRuntime.jsx(ReactPinInput, { ref: pinInputRef, initialValue: value, onChange: onChange, type: isNumberOnly ? 'numeric' : 'custom', inputMode: isNumberOnly ? 'number' : 'text', inputStyle: {
|
|
20
|
-
borderColor: grayColor,
|
|
21
|
-
borderRadius: '8px',
|
|
22
|
-
width: '48px',
|
|
23
|
-
height: '48px',
|
|
24
|
-
...inputStyle,
|
|
25
|
-
}, inputFocusStyle: {
|
|
26
|
-
borderColor: primaryColor,
|
|
27
|
-
boxShadow: `0 0 0 1px ${primaryColor}`,
|
|
28
|
-
}, onComplete: onChange, autoSelect: true, regexCriteria: isNumberOnly ? /^[0-9]*$/ : undefined, ...rest }));
|
|
29
|
-
};
|
|
9
|
+
const PinInput = React.forwardRef(function PinInput({ length, value, onChange, onComplete, placeholder = '', inputProps, ...rest }, ref) {
|
|
10
|
+
const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
|
|
11
|
+
return (jsxRuntime.jsxs(react.PinInput.Root, { count: length, value: valueArray, onValueChange: (d) => onChange?.(d.valueAsString), onValueComplete: (d) => onComplete?.(d.valueAsString), placeholder: placeholder, ...rest, children: [jsxRuntime.jsx(react.PinInput.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.PinInput.Control, { children: Array.from({ length }).map((_, i) => (jsxRuntime.jsx(react.PinInput.Input, { index: i, w: 12, h: 12, fontSize: "lg", borderRadius: "md", bg: "bg.surface", color: "fg.default", borderColor: "border.default", _hover: { borderColor: 'primary.lighter' }, _focus: { borderColor: 'primary.main' }, _invalid: { borderColor: 'danger.main' }, _disabled: { borderColor: 'border.subtle', bg: 'bg.subtle' }, css: formControls.noZoomOnFocus }, i))) })] }));
|
|
12
|
+
});
|
|
30
13
|
PinInput.displayName = 'PinInput';
|
|
31
14
|
|
|
32
15
|
exports.PinInput = PinInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.js","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"PinInput.js","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsxs","ChakraPinInput","_jsx","noZoomOnFocus"],"mappings":";;;;;;;;AASO,MAAM,QAAQ,GAAGA,gBAAU,CAChC,SAAS,QAAQ,CACf,EACE,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,UAAU,EACV,GAAG,IAAI,EACR,EACD,GAAG,EAAA;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAErE,IAAA,QACEC,eAAA,CAACC,cAAc,CAAC,IAAI,IAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,CAAC,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC,EACjD,eAAe,EAAE,CAAC,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,EACrD,WAAW,EAAE,WAAW,EAAA,GACpB,IAAI,aAERC,cAAA,CAACD,cAAc,CAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,UAAU,GAAI,EACxDC,cAAA,CAACD,cAAc,CAAC,OAAO,EAAA,EAAA,QAAA,EACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC/BC,cAAA,CAACD,cAAc,CAAC,KAAK,EAAA,EAEnB,KAAK,EAAE,CAAC,EACR,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,QAAQ,EAAC,IAAI,EACb,YAAY,EAAC,IAAI,EACjB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,gBAAgB,EAC5B,MAAM,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAC1C,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EACvC,QAAQ,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,EACxC,SAAS,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,WAAW,EAAE,EAC5D,GAAG,EAAEE,0BAAa,EAAA,EAbb,CAAC,CAcN,CACH,CAAC,EAAA,CACqB,CAAA,EAAA,CACL;AAE1B,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1,30 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PinInput as PinInput$1 } from '@chakra-ui/react';
|
|
5
|
+
import { noZoomOnFocus } from '../../theme/formControls.mjs';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const grayColor = useToken('colors', 'border.default')[0];
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
// Automatically focus the PinInput component on mount
|
|
14
|
-
if (autoFocus)
|
|
15
|
-
pinInputRef.current?.focus();
|
|
16
|
-
}, []);
|
|
17
|
-
return (jsx(ReactPinInput, { ref: pinInputRef, initialValue: value, onChange: onChange, type: isNumberOnly ? 'numeric' : 'custom', inputMode: isNumberOnly ? 'number' : 'text', inputStyle: {
|
|
18
|
-
borderColor: grayColor,
|
|
19
|
-
borderRadius: '8px',
|
|
20
|
-
width: '48px',
|
|
21
|
-
height: '48px',
|
|
22
|
-
...inputStyle,
|
|
23
|
-
}, inputFocusStyle: {
|
|
24
|
-
borderColor: primaryColor,
|
|
25
|
-
boxShadow: `0 0 0 1px ${primaryColor}`,
|
|
26
|
-
}, onComplete: onChange, autoSelect: true, regexCriteria: isNumberOnly ? /^[0-9]*$/ : undefined, ...rest }));
|
|
27
|
-
};
|
|
7
|
+
const PinInput = forwardRef(function PinInput({ length, value, onChange, onComplete, placeholder = '', inputProps, ...rest }, ref) {
|
|
8
|
+
const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
|
|
9
|
+
return (jsxs(PinInput$1.Root, { count: length, value: valueArray, onValueChange: (d) => onChange?.(d.valueAsString), onValueComplete: (d) => onComplete?.(d.valueAsString), placeholder: placeholder, ...rest, children: [jsx(PinInput$1.HiddenInput, { ref: ref, ...inputProps }), jsx(PinInput$1.Control, { children: Array.from({ length }).map((_, i) => (jsx(PinInput$1.Input, { index: i, w: 12, h: 12, fontSize: "lg", borderRadius: "md", bg: "bg.surface", color: "fg.default", borderColor: "border.default", _hover: { borderColor: 'primary.lighter' }, _focus: { borderColor: 'primary.main' }, _invalid: { borderColor: 'danger.main' }, _disabled: { borderColor: 'border.subtle', bg: 'bg.subtle' }, css: noZoomOnFocus }, i))) })] }));
|
|
10
|
+
});
|
|
28
11
|
PinInput.displayName = 'PinInput';
|
|
29
12
|
|
|
30
13
|
export { PinInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.mjs","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"PinInput.mjs","sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraPinInput","_jsx"],"mappings":";;;;;;AASO,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EACE,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,UAAU,EACV,GAAG,IAAI,EACR,EACD,GAAG,EAAA;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAErE,IAAA,QACEA,IAAA,CAACC,UAAc,CAAC,IAAI,IAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,CAAC,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,aAAa,CAAC,EACjD,eAAe,EAAE,CAAC,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,EACrD,WAAW,EAAE,WAAW,EAAA,GACpB,IAAI,aAERC,GAAA,CAACD,UAAc,CAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,UAAU,GAAI,EACxDC,GAAA,CAACD,UAAc,CAAC,OAAO,EAAA,EAAA,QAAA,EACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC/BC,GAAA,CAACD,UAAc,CAAC,KAAK,EAAA,EAEnB,KAAK,EAAE,CAAC,EACR,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,QAAQ,EAAC,IAAI,EACb,YAAY,EAAC,IAAI,EACjB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,gBAAgB,EAC5B,MAAM,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAC1C,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EACvC,QAAQ,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,EACxC,SAAS,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,WAAW,EAAE,EAC5D,GAAG,EAAE,aAAa,EAAA,EAbb,CAAC,CAcN,CACH,CAAC,EAAA,CACqB,CAAA,EAAA,CACL;AAE1B,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -1,27 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import type { InputHTMLAttributes } from 'react';
|
|
2
|
+
import type { PinInput as ChakraPinInput } from '@chakra-ui/react';
|
|
3
|
+
export interface PinInputProps extends Omit<ChakraPinInput.RootProps, 'count' | 'value' | 'defaultValue' | 'onValueChange' | 'onValueComplete' | 'onChange' | 'children'> {
|
|
2
4
|
length: number;
|
|
3
|
-
initialValue?: number | string;
|
|
4
|
-
type?: 'numeric' | 'custom';
|
|
5
|
-
inputMode?: string;
|
|
6
|
-
secret?: boolean;
|
|
7
|
-
secretDelay?: number;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
focus?: boolean;
|
|
10
|
-
onChange?: (value: string, index: number) => void;
|
|
11
|
-
onComplete?: (value: string, index: number) => void;
|
|
12
|
-
style?: React.CSSProperties;
|
|
13
|
-
inputStyle?: React.CSSProperties;
|
|
14
|
-
inputFocusStyle?: React.CSSProperties;
|
|
15
|
-
validate?: (value: string) => string;
|
|
16
|
-
autoSelect?: boolean;
|
|
17
|
-
regexCriteria?: any;
|
|
18
|
-
ariaLabel?: string;
|
|
19
|
-
placeholder?: string;
|
|
20
|
-
}
|
|
21
|
-
export type PinInputProps = ReactPinInputProps & {
|
|
22
5
|
value?: string;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
onComplete?: (value: string) => void;
|
|
8
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
9
|
+
}
|
|
27
10
|
//# sourceMappingURL=PinInput.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/PinInput/PinInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,cAAc,CAAC,SAAS,EACtB,OAAO,GACP,OAAO,GACP,cAAc,GACd,eAAe,GACf,iBAAiB,GACjB,UAAU,GACV,UAAU,CACb;IACC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CACpD"}
|
|
@@ -27,16 +27,14 @@ import type { SystemStyleObject } from '@chakra-ui/react';
|
|
|
27
27
|
* browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
|
|
28
28
|
* controls and pushes wide tables off-screen, making the low-vision case worse.
|
|
29
29
|
*
|
|
30
|
-
* `Input` and `
|
|
31
|
-
* and `PasswordInput` composes `Input` so it inherits.
|
|
30
|
+
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
31
|
+
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
32
32
|
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
33
|
+
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
34
|
+
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
35
35
|
* visually hidden native `<select>` that exists only for form submission and
|
|
36
36
|
* never takes visible focus; Safari zooms toward text entry, not toward a
|
|
37
|
-
* button.
|
|
38
|
-
* object, and an inline style cannot carry a media query at all — a consumer
|
|
39
|
-
* that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
|
|
37
|
+
* button.
|
|
40
38
|
*
|
|
41
39
|
* Spread it yourself on any editable surface the design system does not own —
|
|
42
40
|
* a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,EAAE,iBAE3B,CAAC"}
|
|
@@ -29,16 +29,14 @@
|
|
|
29
29
|
* browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
|
|
30
30
|
* controls and pushes wide tables off-screen, making the low-vision case worse.
|
|
31
31
|
*
|
|
32
|
-
* `Input` and `
|
|
33
|
-
* and `PasswordInput` composes `Input` so it inherits.
|
|
32
|
+
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
33
|
+
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
34
34
|
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
35
|
+
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
36
|
+
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
37
37
|
* visually hidden native `<select>` that exists only for form submission and
|
|
38
38
|
* never takes visible focus; Safari zooms toward text entry, not toward a
|
|
39
|
-
* button.
|
|
40
|
-
* object, and an inline style cannot carry a media query at all — a consumer
|
|
41
|
-
* that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
|
|
39
|
+
* button.
|
|
42
40
|
*
|
|
43
41
|
* Spread it yourself on any editable surface the design system does not own —
|
|
44
42
|
* a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDG;AACI,MAAM,aAAa,GAAsB;AAC9C,IAAA,0BAA0B,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;;;;;"}
|
|
@@ -27,16 +27,14 @@
|
|
|
27
27
|
* browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
|
|
28
28
|
* controls and pushes wide tables off-screen, making the low-vision case worse.
|
|
29
29
|
*
|
|
30
|
-
* `Input` and `
|
|
31
|
-
* and `PasswordInput` composes `Input` so it inherits.
|
|
30
|
+
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
31
|
+
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
32
32
|
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
33
|
+
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
34
|
+
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
35
35
|
* visually hidden native `<select>` that exists only for form submission and
|
|
36
36
|
* never takes visible focus; Safari zooms toward text entry, not toward a
|
|
37
|
-
* button.
|
|
38
|
-
* object, and an inline style cannot carry a media query at all — a consumer
|
|
39
|
-
* that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
|
|
37
|
+
* button.
|
|
40
38
|
*
|
|
41
39
|
* Spread it yourself on any editable surface the design system does not own —
|
|
42
40
|
* a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDG;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,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mindlogic-ai/logician-ui",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.41",
|
|
4
4
|
"description": "A comprehensive React design system built on Chakra UI",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -77,7 +77,6 @@
|
|
|
77
77
|
"next-themes": "^0.4.6",
|
|
78
78
|
"polished": "^4.3.0",
|
|
79
79
|
"react-markdown": "^10.1.0",
|
|
80
|
-
"react-pin-input": "^1.3.0",
|
|
81
80
|
"recharts": "^3.1.2",
|
|
82
81
|
"rehype-katex": "^7.0.1",
|
|
83
82
|
"rehype-raw": "^7.0.0",
|
|
@@ -11,6 +11,14 @@ const meta = {
|
|
|
11
11
|
},
|
|
12
12
|
argTypes: {
|
|
13
13
|
length: { control: 'number' },
|
|
14
|
+
type: {
|
|
15
|
+
control: 'select',
|
|
16
|
+
options: ['numeric', 'alphanumeric', 'alphabetic'],
|
|
17
|
+
},
|
|
18
|
+
autoFocus: { control: 'boolean' },
|
|
19
|
+
otp: { control: 'boolean' },
|
|
20
|
+
disabled: { control: 'boolean' },
|
|
21
|
+
invalid: { control: 'boolean' },
|
|
14
22
|
},
|
|
15
23
|
} satisfies Meta<typeof PinInput>;
|
|
16
24
|
|
|
@@ -18,13 +26,32 @@ export default meta;
|
|
|
18
26
|
|
|
19
27
|
type Story = StoryObj<typeof PinInput>;
|
|
20
28
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
render: (args) => {
|
|
26
|
-
const [value, setValue] = useState('');
|
|
29
|
+
const Controlled = (args: React.ComponentProps<typeof PinInput>) => {
|
|
30
|
+
const [value, setValue] = useState('');
|
|
31
|
+
return <PinInput {...args} value={value} onChange={setValue} />;
|
|
32
|
+
};
|
|
27
33
|
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
}
|
|
34
|
+
export const Numeric: Story = {
|
|
35
|
+
args: { length: 6, type: 'numeric' },
|
|
36
|
+
render: (args) => <Controlled {...args} />,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const Alphanumeric: Story = {
|
|
40
|
+
args: { length: 6, type: 'alphanumeric' },
|
|
41
|
+
render: (args) => <Controlled {...args} />,
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export const Otp: Story = {
|
|
45
|
+
args: { length: 6, type: 'numeric', otp: true, autoFocus: true },
|
|
46
|
+
render: (args) => <Controlled {...args} />,
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const Disabled: Story = {
|
|
50
|
+
args: { length: 5, disabled: true },
|
|
51
|
+
render: (args) => <Controlled {...args} />,
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export const Invalid: Story = {
|
|
55
|
+
args: { length: 5, invalid: true },
|
|
56
|
+
render: (args) => <Controlled {...args} />,
|
|
57
|
+
};
|
|
@@ -1,51 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
import ReactPinInput from 'react-pin-input';
|
|
3
|
-
import { useToken } from '@chakra-ui/react';
|
|
1
|
+
'use client';
|
|
4
2
|
|
|
5
|
-
import {
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PinInput as ChakraPinInput } from '@chakra-ui/react';
|
|
5
|
+
|
|
6
|
+
import { noZoomOnFocus } from '@/theme/formControls';
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
export const PinInput = ({
|
|
9
|
-
value,
|
|
10
|
-
onChange,
|
|
11
|
-
inputStyle,
|
|
12
|
-
autoFocus = true,
|
|
13
|
-
isNumberOnly = true,
|
|
14
|
-
...rest
|
|
15
|
-
}: PinInputProps) => {
|
|
16
|
-
const pinInputRef = useRef<ReactPinInput>(null);
|
|
17
|
-
const primaryColor = useToken('colors', 'primary.main')[0];
|
|
18
|
-
const grayColor = useToken('colors', 'border.default')[0];
|
|
8
|
+
import { PinInputProps } from './PinInput.types';
|
|
19
9
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
10
|
+
export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
|
|
11
|
+
function PinInput(
|
|
12
|
+
{
|
|
13
|
+
length,
|
|
14
|
+
value,
|
|
15
|
+
onChange,
|
|
16
|
+
onComplete,
|
|
17
|
+
placeholder = '',
|
|
18
|
+
inputProps,
|
|
19
|
+
...rest
|
|
20
|
+
},
|
|
21
|
+
ref
|
|
22
|
+
) {
|
|
23
|
+
const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
25
|
+
return (
|
|
26
|
+
<ChakraPinInput.Root
|
|
27
|
+
count={length}
|
|
28
|
+
value={valueArray}
|
|
29
|
+
onValueChange={(d) => onChange?.(d.valueAsString)}
|
|
30
|
+
onValueComplete={(d) => onComplete?.(d.valueAsString)}
|
|
31
|
+
placeholder={placeholder}
|
|
32
|
+
{...rest}
|
|
33
|
+
>
|
|
34
|
+
<ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
|
|
35
|
+
<ChakraPinInput.Control>
|
|
36
|
+
{Array.from({ length }).map((_, i) => (
|
|
37
|
+
<ChakraPinInput.Input
|
|
38
|
+
key={i}
|
|
39
|
+
index={i}
|
|
40
|
+
w={12}
|
|
41
|
+
h={12}
|
|
42
|
+
fontSize="lg"
|
|
43
|
+
borderRadius="md"
|
|
44
|
+
bg="bg.surface"
|
|
45
|
+
color="fg.default"
|
|
46
|
+
borderColor="border.default"
|
|
47
|
+
_hover={{ borderColor: 'primary.lighter' }}
|
|
48
|
+
_focus={{ borderColor: 'primary.main' }}
|
|
49
|
+
_invalid={{ borderColor: 'danger.main' }}
|
|
50
|
+
_disabled={{ borderColor: 'border.subtle', bg: 'bg.subtle' }}
|
|
51
|
+
css={noZoomOnFocus}
|
|
52
|
+
/>
|
|
53
|
+
))}
|
|
54
|
+
</ChakraPinInput.Control>
|
|
55
|
+
</ChakraPinInput.Root>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
);
|
|
50
59
|
|
|
51
60
|
PinInput.displayName = 'PinInput';
|
|
@@ -1,27 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
length: number;
|
|
4
|
-
initialValue?: number | string;
|
|
5
|
-
type?: 'numeric' | 'custom';
|
|
6
|
-
inputMode?: string;
|
|
7
|
-
secret?: boolean;
|
|
8
|
-
secretDelay?: number;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
focus?: boolean;
|
|
11
|
-
onChange?: (value: string, index: number) => void;
|
|
12
|
-
onComplete?: (value: string, index: number) => void;
|
|
13
|
-
style?: React.CSSProperties;
|
|
14
|
-
inputStyle?: React.CSSProperties;
|
|
15
|
-
inputFocusStyle?: React.CSSProperties;
|
|
16
|
-
validate?: (value: string) => string;
|
|
17
|
-
autoSelect?: boolean;
|
|
18
|
-
regexCriteria?: any;
|
|
19
|
-
ariaLabel?: string;
|
|
20
|
-
placeholder?: string;
|
|
21
|
-
}
|
|
1
|
+
import type { InputHTMLAttributes } from 'react';
|
|
2
|
+
import type { PinInput as ChakraPinInput } from '@chakra-ui/react';
|
|
22
3
|
|
|
23
|
-
export
|
|
4
|
+
export interface PinInputProps extends Omit<
|
|
5
|
+
ChakraPinInput.RootProps,
|
|
6
|
+
| 'count'
|
|
7
|
+
| 'value'
|
|
8
|
+
| 'defaultValue'
|
|
9
|
+
| 'onValueChange'
|
|
10
|
+
| 'onValueComplete'
|
|
11
|
+
| 'onChange'
|
|
12
|
+
| 'children'
|
|
13
|
+
> {
|
|
14
|
+
length: number;
|
|
24
15
|
value?: string;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
onChange?: (value: string) => void;
|
|
17
|
+
onComplete?: (value: string) => void;
|
|
18
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
19
|
+
}
|
|
@@ -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
|
+
);
|
|
@@ -28,16 +28,14 @@ import type { SystemStyleObject } from '@chakra-ui/react';
|
|
|
28
28
|
* browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
|
|
29
29
|
* controls and pushes wide tables off-screen, making the low-vision case worse.
|
|
30
30
|
*
|
|
31
|
-
* `Input` and `
|
|
32
|
-
* and `PasswordInput` composes `Input` so it inherits.
|
|
31
|
+
* `Input`, `Textarea` and `PinInput` already spread this, so their call sites
|
|
32
|
+
* need nothing, and `PasswordInput` composes `Input` so it inherits.
|
|
33
33
|
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
34
|
+
* `Select` deliberately does NOT, because the zoom does not reach it. It is a
|
|
35
|
+
* listbox — a `<button>` trigger over a portalled list, plus a
|
|
36
36
|
* visually hidden native `<select>` that exists only for form submission and
|
|
37
37
|
* never takes visible focus; Safari zooms toward text entry, not toward a
|
|
38
|
-
* button.
|
|
39
|
-
* object, and an inline style cannot carry a media query at all — a consumer
|
|
40
|
-
* that builds OTP boxes on `ChakraPinInput` instead has to spread this itself.
|
|
38
|
+
* button.
|
|
41
39
|
*
|
|
42
40
|
* Spread it yourself on any editable surface the design system does not own —
|
|
43
41
|
* a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a
|
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
|
});
|