@oxide/design-system 1.4.8--canary.00b5799.0 → 1.4.8--canary.067ab78.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as _asciidoctor_core_types from '@asciidoctor/core/types';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import { ReactNode
|
|
4
|
+
import { ReactNode } from 'react';
|
|
5
5
|
import { TabsProps, TabsTriggerProps, TabsListProps, TabsContentProps } from '@radix-ui/react-tabs';
|
|
6
6
|
import { SetRequired } from 'type-fest';
|
|
7
7
|
|
|
@@ -56,13 +56,13 @@ interface SpinnerProps {
|
|
|
56
56
|
variant?: SpinnerVariant;
|
|
57
57
|
}
|
|
58
58
|
declare const Spinner: ({ className, size, variant, }: SpinnerProps) => react_jsx_runtime.JSX.Element;
|
|
59
|
-
type Props
|
|
59
|
+
type Props = {
|
|
60
60
|
isLoading: boolean;
|
|
61
61
|
children?: ReactNode;
|
|
62
62
|
minTime?: number;
|
|
63
63
|
};
|
|
64
64
|
/** Loading spinner that shows for a minimum of `minTime` */
|
|
65
|
-
declare const SpinnerLoader: ({ isLoading, children, minTime }: Props
|
|
65
|
+
declare const SpinnerLoader: ({ isLoading, children, minTime }: Props) => react_jsx_runtime.JSX.Element;
|
|
66
66
|
|
|
67
67
|
type TabsRootProps = SetRequired<TabsProps, 'defaultValue'>;
|
|
68
68
|
declare const Tabs: {
|
|
@@ -80,21 +80,6 @@ type CheckboxProps = {
|
|
|
80
80
|
/** Checkbox component that handles label, styling, and indeterminate state */
|
|
81
81
|
declare const Checkbox: ({ indeterminate, children, className, ...inputProps }: CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
82
82
|
|
|
83
|
-
type Props = {
|
|
84
|
-
icon?: ReactElement;
|
|
85
|
-
title: string;
|
|
86
|
-
body?: string;
|
|
87
|
-
} & ({
|
|
88
|
-
buttonText: string;
|
|
89
|
-
buttonTo: string;
|
|
90
|
-
} | {
|
|
91
|
-
buttonText: string;
|
|
92
|
-
onClick: () => void;
|
|
93
|
-
} | {
|
|
94
|
-
buttonText?: never;
|
|
95
|
-
});
|
|
96
|
-
declare function EmptyMessage(props: Props): react_jsx_runtime.JSX.Element;
|
|
97
|
-
|
|
98
83
|
type ListboxItem<Value extends string = string> = {
|
|
99
84
|
value: Value;
|
|
100
85
|
} & ({
|
|
@@ -117,4 +102,4 @@ interface ListboxProps<Value extends string = string> {
|
|
|
117
102
|
}
|
|
118
103
|
declare const Listbox: <Value extends string = string>({ name, selected, items, placeholder, className, onChange, hasError, disabled, isLoading, ...props }: ListboxProps<Value>) => react_jsx_runtime.JSX.Element;
|
|
119
104
|
|
|
120
|
-
export { AsciiDocBlocks, Badge, BadgeColor, BadgeProps, BadgeVariant, Button, ButtonProps, ButtonSize, Checkbox, CheckboxProps,
|
|
105
|
+
export { AsciiDocBlocks, Badge, BadgeColor, BadgeProps, BadgeVariant, Button, ButtonProps, ButtonSize, Checkbox, CheckboxProps, Listbox, ListboxItem, ListboxProps, Spinner, SpinnerLoader, SpinnerSize, SpinnerVariant, Tabs, TabsRootProps, Variant, badgeColors, buttonSizes, buttonStyle, spinnerSizes, spinnerVariants, variants };
|
package/components/dist/index.js
CHANGED
|
@@ -56437,7 +56437,6 @@ __export(src_exports, {
|
|
|
56437
56437
|
Badge: () => Badge,
|
|
56438
56438
|
Button: () => Button,
|
|
56439
56439
|
Checkbox: () => Checkbox,
|
|
56440
|
-
EmptyMessage: () => EmptyMessage,
|
|
56441
56440
|
Listbox: () => Listbox,
|
|
56442
56441
|
Spinner: () => Spinner,
|
|
56443
56442
|
SpinnerLoader: () => SpinnerLoader,
|
|
@@ -57480,31 +57479,11 @@ var Checkbox = ({
|
|
|
57480
57479
|
children && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "ml-2.5 text-sans-md text-secondary", children })
|
|
57481
57480
|
] });
|
|
57482
57481
|
|
|
57483
|
-
// components/src/ui/empty-message/EmptyMessage.tsx
|
|
57484
|
-
var import_classnames8 = __toESM(require_classnames());
|
|
57485
|
-
var import_react_router_dom = require("react-router-dom");
|
|
57486
|
-
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
57487
|
-
var buttonStyleProps = { variant: "ghost", size: "sm", color: "secondary" };
|
|
57488
|
-
function EmptyMessage(props) {
|
|
57489
|
-
let button = null;
|
|
57490
|
-
if (props.buttonText && "buttonTo" in props) {
|
|
57491
|
-
button = /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react_router_dom.Link, { className: (0, import_classnames8.default)("mt-6", buttonStyle(buttonStyleProps)), to: props.buttonTo, children: props.buttonText });
|
|
57492
|
-
} else if (props.buttonText && "onClick" in props) {
|
|
57493
|
-
button = /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Button, { ...buttonStyleProps, className: "mt-6", onClick: props.onClick, children: props.buttonText });
|
|
57494
|
-
}
|
|
57495
|
-
return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "m-4 flex max-w-[14rem] flex-col items-center text-center", children: [
|
|
57496
|
-
props.icon && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "mb-4 rounded p-1 leading-[0] text-accent bg-accent-secondary", children: props.icon }),
|
|
57497
|
-
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)("h3", { className: "text-sans-semi-lg", children: props.title }),
|
|
57498
|
-
props.body && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("p", { className: "mt-1 text-sans-md text-secondary", children: props.body }),
|
|
57499
|
-
button
|
|
57500
|
-
] });
|
|
57501
|
-
}
|
|
57502
|
-
|
|
57503
57482
|
// components/src/ui/listbox/Listbox.tsx
|
|
57504
57483
|
var import_react7 = require("@floating-ui/react");
|
|
57505
57484
|
var import_react8 = require("@headlessui/react");
|
|
57506
|
-
var
|
|
57507
|
-
var
|
|
57485
|
+
var import_classnames8 = __toESM(require_classnames());
|
|
57486
|
+
var import_jsx_runtime169 = require("react/jsx-runtime");
|
|
57508
57487
|
var Listbox = ({
|
|
57509
57488
|
name,
|
|
57510
57489
|
selected,
|
|
@@ -57533,19 +57512,19 @@ var Listbox = ({
|
|
|
57533
57512
|
const selectedItem = selected && items.find((i) => i.value === selected);
|
|
57534
57513
|
const noItems = !isLoading && items.length === 0;
|
|
57535
57514
|
const isDisabled = disabled || noItems;
|
|
57536
|
-
return /* @__PURE__ */ (0,
|
|
57515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: (0, import_classnames8.default)("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
57537
57516
|
import_react8.Listbox,
|
|
57538
57517
|
{
|
|
57539
57518
|
value: selected,
|
|
57540
57519
|
onChange: (val) => val !== null && onChange(val),
|
|
57541
57520
|
disabled: isDisabled || isLoading,
|
|
57542
|
-
children: ({ open }) => /* @__PURE__ */ (0,
|
|
57543
|
-
/* @__PURE__ */ (0,
|
|
57521
|
+
children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(import_jsx_runtime169.Fragment, { children: [
|
|
57522
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
|
|
57544
57523
|
import_react8.Listbox.Button,
|
|
57545
57524
|
{
|
|
57546
57525
|
name,
|
|
57547
57526
|
ref: refs.setReference,
|
|
57548
|
-
className: (0,
|
|
57527
|
+
className: (0, import_classnames8.default)(
|
|
57549
57528
|
`flex h-10 w-full items-center justify-between
|
|
57550
57529
|
rounded border text-sans-md`,
|
|
57551
57530
|
hasError ? "focus-error border-error-secondary hover:border-error" : "border-default hover:border-hover",
|
|
@@ -57556,37 +57535,37 @@ var Listbox = ({
|
|
|
57556
57535
|
),
|
|
57557
57536
|
...props,
|
|
57558
57537
|
children: [
|
|
57559
|
-
/* @__PURE__ */ (0,
|
|
57538
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "w-full px-3 text-left", children: selectedItem ? (
|
|
57560
57539
|
// labelString is one line, which is what we need when label is a ReactNode
|
|
57561
57540
|
selectedItem.labelString || selectedItem.label
|
|
57562
|
-
) : /* @__PURE__ */ (0,
|
|
57563
|
-
!isDisabled && /* @__PURE__ */ (0,
|
|
57564
|
-
/* @__PURE__ */ (0,
|
|
57541
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
|
|
57542
|
+
!isDisabled && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(SpinnerLoader, { isLoading }),
|
|
57543
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
57565
57544
|
"div",
|
|
57566
57545
|
{
|
|
57567
57546
|
className: "ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary",
|
|
57568
57547
|
"aria-hidden": true,
|
|
57569
|
-
children: /* @__PURE__ */ (0,
|
|
57548
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
|
|
57570
57549
|
}
|
|
57571
57550
|
)
|
|
57572
57551
|
]
|
|
57573
57552
|
}
|
|
57574
57553
|
),
|
|
57575
|
-
/* @__PURE__ */ (0,
|
|
57554
|
+
/* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react7.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
57576
57555
|
import_react8.Listbox.Options,
|
|
57577
57556
|
{
|
|
57578
57557
|
ref: refs.setFloating,
|
|
57579
57558
|
style: floatingStyles,
|
|
57580
57559
|
className: "ox-menu pointer-events-auto z-50 overflow-y-auto !outline-none",
|
|
57581
|
-
children: items.map((item) => /* @__PURE__ */ (0,
|
|
57560
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
57582
57561
|
import_react8.Listbox.Option,
|
|
57583
57562
|
{
|
|
57584
57563
|
value: item.value,
|
|
57585
57564
|
className: "relative border-b border-secondary last:border-0",
|
|
57586
|
-
children: ({ active, selected: selected2 }) => /* @__PURE__ */ (0,
|
|
57565
|
+
children: ({ active, selected: selected2 }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
|
|
57587
57566
|
"div",
|
|
57588
57567
|
{
|
|
57589
|
-
className: (0,
|
|
57568
|
+
className: (0, import_classnames8.default)(
|
|
57590
57569
|
"ox-menu-item text-secondary",
|
|
57591
57570
|
selected2 && "is-selected",
|
|
57592
57571
|
active && "is-highlighted"
|
|
@@ -57609,7 +57588,6 @@ var Listbox = ({
|
|
|
57609
57588
|
Badge,
|
|
57610
57589
|
Button,
|
|
57611
57590
|
Checkbox,
|
|
57612
|
-
EmptyMessage,
|
|
57613
57591
|
Listbox,
|
|
57614
57592
|
Spinner,
|
|
57615
57593
|
SpinnerLoader,
|