@mhome/ui 0.1.0

package/src/components/container.jsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Container = React.forwardRef(
+  (
+    {
+      className,
+      style,
+      maxWidth = "lg",
+      fixed = false,
+      disableGutters = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Map maxWidth to actual width values
+    const getMaxWidth = () => {
+      if (maxWidth === false) {
+        return "none";
+      }
+      const maxWidthMap = {
+        xs: "444px",
+        sm: "600px",
+        md: "900px",
+        lg: "1200px",
+        xl: "1536px",
+      };
+      return maxWidthMap[maxWidth] || maxWidthMap.lg;
+    };
+
+    const maxWidthValue = getMaxWidth();
+
+    // Get padding based on disableGutters
+    const getPadding = () => {
+      if (disableGutters) {
+        return { paddingLeft: 0, paddingRight: 0 };
+      }
+      // Default MUI Container padding
+      return {
+        paddingLeft: "16px",
+        paddingRight: "16px",
+      };
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("mx-auto", className)}
+        style={{
+          width: "100%",
+          maxWidth: maxWidthValue,
+          ...(fixed && { width: maxWidthValue }),
+          ...getPadding(),
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Container.displayName = "Container";
+
+export { Container };

package/src/components/date-picker.jsx

@@ -0,0 +1,528 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { TextField } from "./text-field";
+import * as dayjsModule from "dayjs";
+const dayjs = dayjsModule.default || dayjsModule;
+
+const DatePicker = React.forwardRef(
+  (
+    {
+      value,
+      onChange,
+      clearable = false,
+      slotProps,
+      className,
+      style,
+      onOpenChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const [selectedDate, setSelectedDate] = React.useState(
+      value ? dayjs(value) : null
+    );
+    const calendarRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const yearPickerRef = React.useRef(null);
+    const currentYearButtonRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => inputRef.current);
+
+    React.useEffect(() => {
+      setSelectedDate(value ? dayjs(value) : null);
+    }, [value]);
+
+    const handleDateChange = (newDate) => {
+      setSelectedDate(newDate);
+      if (onChange) {
+        onChange(newDate);
+      }
+      setOpen(false);
+      if (onOpenChange) {
+        onOpenChange(false);
+      }
+    };
+
+    const handleClear = (e) => {
+      e.stopPropagation();
+      setSelectedDate(null);
+      if (onChange) {
+        onChange(null);
+      }
+    };
+
+    const handleClickOutside = (event) => {
+      if (
+        calendarRef.current &&
+        !calendarRef.current.contains(event.target) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target)
+      ) {
+        setOpen(false);
+        setShowYearPicker(false);
+        if (onOpenChange) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    React.useEffect(() => {
+      if (open) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+          document.removeEventListener("mousedown", handleClickOutside);
+        };
+      }
+    }, [open]);
+
+    const textFieldProps = slotProps?.textField || {};
+    const displayValue = selectedDate ? selectedDate.format("YYYY-MM-DD") : "";
+    const [viewMode, setViewMode] = React.useState("month"); // "month" or "year"
+    const [showYearPicker, setShowYearPicker] = React.useState(false);
+
+    // Scroll to current year when year picker opens
+    React.useEffect(() => {
+      if (
+        showYearPicker &&
+        currentYearButtonRef.current &&
+        yearPickerRef.current
+      ) {
+        // Use setTimeout to ensure DOM is rendered
+        setTimeout(() => {
+          const button = currentYearButtonRef.current;
+          const container = yearPickerRef.current;
+          if (button && container) {
+            const buttonTop = button.offsetTop;
+            const containerHeight = container.clientHeight;
+            const scrollTop =
+              buttonTop - containerHeight / 2 + button.clientHeight / 2;
+            container.scrollTop = scrollTop;
+          }
+        }, 0);
+      }
+    }, [showYearPicker]);
+
+    // Generate calendar days
+    const getCalendarDays = () => {
+      const startOfMonth = selectedDate
+        ? selectedDate.startOf("month")
+        : dayjs().startOf("month");
+      const endOfMonth = selectedDate
+        ? selectedDate.endOf("month")
+        : dayjs().endOf("month");
+      const startDate = startOfMonth.startOf("week");
+      const endDate = endOfMonth.endOf("week");
+      const days = [];
+      let currentDate = startDate;
+
+      while (currentDate.isBefore(endDate) || currentDate.isSame(endDate)) {
+        days.push(currentDate);
+        currentDate = currentDate.add(1, "day");
+      }
+
+      return days;
+    };
+
+    const calendarDays = getCalendarDays();
+    const currentMonth = selectedDate ? selectedDate.month() : dayjs().month();
+    const currentYear = selectedDate ? selectedDate.year() : dayjs().year();
+
+    const handlePrevMonth = () => {
+      const newDate = selectedDate
+        ? selectedDate.subtract(1, "month")
+        : dayjs().subtract(1, "month");
+      setSelectedDate(newDate);
+    };
+
+    const handleNextMonth = () => {
+      const newDate = selectedDate
+        ? selectedDate.add(1, "month")
+        : dayjs().add(1, "month");
+      setSelectedDate(newDate);
+    };
+
+    const handleDayClick = (day) => {
+      handleDateChange(day);
+    };
+
+    return (
+      <div
+        ref={calendarRef}
+        className={cn("relative", className)}
+        style={style}
+      >
+        <TextField
+          {...textFieldProps}
+          ref={inputRef}
+          value={displayValue || ""}
+          onClick={() => {
+            const newOpen = !open;
+            setOpen(newOpen);
+            if (onOpenChange) {
+              onOpenChange(newOpen);
+            }
+          }}
+          readOnly
+          placeholder={textFieldProps.placeholder || "MM/DD/YYYY"}
+          style={{
+            ...textFieldProps.style,
+            fontSize: "0.875rem",
+            height: textFieldProps.style?.height || "40px",
+          }}
+          InputProps={{
+            ...textFieldProps.InputProps,
+            style: {
+              ...textFieldProps.InputProps?.style,
+              backgroundColor:
+                textFieldProps.InputProps?.style?.backgroundColor,
+            },
+            endAdornment: (
+              <div className="flex items-center gap-1">
+                {clearable && selectedDate && (
+                  <div
+                    className="cursor-pointer"
+                    onClick={handleClear}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      padding: "4px",
+                    }}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                      <path
+                        d="M12 4L4 12M4 4L12 12"
+                        stroke="hsl(var(--muted-foreground))"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  </div>
+                )}
+                <div
+                  className="cursor-pointer"
+                  style={{ padding: "4px" }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const newOpen = !open;
+                    setOpen(newOpen);
+                    if (onOpenChange) {
+                      onOpenChange(newOpen);
+                    }
+                  }}
+                >
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path
+                      d="M6 2V4M14 2V4M3 8H17M4 4H16C16.5523 4 17 4.44772 17 5V16C17 16.5523 16.5523 17 16 17H4C3.44772 17 3 16.5523 3 16V5C3 4.44772 3.44772 4 4 4Z"
+                      stroke="hsl(var(--muted-foreground))"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+            ),
+          }}
+        />
+        {open && (
+          <div
+            className="absolute z-50 mt-1 rounded-2xl border shadow-lg p-4"
+            style={{
+              backgroundColor: "hsl(var(--card))",
+              borderColor: "hsl(var(--border))",
+              top: "100%",
+              minWidth: "300px",
+            }}
+          >
+            {/* Calendar Header */}
+            <div
+              className="flex items-center justify-between mb-4"
+              style={{
+                color: "hsl(var(--foreground))",
+              }}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  if (viewMode === "year") {
+                    setSelectedDate(
+                      selectedDate
+                        ? selectedDate.subtract(10, "year")
+                        : dayjs().subtract(10, "year")
+                    );
+                  } else {
+                    handlePrevMonth();
+                  }
+                }}
+                className="p-1 rounded-lg hover:bg-action-hover transition-colors"
+                style={{
+                  color: "hsl(var(--foreground))",
+                }}
+              >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path
+                    d="M12 15L7 10L12 5"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (viewMode === "month") {
+                      setShowYearPicker(!showYearPicker);
+                    } else {
+                      setViewMode("month");
+                    }
+                  }}
+                  className="font-semibold px-2 py-1 rounded-lg hover:bg-action-hover transition-colors flex items-center gap-1 text-foreground"
+                >
+                  {viewMode === "month"
+                    ? `${dayjs()
+                        .month(currentMonth)
+                        .format("MMMM")} ${currentYear}`
+                    : `${currentYear}`}
+                  {viewMode === "month" && (
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      style={{
+                        transform: showYearPicker
+                          ? "rotate(180deg)"
+                          : "rotate(0deg)",
+                        transition: "transform 0.2s",
+                      }}
+                    >
+                      <path
+                        d="M4 6L8 10L12 6"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  )}
+                </button>
+                {showYearPicker && viewMode === "month" && (
+                  <div
+                    ref={yearPickerRef}
+                    className="absolute z-10 mt-1 rounded-lg border shadow-lg max-h-48 overflow-auto"
+                    style={{
+                      backgroundColor: "hsl(var(--card))",
+                      borderColor: "hsl(var(--border))",
+                      top: "100%",
+                      left: 0,
+                      minWidth: "120px",
+                    }}
+                  >
+                    {Array.from({ length: 201 }, (_, i) => {
+                      // Generate years from currentYear - 100 to currentYear + 100
+                      const currentYearValue = dayjs().year();
+                      const year = currentYearValue - 100 + i;
+                      const isCurrentYear = year === currentYear;
+                      return (
+                        <button
+                          key={year}
+                          ref={isCurrentYear ? currentYearButtonRef : null}
+                          type="button"
+                          onClick={() => {
+                            const newDate = selectedDate
+                              ? selectedDate.year(year)
+                              : dayjs().year(year).month(currentMonth);
+                            setSelectedDate(newDate);
+                            setShowYearPicker(false);
+                          }}
+                          className="w-full px-3 py-1.5 text-sm text-left hover:bg-action-hover transition-colors"
+                          style={{
+                            backgroundColor: isCurrentYear
+                              ? "hsl(var(--accent))" || "rgba(0, 0, 0, 0.08)"
+                              : "transparent",
+                            color: "hsl(var(--foreground))",
+                          }}
+                          onMouseEnter={(e) => {
+                            if (!isCurrentYear) {
+                              e.currentTarget.style.backgroundColor =
+                                "hsl(var(--accent))" || "rgba(0, 0, 0, 0.04)";
+                            }
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.backgroundColor =
+                              isCurrentYear
+                                ? "hsl(var(--accent))" || "rgba(0, 0, 0, 0.08)"
+                                : "transparent";
+                          }}
+                        >
+                          {year}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={() => {
+                  if (viewMode === "year") {
+                    setSelectedDate(
+                      selectedDate
+                        ? selectedDate.add(10, "year")
+                        : dayjs().add(10, "year")
+                    );
+                  } else {
+                    handleNextMonth();
+                  }
+                }}
+                className="p-1 rounded-lg hover:bg-action-hover transition-colors"
+                style={{
+                  color: "hsl(var(--foreground))",
+                }}
+              >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path
+                    d="M8 5L13 10L8 15"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {viewMode === "month" ? (
+              <>
+                {/* Calendar Grid */}
+                <div className="grid grid-cols-7 gap-1 mb-2">
+                  {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
+                    (day) => (
+                      <div
+                        key={day}
+                        className="text-center text-xs font-medium py-1 text-muted-foreground"
+                      >
+                        {day}
+                      </div>
+                    )
+                  )}
+                </div>
+                <div className="grid grid-cols-7 gap-1">
+                  {calendarDays.map((day, index) => {
+                    const isCurrentMonth = day.month() === currentMonth;
+                    const isToday = day.isSame(dayjs(), "day");
+                    const isSelected =
+                      selectedDate && day.isSame(selectedDate, "day");
+
+                    return (
+                      <button
+                        key={index}
+                        type="button"
+                        onClick={() => handleDayClick(day)}
+                        className={cn(
+                          "aspect-square rounded-lg text-sm transition-colors",
+                          !isCurrentMonth && "opacity-30",
+                          isSelected && "font-semibold"
+                        )}
+                        style={{
+                          backgroundColor: isSelected
+                            ? "hsl(var(--primary))"
+                            : isToday
+                            ? "hsl(var(--accent))" || "rgba(0, 0, 0, 0.04)"
+                            : "transparent",
+                          color: isSelected
+                            ? "hsl(var(--primary-foreground))"
+                            : "hsl(var(--foreground))",
+                          border:
+                            isToday && !isSelected
+                              ? "1px solid hsl(var(--primary))"
+                              : "none",
+                        }}
+                        onMouseEnter={(e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor =
+                              "hsl(var(--accent))";
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.backgroundColor = isSelected
+                            ? "hsl(var(--primary))"
+                            : isToday
+                            ? "hsl(var(--accent))" || "rgba(0, 0, 0, 0.04)"
+                            : "transparent";
+                        }}
+                      >
+                        {day.date()}
+                      </button>
+                    );
+                  })}
+                </div>
+              </>
+            ) : (
+              /* Year View */
+              <div className="grid grid-cols-4 gap-2">
+                {Array.from({ length: 12 }, (_, i) => {
+                  const monthIndex = i;
+                  const isCurrentMonth =
+                    monthIndex === dayjs().month() &&
+                    currentYear === dayjs().year();
+                  const isSelected =
+                    selectedDate &&
+                    selectedDate.month() === monthIndex &&
+                    selectedDate.year() === currentYear;
+
+                  return (
+                    <button
+                      key={monthIndex}
+                      type="button"
+                      onClick={() => {
+                        const newDate = selectedDate
+                          ? selectedDate.month(monthIndex)
+                          : dayjs().month(monthIndex).year(currentYear);
+                        setSelectedDate(newDate);
+                        setViewMode("month");
+                      }}
+                      className="p-2 rounded-lg text-sm transition-colors"
+                      style={{
+                        backgroundColor: isSelected
+                          ? "hsl(var(--primary))"
+                          : isCurrentMonth
+                          ? "hsl(var(--accent))"
+                          : "transparent",
+                        color: isSelected
+                          ? "hsl(var(--primary-foreground))"
+                          : "hsl(var(--foreground))",
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor =
+                            "hsl(var(--accent))";
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.backgroundColor = isSelected
+                          ? "hsl(var(--primary))"
+                          : isCurrentMonth
+                          ? "hsl(var(--accent))"
+                          : "transparent";
+                      }}
+                    >
+                      {dayjs().month(monthIndex).format("MMM")}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/src/components/dialog-content-text.jsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Typography } from "./typography";
+
+const DialogContentText = React.forwardRef(
+  ({ className, style, children, ...props }, ref) => {
+    return (
+      <Typography
+        ref={ref}
+        variant="body2"
+        component="p"
+        color="muted"
+        className={className}
+        style={{
+          marginBottom: "16px",
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </Typography>
+    );
+  }
+);
+
+DialogContentText.displayName = "DialogContentText";
+
+export { DialogContentText };