@stack-spot/citric-react 0.34.1 → 0.35.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/citric.css +5 -0
- package/dist/components/Card.d.ts +7 -1
- package/dist/components/Card.d.ts.map +1 -1
- package/dist/components/Card.js +2 -2
- package/dist/components/Card.js.map +1 -1
- package/dist/components/ErrorBoundary.js +1 -1
- package/dist/components/ErrorBoundary.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Card.tsx +9 -3
- package/src/components/ErrorBoundary.tsx +1 -1
package/dist/citric.css
CHANGED
|
@@ -2286,6 +2286,11 @@ input[data-citric="favorite"][type="checkbox"] {
|
|
|
2286
2286
|
border-radius: 4px;
|
|
2287
2287
|
transition: background-color 0.3s;
|
|
2288
2288
|
|
|
2289
|
+
&.row {
|
|
2290
|
+
flex-direction: row;
|
|
2291
|
+
align-items: center;
|
|
2292
|
+
}
|
|
2293
|
+
|
|
2289
2294
|
&.xxs { padding: var(--spacing-3); }
|
|
2290
2295
|
&.xs { padding: var(--spacing-4); }
|
|
2291
2296
|
&.sm { padding: var(--spacing-5); }
|
|
@@ -20,6 +20,12 @@ export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends
|
|
|
20
20
|
* @default 300
|
|
21
21
|
*/
|
|
22
22
|
bgLevel?: 300 | 400 | 500 | 600;
|
|
23
|
+
/**
|
|
24
|
+
* The direction of the items in the card.
|
|
25
|
+
*
|
|
26
|
+
* @default column
|
|
27
|
+
*/
|
|
28
|
+
direction?: 'column' | 'row';
|
|
23
29
|
}
|
|
24
30
|
export type CardProps<T extends SupportedTags> = (T extends 'a' ? React.JSX.IntrinsicElements['a'] : (T extends 'button' ? React.JSX.IntrinsicElements['button'] : React.JSX.IntrinsicElements['div'])) & BaseCardProps;
|
|
25
31
|
/**
|
|
@@ -31,6 +37,6 @@ export type CardProps<T extends SupportedTags> = (T extends 'a' ? React.JSX.Intr
|
|
|
31
37
|
* <Card>The card content</Card>
|
|
32
38
|
* ```
|
|
33
39
|
*/
|
|
34
|
-
export declare const Card: <T extends SupportedTags>({ tag, onClick, size, bgLevel, className, children, ...props }: CardProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export declare const Card: <T extends SupportedTags>({ tag, onClick, size, bgLevel, className, children, direction, ...props }: CardProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
35
41
|
export {};
|
|
36
42
|
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9G,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9G,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,6EAAqF,SAAS,CAAC,CAAC,CAAC,4CAcvI,CAAA"}
|
package/dist/components/Card.js
CHANGED
|
@@ -13,14 +13,14 @@ import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
|
13
13
|
* <Card>The card content</Card>
|
|
14
14
|
* ```
|
|
15
15
|
*/
|
|
16
|
-
export const Card = withRef(function Card({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) {
|
|
16
|
+
export const Card = withRef(function Card({ tag = 'div', onClick, size, bgLevel, className, children, direction, ...props }) {
|
|
17
17
|
const citric = useCitricController();
|
|
18
18
|
const clickable = onClick || props.tabIndex === 0 || tag === 'button' || tag === 'a';
|
|
19
19
|
const componentProps = {
|
|
20
20
|
tag,
|
|
21
21
|
component: 'card',
|
|
22
22
|
onClick,
|
|
23
|
-
className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]),
|
|
23
|
+
className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, direction, className]),
|
|
24
24
|
...applyStyles(props),
|
|
25
25
|
};
|
|
26
26
|
return tag === 'a' && citric?.renderLink
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAsClE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CACzB,SAAS,IAAI,CAA0B,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB;IACpI,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC,QAAQ,KAAK,CAAC,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,GAAG,CAAA;IACpF,MAAM,cAAc,GAAG;QACrB,GAAG;QACH,SAAS,EAAE,MAAM;QACjB,OAAO;QACP,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC1G,GAAG,WAAW,CAAC,KAAK,CAAC;KACb,CAAA;IACV,OAAO,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QACtC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAClD,CAAC,CAAC,KAAC,eAAe,OAAK,cAAc,YAAG,QAAQ,GAAmB,CAAA;AACvE,CAAC,CACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAgB7C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAuB;IAIxD,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;IACjB,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAC9B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACjC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAgB7C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAuB;IAIxD,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;IACjB,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAC9B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACjC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACtD,CAAC;IAEO,aAAa;QACnB,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACzF,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;YACvD,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI;YACjE,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAChC,CAAC;IAGD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IACtE,CAAC;;AAtCM;;;;WAAc,aAAa;GAAA"}
|
package/package.json
CHANGED
package/src/components/Card.tsx
CHANGED
|
@@ -26,7 +26,13 @@ export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends
|
|
|
26
26
|
*
|
|
27
27
|
* @default 300
|
|
28
28
|
*/
|
|
29
|
-
bgLevel?: 300 | 400 | 500 | 600,
|
|
29
|
+
bgLevel?: 300 | 400 | 500 | 600,
|
|
30
|
+
/**
|
|
31
|
+
* The direction of the items in the card.
|
|
32
|
+
*
|
|
33
|
+
* @default column
|
|
34
|
+
*/
|
|
35
|
+
direction?: 'column' | 'row',
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
// applying conditionals to the type in order to increase TS performance. Ideally we'd use React.JSX.IntrinsicElements[T].
|
|
@@ -45,14 +51,14 @@ export type CardProps<T extends SupportedTags> = (
|
|
|
45
51
|
* ```
|
|
46
52
|
*/
|
|
47
53
|
export const Card = withRef(
|
|
48
|
-
function Card<T extends SupportedTags>({ tag = 'div', onClick, size, bgLevel, className, children, ...props }: CardProps<T>) {
|
|
54
|
+
function Card<T extends SupportedTags>({ tag = 'div', onClick, size, bgLevel, className, children, direction, ...props }: CardProps<T>) {
|
|
49
55
|
const citric = useCitricController()
|
|
50
56
|
const clickable = onClick || props.tabIndex === 0 || tag === 'button' || tag === 'a'
|
|
51
57
|
const componentProps = {
|
|
52
58
|
tag,
|
|
53
59
|
component: 'card',
|
|
54
60
|
onClick,
|
|
55
|
-
className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]),
|
|
61
|
+
className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, direction, className]),
|
|
56
62
|
...applyStyles(props),
|
|
57
63
|
} as const
|
|
58
64
|
return tag === 'a' && citric?.renderLink
|