@crystallize/design-system 1.24.35 → 1.24.36

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @crystallize/design-system
 
+## 1.24.36
+
+### Patch Changes
+
+- 92b8a39: This PR is migrating most of the get image query to next, but showcases part is left on legacy.
+  Design system is exporting colors to be used in color picker/
+
 ## 1.24.35
 
 ### Patch Changes

package/dist/index.css

@@ -423,9 +423,59 @@
   --c-color-elevate: var(--c-color-purple-50-900);
   --c-color-overlay: 0 0 0 ;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+.ml-4 {
+  margin-left: 1rem;
+}
 .block {
   display: block;
 }
+.h-5 {
+  height: 1.25rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-solid {
+  border-style: solid;
+}
+.p-0 {
+  padding: 0px;
+}
+.p-0\.5 {
+  padding: 0.125rem;
+}
+.p-5 {
+  padding: 1.25rem;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+.text-gray-500-400 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+}
 
 /* src/button/button.css */
 .c-btn {
@@ -1619,6 +1669,9 @@
   background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
   opacity: 0.4;
 }
+.c-radio-item:not(:disabled) {
+  cursor: pointer;
+}
 .c-radio-item[aria-checked=true] {
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity));

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAttributes, ComponentPropsWithoutRef, LabelHTMLAttributes } from 'react';
+import react__default, { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAttributes, ComponentPropsWithoutRef, LabelHTMLAttributes, SetStateAction } from 'react';
 import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
@@ -482,6 +482,15 @@ type CustomSwitchProps = SwitchStylesProps & Omit<SwitchProps, 'checked'> & {
 };
 declare function Switch({ size, checked, ...props }: CustomSwitchProps): JSX.Element;
 
+type ColorPickerProps = {
+    value?: string;
+    setValue: (value: string) => void;
+    children: react__default.ReactNode;
+    isOpen: boolean;
+    setIsOpen: react__default.Dispatch<SetStateAction<boolean>>;
+};
+declare function ColorPicker({ value, setValue, children, isOpen, setIsOpen }: ColorPickerProps): JSX.Element;
+
 declare const Icon: {
     Add: react.ForwardRefExoticComponent<Pick<react.SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "height" | "stroke" | "strokeLinecap" | "name" | "type" | "to" | "href" | "target" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "end" | "orientation" | "max" | "media" | "method" | "min" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "strokeDasharray" | "strokeDashoffset" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & react.RefAttributes<SVGSVGElement>>;
     Archive: react.ForwardRefExoticComponent<Pick<react.SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "height" | "stroke" | "strokeLinecap" | "name" | "type" | "to" | "href" | "target" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "end" | "orientation" | "max" | "media" | "method" | "min" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "strokeDasharray" | "strokeDashoffset" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & react.RefAttributes<SVGSVGElement>>;
@@ -641,4 +650,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Popover, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, ColorPicker, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Popover, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };

package/dist/index.js

@@ -40901,6 +40901,7 @@ __export(src_exports, {
   Checkbox: () => Checkbox,
   Collapsible: () => Collapsible,
   CollapsibleTrigger: () => CollapsibleTrigger,
+  ColorPicker: () => ColorPicker,
   Dialog: () => Dialog,
   DropdownMenu: () => DropdownMenu,
   Icon: () => Icon,
@@ -41543,6 +41544,254 @@ function Switch2({ size, checked, ...props }) {
   });
 }
 
