@memelabui/ui 0.6.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -139,10 +139,12 @@ function matchModifiers(e, mods) {
139
139
  }
140
140
  function useHotkeys(bindings, options = {}) {
141
141
  const { enabled = true } = options;
142
+ const bindingsRef = React.useRef(bindings);
143
+ bindingsRef.current = bindings;
142
144
  React.useEffect(() => {
143
145
  if (!enabled) return;
144
146
  const onKeyDown = (e) => {
145
- for (const binding of bindings) {
147
+ for (const binding of bindingsRef.current) {
146
148
  if (e.key === binding.key && matchModifiers(e, binding.modifiers)) {
147
149
  binding.handler(e);
148
150
  }
@@ -150,7 +152,7 @@ function useHotkeys(bindings, options = {}) {
150
152
  };
151
153
  document.addEventListener("keydown", onKeyDown);
152
154
  return () => document.removeEventListener("keydown", onKeyDown);
153
- }, [enabled, ...bindings]);
155
+ }, [enabled]);
154
156
  }
155
157
  function useIntersectionObserver(options = {}) {
156
158
  const { root = null, rootMargin = "0px", threshold = 0, enabled = true } = options;
@@ -206,6 +208,30 @@ function useSharedNow(options = {}) {
206
208
  }, [interval, untilMs, enabled]);
207
209
  return now;
208
210
  }
211
+ var lockCount = 0;
212
+ var savedOverflow = "";
213
+ function lockScroll() {
214
+ if (typeof document === "undefined") return;
215
+ if (lockCount === 0) {
216
+ savedOverflow = document.body.style.overflow;
217
+ document.body.style.overflow = "hidden";
218
+ }
219
+ lockCount++;
220
+ }
221
+ function unlockScroll() {
222
+ if (typeof document === "undefined") return;
223
+ lockCount = Math.max(0, lockCount - 1);
224
+ if (lockCount === 0) {
225
+ document.body.style.overflow = savedOverflow;
226
+ }
227
+ }
228
+ function useScrollLock(active) {
229
+ React.useEffect(() => {
230
+ if (!active) return;
231
+ lockScroll();
232
+ return () => unlockScroll();
233
+ }, [active]);
234
+ }
209
235
 
210
236
  // src/tokens/colors.ts
211
237
  var colors = {
@@ -1236,33 +1262,27 @@ function TabPanel({ value, children, className }) {
1236
1262
  }
1237
1263
  );
1238
1264
  }
