@uxf/ui 1.0.0-beta.164 → 1.0.0-beta.166

package/_select-base/_select-base.d.ts

@@ -2,7 +2,7 @@ import { Placement, Strategy } from "@floating-ui/react";
 import type { Combobox, Listbox } from "@headlessui/react";
 import { IconsSet } from "@uxf/ui/icon/theme";
 import { Clearable, FormControlProps } from "@uxf/ui/types";
-import { ReactElement, ReactNode, Ref } from "react";
+import React, { ReactElement, ReactNode, Ref } from "react";
 import { InputGroupSizes, InputGroupVariants } from "../input/theme";
 export type SelectBaseValueId = number | string;
 export type SelectBaseValue<ValueId = SelectBaseValueId> = {
@@ -47,7 +47,7 @@ type Props<ValueId = SelectBaseValue, Value = ValueId, Option = SelectBaseOption
     value: ValueId | null;
 });
 export declare const _SelectBase: {
-    <ValueId = SelectBaseValue<SelectBaseValueId>, Value = ValueId, Option = SelectBaseOption<ValueId>>(props: Props<ValueId, Value, Option>): JSX.Element;
+    <ValueId = SelectBaseValue<SelectBaseValueId>, Value = ValueId, Option = SelectBaseOption<ValueId>>(props: Props<ValueId, Value, Option>): React.JSX.Element;
     displayName: string;
 };
 export {};

package/avatar/avatar.stories.d.ts

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

package/avatar-file-input/avatar-file-input.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("./avatar-file-input").AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/badge/badge.stories.d.ts

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

package/button/button.stories.d.ts

@@ -7,4 +7,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

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

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.FC<React.PropsWithChildren<import("./button-group").ButtonGroupProps>>;
 };
 export default _default;
-export declare const Default: () => JSX.Element;
+export declare const Default: () => React.JSX.Element;

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

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.FC<import("./button-list").ButtonListProps>;
 };
 export default _default;
-export declare const Default: () => JSX.Element;
+export declare const Default: () => React.JSX.Element;

package/calendar/calendar.stories.d.ts

@@ -7,4 +7,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/checkbox/checkbox.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     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-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-input/checkbox-input.stories.d.ts

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

package/chip/chip.stories.d.ts

@@ -7,4 +7,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/color-radio/color-radio.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("./color-radio").ColorRadioProps<string | number> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/color-radio-group/color-radio-group.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("./color-radio-group").ColorRadioGroupProps & React.RefAttributes<HTMLLabelElement>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import React, { ReactNode, Ref } from "react";
 import { SelectBaseProps, SelectBaseValueId } from "../_select-base";
 export type ComboboxValueId = SelectBaseValueId;
 export type ComboboxValue<ValueId = ComboboxValueId> = {
@@ -17,7 +17,7 @@ export interface ComboboxProps<ValueId = SelectBaseValueId, Option = ComboboxOpt
     renderOption?: (option: Option) => ReactNode;
 }
 export declare const Combobox: {
-    <ValueId = SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: ComboboxProps<ValueId, Option, Value>): JSX.Element;
+    <ValueId = SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
     displayName: string;
 };
 export {};

