dash-ui-kit 1.0.93 → 2.0.0-dev

package/dist/react/components/dialog/index.cjs.js

@@ -0,0 +1,292 @@
+"use client";
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Dialog = require('@radix-ui/react-dialog');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var index = require('../icons/index.cjs.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog);
+
+// Visually hidden component for accessibility
+const VisuallyHidden = ({
+  children
+}) => jsxRuntime.jsx("span", {
+  style: {
+    position: 'absolute',
+    border: 0,
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal'
+  },
+  children: children
+});
+const overlayStyles = classVarianceAuthority.cva(`
+    fixed
+    inset-0
+    z-50
+    bg-black/80
+    data-[state=open]:animate-in
+    data-[state=closed]:animate-out
+    data-[state=closed]:fade-out-0
+    data-[state=open]:fade-in-0
+  `, {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    }
+  }
+});
+const contentStyles = classVarianceAuthority.cva(`
+    fixed
+    left-[50%]
+    z-50
+    w-full
+    translate-x-[-50%]
+    flex
+    flex-col
+    gap-4
+    p-6
+    shadow-lg
+    duration-200
+    data-[state=open]:animate-in
+    data-[state=closed]:animate-out
+    data-[state=closed]:fade-out-0
+    data-[state=open]:fade-in-0
+    data-[state=closed]:zoom-out-95
+    data-[state=open]:zoom-in-95
+    sm:rounded-lg
+    font-dash-main
+  `, {
+  variants: {
+    theme: {
+      light: 'bg-white border-gray-200',
+      dark: 'bg-gray-950 border-gray-800'
+    },
+    size: {
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    position: {
+      center: `
+          top-[50%]
+          translate-y-[-50%]
+          data-[state=closed]:slide-out-to-left-1/2
+          data-[state=closed]:slide-out-to-top-[48%]
+          data-[state=open]:slide-in-from-left-1/2
+          data-[state=open]:slide-in-from-top-[48%]
+        `,
+      bottom: `
+          data-[state=closed]:slide-out-to-left-1/2
+          data-[state=closed]:slide-out-to-bottom-full
+          data-[state=open]:slide-in-from-left-1/2
+          data-[state=open]:slide-in-from-bottom-full
+        `
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    position: 'center'
+  }
+});
+const headerStyles = classVarianceAuthority.cva(`
+    flex
+    flex-row
+    justify-between
+    items-center
+    gap-1
+    w-full
+  `);
+const titleStyles = classVarianceAuthority.cva(`
+    text-2xl
+    font-medium
+    leading-[1.366]
+    tracking-[-0.03em]
+    flex-1
+    font-dash-main
+  `, {
+  variants: {
+    theme: {
+      light: 'text-[#0C1C33]',
+      dark: 'text-gray-50'
+    }
+  }
+});
+const closeButtonStyles = classVarianceAuthority.cva(`
+    rounded-sm
+    opacity-70
+    transition-opacity
+    hover:opacity-100
+    focus:outline-none
+    disabled:pointer-events-none
+    cursor-pointer
+    flex-shrink-0
+  `, {
+  variants: {
+    theme: {
+      light: 'text-[#0C1C33] hover:text-gray-700',
+      dark: 'text-gray-400 hover:text-gray-200'
+    }
+  }
+});
+const DashDialog = ({
+  open,
+  onOpenChange,
+  title,
+  showCloseButton = true,
+  size = 'md',
+  position = 'center',
+  bottomOffset = 24,
+  maxWidth,
+  horizontalMargin,
+  children,
+  className = '',
+  trigger
+}) => {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  // Calculate position and sizing styles
+  const customStyles = {};
+  if (position === 'bottom') {
+    customStyles.bottom = `${bottomOffset}px`;
+  }
+  if (maxWidth) {
+    // Check if it's a Tailwind size (sm, md, lg, xl, 2xl, etc.) or a CSS value
+    const tailwindSizes = {
+      'xs': '320px',
+      'sm': '384px',
+      'md': '448px',
+      'lg': '512px',
+      'xl': '576px',
+      '2xl': '672px',
+      '3xl': '768px',
+      '4xl': '896px',
+      '5xl': '1024px',
+      '6xl': '1152px',
+      '7xl': '1280px'
+    };
+    customStyles.maxWidth = tailwindSizes[maxWidth] || maxWidth;
+  }
+  if (horizontalMargin !== undefined) {
+    // Set max width to viewport width minus margins on both sides
+    const marginConstraint = `calc(100vw - ${horizontalMargin * 2}px)`;
+    if (customStyles.maxWidth) {
+      // If maxWidth is already set, use the smaller of the two
+      customStyles.maxWidth = `min(${customStyles.maxWidth}, ${marginConstraint})`;
+    } else {
+      customStyles.maxWidth = marginConstraint;
+    }
+    // Keep the dialog centered but constrained by the calculated maxWidth
+    // The existing left-[50%] translate-x-[-50%] will handle centering
+  }
+  const DialogContent = jsxRuntime.jsxs(Dialog__namespace.Portal, {
+    children: [jsxRuntime.jsx(Dialog__namespace.Overlay, {
+      className: overlayStyles({
+        theme
+      })
+    }), jsxRuntime.jsxs(Dialog__namespace.Content, {
+      "aria-describedby": undefined,
+      className: `${contentStyles({
+        theme,
+        size,
+        position
+      })} ${className}`,
+      style: customStyles,
+      children: [title ?
+      // Render visible title in header if provided
+      jsxRuntime.jsxs("div", {
+        className: headerStyles(),
+        children: [jsxRuntime.jsx(Dialog__namespace.Title, {
+          className: titleStyles({
+            theme
+          }),
+          children: title
+        }), showCloseButton && jsxRuntime.jsxs(Dialog__namespace.Close, {
+          className: closeButtonStyles({
+            theme
+          }),
+          children: [jsxRuntime.jsx("div", {
+            className: 'w-8 h-8 flex items-center justify-center',
+            children: jsxRuntime.jsx(index.CrossIcon, {
+              size: 16
+            })
+          }), jsxRuntime.jsx("span", {
+            className: 'sr-only',
+            children: "Close"
+          })]
+        })]
+      }) :
+      // No title provided - render visually hidden title for accessibility
+      jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Dialog__namespace.Title, {
+          children: jsxRuntime.jsx(VisuallyHidden, {
+            children: "Dialog"
+          })
+        }), showCloseButton && jsxRuntime.jsx("div", {
+          className: headerStyles(),
+          children: jsxRuntime.jsxs(Dialog__namespace.Close, {
+            className: closeButtonStyles({
+              theme
+            }),
+            children: [jsxRuntime.jsx("div", {
+              className: 'w-8 h-8 flex items-center justify-center',
+              children: jsxRuntime.jsx(index.CrossIcon, {
+                size: 16
+              })
+            }), jsxRuntime.jsx("span", {
+              className: 'sr-only',
+              children: "Close"
+            })]
+          })
+        })]
+      }), children]
+    })]
+  });
+  if (trigger) {
+    // Uncontrolled mode with trigger
+    return jsxRuntime.jsxs(Dialog__namespace.Root, {
+      onOpenChange: onOpenChange,
+      children: [jsxRuntime.jsx(Dialog__namespace.Trigger, {
+        asChild: true,
+        children: trigger
+      }), DialogContent]
+    });
+  }
+  // Controlled mode
+  return jsxRuntime.jsx(Dialog__namespace.Root, {
+    open: open,
+    onOpenChange: onOpenChange,
+    children: DialogContent
+  });
+};
+
+exports.DashDialog = DashDialog;
+exports.Dialog = DashDialog;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/components/dialog/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/dialog/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as Dialog from '@radix-ui/react-dialog'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\n\n// Visually hidden component for accessibility\nconst VisuallyHidden: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <span\n    style={{\n      position: 'absolute',\n      border: 0,\n      width: 1,\n      height: 1,\n      padding: 0,\n      margin: -1,\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      wordWrap: 'normal'\n    }}\n  >\n    {children}\n  </span>\n)\n\nconst overlayStyles = cva(\n  `\n    fixed\n    inset-0\n    z-50\n    bg-black/80\n    data-[state=open]:animate-in\n    data-[state=closed]:animate-out\n    data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0\n  `,\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      }\n    }\n  }\n)\n\nconst contentStyles = cva(\n  `\n    fixed\n    left-[50%]\n    z-50\n    w-full\n    translate-x-[-50%]\n    flex\n    flex-col\n    gap-4\n    p-6\n    shadow-lg\n    duration-200\n    data-[state=open]:animate-in\n    data-[state=closed]:animate-out\n    data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0\n    data-[state=closed]:zoom-out-95\n    data-[state=open]:zoom-in-95\n    sm:rounded-lg\n    font-dash-main\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border-gray-200',\n        dark: 'bg-gray-950 border-gray-800'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      position: {\n        center: `\n          top-[50%]\n          translate-y-[-50%]\n          data-[state=closed]:slide-out-to-left-1/2\n          data-[state=closed]:slide-out-to-top-[48%]\n          data-[state=open]:slide-in-from-left-1/2\n          data-[state=open]:slide-in-from-top-[48%]\n        `,\n        bottom: `\n          data-[state=closed]:slide-out-to-left-1/2\n          data-[state=closed]:slide-out-to-bottom-full\n          data-[state=open]:slide-in-from-left-1/2\n          data-[state=open]:slide-in-from-bottom-full\n        `\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      position: 'center'\n    }\n  }\n)\n\nconst headerStyles = cva(\n  `\n    flex\n    flex-row\n    justify-between\n    items-center\n    gap-1\n    w-full\n  `\n)\n\nconst titleStyles = cva(\n  `\n    text-2xl\n    font-medium\n    leading-[1.366]\n    tracking-[-0.03em]\n    flex-1\n    font-dash-main\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33]',\n        dark: 'text-gray-50'\n      }\n    }\n  }\n)\n\nconst closeButtonStyles = cva(\n  `\n    rounded-sm\n    opacity-70\n    transition-opacity\n    hover:opacity-100\n    focus:outline-none\n    disabled:pointer-events-none\n    cursor-pointer\n    flex-shrink-0\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] hover:text-gray-700',\n        dark: 'text-gray-400 hover:text-gray-200'\n      }\n    }\n  }\n)\n\nexport interface DialogProps {\n  /** Whether the dialog is open */\n  open?: boolean\n  /** Callback when dialog open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Dialog title */\n  title?: string\n  /** Whether to show the close button */\n  showCloseButton?: boolean\n  /** Dialog size */\n  size?: 'sm' | 'md' | 'xl'\n  /** Vertical position of the dialog */\n  position?: 'center' | 'bottom'\n  /** Offset from bottom when position is 'bottom' (in pixels) */\n  bottomOffset?: number\n  /** Maximum width of the dialog (e.g., '500px', '50%', '2xl'). Use Tailwind classes like 'sm', 'md', 'lg', 'xl', '2xl', etc. or CSS values */\n  maxWidth?: string\n  /** Horizontal margin from screen edges (in pixels) */\n  horizontalMargin?: number\n  /** Dialog content */\n  children: React.ReactNode\n  /** Additional className for the content container */\n  className?: string\n  /** Custom trigger element (if not controlled) */\n  trigger?: React.ReactNode\n}\n\nexport const DashDialog: React.FC<DialogProps> = ({\n  open,\n  onOpenChange,\n  title,\n  showCloseButton = true,\n  size = 'md',\n  position = 'center',\n  bottomOffset = 24,\n  maxWidth,\n  horizontalMargin,\n  children,\n  className = '',\n  trigger\n}) => {\n  const { theme } = useTheme()\n\n  // Calculate position and sizing styles\n  const customStyles: React.CSSProperties = {}\n  \n  if (position === 'bottom') {\n    customStyles.bottom = `${bottomOffset}px`\n  }\n  \n  if (maxWidth) {\n    // Check if it's a Tailwind size (sm, md, lg, xl, 2xl, etc.) or a CSS value\n    const tailwindSizes: Record<string, string> = {\n      'xs': '320px',\n      'sm': '384px',\n      'md': '448px',\n      'lg': '512px',\n      'xl': '576px',\n      '2xl': '672px',\n      '3xl': '768px',\n      '4xl': '896px',\n      '5xl': '1024px',\n      '6xl': '1152px',\n      '7xl': '1280px'\n    }\n    customStyles.maxWidth = tailwindSizes[maxWidth] || maxWidth\n  }\n  \n  if (horizontalMargin !== undefined) {\n    // Set max width to viewport width minus margins on both sides\n    const marginConstraint = `calc(100vw - ${horizontalMargin * 2}px)`\n    \n    if (customStyles.maxWidth) {\n      // If maxWidth is already set, use the smaller of the two\n      customStyles.maxWidth = `min(${customStyles.maxWidth}, ${marginConstraint})`\n    } else {\n      customStyles.maxWidth = marginConstraint\n    }\n    \n    // Keep the dialog centered but constrained by the calculated maxWidth\n    // The existing left-[50%] translate-x-[-50%] will handle centering\n  }\n\n  const DialogContent = (\n    <Dialog.Portal>\n      <Dialog.Overlay className={overlayStyles({ theme })} />\n      <Dialog.Content \n        aria-describedby={undefined} \n        className={`${contentStyles({ theme, size, position })} ${className}`}\n        style={customStyles}\n      >\n        {/* Accessibility: Always provide a title */}\n        {title ? (\n          // Render visible title in header if provided\n          <div className={headerStyles()}>\n            <Dialog.Title className={titleStyles({ theme })}>\n              {title}\n            </Dialog.Title>\n            {showCloseButton && (\n              <Dialog.Close className={closeButtonStyles({ theme })}>\n                <div className='w-8 h-8 flex items-center justify-center'>\n                    <CrossIcon size={16} />\n                </div>\n                <span className='sr-only'>Close</span>\n              </Dialog.Close>\n            )}\n          </div>\n        ) : (\n          // No title provided - render visually hidden title for accessibility\n          <>\n            <Dialog.Title>\n              <VisuallyHidden>Dialog</VisuallyHidden>\n            </Dialog.Title>\n            {showCloseButton && (\n              <div className={headerStyles()}>\n                <Dialog.Close className={closeButtonStyles({ theme })}>\n                  <div className='w-8 h-8 flex items-center justify-center'>\n                      <CrossIcon size={16} />\n                  </div>\n                  <span className='sr-only'>Close</span>\n                </Dialog.Close>\n              </div>\n            )}\n          </>\n        )}\n        {children}\n      </Dialog.Content>\n    </Dialog.Portal>\n  )\n\n  if (trigger) {\n    // Uncontrolled mode with trigger\n    return (\n      <Dialog.Root onOpenChange={onOpenChange}>\n        <Dialog.Trigger asChild>\n          {trigger}\n        </Dialog.Trigger>\n        {DialogContent}\n      </Dialog.Root>\n    )\n  }\n\n  // Controlled mode\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      {DialogContent}\n    </Dialog.Root>\n  )\n}\n\nexport { DashDialog as Dialog }\n"],"names":["VisuallyHidden","children","_jsx","style","position","border","width","height","padding","margin","overflow","clip","whiteSpace","wordWrap","overlayStyles","cva","variants","theme","light","dark","contentStyles","size","sm","md","xl","center","bottom","defaultVariants","headerStyles","titleStyles","closeButtonStyles","DashDialog","open","onOpenChange","title","showCloseButton","bottomOffset","maxWidth","horizontalMargin","className","trigger","useTheme","customStyles","tailwindSizes","undefined","marginConstraint","DialogContent","_jsxs","Dialog","Portal","Overlay","Content","Title","Close","CrossIcon","_Fragment","Root","Trigger","asChild"],"mappings":"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"}

