feat(dashboard,types,js-sdk,ui): Add missing Price List features (#7856)

**What**
- Adds missing features to Price List domain
- Adds `StackedFocusModal` and `StackedDrawer` components that should replace SplitView across the project.
- Add Footer to FocusModal
- Adds missing js-sdk functions and types

**Note**
The DatePickers in the PriceLists forms do not work as intended atm. The component is broken, and needs to be fixed. I am working on a fix, but choose to move that work into a separate branch, to prevent this PR from getting bigger then it already is. Will update once the fixes have been merged.

packages/design-system/ui/src/components/button/button.tsx

@@ -41,7 +41,7 @@ const buttonVariants = cva({
       ),
     },
     size: {
-      small: "txt-compact-small-plus gap-x-1 px-2 py-1",
+      small: "txt-compact-small-plus gap-x-1.5 px-2 py-1",
       base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
       large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
       xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",

packages/design-system/ui/src/components/date-picker/date-picker.tsx

@@ -25,8 +25,8 @@ const displayVariants = cva({
   ),
   variants: {
     size: {
-      base: "txt-compact-small h-8 px-2 py-1.5",
-      small: "txt-compact-small h-7 px-2 py-1",
+      base: "txt-compact-small h-8 pr-2 py-1.5",
+      small: "txt-compact-small h-7 pr-2 py-1",
     },
   },
   defaultVariants: {
@@ -63,7 +63,11 @@ const Display = React.forwardRef<HTMLButtonElement, DisplayProps>(
           className={clx(displayVariants({ size }), className)}
           {...props}
         >
+          <span className={clx("flex items-center justify-center size-8 border-r", {
+            "size-7": size === "small",
+          })}>
           <CalendarIcon className="text-ui-fg-muted" />
+          </span>
           <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
             {children ? (
               children

packages/design-system/ui/src/components/drawer/drawer.tsx

@@ -4,7 +4,6 @@ import { XMark } from "@medusajs/icons"
 import * as DrawerPrimitives from "@radix-ui/react-dialog"
 import * as React from "react"
 
-import { Heading } from "@/components/heading"
 import { IconButton } from "@/components/icon-button"
 import { Kbd } from "@/components/kbd"
 import { Text } from "@/components/text"
@@ -65,11 +64,14 @@ DrawerOverlay.displayName = "Drawer.Overlay"
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Content>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Content> & {
+    overlayProps?: React.ComponentPropsWithoutRef<typeof DrawerOverlay>
+    portalProps?: React.ComponentPropsWithoutRef<typeof DrawerPortal>
+  }
+>(({ className, overlayProps, portalProps, ...props }, ref) => {
   return (
-    <DrawerPortal>
-      <DrawerOverlay />
+    <DrawerPortal {...portalProps}>
+      <DrawerOverlay {...overlayProps} />
       <DrawerPrimitives.Content
         ref={ref}
         className={clx(
@@ -134,19 +136,7 @@ const DrawerFooter = ({
 }
 DrawerFooter.displayName = "Drawer.Footer"
 
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Title>
->(({ className, children, ...props }, ref) => (
-  <DrawerPrimitives.Title
-    ref={ref}
-    className={clx(className)}
-    asChild
-    {...props}
-  >
-    <Heading level="h1">{children}</Heading>
-  </DrawerPrimitives.Title>
-))
+const DrawerTitle = DrawerPrimitives.Title
 DrawerTitle.displayName = "Drawer.Title"
 
 const DrawerDescription = React.forwardRef<

packages/design-system/ui/src/components/focus-modal/focus-modal.tsx

@@ -35,12 +35,9 @@ FocusModalTrigger.displayName = "FocusModal.Trigger"
 const FocusModalClose = FocusModalPrimitives.Close
 FocusModalClose.displayName = "FocusModal.Close"
 
-const FocusModalPortal = ({
-  className,
-  ...props
-}: FocusModalPrimitives.DialogPortalProps) => {
+const FocusModalPortal = (props: FocusModalPrimitives.DialogPortalProps) => {
   return (
-    <FocusModalPrimitives.DialogPortal className={clx(className)} {...props} />
+    <FocusModalPrimitives.DialogPortal {...props} />
   )
 }
 FocusModalPortal.displayName = "FocusModal.Portal"
@@ -65,11 +62,14 @@ FocusModalOverlay.displayName = "FocusModal.Overlay"
 
 const FocusModalContent = React.forwardRef<
   React.ElementRef<typeof FocusModalPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Content>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Content> & {
+    overlayProps?: React.ComponentPropsWithoutRef<typeof FocusModalOverlay>
+    portalProps?: React.ComponentPropsWithoutRef<typeof FocusModalPortal>
+  }
+>(({ className, overlayProps, portalProps, ...props }, ref) => {
   return (
-    <FocusModalPortal>
-      <FocusModalOverlay />
+    <FocusModalPortal {...portalProps}>
+      <FocusModalOverlay {...overlayProps} />
       <FocusModalPrimitives.Content
         ref={ref}
         className={clx(
@@ -114,6 +114,38 @@ const FocusModalHeader = React.forwardRef<
 })
 FocusModalHeader.displayName = "FocusModal.Header"
 
+const FocusModalFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={clx(
+        "border-ui-border-base flex items-center justify-end gap-x-2 border-t p-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+})
+FocusModalFooter.displayName = "FocusModal.Footer"
+
+const FocusModalTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Title>
+>(({ className, ...props }, ref) => {
+  return (
+    <FocusModalPrimitives.Title ref={ref} {...props} />
+  )
+})
+FocusModalTitle.displayName = "FocusModal.Title"
+
+const FocusModalDescription = FocusModalPrimitives.Description
+FocusModalDescription.displayName = "FocusModal.Description"
+
 /**
  * This component is based on the `div` element and supports all of its props
  */
@@ -127,10 +159,13 @@ FocusModalBody.displayName = "FocusModal.Body"
 
 const FocusModal = Object.assign(FocusModalRoot, {
   Trigger: FocusModalTrigger,
+  Title: FocusModalTitle,
+  Description: FocusModalDescription,
   Content: FocusModalContent,
   Header: FocusModalHeader,
   Body: FocusModalBody,
   Close: FocusModalClose,
+  Footer: FocusModalFooter,
 })
 
 export { FocusModal }

packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx

@@ -81,7 +81,7 @@ const ProgressTabsTrigger = React.forwardRef<
     <ProgressTabsPrimitives.Trigger
       ref={ref}
       className={clx(
-        "txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-14 w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
+        "txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-[52px] w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
         "group/trigger overflow-hidden text-ellipsis whitespace-nowrap",
         "disabled:bg-ui-bg-disabled disabled:text-ui-fg-muted",
         "hover:bg-ui-bg-subtle-hover",