@versini/ui-card 1.1.1 → 1.2.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 (3) hide show
  1. package/dist/index.d.ts +2 -51
  2. package/dist/index.js +68 -55
  3. package/package.json +6 -3
package/dist/index.d.ts CHANGED
@@ -1,57 +1,8 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { SpacingProps } from '@versini/ui-private/dist/utilities';
2
+ import { CardTypes } from '@versini/ui-card-types';
3
3
 
4
4
  declare const CARD_CLASSNAME = "av-card";
5
5
 
6
- type CardProps = {
7
- /**
8
- * The children to render.
9
- */
10
- children: React.ReactNode;
11
- /**
12
- * If the header prop is not provided, the Card must be
13
- * described via aria-labelledby.
14
- */
15
- "aria-labelledby"?: string;
16
- /**
17
- * CSS class(es) to add to the body.
18
- */
19
- bodyClassName?: string;
20
- /**
21
- * CSS class(es) to add to the main component wrapper.
22
- */
23
- className?: string;
24
- /**
25
- * If true, the card will be smaller.
26
- */
27
- compact?: boolean;
28
- /**
29
- * The content to render in the footer.
30
- */
31
- footer?: React.ReactNode;
32
- /**
33
- * CSS class(es) to add to the footer.
34
- */
35
- footerClassName?: string;
36
- /**
37
- * The content to render in the header.
38
- */
39
- header?: React.ReactNode;
40
- /**
41
- * CSS class(es) to add to the header.
42
- */
43
- headerClassName?: string;
44
- /**
45
- * The mode of Card. This will change the color of the Card.
46
- */
47
- mode?: "darker" | "dark" | "light" | "system" | "alt-system";
48
- /**
49
- * Whether or not to render the Card with a border.
50
- * @default false
51
- */
52
- noBorder?: boolean;
53
- } & SpacingProps;
54
-
55
- declare const Card: ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, spacing, mode, compact, noBorder, ...otherProps }: CardProps) => react_jsx_runtime.JSX.Element;
6
+ declare const Card: ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, spacing, mode, compact, noBorder, ...otherProps }: CardTypes.Props) => react_jsx_runtime.JSX.Element;
56
7
 
57
8
  export { CARD_CLASSNAME, Card };
package/dist/index.js CHANGED
@@ -1,120 +1,133 @@
1
- import { jsx as n, jsxs as v } from "react/jsx-runtime";
2
- import { useId as x } from "react";
1
+ import { jsx as n, jsxs as I } from "react/jsx-runtime";
2
+ import { useId as v } from "react";
3
3
  import b from "clsx";
4
4
  /*!
5
- @versini/ui-card v1.1.1
5
+ @versini/ui-card v1.2.0
6
6
  © 2024 gizmette.com
7
7
  */
8
8
  try {
9
9
  window.__VERSINI_UI_CARD__ || (window.__VERSINI_UI_CARD__ = {
10
- version: "1.1.1",
11
- buildTime: "12/18/2024 01:22 PM EST",
10
+ version: "1.2.0",
11
+ buildTime: "12/24/2024 06:47 PM EST",
12
12
  homepage: "https://github.com/aversini/ui-components",
13
13
  license: "MIT"
14
14
  });
15
15
  } catch {
16
16
  }
17
17
  const u = "av-card";
