@boyernick/standard-ui-react 0.1.0

package/src/icons.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import type { CentralIconBaseProps } from "@central-icons-react/round-outlined-radius-2-stroke-2/CentralIconBase"
+import { IconBell as IconBellBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconBell"
+import { IconChainLink1 as IconChainLink1Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconChainLink1"
+import { IconCheckmark1 as IconCheckmark1Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconCheckmark1"
+import { IconChevronBottom as IconChevronBottomBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconChevronBottom"
+import { IconChevronDownSmall as IconChevronDownSmallBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconChevronDownSmall"
+import { IconChevronRightSmall as IconChevronRightSmallBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconChevronRightSmall"
+import { IconClipboard as IconClipboardBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconClipboard"
+import { IconCrossSmall as IconCrossSmallBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconCrossSmall"
+import { IconHome as IconHomeBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconHome"
+import { IconMagnifyingGlass as IconMagnifyingGlassBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconMagnifyingGlass"
+import { IconMinusMedium as IconMinusBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconMinusMedium"
+import { IconMoon as IconMoonBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconMoon"
+import { IconPeople as IconPeopleBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconPeople"
+import { IconPlusMedium as IconPlusBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconPlusMedium"
+import { IconSettingsGear1 as IconSettingsGear1Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconSettingsGear1"
+import { IconSquareBehindSquare6 as IconSquareBehindSquare6Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconSquareBehindSquare6"
+import { IconSun as IconSunBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconSun"
+import { IconX as IconXBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconX"
+import type { ComponentType } from "react"
+
+/** Round outlined Central Icons: 2px radius, 2px stroke, default 20px. */
+export const CENTRAL_ICON_SIZE = 20
+
+export type CentralIconProps = Omit<CentralIconBaseProps, "size"> & {
+  size?: CentralIconBaseProps["size"]
+}
+
+export type CentralIconComponent = ComponentType<CentralIconProps>
+
+export const withCentralIconDefaults = (
+  Icon: ComponentType<CentralIconBaseProps>,
+): CentralIconComponent => {
+  const CentralIcon = ({
+    size = CENTRAL_ICON_SIZE,
+    ...props
+  }: CentralIconProps) => <Icon size={size} {...props} />
+
+  CentralIcon.displayName = Icon.displayName ?? Icon.name
+  return CentralIcon
+}
+
+export const IconBell = withCentralIconDefaults(IconBellBase)
+export const IconChainLink1 = withCentralIconDefaults(IconChainLink1Base)
+export const IconCheckmark1 = withCentralIconDefaults(IconCheckmark1Base)
+export const IconChevronBottom = withCentralIconDefaults(IconChevronBottomBase)
+export const IconChevronDownSmall = withCentralIconDefaults(
+  IconChevronDownSmallBase,
+)
+export const IconChevronRightSmall = withCentralIconDefaults(
+  IconChevronRightSmallBase,
+)
+export const IconClipboard = withCentralIconDefaults(IconClipboardBase)
+export const IconCrossSmall = withCentralIconDefaults(IconCrossSmallBase)
+export const IconHome = withCentralIconDefaults(IconHomeBase)
+export const IconMagnifyingGlass = withCentralIconDefaults(
+  IconMagnifyingGlassBase,
+)
+export const IconMinus = withCentralIconDefaults(IconMinusBase)
+export const IconMoon = withCentralIconDefaults(IconMoonBase)
+export const IconPeople = withCentralIconDefaults(IconPeopleBase)
+export const IconPlus = withCentralIconDefaults(IconPlusBase)
+export const IconSettingsGear1 = withCentralIconDefaults(IconSettingsGear1Base)
+export const IconSquareBehindSquare6 = withCentralIconDefaults(
+  IconSquareBehindSquare6Base,
+)
+export const IconSun = withCentralIconDefaults(IconSunBase)
+export const IconX = withCentralIconDefaults(IconXBase)
+
+export const iconGallery = [
+  { name: "IconHome", Icon: IconHome },
+  { name: "IconMagnifyingGlass", Icon: IconMagnifyingGlass },
+  { name: "IconSettingsGear1", Icon: IconSettingsGear1 },
+  { name: "IconBell", Icon: IconBell },
+  { name: "IconPeople", Icon: IconPeople },
+  { name: "IconSun", Icon: IconSun },
+  { name: "IconMoon", Icon: IconMoon },
+  { name: "IconPlus", Icon: IconPlus },
+  { name: "IconMinus", Icon: IconMinus },
+  { name: "IconCrossSmall", Icon: IconCrossSmall },
+  { name: "IconX", Icon: IconX },
+  { name: "IconCheckmark1", Icon: IconCheckmark1 },
+  { name: "IconChevronBottom", Icon: IconChevronBottom },
+  { name: "IconChevronDownSmall", Icon: IconChevronDownSmall },
+  { name: "IconChevronRightSmall", Icon: IconChevronRightSmall },
+  { name: "IconClipboard", Icon: IconClipboard },
+  { name: "IconSquareBehindSquare6", Icon: IconSquareBehindSquare6 },
+  { name: "IconChainLink1", Icon: IconChainLink1 },
+] as const

package/src/illustrations.tsx

@@ -0,0 +1,167 @@
+import type { SVGProps } from "react"
+import { cn } from "./lib/cn"
+
+export type IllustrationProps = SVGProps<SVGSVGElement>
+
+const illustrationProps = {
+  viewBox: "0 0 240 160",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+} as const
+
+export const IllustrationEmpty = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <svg
+    {...illustrationProps}
+    className={cn("text-fg-tertiary", className)}
+    aria-hidden
+    {...props}
+  >
+    <path
+      d="M52 65 79 40h82l27 25v55H52V65Z"
+      className="fill-background-secondary"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="M52 65h45l8 13h30l8-13h45"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M97 31h46"
+      className="text-brand-primary"
+      stroke="currentColor"
+      strokeWidth="4"
+      strokeLinecap="round"
+    />
+    <circle cx="120" cy="104" r="4" className="fill-brand-primary" />
+  </svg>
+)
+
+export const IllustrationError = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <svg
+    {...illustrationProps}
+    className={cn("text-fg-tertiary", className)}
+    aria-hidden
+    {...props}
+  >
+    <rect
+      x="47"
+      y="28"
+      width="146"
+      height="104"
+      rx="16"
+      className="fill-background-secondary"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="M47 54h146"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <circle cx="63" cy="41" r="3" className="fill-brand-primary" />
+    <circle cx="74" cy="41" r="3" fill="currentColor" opacity=".45" />
+    <circle cx="85" cy="41" r="3" fill="currentColor" opacity=".25" />
+    <path
+      d="m103 78 34 34m0-34-34 34"
+      className="text-brand-primary"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+export const IllustrationSuccess = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <svg
+    {...illustrationProps}
+    className={cn("text-fg-tertiary", className)}
+    aria-hidden
+    {...props}
+  >
+    <circle
+      cx="120"
+      cy="80"
+      r="53"
+      className="fill-background-secondary"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <circle
+      cx="120"
+      cy="80"
+      r="37"
+      className="fill-brand-primary text-brand-primary"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="m99 80 14 14 29-31"
+      className="text-brand-foreground"
+      stroke="currentColor"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M63 42h13M69.5 35.5v13M168 118h13m-6.5-6.5v13"
+      className="text-brand-primary"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+export const IllustrationSearch = ({
+  className,
+  ...props
+}: IllustrationProps) => (
+  <svg
+    {...illustrationProps}
+    className={cn("text-fg-tertiary", className)}
+    aria-hidden
+    {...props}
+  >
+    <path
+      d="M42 38h113a12 12 0 0 1 12 12v69H42V38Z"
+      className="fill-background-secondary"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path d="M42 58h125" stroke="currentColor" strokeWidth="2" />
+    <path
+      d="M59 76h48M59 89h34M59 102h53"
+      stroke="currentColor"
+      strokeWidth="4"
+      strokeLinecap="round"
+      opacity=".5"
+    />
+    <circle
+      cx="155"
+      cy="91"
+      r="27"
+      className="fill-surface text-brand-primary"
+      stroke="currentColor"
+      strokeWidth="5"
+    />
+    <path
+      d="m174 111 22 22"
+      className="text-brand-primary"
+      stroke="currentColor"
+      strokeWidth="7"
+      strokeLinecap="round"
+    />
+  </svg>
+)

package/src/image-modal.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import type { ComponentProps, ImgHTMLAttributes } from "react"
+import { Button } from "./button"
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogClose,
+  DialogPopup,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type ImageModalProps = ComponentProps<typeof Dialog>
+export type ImageModalTriggerProps = ComponentProps<typeof DialogTrigger>
+export type ImageModalContentProps = ComponentProps<typeof DialogPopup> & {
+  src: string
+  alt: string
+  caption?: string
+  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">
+}
+
+export const ImageModal = (props: ImageModalProps) => <Dialog {...props} />
+
+export const ImageModalTrigger = ({
+  className,
+  ...props
+}: ImageModalTriggerProps) => (
+  <DialogTrigger
+    className={cn(
+      "cursor-pointer rounded-xl outline-none focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ImageModalContent = ({
+  src,
+  alt,
+  caption,
+  className,
+  imgProps,
+  children,
+  ...props
+}: ImageModalContentProps) => (
+  <DialogPortal>
+    <DialogBackdrop className="bg-black/70 dark:bg-black/80" />
+    <DialogPopup
+      data-slot="image-modal-content"
+      className={cn(
+        "max-h-[90vh] w-full max-w-4xl gap-0 overflow-hidden border-border-primary bg-surface p-0 shadow-lg max-sm:max-w-[calc(100vw-1.5rem)]",
+        motion.popupCenter,
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative">
+        <DialogTitle className="sr-only">{alt}</DialogTitle>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={src}
+          alt={alt}
+          className={cn(
+            "max-h-[min(80vh,56rem)] w-full object-contain bg-background-secondary",
+            imgProps?.className,
+          )}
+          {...imgProps}
+        />
+        <DialogClose
+          render={
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              iconOnly
+              rounded
+              aria-label="Close"
+              className="absolute top-3 right-3"
+            />
+          }
+        >
+          <CloseIcon />
+        </DialogClose>
+      </div>
+      {caption || children ? (
+        <div className="border-t border-border-primary px-4 py-3">
+          {caption ? (
+            <p className="text-sm text-fg-secondary">{caption}</p>
+          ) : null}
+          {children}
+        </div>
+      ) : null}
+    </DialogPopup>
+  </DialogPortal>
+)
+
+const CloseIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
+    <path
+      d="M7 7l10 10M17 7 7 17"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+)