@cntyclub/ui-react 0.1.0

package/src/components/ui/stat.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { TrendingDownIcon, TrendingUpIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const statVariants = cva("flex flex-col gap-1.5", {
+  defaultVariants: { variant: "default" },
+  variants: {
+    variant: {
+      // Bare — no chrome. Use inside a StatGroup or a Card.
+      default: "",
+      // A subtle tonal tile.
+      muted: "rounded-xl border bg-secondary p-4",
+      // A bordered surface tile that reads as its own card.
+      card: "rounded-xl border bg-card not-dark:bg-clip-padding p-4 shadow-xs/5",
+    },
+  },
+});
+
+interface StatProps extends useRender.ComponentProps<"div"> {
+  variant?: VariantProps<typeof statVariants>["variant"];
+}
+
+/**
+ * A single headline metric (KPI). Compose it from `StatLabel`, `StatValue`,
+ * `StatDescription` and an optional `StatTrend`. Drop bare `Stat`s into a
+ * `StatGroup` for a divided row, or use `variant="muted" | "card"` for a
+ * standalone tile.
+ */
+function Stat({ className, variant, render, ...props }: StatProps) {
+  const defaultProps = {
+    className: cn(statVariants({ className, variant })),
+    "data-slot": "stat",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+/** The metric's caption, e.g. "Active members". */
+function StatLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("font-medium text-muted-foreground text-sm leading-none", className),
+    "data-slot": "stat-label",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+/**
+ * The headline number. Sans + tabular so digits stay aligned across a row;
+ * drop `font-sans` from `className` to render it in the serif display face.
+ */
+function StatValue({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "font-sans font-semibold text-2xl text-foreground leading-none tabular-nums tracking-tight",
+      className,
+    ),
+    "data-slot": "stat-value",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+/** Supporting copy under the value, e.g. "vs. 1,204 last month". */
+function StatDescription({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"p">) {
+  const defaultProps = {
+    className: cn("text-muted-foreground text-sm leading-snug", className),
+    "data-slot": "stat-description",
+  };
+
+  return useRender({
+    defaultTagName: "p",
+    props: mergeProps<"p">(defaultProps, props),
+    render,
+  });
+}
+
+const statTrendVariants = cva(
+  "inline-flex items-center gap-0.5 font-medium text-sm tabular-nums [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: { direction: "up" },
+    variants: {
+      direction: {
+        up: "text-success-foreground",
+        down: "text-destructive-foreground",
+        neutral: "text-muted-foreground",
+      },
+    },
+  },
+);
+
+interface StatTrendProps extends React.ComponentProps<"span"> {
+  direction?: VariantProps<typeof statTrendVariants>["direction"];
+  /** Show the directional arrow before the children. Defaults to `true`. */
+  showIcon?: boolean;
+}
+
+/**
+ * A small delta chip — e.g. "+12.5%". Picks an up/down arrow from `direction`
+ * and colors itself success/destructive/neutral.
+ */
+function StatTrend({
+  className,
+  direction = "up",
+  showIcon = true,
+  children,
+  ...props
+}: StatTrendProps) {
+  const Icon = direction === "down" ? TrendingDownIcon : TrendingUpIcon;
+  return (
+    <span
+      className={cn(statTrendVariants({ direction }), className)}
+      data-direction={direction}
+      data-slot="stat-trend"
+      {...props}
+    >
+      {showIcon && direction !== "neutral" ? <Icon /> : null}
+      {children}
+    </span>
+  );
+}
+
+/**
+ * Lays a set of bare `Stat`s out as a divided row (stacked on narrow screens),
+ * wrapped in a bordered card surface with even padding per metric.
+ */
+function StatGroup({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "grid auto-cols-fr grid-flow-row divide-y rounded-xl border bg-card not-dark:bg-clip-padding shadow-xs/5 sm:grid-flow-col sm:divide-x sm:divide-y-0 [&>[data-slot=stat]]:p-4",
+      className,
+    ),
+    "data-slot": "stat-group",
+    role: "list",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export {
+  Stat,
+  StatLabel,
+  StatValue,
+  StatDescription,
+  StatTrend,
+  StatGroup,
+  statVariants,
+  statTrendVariants,
+};

package/src/components/ui/stepper.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { CheckIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type Orientation = "horizontal" | "vertical";
+type StepState = "active" | "completed" | "inactive";
+
+const StepperContext = React.createContext<{
+  value: number;
+  orientation: Orientation;
+}>({ orientation: "horizontal", value: 1 });
+
+const StepperItemContext = React.createContext<{
+  step: number;
+  state: StepState;
+}>({ state: "inactive", step: 1 });
+
+function Stepper({
+  value = 1,
+  orientation = "horizontal",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  /** 1-based index of the active step. */
+  value?: number;
+  orientation?: Orientation;
+}) {
+  return (
+    <StepperContext.Provider value={{ orientation, value }}>
+      <div
+        className={cn(
+          "group/stepper flex w-full gap-2",
+          orientation === "vertical" ? "flex-col" : "items-center",
+          className,
+        )}
+        data-orientation={orientation}
+        data-slot="stepper"
+        {...props}
+      />
+    </StepperContext.Provider>
+  );
+}
+
+function StepperItem({
+  step,
+  completed,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { step: number; completed?: boolean }) {
+  const { value } = React.useContext(StepperContext);
+  const state: StepState =
+    completed || value > step
+      ? "completed"
+      : value === step
+        ? "active"
+        : "inactive";
+
+  return (
+    <StepperItemContext.Provider value={{ state, step }}>
+      <div
+        className={cn(
+          "group/step flex gap-2.5",
+          "group-data-[orientation=horizontal]/stepper:items-center group-data-[orientation=horizontal]/stepper:not-last:flex-1",
+          "group-data-[orientation=vertical]/stepper:flex-col",
+          className,
+        )}
+        data-slot="stepper-item"
+        data-state={state}
+        {...props}
+      />
+    </StepperItemContext.Provider>
+  );
+}
+
+function StepperTrigger({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={cn(
+        "flex items-center gap-2.5 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64",
+        className,
+      )}
+      data-slot="stepper-trigger"
+      type="button"
+      {...props}
+    />
+  );
+}
+
+function StepperIndicator({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  const { step } = React.useContext(StepperItemContext);
+  return (
+    <span
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full border border-transparent bg-muted font-medium text-muted-foreground text-sm transition-colors group-data-[state=active]/step:bg-primary group-data-[state=active]/step:text-primary-foreground group-data-[state=completed]/step:bg-primary group-data-[state=completed]/step:text-primary-foreground",
+        className,
+      )}
+      data-slot="stepper-indicator"
+      {...props}
+    >
+      <span className="group-data-[state=completed]/step:hidden">
+        {children ?? step}
+      </span>
+      <CheckIcon className="hidden size-4 group-data-[state=completed]/step:block" />
+    </span>
+  );
+}
+
+function StepperTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "font-medium text-sm transition-colors group-data-[state=inactive]/step:text-muted-foreground",
+        className,
+      )}
+      data-slot="stepper-title"
+      {...props}
+    />
+  );
+}
+
+function StepperDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-xs", className)}
+      data-slot="stepper-description"
+      {...props}
+    />
+  );
+}
+
+function StepperSeparator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "rounded-full bg-border transition-colors group-data-[state=completed]/step:bg-primary",
+        "group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:flex-1",
+        "group-data-[orientation=vertical]/stepper:ms-[calc(--spacing(4)-1px)] group-data-[orientation=vertical]/stepper:h-6 group-data-[orientation=vertical]/stepper:w-0.5",
+        className,
+      )}
+      data-slot="stepper-separator"
+      {...props}
+    />
+  );
+}
+
+export {
+  Stepper,
+  StepperItem,
+  StepperTrigger,
+  StepperIndicator,
+  StepperTitle,
+  StepperDescription,
+  StepperSeparator,
+};

