@kopexa/theme 1.5.8 → 1.6.1

package/dist/{chunk-FLD2CUFZ.mjs → chunk-3IIJVON7.mjs}

@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants";
 var pageLayout = tv({
   slots: {
     root: "",
-    wrapper: "flex mx-auto flex-wrap w-full",
+    wrapper: "flex flex-wrap w-full",
     baseContent: "flex flex-1 flex-wrap max-w-full",
     header: "w-full grow-0 shrink-0",
     footerWrapper: "w-full",
@@ -22,7 +22,8 @@ var pageLayout = tv({
     ],
     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 h-full"
+    content: "w-full mx-auto grow h-full",
+    bleed: []
   },
   variants: {
     gap: {
@@ -50,14 +51,14 @@ var pageLayout = tv({
         content: "max-w-full"
       },
       md: {
-        wrapper: "max-w-3xl",
+        wrapper: "max-w-3xl mx-auto",
         content: "max-w-3xl"
       },
       lg: {
-        wrapper: "max-w-5xl"
+        wrapper: "max-w-5xl mx-auto"
       },
       xl: {
-        wrapper: "max-w-8xl",
+        wrapper: "max-w-8xl mx-auto",
         content: "max-w-8xl"
       }
     },
@@ -79,7 +80,8 @@ var pageLayout = tv({
         header: "p-4",
         content: "p-4",
         pane: "p-4",
-        footerContent: "p-4"
+        footerContent: "p-4",
+        bleed: ["-mx-4 p-4"]
       },
       // 1.5rem
       normal: {
@@ -87,7 +89,8 @@ var pageLayout = tv({
         header: "p-2 md:p-3",
         content: "p-2 md:p-3",
         pane: "p-2 md:p-3",
-        footerContent: "p-2 md:p-3"
+        footerContent: "p-2 md:p-3",
+        bleed: ["-mx-2 md:-mx-3 p-2 md:p-3"]
       }
     },
     inModal: {
@@ -102,7 +105,7 @@ var pageLayout = tv({
   defaultVariants: {
     width: "xl",
     spacing: "normal",
-    paneWidth: "md",
+    paneWidth: "lg",
     gap: "normal"
   }
 });

package/dist/{chunk-I2NMD23O.mjs → chunk-5QIMO5EG.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-25L2JS6A.mjs";
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-LG2J56LI.mjs";
 
 // src/components/avatar.ts
 import { tv } from "tailwind-variants";

package/dist/chunk-CZMZHA7U.mjs

@@ -0,0 +1,37 @@
+// src/components/risk-indicator.ts
+import { tv } from "tailwind-variants";
+var riskIndicator = tv({
+  slots: {
+    base: "flex items-end gap-0.5",
+    bar: "rounded-sm",
+    barLow: "bg-green-500",
+    barMedium: "bg-yellow-500",
+    barHigh: "bg-red-500",
+    barInactive: "bg-gray-200",
+    barHeight1: "h-1/3",
+    barHeight2: "h-2/3",
+    barHeight3: "h-full",
+    barWidth: "w-1"
+  },
+  variants: {
+    level: {
+      none: "",
+      low: "",
+      medium: "",
+      high: ""
+    },
+    size: {
+      sm: "h-3",
+      md: "h-4",
+      lg: "h-5"
+    }
+  },
+  defaultVariants: {
+    level: "none",
+    size: "md"
+  }
+});
+
+export {
+  riskIndicator
+};

package/dist/{chunk-3M5JSM7Y.mjs → chunk-DQEPGWAN.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-25L2JS6A.mjs";
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-LG2J56LI.mjs";
 
 // src/components/button.ts
 import { tv } from "tailwind-variants";

package/dist/{chunk-4VKJFW6Y.mjs → chunk-EACX3NZF.mjs}

@@ -50,6 +50,9 @@ var card = tv({
       none: {
         root: "shadow-none"
       },
+      "2xs": {
+        root: "shadow-2xs"
+      },
       sm: {
         root: "shadow-sm"
       },
@@ -60,6 +63,11 @@ var card = tv({
         root: "shadow-lg"
       }
     },
+    border: {
+      true: {
+        root: "border"
+      }
+    },
     radius: {
       none: {
         root: "rounded-none",
@@ -108,12 +116,13 @@ var card = tv({
   },
   defaultVariants: {
     radius: "lg",
-    shadow: "md",
+    shadow: "sm",
     fullWidth: false,
     isHoverable: false,
     isPressable: false,
     isBlurred: false,
-    isDisabled: false
+    isDisabled: false,
+    border: true
   }
 });
 

package/dist/chunk-FWRXPYLB.mjs

@@ -0,0 +1,41 @@
+// src/components/split-page-layout.ts
+import { tv } from "tailwind-variants";
+var splitPageLayout = tv({
+  slots: {
+    root: [
+      "size-full min-h-0 grid grid-cols-[1fr_10px] md:grid-cols-3 relative"
+    ],
+    content: ["p-4 md:p-6 col-span-1 md:col-span-2"],
+    panelContainer: [
+      "flex flex-col",
+      "md:border-s",
+      //"size-full",
+      "bg-muted dark:bg-primary-900"
+    ],
+    panel: [
+      "md:border-s",
+      "p-4 md:p-6",
+      "overflow-y-auto overflow-x-hidden",
+      "flex-1",
+      "min-h-0",
+      "h-full"
+    ],
+    bleed: "-mx-4 md:-mx-6",
+    mobileWrapper: "relative",
+    mobileContainer: ["absolute top-2 right-2 z-10"]
+  },
+  variants: {
+    inset: {
+      true: {
+        panelContainer: "rounded-e-md max-md:rounded-md"
+      }
+    }
+  },
+  defaultVariants: {
+    inset: true
+  }
+});
+
+export {
+  splitPageLayout
+};

package/dist/chunk-GA6UOB2D.mjs

@@ -0,0 +1,166 @@
+// src/components/sidebar.ts
+import { tv } from "tailwind-variants";
+var sidebar = tv({
+  slots: {
+    provider: [
+      "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full"
+    ],
+    sidebarWrapper: ["group peer text-sidebar-foreground hidden md:block"],
+    sidebar: [
+      "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col"
+    ],
+    gap: [
+      "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+      "group-data-[collapsible=offcanvas]:w-0",
+      "group-data-[side=right]:rotate-180"
+    ],
+    container: [
+      "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex"
+    ],
+    inner: [
+      "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+    ],
+    trigger: [],
+    rail: [
+      "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+      "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+      "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+      "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+      "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+      "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+    ],
+    inset: [
+      "bg-background relative flex w-full flex-1 flex-col",
+      "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2"
+    ],
+    input: ["bg-background h-8 w-full shadow-none"],
+    header: ["flex flex-col gap-2 p-2"],
+    footer: ["flex flex-col gap-2 p-2"],
+    separator: ["bg-sidebar-border mx-2 w-auto"],
+    content: [
+      "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden"
+    ],
+    group: ["relative flex w-full min-w-0 flex-col p-2"],
+    groupLabel: [
+      "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
+    ],
+    groupAction: [
+      "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 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.
+      "after:absolute after:-inset-2 md:after:hidden",
+      "group-data-[collapsible=icon]:hidden"
+    ],
+    groupContent: ["w-full text-sm"],
+    menu: ["flex w-full min-w-0 flex-col gap-1"],
+    menuItem: ["group/menu-item relative"]
+  },
+  variants: {
+    variant: {
+      sidebar: {
+        gap: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        container: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l"
+      },
+      floating: {
+        gap: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
+        container: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+      },
+      inset: {
+        gap: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
+        container: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+      }
+    },
+    side: {
+      left: {
+        container: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+      },
+      right: {
+        container: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
+      }
+    },
+    isMobile: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "sidebar",
+    isMobile: false
+  }
+});
+var sidebarMenuButton = 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]",
+    "disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "data-[active=true]:font-medium",
+    "group-data-[collapsible=icon]:size-8!",
+    "group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
+  ],
+  variants: {
+    variant: {
+      default: "",
+      outline: ""
+    },
+    color: {
+      default: [
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        "focus-visible:ring-2",
+        "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent",
+        "data-[active=true]:text-sidebar-accent-foreground",
+        "data-[state=open]:hover:bg-sidebar-accent",
+        "data-[state=open]:hover:text-sidebar-accent-foreground "
+      ]
+    },
+    size: {
+      sm: "h-7 text-xs",
+      md: "h-8 text-sm",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "default",
+    size: "md"
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      color: "default",
+      class: ["hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"]
+    },
+    {
+      variant: "outline",
+      color: "default",
+      class: [
+        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      ]
+    }
+  ]
+});
+var sidebarMenuAction = 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.
+    "after:absolute after:-inset-2 md:after:hidden",
+    "peer-data-[size=sm]/menu-button:top-1",
+    "peer-data-[size=default]/menu-button:top-1.5",
+    "peer-data-[size=lg]/menu-button:top-2.5",
+    "group-data-[collapsible=icon]:hidden"
+  ],
+  variants: {
+    showOnHover: {
+      true: [
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"
+      ]
+    }
+  }
+});
+
+export {
+  sidebar,
+  sidebarMenuButton,
+  sidebarMenuAction
+};

package/dist/chunk-I6M4S2KZ.mjs

@@ -0,0 +1,41 @@
+// src/components/tabs.ts
+import { tv } from "tailwind-variants";
+var tabs = tv({
+  slots: {
+    root: "flex flex-col gap-2",
+    list: [
+      "bg-muted text-muted-foreground",
+      "inline-flex flex-col md:flex-row",
+      "w-full md:w-fit items-center justify-center rounded-lg p-[3px]"
+    ],
+    trigger: [
+      "inline-flex flex-1 items-center justify-center gap-1.5 rounded-md",
+      " border border-transparent",
+      "data-[state=active]:bg-background",
+      "dark:data-[state=active]:text-foreground",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring",
+      "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
+      "text-foreground dark:text-muted-foreground",
+      "h-[calc(100%-1px)] whitespace-nowrap transition-[color,box-shadow]",
+      "focus-visible:ring-[3px] focus-visible:outline-1",
+      "disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    ],
+    content: ["flex-1 outline-none"]
+  },
+  variants: {
+    size: {
+      md: {
+        list: "md:h-9",
+        trigger: "px-2 py-1 text-sm font-medium max-md:w-full"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  tabs
+};

package/dist/{chunk-UI2M2MFB.mjs → chunk-J4JIYTOU.mjs}

@@ -52,13 +52,15 @@ var drawer = tv({
         content: "max-w-6xl"
       },
       full: {
-        content: "max-w-full max-h-full h-[calc(100dvh_-_1rem)] inset-2"
+        content: "max-w-full max-h-full h-[calc(100dvh_-_1rem)] !inset-2"
       }
     },
     placement: {
       top: {},
       bottom: {},
-      left: {},
+      left: {
+        content: "inset-y-2 ms-2 left-0 border-r h-[calc(100dvh_-_1rem)]"
+      },
       right: {
         content: "inset-y-2 me-2 right-0 h-[calc(100%-1rem)] border-l"
       }

package/dist/{chunk-67PPUTSS.mjs → chunk-LG2J56LI.mjs}

@@ -1,6 +1,6 @@
 // src/utils/variants.ts
 var solid = {
-  default: "bg-accent text-accent-foreground",
+  default: "bg-accent/70 text-accent-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
   destructive: "bg-destructive text-destructive-foreground",
@@ -34,7 +34,7 @@ var faded = {
   foreground: "border-default bg-accent/30 text-foreground"
 };
 var ghost = {
-  primary: "bg-transparent text-primary",
+  primary: "bg-transparent text-primary dark:text-primary-foreground",
   secondary: "bg-transparent text-secondary",
   destructive: "bg-transparent text-destructive",
   warning: "bg-transparent text-warning",

package/dist/{chunk-CDTKWCOH.mjs → chunk-MKBU6G6Q.mjs}

@@ -2,19 +2,23 @@
 import { tv } from "tailwind-variants";
 var table = tv({
   slots: {
+    container: ["overflow-x-auto whitespace-nowrap", "-mx-3 md:-mx-6"],
+    wrapper: ["inline-block min-w-full align-middle"],
     table: "min-w-full h-auto",
     thead: "",
     tbody: "after:block divide-y",
     tr: [
       "group/tr outline-hidden",
-      "[&_td:last-child]:pr-4 [&_th:last-child]:pr-4",
-      "[&_td:first-child]:pl-4 [&_th:first-child]:pl-4"
+      "[&_th:last-child]:pr-4",
+      "[&_th:first-child]:pl-4"
     ],
     th: [
       "group/th px-3 py-3.5 text-start text-xs font-semibold whitespace-normal",
       "text-foreground border-b"
     ],
     td: [
+      "first:pl-3 last:pr-3",
+      "md:first:pl-6 md:last:pr-6",
       "py-2 px-3 text-xs font-normal whitespace-normal relative",
       "[&>*]:z-[1]",
       "[&>*]:relative",
@@ -36,15 +40,50 @@ var table = tv({
       "before:w-0.5",
       "before:opacity-0",
       "group-aria-[selected=true]/tr:first:before:opacity-100"
-    ]
+    ],
+    ownerCell: [
+      "min-h-[50px]",
+      "inline-flex items-center justify-center gap-2"
+    ],
+    ownerCellAvatar: [],
+    ownerCelltextWrapper: "inline-flex flex-col items-start",
+    ownerCellName: "text-xs font-medium",
+    ownerCellDescription: "text-[11px] text-muted-foreground truncate",
+    ownerCellUnassigned: "text-xs italic text-muted-foreground"
   },
   variants: {
+    bleed: {
+      true: {},
+      false: {
+        container: ["px-3 md:px-6"],
+        th: ["first:pl-1 last:pr-1"],
+        td: ["first:pl-1 last:pr-1"]
+      }
+    },
     overscroll: {
       horizontal: {
         th: "whitespace-nowrap",
         td: "whitespace-nowrap"
       }
     },
+    variant: {
+      default: {},
+      // a border between cells and above the table
+      // this is used for the grid variant
+      grid: {
+        table: "border-separate border-spacing-0",
+        th: [
+          "border-l first:border-l-0 border-b",
+          "first:pl-3 md:first:pl-6 last:pr-3 md:last:pr-6"
+        ],
+        td: [
+          "border-l first:border-l-0",
+          "border-b",
+          // first cell has no border
+          "[&_td:first-child]:border-l-0 [&_th:first-child]:border-l-0"
+        ]
+      }
+    },
     color: {
       default: {
         td: [
@@ -109,8 +148,10 @@ var table = tv({
     }
   },
   defaultVariants: {
+    variant: "default",
     layout: "auto",
     color: "default",
+    bleed: false,
     fullWidth: true
   }
 });

package/dist/{chunk-32L6KXLV.mjs → chunk-T5PESSOS.mjs}

@@ -1,6 +1,6 @@
 import {
   colorVariants
-} from "./chunk-67PPUTSS.mjs";
+} from "./chunk-LG2J56LI.mjs";
 
 // src/components/chip.ts
 import { tv } from "tailwind-variants";

package/dist/chunk-TT5V2MUL.mjs

@@ -0,0 +1,29 @@
+// src/components/section-row.ts
+import { tv } from "tailwind-variants";
+var sectionRow = tv({
+  slots: {
+    root: ["section-row items-start"],
+    title: "section-row__title text-muted-foreground text-sm font-semibold",
+    valueText: "whitespace-pre-line text-pretty text-sm",
+    valueContainer: "section-row__value-container flex flex-wrap gap-1",
+    action: "section-row__action"
+  },
+  variants: {
+    hasActions: {
+      true: {
+        root: [
+          "has-actions"
+          //"md:grid-cols-[min(40%,--spacing(80))_auto_28px]",
+        ]
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    hasActions: false
+  }
+});
+
+export {
+  sectionRow
+};

package/dist/chunk-V2J5XG34.mjs

@@ -0,0 +1,43 @@
+// src/components/risk-badge.ts
+import { tv } from "tailwind-variants";
+var riskBadge = tv({
+  slots: {
+    root: ["inline-flex flex-col items-start gap-0.5"],
+    label: ["inline-flex items-center gap-0.5 text-xs"],
+    grade: ["font-semibold"],
+    level: ["font-medium"],
+    dots: ["inline-flex items-center gap-0.5"],
+    dot: [
+      "inline-block w-1.5 h-1.5 rounded-full",
+      "transition-all duration-150 ease-in-out"
+    ]
+  },
+  variants: {
+    color: {
+      default: {
+        dot: "bg-gray-200 dark:bg-gray-700"
+      },
+      success: {
+        dot: "bg-success"
+      },
+      destructive: {
+        dot: "bg-destructive"
+      },
+      warning: {
+        dot: "bg-warning"
+      }
+    },
+    dotFilled: {
+      true: {
+        dot: "opacity-100 scale-110"
+      },
+      false: {
+        dot: "opacity-40 scale-100"
+      }
+    }
+  }
+});
+
+export {
+  riskBadge
+};

package/dist/chunk-VCLXE57S.mjs

@@ -0,0 +1,16 @@
+// src/components/separator.ts
+import { tv } from "tailwind-variants";
+var separator = 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: {
+      vertical: "",
+      horizontal: ""
+    }
+  },
+  compoundVariants: []
+});
+
+export {
+  separator
+};

package/dist/chunk-WPOYEHD2.mjs

@@ -0,0 +1,45 @@
+// src/components/preview-card.ts
+import { tv } from "tailwind-variants";
+var previewCard = tv({
+  slots: {
+    root: [
+      "flex w-full items-start gap-3 rounded-md bg-background p-2 transition-colors",
+      "transition-all group min-h-10",
+      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+    ],
+    icon: ["flex-shrink-0 text-muted-foreground"],
+    content: ["flex min-w-0 flex-1 flex-col justify-center"],
+    title: ["truncate text-xs font-medium text-foreground"],
+    description: ["truncate text-[10px] text-muted-foreground line-clamp-1"],
+    action: ["shrink-0 rounded-full [&_svg]:size-4"],
+    tags: ["mt-1.5 flex items-center gap-2"]
+  },
+  variants: {
+    size: {
+      md: {
+        icon: "[&__svg]:size-5"
+      }
+    },
+    isBordered: {
+      true: {
+        root: ["border"]
+      },
+      false: {}
+    },
+    isHoverable: {
+      true: {
+        root: "hover:bg-muted/50 hover:border-primary",
+        title: "group-hover:text-primary"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    isBordered: true
+  }
+});
+
+export {
+  previewCard
+};