@uxf/ui 1.0.0-beta.61 → 1.0.0-beta.63

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

@@ -39,7 +39,7 @@ exports.ColorRadioGroup = (0, forwardRef_1.forwardRef)("ColorRadioGroup", (props
     (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(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-color-radio-group__label", isHidden: hiddenLabel, 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/combobox/combobox.d.ts

@@ -12,6 +12,7 @@ export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Va
     className?: string;
     dropdownPlacement?: Placement;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
     iconName?: keyof IconsSet;
     iconSize?: number;
     id?: string;

package/combobox/combobox.js

@@ -51,7 +51,7 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
     const iconSize = (_d = props.iconSize) !== null && _d !== void 0 ? _d : 24;
     return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
+        react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
             react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: iconName, size: iconSize })),

package/css/button.css

@@ -5,7 +5,7 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
+    @apply inline-flex items-center justify-center shrink-0 text-center rounded-lg before:rounded-lg font-semibold
     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition before:transition;
 
     &__text {
@@ -25,22 +25,22 @@
     }
 
     &.is-loading:after {
-        content: '';
-        width: 20px;
-        height: 20px;
+        animation: spinner .8s linear infinite;
         border-radius: 50%;
-        border-top: 2px solid;
         border-right: 2px solid transparent;
-        animation: spinner .8s linear infinite;
+        border-top: 2px solid;
+        content: '';
+        height: 20px;
         margin-left: 8px;
+        width: 20px;
     }
 
     &--size-xs {
         @apply px-2.5 py-1.5 text-xs;
 
         &.is-loading:after {
-            width: 14px;
             height: 14px;
+            width: 14px;
         }
 
         &.uxf-button--icon-button {
@@ -52,8 +52,8 @@
         @apply px-3 py-2 text-sm leading-4;
 
         &.is-loading:after {
-            width: 16px;
             height: 16px;
+            width: 16px;
         }
 
         &.uxf-button--icon-button {
@@ -97,7 +97,7 @@
         }
 
         :root .dark & {
-            @apply before:border-gray-300 hover:bg-gray-700 hover:before:border-gray-300 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+            @apply before:border-gray-700 hover:bg-gray-700 hover:before:border-gray-300 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
 
             &.is-disabled {
                 @apply before:border-gray-700 text-gray-600;

package/css/color-radio-group.css

@@ -15,10 +15,6 @@
         @apply mb-2;
     }
 
-    &__label--hidden {
-        @apply sr-only;
-    }
-
     &__options-wrapper {
         @apply flex flex-wrap gap-3.5;
     }

package/css/icon.css

@@ -1,5 +1,5 @@
 .uxf-icon {
-    @apply shrink-0 h-[length:var(--i-h)] w-[length:var(--i-w)];
+    @apply shrink-0 h-[var(--i-h)] w-[var(--i-w)];
 
     & > use {
         @apply pointer-events-none;

package/css/label.css

@@ -1,5 +1,5 @@
 .uxf-label {
-    @apply mb-1 block text-sm font-medium text-gray-700;
+    @apply mb-2 block font-medium;
 
     :root .light & {
         @apply text-gray-900;
@@ -8,7 +8,7 @@
         @apply text-white;
     }
 
-    &.is-required::after {
-        content: " *";
+    &--hidden {
+        @apply sr-only;
     }
 }

package/css/radio-group.css

@@ -15,10 +15,6 @@
         @apply mb-2;
     }
 
-    &__label--hidden {
-        @apply sr-only;
-    }
-
     :root .light & {
         .uxf-radio-group__option {
             @apply focus-visible:ring-primary-500 focus-visible:ring-offset-white;

package/css/toggle.css

@@ -1,21 +1,34 @@
 .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;
+    @apply relative inline-flex shrink-0 h-6 w-12 items-center rounded-full p-0.5 outline-none ring-offset-2
+    focus-visible:ring-2 [&>*]:active:w-[30px];
+
+    &__wrapper {
+        @apply flex items-center justify-between space-x-4 p-4;
+    }
 
     &__label {
-        @apply sr-only;
+        @apply w-full;
+
+        :root .light & {
+            @apply text-gray-600;
+        }
+
+        :root .dark & {
+            @apply text-gray-400;
+        }
     }
 
     &__inner {
-        @apply inline-block h-5 w-5 transform rounded-full bg-white transition;
+        @apply inline-block h-5 w-5 transform rounded-full bg-white transition transition-all;
     }
 
-    &.is-selected {
-        .uxf-toggle__inner {
-            @apply translate-x-6;
-        }
+    &.is-disabled {
+        @apply pointer-events-none;
     }
 
+    &.is-selected {
+        @apply [&>*]:translate-x-6 [&>*]:active:translate-x-[14px];
+    }
 
     :root .light & {
         @apply bg-gray-200 focus-visible:ring-primary-500;

package/date-picker-input/date-picker-input.d.ts

@@ -8,6 +8,7 @@ export interface DatePickerInputProps extends Omit<FormControlProps<Date | null>
     errorId?: string;
     form?: string;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
     id?: string;
     label?: ReactNode;
     leftAddon?: ReactNode;

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

@@ -49,7 +49,7 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
         setIsFocused(false);
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(react_2.Popover, { className: "relative" },
             react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-date-picker-input__wrapper" },
                 react_1.default.createElement("span", { className: "uxf-date-picker-input__left-element" }, props.leftElement),

package/form-control/form-control.d.ts

@@ -5,6 +5,7 @@ export interface FormControlProps {
     errorId?: string;
     form?: string;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
     inputId: string;
     isRequired?: boolean;
     label?: ReactNode;

package/form-control/form-control.js

@@ -13,7 +13,7 @@ const label_1 = require("../label");
 exports.FormControl = (0, forwardRef_1.forwardRef)("FormControl", (props, ref) => {
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
     return (react_1.default.createElement("div", { className: props.className, ref: ref },
-        react_1.default.createElement(label_1.Label, { isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label),
+        react_1.default.createElement(label_1.Label, { isHidden: props.hiddenLabel, isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label),
         props.children,
         props.helperText && (react_1.default.createElement("div", { className: helperTextClassName, id: props.errorId }, props.helperText))));
 });

package/form-control/form-control.stories.js

@@ -18,6 +18,8 @@ function Default() {
         react_1.default.createElement(form_control_1.FormControl, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true },
             react_1.default.createElement("div", null, "Is required")),
         react_1.default.createElement(form_control_1.FormControl, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true },
-            react_1.default.createElement("div", null, "Is invalid"))));
+            react_1.default.createElement("div", null, "Is invalid")),
+        react_1.default.createElement(form_control_1.FormControl, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true },
+            react_1.default.createElement("div", null, "hidden label"))));
 }
 exports.Default = Default;

package/label/label.d.ts

@@ -5,6 +5,7 @@ export interface LabelProps {
     form?: string;
     htmlFor?: string;
     id?: string;
+    isHidden?: boolean;
     isRequired?: boolean;
     onClick?: MouseEventHandler<HTMLLabelElement>;
 }

package/label/label.js

@@ -9,6 +9,6 @@ const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importDefault(require("react"));
 exports.Label = (0, forwardRef_1.forwardRef)("Label", (props, ref) => {
-    const className = (0, cx_1.cx)("uxf-label", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    const className = (0, cx_1.cx)("uxf-label", props.isHidden && "uxf-label--hidden", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     return (react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref }, props.children));
 });

package/package.json

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

package/radio-group/radio-group.js

@@ -41,7 +41,7 @@ exports.RadioGroup = (0, forwardRef_1.forwardRef)("RadioGroup", (props, ref) =>
     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, className);
     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(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: hiddenLabel, 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 }))))))),

