@crystallize/design-system 0.0.0 → 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @crystallize/design-system
+
+## 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

@@ -55,21 +55,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;

package/dist/index.js

@@ -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

@@ -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.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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;