@yca-software/yca-react-core 0.0.21 → 0.0.22

package/dist/{chunk-XCDKWHJJ.js → chunk-QHNZTXPJ.js}

@@ -7,10 +7,10 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React8 from 'react';
 import { useRef, useId, useState, useEffect } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { Check, Calendar as Calendar$1, ChevronLeft, ChevronRight, Loader2, XIcon, ChevronUp, ChevronDown, X, CheckSquare, FileText, ImagePlus, UploadCloud } from 'lucide-react';
+import { Check, Calendar as Calendar$1, ChevronLeft, ChevronRight, Loader2, XIcon, ChevronUp, ChevronDown, X, CheckSquare, Search, FileText, ImagePlus, UploadCloud } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { format, parse } from 'date-fns';
+import { format, isSameMonth, isSameDay, addDays, startOfMonth, startOfDay, endOfDay, isWithinInterval, addMonths, addWeeks, startOfWeek, endOfWeek, parse } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -1493,6 +1493,322 @@ function DropdownSelectSearchInput({
     }
   ) });
 }
+function startOfVisibleWeek(date, weekStartsOnMonday) {
+  return startOfWeek(date, { weekStartsOn: weekStartsOnMonday ? 1 : 0 });
+}
+function endOfVisibleWeek(date, weekStartsOnMonday) {
+  return endOfWeek(date, { weekStartsOn: weekStartsOnMonday ? 1 : 0 });
+}
+function monthGridDays(anchor, weekStartsOnMonday) {
+  const start = startOfVisibleWeek(startOfMonth(anchor), weekStartsOnMonday);
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+}
+function weekDays(anchor, weekStartsOnMonday) {
+  const start = startOfVisibleWeek(anchor, weekStartsOnMonday);
+  return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+}
+function eventInterval(event) {
+  const start = startOfDay(event.start);
+  const end = event.end ? endOfDay(event.end) : endOfDay(event.start);
+  return { start, end };
+}
+function eventsOnDay(events, day) {
+  const dayStart = startOfDay(day);
+  const dayEnd = endOfDay(day);
+  return events.filter((event) => {
+    const { start, end } = eventInterval(event);
+    return isWithinInterval(dayStart, { start, end }) || isWithinInterval(dayEnd, { start, end }) || start <= dayStart && end >= dayEnd;
+  });
+}
+function weekdayLabels(weekStartsOnMonday, reference = /* @__PURE__ */ new Date()) {
+  const start = startOfVisibleWeek(reference, weekStartsOnMonday);
+  return Array.from({ length: 7 }, (_, i) => format(addDays(start, i), "EEE"));
+}
+function shiftAnchor(anchor, view, direction) {
+  if (view === "month") return addMonths(anchor, direction);
+  if (view === "week") return addWeeks(anchor, direction);
+  return addDays(anchor, direction);
+}
+function titleForView(anchor, view, weekStartsOnMonday) {
+  if (view === "month") return format(anchor, "MMMM yyyy");
+  if (view === "day") return format(anchor, "EEEE, MMM d, yyyy");
+  const start = startOfVisibleWeek(anchor, weekStartsOnMonday);
+  const end = endOfVisibleWeek(anchor, weekStartsOnMonday);
+  if (isSameMonth(start, end)) {
+    return `${format(start, "MMM d")} \u2013 ${format(end, "d, yyyy")}`;
+  }
+  return `${format(start, "MMM d")} \u2013 ${format(end, "MMM d, yyyy")}`;
+}
+var MAX_MONTH_CHIPS = 3;
+function useControlledDate(value, defaultValue, onChange) {
+  const [internal, setInternal] = React8.useState(defaultValue ?? /* @__PURE__ */ new Date());
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const set = React8.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [current, set];
+}
+function useControlledView(value, defaultValue, onChange) {
+  const [internal, setInternal] = React8.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const set = React8.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [current, set];
+}
+function EventChip({
+  event,
+  dense,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "event-calendar-chip",
+      className: cn(
+        "w-full truncate rounded-md px-1.5 text-left text-[0.7rem] font-medium leading-5",
+        "bg-primary/15 text-primary hover:bg-primary/25",
+        dense && "leading-4 text-[0.65rem]",
+        event.colorClassName
+      ),
+      style: event.color ? { backgroundColor: `${event.color}22`, color: event.color } : void 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.(event);
+      },
+      children: event.title
+    }
+  );
+}
+function EventCalendar({
+  events,
+  value,
+  defaultValue,
+  view: viewProp,
+  defaultView = "month",
+  onValueChange,
+  onViewChange,
+  onEventClick,
+  onSlotClick,
+  className,
+  weekStartsOnMonday = true,
+  labels
+}) {
+  const [safeAnchor, setAnchor] = useControlledDate(value, defaultValue, onValueChange);
+  const [safeView, setViewSafe] = useControlledView(viewProp, defaultView, onViewChange);
+  const weekdays = React8.useMemo(
+    () => weekdayLabels(weekStartsOnMonday, safeAnchor),
+    [weekStartsOnMonday, safeAnchor]
+  );
+  const go = (direction) => setAnchor(shiftAnchor(safeAnchor, safeView, direction));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "event-calendar",
+      className: cn(surfaceCard, "flex flex-col gap-3 p-3 sm:p-4", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "icon-sm",
+                "aria-label": "Previous",
+                onClick: () => go(-1),
+                children: /* @__PURE__ */ jsx(ChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "icon-sm",
+                "aria-label": "Next",
+                onClick: () => go(1),
+                children: /* @__PURE__ */ jsx(ChevronRight, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setAnchor(/* @__PURE__ */ new Date()), children: labels?.today ?? "Today" }),
+            /* @__PURE__ */ jsx("h2", { className: "ml-1 text-sm font-semibold sm:text-base", children: titleForView(safeAnchor, safeView, weekStartsOnMonday) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 rounded-lg border border-border/50 p-0.5", children: ["month", "week", "day"].map((v) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: safeView === v ? "secondary" : "ghost",
+              onClick: () => setViewSafe(v),
+              children: labels?.[v] ?? v.charAt(0).toUpperCase() + v.slice(1)
+            },
+            v
+          )) })
+        ] }),
+        safeView === "month" && /* @__PURE__ */ jsx(
+          MonthGrid,
+          {
+            anchor: safeAnchor,
+            events,
+            weekStartsOnMonday,
+            weekdays,
+            onEventClick,
+            onSlotClick
+          }
+        ),
+        safeView === "week" && /* @__PURE__ */ jsx(
+          WeekGrid,
+          {
+            anchor: safeAnchor,
+            events,
+            weekStartsOnMonday,
+            weekdays,
+            onEventClick,
+            onSlotClick
+          }
+        ),
+        safeView === "day" && /* @__PURE__ */ jsx(
+          DayPane,
+          {
+            anchor: safeAnchor,
+            events,
+            onEventClick,
+            onSlotClick
+          }
+        )
+      ]
+    }
+  );
+}
+function MonthGrid({
+  anchor,
+  events,
+  weekStartsOnMonday,
+  weekdays,
+  onEventClick,
+  onSlotClick
+}) {
+  const days = monthGridDays(anchor, weekStartsOnMonday);
+  const today = /* @__PURE__ */ new Date();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-px", children: weekdays.map((label) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-1 py-1 text-center text-[0.7rem] font-medium text-muted-foreground",
+        children: label
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-px rounded-lg border border-border/40 bg-border/40 overflow-hidden", children: days.map((day) => {
+      const dayEvents = eventsOnDay(events, day);
+      const inMonth = isSameMonth(day, anchor);
+      const isToday = isSameDay(day, today);
+      const overflow = dayEvents.length - MAX_MONTH_CHIPS;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-slot": "event-calendar-day",
+          className: cn(
+            "flex min-h-[5.5rem] flex-col gap-0.5 bg-card p-1 text-left align-top",
+            "hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            !inMonth && "bg-muted/20 text-muted-foreground"
+          ),
+          onClick: () => onSlotClick?.(day),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-flex size-6 items-center justify-center rounded-md text-xs",
+                  isToday && "bg-primary text-primary-foreground font-semibold"
+                ),
+                children: format(day, "d")
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              dayEvents.slice(0, MAX_MONTH_CHIPS).map((event) => /* @__PURE__ */ jsx(EventChip, { event, dense: true, onClick: onEventClick }, event.id)),
+              overflow > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 text-[0.65rem] text-muted-foreground", children: [
+                "+",
+                overflow
+              ] })
+            ] })
+          ]
+        },
+        day.toISOString()
+      );
+    }) })
+  ] });
+}
+function WeekGrid({
+  anchor,
+  events,
+  weekStartsOnMonday,
+  weekdays,
+  onEventClick,
+  onSlotClick
+}) {
+  const days = weekDays(anchor, weekStartsOnMonday);
+  const today = /* @__PURE__ */ new Date();
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-7", children: days.map((day, i) => {
+    const dayEvents = eventsOnDay(events, day);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex min-h-[10rem] flex-col gap-1 rounded-lg border border-border/40 bg-card p-2 text-left",
+          "hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isSameDay(day, today) && "ring-1 ring-primary/40"
+        ),
+        onClick: () => onSlotClick?.(day),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[0.7rem] text-muted-foreground", children: weekdays[i] }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: format(day, "d") })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: dayEvents.map((event) => /* @__PURE__ */ jsx(EventChip, { event, onClick: onEventClick }, event.id)) })
+        ]
+      },
+      day.toISOString()
+    );
+  }) });
+}
+function DayPane({
+  anchor,
+  events,
+  onEventClick,
+  onSlotClick
+}) {
+  const dayEvents = eventsOnDay(events, anchor);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex min-h-[16rem] flex-col gap-2 rounded-lg border border-border/40 bg-card p-3 text-left",
+        "hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      onClick: () => onSlotClick?.(anchor),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: format(anchor, "EEEE, MMMM d") }),
+        dayEvents.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No events" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: dayEvents.map((event) => /* @__PURE__ */ jsx(EventChip, { event, onClick: onEventClick }, event.id)) })
+      ]
+    }
+  );
+}
 var labelVariants = cva(
   "text-sm font-medium leading-none tracking-tight text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
@@ -1923,6 +2239,94 @@ var ScrollBar = React8.forwardRef(({ className, orientation = "vertical", ...pro
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+function SearchField({
+  value,
+  onValueChange,
+  onSubmit,
+  onClear,
+  placeholder,
+  "aria-label": ariaLabel,
+  searchButtonLabel = "Search",
+  clearButtonLabel = "Clear",
+  className,
+  inputClassName,
+  disabled,
+  id,
+  name,
+  autoComplete = "off"
+}) {
+  const hasText = value.trim().length > 0;
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-9 w-full min-w-0 overflow-hidden rounded-md border border-input bg-background shadow-xs",
+        "transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 items-center", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id,
+              name,
+              autoComplete,
+              disabled,
+              placeholder,
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              className: cn(
+                "h-9 rounded-none rounded-l-md border-0 bg-transparent px-3 shadow-none",
+                "focus-visible:border-transparent focus-visible:ring-0",
+                hasText && onClear && "pr-9",
+                inputClassName
+              ),
+              "aria-label": ariaLabel ?? placeholder
+            }
+          ),
+          hasText && onClear ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              disabled,
+              onClick: onClear,
+              "aria-label": clearButtonLabel,
+              className: "absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": true })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "default",
+            disabled,
+            onClick: onSubmit,
+            "aria-label": searchButtonLabel,
+            className: cn(
+              "h-full w-10 shrink-0 rounded-none rounded-r-md border-0 border-l border-primary-foreground/15 px-0 shadow-none",
+              "hover:bg-primary/90 active:bg-primary/95",
+              "shadow-[inset_0_1px_0_0_color-mix(in_oklch,var(--primary-foreground)_20%,transparent)]"
+            ),
+            children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4", "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/ui/select-search/index.ts
 var SEARCHABLE_SELECT_MIN_OPTIONS = 8;
@@ -2546,6 +2950,6 @@ function UploadDropzone(props) {
   ] });
 }
 
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Calendar, Checkbox, ConfirmDialog, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownScrollableList, DropdownSelectSearchInput, Form, FormControl, FormDescription, FormDrawer, FormField, FormItem, FormLabel, FormMessage, H3, Heading, Label, Link, MultiSelect, Paragraph, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SEARCHABLE_SELECT_MIN_OPTIONS, ScrollArea, ScrollBar, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipProvider, UploadDropzone, badgeVariants, dropdownMenuSelectOptionsMaxHeightClassName, filterSelectOptions, foldSearchText, headingVariants, isSelectSearchable, linkStyles, paragraphVariants, useFormField };
-//# sourceMappingURL=chunk-XCDKWHJJ.js.map
-//# sourceMappingURL=chunk-XCDKWHJJ.js.map
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Calendar, Checkbox, ConfirmDialog, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownScrollableList, DropdownSelectSearchInput, EventCalendar, Form, FormControl, FormDescription, FormDrawer, FormField, FormItem, FormLabel, FormMessage, H3, Heading, Label, Link, MultiSelect, Paragraph, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SEARCHABLE_SELECT_MIN_OPTIONS, ScrollArea, ScrollBar, SearchField, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipProvider, UploadDropzone, badgeVariants, dropdownMenuSelectOptionsMaxHeightClassName, filterSelectOptions, foldSearchText, headingVariants, isSelectSearchable, linkStyles, paragraphVariants, useFormField };
+//# sourceMappingURL=chunk-QHNZTXPJ.js.map
+//# sourceMappingURL=chunk-QHNZTXPJ.js.map