@trail-ui/react
Version:
604 lines (585 loc) • 21.4 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/offline-toast/offline-toast.tsx
var offline_toast_exports = {};
__export(offline_toast_exports, {
default: () => OfflineWarning
});
module.exports = __toCommonJS(offline_toast_exports);
var import_react9 = require("react");
// src/modal/modal.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_jsx_runtime = require("react/jsx-runtime");
var InternalModalContext = (0, import_react.createContext)(
{}
);
function Modal(props, ref) {
const {
children,
classNames,
className,
size,
radius,
placement,
shadow,
backdrop = "opaque",
scrollBehavior,
...otherProps
} = props;
const slots = (0, import_react.useMemo)(
() => (0, import_theme.modal)({ size, radius, placement, shadow, scrollBehavior, backdrop }),
[backdrop, placement, radius, scrollBehavior, shadow, size]
);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ModalOverlay, { ...otherProps, className: slots.backdrop({ class: classNames == null ? void 0 : classNames.backdrop }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), "data-placement": placement, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalModalContext.Provider, { value: { slots, classNames }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Modal, { ref, className: slots.base({ class: baseStyles }), children }) }) }) });
}
var _Modal = (0, import_react.forwardRef)(Modal);
// src/modal/modal-close-button.tsx
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_react6 = require("react");
var import_react_aria_components4 = require("react-aria-components");
// src/button/button.tsx
var import_react3 = require("react");
var import_react_aria_components2 = require("react-aria-components");
var import_theme3 = require("@trail-ui/theme");
// src/spinner/spinner.tsx
var import_theme2 = require("@trail-ui/theme");
var import_react2 = require("react");
// src/spinner/spinners/bars.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/dots.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "0.5",
to: "0.5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/ring.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
from: "0 16 16",
to: "360 16 16",
dur: "1s",
repeatCount: "indefinite"
}
) })
] }) })
}
);
// src/spinner/spinners/spin.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "stroke-dasharray",
dur: "1.5s",
calcMode: "spline",
values: "0 150;42 150;42 150;42 150",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "stroke-dashoffset",
dur: "1.5s",
calcMode: "spline",
values: "0;-16;-59;-59",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
dur: "2s",
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
}
)
] }) });
// src/spinner/spinner.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var SPINNERS = {
bars: Bars,
dots: Dots,
ring: Ring,
spin: Spin
};
var DEFAULT_SPINNER = "spin";
function Spinner(props, ref) {
const { className, variant = DEFAULT_SPINNER, color, size, ...spinnerProps } = props;
const defaultSpinner = variant in SPINNERS ? variant : DEFAULT_SPINNER;
const SpinnerComponent = SPINNERS[defaultSpinner];
const styles = (0, import_react2.useMemo)(
() => (0, import_theme2.spinner)({
color,
size,
className
}),
[className, color, size]
);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerComponent, { "aria-hidden": true, className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react2.forwardRef)(Spinner);
// src/button/button.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
function Button(props, ref) {
const {
appearance,
// size = 'md',
spacing = "default",
fullWidth,
isLoading,
spinner: spinner2 = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(_Spinner, { color: "current", size: "sm", ...props.spinnerProps }),
spinnerPlacement = "start",
startContent: startContentProp,
endContent: endContentProp,
disableAnimation,
className,
children,
...otherProps
} = props;
const styles = (0, import_react3.useMemo)(
() => (0, import_theme3.button)({
// size,
isLoading,
spinnerPlacement,
startContentProp: !!startContentProp,
endContentProp: !!endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
}),
[
isLoading,
spinnerPlacement,
startContentProp,
endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
]
);
const getIconClone = (icon) => (0, import_react3.isValidElement)(icon) ? (0, import_react3.cloneElement)(icon, {
"aria-hidden": true,
focusable: false,
tabIndex: -1
}) : null;
const startContent = getIconClone(startContentProp);
const endContent = getIconClone(endContentProp);
return (
// @ts-ignore
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components2.Button, { ref, className: styles, ...otherProps, children: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
!isLoading && startContent,
isLoading && spinnerPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "shrink-0", children: [
spinner2,
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] })
] }),
children,
isLoading && spinnerPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] }),
spinner2
] }),
!isLoading && endContent
] }) })
);
}
var _Button = (0, import_react3.forwardRef)(Button);
// src/button/close-button.tsx
var import_icons = require("@trail-ui/icons");
var import_react5 = require("react");
// src/button/icon-button.tsx
var import_theme4 = require("@trail-ui/theme");
var import_react4 = require("react");
var import_react_aria_components3 = require("react-aria-components");
var import_jsx_runtime8 = require("react/jsx-runtime");
function IconButton(props, ref) {
const { appearance, spacing, disableAnimation, className, children, ...otherProps } = props;
const styles = (0, import_react4.useMemo)(
() => (0, import_theme4.button)({
isIconOnly: true,
appearance,
spacing,
disableAnimation,
className
}),
[className, disableAnimation, appearance, spacing]
);
const element = children;
const _children = (0, import_react4.isValidElement)(element) ? (0, import_react4.cloneElement)(element, {
"aria-hidden": true,
focusable: false
}) : null;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components3.Button, { ref, className: styles, ...otherProps, children: _children });
}
var _IconButton = (0, import_react4.forwardRef)(IconButton);
// src/button/close-button.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
function CloseButton(props, ref) {
const { children = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons.CloseIcon, { width: 24, height: 24 }), ...otherProps } = props;
const ariaLabel = props["aria-label"] || "Close";
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(_IconButton, { ref, ...otherProps, "aria-label": ariaLabel, children });
}
var _CloseButton = (0, import_react5.forwardRef)(CloseButton);
// src/modal/modal-close-button.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
function ModalCloseButton(props, ref) {
const { children, className, onPress, ...otherProps } = props;
const state = (0, import_react6.useContext)(import_react_aria_components4.OverlayTriggerStateContext);
const { slots, classNames } = (0, import_react6.useContext)(InternalModalContext);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
_CloseButton,
{
ref,
className: slots.closeButton({ class: (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.closeButton, className) }),
onPress: (0, import_shared_utils2.callAllHandlers)(onPress, () => state == null ? void 0 : state.close()),
appearance: "transparent",
spacing: "compact",
...otherProps,
children
}
);
}
var _ModalCloseButton = (0, import_react6.forwardRef)(ModalCloseButton);
// src/modal/modal-content.tsx
var import_shared_utils3 = require("@trail-ui/shared-utils");
var import_react7 = require("react");
var import_react_aria_components5 = require("react-aria-components");
var import_jsx_runtime11 = require("react/jsx-runtime");
function ModalContent(props) {
const { slots, classNames } = (0, import_react7.useContext)(InternalModalContext);
const { className, children, ...otherProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
import_react_aria_components5.Dialog,
{
"aria-labelledby": "modal-header",
className: slots.dialog({ class: (0, import_shared_utils3.clsx)(classNames == null ? void 0 : classNames.dialog, className) }),
...otherProps,
children
}
);
}
// src/modal/modal-header.tsx
var import_shared_utils4 = require("@trail-ui/shared-utils");
var import_react8 = require("react");
var import_react_aria_components6 = require("react-aria-components");
var import_jsx_runtime12 = require("react/jsx-runtime");
function ModalHeader(props) {
const { children, className, ...otherProps } = props;
const { slots, classNames } = (0, import_react8.useContext)(InternalModalContext);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_react_aria_components6.Heading,
{
id: "modal-header",
slot: "title",
className: slots.header({ class: (0, import_shared_utils4.clsx)(classNames == null ? void 0 : classNames.header, className) }),
...otherProps,
children
}
);
}
// src/offline-toast/offline-toast.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
function OfflineWarning() {
const [isOffline, setIsOffline] = (0, import_react9.useState)(false);
function handleRetry() {
if (navigator.onLine) {
setIsOffline(false);
} else {
alert("Still offline, please check your connection");
}
}
(0, import_react9.useEffect)(() => {
function handleOffline() {
setIsOffline(true);
}
function handleOnline() {
setIsOffline(false);
}
window.addEventListener("offline", handleOffline);
window.addEventListener("online", handleOnline);
return () => {
window.removeEventListener("offline", handleOffline);
window.removeEventListener("online", handleOnline);
};
}, []);
return isOffline ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
_Modal,
{
backdrop: "opaque",
className: "w-[480px] overflow-auto rounded border border-neutral-200",
size: "xl",
placement: "center",
isOpen: isOffline,
onOpenChange: () => setIsOffline(!isOffline),
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalContent, { "aria-labelledby": "offline-modal-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
ModalHeader,
{
id: "offline-modal-header",
className: "flex items-center justify-between border-b border-b-neutral-200 bg-neutral-100 px-10 py-4 pr-16 text-xl font-medium text-neutral-950",
children: "Network Error"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(_ModalCloseButton, {}),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-10 py-4 text-lg font-normal text-neutral-700", children: "You are offline, kindly check your internet connection." }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-end border-t border-t-neutral-200 bg-neutral-100 px-12 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(_Button, { appearance: "primary", onPress: handleRetry, children: "Retry" }) })
] })
}
) }) : null;
}