@uxf/ui 1.0.0-beta.152 → 1.0.0-beta.154

package/_select-base/_select-base.js

@@ -65,7 +65,7 @@ const _SelectBase = (props) => {
                 props.children,
                 react_1.default.createElement(input_1.Input.RightElement, null,
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
-                    react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-sb__button-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
+                    react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-sb__button-icon z-[1]", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
                 props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
             react_1.default.createElement(Options, { component: Component, emptyMessage: props.emptyMessage, forwardRef: dropdown.floating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption }),
             props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));

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/calendar/calendar-day-cell.js

@@ -0,0 +1,64 @@
+"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.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");
+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.CalendarDayCell = (0, react_1.memo)((props) => {
+    const { day } = 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,
+        focusedDate,
+        isDateBlocked,
+        isDateFocused,
+        isDateHovered,
+        isDateSelected,
+        onDateFocus,
+        onDateHover,
+        onDateSelect,
+        dayRef: dayCellRef,
+    });
+    const isDisabled = disabledDate || !day.currentMonth;
+    (0, useOnMount_1.useOnMount)(() => {
+        const node = innerRef.current;
+        if (node && (isToday || isSelected)) {
+            node.focus();
+        }
+    });
+    if (!day.dayLabel) {
+        return react_1.default.createElement("div", null);
+    }
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", isDisabled && 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: isDisabled ? 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" }, day.dayLabel)));
+});
+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/calendar/calendar-provider.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 calendar_1 = require("./calendar");
+const CalendarProvider = (props) => {
+    var _a;
+    const calendarProps = (0, use_date_picker_1.useDatePicker)({
+        firstDayOfWeek: 1,
+        onDateChange: (data) => {
+            if (data && props.onChange) {
+                props.onChange(data);
+            }
+        },
+        selectedDate: (_a = props.selectedDate) !== null && _a !== void 0 ? _a : null,
+    });
+    return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: calendarProps },
+        react_1.default.createElement(calendar_1.Calendar, null)));
+};
+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(): 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/calendar/index.js

@@ -0,0 +1,17 @@
+"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("./calendar"), exports);

package/color-radio/color-radio.js

@@ -26,10 +26,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorRadio = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const color2k_1 = require("color2k");
 const react_1 = __importStar(require("react"));
 const useClickableProps_1 = require("@uxf/core/hooks/useClickableProps");
 const icon_1 = require("../icon");
+function readableColorIsBlack(bgColor) {
+    const color = bgColor.substring(1, 7);
+    const r = parseInt(color.substring(0, 2), 16); // hexToR
+    const g = parseInt(color.substring(2, 4), 16); // hexToG
+    const b = parseInt(color.substring(4, 6), 16); // hexToB
+    return r * 0.299 + g * 0.587 + b * 0.114 > 146;
+}
 exports.ColorRadio = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const colorRadioStyle = {
@@ -52,7 +58,7 @@ exports.ColorRadio = (0, react_1.forwardRef)((props, ref) => {
         style: colorRadioStyle,
         tabIndex: props.isReadOnly ? -1 : undefined,
     });
-    const innerClassName = `uxf-color-radio__inner ${(0, color2k_1.readableColorIsBlack)(props.color) ? "uxf-color-radio__inner--dark" : ""}`;
+    const innerClassName = `uxf-color-radio__inner ${readableColorIsBlack(props.color) ? "uxf-color-radio__inner--dark" : ""}`;
     return (react_1.default.createElement("div", { ...clickableProps, ref: ref },
         react_1.default.createElement("span", { className: "uxf-color-radio__color-label" }, props.colorLabel), (_c = (_b = props.renderContent) === null || _b === void 0 ? void 0 : _b.call(props, innerClassName, props.checked, props.colorLabel, props.value)) !== null && _c !== void 0 ? _c : (react_1.default.createElement(icon_1.Icon, { className: innerClassName, name: "check" }))));
 });

package/css/button.css

