@flamingo-stack/openframe-frontend-core 0.0.91 → 0.0.92

package/dist/components/index.cjs

@@ -37112,21 +37112,41 @@ function SearchContainerSkeleton({
   ] });
 }
 function CategorySidebarSkeleton({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: cn("w-full lg:w-[320px] space-y-6", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: "bg-ods-card border border-ods-border rounded-lg p-4 md:p-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(TextSkeleton.Subheading, { className: "mb-4 w-1/2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)("div", { className: "space-y-3", children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(TextSkeleton.Body, { className: "w-3/4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(TextSkeleton.Caption, { className: "w-8" })
-      ] }, index)) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: "bg-ods-card border border-ods-border rounded-lg p-4 md:p-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(TextSkeleton.Subheading, { className: "mb-4 w-1/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)("div", { className: "space-y-2", children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(UnifiedSkeleton, { variant: "default", className: "w-4 h-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(TextSkeleton.Body, { className: "w-2/3" })
-      ] }, index)) })
-    ] })
+  const items = [
+    { type: "file", width: "w-20", hasBadge: false },
+    { type: "folder", width: "w-24", hasBadge: true },
+    { type: "folder", width: "w-20", hasBadge: true },
+    { type: "folder", width: "w-24", hasBadge: true },
+    { type: "folder", width: "w-16", hasBadge: true },
+    { type: "folder", width: "w-20", hasBadge: true },
+    { type: "folder", width: "w-28", hasBadge: true },
+    { type: "folder", width: "w-16", hasBadge: true },
+    { type: "folder", width: "w-24", hasBadge: true },
+    { type: "file", width: "w-28" },
+    { type: "file", width: "w-36" }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: cn("w-full lg:w-[320px]", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(UnifiedSkeleton, { className: "h-[14px] w-24 rounded mb-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)("div", { className: "space-y-1.5", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between py-4 px-4 rounded-lg border border-ods-border min-h-[50px]",
+          index === 0 ? "bg-ods-accent/20" : "bg-ods-card"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(UnifiedSkeleton, { className: "w-4 h-4 shrink-0 rounded" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(UnifiedSkeleton, { className: `h-[14px] ${item.width} rounded` })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2001.jsxs)("div", { className: "flex items-center gap-2 h-[18px]", children: [
+            item.hasBadge && /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(UnifiedSkeleton, { className: "h-[18px] w-14 rounded" }),
+            item.type === "folder" && /* @__PURE__ */ (0, import_jsx_runtime2001.jsx)(UnifiedSkeleton, { className: "w-4 h-4 rounded" })
+          ] })
+        ]
+      },
+      index
+    )) })
   ] });
 }
 function BreadcrumbSkeleton({ className }) {