@withmata/blueprints 0.3.5 → 0.5.0

package/blueprints/features/ui-shared-components/files/ui/components/ui/input-group.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { Button } from "#components/ui/button";
+import { Input } from "#components/ui/input";
+import { Textarea } from "#components/ui/textarea";
+import { cn } from "#utils/cn";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "pl-3 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end":
+          "pr-3 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start",
+        "block-end":
+          "px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }
+      }}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "gap-2 rounded-4xl text-sm shadow-none flex items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset";
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/blueprints/features/ui-shared-components/files/ui/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import type * as React from "react";
+
+import { cn } from "#utils/cn";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "bg-input/30 border-input focus-visible:border-primary/90 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/blueprints/features/ui-shared-components/files/ui/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "#utils/cn";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/blueprints/features/ui-shared-components/files/ui/components/ui/org-switcher.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { buttonVariants } from "#components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "#components/ui/dropdown-menu";
+import { cn } from "#utils/cn";
+import { BuildingsIcon } from "@phosphor-icons/react/Buildings";
+import { CaretUpDownIcon } from "@phosphor-icons/react/CaretUpDown";
+import { CheckIcon } from "@phosphor-icons/react/Check";
+import { PlusIcon } from "@phosphor-icons/react/Plus";
+
+export interface OrgSwitcherOrganization {
+  id: string;
+  name: string;
+}
+
+export interface OrgSwitcherProps {
+  currentOrg: OrgSwitcherOrganization | null;
+  organizations: OrgSwitcherOrganization[];
+  onSwitch: (orgId: string) => void;
+  onCreateNew?: () => void;
+  isLoading?: boolean;
+  isSwitching?: boolean;
+  createLabel?: string;
+  label?: string;
+  className?: string;
+}
+
+export function OrgSwitcher({
+  currentOrg,
+  organizations,
+  onSwitch,
+  onCreateNew,
+  isLoading = false,
+  isSwitching = false,
+  createLabel = "Create Organization",
+  label = "Organizations",
+  className,
+}: OrgSwitcherProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        nativeButton={false}
+        render={
+          <div
+            data-slot="org-switcher"
+            className={cn(
+              buttonVariants({
+                variant: "ghost",
+                className:
+                  "bg-transparent rounded-none group hover:cursor-pointer hover:bg-transparent focus:bg-transparent p-0",
+              }),
+              "relative flex gap-2.5 items-center size-8 w-full",
+              className,
+            )}
+          >
+            <BuildingsIcon className="size-4 shrink-0" />
+            <div className="flex gap-2 w-full items-center overflow-hidden">
+              <span className="max-w-32 truncate text-sm">
+                {currentOrg?.name ?? "Organization"}
+              </span>
+            </div>
+            <CaretUpDownIcon className="size-3.5 group-hover:text-foreground transition-all opacity-50 shrink-0" />
+            {(isSwitching || isLoading) && (
+              <div className="absolute inset-0 rounded-none overflow-hidden">
+                <div
+                  className="h-full w-full animate-pulse bg-muted/60"
+                  style={{ animationDuration: "1s" }}
+                />
+              </div>
+            )}
+          </div>
+        }
+      />
+      <DropdownMenuContent align="start" className="w-64">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{label}</DropdownMenuLabel>
+          {organizations.map((org) => {
+            const isActive = org.id === currentOrg?.id;
+            return (
+              <DropdownMenuItem
+                key={org.id}
+                onClick={() => onSwitch(org.id)}
+                className="justify-between"
+              >
+                <div className="flex items-center gap-2">
+                  <BuildingsIcon className="size-4 text-muted-foreground" />
+                  <span className="truncate">{org.name}</span>
+                </div>
+                {isActive && <CheckIcon className="size-4" />}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+        {onCreateNew && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={onCreateNew}>
+              <PlusIcon className="size-4" />
+              <span>{createLabel}</span>
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/blueprints/features/ui-shared-components/files/ui/components/ui/page-header.tsx

@@ -0,0 +1,45 @@
+import { Button } from "#components/ui/button";
+import { cn } from "#utils/cn";
+import { PlusIcon } from "@phosphor-icons/react/Plus";
+import type * as React from "react";
+
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  actionIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actionLabel,
+  onAction,
+  actionIcon,
+  children,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      className={cn("flex items-center justify-between mb-6", className)}
+    >
+      <div>
+        <h1 className="text-2xl font-bold">{title}</h1>
+        {description && (
+          <p className="text-muted-foreground mt-2">{description}</p>
+        )}
+      </div>
+      {children}
+      {actionLabel && onAction && (
+        <Button onClick={onAction}>
+          {actionIcon ?? <PlusIcon className="size-4" />}
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+}

package/blueprints/features/ui-shared-components/files/ui/components/ui/pagination.tsx

@@ -0,0 +1,52 @@
+import { Button } from "#components/ui/button";
+import { CaretLeftIcon } from "@phosphor-icons/react/CaretLeft";
+import { CaretRightIcon } from "@phosphor-icons/react/CaretRight";
+
+export interface PaginationProps {
+  total: number;
+  limit: number;
+  offset: number;
+  onPageChange: (offset: number) => void;
+}
+
+export function Pagination({
+  total,
+  limit,
+  offset,
+  onPageChange,
+}: PaginationProps) {
+  if (total <= limit) return null;
+
+  const currentPage = Math.floor(offset / limit) + 1;
+  const totalPages = Math.ceil(total / limit);
+  const start = offset + 1;
+  const end = Math.min(offset + limit, total);
+
+  return (
+    <div data-slot="pagination" className="flex items-center justify-between">
+      <p className="text-sm text-muted-foreground">
+        Showing {start}-{end} of {total}
+      </p>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage <= 1}
+          onClick={() => onPageChange(offset - limit)}
+        >
+          <CaretLeftIcon className="size-4" />
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage >= totalPages}
+          onClick={() => onPageChange(offset + limit)}
+        >
+          Next
+          <CaretRightIcon className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/blueprints/features/ui-shared-components/files/ui/components/ui/pill-select.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { Button } from "#components/ui/button";
+import { Input } from "#components/ui/input";
+import { cn } from "#utils/cn";
+import { useState } from "react";
+
+export interface PillSelectOption<T extends string = string> {
+  value: T;
+  label: string;
+}
+
+export interface PillSelectProps<T extends string = string> {
+  options: PillSelectOption<T>[];
+  value?: T;
+  onChange: (value: T | undefined) => void;
+  disabled?: boolean;
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  allowDeselect?: boolean;
+  className?: string;
+  /** Max number of pills to show before collapsing. When set, only `defaultVisible` options are shown initially. */
+  maxVisible?: number;
+  /** Which option values to show by default when collapsed. Falls back to first `maxVisible` options. */
+  defaultVisible?: T[];
+}
+
+export function PillSelect<T extends string = string>({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  showSearch = false,
+  searchPlaceholder = "Search...",
+  allowDeselect = true,
+  className,
+  maxVisible,
+  defaultVisible,
+}: PillSelectProps<T>) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showAll, setShowAll] = useState(false);
+
+  // Filter options based on search term
+  const filteredOptions = showSearch
+    ? options.filter((opt) =>
+        opt.label.toLowerCase().includes(searchTerm.toLowerCase()),
+      )
+    : options;
+
+  // Determine visible options when collapsed
+  const isSearching = showSearch && searchTerm.length > 0;
+  const shouldCollapse = maxVisible && !showAll && !isSearching && filteredOptions.length > maxVisible;
+
+  const visibleOptions = shouldCollapse
+    ? (() => {
+        // Always include the selected value in visible options
+        const defaultSet = defaultVisible
+          ? filteredOptions.filter((opt) => defaultVisible.includes(opt.value))
+          : filteredOptions.slice(0, maxVisible);
+
+        if (value && !defaultSet.some((opt) => opt.value === value)) {
+          const selectedOpt = filteredOptions.find((opt) => opt.value === value);
+          if (selectedOpt) {
+            return [...defaultSet, selectedOpt];
+          }
+        }
+        return defaultSet;
+      })()
+    : filteredOptions;
+
+  const hiddenCount = shouldCollapse ? filteredOptions.length - visibleOptions.length : 0;
+
+  // Handle option click
+  const handleClick = (optionValue: T) => {
+    if (disabled) return;
+
+    // Allow deselect if enabled and clicking the already selected option
+    if (allowDeselect && value === optionValue) {
+      onChange(undefined);
+    } else {
+      onChange(optionValue);
+      // Clear search after selection
+      if (showSearch) {
+        setSearchTerm("");
+      }
+    }
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Search input */}
+      {showSearch && (
+        <Input
+          type="text"
+          placeholder={searchPlaceholder}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          disabled={disabled}
+          className="w-full"
+        />
+      )}
+
+      {/* Pills grid */}
+      <div className="flex flex-wrap gap-2">
+        {visibleOptions.length > 0 ? (
+          <>
+            {visibleOptions.map((option) => (
+              <Button
+                key={option.value}
+                type="button"
+                variant={value === option.value ? "default" : "outline"}
+                size="sm"
+                onClick={() => handleClick(option.value)}
+                disabled={disabled}
+                className="transition-all focus-visible:ring-0 focus-visible:border-primary/90 focus-visible:ring-offset-0 focus-visible:outline-none"
+              >
+                {option.label}
+              </Button>
+            ))}
+            {shouldCollapse && hiddenCount > 0 && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowAll(true)}
+                disabled={disabled}
+                className="text-muted-foreground"
+              >
+                +{hiddenCount} more
+              </Button>
+            )}
+            {showAll && maxVisible && !isSearching && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowAll(false)}
+                disabled={disabled}
+                className="text-muted-foreground"
+              >
+                Show less
+              </Button>
+            )}
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground py-2">No options found</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/blueprints/features/ui-shared-components/files/ui/components/ui/popover.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "#utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(
+  (
+    { className, align = "center", sideOffset = 8, children, ...props },
+    ref,
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/blueprints/features/ui-shared-components/files/ui/components/ui/search-input.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Input } from "#components/ui/input";
+import { cn } from "#utils/cn";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/MagnifyingGlass";
+import { useEffect, useState } from "react";
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  debounceMs?: number;
+  className?: string;
+}
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  debounceMs = 300,
+  className,
+}: SearchInputProps) {
+  const [localValue, setLocalValue] = useState(value);
+
+  // Sync external value changes
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  // Debounce local changes
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(localValue);
+    }, debounceMs);
+    return () => clearTimeout(timeout);
+  }, [localValue, onChange, debounceMs]);
+
+  return (
+    <div data-slot="search-input" className={cn("relative", className)}>
+      <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+      <Input
+        placeholder={placeholder}
+        value={localValue}
+        onChange={(e) => setLocalValue(e.target.value)}
+        className="pl-9"
+      />
+    </div>
+  );
+}