notionsoft-ui 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"
@@ -26,6 +26,7 @@
     "lucide-react": "^0.554.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-multi-date-picker": "^4.5.2",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {

package/src/notion-ui/button/button.tsx

@@ -24,7 +24,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled}
         ref={ref}
         className={cn(
-          `rounded-sm flex items-center gap-x-1 cursor-pointer font-medium ltr:text-xs leading-snug li rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
+          `rounded-sm flex items-center justify-center gap-x-1 cursor-pointer font-medium ltr:text-xs leading-snug li rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
           transition w-fit px-3 py-1.5 duration-200 ease-linear`,
           style,
           disabled &&

package/src/notion-ui/date-picker/DatePicker.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DateObject from "react-date-object";
+
+import DatePicker, { DatePickerProps } from "./date-picker";
+
+// Persian
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+
+export default {
+  title: "Date/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta<DatePickerProps>;
+
+const Wrapper = (args: DatePickerProps) => {
+  const [value, setValue] = React.useState<DateObject | undefined>(
+    typeof args.value === "string"
+      ? new DateObject(new Date(args.value))
+      : args.value
+  );
+
+  return (
+    <div style={{ width: 320 }}>
+      <DatePicker
+        {...args}
+        value={value}
+        dateOnComplete={(date) => {
+          setValue(date);
+          return false;
+        }}
+      />
+    </div>
+  );
+};
+
+/* ------------------------ DEFAULT ------------------------ */
+export const Default: StoryObj<DatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    placeholder: "Select date...",
+    required: false,
+    label: "Date",
+    measurement: "md",
+  },
+};
+
+/* ------------------------ PERSIAN ------------------------ */
+export const Persian: StoryObj<DatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    placeholder: "تاریخ را انتخاب کنید",
+    label: "تاریخ",
+    measurement: "md",
+    getLocalizations: () => ({
+      calendar: persian,
+      locale: persian_fa,
+      months: [
+        "فروردین",
+        "اردیبهشت",
+        "خرداد",
+        "تیر",
+        "مرداد",
+        "شهریور",
+        "مهر",
+        "آبان",
+        "آذر",
+        "دی",
+        "بهمن",
+        "اسفند",
+      ],
+    }),
+  },
+};
+
+/* ------------------------ WITH ERROR ------------------------ */
+export const WithError: StoryObj<DatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    placeholder: "Select date...",
+    label: "Birthday",
+    errorMessage: "This field is required",
+    required: true,
+    requiredHint: "*",
+  },
+};
+
+/* ------------------------ READONLY ------------------------ */
+export const ReadOnly: StoryObj<DatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    placeholder: "Read-only field",
+    label: "Date",
+    readOnly: true,
+  },
+};

package/src/notion-ui/date-picker/date-picker.tsx

@@ -0,0 +1,273 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import DateObject from "react-date-object";
+import type { Calendar, Locale } from "react-date-object";
+import { Calendar as Calendars } from "react-multi-date-picker";
+export type DatePickerSize = "sm" | "md" | "lg";
+import gregorian from "react-date-object/calendars/gregorian";
+import gregorian_en from "react-date-object/locales/gregorian_en";
+import { CalendarDays } from "lucide-react";
+import { createPortal } from "react-dom";
+
+import AnimatedItem from "../animated-item";
+import { cn } from "../../utils/cn";
+
+export interface DatePickerProps {
+  dateOnComplete: (date: DateObject) => boolean | void;
+  value: DateObject | undefined | string;
+  className?: string;
+  classNames?: {
+    rootDivClassName?: string;
+  };
+  getLocalizations?: () => {
+    calendar?: Calendar;
+    locale?: Locale;
+    months?: string[];
+  };
+  placeholder: string;
+  place?: string;
+  required?: boolean;
+  format?: string;
+  requiredHint?: string;
+  hintColor?: string;
+  label?: string;
+  errorMessage?: string;
+  readOnly?: boolean;
+  measurement?: DatePickerSize;
+}
+
+export default function DatePicker(props: DatePickerProps) {
+  const {
+    dateOnComplete,
+    value,
+    className,
+    classNames,
+    placeholder,
+    required,
+    requiredHint,
+    measurement,
+    label,
+    errorMessage,
+    readOnly,
+    format = "YYYY-MM-DD",
+    getLocalizations,
+  } = props;
+  const { rootDivClassName } = classNames || {};
+
+  const [visible, setVisible] = useState(false);
+  const [selectedDates, setSelectedDates] = useState<DateObject | undefined>(
+    typeof value === "string" ? new DateObject(new Date(value)) : value
+  );
+
+  const calendarWrapperRef = useRef<HTMLDivElement | null>(null);
+  const calenderParentRef = useRef<HTMLDivElement | null>(null);
+  const hasError = !!errorMessage;
+
+  const [position, setPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+
+  // Close calendar on outside clicks
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        calendarWrapperRef.current &&
+        !calendarWrapperRef.current.contains(event.target as Node) &&
+        calenderParentRef.current &&
+        !calenderParentRef.current.contains(event.target as Node)
+      ) {
+        setVisible(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Update position when calendar becomes visible
+  useEffect(() => {
+    if (visible && calenderParentRef.current) {
+      const rect = calenderParentRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+      });
+    }
+  }, [visible]);
+
+  const formatHijriDate = (date?: DateObject) => {
+    try {
+      if (date) {
+        return date
+          .convert(localizations.calendar, localizations.locale)
+          .format(format);
+      }
+    } catch (e: any) {
+      console.log(e, "DatePicker");
+    }
+    return undefined;
+  };
+
+  const handleDateChange = (date: DateObject) => {
+    setVisible(false);
+    const failed = dateOnComplete(date);
+    if (failed) return;
+    setSelectedDates(date);
+  };
+
+  const onVisibilityChange = () => {
+    if (!readOnly) setVisible((v) => !v);
+  };
+
+  const localizations = getLocalizations
+    ? getLocalizations()
+    : {
+        calendar: gregorian,
+        locale: gregorian_en,
+        months: [],
+      };
+  const heightStyle = useMemo(
+    () =>
+      measurement == "lg"
+        ? {
+            height: "50px",
+            paddingBottom: "pb-[3px]",
+            endContent: label
+              ? "ltr:top-[48px] rtl:top-[54px]-translate-y-1/2"
+              : "top-[26px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[48px] rtl:top-[54px] -translate-y-1/2"
+              : "top-[26px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          }
+        : measurement == "md"
+        ? {
+            height: "44px",
+            paddingBottom: "pb-[2px]",
+            endContent: label
+              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
+              : "top-[22px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
+              : "top-[22px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          }
+        : {
+            height: "40px",
+            paddingBottom: "pb-[2px]",
+            endContent: label
+              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
+              : "top-[20px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
+              : "top-[20px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          },
+    [measurement, label]
+  );
+  const readOnlyStyle = readOnly && "opacity-40";
+  return (
+    <div
+      ref={calenderParentRef}
+      className={cn("relative", rootDivClassName, readOnlyStyle)}
+    >
+      {/* Calendar portal */}
+      {visible &&
+        position &&
+        createPortal(
+          <div
+            ref={calendarWrapperRef}
+            style={{
+              position: "absolute",
+              top: position.top,
+              left: position.left,
+              zIndex: 9999,
+              backgroundColor: "white",
+              boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
+              borderRadius: "6px",
+            }}
+          >
+            <Calendars
+              value={selectedDates}
+              onChange={handleDateChange}
+              months={localizations.months}
+              calendar={localizations.calendar}
+              locale={localizations.locale}
+            />
+          </div>,
+          document.body
+        )}
+      {/* Required Hint */}
+      {requiredHint && (
+        <span
+          className={cn(
+            "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-2.5 rtl:left-2.5",
+            heightStyle.required
+          )}
+        >
+          {requiredHint}
+        </span>
+      )}
+
+      {/* Label */}
+      {label && (
+        <label
+          htmlFor={label}
+          className={cn(
+            "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {/* Input / trigger div */}
+      <div
+        style={{
+          height: heightStyle.height,
+        }}
+        className={cn(
+          "flex items-center text-start px-3 border select-none rounded-sm rtl:text-lg-rtl ltr:text-lg-ltr",
+          className
+        )}
+        onClick={onVisibilityChange}
+      >
+        {selectedDates ? (
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 whitespace-nowrap overflow-hidden">
+            <CalendarDays className="size-4 inline-block text-tertiary rtl:ml-2 rtl:mr-2" />
+            {formatHijriDate(selectedDates)}
+          </h1>
+        ) : (
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr font-semibold text-primary whitespace-nowrap overflow-hidden">
+            <CalendarDays className="size-4 inline-block text-tertiary" />
+            {placeholder}
+          </h1>
+        )}
+      </div>
+
+      {hasError && (
+        <AnimatedItem
+          springProps={{
+            from: {
+              opacity: 0,
+              transform: "translateY(-8px)",
+            },
+            config: {
+              mass: 1,
+              tension: 210,
+              friction: 20,
+            },
+            to: {
+              opacity: 1,
+              transform: "translateY(0px)",
+            },
+          }}
+          intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
+        >
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+            {errorMessage}
+          </h1>
+        </AnimatedItem>
+      )}
+    </div>
+  );
+}

package/src/notion-ui/date-picker/index.ts

@@ -0,0 +1,3 @@
+import DatePicker from "./date-picker";
+
+export default DatePicker;

package/src/notion-ui/input/input.tsx

@@ -9,11 +9,13 @@ export type NastranInputSize = "sm" | "md" | "lg";
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   startContent?: React.ReactNode;
+  endContent?: React.ReactNode;
   requiredHint?: string;
   label?: string;
-  endContent?: React.ReactNode;
   errorMessage?: string;
-  parentClassName?: string;
+  classNames?: {
+    rootDivClassName?: string;
+  };
   measurement?: NastranInputSize;
 }
 
@@ -25,7 +27,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       requiredHint,
       startContent,
       endContent,
-      parentClassName = "",
+      classNames,
       measurement = "sm",
       errorMessage,
       label,
@@ -35,6 +37,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     ref
   ) => {
     const hasError = !!errorMessage;
+    const { rootDivClassName } = classNames || {};
 
     const inputPaddingClass = startContent
       ? "rtl:pr-[42px] ltr:ps-[42px]"
@@ -45,7 +48,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         measurement == "lg"
           ? {
               height: "50px",
-              paddingBottom: "pb-[3px]",
               endContent: label
                 ? "ltr:top-[48px] rtl:top-[54px]-translate-y-1/2"
                 : "top-[26px] -translate-y-1/2",
@@ -57,7 +59,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           : measurement == "md"
           ? {
               height: "44px",
-              paddingBottom: "pb-[2px]",
               endContent: label
                 ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
                 : "top-[22px] -translate-y-1/2",
@@ -68,7 +69,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             }
           : {
               height: "40px",
-              paddingBottom: "pb-[2px]",
               endContent: label
                 ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
                 : "top-[20px] -translate-y-1/2",
@@ -79,8 +79,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             },
       [measurement, label]
     );
+    const readOnlyStyle = readOnly && "opacity-40";
+
     return (
-      <div className={cn(parentClassName, "flex w-full flex-col justify-end")}>
+      <div
+        className={cn(
+          rootDivClassName,
+          "flex w-full flex-col justify-end",
+          readOnlyStyle
+        )}
+      >
         <div
           className={cn(
             "relative text-start select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
@@ -145,20 +153,19 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               height: heightStyle.height,
             }}
             className={cn(
-              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded border bg-transparent px-3 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex w-full min-w-0 rounded-sm border px-3 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70",
               "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-              "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card dark:bg-black/30",
+              "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card",
               "focus-visible:border-tertiary/60",
               "[&::-webkit-outer-spin-button]:appearance-none",
               "[&::-webkit-inner-spin-button]:appearance-none",
               "[-moz-appearance:textfield] ",
               inputPaddingClass,
-              hasError ? "border-red-400 border" : "border-primary/25",
-              readOnly && "cursor-not-allowed",
-              heightStyle.paddingBottom,
+              hasError && "border-red-400",
               className
             )}
             {...rest}
+            disabled={readOnly}
           />
         </div>
 

package/src/notion-ui/multi-date-picker/MultiDatePicker.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DateObject from "react-date-object";
+
+import MultiDatePicker, { MultiDatePickerProps } from "./multi-date-picker";
+
+// Persian
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+
+export default {
+  title: "Date/MultiDatePicker",
+  component: MultiDatePicker,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta<MultiDatePickerProps>;
+
+/* ------------------------ WRAPPER ------------------------ */
+const Wrapper = (args: MultiDatePickerProps) => {
+  const [dates, setDates] = React.useState<DateObject[]>(args.value);
+
+  return (
+    <div style={{ width: 360 }}>
+      <MultiDatePicker
+        {...args}
+        value={dates}
+        dateOnComplete={(selectedDates) => {
+          setDates(selectedDates);
+        }}
+      />
+    </div>
+  );
+};
+
+/* ------------------------ DEFAULT ------------------------ */
+export const Default: StoryObj<MultiDatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    text: { label: "Select dates", placeholder: "Select dates..." },
+    measurement: "md",
+    value: [],
+  },
+};
+
+/* ------------------------ PERSIAN ------------------------ */
+export const Persian: StoryObj<MultiDatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    text: { label: "تاریخ‌ها", placeholder: "تاریخ‌ها را انتخاب کنید" },
+    measurement: "md",
+    value: [],
+    getLocalizations: () => ({
+      calendar: persian,
+      locale: persian_fa,
+      months: [
+        "فروردین",
+        "اردیبهشت",
+        "خرداد",
+        "تیر",
+        "مرداد",
+        "شهریور",
+        "مهر",
+        "آبان",
+        "آذر",
+        "دی",
+        "بهمن",
+        "اسفند",
+      ],
+    }),
+  },
+};
+
+/* ------------------------ WITH ERROR ------------------------ */
+export const WithError: StoryObj<MultiDatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    text: { label: "Dates", requiredHint: "*" },
+    value: [],
+    measurement: "md",
+    errorMessage: "Please select at least one date",
+  },
+};
+
+/* ------------------------ READONLY ------------------------ */
+export const ReadOnly: StoryObj<MultiDatePickerProps> = {
+  render: (args) => <Wrapper {...args} />,
+  args: {
+    text: { label: "Dates" },
+    value: [new DateObject(), new DateObject()],
+    readOnly: true,
+    measurement: "md",
+  },
+};

package/src/notion-ui/multi-date-picker/index.ts

@@ -0,0 +1,3 @@
+import MultiDatePicker from "./multi-date-picker";
+
+export default MultiDatePicker;