@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

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/code-badge.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/** Figma `code_theme_*` / `code_strategy_*`. */
+export type CodeBadgeConcept =
+  | "mind"
+  | "community"
+  | "movement"
+  | "water"
+  | "air"
+  | "light"
+  | "thermal-comfort"
+  | "nourishment"
+  | "sound"
+  | "materials"
+  | "inactive";
+
+/** `theme` is the filled chip, `strategy` the tinted one. */
+export type CodeBadgeVariant = "theme" | "strategy";
+
+/**
+ * Strategy chips are tinted at different strengths depending on where they
+ * sit. Breadcrumbs use 8%/16%; tables use 12%/24% (which is also what
+ * client/lib/concept-colors.ts records). Figma specifies both — neither is a
+ * mistake, so the strength is a variant rather than a constant.
+ */
+export type CodeBadgeTone = "trail" | "table";
+
+export interface CodeBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  concept?: CodeBadgeConcept;
+  variant?: CodeBadgeVariant;
+  tone?: CodeBadgeTone;
+}
+
+const CodeBadge = React.forwardRef<HTMLSpanElement, CodeBadgeProps>(
+  (
+    {
+      className,
+      variant = "theme",
+      concept = "community",
+      tone = "trail",
+      ...props
+    },
+    ref,
+  ) => (
+    <span
+      ref={ref}
+      className={cn(
+        "code-badge number-small font-semibold",
+        variant === "theme" ? "code-badge--theme" : "code-badge--strategy",
+        `code-badge--${concept}`,
+        tone === "table" && "code-badge--tone-table",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CodeBadge.displayName = "CodeBadge";
+
+export { CodeBadge };

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 };