@alpic-ai/ui 1.141.0 → 1.142.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 (5) hide show
  1. package/dist/components/bar-list.mjs +6 -5
  2. package/dist/components/donut-chart.mjs +5 -5
  3. package/package.json +1 -1
  4. package/src/components/bar-list.tsx +5 -4
  5. package/src/components/donut-chart.tsx +5 -5
package/dist/components/bar-list.mjs CHANGED
@@ -52,7 +52,7 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, loading =
52
52
  });
53
53
  return /* @__PURE__ */ jsx("div", {
54
54
  "data-slot": "bar-list",
55
- className: cn("flex w-full flex-col gap-2", className),
55
+ className: cn("flex w-full flex-col", className),
56
56
  children: rows.map((row, slot) => {
57
57
  const fraction = maxValue > 0 ? row.value / maxValue : 0;
58
58
  const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
@@ -61,19 +61,20 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, loading =
61
61
  return /* @__PURE__ */ jsxs("div", {
62
62
  onMouseEnter: () => setActive(slot),
63
63
  onMouseLeave: () => setActive(null),
64
- className: "flex items-center gap-3",
64
+ className: "flex items-center gap-3 py-1",
65
65
  children: [/* @__PURE__ */ jsxs("div", {
66
66
  className: "relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted",
67
67
  children: [/* @__PURE__ */ jsx("span", {
68
68
  className: "pointer-events-none absolute inset-x-3 top-1/2 z-0 -translate-y-1/2 truncate type-text-xs font-medium text-foreground",
69
69
  children: formatName(row.name)
70
70
  }), /* @__PURE__ */ jsx("div", {
71
- className: "absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md motion-safe:transition-[width,opacity] motion-safe:duration-700 motion-safe:ease-out",
71
+ className: "absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md",
72
72
  style: {
73
73
  width: fillWidth,
74
74
  background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
75
75
  boxShadow: `inset 0 0 0 1px ${row.color}`,
76
- opacity: dimmed ? .45 : 1
76
+ opacity: dimmed ? .45 : 1,
77
+ transition: reducedMotion ? void 0 : "width 700ms ease-out"
77
78
  },
78
79
  children: /* @__PURE__ */ jsx("span", {
79
80
  className: "pointer-events-none absolute top-1/2 -translate-y-1/2 truncate type-text-xs font-medium text-white",
@@ -86,7 +87,7 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, loading =
86
87
  })
87
88
  })]
88
89
  }), /* @__PURE__ */ jsx("span", {
89
- className: "w-16 shrink-0 text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors",
90
+ className: "min-w-[4rem] shrink-0 whitespace-nowrap text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors",
90
91
  style: { color: isActive ? row.color : void 0 },
91
92
  children: isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)
92
93
  })]
package/dist/components/donut-chart.mjs CHANGED
@@ -117,7 +117,7 @@ function DonutChart({ data, index, dataKey = "value", variant = "donut", legend
117
117
  className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center",
118
118
  children: [
119
119
  /* @__PURE__ */ jsx("span", {
120
- className: "max-w-[72%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]",
120
+ className: "max-w-[52%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]",
121
121
  children: centerTitle
122
122
  }),
123
123
  /* @__PURE__ */ jsx("span", {
@@ -143,7 +143,7 @@ function DonutChart({ data, index, dataKey = "value", variant = "donut", legend
143
143
  onMouseLeave: () => setActive(null),
144
144
  className: cn("flex flex-col gap-1.5 border-border/40 border-b px-2 py-2 text-text-xs last:border-b-0 motion-safe:transition-colors", active === slot ? "bg-muted/50" : "bg-transparent"),
145
145
  children: [/* @__PURE__ */ jsxs("div", {
146
- className: "flex items-center justify-between gap-3",
146
+ className: "flex items-center justify-between gap-2",
147
147
  children: [/* @__PURE__ */ jsxs("span", {
148
148
  className: "inline-flex min-w-0 items-center gap-2 text-muted-foreground",
149
149
  children: [/* @__PURE__ */ jsx("span", {
@@ -155,12 +155,12 @@ function DonutChart({ data, index, dataKey = "value", variant = "donut", legend
155
155
  children: formatName(slice.name)
156
156
  })]
157
157
  }), /* @__PURE__ */ jsxs("span", {
158
- className: "flex shrink-0 items-center gap-3 font-mono tabular-nums",
158
+ className: "flex shrink-0 items-center gap-2 font-mono tabular-nums",
159
159
  children: [/* @__PURE__ */ jsx("span", {
160
- className: "min-w-[3.5rem] text-right font-semibold text-foreground",
160
+ className: "min-w-[2.25rem] text-right font-semibold text-foreground",
161
161
  children: valueFormatter(slice.value)
162
162
  }), /* @__PURE__ */ jsx("span", {
163
- className: "w-10 text-right text-quaternary-foreground",
163
+ className: "w-9 text-right text-quaternary-foreground",
164
164
  children: formatShare(slice.value / total)
165
165
  })]
166
166
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alpic-ai/ui",
3
- "version": "1.141.0",
3
+ "version": "1.142.0",
4
4
  "description": "Alpic design system — shared UI components",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/bar-list.tsx CHANGED
@@ -95,7 +95,7 @@ function BarList({
95
95
  }
96
96
 
97
97
  return (
98
- <div data-slot="bar-list" className={cn("flex w-full flex-col gap-2", className)}>
98
+ <div data-slot="bar-list" className={cn("flex w-full flex-col", className)}>
99
99
  {rows.map((row, slot) => {
100
100
  const fraction = maxValue > 0 ? row.value / maxValue : 0;
101
101
  const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
@@ -107,19 +107,20 @@ function BarList({
107
107
  key={row.name}
108
108
  onMouseEnter={() => setActive(slot)}
109
109
  onMouseLeave={() => setActive(null)}
110
- className="flex items-center gap-3"
110
+ className="flex items-center gap-3 py-1"
111
111
  >
112
112
  <div className="relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted">
113
113
  <span className="pointer-events-none absolute inset-x-3 top-1/2 z-0 -translate-y-1/2 truncate type-text-xs font-medium text-foreground">
114
114
  {formatName(row.name)}
115
115
  </span>
116
116
  <div
117
- className="absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md motion-safe:transition-[width,opacity] motion-safe:duration-700 motion-safe:ease-out"
117
+ className="absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md"
118
118
  style={{
119
119
  width: fillWidth,
120
120
  background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
121
121
  boxShadow: `inset 0 0 0 1px ${row.color}`,
122
122
  opacity: dimmed ? 0.45 : 1,
123
+ transition: reducedMotion ? undefined : "width 700ms ease-out",
123
124
  }}
124
125
  >
125
126
  <span
@@ -135,7 +136,7 @@ function BarList({
135
136
  </div>
136
137
  </div>
137
138
  <span
138
- className="w-16 shrink-0 text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors"
139
+ className="min-w-[4rem] shrink-0 whitespace-nowrap text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors"
139
140
  style={{ color: isActive ? row.color : undefined }}
140
141
  >
141
142
  {isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)}
package/src/components/donut-chart.tsx CHANGED
@@ -142,7 +142,7 @@ function DonutChart({
142
142
  </ResponsiveContainer>
143
143
 
144
144
  <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center">
145
- <span className="max-w-[72%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]">
145
+ <span className="max-w-[52%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]">
146
146
  {centerTitle}
147
147
  </span>
148
148
  <span className="font-mono font-semibold text-[28px] text-foreground leading-none tabular-nums">
@@ -176,7 +176,7 @@ function DonutChart({
176
176
  active === slot ? "bg-muted/50" : "bg-transparent",
177
177
  )}
178
178
  >
179
- <div className="flex items-center justify-between gap-3">
179
+ <div className="flex items-center justify-between gap-2">
180
180
  <span className="inline-flex min-w-0 items-center gap-2 text-muted-foreground">
181
181
  <span
182
182
  aria-hidden
@@ -185,11 +185,11 @@ function DonutChart({
185
185
  />
186
186
  <span className="truncate">{formatName(slice.name)}</span>
187
187
  </span>
188
- <span className="flex shrink-0 items-center gap-3 font-mono tabular-nums">
189
- <span className="min-w-[3.5rem] text-right font-semibold text-foreground">
188
+ <span className="flex shrink-0 items-center gap-2 font-mono tabular-nums">
189
+ <span className="min-w-[2.25rem] text-right font-semibold text-foreground">
190
190
  {valueFormatter(slice.value)}
191
191
  </span>
192
- <span className="w-10 text-right text-quaternary-foreground">
192
+ <span className="w-9 text-right text-quaternary-foreground">
193
193
  {formatShare(slice.value / total)}
194
194
  </span>
195
195
  </span>