1239
- var Card = React.forwardRef(function Card2({ hoverable, variant = "surface", className, ...props }, ref) {
1265
+ var padClass = {
1266
+ none: "",
1267
+ sm: "p-3",
1268
+ md: "p-5",
1269
+ lg: "p-6"
1270
+ };
1271
+ var Card = React.forwardRef(function Card2({ hoverable, variant = "surface", padding = "md", className, ...props }, ref) {
1240
1272
  return /* @__PURE__ */ jsxRuntime.jsx(
1241
1273
  "div",
1242
1274
  {
1243
1275
  ref,
1244
1276
  ...props,
1245
- className: cn(variant === "glass" ? "glass" : "surface", hoverable && "surface-hover", className)
1277
+ className: cn(
1278
+ variant === "glass" ? "glass" : "surface",
1279
+ hoverable && "surface-hover",
1280
+ padClass[padding],
1281
+ className
1282
+ )
1246
1283
  }
1247
1284
  );
1248
1285
  });
1249
- var scrollLockCount = 0;
1250
- var savedOverflow = "";
1251
- function lockScroll() {
1252
- if (typeof document === "undefined") return;
1253
- if (scrollLockCount === 0) {
1254
- savedOverflow = document.body.style.overflow;
1255
- document.body.style.overflow = "hidden";
1256
- }
1257
- scrollLockCount++;
1258
- }
1259
- function unlockScroll() {
1260
- if (typeof document === "undefined") return;
1261
- scrollLockCount = Math.max(0, scrollLockCount - 1);
1262
- if (scrollLockCount === 0) {
1263
- document.body.style.overflow = savedOverflow;
1264
- }
1265
- }
1266
1286
  function Modal({
1267
1287
  isOpen,
1268
1288
  onClose,
@@ -1294,11 +1314,7 @@ function Modal({
1294
1314
  if (lastActive?.isConnected) focusSafely(lastActive);
1295
1315
  };
1296
1316
  }, [isOpen]);
1297
- React.useEffect(() => {
1298
- if (!isOpen) return;
1299
- lockScroll();
1300
- return () => unlockScroll();
1301
- }, [isOpen]);
1317
+ useScrollLock(isOpen);
1302
1318
  if (!isOpen) return null;
1303
1319
  return /* @__PURE__ */ jsxRuntime.jsx(
1304
1320
  "div",
@@ -1447,17 +1463,32 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
1447
1463
  const el = anchorRef.current;
1448
1464
  if (!el) return;
1449
1465
  const r = el.getBoundingClientRect();
1466
+ const vw = window.innerWidth;
1450
1467
  const centerX = r.left + r.width / 2;
1451
- const preferTop = placement === "top";
1468
+ const centerY = r.top + r.height / 2;
1452
1469
  const topY = r.top - 10;
1453
1470
  const bottomY = r.bottom + 10;
1454
- const canTop = topY > 8;
1455
- const effPlacement = preferTop ? canTop ? "top" : "bottom" : "bottom";
1456
- setPos({
1457
- left: Math.round(centerX),
1458
- top: Math.round(effPlacement === "top" ? topY : bottomY),
1459
- placement: effPlacement
1460
- });
1471
+ const leftX = r.left - 10;
1472
+ const rightX = r.right + 10;
1473
+ let effPlacement = placement;
1474
+ if (placement === "top" || placement === "bottom") {
1475
+ const canTop = topY > 8;
1476
+ effPlacement = placement === "top" ? canTop ? "top" : "bottom" : "bottom";
1477
+ setPos({
1478
+ left: Math.round(centerX),
1479
+ top: Math.round(effPlacement === "top" ? topY : bottomY),
1480
+ placement: effPlacement
1481
+ });
1482
+ } else {
1483
+ const canLeft = leftX > 8;
1484
+ const canRight = rightX < vw - 8;
1485
+ effPlacement = placement === "left" ? canLeft ? "left" : "right" : canRight ? "right" : "left";
1486
+ setPos({
1487
+ left: Math.round(effPlacement === "left" ? leftX : rightX),
1488
+ top: Math.round(centerY),
1489
+ placement: effPlacement
1490
+ });
1491
+ }
1461
1492
  }, [placement]);
1462
1493
  const scheduleOpen = React.useCallback(() => {
1463
1494
  clearTimer();
@@ -1531,7 +1562,7 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
1531
1562
  style: pos ? {
1532
1563
  left: pos.left,
1533
1564
  top: pos.top,
1534
- transform: pos.placement === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0%)"
1565
+ transform: pos.placement === "top" ? "translate(-50%, -100%)" : pos.placement === "bottom" ? "translate(-50%, 0%)" : pos.placement === "left" ? "translate(-100%, -50%)" : "translate(0%, -50%)"
1535
1566
  } : { left: 0, top: 0, transform: "translate(-9999px, -9999px)" },
1536
1567
  children: content
1537
1568
  }
@@ -2074,7 +2105,7 @@ function StatCard({ value, label, icon, trend, className }) {
2074
2105
  "div",
2075
2106
  {
2076
2107
  className: cn(
2077
- "bg-white/5 ring-1 ring-white/10 rounded-xl p-4 flex items-start gap-3",
2108
+ "glass rounded-xl p-4 flex items-start gap-3",
2078
2109
  className
2079
2110
  ),
2080
2111
  children: [
@@ -3807,23 +3838,6 @@ function Popover({
3807
3838
  ) : null
3808
3839
  ] });
3809
3840
  }
3810
- var scrollLockCount2 = 0;
3811
- var savedOverflow2 = "";
3812
- function lockScroll2() {
3813
- if (typeof document === "undefined") return;
3814
- if (scrollLockCount2 === 0) {
3815
- savedOverflow2 = document.body.style.overflow;
3816
- document.body.style.overflow = "hidden";
3817
- }
3818
- scrollLockCount2++;
3819
- }
3820
- function unlockScroll2() {
3821
- if (typeof document === "undefined") return;
3822
- scrollLockCount2 = Math.max(0, scrollLockCount2 - 1);
3823
- if (scrollLockCount2 === 0) {
3824
- document.body.style.overflow = savedOverflow2;
3825
- }
3826
- }
3827
3841
  var sizeClass8 = {
3828
3842
  left: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
3829
3843
  right: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
@@ -3873,11 +3887,7 @@ function Drawer({
3873
3887
  if (lastActive?.isConnected) focusSafely(lastActive);
3874
3888
  };
3875
3889
  }, [isOpen]);
3876
- React.useEffect(() => {
3877
- if (!isOpen) return;
3878
- lockScroll2();
3879
- return () => unlockScroll2();
3880
- }, [isOpen]);
3890
+ useScrollLock(isOpen);
3881
3891
  if (!isOpen) return null;
3882
3892
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", role: "presentation", children: [
3883
3893
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4260,6 +4270,61 @@ function VisuallyHidden({ children, as: Tag = "span", style, ...props }) {
4260
4270
  }
4261
4271
  );
4262
4272
  }
