@uxf/ui 1.0.0-beta.64 → 1.0.0-beta.66

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.
Files changed (6) hide show
  1. package/checkbox/checkbox.js +3 -2
  2. package/css/checkbox.css +1 -1
  3. package/css/combobox.css +27 -7
  4. package/css/dropdown.css +1 -1
  5. package/css/select.css +12 -5
  6. package/package.json +1 -1
package/checkbox/checkbox.js CHANGED
@@ -14,9 +14,10 @@ function CheckIcon() {
14
14
  react_2.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
15
15
  }
16
16
  exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
17
+ var _a;
17
18
  return (react_2.default.createElement(react_1.Switch.Group, null,
18
- react_2.default.createElement("div", { className: "uxf-checkbox__wrapper" },
19
- react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox", props.className), disabled: props.isDisabled, onChange: props.onChange, ref: ref, style: props.style },
19
+ react_2.default.createElement("div", { className: `uxf-checkbox__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
20
+ react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox"), disabled: props.isDisabled, onChange: props.onChange, ref: ref, style: props.style },
20
21
  react_2.default.createElement("span", { className: "uxf-checkbox__icon" },
21
22
  react_2.default.createElement(CheckIcon, null))),
22
23
  react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));
package/css/checkbox.css CHANGED
@@ -3,7 +3,7 @@
3
3
  focus-visible:ring-offset-2 focus-visible:ring-2;
4
4
 
5
5
  &__wrapper {
6
- @apply flex items-center justify-between space-x-2 p-4;
6
+ @apply flex items-center justify-between space-x-3;
7
7
  }
8
8
 
9
9
  &__label {
package/css/combobox.css CHANGED
@@ -5,18 +5,18 @@
5
5
  @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
6
6
 
7
7
  :root .light & {
8
- @apply bg-gray-100 text-gray-900 before:border-gray-200;
8
+ @apply bg-gray-100 text-lightHigh before:border-gray-200;
9
9
 
10
10
  .is-empty {
11
- @apply text-gray-400;
11
+ @apply text-lightLow;
12
12
  }
13
13
  }
14
14
 
15
15
  :root .dark & {
16
- @apply bg-gray-800 text-gray-300 before:border-gray-700;
16
+ @apply bg-gray-800 text-darkHigh before:border-gray-700;
17
17
 
18
18
  .is-empty {
19
- @apply text-gray-400;
19
+ @apply text-darkLow;
20
20
  }
21
21
  }
22
22
 
@@ -56,18 +56,38 @@
56
56
  @apply flex-grow bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none;
57
57
 
58
58
  :root .light & {
59
- @apply placeholder:text-gray-400;
59
+ @apply placeholder:text-lightLow;
60
60
  }
61
61
  :root .dark & {
62
- @apply placeholder:text-gray-400;
62
+ @apply placeholder:text-darkLow;
63
63
  }
64
64
  }
65
65
 
66
66
  &__button-icon {
67
- @apply text-gray-600 transition duration-300;
67
+ @apply transition duration-300;
68
+
69
+ :root .light & {
70
+ @apply text-lightMedium;
71
+ }
72
+ :root .dark & {
73
+ @apply text-darkMedium;
74
+ }
68
75
 
69
76
  &.is-open {
70
77
  @apply -scale-y-100;
71
78
  }
72
79
  }
80
+
81
+ :root .dark & {
82
+ input:-webkit-autofill {
83
+ &,
84
+ &:hover,
85
+ &:focus {
86
+ -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
87
+ caret-color: white;
88
+ margin: 1px 0;
89
+ -webkit-text-fill-color: theme("colors.gray.300");
90
+ }
91
+ }
92
+ }
73
93
  }
package/css/dropdown.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  &__item {
13
- @apply relative cursor-default select-none py-2 px-4;
13
+ @apply relative cursor-default select-none py-3 px-4 text-gray-800;
14
14
 
15
15
  &.is-active {
16
16
  @apply bg-primary-500 text-white;
package/css/select.css CHANGED
@@ -5,18 +5,18 @@
5
5
  @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
6
6
 
7
7
  :root .light & {
8
- @apply bg-gray-100 text-gray-900 before:border-gray-200 focus-visible:before:border-none focus-visible:ring-primary-500;
8
+ @apply bg-gray-100 text-lightHigh before:border-gray-200 focus-visible:before:border-none focus-visible:ring-primary-500;
9
9
 
10
10
  .is-empty {
11
- @apply text-gray-400;
11
+ @apply text-lightLow;
12
12
  }
13
13
  }
14
14
 
15
15
  :root .dark & {
16
- @apply bg-gray-800 text-gray-300 before:border-gray-700 focus-visible:ring-primary-500;
16
+ @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
17
17
 
18
18
  .is-empty {
19
- @apply text-gray-400;
19
+ @apply text-darkLow;
20
20
  }
21
21
  }
22
22
 
@@ -45,7 +45,14 @@
45
45
  }
46
46
 
47
47
  &__button-icon {
48
- @apply text-gray-600 transition duration-300;
48
+ @apply transition duration-300;
49
+
50
+ :root .light & {
51
+ @apply text-lightMedium;
52
+ }
53
+ :root .dark & {
54
+ @apply text-darkMedium;
55
+ }
49
56
 
50
57
  &.is-open {
51
58
  @apply -scale-y-100;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.64",
3
+ "version": "1.0.0-beta.66",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"