@crystallize/design-system 0.0.0 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @crystallize/design-system
+
+## 0.0.2
+
+### Patch Changes
+
+- 742b7b00: Add collapse all chunks button and remove unused prop from ActionMenu
+
+## 0.0.1
+
+### Patch Changes
+
+- 012f7c4: Add video on product variants and reuse images with lightbox for the app. Propagate dialog props to original component in the design system.

package/dist/index.d.ts

@@ -12,10 +12,9 @@ declare function Item({ children, className, onSelect }: ItemProps): JSX.Element
 
 declare type ActionMenuProps = {
     children: ReactNode;
-    className?: string;
     tabIndex?: number;
 };
-declare function ActionMenu({ children, className, tabIndex }: ActionMenuProps): JSX.Element;
+declare function ActionMenu({ children, tabIndex }: ActionMenuProps): JSX.Element;
 declare namespace ActionMenu {
     var Item: typeof Item;
 }
@@ -55,21 +54,23 @@ declare const dialogContentStyles: (props?: ({
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare type DialogContentProps = DialogContentStylesProps & {
     children: ReactNode;
-} & Pick<DialogFuncProps, 'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type'>;
-declare function DialogContent({ children, closable, type, ...delegated }: DialogContentProps): JSX.Element;
+} & Pick<DialogFuncProps, 'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type' | 'className'> & DialogPrimitive.DialogContentProps;
+declare function DialogContent({ children, closable, type, className, ...delegated }: DialogContentProps): JSX.Element;
 declare type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>;
-declare function DialogTitle(delegated: DialogTitleProps): JSX.Element;
+declare function DialogTitle({ className, ...delegated }: DialogTitleProps): JSX.Element;
 declare type DialogDescriptionProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogDescriptionProps & RefAttributes<HTMLParagraphElement>;
 declare function DialogDescription(delegated: DialogDescriptionProps): JSX.Element;
-declare type DialogBaseProps = {
+declare const DialogRoot: react.FC<DialogPrimitive.DialogProps>;
+declare type DialogBaseProps = React.ComponentProps<typeof DialogRoot> & {
     children: ReactNode;
 };
-declare function DialogBase({ children }: DialogBaseProps): JSX.Element;
+declare function DialogBase({ children, ...delegated }: DialogBaseProps): JSX.Element;
 declare namespace DialogBase {
     var Title: typeof DialogTitle;
     var Trigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & RefAttributes<HTMLButtonElement>>;
     var Description: typeof DialogDescription;
     var Content: typeof DialogContent;
+    var Overlay: react.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & RefAttributes<HTMLDivElement>>;
 }
 
 declare type DialogType = typeof DialogBase & DialogFuncProps;
@@ -100,7 +101,7 @@ declare type DropdownMenuRootProps = {
     children: ReactNode;
     content: ReactNode;
     alignContent?: 'start' | 'center' | 'end';
-    onOpenChange: (isOpen: boolean) => void;
+    onOpenChange?: (isOpen: boolean) => void;
 };
 declare function DropdownMenuRoot({ children, content, onOpenChange, alignContent }: DropdownMenuRootProps): JSX.Element;
 

package/dist/index.js

@@ -650,17 +650,17 @@ function Item2({ children, className, onSelect }) {
 
 // src/action-menu/action-menu.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function ActionMenu({ children, className, tabIndex }) {
+function ActionMenu({ children, tabIndex }) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenu.Root, {
     content: children,
+    alignContent: "center",
     children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", {
       tabIndex,
       type: "button",
       className: (0, import_clsx4.default)(
         "items-center bg-transparent rounded-full border-none cursor-pointer flex justify-center p-1",
         "hover:bg-gray-6 focus:bg-gray-6 focus:outline-offset-2 focus:outline focus:outline-1 focus:outline-glacier focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-glacier",
-        "active:scale-95",
-        className
+        "active:scale-95"
       ),
       "aria-label": "more options",
       children: [
@@ -727,6 +727,7 @@ Button.displayName = "Button";
 var destroyFns = [];
 
 // src/dialog/dialog.tsx
+var import_clsx5 = __toESM(require("clsx"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -745,7 +746,7 @@ var dialogContentStyles = (0, import_class_variance_authority2.cva)(
     }
   }
 );
-function DialogContent({ children, closable = true, type, ...delegated }) {
+function DialogContent({ children, closable = true, type, className, ...delegated }) {
   const withIcon = typeof type !== "undefined";
   const IconComponent = type && IconMap[type];
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DialogPrimitive.Portal, {
@@ -754,7 +755,7 @@ function DialogContent({ children, closable = true, type, ...delegated }) {
         className: "bg-black/30 fixed inset-0"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DialogPrimitive.Content, {
-        className: dialogContentStyles({ withIcon }),
+        className: dialogContentStyles({ withIcon, class: className }),
         ...delegated,
         children: [
           IconComponent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconComponent, {
@@ -782,9 +783,9 @@ function DialogContent({ children, closable = true, type, ...delegated }) {
     ]
   });
 }
-function DialogTitle(delegated) {
+function DialogTitle({ className, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DialogPrimitive.Title, {
-    className: "m-0 font-semibold text-2xl font-sans text-black-text",
+    className: (0, import_clsx5.default)("m-0 font-semibold text-2xl font-sans text-black-text", className),
     ...delegated
   });
 }
@@ -797,8 +798,9 @@ function DialogDescription(delegated) {
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogClose = DialogPrimitive.Close;
 var DialogRoot = DialogPrimitive.Root;
-function DialogBase({ children }) {
+function DialogBase({ children, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DialogRoot, {
+    ...delegated,
     children
   });
 }
@@ -806,6 +808,7 @@ DialogBase.Title = DialogTitle;
 DialogBase.Trigger = DialogTrigger;
 DialogBase.Description = DialogDescription;
 DialogBase.Content = DialogContent;
+DialogBase.Overlay = DialogPrimitive.Overlay;
 
 // src/dialog/config.tsx
 var import_react_dom = require("react-dom");
@@ -822,7 +825,7 @@ function ConfirmDialog({
   okText = "OK",
   onOk,
   onCancel,
-  cancelText = "cancel",
+  cancelText = "Cancel",
   onEscapeKeyDown,
   onInteractOutside,
   onPointerDownOutside,

package/dist/index.mjs

@@ -609,17 +609,17 @@ function Item2({ children, className, onSelect }) {
 
 // src/action-menu/action-menu.tsx
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-function ActionMenu({ children, className, tabIndex }) {
+function ActionMenu({ children, tabIndex }) {
   return /* @__PURE__ */ jsx14(DropdownMenu.Root, {
     content: children,
+    alignContent: "center",
     children: /* @__PURE__ */ jsxs9("button", {
       tabIndex,
       type: "button",
       className: clsx4(
         "items-center bg-transparent rounded-full border-none cursor-pointer flex justify-center p-1",
         "hover:bg-gray-6 focus:bg-gray-6 focus:outline-offset-2 focus:outline focus:outline-1 focus:outline-glacier focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-glacier",
-        "active:scale-95",
-        className
+        "active:scale-95"
       ),
       "aria-label": "more options",
       children: [
@@ -686,6 +686,7 @@ Button.displayName = "Button";
 var destroyFns = [];
 
 // src/dialog/dialog.tsx
+import clsx5 from "clsx";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -704,7 +705,7 @@ var dialogContentStyles = cva2(
     }
   }
 );
-function DialogContent({ children, closable = true, type, ...delegated }) {
+function DialogContent({ children, closable = true, type, className, ...delegated }) {
   const withIcon = typeof type !== "undefined";
   const IconComponent = type && IconMap[type];
   return /* @__PURE__ */ jsxs10(DialogPrimitive.Portal, {
@@ -713,7 +714,7 @@ function DialogContent({ children, closable = true, type, ...delegated }) {
         className: "bg-black/30 fixed inset-0"
       }),
       /* @__PURE__ */ jsxs10(DialogPrimitive.Content, {
-        className: dialogContentStyles({ withIcon }),
+        className: dialogContentStyles({ withIcon, class: className }),
         ...delegated,
         children: [
           IconComponent && /* @__PURE__ */ jsx16(IconComponent, {
@@ -741,9 +742,9 @@ function DialogContent({ children, closable = true, type, ...delegated }) {
     ]
   });
 }
-function DialogTitle(delegated) {
+function DialogTitle({ className, ...delegated }) {
   return /* @__PURE__ */ jsx16(DialogPrimitive.Title, {
-    className: "m-0 font-semibold text-2xl font-sans text-black-text",
+    className: clsx5("m-0 font-semibold text-2xl font-sans text-black-text", className),
     ...delegated
   });
 }
@@ -756,8 +757,9 @@ function DialogDescription(delegated) {
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogClose = DialogPrimitive.Close;
 var DialogRoot = DialogPrimitive.Root;
-function DialogBase({ children }) {
+function DialogBase({ children, ...delegated }) {
   return /* @__PURE__ */ jsx16(DialogRoot, {
+    ...delegated,
     children
   });
 }
@@ -765,6 +767,7 @@ DialogBase.Title = DialogTitle;
 DialogBase.Trigger = DialogTrigger;
 DialogBase.Description = DialogDescription;
 DialogBase.Content = DialogContent;
+DialogBase.Overlay = DialogPrimitive.Overlay;
 
 // src/dialog/config.tsx
 import { unmountComponentAtNode, render as DOMRender } from "react-dom";
@@ -781,7 +784,7 @@ function ConfirmDialog({
   okText = "OK",
   onOk,
   onCancel,
-  cancelText = "cancel",
+  cancelText = "Cancel",
   onEscapeKeyDown,
   onInteractOutside,
   onPointerDownOutside,

package/package.json

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

package/src/action-menu/action-menu.tsx

@@ -8,14 +8,12 @@ import { Item } from './action-item';
 
 type ActionMenuProps = {
   children: ReactNode;
-  className?: string;
   tabIndex?: number;
 };
 
-export function ActionMenu({ children, className, tabIndex }: ActionMenuProps) {
+export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
   return (
-    // @ts-expect-error
-    <DropdownMenu.Root content={children}>
+    <DropdownMenu.Root content={children} alignContent="center">
       <button
         tabIndex={tabIndex}
         type="button"
@@ -23,7 +21,6 @@ export function ActionMenu({ children, className, tabIndex }: ActionMenuProps) {
           'items-center bg-transparent rounded-full border-none cursor-pointer flex justify-center p-1',
           'hover:bg-gray-6 focus:bg-gray-6 focus:outline-offset-2 focus:outline focus:outline-1 focus:outline-glacier focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-glacier',
           'active:scale-95',
-          className,
         )}
         aria-label="more options"
       >

package/src/dialog/confirm-dialog.tsx

@@ -13,7 +13,7 @@ export function ConfirmDialog({
   okText = 'OK',
   onOk,
   onCancel,
-  cancelText = 'cancel',
+  cancelText = 'Cancel',
   onEscapeKeyDown,
   onInteractOutside,
   onPointerDownOutside,

package/src/dialog/dialog.tsx

@@ -1,5 +1,6 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { ReactNode, RefAttributes } from 'react';
+import clsx from 'clsx';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cva, VariantProps } from 'class-variance-authority';
 
 import { Button } from '../button';
@@ -26,9 +27,13 @@ const dialogContentStyles = cva(
 
 type DialogContentProps = DialogContentStylesProps & {
   children: ReactNode;
-} & Pick<DialogFuncProps, 'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type'>;
+} & Pick<
+    DialogFuncProps,
+    'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type' | 'className'
+  > &
+  DialogPrimitive.DialogContentProps;
 
-function DialogContent({ children, closable = true, type, ...delegated }: DialogContentProps) {
+function DialogContent({ children, closable = true, type, className, ...delegated }: DialogContentProps) {
   const withIcon = typeof type !== 'undefined';
 
   const IconComponent = type && IconMap[type];
@@ -36,7 +41,7 @@ function DialogContent({ children, closable = true, type, ...delegated }: Dialog
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay className="bg-black/30 fixed inset-0" />
-      <DialogPrimitive.Content className={dialogContentStyles({ withIcon })} {...delegated}>
+      <DialogPrimitive.Content className={dialogContentStyles({ withIcon, class: className })} {...delegated}>
         {IconComponent && <IconComponent className="my-1 shrink-0" width={32} height={32} />}
         {closable && (
           <DialogClose asChild>
@@ -53,8 +58,13 @@ function DialogContent({ children, closable = true, type, ...delegated }: Dialog
 
 type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>;
 
-function DialogTitle(delegated: DialogTitleProps) {
-  return <DialogPrimitive.Title className="m-0 font-semibold text-2xl font-sans text-black-text" {...delegated} />;
+function DialogTitle({ className, ...delegated }: DialogTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      className={clsx('m-0 font-semibold text-2xl font-sans text-black-text', className)}
+      {...delegated}
+    />
+  );
 }
 
 type DialogDescriptionProps = JSX.IntrinsicAttributes &
@@ -71,15 +81,16 @@ const DialogClose = DialogPrimitive.Close;
 
 export const DialogRoot = DialogPrimitive.Root;
 
-type DialogBaseProps = {
+type DialogBaseProps = React.ComponentProps<typeof DialogRoot> & {
   children: ReactNode;
 };
 
-export function DialogBase({ children }: DialogBaseProps) {
-  return <DialogRoot>{children}</DialogRoot>;
+export function DialogBase({ children, ...delegated }: DialogBaseProps) {
+  return <DialogRoot {...delegated}>{children}</DialogRoot>;
 }
 
 DialogBase.Title = DialogTitle;
 DialogBase.Trigger = DialogTrigger;
 DialogBase.Description = DialogDescription;
 DialogBase.Content = DialogContent;
+DialogBase.Overlay = DialogPrimitive.Overlay;

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -5,7 +5,7 @@ type DropdownMenuRootProps = {
   children: ReactNode;
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
-  onOpenChange: (isOpen: boolean) => void;
+  onOpenChange?: (isOpen: boolean) => void;
 };
 
 export function DropdownMenuRoot({ children, content, onOpenChange, alignContent = 'start' }: DropdownMenuRootProps) {