@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
230 lines (220 loc) • 8.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/avatar/index.ts
var avatar_exports = {};
__export(avatar_exports, {
Avatar: () => namespace_exports,
AvatarContext: () => AvatarContext,
AvatarFallback: () => AvatarFallback,
AvatarGroup: () => AvatarGroup,
AvatarIcon: () => AvatarIcon,
AvatarImage: () => AvatarImage,
AvatarRoot: () => AvatarRoot,
AvatarRootProvider: () => AvatarRootProvider
});
module.exports = __toCommonJS(avatar_exports);
// 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/avatar-group.tsx
var import_react2 = require("react");
// src/components/group/group.tsx
var React2 = __toESM(require("react"), 1);
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_css2 = require("@fidely-ui/styled-system/css");
var import_jsx_runtime3 = require("react/jsx-runtime");
var StyledGroup = (0, import_jsx3.styled)(import_factory2.ark.div, import_recipes2.group);
var Group = React2.forwardRef(
function Group2(props, ref) {
const {
alignItems = "center",
justifyContent = "flex-start",
flexWrap,
children,
className,
...rest
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
StyledGroup,
{
ref,
alignItems,
justifyContent,
flexWrap,
...rest,
className: (0, import_css2.cx)(className),
children
}
);
}
);
Group.displayName = "Group";
// src/components/avatar/avatar-group.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var AvatarGroup = (0, import_react2.forwardRef)(
function AvatarGroup2(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Group, { overlap: true, ref, ...props });
}
);
// src/components/avatar/namespace.ts
var namespace_exports = {};
__export(namespace_exports, {
Context: () => AvatarContext,
Fallback: () => AvatarFallback,
Icon: () => AvatarIcon,
Image: () => AvatarImage,
Root: () => AvatarRoot,
RootProvider: () => AvatarRootProvider
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Avatar,
AvatarContext,
AvatarFallback,
AvatarGroup,
AvatarIcon,
AvatarImage,
AvatarRoot,
AvatarRootProvider
});