@scaleflex/ui-tw 0.0.142 → 0.0.144

package/combobox/combobox.component.js

@@ -75,13 +75,13 @@ export function ComboboxTrigger(_ref2) {
     disabled: disabled,
     className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), [selectTriggerVariants({
       size: size
-    }), !selected && 'text-muted-foreground/80 hover:border-secondary-foreground/50', readOnly && selectReadOnlyClassNames, className, 'min-w-0'])),
+    }), !selected && 'text-muted-foreground/80 hover:border-secondary-foreground/50', readOnly && selectReadOnlyClassNames, className, 'min-w-0 overflow-hidden'])),
     onClick: handleOnTriggerClick,
     onKeyDown: handleOnTriggerKeyDown
   }, triggerProps), /*#__PURE__*/React.createElement("span", {
     className: "min-w-0 truncate"
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: "ml-2 flex items-center gap-1 pl-1"
+    className: "ml-2 flex shrink-0 items-center gap-1 pl-1"
   }, showClear && !!onClearAll && selected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     role: "button",
     tabIndex: 0,

package/dialog/dialog.component.d.ts

@@ -1,15 +1,13 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps } from './dialog.types';
+import type { DialogFormContentProps, 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, headerSize, ...props }: DialogWideContentProps): React.JSX.Element;
-declare function DialogFormContent({ className, children, overlayClassName, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
-    overlayClassName?: string;
-}): React.JSX.Element;
+declare function DialogWideContent({ className, children, overlayClassName, headerSize, maxWidth, ...props }: DialogWideContentProps): React.JSX.Element;
+declare function DialogFormContent({ className, children, overlayClassName, maxWidth, ...props }: DialogFormContentProps): 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;

package/dialog/dialog.component.js

@@ -2,8 +2,8 @@ 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", "headerSize"],
-  _excluded3 = ["className", "children", "overlayClassName"],
+  _excluded2 = ["className", "children", "overlayClassName", "headerSize", "maxWidth"],
+  _excluded3 = ["className", "children", "overlayClassName", "maxWidth"],
   _excluded4 = ["className", "size"],
   _excluded5 = ["className"],
   _excluded6 = ["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 { dialogCloseButtonPositionVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+import { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
 function Dialog(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(DialogPrimitive.Root, _extends({
@@ -61,6 +61,8 @@ function DialogWideContent(_ref6) {
     overlayClassName = _ref6.overlayClassName,
     _ref6$headerSize = _ref6.headerSize,
     headerSize = _ref6$headerSize === void 0 ? 'md' : _ref6$headerSize,
+    _ref6$maxWidth = _ref6.maxWidth,
+    maxWidth = _ref6$maxWidth === void 0 ? '2xl' : _ref6$maxWidth,
     props = _objectWithoutProperties(_ref6, _excluded2);
   return /*#__PURE__*/React.createElement(DialogPortal, {
     "data-slot": "dialog-portal"
@@ -68,7 +70,9 @@ function DialogWideContent(_ref6) {
     className: overlayClassName
   }), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', maxWidth && dialogContentWidthVariants({
+      maxWidth: maxWidth
+    }), className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,
@@ -86,6 +90,8 @@ function DialogFormContent(_ref7) {
   var className = _ref7.className,
     children = _ref7.children,
     overlayClassName = _ref7.overlayClassName,
+    _ref7$maxWidth = _ref7.maxWidth,
+    maxWidth = _ref7$maxWidth === void 0 ? 'md' : _ref7$maxWidth,
     props = _objectWithoutProperties(_ref7, _excluded3);
   return /*#__PURE__*/React.createElement(DialogPortal, {
     "data-slot": "dialog-portal"
@@ -93,7 +99,9 @@ function DialogFormContent(_ref7) {
     className: overlayClassName
   }), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
     "data-slot": "dialog-content",
-    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
+    className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', maxWidth && dialogContentWidthVariants({
+      maxWidth: maxWidth
+    }), className)
   }, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     "data-state": "open",
     asChild: true,

package/dialog/dialog.constants.d.ts

@@ -1,3 +1,6 @@
+export declare const dialogContentWidthVariants: (props?: ({
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dialogWideHeaderVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dialog/dialog.constants.js

@@ -1,4 +1,16 @@
 import { cva } from 'class-variance-authority';
+export var dialogContentWidthVariants = cva('', {
+  variants: {
+    maxWidth: {
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-2xl',
+      xl: 'max-w-4xl',
+      '2xl': 'max-w-5xl',
+      full: 'max-w-[calc(100%-2rem)]'
+    }
+  }
+});
 export var dialogWideHeaderVariants = cva('border-border text-foreground relative flex items-center border-b', {
   variants: {
     size: {

package/dialog/dialog.types.d.ts

@@ -2,9 +2,17 @@ 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 type DialogContentWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 export interface DialogWideContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
     overlayClassName?: string;
     headerSize?: DialogSize;
+    /** Preset max-width. Pass `undefined` to use className for custom width. */
+    maxWidth?: DialogContentWidth;
+}
+export interface DialogFormContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+    overlayClassName?: string;
+    /** Preset max-width. Pass `undefined` to use className for custom width. */
+    maxWidth?: DialogContentWidth;
 }
 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 { dialogCloseButtonPositionVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
-export type { DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, DialogSize, DialogAlign, } from './dialog.types';
+export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
+export type { DialogAlign, DialogContentWidth, DialogFormContentProps, DialogSize, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } 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 { dialogCloseButtonPositionVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';
+export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogWideHeaderVariants, dialogWideTitleVariants } from './dialog.constants';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.142",
+  "version": "0.0.144",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,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.142",
+    "@scaleflex/icons-tw": "^0.0.144",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",