@keenthemes/ktui 1.0.3 → 1.0.5

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 (2) hide show
  1. package/README.md +189 -79
  2. package/package.json +2 -4
package/README.md CHANGED
@@ -6,119 +6,229 @@
6
6
 
7
7
  ---
8
8
 
9
- ## 🚀 Quick Start
9
+ ## Installation
10
+
11
+ Before you begin, ensure you have installed [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com/), and have a working Tailwind based project.
12
+
13
+ ### Install via NPM
10
14
 
11
15
  ```bash
12
- # Install dependencies
13
- yarn install
14
- # or
15
- npm install
16
-
17
- # Build the library (development mode)
18
- yarn build
19
- # or
20
- npm run build
16
+ npm i @keenthemes/ktui
21
17
  ```
22
18
 
23
19
  ---
24
20
 
25
- ## 📦 Installation
21
+ ## Variables
22
+
23
+ Include KTUI variables in your Tailwind entry file `style.css`:
24
+
25
+ ```css
26
+ /** Colors **/
27
+ :root {
28
+ /** Base Colors **/
29
+ --background: oklch(1 0 0); /* --color-white */
30
+ --foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
31
+ --card: oklch(1 0 0); /* --color-white */
32
+ --card-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
33
+ --popover: oklch(1 0 0); /* --color-white */
34
+ --popover-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
35
+ --primary: oklch(62.3% 0.214 259.815); /* --color-blue-500 */
36
+ --primary-foreground: oklch(1 0 0); /* --color-white */
37
+ --secondary: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
38
+ --secondary-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
39
+ --muted: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
40
+ --muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
41
+ --accent: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
42
+ --accent-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
43
+ --destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
44
+ --destructive-foreground: oklch(1 0 0); /* --color-white */
45
+ --mono: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
46
+ --mono-foreground: oklch(1 0 0); /* --color-white */
47
+
48
+ /** Base Styles **/
49
+ --border: oklch(94% 0.004 286.32); /* between --color-zinc-100 and --color-zinc-200 */
50
+ --input: oklch(92% 0.004 286.32); /* --color-zinc-200 */
51
+ --ring: oklch(87.1% 0.006 286.286); /* --color-zinc-400 */
52
+ --radius: 0.5rem;
53
+ }
54
+
55
+ .dark {
56
+ /** Base Colors **/
57
+ --background: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
58
+ --foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
59
+ --card: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
60
+ --card-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
61
+ --popover: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
62
+ --popover-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
63
+ --primary: oklch(54.6% 0.245 262.881); /* --color-blue-600 */
64
+ --primary-foreground: oklch(1 0 0); /* --color-white */
65
+ --secondary: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
66
+ --secondary-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
67
+ --muted: oklch(21% 0.006 285.885); /* --color-zinc-900 */
68
+ --muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
69
+ --accent: oklch(21% 0.006 285.885); /* --color-zinc-900 */
70
+ --accent-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
71
+ --destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
72
+ --destructive-foreground: oklch(1 0 0); /* --color-white */
73
+ --mono: oklch(87.1% 0.006 286.286); /* --color-zinc-300 */
74
+ --mono-foreground: oklch(0 0 0); /* --color-black */
75
+
76
+ /** Base Styles **/
77
+ --border: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
78
+ --input: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
79
+ --ring: oklch(27.4% 0.006 286.033); /* --color-zinc-600 */
80
+ }
81
+
82
+ /** Theme Setup **/
83
+ @theme inline {
84
+ /** Base Colors **/
85
+ --color-background: var(--background);
86
+ --color-foreground: var(--foreground);
87
+
88
+ --color-card: var(--card);
89
+ --color-card-foreground: var(--card-foreground);
90
+
91
+ --color-popover: var(--popover);
92
+ --color-popover-foreground: var(--popover-foreground);
93
+
94
+ --color-muted: var(--muted);
95
+ --color-muted-foreground: var(--muted-foreground);
96
+
97
+ --color-accent: var(--accent);
98
+ --color-accent-foreground: var(--accent-foreground);
99
+
100
+ --color-primary: var(--primary);
101
+ --color-primary-foreground: var(--primary-foreground);
102
+
103
+ --color-secondary: var(--secondary);
104
+ --color-secondary-foreground: var(--secondary-foreground);
105
+
106
+ --color-destructive: var(--destructive);
107
+ --color-destructive-foreground: var(--destructive-foreground);
108
+
109
+ --color-mono: var(--mono);
110
+ --color-mono-foreground: var(--mono-foreground);
111
+
112
+ /** Base Styles **/
113
+ --color-border: var(--border);
114
+ --color-input: var(--input);
115
+ --color-ring: var(--ring);
116
+
117
+ --radius-xl: calc(var(--radius) + 4px);
118
+ --radius-lg: var(--radius);
119
+ --radius-md: calc(var(--radius) - 2px);
120
+ --radius-sm: calc(var(--radius) - 4px);
121
+ }
122
+ ```
26
123
 
