@blencm/ui 0.0.2 → 0.0.3

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.
Files changed (4) hide show
  1. package/README.md +22 -68
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,13 +1,8 @@
1
1
  # @blencm/ui
2
2
 
3
- **Accessible, reusable React components built with Radix UI and Tailwind CSS.**
3
+ **Accessible React components on Radix UI and Tailwind CSS.**
4
4
 
5
- Install the package, import the components you need, and start building.
6
- No copying components into `src/components`, no manual setup, and no duplicated UI code across projects.
7
-
8
- ## Documentation & Live Components
9
-
10
- **Explore all components, live examples, and copy the demo code:**
5
+ Install the package, import a component, and start. No copy-paste into `src/components`.
11
6
 
12
7
  View components [here](https://ui.blencm.com).
13
8
 
@@ -15,24 +10,25 @@ View components [here](https://ui.blencm.com).
15
10
 
16
11
  ## Installation
17
12
 
18
- Install the package with your preferred package manager:
19
-
20
13
  ```bash
21
14
  pnpm add @blencm/ui
22
15
  ```
23
16
 
24
- React and React DOM are peer dependencies:
17
+ ```bash
18
+ npm install @blencm/ui
19
+ ```
25
20
 
26
- ```text
27
- react >=17 <21
28
- react-dom >=17 <21
21
+ ```bash
22
+ yarn add @blencm/ui
29
23
  ```
30
24
 
25
+ React and React DOM are peer dependencies (`>=17`).
26
+
31
27
  ---
32
28
 
33
- ## Quick Start
29
+ ## Usage
34
30
 
35
- Import components directly from the package:
31
+ Styles, theme tokens, and the CSS reset load with the package.
36
32
 
37
33
  ```tsx
38
34
  import { Button } from '@blencm/ui';
@@ -47,82 +43,40 @@ export function Example() {
47
43
  }
48
44
  ```
49
45
 
50
- That's it. Components, theme tokens, base styles, and the CSS reset are included with the package.
51
-
52
- ---
53
-
54
- ## Styles
55
-
56
- In most setups, styles are loaded automatically.
57
-
58
- If your bundler does not process CSS side-effect imports, import the stylesheet manually:
46
+ If your bundler does not follow CSS side-effect imports:
59
47
 
60
48
  ```tsx
61
49
  import '@blencm/ui/style.css';
62
50
  ```
63
51
 
64
- ### Dark Mode
65
-
66
- Dark mode is controlled by adding the `dark` class to an ancestor element, typically `<html>`:
52
+ Dark mode follows a `dark` class on an ancestor:
67
53
 
68
54
  ```html
69
55
  <html class="dark">
56
+ <body><!-- app --></body>
57
+ </html>
70
58
  ```
71
59
 
72
- ### Theme Customization
73
-
74
- Customize the design system by overriding CSS variables in your application.
75
-
76
- For example:
60
+ Override CSS variables in your app:
77
61
 
78
62
  ```css
79
63
  :root {
80
- --primary: 160 84% 39%;
81
- --radius: 0.5rem;
64
+ --primary: oklch(0.205 0 0);
65
+ --primary-foreground: oklch(0.985 0 0);
66
+ --radius: 0.625rem;
82
67
  }
83
68
  ```
84
69
 
85
- This allows you to adapt colors, border radius, and other theme tokens without modifying the library itself.
86
-
87
- ---
88
-
89
- ## Why @blencm/ui?
90
-
91
- `@blencm/ui` is designed for teams and developers who want a consistent component system without maintaining a local copy of every UI component.
92
-
93
- * **Accessible by default** — built on top of Radix UI primitives.
94
- * **Reusable** — install once and use across multiple React projects.
95
- * **Tailwind CSS friendly** — designed to work naturally with utility-first styling.
96
- * **Themeable** — customize the appearance through CSS variables.
97
- * **Dark mode ready** — supports class-based dark mode.
98
- * **TypeScript friendly** — designed for modern React and TypeScript applications.
99
- * **No copy-paste workflow** — components are imported directly from the package.
100
-
101
70
  ---
102
71
 
103
72
  ## Sponsor
104
73
 
105
- ### MultiBase Studio
106
-
107
- **[MultiBase Studio](https://multibasestudio.com/)** is a cross-platform desktop database client for **SQL, NoSQL, and cloud databases**.
108
-
109
- Connect to PostgreSQL, MySQL, MongoDB, Redis, SQLite, and **40+ database engines** from a single application.
110
-
111
- With MultiBase Studio you can:
112
-
113
- * Write queries with autocomplete
114
- * Explore databases, tables, collections, and schemas
115
- * Browse and edit data
116
- * Manage multiple database connections
117
- * Run backups
118
- * Work across different database engines without switching tools
119
-
120
- Available for **Windows, macOS, and Linux**.
74
+ **[MultiBase Studio](https://multibasestudio.com/)** is a desktop client for SQL, NoSQL, and cloud databases. Connect PostgreSQL, MySQL, MongoDB, Redis, SQLite, and 40+ engines from one app — query with autocomplete, explore schemas, edit data, and run backups without switching tools.
121
75
 
122
- The **[free plan](https://multibasestudio.com/)** does not expire and does not require a credit card.
76
+ Available on Windows, macOS, and Linux. The [free plan](https://multibasestudio.com/) does not expire and does not require a credit card.
123
77
 
124
78
  ---
125
79
 
126
80
  ## License
127
81
 
128
- Licensed under the [MIT License](./LICENSE).
82
+ [MIT](./LICENSE) · [GitHub](https://github.com/blencm/ui)
package/dist/index.cjs CHANGED
@@ -12060,7 +12060,7 @@ function DataTable({
12060
12060
  ] }) }),
12061
12061
  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ScrollBar, { orientation: "horizontal" })
12062
12062
  ] }),
12063
- isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "bg-background pointer-events-none absolute inset-x-0 bottom-0 top-12 z-[5] flex w-full items-center justify-center p-8", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center text-center", children: emptyState }) }) : null
12063
+ isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 top-12 z-[5] flex w-full items-center justify-center p-8", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center text-center", children: emptyState }) }) : null
12064
12064
  ] }),
12065
12065
  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn(ui.footer), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn(ui.footerInner), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
12066
12066
  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn(ui.metaWrap), children: [
package/dist/index.js CHANGED
@@ -11852,7 +11852,7 @@ function DataTable({
11852
11852
  ] }) }),
11853
11853
  /* @__PURE__ */ jsx66(ScrollBar, { orientation: "horizontal" })
11854
11854
  ] }),
11855
- isEmpty ? /* @__PURE__ */ jsx66("div", { className: "bg-background pointer-events-none absolute inset-x-0 bottom-0 top-12 z-[5] flex w-full items-center justify-center p-8", children: /* @__PURE__ */ jsx66("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center text-center", children: emptyState }) }) : null
11855
+ isEmpty ? /* @__PURE__ */ jsx66("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 top-12 z-[5] flex w-full items-center justify-center p-8", children: /* @__PURE__ */ jsx66("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center text-center", children: emptyState }) }) : null
11856
11856
  ] }),
11857
11857
  /* @__PURE__ */ jsx66("div", { className: cn(ui.footer), children: /* @__PURE__ */ jsx66("div", { className: cn(ui.footerInner), children: /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
11858
11858
  /* @__PURE__ */ jsxs38("div", { className: cn(ui.metaWrap), children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blencm/ui",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "private": false,
5
5
  "author": "Bleker <bleker@blencm.com>",
6
6
  "description": "Installable React UI library built on Radix UI and Tailwind CSS. Accessible primitives, form helpers (React Hook Form + Zod), DataTable, SearchableSelect, date/time pickers, dialogs and toasts. Import from npm — no copy-paste into src/components.",