+// src/color-picker/color-picker.tsx
+var import_react153 = require("react");
+
+// src/colors/colors.json
+var colors_default = {
+  cyan: {
+    "50": "#eefdfc",
+    "100": "#bff6f8",
+    "200": "#acf1f5",
+    "300": "#73e5ed",
+    "400": "#33d0dd",
+    "500": "#17b3c3",
+    "600": "#1690a4",
+    "700": "#197385",
+    "800": "#1d5e6d",
+    "900": "#1c4e5d"
+  },
+  pink: {
+    "50": "#fef1f9",
+    "100": "#fee5f4",
+    "200": "#ffccec",
+    "300": "#ffa1db",
+    "400": "#ff66c0",
+    "500": "#fb39a4",
+    "600": "#eb1782",
+    "700": "#cd0966",
+    "800": "#a90b54",
+    "900": "#8d0e49"
+  },
+  gray: {
+    "50": "#f5f5f6",
+    "100": "#e4e5e9",
+    "200": "#cccfd5",
+    "300": "#a9aeb7",
+    "400": "#7e8592",
+    "500": "#626778",
+    "600": "#545866",
+    "700": "#4c4f5a",
+    "800": "#40424a",
+    "900": "#393a40"
+  },
+  purple: {
+    "50": "#f7f6f9",
+    "100": "#eeecf2",
+    "200": "#d8d5e2",
+    "300": "#b6b0c9",
+    "400": "#8e85ab",
+    "500": "#706691",
+    "600": "#5b5178",
+    "700": "#4b4262",
+    "800": "#403953",
+    "900": "#393347"
+  },
+  green: {
+    "50": "#f3f8f8",
+    "100": "#dfebee",
+    "200": "#c3dade",
+    "300": "#9abfc6",
+    "400": "#699ca7",
+    "500": "#528693",
+    "600": "#436a77",
+    "700": "#3b5863",
+    "800": "#374b53",
+    "900": "#314148"
+  },
+  orange: {
+    "50": "#fff9eb",
+    "100": "#ffedc6",
+    "200": "#ffde99",
+    "300": "#ffbf4a",
+    "400": "#ffa520",
+    "500": "#f98107",
+    "600": "#dd5c02",
+    "700": "#b73d06",
+    "800": "#942e0c",
+    "900": "#7a270d"
+  },
+  "s-red": {
+    "50": "#fef2f2",
+    "100": "#ffe1e1",
+    "200": "#ffc8c8",
+    "300": "#ffadad",
+    "400": "#fd6c6c",
+    "500": "#f53e3e",
+    "600": "#e22020",
+    "700": "#be1717",
+    "800": "#9d1717",
+    "900": "#821a1a"
+  },
+  "s-orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#ffd6a5",
+    "300": "#ffbb72",
+    "400": "#fd943a",
+    "500": "#fc7513",
+    "600": "#ed5909",
+    "700": "#c4420a",
+    "800": "#9c3410",
+    "900": "#7d2d11"
+  },
+  "s-yellow": {
+    "50": "#fefee8",
+    "100": "#fdffb6",
+    "200": "#fffe88",
+    "300": "#fff744",
+    "400": "#fee911",
+    "500": "#eecf04",
+    "600": "#cda201",
+    "700": "#a47404",
+    "800": "#875b0c",
+    "900": "#734a10"
+  },
+  "s-green": {
+    "50": "#f2ffee",
+    "100": "#deffd8",
+    "200": "#caffbf",
+    "300": "#8dfd78",
+    "400": "#53f236",
+    "500": "#2cdb0c",
+    "600": "#1eb603",
+    "700": "#1b8e07",
+    "800": "#1a700b",
+    "900": "#165b0c"
+  },
+  "s-blue": {
+    "50": "#eff5ff",
+    "100": "#dae7ff",
+    "200": "#bed5ff",
+    "300": "#a0c4ff",
+    "400": "#5d96fd",
+    "500": "#376ffa",
+    "600": "#214fef",
+    "700": "#193adc",
+    "800": "#1b31b2",
+    "900": "#1c2f8c"
+  },
+  "s-purple": {
+    "50": "#f4f3ff",
+    "100": "#ebe8ff",
+    "200": "#d9d5ff",
+    "300": "#bdb2ff",
+    "400": "#9d88fd",
+    "500": "#7e58fa",
+    "600": "#6f35f2",
+    "700": "#6023de",
+    "800": "#501dba",
+    "900": "#431a98"
+  },
+  "s-pink": {
+    "50": "#fff4ff",
+    "100": "#ffe7ff",
+    "200": "#ffc6ff",
+    "300": "#fea9fa",
+    "400": "#fc76f4",
+    "500": "#f342e7",
+    "600": "#d722c8",
+    "700": "#b219a1",
+    "800": "#921684",
+    "900": "#771869"
+  }
+};
+
+// src/color-picker/color-picker.tsx
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var SHADES = ["200", "300", "400", "500", "600", "700", "800"];
+var ORDERED_COLOR_NAMES = [
+  "s-green",
+  "s-red",
+  "orange",
+  "s-yellow",
+  "purple",
+  "gray",
+  "green",
+  "s-pink",
+  "pink",
+  "cyan",
+  "s-purple",
+  "s-blue"
+];
+function ColorPicker({ value, setValue, children, isOpen, setIsOpen }) {
+  const [hoveredColor, setHoveredColor] = (0, import_react153.useState)(null);
+  const colorLookupMap = (0, import_react153.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    ORDERED_COLOR_NAMES.forEach((colorName) => {
+      SHADES.forEach((shade) => {
+        const color = colors_default[colorName];
+        map.set(color[shade], `${colorName} ${shade}`);
+      });
+    });
+    return map;
+  }, []);
+  const getColorNameAndHue = (colorValue) => {
+    return colorLookupMap.get(colorValue) || "Color Name and Hue not found";
+  };
+  const displayedColorInfo = hoveredColor || value ? getColorNameAndHue(hoveredColor ?? value) : "Select a color";
+  const handleColorSelect = (colorValue) => {
+    setValue(colorValue);
+    setIsOpen(false);
+  };
+  const handleMouseEnter = (colorValue) => setHoveredColor(colorValue);
+  const handleMouseLeave = () => setHoveredColor(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Popover, {
+    open: isOpen,
+    side: "bottom",
+    hasArrow: true,
+    onOpenChange: setIsOpen,
+    content: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(Card, {
+      variant: "elevate",
+      className: " border border-solid border-border p-5",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", {
+          className: "mb-3",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", {
+              className: "text-sm font-bold capitalize",
+              children: displayedColorInfo
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", {
+              className: "ml-4 text-sm italic text-gray-500-400",
+              children: hoveredColor ?? value
+            })
+          ]
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+          className: "grid grid-cols-12",
+          children: ORDERED_COLOR_NAMES.map((colorName) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+            children: SHADES.map((shade) => {
+              const colorValue = colors_default[colorName][shade];
+              return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+                className: "cursor-pointer rounded p-0.5",
+                onClick: () => handleColorSelect(colorValue),
+                onMouseEnter: () => handleMouseEnter(colorValue),
+                onMouseLeave: handleMouseLeave,
+                children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+                  className: "h-5 w-5",
+                  style: { backgroundColor: colorValue }
+                })
+              }, colorValue);
+            })
+          }, colorName))
+        })
+      ]
+    }),
+    children
+  });
+}
+
 // src/index.ts
 init_iconography();
 var tokens = {
@@ -41558,6 +41807,7 @@ var tokens = {
   Checkbox,
   Collapsible,
   CollapsibleTrigger,
+  ColorPicker,
   Dialog,
   DropdownMenu,
   Icon,

package/dist/index.mjs

@@ -599,6 +599,254 @@ function Switch({ size, checked, ...props }) {
   });
 }
 
