@stasho/ds 0.9.0 → 0.9.2

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stasho/ds",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "description": "stasho design system",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -22,8 +22,11 @@ const badgeVariants = cva(
22
22
  outline: "border",
23
23
  },
24
24
  size: {
25
- sm: "px-3 py-0.5 text-[10px]",
26
- md: "px-4 py-1 text-xs",
25
+ // Explicit line-height + min-height so icon-only badges match the
26
+ // height of text badges (a lone icon otherwise yields a shorter
27
+ // line-box than text, and the inherited line-height is non-deterministic).
28
+ sm: "px-3 py-0.5 text-[10px] leading-[14px] min-h-5",
29
+ md: "px-4 py-1 text-xs leading-[16px] min-h-[26px]",
27
30
  },
28
31
  },
29
32
  compoundVariants: [
@@ -221,43 +221,40 @@ export function Table<T>({
221
221
  </td>
222
222
  </tr>
223
223
  ) : (
224
- sortedData.map((row) => (
225
- <tr
226
- key={keyExtractor(row)}
227
- className={cn(
228
- "border-b border-edge transition-all",
229
- activeKey === keyExtractor(row)
230
- ? "bg-accent/15 shadow-[inset_3px_0_0_var(--accent)]"
231
- : "even:bg-muted/30",
232
- "hover:bg-muted/50",
233
- onRowClick &&
234
- "cursor-pointer hover:shadow-[inset_3px_0_0_var(--accent)]",
235
- )}
236
- aria-current={
237
- activeKey === keyExtractor(row) ? "true" : undefined
238
- }
239
- style={{ transitionDuration: "var(--duration-fast)" }}
240
- tabIndex={onRowClick ? 0 : undefined}
241
- onClick={onRowClick ? () => onRowClick(row) : undefined}
242
- onKeyDown={
243
- onRowClick
244
- ? (e) => handleRowKeyDown(e, row)
245
- : undefined
246
- }
247
- >
248
- {columns.map((col) => (
249
- <td
250
- key={col.id ?? col.header}
251
- className={cn(
252
- "px-4 py-3 text-sm",
253
- alignClass[col.align ?? "left"],
254
- )}
255
- >
256
- {col.accessor(row)}
257
- </td>
258
- ))}
259
- </tr>
260
- ))
224
+ sortedData.map((row) => {
225
+ const isActive = activeKey === keyExtractor(row);
226
+ return (
227
+ <tr
228
+ key={keyExtractor(row)}
229
+ className={cn(
230
+ "border-b border-edge transition-all",
231
+ isActive
232
+ ? "bg-accent/15 shadow-[inset_3px_0_0_var(--accent)] hover:bg-accent/20"
233
+ : "even:bg-muted/30 hover:bg-muted/50",
234
+ onRowClick && "cursor-pointer",
235
+ )}
236
+ aria-current={isActive ? "true" : undefined}
237
+ style={{ transitionDuration: "var(--duration-fast)" }}
238
+ tabIndex={onRowClick ? 0 : undefined}
239
+ onClick={onRowClick ? () => onRowClick(row) : undefined}
240
+ onKeyDown={
241
+ onRowClick ? (e) => handleRowKeyDown(e, row) : undefined
242
+ }
243
+ >
244
+ {columns.map((col) => (
245
+ <td
246
+ key={col.id ?? col.header}
247
+ className={cn(
248
+ "px-4 py-3 text-sm",
249
+ alignClass[col.align ?? "left"],
250
+ )}
251
+ >
252
+ {col.accessor(row)}
253
+ </td>
254
+ ))}
255
+ </tr>
256
+ );
257
+ })
261
258
  )}
262
259
  </tbody>
263
260
  </table>
@@ -16,8 +16,8 @@ const TooltipContent = forwardRef<
16
16
  sideOffset={sideOffset}
17
17
  className={cn(
18
18
  [
19
- "z-50 rounded-sm bg-popover-bg border border-popover-border px-3 py-1.5",
20
- "text-sm text-foreground shadow-sm",
19
+ "z-50 max-w-[260px] rounded-sm bg-popover-bg border border-popover-border px-3 py-1.5",
20
+ "text-xs leading-snug text-foreground shadow-sm",
21
21
  "animate-in fade-in-0 zoom-in-95",
22
22
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
23
23
  "data-[state=closed]:zoom-out-95",