@orderly.network/ui 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/index.d.mts

@@ -5293,6 +5293,10 @@ type SimpleDialogProps = {
     onOpenChange?: (open: boolean) => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     closable?: boolean;
+    /**
+     * Visible header title. When omitted, a screen-reader-only default is still
+     * rendered so Radix `Dialog.Content` meets accessibility requirements.
+     */
     title?: ReactNode | (() => ReactNode);
     description?: ReactNode;
     classNames?: {
@@ -5443,12 +5447,20 @@ declare const SheetFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/**
+ * Visible sheet title. Must render Radix `Dialog.Title` so `DialogContent` is
+ * announced correctly to assistive tech (see Radix dialog a11y requirements).
+ */
 declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & {
     leading?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 interface SimpleSheetProps {
+    /**
+     * Visible header title. When omitted, a screen-reader-only default is still
+     * rendered so Radix `Dialog.Content` meets accessibility requirements.
+     */
     title?: ReactNode | (() => ReactNode);
     leading?: React.ReactNode;
     open?: boolean;

package/dist/index.d.ts

@@ -5293,6 +5293,10 @@ type SimpleDialogProps = {
     onOpenChange?: (open: boolean) => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     closable?: boolean;
+    /**
+     * Visible header title. When omitted, a screen-reader-only default is still
+     * rendered so Radix `Dialog.Content` meets accessibility requirements.
+     */
     title?: ReactNode | (() => ReactNode);
     description?: ReactNode;
     classNames?: {
@@ -5443,12 +5447,20 @@ declare const SheetFooter: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/**
+ * Visible sheet title. Must render Radix `Dialog.Title` so `DialogContent` is
+ * announced correctly to assistive tech (see Radix dialog a11y requirements).
+ */
 declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & {
     leading?: React$1.ReactNode;
 } & React$1.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 interface SimpleSheetProps {
+    /**
+     * Visible header title. When omitted, a screen-reader-only default is still
+     * rendered so Radix `Dialog.Content` meets accessibility requirements.
+     */
     title?: ReactNode | (() => ReactNode);
     leading?: React.ReactNode;
     open?: boolean;

package/dist/index.js

@@ -8,7 +8,7 @@ var dateFns = require('date-fns');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var makeBlockie = require('ethereum-blockies-base64');
 var utils = require('@orderly.network/utils');
-var DialogPrimitive = require('@radix-ui/react-dialog');
+var SheetPrimitive = require('@radix-ui/react-dialog');
 var locale = require('date-fns/locale');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -52,7 +52,7 @@ function _interopNamespace(e) {
 var React79__namespace = /*#__PURE__*/_interopNamespace(React79);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var makeBlockie__default = /*#__PURE__*/_interopDefault(makeBlockie);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -5274,22 +5274,22 @@ var modalActions = {
   setStates,
   updateArgs
 };
-var Sheet = DialogPrimitive__namespace.Root;
-var SheetTrigger = DialogPrimitive__namespace.Trigger;
-var SheetClose = DialogPrimitive__namespace.Close;
-var SheetPortal = DialogPrimitive__namespace.Portal;
+var Sheet = SheetPrimitive__namespace.Root;
+var SheetTrigger = SheetPrimitive__namespace.Trigger;
+var SheetClose = SheetPrimitive__namespace.Close;
+var SheetPortal = SheetPrimitive__namespace.Portal;
 var SheetOverlay = React79__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
+  SheetPrimitive__namespace.Overlay,
   {
     className: tailwindVariants.cnBase(
-      "oui-sheet-overlay oui-fixed oui-inset-0 oui-z-50 oui-bg-black/60 oui-backdrop-blur-sm data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out data-[state=closed]:oui-fade-out-0 data-[state=open]:oui-fade-in-0",
+      "oui-sheet-overlay oui-fixed oui-inset-0 oui-z-50 oui-bg-black/50 oui-backdrop-blur-sm data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out data-[state=closed]:oui-fade-out-0 data-[state=open]:oui-fade-in-0",
       className
     ),
     ...props,
     ref
   }
 ));
-SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+SheetOverlay.displayName = SheetPrimitive__namespace.Overlay.displayName;
 var sheetVariants = tailwindVariants.tv({
   base: "oui-sheet-content oui-fixed oui-z-50 oui-gap-4 oui-bg-base-8 oui-px-4 oui-shadow-lg oui-transition oui-ease-in-out data-[state=closed]:oui-duration-260 data-[state=open]:oui-duration-300 data-[state=open]:oui-animate-in data-[state=closed]:oui-animate-out",
   variants: {
@@ -5317,7 +5317,7 @@ var SheetContent = React79__namespace.forwardRef(
   }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, { className: overlayClassName }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+      SheetPrimitive__namespace.Content,
       {
         ref,
         className: tailwindVariants.cnBase(sheetVariants({ side }), className),
@@ -5326,7 +5326,7 @@ var SheetContent = React79__namespace.forwardRef(
         ...props,
         children: [
           closeable && /* @__PURE__ */ jsxRuntime.jsxs(
-            DialogPrimitive__namespace.Close,
+            SheetPrimitive__namespace.Close,
             {
               className: tailwindVariants.cnBase(
                 "oui-sheet-close-btn oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-right-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
@@ -5352,7 +5352,7 @@ var SheetContent = React79__namespace.forwardRef(
     )
   ] })
 );
-SheetContent.displayName = DialogPrimitive__namespace.Content.displayName;
+SheetContent.displayName = SheetPrimitive__namespace.Content.displayName;
 var SheetHeader = ({
   className,
   leading,
@@ -5400,29 +5400,24 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React79__namespace.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "div",
-  {
-    className: "oui-sheet-header oui-grid oui-grid-cols-[40px_1fr_40px] oui-items-center",
-    ref,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: leading }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: tailwindVariants.cnBase(
-            "oui-flex oui-flex-col oui-space-y-2 oui-text-center oui-text-lg oui-text-base-contrast",
-            className
-          ),
-          ...props
-        }
-      )
-    ]
-  }
-));
-SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var SheetTitle = React79__namespace.forwardRef(({ className, leading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-sheet-header oui-grid oui-grid-cols-[40px_1fr_40px] oui-items-center", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { children: leading }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Title,
+    {
+      ref,
+      className: tailwindVariants.cnBase(
+        "oui-flex oui-flex-col oui-space-y-2 oui-text-center oui-text-lg oui-text-base-contrast",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+] }));
+SheetTitle.displayName = SheetPrimitive__namespace.Title.displayName;
 var SheetDescription = React79__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
+  SheetPrimitive__namespace.Description,
   {
     ref,
     className: tailwindVariants.cnBase(
@@ -5432,7 +5427,7 @@ var SheetDescription = React79__namespace.forwardRef(({ className, ...props }, r
     ...props
   }
 ));
-SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+SheetDescription.displayName = SheetPrimitive__namespace.Description.displayName;
 function createSheetComponent(Comp) {
   return modal.create((props) => {
     const { title, leading, classNames, contentProps, closable, ...rest } = props;
@@ -5692,10 +5687,10 @@ var SimpleSheet = (props) => {
       closeable: closable,
       ...contentProps,
       children: [
-        title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { leading: props.leading, children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
-        ] }),
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Title, { className: "oui-sr-only", children: "sheet title" }),
         /* @__PURE__ */ jsxRuntime.jsx(SheetBody, { className: classNames?.body, children: props.children })
       ]
     }
@@ -5715,7 +5710,7 @@ var dialogVariants = tailwindVariants.tv({
       "oui-fixed",
       "oui-inset-0",
       "oui-z-50",
-      "oui-bg-black/60",
+      "oui-bg-black/50",
       "oui-backdrop-blur-sm",
       "data-[state=open]:oui-animate-in",
       "data-[state=closed]:oui-animate-out",
@@ -5860,14 +5855,14 @@ var dialogVariants = tailwindVariants.tv({
     intensity: 800
   }
 });
-var Dialog = DialogPrimitive__namespace.Root;
-var DialogTrigger = DialogPrimitive__namespace.Trigger;
-var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogClose = DialogPrimitive__namespace.Close;
+var Dialog = SheetPrimitive__namespace.Root;
+var DialogTrigger = SheetPrimitive__namespace.Trigger;
+var DialogPortal = SheetPrimitive__namespace.Portal;
+var DialogClose = SheetPrimitive__namespace.Close;
 var DialogOverlay = React79__namespace.forwardRef(({ className, ...props }, ref) => {
   const { overlay } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+    SheetPrimitive__namespace.Overlay,
     {
       ref,
       className: overlay({ className }),
@@ -5875,7 +5870,7 @@ var DialogOverlay = React79__namespace.forwardRef(({ className, ...props }, ref)
     }
   );
 });
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+DialogOverlay.displayName = SheetPrimitive__namespace.Overlay.displayName;
 var DialogContent = React79__namespace.forwardRef(
   ({
     overlyClassName,
@@ -5890,7 +5885,7 @@ var DialogContent = React79__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, { className: overlyClassName }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogPrimitive__namespace.Content,
+        SheetPrimitive__namespace.Content,
         {
           ref,
           className: content({ className }),
@@ -5898,7 +5893,7 @@ var DialogContent = React79__namespace.forwardRef(
           children: [
             children,
             closable && /* @__PURE__ */ jsxRuntime.jsxs(
-              DialogPrimitive__namespace.Close,
+              SheetPrimitive__namespace.Close,
               {
                 className: close(),
                 "data-testid": "oui-testid-dialog-content-close-btn",
@@ -5914,7 +5909,7 @@ var DialogContent = React79__namespace.forwardRef(
     ] });
   }
 );
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+DialogContent.displayName = SheetPrimitive__namespace.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
@@ -5941,7 +5936,7 @@ DialogFooter.displayName = "DialogFooter";
 var DialogTitle = React79__namespace.forwardRef(({ className, ...props }, ref) => {
   const { title } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+    SheetPrimitive__namespace.Title,
     {
       ref,
       className: title({ className }),
@@ -5949,11 +5944,11 @@ var DialogTitle = React79__namespace.forwardRef(({ className, ...props }, ref) =
     }
   );
 });
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+DialogTitle.displayName = SheetPrimitive__namespace.Title.displayName;
 var DialogDescription = React79__namespace.forwardRef(({ className, ...props }, ref) => {
   const { desc } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
+    SheetPrimitive__namespace.Description,
     {
       ref,
       className: desc({ className }),
@@ -5961,7 +5956,7 @@ var DialogDescription = React79__namespace.forwardRef(({ className, ...props },
     }
   );
 });
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+DialogDescription.displayName = SheetPrimitive__namespace.Description.displayName;
 var SimpleDialogFooter = (props) => {
   const { actions } = props;
   const [primaryLoading, setPrimaryLoading] = React79.useState(
@@ -6051,10 +6046,10 @@ var SimpleDialog = (props) => {
       overlyClassName: props.classNames?.overlay,
       ...props.contentProps,
       children: [
-        title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
-        ] }),
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Title, { className: "oui-sr-only", children: "dialog title" }),
         /* @__PURE__ */ jsxRuntime.jsx(DialogBody, { className: props.classNames?.body, children: props.children }),
         typeof props.description !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: props.description }),
         /* @__PURE__ */ jsxRuntime.jsx(