@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
304 lines (290 loc) • 11.5 kB
JavaScript
'use client'
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/persona/index.ts
var persona_exports = {};
__export(persona_exports, {
Persona: () => Persona
});
module.exports = __toCommonJS(persona_exports);
// src/components/persona/persona.tsx
var import_react5 = require("react");
var import_css2 = require("@fidely-ui/styled-system/css");
// src/components/avatar/avatar.tsx
var import_react = require("react");
var import_factory = require("@ark-ui/react/factory");
var import_avatar = require("@ark-ui/react/avatar");
var import_recipes = require("@fidely-ui/styled-system/recipes");
var import_jsx2 = require("@fidely-ui/styled-system/jsx");
// src/system/make-style-context.tsx
var React = __toESM(require("react"), 1);
var import_jsx = require("@fidely-ui/styled-system/jsx");
var import_css = require("@fidely-ui/styled-system/css");
var import_jsx_runtime = require("react/jsx-runtime");
var canForward = (prop, variantKeys, opts = {}) => opts.forwardProps?.includes(prop) || !variantKeys.includes(prop) && !(0, import_jsx.isCssProperty)(prop);
function makeStyleContext(recipe) {
const Ctx = React.createContext(null);
function withSlotRootProvider(Component) {
const Comp = (props) => {
const [variantProps, rest] = recipe.splitVariantProps(props);
const slots = recipe(variantProps);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: slots, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...rest }) });
};
Comp.displayName = "FidelyRoot";
return Comp;
}
function withSlotProvider2(Component, slot, opts) {
const Styled = (0, import_jsx.styled)(
Component,
{},
{
shouldForwardProp: (prop, variantKeys) => canForward(prop, variantKeys, opts)
}
);
const Comp = React.forwardRef((props, ref) => {
const [variantProps, rest] = recipe.splitVariantProps(props);
const slots = recipe(variantProps);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: slots, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Styled,
{
...rest,
ref,
className: (0, import_css.cx)(slots?.[slot], props.className)
}
) });
});
Comp.displayName = `FidelySlotProvider(${String(slot)})`;
return Comp;
}
function withSlotContext2(Component, slot) {
const Styled = (0, import_jsx.styled)(Component);
const Comp = React.forwardRef((props, ref) => {
const slots = React.useContext(Ctx);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Styled,
{
...props,
ref,
className: (0, import_css.cx)(slots?.[slot], props.className)
}
);
});
Comp.displayName = `FidelySlotConsumer(${String(slot)})`;
return Comp;
}
return { withSlotRootProvider, withSlotProvider: withSlotProvider2, withSlotContext: withSlotContext2 };
}
// src/utils/get-initial.ts
function getInitials(name) {
const names = name.trim().split(" ");
const firstName = names[0] != null ? names[0] : "";
const lastName = names.length > 1 ? names[names.length - 1] : "";
return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
}
// src/components/avatar/avatar.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var { withSlotProvider, withSlotContext } = makeStyleContext(import_recipes.avatar);
var AvatarRootProvider = withSlotProvider(import_avatar.Avatar.RootProvider, "root");
var AvatarRoot = withSlotProvider(
import_avatar.Avatar.Root,
"root"
);
var StyledFallback = (0, import_jsx2.styled)(import_avatar.Avatar.Fallback, {});
function getFallback(props) {
if (props.children) return props.children;
if (props.name) return getInitials(props.name);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AvatarIcon, {});
}
var AvatarFallback = (0, import_react.forwardRef)(
function AvatarFallback2(props, ref) {
const { name: _, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledFallback, { ref, ...rest, children: getFallback(props) });
}
);
var AvatarImage = withSlotContext(
import_avatar.Avatar.Image,
"image"
);
var AvatarIcon = (0, import_react.forwardRef)(
function AvatarIcon2(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_factory.ark.svg,
{
ref,
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 24 24",
height: "1.2em",
width: "1.2em",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 22H18V20C18 18.3431 16.6569 17 15 17H9C7.34315 17 6 18.3431 6 20V22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13ZM12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" })
}
);
}
);
AvatarIcon.displayName = "AvatarIcon";
var AvatarContext = import_avatar.Avatar.Context;
// src/components/avatar/namespace.ts
var namespace_exports = {};
__export(namespace_exports, {
Context: () => AvatarContext,
Fallback: () => AvatarFallback,
Icon: () => AvatarIcon,
Image: () => AvatarImage,
Root: () => AvatarRoot,
RootProvider: () => AvatarRootProvider
});
// src/components/text/index.tsx
var import_react2 = require("react");
var import_factory2 = require("@ark-ui/react/factory");
var import_jsx3 = require("@fidely-ui/styled-system/jsx");
var import_recipes2 = require("@fidely-ui/styled-system/recipes");
var import_jsx_runtime3 = require("react/jsx-runtime");
var StyledText = (0, import_jsx3.styled)(import_factory2.ark.p, import_recipes2.text);
var Text = (0, import_react2.forwardRef)(
function Text2(props, ref) {
const { className, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledText, { ref, ...rest });
}
);
Text.displayName = "Text";
// src/components/flex/index.tsx
var import_react3 = require("react");
var import_jsx4 = require("@fidely-ui/styled-system/jsx");
var import_patterns = require("@fidely-ui/styled-system/patterns");
// src/utils/split-props.ts
function splitProps(props, patternKeys) {
const patternProps = {};
const restProps = {};
for (const key in props) {
if (patternKeys.includes(key)) {
patternProps[key] = props[key];
} else {
restProps[key] = props[key];
}
}
return [patternProps, restProps];
}
// src/components/flex/index.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Flex = (0, import_react3.forwardRef)(
function Flex2(props, ref) {
const [patternProps, restProps] = splitProps(props, [
"align",
"justify",
"direction",
"wrap",
"basis",
"grow",
"shrink",
"gap"
]);
const styles = import_patterns.flex.raw(patternProps);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx4.styled.div, { ref, ...styles, ...restProps });
}
);
Flex.displayName = "Flex";
// src/components/stack/stack.tsx
var import_react4 = require("react");
var import_jsx5 = require("@fidely-ui/styled-system/jsx");
var import_patterns2 = require("@fidely-ui/styled-system/patterns");
var import_jsx_runtime5 = require("react/jsx-runtime");
var Stack = (0, import_react4.forwardRef)(
function Stack2(props, ref) {
const [patternProps, restProps] = splitProps(props, [
"align",
"justify",
"direction",
"gap"
]);
const styles = import_patterns2.stack.raw(patternProps);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx5.styled.div, { ref, ...styles, ...restProps });
}
);
Stack.displayName = "Stack";
// src/components/persona/persona.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var Persona = (0, import_react5.forwardRef)(
function Persona2(props, ref) {
const {
name,
title,
img,
imgSize = "md",
orientation = "horizontal",
spacing = 3,
className,
...rest
} = props;
const sizeMap = {
xs: { gap: 1, nameSize: "xs", titleSize: "xs", nameWeight: "medium" },
sm: { gap: 1.5, nameSize: "sm", titleSize: "xs", nameWeight: "medium" },
md: { gap: 2, nameSize: "sm", titleSize: "xs", nameWeight: "semibold" },
lg: { gap: 3, nameSize: "md", titleSize: "sm", nameWeight: "semibold" },
xl: { gap: 3.5, nameSize: "md", titleSize: "sm", nameWeight: "semibold" },
"2xl": { gap: 4, nameSize: "lg", titleSize: "md", nameWeight: "bold" }
};
const current = sizeMap[imgSize];
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
Flex,
{
ref,
flexDirection: orientation === "horizontal" ? "row" : "column",
alignItems: orientation === "horizontal" ? "center" : "flex-start",
gap: spacing ?? current.gap,
className: (0, import_css2.cx)("fidely-persona", className),
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(namespace_exports.Root, { size: imgSize, children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(namespace_exports.Fallback, { name }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(namespace_exports.Image, { src: img, alt: name })
] }),
(name || title) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Stack, { gap: "0", children: [
name && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Text,
{
fontWeight: "medium",
color: "fg.default",
fontSize: current.nameSize,
children: name
}
),
title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: "fg.muted", fontSize: current.titleSize, children: title })
] })
]
}
);
}
);
Persona.displayName = "Persona";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Persona
});