@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.9",
+  "version": "0.2.0",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",
@@ -21,12 +21,14 @@
     "test": "node --test --experimental-strip-types \"src/**/*.test.ts\""
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
+    "@central-icons-react/round-filled-radius-2-stroke-2": "^1.1.315",
     "@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.312",
+    "@shadcn/react": "^0.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",

package/src/accordion.tsx

@@ -4,6 +4,7 @@ import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
 import type { ComponentProps } from "react"
 import { IconChevronBottom } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type AccordionProps = ComponentProps<typeof BaseAccordion.Root>
@@ -46,9 +47,11 @@ export const AccordionTrigger = ({
 }: 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",
+      "group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3.5 text-left text-sm text-fg-primary",
+      focusRingBorder,
       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",
+      focusRing,
+      "hover:bg-background-tertiary focus-visible:relative focus-visible:z-10 data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}

package/src/alert-dialog.tsx

@@ -58,7 +58,7 @@ export const AlertDialogPopup = ({
 }: 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)]",
+      "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-h-[calc(100dvh-2rem)] overflow-y-auto max-sm:max-w-[calc(100vw-2rem)]",
       motion.popupCenter,
       className,
     )}

package/src/attachment.tsx

@@ -8,6 +8,7 @@ import type {
 } from "react";
 import { IconCrossSmall } from "./icons";
 import { cn } from "./lib/cn";
+import { focusRing, focusRingWithin } from "./lib/focus";
 import { motion } from "./lib/motion";
 
 export type AttachmentProps = Omit<ComponentProps<"label">, "onDrop"> & {
@@ -53,7 +54,8 @@ export const Attachment = ({
     <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",
+        "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 hover:bg-background-secondary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        focusRingWithin,
         motion.colors,
         className,
       )}
@@ -127,7 +129,8 @@ export const AttachmentRemove = ({
     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",
+      "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-fg-tertiary hover:bg-background-tertiary hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-50",
+      focusRing,
       motion.colors,
       className,
     )}

package/src/autocomplete.tsx

@@ -4,6 +4,7 @@ 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 { focusRingWithin, focusRingInvalidWithin } from "./lib/focus"
 import { motion } from "./lib/motion"
 import { popupInset, popupItem, popupLabel, popupMessage, popupSurface } from "./lib/popup"
 
@@ -67,9 +68,9 @@ export const AutocompleteInputGroup = ({
 }: AutocompleteInputGroupProps) => (
   <BaseAutocomplete.InputGroup
     className={cn(
-      "relative flex min-h-9 w-full items-center rounded-xl border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "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",
+      "relative flex min-h-9 w-full items-center rounded-xl border border-border-secondary bg-surface inset-shadow-outline-top transition-[color,box-shadow]",
+      focusRingWithin,
+      focusRingInvalidWithin,
       "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,