@dmsi/wedgekit-react 0.0.4

package/src/components/CalendarRange.tsx

@@ -0,0 +1,429 @@
+import clsx from "clsx";
+import {
+  typography,
+  componentGap,
+  componentPadding,
+  // baseTransition,
+  paddingUsingComponentGap,
+  componentPaddingXUsingComponentGap,
+  componentPaddingYUsingComponentGap,
+} from "../classNames";
+import { Icon } from "./Icon";
+import React, { useState } from "react";
+import { Temporal } from "@js-temporal/polyfill";
+
+export interface CalendarRangeProps {
+  from?: string | number;
+  to?: string | number;
+  onChange?: (from: string, to: string) => void;
+  isDateAvailable?: (date: Temporal.PlainDate) => boolean;
+  /**
+   * Display mode: 'single' for one month, 'double' for two months side by side (default)
+   */
+  mode?: "single" | "double";
+  cardStyle?: boolean;
+  /**
+   * Disable range selection in single mode. When true, single mode will only allow single date selection.
+   * Only applies when mode is "single".
+   */
+  disableRange?: boolean;
+}
+
+/**
+ * Returns true if the given date is a weekend (Saturday or Sunday).
+ * @param date Temporal.PlainDate
+ */
+export function isWeekend(date: Temporal.PlainDate): boolean {
+  // 6 = Saturday, 7 = Sunday (Temporal: 1=Monday, 7=Sunday)
+  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
+}
+
+// DateCell component for rendering a single day
+interface DateCellProps {
+  date: Temporal.PlainDate;
+  isInMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  inRange: boolean;
+  isDisabled: boolean;
+  onClick: () => void;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  /** True if this cell is the start of the selected range */
+  isRangeStart?: boolean;
+  /** True if this cell is the end of the selected range */
+  isRangeEnd?: boolean;
+  /** True if range selection is disabled in single mode */
+  isRangeDisabled?: boolean;
+}
+
+function DateCell({
+  date,
+  isInMonth,
+  isToday,
+  isSelected,
+  inRange,
+  isDisabled,
+  isRangeStart,
+  isRangeEnd,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  cellPadding = "",
+  isRangeDisabled = false,
+  ...props
+}: DateCellProps & { cellPadding?: string }) {
+  return (
+    <span
+      {...props}
+      className={clsx(
+        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
+        typography.caption,
+        cellPadding,
+        !isToday &&
+          !isSelected &&
+          !inRange &&
+          !isDisabled &&
+          !isRangeStart &&
+          !isRangeEnd &&
+          "border-transparent",
+        !isInMonth && "border-transparent",
+        // Today: subtle border ring
+        isToday &&
+          !isSelected &&
+          !inRange &&
+          "rounded-full border-border-primary-normal ",
+        // Selected: Figma blue, white text, strong shadow
+        isSelected && "bg-action-400 text-white border-action-400 z-10",
+        !isSelected && !inRange && "rounded-base",
+        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
+        (isRangeDisabled || (!inRange && isSelected)) && "rounded-base",
+        inRange && isSelected && "hover:border-action-500",
+        // In range: Figma light blue background
+        inRange &&
+          !isSelected &&
+          "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0  ",
+        // Disabled: Figma gray, no pointer, no hover
+        isDisabled && !inRange
+          ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent"
+          : [
+              "text-text-primary-normal cursor-pointer",
+              // Figma hover: blue bg, blue text (or red text if selected)
+              isSelected
+                ? "hover:bg-background-action-primary-hover hover:text-white"
+                : "hover:bg-action-100 hover:text-text-action-primary-hover",
+              // Figma active: darker blue bg, white text
+              "active:bg-action-300 active:text-white",
+              // Figma focus: ring
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400",
+            ],
+        isRangeStart && "rounded-l",
+        isRangeEnd && "rounded-r",
+      )}
+      tabIndex={isDisabled ? -1 : 0}
+      aria-disabled={isDisabled}
+      onClick={() => !isDisabled && isInMonth && onClick()}
+      onMouseEnter={() => isInMonth && onMouseEnter()}
+      onMouseLeave={() => isInMonth && onMouseLeave()}
+    >
+      {isInMonth ? date.day : ""}
+    </span>
+  );
+}
+
+export function CalendarRange({
+  from,
+  to,
+  onChange,
+  isDateAvailable,
+  mode = "double",
+  cardStyle = false,
+  disableRange = false,
+}: CalendarRangeProps) {
+  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  // Parse from/to props
+  const parseDate = (d?: string | number) => {
+    if (!d) return undefined;
+    if (typeof d === "number")
+      return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
+    if (typeof d === "string") return Temporal.PlainDate.from(d);
+    return undefined;
+  };
+  const fromDate = parseDate(from);
+  const toDate = parseDate(to);
+
+  // Internal state for visible months and selection
+  const today = Temporal.Now.plainDateISO();
+  const [baseMonth, setBaseMonth] = useState(
+    fromDate ?? today.with({ day: 1 }),
+  );
+  const [selecting, setSelecting] = useState<"from" | "to">("from");
+  const [pendingFrom, setPendingFrom] = useState<
+    Temporal.PlainDate | undefined
+  >(undefined);
+  const [hoveredDate, setHoveredDate] = useState<
+    Temporal.PlainDate | undefined
+  >(undefined);
+
+  // Helper to get month data
+  function getMonthData(monthOffset: number) {
+    const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
+    const days = monthDate.daysInMonth;
+    const firstDayOffset = monthDate.dayOfWeek % 7;
+    return {
+      name: monthDate.toLocaleString("en-US", { month: "long" }),
+      year: monthDate.year,
+      days,
+      firstDayOffset,
+      date: monthDate,
+    };
+  }
+
+  // Click handlers
+  function handleDayClick(date: Temporal.PlainDate) {
+    if (isDateAvailable && !isDateAvailable(date)) return;
+
+    // Single mode with range disabled: just select the date directly
+    if (mode === "single" && disableRange) {
+      if (onChange) {
+        onChange(date.toString(), date.toString());
+      }
+      return;
+    }
+
+    // Range mode (or single mode with range enabled): handle two-step selection
+    if (selecting === "from") {
+      setPendingFrom(date);
+      setSelecting("to");
+      setHoveredDate(undefined);
+      // Hide current from/to selection when starting a new selection
+    } else if (pendingFrom) {
+      if (onChange) {
+        const [start, end] =
+          Temporal.PlainDate.compare(date, pendingFrom) < 0
+            ? [date, pendingFrom]
+            : [pendingFrom, date];
+        onChange(start.toString(), end.toString());
+      }
+      setPendingFrom(undefined);
+      setSelecting("from");
+      setHoveredDate(undefined);
+    }
+  }
+
+  // Range highlighting
+  function isInRange(date: Temporal.PlainDate) {
+    // No range highlighting in single mode when range is disabled
+    if (mode === "single" && disableRange) {
+      return false;
+    }
+
+    if (pendingFrom && selecting === "to" && hoveredDate) {
+      const [start, end] =
+        Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0
+          ? [hoveredDate, pendingFrom]
+          : [pendingFrom, hoveredDate];
+      return (
+        Temporal.PlainDate.compare(date, start) >= 0 &&
+        Temporal.PlainDate.compare(date, end) <= 0
+      );
+    }
+    if (!pendingFrom && fromDate && toDate) {
+      return (
+        Temporal.PlainDate.compare(date, fromDate) >= 0 &&
+        Temporal.PlainDate.compare(date, toDate) <= 0
+      );
+    }
+    return false;
+  }
+
+  // Render
+  return (
+    <div
+      className={clsx(
+        "relative bg-background-grouped-primary-normal rounded-base w-fit",
+        componentPadding,
+        componentGap,
+        cardStyle && "shadow-4",
+        // baseTransition,
+        "overflow-hidden",
+      )}
+    >
+      <div
+        className={clsx(
+          "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
+          componentGap,
+          paddingUsingComponentGap,
+        )}
+      >
+        {(mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
+          const month = getMonthData(offset);
+          // Always show 6 weeks (42 days)
+          const totalCells = 42;
+          const emptyCells = month.firstDayOffset;
+          return (
+            <React.Fragment key={month.name + month.year}>
+              <div
+                // key={month.name + month.year}
+                className={clsx(
+                  "flex flex-col",
+                  componentGap,
+                  componentPadding,
+                )}
+              >
+                <div
+                  className={clsx(
+                    "flex flex-row items-center justify-between",
+                    componentGap,
+                    componentPaddingXUsingComponentGap,
+                    componentPaddingYUsingComponentGap,
+                    "mb-3",
+                    typography.label,
+                    "text-text-action-primary-normal",
+                  )}
+                >
+                  {idx === 0 ? (
+                    <button
+                      type="button"
+                      className={clsx(
+                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
+                        componentPadding,
+                        "mr-1",
+                      )}
+                      aria-label="Previous month"
+                      onClick={() =>
+                        setBaseMonth(baseMonth.subtract({ months: 1 }))
+                      }
+                    >
+                      <Icon name="chevron_left" size={24} />
+                    </button>
+                  ) : (
+                    <span className={clsx(componentPadding, "mr-1")} />
+                  )}
+                  <div className="flex gap-desktop-compact-component-padding">
+                    <span className="font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate">
+                      {month.name}
+                    </span>
+                    <span className="font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate">
+                      {month.year}
+                    </span>
+                  </div>
+                  {(mode === "double" ? idx === 1 : true) ? (
+                    <button
+                      type="button"
+                      className={clsx(
+                        "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
+                        componentPadding,
+                        "ml-1",
+                      )}
+                      aria-label="Next month"
+                      onClick={() => setBaseMonth(baseMonth.add({ months: 1 }))}
+                    >
+                      <Icon name="chevron_right" size={24} />
+                    </button>
+                  ) : (
+                    <span className={clsx(componentPadding, "ml-1")} />
+                  )}
+                </div>
+                <div className={clsx("grid grid-cols-7 mb-1", componentGap)}>
+                  {weekDays.map((d) => (
+                    <span
+                      key={d}
+                      className={clsx(
+                        typography.caption,
+                        "text-text-secondary-normal text-center",
+                      )}
+                    >
+                      {d}
+                    </span>
+                  ))}
+                </div>
+                <div className={clsx("grid grid-cols-7")}>
+                  {Array.from({ length: totalCells }).map((_, i) => {
+                    const day = i - emptyCells + 1;
+                    const date = month.date.with({ day: 1 }).add({
+                      days: i - emptyCells,
+                    });
+                    const isInMonth = day > 0 && day <= month.days;
+                    const isToday = isInMonth && date.equals(today);
+                    const isSelected =
+                      isInMonth &&
+                      ((!pendingFrom && fromDate && date.equals(fromDate)) ||
+                        (!pendingFrom && toDate && date.equals(toDate)) ||
+                        (pendingFrom && date.equals(pendingFrom)));
+                    const inRange = isInMonth && isInRange(date);
+                    const isDisabled =
+                      !isInMonth ||
+                      (isDateAvailable ? !isDateAvailable(date) : false);
+                    // New: determine if this is the start or end of the range
+
+                    const hoverDateIsBeforePendingFrom =
+                      hoveredDate &&
+                      pendingFrom &&
+                      Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
+
+                    const hoverDateIsAfterPendingFrom =
+                      hoveredDate &&
+                      pendingFrom &&
+                      Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
+
+                    const isRangeStart =
+                      mode === "single" && disableRange
+                        ? false
+                        : (!pendingFrom &&
+                            isInMonth &&
+                            fromDate &&
+                            date.equals(fromDate)) ||
+                          (hoverDateIsAfterPendingFrom &&
+                            date.equals(pendingFrom));
+
+                    const isRangeEnd =
+                      mode === "single" && disableRange
+                        ? false
+                        : (!pendingFrom &&
+                            isInMonth &&
+                            toDate &&
+                            date.equals(toDate)) ||
+                          (hoverDateIsBeforePendingFrom &&
+                            date.equals(pendingFrom));
+                    return (
+                      <DateCell
+                        key={i}
+                        date={date}
+                        isInMonth={!!isInMonth}
+                        isToday={!!isToday}
+                        isSelected={!!isSelected}
+                        inRange={!!inRange}
+                        isDisabled={!!isDisabled}
+                        onClick={() => handleDayClick(date)}
+                        onMouseEnter={() => setHoveredDate(date)}
+                        onMouseLeave={() => setHoveredDate(undefined)}
+                        isRangeStart={!!isRangeStart}
+                        isRangeEnd={!!isRangeEnd}
+                        isRangeDisabled={mode === "single" && disableRange}
+                        // Add cell padding for spacing
+                        cellPadding="p-1.5 md:p-2 lg:p-2.5"
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+              {mode === "double" && idx === 0 && (
+                <div
+                  className={clsx(
+                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
+
+                    // 1px width, full height, matches Figma divider
+                    "w-px",
+                  )}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default CalendarRange;

package/src/components/Caption.tsx

@@ -0,0 +1,101 @@
+import clsx from "clsx";
+import { AsProps, IconSize, TextAttributes, TypographyProps } from "../types";
+import { typography } from "../classNames";
+import { Icon } from "./Icon";
+
+type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p" | "li";
+type Style = {
+  style?: "default" | "success" | "warning" | "error" | "info";
+};
+
+type CaptionProps = {
+  as?: Tags;
+  style?: Style["style"];
+} & AsProps<Tags> &
+  TextAttributes &
+  TypographyProps;
+
+export const Caption = ({
+  className,
+  children,
+  as = "span",
+  style = "default",
+  color,
+  align,
+  ...props
+}: CaptionProps) => {
+  const Element = as;
+
+  return (
+    <div className="flex gap-1">
+      <WhichIcon style={style} size={16} className="mt-[3px] desktop:mt-0" />
+
+      <Element
+        className={clsx(
+          typography.caption.replace("text-text-primary-normal", ""),
+          (style === "default" || style === "info") &&
+            "text-text-secondary-normal",
+          style === "success" && "text-text-success-normal",
+          style === "warning" && "text-text-warning-normal",
+          style === "error" && "text-text-critical-normal",
+          align === "left" && "text-left",
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          className,
+        )}
+        {...props}
+        style={{
+          color: color ? `var(--color-${color})` : undefined,
+        }}
+      >
+        {children}
+      </Element>
+    </div>
+  );
+};
+
+const WhichIcon = ({
+  style,
+  size,
+  className,
+}: {
+  style: Style["style"];
+  size: IconSize;
+  className?: string;
+}) => {
+  if (style === "success") {
+    return (
+      <span className="text-icon-success-normal contents">
+        <Icon className={className}name="check_circle" size={size} />
+      </span>
+    );
+  }
+
+  if (style === "warning") {
+    return (
+      <span className="text-icon-warning-normal contents">
+        <Icon className={className}name="warning" size={size} />
+      </span>
+    );
+  }
+
+  if (style === "error") {
+    return (
+      <span className="text-icon-critical-normal contents">
+        <Icon className={className}name="info" size={size} />
+      </span>
+    );
+  }
+
+  if (style === "info") {
+    return (
+      <span className="text-icon-primary-normal contents">
+        <Icon className={className}name="info" size={size} />
+      </span>
+    );
+  }
+
+  return null;
+};
+
+Caption.displayName = "Caption";