@boyernick/standard-ui-react 0.1.0 → 0.1.1-canary.10

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>
 )

package/src/index.ts

@@ -1,5 +1,12 @@
 export { Button, buttonVariants, type ButtonProps } from "./button";
 export { Input, inputVariants, type InputProps } from "./input";
+export {
+  Kbd,
+  KbdGroup,
+  kbdVariants,
+  type KbdGroupProps,
+  type KbdProps,
+} from "./kbd";
 export { Badge, badgeVariants, type BadgeProps } from "./badge";
 export { Switch, type SwitchProps } from "./switch";
 export { Checkbox, type CheckboxProps } from "./checkbox";
@@ -92,17 +99,27 @@ export {
   type AvatarFallbackProps,
 } from "./avatar";
 export { Calendar, type CalendarProps } from "./calendar";
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePickerSingleProps,
+  type DatePickerRangeProps,
+} from "./date-picker";
+export type { DateRange } from "react-day-picker";
 export {
   Card,
   CardHeader,
   CardTitle,
   CardDescription,
+  CardAction,
   CardContent,
   CardFooter,
+  cardVariants,
   type CardProps,
   type CardHeaderProps,
   type CardTitleProps,
   type CardDescriptionProps,
+  type CardActionProps,
   type CardContentProps,
   type CardFooterProps,
 } from "./card";
@@ -650,6 +667,7 @@ export {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  breadcrumbSeparatorVariants,
   type BreadcrumbProps,
   type BreadcrumbListProps,
   type BreadcrumbItemProps,
@@ -785,13 +803,19 @@ export {
   withCentralIconDefaults,
   iconGallery,
   IconBell,
+  IconCalendar1,
   IconChainLink1,
   IconCheckmark1,
   IconChevronBottom,
   IconChevronDownSmall,
   IconChevronRightSmall,
+  IconCircleCheck,
+  IconCircleInfo,
   IconClipboard,
   IconCrossSmall,
+  IconDotGrid1x3Horizontal,
+  IconExclamationCircle,
+  IconExclamationTriangle,
   IconHome,
   IconMagnifyingGlass,
   IconMinus,
@@ -800,6 +824,7 @@ export {
   IconPlus,
   IconSettingsGear1,
   IconSquareBehindSquare6,
+  IconStar,
   IconSun,
   IconX,
   type CentralIconProps,
@@ -821,7 +846,11 @@ export {
   IllustrationError,
   IllustrationSuccess,
   IllustrationSearch,
+  IllustrationUpload,
+  IllustrationFile,
   type IllustrationProps,
+  type IllustrationFileProps,
+  type FileIllustrationType,
 } from "./illustrations"
 export { BrandMark, BrandWordmark, type BrandMarkProps, type BrandWordmarkProps } from "./brand"
 export {

package/src/input.tsx

@@ -5,7 +5,7 @@ import { forwardRef, type InputHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
 const inputVariants = cva(
-  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/kbd.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+const kbdVariants = cva(
+  // The border is bottom-only on purpose: it reads as the lip of a physical
+  // key without boxing the glyph in on all four sides, which at 12px turns a
+  // keycap into a cramped badge.
+  "inline-flex shrink-0 items-center justify-center border-b px-1 font-sans text-xs whitespace-nowrap select-none",
+  {
+    variants: {
+      variant: {
+        default: "border-border-primary bg-background-tertiary text-fg-secondary",
+        // The default fill is a light grey that vanishes on a dark surface,
+        // so an inverted keycap lifts off the surface rather than tinting it.
+        inverted: "border-white/10 bg-white/10 text-fg-inverted",
+      },
+      size: {
+        sm: "h-4 min-w-3.5 rounded-2xs",
+        md: "h-5 min-w-4 rounded-xs",
+      },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+  },
+)
+
+export type KbdProps = ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>
+export type KbdGroupProps = ComponentProps<"span">
+
+/** A single keycap. Presentational — map "cmd" to ⌘ before it gets here. */
+export const Kbd = ({ className, variant, size, ...props }: KbdProps) => (
+  <kbd className={cn(kbdVariants({ variant, size }), className)} {...props} />
+)
+
+/** A full shortcut. Keeps the caps on one line at a consistent gap. */
+export const KbdGroup = ({ className, ...props }: KbdGroupProps) => (
+  <span
+    className={cn("inline-flex items-center gap-1 align-middle", className)}
+    {...props}
+  />
+)
+
+export { kbdVariants }

package/src/lib/cn.ts

@@ -1,3 +1,45 @@
 import { clsx, type ClassValue } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
 
-export const cn = (...inputs: ClassValue[]) => clsx(inputs)
+/**
+ * StandardUI defines typography composites as custom `@utility` rules
+ * (`text-sm-strong`, `text-md`, …). Tailwind Merge cannot know those are font
+ * sizes, so it files them under text *color* — and then drops them whenever a
+ * real color follows, as in `cn("text-sm-strong", "text-fg-primary")`. Grouping
+ * them with font sizes keeps them conflicting with each other and with
+ * `text-sm`, while leaving colors alone.
+ *
+ * `shadow-hairline` has the same problem in the shadow group. Custom font sizes
+ * (`text-2xs`) and radii (`rounded-2xs`, `rounded-4xl`) already resolve
+ * correctly and need no help.
+ *
+ * Keep this in step with the `@utility` rules in
+ * @boyernick/standard-ui-tokens/css/tokens.css.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "2xs-strong",
+            "xs-strong",
+            "sm-strong",
+            "md",
+            "md-strong",
+            "lg-strong",
+          ],
+        },
+      ],
+      shadow: [{ shadow: ["hairline"] }],
+    },
+  },
+})
+
+/**
+ * Combines class names and resolves Tailwind conflicts so the last value wins.
+ * Without the merge step a caller's `className` cannot override a built-in
+ * utility: both classes land in the DOM and the winner is whichever rule sits
+ * later in the stylesheet, which the caller does not control.
+ */
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))