oolib 2.169.1 → 2.170.1

package/dist/components/shadcn/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: {
+    variant?: "link" | "default" | "secondary" | "ghost" | "outline" | "destructive";
+    size?: "sm" | "lg" | "default" | "icon";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/shadcn/button.js

@@ -0,0 +1,82 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = exports.Button = void 0;
+var React = __importStar(require("react"));
+var react_slot_1 = require("@radix-ui/react-slot");
+var class_variance_authority_1 = require("class-variance-authority");
+var twmerge_1 = require("../../utils/twmerge");
+var buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+            icon: "h-9 w-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+exports.buttonVariants = buttonVariants;
+var Button = React.forwardRef(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
+    var Comp = asChild ? react_slot_1.Slot : "button";
+    return (React.createElement(Comp, __assign({ className: (0, twmerge_1.cn)(buttonVariants({ variant: variant, size: size, className: className })), ref: ref }, props)));
+});
+exports.Button = Button;
+Button.displayName = "Button";

package/dist/components/shadcn/calendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };

package/dist/components/shadcn/calendar.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+var React = __importStar(require("react"));
+var lucide_react_1 = require("lucide-react");
+var react_day_picker_1 = require("react-day-picker");
+var twmerge_1 = require("../../utils/twmerge");
+var button_1 = require("./button");
+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 (React.createElement(react_day_picker_1.DayPicker, __assign({ showOutsideDays: showOutsideDays, className: (0, twmerge_1.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: (0, twmerge_1.cn)((0, button_1.buttonVariants)({ variant: "outline" }), "h-7 w-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-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: (0, twmerge_1.cn)("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range"
+                ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+                : "[&:has([aria-selected])]:rounded-md"), day: (0, twmerge_1.cn)((0, button_1.buttonVariants)({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"), day_range_start: "day-range-start", 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 aria-selected:bg-accent/50 aria-selected:text-muted-foreground", 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 className = _a.className, props = __rest(_a, ["className"]);
+                return (React.createElement(lucide_react_1.ChevronLeft, __assign({ className: (0, twmerge_1.cn)("h-4 w-4", className) }, props)));
+            },
+            IconRight: function (_a) {
+                var className = _a.className, props = __rest(_a, ["className"]);
+                return (React.createElement(lucide_react_1.ChevronRight, __assign({ className: (0, twmerge_1.cn)("h-4 w-4", className) }, props)));
+            },
+        } }, props)));
+}
+exports.Calendar = Calendar;
+Calendar.displayName = "Calendar";

package/dist/components/shadcn/index.d.ts

@@ -0,0 +1,3 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./popover";
+export { Calendar } from "./calendar";
+export { Button, buttonVariants } from "./button";

package/dist/components/shadcn/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = exports.Button = exports.Calendar = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = void 0;
+var popover_1 = require("./popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return popover_1.Popover; } });
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return popover_1.PopoverTrigger; } });
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return popover_1.PopoverContent; } });
+Object.defineProperty(exports, "PopoverAnchor", { enumerable: true, get: function () { return popover_1.PopoverAnchor; } });
+var calendar_1 = require("./calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return calendar_1.Calendar; } });
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return button_1.buttonVariants; } });

package/dist/components/shadcn/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/shadcn/popover.js

