@uxf/ui 1.0.0-beta.80 → 1.0.0-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.
Files changed (15) hide show
  1. package/button/button.d.ts +1 -1
  2. package/button/button.js +2 -2
  3. package/button/button.stories.d.ts +7 -0
  4. package/button/button.stories.js +17 -8
  5. package/button/theme.d.ts +1 -2
  6. package/css/button.css +78 -109
  7. package/css/button.old.css +231 -0
  8. package/date-picker-input/date-picker-decade.js +2 -2
  9. package/date-picker-input/date-picker-month.js +2 -2
  10. package/date-picker-input/date-picker-year.js +2 -2
  11. package/icon/icon.stories.d.ts +7 -0
  12. package/icon/icon.stories.js +6 -0
  13. package/package.json +1 -1
  14. package/time-picker-input/time-picker.js +4 -4
  15. package/utils/storybook-config.js +2 -2
package/button/button.d.ts CHANGED
@@ -7,8 +7,8 @@ export declare type ButtonColor = keyof ButtonColors;
7
7
  export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
8
8
  color?: ButtonColor;
9
9
  isFullWidth?: boolean;
10
+ isIconButton?: boolean;
10
11
  size?: ButtonSize;
11
12
  variant?: ButtonVariant;
12
- iconButton?: boolean;
13
13
  }
14
14
  export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
package/button/button.js CHANGED
@@ -10,10 +10,10 @@ const react_1 = __importDefault(require("react"));
10
10
  const forwardRef_1 = require("@uxf/core/utils/forwardRef");
11
11
  exports.Button = (0, forwardRef_1.forwardRef)("Button", (props, ref) => {
12
12
  // eslint-disable-next-line react/destructuring-assignment
13
- const { color, iconButton, isFullWidth, size, variant, className, ...restProps } = props;
13
+ const { color, isIconButton, isFullWidth, size, variant, className, ...restProps } = props;
14
14
  const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
15
15
  ...restProps,
16
- className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, iconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
16
+ className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
17
17
  });
18
18
  return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
19
19
  typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),
package/button/button.stories.d.ts CHANGED
@@ -1,7 +1,14 @@
1
+ /// <reference types="mdx" />
1
2
  import React from "react";
3
+ import Docs from "./button.docs.mdx";
2
4
  declare const _default: {
3
5
  title: string;
4
6
  component: React.ForwardRefExoticComponent<import("@uxf/ui/button").ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
7
+ parameters: {
8
+ docs: {
9
+ page: typeof Docs;
10
+ };
11
+ };
5
12
  };
6
13
  export default _default;
7
14
  export declare function Default(): JSX.Element;
package/button/button.stories.js CHANGED
@@ -22,19 +22,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
29
  exports.Default = void 0;
27
30
  const react_1 = __importStar(require("react"));
28
31
  const button_1 = require("@uxf/ui/button");
29
32
  const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
30
33
  const icon_1 = require("@uxf/ui/icon");
34
+ const button_docs_mdx_1 = __importDefault(require("./button.docs.mdx"));
31
35
  exports.default = {
32
36
  title: "UI/Button",
33
37
  component: button_1.Button,
38
+ parameters: {
39
+ docs: {
40
+ page: button_docs_mdx_1.default,
41
+ },
42
+ },
34
43
  };