@@ -5,7 +5,8 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm transition-colors;
+    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm transition-colors
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
 
     .uxf-icon {
         @apply h-6;
@@ -142,32 +143,38 @@
         }
 
         &.uxf-button--color-default {
+            @apply focus-visible:ring-primary;
+
             :root .light & {
-                @apply text-primary border-primary hover:border-primary-700 hover:text-primary-700;
+                @apply text-primary border-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
             }
 
             :root .dark & {
-                @apply text-primary border-primary hover:border-primary-300 hover:text-primary-300;
+                @apply text-primary border-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
             }
         }
 
         &.uxf-button--color-success {
+            @apply focus-visible:ring-success;
+
             :root .light & {
-                @apply text-success border-success hover:border-success-700 hover:text-success-700;
+                @apply text-success border-success is-hoverable:border-success-700 is-hoverable:text-success-700;
             }
 
             :root .dark & {
-                @apply text-success border-success hover:border-success-300 hover:text-success-300;
+                @apply text-success border-success is-hoverable:border-success-300 is-hoverable:text-success-300;
             }
         }
 
         &.uxf-button--color-error {
+            @apply focus-visible:ring-error;
+
             :root .light & {
-                @apply text-error border-error hover:border-error-700 hover:text-error-700;
+                @apply text-error border-error is-hoverable:border-error-700 is-hoverable:text-error-700;
             }
 
             :root .dark & {
-                @apply text-error border-error hover:border-error-300 hover:text-error-300;
+                @apply text-error border-error is-hoverable:border-error-300 is-hoverable:text-error-300;
             }
         }
 
