@moving-walls/design-system 1.0.13 → 1.0.15

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

@@ -0,0 +1,33 @@
+import React from "react";
+export interface ConfirmSheetProps {
+    /** Controls open/close state */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Sheet header title */
+    title: string;
+    /** Optional descriptive text below the title */
+    description?: string | React.ReactNode;
+    /** Optional additional body content (e.g. item name, warnings) */
+    children?: React.ReactNode;
+    /** Label for the confirm button. Defaults to "Confirm" */
+    confirmLabel?: string;
+    /** Label for the cancel button. Defaults to "Cancel" */
+    cancelLabel?: string;
+    /**
+     * Visual variant:
+     * - "destructive" → red confirm button + trash icon (delete actions)
+     * - "warning"     → amber confirm button + warning icon (irreversible actions)
+     * - "default"     → primary blue confirm button (neutral confirmations)
+     */
+    variant?: "destructive" | "warning" | "default";
+    /** Shows a loading spinner on the confirm button and disables both buttons */
+    isLoading?: boolean;
+    /** Called when the user clicks the confirm button */
+    onConfirm: () => void;
+    /** Called when the user clicks cancel. Defaults to closing the sheet. */
+    onCancel?: () => void;
+}
+export declare function ConfirmSheet({ open, onOpenChange, title, description, children, confirmLabel, cancelLabel, variant, isLoading, onConfirm, onCancel, }: ConfirmSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfirmSheet {
+    var displayName: string;
+}

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

@@ -10,6 +10,7 @@ interface FormProps {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     layout?: 'vertical' | 'horizontal' | 'inline';
+    id?: string;
 }
 interface FormSectionProps {
     children: React.ReactNode;
@@ -49,7 +50,7 @@ interface FormActionsProps {
     className?: string;
     align?: 'left' | 'center' | 'right';
 }
-export declare function Form({ children, onSubmit, className, disabled, size, layout }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function Form({ children, onSubmit, className, disabled, size, layout, id, }: FormProps): import("react/jsx-runtime").JSX.Element;
 export declare function FormSection({ children, title, description, className }: FormSectionProps): import("react/jsx-runtime").JSX.Element;
 export declare function FormGroup({ children, className, required }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare function FormField({ children, className }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Alt text is required — enforces accessibility */
+    alt: string;
+    /** Default lazy loading. Pass "eager" for above-the-fold images */
+    loading?: 'lazy' | 'eager';
+}
+/**
+ * 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
+ */
+export declare function Image({ alt, loading, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Image {
+    var displayName: string;
+}

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

@@ -62,6 +62,8 @@ export { TreeView, findTreeNode, getAllNodeIds, getParentIds } from './TreeView'
 export { Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
 export { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogTrigger } from './Dialog';
 export { Sheet, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetTrigger } from './Sheet';
+export { ConfirmSheet } from './ConfirmSheet';
+export type { ConfirmSheetProps } from './ConfirmSheet';
 export { Popover, PopoverTrigger, PopoverContent } from './Popover';
 export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator } from './Dropdown';
 export { Tooltip } from './Tooltip';
@@ -75,6 +77,8 @@ export { Notification, NotificationList, NotificationBadge, NotificationBell } f
 export { DataGrid } from './DataGrid';
 export type { DataGridColumn, DataGridSort, DataGridFilter, DataGridSelection } from './DataGrid';
 export { Thumbnail, VideoThumbnail, ImageThumbnail, ThumbnailGallery } from './Thumbnail';
+export { Image } from './Image';
+export type { ImageProps } from './Image';
 export { DragDrop, SortableList, useDragDrop } from './DragDrop';
 export { Heading, Text, Label, Display } from './Typography';
 export type { HeadingProps, TextProps, LabelProps, DisplayProps } from './Typography';

package/dist/index.esm.js

@@ -12226,7 +12226,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" }]
@@ -24696,7 +24696,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     IceCreamBowl: IceCreamBowl,
     IceCreamCone: IceCreamCone,
     IdCard: IdCard,
-    Image: Image,
+    Image: Image$1,
     ImageDown: ImageDown,
     ImageMinus: ImageMinus,
     ImageOff: ImageOff,
@@ -27215,10 +27215,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,
@@ -28293,7 +28293,7 @@ var LucideIcons = /*#__PURE__*/Object.freeze({
     LucideIceCreamBowl: IceCreamBowl,
     LucideIceCreamCone: IceCreamCone,
     LucideIdCard: IdCard,
-    LucideImage: Image,
+    LucideImage: Image$1,
     LucideImageDown: ImageDown,
     LucideImageMinus: ImageMinus,
     LucideImageOff: ImageOff,
@@ -37568,7 +37568,8 @@ function Form(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout;
+    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
+    id = _ref.id;
   var handleSubmit = function handleSubmit(event) {
     if (onSubmit) {
       event.preventDefault();
@@ -37581,6 +37582,7 @@ function Form(_ref) {
       size: size
     },
     children: jsx("form", {
+      id: id,
       onSubmit: handleSubmit,
       className: cn$m(formLayouts[layout], formSizes[size], className),
       children: children
@@ -37753,7 +37755,7 @@ function formatFileSize(bytes) {
 }
 function getFileIcon$1(file) {
   if (file.type.startsWith('image/')) {
-    return jsx(Image, {
+    return jsx(Image$1, {
       className: "w-4 h-4"
     });
   }
@@ -39972,7 +39974,7 @@ function RichTextEditor(_ref2) {
       }), jsx(ToolbarButton, {
         onClick: formatCommands.image,
         title: "Insert Image",
-        children: jsx(Image, {
+        children: jsx(Image$1, {
           className: "w-4 h-4"
         })
       })]
@@ -42486,7 +42488,7 @@ var emptyStateIcons = {
   folder: jsx(FolderOpen, {
     className: "w-12 h-12 text-mw-neutral-400"
   }),
-  image: jsx(Image, {
+  image: jsx(Image$1, {
     className: "w-12 h-12 text-mw-neutral-400"
   }),
   document: jsx(FileText, {
@@ -45777,6 +45779,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 jsx(Sheet, {
+    open: open,
+    onOpenChange: onOpenChange,
+    children: jsxs(SheetContent, {
+      side: "right",
+      size: "sm",
+      className: "flex flex-col p-0",
+      children: [jsx(SheetHeader, {
+        className: "px-6 py-5 border-b border-mw-neutral-200 dark:border-mw-neutral-700 flex-shrink-0",
+        children: jsx(SheetTitle, {
+          children: title
+        })
+      }), jsxs("div", {
+        className: "flex-1 overflow-auto min-h-0 px-6 py-5 space-y-4",
+        children: [jsxs("div", {
+          className: clsx("flex items-start gap-3 rounded-lg p-4", config.bgClass),
+          children: [jsx(Icon, {
+            className: clsx("h-5 w-5 mt-0.5 flex-shrink-0", config.iconClass)
+          }), description && jsx("div", {
+            className: "text-sm text-mw-neutral-700 dark:text-mw-neutral-300",
+            children: description
+          })]
+        }), children && jsx("div", {
+          className: "text-sm text-mw-neutral-600 dark:text-mw-neutral-400",
+          children: children
+        })]
+      }), jsxs(SheetFooter, {
+        className: "flex-shrink-0 border-t border-mw-neutral-200 dark:border-mw-neutral-700 px-6 py-4",
+        children: [jsx(Button, {
+          variant: "outline",
+          onClick: handleCancel,
+          disabled: isLoading,
+          children: cancelLabel
+        }), variant === "default" ? jsx(Button, {
+          variant: "primary",
+          onClick: onConfirm,
+          disabled: isLoading,
+          children: isLoading ? "Loading..." : confirmLabel
+        }) : 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__*/createContext(null);
 function Popover(_ref) {
   var _ref$open = _ref.open,
@@ -48307,6 +48404,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 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];
@@ -48412,7 +48527,7 @@ function useDragDrop(_ref) {
 function getFileIcon(file) {
   var type = file.type;
   var name = file.name.toLowerCase();
-  if (type.startsWith('image/')) return jsx(Image, {
+  if (type.startsWith('image/')) return jsx(Image$1, {
     className: "w-6 h-6"
   });
   if (type.startsWith('video/')) return jsx(Video, {
@@ -57026,5 +57141,5 @@ function getShortcutCategory(shortcut) {
 // Version
 var version = '1.0.0';
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, AgGridTable, Alert, AlertCircleIcon, AlertTriangleIcon, AnimatedElement, AppHeader, Autocomplete, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselSlide, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CloseIcon, CodeSnippet, Collapsible, CollapsibleCode, CollapsibleContent, CollapsibleTrigger, ColumnCustomizationDrawer, Command, CommandGroup, CommandItem, CommandSeparator, Container, CounterAnimation, DataGrid, DatePicker, DateRangePicker, DescriptionList, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocumentEditor, DragDrop, Dropdown, DropdownContent, DropdownItem, Dropdown as DropdownMenu, DropdownContent as DropdownMenuContent, DropdownItem as DropdownMenuItem, DropdownMenuLabel, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger as DropdownMenuTrigger, DropdownSeparator, DropdownTrigger, DynamicIcon, EmptyState, Fieldset, FileUpload, Filter, FlexContainer, FloatingElement, Footer, Form, FormActions, FormControl, FormDescription, FormError, FormField, FormGroup, FormItem, FormLabel, FormMessage, FormSection, GridContainer, HStack, Heading, Icon$2 as Icon, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, MWBrandLoader, MWDotsLoader, MWHeartbeatLoader, MWLoader, MWMatrixLoader, MWProgressiveLoader, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MinusIcon, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Navigation, NavigationList, NoDataEmptyState, NoResultsEmptyState, Notification, NotificationBadge, NotificationBell, NotificationList, PageHeader, PageHero, Pagination, Panel, PanelGroup, PanelHeader, PanelResizer, PlusIcon, Popover, PopoverContent, PopoverTrigger, ProcessFlowAnimation, Progress, Radio$1 as Radio, RadioGroup, RadioGroupItem, Rating, ResponsiveContainer, RichTextEditor, ScheduleGrid, ScrollArea, SearchBar, SearchIcon, SearchResults, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, SimpleSelect, Skeleton, Slider, SnackbarProvider, SortableList, Spinner, SplitPanel, Stack, StackPanel, StatusBadge, Stepper, Switch, SwitchGroup, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Textarea, ThemeToggle, Thumbnail, ThumbnailGallery, TimePicker, TimeRangePicker, Timeline, TimelineItem, ToastProvider, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VideoThumbnail, borderRadius, borderWidth, breakpoints, cn, colors, cssVariables, debounce, effects, findTreeNode, formatIconName$1 as formatIconName, generateColorVariations, generateIconCode, getAllNodeIds, getParentIds, hexToRgb, shadows, spacing, tokens, typography, useDragDrop, useFormContext, useIconSearch, useKeyboardShortcuts, useSidebar, useSidebarSafe, useSnackbar, useSnackbarHelpers, useToast, version, zIndex };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, AgGridTable, Alert, AlertCircleIcon, AlertTriangleIcon, AnimatedElement, AppHeader, Autocomplete, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselSlide, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CloseIcon, CodeSnippet, Collapsible, CollapsibleCode, CollapsibleContent, CollapsibleTrigger, ColumnCustomizationDrawer, Command, CommandGroup, CommandItem, CommandSeparator, ConfirmSheet, Container, CounterAnimation, DataGrid, DatePicker, DateRangePicker, DescriptionList, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocumentEditor, DragDrop, Dropdown, DropdownContent, DropdownItem, Dropdown as DropdownMenu, DropdownContent as DropdownMenuContent, DropdownItem as DropdownMenuItem, DropdownMenuLabel, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger as DropdownMenuTrigger, DropdownSeparator, DropdownTrigger, DynamicIcon, EmptyState, Fieldset, FileUpload, Filter, FlexContainer, FloatingElement, Footer, Form, FormActions, FormControl, FormDescription, FormError, FormField, FormGroup, FormItem, FormLabel, FormMessage, FormSection, GridContainer, HStack, Heading, Icon$2 as Icon, Image, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, MWBrandLoader, MWDotsLoader, MWHeartbeatLoader, MWLoader, MWMatrixLoader, MWProgressiveLoader, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MinusIcon, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Navigation, NavigationList, NoDataEmptyState, NoResultsEmptyState, Notification, NotificationBadge, NotificationBell, NotificationList, PageHeader, PageHero, Pagination, Panel, PanelGroup, PanelHeader, PanelResizer, PlusIcon, Popover, PopoverContent, PopoverTrigger, ProcessFlowAnimation, Progress, Radio$1 as Radio, RadioGroup, RadioGroupItem, Rating, ResponsiveContainer, RichTextEditor, ScheduleGrid, ScrollArea, SearchBar, SearchIcon, SearchResults, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, SimpleSelect, Skeleton, Slider, SnackbarProvider, SortableList, Spinner, SplitPanel, Stack, StackPanel, StatusBadge, Stepper, Switch, SwitchGroup, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Textarea, ThemeToggle, Thumbnail, ThumbnailGallery, TimePicker, TimeRangePicker, Timeline, TimelineItem, ToastProvider, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VideoThumbnail, borderRadius, borderWidth, breakpoints, cn, colors, cssVariables, debounce, effects, findTreeNode, formatIconName$1 as formatIconName, generateColorVariations, generateIconCode, getAllNodeIds, getParentIds, hexToRgb, shadows, spacing, tokens, typography, useDragDrop, useFormContext, useIconSearch, useKeyboardShortcuts, useSidebar, useSidebarSafe, useSnackbar, useSnackbarHelpers, useToast, version, zIndex };
 //# sourceMappingURL=index.esm.js.map