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

package/src/pagination.tsx

@@ -1,17 +1,89 @@
-import type { ComponentProps } from "react";
-import { IconChevronRightSmall } from "./icons";
-import { cn } from "./lib/cn";
-import { motion } from "./lib/motion";
-
-export type PaginationProps = ComponentProps<"nav">;
-export type PaginationContentProps = ComponentProps<"ul">;
-export type PaginationItemProps = ComponentProps<"li">;
-export type PaginationLinkProps = ComponentProps<"button"> & {
-  active?: boolean;
-};
-export type PaginationPreviousProps = PaginationLinkProps;
-export type PaginationNextProps = PaginationLinkProps;
-export type PaginationEllipsisProps = ComponentProps<"span">;
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { IconChevronRightSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+const paginationLinkVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center rounded-md border border-transparent text-fg-secondary 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 data-[active]:border-border-primary data-[active]:bg-surface data-[active]:text-fg-primary [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-10 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+const paginationDirectionVariants = cva("", {
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: "",
+    },
+    iconOnly: {
+      true: "",
+      false: "w-auto gap-1",
+    },
+  },
+  compoundVariants: [
+    { size: "sm", iconOnly: false, class: "px-2.5" },
+    { size: "md", iconOnly: false, class: "px-3" },
+    { size: "lg", iconOnly: false, class: "px-3.5" },
+  ],
+  defaultVariants: {
+    size: "md",
+    iconOnly: false,
+  },
+})
+
+export type PaginationSize = NonNullable<
+  VariantProps<typeof paginationLinkVariants>["size"]
+>
+
+type PaginationLinkCommonProps = VariantProps<typeof paginationLinkVariants> & {
+  active?: boolean
+}
+
+export type PaginationButtonProps = Omit<ComponentProps<"button">, "size"> &
+  PaginationLinkCommonProps & {
+    href?: never
+  }
+export type PaginationAnchorProps = Omit<ComponentProps<"a">, "size"> &
+  PaginationLinkCommonProps & {
+    href: string
+    disabled?: boolean
+  }
+export type PaginationLinkProps =
+  | PaginationButtonProps
+  | PaginationAnchorProps
+export type PaginationProps = ComponentProps<"nav">
+export type PaginationContentProps = ComponentProps<"ul">
+export type PaginationItemProps = ComponentProps<"li">
+export type PaginationPreviousProps = PaginationLinkProps & {
+  iconOnly?: boolean
+}
+export type PaginationNextProps = PaginationPreviousProps
+export type PaginationFirstProps = PaginationPreviousProps
+export type PaginationLastProps = PaginationPreviousProps
+export type PaginationEllipsisProps = ComponentProps<"span">
+export type PaginationStatusProps = ComponentProps<"span"> & {
+  page: number
+  totalPages: number
+}
+export type PaginationRangeProps = ComponentProps<"span"> & {
+  start: number
+  end: number
+  total: number
+}
 
 export const Pagination = ({ className, ...props }: PaginationProps) => (
   <nav
@@ -19,60 +91,169 @@ export const Pagination = ({ className, ...props }: PaginationProps) => (
     className={cn("flex w-full justify-center", className)}
     {...props}
   />
-);
+)
 
 export const PaginationContent = ({
   className,
   ...props
 }: PaginationContentProps) => (
   <ul className={cn("flex items-center gap-1", className)} {...props} />
-);
+)
 
 export const PaginationItem = ({
   className,
   ...props
-}: PaginationItemProps) => <li className={cn("flex", className)} {...props} />;
+}: PaginationItemProps) => (
+  <li className={cn("flex items-center", className)} {...props} />
+)
 
