@cntyclub/ui-react 0.1.0

package/src/components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "../../lib/utils/css";
+
+function Drawer(props: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger(
+  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,
+) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal(
+  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,
+) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose(props: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      data-slot="drawer-overlay"
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[82vh] data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[82vh] data-[vaul-drawer-direction=top]:rounded-b-2xl data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[calc(100%-(--spacing(12)))] data-[vaul-drawer-direction=right]:max-w-md data-[vaul-drawer-direction=right]:border-s",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-[calc(100%-(--spacing(12)))] data-[vaul-drawer-direction=left]:max-w-md data-[vaul-drawer-direction=left]:border-e",
+          className,
+        )}
+        data-slot="drawer-content"
+        {...props}
+      >
+        {/* Grab handle — shown for bottom/top drawers. */}
+        <div className="mx-auto mt-3 hidden h-1.5 w-12 shrink-0 rounded-full bg-border group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1.5 p-6 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center md:group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left",
+        className,
+      )}
+      data-slot="drawer-header"
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "mt-auto flex flex-col gap-2 border-t bg-muted/72 px-6 py-4",
+        className,
+      )}
+      data-slot="drawer-footer"
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn("font-semibold text-xl leading-none", className)}
+      data-slot="drawer-title"
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="drawer-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/ui/empty.tsx

@@ -0,0 +1,127 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils/css";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance p-6 text-center md:p-12",
+        className,
+      )}
+      data-slot="empty"
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex max-w-sm flex-col items-center text-center",
+        className,
+      )}
+      data-slot="empty-header"
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5",
+      },
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      className={cn("relative mb-6", className)}
+      data-slot="empty-media"
+      data-variant={variant}
+      {...props}
+    >
+      {variant === "icon" && (
+        <>
+          <div
+            aria-hidden="true"
+            className={cn(
+              emptyMediaVariants({ className, variant }),
+              "-translate-x-0.5 -rotate-10 pointer-events-none absolute bottom-px origin-bottom-left scale-84 shadow-none",
+            )}
+          />
+          <div
+            aria-hidden="true"
+            className={cn(
+              emptyMediaVariants({ className, variant }),
+              "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none",
+            )}
+          />
+        </>
+      )}
+      <div
+        className={cn(emptyMediaVariants({ className, variant }))}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-heading font-semibold text-xl", className)}
+      data-slot="empty-title"
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      className={cn(
+        "text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1",
+        className,
+      )}
+      data-slot="empty-description"
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className,
+      )}
+      data-slot="empty-content"
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};

package/src/components/ui/featured-icon.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const featuredIconVariants = cva(
+  "relative inline-flex shrink-0 select-none items-center justify-center align-middle [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    compoundVariants: [
+      // The bordered themes are squared, with corners that scale with the size.
+      {
+        className: "rounded-md before:rounded-[calc(var(--radius-md)-3px)]",
+        size: "sm",
+        theme: ["modern", "modern-neue"],
+      },
+      {
+        className: "rounded-lg before:rounded-[calc(var(--radius-lg)-3px)]",
+        size: "md",
+        theme: ["modern", "modern-neue"],
+      },
+      {
+        className: "rounded-[10px] before:rounded-[7px]",
+        size: "lg",
+        theme: ["modern", "modern-neue"],
+      },
+      {
+        className: "rounded-xl before:rounded-[calc(var(--radius-xl)-3px)]",
+        size: "xl",
+        theme: ["modern", "modern-neue"],
+      },
+    ],
+    defaultVariants: { color: "brand", size: "md", theme: "light" },
+    variants: {
+      // Colors are applied through the theme/color maps below — the variant
+      // exists so cva carries the prop type.
+      color: { brand: "", error: "", gray: "", success: "", warning: "" },
+      size: {
+        sm: "size-8 [&_svg:not([class*='size-'])]:size-4",
+        md: "size-10 [&_svg:not([class*='size-'])]:size-5",
+        lg: "size-12 [&_svg:not([class*='size-'])]:size-6",
+        xl: "size-14 [&_svg:not([class*='size-'])]:size-7",
+      },
+      theme: {
+        dark: "rounded-full text-white shadow-xs not-dark:inset-shadow-[0_1px_--theme(--color-white/16%)]",
+        gradient:
+          "rounded-full bg-linear-to-b from-white/24 to-white/0 text-white shadow-xs inset-shadow-[0_1px_--theme(--color-white/24%)]",
+        light: "rounded-full",
+        modern:
+          "border border-input bg-background shadow-xs not-dark:bg-clip-padding dark:bg-input/32",
+        "modern-neue":
+          "border border-input bg-background shadow-xs not-dark:bg-clip-padding dark:bg-input/32 before:pointer-events-none before:absolute before:inset-[3px] before:border before:border-border/72 before:shadow-xs",
+        outline:
+          "rounded-full before:pointer-events-none before:absolute before:inset-0 before:rounded-full before:border-2 before:border-current before:opacity-12 after:pointer-events-none after:absolute after:inset-[15%] after:rounded-full after:border-2 after:border-current after:opacity-32",
+      },
+    },
+  },
+);
+
+type FeaturedIconTheme = NonNullable<
+  VariantProps<typeof featuredIconVariants>["theme"]
+>;
+type FeaturedIconColor = NonNullable<
+  VariantProps<typeof featuredIconVariants>["color"]
+>;
+
+/** Per-theme color treatments, using the design-system tonal/solid tokens. */
+const featuredIconColors: Record<
+  FeaturedIconTheme,
+  Record<FeaturedIconColor, string>
+> = {
+  dark: {
+    brand: "bg-brand",
+    error: "bg-destructive",
+    gray: "bg-secondary-foreground text-background",
+    success: "bg-success",
+    warning: "bg-warning",
+  },
+  gradient: {
+    brand: "bg-brand",
+    error: "bg-destructive",
+    gray: "bg-secondary-foreground text-background",
+    success: "bg-success",
+    warning: "bg-warning",
+  },
+  light: {
+    brand: "bg-brand/12 text-sidebar-primary dark:bg-brand/20",
+    error: "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+    gray: "bg-secondary text-secondary-foreground",
+    success: "bg-success/8 text-success-foreground dark:bg-success/16",
+    warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+  },
+  modern: {
+    brand: "text-sidebar-primary",
+    error: "text-destructive-foreground",
+    gray: "text-foreground",
+    success: "text-success-foreground",
+    warning: "text-warning-foreground",
+  },
+  "modern-neue": {
+    brand: "text-sidebar-primary",
+    error: "text-destructive-foreground",
+    gray: "text-foreground",
+    success: "text-success-foreground",
+    warning: "text-warning-foreground",
+  },
+  outline: {
+    brand: "text-sidebar-primary",
+    error: "text-destructive-foreground",
+    gray: "text-muted-foreground",
+    success: "text-success-foreground",
+    warning: "text-warning-foreground",
+  },
+};
+
+interface FeaturedIconProps extends Omit<React.ComponentProps<"span">, "color"> {
+  theme?: FeaturedIconTheme;
+  color?: FeaturedIconColor;
+  size?: VariantProps<typeof featuredIconVariants>["size"];
+  /** Icon component rendered inside (e.g. a lucide icon). Or pass children. */
+  icon?: React.ElementType;
+}
+
+function FeaturedIcon({
+  className,
+  theme = "light",
+  color = "brand",
+  size,
+  icon: Icon,
+  children,
+  ...props
+}: FeaturedIconProps) {
+  return (
+    <span
+      className={cn(
+        featuredIconVariants({ color, size, theme }),
+        featuredIconColors[theme][color],
+        className,
+      )}
+      data-slot="featured-icon"
+      {...props}
+    >
+      {children ?? (Icon ? <Icon /> : null)}
+    </span>
+  );
+}
+
+export { FeaturedIcon, featuredIconVariants };

