@uxf/ui 1.0.0-beta.56 → 1.0.0-beta.58

package/_private-utils/get-provider-config.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getProviderConfig = void 0;
+const icons_1 = require("../config/icons");
 const getProviderConfig = () => ({
-    icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: { test: { w: 29.65, h: 40 } } },
+    icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: icons_1.ICONS },
 });
 exports.getProviderConfig = getProviderConfig;

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

@@ -28,5 +28,5 @@ export interface AvatarFileInputProps {
     value?: FileResponse | null | undefined;
     namespace?: "default" | "user-files";
 }
-declare const _default: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+export declare const AvatarFileInput: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -23,16 +23,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFileInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importStar(require("react"));
 const error_message_1 = require("../error-message");
 const icon_1 = require("../icon");
 const raster_image_1 = require("../raster-image");
-const forward_ref_1 = require("../utils/forward-ref");
-function AvatarFileInput(props, ref) {
+exports.AvatarFileInput = (0, forwardRef_1.forwardRef)("AvatarFileInput", (props, ref) => {
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.invalid && props.id ? `${props.id}--errormessage` : undefined;
@@ -59,11 +60,10 @@ function AvatarFileInput(props, ref) {
     return (react_1.default.createElement("div", { className: `_form-field ${props.className || ""}`, style: props.style },
         react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input", input.focused && classes_1.CLASSES.IS_FOCUSED, props.disabled && classes_1.CLASSES.IS_DISABLED, props.readOnly && classes_1.CLASSES.IS_READONLY, props.invalid && classes_1.CLASSES.IS_INVALID, props.value && "is-disabled:opacity-50") },
             react_1.default.createElement("label", { className: "sr-only", htmlFor: props.id }, props.label),
-            react_1.default.createElement("div", { className: "rounded-inherit relative flex h-full w-full flex-col items-center justify-center" },
-                react_1.default.createElement(icon_1.Icon, { Component: icon_1.CameraIcon, size: 36, className: "text-gray-800" }),
+            react_1.default.createElement("div", { className: "relative flex h-full w-full flex-col items-center justify-center rounded-inherit" },
+                react_1.default.createElement(icon_1.Icon, { name: "camera", size: 36, className: "text-gray-800" }),
                 react_1.default.createElement("p", { className: "mt-1 text-xs text-gray-800" }, uploading ? "nahrávám..." : props.value ? "změnit foto" : "přidat foto")),
-            !!props.value && (react_1.default.createElement(raster_image_1.RasterImage, { alt: "", className: (0, cx_1.cx)("rounded-inherit absolute left-0 top-0 block h-full w-full object-cover", uploading && "opacity-0"), height: 96, src: props.value, width: 96 })),
-            react_1.default.createElement("input", { accept: "image/*", "aria-describedby": errorId, "aria-invalid": props.invalid, className: "input-reset rounded-inherit absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: props.disabled, form: props.form, id: props.id, name: props.name, onBlur: input.onBlur, onChange: _onChange, onFocus: input.onFocus, readOnly: props.readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.required, tabIndex: props.readOnly ? -1 : undefined, type: "file" })),
+            !!props.value && (react_1.default.createElement(raster_image_1.RasterImage, { alt: "", className: (0, cx_1.cx)("absolute left-0 top-0 block h-full w-full rounded-inherit object-cover", uploading && "opacity-0"), height: 96, src: props.value, width: 96 })),
+            react_1.default.createElement("input", { accept: "image/*", "aria-describedby": errorId, "aria-invalid": props.invalid, className: "input-reset absolute left-0 top-0 h-full w-full cursor-pointer rounded-inherit opacity-0", disabled: props.disabled, form: props.form, id: props.id, name: props.name, onBlur: input.onBlur, onChange: _onChange, onFocus: input.onFocus, readOnly: props.readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.required, tabIndex: props.readOnly ? -1 : undefined, type: "file" })),
         props.invalid && props.error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, props.error)));
-}
-exports.default = (0, forward_ref_1.forwardRef)("AvatarFileInput", AvatarFileInput);
+});

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

@@ -1 +1 @@
-export { default as AvatarFileInput } from "./avatar-file-input";
+export * from "./avatar-file-input";

package/avatar-file-input/index.js

@@ -1,8 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 });
-exports.AvatarFileInput = void 0;
-var avatar_file_input_1 = require("./avatar-file-input");
-Object.defineProperty(exports, "AvatarFileInput", { enumerable: true, get: function () { return __importDefault(avatar_file_input_1).default; } });
+__exportStar(require("./avatar-file-input"), exports);