35
44
  function Default() {
36
45
  const config = (0, storybook_config_1.useStorybookConfig)("Button");
37
- const allButtons = (react_1.default.createElement(react_1.default.Fragment, null, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
46
+ return (react_1.default.createElement(react_1.default.Fragment, null, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
38
47
  react_1.default.createElement("div", { className: "text-sm" },
39
48
  "Variant: ",
40
49
  react_1.default.createElement("span", { className: "font-semibold" }, variant),
@@ -48,12 +57,12 @@ function Default() {
48
57
  react_1.default.createElement(button_1.Button, { color: color, onClick: () => void null, size: size, variant: variant }, "Default"),
49
58
  react_1.default.createElement(button_1.Button, { color: color, loading: true, onClick: () => void null, size: size, variant: variant }, "Loading"),
50
59
  react_1.default.createElement(button_1.Button, { color: color, disabled: true, onClick: () => void null, size: size, variant: variant }, "Disabled"),
51
- react_1.default.createElement(button_1.Button, { color: color, iconButton: true, onClick: () => void null, size: size, variant: variant },
52
- react_1.default.createElement(icon_1.Icon, { name: "check", size: size === "xs" || size === "sm" ? 16 : 24 }))),
53
- react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: () => void null, size: size, variant: variant }, "Custom width"),
54
- react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: () => void null, size: size, variant: variant }, "Full width"))))))))))));
55
- return (react_1.default.createElement("div", { className: "flex flex-col space-x-8 lg:flex-row" },
56
- react_1.default.createElement("div", { className: "light space-y-2 rounded bg-white p-8" }, allButtons),
57
- react_1.default.createElement("div", { className: "dark space-y-2 rounded bg-gray-900 p-8 text-white" }, allButtons)));
60
+ react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: () => void null, size: size, variant: variant },
61
+ react_1.default.createElement(icon_1.Icon, { name: "check" })),
62
+ react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: () => void null, size: size, variant: variant, loading: true },
63
+ react_1.default.createElement(icon_1.Icon, { name: "check" })),
64
+ react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: () => void null, size: size, variant: variant }, "Custom width")),
65
+ react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: () => void null, size: size, variant: variant }, "Full width"),
66
+ react_1.default.createElement("hr", null))))))))))));
58
67
  }
59
68
  exports.Default = Default;
package/button/theme.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export interface ButtonVariants {
2
2
  default: true;
3
+ white: true;
3
4
  outlined: true;
4
5
  text: true;
5
6
  }
@@ -12,8 +13,6 @@ export interface ButtonSizes {
12
13
  }
13
14
  export interface ButtonColors {
14
15
  default: true;
15
- white: true;
16
16
  success: true;
17
- warning: true;
18
17
  error: true;
19
18
  }
package/css/button.css CHANGED
@@ -5,9 +5,11 @@
5
5
  }
6
6
 
7
7
  .uxf-button {
8
- @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
9
- focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
10
- before:transition;
8
+ @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
9
+
10
+ .uxf-icon {
11
+ @apply h-6;
12
+ }
11
13
 
12
14
  &__text {
13
15
  @apply truncate;
@@ -21,6 +23,12 @@
21
23
  @apply pointer-events-none;
22
24
  }
23
25
 
26
+ &.uxf-button--icon-button.is-loading {
27
+ &::after {
28
+ @apply ml-0
29
+ }
30
+ }
31
+
24
32
  &.is-loading {
25
33
  @apply pointer-events-none;
26
34
 
@@ -34,10 +42,18 @@
34
42
  margin-left: 8px;
35
43
  width: 20px;
36
44
  }
45
+
46
+ &.uxf-button--icon-button::after {
47
+ margin-left: 0;
48
+ }
49
+
50
+ .uxf-icon {
51
+ @apply hidden;
52
+ }
37
53
  }
38
54
 
