@moduix/react 2.2.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.css → ColorPicker_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  @keyframes kgcaIq_color-picker-content-open {
+  @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)
@@ -13,7 +13,7 @@
     }
   }
 
-  @keyframes kgcaIq_color-picker-content-closed {
+  @keyframes color-picker-content-closed-KFhLyd {
     from {
       opacity: 1;
       transform: scale(1);
@@ -27,7 +27,7 @@
     }
   }
 
-  .kgcaIq_root {
+  .root-TExENm {
     box-sizing: border-box;
     width: var(--moduix-color-picker-width, 16rem);
     max-width: var(--moduix-color-picker-max-width, 100%);
@@ -36,38 +36,39 @@
     color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .root-TExENm[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_label {
+  .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;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .label-_ln_Tp[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_control {
+  .control-s8Gz_s {
     align-items: center;
     gap: var(--moduix-color-picker-control-gap, var(--moduix-spacing-2));
     min-width: 0;
     display: flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .control-s8Gz_s[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_trigger {
+  .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));
@@ -90,44 +91,45 @@
     margin: 0;
     display: grid;
     overflow: hidden;
+  }
 
-    &: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: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));
+  }
 
-    &[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[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([disabled], [data-disabled], [data-readonly]) {
-      cursor: default;
-    }
+  .trigger-o5tyg7:is([disabled], [data-disabled], [data-readonly]) {
+    cursor: default;
+  }
 
-    &[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] {
+    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;
+  }
 
-    &[data-fit-content] [data-slot="color-picker-transparency-grid"], &[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;
-    }
+  .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;
   }
 
-  .kgcaIq_positioner {
-    z-index: var(--moduix-z-popup);
+  .positioner-XKLqp5 {
+    z-index: var(--z-index);
     outline: 0;
   }
 
-  .kgcaIq_content {
+  .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));
@@ -145,21 +147,21 @@
     flex-direction: column;
     display: flex;
     overflow: auto;
+  }
 
-    &[data-state="open"] {
-      animation: kgcaIq_color-picker-content-open
+  .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)));
-    }
+  }
 
-    &[data-state="closed"] {
-      animation: kgcaIq_color-picker-content-closed
+  .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)));
-    }
   }
 
-  .kgcaIq_area {
+  .area-t8_R52 {
     box-sizing: border-box;
     width: 100%;
     height: var(--moduix-color-picker-area-height, 10rem);
@@ -168,22 +170,23 @@
       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;
+  }
 
-    &:is([data-disabled], [data-readonly]) {
-      cursor: default;
-    }
+  .area-t8_R52:is([data-disabled], [data-readonly]) {
+    cursor: default;
   }
 
-  .kgcaIq_areaBackground {
+  .areaBackground-PkoUAT {
     border-radius: inherit;
     width: 100%;
     height: 100%;
   }
 
-  .kgcaIq_thumb {
+  .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));
@@ -192,43 +195,54 @@
     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, oklab(0% none none / .18)),
+        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%);
+  }
 
-    &:focus-visible {
+  @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));
-    }
+  }
 
-    &[data-disabled] {
-      pointer-events: none;
-    }
+  .thumb-H6MPip[data-disabled] {
+    pointer-events: none;
   }
 
-  .kgcaIq_channelSlider {
+  .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;
+  }
 
-    &[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;
-    }
+  .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;
   }
 
-  .kgcaIq_sliders {
+  .sliders-sPeKpK {
     gap: var(--moduix-color-picker-sliders-gap, var(--moduix-spacing-2));
     flex-direction: column;
     flex: 1;
@@ -236,34 +250,42 @@
     display: flex;
   }
 
-  .kgcaIq_channelSliderTrack {
+  .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, oklab(0% none none / .14));
+      var(--moduix-color-picker-channel-slider-border-color, #00000024);
+  }
 
-    &[data-orientation="vertical"] {
-      width: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
-      height: 100%;
+  @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));
     }
   }
 
-  .kgcaIq_channelSliderLabel {
+  .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));
   }
 
