@uxf/ui 1.0.0-beta.99 → 1.0.1

package/button-list/button-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 button_list_stories_1 = require("./button-list.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(button_list_stories_1.Default, null));

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./button-list").ButtonListProps>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/button-list/button-list.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/ButtonList",
+    component: index_1.ButtonList,
+};
+const Default = () => {
+    const component = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 0, variant: "outlined", buttons: [
+                { label: "First item" },
+                { label: "Second item" },
+                { label: "Third item" },
+                { label: "Fourth item", disabled: true },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "white", buttons: [
+                { label: "First item" },
+                { label: "Second item" },
+                { label: "Third item" },
+                { label: "Fourth item" },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 2, buttons: [
+                // eslint-disable-next-line no-console
+                { label: "First item", onClick: console.log },
+                { label: "Second item", color: "success" },
+                { label: "Third item" },
+                // eslint-disable-next-line no-console
+                { label: "Fourth item", onClick: console.log },
+            ] }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 1, size: "xs", color: "error", variant: "outlined", buttons: [
+                // eslint-disable-next-line no-console
+                { icon: "check", label: "First item", onClick: console.log },
+                { icon: "user", label: "Second item", color: "success" },
+                { icon: "cloud", label: "Third item" },
+                // eslint-disable-next-line no-console
+                { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
+            ], openButton: {} }),
+        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 3, size: "xs", color: "success", buttons: [
+                // eslint-disable-next-line no-console
+                { icon: "check", label: "First item", onClick: console.log, color: "error" },
+                { icon: "user", label: "Second item", color: "success", size: "default" },
+                { icon: "cloud", label: "Third item" },
+                // eslint-disable-next-line no-console
+                { icon: "xmarkLarge", label: "Fourth item", onClick: console.log },
+            ], openButton: { variant: "outlined", color: "default" } })));
+    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" }, component),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));
+};
+exports.Default = Default;

package/button-list/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonListProps } from "./button-list";
+export { ButtonList } from "./button-list";

package/button-list/index.js

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

package/calendar/calendar-day-cell.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { CalendarDay } from "@uxf/datepicker/utils/get-days";
+interface CalendarDayProps {
+    day: CalendarDay;
+}
+export declare const CalendarDayCell: React.NamedExoticComponent<CalendarDayProps>;
+export {};

package/{date-picker-input/date-picker-day.js → calendar/calendar-day-cell.js}

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerDay = void 0;
+exports.CalendarDayCell = void 0;
 const react_1 = __importStar(require("react"));
 const use_day_1 = require("@uxf/datepicker/hooks/use-day");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
@@ -31,13 +31,12 @@ const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
 const useOnMount_1 = require("@uxf/core/hooks/useOnMount");
-exports.DatePickerDay = (0, react_1.memo)((props) => {
-    const { day } = props;
+exports.CalendarDayCell = (0, react_1.memo)((props) => {
     const dayCellRef = (0, react_1.useRef)(null);
     const innerRef = (0, react_1.useRef)(null);
     const { focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateSelected, onDateFocus, onDateHover, onDateSelect, } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const { disabledDate, isSelected, onClick, onKeyDown, onMouseEnter, tabIndex, isToday } = (0, use_day_1.useDay)({
-        date: day.date,
+        date: props.day.date,
         focusedDate,
         isDateBlocked,
         isDateFocused,
@@ -48,16 +47,16 @@ exports.DatePickerDay = (0, react_1.memo)((props) => {
         onDateSelect,
         dayRef: dayCellRef,
     });
-    const isDisabled = disabledDate || !day.currentMonth;
     (0, useOnMount_1.useOnMount)(() => {
         const node = innerRef.current;
         if (node && (isToday || isSelected)) {
-            node.focus();
+            node.focus({ preventScroll: true });
         }
     });
-    if (!day.dayLabel) {
+    if (!props.day.dayLabel) {
         return react_1.default.createElement("div", null);
     }
-    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__day", isDisabled && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-date-picker__cell__day--today", isSelected && "uxf-date-picker__cell__day--selected", !props.currentMonth && "uxf-date-picker__cell__day--not-current-month"), ref: isDisabled ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex }, day.dayLabel));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell-day--today", isSelected && "uxf-calendar__cell-day--selected", !props.day.currentMonth && "uxf-calendar__cell-day--not-current-month"), ref: disabledDate ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" },
+        react_1.default.createElement("span", { className: "uxf-calendar__cell-day__inner" }, props.day.dayLabel)));
 });
