@moduix/react 1.1.0

package/dist/components/collapsible/Collapsible.css

@@ -0,0 +1,138 @@
+@layer ui.components {
+  @keyframes s7-WFq_collapsible-content-open {
+    from {
+      height: var(--collapsed-height, 0);
+      width: var(--collapsed-width, var(--width));
+      opacity: var(--collapsible-content-closed-opacity, .01);
+    }
+
+    to {
+      height: var(--height);
+      width: var(--width);
+      opacity: var(--collapsible-content-open-opacity, 1);
+    }
+  }
+
+  @keyframes s7-WFq_collapsible-content-closed {
+    from {
+      height: var(--height);
+      width: var(--width);
+      opacity: var(--collapsible-content-open-opacity, 1);
+    }
+
+    to {
+      height: var(--collapsed-height, 0);
+      width: var(--collapsed-width, var(--width));
+      opacity: var(--collapsible-content-closed-opacity, .01);
+    }
+  }
+
+  .s7-WFq_root {
+    box-sizing: border-box;
+    width: var(--collapsible-width, 14rem);
+    max-width: var(--collapsible-max-width, 100%);
+    min-width: 0;
+    color: var(--collapsible-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .s7-WFq_trigger {
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--collapsible-trigger-gap, var(--spacing-2));
+    border-radius: var(--collapsible-trigger-radius, 0);
+    width: 100%;
+    padding-block: var(--collapsible-trigger-padding-y, var(--spacing-1));
+    padding-inline: var(--collapsible-trigger-padding-x, var(--spacing-2));
+    background-color: var(--collapsible-trigger-bg, transparent);
+    color: var(--collapsible-trigger-color, var(--collapsible-color, var(--color-foreground)));
+    font: inherit;
+    font-size: var(--collapsible-trigger-font-size, var(--text-sm));
+    line-height: var(--collapsible-trigger-line-height, var(--line-height-text-sm));
+    text-align: left;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--collapsible-trigger-transition, var(--transition-default)),
+      color var(--collapsible-trigger-transition, var(--transition-default));
+    border: 0;
+    outline: 0;
+    margin: 0;
+    display: flex;
+
+    &:focus-visible {
+      outline: var(--collapsible-focus-ring-width, var(--border-width-sm)) solid
+        var(--collapsible-focus-ring-color, var(--color-ring));
+      outline-offset: var(--collapsible-focus-ring-offset, var(--border-width-sm));
+    }
+
+    &:not(:is([disabled], [data-disabled])) {
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent));
+        }
+      }
+
+      &:active {
+        background-color: var(--collapsible-trigger-bg-active, var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent)));
+      }
+    }
+
+    &:is([disabled], [data-disabled]) {
+      opacity: var(--collapsible-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .s7-WFq_indicator {
+    box-sizing: border-box;
+    width: var(--collapsible-indicator-size, .75rem);
+    height: var(--collapsible-indicator-size, .75rem);
+    transition: transform var(--collapsible-indicator-transition, var(--transition-default));
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &[data-state="open"] {
+      transform: var(--collapsible-indicator-open-transform, rotate(90deg));
+    }
+
+    &[data-disabled] {
+      opacity: var(--collapsible-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .s7-WFq_content {
+    --collapsed-height: 0;
+    box-sizing: border-box;
+    color: var(--collapsible-content-color, var(--color-muted-foreground));
+    font-size: var(--collapsible-content-font-size, var(--text-sm));
+    line-height: var(--collapsible-content-line-height, var(--line-height-text-sm));
+    overflow: hidden;
+
+    &[data-state="open"] {
+      animation: s7-WFq_collapsible-content-open
+        var(--collapsible-content-transition, var(--transition-default));
+
+      &[data-has-collapsed-size] {
+        --collapsible-content-closed-opacity: var(--collapsible-content-open-opacity, 1);
+      }
+    }
+
+    &[data-state="closed"] {
+      animation: s7-WFq_collapsible-content-closed
+        var(--collapsible-content-transition, var(--transition-default));
+
+      &[data-has-collapsed-size] {
+        --collapsible-content-closed-opacity: var(--collapsible-content-open-opacity, 1);
+      }
+    }
+  }
+}

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,12 @@
+import { Collapsible } from "@ark-ui/react/collapsible";
+
+//#region src/components/collapsible/Collapsible.d.ts
+declare const Collapsible$1: import("react").ForwardRefExoticComponent<Omit<Collapsible.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Collapsible.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Collapsible.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Collapsible.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Collapsible.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Collapsible.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Collapsible$1 as Collapsible };

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,59 @@
+import { ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Collapsible_module_default from "./Collapsible.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Collapsible } from "@ark-ui/react/collapsible";
+//#region src/components/collapsible/Collapsible.tsx
+const CollapsibleRoot = forwardRef(function CollapsibleRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		ref,
+		"data-slot": "collapsible-root",
+		className: clsx(Collapsible_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const CollapsibleRootProvider = forwardRef(function CollapsibleRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.RootProvider, {
+		ref,
+		"data-slot": "collapsible-root-provider",
+		className: clsx(Collapsible_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		ref,
+		asChild,
+		"data-slot": "collapsible-trigger",
+		className: clsx(!asChild && Collapsible_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const CollapsibleIndicator = forwardRef(function CollapsibleIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Indicator, {
+		ref,
+		"data-slot": "collapsible-indicator",
+		className: clsx(Collapsible_module_default.indicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+});
+const CollapsibleContent = forwardRef(function CollapsibleContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Collapsible.Content, {
+		ref,
+		"data-slot": "collapsible-content",
+		className: clsx(Collapsible_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const Collapsible$1 = Object.assign(CollapsibleRoot, {
+	Root: CollapsibleRoot,
+	RootProvider: CollapsibleRootProvider,
+	Trigger: CollapsibleTrigger,
+	Indicator: CollapsibleIndicator,
+	Content: CollapsibleContent
+});
+//#endregion
+export { Collapsible$1 as Collapsible };

package/dist/components/collapsible/Collapsible.module.js

@@ -0,0 +1,12 @@
+import './Collapsible.css';
+//#region src/components/collapsible/Collapsible.module.css
+var Collapsible_module_default = {
+	"collapsible-content-closed": "s7-WFq_collapsible-content-closed",
+	"collapsible-content-open": "s7-WFq_collapsible-content-open",
+	"content": "s7-WFq_content",
+	"indicator": "s7-WFq_indicator",
+	"root": "s7-WFq_root",
+	"trigger": "s7-WFq_trigger"
+};
+//#endregion
+export { Collapsible_module_default as default };

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { Collapsible } from "./Collapsible.js";
+export { Collapsible };

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

@@ -0,0 +1,433 @@
+@layer ui.components {
+  @keyframes GCUAhG_color-picker-content-open {
+    from {
+      opacity: var(--color-picker-content-closed-opacity, 0);
+      transform: scale(var(--color-picker-content-closed-scale, var(--scale-popup)));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes GCUAhG_color-picker-content-closed {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--color-picker-content-closed-opacity, 0);
+      transform: scale(var(--color-picker-content-closed-scale, var(--scale-popup)));
+    }
+  }
+
+  .GCUAhG_root {
+    box-sizing: border-box;
+    width: var(--color-picker-width, 16rem);
+    max-width: var(--color-picker-max-width, 100%);
+    gap: var(--color-picker-root-gap, var(--spacing-2));
+    min-width: 0;
+    color: var(--color-picker-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .GCUAhG_label {
+    color: var(--color-picker-label-color, var(--color-picker-color, var(--color-foreground)));
+    font-size: var(--color-picker-label-font-size, var(--text-sm));
+    font-weight: var(--color-picker-label-font-weight, var(--weight-medium));
+    line-height: var(--color-picker-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+    align-items: center;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .GCUAhG_control {
+    align-items: center;
+    gap: var(--color-picker-control-gap, var(--spacing-2));
+    min-width: 0;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .GCUAhG_trigger {
+    box-sizing: border-box;
+    width: var(--color-picker-trigger-size, var(--size-lg));
+    height: var(--color-picker-trigger-size, var(--size-lg));
+    border: var(--color-picker-border-width, var(--border-width-sm)) solid
+      var(--color-picker-border-color, var(--color-border));
+    border-radius: var(--color-picker-radius, var(--radius-md));
+    padding: var(--color-picker-trigger-padding, var(--spacing-1));
+    background: var(--color-picker-control-bg, var(--color-background));
+    color: var(--color-picker-color, var(--color-foreground));
+    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    cursor: pointer;
+    transition: border-color var(--color-picker-transition, var(--transition-default)),
+      outline-color var(--color-picker-transition, var(--transition-default)),
+      background-color var(--color-picker-transition, var(--transition-default));
+    flex-shrink: 0;
+    place-items: center;
+    margin: 0;
+    display: grid;
+    overflow: hidden;
+
+    &:is(:focus-visible, [data-focus]) {
+      border-color: var(--color-picker-focus-ring-color, var(--color-ring));
+      outline-color: var(--color-picker-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-invalid] {
+      border-color: var(--color-picker-invalid-color, var(--color-destructive));
+      outline-color: var(--color-picker-invalid-color, var(--color-destructive));
+    }
+
+    &:is([disabled], [data-disabled], [data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  .GCUAhG_positioner {
+    z-index: var(--z-popup);
+    outline: 0;
+  }
+
+  .GCUAhG_content {
+    box-sizing: border-box;
+    width: var(--color-picker-content-width, 16rem);
+    max-width: var(--available-width);
+    max-height: min(var(--color-picker-content-max-height, 32rem), var(--available-height));
+    gap: var(--color-picker-content-gap, var(--spacing-3));
+    border: var(--color-picker-content-border-width, var(--border-width-sm)) solid
+      var(--color-picker-content-border-color, var(--color-border));
+    border-radius: var(--color-picker-content-radius, var(--color-picker-radius, var(--radius-md)));
+    padding: var(--color-picker-content-padding, var(--spacing-4));
+    background-color: var(--color-picker-content-bg, var(--color-popover));
+    box-shadow: var(--color-picker-content-shadow, var(--shadow-lg));
+    color: var(--color-picker-content-color, var(--color-popover-foreground));
+    transform-origin: var(--transform-origin);
+    overscroll-behavior: contain;
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+
+    &[data-state="open"] {
+      animation: GCUAhG_color-picker-content-open var(--color-picker-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: GCUAhG_color-picker-content-closed
+        var(--color-picker-transition, var(--transition-default));
+    }
+  }
+
+  .GCUAhG_area {
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--color-picker-area-height, 10rem);
+    border-radius: var(--color-picker-area-radius, var(--radius-md));
+    box-shadow: inset 0 0 0 var(--color-picker-area-border-width, var(--border-width-sm))
+      var(--color-picker-area-border-color, color-mix(in oklab, var(--color-border) 70%, transparent));
+    touch-action: none;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+
+    &:is([data-disabled], [data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  .GCUAhG_areaBackground {
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+  }
+
+  .GCUAhG_thumb {
+    box-sizing: border-box;
+    width: var(--color-picker-thumb-size, 1rem);
+    height: var(--color-picker-thumb-size, 1rem);
+    border-radius: var(--color-picker-thumb-radius, var(--radius-full));
+    background: var(--color-picker-thumb-bg, var(--color-background));
+    box-shadow: 0 0 0 var(--color-picker-thumb-inner-ring-width, var(--border-width-md))
+        var(--color-picker-thumb-inner-ring-color, var(--color-background)),
+      0 0 0 var(--color-picker-thumb-outer-ring-width, var(--border-width-lg))
+        var(--color-picker-thumb-outer-ring-color, oklab(0% none none / .18)),
+      var(--color-picker-thumb-shadow, var(--shadow-sm));
+    outline: 0;
+    transform: translate(-50%, -50%);
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--color-picker-thumb-inner-ring-width, var(--border-width-md))
+          var(--color-picker-thumb-inner-ring-color, var(--color-background)),
+        0 0 0 var(--color-picker-thumb-focus-ring-width, var(--border-width-lg))
+          var(--color-picker-focus-ring-color, var(--color-ring)),
+        var(--color-picker-thumb-shadow, var(--shadow-sm));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .GCUAhG_channelSlider {
+    box-sizing: border-box;
+    height: var(--color-picker-channel-slider-height, var(--spacing-3));
+    border-radius: var(--color-picker-channel-slider-radius, var(--radius-full));
+    touch-action: none;
+    user-select: none;
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    &[data-orientation="vertical"] {
+      width: var(--color-picker-channel-slider-height, var(--spacing-3));
+      height: var(--color-picker-channel-slider-vertical-height, 10rem);
+      justify-content: center;
+      align-items: stretch;
+    }
+  }
+
+  .GCUAhG_channelSliderTrack {
+    width: 100%;
+    height: var(--color-picker-channel-slider-track-size, var(--spacing-3));
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--color-picker-channel-slider-border-width, var(--border-width-sm))
+      var(--color-picker-channel-slider-border-color, oklab(0% none none / .14));
+
+    &[data-orientation="vertical"] {
+      width: var(--color-picker-channel-slider-track-size, var(--spacing-3));
+      height: 100%;
+    }
+  }
+
+  .GCUAhG_channelSliderLabel {
+    color: var(--color-picker-channel-slider-label-color, var(--color-picker-color, var(--color-foreground)));
+    font-size: var(--color-picker-channel-slider-label-font-size, var(--text-sm));
+    font-weight: var(--color-picker-channel-slider-label-font-weight, var(--weight-medium));
+    line-height: var(--color-picker-channel-slider-label-line-height, var(--line-height-text-sm));
+  }
+
+  .GCUAhG_channelSliderValueText {
+    color: var(--color-picker-channel-slider-value-color, var(--color-muted-foreground));
+    font-size: var(--color-picker-channel-slider-value-font-size, var(--text-sm));
+    line-height: var(--color-picker-channel-slider-value-line-height, var(--line-height-text-sm));
+  }
+
+  .GCUAhG_channelInput, .GCUAhG_formatSelect {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--color-picker-input-height, var(--size-lg));
+    border: var(--color-picker-border-width, var(--border-width-sm)) solid
+      var(--color-picker-border-color, var(--color-border));
+    border-radius: var(--color-picker-radius, var(--radius-md));
+    padding-inline: var(--color-picker-input-padding-x, var(--spacing-3));
+    background: var(--color-picker-control-bg, var(--color-background));
+    color: var(--color-picker-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--color-picker-input-font-size, var(--text-sm));
+    line-height: var(--color-picker-input-line-height, var(--line-height-text-sm));
+    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    transition: border-color var(--color-picker-transition, var(--transition-default)),
+      outline-color var(--color-picker-transition, var(--transition-default));
+    appearance: textfield;
+    margin: 0;
+
+    &:is(:focus, :focus-visible) {
+      border-color: var(--color-picker-focus-ring-color, var(--color-ring));
+      outline-color: var(--color-picker-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-invalid] {
+      border-color: var(--color-picker-invalid-color, var(--color-destructive));
+      outline-color: var(--color-picker-invalid-color, var(--color-destructive));
+    }
+
+    &[data-disabled] {
+      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+
+  .GCUAhG_channelInput {
+    flex: 1;
+
+    &[data-channel="alpha"] {
+      width: var(--color-picker-alpha-input-width, 4rem);
+      flex: 0 0 var(--color-picker-alpha-input-width, 4rem);
+    }
+  }
+
+  .GCUAhG_formatSelect {
+    cursor: pointer;
+    width: auto;
+  }
+
+  .GCUAhG_eyeDropperTrigger, .GCUAhG_formatTrigger {
+    box-sizing: border-box;
+    height: var(--color-picker-action-size, var(--size-lg));
+    min-width: var(--color-picker-action-size, var(--size-lg));
+    justify-content: center;
+    align-items: center;
+    gap: var(--color-picker-action-gap, var(--spacing-2));
+    border: var(--color-picker-border-width, var(--border-width-sm)) solid
+      var(--color-picker-border-color, var(--color-border));
+    border-radius: var(--color-picker-radius, var(--radius-md));
+    padding-inline: var(--color-picker-action-padding-x, var(--spacing-2));
+    background: var(--color-picker-action-bg, transparent);
+    color: var(--color-picker-action-color, var(--color-muted-foreground));
+    font: inherit;
+    font-size: var(--color-picker-action-font-size, var(--text-sm));
+    line-height: var(--color-picker-action-line-height, var(--line-height-text-sm));
+    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    cursor: pointer;
+    transition: border-color var(--color-picker-transition, var(--transition-default)),
+      outline-color var(--color-picker-transition, var(--transition-default)),
+      background-color var(--color-picker-transition, var(--transition-default)),
+      color var(--color-picker-transition, var(--transition-default));
+    flex-shrink: 0;
+    margin: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--color-picker-icon-size, 1rem);
+      height: var(--color-picker-icon-size, 1rem);
+    }
+
+    &:is(:focus-visible, [data-focus]) {
+      border-color: var(--color-picker-focus-ring-color, var(--color-ring));
+      outline-color: var(--color-picker-focus-ring-color, var(--color-ring));
+    }
+
+    &:not(:is([disabled], [data-disabled], [data-readonly])) {
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--color-picker-action-bg-hover, var(--color-muted));
+          color: var(--color-picker-action-color-hover, var(--color-foreground));
+        }
+      }
+    }
+
+    &:is([disabled], [data-disabled], [data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  .GCUAhG_swatchGroup {
+    gap: var(--color-picker-swatch-gap, var(--spacing-2));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .GCUAhG_swatchTrigger {
+    border-radius: var(--color-picker-swatch-radius, var(--radius-sm));
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--color-picker-focus-ring-width, var(--border-width-sm))
+        var(--color-picker-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .GCUAhG_swatch {
+    box-sizing: border-box;
+    width: var(--color-picker-swatch-size, 2rem);
+    height: var(--color-picker-swatch-size, 2rem);
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--color-picker-swatch-border-width, var(--border-width-sm))
+      var(--color-picker-swatch-border-color, oklab(0% none none / .14));
+    flex-shrink: 0;
+    place-items: center;
+    display: grid;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .GCUAhG_swatchIndicator {
+    color: var(--color-picker-swatch-indicator-color, white);
+    filter: drop-shadow(0 1px 1px #00000073);
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    display: none;
+    position: absolute;
+    inset: 0;
+
+    & > svg {
+      width: var(--color-picker-swatch-indicator-size, 1rem);
+      height: var(--color-picker-swatch-indicator-size, 1rem);
+    }
+
+    [data-state="checked"] > &, &[data-state="checked"] {
+      display: inline-flex;
+    }
+  }
+
+  .GCUAhG_transparencyGrid {
+    border-radius: inherit;
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .GCUAhG_valueSwatch {
+    border-radius: inherit;
+    z-index: 1;
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .GCUAhG_valueText {
+    min-width: 0;
+    color: var(--color-picker-value-text-color, var(--color-picker-color, var(--color-foreground)));
+    font-size: var(--color-picker-value-text-font-size, var(--text-sm));
+    line-height: var(--color-picker-value-text-line-height, var(--line-height-text-sm));
+  }
+
+  .GCUAhG_view {
+    gap: var(--color-picker-view-gap, var(--spacing-2));
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+}