@boyernick/standard-ui-react 0.1.1-canary.3 → 0.1.1-canary.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.3",
+  "version": "0.1.1-canary.34",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",
@@ -21,12 +21,14 @@
     "test": "node --test --experimental-strip-types \"src/**/*.test.ts\""
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
+    "@central-icons-react/round-filled-radius-2-stroke-2": "^1.1.315",
     "@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.312",
+    "@shadcn/react": "^0.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",

package/src/accordion.tsx

@@ -4,6 +4,7 @@ import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
 import type { ComponentProps } from "react"
 import { IconChevronBottom } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type AccordionProps = ComponentProps<typeof BaseAccordion.Root>
@@ -46,9 +47,11 @@ export const AccordionTrigger = ({
 }: AccordionTriggerProps) => (
   <BaseAccordion.Trigger
     className={cn(
-      "group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3.5 text-left text-sm text-fg-primary outline-none",
+      "group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3.5 text-left text-sm text-fg-primary",
+      focusRingBorder,
       motion.colors,
-      "hover:bg-background-tertiary focus-visible:relative focus-visible:z-10 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 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      focusRing,
+      "hover:bg-background-tertiary focus-visible:relative focus-visible:z-10 data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}

package/src/alert-dialog.tsx

@@ -58,7 +58,7 @@ export const AlertDialogPopup = ({
 }: AlertDialogPopupProps) => (
   <BaseAlertDialog.Popup
     className={cn(
-      "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface p-5 shadow-md outline-none max-sm:max-w-[calc(100vw-2rem)]",
+      "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface p-5 shadow-md outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto max-sm:max-w-[calc(100vw-2rem)]",
       motion.popupCenter,
       className,
     )}

package/src/attachment.tsx

@@ -8,6 +8,7 @@ import type {
 } from "react";
 import { IconCrossSmall } from "./icons";
 import { cn } from "./lib/cn";
+import { focusRing, focusRingWithin } from "./lib/focus";
 import { motion } from "./lib/motion";
 
 export type AttachmentProps = Omit<ComponentProps<"label">, "onDrop"> & {
@@ -53,7 +54,8 @@ export const Attachment = ({
     <label
       data-disabled={disabled || undefined}
       className={cn(
-        "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border-primary bg-surface p-6 text-center text-sm text-fg-secondary outline-none hover:bg-background-secondary focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border-primary bg-surface p-6 text-center text-sm text-fg-secondary hover:bg-background-secondary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        focusRingWithin,
         motion.colors,
         className,
       )}
@@ -127,7 +129,8 @@ export const AttachmentRemove = ({
     type={type}
     aria-label="Remove attachment"
     className={cn(
-      "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-fg-tertiary outline-none hover:bg-background-tertiary 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 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-fg-tertiary hover:bg-background-tertiary hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-50",
+      focusRing,
       motion.colors,
       className,
     )}

package/src/autocomplete.tsx

@@ -4,7 +4,9 @@ import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
 import type { ComponentProps, ReactElement } from "react"
 import { IconChevronDownSmall, IconCrossSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRingWithin, focusRingInvalidWithin } from "./lib/focus"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupMessage, popupSurface } from "./lib/popup"
 
 export type AutocompleteProps = ComponentProps<typeof BaseAutocomplete.Root>
 export type AutocompleteValueProps = ComponentProps<typeof BaseAutocomplete.Value>
@@ -66,9 +68,9 @@ export const AutocompleteInputGroup = ({
 }: AutocompleteInputGroupProps) => (
   <BaseAutocomplete.InputGroup
     className={cn(
-      "relative flex min-h-9 w-full items-center rounded-xl border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
-      "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
+      "relative flex min-h-9 w-full items-center rounded-xl border border-border-secondary bg-surface inset-shadow-outline-top transition-[color,box-shadow]",
+      focusRingWithin,
+      focusRingInvalidWithin,
       "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
       "has-[:disabled]:opacity-50",
       className,
@@ -167,7 +169,8 @@ export const AutocompletePopup = ({
 }: AutocompletePopupProps) => (
   <BaseAutocomplete.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border-primary-solid bg-surface shadow-lg outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -198,7 +201,7 @@ export const AutocompleteList = ({
   ...props
 }: AutocompleteListProps) => (
   <BaseAutocomplete.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1.5 outline-none empty:p-0", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -209,7 +212,7 @@ export const AutocompleteItem = ({
 }: AutocompleteItemProps) => (
   <BaseAutocomplete.Item
     className={cn(
-      "flex min-h-9 cursor-default items-center gap-2 rounded-sm px-3 py-2 text-sm text-fg-primary outline-none select-none",
+      popupItem,
       motion.colors,
       "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-highlighted:text-fg-primary",
       className,
@@ -223,7 +226,7 @@ export const AutocompleteEmpty = ({
   ...props
 }: AutocompleteEmptyProps) => (
   <BaseAutocomplete.Empty
-    className={cn("px-3 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    className={cn(cn(popupMessage, "empty:hidden"), className)}
     {...props}
   />
 )
@@ -233,7 +236,7 @@ export const AutocompleteStatus = ({
   ...props
 }: AutocompleteStatusProps) => (
   <BaseAutocomplete.Status
-    className={cn("px-3 py-2 text-sm text-fg-tertiary", className)}
+    className={cn(popupMessage, className)}
     {...props}
   />
 )
@@ -250,7 +253,7 @@ export const AutocompleteGroupLabel = ({
   ...props
 }: AutocompleteGroupLabelProps) => (
   <BaseAutocomplete.GroupLabel
-    className={cn("px-3 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

package/src/badge.tsx

@@ -1,28 +1,92 @@
 import { cva, type VariantProps } from "class-variance-authority"
-import type { HTMLAttributes } from "react"
+import type { HTMLAttributes, ReactNode } from "react"
 import { cn } from "./lib/cn"
 
 const badgeVariants = cva(
-  "text-xs-strong inline-flex items-center rounded-full py-0.5",
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap align-middle [&>[data-badge-label]]:min-w-0 [&>[data-badge-label]]:truncate [&>[data-badge-slot]]:inline-flex [&>[data-badge-slot]]:shrink-0 [&>[data-badge-slot]]:items-center [&>[data-badge-slot]]:justify-center [&>[data-badge-slot]>svg]:size-full",
   {
     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",
+        default: "bg-background-tertiary text-fg-primary",
+        outline: "border border-border-primary text-fg-secondary",
+        info: "bg-status-info-background text-status-info",
+        success: "bg-status-success-background text-status-success",
+        warning: "bg-status-warning-background text-status-warning",
+        critical: "bg-status-critical-background text-status-critical",
+        destructive: "bg-status-critical-background text-status-critical",
+      },
+      size: {
+        xxs: "text-2xs-strong h-4 gap-0.5 px-1.5 [&>[data-badge-slot]]:size-2.5",
+        xs: "text-2xs-strong h-5 gap-1 px-1.5 [&>[data-badge-slot]]:size-3",
+        sm: "text-xs-strong h-6 gap-1 px-2 [&>[data-badge-slot]]:size-3.5",
+        md: "text-xs-strong h-7 gap-1.5 px-2.5 [&>[data-badge-slot]]:size-3.5",
+        lg: "text-sm-strong h-8 gap-1.5 px-3 [&>[data-badge-slot]]:size-4",
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-sm",
+      },
+      iconOnly: {
+        true: "p-0",
+        false: "",
       },
     },
+    compoundVariants: [
+      { iconOnly: true, size: "xxs", class: "size-4" },
+      { iconOnly: true, size: "xs", class: "size-5" },
+      { iconOnly: true, size: "sm", class: "size-6" },
+      { iconOnly: true, size: "md", class: "size-7" },
+      { iconOnly: true, size: "lg", class: "size-8" },
+    ],
     defaultVariants: {
       variant: "default",
+      size: "sm",
+      rounded: false,
+      iconOnly: false,
     },
   },
 )
 
-export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
-  VariantProps<typeof badgeVariants>
+export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "prefix"> &
+  VariantProps<typeof badgeVariants> & {
+    /** Square badge sized to the height of `size`. */
+    iconOnly?: boolean
+    /** Pill shape (`rounded-full`) instead of the default light radius. */
+    rounded?: boolean
+    /** Icon or element before the label. */
+    prefix?: ReactNode
+    /** Icon or element after the label. */
+    suffix?: ReactNode
+  }
 
-export const Badge = ({ className, variant, ...props }: BadgeProps) => (
-  <span className={cn(badgeVariants({ variant }), className)} {...props} />
+export const Badge = ({
+  className,
+  variant,
+  size,
+  rounded,
+  iconOnly,
+  prefix,
+  suffix,
+  children,
+  ...props
+}: BadgeProps) => (
+  <span
+    className={cn(
+      badgeVariants({ variant, size, rounded, iconOnly }),
+      className,
+    )}
+    {...props}
+  >
+    {iconOnly ? (
+      <span data-badge-slot="icon">{children}</span>
+    ) : (
+      <>
+        {prefix ? <span data-badge-slot="prefix">{prefix}</span> : null}
+        {children != null ? <span data-badge-label>{children}</span> : null}
+        {suffix ? <span data-badge-slot="suffix">{suffix}</span> : null}
+      </>
+    )}
+  </span>
 )
 
 export { badgeVariants }