18
- function I(r) {
19
- const e = x();
18
+ function x(r) {
19
+ const e = v();
20
20
  return `${r}${e}`;
21
21
  }
22
- const $ = (r) => {
22
+ /*!
23
+ @versini/ui-spacing v1.0.0
24
+ © 2024 gizmette.com
25
+ */
26
+ try {
27
+ window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
28
+ version: "1.0.0",
29
+ buildTime: "12/24/2024 06:47 PM EST",
30
+ homepage: "https://github.com/aversini/ui-components",
31
+ license: "MIT"
32
+ });
33
+ } catch {
34
+ }
35
+ const S = (r) => {
23
36
  let e = "";
24
37
  if (typeof r == "number" || typeof r == "string")
25
38
  e = "m-" + r;
26
39
  else {
27
- const d = [];
28
- (r == null ? void 0 : r.t) !== void 0 && d.push(`mt-${r.t}`), (r == null ? void 0 : r.r) !== void 0 && d.push(`mr-${r.r}`), (r == null ? void 0 : r.b) !== void 0 && d.push(`mb-${r.b}`), (r == null ? void 0 : r.l) !== void 0 && d.push(`ml-${r.l}`), e = d.join(" ");
40
+ const t = [];
41
+ (r == null ? void 0 : r.t) !== void 0 && t.push(`mt-${r.t}`), (r == null ? void 0 : r.r) !== void 0 && t.push(`mr-${r.r}`), (r == null ? void 0 : r.b) !== void 0 && t.push(`mb-${r.b}`), (r == null ? void 0 : r.l) !== void 0 && t.push(`ml-${r.l}`), e = t.join(" ");
29
42
  }
30
43
  return e;
31
- }, A = ({
44
+ }, w = ({
32
45
  className: r,
33
46
  headerClassName: e,
34
- bodyClassName: d,
35
- footerClassName: t,
47
+ bodyClassName: t,
48
+ footerClassName: o,
36
49
  spacing: p,
37
- mode: o,
50
+ mode: d,
38
51
  compact: l,
39
52
  noBorder: i
40
53
  }) => {
41
- const f = b(
54
+ const h = b(
42
55
  u,
43
56
  r,
44
57
  "rounded-md",
45
- $(p),
58
+ S(p),
46
59
  {
47
60
  "border-none": i,
48
61
  "border-2": !i,
49
62
  "p-4": !l,
50
63
  "p-1 sm:p-2": l,
51
- "border-border-accent bg-surface-darker text-copy-light": o === "darker",
52
- "border-border-accent bg-surface-dark text-copy-light": o === "dark",
53
- "border-border-dark bg-surface-lighter text-copy-dark": o === "light",
54
- "border-border-dark bg-surface-lighter text-copy-dark dark:border-border-accent dark:bg-surface-dark dark:text-copy-light": o === "system",
55
- "border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": o === "alt-system"
64
+ "border-border-accent bg-surface-darker text-copy-light": d === "darker",
65
+ "border-border-accent bg-surface-dark text-copy-light": d === "dark",
66
+ "border-border-dark bg-surface-lighter text-copy-dark": d === "light",
67
+ "border-border-dark bg-surface-lighter text-copy-dark dark:border-border-accent dark:bg-surface-dark dark:text-copy-light": d === "system",
68
+ "border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": d === "alt-system"
56
69
  }
57
- ), h = e || b(`${u}__header mt-0 border-b-2`, {
58
- "text-copy-light border-border-accent": o === "darker",
59
- "border-border-accent": o === "dark",
60
- "border-border-medium": o === "light",
61
- "border-border-medium dark:border-border-accent": o === "system",
62
- "border-border-accent dark:border-border-medium": o === "alt-system",
70
+ ), _ = e || b(`${u}__header mt-0 border-b-2`, {
71
+ "text-copy-light border-border-accent": d === "darker",
72
+ "border-border-accent": d === "dark",
73
+ "border-border-medium": d === "light",
74
+ "border-border-medium dark:border-border-accent": d === "system",
75
+ "border-border-accent dark:border-border-medium": d === "alt-system",
63
76
  "mb-4": !l,
64
77
  "mb-2": l
65
- }), g = b(d), k = t || b(`${u}__footer pt-2`);
78
+ }), f = b(t), g = o || b(`${u}__footer pt-2`);
66
79
  return {
67
- wrapper: f,
68
- header: h,
69
- body: g,
70
- footer: k
80
+ wrapper: h,
81
+ header: _,
82
+ body: f,
83
+ footer: g
71
84
  };
72
85
  };
73
- function C({
86
+ function A({
74
87
  id: r,
75
88
  content: e,
76
- userAriaLabelledby: d,
77
- className: t
89
+ userAriaLabelledby: t,
90
+ className: o
78
91
  }) {
79
- return typeof e == "string" ? /* @__PURE__ */ n("h2", { id: r, className: t, children: e }) : d ? /* @__PURE__ */ n("div", { className: t, children: e }) : e ? /* @__PURE__ */ n("div", { className: t, id: r, children: e }) : null;
92
+ return typeof e == "string" ? /* @__PURE__ */ n("h2", { id: r, className: o, children: e }) : t ? /* @__PURE__ */ n("div", { className: o, children: e }) : e ? /* @__PURE__ */ n("div", { className: o, id: r, children: e }) : null;
80
93
  }
81
94
  const E = ({
82
95
  header: r,
83
96
  headerClassName: e,
84
- footer: d,
85
- footerClassName: t,
97
+ footer: t,
98
+ footerClassName: o,
86
99
  children: p,
87
- className: o,
100
+ className: d,
88
101
  bodyClassName: l,
89
102
  "aria-labelledby": i,
90
- spacing: f,
91
- mode: h = "system",
92
- compact: g = !1,
93
- noBorder: k = !1,
94
- ..._
103
+ spacing: h,
104
+ mode: _ = "system",
105
+ compact: f = !1,
106
+ noBorder: g = !1,
107
+ ...y
95
108
  }) => {
96
109
  let s = null, c = null;
97
- const m = typeof r == "string", y = I(u), a = A({
98
- className: o,
110
+ const m = typeof r == "string", k = x(u), a = w({
111
+ className: d,
99
112
  headerClassName: e,
100
113
  bodyClassName: l,
101
- footerClassName: t,
102
- spacing: f,
103
- mode: h,
104
- compact: g,
105
- noBorder: k
114
+ footerClassName: o,
115
+ spacing: h,
116
+ mode: _,
117
+ compact: f,
118
+ noBorder: g
106
119
  });
107
- return m ? (s = y, c = s) : !m && r && i ? (s = null, c = i) : !m && r && !i ? (s = y, c = s) : (s = null, c = i || null), /* @__PURE__ */ n("div", { className: a.wrapper, children: /* @__PURE__ */ v(
120
+ return m ? (s = k, c = s) : !m && r && i ? (s = null, c = i) : !m && r && !i ? (s = k, c = s) : (s = null, c = i || null), /* @__PURE__ */ n("div", { className: a.wrapper, children: /* @__PURE__ */ I(
108
121
  "section",
109
122
  {
110
123
  ...c && {
111
124
  "aria-labelledby": c
112
125
  },
113
126
  className: a.body,
114
- ..._,
127
+ ...y,
115
128
  children: [
116
129
  /* @__PURE__ */ n(
117
- C,
130
+ A,
118
131
  {
119
132
  ...s && { id: s },
120
133
  content: r,
@@ -123,7 +136,7 @@ const E = ({
123
136
  }
124
137
  ),
125
138
  /* @__PURE__ */ n("div", { children: p }),
126
- d ? /* @__PURE__ */ n("div", { className: a.footer, children: d }) : null
139
+ t ? /* @__PURE__ */ n("div", { className: a.footer, children: t }) : null
127
140
  ]
128
141
  }
129
142
  ) });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-card",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -39,13 +39,16 @@
39
39
  },
40
40
  "dependencies": {
41
41
  "@tailwindcss/typography": "0.5.15",
42
+ "@versini/ui-card-types": "1.1.0",
42
43
  "@versini/ui-hooks": "4.3.0",
43
- "@versini/ui-private": "1.5.1",
44
+ "@versini/ui-private": "1.6.0",
45
+ "@versini/ui-spacing": "1.0.0",
46
+ "@versini/ui-spacing-types": "1.0.0",
44
47
  "clsx": "2.1.1",
45
48
  "tailwindcss": "3.4.17"
46
49
  },
47
50
  "sideEffects": [
48
51
  "**/*.css"
49
52
  ],
50
- "gitHead": "123c2555b25210da73697c4fdd3b6a5f67a3b993"
53
+ "gitHead": "cb948414a675c01f3328ed6470ccf4b58f73534f"
51
54
  }