aplance-ui 1.0.1

package/registry/components/ui/input-fields/date-picker/calendar.tsx

@@ -0,0 +1,186 @@
+import type { ChangeEvent, ComponentProps } from "react";
+import clsx from "clsx";
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+} from "@tabler/icons-react";
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type ClassNames,
+  type DayPickerProps,
+} from "react-day-picker";
+import { CustomSelect } from "../custom-select/custom-select";
+import sButton from "../../button/button.module.css";
+import s from "./calendar.module.css";
+
+export type CalendarProps = DayPickerProps & {
+  className?: string;
+};
+
+type ChevronOrientation = "up" | "down" | "left" | "right";
+
+type CalendarChevronProps = {
+  className?: string;
+  size?: number;
+  disabled?: boolean;
+  orientation?: ChevronOrientation;
+};
+
+type CalendarDropdownOption = {
+  value: number;
+  label: string;
+  disabled: boolean;
+};
+
+type CalendarDropdownProps = Omit<ComponentProps<"select">, "children"> & {
+  options?: CalendarDropdownOption[];
+  classNames: ClassNames;
+  components: unknown;
+};
+
+const renderDropdown = ({
+  options,
+  value,
+  disabled,
+  onChange,
+  className,
+}: CalendarDropdownProps) => {
+  const resolvedValue =
+    typeof value === "number" || typeof value === "string"
+      ? String(value)
+      : "";
+
+  const isYearDropdown = (options?.[0]?.value ?? 0) > 31;
+
+  const mappedOptions = (options ?? []).map((option) => ({
+    value: String(option.value),
+    label: option.label,
+    optionButtonVariant: "ghost" as const,
+    optionClassName: s.dropdown_option,
+    disabled: option.disabled,
+  }));
+
+  const orderedOptions = isYearDropdown
+    ? [...mappedOptions].reverse()
+    : mappedOptions;
+
+  const handleChange = (nextValue: string | string[]) => {
+    if (!onChange) return;
+    const resolvedNext = Array.isArray(nextValue)
+      ? (nextValue[0] ?? "")
+      : nextValue;
+
+    const event = {
+      target: { value: resolvedNext },
+      currentTarget: { value: resolvedNext },
+    } as ChangeEvent<HTMLSelectElement>;
+
+    onChange(event);
+  };
+
+  return (
+    <CustomSelect
+      className={s.dropdown_field}
+      options={orderedOptions}
+      value={resolvedValue}
+      onChange={handleChange}
+      disabled={disabled}
+      closeOnPathChange={false}
+      searchable={false}
+      showDisplayIcon={false}
+      selectButton={{
+        buttonVariant: "none",
+        className: clsx(s.dropdown_select_button, className),
+        showChevron: true,
+        showClear: false,
+      }}
+      popover={{
+        renderOnPortal: false,
+        closeOnPathChange: false,
+        closeOnClickOutside: true,
+        position: "bottom",
+        align: "start",
+        offset: 2,
+      }}
+      popoverMenu={{ className: s.dropdown_menu }}
+      optionsContainerClassName={s.dropdown_options}
+    />
+  );
+};
+
+const moduleClassNames: Partial<ClassNames> = {
+  root: s.root,
+  months: s.months,
+  month: s.month,
+  nav: s.nav,
+  button_previous: clsx(sButton.base, sButton.box, sButton.sm, sButton.ghost),
+  button_next: clsx(sButton.base, sButton.box, sButton.sm, sButton.ghost),
+  month_caption: s.month_caption,
+  caption_label: s.caption_label,
+  dropdowns: s.dropdowns,
+  dropdown_root: s.dropdown_root,
+  dropdown: s.dropdown,
+  month_grid: s.month_grid,
+  weekdays: s.weekdays,
+  weekday: s.weekday,
+  weeks: s.weeks,
+  week: s.week,
+  week_number: s.week_number,
+  week_number_header: s.week_number_header,
+  day: s.day,
+  day_button: s.day_button,
+  selected: s.selected,
+  range_start: s.range_start,
+  range_middle: s.range_middle,
+  range_end: s.range_end,
+  today: s.today,
+  outside: s.outside,
+  disabled: s.day_disabled,
+  hidden: s.hidden,
+};
+
+const renderChevron = ({
+  orientation,
+  className,
+  ...rest
+}: CalendarChevronProps) => {
+  if (orientation === "left") {
+    return <IconChevronLeft className={clsx(s.chevron, className)} {...rest} />;
+  }
+  if (orientation === "right") {
+    return <IconChevronRight className={clsx(s.chevron, className)} {...rest} />;
+  }
+  return <IconChevronDown className={clsx(s.chevron, className)} {...rest} />;
+};
+
+const defaultClassNames = getDefaultClassNames();
+
+export const Calendar = ({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  components,
+  ...props
+}: CalendarProps) => {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      captionLayout={captionLayout}
+      className={clsx(s.calendar, className)}
+      classNames={{
+        ...defaultClassNames,
+        ...moduleClassNames,
+        ...classNames,
+      }}
+      components={{
+        Chevron: renderChevron,
+        Dropdown: renderDropdown,
+        ...components,
+      }}
+      {...props}
+    />
+  );
+};

package/registry/components/ui/input-fields/date-picker/date-picker.module.css

@@ -0,0 +1,57 @@
+/* date-picker.module.css – clean, premium layout with no hacks */
+.popover_menu {
+  max-width: calc(100vw - var(--spacing-11)) !important;
+}
+
+.menu_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.manual_panel {
+  padding: var(--spacing-4);
+  border-bottom: var(--border-1) solid var(--color-border);
+}
+
+.manual_grid {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-4);
+}
+
+.calendar_wrap {
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-4);
+}
+
+.range_calendars {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+@media (width <= 48rem) {
+  .range_calendars {
+    flex-direction: column;
+  }
+}
+
+.calendar {
+  width: fit-content;
+}
+
+.time_panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  border-top: var(--border-1) solid var(--color-border);
+}
+
+.range_time_grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-4);
+}
+