@jackcrane/ui 0.1.16 → 0.1.17

package/dist/jcui.cjs.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
+(function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -988,7 +988,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_1u214_7 {
+._trigger_dqtrb_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -1000,101 +1000,102 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   border: var(--border-thickness) solid var(--border-color);
   cursor: pointer;
 }
-._trigger_1u214_7:hover {
+._trigger_dqtrb_7:hover {
   --select-bg: var(--secondary-color-100);
 }
-._trigger_1u214_7:active {
+._trigger_dqtrb_7:active {
   --select-bg: var(--secondary-color-200);
 }
-._large_1u214_31 {
+._large_dqtrb_31 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u214_36 {
+._small_dqtrb_36 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1u214_41 {
+._disabled_dqtrb_41 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_1u214_46 {
+._icon_dqtrb_46 {
   opacity: 0.7;
 }
 /* Dropdown */
-._content_1u214_52 {
+._content_dqtrb_52 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
+  z-index: 110;
 }
-._item_1u214_57 {
+._item_dqtrb_58 {
   padding: 0.4rem 0.6rem;
   font-size: 0.875rem;
   cursor: pointer;
   outline: none;
 }
-._item_1u214_57[data-highlighted] {
+._item_dqtrb_58[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_1u214_57[data-state="checked"] {
+._item_dqtrb_58[data-state="checked"] {
   background-color: var(--secondary-color-200);
 }
-._item_1u214_57[data-disabled] {
+._item_dqtrb_58[data-disabled] {
   opacity: 0.4;
   pointer-events: none;
 }
 /* Variants (match Button) */
-._primary_1u214_79 {
+._primary_dqtrb_80 {
   --select-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_1u214_79:hover {
+._primary_dqtrb_80:hover {
   --select-bg: var(--primary-color-200);
 }
-._success_1u214_89 {
+._success_dqtrb_90 {
   --select-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_1u214_89:hover {
+._success_dqtrb_90:hover {
   --select-bg: var(--success-color-200);
 }
-._warning_1u214_99 {
+._warning_dqtrb_100 {
   --select-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_1u214_99:hover {
+._warning_dqtrb_100:hover {
   --select-bg: var(--warning-color-200);
 }
-._danger_1u214_109 {
+._danger_dqtrb_110 {
   --select-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_1u214_109:hover {
+._danger_dqtrb_110:hover {
   --select-bg: var(--danger-color-200);
 }
-._info_1u214_119 {
+._info_dqtrb_120 {
   --select-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_1u214_119:hover {
+._info_dqtrb_120:hover {
   --select-bg: var(--info-color-200);
 }
-._secondary_1u214_129 {
+._secondary_dqtrb_130 {
   --select-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_1u214_129:hover {
+._secondary_dqtrb_130:hover {
   --select-bg: var(--secondary-color-200);
 }
 @property --segment-bg {
@@ -1282,7 +1283,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_7ctf7_7 {
+._trigger_131sy_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -1295,38 +1296,38 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_7ctf7_7:hover {
+._trigger_131sy_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_7ctf7_7:active {
+._trigger_131sy_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._pageBackground_7ctf7_29 {
+._pageBackground_131sy_29 {
   --dropdown-bg: var(--body-bg);
   --button-bg: var(--body-bg);
 }
-._pageBackground_7ctf7_29:hover,
-._pageBackground_7ctf7_29:active {
+._pageBackground_131sy_29:hover,
+._pageBackground_131sy_29:active {
   --dropdown-bg: var(--body-bg);
   --button-bg: var(--body-bg);
 }
-._large_7ctf7_40 {
+._large_131sy_40 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_7ctf7_45 {
+._small_131sy_45 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_7ctf7_50 {
+._disabled_131sy_50 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_7ctf7_55 {
+._icon_131sy_55 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_7ctf7_60 {
+._content_131sy_60 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -1335,31 +1336,31 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: inline-flex;
   flex-direction: column;
   width: fit-content;
-  z-index: 10;
+  z-index: 110;
   position: relative;
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
+._content_131sy_60[data-state="closed"] ._viewport_131sy_75 {
   animation: none;
 }
-._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
-  animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="bottom"] ._viewport_131sy_75 {
+  animation: _slideUpAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
-  animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="top"] ._viewport_131sy_75 {
+  animation: _slideDownAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
-  animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="left"] ._viewport_131sy_75 {
+  animation: _slideRightAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
-  animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="right"] ._viewport_131sy_75 {
+  animation: _slideLeftAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_7ctf7_75 {
+._viewport_131sy_75 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -1368,7 +1369,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_7ctf7_109 {
+._item_131sy_109 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -1381,91 +1382,91 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   background: transparent;
   text-decoration: none;
 }
-._item_7ctf7_109[data-highlighted] {
+._item_131sy_109[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_7ctf7_109[data-disabled] {
+._item_131sy_109[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_7ctf7_132 {
+._itemLabel_131sy_132 {
   flex: 1;
 }
-._itemIcon_7ctf7_136 {
+._itemIcon_131sy_136 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_7ctf7_136 svg {
+._itemIcon_131sy_136 svg {
   height: 1.25rem;
 }
-._separator_7ctf7_148 {
+._separator_131sy_148 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_7ctf7_153 {
+._arrow_131sy_153 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_7ctf7_160 {
+._primary_131sy_160 {
   --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_7ctf7_160:hover {
+._primary_131sy_160:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_7ctf7_171 {
+._success_131sy_171 {
   --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_7ctf7_171:hover {
+._success_131sy_171:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_7ctf7_182 {
+._warning_131sy_182 {
   --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_7ctf7_182:hover {
+._warning_131sy_182:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_7ctf7_193 {
+._danger_131sy_193 {
   --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_7ctf7_193:hover {
+._danger_131sy_193:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_7ctf7_204 {
+._info_131sy_204 {
   --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_7ctf7_204:hover {
+._info_131sy_204:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_7ctf7_215 {
+._secondary_131sy_215 {
   --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_7ctf7_215:hover {
+._secondary_131sy_215:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_7ctf7_1 {
+@keyframes _slideUpAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -1475,7 +1476,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_7ctf7_1 {
+@keyframes _slideRightAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -1485,7 +1486,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_7ctf7_1 {
+@keyframes _slideDownAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -1495,7 +1496,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_7ctf7_1 {
+@keyframes _slideLeftAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -2090,7 +2091,7 @@ hr {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   width: 100%;
-}`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+}`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
@@ -25483,19 +25484,19 @@ var Content2$2 = SelectContent;
 var Viewport = SelectViewport;
 var Item = SelectItem;
 var ItemText = SelectItemText;
-const trigger$1 = "_trigger_1u214_7";
-const large$2 = "_large_1u214_31";
-const small$2 = "_small_1u214_36";
-const disabled$2 = "_disabled_1u214_41";
-const icon$1 = "_icon_1u214_46";
-const content$3 = "_content_1u214_52";
-const item$2 = "_item_1u214_57";
-const primary$4 = "_primary_1u214_79";
-const success$4 = "_success_1u214_89";
-const warning$4 = "_warning_1u214_99";
-const danger$4 = "_danger_1u214_109";
-const info$4 = "_info_1u214_119";
-const secondary$4 = "_secondary_1u214_129";
+const trigger$1 = "_trigger_dqtrb_7";
+const large$2 = "_large_dqtrb_31";
+const small$2 = "_small_dqtrb_36";
+const disabled$2 = "_disabled_dqtrb_41";
+const icon$1 = "_icon_dqtrb_46";
+const content$3 = "_content_dqtrb_52";
+const item$2 = "_item_dqtrb_58";
+const primary$4 = "_primary_dqtrb_80";
+const success$4 = "_success_dqtrb_90";
+const warning$4 = "_warning_dqtrb_100";
+const danger$4 = "_danger_dqtrb_110";
+const info$4 = "_info_dqtrb_120";
+const secondary$4 = "_secondary_dqtrb_130";
 const styles$5 = {
   trigger: trigger$1,
   large: large$2,
@@ -26854,29 +26855,29 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_7ctf7_7";
-const pageBackground = "_pageBackground_7ctf7_29";
-const large = "_large_7ctf7_40";
-const small = "_small_7ctf7_45";
-const disabled = "_disabled_7ctf7_50";
-const icon = "_icon_7ctf7_55";
-const content$2 = "_content_7ctf7_60";
-const viewport = "_viewport_7ctf7_75";
-const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
-const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
-const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
-const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
-const item = "_item_7ctf7_109";
-const itemLabel = "_itemLabel_7ctf7_132";
-const itemIcon = "_itemIcon_7ctf7_136";
-const separator = "_separator_7ctf7_148";
-const arrow = "_arrow_7ctf7_153";
-const primary$2 = "_primary_7ctf7_160";
-const success$2 = "_success_7ctf7_171";
-const warning$2 = "_warning_7ctf7_182";
-const danger$2 = "_danger_7ctf7_193";
-const info$2 = "_info_7ctf7_204";
-const secondary$2 = "_secondary_7ctf7_215";
+const trigger = "_trigger_131sy_7";
+const pageBackground = "_pageBackground_131sy_29";
+const large = "_large_131sy_40";
+const small = "_small_131sy_45";
+const disabled = "_disabled_131sy_50";
+const icon = "_icon_131sy_55";
+const content$2 = "_content_131sy_60";
+const viewport = "_viewport_131sy_75";
+const slideUpAndFade = "_slideUpAndFade_131sy_1";
+const slideDownAndFade = "_slideDownAndFade_131sy_1";
+const slideRightAndFade = "_slideRightAndFade_131sy_1";
+const slideLeftAndFade = "_slideLeftAndFade_131sy_1";
+const item = "_item_131sy_109";
+const itemLabel = "_itemLabel_131sy_132";
+const itemIcon = "_itemIcon_131sy_136";
+const separator = "_separator_131sy_148";
+const arrow = "_arrow_131sy_153";
+const primary$2 = "_primary_131sy_160";
+const success$2 = "_success_131sy_171";
+const warning$2 = "_warning_131sy_182";
+const danger$2 = "_danger_131sy_193";
+const info$2 = "_info_131sy_204";
+const secondary$2 = "_secondary_131sy_215";
 const styles$3 = {
   trigger,
   pageBackground,

package/dist/jcui.es.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
+(function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -988,7 +988,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_1u214_7 {
+._trigger_dqtrb_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -1000,101 +1000,102 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   border: var(--border-thickness) solid var(--border-color);
   cursor: pointer;
 }
-._trigger_1u214_7:hover {
+._trigger_dqtrb_7:hover {
   --select-bg: var(--secondary-color-100);
 }
-._trigger_1u214_7:active {
+._trigger_dqtrb_7:active {
   --select-bg: var(--secondary-color-200);
 }
-._large_1u214_31 {
+._large_dqtrb_31 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u214_36 {
+._small_dqtrb_36 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1u214_41 {
+._disabled_dqtrb_41 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_1u214_46 {
+._icon_dqtrb_46 {
   opacity: 0.7;
 }
 /* Dropdown */
-._content_1u214_52 {
+._content_dqtrb_52 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
+  z-index: 110;
 }
-._item_1u214_57 {
+._item_dqtrb_58 {
   padding: 0.4rem 0.6rem;
   font-size: 0.875rem;
   cursor: pointer;
   outline: none;
 }
-._item_1u214_57[data-highlighted] {
+._item_dqtrb_58[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_1u214_57[data-state="checked"] {
+._item_dqtrb_58[data-state="checked"] {
   background-color: var(--secondary-color-200);
 }
-._item_1u214_57[data-disabled] {
+._item_dqtrb_58[data-disabled] {
   opacity: 0.4;
   pointer-events: none;
 }
 /* Variants (match Button) */
-._primary_1u214_79 {
+._primary_dqtrb_80 {
   --select-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_1u214_79:hover {
+._primary_dqtrb_80:hover {
   --select-bg: var(--primary-color-200);
 }
-._success_1u214_89 {
+._success_dqtrb_90 {
   --select-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_1u214_89:hover {
+._success_dqtrb_90:hover {
   --select-bg: var(--success-color-200);
 }
-._warning_1u214_99 {
+._warning_dqtrb_100 {
   --select-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_1u214_99:hover {
+._warning_dqtrb_100:hover {
   --select-bg: var(--warning-color-200);
 }
-._danger_1u214_109 {
+._danger_dqtrb_110 {
   --select-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_1u214_109:hover {
+._danger_dqtrb_110:hover {
   --select-bg: var(--danger-color-200);
 }
-._info_1u214_119 {
+._info_dqtrb_120 {
   --select-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_1u214_119:hover {
+._info_dqtrb_120:hover {
   --select-bg: var(--info-color-200);
 }
-._secondary_1u214_129 {
+._secondary_dqtrb_130 {
   --select-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_1u214_129:hover {
+._secondary_dqtrb_130:hover {
   --select-bg: var(--secondary-color-200);
 }
 @property --segment-bg {
@@ -1282,7 +1283,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_7ctf7_7 {
+._trigger_131sy_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -1295,38 +1296,38 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_7ctf7_7:hover {
+._trigger_131sy_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_7ctf7_7:active {
+._trigger_131sy_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._pageBackground_7ctf7_29 {
+._pageBackground_131sy_29 {
   --dropdown-bg: var(--body-bg);
   --button-bg: var(--body-bg);
 }
-._pageBackground_7ctf7_29:hover,
-._pageBackground_7ctf7_29:active {
+._pageBackground_131sy_29:hover,
+._pageBackground_131sy_29:active {
   --dropdown-bg: var(--body-bg);
   --button-bg: var(--body-bg);
 }
-._large_7ctf7_40 {
+._large_131sy_40 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_7ctf7_45 {
+._small_131sy_45 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_7ctf7_50 {
+._disabled_131sy_50 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_7ctf7_55 {
+._icon_131sy_55 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_7ctf7_60 {
+._content_131sy_60 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -1335,31 +1336,31 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: inline-flex;
   flex-direction: column;
   width: fit-content;
-  z-index: 10;
+  z-index: 110;
   position: relative;
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
+._content_131sy_60[data-state="closed"] ._viewport_131sy_75 {
   animation: none;
 }
-._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
-  animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="bottom"] ._viewport_131sy_75 {
+  animation: _slideUpAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
-  animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="top"] ._viewport_131sy_75 {
+  animation: _slideDownAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
-  animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="left"] ._viewport_131sy_75 {
+  animation: _slideRightAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
-  animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_131sy_60[data-state="open"][data-side="right"] ._viewport_131sy_75 {
+  animation: _slideLeftAndFade_131sy_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_7ctf7_75 {
+._viewport_131sy_75 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -1368,7 +1369,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_7ctf7_109 {
+._item_131sy_109 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -1381,91 +1382,91 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   background: transparent;
   text-decoration: none;
 }
-._item_7ctf7_109[data-highlighted] {
+._item_131sy_109[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_7ctf7_109[data-disabled] {
+._item_131sy_109[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_7ctf7_132 {
+._itemLabel_131sy_132 {
   flex: 1;
 }
-._itemIcon_7ctf7_136 {
+._itemIcon_131sy_136 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_7ctf7_136 svg {
+._itemIcon_131sy_136 svg {
   height: 1.25rem;
 }
-._separator_7ctf7_148 {
+._separator_131sy_148 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_7ctf7_153 {
+._arrow_131sy_153 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_7ctf7_160 {
+._primary_131sy_160 {
   --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_7ctf7_160:hover {
+._primary_131sy_160:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_7ctf7_171 {
+._success_131sy_171 {
   --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_7ctf7_171:hover {
+._success_131sy_171:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_7ctf7_182 {
+._warning_131sy_182 {
   --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_7ctf7_182:hover {
+._warning_131sy_182:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_7ctf7_193 {
+._danger_131sy_193 {
   --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_7ctf7_193:hover {
+._danger_131sy_193:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_7ctf7_204 {
+._info_131sy_204 {
   --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_7ctf7_204:hover {
+._info_131sy_204:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_7ctf7_215 {
+._secondary_131sy_215 {
   --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_7ctf7_215:hover {
+._secondary_131sy_215:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_7ctf7_1 {
+@keyframes _slideUpAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -1475,7 +1476,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_7ctf7_1 {
+@keyframes _slideRightAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -1485,7 +1486,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_7ctf7_1 {
+@keyframes _slideDownAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -1495,7 +1496,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_7ctf7_1 {
+@keyframes _slideLeftAndFade_131sy_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -2090,7 +2091,7 @@ hr {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   width: 100%;
-}`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+}`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
 import * as React from "react";
 import React__default, { useContext, createContext as createContext$1, useId as useId$1, forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect, useCallback, createElement } from "react";
 import * as ReactDOM from "react-dom";
@@ -25465,19 +25466,19 @@ var Content2$2 = SelectContent;
 var Viewport = SelectViewport;
 var Item = SelectItem;
 var ItemText = SelectItemText;
-const trigger$1 = "_trigger_1u214_7";
-const large$2 = "_large_1u214_31";
-const small$2 = "_small_1u214_36";
-const disabled$2 = "_disabled_1u214_41";
-const icon$1 = "_icon_1u214_46";
-const content$3 = "_content_1u214_52";
-const item$2 = "_item_1u214_57";
-const primary$4 = "_primary_1u214_79";
-const success$4 = "_success_1u214_89";
-const warning$4 = "_warning_1u214_99";
-const danger$4 = "_danger_1u214_109";
-const info$4 = "_info_1u214_119";
-const secondary$4 = "_secondary_1u214_129";
+const trigger$1 = "_trigger_dqtrb_7";
+const large$2 = "_large_dqtrb_31";
+const small$2 = "_small_dqtrb_36";
+const disabled$2 = "_disabled_dqtrb_41";
+const icon$1 = "_icon_dqtrb_46";
+const content$3 = "_content_dqtrb_52";
+const item$2 = "_item_dqtrb_58";
+const primary$4 = "_primary_dqtrb_80";
+const success$4 = "_success_dqtrb_90";
+const warning$4 = "_warning_dqtrb_100";
+const danger$4 = "_danger_dqtrb_110";
+const info$4 = "_info_dqtrb_120";
+const secondary$4 = "_secondary_dqtrb_130";
 const styles$5 = {
   trigger: trigger$1,
   large: large$2,
@@ -26836,29 +26837,29 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_7ctf7_7";
-const pageBackground = "_pageBackground_7ctf7_29";
-const large = "_large_7ctf7_40";
-const small = "_small_7ctf7_45";
-const disabled = "_disabled_7ctf7_50";
-const icon = "_icon_7ctf7_55";
-const content$2 = "_content_7ctf7_60";
-const viewport = "_viewport_7ctf7_75";
-const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
-const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
-const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
-const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
-const item = "_item_7ctf7_109";
-const itemLabel = "_itemLabel_7ctf7_132";
-const itemIcon = "_itemIcon_7ctf7_136";
-const separator = "_separator_7ctf7_148";
-const arrow = "_arrow_7ctf7_153";
-const primary$2 = "_primary_7ctf7_160";
-const success$2 = "_success_7ctf7_171";
-const warning$2 = "_warning_7ctf7_182";
-const danger$2 = "_danger_7ctf7_193";
-const info$2 = "_info_7ctf7_204";
-const secondary$2 = "_secondary_7ctf7_215";
+const trigger = "_trigger_131sy_7";
+const pageBackground = "_pageBackground_131sy_29";
+const large = "_large_131sy_40";
+const small = "_small_131sy_45";
+const disabled = "_disabled_131sy_50";
+const icon = "_icon_131sy_55";
+const content$2 = "_content_131sy_60";
+const viewport = "_viewport_131sy_75";
+const slideUpAndFade = "_slideUpAndFade_131sy_1";
+const slideDownAndFade = "_slideDownAndFade_131sy_1";
+const slideRightAndFade = "_slideRightAndFade_131sy_1";
+const slideLeftAndFade = "_slideLeftAndFade_131sy_1";
+const item = "_item_131sy_109";
+const itemLabel = "_itemLabel_131sy_132";
+const itemIcon = "_itemIcon_131sy_136";
+const separator = "_separator_131sy_148";
+const arrow = "_arrow_131sy_153";
+const primary$2 = "_primary_131sy_160";
+const success$2 = "_success_131sy_171";
+const warning$2 = "_warning_131sy_182";
+const danger$2 = "_danger_131sy_193";
+const info$2 = "_info_131sy_204";
+const secondary$2 = "_secondary_131sy_215";
 const styles$3 = {
   trigger,
   pageBackground,

package/package.json

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