27
- Add KTUI to your project:
124
+ ---
28
125
 
29
- ```bash
30
- yarn add ktui
31
- # or
32
- npm install ktui
126
+ ## Dark Mode
127
+
128
+ To enable automated dark mode support add below Tailwind variant in your Tailwind entry file `style.css`:
129
+
130
+ ```css
131
+ @custom-variant dark (&:is(.dark *));
33
132
  ```
34
133
 
35
134
  ---
36
135
 
37
- ## ✨ Usage
136
+ ## Styles
38
137
 
39
- ### 1. Using as a Script in HTML
138
+ Include KTUI styles in your Tailwind entry file `style.css`:
40
139
 
41
- ```html
42
- <link rel="stylesheet" href="/path/to/ktui/styles.css" />
43
- <script src="/path/to/ktui/dist/ktui.js"></script>
44
- <script>
45
- // Initialize all KTUI components after DOM is ready
46
- window.KTComponents.init();
47
- </script>
140
+ ```css
141
+ @import "./node_modules/ktui/styles.css";
48
142
  ```
49
143
 
50
- ### 2. Using as a Module in TypeScript/JavaScript
144
+ ---
145
+
146
+ ## Font
147
+
148
+ Specify a font family of your choice in your Tailwind entry file `style.css`:
51
149
 
