lambda-ui-components 1.0.0 → 1.0.1
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 +98 -111
- package/dist/main.mjs +144 -146
- package/dist/main.umd.js +4 -4
- package/package.json +102 -102
package/README.md
CHANGED
|
@@ -7,148 +7,135 @@
|
|
|
7
7
|
[](https://react.dev/)
|
|
8
8
|
[](https://github.com/AletzMan/lambda-ui-components/actions)
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
**Lambda UI Components** is a modern, accessible, and flexible React component library designed to help you build beautiful, consistent, and scalable user interfaces with ease. Every component is crafted with precision and attention to detail.
|
|
11
11
|
|
|
12
|
-
## ✨
|
|
12
|
+
## ✨ Features
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
- Incluye Skeleton, Button, Card, Input, Table, Modal, y más
|
|
14
|
+
- **Accessible by default:** Components follow WAI-ARIA guidelines and are keyboard-friendly.
|
|
15
|
+
- **Modern design:** Built-in dark mode, theming, and responsive layouts.
|
|
16
|
+
- **Developer experience:** TypeScript-first, clear props, and Storybook demos.
|
|
17
|
+
- **Flexible & composable:** Extend, override, or compose components as you need.
|
|
19
18
|
|
|
20
|
-
## 🚀
|
|
19
|
+
## 🚀 Installation
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
Lambda UI Components is published as an npm package. You can install it using your favorite package manager:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
23
24
|
pnpm add lambda-ui-components
|
|
24
|
-
#
|
|
25
|
+
# or
|
|
25
26
|
npm install lambda-ui-components
|
|
27
|
+
# or
|
|
28
|
+
yarn add lambda-ui-components
|
|
26
29
|
```
|
|
27
30
|
|
|
28
|
-
> **
|
|
31
|
+
> **Tip:** For best results, use `pnpm` or `yarn` in monorepo setups.
|
|
29
32
|
|
|
30
|
-
##
|
|
33
|
+
## ⚡ Peer Dependencies
|
|
31
34
|
|
|
32
|
-
|
|
35
|
+
Lambda UI Components requires **React 18+** and **ReactDOM** as peer dependencies. Make sure they are installed in your project.
|
|
33
36
|
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
background-color: var(--background-color);
|
|
37
|
-
}
|
|
37
|
+
```bash
|
|
38
|
+
pnpm add react react-dom
|
|
38
39
|
```
|
|
39
40
|
|
|
40
|
-
|
|
41
|
+
For syntax highlighting in `CodeBlock`, install `prismjs`:
|
|
41
42
|
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
```bash
|
|
44
|
+
pnpm add prismjs
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## 🎨 Importing CSS
|
|
48
|
+
|
|
49
|
+
Import the Lambda UI CSS in your main entry file (usually `src/index.tsx` or `_app.tsx` in Next.js):
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import "lambda-ui-components/dist/main.css";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
This ensures all components are styled correctly out of the box.
|
|
56
|
+
|
|
57
|
+
## 🛠️ Theme & Configuration Providers
|
|
58
|
+
|
|
59
|
+
For advanced theming, localization, and consistent UI configuration, wrap your app with `LambdaConfigProvider` and `ThemeProvider` at the root of your component tree:
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
import { LambdaConfigProvider, ThemeProvider } from "lambda-ui-components";
|
|
63
|
+
|
|
64
|
+
export default function App({ children }) {
|
|
65
|
+
return (
|
|
66
|
+
<LambdaConfigProvider lang="en">
|
|
67
|
+
<ThemeProvider defaultTheme="dark">
|
|
68
|
+
{children}
|
|
69
|
+
</ThemeProvider>
|
|
70
|
+
</LambdaConfigProvider>
|
|
71
|
+
);
|
|
52
72
|
}
|
|
53
73
|
```
|
|
54
74
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Ejemplo de uso
|
|
71
|
-
|
|
72
|
-
```jsx
|
|
73
|
-
import "lambda-ui-components/dist/index.css";
|
|
74
|
-
import { Skeleton, Button, Card } from "lambda-ui-components";
|
|
75
|
-
|
|
76
|
-
function Demo() {
|
|
77
|
-
return (
|
|
78
|
-
<Card style={{ width: 320 }}>
|
|
79
|
-
<Skeleton width={80} height={16} animationType="wave" />
|
|
80
|
-
<Button variant="primary">Acción</Button>
|
|
81
|
-
</Card>
|
|
82
|
-
);
|
|
75
|
+
## 📦 Basic Usage
|
|
76
|
+
|
|
77
|
+
Import and use components in your React app:
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { Button, Card } from "lambda-ui-components";
|
|
81
|
+
|
|
82
|
+
export default function Example() {
|
|
83
|
+
return (
|
|
84
|
+
<Card>
|
|
85
|
+
<Button color="primary">Hello Lambda UI</Button>
|
|
86
|
+
</Card>
|
|
87
|
+
);
|
|
83
88
|
}
|
|
84
89
|
```
|
|
85
90
|
|
|
86
|
-
|
|
91
|
+
All components are fully typed and support both controlled and uncontrolled usage patterns.
|
|
92
|
+
|
|
93
|
+
### Next.js & RSC
|
|
94
|
+
|
|
95
|
+
If you use **Next.js App Router**, add `"use client"` at the top of your page or component file whenever you use interactive components:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
"use client";
|
|
99
|
+
import { Button } from "lambda-ui-components";
|
|
100
|
+
// ...
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
This is only necessary in Next.js App Router. In Vite, Astro, Remix, or CRA, you do **not** need this directive.
|
|
104
|
+
|
|
105
|
+
## 🧩 Components Included
|
|
106
|
+
|
|
107
|
+
Lambda UI offers a comprehensive set of UI primitives and advanced components, including:
|
|
87
108
|
|
|
88
|
-
- Accordion
|
|
89
|
-
- Alert
|
|
90
|
-
- Avatar
|
|
91
|
-
- Badge
|
|
92
|
-
- Breadcrumb
|
|
93
109
|
- Button
|
|
94
|
-
-
|
|
95
|
-
-
|
|
96
|
-
-
|
|
97
|
-
-
|
|
98
|
-
-
|
|
99
|
-
- ColorPicker
|
|
100
|
-
- DatePicker
|
|
101
|
-
- Dialog
|
|
102
|
-
- Divider
|
|
103
|
-
- Drawer
|
|
104
|
-
- Dropdown
|
|
105
|
-
- FileUpload
|
|
106
|
-
- Flex
|
|
107
|
-
- Input
|
|
108
|
-
- InputNumber
|
|
109
|
-
- Join
|
|
110
|
-
- Link
|
|
111
|
-
- NavigationMenu
|
|
110
|
+
- Input & TextArea
|
|
111
|
+
- Select & Dropdown
|
|
112
|
+
- Checkbox & Radio
|
|
113
|
+
- Switch
|
|
114
|
+
- Dialog & Drawer
|
|
112
115
|
- Notification
|
|
113
|
-
- Pagination
|
|
116
|
+
- Table & Pagination
|
|
117
|
+
- Card
|
|
118
|
+
- Tabs
|
|
119
|
+
- Slider
|
|
120
|
+
- Avatar
|
|
114
121
|
- Progress
|
|
115
|
-
- Radio/RadioGroup
|
|
116
|
-
- Rating
|
|
117
|
-
- Select
|
|
118
122
|
- Skeleton
|
|
119
|
-
-
|
|
120
|
-
- Splitter
|
|
121
|
-
- Stepper
|
|
122
|
-
- Switch
|
|
123
|
-
- Tab
|
|
124
|
-
- Table
|
|
125
|
-
- Tag
|
|
126
|
-
- TextArea
|
|
127
|
-
- Tooltip
|
|
128
|
-
- TreeView
|
|
123
|
+
- And many more…
|
|
129
124
|
|
|
130
|
-
## 🎨
|
|
125
|
+
## 🎨 Theming & Customization
|
|
131
126
|
|
|
132
|
-
-
|
|
133
|
-
-
|
|
127
|
+
- **CSS Variables:** Lambda UI Components uses CSS variables for theming. You can globally override the theme by changing variables in your CSS or using `data-theme` for dark mode and custom themes.
|
|
128
|
+
- **Unstyled Prop:** To customize the style of specific components, many support the `unstyled` prop, which removes default styles so you can apply your own.
|
|
134
129
|
|
|
135
|
-
##
|
|
136
|
-
|
|
137
|
-
- `react` >= 18
|
|
138
|
-
- `react-dom` >= 18
|
|
139
|
-
- (Opcional) `prismjs` para CodeBlock
|
|
130
|
+
## 🤝 Contribution
|
|
140
131
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
- Haz un fork y un PR con tu mejora o bugfix.
|
|
144
|
-
- Sigue la convención de componentes y estilos.
|
|
132
|
+
- Fork the repo and create a PR with your improvement or bugfix.
|
|
133
|
+
- Follow the component and style conventions.
|
|
145
134
|
|
|
146
135
|
---
|
|
147
136
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
## 📝 Licencia
|
|
137
|
+
## 📝 License
|
|
151
138
|
|
|
152
|
-
|
|
139
|
+
This project is licensed under the MIT License. You can freely use it in personal and commercial projects. See the LICENSE file for more details.
|
|
153
140
|
|
|
154
|
-
|
|
141
|
+
Developed by [BitCoder__](https://alejandro-garcia.dev)
|