@scaleflex/ui-tw 0.0.127 → 0.0.128

package/breadcrumb/breadcrumb.component.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbListProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps } from './breadcrumb.types';
 declare function Breadcrumb({ className, ...props }: BreadcrumbProps): React.JSX.Element;
-declare function BreadcrumbList({ className, ...props }: BreadcrumbListProps): React.JSX.Element;
+declare function BreadcrumbList({ className, size, ...props }: BreadcrumbListProps): React.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): React.JSX.Element;
 declare function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps): React.JSX.Element;
 declare function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): React.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, size, ...props }: BreadcrumbSeparatorProps): React.JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/breadcrumb/breadcrumb.component.js

@@ -1,16 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"],
-  _excluded2 = ["className"],
+  _excluded2 = ["className", "size"],
   _excluded3 = ["className"],
   _excluded4 = ["asChild", "className"],
   _excluded5 = ["className"],
-  _excluded6 = ["children", "className"],
+  _excluded6 = ["children", "className", "size"],
   _excluded7 = ["className"];
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
 import React from 'react';
+import { breadcrumbListVariants, breadcrumbSeparatorVariants } from './breadcrumb.constants';
 function Breadcrumb(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -22,10 +23,14 @@ function Breadcrumb(_ref) {
 }
 function BreadcrumbList(_ref2) {
   var className = _ref2.className,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
     props = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement("ol", _extends({
     "data-slot": "breadcrumb-list",
-    className: cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)
+    className: cn(breadcrumbListVariants({
+      size: size
+    }), className)
   }, props));
 }
 function BreadcrumbItem(_ref3) {
@@ -60,12 +65,16 @@ function BreadcrumbPage(_ref5) {
 function BreadcrumbSeparator(_ref6) {
   var children = _ref6.children,
     className = _ref6.className,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'md' : _ref6$size,
     props = _objectWithoutProperties(_ref6, _excluded6);
   return /*#__PURE__*/React.createElement("li", _extends({
     "data-slot": "breadcrumb-separator",
     role: "presentation",
     "aria-hidden": "true",
-    className: cn('[&>svg]:size-3.5', className)
+    className: cn(breadcrumbSeparatorVariants({
+      size: size
+    }), className)
   }, props), children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(ChevronRightIcon, null));
 }
 function BreadcrumbEllipsis(_ref7) {

package/breadcrumb/breadcrumb.constants.d.ts

@@ -0,0 +1,11 @@
+export declare const BreadcrumbSize: {
+    readonly Md: "md";
+    readonly Lg: "lg";
+};
+export type BreadcrumbSizeType = (typeof BreadcrumbSize)[keyof typeof BreadcrumbSize];
+export declare const breadcrumbListVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const breadcrumbSeparatorVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/breadcrumb/breadcrumb.constants.js

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+export var BreadcrumbSize = {
+  Md: 'md',
+  Lg: 'lg'
+};
+export var breadcrumbListVariants = cva('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5', {
+  variants: {
+    size: {
+      md: 'text-sm',
+      lg: 'text-base'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+export var breadcrumbSeparatorVariants = cva('', {
+  variants: {
+    size: {
+      md: '[&>svg]:size-3.5',
+      lg: '[&>svg]:size-4'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});

package/breadcrumb/breadcrumb.types.d.ts

@@ -1,8 +1,10 @@
 import type { ComponentProps } from 'react';
+import type { BreadcrumbSizeType } from './breadcrumb.constants';
 export interface BreadcrumbProps extends ComponentProps<'nav'> {
     separator?: React.ReactNode;
 }
 export interface BreadcrumbListProps extends ComponentProps<'ol'> {
+    size?: BreadcrumbSizeType;
 }
 export interface BreadcrumbItemProps extends ComponentProps<'li'> {
 }
@@ -12,6 +14,7 @@ export interface BreadcrumbLinkProps extends ComponentProps<'a'> {
 export interface BreadcrumbPageProps extends ComponentProps<'span'> {
 }
 export interface BreadcrumbSeparatorProps extends ComponentProps<'li'> {
+    size?: BreadcrumbSizeType;
 }
 export interface BreadcrumbEllipsisProps extends ComponentProps<'span'> {
 }

package/breadcrumb/index.d.ts

@@ -1,2 +1,4 @@
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from './breadcrumb.component';
+export { BreadcrumbSize, breadcrumbListVariants, breadcrumbSeparatorVariants } from './breadcrumb.constants';
+export type { BreadcrumbSizeType } from './breadcrumb.constants';
 export type { BreadcrumbProps, BreadcrumbListProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbSeparatorProps, BreadcrumbEllipsisProps, } from './breadcrumb.types';

package/breadcrumb/index.js

@@ -1 +1,2 @@
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb.component';
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb.component';
+export { BreadcrumbSize, breadcrumbListVariants, breadcrumbSeparatorVariants } from './breadcrumb.constants';

package/button/components/copy-button.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '@scaleflex/ui-tw/button/button.types';
+import React from 'react';
+export interface CopyButtonProps extends Omit<ButtonProps, 'onClick'> {
+    /** Text to copy to clipboard */
+    textToCopy: string;
+    /** Tooltip message shown after copying (default: "Copied!") */
+    copiedMessage?: string;
+    /** How long to show the tooltip in ms (default: 2000) */
+    tooltipDuration?: number;
+    /** Callback after successful copy */
+    onCopy?: () => void;
+}
+export declare function CopyButton({ textToCopy, copiedMessage, tooltipDuration, onCopy, children, disabled, ...buttonProps }: CopyButtonProps): React.JSX.Element;

package/button/components/copy-button.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "children", "disabled"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { Button } from '@scaleflex/ui-tw/button';
+import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import React, { useState } from 'react';
+export function CopyButton(_ref) {
+  var textToCopy = _ref.textToCopy,
+    _ref$copiedMessage = _ref.copiedMessage,
+    copiedMessage = _ref$copiedMessage === void 0 ? 'Copied!' : _ref$copiedMessage,
+    _ref$tooltipDuration = _ref.tooltipDuration,
+    tooltipDuration = _ref$tooltipDuration === void 0 ? 2000 : _ref$tooltipDuration,
+    onCopy = _ref.onCopy,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipText = _useState2[0],
+    setTooltipText = _useState2[1];
+  var _useState3 = useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVariant = _useState4[0],
+    setTooltipVariant = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return navigator.clipboard.writeText(textToCopy);
+          case 3:
+            setTooltipText(copiedMessage);
+            setTooltipVariant('success');
+            setOpen(true);
+            onCopy === null || onCopy === void 0 || onCopy();
+            setTimeout(function () {
+              setOpen(false);
+            }, tooltipDuration - 500);
+            setTimeout(function () {
+              setTooltipText('');
+              setTooltipVariant('default');
+            }, tooltipDuration);
+            _context.next = 14;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](0);
+            console.error('Failed to copy', _context.t0);
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 11]]);
+    }));
+    return function handleCopy() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement(WithTooltip, {
+    content: tooltipText,
+    variant: tooltipVariant,
+    open: open ? true : undefined
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    "data-slot": "copy-button",
+    type: "button",
+    onClick: handleCopy,
+    disabled: disabled || !textToCopy
+  }, buttonProps), children));
+}

package/button/components/copy-to-clipboard-button.d.ts

@@ -1,10 +1,17 @@
 import type { ButtonSizeType } from '@scaleflex/ui-tw/button/button.types';
 import React from 'react';
-export interface CopyToClipboardButtonProps {
+export interface CopyIconProps {
     text: string;
     disabled?: boolean;
     size?: ButtonSizeType;
     initialTooltip?: string;
     copiedTooltip?: string;
 }
-export declare const CopyToClipboardButton: (props: CopyToClipboardButtonProps) => React.JSX.Element;
+/** @deprecated Use CopyIcon instead */
+export type CopyToClipboardButtonProps = CopyIconProps;
+export declare function CopyIcon(props: CopyIconProps): React.JSX.Element;
+/**
+ * @deprecated Use `CopyIcon` for icon-only copy button, or `CopyButton` for custom content.
+ * Import from '@scaleflex/ui-tw/button'
+ */
+export declare function CopyToClipboardButton(props: CopyIconProps): React.JSX.Element;

package/button/components/copy-to-clipboard-button.js

@@ -4,9 +4,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Button, ButtonSize } from '@scaleflex/ui-tw/button';
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
 import { Copy } from 'lucide-react';
-import { useState } from 'react';
-import React from 'react';
-export var CopyToClipboardButton = function CopyToClipboardButton(props) {
+import React, { useState } from 'react';
+
+/** @deprecated Use CopyIcon instead */
+
+export function CopyIcon(props) {
   var text = props.text,
     _props$size = props.size,
     size = _props$size === void 0 ? ButtonSize.IconMd : _props$size,
@@ -74,4 +76,15 @@ export var CopyToClipboardButton = function CopyToClipboardButton(props) {
     onClick: handleCopy,
     disabled: disabled || !text
   }, /*#__PURE__*/React.createElement(Copy, null)));
-};
+}
+
+/**
+ * @deprecated Use `CopyIcon` for icon-only copy button, or `CopyButton` for custom content.
+ * Import from '@scaleflex/ui-tw/button'
+ */
+export function CopyToClipboardButton(props) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn('[Deprecation Warning] CopyToClipboardButton is deprecated. ' + 'Use CopyIcon for icon-only copy button, or CopyButton for custom content. ' + "Import from '@scaleflex/ui-tw/button'.");
+  }
+  return /*#__PURE__*/React.createElement(CopyIcon, props);
+}