package/src/components/ui/switch.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+import { cn } from "../../lib/utils/css";
+
+type SwitchProps = SwitchPrimitive.Root.Props & {
+  size?: "sm" | "md" | "lg";
+  slim?: boolean;
+};
+
+function Switch({ className, size = "md", slim = false, ...props }: SwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-full outline-none transition-[background-color,box-shadow] duration-200",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64",
+        size === "sm" && "[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3.5)]",
+        size === "md" && "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
+        size === "lg" && "[--thumb-size:--spacing(6)] sm:[--thumb-size:--spacing(5)]",
+        "w-[calc(var(--thumb-size)*2-2px)]",
+        !slim && "h-[calc(var(--thumb-size)+2px)] p-px",
+        slim && "relative h-[calc(var(--thumb-size)*0.4)] overflow-visible p-0",
+        className,
+      )}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          "pointer-events-none block aspect-square bg-background shadow-sm/5 will-change-transform",
+          "[transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]",
+          !slim && [
+            "h-full origin-left",
+            "in-[[role=switch]:active,[data-slot=label]:active]:not-data-disabled:scale-x-110",
+            "in-[[role=switch]:active,[data-slot=label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)]",
+            "rounded-(--thumb-size)",
+            "data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
+          ],
+          slim && [
+            "absolute top-1/2 -translate-y-1/2",
+            "h-[var(--thumb-size)] w-[var(--thumb-size)]",
+            "rounded-full origin-left",
+            "in-[[role=switch]:active,[data-slot=label]:active]:not-data-disabled:scale-x-110",
+            "in-[[role=switch]:active,[data-slot=label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)]",
+            "data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-2px)]",
+          ],
+        )}
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/ui/table.tsx