@@ -183,7 +190,7 @@
     }
 
     &--variant-default {
-        @apply text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+        @apply text-white;
 
         :root .dark & {
             @apply focus-visible:ring-offset-gray-900;
@@ -193,11 +200,11 @@
             @apply focus-visible:ring-primary;
 
             :root .light & {
-                @apply bg-primary hover:bg-primary-700;
+                @apply bg-primary is-hoverable:bg-primary-700;
             }
 
             :root .dark & {
-                @apply bg-primary hover:bg-primary-400;
+                @apply bg-primary is-hoverable:bg-primary-400;
             }
 
             &.is-disabled {
@@ -215,11 +222,11 @@
             @apply focus-visible:ring-success;
 
             :root .light & {
-                @apply bg-success hover:bg-success-700;
+                @apply bg-success is-hoverable:bg-success-700;
             }
 
             :root .dark & {
-                @apply bg-success hover:bg-success-400;
+                @apply bg-success is-hoverable:bg-success-400;
             }
 
             &.is-disabled {
@@ -237,11 +244,11 @@
             @apply focus-visible:ring-error;
 
             :root .light & {
-                @apply bg-error hover:bg-error-700;
+                @apply bg-error is-hoverable:bg-error-700;
             }
 
             :root .dark & {
-                @apply bg-error hover:bg-error-400;
+                @apply bg-error is-hoverable:bg-error-400;
             }
 
             &.is-disabled {
@@ -257,14 +264,14 @@
     }
 
     &--variant-white {
-        @apply border;
+        @apply border focus-visible:ring-primary;
 
         :root .light & {
-            @apply border-lightBorder bg-white hover:bg-gray-100 text-lightMedium;
+            @apply border-lightBorder bg-white is-hoverable:bg-gray-100 text-lightMedium;
         }
 
         :root .dark & {
-            @apply border-darkBorder text-darkMedium bg-lightHigh hover:bg-gray-800 hover:text-darkHigh;
+            @apply border-darkBorder text-darkMedium bg-lightHigh is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
         }
 
         &.is-disabled {
@@ -282,14 +289,12 @@
         @apply shadow-none;
 
         &.uxf-button--color-default {
-            @apply text-primary;
-
             :root .light & {
-                @apply hover:text-primary-700;
+                @apply text-lightMedium is-hoverable:text-lightHigh;
             }
 
             :root .dark & {
-                @apply hover:text-primary-300;
+                @apply text-darkMedium is-hoverable:text-darkHigh;
             }
         }
 
@@ -297,11 +302,11 @@
             @apply text-success;
 
             :root .light & {
-                @apply hover:text-success-700;
+                @apply is-hoverable:text-success-700;
             }
 
             :root .dark & {
-                @apply hover:text-success-300;
+                @apply is-hoverable:text-success-300;
             }
         }
 
@@ -309,11 +314,11 @@
             @apply text-error;
 
             :root .light & {
-                @apply hover:text-error-700;
+                @apply is-hoverable:text-error-700;
             }
 
             :root .dark & {
-                @apply hover:text-error-300;
+                @apply is-hoverable:text-error-300;
             }
         }
 

package/css/calendar.css

@@ -0,0 +1,151 @@
+.uxf-calendar {
+    &__cell-day {
+        align-items: center;
+        background-color: theme("backgroundColor.white");
+        color: theme("colors.lightMedium");
+        display: flex;
+        font-size: 14px;
+        font-weight: theme("fontWeight.medium");
+        height: 40px;
+        justify-content: center;
+        line-height: 1;
+        outline: none;
+        position: relative;
+        text-align: center;
+
+        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
+
+        :root .dark & {
+            background-color: theme("backgroundColor.gray.900");
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            background-color: theme("backgroundColor.gray.50");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.gray.950");
+            }
+        }
+
+        &:focus-visible {
+            &::before {
+                border: 2px solid theme("colors.primary.500");
+                border-radius: 2px;
+                content: "";
+                inset: 0;
+                position: absolute;
+            }
+        }
+
+        &:first-child {
+            border-top-left-radius: var(--compensated-radii);
+        }
+
+        &:nth-child(7) {
+            border-top-right-radius: var(--compensated-radii);
+        }
+
+        &:nth-last-child(7) {
+            border-bottom-left-radius: var(--compensated-radii);
+        }
+
+        &:last-child {
+            border-bottom-right-radius: var(--compensated-radii);
+        }
+
+        &--not-current-month {
+            background-color: theme("backgroundColor.gray.100");
+            color: theme("colors.lightLow");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.gray.800");
+                color: theme("colors.darkLow");
+            }
+        }
+
+        &--selected {
+            background-color: theme("backgroundColor.primary.500");
+            color: theme("colors.white");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.primary.500");
+                color: theme("colors.white");
+            }
+
+            &:hover {
+                background-color: theme("backgroundColor.primary.500");
+
+                :root .dark & {
+                    background-color: theme("backgroundColor.primary.500");
+                }
+            }
+        }
+
+        &--today {
+            .uxf-calendar__cell-day__inner {
+                align-items: center;
+                background-color: theme("backgroundColor.lightHigh");
+                border-radius: 999px;
+                color: theme("colors.white");
+                display: inline-flex;
+                height: 32px;
+                justify-content: center;
+                position: relative;
+                width: 32px;
+
+                :root .dark & {
+                    background-color: theme("backgroundColor.transparent");
+                    border: 2px solid theme("colors.darkMedium");
+                    color: theme("colors.white");
+                }
+            }
+
+            &.uxf-calendar__cell-day--selected {
+                .uxf-calendar__cell-day__inner {
+                    background-color: theme("backgroundColor.transparent");
+                    color: theme("colors.white");
+                    border: 2px solid theme("colors.darkMedium");
+                }
+            }
+        }
+    }
+
+    &__weekdays {
+        color: theme("colors.lightLow");
+        column-gap: 1px;
+        display: grid;
+        font-size: 10px;
+        font-weight: theme("fontWeight.semibold");
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        padding: 0 1px;
+        text-align: center;
+        text-transform: uppercase;
+
+        :root .dark & {
+            color: theme("colors.darkLow");
+        }
+    }
+
+    &__weekday {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 32px;
+        justify-content: center;
+    }
+
+    &__days {
+        background-color: theme("backgroundColor.lightBorder");
+        border-radius: 6px;
+        display: grid;
+        gap: 1px;
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        padding: 1px;
+        text-align: center;
+
+        :root .dark & {
+            background-color: theme("backgroundColor.darkBorder");
+        }
+    }
+}

package/css/date-picker.css

@@ -1,7 +1,5 @@
 .uxf-date-picker {
-    &__month-select,
-    &__year-select,
-    &__decade-select {
+    &__navigation {
         @apply flex items-center justify-between px-4 w-[320px] sm:w-[360px];
     }
 
@@ -35,11 +33,7 @@
         @apply p-1 transition relative rounded-full outline-none before:absolute before:pointer-events-none
             before:rounded-full before:-inset-1 focus-visible:before:border-2;
 
-        &__day {
-            @apply w-9 h-9;
-        }
-
-        &__month {
+        &-month {
             @apply w-full;
         }
 
@@ -55,15 +49,15 @@
             @apply hover:bg-gray-200 focus-visible:before:border-primary;
         }
 
-        .uxf-date-picker__cell__day--today {
+        .uxf-date-picker__cell-day--today {
             @apply bg-primary-200 hover:bg-primary-300;
         }
 
-        .uxf-date-picker__cell__day--selected {
+        .uxf-date-picker__cell-day--selected {
             @apply bg-primary text-white hover:bg-primary;
         }
 
-        .uxf-date-picker__cell__day--not-current-month {
+        .uxf-date-picker__cell-day--not-current-month {
             @apply text-gray-400;
         }
     }
@@ -75,15 +69,15 @@
             @apply hover:bg-gray-700 focus-visible:before:border-primary;
         }
 
-        .uxf-date-picker__cell__day--today {
+        .uxf-date-picker__cell-day--today {
             @apply bg-primary-400/50 hover:bg-primary-400/60;
         }
 
-        .uxf-date-picker__cell__day--selected {
+        .uxf-date-picker__cell-day--selected {
             @apply bg-primary text-white hover:bg-primary;
         }
 
-        .uxf-date-picker__cell__day--not-current-month {
+        .uxf-date-picker__cell-day--not-current-month {
             @apply text-gray-600;
         }
     }

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

@@ -58,6 +58,6 @@ exports.DatePickerDay = (0, react_1.memo)((props) => {
     if (!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, type: "button" }, day.dayLabel));
+    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, type: "button" }, day.dayLabel));
 });
 exports.DatePickerDay.displayName = "UxfUiDatePickerDay";

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

@@ -31,10 +31,9 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
-const button_1 = require("../button");
-const icon_1 = require("../icon");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
+const date_picker_navigation_1 = require("./date-picker-navigation");
 exports.DatePickerDecade = (0, react_1.memo)((props) => {
     const { onYearSelect } = props;
     const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
@@ -60,12 +59,15 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
         }
     }, [canGoToYear, onYearSelect]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "uxf-date-picker__decade-select" },
