@jackcrane/ui 0.1.7 → 0.1.9

package/dist/components/Dropdown/dropdown.d.ts

@@ -6,7 +6,11 @@
  * @property {string} [value]
  * @property {boolean} [disabled]
  * @property {import("react").ReactNode} [icon]
- * @property {() => void} [onSelect]
+ * @property {(value: string | undefined) => void} [onSelect]
+ * @property {(event: Event) => void} [onClick]
+ * @property {string} [href]
+ * @property {string} [target]
+ * @property {string} [rel]
  * @property {"item" | "separator"} [type]
  */
 /**
@@ -42,6 +46,10 @@ export type DropdownItem = {
     value?: string;
     disabled?: boolean;
     icon?: import("react").ReactNode;
-    onSelect?: () => void;
+    onSelect?: (value: string | undefined) => void;
+    onClick?: (event: Event) => void;
+    href?: string;
+    target?: string;
+    rel?: string;
     type?: "item" | "separator";
 };

package/dist/jcui.cjs.js

@@ -209,7 +209,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1u4j4_1 {
+._card_et6fi_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -218,64 +218,70 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1u4j4_1 ._title_1u4j4_11 {
+._pageBackground_et6fi_11 {
+  --card-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+  --card-color: var(--body-color);
+  background-color: var(--body-bg);
+}
+._card_et6fi_1 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1u4j4_1 ._body_1u4j4_18 {
+._card_et6fi_1 ._body_et6fi_25 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1u4j4_1 ._footer_1u4j4_23 {
+._card_et6fi_1 ._footer_et6fi_30 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1u4j4_30 ._body_1u4j4_18,
-._large_1u4j4_30 ._title_1u4j4_11 {
+._large_et6fi_37 ._body_et6fi_25,
+._large_et6fi_37 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u4j4_36 ._body_1u4j4_18,
-._small_1u4j4_36 ._title_1u4j4_11 {
+._small_et6fi_43 ._body_et6fi_25,
+._small_et6fi_43 ._title_et6fi_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1u4j4_44 {
+._primary_et6fi_51 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1u4j4_51 {
+._success_et6fi_58 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1u4j4_58 {
+._warning_et6fi_65 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1u4j4_65 {
+._danger_et6fi_72 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1u4j4_72 {
+._info_et6fi_79 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1u4j4_79 {
+._secondary_et6fi_86 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -789,7 +795,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_12pwu_7 {
+._trigger_1q8xu_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -802,29 +808,29 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_12pwu_7:hover {
+._trigger_1q8xu_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_12pwu_7:active {
+._trigger_1q8xu_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._large_12pwu_29 {
+._large_1q8xu_29 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_12pwu_34 {
+._small_1q8xu_34 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_12pwu_39 {
+._disabled_1q8xu_39 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_12pwu_44 {
+._icon_1q8xu_44 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_12pwu_49 {
+._content_1q8xu_49 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -838,26 +844,26 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_12pwu_49[data-state="closed"] ._viewport_12pwu_64 {
+._content_1q8xu_49[data-state="closed"] ._viewport_1q8xu_64 {
   animation: none;
 }
-._content_12pwu_49[data-state="open"][data-side="bottom"] ._viewport_12pwu_64 {
-  animation: _slideUpAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="bottom"] ._viewport_1q8xu_64 {
+  animation: _slideUpAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_12pwu_49[data-state="open"][data-side="top"] ._viewport_12pwu_64 {
-  animation: _slideDownAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="top"] ._viewport_1q8xu_64 {
+  animation: _slideDownAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_12pwu_49[data-state="open"][data-side="left"] ._viewport_12pwu_64 {
-  animation: _slideRightAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="left"] ._viewport_1q8xu_64 {
+  animation: _slideRightAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_12pwu_49[data-state="open"][data-side="right"] ._viewport_12pwu_64 {
-  animation: _slideLeftAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="right"] ._viewport_1q8xu_64 {
+  animation: _slideLeftAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_12pwu_64 {
+._viewport_1q8xu_64 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -866,7 +872,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_12pwu_98 {
+._item_1q8xu_98 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -877,92 +883,93 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   cursor: pointer;
   position: relative;
   background: transparent;
+  text-decoration: none;
 }
-._item_12pwu_98[data-highlighted] {
+._item_1q8xu_98[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_12pwu_98[data-disabled] {
+._item_1q8xu_98[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_12pwu_120 {
+._itemLabel_1q8xu_121 {
   flex: 1;
 }
-._itemIcon_12pwu_124 {
+._itemIcon_1q8xu_125 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_12pwu_124 svg {
+._itemIcon_1q8xu_125 svg {
   height: 1.25rem;
 }
-._separator_12pwu_136 {
+._separator_1q8xu_137 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_12pwu_141 {
+._arrow_1q8xu_142 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_12pwu_148 {
+._primary_1q8xu_149 {
   --dropdown-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --button-color: var(--primary-color-800);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_12pwu_148:hover {
+._primary_1q8xu_149:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_12pwu_159 {
+._success_1q8xu_160 {
   --dropdown-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --button-color: var(--success-color-800);
   --border-accent-color: var(--success-color-600);
 }
-._success_12pwu_159:hover {
+._success_1q8xu_160:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_12pwu_170 {
+._warning_1q8xu_171 {
   --dropdown-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --button-color: var(--warning-color-800);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_12pwu_170:hover {
+._warning_1q8xu_171:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_12pwu_181 {
+._danger_1q8xu_182 {
   --dropdown-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --button-color: var(--danger-color-800);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_12pwu_181:hover {
+._danger_1q8xu_182:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_12pwu_192 {
+._info_1q8xu_193 {
   --dropdown-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --button-color: var(--info-color-800);
   --border-accent-color: var(--info-color-600);
 }
-._info_12pwu_192:hover {
+._info_1q8xu_193:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_12pwu_203 {
+._secondary_1q8xu_204 {
   --dropdown-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --button-color: var(--secondary-color-800);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_12pwu_203:hover {
+._secondary_1q8xu_204:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_12pwu_1 {
+@keyframes _slideUpAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -972,7 +979,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_12pwu_1 {
+@keyframes _slideRightAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -982,7 +989,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_12pwu_1 {
+@keyframes _slideDownAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -992,7 +999,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_12pwu_1 {
+@keyframes _slideLeftAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -1925,7 +1932,7 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$1 = "_pageBackground_105y0_24";
+const pageBackground$2 = "_pageBackground_105y0_24";
 const large$6 = "_large_105y0_34";
 const small$6 = "_small_105y0_39";
 const disabled$6 = "_disabled_105y0_44";
@@ -1937,7 +1944,7 @@ const info$8 = "_info_105y0_103";
 const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
-  pageBackground: pageBackground$1,
+  pageBackground: pageBackground$2,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
@@ -2101,20 +2108,22 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1u4j4_1";
-const title$1 = "_title_1u4j4_11";
-const body$1 = "_body_1u4j4_18";
-const footer$1 = "_footer_1u4j4_23";
-const large$5 = "_large_1u4j4_30";
-const small$5 = "_small_1u4j4_36";
-const primary$7 = "_primary_1u4j4_44";
-const success$7 = "_success_1u4j4_51";
-const warning$7 = "_warning_1u4j4_58";
-const danger$7 = "_danger_1u4j4_65";
-const info$7 = "_info_1u4j4_72";
-const secondary$7 = "_secondary_1u4j4_79";
+const card = "_card_et6fi_1";
+const pageBackground$1 = "_pageBackground_et6fi_11";
+const title$1 = "_title_et6fi_18";
+const body$1 = "_body_et6fi_25";
+const footer$1 = "_footer_et6fi_30";
+const large$5 = "_large_et6fi_37";
+const small$5 = "_small_et6fi_43";
+const primary$7 = "_primary_et6fi_51";
+const success$7 = "_success_et6fi_58";
+const warning$7 = "_warning_et6fi_65";
+const danger$7 = "_danger_et6fi_72";
+const info$7 = "_info_et6fi_79";
+const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
+  pageBackground: pageBackground$1,
   title: title$1,
   body: body$1,
   footer: footer$1,
@@ -2143,6 +2152,7 @@ function Card({
     {
       className: classNames(
         styles$9.card,
+        !variant && styles$9.pageBackground,
         styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
         size2 === "large" && styles$9.large,
@@ -25561,28 +25571,28 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_12pwu_7";
-const large = "_large_12pwu_29";
-const small = "_small_12pwu_34";
-const disabled = "_disabled_12pwu_39";
-const icon = "_icon_12pwu_44";
-const content$2 = "_content_12pwu_49";
-const viewport = "_viewport_12pwu_64";
-const slideUpAndFade = "_slideUpAndFade_12pwu_1";
-const slideDownAndFade = "_slideDownAndFade_12pwu_1";
-const slideRightAndFade = "_slideRightAndFade_12pwu_1";
-const slideLeftAndFade = "_slideLeftAndFade_12pwu_1";
-const item = "_item_12pwu_98";
-const itemLabel = "_itemLabel_12pwu_120";
-const itemIcon = "_itemIcon_12pwu_124";
-const separator = "_separator_12pwu_136";
-const arrow = "_arrow_12pwu_141";
-const primary$2 = "_primary_12pwu_148";
-const success$2 = "_success_12pwu_159";
-const warning$2 = "_warning_12pwu_170";
-const danger$2 = "_danger_12pwu_181";
-const info$2 = "_info_12pwu_192";
-const secondary$2 = "_secondary_12pwu_203";
+const trigger = "_trigger_1q8xu_7";
+const large = "_large_1q8xu_29";
+const small = "_small_1q8xu_34";
+const disabled = "_disabled_1q8xu_39";
+const icon = "_icon_1q8xu_44";
+const content$2 = "_content_1q8xu_49";
+const viewport = "_viewport_1q8xu_64";
+const slideUpAndFade = "_slideUpAndFade_1q8xu_1";
+const slideDownAndFade = "_slideDownAndFade_1q8xu_1";
+const slideRightAndFade = "_slideRightAndFade_1q8xu_1";
+const slideLeftAndFade = "_slideLeftAndFade_1q8xu_1";
+const item = "_item_1q8xu_98";
+const itemLabel = "_itemLabel_1q8xu_121";
+const itemIcon = "_itemIcon_1q8xu_125";
+const separator = "_separator_1q8xu_137";
+const arrow = "_arrow_1q8xu_142";
+const primary$2 = "_primary_1q8xu_149";
+const success$2 = "_success_1q8xu_160";
+const warning$2 = "_warning_1q8xu_171";
+const danger$2 = "_danger_1q8xu_182";
+const info$2 = "_info_1q8xu_193";
+const secondary$2 = "_secondary_1q8xu_204";
 const styles$3 = {
   trigger,
   large,
@@ -25640,7 +25650,8 @@ function Dropdown({
     variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer
   );
-  const handleItemSelect = (item2) => {
+  const handleItemSelect = (item2, event) => {
+    item2.onClick?.(event);
     item2.onSelect?.(item2.value);
     onItemSelect?.(item2.value, item2);
   };
@@ -25678,16 +25689,29 @@ function Dropdown({
             );
           }
           const itemKey = item2.key ?? item2.value ?? (typeof item2.label === "string" ? `${item2.label}-${index2}` : `item-${index2}`);
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          const itemContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
+          ] });
+          if (item2.href && !item2.disabled) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Item2,
+              {
+                asChild: true,
+                onSelect: (event) => handleItemSelect(item2, event),
+                className: styles$3.item,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: item2.href, target: item2.target, rel: item2.rel, children: itemContent })
+              },
+              itemKey
+            );
+          }
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
             Item2,
             {
-              onSelect: () => handleItemSelect(item2),
+              onSelect: (event) => handleItemSelect(item2, event),
               disabled: item2.disabled,
               className: styles$3.item,
-              children: [
-                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
-              ]
+              children: itemContent
             },
             itemKey
           );

package/dist/jcui.es.js

@@ -209,7 +209,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1u4j4_1 {
+._card_et6fi_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -218,64 +218,70 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1u4j4_1 ._title_1u4j4_11 {
+._pageBackground_et6fi_11 {
+  --card-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+  --card-color: var(--body-color);
+  background-color: var(--body-bg);
+}
+._card_et6fi_1 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1u4j4_1 ._body_1u4j4_18 {
+._card_et6fi_1 ._body_et6fi_25 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1u4j4_1 ._footer_1u4j4_23 {
+._card_et6fi_1 ._footer_et6fi_30 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1u4j4_30 ._body_1u4j4_18,
-._large_1u4j4_30 ._title_1u4j4_11 {
+._large_et6fi_37 ._body_et6fi_25,
+._large_et6fi_37 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u4j4_36 ._body_1u4j4_18,
-._small_1u4j4_36 ._title_1u4j4_11 {
+._small_et6fi_43 ._body_et6fi_25,
+._small_et6fi_43 ._title_et6fi_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1u4j4_44 {
+._primary_et6fi_51 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1u4j4_51 {
+._success_et6fi_58 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1u4j4_58 {
+._warning_et6fi_65 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1u4j4_65 {
+._danger_et6fi_72 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1u4j4_72 {
+._info_et6fi_79 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1u4j4_79 {
+._secondary_et6fi_86 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -789,7 +795,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_12pwu_7 {
+._trigger_1q8xu_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -802,29 +808,29 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_12pwu_7:hover {
+._trigger_1q8xu_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_12pwu_7:active {
+._trigger_1q8xu_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._large_12pwu_29 {
+._large_1q8xu_29 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_12pwu_34 {
+._small_1q8xu_34 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_12pwu_39 {
+._disabled_1q8xu_39 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_12pwu_44 {
+._icon_1q8xu_44 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_12pwu_49 {
+._content_1q8xu_49 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -838,26 +844,26 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_12pwu_49[data-state="closed"] ._viewport_12pwu_64 {
+._content_1q8xu_49[data-state="closed"] ._viewport_1q8xu_64 {
   animation: none;
 }
-._content_12pwu_49[data-state="open"][data-side="bottom"] ._viewport_12pwu_64 {
-  animation: _slideUpAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="bottom"] ._viewport_1q8xu_64 {
+  animation: _slideUpAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_12pwu_49[data-state="open"][data-side="top"] ._viewport_12pwu_64 {
-  animation: _slideDownAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="top"] ._viewport_1q8xu_64 {
+  animation: _slideDownAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_12pwu_49[data-state="open"][data-side="left"] ._viewport_12pwu_64 {
-  animation: _slideRightAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="left"] ._viewport_1q8xu_64 {
+  animation: _slideRightAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_12pwu_49[data-state="open"][data-side="right"] ._viewport_12pwu_64 {
-  animation: _slideLeftAndFade_12pwu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_1q8xu_49[data-state="open"][data-side="right"] ._viewport_1q8xu_64 {
+  animation: _slideLeftAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_12pwu_64 {
+._viewport_1q8xu_64 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -866,7 +872,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_12pwu_98 {
+._item_1q8xu_98 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -877,92 +883,93 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   cursor: pointer;
   position: relative;
   background: transparent;
+  text-decoration: none;
 }
-._item_12pwu_98[data-highlighted] {
+._item_1q8xu_98[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_12pwu_98[data-disabled] {
+._item_1q8xu_98[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_12pwu_120 {
+._itemLabel_1q8xu_121 {
   flex: 1;
 }
-._itemIcon_12pwu_124 {
+._itemIcon_1q8xu_125 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_12pwu_124 svg {
+._itemIcon_1q8xu_125 svg {
   height: 1.25rem;
 }
-._separator_12pwu_136 {
+._separator_1q8xu_137 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_12pwu_141 {
+._arrow_1q8xu_142 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_12pwu_148 {
+._primary_1q8xu_149 {
   --dropdown-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --button-color: var(--primary-color-800);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_12pwu_148:hover {
+._primary_1q8xu_149:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_12pwu_159 {
+._success_1q8xu_160 {
   --dropdown-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --button-color: var(--success-color-800);
   --border-accent-color: var(--success-color-600);
 }
-._success_12pwu_159:hover {
+._success_1q8xu_160:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_12pwu_170 {
+._warning_1q8xu_171 {
   --dropdown-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --button-color: var(--warning-color-800);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_12pwu_170:hover {
+._warning_1q8xu_171:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_12pwu_181 {
+._danger_1q8xu_182 {
   --dropdown-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --button-color: var(--danger-color-800);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_12pwu_181:hover {
+._danger_1q8xu_182:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_12pwu_192 {
+._info_1q8xu_193 {
   --dropdown-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --button-color: var(--info-color-800);
   --border-accent-color: var(--info-color-600);
 }
-._info_12pwu_192:hover {
+._info_1q8xu_193:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_12pwu_203 {
+._secondary_1q8xu_204 {
   --dropdown-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --button-color: var(--secondary-color-800);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_12pwu_203:hover {
+._secondary_1q8xu_204:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_12pwu_1 {
+@keyframes _slideUpAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -972,7 +979,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_12pwu_1 {
+@keyframes _slideRightAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -982,7 +989,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_12pwu_1 {
+@keyframes _slideDownAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -992,7 +999,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_12pwu_1 {
+@keyframes _slideLeftAndFade_1q8xu_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -1907,7 +1914,7 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$1 = "_pageBackground_105y0_24";
+const pageBackground$2 = "_pageBackground_105y0_24";
 const large$6 = "_large_105y0_34";
 const small$6 = "_small_105y0_39";
 const disabled$6 = "_disabled_105y0_44";
@@ -1919,7 +1926,7 @@ const info$8 = "_info_105y0_103";
 const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
-  pageBackground: pageBackground$1,
+  pageBackground: pageBackground$2,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
@@ -2083,20 +2090,22 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1u4j4_1";
-const title$1 = "_title_1u4j4_11";
-const body$1 = "_body_1u4j4_18";
-const footer$1 = "_footer_1u4j4_23";
-const large$5 = "_large_1u4j4_30";
-const small$5 = "_small_1u4j4_36";
-const primary$7 = "_primary_1u4j4_44";
-const success$7 = "_success_1u4j4_51";
-const warning$7 = "_warning_1u4j4_58";
-const danger$7 = "_danger_1u4j4_65";
-const info$7 = "_info_1u4j4_72";
-const secondary$7 = "_secondary_1u4j4_79";
+const card = "_card_et6fi_1";
+const pageBackground$1 = "_pageBackground_et6fi_11";
+const title$1 = "_title_et6fi_18";
+const body$1 = "_body_et6fi_25";
+const footer$1 = "_footer_et6fi_30";
+const large$5 = "_large_et6fi_37";
+const small$5 = "_small_et6fi_43";
+const primary$7 = "_primary_et6fi_51";
+const success$7 = "_success_et6fi_58";
+const warning$7 = "_warning_et6fi_65";
+const danger$7 = "_danger_et6fi_72";
+const info$7 = "_info_et6fi_79";
+const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
+  pageBackground: pageBackground$1,
   title: title$1,
   body: body$1,
   footer: footer$1,
@@ -2125,6 +2134,7 @@ function Card({
     {
       className: classNames(
         styles$9.card,
+        !variant && styles$9.pageBackground,
         styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
         size2 === "large" && styles$9.large,
@@ -25543,28 +25553,28 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_12pwu_7";
-const large = "_large_12pwu_29";
-const small = "_small_12pwu_34";
-const disabled = "_disabled_12pwu_39";
-const icon = "_icon_12pwu_44";
-const content$2 = "_content_12pwu_49";
-const viewport = "_viewport_12pwu_64";
-const slideUpAndFade = "_slideUpAndFade_12pwu_1";
-const slideDownAndFade = "_slideDownAndFade_12pwu_1";
-const slideRightAndFade = "_slideRightAndFade_12pwu_1";
-const slideLeftAndFade = "_slideLeftAndFade_12pwu_1";
-const item = "_item_12pwu_98";
-const itemLabel = "_itemLabel_12pwu_120";
-const itemIcon = "_itemIcon_12pwu_124";
-const separator = "_separator_12pwu_136";
-const arrow = "_arrow_12pwu_141";
-const primary$2 = "_primary_12pwu_148";
-const success$2 = "_success_12pwu_159";
-const warning$2 = "_warning_12pwu_170";
-const danger$2 = "_danger_12pwu_181";
-const info$2 = "_info_12pwu_192";
-const secondary$2 = "_secondary_12pwu_203";
+const trigger = "_trigger_1q8xu_7";
+const large = "_large_1q8xu_29";
+const small = "_small_1q8xu_34";
+const disabled = "_disabled_1q8xu_39";
+const icon = "_icon_1q8xu_44";
+const content$2 = "_content_1q8xu_49";
+const viewport = "_viewport_1q8xu_64";
+const slideUpAndFade = "_slideUpAndFade_1q8xu_1";
+const slideDownAndFade = "_slideDownAndFade_1q8xu_1";
+const slideRightAndFade = "_slideRightAndFade_1q8xu_1";
+const slideLeftAndFade = "_slideLeftAndFade_1q8xu_1";
+const item = "_item_1q8xu_98";
+const itemLabel = "_itemLabel_1q8xu_121";
+const itemIcon = "_itemIcon_1q8xu_125";
+const separator = "_separator_1q8xu_137";
+const arrow = "_arrow_1q8xu_142";
+const primary$2 = "_primary_1q8xu_149";
+const success$2 = "_success_1q8xu_160";
+const warning$2 = "_warning_1q8xu_171";
+const danger$2 = "_danger_1q8xu_182";
+const info$2 = "_info_1q8xu_193";
+const secondary$2 = "_secondary_1q8xu_204";
 const styles$3 = {
   trigger,
   large,
@@ -25622,7 +25632,8 @@ function Dropdown({
     variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer
   );
-  const handleItemSelect = (item2) => {
+  const handleItemSelect = (item2, event) => {
+    item2.onClick?.(event);
     item2.onSelect?.(item2.value);
     onItemSelect?.(item2.value, item2);
   };
@@ -25660,16 +25671,29 @@ function Dropdown({
             );
           }
           const itemKey = item2.key ?? item2.value ?? (typeof item2.label === "string" ? `${item2.label}-${index2}` : `item-${index2}`);
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          const itemContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
+          ] });
+          if (item2.href && !item2.disabled) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Item2,
+              {
+                asChild: true,
+                onSelect: (event) => handleItemSelect(item2, event),
+                className: styles$3.item,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: item2.href, target: item2.target, rel: item2.rel, children: itemContent })
+              },
+              itemKey
+            );
+          }
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
             Item2,
             {
-              onSelect: () => handleItemSelect(item2),
+              onSelect: (event) => handleItemSelect(item2, event),
               disabled: item2.disabled,
               className: styles$3.item,
-              children: [
-                item2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemIcon, "aria-hidden": true, children: item2.icon }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.itemLabel, children: item2.label })
-              ]
+              children: itemContent
             },
             itemKey
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackcrane/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",