@moving-walls/design-system 1.0.11 → 1.0.13

package/dist/components/ui/PageHeader.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
 export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
+    /** Description shown below the title */
+    description?: string;
+    /** Alias for description (backward compat) */
     subtitle?: string;
+    /** i18n key for the title (consumer passes pre-translated string as title) */
+    titleKey?: string;
+    /** i18n key for the description */
+    descriptionKey?: string;
+    /** Element rendered to the left of the title (e.g. a back button) */
+    leftAction?: React.ReactNode;
+    /** Action buttons rendered on the right side */
     actions?: React.ReactNode;
 }
-export declare function PageHeader({ title, subtitle, actions, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader({ title, description, subtitle, titleKey: _titleKey, descriptionKey: _descriptionKey, leftAction, actions, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace PageHeader {
     var displayName: string;
 }

package/dist/index.esm.js

@@ -30819,8 +30819,8 @@ var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
       className: "flex items-center justify-between",
       children: [jsxs("div", {
         className: "flex items-center space-x-3",
-        children: [jsxs("div", {
-          className: "relative inline-flex items-center",
+        children: [jsxs("label", {
+          className: "relative inline-flex items-center cursor-pointer",
           children: [jsx("input", Object.assign({
             type: "checkbox",
             ref: ref,
@@ -30829,12 +30829,16 @@ var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
             onChange: handleChange,
             disabled: loading || props.disabled
           }, props)), jsxs("div", {
-            className: clsx('relative rounded-full cursor-pointer', animate ? 'transition-colors duration-200' : '', 'peer-focus:ring-2 peer-focus:ring-offset-2', variantConfig.focus, 'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed', error ? 'bg-mw-error-200 peer-checked:bg-mw-error-600' : checked ? variantConfig.on : variantConfig.off, sizeConfig.track, className),
+            className: clsx('relative rounded-full', animate ? 'transition-colors duration-200' : '', 'peer-focus:ring-2 peer-focus:ring-offset-2', variantConfig.focus, loading || props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer', error ? 'bg-mw-error-200 peer-checked:bg-mw-error-600' : checked ? variantConfig.on : variantConfig.off, sizeConfig.track, className),
             children: [trackIcon && jsx("div", {
               className: "absolute inset-0 flex items-center justify-center",
               children: trackIcon
             }), jsx("div", {
-              className: clsx('absolute left-0.5 top-0.5 rounded-full flex items-center justify-center', animate ? 'transition-transform duration-200' : '', checked ? 'peer-checked:' + sizeConfig.translate : '', variantConfig.thumb, sizeConfig.thumb, loading && 'shadow-sm'),
+              className: clsx('absolute top-0.5 rounded-full flex items-center justify-center', animate ? 'transition-transform duration-200' : '', variantConfig.thumb, sizeConfig.thumb, loading && 'shadow-sm'),
+              style: {
+                left: checked ? undefined : '2px',
+                right: checked ? '2px' : undefined
+              },
               children: renderThumbContent()
             })]
           })]
@@ -35727,7 +35731,7 @@ var SelectContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return jsx(Portal, {
     children: jsxs(Content2, Object.assign({
       ref: ref,
-      className: clsx('relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-mw-neutral-200 dark:border-mw-neutral-700', 'bg-white dark:bg-mw-neutral-800 text-mw-neutral-900 dark:text-mw-neutral-100', 'shadow-lg', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+      className: clsx('relative z-[100001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-mw-neutral-200 dark:border-mw-neutral-700', 'bg-white dark:bg-mw-neutral-800 text-mw-neutral-900 dark:text-mw-neutral-100', 'shadow-lg', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
       position: position
     }, props, {
       children: [jsx(SelectScrollUpButton, {}), jsx(Viewport, {
@@ -49183,28 +49187,52 @@ var AgGridTable = AgGridTableInner;
 
 function PageHeader(_a) {
   var title = _a.title,
-    subtitle = _a.subtitle,
+    description = _a.description,
+    subtitle = _a.subtitle;
+    _a.titleKey;
+    _a.descriptionKey;
+    var leftAction = _a.leftAction,
     actions = _a.actions,
     className = _a.className,
-    props = __rest$1(_a, ["title", "subtitle", "actions", "className"]);
+    props = __rest$1(_a, ["title", "description", "subtitle", "titleKey", "descriptionKey", "leftAction", "actions", "className"]);
+  var desc = description !== null && description !== void 0 ? description : subtitle;
+  var headerId = "page-header-".concat(title.toLowerCase().trim().split(/\s+/).join('-'));
+  var baseClass = 'bg-white flex flex-col justify-start items-start gap-4 border-b border-t border-container-border pt-4 pb-3 dark:bg-mw-neutral-900 dark:border-mw-neutral-800';
+  var combinedClass = className ? "".concat(baseClass, " ").concat(className) : baseClass;
   return jsx("div", Object.assign({
-    className: clsx('pb-4 mb-6 border-b border-mw-neutral-200 dark:border-mw-neutral-700', className)
+    id: headerId,
+    className: combinedClass
   }, props, {
     children: jsxs("div", {
-      className: "flex flex-row items-center justify-between px-6",
+      className: "self-stretch px-4 inline-flex justify-start items-start",
       children: [jsxs("div", {
-        className: "space-y-1",
-        children: [jsx("h1", {
-          className: "text-xl font-semibold leading-[2rem] tracking-tight text-mw-neutral-900 dark:text-white",
-          children: title
-        }), subtitle && (/* Figma: 14px font, 400 weight, 18px line-height, #717171 */
-        jsx("p", {
-          className: "text-sm leading-[1.125rem] text-mw-neutral-500 dark:text-mw-neutral-400",
-          children: subtitle
-        }))]
-      }), actions && jsx("div", {
-        className: "flex flex-wrap items-center gap-2",
-        children: actions
+        className: "pt-2 flex justify-start items-start gap-2",
+        children: [leftAction && jsx("div", {
+          id: "".concat(headerId, "-left-action"),
+          className: "p-2 flex justify-center items-center gap-1",
+          children: jsx("div", {
+            className: "relative overflow-hidden",
+            children: leftAction
+          })
+        }), jsxs("div", {
+          className: "self-stretch inline-flex flex-col justify-start items-start gap-1",
+          children: [jsx("div", {
+            id: "".concat(headerId, "-title"),
+            className: "self-stretch justify-start text-xl font-semibold leading-loose text-mw-neutral-900 dark:text-white",
+            children: title
+          }), desc && jsx("div", {
+            id: "".concat(headerId, "-description"),
+            className: "self-stretch justify-start text-neutral-500 text-sm font-normal leading-none dark:text-mw-neutral-400",
+            children: desc
+          })]
+        })]
+      }), jsx("div", {
+        id: "".concat(headerId, "-actions"),
+        className: "flex-1 self-stretch flex justify-end items-end gap-2",
+        children: actions && jsx("div", {
+          className: "flex items-center gap-4",
+          children: actions
+        })
       })]
     })
   }));