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

package/src/date-picker.tsx

@@ -0,0 +1,174 @@
+"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"
+        // Default md height, so the trigger lines up with every other field
+        // in a form rather than sitting 4px short of them.
+        size="md"
+        variant="outline"
+        disabled={disabled}
+        prefix={<IconCalendar1 aria-hidden />}
+        // The outline button fills on hover, which is right for a button and
+        // wrong here: this reads as a field, and fields in the system keep
+        // their surface. The border and the popover carry the state.
+        className={cn("w-56 justify-start hover:bg-surface", 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/dialog.tsx

@@ -2,6 +2,7 @@
 
 import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import type { ComponentProps, HTMLAttributes } from "react"
+import { useRef } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
 
@@ -41,16 +42,38 @@ export const DialogBackdrop = ({
   />
 )
 
-export const DialogPopup = ({ className, ...props }: DialogPopupProps) => (
-  <BaseDialog.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-raised p-5 shadow-md outline-none max-sm:max-w-[calc(100vw-2rem)]",
-      motion.popupCenter,
-      className,
-    )}
-    {...props}
-  />
-)
+export const DialogPopup = ({
+  className,
+  initialFocus,
+  ref,
+  ...props
+}: DialogPopupProps) => {
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const setRef = (node: HTMLDivElement | null) => {
+    popupRef.current = node
+    if (typeof ref === "function") ref(node)
+    else if (ref) ref.current = node
+  }
+
+  return (
+    <BaseDialog.Popup
+      ref={setRef}
+      // Base UI focuses the first tabbable element by default. In a dialog long
+      // enough to scroll that is usually the action at the bottom, and focusing
+      // it scrolls the body to the end before the reader has seen the start —
+      // so the popup takes focus itself, which is what its `tabindex="-1"` is
+      // for. Callers can still name their own target.
+      initialFocus={initialFocus ?? popupRef}
+      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-raised p-5 shadow-md outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto max-sm:max-w-[calc(100vw-2rem)]",
+        motion.popupCenter,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
 
 export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
   <BaseDialog.Title

package/src/drawer.tsx

@@ -69,7 +69,7 @@ export const DrawerPopup = ({ className, ...props }: DrawerPopupProps) => (
   <BaseDrawer.Popup
     className={cn(
       "fixed z-50 flex flex-col border-border-primary bg-surface shadow-md outline-none",
-      "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+      "transition-[transform,opacity] duration-[var(--duration-lg)] ease-move motion-reduce:transition-none",
       "data-swiping:duration-0",
       // Right panel (swipeDirection="right")
       "data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-sm data-[swipe-direction=right]:border-l",

package/src/empty.tsx

@@ -10,7 +10,7 @@ export type EmptyActionsProps = ComponentProps<"div">;
 export const Empty = ({ className, ...props }: EmptyProps) => (
   <div
     className={cn(
-      "flex min-h-48 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
+      "flex min-h-48 flex-col items-center justify-center rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
       className,
     )}
     {...props}
@@ -20,7 +20,7 @@ export const Empty = ({ className, ...props }: EmptyProps) => (
 export const EmptyIcon = ({ className, ...props }: EmptyIconProps) => (
   <div
     className={cn(
-      "flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
+      "mb-4 flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ export const EmptyDescription = ({
   ...props
 }: EmptyDescriptionProps) => (
   <p
-    className={cn("max-w-sm text-sm text-fg-secondary", className)}
+    className={cn("mt-1 max-w-sm text-sm text-fg-secondary", className)}
     {...props}
   />
 );
@@ -44,7 +44,7 @@ export const EmptyDescription = ({
 export const EmptyActions = ({ className, ...props }: EmptyActionsProps) => (
   <div
     className={cn(
-      "mt-1 flex flex-wrap items-center justify-center gap-2",
+      "mt-4 flex flex-wrap items-center justify-center gap-2",
       className,
     )}
     {...props}

package/src/field.tsx

@@ -49,7 +49,7 @@ export const FieldError = ({ className, ...props }: FieldErrorProps) => (
 export const FieldControl = ({ className, ...props }: FieldControlProps) => (
   <BaseField.Control
     className={cn(
-      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary",
+      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary",
       "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-invalid:border-destructive data-invalid:focus-visible:border-destructive data-invalid:focus-visible:ring-destructive/20",
       "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",

package/src/filter-group.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import { Toggle as BaseToggle } from "@base-ui/react/toggle"
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
+import { cva, type VariantProps } from "class-variance-authority"
+import { createContext, type ComponentProps, useContext } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+const filterGroupVariants = cva("flex w-fit items-center", {
+  variants: {
+    variant: {
+      pill: "flex-wrap gap-1",
+      segmented: "gap-0.5 rounded-lg bg-background-tertiary p-0.5",
+    },
+  },
+  defaultVariants: {
+    variant: "pill",
+  },
+})
+
+const filterItemVariants = cva(
+  "group/filter-item inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap border border-transparent text-fg-tertiary outline-none 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 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:text-fg-primary",
+  {
+    variants: {
+      variant: {
+        pill: "rounded-full hover:bg-background-tertiary data-pressed:bg-background-tertiary",
+        segmented:
+          "rounded-md hover:bg-background-quaternary data-pressed:bg-surface-raised data-pressed:shadow-hairline",
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+      },
+    },
+    compoundVariants: [
+      { variant: "pill", size: "sm", class: "h-8 px-3" },
+      { variant: "pill", size: "md", class: "h-9 px-4" },
+      { variant: "pill", size: "lg", class: "h-10 px-5" },
+      { variant: "segmented", size: "sm", class: "h-7 px-2.5" },
+      { variant: "segmented", size: "md", class: "h-8 px-3" },
+      { variant: "segmented", size: "lg", class: "h-9 px-3.5" },
+    ],
+    defaultVariants: {
+      variant: "pill",
+      size: "md",
+    },
+  },
+)
+
+export type FilterGroupVariant = NonNullable<
+  VariantProps<typeof filterGroupVariants>["variant"]
+>
+export type FilterGroupSize = NonNullable<
+  VariantProps<typeof filterItemVariants>["size"]
+>
+
+type FilterGroupStyleContextValue = {
+  variant: FilterGroupVariant
+  size: FilterGroupSize
+}
+
+const FilterGroupStyleContext = createContext<FilterGroupStyleContextValue>({
+  variant: "pill",
+  size: "md",
+})
+
+export type FilterGroupProps = ComponentProps<typeof BaseToggleGroup> &
+  VariantProps<typeof filterGroupVariants> & {
+    /** Whether pressing the active item can clear a single-select group. */
+    allowEmpty?: boolean
+    size?: FilterGroupSize
+  }
+export type FilterItemProps = ComponentProps<typeof BaseToggle> &
+  VariantProps<typeof filterItemVariants>
+export type FilterCountProps = ComponentProps<"span">
+
+export const FilterGroup = ({
+  className,
+  variant = "pill",
+  size = "md",
+  allowEmpty = false,
+  multiple = false,
+  onValueChange,
+  ...props
+}: FilterGroupProps) => (
+  <FilterGroupStyleContext.Provider value={{ variant: variant ?? "pill", size }}>
+    <BaseToggleGroup
+      className={cn(filterGroupVariants({ variant }), className)}
+      multiple={multiple}
+      onValueChange={(value, eventDetails) => {
+        if (!multiple && !allowEmpty && value.length === 0) {
+          eventDetails.cancel()
+          return
+        }
+        onValueChange?.(value, eventDetails)
+      }}
+      {...props}
+    />
+  </FilterGroupStyleContext.Provider>
+)
+
+export const FilterItem = ({
+  className,
+  variant,
+  size,
+  type = "button",
+  ...props
+}: FilterItemProps) => {
+  const styles = useContext(FilterGroupStyleContext)
+
+  return (
+    <BaseToggle
+      type={type}
+      className={cn(
+        filterItemVariants({
+          variant: variant ?? styles.variant,
+          size: size ?? styles.size,
+        }),
+        motion.colors,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const FilterCount = ({ className, ...props }: FilterCountProps) => (
+  <span
+    className={cn(
+      "text-2xs-strong inline-flex min-w-4 items-center justify-center rounded-full bg-background-quaternary px-1 py-0.5 text-fg-secondary tabular-nums group-data-pressed/filter-item:bg-surface",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export { filterGroupVariants, filterItemVariants }

package/src/icons.tsx

@@ -1,23 +1,36 @@
 "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 { 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 { IconFullScreen as IconFullScreenBase } from "@central-icons-react/round-outlined-radius-2-stroke-2/IconFullScreen"
 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 { 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,7 +55,9 @@ export const withCentralIconDefaults = (
   return CentralIcon
 }
 
+export const IconArrowDown = withCentralIconDefaults(IconArrowDownBase)
 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,25 +67,43 @@ 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 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 IconSun = withCentralIconDefaults(IconSunBase)
+export const IconVolumeFull = withCentralIconDefaults(IconVolumeFullBase)
+export const IconVolumeOff = withCentralIconDefaults(IconVolumeOffBase)
 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 +118,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