@optilogic/core 1.0.0-beta.0

package/src/components/button.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+
+/**
+ * Button variant styles using class-variance-authority.
+ * Provides consistent button styling across the application.
+ */
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        primary: "bg-accent text-accent-foreground shadow hover:shadow-md",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /**
+   * If true, the button will render as its child element (Slot pattern).
+   * Useful for wrapping other components like links.
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Button Component
+ *
+ * A versatile button component with multiple variants and sizes.
+ * Supports the Slot pattern for composing with other elements.
+ *
+ * @example
+ * <Button variant="primary">Click me</Button>
+ *
+ * @example
+ * <Button variant="ghost" size="icon">
+ *   <Icon />
+ * </Button>
+ *
+ * @example
+ * <Button asChild>
+ *   <a href="/link">Link Button</a>
+ * </Button>
+ */
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/calendar.tsx

@@ -0,0 +1,235 @@
+/**
+ * Calendar Component
+ *
+ * A styled calendar component built on react-day-picker.
+ * Matches the library's design system with proper theming.
+ *
+ * Features:
+ * - Single date, range, and multiple selection modes
+ * - Keyboard navigation
+ * - Min/max date constraints
+ * - Disabled dates
+ * - Theme-aware styling
+ * - Month/year dropdown selectors for quick navigation
+ */
+
+import * as React from "react";
+import { DayPicker, type DayPickerProps } from "react-day-picker";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../utils/cn";
+import { buttonVariants } from "./button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+export type CalendarProps = DayPickerProps;
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+/**
+ * Generate an array of years for the year selector
+ * Defaults to 100 years before and 20 years after current year
+ */
+function getYearRange(fromYear?: number, toYear?: number): number[] {
+  const currentYear = new Date().getFullYear();
+  const start = fromYear ?? currentYear - 100;
+  const end = toYear ?? currentYear + 20;
+  const years: number[] = [];
+  for (let year = start; year <= end; year++) {
+    years.push(year);
+  }
+  return years;
+}
+
+/**
+ * Calendar Component
+ *
+ * A fully styled calendar using react-day-picker with library design tokens.
+ *
+ * @example Single date selection
+ * ```tsx
+ * const [date, setDate] = useState<Date>();
+ * <Calendar mode="single" selected={date} onSelect={setDate} />
+ * ```
+ *
+ * @example Date range selection
+ * ```tsx
+ * const [range, setRange] = useState<DateRange>();
+ * <Calendar mode="range" selected={range} onSelect={setRange} />
+ * ```
+ *
+ * @example Quick navigation with month/year selectors
+ * ```tsx
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   fromYear={2020}
+ *   toYear={2030}
+ * />
+ * ```
+ */
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  month: controlledMonth,
+  defaultMonth,
+  onMonthChange,
+  ...props
+}: CalendarProps) {
+  const startMonth = props.startMonth ?? props.fromDate;
+  const endMonth = props.endMonth ?? props.toDate;
+  const fromYear = startMonth?.getFullYear();
+  const toYear = endMonth?.getFullYear();
+  const years = React.useMemo(() => getYearRange(fromYear, toYear), [fromYear, toYear]);
+
+  const [internalMonth, setInternalMonth] = React.useState<Date>(
+    defaultMonth ?? new Date()
+  );
+
+  const displayedMonth = controlledMonth ?? internalMonth;
+
+  const handleMonthChange = React.useCallback(
+    (newMonth: Date) => {
+      if (controlledMonth === undefined) {
+        setInternalMonth(newMonth);
+      }
+      onMonthChange?.(newMonth);
+    },
+    [controlledMonth, onMonthChange]
+  );
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      month={displayedMonth}
+      onMonthChange={handleMonthChange}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-4",
+        month: "flex flex-col gap-4",
+        month_caption: "flex justify-center pt-1 relative items-center h-7 px-10",
+        caption_label: "text-sm font-medium hidden",
+        nav: "flex items-center gap-1",
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
+        ),
+        month_grid: "w-full border-collapse px-1",
+        weekdays: "flex",
+        weekday:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        range_start: "day-range-start rounded-l-md",
+        range_end: "day-range-end rounded-r-md",
+        selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          return <Icon className="h-4 w-4" />;
+        },
+        MonthCaption: ({ calendarMonth }) => {
+          const month = calendarMonth.date.getMonth();
+          const year = calendarMonth.date.getFullYear();
+
+          return (
+            <div className="flex items-center justify-center gap-1 px-10">
+              <Select
+                value={month.toString()}
+                onValueChange={(value) => {
+                  const newDate = new Date(calendarMonth.date);
+                  newDate.setMonth(parseInt(value, 10));
+                  handleMonthChange(newDate);
+                }}
+              >
+                <SelectTrigger
+                  className="h-7 w-[110px] text-sm font-medium border-none shadow-none hover:bg-accent focus:ring-0 px-2"
+                  aria-label="Select month"
+                >
+                  <SelectValue>{MONTHS[month]}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {MONTHS.map((monthName, index) => (
+                    <SelectItem key={monthName} value={index.toString()}>
+                      {monthName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Select
+                value={year.toString()}
+                onValueChange={(value) => {
+                  const newDate = new Date(calendarMonth.date);
+                  newDate.setFullYear(parseInt(value, 10));
+                  handleMonthChange(newDate);
+                }}
+              >
+                <SelectTrigger
+                  className="h-7 w-[70px] text-sm font-medium border-none shadow-none hover:bg-accent focus:ring-0 px-2"
+                  aria-label="Select year"
+                >
+                  <SelectValue>{year}</SelectValue>
+                </SelectTrigger>
+                <SelectContent className="max-h-[200px]">
+                  {years.map((y) => (
+                    <SelectItem key={y} value={y.toString()}>
+                      {y}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          );
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/src/components/card.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Card - Container component for grouped content
+ */
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const CardTitle = React.forwardRef<HTMLDivElement, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+export interface CardDescriptionProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const CardDescription = React.forwardRef<HTMLDivElement, CardDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+export interface CardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/src/components/checkbox.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "../utils/cn";
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  /**
+   * Whether to show a visible border around the checkbox.
+   * @default true
+   */
+  showBorder?: boolean;
+}
+
+/**
+ * Checkbox Component
+ *
+ * An accessible checkbox input built on Radix UI primitives.
+ * Supports controlled and uncontrolled modes.
+ *
+ * @example
+ * <Checkbox id="terms" />
+ * <Label htmlFor="terms">Accept terms</Label>
+ *
+ * @example
+ * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
+ */
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, showBorder = true, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      // Base styles
+      "grid place-content-center peer shrink-0",
+      "h-4 w-4 rounded-sm",
+      "transition-colors duration-150",
+      // Focus styles
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      // Disabled styles
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      // Border styles (conditional)
+      showBorder
+        ? [
+            // Visible border for better contrast
+            "border-2 border-foreground/40",
+            // Hover state
+            "hover:border-foreground/60",
+            // Checked state - use accent background with contrasting border
+            "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+          ]
+        : [
+            // No border variant (for inline uses)
+            "border border-transparent",
+            // Checked state with subtle background
+            "data-[state=checked]:bg-accent/80",
+          ],
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn(
+        "grid place-content-center",
+        // Use foreground color that contrasts with accent
+        "text-accent-foreground"
+      )}
+    >
+      <Check className="h-3.5 w-3.5 stroke-[3]" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/components/chip.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+
+import { cn } from "../utils/cn";
+
+export interface ChipProps {
+  /**
+   * Chip label text
+   */
+  label: string;
+
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+
+  /**
+   * Whether the chip is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Additional class names
+   */
+  className?: string;
+}
+
+/**
+ * Chip component
+ *
+ * A clickable pill-shaped component for tags, filters, or suggested actions.
+ * Uses the theme chip colors.
+ *
+ * @example
+ * <Chip label="React" onClick={() => console.log('clicked')} />
+ *
+ * @example
+ * <Chip label="Disabled" disabled />
+ */
+export function Chip({
+  label,
+  onClick,
+  disabled = false,
+  className,
+}: ChipProps) {
+  const isClickable = !!onClick && !disabled;
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={!isClickable}
+      className={cn(
+        "inline-flex items-center justify-center",
+        "px-4 py-2 rounded-full",
+        "text-sm font-medium",
+        "transition-all duration-150",
+        // Default styling with chip colors
+        "bg-chip text-chip-foreground",
+        "border border-chip-foreground/20",
+        // Clickable state
+        isClickable && [
+          "cursor-pointer",
+          "hover:bg-accent hover:text-accent-foreground",
+          "hover:border-accent",
+          "hover:shadow-md",
+        ],
+        // Non-clickable state
+        !isClickable && "cursor-default",
+        // Disabled state
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+      type="button"
+    >
+      {label}
+    </button>
+  );
+}