@uxf/ui 1.0.0-beta.131 → 1.0.0-beta.133

package/avatar/avatar.spec.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const avatar_1 = require("./avatar");
 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" }));
+const avatar_stories_1 = require("./avatar.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(avatar_stories_1.Default, null));

package/avatar/index.d.ts

@@ -1 +1,2 @@
-export * from "./avatar";
+export type { AvatarProps } from "./avatar";
+export { Avatar } from "./avatar";

package/avatar/index.js

@@ -1,17 +1,5 @@
 "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("./avatar"), exports);
+exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });

package/avatar-file-input/avatar-file-input.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { BaseFileInputProps } from "../file-input/file-input-base";
-export interface AvatarFileInputProps extends BaseFileInputProps {
+import { _FileInputBaseProps } from "../file-input/_file-input-base";
+export interface AvatarFileInputProps extends _FileInputBaseProps {
     helperText?: ReactNode;
     label?: ReactNode;
 }

package/avatar-file-input/avatar-file-input.js

@@ -29,7 +29,7 @@ const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importStar(require("react"));
-const file_input_base_1 = require("../file-input/file-input-base");
+const _file_input_base_1 = require("../file-input/_file-input-base");
 const icon_1 = require("../icon");
 exports.AvatarFileInput = (0, forwardRef_1.forwardRef)("AvatarFileInput", (props, ref) => {
     const generatedId = (0, react_1.useId)();
@@ -42,6 +42,6 @@ exports.AvatarFileInput = (0, forwardRef_1.forwardRef)("AvatarFileInput", (props
         react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label", stateClassNames), htmlFor: id, tabIndex: 0 },
             react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-avatar-file-input__label__icon", stateClassNames), name: "cloud", size: 28 })),
         props.label && typeof props.label === "string" ? (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-avatar-file-input__label-text", stateClassNames) }, props.label)) : (props.label),
-        react_1.default.createElement(file_input_base_1.BaseFileInput, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled, 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 }),
+        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 }),
         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))));
 });

package/avatar-file-input/avatar-file-input.spec.d.ts

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

package/avatar-file-input/avatar-file-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 snap_test_1 = require("../utils/snap-test");
+const avatar_file_input_stories_1 = require("./avatar-file-input.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(avatar_file_input_stories_1.Default, null));

package/avatar-file-input/avatar-file-input.stories.js

@@ -1,31 +1,54 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 uploadFIle_mock_1 = require("@uxf/ui/utils/mocks/uploadFIle.mock");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const index_1 = require("./index");
+const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/AvatarFileInput",
     component: index_1.AvatarFileInput,
 };
 function Default() {
-    const handleChange = (value) => {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", (v) => {
         return new Promise(() => {
             // eslint-disable-next-line no-console
-            console.log("Changed:", value);
+            console.log("Changed:", v);
+            setValue(v);
         });
-    };
-    const handleUploadError = (err) => {
+    });
+    const onUploadError = (err) => {
         // eslint-disable-next-line no-console
         console.log("Upload error", err);
     };
     const storyAvatarFileInputs = (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(index_1.AvatarFileInput, { onChange: handleChange, onUploadError: handleUploadError, onUploadFile: uploadFIle_mock_1.uploadFile }),
-        react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, onChange: handleChange, onUploadError: handleUploadError, onUploadFile: uploadFIle_mock_1.uploadFile }),
-        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", isInvalid: true, label: "Vyberte Avatar", onChange: handleChange, onUploadError: handleUploadError, onUploadFile: uploadFIle_mock_1.uploadFile })));
+        react_1.default.createElement(index_1.AvatarFileInput, { onChange: onChange, onUploadError: onUploadError, onUploadFile: uploadFIle_mock_1.uploadFile, value: value }),
+        react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: uploadFIle_mock_1.uploadFile, value: value }),
+        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", isInvalid: true, label: "Vyberte Avatar", onChange: onChange, onUploadError: onUploadError, onUploadFile: uploadFIle_mock_1.uploadFile, value: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyAvatarFileInputs),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyAvatarFileInputs)));

package/avatar-file-input/index.d.ts

@@ -1 +1,2 @@
-export * from "./avatar-file-input";
+export type { AvatarFileInputProps } from "./avatar-file-input";
+export { AvatarFileInput } from "./avatar-file-input";

package/avatar-file-input/index.js

@@ -1,17 +1,5 @@
 "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("./avatar-file-input"), exports);
+exports.AvatarFileInput = void 0;
+var avatar_file_input_1 = require("./avatar-file-input");
+Object.defineProperty(exports, "AvatarFileInput", { enumerable: true, get: function () { return avatar_file_input_1.AvatarFileInput; } });

package/badge/badge.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { BadgeSizes } from "@uxf/ui/badge/theme";
-export declare type BadgeSize = keyof BadgeSizes;
+export type BadgeSize = keyof BadgeSizes;
 export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
     size?: BadgeSize;
 }

package/badge/badge.spec.d.ts

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