@@ -0,0 +1,126 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      className="relative w-full overflow-x-auto"
+      data-slot="table-container"
+    >
+      <table
+        className={cn(
+          "w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0 text-sm",
+          className,
+        )}
+        data-slot="table"
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      className={cn(
+        "[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent",
+        className,
+      )}
+      data-slot="table-header"
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      className={cn(
+        "relative in-data-[slot=frame]:rounded-xl in-data-[slot=frame]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[slot=frame]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-background in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-transparent in-data-[slot=frame]:*:[tr]:data-[state=selected]:*:[td]:bg-muted/72",
+        className,
+      )}
+      data-slot="table-body"
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      className={cn(
+        "border-t in-data-[slot=frame]:border-none bg-muted/72 in-data-[slot=frame]:bg-transparent font-medium [&>tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent",
+        className,
+      )}
+      data-slot="table-footer"
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      className={cn(
+        "border-b transition-colors hover:bg-muted/72 in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted/72 in-data-[slot=frame]:data-[state=selected]:bg-transparent",
+        className,
+      )}
+      data-slot="table-row"
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      className={cn(
+        "h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0",
+        className,
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      className={cn(
+        "whitespace-nowrap p-2.5 align-middle leading-none in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0",
+        className,
+      )}
+      data-slot="table-cell"
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      className={cn(
+        "in-data-[slot=frame]:my-4 mt-4 text-muted-foreground text-sm",
+        className,
+      )}
+      data-slot="table-caption"
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/src/components/ui/tabs.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+
+import { cn } from "../../lib/utils/css";
+
+type TabsVariant = "default" | "underline";
+
+function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      className={cn(
+        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
+        className,
+      )}
+      data-slot="tabs"
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  variant = "default",
+  className,
+  children,
+  ...props
+}: TabsPrimitive.List.Props & {
+  variant?: TabsVariant;
+}) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground",
+        "data-[orientation=vertical]:flex-col",
+        variant === "default"
+          ? "rounded-lg bg-muted p-0.5 text-muted-foreground/72"
+          : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
+        className,
+      )}
+      data-slot="tabs-list"
+      {...props}
+    >
+      {children}
+      <TabsPrimitive.Indicator
+        className={cn(
+          "-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out",
+          variant === "underline"
+            ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px"
+            : "-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input",
+        )}
+        data-slot="tab-indicator"
+      />
+    </TabsPrimitive.List>
+  );
+}
+
+function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      className={cn(
+        "[&_svg]:-mx-0.5 relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="tabs-tab"
+      {...props}
+    />
+  );
+}
+
+function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      className={cn(
+        "flex-1 outline-none data-[activation-direction=down]:animate-in data-[activation-direction=left]:animate-in data-[activation-direction=right]:animate-in data-[activation-direction=up]:animate-in fade-in-0 duration-200 ease-out data-[activation-direction=down]:slide-in-from-bottom-1 data-[activation-direction=left]:slide-in-from-left-1 data-[activation-direction=right]:slide-in-from-right-1 data-[activation-direction=up]:slide-in-from-top-1",
+        className,
+      )}
+      data-slot="tabs-content"
+      {...props}
+    />
+  );
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTab,
+  TabsTab as TabsTrigger,
+  TabsPanel,
+  TabsPanel as TabsContent,
+};