@oxide/design-system 3.0.2 → 3.0.3--canary.148.17951596811.0

package/README.md

@@ -46,7 +46,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",
                   {