package/badge/badge.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 snap_test_1 = require("../utils/snap-test");
+const badge_stories_1 = require("./badge.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(badge_stories_1.Default, null));

package/badge/index.d.ts

@@ -1 +1,3 @@
-export * from "./badge";
+export type { BadgeProps } from "./badge";
+export type { BadgeSizes } from "./theme";
+export { Badge } from "./badge";

package/badge/index.js

@@ -1,17 +1,5 @@
 "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("./badge"), exports);
+exports.Badge = void 0;
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });

package/badge/theme.d.ts

@@ -3,3 +3,4 @@ export interface BadgeSizes {
     medium: true;
     large: true;
 }
+export type BadgeSize = keyof BadgeSizes;

package/button/button.d.ts

@@ -1,9 +1,9 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
 import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
 import React, { AnchorHTMLAttributes } from "react";
-export declare type ButtonVariant = keyof ButtonVariants;
-export declare type ButtonSize = keyof ButtonSizes;
-export declare type ButtonColor = keyof ButtonColors;
+export type ButtonVariant = keyof ButtonVariants;
+export type ButtonSize = keyof ButtonSizes;
+export type ButtonColor = keyof ButtonColors;
 export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
     color?: ButtonColor;
     isFullWidth?: boolean;

package/button/button.spec.d.ts

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

package/button/button.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 snap_test_1 = require("../utils/snap-test");
+const button_stories_1 = require("./button.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(button_stories_1.Default, null));

package/button/button.stories.d.ts

@@ -1,13 +1,9 @@
-/// <reference types="mdx" />
 import React from "react";
-import Docs from "./button.docs.mdx";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("@uxf/ui/button").ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
     parameters: {
-        docs: {
-            page: typeof Docs;
-        };
+        docs: {};
     };
 };
 export default _default;

package/button/button.stories.js

@@ -22,27 +22,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
 const react_1 = __importStar(require("react"));
-const button_docs_mdx_1 = __importDefault(require("./button.docs.mdx"));
+// import Docs from "./button.docs.mdx";
 exports.default = {
     title: "UI/Button",
     component: button_1.Button,
     parameters: {
         docs: {
-            page: button_docs_mdx_1.default,
+        // page: Docs,
         },
     },
 };
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    // eslint-disable-next-line no-console
+    const onClick = console.log;
     const storyButtons = 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" },
         react_1.default.createElement("div", { className: "text-sm dark:text-gray-100" },
             "Variant: ",
@@ -54,15 +53,15 @@ function Default() {
             " ",
             react_1.default.createElement("span", { className: "font-semibold" }, size)),
         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"),
-            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: () => void null, size: size, variant: variant },
+            react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Default"),
+            react_1.default.createElement(button_1.Button, { color: color, loading: true, onClick: onClick, size: size, variant: variant }, "Loading"),
+            react_1.default.createElement(button_1.Button, { color: color, disabled: true, onClick: onClick, size: size, variant: variant }, "Disabled"),
+            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant },
                 react_1.default.createElement(icon_1.Icon, { name: "check" })),
-            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: () => void null, size: size, variant: variant, loading: true },
+            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: onClick, size: size, variant: variant, loading: true },
                 react_1.default.createElement(icon_1.Icon, { name: "check" })),
-            react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: () => void null, size: size, variant: variant }, "Custom width")),
-        react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: () => void null, size: size, variant: variant }, "Full width"),
+            react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: onClick, size: size, variant: variant }, "Custom width")),
+        react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: onClick, size: size, variant: variant }, "Full width"),
         react_1.default.createElement("hr", null))))))))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyButtons),

package/button/index.d.ts

@@ -1 +1,3 @@
-export * from "@uxf/ui/button/button";
+export type { ButtonProps } from "./button";
+export type { ButtonColor, ButtonSize, ButtonVariant } from "./theme";
+export { Button } from "./button";

package/button/index.js

@@ -1,17 +1,5 @@
 "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("@uxf/ui/button/button"), exports);
+exports.Button = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });

package/button/theme.d.ts

@@ -4,6 +4,7 @@ export interface ButtonVariants {
     outlined: true;
     text: true;
 }
+export type ButtonVariant = keyof ButtonVariants;
 export interface ButtonSizes {
     xs: true;
     sm: true;
@@ -11,8 +12,10 @@ export interface ButtonSizes {
     lg: true;
     xl: true;
 }
+export type ButtonSize = keyof ButtonSizes;
 export interface ButtonColors {
     default: true;
     success: true;
     error: true;
 }
+export type ButtonColor = keyof ButtonColors;

package/button-group/button-group.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, FC, PropsWithChildren } from "react";
 export interface ButtonGroupProps {
     className?: string;
-    style?: Partial<CSSProperties>;
+    style?: CSSProperties;
 }
 export declare const ButtonGroup: FC<PropsWithChildren<ButtonGroupProps>>;

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

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

