love-ui 1.0.0

package/packages/patterns/calendar/dialog/calendar-dialog-2.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { ChangeEvent, ChangeEventHandler } from "react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export const title = "Calendar with Month and Year Selector in Dialog";
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [month, setMonth] = useState<Date>(new Date());
+
+  const handleCalendarChange = (
+    value: string | number,
+    event: ChangeEventHandler<HTMLSelectElement>
+  ) => {
+    const newEvent = {
+      target: {
+        value: String(value),
+      },
+    } as ChangeEvent<HTMLSelectElement>;
+    event(newEvent);
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Select Date</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[298px]">
+        <DialogHeader>
+          <DialogTitle>Select Date</DialogTitle>
+        </DialogHeader>
+        <Calendar
+          captionLayout="dropdown"
+          className="rounded-md border"
+          components={{
+            MonthCaption: (props) => props.children,
+            DropdownNav: (props) => (
+              <div className="flex w-full items-center gap-2">
+                {props.children}
+              </div>
+            ),
+            Dropdown: (props) => (
+              <Select
+                onValueChange={(value) => {
+                  if (props.onChange) {
+                    handleCalendarChange(value, props.onChange);
+                  }
+                }}
+                value={String(props.value)}
+              >
+                <SelectTrigger className="first:flex-1 last:shrink-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {props.options?.map((option) => (
+                    <SelectItem
+                      disabled={option.disabled}
+                      key={option.value}
+                      value={String(option.value)}
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ),
+          }}
+          hideNavigation
+          mode="single"
+          month={month}
+          onMonthChange={setMonth}
+          onSelect={setDate}
+          selected={date}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/dialog/calendar-dialog-3.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Calendar as Appointment Picker in Dialog";
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [selectedTime, setSelectedTime] = useState<string | null>(null);
+
+  const availableTimes = [
+    "09:00 AM",
+    "09:30 AM",
+    "10:00 AM",
+    "10:30 AM",
+    "11:00 AM",
+    "11:30 AM",
+    "01:00 PM",
+    "01:30 PM",
+    "02:00 PM",
+    "02:30 PM",
+    "03:00 PM",
+    "03:30 PM",
+    "04:00 PM",
+    "04:30 PM",
+  ];
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Book Appointment</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle>Book Appointment</DialogTitle>
+        </DialogHeader>
+        <div className="flex divide-x overflow-hidden rounded-md border bg-background">
+          <Calendar mode="single" onSelect={setDate} selected={date} />
+          <div className="relative w-[249px] overflow-hidden">
+            <div className="absolute inset-0 grid gap-4">
+              <div className="space-y-2 px-4 pt-4">
+                <p className="text-center font-medium text-sm">
+                  Available Times
+                </p>
+              </div>
+              <ScrollArea className="h-full overflow-y-auto">
+                <div className="grid grid-cols-1 gap-2 px-4 pb-4">
+                  {availableTimes.map((time) => (
+                    <Button
+                      key={time}
+                      onClick={() => setSelectedTime(time)}
+                      size="sm"
+                      variant={selectedTime === time ? "default" : "outline"}
+                    >
+                      {time}
+                    </Button>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/dialog/calendar-dialog-4.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export const title = "Calendar with Date and Time in Dialog";
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [time, setTime] = useState<string>("12:00");
+
+  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTime(e.target.value);
+    if (date) {
+      const [hours, minutes] = e.target.value.split(":");
+      const newDate = new Date(date);
+      newDate.setHours(
+        Number.parseInt(hours, 10),
+        Number.parseInt(minutes, 10)
+      );
+      setDate(newDate);
+    }
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Select Date & Time</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[298px]">
+        <DialogHeader>
+          <DialogTitle>Select Date & Time</DialogTitle>
+        </DialogHeader>
+        <div className="divide-y overflow-hidden rounded-md border bg-background">
+          <Calendar mode="single" onSelect={setDate} selected={date} />
+          <div className="space-y-2 p-4">
+            <Label htmlFor="time">Time</Label>
+            <Input
+              className="w-full"
+              id="time"
+              onChange={handleTimeChange}
+              type="time"
+              value={time}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/dialog/calendar-dialog-5.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Calendar with Natural Language in Dialog";
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  const shortcuts = [
+    { label: "Today", date: new Date() },
+    {
+      label: "Tomorrow",
+      date: new Date(new Date().setDate(new Date().getDate() + 1)),
+    },
+    {
+      label: "In 3 days",
+      date: new Date(new Date().setDate(new Date().getDate() + 3)),
+    },
+    {
+      label: "In a week",
+      date: new Date(new Date().setDate(new Date().getDate() + 7)),
+    },
+    {
+      label: "In 2 weeks",
+      date: new Date(new Date().setDate(new Date().getDate() + 14)),
+    },
+    {
+      label: "In a month",
+      date: new Date(new Date().setMonth(new Date().getMonth() + 1)),
+    },
+  ];
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Select Date</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle>Select Date</DialogTitle>
+        </DialogHeader>
+        <div className="flex divide-x overflow-hidden rounded-md border bg-background">
+          <Calendar mode="single" onSelect={setDate} selected={date} />
+          <div className="relative w-[249px] overflow-hidden">
+            <div className="absolute inset-0 grid gap-4">
+              <div className="space-y-2 px-4 pt-4">
+                <p className="text-center font-medium text-sm">Quick Select</p>
+              </div>
+              <ScrollArea className="h-full overflow-y-auto">
+                <div className="grid grid-cols-1 gap-2 px-4 pb-4">
+                  {shortcuts.map((shortcut) => (
+                    <Button
+                      key={shortcut.label}
+                      onClick={() => setDate(new Date(shortcut.date))}
+                      size="sm"
+                      variant="outline"
+                    >
+                      {shortcut.label}
+                    </Button>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/dialog/calendar-dialog-6.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { faker } from "@faker-js/faker";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export const title = "Calendar with Disabled Dates in Dialog";
+
+const now = new Date();
+const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+const disabledRangeStart = faker.date.between({
+  from: startOfMonth,
+  to: new Date(now.getFullYear(), now.getMonth(), 7),
+});
+const disabledRangeEnd = new Date(disabledRangeStart);
+disabledRangeEnd.setDate(disabledRangeStart.getDate() + 4);
+
+const specificDisabledDate = faker.date.between({
+  from: new Date(now.getFullYear(), now.getMonth(), 15),
+  to: endOfMonth,
+});
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  const disabledDays = [
+    { from: disabledRangeStart, to: disabledRangeEnd },
+    { dayOfWeek: [0, 6] }, // Disable weekends
+    specificDisabledDate, // Disable specific date
+  ];
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Select Date</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[298px]">
+        <DialogHeader>
+          <DialogTitle>Select Date</DialogTitle>
+        </DialogHeader>
+        <Calendar
+          className="rounded-md border"
+          disabled={disabledDays}
+          mode="single"
+          onSelect={setDate}
+          selected={date}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/dialog/calendar-dialog-7.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { faker } from "@faker-js/faker";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export const title = "Calendar with Multiple Day Selection in Dialog";
+
+const now = new Date();
+const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+const selectedDates = [
+  faker.date.between({
+    from: startOfMonth,
+    to: new Date(now.getFullYear(), now.getMonth(), 10),
+  }),
+  faker.date.between({
+    from: new Date(now.getFullYear(), now.getMonth(), 11),
+    to: new Date(now.getFullYear(), now.getMonth(), 20),
+  }),
+  faker.date.between({
+    from: new Date(now.getFullYear(), now.getMonth(), 21),
+    to: endOfMonth,
+  }),
+];
+
+const Example = () => {
+  const [dates, setDates] = useState<Date[] | undefined>(selectedDates);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Select Dates</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[298px]">
+        <DialogHeader>
+          <DialogTitle>Select Multiple Dates</DialogTitle>
+        </DialogHeader>
+        <Calendar
+          className="rounded-md border"
+          mode="multiple"
+          onSelect={setDates}
+          selected={dates}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/dialog/calendar-dialog-8.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { faker } from "@faker-js/faker";
+import { type ComponentProps, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export const title = "Calendar with Custom Select Day Style in Dialog";
+
+const now = new Date();
+const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+const bookedDays = [
+  faker.date.between({
+    from: startOfMonth,
+    to: new Date(now.getFullYear(), now.getMonth(), 10),
+  }),
+  faker.date.between({
+    from: new Date(now.getFullYear(), now.getMonth(), 11),
+    to: new Date(now.getFullYear(), now.getMonth(), 20),
+  }),
+  faker.date.between({
+    from: new Date(now.getFullYear(), now.getMonth(), 21),
+    to: endOfMonth,
+  }),
+];
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  const modifiers = {
+    booked: bookedDays,
+  };
+
+  const modifiersStyles: ComponentProps<typeof Calendar>["modifiersStyles"] = {
+    booked: {
+      backgroundColor: "#fbbf24",
+      color: "#78350f",
+      fontWeight: "bold",
+    },
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Select Date</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[298px]">
+        <DialogHeader>
+          <DialogTitle>Select Date</DialogTitle>
+        </DialogHeader>
+        <Calendar
+          className="rounded-md border"
+          classNames={{
+            day_button: "rounded-full",
+            day: "rounded-full",
+            today: "rounded-full",
+          }}
+          mode="single"
+          modifiers={modifiers}
+          modifiersStyles={modifiersStyles}
+          onSelect={setDate}
+          selected={date}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/standard/calendar-standard-1.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { faker } from "@faker-js/faker";
+import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+import { Calendar } from "@/components/ui/calendar";
+
+export const title = "Calendar with Range";
+
+const now = new Date();
+const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+const from = faker.date.between({
+  from: startOfMonth,
+  to: new Date(now.getFullYear(), now.getMonth(), 15),
+});
+const to = faker.date.between({
+  from: new Date(now.getFullYear(), now.getMonth(), 16),
+  to: endOfMonth,
+});
+
+const Example = () => {
+  const [date, setDate] = useState<DateRange | undefined>({
+    from,
+    to,
+  });
+
+  return (
+    <Calendar
+      className="rounded-md border"
+      mode="range"
+      numberOfMonths={2}
+      onSelect={setDate}
+      selected={date}
+    />
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/standard/calendar-standard-2.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { ChangeEvent, ChangeEventHandler } from "react";
+import { useState } from "react";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export const title = "Calendar with Month and Year Selector";
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [month, setMonth] = useState<Date>(new Date());
+
+  const handleCalendarChange = (
+    value: string | number,
+    event: ChangeEventHandler<HTMLSelectElement>
+  ) => {
+    const newEvent = {
+      target: {
+        value: String(value),
+      },
+    } as ChangeEvent<HTMLSelectElement>;
+    event(newEvent);
+  };
+
+  return (
+    <Calendar
+      captionLayout="dropdown"
+      className="rounded-md border"
+      components={{
+        MonthCaption: (props) => props.children,
+        DropdownNav: (props) => (
+          <div className="flex w-full items-center gap-2">{props.children}</div>
+        ),
+        Dropdown: (props) => (
+          <Select
+            onValueChange={(value) => {
+              if (props.onChange) {
+                handleCalendarChange(value, props.onChange);
+              }
+            }}
+            value={String(props.value)}
+          >
+            <SelectTrigger className="first:flex-1 last:shrink-0">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {props.options?.map((option) => (
+                <SelectItem
+                  disabled={option.disabled}
+                  key={option.value}
+                  value={String(option.value)}
+                >
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ),
+      }}
+      hideNavigation
+      mode="single"
+      month={month}
+      onMonthChange={setMonth}
+      onSelect={setDate}
+      selected={date}
+    />
+  );
+};
+
+export default Example;

package/packages/patterns/calendar/standard/calendar-standard-3.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Calendar as Appointment Picker";
+
+const Example = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [selectedTime, setSelectedTime] = useState<string | null>(null);
+
+  const availableTimes = [
+    "09:00 AM",
+    "09:30 AM",
+    "10:00 AM",
+    "10:30 AM",
+    "11:00 AM",
+    "11:30 AM",
+    "01:00 PM",
+    "01:30 PM",
+    "02:00 PM",
+    "02:30 PM",
+    "03:00 PM",
+    "03:30 PM",
+    "04:00 PM",
+    "04:30 PM",
+  ];
+
+  return (
+    <div className="flex divide-x overflow-hidden rounded-md border bg-background">
+      <Calendar mode="single" onSelect={setDate} selected={date} />
+      <div className="relative w-[249px] overflow-hidden">
+        <div className="absolute inset-0 grid gap-4">
+          <div className="space-y-2 px-4 pt-4">
+            <p className="text-center font-medium text-sm">Available Times</p>
+          </div>
+          <ScrollArea className="h-full overflow-y-auto">
+            <div className="grid grid-cols-1 gap-2 px-4 pb-4">
+              {availableTimes.map((time) => (
+                <Button
+                  key={time}
+                  onClick={() => setSelectedTime(time)}
+                  size="sm"
+                  variant={selectedTime === time ? "default" : "outline"}
+                >
+                  {time}
+                </Button>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Example;