@sixthshift/design-system 0.1.0 → 0.3.0

package/dist/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Personal design system - tokens, theme, and component library",
   "license": "MIT",
   "publishConfig": {
@@ -29,7 +29,6 @@
   "files": [
     "src",
     "dist",
-    "tailwind.config.ts",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/**/__tests__",
@@ -39,105 +38,341 @@
     "!src/testing"
   ],
   "exports": {
-    "./styles.css": "./dist/styles.css",
-    "./theme.css": "./dist/theme.generated.css",
-    "./theme": "./src/theme/index.ts",
-    "./tailwind.config": "./tailwind.config.ts",
-    "./utils": "./src/lib/utils.ts",
-    "./format": "./src/lib/format.ts",
-    "./hooks": "./src/hooks/index.ts",
-    "./date-time": "./src/date-time/index.ts",
-    "./button": "./src/components/Button/index.ts",
-    "./input": "./src/components/Input/index.ts",
-    "./textarea": "./src/components/Textarea/index.ts",
-    "./checkbox": "./src/components/Checkbox/index.ts",
-    "./checkbox-group": "./src/components/CheckboxGroup/index.ts",
-    "./radio-button": "./src/components/RadioButton/index.ts",
-    "./radio-button-group": "./src/components/RadioButtonGroup/index.ts",
-    "./switch": "./src/components/Switch/index.ts",
-    "./toggle": "./src/components/Toggle/index.ts",
-    "./toggle-group": "./src/components/ToggleGroup/index.ts",
-    "./badge": "./src/components/Badge/index.ts",
-    "./color-dot": "./src/components/ColorDot/index.ts",
-    "./tag-chip": "./src/components/TagChip/index.ts",
-    "./tag-input": "./src/components/TagInput/index.ts",
-    "./field": "./src/components/Field/index.ts",
-    "./breadcrumb": "./src/components/Breadcrumb/index.ts",
-    "./card": "./src/components/Card/index.ts",
-    "./avatar": "./src/components/Avatar/index.ts",
-    "./separator": "./src/components/Separator/index.ts",
-    "./skeleton": "./src/components/Skeleton/index.ts",
-    "./spinner": "./src/components/Spinner/index.ts",
-    "./stats-card": "./src/components/StatsCard/index.ts",
-    "./metric-list": "./src/components/MetricList/index.ts",
-    "./empty-state": "./src/components/EmptyState/index.ts",
-    "./text": "./src/components/Text/index.ts",
-    "./text-inline": "./src/components/TextInline/index.ts",
-    "./calendar": "./src/components/Calendar/index.ts",
-    "./modal": "./src/components/Modal/index.ts",
-    "./sheet": "./src/components/Sheet/index.ts",
-    "./toast": "./src/components/Toast/index.ts",
-    "./message": "./src/components/Message/index.ts",
-    "./select": "./src/components/Select/index.ts",
-    "./form-field": "./src/components/FormField/index.ts",
-    "./popover": "./src/components/Popover/index.ts",
-    "./hover-card": "./src/components/HoverCard/index.ts",
-    "./date-picker": "./src/components/DatePicker/index.ts",
-    "./time-picker": "./src/components/TimePicker/index.ts",
-    "./datetime-picker": "./src/components/DateTimePicker/index.ts",
-    "./datetime-range-picker": "./src/components/DateTimeRangePicker/index.ts",
-    "./tooltip": "./src/components/Tooltip/index.ts",
-    "./tabs": "./src/components/Tabs/index.ts",
-    "./search-input": "./src/components/SearchInput/index.ts",
-    "./pagination": "./src/components/Pagination/index.ts",
-    "./code-editor": "./src/components/Code/Editor/index.ts",
-    "./code-editor-workspace": "./src/components/Code/Workspace/index.ts",
-    "./nav-side": "./src/components/NavSide/index.ts",
-    "./nav-bottom": "./src/components/NavBottom/index.ts",
-    "./heading": "./src/typography/Heading.tsx",
-    "./label": "./src/typography/Label.tsx",
-    "./section-title": "./src/typography/SectionTitle.tsx",
-    "./caption": "./src/typography/Caption.tsx",
-    "./code": "./src/typography/Code.tsx",
-    "./lead": "./src/typography/Lead.tsx",
-    "./body": "./src/typography/Body.tsx",
-    "./muted": "./src/typography/Muted.tsx",
-    "./display": "./src/typography/Display.tsx",
-    "./emphasis": "./src/typography/Emphasis.tsx",
-    "./mono": "./src/typography/Mono.tsx",
-    "./subtitle": "./src/typography/Subtitle.tsx",
-    "./timestamp": "./src/typography/Timestamp.tsx",
-    "./overlay": "./src/lib/contexts/OverlayContext/index.ts",
-    "./components": "./src/lib/contexts/ComponentsContext/index.ts",
-    "./error-boundary": "./src/lib/ErrorBoundary.tsx",
-    "./with-suspense": "./src/lib/withSuspense.tsx",
-    "./with-error-boundary": "./src/lib/withErrorBoundary.tsx",
-    "./with-suspense-and-error-boundary": "./src/lib/withSuspenseAndErrorBoundary.tsx",
-    "./with-empty": "./src/lib/withEmpty.tsx",
-    "./empty-boundary": "./src/lib/EmptyBoundary.tsx",
-    "./progress-bar": "./src/components/ProgressBar/index.ts",
-    "./markdown": "./src/components/Markdown/index.ts",
-    "./line-chart": "./src/components/LineChart/index.ts",
-    "./sparkline": "./src/components/Sparkline/index.ts",
-    "./bar-chart": "./src/components/BarChart/index.ts",
-    "./heat-map": "./src/components/HeatMap/index.ts"
+    "./theme.css": "./src/theme/tokens.css",
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./format": {
+      "types": "./dist/lib/format.d.ts",
+      "import": "./dist/lib/format.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./date-time": {
+      "types": "./dist/date-time/index.d.ts",
+      "import": "./dist/date-time/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/Button/index.d.ts",
+      "import": "./dist/components/Button/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/Input/index.d.ts",
+      "import": "./dist/components/Input/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/Textarea/index.d.ts",
+      "import": "./dist/components/Textarea/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/Checkbox/index.d.ts",
+      "import": "./dist/components/Checkbox/index.js"
+    },
+    "./checkbox-group": {
+      "types": "./dist/components/CheckboxGroup/index.d.ts",
+      "import": "./dist/components/CheckboxGroup/index.js"
+    },
+    "./radio-button": {
+      "types": "./dist/components/RadioButton/index.d.ts",
+      "import": "./dist/components/RadioButton/index.js"
+    },
+    "./radio-button-group": {
+      "types": "./dist/components/RadioButtonGroup/index.d.ts",
+      "import": "./dist/components/RadioButtonGroup/index.js"
+    },
+    "./switch": {
+      "types": "./dist/components/Switch/index.d.ts",
+      "import": "./dist/components/Switch/index.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/Toggle/index.d.ts",
+      "import": "./dist/components/Toggle/index.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/ToggleGroup/index.d.ts",
+      "import": "./dist/components/ToggleGroup/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/Badge/index.d.ts",
+      "import": "./dist/components/Badge/index.js"
+    },
+    "./color-dot": {
+      "types": "./dist/components/ColorDot/index.d.ts",
+      "import": "./dist/components/ColorDot/index.js"
+    },
+    "./tag-chip": {
+      "types": "./dist/components/TagChip/index.d.ts",
+      "import": "./dist/components/TagChip/index.js"
+    },
+    "./tag-input": {
+      "types": "./dist/components/TagInput/index.d.ts",
+      "import": "./dist/components/TagInput/index.js"
+    },
+    "./field": {
+      "types": "./dist/components/Field/index.d.ts",
+      "import": "./dist/components/Field/index.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/Breadcrumb/index.d.ts",
+      "import": "./dist/components/Breadcrumb/index.js"
+    },
+    "./card": {
+      "types": "./dist/components/Card/index.d.ts",
+      "import": "./dist/components/Card/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/Avatar/index.d.ts",
+      "import": "./dist/components/Avatar/index.js"
+    },
+    "./separator": {
+      "types": "./dist/components/Separator/index.d.ts",
+      "import": "./dist/components/Separator/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/Skeleton/index.d.ts",
+      "import": "./dist/components/Skeleton/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/Spinner/index.d.ts",
+      "import": "./dist/components/Spinner/index.js"
+    },
+    "./stats-card": {
+      "types": "./dist/components/StatsCard/index.d.ts",
+      "import": "./dist/components/StatsCard/index.js"
+    },
+    "./metric-list": {
+      "types": "./dist/components/MetricList/index.d.ts",
+      "import": "./dist/components/MetricList/index.js"
+    },
+    "./empty-state": {
+      "types": "./dist/components/EmptyState/index.d.ts",
+      "import": "./dist/components/EmptyState/index.js"
+    },
+    "./text": {
+      "types": "./dist/components/Text/index.d.ts",
+      "import": "./dist/components/Text/index.js"
+    },
+    "./text-inline": {
+      "types": "./dist/components/TextInline/index.d.ts",
+      "import": "./dist/components/TextInline/index.js"
+    },
+    "./calendar": {
+      "types": "./dist/components/Calendar/index.d.ts",
+      "import": "./dist/components/Calendar/index.js"
+    },
+    "./modal": {
+      "types": "./dist/components/Modal/index.d.ts",
+      "import": "./dist/components/Modal/index.js"
+    },
+    "./sheet": {
+      "types": "./dist/components/Sheet/index.d.ts",
+      "import": "./dist/components/Sheet/index.js"
+    },
+    "./toast": {
+      "types": "./dist/components/Toast/index.d.ts",
+      "import": "./dist/components/Toast/index.js"
+    },
+    "./message": {
+      "types": "./dist/components/Message/index.d.ts",
+      "import": "./dist/components/Message/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/Select/index.d.ts",
+      "import": "./dist/components/Select/index.js"
+    },
+    "./form-field": {
+      "types": "./dist/components/FormField/index.d.ts",
+      "import": "./dist/components/FormField/index.js"
+    },
+    "./popover": {
+      "types": "./dist/components/Popover/index.d.ts",
+      "import": "./dist/components/Popover/index.js"
+    },
+    "./hover-card": {
+      "types": "./dist/components/HoverCard/index.d.ts",
+      "import": "./dist/components/HoverCard/index.js"
+    },
+    "./date-picker": {
+      "types": "./dist/components/DatePicker/index.d.ts",
+      "import": "./dist/components/DatePicker/index.js"
+    },
+    "./time-picker": {
+      "types": "./dist/components/TimePicker/index.d.ts",
+      "import": "./dist/components/TimePicker/index.js"
+    },
+    "./datetime-picker": {
+      "types": "./dist/components/DateTimePicker/index.d.ts",
+      "import": "./dist/components/DateTimePicker/index.js"
+    },
+    "./datetime-range-picker": {
+      "types": "./dist/components/DateTimeRangePicker/index.d.ts",
+      "import": "./dist/components/DateTimeRangePicker/index.js"
+    },
+    "./date-range-picker": {
+      "types": "./dist/components/DateRangePicker/index.d.ts",
+      "import": "./dist/components/DateRangePicker/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/Tooltip/index.d.ts",
+      "import": "./dist/components/Tooltip/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/Tabs/index.d.ts",
+      "import": "./dist/components/Tabs/index.js"
+    },
+    "./search-input": {
+      "types": "./dist/components/SearchInput/index.d.ts",
+      "import": "./dist/components/SearchInput/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/Pagination/index.d.ts",
+      "import": "./dist/components/Pagination/index.js"
+    },
+    "./code-editor": {
+      "types": "./dist/components/Code/Editor/index.d.ts",
+      "import": "./dist/components/Code/Editor/index.js"
+    },
+    "./code-editor-workspace": {
+      "types": "./dist/components/Code/Workspace/index.d.ts",
+      "import": "./dist/components/Code/Workspace/index.js"
+    },
+    "./nav-side": {
+      "types": "./dist/components/NavSide/index.d.ts",
+      "import": "./dist/components/NavSide/index.js"
+    },
+    "./nav-bottom": {
+      "types": "./dist/components/NavBottom/index.d.ts",
+      "import": "./dist/components/NavBottom/index.js"
+    },
+    "./heading": {
+      "types": "./dist/typography/Heading.d.ts",
+      "import": "./dist/typography/Heading.js"
+    },
+    "./label": {
+      "types": "./dist/typography/Label.d.ts",
+      "import": "./dist/typography/Label.js"
+    },
+    "./section-title": {
+      "types": "./dist/typography/SectionTitle.d.ts",
+      "import": "./dist/typography/SectionTitle.js"
+    },
+    "./caption": {
+      "types": "./dist/typography/Caption.d.ts",
+      "import": "./dist/typography/Caption.js"
+    },
+    "./code": {
+      "types": "./dist/typography/Code.d.ts",
+      "import": "./dist/typography/Code.js"
+    },
+    "./lead": {
+      "types": "./dist/typography/Lead.d.ts",
+      "import": "./dist/typography/Lead.js"
+    },
+    "./body": {
+      "types": "./dist/typography/Body.d.ts",
+      "import": "./dist/typography/Body.js"
+    },
+    "./muted": {
+      "types": "./dist/typography/Muted.d.ts",
+      "import": "./dist/typography/Muted.js"
+    },
+    "./display": {
+      "types": "./dist/typography/Display.d.ts",
+      "import": "./dist/typography/Display.js"
+    },
+    "./emphasis": {
+      "types": "./dist/typography/Emphasis.d.ts",
+      "import": "./dist/typography/Emphasis.js"
+    },
+    "./mono": {
+      "types": "./dist/typography/Mono.d.ts",
+      "import": "./dist/typography/Mono.js"
+    },
+    "./subtitle": {
+      "types": "./dist/typography/Subtitle.d.ts",
+      "import": "./dist/typography/Subtitle.js"
+    },
+    "./timestamp": {
+      "types": "./dist/typography/Timestamp.d.ts",
+      "import": "./dist/typography/Timestamp.js"
+    },
+    "./overlay": {
+      "types": "./dist/lib/contexts/OverlayContext/index.d.ts",
+      "import": "./dist/lib/contexts/OverlayContext/index.js"
+    },
+    "./components": {
+      "types": "./dist/lib/contexts/ComponentsContext/index.d.ts",
+      "import": "./dist/lib/contexts/ComponentsContext/index.js"
+    },
+    "./error-boundary": {
+      "types": "./dist/lib/ErrorBoundary.d.ts",
+      "import": "./dist/lib/ErrorBoundary.js"
+    },
+    "./with-suspense": {
+      "types": "./dist/lib/withSuspense.d.ts",
+      "import": "./dist/lib/withSuspense.js"
+    },
+    "./with-error-boundary": {
+      "types": "./dist/lib/withErrorBoundary.d.ts",
+      "import": "./dist/lib/withErrorBoundary.js"
+    },
+    "./with-suspense-and-error-boundary": {
+      "types": "./dist/lib/withSuspenseAndErrorBoundary.d.ts",
+      "import": "./dist/lib/withSuspenseAndErrorBoundary.js"
+    },
+    "./with-empty": {
+      "types": "./dist/lib/withEmpty.d.ts",
+      "import": "./dist/lib/withEmpty.js"
+    },
+    "./empty-boundary": {
+      "types": "./dist/lib/EmptyBoundary.d.ts",
+      "import": "./dist/lib/EmptyBoundary.js"
+    },
+    "./progress-bar": {
+      "types": "./dist/components/ProgressBar/index.d.ts",
+      "import": "./dist/components/ProgressBar/index.js"
+    },
+    "./markdown": {
+      "types": "./dist/components/Markdown/index.d.ts",
+      "import": "./dist/components/Markdown/index.js"
+    },
+    "./line-chart": {
+      "types": "./dist/components/LineChart/index.d.ts",
+      "import": "./dist/components/LineChart/index.js"
+    },
+    "./sparkline": {
+      "types": "./dist/components/Sparkline/index.d.ts",
+      "import": "./dist/components/Sparkline/index.js"
+    },
+    "./bar-chart": {
+      "types": "./dist/components/BarChart/index.d.ts",
+      "import": "./dist/components/BarChart/index.js"
+    },
+    "./heat-map": {
+      "types": "./dist/components/HeatMap/index.d.ts",
+      "import": "./dist/components/HeatMap/index.js"
+    }
   },
   "scripts": {
     "prepare": "bun run build",
-    "build": "bun run build:theme && bun run build:css",
-    "build:theme": "bun run scripts/generate-theme.ts -i src/theme/theme.json -p src/theme/palette.json -t src/theme/typography.json -o dist/theme.generated.css",
-    "build:css": "tailwindcss -i src/styles/base.css -o dist/styles.css --minify",
-    "dev": "bun run dev:css & bun run dev:theme",
-    "dev:css": "tailwindcss -i src/styles/base.css -o dist/styles.css --watch",
-    "dev:theme": "bun run scripts/watch-theme.ts",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build",
+    "build": "bun run clean:dist && bun run build:js && bun run scripts/check-exports.ts",
+    "build:js": "tsc -p tsconfig.build.json && bun run scripts/fix-extensions.ts",
+    "dev": "storybook dev -p 6006 --no-open",
+    "build:storybook": "storybook build",
     "test": "vitest run --project unit --project date-time --reporter=dot",
     "test:verbose": "vitest run --project unit --project date-time",
     "test:watch": "vitest --project unit --project date-time",
     "test:visual": "vitest run --project visual",
     "test:visual:update": "vitest run --project visual --update",
-    "test:stories": "vitest run --project storybook",
+    "test:stories": "vitest run --project storybook --project storybook-dark",
+    "test:stories:dark": "vitest run --project storybook-dark",
     "test:ui": "bunx vitest --ui",
     "type-check": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
     "lint": "biome lint .",
@@ -146,7 +381,8 @@
     "format:check": "biome format .",
     "check": "biome check .",
     "check:fix": "biome check --write .",
-    "clean": "rm -rf dist node_modules *.tsbuildinfo"
+    "clean": "rm -rf dist node_modules *.tsbuildinfo",
+    "clean:dist": "rm -rf dist"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
@@ -198,7 +434,8 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@fontsource-variable/inter": {

package/src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@sixthshift/design-system/utils";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-brand focus:ring-offset-2",
@@ -52,8 +52,9 @@ const badgeVariants = cva(
 
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
 
-export const Badge = ({ className, variant, intent, ...props }: BadgeProps) => {
-  return <span className={cn(badgeVariants({ variant, intent }), className)} {...props} />;
-};
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant, intent, ...props }, ref) => {
+  return <span ref={ref} className={cn(badgeVariants({ variant, intent }), className)} {...props} />;
+});
+Badge.displayName = "Badge";
 
 export { badgeVariants };

