@andrilla/mado-ui 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.
Files changed (9) hide show
  1. package/README.md +21 -61
  2. package/dist/client.cjs +4862 -4899
  3. package/dist/client.esm.js +4862 -4899
  4. package/dist/components/chevron-up-down-anime.d.ts +6 -0
  5. package/dist/css/index.css +43 -33
  6. package/dist/index.cjs +4862 -4899
  7. package/dist/mado-ui.esm.js +4862 -4899
  8. package/dist/utils/custom-tailwind-merge.d.ts +2 -2
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
+ ![窓](./public/mado.svg)
2
+
1
3
  # 窓 <sup>(mado)</sup> UI
2
4
 
3
- 窓 UI is a collection of opinionated React components built on Tailwind CSS 4.
5
+ 窓 UI is a collection of opinionated React 19 components built on Tailwind CSS 4.
4
6
  It was originally created for use on websites built by Andrilla, but is now
5
7
  available for anyone.
6
8
 
@@ -9,32 +11,34 @@ customization.
9
11
 
10
12
  ## How to Use
11
13
 
12
- In general it's best to download the latest versions of components to your
13
- project, rather than using `npm i mado-ui`, so you can modify the colors to fit
14
- your branding.
14
+ Just import the components you want to use, and use them.
15
+
16
+ ### Next.js
17
+
18
+ Use `'@andrilla/mado-ui/client'`
15
19
 
16
20
  ### Install
17
21
 
18
22
  Install or copy and paste the components you with to use.
19
23
 
20
24
  ```bash
21
- npm i mado-ui
25
+ npm i @andrilla/mado-ui
22
26
  ```
23
27
 
24
28
  ```bash
25
- pnpm add mado-ui
29
+ pnpm add @andrilla/mado-ui
26
30
  ```
27
31
 
28
32
  ```bash
29
- yarn add mado-ui
33
+ yarn add @andrilla/mado-ui
30
34
  ```
31
35
 
32
36
  ```bash
33
- bun add mado-ui
37
+ bun add @andrilla/mado-ui
34
38
  ```
35
39
 
36
40
  ```bash
37
- deno add npm:mado-ui
41
+ deno add npm:@andrilla/mado-ui
38
42
  ```
39
43
 
40
44
  ### Add CSS
@@ -42,46 +46,9 @@ deno add npm:mado-ui
42
46
  Import CSS above your tailwind import in your `globals.css`.
43
47
 
44
48
  ```css
45
- @import 'mado-ui/css';
49
+ @import '@andrilla/mado-ui/css';
46
50
  ```
47
51
 
48
- ## Tailwind Modifications and Additions
49
-
50
- If you use the default `mado-ui/css` import, then you will have access to the
51
- following classes, and you should expect some minor changes.
52
-
53
- ### Modifications
54
-
55
- You can review the `@layer base` to see these changes directly.
56
-
57
- 1. All elements are positioned relatively by default, instead of static.
58
- 2. Browser-defined minimum widths are removed.
59
- 3. `:focus-visible` uses Tailwind's ring instead of outline.
60
- 4. Default background and text colors are modified to `--color-neutral-50` and
61
- `--color-neutral-950` respectively.
62
- 5. `cursor: pointer;` is back on all buttons, in spite of Tailwind removing
63
- this.
64
- 6. Color inputs have removed browser default padding on
65
- `::-webkit-color-swatch-wrapper`.
66
- 7. Similar to borders, `<svg>` elements use `fill: currentColor;` as the
67
- default.
68
-
69
- ### Additions
70
-
71
- These apply to `@layer theme`, `@layer components`, `@utility`, and
72
- `@custom-variant` as mentioned.
73
-
74
- 1. Animation utility classes.
75
- 2. Modified animations to use the new utility classes.
76
- 3. More animations.
77
- 4. UI colors that work great in both light and dark mode.
78
- 5. More easing options.
79
- 6. More border radiuses.
80
- 7. Change gap to use variables for easy reuse in children.
81
- 8. New grid template rows and columns utility classes for 0fr to 1fr
82
- transitions.
83
- 9. Grid template rows and columns added as transition options.
84
-
85
52
  ## Components
86
53
 
87
54
  ### Button
@@ -89,8 +56,6 @@ These apply to `@layer theme`, `@layer components`, `@utility`, and
89
56
  A pre-styled button component with utility props for easy customization.
90
57
  Supports both button and anchor functionality.
91
58
 
92
- Exported from `mado-ui/button`:
93
-
94
59
  Default export:
95
60
 
96
61
  - Button
@@ -101,13 +66,11 @@ attributes.
101
66
  #### Example
102
67
 
103
68
  ```tsx
104
- import Button from 'mado-ui/button'
105
-
106
- <Button theme="primary" padding="md" rounded="lg">
69
+ <Button theme="orange" padding="md" rounded="lg">
107
70
  Click me
108
71
  </Button>
109
72
 
110
- <Button href="/about" theme="blue-gradient">
73
+ <Button href="/about" theme="blue" gradient>
111
74
  Link Button
112
75
  </Button>
113
76
  ```
@@ -137,31 +100,28 @@ both single-line and multiline text. Automatically removes hashes after scrollin
137
100
  #### Example
138
101
 
139
102
  ```tsx
140
- <Link href="/about" type="ltr" theme="blue">
103
+ <Link href="/about" type="ltr" theme="mauve">
141
104
  Learn more
142
105
  </Link>
143
106
 
144
- <Link href="/contact" type="fill-center" theme="red">
107
+ <Link href="/contact" type="fill-center" theme="cyan">
145
108
  Get in touch
146
109
  </Link>
147
110
  ```
148
111
 
149
112
  ### Modal
150
113
 
151
- A pre-built modal component based on @headlessui's Dialog. Handles transitions,
114
+ A pre-designed modal component built on @headlessui's Dialog. Handles transitions,
152
115
  drag-to-close functionality, and backdrop interactions.
153
116
 
154
- The Modal component must wrap both the ModalDialog and ModalTrigger components
155
- to work.
156
-
157
117
  #### Example
158
118
 
159
119
  ```tsx
160
120
  <Modal>
161
121
  <ModalTrigger>Open Modal</ModalTrigger>
162
122
  <ModalDialog>
163
- <h2>Modal Content</h2>
164
- <p>This is the modal content.</p>
123
+ <ModalTitle>Modal Content</ModalTitle>
124
+ <ModalDescription>This is the modal content.</ModalDescription>
165
125
  </ModalDialog>
166
126
  </Modal>
167
127
  ```