@uxf/ui 1.0.0-beta.12 → 1.0.0-beta.121

package/button-list/button-list.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonList = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@headlessui/react");
+const button_1 = require("../button");
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("../icon");
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const use_dropdown_1 = require("../hooks/use-dropdown");
+const MenuButton = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment,@typescript-eslint/no-unused-vars
+    const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        ...restProps,
+        className: (0, cx_1.cx)("uxf-button-list__menu-button", className),
+    });
+    return (react_1.default.createElement("a", { ...anchorProps },
+        icon && react_1.default.createElement(icon_1.Icon, { name: icon, className: "uxf-button-list__menu-button-icon" }),
+        label && react_1.default.createElement("span", { className: "uxf-button-list__menu-button-label" }, label)));
+};
+const ButtonList = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const buttonsToRender = props.buttons.slice(0, props.visibleButtonsCount);
+    const restButtons = props.buttons.slice(props.visibleButtonsCount, props.buttons.length);
+    const openButtonIcon = ((_a = props.openButton) === null || _a === void 0 ? void 0 : _a.icon) === null ? null : (_c = (_b = props.openButton) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : "ellipsis-vertical";
+    const openButtonLabel = (_e = (_d = props.openButton) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : null;
+    const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.menuPlacement) !== null && _f !== void 0 ? _f : "bottom-start");
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-button-list", props.className) },
+        buttonsToRender.map((button, index) => {
+            var _a, _b, _c;
+            const { icon, label, ...restProps } = button;
+            return (react_1.default.createElement(button_1.Button, { key: index, ...restProps, color: (_a = restProps.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = restProps.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = restProps.variant) !== null && _c !== void 0 ? _c : props.variant, className: (0, cx_1.cx)(restProps.className, "uxf-button-list__button") },
+                icon && react_1.default.createElement(icon_1.Icon, { name: icon, className: "uxf-button-list__button-icon" }),
+                label && react_1.default.createElement("span", { className: "uxf-button-list__button-label" }, label)));
+        }),
+        restButtons.length > 0 && (react_1.default.createElement(react_2.Menu, { as: "div", className: "uxf-button-list__menu" },
+            react_1.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...props.openButton, color: (_h = (_g = props.openButton) === null || _g === void 0 ? void 0 : _g.color) !== null && _h !== void 0 ? _h : props.color, size: (_k = (_j = props.openButton) === null || _j === void 0 ? void 0 : _j.size) !== null && _k !== void 0 ? _k : props.size, variant: (_m = (_l = props.openButton) === null || _l === void 0 ? void 0 : _l.variant) !== null && _m !== void 0 ? _m : props.variant, className: (0, cx_1.cx)((_o = props.openButton) === null || _o === void 0 ? void 0 : _o.className, "uxf-button-list__open-button"), isIconButton: !!openButtonIcon && !openButtonLabel, ref: dropdown.reference },
+                openButtonIcon && react_1.default.createElement(icon_1.Icon, { name: openButtonIcon, className: "uxf-button-list__open-button-icon" }),
+                openButtonLabel && (react_1.default.createElement("span", { className: "uxf-button-list__open-button-label" }, openButtonLabel))),
+            react_1.default.createElement(react_2.Menu.Items, { className: "uxf-button-list__menu-items", ref: dropdown.floating }, restButtons.map((button, index) => {
+                var _a, _b, _c;
+                return (react_1.default.createElement(react_2.Menu.Item, { key: index },
+                    react_1.default.createElement(MenuButton, { ...button, color: (_a = button.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = button.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = button.variant) !== null && _c !== void 0 ? _c : props.variant })));
+            }))))));
+};
+exports.ButtonList = ButtonList;

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./button-list").ButtonGroupProps>;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/button-list/button-list.stories.js