+// src/color-picker/color-picker.tsx
+import { useState, useMemo } from "react";
+
+// src/colors/colors.json
+var colors_default = {
+  cyan: {
+    "50": "#eefdfc",
+    "100": "#bff6f8",
+    "200": "#acf1f5",
+    "300": "#73e5ed",
+    "400": "#33d0dd",
+    "500": "#17b3c3",
+    "600": "#1690a4",
+    "700": "#197385",
+    "800": "#1d5e6d",
+    "900": "#1c4e5d"
+  },
+  pink: {
+    "50": "#fef1f9",
+    "100": "#fee5f4",
+    "200": "#ffccec",
+    "300": "#ffa1db",
+    "400": "#ff66c0",
+    "500": "#fb39a4",
+    "600": "#eb1782",
+    "700": "#cd0966",
+    "800": "#a90b54",
+    "900": "#8d0e49"
+  },
+  gray: {
+    "50": "#f5f5f6",
+    "100": "#e4e5e9",
+    "200": "#cccfd5",
+    "300": "#a9aeb7",
+    "400": "#7e8592",
+    "500": "#626778",
+    "600": "#545866",
+    "700": "#4c4f5a",
+    "800": "#40424a",
+    "900": "#393a40"
+  },
+  purple: {
+    "50": "#f7f6f9",
+    "100": "#eeecf2",
+    "200": "#d8d5e2",
+    "300": "#b6b0c9",
+    "400": "#8e85ab",
+    "500": "#706691",
+    "600": "#5b5178",
+    "700": "#4b4262",
+    "800": "#403953",
+    "900": "#393347"
+  },
+  green: {
+    "50": "#f3f8f8",
+    "100": "#dfebee",
+    "200": "#c3dade",
+    "300": "#9abfc6",
+    "400": "#699ca7",
+    "500": "#528693",
+    "600": "#436a77",
+    "700": "#3b5863",
+    "800": "#374b53",
+    "900": "#314148"
+  },
+  orange: {
+    "50": "#fff9eb",
+    "100": "#ffedc6",
+    "200": "#ffde99",
+    "300": "#ffbf4a",
+    "400": "#ffa520",
+    "500": "#f98107",
+    "600": "#dd5c02",
+    "700": "#b73d06",
+    "800": "#942e0c",
+    "900": "#7a270d"
+  },
+  "s-red": {
+    "50": "#fef2f2",
+    "100": "#ffe1e1",
+    "200": "#ffc8c8",
+    "300": "#ffadad",
+    "400": "#fd6c6c",
+    "500": "#f53e3e",
+    "600": "#e22020",
+    "700": "#be1717",
+    "800": "#9d1717",
+    "900": "#821a1a"
+  },
+  "s-orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#ffd6a5",
+    "300": "#ffbb72",
+    "400": "#fd943a",
+    "500": "#fc7513",
+    "600": "#ed5909",
+    "700": "#c4420a",
+    "800": "#9c3410",
+    "900": "#7d2d11"
+  },
+  "s-yellow": {
+    "50": "#fefee8",
+    "100": "#fdffb6",
+    "200": "#fffe88",
+    "300": "#fff744",
+    "400": "#fee911",
+    "500": "#eecf04",
+    "600": "#cda201",
+    "700": "#a47404",
+    "800": "#875b0c",
+    "900": "#734a10"
+  },
+  "s-green": {
+    "50": "#f2ffee",
+    "100": "#deffd8",
+    "200": "#caffbf",
+    "300": "#8dfd78",
+    "400": "#53f236",
+    "500": "#2cdb0c",
+    "600": "#1eb603",
+    "700": "#1b8e07",
+    "800": "#1a700b",
+    "900": "#165b0c"
+  },
+  "s-blue": {
+    "50": "#eff5ff",
+    "100": "#dae7ff",
+    "200": "#bed5ff",
+    "300": "#a0c4ff",
+    "400": "#5d96fd",
+    "500": "#376ffa",
+    "600": "#214fef",
+    "700": "#193adc",
+    "800": "#1b31b2",
+    "900": "#1c2f8c"
+  },
+  "s-purple": {
+    "50": "#f4f3ff",
+    "100": "#ebe8ff",
+    "200": "#d9d5ff",
+    "300": "#bdb2ff",
+    "400": "#9d88fd",
+    "500": "#7e58fa",
+    "600": "#6f35f2",
+    "700": "#6023de",
+    "800": "#501dba",
+    "900": "#431a98"
+  },
+  "s-pink": {
+    "50": "#fff4ff",
+    "100": "#ffe7ff",
+    "200": "#ffc6ff",
+    "300": "#fea9fa",
+    "400": "#fc76f4",
+    "500": "#f342e7",
+    "600": "#d722c8",
+    "700": "#b219a1",
+    "800": "#921684",
+    "900": "#771869"
+  }
+};
+
+// src/color-picker/color-picker.tsx
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var SHADES = ["200", "300", "400", "500", "600", "700", "800"];
+var ORDERED_COLOR_NAMES = [
+  "s-green",
+  "s-red",
+  "orange",
+  "s-yellow",
+  "purple",
+  "gray",
+  "green",
+  "s-pink",
+  "pink",
+  "cyan",
+  "s-purple",
+  "s-blue"
+];
+function ColorPicker({ value, setValue, children, isOpen, setIsOpen }) {
+  const [hoveredColor, setHoveredColor] = useState(null);
+  const colorLookupMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    ORDERED_COLOR_NAMES.forEach((colorName) => {
+      SHADES.forEach((shade) => {
+        const color = colors_default[colorName];
+        map.set(color[shade], `${colorName} ${shade}`);
+      });
+    });
+    return map;
+  }, []);
+  const getColorNameAndHue = (colorValue) => {
+    return colorLookupMap.get(colorValue) || "Color Name and Hue not found";
+  };
+  const displayedColorInfo = hoveredColor || value ? getColorNameAndHue(hoveredColor ?? value) : "Select a color";
+  const handleColorSelect = (colorValue) => {
+    setValue(colorValue);
+    setIsOpen(false);
+  };
+  const handleMouseEnter = (colorValue) => setHoveredColor(colorValue);
+  const handleMouseLeave = () => setHoveredColor(null);
+  return /* @__PURE__ */ jsx18(Popover, {
+    open: isOpen,
+    side: "bottom",
+    hasArrow: true,
+    onOpenChange: setIsOpen,
+    content: /* @__PURE__ */ jsxs10(Card, {
+      variant: "elevate",
+      className: " border border-solid border-border p-5",
+      children: [
+        /* @__PURE__ */ jsxs10("div", {
+          className: "mb-3",
+          children: [
+            /* @__PURE__ */ jsx18("span", {
+              className: "text-sm font-bold capitalize",
+              children: displayedColorInfo
+            }),
+            /* @__PURE__ */ jsx18("span", {
+              className: "ml-4 text-sm italic text-gray-500-400",
+              children: hoveredColor ?? value
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx18("div", {
+          className: "grid grid-cols-12",
+          children: ORDERED_COLOR_NAMES.map((colorName) => /* @__PURE__ */ jsx18("div", {
+            children: SHADES.map((shade) => {
+              const colorValue = colors_default[colorName][shade];
+              return /* @__PURE__ */ jsx18("div", {
+                className: "cursor-pointer rounded p-0.5",
+                onClick: () => handleColorSelect(colorValue),
+                onMouseEnter: () => handleMouseEnter(colorValue),
+                onMouseLeave: handleMouseLeave,
+                children: /* @__PURE__ */ jsx18("div", {
+                  className: "h-5 w-5",
+                  style: { backgroundColor: colorValue }
+                })
+              }, colorValue);
+            })
+          }, colorName))
+        })
+      ]
+    }),
+    children
+  });
+}
+
 // src/index.ts
 var tokens = {
   button: buttonTokens,
@@ -612,6 +860,7 @@ export {
   Checkbox,
   Collapsible,
   CollapsibleTrigger,
+  ColorPicker,
   Dialog,
   DropdownMenu,
   Icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.35",
+  "version": "1.24.36",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/color-picker/color-picker.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useMemo, type SetStateAction } from 'react';
+
+import { Card } from '../card';
+import { colors } from '../colors';
+import { Popover } from '../popover';
+
+const SHADES = ['200', '300', '400', '500', '600', '700', '800'] as const;
+
+const ORDERED_COLOR_NAMES = [
+  's-green',
+  's-red',
+  'orange',
+  's-yellow',
+  'purple',
+  'gray',
+  'green',
+  's-pink',
+  'pink',
+  'cyan',
+  's-purple',
+  's-blue',
+] as const;
+
+type ColorPickerProps = {
+  value?: string;
+  setValue: (value: string) => void;
+  children: React.ReactNode;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<SetStateAction<boolean>>;
+};
+
+export function ColorPicker({ value, setValue, children, isOpen, setIsOpen }: ColorPickerProps) {
+  const [hoveredColor, setHoveredColor] = useState<string | null>(null);
+
+  const colorLookupMap = useMemo(() => {
+    const map = new Map();
+    ORDERED_COLOR_NAMES.forEach(colorName => {
+      SHADES.forEach(shade => {
+        const color = colors[colorName];
+        map.set(color[shade], `${colorName} ${shade}`);
+      });
+    });
+    return map;
+  }, []);
+
+  const getColorNameAndHue = (colorValue?: string): string => {
+    return colorLookupMap.get(colorValue) || 'Color Name and Hue not found';
+  };
+
+  const displayedColorInfo = hoveredColor || value ? getColorNameAndHue(hoveredColor ?? value) : 'Select a color';
+
+  const handleColorSelect = (colorValue: string) => {
+    setValue(colorValue);
+    setIsOpen(false);
+  };
+
+  const handleMouseEnter = (colorValue: string) => setHoveredColor(colorValue);
+  const handleMouseLeave = () => setHoveredColor(null);
+
+  return (
+    <Popover
+      open={isOpen}
+      side="bottom"
+      hasArrow
+      onOpenChange={setIsOpen}
+      content={
+        <Card variant="elevate" className=" border border-solid border-border p-5">
+          <div className="mb-3">
+            <span className="text-sm font-bold capitalize">{displayedColorInfo}</span>
+            <span className="ml-4 text-sm italic text-gray-500-400">{hoveredColor ?? value}</span>
+          </div>
+
+          <div className="grid grid-cols-12">
+            {ORDERED_COLOR_NAMES.map(colorName => (
+              <div key={colorName}>
+                {SHADES.map(shade => {
+                  const colorValue = colors[colorName][shade];
+
+                  return (
+                    <div
+                      key={colorValue}
+                      className="cursor-pointer rounded p-0.5"
+                      onClick={() => handleColorSelect(colorValue)}
+                      onMouseEnter={() => handleMouseEnter(colorValue)}
+                      onMouseLeave={handleMouseLeave}
+                    >
+                      <div className="h-5 w-5" style={{ backgroundColor: colorValue }} />
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </Card>
+      }
+    >
+      {children}
+    </Popover>
+  );
+}

package/src/color-picker/index.ts

@@ -0,0 +1 @@
+export { ColorPicker } from './color-picker';

package/src/index.ts

@@ -29,6 +29,7 @@ export * from './rich-text-editor';
 export * from './toast';
 export * from './tooltip';
 export * from './switch';
+export * from './color-picker';
 
 // Icons ---
 export * from './iconography';

package/src/radio/radio.css

@@ -10,6 +10,10 @@
     @apply bg-gray-100-800 opacity-40;
   }
 
+  &:not(:disabled) {
+    @apply cursor-pointer;
+  }
+
   &[aria-checked='true'] {
     @apply border-cyan-700-200 bg-cyan-200-700;
   }