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

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

@@ -53,6 +53,11 @@ export const ProgressIndicator = ({
   <BaseProgress.Indicator
     className={cn(
       "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,284 @@
+"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"
+import { focusRing, focusRingBorder } from "./lib/focus"
+
+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",
+      focusRingBorder,
+      focusRing,
+      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 disabled:cursor-not-allowed",
+      focusRingBorder,
+      focusRing,
+      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-offset-1 has-[:focus-visible]:ring-offset-background-primary 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/radio.tsx

@@ -4,6 +4,7 @@ import { Radio as BaseRadio } from "@base-ui/react/radio"
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type RadioGroupProps = ComponentProps<typeof BaseRadioGroup>
@@ -20,9 +21,10 @@ export const RadioGroup = ({ className, ...props }: RadioGroupProps) => (
 export const Radio = ({ className, ...props }: RadioProps) => (
   <BaseRadio.Root
     className={cn(
-      "flex size-4 shrink-0 items-center justify-center rounded-full border border-border-secondary bg-surface outline-none",
+      "flex size-4 shrink-0 items-center justify-center rounded-full border border-border-secondary bg-surface",
       motion.colors,
-      "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-checked:border-brand-primary data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      focusRing,
+      "data-checked:border-brand-primary data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}

package/src/scroll-area.tsx

@@ -3,6 +3,7 @@
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 
 export type ScrollAreaProps = ComponentProps<typeof BaseScrollArea.Root>
 export type ScrollAreaViewportProps = ComponentProps<
@@ -29,7 +30,9 @@ export const ScrollAreaViewport = ({
 }: ScrollAreaViewportProps) => (
   <BaseScrollArea.Viewport
     className={cn(
-      "size-full rounded-[inherit] 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",
+      "size-full rounded-[inherit]",
+      focusRingBorder,
+      focusRing,
       className,
     )}
     {...props}

package/src/select.tsx

@@ -4,7 +4,9 @@ import { Select as BaseSelect } from "@base-ui/react/select"
 import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingInvalid } from "./lib/focus"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupSurface } from "./lib/popup"
 
 export type SelectProps = ComponentProps<typeof BaseSelect.Root>
 export type SelectTriggerProps = ComponentProps<typeof BaseSelect.Trigger>
@@ -31,9 +33,11 @@ export const SelectTrigger = ({
 }: SelectTriggerProps) => (
   <BaseSelect.Trigger
     className={cn(
-      "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top outline-none",
+      "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top",
       motion.all,
-      "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-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-placeholder:text-fg-quaternary data-popup-open:border-border-secondary data-popup-open:bg-background-tertiary/60",
+      focusRing,
+      focusRingInvalid,
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-placeholder:text-fg-quaternary data-popup-open:border-border-secondary",
       className,
     )}
     {...props}
@@ -71,7 +75,7 @@ export const SelectPortal = (props: SelectPortalProps) => (
 
 export const SelectPositioner = ({
   alignItemWithTrigger = false,
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: SelectPositionerProps) => (
@@ -86,7 +90,8 @@ export const SelectPositioner = ({
 export const SelectPopup = ({ className, ...props }: SelectPopupProps) => (
   <BaseSelect.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",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -96,7 +101,7 @@ export const SelectPopup = ({ className, ...props }: SelectPopupProps) => (
 
 export const SelectList = ({ className, ...props }: SelectListProps) => (
   <BaseSelect.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -104,7 +109,7 @@ export const SelectList = ({ className, ...props }: SelectListProps) => (
 export const SelectItem = ({ className, ...props }: SelectItemProps) => (
   <BaseSelect.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",
+      popupItem,
       motion.colors,
       "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-selected:text-fg-primary",
       className,
@@ -145,7 +150,7 @@ export const SelectGroupLabel = ({
   ...props
 }: SelectGroupLabelProps) => (
   <BaseSelect.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

package/src/sidebar.tsx

@@ -1,56 +1,119 @@
-import type { ComponentProps } from "react";
-import { cn } from "./lib/cn";
-import { motion } from "./lib/motion";
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
+import { motion } from "./lib/motion"
 
-export type SidebarProps = ComponentProps<"aside">;
-export type SidebarHeaderProps = ComponentProps<"div">;
-export type SidebarContentProps = ComponentProps<"div">;
-export type SidebarFooterProps = ComponentProps<"div">;
-export type SidebarNavProps = ComponentProps<"nav">;
-export type SidebarNavItemProps = ComponentProps<"button"> & {
-  active?: boolean;
-};
-export type SidebarGroupProps = ComponentProps<"div">;
-export type SidebarGroupLabelProps = ComponentProps<"h3">;
+const sidebarVariants = cva(
+  "flex h-full shrink-0 flex-col overflow-hidden text-fg-primary",
+  {
+    variants: {
+      variant: {
+        default: "border-r border-border-primary bg-surface",
+        inset: "rounded-lg bg-background-secondary",
+        floating:
+          "rounded-xl border border-border-primary bg-surface-raised shadow-sm",
+      },
+      size: {
+        sm: "w-52",
+        md: "w-60",
+        lg: "w-72",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+)
 
-export const Sidebar = ({ className, ...props }: SidebarProps) => (
+const sidebarNavItemVariants = cva(
+  cn(
+    "group/nav-item relative flex w-full cursor-pointer items-center gap-2 border border-transparent text-left text-fg-secondary disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+    focusRing,
+  ),
+  {
+    variants: {
+      variant: {
+        default:
+          "rounded-md hover:bg-background-tertiary hover:text-fg-primary data-[active]:bg-background-tertiary data-[active]:font-medium data-[active]:text-fg-primary",
+        pill: "rounded-full hover:bg-background-tertiary hover:text-fg-primary data-[active]:border-brand-primary-border data-[active]:bg-brand-primary data-[active]:font-medium data-[active]:text-brand-foreground",
+        indicator:
+          "rounded-md before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-transparent before:content-[''] hover:bg-background-tertiary hover:text-fg-primary data-[active]:bg-background-tertiary data-[active]:font-medium data-[active]:text-fg-primary data-[active]:before:bg-brand-primary",
+      },
+      size: {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-9 px-3 text-sm",
+        lg: "h-10 px-3.5 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+)
+
+export type SidebarProps = Omit<ComponentProps<"aside">, "size"> &
+  VariantProps<typeof sidebarVariants>
+export type SidebarHeaderProps = ComponentProps<"div">
+export type SidebarContentProps = ComponentProps<"div">
+export type SidebarFooterProps = ComponentProps<"div">
+export type SidebarNavProps = ComponentProps<"nav">
+export type SidebarNavItemProps = Omit<ComponentProps<"button">, "size"> &
+  VariantProps<typeof sidebarNavItemVariants> & {
+    active?: boolean
+  }
+export type SidebarNavItemLabelProps = ComponentProps<"span">
+export type SidebarNavBadgeProps = ComponentProps<"span">
+export type SidebarGroupProps = ComponentProps<"div">
+export type SidebarGroupLabelProps = ComponentProps<"h3">
+
+export const Sidebar = ({
+  className,
+  variant,
+  size,
+  ...props
+}: SidebarProps) => (
   <aside
-    className={cn(
-      "flex h-full w-60 shrink-0 flex-col border-r border-border-primary bg-surface",
-      className,
-    )}
+    className={cn(sidebarVariants({ variant, size }), className)}
     {...props}
   />
-);
+)
 
 export const SidebarHeader = ({ className, ...props }: SidebarHeaderProps) => (
   <div
     className={cn("border-b border-border-primary p-4", className)}
     {...props}
   />
-);
+)
 
 export const SidebarContent = ({
   className,
   ...props
 }: SidebarContentProps) => (
-  <div className={cn("flex-1 overflow-y-auto p-3", className)} {...props} />
-);
+  <div
+    className={cn("min-h-0 flex-1 overflow-y-auto p-3", className)}
+    {...props}
+  />
+)
 
 export const SidebarFooter = ({ className, ...props }: SidebarFooterProps) => (
   <div
     className={cn("border-t border-border-primary p-3", className)}
     {...props}
   />
-);
+)
 
 export const SidebarNav = ({ className, ...props }: SidebarNavProps) => (
   <nav className={cn("flex flex-col gap-1", className)} {...props} />
-);
+)
 
 export const SidebarNavItem = ({
   className,
   active = false,
+  variant,
+  size,
   type = "button",
   ...props
 }: SidebarNavItemProps) => (
@@ -59,17 +122,37 @@ export const SidebarNavItem = ({
     data-active={active || undefined}
     aria-current={active ? "page" : undefined}
     className={cn(
-      "flex h-9 w-full cursor-pointer items-center gap-2 rounded-md border border-transparent px-3 text-left 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 data-[active]:bg-background-tertiary data-[active]:font-medium data-[active]:text-fg-primary [&_svg]:size-4 [&_svg]:shrink-0",
+      sidebarNavItemVariants({ variant, size }),
       motion.colors,
       className,
     )}
     {...props}
   />
-);
+)
+
+export const SidebarNavItemLabel = ({
+  className,
+  ...props
+}: SidebarNavItemLabelProps) => (
+  <span className={cn("min-w-0 flex-1 truncate", className)} {...props} />
+)
+
+export const SidebarNavBadge = ({
+  className,
+  ...props
+}: SidebarNavBadgeProps) => (
+  <span
+    className={cn(
+      "text-2xs-strong ml-auto inline-flex min-w-5 shrink-0 items-center justify-center rounded-full border border-border-primary bg-surface px-1.5 py-0.5 text-fg-secondary",
+      className,
+    )}
+    {...props}
+  />
+)
 
 export const SidebarGroup = ({ className, ...props }: SidebarGroupProps) => (
   <div className={cn("flex flex-col gap-1 py-2", className)} {...props} />
-);
+)
 
 export const SidebarGroupLabel = ({
   className,
@@ -79,4 +162,6 @@ export const SidebarGroupLabel = ({
     className={cn("px-3 py-1.5 text-xs-strong text-fg-tertiary", className)}
     {...props}
   />
-);
+)
+
+export { sidebarNavItemVariants, sidebarVariants }