4273
+ var ErrorBoundary = class extends React.Component {
4274
+ constructor() {
4275
+ super(...arguments);
4276
+ this.state = { error: null };
4277
+ this.reset = () => {
4278
+ this.setState({ error: null });
4279
+ };
4280
+ }
4281
+ static getDerivedStateFromError(error) {
4282
+ return { error };
4283
+ }
4284
+ componentDidCatch(error, errorInfo) {
4285
+ this.props.onError?.(error, errorInfo);
4286
+ }
4287
+ render() {
4288
+ const { error } = this.state;
4289
+ if (!error) return this.props.children;
4290
+ const { fallback } = this.props;
4291
+ if (typeof fallback === "function") {
4292
+ return fallback(error, this.reset);
4293
+ }
4294
+ if (fallback !== void 0) {
4295
+ return fallback;
4296
+ }
4297
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cn("glass rounded-xl p-6 text-center"), children: [
4298
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white mb-2", children: "Something went wrong" }),
4299
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60 mb-4", children: error.message }),
4300
+ /* @__PURE__ */ jsxRuntime.jsx(
4301
+ "button",
4302
+ {
4303
+ type: "button",
4304
+ onClick: this.reset,
4305
+ className: "inline-flex items-center justify-center gap-2 rounded-xl font-semibold leading-none px-3.5 py-2.5 text-sm bg-gradient-to-r from-violet-600 to-purple-600 text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02] transition-[transform,background-color,box-shadow,opacity] active:translate-y-[0.5px]",
4306
+ children: "Try again"
4307
+ }
4308
+ )
4309
+ ] });
4310
+ }
4311
+ };
4312
+ function LoadingScreen({ message, size = "lg", className }) {
4313
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4314
+ "div",
4315
+ {
4316
+ role: "status",
4317
+ className: cn(
4318
+ "flex flex-col items-center justify-center min-h-screen bg-ml-bg gap-4",
4319
+ className
4320
+ ),
4321
+ children: [
4322
+ /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
4323
+ message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: message })
4324
+ ]
4325
+ }
4326
+ );
4327
+ }
4263
4328
 
4264
4329
  exports.ActiveFilterPills = ActiveFilterPills;
4265
4330
  exports.Alert = Alert;
@@ -4286,10 +4351,12 @@ exports.DropdownMenu = DropdownMenu;
4286
4351
  exports.DropdownSeparator = DropdownSeparator;
4287
4352
  exports.DropdownTrigger = DropdownTrigger;
4288
4353
  exports.EmptyState = EmptyState;
4354
+ exports.ErrorBoundary = ErrorBoundary;
4289
4355
  exports.FormField = FormField;
4290
4356
  exports.Heading = Heading;
4291
4357
  exports.IconButton = IconButton;
4292
4358
  exports.Input = Input;
4359
+ exports.LoadingScreen = LoadingScreen;
4293
4360
  exports.Modal = Modal;
4294
4361
  exports.MutationOverlay = MutationOverlay;
4295
4362
  exports.Navbar = Navbar;
@@ -4342,5 +4409,6 @@ exports.useDisclosure = useDisclosure;
4342
4409
  exports.useHotkeys = useHotkeys;
4343
4410
  exports.useIntersectionObserver = useIntersectionObserver;
4344
4411
  exports.useMediaQuery = useMediaQuery;
4412
+ exports.useScrollLock = useScrollLock;
4345
4413
  exports.useSharedNow = useSharedNow;
4346
4414
  exports.useToast = useToast;
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { MemelabColors, colors } from './tokens/index.cjs';
2
2
  import * as react from 'react';
3
- import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType } from 'react';
3
+ import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType, Component, ErrorInfo } from 'react';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
 
6
6
  type ClassValue = string | number | null | undefined | boolean | Record<string, boolean | null | undefined> | ClassValue[];
