@boyernick/standard-ui-react 0.1.0

package/src/input.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import { forwardRef, type InputHTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+
+const inputVariants = cva(
+  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "border bg-surface inset-shadow-outline-top 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:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",
+        ghost: "border border-transparent bg-transparent",
+      },
+      size: {
+        sm: "h-8 px-2.5",
+        md: "h-9 px-3",
+        lg: "h-10 px-3.5",
+      },
+      invalid: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        invalid: false,
+        class: "border-border-secondary",
+      },
+      {
+        variant: "default",
+        invalid: true,
+        class: "border-destructive",
+      },
+      {
+        variant: "ghost",
+        invalid: true,
+        class:
+          "border-destructive focus-visible:border-destructive focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-destructive/20",
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      invalid: false,
+    },
+  },
+)
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
+  VariantProps<typeof inputVariants>
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, size, invalid, ...props }, ref) => (
+    <input
+      ref={ref}
+      className={cn(inputVariants({ variant, size, invalid }), className)}
+      aria-invalid={invalid || undefined}
+      {...props}
+    />
+  ),
+)
+
+Input.displayName = "Input"
+
+export { inputVariants }

package/src/lib/cn.ts

@@ -0,0 +1,3 @@
+import { clsx, type ClassValue } from "clsx"
+
+export const cn = (...inputs: ClassValue[]) => clsx(inputs)

package/src/lib/motion.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared motion classes for StandardUI.
+ * Prefer CSS `scale` on centered modals so `translate` centering stays intact.
+ * Anchored popups use `transform-origin` from Base UI.
+ */
+export const motion = {
+  backdrop:
+    "transition-opacity duration-150 ease-out motion-reduce:transition-none data-starting-style:opacity-0 data-ending-style:opacity-0",
+  /** Centered dialog / alert — scale property, not transform */
+  popupCenter:
+    "transition-[scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+  /** Select, tooltip, menus — transform-origin from Base UI */
+  popupAnchor:
+    "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+  accordionPanel:
+    "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0",
+  tabsIndicator:
+    "transition-[translate,width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+  colors: "transition-colors duration-150 ease-out motion-reduce:transition-none",
+  transform:
+    "transition-transform duration-150 ease-out motion-reduce:transition-none",
+  all: "transition-all duration-150 ease-out motion-reduce:transition-none",
+} as const

package/src/markdown-editor.tsx