package/dist/react/components/dialog/index.esm.js

@@ -0,0 +1,270 @@
+"use client";
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as Dialog from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { CrossIcon } from '../icons/index.esm.js';
+
+// Visually hidden component for accessibility
+const VisuallyHidden = ({
+  children
+}) => jsx("span", {
+  style: {
+    position: 'absolute',
+    border: 0,
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal'
+  },
+  children: children
+});
+const overlayStyles = cva(`
+    fixed
+    inset-0
+    z-50
+    bg-black/80
+    data-[state=open]:animate-in
+    data-[state=closed]:animate-out
+    data-[state=closed]:fade-out-0
+    data-[state=open]:fade-in-0
+  `, {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    }
+  }
+});
+const contentStyles = cva(`
+    fixed
+    left-[50%]
+    z-50
+    w-full
+    translate-x-[-50%]
+    flex
+    flex-col
+    gap-4
+    p-6
+    shadow-lg
+    duration-200
+    data-[state=open]:animate-in
+    data-[state=closed]:animate-out
+    data-[state=closed]:fade-out-0
+    data-[state=open]:fade-in-0
+    data-[state=closed]:zoom-out-95
+    data-[state=open]:zoom-in-95
+    sm:rounded-lg
+    font-dash-main
+  `, {
+  variants: {
+    theme: {
+      light: 'bg-white border-gray-200',
+      dark: 'bg-gray-950 border-gray-800'
+    },
+    size: {
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    position: {
+      center: `
+          top-[50%]
+          translate-y-[-50%]
+          data-[state=closed]:slide-out-to-left-1/2
+          data-[state=closed]:slide-out-to-top-[48%]
+          data-[state=open]:slide-in-from-left-1/2
+          data-[state=open]:slide-in-from-top-[48%]
+        `,
+      bottom: `
+          data-[state=closed]:slide-out-to-left-1/2
+          data-[state=closed]:slide-out-to-bottom-full
+          data-[state=open]:slide-in-from-left-1/2
+          data-[state=open]:slide-in-from-bottom-full
+        `
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    position: 'center'
+  }
+});
+const headerStyles = cva(`
+    flex
+    flex-row
+    justify-between
+    items-center
+    gap-1
+    w-full
+  `);
+const titleStyles = cva(`
+    text-2xl
+    font-medium
+    leading-[1.366]
+    tracking-[-0.03em]
+    flex-1
+    font-dash-main
+  `, {
+  variants: {
+    theme: {
+      light: 'text-[#0C1C33]',
+      dark: 'text-gray-50'
+    }
+  }
+});
+const closeButtonStyles = cva(`
+    rounded-sm
+    opacity-70
+    transition-opacity
+    hover:opacity-100
+    focus:outline-none
+    disabled:pointer-events-none
+    cursor-pointer
+    flex-shrink-0
+  `, {
+  variants: {
+    theme: {
+      light: 'text-[#0C1C33] hover:text-gray-700',
+      dark: 'text-gray-400 hover:text-gray-200'
+    }
+  }
+});
+const DashDialog = ({
+  open,
+  onOpenChange,
+  title,
+  showCloseButton = true,
+  size = 'md',
+  position = 'center',
+  bottomOffset = 24,
+  maxWidth,
+  horizontalMargin,
+  children,
+  className = '',
+  trigger
+}) => {
+  const {
+    theme
+  } = useTheme();
+  // Calculate position and sizing styles
+  const customStyles = {};
+  if (position === 'bottom') {
+    customStyles.bottom = `${bottomOffset}px`;
+  }
+  if (maxWidth) {
+    // Check if it's a Tailwind size (sm, md, lg, xl, 2xl, etc.) or a CSS value
+    const tailwindSizes = {
+      'xs': '320px',
+      'sm': '384px',
+      'md': '448px',
+      'lg': '512px',
+      'xl': '576px',
+      '2xl': '672px',
+      '3xl': '768px',
+      '4xl': '896px',
+      '5xl': '1024px',
+      '6xl': '1152px',
+      '7xl': '1280px'
+    };
+    customStyles.maxWidth = tailwindSizes[maxWidth] || maxWidth;
+  }
+  if (horizontalMargin !== undefined) {
+    // Set max width to viewport width minus margins on both sides
+    const marginConstraint = `calc(100vw - ${horizontalMargin * 2}px)`;
+    if (customStyles.maxWidth) {
+      // If maxWidth is already set, use the smaller of the two
+      customStyles.maxWidth = `min(${customStyles.maxWidth}, ${marginConstraint})`;
+    } else {
+      customStyles.maxWidth = marginConstraint;
+    }
+    // Keep the dialog centered but constrained by the calculated maxWidth
+    // The existing left-[50%] translate-x-[-50%] will handle centering
+  }
+  const DialogContent = jsxs(Dialog.Portal, {
+    children: [jsx(Dialog.Overlay, {
+      className: overlayStyles({
+        theme
+      })
+    }), jsxs(Dialog.Content, {
+      "aria-describedby": undefined,
+      className: `${contentStyles({
+        theme,
+        size,
+        position
+      })} ${className}`,
+      style: customStyles,
+      children: [title ?
+      // Render visible title in header if provided
+      jsxs("div", {
+        className: headerStyles(),
+        children: [jsx(Dialog.Title, {
+          className: titleStyles({
+            theme
+          }),
+          children: title
+        }), showCloseButton && jsxs(Dialog.Close, {
+          className: closeButtonStyles({
+            theme
+          }),
+          children: [jsx("div", {
+            className: 'w-8 h-8 flex items-center justify-center',
+            children: jsx(CrossIcon, {
+              size: 16
+            })
+          }), jsx("span", {
+            className: 'sr-only',
+            children: "Close"
+          })]
+        })]
+      }) :
+      // No title provided - render visually hidden title for accessibility
+      jsxs(Fragment, {
+        children: [jsx(Dialog.Title, {
+          children: jsx(VisuallyHidden, {
+            children: "Dialog"
+          })
+        }), showCloseButton && jsx("div", {
+          className: headerStyles(),
+          children: jsxs(Dialog.Close, {
+            className: closeButtonStyles({
+              theme
+            }),
+            children: [jsx("div", {
+              className: 'w-8 h-8 flex items-center justify-center',
+              children: jsx(CrossIcon, {
+                size: 16
+              })
+            }), jsx("span", {
+              className: 'sr-only',
+              children: "Close"
+            })]
+          })
+        })]
+      }), children]
+    })]
+  });
+  if (trigger) {
+    // Uncontrolled mode with trigger
+    return jsxs(Dialog.Root, {
+      onOpenChange: onOpenChange,
+      children: [jsx(Dialog.Trigger, {
+        asChild: true,
+        children: trigger
+      }), DialogContent]
+    });
+  }
+  // Controlled mode
+  return jsx(Dialog.Root, {
+    open: open,
+    onOpenChange: onOpenChange,
+    children: DialogContent
+  });
+};
+
+export { DashDialog, DashDialog as Dialog };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/dialog/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/dialog/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as Dialog from '@radix-ui/react-dialog'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\n\n// Visually hidden component for accessibility\nconst VisuallyHidden: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <span\n    style={{\n      position: 'absolute',\n      border: 0,\n      width: 1,\n      height: 1,\n      padding: 0,\n      margin: -1,\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      wordWrap: 'normal'\n    }}\n  >\n    {children}\n  </span>\n)\n\nconst overlayStyles = cva(\n  `\n    fixed\n    inset-0\n    z-50\n    bg-black/80\n    data-[state=open]:animate-in\n    data-[state=closed]:animate-out\n    data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0\n  `,\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      }\n    }\n  }\n)\n\nconst contentStyles = cva(\n  `\n    fixed\n    left-[50%]\n    z-50\n    w-full\n    translate-x-[-50%]\n    flex\n    flex-col\n    gap-4\n    p-6\n    shadow-lg\n    duration-200\n    data-[state=open]:animate-in\n    data-[state=closed]:animate-out\n    data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0\n    data-[state=closed]:zoom-out-95\n    data-[state=open]:zoom-in-95\n    sm:rounded-lg\n    font-dash-main\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border-gray-200',\n        dark: 'bg-gray-950 border-gray-800'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      position: {\n        center: `\n          top-[50%]\n          translate-y-[-50%]\n          data-[state=closed]:slide-out-to-left-1/2\n          data-[state=closed]:slide-out-to-top-[48%]\n          data-[state=open]:slide-in-from-left-1/2\n          data-[state=open]:slide-in-from-top-[48%]\n        `,\n        bottom: `\n          data-[state=closed]:slide-out-to-left-1/2\n          data-[state=closed]:slide-out-to-bottom-full\n          data-[state=open]:slide-in-from-left-1/2\n          data-[state=open]:slide-in-from-bottom-full\n        `\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      position: 'center'\n    }\n  }\n)\n\nconst headerStyles = cva(\n  `\n    flex\n    flex-row\n    justify-between\n    items-center\n    gap-1\n    w-full\n  `\n)\n\nconst titleStyles = cva(\n  `\n    text-2xl\n    font-medium\n    leading-[1.366]\n    tracking-[-0.03em]\n    flex-1\n    font-dash-main\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33]',\n        dark: 'text-gray-50'\n      }\n    }\n  }\n)\n\nconst closeButtonStyles = cva(\n  `\n    rounded-sm\n    opacity-70\n    transition-opacity\n    hover:opacity-100\n    focus:outline-none\n    disabled:pointer-events-none\n    cursor-pointer\n    flex-shrink-0\n  `,\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] hover:text-gray-700',\n        dark: 'text-gray-400 hover:text-gray-200'\n      }\n    }\n  }\n)\n\nexport interface DialogProps {\n  /** Whether the dialog is open */\n  open?: boolean\n  /** Callback when dialog open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Dialog title */\n  title?: string\n  /** Whether to show the close button */\n  showCloseButton?: boolean\n  /** Dialog size */\n  size?: 'sm' | 'md' | 'xl'\n  /** Vertical position of the dialog */\n  position?: 'center' | 'bottom'\n  /** Offset from bottom when position is 'bottom' (in pixels) */\n  bottomOffset?: number\n  /** Maximum width of the dialog (e.g., '500px', '50%', '2xl'). Use Tailwind classes like 'sm', 'md', 'lg', 'xl', '2xl', etc. or CSS values */\n  maxWidth?: string\n  /** Horizontal margin from screen edges (in pixels) */\n  horizontalMargin?: number\n  /** Dialog content */\n  children: React.ReactNode\n  /** Additional className for the content container */\n  className?: string\n  /** Custom trigger element (if not controlled) */\n  trigger?: React.ReactNode\n}\n\nexport const DashDialog: React.FC<DialogProps> = ({\n  open,\n  onOpenChange,\n  title,\n  showCloseButton = true,\n  size = 'md',\n  position = 'center',\n  bottomOffset = 24,\n  maxWidth,\n  horizontalMargin,\n  children,\n  className = '',\n  trigger\n}) => {\n  const { theme } = useTheme()\n\n  // Calculate position and sizing styles\n  const customStyles: React.CSSProperties = {}\n  \n  if (position === 'bottom') {\n    customStyles.bottom = `${bottomOffset}px`\n  }\n  \n  if (maxWidth) {\n    // Check if it's a Tailwind size (sm, md, lg, xl, 2xl, etc.) or a CSS value\n    const tailwindSizes: Record<string, string> = {\n      'xs': '320px',\n      'sm': '384px',\n      'md': '448px',\n      'lg': '512px',\n      'xl': '576px',\n      '2xl': '672px',\n      '3xl': '768px',\n      '4xl': '896px',\n      '5xl': '1024px',\n      '6xl': '1152px',\n      '7xl': '1280px'\n    }\n    customStyles.maxWidth = tailwindSizes[maxWidth] || maxWidth\n  }\n  \n  if (horizontalMargin !== undefined) {\n    // Set max width to viewport width minus margins on both sides\n    const marginConstraint = `calc(100vw - ${horizontalMargin * 2}px)`\n    \n    if (customStyles.maxWidth) {\n      // If maxWidth is already set, use the smaller of the two\n      customStyles.maxWidth = `min(${customStyles.maxWidth}, ${marginConstraint})`\n    } else {\n      customStyles.maxWidth = marginConstraint\n    }\n    \n    // Keep the dialog centered but constrained by the calculated maxWidth\n    // The existing left-[50%] translate-x-[-50%] will handle centering\n  }\n\n  const DialogContent = (\n    <Dialog.Portal>\n      <Dialog.Overlay className={overlayStyles({ theme })} />\n      <Dialog.Content \n        aria-describedby={undefined} \n        className={`${contentStyles({ theme, size, position })} ${className}`}\n        style={customStyles}\n      >\n        {/* Accessibility: Always provide a title */}\n        {title ? (\n          // Render visible title in header if provided\n          <div className={headerStyles()}>\n            <Dialog.Title className={titleStyles({ theme })}>\n              {title}\n            </Dialog.Title>\n            {showCloseButton && (\n              <Dialog.Close className={closeButtonStyles({ theme })}>\n                <div className='w-8 h-8 flex items-center justify-center'>\n                    <CrossIcon size={16} />\n                </div>\n                <span className='sr-only'>Close</span>\n              </Dialog.Close>\n            )}\n          </div>\n        ) : (\n          // No title provided - render visually hidden title for accessibility\n          <>\n            <Dialog.Title>\n              <VisuallyHidden>Dialog</VisuallyHidden>\n            </Dialog.Title>\n            {showCloseButton && (\n              <div className={headerStyles()}>\n                <Dialog.Close className={closeButtonStyles({ theme })}>\n                  <div className='w-8 h-8 flex items-center justify-center'>\n                      <CrossIcon size={16} />\n                  </div>\n                  <span className='sr-only'>Close</span>\n                </Dialog.Close>\n              </div>\n            )}\n          </>\n        )}\n        {children}\n      </Dialog.Content>\n    </Dialog.Portal>\n  )\n\n  if (trigger) {\n    // Uncontrolled mode with trigger\n    return (\n      <Dialog.Root onOpenChange={onOpenChange}>\n        <Dialog.Trigger asChild>\n          {trigger}\n        </Dialog.Trigger>\n        {DialogContent}\n      </Dialog.Root>\n    )\n  }\n\n  // Controlled mode\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      {DialogContent}\n    </Dialog.Root>\n  )\n}\n\nexport { DashDialog as Dialog }\n"],"names":["VisuallyHidden","children","_jsx","style","position","border","width","height","padding","margin","overflow","clip","whiteSpace","wordWrap","overlayStyles","cva","variants","theme","light","dark","contentStyles","size","sm","md","xl","center","bottom","defaultVariants","headerStyles","titleStyles","closeButtonStyles","DashDialog","open","onOpenChange","title","showCloseButton","bottomOffset","maxWidth","horizontalMargin","className","trigger","useTheme","customStyles","tailwindSizes","undefined","marginConstraint","DialogContent","_jsxs","Dialog","Portal","Overlay","Content","Title","Close","CrossIcon","_Fragment","Root","Trigger","asChild"],"mappings":"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"}

package/dist/react/components/heading/index.cjs.js

@@ -0,0 +1,60 @@
+"use client";
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const sizeClasses = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+  '2xl': 'text-[2.375rem] leading-[1.3]',
+  '3xl': 'text-[3rem] leading-[1.2]'
+};
+const weightClasses = {
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+  extrabold: 'font-extrabold'
+};
+const colorClasses = {
+  light: {
+    black: 'text-black',
+    gray: 'text-gray-600',
+    blue: 'text-blue-600',
+    red: 'text-red-600',
+    green: 'text-green-600'
+  },
+  dark: {
+    black: 'text-white',
+    gray: 'text-gray-300',
+    blue: 'text-blue-400',
+    red: 'text-red-400',
+    green: 'text-green-400'
+  }
+};
+const Heading = ({
+  as = 'h1',
+  size = '2xl',
+  weight = 'extrabold',
+  color = 'black',
+  className = '',
+  children
+}) => {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const Component = as;
+  const classes = [sizeClasses[size], weightClasses[weight], colorClasses[theme][color], 'tracking-[-0.4px]', className].filter(Boolean).join(' ');
+  return jsxRuntime.jsx(Component, {
+    className: classes,
+    children: children
+  });
+};
+
+exports.Heading = Heading;
+//# sourceMappingURL=index.cjs.js.map