package/button/index.d.ts

@@ -1,4 +1,7 @@
 export { Button, buttonVariants } from './button.component';
 export type { ButtonProps } from './button.types';
 export { ButtonVariant, ButtonSize } from './button.constants';
-export { CopyToClipboardButton } from './components/copy-to-clipboard-button';
+export { CopyIcon, CopyToClipboardButton } from './components/copy-to-clipboard-button';
+export type { CopyIconProps, CopyToClipboardButtonProps } from './components/copy-to-clipboard-button';
+export { CopyButton } from './components/copy-button';
+export type { CopyButtonProps } from './components/copy-button';

package/button/index.js

@@ -1,3 +1,4 @@
 export { Button, buttonVariants } from './button.component';
 export { ButtonVariant, ButtonSize } from './button.constants';
-export { CopyToClipboardButton } from './components/copy-to-clipboard-button';
+export { CopyIcon, CopyToClipboardButton } from './components/copy-to-clipboard-button';
+export { CopyButton } from './components/copy-button';

package/copyable-text/copyable-text.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CopyableTextProps } from './copyable-text.types';
+declare function CopyableText({ value, textToCopy, copiedMessage, tooltipDuration, onCopy, className, ...props }: CopyableTextProps): React.JSX.Element;
+export { CopyableText };

