@boyernick/standard-ui-react 0.1.0

package/src/avatar.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar"
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-background-tertiary text-fg-primary align-middle shadow-hairline select-none",
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-10 text-xs-strong",
+        lg: "size-12 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export type AvatarProps = ComponentProps<typeof BaseAvatar.Root> &
+  VariantProps<typeof avatarVariants>
+export type AvatarImageProps = ComponentProps<typeof BaseAvatar.Image>
+export type AvatarFallbackProps = ComponentProps<typeof BaseAvatar.Fallback>
+
+export const Avatar = ({ className, size, ...props }: AvatarProps) => (
+  <BaseAvatar.Root
+    className={cn(avatarVariants({ size }), className)}
+    {...props}
+  />
+)
+
+export const AvatarImage = ({ className, ...props }: AvatarImageProps) => (
+  <BaseAvatar.Image
+    className={cn("size-full object-cover", className)}
+    {...props}
+  />
+)
+
+export const AvatarFallback = ({
+  className,
+  ...props
+}: AvatarFallbackProps) => (
+  <BaseAvatar.Fallback
+    className={cn(
+      "flex size-full items-center justify-center bg-background-tertiary tracking-tight text-inherit",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export { avatarVariants }

package/src/badge.tsx

@@ -0,0 +1,28 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { HTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+
+const badgeVariants = cva(
+  "text-xs-strong inline-flex items-center rounded-full py-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-background-tertiary px-3 text-fg-primary",
+        outline: "border border-border-primary px-2 text-fg-secondary",
+        destructive: "bg-destructive/10 px-2 text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof badgeVariants>
+
+export const Badge = ({ className, variant, ...props }: BadgeProps) => (
+  <span className={cn(badgeVariants({ variant }), className)} {...props} />
+)
+
+export { badgeVariants }

package/src/brand.tsx

@@ -0,0 +1,70 @@
+import type { SVGProps } from "react"
+import { cn } from "./lib/cn"
+
+export type BrandMarkProps = SVGProps<SVGSVGElement> & {
+  size?: number
+  title?: string
+}
+
+/** Solid disk — canonical StandardUI mark. Color via currentColor / parent text. */
+export const BrandMark = ({
+  size = 24,
+  className,
+  title = "StandardUI",
+  ...props
+}: BrandMarkProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 128 128"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={cn("shrink-0 text-current", className)}
+    aria-hidden={title ? undefined : true}
+    role={title ? "img" : undefined}
+    {...props}
+  >
+    {title ? <title>{title}</title> : null}
+    <circle cx="64" cy="64" r="64" fill="currentColor" />
+  </svg>
+)
+
+export type BrandWordmarkProps = {
+  className?: string
+  markSize?: number
+  /** Dense chrome: mark + “UI” only. Default lockup is mark + “StandardUI”. */
+  compact?: boolean
+  /** Chrome lockups use sm; marketing uses md */
+  size?: "sm" | "md"
+}
+
+/** Disk + StandardUI — matches the canonical lockup. Inherits color for light/dark. */
+export const BrandWordmark = ({
+  className,
+  markSize,
+  compact = false,
+  size = "md",
+}: BrandWordmarkProps) => {
+  const resolvedMarkSize = markSize ?? (size === "sm" ? 16 : 28)
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center",
+        size === "sm" ? "gap-1" : "gap-1.5",
+        className,
+      )}
+      aria-label="StandardUI"
+    >
+      <BrandMark size={resolvedMarkSize} title="" aria-hidden />
+      <span
+        className={cn(
+          "tracking-tight",
+          size === "sm" ? "text-sm-strong" : "heading-lg-sans",
+        )}
+      >
+        {compact ? "UI" : "StandardUI"}
+      </span>
+    </span>
+  )
+}

package/src/breadcrumb.tsx

@@ -0,0 +1,81 @@
+import type { ComponentProps, ReactNode } from "react";
+import { IconChevronRightSmall } from "./icons";
+import { cn } from "./lib/cn";
+import { motion } from "./lib/motion";
+
+export type BreadcrumbProps = ComponentProps<"nav">;
+export type BreadcrumbListProps = ComponentProps<"ol">;
+export type BreadcrumbItemProps = ComponentProps<"li">;
+export type BreadcrumbLinkProps = ComponentProps<"a">;
+export type BreadcrumbPageProps = ComponentProps<"span">;
+export type BreadcrumbSeparatorProps = ComponentProps<"li"> & {
+  children?: ReactNode;
+};
+
+export const Breadcrumb = ({ className, ...props }: BreadcrumbProps) => (
+  <nav
+    aria-label="Breadcrumb"
+    className={cn("text-sm text-fg-secondary", className)}
+    {...props}
+  />
+);
+
+export const BreadcrumbList = ({
+  className,
+  ...props
+}: BreadcrumbListProps) => (
+  <ol
+    className={cn("flex flex-wrap items-center gap-1.5", className)}
+    {...props}
+  />
+);
+
+export const BreadcrumbItem = ({
+  className,
+  ...props
+}: BreadcrumbItemProps) => (
+  <li
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+);
+
+export const BreadcrumbLink = ({
+  className,
+  ...props
+}: BreadcrumbLinkProps) => (
+  <a
+    className={cn(
+      "cursor-pointer rounded-sm text-fg-secondary outline-none hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      motion.colors,
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const BreadcrumbPage = ({
+  className,
+  ...props
+}: BreadcrumbPageProps) => (
+  <span
+    aria-current="page"
+    className={cn("font-medium text-fg-primary", className)}
+    {...props}
+  />
+);
+
+export const BreadcrumbSeparator = ({
+  className,
+  children,
+  ...props
+}: BreadcrumbSeparatorProps) => (
+  <li
+    role="presentation"
+    aria-hidden
+    className={cn("text-fg-tertiary [&_svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <IconChevronRightSmall />}
+  </li>
+);

package/src/button.tsx

@@ -0,0 +1,129 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ButtonHTMLAttributes, ReactNode } from "react"
+import { cn } from "./lib/cn"
+
+const buttonVariants = cva(
+  "text-sm inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap transition-all duration-150 ease-out outline-none focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:active:translate-y-0 active:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        primary:
+          "border border-brand-primary-border bg-brand-primary text-brand-foreground inset-shadow-solid-top hover:bg-brand-primary-hover active:bg-brand-primary-active focus-visible:border-ring focus-visible:ring-ring/20",
+        secondary:
+          "border border-transparent bg-background-tertiary text-fg-primary hover:bg-background-quaternary active:bg-background-active focus-visible:border-ring focus-visible:ring-ring/20 dark:bg-gray-250 dark:hover:bg-gray-350 dark:active:bg-gray-200",
+        outline:
+          "border border-border-secondary bg-surface text-fg-primary inset-shadow-outline-top hover:bg-background-tertiary focus-visible:border-ring focus-visible:ring-ring/20",
+        ghost:
+          "border border-transparent text-fg-secondary hover:bg-background-tertiary hover:text-fg-primary focus-visible:border-ring focus-visible:ring-ring/20",
+        destructive:
+          "border border-destructive-active bg-destructive text-white inset-shadow-solid-top hover:bg-destructive-active focus-visible:border-destructive focus-visible:ring-destructive/20",
+      },
+      size: {
+        sm: "h-8 px-3",
+        md: "h-9 px-3.5",
+        lg: "h-10 px-4",
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-md",
+      },
+      iconOnly: {
+        true: "px-0",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      { iconOnly: true, size: "sm", class: "size-8" },
+      { iconOnly: true, size: "md", class: "size-9" },
+      { iconOnly: true, size: "lg", class: "size-10" },
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      rounded: false,
+      iconOnly: false,
+    },
+  },
+)
+
+const ButtonSpinner = ({ className }: { className?: string }) => (
+  <svg
+    className={cn("size-4 animate-spin motion-reduce:animate-none", className)}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden
+  >
+    <path
+      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+      stroke="currentColor"
+      strokeOpacity="0.3"
+      strokeWidth="2"
+    />
+    <path
+      d="M21 12C21 16.9706 16.9706 21 12 21"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+  </svg>
+)
+
+export type ButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "prefix"
+> &
+  VariantProps<typeof buttonVariants> & {
+    /** Shows a spinner, sets aria-busy, and disables the button */
+    loading?: boolean
+    /** Square control sized to the height of `size` — pass an icon as children */
+    iconOnly?: boolean
+    /** Pill shape (`rounded-full`) */
+    rounded?: boolean
+    /** Icon before the label (replaced by spinner when loading) */
+    prefix?: ReactNode
+    /** Icon after the label */
+    suffix?: ReactNode
+  }
+
+export const Button = ({
+  className,
+  variant,
+  size,
+  rounded,
+  iconOnly,
+  loading = false,
+  disabled,
+  prefix,
+  suffix,
+  children,
+  type = "button",
+  ...props
+}: ButtonProps) => {
+  const isDisabled = Boolean(disabled || loading)
+  const showPrefix = loading ? <ButtonSpinner /> : prefix
+
+  return (
+    <button
+      type={type}
+      disabled={isDisabled}
+      aria-busy={loading || undefined}
+      data-loading={loading || undefined}
+      className={cn(
+        buttonVariants({ variant, size, rounded, iconOnly }),
+        className,
+      )}
+      {...props}
+    >
+      {loading && iconOnly ? (
+        <ButtonSpinner />
+      ) : (
+        <>
+          {showPrefix}
+          {children}
+          {suffix}
+        </>
+      )}
+    </button>
+  )
+}
+
+export { buttonVariants }

package/src/calendar.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { DayPicker, type ChevronProps, type DayPickerProps } from "react-day-picker"
+import { IconChevronBottom } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type CalendarProps = DayPickerProps
+
+const navButtonClassName = cn(
+  "inline-flex size-8 items-center justify-center rounded-md text-fg-tertiary",
+  motion.colors,
+  "hover:bg-background-tertiary hover:text-fg-primary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
+)
+
+const CalendarChevron = ({
+  className,
+  orientation,
+  size = 16,
+}: ChevronProps) => {
+  const rotation =
+    orientation === "left"
+      ? "rotate-90"
+      : orientation === "right"
+        ? "-rotate-90"
+        : orientation === "up"
+          ? "rotate-180"
+          : undefined
+
+  return (
+    <IconChevronBottom
+      size={size}
+      className={cn("text-fg-tertiary", rotation, className)}
+      aria-hidden
+    />
+  )
+}
+
+export const Calendar = ({
+  className,
+  classNames,
+  showOutsideDays = true,
+  components,
+  ...props
+}: CalendarProps) => (
+  <DayPicker
+    showOutsideDays={showOutsideDays}
+    className={cn("w-fit p-3", className)}
+    classNames={{
+      months: "relative flex flex-col gap-4 sm:flex-row",
+      month: "flex w-full flex-col gap-3",
+      month_caption: "relative flex h-8 items-center justify-center px-8",
+      caption_label: "text-sm-strong text-fg-primary",
+      nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+      button_previous: navButtonClassName,
+      button_next: navButtonClassName,
+      month_grid: "w-full border-collapse",
+      weekdays: "flex",
+      weekday:
+        "flex size-8 items-center justify-center text-xs font-normal text-fg-tertiary",
+      weeks: "flex flex-col",
+      week: "mt-0.5 flex w-full",
+      day: "relative p-0 text-center",
+      day_button: cn(
+        "inline-flex size-8 items-center justify-center rounded-md text-sm text-fg-primary",
+        motion.colors,
+        "hover:bg-background-tertiary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-selected:opacity-100",
+      ),
+      selected:
+        "[&>button]:bg-brand-primary [&>button]:text-brand-foreground [&>button]:ring-0 [&>button]:hover:bg-brand-primary-hover [&>button]:hover:text-brand-foreground",
+      today:
+        "[&>button]:font-medium [&>button]:ring-1 [&>button]:ring-inset [&>button]:ring-border-secondary",
+      outside: "[&>button]:text-fg-quaternary",
+      disabled: "[&>button]:opacity-40",
+      hidden: "invisible",
+      ...classNames,
+    }}
+    components={{
+      Chevron: CalendarChevron,
+      ...components,
+    }}
+    {...({ mode: "single", ...props } as DayPickerProps)}
+  />
+)

package/src/card.tsx

@@ -0,0 +1,54 @@
+import type { HTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+
+export type CardProps = HTMLAttributes<HTMLDivElement>
+export type CardHeaderProps = HTMLAttributes<HTMLDivElement>
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement>
+export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>
+export type CardContentProps = HTMLAttributes<HTMLDivElement>
+export type CardFooterProps = HTMLAttributes<HTMLDivElement>
+
+export const Card = ({ className, ...props }: CardProps) => (
+  <div
+    className={cn(
+      "flex flex-col overflow-hidden rounded-xl border border-border-primary bg-surface",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const CardHeader = ({ className, ...props }: CardHeaderProps) => (
+  <div
+    className={cn("flex flex-col gap-1 px-5 pt-5 pb-3", className)}
+    {...props}
+  />
+)
+
+export const CardTitle = ({ className, ...props }: CardTitleProps) => (
+  <h3 className={cn("text-sm-strong text-fg-primary", className)} {...props} />
+)
+
+export const CardDescription = ({
+  className,
+  ...props
+}: CardDescriptionProps) => (
+  <p
+    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const CardContent = ({ className, ...props }: CardContentProps) => (
+  <div className={cn("px-5 pb-5", className)} {...props} />
+)
+
+export const CardFooter = ({ className, ...props }: CardFooterProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-2 border-t border-border-primary px-5 py-4",
+      className,
+    )}
+    {...props}
+  />
+)