package/button/button.d.ts

@@ -4,11 +4,10 @@ import React, { AnchorHTMLAttributes } from "react";
 export declare type ButtonVariant = keyof ButtonVariants;
 export declare type ButtonSize = keyof ButtonSizes;
 export declare type ButtonColor = keyof ButtonColors;
-export interface ButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
     color?: ButtonColor;
     isFullWidth?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
-declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
-export default _default;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/button/button.js

@@ -3,20 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
-const forward_ref_1 = require("../utils/forward-ref");
-function Button(props, ref) {
+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, ...restProps } = props;
-    const 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", props.className);
+    const { color, isFullWidth, size, variant, className, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         ...restProps,
-        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"}`, 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),
         react_1.default.createElement("div", { className: "loader" })));
-}
-exports.default = (0, forward_ref_1.forwardRef)("Button", Button);
+});

package/button/button.stories.js

@@ -33,7 +33,7 @@ exports.default = {
 };
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (react_1.default.createElement("div", { className: "space-y-2" }, 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" },
+    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" },
             "Variant: ",
             react_1.default.createElement("span", { className: "font-semibold" }, variant),
@@ -44,9 +44,12 @@ function Default() {
             " ",
             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(button_1.Button, { variant: variant, color: color, size: size }, "Default"),
-            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, loading: true }, "Loading"),
-            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, disabled: true }, "Disabled")),
-        react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, isFullWidth: true }, "Full width"))))))))))));
+            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, 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),
+        react_1.default.createElement("div", { className: "dark space-y-2 rounded bg-gray-900 p-8 text-white" }, allButtons)));
 }
 exports.Default = Default;

package/button/index.d.ts

@@ -1,2 +1 @@
-export { default as Button } from "@uxf/ui/button/button";
 export * from "@uxf/ui/button/button";

package/button/index.js

@@ -13,11 +13,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var button_1 = require("@uxf/ui/button/button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
 __exportStar(require("@uxf/ui/button/button"), exports);

package/button/theme.d.ts

@@ -1,6 +1,7 @@
 export interface ButtonVariants {
-    outlined: true;
     default: true;
+    outlined: true;
+    text: true;
 }
 export interface ButtonSizes {
     xs: true;

package/checkbox/checkbox.d.ts

@@ -1,12 +1,9 @@
-import { CSSProperties } from "react";
-interface Props {
+import React, { CSSProperties } from "react";
+import { FormControlProps } from "../types";
+export interface CheckboxProps extends FormControlProps<boolean> {
     className?: string;
-    checked: boolean;
-    disabled?: boolean;
-    intermediate?: boolean;
+    indeterminate?: boolean;
     label: string;
-    onChange: (checked: boolean) => void;
     style?: Partial<CSSProperties>;
 }
-declare function Checkbox(props: Props): JSX.Element;
-export default Checkbox;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

package/checkbox/checkbox.js

@@ -3,21 +3,19 @@ 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", { viewBox: "0 0 448 512", style: { height: 24 } },
-        react_2.default.createElement("path", { fill: "currentColor", d: "M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z" })));
+    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" })));
 }
-function SquareIcon() {
-    return (react_2.default.createElement("svg", { viewBox: "0 0 448 512", style: { height: 24 } },
-        react_2.default.createElement("path", { fill: "currentColor", d: "M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80z" })));
-}
-function Checkbox(props) {
-    return (react_2.default.createElement(react_1.Switch, { checked: props.checked, className: (0, cx_1.cx)(props.checked && classes_1.CLASSES.IS_SELECTED, props.disabled && classes_1.CLASSES.IS_DISABLED, "uxf-checkbox", props.className), disabled: props.disabled, onChange: props.onChange, style: props.style },
+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.checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
-}
-exports.default = Checkbox;
+        props.value && (react_2.default.createElement("span", { className: "uxf-checkbox__icon" },
+            react_2.default.createElement(CheckIcon, null)))));
+});

