@stack-spot/citric-react 0.34.2 → 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.
Files changed (7) hide show
  1. package/dist/citric.css +5 -0
  2. package/dist/components/Card.d.ts +7 -1
  3. package/dist/components/Card.d.ts.map +1 -1
  4. package/dist/components/Card.js +2 -2
  5. package/dist/components/Card.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/Card.tsx +9 -3
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); }
package/dist/components/Card.d.ts CHANGED
@@ -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
package/dist/components/Card.d.ts.map CHANGED
@@ -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;CACjC;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,kEAA0E,SAAS,CAAC,CAAC,CAAC,4CAc5H,CAAA"}
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
package/dist/components/Card.js.map CHANGED
@@ -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;AAgClE;;;;;;;;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,GAAG,KAAK,EAAgB;IACzH,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,CAAC,CAAC;QAC/F,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
+ {"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.34.2",
3
+ "version": "0.35.0",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
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