@starasia/text 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 +60 -0
- package/dist/Text.d.ts +4 -0
- package/dist/functions.d.ts +4 -0
- package/dist/index.d.ts +2 -0
- package/dist/text.es.js +2116 -0
- package/dist/text.umd.js +1790 -0
- package/dist/types.d.ts +68 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# starasia Text
|
|
2
|
+
|
|
3
|
+
starasia Text is a strict and customizable Text component for web development projects, designed for simplicity and adherence to strict design guidelines.
|
|
4
|
+
|
|
5
|
+
## Package installation
|
|
6
|
+
|
|
7
|
+
Instal package using pnpm
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @starasia/text
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Instal package using yarn
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add @starasia/text
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Instal package using npm
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm i @starasia/text
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Usage/Examples
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
import React from "react";
|
|
29
|
+
import {Text} from "@starasia/text";
|
|
30
|
+
import ReactDOM from "react-dom/client";
|
|
31
|
+
|
|
32
|
+
const App = () => (
|
|
33
|
+
<div>
|
|
34
|
+
<Text color="red-600" fontFamily="Montserrat" margin="spacing-10">
|
|
35
|
+
hello
|
|
36
|
+
</Text>
|
|
37
|
+
</div>
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Props @starasia/tabs
|
|
46
|
+
|
|
47
|
+
#### Props that you can pass to <Text {...props} />
|
|
48
|
+
|
|
49
|
+
| Prop Name | Value | required |
|
|
50
|
+
| :----------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
|
|
51
|
+
| fontSize | "xs","sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl", | false |
|
|
52
|
+
| fontWeight | "hairline","thin","light","normal","medium","semibold","bold","extrabold","black", | false |
|
|
53
|
+
| color | "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 |
|
|
54
|
+
| align | "left", "center", "right" | false |
|
|
55
|
+
| margin / marginTop / marginBottom / marginLeft / marginRight | "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 |
|
|
56
|
+
| children | React.ReactNode | true |
|
|
57
|
+
| lineHeight | "leading-3","leading-4","leading-5","leading-6","leading-7","leading-8","leading-9","leading-10","leading-none","leading-tight","leading-snug","leading-normal","leading-relaxed","leading-loose", | false |
|
|
58
|
+
| textAlign | "left", "center", "right" | false |
|
|
59
|
+
| fontFamily | "Poppins" / "Montserrat" | false |
|
|
60
|
+
| fontFamily | "0.03px", "0.21px", "0.252px", "0.04px", "0.24px", "0.18px" | false |
|
package/dist/Text.d.ts
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { TextProps } from './types';
|
|
2
|
+
|
|
3
|
+
export declare const currencyText: (value: any) => any;
|
|
4
|
+
export declare const joinClassName: (fontSize: TextProps["fontSize"], fontWeight: TextProps["fontWeight"], textAlign: TextProps["textAlign"], color: TextProps["color"], margin: TextProps["margin"], marginTop: TextProps["marginTop"], marginRight: TextProps["marginRight"], marginBottom: TextProps["marginBottom"], marginLeft: TextProps["marginLeft"], lineHeight: TextProps["lineHeight"], type: TextProps["variant"], truncate?: boolean) => string;
|
package/dist/index.d.ts
ADDED