@kopexa/theme 1.3.0 → 1.4.1

package/dist/chunk-GQV7INYX.mjs

@@ -0,0 +1,101 @@
+// src/components/page-layout.ts
+import { tv } from "tailwind-variants";
+var pageLayout = tv({
+  slots: {
+    root: "",
+    wrapper: "flex mx-auto flex-wrap",
+    baseContent: "flex flex-1 flex-wrap max-w-full",
+    header: "w-full",
+    footerWrapper: "w-full",
+    footerContent: "",
+    paneWrapper: [
+      "flex w-full mx-auto",
+      // order start + mt-6
+      "data-[position=start]:flex-col",
+      // order? + mb-6
+      "data-[position=end]:flex-col-reverse",
+      // md+
+      "md:w-auto md:mt-0 md:mb-0",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
+      "md:data-[position=end]:flex-row-reverse",
+      "md:data-[position=start]:flex-row"
+    ],
+    pane: "w-[var(--pane-width-size)] md:overflow-auto",
+    contentWrapper: "flex min-w-px flex-col basis-0 grow shrink",
+    content: "w-full mx-auto grow"
+  },
+  variants: {
+    gap: {
+      none: "",
+      condensed: {
+        header: "mb-4",
+        footerWrapper: "mt-4",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-4",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-4"
+        ]
+      },
+      normal: {
+        header: "mb-4 lg:mb-6",
+        footerWrapper: "mt-4 lg:mt-6",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-6",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-6"
+        ]
+      }
+    },
+    width: {
+      full: {
+        wrapper: "max-w-full",
+        content: "max-w-full"
+      },
+      md: {
+        wrapper: "max-w-3xl",
+        content: "max-w-3xl"
+      },
+      lg: {
+        wrapper: "max-w-5xl"
+      },
+      xl: {
+        wrapper: "max-w-7xl",
+        content: "max-w-7xl"
+      }
+    },
+    paneWidth: {
+      sm: {
+        pane: "w-full md:w-60 lg:w-64"
+      },
+      md: {
+        pane: "w-full md:w-64 lg:w-74"
+      },
+      lg: {
+        pane: "w-full md:w-72 lg:w-80"
+      }
+    },
+    spacing: {
+      none: "",
+      condensed: {
+        header: "p-4",
+        content: "p-4",
+        pane: "p-4",
+        footerContent: "p-4"
+      },
+      // 1.5rem
+      normal: {
+        header: "p-4 md:p-6",
+        content: "p-4 md:p-6",
+        pane: "p-4 md:p-6"
+      }
+    }
+  },
+  defaultVariants: {
+    width: "xl",
+    spacing: "normal",
+    paneWidth: "md",
+    gap: "normal"
+  }
+});
+
+export {
+  pageLayout
+};

package/dist/components/index.d.mts

@@ -2,6 +2,7 @@ export { ButtonVariantProps, button } from './button.mjs';
 export { CommandVariants, command } from './command.mjs';
 export { DialogSlots, DialogVariantProps, dialog } from './dialog.mjs';
 export { DrawerVariantProps, drawer } from './drawer.mjs';
+export { PageLayoutVariantProps, pageLayout } from './page-layout.mjs';
 export { PopoverVariants, popover } from './popover.mjs';
 export { SpinnerVariants, spinner } from './spinner.mjs';
 export { TooltipVariants, tooltip } from './tooltip.mjs';

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { ButtonVariantProps, button } from './button.js';
 export { CommandVariants, command } from './command.js';
 export { DialogSlots, DialogVariantProps, dialog } from './dialog.js';
 export { DrawerVariantProps, drawer } from './drawer.js';
+export { PageLayoutVariantProps, pageLayout } from './page-layout.js';
 export { PopoverVariants, popover } from './popover.js';
 export { SpinnerVariants, spinner } from './spinner.js';
 export { TooltipVariants, tooltip } from './tooltip.js';

package/dist/components/index.js

