@scaleflex/ui-tw 0.0.159 → 0.0.160

package/dialog/dialog.component.d.ts

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogContentProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
+import type { DialogContentProps, DialogDescriptionProps, DialogHeaderProps, DialogTitleProps } 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;
@@ -9,7 +9,7 @@ declare function DialogOverlay({ className, ...props }: ComponentProps<typeof Di
 declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, hideCloseButton, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogHeader({ className, size, ...props }: DialogHeaderProps): React.JSX.Element;
 declare function DialogTitle({ className, size, align, ...props }: DialogTitleProps): React.JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogDescription({ className, visuallyHidden, ...props }: DialogDescriptionProps): React.JSX.Element;
 declare function DialogBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;

package/dialog/dialog.component.js

@@ -5,13 +5,14 @@ var _excluded = ["className"],
   _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth", "hideCloseButton"],
   _excluded3 = ["className", "size"],
   _excluded4 = ["className", "size", "align"],
-  _excluded5 = ["className"],
+  _excluded5 = ["className", "visuallyHidden"],
   _excluded6 = ["className"],
   _excluded7 = ["className"],
   _excluded8 = ["className"],
   _excluded9 = ["className"],
   _excluded10 = ["className"];
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Button } from '@scaleflex/ui-tw/button';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -160,9 +161,22 @@ function DialogTitle(_ref8) {
     }), className)
   }, props));
 }
+
+// Radix warns ("Missing `Description`...") when a Dialog has no description in the a11y tree.
+// `visuallyHidden` keeps the description for screen readers (silencing the warning) but hides it visually.
 function DialogDescription(_ref9) {
   var className = _ref9.className,
+    visuallyHidden = _ref9.visuallyHidden,
     props = _objectWithoutProperties(_ref9, _excluded5);
+  if (visuallyHidden) {
+    // `asChild` applies the hidden styles to the Description itself, so it stays the `aria-describedby` target without an extra wrapper.
+    return /*#__PURE__*/React.createElement(VisuallyHidden, {
+      asChild: true
+    }, /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
+      "data-slot": "dialog-description",
+      className: className
+    }, props)));
+  }
   return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
     "data-slot": "dialog-description",
     className: cn('text-muted-foreground text-sm', className)

package/dialog/dialog.types.d.ts

@@ -20,6 +20,10 @@ export interface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.
     size?: DialogHeaderSize;
     align?: DialogTitleAlign;
 }
+export interface DialogDescriptionProps extends ComponentProps<typeof DialogPrimitive.Description> {
+    /** Render the description in the a11y tree but hide it visually. Satisfies Radix's `aria-describedby` requirement without showing description text. */
+    visuallyHidden?: boolean;
+}
 /** @deprecated Use `DialogHeaderSize` instead */
 export type DialogSize = DialogHeaderSize;
 /** @deprecated Use `DialogTitleAlign` instead */

package/dialog/index.d.ts

@@ -1,3 +1,3 @@
 export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon, DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle, } from './dialog.component';
 export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
-export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';
+export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogDescriptionProps, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';

package/package.json

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