@cdx-ui/components 0.0.1-beta.80 → 0.0.1-beta.81
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/lib/commonjs/components/Input/styles.js +17 -6
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/Select/styles.js +9 -3
- package/lib/commonjs/components/Select/styles.js.map +1 -1
- package/lib/module/components/Input/styles.js +17 -6
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/Select/styles.js +9 -3
- package/lib/module/components/Select/styles.js.map +1 -1
- package/lib/typescript/components/Input/styles.d.ts.map +1 -1
- package/lib/typescript/components/Select/styles.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/Input/styles.ts +22 -8
- package/src/components/Select/styles.ts +26 -13
|
@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.inputSlotVariants = exports.inputRootVariants = exports.inputIconVariants = exports.inputFieldVariants = exports.inputFieldPlaceholderVariants = void 0;
|
|
7
7
|
var _classVarianceAuthority = require("class-variance-authority");
|
|
8
8
|
var _primitives = require("../../styles/primitives");
|
|
9
|
-
const inputRootVariants = exports.inputRootVariants = (0, _classVarianceAuthority.cva)(['w-full flex-row items-center overflow-hidden', 'bg-surface-primary', 'border-solid border-stroke-primary', 'web:border-default native:border-[length:var(--border-width-default)]', 'rounded-[var(--border-radius-default)]', _primitives.TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _primitives.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
9
|
+
const inputRootVariants = exports.inputRootVariants = (0, _classVarianceAuthority.cva)(['w-full flex-row items-center overflow-hidden', 'bg-surface-primary', 'border-solid border-stroke-primary', 'web:border-default native:border-[length:var(--border-width-default)]', 'rounded-[var(--border-radius-default)]', _primitives.TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _primitives.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
10
|
+
// Web: inset ring avoids a border-width change so the shell never shifts on focus and
|
|
11
|
+
// no per-size padding compensation is required.
|
|
12
|
+
'web:data-[focus=true]:ring-inset', 'web:data-[focus=true]:ring-[length:var(--border-width-focused)]', 'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action', 'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
|
|
13
|
+
// Native: thicker border on focus; size variants below subtract a hairline of padding
|
|
14
|
+
// so layout doesn't shift by 1px.
|
|
15
|
+
'native:data-[focus=true]:border-[length:var(--border-width-focused)]', 'native:data-[focus=true]:data-[invalid=false]:border-stroke-action', 'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger', 'data-[invalid=true]:border-stroke-danger'], {
|
|
10
16
|
variants: {
|
|
11
17
|
variant: {
|
|
12
18
|
outline: []
|
|
13
19
|
},
|
|
14
20
|
size: {
|
|
15
|
-
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
16
|
-
|
|
17
|
-
'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
18
|
-
small: ['h-8 min-h-8 px-3 py-2 gap-1.5', 'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
21
|
+
default: ['h-11 min-h-11 px-4 py-3 gap-4', 'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
22
|
+
small: ['h-8 min-h-8 px-3 py-2 gap-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
19
23
|
}
|
|
20
24
|
},
|
|
21
25
|
defaultVariants: {
|
|
@@ -23,7 +27,14 @@ const inputRootVariants = exports.inputRootVariants = (0, _classVarianceAuthorit
|
|
|
23
27
|
size: 'default'
|
|
24
28
|
}
|
|
25
29
|
});
|
|
26
|
-
const inputFieldVariants = exports.inputFieldVariants = (0, _classVarianceAuthority.cva)([
|
|
30
|
+
const inputFieldVariants = exports.inputFieldVariants = (0, _classVarianceAuthority.cva)([
|
|
31
|
+
// `min-w-0` is critical on web: without it, a flex item defaults to `min-width: auto`,
|
|
32
|
+
// which is the input's intrinsic content width. When the shell ancestor uses
|
|
33
|
+
// `overflow-hidden` (for rounded corners), focusing the input via `<label htmlFor>`
|
|
34
|
+
// would make the browser auto-scroll the shell to bring the input into view — visually
|
|
35
|
+
// collapsing the left padding to zero. With `min-w-0` the field can shrink below its
|
|
36
|
+
// intrinsic width so the shell never overflows and never gets scrolled.
|
|
37
|
+
'flex-1 min-w-0 justify-center bg-transparent p-0', 'text-content-primary', 'placeholder:text-content-tertiary', 'web:outline-none', 'tracking-normal'], {
|
|
27
38
|
variants: {
|
|
28
39
|
size: {
|
|
29
40
|
default: 'text-[0.875rem]',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classVarianceAuthority","require","_primitives","inputRootVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","inputFieldVariants","inputSlotVariants","inputIconVariants","inputFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Input/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,2BAAG,EAClC,CACE,8CAA8C,EAC9C,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCC,6BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,2BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF,
|
|
1
|
+
{"version":3,"names":["_classVarianceAuthority","require","_primitives","inputRootVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","inputFieldVariants","inputSlotVariants","inputIconVariants","inputFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Input/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,2BAAG,EAClC,CACE,8CAA8C,EAC9C,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCC,6BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,2BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,8DAA8D;AAC9D;AACA;AACA,sEAAsE,EACtE,oEAAoE,EACpE,mEAAmE,EACnE,0CAA0C,CAC3C,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,+BAA+B,EAC/B,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,+BAA+B,EAC/B,wEAAwE,EACxE,wEAAwE;IAE5E;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE,SAAS;IAClBE,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAEM,MAAMI,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAG,IAAAV,2BAAG,EACnC;AACE;AACA;AACA;AACA;AACA;AACA;AACA,kDAAkD,EAClD,sBAAsB,EACtB,mCAAmC,EACnC,kBAAkB,EAClB,iBAAiB,CAClB,EACD;EACEG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,iBAAiB;MAC1BC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAEM,MAAMK,iBAAiB,GAAAZ,OAAA,CAAAY,iBAAA,GAAG,IAAAX,2BAAG,EAAC,CAAC,kDAAkD,CAAC,CAAC;AAEnF,MAAMY,iBAAiB,GAAAb,OAAA,CAAAa,iBAAA,GAAG,IAAAZ,2BAAG,EAAC,CAAC,uBAAuB,CAAC,EAAE;EAC9DG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,QAAQ;MACjBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEK,MAAMO,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAG,IAAAb,2BAAG,EAAC,CAAC,yBAAyB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -9,14 +9,20 @@ var _classVarianceAuthority = require("class-variance-authority");
|
|
|
9
9
|
var _primitives = require("../../styles/primitives");
|
|
10
10
|
// ── Trigger ─────────────────────────────────────────────────
|
|
11
11
|
|
|
12
|
-
const selectTriggerVariants = exports.selectTriggerVariants = (0, _classVarianceAuthority.cva)(['flex w-full min-w-0 flex-row items-center justify-between text-start', 'bg-surface-primary', 'border border-stroke-primary', 'rounded-[var(--border-radius-default)]', _primitives.TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _primitives.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:
|
|
12
|
+
const selectTriggerVariants = exports.selectTriggerVariants = (0, _classVarianceAuthority.cva)(['flex w-full min-w-0 flex-row items-center justify-between text-start', 'bg-surface-primary', 'border border-stroke-primary', 'rounded-[var(--border-radius-default)]', _primitives.TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', _primitives.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
13
|
+
// Web: inset ring avoids a border-width change so no padding compensation is needed.
|
|
14
|
+
'web:data-[focus=true]:ring-inset', 'web:data-[focus=true]:ring-[length:var(--border-width-focused)]', 'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action', 'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger', 'web:data-[state=open]:ring-inset', 'web:data-[state=open]:ring-[length:var(--border-width-focused)]', 'web:data-[state=open]:data-[invalid=false]:ring-stroke-action', 'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
|
|
15
|
+
// Native: thicker border; size variants below compensate the layout shift.
|
|
16
|
+
'native:data-[focus=true]:border-[length:var(--border-width-focused)]', 'native:data-[focus=true]:data-[invalid=false]:border-stroke-action', 'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger', 'native:data-[state=open]:border-[length:var(--border-width-focused)]', 'native:data-[state=open]:data-[invalid=false]:border-stroke-action', 'native:data-[state=open]:data-[invalid=true]:border-stroke-danger', 'data-[invalid=true]:border-stroke-danger'], {
|
|
13
17
|
variants: {
|
|
14
18
|
variant: {
|
|
15
19
|
outline: []
|
|
16
20
|
},
|
|
17
21
|
size: {
|
|
18
|
-
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
19
|
-
|
|
22
|
+
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
23
|
+
// Native only: subtract one hairline so the wider focus border doesn't shift layout.
|
|
24
|
+
'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
25
|
+
small: ['h-8 min-h-8 px-3 py-2 gap-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]', 'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
20
26
|
}
|
|
21
27
|
},
|
|
22
28
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_classVarianceAuthority","_primitives","selectTriggerVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","selectValueVariants","selectIconVariants","selectContentVariants","Platform","select","web","selectItemVariants","selectItemLabelVariants"],"sourceRoot":"../../../../src","sources":["components/Select/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAEA;;AAEO,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,2BAAG,EACtC,CACE,sEAAsE,EACtE,oBAAoB,EACpB,8BAA8B,EAC9B,wCAAwC,EACxCC,6BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,2BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_classVarianceAuthority","_primitives","selectTriggerVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","selectValueVariants","selectIconVariants","selectContentVariants","Platform","select","web","selectItemVariants","selectItemLabelVariants"],"sourceRoot":"../../../../src","sources":["components/Select/styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,16 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
|
|
5
|
-
export const inputRootVariants = cva(['w-full flex-row items-center overflow-hidden', 'bg-surface-primary', 'border-solid border-stroke-primary', 'web:border-default native:border-[length:var(--border-width-default)]', 'rounded-[var(--border-radius-default)]', TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
5
|
+
export const inputRootVariants = cva(['w-full flex-row items-center overflow-hidden', 'bg-surface-primary', 'border-solid border-stroke-primary', 'web:border-default native:border-[length:var(--border-width-default)]', 'rounded-[var(--border-radius-default)]', TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
6
|
+
// Web: inset ring avoids a border-width change so the shell never shifts on focus and
|
|
7
|
+
// no per-size padding compensation is required.
|
|
8
|
+
'web:data-[focus=true]:ring-inset', 'web:data-[focus=true]:ring-[length:var(--border-width-focused)]', 'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action', 'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
|
|
9
|
+
// Native: thicker border on focus; size variants below subtract a hairline of padding
|
|
10
|
+
// so layout doesn't shift by 1px.
|
|
11
|
+
'native:data-[focus=true]:border-[length:var(--border-width-focused)]', 'native:data-[focus=true]:data-[invalid=false]:border-stroke-action', 'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger', 'data-[invalid=true]:border-stroke-danger'], {
|
|
6
12
|
variants: {
|
|
7
13
|
variant: {
|
|
8
14
|
outline: []
|
|
9
15
|
},
|
|
10
16
|
size: {
|
|
11
|
-
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
12
|
-
|
|
13
|
-
'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
14
|
-
small: ['h-8 min-h-8 px-3 py-2 gap-1.5', 'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
17
|
+
default: ['h-11 min-h-11 px-4 py-3 gap-4', 'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
18
|
+
small: ['h-8 min-h-8 px-3 py-2 gap-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
15
19
|
}
|
|
16
20
|
},
|
|
17
21
|
defaultVariants: {
|
|
@@ -19,7 +23,14 @@ export const inputRootVariants = cva(['w-full flex-row items-center overflow-hid
|
|
|
19
23
|
size: 'default'
|
|
20
24
|
}
|
|
21
25
|
});
|
|
22
|
-
export const inputFieldVariants = cva([
|
|
26
|
+
export const inputFieldVariants = cva([
|
|
27
|
+
// `min-w-0` is critical on web: without it, a flex item defaults to `min-width: auto`,
|
|
28
|
+
// which is the input's intrinsic content width. When the shell ancestor uses
|
|
29
|
+
// `overflow-hidden` (for rounded corners), focusing the input via `<label htmlFor>`
|
|
30
|
+
// would make the browser auto-scroll the shell to bring the input into view — visually
|
|
31
|
+
// collapsing the left padding to zero. With `min-w-0` the field can shrink below its
|
|
32
|
+
// intrinsic width so the shell never overflows and never gets scrolled.
|
|
33
|
+
'flex-1 min-w-0 justify-center bg-transparent p-0', 'text-content-primary', 'placeholder:text-content-tertiary', 'web:outline-none', 'tracking-normal'], {
|
|
23
34
|
variants: {
|
|
24
35
|
size: {
|
|
25
36
|
default: 'text-[0.875rem]',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cva","DISABLED_CURSOR","TRANSITION_COLORS","inputRootVariants","variants","variant","outline","size","default","small","defaultVariants","inputFieldVariants","inputSlotVariants","inputIconVariants","inputFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Input/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AACjE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,yBAAyB;AAE5E,OAAO,MAAMC,iBAAiB,GAAGH,GAAG,CAClC,CACE,8CAA8C,EAC9C,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCE,iBAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDD,eAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF,
|
|
1
|
+
{"version":3,"names":["cva","DISABLED_CURSOR","TRANSITION_COLORS","inputRootVariants","variants","variant","outline","size","default","small","defaultVariants","inputFieldVariants","inputSlotVariants","inputIconVariants","inputFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Input/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AACjE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,yBAAyB;AAE5E,OAAO,MAAMC,iBAAiB,GAAGH,GAAG,CAClC,CACE,8CAA8C,EAC9C,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCE,iBAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDD,eAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,8DAA8D;AAC9D;AACA;AACA,sEAAsE,EACtE,oEAAoE,EACpE,mEAAmE,EACnE,0CAA0C,CAC3C,EACD;EACEG,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,+BAA+B,EAC/B,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,+BAA+B,EAC/B,wEAAwE,EACxE,wEAAwE;IAE5E;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE,SAAS;IAClBE,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAED,OAAO,MAAMI,kBAAkB,GAAGX,GAAG,CACnC;AACE;AACA;AACA;AACA;AACA;AACA;AACA,kDAAkD,EAClD,sBAAsB,EACtB,mCAAmC,EACnC,kBAAkB,EAClB,iBAAiB,CAClB,EACD;EACEI,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,iBAAiB;MAC1BC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGZ,GAAG,CAAC,CAAC,kDAAkD,CAAC,CAAC;AAE1F,OAAO,MAAMa,iBAAiB,GAAGb,GAAG,CAAC,CAAC,uBAAuB,CAAC,EAAE;EAC9DI,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,QAAQ;MACjBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEF,OAAO,MAAMO,6BAA6B,GAAGd,GAAG,CAAC,CAAC,yBAAyB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -6,14 +6,20 @@ import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
|
|
|
6
6
|
|
|
7
7
|
// ── Trigger ─────────────────────────────────────────────────
|
|
8
8
|
|
|
9
|
-
export const selectTriggerVariants = cva(['flex w-full min-w-0 flex-row items-center justify-between text-start', 'bg-surface-primary', 'border border-stroke-primary', 'rounded-[var(--border-radius-default)]', TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:
|
|
9
|
+
export const selectTriggerVariants = cva(['flex w-full min-w-0 flex-row items-center justify-between text-start', 'bg-surface-primary', 'border border-stroke-primary', 'rounded-[var(--border-radius-default)]', TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
10
|
+
// Web: inset ring avoids a border-width change so no padding compensation is needed.
|
|
11
|
+
'web:data-[focus=true]:ring-inset', 'web:data-[focus=true]:ring-[length:var(--border-width-focused)]', 'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action', 'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger', 'web:data-[state=open]:ring-inset', 'web:data-[state=open]:ring-[length:var(--border-width-focused)]', 'web:data-[state=open]:data-[invalid=false]:ring-stroke-action', 'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
|
|
12
|
+
// Native: thicker border; size variants below compensate the layout shift.
|
|
13
|
+
'native:data-[focus=true]:border-[length:var(--border-width-focused)]', 'native:data-[focus=true]:data-[invalid=false]:border-stroke-action', 'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger', 'native:data-[state=open]:border-[length:var(--border-width-focused)]', 'native:data-[state=open]:data-[invalid=false]:border-stroke-action', 'native:data-[state=open]:data-[invalid=true]:border-stroke-danger', 'data-[invalid=true]:border-stroke-danger'], {
|
|
10
14
|
variants: {
|
|
11
15
|
variant: {
|
|
12
16
|
outline: []
|
|
13
17
|
},
|
|
14
18
|
size: {
|
|
15
|
-
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
16
|
-
|
|
19
|
+
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
20
|
+
// Native only: subtract one hairline so the wider focus border doesn't shift layout.
|
|
21
|
+
'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
22
|
+
small: ['h-8 min-h-8 px-3 py-2 gap-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]', 'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
17
23
|
}
|
|
18
24
|
},
|
|
19
25
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Platform","cva","DISABLED_CURSOR","TRANSITION_COLORS","selectTriggerVariants","variants","variant","outline","size","default","small","defaultVariants","selectValueVariants","selectIconVariants","selectContentVariants","select","web","selectItemVariants","selectItemLabelVariants"],"sourceRoot":"../../../../src","sources":["components/Select/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAA2B,0BAA0B;AACjE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,yBAAyB;;AAE5E;;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,GAAG,CACtC,CACE,sEAAsE,EACtE,oBAAoB,EACpB,8BAA8B,EAC9B,wCAAwC,EACxCE,iBAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDD,eAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,
|
|
1
|
+
{"version":3,"names":["Platform","cva","DISABLED_CURSOR","TRANSITION_COLORS","selectTriggerVariants","variants","variant","outline","size","default","small","defaultVariants","selectValueVariants","selectIconVariants","selectContentVariants","select","web","selectItemVariants","selectItemLabelVariants"],"sourceRoot":"../../../../src","sources":["components/Select/styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;8EAkD7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAyB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,oFAA4D,CAAC;AAE3F,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAmC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;8EA2DjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.81",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@gorhom/bottom-sheet": "^5.2.6",
|
|
68
68
|
"class-variance-authority": "^0.7.1",
|
|
69
69
|
"uniwind": "1.10.0",
|
|
70
|
-
"@cdx-ui/primitives": "0.0.1-beta.
|
|
71
|
-
"@cdx-ui/
|
|
72
|
-
"@cdx-ui/
|
|
70
|
+
"@cdx-ui/primitives": "0.0.1-beta.81",
|
|
71
|
+
"@cdx-ui/utils": "0.0.1-beta.81",
|
|
72
|
+
"@cdx-ui/icons": "0.0.1-beta.81"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@react-navigation/bottom-tabs": "*",
|
|
@@ -15,8 +15,17 @@ export const inputRootVariants = cva(
|
|
|
15
15
|
'data-[readonly=true]:cursor-default',
|
|
16
16
|
'data-[readonly=true]:bg-surface-secondary',
|
|
17
17
|
'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
// Web: inset ring avoids a border-width change so the shell never shifts on focus and
|
|
19
|
+
// no per-size padding compensation is required.
|
|
20
|
+
'web:data-[focus=true]:ring-inset',
|
|
21
|
+
'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
|
|
22
|
+
'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
|
|
23
|
+
'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
|
|
24
|
+
// Native: thicker border on focus; size variants below subtract a hairline of padding
|
|
25
|
+
// so layout doesn't shift by 1px.
|
|
26
|
+
'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
|
|
27
|
+
'native:data-[focus=true]:data-[invalid=false]:border-stroke-action',
|
|
28
|
+
'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
|
|
20
29
|
'data-[invalid=true]:border-stroke-danger',
|
|
21
30
|
],
|
|
22
31
|
{
|
|
@@ -27,14 +36,13 @@ export const inputRootVariants = cva(
|
|
|
27
36
|
size: {
|
|
28
37
|
default: [
|
|
29
38
|
'h-11 min-h-11 px-4 py-3 gap-4',
|
|
30
|
-
|
|
31
|
-
'data-[focus=true]:
|
|
32
|
-
'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
39
|
+
'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
|
|
40
|
+
'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
33
41
|
],
|
|
34
42
|
small: [
|
|
35
43
|
'h-8 min-h-8 px-3 py-2 gap-1.5',
|
|
36
|
-
'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
37
|
-
'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
|
|
44
|
+
'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
45
|
+
'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
|
|
38
46
|
],
|
|
39
47
|
},
|
|
40
48
|
},
|
|
@@ -47,7 +55,13 @@ export const inputRootVariants = cva(
|
|
|
47
55
|
|
|
48
56
|
export const inputFieldVariants = cva(
|
|
49
57
|
[
|
|
50
|
-
|
|
58
|
+
// `min-w-0` is critical on web: without it, a flex item defaults to `min-width: auto`,
|
|
59
|
+
// which is the input's intrinsic content width. When the shell ancestor uses
|
|
60
|
+
// `overflow-hidden` (for rounded corners), focusing the input via `<label htmlFor>`
|
|
61
|
+
// would make the browser auto-scroll the shell to bring the input into view — visually
|
|
62
|
+
// collapsing the left padding to zero. With `min-w-0` the field can shrink below its
|
|
63
|
+
// intrinsic width so the shell never overflows and never gets scrolled.
|
|
64
|
+
'flex-1 min-w-0 justify-center bg-transparent p-0',
|
|
51
65
|
'text-content-primary',
|
|
52
66
|
'placeholder:text-content-tertiary',
|
|
53
67
|
'web:outline-none',
|
|
@@ -16,11 +16,23 @@ export const selectTriggerVariants = cva(
|
|
|
16
16
|
DISABLED_CURSOR,
|
|
17
17
|
'data-[readonly=true]:cursor-default',
|
|
18
18
|
'data-[readonly=true]:bg-surface-secondary',
|
|
19
|
-
'web:hover:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
20
|
-
|
|
21
|
-
'data-[focus=true]:
|
|
22
|
-
'data-[
|
|
23
|
-
'data-[
|
|
19
|
+
'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
|
|
20
|
+
// Web: inset ring avoids a border-width change so no padding compensation is needed.
|
|
21
|
+
'web:data-[focus=true]:ring-inset',
|
|
22
|
+
'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
|
|
23
|
+
'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
|
|
24
|
+
'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
|
|
25
|
+
'web:data-[state=open]:ring-inset',
|
|
26
|
+
'web:data-[state=open]:ring-[length:var(--border-width-focused)]',
|
|
27
|
+
'web:data-[state=open]:data-[invalid=false]:ring-stroke-action',
|
|
28
|
+
'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
|
|
29
|
+
// Native: thicker border; size variants below compensate the layout shift.
|
|
30
|
+
'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
|
|
31
|
+
'native:data-[focus=true]:data-[invalid=false]:border-stroke-action',
|
|
32
|
+
'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
|
|
33
|
+
'native:data-[state=open]:border-[length:var(--border-width-focused)]',
|
|
34
|
+
'native:data-[state=open]:data-[invalid=false]:border-stroke-action',
|
|
35
|
+
'native:data-[state=open]:data-[invalid=true]:border-stroke-danger',
|
|
24
36
|
'data-[invalid=true]:border-stroke-danger',
|
|
25
37
|
],
|
|
26
38
|
{
|
|
@@ -31,17 +43,18 @@ export const selectTriggerVariants = cva(
|
|
|
31
43
|
size: {
|
|
32
44
|
default: [
|
|
33
45
|
'h-11 min-h-11 px-4 py-3 gap-4',
|
|
34
|
-
|
|
35
|
-
'data-[focus=true]:
|
|
36
|
-
'data-[
|
|
37
|
-
'data-[state=open]:
|
|
46
|
+
// Native only: subtract one hairline so the wider focus border doesn't shift layout.
|
|
47
|
+
'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
|
|
48
|
+
'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
49
|
+
'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
|
|
50
|
+
'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
38
51
|
],
|
|
39
52
|
small: [
|
|
40
53
|
'h-8 min-h-8 px-3 py-2 gap-1.5',
|
|
41
|
-
'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
42
|
-
'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
|
|
43
|
-
'data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
44
|
-
'data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
|
|
54
|
+
'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
55
|
+
'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
|
|
56
|
+
'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
|
|
57
|
+
'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
|
|
45
58
|
],
|
|
46
59
|
},
|
|
47
60
|
},
|