Split /components export into /asciidoc and /ui

.github/workflows/release.yml

@@ -57,8 +57,8 @@ jobs:
         with:
           node-version: 22.x
           cache: npm
-      - run: npm install
       - run: npm install -g npm@latest
+      - run: npm install
 
       - name: Build
         run: npm run build

README.md

@@ -71,24 +71,33 @@ Subsequently, you can use it as follows:
 
 This is type-checked, and will throw an error if the corresponding icon doesn't exist.
 
-## AsciiDoc Components
+## Usage
 
-This repository includes various
-[`@oxide/react-asciidoc`](https://github.com/oxidecomputer/react-asciidoc) components that
-are reused across multiple internal sites such as docs.oxide.computer, oxide.computer, and
-eventually the rfd.shared.oxide.computer (when its conversion to `react-asciidoc` is
-complete). The associated stylesheet `asciidoc.css` is also included.
+This package provides two main entry points:
 
-They can be imported and used as follows:
+### UI Components (`@oxide/design-system/ui`)
+
+Basic UI components like Badge, Button, Checkbox, Listbox, Spinner, and Tabs. These are
+lightweight components without dependencies on AsciiDoc processing.
 
 ```ts
-import { AsciiDocBlocks } from '@oxide/design-system/components/dist'
+import { Button, Badge } from '@oxide/design-system/ui'
+```
+
+### AsciiDoc Components (`@oxide/design-system/asciidoc`)
+
+[`@oxide/react-asciidoc`](https://github.com/oxidecomputer/react-asciidoc) components for
+rendering AsciiDoc content, reused across docs.oxide.computer, oxide.computer, and
+rfd.shared.oxide.computer. The associated stylesheet `asciidoc.css` is also included.
+
+```ts
+import { AsciiDocBlocks } from '@oxide/design-system/asciidoc'
 
 export const opts: Options = {
   overrides: {
     admonition: AsciiDocBlocks.Admonition,
     table: AsciiDocBlocks.Table,
-    listing: AsciiDocBlocks.Listing,
+    section: AsciiDocBlocks.Section,
   },
 }
 ```
@@ -97,11 +106,7 @@ export const opts: Options = {
 <Asciidoc content={document} options={opts} />
 ```
 
-## React Components
-
-The full UI library is housed within the web console repo. The components included in this
-package are those reused across other Oxide sites. When using them, remember to also import
-their associated stylesheets.
+When using these components, remember to also import their associated stylesheets.
 
 Be sure to add the components path to the `tailwind.config.js` to ensure the appropriate
 styles are included. For example:

components/src/ui/listbox/Listbox.tsx

@@ -10,7 +10,8 @@ import { flip, FloatingPortal, offset, size, useFloating } from '@floating-ui/re
 import { Listbox as Select } from '@headlessui/react'
 import cn from 'classnames'
 import type { ReactNode } from 'react'
-import { SpinnerLoader } from '~/src'
+
+import { SpinnerLoader } from '../'
 
 export type ListboxItem<Value extends string = string> = {
   value: Value

components/src/ui/spinner/Spinner.tsx

@@ -69,10 +69,12 @@ type Props = {
   minTime?: number
 }
 
+type Timeout = ReturnType<typeof setTimeout>
+
 /** Loading spinner that shows for a minimum of `minTime` */
 export const SpinnerLoader = ({ isLoading, children = null, minTime = 500 }: Props) => {
   const [isVisible, setIsVisible] = useState(isLoading)
-  const hideTimeout = useRef<NodeJS.Timeout | null>(null)
+  const hideTimeout = useRef<Timeout | null>(null)
   const loadingStartTime = useRef<number>(0)
 
   useEffect(() => {