@cerberus-design/react
Version:
The Cerberus Design React component library.
413 lines (396 loc) • 15.1 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
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);
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
// src/components/notifications/index.ts
var notifications_exports = {};
__export(notifications_exports, {
NotificationActionTrigger: () => NotificationActionTrigger,
NotificationCenter: () => NotificationCenter,
NotificationCloseTrigger: () => NotificationCloseTrigger,
NotificationDescription: () => NotificationDescription,
NotificationHeading: () => NotificationHeading,
NotificationParts: () => NotificationParts,
NotificationProvider: () => NotificationProvider,
NotificationRoot: () => NotificationRoot,
toaster: () => toaster,
useNotificationCenter: () => useNotificationCenter
});
module.exports = __toCommonJS(notifications_exports);
// src/components/notifications/primitives.tsx
var import_toast = require("@ark-ui/react/toast");
var import_recipes = require("styled-system/recipes");
// src/system/primitive-factory.tsx
var import_css = require("styled-system/css");
var import_jsx_runtime = require("react/jsx-runtime");
var CerberusPrimitive = class {
constructor(recipe) {
__publicField(this, "recipe");
/**
* Creates a Cerberus component with bare features and no recipe.
* @param Component - The React component to enhance with Cerberus features.
* Can be a string or a component reference.
* @returns A new React component that applies Cerberus features to the
* original component.
*
* @example
* ```ts
* const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
* const Button = withNoRecipe('button')
* ```
*/
__publicField(this, "withNoRecipe", (Component, options) => {
const { defaultProps } = options || {};
const El = Component;
const CerbComponent = (props) => {
const { css: customCss, className, ...nativeProps } = props;
const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
};
if (this.validateComponent(El)) {
const ElName = typeof El === "string" ? El : El.displayName || El.name;
CerbComponent.displayName = ElName;
}
return CerbComponent;
});
/**
* Creates a Cerberus component with the given recipe.
* @param Component - The React component to enhance with the recipe.
* @param options - Options for the recipe.
* @returns A new React component that applies the recipe to the original
* component.
*/
__publicField(this, "withRecipe", (Component, options) => {
const { defaultProps } = options || {};
const El = Component;
const recipe = this.recipe;
const CerbComponent = (internalProps) => {
const {
css: customCss,
className,
...restOfInternalProps
} = internalProps;
const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
const recipeStyles = recipe(variantOptions);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Component,
{
...defaultProps,
...nativeProps,
className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
}
);
};
if (this.validateComponent(El)) {
const ElName = typeof El === "string" ? El : El.displayName || El.name;
CerbComponent.displayName = ElName;
}
return CerbComponent;
});
/**
* Creates a Cerberus component with a slot recipe applied.
* @param Component - The React component to enhance with Cerberus features.
* @param recipe - The slot recipe to apply to the component.
* @returns A new React component that applies Cerberus features and the
* specified slot recipe to the original component.
* @example
* ```typescript
* const { withSlotRecipe } = createCerberusPrimitive(field)
* const Field = withSlotRecipe(RawField, field)
* ```
*/
__publicField(this, "withSlotRecipe", (Component, slot, options) => {
const { defaultProps } = options || {};
const El = Component;
const recipe = this.recipe;
const CerbComponent = (internalProps) => {
const {
css: customCss,
className,
...restOfInternalProps
} = internalProps;
const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
const styles = recipe(variantOptions);
const slotStyles = styles[slot];
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Component,
{
...defaultProps,
...nativeProps,
className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
}
);
};
if (this.validateComponent(El)) {
const ElName = typeof El === "string" ? El : El.displayName || El.name;
CerbComponent.displayName = ElName;
}
return CerbComponent;
});
this.recipe = recipe ?? null;
}
hasStyles(styles) {
if (styles) {
return {
className: styles
};
}
return {};
}
validateComponent(Component) {
if (typeof Component !== "function" && typeof Component !== "object") {
return false;
}
return true;
}
};
// src/system/index.ts
function createCerberusPrimitive(recipe) {
return new CerberusPrimitive(recipe);
}
// src/components/notifications/primitives.tsx
var { withSlotRecipe } = createCerberusPrimitive(import_recipes.toast);
var NotificationProvider = import_toast.Toaster;
var NotificationRoot = withSlotRecipe(
import_toast.Toast.Root,
"root"
);
var NotificationHeading = withSlotRecipe(
import_toast.Toast.Title,
"title"
);
var NotificationDescription = withSlotRecipe(import_toast.Toast.Description, "description");
var NotificationCloseTrigger = withSlotRecipe(
import_toast.Toast.CloseTrigger,
"closeTrigger"
);
var NotificationActionTrigger = withSlotRecipe(
import_toast.Toast.ActionTrigger,
"actionTrigger"
);
// src/components/notifications/parts.ts
var NotificationParts = {
Root: NotificationRoot,
Heading: NotificationHeading,
Description: NotificationDescription,
CloseTrigger: NotificationCloseTrigger,
ActionTrigger: NotificationActionTrigger
};
// src/components/notifications/center.tsx
var import_toast2 = require("@ark-ui/react/toast");
var import_jsx2 = require("styled-system/jsx");
// src/components/button/button.tsx
var import_react = require("react");
var import_jsx = require("styled-system/jsx");
// src/components/show/show.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function Show(props) {
const { when, children, fallback } = props;
if (when) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
}
if (fallback) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
}
return null;
}
// src/components/spinner/spinner.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function Spinner(props) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"svg",
{
"aria-busy": "true",
"data-scope": "spinner",
"data-part": "root",
role: "status",
xmlns: "http://www.w3.org/2000/svg",
height: props.size,
width: props.size,
viewBox: "0 0 24 24",
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"g",
{
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"path",
{
strokeDasharray: 16,
strokeDashoffset: 16,
d: "M12 3c4.97 0 9 4.03 9 9",
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
fill: "freeze",
attributeName: "stroke-dashoffset",
dur: "0.15s",
values: "16;0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animateTransform",
{
attributeName: "transform",
dur: "0.75s",
repeatCount: "indefinite",
type: "rotate",
values: "0 12 12;360 12 12"
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
strokeDasharray: 64,
strokeDashoffset: 64,
strokeOpacity: 0.3,
d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animate",
{
fill: "freeze",
attributeName: "stroke-dashoffset",
dur: "0.6s",
values: "64;0"
}
)
}
)
]
}
)
}
);
}
// src/components/button/primitives.tsx
var import_factory = require("@ark-ui/react/factory");
var import_recipes2 = require("styled-system/recipes");
var { withRecipe } = createCerberusPrimitive(import_recipes2.button);
var ButtonRoot = withRecipe(import_factory.ark.button);
// src/components/button/button.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var ButtonContext = (0, import_react.createContext)({
pending: false
});
function Button(props) {
const { pending = false, ...nativeProps } = props;
const value = (0, import_react.useMemo)(() => ({ pending }), [pending]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
}
// src/components/notifications/match-icon.tsx
var import_factory2 = require("@ark-ui/react/factory");
var import_recipes3 = require("styled-system/recipes");
// src/context/cerberus.tsx
var import_react2 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var CerberusContext = (0, import_react2.createContext)(null);
function useCerberusContext() {
const context = (0, import_react2.useContext)(CerberusContext);
if (!context) {
throw new Error("useCerberus must be used within a CerberusProvider");
}
return context;
}
// src/components/notifications/match-icon.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
function MatchNotificationIcon(props) {
const { icons } = useCerberusContext();
const type = props.type || "info";
const styles = (0, import_recipes3.toast)();
const key = `${type}Notification`;
const Icon = icons[key] || ToastLoadingIcon;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_factory2.ark.div, { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, {}) });
}
function ToastLoadingIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { size: "1rem" });
}
// src/components/notifications/close-trigger.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
function ToastCloseTrigger(props) {
const { icons } = useCerberusContext();
const { close: CloseIcon } = icons;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotificationParts.CloseTrigger, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) });
}
// src/components/notifications/center.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var toaster = (0, import_toast2.createToaster)({
gap: 16,
overlap: true,
placement: "top-end"
});
function NotificationCenter() {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_toast2.Toaster, { toaster, children: (toast3) => {
var _a;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NotificationParts.Root, { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
MatchNotificationIcon,
{
type: toast3.type
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx2.Box, { flex: "1", paddingBlock: "sm", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationParts.Heading, { children: toast3.title }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationParts.Description, { children: toast3.description }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Show, { when: toast3.action, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationParts.ActionTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Button,
{
palette: toast3.type,
usage: "ghost",
size: "sm",
children: (_a = toast3.action) == null ? void 0 : _a.label
}
) }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToastCloseTrigger, {})
] }, toast3.id);
} });
}
function useNotificationCenter() {
function notify(options) {
toaster.create({
title: options.heading,
description: options.description,
type: options.palette,
action: options.action
});
}
return { ...toaster, notify };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
NotificationActionTrigger,
NotificationCenter,
NotificationCloseTrigger,
NotificationDescription,
NotificationHeading,
NotificationParts,
NotificationProvider,
NotificationRoot,
toaster,
useNotificationCenter
});
//# sourceMappingURL=index.cjs.map