@moving-walls/design-system 1.0.12 → 1.0.14

package/dist/index.js

@@ -12246,7 +12246,7 @@ const ImageUpscale = createLucideIcon("ImageUpscale", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Image = createLucideIcon("Image", [
+const Image$1 = createLucideIcon("Image", [
     ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
     ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
     ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
@@ -24716,7 +24716,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     IceCreamBowl: IceCreamBowl,
     IceCreamCone: IceCreamCone,
     IdCard: IdCard,
-    Image: Image,
+    Image: Image$1,
     ImageDown: ImageDown,
     ImageMinus: ImageMinus,
     ImageOff: ImageOff,
@@ -27235,10 +27235,10 @@ var LucideIcons = /*#__PURE__*/Object.freeze({
     Icon: Icon$1,
     IdCard: IdCard,
     IdCardIcon: IdCard,
-    Image: Image,
+    Image: Image$1,
     ImageDown: ImageDown,
     ImageDownIcon: ImageDown,
-    ImageIcon: Image,
+    ImageIcon: Image$1,
     ImageMinus: ImageMinus,
     ImageMinusIcon: ImageMinus,
     ImageOff: ImageOff,
@@ -28313,7 +28313,7 @@ var LucideIcons = /*#__PURE__*/Object.freeze({
     LucideIceCreamBowl: IceCreamBowl,
     LucideIceCreamCone: IceCreamCone,
     LucideIdCard: IdCard,
-    LucideImage: Image,
+    LucideImage: Image$1,
     LucideImageDown: ImageDown,
     LucideImageMinus: ImageMinus,
     LucideImageOff: ImageOff,
@@ -30839,8 +30839,8 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       className: "flex items-center justify-between",
       children: [require$$1.jsxs("div", {
         className: "flex items-center space-x-3",
-        children: [require$$1.jsxs("div", {
-          className: "relative inline-flex items-center",
+        children: [require$$1.jsxs("label", {
+          className: "relative inline-flex items-center cursor-pointer",
           children: [require$$1.jsx("input", Object.assign({
             type: "checkbox",
             ref: ref,
@@ -30849,12 +30849,16 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
             onChange: handleChange,
             disabled: loading || props.disabled
           }, props)), require$$1.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 && require$$1.jsx("div", {
               className: "absolute inset-0 flex items-center justify-center",
               children: trackIcon
             }), require$$1.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()
             })]
           })]
@@ -35747,7 +35751,7 @@ var SelectContent = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref)
   return require$$1.jsx(Portal, {
     children: require$$1.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: [require$$1.jsx(SelectScrollUpButton, {}), require$$1.jsx(Viewport, {
@@ -37769,7 +37773,7 @@ function formatFileSize(bytes) {
 }
 function getFileIcon$1(file) {
   if (file.type.startsWith('image/')) {
-    return require$$1.jsx(Image, {
+    return require$$1.jsx(Image$1, {
       className: "w-4 h-4"
     });
   }
@@ -39988,7 +39992,7 @@ function RichTextEditor(_ref2) {
       }), require$$1.jsx(ToolbarButton, {
         onClick: formatCommands.image,
         title: "Insert Image",
-        children: require$$1.jsx(Image, {
+        children: require$$1.jsx(Image$1, {
           className: "w-4 h-4"
         })
       })]
@@ -42502,7 +42506,7 @@ var emptyStateIcons = {
   folder: require$$1.jsx(FolderOpen, {
     className: "w-12 h-12 text-mw-neutral-400"
   }),
-  image: require$$1.jsx(Image, {
+  image: require$$1.jsx(Image$1, {
     className: "w-12 h-12 text-mw-neutral-400"
   }),
   document: require$$1.jsx(FileText, {
@@ -45793,6 +45797,101 @@ function SheetDescription(_a) {
   }));
 }
 
+var variantConfig = {
+  destructive: {
+    icon: Trash2,
+    iconClass: "text-red-500",
+    bgClass: "bg-red-50 dark:bg-red-950/30",
+    buttonClass: "bg-red-600 hover:bg-red-700 text-white border-transparent"
+  },
+  warning: {
+    icon: TriangleAlert,
+    iconClass: "text-amber-500",
+    bgClass: "bg-amber-50 dark:bg-amber-950/30",
+    buttonClass: "bg-amber-500 hover:bg-amber-600 text-white border-transparent"
+  },
+  "default": {
+    icon: Info,
+    iconClass: "text-mw-primary-500",
+    bgClass: "bg-mw-primary-50 dark:bg-mw-primary-950/30",
+    buttonClass: undefined // uses Button variant="primary"
+  }
+};
+function ConfirmSheet(_ref) {
+  var open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    title = _ref.title,
+    description = _ref.description,
+    children = _ref.children,
+    _ref$confirmLabel = _ref.confirmLabel,
+    confirmLabel = _ref$confirmLabel === void 0 ? "Confirm" : _ref$confirmLabel,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel;
+  var config = variantConfig[variant];
+  var Icon = config.icon;
+  var handleCancel = function handleCancel() {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onOpenChange(false);
+    }
+  };
+  return require$$1.jsx(Sheet, {
+    open: open,
+    onOpenChange: onOpenChange,
+    children: require$$1.jsxs(SheetContent, {
+      side: "right",
+      size: "sm",
+      className: "flex flex-col p-0",
+      children: [require$$1.jsx(SheetHeader, {
+        className: "px-6 py-5 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0",
+        children: require$$1.jsx(SheetTitle, {
+          children: title
+        })
+      }), require$$1.jsxs("div", {
+        className: "flex-1 overflow-auto min-h-0 px-6 py-5 space-y-4",
+        children: [require$$1.jsxs("div", {
+          className: clsx("flex items-start gap-3 rounded-lg p-4", config.bgClass),
+          children: [require$$1.jsx(Icon, {
+            className: clsx("h-5 w-5 mt-0.5 flex-shrink-0", config.iconClass)
+          }), description && require$$1.jsx("div", {
+            className: "text-sm text-mw-neutral-700 dark:text-mw-neutral-300",
+            children: description
+          })]
+        }), children && require$$1.jsx("div", {
+          className: "text-sm text-mw-neutral-600 dark:text-mw-neutral-400",
+          children: children
+        })]
+      }), require$$1.jsxs(SheetFooter, {
+        className: "flex-shrink-0 border-t border-mw-neutral-200 dark:border-mw-neutral-700 px-6 py-4",
+        children: [require$$1.jsx(Button, {
+          variant: "outline",
+          onClick: handleCancel,
+          disabled: isLoading,
+          children: cancelLabel
+        }), variant === "default" ? require$$1.jsx(Button, {
+          variant: "primary",
+          onClick: onConfirm,
+          disabled: isLoading,
+          children: isLoading ? "Loading..." : confirmLabel
+        }) : require$$1.jsx("button", {
+          onClick: onConfirm,
+          disabled: isLoading,
+          className: clsx("inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed", config.buttonClass),
+          children: isLoading ? "Loading..." : confirmLabel
+        })]
+      })]
+    })
+  });
+}
+ConfirmSheet.displayName = "ConfirmSheet";
+
 var PopoverContext = /*#__PURE__*/React.createContext(null);
 function Popover(_ref) {
   var _ref$open = _ref.open,
@@ -48323,6 +48422,24 @@ function ThumbnailGallery(_ref2) {
   });
 }
 
+/**
+ * Design system Image component.
+ * - Wraps native <img> so alt is a required prop (accessibility enforcement)
+ * - Defaults to loading="lazy" for performance
+ * - Use this instead of native <img> anywhere in the application
+ */
+function Image(_a) {
+  var alt = _a.alt,
+    _a$loading = _a.loading,
+    loading = _a$loading === void 0 ? 'lazy' : _a$loading,
+    props = __rest$1(_a, ["alt", "loading"]);
+  return require$$1.jsx("img", Object.assign({
+    alt: alt,
+    loading: loading
+  }, props));
+}
+Image.displayName = 'Image';
+
 function cn$3() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];
@@ -48428,7 +48545,7 @@ function useDragDrop(_ref) {
 function getFileIcon(file) {
   var type = file.type;
   var name = file.name.toLowerCase();
-  if (type.startsWith('image/')) return require$$1.jsx(Image, {
+  if (type.startsWith('image/')) return require$$1.jsx(Image$1, {
     className: "w-6 h-6"
   });
   if (type.startsWith('video/')) return require$$1.jsx(Video, {
@@ -49213,7 +49330,7 @@ function PageHeader(_a) {
     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-container-border pt-4 pb-3 dark:bg-mw-neutral-900 dark:border-mw-neutral-800';
+  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 require$$1.jsx("div", Object.assign({
     id: headerId,
@@ -57090,6 +57207,7 @@ exports.Command = Command;
 exports.CommandGroup = CommandGroup;
 exports.CommandItem = CommandItem;
 exports.CommandSeparator = CommandSeparator;
+exports.ConfirmSheet = ConfirmSheet;
 exports.Container = Container;
 exports.CounterAnimation = CounterAnimation;
 exports.DataGrid = DataGrid;
@@ -57140,6 +57258,7 @@ exports.GridContainer = GridContainer;
 exports.HStack = HStack;
 exports.Heading = Heading;
 exports.Icon = Icon$2;
+exports.Image = Image;
 exports.ImageCarousel = ImageCarousel;
 exports.ImageThumbnail = ImageThumbnail;
 exports.InfoIcon = InfoIcon;