@cerberus-design/react
Version:
The Cerberus Design React component library.
455 lines (438 loc) • 16.8 kB
JavaScript
;
"use client";
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/context/confirm-modal.tsx
var confirm_modal_exports = {};
__export(confirm_modal_exports, {
ConfirmModal: () => ConfirmModal,
useConfirmModal: () => useConfirmModal
});
module.exports = __toCommonJS(confirm_modal_exports);
var import_react4 = require("react");
var import_css2 = require("styled-system/css");
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_runtime = require("react/jsx-runtime");
function Show(props) {
const { when, children, fallback } = props;
if (when) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
}
if (fallback) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
}
return null;
}
// src/components/button/primitives.tsx
var import_factory = require("@ark-ui/react/factory");
var import_recipes = require("styled-system/recipes");
// src/system/primitive-factory.tsx
var import_css = require("styled-system/css");
var import_jsx_runtime2 = 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_runtime2.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_runtime2.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_runtime2.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/button/primitives.tsx
var { withRecipe } = createCerberusPrimitive(import_recipes.button);
var ButtonRoot = withRecipe(import_factory.ark.button);
// src/components/button/button.tsx
var import_jsx_runtime3 = 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_runtime3.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
}
// src/utils/index.ts
function splitProps(props, ...keyGroups) {
const result = keyGroups.map(() => ({}));
const rest = {};
for (const key in props) {
let assigned = false;
for (let i = 0; i < keyGroups.length; i++) {
if (keyGroups[i].includes(key)) {
result[i][key] = props[key];
assigned = true;
break;
}
}
if (!assigned) {
rest[key] = props[key];
}
}
return [...result, rest];
}
// src/components/avatar/primitives.tsx
var import_avatar = require("@ark-ui/react/avatar");
var import_recipes2 = require("styled-system/recipes");
var { withSlotRecipe } = createCerberusPrimitive(import_recipes2.avatar);
var AvatarRoot = withSlotRecipe(import_avatar.Avatar.Root, "root");
var AvatarImage = withSlotRecipe(
import_avatar.Avatar.Image,
"image"
);
var AvatarFallback = withSlotRecipe(
import_avatar.Avatar.Fallback,
"fallback"
);
// src/components/avatar/parts.ts
var AvatarParts = {
Root: AvatarRoot,
Image: AvatarImage,
Fallback: AvatarFallback
};
// src/components/avatar/avatar.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function Avatar2(props) {
const [imgProps, { fallback, children }, rootProps] = splitProps(
props,
["alt", "src"],
["fallback", "children"]
);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Show,
{
when: children,
fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarParts.Fallback, { children: fallback }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarParts.Image, { ...imgProps })
] }),
children
}
) });
}
// src/components/dialog/primitives.tsx
var import_dialog = require("@ark-ui/react/dialog");
var import_recipes3 = require("styled-system/recipes");
var { withSlotRecipe: withSlotRecipe2, withNoRecipe } = createCerberusPrimitive(import_recipes3.dialog);
var DialogRoot = withNoRecipe(import_dialog.Dialog.Root);
var DialogProvider = DialogRoot;
var DialogTrigger = withSlotRecipe2(import_dialog.Dialog.Trigger, "trigger");
var DialogBackdrop = withSlotRecipe2(import_dialog.Dialog.Backdrop, "backdrop");
var DialogPositioner = withSlotRecipe2(import_dialog.Dialog.Positioner, "positioner");
var DialogContent = withSlotRecipe2(import_dialog.Dialog.Content, "content");
var DialogHeading = withSlotRecipe2(import_dialog.Dialog.Title, "title");
var DialogDescription = withSlotRecipe2(
import_dialog.Dialog.Description,
"description"
);
var DialogCloseTrigger = withNoRecipe(import_dialog.Dialog.CloseTrigger);
// 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/portal/portal.tsx
var import_react3 = require("@ark-ui/react");
var Portal = import_react3.Portal;
// src/components/dialog/dialog.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
function Dialog2(props) {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Portal, { children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogBackdrop, {}),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogContent, { ...props }) })
] });
}
// src/context/confirm-modal.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var ConfirmModalContext = (0, import_react4.createContext)(null);
function ConfirmModal(props) {
const [open, setOpen] = (0, import_react4.useState)(false);
const [content, setContent] = (0, import_react4.useState)(null);
const resolveRef = (0, import_react4.useRef)(null);
const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
const { icons } = useCerberusContext();
const { confirmModal: ConfirmIcon } = icons;
const palette = (0, import_react4.useMemo)(
() => kind === "destructive" ? "danger" : "action",
[kind]
);
const handleChoice = (0, import_react4.useCallback)(
(e) => {
var _a, _b;
const target = e.currentTarget;
if (target.value === "true") {
(_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
}
(_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, false);
setOpen(false);
},
[setOpen]
);
const handleShow = (0, import_react4.useCallback)(
(options) => {
return new Promise((resolve) => {
setContent({ ...options });
setOpen(true);
resolveRef.current = resolve;
});
},
[setOpen, setContent]
);
const handleOpenChange = (0, import_react4.useCallback)(
({ open: open2 }) => {
var _a;
setOpen(open2);
if (!open2) {
(_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, null);
resolveRef.current = null;
}
},
[setOpen]
);
const value = (0, import_react4.useMemo)(
() => ({
show: handleShow
}),
[handleShow]
);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ConfirmModalContext.Provider, { value, children: [
props.children,
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogProvider, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Dialog2,
{
size: "sm",
style: {
"--dialog-content-min-h": "auto"
},
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
import_jsx2.VStack,
{
alignItems: "flex-start",
gap: "md",
justify: "space-between",
w: "full",
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
import_jsx2.HStack,
{
alignSelf: "center",
justify: "center",
paddingBlockEnd: "md",
w: "full",
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Show,
{
when: palette === "danger",
fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Avatar2,
{
gradient: "charon-light",
fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmIcon, { size: 24 })
}
),
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Avatar2,
{
gradient: "hades-dark",
fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmIcon, { size: 24 })
}
)
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: content == null ? void 0 : content.description, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogDescription, { children: content == null ? void 0 : content.description }) }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.HStack, { gap: "md", pt: "md", w: "full", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Button,
{
autoFocus: true,
className: (0, import_css2.css)({
w: "1/2"
}),
name: "confirm",
onClick: handleChoice,
palette,
value: "true",
children: content == null ? void 0 : content.actionText
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Button,
{
className: (0, import_css2.css)({
w: "1/2"
}),
name: "cancel",
onClick: handleChoice,
usage: "outlined",
value: "false",
children: content == null ? void 0 : content.cancelText
}
) })
] })
]
}
)
}
) })
] });
}
function useConfirmModal() {
const context = (0, import_react4.useContext)(ConfirmModalContext);
if (context === null) {
throw new Error(
"useConfirmModal must be used within a ConfirmModal Provider"
);
}
return context;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ConfirmModal,
useConfirmModal
});
//# sourceMappingURL=confirm-modal.cjs.map