@cntyclub/ui-react 0.1.0

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,23 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function AspectRatio({
+  ratio = 1,
+  className,
+  style,
+  ...props
+}: React.ComponentProps<"div"> & {
+  ratio?: number;
+}) {
+  return (
+    <div
+      className={cn("relative w-full overflow-hidden", className)}
+      data-slot="aspect-ratio"
+      style={{ aspectRatio: ratio, ...style }}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };

package/src/components/ui/autocomplete.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
+import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import { Input } from "./input";
+import { ScrollArea } from "./scroll-area";
+import { cn } from "../../lib/utils/css";
+
+const Autocomplete = AutocompletePrimitive.Root;
+
+function AutocompleteInput({
+  className,
+  showTrigger = false,
+  showClear = false,
+  startAddon,
+  size,
+  ...props
+}: Omit<AutocompletePrimitive.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React.ReactNode;
+  size?: "sm" | "default" | "lg" | number;
+  ref?: React.Ref<HTMLInputElement>;
+}) {
+  const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number;
+
+  return (
+    <div className="relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64">
+      {startAddon && (
+        <div
+          aria-hidden="true"
+          className="[&_svg]:-mx-0.5 pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4"
+          data-slot="autocomplete-start-addon"
+        >
+          {startAddon}
+        </div>
+      )}
+      <AutocompletePrimitive.Input
+        className={cn(
+          startAddon &&
+            "data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]",
+          sizeValue === "sm"
+            ? "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5"
+            : "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7",
+          className,
+        )}
+        data-slot="autocomplete-input"
+        render={<Input nativeInput size={sizeValue} />}
+        {...props}
+      />
+      {showTrigger && (
+        <AutocompleteTrigger
+          className={cn(
+            "-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+            sizeValue === "sm" ? "end-0" : "end-0.5",
+          )}
+        >
+          <ChevronsUpDownIcon />
+        </AutocompleteTrigger>
+      )}
+      {showClear && (
+        <AutocompleteClear
+          className={cn(
+            "-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+            sizeValue === "sm" ? "end-0" : "end-0.5",
+          )}
+        >
+          <XIcon />
+        </AutocompleteClear>
+      )}
+    </div>
+  );
+}
+
+function AutocompletePopup({
+  className,
+  children,
+  sideOffset = 4,
+  ...props
+}: AutocompletePrimitive.Popup.Props & {
+  sideOffset?: number;
+}) {
+  return (
+    <AutocompletePrimitive.Portal>
+      <AutocompletePrimitive.Positioner
+        className="z-50 select-none"
+        data-slot="autocomplete-positioner"
+        sideOffset={sideOffset}
+      >
+        <AutocompletePrimitive.Popup
+          className={cn(
+            "relative flex max-h-[min(var(--available-height),23rem)] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-col rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5 transition-opacity duration-150 ease-out before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="autocomplete-popup"
+          {...props}
+        >
+          {children}
+        </AutocompletePrimitive.Popup>
+      </AutocompletePrimitive.Positioner>
+    </AutocompletePrimitive.Portal>
+  );
+}
+
+function AutocompleteItem({
+  className,
+  children,
+  ...props
+}: AutocompletePrimitive.Item.Props) {
+  return (
+    <AutocompletePrimitive.Item
+      className={cn(
+        "flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm",
+        className,
+      )}
+      data-slot="autocomplete-item"
+      {...props}
+    >
+      {children}
+    </AutocompletePrimitive.Item>
+  );
+}
+
+function AutocompleteSeparator({
+  className,
+  ...props
+}: AutocompletePrimitive.Separator.Props) {
+  return (
+    <AutocompletePrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border last:hidden", className)}
+      data-slot="autocomplete-separator"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteGroup({
+  className,
+  ...props
+}: AutocompletePrimitive.Group.Props) {
+  return (
+    <AutocompletePrimitive.Group
+      className={cn("[[role=group]+&]:mt-1.5", className)}
+      data-slot="autocomplete-group"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteGroupLabel({
+  className,
+  ...props
+}: AutocompletePrimitive.GroupLabel.Props) {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 font-medium text-muted-foreground text-xs",
+        className,
+      )}
+      data-slot="autocomplete-group-label"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteEmpty({
+  className,
+  ...props
+}: AutocompletePrimitive.Empty.Props) {
+  return (
+    <AutocompletePrimitive.Empty
+      className={cn(
+        "not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm",
+        className,
+      )}
+      data-slot="autocomplete-empty"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteRow({
+  className,
+  ...props
+}: AutocompletePrimitive.Row.Props) {
+  return (
+    <AutocompletePrimitive.Row
+      className={className}
+      data-slot="autocomplete-row"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {
+  return (
+    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
+  );
+}
+
+function AutocompleteList({
+  className,
+  ...props
+}: AutocompletePrimitive.List.Props) {
+  return (
+    <ScrollArea scrollbarGutter scrollFade className="grow">
+      <AutocompletePrimitive.List
+        className={cn(
+          "not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3",
+          className,
+        )}
+        data-slot="autocomplete-list"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+function AutocompleteClear({
+  className,
+  ...props
+}: AutocompletePrimitive.Clear.Props) {
+  return (
+    <AutocompletePrimitive.Clear
+      className={cn(
+        "-translate-y-1/2 absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="autocomplete-clear"
+      {...props}
+    >
+      <XIcon />
+    </AutocompletePrimitive.Clear>
+  );
+}
+
+function AutocompleteStatus({
+  className,
+  ...props
+}: AutocompletePrimitive.Status.Props) {
+  return (
+    <AutocompletePrimitive.Status
+      className={cn(
+        "px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",
+        className,
+      )}
+      data-slot="autocomplete-status"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteCollection({
+  ...props
+}: AutocompletePrimitive.Collection.Props) {
+  return (
+    <AutocompletePrimitive.Collection
+      data-slot="autocomplete-collection"
+      {...props}
+    />
+  );
+}
+
+function AutocompleteTrigger({
+  className,
+  ...props
+}: AutocompletePrimitive.Trigger.Props) {
+  return (
+    <AutocompletePrimitive.Trigger
+      className={className}
+      data-slot="autocomplete-trigger"
+      {...props}
+    />
+  );
+}
+
+const useAutocompleteFilter = AutocompletePrimitive.useFilter;
+
+export {
+  Autocomplete,
+  AutocompleteInput,
+  AutocompleteTrigger,
+  AutocompletePopup,
+  AutocompleteItem,
+  AutocompleteSeparator,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteValue,
+  AutocompleteList,
+  AutocompleteClear,
+  AutocompleteStatus,
+  AutocompleteRow,
+  AutocompleteCollection,
+  useAutocompleteFilter,
+};

package/src/components/ui/avatar-group.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Avatar, avatarVariants } from "./avatar";
+
+type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+
+const avatarGroupVariants = cva(
+  // Each child gets a ring in the page color so overlapping avatars stay
+  // visually separated; hover lifts one to the front.
+  "isolate flex items-center *:relative *:rounded-full *:ring-2 *:ring-background *:transition-transform hover:*:z-10",
+  {
+    defaultVariants: { overlap: "md" },
+    variants: {
+      overlap: {
+        sm: "*:not-first:-ml-1.5",
+        md: "*:not-first:-ml-2.5",
+        lg: "*:not-first:-ml-3.5",
+      },
+    },
+  },
+);
+
+interface AvatarGroupItem {
+  src?: string;
+  /** Initials shown when there is no image. */
+  initials?: React.ReactNode;
+  alt?: string;
+}
+
+interface AvatarGroupProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof avatarGroupVariants> {
+  /** Data-driven avatars. Omit to compose `<Avatar>` children yourself. */
+  items?: AvatarGroupItem[];
+  /** Cap the visible avatars; the rest collapse into a "+N" chip. */
+  max?: number;
+  size?: AvatarSize;
+}
+
+/**
+ * A row of overlapping avatars with an overflow "+N" chip. Pass `items` for the
+ * data-driven path, or compose `<Avatar>` children directly for full control.
+ */
+function AvatarGroup({
+  className,
+  items,
+  max,
+  size = "sm",
+  overlap,
+  children,
+  ...props
+}: AvatarGroupProps) {
+  const shown = items && max ? items.slice(0, max) : items;
+  const overflow = items && max ? items.length - max : 0;
+
+  return (
+    <div
+      className={cn(avatarGroupVariants({ overlap }), className)}
+      data-slot="avatar-group"
+      role="group"
+      {...props}
+    >
+      {items
+        ? shown?.map((item, i) => (
+            <Avatar
+              alt={item.alt}
+              // biome-ignore lint/suspicious/noArrayIndexKey: order is stable
+              key={i}
+              initials={item.initials}
+              size={size}
+              src={item.src}
+            />
+          ))
+        : children}
+      {overflow > 0 ? (
+        <span
+          aria-label={`${overflow} more`}
+          className={cn(
+            avatarVariants({ size }),
+            "bg-muted font-medium text-muted-foreground",
+          )}
+          data-slot="avatar-group-overflow"
+        >
+          +{overflow}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export { AvatarGroup, avatarGroupVariants };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckIcon, PlusIcon, UserRoundIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted align-middle font-medium",
+  {
+    defaultVariants: { size: "sm" },
+    variants: {
+      size: {
+        xs: "size-6 text-[0.625rem]",
+        sm: "size-8 text-xs",
+        md: "size-10 text-sm",
+        lg: "size-12 text-base",
+        xl: "size-14 text-lg",
+        "2xl": "size-16 text-xl",
+      },
+    },
+  },
+);
+
+type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+
+interface AvatarProps
+  extends AvatarPrimitive.Root.Props,
+    VariantProps<typeof avatarVariants> {
+  /** Image URL. When omitted or it fails to load, the fallback is shown. */
+  src?: string;
+  alt?: string;
+  /** Initials shown when there is no image. */
+  initials?: React.ReactNode;
+  /** Custom fallback node (overrides initials and the placeholder icon). */
+  placeholder?: React.ReactNode;
+  /** Icon component used as the fallback when nothing else is provided. */
+  placeholderIcon?: React.ElementType;
+  /** A presence dot in the bottom-right corner. */
+  status?: "online" | "offline";
+  /** Shows a verified tick in the bottom-right corner. */
+  verified?: boolean;
+  /** A node (e.g. <AvatarCompanyIcon />) shown in the top-right corner. */
+  badge?: React.ReactNode;
+}
+
+function Avatar({
+  className,
+  size,
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon = UserRoundIcon,
+  status,
+  verified,
+  badge,
+  children,
+  ...props
+}: AvatarProps) {
+  const fallback = initials ? (
+    initials
+  ) : (
+    (placeholder ?? <PlaceholderIcon className="size-[55%] text-muted-foreground" />)
+  );
+
+  const root = (
+    <AvatarPrimitive.Root
+      className={cn(avatarVariants({ size }), className)}
+      data-slot="avatar"
+      {...props}
+    >
+      {children ?? (
+        <>
+          {src ? <AvatarImage alt={alt} src={src} /> : null}
+          <AvatarFallback>{fallback}</AvatarFallback>
+        </>
+      )}
+    </AvatarPrimitive.Root>
+  );
+
+  if (!(status || verified || badge)) return root;
+
+  // Overlays live in a non-clipping wrapper so the rounded avatar's
+  // overflow-hidden doesn't cut them off at the corners.
+  return (
+    <span
+      className="relative inline-flex shrink-0 align-middle"
+      data-slot="avatar-root"
+    >
+      {root}
+      {badge ? (
+        <span className="absolute end-0 top-0 flex" data-slot="avatar-badge">
+          {badge}
+        </span>
+      ) : null}
+      {status ? (
+        <span
+          className="absolute end-[6%] bottom-[6%] h-1/4 w-1/4 rounded-full ring-2 ring-background data-[status=offline]:bg-muted-foreground/40 data-[status=online]:bg-success"
+          data-slot="avatar-status"
+          data-status={status}
+        />
+      ) : null}
+      {verified ? (
+        <span
+          className="absolute end-0 bottom-0 flex h-1/3 w-1/3 items-center justify-center rounded-full bg-brand text-background ring-2 ring-background"
+          data-slot="avatar-verified"
+        >
+          <CheckIcon className="size-2/3" strokeWidth={3} />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("size-full object-cover", className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground",
+        className,
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  );
+}
+
+/** A small company/brand logo badge, meant for the Avatar `badge` prop. */
+function AvatarCompanyIcon({
+  className,
+  size = "md",
+  alt,
+  ...props
+}: React.ComponentProps<"img"> & { size?: "sm" | "md" | "lg" }) {
+  const sizes = { lg: "size-5", md: "size-4", sm: "size-3.5" } as const;
+  return (
+    // biome-ignore lint/a11y/useAltText: alt forwarded via props
+    <img
+      alt={alt}
+      className={cn(
+        "rounded-[4px] object-cover ring-2 ring-background",
+        sizes[size],
+        className,
+      )}
+      data-slot="avatar-company-icon"
+      {...props}
+    />
+  );
+}
+
+/** A dashed "add" button sized to match avatars — for avatar groups. */
+function AvatarAddButton({
+  className,
+  size = "sm",
+  ...props
+}: React.ComponentProps<"button"> & { size?: AvatarSize }) {
+  return (
+    <button
+      className={cn(
+        avatarVariants({ size }),
+        "border border-input border-dashed bg-transparent text-muted-foreground outline-none transition-colors hover:border-transparent hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className,
+      )}
+      data-slot="avatar-add-button"
+      type="button"
+      {...props}
+    >
+      <PlusIcon className="size-1/2" />
+    </button>
+  );
+}
+
+const labelGroupText = {
+  lg: { subtitle: "text-sm", title: "text-base" },
+  md: { subtitle: "text-sm", title: "text-sm" },
+  sm: { subtitle: "text-xs", title: "text-sm" },
+} as const;
+
+/** An avatar paired with a title and subtitle. */
+function AvatarLabelGroup({
+  className,
+  size = "md",
+  src,
+  alt,
+  initials,
+  status,
+  verified,
+  title,
+  subtitle,
+  ...props
+}: React.ComponentProps<"div"> & {
+  size?: "sm" | "md" | "lg";
+  src?: string;
+  alt?: string;
+  initials?: string;
+  status?: "online" | "offline";
+  verified?: boolean;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn("flex items-center gap-3", className)}
+      data-slot="avatar-label-group"
+      {...props}
+    >
+      <Avatar
+        alt={alt}
+        initials={initials}
+        size={size}
+        src={src}
+        status={status}
+        verified={verified}
+      />
+      <div className="flex min-w-0 flex-col">
+        <span
+          className={cn(
+            "truncate font-medium text-foreground leading-tight",
+            labelGroupText[size].title,
+          )}
+        >
+          {title}
+        </span>
+        {subtitle ? (
+          <span
+            className={cn(
+              "truncate text-muted-foreground leading-tight",
+              labelGroupText[size].subtitle,
+            )}
+          >
+            {subtitle}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+const profilePhotoSizes = { lg: "size-20", md: "size-16", sm: "size-14" } as const;
+
+/** A larger, framed profile photo with optional verified tick. */
+function AvatarProfilePhoto({
+  className,
+  size = "md",
+  ...props
+}: Omit<AvatarProps, "size"> & { size?: "sm" | "md" | "lg" }) {
+  return (
+    <Avatar
+      className={cn(
+        "ring-1 ring-black/8 ring-inset dark:ring-white/12",
+        profilePhotoSizes[size],
+        className,
+      )}
+      data-slot="avatar-profile-photo"
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarCompanyIcon,
+  AvatarAddButton,
+  AvatarLabelGroup,
+  AvatarProfilePhoto,
+  avatarVariants,
+};