@uxf/ui 1.0.0-beta.55 → 1.0.0-beta.57

package/_private-utils/get-provider-config.d.ts

@@ -0,0 +1,2 @@
+import { UiContextType } from "../context";
+export declare const getProviderConfig: () => UiContextType;

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

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

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/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/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 { Checkbox } from "./checkbox";

package/checkbox/index.js

@@ -1,8 +1,5 @@
 "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;
 var checkbox_1 = require("./checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });

package/content/content-schema.d.ts

@@ -0,0 +1,3 @@
+export interface ContentSchema {
+    wysiwyg: any;
+}

package/content/content-schema.js

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

package/content/types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode, FC } from "react";
+import { ContentSchema } from "@uxf/ui/content/content-schema";
+import { UseControllerProps } from "react-hook-form";
+export declare type ContentType = keyof ContentSchema;
+interface ContentFormProps<TYPE extends ContentType> extends UseControllerProps<ContentSchema[TYPE]> {
+    type: TYPE;
+    index: number;
+    onRemove: () => void;
+    TypeInputProps: any;
+}
+export declare type ContentFormComponent<TYPE extends ContentType> = FC<ContentFormProps<TYPE>> & {
+    getConfig: () => {
+        type: TYPE;
+        label: ReactNode;
+    };
+};
+interface ContentRendererProps<TYPE extends ContentType> {
+    type: TYPE;
+    data: ContentSchema[TYPE];
+    index: number;
+}
+export declare type ContentRendererComponent<TYPE extends ContentType> = FC<ContentRendererProps<TYPE>> & {
+    getConfig: () => {
+        type: TYPE;
+    };
+};
+export {};

package/content/types.js

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

package/context/context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconName } from "../icon/types";
+export declare type UiContextType = {
+    icon: {
+        spriteFilePath: string;
+        iconsConfig: Record<IconName, {
+            w: number;
+            h: number;
+        }>;
+    };
+};
+export declare const UiContext: import("react").Context<UiContextType | undefined>;

package/context/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UiContext = void 0;
+const react_1 = require("react");
+exports.UiContext = (0, react_1.createContext)(undefined);

package/context/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@uxf/ui/context/context";
+export * from "@uxf/ui/context/provider";
+export * from "@uxf/ui/context/use-component-context";

package/context/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("@uxf/ui/context/context"), exports);
+__exportStar(require("@uxf/ui/context/provider"), exports);
+__exportStar(require("@uxf/ui/context/use-component-context"), exports);

package/context/provider.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from "react";
+import { UiContextType } from "./context";
+declare type UiContextProviderProps = {
+    value: UiContextType;
+    children: ReactNode;
+};
+export declare const UiContextProvider: FC<UiContextProviderProps>;
+export {};

package/context/provider.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 });
+exports.UiContextProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("./context");
+const UiContextProvider = (props) => (react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children));
+exports.UiContextProvider = UiContextProvider;

package/context/use-component-context.d.ts

@@ -0,0 +1,3 @@
+import { UiContextType } from "./context";
+export declare type UiContextComponent = keyof UiContextType;
+export declare const useComponentContext: <T extends "icon">(componentName: T) => UiContextType[T];

package/context/use-component-context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentContext = void 0;
+const react_1 = require("react");
+const context_1 = require("./context");
+const useComponentContext = (componentName) => {
+    const context = (0, react_1.useContext)(context_1.UiContext);
+    if (typeof context === "undefined") {
+        throw new Error(`If you want to use the "${componentName}" UI component, you have to wrap your code in the "UiContextProvider"`);
+    }
+    return context[componentName];
+};
+exports.useComponentContext = useComponentContext;

package/css/checkbox.css

