@mbao01/common 0.0.31 → 0.0.33

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

@@ -1,2 +1,2 @@
 import { type DatePickerProps } from "./types";
-export declare const DatePicker: ({ name, size, wide, label, outline, variant, disabled, defaultDate, children, getDateValue, getDateLabel, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ name, size, wide, label, outline, variant, disabled, defaultDate, children, getDateValue, getDateLabel, triggerClassName, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { type DateRangePickerProps } from "./types";
-export declare const DateRangePicker: ({ name, size, wide, label, outline, variant, disabled, defaultRange, getRangeValue, getRangeLabel, ...props }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ name, size, wide, label, outline, variant, disabled, defaultRange, getRangeValue, getRangeLabel, triggerClassName, ...props }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,8 +3,9 @@ import { DateRange, DayPickerMultipleProps, DayPickerRangeProps, DayPickerSingle
 import { ButtonProps } from "../Button/types";
 type BaseDatePickerProps = Pick<ButtonProps, "variant" | "outline" | "wide" | "size" | "name" | "disabled"> & {
     label?: string;
+    triggerClassName?: string;
 };
-export type DatePickerProps = BaseDatePickerProps & Omit<DayPickerSingleProps, "mode" | "selected" | "onSelect"> & {
+export type DatePickerProps = BaseDatePickerProps & Omit<DayPickerSingleProps, "mode"> & {
     children?: ({ date, setDate, }: {
         date: Date | undefined;
         setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
@@ -13,7 +14,7 @@ export type DatePickerProps = BaseDatePickerProps & Omit<DayPickerSingleProps, "
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;
 };
-export type DateRangePickerProps = BaseDatePickerProps & Omit<DayPickerRangeProps, "mode" | "selected" | "onSelect"> & {
+export type DateRangePickerProps = BaseDatePickerProps & Omit<DayPickerRangeProps, "mode"> & {
     defaultRange?: DateRange;
     getRangeValue?: (range: DateRange | undefined) => {
         from: string | undefined;
@@ -21,7 +22,7 @@ export type DateRangePickerProps = BaseDatePickerProps & Omit<DayPickerRangeProp
     };
     getRangeLabel?: (range: DateRange | undefined) => string | JSX.Element | undefined;
 };
-export type MultipleDatesPickerProps = BaseDatePickerProps & Omit<DayPickerMultipleProps, "mode" | "selected" | "onSelect"> & {
+export type MultipleDatesPickerProps = BaseDatePickerProps & Omit<DayPickerMultipleProps, "mode"> & {
     defaultDates?: Date[];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
     getDatesLabel?: (dates: Date[] | undefined) => string | JSX.Element | undefined;

package/dist/types/utilities/theme.d.ts

@@ -1,3 +1,4 @@
 export type Theme = "dark" | "light";
+export declare const THEME_COOKIE_NAME = "data-theme";
 export declare const getTheme: () => Theme | null;
 export declare const saveTheme: (theme: Theme) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -95,6 +95,7 @@
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "universal-cookie": "^7.1.4",
     "vaul": "^0.9.0"
   },
   "devDependencies": {
@@ -142,5 +143,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "06b3dabcfcd2694bf8d0701a392f6b7f01101e7a"
+  "gitHead": "169aeecca51d4544bfed02de64e0d9806dd83c6c"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -21,6 +21,7 @@ export const DatePicker = ({
   children,
   getDateValue = (date) => date?.toUTCString(),
   getDateLabel = (date) => (date ? format(date, "PPP") : undefined),
+  triggerClassName,
   ...props
 }: DatePickerProps) => {
   const [date, setDate] = useState<Date | undefined>(defaultDate);
@@ -49,7 +50,11 @@ export const DatePicker = ({
           outline={outline}
           variant={variant}
           disabled={disabled}
-          className={cn("justify-start", !date && "font-normal")}
+          className={cn(
+            "justify-start",
+            !date && "font-normal",
+            triggerClassName
+          )}
           value={dateValue}
         >
           {dateLabel ?? <span>{label ?? "Pick a date"}</span>}

package/src/components/DatePicker/DateRangePicker.tsx

@@ -33,6 +33,7 @@ export const DateRangePicker = ({
         format(range.from, "LLL dd, y")
       )
     ) : undefined,
+  triggerClassName,
   ...props
 }: DateRangePickerProps) => {
   const [range, setRange] = useState<DateRange | undefined>(defaultRange);
@@ -68,9 +69,13 @@ export const DateRangePicker = ({
           outline={outline}
           variant={variant}
           disabled={disabled}
-          className={cn("justify-start flex-nowrap", !range && "font-normal")}
+          className={cn(
+            "justify-start flex-nowrap",
+            !range && "font-normal",
+            triggerClassName
+          )}
         >
-          <span className="text-left line-clamp-1">
+          <span className="text-left text-ellipsis overflow-hidden text-nowrap">
             {rangeLabel ?? label ?? "Pick a range"}
           </span>
           <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />

package/src/components/DatePicker/MultipleDatesPicker.tsx

@@ -59,7 +59,7 @@ export const MultipleDatesPicker = ({
             !dates?.length && "font-normal"
           )}
         >
-          <span className="text-left line-clamp-1">
+          <span className="text-left text-ellipsis overflow-hidden text-nowrap">
             {rangeLabel ?? label ?? "Pick one or more dates"}
           </span>
           <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />

package/src/components/DatePicker/types.ts

@@ -11,10 +11,11 @@ type BaseDatePickerProps = Pick<
   "variant" | "outline" | "wide" | "size" | "name" | "disabled"
 > & {
   label?: string;
+  triggerClassName?: string;
 };
 
 export type DatePickerProps = BaseDatePickerProps &
-  Omit<DayPickerSingleProps, "mode" | "selected" | "onSelect"> & {
+  Omit<DayPickerSingleProps, "mode"> & {
     children?: ({
       date,
       setDate,
@@ -28,7 +29,7 @@ export type DatePickerProps = BaseDatePickerProps &
   };
 
 export type DateRangePickerProps = BaseDatePickerProps &
-  Omit<DayPickerRangeProps, "mode" | "selected" | "onSelect"> & {
+  Omit<DayPickerRangeProps, "mode"> & {
     defaultRange?: DateRange;
     getRangeValue?: (range: DateRange | undefined) => {
       from: string | undefined;
@@ -40,7 +41,7 @@ export type DateRangePickerProps = BaseDatePickerProps &
   };
 
 export type MultipleDatesPickerProps = BaseDatePickerProps &
-  Omit<DayPickerMultipleProps, "mode" | "selected" | "onSelect"> & {
+  Omit<DayPickerMultipleProps, "mode"> & {
     defaultDates?: Date[];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
     getDatesLabel?: (

package/src/utilities/theme.ts

@@ -1,17 +1,19 @@
+import Cookies from "universal-cookie";
+
 export type Theme = "dark" | "light";
 
+export const THEME_COOKIE_NAME = "data-theme";
+
 export const getTheme = () => {
   if (typeof window === "undefined") return null;
 
-  let t = window.localStorage.getItem("__theme") as Theme;
-  if (!t)
-    t = window.matchMedia("(prefers-color-scheme: dark)")?.matches
-      ? "dark"
-      : "light";
-  return t;
+  const cookies = new Cookies();
+  const theme = cookies.get(THEME_COOKIE_NAME) as Theme;
+  return theme;
 };
 
 export const saveTheme = (theme: Theme) => {
-  document.body.setAttribute("data-theme", theme);
-  window.localStorage.setItem("__theme", theme);
+  const cookies = new Cookies();
+  cookies.set(THEME_COOKIE_NAME, theme, { secure: true });
+  document.body.setAttribute(THEME_COOKIE_NAME, theme);
 };