@uxf/ui 1.0.0-beta.90 → 1.0.0-beta.91

package/avatar/avatar.spec.js

@@ -4,13 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const react_test_renderer_1 = require("react-test-renderer");
 const avatar_1 = require("./avatar");
-it("render basic", () => {
-    const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(avatar_1.Avatar, { src: "/image.jpg" })).toJSON();
-    expect(tree).toMatchSnapshot();
-});
-it("render with className", () => {
-    const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(avatar_1.Avatar, { src: "/image.jpg" })).toJSON();
-    expect(tree).toMatchSnapshot();
-});
+const snap_test_1 = require("../utils/snap-test");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(avatar_1.Avatar, { src: "/image.jpg" }));

package/button/button.stories.js

@@ -53,7 +53,7 @@ function Default() {
             ", Size:",
             " ",
             react_1.default.createElement("span", { className: "font-semibold" }, size)),
-        react_1.default.createElement("div", { className: "flex flex-row gap-2" },
+        react_1.default.createElement("div", { className: "flex flex-row items-start gap-2" },
             react_1.default.createElement(button_1.Button, { color: color, onClick: () => void null, size: size, variant: variant }, "Default"),
             react_1.default.createElement(button_1.Button, { color: color, loading: true, onClick: () => void null, size: size, variant: variant }, "Loading"),
             react_1.default.createElement(button_1.Button, { color: color, disabled: true, onClick: () => void null, size: size, variant: variant }, "Disabled"),

package/checkbox/checkbox.d.ts

@@ -1,9 +1,12 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
+import { CheckboxSizes } from "../checkbox-visual/theme";
+export declare type CheckboxSize = keyof CheckboxSizes;
 export interface CheckboxProps extends FormControlProps<boolean> {
     className?: string;
     indeterminate?: boolean;
     label: ReactNode;
+    size?: CheckboxSize;
     style?: Partial<CSSProperties>;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

package/checkbox/checkbox.js

@@ -6,19 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const react_1 = require("@headlessui/react");
 const react_2 = __importDefault(require("react"));
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-function CheckIcon() {
-    return (react_2.default.createElement("svg", { fill: "none", viewBox: "0 0 16 16" },
-        react_2.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
-}
+const checkbox_visual_1 = require("../checkbox-visual");
 exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
     var _a;
     return (react_2.default.createElement(react_1.Switch.Group, null,
         react_2.default.createElement("div", { className: `uxf-checkbox__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-checkbox"), disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
-                react_2.default.createElement("span", { className: "uxf-checkbox__icon" },
-                    react_2.default.createElement(CheckIcon, null))),
+            react_2.default.createElement(react_1.Switch, { checked: props.value, className: "uxf-checkbox-visual-wrapper", disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+                react_2.default.createElement(checkbox_visual_1.CheckboxVisual, { indeterminate: props.indeterminate, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, size: props.size, value: props.value })),
             react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));
 });

package/checkbox/checkbox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/checkbox.spec.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const checkbox_1 = require("./checkbox");
+const snap_test_1 = require("../utils/snap-test");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(checkbox_1.Checkbox, { label: "label", onChange: () => void null }));
+(0, snap_test_1.snapTest)("render disabled", react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, label: "label", onChange: () => void null }));
+(0, snap_test_1.snapTest)("render size lg", react_1.default.createElement(checkbox_1.Checkbox, { size: "lg", label: "label", onChange: () => void null }));

package/checkbox/checkbox.stories.js

@@ -32,26 +32,13 @@ exports.default = {
 };
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
+    const checkboxes = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => setChecked((prev) => !prev), value: checked }),
+        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isDisabled: true, onChange: () => setChecked((prev) => !prev), value: checked }),
+        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isInvalid: true, onChange: () => setChecked((prev) => !prev), value: checked }),
+        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu? (size lg)", onChange: () => setChecked((prev) => !prev), value: checked, size: "lg" })));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" },
-            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isDisabled: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isInvalid: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked })),
-        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" },
-            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isDisabled: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isInvalid: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }))));
+        react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" }, checkboxes),
+        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" }, checkboxes)));
 }
 exports.Default = Default;

package/checkbox-button/checkbox-button.js

@@ -9,13 +9,10 @@ const react_2 = __importDefault(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-function CheckIcon() {
-    return (react_2.default.createElement("svg", { fill: "none", viewBox: "0 0 16 16" },
-        react_2.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
-}
+const icon_1 = require("../icon");
 exports.CheckboxButton = (0, forwardRef_1.forwardRef)("CheckboxButton", (props, ref) => {
     return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)("uxf-checkbox-button", props.className, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
         react_2.default.createElement("span", { className: "uxf-checkbox-button__label" }, props.label),
         react_2.default.createElement("span", { className: "uxf-checkbox-button__icon" },
-            react_2.default.createElement(CheckIcon, null))));
+            react_2.default.createElement(icon_1.Icon, { name: "check" }))));
 });

package/checkbox-button/checkbox-button.spec.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const checkbox_button_1 = require("./checkbox-button");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "label", onChange: () => void null }));
+(0, snap_test_1.snapTest)("render disabled", react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "label", isDisabled: true, onChange: () => void null }));

package/checkbox-visual/checkbox-visual.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FormControlProps } from "../types";
+import { CheckboxSizes } from "./theme";
+export declare type CheckboxSize = keyof CheckboxSizes;
+export interface CheckboxVisualProps extends FormControlProps<boolean> {
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+}
+export declare const CheckboxVisual: React.ForwardRefExoticComponent<CheckboxVisualProps & React.RefAttributes<HTMLDivElement>>;

package/checkbox-visual/checkbox-visual.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxVisual = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const icon_1 = require("../icon");
+exports.CheckboxVisual = (0, forwardRef_1.forwardRef)("CheckboxVisual", (props, ref) => {
+    var _a;
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-checkbox", `uxf-checkbox--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.indeterminate && classes_1.CLASSES.IS_INDETERMINATE, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref },
+        react_1.default.createElement("span", { className: "uxf-checkbox__icon" },
+            react_1.default.createElement(icon_1.Icon, { name: "check" }))));
+});

package/checkbox-visual/checkbox-visual.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./checkbox-visual").CheckboxVisualProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/checkbox-visual/checkbox-visual.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+exports.default = {
+    title: "UI/CheckboxVisual",
+    component: index_1.CheckboxVisual,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    const checkboxes = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.CheckboxVisual, { onChange: () => setChecked((prev) => !prev), value: checked }),
+        react_1.default.createElement(index_1.CheckboxVisual, { isDisabled: true, onChange: () => setChecked((prev) => !prev), value: checked }),
+        react_1.default.createElement(index_1.CheckboxVisual, { isInvalid: true, onChange: () => setChecked((prev) => !prev), value: checked }),
+        react_1.default.createElement(index_1.CheckboxVisual, { onChange: () => setChecked((prev) => !prev), value: checked, size: "lg" })));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" }, checkboxes),
+        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" }, checkboxes)));
+}
+exports.Default = Default;

