@starasia/box 1.0.0
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 +103 -0
- package/dist/Box.d.ts +4 -0
- package/dist/box.es.js +7016 -0
- package/dist/box.umd.js +5557 -0
- package/dist/index.d.ts +2 -0
- package/dist/types.d.ts +148 -0
- package/package.json +37 -0
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# starasia Box
|
|
2
|
+
|
|
3
|
+
starasia Box is a strict and customizable Box component for web development projects, designed for simplicity and adherence to strict design guidelines.
|
|
4
|
+
|
|
5
|
+
## Screenshots
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Package instalation
|
|
10
|
+
|
|
11
|
+
Instal package using pnpm
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
pnpm add @starasia/box
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Instal package using yarn
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add @starasia/box
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Instal package using npm
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm i @starasia/box
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage/Examples
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import React from "react";
|
|
33
|
+
import {Box} from "@starasia/box";
|
|
34
|
+
import ReactDOM from "react-dom/client";
|
|
35
|
+
|
|
36
|
+
const App = () => (
|
|
37
|
+
<div>
|
|
38
|
+
<Box
|
|
39
|
+
shadow="shadow-2xl"
|
|
40
|
+
display="flex"
|
|
41
|
+
direction="row"
|
|
42
|
+
justify="center"
|
|
43
|
+
align="center"
|
|
44
|
+
width="width-max"
|
|
45
|
+
customWidth={"100px"}
|
|
46
|
+
customMargin={"100px"}
|
|
47
|
+
customPadding={"100px"}
|
|
48
|
+
borderRadius="rounded-lg"
|
|
49
|
+
customBorder={"1px solid red"}
|
|
50
|
+
bg="blue-300"
|
|
51
|
+
>
|
|
52
|
+
Box
|
|
53
|
+
</Box>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Props @starasia/toggle
|
|
62
|
+
|
|
63
|
+
#### Props that you can pass to <Toggle {...props} />
|
|
64
|
+
|
|
65
|
+
| Prop Name | Value | required |
|
|
66
|
+
| :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
|
|
67
|
+
| fullWidth | boolean | false |
|
|
68
|
+
| fullHeight | boolean | false |
|
|
69
|
+
| display | "flex","block","inline-block","inline-flex","none", | false |
|
|
70
|
+
| direction | "row","column","sm-row","sm-column","md-row","md-column","lg-row","lg-column","xl-row","xl-column", | false |
|
|
71
|
+
| justify | "flex-start","flex-end","center","space-between","space-around","space-evenly", | false |
|
|
72
|
+
| align | "flex-start","flex-end","center","baseline","stretch", | false |
|
|
73
|
+
| gap / rowGap / margin / marginTop / marginBottom /marginLeft / marginRight / marginBlock / marginInline | "xs","sm","md","lg","auto","spacing-0","spacing-1","spacing-2","spacing-3","spacing-4","spacing-5","spacing-6","spacing-8","spacing-10","spacing-12","spacing-16","spacing-20","spacing-24","spacing-32","spacing-40","spacing-48","spacing-56","spacing-64", | false |
|
|
74
|
+
| padding / paddingTop / paddingBottom / paddingLeft / paddingRight / paddingBlock / paddingInline | "xs","sm","md","lg","spacing-0","spacing-1","spacing-2","spacing-3","spacing-4","spacing-5","spacing-6","spacing-8","spacing-10","spacing-12","spacing-16","spacing-20","spacing-24","spacing-32","spacing-40","spacing-48","spacing-56","spacing-64", | false |
|
|
75
|
+
| bg / borderColor | "primary", "secondary", "tertiary","success", "error", "warning", "info","text", "text-light", "text-muted", "text-dark","gray-50","gray-100","gray-200","gray-300","gray-400","gray-500","gray-600","gray-700","gray-800","gray-900","gray-950","red-50","red-100","red-200","red-300","red-400","red-500","red-600","red-700","red-800","red-900","red-950","orange-50","orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-950","yellow-50","yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","yellow-950","green-50","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","green-950","blue-50","blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","blue-950","purple-50","purple-100","purple-200","purple-300","purple-400","purple-500","purple-600","purple-700","purple-800","purple-900","purple-950" | false |
|
|
76
|
+
| variant | "article" / "aside" / "header" / "main" / "nav" / "section" | false |
|
|
77
|
+
| flex | "1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45" | false |
|
|
78
|
+
| show / hide | "mobile" / "tablet" / "desktop" | false |
|
|
79
|
+
| minWidth / width | "width-0","width-1","width-2","width-3","width-4","width-5","width-6","width-8","width-10","width-12","width-16","width-20","width-24","width-32","width-40","width-48","width-56","width-64","width-xs","width-sm","width-md","width-lg","width-auto","width-1-2","width-1-3","width-2-3","width-1-4","width-2-4","width-3-4","width-1-5","width-2-5","width-3-5","width-4-5","width-1-6","width-2-6","width-3-6","width-4-6","width-5-6","width-full","width-screen","width-min","width-max","width-fit ", | false |
|
|
80
|
+
| shadow | "shadow-sm","shadow-md","shadow-lg","shadow-xl","shadow-2xl","shadow-inner","shadow", | false |
|
|
81
|
+
| flexWrap / wrap | "nowrap","wrap","wrap-reverse","initial","inherit" | false |
|
|
82
|
+
| height | "height-0","height-1","height-2","height-3","height-4","height-5","height-6","height-8","height-10","height-12","height-16","height-20","height-24","height-32","height-40","height-48","height-56","height-64","height-xs","height-sm","height-md","height-lg","height-auto","height-1-2","height-1-3","height-2-3","height-1-4","height-2-4","height-3-4","height-1-5","height-2-5","height-3-5","height-4-5","height-1-6","height-2-6","height-3-6","height-4-6","height-5-6","height-full","height-screen","height-min","height-max","height-fit", | false |
|
|
83
|
+
| borderRadius / borderTopLeftRadius / borderTopRightRadius / borderBottomRightRadius / borderBottomLeftRadius | "rounded-none","rounded-xs","rounded-sm","rounded-base","rounded-md","rounded-lg","rounded-xl","rounded-2xl","rounded-3xl","rounded-4xl","rounded-full" | false |
|
|
84
|
+
| borderWidth | "border-0","border-2","border-4","border-8","border","border-t-0","border-t-2","border-t-4","border-t-8","border-t","border-r-0","border-r-2","border-r-4","border-r-8","border-r","border-b-0","border-b-2","border-b-4","border-b-8,","border-b","border-l-0","border-l-2","border-l-4","border-l-8","border-l","border-x-0","border-x-2","border-x-4","border-x-8","border-x","border-y-0","border-y-2","border-y-4","border-y-8","border-y", | false |
|
|
85
|
+
| borderStyle | "border-solid","border-dashed","border-dotted","border-double","border-hidden","border-none","border-solid-t","border-dashed-t","border-dotted-t","border-double-t","border-hidden-t","border-none-t","border-solid-r","border-dashed-r","border-dotted-r","border-double-r","border-hidden-r","border-none-r","border-solid-b","border-dashed-b","border-dotted-b","border-double-b","border-hidden-b","border-none-b","border-solid-l","border-dashed-l","border-dotted-l","border-double-l","border-hidden-l","border-none-l" | false |
|
|
86
|
+
| position | "static","absolute","fixed","relative","sticky","initial","inherit" | false |
|
|
87
|
+
| top | "top-0" | false |
|
|
88
|
+
| left | "left-0" | false |
|
|
89
|
+
| right | "right-0" | false |
|
|
90
|
+
| bottom | "bottom-0" | false |
|
|
91
|
+
| Translate | "translate-x-0","translate-y-0","translate-x-1","translate-y-1","translate-x-2","translate-y-2","translate-x-3","translate-y-3","translate-x-4","translate-y-4","translate-x-5","translate-y-5","translate-x-6","translate-y-6","translate-x-7","translate-y-7","translate-x-8","translate-y-8","translate-x-9","translate-y-9","translate-x-10","translate-y-10","translate-x-11","translate-y-11","translate-x-12","translate-y-12","translate-x-14","translate-y-14","translate-x-16","translate-y-16","translate-x-20","translate-y-20","translate-x-24","translate-y-24","translate-x-28","translate-y-28","translate-x-32","translate-y-32","translate-x-36","translate-y-36","translate-x-40","translate-y-40","translate-x-44","translate-y-44","translate-x-48","translate-y-48","translate-x-52","translate-y-52","translate-x-56","translate-y-56","translate-x-60","translate-y-60","translate-x-64","translate-y-64","translate-x-72","translate-y-72","translate-x-80","translate-y-80","translate-x-96","translate-y-96","translate-x-1-2","translate-x-1-3","translate-x-2-3","translate-x-1-4","translate-x-2-4","translate-x-3-4","translate-x-full","translate-y-1-2","translate-y-1-3","translate-y-2-3","translate-y-1-4","translate-y-2-4","translate-y-3-4","translate-y-full" | false |
|
|
92
|
+
| overflow | "overflow-auto","overflow-hidden","overflow-clip","overflow-visible","overflow-scroll","overflow-x-auto","overflow-y-auto","overflow-x-hidden","overflow-y-hidden","overflow-x-clip","overflow-y-clip","overflow-x-visible","overflow-y-visible","overflow-x-scroll","overflow-y-scroll" | false |
|
|
93
|
+
| cursor | "pointer" | false |
|
|
94
|
+
| customBorder | CSSProperties["border"] | false |
|
|
95
|
+
| customMaxHeight | CSSProperties["maxHeight"] | false |
|
|
96
|
+
| customMinHeight | CSSProperties["minHeight"] | false |
|
|
97
|
+
| customMaxWidth | CSSProperties["maxWidth"] | false |
|
|
98
|
+
| customMinWidth | CSSProperties["minWidth"] | false |
|
|
99
|
+
| customWidth | CSSProperties["width"] | false |
|
|
100
|
+
| customHeight | CSSProperties["height"] | false |
|
|
101
|
+
| customBackgroundColor | CSSProperties["backgroundColor"] | false |
|
|
102
|
+
| customMargin | CSSProperties["margin"] | false |
|
|
103
|
+
| customPadding | CSSProperties["padding"] | false |
|
package/dist/Box.d.ts
ADDED