@kopexa/theme 1.6.10 → 1.7.0

package/dist/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   alertDialog: () => alertDialog,
   avatar: () => avatar,
   avatarGroup: () => avatarGroup,
+  blankstate: () => blankstate,
   button: () => button,
   calendar: () => calendar,
   callout: () => callout,
@@ -53,6 +54,7 @@ __export(index_exports, {
   sidebarMenuAction: () => sidebarMenuAction,
   sidebarMenuButton: () => sidebarMenuButton,
   skeleton: () => skeleton,
+  skeletonAvatar: () => skeletonAvatar,
   spinner: () => spinner,
   splitPageLayout: () => splitPageLayout,
   tabNav: () => tabNav,
@@ -267,6 +269,12 @@ var avatar = (0, import_tailwind_variants3.tv)({
   },
   variants: {
     size: {
+      "2xs": {
+        root: "w-4 h-4 text-[8px]"
+      },
+      xs: {
+        root: "w-6 h-6 text-[10px]"
+      },
       sm: {
         root: "w-8 h-8 text-[11px]"
       },
@@ -403,9 +411,61 @@ var avatarGroup = (0, import_tailwind_variants4.tv)({
   }
 });
 
-// src/components/button.ts
+// src/components/blankstate.ts
 var import_tailwind_variants5 = require("tailwind-variants");
-var button = (0, import_tailwind_variants5.tv)({
+var blankstate = (0, import_tailwind_variants5.tv)({
+  slots: {
+    root: "@container/blankstate",
+    container: "grid  justify-items-center",
+    icon: "inline-flex mb-2 text-muted-foreground [&_svg]:w-full",
+    title: "mb-1",
+    description: "text-muted-foreground",
+    actions: "my-4 flex items-center gap-2"
+  },
+  variants: {
+    size: {
+      sm: {
+        container: "py-8 px-5",
+        title: "text-h4-core",
+        icon: "[&_svg]:size-6",
+        description: "text-sm"
+      },
+      md: {
+        container: "py-8 px-8",
+        title: "text-h2-core",
+        description: "text-base",
+        icon: "[&_svg]:size-8"
+      },
+      lg: {
+        container: "py-8 px-8",
+        title: "text-h1-core",
+        description: "text-base",
+        icon: "[&_svg]:size-10"
+      }
+    },
+    bordered: {
+      true: {
+        container: "border rounded-lg"
+      },
+      false: {}
+    },
+    narrow: {
+      true: {
+        container: "max-w-md mx-auto"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    bordered: false,
+    narrow: false
+  }
+});
+
+// src/components/button.ts
+var import_tailwind_variants6 = require("tailwind-variants");
+var button = (0, import_tailwind_variants6.tv)({
   base: [
     "group relative inline-flex items-center justify-center select-none",
     "box-border appearance-none",
@@ -552,8 +612,8 @@ var button = (0, import_tailwind_variants5.tv)({
 });
 
 // src/components/calendar.ts
-var import_tailwind_variants6 = require("tailwind-variants");
-var calendar = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants7 = require("tailwind-variants");
+var calendar = (0, import_tailwind_variants7.tv)({
   slots: {
     base: [
       "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
@@ -605,8 +665,8 @@ var calendar = (0, import_tailwind_variants6.tv)({
 });
 
 // src/components/callout.ts
-var import_tailwind_variants7 = require("tailwind-variants");
-var callout = (0, import_tailwind_variants7.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var callout = (0, import_tailwind_variants8.tv)({
   slots: {
     root: ["flex items-start gap-3 w-full", "border", "relative"],
     iconContainer: "flex-shrink-0 mt-0.5",
@@ -674,8 +734,8 @@ var callout = (0, import_tailwind_variants7.tv)({
 });
 
 // src/components/card.ts
-var import_tailwind_variants8 = require("tailwind-variants");
-var card = (0, import_tailwind_variants8.tv)({
+var import_tailwind_variants9 = require("tailwind-variants");
+var card = (0, import_tailwind_variants9.tv)({
   slots: {
     root: [
       "flex flex-col relative h-auto outline-hidden box-border",
@@ -867,8 +927,8 @@ var card = (0, import_tailwind_variants8.tv)({
 });
 
 // src/components/checkbox.ts
-var import_tailwind_variants9 = require("tailwind-variants");
-var checkbox = (0, import_tailwind_variants9.tv)({
+var import_tailwind_variants10 = require("tailwind-variants");
+var checkbox = (0, import_tailwind_variants10.tv)({
   slots: {
     base: [
       "group",
@@ -909,8 +969,8 @@ var checkbox = (0, import_tailwind_variants9.tv)({
 });
 
 // src/components/chip.ts
-var import_tailwind_variants10 = require("tailwind-variants");
-var chip = (0, import_tailwind_variants10.tv)({
+var import_tailwind_variants11 = require("tailwind-variants");
+var chip = (0, import_tailwind_variants11.tv)({
   slots: {
     root: [
       "relative",
@@ -1226,8 +1286,8 @@ var chip = (0, import_tailwind_variants10.tv)({
 });
 
 // src/components/code.ts
-var import_tailwind_variants11 = require("tailwind-variants");
-var code = (0, import_tailwind_variants11.tv)({
+var import_tailwind_variants12 = require("tailwind-variants");
+var code = (0, import_tailwind_variants12.tv)({
   base: [
     "px-2",
     "py-1",
@@ -1267,8 +1327,8 @@ var code = (0, import_tailwind_variants11.tv)({
 });
 
 // src/components/command.ts
-var import_tailwind_variants12 = require("tailwind-variants");
-var command = (0, import_tailwind_variants12.tv)({
+var import_tailwind_variants13 = require("tailwind-variants");
+var command = (0, import_tailwind_variants13.tv)({
   slots: {
     root: "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
     inputWrapper: "flex h-9 items-center gap-2 border-b px-3",
@@ -1287,8 +1347,8 @@ var command = (0, import_tailwind_variants12.tv)({
 });
 
 // src/components/data-table.ts
-var import_tailwind_variants13 = require("tailwind-variants");
-var dataTable = (0, import_tailwind_variants13.tv)({
+var import_tailwind_variants14 = require("tailwind-variants");
+var dataTable = (0, import_tailwind_variants14.tv)({
   slots: {
     base: "relative flex min-h-0 flex-1 flex-col",
     toolbarWrapper: "flex flex-col gap-2 divide-y pb-2",
@@ -1332,8 +1392,8 @@ var dataTable = (0, import_tailwind_variants13.tv)({
 });
 
 // src/components/dialog.ts
-var import_tailwind_variants14 = require("tailwind-variants");
-var dialog = (0, import_tailwind_variants14.tv)({
+var import_tailwind_variants15 = require("tailwind-variants");
+var dialog = (0, import_tailwind_variants15.tv)({
   slots: {
     overlay: [
       "fixed inset-0 z-50 bg-black/25",
@@ -1422,8 +1482,8 @@ var dialog = (0, import_tailwind_variants14.tv)({
 });
 
 // src/components/drawer.ts
-var import_tailwind_variants15 = require("tailwind-variants");
-var drawer = (0, import_tailwind_variants15.tv)({
+var import_tailwind_variants16 = require("tailwind-variants");
+var drawer = (0, import_tailwind_variants16.tv)({
   slots: {
     overlay: dialog.slots.overlay,
     content: [
@@ -1525,8 +1585,8 @@ var drawer = (0, import_tailwind_variants15.tv)({
 });
 
 // src/components/dropdown-menu.ts
-var import_tailwind_variants16 = require("tailwind-variants");
-var dropdownMenu = (0, import_tailwind_variants16.tv)({
+var import_tailwind_variants17 = require("tailwind-variants");
+var dropdownMenu = (0, import_tailwind_variants17.tv)({
   slots: {
     root: "",
     content: "min-w-56 bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
@@ -1546,8 +1606,8 @@ var dropdownMenu = (0, import_tailwind_variants16.tv)({
 });
 
 // src/components/heading.ts
-var import_tailwind_variants17 = require("tailwind-variants");
-var heading = (0, import_tailwind_variants17.tv)({
+var import_tailwind_variants18 = require("tailwind-variants");
+var heading = (0, import_tailwind_variants18.tv)({
   variants: {
     level: {
       h1: "text-h1-core",
@@ -1564,8 +1624,8 @@ var heading = (0, import_tailwind_variants17.tv)({
 });
 
 // src/components/hover-card.ts
-var import_tailwind_variants18 = require("tailwind-variants");
-var hoverCard = (0, import_tailwind_variants18.tv)({
+var import_tailwind_variants19 = require("tailwind-variants");
+var hoverCard = (0, import_tailwind_variants19.tv)({
   slots: {
     content: [
       ...popoverContentClasses,
@@ -1580,14 +1640,14 @@ var hoverCard = (0, import_tailwind_variants18.tv)({
 });
 
 // src/components/input.ts
-var import_tailwind_variants19 = require("tailwind-variants");
-var passwordInput = (0, import_tailwind_variants19.tv)({
+var import_tailwind_variants20 = require("tailwind-variants");
+var passwordInput = (0, import_tailwind_variants20.tv)({
   slots: {
     button: "focus:outline-hidden",
     icon: "pointer-events-none text-muted-foreground"
   }
 });
-var input = (0, import_tailwind_variants19.tv)({
+var input = (0, import_tailwind_variants20.tv)({
   base: [],
   slots: {
     inputWrapper: [
@@ -1668,8 +1728,8 @@ var input = (0, import_tailwind_variants19.tv)({
 });
 
 // src/components/page-header.ts
-var import_tailwind_variants20 = require("tailwind-variants");
-var pageHeader = (0, import_tailwind_variants20.tv)({
+var import_tailwind_variants21 = require("tailwind-variants");
+var pageHeader = (0, import_tailwind_variants21.tv)({
   slots: {
     root: "page-header",
     titleArea: "page-header__title-area flex gap-2 flex-row items-center",
@@ -1704,8 +1764,8 @@ var pageHeader = (0, import_tailwind_variants20.tv)({
 });
 
 // src/components/page-layout.ts
-var import_tailwind_variants21 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants21.tv)({
+var import_tailwind_variants22 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants22.tv)({
   slots: {
     root: "",
     wrapper: "flex flex-wrap w-full",
@@ -1822,8 +1882,8 @@ var pageLayout = (0, import_tailwind_variants21.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants22 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants22.tv)({
+var import_tailwind_variants23 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants23.tv)({
   slots: {
     content: [
       ...popoverContentClasses,
@@ -1834,8 +1894,8 @@ var popover = (0, import_tailwind_variants22.tv)({
 });
 
 // src/components/preview-card.ts
-var import_tailwind_variants23 = require("tailwind-variants");
-var previewCard = (0, import_tailwind_variants23.tv)({
+var import_tailwind_variants24 = require("tailwind-variants");
+var previewCard = (0, import_tailwind_variants24.tv)({
   slots: {
     root: [
       "flex w-full items-start gap-3 rounded-md bg-background p-2 transition-colors",
@@ -1876,8 +1936,8 @@ var previewCard = (0, import_tailwind_variants23.tv)({
 });
 
 // src/components/resizable.ts
-var import_tailwind_variants24 = require("tailwind-variants");
-var resizable = (0, import_tailwind_variants24.tv)({
+var import_tailwind_variants25 = require("tailwind-variants");
+var resizable = (0, import_tailwind_variants25.tv)({
   slots: {
     root: ["flex h-full w-full data-[panel-group-direction=vertical]:flex-col"],
     panel: [],
@@ -1903,8 +1963,8 @@ var resizable = (0, import_tailwind_variants24.tv)({
 });
 
 // src/components/risk-badge.ts
-var import_tailwind_variants25 = require("tailwind-variants");
-var riskBadge = (0, import_tailwind_variants25.tv)({
+var import_tailwind_variants26 = require("tailwind-variants");
+var riskBadge = (0, import_tailwind_variants26.tv)({
   slots: {
     root: ["inline-flex flex-col items-start gap-0.5"],
     label: ["inline-flex items-center gap-0.5 text-xs"],
@@ -1943,8 +2003,8 @@ var riskBadge = (0, import_tailwind_variants25.tv)({
 });
 
 // src/components/risk-indicator.ts
-var import_tailwind_variants26 = require("tailwind-variants");
-var riskIndicator = (0, import_tailwind_variants26.tv)({
+var import_tailwind_variants27 = require("tailwind-variants");
+var riskIndicator = (0, import_tailwind_variants27.tv)({
   slots: {
     base: "flex items-end gap-0.5",
     bar: "rounded-sm",
@@ -1977,8 +2037,8 @@ var riskIndicator = (0, import_tailwind_variants26.tv)({
 });
 
 // src/components/section-row.ts
-var import_tailwind_variants27 = require("tailwind-variants");
-var sectionRow = (0, import_tailwind_variants27.tv)({
+var import_tailwind_variants28 = require("tailwind-variants");
+var sectionRow = (0, import_tailwind_variants28.tv)({
   slots: {
     root: ["grid grid-cols-1 text-base/6 sm:text-sm/6", "w-full"],
     title: [
@@ -2034,8 +2094,8 @@ var sectionRow = (0, import_tailwind_variants27.tv)({
 });
 
 // src/components/separator.ts
-var import_tailwind_variants28 = require("tailwind-variants");
-var separator = (0, import_tailwind_variants28.tv)({
+var import_tailwind_variants29 = require("tailwind-variants");
+var separator = (0, import_tailwind_variants29.tv)({
   base: "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
   variants: {
     orientation: {
@@ -2047,8 +2107,8 @@ var separator = (0, import_tailwind_variants28.tv)({
 });
 
 // src/components/sidebar.ts
-var import_tailwind_variants29 = require("tailwind-variants");
-var sidebar = (0, import_tailwind_variants29.tv)({
+var import_tailwind_variants30 = require("tailwind-variants");
+var sidebar = (0, import_tailwind_variants30.tv)({
   slots: {
     provider: [
       "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full"
@@ -2136,7 +2196,7 @@ var sidebar = (0, import_tailwind_variants29.tv)({
     isMobile: false
   }
 });
-var sidebarMenuButton = (0, import_tailwind_variants29.tv)({
+var sidebarMenuButton = (0, import_tailwind_variants30.tv)({
   base: [
     "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md",
     "p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding]",
@@ -2188,7 +2248,7 @@ var sidebarMenuButton = (0, import_tailwind_variants29.tv)({
     }
   ]
 });
-var sidebarMenuAction = (0, import_tailwind_variants29.tv)({
+var sidebarMenuAction = (0, import_tailwind_variants30.tv)({
   base: [
     "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
@@ -2208,14 +2268,32 @@ var sidebarMenuAction = (0, import_tailwind_variants29.tv)({
 });
 
 // src/components/skeleton.ts
-var import_tailwind_variants30 = require("tailwind-variants");
-var skeleton = (0, import_tailwind_variants30.tv)({
+var import_tailwind_variants31 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants31.tv)({
   base: "bg-accent animate-pulse rounded-md"
 });
 
+// src/components/skeleton-avatar.ts
+var import_tailwind_variants32 = require("tailwind-variants");
+var skeletonAvatar = (0, import_tailwind_variants32.tv)({
+  base: "rounded-full",
+  variants: {
+    size: {
+      "2xs": avatar.variants.size["2xs"].root,
+      xs: avatar.variants.size.xs.root,
+      sm: avatar.variants.size.sm.root,
+      md: avatar.variants.size.md.root,
+      lg: avatar.variants.size.lg.root
+    }
+  },
+  defaultVariants: {
+    size: avatar.defaultVariants.size
+  }
+});
+
 // src/components/spinner.ts
-var import_tailwind_variants31 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants31.tv)({
+var import_tailwind_variants33 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants33.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -2332,8 +2410,8 @@ var spinner = (0, import_tailwind_variants31.tv)({
 });
 
 // src/components/split-page-layout.ts
-var import_tailwind_variants32 = require("tailwind-variants");
-var splitPageLayout = (0, import_tailwind_variants32.tv)({
+var import_tailwind_variants34 = require("tailwind-variants");
+var splitPageLayout = (0, import_tailwind_variants34.tv)({
   slots: {
     root: [
       "size-full min-h-0 grid grid-cols-[1fr_10px] md:grid-cols-3 relative"
@@ -2370,8 +2448,8 @@ var splitPageLayout = (0, import_tailwind_variants32.tv)({
 });
 
 // src/components/tab-nav.ts
-var import_tailwind_variants33 = require("tailwind-variants");
-var tabNav = (0, import_tailwind_variants33.tv)({
+var import_tailwind_variants35 = require("tailwind-variants");
+var tabNav = (0, import_tailwind_variants35.tv)({
   slots: {
     base: "",
     list: [
@@ -2461,8 +2539,8 @@ var tabNav = (0, import_tailwind_variants33.tv)({
 });
 
 // src/components/table.ts
-var import_tailwind_variants34 = require("tailwind-variants");
-var table = (0, import_tailwind_variants34.tv)({
+var import_tailwind_variants36 = require("tailwind-variants");
+var table = (0, import_tailwind_variants36.tv)({
   slots: {
     container: ["overflow-x-auto whitespace-nowrap", "-mx-3 md:-mx-6"],
     wrapper: ["inline-block min-w-full align-middle"],
@@ -2619,8 +2697,8 @@ var table = (0, import_tailwind_variants34.tv)({
 });
 
 // src/components/tabs.ts
-var import_tailwind_variants35 = require("tailwind-variants");
-var tabs = (0, import_tailwind_variants35.tv)({
+var import_tailwind_variants37 = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants37.tv)({
   slots: {
     root: "flex flex-col gap-2",
     list: [
@@ -2657,8 +2735,8 @@ var tabs = (0, import_tailwind_variants35.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants36 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants36.tv)({
+var import_tailwind_variants38 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants38.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -2674,6 +2752,7 @@ var tooltip = (0, import_tailwind_variants36.tv)({
   alertDialog,
   avatar,
   avatarGroup,
+  blankstate,
   button,
   calendar,
   callout,
@@ -2703,6 +2782,7 @@ var tooltip = (0, import_tailwind_variants36.tv)({
   sidebarMenuAction,
   sidebarMenuButton,
   skeleton,
+  skeletonAvatar,
   spinner,
   splitPageLayout,
   tabNav,

package/dist/index.mjs

@@ -1,5 +1,11 @@
 import "./chunk-XSN6P5JL.mjs";
-import "./chunk-N7T6GTBO.mjs";
+import "./chunk-MVXKHHAX.mjs";
+import {
+  skeletonAvatar
+} from "./chunk-LURDY4A5.mjs";
+import {
+  skeleton
+} from "./chunk-VNQEJU4P.mjs";
 import {
   spinner
 } from "./chunk-4UDOCFU5.mjs";
@@ -18,6 +24,9 @@ import {
 import {
   tooltip
 } from "./chunk-SVCFD7RR.mjs";
+import {
+  popover
+} from "./chunk-IKJHZT2S.mjs";
 import {
   previewCard
 } from "./chunk-WPOYEHD2.mjs";
@@ -42,8 +51,8 @@ import {
   sidebarMenuButton
 } from "./chunk-GA6UOB2D.mjs";
 import {
-  skeleton
-} from "./chunk-VNQEJU4P.mjs";
+  drawer
+} from "./chunk-TJDRYBGW.mjs";
 import {
   dropdownMenu
 } from "./chunk-EXBKQDH5.mjs";
@@ -64,8 +73,8 @@ import {
   pageLayout
 } from "./chunk-OULAICSC.mjs";
 import {
-  popover
-} from "./chunk-IKJHZT2S.mjs";
+  callout
+} from "./chunk-3SRZALOM.mjs";
 import {
   card
 } from "./chunk-7O57EDVS.mjs";
@@ -84,9 +93,6 @@ import {
 import {
   dataTable
 } from "./chunk-GNYTZGE5.mjs";
-import {
-  drawer
-} from "./chunk-TJDRYBGW.mjs";
 import {
   dialog
 } from "./chunk-MWG2OZMD.mjs";
@@ -101,7 +107,10 @@ import {
 } from "./chunk-XCLEKBCJ.mjs";
 import {
   avatar
-} from "./chunk-2BPKTGNE.mjs";
+} from "./chunk-WPVIIT3Z.mjs";
+import {
+  blankstate
+} from "./chunk-DICHD74Q.mjs";
 import {
   button
 } from "./chunk-JX7F3NZL.mjs";
@@ -110,14 +119,12 @@ import "./chunk-LG2J56LI.mjs";
 import {
   calendar
 } from "./chunk-JWF5ABNP.mjs";
-import {
-  callout
-} from "./chunk-3SRZALOM.mjs";
 export {
   accordion,
   alertDialog,
   avatar,
   avatarGroup,
+  blankstate,
   button,
   calendar,
   callout,
@@ -147,6 +154,7 @@ export {
   sidebarMenuAction,
   sidebarMenuButton,
   skeleton,
+  skeletonAvatar,
   spinner,
   splitPageLayout,
   tabNav,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.6.10",
+  "version": "1.7.0",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",
@@ -43,7 +43,7 @@
     "deepmerge": "4.3.1",
     "flat": "^6.0.1",
     "tailwind-merge": "3.3.1",
-    "tailwind-variants": "2.0.1",
+    "tailwind-variants": "2.1.0",
     "tw-animate-css": "^1.3.6",
     "@kopexa/shared-utils": "1.1.5"
   },