@oxide/design-system 1.7.0--canary.5461be5.0 → 1.7.1--canary.bffedd8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/dist/index.js +3 -1
  2. package/components/dist/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/dist/blue.css +19 -19
  5. package/styles/dist/green.css +19 -19
  6. package/styles/dist/main.css +21 -21
  7. package/styles/dist/purple.css +19 -19
  8. package/styles/dist/red.css +19 -19
  9. package/styles/dist/tailwind-tokens.js +15 -15
  10. package/styles/dist/yellow.css +19 -19
package/components/dist/index.js CHANGED
@@ -2,6 +2,8 @@
2
2
  import { Content, Title, parse } from "@oxide/react-asciidoc";
3
3
 
4
4
  // components/src/utils.ts
5
+ import cn from "classnames";
6
+ import { createElement } from "react";
5
7
  var titleCase = (text) => {
6
8
  return text.replace(
7
9
  /\w\S*/g,
@@ -11,7 +13,7 @@ var titleCase = (text) => {
11
13
  var make = (tag) => (
12
14
  // only one argument here means string interpolations are not allowed
13
15
  (strings) => {
14
- const Comp = ({ className, children, ...rest }) => React.createElement(tag, { className: cn(strings[0], className), ...rest }, children);
16
+ const Comp = ({ className, children, ...rest }) => createElement(tag, { className: cn(strings[0], className), ...rest }, children);
15
17
  Comp.displayName = `classed.${tag}`;
16
18
  return Comp;
17
19
  }
package/components/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/asciidoc/Admonition.tsx","../src/utils.ts","../src/asciidoc/Table.tsx","../src/asciidoc/index.ts","../src/ui/badge/Badge.tsx","../src/ui/button/Button.tsx","../src/ui/spinner/Spinner.tsx","../src/ui/tabs/Tabs.tsx","../../icons/react/Checkmark12Icon.tsx","../../icons/react/SelectArrows6Icon.tsx","../src/ui/checkbox/Checkbox.tsx","../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 { type AdmonitionBlock, Content, Title, parse } from '@oxide/react-asciidoc'\n\nimport { titleCase } from '../utils'\n\nconst Admonition = ({ node }: { node: AdmonitionBlock }) => {\n const attrs = node.attributes\n\n let icon\n if (attrs.name === 'caution') {\n icon = <Error12 />\n } else if (attrs.name === 'warning') {\n icon = <Warning12 />\n } else {\n icon = <Error12 className=\"rotate-180\" />\n }\n\n return (\n <div className={`admonitionblock ${attrs.name}`}>\n <div className=\"admonition-icon\">{icon}</div>\n <div className=\"admonition-content content\">\n <Title text={node.title} />\n <div>{titleCase(attrs.name.toString())}</div>\n <div>\n <Title text={node.title} />\n {node.content && parse(node.content)}\n <Content blocks={node.blocks} />\n </div>\n </div>\n </div>\n )\n}\n\nconst Error12 = ({ className }: { className?: string }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm.083-9c.368 0 .667.299.667.667v2.666A.667.667 0 0 1 6.083 7h-.166a.667.667 0 0 1-.667-.667V3.667c0-.368.299-.667.667-.667h.166Zm0 5c.368 0 .667.299.667.667v.166a.667.667 0 0 1-.667.667h-.166a.667.667 0 0 1-.667-.667v-.166c0-.368.299-.667.667-.667h.166Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\n\nconst Warning12 = ({ className }: { className?: string }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm.083-9c.368 0 .667.299.667.667v2.666A.667.667 0 0 1 6.083 7h-.166a.667.667 0 0 1-.667-.667V3.667c0-.368.299-.667.667-.667h.166Zm0 5c.368 0 .667.299.667.667v.166a.667.667 0 0 1-.667.667h-.166a.667.667 0 0 1-.667-.667v-.166c0-.368.299-.667.667-.667h.166Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\n\nexport default Admonition\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 */\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 React.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 { Table as InnerTable, type TableBlock } from '@oxide/react-asciidoc'\n\nconst Table = ({ node }: { node: TableBlock }) => (\n <div className=\"table-wrapper\">\n <InnerTable node={node} />\n </div>\n)\n\nexport default Table\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 Admonition from './Admonition'\nimport Table from './Table'\n\nexport const AsciiDocBlocks = {\n Admonition,\n Table,\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'\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: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`,\n destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,\n notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,\n neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,\n purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-800-rgb),0.15)]`,\n blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.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-[var(--base-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',\n `variant-${variant}`,\n 'inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm',\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 { 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 width={12}\n height={12}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.492 2.651c.28.242.31.665.067.944L5.447 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-.068l.253.218Z\"\n fill=\"currentColor\"\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 { 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 width={6}\n height={14}\n viewBox=\"0 0 6 14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"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-.568L3.322.536Zm-.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.568l2.337 3.896Z\"\n fill=\"currentColor\"\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=\"pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent\" />\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) => el && (el.indeterminate = !!indeterminate)}\n {...inputProps}\n />\n {inputProps.checked && !indeterminate && <Check />}\n {indeterminate && <Indeterminate />}\n </span>\n\n {children && <span className=\"ml-2.5 text-sans-md text-secondary\">{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 { FloatingPortal, flip, 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 '~/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 `flex h-10 w-full items-center justify-between\n rounded border text-sans-md`,\n hasError\n ? 'focus-error border-error-secondary hover:border-error'\n : 'border-default hover:border-hover',\n open && 'ring-2 ring-accent-secondary',\n open && hasError && 'ring-error-secondary',\n isDisabled\n ? 'cursor-not-allowed text-disabled bg-disabled !border-default'\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=\"ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary\"\n aria-hidden\n >\n <SelectArrows6Icon className=\"h-[14px] w-2 text-tertiary\" />\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=\"relative border-b border-secondary 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":["text","jsx","cn","jsx","cn","jsx","jsxs","size","cn","cn","jsx","jsxs","size","Content","cn","jsx","jsx","jsxs","jsx","jsxs","cn","jsx","jsxs","cn","cn","Fragment","jsx","jsxs","cn","selected"]}
1
+ {"version":3,"sources":["../src/asciidoc/Admonition.tsx","../src/utils.ts","../src/asciidoc/Table.tsx","../src/asciidoc/index.ts","../src/ui/badge/Badge.tsx","../src/ui/button/Button.tsx","../src/ui/spinner/Spinner.tsx","../src/ui/tabs/Tabs.tsx","../../icons/react/Checkmark12Icon.tsx","../../icons/react/SelectArrows6Icon.tsx","../src/ui/checkbox/Checkbox.tsx","../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 { type AdmonitionBlock, Content, Title, parse } from '@oxide/react-asciidoc'\n\nimport { titleCase } from '../utils'\n\nconst Admonition = ({ node }: { node: AdmonitionBlock }) => {\n const attrs = node.attributes\n\n let icon\n if (attrs.name === 'caution') {\n icon = <Error12 />\n } else if (attrs.name === 'warning') {\n icon = <Warning12 />\n } else {\n icon = <Error12 className=\"rotate-180\" />\n }\n\n return (\n <div className={`admonitionblock ${attrs.name}`}>\n <div className=\"admonition-icon\">{icon}</div>\n <div className=\"admonition-content content\">\n <Title text={node.title} />\n <div>{titleCase(attrs.name.toString())}</div>\n <div>\n <Title text={node.title} />\n {node.content && parse(node.content)}\n <Content blocks={node.blocks} />\n </div>\n </div>\n </div>\n )\n}\n\nconst Error12 = ({ className }: { className?: string }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm.083-9c.368 0 .667.299.667.667v2.666A.667.667 0 0 1 6.083 7h-.166a.667.667 0 0 1-.667-.667V3.667c0-.368.299-.667.667-.667h.166Zm0 5c.368 0 .667.299.667.667v.166a.667.667 0 0 1-.667.667h-.166a.667.667 0 0 1-.667-.667v-.166c0-.368.299-.667.667-.667h.166Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\n\nconst Warning12 = ({ className }: { className?: string }) => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm.083-9c.368 0 .667.299.667.667v2.666A.667.667 0 0 1 6.083 7h-.166a.667.667 0 0 1-.667-.667V3.667c0-.368.299-.667.667-.667h.166Zm0 5c.368 0 .667.299.667.667v.166a.667.667 0 0 1-.667.667h-.166a.667.667 0 0 1-.667-.667v-.166c0-.368.299-.667.667-.667h.166Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\n\nexport default Admonition\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 } 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 { Table as InnerTable, type TableBlock } from '@oxide/react-asciidoc'\n\nconst Table = ({ node }: { node: TableBlock }) => (\n <div className=\"table-wrapper\">\n <InnerTable node={node} />\n </div>\n)\n\nexport default Table\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 Admonition from './Admonition'\nimport Table from './Table'\n\nexport const AsciiDocBlocks = {\n Admonition,\n Table,\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'\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: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`,\n destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,\n notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,\n neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,\n purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-800-rgb),0.15)]`,\n blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.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-[var(--base-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',\n `variant-${variant}`,\n 'inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm',\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 { 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 width={12}\n height={12}\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10.492 2.651c.28.242.31.665.067.944L5.447 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-.068l.253.218Z\"\n fill=\"currentColor\"\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 { 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 width={6}\n height={14}\n viewBox=\"0 0 6 14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-labelledby={titleId}\n {...props}\n >\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fillRule=\"evenodd\"\n clipRule=\"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-.568L3.322.536Zm-.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.568l2.337 3.896Z\"\n fill=\"currentColor\"\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=\"pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent\" />\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) => el && (el.indeterminate = !!indeterminate)}\n {...inputProps}\n />\n {inputProps.checked && !indeterminate && <Check />}\n {indeterminate && <Indeterminate />}\n </span>\n\n {children && <span className=\"ml-2.5 text-sans-md text-secondary\">{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 { FloatingPortal, flip, 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 '~/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 `flex h-10 w-full items-center justify-between\n rounded border text-sans-md`,\n hasError\n ? 'focus-error border-error-secondary hover:border-error'\n : 'border-default hover:border-hover',\n open && 'ring-2 ring-accent-secondary',\n open && hasError && 'ring-error-secondary',\n isDisabled\n ? 'cursor-not-allowed text-disabled bg-disabled !border-default'\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=\"ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary\"\n aria-hidden\n >\n <SelectArrows6Icon className=\"h-[14px] w-2 text-tertiary\" />\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=\"relative border-b border-secondary 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":["text","jsx","cn","jsx","cn","jsx","jsxs","size","cn","cn","jsx","jsxs","size","Content","cn","jsx","jsx","jsxs","jsx","jsxs","cn","jsx","jsxs","cn","cn","Fragment","jsx","jsxs","cn","selected"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oxide/design-system",
3
- "version": "1.7.0--canary.5461be5.0",
3
+ "version": "1.7.1--canary.bffedd8.0",
4
4
  "description": "Home of reusable design assets and token for oxide internal sites",
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/styles/dist/blue.css CHANGED
@@ -94,18 +94,18 @@
94
94
  --surface-error-secondary-p3: var(--theme-error-200-p3);
95
95
  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
96
96
 
97
- --surface-inverse-rgb: var(--content-default-rgb);
98
- --surface-inverse-p3: var(--content-default-p3);
99
- --surface-inverse: rgb(var(--surface-inverse-rgb));
97
+ --surface-inverse-raise-rgb: var(--content-raise-rgb);
98
+ --surface-inverse-raise-p3: var(--content-raise-p3);
99
+ --surface-inverse-raise: rgb(var(--surface-inverse-raise-rgb));
100
+
101
+ --surface-inverse-primary-rgb: var(--content-default-rgb);
102
+ --surface-inverse-primary-p3: var(--content-default-p3);
103
+ --surface-inverse-primary: rgb(var(--surface-inverse-primary-rgb));
100
104
 
101
105
  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
102
106
  --surface-inverse-secondary-p3: var(--content-secondary-p3);
103
107
  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
104
108
 
105
- --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
106
- --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
107
- --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
108
-
109
109
  --surface-info-rgb: var(--theme-info-800-rgb);
110
110
  --surface-info-p3: var(--theme-info-800-p3);
111
111
  --surface-info: rgb(var(--surface-info-rgb));
@@ -122,26 +122,26 @@
122
122
  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
123
123
  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
124
124
 
125
- --content-default-rgb: var(--base-neutral-900-rgb);
126
- --content-default-p3: var(--base-neutral-900-p3);
125
+ --content-raise-rgb: var(--base-neutral-900-rgb);
126
+ --content-raise-p3: var(--base-neutral-900-p3);
127
+ --content-raise: rgb(var(--content-raise-rgb));
128
+
129
+ --content-default-rgb: var(--base-neutral-800-rgb);
130
+ --content-default-p3: var(--base-neutral-800-p3);
127
131
  --content-default: rgb(var(--content-default-rgb));
128
132
 
129
- --content-secondary-rgb: var(--base-neutral-800-rgb);
130
- --content-secondary-p3: var(--base-neutral-800-p3);
133
+ --content-secondary-rgb: var(--base-neutral-700-rgb);
134
+ --content-secondary-p3: var(--base-neutral-700-p3);
131
135
  --content-secondary: rgb(var(--content-secondary-rgb));
132
136
 
133
- --content-tertiary-rgb: var(--base-neutral-700-rgb);
134
- --content-tertiary-p3: var(--base-neutral-700-p3);
137
+ --content-tertiary-rgb: var(--base-neutral-600-rgb);
138
+ --content-tertiary-p3: var(--base-neutral-600-p3);
135
139
  --content-tertiary: rgb(var(--content-tertiary-rgb));
136
140
 
137
- --content-quaternary-rgb: var(--base-neutral-600-rgb);
138
- --content-quaternary-p3: var(--base-neutral-600-p3);
141
+ --content-quaternary-rgb: var(--base-neutral-500-rgb);
142
+ --content-quaternary-p3: var(--base-neutral-500-p3);
139
143
  --content-quaternary: rgb(var(--content-quaternary-rgb));
140
144
 
141
- --content-quinary-rgb: var(--base-neutral-500-rgb);
142
- --content-quinary-p3: var(--base-neutral-500-p3);
143
- --content-quinary: rgb(var(--content-quinary-rgb));
144
-
145
145
  --content-disabled-rgb: var(--base-neutral-500-rgb);
146
146
  --content-disabled-p3: var(--base-neutral-500-p3);
147
147
  --content-disabled: rgb(var(--content-disabled-rgb));
package/styles/dist/green.css CHANGED
@@ -94,18 +94,18 @@
94
94
  --surface-error-secondary-p3: var(--theme-error-200-p3);
95
95
  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
96
96
 
97
- --surface-inverse-rgb: var(--content-default-rgb);
98
- --surface-inverse-p3: var(--content-default-p3);
99
- --surface-inverse: rgb(var(--surface-inverse-rgb));
97
+ --surface-inverse-raise-rgb: var(--content-raise-rgb);
98
+ --surface-inverse-raise-p3: var(--content-raise-p3);
99
+ --surface-inverse-raise: rgb(var(--surface-inverse-raise-rgb));
100
+
101
+ --surface-inverse-primary-rgb: var(--content-default-rgb);
102
+ --surface-inverse-primary-p3: var(--content-default-p3);
103
+ --surface-inverse-primary: rgb(var(--surface-inverse-primary-rgb));
100
104
 
101
105
  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
102
106
  --surface-inverse-secondary-p3: var(--content-secondary-p3);
103
107
  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
104
108
 
105
- --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
106
- --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
107
- --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
108
-
109
109
  --surface-info-rgb: var(--theme-info-800-rgb);
110
110
  --surface-info-p3: var(--theme-info-800-p3);
111
111
  --surface-info: rgb(var(--surface-info-rgb));
@@ -122,26 +122,26 @@
122
122
  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
123
123
  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
124
124
 
125
- --content-default-rgb: var(--base-neutral-900-rgb);
126
- --content-default-p3: var(--base-neutral-900-p3);
125
+ --content-raise-rgb: var(--base-neutral-900-rgb);
126
+ --content-raise-p3: var(--base-neutral-900-p3);
127
+ --content-raise: rgb(var(--content-raise-rgb));
128
+
129
+ --content-default-rgb: var(--base-neutral-800-rgb);
130
+ --content-default-p3: var(--base-neutral-800-p3);
127
131
  --content-default: rgb(var(--content-default-rgb));
128
132
 
129
- --content-secondary-rgb: var(--base-neutral-800-rgb);
130
- --content-secondary-p3: var(--base-neutral-800-p3);
133
+ --content-secondary-rgb: var(--base-neutral-700-rgb);
134
+ --content-secondary-p3: var(--base-neutral-700-p3);
131
135
  --content-secondary: rgb(var(--content-secondary-rgb));
132
136
 
133
- --content-tertiary-rgb: var(--base-neutral-700-rgb);
134
- --content-tertiary-p3: var(--base-neutral-700-p3);
137
+ --content-tertiary-rgb: var(--base-neutral-600-rgb);
138
+ --content-tertiary-p3: var(--base-neutral-600-p3);
135
139
  --content-tertiary: rgb(var(--content-tertiary-rgb));
136
140
 
137
- --content-quaternary-rgb: var(--base-neutral-600-rgb);
138
- --content-quaternary-p3: var(--base-neutral-600-p3);
141
+ --content-quaternary-rgb: var(--base-neutral-500-rgb);
142
+ --content-quaternary-p3: var(--base-neutral-500-p3);
139
143
  --content-quaternary: rgb(var(--content-quaternary-rgb));
140
144
 
141
- --content-quinary-rgb: var(--base-neutral-500-rgb);
142
- --content-quinary-p3: var(--base-neutral-500-p3);
143
- --content-quinary: rgb(var(--content-quinary-rgb));
144
-
145
145
  --content-disabled-rgb: var(--base-neutral-500-rgb);
146
146
  --content-disabled-p3: var(--base-neutral-500-p3);
147
147
  --content-disabled: rgb(var(--content-disabled-rgb));
package/styles/dist/main.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
2
2
 
3
3
  :root {
4
- --base-neutral-900-rgb: 231, 231, 232; /* #E7E7E8 */
5
- --base-neutral-900-p3: color(display-p3 0.9059 0.9059 0.9098);
4
+ --base-neutral-900-rgb: 215, 216, 217; /* #D7D8D9 */
5
+ --base-neutral-900-p3: color(display-p3 0.8431 0.8471 0.851);
6
6
  --base-neutral-900: rgb(var(--base-neutral-900-rgb));
7
7
 
8
8
  --base-neutral-800-rgb: 184, 187, 188; /* #B8BBBC */
@@ -298,18 +298,18 @@
298
298
  --surface-error-secondary-p3: var(--theme-error-200-p3);
299
299
  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
300
300
 
301
- --surface-inverse-rgb: var(--content-default-rgb);
302
- --surface-inverse-p3: var(--content-default-p3);
303
- --surface-inverse: rgb(var(--surface-inverse-rgb));
301
+ --surface-inverse-raise-rgb: var(--content-raise-rgb);
302
+ --surface-inverse-raise-p3: var(--content-raise-p3);
303
+ --surface-inverse-raise: rgb(var(--surface-inverse-raise-rgb));
304
+
305
+ --surface-inverse-primary-rgb: var(--content-default-rgb);
306
+ --surface-inverse-primary-p3: var(--content-default-p3);
307
+ --surface-inverse-primary: rgb(var(--surface-inverse-primary-rgb));
304
308
 
305
309
  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
306
310
  --surface-inverse-secondary-p3: var(--content-secondary-p3);
307
311
  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
308
312
 
309
- --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
310
- --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
311
- --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
312
-
313
313
  --surface-info-rgb: var(--theme-info-800-rgb);
314
314
  --surface-info-p3: var(--theme-info-800-p3);
315
315
  --surface-info: rgb(var(--surface-info-rgb));
@@ -326,26 +326,26 @@
326
326
  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
327
327
  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
328
328
 
329
- --content-default-rgb: var(--base-neutral-900-rgb);
330
- --content-default-p3: var(--base-neutral-900-p3);
329
+ --content-raise-rgb: var(--base-neutral-900-rgb);
330
+ --content-raise-p3: var(--base-neutral-900-p3);
331
+ --content-raise: rgb(var(--content-raise-rgb));
332
+
333
+ --content-default-rgb: var(--base-neutral-800-rgb);
334
+ --content-default-p3: var(--base-neutral-800-p3);
331
335
  --content-default: rgb(var(--content-default-rgb));
332
336
 
333
- --content-secondary-rgb: var(--base-neutral-800-rgb);
334
- --content-secondary-p3: var(--base-neutral-800-p3);
337
+ --content-secondary-rgb: var(--base-neutral-700-rgb);
338
+ --content-secondary-p3: var(--base-neutral-700-p3);
335
339
  --content-secondary: rgb(var(--content-secondary-rgb));
336
340
 
337
- --content-tertiary-rgb: var(--base-neutral-700-rgb);
338
- --content-tertiary-p3: var(--base-neutral-700-p3);
341
+ --content-tertiary-rgb: var(--base-neutral-600-rgb);
342
+ --content-tertiary-p3: var(--base-neutral-600-p3);
339
343
  --content-tertiary: rgb(var(--content-tertiary-rgb));
340
344
 
341
- --content-quaternary-rgb: var(--base-neutral-600-rgb);
342
- --content-quaternary-p3: var(--base-neutral-600-p3);
345
+ --content-quaternary-rgb: var(--base-neutral-500-rgb);
346
+ --content-quaternary-p3: var(--base-neutral-500-p3);
343
347
  --content-quaternary: rgb(var(--content-quaternary-rgb));
344
348
 
345
- --content-quinary-rgb: var(--base-neutral-500-rgb);
346
- --content-quinary-p3: var(--base-neutral-500-p3);
347
- --content-quinary: rgb(var(--content-quinary-rgb));
348
-
349
349
  --content-disabled-rgb: var(--base-neutral-500-rgb);
350
350
  --content-disabled-p3: var(--base-neutral-500-p3);
351
351
  --content-disabled: rgb(var(--content-disabled-rgb));
package/styles/dist/purple.css CHANGED
@@ -94,18 +94,18 @@
94
94
  --surface-error-secondary-p3: var(--theme-error-200-p3);
95
95
  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
96
96
 
97
- --surface-inverse-rgb: var(--content-default-rgb);
98
- --surface-inverse-p3: var(--content-default-p3);
99
- --surface-inverse: rgb(var(--surface-inverse-rgb));
97
+ --surface-inverse-raise-rgb: var(--content-raise-rgb);
98
+ --surface-inverse-raise-p3: var(--content-raise-p3);
99
+ --surface-inverse-raise: rgb(var(--surface-inverse-raise-rgb));
100
+
101
+ --surface-inverse-primary-rgb: var(--content-default-rgb);
102
+ --surface-inverse-primary-p3: var(--content-default-p3);
103
+ --surface-inverse-primary: rgb(var(--surface-inverse-primary-rgb));
100
104
 
101
105
  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
102
106
  --surface-inverse-secondary-p3: var(--content-secondary-p3);
103
107
  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
104
108
 
105
- --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
106
- --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
107
- --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
108
-
109
109
  --surface-info-rgb: var(--theme-info-800-rgb);
110
110
  --surface-info-p3: var(--theme-info-800-p3);
111
111
  --surface-info: rgb(var(--surface-info-rgb));
@@ -122,26 +122,26 @@
122
122
  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
123
123
  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
124
124
 
125
- --content-default-rgb: var(--base-neutral-900-rgb);
126
- --content-default-p3: var(--base-neutral-900-p3);
125
+ --content-raise-rgb: var(--base-neutral-900-rgb);
126
+ --content-raise-p3: var(--base-neutral-900-p3);
127
+ --content-raise: rgb(var(--content-raise-rgb));
128
+
129
+ --content-default-rgb: var(--base-neutral-800-rgb);
130
+ --content-default-p3: var(--base-neutral-800-p3);
127
131
  --content-default: rgb(var(--content-default-rgb));
128
132
 
129
- --content-secondary-rgb: var(--base-neutral-800-rgb);
130
- --content-secondary-p3: var(--base-neutral-800-p3);
133
+ --content-secondary-rgb: var(--base-neutral-700-rgb);
134
+ --content-secondary-p3: var(--base-neutral-700-p3);
131
135
  --content-secondary: rgb(var(--content-secondary-rgb));
132
136
 
133
- --content-tertiary-rgb: var(--base-neutral-700-rgb);
134
- --content-tertiary-p3: var(--base-neutral-700-p3);
137
+ --content-tertiary-rgb: var(--base-neutral-600-rgb);
138
+ --content-tertiary-p3: var(--base-neutral-600-p3);
135
139
  --content-tertiary: rgb(var(--content-tertiary-rgb));
136
140
 
137
- --content-quaternary-rgb: var(--base-neutral-600-rgb);
138
- --content-quaternary-p3: var(--base-neutral-600-p3);
141
+ --content-quaternary-rgb: var(--base-neutral-500-rgb);
142
+ --content-quaternary-p3: var(--base-neutral-500-p3);
139
143
  --content-quaternary: rgb(var(--content-quaternary-rgb));
140
144
 
141
- --content-quinary-rgb: var(--base-neutral-500-rgb);
142
- --content-quinary-p3: var(--base-neutral-500-p3);
143
- --content-quinary: rgb(var(--content-quinary-rgb));
144
-
145
145
  --content-disabled-rgb: var(--base-neutral-500-rgb);
146
146
  --content-disabled-p3: var(--base-neutral-500-p3);
147
147
  --content-disabled: rgb(var(--content-disabled-rgb));
package/styles/dist/red.css CHANGED
@@ -94,18 +94,18 @@
94
94
  --surface-error-secondary-p3: var(--theme-error-200-p3);
95
95
  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
96
96
 
97
- --surface-inverse-rgb: var(--content-default-rgb);
98
- --surface-inverse-p3: var(--content-default-p3);
99
- --surface-inverse: rgb(var(--surface-inverse-rgb));
97
+ --surface-inverse-raise-rgb: var(--content-raise-rgb);
98
+ --surface-inverse-raise-p3: var(--content-raise-p3);
99
+ --surface-inverse-raise: rgb(var(--surface-inverse-raise-rgb));
100
+
101
+ --surface-inverse-primary-rgb: var(--content-default-rgb);
102
+ --surface-inverse-primary-p3: var(--content-default-p3);
103
+ --surface-inverse-primary: rgb(var(--surface-inverse-primary-rgb));
100
104
 
101
105
  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
102
106
  --surface-inverse-secondary-p3: var(--content-secondary-p3);
103
107
  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
104
108
 
105
- --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
106
- --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
107
- --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
108
-
109
109
  --surface-info-rgb: var(--theme-info-800-rgb);
110
110
  --surface-info-p3: var(--theme-info-800-p3);
111
111
  --surface-info: rgb(var(--surface-info-rgb));
@@ -122,26 +122,26 @@
122
122
  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
123
123
  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
124
124
 
125
- --content-default-rgb: var(--base-neutral-900-rgb);
126
- --content-default-p3: var(--base-neutral-900-p3);
125
+ --content-raise-rgb: var(--base-neutral-900-rgb);
126
+ --content-raise-p3: var(--base-neutral-900-p3);
127
+ --content-raise: rgb(var(--content-raise-rgb));
128
+
129
+ --content-default-rgb: var(--base-neutral-800-rgb);
130
+ --content-default-p3: var(--base-neutral-800-p3);
127
131
  --content-default: rgb(var(--content-default-rgb));
128
132
 
129
- --content-secondary-rgb: var(--base-neutral-800-rgb);
130
- --content-secondary-p3: var(--base-neutral-800-p3);
133
+ --content-secondary-rgb: var(--base-neutral-700-rgb);
134
+ --content-secondary-p3: var(--base-neutral-700-p3);
131
135
  --content-secondary: rgb(var(--content-secondary-rgb));
132
136
 
133
- --content-tertiary-rgb: var(--base-neutral-700-rgb);
134
- --content-tertiary-p3: var(--base-neutral-700-p3);
137
+ --content-tertiary-rgb: var(--base-neutral-600-rgb);
138
+ --content-tertiary-p3: var(--base-neutral-600-p3);
135
139
  --content-tertiary: rgb(var(--content-tertiary-rgb));
136
140
 
137
- --content-quaternary-rgb: var(--base-neutral-600-rgb);
138
- --content-quaternary-p3: var(--base-neutral-600-p3);
141
+ --content-quaternary-rgb: var(--base-neutral-500-rgb);
142
+ --content-quaternary-p3: var(--base-neutral-500-p3);
139
143
  --content-quaternary: rgb(var(--content-quaternary-rgb));
140
144
 
141
- --content-quinary-rgb: var(--base-neutral-500-rgb);
142
- --content-quinary-p3: var(--base-neutral-500-p3);
143
- --content-quinary: rgb(var(--content-quinary-rgb));
144
-
145
145
  --content-disabled-rgb: var(--base-neutral-500-rgb);
146
146
  --content-disabled-p3: var(--base-neutral-500-p3);
147
147
  --content-disabled: rgb(var(--content-disabled-rgb));
package/styles/dist/tailwind-tokens.js CHANGED
@@ -131,6 +131,12 @@ module.exports.textUtilities = {
131
131
  }
132
132
 
133
133
  module.exports.colorUtilities = {
134
+ '.text-raise': {
135
+ color: 'var(--content-raise)',
136
+ '@supports (color: color(display-p3 1 1 1))': {
137
+ color: 'var(--content-raise-p3)',
138
+ },
139
+ },
134
140
  '.text-default': {
135
141
  color: 'var(--content-default)',
136
142
  '@supports (color: color(display-p3 1 1 1))': {
@@ -155,12 +161,6 @@ module.exports.colorUtilities = {
155
161
  color: 'var(--content-quaternary-p3)',
156
162
  },
157
163
  },
158
- '.text-quinary': {
159
- color: 'var(--content-quinary)',
160
- '@supports (color: color(display-p3 1 1 1))': {
161
- color: 'var(--content-quinary-p3)',
162
- },
163
- },
164
164
  '.text-disabled': {
165
165
  color: 'var(--content-disabled)',
166
166
  '@supports (color: color(display-p3 1 1 1))': {
@@ -756,22 +756,22 @@ module.exports.colorUtilities = {
756
756
  'background-color': 'var(--surface-error-secondary-p3)',
757
757
  },
758
758
  },
759
- '.bg-inverse': {
760
- 'background-color': 'var(--surface-inverse)',
759
+ '.bg-inverse-raise': {
760
+ 'background-color': 'var(--surface-inverse-raise)',
761
761
  '@supports (color: color(display-p3 1 1 1))': {
762
- 'background-color': 'var(--surface-inverse-p3)',
762
+ 'background-color': 'var(--surface-inverse-raise-p3)',
763
763
  },
764
764
  },
765
- '.bg-inverse-secondary': {
766
- 'background-color': 'var(--surface-inverse-secondary)',
765
+ '.bg-inverse-primary': {
766
+ 'background-color': 'var(--surface-inverse-primary)',
767
767
  '@supports (color: color(display-p3 1 1 1))': {
768
- 'background-color': 'var(--surface-inverse-secondary-p3)',
768
+ 'background-color': 'var(--surface-inverse-primary-p3)',
769
769
  },
770
770
  },
771
- '.bg-inverse-tertiary': {
772
- 'background-color': 'var(--surface-inverse-tertiary)',
771
+ '.bg-inverse-secondary': {
772
+ 'background-color': 'var(--surface-inverse-secondary)',
773
773
  '@supports (color: color(display-p3 1 1 1))': {
774
- 'background-color': 'var(--surface-inverse-tertiary-p3)',
774
+ 'background-color': 'var(--surface-inverse-secondary-p3)',
775
775
  },
776
776
  },
777
777
  '.bg-info': {
package/styles/dist/yellow.css CHANGED
@@ -94,18 +94,18 @@
94
94
  --surface-error-secondary-p3: var(--theme-error-200-p3);
95
95
  --surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
96
96
 
97
- --surface-inverse-rgb: var(--content-default-rgb);
98
- --surface-inverse-p3: var(--content-default-p3);
99
- --surface-inverse: rgb(var(--surface-inverse-rgb));
97
+ --surface-inverse-raise-rgb: var(--content-raise-rgb);
98
+ --surface-inverse-raise-p3: var(--content-raise-p3);
99
+ --surface-inverse-raise: rgb(var(--surface-inverse-raise-rgb));
100
+
101
+ --surface-inverse-primary-rgb: var(--content-default-rgb);
102
+ --surface-inverse-primary-p3: var(--content-default-p3);
103
+ --surface-inverse-primary: rgb(var(--surface-inverse-primary-rgb));
100
104
 
101
105
  --surface-inverse-secondary-rgb: var(--content-secondary-rgb);
102
106
  --surface-inverse-secondary-p3: var(--content-secondary-p3);
103
107
  --surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
104
108
 
105
- --surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
106
- --surface-inverse-tertiary-p3: var(--content-tertiary-p3);
107
- --surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
108
-
109
109
  --surface-info-rgb: var(--theme-info-800-rgb);
110
110
  --surface-info-p3: var(--theme-info-800-p3);
111
111
  --surface-info: rgb(var(--surface-info-rgb));
@@ -122,26 +122,26 @@
122
122
  --surface-info-secondary-hover-p3: var(--theme-info-300-p3);
123
123
  --surface-info-secondary-hover: rgb(var(--surface-info-secondary-hover-rgb));
124
124
 
125
- --content-default-rgb: var(--base-neutral-900-rgb);
126
- --content-default-p3: var(--base-neutral-900-p3);
125
+ --content-raise-rgb: var(--base-neutral-900-rgb);
126
+ --content-raise-p3: var(--base-neutral-900-p3);
127
+ --content-raise: rgb(var(--content-raise-rgb));
128
+
129
+ --content-default-rgb: var(--base-neutral-800-rgb);
130
+ --content-default-p3: var(--base-neutral-800-p3);
127
131
  --content-default: rgb(var(--content-default-rgb));
128
132
 
129
- --content-secondary-rgb: var(--base-neutral-800-rgb);
130
- --content-secondary-p3: var(--base-neutral-800-p3);
133
+ --content-secondary-rgb: var(--base-neutral-700-rgb);
134
+ --content-secondary-p3: var(--base-neutral-700-p3);
131
135
  --content-secondary: rgb(var(--content-secondary-rgb));
132
136
 
133
- --content-tertiary-rgb: var(--base-neutral-700-rgb);
134
- --content-tertiary-p3: var(--base-neutral-700-p3);
137
+ --content-tertiary-rgb: var(--base-neutral-600-rgb);
138
+ --content-tertiary-p3: var(--base-neutral-600-p3);
135
139
  --content-tertiary: rgb(var(--content-tertiary-rgb));
136
140
 
137
- --content-quaternary-rgb: var(--base-neutral-600-rgb);
138
- --content-quaternary-p3: var(--base-neutral-600-p3);
141
+ --content-quaternary-rgb: var(--base-neutral-500-rgb);
142
+ --content-quaternary-p3: var(--base-neutral-500-p3);
139
143
  --content-quaternary: rgb(var(--content-quaternary-rgb));
140
144
 
141
- --content-quinary-rgb: var(--base-neutral-500-rgb);
142
- --content-quinary-p3: var(--base-neutral-500-p3);
143
- --content-quinary: rgb(var(--content-quinary-rgb));
144
-
145
145
  --content-disabled-rgb: var(--base-neutral-500-rgb);
146
146
  --content-disabled-p3: var(--base-neutral-500-p3);
147
147
  --content-disabled: rgb(var(--content-disabled-rgb));