-exports.DatePickerDay.displayName = "DatePickerDay";
+exports.CalendarDayCell.displayName = "UxfUiCalendarDayCell";

package/calendar/calendar-provider.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export interface CalendarProviderProps {
+    onChange?: (data: Date) => void;
+    selectedDate?: Date | null;
+}
+export declare const CalendarProvider: FC<CalendarProviderProps>;

package/{date-picker-input/date-picker-provider.js → calendar/calendar-provider.js}

@@ -3,24 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerProvider = void 0;
+exports.CalendarProvider = void 0;
 const react_1 = __importDefault(require("react"));
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_date_picker_1 = require("@uxf/datepicker/hooks/use-date-picker");
-const date_picker_1 = require("./date-picker");
-const DatePickerProvider = (props) => {
+const calendar_1 = require("./calendar");
+const CalendarProvider = (props) => {
     var _a;
-    const datePickerProps = (0, use_date_picker_1.useDatePicker)({
+    const calendarProps = (0, use_date_picker_1.useDatePicker)({
         firstDayOfWeek: 1,
         onDateChange: (data) => {
-            if (props.onChange) {
+            if (data && props.onChange) {
                 props.onChange(data);
             }
-            props.closePopoverHandler();
         },
         selectedDate: (_a = props.selectedDate) !== null && _a !== void 0 ? _a : null,
     });
-    return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: datePickerProps },
-        react_1.default.createElement(date_picker_1.DatePicker, null)));
+    return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: calendarProps },
+        react_1.default.createElement(calendar_1.Calendar, null)));
 };
-exports.DatePickerProvider = DatePickerProvider;
+exports.CalendarProvider = CalendarProvider;
+exports.CalendarProvider.displayName = "UxfUiCalendarProvider";

package/calendar/calendar.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface CalendarProps {
+    className?: string;
+    onChange?: (data: Date | null) => void;
+    selectedDate?: Date | null;
+}
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;

package/calendar/calendar.js

@@ -0,0 +1,53 @@
+"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;
+};
+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 react_1 = __importStar(require("react"));
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const dayjs_1 = __importDefault(require("dayjs"));
+const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
+const calendar_day_cell_1 = require("./calendar-day-cell");
+exports.Calendar = (0, react_1.forwardRef)((props, ref) => {
+    const calendarClassName = (0, cx_1.cx)("uxf-calendar", props.className);
+    const { activeMonths, firstDayOfWeek } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const currentMonth = activeMonths[0].month;
+    const currentYear = activeMonths[0].year;
+    const { days, weekdayLabels } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
+        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        year: currentYear,
+    });
+    return (react_1.default.createElement("div", { ref: ref, className: calendarClassName },
+        react_1.default.createElement("div", { className: "uxf-calendar__weekdays" }, weekdayLabels.map((weekdayLabel, index) => (react_1.default.createElement("span", { key: `${index}`, className: "uxf-calendar__weekday" }, weekdayLabel)))),
+        react_1.default.createElement("div", { className: "uxf-calendar__days" }, days.map((day, index) => (react_1.default.createElement(calendar_day_cell_1.CalendarDayCell, { day: day, key: day.dayLabel + index }))))));
+});
+exports.Calendar.displayName = "UxfUiCalendar";

package/calendar/calendar.stories.d.ts

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

package/calendar/calendar.stories.js

