@uxf/ui 11.74.0 → 11.74.2

package/calendar/calendar.js

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const calendar_day_cell_1 = require("./calendar-day-cell");
+exports.Calendar = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b, _c, _d, _e, _f;
+    const calendarClassName = (0, cx_1.cx)("uxf-calendar", props.className);
+    const { days, weekdayLabels } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek: props.datePickerProps.firstDayOfWeek,
+        month: (_c = (_a = props.month) !== null && _a !== void 0 ? _a : (_b = props.datePickerProps.activeMonths.at(0)) === null || _b === void 0 ? void 0 : _b.month) !== null && _c !== void 0 ? _c : new Date().getMonth(),
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
+        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        year: (_f = (_d = props.year) !== null && _d !== void 0 ? _d : (_e = props.datePickerProps.activeMonths.at(0)) === null || _e === void 0 ? void 0 : _e.year) !== null && _f !== void 0 ? _f : new Date().getFullYear(),
+    });
+    return (react_1.default.createElement("div", { className: calendarClassName, ref: ref },
+        react_1.default.createElement("div", { className: "uxf-calendar__weekdays" }, weekdayLabels.map((weekdayLabel, index) => (react_1.default.createElement("span", { className: "uxf-calendar__weekday", key: `${index}` }, weekdayLabel)))),
+        react_1.default.createElement("div", { className: "uxf-calendar__days" }, days.map((day, index) => (react_1.default.createElement(calendar_day_cell_1.CalendarDayCell, { datePickerProps: props.datePickerProps, day: day, key: day.dayLabel + index }))))));
+});
+exports.Calendar.displayName = "UxfUiCalendar";

package/calendar/calendar.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/calendar/calendar.stories.js

@@ -0,0 +1,35 @@
+"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 = Default;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const calendar_provider_1 = require("./calendar-provider");
+function Default() {
+    const [date, setDate] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setDate);
+    const testCalendars = react_1.default.createElement(calendar_provider_1.CalendarProvider, { onChange: onChange, selectedDate: date });
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testCalendars);
+}

package/calendar/index.d.ts

@@ -0,0 +1,4 @@
+export { Calendar } from "./calendar";
+export type { CalendarProps } from "./calendar";
+export { CalendarNavigation } from "./calendar-navigation";
+export type { CalendarNavigationProps } from "./calendar-navigation";