package/copyable-text/copyable-text.component.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "className"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { Copy } from 'lucide-react';
+import React, { useState } from 'react';
+function CopyableText(_ref) {
+  var value = _ref.value,
+    textToCopy = _ref.textToCopy,
+    _ref$copiedMessage = _ref.copiedMessage,
+    copiedMessage = _ref$copiedMessage === void 0 ? 'Copied!' : _ref$copiedMessage,
+    _ref$tooltipDuration = _ref.tooltipDuration,
+    tooltipDuration = _ref$tooltipDuration === void 0 ? 2000 : _ref$tooltipDuration,
+    onCopy = _ref.onCopy,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipText = _useState2[0],
+    setTooltipText = _useState2[1];
+  var _useState3 = useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVariant = _useState4[0],
+    setTooltipVariant = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var text;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            text = textToCopy !== null && textToCopy !== void 0 ? textToCopy : typeof value === 'string' ? value : '';
+            _context.next = 4;
+            return navigator.clipboard.writeText(text);
+          case 4:
+            setTooltipText(copiedMessage);
+            setTooltipVariant('success');
+            setOpen(true);
+            onCopy === null || onCopy === void 0 || onCopy();
+            setTimeout(function () {
+              setOpen(false);
+            }, tooltipDuration - 500);
+            setTimeout(function () {
+              setTooltipText('');
+              setTooltipVariant('default');
+            }, tooltipDuration);
+            _context.next = 15;
+            break;
+          case 12:
+            _context.prev = 12;
+            _context.t0 = _context["catch"](0);
+            console.error('Failed to copy', _context.t0);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 12]]);
+    }));
+    return function handleCopy() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "copyable-text",
+    className: cn('group inline-flex items-center gap-1', className)
+  }, props), /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement(WithTooltip, {
+    content: tooltipText,
+    variant: tooltipVariant,
+    open: open ? true : undefined
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: handleCopy,
+    className: "text-muted-foreground hover:text-foreground cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
+  }, /*#__PURE__*/React.createElement(Copy, {
+    className: "size-3.5"
+  }))));
+}
+export { CopyableText };

package/copyable-text/copyable-text.types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from 'react';
+export interface CopyableTextProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** Text to display and copy */
+    value: string | ReactNode;
+    /** Text to copy (if different from displayed value) */
+    textToCopy?: string;
+    /** Copied tooltip message */
+    copiedMessage?: string;
+    /** Tooltip duration in ms */
+    tooltipDuration?: number;
+    /** Callback after successful copy */
+    onCopy?: () => void;
+}