package/checkbox-visual/index.d.ts

@@ -0,0 +1 @@
+export * from "./checkbox-visual";

package/checkbox-visual/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./checkbox-visual"), exports);

package/checkbox-visual/theme.d.ts

@@ -0,0 +1,4 @@
+export interface CheckboxSizes {
+    default: true;
+    lg: true;
+}

package/checkbox-visual/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/css/button.css

@@ -6,7 +6,7 @@
 
 .uxf-button {
     @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm
-        focus:outline-none focus:ring-2 focus:ring-offset-2;
+        focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
 
     .uxf-icon {
         @apply h-6;
@@ -54,7 +54,9 @@
     }
 
     &--size-xs {
-        @apply px-2.5 h-7 text-xs rounded;
+        height: theme("inputSize.xs");
+
+        @apply px-2.5 text-xs rounded;
 
         &.is-loading::after {
             height: 14px;
@@ -62,16 +64,20 @@
         }
 
         &.uxf-button--icon-button {
-            @apply p-0 w-7;
+            width: theme("inputSize.xs");
+
+            @apply p-0;
         }
 
         .uxf-icon {
-            @apply h-4;
+            @apply h-4 w-4;
         }
     }
 
     &--size-sm {
-        @apply px-3 h-8 text-sm leading-4;
+        height: theme("inputSize.sm");
+
+        @apply px-3 text-sm leading-4;
 
         &.is-loading::after {
             height: 16px;
@@ -79,35 +85,49 @@
         }
 
         &.uxf-button--icon-button {
-            @apply p-0 w-8;
+            width: theme("inputSize.sm");
+
+            @apply p-0;
         }
 
         .uxf-icon {
-            @apply h-4;
+            @apply h-4 w-4;
         }
     }
 
     &--size-default {
-        @apply px-4 h-9 text-sm;
+        height: theme("inputSize.default");
+
+        @apply px-4 text-sm;
 
         &.uxf-button--icon-button {
-            @apply p-0 w-9;
+            width: theme("inputSize.default");
+
+            @apply p-0;
         }
     }
 
     &--size-lg {
-        @apply px-4 h-10 text-base;
+        height: theme("inputSize.lg");
+
+        @apply px-4 text-base;
 
         &.uxf-button--icon-button {
-            @apply p-0 w-10;
+            width: theme("inputSize.lg");
+
+            @apply p-0;
         }
     }
 
     &--size-xl {
-        @apply px-6 h-11 text-base;
+        height: theme("inputSize.xl");
+
+        @apply px-6 text-base;
 
         &.uxf-button--icon-button {
-            @apply p-0 w-11;
+            width: theme("inputSize.xl");
+
+            @apply p-0;
         }
     }
 

package/css/checkbox-button.css

@@ -4,7 +4,7 @@
         before:transition focus-visible:ring-offset-2 focus-visible:ring-2;
 
     &__icon {
-        @apply w-5 h-5 p-0.5 bg-white text-transparent rounded relative before:absolute before:inset-0 before:border
+        @apply w-5 h-5 p-1 bg-white text-transparent rounded relative before:absolute before:inset-0 before:border
             before:rounded before:transition;
     }
 

package/css/checkbox.css

@@ -1,6 +1,18 @@
+.uxf-checkbox-visual-wrapper {
+    @apply outline-none leading-none rounded relative
+        before:absolute before:leading-none before:-inset-[3px] before:rounded-md focus-visible:before:border-2;
+
+    :root .light & {
+        @apply focus-visible:before:border-primary-500;
+    }
+
+    :root .dark & {
+        @apply focus-visible:before:border-primary-500;
+    }
+}
+
 .uxf-checkbox {
-    @apply shrink-0 inline-flex items-center justify-center rounded h-6 w-6 transition outline-none border
-        focus-visible:ring-offset-2 focus-visible:ring-2;
+    @apply shrink-0 flex items-center justify-center rounded transition outline-none border;
 
     &__wrapper {
         @apply flex items-center justify-between space-x-3;
@@ -19,7 +31,7 @@
     }
 
     &__icon {
-        @apply w-4 h-4 hidden;
+        @apply hidden;
     }
 
     &.is-selected {
@@ -28,11 +40,27 @@
         }
     }
 
+    &--size-default {
+        @apply h-4 w-4;
+
+        .uxf-checkbox__icon {
+            @apply w-2.5 h-2.5;
+        }
+    }
+
+    &--size-lg {
+        @apply h-6 w-6;
+
+        .uxf-checkbox__icon {
+            @apply w-4 h-4;
+        }
+    }
+
     :root .light & {
-        @apply border-gray-400 focus-visible:ring-primary-500;
+        @apply border-gray-400;
 
         &.is-selected {
-            @apply bg-primary-500 border-none;
+            @apply bg-primary-500 border-transparent;
 
             .uxf-checkbox__icon {
                 @apply text-white;
@@ -51,6 +79,12 @@
             }
         }
 
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary-500/60;
+            }
+        }
+
         &.is-invalid {
             @apply border-red-600;
 
@@ -65,10 +99,10 @@
     }
 
     :root .dark & {
-        @apply border-gray-400 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        @apply border-gray-400;
 
         &.is-selected {
-            @apply bg-primary-500 border-none;
+            @apply bg-primary-500 border-transparent;
 
             .uxf-checkbox__icon {
                 @apply text-white;
@@ -87,6 +121,12 @@
             }
         }
 
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary-500/60;
+            }
+        }
+
         &.is-invalid {
             @apply border-red-600;
 

package/css/combobox.css

@@ -1,12 +1,14 @@
 .uxf-combobox {
-    @apply relative;
+    @apply relative shadow-sm;
 
     &__button {
-        @apply relative flex h-9 w-full cursor-default flex-row items-center rounded-lg px-4 text-left
+        height: theme("inputSize.default");
+
+        @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left
             outline-none  before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
 
         .uxf-icon {
-            @apply h-4;
+            @apply h-3;
         }
 
         :root .light & {

package/css/dropdown.css

@@ -1,5 +1,5 @@
 .uxf-dropdown {
-    @apply absolute z-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
+    @apply absolute z-10 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
         ring-opacity-5 focus:outline-none sm:text-sm;
 
     &--bottom {

package/css/input.css

@@ -1,5 +1,5 @@
 .uxf-input {
-    @apply rounded-md bg-white;
+    @apply rounded-md bg-white shadow-sm;
 
     :root .light & {
         @apply bg-white text-gray-900;
@@ -63,20 +63,26 @@
     }
 
     &--size-small {
+        height: theme("inputSize.sm");
+
         .uxf-input__wrapper {
-            @apply h-8 text-sm;
+            @apply text-sm;
         }
     }
 
     &--size-default {
+        height: theme("inputSize.default");
+
         .uxf-input__wrapper {
-            @apply h-9 text-base;
+            @apply text-base;
         }
     }
 
     &--size-large {
+        height: theme("inputSize.lg");
+
         .uxf-input__wrapper {
-            @apply h-10 text-lg;
+            @apply text-lg;
         }
     }
 

package/css/label.css

@@ -1,5 +1,5 @@
 .uxf-label {
-    @apply mb-2 block font-medium;
+    @apply mb-2 block text-sm font-medium;
 
     :root .light & {
         @apply text-gray-900;

package/css/radio-group.css

@@ -139,7 +139,7 @@
     }
 
     .uxf-radio-group__option__wrapper {
-        @apply flex-row-reverse;
+        @apply flex-row-reverse items-center;
     }
 
     .uxf-radio-group__option__label {

package/css/radio.css

@@ -1,12 +1,12 @@
 .uxf-radio {
-    @apply flex shrink-0 items-center justify-center h-6 w-6 border rounded-full transition focus-visible:ring-2;
+    @apply flex shrink-0 items-center justify-center border rounded-full transition focus-visible:ring-2;
 
     &__label {
         @apply sr-only;
     }
 
     &__inner {
-        @apply rounded-full h-2.5 w-2.5 opacity-0 transition;
+        @apply rounded-full opacity-0 transition;
     }
 
     &.is-selected {
@@ -15,6 +15,22 @@
         }
     }
 
+    &--size-default {
+        @apply h-4 w-4;
+
+        .uxf-radio__inner {
+            @apply w-1.5 h-1.5;
+        }
+    }
+
+    &--size-lg {
+        @apply h-6 w-6;
+
+        .uxf-radio__inner {
+            @apply w-2.5 h-2.5;
+        }
+    }
+
     :root .light & {
         @apply border-gray-400 focus-visible:ring-primary-500;
 

package/css/select.css

@@ -2,12 +2,14 @@
     @apply relative;
 
     &__button {
-        @apply relative flex h-9 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
+        height: theme("inputSize.default");
+
+        @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
             outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
             before:rounded-lg;
 
         .uxf-icon {
-            @apply h-4;
+            @apply h-3;
         }
 
         :root .light & {

package/css/textarea.css

@@ -1,14 +1,13 @@
 .uxf-textarea {
     &__wrapper {
-        @apply rounded-md text-base
-            border p-2;
+        @apply rounded-md text-base border p-2 shadow-sm;
 
         :root .light & {
-            @apply bg-gray-100 text-gray-900 border-gray-200;
+            @apply text-gray-900 border-gray-200;
         }
 
         :root .dark & {
-            @apply bg-gray-800 text-gray-300 border-gray-700;
+            @apply text-gray-300 border-gray-700;
         }
     }
 

package/dropdown/dropdown.stories.js

@@ -21,7 +21,7 @@ const testDropdownItems = [
 function Default() {
     const storyDropdown = (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
-            react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, title: "Test" }, "Click me"),
+            react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, color: "success", title: "Test" }, "Click me"),
             react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title)))))))));
     return (react_2.default.createElement("div", { className: "flex" },
         react_2.default.createElement("div", { className: "light grow gap-4 p-4" }, storyDropdown),

package/flash-messages/flash-messages.stories.js

@@ -22,7 +22,7 @@ function Default() {
             }) }, "Click to fire Flash message"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "cross", size: 24 }),
+                    react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24 }),
                     react_1.default.createElement("span", null, "Seems like an error occurred :)"))),
                 autoDismiss: false,
                 variant: "error",