-  .kgcaIq_channelSliderValueText {
+  .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));
   }
 
-  .kgcaIq_channelInput, .kgcaIq_formatSelect {
+  .channelInput-KxngYC, .formatSelect-jD2i0e {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -285,42 +307,47 @@
       outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
     appearance: textfield;
     margin: 0;
+  }
 
-    &: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):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));
+  }
 
-    &[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-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));
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)[data-disabled] {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
 
-    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
   }
 
-  .kgcaIq_channelInput {
+  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  .channelInput-KxngYC {
     flex: 1;
+  }
 
-    &[data-channel="alpha"] {
-      width: var(--moduix-color-picker-alpha-input-width, 4rem);
-      flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
-    }
+  .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);
   }
 
-  .kgcaIq_formatSelect {
+  .formatSelect-jD2i0e {
     cursor: pointer;
     width: auto;
   }
 
-  .kgcaIq_eyeDropperTrigger, .kgcaIq_formatTrigger {
+  .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));
@@ -348,38 +375,36 @@
     flex-shrink: 0;
     margin: 0;
     display: inline-flex;
+  }
 
-    & > 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) > svg {
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+  }
 
-    &: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));
-    }
+  :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));
+  }
 
-    &:not(:is([disabled], [data-disabled], [data-readonly])) {
-      @media (hover: hover) {
-        &: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));
-        }
-      }
+  @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([disabled], [data-disabled], [data-readonly]) {
-      cursor: default;
-    }
+  :is(.eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb):is([disabled], [data-disabled], [data-readonly]) {
+    cursor: default;
   }
 
-  .kgcaIq_swatchGroup {
+  .swatchGroup-c99XUr {
     gap: var(--moduix-color-picker-swatch-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
     display: flex;
   }
 
-  .kgcaIq_swatchTrigger {
+  .swatchTrigger-evVzC6 {
     border-radius: var(--moduix-color-picker-swatch-radius, var(--moduix-radius-sm));
     cursor: pointer;
     background: none;
@@ -390,27 +415,27 @@
     margin: 0;
     padding: 0;
     display: inline-flex;
+  }
 
-    &:focus-visible {
-      box-shadow: 0 0 0
+  .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));
-    }
+  }
 
-    &[data-disabled] {
-      cursor: default;
-      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .swatchTrigger-evVzC6[data-disabled] {
+    cursor: default;
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .kgcaIq_swatch {
+  .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, oklab(0% none none / .14));
+      var(--moduix-color-picker-swatch-border-color, #00000024);
     flex-shrink: 0;
     place-items: center;
     display: grid;
@@ -418,7 +443,15 @@
     overflow: hidden;
   }
 
-  .kgcaIq_swatchIndicator {
+  @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;
@@ -427,25 +460,25 @@
     display: none;
     position: absolute;
     inset: 0;
+  }
 
-    & > 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));
-    }
+  .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"] > &, &[data-state="checked"] {
-      display: inline-flex;
-    }
+  [data-state="checked"] > .swatchIndicator-OSvsx1, .swatchIndicator-OSvsx1[data-state="checked"] {
+    display: inline-flex;
   }
 
-  .kgcaIq_transparencyGrid {
+  .transparencyGrid-kXaWYM {
     border-radius: inherit;
     grid-area: 1 / 1;
     width: 100%;
     height: 100%;
   }
 
-  .kgcaIq_valueSwatch {
+  .valueSwatch-voiJSA {
     border-radius: inherit;
     z-index: 1;
     grid-area: 1 / 1;
@@ -453,21 +486,22 @@
     height: 100%;
   }
 
-  .kgcaIq_valueText {
+  .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));
   }
 
-  .kgcaIq_view {
+  .view-l5Ln0d {
     gap: var(--moduix-color-picker-view-gap, var(--moduix-spacing-2));
     flex-direction: column;
     min-width: 0;
     display: flex;
+  }
 
-    &[hidden] {
-      display: none;
-    }
+  .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";