package/copyable-text/copyable-text.types.js

@@ -0,0 +1 @@
+export {};

package/copyable-text/index.d.ts

@@ -0,0 +1,2 @@
+export { CopyableText } from './copyable-text.component';
+export type { CopyableTextProps } from './copyable-text.types';

package/copyable-text/index.js

@@ -0,0 +1 @@
+export { CopyableText } from './copyable-text.component';

package/dialog/dialog.component.d.ts

@@ -1,14 +1,12 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogWideHeaderProps, DialogWideTitleProps } from './dialog.types';
+import type { DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps } from './dialog.types';
 declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogWideContent({ className, children, overlayClassName, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
-    overlayClassName?: string;
-}): React.JSX.Element;
+declare function DialogWideContent({ className, children, overlayClassName, headerSize, ...props }: DialogWideContentProps): React.JSX.Element;
 declare function DialogFormContent({ className, children, overlayClassName, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
     overlayClassName?: string;
 }): React.JSX.Element;

package/dialog/dialog.component.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className"],
-  _excluded2 = ["className", "children", "overlayClassName"],
+  _excluded2 = ["className", "children", "overlayClassName", "headerSize"],
   _excluded3 = ["className", "children", "overlayClassName"],
   _excluded4 = ["className", "size"],
   _excluded5 = ["className"],
@@ -22,7 +22,7 @@ import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { CircleAlertIcon, XIcon } from 'lucide-react';
 import React from 'react';
-import { dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+import { dialogCloseButtonPositionVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
 function Dialog(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(DialogPrimitive.Root, _extends({
@@ -59,6 +59,8 @@ function DialogWideContent(_ref6) {
   var className = _ref6.className,
     children = _ref6.children,
     overlayClassName = _ref6.overlayClassName,
+    _ref6$headerSize = _ref6.headerSize,
+    headerSize = _ref6$headerSize === void 0 ? 'md' : _ref6$headerSize,
     props = _objectWithoutProperties(_ref6, _excluded2);
   return /*#__PURE__*/React.createElement(DialogPortal, {
     "data-slot": "dialog-portal"
@@ -70,7 +72,9 @@ function DialogWideContent(_ref6) {
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
-    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", focusRingClassNames)
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground absolute right-3 cursor-pointer rounded-xs transition-opacity disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", dialogCloseButtonPositionVariants({
+      headerSize: headerSize
+    }), focusRingClassNames)
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
     size: "icon-sm"

package/dialog/dialog.constants.d.ts

@@ -1,6 +1,9 @@
 export declare const dialogWideHeaderVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const dialogCloseButtonPositionVariants: (props?: ({
+    headerSize?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dialogWideTitleVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
     align?: "center" | "left" | null | undefined;

package/dialog/dialog.constants.js

@@ -10,6 +10,17 @@ export var dialogWideHeaderVariants = cva('border-border text-foreground relativ
     size: 'md'
   }
 });
+export var dialogCloseButtonPositionVariants = cva('', {
+  variants: {
+    headerSize: {
+      sm: 'top-3',
+      md: 'top-4'
+    }
+  },
+  defaultVariants: {
+    headerSize: 'md'
+  }
+});
 export var dialogWideTitleVariants = cva('', {
   variants: {
     size: {

package/dialog/dialog.types.d.ts

@@ -2,6 +2,10 @@ import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { ComponentProps } from 'react';
 export type DialogSize = 'sm' | 'md';
 export type DialogAlign = 'center' | 'left';
+export interface DialogWideContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+    overlayClassName?: string;
+    headerSize?: DialogSize;
+}
 export interface DialogWideHeaderProps extends ComponentProps<'div'> {
     size?: DialogSize;
 }

package/dialog/index.d.ts

@@ -1,3 +1,3 @@
 export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter, } from './dialog.component';
-export { dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
-export type { DialogWideHeaderProps, DialogWideTitleProps, DialogSize, DialogAlign } from './dialog.types';
+export { dialogCloseButtonPositionVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
+export type { DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, DialogSize, DialogAlign, } from './dialog.types';

package/dialog/index.js

@@ -1,2 +1,2 @@
 export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter } from './dialog.component';
-export { dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+export { dialogCloseButtonPositionVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.127",
+  "version": "0.0.128",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -28,7 +28,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.127",
+    "@scaleflex/icons-tw": "^0.0.128",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",