@boyernick/standard-ui-react 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# @boyernick/standard-ui-react
+
+Styled React components for StandardUI. Interactive controls wrap [Base UI](https://base-ui.com); atoms (Button, Input, Badge) are token-styled DOM.
+
+```tsx
+import { Button, Input, Badge, Switch, Checkbox } from "@boyernick/standard-ui-react"
+```
+
+Requires `@boyernick/standard-ui-tokens` CSS, Tailwind v4 `@source` for this package’s `src`, and a Central Icons license (`CENTRAL_LICENSE_KEY`) to install `@central-icons-react/round-outlined-radius-2-stroke-2`. See the repo root README.

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@boyernick/standard-ui-react",
+  "version": "0.1.0",
+  "description": "React components for StandardUI",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.312",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "react-day-picker": "^10.0.1",
+    "recharts": "^3.10.1",
+    "sugar-high": "^2.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/boyernick/standard-ui.git",
+    "directory": "packages/react"
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import type { ComponentProps } from "react"
+import { IconChevronBottom } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type AccordionProps = ComponentProps<typeof BaseAccordion.Root>
+export type AccordionItemProps = ComponentProps<typeof BaseAccordion.Item>
+export type AccordionHeaderProps = ComponentProps<typeof BaseAccordion.Header>
+export type AccordionTriggerProps = ComponentProps<typeof BaseAccordion.Trigger>
+export type AccordionPanelProps = ComponentProps<typeof BaseAccordion.Panel>
+
+export const Accordion = ({ className, ...props }: AccordionProps) => (
+  <BaseAccordion.Root
+    className={cn(
+      "flex w-full flex-col overflow-hidden rounded-xl border border-border-primary bg-surface",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AccordionItem = ({ className, ...props }: AccordionItemProps) => (
+  <BaseAccordion.Item
+    className={cn(
+      "flex flex-col border-b border-border-primary last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AccordionHeader = ({
+  className,
+  ...props
+}: AccordionHeaderProps) => (
+  <BaseAccordion.Header className={cn("m-0", className)} {...props} />
+)
+
+export const AccordionTrigger = ({
+  className,
+  children,
+  ...props
+}: AccordionTriggerProps) => (
+  <BaseAccordion.Trigger
+    className={cn(
+      "group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3.5 text-left text-sm text-fg-primary outline-none",
+      motion.colors,
+      "hover:bg-background-tertiary focus-visible:relative focus-visible:z-10 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}
+  >
+    <span className="min-w-0 flex-1">{children}</span>
+    <IconChevronBottom
+      size={16}
+      className={cn(
+        "size-4 shrink-0 text-fg-tertiary",
+        motion.transform,
+        "group-data-panel-open:rotate-180",
+      )}
+      aria-hidden
+    />
+  </BaseAccordion.Trigger>
+)
+
+export const AccordionPanel = ({
+  className,
+  children,
+  ...props
+}: AccordionPanelProps) => (
+  <BaseAccordion.Panel
+    className={cn(
+      "h-[var(--accordion-panel-height)] overflow-hidden text-sm text-fg-secondary",
+      motion.accordionPanel,
+      className,
+    )}
+    {...props}
+  >
+    <div className="px-4 pt-0 pb-4 leading-relaxed">{children}</div>
+  </BaseAccordion.Panel>
+)

package/src/alert-dialog.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import type { ComponentProps, HTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type AlertDialogProps = ComponentProps<typeof BaseAlertDialog.Root>
+export type AlertDialogTriggerProps = ComponentProps<
+  typeof BaseAlertDialog.Trigger
+>
+export type AlertDialogPortalProps = ComponentProps<
+  typeof BaseAlertDialog.Portal
+>
+export type AlertDialogBackdropProps = ComponentProps<
+  typeof BaseAlertDialog.Backdrop
+>
+export type AlertDialogPopupProps = ComponentProps<typeof BaseAlertDialog.Popup>
+export type AlertDialogTitleProps = ComponentProps<typeof BaseAlertDialog.Title>
+export type AlertDialogDescriptionProps = ComponentProps<
+  typeof BaseAlertDialog.Description
+>
+export type AlertDialogCloseProps = ComponentProps<typeof BaseAlertDialog.Close>
+export type AlertDialogHeaderProps = HTMLAttributes<HTMLDivElement>
+
+export const AlertDialog = (props: AlertDialogProps) => (
+  <BaseAlertDialog.Root {...props} />
+)
+
+export const AlertDialogTrigger = ({
+  className,
+  ...props
+}: AlertDialogTriggerProps) => (
+  <BaseAlertDialog.Trigger className={cn(className)} {...props} />
+)
+
+export const AlertDialogPortal = (props: AlertDialogPortalProps) => (
+  <BaseAlertDialog.Portal {...props} />
+)
+
+export const AlertDialogBackdrop = ({
+  className,
+  ...props
+}: AlertDialogBackdropProps) => (
+  <BaseAlertDialog.Backdrop
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40 dark:bg-black/60",
+      motion.backdrop,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AlertDialogPopup = ({
+  className,
+  ...props
+}: AlertDialogPopupProps) => (
+  <BaseAlertDialog.Popup
+    className={cn(
+      "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface p-5 shadow-md outline-none max-sm:max-w-[calc(100vw-2rem)]",
+      motion.popupCenter,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AlertDialogTitle = ({
+  className,
+  ...props
+}: AlertDialogTitleProps) => (
+  <BaseAlertDialog.Title
+    className={cn("text-sm-strong text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const AlertDialogDescription = ({
+  className,
+  ...props
+}: AlertDialogDescriptionProps) => (
+  <BaseAlertDialog.Description
+    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const AlertDialogClose = ({
+  className,
+  ...props
+}: AlertDialogCloseProps) => (
+  <BaseAlertDialog.Close className={cn(className)} {...props} />
+)
+
+export const AlertDialogHeader = ({
+  className,
+  ...props
+}: AlertDialogHeaderProps) => (
+  <div className={cn("flex flex-col gap-1", className)} {...props} />
+)

package/src/attachment.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import type {
+  ChangeEvent,
+  ComponentProps,
+  DragEvent,
+  InputHTMLAttributes,
+} from "react";
+import { IconCrossSmall } from "./icons";
+import { cn } from "./lib/cn";
+import { motion } from "./lib/motion";
+
+export type AttachmentProps = Omit<ComponentProps<"label">, "onDrop"> & {
+  accept?: InputHTMLAttributes<HTMLInputElement>["accept"];
+  multiple?: boolean;
+  disabled?: boolean;
+  onFiles?: (files: File[]) => void;
+};
+export type AttachmentListProps = ComponentProps<"ul">;
+export type AttachmentItemProps = ComponentProps<"li">;
+export type AttachmentPreviewProps = ComponentProps<"div">;
+export type AttachmentNameProps = ComponentProps<"span">;
+export type AttachmentRemoveProps = ComponentProps<"button">;
+
+export const Attachment = ({
+  className,
+  children,
+  accept,
+  multiple,
+  disabled,
+  onFiles,
+  ...props
+}: AttachmentProps) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.currentTarget.files ?? []);
+    if (files.length > 0) onFiles?.(files);
+    event.currentTarget.value = "";
+  };
+
+  const handleDrop = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    if (disabled) return;
+
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length > 0) onFiles?.(multiple ? files : files.slice(0, 1));
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+  };
+
+  return (
+    <label
+      data-disabled={disabled || undefined}
+      className={cn(
+        "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border-primary bg-surface p-6 text-center text-sm text-fg-secondary outline-none hover:bg-background-secondary focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        motion.colors,
+        className,
+      )}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      {...props}
+    >
+      <input
+        type="file"
+        className="sr-only"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        onChange={handleChange}
+      />
+      {children}
+    </label>
+  );
+};
+
+export const AttachmentList = ({
+  className,
+  ...props
+}: AttachmentListProps) => (
+  <ul className={cn("flex flex-col gap-2", className)} {...props} />
+);
+
+export const AttachmentItem = ({
+  className,
+  ...props
+}: AttachmentItemProps) => (
+  <li
+    className={cn(
+      "flex items-center gap-3 rounded-lg border border-border-primary bg-surface p-2",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const AttachmentPreview = ({
+  className,
+  ...props
+}: AttachmentPreviewProps) => (
+  <div
+    className={cn(
+      "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-background-tertiary text-fg-secondary [&_img]:size-full [&_img]:object-cover [&_svg]:size-5",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const AttachmentName = ({
+  className,
+  ...props
+}: AttachmentNameProps) => (
+  <span
+    className={cn("min-w-0 flex-1 truncate text-sm text-fg-primary", className)}
+    {...props}
+  />
+);
+
+export const AttachmentRemove = ({
+  className,
+  children,
+  type = "button",
+  ...props
+}: AttachmentRemoveProps) => (
+  <button
+    type={type}
+    aria-label="Remove attachment"
+    className={cn(
+      "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-fg-tertiary 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",
+      motion.colors,
+      className,
+    )}
+    {...props}
+  >
+    {children ?? <IconCrossSmall />}
+  </button>
+);

package/src/autocomplete.tsx

@@ -0,0 +1,281 @@
+"use client"
+
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import type { ComponentProps, ReactElement } from "react"
+import { IconChevronDownSmall, IconCrossSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type AutocompleteProps = ComponentProps<typeof BaseAutocomplete.Root>
+export type AutocompleteValueProps = ComponentProps<typeof BaseAutocomplete.Value>
+export type AutocompleteTriggerProps = ComponentProps<
+  typeof BaseAutocomplete.Trigger
+>
+export type AutocompleteInputProps = ComponentProps<typeof BaseAutocomplete.Input>
+export type AutocompleteInputGroupProps = ComponentProps<
+  typeof BaseAutocomplete.InputGroup
+>
+export type AutocompleteIconProps = ComponentProps<typeof BaseAutocomplete.Icon>
+export type AutocompleteClearProps = ComponentProps<typeof BaseAutocomplete.Clear>
+export type AutocompleteListProps = ComponentProps<typeof BaseAutocomplete.List>
+export type AutocompleteStatusProps = ComponentProps<
+  typeof BaseAutocomplete.Status
+>
+export type AutocompletePortalProps = ComponentProps<
+  typeof BaseAutocomplete.Portal
+>
+export type AutocompleteBackdropProps = ComponentProps<
+  typeof BaseAutocomplete.Backdrop
+>
+export type AutocompletePositionerProps = ComponentProps<
+  typeof BaseAutocomplete.Positioner
+>
+export type AutocompletePopupProps = ComponentProps<typeof BaseAutocomplete.Popup>
+export type AutocompleteArrowProps = ComponentProps<typeof BaseAutocomplete.Arrow>
+export type AutocompleteGroupProps = ComponentProps<typeof BaseAutocomplete.Group>
+export type AutocompleteGroupLabelProps = ComponentProps<
+  typeof BaseAutocomplete.GroupLabel
+>
+export type AutocompleteItemProps = ComponentProps<typeof BaseAutocomplete.Item>
+export type AutocompleteRowProps = ComponentProps<typeof BaseAutocomplete.Row>
+export type AutocompleteCollectionProps = ComponentProps<
+  typeof BaseAutocomplete.Collection
+>
+export type AutocompleteEmptyProps = ComponentProps<typeof BaseAutocomplete.Empty>
+export type AutocompleteSeparatorProps = ComponentProps<
+  typeof BaseAutocomplete.Separator
+>
+
+export const Autocomplete = (props: AutocompleteProps): ReactElement => (
+  <BaseAutocomplete.Root {...props} />
+)
+
+export const AutocompleteValue = (props: AutocompleteValueProps) => (
+  <BaseAutocomplete.Value {...props} />
+)
+
+const inputGroupAccessoryClassName = cn(
+  "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center text-fg-tertiary outline-none",
+  motion.colors,
+  "hover:text-fg-primary focus-visible:bg-background-tertiary focus-visible:text-fg-primary focus-visible:outline-none data-disabled:cursor-not-allowed",
+)
+
+export const AutocompleteInputGroup = ({
+  className,
+  ...props
+}: AutocompleteInputGroupProps) => (
+  <BaseAutocomplete.InputGroup
+    className={cn(
+      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
+      "has-[[data-popup-open]]:bg-background-tertiary/60",
+      "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
+      "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
+      "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
+      "has-[:disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AutocompleteInput = ({
+  className,
+  ...props
+}: AutocompleteInputProps) => (
+  <BaseAutocomplete.Input
+    className={cn(
+      "h-9 min-w-0 flex-1 cursor-text rounded-md bg-transparent px-3 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary focus-visible:ring-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AutocompleteTrigger = ({
+  className,
+  children,
+  ...props
+}: AutocompleteTriggerProps) => (
+  <BaseAutocomplete.Trigger
+    className={cn(inputGroupAccessoryClassName, className)}
+    {...props}
+  >
+    {children ?? <AutocompleteIcon />}
+  </BaseAutocomplete.Trigger>
+)
+
+export const AutocompleteIcon = ({
+  className,
+  children,
+  ...props
+}: AutocompleteIconProps) => (
+  <BaseAutocomplete.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 />
+    )}
+  </BaseAutocomplete.Icon>
+)
+
+export const AutocompleteClear = ({
+  className,
+  children,
+  ...props
+}: AutocompleteClearProps) => (
+  <BaseAutocomplete.Clear
+    className={cn(inputGroupAccessoryClassName, className)}
+    {...props}
+  >
+    {children ?? (
+      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+    )}
+  </BaseAutocomplete.Clear>
+)
+
+export const AutocompletePortal = (props: AutocompletePortalProps) => (
+  <BaseAutocomplete.Portal {...props} />
+)
+
+export const AutocompleteBackdrop = ({
+  className,
+  ...props
+}: AutocompleteBackdropProps) => (
+  <BaseAutocomplete.Backdrop className={cn(className)} {...props} />
+)
+
+export const AutocompletePositioner = ({
+  sideOffset = 4,
+  className,
+  ...props
+}: AutocompletePositionerProps) => (
+  <BaseAutocomplete.Positioner
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const AutocompletePopup = ({
+  className,
+  ...props
+}: AutocompletePopupProps) => (
+  <BaseAutocomplete.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 AutocompleteArrow = ({
+  className,
+  ...props
+}: AutocompleteArrowProps) => (
+  <BaseAutocomplete.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 AutocompleteList = ({
+  className,
+  ...props
+}: AutocompleteListProps) => (
+  <BaseAutocomplete.List
+    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    {...props}
+  />
+)
+
+export const AutocompleteItem = ({
+  className,
+  ...props
+}: AutocompleteItemProps) => (
+  <BaseAutocomplete.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-highlighted:text-fg-primary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const AutocompleteEmpty = ({
+  className,
+  ...props
+}: AutocompleteEmptyProps) => (
+  <BaseAutocomplete.Empty
+    className={cn("px-2.5 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    {...props}
+  />
+)
+
+export const AutocompleteStatus = ({
+  className,
+  ...props
+}: AutocompleteStatusProps) => (
+  <BaseAutocomplete.Status
+    className={cn("px-2.5 py-2 text-sm text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
+export const AutocompleteGroup = ({
+  className,
+  ...props
+}: AutocompleteGroupProps) => (
+  <BaseAutocomplete.Group className={cn(className)} {...props} />
+)
+
+export const AutocompleteGroupLabel = ({
+  className,
+  ...props
+}: AutocompleteGroupLabelProps) => (
+  <BaseAutocomplete.GroupLabel
+    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
+export const AutocompleteSeparator = ({
+  className,
+  ...props
+}: AutocompleteSeparatorProps) => (
+  <BaseAutocomplete.Separator
+    className={cn("my-1 h-px bg-border-primary", className)}
+    {...props}
+  />
+)
+
+export const AutocompleteCollection = (props: AutocompleteCollectionProps) => (
+  <BaseAutocomplete.Collection {...props} />
+)
+
+export const AutocompleteRow = ({
+  className,
+  ...props
+}: AutocompleteRowProps) => (
+  <BaseAutocomplete.Row className={cn(className)} {...props} />
+)
+
+export const useAutocompleteFilter = BaseAutocomplete.useFilter
+export const useAutocompleteFilteredItems = BaseAutocomplete.useFilteredItems