@mekari/pixel3-theme 0.1.0-dev.0 → 0.1.1-dev.0
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/index.js +62 -5
- package/dist/index.mjs +62 -5
- package/package.json +1 -1
- package/src/recipes/autocomplete.ts +4 -1
- package/src/recipes/input.ts +60 -6
package/dist/index.js
CHANGED
|
@@ -632,6 +632,14 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
|
|
|
632
632
|
alignItems: "center",
|
|
633
633
|
_isFullWidth: {
|
|
634
634
|
width: "full"
|
|
635
|
+
},
|
|
636
|
+
"&[data-with-clearable=true]": {
|
|
637
|
+
"& > [data-pixel-component=MpInputControl]": {
|
|
638
|
+
paddingRight: "44px"
|
|
639
|
+
},
|
|
640
|
+
"& > [data-pixel-component=MpInputClear]": {
|
|
641
|
+
"--mp-input--right": "12px"
|
|
642
|
+
}
|
|
635
643
|
}
|
|
636
644
|
},
|
|
637
645
|
control: {
|
|
@@ -646,8 +654,7 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
|
|
|
646
654
|
borderWidth: "1px",
|
|
647
655
|
borderColor: "inherit",
|
|
648
656
|
borderRadius: "sm",
|
|
649
|
-
|
|
650
|
-
paddingLeft: "var(--mp-input--padding-left)",
|
|
657
|
+
paddingInline: "12px",
|
|
651
658
|
appearance: "none",
|
|
652
659
|
transition: "all 250ms",
|
|
653
660
|
_isFullWidth: {
|
|
@@ -687,7 +694,10 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
|
|
|
687
694
|
backgroundColor: "white",
|
|
688
695
|
borderColor: "gray.100",
|
|
689
696
|
_hover: {
|
|
690
|
-
borderColor: "gray.400"
|
|
697
|
+
borderColor: "gray.400",
|
|
698
|
+
_invalid: {
|
|
699
|
+
borderColor: "red.400"
|
|
700
|
+
}
|
|
691
701
|
},
|
|
692
702
|
_focus: {
|
|
693
703
|
borderColor: "blue.500",
|
|
@@ -749,7 +759,51 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
|
|
|
749
759
|
position: "relative",
|
|
750
760
|
display: "inline-flex",
|
|
751
761
|
alignItems: "center",
|
|
752
|
-
width: "full"
|
|
762
|
+
width: "full",
|
|
763
|
+
"&[data-with-left-addon=true]": {
|
|
764
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
765
|
+
paddingLeft: "calc(var(--mp-input-offset--left) + 24px)"
|
|
766
|
+
}
|
|
767
|
+
},
|
|
768
|
+
"&[data-with-clearable=true]": {
|
|
769
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
770
|
+
paddingRight: "44px"
|
|
771
|
+
},
|
|
772
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
|
|
773
|
+
"--mp-input--right": "12px"
|
|
774
|
+
}
|
|
775
|
+
},
|
|
776
|
+
"&[data-with-left-bg-addon=true]": {
|
|
777
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
778
|
+
paddingLeft: "calc(var(--mp-input-offset--left) + 12px)"
|
|
779
|
+
}
|
|
780
|
+
},
|
|
781
|
+
"&[data-with-right-addon=true]": {
|
|
782
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
783
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
|
|
784
|
+
},
|
|
785
|
+
"&[data-with-clearable=true]": {
|
|
786
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
787
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
|
|
788
|
+
},
|
|
789
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
|
|
790
|
+
"--mp-input--right": "calc(var(--mp-input-offset--right) + 24px)"
|
|
791
|
+
}
|
|
792
|
+
}
|
|
793
|
+
},
|
|
794
|
+
"&[data-with-right-bg-addon=true]": {
|
|
795
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
796
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
|
|
797
|
+
},
|
|
798
|
+
"&[data-with-clearable=true]": {
|
|
799
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
800
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
|
|
801
|
+
},
|
|
802
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
|
|
803
|
+
"--mp-input--right": "calc(var(--mp-input-offset--right) + 16px)"
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
}
|
|
753
807
|
}
|
|
754
808
|
},
|
|
755
809
|
variants: {},
|
|
@@ -3575,7 +3629,7 @@ var import_dev36 = require("@pandacss/dev");
|
|
|
3575
3629
|
var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
|
|
3576
3630
|
className: "autocomplete",
|
|
3577
3631
|
jsx: ["MpAutocomplete", "mp-autocomplete"],
|
|
3578
|
-
slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading"],
|
|
3632
|
+
slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
|
|
3579
3633
|
base: {
|
|
3580
3634
|
groupText: {
|
|
3581
3635
|
px: 3,
|
|
@@ -3613,6 +3667,9 @@ var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
|
|
|
3613
3667
|
display: "flex",
|
|
3614
3668
|
alignItems: "center",
|
|
3615
3669
|
gap: 3
|
|
3670
|
+
},
|
|
3671
|
+
input: {
|
|
3672
|
+
cursor: "pointer"
|
|
3616
3673
|
}
|
|
3617
3674
|
}
|
|
3618
3675
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -606,6 +606,14 @@ var inputSlotRecipe = defineSlotRecipe3({
|
|
|
606
606
|
alignItems: "center",
|
|
607
607
|
_isFullWidth: {
|
|
608
608
|
width: "full"
|
|
609
|
+
},
|
|
610
|
+
"&[data-with-clearable=true]": {
|
|
611
|
+
"& > [data-pixel-component=MpInputControl]": {
|
|
612
|
+
paddingRight: "44px"
|
|
613
|
+
},
|
|
614
|
+
"& > [data-pixel-component=MpInputClear]": {
|
|
615
|
+
"--mp-input--right": "12px"
|
|
616
|
+
}
|
|
609
617
|
}
|
|
610
618
|
},
|
|
611
619
|
control: {
|
|
@@ -620,8 +628,7 @@ var inputSlotRecipe = defineSlotRecipe3({
|
|
|
620
628
|
borderWidth: "1px",
|
|
621
629
|
borderColor: "inherit",
|
|
622
630
|
borderRadius: "sm",
|
|
623
|
-
|
|
624
|
-
paddingLeft: "var(--mp-input--padding-left)",
|
|
631
|
+
paddingInline: "12px",
|
|
625
632
|
appearance: "none",
|
|
626
633
|
transition: "all 250ms",
|
|
627
634
|
_isFullWidth: {
|
|
@@ -661,7 +668,10 @@ var inputSlotRecipe = defineSlotRecipe3({
|
|
|
661
668
|
backgroundColor: "white",
|
|
662
669
|
borderColor: "gray.100",
|
|
663
670
|
_hover: {
|
|
664
|
-
borderColor: "gray.400"
|
|
671
|
+
borderColor: "gray.400",
|
|
672
|
+
_invalid: {
|
|
673
|
+
borderColor: "red.400"
|
|
674
|
+
}
|
|
665
675
|
},
|
|
666
676
|
_focus: {
|
|
667
677
|
borderColor: "blue.500",
|
|
@@ -723,7 +733,51 @@ var inputGroupSlotRecipe = defineSlotRecipe3({
|
|
|
723
733
|
position: "relative",
|
|
724
734
|
display: "inline-flex",
|
|
725
735
|
alignItems: "center",
|
|
726
|
-
width: "full"
|
|
736
|
+
width: "full",
|
|
737
|
+
"&[data-with-left-addon=true]": {
|
|
738
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
739
|
+
paddingLeft: "calc(var(--mp-input-offset--left) + 24px)"
|
|
740
|
+
}
|
|
741
|
+
},
|
|
742
|
+
"&[data-with-clearable=true]": {
|
|
743
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
744
|
+
paddingRight: "44px"
|
|
745
|
+
},
|
|
746
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
|
|
747
|
+
"--mp-input--right": "12px"
|
|
748
|
+
}
|
|
749
|
+
},
|
|
750
|
+
"&[data-with-left-bg-addon=true]": {
|
|
751
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
752
|
+
paddingLeft: "calc(var(--mp-input-offset--left) + 12px)"
|
|
753
|
+
}
|
|
754
|
+
},
|
|
755
|
+
"&[data-with-right-addon=true]": {
|
|
756
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
757
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
|
|
758
|
+
},
|
|
759
|
+
"&[data-with-clearable=true]": {
|
|
760
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
761
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
|
|
762
|
+
},
|
|
763
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
|
|
764
|
+
"--mp-input--right": "calc(var(--mp-input-offset--right) + 24px)"
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
},
|
|
768
|
+
"&[data-with-right-bg-addon=true]": {
|
|
769
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
770
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
|
|
771
|
+
},
|
|
772
|
+
"&[data-with-clearable=true]": {
|
|
773
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
|
|
774
|
+
paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
|
|
775
|
+
},
|
|
776
|
+
"& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
|
|
777
|
+
"--mp-input--right": "calc(var(--mp-input-offset--right) + 16px)"
|
|
778
|
+
}
|
|
779
|
+
}
|
|
780
|
+
}
|
|
727
781
|
}
|
|
728
782
|
},
|
|
729
783
|
variants: {},
|
|
@@ -3549,7 +3603,7 @@ import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
|
|
|
3549
3603
|
var autocompleteSlotRecipe = defineSlotRecipe24({
|
|
3550
3604
|
className: "autocomplete",
|
|
3551
3605
|
jsx: ["MpAutocomplete", "mp-autocomplete"],
|
|
3552
|
-
slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading"],
|
|
3606
|
+
slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
|
|
3553
3607
|
base: {
|
|
3554
3608
|
groupText: {
|
|
3555
3609
|
px: 3,
|
|
@@ -3587,6 +3641,9 @@ var autocompleteSlotRecipe = defineSlotRecipe24({
|
|
|
3587
3641
|
display: "flex",
|
|
3588
3642
|
alignItems: "center",
|
|
3589
3643
|
gap: 3
|
|
3644
|
+
},
|
|
3645
|
+
input: {
|
|
3646
|
+
cursor: "pointer"
|
|
3590
3647
|
}
|
|
3591
3648
|
}
|
|
3592
3649
|
});
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
|
|
|
3
3
|
const autocompleteSlotRecipe = defineSlotRecipe({
|
|
4
4
|
className: 'autocomplete',
|
|
5
5
|
jsx: ['MpAutocomplete', 'mp-autocomplete'],
|
|
6
|
-
slots: ['groupText', 'popoverContent', 'buttonAction', 'emptyText', 'contentLoading'],
|
|
6
|
+
slots: ['groupText', 'popoverContent', 'buttonAction', 'emptyText', 'contentLoading', 'input'],
|
|
7
7
|
base: {
|
|
8
8
|
groupText: {
|
|
9
9
|
px: 3, py: 2
|
|
@@ -40,6 +40,9 @@ const autocompleteSlotRecipe = defineSlotRecipe({
|
|
|
40
40
|
display: 'flex',
|
|
41
41
|
alignItems: 'center',
|
|
42
42
|
gap: 3
|
|
43
|
+
},
|
|
44
|
+
input: {
|
|
45
|
+
cursor: 'pointer'
|
|
43
46
|
}
|
|
44
47
|
},
|
|
45
48
|
})
|
package/src/recipes/input.ts
CHANGED
|
@@ -11,7 +11,15 @@ const inputSlotRecipe = defineSlotRecipe({
|
|
|
11
11
|
alignItems: 'center',
|
|
12
12
|
_isFullWidth: {
|
|
13
13
|
width: 'full'
|
|
14
|
-
}
|
|
14
|
+
},
|
|
15
|
+
'&[data-with-clearable=true]': {
|
|
16
|
+
'& > [data-pixel-component=MpInputControl]': {
|
|
17
|
+
paddingRight: '44px'
|
|
18
|
+
},
|
|
19
|
+
'& > [data-pixel-component=MpInputClear]': {
|
|
20
|
+
'--mp-input--right': '12px'
|
|
21
|
+
}
|
|
22
|
+
},
|
|
15
23
|
},
|
|
16
24
|
control: {
|
|
17
25
|
minWidth: '22',
|
|
@@ -25,13 +33,12 @@ const inputSlotRecipe = defineSlotRecipe({
|
|
|
25
33
|
borderWidth: '1px',
|
|
26
34
|
borderColor: 'inherit',
|
|
27
35
|
borderRadius: 'sm',
|
|
28
|
-
|
|
29
|
-
paddingLeft: 'var(--mp-input--padding-left)',
|
|
36
|
+
paddingInline: '12px',
|
|
30
37
|
appearance: 'none',
|
|
31
38
|
transition: 'all 250ms',
|
|
32
39
|
_isFullWidth: {
|
|
33
40
|
width: 'full'
|
|
34
|
-
}
|
|
41
|
+
},
|
|
35
42
|
},
|
|
36
43
|
clear: {
|
|
37
44
|
position: 'absolute!',
|
|
@@ -66,7 +73,10 @@ const inputSlotRecipe = defineSlotRecipe({
|
|
|
66
73
|
backgroundColor: 'white',
|
|
67
74
|
borderColor: 'gray.100',
|
|
68
75
|
_hover: {
|
|
69
|
-
borderColor: 'gray.400'
|
|
76
|
+
borderColor: 'gray.400',
|
|
77
|
+
_invalid: {
|
|
78
|
+
borderColor: 'red.400'
|
|
79
|
+
}
|
|
70
80
|
},
|
|
71
81
|
_focus: {
|
|
72
82
|
borderColor: 'blue.500',
|
|
@@ -129,7 +139,51 @@ const inputGroupSlotRecipe = defineSlotRecipe({
|
|
|
129
139
|
position: 'relative',
|
|
130
140
|
display: 'inline-flex',
|
|
131
141
|
alignItems: 'center',
|
|
132
|
-
width: 'full'
|
|
142
|
+
width: 'full',
|
|
143
|
+
'&[data-with-left-addon=true]': {
|
|
144
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
145
|
+
paddingLeft: 'calc(var(--mp-input-offset--left) + 24px)'
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
'&[data-with-clearable=true]': {
|
|
149
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
150
|
+
paddingRight: '44px'
|
|
151
|
+
},
|
|
152
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
|
|
153
|
+
'--mp-input--right': '12px'
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
'&[data-with-left-bg-addon=true]': {
|
|
157
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
158
|
+
paddingLeft: 'calc(var(--mp-input-offset--left) + 12px)'
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
'&[data-with-right-addon=true]': {
|
|
162
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
163
|
+
paddingRight: 'calc(var(--mp-input-offset--right) + 24px)'
|
|
164
|
+
},
|
|
165
|
+
'&[data-with-clearable=true]': {
|
|
166
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
167
|
+
paddingRight: 'calc(var(--mp-input-offset--right) + 54px)'
|
|
168
|
+
},
|
|
169
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
|
|
170
|
+
'--mp-input--right': 'calc(var(--mp-input-offset--right) + 24px)'
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
'&[data-with-right-bg-addon=true]': {
|
|
175
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
176
|
+
paddingRight: 'calc(var(--mp-input-offset--right) + 24px)'
|
|
177
|
+
},
|
|
178
|
+
'&[data-with-clearable=true]': {
|
|
179
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]': {
|
|
180
|
+
paddingRight: 'calc(var(--mp-input-offset--right) + 46px)'
|
|
181
|
+
},
|
|
182
|
+
'& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]': {
|
|
183
|
+
'--mp-input--right': 'calc(var(--mp-input-offset--right) + 16px)'
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
},
|
|
133
187
|
}
|
|
134
188
|
},
|
|
135
189
|
variants: {},
|