@rovula/ui 0.0.18 → 0.0.19

package/dist/cjs/types/components/DatePicker/DatePicker.d.ts

@@ -1,8 +1,8 @@
-import { FC } from "react";
-import { SelectSingleEventHandler } from "react-day-picker";
+import React, { FC } from "react";
+import { Modifiers } from "react-day-picker";
 type DatePickerProps = {
     date: Date | undefined;
-    onSelect: SelectSingleEventHandler;
+    onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
 };
 declare const DatePicker: FC<DatePickerProps>;
 export default DatePicker;

package/dist/cjs/types/components/DatePicker/DatePicker.stories.d.ts

@@ -3,7 +3,7 @@ declare const meta: {
     title: string;
     component: React.FC<{
         date: Date | undefined;
-        onSelect: import("react-day-picker").SelectSingleEventHandler;
+        onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
     }>;
     tags: string[];
     parameters: {
@@ -11,7 +11,7 @@ declare const meta: {
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         date: Date | undefined;
-        onSelect: import("react-day-picker").SelectSingleEventHandler;
+        onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/components/Calendar/Calendar.js

@@ -22,22 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import "react-day-picker/dist/style.css";
 import { cn } from "@/utils/cn";
-import { buttonVariants } from "../Button/Button.styles";
 function Calendar(_a) {
     var className = _a.className, classNames = _a.classNames, _b = _a.showOutsideDays, showOutsideDays = _b === void 0 ? true : _b, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
-    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, className: cn("p-3", className), classNames: __assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: cn(buttonVariants({ variant: "outline" }), "flex items-center justify-center size-7 bg-transparent p-0 opacity-50 hover:opacity-100"), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: cn(buttonVariants({ variant: "flat" }), "size-7 p-0 font-normal aria-selected:opacity-100"), day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible" }, classNames), components: {
-            IconLeft: function (_a) {
-                var props = __rest(_a, []);
-                return _jsx(ChevronLeftIcon, { className: "h-4 w-4" });
-            },
-            IconRight: function (_a) {
-                var props = __rest(_a, []);
-                return _jsx(ChevronRightIcon, { className: "h-4 w-4" });
-            },
-        } }, props)));
+    var defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-[rgb(var(--card))] text-[rgb(var(--card-foreground))] border-[rgb(var(--card))]", className), classNames: __assign(__assign(__assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9 "), day: "typography-subtitile1 ", today: "text-bold rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4 "), caption_label: cn(defaultClassNames.caption_label, "gap-2") }), classNames) })));
 }
 Calendar.displayName = "Calendar";
 export default Calendar;

package/dist/components/Calendar/Calendar.stories.js

@@ -9,9 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Calendar from "./Calendar";
+import ThemeToggle from "../ThemeToggle";
+import Button from "../Button/Button";
 // import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
 var meta = {
     title: "Components/Calendar",
@@ -31,6 +33,6 @@ export var Default = {
         console.log("args ", args);
         var props = __assign({}, args);
         var _a = React.useState(new Date()), date = _a[0], setDate = _a[1];
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: setDate, className: "rounded-md border" }) }));
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(ThemeToggle, {}), _jsx(Button, { children: "Text" }), _jsx(Calendar, { mode: "single", selected: date, onSelect: setDate, className: "rounded-md border" })] }));
     },
 };

package/dist/components/DatePicker/DatePicker.js

@@ -6,7 +6,6 @@ import { Calendar } from "../Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
-CalendarIcon;
 var DatePicker = function (_a) {
     var date = _a.date, onSelect = _a.onSelect;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -17,6 +16,6 @@ var DatePicker = function (_a) {
                             }
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect.apply(void 0, value);
                             setIsOpen(false);
-                        }, initialFocus: true }) })] }) }));
+                        } }) })] }) }));
 };
 export default DatePicker;

package/dist/components/Popover/Popover.js

@@ -29,7 +29,7 @@ var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.align, align = _b === void 0 ? "center" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-md border bg-popup-background p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-popup-background border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/TextInput/TextInput.stories.js

@@ -23,7 +23,7 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--other-bg-2))]", children: _jsx(Story, {}) })); },
     ],
 };
 export default meta;

package/dist/components/TextInput/TextInput.styles.js

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 export var inputVariant = cva([
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
-    "peer text-black placeholder:text-transparent",
+    "peer text-black placeholder:text-transparent bg-transparent caret-primary",
 ], {
     variants: {
         size: {