package/hooks/use-dropdown.js

@@ -12,7 +12,7 @@ function useDropdown(placement, matchWidth = false) {
                 apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
                     Object.assign(elements.floating.style, {
                         left: x + "px",
-                        maxHeight: Math.max(50, availableHeight) + "px",
+                        maxHeight: Math.min(240, availableHeight) + "px",
                         maxWidth: matchWidth
                             ? Math.min(availableWidth, elements.reference.getBoundingClientRect().width) + "px"
                             : availableWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.90",
+  "version": "1.0.0-beta.91",
   "description": "",
   "publishConfig": {
     "access": "public"

package/radio/radio.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import { FormControlProps } from "../types";
+import { RadioSizes } from "./theme";
+export declare type RadioSize = keyof RadioSizes;
 export interface RadioProps extends FormControlProps<boolean> {
     label: string;
+    size?: RadioSize;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLDivElement>>;

package/radio/radio.js

@@ -9,7 +9,8 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 exports.Radio = (0, forwardRef_1.forwardRef)("Radio", (props, ref) => {
-    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref },
+    var _a;
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio", `uxf-radio--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref },
         react_1.default.createElement("span", { className: "uxf-radio__label" }, props.label),
         react_1.default.createElement("div", { className: "uxf-radio__inner" })));
 });

package/radio/radio.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/radio/radio.spec.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const radio_1 = require("./radio");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(radio_1.Radio, { label: "label", onChange: () => void null }));
+(0, snap_test_1.snapTest)("render disabled", react_1.default.createElement(radio_1.Radio, { label: "label", isDisabled: true, onChange: () => void null }));

package/radio/radio.stories.js

@@ -11,32 +11,25 @@ exports.default = {
     component: index_1.Radio,
 };
 function Default() {
+    const radios = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Default"),
+        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+            react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber" }),
+            react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber" })),
+        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Invalid"),
+        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+            react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isInvalid: true }),
+            react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isInvalid: true })),
+        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Disabled"),
+        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+            react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isDisabled: true }),
+            react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isDisabled: true })),
+        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "size lg"),
+        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+            react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", size: "lg" }),
+            react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", size: "lg" }))));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light p-20" },
-            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Default"),
-            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber" }),
-                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber" })),
-            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Invalid"),
-            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isInvalid: true }),
-                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isInvalid: true })),
-            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Disabled"),
-            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isDisabled: true }),
-                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isDisabled: true }))),
-        react_1.default.createElement("div", { className: "dark bg-gray-900 p-20" },
-            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold text-white" }, "Default"),
-            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber" }),
-                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber" })),
-            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold text-white" }, "Invalid"),
-            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isInvalid: true }),
-                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isInvalid: true })),
-            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold text-white" }, "Disabled"),
-            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isDisabled: true }),
-                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isDisabled: true })))));
+        react_1.default.createElement("div", { className: "light p-20 " }, radios),
+        react_1.default.createElement("div", { className: "dark bg-gray-900 p-20 text-white" }, radios)));
 }
 exports.Default = Default;

