@rubenpazch/drawer 1.0.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 ADDED
@@ -0,0 +1,3 @@
1
+ # Drawer
2
+
3
+ Generated component package.
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ export type DrawerPosition = "left" | "right" | "top" | "bottom";
3
+ export type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
4
+ export type DrawerAlign = "left" | "center" | "right" | "space-between";
5
+ export interface DrawerProps {
6
+ /** Whether the drawer is open */
7
+ isOpen: boolean;
8
+ /** Function to close the drawer */
9
+ onClose: () => void;
10
+ /** Position from which the drawer slides in */
11
+ position?: DrawerPosition;
12
+ /** Size of the drawer */
13
+ size?: DrawerSize;
14
+ /** Title displayed in the drawer header */
15
+ title?: string;
16
+ /** Content to render in the drawer */
17
+ children: React.ReactNode;
18
+ /** Whether to show overlay backdrop */
19
+ showOverlay?: boolean;
20
+ /** Whether clicking overlay closes the drawer */
21
+ closeOnOverlayClick?: boolean;
22
+ /** Whether pressing Escape closes the drawer */
23
+ closeOnEscape?: boolean;
24
+ /** Custom className for the drawer content */
25
+ className?: string;
26
+ /** Footer content (typically action buttons) */
27
+ footer?: React.ReactNode;
28
+ /** Header alignment (how to position title and close button) */
29
+ headerAlign?: DrawerAlign;
30
+ /** Footer alignment */
31
+ footerAlign?: DrawerAlign;
32
+ /** Whether the content (header, body, footer) should be contained in a max-width container */
33
+ contentContained?: boolean;
34
+ }
35
+ declare const Drawer: React.FC<DrawerProps>;
36
+ export default Drawer;
37
+ //# sourceMappingURL=Drawer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC;AAExE,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gEAAgE;IAChE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+MjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,542 @@
1
+ 'use strict';
2
+
3
+ var require$$0 = require('react');
4
+ var icons = require('@rubenpazch/icons');
5
+
6
+ var jsxRuntime = {exports: {}};
7
+
8
+ var reactJsxRuntime_production = {};
9
+
10
+ /**
11
+ * @license React
12
+ * react-jsx-runtime.production.js
13
+ *
14
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
15
+ *
16
+ * This source code is licensed under the MIT license found in the
17
+ * LICENSE file in the root directory of this source tree.
18
+ */
19
+
20
+ var hasRequiredReactJsxRuntime_production;
21
+
22
+ function requireReactJsxRuntime_production () {
23
+ if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
24
+ hasRequiredReactJsxRuntime_production = 1;
25
+ var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
26
+ REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
27
+ function jsxProd(type, config, maybeKey) {
28
+ var key = null;
29
+ void 0 !== maybeKey && (key = "" + maybeKey);
30
+ void 0 !== config.key && (key = "" + config.key);
31
+ if ("key" in config) {
32
+ maybeKey = {};
33
+ for (var propName in config)
34
+ "key" !== propName && (maybeKey[propName] = config[propName]);
35
+ } else maybeKey = config;
36
+ config = maybeKey.ref;
37
+ return {
38
+ $$typeof: REACT_ELEMENT_TYPE,
39
+ type: type,
40
+ key: key,
41
+ ref: void 0 !== config ? config : null,
42
+ props: maybeKey
43
+ };
44
+ }
45
+ reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
46
+ reactJsxRuntime_production.jsx = jsxProd;
47
+ reactJsxRuntime_production.jsxs = jsxProd;
48
+ return reactJsxRuntime_production;
49
+ }
50
+
51
+ var reactJsxRuntime_development = {};
52
+
53
+ /**
54
+ * @license React
55
+ * react-jsx-runtime.development.js
56
+ *
57
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
58
+ *
59
+ * This source code is licensed under the MIT license found in the
60
+ * LICENSE file in the root directory of this source tree.
61
+ */
62
+
63
+ var hasRequiredReactJsxRuntime_development;
64
+
65
+ function requireReactJsxRuntime_development () {
66
+ if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
67
+ hasRequiredReactJsxRuntime_development = 1;
68
+ "production" !== process.env.NODE_ENV &&
69
+ (function () {
70
+ function getComponentNameFromType(type) {
71
+ if (null == type) return null;
72
+ if ("function" === typeof type)
73
+ return type.$$typeof === REACT_CLIENT_REFERENCE
74
+ ? null
75
+ : type.displayName || type.name || null;
76
+ if ("string" === typeof type) return type;
77
+ switch (type) {
78
+ case REACT_FRAGMENT_TYPE:
79
+ return "Fragment";
80
+ case REACT_PROFILER_TYPE:
81
+ return "Profiler";
82
+ case REACT_STRICT_MODE_TYPE:
83
+ return "StrictMode";
84
+ case REACT_SUSPENSE_TYPE:
85
+ return "Suspense";
86
+ case REACT_SUSPENSE_LIST_TYPE:
87
+ return "SuspenseList";
88
+ case REACT_ACTIVITY_TYPE:
89
+ return "Activity";
90
+ }
91
+ if ("object" === typeof type)
92
+ switch (
93
+ ("number" === typeof type.tag &&
94
+ console.error(
95
+ "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
96
+ ),
97
+ type.$$typeof)
98
+ ) {
99
+ case REACT_PORTAL_TYPE:
100
+ return "Portal";
101
+ case REACT_CONTEXT_TYPE:
102
+ return type.displayName || "Context";
103
+ case REACT_CONSUMER_TYPE:
104
+ return (type._context.displayName || "Context") + ".Consumer";
105
+ case REACT_FORWARD_REF_TYPE:
106
+ var innerType = type.render;
107
+ type = type.displayName;
108
+ type ||
109
+ ((type = innerType.displayName || innerType.name || ""),
110
+ (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
111
+ return type;
112
+ case REACT_MEMO_TYPE:
113
+ return (
114
+ (innerType = type.displayName || null),
115
+ null !== innerType
116
+ ? innerType
117
+ : getComponentNameFromType(type.type) || "Memo"
118
+ );
119
+ case REACT_LAZY_TYPE:
120
+ innerType = type._payload;
121
+ type = type._init;
122
+ try {
123
+ return getComponentNameFromType(type(innerType));
124
+ } catch (x) {}
125
+ }
126
+ return null;
127
+ }
128
+ function testStringCoercion(value) {
129
+ return "" + value;
130
+ }
131
+ function checkKeyStringCoercion(value) {
132
+ try {
133
+ testStringCoercion(value);
134
+ var JSCompiler_inline_result = !1;
135
+ } catch (e) {
136
+ JSCompiler_inline_result = true;
137
+ }
138
+ if (JSCompiler_inline_result) {
139
+ JSCompiler_inline_result = console;
140
+ var JSCompiler_temp_const = JSCompiler_inline_result.error;
141
+ var JSCompiler_inline_result$jscomp$0 =
142
+ ("function" === typeof Symbol &&
143
+ Symbol.toStringTag &&
144
+ value[Symbol.toStringTag]) ||
145
+ value.constructor.name ||
146
+ "Object";
147
+ JSCompiler_temp_const.call(
148
+ JSCompiler_inline_result,
149
+ "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
150
+ JSCompiler_inline_result$jscomp$0
151
+ );
152
+ return testStringCoercion(value);
153
+ }
154
+ }
155
+ function getTaskName(type) {
156
+ if (type === REACT_FRAGMENT_TYPE) return "<>";
157
+ if (
158
+ "object" === typeof type &&
159
+ null !== type &&
160
+ type.$$typeof === REACT_LAZY_TYPE
161
+ )
162
+ return "<...>";
163
+ try {
164
+ var name = getComponentNameFromType(type);
165
+ return name ? "<" + name + ">" : "<...>";
166
+ } catch (x) {
167
+ return "<...>";
168
+ }
169
+ }
170
+ function getOwner() {
171
+ var dispatcher = ReactSharedInternals.A;
172
+ return null === dispatcher ? null : dispatcher.getOwner();
173
+ }
174
+ function UnknownOwner() {
175
+ return Error("react-stack-top-frame");
176
+ }
177
+ function hasValidKey(config) {
178
+ if (hasOwnProperty.call(config, "key")) {
179
+ var getter = Object.getOwnPropertyDescriptor(config, "key").get;
180
+ if (getter && getter.isReactWarning) return false;
181
+ }
182
+ return void 0 !== config.key;
183
+ }
184
+ function defineKeyPropWarningGetter(props, displayName) {
185
+ function warnAboutAccessingKey() {
186
+ specialPropKeyWarningShown ||
187
+ ((specialPropKeyWarningShown = true),
188
+ console.error(
189
+ "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
190
+ displayName
191
+ ));
192
+ }
193
+ warnAboutAccessingKey.isReactWarning = true;
194
+ Object.defineProperty(props, "key", {
195
+ get: warnAboutAccessingKey,
196
+ configurable: true
197
+ });
198
+ }
199
+ function elementRefGetterWithDeprecationWarning() {
200
+ var componentName = getComponentNameFromType(this.type);
201
+ didWarnAboutElementRef[componentName] ||
202
+ ((didWarnAboutElementRef[componentName] = true),
203
+ console.error(
204
+ "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
205
+ ));
206
+ componentName = this.props.ref;
207
+ return void 0 !== componentName ? componentName : null;
208
+ }
209
+ function ReactElement(type, key, props, owner, debugStack, debugTask) {
210
+ var refProp = props.ref;
211
+ type = {
212
+ $$typeof: REACT_ELEMENT_TYPE,
213
+ type: type,
214
+ key: key,
215
+ props: props,
216
+ _owner: owner
217
+ };
218
+ null !== (void 0 !== refProp ? refProp : null)
219
+ ? Object.defineProperty(type, "ref", {
220
+ enumerable: false,
221
+ get: elementRefGetterWithDeprecationWarning
222
+ })
223
+ : Object.defineProperty(type, "ref", { enumerable: false, value: null });
224
+ type._store = {};
225
+ Object.defineProperty(type._store, "validated", {
226
+ configurable: false,
227
+ enumerable: false,
228
+ writable: true,
229
+ value: 0
230
+ });
231
+ Object.defineProperty(type, "_debugInfo", {
232
+ configurable: false,
233
+ enumerable: false,
234
+ writable: true,
235
+ value: null
236
+ });
237
+ Object.defineProperty(type, "_debugStack", {
238
+ configurable: false,
239
+ enumerable: false,
240
+ writable: true,
241
+ value: debugStack
242
+ });
243
+ Object.defineProperty(type, "_debugTask", {
244
+ configurable: false,
245
+ enumerable: false,
246
+ writable: true,
247
+ value: debugTask
248
+ });
249
+ Object.freeze && (Object.freeze(type.props), Object.freeze(type));
250
+ return type;
251
+ }
252
+ function jsxDEVImpl(
253
+ type,
254
+ config,
255
+ maybeKey,
256
+ isStaticChildren,
257
+ debugStack,
258
+ debugTask
259
+ ) {
260
+ var children = config.children;
261
+ if (void 0 !== children)
262
+ if (isStaticChildren)
263
+ if (isArrayImpl(children)) {
264
+ for (
265
+ isStaticChildren = 0;
266
+ isStaticChildren < children.length;
267
+ isStaticChildren++
268
+ )
269
+ validateChildKeys(children[isStaticChildren]);
270
+ Object.freeze && Object.freeze(children);
271
+ } else
272
+ console.error(
273
+ "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
274
+ );
275
+ else validateChildKeys(children);
276
+ if (hasOwnProperty.call(config, "key")) {
277
+ children = getComponentNameFromType(type);
278
+ var keys = Object.keys(config).filter(function (k) {
279
+ return "key" !== k;
280
+ });
281
+ isStaticChildren =
282
+ 0 < keys.length
283
+ ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
284
+ : "{key: someKey}";
285
+ didWarnAboutKeySpread[children + isStaticChildren] ||
286
+ ((keys =
287
+ 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
288
+ console.error(
289
+ 'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
290
+ isStaticChildren,
291
+ children,
292
+ keys,
293
+ children
294
+ ),
295
+ (didWarnAboutKeySpread[children + isStaticChildren] = true));
296
+ }
297
+ children = null;
298
+ void 0 !== maybeKey &&
299
+ (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
300
+ hasValidKey(config) &&
301
+ (checkKeyStringCoercion(config.key), (children = "" + config.key));
302
+ if ("key" in config) {
303
+ maybeKey = {};
304
+ for (var propName in config)
305
+ "key" !== propName && (maybeKey[propName] = config[propName]);
306
+ } else maybeKey = config;
307
+ children &&
308
+ defineKeyPropWarningGetter(
309
+ maybeKey,
310
+ "function" === typeof type
311
+ ? type.displayName || type.name || "Unknown"
312
+ : type
313
+ );
314
+ return ReactElement(
315
+ type,
316
+ children,
317
+ maybeKey,
318
+ getOwner(),
319
+ debugStack,
320
+ debugTask
321
+ );
322
+ }
323
+ function validateChildKeys(node) {
324
+ isValidElement(node)
325
+ ? node._store && (node._store.validated = 1)
326
+ : "object" === typeof node &&
327
+ null !== node &&
328
+ node.$$typeof === REACT_LAZY_TYPE &&
329
+ ("fulfilled" === node._payload.status
330
+ ? isValidElement(node._payload.value) &&
331
+ node._payload.value._store &&
332
+ (node._payload.value._store.validated = 1)
333
+ : node._store && (node._store.validated = 1));
334
+ }
335
+ function isValidElement(object) {
336
+ return (
337
+ "object" === typeof object &&
338
+ null !== object &&
339
+ object.$$typeof === REACT_ELEMENT_TYPE
340
+ );
341
+ }
342
+ var React = require$$0,
343
+ REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
344
+ REACT_PORTAL_TYPE = Symbol.for("react.portal"),
345
+ REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
346
+ REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
347
+ REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
348
+ REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
349
+ REACT_CONTEXT_TYPE = Symbol.for("react.context"),
350
+ REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
351
+ REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
352
+ REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
353
+ REACT_MEMO_TYPE = Symbol.for("react.memo"),
354
+ REACT_LAZY_TYPE = Symbol.for("react.lazy"),
355
+ REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
356
+ REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
357
+ ReactSharedInternals =
358
+ React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
359
+ hasOwnProperty = Object.prototype.hasOwnProperty,
360
+ isArrayImpl = Array.isArray,
361
+ createTask = console.createTask
362
+ ? console.createTask
363
+ : function () {
364
+ return null;
365
+ };
366
+ React = {
367
+ react_stack_bottom_frame: function (callStackForError) {
368
+ return callStackForError();
369
+ }
370
+ };
371
+ var specialPropKeyWarningShown;
372
+ var didWarnAboutElementRef = {};
373
+ var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
374
+ React,
375
+ UnknownOwner
376
+ )();
377
+ var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
378
+ var didWarnAboutKeySpread = {};
379
+ reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
380
+ reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
381
+ var trackActualOwner =
382
+ 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
383
+ return jsxDEVImpl(
384
+ type,
385
+ config,
386
+ maybeKey,
387
+ false,
388
+ trackActualOwner
389
+ ? Error("react-stack-top-frame")
390
+ : unknownOwnerDebugStack,
391
+ trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
392
+ );
393
+ };
394
+ reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
395
+ var trackActualOwner =
396
+ 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
397
+ return jsxDEVImpl(
398
+ type,
399
+ config,
400
+ maybeKey,
401
+ true,
402
+ trackActualOwner
403
+ ? Error("react-stack-top-frame")
404
+ : unknownOwnerDebugStack,
405
+ trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
406
+ );
407
+ };
408
+ })();
409
+ return reactJsxRuntime_development;
410
+ }
411
+
412
+ var hasRequiredJsxRuntime;
413
+
414
+ function requireJsxRuntime () {
415
+ if (hasRequiredJsxRuntime) return jsxRuntime.exports;
416
+ hasRequiredJsxRuntime = 1;
417
+
418
+ if (process.env.NODE_ENV === 'production') {
419
+ jsxRuntime.exports = requireReactJsxRuntime_production();
420
+ } else {
421
+ jsxRuntime.exports = requireReactJsxRuntime_development();
422
+ }
423
+ return jsxRuntime.exports;
424
+ }
425
+
426
+ var jsxRuntimeExports = requireJsxRuntime();
427
+
428
+ const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, children, showOverlay = true, closeOnOverlayClick = true, closeOnEscape = true, className = "", footer, headerAlign = "space-between", footerAlign = "right", contentContained = false, }) => {
429
+ const drawerRef = require$$0.useRef(null);
430
+ const [isAnimating, setIsAnimating] = require$$0.useState(false);
431
+ const [shouldRender, setShouldRender] = require$$0.useState(isOpen);
432
+ // Handle mount/unmount with animation
433
+ require$$0.useEffect(() => {
434
+ if (isOpen) {
435
+ setShouldRender(true);
436
+ // Small delay to trigger animation
437
+ requestAnimationFrame(() => {
438
+ requestAnimationFrame(() => {
439
+ setIsAnimating(true);
440
+ });
441
+ });
442
+ }
443
+ else {
444
+ setIsAnimating(false);
445
+ // Wait for animation to complete before unmounting
446
+ const timer = setTimeout(() => {
447
+ setShouldRender(false);
448
+ }, 300); // Match animation duration
449
+ return () => clearTimeout(timer);
450
+ }
451
+ }, [isOpen]);
452
+ const getPositionClasses = () => {
453
+ const base = "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out";
454
+ const sizes = {
455
+ left: {
456
+ sm: "w-64",
457
+ md: "w-80",
458
+ lg: "w-96",
459
+ xl: "w-[32rem]",
460
+ full: "w-full",
461
+ },
462
+ right: {
463
+ sm: "w-64",
464
+ md: "w-80",
465
+ lg: "w-96",
466
+ xl: "w-[32rem]",
467
+ full: "w-full",
468
+ },
469
+ top: {
470
+ sm: "h-64",
471
+ md: "h-80",
472
+ lg: "h-96",
473
+ xl: "h-[32rem]",
474
+ full: "h-full",
475
+ },
476
+ bottom: {
477
+ sm: "h-64",
478
+ md: "h-80",
479
+ lg: "h-96",
480
+ xl: "h-[32rem]",
481
+ full: "h-full",
482
+ },
483
+ };
484
+ const positions = {
485
+ left: "left-0 top-0 h-full",
486
+ right: "right-0 top-0 h-full",
487
+ top: "top-0 left-0 w-full",
488
+ bottom: "bottom-0 left-0 w-full",
489
+ };
490
+ const transforms = {
491
+ left: isAnimating ? "translate-x-0" : "-translate-x-full",
492
+ right: isAnimating ? "translate-x-0" : "translate-x-full",
493
+ top: isAnimating ? "translate-y-0" : "-translate-y-full",
494
+ bottom: isAnimating ? "translate-y-0" : "translate-y-full",
495
+ };
496
+ return `${base} ${positions[position]} ${sizes[position][size]} ${transforms[position]} ${className}`;
497
+ };
498
+ require$$0.useEffect(() => {
499
+ if (!isOpen || !closeOnEscape)
500
+ return;
501
+ const handleEscape = (e) => {
502
+ if (e.key === "Escape") {
503
+ onClose();
504
+ }
505
+ };
506
+ document.addEventListener("keydown", handleEscape);
507
+ return () => document.removeEventListener("keydown", handleEscape);
508
+ }, [isOpen, closeOnEscape, onClose]);
509
+ require$$0.useEffect(() => {
510
+ if (isOpen) {
511
+ document.body.style.overflow = "hidden";
512
+ }
513
+ else {
514
+ document.body.style.overflow = "";
515
+ }
516
+ return () => {
517
+ document.body.style.overflow = "";
518
+ };
519
+ }, [isOpen]);
520
+ require$$0.useEffect(() => {
521
+ if (isAnimating && drawerRef.current) {
522
+ drawerRef.current.focus();
523
+ }
524
+ }, [isAnimating]);
525
+ const handleOverlayClick = () => {
526
+ if (closeOnOverlayClick) {
527
+ onClose();
528
+ }
529
+ };
530
+ // Don't render if not open and animation is complete
531
+ if (!shouldRender)
532
+ return null;
533
+ const footerAlignClass = {
534
+ left: "justify-start",
535
+ center: "justify-center",
536
+ right: "justify-end",
537
+ "space-between": "justify-between",
538
+ }[footerAlign];
539
+ return (jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: `fixed inset-0 bg-black/50 transition-opacity duration-300 ${isAnimating ? "opacity-100" : "opacity-0"}`, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: `${getPositionClasses()} flex flex-col`, children: [title && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-b border-gray-200 ${headerAlign === "center" ? "text-center" : ""}`, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: "text-lg font-semibold text-gray-900 flex-1", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors", "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(icons.CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto", children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-t border-gray-200 bg-gray-50 flex ${footerAlignClass}`, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto w-full", children: footer })) : (footer) }))] })] }));
540
+ };
541
+
542
+ module.exports = Drawer;
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+
3
+ type DrawerPosition = "left" | "right" | "top" | "bottom";
4
+ type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
5
+ type DrawerAlign = "left" | "center" | "right" | "space-between";
6
+ interface DrawerProps {
7
+ /** Whether the drawer is open */
8
+ isOpen: boolean;
9
+ /** Function to close the drawer */
10
+ onClose: () => void;
11
+ /** Position from which the drawer slides in */
12
+ position?: DrawerPosition;
13
+ /** Size of the drawer */
14
+ size?: DrawerSize;
15
+ /** Title displayed in the drawer header */
16
+ title?: string;
17
+ /** Content to render in the drawer */
18
+ children: React.ReactNode;
19
+ /** Whether to show overlay backdrop */
20
+ showOverlay?: boolean;
21
+ /** Whether clicking overlay closes the drawer */
22
+ closeOnOverlayClick?: boolean;
23
+ /** Whether pressing Escape closes the drawer */
24
+ closeOnEscape?: boolean;
25
+ /** Custom className for the drawer content */
26
+ className?: string;
27
+ /** Footer content (typically action buttons) */
28
+ footer?: React.ReactNode;
29
+ /** Header alignment (how to position title and close button) */
30
+ headerAlign?: DrawerAlign;
31
+ /** Footer alignment */
32
+ footerAlign?: DrawerAlign;
33
+ /** Whether the content (header, body, footer) should be contained in a max-width container */
34
+ contentContained?: boolean;
35
+ }
36
+ declare const Drawer: React.FC<DrawerProps>;
37
+
38
+ export { Drawer as default };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
@@ -0,0 +1,540 @@
1
+ import require$$0, { useRef, useState, useEffect } from 'react';
2
+ import { CloseIcon } from '@rubenpazch/icons';
3
+
4
+ var jsxRuntime = {exports: {}};
5
+
6
+ var reactJsxRuntime_production = {};
7
+
8
+ /**
9
+ * @license React
10
+ * react-jsx-runtime.production.js
11
+ *
12
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
13
+ *
14
+ * This source code is licensed under the MIT license found in the
15
+ * LICENSE file in the root directory of this source tree.
16
+ */
17
+
18
+ var hasRequiredReactJsxRuntime_production;
19
+
20
+ function requireReactJsxRuntime_production () {
21
+ if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
22
+ hasRequiredReactJsxRuntime_production = 1;
23
+ var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
24
+ REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
25
+ function jsxProd(type, config, maybeKey) {
26
+ var key = null;
27
+ void 0 !== maybeKey && (key = "" + maybeKey);
28
+ void 0 !== config.key && (key = "" + config.key);
29
+ if ("key" in config) {
30
+ maybeKey = {};
31
+ for (var propName in config)
32
+ "key" !== propName && (maybeKey[propName] = config[propName]);
33
+ } else maybeKey = config;
34
+ config = maybeKey.ref;
35
+ return {
36
+ $$typeof: REACT_ELEMENT_TYPE,
37
+ type: type,
38
+ key: key,
39
+ ref: void 0 !== config ? config : null,
40
+ props: maybeKey
41
+ };
42
+ }
43
+ reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
44
+ reactJsxRuntime_production.jsx = jsxProd;
45
+ reactJsxRuntime_production.jsxs = jsxProd;
46
+ return reactJsxRuntime_production;
47
+ }
48
+
49
+ var reactJsxRuntime_development = {};
50
+
51
+ /**
52
+ * @license React
53
+ * react-jsx-runtime.development.js
54
+ *
55
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
56
+ *
57
+ * This source code is licensed under the MIT license found in the
58
+ * LICENSE file in the root directory of this source tree.
59
+ */
60
+
61
+ var hasRequiredReactJsxRuntime_development;
62
+
63
+ function requireReactJsxRuntime_development () {
64
+ if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
65
+ hasRequiredReactJsxRuntime_development = 1;
66
+ "production" !== process.env.NODE_ENV &&
67
+ (function () {
68
+ function getComponentNameFromType(type) {
69
+ if (null == type) return null;
70
+ if ("function" === typeof type)
71
+ return type.$$typeof === REACT_CLIENT_REFERENCE
72
+ ? null
73
+ : type.displayName || type.name || null;
74
+ if ("string" === typeof type) return type;
75
+ switch (type) {
76
+ case REACT_FRAGMENT_TYPE:
77
+ return "Fragment";
78
+ case REACT_PROFILER_TYPE:
79
+ return "Profiler";
80
+ case REACT_STRICT_MODE_TYPE:
81
+ return "StrictMode";
82
+ case REACT_SUSPENSE_TYPE:
83
+ return "Suspense";
84
+ case REACT_SUSPENSE_LIST_TYPE:
85
+ return "SuspenseList";
86
+ case REACT_ACTIVITY_TYPE:
87
+ return "Activity";
88
+ }
89
+ if ("object" === typeof type)
90
+ switch (
91
+ ("number" === typeof type.tag &&
92
+ console.error(
93
+ "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
94
+ ),
95
+ type.$$typeof)
96
+ ) {
97
+ case REACT_PORTAL_TYPE:
98
+ return "Portal";
99
+ case REACT_CONTEXT_TYPE:
100
+ return type.displayName || "Context";
101
+ case REACT_CONSUMER_TYPE:
102
+ return (type._context.displayName || "Context") + ".Consumer";
103
+ case REACT_FORWARD_REF_TYPE:
104
+ var innerType = type.render;
105
+ type = type.displayName;
106
+ type ||
107
+ ((type = innerType.displayName || innerType.name || ""),
108
+ (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
109
+ return type;
110
+ case REACT_MEMO_TYPE:
111
+ return (
112
+ (innerType = type.displayName || null),
113
+ null !== innerType
114
+ ? innerType
115
+ : getComponentNameFromType(type.type) || "Memo"
116
+ );
117
+ case REACT_LAZY_TYPE:
118
+ innerType = type._payload;
119
+ type = type._init;
120
+ try {
121
+ return getComponentNameFromType(type(innerType));
122
+ } catch (x) {}
123
+ }
124
+ return null;
125
+ }
126
+ function testStringCoercion(value) {
127
+ return "" + value;
128
+ }
129
+ function checkKeyStringCoercion(value) {
130
+ try {
131
+ testStringCoercion(value);
132
+ var JSCompiler_inline_result = !1;
133
+ } catch (e) {
134
+ JSCompiler_inline_result = true;
135
+ }
136
+ if (JSCompiler_inline_result) {
137
+ JSCompiler_inline_result = console;
138
+ var JSCompiler_temp_const = JSCompiler_inline_result.error;
139
+ var JSCompiler_inline_result$jscomp$0 =
140
+ ("function" === typeof Symbol &&
141
+ Symbol.toStringTag &&
142
+ value[Symbol.toStringTag]) ||
143
+ value.constructor.name ||
144
+ "Object";
145
+ JSCompiler_temp_const.call(
146
+ JSCompiler_inline_result,
147
+ "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
148
+ JSCompiler_inline_result$jscomp$0
149
+ );
150
+ return testStringCoercion(value);
151
+ }
152
+ }
153
+ function getTaskName(type) {
154
+ if (type === REACT_FRAGMENT_TYPE) return "<>";
155
+ if (
156
+ "object" === typeof type &&
157
+ null !== type &&
158
+ type.$$typeof === REACT_LAZY_TYPE
159
+ )
160
+ return "<...>";
161
+ try {
162
+ var name = getComponentNameFromType(type);
163
+ return name ? "<" + name + ">" : "<...>";
164
+ } catch (x) {
165
+ return "<...>";
166
+ }
167
+ }
168
+ function getOwner() {
169
+ var dispatcher = ReactSharedInternals.A;
170
+ return null === dispatcher ? null : dispatcher.getOwner();
171
+ }
172
+ function UnknownOwner() {
173
+ return Error("react-stack-top-frame");
174
+ }
175
+ function hasValidKey(config) {
176
+ if (hasOwnProperty.call(config, "key")) {
177
+ var getter = Object.getOwnPropertyDescriptor(config, "key").get;
178
+ if (getter && getter.isReactWarning) return false;
179
+ }
180
+ return void 0 !== config.key;
181
+ }
182
+ function defineKeyPropWarningGetter(props, displayName) {
183
+ function warnAboutAccessingKey() {
184
+ specialPropKeyWarningShown ||
185
+ ((specialPropKeyWarningShown = true),
186
+ console.error(
187
+ "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
188
+ displayName
189
+ ));
190
+ }
191
+ warnAboutAccessingKey.isReactWarning = true;
192
+ Object.defineProperty(props, "key", {
193
+ get: warnAboutAccessingKey,
194
+ configurable: true
195
+ });
196
+ }
197
+ function elementRefGetterWithDeprecationWarning() {
198
+ var componentName = getComponentNameFromType(this.type);
199
+ didWarnAboutElementRef[componentName] ||
200
+ ((didWarnAboutElementRef[componentName] = true),
201
+ console.error(
202
+ "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
203
+ ));
204
+ componentName = this.props.ref;
205
+ return void 0 !== componentName ? componentName : null;
206
+ }
207
+ function ReactElement(type, key, props, owner, debugStack, debugTask) {
208
+ var refProp = props.ref;
209
+ type = {
210
+ $$typeof: REACT_ELEMENT_TYPE,
211
+ type: type,
212
+ key: key,
213
+ props: props,
214
+ _owner: owner
215
+ };
216
+ null !== (void 0 !== refProp ? refProp : null)
217
+ ? Object.defineProperty(type, "ref", {
218
+ enumerable: false,
219
+ get: elementRefGetterWithDeprecationWarning
220
+ })
221
+ : Object.defineProperty(type, "ref", { enumerable: false, value: null });
222
+ type._store = {};
223
+ Object.defineProperty(type._store, "validated", {
224
+ configurable: false,
225
+ enumerable: false,
226
+ writable: true,
227
+ value: 0
228
+ });
229
+ Object.defineProperty(type, "_debugInfo", {
230
+ configurable: false,
231
+ enumerable: false,
232
+ writable: true,
233
+ value: null
234
+ });
235
+ Object.defineProperty(type, "_debugStack", {
236
+ configurable: false,
237
+ enumerable: false,
238
+ writable: true,
239
+ value: debugStack
240
+ });
241
+ Object.defineProperty(type, "_debugTask", {
242
+ configurable: false,
243
+ enumerable: false,
244
+ writable: true,
245
+ value: debugTask
246
+ });
247
+ Object.freeze && (Object.freeze(type.props), Object.freeze(type));
248
+ return type;
249
+ }
250
+ function jsxDEVImpl(
251
+ type,
252
+ config,
253
+ maybeKey,
254
+ isStaticChildren,
255
+ debugStack,
256
+ debugTask
257
+ ) {
258
+ var children = config.children;
259
+ if (void 0 !== children)
260
+ if (isStaticChildren)
261
+ if (isArrayImpl(children)) {
262
+ for (
263
+ isStaticChildren = 0;
264
+ isStaticChildren < children.length;
265
+ isStaticChildren++
266
+ )
267
+ validateChildKeys(children[isStaticChildren]);
268
+ Object.freeze && Object.freeze(children);
269
+ } else
270
+ console.error(
271
+ "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
272
+ );
273
+ else validateChildKeys(children);
274
+ if (hasOwnProperty.call(config, "key")) {
275
+ children = getComponentNameFromType(type);
276
+ var keys = Object.keys(config).filter(function (k) {
277
+ return "key" !== k;
278
+ });
279
+ isStaticChildren =
280
+ 0 < keys.length
281
+ ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
282
+ : "{key: someKey}";
283
+ didWarnAboutKeySpread[children + isStaticChildren] ||
284
+ ((keys =
285
+ 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
286
+ console.error(
287
+ 'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
288
+ isStaticChildren,
289
+ children,
290
+ keys,
291
+ children
292
+ ),
293
+ (didWarnAboutKeySpread[children + isStaticChildren] = true));
294
+ }
295
+ children = null;
296
+ void 0 !== maybeKey &&
297
+ (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
298
+ hasValidKey(config) &&
299
+ (checkKeyStringCoercion(config.key), (children = "" + config.key));
300
+ if ("key" in config) {
301
+ maybeKey = {};
302
+ for (var propName in config)
303
+ "key" !== propName && (maybeKey[propName] = config[propName]);
304
+ } else maybeKey = config;
305
+ children &&
306
+ defineKeyPropWarningGetter(
307
+ maybeKey,
308
+ "function" === typeof type
309
+ ? type.displayName || type.name || "Unknown"
310
+ : type
311
+ );
312
+ return ReactElement(
313
+ type,
314
+ children,
315
+ maybeKey,
316
+ getOwner(),
317
+ debugStack,
318
+ debugTask
319
+ );
320
+ }
321
+ function validateChildKeys(node) {
322
+ isValidElement(node)
323
+ ? node._store && (node._store.validated = 1)
324
+ : "object" === typeof node &&
325
+ null !== node &&
326
+ node.$$typeof === REACT_LAZY_TYPE &&
327
+ ("fulfilled" === node._payload.status
328
+ ? isValidElement(node._payload.value) &&
329
+ node._payload.value._store &&
330
+ (node._payload.value._store.validated = 1)
331
+ : node._store && (node._store.validated = 1));
332
+ }
333
+ function isValidElement(object) {
334
+ return (
335
+ "object" === typeof object &&
336
+ null !== object &&
337
+ object.$$typeof === REACT_ELEMENT_TYPE
338
+ );
339
+ }
340
+ var React = require$$0,
341
+ REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
342
+ REACT_PORTAL_TYPE = Symbol.for("react.portal"),
343
+ REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
344
+ REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
345
+ REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
346
+ REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
347
+ REACT_CONTEXT_TYPE = Symbol.for("react.context"),
348
+ REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
349
+ REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
350
+ REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
351
+ REACT_MEMO_TYPE = Symbol.for("react.memo"),
352
+ REACT_LAZY_TYPE = Symbol.for("react.lazy"),
353
+ REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
354
+ REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
355
+ ReactSharedInternals =
356
+ React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
357
+ hasOwnProperty = Object.prototype.hasOwnProperty,
358
+ isArrayImpl = Array.isArray,
359
+ createTask = console.createTask
360
+ ? console.createTask
361
+ : function () {
362
+ return null;
363
+ };
364
+ React = {
365
+ react_stack_bottom_frame: function (callStackForError) {
366
+ return callStackForError();
367
+ }
368
+ };
369
+ var specialPropKeyWarningShown;
370
+ var didWarnAboutElementRef = {};
371
+ var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
372
+ React,
373
+ UnknownOwner
374
+ )();
375
+ var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
376
+ var didWarnAboutKeySpread = {};
377
+ reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
378
+ reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
379
+ var trackActualOwner =
380
+ 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
381
+ return jsxDEVImpl(
382
+ type,
383
+ config,
384
+ maybeKey,
385
+ false,
386
+ trackActualOwner
387
+ ? Error("react-stack-top-frame")
388
+ : unknownOwnerDebugStack,
389
+ trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
390
+ );
391
+ };
392
+ reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
393
+ var trackActualOwner =
394
+ 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
395
+ return jsxDEVImpl(
396
+ type,
397
+ config,
398
+ maybeKey,
399
+ true,
400
+ trackActualOwner
401
+ ? Error("react-stack-top-frame")
402
+ : unknownOwnerDebugStack,
403
+ trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
404
+ );
405
+ };
406
+ })();
407
+ return reactJsxRuntime_development;
408
+ }
409
+
410
+ var hasRequiredJsxRuntime;
411
+
412
+ function requireJsxRuntime () {
413
+ if (hasRequiredJsxRuntime) return jsxRuntime.exports;
414
+ hasRequiredJsxRuntime = 1;
415
+
416
+ if (process.env.NODE_ENV === 'production') {
417
+ jsxRuntime.exports = requireReactJsxRuntime_production();
418
+ } else {
419
+ jsxRuntime.exports = requireReactJsxRuntime_development();
420
+ }
421
+ return jsxRuntime.exports;
422
+ }
423
+
424
+ var jsxRuntimeExports = requireJsxRuntime();
425
+
426
+ const Drawer = ({ isOpen, onClose, position = "right", size = "md", title, children, showOverlay = true, closeOnOverlayClick = true, closeOnEscape = true, className = "", footer, headerAlign = "space-between", footerAlign = "right", contentContained = false, }) => {
427
+ const drawerRef = useRef(null);
428
+ const [isAnimating, setIsAnimating] = useState(false);
429
+ const [shouldRender, setShouldRender] = useState(isOpen);
430
+ // Handle mount/unmount with animation
431
+ useEffect(() => {
432
+ if (isOpen) {
433
+ setShouldRender(true);
434
+ // Small delay to trigger animation
435
+ requestAnimationFrame(() => {
436
+ requestAnimationFrame(() => {
437
+ setIsAnimating(true);
438
+ });
439
+ });
440
+ }
441
+ else {
442
+ setIsAnimating(false);
443
+ // Wait for animation to complete before unmounting
444
+ const timer = setTimeout(() => {
445
+ setShouldRender(false);
446
+ }, 300); // Match animation duration
447
+ return () => clearTimeout(timer);
448
+ }
449
+ }, [isOpen]);
450
+ const getPositionClasses = () => {
451
+ const base = "fixed bg-white shadow-xl transition-transform duration-300 ease-in-out";
452
+ const sizes = {
453
+ left: {
454
+ sm: "w-64",
455
+ md: "w-80",
456
+ lg: "w-96",
457
+ xl: "w-[32rem]",
458
+ full: "w-full",
459
+ },
460
+ right: {
461
+ sm: "w-64",
462
+ md: "w-80",
463
+ lg: "w-96",
464
+ xl: "w-[32rem]",
465
+ full: "w-full",
466
+ },
467
+ top: {
468
+ sm: "h-64",
469
+ md: "h-80",
470
+ lg: "h-96",
471
+ xl: "h-[32rem]",
472
+ full: "h-full",
473
+ },
474
+ bottom: {
475
+ sm: "h-64",
476
+ md: "h-80",
477
+ lg: "h-96",
478
+ xl: "h-[32rem]",
479
+ full: "h-full",
480
+ },
481
+ };
482
+ const positions = {
483
+ left: "left-0 top-0 h-full",
484
+ right: "right-0 top-0 h-full",
485
+ top: "top-0 left-0 w-full",
486
+ bottom: "bottom-0 left-0 w-full",
487
+ };
488
+ const transforms = {
489
+ left: isAnimating ? "translate-x-0" : "-translate-x-full",
490
+ right: isAnimating ? "translate-x-0" : "translate-x-full",
491
+ top: isAnimating ? "translate-y-0" : "-translate-y-full",
492
+ bottom: isAnimating ? "translate-y-0" : "translate-y-full",
493
+ };
494
+ return `${base} ${positions[position]} ${sizes[position][size]} ${transforms[position]} ${className}`;
495
+ };
496
+ useEffect(() => {
497
+ if (!isOpen || !closeOnEscape)
498
+ return;
499
+ const handleEscape = (e) => {
500
+ if (e.key === "Escape") {
501
+ onClose();
502
+ }
503
+ };
504
+ document.addEventListener("keydown", handleEscape);
505
+ return () => document.removeEventListener("keydown", handleEscape);
506
+ }, [isOpen, closeOnEscape, onClose]);
507
+ useEffect(() => {
508
+ if (isOpen) {
509
+ document.body.style.overflow = "hidden";
510
+ }
511
+ else {
512
+ document.body.style.overflow = "";
513
+ }
514
+ return () => {
515
+ document.body.style.overflow = "";
516
+ };
517
+ }, [isOpen]);
518
+ useEffect(() => {
519
+ if (isAnimating && drawerRef.current) {
520
+ drawerRef.current.focus();
521
+ }
522
+ }, [isAnimating]);
523
+ const handleOverlayClick = () => {
524
+ if (closeOnOverlayClick) {
525
+ onClose();
526
+ }
527
+ };
528
+ // Don't render if not open and animation is complete
529
+ if (!shouldRender)
530
+ return null;
531
+ const footerAlignClass = {
532
+ left: "justify-start",
533
+ center: "justify-center",
534
+ right: "justify-end",
535
+ "space-between": "justify-between",
536
+ }[footerAlign];
537
+ return (jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "drawer-title" : undefined, children: [showOverlay && (jsxRuntimeExports.jsx("div", { className: `fixed inset-0 bg-black/50 transition-opacity duration-300 ${isAnimating ? "opacity-100" : "opacity-0"}`, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntimeExports.jsxs("div", { ref: drawerRef, tabIndex: -1, className: `${getPositionClasses()} flex flex-col`, children: [title && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-b border-gray-200 ${headerAlign === "center" ? "text-center" : ""}`, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx("h2", { id: "drawer-title", className: "text-lg font-semibold text-gray-900 flex-1", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors", "aria-label": "Close drawer", children: jsxRuntimeExports.jsx(CloseIcon, { size: "md" }) })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto", children: children })) : (children) }), footer && (jsxRuntimeExports.jsx("div", { className: `px-6 py-4 border-t border-gray-200 bg-gray-50 flex ${footerAlignClass}`, children: contentContained ? (jsxRuntimeExports.jsx("div", { className: "max-w-5xl mx-auto w-full", children: footer })) : (footer) }))] })] }));
538
+ };
539
+
540
+ export { Drawer as default };
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=setupTests.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":""}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@rubenpazch/drawer",
3
+ "version": "1.0.0",
4
+ "description": "Flexible drawer/sidebar component with multiple positions and animations",
5
+ "private": false,
6
+ "main": "dist/index.cjs.js",
7
+ "module": "dist/index.esm.js",
8
+ "types": "dist/index.d.ts",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/rubenpazch/lbyte-ui-library.git",
12
+ "directory": "packages/drawer"
13
+ },
14
+ "author": "Ruben Paz Chuspe <rubenpazchuspe@outlook.com>",
15
+ "license": "MIT",
16
+ "files": [
17
+ "dist"
18
+ ],
19
+ "sideEffects": false,
20
+ "exports": {
21
+ ".": {
22
+ "import": "./dist/index.esm.js",
23
+ "require": "./dist/index.cjs.js",
24
+ "types": "./dist/index.d.ts"
25
+ }
26
+ },
27
+ "dependencies": {
28
+ "@rubenpazch/icons": "2.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "@types/react": "^19.0.2",
32
+ "@types/react-dom": "^19.0.2",
33
+ "@rubenpazch/typescript-config": "2.0.0"
34
+ },
35
+ "publishConfig": {
36
+ "access": "public"
37
+ },
38
+ "scripts": {
39
+ "build": "rollup -c",
40
+ "test": "jest --passWithNoTests"
41
+ }
42
+ }