@moving-walls/design-system 1.0.2 → 1.0.3

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

@@ -1,4 +1,10 @@
 import React from 'react';
+export interface DisplayProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    size?: 'large' | 'medium' | 'small';
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Display({ size, children, className, ...props }: DisplayProps): import("react/jsx-runtime").JSX.Element;
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     children: React.ReactNode;
@@ -6,7 +12,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 }
 export declare function Heading({ level, children, className, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 type TextBaseProps = {
-    size?: '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+    size?: '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
     variant?: 'primary' | 'secondary' | 'muted' | 'error' | 'success' | 'info' | 'warning';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     children: React.ReactNode;

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

@@ -76,8 +76,8 @@ export { DataGrid } from './DataGrid';
 export type { DataGridColumn, DataGridSort, DataGridFilter, DataGridSelection } from './DataGrid';
 export { Thumbnail, VideoThumbnail, ImageThumbnail, ThumbnailGallery } from './Thumbnail';
 export { DragDrop, SortableList, useDragDrop } from './DragDrop';
-export { Heading, Text, Label } from './Typography';
-export type { HeadingProps, TextProps, LabelProps } from './Typography';
+export { Heading, Text, Label, Display } from './Typography';
+export type { HeadingProps, TextProps, LabelProps, DisplayProps } from './Typography';
 export { PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 export { AppHeader, SidebarToggleButton } from './AppHeader';

package/dist/index.esm.js

@@ -43965,6 +43965,25 @@ function SortableList(_ref4) {
   });
 }
 
+function Display(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 'large' : _a$size,
+    children = _a.children,
+    className = _a.className,
+    props = __rest$1(_a, ["size", "children", "className"]);
+  var sizeClasses = {
+    large: 'text-4xl font-bold leading-[3.5rem] text-mw-neutral-900 dark:text-white',
+    // 40px / 56px
+    medium: 'text-3xl font-bold leading-[3rem] text-mw-neutral-900 dark:text-white',
+    // 32px / 48px
+    small: 'text-2xl font-bold leading-[2.5rem] text-mw-neutral-900 dark:text-white' // 24px / 40px
+  };
+  return jsx("h1", Object.assign({
+    className: clsx(sizeClasses[size], className)
+  }, props, {
+    children: children
+  }));
+}
 function Heading(_a) {
   var _a$level = _a.level,
     level = _a$level === void 0 ? 1 : _a$level,
@@ -43973,14 +43992,19 @@ function Heading(_a) {
     props = __rest$1(_a, ["level", "children", "className"]);
   var Tag = "h".concat(level);
   var sizeClasses = {
-    1: 'text-4xl font-bold text-mw-neutral-900 dark:text-white',
-    2: 'text-3xl font-bold text-mw-neutral-900 dark:text-white',
-    3: 'text-2xl font-semibold text-mw-neutral-900 dark:text-white',
+    1: 'text-4xl font-semibold leading-[3.5rem] text-mw-neutral-900 dark:text-white',
+    // 40px / 56px
+    2: 'text-3xl font-semibold leading-[3rem] text-mw-neutral-900 dark:text-white',
+    // 32px / 48px
+    3: 'text-2xl font-semibold leading-[2.5rem] text-mw-neutral-900 dark:text-white',
+    // 24px / 40px
     // H4: Page titles - 20px font, 600 weight, 32px line-height (Figma: Creatives title)
     4: 'text-xl font-semibold leading-[2rem] text-mw-neutral-900 dark:text-white',
-    5: 'text-lg font-medium text-mw-neutral-900 dark:text-white',
+    // 20px / 32px
+    5: 'text-lg font-semibold leading-[1.5rem] text-mw-neutral-900 dark:text-white',
+    // 18px / 24px
     // H6: Section headings - 16px font, 500 weight, 20px line-height (Figma: Folders/Recently Activity)
-    6: 'text-base font-medium leading-[1.25rem] text-mw-neutral-900 dark:text-white'
+    6: 'text-base font-medium leading-[1.25rem] text-mw-neutral-900 dark:text-white' // 16px / 20px
   };
   return jsx(Tag, Object.assign({
     className: clsx(sizeClasses[level], className)
@@ -43989,8 +44013,8 @@ function Heading(_a) {
   }));
 }
 function Text(_a) {
-  var _a$size = _a.size,
-    size = _a$size === void 0 ? 'base' : _a$size,
+  var _a$size2 = _a.size,
+    size = _a$size2 === void 0 ? 'base' : _a$size2,
     _a$variant = _a.variant,
     variant = _a$variant === void 0 ? 'primary' : _a$variant,
     _a$weight = _a.weight,
@@ -44006,11 +44030,18 @@ function Text(_a) {
     xs: 'text-xs leading-[1rem]',
     // 12px font, 16px line-height
     sm: 'text-sm leading-[1.125rem]',
-    // 14px font, 18px line-height (Figma: subtitle)
+    // 14px font, 18px line-height
     base: 'text-base leading-[1.25rem]',
     // 16px font, 20px line-height
-    lg: 'text-lg',
-    xl: 'text-xl'
+    lg: 'text-lg leading-[1.5rem]',
+    // 18px / 24px
+    xl: 'text-xl leading-[2rem]',
+    // 20px / 32px
+    '2xl': 'text-2xl leading-[2.5rem]',
+    // 24px / 40px
+    '3xl': 'text-3xl leading-[3rem]',
+    // 32px / 48px
+    '4xl': 'text-4xl leading-[3.5rem]' // 40px / 56px
   };
   var variantClasses = {
     primary: 'text-mw-neutral-900 dark:text-white',
@@ -48406,35 +48437,35 @@ var typography = {
     xs: ['0.75rem', {
       lineHeight: '1rem'
     }],
-    // 12px
+    // 12px / 16px
     sm: ['0.875rem', {
-      lineHeight: '1.25rem'
+      lineHeight: '1.125rem'
     }],
-    // 14px
+    // 14px / 18px
     base: ['1rem', {
-      lineHeight: '1.5rem'
+      lineHeight: '1.25rem'
     }],
-    // 16px
+    // 16px / 20px
     lg: ['1.125rem', {
-      lineHeight: '1.75rem'
+      lineHeight: '1.5rem'
     }],
-    // 18px
+    // 18px / 24px
     xl: ['1.25rem', {
-      lineHeight: '1.75rem'
+      lineHeight: '2rem'
     }],
-    // 20px
+    // 20px / 32px
     '2xl': ['1.5rem', {
-      lineHeight: '2rem'
+      lineHeight: '2.5rem'
     }],
-    // 24px
-    '3xl': ['1.875rem', {
-      lineHeight: '2.25rem'
+    // 24px / 40px
+    '3xl': ['2rem', {
+      lineHeight: '3rem'
     }],
-    // 30px
-    '4xl': ['2.25rem', {
-      lineHeight: '2.5rem'
+    // 32px / 48px
+    '4xl': ['2.5rem', {
+      lineHeight: '3.5rem'
     }],
-    // 36px
+    // 40px / 56px
     '5xl': ['3rem', {
       lineHeight: '1'
     }],
@@ -48473,21 +48504,57 @@ var breakpoints = {
 };
 var borderRadius = {
   none: '0px',
-  sm: '0.125rem',
-  // 2px
-  base: '0.25rem',
+  '2xs': '0.25rem',
   // 4px
-  md: '0.375rem',
-  // 6px
-  lg: '0.5rem',
+  xs: '0.5rem',
   // 8px
-  xl: '0.75rem',
+  s: '0.75rem',
   // 12px
-  '2xl': '1rem',
+  m: '1rem',
   // 16px
-  '3xl': '1.5rem',
+  l: '1.25rem',
+  // 20px
+  xl: '1.5rem',
   // 24px
-  full: '9999px'
+  '2xl': '2rem',
+  // 32px
+  '3xl': '2.5rem',
+  // 40px
+  '4xl': '3rem',
+  // 48px
+  '5xl': '3.5rem',
+  // 56px
+  full: '999px'
+};
+var borderWidth = {
+  s: '1px',
+  m: '2px',
+  l: '4px',
+  xl: '6px',
+  '2xl': '8px',
+  '3xl': '12px',
+  '4xl': '16px',
+  '5xl': '20px'
+};
+var effects = {
+  // E0 - Elevation (Selected State)
+  elevation: {
+    border: '1px solid var(--color-mw-primary-500)',
+    shadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+  },
+  // E1 - Default/Flat (no effect)
+  "default": {
+    border: 'none',
+    shadow: 'none'
+  },
+  // E2 - Sunken
+  sunken: {
+    shadow: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.1)'
+  },
+  // E3 - Glow
+  glow: {
+    shadow: '0 0 8px rgba(29, 101, 175, 0.3), 0 0 16px rgba(29, 101, 175, 0.2)'
+  }
 };
 var zIndex = {
   auto: 'auto',
@@ -48513,6 +48580,8 @@ var tokens = {
   shadows: shadows,
   breakpoints: breakpoints,
   borderRadius: borderRadius,
+  borderWidth: borderWidth,
+  effects: effects,
   zIndex: zIndex
 };
 // CSS Custom Properties
@@ -48580,9 +48649,34 @@ var cssVariables = {
     '--mw-shadow-md': shadows.md,
     '--mw-shadow-lg': shadows.lg,
     // Border Radius
-    '--mw-radius-sm': borderRadius.sm,
-    '--mw-radius-md': borderRadius.md,
-    '--mw-radius-lg': borderRadius.lg
+    '--mw-radius-none': borderRadius.none,
+    '--mw-radius-2xs': borderRadius['2xs'],
+    '--mw-radius-xs': borderRadius.xs,
+    '--mw-radius-s': borderRadius.s,
+    '--mw-radius-m': borderRadius.m,
+    '--mw-radius-l': borderRadius.l,
+    '--mw-radius-xl': borderRadius.xl,
+    '--mw-radius-2xl': borderRadius['2xl'],
+    '--mw-radius-3xl': borderRadius['3xl'],
+    '--mw-radius-4xl': borderRadius['4xl'],
+    '--mw-radius-5xl': borderRadius['5xl'],
+    '--mw-radius-full': borderRadius.full,
+    // Border Width
+    '--mw-border-s': borderWidth.s,
+    '--mw-border-m': borderWidth.m,
+    '--mw-border-l': borderWidth.l,
+    '--mw-border-xl': borderWidth.xl,
+    '--mw-border-2xl': borderWidth['2xl'],
+    '--mw-border-3xl': borderWidth['3xl'],
+    '--mw-border-4xl': borderWidth['4xl'],
+    '--mw-border-5xl': borderWidth['5xl'],
+    // Effects
+    '--mw-effect-elevation-border': effects.elevation.border,
+    '--mw-effect-elevation-shadow': effects.elevation.shadow,
+    '--mw-effect-default-border': effects["default"].border,
+    '--mw-effect-default-shadow': effects["default"].shadow,
+    '--mw-effect-sunken-shadow': effects.sunken.shadow,
+    '--mw-effect-glow-shadow': effects.glow.shadow
   }
 };
 
@@ -51923,5 +52017,5 @@ function getShortcutCategory(shortcut) {
 // Version
 var version = '1.0.0';
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedTable, 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, 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$1 as Icon, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, 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, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, 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, breakpoints, cn, colors, cssVariables, debounce, 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, 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$1 as Icon, ImageCarousel, ImageThumbnail, InfoIcon, Input, Label, List, ListItem, Loading, MWBounceLoader, 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, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarCollapseToggle, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarNav, SidebarPanel, SidebarProvider, SidebarToggleButton, SidebarTrigger, 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