@uxf/ui 1.0.0-beta.59 → 1.0.0-beta.60

package/avatar/avatar.d.ts

@@ -0,0 +1,5 @@
+import React, { HTMLAttributes } from "react";
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

package/avatar/avatar.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+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.Avatar = (0, forwardRef_1.forwardRef)("Avatar", (props, ref) => {
+    const avatarClassName = (0, cx_1.cx)("uxf-avatar", props.className);
+    return (react_1.default.createElement("div", { ref: ref, className: avatarClassName }, props.src ? react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src }) : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })));
+});

package/avatar/avatar.stories.d.ts

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

package/avatar/avatar.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+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 react_1 = __importDefault(require("react"));
+const avatar_1 = require("./avatar");
+exports.default = {
+    title: "UI/Avatar",
+    component: avatar_1.Avatar,
+};
+function Default() {
+    const testAvatars = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(avatar_1.Avatar, { src: "https://i.picsum.photos/id/1062/5092/3395.jpg?hmac=o9m7qeU51uOLfXvepXcTrk2ZPiSBJEkiiOp-Qvxja-k" }),
+        react_1.default.createElement(avatar_1.Avatar, null)));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light flex items-center space-x-4 rounded bg-white p-8" }, testAvatars),
+        react_1.default.createElement("div", { className: "dark flex items-center space-x-4 rounded bg-gray-900 p-8 text-white" }, testAvatars)));
+}
+exports.Default = Default;

package/avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from "./avatar";

package/avatar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });

package/badge/badge.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes } from "react";
+import { BadgeSizes } from "@uxf/ui/badge/theme";
+export declare type BadgeSize = keyof BadgeSizes;
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    size?: BadgeSize;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;

package/badge/badge.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+exports.Badge = (0, forwardRef_1.forwardRef)("Badge", (props, ref) => {
+    var _a;
+    const badgeClassName = (0, cx_1.cx)("uxf-badge", `uxf-badge--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "medium"}`, props.className);
+    return (react_1.default.createElement("div", { ref: ref, className: badgeClassName },
+        react_1.default.createElement("span", null, props.children)));
+});

package/badge/badge.stories.d.ts

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

package/badge/badge.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+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 react_1 = __importDefault(require("react"));
+const badge_1 = require("./badge");
+const icon_1 = require("../icon");
+exports.default = {
+    title: "UI/Badge",
+    component: badge_1.Badge,
+};
+function Default() {
+    const testBadges = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(badge_1.Badge, { size: "small" }, "5"),
+        react_1.default.createElement(badge_1.Badge, { size: "small" }, "12"),
+        react_1.default.createElement(badge_1.Badge, { size: "small" }, "123"),
+        react_1.default.createElement(badge_1.Badge, { size: "small" }, "1234"),
+        react_1.default.createElement(badge_1.Badge, null, "5"),
+        react_1.default.createElement(badge_1.Badge, null, "12"),
+        react_1.default.createElement(badge_1.Badge, null, "123"),
+        react_1.default.createElement(badge_1.Badge, null, "1234"),
+        react_1.default.createElement(badge_1.Badge, { size: "large" }, "5"),
+        react_1.default.createElement(badge_1.Badge, { size: "large" }, "12"),
+        react_1.default.createElement(badge_1.Badge, { size: "large" }, "123"),
+        react_1.default.createElement(badge_1.Badge, { size: "large" }, "1234"),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(badge_1.Badge, { size: "small" },
+                react_1.default.createElement(icon_1.Icon, { name: "check", size: 12 })),
+            react_1.default.createElement(badge_1.Badge, null,
+                react_1.default.createElement(icon_1.Icon, { name: "check", size: 16 })),
+            react_1.default.createElement(badge_1.Badge, { size: "large" },
+                react_1.default.createElement(icon_1.Icon, { name: "check", size: 24 })))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light flex items-center space-x-4 rounded bg-white p-8" }, testBadges),
+        react_1.default.createElement("div", { className: "dark flex items-center space-x-4 rounded bg-gray-900 p-8 text-white" }, testBadges)));
+}
+exports.Default = Default;

package/badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from "./badge";

package/badge/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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

@@ -0,0 +1,5 @@
+export interface BadgeSizes {
+    small: true;
+    medium: true;
+    large: true;
+}

package/badge/theme.js

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

package/button/button.d.ts

@@ -9,5 +9,6 @@ export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement
     isFullWidth?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;