package/combobox/combobox.stories.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import React from "react";
 declare const _default: {
     title: string;
     component: {
-        <ValueId = import("../_select-base").SelectBaseValueId, Option = import("./combobox").ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): JSX.Element;
+        <ValueId = import("../_select-base").SelectBaseValueId, Option = import("./combobox").ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
         displayName: string;
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
-export declare function Async(): JSX.Element;
-export declare function ComponentStructure(): JSX.Element;
+export declare function Default(): React.JSX.Element;
+export declare function Async(): React.JSX.Element;
+export declare function ComponentStructure(): React.JSX.Element;

package/config/icons-config.d.ts

@@ -1,2 +1,2 @@
-export declare const ICONS_VERSION = "1676106442386";
+export declare const ICONS_VERSION = "1685632683041";
 export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
-exports.ICONS_VERSION = "1676106442386";
+exports.ICONS_VERSION = "1685632683041";
 exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -1,4 +1,12 @@
 export declare const ICONS: {
+    readonly "arrow-left": {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly "arrow-right": {
+        readonly w: 448;
+        readonly h: 512;
+    };
     readonly calendar: {
         readonly w: 448;
         readonly h: 512;
@@ -83,6 +91,8 @@ export declare const ICONS: {
 export type IconsType = keyof typeof ICONS;
 declare module "@uxf/ui/icon/theme" {
     interface IconsSet {
+        "arrow-left": true;
+        "arrow-right": true;
         "calendar": true;
         "camera": true;
         "caretDown": true;

package/config/icons.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICONS = void 0;
 exports.ICONS = {
+    "arrow-left": { w: 448, h: 512 },
+    "arrow-right": { w: 448, h: 512 },
     "calendar": { w: 448, h: 512 },
     "camera": { w: 512, h: 512 },
     "caretDown": { w: 320, h: 512 },

package/css/calendar.css

@@ -1,5 +1,5 @@
 .uxf-calendar {
-    &__cell-day {
+    &__cell {
         align-items: center;
         background-color: theme("backgroundColor.white");
         color: theme("colors.lightMedium");
@@ -13,8 +13,6 @@
         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");
@@ -37,6 +35,10 @@
                 position: absolute;
             }
         }
+    }
+
+    &__cell-day {
+        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
 
         &:first-child {
             border-top-left-radius: var(--compensated-radii);
@@ -54,16 +56,6 @@
             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");
@@ -109,6 +101,37 @@
                 }
             }
         }
+
+        &--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");
+            }
+        }
+    }
+
+    &__cell-month,
+    &__cell-year {
+        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
+
+        &:first-child {
+            border-top-left-radius: var(--compensated-radii);
+        }
+
+        &:nth-child(3) {
+            border-top-right-radius: var(--compensated-radii);
+        }
+
+        &:nth-last-child(3) {
+            border-bottom-left-radius: var(--compensated-radii);
+        }
+
+        &:last-child {
+            border-bottom-right-radius: var(--compensated-radii);
+        }
     }
 
     &__weekdays {
@@ -118,6 +141,7 @@
         font-size: 10px;
         font-weight: theme("fontWeight.semibold");
         grid-template-columns: repeat(7, minmax(0, 1fr));
+        margin-bottom: 6px;
         padding: 0 1px;
         text-align: center;
         text-transform: uppercase;
@@ -131,16 +155,17 @@
         align-items: center;
         display: flex;
         flex-direction: column;
-        height: 32px;
+        height: 21px;
         justify-content: center;
     }
 
-    &__days {
+    &__days,
+    &__year,
+    &__decade {
         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;
 
@@ -148,4 +173,13 @@
             background-color: theme("backgroundColor.darkBorder");
         }
     }
+
+    &__days {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    &__year,
+    &__decade {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
 }

package/css/date-picker.css

@@ -1,84 +1,22 @@
 .uxf-date-picker {
-    &__navigation {
-        @apply flex items-center justify-between px-4 w-[320px] sm:w-[360px];
-    }
-
-    &__month-calendar,
-    &__year-calendar,
-    &__decade-calendar {
-        @apply grid place-items-center w-full px-4 pt-4 text-center;
-    }
-
-    &__month-calendar {
-        @apply grid-cols-7 gap-0.5;
-    }
-
-    &__year-calendar {
-        @apply grid-cols-3 sm:grid-cols-4 gap-2;
-    }
-
-    &__decade-calendar {
-        @apply grid-cols-3 gap-2;
-    }
-
-    &__weekday-label {
-        @apply uppercase pb-2;
-    }
-
-    &__decade-label {
-        @apply font-semibold;
-    }
-
-    &__cell {
-        @apply 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;
-
-        &-month {
-            @apply w-full;
-        }
+    @apply w-[296px] sm:w-[340px] mx-auto;
 
-        &__year {
-            @apply w-full;
-        }
-    }
-
-    :root .light & {
-        @apply text-gray-900;
-
-        .uxf-date-picker__cell {
-            @apply hover:bg-gray-200 focus-visible:before:border-primary;
-        }
-
-        .uxf-date-picker__cell-day--today {
-            @apply bg-primary-200 hover:bg-primary-300;
-        }
-
-        .uxf-date-picker__cell-day--selected {
-            @apply bg-primary text-white hover:bg-primary;
-        }
-
-        .uxf-date-picker__cell-day--not-current-month {
-            @apply text-gray-400;
-        }
-    }
-
-    :root .dark & {
-        @apply bg-gray-900 text-white;
+    &__navigation {
+        @apply flex items-center justify-between mb-4;
 
-        .uxf-date-picker__cell {
-            @apply hover:bg-gray-700 focus-visible:before:border-primary;
-        }
+        &-title {
+            font-size: 14px;
+            font-weight: theme("fontWeight.medium");
+            text-align: center;
 
-        .uxf-date-picker__cell-day--today {
-            @apply bg-primary-400/50 hover:bg-primary-400/60;
-        }
+            :root .light & {
+                @apply text-lightMedium is-hoverable:text-lightHigh;
+            }
 
-        .uxf-date-picker__cell-day--selected {
-            @apply bg-primary text-white hover:bg-primary;
-        }
+            :root .dark & {
+                @apply text-darkMedium is-hoverable:text-darkHigh;
+            }
 
-        .uxf-date-picker__cell-day--not-current-month {
-            @apply text-gray-600;
         }
     }
 }

package/css/datetime-picker.css

@@ -0,0 +1,11 @@
+.uxf-datetime-picker {
+    &__tabs {
+        @apply mx-auto w-fit mb-4;
+    }
+
+    &__tab {
+        @apply py-0 text-body2 px-3;
+
+        height: theme("inputSize.xs");
+    }
+}

package/css/input-with-popover.css

@@ -1,6 +1,6 @@
 .uxf-iwp {
     &__popover-panel {
-        @apply z-dropdown max-w-md overflow-y-auto rounded-md p-2 shadow-lg ring-1 ring-black
+        @apply z-dropdown max-w-md overflow-y-auto rounded-md p-3 shadow-lg ring-1 ring-black
             ring-opacity-5 focus:outline-none;
 
         :root .light & {

package/css/time-picker.css

@@ -1,21 +1,24 @@
 .uxf-time-picker {
     &__global {
-        @apply flex items-center justify-between px-4 w-[180px];
+        @apply flex items-center justify-between px-4 w-[180px] mx-auto;
 
         &__column {
             @apply flex flex-col items-center shrink-0;
 
+            width: 48px;
+
             & > :nth-child(1),
             & > :nth-child(3) {
-                @apply h-6;
+                height: 24px
             }
         }
     }
 
     &__hours,
     &__minutes {
-        @apply grid grid-cols-4 place-items-center gap-1;
+        @apply grid grid-cols-4 place-items-center gap-1 mx-auto;
 
+        text-align: center;
         width: 200px;
     }
 

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

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const DatePickerContent: FC<PropsWithChildren>;

package/{date-picker-provider/date-picker.js → date-picker/date-picker-content.js}

@@ -23,13 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = void 0;
+exports.DatePickerContent = void 0;
 const react_1 = __importStar(require("react"));
 const date_picker_year_1 = require("./date-picker-year");
 const date_picker_decade_1 = require("./date-picker-decade");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const date_picker_month_1 = require("./date-picker-month");
-const DatePicker = (props) => {
+const DatePickerContent = (props) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { goToDate, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const [viewMode, setViewMode] = (0, react_1.useState)("month");
@@ -51,5 +51,5 @@ const DatePicker = (props) => {
         props.children,
         datePickerComponents[viewMode]));
 };
-exports.DatePicker = DatePicker;
-exports.DatePicker.displayName = "UxfUiDatePicker";
+exports.DatePickerContent = DatePickerContent;
+exports.DatePickerContent.displayName = "UxfUiDatePickerContent";

package/{date-picker-provider → date-picker}/date-picker-decade.js

@@ -68,6 +68,6 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
             }, 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))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED), key: year.yearLabel + index, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "UxfUiDatePickerDecade";

package/{date-picker-provider → date-picker}/date-picker-navigation.js

@@ -9,11 +9,11 @@ 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 }))));
+        react_1.default.createElement(button_1.Button, { isIconButton: true, size: "sm", variant: "white", ...props.prevButtonProps },
+            react_1.default.createElement(icon_1.Icon, { name: "arrow-left", size: 16 })),
+        props.selectButtonProps.onClick ? (react_1.default.createElement(button_1.Button, { variant: "text", size: "sm", 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, size: "sm", variant: "white", ...props.nextButtonProps },
+            react_1.default.createElement(icon_1.Icon, { name: "arrow-right", size: 16 }))));
 };
 exports.DatePickerNavigation = DatePickerNavigation;
 exports.DatePickerNavigation.displayName = "UxfUiDatePickerArrowsViewMode";