39
55
  &--size-xs {
40
- @apply px-2.5 py-1.5 text-xs;
56
+ @apply px-2.5 py-1.5 text-xs rounded;
41
57
 
42
58
  &.is-loading::after {
43
59
  height: 14px;
@@ -47,6 +63,10 @@
47
63
  &.uxf-button--icon-button {
48
64
  @apply p-0 h-7 w-7;
49
65
  }
66
+
67
+ .uxf-icon {
68
+ @apply h-4;
69
+ }
50
70
  }
51
71
 
52
72
  &--size-sm {
@@ -60,10 +80,14 @@
60
80
  &.uxf-button--icon-button {
61
81
  @apply p-0 h-8 w-8;
62
82
  }
83
+
84
+ .uxf-icon {
85
+ @apply h-4;
86
+ }
63
87
  }
64
88
 
65
89
  &--size-default {
66
- @apply px-4 py-3 text-base;
90
+ @apply px-4 py-2 text-sm;
67
91
 
68
92
  &.uxf-button--icon-button {
69
93
  @apply p-0 h-12 w-12;
@@ -71,41 +95,38 @@
71
95
  }
72
96
 
73
97
  &--size-lg {
74
- @apply px-8 py-5 text-base;
98
+ @apply px-4 py-2 text-base;
75
99
 
76
100
  &.uxf-button--icon-button {
77
- @apply p-0 h-16 w-16;
101
+ @apply p-0 h-10 w-10;
78
102
  }
79
103
  }
80
104
 
81
105
  &--size-xl {
82
- @apply px-10 py-6 text-base;
106
+ @apply px-6 py-3 text-base;
83
107
 
84
108
  &.uxf-button--icon-button {
85
- @apply p-0 h-[72px] w-[72px];
109
+ @apply p-0 h-[48px] w-[48px];
86
110
  }
87
111
  }
88
112
 
89
113
  &--variant-outlined {
90
- @apply before:absolute before:pointer-events-none before:inset-0 before:border is-hoverable:before:border-2
91
- bg-transparent;
114
+ @apply border bg-white;
92
115
 
93
- :root .light & {
94
- @apply before:border-gray-300 is-hoverable:bg-primary-100 is-hoverable:before:border-primary-400
95
- focus-visible:ring-primary-500 focus-visible:ring-offset-white;
116
+ &.uxf-button--color-default {
117
+ @apply text-primary-600 border-primary-500 hover:bg-primary-50;
118
+ }
96
119
 
97
- &.is-disabled {
98
- @apply before:border-gray-100 text-gray-400;
99
- }
120
+ &.uxf-button--color-success {
121
+ @apply text-success-600 border-success-500 hover:bg-success-50;
100
122
  }
101
123
 
102
- :root .dark & {
103
- @apply before:border-gray-300 is-hoverable:bg-white/10 focus-visible:ring-primary-500
104
- focus-visible:ring-offset-gray-900;
124
+ &.uxf-button--color-error {
125
+ @apply text-error-600 border-error-500 hover:bg-error-50;
126
+ }
105
127
 
106
- &.is-disabled {
107
- @apply before:border-gray-700 text-gray-600;
108
- }
128
+ &.is-disabled {
129
+ @apply border-gray-300 text-gray-400;
109
130
  }
110
131
  }
111
132
 
@@ -113,119 +134,67 @@
113
134
  @apply text-white;
114
135
 
115
136
  &.uxf-button--color-default {
116
- :root .light & {
117
- @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
118
-
119
- &.is-disabled {
120
- @apply bg-gray-100 text-gray-400;
121
- }
122
- }
123
-
124
- :root .dark & {
125
- @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500
126
- focus-visible:ring-offset-gray-900;
127
-
128
- &.is-disabled {
129
- @apply bg-gray-700 text-gray-400;
130
- }
131
- }
132
- }
133
-
134
- &.uxf-button--color-white {
135
- :root .light & {
136
- @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
137
+ @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
137
138
 
138
- &.is-disabled {
139
- @apply bg-gray-100 text-gray-400;
140
- }
141
- }
142
-
143
- :root .dark & {
144
- @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
145
-
146
- &.is-disabled {
147
- @apply bg-gray-100 text-gray-400;
148
- }
139
+ &.is-disabled {
140
+ @apply bg-gray-100 text-gray-400;
149
141
  }
150
-
151
- @apply bg-gray-50 text-gray-700 is-hoverable:bg-gray-100 focus-visible:ring-gray-500;
152
142
  }
153
143
 
154
144
  &.uxf-button--color-success {
155
- :root .light & {
156
- @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
145
+ @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
157
146
 
158
- &.is-disabled {
159
- @apply bg-gray-100 text-gray-400;
160
- }
147
+ &.is-disabled {
148
+ @apply bg-gray-100 text-gray-400;
161
149
  }
150
+ }
162
151
 
163
- :root .dark & {
164
- @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500
165
- focus-visible:ring-offset-gray-900;
152
+ &.uxf-button--color-error {
153
+ @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
166
154
 
167
- &.is-disabled {
168
- @apply bg-gray-700 text-gray-400;
169
- }
155
+ &.is-disabled {
156
+ @apply bg-gray-100 text-gray-400;
170
157
  }
171
158
  }
159
+ }
172
160
 
173
- &.uxf-button--color-warning {
174
- :root .light & {
175
- @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500;
176
-
177
- &.is-disabled {
178
- @apply bg-gray-100 text-gray-400;
179
- }
180
- }
161
+ &--variant-white {
162
+ @apply border border-gray-300 bg-white hover:bg-gray-50;
181
163
 
182
- :root .dark & {
183
- @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500
184
- focus-visible:ring-offset-gray-900;
164
+ &.uxf-button--color-default {
165
+ @apply text-primary-600;
166
+ }
185
167
 
186
- &.is-disabled {
187
- @apply bg-gray-700 text-gray-400;
188
- }
189
- }
168
+ &.uxf-button--color-success {
169
+ @apply text-success-600;
190
170
  }
191
171
 
192
172
  &.uxf-button--color-error {
193
- :root .light & {
194
- @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
195
-
196
- &.is-disabled {
197
- @apply bg-gray-100 text-gray-400;
198
- }
199
- }
200
-
201
- :root .dark & {
202
- @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500
203
- focus-visible:ring-offset-gray-900;
173
+ @apply text-error-600;
174
+ }
204
175
 
205
- &.is-disabled {
206
- @apply bg-gray-700 text-gray-400;
207
- }
208
- }
176
+ &.is-disabled {
177
+ @apply border-gray-300 text-gray-400;
209
178
  }
210
179
  }
211
180
 
212
181
  &--variant-text {
213
- @apply before:border-transparent;
182
+ @apply shadow-none;
214
183
 
215
- :root .light & {
216
- @apply is-hoverable:bg-gray-200 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
184
+ &.uxf-button--color-default {
185
+ @apply text-primary-600 hover:text-primary-800;
186
+ }
217
187
 
218
- &.is-disabled {
219
- @apply text-gray-400;
220
- }
188
+ &.uxf-button--color-success {
189
+ @apply text-success-600 hover:text-success-800;
221
190
  }
222
191
 
223
- :root .dark & {
224
- @apply is-hoverable:bg-gray-800 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
192
+ &.uxf-button--color-error {
193
+ @apply text-error-600 hover:text-error-800;
194
+ }
225
195
 
226
- &.is-disabled {
227
- @apply text-gray-600;
228
- }
196
+ &.is-disabled {
197
+ @apply text-gray-400;
229
198
  }
230
199
  }
231
200
  }
package/css/button.old.css ADDED
@@ -0,0 +1,231 @@
1
+ @keyframes spinner {
2
+ to {
3
+ transform: rotate(360deg);
4
+ }
5
+ }
6
+
7
+ .uxf-button {
8
+ @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
9
+ focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
10
+ before:transition;
11
+
12
+ &__text {
13
+ @apply truncate;
14
+ }
15
+
16
+ &--full-width {
17
+ @apply w-full flex flex-row justify-center;
18
+ }
19
+
20
+ &.is-disabled {
21
+ @apply pointer-events-none;
22
+ }
23
+
24
+ &.is-loading {
25
+ @apply pointer-events-none;
26
+
27
+ &::after {
28
+ animation: spinner 0.8s linear infinite;
29
+ border-radius: 50%;
30
+ border-right: 2px solid transparent;
31
+ border-top: 2px solid;
32
+ content: "";
33
+ height: 20px;
34
+ margin-left: 8px;
35
+ width: 20px;
36
+ }
37
+ }
38
+
39
+ &--size-xs {
40
+ @apply px-2.5 py-1.5 text-xs;
41
+
42
+ &.is-loading::after {
43
+ height: 14px;
44
+ width: 14px;
45
+ }
46
+
47
+ &.uxf-button--icon-button {
48
+ @apply p-0 h-7 w-7;
49
+ }
50
+ }
51
+
52
+ &--size-sm {
53
+ @apply px-3 py-2 text-sm leading-4;
54
+
55
+ &.is-loading::after {
56
+ height: 16px;
57
+ width: 16px;
58
+ }
59
+
60
+ &.uxf-button--icon-button {
61
+ @apply p-0 h-8 w-8;
62
+ }
63
+ }
64
+
65
+ &--size-default {
66
+ @apply px-4 py-3 text-base;
67
+
68
+ &.uxf-button--icon-button {
69
+ @apply p-0 h-12 w-12;
70
+ }
71
+ }
72
+
73
+ &--size-lg {
74
+ @apply px-8 py-5 text-base;
75
+
76
+ &.uxf-button--icon-button {
77
+ @apply p-0 h-16 w-16;
78
+ }
79
+ }
80
+
81
+ &--size-xl {
82
+ @apply px-10 py-6 text-base;
83
+
84
+ &.uxf-button--icon-button {
85
+ @apply p-0 h-[72px] w-[72px];
86
+ }
87
+ }
88
+
89
+ &--variant-outlined {
90
+ @apply before:absolute before:pointer-events-none before:inset-0 before:border is-hoverable:before:border-2
91
+ bg-transparent;
92
+
93
+ :root .light & {
94
+ @apply before:border-gray-300 is-hoverable:bg-primary-100 is-hoverable:before:border-primary-400
95
+ focus-visible:ring-primary-500 focus-visible:ring-offset-white;
96
+
97
+ &.is-disabled {
98
+ @apply before:border-gray-100 text-gray-400;
99
+ }
100
+ }
101
+
102
+ :root .dark & {
103
+ @apply before:border-gray-300 is-hoverable:bg-white/10 focus-visible:ring-primary-500
104
+ focus-visible:ring-offset-gray-900;
105
+
106
+ &.is-disabled {
107
+ @apply before:border-gray-700 text-gray-600;
108
+ }
109
+ }
110
+ }
111
+
112
+ &--variant-default {
113
+ @apply text-white;
114
+
115
+ &.uxf-button--color-default {
116
+ :root .light & {
117
+ @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
118
+
119
+ &.is-disabled {
120
+ @apply bg-gray-100 text-gray-400;
121
+ }
122
+ }
123
+
124
+ :root .dark & {
125
+ @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500
126
+ focus-visible:ring-offset-gray-900;
127
+
128
+ &.is-disabled {
129
+ @apply bg-gray-700 text-gray-400;
130
+ }
131
+ }
132
+ }
133
+
134
+ &.uxf-button--color-white {
135
+ :root .light & {
136
+ @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
137
+
138
+ &.is-disabled {
139
+ @apply bg-gray-100 text-gray-400;
140
+ }
141
+ }
142
+
143
+ :root .dark & {
144
+ @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
145
+
146
+ &.is-disabled {
147
+ @apply bg-gray-100 text-gray-400;
148
+ }
149
+ }
150
+
151
+ @apply bg-gray-50 text-gray-700 is-hoverable:bg-gray-100 focus-visible:ring-gray-500;
152
+ }
153
+
154
+ &.uxf-button--color-success {
155
+ :root .light & {
156
+ @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
157
+
158
+ &.is-disabled {
159
+ @apply bg-gray-100 text-gray-400;
160
+ }
161
+ }
162
+
163
+ :root .dark & {
164
+ @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500
165
+ focus-visible:ring-offset-gray-900;
166
+
167
+ &.is-disabled {
168
+ @apply bg-gray-700 text-gray-400;
169
+ }
170
+ }
171
+ }
172
+
173
+ &.uxf-button--color-warning {
174
+ :root .light & {
175
+ @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500;
176
+
177
+ &.is-disabled {
178
+ @apply bg-gray-100 text-gray-400;
179
+ }
180
+ }
181
+
182
+ :root .dark & {
183
+ @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500
184
+ focus-visible:ring-offset-gray-900;
185
+
186
+ &.is-disabled {
187
+ @apply bg-gray-700 text-gray-400;
188
+ }
189
+ }
190
+ }
191
+
192
+ &.uxf-button--color-error {
193
+ :root .light & {
194
+ @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
195
+
196
+ &.is-disabled {
197
+ @apply bg-gray-100 text-gray-400;
198
+ }
199
+ }
200
+
201
+ :root .dark & {
202
+ @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500
203
+ focus-visible:ring-offset-gray-900;
204
+
205
+ &.is-disabled {
206
+ @apply bg-gray-700 text-gray-400;
207
+ }
208
+ }
209
+ }
210
+ }
211
+
212
+ &--variant-text {
213
+ @apply before:border-transparent;
214
+
215
+ :root .light & {
216
+ @apply is-hoverable:bg-gray-200 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
217
+
218
+ &.is-disabled {
219
+ @apply text-gray-400;
220
+ }
221
+ }
222
+
223
+ :root .dark & {
224
+ @apply is-hoverable:bg-gray-800 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
225
+
226
+ &.is-disabled {
227
+ @apply text-gray-600;
228
+ }
229
+ }
230
+ }
231
+ }
package/date-picker-input/date-picker-decade.js CHANGED
@@ -58,10 +58,10 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
58
58
  }, [canGoToYear, onYearSelect]);
59
59
  return (react_1.default.createElement(react_1.default.Fragment, null,
60
60
  react_1.default.createElement("div", { className: "uxf-date-picker__decade-select" },
61
- react_1.default.createElement(button_1.Button, { iconButton: true, onClick: handleGoToPrevDecadeClick, title: "Zp\u011Bt", variant: "text" },
61
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: handleGoToPrevDecadeClick, title: "Zp\u011Bt", variant: "text" },
62
62
  react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
63
63
  react_1.default.createElement("p", { className: "uxf-date-picker__decade-label" }, decadeLabel),
64
- react_1.default.createElement(button_1.Button, { iconButton: true, onClick: handleGoToNextDecadeClick, title: "Vp\u0159ed", variant: "text" },
64
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: handleGoToNextDecadeClick, title: "Vp\u0159ed", variant: "text" },
65
65
  react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
66
66
  react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(year.date).year() === currentYear && "uxf-date-picker__cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date) }, year.yearLabel))))));
67
67
  });
package/date-picker-input/date-picker-month.js CHANGED
@@ -51,10 +51,10 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
51
51
  }, [setViewMode]);
52
52
  return (react_1.default.createElement(react_1.default.Fragment, null,
53
53
  react_1.default.createElement("div", { className: "uxf-date-picker__month-select" },
54
- react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevMonth, iconButton: true, onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined, title: "Zp\u011Bt", variant: "text" },
54
+ react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevMonth, isIconButton: true, onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined, title: "Zp\u011Bt", variant: "text" },
55
55
  react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
56
56
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleMonthClick }, monthLabel),
57
- react_1.default.createElement(button_1.Button, { disabled: !canGoToNextMonth, iconButton: true, onClick: canGoToNextMonth ? handleGoToNextMonth : undefined, title: "Vp\u0159ed", variant: "text" },
57
+ react_1.default.createElement(button_1.Button, { disabled: !canGoToNextMonth, isIconButton: true, onClick: canGoToNextMonth ? handleGoToNextMonth : undefined, title: "Vp\u0159ed", variant: "text" },
58
58
  react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
59
59
  react_1.default.createElement("div", { className: "uxf-date-picker__month-calendar" },
60
60
  weekdayLabels.map((weekdayLabel, index) => (react_1.default.createElement("span", { key: `${index}`, className: "uxf-date-picker__weekday-label" }, weekdayLabel))),
package/date-picker-input/date-picker-year.js CHANGED
@@ -61,10 +61,10 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
61
61
  }, [canGoToMonth, props]);
62
62
  return (react_1.default.createElement(react_1.default.Fragment, null,
63
63
  react_1.default.createElement("div", { className: "uxf-date-picker__year-select" },
64
- react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevYear, iconButton: true, onClick: canGoToPrevYear ? handleGoToPrevYear : undefined, title: "P\u0159edchoz\u00ED rok", variant: "text" },
64
+ react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevYear, isIconButton: true, onClick: canGoToPrevYear ? handleGoToPrevYear : undefined, title: "P\u0159edchoz\u00ED rok", variant: "text" },
65
65
  react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
66
66
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleYearClick }, yearLabel),
67
- react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, iconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Dal\u0161\u00ED rok", variant: "text" },
67
+ react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, isIconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Dal\u0161\u00ED rok", variant: "text" },
68
68
  react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
69
69
  react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(month.date).month() === currentMonth &&
70
70
  "uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date) }, month.monthLabel))))));
package/icon/icon.stories.d.ts CHANGED
@@ -1,7 +1,14 @@
1
+ /// <reference types="mdx" />
1
2
  import React from "react";
3
+ import Docs from "./icon.docs.mdx";
2
4
  declare const _default: {
3
5
  title: string;
4
6
  component: React.ForwardRefExoticComponent<import("./icon").IconProps & React.RefAttributes<SVGSVGElement>>;
7
+ parameters: {
8
+ docs: {
9
+ page: typeof Docs;
10
+ };
11
+ };
5
12
  };
6
13
  export default _default;
7
14
  export declare function AllIcons(): JSX.Element;
package/icon/icon.stories.js CHANGED
@@ -7,9 +7,15 @@ exports.SpriteIconNotExists = exports.SpriteIcon = exports.CustomComponent = exp
7
7
  const icon_1 = require("./icon");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const context_1 = require("../context");
10
+ const icon_docs_mdx_1 = __importDefault(require("./icon.docs.mdx"));
10
11
  exports.default = {
11
12
  title: "UI/Icon",
12
13
  component: icon_1.Icon,
14
+ parameters: {
15
+ docs: {
16
+ page: icon_docs_mdx_1.default,
17
+ },
18
+ },
13
19
  };
14
20
  function AllIcons() {
15
21
  const iconContext = (0, context_1.useComponentContext)("icon");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.80",
3
+ "version": "1.0.0-beta.81",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/time-picker-input/time-picker.js CHANGED
@@ -43,21 +43,21 @@ const TimePicker = (props) => {
43
43
  return ({
44
44
  global: (react_1.default.createElement("div", { className: "uxf-time-picker__global" },
45
45
  react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
46
- react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToNextHour, title: "Dal\u0161\u00ED", variant: "text" },
46
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Dal\u0161\u00ED", variant: "text" },
47
47
  react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
48
48
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour) !== null && _b !== void 0 ? _b : "0"),
49
- react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
49
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
50
50
  react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
51
51
  react_1.default.createElement("div", null, ":"),
52
52
  react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
53
- react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToNextMinute, title: "Dal\u0161\u00ED", variant: "text" },
53
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: "Dal\u0161\u00ED", variant: "text" },
54
54
  react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
55
55
  react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
56
56
  ? props.selectedTime.minute < 10
57
57
  ? "0" + props.selectedTime.minute
58
58
  : props.selectedTime.minute
59
59
  : "00"),
60
- react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
60
+ react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
61
61
  react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))))),
62
62
  hour: react_1.default.createElement(time_picker_hours_1.TimePickerHours, null),
63
63
  minute: react_1.default.createElement(time_picker_minutes_1.TimePickerMinutes, null),
package/utils/storybook-config.js CHANGED
@@ -28,8 +28,8 @@ const react_1 = __importStar(require("react"));
28
28
  exports.defaultConfig = {
29
29
  Button: {
30
30
  sizes: ["xs", "sm", "default", "lg", "xl"],
31
- colors: ["default", "white", "success", "warning", "error"],
32
- variants: ["default", "outlined", "text"],
31
+ colors: ["default", "success", "error"],
32
+ variants: ["default", "outlined", "white", "text"],
33
33
  },
34
34
  Input: {},
35
35
  Select: {},