@ledgerhq/lumen-ui-react 0.1.50 → 0.1.52
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 +11 -1
- package/ai-rules/RULES.md +7 -1
- package/dist/lib/Components/Avatar/resolveAvatarColor.js +13 -13
- package/dist/lib/Components/Button/BaseButton.d.ts.map +1 -1
- package/dist/lib/Components/Button/BaseButton.js +11 -10
- package/dist/lib/Components/Button/Button.d.ts +5 -0
- package/dist/lib/Components/Button/Button.d.ts.map +1 -1
- package/dist/lib/Components/Button/types.d.ts +8 -0
- package/dist/lib/Components/Button/types.d.ts.map +1 -1
- package/dist/lib/Components/CardButton/CardButton.d.ts.map +1 -1
- package/dist/lib/Components/CardButton/CardButton.js +9 -8
- package/dist/lib/Components/CardButton/types.d.ts +7 -0
- package/dist/lib/Components/CardButton/types.d.ts.map +1 -1
- package/dist/lib/Components/MediaButton/MediaButton.d.ts.map +1 -1
- package/dist/lib/Components/MediaButton/MediaButton.js +18 -17
- package/dist/lib/Components/MediaButton/types.d.ts +8 -0
- package/dist/lib/Components/MediaButton/types.d.ts.map +1 -1
- package/dist/package.json +4 -2
- package/package.json +4 -2
- package/tailwind.css +16 -0
package/README.md
CHANGED
|
@@ -33,13 +33,23 @@ import type { Config } from 'tailwindcss';
|
|
|
33
33
|
import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
|
|
34
34
|
|
|
35
35
|
const config = {
|
|
36
|
-
content: ['./src/**/*.{js,ts,jsx,tsx}'
|
|
36
|
+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
37
37
|
presets: [ledgerLivePreset],
|
|
38
38
|
} satisfies Config;
|
|
39
39
|
|
|
40
40
|
export default config;
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
Then import Lumen's stylesheet next to Tailwind in your main CSS file. It
|
|
44
|
+
registers our compiled components as a Tailwind source, so you never have to
|
|
45
|
+
reference our build layout yourself:
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
@import 'tailwindcss';
|
|
49
|
+
@import '@ledgerhq/lumen-ui-react/tailwind.css';
|
|
50
|
+
@config '../tailwind.config.ts';
|
|
51
|
+
```
|
|
52
|
+
|
|
43
53
|
### 2. Start Using Components
|
|
44
54
|
|
|
45
55
|
```tsx
|
package/ai-rules/RULES.md
CHANGED
|
@@ -22,7 +22,13 @@ Lumen typography classes set `font-family: Inter` via design tokens. The consume
|
|
|
22
22
|
|
|
23
23
|
### Tailwind Configuration (REQUIRED)
|
|
24
24
|
|
|
25
|
-
- Tailwind
|
|
25
|
+
- Check the installed Tailwind major version first — the two paths differ:
|
|
26
|
+
- **Tailwind v4 (recommended):** the main stylesheet MUST import Lumen's
|
|
27
|
+
stylesheet so Tailwind scans the compiled components:
|
|
28
|
+
`@import '@ledgerhq/lumen-ui-react/tailwind.css';` (add
|
|
29
|
+
`@import '@ledgerhq/lumen-ui-react-visualization/tailwind.css';` when using
|
|
30
|
+
charts). Do NOT also add `./node_modules/@ledgerhq/lumen-ui-react/dist/**` to
|
|
31
|
+
the `content` array — that path is internal and may change in any release.
|
|
26
32
|
- Always use a preset from `@ledgerhq/lumen-design-core`: ledgerLivePreset, enterprisePreset or websitesPreset
|
|
27
33
|
- Import presets: `import { ledgerLivePreset } from '@ledgerhq/lumen-design-core'`
|
|
28
34
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { resolveAvatarColorKey as o } from "../../../libs/utils-shared/dist/index.js";
|
|
2
|
-
import { cssVar as
|
|
3
|
-
const
|
|
4
|
-
orange:
|
|
5
|
-
green:
|
|
6
|
-
blue:
|
|
7
|
-
purple:
|
|
8
|
-
red:
|
|
9
|
-
yellow:
|
|
10
|
-
turquoise:
|
|
11
|
-
pink:
|
|
2
|
+
import { cssVar as r } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
|
|
3
|
+
const a = {
|
|
4
|
+
orange: r("var(--background-decorative-orange)"),
|
|
5
|
+
green: r("var(--background-decorative-green)"),
|
|
6
|
+
blue: r("var(--background-decorative-blue)"),
|
|
7
|
+
purple: r("var(--background-decorative-purple)"),
|
|
8
|
+
red: r("var(--background-decorative-red)"),
|
|
9
|
+
yellow: r("var(--background-decorative-yellow)"),
|
|
10
|
+
turquoise: r("var(--background-decorative-turquoise)"),
|
|
11
|
+
pink: r("var(--background-decorative-pink)")
|
|
12
12
|
};
|
|
13
|
-
function
|
|
14
|
-
return
|
|
13
|
+
function t(e) {
|
|
14
|
+
return a[o(e)];
|
|
15
15
|
}
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
t as resolveAvatarColor
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,kBAAkB;;;;;;8EAqD9B,CAAC;AAkBF,eAAO,MAAM,UAAU,GAAI,iIAaxB,eAAe,
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/BaseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,kBAAkB;;;;;;8EAqD9B,CAAC;AAkBF,eAAO,MAAM,UAAU,GAAI,iIAaxB,eAAe,4CAiDjB,CAAC"}
|
|
@@ -65,17 +65,17 @@ const N = l(
|
|
|
65
65
|
true: "text-disabled"
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
}),
|
|
68
|
+
}), C = ({
|
|
69
69
|
ref: c,
|
|
70
70
|
className: u,
|
|
71
71
|
appearance: a = "base",
|
|
72
72
|
size: s,
|
|
73
73
|
isFull: v,
|
|
74
74
|
disabled: p = !1,
|
|
75
|
-
asChild:
|
|
75
|
+
asChild: r = !1,
|
|
76
76
|
icon: n,
|
|
77
|
-
loading:
|
|
78
|
-
children:
|
|
77
|
+
loading: i = !1,
|
|
78
|
+
children: o,
|
|
79
79
|
onClick: g,
|
|
80
80
|
...m
|
|
81
81
|
}) => {
|
|
@@ -89,38 +89,39 @@ const N = l(
|
|
|
89
89
|
lg: 24
|
|
90
90
|
}[s] : 24;
|
|
91
91
|
return /* @__PURE__ */ x(
|
|
92
|
-
|
|
92
|
+
r ? z : "button",
|
|
93
93
|
{
|
|
94
94
|
className: h(
|
|
95
|
-
N({ disabled: e, loading:
|
|
95
|
+
N({ disabled: e, loading: i, appearance: a, size: s, isFull: v }),
|
|
96
96
|
u
|
|
97
97
|
),
|
|
98
98
|
ref: c,
|
|
99
99
|
"data-disabled": e || void 0,
|
|
100
100
|
disabled: e,
|
|
101
101
|
onClick: g,
|
|
102
|
+
...r ? {} : { type: "button" },
|
|
102
103
|
...m,
|
|
103
104
|
children: [
|
|
104
|
-
|
|
105
|
+
i && /* @__PURE__ */ t(
|
|
105
106
|
B,
|
|
106
107
|
{
|
|
107
108
|
size: d,
|
|
108
109
|
className: b({ appearance: a, disabled: e })
|
|
109
110
|
}
|
|
110
111
|
),
|
|
111
|
-
!
|
|
112
|
+
!i && n && /* @__PURE__ */ t(
|
|
112
113
|
n,
|
|
113
114
|
{
|
|
114
115
|
size: d,
|
|
115
116
|
className: b({ appearance: a, disabled: e })
|
|
116
117
|
}
|
|
117
118
|
),
|
|
118
|
-
|
|
119
|
+
o && (r ? /* @__PURE__ */ t(S, { children: o }) : /* @__PURE__ */ t("span", { className: "line-clamp-2 text-left", children: o }))
|
|
119
120
|
]
|
|
120
121
|
}
|
|
121
122
|
);
|
|
122
123
|
};
|
|
123
124
|
export {
|
|
124
|
-
|
|
125
|
+
C as BaseButton,
|
|
125
126
|
N as baseButtonVariants
|
|
126
127
|
};
|
|
@@ -30,6 +30,11 @@ import { ButtonProps } from './types';
|
|
|
30
30
|
* <Link to="/dashboard">Go to Dashboard</Link>
|
|
31
31
|
* </Button>
|
|
32
32
|
*
|
|
33
|
+
* // Submit button inside a form (opt into type="submit")
|
|
34
|
+
* <form onSubmit={handleSubmit}>
|
|
35
|
+
* <Button type="submit">Save</Button>
|
|
36
|
+
* </form>
|
|
37
|
+
*
|
|
33
38
|
*/
|
|
34
39
|
export declare const Button: ({ ref, className, loading, disabled, children, size, icon, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
35
40
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAe3C
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAe3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,MAAM,GAAI,uEASpB,WAAW,4CAcb,CAAC"}
|
|
@@ -46,6 +46,14 @@ export type BaseButtonProps = {
|
|
|
46
46
|
* Optional children to render inside the button.
|
|
47
47
|
*/
|
|
48
48
|
children?: ReactNode;
|
|
49
|
+
/**
|
|
50
|
+
* The native button `type`. Defaults to `'button'` so the button does not
|
|
51
|
+
* accidentally submit a surrounding `<form>`. Set `'submit'` or `'reset'` to
|
|
52
|
+
* opt into form behaviour. Ignored when `asChild` is used, since the rendered
|
|
53
|
+
* element (e.g. an anchor) is not a native button.
|
|
54
|
+
* @default 'button'
|
|
55
|
+
*/
|
|
56
|
+
type?: 'button' | 'submit' | 'reset';
|
|
49
57
|
} & ComponentPropsWithRef<'button'>;
|
|
50
58
|
export type ButtonProps = {
|
|
51
59
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,aAAa,GACb,eAAe,GACf,KAAK,CAAC;IACV;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,aAAa,GACb,eAAe,GACf,KAAK,CAAC;IACV;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CardButton/CardButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkB/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,GAAI,yGAUxB,eAAe,
|
|
1
|
+
{"version":3,"file":"CardButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CardButton/CardButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkB/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,GAAI,yGAUxB,eAAe,4CAqCjB,CAAC"}
|
|
@@ -17,12 +17,12 @@ const h = f(
|
|
|
17
17
|
}
|
|
18
18
|
), w = ({
|
|
19
19
|
ref: i,
|
|
20
|
-
className:
|
|
21
|
-
appearance:
|
|
20
|
+
className: o,
|
|
21
|
+
appearance: l,
|
|
22
22
|
icon: d,
|
|
23
|
-
title:
|
|
23
|
+
title: n,
|
|
24
24
|
description: t,
|
|
25
|
-
hideChevron:
|
|
25
|
+
hideChevron: r,
|
|
26
26
|
disabled: b,
|
|
27
27
|
...u
|
|
28
28
|
}) => {
|
|
@@ -36,19 +36,20 @@ const h = f(
|
|
|
36
36
|
ref: i,
|
|
37
37
|
className: p(
|
|
38
38
|
h({
|
|
39
|
-
appearance:
|
|
39
|
+
appearance: l
|
|
40
40
|
}),
|
|
41
|
-
|
|
41
|
+
o
|
|
42
42
|
),
|
|
43
43
|
disabled: c,
|
|
44
|
+
type: "button",
|
|
44
45
|
...u,
|
|
45
46
|
children: [
|
|
46
47
|
s && /* @__PURE__ */ e(s, { size: 24 }),
|
|
47
48
|
/* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col gap-4 text-left", children: [
|
|
48
|
-
/* @__PURE__ */ e("div", { className: "min-w-0 truncate body-2-semi-bold", children:
|
|
49
|
+
/* @__PURE__ */ e("div", { className: "min-w-0 truncate body-2-semi-bold", children: n }),
|
|
49
50
|
t && /* @__PURE__ */ e("div", { className: "line-clamp-2 min-w-0 body-3 text-muted group-disabled:text-disabled", children: t })
|
|
50
51
|
] }),
|
|
51
|
-
!
|
|
52
|
+
!r && /* @__PURE__ */ e(
|
|
52
53
|
v,
|
|
53
54
|
{
|
|
54
55
|
size: 24,
|
|
@@ -27,5 +27,12 @@ export type CardButtonProps = {
|
|
|
27
27
|
* @default false
|
|
28
28
|
*/
|
|
29
29
|
hideChevron?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The native button `type`. Defaults to `'button'` so the card button does
|
|
32
|
+
* not accidentally submit a surrounding `<form>`. Set `'submit'` or `'reset'`
|
|
33
|
+
* to opt into form behaviour.
|
|
34
|
+
* @default 'button'
|
|
35
|
+
*/
|
|
36
|
+
type?: 'button' | 'submit' | 'reset';
|
|
30
37
|
} & Omit<ComponentPropsWithRef<'button'>, 'children'>;
|
|
31
38
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CardButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CardButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/MediaButton/MediaButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiFhD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,WAAW,GAAI,6IAYzB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"MediaButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/MediaButton/MediaButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiFhD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,WAAW,GAAI,6IAYzB,gBAAgB,4CA8ClB,CAAC"}
|
|
@@ -3,8 +3,8 @@ import { useDisabledContext as C, cn as u } from "../../../libs/utils-shared/dis
|
|
|
3
3
|
import { Slot as g, Slottable as v } from "@radix-ui/react-slot";
|
|
4
4
|
import { cva as S } from "class-variance-authority";
|
|
5
5
|
import { baseButtonVariants as z } from "../Button/BaseButton.js";
|
|
6
|
-
import { ChevronDown as
|
|
7
|
-
const
|
|
6
|
+
import { ChevronDown as y } from "../../Symbols/Icons/ChevronDown.js";
|
|
7
|
+
const b = S("gap-8 body-2-semi-bold", {
|
|
8
8
|
variants: {
|
|
9
9
|
size: {
|
|
10
10
|
sm: "",
|
|
@@ -83,45 +83,46 @@ const y = S("gap-8 body-2-semi-bold", {
|
|
|
83
83
|
}
|
|
84
84
|
}), k = ({
|
|
85
85
|
ref: r,
|
|
86
|
-
className:
|
|
87
|
-
appearance:
|
|
86
|
+
className: p,
|
|
87
|
+
appearance: i = "gray",
|
|
88
88
|
size: d = "md",
|
|
89
|
-
disabled:
|
|
90
|
-
asChild:
|
|
91
|
-
leadingContent:
|
|
92
|
-
leadingContentShape:
|
|
89
|
+
disabled: m = !1,
|
|
90
|
+
asChild: a = !1,
|
|
91
|
+
leadingContent: n,
|
|
92
|
+
leadingContentShape: h = "flat",
|
|
93
93
|
hideChevron: s = !1,
|
|
94
94
|
children: t,
|
|
95
95
|
...c
|
|
96
96
|
}) => {
|
|
97
97
|
const o = C({
|
|
98
98
|
consumerName: "MediaButton",
|
|
99
|
-
mergeWith: { disabled:
|
|
100
|
-
}), f =
|
|
99
|
+
mergeWith: { disabled: m }
|
|
100
|
+
}), f = n ? h : "none";
|
|
101
101
|
return /* @__PURE__ */ l(
|
|
102
|
-
|
|
102
|
+
a ? g : "button",
|
|
103
103
|
{
|
|
104
104
|
ref: r,
|
|
105
105
|
className: u(
|
|
106
106
|
z({
|
|
107
|
-
appearance:
|
|
107
|
+
appearance: i,
|
|
108
108
|
disabled: o,
|
|
109
109
|
loading: !1
|
|
110
110
|
}),
|
|
111
|
-
|
|
111
|
+
b({
|
|
112
112
|
size: d,
|
|
113
113
|
leadingContentShape: f,
|
|
114
114
|
hasChevron: !s
|
|
115
115
|
}),
|
|
116
|
-
|
|
116
|
+
p
|
|
117
117
|
),
|
|
118
118
|
disabled: o,
|
|
119
|
+
...a ? {} : { type: "button" },
|
|
119
120
|
...c,
|
|
120
121
|
children: [
|
|
121
|
-
|
|
122
|
+
n && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 items-center", children: n }),
|
|
122
123
|
/* @__PURE__ */ l("span", { className: "flex items-center gap-2", children: [
|
|
123
|
-
|
|
124
|
-
!s && /* @__PURE__ */ e(
|
|
124
|
+
a ? /* @__PURE__ */ e(v, { children: t }) : /* @__PURE__ */ e("span", { className: "line-clamp-1 text-left", children: t }),
|
|
125
|
+
!s && /* @__PURE__ */ e(y, { size: 20 })
|
|
125
126
|
] })
|
|
126
127
|
]
|
|
127
128
|
}
|
|
@@ -34,5 +34,13 @@ export type MediaButtonProps = {
|
|
|
34
34
|
* The label content of the media button.
|
|
35
35
|
*/
|
|
36
36
|
children: ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* The native button `type`. Defaults to `'button'` so the media button does
|
|
39
|
+
* not accidentally submit a surrounding `<form>`. Set `'submit'` or `'reset'`
|
|
40
|
+
* to opt into form behaviour. Ignored when `asChild` is used, since the
|
|
41
|
+
* rendered element (e.g. an anchor) is not a native button.
|
|
42
|
+
* @default 'button'
|
|
43
|
+
*/
|
|
44
|
+
type?: 'button' | 'submit' | 'reset';
|
|
37
45
|
} & Pick<BaseButtonProps, 'disabled' | 'className' | 'asChild'> & ComponentPropsWithRef<'button'>;
|
|
38
46
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/MediaButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,eAAe,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/MediaButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,eAAe,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC,GAC7D,qBAAqB,CAAC,QAAQ,CAAC,CAAC"}
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.51",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"keywords": [
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"types": "./dist/index.d.ts",
|
|
18
18
|
"exports": {
|
|
19
19
|
"./package.json": "./package.json",
|
|
20
|
+
"./tailwind.css": "./tailwind.css",
|
|
20
21
|
".": {
|
|
21
22
|
"types": "./dist/index.d.ts",
|
|
22
23
|
"import": "./dist/index.js",
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
"files": [
|
|
33
34
|
"dist",
|
|
34
35
|
"ai-rules",
|
|
36
|
+
"tailwind.css",
|
|
35
37
|
"!**/*.tsbuildinfo"
|
|
36
38
|
],
|
|
37
39
|
"nx": {
|
|
@@ -54,7 +56,7 @@
|
|
|
54
56
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
55
57
|
"class-variance-authority": "^0.7.1",
|
|
56
58
|
"@tanstack/react-table": "^8.21.3",
|
|
57
|
-
"@ledgerhq/lumen-design-core": "0.1.
|
|
59
|
+
"@ledgerhq/lumen-design-core": "0.1.24",
|
|
58
60
|
"clsx": "^2.1.1",
|
|
59
61
|
"react": "^18.0.0 || ^19.0.0",
|
|
60
62
|
"react-dom": "^18.0.0 || ^19.0.0",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/lumen-ui-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.52",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"keywords": [
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"types": "./dist/index.d.ts",
|
|
18
18
|
"exports": {
|
|
19
19
|
"./package.json": "./package.json",
|
|
20
|
+
"./tailwind.css": "./tailwind.css",
|
|
20
21
|
".": {
|
|
21
22
|
"types": "./dist/index.d.ts",
|
|
22
23
|
"import": "./dist/index.js",
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
"files": [
|
|
33
34
|
"dist",
|
|
34
35
|
"ai-rules",
|
|
36
|
+
"tailwind.css",
|
|
35
37
|
"!**/*.tsbuildinfo"
|
|
36
38
|
],
|
|
37
39
|
"nx": {
|
|
@@ -54,7 +56,7 @@
|
|
|
54
56
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
55
57
|
"class-variance-authority": "^0.7.1",
|
|
56
58
|
"@tanstack/react-table": "^8.21.3",
|
|
57
|
-
"@ledgerhq/lumen-design-core": "0.1.
|
|
59
|
+
"@ledgerhq/lumen-design-core": "0.1.24",
|
|
58
60
|
"clsx": "^2.1.1",
|
|
59
61
|
"react": "^18.0.0 || ^19.0.0",
|
|
60
62
|
"react-dom": "^18.0.0 || ^19.0.0",
|
package/tailwind.css
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Registers Lumen's compiled components as a Tailwind source.
|
|
3
|
+
*
|
|
4
|
+
* Tailwind only emits a utility it has actually seen in a scanned file, and it
|
|
5
|
+
* skips gitignored paths (node_modules) during automatic detection. Consumers
|
|
6
|
+
* therefore used to copy a `./node_modules/@ledgerhq/lumen-ui-react/dist/lib/**`
|
|
7
|
+
* glob into their own config, which turned our build layout into a de-facto
|
|
8
|
+
* public API: renaming a folder here silently dropped utilities from their CSS,
|
|
9
|
+
* with no build error.
|
|
10
|
+
*
|
|
11
|
+
* `@source` paths resolve relative to the stylesheet that declares them, so the
|
|
12
|
+
* glob lives next to the layout it describes. Consumers only ever hold the
|
|
13
|
+
* stable `@ledgerhq/lumen-ui-react/tailwind.css` specifier — restructuring
|
|
14
|
+
* `dist` becomes a one-line change here instead of a breaking change for them.
|
|
15
|
+
*/
|
|
16
|
+
@source "./dist/lib";
|