package/radio/theme.d.ts

@@ -0,0 +1,4 @@
+export interface RadioSizes {
+    default: true;
+    lg: true;
+}

package/radio/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/radio-group/radio-group.d.ts

@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactNode } from "react";
+import { RadioSize } from "../radio";
 import { FormControlProps } from "../types";
 import { RadioGroupVariants } from "./theme";
 export declare type RadioGroupVariant = keyof RadioGroupVariants;
@@ -16,6 +17,7 @@ export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue
     id: string;
     label: string;
     options: RadioGroupOption[];
+    radioSize?: RadioSize;
     style?: CSSProperties;
     variant?: RadioGroupVariant;
 }

package/radio-group/radio-group.js

@@ -33,16 +33,17 @@ const use_input_submit_1 = require("../hooks/use-input-submit");
 const label_1 = require("../label");
 const radio_1 = require("../radio");
 exports.RadioGroup = (0, forwardRef_1.forwardRef)("RadioGroup", (props, ref) => {
-    var _a;
+    var _a, _b;
     const innerRef = (0, react_2.useRef)(null);
     (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
     const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
     const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "list";
+    const radioSize = (_b = props.radioSize) !== null && _b !== void 0 ? _b : "default";
     const rootClassName = (0, cx_1.cx)("uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
     return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
         react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label),
         react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option__wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
             react_2.default.createElement("span", { className: "uxf-radio-group__option__label" }, option.label),
-            react_2.default.createElement(radio_1.Radio, { isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, label: option.label, ref: o.checked ? innerRef : undefined, value: o.checked }))))))),
+            react_2.default.createElement(radio_1.Radio, { isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, label: option.label, ref: o.checked ? innerRef : undefined, size: radioSize, value: o.checked }))))))),
         props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
 });