@@ -0,0 +1,55 @@
+"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 index_1 = require("./index");
+exports.default = {
+    title: "UI/ButtonList",
+    component: index_1.ButtonList,
+};
+const Default = () => {
+    const component = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 0, variant: "outlined", buttons: [
+                { label: "First item" },
+                { label: "Second item" },
+                { label: "Third item" },
+                { label: "Fourth item", disabled: true },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "white", buttons: [
+                { label: "First item" },
+                { label: "Second item" },
+                { label: "Third item" },
+                { label: "Fourth item" },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 2, buttons: [
+                // eslint-disable-next-line no-console
+                { label: "First item", onClick: console.log },
+                { label: "Second item", color: "success" },
+                { label: "Third item" },
+                // eslint-disable-next-line no-console
+                { label: "Fourth item", onClick: console.log },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 1, size: "xs", color: "error", variant: "outlined", buttons: [
+                // eslint-disable-next-line no-console
+                { icon: "check", label: "First item", onClick: console.log },
+                { icon: "user", label: "Second item", color: "success" },
+                { icon: "cloud", label: "Third item" },
+                // eslint-disable-next-line no-console
+                { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
+            ], openButton: {} }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 3, size: "xs", color: "success", buttons: [
+                // eslint-disable-next-line no-console
+                { icon: "check", label: "First item", onClick: console.log, color: "error" },
+                { icon: "user", label: "Second item", color: "success", size: "default" },
+                { icon: "cloud", label: "Third item" },
+                // eslint-disable-next-line no-console
+                { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
+            ], openButton: { variant: "outlined", color: "default" } })));
+    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)));
+};
+exports.Default = Default;

package/button-list/index.d.ts

@@ -0,0 +1 @@
+export { ButtonList, ButtonGroupProps } from "./button-list";

package/button-list/index.js

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

package/checkbox/checkbox.d.ts

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

package/checkbox/checkbox.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const react_1 = require("@headlessui/react");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importDefault(require("react"));
+const checkbox_visual_1 = require("../checkbox-visual");
+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))));
+});

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.d.ts

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

package/checkbox/checkbox.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/Checkbox",
+    component: index_1.Checkbox,
+};
+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" }, checkboxes),
+        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" }, checkboxes)));
+}
+exports.Default = Default;

package/checkbox/index.d.ts

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

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

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,18 @@
+"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");
+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(icon_1.Icon, { name: "check" }))));
+});

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

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

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-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/checkbox-visual/checkbox-visual.d.ts

@@ -0,0 +1,10 @@
+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;
+    isFocused?: 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 forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_1 = __importDefault(require("react"));
+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.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), 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/chip/chip.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+import { ChipColors, ChipSizes } from "@uxf/ui/chip/theme";
+export declare type ChipColor = keyof ChipColors;
+export declare type ChipSize = keyof ChipSizes;
+export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+    color?: ChipColor;
+    size?: ChipSize;
+    onClose?: () => void;
+}
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;

package/chip/chip.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = 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.Chip = (0, forwardRef_1.forwardRef)("Chip", (props, ref) => {
+    var _a, _b;
+    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.onClose && "has-button", props.className);
+    return (react_1.default.createElement("div", { ref: ref, className: chipClassName },
+        typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-chip__text" }, props.children)) : (props.children),
+        props.onClose && (react_1.default.createElement("button", { type: "button", onClick: props.onClose, className: "uxf-chip__button" },
+            react_1.default.createElement("span", { className: "sr-only" }, "Remove option"),
+            react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }))))));
+});

package/chip/chip.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="mdx" />
+import React from "react";
+import Docs from "./chip.docs.mdx";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/chip").ChipProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            page: typeof Docs;
+        };
+    };
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/chip/chip.stories.js

@@ -0,0 +1,32 @@
+"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 chip_1 = require("@uxf/ui/chip");
+const storybook_config_1 = require("../utils/storybook-config");
+const chip_docs_mdx_1 = __importDefault(require("./chip.docs.mdx"));
+exports.default = {
+    title: "UI/Chip",
+    component: chip_1.Chip,
+    parameters: {
+        docs: {
+            page: chip_docs_mdx_1.default,
+        },
+    },
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Chip");
+    const allChips = config.colors.map((color) => (react_1.default.createElement(chip_1.Chip, { key: color, color: color, onClose: () => null }, color)));
+    const allChipsLarge = config.colors.map((color) => (react_1.default.createElement(chip_1.Chip, { key: color, color: color, size: "large" }, color)));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-8" },
+            react_1.default.createElement("div", { className: "space-x-4" }, allChips),
+            react_1.default.createElement("div", { className: "space-x-4" }, allChipsLarge)),
+        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-8" },
+            react_1.default.createElement("div", { className: "space-x-4" }, allChips),
+            react_1.default.createElement("div", { className: "space-x-4" }, allChipsLarge))));
+}
+exports.Default = Default;

package/chip/index.d.ts

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

package/chip/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("./chip"), exports);

package/chip/theme.d.ts

@@ -0,0 +1,15 @@
+export interface ChipColors {
+    orange: true;
+    red: true;
+    yellow: true;
+    pink: true;
+    purple: true;
+    indigo: true;
+    green: true;
+    blue: true;
+    default: true;
+}
+export interface ChipSizes {
+    default: true;
+    large: true;
+}

package/chip/theme.js

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