welcome-ui 9.0.0-alpha.1 → 9.0.0-alpha.4
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 +3 -43
- package/dist/Card.js +4 -4
- package/dist/Drawer.css +1 -1
- package/dist/Drawer.js +78 -79
- package/dist/FileDrop.css +1 -1
- package/dist/FileDrop.js +402 -387
- package/dist/Text.css +1 -1
- package/dist/Text.js +34 -34
- package/dist/theme.css +1 -1
- package/dist/types/components/Card/types.d.ts +1 -0
- package/dist/types/components/Drawer/AssetDrawer/types.d.ts +6 -1
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react
|
|
5
|
+
Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react, typescript, tailwindcss and ariakit.
|
|
6
6
|
|
|
7
7
|
Here you'll find all the core components you need to create a delightful webapp.
|
|
8
8
|
|
|
@@ -10,59 +10,19 @@ Here you'll find all the core components you need to create a delightful webapp.
|
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
[](https://github.com/WTTJ/welcome-ui/tree/main/LICENSE)   [](https://github.com/WTTJ/welcome-ui/tree/main/CONTRIBUTING.mdx) [](https://conventionalcommits.org)
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
13
|
## Installation
|
|
18
14
|
|
|
19
15
|
1 - Install the `welcome-ui` package and **peer dependencies** listed below:
|
|
20
16
|
|
|
21
17
|
```bash
|
|
22
|
-
yarn add welcome-ui
|
|
18
|
+
yarn add welcome-ui react@^18.0.0
|
|
23
19
|
```
|
|
24
20
|
|
|
25
21
|
## Import library & Theme
|
|
26
22
|
|
|
27
23
|
Getting started
|
|
28
24
|
|
|
29
|
-
|
|
30
|
-
import React from 'react'
|
|
31
|
-
import { createTheme } from 'welcome-ui/theme'
|
|
32
|
-
import { WuiProvider } from 'welcome-ui/WuiProvider'
|
|
33
|
-
import { Button } from 'welcome-ui/Button'
|
|
34
|
-
|
|
35
|
-
// Add theme options (if you want)
|
|
36
|
-
const options = {
|
|
37
|
-
defaultFontFamily: 'Helvetica',
|
|
38
|
-
headingFontFamily: 'Georgia',
|
|
39
|
-
colors: {
|
|
40
|
-
primary: {
|
|
41
|
-
50: '#124C80',
|
|
42
|
-
},
|
|
43
|
-
green: {
|
|
44
|
-
50: '#32CD32',
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
// Create your theme
|
|
50
|
-
const theme = createTheme(options)
|
|
51
|
-
export default function Root() {
|
|
52
|
-
return (
|
|
53
|
-
// Wrap your components with <WuiProvider /> with your theme
|
|
54
|
-
<WuiProvider
|
|
55
|
-
theme={theme}
|
|
56
|
-
// Will inject a CSS reset with normalizer
|
|
57
|
-
hasGlobalStyle
|
|
58
|
-
// Will show the focus ring on keyboard navigation only
|
|
59
|
-
shouldHideFocusRingOnClick
|
|
60
|
-
>
|
|
61
|
-
<Button>Welcome!</Button>
|
|
62
|
-
</WuiProvider>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
```
|
|
25
|
+
TODO
|
|
66
26
|
|
|
67
27
|
## Develop on local
|
|
68
28
|
|
package/dist/Card.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
2
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as n } from "react";
|
|
4
4
|
import { c as d } from "./index-PAaZGbyz.js";
|
|
5
5
|
const a = "_root_10ds1_2", m = "_body_10ds1_13", e = {
|
|
6
6
|
root: a,
|
|
7
7
|
body: m
|
|
8
8
|
}, i = d(e), l = n(
|
|
9
|
-
({ children: o, className: r, ...s },
|
|
10
|
-
), y = n(({
|
|
11
|
-
({ children: o, className: r, ...s },
|
|
9
|
+
({ children: o, className: r, ...s }, t) => /* @__PURE__ */ c("div", { className: i("body", r), ref: t, ...s, children: o })
|
|
10
|
+
), y = n(({ alt: o, src: r, ...s }, t) => /* @__PURE__ */ c("div", { ref: t, ...s, children: /* @__PURE__ */ c("img", { alt: o, src: r }) })), _ = d(e), b = n(
|
|
11
|
+
({ children: o, className: r, ...s }, t) => /* @__PURE__ */ c("div", { className: _("root", r), ref: t, ...s, children: o })
|
|
12
12
|
), v = Object.assign(b, {
|
|
13
13
|
Body: l,
|
|
14
14
|
Cover: y
|
package/dist/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{._asset-
|
|
1
|
+
@layer components{._asset-drawer_xrztb_3{overflow:hidden;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}._asset-drawer_xrztb_3[class*=root]{height:calc(100% - 3rem)}._content-wrapper_xrztb_13{height:100%;margin-top:var(--spacing-xl);overflow-y:auto;width:100%}@media screen and (min-width: 736px){._content-wrapper_xrztb_13{margin-top:var(--spacing-3xl)}}._content-max-width_xrztb_24{flex:1;margin:0 auto;width:100%;max-width:var(--asset-drawer-content-max-width, 51.25rem)}._content_xrztb_13{--asset-drawer-content-padding: 0 var(--spacing-md) var(--spacing-xl);padding:var(--asset-drawer-content-padding)}@media screen and (min-width: 736px){._content_xrztb_13{--asset-drawer-content-padding: 0 var(--spacing-xl) var(--spacing-3xl)}}._asset-drawer-header_xrztb_39{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:space-between;background-color:var(--color-neutral-10);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:1}@media screen and (min-width: 736px){._asset-drawer-header_xrztb_39{align-items:center;flex-direction:row}}._back-button_xrztb_57{align-items:center;display:flex;gap:var(--spacing-md)}@media screen and (min-width: 736px){._back-button_xrztb_57{gap:var(--spacing-xl)}}._title_xrztb_67{display:flex;flex-direction:column;gap:var(--spacing-xxs)}._icon-block_xrztb_72{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-md);background-color:var(--color-beige-20);transition:background-color var(--timing-primary);--icon-block-size: var(--spacing-3xl);width:var(--icon-block-size);height:var(--icon-block-size)}._icon-block_xrztb_72._size-md_xrztb_84{--icon-block-size: var(--spacing-3xl)}._icon-block_xrztb_72._size-sm_xrztb_87{--icon-block-size: var(--spacing-xxl)}}@layer components{._root_11f0r_3{background-color:var(--color-neutral-10);border:var(--border-width-sm) solid var(--color-neutral-30);z-index:999;position:fixed;display:flex;flex-direction:column;overflow:auto;opacity:0;transition:var(--duration-medium);max-width:100%;--drawer-left: 0;--drawer-right: 0;--drawer-top: 0;--drawer-bottom: 0;--drawer-height: 100%;--drawer-width: 100%;--drawer-transform: translateY(0, 0);left:var(--drawer-left);right:var(--drawer-right);top:var(--drawer-top);bottom:var(--drawer-bottom);width:var(--drawer-width);height:var(--drawer-height);transform:var(--drawer-transform)}._root_11f0r_3._placement-bottom_11f0r_30{--drawer-top: auto;--drawer-transform: translateY(100%)}._root_11f0r_3._placement-left_11f0r_34{--drawer-right: auto;--drawer-transform: translateX(-100%)}._root_11f0r_3._placement-right_11f0r_38{--drawer-left: auto;--drawer-transform: translateX(100%)}._root_11f0r_3._placement-top_11f0r_42{--drawer-bottom: auto;--drawer-transform: translateY(-100%)}._root_11f0r_3._placement-top_11f0r_42._size-sm_11f0r_46,._root_11f0r_3._placement-bottom_11f0r_30._size-sm_11f0r_46{--drawer-height: 25rem}._root_11f0r_3._placement-top_11f0r_42._size-md_11f0r_49,._root_11f0r_3._placement-bottom_11f0r_30._size-md_11f0r_49{--drawer-height: 34.375rem}._root_11f0r_3._placement-top_11f0r_42._size-lg_11f0r_52,._root_11f0r_3._placement-bottom_11f0r_30._size-lg_11f0r_52{--drawer-height: 42.5rem}._root_11f0r_3._placement-left_11f0r_34._size-sm_11f0r_46,._root_11f0r_3._placement-right_11f0r_38._size-sm_11f0r_46{--drawer-width: 25rem}._root_11f0r_3._placement-left_11f0r_34._size-md_11f0r_49,._root_11f0r_3._placement-right_11f0r_38._size-md_11f0r_49{--drawer-width: 34.375rem}._root_11f0r_3._placement-left_11f0r_34._size-lg_11f0r_52,._root_11f0r_3._placement-right_11f0r_38._size-lg_11f0r_52{--drawer-width: 42.5rem}._root_11f0r_3[data-enter]{opacity:1;--drawer-transform: translateX(0, 0)}._backdrop_11f0r_68{background-color:var(--color-overlay);z-index:999;position:fixed;top:0;right:0;left:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out}._backdrop_11f0r_68._drawer-hide-on-interact-outside_11f0r_79{cursor:pointer}._backdrop_11f0r_68[data-enter]{opacity:1}._content_11f0r_85{flex:1;padding:var(--spacing-xl)}@media screen and (min-width: 736px){._content_11f0r_85{overflow-y:auto}}._footer_11f0r_94{bottom:0;position:sticky;z-index:1;width:100%;background-color:var(--color-neutral-0);padding:var(--spacing-xl)}@media screen and (min-width: 736px){._footer_11f0r_94{bottom:auto;position:static}}._title_11f0r_108{display:flex;align-items:center;justify-content:space-between;position:sticky;z-index:1;top:0;width:100%;background-color:var(--color-neutral-10);margin:0;padding:var(--spacing-xl) var(--spacing-5xl) var(--spacing-xl) var(--spacing-xl)}._drawer-close_11f0r_120{position:absolute;right:var(--spacing-lg);top:var(--spacing-lg);z-index:10}}
|
package/dist/Drawer.js
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { D as
|
|
4
|
-
import { u as
|
|
5
|
-
import { useCallback as
|
|
6
|
-
import { c as
|
|
7
|
-
import { f as
|
|
8
|
-
import { Button as
|
|
2
|
+
import { jsx as t, jsxs as f, Fragment as y } from "react/jsx-runtime";
|
|
3
|
+
import { D as A } from "./JC64G2H7-DPy9R0De.js";
|
|
4
|
+
import { u as bt } from "./JC64G2H7-DPy9R0De.js";
|
|
5
|
+
import { useCallback as b, forwardRef as h } from "react";
|
|
6
|
+
import { c as n } from "./index-PAaZGbyz.js";
|
|
7
|
+
import { f as x } from "./forwardRefWithAs-8eP3ZN15.js";
|
|
8
|
+
import { Button as C } from "./Button.js";
|
|
9
9
|
import "./Icon-BisRi8B3.js";
|
|
10
|
-
import { A as
|
|
11
|
-
import { Text as
|
|
12
|
-
import { D as
|
|
13
|
-
import { CloseButton as
|
|
14
|
-
import { D as
|
|
15
|
-
const
|
|
16
|
-
"asset-drawer": "_asset-
|
|
17
|
-
"content-wrapper": "_content-
|
|
18
|
-
"content-max-width": "_content-max-
|
|
19
|
-
content:
|
|
20
|
-
"asset-drawer-header": "_asset-drawer-
|
|
21
|
-
"back-button": "_back-
|
|
22
|
-
title:
|
|
23
|
-
"icon-block": "_icon-
|
|
24
|
-
"size-md": "_size-
|
|
25
|
-
"size-sm": "_size-
|
|
26
|
-
}, d =
|
|
10
|
+
import { A as O } from "./index-C8GsqBDe.js";
|
|
11
|
+
import { Text as g } from "./Text.js";
|
|
12
|
+
import { D as T } from "./SYRFVSLH-CHNUB1rW.js";
|
|
13
|
+
import { CloseButton as j } from "./CloseButton.js";
|
|
14
|
+
import { D as F } from "./AXB53BZF-BHeessqV.js";
|
|
15
|
+
const I = "_content_xrztb_13", B = "_title_xrztb_67", w = {
|
|
16
|
+
"asset-drawer": "_asset-drawer_xrztb_3",
|
|
17
|
+
"content-wrapper": "_content-wrapper_xrztb_13",
|
|
18
|
+
"content-max-width": "_content-max-width_xrztb_24",
|
|
19
|
+
content: I,
|
|
20
|
+
"asset-drawer-header": "_asset-drawer-header_xrztb_39",
|
|
21
|
+
"back-button": "_back-button_xrztb_57",
|
|
22
|
+
title: B,
|
|
23
|
+
"icon-block": "_icon-block_xrztb_72",
|
|
24
|
+
"size-md": "_size-md_xrztb_84",
|
|
25
|
+
"size-sm": "_size-sm_xrztb_87"
|
|
26
|
+
}, d = n(w), E = x(
|
|
27
27
|
({
|
|
28
|
-
children:
|
|
28
|
+
children: e,
|
|
29
29
|
className: r,
|
|
30
30
|
getPersistentElements: s,
|
|
31
|
-
maxWidth:
|
|
31
|
+
maxWidth: o,
|
|
32
32
|
store: a,
|
|
33
33
|
...i
|
|
34
34
|
}, m) => {
|
|
35
|
-
const l =
|
|
35
|
+
const l = b(
|
|
36
36
|
() => Array.from(
|
|
37
37
|
s ? s() : document.querySelectorAll("[data-wui-persistent]")
|
|
38
38
|
),
|
|
39
39
|
[s]
|
|
40
|
-
), p =
|
|
41
|
-
(
|
|
42
|
-
const k =
|
|
40
|
+
), p = b(
|
|
41
|
+
($) => {
|
|
42
|
+
const k = $.target;
|
|
43
43
|
return !l().some(
|
|
44
44
|
(D) => D.contains(k)
|
|
45
45
|
);
|
|
46
46
|
},
|
|
47
47
|
[l]
|
|
48
|
-
);
|
|
49
|
-
return /* @__PURE__ */
|
|
50
|
-
|
|
48
|
+
), u = typeof o == "number" ? `${o}px` : o;
|
|
49
|
+
return /* @__PURE__ */ t(
|
|
50
|
+
et,
|
|
51
51
|
{
|
|
52
52
|
autoFocusOnShow: !1,
|
|
53
53
|
className: d("asset-drawer", r),
|
|
@@ -56,39 +56,38 @@ const F = "_content_19lei_8", I = "_title_19lei_62", w = {
|
|
|
56
56
|
placement: "bottom",
|
|
57
57
|
ref: m,
|
|
58
58
|
store: a,
|
|
59
|
-
style: { "--drawer-height": "calc(100% - 3rem)" },
|
|
60
59
|
withBackdrop: !0,
|
|
61
60
|
...i,
|
|
62
|
-
children: /* @__PURE__ */
|
|
61
|
+
children: /* @__PURE__ */ t("div", { className: d("content-wrapper"), children: /* @__PURE__ */ t(
|
|
63
62
|
"div",
|
|
64
63
|
{
|
|
65
64
|
className: d("content-max-width"),
|
|
66
|
-
style: { "--asset-drawer-content-max-width":
|
|
67
|
-
children: /* @__PURE__ */
|
|
65
|
+
style: { "--asset-drawer-content-max-width": u },
|
|
66
|
+
children: /* @__PURE__ */ t("div", { className: d("content"), children: e })
|
|
68
67
|
}
|
|
69
68
|
) })
|
|
70
69
|
}
|
|
71
70
|
);
|
|
72
71
|
}
|
|
73
|
-
),
|
|
74
|
-
action:
|
|
72
|
+
), P = n(w), R = ({ icon: e, size: r = "md" }) => /* @__PURE__ */ t("div", { className: P("icon-block", `size-${r}`), children: /* @__PURE__ */ t(e, { className: "text-neutral-90", size: r }) }), _ = n(w), S = ({
|
|
73
|
+
action: e,
|
|
75
74
|
className: r,
|
|
76
75
|
icon: s,
|
|
77
|
-
onBackButtonClick:
|
|
76
|
+
onBackButtonClick: o,
|
|
78
77
|
subtitle: a,
|
|
79
78
|
title: i
|
|
80
79
|
}) => /* @__PURE__ */ f("div", { className: _("asset-drawer-header", r), children: [
|
|
81
80
|
/* @__PURE__ */ f("div", { className: _("back-button"), children: [
|
|
82
|
-
!!
|
|
83
|
-
!!s && /* @__PURE__ */
|
|
81
|
+
!!o && /* @__PURE__ */ t(C, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ t(O, {}) }),
|
|
82
|
+
!!s && /* @__PURE__ */ t(R, { icon: s }),
|
|
84
83
|
/* @__PURE__ */ f("div", { className: _("title"), children: [
|
|
85
|
-
/* @__PURE__ */
|
|
84
|
+
/* @__PURE__ */ t(g, { className: "pr-xl", variant: "h3", children: i }),
|
|
86
85
|
a
|
|
87
86
|
] })
|
|
88
87
|
] }),
|
|
89
|
-
|
|
90
|
-
] }),
|
|
91
|
-
root:
|
|
88
|
+
e ? /* @__PURE__ */ t("div", { className: _("actions"), children: e }) : null
|
|
89
|
+
] }), W = "_root_11f0r_3", q = "_backdrop_11f0r_68", H = "_content_11f0r_85", L = "_footer_11f0r_94", M = "_title_11f0r_108", c = {
|
|
90
|
+
root: W,
|
|
92
91
|
"placement-bottom": "_placement-bottom_11f0r_30",
|
|
93
92
|
"placement-left": "_placement-left_11f0r_34",
|
|
94
93
|
"placement-right": "_placement-right_11f0r_38",
|
|
@@ -96,62 +95,62 @@ const F = "_content_19lei_8", I = "_title_19lei_62", w = {
|
|
|
96
95
|
"size-sm": "_size-sm_11f0r_46",
|
|
97
96
|
"size-md": "_size-md_11f0r_49",
|
|
98
97
|
"size-lg": "_size-lg_11f0r_52",
|
|
99
|
-
backdrop:
|
|
98
|
+
backdrop: q,
|
|
100
99
|
"drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_11f0r_79",
|
|
101
|
-
content:
|
|
102
|
-
footer:
|
|
103
|
-
title:
|
|
100
|
+
content: H,
|
|
101
|
+
footer: L,
|
|
102
|
+
title: M,
|
|
104
103
|
"drawer-close": "_drawer-close_11f0r_120"
|
|
105
|
-
}, J =
|
|
104
|
+
}, J = n(c), z = ({ hideOnInteractOutside: e = !0, ...r }) => /* @__PURE__ */ t(
|
|
106
105
|
"div",
|
|
107
106
|
{
|
|
108
|
-
className: J("backdrop",
|
|
107
|
+
className: J("backdrop", e && "drawer-hide-on-interact-outside"),
|
|
109
108
|
...r
|
|
110
109
|
}
|
|
111
|
-
), K =
|
|
112
|
-
|
|
110
|
+
), K = n(c), N = ({ className: e }) => /* @__PURE__ */ t(
|
|
111
|
+
T,
|
|
113
112
|
{
|
|
114
|
-
render: (r) => /* @__PURE__ */
|
|
113
|
+
render: (r) => /* @__PURE__ */ t(j, { className: K("drawer-close", e), ...r })
|
|
115
114
|
}
|
|
116
|
-
),
|
|
117
|
-
({ as:
|
|
118
|
-
),
|
|
115
|
+
), Q = n(c), U = h(({ className: e, ...r }, s) => /* @__PURE__ */ t("div", { className: Q("content", e), ref: s, ...r })), V = n(c), X = h(({ className: e, ...r }, s) => /* @__PURE__ */ t("div", { className: V("footer", e), ref: s, ...r })), Y = n(c), Z = ({ children: e, className: r, ...s }) => /* @__PURE__ */ t("div", { className: Y("title", r), ...s, children: /* @__PURE__ */ t(g, { className: "w-full", variant: "h3", children: e }) }), v = x(
|
|
116
|
+
({ as: e, store: r, ...s }, o) => /* @__PURE__ */ t(F, { ref: o, render: e ? /* @__PURE__ */ t(e, {}) : void 0, store: r, ...s })
|
|
117
|
+
), G = n(c), tt = h(
|
|
119
118
|
({
|
|
120
|
-
children:
|
|
119
|
+
children: e,
|
|
121
120
|
className: r,
|
|
122
121
|
hideOnInteractOutside: s = !0,
|
|
123
|
-
placement:
|
|
122
|
+
placement: o = "right",
|
|
124
123
|
size: a = "lg",
|
|
125
124
|
store: i,
|
|
126
125
|
withBackdrop: m = !1,
|
|
127
126
|
withCloseButton: l = !0,
|
|
128
127
|
...p
|
|
129
|
-
},
|
|
130
|
-
|
|
128
|
+
}, u) => /* @__PURE__ */ t(
|
|
129
|
+
A,
|
|
131
130
|
{
|
|
132
|
-
backdrop: m ? /* @__PURE__ */
|
|
131
|
+
backdrop: m ? /* @__PURE__ */ t(z, { hideOnInteractOutside: s }) : !1,
|
|
133
132
|
hideOnInteractOutside: s,
|
|
134
133
|
modal: m,
|
|
135
|
-
ref:
|
|
136
|
-
render: /* @__PURE__ */
|
|
134
|
+
ref: u,
|
|
135
|
+
render: /* @__PURE__ */ t("div", { className: G("root", `placement-${o}`, `size-${a}`, r) }),
|
|
137
136
|
store: i,
|
|
138
137
|
...p,
|
|
139
|
-
children: /* @__PURE__ */ f(
|
|
140
|
-
l ? /* @__PURE__ */
|
|
141
|
-
|
|
138
|
+
children: /* @__PURE__ */ f(y, { children: [
|
|
139
|
+
l ? /* @__PURE__ */ t(N, {}) : null,
|
|
140
|
+
e
|
|
142
141
|
] })
|
|
143
142
|
}
|
|
144
143
|
)
|
|
145
|
-
),
|
|
146
|
-
Backdrop:
|
|
147
|
-
Close:
|
|
148
|
-
Content:
|
|
149
|
-
Footer:
|
|
150
|
-
Title:
|
|
151
|
-
Trigger:
|
|
152
|
-
}),
|
|
144
|
+
), et = Object.assign(tt, {
|
|
145
|
+
Backdrop: z,
|
|
146
|
+
Close: N,
|
|
147
|
+
Content: U,
|
|
148
|
+
Footer: X,
|
|
149
|
+
Title: Z,
|
|
150
|
+
Trigger: v
|
|
151
|
+
}), ut = Object.assign(E, { Header: S, Trigger: v });
|
|
153
152
|
export {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
153
|
+
ut as AssetDrawer,
|
|
154
|
+
et as Drawer,
|
|
155
|
+
bt as useDrawer
|
|
157
156
|
};
|
package/dist/FileDrop.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.
|
|
1
|
+
@layer components{._root_1encq_2{border-radius:var(--radius-sm);border-width:var(--border-width-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-16);outline:none;border-style:dashed;min-height:12.5rem;position:relative;display:flex;justify-content:center;align-items:center;padding:var(--spacing-md);transition:var(--duration-medium);color:var(--color, var(--color-neutral-90));background-color:var(--backgroundColor, var(--color-neutral-10));border-color:var(--borderColor, var(--color-neutral-30))}._root_1encq_2:focus{--borderColor: var(--color-yellow-40);box-shadow:var(--color-yellow-20) 0 0 0 2px}._root_1encq_2._disabled_1encq_26{--backgroundColor: var(--color-beige-30);--borderColor: var(--color-neutral-30);--color: var(--color-beige-70);cursor:not-allowed}._root_1encq_2._drag-reject_1encq_32{--borderColor: var(--color-red-40)}._file-input_1encq_35{display:block;height:0;opacity:0}._file-preview_1encq_40{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}._file-preview-icon_1encq_48{margin-bottom:var(--spacing-lg)}._file-preview-name_1encq_51{margin:0;max-width:600px}._file-preview-size_1encq_55{font-weight:var(--font-weight-medium);margin:0;color:var(--color-beige-70)}._image-preview_1encq_60{max-height:100%;max-width:100%;object-fit:contain}._actions_1encq_65{position:absolute;display:flex;top:var(--spacing-md);right:var(--spacing-md);gap:var(--spacing-xs)}._message-title_1encq_72{margin:0}._message-hint_1encq_75{margin:0;margin-top:var(--spacing-xs);color:var(--color-beige-70)}._message-file-button-text_1encq_80{margin-top:var(--spacing-lg)}}
|