@@ -1,19 +1,85 @@
 .uxf-checkbox {
-    @apply shrink-0 inline-flex items-center justify-center relative rounded-lg text-gray-300 h-6 w-6
-    bg-white transition outline-none
-    before:border before:absolute before:inset-0 before:rounded-lg before:border-current
-    is-selected:text-indigo-600 is-selected:before:border-transparent is-selected:bg-current
-    is-disabled:text-gray-300 is-selected:before:border-transparent
-    is-invalid:text-red-600 is-invalid:before:border-transparent
-    focus-visible:before:border-2 focus-visible:text-gray-800
-    is-selected:hover:text-indigo-900 is-selected:is-invalid:hover:text-red-800
-    is-selected:focus-visible:text-indigo-900
-    is-selected:focus-visible:ring-indigo-600 is-selected:focus-visible:ring-2
-    is-selected:is-invalid:focus-visible:text-red-800 is-selected:is-invalid:focus-visible:ring-red-600
-    is-selected:is-invalid:focus-visible:ring-2;
+    @apply shrink-0 inline-flex items-center justify-center rounded h-6 w-6 transition outline-none border
+    focus-visible:ring-offset-2 focus-visible:ring-2;
 
     &__label {
         @apply sr-only;
     }
+
+    &__icon {
+        @apply w-4 h-4;
+    }
+
+    :root .light & {
+        @apply border-gray-400 focus-visible:ring-blue-500;
+
+        &.is-selected {
+            @apply bg-blue-500 border-none;
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-200 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-200;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-gray-400;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply border-gray-400 focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
+
+        &.is-selected {
+            @apply bg-blue-500 border-none;
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-600 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-600;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-gray-800;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+    }
 }
 

package/css/radio-group.css

@@ -1,8 +1,114 @@
 .uxf-radio-group {
-    @apply bg-red-300;
+    &__option {
+        @apply outline-none focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:rounded-lg;
+    }
+
+    &__option__wrapper {
+        @apply flex justify-between;
+    }
+
+    &__option__label {
+        @apply line-clamp-2;
+    }
 
     &__label {
         @apply mb-2;
     }
+
+    &__label--hidden {
+        @apply sr-only;
+    }
+
+    :root .light & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-blue-500 focus-visible:ring-offset-white;
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
+        }
+
+        .uxf-radio-group__option__label {
+            @apply text-white;
+        }
+    }
+}
+
+.uxf-radio-group--list {
+    .uxf-radio-group__options-wrapper {
+        @apply divide-y divide-gray-200;
+    }
+
+    .uxf-radio-group__option__wrapper {
+        @apply items-center py-4;
+    }
+
+    .uxf-radio-group__option__label {
+        @apply pr-4;
+    }
+
+    :root .light & {
+        .uxf-radio-group--list__option {
+            @apply focus-visible:ring-blue-500 focus-visible:ring-offset-white;
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group--list__option {
+            @apply focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
+        }
+
+        .uxf-radio-group--list__option__label {
+            @apply text-white;
+        }
+    }
+}
+
+.uxf-radio-group--radioButton {
+    .uxf-radio-group__options-wrapper {
+        @apply flex flex-wrap space-x-2;
+    }
+
+    .uxf-radio-group__option__wrapper {
+        @apply flex-col-reverse h-[82px] min-w-[112px] p-3 border rounded-lg;
+
+        &.is-selected {
+            @apply border-2;
+        }
+    }
+
+    :root .light & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-blue-500;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            @apply border-gray-400;
+
+            &.is-selected {
+                @apply border-blue-500;
+            }
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            @apply border-gray-400;
+
+            &.is-selected {
+                @apply border-blue-500;
+            }
+        }
+
+        .uxf-radio-group__option__label {
+            @apply text-white;
+        }
+    }
 }
 

package/css/radio.css

