@oxide/design-system 3.2.0--canary.151.18509831946.0 → 3.2.0--canary.151.18510677674.0

package/dist/components/src/ui/index.js

@@ -1,19 +1,439 @@
-import {
-  Badge,
-  Button,
-  Checkbox,
-  Listbox,
-  Spinner,
-  SpinnerLoader,
-  Tabs,
-  badgeColors,
-  buttonSizes,
-  buttonStyle,
-  spinnerSizes,
-  spinnerVariants,
-  variants
-} from "../../../chunk-XPHTG73Y.js";
-import "../../../chunk-BTKC2KJ2.js";
+// components/src/ui/badge/Badge.tsx
+import cn from "classnames";
+import { jsx } 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__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "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__ */ jsx("span", { children })
+    }
+  );
+};
+
+// components/src/ui/button/Button.tsx
+import cn2 from "classnames";
+import { forwardRef } from "react";
+import { jsx as jsx2, jsxs } 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 cn2(
+    "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__ */ jsxs(
+      "button",
+      {
+        className: cn2(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__ */ jsx2(Spinner, { className: "absolute", variant }),
+          /* @__PURE__ */ jsx2("span", { className: cn2("flex items-center", innerClassName, { invisible: loading }), children })
+        ]
+      }
+    );
+  }
+);
+
+// components/src/ui/spinner/Spinner.tsx
+import cn3 from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } 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__ */ jsxs2(
+    "svg",
+    {
+      width: frameSize,
+      height: frameSize,
+      viewBox: `0 0 ${frameSize + " " + frameSize}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-labelledby": "Spinner",
+      className: cn3("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
+      children: [
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            fill: "none",
+            className: "bg",
+            strokeWidth,
+            strokeLinecap: "round",
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeOpacity: 0.2
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "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] = useState(isLoading);
+  const hideTimeout = useRef(null);
+  const loadingStartTime = useRef(0);
+  useEffect(() => {
+    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__ */ jsx3(Spinner, {}) : /* @__PURE__ */ jsx3(Fragment, { children });
+};
+
+// components/src/ui/tabs/Tabs.tsx
+import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
+import cn4 from "classnames";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Tabs = {
+  Root: ({ className, ...props }) => /* @__PURE__ */ jsx4(Root, { ...props, className: cn4("ox-tabs", className) }),
+  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx4(Trigger, { ...props, className: cn4("ox-tab", className), children: /* @__PURE__ */ jsx4("div", { children }) }),
+  List: ({ className, ...props }) => /* @__PURE__ */ jsx4(List, { ...props, className: cn4("ox-tabs-list", className) }),
+  Content: ({ className, ...props }) => /* @__PURE__ */ jsx4(Content, { ...props, className: cn4("ox-tabs-panel", className) })
+};
+
+// icons/react/Checkmark12Icon.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Checkmark12Icon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    role: "img",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx5("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M10.492 2.651c.28.242.31.665.067.944L5.448 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var Checkmark12Icon_default = Checkmark12Icon;
+
+// icons/react/SelectArrows6Icon.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SelectArrows6Icon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs4(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 6,
+    height: 14,
+    viewBox: "0 0 6 14",
+    role: "img",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx6("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx6(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M3.322.536a.375.375 0 0 0-.644 0L.341 4.432C.19 4.682.37 5 .662 5h4.676a.375.375 0 0 0 .321-.568zm-.644 12.928a.375.375 0 0 0 .644 0l2.337-3.896A.375.375 0 0 0 5.338 9H.662a.375.375 0 0 0-.321.568z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var SelectArrows6Icon_default = SelectArrows6Icon;
+
+// components/src/ui/checkbox/Checkbox.tsx
+import cn6 from "classnames";
+
+// components/src/utils.ts
+import cn5 from "classnames";
+import { createElement } from "react";
+var make = (tag) => (
+  // only one argument here means string interpolations are not allowed
+  (strings) => {
+    const Comp = ({ className, children, ...rest }) => createElement(tag, { className: cn5(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/ui/checkbox/Checkbox.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var Check = () => /* @__PURE__ */ jsx7(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__ */ jsxs5("label", { className: "inline-flex items-center", children: [
+  /* @__PURE__ */ jsxs5("span", { className: "relative h-4 w-4", children: [
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        className: cn6(inputStyle, className),
+        type: "checkbox",
+        ref: (el) => {
+          if (el) el.indeterminate = !!indeterminate;
+        },
+        ...inputProps
+      }
+    ),
+    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx7(Check, {}),
+    indeterminate && /* @__PURE__ */ jsx7(Indeterminate, {})
+  ] }),
+  children && /* @__PURE__ */ jsx7("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 cn7 from "classnames";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } 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__ */ jsx8("div", { className: cn7("relative", className), children: /* @__PURE__ */ jsx8(
+    Select,
+    {
+      value: selected,
+      onChange: (val) => val !== null && onChange(val),
+      disabled: isDisabled || isLoading,
+      children: ({ open }) => /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsxs6(
+          Select.Button,
+          {
+            name,
+            ref: refs.setReference,
+            className: cn7(
+              `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__ */ jsx8("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__ */ jsx8("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
+              !isDisabled && /* @__PURE__ */ jsx8(SpinnerLoader, { isLoading }),
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "border-secondary ml-3 flex h-[calc(100%-12px)] items-center border-l px-3",
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx8(SelectArrows6Icon_default, { className: "text-tertiary h-[14px] w-2" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(FloatingPortal, { children: /* @__PURE__ */ jsx8(
+          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__ */ jsx8(
+              Select.Option,
+              {
+                value: item.value,
+                className: "border-secondary relative border-b last:border-0",
+                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx8(
+                  "div",
+                  {
+                    className: cn7(
+                      "ox-menu-item text-secondary",
+                      selected2 && "is-selected",
+                      active && "is-highlighted"
+                    ),
+                    children: item.label
+                  }
+                )
+              },
+              item.value
+            ))
+          }
+        ) })
+      ] })
+    }
+  ) });
+};
 export {
   Badge,
   Button,

package/dist/components/src/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../../../../components/src/ui/badge/Badge.tsx","../../../../components/src/ui/button/Button.tsx","../../../../components/src/ui/spinner/Spinner.tsx","../../../../components/src/ui/tabs/Tabs.tsx","../../../../icons/react/Checkmark12Icon.tsx","../../../../icons/react/SelectArrows6Icon.tsx","../../../../components/src/ui/checkbox/Checkbox.tsx","../../../../components/src/utils.ts","../../../../components/src/ui/listbox/Listbox.tsx"],"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'\n\nexport type BadgeColor =\n  | 'default'\n  | 'destructive'\n  | 'notice'\n  | 'neutral'\n  | 'purple'\n  | 'blue'\nexport type BadgeVariant = 'default' | 'solid'\n\nexport interface BadgeProps {\n  color?: BadgeColor\n  className?: string\n  children: React.ReactNode\n  variant?: BadgeVariant\n}\n\nexport const badgeColors: Record<BadgeVariant, Record<BadgeColor, string>> = {\n  default: {\n    default: 'bg-accent-secondary text-accent ring-accent/15',\n    destructive: 'bg-destructive-secondary text-destructive ring-destructive/15',\n    notice: 'bg-notice-secondary text-notice ring-notice/15',\n    blue: 'bg-blue-200 text-blue-800 ring-blue-800/15',\n    purple: 'bg-purple-200 text-purple-800 ring-purple-800/15',\n    neutral: 'bg-secondary text-default ring-neutral-700/15',\n  },\n  solid: {\n    default: 'bg-accent text-inverse',\n    destructive: 'bg-destructive text-inverse',\n    notice: 'bg-notice text-inverse',\n    neutral: 'bg-inverse-tertiary text-inverse',\n    purple: 'bg-purple-700 text-inverse',\n    blue: 'bg-info text-inverse',\n  },\n}\n\nexport const Badge = ({\n  className,\n  children,\n  color = 'default',\n  variant = 'default',\n}: BadgeProps) => {\n  return (\n    <span\n      className={cn(\n        'ox-badge ring ring-inset',\n        `variant-${variant}`,\n        'text-mono-sm inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase',\n        badgeColors[variant][color],\n        className,\n      )}\n    >\n      <span>{children}</span>\n    </span>\n  )\n}\n","/*\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 type { MouseEventHandler } from 'react'\nimport { forwardRef } from 'react'\n\nimport { Spinner } from '../'\n\nexport const buttonSizes = ['sm', 'icon', 'base'] as const\nexport const variants = ['primary', 'secondary', 'ghost', 'danger'] as const\n\nexport type ButtonSize = (typeof buttonSizes)[number]\nexport type Variant = (typeof variants)[number]\n\nconst sizeStyle: Record<ButtonSize, string> = {\n  sm: 'h-8 px-3 text-mono-sm svg:w-4',\n  // meant for buttons that only contain a single icon\n  icon: 'h-8 w-8 text-mono-sm svg:w-4',\n  base: 'h-10 px-4 text-mono-sm svg:w-5',\n}\n\ntype ButtonStyleProps = {\n  size?: ButtonSize\n  variant?: Variant\n}\n\nexport const buttonStyle = ({\n  size = 'base',\n  variant = 'primary',\n}: ButtonStyleProps = {}) => {\n  return cn(\n    'ox-button inline-flex items-center justify-center rounded align-top elevation-1 disabled:cursor-not-allowed',\n    `btn-${variant}`,\n    sizeStyle[size],\n    variant === 'danger'\n      ? 'focus:outline-destructive-secondary'\n      : 'focus:outline-accent-secondary',\n  )\n}\n\n/**\n * When the `disabled` prop is passed to the button we put it in a visually disabled state.\n * In that case we want to override the default mouse down and click behavior to simulate a\n * disabled state.\n */\nconst noop: MouseEventHandler<HTMLButtonElement> = (e) => {\n  e.stopPropagation()\n  e.preventDefault()\n}\n\nexport interface ButtonProps\n  extends React.ComponentPropsWithRef<'button'>,\n    ButtonStyleProps {\n  innerClassName?: string\n  loading?: boolean\n}\n\n// Use `forwardRef` so the ref points to the DOM element (not the React Component)\n// so it can be focused using the DOM API (eg. this.buttonRef.current.focus())\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'button',\n      children,\n      size,\n      variant,\n      className,\n      loading,\n      innerClassName,\n      disabled,\n      onClick,\n      // needs to be a spread because we sometimes get passed arbitrary <button>\n      // props by the parent\n      ...rest\n    },\n    ref,\n  ) => {\n    const isDisabled = disabled || loading\n    return (\n      <button\n        className={cn(buttonStyle({ size, variant }), className, {\n          'visually-disabled': isDisabled,\n        })}\n        ref={ref}\n        type={type}\n        onMouseDown={isDisabled ? noop : undefined}\n        onClick={isDisabled ? noop : onClick}\n        aria-disabled={isDisabled}\n        {...rest}\n      >\n        {loading && <Spinner className=\"absolute\" variant={variant} />}\n        <span className={cn('flex items-center', innerClassName, { invisible: loading })}>\n          {children}\n        </span>\n      </button>\n    )\n  },\n)\n","/*\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 type { ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\n\nexport const spinnerSizes = ['base', 'lg'] as const\nexport const spinnerVariants = ['primary', 'secondary', 'ghost', 'danger'] as const\nexport type SpinnerSize = (typeof spinnerSizes)[number]\nexport type SpinnerVariant = (typeof spinnerVariants)[number]\n\ninterface SpinnerProps {\n  className?: string\n  size?: SpinnerSize\n  variant?: SpinnerVariant\n}\n\nexport const Spinner = ({\n  className,\n  size = 'base',\n  variant = 'primary',\n}: SpinnerProps) => {\n  const frameSize = size === 'lg' ? 36 : 12\n  const center = size === 'lg' ? 18 : 6\n  const radius = size === 'lg' ? 16 : 5\n  const strokeWidth = size === 'lg' ? 3 : 2\n  return (\n    <svg\n      width={frameSize}\n      height={frameSize}\n      viewBox={`0 0 ${frameSize + ' ' + frameSize}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-labelledby=\"Spinner\"\n      className={cn('spinner', `spinner-${variant}`, `spinner-${size}`, className)}\n    >\n      <circle\n        fill=\"none\"\n        className=\"bg\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        cx={center}\n        cy={center}\n        r={radius}\n        strokeOpacity={0.2}\n      />\n      <circle\n        className=\"path\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        cx={center}\n        cy={center}\n        r={radius}\n      />\n    </svg>\n  )\n}\n\ntype Props = {\n  isLoading: boolean\n  children?: ReactNode\n  minTime?: number\n}\n\n/** Loading spinner that shows for a minimum of `minTime` */\nexport const SpinnerLoader = ({ isLoading, children = null, minTime = 500 }: Props) => {\n  const [isVisible, setIsVisible] = useState(isLoading)\n  const hideTimeout = useRef<NodeJS.Timeout | null>(null)\n  const loadingStartTime = useRef<number>(0)\n\n  useEffect(() => {\n    if (isLoading) {\n      setIsVisible(true)\n      loadingStartTime.current = Date.now()\n    } else {\n      // Clear the hide timer if it's still running.\n      if (hideTimeout.current) clearTimeout(hideTimeout.current)\n\n      // turn the spinner off, making sure it showed for at least `minTime`\n      const elapsedTime = Date.now() - loadingStartTime.current\n      const remainingTime = Math.max(0, minTime - elapsedTime)\n      if (remainingTime === 0) {\n        setIsVisible(false) // might as well not use a timeout\n      } else {\n        hideTimeout.current = setTimeout(() => setIsVisible(false), remainingTime)\n      }\n    }\n\n    return () => {\n      if (hideTimeout.current) clearTimeout(hideTimeout.current)\n    }\n  }, [isLoading, minTime])\n\n  return isVisible ? <Spinner /> : <>{children}</>\n}\n","/*\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 type {\n  TabsContentProps,\n  TabsListProps,\n  TabsProps,\n  TabsTriggerProps,\n} from '@radix-ui/react-tabs'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport cn from 'classnames'\nimport type { SetRequired } from 'type-fest'\n\n// They don't require a default value, but without it there is no tab selected\n// by default.\nexport type TabsRootProps = SetRequired<TabsProps, 'defaultValue'>\n\nexport const Tabs = {\n  Root: ({ className, ...props }: TabsRootProps) => (\n    <Root {...props} className={cn('ox-tabs', className)} />\n  ),\n  Trigger: ({ children, className, ...props }: TabsTriggerProps) => (\n    <Trigger {...props} className={cn('ox-tab', className)}>\n      {/* this div needs to be here for the background on `ox-tab:hover > *` */}\n      <div>{children}</div>\n    </Trigger>\n  ),\n  List: ({ className, ...props }: TabsListProps) => (\n    <List {...props} className={cn('ox-tabs-list', className)} />\n  ),\n  Content: ({ className, ...props }: TabsContentProps) => (\n    <Content {...props} className={cn('ox-tabs-panel', className)} />\n  ),\n}\n","/*\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 type { SVGProps } from 'react'\n\ninterface SVGRProps {\n  title?: string\n  titleId?: string\n}\nconst Checkmark12Icon = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={12}\n    height={12}\n    viewBox=\"0 0 12 12\"\n    role=\"img\"\n    aria-labelledby={titleId}\n    {...props}\n  >\n    {title ? <title id={titleId}>{title}</title> : null}\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M10.492 2.651c.28.242.31.665.067.944L5.448 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\nexport default Checkmark12Icon\n","/*\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 type { SVGProps } from 'react'\n\ninterface SVGRProps {\n  title?: string\n  titleId?: string\n}\nconst SelectArrows6Icon = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={6}\n    height={14}\n    viewBox=\"0 0 6 14\"\n    role=\"img\"\n    aria-labelledby={titleId}\n    {...props}\n  >\n    {title ? <title id={titleId}>{title}</title> : null}\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M3.322.536a.375.375 0 0 0-.644 0L.341 4.432C.19 4.682.37 5 .662 5h4.676a.375.375 0 0 0 .321-.568zm-.644 12.928a.375.375 0 0 0 .644 0l2.337-3.896A.375.375 0 0 0 5.338 9H.662a.375.375 0 0 0-.321.568z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\nexport default SelectArrows6Icon\n","/*\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 { Checkmark12Icon } from '@/icons/react'\nimport cn from 'classnames'\n\nimport { classed } from '../../utils'\n\nconst Check = () => (\n  <Checkmark12Icon className=\"text-accent pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current\" />\n)\n\nconst Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent pointer-events-none`\n\nconst inputStyle = `\n  appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0 outline-none\n  disabled:cursor-not-allowed\n  hover:border-hover hover:cursor-pointer\n  checked:bg-accent-secondary checked:border-accent-secondary checked:hover:border-accent\n  indeterminate:bg-accent-secondary indeterminate:border-accent hover:indeterminate:bg-accent-secondary-hover\n`\n\nexport type CheckboxProps = {\n  indeterminate?: boolean\n  children?: React.ReactNode\n  className?: string\n} & Omit<React.ComponentProps<'input'>, 'type'>\n\n// ref function is from: https://davidwalsh.name/react-indeterminate. this makes\n// the native input work with indeterminate. you can't pass indeterminate as a\n// prop; it has to be set directly on the element through a ref. more elaborate\n// examples using forwardRef to allow passing ref from outside:\n// https://github.com/tannerlinsley/react-table/discussions/1989\n\n/** Checkbox component that handles label, styling, and indeterminate state */\nexport const Checkbox = ({\n  indeterminate,\n  children,\n  className,\n  ...inputProps\n}: CheckboxProps) => (\n  <label className=\"inline-flex items-center\">\n    <span className=\"relative h-4 w-4\">\n      <input\n        className={cn(inputStyle, className)}\n        type=\"checkbox\"\n        ref={(el) => {\n          if (el) el.indeterminate = !!indeterminate\n        }}\n        {...inputProps}\n      />\n      {inputProps.checked && !indeterminate && <Check />}\n      {indeterminate && <Indeterminate />}\n    </span>\n\n    {children && <span className=\"text-sans-md text-secondary ml-2.5\">{children}</span>}\n  </label>\n)\n","/*\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","/*\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 { SelectArrows6Icon } from '@/icons/react'\nimport { flip, FloatingPortal, offset, size, useFloating } from '@floating-ui/react'\nimport { Listbox as Select } from '@headlessui/react'\nimport cn from 'classnames'\nimport type { ReactNode } from 'react'\nimport { SpinnerLoader } from '~/src'\n\nexport type ListboxItem<Value extends string = string> = {\n  value: Value\n} & (\n  | { label: string; labelString?: never }\n  // labelString is required when `label` is a `ReactElement` because we\n  // need need a one-line string to display in the button when the item is\n  // selected.\n  | { label: ReactNode; labelString: string }\n)\n\nexport interface ListboxProps<Value extends string = string> {\n  // null is allowed as a default empty value, but onChange will never be called with null\n  selected: Value | null\n  onChange: (value: Value) => void\n  items: ListboxItem<Value>[]\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  hasError?: boolean\n  name?: string\n  isLoading?: boolean\n}\n\nexport const Listbox = <Value extends string = string>({\n  name,\n  selected,\n  items,\n  placeholder = 'Select an option',\n  className,\n  onChange,\n  hasError = false,\n  disabled,\n  isLoading = false,\n  ...props\n}: ListboxProps<Value>) => {\n  const { refs, floatingStyles } = useFloating({\n    middleware: [\n      offset(12),\n      flip(),\n      size({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            width: `${rects.reference.width}px`,\n          })\n        },\n      }),\n    ],\n  })\n\n  const selectedItem = selected && items.find((i) => i.value === selected)\n  const noItems = !isLoading && items.length === 0\n  const isDisabled = disabled || noItems\n\n  return (\n    <div className={cn('relative', className)}>\n      <Select\n        value={selected}\n        // you shouldn't ever be able to select null, but we check here anyway\n        // to make TS happy so the calling code doesn't have to. note `val !==\n        // null` because '' is falsy but potentially a valid value\n        onChange={(val) => val !== null && onChange(val)}\n        disabled={isDisabled || isLoading}\n      >\n        {({ open }) => (\n          <>\n            <Select.Button\n              name={name}\n              ref={refs.setReference}\n              className={cn(\n                `text-sans-md flex h-10 w-full items-center justify-between rounded border`,\n                hasError\n                  ? 'focus-error border-error-secondary hover:border-error'\n                  : 'border-default hover:border-hover',\n                open && 'ring-accent-secondary ring-2',\n                open && hasError && 'ring-error-secondary',\n                isDisabled\n                  ? 'text-disabled bg-disabled !border-default cursor-not-allowed'\n                  : 'bg-default',\n                isDisabled && hasError && '!border-error-secondary',\n              )}\n              {...props}\n            >\n              <div className=\"w-full px-3 text-left\">\n                {selectedItem ? (\n                  // labelString is one line, which is what we need when label is a ReactNode\n                  selectedItem.labelString || selectedItem.label\n                ) : (\n                  <span className=\"text-quaternary\">\n                    {noItems ? 'No items' : placeholder}\n                  </span>\n                )}\n              </div>\n              {!isDisabled && <SpinnerLoader isLoading={isLoading} />}\n              <div\n                className=\"border-secondary ml-3 flex h-[calc(100%-12px)] items-center border-l px-3\"\n                aria-hidden\n              >\n                <SelectArrows6Icon className=\"text-tertiary h-[14px] w-2\" />\n              </div>\n            </Select.Button>\n            <FloatingPortal>\n              <Select.Options\n                ref={refs.setFloating}\n                style={floatingStyles}\n                className=\"ox-menu pointer-events-auto z-50 overflow-y-auto !outline-none\"\n              >\n                {items.map((item) => (\n                  <Select.Option\n                    key={item.value}\n                    value={item.value}\n                    className=\"border-secondary relative border-b last:border-0\"\n                  >\n                    {({ active, selected }) => (\n                      <div\n                        className={cn(\n                          'ox-menu-item text-secondary',\n                          selected && 'is-selected',\n                          active && 'is-highlighted',\n                        )}\n                      >\n                        {item.label}\n                      </div>\n                    )}\n                  </Select.Option>\n                ))}\n              </Select.Options>\n            </FloatingPortal>\n          </>\n        )}\n      </Select>\n    </div>\n  )\n}\n"],"mappings":"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","names":["cn","jsx","size","cn","cn","jsx","jsxs","size","cn","jsx","jsx","jsxs","jsx","jsxs","cn","cn","cn","jsx","jsxs","cn","cn","Fragment","jsx","jsxs","cn","selected"]}