@arcanewizards/sigil 0.1.4 → 0.1.5

package/dist/{chunk-CHVABPET.cjs → chunk-5CAFJT5T.cjs}

@@ -247,7 +247,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = _react.forwardRef.call(void 0, 
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -507,19 +507,9 @@ var ControlSelect = ({
     }
   );
 };
-var COLOR_OPTIONS = {
-  red: { label: "Red", value: "red" },
-  blue: { label: "Blue", value: "blue" },
-  teal: { label: "Teal", value: "teal" },
-  green: { label: "Green", value: "green" },
-  yellow: { label: "Yellow", value: "yellow" },
-  purple: { label: "Purple", value: "purple" },
-  orange: { label: "Orange", value: "orange" },
-  brown: { label: "Brown", value: "brown" },
-  gray: { label: "Gray", value: "gray" }
-};
-var ControlColorSelect = ({
-  color,
+var ControlColoredSelect = ({
+  options,
+  value,
   onChange,
   variant,
   position,
@@ -527,13 +517,13 @@ var ControlColorSelect = ({
   placeholder,
   ...props
 }) => {
-  const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = _chunkTZJ4UXR3cjs.sigilColorUsage.call(void 0, color || "gray");
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedColor = _chunkTZJ4UXR3cjs.sigilColorUsage.call(void 0, _nullishCoalesce(_optionalChain([selectedOption, 'optionalAccess', _6 => _6.color]), () => ( "gray")));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _radixui.Select.Trigger,
@@ -542,7 +532,7 @@ var ControlColorSelect = ({
           className: clsControlButton({
             variant,
             position,
-            active: _optionalChain([option, 'optionalAccess', _6 => _6.active])
+            active: _optionalChain([option, 'optionalAccess', _7 => _7.active])
           }),
           style: controlButtonColorVariables({
             bg: selectedColor.background,
@@ -569,7 +559,7 @@ var ControlColorSelect = ({
                 )
               ] }),
               children: [
-                _nullishCoalesce(_optionalChain([option, 'optionalAccess', _7 => _7.label]), () => ( placeholder)),
+                _nullishCoalesce(_optionalChain([option, 'optionalAccess', _8 => _8.label]), () => ( placeholder)),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _core.Icon,
                   {
@@ -587,7 +577,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -599,6 +589,31 @@ var ControlColorSelect = ({
     }
   );
 };
+var COLOR_OPTIONS = {
+  red: { label: "Red", value: "red", color: "red" },
+  blue: { label: "Blue", value: "blue", color: "blue" },
+  teal: { label: "Teal", value: "teal", color: "teal" },
+  green: { label: "Green", value: "green", color: "green" },
+  yellow: { label: "Yellow", value: "yellow", color: "yellow" },
+  purple: { label: "Purple", value: "purple", color: "purple" },
+  orange: { label: "Orange", value: "orange", color: "orange" },
+  brown: { label: "Brown", value: "brown", color: "brown" },
+  gray: { label: "Gray", value: "gray", color: "gray" }
+};
+var COLOR_OPTIONS_ARRAY = Object.values(COLOR_OPTIONS);
+var ControlColorSelect = ({
+  color,
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 
 // src/frontend/dialogs.tsx
 
@@ -653,7 +668,7 @@ var Dialog = ({
     if (!dialogRef) return;
     dialogRef.showModal();
   }, [dialogRef]);
-  const close = () => _optionalChain([dialogRef, 'optionalAccess', _8 => _8.close, 'call', _9 => _9()]);
+  const close = () => _optionalChain([dialogRef, 'optionalAccess', _9 => _9.close, 'call', _10 => _10()]);
   const onClose = (event) => {
     if (closable) {
       dialogClosed();
@@ -768,4 +783,5 @@ var DialogProvider = ({ children }) => {
 
 
 
-exports.clsControlPosition = clsControlPosition; exports.clsControlSubgridPosition = clsControlSubgridPosition; exports.controlPositionClass = controlPositionClass; exports.controlButtonColorVariable = controlButtonColorVariable; exports.controlButtonColorVariables = controlButtonColorVariables; exports.clsControlButton = clsControlButton; exports.ControlButton = ControlButton; exports.CheckboxControlButton = CheckboxControlButton; exports.LongPressableControlButton = LongPressableControlButton; exports.ControlButtonGroup = ControlButtonGroup; exports.ControlParagraph = ControlParagraph; exports.ControlLabel = ControlLabel; exports.ControlDetails = ControlDetails; exports.InputSpanningTitle = InputSpanningTitle; exports.DialogContext = DialogContext; exports.DialogTitle = DialogTitle; exports.DialogButtons = DialogButtons; exports.Dialog = Dialog; exports.DialogProvider = DialogProvider; exports.ControlDialogButtons = ControlDialogButtons; exports.ControlDialog = ControlDialog; exports.InputWithDelayedPropagation = InputWithDelayedPropagation; exports.ControlInput = ControlInput; exports.ControlPercent = ControlPercent; exports.ControlSelect = ControlSelect; exports.ControlColorSelect = ControlColorSelect;
+
+exports.clsControlPosition = clsControlPosition; exports.clsControlSubgridPosition = clsControlSubgridPosition; exports.controlPositionClass = controlPositionClass; exports.controlButtonColorVariable = controlButtonColorVariable; exports.controlButtonColorVariables = controlButtonColorVariables; exports.clsControlButton = clsControlButton; exports.ControlButton = ControlButton; exports.CheckboxControlButton = CheckboxControlButton; exports.LongPressableControlButton = LongPressableControlButton; exports.ControlButtonGroup = ControlButtonGroup; exports.ControlParagraph = ControlParagraph; exports.ControlLabel = ControlLabel; exports.ControlDetails = ControlDetails; exports.InputSpanningTitle = InputSpanningTitle; exports.DialogContext = DialogContext; exports.DialogTitle = DialogTitle; exports.DialogButtons = DialogButtons; exports.Dialog = Dialog; exports.DialogProvider = DialogProvider; exports.ControlDialogButtons = ControlDialogButtons; exports.ControlDialog = ControlDialog; exports.InputWithDelayedPropagation = InputWithDelayedPropagation; exports.ControlInput = ControlInput; exports.ControlPercent = ControlPercent; exports.ControlSelect = ControlSelect; exports.ControlColoredSelect = ControlColoredSelect; exports.ControlColorSelect = ControlColorSelect;

package/dist/{chunk-E3VUC3Q4.js → chunk-LKKN6DFB.js}

@@ -247,7 +247,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = forwardRef2(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ jsx2(
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -507,19 +507,9 @@ var ControlSelect = ({
     }
   );
 };
-var COLOR_OPTIONS = {
-  red: { label: "Red", value: "red" },
-  blue: { label: "Blue", value: "blue" },
-  teal: { label: "Teal", value: "teal" },
-  green: { label: "Green", value: "green" },
-  yellow: { label: "Yellow", value: "yellow" },
-  purple: { label: "Purple", value: "purple" },
-  orange: { label: "Orange", value: "orange" },
-  brown: { label: "Brown", value: "brown" },
-  gray: { label: "Gray", value: "gray" }
-};
-var ControlColorSelect = ({
-  color,
+var ControlColoredSelect = ({
+  options,
+  value,
   onChange,
   variant,
   position,
@@ -527,13 +517,13 @@ var ControlColorSelect = ({
   placeholder,
   ...props
 }) => {
-  const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = sigilColorUsage(color || "gray");
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedColor = sigilColorUsage(selectedOption?.color ?? "gray");
   return /* @__PURE__ */ jsx5(
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ jsx5(
         Select.Trigger,
@@ -587,7 +577,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -599,6 +589,31 @@ var ControlColorSelect = ({
     }
   );
 };
+var COLOR_OPTIONS = {
+  red: { label: "Red", value: "red", color: "red" },
+  blue: { label: "Blue", value: "blue", color: "blue" },
+  teal: { label: "Teal", value: "teal", color: "teal" },
+  green: { label: "Green", value: "green", color: "green" },
+  yellow: { label: "Yellow", value: "yellow", color: "yellow" },
+  purple: { label: "Purple", value: "purple", color: "purple" },
+  orange: { label: "Orange", value: "orange", color: "orange" },
+  brown: { label: "Brown", value: "brown", color: "brown" },
+  gray: { label: "Gray", value: "gray", color: "gray" }
+};
+var COLOR_OPTIONS_ARRAY = Object.values(COLOR_OPTIONS);
+var ControlColorSelect = ({
+  color,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5(
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 
 // src/frontend/dialogs.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -767,5 +782,6 @@ export {
   ControlInput,
   ControlPercent,
   ControlSelect,
+  ControlColoredSelect,
   ControlColorSelect
 };

package/dist/frontend/appearance.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkCHVABPETcjs = require('../chunk-CHVABPET.cjs');
+var _chunk5CAFJT5Tcjs = require('../chunk-5CAFJT5T.cjs');
 require('../chunk-PEARNJ5G.cjs');
 require('../chunk-RI33QVOD.cjs');
 require('../chunk-TZJ4UXR3.cjs');
@@ -35,7 +35,7 @@ var AppearanceSwitcher = ({
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "control-grid-pos-all flex flex-wrap items-stretch gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkCHVABPETcjs.ControlButton,
+      _chunk5CAFJT5Tcjs.ControlButton,
       {
         onClick: selectDarkMode,
         active: colorSchemePreference === "dark",
@@ -48,7 +48,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkCHVABPETcjs.ControlButton,
+      _chunk5CAFJT5Tcjs.ControlButton,
       {
         onClick: selectLightMode,
         active: colorSchemePreference === "light",
@@ -61,7 +61,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkCHVABPETcjs.ControlButton,
+      _chunk5CAFJT5Tcjs.ControlButton,
       {
         onClick: selectSystemMode,
         active: colorSchemePreference === "auto",
@@ -74,7 +74,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkCHVABPETcjs.ControlColorSelect,
+      _chunk5CAFJT5Tcjs.ControlColorSelect,
       {
         color,
         onChange: updateHintColor,

package/dist/frontend/appearance.js

@@ -1,7 +1,7 @@
 import {
   ControlButton,
   ControlColorSelect
-} from "../chunk-E3VUC3Q4.js";
+} from "../chunk-LKKN6DFB.js";
 import "../chunk-BIY5HAXP.js";
 import "../chunk-4PMRDURG.js";
 import "../chunk-WYUGJOEB.js";

package/dist/frontend/controls/index.cjs

@@ -20,7 +20,8 @@
 
 
 
-var _chunkCHVABPETcjs = require('../../chunk-CHVABPET.cjs');
+
+var _chunk5CAFJT5Tcjs = require('../../chunk-5CAFJT5T.cjs');
 require('../../chunk-PEARNJ5G.cjs');
 require('../../chunk-RI33QVOD.cjs');
 require('../../chunk-TZJ4UXR3.cjs');
@@ -46,4 +47,5 @@ require('../../chunk-TZJ4UXR3.cjs');
 
 
 
-exports.CheckboxControlButton = _chunkCHVABPETcjs.CheckboxControlButton; exports.ControlButton = _chunkCHVABPETcjs.ControlButton; exports.ControlButtonGroup = _chunkCHVABPETcjs.ControlButtonGroup; exports.ControlColorSelect = _chunkCHVABPETcjs.ControlColorSelect; exports.ControlDetails = _chunkCHVABPETcjs.ControlDetails; exports.ControlDialog = _chunkCHVABPETcjs.ControlDialog; exports.ControlDialogButtons = _chunkCHVABPETcjs.ControlDialogButtons; exports.ControlInput = _chunkCHVABPETcjs.ControlInput; exports.ControlLabel = _chunkCHVABPETcjs.ControlLabel; exports.ControlParagraph = _chunkCHVABPETcjs.ControlParagraph; exports.ControlPercent = _chunkCHVABPETcjs.ControlPercent; exports.ControlSelect = _chunkCHVABPETcjs.ControlSelect; exports.InputSpanningTitle = _chunkCHVABPETcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunkCHVABPETcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunkCHVABPETcjs.LongPressableControlButton; exports.clsControlButton = _chunkCHVABPETcjs.clsControlButton; exports.clsControlPosition = _chunkCHVABPETcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunkCHVABPETcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunkCHVABPETcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunkCHVABPETcjs.controlButtonColorVariables; exports.controlPositionClass = _chunkCHVABPETcjs.controlPositionClass;
+
+exports.CheckboxControlButton = _chunk5CAFJT5Tcjs.CheckboxControlButton; exports.ControlButton = _chunk5CAFJT5Tcjs.ControlButton; exports.ControlButtonGroup = _chunk5CAFJT5Tcjs.ControlButtonGroup; exports.ControlColorSelect = _chunk5CAFJT5Tcjs.ControlColorSelect; exports.ControlColoredSelect = _chunk5CAFJT5Tcjs.ControlColoredSelect; exports.ControlDetails = _chunk5CAFJT5Tcjs.ControlDetails; exports.ControlDialog = _chunk5CAFJT5Tcjs.ControlDialog; exports.ControlDialogButtons = _chunk5CAFJT5Tcjs.ControlDialogButtons; exports.ControlInput = _chunk5CAFJT5Tcjs.ControlInput; exports.ControlLabel = _chunk5CAFJT5Tcjs.ControlLabel; exports.ControlParagraph = _chunk5CAFJT5Tcjs.ControlParagraph; exports.ControlPercent = _chunk5CAFJT5Tcjs.ControlPercent; exports.ControlSelect = _chunk5CAFJT5Tcjs.ControlSelect; exports.InputSpanningTitle = _chunk5CAFJT5Tcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunk5CAFJT5Tcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunk5CAFJT5Tcjs.LongPressableControlButton; exports.clsControlButton = _chunk5CAFJT5Tcjs.clsControlButton; exports.clsControlPosition = _chunk5CAFJT5Tcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunk5CAFJT5Tcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunk5CAFJT5Tcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunk5CAFJT5Tcjs.controlButtonColorVariables; exports.controlPositionClass = _chunk5CAFJT5Tcjs.controlPositionClass;

package/dist/frontend/controls/index.d.cts

@@ -86,18 +86,18 @@ declare const ControlParagraph: react.ForwardRefExoticComponent<Omit<react.Detai
     position?: ControlPosition;
     mode?: ControlParagraphMode;
 } & react.RefAttributes<HTMLParagraphElement>>;
-type ControlLabelProps = ComponentPropsWithoutRef<'div'> & {
+type ControlLabelProps = ComponentPropsWithoutRef<'label'> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
 };
-declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLLabelElement>>;
 type ControlDetailsProps = ComponentPropsWithoutRef<'div'> & {
     position?: ControlPosition;
     align?: 'start' | 'center' | 'end';
@@ -146,13 +146,13 @@ type SelectOption<T> = {
      */
     active?: boolean;
 };
-type SelectProps<T extends string | null> = {
-    options: SelectOption<T>[];
+type SelectProps<T extends string | null, O extends SelectOption<T>> = {
+    options: O[];
     value: T | '';
     onChange: (value: T) => void;
-    triggerText?: (option: SelectOption<T>) => ReactNode;
-    triggerButton?: (option: null | SelectOption<T>) => ReactNode;
-    option?: (option: SelectOption<T>) => ReactNode;
+    triggerText?: (option: O) => ReactNode;
+    triggerButton?: (option: null | O) => ReactNode;
+    option?: (option: O) => ReactNode;
     variant: ControlButtonVariant;
     position?: ControlPosition;
     disabled?: boolean;
@@ -160,11 +160,15 @@ type SelectProps<T extends string | null> = {
     placeholder?: ReactNode;
     triggerClassName?: string;
 };
-declare const ControlSelect: <T extends string | null>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
+declare const ControlSelect: <T extends string | null, O extends SelectOption<T> = SelectOption<T>>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T, O>) => react_jsx_runtime.JSX.Element;
+type SigilOptionWithColor<T> = SelectOption<T> & {
+    color: SigilColor;
+};
+type ControlColoredSelectProps<T extends string | null, O extends SigilOptionWithColor<T>> = SelectProps<T, O>;
+declare const ControlColoredSelect: <T extends string | null, O extends SigilOptionWithColor<T> = SigilOptionWithColor<T>>({ options, value, onChange, variant, position, disabled, placeholder, ...props }: ControlColoredSelectProps<T, O>) => react_jsx_runtime.JSX.Element;
 type ControlColorSelectProps = {
     color: SigilColor | '';
-    onChange: (color: SigilColor) => void;
-} & Pick<SelectProps<SigilColor>, 'variant' | 'position' | 'disabled' | 'tooltip' | 'placeholder'>;
-declare const ControlColorSelect: ({ color, onChange, variant, position, disabled, placeholder, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
+} & Omit<ControlColoredSelectProps<SigilColor, SigilOptionWithColor<SigilColor>>, 'value' | 'options'>;
+declare const ControlColorSelect: ({ color, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
 
-export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };
+export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlColoredSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };

package/dist/frontend/controls/index.d.ts

@@ -86,18 +86,18 @@ declare const ControlParagraph: react.ForwardRefExoticComponent<Omit<react.Detai
     position?: ControlPosition;
     mode?: ControlParagraphMode;
 } & react.RefAttributes<HTMLParagraphElement>>;
-type ControlLabelProps = ComponentPropsWithoutRef<'div'> & {
+type ControlLabelProps = ComponentPropsWithoutRef<'label'> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
 };
-declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLLabelElement>>;
 type ControlDetailsProps = ComponentPropsWithoutRef<'div'> & {
     position?: ControlPosition;
     align?: 'start' | 'center' | 'end';
@@ -146,13 +146,13 @@ type SelectOption<T> = {
      */
     active?: boolean;
 };
-type SelectProps<T extends string | null> = {
-    options: SelectOption<T>[];
+type SelectProps<T extends string | null, O extends SelectOption<T>> = {
+    options: O[];
     value: T | '';
     onChange: (value: T) => void;
-    triggerText?: (option: SelectOption<T>) => ReactNode;
-    triggerButton?: (option: null | SelectOption<T>) => ReactNode;
-    option?: (option: SelectOption<T>) => ReactNode;
+    triggerText?: (option: O) => ReactNode;
+    triggerButton?: (option: null | O) => ReactNode;
+    option?: (option: O) => ReactNode;
     variant: ControlButtonVariant;
     position?: ControlPosition;
     disabled?: boolean;
@@ -160,11 +160,15 @@ type SelectProps<T extends string | null> = {
     placeholder?: ReactNode;
     triggerClassName?: string;
 };
-declare const ControlSelect: <T extends string | null>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
+declare const ControlSelect: <T extends string | null, O extends SelectOption<T> = SelectOption<T>>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T, O>) => react_jsx_runtime.JSX.Element;
+type SigilOptionWithColor<T> = SelectOption<T> & {
+    color: SigilColor;
+};
+type ControlColoredSelectProps<T extends string | null, O extends SigilOptionWithColor<T>> = SelectProps<T, O>;
+declare const ControlColoredSelect: <T extends string | null, O extends SigilOptionWithColor<T> = SigilOptionWithColor<T>>({ options, value, onChange, variant, position, disabled, placeholder, ...props }: ControlColoredSelectProps<T, O>) => react_jsx_runtime.JSX.Element;
 type ControlColorSelectProps = {
     color: SigilColor | '';
-    onChange: (color: SigilColor) => void;
-} & Pick<SelectProps<SigilColor>, 'variant' | 'position' | 'disabled' | 'tooltip' | 'placeholder'>;
-declare const ControlColorSelect: ({ color, onChange, variant, position, disabled, placeholder, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
+} & Omit<ControlColoredSelectProps<SigilColor, SigilOptionWithColor<SigilColor>>, 'value' | 'options'>;
+declare const ControlColorSelect: ({ color, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
 
-export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };
+export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlColoredSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };

package/dist/frontend/controls/index.js

@@ -3,6 +3,7 @@ import {
   ControlButton,
   ControlButtonGroup,
   ControlColorSelect,
+  ControlColoredSelect,
   ControlDetails,
   ControlDialog,
   ControlDialogButtons,
@@ -20,7 +21,7 @@ import {
   controlButtonColorVariable,
   controlButtonColorVariables,
   controlPositionClass
-} from "../../chunk-E3VUC3Q4.js";
+} from "../../chunk-LKKN6DFB.js";
 import "../../chunk-BIY5HAXP.js";
 import "../../chunk-4PMRDURG.js";
 import "../../chunk-WYUGJOEB.js";
@@ -29,6 +30,7 @@ export {
   ControlButton,
   ControlButtonGroup,
   ControlColorSelect,
+  ControlColoredSelect,
   ControlDetails,
   ControlDialog,
   ControlDialogButtons,

package/dist/frontend/dialogs.cjs

@@ -4,7 +4,7 @@
 
 
 
-var _chunkCHVABPETcjs = require('../chunk-CHVABPET.cjs');
+var _chunk5CAFJT5Tcjs = require('../chunk-5CAFJT5T.cjs');
 require('../chunk-PEARNJ5G.cjs');
 require('../chunk-RI33QVOD.cjs');
 require('../chunk-TZJ4UXR3.cjs');
@@ -14,4 +14,4 @@ require('../chunk-TZJ4UXR3.cjs');
 
 
 
-exports.Dialog = _chunkCHVABPETcjs.Dialog; exports.DialogButtons = _chunkCHVABPETcjs.DialogButtons; exports.DialogContext = _chunkCHVABPETcjs.DialogContext; exports.DialogProvider = _chunkCHVABPETcjs.DialogProvider; exports.DialogTitle = _chunkCHVABPETcjs.DialogTitle;
+exports.Dialog = _chunk5CAFJT5Tcjs.Dialog; exports.DialogButtons = _chunk5CAFJT5Tcjs.DialogButtons; exports.DialogContext = _chunk5CAFJT5Tcjs.DialogContext; exports.DialogProvider = _chunk5CAFJT5Tcjs.DialogProvider; exports.DialogTitle = _chunk5CAFJT5Tcjs.DialogTitle;

package/dist/frontend/dialogs.js

@@ -4,7 +4,7 @@ import {
   DialogContext,
   DialogProvider,
   DialogTitle
-} from "../chunk-E3VUC3Q4.js";
+} from "../chunk-LKKN6DFB.js";
 import "../chunk-BIY5HAXP.js";
 import "../chunk-4PMRDURG.js";
 import "../chunk-WYUGJOEB.js";

package/dist/frontend.cjs

@@ -16,7 +16,7 @@ var _chunkCAYKPJIXcjs = require('./chunk-CAYKPJIX.cjs');
 var _chunkVZ4A6RRTcjs = require('./chunk-VZ4A6RRT.cjs');
 
 
-var _chunkCHVABPETcjs = require('./chunk-CHVABPET.cjs');
+var _chunk5CAFJT5Tcjs = require('./chunk-5CAFJT5T.cjs');
 require('./chunk-PEARNJ5G.cjs');
 require('./chunk-RI33QVOD.cjs');
 
@@ -242,7 +242,7 @@ var Debugger = ({ title, className }) => {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "grow px-1", children: title }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA5LYYZERcjs.ToolbarDivider, {}),
       openDevTools && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCHVABPETcjs.ControlButton,
+        _chunk5CAFJT5Tcjs.ControlButton,
         {
           onClick: openDevTools,
           variant: "toolbar",
@@ -251,7 +251,7 @@ var Debugger = ({ title, className }) => {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCHVABPETcjs.ControlButton,
+        _chunk5CAFJT5Tcjs.ControlButton,
         {
           onClick: handleRequestScrollToBottom,
           variant: "toolbar",
@@ -259,7 +259,7 @@ var Debugger = ({ title, className }) => {
           children: "Scroll to Bottom"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHVABPETcjs.ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5CAFJT5Tcjs.ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
     ] }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "pre",

package/dist/frontend.js

@@ -16,7 +16,7 @@ import {
 } from "./chunk-EJNNLQ2S.js";
 import {
   ControlButton
-} from "./chunk-E3VUC3Q4.js";
+} from "./chunk-LKKN6DFB.js";
 import "./chunk-BIY5HAXP.js";
 import "./chunk-4PMRDURG.js";
 import {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcanewizards/sigil",
   "description": "Application framework for A/V applications, built on-top of arcanejs",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "license": "MIT",
   "type": "module",