@@ -0,0 +1,64 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = void 0;
+var React = __importStar(require("react"));
+var PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
+var twmerge_1 = require("../../utils/twmerge");
+var Popover = PopoverPrimitive.Root;
+exports.Popover = Popover;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+exports.PopoverTrigger = PopoverTrigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+exports.PopoverAnchor = PopoverAnchor;
+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 (React.createElement(PopoverPrimitive.Portal, null,
+        React.createElement(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: (0, twmerge_1.cn)("z-50 w-72 rounded-md border bg-popover 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))));
+});
+exports.PopoverContent = PopoverContent;
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from "./v2/components/cards/ListContent";
 export * from "./v2/components/Tags";
 export * from "./v2/components/ImagePlaceholder";
 export * from "./v2/components/Buttons";
+export * from "./components/shadcn";
 export { colors } from "./themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";
@@ -75,6 +76,7 @@ export { colors as colors2 } from "./v2/themes";
 export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
 export { HintsProvider } from "./v2/components/Hints/contextApi";
 export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
+export { DatePickerWithRangeV3 } from "./v2/components/DatePickerShadCN";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { TagClear, TagLink, TagSelect } from "./components/Tags";
 export { BannerAlert, BannerInfo } from "./components/Banners";

package/dist/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.DateRangePickerV2 = exports.HintsProvider = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
+exports.DatePickerWithRangeV3 = exports.DateRangePickerV2 = exports.HintsProvider = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -196,3 +196,6 @@ var DateRangePicker_2 = require("./v2/components/DateRangePicker");
 Object.defineProperty(exports, "DateRangePickerV2", { enumerable: true, get: function () { return DateRangePicker_2.DateRangePicker; } });
 // V2 new ready components
 // export * from './v2/components/TextInputs';
+var DatePickerShadCN_1 = require("./v2/components/DatePickerShadCN");
+Object.defineProperty(exports, "DatePickerWithRangeV3", { enumerable: true, get: function () { return DatePickerShadCN_1.DatePickerWithRangeV3; } });
+__exportStar(require("./components/shadcn"), exports);

package/dist/stories/Oolib/components/Playground.stories.js

@@ -6,21 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Playground = void 0;
 var react_1 = __importDefault(require("react"));
 var Playground_1 = require("../../../components/Playground");
+var DatePickerShadCN_1 = require("../../../v2/components/DatePickerShadCN");
 exports.default = {
     title: "Components/Playground",
     // argTypes:{
-    //   width: {
-    //     name: "Width PX",
-    //     control: { type: 'range', min: 300, max: 1500, step: 100 },
-    //   }
     // },
     // args: {
-    //   invert: false,
-    //   width: 1300,    
     // }
 };
 var Playground = function (args) {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Playground_1.Playground, null)));
+        react_1.default.createElement("button", { className: "bg-red-100 h-10 w-10" }, "Tag button"),
+        react_1.default.createElement(DatePickerShadCN_1.DatePickerWithRangeV3, null)));
 };
 exports.Playground = Playground;

package/dist/stories/v2/components/Date.stories.js

@@ -16,8 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker_ = exports.DateRangePicker_ = void 0;
 var react_1 = require("react");
-var DateRangePicker_1 = require("../../../v2/components/DateRangePicker");
+// import { DateRangePicker } from "../../../v2/components/DateRangePicker";
 var DatePicker_1 = __importDefault(require("../../../v2/components/DatePicker"));
+var DatePickerShadCN_1 = require("../../../v2/components/DatePickerShadCN");
 exports.default = {
     title: 'Oolib V 2.0/components/Date',
 };
@@ -25,15 +26,16 @@ var DateRangePicker_ = function (args) {
     var _a = (0, react_1.useState)([]), dateRange = _a[0], setDateRange = _a[1];
     var handleDateRangeChange = function (id, newValue) {
         setDateRange(newValue);
-        // console.log(dateRange)
+        console.log(dateRange);
     };
+    console.log({ dateRange: dateRange });
     return (React.createElement("div", { style: {
             width: '45vw',
             height: '95vh',
             backgroundColor: args.invert && greyColor100,
             padding: '1rem',
         } },
-        React.createElement(DateRangePicker_1.DateRangePicker, __assign({}, args, { id: "my-date-range-picker", value: dateRange, onChange: handleDateRangeChange, label: "Date Range Picker", sublabel: "Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates." }))));
+        React.createElement(DatePickerShadCN_1.DatePickerWithRangeV3, __assign({}, args, { id: "my-date-range-picker", value: dateRange, onChange: handleDateRangeChange, label: "Date Range Picker", sublabel: "Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates." }))));
 };
 exports.DateRangePicker_ = DateRangePicker_;
 exports.DateRangePicker_.argTypes = {

package/dist/utils/twmerge.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/twmerge.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+var clsx_1 = require("clsx");
+var tailwind_merge_1 = require("tailwind-merge");
+function cn() {
+    var inputs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        inputs[_i] = arguments[_i];
+    }
+    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+}
+exports.cn = cn;

package/dist/v2/components/DatePickerShadCN/index.d.ts

