@oxide/design-system 3.2.0--canary.151.18510677674.0 → 4.0.0--canary.151.18511380774.0

package/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:

package/dist/chunk-7VKKHVZC.js

@@ -0,0 +1,45 @@
+// components/src/utils.ts
+import cn from "classnames";
+import { createElement } from "react";
+var titleCase = (text) => {
+  return text.replace(
+    /\w\S*/g,
+    (text2) => text2.charAt(0).toUpperCase() + text2.substring(1).toLowerCase()
+  );
+};
+var make = (tag) => (
+  // only one argument here means string interpolations are not allowed
+  (strings) => {
+    const Comp = ({ className, children, ...rest }) => createElement(tag, { className: cn(strings[0], className), ...rest }, children);
+    Comp.displayName = `classed.${tag}`;
+    return Comp;
+  }
+);
+var classed = {
+  button: make("button"),
+  div: make("div"),
+  h1: make("h1"),
+  h2: make("h2"),
+  h3: make("h3"),
+  h4: make("h4"),
+  hr: make("hr"),
+  header: make("header"),
+  input: make("input"),
+  label: make("label"),
+  li: make("li"),
+  main: make("main"),
+  ol: make("ol"),
+  p: make("p"),
+  span: make("span"),
+  table: make("table"),
+  tbody: make("tbody"),
+  td: make("td"),
+  th: make("th"),
+  tr: make("tr")
+};
+
+export {
+  titleCase,
+  classed
+};
+//# sourceMappingURL=chunk-7VKKHVZC.js.map

package/dist/chunk-7VKKHVZC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../components/src/utils.ts"],"sourcesContent":["/*\n * This Source Code Form is subject to the terms of the Mozilla Public\n * License, v. 2.0. If a copy of the MPL was not distributed with this\n * file, you can obtain one at https://mozilla.org/MPL/2.0/.\n *\n * Copyright Oxide Computer Company\n */\nimport cn from 'classnames'\nimport { createElement, type JSX } from 'react'\n\nconst titleCase = (text: string): string => {\n  return text.replace(\n    /\\w\\S*/g,\n    (text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase(),\n  )\n}\n\n// all the cuteness of tw.span`text-secondary uppercase` with zero magic\n\nconst make =\n  <T extends keyof JSX.IntrinsicElements>(tag: T) =>\n  // only one argument here means string interpolations are not allowed\n  (strings: TemplateStringsArray) => {\n    const Comp = ({ className, children, ...rest }: JSX.IntrinsicElements[T]) =>\n      createElement(tag, { className: cn(strings[0], className), ...rest }, children)\n    Comp.displayName = `classed.${tag}`\n    return Comp\n  }\n\n// JSX.IntrinsicElements[T] ensures same props as the real DOM element. For example,\n// classed.span doesn't allow a type attr but classed.input does.\n\nconst classed = {\n  button: make('button'),\n  div: make('div'),\n  h1: make('h1'),\n  h2: make('h2'),\n  h3: make('h3'),\n  h4: make('h4'),\n  hr: make('hr'),\n  header: make('header'),\n  input: make('input'),\n  label: make('label'),\n  li: make('li'),\n  main: make('main'),\n  ol: make('ol'),\n  p: make('p'),\n  span: make('span'),\n  table: make('table'),\n  tbody: make('tbody'),\n  td: make('td'),\n  th: make('th'),\n  tr: make('tr'),\n} as const\n\n// result: classed.button`text-secondary uppercase` returns a component with those classes\n\nexport { titleCase, classed }\n"],"mappings":";AAOA,OAAO,QAAQ;AACf,SAAS,qBAA+B;AAExC,IAAM,YAAY,CAAC,SAAyB;AAC1C,SAAO,KAAK;AAAA,IACV;AAAA,IACA,CAACA,UAASA,MAAK,OAAO,CAAC,EAAE,YAAY,IAAIA,MAAK,UAAU,CAAC,EAAE,YAAY;AAAA,EACzE;AACF;AAIA,IAAM,OACJ,CAAwC;AAAA;AAAA,EAExC,CAAC,YAAkC;AACjC,UAAM,OAAO,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,MAC3C,cAAc,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG,SAAS,GAAG,GAAG,KAAK,GAAG,QAAQ;AAChF,SAAK,cAAc,WAAW,GAAG;AACjC,WAAO;AAAA,EACT;AAAA;AAKF,IAAM,UAAU;AAAA,EACd,QAAQ,KAAK,QAAQ;AAAA,EACrB,KAAK,KAAK,KAAK;AAAA,EACf,IAAI,KAAK,IAAI;AAAA,EACb,IAAI,KAAK,IAAI;AAAA,EACb,IAAI,KAAK,IAAI;AAAA,EACb,IAAI,KAAK,IAAI;AAAA,EACb,IAAI,KAAK,IAAI;AAAA,EACb,QAAQ,KAAK,QAAQ;AAAA,EACrB,OAAO,KAAK,OAAO;AAAA,EACnB,OAAO,KAAK,OAAO;AAAA,EACnB,IAAI,KAAK,IAAI;AAAA,EACb,MAAM,KAAK,MAAM;AAAA,EACjB,IAAI,KAAK,IAAI;AAAA,EACb,GAAG,KAAK,GAAG;AAAA,EACX,MAAM,KAAK,MAAM;AAAA,EACjB,OAAO,KAAK,OAAO;AAAA,EACnB,OAAO,KAAK,OAAO;AAAA,EACnB,IAAI,KAAK,IAAI;AAAA,EACb,IAAI,KAAK,IAAI;AAAA,EACb,IAAI,KAAK,IAAI;AACf;","names":["text"]}