@boyernick/standard-ui-react 0.1.0

package/src/progress.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Progress as BaseProgress } from "@base-ui/react/progress"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type ProgressProps = ComponentProps<typeof BaseProgress.Root>
+export type ProgressLabelProps = ComponentProps<typeof BaseProgress.Label>
+export type ProgressValueProps = ComponentProps<typeof BaseProgress.Value>
+export type ProgressTrackProps = ComponentProps<typeof BaseProgress.Track>
+export type ProgressIndicatorProps = ComponentProps<
+  typeof BaseProgress.Indicator
+>
+
+export const Progress = ({ className, ...props }: ProgressProps) => (
+  <BaseProgress.Root
+    className={cn(
+      "grid w-full grid-cols-[1fr_auto] items-center gap-x-2 gap-y-2",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ProgressLabel = ({ className, ...props }: ProgressLabelProps) => (
+  <BaseProgress.Label
+    className={cn("text-sm text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const ProgressValue = ({ className, ...props }: ProgressValueProps) => (
+  <BaseProgress.Value
+    className={cn("text-right text-sm text-fg-secondary tabular-nums", className)}
+    {...props}
+  />
+)
+
+export const ProgressTrack = ({ className, ...props }: ProgressTrackProps) => (
+  <BaseProgress.Track
+    className={cn(
+      "col-span-2 h-1.5 overflow-hidden rounded-full bg-background-quaternary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ProgressIndicator = ({
+  className,
+  ...props
+}: ProgressIndicatorProps) => (
+  <BaseProgress.Indicator
+    className={cn(
+      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/radio.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+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 { motion } from "./lib/motion"
+
+export type RadioGroupProps = ComponentProps<typeof BaseRadioGroup>
+export type RadioProps = ComponentProps<typeof BaseRadio.Root>
+export type RadioIndicatorProps = ComponentProps<typeof BaseRadio.Indicator>
+
+export const RadioGroup = ({ className, ...props }: RadioGroupProps) => (
+  <BaseRadioGroup
+    className={cn("flex flex-col gap-2", className)}
+    {...props}
+  />
+)
+
+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",
+      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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const RadioIndicator = ({
+  className,
+  ...props
+}: RadioIndicatorProps) => (
+  <BaseRadio.Indicator
+    className={cn(
+      "size-1.5 rounded-full bg-brand-foreground data-unchecked:hidden",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/scroll-area.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type ScrollAreaProps = ComponentProps<typeof BaseScrollArea.Root>
+export type ScrollAreaViewportProps = ComponentProps<
+  typeof BaseScrollArea.Viewport
+>
+export type ScrollAreaContentProps = ComponentProps<
+  typeof BaseScrollArea.Content
+>
+export type ScrollAreaScrollbarProps = ComponentProps<
+  typeof BaseScrollArea.Scrollbar
+>
+export type ScrollAreaThumbProps = ComponentProps<typeof BaseScrollArea.Thumb>
+
+export const ScrollArea = ({ className, ...props }: ScrollAreaProps) => (
+  <BaseScrollArea.Root
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  />
+)
+
+export const ScrollAreaViewport = ({
+  className,
+  ...props
+}: 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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ScrollAreaContent = ({
+  className,
+  ...props
+}: ScrollAreaContentProps) => (
+  <BaseScrollArea.Content className={cn(className)} {...props} />
+)
+
+export const ScrollAreaScrollbar = ({
+  className,
+  ...props
+}: 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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ScrollAreaThumb = ({
+  className,
+  ...props
+}: ScrollAreaThumbProps) => (
+  <BaseScrollArea.Thumb
+    className={cn("flex-1 rounded-full bg-border-secondary", className)}
+    {...props}
+  />
+)

package/src/select.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import { Select as BaseSelect } from "@base-ui/react/select"
+import type { ComponentProps } from "react"
+import { IconChevronDownSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type SelectProps = ComponentProps<typeof BaseSelect.Root>
+export type SelectTriggerProps = ComponentProps<typeof BaseSelect.Trigger>
+export type SelectValueProps = ComponentProps<typeof BaseSelect.Value>
+export type SelectIconProps = ComponentProps<typeof BaseSelect.Icon>
+export type SelectPortalProps = ComponentProps<typeof BaseSelect.Portal>
+export type SelectPositionerProps = ComponentProps<typeof BaseSelect.Positioner>
+export type SelectPopupProps = ComponentProps<typeof BaseSelect.Popup>
+export type SelectListProps = ComponentProps<typeof BaseSelect.List>
+export type SelectItemProps = ComponentProps<typeof BaseSelect.Item>
+export type SelectItemTextProps = ComponentProps<typeof BaseSelect.ItemText>
+export type SelectItemIndicatorProps = ComponentProps<
+  typeof BaseSelect.ItemIndicator
+>
+export type SelectGroupProps = ComponentProps<typeof BaseSelect.Group>
+export type SelectGroupLabelProps = ComponentProps<typeof BaseSelect.GroupLabel>
+export type SelectSeparatorProps = ComponentProps<typeof BaseSelect.Separator>
+
+export const Select = (props: SelectProps) => <BaseSelect.Root {...props} />
+
+export const SelectTrigger = ({
+  className,
+  ...props
+}: 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",
+      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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SelectValue = ({ className, ...props }: SelectValueProps) => (
+  <BaseSelect.Value
+    className={cn("flex-1 truncate text-left", className)}
+    {...props}
+  />
+)
+
+export const SelectIcon = ({
+  className,
+  children,
+  ...props
+}: SelectIconProps) => (
+  <BaseSelect.Icon
+    className={cn(
+      "flex shrink-0 text-fg-tertiary",
+      motion.transform,
+      "data-popup-open:rotate-180",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? <IconChevronDownSmall size={16} className="size-4" aria-hidden />}
+  </BaseSelect.Icon>
+)
+
+export const SelectPortal = (props: SelectPortalProps) => (
+  <BaseSelect.Portal {...props} />
+)
+
+export const SelectPositioner = ({
+  alignItemWithTrigger = false,
+  sideOffset = 4,
+  className,
+  ...props
+}: SelectPositionerProps) => (
+  <BaseSelect.Positioner
+    alignItemWithTrigger={alignItemWithTrigger}
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+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",
+      motion.popupAnchor,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SelectList = ({ className, ...props }: SelectListProps) => (
+  <BaseSelect.List
+    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    {...props}
+  />
+)
+
+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",
+      motion.colors,
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-selected:text-fg-primary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SelectItemText = ({
+  className,
+  ...props
+}: SelectItemTextProps) => (
+  <BaseSelect.ItemText
+    className={cn("flex-1 truncate", className)}
+    {...props}
+  />
+)
+
+export const SelectItemIndicator = ({
+  className,
+  ...props
+}: SelectItemIndicatorProps) => (
+  <BaseSelect.ItemIndicator
+    className={cn(
+      "ml-auto flex size-4 shrink-0 items-center justify-center text-fg-primary data-unchecked:hidden",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SelectGroup = ({ className, ...props }: SelectGroupProps) => (
+  <BaseSelect.Group className={cn(className)} {...props} />
+)
+
+export const SelectGroupLabel = ({
+  className,
+  ...props
+}: SelectGroupLabelProps) => (
+  <BaseSelect.GroupLabel
+    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
+export const SelectSeparator = ({
+  className,
+  ...props
+}: SelectSeparatorProps) => (
+  <BaseSelect.Separator
+    className={cn("my-1 h-px bg-border-primary", className)}
+    {...props}
+  />
+)

package/src/separator.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { Separator as BaseSeparator } from "@base-ui/react/separator"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type SeparatorProps = ComponentProps<typeof BaseSeparator>
+
+export const Separator = ({ className, ...props }: SeparatorProps) => (
+  <BaseSeparator
+    className={cn(
+      "h-px w-full bg-border-primary data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/sidebar.tsx

@@ -0,0 +1,82 @@
+import type { ComponentProps } from "react";
+import { cn } from "./lib/cn";
+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">;
+
+export const Sidebar = ({ className, ...props }: SidebarProps) => (
+  <aside
+    className={cn(
+      "flex h-full w-60 shrink-0 flex-col border-r border-border-primary bg-surface",
+      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} />
+);
+
+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,
+  type = "button",
+  ...props
+}: SidebarNavItemProps) => (
+  <button
+    type={type}
+    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",
+      motion.colors,
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const SidebarGroup = ({ className, ...props }: SidebarGroupProps) => (
+  <div className={cn("flex flex-col gap-1 py-2", className)} {...props} />
+);
+
+export const SidebarGroupLabel = ({
+  className,
+  ...props
+}: SidebarGroupLabelProps) => (
+  <h3
+    className={cn("px-3 py-1.5 text-xs-strong text-fg-tertiary", className)}
+    {...props}
+  />
+);

package/src/skeleton.tsx

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "./lib/cn";
+
+const skeletonVariants = cva(
+  "animate-pulse bg-background-tertiary motion-reduce:animate-none",
+  {
+    variants: {
+      variant: {
+        block: "rounded-md",
+        text: "h-4 rounded-sm",
+        circle: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "block",
+    },
+  },
+);
+
+export type SkeletonProps = ComponentProps<"div"> &
+  VariantProps<typeof skeletonVariants>;
+
+export const Skeleton = ({ className, variant, ...props }: SkeletonProps) => (
+  <div
+    aria-hidden
+    className={cn(skeletonVariants({ variant }), className)}
+    {...props}
+  />
+);
+
+export { skeletonVariants };

package/src/slider.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { Slider as BaseSlider } from "@base-ui/react/slider"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type SliderProps = ComponentProps<typeof BaseSlider.Root>
+export type SliderControlProps = ComponentProps<typeof BaseSlider.Control>
+export type SliderTrackProps = ComponentProps<typeof BaseSlider.Track>
+export type SliderIndicatorProps = ComponentProps<typeof BaseSlider.Indicator>
+export type SliderThumbProps = ComponentProps<typeof BaseSlider.Thumb>
+
+export const Slider = (props: SliderProps) => <BaseSlider.Root {...props} />
+
+export const SliderControl = ({ className, ...props }: SliderControlProps) => (
+  <BaseSlider.Control
+    className={cn(
+      "flex w-full touch-none items-center py-3 select-none",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SliderTrack = ({ className, ...props }: SliderTrackProps) => (
+  <BaseSlider.Track
+    className={cn(
+      "relative h-1.5 w-full rounded-full bg-background-quaternary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SliderIndicator = ({
+  className,
+  ...props
+}: SliderIndicatorProps) => (
+  <BaseSlider.Indicator
+    className={cn(
+      "absolute h-full rounded-full bg-brand-primary transition-[width] duration-150 ease-out motion-reduce:transition-none",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const SliderThumb = ({ className, ...props }: SliderThumbProps) => (
+  <BaseSlider.Thumb
+    className={cn(
+      "size-4 cursor-pointer rounded-full border border-brand-primary-border bg-surface shadow-sm 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 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+)