@oxide/design-system 4.1.0--canary.156.21137579222.0 → 4.1.0--canary.156.21251903486.0

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

@@ -102,6 +102,7 @@ var Button = forwardRef(
         onMouseDown: isDisabled ? noop : void 0,
         onClick: isDisabled ? noop : onClick,
         "aria-disabled": isDisabled,
+        disabled: isDisabled,
         ...rest,
         children: [
           loading && /* @__PURE__ */ jsx2(Spinner, { className: "absolute", variant }),

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

@@ -1 +1 @@
-{"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","../../../../components/src/ui/checkbox/Checkbox.tsx","../../../../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\ntype Timeout = ReturnType<typeof setTimeout>\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<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 { 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 { 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'\n\nimport { SpinnerLoader } from '../'\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","cn","jsx","jsxs","cn","cn","Fragment","jsx","jsxs","cn","selected"]}
+{"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","../../../../components/src/ui/checkbox/Checkbox.tsx","../../../../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        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\ntype Timeout = ReturnType<typeof setTimeout>\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<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 { 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 { 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'\n\nimport { SpinnerLoader } from '../'\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","cn","jsx","jsxs","cn","cn","Fragment","jsx","jsxs","cn","selected"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxide/design-system",
-  "version": "4.1.0--canary.156.21137579222.0",
+  "version": "4.1.0--canary.156.21251903486.0",
   "description": "Home of reusable design assets and token for oxide internal sites",
   "type": "module",
   "sideEffects": false,

package/styles/dist/tailwind.css

@@ -35,7 +35,7 @@ Make sure disabled buttons don't get the pointer cursor.
   --breakpoint-1000: 1000px;
   --breakpoint-1100: 1100px;
   --breakpoint-1200: 1200px;
-  --breakpoint-1300: 1100px;
+  --breakpoint-1300: 1300px;
   --breakpoint-1400: 1400px;
   --breakpoint-1600: 1600px;
 
@@ -50,5 +50,6 @@ Make sure disabled buttons don't get the pointer cursor.
   --container-1100: 1100px;
   --container-1200: 1200px;
   --container-1300: 1300px;
+  --container-1400: 1400px;
   --container-1600: 1600px;
 }