@atom-learning/components 6.8.1 → 6.9.0

package/dist/index.cjs.js

@@ -4391,7 +4391,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", clas
 		...remainingProps,
 		value: innerValue,
 		onChange: handleOnChange,
-		className: (0, clsx.default)(size === "sm" ? "pr-8" : "pr-10", "[-webkit-search-decoration:hidden]", "[-webkit-search-cancel-button:hidden]", "[-webkit-search-results-button:hidden]")
+		className: (0, clsx.default)(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 	}), getIcon());
 });
 SearchInput.displayName = "SearchInput";
@@ -7940,69 +7940,34 @@ var Tile = react.default.forwardRef(({ children, borderRadius = "lg", colorSchem
 Tile.displayName = "Tile";
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTabs.tsx
-var SkeletonTabs = ({ numberOfTabs, containerCss, tabCss }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", containerCss) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonTabs = ({ numberOfTabs, className, tabClassName }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", className) }, Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map((key) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key,
-	className: (0, clsx.default)("w-32", "h-6", "rounded-sm", tabCss)
+	className: (0, clsx.default)("w-32", "h-6", "rounded-sm", tabClassName)
 })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonDoughnutChart.tsx
-var DoughnutSvg = () => /* @__PURE__ */ react.default.createElement("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 120,
-	height: 121,
-	fill: "none",
-	className: "animate-shimmer"
-}, /* @__PURE__ */ react.default.createElement("mask", {
-	id: "a",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z",
-	mask: "url(#a)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "b",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z",
-	mask: "url(#b)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "c",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z",
-	mask: "url(#c)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "d",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z",
-	mask: "url(#d)"
-}), /* @__PURE__ */ react.default.createElement("mask", {
-	id: "e",
-	fill: "#fff"
-}, /* @__PURE__ */ react.default.createElement("path", { d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z" })), /* @__PURE__ */ react.default.createElement("path", {
-	className: "fill-grey-300",
-	stroke: "#fff",
-	strokeWidth: 1.6,
-	d: "M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z",
-	mask: "url(#e)"
-}));
-var SkeletonDoughnutChart = ({ containerCss }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ react.default.createElement(DoughnutSvg, null));
+var buildConicGradient = () => {
+	const numberOfSegments = 5;
+	const gap = 4;
+	const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments;
+	const stops = [];
+	let current = 0;
+	Array.from({ length: numberOfSegments }).forEach(() => {
+		stops.push(`var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`);
+		current += segmentAngle;
+		stops.push(`white ${current}deg ${current + gap}deg`);
+		current += gap;
+	});
+	return `conic-gradient(${stops.join(", ")})`;
+};
+var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "size-60", className) }, /* @__PURE__ */ react.default.createElement("div", {
+	className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
+	style: { "--gradient": buildConicGradient() }
+}, /* @__PURE__ */ react.default.createElement("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })));
 //#endregion
 //#region src/components/skeleton-loader/SkeletonTable.tsx
-var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, containerCss }) => {
-	return /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", containerCss) }, /* @__PURE__ */ react.default.createElement(Table, { size: "md" }, /* @__PURE__ */ react.default.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, className }) => {
+	return /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-row", "gap-4", "relative", className) }, /* @__PURE__ */ react.default.createElement(Table, { size: "md" }, /* @__PURE__ */ react.default.createElement(Table.Header, { theme: "white" }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.HeaderCell, { key: columnIndex }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 		style: { "--width": columnWidth?.[columnIndex] || "100px" },
 		className: "h-4 w-(--width) rounded-xl"
 	})))), /* @__PURE__ */ react.default.createElement(Table.Body, { striped: false }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ react.default.createElement(Table.Row, { key: rowIndex }, Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ react.default.createElement(Table.Cell, {
@@ -8015,26 +7980,56 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, conta
 };
 //#endregion
 //#region src/components/skeleton-loader/SkeletonCard.tsx
-var SkeletonCard = ({ numberOfRows = 3, withChart }) => /* @__PURE__ */ react.default.createElement(Tile, { className: "relative w-full flex-col items-center gap-6 p-6" }, /* @__PURE__ */ react.default.createElement(Flex, {
-	gap: "6",
-	align: "center",
-	className: "w-full"
-}, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement(Flex, {
-	direction: "column",
-	gap: "24",
-	className: "grow"
-}, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("relative", "w-full", "flex-col", "items-center", "gap-6 p-6", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "align-center flex w-full gap-6" }, withChart && /* @__PURE__ */ react.default.createElement(SkeletonDoughnutChart, null), /* @__PURE__ */ react.default.createElement("div", { className: "flex grow flex-col gap-6" }, Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
 	key: rowNumber,
 	className: "bg-grey-200 h-10 w-full min-w-25 rounded-md"
 })))), /* @__PURE__ */ react.default.createElement(SkeletonButton, null));
 //#endregion
+//#region src/components/skeleton-loader/SkeletonColumnChart.tsx
+var getBarHeight = (groupIndex, columnIndex) => Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30);
+var ColumnGroup = ({ numberOfColumns, groupIndex }) => /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end gap-2" }, Array.from({ length: numberOfColumns }, (_, i) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	key: i,
+	className: "h-(--height) w-5 rounded-t-full rounded-b-none",
+	style: { "--height": `${getBarHeight(groupIndex, i)}px` }
+}))), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-2 w-14 rounded-full" }));
+var LegendItem$1 = () => /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
+var SkeletonColumnChart = ({ numberOfLabels = 2, numberOfGroups = 7, numberOfColumns = 1, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem$1, { key: i })))), /* @__PURE__ */ react.default.createElement("div", { className: "flex items-end justify-between gap-2" }, Array.from({ length: numberOfGroups }, (_, i) => /* @__PURE__ */ react.default.createElement(ColumnGroup, {
+	key: i,
+	numberOfColumns,
+	groupIndex: i
+}))));
+//#endregion
+//#region src/components/skeleton-loader/SkeletonBarChart.tsx
+var getBarWidth = (rowIndex) => Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55);
+var LegendItem = () => /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-3 rounded-full" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-24 rounded-full" }));
+var SkeletonBarChart = ({ numberOfLabels = 3, numberOfRows = 4, numberOfTicks = 4, className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-6", "flex-col", "gap-6", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-4" }, Array.from({ length: numberOfLabels }, (_, i) => /* @__PURE__ */ react.default.createElement(LegendItem, { key: i }))), /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col justify-between gap-4" }, Array.from({ length: numberOfRows }, (_, i) => /* @__PURE__ */ react.default.createElement("div", {
+	key: i,
+	className: "flex items-center gap-5"
+}, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-3 w-20 shrink-0 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	className: "h-5 w-(--width) rounded-full",
+	style: { "--width": `${getBarWidth(i)}%` }
+})))), /* @__PURE__ */ react.default.createElement("div", { className: "flex justify-between pl-24" }, Array.from({ length: numberOfTicks }, (_, i) => /* @__PURE__ */ react.default.createElement(SkeletonLoader, {
+	key: i,
+	className: "h-2 w-8 rounded-full"
+})))));
+//#endregion
+//#region src/components/skeleton-loader/SkeletonPanelList.tsx
+var SkeletonPanelList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("px-6", "flex-col", "w-full", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 rounded-full" }), /* @__PURE__ */ react.default.createElement("div", { className: "grow" }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-4 w-2/3 rounded-full" })), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-8 w-28 rounded-md" })));
+//#endregion
+//#region src/components/skeleton-loader/SkeletonSubjectList.tsx
+var SkeletonSubjectList = ({ className }) => /* @__PURE__ */ react.default.createElement(Tile, { className: (0, clsx.default)("p-2", "flex-row", "flex-wrap", "items-center", "justify-between", "gap-4", "w-full", className) }, /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "h-22 max-w-xl grow rounded-xl" }), /* @__PURE__ */ react.default.createElement(SkeletonLoader, { className: "size-10 shrink-0 rounded-md" }));
+//#endregion
 //#region src/components/skeleton-loader/index.ts
 var skeleton_loader_exports = /* @__PURE__ */ __exportAll({
+	BarChart: () => SkeletonBarChart,
 	Button: () => SkeletonButton,
 	Card: () => SkeletonCard,
+	ColumnChart: () => SkeletonColumnChart,
 	DoughnutChart: () => SkeletonDoughnutChart,
 	Heading: () => SkeletonHeading,
 	Loader: () => SkeletonLoader,
+	PanelList: () => SkeletonPanelList,
+	SubjectList: () => SkeletonSubjectList,
 	Table: () => SkeletonTable,
 	Tabs: () => SkeletonTabs
 });