package/checkbox/checkbox.stories.d.ts

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

package/checkbox/checkbox.stories.js

@@ -32,9 +32,26 @@ exports.default = {
 };
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
-    return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => {
-                setChecked(!checked);
-            }, checked: checked })));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light flex 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 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

@@ -1 +1 @@
-export { default as Checkbox } from "./checkbox";
+export * from "./checkbox";

package/checkbox/index.js

@@ -1,8 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 });
-exports.Checkbox = void 0;
-var checkbox_1 = require("./checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });
+__exportStar(require("./checkbox"), exports);

package/checkbox-input/checkbox-input.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare function CheckboxInput(): JSX.Element;
-export default CheckboxInput;
+import { FC } from "react";
+export declare const CheckboxInput: FC;

package/checkbox-input/checkbox-input.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = void 0;
 const react_1 = __importDefault(require("react"));
-function CheckboxInput() {
+const CheckboxInput = () => {
     return react_1.default.createElement("div", { className: "uxf-checkbox-input" }, "xx");
-}
-exports.default = CheckboxInput;
+};
+exports.CheckboxInput = CheckboxInput;
+exports.CheckboxInput.displayName = "CheckboxInput";

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { CheckboxInput } from "./index";
+import React from "react";
 declare const _default: {
     title: string;
-    component: typeof CheckboxInput;
+    component: React.FC<{}>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/checkbox-input/index.d.ts

@@ -1 +1 @@
-export { default as CheckboxInput } from "./checkbox-input";
+export * from "./checkbox-input";

package/checkbox-input/index.js

@@ -1,8 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 });
-exports.CheckboxInput = void 0;
-var checkbox_input_1 = require("./checkbox-input");
-Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return __importDefault(checkbox_input_1).default; } });
+__exportStar(require("./checkbox-input"), exports);

package/chip/chip.d.ts

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

package/chip/chip.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.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;
+    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "success"}`, 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)));
+});

package/chip/chip.stories.d.ts

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

package/chip/chip.stories.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.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const chip_1 = require("@uxf/ui/chip");
+exports.default = {
+    title: "UI/Chip",
+    component: chip_1.Chip,
+};
+function Default() {
+    const allChips = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(chip_1.Chip, { color: "success" }, "Success"),
+        react_1.default.createElement(chip_1.Chip, { color: "warning" }, "Warning"),
+        react_1.default.createElement(chip_1.Chip, { color: "error" }, "Error")));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-x-4 rounded bg-white p-8" }, allChips),
+        react_1.default.createElement("div", { className: "dark space-x-4 rounded bg-gray-900 p-8 text-white" }, allChips)));
+}
+exports.Default = Default;

package/chip/index.d.ts

@@ -0,0 +1 @@
+export { Chip } from "./chip";

package/chip/index.js

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

package/chip/theme.d.ts

@@ -0,0 +1,5 @@
+export interface ChipColors {
+    success: true;
+    warning: true;
+    error: 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,17 @@
+import React, { CSSProperties } from "react";
+import { FormControlProps } from "../types";
+import { HexCodeString } from "./color-radio";
+export declare type ColorRadioGroupOptionValue = HexCodeString;
+export interface ColorRadioGroupOption {
+    label: string;
+    value: ColorRadioGroupOptionValue;
+}
+export interface ColorRadioGroupProps extends FormControlProps<ColorRadioGroupOptionValue | null> {
+    className?: string;
+    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) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { className, hiddenLabel, id, isDisabled, label, onChange, options, style, value } = props;
+    const innerRef = (0, react_2.useRef)(null);
+    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", isDisabled);
+    const rootClassName = (0, cx_1.cx)("uxf-color-radio-group-group", className);
+    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, id: id, onChange: onChange, style: style, value: value },
+        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: `uxf-color-radio-group__label ${hiddenLabel ? "uxf-color-radio-group-group__label--hidden" : ""}`, ref: ref }, label),
+        react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, 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: isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: o.checked }))));
+        }))));
+});

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", onChange: (v) => setValue(v), options: options, value: value }))));
+}
+exports.Default = Default;