@uxf/ui 1.0.0-beta.73 → 1.0.0-beta.75

package/css/date-picker-input.css

@@ -33,6 +33,18 @@
         }
     }
 
+    &__popover {
+        @apply absolute left-0 z-dropdown mt-3 max-w-md rounded-lg border p-2 shadow-xl;
+
+        :root .light & {
+            @apply bg-white border-gray-500;
+        }
+
+        :root .dark & {
+            @apply bg-gray-900 border-2 border-gray-700;
+        }
+    }
+
     &--has-right-addon {
         .uxf-date-picker-input__wrapper {
             @apply rounded-r-none;

package/css/date-picker.css

@@ -1,33 +1,90 @@
 .uxf-date-picker {
-    &__month-select {
-        @apply flex items-center justify-between px-4 md:w-[320px];
+    &__month-select,
+    &__year-select,
+    &__decade-select {
+        @apply flex items-center justify-between px-4 w-[320px] sm:w-[360px];
+    }
+
+    &__month-calendar,
+    &__year-calendar,
+    &__decade-calendar {
+        @apply grid place-items-center w-full px-4 pt-4 text-center;
     }
 
     &__month-calendar {
-        @apply grid w-full grid-cols-7 px-4 pt-4 text-center;
+        @apply grid-cols-7 gap-0.5;
+    }
+
+    &__year-calendar {
+        @apply grid-cols-3 sm:grid-cols-4 gap-2;
+    }
+
+    &__decade-calendar {
+        @apply grid-cols-3 gap-2;
     }
 
     &__weekday-label {
         @apply uppercase pb-2;
     }
 
+    &__decade-label {
+        @apply font-semibold;
+    }
+
     &__cell {
-        @apply transition hover:bg-gray-200;
+        @apply p-1 transition relative rounded-full outline-none before:absolute before:pointer-events-none
+            before:rounded-full before:-inset-1 focus-visible:before:border-2;
 
         &__day {
-            @apply w-9 h-9 rounded-full;
+            @apply w-9 h-9;
+        }
 
-            &--today {
-                @apply bg-primary-200 hover:bg-primary-300;
-            }
+        &__month {
+            @apply w-full;
+        }
 
-            &--selected {
-                @apply bg-primary-500 text-white hover:bg-primary-500;
-            }
+        &__year {
+            @apply w-full;
+        }
+    }
+
+    :root .light & {
+        @apply text-gray-900;
+
+        .uxf-date-picker__cell {
+            @apply hover:bg-gray-200 focus-visible:before:border-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--today {
+            @apply bg-primary-200 hover:bg-primary-300;
+        }
+
+        .uxf-date-picker__cell__day--selected {
+            @apply bg-primary-500 text-white hover:bg-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--not-current-month {
+            @apply text-gray-400;
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-900 text-white;
+
+        .uxf-date-picker__cell {
+            @apply hover:bg-gray-700 focus-visible:before:border-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--today {
+            @apply bg-primary-400/50 hover:bg-primary-400/60;
+        }
+
+        .uxf-date-picker__cell__day--selected {
+            @apply bg-primary-500 text-white hover:bg-primary-500;
+        }
 
-            &--not-current-month {
-                @apply text-gray-400;
-            }
+        .uxf-date-picker__cell__day--not-current-month {
+            @apply text-gray-600;
         }
     }
 }

package/css/toggle.css

@@ -4,6 +4,14 @@
 
     &__wrapper {
         @apply flex items-center justify-between space-x-4 p-4;
+
+        &--reversed {
+            @apply flex-row-reverse space-x-0;
+
+            .uxf-toggle__label {
+                @apply pr-4;
+            }
+        }
     }
 
     &__label {

package/date-picker-input/date-picker-decade.js

@@ -56,13 +56,13 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
             onYearSelect(date);
         }
     }, [canGoToYear, onYearSelect]);
-    return (react_1.default.createElement("div", { className: "flex w-full flex-col items-start" },
-        react_1.default.createElement("div", { className: "flex w-full items-center justify-between px-4 md:w-[300px]" },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "uxf-date-picker__decade-select" },
             react_1.default.createElement(button_1.Button, { iconButton: true, onClick: handleGoToPrevDecadeClick, title: "Zp\u011Bt", variant: "text" },
                 react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
-            react_1.default.createElement("p", { className: "uppercase" }, decadeLabel),
+            react_1.default.createElement("p", { className: "uxf-date-picker__decade-label" }, decadeLabel),
             react_1.default.createElement(button_1.Button, { iconButton: true, onClick: handleGoToNextDecadeClick, title: "Vp\u0159ed", variant: "text" },
                 react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "md:grild-cols-8 grid w-full grid-cols-6 px-4 pt-4" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-datepicker-cell", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(year.date).year() === currentYear && "uxf-datepicker-cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date) }, year.yearLabel))))));
+        react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(year.date).year() === currentYear && "uxf-date-picker__cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date) }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "DatePickerDecade";

package/date-picker-input/date-picker-input.js

@@ -56,5 +56,5 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
                 react_1.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-date-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "none", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte datum...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value ? (0, localized_dayjs_1.localizedDayjs)(props.value).format("l") : "" }),
                 react_1.default.createElement("span", { className: "uxf-date-picker-input__right-element" }, props.rightElement)),
             !props.isDisabled && !props.isReadOnly && (react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
-                react_1.default.createElement(react_2.Popover.Panel, { className: "absolute left-0 z-dropdown mt-3 max-w-md rounded border border-gray-500 bg-white p-2 shadow-xl", static: true }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
+                react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-date-picker-input__popover", static: true }, ({ close }) => (react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
 });

