@devup-ui/react 1.0.19 → 1.0.21

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 (6) hide show
  1. package/README.md +43 -34
  2. package/dist/types/props/position.d.ts +1 -0
  3. package/dist/types/props/position.d.ts.map +1 -1
  4. package/dist/utils/global-css.d.ts +5 -1
  5. package/dist/utils/global-css.d.ts.map +1 -1
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -2,7 +2,6 @@
2
2
  <img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
3
3
  </div>
4
4
 
5
-
6
5
  <h3 align="center">
7
6
  Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
8
7
  </h3>
@@ -23,8 +22,8 @@
23
22
  <a href="https://discord.gg/8zjcGc7cWh">
24
23
  <img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
25
24
  </a>
26
- <a href="https://codecov.io/gh/dev-five-git/devup-ui" >
27
- <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
25
+ <a href="https://codecov.io/gh/dev-five-git/devup-ui" >
26
+ <img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
28
27
  </a>
29
28
  </div>
30
29
 
@@ -76,17 +75,17 @@ npm install @devup-ui/webpack-plugin
76
75
 
77
76
  Next.js Build Time and Build Size (github action - ubuntu-latest)
78
77
 
79
- | Library | Version | Build Time | Build Size |
80
- |--------------------------|----------|------------|-------------------|
81
- | tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
82
- | styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
83
- | vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
84
- | kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
85
- | panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
86
- | chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
87
- | mui | 7.3.2 | 22.21s | 94,231,958 bytes |
88
- | devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
89
- | devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
78
+ | Library | Version | Build Time | Build Size |
79
+ | ---------------------- | ------- | ---------- | ----------------- |
80
+ | tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
81
+ | styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
82
+ | vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
83
+ | kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
84
+ | panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
85
+ | chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
86
+ | mui | 7.3.2 | 22.21s | 94,231,958 bytes |
87
+ | devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
88
+ | devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
90
89
 
91
90
  ## How it works
92
91
 
@@ -94,30 +93,40 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
94
93
  Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
95
94
  We develop a preprocessor that considers all grammatical cases.
96
95
 
97
- ```typescript
98
- const before = <Box bg={"red"}/>
96
+ ```tsx
97
+ const before = <Box bg="red" />
99
98
 
100
- const after = <div className="d0"/>
99
+ const after = <div className="d0" />
101
100
  ```
102
101
 
103
102
  Variables are fully supported.
104
103
 
105
- ```typescript
106
- const before = <Box bg={colorVariable}/>
107
-
108
- const after = <div className="d0" style={{
109
- "--d0": colorVariable
110
- }}/>
104
+ ```tsx
105
+ const before = <Box bg={colorVariable} />
106
+
107
+ const after = (
108
+ <div
109
+ className="d0"
110
+ style={{
111
+ '--d0': colorVariable,
112
+ }}
113
+ />
114
+ )
111
115
  ```
112
116
 
113
117
  Various expressions and responsiveness are also fully supported.
114
118
 
115
- ```typescript
116
- const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
117
-
118
- const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
119
- "--d2": variable
120
- }}/>
119
+ ```tsx
120
+ const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
121
+
122
+ const after = (
123
+ <div
124
+ className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
125
+ style={{
126
+ '--d2': variable,
127
+ }}
128
+ />
129
+ )
121
130
  ```
122
131
 
123
132
  Support Theme with Typing
@@ -139,19 +148,19 @@ Support Theme with Typing
139
148
  }
140
149
  ```
141
150
 
142
- ```typescript
151
+ ```tsx
143
152
  // Type Safe
144
- <Text color="$text"/>
153
+ <Text color="$text" />
145
154
  ```
146
155
 
147
156
  Support Responsive And Pseudo Selector
148
157
 
149
158
  You can use responsive and pseudo selector.
150
159
 
151
- ```typescript
160
+ ```tsx
152
161
  // Responsive with Selector
153
- const box = <Box _hover={{bg: ["red", "blue"]}}/>
162
+ const box = <Box _hover={{ bg: ['red', 'blue'] }} />
154
163
 
155
164
  // Same
156
- const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
165
+ const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
157
166
  ```
package/dist/types/props/position.d.ts CHANGED
@@ -2,5 +2,6 @@ import { Property } from 'csstype';
2
2
  import { ResponsiveValue } from '../responsive-value';
