@moduix/solid 1.0.0

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

@@ -0,0 +1,581 @@
+@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-state="open"]) {
+    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)));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .content-z7zabu[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
+  .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));
+    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));
+  }
+
+  .channelInput-KxngYC {
+    appearance: textfield;
+    flex: 1;
+  }
+
+  .channelInput-KxngYC::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  .channelInput-KxngYC::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  .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);
+  }
+
+  .formatSelectControl-S40Hse {
+    flex-shrink: 0;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+    position: relative;
+  }
+
+  .formatSelect-jD2i0e {
+    width: auto;
+    appearance: none;
+    cursor: pointer;
+    text-transform: uppercase;
+    padding-inline-end: calc(var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3)) +
+        var(--moduix-color-picker-icon-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) {
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelect-jD2i0e {
+      appearance: auto;
+      padding-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    }
+  }
+
+  .formatSelectIndicator-VJN6PV {
+    top: 50%;
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-radius-sm);
+    background: var(--moduix-color-picker-action-bg, transparent);
+    color: var(--moduix-color-picker-action-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    transition: background-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .formatSelectIndicator-VJN6PV > svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelectIndicator-VJN6PV {
+      display: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .formatSelect-jD2i0e:not(:is([disabled], [data-disabled])):hover + .formatSelectIndicator-VJN6PV {
+      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));
+    }
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) + .formatSelectIndicator-VJN6PV {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { Combobox as ComboboxPrimitive, type ComboboxRootComponent as ArkComboboxRootComponent, type ComboboxRootProviderComponent as ArkComboboxRootProviderComponent, useCombobox, useComboboxContext, useComboboxItemContext } from '@ark-ui/solid/combobox';
+import { type HTMLArkProps } from '@ark-ui/solid/factory';
+import type { ComponentProps, JSX } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+declare const ComboboxRoot: ArkComboboxRootComponent<OverlayPortalProps>;
+declare const ComboboxRootProvider: ArkComboboxRootProviderComponent<OverlayPortalProps>;
+declare function ComboboxLabel(props: ComponentProps<typeof ComboboxPrimitive.Label>): JSX.Element;
+declare function ComboboxControl(props: ComponentProps<typeof ComboboxPrimitive.Control>): JSX.Element;
+declare function ComboboxInput(props: ComponentProps<typeof ComboboxPrimitive.Input>): JSX.Element;
+declare function ComboboxClearTrigger(props: ComponentProps<typeof ComboboxPrimitive.ClearTrigger>): JSX.Element;
+declare function ComboboxTrigger(props: ComponentProps<typeof ComboboxPrimitive.Trigger>): JSX.Element;
+declare function ComboboxPositioner(props: ComponentProps<typeof ComboboxPrimitive.Positioner>): JSX.Element;
+declare function ComboboxContent(props: ComponentProps<typeof ComboboxPrimitive.Content>): JSX.Element;
+declare function ComboboxEmpty(props: ComponentProps<typeof ComboboxPrimitive.Empty>): JSX.Element;
+declare function ComboboxStatus(props: HTMLArkProps<'div'>): JSX.Element;
+declare function ComboboxList(props: ComponentProps<typeof ComboboxPrimitive.List>): JSX.Element;
+declare function ComboboxItemGroup(props: ComponentProps<typeof ComboboxPrimitive.ItemGroup>): JSX.Element;
+declare function ComboboxItemGroupLabel(props: ComponentProps<typeof ComboboxPrimitive.ItemGroupLabel>): JSX.Element;
+declare function ComboboxItem(props: ComponentProps<typeof ComboboxPrimitive.Item>): JSX.Element;
+declare function ComboboxItemText(props: ComponentProps<typeof ComboboxPrimitive.ItemText>): JSX.Element;
+declare function ComboboxItemIndicator(props: ComponentProps<typeof ComboboxPrimitive.ItemIndicator>): JSX.Element;
+type ComboboxOptionProps = Omit<ComponentProps<typeof ComboboxPrimitive.Item>, 'asChild' | 'children'> & {
+    children: JSX.Element;
+    indicator?: JSX.Element | false;
+};
+declare function ComboboxOption(props: ComboboxOptionProps): JSX.Element;
+type ComboboxComponent = ArkComboboxRootComponent<OverlayPortalProps> & {
+    Root: typeof ComboboxRoot;
+    RootProvider: typeof ComboboxRootProvider;
+    Label: typeof ComboboxLabel;
+    Control: typeof ComboboxControl;
+    Input: typeof ComboboxInput;
+    ClearTrigger: typeof ComboboxClearTrigger;
+    Trigger: typeof ComboboxTrigger;
+    Positioner: typeof ComboboxPositioner;
+    Content: typeof ComboboxContent;
+    Empty: typeof ComboboxEmpty;
+    Status: typeof ComboboxStatus;
+    List: typeof ComboboxList;
+    ItemGroup: typeof ComboboxItemGroup;
+    ItemGroupLabel: typeof ComboboxItemGroupLabel;
+    Item: typeof ComboboxItem;
+    ItemText: typeof ComboboxItemText;
+    ItemIndicator: typeof ComboboxItemIndicator;
+    Option: typeof ComboboxOption;
+    Context: typeof ComboboxPrimitive.Context;
+    ItemContext: typeof ComboboxPrimitive.ItemContext;
+};
+declare const Combobox: ComboboxComponent;
+export { Combobox, useCombobox, useComboboxContext, useComboboxItemContext };