@uxf/ui 10.4.0 → 11.0.0-beta.16

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 (10) hide show
  1. package/avatar-file-input/avatar-file-input.d.ts +2 -10
  2. package/avatar-file-input/avatar-file-input.js +11 -20
  3. package/create-component-preview-page/ui-components.d.ts +0 -5
  4. package/create-component-preview-page/ui-components.js +0 -5
  5. package/create-component-preview-page/ui-readmes.js +44 -46
  6. package/css/avatar-file-input.css +67 -97
  7. package/css/calendar.css +6 -1
  8. package/package.json +3 -3
  9. package/radio-group/radio-group.d.ts +1 -1
  10. package/image-gallery/README.md +0 -8
package/avatar-file-input/avatar-file-input.d.ts CHANGED
@@ -1,18 +1,10 @@
1
- import React, { MouseEventHandler, ReactNode } from "react";
1
+ import React, { ReactNode } from "react";
2
2
  import { FileInputBaseProps } from "../_file-input-base";
3
- import { IconName } from "../icon/types";
4
3
  import { AvatarFileInputVariant } from "./theme";
5
4
  export interface AvatarFileInputProps extends FileInputBaseProps {
6
- customControls?: (args: {
7
- onSelectFile: MouseEventHandler;
8
- onRemoveFile: MouseEventHandler;
9
- }) => ReactNode;
10
5
  helperText?: ReactNode;
11
- hiddenLabel?: boolean;
12
- icon?: IconName;
13
6
  label?: ReactNode;
14
- removeFileLabel?: ReactNode;
15
- selectFileLabel?: ReactNode;
7
+ changeFileLabel?: ReactNode;
16
8
  variant?: AvatarFileInputVariant;
17
9
  }
18
10
  export declare const AvatarFileInput: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
package/avatar-file-input/avatar-file-input.js CHANGED
@@ -26,37 +26,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.AvatarFileInput = void 0;
27
27
  const classes_1 = require("@uxf/core/constants/classes");
28
28
  const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
29
- const composeRefs_1 = require("@uxf/core/utils/composeRefs");
30
29
  const cx_1 = require("@uxf/core/utils/cx");
31
30
  const file_1 = require("@uxf/core/utils/file");
32
31
  const react_1 = __importStar(require("react"));
33
32
  const _file_input_base_1 = require("../_file-input-base");
34
33
  const avatar_1 = require("../avatar");
35
- const button_1 = require("../button");
36
- const form_component_1 = require("../form-component");
37
34
  const icon_1 = require("../icon");
38
35
  exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
39
- var _a, _b, _c, _d, _e;
36
+ var _a, _b;
40
37
  const generatedId = (0, react_1.useId)();
41
38
  const id = props.id || generatedId;
42
39
  const innerRef = (0, react_1.useRef)(null);
43
40
  const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
44
41
  const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