3
3
  export interface DevupUiPositionProps {
4
4
  pos?: ResponsiveValue<Property.Position>;
5
+ positioning?: ResponsiveValue<'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right'>;
5
6
  }
6
7
  //# sourceMappingURL=position.d.ts.map
package/dist/types/props/position.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/types/props/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;CACzC"}
1
+ {"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/types/props/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACxC,WAAW,CAAC,EAAE,eAAe,CACzB,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CACjB,CAAA;CACF"}
package/dist/utils/global-css.d.ts CHANGED
@@ -20,8 +20,12 @@ interface FontFaceProps {
20
20
  fontFeatureSettings?: string;
21
21
  fontVariationSettings?: string;
22
22
  }
23
+ type Import = {
24
+ url: string;
25
+ query?: string;
26
+ } | string;
23
27
  export declare function globalCss(strings?: TemplateStringsArray | (Omit<GlobalCssProps, 'imports'> & {
24
- imports?: string[];
28
+ imports?: Import[];
25
29
  fontFaces?: FontFaceProps[];
26
30
  })): void;
27
31
  export declare function globalCss(): void;
package/dist/utils/global-css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"global-css.d.ts","sourceRoot":"","sources":["../../src/utils/global-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,KAAK,EACV,uBAAuB,EACvB,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAA;AAChC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAEjE,KAAK,aAAa,GACd,IAAI,cAAc,GAAG,EAAE,EAAE,GACzB,GAAG,MAAM,qBAAqB,GAAG,cAAc,GAAG,EAAE,EAAE,GACtD,GAAG,MAAM,oBAAoB,GAAG,cAAc,GAAG,EAAE,EAAE,GACrD,IAAI,eAAe,EAAE,GACrB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEjB,KAAK,cAAc,GAAG;KACnB,CAAC,IAAI,aAAa,CAAC,CAAC,EACjB,gBAAgB,GAChB,kBAAkB,GAClB,uBAAuB;CAC5B,CAAA;AAED,UAAU,aAAa;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,wBAAgB,SAAS,CACvB,OAAO,CAAC,EACJ,oBAAoB,GACpB,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;CAC5B,CAAC,GACL,IAAI,CAAA;AAEP,wBAAgB,SAAS,IAAI,IAAI,CAAA"}
1
+ {"version":3,"file":"global-css.d.ts","sourceRoot":"","sources":["../../src/utils/global-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,KAAK,EACV,uBAAuB,EACvB,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAA;AAChC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAEjE,KAAK,aAAa,GACd,IAAI,cAAc,GAAG,EAAE,EAAE,GACzB,GAAG,MAAM,qBAAqB,GAAG,cAAc,GAAG,EAAE,EAAE,GACtD,GAAG,MAAM,oBAAoB,GAAG,cAAc,GAAG,EAAE,EAAE,GACrD,IAAI,eAAe,EAAE,GACrB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEjB,KAAK,cAAc,GAAG;KACnB,CAAC,IAAI,aAAa,CAAC,CAAC,EACjB,gBAAgB,GAChB,kBAAkB,GAClB,uBAAuB;CAC5B,CAAA;AAED,UAAU,aAAa;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,KAAK,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAA;AACtD,wBAAgB,SAAS,CACvB,OAAO,CAAC,EACJ,oBAAoB,GACpB,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,CAAC,EAAE,aAAa,EAAE,CAAA;CAC5B,CAAC,GACL,IAAI,CAAA;AAEP,wBAAgB,SAAS,IAAI,IAAI,CAAA"}
package/package.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "css-in-js-framework",
17
17
  "react"
18
18
  ],
19
- "version": "1.0.19",
19
+ "version": "1.0.21",
20
20
  "type": "module",
21
21
  "publishConfig": {
22
22
  "access": "public"
@@ -40,9 +40,9 @@
40
40
  },
41
41
  "devDependencies": {
42
42
  "rollup-plugin-preserve-directives": "^0.4.0",
43
- "vite": "^7.1.6",
43
+ "vite": "^7.1.7",
44
44
  "vite-plugin-dts": "^4.5.4",
45
- "typescript": "^5.9.2",
45
+ "typescript": "^5.9.3",
46
46
  "@types/react": "^19"
47
47
  },
48
48
  "peerDependencies": {