From 4c5941a7fb5912e6d9f8c3a7083786afb4fecc06 Mon Sep 17 00:00:00 2001
From: Thomas van der Kleij <t@tmk.io>
Date: Wed, 31 Jul 2024 21:22:57 +0200
Subject: [PATCH 1/4] Add inline option to use the calendar stand alone or with
 a custom input.

Also allow overriding picker classes
---
 pages/index.js                | 16 ++++++++++++++++
 src/components/Datepicker.tsx | 31 ++++++++++++++++++++++++-------
 src/types/index.ts            |  2 ++
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 5ce6034e..d889dda7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -31,6 +31,7 @@ export default function Playground() {
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
     const [startFrom, setStartFrom] = useState("2023-03-01");
     const [startWeekOn, setStartWeekOn] = useState("");
+    const [inline, setInline] = useState(false);
 
     const handleChange = (value, e) => {
         setValue(value);
@@ -113,6 +114,7 @@ export default function Playground() {
                         return isEmpty ? "Select Date" : "Clear";
                     }}
                     popoverDirection={"down"}
+                    inline={inline}
                     // classNames={{
                     //     input: ({ disabled, readOnly, className }) => {
                     //         if (disabled) {
@@ -215,6 +217,20 @@ export default function Playground() {
                             </label>
                         </div>
                     </div>
+                    <div className="mb-2 w-1/2 sm:w-full">
+                        <div className="inline-flex items-center">
+                            <input
+                                type="checkbox"
+                                className="mr-2 rounded"
+                                id="inline"
+                                checked={inline}
+                                onChange={e => setInline(e.target.checked)}
+                            />
+                            <label className="block" htmlFor="inline">
+                                Inline
+                            </label>
+                        </div>
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 54e90b78..5655a3b9 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -7,7 +7,7 @@ import Input from "../components/Input";
 import Shortcuts from "../components/Shortcuts";
 import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { formatDate, nextMonth, previousMonth } from "../helpers";
+import { formatDate, nextMonth, previousMonth, classNames as classNamesUtil } from "../helpers";
 import useOnClickOutside from "../hooks";
 import { Period, DatepickerType, ColorKeys } from "../types";
 
@@ -29,6 +29,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    pickerClassName = null,
     toggleClassName = null,
     toggleIcon = undefined,
     displayFormat = DATE_FORMAT,
@@ -41,7 +42,8 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputName,
     startWeekOn = "sun",
     classNames = undefined,
-    popoverDirection = undefined
+    popoverDirection = undefined,
+    inline = false
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -64,7 +66,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     // Custom Hooks use
     useOnClickOutside(containerRef, () => {
         const container = containerRef.current;
-        if (container) {
+        if (container && !inline) {
             hideDatepicker();
         }
     });
@@ -327,18 +329,33 @@ const Datepicker: React.FC<DatepickerType> = ({
             : defaultContainerClassName;
     }, [containerClassName]);
 
+    const pickerClassNameOverload = useMemo(() => {
+        const defaultPickerClassName = classNamesUtil(
+            "shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg w-fit",
+            !inline && "mt-2.5"
+        );
+        return typeof pickerClassName === "function"
+            ? pickerClassName(defaultPickerClassName)
+            : typeof pickerClassName === "string" && pickerClassName !== ""
+            ? pickerClassName
+            : defaultPickerClassName;
+    }, [pickerClassName, inline]);
+
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
-                <Input setContextRef={setInputRef} />
+                {!inline && <Input setContextRef={setInputRef} />}
 
                 <div
-                    className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
+                    className={classNamesUtil(
+                        "transition-all ease-out duration-300 mt-[1px] text-sm lg:text-xs 2xl:text-sm",
+                        !inline && "absolute z-10 opacity-0 hidden translate-y-4"
+                    )}
                     ref={calendarContainerRef}
                 >
-                    <Arrow ref={arrowRef} />
+                    {!inline && <Arrow ref={arrowRef} />}
 
-                    <div className="mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg">
+                    <div className={pickerClassNameOverload}>
                         <div className="flex flex-col lg:flex-row py-2">
                             {showShortcuts && <Shortcuts />}
 
diff --git a/src/types/index.ts b/src/types/index.ts
index b9e561cd..d7caef84 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -69,6 +69,7 @@ export interface DatepickerType {
     disabled?: boolean;
     classNames?: ClassNamesTypeProp | undefined;
     containerClassName?: ((className: string) => string) | string | null;
+    pickerClassName?: ((className: string) => string) | string | null;
     inputClassName?: ((className: string) => string) | string | null;
     toggleClassName?: ((className: string) => string) | string | null;
     toggleIcon?: (open: boolean) => React.ReactNode;
@@ -82,6 +83,7 @@ export interface DatepickerType {
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;
+    inline?: boolean;
 }
 
 export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"

From cd8ca774d56257236f81b3b7e5ead18b578ee556 Mon Sep 17 00:00:00 2001
From: Thomas van der Kleij <t@tmk.io>
Date: Wed, 31 Jul 2024 21:51:43 +0200
Subject: [PATCH 2/4] Add zinc as theming option

---
 src/constants/index.ts | 39 ++++++++++++++++++++++++++-------------
 tsconfig.json          |  3 ++-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/constants/index.ts b/src/constants/index.ts
index 190da869..2e8855b6 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -18,7 +18,8 @@ export const COLORS = [
     "purple",
     "fuchsia",
     "pink",
-    "rose"
+    "rose",
+    "zinc"
 ] as const;
 
 export const DEFAULT_COLOR: ColorKeys = "blue";
@@ -57,7 +58,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-100",
         fuchsia: "bg-fuchsia-100",
         pink: "bg-pink-100",
-        rose: "bg-rose-100"
+        rose: "bg-rose-100",
+        zinc: "bg-zinc-100"
     },
     200: {
         blue: "bg-blue-200",
@@ -76,7 +78,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-200",
         fuchsia: "bg-fuchsia-200",
         pink: "bg-pink-200",
-        rose: "bg-rose-200"
+        rose: "bg-rose-200",
+        zinc: "bg-zinc-200"
     },
     500: {
         blue: "bg-blue-500",
@@ -95,7 +98,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-500",
         fuchsia: "bg-fuchsia-500",
         pink: "bg-pink-500",
-        rose: "bg-rose-500"
+        rose: "bg-rose-500",
+        zinc: "bg-zinc-500"
     },
     hover: {
         blue: "hover:bg-blue-600",
@@ -114,7 +118,8 @@ export const BG_COLOR: Colors = {
         violet: "hover:bg-violet-600",
         fuchsia: "hover:bg-fuchsia-600",
         pink: "hover:bg-pink-600",
-        rose: "hover:bg-rose-600"
+        rose: "hover:bg-rose-600",
+        zinc: "hover:bg-zinc-600"
     }
 };
 
@@ -136,7 +141,8 @@ export const TEXT_COLOR: Colors = {
         violet: "text-violet-500",
         fuchsia: "text-fuchsia-500",
         pink: "text-pink-500",
-        rose: "text-rose-500"
+        rose: "text-rose-500",
+        zinc: "text-zinc-500"
     },
     600: {
         blue: "text-blue-600 dark:text-blue-400 dark:hover:text-blue-400",
@@ -155,7 +161,8 @@ export const TEXT_COLOR: Colors = {
         violet: "text-violet-600 dark:text-violet-400 dark:hover:text-violet-400",
         fuchsia: "text-fuchsia-600 dark:text-fuchsia-400 dark:hover:text-fuchsia-400",
         pink: "text-pink-600 dark:text-pink-400 dark:hover:text-pink-400",
-        rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400"
+        rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400",
+        zinc: "text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-400"
     },
     hover: {
         blue: "hover:text-blue-700",
@@ -174,7 +181,8 @@ export const TEXT_COLOR: Colors = {
         violet: "hover:text-violet-700",
         fuchsia: "hover:text-fuchsia-700",
         pink: "hover:text-pink-700",
-        rose: "hover:text-rose-700"
+        rose: "hover:text-rose-700",
+        zinc: "hover:text-zinc-700"
     }
 };
 
@@ -196,7 +204,8 @@ export const BORDER_COLOR: Colors = {
         violet: "border-violet-500",
         fuchsia: "border-fuchsia-500",
         pink: "border-pink-500",
-        rose: "border-rose-500"
+        rose: "border-rose-500",
+        zinc: "border-zinc-500"
     },
     focus: {
         blue: "focus:border-blue-500",
@@ -215,7 +224,8 @@ export const BORDER_COLOR: Colors = {
         violet: "focus:border-violet-500",
         fuchsia: "focus:border-fuchsia-500",
         pink: "focus:border-pink-500",
-        rose: "focus:border-rose-500"
+        rose: "focus:border-rose-500",
+        zinc: "focus:border-zinc-500"
     }
 };
 
@@ -237,7 +247,8 @@ export const RING_COLOR: Colors = {
         violet: "focus:ring-violet-500",
         fuchsia: "focus:ring-fuchsia-500",
         pink: "focus:ring-pink-500",
-        rose: "focus:ring-rose-500"
+        rose: "focus:ring-rose-500",
+        zinc: "focus:ring-zinc-500"
     },
     "second-focus": {
         blue: "focus:ring-blue-500/20",
@@ -256,7 +267,8 @@ export const RING_COLOR: Colors = {
         violet: "focus:ring-violet-500/20",
         fuchsia: "focus:ring-fuchsia-500/20",
         pink: "focus:ring-pink-500/20",
-        rose: "focus:ring-rose-500/20"
+        rose: "focus:ring-rose-500/20",
+        zinc: "focus:ring-zinc-500/20"
     }
 };
 
@@ -278,6 +290,7 @@ export const BUTTON_COLOR: Colors = {
         violet: "focus:ring-violet-500/50 focus:bg-violet-100/50",
         fuchsia: "focus:ring-fuchsia-500/50 focus:bg-fuchsia-100/50",
         pink: "focus:ring-pink-500/50 focus:bg-pink-100/50",
-        rose: "focus:ring-rose-500/50 focus:bg-rose-100/50"
+        rose: "focus:ring-rose-500/50 focus:bg-rose-100/50",
+        zinc: "focus:ring-zinc-500/50 focus:bg-zinc-100/50"
     }
 };
diff --git a/tsconfig.json b/tsconfig.json
index cf845ae2..0e8307d6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
         "skipLibCheck": true,
         "noEmit": true,
         "resolveJsonModule": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "incremental": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]

From b163c91b97ee00601d4fe973b2cd972ac98181b1 Mon Sep 17 00:00:00 2001
From: Thomas van der Kleij <t@tmk.io>
Date: Thu, 20 Feb 2025 20:16:41 +0100
Subject: [PATCH 3/4] Fix types

---
 src/components/Datepicker.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 5655a3b9..3b5f5e36 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -13,7 +13,7 @@ import { Period, DatepickerType, ColorKeys } from "../types";
 
 import { Arrow, VerticalDash } from "./utils";
 
-const Datepicker: React.FC<DatepickerType> = ({
+const Datepicker = ({
     primaryColor = "blue",
     value = null,
     onChange,
@@ -22,7 +22,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     showShortcuts = false,
     configs = undefined,
     asSingle = false,
-    placeholder = null,
+    placeholder = undefined,
     separator = "~",
     startFrom = null,
     i18n = LANGUAGE,
@@ -44,7 +44,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     classNames = undefined,
     popoverDirection = undefined,
     inline = false
-}) => {
+}: DatepickerType) => {
     // Ref
     const containerRef = useRef<HTMLDivElement | null>(null);
     const calendarContainerRef = useRef<HTMLDivElement | null>(null);

From 85fb50b848dc7e817ab5ef21ff3b744583481cfd Mon Sep 17 00:00:00 2001
From: Thomas van der Kleij <t@tmk.io>
Date: Wed, 16 Jul 2025 07:12:54 +0200
Subject: [PATCH 4/4] Replace `gray-300` with `zinc-300` across components for
 consistency in theming.

---
 src/components/Calendar/Week.tsx  | 2 +-
 src/components/Calendar/index.tsx | 2 +-
 src/components/Datepicker.tsx     | 2 +-
 src/components/Footer.tsx         | 2 +-
 src/components/Input.tsx          | 2 +-
 src/components/Shortcuts.tsx      | 2 +-
 src/components/utils.tsx          | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Calendar/Week.tsx b/src/components/Calendar/Week.tsx
index 45e957c2..12f4de38 100644
--- a/src/components/Calendar/Week.tsx
+++ b/src/components/Calendar/Week.tsx
@@ -33,7 +33,7 @@ const Week: React.FC = () => {
     }, [startWeekOn]);
 
     return (
-        <div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
+        <div className="grid grid-cols-7 border-b border-zinc-300 dark:border-zinc-700 py-2">
             {DAYS.map(item => (
                 <div key={item} className="tracking-wide text-gray-500 text-center">
                     {ucFirst(
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index 4a374375..7e26e2ef 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -243,7 +243,7 @@ const Calendar: React.FC<Props> = ({
 
     return (
         <div className="w-full md:w-[296px] md:min-w-[296px]">
-            <div className="flex items-center space-x-1.5 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5">
+            <div className="flex items-center space-x-1.5 border border-zinc-300 dark:border-zinc-700 rounded-md px-2 py-1.5">
                 {!showMonths && !showYears && (
                     <div className="flex-none">
                         <RoundedButton roundedFull={true} onClick={onClickPrevious}>
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 3b5f5e36..553e8149 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -331,7 +331,7 @@ const Datepicker = ({
 
     const pickerClassNameOverload = useMemo(() => {
         const defaultPickerClassName = classNamesUtil(
-            "shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg w-fit",
+            "shadow-sm border border-zinc-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg w-fit",
             !inline && "mt-2.5"
         );
         return typeof pickerClassName === "function"
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 40f8fd2b..34125443 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -17,7 +17,7 @@ const Footer: React.FC = () => {
             return classNames.footer();
         }
 
-        return "flex items-center justify-end pb-2.5 pt-3 border-t border-gray-300 dark:border-gray-700";
+        return "flex items-center justify-end pb-2.5 pt-3 border-t border-zinc-300 dark:border-zinc-700";
     }, [classNames]);
 
     return (
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 38fc856e..7f469481 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -55,7 +55,7 @@ const Input: React.FC<Props> = (e: Props) => {
         const ring =
             RING_COLOR["second-focus"][primaryColor as keyof (typeof RING_COLOR)["second-focus"]];
 
-        const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`;
+        const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-zinc-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`;
 
         return typeof inputClassName === "function"
             ? inputClassName(defaultInputClassName)
diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index ae54b21c..8f18c2bf 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -132,7 +132,7 @@ const Shortcuts: React.FC = () => {
     }, []);
 
     return shortcutOptions?.length ? (
-        <div className="md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-gray-700 pr-1">
+        <div className="md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-zinc-300 dark:border-zinc-700 pr-1">
             <ul className="w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0">
                 {shortcutOptions.map(([key, item], index: number) =>
                     Array.isArray(item) ? (
diff --git a/src/components/utils.tsx b/src/components/utils.tsx
index 6bdb31a7..4b87f2bb 100644
--- a/src/components/utils.tsx
+++ b/src/components/utils.tsx
@@ -123,7 +123,7 @@ export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
     return (
         <div
             ref={ref}
-            className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600"
+            className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-zinc-300 bg-white dark:bg-slate-800 dark:border-slate-600"
         />
     );
 });
@@ -135,7 +135,7 @@ export const SecondaryButton: React.FC<Button> = ({ children, onClick, disabled
     // Functions
     const getClassName: () => string = useCallback(() => {
         const ringColor = RING_COLOR.focus[primaryColor as keyof typeof RING_COLOR.focus];
-        return `w-full transition-all duration-300 bg-white dark:text-gray-700 font-medium border border-gray-300 px-4 py-2 text-sm rounded-md focus:ring-2 focus:ring-offset-2 hover:bg-gray-50 ${ringColor}`;
+        return `w-full transition-all duration-300 bg-white dark:text-gray-700 font-medium border border-zinc-300 px-4 py-2 text-sm rounded-md focus:ring-2 focus:ring-offset-2 hover:bg-gray-50 ${ringColor}`;
     }, [primaryColor]);
 
     return (