@@ -0,0 +1,17 @@
+export function DatePickerWithRangeV3({ className, value, onChange, id, readOnly, futureDateOnly, previousDateOnly, allowPresentlyOngoing, invert, disabled, debug, startDateLabel, endDateLabel, withPortal, }: {
+    className: any;
+    value?: any[];
+    onChange: any;
+    id: any;
+    readOnly?: boolean;
+    futureDateOnly?: boolean;
+    previousDateOnly?: boolean;
+    allowPresentlyOngoing?: boolean;
+    invert?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+    startDateLabel?: string;
+    endDateLabel?: string;
+    withPortal?: boolean;
+}): React.JSX.Element;
+import React from "react";

package/dist/v2/components/DatePickerShadCN/index.js

@@ -0,0 +1,305 @@
+"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.DatePickerWithRangeV3 = void 0;
+var react_1 = __importStar(require("react"));
+var popover_1 = require("../../../components/shadcn/popover");
+var TextInputs_1 = require("../TextInputs");
+var calendar_1 = require("../../../components/shadcn/calendar");
+var date_fns_1 = require("date-fns");
+var twmerge_1 = require("../../../utils/twmerge");
+// import { CheckboxButton } from "../../../components/RadioAndCheckbox";
+function DatePickerWithRangeV3(_a) {
+    var className = _a.className, _b = _a.value, value = _b === void 0 ? [null, null] : _b, onChange = _a.onChange, id = _a.id, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.futureDateOnly, futureDateOnly = _d === void 0 ? false : _d, _e = _a.previousDateOnly, previousDateOnly = _e === void 0 ? false : _e, _f = _a.allowPresentlyOngoing, allowPresentlyOngoing = _f === void 0 ? false : _f, _g = _a.invert, invert = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.debug, debug = _j === void 0 ? false : _j, _k = _a.startDateLabel, startDateLabel = _k === void 0 ? "Start Date" : _k, _l = _a.endDateLabel, endDateLabel = _l === void 0 ? "End Date" : _l, _m = _a.withPortal, withPortal = _m === void 0 ? false : _m;
+    var _o = (0, react_1.useState)(""), inputValue = _o[0], setInputValue = _o[1];
+    var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
+    var currentDate = new Date();
+    currentDate.setHours(0, 0, 0, 0);
+    var yesterday = new Date(currentDate);
+    yesterday.setDate(currentDate.getDate() - 1);
+    // Update input value when controlled value changes
+    (0, react_1.useEffect)(function () {
+        if (value[0]) {
+            if (value[1] === null) {
+                setInputValue("".concat((0, date_fns_1.format)(value[0], "PP"), " - Ongoing"));
+            }
+            else if (value[1]) {
+                setInputValue("".concat((0, date_fns_1.format)(value[0], "PP"), " - ").concat((0, date_fns_1.format)(value[1], "PP")));
+            }
+            else {
+                setInputValue((0, date_fns_1.format)(value[0], "PP"));
+            }
+        }
+        else {
+            setInputValue("");
+        }
+    }, [value]);
+    var handleInputChange = function (inputVal) {
+        setInputValue(inputVal);
+        if (readOnly)
+            return;
+        var dates = inputVal.split("-").map(function (d) { return d.trim(); });
+        if (dates.length === 2) {
+            var fromDate = (0, date_fns_1.parse)(dates[0], "PP", new Date());
+            var toDate = dates[1].toLowerCase() === "ongoing" ? null :
+                (0, date_fns_1.parse)(dates[1], "PP", new Date());
+            if ((0, date_fns_1.isValid)(fromDate) && (toDate === null || (0, date_fns_1.isValid)(toDate))) {
+                if (isDateValid(fromDate) && (toDate === null || isDateValid(toDate))) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(id, [fromDate, toDate]);
+                }
+            }
+        }
+        else if (dates.length === 1) {
+            var singleDate = (0, date_fns_1.parse)(dates[0], "PP", new Date());
+            if ((0, date_fns_1.isValid)(singleDate) && isDateValid(singleDate)) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(id, [singleDate, undefined]);
+            }
+        }
+    };
+    var isDateValid = function (date) {
+        if (!date)
+            return true;
+        if (futureDateOnly && !invert) {
+            return isFuture(date) || (allowPresentlyOngoing && isToday(date));
+        }
+        if (previousDateOnly && !invert) {
+            return isPast(date) || isToday(date);
+        }
+        return true;
+    };
+    var getMinDate = function (isEndDate) {
+        if (futureDateOnly && !invert) {
+            return currentDate;
+        }
+        if (isEndDate && value[0]) {
+            return value[0];
+        }
+        return undefined;
+    };
+    var getMaxDate = function () {
+        if (previousDateOnly && !invert) {
+            return yesterday;
+        }
+        return undefined;
+    };
+    var handleCalendarSelect = function (dates) {
+        if (readOnly)
+            return;
+        if (!dates) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(id, [null, null]);
+            return;
+        }
+        var from = dates.from, to = dates.to;
+        if (from && isDateValid(from)) {
+            if (to && isDateValid(to)) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(id, [from, to]);
+                setIsOpen(false);
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(id, [from, undefined]);
+            }
+        }
+    };
+    var handleOngoingToggle = function (checked) {
+        if (value[0]) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(id, [value[0], checked ? null : undefined]);
+        }
+    };
+    if (debug) {
+        console.log({
+            id: id,
+            value: value,
+            inputValue: inputValue,
+            isOpen: isOpen,
+            readOnly: readOnly,
+            futureDateOnly: futureDateOnly,
+            previousDateOnly: previousDateOnly,
+            allowPresentlyOngoing: allowPresentlyOngoing,
+            invert: invert,
+            disabled: disabled
+        });
+    }
+    return (react_1.default.createElement("div", { className: (0, twmerge_1.cn)("grid gap-2", className) },
+        react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+            react_1.default.createElement(popover_1.Popover, { open: isOpen && !disabled && !readOnly, onOpenChange: setIsOpen },
+                react_1.default.createElement(popover_1.PopoverTrigger, { asChild: true },
+                    react_1.default.createElement("div", { className: "relative" },
+                        react_1.default.createElement(TextInputs_1.TextInput, { id: id, placeholder: "Pick a date range", value: inputValue, onChange: function (id, value) { return handleInputChange(value); }, className: "w-[225px]", icon: "CalendarBlank", disabled: disabled, readOnly: readOnly }))),
+                react_1.default.createElement(popover_1.PopoverContent, { className: "w-auto p-0", align: "start" },
+                    react_1.default.createElement(calendar_1.Calendar, { initialFocus: true, mode: "range", defaultMonth: value[0] || undefined, selected: value[1] === null ? { from: value[0], to: undefined } :
+                            { from: value[0], to: value[1] }, onSelect: function (range) { return handleCalendarSelect(range); }, numberOfMonths: 2, disabled: function (date) {
+                            if (disabled)
+                                return true;
+                            if (readOnly)
+                                return true;
+                            var minDate = getMinDate(false);
+                            var maxDate = getMaxDate();
+                            if (minDate && date < minDate)
+                                return true;
+                            if (maxDate && date > maxDate)
+                                return true;
+                            return false;
+                        } }))),
+            debug && (react_1.default.createElement("pre", { className: "mt-4 p-4 bg-gray-100 rounded" }, JSON.stringify({ value: value, inputValue: inputValue }, null, 2))))));
+}
+exports.DatePickerWithRangeV3 = DatePickerWithRangeV3;
+//  DatePickerWithRangeV3
+// function DatePickerDemo() {
+//   const [date, setDate] = React.useState();
+//   return (
+//     <Popover>
+//       <PopoverTrigger asChild>
+//         <Button
+//           variant={"outline"}
+//           className={cn(
+//             "w-[280px] justify-start text-left font-normal",
+//             !date && "text-muted-foreground"
+//           )}
+//         >
+//           <CalendarIcon />
+//           {date ? format(date, "PPP") : <span>Pick a date</span>}
+//         </Button>
+//       </PopoverTrigger>
+//       <PopoverContent className="w-auto p-0">
+//         <Calendar
+//           mode="single"
+//           selected={date}
+//           onSelect={setDate}
+//           initialFocus
+//         />
+//       </PopoverContent>
+//     </Popover>
+//   );
+// }
+// function DatePickerWithRange({ className }) {
+//   const [date, setDate] = React.useState({
+//     from: new Date(2022, 0, 20),
+//     to: addDays(new Date(2022, 0, 20), 20),
+//   });
+//   return (
+//     <div className={cn("grid gap-2", className)}>
+//       <Popover>
+//         <PopoverTrigger asChild>
+//           <Button
+//             id="date"
+//             variant={"outline"}
+//             className={cn(
+//               "w-[300px] justify-start text-left font-normal",
+//               !date && "text-muted-foreground"
+//             )}
+//           >
+//             <CalendarIcon />
+//             {date?.from ? (
+//               date.to ? (
+//                 <>
+//                   {format(date.from, "LLL dd, y")} -{" "}
+//                   {format(date.to, "LLL dd, y")}
+//                 </>
+//               ) : (
+//                 format(date.from, "LLL dd, y")
+//               )
+//             ) : (
+//               <span>Pick a date</span>
+//             )}
+//           </Button>
+//         </PopoverTrigger>
+//         <PopoverContent className="w-auto p-0" align="start">
+//           <Calendar
+//             initialFocus
+//             mode="range"
+//             defaultMonth={date?.from}
+//             selected={date}
+//             onSelect={setDate}
+//             numberOfMonths={2}
+//           />
+//         </PopoverContent>
+//       </Popover>
+//     </div>
+//   );
+// }
+// function DatePickerWithRange2({ className }) {
+//   const [date, setDate] = React.useState();
+//   const [inputValue, setInputValue] = React.useState("");
+//   const [isOpen, setIsOpen] = React.useState(false);
+//   const handleInputChange = (value) => {
+//     // const value = event.target.value;
+//     setInputValue(value);
+//     const dates = value.split("-").map((d) => d.trim());
+//     if (dates.length === 2) {
+//       const fromDate = parse(dates[0], "PP", new Date());
+//       const toDate = parse(dates[1], "PP", new Date());
+//       if (isValid(fromDate) && isValid(toDate)) {
+//         setDate({ from: fromDate, to: toDate });
+//       }
+//     } else if (dates.length === 1) {
+//       const singleDate = parse(dates[0], "PP", new Date());
+//       if (isValid(singleDate)) {
+//         setDate({ from: singleDate, to: undefined });
+//       }
+//     }
+//   };
+//   React.useEffect(() => {
+//     if (date?.from) {
+//       if (date.to) {
+//         setInputValue(`${format(date.from, "PP")} - ${format(date.to, "PP")}`);
+//       } else {
+//         setInputValue(format(date.from, "PP"));
+//       }
+//     }
+//   }, [date]);
+//   return (
+//     <div className={cn("grid gap-2", className)}>
+//       <Popover open={isOpen} onOpenChange={setIsOpen}>
+//         <PopoverTrigger asChild>
+//           <div className="relative">
+//             <TextInput
+//               id="date"
+//               placeholder="Pick a date range"
+//               value={inputValue}
+//               onChange={(id, value) => handleInputChange(value)}
+//               className="w-max"
+//               icon={"CalendarBlank"}
+//             />
+//           </div>
+//         </PopoverTrigger>
+//         <PopoverContent className="w-auto p-0" align="start">
+//           <Calendar
+//             initialFocus
+//             mode="range"
+//             defaultMonth={date?.from}
+//             selected={date}
+//             onSelect={(newDate) => {
+//               setDate(newDate);
+//               if (newDate?.to) {
+//                 setIsOpen(false);
+//               }
+//             }}
+//             numberOfMonths={2}
+//           />
+//         </PopoverContent>
+//       </Popover>
+//     </div>
+//   );
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.169.1",
+  "version": "2.170.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,23 +51,35 @@
     "@storybook/addon-docs": "^7.2.1",
     "@storybook/addon-essentials": "^7.2.1",
     "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^7.6.20",
     "@storybook/mdx2-csf": "^1.1.0",
     "@storybook/react": "^7.2.1",
     "@storybook/react-webpack5": "^7.2.1",
     "@types/styled-components": "^5.1.26",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.13.2",
     "chromatic": "^6.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
     "localtunnel": "^2.0.2",
+    "lucide-react": "^0.474.0",
     "mdx-embed": "^1.0.0",
+    "postcss": "^8.5.1",
     "react": "^17.0.2",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.28.0",
     "semantic-release": "^18.0.0",
     "storybook": "^7.2.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.4.3"
   },
   "peerDependencies": {
@@ -90,6 +102,8 @@
     "@lexical/react": "^0.13.1",
     "@lexical/table": "^0.13.1",
     "@material/material-color-utilities": "^0.3.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+}

package/tailwind.config.js

@@ -0,0 +1,60 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  darkMode: ['class', '[data-mode="dark"]'],
+  theme: {
+  	extend: {
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+