@oxide/design-system 3.1.0 → 3.1.1--canary.152.18514620224.0

package/dist/components/src/{index.js → asciidoc/index.js}

@@ -1,9 +1,10 @@
 import {
-  Checkmark12Icon_default,
+  titleCase
+} from "../../../chunk-7VKKHVZC.js";
+import {
   DirectionRightIcon_default,
-  Link16Icon_default,
-  SelectArrows6Icon_default
-} from "../../chunk-BTKC2KJ2.js";
+  Link16Icon_default
+} from "../../../chunk-BTKC2KJ2.js";
 
 // components/src/asciidoc/index.tsx
 import asciidoctor2 from "@asciidoctor/core";
@@ -11,48 +12,6 @@ import { Content as Content4 } from "@oxide/react-asciidoc";
 
 // components/src/asciidoc/Admonition.tsx
 import { Content, parse, Title } from "@oxide/react-asciidoc";
-
-// 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")
-};
-
-// components/src/asciidoc/Admonition.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Admonition = ({ node }) => {
   const attrs2 = node.attributes;
@@ -119,8 +78,8 @@ var Admonition_default = Admonition;
 
 // components/src/asciidoc/Section.tsx
 import { Content as Content2, parse as parse2 } from "@oxide/react-asciidoc";
-import cn2 from "classnames";
-import { createElement as createElement2 } from "react";
+import cn from "classnames";
+import { createElement } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var stripAnchors = (str) => str.replace(/<a[^>]*>(.*?)<\/a>/gi, "$1");
 var Section = ({ node }) => {
@@ -137,12 +96,12 @@ var Section = ({ node }) => {
   ] });
   if (level === 0) {
     return /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2("h1", { className: cn2("sect0", node.role), "data-sectnum": sectNum, children: title }),
+      /* @__PURE__ */ jsx2("h1", { className: cn("sect0", node.role), "data-sectnum": sectNum, children: title }),
       /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks })
     ] });
   } else {
-    return /* @__PURE__ */ jsxs2("div", { className: cn2(`sect${level}`, node.role), children: [
-      createElement2(`h${level + 1}`, { "data-sectnum": sectNum }, title),
+    return /* @__PURE__ */ jsxs2("div", { className: cn(`sect${level}`, node.role), children: [
+      createElement(`h${level + 1}`, { "data-sectnum": sectNum }, title),
       /* @__PURE__ */ jsx2("div", { className: "sectionbody", children: /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks }) })
     ] });
   }
@@ -158,7 +117,7 @@ var Table_default = Table;
 // components/src/asciidoc/TableOfContents.tsx
 import { parse as parse3 } from "@oxide/react-asciidoc";
 import * as Accordion from "@radix-ui/react-accordion";
-import cn3 from "classnames";
+import cn2 from "classnames";
 import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function useIntersectionObserver(elements, callback, options) {
@@ -322,12 +281,12 @@ var DesktopOutline = ({
         "li",
         {
           "data-level": item.level,
-          className: cn3("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
+          className: cn2("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
           children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
-              className: cn3(
+              className: cn2(
                 "block border-l py-[4px] pr-4",
                 activeItem === item.id ? "active text-accent-secondary border-accent-secondary hover:text-accent" : "text-tertiary border-secondary hover:text-secondary"
               ),
@@ -343,7 +302,7 @@ var DesktopOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx4("ul", { className: cn3("toc w-(--toc-width)", className), children: renderToc(toc) });
+    return /* @__PURE__ */ jsx4("ul", { className: cn2("toc w-(--toc-width)", className), children: renderToc(toc) });
   }
   return null;
 };
@@ -359,13 +318,13 @@ var SmallScreenOutline = ({
         "li",
         {
           "data-level": item.level,
-          className: cn3("text-sans-sm list-none", item.level > 2 && "hidden"),
+          className: cn2("text-sans-sm list-none", item.level > 2 && "hidden"),
           children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
               onClick: () => setValue(""),
-              className: cn3(
+              className: cn2(
                 "block border-l py-[4px]",
                 activeItem === item.id ? "active text-accent-secondary border-accent-secondary hover:text-accent" : "text-tertiary border-secondary hover:text-secondary"
               ),
@@ -385,7 +344,7 @@ var SmallScreenOutline = ({
       Accordion.Root,
       {
         type: "single",
-        className: cn3(
+        className: cn2(
           "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
         ),
@@ -2062,368 +2021,18 @@ var InlineConverter = class {
     return this.baseConverter.convert(node, transform);
   }
 };
-
-// components/src/ui/badge/Badge.tsx
-import cn4 from "classnames";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var badgeColors = {
-  default: {
-    default: "bg-accent-secondary text-accent ring-accent/15",
-    destructive: "bg-destructive-secondary text-destructive ring-destructive/15",
-    notice: "bg-notice-secondary text-notice ring-notice/15",
-    blue: "bg-blue-200 text-blue-800 ring-blue-800/15",
-    purple: "bg-purple-200 text-purple-800 ring-purple-800/15",
-    neutral: "bg-secondary text-default ring-neutral-700/15"
-  },
-  solid: {
-    default: "bg-accent text-inverse",
-    destructive: "bg-destructive text-inverse",
-    notice: "bg-notice text-inverse",
-    neutral: "bg-inverse-tertiary text-inverse",
-    purple: "bg-purple-700 text-inverse",
-    blue: "bg-info text-inverse"
-  }
-};
-var Badge = ({
-  className,
-  children,
-  color = "default",
-  variant = "default"
-}) => {
-  return /* @__PURE__ */ jsx6(
-    "span",
-    {
-      className: cn4(
-        "ox-badge ring ring-inset",
-        `variant-${variant}`,
-        "text-mono-sm inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase",
-        badgeColors[variant][color],
-        className
-      ),
-      children: /* @__PURE__ */ jsx6("span", { children })
-    }
-  );
-};
-
-// components/src/ui/button/Button.tsx
-import cn5 from "classnames";
-import { forwardRef } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var buttonSizes = ["sm", "icon", "base"];
-var variants = ["primary", "secondary", "ghost", "danger"];
-var sizeStyle = {
-  sm: "h-8 px-3 text-mono-sm svg:w-4",
-  // meant for buttons that only contain a single icon
-  icon: "h-8 w-8 text-mono-sm svg:w-4",
-  base: "h-10 px-4 text-mono-sm svg:w-5"
-};
-var buttonStyle = ({
-  size: size2 = "base",
-  variant = "primary"
-} = {}) => {
-  return cn5(
-    "ox-button inline-flex items-center justify-center rounded align-top elevation-1 disabled:cursor-not-allowed",
-    `btn-${variant}`,
-    sizeStyle[size2],
-    variant === "danger" ? "focus:outline-destructive-secondary" : "focus:outline-accent-secondary"
-  );
-};
-var noop = (e) => {
-  e.stopPropagation();
-  e.preventDefault();
-};
-var Button = forwardRef(
-  ({
-    type = "button",
-    children,
-    size: size2,
-    variant,
-    className,
-    loading,
-    innerClassName,
-    disabled,
-    onClick,
-    // needs to be a spread because we sometimes get passed arbitrary <button>
-    // props by the parent
-    ...rest
-  }, ref) => {
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxs4(
-      "button",
-      {
-        className: cn5(buttonStyle({ size: size2, variant }), className, {
-          "visually-disabled": isDisabled
-        }),
-        ref,
-        type,
-        onMouseDown: isDisabled ? noop : void 0,
-        onClick: isDisabled ? noop : onClick,
-        "aria-disabled": isDisabled,
-        ...rest,
-        children: [
-          loading && /* @__PURE__ */ jsx7(Spinner, { className: "absolute", variant }),
-          /* @__PURE__ */ jsx7("span", { className: cn5("flex items-center", innerClassName, { invisible: loading }), children })
-        ]
-      }
-    );
-  }
-);
-
-// components/src/ui/spinner/Spinner.tsx
-import cn6 from "classnames";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var spinnerSizes = ["base", "lg"];
-var spinnerVariants = ["primary", "secondary", "ghost", "danger"];
-var Spinner = ({
-  className,
-  size: size2 = "base",
-  variant = "primary"
-}) => {
-  const frameSize = size2 === "lg" ? 36 : 12;
-  const center = size2 === "lg" ? 18 : 6;
-  const radius = size2 === "lg" ? 16 : 5;
-  const strokeWidth = size2 === "lg" ? 3 : 2;
-  return /* @__PURE__ */ jsxs5(
-    "svg",
-    {
-      width: frameSize,
-      height: frameSize,
-      viewBox: `0 0 ${frameSize + " " + frameSize}`,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-labelledby": "Spinner",
-      className: cn6("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
-      children: [
-        /* @__PURE__ */ jsx8(
-          "circle",
-          {
-            fill: "none",
-            className: "bg",
-            strokeWidth,
-            strokeLinecap: "round",
-            cx: center,
-            cy: center,
-            r: radius,
-            strokeOpacity: 0.2
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          "circle",
-          {
-            className: "path",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth,
-            strokeLinecap: "round",
-            cx: center,
-            cy: center,
-            r: radius
-          }
-        )
-      ]
-    }
-  );
-};
-var SpinnerLoader = ({ isLoading, children = null, minTime = 500 }) => {
-  const [isVisible, setIsVisible] = useState2(isLoading);
-  const hideTimeout = useRef2(null);
-  const loadingStartTime = useRef2(0);
-  useEffect3(() => {
-    if (isLoading) {
-      setIsVisible(true);
-      loadingStartTime.current = Date.now();
-    } else {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-      const elapsedTime = Date.now() - loadingStartTime.current;
-      const remainingTime = Math.max(0, minTime - elapsedTime);
-      if (remainingTime === 0) {
-        setIsVisible(false);
-      } else {
-        hideTimeout.current = setTimeout(() => setIsVisible(false), remainingTime);
-      }
-    }
-    return () => {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-    };
-  }, [isLoading, minTime]);
-  return isVisible ? /* @__PURE__ */ jsx8(Spinner, {}) : /* @__PURE__ */ jsx8(Fragment3, { children });
-};
-
-// components/src/ui/tabs/Tabs.tsx
-import { Content as Content5, List, Root as Root2, Trigger as Trigger2 } from "@radix-ui/react-tabs";
-import cn7 from "classnames";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Tabs = {
-  Root: ({ className, ...props }) => /* @__PURE__ */ jsx9(Root2, { ...props, className: cn7("ox-tabs", className) }),
-  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx9(Trigger2, { ...props, className: cn7("ox-tab", className), children: /* @__PURE__ */ jsx9("div", { children }) }),
-  List: ({ className, ...props }) => /* @__PURE__ */ jsx9(List, { ...props, className: cn7("ox-tabs-list", className) }),
-  Content: ({ className, ...props }) => /* @__PURE__ */ jsx9(Content5, { ...props, className: cn7("ox-tabs-panel", className) })
-};
-
-// 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: "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
-  disabled:cursor-not-allowed
-  hover:border-hover hover:cursor-pointer
-  checked:bg-accent-secondary checked:border-accent-secondary checked:hover:border-accent
-  indeterminate:bg-accent-secondary indeterminate:border-accent hover:indeterminate:bg-accent-secondary-hover
-`;
-var Checkbox = ({
-  indeterminate,
-  children,
-  className,
-  ...inputProps
-}) => /* @__PURE__ */ jsxs6("label", { className: "inline-flex items-center", children: [
-  /* @__PURE__ */ jsxs6("span", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ jsx10(
-      "input",
-      {
-        className: cn8(inputStyle, className),
-        type: "checkbox",
-        ref: (el) => {
-          if (el) el.indeterminate = !!indeterminate;
-        },
-        ...inputProps
-      }
-    ),
-    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx10(Check, {}),
-    indeterminate && /* @__PURE__ */ jsx10(Indeterminate, {})
-  ] }),
-  children && /* @__PURE__ */ jsx10("span", { className: "text-sans-md text-secondary ml-2.5", children })
-] });
-
-// components/src/ui/listbox/Listbox.tsx
-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";
-var Listbox = ({
-  name,
-  selected,
-  items,
-  placeholder = "Select an option",
-  className,
-  onChange,
-  hasError = false,
-  disabled,
-  isLoading = false,
-  ...props
-}) => {
-  const { refs, floatingStyles } = useFloating({
-    middleware: [
-      offset(12),
-      flip(),
-      size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`
-          });
-        }
-      })
-    ]
-  });
-  const selectedItem = selected && items.find((i) => i.value === selected);
-  const noItems = !isLoading && items.length === 0;
-  const isDisabled = disabled || noItems;
-  return /* @__PURE__ */ jsx11("div", { className: cn9("relative", className), children: /* @__PURE__ */ jsx11(
-    Select,
-    {
-      value: selected,
-      onChange: (val) => val !== null && onChange(val),
-      disabled: isDisabled || isLoading,
-      children: ({ open }) => /* @__PURE__ */ jsxs7(Fragment4, { children: [
-        /* @__PURE__ */ jsxs7(
-          Select.Button,
-          {
-            name,
-            ref: refs.setReference,
-            className: cn9(
-              `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-accent-secondary ring-2",
-              open && hasError && "ring-error-secondary",
-              isDisabled ? "text-disabled bg-disabled !border-default cursor-not-allowed" : "bg-default",
-              isDisabled && hasError && "!border-error-secondary"
-            ),
-            ...props,
-            children: [
-              /* @__PURE__ */ jsx11("div", { className: "w-full px-3 text-left", children: selectedItem ? (
-                // labelString is one line, which is what we need when label is a ReactNode
-                selectedItem.labelString || selectedItem.label
-              ) : /* @__PURE__ */ jsx11("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
-              !isDisabled && /* @__PURE__ */ jsx11(SpinnerLoader, { isLoading }),
-              /* @__PURE__ */ jsx11(
-                "div",
-                {
-                  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: "text-tertiary h-[14px] w-2" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx11(FloatingPortal, { children: /* @__PURE__ */ jsx11(
-          Select.Options,
-          {
-            ref: refs.setFloating,
-            style: floatingStyles,
-            className: "ox-menu pointer-events-auto z-50 overflow-y-auto !outline-none",
-            children: items.map((item) => /* @__PURE__ */ jsx11(
-              Select.Option,
-              {
-                value: item.value,
-                className: "border-secondary relative border-b last:border-0",
-                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx11(
-                  "div",
-                  {
-                    className: cn9(
-                      "ox-menu-item text-secondary",
-                      selected2 && "is-selected",
-                      active && "is-highlighted"
-                    ),
-                    children: item.label
-                  }
-                )
-              },
-              item.value
-            ))
-          }
-        ) })
-      ] })
-    }
-  ) });
-};
 export {
   AsciiDocBlocks,
-  Badge,
-  Button,
-  Checkbox,
   DesktopOutline,
   InlineConverter,
-  Listbox,
   SmallScreenOutline,
-  Spinner,
-  SpinnerLoader,
-  Tabs,
   attrs,
-  badgeColors,
-  buttonSizes,
-  buttonStyle,
   handleDocument,
   highlight,
   loadAsciidoctor,
   renderWithBreaks,
-  spinnerSizes,
-  spinnerVariants,
   useActiveSectionTracking,
   useDelegatedReactRouterLinks,
-  useIntersectionObserver,
-  variants
+  useIntersectionObserver
 };
 //# sourceMappingURL=index.js.map