package/select/select.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
     className?: string;
     dropdownPlacement?: Placement;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
     iconName?: keyof IconsSet;
     iconSize?: number;
     id?: string;

package/select/select.js

@@ -48,7 +48,7 @@ exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
     const iconSize = (_d = props.iconSize) !== null && _d !== void 0 ? _d : 24;
     return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
+        react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
             react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: iconName, size: iconSize })),

package/select/select.stories.js

@@ -52,7 +52,8 @@ function Default() {
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
+        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));

package/text-input/text-input.d.ts

@@ -9,6 +9,7 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
     enterKeyHint?: EnterKeyHint;
     form?: string;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
     id?: string;
     inputMode?: InputMode;
     label?: ReactNode;

package/text-input/text-input.js

@@ -36,7 +36,7 @@ exports.TextInput = (0, forwardRef_1.forwardRef)("TextInput", (props, ref) => {
     const generatedId = (0, react_1.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
-    const rootClassName = (0, cx_1.cx)("uxf-text-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
+    const rootClassName = (0, cx_1.cx)("uxf-text-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     const onFocus = (e) => {
         var _a;
         setIsFocused(true);
@@ -47,7 +47,7 @@ exports.TextInput = (0, forwardRef_1.forwardRef)("TextInput", (props, ref) => {
         setIsFocused(false);
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(input_1.Input, { size: props.size, variant: props.variant },
             props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
             props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),

package/textarea/textarea.d.ts

@@ -6,6 +6,7 @@ export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElem
     disableAutoHeight?: boolean;
     form?: string;
     helperText?: ReactNode;
+    hiddenLabel?: boolean;
     id?: string;
     label?: ReactNode;
     maxLength?: number | undefined;

package/textarea/textarea.js

@@ -75,7 +75,7 @@ exports.Textarea = (0, forwardRef_1.forwardRef)("Textarea", (props, ref) => {
             window.removeEventListener("resize", handler);
         };
     }, [props.disableAutoHeight, latestRows]);
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
             react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 });

package/toggle/toggle.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from "react";
 import { FormControlProps } from "../types";
 export interface ToggleProps extends FormControlProps<boolean> {
     className?: string;
+    hiddenLabel?: boolean;
     label: string;
     style?: Partial<CSSProperties>;
 }

package/toggle/toggle.js

@@ -4,13 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
-const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_2 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@headlessui/react");
 exports.Toggle = (0, forwardRef_1.forwardRef)("Toggle", (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, "uxf-toggle", props.className), disabled: props.isDisabled, onChange: props.onChange, style: props.style, ref: ref },
-        react_2.default.createElement("span", { className: "uxf-toggle__label" }, props.label),
-        react_2.default.createElement("span", { className: "uxf-toggle__inner" })));
+    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("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

@@ -32,20 +32,18 @@ exports.default = {
 };
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
+    const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
+        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(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, hiddenLabel: 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 }))));
+        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)));
 }
 exports.Default = Default;