package/src/components/ui/field.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+
+import { cn } from "../../lib/utils/css";
+
+function Field({ className, ...props }: FieldPrimitive.Root.Props) {
+  return (
+    <FieldPrimitive.Root
+      className={cn("flex flex-col items-start gap-2", className)}
+      data-slot="field"
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
+  return (
+    <FieldPrimitive.Label
+      className={cn(
+        "inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
+  return (
+    <FieldPrimitive.Item
+      className={cn("flex", className)}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}: FieldPrimitive.Description.Props) {
+  return (
+    <FieldPrimitive.Description
+      className={cn("text-muted-foreground text-xs", className)}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+function FieldError({ className, ...props }: FieldPrimitive.Error.Props) {
+  return (
+    <FieldPrimitive.Error
+      className={cn("text-destructive-foreground text-xs", className)}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const FieldControl = FieldPrimitive.Control;
+const FieldValidity = FieldPrimitive.Validity;
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldControl,
+  FieldItem,
+  FieldValidity,
+  FieldGroup,
+};

package/src/components/ui/fieldset.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset";
+
+import { cn } from "../../lib/utils/css";
+
+function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
+  return (
+    <FieldsetPrimitive.Root
+      className={cn("flex w-full max-w-64 flex-col gap-6", className)}
+      data-slot="fieldset"
+      {...props}
+    />
+  );
+}
+function FieldsetLegend({
+  className,
+  ...props
+}: FieldsetPrimitive.Legend.Props) {
+  return (
+    <FieldsetPrimitive.Legend
+      className={cn("font-semibold text-foreground", className)}
+      data-slot="fieldset-legend"
+      {...props}
+    />
+  );
+}
+
+export { Fieldset, FieldsetLegend };

package/src/components/ui/form.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Form as FormPrimitive } from "@base-ui/react/form";
+
+import { cn } from "../../lib/utils/css";
+
+function Form({ className, ...props }: FormPrimitive.Props) {
+  return (
+    <FormPrimitive
+      className={cn("flex w-full flex-col gap-4", className)}
+      data-slot="form"
+      {...props}
+    />
+  );
+}
+
+export { Form };

package/src/components/ui/frame.tsx

@@ -0,0 +1,82 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Frame({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col rounded-2xl bg-muted/72 p-1",
+        "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
+        className,
+      )}
+      data-slot="frame"
+      {...props}
+    />
+  );
+}
+
+function FramePanel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        className,
+      )}
+      data-slot="frame-panel"
+      {...props}
+    />
+  );
+}
+
+function FrameHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      className={cn("flex flex-col px-5 py-4", className)}
+      data-slot="frame-panel-header"
+      {...props}
+    />
+  );
+}
+
+function FrameTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-semibold text-sm", className)}
+      data-slot="frame-panel-title"
+      {...props}
+    />
+  );
+}
+
+function FrameDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="frame-panel-description"
+      {...props}
+    />
+  );
+}
+
+function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) {
+  return (
+    <footer
+      className={cn("px-5 py-4", className)}
+      data-slot="frame-panel-footer"
+      {...props}
+    />
+  );
+}
+
+export {
+  Frame,
+  FramePanel,
+  FrameHeader,
+  FrameTitle,
+  FrameDescription,
+  FrameFooter,
+};