@cerberus-design/react
Version:
The Cerberus Design React component library.
291 lines (280 loc) • 10.3 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/field/parts.ts
var parts_exports = {};
__export(parts_exports, {
FieldParts: () => FieldParts
});
module.exports = __toCommonJS(parts_exports);
// src/components/field/primitives.tsx
var import_field2 = require("@ark-ui/react/field");
var import_react3 = require("@ark-ui/react");
var import_recipes3 = 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/field/start-indicator.tsx
var import_css2 = require("styled-system/css");
var import_recipes = require("styled-system/recipes");
var import_jsx_runtime2 = require("react/jsx-runtime");
function FieldStartIndicator(props) {
const styles = (0, import_recipes.field)();
if (!props.children) return null;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
...props,
"data-part": "start-indicator",
className: (0, import_css2.cx)(props.className, styles.startIndicator)
}
);
}
// src/components/field/status-indicator.tsx
var import_react2 = require("@ark-ui/react");
var import_css3 = require("styled-system/css");
var import_recipes2 = require("styled-system/recipes");
// src/context/cerberus.tsx
var import_react = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var CerberusContext = (0, import_react.createContext)(null);
function useCerberusContext() {
const context = (0, import_react.useContext)(CerberusContext);
if (!context) {
throw new Error("useCerberus must be used within a CerberusProvider");
}
return context;
}
// src/components/field/status-indicator.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function FieldStatusIndicator(props) {
const { fallback, ...nativeProps } = props;
const fieldContext = (0, import_react2.useFieldContext)();
const styles = (0, import_recipes2.field)();
const { icons } = useCerberusContext();
const { invalid: InvalidIcon } = icons;
if (!fieldContext) return null;
if (fieldContext.invalid) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
...nativeProps,
"aria-hidden": "true",
"data-invalid": true,
className: (0, import_css3.cx)(nativeProps.className, styles.statusIndicator),
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InvalidIcon, {})
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
...nativeProps,
"aria-hidden": "true",
"data-part": "end-indicator",
className: (0, import_css3.cx)(nativeProps.className, styles.endIndicator),
children: fallback
}
);
}
// src/components/field/error-text.tsx
var import_field = require("@ark-ui/react/field");
var import_jsx_runtime5 = require("react/jsx-runtime");
function CerberusFieldErrorText(props) {
if (!props.children) return null;
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_field.Field.ErrorText, { ...props });
}
// src/components/field/primitives.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes3.field);
var FieldRoot = withSlotRecipe(import_field2.Field.Root, "root");
function FieldLabelEl(props) {
const { children, ...nativeProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_field2.Field.Label, { ...nativeProps, children: [
children,
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_field2.Field.RequiredIndicator, { children: "(required)" })
] });
}
var FieldLabel = withSlotRecipe(FieldLabelEl, "label");
function FieldRequiredIndicatorEl(props) {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_field2.Field.RequiredIndicator, { ...props, children: "(required)" });
}
var FieldRequiredIndicator = withNoRecipe(
FieldRequiredIndicatorEl
);
var FieldInputRoot = withSlotRecipe(
import_react3.ark.div,
"inputRoot"
);
var FieldInput = withSlotRecipe(import_field2.Field.Input, "input");
var FieldHelperText = withSlotRecipe(
import_field2.Field.HelperText,
"helperText"
);
var FieldErrorText = withSlotRecipe(
CerberusFieldErrorText,
"errorText"
);
var FieldTextarea = withSlotRecipe(
import_field2.Field.Textarea,
"textarea"
);
// src/components/field/parts.ts
var FieldParts = {
Root: FieldRoot,
Label: FieldLabel,
Input: FieldInput,
Textarea: FieldTextarea,
HelperText: FieldHelperText,
ErrorText: FieldErrorText,
StartIndicator: FieldStartIndicator,
StatusIndicator: FieldStatusIndicator,
RequiredIndicator: FieldRequiredIndicator
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FieldParts
});
//# sourceMappingURL=parts.cjs.map