@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/README.md +429 -215
- package/dist/index.cjs +126 -58
- package/dist/index.d.cts +34 -3
- package/dist/index.d.ts +34 -3
- package/dist/index.js +125 -60
- package/dist/styles/index.css +2496 -2489
- package/package.json +118 -120
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
|
|
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
|
|
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
|
|
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(
|
|
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
|
-
|
|
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
|
|
1468
|
+
const centerY = r.top + r.height / 2;
|
|
1452
1469
|
const topY = r.top - 10;
|
|
1453
1470
|
const bottomY = r.bottom + 10;
|
|
1454
|
-
const
|
|
1455
|
-
const
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
placement:
|
|
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
|
-
"
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 };
|