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

package/src/select.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
 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>
@@ -33,7 +34,7 @@ export const SelectTrigger = ({
     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",
+      "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",
       className,
     )}
     {...props}
@@ -71,7 +72,7 @@ export const SelectPortal = (props: SelectPortalProps) => (
 
 export const SelectPositioner = ({
   alignItemWithTrigger = false,
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: SelectPositionerProps) => (
@@ -86,7 +87,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 +98,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 +106,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 +147,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,115 @@
-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 { 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(
+  "group/nav-item relative flex w-full cursor-pointer items-center gap-2 border border-transparent text-left text-fg-secondary 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 [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    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 +118,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 +158,6 @@ export const SidebarGroupLabel = ({
     className={cn("px-3 py-1.5 text-xs-strong text-fg-tertiary", className)}
     {...props}
   />
-);
+)
+
+export { sidebarNavItemVariants, sidebarVariants }

package/src/slider.tsx

@@ -1,21 +1,51 @@
 "use client"
 
 import { Slider as BaseSlider } from "@base-ui/react/slider"
+import { cva, type VariantProps } from "class-variance-authority"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 
-export type SliderProps = ComponentProps<typeof BaseSlider.Root>
+const sliderVariants = cva(
+  "group/slider relative flex w-full data-disabled:opacity-50 data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-fit",
+  {
+    variants: {
+      size: {
+        sm: "[--slider-thumb-size:0.875rem] [--slider-track-size:0.25rem]",
+        md: "[--slider-thumb-size:1rem] [--slider-track-size:0.375rem]",
+        lg: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.5rem]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export type SliderProps = Omit<
+  ComponentProps<typeof BaseSlider.Root>,
+  "size"
+> &
+  VariantProps<typeof sliderVariants>
 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 type SliderTicksProps = ComponentProps<"div"> & {
+  /** Number of evenly spaced marks, including both ends. */
+  count?: number
+}
 
-export const Slider = (props: SliderProps) => <BaseSlider.Root {...props} />
+export const Slider = ({ className, size, ...props }: SliderProps) => (
+  <BaseSlider.Root
+    className={cn(sliderVariants({ size }), className)}
+    {...props}
+  />
+)
 
 export const SliderControl = ({ className, ...props }: SliderControlProps) => (
   <BaseSlider.Control
     className={cn(
-      "flex w-full touch-none items-center py-3 select-none",
+      "flex w-full touch-none items-center py-3 select-none data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-0",
       className,
     )}
     {...props}
@@ -25,7 +55,7 @@ export const SliderControl = ({ className, ...props }: SliderControlProps) => (
 export const SliderTrack = ({ className, ...props }: SliderTrackProps) => (
   <BaseSlider.Track
     className={cn(
-      "relative h-1.5 w-full rounded-full bg-background-quaternary",
+      "relative h-[var(--slider-track-size)] w-full rounded-full bg-background-quaternary transition-colors duration-[var(--duration-sm)] group-hover/slider:bg-background-active data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[var(--slider-track-size)]",
       className,
     )}
     {...props}
@@ -38,7 +68,7 @@ export const SliderIndicator = ({
 }: SliderIndicatorProps) => (
   <BaseSlider.Indicator
     className={cn(
-      "absolute h-full rounded-full bg-brand-primary transition-[width] duration-150 ease-out motion-reduce:transition-none",
+      "absolute h-full rounded-full bg-brand-primary data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full",
       className,
     )}
     {...props}
@@ -48,9 +78,37 @@ export const SliderIndicator = ({
 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",
+      "flex size-[var(--slider-thumb-size)] cursor-grab items-center justify-center rounded-full border border-brand-primary-border bg-surface shadow-sm outline-none transition-[scale,box-shadow,background-color,border-color] duration-[var(--duration-sm)] ease-enter after:size-1 after:rounded-full after:bg-brand-primary after:content-[''] hover:scale-110 hover:bg-background-secondary active:scale-105 data-dragging:cursor-grabbing data-dragging:scale-110 data-disabled:cursor-not-allowed data-disabled:hover:scale-100 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 SliderTicks = ({
+  count = 5,
+  className,
+  ...props
+}: SliderTicksProps) => {
+  const tickCount = Number.isFinite(count) ? Math.max(2, Math.floor(count)) : 2
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 flex items-center justify-between group-data-[orientation=vertical]/slider:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      {Array.from({ length: tickCount }, (_, index) => (
+        <span
+          key={index}
+          className="h-2 w-px rounded-full bg-surface/70 group-data-[orientation=vertical]/slider:h-px group-data-[orientation=vertical]/slider:w-2"
+        />
+      ))}
+    </div>
+  )
+}
+
+export { sliderVariants }

package/src/sounds.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { IconPlay } from "@central-icons-react/round-filled-radius-2-stroke-2/IconPlay"
 import {
   createContext,
   useCallback,
@@ -28,7 +29,7 @@ const SOUND_PRESETS: SoundPreset[] = [
   {
     id: "click",
     label: "Click",
-    description: "Light confirmation for toggles and secondary actions.",
+    description: "Confirmation for toggles and secondary actions.",
     play: (ctx, when, destination) => {
       const osc = ctx.createOscillator()
       const gain = ctx.createGain()
@@ -219,14 +220,15 @@ export const Sound = ({
     >
       <Button
         type="button"
-        variant="outline"
-        size="sm"
+        variant="secondary"
+        size="md"
         iconOnly
         rounded
+        className="shrink-0 hover:scale-[1.04] active:scale-95"
         aria-label={`Play ${resolvedLabel}`}
         onClick={handlePlay}
       >
-        <PlayIcon />
+        <IconPlay size={12} className="size-3" aria-hidden />
       </Button>
       <div className="min-w-0 flex-1">
         <p className="text-sm-strong text-fg-primary">{resolvedLabel}</p>
@@ -262,9 +264,3 @@ export const SoundToggle = ({
     </Button>
   )
 }
-
-const PlayIcon = () => (
-  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
-    <path d="M9 7.5v9l8-4.5-8-4.5Z" fill="currentColor" />
-  </svg>
-)

package/src/spinner.tsx

@@ -2,44 +2,117 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type { ComponentProps } from "react";
 import { cn } from "./lib/cn";
 
+const SPINNER_SPOKES = Array.from({ length: 12 }, (_, index) => index);
+
 const spinnerVariants = cva(
-  "animate-spin text-current motion-reduce:animate-none",
-  {  variants: {
-    size: {
-      sm: "size-3.5",
-      md: "size-4",
-      lg: "size-5",
+  "text-current motion-reduce:animate-none",
+  {
+    variants: {
+      variant: {
+        ring: "animate-spin",
+        arc: "animate-spin",
+        dots: "",
+        spokes: "",
+      },
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "ring",
+      size: "md",
     },
   },
-  defaultVariants: {
-    size: "md",
-  },
-});
+);
 
 export type SpinnerProps = ComponentProps<"svg"> &
   VariantProps<typeof spinnerVariants>;
 
-export const Spinner = ({ className, size, ...props }: SpinnerProps) => (
-  <svg
-    role="status"
-    aria-label="Loading"
-    className={cn(spinnerVariants({ size }), className)}
-    viewBox="0 0 24 24"
-    fill="none"
-    {...props}
-  >
-    <path
-      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
-      stroke="currentColor"
-      strokeOpacity="0.3"
-      strokeWidth="2"
-    />
-    <path
-      d="M21 12C21 16.9706 16.9706 21 12 21"
-      stroke="currentColor"
-      strokeWidth="2"
-    />
-  </svg>
-);
+export const Spinner = ({
+  className,
+  variant,
+  size,
+  ...props
+}: SpinnerProps) => {
+  const resolvedVariant = variant ?? "ring";
+
+  return (
+    <svg
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        spinnerVariants({ variant: resolvedVariant, size }),
+        className,
+      )}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      {resolvedVariant === "spokes" ? (
+        <g stroke="currentColor" strokeWidth="2.25" strokeLinecap="round">
+          {SPINNER_SPOKES.map((spoke) => (
+            <line
+              key={spoke}
+              x1="12"
+              y1="3"
+              x2="12"
+              y2="6.25"
+              transform={`rotate(${spoke * 30} 12 12)`}
+              className="animate-[spinner-spoke_1.2s_linear_infinite] motion-reduce:animate-none motion-reduce:opacity-40"
+              style={{ animationDelay: `${spoke * -0.1}s` }}
+            />
+          ))}
+        </g>
+      ) : resolvedVariant === "dots" ? (
+        <g fill="currentColor">
+          <circle
+            cx="5"
+            cy="12"
+            r="2.25"
+            className="animate-[spinner-dot_1.2s_var(--ease-passive)_infinite] [animation-delay:-0.32s] motion-reduce:animate-none"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="2.25"
+            className="animate-[spinner-dot_1.2s_var(--ease-passive)_infinite] [animation-delay:-0.16s] motion-reduce:animate-none"
+          />
+          <circle
+            cx="19"
+            cy="12"
+            r="2.25"
+            className="animate-[spinner-dot_1.2s_var(--ease-passive)_infinite] motion-reduce:animate-none"
+          />
+        </g>
+      ) : resolvedVariant === "arc" ? (
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray="42 15"
+        />
+      ) : (
+        <>
+          <path
+            d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+            stroke="currentColor"
+            strokeOpacity="0.3"
+            strokeWidth="2"
+          />
+          <path
+            d="M21 12C21 16.9706 16.9706 21 12 21"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+        </>
+      )}
+    </svg>
+  );
+};
 
 export { spinnerVariants };

package/src/switch.tsx

@@ -9,11 +9,11 @@ export type SwitchProps = ComponentProps<typeof BaseSwitch.Root>
 export const Switch = ({ className, ...props }: SwitchProps) => (
   <BaseSwitch.Root
     className={cn(
-      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-150 ease-out motion-reduce:transition-none 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-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none 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-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-150 ease-out motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
+    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
   </BaseSwitch.Root>
 )