myoperator-ui 0.0.170 → 0.0.171

package/dist/index.js

@@ -5220,6 +5220,76 @@ const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
 Skeleton.displayName = "Skeleton";
 
 export { Skeleton, skeletonVariants };
+`, prefix)
+        }
+      ]
+    },
+    "empty-state": {
+      name: "empty-state",
+      description: "Centered empty state with icon, title, description, and optional action buttons",
+      category: "feedback",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "empty-state.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface EmptyStateProps {
+  /** Icon element rendered inside the icon circle */
+  icon?: React.ReactNode;
+  /** Bold heading text */
+  title: React.ReactNode;
+  /** Optional subtitle / description text */
+  description?: React.ReactNode;
+  /** Optional action buttons rendered below the description */
+  actions?: React.ReactNode;
+  /** Additional CSS classes for the root container */
+  className?: string;
+}
+
+function EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-5 py-16 px-4",
+        className
+      )}
+    >
+      {icon && (
+        <div className="bg-semantic-primary-surface rounded-[40px] size-[90px] flex items-center justify-center text-semantic-text-secondary">
+          {icon}
+        </div>
+      )}
+      <div className="flex flex-col items-center gap-1.5 text-center">
+        <p className="m-0 text-base font-semibold text-semantic-text-primary">
+          {title}
+        </p>
+        {description && (
+          <p className="m-0 text-sm text-semantic-text-muted max-w-xs">
+            {description}
+          </p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex items-center gap-4">{actions}</div>
+      )}
+    </div>
+  );
+}
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };
 `, prefix)
         }
       ]
