@stack-spot/citric-react 0.3.3 → 0.4.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/dist/components/CitricComponent.d.ts +1 -1
- package/dist/components/CitricComponent.d.ts.map +1 -1
- package/dist/components/CitricComponent.js.map +1 -1
- package/dist/components/Text.d.ts +14 -2
- package/dist/components/Text.d.ts.map +1 -1
- package/dist/components/Text.js +8 -2
- package/dist/components/Text.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CitricComponent.ts +1 -1
- package/src/components/Text.ts +19 -2
|
@@ -8,7 +8,7 @@ type Props<T extends keyof JSX.IntrinsicElements> = CustomProps<T> & JSX.Intrins
|
|
|
8
8
|
interface CitricComponentType {
|
|
9
9
|
<T extends keyof JSX.IntrinsicElements>(props: Props<T>): React.ReactNode;
|
|
10
10
|
}
|
|
11
|
-
export declare function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<
|
|
11
|
+
export declare function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<CustomProps<any>, 'tag'> & Record<string, any>): Record<string, any>;
|
|
12
12
|
export declare const CitricComponent: CitricComponentType;
|
|
13
13
|
export {};
|
|
14
14
|
//# sourceMappingURL=CitricComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IACpG,GAAG,EAAE,CAAC,CAAC;IACP,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAE7F,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC3E;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IACpG,GAAG,EAAE,CAAC,CAAC;IACP,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAE7F,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC3E;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKpI;AAGD,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CitricComponent.js","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBjD,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"CitricComponent.js","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBjD,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuD;IACnI,MAAM,WAAW,GAAwB,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;IAC/E,IAAI,WAAW;QAAE,WAAW,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAA;IAC/D,IAAI,YAAY;QAAE,WAAW,CAAC,oBAAoB,CAAC,GAAG,YAAY,CAAA;IAClE,OAAO,WAAW,CAAA;AACpB,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,eAAe,GAAwB,UAAU,CAC5D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;IACpD,OAAO,aAAa,CAAC,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;AACpD,CAAC,CACF,CAAA"}
|
|
@@ -17,11 +17,23 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
|
|
|
17
17
|
* @default false
|
|
18
18
|
*/
|
|
19
19
|
showMargins?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Shortcut to `style.fontWeight`.
|
|
22
|
+
*/
|
|
23
|
+
weight?: React.CSSProperties['fontWeight'];
|
|
24
|
+
/**
|
|
25
|
+
* Shortcut to `style.textAlign`.
|
|
26
|
+
*/
|
|
27
|
+
align?: React.CSSProperties['textAlign'];
|
|
28
|
+
/**
|
|
29
|
+
* Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
|
|
30
|
+
*/
|
|
31
|
+
nowrapEllipsis?: boolean;
|
|
20
32
|
}
|
|
21
33
|
export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>;
|
|
22
|
-
export declare function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<{
|
|
34
|
+
export declare function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<{
|
|
23
35
|
className: string;
|
|
24
36
|
style: import("react").CSSProperties | undefined;
|
|
25
|
-
} & Omit<TextProps<T>, "className" | "style" | "color" | "children" | "appearance" | "tag" | "showMargins">, HTMLElement>;
|
|
37
|
+
} & Omit<TextProps<T>, "className" | "style" | "color" | "children" | "weight" | "appearance" | "tag" | "align" | "showMargins" | "nowrapEllipsis">, HTMLElement>;
|
|
26
38
|
export {};
|
|
27
39
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG7D,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG7D,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAoC9E,wBAAgB,IAAI,CAAC,CAAC,SAAS,aAAa,EAC1C,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;;;kKAiB3H"}
|
package/dist/components/Text.js
CHANGED
|
@@ -33,11 +33,17 @@ const appearanceToTag = {
|
|
|
33
33
|
subtitle3: 'p',
|
|
34
34
|
subtitle4: 'p',
|
|
35
35
|
};
|
|
36
|
-
export function Text({ tag, appearance, color, showMargins, style, className, children, ...props }) {
|
|
36
|
+
export function Text({ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }) {
|
|
37
37
|
const renderedTag = tag || appearanceToTag[appearance || 'body2'];
|
|
38
38
|
const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined);
|
|
39
39
|
if (!appearance && !showMargins)
|
|
40
|
-
style = {
|
|
40
|
+
style = { margin: 0, ...style };
|
|
41
|
+
if (weight)
|
|
42
|
+
style = { fontWeight: weight, ...style };
|
|
43
|
+
if (align)
|
|
44
|
+
style = { textAlign: align, ...style };
|
|
45
|
+
if (nowrapEllipsis)
|
|
46
|
+
style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style };
|
|
41
47
|
return createElement(renderedTag, {
|
|
42
48
|
className: applyTextAppearance(listToClass([className, showMargins && 'text-with-margins']), renderedAppearance),
|
|
43
49
|
style: applyColor(style, color),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAqC9D,MAAM,eAAe,GAAsD;IACzE,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,OAAO;CACb,CAAA;AAED,MAAM,eAAe,GAA0C;IAC7D,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IAE1H,MAAM,WAAW,GAAG,GAAG,IAAI,eAAe,CAAC,UAAU,IAAI,OAAO,CAAC,CAAA;IACjE,MAAM,kBAAkB,GAAG,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACjF,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW;QAAE,KAAK,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAA;IAChE,IAAI,MAAM;QAAE,KAAK,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IACpD,IAAI,KAAK;QAAE,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAA;IACjD,IAAI,cAAc;QAAE,KAAK,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,CAAA;IAC5G,OAAO,aAAa,CAClB,WAAW,EACX;QACE,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,mBAAmB,CAAC,CAAC,EAAE,kBAAkB,CAAC;QAChH,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,GAAG,KAAK;KACT,EACD,QAAQ,CACT,CAAA;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -18,7 +18,7 @@ interface CitricComponentType {
|
|
|
18
18
|
<T extends keyof JSX.IntrinsicElements>(props: Props<T>): React.ReactNode,
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<
|
|
21
|
+
export function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<CustomProps<any>, 'tag'> & Record<string, any>) {
|
|
22
22
|
const citricProps: Record<string, any> = { ...props, 'data-citric': component }
|
|
23
23
|
if (colorScheme) citricProps['data-color-scheme'] = colorScheme
|
|
24
24
|
if (colorPalette) citricProps['data-color-palette'] = colorPalette
|
package/src/components/Text.ts
CHANGED
|
@@ -22,6 +22,18 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
|
|
|
22
22
|
* @default false
|
|
23
23
|
*/
|
|
24
24
|
showMargins?: boolean,
|
|
25
|
+
/**
|
|
26
|
+
* Shortcut to `style.fontWeight`.
|
|
27
|
+
*/
|
|
28
|
+
weight?: React.CSSProperties['fontWeight'],
|
|
29
|
+
/**
|
|
30
|
+
* Shortcut to `style.textAlign`.
|
|
31
|
+
*/
|
|
32
|
+
align?: React.CSSProperties['textAlign'],
|
|
33
|
+
/**
|
|
34
|
+
* Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
|
|
35
|
+
*/
|
|
36
|
+
nowrapEllipsis?: boolean,
|
|
25
37
|
}
|
|
26
38
|
|
|
27
39
|
export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>
|
|
@@ -60,10 +72,15 @@ const appearanceToTag: Record<TextAppearance, SupportedTags> = {
|
|
|
60
72
|
subtitle4: 'p',
|
|
61
73
|
}
|
|
62
74
|
|
|
63
|
-
export function Text<T extends SupportedTags>(
|
|
75
|
+
export function Text<T extends SupportedTags>(
|
|
76
|
+
{ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>,
|
|
77
|
+
) {
|
|
64
78
|
const renderedTag = tag || appearanceToTag[appearance || 'body2']
|
|
65
79
|
const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined)
|
|
66
|
-
if (!appearance && !showMargins) style = {
|
|
80
|
+
if (!appearance && !showMargins) style = { margin: 0, ...style }
|
|
81
|
+
if (weight) style = { fontWeight: weight, ...style }
|
|
82
|
+
if (align) style = { textAlign: align, ...style }
|
|
83
|
+
if (nowrapEllipsis) style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style }
|
|
67
84
|
return createElement(
|
|
68
85
|
renderedTag,
|
|
69
86
|
{
|