@@ -1,20 +1,90 @@
 .uxf-radio {
-    @apply h-4 w-4 border rounded-full border-gray-300 text-indigo-600;
+    @apply flex items-center justify-center h-6 w-6 border rounded-full transition;
 
-    &.is-selected,.is-readonly {
-        @apply border-primary-500 border-4;
+    &__label {
+        @apply sr-only;
     }
 
-    &.is-invalid {
-        @apply border-error-500;
+    &__inner {
+        @apply rounded-full h-2.5 w-2.5 opacity-0 transition;
     }
 
-    &.is-disabled {
-        @apply border-gray-200
+    &.is-selected {
+        .uxf-radio__inner {
+            @apply opacity-100;
+        }
     }
 
-    &__inner {
-        @apply bg-current rounded-full h-3.5 w-3.5 opacity-0 is-selected:opacity-100;
+    :root .light & {
+        @apply border-gray-400 focus-visible:ring-blue-500 focus-visible:ring-2;
+
+        &.is-selected {
+            @apply bg-blue-500 border-none;
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-200 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-200;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-gray-400;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply border-gray-400 focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
+
+        &.is-selected {
+            @apply bg-blue-500 border-none;
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-600 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-600;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-gray-800;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
     }
 }
 

package/css/toggle.css

@@ -0,0 +1,60 @@
+.uxf-toggle {
+    @apply relative inline-flex h-6 w-12 items-center rounded-full p-0.5 outline-none ring-offset-2
+    focus-visible:ring-2;
+
+    &__label {
+        @apply sr-only;
+    }
+
+    &__inner {
+        @apply inline-block h-5 w-5 transform rounded-full bg-white transition;
+    }
+
+    &.is-selected {
+        .uxf-toggle__inner {
+            @apply translate-x-6;
+        }
+    }
+
+
+    :root .light & {
+        @apply bg-gray-200 focus-visible:ring-blue-500;
+
+        &__inner {
+            @apply bg-white;
+        }
+
+        &.is-selected {
+            @apply bg-blue-500;
+        }
+
+        &.is-disabled {
+            @apply bg-gray-100;
+
+            .uxf-toggle__inner {
+                @apply bg-gray-400;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-400 focus-visible:ring-blue-500 focus-visible:ring-offset-gray-900;
+
+        &.is-selected {
+            @apply bg-blue-500;
+        }
+
+        &__inner {
+            @apply bg-gray-900;
+        }
+
+        &.is-disabled {
+            @apply bg-gray-700;
+
+            .uxf-toggle__inner {
+                @apply bg-gray-500;
+            }
+        }
+    }
+}
+

package/dropdown/dropdown.d.ts

@@ -1,6 +1,6 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
-interface ItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+interface ItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
 }
 declare type ItemsProps = HTMLAttributes<HTMLDivElement>;
 export declare const Dropdown: {

package/icon/icon.d.ts

@@ -1,6 +1,5 @@
-import { IconsSet } from "@uxf/ui/icon/theme";
 import React, { CSSProperties } from "react";
-export declare type IconName = keyof IconsSet;
+import { IconName } from "./types";
 declare type NameOrComponentType = {
     name: IconName;
     Component?: never;

package/icon/icon.js

@@ -4,11 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const context_1 = require("../context");
 const cx_1 = require("../utils/cx");
 const forward_ref_1 = require("../utils/forward-ref");
 const rem_1 = require("../utils/rem");
 function Icon(props, ref) {
     var _a, _b;
+    const componentContext = (0, context_1.useComponentContext)("icon");
     const CustomComponent = props.Component;
     const className = (0, cx_1.cx)("uxf-icon", props.className);
     const preserveAspectRatio = `xMidYMid ${(_a = props.mode) !== null && _a !== void 0 ? _a : "meet"}`;
@@ -19,7 +21,7 @@ function Icon(props, ref) {
             ...((_b = props.style) !== null && _b !== void 0 ? _b : {}),
         }
         : props.style;
-    return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style })) : (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style },
-        react_1.default.createElement("use", { xlinkHref: `/icons-generated/_icon-sprite.svg#icon-sprite--${props.name}` })));
+    return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style })) : (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${componentContext.iconsConfig[props.name].w} ${componentContext.iconsConfig[props.name].h}` },
+        react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
 }
 exports.default = (0, forward_ref_1.forwardRef)("Icon", Icon);

package/icon/types.d.ts

@@ -0,0 +1,2 @@
+import { IconsSet } from "@uxf/ui/icon/theme";
+export declare type IconName = keyof IconsSet;

package/icon/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.55",
+  "version": "1.0.0-beta.57",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,8 @@
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
     "@headlessui/react": "^1.7.2",
-    "@uxf/core": "^3.0.0",
+    "@uxf/core": "^3.1.0",
+    "@uxf/styles": "^2.0.0",
     "jump.js": "^1.0.2"
   },
   "devDependencies": {

package/radio/index.d.ts

@@ -1 +1 @@
-export { default as Radio } from "./radio";
+export { Radio } from "./radio";

package/radio/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 var radio_1 = require("./radio");
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return __importDefault(radio_1).default; } });
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return radio_1.Radio; } });

package/radio/radio.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { FormControlProps } from "../types";
-export declare type RadioProps = FormControlProps<boolean>;
-declare const _default: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export interface RadioProps extends FormControlProps<boolean> {
+    label: string;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLDivElement>>;

package/radio/radio.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = 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 forward_ref_1 = require("../utils/forward-ref");
-function Radio(props, ref) {
-    return (react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-radio", props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); } },
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+exports.Radio = (0, forwardRef_1.forwardRef)("Radio", (props, ref) => {
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio", 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), 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-radio__label" }, props.label),
         react_1.default.createElement("div", { className: "uxf-radio__inner" })));
-}
-exports.default = (0, forward_ref_1.forwardRef)("Radio", Radio);
+});

package/radio/radio.stories.js

@@ -11,18 +11,32 @@ exports.default = {
     component: index_1.Radio,
 };
 function Default() {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Default"),
-        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { value: false }),
-            react_1.default.createElement(index_1.Radio, { value: true })),
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Invalid"),
-        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { value: false, isInvalid: true }),
-            react_1.default.createElement(index_1.Radio, { value: true, isInvalid: true })),
-        react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Disabled"),
-        react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { value: false, isDisabled: true }),
-            react_1.default.createElement(index_1.Radio, { value: true, isDisabled: true }))));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light p-20" },
+            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Default"),
+            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber" }),
+                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber" })),
+            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Invalid"),
+            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isInvalid: true }),
+                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isInvalid: true })),
+            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold" }, "Disabled"),
+            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isDisabled: true }),
+                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isDisabled: true }))),
+        react_1.default.createElement("div", { className: "dark bg-gray-900 p-20" },
+            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold text-white" }, "Default"),
+            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber" }),
+                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber" })),
+            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold text-white" }, "Invalid"),
+            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isInvalid: true }),
+                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isInvalid: true })),
+            react_1.default.createElement("div", { className: "mt-4 mb-2 font-semibold text-white" }, "Disabled"),
+            react_1.default.createElement("div", { className: "flex flex-row gap-4" },
+                react_1.default.createElement(index_1.Radio, { value: false, label: "Vyber", isDisabled: true }),
+                react_1.default.createElement(index_1.Radio, { value: true, label: "Vyber", isDisabled: true })))));
 }
 exports.Default = Default;

package/radio-group/index.d.ts

@@ -1 +1 @@
-export { default as RadioGroup } from "./radio-group";
+export { RadioGroup } from "./radio-group";

package/radio-group/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = void 0;
 var radio_group_1 = require("./radio-group");
-Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return __importDefault(radio_group_1).default; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_group_1.RadioGroup; } });

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

@@ -1,25 +1,20 @@
-import React, { CSSProperties, FocusEventHandler } from "react";
+import React, { CSSProperties } from "react";
+import { FormControlProps } from "../types";
 export declare type RadioGroupOptionValue = string | number;
 export interface RadioGroupOption {
     disabled?: boolean;
     label: string;
     value: RadioGroupOptionValue;
 }
-export interface RadioGroupProps {
+export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue | null> {
     className?: string;
-    disabled?: boolean;
     error?: string;
     forceColumn?: boolean;
     hiddenLabel?: boolean;
     id: string;
-    invalid?: boolean;
     label: string;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-    onChange: (value: RadioGroupOptionValue) => void;
-    onFocus?: FocusEventHandler<HTMLDivElement>;
     options: RadioGroupOption[];
     style?: CSSProperties;
-    value?: RadioGroupOptionValue | null;
+    variant?: "list" | "radioButton";
 }
-declare const _default: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group.js

@@ -23,23 +23,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
 const react_1 = require("@headlessui/react");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const react_2 = __importStar(require("react"));
 const error_message_1 = require("../error-message");
 const use_input_submit_1 = require("../hooks/use-input-submit");
 const label_1 = require("../label");
 const radio_1 = require("../radio");
-const forward_ref_1 = require("../utils/forward-ref");
-function RadioGroup(props, ref) {
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+exports.RadioGroup = (0, forwardRef_1.forwardRef)("RadioGroup", (props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, disabled, error, forceColumn, hiddenLabel, id, invalid, label, onBlur, onChange, onFocus, options, style, value, } = props;
+    const { isDisabled, error, hiddenLabel, id, isInvalid, label, onChange, options, style, value, variant = "list", } = props;
     const innerRef = (0, react_2.useRef)(null);
-    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", disabled);
-    const errorId = invalid ? `${id}--errormessage` : undefined;
-    return (react_2.default.createElement(react_1.RadioGroup, { className: `_form-field ${className || ""}`, disabled: disabled, id: id, value: value, onChange: onChange, style: style },
-        !hiddenLabel && (react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label" }, label)),
-        react_2.default.createElement("div", { className: `flex ${forceColumn ? "flex-col" : "flex-wrap items-center"} focus-visible:ring-gray-dark outline-none focus-visible:ring-2`, onBlur: onBlur, onFocus: onFocus, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), tabIndex: disabled ? -1 : 0 }, options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { as: react_2.Fragment, disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => react_2.default.createElement(radio_1.Radio, { value: o.checked, isDisabled: disabled || o.disabled, isInvalid: invalid }))))),
-        invalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
-}
-exports.default = (0, forward_ref_1.forwardRef)("RadioGroup", RadioGroup);
+    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", isDisabled);
+    const errorId = isInvalid ? `${id}--errormessage` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-radio-group", variant === "list" && "uxf-radio-group--list", variant === "radioButton" && "uxf-radio-group--radioButton", isDisabled && classes_1.CLASSES.IS_DISABLED, isInvalid && classes_1.CLASSES.IS_INVALID);
+    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, disabled: isDisabled, id: id, onChange: onChange, style: style, value: value },
+        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: `uxf-radio-group__label ${hiddenLabel ? "uxf-radio-group__label--hidden" : ""}`, ref: ref }, label),
+        react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option__wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
+            react_2.default.createElement("span", { className: "uxf-radio-group__option__label" }, option.label),
+            react_2.default.createElement(radio_1.Radio, { isDisabled: isDisabled || o.disabled, isInvalid: isInvalid, label: option.label, ref: o.checked ? innerRef : undefined, value: o.checked }))))))),
+        isInvalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+});

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

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

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

@@ -41,12 +41,21 @@ const options = [
     },
     {
         value: "3",
-        label: "Radio three",
+        label: "Radio three-sixty",
     },
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)(options[0].value);
-    return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", options: options, label: "Radio group", value: value, onChange: setValue })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "space-z-2 flex" },
+            react_1.default.createElement("div", { className: "light w-1/2 p-20" },
+                react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light 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.RadioGroup, { id: "radiogroup", label: "Dark Radio group", onChange: (v) => setValue(v), options: options, value: value }))),
+        react_1.default.createElement("div", { className: "space-z-2 flex" },
+            react_1.default.createElement("div", { className: "light w-1/2 p-20" },
+                react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" })),
+            react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
+                react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Dark Radio group radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" })))));
 }
 exports.Default = Default;

package/toggle/index.d.ts

@@ -0,0 +1 @@
+export { default as Toggle } from "./toggle";

package/toggle/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var toggle_1 = require("./toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return __importDefault(toggle_1).default; } });

package/toggle/toggle.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+import { FormControlProps } from "../types";
+export interface ToggleProps extends FormControlProps<boolean> {
+    className?: string;
+    label: string;
+    style?: Partial<CSSProperties>;
+}
+declare function Toggle(props: ToggleProps): JSX.Element;
+export default Toggle;

package/toggle/toggle.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+function Toggle(props) {
+    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, "uxf-toggle", props.className), disabled: props.isDisabled, onChange: props.onChange, style: props.style },
+        react_2.default.createElement("span", { className: "uxf-toggle__label" }, props.label),
+        react_2.default.createElement("span", { className: "uxf-toggle__inner" })));
+}
+exports.default = Toggle;

package/toggle/toggle.stories.d.ts

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

package/toggle/toggle.stories.js

@@ -0,0 +1,51 @@
+"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/Toggle",
+    component: index_1.Toggle,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light flex gap-4 p-20" },
+            react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked, isDisabled: true })),
+        react_1.default.createElement("div", { className: "dark flex gap-4 bg-gray-900 p-20" },
+            react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked }),
+            react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                    setChecked((prev) => !prev);
+                }, value: checked, isDisabled: true }))));
+}
+exports.Default = Default;