45
- const stateClassName = (0, cx_1.cx)(((_a = props.isFocused) !== null && _a !== void 0 ? _a : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
46
- const rootClassName = (0, cx_1.cx)(`uxf-avatar-file-input uxf-avatar-file-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, stateClassName, props.className);
47
- const onSelectFile = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
48
- const onRemoveFile = () => props.onChange(null);
49
- return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label },
50
- react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
51
- react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
52
- react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
53
- props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-avatar-file-input__input-avatar", src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__input-empty" },
54
- react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_c = props.icon) !== null && _c !== void 0 ? _c : "cloud" })))),
55
- react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls" }, props.customControls ? (props.customControls({
56
- onSelectFile,
57
- onRemoveFile,
58
- })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls-buttons" },
59
- react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", disabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "white" }, (_d = props.selectFileLabel) !== null && _d !== void 0 ? _d : "Upload image"),
60
- !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "error", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "white" }, (_e = props.removeFileLabel) !== null && _e !== void 0 ? _e : "Remove avatar"))))))));
42
+ const stateClassNames = (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID);
43
+ const label = props.value && props.changeFileLabel ? props.changeFileLabel : props.label;
44
+ return (react_1.default.createElement("div", { className: `uxf-avatar-file-input uxf-avatar-file-input--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
45
+ react_1.default.createElement("div", { className: "uxf-avatar-file-input__label-wrapper" },
46
+ props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: (0, cx_1.cx)("uxf-avatar-file-input__image", stateClassNames), src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label", stateClassNames), htmlFor: id, tabIndex: 0 },
47
+ react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-avatar-file-input__label-icon", stateClassNames), name: "cloud", size: 28 }))),
48
+ (props.label && typeof props.label === "string") ||
49
+ (props.value && props.changeFileLabel && typeof props.changeFileLabel === "string") ? (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label-text", stateClassNames), htmlFor: id, tabIndex: 0 }, label)) : (label)),
50
+ react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
51
+ props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", errorId && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
61
52
  });
62
53
  exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";
package/create-component-preview-page/ui-components.d.ts CHANGED
@@ -45,7 +45,6 @@ import * as TimePickerStories from "@uxf/ui/time-picker/time-picker-input.storie
45
45
  import * as ToggleStories from "@uxf/ui/toggle/toggle.stories";
46
46
  import * as TooltipStories from "@uxf/ui/tooltip/tooltip.stories";
47
47
  import * as TypographyStories from "@uxf/ui/typography/typography.stories";
48
- import * as ImageGalleryStories from "../image-gallery/image-gallery.stories";
49
48
  export declare const uiComponents: {
50
49
  readonly avatar: {
51
50
  readonly title: "Avatar";
@@ -147,10 +146,6 @@ export declare const uiComponents: {
147
146
  readonly title: "Icon";
148
147
  readonly stories: typeof IconStories;
149
148
  };
150
- readonly "image-gallery": {
151
- readonly title: "ImageGallery";
152
- readonly stories: typeof ImageGalleryStories;
153
- };
154
149
  readonly input: {
155
150
  readonly title: "Input";
156
151
  readonly stories: typeof InputStories;
package/create-component-preview-page/ui-components.js CHANGED
@@ -71,7 +71,6 @@ const TimePickerStories = __importStar(require("@uxf/ui/time-picker/time-picker-
71
71
  const ToggleStories = __importStar(require("@uxf/ui/toggle/toggle.stories"));
72
72
  const TooltipStories = __importStar(require("@uxf/ui/tooltip/tooltip.stories"));
73
73
  const TypographyStories = __importStar(require("@uxf/ui/typography/typography.stories"));
74
- const ImageGalleryStories = __importStar(require("../image-gallery/image-gallery.stories"));
75
74
  exports.uiComponents = {
76
75
  avatar: {
77
76
  title: "Avatar",
@@ -173,10 +172,6 @@ exports.uiComponents = {
173
172
  title: "Icon",
174
173
  stories: IconStories,
175
174
  },
176
- "image-gallery": {
177
- title: "ImageGallery",
178
- stories: ImageGalleryStories,
179
- },
180
175
  input: {
181
176
  title: "Input",
182
177
  stories: InputStories,
package/create-component-preview-page/ui-readmes.js CHANGED
@@ -29,29 +29,28 @@ const README_md_22 = __importDefault(require("@uxf/ui/file-input/README.md"));
29
29
  const README_md_23 = __importDefault(require("@uxf/ui/flash-messages/README.md"));
30
30
  const README_md_24 = __importDefault(require("@uxf/ui/form-component/README.md"));
31
31
  const README_md_25 = __importDefault(require("@uxf/ui/icon/README.md"));
32
- const README_md_26 = __importDefault(require("@uxf/ui/image-gallery/README.md"));
33
- const README_md_27 = __importDefault(require("@uxf/ui/input/README.md"));
34
- const README_md_28 = __importDefault(require("@uxf/ui/label/README.md"));
35
- const README_md_29 = __importDefault(require("@uxf/ui/list-item/README.md"));
36
- const README_md_30 = __importDefault(require("@uxf/ui/loader/README.md"));
37
- const README_md_31 = __importDefault(require("@uxf/ui/modal/README.md"));
38
- const README_md_32 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
39
- const README_md_33 = __importDefault(require("@uxf/ui/multi-select/README.md"));
40
- const README_md_34 = __importDefault(require("@uxf/ui/pagination/README.md"));
41
- const README_md_35 = __importDefault(require("@uxf/ui/paper/README.md"));
42
- const README_md_36 = __importDefault(require("@uxf/ui/radio-group/README.md"));
43
- const README_md_37 = __importDefault(require("@uxf/ui/radio/README.md"));
44
- const README_md_38 = __importDefault(require("@uxf/ui/raster-image/README.md"));
45
- const README_md_39 = __importDefault(require("@uxf/ui/select/README.md"));
46
- const README_md_40 = __importDefault(require("@uxf/ui/tabs/README.md"));
47
- const README_md_41 = __importDefault(require("@uxf/ui/text-input/README.md"));
48
- const README_md_42 = __importDefault(require("@uxf/ui/text-link/README.md"));
49
- const README_md_43 = __importDefault(require("@uxf/ui/textarea/README.md"));
50
- const README_md_44 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
51
- const README_md_45 = __importDefault(require("@uxf/ui/time-picker/README.md"));
52
- const README_md_46 = __importDefault(require("@uxf/ui/toggle/README.md"));
53
- const README_md_47 = __importDefault(require("@uxf/ui/tooltip/README.md"));
54
- const README_md_48 = __importDefault(require("@uxf/ui/typography/README.md"));
32
+ const README_md_26 = __importDefault(require("@uxf/ui/input/README.md"));
33
+ const README_md_27 = __importDefault(require("@uxf/ui/label/README.md"));
34
+ const README_md_28 = __importDefault(require("@uxf/ui/list-item/README.md"));
35
+ const README_md_29 = __importDefault(require("@uxf/ui/loader/README.md"));
36
+ const README_md_30 = __importDefault(require("@uxf/ui/modal/README.md"));
37
+ const README_md_31 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
38
+ const README_md_32 = __importDefault(require("@uxf/ui/multi-select/README.md"));
39
+ const README_md_33 = __importDefault(require("@uxf/ui/pagination/README.md"));
40
+ const README_md_34 = __importDefault(require("@uxf/ui/paper/README.md"));
41
+ const README_md_35 = __importDefault(require("@uxf/ui/radio-group/README.md"));
42
+ const README_md_36 = __importDefault(require("@uxf/ui/radio/README.md"));
43
+ const README_md_37 = __importDefault(require("@uxf/ui/raster-image/README.md"));
44
+ const README_md_38 = __importDefault(require("@uxf/ui/select/README.md"));
45
+ const README_md_39 = __importDefault(require("@uxf/ui/tabs/README.md"));
46
+ const README_md_40 = __importDefault(require("@uxf/ui/text-input/README.md"));
47
+ const README_md_41 = __importDefault(require("@uxf/ui/text-link/README.md"));
48
+ const README_md_42 = __importDefault(require("@uxf/ui/textarea/README.md"));
49
+ const README_md_43 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
50
+ const README_md_44 = __importDefault(require("@uxf/ui/time-picker/README.md"));
51
+ const README_md_45 = __importDefault(require("@uxf/ui/toggle/README.md"));
52
+ const README_md_46 = __importDefault(require("@uxf/ui/tooltip/README.md"));
53
+ const README_md_47 = __importDefault(require("@uxf/ui/typography/README.md"));
55
54
  exports.uiReadmes = {
56
55
  avatar: README_md_2.default,
57
56
  "avatar-file-input": README_md_1.default,
@@ -78,27 +77,26 @@ exports.uiReadmes = {
78
77
  "flash-messages": README_md_23.default,
79
78
  "form-component": README_md_24.default,
80
79
  icon: README_md_25.default,
81
- "image-gallery": README_md_26.default,
82
- input: README_md_27.default,
83
- label: README_md_28.default,
84
- "list-item": README_md_29.default,
85
- loader: README_md_30.default,
86
- modal: README_md_31.default,
87
- "multi-combobox": README_md_32.default,
88
- "multi-select": README_md_33.default,
89
- pagination: README_md_34.default,
90
- paper: README_md_35.default,
91
- radio: README_md_37.default,
92
- "radio-group": README_md_36.default,
93
- "raster-image": README_md_38.default,
94
- select: README_md_39.default,
95
- tabs: README_md_40.default,
96
- "text-input": README_md_41.default,
97
- "text-link": README_md_42.default,
98
- textarea: README_md_43.default,
99
- "time-picker": README_md_45.default,
100
- "time-picker-input": README_md_44.default,
101
- toggle: README_md_46.default,
102
- tooltip: README_md_47.default,
103
- typography: README_md_48.default,
80
+ input: README_md_26.default,
81
+ label: README_md_27.default,
82
+ "list-item": README_md_28.default,
83
+ loader: README_md_29.default,
84
+ modal: README_md_30.default,
85
+ "multi-combobox": README_md_31.default,
86
+ "multi-select": README_md_32.default,
87
+ pagination: README_md_33.default,
88
+ paper: README_md_34.default,
89
+ radio: README_md_36.default,
90
+ "radio-group": README_md_35.default,
91
+ "raster-image": README_md_37.default,
92
+ select: README_md_38.default,
93
+ tabs: README_md_39.default,
94
+ "text-input": README_md_40.default,
95
+ "text-link": README_md_41.default,
96
+ textarea: README_md_42.default,
97
+ "time-picker": README_md_44.default,
98
+ "time-picker-input": README_md_43.default,
99
+ toggle: README_md_45.default,
100
+ tooltip: README_md_46.default,
101
+ typography: README_md_47.default,
104
102
  };
package/css/avatar-file-input.css CHANGED
@@ -1,146 +1,116 @@
1
1
  .uxf-avatar-file-input {
2
- &.is-disabled .uxf-avatar-file-input__inner-wrapper {
3
- cursor: not-allowed;
2
+ align-items: center;
3
+ display: flex;
4
+ gap: theme("spacing.4");
5
+
6
+ &__input {
7
+ display: none;
4
8
  }
5
9
 
6
- &__inner-wrapper {
7
- align-items: center;
8
- display: flex;
9
- gap: theme("spacing.4");
10
- margin-top: theme("spacing.2");
10
+ &--variant-default {
11
+ .uxf-avatar-file-input__label {
12
+ border-radius: theme("borderRadius.full");
13
+ }
11
14
  }
12
15
 
13
- &__input {
16
+ &__label {
17
+ @apply transition-all duration-75;
18
+
19
+ align-items: center;
20
+ border-style: dashed;
21
+ border-width: theme("borderWidth.2");
14
22
  cursor: pointer;
15
- flex-shrink: 0;
23
+ display: flex;
16
24
  height: theme("height.20");
17
- position: relative;
25
+ justify-content: center;
18
26
  width: theme("width.20");
19
27
 
20
- &:hover .uxf-avatar-file-input__input-empty {
21
- :root .light & {
22
- --bg-color: theme("colors.lightBorder/.25");
23
- }
28
+ :root .light & {
29
+ border-color: theme("colors.lightBorder");
30
+ }
24
31
 
25
- :root .dark & {
26
- --bg-color: theme("colors.darkBorder/.25");
27
- }
32
+ :root .dark & {
33
+ border-color: theme("colors.darkBorder");
34
+ }
35
+
36
+ &-wrapper {
37
+ align-items: center;
38
+ display: flex;
39
+ gap: theme("spacing.4");
28
40
  }
29
41
 
30
- &.is-invalid .uxf-avatar-file-input__input-empty {
42
+ &-icon {
31
43
  :root .light & {
32
- --bg-color: theme("colors.error.DEFAULT/.05");
33
- --border-color: var(--color);
34
- --color: theme("colors.error.DEFAULT");
44
+ color: theme("colors.lightLow");
35
45
  }
36
46
 
37
47
  :root .dark & {
38
- --bg-color: theme("colors.error.DEFAULT/.05");
39
- --border-color: var(--color);
40
- --color: theme("colors.error.DEFAULT");
48
+ color: theme("colors.lightBorder");
41
49
  }
42
- }
43
50
 
44
- &.is-disabled {
45
- pointer-events: none;
46
-
47
- .uxf-avatar-file-input__input-empty {
51
+ &.is-invalid {
48
52
  :root .light & {
49
- --border-color: var(--color);
50
- --color: theme("colors.lightBorder");
53
+ color: theme("colors.error.DEFAULT");
51
54
  }
52
55
 
53
56
  :root .dark & {
54
- --border-color: var(--color);
55
- --color: theme("colors.darkBorder");
57
+ color: theme("colors.error.DEFAULT");
56
58
  }
57
59
  }
58
-
59
- .uxf-avatar-file-input__input-avatar {
60
- opacity: 0.5;
61
- }
62
60
  }
63
- }
64
-
65
- &__input-element {
66
- @apply sr-only;
67
61
 
68
- &:focus-visible + .uxf-avatar-file-input__input-empty {
62
+ &:hover {
69
63
  border-width: theme("borderWidth.4");
64
+ }
70
65
 
71
- /* :root .light & {
72
- --bg-color: theme("colors.primary.DEFAULT/.05");
73
- --border-color: var(--color);
74
- --color: theme("colors.primary.DEFAULT");
66
+ &.is-invalid {
67
+ :root .light & {
68
+ border-color: theme("colors.error.DEFAULT");
75
69
  }
76
70
 
77
71
  :root .dark & {
78
- --bg-color: theme("colors.primary.DEFAULT/.05");
79
- --border-color: var(--color);
80
- --color: theme("colors.primary.DEFAULT");
81
- */
72
+ border-color: theme("colors.error.DEFAULT");
73
+ }
82
74
  }
83
- }
84
75
 
85
- &__input-avatar {
86
- border-radius: inherit;
87
- display: flex;
88
- height: 100%;
89
- width: 100%;
90
- }
76
+ &.is-disabled {
77
+ background-color: theme("colors.lightLow/.20");
78
+ cursor: not-allowed;
91
79
 
92
- &__input-empty {
93
- --bg-color: transparent;
80
+ &:hover {
81
+ border-width: theme("borderWidth.2");
82
+ }
83
+ }
84
+ }
94
85
 
95
- @apply transition-all duration-75;
86
+ &__label-text {
87
+ @apply text-sm shadow-sm;
96
88
 
97
- align-items: center;
98
- background-color: var(--bg-color);
99
- border: theme("borderWidth.2") dashed var(--border-color);
100
- border-radius: inherit;
101
- display: flex;
102
- height: 100%;
103
- justify-content: center;
104
- width: 100%;
89
+ border: theme("borderWidth.DEFAULT") solid theme("colors.gray.300");
90
+ padding: theme("spacing[1.5]") theme("spacing.3");
91
+ text-align: center;
105
92
 
106
93
  :root .light & {
107
- --color: theme("colors.lightMedium");
108
- --border-color: theme("colors.lightBorder");
94
+ color: theme("colors.lightHigh");
109
95
  }
110
96
 
111
97
  :root .dark & {
112
- --color: theme("colors.darkMedium");
113
- --border-color: theme("colors.darkBorder");
98
+ color: theme("colors.lightBorder");
114
99
  }
115
- }
116
-
117
- &__input-empty-icon {
118
- color: var(--color);
119
- height: theme("width.6");
120
- width: theme("width.6");
121
- }
122
-
123
- &__controls-buttons {
124
- align-items: flex-start;
125
- display: flex;
126
- flex-direction: column;
127
- gap: theme("spacing.2");
128
- justify-content: center;
129
- }
130
100
 
131
- &__controls-button--remove .uxf-button__text {
132
- color: theme("colors.error.DEFAULT");
133
- }
101
+ &.is-invalid {
102
+ :root .light & {
103
+ color: theme("colors.error.DEFAULT");
104
+ }
134
105
 
135
- &--variant-default {
136
- .uxf-avatar-file-input__input {
137
- border-radius: theme("borderRadius.full");
106
+ :root .dark & {
107
+ color: theme("colors.error.DEFAULT");
108
+ }
138
109
  }
139
110
  }
140
111
 
141
- &--variant-square {
142
- .uxf-avatar-file-input__input {
143
- border-radius: 0;
144
- }
112
+ &__image {
113
+ height: theme("height.20");
114
+ width: theme("width.20");
145
115
  }
146
116
  }
package/css/calendar.css CHANGED
@@ -115,6 +115,8 @@
115
115
  :root .light & {
116
116
  --bg-color: theme("backgroundColor.lightHigh");
117
117
  --color: theme("colors.white");
118
+
119
+ border: 2px solid theme("colors.lightMedium");
118
120
  }
119
121
 
120
122
  :root .dark & {
@@ -128,8 +130,11 @@
128
130
  &.uxf-calendar__cell--selected {
129
131
  .uxf-calendar__cell__inner {
130
132
  background-color: theme("backgroundColor.transparent");
131
- border: 2px solid theme("colors.darkMedium");
132
133
  color: theme("colors.white");
134
+
135
+ :root .light & {
136
+ border-color: theme("colors.white");
137
+ }
133
138
  }
134
139
  }
135
140
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "10.4.0",
3
+ "version": "11.0.0-beta.16",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,9 +17,9 @@
17
17
  "dependencies": {
18
18
  "@floating-ui/react": "0.26.0",
19
19
  "@headlessui/react": "1.7.14",
20
- "@uxf/core": "10.4.0",
20
+ "@uxf/core": "10.0.0",
21
21
  "@uxf/datepicker": "10.0.0",
22
- "@uxf/styles": "10.4.0",
22
+ "@uxf/styles": "10.0.0",
23
23
  "color2k": "2.0.2",
24
24
  "dayjs": "1.11.10",
25
25
  "jump.js": "1.0.2",
package/radio-group/radio-group.d.ts CHANGED
@@ -6,7 +6,7 @@ export type RadioGroupOptionValueId = string | number;
6
6
  export interface RadioGroupOption {
7
7
  disabled?: boolean;
8
8
  id: RadioGroupOptionValueId;
9
- label: ReactNode;
9
+ label: string;
10
10
  }
11
11
  export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueId | null> {
12
12
  className?: string;
package/image-gallery/README.md DELETED
@@ -1,8 +0,0 @@
1
- # Image Gallery
2
-
3
- ## CSS dependencies
4
-
5
- ```css
6
- @import url("@uxf/ui/icon/icon.css");
7
- @import url("@uxf/ui/image-gallery/image-gallery.css");
8
- ```