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

package/package.json

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

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

@@ -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 }

package/src/carousel.tsx

@@ -8,6 +8,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useSyncExternalStore,
   type ComponentProps,
   type KeyboardEvent,
@@ -21,6 +22,9 @@ type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 type CarouselOptions = UseCarouselParameters[0]
 type CarouselPlugin = UseCarouselParameters[1]
 
+const TRACKPAD_SWIPE_THRESHOLD = 24
+const TRACKPAD_GESTURE_END_DELAY = 140
+
 type CarouselContextValue = {
   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
   api: CarouselApi
@@ -46,6 +50,8 @@ export type CarouselProps = ComponentProps<"div"> & {
   plugins?: CarouselPlugin
   orientation?: "horizontal" | "vertical"
   setApi?: (api: CarouselApi) => void
+  /** Adds directional edge fades wherever more slides are available. */
+  fade?: boolean
 }
 
 export type CarouselContentProps = ComponentProps<"div">
@@ -53,16 +59,54 @@ export type CarouselItemProps = ComponentProps<"div">
 export type CarouselPreviousProps = ComponentProps<typeof Button>
 export type CarouselNextProps = ComponentProps<typeof Button>
 
+const CarouselEdgeFades = () => {
+  const { orientation, canScrollPrev, canScrollNext } = useCarousel()
+  const horizontal = orientation === "horizontal"
+  const sharedClassName =
+    "pointer-events-none absolute z-10 opacity-0 transition-opacity duration-[var(--duration-lg)] ease-enter data-[visible=true]:opacity-100 motion-reduce:transition-none"
+
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        data-slot={horizontal ? "carousel-fade-left" : "carousel-fade-top"}
+        data-visible={canScrollPrev}
+        className={cn(
+          sharedClassName,
+          horizontal
+            ? "-top-px -bottom-px -left-px w-20 bg-linear-to-r from-surface via-surface/60 via-40% to-transparent"
+            : "-top-px -right-px -left-px h-20 bg-linear-to-b from-surface via-surface/60 via-40% to-transparent",
+        )}
+      />
+      <div
+        aria-hidden="true"
+        data-slot={horizontal ? "carousel-fade-right" : "carousel-fade-bottom"}
+        data-visible={canScrollNext}
+        className={cn(
+          sharedClassName,
+          horizontal
+            ? "-top-px -right-px -bottom-px w-20 bg-linear-to-l from-surface via-surface/60 via-40% to-transparent"
+            : "-right-px -bottom-px -left-px h-20 bg-linear-to-t from-surface via-surface/60 via-40% to-transparent",
+        )}
+      />
+    </>
+  )
+}
+
 export const Carousel = ({
   orientation = "horizontal",
+  fade = false,
   opts,
   setApi,
   plugins,
   className,
   children,
   onKeyDownCapture,
+  tabIndex,
+  ref: forwardedRef,
   ...props
 }: CarouselProps) => {
+  const carouselRootRef = useRef<HTMLDivElement | null>(null)
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
@@ -107,6 +151,35 @@ export const Carousel = ({
     api?.scrollNext()
   }, [api])
 
+  const canScrollPrevRef = useRef(canScrollPrev)
+  const canScrollNextRef = useRef(canScrollNext)
+  const scrollPrevRef = useRef(scrollPrev)
+  const scrollNextRef = useRef(scrollNext)
+
+  useEffect(() => {
+    canScrollPrevRef.current = canScrollPrev
+    canScrollNextRef.current = canScrollNext
+    scrollPrevRef.current = scrollPrev
+    scrollNextRef.current = scrollNext
+  }, [canScrollNext, canScrollPrev, scrollNext, scrollPrev])
+
+  const trackpadDelta = useRef(0)
+  const trackpadGestureHandled = useRef(false)
+  const trackpadGestureTimeout = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  )
+
+  const scheduleTrackpadGestureEnd = useCallback(() => {
+    if (trackpadGestureTimeout.current) {
+      clearTimeout(trackpadGestureTimeout.current)
+    }
+    trackpadGestureTimeout.current = setTimeout(() => {
+      trackpadDelta.current = 0
+      trackpadGestureHandled.current = false
+      trackpadGestureTimeout.current = null
+    }, TRACKPAD_GESTURE_END_DELAY)
+  }, [])
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       onKeyDownCapture?.(event)
@@ -122,6 +195,72 @@ export const Carousel = ({
     [onKeyDownCapture, scrollNext, scrollPrev],
   )
 
+  const handleWheel = useCallback(
+    (event: globalThis.WheelEvent) => {
+      if (event.defaultPrevented || orientation !== "horizontal") return
+
+      const deltaMultiplier =
+        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 100 : 1
+      const horizontalDelta = event.deltaX * deltaMultiplier
+      const verticalDelta = event.deltaY * deltaMultiplier
+
+      if (
+        Math.abs(horizontalDelta) <= Math.abs(verticalDelta) ||
+        Math.abs(horizontalDelta) < 1
+      ) {
+        return
+      }
+
+      if (trackpadGestureHandled.current) {
+        event.preventDefault()
+        scheduleTrackpadGestureEnd()
+        return
+      }
+
+      const canScrollInDirection =
+        horizontalDelta > 0
+          ? canScrollNextRef.current
+          : canScrollPrevRef.current
+      if (!canScrollInDirection) return
+
+      event.preventDefault()
+      trackpadDelta.current += horizontalDelta
+      scheduleTrackpadGestureEnd()
+
+      if (Math.abs(trackpadDelta.current) < TRACKPAD_SWIPE_THRESHOLD) return
+
+      trackpadGestureHandled.current = true
+      trackpadDelta.current = 0
+      if (horizontalDelta > 0) scrollNextRef.current()
+      else scrollPrevRef.current()
+    },
+    [orientation, scheduleTrackpadGestureEnd],
+  )
+
+  useEffect(() => {
+    const root = carouselRootRef.current
+    if (!root) return
+
+    root.addEventListener("wheel", handleWheel, { passive: false })
+    return () => {
+      root.removeEventListener("wheel", handleWheel)
+      if (trackpadGestureTimeout.current) {
+        clearTimeout(trackpadGestureTimeout.current)
+      }
+      trackpadDelta.current = 0
+      trackpadGestureHandled.current = false
+    }
+  }, [handleWheel])
+
+  const setCarouselRootRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      carouselRootRef.current = node
+      if (typeof forwardedRef === "function") forwardedRef(node)
+      else if (forwardedRef) forwardedRef.current = node
+    },
+    [forwardedRef],
+  )
+
   useEffect(() => {
     if (!api || !setApi) return
     setApi(api)
@@ -140,14 +279,23 @@ export const Carousel = ({
       }}
     >
       <div
+        ref={setCarouselRootRef}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
-        className={cn("relative", className)}
+        data-fade={fade || undefined}
+        className={cn(
+          "relative",
+          fade &&
+            "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,
+        )}
         onKeyDownCapture={handleKeyDown}
+        tabIndex={tabIndex ?? (fade ? 0 : undefined)}
         {...props}
       >
         {children}
+        {fade ? <CarouselEdgeFades /> : null}
       </div>
     </CarouselContext.Provider>
   )
@@ -160,7 +308,16 @@ export const CarouselContent = ({
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-viewport">
+    <div
+      ref={carouselRef}
+      className={cn(
+        "overflow-hidden",
+        orientation === "horizontal"
+          ? "touch-pan-y overscroll-x-contain"
+          : "touch-pan-x overscroll-y-contain",
+      )}
+      data-slot="carousel-viewport"
+    >
       <div
         data-slot="carousel-content"
         className={cn(
@@ -194,7 +351,7 @@ export const CarouselItem = ({ className, ...props }: CarouselItemProps) => {
 
 export const CarouselPrevious = ({
   className,
-  variant = "outline",
+  variant = "ghost",
   size = "md",
   ...props
 }: CarouselPreviousProps) => {
@@ -211,7 +368,7 @@ export const CarouselPrevious = ({
       aria-label="Previous slide"
       data-slot="carousel-previous"
       className={cn(
-        "absolute size-9",
+        "absolute size-9 border-0 focus-visible:border-0",
         orientation === "horizontal"
           ? "top-1/2 -left-12 -translate-y-1/2 active:!-translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
@@ -227,7 +384,7 @@ export const CarouselPrevious = ({
 
 export const CarouselNext = ({
   className,
-  variant = "outline",
+  variant = "ghost",
   size = "md",
   ...props
 }: CarouselNextProps) => {
@@ -244,7 +401,7 @@ export const CarouselNext = ({
       aria-label="Next slide"
       data-slot="carousel-next"
       className={cn(
-        "absolute size-9",
+        "absolute size-9 border-0 focus-visible:border-0",
         orientation === "horizontal"
           ? "top-1/2 -right-12 -translate-y-1/2 active:!-translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",

package/src/date-picker.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { useState, type ReactNode } from "react"
+import type { DateRange, PropsBase } from "react-day-picker"
+import { Button } from "./button"
+import { Calendar } from "./calendar"
+import { IconCalendar1 } from "./icons"
+import { cn } from "./lib/cn"
+import {
+  Popover,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTrigger,
+} from "./popover"
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+})
+
+const formatDate = (date: Date) => dateFormatter.format(date)
+
+type DatePickerBaseProps = {
+  /** Options forwarded to Calendar, excluding its selection mode. */
+  calendarProps?: Omit<PropsBase, "mode" | "required">
+  /** Classes applied to the trigger button. */
+  className?: string
+  /** Disables the trigger button. */
+  disabled?: boolean
+  /** Placeholder shown when no date is selected. */
+  placeholder?: string
+}
+
+export type DatePickerSingleProps = DatePickerBaseProps & {
+  mode?: "single"
+  selected?: Date
+  onSelect?: (date: Date | undefined) => void
+}
+
+export type DatePickerRangeProps = DatePickerBaseProps & {
+  mode: "range"
+  selected?: DateRange
+  onSelect?: (range: DateRange | undefined) => void
+}
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps
+
+const DatePickerTrigger = ({
+  className,
+  disabled,
+  empty,
+  label,
+}: {
+  className?: string
+  disabled?: boolean
+  empty: boolean
+  label: string
+}) => (
+  <PopoverTrigger
+    render={
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        disabled={disabled}
+        prefix={<IconCalendar1 aria-hidden />}
+        className={cn("w-56 justify-start", className)}
+      />
+    }
+  >
+    <span
+      className={cn(
+        "min-w-0 flex-1 truncate text-left",
+        empty && "text-fg-tertiary",
+      )}
+    >
+      {label}
+    </span>
+  </PopoverTrigger>
+)
+
+const DatePickerPopup = ({ children }: { children: ReactNode }) => (
+  <PopoverPortal>
+    <PopoverPositioner align="start" sideOffset={6}>
+      <PopoverPopup className="w-auto gap-0 p-0">{children}</PopoverPopup>
+    </PopoverPositioner>
+  </PopoverPortal>
+)
+
+const SingleDatePicker = ({
+  calendarProps,
+  className,
+  disabled,
+  onSelect,
+  placeholder = "Pick a date",
+  selected,
+}: DatePickerSingleProps) => {
+  const [open, setOpen] = useState(false)
+
+  const handleSelect = (date: Date | undefined) => {
+    onSelect?.(date)
+    if (date) setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <DatePickerTrigger
+        className={className}
+        disabled={disabled}
+        empty={!selected}
+        label={selected ? formatDate(selected) : placeholder}
+      />
+      <DatePickerPopup>
+        <Calendar
+          {...calendarProps}
+          className={cn("border-0", calendarProps?.className)}
+          mode="single"
+          selected={selected}
+          onSelect={handleSelect}
+        />
+      </DatePickerPopup>
+    </Popover>
+  )
+}
+
+const RangeDatePicker = ({
+  calendarProps,
+  className,
+  disabled,
+  onSelect,
+  placeholder = "Pick a date range",
+  selected,
+}: DatePickerRangeProps) => {
+  const [open, setOpen] = useState(false)
+  const label = selected?.from
+    ? selected.to
+      ? `${formatDate(selected.from)} – ${formatDate(selected.to)}`
+      : `${formatDate(selected.from)} – Select end date`
+    : placeholder
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <DatePickerTrigger
+        className={className}
+        disabled={disabled}
+        empty={!selected?.from}
+        label={label}
+      />
+      <DatePickerPopup>
+        <Calendar
+          {...calendarProps}
+          className={cn("border-0", calendarProps?.className)}
+          mode="range"
+          selected={selected}
+          onSelect={onSelect}
+        />
+      </DatePickerPopup>
+    </Popover>
+  )
+}
+
+export const DatePicker = (props: DatePickerProps) =>
+  props.mode === "range" ? (
+    <RangeDatePicker {...props} />
+  ) : (
+    <SingleDatePicker {...props} />
+  )

package/src/icons.tsx

@@ -2,13 +2,19 @@
 
 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 { 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 { 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 { IconCircleCheck as IconCircleCheckBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconCircleCheck"
+import { IconCircleInfo as IconCircleInfoBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconCircleInfo"
 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 { 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 { 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"
@@ -17,6 +23,7 @@ import { IconPeople as IconPeopleBase } from "@central-icons-react/round-outline
 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 { 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"
@@ -43,6 +50,7 @@ export const withCentralIconDefaults = (
 }
 
 export const IconBell = withCentralIconDefaults(IconBellBase)
+export const IconCalendar1 = withCentralIconDefaults(IconCalendar1Base)
 export const IconChainLink1 = withCentralIconDefaults(IconChainLink1Base)
 export const IconCheckmark1 = withCentralIconDefaults(IconCheckmark1Base)
 export const IconChevronBottom = withCentralIconDefaults(IconChevronBottomBase)
@@ -52,8 +60,19 @@ export const IconChevronDownSmall = withCentralIconDefaults(
 export const IconChevronRightSmall = withCentralIconDefaults(
   IconChevronRightSmallBase,
 )
+export const IconCircleCheck = withCentralIconDefaults(IconCircleCheckBase)
+export const IconCircleInfo = withCentralIconDefaults(IconCircleInfoBase)
 export const IconClipboard = withCentralIconDefaults(IconClipboardBase)
 export const IconCrossSmall = withCentralIconDefaults(IconCrossSmallBase)
+export const IconDotGrid1x3Horizontal = withCentralIconDefaults(
+  IconDotGrid1x3HorizontalBase,
+)
+export const IconExclamationCircle = withCentralIconDefaults(
+  IconExclamationCircleBase,
+)
+export const IconExclamationTriangle = withCentralIconDefaults(
+  IconExclamationTriangleBase,
+)
 export const IconHome = withCentralIconDefaults(IconHomeBase)
 export const IconMagnifyingGlass = withCentralIconDefaults(
   IconMagnifyingGlassBase,
@@ -66,11 +85,13 @@ export const IconSettingsGear1 = withCentralIconDefaults(IconSettingsGear1Base)
 export const IconSquareBehindSquare6 = withCentralIconDefaults(
   IconSquareBehindSquare6Base,
 )
+export const IconStar = withCentralIconDefaults(IconStarBase)
 export const IconSun = withCentralIconDefaults(IconSunBase)
 export const IconX = withCentralIconDefaults(IconXBase)
 
 export const iconGallery = [
   { name: "IconHome", Icon: IconHome },
+  { name: "IconCalendar1", Icon: IconCalendar1 },
   { name: "IconMagnifyingGlass", Icon: IconMagnifyingGlass },
   { name: "IconSettingsGear1", Icon: IconSettingsGear1 },
   { name: "IconBell", Icon: IconBell },
@@ -85,7 +106,13 @@ export const iconGallery = [
   { name: "IconChevronBottom", Icon: IconChevronBottom },
   { name: "IconChevronDownSmall", Icon: IconChevronDownSmall },
   { name: "IconChevronRightSmall", Icon: IconChevronRightSmall },
+  { name: "IconCircleCheck", Icon: IconCircleCheck },
+  { name: "IconCircleInfo", Icon: IconCircleInfo },
   { name: "IconClipboard", Icon: IconClipboard },
+  { name: "IconDotGrid1x3Horizontal", Icon: IconDotGrid1x3Horizontal },
   { name: "IconSquareBehindSquare6", Icon: IconSquareBehindSquare6 },
   { name: "IconChainLink1", Icon: IconChainLink1 },
+  { name: "IconExclamationCircle", Icon: IconExclamationCircle },
+  { name: "IconExclamationTriangle", Icon: IconExclamationTriangle },
+  { name: "IconStar", Icon: IconStar },
 ] as const

package/src/index.ts

@@ -92,17 +92,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 +660,7 @@ export {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  breadcrumbSeparatorVariants,
   type BreadcrumbProps,
   type BreadcrumbListProps,
   type BreadcrumbItemProps,
@@ -785,13 +796,19 @@ export {
   withCentralIconDefaults,
   iconGallery,
   IconBell,
+  IconCalendar1,
   IconChainLink1,
   IconCheckmark1,
   IconChevronBottom,
   IconChevronDownSmall,
   IconChevronRightSmall,
+  IconCircleCheck,
+  IconCircleInfo,
   IconClipboard,
   IconCrossSmall,
+  IconDotGrid1x3Horizontal,
+  IconExclamationCircle,
+  IconExclamationTriangle,
   IconHome,
   IconMagnifyingGlass,
   IconMinus,
@@ -800,6 +817,7 @@ export {
   IconPlus,
   IconSettingsGear1,
   IconSquareBehindSquare6,
+  IconStar,
   IconSun,
   IconX,
   type CentralIconProps,

package/src/menu.tsx

@@ -34,7 +34,7 @@ export type MenuSubmenuTriggerProps = ComponentProps<
 export type MenuViewportProps = ComponentProps<typeof BaseMenu.Viewport>
 
 const menuItemClassName = 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 h-8 cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 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",
 )
@@ -59,7 +59,7 @@ export const MenuBackdrop = ({ className, ...props }: MenuBackdropProps) => (
 )
 
 export const MenuPositioner = ({
-  sideOffset = 4,
+  sideOffset = 8,
   className,
   ...props
 }: MenuPositionerProps) => (
@@ -73,7 +73,7 @@ export const MenuPositioner = ({
 export const MenuPopup = ({ className, ...props }: MenuPopupProps) => (
   <BaseMenu.Popup
     className={cn(
-      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      "z-50 min-w-40 overflow-hidden rounded-xl border border-[var(--border-faint)] bg-surface p-1.5 shadow-lg outline-none",
       motion.popupAnchor,
       className,
     )}