ai-design-system 0.1.30 → 0.1.31

package/components/composites/LoadingShimmer/LoadingShimmer.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { Shimmer } from "@/components/ai-elements/shimmer"
+import { cn } from "@/lib/utils"
+import type { LoadingShimmerProps } from "./interfaces"
+
+export const LoadingShimmer = React.memo<LoadingShimmerProps>(({ message = "Loading...", className }) => {
+  return (
+    <div className={cn("flex h-full min-h-0 flex-1 items-center justify-center px-6 py-10", className)}>
+      <div className="w-full max-w-3xl space-y-5">
+        <Shimmer className="text-sm text-muted-foreground">{message}</Shimmer>
+        <div className="space-y-3">
+          <div className="h-10 w-1/3 animate-pulse rounded-md bg-muted/70" />
+          <div className="h-24 w-full animate-pulse rounded-xl bg-muted/60" />
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
+            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+LoadingShimmer.displayName = "LoadingShimmer"

package/components/composites/LoadingShimmer/index.ts

@@ -0,0 +1,2 @@
+export { LoadingShimmer } from './LoadingShimmer'
+export type { LoadingShimmerProps } from './interfaces'

package/components/composites/LoadingShimmer/interfaces.ts

@@ -0,0 +1,4 @@
+export interface LoadingShimmerProps {
+  message?: string
+  className?: string
+}

package/components/composites/index.ts

@@ -118,6 +118,10 @@ export * from './AdjustableLayout'
 export * from './PageContainer'
 export type { PageContainerProps } from './PageContainer'
 
+// LoadingShimmer Composite
+export { LoadingShimmer } from './LoadingShimmer'
+export type { LoadingShimmerProps } from './LoadingShimmer'
+
 // StateNode Composite
 export { StateNode } from './StateNode'
 export type { StateNodeData } from './StateNode'

package/components/features/PageLayout/PageLayout.tsx

@@ -4,26 +4,11 @@ import { LayoutProvider } from "@/components/blocks/LayoutProvider"
 import { SectionLayout } from "@/components/blocks/SectionLayout/SectionLayout"
 import type { SectionLayoutSection } from "@/components/blocks/SectionLayout/interfaces"
 import { AppHeader, type AppHeaderProps } from "@/components/composites/AppHeader"
+import { LoadingShimmer } from "@/components/composites/LoadingShimmer"
 import { PageContainer } from "@/components/composites/PageContainer"
 
 function PageLayoutLoadingState({ message }: { message: string }) {
-  return (
-    <div className="flex h-full min-h-0 flex-1 items-center justify-center px-6 py-10">
-      <div className="w-full max-w-3xl space-y-5">
-        <div className="inline-flex w-fit animate-pulse rounded-md bg-muted px-3 py-1 text-sm text-muted-foreground">
-          {message}
-        </div>
-        <div className="space-y-3">
-          <div className="h-10 w-1/3 animate-pulse rounded-md bg-muted/70" />
-          <div className="h-24 w-full animate-pulse rounded-xl bg-muted/60" />
-          <div className="grid gap-3 md:grid-cols-2">
-            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
-            <div className="h-36 animate-pulse rounded-xl bg-muted/55" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+  return <LoadingShimmer message={message} />
 }
 
 /**
@@ -181,17 +166,13 @@ export const PageLayout = React.memo<PageLayoutProps>(
       </PageContainer>
     )
 
-    if (!sidebar) {
-      return pageContainer
-    }
-
     return (
       <LayoutProvider
         defaultOpen={defaultSidebarOpen}
         sidebarWidth={sidebarWidth}
         sidebarWidthIcon={sidebarWidthIcon}
       >
-        <AppSidebar {...sidebar} />
+        {sidebar ? <AppSidebar {...sidebar} /> : null}
         {pageContainer}
       </LayoutProvider>
     )

package/dist/index.cjs

@@ -12,9 +12,9 @@ var AvatarPrimitive = require('@radix-ui/react-avatar');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var lucideReact = require('lucide-react');
 var TabsPrimitive = require('@radix-ui/react-tabs');
+var react$1 = require('motion/react');
 var useStickToBottom = require('use-stick-to-bottom');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
-var react$1 = require('motion/react');
 var shiki = require('shiki');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var cmdk = require('cmdk');
@@ -1667,13 +1667,46 @@ var SectionLayout = React3__namespace.memo(
   }
 );
 SectionLayout.displayName = "SectionLayout";
-var PageContainer = React3__namespace.memo(({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarInset2, { className, children });
-});
-PageContainer.displayName = "PageContainer";
-function PageLayoutLoadingState({ message }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-0 flex-1 items-center justify-center px-6 py-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl space-y-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex w-fit animate-pulse rounded-md bg-muted px-3 py-1 text-sm text-muted-foreground", children: message }),
+var ShimmerComponent = ({
+  children,
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const dynamicSpread = React3.useMemo(
+    () => {
+      var _a;
+      return ((_a = children == null ? void 0 : children.length) != null ? _a : 0) * spread;
+    },
+    [children, spread]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.p,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-size-[250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: {
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear"
+      },
+      children
+    }
+  );
+};
+var Shimmer = React3.memo(ShimmerComponent);
+var LoadingShimmer = React3__namespace.memo(({ message = "Loading...", className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-full min-h-0 flex-1 items-center justify-center px-6 py-10", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl space-y-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Shimmer, { className: "text-sm text-muted-foreground", children: message }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-1/3 animate-pulse rounded-md bg-muted/70" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 w-full animate-pulse rounded-xl bg-muted/60" }),
@@ -1683,6 +1716,14 @@ function PageLayoutLoadingState({ message }) {
       ] })
     ] })
   ] }) });
+});
+LoadingShimmer.displayName = "LoadingShimmer";
+var PageContainer = React3__namespace.memo(({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarInset2, { className, children });
+});
+PageContainer.displayName = "PageContainer";
+function PageLayoutLoadingState({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(LoadingShimmer, { message });
 }
 var PageLayout = React3__namespace.memo(
   ({
@@ -1717,9 +1758,6 @@ var PageLayout = React3__namespace.memo(
       /* @__PURE__ */ jsxRuntime.jsx(AppHeader, __spreadValues({}, header)),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`, children: contentArea })
     ] });
-    if (!sidebar) {
-      return pageContainer;
-    }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       LayoutProvider,
       {
@@ -1727,7 +1765,7 @@ var PageLayout = React3__namespace.memo(
         sidebarWidth,
         sidebarWidthIcon,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AppSidebar, __spreadValues({}, sidebar)),
+          sidebar ? /* @__PURE__ */ jsxRuntime.jsx(AppSidebar, __spreadValues({}, sidebar)) : null,
           pageContainer
         ]
       }
@@ -2015,43 +2053,6 @@ function CollapsibleContent2(_a) {
     }, props)
   );
 }
-var ShimmerComponent = ({
-  children,
-  className,
-  duration = 2,
-  spread = 2
-}) => {
-  const dynamicSpread = React3.useMemo(
-    () => {
-      var _a;
-      return ((_a = children == null ? void 0 : children.length) != null ? _a : 0) * spread;
-    },
-    [children, spread]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.motion.p,
-    {
-      animate: { backgroundPosition: "0% center" },
-      className: cn(
-        "relative inline-block bg-size-[250%_100%,auto] bg-clip-text text-transparent",
-        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-        className
-      ),
-      initial: { backgroundPosition: "100% center" },
-      style: {
-        "--spread": `${dynamicSpread}px`,
-        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
-      },
-      transition: {
-        repeat: Number.POSITIVE_INFINITY,
-        duration,
-        ease: "linear"
-      },
-      children
-    }
-  );
-};
-var Shimmer = React3.memo(ShimmerComponent);
 var PlanContext = React3.createContext(null);
 var usePlan = () => {
   const context = React3.useContext(PlanContext);