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

package/checkbox/checkbox.js

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

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,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/Checkbox",
+    component: index_1.Checkbox,
+};
+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.Checkbox, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isDisabled: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isInvalid: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked })),
+        react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" },
+            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isDisabled: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", isInvalid: true, onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }))));
+}
+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,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)("uxf-checkbox-button", props.className, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+        react_2.default.createElement("span", { className: "uxf-checkbox-button__label" }, props.label),
+        react_2.default.createElement("span", { className: "uxf-checkbox-button__icon" },
+            react_2.default.createElement(CheckIcon, null))));
+});

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/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,14 @@
+export interface ChipColors {
+    default: true;
+    red: true;
+    yellow: true;
+    green: true;
+    blue: true;
+    indigo: true;
+    purple: true;
+    pink: true;
+}
+export interface ChipSizes {
+    default: true;
+    large: true;
+}

package/chip/theme.js

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

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

@@ -0,0 +1,18 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { FormControlProps } from "../types";
+import { HexCodeString } from "../utils/is-light-background";
+export declare type ColorRadioGroupOptionValue = HexCodeString;
+export interface ColorRadioGroupOption {
+    label: string;
+    value: ColorRadioGroupOptionValue;
+}
+export interface ColorRadioGroupProps extends FormControlProps<ColorRadioGroupOptionValue | null> {
+    className?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    id: string;
+    label: string;
+    options: ColorRadioGroupOption[];
+    style?: CSSProperties;
+}
+export declare const ColorRadioGroup: React.ForwardRefExoticComponent<ColorRadioGroupProps & React.RefAttributes<HTMLLabelElement>>;

package/color-radio-group/color-radio-group.js

@@ -0,0 +1,47 @@
+"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.ColorRadioGroup = void 0;
+const react_1 = require("@headlessui/react");
+const react_2 = __importStar(require("react"));
+const use_input_submit_1 = require("../hooks/use-input-submit");
+const label_1 = require("../label");
+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 color_radio_1 = require("./color-radio");
+exports.ColorRadioGroup = (0, forwardRef_1.forwardRef)("ColorRadioGroup", (props, ref) => {
+    const innerRef = (0, react_2.useRef)(null);
+    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
+    const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-color-radio-group-group", props.className);
+    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
+        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-color-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label),
+        react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, props.options.map((option) => {
+            const optionStyle = { "--option-color": option.value };
+            return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), value: option.value, style: optionStyle }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { isDisabled: props.isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: o.checked }))));
+        })),
+        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
+});

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

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

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

@@ -0,0 +1,79 @@
+"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/ColorRadioGroup",
+    component: index_1.ColorRadioGroup,
+};
+const options = [
+    {
+        value: "#ff0000",
+        label: "Red",
+    },
+    {
+        value: "#00ff00",
+        label: "Green",
+    },
+    {
+        value: "#ff00ff",
+        label: "Purple",
+    },
+    {
+        value: "#000000",
+        label: "Red",
+    },
+    {
+        value: "#ffff00",
+        label: "Green",
+    },
+    {
+        value: "#00ffff",
+        label: "Purple",
+    },
+    {
+        value: "#cccccc",
+        label: "Red",
+    },
+    {
+        value: "#3b1298",
+        label: "Green",
+    },
+    {
+        value: "#0000ff",
+        label: "Purple",
+    },
+];
+function Default() {
+    const [value, setValue] = (0, react_1.useState)(options[0].value);
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light w-1/2 p-20" },
+            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", onChange: (v) => setValue(v), options: options, value: value })),
+        react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
+            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Dark Color Radio group with helper text", helperText: "Some helper text", onChange: (v) => setValue(v), options: options, value: value }))));
+}
+exports.Default = Default;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { FormControlProps } from "../types";
+import { HexCodeString } from "../utils/is-light-background";
+export interface ColorRadioProps extends FormControlProps<boolean> {
+    color: HexCodeString;
+    colorLabel: string;
+}
+export declare const ColorRadio: React.ForwardRefExoticComponent<ColorRadioProps & React.RefAttributes<HTMLDivElement>>;

package/color-radio-group/color-radio.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorRadio = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const is_light_background_1 = require("../utils/is-light-background");
+function CheckIcon() {
+    return (react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 16 16" },
+        react_1.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
+}
+exports.ColorRadio = (0, forwardRef_1.forwardRef)("ColorRadio", (props, ref) => {
+    const colorRadioStyle = { "--bg-color": props.color };
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-color-radio", 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, style: colorRadioStyle },
+        react_1.default.createElement("span", { className: "uxf-color-radio__label" }, props.colorLabel),
+        react_1.default.createElement("span", { className: `uxf-color-radio__icon ${(0, is_light_background_1.isLightBackground)(props.color) ? "uxf-color-radio__icon--dark" : ""}` },
+            react_1.default.createElement(CheckIcon, null))));
+});

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

@@ -0,0 +1 @@
+export * from "./color-radio-group";

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

package/combobox/combobox.d.ts

@@ -0,0 +1,24 @@
+import { Placement } from "@floating-ui/react-dom";
+import React, { ReactNode } from "react";
+import { IconsSet } from "../icon/theme";
+import { FormControlProps } from "../types";
+export declare type ComboboxValue = number | string;
+export declare type ComboboxOption<T = ComboboxValue> = {
+    disabled?: boolean;
+    id: T;
+    label: string;
+};
+export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Value>> extends FormControlProps<Value | null> {
+    className?: string;
+    dropdownPlacement?: Placement;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    iconName?: keyof IconsSet;
+    id?: string;
+    keyExtractor?: (option: Option) => string | number;
+    label: string;
+    options: Option[];
+    placeholder?: string;
+    renderOption?: (option: Option) => ReactNode;
+}
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;