package/{date-picker-provider → date-picker}/date-picker-year.js

@@ -36,7 +36,6 @@ const react_1 = __importStar(require("react"));
 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;
     const currentYear = activeMonths[0].year;
     const { months, yearLabel } = (0, use_year_1.useYear)({
         year: currentYear,
@@ -75,6 +74,6 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
                 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))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });
 exports.DatePickerYear.displayName = "UxfUiDatePickerYear";

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

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { OnDateChangeType } from "@uxf/datepicker/hooks/use-date-picker";
+export interface DatePickerProps {
+    closePopoverHandler?: () => void;
+    onChange: (data: OnDateChangeType) => void;
+    selectedDate: Date | null;
+}
+export declare const DatePicker: FC<DatePickerProps>;

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

@@ -3,25 +3,23 @@ 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.DatePicker = 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) => {
-    var _a;
+const date_picker_content_1 = require("./date-picker-content");
+const DatePicker = (props) => {
     const datePickerProps = (0, use_date_picker_1.useDatePicker)({
         firstDayOfWeek: 1,
         onDateChange: (data) => {
-            if (props.onChange) {
-                props.onChange(data);
-            }
-            props.closePopoverHandler();
+            var _a;
+            props.onChange(data);
+            (_a = props.closePopoverHandler) === null || _a === void 0 ? void 0 : _a.call(props);
         },
-        selectedDate: (_a = props.selectedDate) !== null && _a !== void 0 ? _a : null,
+        selectedDate: props.selectedDate,
     });
     return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: datePickerProps },
-        react_1.default.createElement(date_picker_1.DatePicker, null)));
+        react_1.default.createElement(date_picker_content_1.DatePickerContent, null)));
 };
