@moduix/react 2.1.0 → 2.2.4

package/dist/components/color-picker/ColorPicker.module.js

@@ -1,34 +1,34 @@
-import './ColorPicker.css';
-//#region src/components/color-picker/ColorPicker.module.css
-var ColorPicker_module_default = {
-	"area": "kgcaIq_area",
-	"areaBackground": "kgcaIq_areaBackground",
-	"channelInput": "kgcaIq_channelInput",
-	"channelSlider": "kgcaIq_channelSlider",
-	"channelSliderLabel": "kgcaIq_channelSliderLabel",
-	"channelSliderTrack": "kgcaIq_channelSliderTrack",
-	"channelSliderValueText": "kgcaIq_channelSliderValueText",
-	"color-picker-content-closed": "kgcaIq_color-picker-content-closed",
-	"color-picker-content-open": "kgcaIq_color-picker-content-open",
-	"content": "kgcaIq_content",
-	"control": "kgcaIq_control",
-	"eyeDropperTrigger": "kgcaIq_eyeDropperTrigger",
-	"formatSelect": "kgcaIq_formatSelect",
-	"formatTrigger": "kgcaIq_formatTrigger",
-	"label": "kgcaIq_label",
-	"positioner": "kgcaIq_positioner",
-	"root": "kgcaIq_root",
-	"sliders": "kgcaIq_sliders",
-	"swatch": "kgcaIq_swatch",
-	"swatchGroup": "kgcaIq_swatchGroup",
-	"swatchIndicator": "kgcaIq_swatchIndicator",
-	"swatchTrigger": "kgcaIq_swatchTrigger",
-	"thumb": "kgcaIq_thumb",
-	"transparencyGrid": "kgcaIq_transparencyGrid",
-	"trigger": "kgcaIq_trigger",
-	"valueSwatch": "kgcaIq_valueSwatch",
-	"valueText": "kgcaIq_valueText",
-	"view": "kgcaIq_view"
+import "./ColorPicker_module.css";
+const ColorPicker_module = {
+    root: "root-TExENm",
+    label: "label-_ln_Tp",
+    control: "control-s8Gz_s",
+    trigger: "trigger-o5tyg7",
+    positioner: "positioner-XKLqp5",
+    content: "content-z7zabu",
+    "color-picker-content-open": "color-picker-content-open-q3_ID4",
+    colorPickerContentOpen: "color-picker-content-open-q3_ID4",
+    "color-picker-content-closed": "color-picker-content-closed-KFhLyd",
+    colorPickerContentClosed: "color-picker-content-closed-KFhLyd",
+    area: "area-t8_R52",
+    areaBackground: "areaBackground-PkoUAT",
+    thumb: "thumb-H6MPip",
+    channelSlider: "channelSlider-AurwFW",
+    sliders: "sliders-sPeKpK",
+    channelSliderTrack: "channelSliderTrack-hKvFlr",
+    channelSliderLabel: "channelSliderLabel-hwLzBw",
+    channelSliderValueText: "channelSliderValueText-ZFMCO7",
+    channelInput: "channelInput-KxngYC",
+    formatSelect: "formatSelect-jD2i0e",
+    eyeDropperTrigger: "eyeDropperTrigger-jF9YiQ",
+    formatTrigger: "formatTrigger-pUu2zb",
+    swatchGroup: "swatchGroup-c99XUr",
+    swatchTrigger: "swatchTrigger-evVzC6",
+    swatch: "swatch-Wk05He",
+    swatchIndicator: "swatchIndicator-OSvsx1",
+    transparencyGrid: "transparencyGrid-kXaWYM",
+    valueSwatch: "valueSwatch-voiJSA",
+    valueText: "valueText-DP0Ni5",
+    view: "view-l5Ln0d"
 };
-//#endregion
-export { ColorPicker_module_default as default };
+export default ColorPicker_module;

package/dist/components/color-picker/ColorPicker_module.css

@@ -0,0 +1,507 @@
+@layer moduix.components {
+  @keyframes color-picker-content-open-q3_ID4 {
+    from {
+      opacity: var(--moduix-color-picker-content-closed-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-popup-motion-starting-translate-x, 0)
+        var(--moduix-popup-motion-starting-translate-y, 0);
+      transform: scale(var(--moduix-color-picker-content-closed-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes color-picker-content-closed-KFhLyd {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--moduix-color-picker-content-closed-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-popup-motion-ending-translate-x, 0)
+        var(--moduix-popup-motion-ending-translate-y, 0);
+      transform: scale(var(--moduix-color-picker-content-closed-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
+    }
+  }
+
+  .root-TExENm {
+    box-sizing: border-box;
+    width: var(--moduix-color-picker-width, 16rem);
+    max-width: var(--moduix-color-picker-max-width, 100%);
+    gap: var(--moduix-color-picker-root-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-TExENm[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-_ln_Tp {
+    color: var(--moduix-color-picker-label-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-color-picker-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-color-picker-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-color-picker-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .label-_ln_Tp[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .control-s8Gz_s {
+    align-items: center;
+    gap: var(--moduix-color-picker-control-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    display: flex;
+  }
+
+  .control-s8Gz_s[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .trigger-o5tyg7 {
+    box-sizing: border-box;
+    width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+    height: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+    border: var(--moduix-color-picker-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-radius, var(--moduix-radius-md));
+    padding: var(--moduix-color-picker-trigger-padding, var(--moduix-spacing-1));
+    background: var(--moduix-color-picker-control-bg, var(--moduix-color-background));
+    color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
+    outline: var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    cursor: pointer;
+    transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    flex-shrink: 0;
+    place-items: center;
+    margin: 0;
+    display: grid;
+    overflow: hidden;
+  }
+
+  .trigger-o5tyg7:is(:focus-visible, [data-focus]) {
+    border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .trigger-o5tyg7[data-invalid] {
+    border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+    outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+  }
+
+  .trigger-o5tyg7:is([disabled], [data-disabled], [data-readonly]) {
+    cursor: default;
+  }
+
+  .trigger-o5tyg7[data-fit-content] {
+    width: auto;
+    min-width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+    padding-inline: var(--moduix-color-picker-trigger-fit-content-padding-x, var(--moduix-spacing-3));
+    gap: var(--moduix-color-picker-trigger-fit-content-gap, var(--moduix-spacing-2));
+    display: inline-flex;
+  }
+
+  .trigger-o5tyg7[data-fit-content] [data-slot="color-picker-transparency-grid"], .trigger-o5tyg7[data-fit-content] [data-slot="color-picker-value-swatch"] {
+    width: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+    grid-area: auto;
+  }
+
+  .positioner-XKLqp5 {
+    z-index: var(--z-index);
+    outline: 0;
+  }
+
+  .content-z7zabu {
+    box-sizing: border-box;
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
+    width: var(--moduix-color-picker-content-width, 16rem);
+    max-width: var(--available-width);
+    max-height: min(var(--moduix-color-picker-content-max-height, 32rem), var(--available-height));
+    gap: var(--moduix-color-picker-content-gap, var(--moduix-spacing-3));
+    border: var(--moduix-color-picker-content-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-content-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-content-radius, var(--moduix-color-picker-radius, var(--moduix-radius-md)));
+    padding: var(--moduix-color-picker-content-padding, var(--moduix-spacing-4));
+    background-color: var(--moduix-color-picker-content-bg, var(--moduix-color-popover));
+    box-shadow: var(--moduix-color-picker-content-shadow, var(--moduix-shadow-lg));
+    color: var(--moduix-color-picker-content-color, var(--moduix-color-popover-foreground));
+    transform-origin: var(--transform-origin);
+    overscroll-behavior: contain;
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+
+  .content-z7zabu[data-state="open"] {
+    animation: color-picker-content-open-q3_ID4
+        var(--moduix-color-picker-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  .content-z7zabu[data-state="closed"] {
+    animation: color-picker-content-closed-KFhLyd
+        var(--moduix-color-picker-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
+  }
+
+  .area-t8_R52 {
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--moduix-color-picker-area-height, 10rem);
+    border-radius: var(--moduix-color-picker-area-radius, var(--moduix-radius-md));
+    box-shadow: inset 0 0 0
+      var(--moduix-color-picker-area-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-area-border-color, color-mix(in oklab, var(--moduix-color-border) 70%, transparent));
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .area-t8_R52:is([data-disabled], [data-readonly]) {
+    cursor: default;
+  }
+
+  .areaBackground-PkoUAT {
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+  }
+
+  .thumb-H6MPip {
+    box-sizing: border-box;
+    width: var(--moduix-color-picker-thumb-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-thumb-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-color-picker-thumb-radius, var(--moduix-radius-full));
+    background: var(--moduix-color-picker-thumb-bg, var(--moduix-color-background));
+    box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
+        var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
+      0 0 0 var(--moduix-color-picker-thumb-outer-ring-width, var(--moduix-border-width-lg))
+        var(--moduix-color-picker-thumb-outer-ring-color, #0000002e),
+      var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
+    outline: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  @supports (color: lab(0% 0 0)) {
+    .thumb-H6MPip {
+      box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
+        var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
+      0 0 0 var(--moduix-color-picker-thumb-outer-ring-width, var(--moduix-border-width-lg))
+        var(--moduix-color-picker-thumb-outer-ring-color, lab(0% 0 0 / .18)),
+      var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
+    }
+  }
+
+  .thumb-H6MPip:focus-visible {
+    box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
+          var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
+        0 0 0 var(--moduix-color-picker-thumb-focus-ring-width, var(--moduix-border-width-lg))
+          var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
+  }
+
+  .thumb-H6MPip[data-disabled] {
+    pointer-events: none;
+  }
+
+  .channelSlider-AurwFW {
+    box-sizing: border-box;
+    height: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
+    border-radius: var(--moduix-color-picker-channel-slider-radius, var(--moduix-radius-full));
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+
+  .channelSlider-AurwFW[data-orientation="vertical"] {
+    width: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
+    height: var(--moduix-color-picker-channel-slider-vertical-height, 10rem);
+    justify-content: center;
+    align-items: stretch;
+  }
+
+  .sliders-sPeKpK {
+    gap: var(--moduix-color-picker-sliders-gap, var(--moduix-spacing-2));
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .channelSliderTrack-hKvFlr {
+    width: 100%;
+    height: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
+    border-radius: inherit;
+    box-shadow: inset 0 0 0
+      var(--moduix-color-picker-channel-slider-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-channel-slider-border-color, #00000024);
+  }
+
+  @supports (color: lab(0% 0 0)) {
+    .channelSliderTrack-hKvFlr {
+      box-shadow: inset 0 0 0
+      var(--moduix-color-picker-channel-slider-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-channel-slider-border-color, lab(0% 0 0 / .14));
+    }
+  }
+
+  .channelSliderTrack-hKvFlr[data-orientation="vertical"] {
+    width: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
+    height: 100%;
+  }
+
+  .channelSliderLabel-hwLzBw {
+    color: var(--moduix-color-picker-channel-slider-label-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-color-picker-channel-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-color-picker-channel-slider-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-color-picker-channel-slider-label-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .channelSliderValueText-ZFMCO7 {
+    color: var(--moduix-color-picker-channel-slider-value-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-color-picker-channel-slider-value-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-channel-slider-value-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .channelInput-KxngYC, .formatSelect-jD2i0e {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--moduix-color-picker-input-height, var(--moduix-size-md));
+    border: var(--moduix-color-picker-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    background: var(--moduix-color-picker-control-bg, var(--moduix-color-background));
+    color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-color-picker-input-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-input-line-height, var(--moduix-line-height-text-sm));
+    outline: var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    appearance: textfield;
+    margin: 0;
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e):is(:focus, :focus-visible) {
+    border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)[data-invalid] {
+    border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+    outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  .channelInput-KxngYC {
+    flex: 1;
+  }
+
+  .channelInput-KxngYC[data-channel="alpha"] {
+    width: var(--moduix-color-picker-alpha-input-width, 4rem);
+    flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
+  }
+
+  .formatSelect-jD2i0e {
+    cursor: pointer;
+    width: auto;
+  }
+
+  .eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb {
+    box-sizing: border-box;
+    height: var(--moduix-color-picker-action-size, var(--moduix-size-md));
+    min-width: var(--moduix-color-picker-action-size, var(--moduix-size-md));
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-color-picker-action-gap, var(--moduix-spacing-2));
+    border: var(--moduix-color-picker-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-color-picker-action-padding-x, var(--moduix-spacing-2));
+    background: var(--moduix-color-picker-action-bg, transparent);
+    color: var(--moduix-color-picker-action-color, var(--moduix-color-muted-foreground));
+    font: inherit;
+    font-size: var(--moduix-color-picker-action-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-action-line-height, var(--moduix-line-height-text-sm));
+    outline: var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    cursor: pointer;
+    transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      color var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    flex-shrink: 0;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb) > svg {
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+  }
+
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):is(:focus-visible, [data-focus]) {
+    border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+    outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  @media (hover: hover) {
+    :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):not(:is([disabled], [data-disabled], [data-readonly])):hover {
+      background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):is([disabled], [data-disabled], [data-readonly]) {
+    cursor: default;
+  }
+
+  .swatchGroup-c99XUr {
+    gap: var(--moduix-color-picker-swatch-gap, var(--moduix-spacing-2));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .swatchTrigger-evVzC6 {
+    border-radius: var(--moduix-color-picker-swatch-radius, var(--moduix-radius-sm));
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .swatchTrigger-evVzC6:focus-visible {
+    box-shadow: 0 0 0
+        var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .swatchTrigger-evVzC6[data-disabled] {
+    cursor: default;
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .swatch-Wk05He {
+    box-sizing: border-box;
+    width: var(--moduix-color-picker-swatch-size, var(--moduix-size-sm));
+    height: var(--moduix-color-picker-swatch-size, var(--moduix-size-sm));
+    border-radius: inherit;
+    box-shadow: inset 0 0 0
+      var(--moduix-color-picker-swatch-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-swatch-border-color, #00000024);
+    flex-shrink: 0;
+    place-items: center;
+    display: grid;
+    position: relative;
+    overflow: hidden;
+  }
+
+  @supports (color: lab(0% 0 0)) {
+    .swatch-Wk05He {
+      box-shadow: inset 0 0 0
+      var(--moduix-color-picker-swatch-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-swatch-border-color, lab(0% 0 0 / .14));
+    }
+  }
+
+  .swatchIndicator-OSvsx1 {
+    color: var(--moduix-color-picker-swatch-indicator-color, white);
+    filter: var(--moduix-color-picker-swatch-indicator-shadow, drop-shadow(0 1px 1px #00000073));
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    display: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .swatchIndicator-OSvsx1 > svg {
+    width: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
+  }
+
+  [data-state="checked"] > .swatchIndicator-OSvsx1, .swatchIndicator-OSvsx1[data-state="checked"] {
+    display: inline-flex;
+  }
+
+  .transparencyGrid-kXaWYM {
+    border-radius: inherit;
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .valueSwatch-voiJSA {
+    border-radius: inherit;
+    z-index: 1;
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .valueText-DP0Ni5 {
+    min-width: 0;
+    color: var(--moduix-color-picker-value-text-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-color-picker-value-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-value-text-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .view-l5Ln0d {
+    gap: var(--moduix-color-picker-view-gap, var(--moduix-spacing-2));
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+  }
+
+  .view-l5Ln0d[hidden] {
+    display: none;
+  }
+}
+

package/dist/components/color-picker/index.d.ts

@@ -1,2 +1 @@
-import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "./ColorPicker.js";
-export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };
+export * from './ColorPicker.js';

package/dist/components/color-picker/index.js

@@ -0,0 +1 @@
+export * from "./ColorPicker.js";

package/dist/components/combobox/Combobox.d.ts

@@ -1,31 +1,30 @@
-import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps, ReactNode } from "react";
-import { Combobox, useCombobox, useComboboxContext } from "@ark-ui/react/combobox";
-
-//#region src/components/combobox/Combobox.d.ts
-type ComboboxOptionProps = Omit<ComponentProps<typeof Combobox.Item>, 'asChild' | 'children'> & {
-  children: ReactNode;
-  indicator?: ReactNode | false;
+import { Combobox as ComboboxPrimitive, useCombobox, useComboboxContext, useComboboxItemContext } from '@ark-ui/react/combobox';
+import type { ComponentProps, ReactNode } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal';
+type ComboboxOptionProps = Omit<ComponentProps<typeof ComboboxPrimitive.Item>, 'asChild' | 'children'> & {
+    children: ReactNode;
+    indicator?: ReactNode | false;
 };
-declare const Combobox$1: Combobox.RootComponent<OverlayPortalProps> & {
-  Root: Combobox.RootComponent<OverlayPortalProps>;
-  RootProvider: Combobox.RootProviderComponent<OverlayPortalProps>;
-  Label: import("react").ForwardRefExoticComponent<Omit<Combobox.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<Combobox.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Input: import("react").ForwardRefExoticComponent<Omit<Combobox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Combobox.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Trigger: import("react").ForwardRefExoticComponent<Omit<Combobox.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Positioner: import("react").ForwardRefExoticComponent<Omit<Combobox.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Combobox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Empty: import("react").ForwardRefExoticComponent<Omit<Combobox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  List: import("react").ForwardRefExoticComponent<Omit<Combobox.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemGroup: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Item: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemText: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Option: import("react").ForwardRefExoticComponent<Omit<ComboboxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Context: <T extends unknown>(props: Combobox.ContextProps<T>) => ReactNode;
+declare const Combobox: ComboboxPrimitive.RootComponent<OverlayPortalProps> & {
+    Root: ComboboxPrimitive.RootComponent<OverlayPortalProps>;
+    RootProvider: ComboboxPrimitive.RootProviderComponent<OverlayPortalProps>;
+    Label: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Option: import("react").ForwardRefExoticComponent<Omit<ComboboxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: <T extends unknown>(props: ComboboxPrimitive.ContextProps<T>) => ReactNode;
+    ItemContext: (props: ComboboxPrimitive.ItemContextProps) => ReactNode;
 };
-//#endregion
-export { Combobox$1 as Combobox, useCombobox, useComboboxContext };
+export { Combobox, useCombobox, useComboboxContext, useComboboxItemContext };