@syscore/ui-library 1.25.0 → 2.0.0

package/client/components/ui/card.tsx

@@ -1,18 +1,37 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 import { Text } from "./typography";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("card", className)}
-    {...props}
-  />
-));
+const cardVariants = cva("card", {
+  variants: {
+    variant: {
+      default: "card--default",
+      outlined: "card--outlined",
+      elevated: "card--elevated",
+      filled: "card--filled",
+      interactive: "card--interactive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
@@ -71,6 +90,65 @@ const CardFooter = React.forwardRef<
 ));
 CardFooter.displayName = "CardFooter";
 
+const CardMedia = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { src?: string; alt?: string; height?: number }
+>(({ className, src, alt = "", height = 200, children, ...props }, ref) => (
+  <div ref={ref} className={cn("card-media", className)} style={{ height }} {...props}>
+    {src ? (
+      <img src={src} alt={alt} className="card-media__img" />
+    ) : (
+      children
+    )}
+  </div>
+));
+CardMedia.displayName = "CardMedia";
+
+interface CardBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  color?: "default" | "success" | "warning" | "error" | "info";
+}
+
+const CardBadge = React.forwardRef<HTMLSpanElement, CardBadgeProps>(
+  ({ className, color = "default", ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("card-badge", `card-badge--${color}`, className)}
+      {...props}
+    />
+  ),
+);
+CardBadge.displayName = "CardBadge";
+
+const CardActions = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("card-actions", className)} {...props} />
+));
+CardActions.displayName = "CardActions";
+
+interface CardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string | number;
+  label: string;
+  trend?: "up" | "down" | "neutral";
+  trendValue?: string;
+}
+
+const CardMetric = React.forwardRef<HTMLDivElement, CardMetricProps>(
+  ({ className, value, label, trend, trendValue, ...props }, ref) => (
+    <div ref={ref} className={cn("card-metric", className)} {...props}>
+      <span className="card-metric__value">{value}</span>
+      <span className="card-metric__label">{label}</span>
+      {trend && trendValue && (
+        <span className={cn("card-metric__trend", `card-metric__trend--${trend}`)}>
+          {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {trendValue}
+        </span>
+      )}
+    </div>
+  ),
+);
+CardMetric.displayName = "CardMetric";
+
 interface CardWithIconProps {
   icon?: React.ComponentType<React.SVGProps<SVGSVGElement> | { className?: string }>;
   title: string;
@@ -78,22 +156,22 @@ interface CardWithIconProps {
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const CardWithIcon = React.forwardRef<
-  HTMLDivElement,
-  CardWithIconProps
->(({ icon: Icon, title, description, onClick }, ref) => (
-  <Card
-    ref={ref}
-    className="card-with-icon"
-    onClick={onClick}
-  >
-    <div className="card-with-icon__header">
-      {Icon && <Icon className="card-with-icon__icon" />}
-      <Text as="h3" variant="overline-large">{title}</Text>
-    </div>
-    <Text as="p" variant="body-base">{description}</Text>
-  </Card>
-));
+const CardWithIcon = React.forwardRef<HTMLDivElement, CardWithIconProps>(
+  ({ icon: Icon, title, description, onClick }, ref) => (
+    <Card
+      ref={ref}
+      variant="interactive"
+      className="card-with-icon"
+      onClick={onClick}
+    >
+      <div className="card-with-icon__header">
+        {Icon && <Icon className="card-with-icon__icon" />}
+        <Text as="h3" variant="overline-large">{title}</Text>
+      </div>
+      <Text as="p" variant="body-base">{description}</Text>
+    </Card>
+  ),
+);
 CardWithIcon.displayName = "CardWithIcon";
 
 export {
@@ -103,5 +181,9 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
+  CardMedia,
+  CardBadge,
+  CardActions,
+  CardMetric,
   CardWithIcon,
 };

package/client/components/ui/date-picker.tsx

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export interface DatePickerProps {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  disabledDates?: (date: Date) => boolean;
+  fromDate?: Date;
+  toDate?: Date;
+  dateFormat?: string;
+  className?: string;
+  align?: "start" | "center" | "end";
+}
+
+const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = "Select date",
+      disabled = false,
+      disabledDates,
+      fromDate,
+      toDate,
+      dateFormat = "MMM d, yyyy",
+      className,
+      align = "start",
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleSelect = (date: Date | undefined) => {
+      onChange?.(date);
+      setOpen(false);
+    };
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            disabled={disabled}
+            aria-haspopup="dialog"
+            aria-expanded={open}
+            className={cn(
+              "date-picker-trigger",
+              !value && "date-picker-trigger--placeholder",
+              disabled && "date-picker-trigger--disabled",
+              className,
+            )}
+          >
+            <span className="date-picker-icon" aria-hidden="true">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <rect x="1" y="3" width="14" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M1 7h14" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M5 1v4M11 1v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+            </span>
+            <span className="date-picker-value">
+              {value ? format(value, dateFormat) : placeholder}
+            </span>
+            <span className="date-picker-chevron" aria-hidden="true">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="date-picker-popover"
+          align={align}
+          sideOffset={6}
+        >
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={handleSelect}
+            disabled={disabledDates}
+            fromDate={fromDate}
+            toDate={toDate}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+DatePicker.displayName = "DatePicker";
+
+// ---------------------------------------------------------------------------
+// DateRangePicker
+// ---------------------------------------------------------------------------
+export interface DateRange {
+  from: Date | undefined;
+  to?: Date | undefined;
+}
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  onChange?: (range: DateRange | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  dateFormat?: string;
+  className?: string;
+  align?: "start" | "center" | "end";
+}
+
+const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = "Select date range",
+      disabled = false,
+      dateFormat = "MMM d, yyyy",
+      className,
+      align = "start",
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(false);
+
+    const label = React.useMemo(() => {
+      if (!value?.from) return null;
+      if (!value.to) return format(value.from, dateFormat);
+      return `${format(value.from, dateFormat)} — ${format(value.to, dateFormat)}`;
+    }, [value, dateFormat]);
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            disabled={disabled}
+            aria-haspopup="dialog"
+            aria-expanded={open}
+            className={cn(
+              "date-picker-trigger",
+              !label && "date-picker-trigger--placeholder",
+              disabled && "date-picker-trigger--disabled",
+              className,
+            )}
+          >
+            <span className="date-picker-icon" aria-hidden="true">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <rect x="1" y="3" width="14" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M1 7h14" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M5 1v4M11 1v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+            </span>
+            <span className="date-picker-value">{label ?? placeholder}</span>
+            <span className="date-picker-chevron" aria-hidden="true">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="date-picker-popover"
+          align={align}
+          sideOffset={6}
+        >
+          <Calendar
+            mode="range"
+            selected={value}
+            onSelect={onChange as (range: DateRange | undefined) => void}
+            numberOfMonths={2}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DatePicker, DateRangePicker };

package/client/components/ui/empty-state.tsx

@@ -0,0 +1,197 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── EmptyState Root ──────────────────────────────────────────────────────────
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Large display headline (e.g. "Whoops, 404" or "No Messages Yet").
+   * Rendered above the title. Ignored when `headline` slot is used.
+   */
+  headline?: string;
+  /**
+   * Main title below the headline.
+   * Ignored when `title` slot is used.
+   */
+  title?: string;
+  /**
+   * Subtitle rendered between title and body text.
+   * Ignored when `subtitle` slot is used.
+   */
+  subtitle?: string;
+  /**
+   * Body copy below the title.
+   * Ignored when `text` slot is used.
+   */
+  text?: string;
+  /**
+   * URL for an illustration / image rendered above the headline.
+   * Ignored when `media` slot is used.
+   */
+  image?: string;
+  /** Alt text for the image */
+  imageAlt?: string;
+  /**
+   * Icon rendered in the media area when no `image` is provided.
+   * Pass any React node (SVG, lucide icon, etc.).
+   * Ignored when `media` slot is used.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Label for the primary action button.
+   * When provided an `<EmptyStateAction>` button is rendered automatically.
+   * Ignored when `actions` slot is used.
+   */
+  actionText?: string;
+  /** Fires when the auto-rendered action button is clicked */
+  onClickAction?: () => void;
+
+  // ── Slot overrides ──────────────────────────────────────────────────────
+  /** Replaces the media area (image / icon) */
+  mediaSlot?: React.ReactNode;
+  /** Replaces the headline */
+  headlineSlot?: React.ReactNode;
+  /** Replaces the title */
+  titleSlot?: React.ReactNode;
+  /** Replaces the subtitle */
+  subtitleSlot?: React.ReactNode;
+  /** Replaces the body text */
+  textSlot?: React.ReactNode;
+  /** Replaces the actions area */
+  actionsSlot?: React.ReactNode;
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  (
+    {
+      className,
+      children,
+      headline,
+      title,
+      subtitle,
+      text,
+      image,
+      imageAlt = "",
+      icon,
+      actionText,
+      onClickAction,
+      mediaSlot,
+      headlineSlot,
+      titleSlot,
+      subtitleSlot,
+      textSlot,
+      actionsSlot,
+      ...props
+    },
+    ref
+  ) => {
+    const hasMedia = mediaSlot || image || icon;
+    const hasHeadline = headlineSlot || headline;
+    const hasTitle = titleSlot || title;
+    const hasSubtitle = subtitleSlot || subtitle;
+    const hasText = textSlot || text;
+    const hasActions = actionsSlot || actionText;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("empty-state", className)}
+        {...props}
+      >
+        {/* Media: image or icon */}
+        {hasMedia && (
+          <div className="empty-state-media">
+            {mediaSlot ?? (
+              image ? (
+                <img
+                  src={image}
+                  alt={imageAlt}
+                  className="empty-state-image"
+                />
+              ) : (
+                <span className="empty-state-icon">{icon}</span>
+              )
+            )}
+          </div>
+        )}
+
+        {/* Headline */}
+        {hasHeadline && (
+          <div className="empty-state-headline">
+            {headlineSlot ?? headline}
+          </div>
+        )}
+
+        {/* Title */}
+        {hasTitle && (
+          <div className="empty-state-title">
+            {titleSlot ?? title}
+          </div>
+        )}
+
+        {/* Subtitle */}
+        {hasSubtitle && (
+          <div className="empty-state-subtitle">
+            {subtitleSlot ?? subtitle}
+          </div>
+        )}
+
+        {/* Body text */}
+        {hasText && (
+          <div className="empty-state-text">
+            {textSlot ?? text}
+          </div>
+        )}
+
+        {/* Default slot (custom content — e.g. a card grid) */}
+        {children && (
+          <div className="empty-state-default">{children}</div>
+        )}
+
+        {/* Actions */}
+        {hasActions && (
+          <div className="empty-state-actions">
+            {actionsSlot ?? (
+              <EmptyStateAction onClick={onClickAction}>
+                {actionText}
+              </EmptyStateAction>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+
+// ─── EmptyStateAction ─────────────────────────────────────────────────────────
+// Pre-styled CTA button. Use inside `actionsSlot` for custom actions,
+// or let `EmptyState` auto-render one via the `actionText` prop.
+
+export interface EmptyStateActionProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual variant */
+  variant?: "default" | "primary" | "outline";
+}
+
+const EmptyStateAction = React.forwardRef<
+  HTMLButtonElement,
+  EmptyStateActionProps
+>(({ className, variant = "default", ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn(
+      "empty-state-action-btn",
+      variant === "primary" && "empty-state-action-btn--primary",
+      variant === "outline" && "empty-state-action-btn--outline",
+      className
+    )}
+    {...props}
+  />
+));
+EmptyStateAction.displayName = "EmptyStateAction";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export { EmptyState, EmptyStateAction };