package/date-picker-input/date-picker-input.stories.js

@@ -40,6 +40,6 @@ function Default() {
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", name: "date-invalid", label: "Datum invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 24 }), value: date, onChange: (data) => setDate(data !== null && data !== void 0 ? data : null), isInvalid: true })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
-        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8" }, testDatePickers)));
+        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));
 }
 exports.Default = Default;

package/date-picker-input/date-picker-year.js

@@ -29,7 +29,6 @@ const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const button_1 = require("../button");
 const icon_1 = require("../icon");
-const text_link_1 = require("../text-link");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
 const localized_dayjs_1 = require("../utils/localized-dayjs");
@@ -60,14 +59,14 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
             props.onMonthSelect(date);
         }
     }, [canGoToMonth, props]);
-    return (react_1.default.createElement("div", { className: "flex w-full flex-col items-start" },
-        react_1.default.createElement("div", { className: "flex w-full items-center justify-between px-4 md:w-[300px]" },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "uxf-date-picker__year-select" },
             react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevYear, iconButton: true, onClick: canGoToPrevYear ? handleGoToPrevYear : undefined, title: "P\u0159edchoz\u00ED rok", variant: "text" },
                 react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
-            react_1.default.createElement(text_link_1.TextLink, { onClick: handleYearClick }, yearLabel),
+            react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleYearClick }, yearLabel),
             react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, iconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Dal\u0161\u00ED rok", variant: "text" },
                 react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "grid w-full grid-cols-4 px-4 pt-4" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-datepicker-cell", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(month.date).month() === currentMonth &&
-                "uxf-datepicker-cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date) }, month.monthLabel))))));
+        react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, localized_dayjs_1.localizedDayjs)(month.date).month() === currentMonth &&
+                "uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date) }, month.monthLabel))))));
 });
 exports.DatePickerYear.displayName = "DatePickerYear";

package/date-picker-input/date-picker.js

@@ -46,7 +46,7 @@ const DatePicker = (props) => {
         year: react_1.default.createElement(date_picker_year_1.DatePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
         decade: react_1.default.createElement(date_picker_decade_1.DatePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
     }), [onMonthSelect, onYearSelect, onDecadeYearSelect, setViewMode, activeMonths]);
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { className: "uxf-date-picker" },
         props.children,
         datePickerComponents[viewMode]));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.73",
+  "version": "1.0.0-beta.75",
   "description": "",
   "publishConfig": {
     "access": "public"

package/tabs/tabs.d.ts

@@ -1,14 +1,18 @@
-import React, { FC, HTMLAttributes, ReactNode } from "react";
-export interface TabProps {
-    children: ReactNode;
+import React, { ReactNode } from "react";
+export interface TabsPanelProps {
     className?: string;
-    tabTitle: ReactNode;
+    title: ReactNode;
 }
-export declare const TabPanel: FC<TabProps>;
-export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface TabsProps {
+    className?: string;
     defaultIndex?: number;
+    grow?: boolean;
     onChange?: (index: number) => void;
+    tabListClassName?: string;
     variant?: "default" | "segmented";
-    grow?: boolean;
 }
-export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.FC<React.PropsWithChildren<TabsPanelProps>>;
+};

package/tabs/tabs.js

@@ -23,16 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = exports.TabPanel = void 0;
+exports.Tabs = void 0;
 const react_1 = require("@headlessui/react");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const cx_1 = require("@uxf/core/utils/cx");
-const react_2 = __importStar(require("react"));
 const classes_1 = require("@uxf/core/constants/classes");
 const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
-const TabPanel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
-exports.TabPanel = TabPanel;
-exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importStar(require("react"));
+const Panel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
+const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
     var _a, _b;
     const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
     const containerRef = (0, react_2.useRef)(null);
@@ -51,16 +50,16 @@ exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
         };
     }, []);
     if (react_2.Children.count(props.children) === 0) {
-        return null;
+        return react_2.default.createElement("div", { className: tabsClassName, ref: ref });
     }