@@ -24,6 +24,7 @@ __export(components_exports, {
   command: () => command,
   dialog: () => dialog,
   drawer: () => drawer,
+  pageLayout: () => pageLayout,
   popover: () => popover,
   spinner: () => spinner,
   tooltip: () => tooltip
@@ -415,9 +416,107 @@ var drawer = (0, import_tailwind_variants4.tv)({
   }
 });
 
-// src/components/popover.ts
+// src/components/page-layout.ts
 var import_tailwind_variants5 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants5.tv)({
+var pageLayout = (0, import_tailwind_variants5.tv)({
+  slots: {
+    root: "",
+    wrapper: "flex mx-auto flex-wrap",
+    baseContent: "flex flex-1 flex-wrap max-w-full",
+    header: "w-full",
+    footerWrapper: "w-full",
+    footerContent: "",
+    paneWrapper: [
+      "flex w-full mx-auto",
+      // order start + mt-6
+      "data-[position=start]:flex-col",
+      // order? + mb-6
+      "data-[position=end]:flex-col-reverse",
+      // md+
+      "md:w-auto md:mt-0 md:mb-0",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
+      "md:data-[position=end]:flex-row-reverse",
+      "md:data-[position=start]:flex-row"
+    ],
+    pane: "w-[var(--pane-width-size)] md:overflow-auto",
+    contentWrapper: "flex min-w-px flex-col basis-0 grow shrink",
+    content: "w-full mx-auto grow"
+  },
+  variants: {
+    gap: {
+      none: "",
+      condensed: {
+        header: "mb-4",
+        footerWrapper: "mt-4",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-4",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-4"
+        ]
+      },
+      normal: {
+        header: "mb-4 lg:mb-6",
+        footerWrapper: "mt-4 lg:mt-6",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-6",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-6"
+        ]
+      }
+    },
+    width: {
+      full: {
+        wrapper: "max-w-full",
+        content: "max-w-full"
+      },
+      md: {
+        wrapper: "max-w-3xl",
+        content: "max-w-3xl"
+      },
+      lg: {
+        wrapper: "max-w-5xl"
+      },
+      xl: {
+        wrapper: "max-w-7xl",
+        content: "max-w-7xl"
+      }
+    },
+    paneWidth: {
+      sm: {
+        pane: "w-full md:w-60 lg:w-64"
+      },
+      md: {
+        pane: "w-full md:w-64 lg:w-74"
+      },
+      lg: {
+        pane: "w-full md:w-72 lg:w-80"
+      }
+    },
+    spacing: {
+      none: "",
+      condensed: {
+        header: "p-4",
+        content: "p-4",
+        pane: "p-4",
+        footerContent: "p-4"
+      },
+      // 1.5rem
+      normal: {
+        header: "p-4 md:p-6",
+        content: "p-4 md:p-6",
+        pane: "p-4 md:p-6"
+      }
+    }
+  },
+  defaultVariants: {
+    width: "xl",
+    spacing: "normal",
+    paneWidth: "md",
+    gap: "normal"
+  }
+});
+
+// src/components/popover.ts
+var import_tailwind_variants6 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants6.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -428,8 +527,8 @@ var popover = (0, import_tailwind_variants5.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants6 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants7 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants7.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -539,8 +638,8 @@ var spinner = (0, import_tailwind_variants6.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants7 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants7.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants8.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -556,6 +655,7 @@ var tooltip = (0, import_tailwind_variants7.tv)({
   command,
   dialog,
   drawer,
+  pageLayout,
   popover,
   spinner,
   tooltip

package/dist/components/index.mjs

@@ -1,4 +1,7 @@
-import "../chunk-QIGSYUIX.mjs";
+import "../chunk-ZKEY52ZF.mjs";
+import {
+  spinner
+} from "../chunk-IL3JFLE2.mjs";
 import {
   tooltip
 } from "../chunk-SVCFD7RR.mjs";
@@ -16,17 +19,18 @@ import {
 import {
   dialog
 } from "../chunk-OEVKY5EP.mjs";
+import {
+  pageLayout
+} from "../chunk-GQV7INYX.mjs";
 import {
   popover
 } from "../chunk-J35D7RWA.mjs";
-import {
-  spinner
-} from "../chunk-IL3JFLE2.mjs";
 export {
   button,
   command,
   dialog,
   drawer,
+  pageLayout,
   popover,
   spinner,
   tooltip

package/dist/components/page-layout.d.mts

@@ -0,0 +1,208 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const pageLayout: tailwind_variants.TVReturnType<{
+    gap: {
+        none: string;
+        condensed: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+        normal: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+    };
+    width: {
+        full: {
+            wrapper: string;
+            content: string;
+        };
+        md: {
+            wrapper: string;
+            content: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+        xl: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    paneWidth: {
+        sm: {
+            pane: string;
+        };
+        md: {
+            pane: string;
+        };
+        lg: {
+            pane: string;
+        };
+    };
+    spacing: {
+        none: string;
+        condensed: {
+            header: string;
+            content: string;
+            pane: string;
+            footerContent: string;
+        };
+        normal: {
+            header: string;
+            content: string;
+            pane: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    baseContent: string;
+    header: string;
+    footerWrapper: string;
+    footerContent: string;
+    paneWrapper: string[];
+    pane: string;
+    contentWrapper: string;
+    content: string;
+}, undefined, {
+    gap: {
+        none: string;
+        condensed: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+        normal: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+    };
+    width: {
+        full: {
+            wrapper: string;
+            content: string;
+        };
+        md: {
+            wrapper: string;
+            content: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+        xl: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    paneWidth: {
+        sm: {
+            pane: string;
+        };
+        md: {
+            pane: string;
+        };
+        lg: {
+            pane: string;
+        };
+    };
+    spacing: {
+        none: string;
+        condensed: {
+            header: string;
+            content: string;
+            pane: string;
+            footerContent: string;
+        };
+        normal: {
+            header: string;
+            content: string;
+            pane: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    baseContent: string;
+    header: string;
+    footerWrapper: string;
+    footerContent: string;
+    paneWrapper: string[];
+    pane: string;
+    contentWrapper: string;
+    content: string;
+}, tailwind_variants.TVReturnType<{
+    gap: {
+        none: string;
+        condensed: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+        normal: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+    };
+    width: {
+        full: {
+            wrapper: string;
+            content: string;
+        };
+        md: {
+            wrapper: string;
+            content: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+        xl: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    paneWidth: {
+        sm: {
+            pane: string;
+        };
+        md: {
+            pane: string;
+        };
+        lg: {
+            pane: string;
+        };
+    };
+    spacing: {
+        none: string;
+        condensed: {
+            header: string;
+            content: string;
+            pane: string;
+            footerContent: string;
+        };
+        normal: {
+            header: string;
+            content: string;
+            pane: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    baseContent: string;
+    header: string;
+    footerWrapper: string;
+    footerContent: string;
+    paneWrapper: string[];
+    pane: string;
+    contentWrapper: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+type PageLayoutVariantProps = VariantProps<typeof pageLayout>;
+
+export { type PageLayoutVariantProps, pageLayout };

package/dist/components/page-layout.d.ts

@@ -0,0 +1,208 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const pageLayout: tailwind_variants.TVReturnType<{
+    gap: {
+        none: string;
+        condensed: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+        normal: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+    };
+    width: {
+        full: {
+            wrapper: string;
+            content: string;
+        };
+        md: {
+            wrapper: string;
+            content: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+        xl: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    paneWidth: {
+        sm: {
+            pane: string;
+        };
+        md: {
+            pane: string;
+        };
+        lg: {
+            pane: string;
+        };
+    };
+    spacing: {
+        none: string;
+        condensed: {
+            header: string;
+            content: string;
+            pane: string;
+            footerContent: string;
+        };
+        normal: {
+            header: string;
+            content: string;
+            pane: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    baseContent: string;
+    header: string;
+    footerWrapper: string;
+    footerContent: string;
+    paneWrapper: string[];
+    pane: string;
+    contentWrapper: string;
+    content: string;
+}, undefined, {
+    gap: {
+        none: string;
+        condensed: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+        normal: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+    };
+    width: {
+        full: {
+            wrapper: string;
+            content: string;
+        };
+        md: {
+            wrapper: string;
+            content: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+        xl: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    paneWidth: {
+        sm: {
+            pane: string;
+        };
+        md: {
+            pane: string;
+        };
+        lg: {
+            pane: string;
+        };
+    };
+    spacing: {
+        none: string;
+        condensed: {
+            header: string;
+            content: string;
+            pane: string;
+            footerContent: string;
+        };
+        normal: {
+            header: string;
+            content: string;
+            pane: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    baseContent: string;
+    header: string;
+    footerWrapper: string;
+    footerContent: string;
+    paneWrapper: string[];
+    pane: string;
+    contentWrapper: string;
+    content: string;
+}, tailwind_variants.TVReturnType<{
+    gap: {
+        none: string;
+        condensed: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+        normal: {
+            header: string;
+            footerWrapper: string;
+            paneWrapper: string[];
+        };
+    };
+    width: {
+        full: {
+            wrapper: string;
+            content: string;
+        };
+        md: {
+            wrapper: string;
+            content: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+        xl: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    paneWidth: {
+        sm: {
+            pane: string;
+        };
+        md: {
+            pane: string;
+        };
+        lg: {
+            pane: string;
+        };
+    };
+    spacing: {
+        none: string;
+        condensed: {
+            header: string;
+            content: string;
+            pane: string;
+            footerContent: string;
+        };
+        normal: {
+            header: string;
+            content: string;
+            pane: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    baseContent: string;
+    header: string;
+    footerWrapper: string;
+    footerContent: string;
+    paneWrapper: string[];
+    pane: string;
+    contentWrapper: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+type PageLayoutVariantProps = VariantProps<typeof pageLayout>;
+
+export { type PageLayoutVariantProps, pageLayout };

package/dist/components/page-layout.js

@@ -0,0 +1,125 @@
+"use strict";
+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/page-layout.ts
+var page_layout_exports = {};
+__export(page_layout_exports, {
+  pageLayout: () => pageLayout
+});
+module.exports = __toCommonJS(page_layout_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants.tv)({
+  slots: {
+    root: "",
+    wrapper: "flex mx-auto flex-wrap",
+    baseContent: "flex flex-1 flex-wrap max-w-full",
+    header: "w-full",
+    footerWrapper: "w-full",
+    footerContent: "",
+    paneWrapper: [
+      "flex w-full mx-auto",
+      // order start + mt-6
+      "data-[position=start]:flex-col",
+      // order? + mb-6
+      "data-[position=end]:flex-col-reverse",
+      // md+
+      "md:w-auto md:mt-0 md:mb-0",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
+      "md:data-[position=end]:flex-row-reverse",
+      "md:data-[position=start]:flex-row"
+    ],
+    pane: "w-[var(--pane-width-size)] md:overflow-auto",
+    contentWrapper: "flex min-w-px flex-col basis-0 grow shrink",
+    content: "w-full mx-auto grow"
+  },
+  variants: {
+    gap: {
+      none: "",
+      condensed: {
+        header: "mb-4",
+        footerWrapper: "mt-4",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-4",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-4"
+        ]
+      },
+      normal: {
+        header: "mb-4 lg:mb-6",
+        footerWrapper: "mt-4 lg:mt-6",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-6",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-6"
+        ]
+      }
+    },
+    width: {
+      full: {
+        wrapper: "max-w-full",
+        content: "max-w-full"
+      },
+      md: {
+        wrapper: "max-w-3xl",
+        content: "max-w-3xl"
+      },
+      lg: {
+        wrapper: "max-w-5xl"
+      },
+      xl: {
+        wrapper: "max-w-7xl",
+        content: "max-w-7xl"
+      }
+    },
+    paneWidth: {
+      sm: {
+        pane: "w-full md:w-60 lg:w-64"
+      },
+      md: {
+        pane: "w-full md:w-64 lg:w-74"
+      },
+      lg: {
+        pane: "w-full md:w-72 lg:w-80"
+      }
+    },
+    spacing: {
+      none: "",
+      condensed: {
+        header: "p-4",
+        content: "p-4",
+        pane: "p-4",
+        footerContent: "p-4"
+      },
+      // 1.5rem
+      normal: {
+        header: "p-4 md:p-6",
+        content: "p-4 md:p-6",
+        pane: "p-4 md:p-6"
+      }
+    }
+  },
+  defaultVariants: {
+    width: "xl",
+    spacing: "normal",
+    paneWidth: "md",
+    gap: "normal"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pageLayout
+});

package/dist/components/page-layout.mjs

@@ -0,0 +1,6 @@
+import {
+  pageLayout
+} from "../chunk-GQV7INYX.mjs";
+export {
+  pageLayout
+};

package/dist/index.d.mts

@@ -3,6 +3,7 @@ export { ButtonVariantProps, button } from './components/button.mjs';
 export { CommandVariants, command } from './components/command.mjs';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.mjs';
 export { DrawerVariantProps, drawer } from './components/drawer.mjs';
+export { PageLayoutVariantProps, pageLayout } from './components/page-layout.mjs';
 export { PopoverVariants, popover } from './components/popover.mjs';
 export { SpinnerVariants, spinner } from './components/spinner.mjs';
 export { TooltipVariants, tooltip } from './components/tooltip.mjs';

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { ButtonVariantProps, button } from './components/button.js';
 export { CommandVariants, command } from './components/command.js';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.js';
 export { DrawerVariantProps, drawer } from './components/drawer.js';
+export { PageLayoutVariantProps, pageLayout } from './components/page-layout.js';
 export { PopoverVariants, popover } from './components/popover.js';
 export { SpinnerVariants, spinner } from './components/spinner.js';
 export { TooltipVariants, tooltip } from './components/tooltip.js';

package/dist/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   command: () => command,
   dialog: () => dialog,
   drawer: () => drawer,
+  pageLayout: () => pageLayout,
   popover: () => popover,
   spinner: () => spinner,
   tooltip: () => tooltip
@@ -415,9 +416,107 @@ var drawer = (0, import_tailwind_variants4.tv)({
   }
 });
 
-// src/components/popover.ts
+// src/components/page-layout.ts
 var import_tailwind_variants5 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants5.tv)({
+var pageLayout = (0, import_tailwind_variants5.tv)({
+  slots: {
+    root: "",
+    wrapper: "flex mx-auto flex-wrap",
+    baseContent: "flex flex-1 flex-wrap max-w-full",
+    header: "w-full",
+    footerWrapper: "w-full",
+    footerContent: "",
+    paneWrapper: [
+      "flex w-full mx-auto",
+      // order start + mt-6
+      "data-[position=start]:flex-col",
+      // order? + mb-6
+      "data-[position=end]:flex-col-reverse",
+      // md+
+      "md:w-auto md:mt-0 md:mb-0",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
+      "md:data-[position=end]:flex-row-reverse",
+      "md:data-[position=start]:flex-row"
+    ],
+    pane: "w-[var(--pane-width-size)] md:overflow-auto",
+    contentWrapper: "flex min-w-px flex-col basis-0 grow shrink",
+    content: "w-full mx-auto grow"
+  },
+  variants: {
+    gap: {
+      none: "",
+      condensed: {
+        header: "mb-4",
+        footerWrapper: "mt-4",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-4",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-4"
+        ]
+      },
+      normal: {
+        header: "mb-4 lg:mb-6",
+        footerWrapper: "mt-4 lg:mt-6",
+        paneWrapper: [
+          "max-md:data-[position=start]:mb-4 md:data-[position=start]:mr-6",
+          "max-md:data-[position=end]:mt-4 md:data-[position=end]:ml-6"
+        ]
+      }
+    },
+    width: {
+      full: {
+        wrapper: "max-w-full",
+        content: "max-w-full"
+      },
+      md: {
+        wrapper: "max-w-3xl",
+        content: "max-w-3xl"
+      },
+      lg: {
+        wrapper: "max-w-5xl"
+      },
+      xl: {
+        wrapper: "max-w-7xl",
+        content: "max-w-7xl"
+      }
+    },
+    paneWidth: {
+      sm: {
+        pane: "w-full md:w-60 lg:w-64"
+      },
+      md: {
+        pane: "w-full md:w-64 lg:w-74"
+      },
+      lg: {
+        pane: "w-full md:w-72 lg:w-80"
+      }
+    },
+    spacing: {
+      none: "",
+      condensed: {
+        header: "p-4",
+        content: "p-4",
+        pane: "p-4",
+        footerContent: "p-4"
+      },
+      // 1.5rem
+      normal: {
+        header: "p-4 md:p-6",
+        content: "p-4 md:p-6",
+        pane: "p-4 md:p-6"
+      }
+    }
+  },
+  defaultVariants: {
+    width: "xl",
+    spacing: "normal",
+    paneWidth: "md",
+    gap: "normal"
+  }
+});
+
+// src/components/popover.ts
+var import_tailwind_variants6 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants6.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -428,8 +527,8 @@ var popover = (0, import_tailwind_variants5.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants6 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants7 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants7.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -539,8 +638,8 @@ var spinner = (0, import_tailwind_variants6.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants7 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants7.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants8.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -556,6 +655,7 @@ var tooltip = (0, import_tailwind_variants7.tv)({
   command,
   dialog,
   drawer,
+  pageLayout,
   popover,
   spinner,
   tooltip

package/dist/index.mjs

@@ -1,4 +1,7 @@
-import "./chunk-QIGSYUIX.mjs";
+import "./chunk-ZKEY52ZF.mjs";
+import {
+  spinner
+} from "./chunk-IL3JFLE2.mjs";
 import {
   tooltip
 } from "./chunk-SVCFD7RR.mjs";
@@ -16,17 +19,18 @@ import {
 import {
   dialog
 } from "./chunk-OEVKY5EP.mjs";
+import {
+  pageLayout
+} from "./chunk-GQV7INYX.mjs";
 import {
   popover
 } from "./chunk-J35D7RWA.mjs";
-import {
-  spinner
-} from "./chunk-IL3JFLE2.mjs";
 export {
   button,
   command,
   dialog,
   drawer,
+  pageLayout,
   popover,
   spinner,
   tooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",