package/button-group/button-group.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 snap_test_1 = require("../utils/snap-test");
+const button_group_stories_1 = require("./button-group.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(button_group_stories_1.Default, null));

package/button-group/button-group.stories.js

@@ -14,23 +14,25 @@ exports.default = {
     component: index_1.ButtonGroup,
 };
 const Default = () => {
+    // eslint-disable-next-line no-console
+    const onClick = console.log;
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonGroup, null,
-            react_1.default.createElement(button_1.Button, { onClick: console.log }, "First"),
-            react_1.default.createElement(button_1.Button, { onClick: console.log }, "Second"),
-            react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: console.log },
+            react_1.default.createElement(button_1.Button, { onClick: onClick }, "First"),
+            react_1.default.createElement(button_1.Button, { onClick: onClick }, "Second"),
+            react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: onClick },
                 react_1.default.createElement(icon_1.Icon, { name: "check", size: 16 }))),
         react_1.default.createElement(index_1.ButtonGroup, null,
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: console.log }, "First"),
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: console.log }, "Second"),
-            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: console.log }, "Third")),
+            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "First"),
+            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Second"),
+            react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Third")),
         react_1.default.createElement(index_1.ButtonGroup, null,
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: console.log }, "Button with tooltip")),
+                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Button with tooltip")),
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: console.log }, "Second")),
+                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Second")),
             react_1.default.createElement(tooltip_1.Tooltip, { content: "Tooltip" },
-                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: console.log }, "Third")))));
+                react_1.default.createElement(button_1.Button, { size: "sm", variant: "outlined", onClick: onClick }, "Third")))));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, component),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));

package/button-group/index.d.ts

@@ -1 +1,2 @@
-export { ButtonGroup, ButtonGroupProps } from "./button-group";
+export type { ButtonGroupProps } from "./button-group";
+export { ButtonGroup } from "./button-group";

package/button-list/button-list.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 import { ButtonProps } from "../button";
 import { IconName } from "../icon/types";
 import { Placement } from "@floating-ui/react";
-declare type SingleButtonProps = Omit<ButtonProps, "children"> & {
+type SingleButtonProps = Omit<ButtonProps, "children"> & {
     icon?: IconName | null;
     label?: ReactNode;
 };

package/button-list/button-list.spec.d.ts

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

package/button-list/button-list.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 snap_test_1 = require("../utils/snap-test");
+const button_list_stories_1 = require("./button-list.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(button_list_stories_1.Default, null));

package/button-list/index.d.ts

@@ -1 +1,2 @@
-export { ButtonList, ButtonListProps } from "./button-list";
+export type { ButtonListProps } from "./button-list";
+export { ButtonList } from "./button-list";

package/checkbox/checkbox.d.ts

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

package/checkbox/checkbox.js

@@ -4,15 +4,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
+const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_2 = __importDefault(require("react"));
-const checkbox_visual_1 = require("../checkbox-visual");
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../icon");
 exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
     var _a, _b, _c;
-    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: (_b = props.value) !== null && _b !== void 0 ? _b : false, 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, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, size: props.size, value: (_c = props.value) !== null && _c !== void 0 ? _c : false })),
-            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));
+    const onChange = () => props.onChange(!props.value);
+    const clickableProps = (0, useClickableProps_1.useClickableProps)({
+        "aria-checked": props.value,
+        "aria-disabled": props.isDisabled,
+        "aria-invalid": props.isInvalid,
+        "aria-readonly": props.isReadOnly,
+        "aria-required": props.isRequired,
+        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.isFocused && classes_1.CLASSES.IS_FOCUSED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, props.className),
+        onBlur: props.onBlur,
+        onClick: onChange,
+        onFocus: props.onFocus,
+        role: "switch",
+        style: props.style,
+        tabIndex: props.isReadOnly ? -1 : undefined,
+    });
+    const innerClassName = "uxf-checkbox__inner";
+    return (react_1.default.createElement("div", { ...clickableProps, ref: ref }, (_c = (_b = props.renderContent) === null || _b === void 0 ? void 0 : _b.call(props, innerClassName, props.value)) !== null && _c !== void 0 ? _c : react_1.default.createElement(icon_1.Icon, { className: innerClassName, name: "check" })));
 });

package/checkbox/checkbox.spec.js

@@ -4,8 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (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 }));
+const checkbox_stories_1 = require("./checkbox.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(checkbox_stories_1.Default, null));

package/checkbox/checkbox.stories.d.ts

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

package/checkbox/checkbox.stories.js

@@ -24,19 +24,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
+const checkbox_1 = require("./checkbox");
+const action_1 = require("../utils/action");
 exports.default = {
-    title: "UI/Checkbox",
-    component: index_1.Checkbox,
+    title: "UI/CheckboxInput",
+    component: checkbox_1.Checkbox,
 };
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
+    const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     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" })));
+        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, 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)));

package/checkbox/index.d.ts

@@ -1 +1,3 @@
-export * from "./checkbox";
+export type { CheckboxProps } from "./checkbox";
+export type { CheckboxSize } from "./theme";
+export { Checkbox } from "./checkbox";