@crystallize/design-system 1.24.35 → 1.24.37

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-RGQ4WALV.mjs";
+} from "./chunk-7BLEJWBK.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -486,7 +486,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-MZTMZK5H.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-TANRKQM7.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,
@@ -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/dist/{rich-text-editor-MZTMZK5H.mjs → rich-text-editor-TANRKQM7.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-RGQ4WALV.mjs";
+} from "./chunk-7BLEJWBK.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.35",
+  "version": "1.24.37",
   "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/iconography/copy.tsx

@@ -1,35 +1,29 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type CopyProps = SVGProps<SVGSVGElement>;
 
 type CopyRef = SVGSVGElement;
 
 export const Copy = forwardRef<CopyRef, CopyProps>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.60925 19.5266L5.88208 18.9923C6.25379 19.182 6.67497 19.2893 7.12296 19.2893H8.45636V19.8893H7.12296C6.57795 19.8893 6.06349 19.7586 5.60925 19.5266ZM10.2342 19.8893V19.2893H11.5676C12.0156 19.2893 12.4368 19.182 12.8085 18.9923L13.0813 19.5266C12.6271 19.7586 12.1126 19.8893 11.5676 19.8893H10.2342ZM14.9011 11.1111H14.3011V8.77766C14.3011 8.32967 14.1938 7.9085 14.0041 7.53678L14.5384 7.26395C14.7703 7.71819 14.9011 8.23265 14.9011 8.77766V11.1111ZM8.45636 5.44415H7.12296C6.57795 5.44415 6.06349 5.57495 5.60925 5.80686L5.88208 6.34124C6.25379 6.15146 6.67497 6.04415 7.12296 6.04415H8.45636V5.44415ZM3.78945 14.2224H4.38945V16.5558C4.38945 17.0038 4.49676 17.425 4.68654 17.7967L4.15215 18.0696C3.92024 17.6153 3.78945 17.1009 3.78945 16.5558V14.2224ZM3.78945 11.1111H4.38945V8.77766C4.38945 8.32968 4.49676 7.9085 4.68654 7.53678L4.15215 7.26395C3.92024 7.71819 3.78945 8.23265 3.78945 8.77766V11.1111ZM10.2342 5.44415V6.04415H11.5676C12.0156 6.04415 12.4368 6.15146 12.8085 6.34124L13.0813 5.80686C12.6271 5.57495 12.1126 5.44415 11.5676 5.44415H10.2342ZM14.9011 14.2224H14.3011V16.5558C14.3011 17.0038 14.1938 17.425 14.0041 17.7967L14.5384 18.0696C14.7703 17.6153 14.9011 17.1009 14.9011 16.5558V14.2224Z"
-        fill="#528693"
+        fill={stroke}
       />
       <path
         d="M8.23413 5.44417C8.23413 3.60312 9.72659 2.11066 11.5676 2.11066H16.0123C17.8534 2.11066 19.3458 3.60312 19.3458 5.44416V13.2223C19.3458 15.0634 17.8534 16.5559 16.0123 16.5559H11.5676C9.72659 16.5559 8.23413 15.0634 8.23413 13.2223V5.44417Z"
-        fill="#BFF6F8"
+        fill={fill}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16.0123 2.71066H11.5676C10.058 2.71066 8.83413 3.93449 8.83413 5.44417V13.2223C8.83413 14.732 10.058 15.9559 11.5676 15.9559H16.0123C17.522 15.9559 18.7458 14.732 18.7458 13.2223V5.44416C18.7458 3.93449 17.522 2.71066 16.0123 2.71066ZM11.5676 2.11066C9.72659 2.11066 8.23413 3.60312 8.23413 5.44417V13.2223C8.23413 15.0634 9.72659 16.5559 11.5676 16.5559H16.0123C17.8534 16.5559 19.3458 15.0634 19.3458 13.2223V5.44416C19.3458 3.60312 17.8534 2.11066 16.0123 2.11066H11.5676Z"
-        fill="#528693"
+        fill={stroke}
       />
     </svg>
   );

package/src/iconography/dots.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, SVGProps } from 'react';
+
+type DotsProps = SVGProps<SVGSVGElement>;
+
+type DotsRef = SVGSVGElement;
+
+export const Dots = forwardRef<DotsRef, DotsProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" {...delegated}>
+      <circle cx="10" cy="5" r="1.7857" fill="#9095A8" />
+      <circle cx="10" cy="10" r="1.7857" fill="#9095A8" />
+      <circle cx="10" cy="15" r="1.7857" fill="#9095A8" />
+    </svg>
+  );
+});
+
+Dots.displayName = 'DotsIcon';

package/src/iconography/index.ts

@@ -30,6 +30,7 @@ import { DateInfinity } from './date-infinity';
 import { Discovery } from './discovery';
 import { Document } from './document';
 import { DocumentShortcut } from './document-shortcut';
+import { Dots } from './dots';
 import { Download } from './download';
 import { DragHandle } from './drag-handle';
 import { DynamicValue } from './dynamic-value';
@@ -146,6 +147,7 @@ export const Icon = {
   Dashboard,
   Document,
   DocumentShortcut,
+  Dots,
   Download,
   DragHandle,
   DynamicValue,

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;
   }