@tonyarbor/components 0.2.0 → 0.4.0

package/dist/DatePicker.d.mts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+interface DatePickerProps {
+    /**
+     * The selected date value
+     */
+    value?: Date;
+    /**
+     * Callback when date changes
+     */
+    onChange?: (date: Date | undefined) => void;
+    /**
+     * Label for the input
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Helper text below the input
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Success state
+     */
+    state?: 'default' | 'success' | 'error';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Date format string (default: dd/MM/yyyy)
+     */
+    dateFormat?: string;
+}
+/**
+ * DatePicker component - Arbor Design System
+ *
+ * A date picker with calendar popup for selecting dates.
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/DatePicker.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+interface DatePickerProps {
+    /**
+     * The selected date value
+     */
+    value?: Date;
+    /**
+     * Callback when date changes
+     */
+    onChange?: (date: Date | undefined) => void;
+    /**
+     * Label for the input
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Helper text below the input
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Success state
+     */
+    state?: 'default' | 'success' | 'error';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Date format string (default: dd/MM/yyyy)
+     */
+    dateFormat?: string;
+}
+/**
+ * DatePicker component - Arbor Design System
+ *
+ * A date picker with calendar popup for selecting dates.
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/DatePicker.js

@@ -0,0 +1,490 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/DatePicker/index.ts
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(DatePicker_exports);
+
+// src/DatePicker/DatePicker.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var Popover = __toESM(require("@radix-ui/react-popover"));
+var import_lucide_react = require("lucide-react");
+var import_date_fns = require("date-fns");
+var import_jsx_runtime = require("react/jsx-runtime");
+var wrapperStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px"
+};
+var labelStyles = {
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "#2f2f2f",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var inputContainerStyles = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center"
+};
+var inputStyles = {
+  width: "100%",
+  height: "36px",
+  padding: "0 36px 0 12px",
+  fontSize: "13px",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  outline: "none",
+  transition: "all 0.2s ease-in-out",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  backgroundColor: "#ffffff",
+  color: "#2f2f2f"
+};
+var iconButtonStyles = {
+  position: "absolute",
+  right: "8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "4px",
+  cursor: "pointer",
+  color: "#595959",
+  backgroundColor: "transparent",
+  border: "none"
+};
+var helperTextStyles = {
+  fontSize: "11px",
+  color: "#595959",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var calendarPopoverStyles = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #efefef",
+  borderRadius: "8px",
+  padding: "16px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  minWidth: "320px",
+  zIndex: 1e3
+};
+var calendarHeaderStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "16px",
+  gap: "8px"
+};
+var monthYearContainerStyles = {
+  display: "flex",
+  gap: "8px",
+  flex: 1
+};
+var selectStyles = {
+  padding: "6px 8px",
+  fontSize: "13px",
+  border: "1px solid #d1d1d1",
+  borderRadius: "6px",
+  backgroundColor: "#ffffff",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  outline: "none"
+};
+var navButtonStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "28px",
+  height: "28px",
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  borderRadius: "4px",
+  color: "#2f2f2f",
+  transition: "background-color 0.2s"
+};
+var weekDaysStyles = {
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 1fr)",
+  gap: "4px",
+  marginBottom: "8px"
+};
+var weekDayStyles = {
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "#7e7e7e",
+  textAlign: "center",
+  padding: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var daysGridStyles = {
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 1fr)",
+  gap: "4px"
+};
+var dayButtonStyles = {
+  width: "36px",
+  height: "36px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  backgroundColor: "transparent",
+  borderRadius: "50%",
+  cursor: "pointer",
+  fontSize: "13px",
+  color: "#2f2f2f",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  transition: "all 0.2s"
+};
+var footerStyles = {
+  display: "flex",
+  justifyContent: "flex-end",
+  marginTop: "12px",
+  paddingTop: "12px",
+  borderTop: "1px solid #efefef"
+};
+var todayButtonStyles = {
+  padding: "6px 12px",
+  fontSize: "13px",
+  fontWeight: 500,
+  color: "#16a33d",
+  backgroundColor: "transparent",
+  border: "none",
+  cursor: "pointer",
+  borderRadius: "6px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  transition: "background-color 0.2s"
+};
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var DatePicker = React.forwardRef(
+  ({
+    value,
+    onChange,
+    label,
+    placeholder = "DD/MM/YYYY",
+    helperText,
+    error,
+    state = "default",
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    minDate,
+    maxDate,
+    dateFormat = "dd/MM/yyyy"
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const [viewDate, setViewDate] = React.useState(value || /* @__PURE__ */ new Date());
+    const inputId = React.useId();
+    React.useEffect(() => {
+      if (value && (0, import_date_fns.isValid)(value)) {
+        setInputValue((0, import_date_fns.format)(value, dateFormat));
+      } else {
+        setInputValue("");
+      }
+    }, [value, dateFormat]);
+    React.useEffect(() => {
+      if (value && (0, import_date_fns.isValid)(value)) {
+        setViewDate(value);
+      }
+    }, [value]);
+    const handleInputChange = (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      const parsedDate = (0, import_date_fns.parse)(newValue, dateFormat, /* @__PURE__ */ new Date());
+      if ((0, import_date_fns.isValid)(parsedDate)) {
+        onChange?.(parsedDate);
+        setViewDate(parsedDate);
+      }
+    };
+    const handleInputBlur = () => {
+      if (value && (0, import_date_fns.isValid)(value)) {
+        setInputValue((0, import_date_fns.format)(value, dateFormat));
+      } else if (!inputValue) {
+        onChange?.(void 0);
+      }
+    };
+    const handleDateSelect = (date) => {
+      onChange?.(date);
+      setOpen(false);
+    };
+    const handleTodayClick = () => {
+      const today = /* @__PURE__ */ new Date();
+      onChange?.(today);
+      setViewDate(today);
+      setOpen(false);
+    };
+    const handleMonthChange = (e) => {
+      const newMonth = parseInt(e.target.value, 10);
+      const newDate = new Date(viewDate);
+      newDate.setMonth(newMonth);
+      setViewDate(newDate);
+    };
+    const handleYearChange = (e) => {
+      const newYear = parseInt(e.target.value, 10);
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(newYear);
+      setViewDate(newDate);
+    };
+    const handlePrevMonth = () => {
+      setViewDate((0, import_date_fns.subMonths)(viewDate, 1));
+    };
+    const handleNextMonth = () => {
+      setViewDate((0, import_date_fns.addMonths)(viewDate, 1));
+    };
+    const monthStart = (0, import_date_fns.startOfMonth)(viewDate);
+    const monthEnd = (0, import_date_fns.endOfMonth)(viewDate);
+    const startDate = (0, import_date_fns.startOfWeek)(monthStart, { weekStartsOn: 1 });
+    const endDate = (0, import_date_fns.endOfWeek)(monthEnd, { weekStartsOn: 1 });
+    const days = (0, import_date_fns.eachDayOfInterval)({ start: startDate, end: endDate });
+    const isDateDisabled = (date) => {
+      if (minDate && date < minDate) return true;
+      if (maxDate && date > maxDate) return true;
+      return false;
+    };
+    const currentYear = viewDate.getFullYear();
+    const yearOptions = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+    const currentState = error ? "error" : state;
+    const getInputStyles = () => {
+      const styles = { ...inputStyles };
+      if (disabled) {
+        styles.backgroundColor = "#f8f8f8";
+        styles.borderColor = "#efefef";
+        styles.color = "#7e7e7e";
+        styles.cursor = "not-allowed";
+      } else if (currentState === "error") {
+        styles.borderColor = "#e02f1d";
+      } else if (currentState === "success") {
+        styles.borderColor = "#16a33d";
+      }
+      return styles;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)("arbor-datepicker-wrapper", className),
+        style: { ...wrapperStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, style: labelStyles, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Root, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: inputContainerStyles, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  ref,
+                  id: inputId,
+                  type: "text",
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  onBlur: handleInputBlur,
+                  placeholder,
+                  disabled,
+                  style: getInputStyles(),
+                  "aria-label": label || "Date picker"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    ...iconButtonStyles,
+                    cursor: disabled ? "not-allowed" : "pointer"
+                  },
+                  disabled,
+                  "aria-label": "Open calendar",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { size: 16 })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              Popover.Content,
+              {
+                align: "start",
+                sideOffset: 4,
+                style: calendarPopoverStyles,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: calendarHeaderStyles, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handlePrevMonth,
+                        style: navButtonStyles,
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = "#f8f8f8";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        "aria-label": "Previous month",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { size: 16 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: monthYearContainerStyles, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "select",
+                        {
+                          value: viewDate.getMonth(),
+                          onChange: handleMonthChange,
+                          style: selectStyles,
+                          "aria-label": "Select month",
+                          children: MONTHS.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: index, children: month }, month))
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "select",
+                        {
+                          value: viewDate.getFullYear(),
+                          onChange: handleYearChange,
+                          style: selectStyles,
+                          "aria-label": "Select year",
+                          children: yearOptions.map((year) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: year, children: year }, year))
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleNextMonth,
+                        style: navButtonStyles,
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = "#f8f8f8";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        "aria-label": "Next month",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { size: 16 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: weekDaysStyles, children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: weekDayStyles, children: day }, day)) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: daysGridStyles, children: days.map((day) => {
+                    const isCurrentMonth = day.getMonth() === viewDate.getMonth();
+                    const isSelected = value && (0, import_date_fns.isSameDay)(day, value);
+                    const isTodayDate = (0, import_date_fns.isToday)(day);
+                    const isDayDisabled = isDateDisabled(day);
+                    const getDayButtonStyles = () => {
+                      const styles = { ...dayButtonStyles };
+                      if (!isCurrentMonth) {
+                        styles.color = "#d1d1d1";
+                      }
+                      if (isDayDisabled) {
+                        styles.color = "#d1d1d1";
+                        styles.cursor = "not-allowed";
+                      }
+                      if (isSelected) {
+                        styles.backgroundColor = "#3cad51";
+                        styles.color = "#ffffff";
+                      } else if (isTodayDate && !isDayDisabled) {
+                        styles.fontWeight = 600;
+                        styles.color = "#16a33d";
+                      }
+                      return styles;
+                    };
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => !isDayDisabled && handleDateSelect(day),
+                        disabled: isDayDisabled,
+                        style: getDayButtonStyles(),
+                        onMouseEnter: (e) => {
+                          if (!isSelected && !isDayDisabled && isCurrentMonth) {
+                            e.currentTarget.style.backgroundColor = "#f8f8f8";
+                          }
+                        },
+                        onMouseLeave: (e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          }
+                        },
+                        "aria-label": (0, import_date_fns.format)(day, "MMMM d, yyyy"),
+                        "aria-selected": isSelected,
+                        children: (0, import_date_fns.format)(day, "d")
+                      },
+                      day.toISOString()
+                    );
+                  }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: footerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleTodayClick,
+                      style: todayButtonStyles,
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "#f8f8f8";
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: "Today"
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...helperTextStyles, color: "#e02f1d" }, children: error }),
+          !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: helperTextStyles, children: helperText })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker
+});
+//# sourceMappingURL=DatePicker.js.map