@boyernick/standard-ui-react 0.1.1-canary.8 → 0.2.0

package/src/icons.tsx

@@ -1,9 +1,11 @@
 "use client"
 
 import type { CentralIconBaseProps } from "@central-icons-react/round-outlined-radius-2-stroke-2/CentralIconBase"
+import { IconArrowDown as IconArrowDownBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconArrowDown"
 import { IconBell as IconBellBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconBell"
 import { IconCalendar1 as IconCalendar1Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconCalendar1"
 import { IconChainLink1 as IconChainLink1Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconChainLink1"
+import { IconChainLink3 as IconChainLink3Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconChainLink3"
 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"
@@ -13,18 +15,26 @@ import { IconCircleInfo as IconCircleInfoBase } from "@central-icons-react/round
 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 { IconDotGrid1x3Horizontal as IconDotGrid1x3HorizontalBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconDotGrid1x3Horizontal"
+import { IconDotGrid2x3 as IconDotGrid2x3Base } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconDotGrid2x3"
 import { IconExclamationCircle as IconExclamationCircleBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconExclamationCircle"
 import { IconExclamationTriangle as IconExclamationTriangleBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconExclamationTriangle"
 import { IconHome as IconHomeBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconHome"
+import { IconFullScreen as IconFullScreenBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconFullScreen"
+import { IconHighlight as IconHighlightBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconHighlight"
 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 { IconPause as IconPauseBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconPause"
 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 { IconPlay as IconPlayBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconPlay"
 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 { IconStar as IconStarBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconStar"
+import { IconStrikeThrough as IconStrikeThroughBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconStrikeThrough"
 import { IconSun as IconSunBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconSun"
+import { IconVolumeFull as IconVolumeFullBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconVolumeFull"
+import { IconVolumeOff as IconVolumeOffBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconVolumeOff"
 import { IconX as IconXBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconX"
 import type { ComponentType } from "react"
 
@@ -42,16 +52,21 @@ export const withCentralIconDefaults = (
 ): CentralIconComponent => {
   const CentralIcon = ({
     size = CENTRAL_ICON_SIZE,
+    // Central's "masked" mode hardcodes one maskId per icon name. A second
+    // instance on the page paints as a solid square. Raw mode avoids that.
+    mode = "raw",
     ...props
-  }: CentralIconProps) => <Icon size={size} {...props} />
+  }: CentralIconProps) => <Icon {...props} size={size} mode={mode} />
 
   CentralIcon.displayName = Icon.displayName ?? Icon.name
   return CentralIcon
 }
 
+export const IconArrowDown = withCentralIconDefaults(IconArrowDownBase)
 export const IconBell = withCentralIconDefaults(IconBellBase)
 export const IconCalendar1 = withCentralIconDefaults(IconCalendar1Base)
 export const IconChainLink1 = withCentralIconDefaults(IconChainLink1Base)
+export const IconChainLink3 = withCentralIconDefaults(IconChainLink3Base)
 export const IconCheckmark1 = withCentralIconDefaults(IconCheckmark1Base)
 export const IconChevronBottom = withCentralIconDefaults(IconChevronBottomBase)
 export const IconChevronDownSmall = withCentralIconDefaults(
@@ -67,26 +82,34 @@ export const IconCrossSmall = withCentralIconDefaults(IconCrossSmallBase)
 export const IconDotGrid1x3Horizontal = withCentralIconDefaults(
   IconDotGrid1x3HorizontalBase,
 )
+export const IconDotGrid2x3 = withCentralIconDefaults(IconDotGrid2x3Base)
 export const IconExclamationCircle = withCentralIconDefaults(
   IconExclamationCircleBase,
 )
 export const IconExclamationTriangle = withCentralIconDefaults(
   IconExclamationTriangleBase,
 )
+export const IconFullScreen = withCentralIconDefaults(IconFullScreenBase)
 export const IconHome = withCentralIconDefaults(IconHomeBase)
 export const IconMagnifyingGlass = withCentralIconDefaults(
   IconMagnifyingGlassBase,
 )
 export const IconMinus = withCentralIconDefaults(IconMinusBase)
+export const IconPause = withCentralIconDefaults(IconPauseBase)
 export const IconMoon = withCentralIconDefaults(IconMoonBase)
 export const IconPeople = withCentralIconDefaults(IconPeopleBase)
+export const IconPlay = withCentralIconDefaults(IconPlayBase)
 export const IconPlus = withCentralIconDefaults(IconPlusBase)
 export const IconSettingsGear1 = withCentralIconDefaults(IconSettingsGear1Base)
 export const IconSquareBehindSquare6 = withCentralIconDefaults(
   IconSquareBehindSquare6Base,
 )
 export const IconStar = withCentralIconDefaults(IconStarBase)
+export const IconStrikeThrough = withCentralIconDefaults(IconStrikeThroughBase)
+export const IconHighlight = withCentralIconDefaults(IconHighlightBase)
 export const IconSun = withCentralIconDefaults(IconSunBase)
+export const IconVolumeFull = withCentralIconDefaults(IconVolumeFullBase)
+export const IconVolumeOff = withCentralIconDefaults(IconVolumeOffBase)
 export const IconX = withCentralIconDefaults(IconXBase)
 
 export const iconGallery = [
@@ -110,9 +133,13 @@ export const iconGallery = [
   { name: "IconCircleInfo", Icon: IconCircleInfo },
   { name: "IconClipboard", Icon: IconClipboard },
   { name: "IconDotGrid1x3Horizontal", Icon: IconDotGrid1x3Horizontal },
+  { name: "IconDotGrid2x3", Icon: IconDotGrid2x3 },
   { name: "IconSquareBehindSquare6", Icon: IconSquareBehindSquare6 },
   { name: "IconChainLink1", Icon: IconChainLink1 },
+  { name: "IconChainLink3", Icon: IconChainLink3 },
   { name: "IconExclamationCircle", Icon: IconExclamationCircle },
   { name: "IconExclamationTriangle", Icon: IconExclamationTriangle },
   { name: "IconStar", Icon: IconStar },
+  { name: "IconStrikeThrough", Icon: IconStrikeThrough },
+  { name: "IconHighlight", Icon: IconHighlight },
 ] as const

package/src/illustrations.tsx

@@ -1,167 +1,245 @@
-import type { SVGProps } from "react"
+import type { ComponentProps, ReactNode } from "react"
 import { cn } from "./lib/cn"
 
-export type IllustrationProps = SVGProps<SVGSVGElement>
+/**
+ * Small, composition-based illustrations for empty states.
+ *
+ * Built from divs and theme tokens rather than SVG paths, so they follow the
+ * palette into dark mode instead of carrying baked-in colours. They are
+ * deliberately abstract and monochrome — a miniature of the thing that is
+ * missing, not a picture about it. Nothing here uses a brand colour: an empty
+ * state is a quiet moment, and an accent turns it into an announcement.
+ */
 
-const illustrationProps = {
-  viewBox: "0 0 240 160",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-} as const
+export type IllustrationProps = ComponentProps<"div">
 
-export const IllustrationEmpty = ({
-  className,
-  ...props
-}: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
+/** Fixed 64×48 stage, so a row of these lines up without ad-hoc sizing. */
+const Frame = ({ className, children, ...props }: IllustrationProps) => (
+  <div
+    className={cn(
+      "inline-flex h-12 w-16 shrink-0 items-center justify-center",
+      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>
+    {children}
+  </div>
 )
 
-export const IllustrationError = ({
+/** A sheet. The hairline and radius are sub-pixel on purpose — at this size a
+ *  1px border reads as a heavy outline rather than an edge. */
+const Card = ({
+  className,
+  children,
+}: {
+  className?: string
+  children?: ReactNode
+}) => (
+  <div
+    className={cn(
+      "relative flex shrink-0 flex-col overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
+      className,
+    )}
+  >
+    {children}
+  </div>
+)
+
+/** A line of content. */
+const Bar = ({ width }: { width: string }) => (
+  <div
+    className="h-[3px] shrink-0 rounded-[1px] bg-background-tertiary"
+    style={{ width }}
+  />
+)
+
+/** Nothing here yet — a sheet with no content on it. */
+export const IllustrationEmpty = ({ className, ...props }: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8" />
+  </Frame>
+)
+
+/** Something to look through — a sheet behind a lens. */
+export const IllustrationSearch = ({
   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>
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8 gap-[3px]">
+      <Bar width="80%" />
+      <Bar width="55%" />
+      <Bar width="35%" />
+    </Card>
+    <div className="-ml-2.5 mt-4 size-4 rounded-full border-[1.5px] border-border-secondary bg-surface" />
+  </Frame>
 )
 
-export const IllustrationSuccess = ({
+/** Something went wrong — the stack knocked out of true. */
+export const IllustrationError = ({ className, ...props }: IllustrationProps) => (
+  <Frame className={className} {...props}>
+    <Card className="h-9 w-7 -rotate-6" />
+    <Card className="-ml-3 h-10 w-8 rotate-[7deg] gap-[3px]">
+      <Bar width="70%" />
+      <Bar width="45%" />
+    </Card>
+  </Frame>
+)
+
+/** Somewhere to put a file — a sheet going into a folder.
+ *
+ *  Two earlier attempts failed for the same reason: an arrow stamped on a
+ *  sheet, then a sheet on a plain grey slab, both read as a document with
+ *  something next to it. A folder is its own silhouette — tab, body, a sheet
+ *  tucked behind the front — so the arrangement carries the meaning and no
+ *  symbol has to. It is also the one shape here that is not another sheet,
+ *  which keeps it from reading as the error stack. */
+export const IllustrationUpload = ({
   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>
+  <Frame className={className} {...props}>
+    <div className="relative h-11 w-12">
+      {/* Tucked deep enough that the folder front cuts across it. */}
+      <Card className="absolute inset-x-[13px] top-0 h-8 -rotate-6 gap-[3px]">
+        <Bar width="70%" />
+        <Bar width="45%" />
+      </Card>
+      {/* Laps 1px into the body so their borders read as one outline. */}
+      <div className="absolute bottom-[21px] left-1 h-1.5 w-4 rounded-t-[2px] border-x-[0.5px] border-t-[0.5px] border-border-secondary bg-background-tertiary" />
+      <div className="absolute inset-x-1 bottom-0 h-[22px] rounded-[3px] border-[0.5px] border-border-secondary bg-background-tertiary" />
+    </div>
+  </Frame>
 )
 
-export const IllustrationSearch = ({
+/** Done — a sheet carrying a mark. */
+export const IllustrationSuccess = ({
   className,
   ...props
 }: IllustrationProps) => (
-  <svg
-    {...illustrationProps}
-    className={cn("text-fg-tertiary", className)}
+  <Frame className={className} {...props}>
+    <Card className="h-10 w-8 items-center justify-center">
+      {/* A check is cheaper as two borders on a rotated box than as a path. */}
+      <span className="mb-0.5 h-3 w-1.5 rotate-45 border-r-[1.5px] border-b-[1.5px] border-fg-tertiary" />
+    </Card>
+  </Frame>
+)
+
+/* -------------------------------------------------------------------------
+ * File types
+ *
+ * A second, smaller family. These sit inline — in an attachment row, a list,
+ * a preview slot — so they are a bare sheet at 24×30 rather than a hero on a
+ * 64×48 stage. Same grammar: a sheet, and marks on it standing in for whatever
+ * the file holds.
+ *
+ * Presentational, like Kbd: they render the type you name. Mapping an
+ * extension to a type is the consumer's job, since only the consumer knows
+ * what it wants to do with the ones it does not recognise.
+ * ---------------------------------------------------------------------- */
+
+export type FileIllustrationType =
+  | "document"
+  | "image"
+  | "spreadsheet"
+  | "presentation"
+  | "video"
+  | "audio"
+  | "code"
+  | "archive"
+  | "generic"
+
+export type IllustrationFileProps = IllustrationProps & {
+  type?: FileIllustrationType
+}
+
+/** A block of colour standing in for content rather than a line of it. */
+const Block = ({ className }: { className?: string }) => (
+  <div className={cn("rounded-[1px] bg-background-tertiary", className)} />
+)
+
+const marks: Record<FileIllustrationType, ReactNode> = {
+  document: (
+    <>
+      <Bar width="100%" />
+      <Bar width="100%" />
+      <Bar width="60%" />
+    </>
+  ),
+  // A horizon and a sun — the smallest arrangement that reads as a picture.
+  image: (
+    <div className="relative mt-auto h-3.5 w-full">
+      <Block className="absolute top-0 right-1 size-1.5 rounded-full" />
+      <Block className="absolute inset-x-0 bottom-0 h-2 [clip-path:polygon(0_100%,38%_28%,62%_100%)]" />
+      <Block className="absolute right-0 bottom-0 h-1.5 w-1/2 [clip-path:polygon(0_100%,50%_20%,100%_100%)]" />
+    </div>
+  ),
+  spreadsheet: (
+    <div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-[1.5px]">
+      {Array.from({ length: 9 }, (_, i) => (
+        <Block key={i} />
+      ))}
+    </div>
+  ),
+  presentation: (
+    <>
+      <Block className="h-2.5 w-full" />
+      <Bar width="70%" />
+    </>
+  ),
+  // A play triangle, cut from a block so it keeps the same fill as everything else.
+  video: (
+    <div className="m-auto size-3">
+      <Block className="size-full [clip-path:polygon(22%_10%,90%_50%,22%_90%)]" />
+    </div>
+  ),
+  audio: (
+    <div className="m-auto flex h-3.5 items-center gap-[2px]">
+      <Block className="h-1.5 w-[2px]" />
+      <Block className="h-3.5 w-[2px]" />
+      <Block className="h-2.5 w-[2px]" />
+      <Block className="h-3.5 w-[2px]" />
+      <Block className="h-1.5 w-[2px]" />
+    </div>
+  ),
+  code: (
+    <>
+      <Bar width="55%" />
+      <div className="flex w-full pl-1.5">
+        <Bar width="70%" />
+      </div>
+      <div className="flex w-full pl-1.5">
+        <Bar width="50%" />
+      </div>
+      <Bar width="40%" />
+    </>
+  ),
+  // A stack, since an archive is other files in a coat.
+  archive: (
+    <div className="m-auto flex flex-col gap-[2px]">
+      <Block className="h-1.5 w-2.5" />
+      <Block className="h-1.5 w-2.5" />
+      <Block className="h-1.5 w-2.5" />
+    </div>
+  ),
+  generic: null,
+}
+
+/** One file, drawn as the kind of thing it holds. */
+export const IllustrationFile = ({
+  type = "generic",
+  className,
+  ...props
+}: IllustrationFileProps) => (
+  <div
+    className={cn(
+      "relative flex h-[30px] w-6 shrink-0 flex-col gap-[3px] overflow-hidden rounded-[3px] border-[0.5px] border-border-primary bg-surface p-1 shadow-hairline",
+      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>
+    {marks[type]}
+  </div>
 )