analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
203 lines (200 loc) • 7.76 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Skeleton/Skeleton.tsx
var Skeleton_exports = {};
__export(Skeleton_exports, {
Skeleton: () => Skeleton,
SkeletonCard: () => SkeletonCard,
SkeletonCircle: () => SkeletonCircle,
SkeletonList: () => SkeletonList,
SkeletonRectangle: () => SkeletonRectangle,
SkeletonRounded: () => SkeletonRounded,
SkeletonTable: () => SkeletonTable,
SkeletonText: () => SkeletonText
});
module.exports = __toCommonJS(Skeleton_exports);
var import_react = require("react");
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/components/Skeleton/Skeleton.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var SKELETON_ANIMATION_CLASSES = {
pulse: "animate-pulse",
none: ""
};
var SKELETON_VARIANT_CLASSES = {
text: "h-4 bg-background-200 rounded",
circular: "bg-background-200 rounded-full",
rectangular: "bg-background-200",
rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
none: "",
small: "space-y-1",
medium: "space-y-2",
large: "space-y-3"
};
var Skeleton = (0, import_react.forwardRef)(
({
variant = "text",
width,
height,
animation = "pulse",
lines = 1,
spacing = "none",
className = "",
children,
...props
}, ref) => {
const animationClass = SKELETON_ANIMATION_CLASSES[animation];
const variantClass = SKELETON_VARIANT_CLASSES[variant];
const spacingClass = SPACING_CLASSES[spacing];
const style = {
width: typeof width === "number" ? `${width}px` : width,
height: typeof height === "number" ? `${height}px` : height
};
if (variant === "text" && lines > 1) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
ref,
className: cn("flex flex-col", spacingClass, className),
...props,
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: cn(variantClass, animationClass),
style: index === lines - 1 ? { width: "60%" } : void 0
},
index
))
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
ref,
className: cn(variantClass, animationClass, className),
style,
...props,
children
}
);
}
);
var SkeletonText = (0, import_react.forwardRef)(
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = (0, import_react.forwardRef)(
({
showAvatar = true,
showTitle = true,
showDescription = true,
showActions = true,
lines = 2,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
ref,
className: cn(
"w-full p-4 bg-background border border-border-200 rounded-lg",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start space-x-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonCircle, { width: 40, height: 40 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { width: "60%", height: 20 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }),
showActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonRectangle, { width: 80, height: 32 })
] })
]
}
);
}
);
var SkeletonList = (0, import_react.forwardRef)(
({
items = 3,
showAvatar = true,
showTitle = true,
showDescription = true,
lines = 1,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonCircle, { width: 32, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { width: "40%", height: 16 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }, index)) });
}
);
var SkeletonTable = (0, import_react.forwardRef)(
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
showHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 20
},
index
)) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 16
},
colIndex
)) }, rowIndex)) })
] });
}
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Skeleton,
SkeletonCard,
SkeletonCircle,
SkeletonList,
SkeletonRectangle,
SkeletonRounded,
SkeletonTable,
SkeletonText
});
//# sourceMappingURL=index.js.map