@kala-ui/react-app 0.1.0-beta.7 → 0.1.0-beta.8

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 (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/metric-card/metric-card.js +11 -1
  3. package/dist/config/metric-card.d.ts +10 -0
  4. package/dist/config/metric-card.js +10 -0
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @kala-ui/react-app
2
2
 
3
+ ## 0.1.0-beta.8
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+ - @kala-ui/react@0.1.0-beta.7
9
+
3
10
  ## 0.1.0-beta.7
4
11
 
5
12
  ### Patch Changes
package/dist/components/metric-card/metric-card.js CHANGED
@@ -44,6 +44,16 @@ function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, cl
44
44
  const meta = applySlot(metricCardStyles.meta, slotStyles?.meta);
45
45
  const changeSlot = applySlot(metricCardStyles.change, slotStyles?.change);
46
46
  const subtitleSlot = applySlot(metricCardStyles.subtitle, slotStyles?.subtitle);
47
- return (_jsx(Card, { "data-kala-component": "metric-card", ref: ref, className: root.className, style: root.style, ...props, children: _jsxs("div", { className: body.className, children: [_jsxs("div", { className: head.className, children: [_jsx("h6", { className: cn(titleLabel.className, isColorful ? "opacity-90" : "text-muted-foreground"), children: title }), icon && (_jsx("div", { className: cn(iconSlot.className, isColorful ? "opacity-70" : "text-muted-foreground"), "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: "mb-3", children: _jsxs("div", { className: cn(valueSlot.className, isColorful ? "" : "text-card-foreground"), children: [_jsxs("span", { className: "sr-only", children: [title, ":", " ", typeof value === "number" ? value.toLocaleString() : value] }), typeof value === "number" ? value.toLocaleString() : value] }) }), (change !== undefined || subtitle) && (_jsx("div", { className: meta.className, children: change !== undefined ? (_jsxs("div", { className: cn(changeSlot.className, isColorful ? "opacity-90" : getChangeColor(change)), children: [_jsxs("span", { className: "sr-only", children: ["Change: ", getChangeText(change)] }), _jsx("span", { className: "inline-block", "aria-hidden": "true", children: getChangeIcon(change) }), _jsx("span", { children: getChangeText(change) })] })) : subtitle ? (_jsx("div", { className: cn(subtitleSlot.className, isColorful ? "opacity-80" : "text-muted-foreground"), children: subtitle })) : null }))] }) }));
47
+ return (_jsx(Card, { "data-kala-component": "metric-card", ref: ref, className: root.className, style: root.style, ...props, children: _jsxs("div", { className: body.className, children: [_jsxs("div", { className: head.className, children: [_jsx("h6", { className: cn(titleLabel.className, isColorful
48
+ ? metricCardStyles.titleOnColor
49
+ : metricCardStyles.titleMuted), children: title }), icon && (_jsx("div", { className: cn(iconSlot.className, isColorful
50
+ ? metricCardStyles.iconOnColor
51
+ : metricCardStyles.iconMuted), "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: metricCardStyles.valueBlock, children: _jsxs("div", { className: cn(valueSlot.className, isColorful
52
+ ? metricCardStyles.valueOnColor
53
+ : metricCardStyles.valueMuted), children: [_jsxs("span", { className: "sr-only", children: [title, ":", " ", typeof value === "number" ? value.toLocaleString() : value] }), typeof value === "number" ? value.toLocaleString() : value] }) }), (change !== undefined || subtitle) && (_jsx("div", { className: meta.className, children: change !== undefined ? (_jsxs("div", { className: cn(changeSlot.className, isColorful
54
+ ? metricCardStyles.changeOnColor
55
+ : getChangeColor(change)), children: [_jsxs("span", { className: "sr-only", children: ["Change: ", getChangeText(change)] }), _jsx("span", { className: "inline-block", "aria-hidden": "true", children: getChangeIcon(change) }), _jsx("span", { children: getChangeText(change) })] })) : subtitle ? (_jsx("div", { className: cn(subtitleSlot.className, isColorful
56
+ ? metricCardStyles.subtitleOnColor
57
+ : metricCardStyles.subtitleMuted), children: subtitle })) : null }))] }) }));
48
58
  }
49
59
  export { MetricCard };
package/dist/config/metric-card.d.ts CHANGED
@@ -3,11 +3,21 @@ export declare const metricCardStyles: {
3
3
  body: string;
4
4
  head: string;
5
5
  title: string;
6
+ titleOnColor: string;
7
+ titleMuted: string;
6
8
  icon: string;
9
+ iconOnColor: string;
10
+ iconMuted: string;
7
11
  value: string;
12
+ valueBlock: string;
13
+ valueOnColor: string;
14
+ valueMuted: string;
8
15
  meta: string;
9
16
  change: string;
17
+ changeOnColor: string;
10
18
  subtitle: string;
19
+ subtitleOnColor: string;
20
+ subtitleMuted: string;
11
21
  };
12
22
  export declare const metricCardChangeColors: {
13
23
  readonly up: "text-success";
package/dist/config/metric-card.js CHANGED
@@ -11,11 +11,21 @@ export const metricCardStyles = {
11
11
  body: "p-6",
12
12
  head: "flex items-center justify-between mb-4",
13
13
  title: "text-xs font-semibold uppercase tracking-wide",
14
+ titleOnColor: "opacity-90",
15
+ titleMuted: "text-muted-foreground",
14
16
  icon: "",
17
+ iconOnColor: "opacity-70",
18
+ iconMuted: "text-muted-foreground",
15
19
  value: "text-4xl font-bold leading-none",
20
+ valueBlock: "mb-3",
21
+ valueOnColor: "",
22
+ valueMuted: "text-card-foreground",
16
23
  meta: "text-sm",
17
24
  change: "flex items-center gap-1",
25
+ changeOnColor: "opacity-90",
18
26
  subtitle: "",
27
+ subtitleOnColor: "opacity-80",
28
+ subtitleMuted: "text-muted-foreground",
19
29
  };
20
30
  export const metricCardChangeColors = {
21
31
  up: "text-success",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kala-ui/react-app",
3
- "version": "0.1.0-beta.7",
3
+ "version": "0.1.0-beta.8",
4
4
  "type": "module",
5
5
  "sideEffects": [
6
6
  "**/*.css"
@@ -122,7 +122,7 @@
122
122
  "lucide-react": "1.46.0",
123
123
  "react-apexcharts": "~2.1.1",
124
124
  "simple-icons": "16.31.0",
125
- "@kala-ui/react": "0.1.0-beta.6",
125
+ "@kala-ui/react": "0.1.0-beta.7",
126
126
  "@kala-ui/react-hooks": "0.1.0-beta.1"
127
127
  },
128
128
  "devDependencies": {