package/calendar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarNavigation = exports.Calendar = void 0;
+var calendar_1 = require("./calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return calendar_1.Calendar; } });
+var calendar_navigation_1 = require("./calendar-navigation");
+Object.defineProperty(exports, "CalendarNavigation", { enumerable: true, get: function () { return calendar_navigation_1.CalendarNavigation; } });

package/calendar/utils/get-class-names-from-flags.d.ts

@@ -0,0 +1,2 @@
+import { Flag } from "@uxf/datepicker/utils/types";
+export declare const getClassNamesFromFlags: (flags: Flag[]) => string;

package/calendar/utils/get-class-names-from-flags.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassNamesFromFlags = void 0;
+const getClassNamesFromFlags = (flags) => flags
+    .reduce((acc, curr) => [...acc, curr.flag, ...(curr.isFirst ? [`${curr.flag}--first`] : []), ...(curr.isLast ? [`${curr.flag}--last`] : [])], [])
+    .join(" ");
+exports.getClassNamesFromFlags = getClassNamesFromFlags;

package/checkbox/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { CheckboxSize } from "@uxf/ui/checkbox/theme";
+import React, { CSSProperties, ReactNode } from "react";
+import { FormControlProps } from "../types";
+export interface CheckboxProps extends FormControlProps<boolean | undefined> {
+    className?: string;
+    id?: string;
+    indeterminate?: boolean;
+    renderContent?: (className: string, checked: boolean | undefined) => ReactNode;
+    size?: CheckboxSize;
+    style?: CSSProperties;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;

package/checkbox/checkbox.js

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+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.Checkbox = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const icon_1 = require("../icon");
+exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b, _c;
+    const onChange = () => props.onChange(!props.value);
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
+        "aria-checked": props.value,
+        "aria-disabled": props.isDisabled,
+        "aria-invalid": props.isInvalid,
+        "aria-readonly": props.isReadOnly,
+        "aria-required": props.isRequired,
+        className: (0, cx_1.cx)("uxf-checkbox", `uxf-checkbox--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className, props.indeterminate && classes_1.CLASSES.IS_INDETERMINATE, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isFocused && classes_1.CLASSES.IS_FOCUSED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED),
+        id: props.id,
+        onBlur: props.onBlur,
+        onClick: onChange,
+        onFocus: props.onFocus,
+        role: "switch",
+        style: props.style,
+        tabIndex: props.isReadOnly ? -1 : undefined,
+    });
+    const innerClassName = "uxf-checkbox__inner";
+    return (react_1.default.createElement("div", { ...clickableProps, ref: ref }, (_c = (_b = props.renderContent) === null || _b === void 0 ? void 0 : _b.call(props, innerClassName, props.value)) !== null && _c !== void 0 ? _c : react_1.default.createElement(icon_1.Icon, { className: innerClassName, name: "check" })));
+});
+exports.Checkbox.displayName = "UxfUiCheckbox";

package/checkbox/checkbox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/checkbox.spec.js

@@ -0,0 +1,9 @@
+"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 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const checkbox_stories_1 = require("./checkbox.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(checkbox_stories_1.Default, null));

package/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/checkbox/checkbox.stories.js

@@ -0,0 +1,40 @@
+"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 = Default;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const checkbox_1 = require("./checkbox");
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
+    const checkboxes = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(checkbox_1.Checkbox, { name: "checkbox", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, name: "checkbox-disabled", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, name: "checkbox-invalid", onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { name: "checkbox-size-lg", onChange: onChange, size: "lg", value: checked })));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" }, checkboxes)));
+}

package/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./checkbox";
+export type { CheckboxProps } from "./checkbox";
+export type { CheckboxSize } from "./theme";

package/checkbox/index.js

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

package/checkbox/theme.d.ts

@@ -0,0 +1,5 @@
+export interface CheckboxSizes {
+    default: true;
+    lg: true;
+}
+export type CheckboxSize = keyof CheckboxSizes;

package/checkbox/theme.js

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

package/checkbox-button/checkbox-button.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { FormControlProps } from "../types";
+export interface CheckboxButtonProps extends FormControlProps<boolean | undefined> {
+    className?: string;
+    id?: string;
+    label: ReactNode;
+    style?: CSSProperties;
+}
+export declare const CheckboxButton: React.ForwardRefExoticComponent<CheckboxButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/checkbox-button/checkbox-button.js

@@ -0,0 +1,39 @@
+"use strict";
+"use client";
+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.CheckboxButton = 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 react_2 = __importStar(require("react"));
+const icon_1 = require("../icon");
+exports.CheckboxButton = (0, react_2.forwardRef)((props, ref) => {
+    return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)("uxf-checkbox-button", props.className, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+        react_2.default.createElement("span", { className: "uxf-checkbox-button__label" }, props.label),
+        react_2.default.createElement("span", { className: "uxf-checkbox-button__icon" },
+            react_2.default.createElement(icon_1.Icon, { name: "check" }))));
+});
+exports.CheckboxButton.displayName = "UxfUiCheckboxButton";

package/checkbox-button/checkbox-button.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox-button/checkbox-button.spec.js

@@ -0,0 +1,9 @@
+"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 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const checkbox_button_stories_1 = require("./checkbox-button.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(checkbox_button_stories_1.Default, null));

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/checkbox-button/checkbox-button.stories.js

@@ -0,0 +1,38 @@
+"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 = Default;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const index_1 = require("./index");
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" },
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", name: "checkbox-button", onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { isDisabled: true, label: "Opravdu?", name: "checkbox-button-disabled", onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { isInvalid: true, label: "Opravdu?", name: "checkbox-button-invalid", onChange: onChange, value: checked }))));
+}

package/checkbox-button/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxButton } from "./checkbox-button";
+export type { CheckboxButtonProps } from "./checkbox-button";

package/checkbox-button/index.js

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

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

@@ -0,0 +1,14 @@
+import { CheckboxSize } from "@uxf/ui/checkbox/theme";
+import React, { CSSProperties, ReactNode } from "react";
+import { FormControlProps } from "../types";
+export interface CheckboxInputProps extends FormControlProps<boolean | undefined> {
+    className?: string;
+    hiddenLabel?: boolean;
+    id?: string;
+    indeterminate?: boolean;
+    label: ReactNode;
+    size?: CheckboxSize;
+    style?: CSSProperties;
+    helperText?: ReactNode;
+}
+export declare const CheckboxInput: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLDivElement>>;

package/checkbox-input/checkbox-input.js

@@ -0,0 +1,43 @@
+"use strict";
+"use client";
+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.CheckboxInput = void 0;
+const react_1 = require("@headlessui/react");
+const checkbox_1 = require("@uxf/ui/checkbox");
+const react_2 = __importStar(require("react"));
+exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
+    var _a, _b;
+    const generatedId = (0, react_2.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    return (react_2.default.createElement(react_1.Switch.Group, null,
+        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, "data-name": props.name, style: props.style },
+            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: props.onChange, ref: ref, size: props.size, value: checked }))),
+            react_2.default.createElement(react_1.Switch.Label, { className: `uxf-checkbox-input__label ${props.hiddenLabel ? "uxf-checkbox-input__label--hidden" : ""}` },
+                react_2.default.createElement("span", { className: "uxf-checkbox-input__label--text" }, props.label),
+                react_2.default.createElement("span", { className: "uxf-checkbox-input__label--subtitle", id: errorId }, props.helperText)))));
+});
+exports.CheckboxInput.displayName = "UxfUiCheckboxInput";

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

@@ -0,0 +1 @@
+export {};

package/checkbox-input/checkbox-input.spec.js

@@ -0,0 +1,9 @@
+"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 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const checkbox_input_stories_1 = require("./checkbox-input.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(checkbox_input_stories_1.Default, null));

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/checkbox-input/checkbox-input.stories.js

@@ -0,0 +1,40 @@
+"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 = Default;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const checkbox_input_1 = require("./checkbox-input");
+function Default() {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(true);
+    const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" },
+            react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", name: "checkbox-input", onChange: onChange, value: isChecked }),
+            react_1.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: true, label: "Opravdu?", name: "checkbox-input-disabled", onChange: onChange, value: isChecked }),
+            react_1.default.createElement(checkbox_input_1.CheckboxInput, { isInvalid: true, label: "Opravdu?", name: "checkbox-input-invalid", onChange: onChange, value: isChecked }),
+            react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", name: "checkbox-input-lg", onChange: onChange, size: "lg", value: isChecked }),
+            react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, label: "hidden label", name: "checkbox-input-hidden-label-lg", onChange: onChange, size: "lg", value: isChecked }))));
+}

package/checkbox-input/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxInput } from "./checkbox-input";
+export type { CheckboxInputProps } from "./checkbox-input";

package/checkbox-input/index.js

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

package/checkbox-list/checkbox-list.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { CheckboxListProps } from "./types";
+export declare const CheckboxList: {
+    (props: CheckboxListProps): React.JSX.Element;
+    displayName: string;
+};

package/checkbox-list/checkbox-list.js

@@ -0,0 +1,52 @@
+"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.CheckboxList = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const checkbox_input_1 = require("../checkbox-input");
+const form_component_1 = require("../form-component");
+const CheckboxList = (props) => {
+    const generatedId = (0, react_1.useId)();
+    const id = props.id || generatedId;
+    const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
+    const onChange = (optionId, checked) => {
+        var _a, _b, _c;
+        const newValue = checked
+            ? [...((_a = props.value) !== null && _a !== void 0 ? _a : []), optionId]
+            : ((_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.filter((i) => i !== optionId)) !== null && _c !== void 0 ? _c : []);
+        props.onChange(newValue);
+    };
+    const rootClassName = (0, cx_1.cx)("uxf-checkbox-list", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, helperText: props.helperText, hiddenLabel: props.hasHiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+        react_1.default.createElement("ul", { className: "uxf-checkbox-list__grid" }, props.options.map((option) => {
+            var _a;
+            return (react_1.default.createElement("li", { key: option.id },
+                react_1.default.createElement(checkbox_input_1.CheckboxInput, { id: `${id}-${option.id}`, isDisabled: option.isDisabled || props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, key: option.id, label: option.label, name: props.name, onBlur: props.onBlur, onChange: (value) => onChange(option.id, value || false), onFocus: props.onFocus, value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.includes(option.id) })));
+        }))));
+};
+exports.CheckboxList = CheckboxList;
+exports.CheckboxList.displayName = "UxfUiCheckboxList";

package/checkbox-list/checkbox-list.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox-list/checkbox-list.spec.js

@@ -0,0 +1,9 @@
+"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 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const checkbox_list_stories_1 = require("./checkbox-list.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(checkbox_list_stories_1.Default, null));

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;