-            react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: handleGoToPrevDecadeClick, title: "Zp\u011Bt", variant: "text" },
-                react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
-            react_1.default.createElement("p", { className: "uxf-date-picker__decade-label" }, decadeLabel),
-            react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: handleGoToNextDecadeClick, title: "Vp\u0159ed", variant: "text" },
-                react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-date-picker__cell__year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+        react_1.default.createElement(date_picker_navigation_1.DatePickerNavigation, { prevButtonProps: {
+                onClick: handleGoToPrevDecadeClick,
+                title: "Zpět",
+            }, nextButtonProps: {
+                onClick: handleGoToNextDecadeClick,
+                title: "Nadcházející rok",
+            }, selectButtonProps: {
+                children: decadeLabel,
+            } }),
+        react_1.default.createElement("div", { className: "uxf-date-picker__decade-calendar" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-date-picker__cell-year--current"), key: year.yearLabel + index, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "UxfUiDatePickerDecade";

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

@@ -31,15 +31,14 @@ const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-cont
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
-const button_1 = require("../button");
-const icon_1 = require("../icon");
-const date_picker_day_1 = require("./date-picker-day");
+const calendar_1 = require("../calendar");
+const date_picker_navigation_1 = require("./date-picker-navigation");
 exports.DatePickerMonth = (0, react_1.memo)((props) => {
     const { setViewMode } = props;
     const { activeMonths, canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth, } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const currentMonth = activeMonths[0].month;
     const currentYear = activeMonths[0].year;
-    const { days, monthLabel, weekdayLabels } = (0, use_month_1.useMonth)({
+    const { monthLabel } = (0, use_month_1.useMonth)({
         dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
         firstDayOfWeek,
         month: currentMonth,
@@ -47,20 +46,27 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
         weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
         year: currentYear,
     });
-    const handleGoToPrevMonth = (0, react_1.useCallback)(() => goToPrevMonthsByOneMonth(), [goToPrevMonthsByOneMonth]);
+    const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
+        goToPrevMonthsByOneMonth();
+    }, [goToPrevMonthsByOneMonth]);
     const handleGoToNextMonth = (0, react_1.useCallback)(() => goToNextMonthsByOneMonth(), [goToNextMonthsByOneMonth]);
     const handleMonthClick = (0, react_1.useCallback)(() => {
         setViewMode("year");
     }, [setViewMode]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "uxf-date-picker__month-select" },
-            react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevMonth, isIconButton: true, onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined, title: "Zp\u011Bt", variant: "text" },
-                react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
-            react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleMonthClick }, monthLabel),
-            react_1.default.createElement(button_1.Button, { disabled: !canGoToNextMonth, isIconButton: true, onClick: canGoToNextMonth ? handleGoToNextMonth : undefined, title: "Vp\u0159ed", variant: "text" },
-                react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "uxf-date-picker__month-calendar" },
-            weekdayLabels.map((weekdayLabel, index) => (react_1.default.createElement("span", { key: `${index}`, className: "uxf-date-picker__weekday-label" }, weekdayLabel))),
-            days.map((day, index) => (react_1.default.createElement(date_picker_day_1.DatePickerDay, { currentMonth: day.currentMonth, day: day, key: day.dayLabel + index }))))));
+        react_1.default.createElement(date_picker_navigation_1.DatePickerNavigation, { prevButtonProps: {
+                disabled: !canGoToPrevMonth,
+                onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
+                title: "Zpět",
+            }, nextButtonProps: {
+                disabled: !canGoToNextMonth,
+                onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
+                title: "Vpřed",
+            }, selectButtonProps: {
+                children: monthLabel,
+                onClick: handleMonthClick,
+                title: "Vybrat měsíc",
+            } }),
+        react_1.default.createElement(calendar_1.Calendar, null)));
 });
 exports.DatePickerMonth.displayName = "UxfUiDatePickerMonth";

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

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { ButtonProps } from "../button";
+interface Props {
+    prevButtonProps: ButtonProps;
+    selectButtonProps: ButtonProps;
+    nextButtonProps: ButtonProps;
+}
+export declare const DatePickerNavigation: FC<Props>;
+export {};

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerNavigation = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("../button");
+const icon_1 = require("../icon");
+const DatePickerNavigation = (props) => {
+    return (react_1.default.createElement("div", { className: "uxf-date-picker__navigation" },
+        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", ...props.prevButtonProps },
+            react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
+        props.selectButtonProps.onClick ? (react_1.default.createElement(button_1.Button, { variant: "text", color: "default", ...props.selectButtonProps })) : (react_1.default.createElement("p", { className: "uxf-date-picker__navigation-title" }, props.selectButtonProps.children)),
+        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", ...props.nextButtonProps },
+            react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))));
+};
+exports.DatePickerNavigation = DatePickerNavigation;
+exports.DatePickerNavigation.displayName = "UxfUiDatePickerArrowsViewMode";

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