@@ -0,0 +1,49 @@
+"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 react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const calendar_provider_1 = require("./calendar-provider");
+const calendar_1 = require("./calendar");
+exports.default = {
+    title: "UI/Calendar",
+    component: calendar_1.Calendar,
+    parameters: {
+        docs: {
+        // page: Docs,
+        },
+    },
+};
+function Default() {
+    const [date, setDate] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setDate);
+    const testCalendars = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(calendar_provider_1.CalendarProvider, { selectedDate: date, onChange: onChange })));
+    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" }, testCalendars),
+        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testCalendars)));
+}
+exports.Default = Default;

package/calendar/index.d.ts

@@ -0,0 +1 @@
+export * from "./calendar";

package/{form-control → calendar}/index.js

@@ -14,4 +14,4 @@ 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("./form-control"), exports);
+__exportStar(require("./calendar"), exports);

package/checkbox/checkbox.d.ts

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

package/checkbox/checkbox.js

@@ -1,18 +1,53 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 react_1 = require("@headlessui/react");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_2 = __importDefault(require("react"));
-const checkbox_visual_1 = require("../checkbox-visual");
-exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
-    var _a;
-    return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: `uxf-checkbox__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-            react_2.default.createElement(react_1.Switch, { checked: props.value, className: "uxf-checkbox-visual-wrapper", disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
-                react_2.default.createElement(checkbox_visual_1.CheckboxVisual, { indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, size: props.size, value: props.value })),
-            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));
+const classes_1 = require("@uxf/core/constants/classes");
+const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
+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, useClickableProps_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.js

@@ -4,8 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const checkbox_1 = require("./checkbox");
 const snap_test_1 = require("../utils/snap-test");
-(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(checkbox_1.Checkbox, { label: "label", onChange: () => void null }));
-(0, snap_test_1.snapTest)("render disabled", react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, label: "label", onChange: () => void null }));
-(0, snap_test_1.snapTest)("render size lg", react_1.default.createElement(checkbox_1.Checkbox, { size: "lg", label: "label", onChange: () => void null }));
+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

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

package/checkbox/checkbox.stories.js

@@ -24,19 +24,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
+const checkbox_1 = require("./checkbox");
+const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/Checkbox",
-    component: index_1.Checkbox,
+    component: checkbox_1.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(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(index_1.Checkbox, { label: "Opravdu? (size lg)", onChange: () => setChecked((prev) => !prev), value: checked, size: "lg" })));
+        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, onChange: onChange, value: checked }),
+        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, size: "lg" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "light flex flex-col gap-4 p-20" }, checkboxes),
         react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" }, checkboxes)));

package/checkbox/index.d.ts

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

package/checkbox/index.js

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

package/{checkbox-visual → checkbox}/theme.d.ts

@@ -2,3 +2,4 @@ export interface CheckboxSizes {
     default: true;
     lg: true;
 }
+export type CheckboxSize = keyof CheckboxSizes;

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

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

package/checkbox-button/checkbox-button.js

@@ -1,18 +1,38 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 react_2 = __importDefault(require("react"));
+const react_2 = __importStar(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");
 const icon_1 = require("../icon");
-exports.CheckboxButton = (0, forwardRef_1.forwardRef)("CheckboxButton", (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, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+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.js

@@ -5,6 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
-const checkbox_button_1 = require("./checkbox-button");
-(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "label", onChange: () => void null }));
-(0, snap_test_1.snapTest)("render disabled", react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "label", isDisabled: true, onChange: () => void null }));
+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

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("./checkbox-button").CheckboxButtonProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

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

@@ -26,32 +26,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/CheckboxButton",
     component: index_1.CheckboxButton,
 };
 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: "light flex flex-col gap-4 p-20" },
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked })),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked })),
         react_1.default.createElement("div", { className: "dark flex flex-col gap-4 bg-gray-900 p-20" },
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: () => {
-                    setChecked((prev) => !prev);
-                }, value: checked }))));
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked }))));
 }
 exports.Default = Default;