@scaleflex/ui-tw 0.0.122 → 0.0.124

package/dialog/dialog.component.d.ts

@@ -1,5 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
+import type { 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;
@@ -11,11 +12,11 @@ declare function DialogWideContent({ className, children, overlayClassName, ...p
 declare function DialogFormContent({ className, children, overlayClassName, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
     overlayClassName?: string;
 }): React.JSX.Element;
-declare function DialogWideHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogWideHeader({ className, size, ...props }: DialogWideHeaderProps): React.JSX.Element;
 declare function DialogFormHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogWideBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogFormBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
-declare function DialogWideTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogWideTitle({ className, size, align, ...props }: DialogWideTitleProps): React.JSX.Element;
 declare function DialogFormTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
 declare function DialogFormDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
 declare function DialogFormIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;

package/dialog/dialog.component.js

@@ -4,11 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["className"],
   _excluded2 = ["className", "children", "overlayClassName"],
   _excluded3 = ["className", "children", "overlayClassName"],
-  _excluded4 = ["className"],
+  _excluded4 = ["className", "size"],
   _excluded5 = ["className"],
   _excluded6 = ["className"],
   _excluded7 = ["className"],
-  _excluded8 = ["className"],
+  _excluded8 = ["className", "size", "align"],
   _excluded9 = ["className"],
   _excluded10 = ["className"],
   _excluded11 = ["className"],
@@ -22,6 +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';
 function Dialog(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(DialogPrimitive.Root, _extends({
@@ -69,10 +70,10 @@ 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-6", focusRingClassNames)
+    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)
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
-    size: "icon-md"
+    size: "icon-sm"
   }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
   }, "Close")))));
@@ -92,20 +93,24 @@ function DialogFormContent(_ref7) {
   }, 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-6", focusRingClassNames)
+    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)
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "ghost-secondary",
-    size: "icon-md"
+    size: "icon-sm"
   }, /*#__PURE__*/React.createElement(XIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
   }, "Close")))));
 }
 function DialogWideHeader(_ref8) {
   var className = _ref8.className,
+    _ref8$size = _ref8.size,
+    size = _ref8$size === void 0 ? 'md' : _ref8$size,
     props = _objectWithoutProperties(_ref8, _excluded4);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-header",
-    className: cn('border-border text-foreground flex h-16 items-center justify-center border-b', className)
+    className: cn(dialogWideHeaderVariants({
+      size: size
+    }), className)
   }, props));
 }
 function DialogFormHeader(_ref9) {
@@ -134,10 +139,17 @@ function DialogFormBody(_ref11) {
 }
 function DialogWideTitle(_ref12) {
   var className = _ref12.className,
+    _ref12$size = _ref12.size,
+    size = _ref12$size === void 0 ? 'md' : _ref12$size,
+    _ref12$align = _ref12.align,
+    align = _ref12$align === void 0 ? 'center' : _ref12$align,
     props = _objectWithoutProperties(_ref12, _excluded8);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
     "data-slot": "dialog-title",
-    className: cn('text-lg leading-7', className)
+    className: cn(dialogWideTitleVariants({
+      size: size,
+      align: align
+    }), className)
   }, props));
 }
 function DialogFormTitle(_ref13) {

package/dialog/dialog.constants.d.ts

@@ -0,0 +1,7 @@
+export declare const dialogWideHeaderVariants: (props?: ({
+    size?: "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;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dialog/dialog.constants.js

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+export var dialogWideHeaderVariants = cva('border-border text-foreground relative flex items-center border-b', {
+  variants: {
+    size: {
+      sm: 'h-14 justify-start py-3 pr-4 pl-6',
+      md: 'h-16 justify-center'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+export var dialogWideTitleVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'text-base leading-6 font-normal',
+      md: 'text-lg leading-7'
+    },
+    align: {
+      center: 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+      left: ''
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    align: 'center'
+  }
+});

package/dialog/dialog.types.d.ts

@@ -0,0 +1,11 @@
+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 DialogWideHeaderProps extends ComponentProps<'div'> {
+    size?: DialogSize;
+}
+export interface DialogWideTitleProps extends ComponentProps<typeof DialogPrimitive.Title> {
+    size?: DialogSize;
+    align?: DialogAlign;
+}

package/dialog/dialog.types.js

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

package/dialog/index.d.ts

@@ -1 +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';

package/dialog/index.js

@@ -1 +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 { 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.122",
+  "version": "0.0.124",
   "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.122",
+    "@scaleflex/icons-tw": "^0.0.124",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",