@kopexa/theme 17.6.0 → 17.7.0

package/dist/chunk-CNYKIUVC.mjs

@@ -0,0 +1,64 @@
+// src/components/risk-rating.ts
+import { tv } from "tailwind-variants";
+var riskRating = tv({
+  slots: {
+    base: "flex items-center gap-2",
+    badge: "flex items-center justify-center rounded-md font-bold",
+    label: "font-medium",
+    // Icon slots for list items
+    iconWrapper: "p-2 rounded-lg shrink-0",
+    icon: "size-4"
+  },
+  variants: {
+    size: {
+      sm: {
+        badge: "size-6 text-xs",
+        label: "text-xs"
+      },
+      md: {
+        badge: "size-8 text-sm",
+        label: "text-sm"
+      }
+    },
+    level: {
+      unrated: {
+        badge: "bg-muted text-muted-foreground font-medium",
+        label: "text-muted-foreground",
+        iconWrapper: "bg-muted/50",
+        icon: "text-muted-foreground"
+      },
+      low: {
+        badge: "bg-success text-white",
+        label: "text-success",
+        iconWrapper: "bg-success/10",
+        icon: "text-success"
+      },
+      medium: {
+        badge: "bg-warning text-white",
+        label: "text-warning",
+        iconWrapper: "bg-warning/10",
+        icon: "text-warning"
+      },
+      high: {
+        badge: "bg-orange-500 text-white",
+        label: "text-orange-500",
+        iconWrapper: "bg-orange-500/10",
+        icon: "text-orange-500"
+      },
+      critical: {
+        badge: "bg-destructive text-white",
+        label: "text-destructive",
+        iconWrapper: "bg-destructive/10",
+        icon: "text-destructive"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    level: "unrated"
+  }
+});
+
+export {
+  riskRating
+};

package/dist/chunk-NIEFB74U.mjs

@@ -0,0 +1,64 @@
+// src/components/related-control-chip.ts
+import { tv } from "tailwind-variants";
+var relatedControlChip = tv({
+  slots: {
+    // Container for all chips
+    root: "flex flex-wrap items-center gap-1",
+    // Individual chip/tag
+    chip: [
+      "inline-flex",
+      "items-center",
+      "gap-0.5",
+      "px-1.5",
+      "py-0.5",
+      "rounded",
+      "text-xs",
+      "font-mono",
+      "bg-muted",
+      "text-muted-foreground",
+      "transition-colors",
+      "cursor-default"
+    ],
+    // Framework prefix (e.g., "iso27001:")
+    chipPrefix: "text-muted-foreground/70",
+    // Control ID (e.g., "a-7-1")
+    chipId: "font-medium",
+    // Overflow indicator (e.g., "+3")
+    overflow: [
+      "text-xs",
+      "text-muted-foreground",
+      "cursor-pointer",
+      "hover:text-foreground",
+      "transition-colors"
+    ],
+    // Tooltip content
+    tooltip: "text-xs"
+  },
+  variants: {
+    size: {
+      sm: {
+        chip: "text-[10px] px-1 py-px",
+        overflow: "text-[10px]"
+      },
+      md: {},
+      lg: {
+        chip: "text-sm px-2 py-1",
+        overflow: "text-sm"
+      }
+    },
+    interactive: {
+      true: {
+        chip: "cursor-pointer hover:bg-primary/10 hover:text-primary"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    interactive: false
+  }
+});
+
+export {
+  relatedControlChip
+};

package/dist/components/index.d.mts

@@ -45,6 +45,7 @@ export { RelatedControlChipVariantsProps, relatedControlChip } from './related-c
 export { ResizableVariantProps, resizable } from './resizable.mjs';
 export { RiskBadgeVariantProps, riskBadge } from './risk-badge.mjs';
 export { RiskIndicatorVariantProps, riskIndicator } from './risk-indicator.mjs';
+export { RiskRatingSlots, RiskRatingVariantProps, riskRating } from './risk-rating.mjs';
 export { ScrollAreaVariantProps, scrollArea } from './scroll-area.mjs';
 export { SectionRowSlots, SectionRowVariantProps, sectionRow } from './section-row.mjs';
 export { SelectVariantProps, select } from './select.mjs';

package/dist/components/index.d.ts

@@ -45,6 +45,7 @@ export { RelatedControlChipVariantsProps, relatedControlChip } from './related-c
 export { ResizableVariantProps, resizable } from './resizable.js';
 export { RiskBadgeVariantProps, riskBadge } from './risk-badge.js';
 export { RiskIndicatorVariantProps, riskIndicator } from './risk-indicator.js';
+export { RiskRatingSlots, RiskRatingVariantProps, riskRating } from './risk-rating.js';
 export { ScrollAreaVariantProps, scrollArea } from './scroll-area.js';
 export { SectionRowSlots, SectionRowVariantProps, sectionRow } from './section-row.js';
 export { SelectVariantProps, select } from './select.js';

package/dist/components/index.js

@@ -68,6 +68,7 @@ __export(components_exports, {
   resizable: () => resizable,
   riskBadge: () => riskBadge,
   riskIndicator: () => riskIndicator,
+  riskRating: () => riskRating,
   scrollArea: () => scrollArea,
   sectionRow: () => sectionRow,
   select: () => select,
@@ -3061,10 +3062,60 @@ var previewCard = (0, import_tailwind_variants43.tv)({
 var import_tailwind_variants44 = require("tailwind-variants");
 var relatedControlChip = (0, import_tailwind_variants44.tv)({
   slots: {
-    root: [
-      "text-xs border rounded-full cursor-pointer hover:text-primary px-2.5 py-0.5"
+    // Container for all chips
+    root: "flex flex-wrap items-center gap-1",
+    // Individual chip/tag
+    chip: [
+      "inline-flex",
+      "items-center",
+      "gap-0.5",
+      "px-1.5",
+      "py-0.5",
+      "rounded",
+      "text-xs",
+      "font-mono",
+      "bg-muted",
+      "text-muted-foreground",
+      "transition-colors",
+      "cursor-default"
     ],
+    // Framework prefix (e.g., "iso27001:")
+    chipPrefix: "text-muted-foreground/70",
+    // Control ID (e.g., "a-7-1")
+    chipId: "font-medium",
+    // Overflow indicator (e.g., "+3")
+    overflow: [
+      "text-xs",
+      "text-muted-foreground",
+      "cursor-pointer",
+      "hover:text-foreground",
+      "transition-colors"
+    ],
+    // Tooltip content
     tooltip: "text-xs"
+  },
+  variants: {
+    size: {
+      sm: {
+        chip: "text-[10px] px-1 py-px",
+        overflow: "text-[10px]"
+      },
+      md: {},
+      lg: {
+        chip: "text-sm px-2 py-1",
+        overflow: "text-sm"
+      }
+    },
+    interactive: {
+      true: {
+        chip: "cursor-pointer hover:bg-primary/10 hover:text-primary"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    interactive: false
   }
 });
 
@@ -3169,9 +3220,70 @@ var riskIndicator = (0, import_tailwind_variants47.tv)({
   }
 });
 
-// src/components/scroll-area.ts
+// src/components/risk-rating.ts
 var import_tailwind_variants48 = require("tailwind-variants");
-var scrollArea = (0, import_tailwind_variants48.tv)({
+var riskRating = (0, import_tailwind_variants48.tv)({
+  slots: {
+    base: "flex items-center gap-2",
+    badge: "flex items-center justify-center rounded-md font-bold",
+    label: "font-medium",
+    // Icon slots for list items
+    iconWrapper: "p-2 rounded-lg shrink-0",
+    icon: "size-4"
+  },
+  variants: {
+    size: {
+      sm: {
+        badge: "size-6 text-xs",
+        label: "text-xs"
+      },
+      md: {
+        badge: "size-8 text-sm",
+        label: "text-sm"
+      }
+    },
+    level: {
+      unrated: {
+        badge: "bg-muted text-muted-foreground font-medium",
+        label: "text-muted-foreground",
+        iconWrapper: "bg-muted/50",
+        icon: "text-muted-foreground"
+      },
+      low: {
+        badge: "bg-success text-white",
+        label: "text-success",
+        iconWrapper: "bg-success/10",
+        icon: "text-success"
+      },
+      medium: {
+        badge: "bg-warning text-white",
+        label: "text-warning",
+        iconWrapper: "bg-warning/10",
+        icon: "text-warning"
+      },
+      high: {
+        badge: "bg-orange-500 text-white",
+        label: "text-orange-500",
+        iconWrapper: "bg-orange-500/10",
+        icon: "text-orange-500"
+      },
+      critical: {
+        badge: "bg-destructive text-white",
+        label: "text-destructive",
+        iconWrapper: "bg-destructive/10",
+        icon: "text-destructive"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    level: "unrated"
+  }
+});
+
+// src/components/scroll-area.ts
+var import_tailwind_variants49 = require("tailwind-variants");
+var scrollArea = (0, import_tailwind_variants49.tv)({
   slots: {
     root: "relative",
     viewport: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
@@ -3185,8 +3297,8 @@ var scrollArea = (0, import_tailwind_variants48.tv)({
 });
 
 // src/components/section-row.ts
-var import_tailwind_variants49 = require("tailwind-variants");
-var sectionRow = (0, import_tailwind_variants49.tv)({
+var import_tailwind_variants50 = require("tailwind-variants");
+var sectionRow = (0, import_tailwind_variants50.tv)({
   slots: {
     root: ["grid grid-cols-1 text-base/6 sm:text-sm/6", "w-full"],
     title: [
@@ -3257,8 +3369,8 @@ var sectionRow = (0, import_tailwind_variants49.tv)({
 });
 
 // src/components/select.ts
-var import_tailwind_variants50 = require("tailwind-variants");
-var select = (0, import_tailwind_variants50.tv)({
+var import_tailwind_variants51 = require("tailwind-variants");
+var select = (0, import_tailwind_variants51.tv)({
   slots: {
     trigger: [
       "w-full",
@@ -3362,8 +3474,8 @@ var select = (0, import_tailwind_variants50.tv)({
 });
 
 // src/components/separator.ts
-var import_tailwind_variants51 = require("tailwind-variants");
-var separator = (0, import_tailwind_variants51.tv)({
+var import_tailwind_variants52 = require("tailwind-variants");
+var separator = (0, import_tailwind_variants52.tv)({
   base: [
     "bg-border shrink-0",
     "data-[orientation=horizontal]:h-px",
@@ -3381,8 +3493,8 @@ var separator = (0, import_tailwind_variants51.tv)({
 });
 
 // src/components/sidebar.ts
-var import_tailwind_variants52 = require("tailwind-variants");
-var sidebar = (0, import_tailwind_variants52.tv)({
+var import_tailwind_variants53 = require("tailwind-variants");
+var sidebar = (0, import_tailwind_variants53.tv)({
   slots: {
     provider: [
       "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full isolate"
@@ -3470,7 +3582,7 @@ var sidebar = (0, import_tailwind_variants52.tv)({
     isMobile: false
   }
 });
-var sidebarMenuButton = (0, import_tailwind_variants52.tv)({
+var sidebarMenuButton = (0, import_tailwind_variants53.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]",
@@ -3522,7 +3634,7 @@ var sidebarMenuButton = (0, import_tailwind_variants52.tv)({
     }
   ]
 });
-var sidebarMenuAction = (0, import_tailwind_variants52.tv)({
+var sidebarMenuAction = (0, import_tailwind_variants53.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.
@@ -3542,14 +3654,14 @@ var sidebarMenuAction = (0, import_tailwind_variants52.tv)({
 });
 
 // src/components/skeleton.ts
-var import_tailwind_variants53 = require("tailwind-variants");
-var skeleton = (0, import_tailwind_variants53.tv)({
+var import_tailwind_variants54 = require("tailwind-variants");
+var skeleton = (0, import_tailwind_variants54.tv)({
   base: "bg-accent animate-pulse rounded-md"
 });
 
 // src/components/skeleton-avatar.ts
-var import_tailwind_variants54 = require("tailwind-variants");
-var skeletonAvatar = (0, import_tailwind_variants54.tv)({
+var import_tailwind_variants55 = require("tailwind-variants");
+var skeletonAvatar = (0, import_tailwind_variants55.tv)({
   base: "rounded-full",
   variants: {
     size: {
@@ -3566,8 +3678,8 @@ var skeletonAvatar = (0, import_tailwind_variants54.tv)({
 });
 
 // src/components/slash-dropdown-menu.ts
-var import_tailwind_variants55 = require("tailwind-variants");
-var slashDropdownMenu = (0, import_tailwind_variants55.tv)({
+var import_tailwind_variants56 = require("tailwind-variants");
+var slashDropdownMenu = (0, import_tailwind_variants56.tv)({
   slots: {
     card: [...popoverContentClasses, "p-0", "flex flex-col outline-none"],
     body: ["p-1.5 flex-auto grow shrink overflow-y-auto w-full"],
@@ -3586,8 +3698,8 @@ var slashDropdownMenu = (0, import_tailwind_variants55.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants56 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants56.tv)({
+var import_tailwind_variants57 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants57.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -3704,8 +3816,8 @@ var spinner = (0, import_tailwind_variants56.tv)({
 });
 
 // src/components/split-page-layout.ts
-var import_tailwind_variants57 = require("tailwind-variants");
-var splitPageLayout = (0, import_tailwind_variants57.tv)({
+var import_tailwind_variants58 = require("tailwind-variants");
+var splitPageLayout = (0, import_tailwind_variants58.tv)({
   slots: {
     root: [
       "size-full min-h-0 grid grid-cols-[1fr_10px] md:grid-cols-3 relative"
@@ -3742,8 +3854,8 @@ var splitPageLayout = (0, import_tailwind_variants57.tv)({
 });
 
 // src/components/standard-chip.ts
-var import_tailwind_variants58 = require("tailwind-variants");
-var standardChip = (0, import_tailwind_variants58.tv)({
+var import_tailwind_variants59 = require("tailwind-variants");
+var standardChip = (0, import_tailwind_variants59.tv)({
   extend: chip,
   slots: {
     root: [
@@ -3834,8 +3946,8 @@ var standardChip = (0, import_tailwind_variants58.tv)({
 });
 
 // src/components/switch.ts
-var import_tailwind_variants59 = require("tailwind-variants");
-var switchVariants = (0, import_tailwind_variants59.tv)({
+var import_tailwind_variants60 = require("tailwind-variants");
+var switchVariants = (0, import_tailwind_variants60.tv)({
   slots: {
     root: [
       "peer data-[checked]:bg-primary data-[unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[unchecked]:bg-input/80",
@@ -3870,8 +3982,8 @@ var switchVariants = (0, import_tailwind_variants59.tv)({
 });
 
 // src/components/tab-nav.ts
-var import_tailwind_variants60 = require("tailwind-variants");
-var tabNav = (0, import_tailwind_variants60.tv)({
+var import_tailwind_variants61 = require("tailwind-variants");
+var tabNav = (0, import_tailwind_variants61.tv)({
   slots: {
     base: "",
     list: [
@@ -3961,8 +4073,8 @@ var tabNav = (0, import_tailwind_variants60.tv)({
 });
 
 // src/components/table.ts
-var import_tailwind_variants61 = require("tailwind-variants");
-var table = (0, import_tailwind_variants61.tv)({
+var import_tailwind_variants62 = require("tailwind-variants");
+var table = (0, import_tailwind_variants62.tv)({
   slots: {
     container: ["overflow-x-auto whitespace-nowrap", "-mx-(--gutter)"],
     wrapper: ["inline-block min-w-full align-middle"],
@@ -4124,8 +4236,8 @@ var table = (0, import_tailwind_variants61.tv)({
 });
 
 // src/components/tabs.ts
-var import_tailwind_variants62 = require("tailwind-variants");
-var tabs = (0, import_tailwind_variants62.tv)({
+var import_tailwind_variants63 = require("tailwind-variants");
+var tabs = (0, import_tailwind_variants63.tv)({
   slots: {
     root: "flex flex-col gap-2",
     list: [
@@ -4162,8 +4274,8 @@ var tabs = (0, import_tailwind_variants62.tv)({
 });
 
 // src/components/textarea.ts
-var import_tailwind_variants63 = require("tailwind-variants");
-var textarea = (0, import_tailwind_variants63.tv)({
+var import_tailwind_variants64 = require("tailwind-variants");
+var textarea = (0, import_tailwind_variants64.tv)({
   base: [
     "w-full border border-input bg-background text-foreground shadow-xs shadow-black/5 transition-[color,box-shadow]",
     "text-foreground placeholder:text-muted-foreground/80",
@@ -4187,8 +4299,8 @@ var textarea = (0, import_tailwind_variants63.tv)({
 });
 
 // src/components/toolbar.ts
-var import_tailwind_variants64 = require("tailwind-variants");
-var toolbar = (0, import_tailwind_variants64.tv)({
+var import_tailwind_variants65 = require("tailwind-variants");
+var toolbar = (0, import_tailwind_variants65.tv)({
   slots: {
     root: "flex items-center gap-2.5 p-1",
     button: "shrink-0",
@@ -4227,8 +4339,8 @@ var toolbar = (0, import_tailwind_variants64.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants65 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants65.tv)({
+var import_tailwind_variants66 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants66.tv)({
   slots: {
     content: [
       "bg-primary-900 text-primary-foreground",
@@ -4289,6 +4401,7 @@ var tooltip = (0, import_tailwind_variants65.tv)({
   resizable,
   riskBadge,
   riskIndicator,
+  riskRating,
   scrollArea,
   sectionRow,
   select,

package/dist/components/index.mjs

@@ -1,4 +1,7 @@
-import "../chunk-M35MNWR7.mjs";
+import "../chunk-ALG7CNQH.mjs";
+import {
+  tabs
+} from "../chunk-I6M4S2KZ.mjs";
 import {
   textarea
 } from "../chunk-ARLLAC5V.mjs";
@@ -8,6 +11,9 @@ import {
 import {
   tooltip
 } from "../chunk-OLYO7UPH.mjs";
+import {
+  skeleton
+} from "../chunk-VNQEJU4P.mjs";
 import {
   slashDropdownMenu
 } from "../chunk-NNKYGAZC.mjs";
@@ -29,12 +35,12 @@ import {
 import {
   table
 } from "../chunk-YC2FQDBV.mjs";
-import {
-  tabs
-} from "../chunk-I6M4S2KZ.mjs";
 import {
   riskIndicator
 } from "../chunk-CZMZHA7U.mjs";
+import {
+  riskRating
+} from "../chunk-CNYKIUVC.mjs";
 import {
   scrollArea
 } from "../chunk-SPQE7K66.mjs";
@@ -55,9 +61,6 @@ import {
 import {
   skeletonAvatar
 } from "../chunk-7Q2RNHL5.mjs";
-import {
-  skeleton
-} from "../chunk-VNQEJU4P.mjs";
 import {
   loadingPage
 } from "../chunk-ZOTN264E.mjs";
@@ -75,7 +78,7 @@ import {
 } from "../chunk-4XIBRN6X.mjs";
 import {
   relatedControlChip
-} from "../chunk-7BZAMXH2.mjs";
+} from "../chunk-NIEFB74U.mjs";
 import {
   resizable
 } from "../chunk-RV656WRF.mjs";
@@ -248,6 +251,7 @@ export {
   resizable,
   riskBadge,
   riskIndicator,
+  riskRating,
   scrollArea,
   sectionRow,
   select,

package/dist/components/related-control-chip.d.mts

@@ -1,36 +1,84 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-import * as tailwind_merge from 'tailwind-merge';
 
+/**
+ * Theme styles for related control chips.
+ * Used to display KRN-based control references as compact chips/tags.
+ */
 declare const relatedControlChip: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_merge.ClassNameValue | {
-            root?: tailwind_merge.ClassNameValue;
-            tooltip?: tailwind_merge.ClassNameValue;
+    size: {
+        sm: {
+            chip: string;
+            overflow: string;
+        };
+        md: {};
+        lg: {
+            chip: string;
+            overflow: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_merge.ClassNameValue | {
-            root?: tailwind_merge.ClassNameValue;
-            tooltip?: tailwind_merge.ClassNameValue;
+    interactive: {
+        true: {
+            chip: string;
         };
+        false: {};
     };
-} | {}, {
-    root: string[];
+}, {
+    root: string;
+    chip: string[];
+    chipPrefix: string;
+    chipId: string;
+    overflow: string[];
     tooltip: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_merge.ClassNameValue | {
-            root?: tailwind_merge.ClassNameValue;
-            tooltip?: tailwind_merge.ClassNameValue;
+    size: {
+        sm: {
+            chip: string;
+            overflow: string;
+        };
+        md: {};
+        lg: {
+            chip: string;
+            overflow: string;
         };
     };
-} | {}, {
-    root: string[];
+    interactive: {
+        true: {
+            chip: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    chip: string[];
+    chipPrefix: string;
+    chipId: string;
+    overflow: string[];
     tooltip: string;
-}, tailwind_variants.TVReturnType<unknown, {
-    root: string[];
+}, tailwind_variants.TVReturnType<{
+    size: {
+        sm: {
+            chip: string;
+            overflow: string;
+        };
+        md: {};
+        lg: {
+            chip: string;
+            overflow: string;
+        };
+    };
+    interactive: {
+        true: {
+            chip: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    chip: string[];
+    chipPrefix: string;
+    chipId: string;
+    overflow: string[];
     tooltip: string;
 }, undefined, unknown, unknown, undefined>>;
 type RelatedControlChipVariantsProps = VariantProps<typeof relatedControlChip>;