@cntyclub/ui-react 0.1.0

package/src/components/ui/menubar.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import {
+  Menubar as MenubarPrimitive,
+  type MenubarProps,
+} from "@base-ui/react/menubar";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import {
+  Menu,
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuPopup,
+  MenuPortal,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubPopup,
+  MenuSubTrigger,
+} from "./menu";
+
+function Menubar({ className, ...props }: MenubarProps) {
+  return (
+    <MenubarPrimitive
+      className={cn(
+        "flex h-9 w-fit items-center gap-1 rounded-lg border bg-background p-1 shadow-xs/5 sm:h-8 dark:bg-input/32",
+        className,
+      )}
+      data-slot="menubar"
+      {...props}
+    />
+  );
+}
+
+function MenubarMenu(props: MenuPrimitive.Root.Props) {
+  return <Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: MenuPrimitive.Trigger.Props) {
+  return (
+    <MenuPrimitive.Trigger
+      className={cn(
+        "flex select-none items-center rounded-md px-2 py-1 font-medium text-base outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-popup-open:bg-accent data-popup-open:text-accent-foreground sm:text-sm",
+        className,
+      )}
+      data-slot="menubar-trigger"
+      {...props}
+    />
+  );
+}
+
+function MenubarContent({
+  align = "start",
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenuPopup>) {
+  return (
+    <MenuPopup
+      align={align}
+      data-slot="menubar-content"
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenuPortal as MenubarPortal,
+  MenuGroup as MenubarGroup,
+  MenuItem as MenubarItem,
+  MenuCheckboxItem as MenubarCheckboxItem,
+  MenuRadioGroup as MenubarRadioGroup,
+  MenuRadioItem as MenubarRadioItem,
+  MenuGroupLabel as MenubarLabel,
+  MenuSeparator as MenubarSeparator,
+  MenuShortcut as MenubarShortcut,
+  MenuSub as MenubarSub,
+  MenuSubTrigger as MenubarSubTrigger,
+  MenuSubPopup as MenubarSubContent,
+};

package/src/components/ui/meter.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Meter as MeterPrimitive } from "@base-ui/react/meter";
+
+import { cn } from "../../lib/utils/css";
+
+function Meter({ className, children, ...props }: MeterPrimitive.Root.Props) {
+  return (
+    <MeterPrimitive.Root
+      className={cn("flex w-full flex-col gap-2", className)}
+      {...props}
+    >
+      {children ? (
+        children
+      ) : (
+        <MeterTrack>
+          <MeterIndicator />
+        </MeterTrack>
+      )}
+    </MeterPrimitive.Root>
+  );
+}
+
+function MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {
+  return (
+    <MeterPrimitive.Label
+      className={cn("font-medium text-foreground text-sm", className)}
+      data-slot="meter-label"
+      {...props}
+    />
+  );
+}
+
+function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {
+  return (
+    <MeterPrimitive.Track
+      className={cn("block h-2 w-full overflow-hidden bg-input", className)}
+      data-slot="meter-track"
+      {...props}
+    />
+  );
+}
+
+function MeterIndicator({
+  className,
+  ...props
+}: MeterPrimitive.Indicator.Props) {
+  return (
+    <MeterPrimitive.Indicator
+      className={cn("bg-primary transition-all duration-500", className)}
+      data-slot="meter-indicator"
+      {...props}
+    />
+  );
+}
+
+function MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {
+  return (
+    <MeterPrimitive.Value
+      className={cn("text-foreground text-sm tabular-nums", className)}
+      data-slot="meter-value"
+      {...props}
+    />
+  );
+}
+
+export { Meter, MeterLabel, MeterTrack, MeterIndicator, MeterValue };

package/src/components/ui/multi-select.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { ChevronsUpDownIcon, SearchIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Button } from "./button";
+
+interface MultiSelectItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface MultiSelectProps {
+  items: MultiSelectItem[];
+  /** Controlled selected values. */
+  value?: string[];
+  /** Uncontrolled initial selected values. */
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  size?: "sm" | "default" | "lg";
+  placeholder?: React.ReactNode;
+  /** Extra context rendered next to the selected count, e.g. "of 12 users". */
+  supportingText?: React.ReactNode;
+  /** Formats the trigger text from the selected count. Defaults to `${count} selected`. */
+  selectedCountFormatter?: (count: number) => React.ReactNode;
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  showFooter?: boolean;
+  selectAllLabel?: React.ReactNode;
+  resetLabel?: React.ReactNode;
+  emptyStateTitle?: React.ReactNode;
+  emptyStateDescription?: React.ReactNode;
+  disabled?: boolean;
+  name?: string;
+  required?: boolean;
+  id?: string;
+  /** Trigger class name. */
+  className?: string;
+  popupClassName?: string;
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"];
+}
+
+function MultiSelect({
+  items,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "default",
+  placeholder = "Select options",
+  supportingText,
+  selectedCountFormatter = (count) => `${count} selected`,
+  showSearch = true,
+  searchPlaceholder = "Search",
+  showFooter = true,
+  selectAllLabel = "Select all",
+  resetLabel = "Reset",
+  emptyStateTitle = "No results found",
+  emptyStateDescription,
+  disabled,
+  name,
+  required,
+  id,
+  className,
+  popupClassName,
+  sideOffset = 4,
+}: MultiSelectProps) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<string[]>(
+    defaultValue ?? [],
+  );
+  const [search, setSearch] = React.useState("");
+
+  const isControlled = valueProp !== undefined;
+  const value = isControlled ? valueProp : uncontrolledValue;
+
+  const setValue = (next: string[]) => {
+    if (!isControlled) {
+      setUncontrolledValue(next);
+    }
+    onValueChange?.(next);
+  };
+
+  const query = search.trim().toLowerCase();
+  const filteredItems = query
+    ? items.filter((item) => item.label.toLowerCase().includes(query))
+    : items;
+
+  const count = value.length;
+
+  return (
+    <SelectPrimitive.Root
+      disabled={disabled}
+      multiple
+      name={name}
+      onOpenChange={(open) => {
+        if (!open) {
+          setSearch("");
+        }
+      }}
+      onValueChange={(next) => setValue(next as string[])}
+      required={required}
+      value={value}
+    >
+      <SelectPrimitive.Trigger
+        className={cn(
+          "relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-center gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none",
+          size === "sm" &&
+            "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+          size === "lg" && "min-h-10 sm:min-h-9",
+          className,
+        )}
+        data-slot="multi-select-trigger"
+        id={id}
+      >
+        <span className="flex flex-1 items-baseline gap-1.5 truncate">
+          {count > 0 ? (
+            <>
+              <span className="truncate">{selectedCountFormatter(count)}</span>
+              {supportingText ? (
+                <span className="truncate font-normal text-muted-foreground">
+                  {supportingText}
+                </span>
+              ) : null}
+            </>
+          ) : (
+            <span className="truncate text-muted-foreground">
+              {placeholder}
+            </span>
+          )}
+        </span>
+        <SelectPrimitive.Icon data-slot="multi-select-icon">
+          <ChevronsUpDownIcon className="-me-1 size-4.5 opacity-80 sm:size-4" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Positioner
+          alignItemWithTrigger={false}
+          className="z-50 select-none"
+          data-slot="multi-select-positioner"
+          sideOffset={sideOffset}
+        >
+          <SelectPrimitive.Popup
+            className={cn(
+              "relative flex max-h-[min(var(--available-height),20rem)] w-(--anchor-width) min-w-48 max-w-(--available-width) origin-(--transform-origin) flex-col overflow-hidden rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5 transition-[transform,scale,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:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+              popupClassName,
+            )}
+            data-slot="multi-select-popup"
+          >
+            {showSearch ? (
+              <MultiSelectSearch
+                onChange={setSearch}
+                placeholder={searchPlaceholder}
+                value={search}
+              />
+            ) : null}
+            <SelectPrimitive.List
+              className="min-h-0 flex-1 overflow-y-auto p-1"
+              data-slot="multi-select-list"
+            >
+              {filteredItems.map((item) => (
+                <MultiSelectOption
+                  disabled={item.disabled}
+                  key={item.value}
+                  label={item.label}
+                  value={item.value}
+                />
+              ))}
+              {filteredItems.length === 0 ? (
+                <div
+                  className="flex flex-col items-center justify-center gap-0.5 px-4 py-6 text-center"
+                  data-slot="multi-select-empty"
+                >
+                  <p className="font-medium text-foreground text-sm">
+                    {emptyStateTitle}
+                  </p>
+                  {emptyStateDescription ? (
+                    <p className="text-muted-foreground text-sm">
+                      {emptyStateDescription}
+                    </p>
+                  ) : null}
+                </div>
+              ) : null}
+            </SelectPrimitive.List>
+            {showFooter ? (
+              <div
+                className="flex items-center justify-between gap-1 border-t p-1"
+                data-slot="multi-select-footer"
+              >
+                <Button
+                  onClick={() =>
+                    setValue(
+                      items
+                        .filter((item) => !item.disabled)
+                        .map((item) => item.value),
+                    )
+                  }
+                  size="xs"
+                  variant="ghost"
+                >
+                  {selectAllLabel}
+                </Button>
+                <Button
+                  className="text-muted-foreground"
+                  onClick={() => setValue([])}
+                  size="xs"
+                  variant="ghost"
+                >
+                  {resetLabel}
+                </Button>
+              </div>
+            ) : null}
+          </SelectPrimitive.Popup>
+        </SelectPrimitive.Positioner>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}
+
+function MultiSelectSearch({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Focus after Base UI's own initial focus management has run.
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  return (
+    <div
+      className="flex shrink-0 items-center gap-2 border-b px-2.5"
+      data-slot="multi-select-search"
+    >
+      <SearchIcon className="size-4.5 shrink-0 opacity-64 sm:size-4" />
+      <input
+        className="h-9 min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground sm:h-8 sm:text-sm"
+        onChange={(event) => onChange(event.target.value)}
+        onKeyDown={(event) => {
+          // Let list navigation keys bubble to Base UI; keep everything else
+          // (printable characters, Space, Backspace…) from triggering the
+          // select's typeahead while typing in the search box.
+          if (
+            event.key !== "ArrowDown" &&
+            event.key !== "ArrowUp" &&
+            event.key !== "Enter" &&
+            event.key !== "Escape"
+          ) {
+            event.stopPropagation();
+          }
+        }}
+        placeholder={placeholder}
+        ref={inputRef}
+        value={value}
+      />
+    </div>
+  );
+}
+
+function MultiSelectOption({
+  label,
+  value,
+  disabled,
+}: {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}) {
+  return (
+    <SelectPrimitive.Item
+      className="grid min-h-8 cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 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 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+      data-slot="multi-select-item"
+      disabled={disabled}
+      value={value}
+    >
+      <SelectPrimitive.ItemIndicator className="col-start-1">
+        {/** biome-ignore lint/a11y/noSvgWithoutTitle: Imported from library */}
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/1500/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText className="col-start-2 min-w-0 truncate">
+        {label}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export { MultiSelect };
+export type { MultiSelectItem, MultiSelectProps };

package/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function NavigationMenu({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props) {
+  return (
+    <NavigationMenuPrimitive.Root
+      className={cn(
+        "relative flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
+      data-slot="navigation-menu"
+      {...props}
+    >
+      {children}
+      <NavigationMenuPrimitive.Portal>
+        <NavigationMenuPrimitive.Positioner
+          className="z-50 box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] before:absolute before:content-['']"
+          collisionAvoidance={{ side: "none" }}
+          collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
+          data-slot="navigation-menu-positioner"
+          sideOffset={8}
+        >
+          <NavigationMenuPrimitive.Popup
+            className="relative h-(--popup-height) w-full min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[opacity,transform,width,height,scale,translate] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] 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:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 sm:w-(--popup-width) dark:before:shadow-[0_-1px_--theme(--color-white/6%)]"
+            data-slot="navigation-menu-popup"
+          >
+            <NavigationMenuPrimitive.Viewport
+              className="relative h-full w-full overflow-hidden"
+              data-slot="navigation-menu-viewport"
+            />
+          </NavigationMenuPrimitive.Popup>
+        </NavigationMenuPrimitive.Positioner>
+      </NavigationMenuPrimitive.Portal>
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className,
+      )}
+      data-slot="navigation-menu-list"
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      className={cn("relative", className)}
+      data-slot="navigation-menu-item"
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max cursor-pointer select-none items-center justify-center gap-1 rounded-lg bg-transparent px-3 py-2 font-medium text-base outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-popup-open:bg-accent/50 data-popup-open:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 sm:h-8 sm:text-sm",
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      className={cn(navigationMenuTriggerStyle(), className)}
+      data-slot="navigation-menu-trigger"
+      {...props}
+    >
+      {children}
+      <NavigationMenuPrimitive.Icon
+        className="relative top-px transition-transform duration-300 ease-in-out group-data-popup-open:rotate-180"
+        data-slot="navigation-menu-icon"
+      >
+        <ChevronDownIcon className="size-3.5 opacity-80" />
+      </NavigationMenuPrimitive.Icon>
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      className={cn(
+        "h-full w-max p-2 transition-[opacity,translate,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-[activation-direction=left]:data-ending-style:translate-x-[50%] data-[activation-direction=left]:data-starting-style:translate-x-[-50%] data-[activation-direction=right]:data-ending-style:translate-x-[-50%] data-[activation-direction=right]:data-starting-style:translate-x-[50%]",
+        className,
+      )}
+      data-slot="navigation-menu-content"
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      className={cn(
+        "flex cursor-pointer flex-col gap-1 rounded-md p-2 text-base no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background sm:text-sm [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="navigation-menu-link"
+      {...props}
+    />
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+};