+    iconButton?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/button/button.js

@@ -10,10 +10,10 @@ const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 exports.Button = (0, forwardRef_1.forwardRef)("Button", (props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { color, isFullWidth, size, variant, className, ...restProps } = props;
+    const { color, iconButton, isFullWidth, size, variant, className, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isFullWidth && "uxf-button--full-width", className),
+        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, iconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
         typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),

package/button/button.stories.js

@@ -27,14 +27,15 @@ exports.Default = void 0;
 const react_1 = __importStar(require("react"));
 const button_1 = require("@uxf/ui/button");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+const icon_1 = require("@uxf/ui/icon");
 exports.default = {
     title: "UI/Button",
     component: button_1.Button,
 };
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    const allButtons = (react_1.default.createElement(react_1.default.Fragment, null, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "pb-4" },
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+    const allButtons = (react_1.default.createElement(react_1.default.Fragment, null, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
+        react_1.default.createElement("div", { className: "text-sm" },
             "Variant: ",
             react_1.default.createElement("span", { className: "font-semibold" }, variant),
             ", Color:",
@@ -43,10 +44,13 @@ function Default() {
             ", Size:",
             " ",
             react_1.default.createElement("span", { className: "font-semibold" }, size)),
-        react_1.default.createElement("div", { className: "mb-2 flex flex-row gap-2" },
+        react_1.default.createElement("div", { className: "flex flex-row 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, size: size, variant: variant }, "Loading"),
-            react_1.default.createElement(button_1.Button, { color: color, disabled: true, size: size, variant: variant }, "Disabled")),
+            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, iconButton: true, onClick: () => void null, size: size, variant: variant },
+                react_1.default.createElement(icon_1.Icon, { name: "check", size: size === "xs" || size === "sm" ? 16 : 24 }))),
+        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"))))))))))));
     return (react_1.default.createElement("div", { className: "flex flex-col space-x-8 lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 rounded bg-white p-8" }, allButtons),

package/checkbox/checkbox.d.ts

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

package/checkbox/checkbox.js

@@ -14,8 +14,10 @@ function CheckIcon() {
         react_2.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
 }
 exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
-    return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox", props.className), disabled: props.isDisabled, onChange: props.onChange, style: props.style, ref: ref },
-        react_2.default.createElement("span", { className: "uxf-checkbox__label" }, props.label),
-        props.value && (react_2.default.createElement("span", { className: "uxf-checkbox__icon" },
-            react_2.default.createElement(CheckIcon, null)))));
+    return (react_2.default.createElement(react_1.Switch.Group, null,
+        react_2.default.createElement("div", { className: "uxf-checkbox__wrapper" },
+            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox", props.className), disabled: props.isDisabled, onChange: props.onChange, ref: ref, style: props.style },
+                react_2.default.createElement("span", { className: "uxf-checkbox__icon" },
+                    react_2.default.createElement(CheckIcon, null))),
+            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));
 });

package/checkbox/checkbox.stories.js

@@ -33,7 +33,7 @@ exports.default = {
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex gap-4 p-20" },
+        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 }),
@@ -43,7 +43,7 @@ function Default() {
             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 gap-4 bg-gray-900 p-20" },
+        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 }),

package/checkbox-button/checkbox-button.d.ts

@@ -0,0 +1,8 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { FormControlProps } from "../types";
+export interface CheckboxButtonProps extends FormControlProps<boolean> {
+    className?: string;
+    label: ReactNode;
+    style?: Partial<CSSProperties>;
+}
+export declare const CheckboxButton: React.ForwardRefExoticComponent<CheckboxButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/checkbox-button/checkbox-button.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxButton = 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" })));
+}
+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)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox-button", props.className), disabled: props.isDisabled, 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))));
+});

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

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

package/checkbox-button/checkbox-button.stories.js

@@ -0,0 +1,57 @@
+"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/CheckboxButton",
+    component: index_1.CheckboxButton,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    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.CheckboxButton, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { 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.CheckboxButton, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }))));
+}
+exports.Default = Default;

package/checkbox-button/index.d.ts

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

package/checkbox-button/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-button"), exports);

package/combobox/combobox.stories.js

@@ -46,11 +46,14 @@ function Default() {
         console.log("Select value: ", v);
         setValue(v);
     };