-    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.tabTitle);
-    const tabs = tabPanels.map((c) => c.props.tabTitle);
+    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
+    const tabs = tabPanels.map((c) => c.props.title);
     return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
-        react_2.default.createElement(react_1.Tab.List, null,
-            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`) },
-                react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { className: ({ selected }) => {
-                        var _a;
-                        return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
-                    }, key: `${tab}--${index}` }, tab)))))),
+        react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
+            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { className: ({ selected }) => {
+                    var _a;
+                    return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
+                }, key: `${tab}--${index}` }, tab))))),
         react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
 });
+exports.Tabs = Object.assign(TabsRoot, { Panel });

package/tabs/tabs.stories.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>> & {
+        Panel: React.FC<React.PropsWithChildren<import("./tabs").TabsPanelProps>>;
+    };
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/tabs/tabs.stories.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const tabs_1 = require("./tabs");
 const react_1 = __importDefault(require("react"));
+const tabs_1 = require("./tabs");
 exports.default = {
     title: "UI/Tabs",
     component: tabs_1.Tabs,
@@ -16,31 +16,31 @@ function Default() {
             react_1.default.createElement("div", null,
                 react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
                 react_1.default.createElement(tabs_1.Tabs, null,
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
             react_1.default.createElement("div", null,
                 react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
                 react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
         react_1.default.createElement("div", { className: "w-[600px]" },
             react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
             react_1.default.createElement(tabs_1.Tabs, { grow: true },
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
         react_1.default.createElement("div", { className: "w-[600px]" },
             react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
             react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
         react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));

package/toggle/theme.d.ts

@@ -0,0 +1,4 @@
+export interface ToggleVariants {
+    default: true;
+    reversed: true;
+}

package/toggle/theme.js

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

package/toggle/toggle.d.ts

@@ -1,9 +1,12 @@
 import React, { CSSProperties } from "react";
 import { FormControlProps } from "../types";
+import { ToggleVariants } from "./theme";
+export declare type ToggleVariant = keyof ToggleVariants;
 export interface ToggleProps extends FormControlProps<boolean> {
     className?: string;
     hiddenLabel?: boolean;
     label: string;
     style?: Partial<CSSProperties>;
+    variant?: ToggleVariant;
 }
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle/toggle.js

@@ -10,9 +10,10 @@ const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@headlessui/react");
 exports.Toggle = (0, forwardRef_1.forwardRef)("Toggle", (props, ref) => {
+    var _a, _b;
     return (react_1.default.createElement(react_2.Switch.Group, null,
-        react_1.default.createElement("div", { className: `uxf-toggle__wrapper ${props.hiddenLabel ? "uxf-toggle__wrapper--hiddenLabel" : ""}` },
-            react_1.default.createElement(react_2.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, ref: ref },
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
+            react_1.default.createElement(react_2.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", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, onChange: props.onChange, style: props.style, ref: ref },
                 react_1.default.createElement("span", { className: "uxf-toggle__inner" })),
             react_1.default.createElement(react_2.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
 });

package/toggle/toggle.stories.js

@@ -41,9 +41,12 @@ function Default() {
             }, value: checked, isDisabled: true }),
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
                 setChecked((prev) => !prev);
-            }, value: checked, hiddenLabel: true })));
+            }, value: checked, hiddenLabel: true }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, variant: "reversed" })));
     return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "light flex gap-4 p-20" }, storyToggles),
-        react_1.default.createElement("div", { className: "dark flex gap-4 bg-gray-900 p-20" }, storyToggles)));
+        react_1.default.createElement("div", { className: "light w-1/2 gap-4 p-20" }, storyToggles),
+        react_1.default.createElement("div", { className: "dark w-1/2 gap-4 bg-gray-900 p-20 text-white" }, storyToggles)));
 }
 exports.Default = Default;

package/utils/tailwind-config.js

@@ -87,6 +87,9 @@ module.exports = {
                     900: "#7f1d1d",
                 },
             },
+            spacing: {
+                inherit: "inherit",
+            },
             zIndex: {
                 1: "1",
                 focus: "5",