@@ -33,8 +33,7 @@ const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-cont
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
-const button_1 = require("../button");
-const icon_1 = require("../icon");
+const date_picker_navigation_1 = require("./date-picker-navigation");
 exports.DatePickerYear = (0, react_1.memo)((props) => {
     const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const currentMonth = activeMonths[0].month;
@@ -63,12 +62,19 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
         }
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "uxf-date-picker__year-select" },
-            react_1.default.createElement(button_1.Button, { disabled: !canGoToPrevYear, isIconButton: true, onClick: canGoToPrevYear ? handleGoToPrevYear : undefined, title: "P\u0159edchoz\u00ED rok", variant: "text" },
-                react_1.default.createElement(icon_1.Icon, { name: "chevronLeft", size: 16 })),
-            react_1.default.createElement(button_1.Button, { variant: "text", onClick: handleYearClick }, yearLabel),
-            react_1.default.createElement(button_1.Button, { disabled: !canGoToNextYear, isIconButton: true, onClick: canGoToNextYear ? handleGoToNextYear : undefined, title: "Nadch\u00E1zej\u00EDc\u00ED rok", variant: "text" },
-                react_1.default.createElement(icon_1.Icon, { name: "chevronRight", size: 16 }))),
-        react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-date-picker__cell__month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
+        react_1.default.createElement(date_picker_navigation_1.DatePickerNavigation, { prevButtonProps: {
+                disabled: !canGoToPrevYear,
+                onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
+                title: "Předchozí rok",
+            }, nextButtonProps: {
+                disabled: !canGoToNextYear,
+                onClick: canGoToNextYear ? handleGoToNextYear : undefined,
+                title: "Nadcházející rok",
+            }, selectButtonProps: {
+                children: yearLabel,
+                onClick: handleYearClick,
+                title: "Vybrat rok",
+            } }),
+        react_1.default.createElement("div", { className: "uxf-date-picker__year-calendar" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-date-picker__cell-month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });
 exports.DatePickerYear.displayName = "UxfUiDatePickerYear";

package/package.json

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

package/select/select.js

@@ -35,7 +35,7 @@ SelectedOption.displayName = "UxfUiSelectSelectedOption";
 const Select = (props) => {
     var _a, _b, _c;
     const selectedOption = props.options.find((option) => option.id === props.value);
-    const onChange = (v) => props.onChange(v.id);
+    const onChange = (v) => props.onChange(v === null || v === void 0 ? void 0 : v.id);
     return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, customInputElementDisplayName: SelectedOption.displayName, dropdownPlacement: props.dropdownPlacement, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: props.value, variant: props.variant },
         react_2.default.createElement(SelectedOption, { isEmpty: !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) }, selectedOption
             ? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label