@crystallize/design-system 1.24.12 → 1.24.13

package/dist/index.mjs

@@ -191,15 +191,79 @@ var InlineRadio = {
   Item: InlineRadioItem
 };
 
-// src/progress/progress.tsx
+// src/popover/popover.tsx
 import { cx as cx3 } from "class-variance-authority";
-import * as ProgressPrimitives from "@radix-ui/react-progress";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+
+// src/popover/popover-close.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsx as jsx6 } from "react/jsx-runtime";
+function PopoverClose(props) {
+  const { asChild, children } = props;
+  return /* @__PURE__ */ jsx6(PopoverPrimitive.Close, {
+    asChild,
+    className: "c-popover-close",
+    children: children ?? /* @__PURE__ */ jsx6(Icon.Cancel, {
+      width: 16,
+      height: 16
+    })
+  });
+}
+
+// src/popover/popover.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Popover({
+  children,
+  closeButton,
+  content,
+  side,
+  open,
+  onOpenChange,
+  className,
+  container,
+  hasArrow = true,
+  ...delegatedContent
+}) {
+  return /* @__PURE__ */ jsxs3(PopoverPrimitive2.Root, {
+    open,
+    onOpenChange,
+    children: [
+      /* @__PURE__ */ jsx7(PopoverPrimitive2.Trigger, {
+        asChild: true,
+        children
+      }),
+      /* @__PURE__ */ jsx7(PopoverPrimitive2.Portal, {
+        container,
+        children: /* @__PURE__ */ jsxs3(PopoverPrimitive2.Content, {
+          ...delegatedContent,
+          side,
+          className: cx3("c-popover-content", className),
+          children: [
+            !closeButton ? null : /* @__PURE__ */ jsx7(PopoverClose, {
+              asChild: typeof closeButton !== "boolean",
+              children: typeof closeButton !== "boolean" ? closeButton : null
+            }),
+            hasArrow && /* @__PURE__ */ jsx7(PopoverPrimitive2.Arrow, {
+              className: "c-popover-arrow",
+              offset: 5
+            }),
+            content
+          ]
+        })
+      })
+    ]
+  });
+}
+
+// src/progress/progress.tsx
+import { cx as cx4 } from "class-variance-authority";
+import * as ProgressPrimitives from "@radix-ui/react-progress";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Progress({ className, value }) {
-  return /* @__PURE__ */ jsx6(ProgressPrimitives.Root, {
-    className: cx3(className, "c-progress-root"),
+  return /* @__PURE__ */ jsx8(ProgressPrimitives.Root, {
+    className: cx4(className, "c-progress-root"),
     value,
-    children: /* @__PURE__ */ jsx6(ProgressPrimitives.Indicator, {
+    children: /* @__PURE__ */ jsx8(ProgressPrimitives.Indicator, {
       className: "c-progress-indicator",
       style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
     })
@@ -208,12 +272,12 @@ function Progress({ className, value }) {
 
 // src/radio/radio.tsx
 import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function RadioGroupItem(props) {
-  return /* @__PURE__ */ jsx7(RadioGroupPrimitive2.Item, {
+  return /* @__PURE__ */ jsx9(RadioGroupPrimitive2.Item, {
     ...props,
     className: "c-radio-item",
-    children: /* @__PURE__ */ jsx7(RadioGroupPrimitive2.Indicator, {
+    children: /* @__PURE__ */ jsx9(RadioGroupPrimitive2.Indicator, {
       className: "c-radio-indicator"
     })
   });
@@ -225,20 +289,20 @@ var Radio = {
 
 // src/select/select-item.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { cx as cx4 } from "class-variance-authority";
+import { cx as cx5 } from "class-variance-authority";
 import * as SelectPrimitives from "@radix-ui/react-select";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var SelectItem = forwardRef3((props, ref) => {
   const { children, className, ...delegated } = props;
-  return /* @__PURE__ */ jsxs3(SelectPrimitives.Item, {
-    className: cx4("c-select-item", className),
+  return /* @__PURE__ */ jsxs4(SelectPrimitives.Item, {
+    className: cx5("c-select-item", className),
     ref,
     ...delegated,
     children: [
-      /* @__PURE__ */ jsx8(SelectPrimitives.ItemText, {
+      /* @__PURE__ */ jsx10(SelectPrimitives.ItemText, {
         children
       }),
-      /* @__PURE__ */ jsx8(SelectPrimitives.ItemIndicator, {})
+      /* @__PURE__ */ jsx10(SelectPrimitives.ItemIndicator, {})
     ]
   });
 });
@@ -248,7 +312,7 @@ SelectItem.displayName = "SelectItem";
 import { forwardRef as forwardRef4 } from "react";
 import { cva as cva4 } from "class-variance-authority";
 import * as SelectPrimitives2 from "@radix-ui/react-select";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var selectTriggerStyles = cva4("c-select-trigger", {
   variants: {
     size: {
@@ -264,34 +328,34 @@ var selectTriggerStyles = cva4("c-select-trigger", {
 });
 var SelectContainer = forwardRef4(
   ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
-    return /* @__PURE__ */ jsxs4(SelectPrimitives2.Root, {
+    return /* @__PURE__ */ jsxs5(SelectPrimitives2.Root, {
       ...delegated,
       children: [
-        /* @__PURE__ */ jsxs4(SelectPrimitives2.Trigger, {
+        /* @__PURE__ */ jsxs5(SelectPrimitives2.Trigger, {
           ref,
           className: selectTriggerStyles({ size, className: triggerClassName }),
           disabled,
           id,
           children: [
-            /* @__PURE__ */ jsx9(SelectPrimitives2.Value, {
-              placeholder: /* @__PURE__ */ jsx9("span", {
+            /* @__PURE__ */ jsx11(SelectPrimitives2.Value, {
+              placeholder: /* @__PURE__ */ jsx11("span", {
                 className: "c-select-value",
                 children: placeholder ?? "Select..."
               })
             }),
-            /* @__PURE__ */ jsx9(Icon.Arrow, {})
+            /* @__PURE__ */ jsx11(Icon.Arrow, {})
           ]
         }),
-        /* @__PURE__ */ jsx9(SelectPrimitives2.Portal, {
-          children: /* @__PURE__ */ jsxs4(SelectPrimitives2.Content, {
+        /* @__PURE__ */ jsx11(SelectPrimitives2.Portal, {
+          children: /* @__PURE__ */ jsxs5(SelectPrimitives2.Content, {
             className: "c-select-content",
             children: [
-              /* @__PURE__ */ jsx9(SelectPrimitives2.ScrollUpButton, {}),
-              /* @__PURE__ */ jsx9(SelectPrimitives2.Viewport, {
+              /* @__PURE__ */ jsx11(SelectPrimitives2.ScrollUpButton, {}),
+              /* @__PURE__ */ jsx11(SelectPrimitives2.Viewport, {
                 className: "c-select-viewport",
                 children
               }),
-              /* @__PURE__ */ jsx9(SelectPrimitives2.ScrollDownButton, {})
+              /* @__PURE__ */ jsx11(SelectPrimitives2.ScrollDownButton, {})
             ]
           })
         })
@@ -309,22 +373,22 @@ var Select = {
 
 // src/slider/slider.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { cx as cx5 } from "class-variance-authority";
+import { cx as cx6 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsxs5(SliderPrimitive.Root, {
-    className: cx5("c-slider-root", className),
+  return /* @__PURE__ */ jsxs6(SliderPrimitive.Root, {
+    className: cx6("c-slider-root", className),
     ref,
     ...delegated,
     children: [
-      /* @__PURE__ */ jsx10(SliderPrimitive.Track, {
+      /* @__PURE__ */ jsx12(SliderPrimitive.Track, {
         className: "c-slider-track",
-        children: /* @__PURE__ */ jsx10(SliderPrimitive.Range, {
+        children: /* @__PURE__ */ jsx12(SliderPrimitive.Range, {
           className: `c-slider-range ${transparentRange ? "c-slider-range-transparent" : ""}`
         })
       }),
-      /* @__PURE__ */ jsx10(SliderPrimitive.Thumb, {
+      /* @__PURE__ */ jsx12(SliderPrimitive.Thumb, {
         className: "c-slider-thumb"
       })
     ]
@@ -332,15 +396,15 @@ var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) =>
 });
 
 // src/stack-icon/stack-icon.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function StackIcon({ type, children, size = 18 }) {
-  return /* @__PURE__ */ jsxs6("span", {
+  return /* @__PURE__ */ jsxs7("span", {
     className: "c-stack-icon",
     children: [
-      type === "create" && /* @__PURE__ */ jsx11("span", {
+      type === "create" && /* @__PURE__ */ jsx13("span", {
         style: { width: size, height: size },
         className: "c-stack-icon__icon",
-        children: /* @__PURE__ */ jsx11(Icon.Add, {
+        children: /* @__PURE__ */ jsx13(Icon.Add, {
           width: size - 4,
           height: size - 4
         })
@@ -351,8 +415,8 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-import { cva as cva5, cx as cx6 } from "class-variance-authority";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { cva as cva5, cx as cx7 } from "class-variance-authority";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var tagStyles = cva5("c-tag", {
   variants: {
     variant: {
@@ -382,28 +446,28 @@ function Tag({
   showRemoveOnHover,
   ...delegated
 }) {
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: tagStyles({ className, variant, size }),
     ...delegated,
     children: [
-      !prepend ? null : /* @__PURE__ */ jsx12("span", {
+      !prepend ? null : /* @__PURE__ */ jsx14("span", {
         className: "c-tag__prepend",
         children: prepend
       }),
       children,
-      onRemove && /* @__PURE__ */ jsxs7("button", {
+      onRemove && /* @__PURE__ */ jsxs8("button", {
         type: "button",
-        className: cx6("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
+        className: cx7("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
         },
         children: [
-          /* @__PURE__ */ jsx12(Icon.Cancel, {
+          /* @__PURE__ */ jsx14(Icon.Cancel, {
             width: 12,
             height: 12
           }),
-          /* @__PURE__ */ jsx12("span", {
+          /* @__PURE__ */ jsx14("span", {
             className: "c-tag__remove-button-text",
             children: "Remove"
           })
@@ -415,12 +479,12 @@ function Tag({
 
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var LazyRichTextEditor = lazy(() => import("./rich-text-editor-VSCYKBXX.mjs"));
 var RichTextEditor = (props) => {
-  return /* @__PURE__ */ jsx13(Suspense, {
+  return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,
-    children: /* @__PURE__ */ jsx13(LazyRichTextEditor, {
+    children: /* @__PURE__ */ jsx15(LazyRichTextEditor, {
       ...props
     })
   });
@@ -430,9 +494,9 @@ var RichTextEditor = (props) => {
 import { Toaster } from "sonner";
 
 // src/toast/toast.tsx
-import { cva as cva6, cx as cx7 } from "class-variance-authority";
+import { cva as cva6, cx as cx8 } from "class-variance-authority";
 import { toast as sonnerToast } from "sonner";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var toastStyles = cva6("c-toast", {
   variants: {
     type: {
@@ -457,34 +521,34 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   const withMessage = !!message;
   const toastId = Date.now().toString();
   sonnerToast.custom(
-    (id) => /* @__PURE__ */ jsxs8("div", {
+    (id) => /* @__PURE__ */ jsxs9("div", {
       "data-testid": `toast-${type}`,
-      className: cx7(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: cx8(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
-        /* @__PURE__ */ jsx14("div", {
-          children: /* @__PURE__ */ jsx14(ToastIcon, {
+        /* @__PURE__ */ jsx16("div", {
+          children: /* @__PURE__ */ jsx16(ToastIcon, {
             width: 26,
             height: 26
           })
         }),
-        /* @__PURE__ */ jsxs8("div", {
+        /* @__PURE__ */ jsxs9("div", {
           children: [
-            /* @__PURE__ */ jsx14("div", {
+            /* @__PURE__ */ jsx16("div", {
               className: "c-toast-title",
               children: title
             }),
-            !!message && /* @__PURE__ */ jsx14("div", {
+            !!message && /* @__PURE__ */ jsx16("div", {
               className: "c-toast-message",
               children: message
             })
           ]
         }),
-        /* @__PURE__ */ jsx14("div", {
+        /* @__PURE__ */ jsx16("div", {
           className: "c-toast-close",
-          children: /* @__PURE__ */ jsx14(IconButton, {
+          children: /* @__PURE__ */ jsx16(IconButton, {
             onClick: () => sonnerToast.dismiss(id),
             size: "xs",
-            children: /* @__PURE__ */ jsx14(Icon.Cancel, {
+            children: /* @__PURE__ */ jsx16(Icon.Cancel, {
               width: 12,
               height: 12
             })
@@ -503,9 +567,9 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
 toast.dismiss = sonnerToast.dismiss;
 
 // src/switch/switch.tsx
-import { cva as cva7, cx as cx8 } from "class-variance-authority";
+import { cva as cva7, cx as cx9 } from "class-variance-authority";
 import * as RadixSwitch from "@radix-ui/react-switch";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var switchStyles = cva7(["c-switch-root"], {
   variants: {
     size: {
@@ -518,12 +582,12 @@ var switchStyles = cva7(["c-switch-root"], {
   }
 });
 function Switch({ size, checked, ...props }) {
-  return /* @__PURE__ */ jsx15(RadixSwitch.Root, {
+  return /* @__PURE__ */ jsx17(RadixSwitch.Root, {
     ...props,
     checked,
     className: switchStyles({ size }),
-    children: /* @__PURE__ */ jsx15(RadixSwitch.Thumb, {
-      className: cx8("c-switch-thumb", checked === null ? "middle-position" : "")
+    children: /* @__PURE__ */ jsx17(RadixSwitch.Thumb, {
+      className: cx9("c-switch-thumb", checked === null ? "middle-position" : "")
     })
   });
 }
@@ -549,6 +613,7 @@ export {
   Input,
   InputWithLabel,
   Label,
+  Popover,
   Progress,
   Radio,
   RichTextEditor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.12",
+  "version": "1.24.13",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,7 +41,7 @@
     "@radix-ui/react-collapsible": "1.0.0",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-popover": "1.0.0",
+    "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-radio-group": "1.1.0",
     "@radix-ui/react-select": "1.1.2",

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './inline-radio';
 export * from './input-with-label';
 export * from './input';
 export * from './label';
+export * from './popover';
 export * from './progress';
 export * from './radio';
 export * from './select';

package/src/popover/popover.tsx

@@ -12,6 +12,7 @@ type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'>
     closeButton?: boolean | JSX.Element;
     hasArrow?: boolean;
     content: ReactNode;
+    onOpenAutoFocus?: (e: Event) => void;
   };
 
 export function Popover({