@kopexa/theme 1.2.0 → 1.4.0

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
@@ -32,36 +33,195 @@ module.exports = __toCommonJS(components_exports);
 
 // src/components/button.ts
 var import_tailwind_variants = require("tailwind-variants");
+
+// src/utils/classes.ts
+var focusVisibleClasses = [
+  "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
+  //"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+];
+
+// src/utils/variants.ts
+var solid = {
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  destructive: "bg-destructive text-destructive-foreground",
+  warning: "bg-warning text-warning-foreground",
+  success: "bg-success text-success-foreground"
+};
+var outline = {
+  primary: "bg-transparent border-primary text-primary",
+  secondary: "bg-transparent border-secondary text-secondary",
+  destructive: "bg-transparent border-destructive text-destructive",
+  warning: "bg-transparent border-warning text-warning",
+  success: "bg-transparent border-success text-success"
+};
+var ghost = {
+  primary: "bg-transparent text-primary",
+  secondary: "bg-transparent text-secondary",
+  destructive: "bg-transparent text-destructive",
+  warning: "bg-transparent text-warning",
+  success: "bg-transparent text-success"
+};
+var colorVariants = {
+  solid,
+  ghost,
+  outline
+};
+
+// src/components/button.ts
 var button = (0, import_tailwind_variants.tv)({
   base: [
-    "relative inline-flex group items-center justify-center select-none",
-    "box-border appearance-none min-w-max subpixel-antialiased overflow-hidden cursor-pointer",
-    "gap-2",
-    "whitespace-nowrap rounded-md transition-all disabled:pointer-events-none disabled:opacity-50",
-    "shrink-0 [&_svg]:shrink-0 outline-none",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+    "group relative inline-flex items-center justify-center select-none",
+    "box-border appearance-none",
+    "whitespace-nowrap min-w-max font-normal subpixel-antialiased",
+    "transform-gpu cursor-pointer hover:opacity-80",
+    ...focusVisibleClasses,
+    // shadcn below
+    "disabled:pointer-events-none disabled:opacity-50",
+    "shrink-0 [&_svg]:shrink-0",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     "text-sm font-medium"
   ],
   variants: {
     variant: {
-      solid: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-      destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-      secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-      link: "text-primary underline-offset-4 hover:underline"
+      solid: "shadow-xs",
+      ghost: "",
+      outline: "border-2 bg-transparent",
+      link: ""
+      // destructive:
+      // 	"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      // outline:
+      // 	"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      // secondary:
+      // 	"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+      // ghost:
+      // 	"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      // link: "text-primary underline-offset-4 hover:underline",
     },
     size: {
-      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-      md: "h-9 px-4 py-2 has-[>svg]:px-3",
-      lg: "h-10 rounded-md px-6 has-[>svg]:px-4"
+      sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5",
+      md: "px-4 min-w-20 h-10 text-sm gap-2 rounded-md has-[>svg]:px-3",
+      lg: "px-6 min-w-24 h-12 text-base gap-3 rounded-lg has-[>svg]:px-4"
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      destructive: "",
+      warning: "",
+      success: ""
+    },
+    radius: {},
+    fullWidth: {
+      true: "w-full"
+    },
+    isIconOnly: {
+      true: "px-0 !gap-0",
+      false: "[&>svg]:max-w-[theme(spacing.8)]"
     }
   },
   defaultVariants: {
+    size: "md",
     variant: "solid",
-    size: "sm"
-  }
+    color: "primary",
+    fullWidth: false,
+    isIconOnly: false
+  },
+  compoundVariants: [
+    // primary color
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "destructive",
+      class: colorVariants.solid.destructive
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    // ghost color
+    {
+      variant: "ghost",
+      color: "primary",
+      class: colorVariants.ghost.primary
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: colorVariants.ghost.secondary
+    },
+    {
+      variant: "ghost",
+      color: "destructive",
+      class: colorVariants.ghost.destructive
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: colorVariants.ghost.warning
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: colorVariants.ghost.success
+    },
+    // outline color
+    {
+      variant: "outline",
+      color: "primary",
+      class: colorVariants.outline.primary
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: colorVariants.outline.secondary
+    },
+    {
+      variant: "outline",
+      color: "destructive",
+      class: colorVariants.outline.destructive
+    },
+    {
+      variant: "outline",
+      color: "warning",
+      class: colorVariants.outline.warning
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: colorVariants.outline.success
+    },
+    // icon
+    {
+      isIconOnly: true,
+      size: "sm",
+      class: "min-w-8 w-8 h-8 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5"
+    },
+    {
+      isIconOnly: true,
+      size: "md",
+      class: "min-w-10 w-10 h-10 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    },
+    {
+      isIconOnly: true,
+      size: "lg",
+      class: "min-w-12 w-12 h-12 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5"
+    }
+  ]
 });
 
 // src/components/command.ts
@@ -77,7 +237,10 @@ var command = (0, import_tailwind_variants2.tv)({
     group: "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
     separator: "bg-border -mx-1 h-px",
     item: "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest"
+    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest",
+    header: "flex flex-col items-start justify-between px-3 py-2 border-b",
+    title: "text-sm font-semibold",
+    description: "text-xs text-muted-foreground"
   }
 });
 
@@ -253,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-0.5rem)]",
+      "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",
@@ -266,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",
@@ -377,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",
@@ -394,6 +655,7 @@ var tooltip = (0, import_tailwind_variants7.tv)({
   command,
   dialog,
   drawer,
+  pageLayout,
   popover,
   spinner,
   tooltip

package/dist/components/index.mjs

@@ -1,30 +1,36 @@
-import "../chunk-QIGSYUIX.mjs";
+import "../chunk-ZKEY52ZF.mjs";
+import {
+  spinner
+} from "../chunk-IL3JFLE2.mjs";
 import {
   tooltip
 } from "../chunk-SVCFD7RR.mjs";
 import {
   button
-} from "../chunk-GSHMDS47.mjs";
+} from "../chunk-E5AF4JZZ.mjs";
+import "../chunk-HQ27V5V4.mjs";
+import "../chunk-U6ONJKJY.mjs";
 import {
   command
-} from "../chunk-EOML76MT.mjs";
+} from "../chunk-YPHFKGNI.mjs";
 import {
   drawer
 } from "../chunk-V74N5X6Z.mjs";
 import {
   dialog
 } from "../chunk-OEVKY5EP.mjs";
+import {
+  pageLayout
+} from "../chunk-GWY5N4AY.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 };