Reapply changes on top of current master

Author: thomask

src/components/Calendar/Week.tsx

@@ -37,7 +37,7 @@ const Week = () => {
     }, [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(

src/components/Calendar/index.tsx

@@ -240,7 +240,7 @@ const Calendar = (props: 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}>

src/components/Datepicker.tsx

@@ -14,6 +14,7 @@ import {
     START_WEEK
 } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
+import { classNames as cn } from "../helpers";
 import useOnClickOutside from "../hooks";
 import {
     dateFormat,
@@ -47,6 +48,7 @@ const Datepicker = (props: DatepickerType) => {
         displayFormat = DATE_FORMAT,
 
         i18n = LANGUAGE,
+        inline = false,
         inputClassName = null,
         inputId,
         inputName,
@@ -56,7 +58,7 @@ const Datepicker = (props: DatepickerType) => {
 
         onChange,
 
-        placeholder = null,
+        placeholder = undefined,
         popupClassName = null,
         popoverDirection = undefined,
         primaryColor = DEFAULT_COLOR,
@@ -98,7 +100,7 @@ const Datepicker = (props: DatepickerType) => {
     // Custom Hooks use
     useOnClickOutside(containerRef.current, () => {
         const container = containerRef.current;
-        if (container) {
+        if (container && !inline) {
             hideDatepicker();
         }
     });
@@ -399,24 +401,26 @@ const Datepicker = (props: DatepickerType) => {
     }, [containerClassName]);
 
     const popupClassNameOverload = useMemo(() => {
-        const defaultPopupClassName =
-            "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";
+        const defaultPopupClassName = cn(
+            "transition-all ease-out duration-300 mt-[1px] text-sm lg:text-xs 2xl:text-sm",
+            !inline && "absolute z-10 translate-y-4 opacity-0 hidden"
+        );
         return typeof popupClassName === "function"
             ? popupClassName(defaultPopupClassName)
             : typeof popupClassName === "string" && popupClassName !== ""
               ? popupClassName
               : defaultPopupClassName;
-    }, [popupClassName]);
+    }, [popupClassName, inline]);
 
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
-                <Input />
+                {!inline && <Input />}
 
                 <div className={popupClassNameOverload} 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="mt-2.5 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">
                         <div className="flex flex-col lg:flex-row py-2">
                             {showShortcuts && <Shortcuts />}
 

src/components/Footer.tsx

@@ -16,7 +16,7 @@ const Footer = () => {
             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 (

src/components/Input.tsx

@@ -54,7 +54,7 @@ const Input = () => {
         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)

src/components/SecondaryButton.tsx

@@ -13,7 +13,7 @@ const SecondaryButton = (props: ButtonProps) => {
     // 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 (

src/components/Shortcuts.tsx

@@ -136,7 +136,7 @@ const Shortcuts = () => {
     }, []);
 
     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) =>
                     Array.isArray(item) ? (

src/components/icons/Arrow.tsx

@@ -9,7 +9,7 @@ const Arrow = forwardRef<HTMLDivElement, Props>((props, ref) => {
         <div
             {...props}
             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"
         />
     );
 });

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";
@@ -59,7 +60,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",
@@ -78,7 +80,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",
@@ -97,7 +100,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",
@@ -116,7 +120,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"
     }
 };
 
@@ -138,7 +143,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",
@@ -157,7 +163,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",
@@ -176,7 +183,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"
     }
 };
 
@@ -198,7 +206,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",
@@ -217,7 +226,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"
     }
 };
 
@@ -239,7 +249,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",
@@ -258,7 +269,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"
     }
 };
 
@@ -280,6 +292,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"
     }
 };

src/types/index.ts

@@ -92,6 +92,7 @@ export interface DatepickerType {
     startWeekOn?: WeekStringType;
     popoverDirection?: PopoverDirectionType;
     required?: boolean;
+    inline?: boolean;
 }
 
 export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"