-export const PaginationLink = ({
-  className,
-  active = false,
-  type = "button",
-  ...props
-}: PaginationLinkProps) => (
-  <button
-    type={type}
-    aria-current={active ? "page" : undefined}
-    data-active={active || undefined}
-    className={cn(
-      "inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-transparent text-sm text-fg-secondary 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 data-[active]:border-border-primary data-[active]:bg-surface data-[active]:text-fg-primary",
-      motion.colors,
-      className,
-    )}
-    {...props}
-  />
-);
+export const PaginationLink = (props: PaginationLinkProps) => {
+  const { className, active = false, size, ...linkProps } = props
+  const classes = cn(
+    paginationLinkVariants({ size }),
+    motion.colors,
+    className,
+  )
+
+  if ("href" in linkProps && typeof linkProps.href === "string") {
+    const {
+      disabled = false,
+      onClick,
+      tabIndex,
+      ...anchorProps
+    } = linkProps as PaginationAnchorProps
+
+    return (
+      <a
+        {...anchorProps}
+        aria-current={active ? "page" : undefined}
+        aria-disabled={disabled || undefined}
+        data-active={active || undefined}
+        tabIndex={disabled ? -1 : tabIndex}
+        className={classes}
+        onClick={(event) => {
+          if (disabled) {
+            event.preventDefault()
+            return
+          }
+          onClick?.(event)
+        }}
+      />
+    )
+  }
+
+  const { type = "button", ...buttonProps } =
+    linkProps as PaginationButtonProps
+
+  return (
+    <button
+      type={type}
+      aria-current={active ? "page" : undefined}
+      data-active={active || undefined}
+      className={classes}
+      {...buttonProps}
+    />
+  )
+}
+
+const DoubleChevron = ({ direction }: { direction: "first" | "last" }) => (
+  <span className="flex -space-x-2" aria-hidden>
+    <IconChevronRightSmall
+      className={direction === "first" ? "rotate-180" : undefined}
+    />
+    <IconChevronRightSmall
+      className={direction === "first" ? "rotate-180" : undefined}
+    />
+  </span>
+)
 
 export const PaginationPrevious = ({
   children = "Previous",
   className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
   ...props
 }: PaginationPreviousProps) => (
-  <PaginationLink className={cn("w-auto gap-1 px-3", className)} {...props}>
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "Previous page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
     <IconChevronRightSmall className="rotate-180" aria-hidden />
-    {children}
+    {iconOnly ? null : children}
   </PaginationLink>
-);
+)
 
 export const PaginationNext = ({
   children = "Next",
   className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
   ...props
 }: PaginationNextProps) => (
-  <PaginationLink className={cn("w-auto gap-1 px-3", className)} {...props}>
-    {children}
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "Next page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
+    {iconOnly ? null : children}
     <IconChevronRightSmall aria-hidden />
   </PaginationLink>
-);
+)
+
+export const PaginationFirst = ({
+  children = "First",
+  className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
+  ...props
+}: PaginationFirstProps) => (
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "First page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
+    <DoubleChevron direction="first" />
+    {iconOnly ? null : children}
+  </PaginationLink>
+)
+
+export const PaginationLast = ({
+  children = "Last",
+  className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
+  ...props
+}: PaginationLastProps) => (
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "Last page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
+    {iconOnly ? null : children}
+    <DoubleChevron direction="last" />
+  </PaginationLink>
+)
 
 export const PaginationEllipsis = ({
   className,
@@ -88,4 +269,39 @@ export const PaginationEllipsis = ({
   >
     …
   </span>
-);
+)
+
+export const PaginationStatus = ({
+  page,
+  totalPages,
+  children,
+  className,
+  ...props
+}: PaginationStatusProps) => (
+  <span
+    aria-live="polite"
+    className={cn("whitespace-nowrap text-sm text-fg-secondary tabular-nums", className)}
+    {...props}
+  >
+    {children ?? `Page ${page} of ${totalPages}`}
+  </span>
+)
+
+export const PaginationRange = ({
+  start,
+  end,
+  total,
+  children,
+  className,
+  ...props
+}: PaginationRangeProps) => (
+  <span
+    aria-live="polite"
+    className={cn("whitespace-nowrap text-sm text-fg-secondary tabular-nums", className)}
+    {...props}
+  >
+    {children ?? `${start}–${end} of ${total}`}
+  </span>
+)
+
+export { paginationDirectionVariants, paginationLinkVariants }

package/src/popover.tsx

@@ -4,6 +4,7 @@ import { Popover as BasePopover } from "@base-ui/react/popover"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type PopoverProps = ComponentProps<typeof BasePopover.Root>
 export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger>
@@ -47,7 +48,8 @@ export const PopoverPositioner = ({
 export const PopoverPopup = ({ className, ...props }: PopoverPopupProps) => (
   <BasePopover.Popup
     className={cn(
-      "z-50 flex w-72 flex-col gap-1 rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      "z-50 flex w-72 flex-col gap-0.5 px-4 py-3",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}

package/src/preview-card.tsx

@@ -4,6 +4,7 @@ import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type PreviewCardProps = ComponentProps<typeof BasePreviewCard.Root>
 export type PreviewCardTriggerProps = ComponentProps<
@@ -67,7 +68,8 @@ export const PreviewCardPopup = ({
 }: PreviewCardPopupProps) => (
   <BasePreviewCard.Popup
     className={cn(
-      "z-50 w-72 overflow-hidden rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      "z-50 w-72 overflow-hidden p-4",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}

package/src/progress.tsx

@@ -52,7 +52,12 @@ export const ProgressIndicator = ({
 }: ProgressIndicatorProps) => (
   <BaseProgress.Indicator
     className={cn(
-      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
+      // Base UI flags a null value with data-indeterminate and leaves the
+      // indicator full width, so without this the bar reads as complete.
+      // A quarter-width stripe crossing the track on the passive curve —
+      // ambient, system-initiated movement.
+      "data-indeterminate:w-1/4 data-indeterminate:animate-[progress-indeterminate_1.4s_var(--ease-passive)_infinite] motion-reduce:animate-none",
       className,
     )}
     {...props}

package/src/questionnaire.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import { Questionnaire as BaseQuestionnaire } from "@shadcn/react/questionnaire"
+import type { VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { buttonVariants } from "./button"
+import { inputVariants } from "./input"
+import { cn } from "./lib/cn"
+
+type StyledProps<T> = Omit<T, "className"> & { className?: string }
+
+export type QuestionnaireProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Root>
+>
+export type QuestionnaireProgressProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Progress>
+>
+export type QuestionnaireItemProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Item>
+>
+export type QuestionnaireTitleProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Title>
+>
+export type QuestionnaireDescriptionProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Description>
+>
+export type QuestionnaireChoicesProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Choices>
+>
+export type QuestionnaireChoiceInputProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.ChoiceInput>
+>
+export type QuestionnaireChoiceLabelProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.ChoiceLabel>
+>
+export type QuestionnaireChoiceShortcutProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.ChoiceShortcut>
+>
+export type QuestionnaireChoiceProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Choice>
+> & {
+  inputProps?: QuestionnaireChoiceInputProps
+  labelProps?: QuestionnaireChoiceLabelProps
+  shortcutProps?: QuestionnaireChoiceShortcutProps
+}
+export type QuestionnaireInputProps = StyledProps<
+  Omit<ComponentProps<typeof BaseQuestionnaire.Input>, "size">
+> &
+  VariantProps<typeof inputVariants>
+export type QuestionnaireErrorProps = StyledProps<
+  ComponentProps<typeof BaseQuestionnaire.Error>
+>
+export type QuestionnaireActionsProps = ComponentProps<"div">
+
+type QuestionnaireNavigationProps<T> = StyledProps<
+  Omit<T, "size" | "variant">
+> &
+  VariantProps<typeof buttonVariants>
+
+export type QuestionnairePreviousProps = QuestionnaireNavigationProps<
+  ComponentProps<typeof BaseQuestionnaire.Previous>
+>
+export type QuestionnaireSkipProps = QuestionnaireNavigationProps<
+  ComponentProps<typeof BaseQuestionnaire.Skip>
+>
+export type QuestionnaireNextProps = QuestionnaireNavigationProps<
+  ComponentProps<typeof BaseQuestionnaire.Next>
+>
+export type QuestionnaireSubmitProps = QuestionnaireNavigationProps<
+  ComponentProps<typeof BaseQuestionnaire.Submit>
+>
+
+export const Questionnaire = ({ className, ...props }: QuestionnaireProps) => (
+  <BaseQuestionnaire.Root
+    className={cn("flex w-full flex-col gap-6", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireProgress = ({
+  className,
+  ...props
+}: QuestionnaireProgressProps) => (
+  <BaseQuestionnaire.Progress
+    className={cn("text-sm text-fg-secondary tabular-nums", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireItem = ({
+  className,
+  ...props
+}: QuestionnaireItemProps) => (
+  <BaseQuestionnaire.Item
+    className={cn(
+      "m-0 min-w-0 border-0 p-0 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const QuestionnaireTitle = ({
+  className,
+  ...props
+}: QuestionnaireTitleProps) => (
+  <BaseQuestionnaire.Title
+    className={cn("heading-sm text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireDescription = ({
+  className,
+  ...props
+}: QuestionnaireDescriptionProps) => (
+  <BaseQuestionnaire.Description
+    className={cn("text-sm mt-1 text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireChoices = ({
+  className,
+  ...props
+}: QuestionnaireChoicesProps) => (
+  <BaseQuestionnaire.Choices
+    className={cn("mt-5 grid gap-2", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireChoiceInput = ({
+  className,
+  ...props
+}: QuestionnaireChoiceInputProps) => (
+  <BaseQuestionnaire.ChoiceInput
+    className={cn(
+      "mt-0.5 size-4 shrink-0 cursor-pointer accent-brand-primary outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const QuestionnaireChoiceLabel = ({
+  className,
+  ...props
+}: QuestionnaireChoiceLabelProps) => (
+  <BaseQuestionnaire.ChoiceLabel
+    className={cn("text-sm min-w-0 text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireChoiceShortcut = ({
+  className,
+  ...props
+}: QuestionnaireChoiceShortcutProps) => (
+  <BaseQuestionnaire.ChoiceShortcut
+    className={cn(
+      "text-xs flex min-w-5 items-center justify-center rounded border border-border-secondary bg-background-secondary px-1 py-0.5 text-fg-tertiary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const QuestionnaireChoice = ({
+  className,
+  children,
+  inputProps,
+  labelProps,
+  shortcutProps,
+  ...props
+}: QuestionnaireChoiceProps) => (
+  <BaseQuestionnaire.Choice
+    className={cn(
+      "group grid cursor-pointer grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-lg border border-border-secondary bg-surface px-3.5 py-3 text-fg-primary outline-none transition-[background-color,border-color,box-shadow] duration-[var(--duration-sm)] ease-enter hover:bg-background-secondary has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/20 data-checked:border-brand-primary data-checked:bg-background-secondary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <QuestionnaireChoiceInput {...inputProps} />
+    <QuestionnaireChoiceLabel {...labelProps}>
+      {children}
+    </QuestionnaireChoiceLabel>
+    <QuestionnaireChoiceShortcut {...shortcutProps} />
+  </BaseQuestionnaire.Choice>
+)
+
+export const QuestionnaireInput = ({
+  className,
+  variant,
+  size,
+  invalid,
+  ...props
+}: QuestionnaireInputProps) => (
+  <BaseQuestionnaire.Input
+    className={cn(inputVariants({ variant, size, invalid }), "mt-5", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireError = ({
+  className,
+  ...props
+}: QuestionnaireErrorProps) => (
+  <BaseQuestionnaire.Error
+    className={cn("text-sm mt-2 text-destructive", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireActions = ({
+  className,
+  ...props
+}: QuestionnaireActionsProps) => (
+  <div
+    className={cn("flex min-h-9 items-center justify-end gap-2", className)}
+    {...props}
+  />
+)
+
+export const QuestionnairePrevious = ({
+  className,
+  variant = "outline",
+  size,
+  ...props
+}: QuestionnairePreviousProps) => (
+  <BaseQuestionnaire.Previous
+    className={cn(buttonVariants({ variant, size }), "mr-auto", className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireSkip = ({
+  className,
+  variant = "ghost",
+  size,
+  ...props
+}: QuestionnaireSkipProps) => (
+  <BaseQuestionnaire.Skip
+    className={cn(buttonVariants({ variant, size }), className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireNext = ({
+  className,
+  variant = "primary",
+  size,
+  ...props
+}: QuestionnaireNextProps) => (
+  <BaseQuestionnaire.Next
+    className={cn(buttonVariants({ variant, size }), className)}
+    {...props}
+  />
+)
+
+export const QuestionnaireSubmit = ({
+  className,
+  variant = "primary",
+  size,
+  ...props
+}: QuestionnaireSubmitProps) => (
+  <BaseQuestionnaire.Submit
+    className={cn(buttonVariants({ variant, size }), className)}
+    {...props}
+  />
+)
+
+export type {
+  QuestionnaireChoiceDefinition,
+  QuestionnaireInputType,
+  QuestionnaireItemDefinition,
+  QuestionnaireItemStatus,
+  QuestionnaireShortcutMode,
+} from "@shadcn/react/questionnaire"

package/src/scroll-area.tsx

@@ -49,7 +49,7 @@ export const ScrollAreaScrollbar = ({
 }: ScrollAreaScrollbarProps) => (
   <BaseScrollArea.Scrollbar
     className={cn(
-      "flex touch-none p-0.5 opacity-100 transition-opacity duration-150 ease-out motion-reduce:transition-none data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+      "flex touch-none p-0.5 opacity-100 transition-opacity duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
       className,
     )}
     {...props}