@@ -6007,17 +6077,25 @@ PaginationLink.displayName = "PaginationLink";
 export interface PaginationPreviousProps extends PaginationLinkProps {
   /** Additional CSS classes */
   className?: string;
+  /** Disables the previous button */
+  disabled?: boolean;
 }
 
 function PaginationPrevious({
   className,
+  disabled,
   ...props
 }: PaginationPreviousProps) {
   return (
     <PaginationLink
       aria-label="Go to previous page"
+      aria-disabled={disabled}
       size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      className={cn(
+        "gap-1 px-2.5 sm:pl-2.5",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
       {...props}
     >
       <ChevronLeftIcon />
@@ -6030,17 +6108,25 @@ PaginationPrevious.displayName = "PaginationPrevious";
 export interface PaginationNextProps extends PaginationLinkProps {
   /** Additional CSS classes */
   className?: string;
+  /** Disables the next button */
+  disabled?: boolean;
 }
 
 function PaginationNext({
   className,
+  disabled,
   ...props
 }: PaginationNextProps) {
   return (
     <PaginationLink
       aria-label="Go to next page"
+      aria-disabled={disabled}
       size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      className={cn(
+        "gap-1 px-2.5 sm:pr-2.5",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
       {...props}
     >
       <span className="hidden sm:block">Next</span>
@@ -6073,6 +6159,115 @@ function PaginationEllipsis({
 }
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
+export interface PaginationWidgetProps {
+  /** Current page (1-based) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Called when the user navigates to a new page */
+  onPageChange: (page: number) => void;
+  /** Number of pages shown on each side of current page (default: 1) */
+  siblingCount?: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function usePaginationRange(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number
+): (number | "ellipsis")[] {
+  if (totalPages <= 1) return [1];
+
+  const range = (start: number, end: number): number[] =>
+    Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+  const leftSibling = Math.max(currentPage - siblingCount, 2);
+  const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  const pages: (number | "ellipsis")[] = [1];
+
+  if (showLeftEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    // fill in pages between 1 and leftSibling if no ellipsis
+    for (let p = 2; p < leftSibling; p++) pages.push(p);
+  }
+
+  pages.push(...range(leftSibling, rightSibling));
+
+  if (showRightEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    for (let p = rightSibling + 1; p < totalPages; p++) pages.push(p);
+  }
+
+  if (totalPages > 1) pages.push(totalPages);
+
+  return pages;
+}
+
+function PaginationWidget({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className,
+}: PaginationWidgetProps) {
+  const pages = usePaginationRange(currentPage, totalPages, siblingCount);
+
+  return (
+    <Pagination className={className}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href="#"
+            disabled={currentPage === 1}
+            onClick={(e) => {
+              e.preventDefault();
+              if (currentPage > 1) onPageChange(currentPage - 1);
+            }}
+          />
+        </PaginationItem>
+        {pages.map((page, idx) =>
+          page === "ellipsis" ? (
+            <PaginationItem key={\`ellipsis-\${idx}\`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={page}>
+              <PaginationLink
+                href="#"
+                isActive={page === currentPage}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPageChange(page);
+                }}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        )}
+        <PaginationItem>
+          <PaginationNext
+            href="#"
+            disabled={currentPage === totalPages}
+            onClick={(e) => {
+              e.preventDefault();
+              if (currentPage < totalPages) onPageChange(currentPage + 1);
+            }}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+PaginationWidget.displayName = "PaginationWidget";
+
 export {
   Pagination,
   PaginationContent,
@@ -6081,6 +6276,7 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  PaginationWidget,
 };
 `, prefix)
         }
@@ -8213,6 +8409,423 @@ export interface BankDetailsProps {
           name: "index.ts",
           content: prefixTailwindClasses(`export { BankDetails } from "./bank-details";
 export type { BankDetailsProps, BankDetailItem } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "date-range-modal": {
+      name: "date-range-modal",
+      description: "A modal for selecting a date range with start and end date pickers",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "dialog",
+        "button",
+        "input"
+      ],
+      isMultiFile: true,
+      directory: "date-range-modal",
+      mainFile: "index.tsx",
+      files: [
+        {
+          name: "index.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../dialog";
+import { Button } from "../button";
+import { DateInput } from "./date-input";
+
+export interface DateRangeModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Modal title. Defaults to "Select custom date" */
+  title?: string;
+  /** Called when the user confirms with both dates selected */
+  onConfirm: (start: Date, end: Date) => void;
+  /** Called when the user cancels */
+  onCancel?: () => void;
+  /** Confirm button label. Defaults to "Select custom date range" */
+  confirmButtonText?: string;
+  /** Cancel button label. Defaults to "Cancel" */
+  cancelButtonText?: string;
+  /** Disables confirm button and shows loading state */
+  loading?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function DateRangeModal({
+  open,
+  onOpenChange,
+  title = "Select custom date",
+  onConfirm,
+  onCancel,
+  confirmButtonText = "Select custom date range",
+  cancelButtonText = "Cancel",
+  loading = false,
+  minDate,
+  maxDate,
+}: DateRangeModalProps) {
+  const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
+  const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
+
+  const canConfirm = !!startDate && !!endDate;
+
+  function handleConfirm() {
+    if (startDate && endDate) {
+      onConfirm(startDate, endDate);
+    }
+  }
+
+  function handleCancel() {
+    onCancel?.();
+    onOpenChange(false);
+  }
+
+  // Reset state when modal closes
+  React.useEffect(() => {
+    if (!open) {
+      setStartDate(undefined);
+      setEndDate(undefined);
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <hr className="border-semantic-border-layout -mx-6" />
+
+        <div className="flex flex-col gap-4 py-2">
+          <DateInput
+            label="Start date"
+            value={startDate}
+            onChange={setStartDate}
+            placeholder="MM/DD/YYYY"
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+          <DateInput
+            label="End date"
+            value={endDate}
+            onChange={setEndDate}
+            placeholder="MM/DD/YYYY"
+            minDate={startDate ?? minDate}
+            maxDate={maxDate}
+          />
+        </div>
+
+        <hr className="border-semantic-border-layout -mx-6" />
+
+        <div className="flex items-center justify-end gap-3 pt-1">
+          <Button variant="outline" onClick={handleCancel} disabled={loading}>
+            {cancelButtonText}
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={!canConfirm || loading}
+          >
+            {loading ? "Loading..." : confirmButtonText}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+DateRangeModal.displayName = "DateRangeModal";
+
+export { DateRangeModal };
+`, prefix)
+        },
+        {
+          name: "calendar.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "../../../lib/utils";
+
+const DAYS_OF_WEEK = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+
+const MONTHS = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+
+export interface CalendarProps {
+  value?: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function isBeforeDay(a: Date, b: Date): boolean {
+  const aD = new Date(a.getFullYear(), a.getMonth(), a.getDate());
+  const bD = new Date(b.getFullYear(), b.getMonth(), b.getDate());
+  return aD < bD;
+}
+
+function isAfterDay(a: Date, b: Date): boolean {
+  const aD = new Date(a.getFullYear(), a.getMonth(), a.getDate());
+  const bD = new Date(b.getFullYear(), b.getMonth(), b.getDate());
+  return aD > bD;
+}
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function getFirstDayOfWeek(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+function Calendar({ value, onChange, minDate, maxDate }: CalendarProps) {
+  const today = new Date();
+  const initial = value ?? today;
+
+  const [viewYear, setViewYear] = React.useState(initial.getFullYear());
+  const [viewMonth, setViewMonth] = React.useState(initial.getMonth());
+
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDayOfWeek = getFirstDayOfWeek(viewYear, viewMonth);
+
+  // Previous month fill days
+  const prevMonthDays = getDaysInMonth(
+    viewMonth === 0 ? viewYear - 1 : viewYear,
+    viewMonth === 0 ? 11 : viewMonth - 1
+  );
+
+  const handlePrevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  };
+
+  const handleNextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  };
+
+  const cells: { day: number; currentMonth: boolean; date: Date }[] = [];
+
+  // Fill leading days from previous month
+  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+    const d = prevMonthDays - i;
+    const prevMonth = viewMonth === 0 ? 11 : viewMonth - 1;
+    const prevYear = viewMonth === 0 ? viewYear - 1 : viewYear;
+    cells.push({ day: d, currentMonth: false, date: new Date(prevYear, prevMonth, d) });
+  }
+
+  // Current month days
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, currentMonth: true, date: new Date(viewYear, viewMonth, d) });
+  }
+
+  // Fill trailing days from next month
+  const remainder = cells.length % 7;
+  if (remainder !== 0) {
+    const nextMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+    const nextYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+    for (let d = 1; d <= 7 - remainder; d++) {
+      cells.push({ day: d, currentMonth: false, date: new Date(nextYear, nextMonth, d) });
+    }
+  }
+
+  return (
+    <div className="select-none w-full">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <button
+          type="button"
+          onClick={handlePrevMonth}
+          className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+          aria-label="Previous month"
+        >
+          <ChevronLeftIcon className="size-4" />
+        </button>
+        <span className="text-sm font-semibold text-semantic-text-primary">
+          {MONTHS[viewMonth]} {viewYear}
+        </span>
+        <button
+          type="button"
+          onClick={handleNextMonth}
+          className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+          aria-label="Next month"
+        >
+          <ChevronRightIcon className="size-4" />
+        </button>
+      </div>
+
+      {/* Days of week */}
+      <div className="grid grid-cols-7 mb-1">
+        {DAYS_OF_WEEK.map((d) => (
+          <div
+            key={d}
+            className="text-center text-xs font-medium text-semantic-text-muted py-1"
+          >
+            {d}
+          </div>
+        ))}
+      </div>
+
+      {/* Day grid */}
+      <div className="grid grid-cols-7">
+        {cells.map(({ day, currentMonth, date }, idx) => {
+          const isToday = currentMonth && isSameDay(date, today);
+          const isSelected = value ? isSameDay(date, value) : false;
+          const isDisabled =
+            (minDate && isBeforeDay(date, minDate)) ||
+            (maxDate && isAfterDay(date, maxDate));
+
+          return (
+            <button
+              key={idx}
+              type="button"
+              disabled={!!isDisabled}
+              onClick={() => {
+                if (!isDisabled) onChange(date);
+              }}
+              className={cn(
+                "relative flex items-center justify-center size-8 mx-auto rounded-full text-xs transition-colors",
+                isSelected
+                  ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
+                  : currentMonth
+                  ? "text-semantic-text-primary hover:bg-semantic-bg-hover"
+                  : "text-semantic-text-muted hover:bg-semantic-bg-hover",
+                isDisabled && "opacity-40 cursor-not-allowed pointer-events-none"
+              )}
+              aria-label={date.toDateString()}
+              aria-pressed={isSelected}
+              aria-current={isToday ? "date" : undefined}
+            >
+              {day}
+              {isToday && !isSelected && (
+                <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-semantic-primary" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
+`, prefix)
+        },
+        {
+          name: "date-input.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { Calendar } from "./calendar";
+
+export interface DateInputProps {
+  label: string;
+  value?: Date;
+  onChange: (date: Date) => void;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+function formatDate(date: Date): string {
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  const yyyy = date.getFullYear();
+  return \`\${mm}/\${dd}/\${yyyy}\`;
+}
+
+function DateInput({
+  label,
+  value,
+  onChange,
+  placeholder = "MM/DD/YYYY",
+  minDate,
+  maxDate,
+}: DateInputProps) {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  React.useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClick);
+    }
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className="relative flex flex-col gap-1.5">
+      <label className="text-sm font-medium text-semantic-text-primary">
+        {label}
+      </label>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          "flex items-center justify-between gap-2 w-full px-3 py-2 rounded-md border text-sm transition-colors outline-none",
+          "border-semantic-border-input bg-semantic-bg-primary text-semantic-text-primary",
+          "hover:border-semantic-border-input-focus/50",
+          open && "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          !value && "text-semantic-text-muted"
+        )}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+      >
+        <span>{value ? formatDate(value) : placeholder}</span>
+        <CalendarIcon className="size-4 text-semantic-text-muted shrink-0" />
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 z-50 mt-1 w-72 rounded-lg border border-semantic-border-layout bg-semantic-bg-primary shadow-lg p-3">
+          <Calendar
+            value={value}
+            onChange={(date) => {
+              onChange(date);
+              setOpen(false);
+            }}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+DateInput.displayName = "DateInput";
+
+export { DateInput };
 `, prefix)
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.170",
+  "version": "0.0.171",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",