52
- ```ts
53
- import KTComponents from 'ktui';
54
- KTComponents.init();
150
+ ```css
151
+ @theme {
152
+ --default-font-family: Inter;
153
+ }
55
154
  ```
56
155
 
57
- ---
156
+ Include the font file:
58
157
 
59
- ## 🧩 Available Components
60
-
61
- KTUI provides a wide range of UI components, including:
62
-
63
- - **Dropdown** (`KTDropdown`)
64
- - **Modal** (`KTModal`)
65
- - **Drawer** (`KTDrawer`)
66
- - **Collapse** (`KTCollapse`)
67
- - **Dismiss** (`KTDismiss`)
68
- - **Tabs** (`KTTabs`)
69
- - **Accordion** (`KTAccordion`)
70
- - **Scrollspy** (`KTScrollspy`)
71
- - **Scrollable** (`KTScrollable`)
72
- - **Scrollto** (`KTScrollto`)
73
- - **Sticky** (`KTSticky`)
74
- - **Reparent** (`KTReparent`)
75
- - **Toggle** (`KTToggle`)
76
- - **Tooltip** (`KTTooltip`)
77
- - **Stepper** (`KTStepper`)
78
- - **Theme Switch** (`KTThemeSwitch`)
79
- - **Image Input** (`KTImageInput`)
80
- - **Toggle Password** (`KTTogglePassword`)
81
- - **DataTable** (`KTDataTable`)
82
- - **Datepicker** (`KTDatepicker`)
83
- - **Select** (`KTSelect`)
158
+ ```html
159
+ <html>
160
+ <head>
161
+ ...
162
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
163
+ ...
164
+ </head>
165
+ <body className="antialiased">
166
+ ....
167
+ </body>
168
+ </html>
169
+ ```
84
170
 
85
171
  ---
86
172
 
87
- ## 🌟 Features
173
+ ## Assets
88
174
 
89
- - Modular and customizable DOM-based components
90
- - Built with accessibility in mind
91
- - Theming and dark mode support
92
- - Responsive design
93
- - Easy integration with any web framework or static site
94
- - TypeScript support for type safety and autocompletion
175
+ Include KTUI JavaScript, Tailwind CSS, and fonts:
176
+
177
+ ```html
178
+ <html>
179
+ <head>
180
+ ...
181
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
182
+ <link href="my_project_root/css/styles.css" rel="stylesheet"/>
183
+ ...
184
+ </head>
185
+ <body className="antialiased">
186
+ ....
187
+ </body>
188
+ <script src="./node_modules/@keenthemes/ktui/dist/ktui.min.js">
189
+ </script>
190
+ </html>
191
+ ```
95
192
 
96
193
  ---
97
194
 
98
- ## 🛠 Scripts
195
+ ## RTL Support
99
196
 
100
- - `npm run build` – Build the library using webpack in development mode
101
- - `npm run build:prod` – Build the library using webpack in production mode
102
- - `npm run build:lib` – Build the library outputs for CommonJS and ES Modules using TypeScript
103
- - `npm run lint` – Lint the source files with ESLint
104
- - `npm run format` – Format the source files with Prettier
197
+ To globally setup the RTL direction add a `dir="rtl"` attribute on the html as shown below:
105
198
 
106
- ---
199
+ ```html
200
+ <!-- Setup rtl mode -->
201
+ <html dir="rtl">
202
+ <!-- HTML markup -->
203
+ </html>
204
+ ```
205
+
206
+ KTUI utilizes the logical CSS properties as the default method for handling RTL support. This approach simplifies RTL support by using context-aware properties that adjust based on the document's text direction.
107
207
 
108
- ## 🤝 Contributing
208
+ ```html
209
+ <!-- Using logical properties -->
210
+ <div class="text-start ps-5">
211
+ Example text
212
+ </div>
213
+ ```
109
214
 
110
- We welcome contributions! To get started:
215
+ For specific cases, you can use the `rtl:*` Tailwind modifier to easily control alignments for both LTR and RTL directions.
216
+
217
+ ```html
218
+ <!-- Using rtl modifier -->
219
+ <div class="text-left pl-5 rtl:text-right rtl:pr-5">
220
+ Example text
221
+ </div>
222
+ ```
223
+
224
+ ---
111
225
 
112
- 1. Fork the repository
113
- 2. Create your feature branch (`git checkout -b feature/YourFeature`)
114
- 3. Commit your changes (`git commit -m 'Add some feature'`)
115
- 4. Push to the branch (`git push origin feature/YourFeature`)
116
- 5. Open a pull request
226
+ ## License
117
227
 
118
- For guidelines, see [CONTRIBUTING.md](CONTRIBUTING.md).
228
+ KTUI is distributed under the MIT license. See [LICENSE.md](https://github.com/keenthemes/reui/blob/main/LICENSE.md) for full details.
119
229
 
120
230
  ---
121
231
 
122
- ## 📄 License
232
+ ## Contributing
123
233
 
124
- KTUI is licensed under the MIT License. See the [LICENSE.md](LICENSE.md) file for details.
234
+ Please see our [CONTRIBUTING.md](https://github.com/keenthemes/reui/blob/main/CONTRIBUTING.md) for guidelines if you wish to contribute to KTUI.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenthemes/ktui",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Free & Open-Source Tailwind UI Components by Keenthemes",
5
5
  "homepage": "https://ktui.io",
6
6
  "keywords": [
@@ -49,6 +49,7 @@
49
49
  ],
50
50
  "author": "@keenthemes",
51
51
  "types": "lib/esm/index.d.ts",
52
+ "license": "MIT",
52
53
  "scripts": {
53
54
  "test": "echo \"Error: no test specified\" && exit 1",
54
55
  "build": "npx webpack --mode=development",
@@ -78,8 +79,5 @@
78
79
  },
79
80
  "dependencies": {
80
81
  "@popperjs/core": "^2.11.8"
81
- },
82
- "publishConfig": {
83
- "access": "public"
84
82
  }
85
83
  }