-exports.DatePickerProvider = DatePickerProvider;
-exports.DatePickerProvider.displayName = "UxfUiDatePickerProvider";
+exports.DatePicker = DatePicker;
+exports.DatePicker.displayName = "UxfUiDatePicker";

package/{date-picker-provider/date-picker-provider.spec.js → date-picker/date-picker.spec.js}

@@ -5,5 +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 date_picker_provider_stories_1 = require("./date-picker-provider.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_picker_provider_stories_1.Default, null));
+const date_picker_stories_1 = require("./date-picker.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_picker_stories_1.Default, null));

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

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

package/{date-picker-provider/date-picker-provider.stories.js → date-picker/date-picker.stories.js}

@@ -25,23 +25,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importStar(require("react"));
-// import Docs from "./date-picker.docs.mdx";
 const action_1 = require("../utils/action");
-const date_picker_provider_1 = require("./date-picker-provider");
+const date_picker_1 = require("./date-picker");
 exports.default = {
-    title: "UI/DatePickerProvider",
-    component: date_picker_provider_1.DatePickerProvider,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
+    title: "UI/DatePicker",
+    component: date_picker_1.DatePicker,
 };
 function Default() {
-    const [date, setDate] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", setDate);
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setValue);
     const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: onChange, selectedDate: date })));
+        react_1.default.createElement(date_picker_1.DatePicker, { closePopoverHandler: close, onChange: onChange, selectedDate: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
         react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));

package/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export type { DatePickerProps } from "./date-picker";
+export type { ViewModeType } from "./types";
+export { DatePicker } from "./date-picker";