@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
236 lines (232 loc) • 10.4 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_context = require('../../utils/context.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_system_provider = require('../system/system-provider.cjs');
const require_factory = require('../system/factory.cjs');
const require_props = require('./props.cjs');
const require_use_component_style = require('./use-component-style.cjs');
const require_utils = require('./utils.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/core/components/create-component.tsx
function createProxyComponent(el, { shouldStyleProps,...options } = {}) {
options.shouldForwardProp ??= (0, require_utils_index.utils_exports.isFunction)(el);
shouldStyleProps ??= !(0, require_utils_index.utils_exports.isFunction)(el);
if (el === "fragment") el = react.Fragment;
if (shouldStyleProps || (0, require_utils_index.utils_exports.isString)(el)) {
const ProxyComponent = require_factory.styled(el, options);
ProxyComponent.displayName = "ProxyComponent";
return ProxyComponent;
} else {
el.displayName ??= "ProxyComponent";
return el;
}
}
function withDisplayName(Component, displayName) {
Object.defineProperty(Component, "name", { value: displayName });
Object.defineProperty(Component, "displayName", { value: displayName });
return Component;
}
function getSlotKey(slot) {
if (!slot) return "unknown";
if ((0, require_utils_index.utils_exports.isArray)(slot) || !(0, require_utils_index.utils_exports.isObject)(slot)) return (0, require_utils_index.utils_exports.toCamelCase)((0, require_utils_index.utils_exports.toArray)(slot).join("-"));
else return (0, require_utils_index.utils_exports.toCamelCase)(slot.name);
}
function getSlotName(slot) {
if (!slot) return "";
if ((0, require_utils_index.utils_exports.isArray)(slot)) return slot.map((value) => (0, require_utils_index.utils_exports.toPascalCase)(value)).join("");
else if ((0, require_utils_index.utils_exports.isObject)(slot)) return (0, require_utils_index.utils_exports.toPascalCase)(slot.name);
else return (0, require_utils_index.utils_exports.toPascalCase)(slot);
}
function createComponent(name, style) {
const defaultClassName = style?.className;
const defaultDisplayName = require_utils.getDisplayName(name);
const [ComponentContext, useComponentContext] = require_context.createContext({ name: `${defaultDisplayName}Context` });
const [PropsContext, usePropsContext] = require_context.createContext({
name: `${defaultDisplayName}PropsContext`,
strict: false
});
function useClassName(name$1, className) {
const system = require_system_provider.useSystem();
className = (0, require_utils_index.utils_exports.runIfFn)(className, system);
className ??= require_utils.getClassName(name$1, defaultClassName)(system);
return className;
}
function useComponentProps(props, { className, withContext: withContext$1 = true, transferProps } = {}) {
const system = require_system_provider.useSystem();
className = (0, require_utils_index.utils_exports.runIfFn)(className, system);
className ??= defaultClassName;
className ??= require_utils.getClassName(name)(system);
const contextProps = usePropsContext() ?? {};
const [, rest] = require_use_component_style.useComponentStyle(withContext$1 ? require_props.mergeProps(contextProps, props)() : props, {
className,
style,
transferProps
});
return rest;
}
function component(el, { name: name$1, className,...options } = {}) {
const displayName = require_utils.getDisplayName(name$1, defaultDisplayName);
const ProxyComponent = createProxyComponent(el, options);
return function(...superProps) {
return withDisplayName((props) => {
className = useClassName(name$1, className);
const mergedProps = require_props.chainProps(...superProps)()(props);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProxyComponent, {
...mergedProps,
className: (0, require_utils_index.utils_exports.cx)(className, mergedProps.className)
});
}, displayName);
};
}
function withContext(el, { name: name$1, className, withContext: withContext$1, transferProps,...options } = {}) {
const displayName = require_utils.getDisplayName(name$1, defaultDisplayName);
const ProxyComponent = createProxyComponent(el, options);
return function(initialProps, ...superProps) {
return withDisplayName((props) => {
className = useClassName(name$1, className);
const mergedProps = useComponentProps((0, require_utils_index.utils_exports.isFunction)(initialProps) ? initialProps(props) : require_props.mergeProps(initialProps ?? {}, props)(), {
className,
withContext: withContext$1,
transferProps
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProxyComponent, { ...require_props.chainProps(...(0, require_utils_index.utils_exports.toArray)(superProps))()(mergedProps) });
}, displayName);
};
}
return {
component,
ComponentContext,
PropsContext,
useComponentContext,
usePropsContext,
withContext,
useComponentProps
};
}
function createSlotComponent(rootName, style) {
const rootClassName = style?.className;
const rootDisplayName = require_utils.getDisplayName(rootName);
const classNameMap = /* @__PURE__ */ new Map();
const [StyleContext, useStyleContext] = require_context.createContext({ name: `${rootDisplayName}StyleContext` });
const [ComponentContext, useComponentContext] = require_context.createContext({ name: `${rootDisplayName}Context` });
const [PropsContext, usePropsContext] = require_context.createContext({
name: `${rootDisplayName}PropsContext`,
strict: false
});
function useClassName(slot, className) {
const system = require_system_provider.useSystem();
className = (0, require_utils_index.utils_exports.runIfFn)(className, system);
className ??= require_use_component_style.getSlotClassName(rootClassName ?? require_utils.getClassName(rootName)(system), slot);
return className;
}
function useClassNames() {
const system = require_system_provider.useSystem();
const entries = classNameMap.entries().map(([key, { className, slot }]) => {
className = (0, require_utils_index.utils_exports.runIfFn)(className, system);
className ??= require_use_component_style.getSlotClassName(rootClassName ?? require_utils.getClassName(rootName)(system), slot);
return [key, className];
});
return Object.fromEntries(entries.filter(([_, className]) => className));
}
function useRootComponentProps(props, slot, { className, withContext: withContext$1 = true, transferProps } = {}) {
className = useClassName(slot, className);
const contextProps = usePropsContext() ?? {};
const [css, rest] = require_use_component_style.useComponentSlotStyle(withContext$1 ? require_props.mergeProps(contextProps, props)() : props, {
className,
style,
slot,
transferProps
});
return [css, rest];
}
function useSlotComponentProps(props, slot, { className } = {}) {
className = useClassName(slot, className);
const style$1 = useStyleContext();
return {
...props,
className: (0, require_utils_index.utils_exports.cx)(className, props.className),
css: require_use_component_style.mergeSlotCSS(slot, style$1, props.css)
};
}
function component(el, slot, { name, className,...options } = {}) {
const ProxyComponent = createProxyComponent(el, options);
const slotKey = getSlotKey(slot);
const displayName = require_utils.getDisplayName(name, `${rootDisplayName}${getSlotName(slot)}`);
classNameMap.set(slotKey, {
className,
slot
});
return function(...superProps) {
return withDisplayName((props) => {
className = useClassName(slot, className);
const mergedProps = require_props.chainProps(...superProps)()(props);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProxyComponent, {
...mergedProps,
className: (0, require_utils_index.utils_exports.cx)(className, mergedProps.className)
});
}, displayName);
};
}
function withProvider(el, slot = "root", { name, className, withContext: withContext$1, transferProps,...options } = {}) {
const ProxyComponent = createProxyComponent(el, options);
const slotKey = getSlotKey(slot);
const displayName = require_utils.getDisplayName(name, `${rootDisplayName}${getSlotName(slot)}`);
classNameMap.set(slotKey, {
className,
slot
});
return function(initialProps, ...superProps) {
return withDisplayName((props) => {
const [context, mergedProps] = useRootComponentProps((0, require_utils_index.utils_exports.isFunction)(initialProps) ? initialProps(props) : require_props.mergeProps(initialProps ?? {}, props)(), slot, {
className,
withContext: withContext$1,
transferProps
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
value: context,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProxyComponent, { ...require_props.chainProps(...superProps)()(mergedProps) })
});
}, displayName);
};
}
function withContext(el, slot, { name, className, withContext: withContext$1,...options } = {}) {
const ProxyComponent = createProxyComponent(el, options);
const slotKey = getSlotKey(slot);
const displayName = require_utils.getDisplayName(name, `${rootDisplayName}${getSlotName(slot)}`);
classNameMap.set(slotKey, {
className,
slot
});
return function(initialProps, ...superProps) {
return withDisplayName((props) => {
const mergedProps = useSlotComponentProps((0, require_utils_index.utils_exports.isFunction)(initialProps) ? initialProps(props) : require_props.mergeProps(initialProps ?? {}, props)(), slot, {
className,
withContext: withContext$1
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProxyComponent, { ...require_props.chainProps(...superProps)()(mergedProps) });
}, displayName);
};
}
return {
component,
ComponentContext,
PropsContext,
StyleContext,
useClassNames,
useComponentContext,
usePropsContext,
useStyleContext,
withContext,
withProvider,
useRootComponentProps,
useSlotComponentProps
};
}
//#endregion
exports.createComponent = createComponent;
exports.createSlotComponent = createSlotComponent;
//# sourceMappingURL=create-component.cjs.map