@boyernick/standard-ui-react 0.1.1-canary.2 → 0.1.1-canary.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.2",
+  "version": "0.1.1-canary.4",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/accordion.tsx

@@ -79,6 +79,6 @@ export const AccordionPanel = ({
     )}
     {...props}
   >
-    <div className="px-4 pt-0 pb-4 leading-relaxed">{children}</div>
+    <div className="px-4 pt-2 pb-4 leading-relaxed">{children}</div>
   </BaseAccordion.Panel>
 )

package/src/autocomplete.tsx

@@ -66,8 +66,7 @@ export const AutocompleteInputGroup = ({
 }: AutocompleteInputGroupProps) => (
   <BaseAutocomplete.InputGroup
     className={cn(
-      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "has-[[data-popup-open]]:bg-background-tertiary/60",
+      "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",
       "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
@@ -84,7 +83,7 @@ export const AutocompleteInput = ({
 }: AutocompleteInputProps) => (
   <BaseAutocomplete.Input
     className={cn(
-      "h-9 min-w-0 flex-1 cursor-text rounded-md bg-transparent px-3 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary focus-visible:ring-0",
+      "h-9 min-w-0 flex-1 cursor-text rounded-xl bg-transparent px-3 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary focus-visible:ring-0",
       className,
     )}
     {...props}
@@ -134,7 +133,7 @@ export const AutocompleteClear = ({
     {...props}
   >
     {children ?? (
-      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+      <IconCrossSmall size={16} className="size-4" aria-hidden />
     )}
   </BaseAutocomplete.Clear>
 )
@@ -151,7 +150,7 @@ export const AutocompleteBackdrop = ({
 )
 
 export const AutocompletePositioner = ({
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: AutocompletePositionerProps) => (
@@ -168,7 +167,7 @@ export const AutocompletePopup = ({
 }: AutocompletePopupProps) => (
   <BaseAutocomplete.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-md border border-border-primary bg-surface shadow-md outline-none",
+      "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",
       motion.popupAnchor,
       className,
     )}
@@ -199,7 +198,7 @@ export const AutocompleteList = ({
   ...props
 }: AutocompleteListProps) => (
   <BaseAutocomplete.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto p-1.5 outline-none empty:p-0", className)}
     {...props}
   />
 )
@@ -210,7 +209,7 @@ export const AutocompleteItem = ({
 }: AutocompleteItemProps) => (
   <BaseAutocomplete.Item
     className={cn(
-      "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+      "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",
       motion.colors,
       "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-highlighted:text-fg-primary",
       className,
@@ -224,7 +223,7 @@ export const AutocompleteEmpty = ({
   ...props
 }: AutocompleteEmptyProps) => (
   <BaseAutocomplete.Empty
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    className={cn("px-3 py-2 text-sm text-fg-tertiary empty:hidden", className)}
     {...props}
   />
 )
@@ -234,7 +233,7 @@ export const AutocompleteStatus = ({
   ...props
 }: AutocompleteStatusProps) => (
   <BaseAutocomplete.Status
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary", className)}
+    className={cn("px-3 py-2 text-sm text-fg-tertiary", className)}
     {...props}
   />
 )
@@ -251,7 +250,7 @@ export const AutocompleteGroupLabel = ({
   ...props
 }: AutocompleteGroupLabelProps) => (
   <BaseAutocomplete.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn("px-3 py-1.5 text-xs text-fg-tertiary", 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 }

package/src/breadcrumb.tsx

@@ -1,16 +1,30 @@
-import type { ComponentProps, ReactNode } from "react";
-import { IconChevronRightSmall } from "./icons";
-import { cn } from "./lib/cn";
-import { motion } from "./lib/motion";
+import { cva, type VariantProps } from "class-variance-authority"
+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">
+
+const breadcrumbSeparatorVariants = cva("text-fg-tertiary", {
+  variants: {
+    variant: {
+      chevron: "[&_svg]:size-3.5",
+      slash: "px-0.5",
+    },
+  },
+  defaultVariants: {
+    variant: "chevron",
+  },
+})
 
-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;
-};
+  children?: ReactNode
+} & VariantProps<typeof breadcrumbSeparatorVariants>
 
 export const Breadcrumb = ({ className, ...props }: BreadcrumbProps) => (
   <nav
@@ -18,27 +32,27 @@ export const Breadcrumb = ({ className, ...props }: BreadcrumbProps) => (
     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)}
+    className={cn("flex flex-wrap items-center gap-0.5", className)}
     {...props}
   />
-);
+)
 
 export const BreadcrumbItem = ({
   className,
   ...props
 }: BreadcrumbItemProps) => (
   <li
-    className={cn("inline-flex items-center gap-1.5", className)}
+    className={cn("inline-flex items-center gap-1.5 px-1", className)}
     {...props}
   />
-);
+)
 
 export const BreadcrumbLink = ({
   className,
@@ -52,7 +66,7 @@ export const BreadcrumbLink = ({
     )}
     {...props}
   />
-);
+)
 
 export const BreadcrumbPage = ({
   className,
@@ -63,19 +77,23 @@ export const BreadcrumbPage = ({
     className={cn("font-medium text-fg-primary", className)}
     {...props}
   />
-);
+)
 
 export const BreadcrumbSeparator = ({
   className,
   children,
+  variant,
   ...props
 }: BreadcrumbSeparatorProps) => (
   <li
     role="presentation"
     aria-hidden
-    className={cn("text-fg-tertiary [&_svg]:size-3.5", className)}
+    className={cn(breadcrumbSeparatorVariants({ variant }), className)}
     {...props}
   >
-    {children ?? <IconChevronRightSmall />}
+    {children ??
+      (variant === "slash" ? "/" : <IconChevronRightSmall aria-hidden />)}
   </li>
-);
+)
+
+export { breadcrumbSeparatorVariants }

package/src/button.tsx

@@ -3,7 +3,7 @@ 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",
+  "text-sm inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap transition-all duration-[var(--duration-sm)] ease-enter 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: {
@@ -25,7 +25,7 @@ const buttonVariants = cva(
       },
       rounded: {
         true: "rounded-full",
-        false: "rounded-md",
+        false: "rounded-lg",
       },
       iconOnly: {
         true: "px-0",

package/src/calendar.tsx

@@ -8,9 +8,9 @@ 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",
+  "inline-flex size-6 items-center justify-center rounded-md border border-transparent 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",
+  "hover:bg-background-tertiary hover:text-fg-primary outline-none focus-visible:border-ring focus-visible:bg-background-tertiary focus-visible:text-fg-primary focus-visible:ring-2 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
 )
 
 const CalendarChevron = ({
@@ -40,34 +40,45 @@ export const Calendar = ({
   className,
   classNames,
   showOutsideDays = true,
+  weekStartsOn = 1,
   components,
   ...props
 }: CalendarProps) => (
   <DayPicker
     showOutsideDays={showOutsideDays}
-    className={cn("w-fit p-3", className)}
+    weekStartsOn={weekStartsOn}
+    className={cn(
+      "w-64 rounded-xl border border-border-primary bg-surface 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",
+      month: "flex w-full flex-col",
+      month_caption: "flex h-8 items-start justify-start",
       caption_label: "text-sm-strong text-fg-primary",
-      nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+      nav: "absolute top-0 right-0 flex items-center",
       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",
+        "flex w-8 items-center justify-center pb-1 text-xs font-normal text-fg-tertiary select-none",
+      weeks: "flex flex-col gap-1",
+      week: "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",
+        "inline-flex size-8 items-center justify-center rounded-lg text-sm text-fg-primary tabular-nums",
         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",
+        "hover:bg-background-tertiary outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring 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",
+      range_start:
+        "rounded-l-lg bg-brand-primary/10 last:rounded-r-lg [&>button]:relative [&>button]:z-[1]",
+      range_middle:
+        "bg-brand-primary/10 first:rounded-l-lg last:rounded-r-lg [&>button]:!rounded-none [&>button]:!bg-transparent [&>button]:!text-fg-primary [&>button]:hover:!bg-brand-primary/15",
+      range_end:
+        "rounded-r-lg bg-brand-primary/10 first:rounded-l-lg [&>button]:relative [&>button]:z-[1]",
       today:
         "[&>button]:font-medium [&>button]:ring-1 [&>button]:ring-inset [&>button]:ring-border-secondary",
       outside: "[&>button]:text-fg-quaternary",

package/src/card.tsx

@@ -1,32 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority"
 import type { HTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
-export type CardProps = HTMLAttributes<HTMLDivElement>
+const cardVariants = cva("flex flex-col rounded-xl bg-surface text-fg-primary", {
+  variants: {
+    variant: {
+      elevated: "shadow-lg",
+      outline: "border border-border-primary",
+      ghost: "",
+    },
+    padding: {
+      md: "gap-6 py-6",
+      none: "",
+    },
+  },
+  defaultVariants: {
+    variant: "elevated",
+    padding: "md",
+  },
+})
+
+export type CardProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof cardVariants>
 export type CardHeaderProps = HTMLAttributes<HTMLDivElement>
 export type CardTitleProps = HTMLAttributes<HTMLHeadingElement>
 export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>
+export type CardActionProps = HTMLAttributes<HTMLDivElement>
 export type CardContentProps = HTMLAttributes<HTMLDivElement>
 export type CardFooterProps = HTMLAttributes<HTMLDivElement>
 
-export const Card = ({ className, ...props }: CardProps) => (
+export const Card = ({ className, variant, padding, ...props }: CardProps) => (
   <div
-    className={cn(
-      "flex flex-col overflow-hidden rounded-xl border border-border-primary bg-surface",
-      className,
-    )}
     {...props}
+    data-slot="card"
+    className={cn(cardVariants({ variant, padding }), className)}
   />
 )
 
 export const CardHeader = ({ className, ...props }: CardHeaderProps) => (
   <div
-    className={cn("flex flex-col gap-1 px-5 pt-5 pb-3", className)}
     {...props}
+    data-slot="card-header"
+    className={cn(
+      "grid auto-rows-min items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+      className,
+    )}
   />
 )
 
 export const CardTitle = ({ className, ...props }: CardTitleProps) => (
-  <h3 className={cn("text-sm-strong text-fg-primary", className)} {...props} />
+  <h3
+    {...props}
+    data-slot="card-title"
+    className={cn("text-sm-strong leading-none text-fg-primary", className)}
+  />
 )
 
 export const CardDescription = ({
@@ -34,21 +61,37 @@ export const CardDescription = ({
   ...props
 }: CardDescriptionProps) => (
   <p
-    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
     {...props}
+    data-slot="card-description"
+    className={cn("text-sm text-fg-secondary", className)}
+  />
+)
+
+export const CardAction = ({ className, ...props }: CardActionProps) => (
+  <div
+    {...props}
+    data-slot="card-action"
+    className={cn(
+      "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+      className,
+    )}
   />
 )
 
 export const CardContent = ({ className, ...props }: CardContentProps) => (
-  <div className={cn("px-5 pb-5", className)} {...props} />
+  <div
+    {...props}
+    data-slot="card-content"
+    className={cn("px-6", className)}
+  />
 )
 
 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}
+    data-slot="card-footer"
+    className={cn("flex items-center gap-2 px-6", className)}
   />
 )
+
+export { cardVariants }