package/src/components/BarChart/BarChart.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@sixthshift/design-system/utils";
-import type * as React from "react";
+import * as React from "react";
 
 export type BarChartItem = {
   label: string;
@@ -17,35 +17,30 @@ export type BarChartProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const DEFAULT_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
 
-export const BarChart = ({
-  data,
-  showValues = true,
-  maxValue: maxValueProp,
-  formatValue = (v) => String(v),
-  barHeight = 24,
-  className,
-  ...rest
-}: BarChartProps) => {
-  const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
+export const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
+  ({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }, ref) => {
+    const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
 
-  return (
-    <div {...rest} className={cn("flex flex-col gap-2", className)}>
-      {data.map((item, i) => {
-        // Clamp both ends: a negative value would otherwise emit an invalid
-        // `width: -n%`, whose rendering is undefined.
-        const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
-        const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+    return (
+      <div ref={ref} {...rest} className={cn("flex flex-col gap-2", className)}>
+        {data.map((item, i) => {
+          // Clamp both ends: a negative value would otherwise emit an invalid
+          // `width: -n%`, whose rendering is undefined.
+          const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
+          const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
 
-        return (
-          <div key={item.label} className="flex items-center gap-3">
-            <span className="w-20 shrink-0 truncate text-right text-fg-subtle text-sm">{item.label}</span>
-            <div className="flex-1 overflow-hidden rounded-sm bg-bg-subtle" style={{ height: barHeight }}>
-              <div className="h-full rounded-sm transition-all duration-300" style={{ width: `${percent}%`, backgroundColor: color }} />
+          return (
+            <div key={item.label} className="flex items-center gap-3">
+              <span className="w-20 shrink-0 truncate text-right text-fg-subtle text-sm">{item.label}</span>
+              <div className="flex-1 overflow-hidden rounded-sm bg-bg-subtle" style={{ height: barHeight }}>
+                <div className="h-full rounded-sm transition-all duration-300" style={{ width: `${percent}%`, backgroundColor: color }} />
+              </div>
+              {showValues && <span className="w-12 shrink-0 text-right font-medium text-fg-normal text-sm">{formatValue(item.value)}</span>}
             </div>
-            {showValues && <span className="w-12 shrink-0 text-right font-medium text-fg-normal text-sm">{formatValue(item.value)}</span>}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+          );
+        })}
+      </div>
+    );
+  }
+);
+BarChart.displayName = "BarChart";