@jackcrane/ui 0.1.24 → 0.1.26

package/dist/components/Select/select.d.ts

@@ -8,8 +8,10 @@
  * @param {string} props.variant
  * @param {string} props.size
  * @param {boolean} props.disabled
+ * @param {string} props.label
+ * @param {string} props.id
  */
-export default function SelectInput({ options, value, onValueChange, variant, size, disabled, chamfer, loading, }: {
+export default function SelectInput({ options, value, onValueChange, variant, size, disabled, chamfer, loading, label, id, }: {
     options: Array<{
         value: string;
         label: string;
@@ -20,4 +22,6 @@ export default function SelectInput({ options, value, onValueChange, variant, si
     variant: string;
     size: string;
     disabled: boolean;
+    label: string;
+    id: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/jcui.cjs.js

@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_15n7t_1 {
+._card_1b88d_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,30 +226,30 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_15n7t_11 {
+._pageBackground_1b88d_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_15n7t_1 ._title_15n7t_18 {
+._card_1b88d_1 ._title_1b88d_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_15n7t_1 ._titleCollapsed_15n7t_25 {
+._card_1b88d_1 ._titleCollapsed_1b88d_25 {
   border-bottom: 0;
 }
-._card_15n7t_1 ._titleContent_15n7t_29 {
+._card_1b88d_1 ._titleContent_1b88d_29 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-._card_15n7t_1 ._titleInteractive_15n7t_35 {
+._card_1b88d_1 ._titleInteractive_1b88d_35 {
   cursor: pointer;
 }
-._card_15n7t_1 ._chevron_15n7t_39 {
+._card_1b88d_1 ._chevron_1b88d_39 {
   margin-left: auto;
   width: 0.5rem;
   height: 0.5rem;
@@ -259,94 +259,95 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   flex-shrink: 0;
   cursor: inherit;
 }
-._card_15n7t_1 ._chevronExpanded_15n7t_50 {
+._card_1b88d_1 ._chevronExpanded_1b88d_50 {
   transform: rotate(45deg);
 }
-._card_15n7t_1 ._chevronCollapsed_15n7t_54 {
+._card_1b88d_1 ._chevronCollapsed_1b88d_54 {
   transform: rotate(-45deg);
 }
-._card_15n7t_1 ._titleInteractive_15n7t_35:hover ._chevronExpanded_15n7t_50,
-._card_15n7t_1 ._titleInteractive_15n7t_35:focus-visible ._chevronExpanded_15n7t_50 {
+._card_1b88d_1 ._titleInteractive_1b88d_35:hover ._chevronExpanded_1b88d_50,
+._card_1b88d_1 ._titleInteractive_1b88d_35:focus-visible ._chevronExpanded_1b88d_50 {
   transform: rotate(30deg);
 }
-._card_15n7t_1 ._titleInteractive_15n7t_35:hover ._chevronCollapsed_15n7t_54,
-._card_15n7t_1 ._titleInteractive_15n7t_35:focus-visible ._chevronCollapsed_15n7t_54 {
+._card_1b88d_1 ._titleInteractive_1b88d_35:hover ._chevronCollapsed_1b88d_54,
+._card_1b88d_1 ._titleInteractive_1b88d_35:focus-visible ._chevronCollapsed_1b88d_54 {
   transform: rotate(-30deg);
 }
-._card_15n7t_1 ._content_15n7t_68 {
+._card_1b88d_1 ._content_1b88d_68 {
   display: grid;
   grid-template-rows: 1fr;
   transition:
     grid-template-rows 0.2s ease,
     opacity 0.2s ease;
+  flex: 1;
 }
-._card_15n7t_1 ._contentInner_15n7t_76 {
+._card_1b88d_1 ._contentInner_1b88d_77 {
   overflow: hidden;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-._card_15n7t_1 ._contentCollapsed_15n7t_83 {
+._card_1b88d_1 ._contentCollapsed_1b88d_84 {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-._card_15n7t_1 ._body_15n7t_88 {
+._card_1b88d_1 ._body_1b88d_89 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_15n7t_1 ._body_15n7t_88 > hr {
+._card_1b88d_1 ._body_1b88d_89 > hr {
   margin: 1rem 0;
   transform: translateX(-16px);
   width: calc(100% + 32px);
 }
-._card_15n7t_1 ._footer_15n7t_99 {
+._card_1b88d_1 ._footer_1b88d_100 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_15n7t_106 ._body_15n7t_88,
-._large_15n7t_106 ._title_15n7t_18 {
+._large_1b88d_107 ._body_1b88d_89,
+._large_1b88d_107 ._title_1b88d_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_15n7t_112 ._body_15n7t_88,
-._small_15n7t_112 ._title_15n7t_18 {
+._small_1b88d_113 ._body_1b88d_89,
+._small_1b88d_113 ._title_1b88d_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_15n7t_120 {
+._primary_1b88d_121 {
   --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_15n7t_127 {
+._success_1b88d_128 {
   --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_15n7t_134 {
+._warning_1b88d_135 {
   --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_15n7t_141 {
+._danger_1b88d_142 {
   --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_15n7t_148 {
+._info_1b88d_149 {
   --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_15n7t_155 {
+._secondary_1b88d_156 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1045,7 +1046,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_dqtrb_7 {
+._trigger_1m0ut_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -1057,104 +1058,111 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   border: var(--border-thickness) solid var(--border-color);
   cursor: pointer;
 }
-._trigger_dqtrb_7:hover {
+._trigger_1m0ut_7:hover {
   --select-bg: var(--secondary-color-100);
 }
-._trigger_dqtrb_7:active {
+._trigger_1m0ut_7:active {
   --select-bg: var(--secondary-color-200);
 }
-._large_dqtrb_31 {
+._large_1m0ut_31 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_dqtrb_36 {
+._small_1m0ut_36 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_dqtrb_41 {
+._disabled_1m0ut_41 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_dqtrb_46 {
+._icon_1m0ut_46 {
   opacity: 0.7;
 }
 /* Dropdown */
-._content_dqtrb_52 {
+._content_1m0ut_52 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   z-index: 110;
 }
-._item_dqtrb_58 {
+._item_1m0ut_58 {
   padding: 0.4rem 0.6rem;
   font-size: 0.875rem;
   cursor: pointer;
   outline: none;
 }
-._item_dqtrb_58[data-highlighted] {
+._item_1m0ut_58[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_dqtrb_58[data-state="checked"] {
+._item_1m0ut_58[data-state="checked"] {
   background-color: var(--secondary-color-200);
 }
-._item_dqtrb_58[data-disabled] {
+._item_1m0ut_58[data-disabled] {
   opacity: 0.4;
   pointer-events: none;
 }
 /* Variants (match Button) */
-._primary_dqtrb_80 {
+._primary_1m0ut_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_dqtrb_80:hover {
+._primary_1m0ut_80:hover {
   --select-bg: var(--primary-color-200);
 }
-._success_dqtrb_90 {
+._success_1m0ut_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_dqtrb_90:hover {
+._success_1m0ut_90:hover {
   --select-bg: var(--success-color-200);
 }
-._warning_dqtrb_100 {
+._warning_1m0ut_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_dqtrb_100:hover {
+._warning_1m0ut_100:hover {
   --select-bg: var(--warning-color-200);
 }
-._danger_dqtrb_110 {
+._danger_1m0ut_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_dqtrb_110:hover {
+._danger_1m0ut_110:hover {
   --select-bg: var(--danger-color-200);
 }
-._info_dqtrb_120 {
+._info_1m0ut_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_dqtrb_120:hover {
+._info_1m0ut_120:hover {
   --select-bg: var(--info-color-200);
 }
-._secondary_dqtrb_130 {
+._secondary_1m0ut_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_dqtrb_130:hover {
+._secondary_1m0ut_130:hover {
   --select-bg: var(--secondary-color-200);
 }
+._field_1m0ut_140 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+._label_1m0ut_146 {
+}
 @property --segment-bg {
   syntax: "<color>";
   inherits: true;
@@ -2677,28 +2685,28 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_15n7t_1";
-const pageBackground$3 = "_pageBackground_15n7t_11";
-const title$1 = "_title_15n7t_18";
-const titleCollapsed = "_titleCollapsed_15n7t_25";
-const titleContent = "_titleContent_15n7t_29";
-const titleInteractive = "_titleInteractive_15n7t_35";
-const chevron = "_chevron_15n7t_39";
-const chevronExpanded = "_chevronExpanded_15n7t_50";
-const chevronCollapsed = "_chevronCollapsed_15n7t_54";
-const content$4 = "_content_15n7t_68";
-const contentInner = "_contentInner_15n7t_76";
-const contentCollapsed = "_contentCollapsed_15n7t_83";
-const body$1 = "_body_15n7t_88";
-const footer$1 = "_footer_15n7t_99";
-const large$7 = "_large_15n7t_106";
-const small$7 = "_small_15n7t_112";
-const primary$9 = "_primary_15n7t_120";
-const success$9 = "_success_15n7t_127";
-const warning$9 = "_warning_15n7t_134";
-const danger$9 = "_danger_15n7t_141";
-const info$9 = "_info_15n7t_148";
-const secondary$9 = "_secondary_15n7t_155";
+const card = "_card_1b88d_1";
+const pageBackground$3 = "_pageBackground_1b88d_11";
+const title$1 = "_title_1b88d_18";
+const titleCollapsed = "_titleCollapsed_1b88d_25";
+const titleContent = "_titleContent_1b88d_29";
+const titleInteractive = "_titleInteractive_1b88d_35";
+const chevron = "_chevron_1b88d_39";
+const chevronExpanded = "_chevronExpanded_1b88d_50";
+const chevronCollapsed = "_chevronCollapsed_1b88d_54";
+const content$4 = "_content_1b88d_68";
+const contentInner = "_contentInner_1b88d_77";
+const contentCollapsed = "_contentCollapsed_1b88d_84";
+const body$1 = "_body_1b88d_89";
+const footer$1 = "_footer_1b88d_100";
+const large$7 = "_large_1b88d_107";
+const small$7 = "_small_1b88d_113";
+const primary$9 = "_primary_1b88d_121";
+const success$9 = "_success_1b88d_128";
+const warning$9 = "_warning_1b88d_135";
+const danger$9 = "_danger_1b88d_142";
+const info$9 = "_info_1b88d_149";
+const secondary$9 = "_secondary_1b88d_156";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
@@ -3545,7 +3553,7 @@ const indicator$1 = "_indicator_178xv_76";
 const large$6 = "_large_178xv_94";
 const small$6 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
-const label$3 = "_label_178xv_109";
+const label$4 = "_label_178xv_109";
 const primary$8 = "_primary_178xv_117";
 const secondary$8 = "_secondary_178xv_126";
 const success$8 = "_success_178xv_135";
@@ -3560,7 +3568,7 @@ const styles$a = {
   large: large$6,
   small: small$6,
   disabledBox,
-  label: label$3,
+  label: label$4,
   primary: primary$8,
   secondary: secondary$8,
   success: success$8,
@@ -12050,7 +12058,7 @@ function isBigIntType(type) {
 const reindex = /* @__PURE__ */ Symbol("reindex");
 function valueof(data, value, type) {
   const valueType = typeof value;
-  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field$1(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
+  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field$2(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
 }
 function maybeTake(values2, index2) {
   return values2 != null && index2 ? take(values2, index2) : values2;
@@ -12068,7 +12076,7 @@ function vectorToArray(vector) {
   return vector.nullCount ? vector.toJSON() : vector.toArray();
 }
 const singleton = [null];
-const field$1 = (name) => (d2) => {
+const field$2 = (name) => (d2) => {
   const v2 = d2[name];
   return v2 === void 0 && d2.type === "Feature" ? d2.properties?.[name] : v2;
 };
@@ -17037,7 +17045,7 @@ function maybeOrder(order, offset2, ky2) {
       case "inside-out":
         return orderInsideOut(compare);
     }
-    return orderAccessor(field$1(order));
+    return orderAccessor(field$2(order));
   }
   if (typeof order === "function") return (order.length === 1 ? orderAccessor : orderComparator)(order);
   if (isArray(order)) return orderGiven(order);
@@ -19867,8 +19875,8 @@ const warning$7 = "_warning_1ymvl_72";
 const danger$7 = "_danger_1ymvl_80";
 const info$7 = "_info_1ymvl_88";
 const secondary$7 = "_secondary_1ymvl_97";
-const field = "_field_1ymvl_106";
-const label$2 = "_label_1ymvl_112";
+const field$1 = "_field_1ymvl_106";
+const label$3 = "_label_1ymvl_112";
 const styles$8 = {
   input: input$1,
   pageBackground: pageBackground$2,
@@ -19881,8 +19889,8 @@ const styles$8 = {
   danger: danger$7,
   info: info$7,
   secondary: secondary$7,
-  field,
-  label: label$2
+  field: field$1,
+  label: label$3
 };
 function Input({
   variant,
@@ -19930,7 +19938,7 @@ function Input({
   ] });
 }
 const root$2 = "_root_i158m_7";
-const label$1 = "_label_i158m_14";
+const label$2 = "_label_i158m_14";
 const dropzone = "_dropzone_i158m_18";
 const pageBackground$1 = "_pageBackground_i158m_42";
 const input = "_input_i158m_54";
@@ -19966,7 +19974,7 @@ const info$6 = "_info_i158m_333";
 const secondary$6 = "_secondary_i158m_345";
 const styles$7 = {
   root: root$2,
-  label: label$1,
+  label: label$2,
   dropzone,
   pageBackground: pageBackground$1,
   input,
@@ -21011,7 +21019,7 @@ const dot = "_dot_hpxu6_81";
 const large$3 = "_large_hpxu6_88";
 const small$3 = "_small_hpxu6_93";
 const disabledDot = "_disabledDot_hpxu6_98";
-const label = "_label_hpxu6_102";
+const label$1 = "_label_hpxu6_102";
 const chamfer = "_chamfer_hpxu6_107";
 const primary$5 = "_primary_hpxu6_112";
 const secondary$5 = "_secondary_hpxu6_121";
@@ -21029,7 +21037,7 @@ const styles$6 = {
   large: large$3,
   small: small$3,
   disabledDot,
-  label,
+  label: label$1,
   chamfer,
   primary: primary$5,
   secondary: secondary$5,
@@ -25629,19 +25637,21 @@ var Content2$2 = SelectContent;
 var Viewport = SelectViewport;
 var Item = SelectItem;
 var ItemText = SelectItemText;
-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 trigger$1 = "_trigger_1m0ut_7";
+const large$2 = "_large_1m0ut_31";
+const small$2 = "_small_1m0ut_36";
+const disabled$2 = "_disabled_1m0ut_41";
+const icon$1 = "_icon_1m0ut_46";
+const content$3 = "_content_1m0ut_52";
+const item$2 = "_item_1m0ut_58";
+const primary$4 = "_primary_1m0ut_80";
+const success$4 = "_success_1m0ut_90";
+const warning$4 = "_warning_1m0ut_100";
+const danger$4 = "_danger_1m0ut_110";
+const info$4 = "_info_1m0ut_120";
+const secondary$4 = "_secondary_1m0ut_130";
+const field = "_field_1m0ut_140";
+const label = "_label_1m0ut_146";
 const styles$5 = {
   trigger: trigger$1,
   large: large$2,
@@ -25655,7 +25665,9 @@ const styles$5 = {
   warning: warning$4,
   danger: danger$4,
   info: info$4,
-  secondary: secondary$4
+  secondary: secondary$4,
+  field,
+  label
 };
 function SelectInput({
   options,
@@ -25665,57 +25677,65 @@ function SelectInput({
   size: size2,
   disabled: disabled2,
   chamfer: chamfer2 = true,
-  loading = false
+  loading = false,
+  label: label2,
+  id: id2
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Root2$2,
-    {
-      value,
-      onValueChange,
-      disabled: disabled2 || loading,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Trigger$2,
-          {
-            className: clsx(
-              styles$5.trigger,
-              styles$5[variant],
-              chamfer2 && chamferStyles.chamfer,
-              size2 === "large" && styles$5.large,
-              size2 === "small" && styles$5.small,
-              disabled2 && styles$5.disabled,
-              disabled2 && hatchStyles.hatch
-              // loading && styles.disabled
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
-              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$5.icon, children: "▾" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Content2$2,
-          {
-            className: classNames(
-              styles$5.content,
-              chamfer2 && chamferStyles.chamfer
-            ),
-            sideOffset: 6,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Viewport, { children: options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Item,
-              {
-                value: opt.value,
-                disabled: opt.disabled,
-                className: styles$5.item,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
-              },
-              opt.value
-            )) })
-          }
-        ) })
-      ]
-    }
-  );
+  const generatedId = React.useId();
+  const triggerId = id2 ?? generatedId;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$5.label, htmlFor: triggerId, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Root2$2,
+      {
+        value,
+        onValueChange,
+        disabled: disabled2 || loading,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Trigger$2,
+            {
+              id: triggerId,
+              className: clsx(
+                styles$5.trigger,
+                styles$5[variant],
+                chamfer2 && chamferStyles.chamfer,
+                size2 === "large" && styles$5.large,
+                size2 === "small" && styles$5.small,
+                disabled2 && styles$5.disabled,
+                disabled2 && hatchStyles.hatch
+                // loading && styles.disabled
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
+                loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$5.icon, children: "▾" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Content2$2,
+            {
+              className: classNames(
+                styles$5.content,
+                chamfer2 && chamferStyles.chamfer
+              ),
+              sideOffset: 6,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Viewport, { children: options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Item,
+                {
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  className: styles$5.item,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
+                },
+                opt.value
+              )) })
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
 }
 var NAME = "Toggle";
 var Toggle = React__namespace.forwardRef((props, forwardedRef) => {

package/dist/jcui.es.js

@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_15n7t_1 {
+._card_1b88d_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,30 +226,30 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_15n7t_11 {
+._pageBackground_1b88d_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_15n7t_1 ._title_15n7t_18 {
+._card_1b88d_1 ._title_1b88d_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_15n7t_1 ._titleCollapsed_15n7t_25 {
+._card_1b88d_1 ._titleCollapsed_1b88d_25 {
   border-bottom: 0;
 }
-._card_15n7t_1 ._titleContent_15n7t_29 {
+._card_1b88d_1 ._titleContent_1b88d_29 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-._card_15n7t_1 ._titleInteractive_15n7t_35 {
+._card_1b88d_1 ._titleInteractive_1b88d_35 {
   cursor: pointer;
 }
-._card_15n7t_1 ._chevron_15n7t_39 {
+._card_1b88d_1 ._chevron_1b88d_39 {
   margin-left: auto;
   width: 0.5rem;
   height: 0.5rem;
@@ -259,94 +259,95 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   flex-shrink: 0;
   cursor: inherit;
 }
-._card_15n7t_1 ._chevronExpanded_15n7t_50 {
+._card_1b88d_1 ._chevronExpanded_1b88d_50 {
   transform: rotate(45deg);
 }
-._card_15n7t_1 ._chevronCollapsed_15n7t_54 {
+._card_1b88d_1 ._chevronCollapsed_1b88d_54 {
   transform: rotate(-45deg);
 }
-._card_15n7t_1 ._titleInteractive_15n7t_35:hover ._chevronExpanded_15n7t_50,
-._card_15n7t_1 ._titleInteractive_15n7t_35:focus-visible ._chevronExpanded_15n7t_50 {
+._card_1b88d_1 ._titleInteractive_1b88d_35:hover ._chevronExpanded_1b88d_50,
+._card_1b88d_1 ._titleInteractive_1b88d_35:focus-visible ._chevronExpanded_1b88d_50 {
   transform: rotate(30deg);
 }
-._card_15n7t_1 ._titleInteractive_15n7t_35:hover ._chevronCollapsed_15n7t_54,
-._card_15n7t_1 ._titleInteractive_15n7t_35:focus-visible ._chevronCollapsed_15n7t_54 {
+._card_1b88d_1 ._titleInteractive_1b88d_35:hover ._chevronCollapsed_1b88d_54,
+._card_1b88d_1 ._titleInteractive_1b88d_35:focus-visible ._chevronCollapsed_1b88d_54 {
   transform: rotate(-30deg);
 }
-._card_15n7t_1 ._content_15n7t_68 {
+._card_1b88d_1 ._content_1b88d_68 {
   display: grid;
   grid-template-rows: 1fr;
   transition:
     grid-template-rows 0.2s ease,
     opacity 0.2s ease;
+  flex: 1;
 }
-._card_15n7t_1 ._contentInner_15n7t_76 {
+._card_1b88d_1 ._contentInner_1b88d_77 {
   overflow: hidden;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-._card_15n7t_1 ._contentCollapsed_15n7t_83 {
+._card_1b88d_1 ._contentCollapsed_1b88d_84 {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-._card_15n7t_1 ._body_15n7t_88 {
+._card_1b88d_1 ._body_1b88d_89 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_15n7t_1 ._body_15n7t_88 > hr {
+._card_1b88d_1 ._body_1b88d_89 > hr {
   margin: 1rem 0;
   transform: translateX(-16px);
   width: calc(100% + 32px);
 }
-._card_15n7t_1 ._footer_15n7t_99 {
+._card_1b88d_1 ._footer_1b88d_100 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_15n7t_106 ._body_15n7t_88,
-._large_15n7t_106 ._title_15n7t_18 {
+._large_1b88d_107 ._body_1b88d_89,
+._large_1b88d_107 ._title_1b88d_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_15n7t_112 ._body_15n7t_88,
-._small_15n7t_112 ._title_15n7t_18 {
+._small_1b88d_113 ._body_1b88d_89,
+._small_1b88d_113 ._title_1b88d_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_15n7t_120 {
+._primary_1b88d_121 {
   --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_15n7t_127 {
+._success_1b88d_128 {
   --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_15n7t_134 {
+._warning_1b88d_135 {
   --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_15n7t_141 {
+._danger_1b88d_142 {
   --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_15n7t_148 {
+._info_1b88d_149 {
   --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_15n7t_155 {
+._secondary_1b88d_156 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1045,7 +1046,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_dqtrb_7 {
+._trigger_1m0ut_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -1057,104 +1058,111 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   border: var(--border-thickness) solid var(--border-color);
   cursor: pointer;
 }
-._trigger_dqtrb_7:hover {
+._trigger_1m0ut_7:hover {
   --select-bg: var(--secondary-color-100);
 }
-._trigger_dqtrb_7:active {
+._trigger_1m0ut_7:active {
   --select-bg: var(--secondary-color-200);
 }
-._large_dqtrb_31 {
+._large_1m0ut_31 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_dqtrb_36 {
+._small_1m0ut_36 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_dqtrb_41 {
+._disabled_1m0ut_41 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_dqtrb_46 {
+._icon_1m0ut_46 {
   opacity: 0.7;
 }
 /* Dropdown */
-._content_dqtrb_52 {
+._content_1m0ut_52 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   z-index: 110;
 }
-._item_dqtrb_58 {
+._item_1m0ut_58 {
   padding: 0.4rem 0.6rem;
   font-size: 0.875rem;
   cursor: pointer;
   outline: none;
 }
-._item_dqtrb_58[data-highlighted] {
+._item_1m0ut_58[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_dqtrb_58[data-state="checked"] {
+._item_1m0ut_58[data-state="checked"] {
   background-color: var(--secondary-color-200);
 }
-._item_dqtrb_58[data-disabled] {
+._item_1m0ut_58[data-disabled] {
   opacity: 0.4;
   pointer-events: none;
 }
 /* Variants (match Button) */
-._primary_dqtrb_80 {
+._primary_1m0ut_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_dqtrb_80:hover {
+._primary_1m0ut_80:hover {
   --select-bg: var(--primary-color-200);
 }
-._success_dqtrb_90 {
+._success_1m0ut_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_dqtrb_90:hover {
+._success_1m0ut_90:hover {
   --select-bg: var(--success-color-200);
 }
-._warning_dqtrb_100 {
+._warning_1m0ut_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_dqtrb_100:hover {
+._warning_1m0ut_100:hover {
   --select-bg: var(--warning-color-200);
 }
-._danger_dqtrb_110 {
+._danger_1m0ut_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_dqtrb_110:hover {
+._danger_1m0ut_110:hover {
   --select-bg: var(--danger-color-200);
 }
-._info_dqtrb_120 {
+._info_1m0ut_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_dqtrb_120:hover {
+._info_1m0ut_120:hover {
   --select-bg: var(--info-color-200);
 }
-._secondary_dqtrb_130 {
+._secondary_1m0ut_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_dqtrb_130:hover {
+._secondary_1m0ut_130:hover {
   --select-bg: var(--secondary-color-200);
 }
+._field_1m0ut_140 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+._label_1m0ut_146 {
+}
 @property --segment-bg {
   syntax: "<color>";
   inherits: true;
@@ -2659,28 +2667,28 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_15n7t_1";
-const pageBackground$3 = "_pageBackground_15n7t_11";
-const title$1 = "_title_15n7t_18";
-const titleCollapsed = "_titleCollapsed_15n7t_25";
-const titleContent = "_titleContent_15n7t_29";
-const titleInteractive = "_titleInteractive_15n7t_35";
-const chevron = "_chevron_15n7t_39";
-const chevronExpanded = "_chevronExpanded_15n7t_50";
-const chevronCollapsed = "_chevronCollapsed_15n7t_54";
-const content$4 = "_content_15n7t_68";
-const contentInner = "_contentInner_15n7t_76";
-const contentCollapsed = "_contentCollapsed_15n7t_83";
-const body$1 = "_body_15n7t_88";
-const footer$1 = "_footer_15n7t_99";
-const large$7 = "_large_15n7t_106";
-const small$7 = "_small_15n7t_112";
-const primary$9 = "_primary_15n7t_120";
-const success$9 = "_success_15n7t_127";
-const warning$9 = "_warning_15n7t_134";
-const danger$9 = "_danger_15n7t_141";
-const info$9 = "_info_15n7t_148";
-const secondary$9 = "_secondary_15n7t_155";
+const card = "_card_1b88d_1";
+const pageBackground$3 = "_pageBackground_1b88d_11";
+const title$1 = "_title_1b88d_18";
+const titleCollapsed = "_titleCollapsed_1b88d_25";
+const titleContent = "_titleContent_1b88d_29";
+const titleInteractive = "_titleInteractive_1b88d_35";
+const chevron = "_chevron_1b88d_39";
+const chevronExpanded = "_chevronExpanded_1b88d_50";
+const chevronCollapsed = "_chevronCollapsed_1b88d_54";
+const content$4 = "_content_1b88d_68";
+const contentInner = "_contentInner_1b88d_77";
+const contentCollapsed = "_contentCollapsed_1b88d_84";
+const body$1 = "_body_1b88d_89";
+const footer$1 = "_footer_1b88d_100";
+const large$7 = "_large_1b88d_107";
+const small$7 = "_small_1b88d_113";
+const primary$9 = "_primary_1b88d_121";
+const success$9 = "_success_1b88d_128";
+const warning$9 = "_warning_1b88d_135";
+const danger$9 = "_danger_1b88d_142";
+const info$9 = "_info_1b88d_149";
+const secondary$9 = "_secondary_1b88d_156";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
@@ -3527,7 +3535,7 @@ const indicator$1 = "_indicator_178xv_76";
 const large$6 = "_large_178xv_94";
 const small$6 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
-const label$3 = "_label_178xv_109";
+const label$4 = "_label_178xv_109";
 const primary$8 = "_primary_178xv_117";
 const secondary$8 = "_secondary_178xv_126";
 const success$8 = "_success_178xv_135";
@@ -3542,7 +3550,7 @@ const styles$a = {
   large: large$6,
   small: small$6,
   disabledBox,
-  label: label$3,
+  label: label$4,
   primary: primary$8,
   secondary: secondary$8,
   success: success$8,
@@ -12032,7 +12040,7 @@ function isBigIntType(type) {
 const reindex = /* @__PURE__ */ Symbol("reindex");
 function valueof(data, value, type) {
   const valueType = typeof value;
-  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field$1(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
+  return valueType === "string" ? isArrowTable(data) ? maybeTypedArrowify(data.getChild(value), type) : maybeTypedMap(data, field$2(value), type) : valueType === "function" ? maybeTypedMap(data, value, type) : valueType === "number" || value instanceof Date || valueType === "boolean" ? map(data, constant(value), type) : typeof value?.transform === "function" ? maybeTypedArrayify(value.transform(data), type) : maybeTake(maybeTypedArrayify(value, type), data?.[reindex]);
 }
 function maybeTake(values2, index2) {
   return values2 != null && index2 ? take(values2, index2) : values2;
@@ -12050,7 +12058,7 @@ function vectorToArray(vector) {
   return vector.nullCount ? vector.toJSON() : vector.toArray();
 }
 const singleton = [null];
-const field$1 = (name) => (d2) => {
+const field$2 = (name) => (d2) => {
   const v2 = d2[name];
   return v2 === void 0 && d2.type === "Feature" ? d2.properties?.[name] : v2;
 };
@@ -17019,7 +17027,7 @@ function maybeOrder(order, offset2, ky2) {
       case "inside-out":
         return orderInsideOut(compare);
     }
-    return orderAccessor(field$1(order));
+    return orderAccessor(field$2(order));
   }
   if (typeof order === "function") return (order.length === 1 ? orderAccessor : orderComparator)(order);
   if (isArray(order)) return orderGiven(order);
@@ -19849,8 +19857,8 @@ const warning$7 = "_warning_1ymvl_72";
 const danger$7 = "_danger_1ymvl_80";
 const info$7 = "_info_1ymvl_88";
 const secondary$7 = "_secondary_1ymvl_97";
-const field = "_field_1ymvl_106";
-const label$2 = "_label_1ymvl_112";
+const field$1 = "_field_1ymvl_106";
+const label$3 = "_label_1ymvl_112";
 const styles$8 = {
   input: input$1,
   pageBackground: pageBackground$2,
@@ -19863,8 +19871,8 @@ const styles$8 = {
   danger: danger$7,
   info: info$7,
   secondary: secondary$7,
-  field,
-  label: label$2
+  field: field$1,
+  label: label$3
 };
 function Input({
   variant,
@@ -19912,7 +19920,7 @@ function Input({
   ] });
 }
 const root$2 = "_root_i158m_7";
-const label$1 = "_label_i158m_14";
+const label$2 = "_label_i158m_14";
 const dropzone = "_dropzone_i158m_18";
 const pageBackground$1 = "_pageBackground_i158m_42";
 const input = "_input_i158m_54";
@@ -19948,7 +19956,7 @@ const info$6 = "_info_i158m_333";
 const secondary$6 = "_secondary_i158m_345";
 const styles$7 = {
   root: root$2,
-  label: label$1,
+  label: label$2,
   dropzone,
   pageBackground: pageBackground$1,
   input,
@@ -20993,7 +21001,7 @@ const dot = "_dot_hpxu6_81";
 const large$3 = "_large_hpxu6_88";
 const small$3 = "_small_hpxu6_93";
 const disabledDot = "_disabledDot_hpxu6_98";
-const label = "_label_hpxu6_102";
+const label$1 = "_label_hpxu6_102";
 const chamfer = "_chamfer_hpxu6_107";
 const primary$5 = "_primary_hpxu6_112";
 const secondary$5 = "_secondary_hpxu6_121";
@@ -21011,7 +21019,7 @@ const styles$6 = {
   large: large$3,
   small: small$3,
   disabledDot,
-  label,
+  label: label$1,
   chamfer,
   primary: primary$5,
   secondary: secondary$5,
@@ -25611,19 +25619,21 @@ var Content2$2 = SelectContent;
 var Viewport = SelectViewport;
 var Item = SelectItem;
 var ItemText = SelectItemText;
-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 trigger$1 = "_trigger_1m0ut_7";
+const large$2 = "_large_1m0ut_31";
+const small$2 = "_small_1m0ut_36";
+const disabled$2 = "_disabled_1m0ut_41";
+const icon$1 = "_icon_1m0ut_46";
+const content$3 = "_content_1m0ut_52";
+const item$2 = "_item_1m0ut_58";
+const primary$4 = "_primary_1m0ut_80";
+const success$4 = "_success_1m0ut_90";
+const warning$4 = "_warning_1m0ut_100";
+const danger$4 = "_danger_1m0ut_110";
+const info$4 = "_info_1m0ut_120";
+const secondary$4 = "_secondary_1m0ut_130";
+const field = "_field_1m0ut_140";
+const label = "_label_1m0ut_146";
 const styles$5 = {
   trigger: trigger$1,
   large: large$2,
@@ -25637,7 +25647,9 @@ const styles$5 = {
   warning: warning$4,
   danger: danger$4,
   info: info$4,
-  secondary: secondary$4
+  secondary: secondary$4,
+  field,
+  label
 };
 function SelectInput({
   options,
@@ -25647,57 +25659,65 @@ function SelectInput({
   size: size2,
   disabled: disabled2,
   chamfer: chamfer2 = true,
-  loading = false
+  loading = false,
+  label: label2,
+  id: id2
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Root2$2,
-    {
-      value,
-      onValueChange,
-      disabled: disabled2 || loading,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Trigger$2,
-          {
-            className: clsx(
-              styles$5.trigger,
-              styles$5[variant],
-              chamfer2 && chamferStyles.chamfer,
-              size2 === "large" && styles$5.large,
-              size2 === "small" && styles$5.small,
-              disabled2 && styles$5.disabled,
-              disabled2 && hatchStyles.hatch
-              // loading && styles.disabled
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
-              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$5.icon, children: "▾" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Content2$2,
-          {
-            className: classNames(
-              styles$5.content,
-              chamfer2 && chamferStyles.chamfer
-            ),
-            sideOffset: 6,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Viewport, { children: options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Item,
-              {
-                value: opt.value,
-                disabled: opt.disabled,
-                className: styles$5.item,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
-              },
-              opt.value
-            )) })
-          }
-        ) })
-      ]
-    }
-  );
+  const generatedId = useId$1();
+  const triggerId = id2 ?? generatedId;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$5.label, htmlFor: triggerId, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Root2$2,
+      {
+        value,
+        onValueChange,
+        disabled: disabled2 || loading,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Trigger$2,
+            {
+              id: triggerId,
+              className: clsx(
+                styles$5.trigger,
+                styles$5[variant],
+                chamfer2 && chamferStyles.chamfer,
+                size2 === "large" && styles$5.large,
+                size2 === "small" && styles$5.small,
+                disabled2 && styles$5.disabled,
+                disabled2 && hatchStyles.hatch
+                // loading && styles.disabled
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
+                loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$5.icon, children: "▾" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Content2$2,
+            {
+              className: classNames(
+                styles$5.content,
+                chamfer2 && chamferStyles.chamfer
+              ),
+              sideOffset: 6,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Viewport, { children: options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Item,
+                {
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  className: styles$5.item,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
+                },
+                opt.value
+              )) })
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
 }
 var NAME = "Toggle";
 var Toggle = React.forwardRef((props, forwardedRef) => {

package/package.json

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