@@ -0,0 +1,302 @@
+"use client"
+
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+  type TextareaHTMLAttributes,
+} from "react"
+import { cn } from "./lib/cn"
+import { textareaVariants } from "./textarea"
+import { Toggle } from "./toggle"
+import { Toolbar } from "./toolbar"
+
+type MarkdownEditorContextValue = {
+  value: string
+  setValue: (value: string) => void
+  inputRef: React.RefObject<HTMLTextAreaElement | null>
+  selection: { start: number; end: number }
+  setSelection: (selection: { start: number; end: number }) => void
+}
+
+const MarkdownEditorContext = createContext<MarkdownEditorContextValue | null>(
+  null,
+)
+
+const useMarkdownEditor = () => {
+  const context = useContext(MarkdownEditorContext)
+
+  if (!context) {
+    throw new Error(
+      "MarkdownEditor parts must be rendered inside MarkdownEditor",
+    )
+  }
+
+  return context
+}
+
+const assignRef = <Value,>(ref: Ref<Value> | undefined, value: Value) => {
+  if (typeof ref === "function") {
+    ref(value)
+    return
+  }
+
+  if (ref) ref.current = value
+}
+
+export type MarkdownEditorProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+export const MarkdownEditor = ({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  className,
+  children,
+  ...props
+}: MarkdownEditorProps) => {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue)
+  const [selection, setSelection] = useState({ start: 0, end: 0 })
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const value = controlledValue ?? uncontrolledValue
+
+  const setValue = (nextValue: string) => {
+    if (controlledValue === undefined) setUncontrolledValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <MarkdownEditorContext.Provider
+      value={{
+        value,
+        setValue,
+        inputRef,
+        selection,
+        setSelection,
+      }}
+    >
+      <div
+        className={cn(
+          "overflow-hidden rounded-xl border border-border-primary bg-surface",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </MarkdownEditorContext.Provider>
+  )
+}
+
+type Format = {
+  label: string
+  marker: "*" | "**" | "`"
+  className?: string
+}
+
+const formats: Format[] = [
+  { label: "Bold", marker: "**", className: "font-semibold" },
+  { label: "Italic", marker: "*", className: "italic" },
+  { label: "Code", marker: "`", className: "font-mono" },
+]
+
+export type MarkdownEditorToolbarProps = ComponentPropsWithoutRef<
+  typeof Toolbar
+>
+
+export const MarkdownEditorToolbar = ({
+  className,
+  children,
+  ...props
+}: MarkdownEditorToolbarProps) => {
+  const { value, setValue, inputRef, selection, setSelection } =
+    useMarkdownEditor()
+
+  const isFormatActive = (marker: Format["marker"]) => {
+    const { start, end } = selection
+    return (
+      value.slice(start - marker.length, start) === marker &&
+      value.slice(end, end + marker.length) === marker
+    )
+  }
+
+  const handleFormat = (marker: Format["marker"]) => {
+    const input = inputRef.current
+
+    if (!input) return
+
+    const start = input.selectionStart
+    const end = input.selectionEnd
+    const selectedText = value.slice(start, end)
+    const isWrapped =
+      value.slice(start - marker.length, start) === marker &&
+      value.slice(end, end + marker.length) === marker
+
+    if (isWrapped) {
+      const nextValue =
+        value.slice(0, start - marker.length) +
+        selectedText +
+        value.slice(end + marker.length)
+
+      setValue(nextValue)
+      requestAnimationFrame(() => {
+        input.focus()
+        input.setSelectionRange(start - marker.length, end - marker.length)
+        setSelection({
+          start: start - marker.length,
+          end: end - marker.length,
+        })
+      })
+      return
+    }
+
+    const nextValue =
+      value.slice(0, start) +
+      marker +
+      selectedText +
+      marker +
+      value.slice(end)
+
+    setValue(nextValue)
+    requestAnimationFrame(() => {
+      const selectionStart = start + marker.length
+      input.focus()
+      input.setSelectionRange(selectionStart, selectionStart + selectedText.length)
+      setSelection({
+        start: selectionStart,
+        end: selectionStart + selectedText.length,
+      })
+    })
+  }
+
+  return (
+    <Toolbar
+      aria-label="Text formatting"
+      className={cn(
+        "flex w-full rounded-none border-0 border-b border-border-primary px-2 py-1",
+        className,
+      )}
+      {...props}
+    >
+      {children ??
+        formats.map((format) => (
+          <Toggle
+            key={format.label}
+            aria-label={format.label}
+            pressed={isFormatActive(format.marker)}
+            onPressedChange={() => handleFormat(format.marker)}
+            className={format.className}
+          >
+            {format.label}
+          </Toggle>
+        ))}
+    </Toolbar>
+  )
+}
+
+export type MarkdownEditorInputProps = TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const MarkdownEditorInput = forwardRef<
+  HTMLTextAreaElement,
+  MarkdownEditorInputProps
+>(({ className, onChange, onSelect, ...props }, forwardedRef) => {
+  const { value, setValue, inputRef, setSelection } = useMarkdownEditor()
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value)
+    onChange?.(event)
+  }
+
+  return (
+    <textarea
+      ref={(node) => {
+        inputRef.current = node
+        assignRef(forwardedRef, node)
+      }}
+      value={value}
+      className={cn(
+        textareaVariants({ variant: "ghost" }),
+        "min-h-56 resize-y rounded-none border-0 p-4 font-mono text-sm focus-visible:ring-0",
+        className,
+      )}
+      onChange={handleChange}
+      onSelect={(event) => {
+        setSelection({
+          start: event.currentTarget.selectionStart,
+          end: event.currentTarget.selectionEnd,
+        })
+        onSelect?.(event)
+      }}
+      {...props}
+    />
+  )
+})
+
+MarkdownEditorInput.displayName = "MarkdownEditorInput"
+
+const renderBasicMarkdown = (value: string): ReactNode[] =>
+  value
+    .split(/(\*\*[^*\n]+\*\*|`[^`\n]+`|\*[^*\n]+\*)/g)
+    .map((part, index) => {
+      if (part.startsWith("**") && part.endsWith("**")) {
+        return <strong key={index}>{part.slice(2, -2)}</strong>
+      }
+
+      if (part.startsWith("`") && part.endsWith("`")) {
+        return (
+          <code
+            key={index}
+            className="rounded-xs bg-background-tertiary px-1 py-0.5 font-mono text-sm"
+          >
+            {part.slice(1, -1)}
+          </code>
+        )
+      }
+
+      if (part.startsWith("*") && part.endsWith("*")) {
+        return <em key={index}>{part.slice(1, -1)}</em>
+      }
+
+      return part
+    })
+
+export type MarkdownEditorPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  emptyText?: string
+}
+
+export const MarkdownEditorPreview = ({
+  className,
+  emptyText = "Nothing to preview",
+  ...props
+}: MarkdownEditorPreviewProps) => {
+  const { value } = useMarkdownEditor()
+
+  return (
+    <div
+      className={cn(
+        "min-h-56 whitespace-pre-wrap border-t border-border-primary p-4 text-sm text-fg-primary",
+        className,
+      )}
+      {...props}
+    >
+      {value ? (
+        renderBasicMarkdown(value)
+      ) : (
+        <span className="text-fg-quaternary">{emptyText}</span>
+      )}
+    </div>
+  )
+}

package/src/menu.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import { Menu as BaseMenu } from "@base-ui/react/menu"
+import type { ComponentProps } from "react"
+import { IconCheckmark1, IconChevronRightSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type MenuProps = ComponentProps<typeof BaseMenu.Root>
+export type MenuTriggerProps = ComponentProps<typeof BaseMenu.Trigger>
+export type MenuPortalProps = ComponentProps<typeof BaseMenu.Portal>
+export type MenuBackdropProps = ComponentProps<typeof BaseMenu.Backdrop>
+export type MenuPositionerProps = ComponentProps<typeof BaseMenu.Positioner>
+export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup>
+export type MenuArrowProps = ComponentProps<typeof BaseMenu.Arrow>
+export type MenuItemProps = ComponentProps<typeof BaseMenu.Item>
+export type MenuLinkItemProps = ComponentProps<typeof BaseMenu.LinkItem>
+export type MenuSeparatorProps = ComponentProps<typeof BaseMenu.Separator>
+export type MenuGroupProps = ComponentProps<typeof BaseMenu.Group>
+export type MenuGroupLabelProps = ComponentProps<typeof BaseMenu.GroupLabel>
+export type MenuCheckboxItemProps = ComponentProps<typeof BaseMenu.CheckboxItem>
+export type MenuCheckboxItemIndicatorProps = ComponentProps<
+  typeof BaseMenu.CheckboxItemIndicator
+>
+export type MenuRadioGroupProps = ComponentProps<typeof BaseMenu.RadioGroup>
+export type MenuRadioItemProps = ComponentProps<typeof BaseMenu.RadioItem>
+export type MenuRadioItemIndicatorProps = ComponentProps<
+  typeof BaseMenu.RadioItemIndicator
+>
+export type MenuSubmenuRootProps = ComponentProps<typeof BaseMenu.SubmenuRoot>
+export type MenuSubmenuTriggerProps = ComponentProps<
+  typeof BaseMenu.SubmenuTrigger
+>
+export type MenuViewportProps = ComponentProps<typeof BaseMenu.Viewport>
+
+const menuItemClassName = 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",
+)
+
+const menuIndicatorItemClassName = cn(menuItemClassName, "pl-2")
+
+const menuIndicatorClassName =
+  "mr-0.5 flex size-4 shrink-0 items-center justify-center text-fg-primary data-unchecked:invisible"
+
+export const Menu = (props: MenuProps) => <BaseMenu.Root {...props} />
+
+export const MenuTrigger = ({ className, ...props }: MenuTriggerProps) => (
+  <BaseMenu.Trigger className={cn("cursor-pointer", className)} {...props} />
+)
+
+export const MenuPortal = (props: MenuPortalProps) => (
+  <BaseMenu.Portal {...props} />
+)
+
+export const MenuBackdrop = ({ className, ...props }: MenuBackdropProps) => (
+  <BaseMenu.Backdrop className={cn(className)} {...props} />
+)
+
+export const MenuPositioner = ({
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPositionerProps) => (
+  <BaseMenu.Positioner
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const MenuPopup = ({ className, ...props }: MenuPopupProps) => (
+  <BaseMenu.Popup
+    className={cn(
+      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      motion.popupAnchor,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const MenuArrow = ({ className, ...props }: MenuArrowProps) => (
+  <BaseMenu.Arrow
+    className={cn(
+      "data-[side=bottom]:top-[-6px] data-[side=left]:right-[-6px] data-[side=right]:left-[-6px] data-[side=top]:bottom-[-6px]",
+      "size-2.5 rotate-45 border border-border-primary bg-surface",
+      "data-[side=bottom]:border-r-0 data-[side=bottom]:border-b-0",
+      "data-[side=top]:border-t-0 data-[side=top]:border-l-0",
+      "data-[side=left]:border-b-0 data-[side=left]:border-l-0",
+      "data-[side=right]:border-t-0 data-[side=right]:border-r-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const MenuItem = ({ className, ...props }: MenuItemProps) => (
+  <BaseMenu.Item className={cn(menuItemClassName, className)} {...props} />
+)
+
+export const MenuLinkItem = ({ className, ...props }: MenuLinkItemProps) => (
+  <BaseMenu.LinkItem
+    className={cn(menuItemClassName, "cursor-pointer", className)}
+    {...props}
+  />
+)
+
+export const MenuSeparator = ({ className, ...props }: MenuSeparatorProps) => (
+  <BaseMenu.Separator
+    className={cn("my-1 h-px bg-border-primary", className)}
+    {...props}
+  />
+)
+
+export const MenuGroup = ({ className, ...props }: MenuGroupProps) => (
+  <BaseMenu.Group className={cn(className)} {...props} />
+)
+
+export const MenuGroupLabel = ({
+  className,
+  ...props
+}: MenuGroupLabelProps) => (
+  <BaseMenu.GroupLabel
+    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
+export const MenuCheckboxItem = ({
+  className,
+  ...props
+}: MenuCheckboxItemProps) => (
+  <BaseMenu.CheckboxItem
+    className={cn(menuIndicatorItemClassName, className)}
+    {...props}
+  />
+)
+
+export const MenuCheckboxItemIndicator = ({
+  className,
+  children,
+  keepMounted = true,
+  ...props
+}: MenuCheckboxItemIndicatorProps) => (
+  <BaseMenu.CheckboxItemIndicator
+    keepMounted={keepMounted}
+    className={cn(menuIndicatorClassName, className)}
+    {...props}
+  >
+    {children ?? <IconCheckmark1 size={14} className="size-3.5" aria-hidden />}
+  </BaseMenu.CheckboxItemIndicator>
+)
+
+export const MenuRadioGroup = ({
+  className,
+  ...props
+}: MenuRadioGroupProps) => (
+  <BaseMenu.RadioGroup className={cn(className)} {...props} />
+)
+
+export const MenuRadioItem = ({ className, ...props }: MenuRadioItemProps) => (
+  <BaseMenu.RadioItem
+    className={cn(menuIndicatorItemClassName, className)}
+    {...props}
+  />
+)
+
+export const MenuRadioItemIndicator = ({
+  className,
+  children,
+  keepMounted = true,
+  ...props
+}: MenuRadioItemIndicatorProps) => (
+  <BaseMenu.RadioItemIndicator
+    keepMounted={keepMounted}
+    className={cn(menuIndicatorClassName, className)}
+    {...props}
+  >
+    {children ?? <IconCheckmark1 size={14} className="size-3.5" aria-hidden />}
+  </BaseMenu.RadioItemIndicator>
+)
+
+export const MenuSubmenuRoot = (props: MenuSubmenuRootProps) => (
+  <BaseMenu.SubmenuRoot {...props} />
+)
+
+export const MenuSubmenuTrigger = ({
+  className,
+  children,
+  ...props
+}: MenuSubmenuTriggerProps) => (
+  <BaseMenu.SubmenuTrigger
+    className={cn(menuItemClassName, "w-full justify-between", className)}
+    {...props}
+  >
+    {children}
+    <IconChevronRightSmall size={16} className="size-4 text-fg-tertiary" aria-hidden />
+  </BaseMenu.SubmenuTrigger>
+)
+
+export const MenuViewport = ({ className, ...props }: MenuViewportProps) => (
+  <BaseMenu.Viewport className={cn(className)} {...props} />
+)

package/src/menubar.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type MenubarProps = ComponentProps<typeof BaseMenubar>
+
+export const Menubar = ({ className, ...props }: MenubarProps) => (
+  <BaseMenubar
+    className={cn(
+      "inline-flex items-center gap-0.5 rounded-lg border border-border-primary bg-background-secondary p-0.5",
+      "[&_button]:inline-flex [&_button]:h-8 [&_button]:cursor-pointer [&_button]:items-center [&_button]:justify-center [&_button]:gap-1.5 [&_button]:rounded-md [&_button]:px-2.5 [&_button]:text-sm [&_button]:text-fg-secondary [&_button]:outline-none",
+      "[&_button]:hover:bg-background-tertiary [&_button]:hover:text-fg-primary",
+      "[&_button]:focus-visible:border-ring [&_button]:focus-visible:ring-[3px] [&_button]:focus-visible:ring-offset-1 [&_button]:focus-visible:ring-offset-background-primary [&_button]:focus-visible:ring-ring/20",
+      "[&_button]:data-popup-open:bg-background-tertiary [&_button]:data-popup-open:text-fg-primary",
+      "[&_button]:data-disabled:cursor-not-allowed [&_button]:data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/meter.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { Meter as BaseMeter } from "@base-ui/react/meter"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type MeterProps = ComponentProps<typeof BaseMeter.Root>
+export type MeterLabelProps = ComponentProps<typeof BaseMeter.Label>
+export type MeterValueProps = ComponentProps<typeof BaseMeter.Value>
+export type MeterTrackProps = ComponentProps<typeof BaseMeter.Track>
+export type MeterIndicatorProps = ComponentProps<typeof BaseMeter.Indicator>
+
+export const Meter = ({ className, ...props }: MeterProps) => (
+  <BaseMeter.Root
+    className={cn(
+      "grid w-full grid-cols-[1fr_auto] items-center gap-x-2 gap-y-2",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const MeterLabel = ({ className, ...props }: MeterLabelProps) => (
+  <BaseMeter.Label
+    className={cn("text-sm text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const MeterValue = ({ className, ...props }: MeterValueProps) => (
+  <BaseMeter.Value
+    className={cn(
+      "text-right text-sm text-fg-secondary tabular-nums",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const MeterTrack = ({ className, ...props }: MeterTrackProps) => (
+  <BaseMeter.Track
+    className={cn(
+      "col-span-2 h-1.5 overflow-hidden rounded-full bg-background-quaternary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const MeterIndicator = ({
+  className,
+  ...props
+}: MeterIndicatorProps) => (
+  <BaseMeter.Indicator
+    className={cn(
+      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      className,
+    )}
+    {...props}
+  />
+)