-    return (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: handleChange, options: options, value: value }),
-        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: handleChange, options: options, value: value }),
-        react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: handleChange, options: options, value: value }),
-        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: handleChange, options: options, value: value })));
+    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
+    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" }, storyComboboxes),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));
 }
 exports.Default = Default;
 function ComponentStructure() {

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1665541422243";
+export declare const ICONS_VERSION = "1666328849970";
 export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
-exports.ICONS_VERSION = "1665541422243";
+exports.ICONS_VERSION = "1666328849970";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -1,4 +1,8 @@
 export declare const ICONS: {
+    readonly calendar: {
+        readonly w: 448;
+        readonly h: 512;
+    };
     readonly camera: {
         readonly w: 512;
         readonly h: 512;
@@ -27,6 +31,10 @@ export declare const ICONS: {
         readonly w: 512;
         readonly h: 512;
     };
+    readonly user: {
+        readonly w: 448;
+        readonly h: 512;
+    };
     readonly xmarkLarge: {
         readonly w: 448;
         readonly h: 512;
@@ -35,6 +43,7 @@ export declare const ICONS: {
 export declare type IconsType = keyof typeof ICONS;
 declare module "@uxf/ui/icon/theme" {
     interface IconsSet {
+        calendar: true;
         camera: true;
         caretDown: true;
         check: true;
@@ -42,6 +51,7 @@ declare module "@uxf/ui/icon/theme" {
         chevronLeft: true;
         chevronRight: true;
         chevronUp: true;
+        user: true;
         xmarkLarge: true;
     }
 }

package/config/icons.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICONS = void 0;
 exports.ICONS = {
+    calendar: { w: 448, h: 512 },
     camera: { w: 512, h: 512 },
     caretDown: { w: 320, h: 512 },
     check: { w: 512, h: 512 },
@@ -10,5 +11,6 @@ exports.ICONS = {
     chevronLeft: { w: 384, h: 512 },
     chevronRight: { w: 384, h: 512 },
     chevronUp: { w: 512, h: 512 },
+    user: { w: 448, h: 512 },
     xmarkLarge: { w: 448, h: 512 },
 };

package/css/avatar.css

@@ -0,0 +1,15 @@
+.uxf-avatar {
+    @apply relative inline-flex items-center justify-center h-10 w-10 rounded-full;
+
+    &__image {
+        @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
+    }
+
+    :root .light & {
+        @apply text-gray-700 bg-gray-200;
+    }
+
+    :root .dark & {
+        @apply text-gray-200 bg-gray-800;
+    }
+}

package/css/badge.css

@@ -0,0 +1,23 @@
+.uxf-badge {
+    @apply inline-flex items-center justify-center font-bold;
+
+    &--size-small {
+        @apply h-6 min-w-[24px] text-sm rounded-[12px] px-1.5;
+    }
+
+    &--size-medium {
+        @apply h-8 min-w-[32px] text-base rounded-[16px] px-2;
+    }
+
+    &--size-large {
+        @apply h-10 min-w-[40px] text-lg rounded-[20px] px-2;
+    }
+
+    :root .light & {
+        @apply text-white bg-primary-500;
+    }
+
+    :root .dark & {
+        @apply text-gray-900 bg-white;
+    }
+}

package/css/button.css

@@ -5,7 +5,7 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center rounded-lg before:rounded-lg font-medium
+    @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition before:transition;
 
     &__text {
@@ -42,6 +42,10 @@
             width: 14px;
             height: 14px;
         }
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-7 w-7;
+        }
     }
 
     &--size-sm {
@@ -51,18 +55,34 @@
             width: 16px;
             height: 16px;
         }
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-8 w-8;
+        }
     }
 
     &--size-default {
         @apply px-4 py-3 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-12 w-12;
+        }
     }
 
     &--size-lg {
         @apply px-8 py-5 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-16 w-16;
+        }
     }
 
     &--size-xl {
         @apply px-10 py-6 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-[72px] w-[72px];
+        }
     }
 
     &--variant-outlined {
@@ -185,7 +205,7 @@
         @apply before:border-transparent;
 
         :root .light & {
-            @apply hover:bg-black/10 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+            @apply hover:bg-gray-200 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
 
             &.is-disabled {
                 @apply text-gray-400;
@@ -193,7 +213,7 @@
         }
 
         :root .dark & {
-            @apply hover:bg-white/10 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+            @apply hover:bg-gray-800 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
 
             &.is-disabled {
                 @apply text-gray-600;