package/radio-group/radio-group.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/radio-group/radio-group.spec.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const radio_group_1 = require("./radio-group");
+const options = [
+    {
+        value: "1",
+        label: "Radio one",
+    },
+    {
+        value: "2",
+        label: "Radio two",
+    },
+    {
+        value: "3",
+        label: "Radio three-sixty",
+    },
+];
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(radio_group_1.RadioGroup, { id: "basic", options: options, label: "label", onChange: () => void null }));
+(0, snap_test_1.snapTest)("render disabled", react_1.default.createElement(radio_group_1.RadioGroup, { id: "disabled", options: options, label: "label", isDisabled: true, onChange: () => void null }));

package/radio-group/radio-group.stories.js

@@ -49,7 +49,8 @@ function Default() {
     const testRadioGroups = (react_1.default.createElement("div", { className: "space-y-10" },
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: (v) => setValue(v), options: options, value: value }),
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" }),
-        react_1.default.createElement(index_1.RadioGroup, { hiddenLabel: true, id: "radiogroup", label: "Radio group variant row with hidden label", onChange: (v) => setValue(v), options: options, value: value, variant: "row" })));
+        react_1.default.createElement(index_1.RadioGroup, { hiddenLabel: true, id: "radiogroup", label: "Radio group variant row with hidden label", onChange: (v) => setValue(v), options: options, value: value, variant: "row" }),
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant row, radioSize lg", onChange: (v) => setValue(v), options: options, value: value, variant: "row", radioSize: "lg" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testRadioGroups),
         react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testRadioGroups)));