@@ -95,6 +95,9 @@ type UseSharedNowOptions = {
95
95
  */
96
96
  declare function useSharedNow(options?: UseSharedNowOptions): number;
97
97
 
98
+ /** Ref-counted body scroll lock. Safe for nested overlays (Modal + Drawer). */
99
+ declare function useScrollLock(active: boolean): void;
100
+
98
101
  type Size = 'sm' | 'md' | 'lg';
99
102
 
100
103
  type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -330,14 +333,19 @@ declare function Tab({ value, disabled, children, className }: TabProps): react_
330
333
  declare function TabPanel({ value, children, className }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
331
334
 
332
335
  type CardVariant = 'surface' | 'glass';
336
+ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
333
337
  type CardProps = HTMLAttributes<HTMLDivElement> & {
334
338
  hoverable?: boolean;
335
339
  variant?: CardVariant;
340
+ /** Card inner padding. Defaults to `'md'` (20 px). */
341
+ padding?: CardPadding;
336
342
  children: ReactNode;
337
343
  };
338
344
  declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
339
345
  hoverable?: boolean;
340
346
  variant?: CardVariant;
347
+ /** Card inner padding. Defaults to `'md'` (20 px). */
348
+ padding?: CardPadding;
341
349
  children: ReactNode;
342
350
  } & react.RefAttributes<HTMLDivElement>>;
343
351
 
@@ -371,7 +379,7 @@ type ConfirmDialogProps = {
371
379
  };
372
380
  declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmText, cancelText, loadingText, variant, isLoading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
373
381
 
374
- type TooltipPlacement = 'top' | 'bottom';
382
+ type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
375
383
  type TooltipProps = {
376
384
  content: ReactNode;
377
385
  delayMs?: number;
@@ -914,4 +922,27 @@ type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
914
922
  */
915
923
  declare function VisuallyHidden({ children, as: Tag, style, ...props }: VisuallyHiddenProps): react_jsx_runtime.JSX.Element;
916
924
 
917
- export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };
925
+ type ErrorBoundaryProps = {
926
+ children: ReactNode;
927
+ fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
928
+ onError?: (error: Error, errorInfo: ErrorInfo) => void;
929
+ };
930
+ type State = {
931
+ error: Error | null;
932
+ };
933
+ declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
934
+ state: State;
935
+ static getDerivedStateFromError(error: Error): State;
936
+ componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
937
+ private reset;
938
+ render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
939
+ }
940
+
941
+ type LoadingScreenProps = {
942
+ message?: string;
943
+ size?: SpinnerSize;
944
+ className?: string;
945
+ };
946
+ declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
947
+
948
+ export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { MemelabColors, colors } from './tokens/index.js';
2
2
  import * as react from 'react';
3
- import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType } from 'react';
3
+ import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType, Component, ErrorInfo } from 'react';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
 
6
6
  type ClassValue = string | number | null | undefined | boolean | Record<string, boolean | null | undefined> | ClassValue[];
@@ -95,6 +95,9 @@ type UseSharedNowOptions = {
95
95
  */
96
96
  declare function useSharedNow(options?: UseSharedNowOptions): number;
97
97
 
98
+ /** Ref-counted body scroll lock. Safe for nested overlays (Modal + Drawer). */
99
+ declare function useScrollLock(active: boolean): void;
100
+
98
101
  type Size = 'sm' | 'md' | 'lg';
99
102
 
100
103
  type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -330,14 +333,19 @@ declare function Tab({ value, disabled, children, className }: TabProps): react_
330
333
  declare function TabPanel({ value, children, className }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
331
334
 
332
335
  type CardVariant = 'surface' | 'glass';
336
+ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
333
337
  type CardProps = HTMLAttributes<HTMLDivElement> & {
334
338
  hoverable?: boolean;
335
339
  variant?: CardVariant;
340
+ /** Card inner padding. Defaults to `'md'` (20 px). */
341
+ padding?: CardPadding;
336
342
  children: ReactNode;
337
343
  };
338
344
  declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
339
345
  hoverable?: boolean;
340
346
  variant?: CardVariant;
347
+ /** Card inner padding. Defaults to `'md'` (20 px). */
348
+ padding?: CardPadding;
341
349
  children: ReactNode;
342
350
  } & react.RefAttributes<HTMLDivElement>>;
343
351
 
@@ -371,7 +379,7 @@ type ConfirmDialogProps = {
371
379
  };
372
380
  declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmText, cancelText, loadingText, variant, isLoading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
373
381
 
374
- type TooltipPlacement = 'top' | 'bottom';
382
+ type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
375
383
  type TooltipProps = {
376
384
  content: ReactNode;
377
385
  delayMs?: number;
@@ -914,4 +922,27 @@ type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
914
922
  */
915
923
  declare function VisuallyHidden({ children, as: Tag, style, ...props }: VisuallyHiddenProps): react_jsx_runtime.JSX.Element;
916
924
 
917
- export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };
925
+ type ErrorBoundaryProps = {
926
+ children: ReactNode;
927
+ fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
928
+ onError?: (error: Error, errorInfo: ErrorInfo) => void;
929
+ };
930
+ type State = {
931
+ error: Error | null;
932
+ };
933
+ declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
934
+ state: State;
935
+ static getDerivedStateFromError(error: Error): State;
936
+ componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
937
+ private reset;
938
+ render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
939
+ }
940
+
941
+ type LoadingScreenProps = {
942
+ message?: string;
943
+ size?: SpinnerSize;
944
+ className?: string;
945
+ };
946
+ declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
947
+
948
+ export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };