@oxide/design-system 3.0.3--canary.148.17948310749.0 → 3.0.3--canary.148.17952731885.0

package/README.md

@@ -24,10 +24,7 @@ For more information checkout [auto's docs](https://intuit.github.io/auto/docs).
 
 To ensure consistency between our designs and implementation we use the
 [Design Tokens Plugin](https://www.figma.com/community/plugin/888356646278934516/Design-Tokens)
-inside of figma to export a [json tokens file](styles/src/tokens.json) to the repo. When
-that file is changed the [build-themes](.github/workflows/build-themes.yaml) workflow runs
-to generate theme stylesheets, a tailwind token file, and other artifacts in
-[dist](styles/dist/).
+inside of figma to export a [json tokens file](styles/src/tokens.json) to the repo. The user can then run `npm run build` to generate theme files. This is not automatic, the user should then commit the changes.
 
 The design tokens plugin is two way so token changes made in the json file can be synced
 back with figma.
@@ -46,7 +43,6 @@ icon component as shown below:
 
 ```tsx
 import { type Icon as IconType } from '@oxide/design-system/icons'
-
 // Cannot be imported through '@oxide/design-system'
 import sprite from '../../node_modules/@oxide/design-system/icons/sprite.svg'
 

package/dist/button.css

@@ -41,14 +41,14 @@ label {
   }
 
   &.btn-ghost {
-    @apply text-secondary hover:bg-hover disabled:bg-transparent disabled:text-disabled;
+    @apply text-secondary hover:bg-hover disabled:text-disabled disabled:bg-transparent;
   }
   &.btn-ghost:after {
     @apply text-neutral-300 opacity-100;
   }
 
   &.btn-accent-ghost {
-    @apply border text-accent border-accent-secondary hover:bg-accent-secondary-hover;
+    @apply text-accent border-accent-secondary hover:bg-accent-secondary-hover border;
   }
 
   &.btn-accent-ghost:after {

package/dist/components/src/index.d.ts

@@ -16,12 +16,12 @@ declare function useActiveSectionTracking(initialSections: Element[], onSectionC
 declare const DesktopOutline: ({ toc, activeItem, className, }: {
     toc: DocumentSection[];
     activeItem: string;
-    className?: string | undefined;
+    className?: string;
 }) => react_jsx_runtime.JSX.Element | null;
 declare const SmallScreenOutline: ({ toc, activeItem, className, }: {
     toc: DocumentSection[];
     activeItem: string;
-    className?: string | undefined;
+    className?: string;
 }) => react_jsx_runtime.JSX.Element | null;
 
 interface Path {
@@ -41,7 +41,7 @@ declare const attrs: {
     stylesheet: boolean;
 };
 declare const loadAsciidoctor: ({ extensions, }: {
-    extensions?: ((this: Registry) => void)[] | undefined;
+    extensions?: ((this: Registry) => void)[];
 }) => _asciidoctor_core.Asciidoctor;
 declare const handleDocument: (document: Document) => Promise<_oxide_react_asciidoc.DocumentBlock>;
 

package/dist/components/src/index.js

@@ -10,7 +10,7 @@ import asciidoctor2 from "@asciidoctor/core";
 import { Content as Content4 } from "@oxide/react-asciidoc";
 
 // components/src/asciidoc/Admonition.tsx
-import { Content, Title, parse } from "@oxide/react-asciidoc";
+import { Content, parse, Title } from "@oxide/react-asciidoc";
 
 // components/src/utils.ts
 import cn from "classnames";
@@ -132,7 +132,7 @@ var Section = ({ node }) => {
     /* @__PURE__ */ jsx2("span", { className: "anchor", id: node.id || "", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs2("a", { className: "link group", href: `#${node.id}`, children: [
       parse2(stripAnchors(node.title)),
-      /* @__PURE__ */ jsx2(Link16Icon_default, { className: "ml-2 hidden text-accent-secondary group-hover:inline-block" })
+      /* @__PURE__ */ jsx2(Link16Icon_default, { className: "text-accent-secondary ml-2 hidden group-hover:inline-block" })
     ] })
   ] });
   if (level === 0) {
@@ -322,7 +322,7 @@ var DesktopOutline = ({
         "li",
         {
           "data-level": item.level,
-          className: cn3("mb-0 list-none text-sans-sm", item.level > 2 && "hidden"),
+          className: cn3("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
           children: /* @__PURE__ */ jsx4(
             "a",
             {
@@ -359,7 +359,7 @@ var SmallScreenOutline = ({
         "li",
         {
           "data-level": item.level,
-          className: cn3("list-none text-sans-sm", item.level > 2 && "hidden"),
+          className: cn3("text-sans-sm list-none", item.level > 2 && "hidden"),
           children: /* @__PURE__ */ jsx4(
             "a",
             {
@@ -386,19 +386,19 @@ var SmallScreenOutline = ({
       {
         type: "single",
         className: cn3(
-          "toc sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t bg-default border-secondary print:hidden",
+          "toc bg-default border-secondary sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t print:hidden",
           className
         ),
         collapsible: true,
         value,
         onValueChange: setValue,
         children: /* @__PURE__ */ jsxs3(Accordion.Item, { value: "toc", children: [
-          /* @__PURE__ */ jsx4(Accordion.Header, { children: /* @__PURE__ */ jsxs3(Accordion.Trigger, { className: "flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-(--container-px) [&>svg]:data-[state=open]:rotate-90", children: [
+          /* @__PURE__ */ jsx4(Accordion.Header, { children: /* @__PURE__ */ jsxs3(Accordion.Trigger, { className: "text-sans-md text-default hover:bg-hover px-(--container-px) flex h-12 w-full items-center justify-between [&>svg]:data-[state=open]:rotate-90", children: [
             "Table of Contents",
             " ",
-            /* @__PURE__ */ jsx4(DirectionRightIcon_default, { className: "transition-all text-tertiary" })
+            /* @__PURE__ */ jsx4(DirectionRightIcon_default, { className: "text-tertiary transition-all" })
           ] }) }),
-          /* @__PURE__ */ jsx4(Accordion.Content, { className: "animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-(--container-px)", children: /* @__PURE__ */ jsx4("div", { className: "py-4", children: renderToc(toc) }) })
+          /* @__PURE__ */ jsx4(Accordion.Content, { className: "animated-accordion hydrated border-secondary px-(--container-px) max-h-[60vh] w-full overflow-y-scroll border-t", children: /* @__PURE__ */ jsx4("div", { className: "py-4", children: renderToc(toc) }) })
         ] })
       }
     );
@@ -442,7 +442,7 @@ import {
 } from "@oxide/react-asciidoc";
 import {
   bundledLanguages,
-  getHighlighter
+  createHighlighter
 } from "shiki";
 
 // components/src/asciidoc/langs/oxql.tmLanguage.json
@@ -1895,7 +1895,7 @@ async function getOrCreateHighlighter() {
     langs.push({
       ...oxql_tmLanguage_default
     });
-    highlighter = await getHighlighter({
+    highlighter = await createHighlighter({
       themes: [oxide_dark_default],
       langs
     });
@@ -2096,7 +2096,7 @@ var Badge = ({
       className: cn4(
         "ox-badge ring ring-inset",
         `variant-${variant}`,
-        "inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm",
+        "text-mono-sm inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase",
         badgeColors[variant][color],
         className
       ),
@@ -2264,7 +2264,7 @@ var Tabs = {
 // components/src/ui/checkbox/Checkbox.tsx
 import cn8 from "classnames";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var Check = () => /* @__PURE__ */ jsx10(Checkmark12Icon_default, { className: "pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent" });
+var Check = () => /* @__PURE__ */ jsx10(Checkmark12Icon_default, { className: "text-accent pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current" });
 var Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent pointer-events-none`;
 var inputStyle = `
   appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0 outline-none
@@ -2294,11 +2294,11 @@ var Checkbox = ({
     inputProps.checked && !indeterminate && /* @__PURE__ */ jsx10(Check, {}),
     indeterminate && /* @__PURE__ */ jsx10(Indeterminate, {})
   ] }),
-  children && /* @__PURE__ */ jsx10("span", { className: "ml-2.5 text-sans-md text-secondary", children })
+  children && /* @__PURE__ */ jsx10("span", { className: "text-sans-md text-secondary ml-2.5", children })
 ] });
 
 // components/src/ui/listbox/Listbox.tsx
-import { FloatingPortal, flip, offset, size, useFloating } from "@floating-ui/react";
+import { flip, FloatingPortal, offset, size, useFloating } from "@floating-ui/react";
 import { Listbox as Select } from "@headlessui/react";
 import cn9 from "classnames";
 import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -2343,12 +2343,11 @@ var Listbox = ({
             name,
             ref: refs.setReference,
             className: cn9(
-              `flex h-10 w-full items-center justify-between
-                    rounded border text-sans-md`,
+              `text-sans-md flex h-10 w-full items-center justify-between rounded border`,
               hasError ? "focus-error border-error-secondary hover:border-error" : "border-default hover:border-hover",
-              open && "ring-2 ring-accent-secondary",
+              open && "ring-accent-secondary ring-2",
               open && hasError && "ring-error-secondary",
-              isDisabled ? "cursor-not-allowed text-disabled bg-disabled !border-default" : "bg-default",
+              isDisabled ? "text-disabled bg-disabled !border-default cursor-not-allowed" : "bg-default",
               isDisabled && hasError && "!border-error-secondary"
             ),
             ...props,
@@ -2361,9 +2360,9 @@ var Listbox = ({
               /* @__PURE__ */ jsx11(
                 "div",
                 {
-                  className: "ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary",
+                  className: "border-secondary ml-3 flex h-[calc(100%-12px)] items-center border-l px-3",
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx11(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
+                  children: /* @__PURE__ */ jsx11(SelectArrows6Icon_default, { className: "text-tertiary h-[14px] w-2" })
                 }
               )
             ]
@@ -2379,7 +2378,7 @@ var Listbox = ({
               Select.Option,
               {
                 value: item.value,
-                className: "relative border-b border-secondary last:border-0",
+                className: "border-secondary relative border-b last:border-0",
                 children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx11(
                   "div",
                   {