package/select/select.stories.js

@@ -38,6 +38,15 @@ const options = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two" },
     { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)();

package/text-input/text-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/text-input/text-input.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const text_input_1 = require("./text-input");
+const snap_test_1 = require("../utils/snap-test");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(text_input_1.TextInput, { helperText: "helper text", label: "label", leftAddon: "left addon", rightAddon: "right addon", leftElement: "left element", rightElement: "right element" }));

package/utils/snap-test.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const snapTest: (name: string, component: ReactNode) => void;

package/utils/snap-test.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snapTest = void 0;
+const react_test_renderer_1 = require("react-test-renderer");
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../context");
+const get_provider_config_1 = require("../_private-utils/get-provider-config");
+const snapTest = (name, component) => {
+    it(name, () => {
+        const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component)).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+};
+exports.snapTest = snapTest;

package/utils/tailwind-config.js

@@ -26,6 +26,13 @@ module.exports = {
     theme: {
         containers: CONTAINERS,
         screens: SCREENS,
+        inputSize: {
+            xs: "30px",
+            sm: "34px",
+            default: "38px",
+            lg: "42px",
+            xl: "46px",
+        },
         extend: {
             borderRadius: {
                 inherit: "inherit",

package/text-input/test-input.spec.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_test_renderer_1 = require("react-test-renderer");
-const text_input_1 = require("./text-input");
-it("render basic", () => {
-    const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(text_input_1.TextInput, { helperText: "helper text", label: "label", leftAddon: "left addon", rightAddon: "right addon", leftElement: "left element", rightElement: "right element" })).toJSON();
-    expect(tree).toMatchSnapshot();
-});