@musecat/uikit 0.1.1

package/packages/Components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,36 @@
+import type { LabelProps } from "@/packages/Components/Label/Label.types";
+
+export type DatePickerMode = "single" | "range";
+
+export interface DatePickerProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  hint?: LabelProps["hint"];
+
+  mode?: DatePickerMode;
+
+  value?: string;
+  defaultValue?: string;
+
+  startDate?: string;
+  endDate?: string;
+  defaultStartDate?: string;
+  defaultEndDate?: string;
+
+  placeholder?: string;
+
+  minDate?: string;
+  maxDate?: string;
+  disabledDaysOfWeek?: number[];
+
+  showTime?: boolean;
+  use12h?: boolean;
+
+  onRangeChange?: (start: string | null, end: string | null) => void;
+  onChange?: (value: string | null) => void;
+}

package/packages/Components/DatePicker/DatePicker.utils.ts

@@ -0,0 +1,80 @@
+export function parseDate(str: string | undefined | null): Date | null {
+  if (!str) return null;
+  if (str.includes(" ")) {
+    const [datePart, timePart] = str.split(" ");
+    const d = new Date(`${datePart}T${timePart}:00`);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  const d = new Date(`${str}T00:00:00`);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+export function toYMD(d: Date, showTime?: boolean): string {
+  const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  if (!showTime) return dateStr;
+  return `${dateStr} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+export function isSameDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isBefore(a: Date, b: Date): boolean {
+  return a.getTime() < b.getTime();
+}
+
+export function formatDisplay(d: Date | null): string {
+  if (!d) return "";
+  return `${d.getFullYear()}. ${d.getMonth() + 1}. ${d.getDate()}.`;
+}
+
+export function formatRangeDisplay(
+  start: Date | null,
+  end: Date | null,
+): string {
+  if (!start) return "";
+  if (!end) return formatDisplay(start);
+  return `${formatDisplay(start)} – ${formatDisplay(end)}`;
+}
+
+export function getCalendarDays(year: number, month: number): Date[] {
+  const first = new Date(year, month, 1);
+  const startOffset = first.getDay();
+  const days: Date[] = [];
+  for (let i = 0; i < startOffset; i++) {
+    days.push(new Date(year, month, 1 - (startOffset - i)));
+  }
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  for (let d = 1; d <= daysInMonth; d++) {
+    days.push(new Date(year, month, d));
+  }
+  while (days.length % 7 !== 0) {
+    days.push(
+      new Date(year, month + 1, days.length - startOffset - daysInMonth + 1),
+    );
+  }
+  return days;
+}
+
+export function isDateDisabled(
+  date: Date,
+  minDate?: string | null,
+  maxDate?: string | null,
+  disabledDaysOfWeek?: number[],
+): boolean {
+  if (minDate) {
+    const min = parseDate(minDate);
+    if (min && date.getTime() < min.getTime()) return true;
+  }
+  if (maxDate) {
+    const max = parseDate(maxDate);
+    if (max && date.getTime() > max.getTime()) return true;
+  }
+  if (disabledDaysOfWeek?.includes(date.getDay())) return true;
+  return false;
+}

package/packages/Components/DatePicker/hooks/useCalendar.ts

@@ -0,0 +1,61 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+import { getCalendarDays } from "@/packages/Components/DatePicker/DatePicker.utils";
+
+interface UseCalendarOptions {
+  initialYear: number;
+  initialMonth: number;
+}
+
+interface UseCalendarReturn {
+  viewYear: number;
+  viewMonth: number;
+  setViewYear: React.Dispatch<React.SetStateAction<number>>;
+  setViewMonth: React.Dispatch<React.SetStateAction<number>>;
+  prevMonth: () => void;
+  nextMonth: () => void;
+  days: Date[];
+}
+
+export function useCalendar({
+  initialYear,
+  initialMonth,
+}: UseCalendarOptions): UseCalendarReturn {
+  const [viewYear, setViewYear] = useState(initialYear);
+  const [viewMonth, setViewMonth] = useState(initialMonth);
+
+  const prevMonth = useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 0) {
+        setViewYear((y) => y - 1);
+        return 11;
+      }
+      return m - 1;
+    });
+  }, []);
+
+  const nextMonth = useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 11) {
+        setViewYear((y) => y + 1);
+        return 0;
+      }
+      return m + 1;
+    });
+  }, []);
+
+  const days = useMemo(
+    () => getCalendarDays(viewYear, viewMonth),
+    [viewYear, viewMonth],
+  );
+
+  return {
+    viewYear,
+    viewMonth,
+    setViewYear,
+    setViewMonth,
+    prevMonth,
+    nextMonth,
+    days,
+  };
+}

package/packages/Components/DatePicker/hooks/useSelection.ts

@@ -0,0 +1,208 @@
+"use client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { DatePickerMode } from "@/packages/Components/DatePicker/DatePicker.types";
+import {
+  formatDisplay,
+  formatRangeDisplay,
+  isBefore,
+  isDateDisabled,
+  isSameDay,
+  parseDate,
+  toYMD,
+} from "@/packages/Components/DatePicker/DatePicker.utils";
+
+interface UseSelectionOptions {
+  mode: DatePickerMode;
+  isControlled: boolean;
+  value?: string | null;
+  defaultValue?: string | null;
+  startDate?: string | null;
+  endDate?: string | null;
+  defaultStartDate?: string | null;
+  defaultEndDate?: string | null;
+  onChange?: (value: string | null) => void;
+  onRangeChange?: (start: string | null, end: string | null) => void;
+  onClose?: () => void;
+  minDate?: string | null;
+  maxDate?: string | null;
+  disabledDaysOfWeek?: number[];
+  showTime?: boolean;
+}
+
+interface UseSelectionReturn {
+  selected: Date | null;
+  rangeStart: Date | null;
+  rangeEnd: Date | null;
+  hoverDay: Date | null;
+  setHoverDay: React.Dispatch<React.SetStateAction<Date | null>>;
+  handleDayClick: (day: Date) => void;
+  isInRange: (day: Date) => boolean;
+  isRangeStart: (day: Date) => boolean;
+  isRangeEnd: (day: Date) => boolean;
+  setSelected: React.Dispatch<React.SetStateAction<Date | null>>;
+  setRangeStart: React.Dispatch<React.SetStateAction<Date | null>>;
+  setRangeEnd: React.Dispatch<React.SetStateAction<Date | null>>;
+  displayText: string | null;
+}
+
+export function useSelection({
+  mode,
+  isControlled,
+  value,
+  defaultValue,
+  startDate,
+  endDate,
+  defaultStartDate,
+  defaultEndDate,
+  onChange,
+  onRangeChange,
+  onClose,
+  minDate,
+  maxDate,
+  disabledDaysOfWeek,
+  showTime,
+}: UseSelectionOptions): UseSelectionReturn {
+  const [selected, setSelected] = useState<Date | null>(() =>
+    parseDate(value ?? defaultValue),
+  );
+  const [rangeStart, setRangeStart] = useState<Date | null>(() =>
+    parseDate(startDate ?? defaultStartDate),
+  );
+  const [rangeEnd, setRangeEnd] = useState<Date | null>(() =>
+    parseDate(endDate ?? defaultEndDate),
+  );
+  const [hoverDay, setHoverDay] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (!isControlled) return;
+    if (mode === "single") setSelected(parseDate(value));
+    else {
+      setRangeStart(parseDate(startDate));
+      setRangeEnd(parseDate(endDate));
+    }
+  }, [value, startDate, endDate, mode, isControlled]);
+
+  const handleDayClick = useCallback(
+    (day: Date) => {
+      if (isDateDisabled(day, minDate, maxDate, disabledDaysOfWeek)) return;
+      if (mode === "single") {
+        const next = isSameDay(day, selected) ? null : new Date(day);
+        if (next && selected) {
+          next.setHours(
+            selected.getHours(),
+            selected.getMinutes(),
+            selected.getSeconds(),
+            selected.getMilliseconds(),
+          );
+        }
+        if (!isControlled) setSelected(next);
+        onChange?.(next ? toYMD(next, showTime) : null);
+        onClose?.();
+        return;
+      }
+      if (!rangeStart || (rangeStart && rangeEnd)) {
+        const next = new Date(day);
+        if (rangeStart) {
+          next.setHours(
+            rangeStart.getHours(),
+            rangeStart.getMinutes(),
+            rangeStart.getSeconds(),
+            rangeStart.getMilliseconds(),
+          );
+        }
+        if (!isControlled) {
+          setRangeStart(next);
+          setRangeEnd(null);
+        }
+        onRangeChange?.(toYMD(next, showTime), null);
+      } else {
+        let start = new Date(rangeStart);
+        let end = new Date(day);
+        if (rangeEnd) {
+          end.setHours(
+            rangeEnd.getHours(),
+            rangeEnd.getMinutes(),
+            rangeEnd.getSeconds(),
+            rangeEnd.getMilliseconds(),
+          );
+        }
+        if (isBefore(end, start)) {
+          [start, end] = [end, start];
+        }
+        if (!isControlled) {
+          setRangeStart(start);
+          setRangeEnd(end);
+        }
+        onRangeChange?.(toYMD(start, showTime), toYMD(end, showTime));
+        onClose?.();
+      }
+    },
+    [
+      mode,
+      selected,
+      rangeStart,
+      rangeEnd,
+      isControlled,
+      onChange,
+      onRangeChange,
+      onClose,
+      minDate,
+      maxDate,
+      disabledDaysOfWeek,
+      showTime,
+    ],
+  );
+
+  const isInRange = useCallback(
+    (day: Date): boolean => {
+      if (mode !== "range") return false;
+      const end = rangeEnd ?? hoverDay;
+      if (!rangeStart || !end) return false;
+      const lo = isBefore(rangeStart, end) ? rangeStart : end;
+      const hi = isBefore(rangeStart, end) ? end : rangeStart;
+      return day.getTime() > lo.getTime() && day.getTime() < hi.getTime();
+    },
+    [mode, rangeStart, rangeEnd, hoverDay],
+  );
+
+  const isRangeStart = useCallback(
+    (day: Date): boolean => {
+      const eff = rangeEnd ?? hoverDay;
+      if (!rangeStart || !eff) return isSameDay(day, rangeStart);
+      const lo = isBefore(rangeStart, eff) ? rangeStart : eff;
+      return isSameDay(day, lo);
+    },
+    [rangeStart, rangeEnd, hoverDay],
+  );
+
+  const isRangeEnd = useCallback(
+    (day: Date): boolean => {
+      const eff = rangeEnd ?? hoverDay;
+      if (!rangeStart || !eff) return false;
+      const hi = isBefore(rangeStart, eff) ? eff : rangeStart;
+      return isSameDay(day, hi);
+    },
+    [rangeStart, rangeEnd, hoverDay],
+  );
+
+  const displayText = useMemo(() => {
+    if (mode === "single") return selected ? formatDisplay(selected) : null;
+    return rangeStart ? formatRangeDisplay(rangeStart, rangeEnd) : null;
+  }, [mode, selected, rangeStart, rangeEnd]);
+
+  return {
+    selected,
+    rangeStart,
+    rangeEnd,
+    hoverDay,
+    setHoverDay,
+    handleDayClick,
+    isInRange,
+    isRangeStart,
+    isRangeEnd,
+    setSelected,
+    setRangeStart,
+    setRangeEnd,
+    displayText,
+  };
+}

package/packages/Components/Divider/Divider.tsx

@@ -0,0 +1,46 @@
+import type { DividerProps } from "@/packages/Components/Divider/Divider.types";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+
+export default function Divider({
+  vertical = false,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  gradient = false,
+  className,
+  style,
+  "data-color-mode": dataTheme,
+}: DividerProps) {
+  const resolvedMargin = Size(margin);
+  const resolvedVertical = Size(marginVertical);
+  const resolvedHorizontal = Size(marginHorizontal);
+
+  const computedStyle = {
+    display: "block",
+    border: "none",
+    margin: 0,
+    borderRadius: "var(--radius-circle)",
+    width: vertical ? ".15rem" : "100%",
+    height: vertical ? undefined : ".1rem",
+    alignSelf: vertical ? "stretch" : undefined,
+    flex: vertical ? "0 0 auto" : undefined,
+    minHeight: vertical ? "1.8rem" : undefined,
+    background: gradient
+      ? `linear-gradient(${vertical ? "180deg" : "90deg"}, transparent 0%, color-mix(in srgb, var(--color-base-reversed-6) 10%, transparent) 50%, transparent 100%)`
+      : "color-mix(in srgb, var(--color-base-reversed-6) 10%, transparent)",
+    marginTop: resolvedVertical ?? resolvedMargin,
+    marginBottom: resolvedVertical ?? resolvedMargin,
+    marginLeft: resolvedHorizontal ?? resolvedMargin,
+    marginRight: resolvedHorizontal ?? resolvedMargin,
+    ...style,
+  } as React.CSSProperties;
+
+  return (
+    <hr
+      aria-orientation={vertical ? "vertical" : undefined}
+      data-color-mode={dataTheme}
+      className={className}
+      style={computedStyle}
+    />
+  );
+}

package/packages/Components/Divider/Divider.types.ts

@@ -0,0 +1,12 @@
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+
+export interface DividerProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  vertical?: boolean;
+  margin?: UIKitSizeValue;
+  marginHorizontal?: UIKitSizeValue;
+  marginVertical?: UIKitSizeValue;
+  gradient?: boolean;
+}

package/packages/Components/Header/Header.module.scss

@@ -0,0 +1,74 @@
+@use "../../Styles/viewport" as viewport;
+
+.Wrapper {
+  max-width: 1280px;
+  width: 100%;
+  margin-top: 3.6rem;
+  padding-inline: 3.6rem;
+  height: 4rem;
+  position: relative;
+
+  @include viewport.down(w3) {
+    margin-top: 1.6rem;
+    padding-inline: 1.6rem;
+  }
+
+  .LeftGroup {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .LeftContent {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0.6rem 0.8rem;
+    margin: -0.8rem;
+    transition: var(--transition-surface);
+
+    @include viewport.down(w3) {
+      padding: 0.4rem 0.6rem;
+      margin: -0.4rem -0.6rem;
+    }
+  }
+
+  .LeftContentLink {
+    flex: 0 1 auto;
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .LogoLink {
+    display: flex;
+    align-items: center;
+    padding: 0.4rem;
+    margin: -0.4rem;
+  }
+
+  .RightContent {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: 0.2rem;
+    position: relative;
+    background: color-mix(in srgb, var(--color-base-light-1) 70%, transparent);
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+}
+
+.LinearBlur {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10.6rem;
+  width: 100%;
+  z-index: 1100;
+
+  @include viewport.down(w3) {
+    height: 7.2rem;
+  }
+}

package/packages/Components/Header/Header.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import styles from "@/packages/Components/Header/Header.module.scss";
+import type { HeaderProps } from "@/packages/Components/Header/Header.types";
+import EdgeEffect from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
+import View from "@/packages/Frameworks/View/View";
+
+export default function Header({
+  "data-color-mode": dataTheme,
+  left,
+  center,
+  right,
+  className,
+  wrapperClassName,
+}: HeaderProps) {
+  return (
+    <>
+      <EdgeEffect side="top" className={styles.LinearBlur} />
+      <header
+        className={className}
+        data-color-mode={dataTheme}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          width: "100%",
+          zIndex: 1200,
+        }}
+      >
+        <View
+          className={clsx(styles.Wrapper, wrapperClassName)}
+          alignItems="center"
+          justifyContent="space-between"
+          gap={4}
+        >
+          {left}
+          {center}
+          {right}
+        </View>
+      </header>
+    </>
+  );
+}

package/packages/Components/Header/Header.types.ts

@@ -0,0 +1,8 @@
+export interface HeaderProps {
+  "data-color-mode"?: string;
+  left?: React.ReactNode;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+}

package/packages/Components/Icon/Icon.group.tsx

@@ -0,0 +1,122 @@
+import { Children } from "react";
+import type { IconGroupProps } from "@/packages/Components/Icon/Icon.group.types";
+import Icon from "@/packages/Components/Icon/Icon";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import {
+  Size,
+  type UIKitSizeValue,
+} from "@/packages/Frameworks/_shared/sizing";
+import View from "@/packages/Frameworks/View/View";
+
+const GROUP_PADDING = 2;
+const ICON_PADDING = 6;
+
+function getIconKey(icon: IconProps, index: number) {
+  const title = typeof icon.title === "string" ? icon.title : undefined;
+
+  return [
+    title,
+    icon.icon,
+    icon.svg,
+    icon.image,
+    icon.width ?? 0,
+    icon.height ?? 0,
+    icon.color ?? "default",
+    index,
+  ].join("-");
+}
+
+function addSizeValues(a: UIKitSizeValue, b: UIKitSizeValue) {
+  if (typeof a === "number" && typeof b === "number") {
+    return a + b;
+  }
+
+  return `calc(${Size(a)} + ${Size(b)})`;
+}
+
+function resolveIcon(
+  icon: IconProps,
+  {
+    single,
+    groupPadding,
+    iconBoxOptions,
+    iconSize,
+    iconWidth,
+    iconHeight,
+  }: {
+    single: boolean;
+    groupPadding: UIKitSizeValue;
+    iconBoxOptions?: IconProps["boxOptions"];
+    iconSize?: IconProps["size"];
+    iconWidth?: IconProps["width"];
+    iconHeight?: IconProps["height"];
+  },
+): IconProps {
+  const boxed = icon.box ?? true;
+  const resolvedPadding = boxed
+    ? (icon.boxOptions?.padding ??
+      iconBoxOptions?.padding ??
+      (single ? addSizeValues(ICON_PADDING, groupPadding) : ICON_PADDING))
+    : (icon.boxOptions?.padding ?? iconBoxOptions?.padding);
+
+  return {
+    box: true,
+    border: icon.border,
+    size: icon.size ?? iconSize,
+    width: icon.width ?? iconWidth,
+    height: icon.height ?? iconHeight,
+    ...icon,
+    boxOptions: {
+      ...iconBoxOptions,
+      ...icon.boxOptions,
+      padding: resolvedPadding,
+    },
+  };
+}
+
+export default function IconGroup({
+  className,
+  style,
+  children,
+  icons,
+  padding = GROUP_PADDING,
+  iconBoxOptions,
+  iconSize,
+  iconWidth,
+  iconHeight,
+  background,
+  border,
+  radius,
+}: IconGroupProps) {
+  const iconItems = icons ? (Array.isArray(icons) ? icons : [icons]) : [];
+  const itemCount = iconItems.length + Children.count(children);
+  const single = itemCount === 1;
+
+  return (
+    <View
+      alignItems="center"
+      background={background ?? "Base1TP2"}
+      radius={radius ?? "Circle"}
+      border={border}
+      className={className}
+      style={{ backdropFilter: "blur(2px)", width: "max-content", ...style }}
+      gap={2}
+      padding={single ? 0 : padding}
+    >
+      {iconItems.map((icon, index) => (
+        <Icon
+          key={getIconKey(icon, index)}
+          {...resolveIcon(icon, {
+            single,
+            groupPadding: padding,
+            iconBoxOptions,
+            iconSize,
+            iconWidth,
+            iconHeight,
+          })}
+        />
+      ))}
+      {children}
+    </View>
+  );
+}