@music-vine/cadence 3.0.1 → 3.0.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/dist/components/badge.js
CHANGED
|
@@ -27,7 +27,7 @@ const badgeVariants = cva(
|
|
|
27
27
|
size: {
|
|
28
28
|
default: "h-8 px-4 py-2 leading-8",
|
|
29
29
|
xs: "h-5 gap-1.5 px-2 text-xs leading-5",
|
|
30
|
-
sm: "h-6 px-2.5 leading-6
|
|
30
|
+
sm: "h-6 px-2.5 text-sm leading-6",
|
|
31
31
|
lg: "h-10 gap-4 px-8 text-lg leading-10",
|
|
32
32
|
icon: "h-8 w-8 leading-8"
|
|
33
33
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * @module Badge\n *\n * Small status indicators and labels for highlighting information.\n * Supports multiple color variants and sizes for different contexts.\n *\n * @see {@link https://ui.shadcn.com/docs/components/badge Shadcn Badge}\n *\n * @example\n * // Basic badge\n * <Badge>New</Badge>\n *\n * @example\n * // Badge variants\n * <Badge variant=\"brand\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n * <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-300\",\n {\n variants: {\n variant: {\n // Matching button variants (without hover/disabled states)\n subtle:\n \"border-1 border-gray-150 border-solid bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n brand:\n \"border-1 border-brand-primary border-solid bg-brand-primary text-white\",\n brandSecondary:\n \"border-1 border-brand-secondary border-solid bg-brand-secondary text-brand-primary-hover dark:border-gray-900 dark:bg-gray-900 dark:text-white\",\n bold: \"border-gray-950 bg-gray-950 text-white dark:border-white dark:bg-white dark:text-gray-950\",\n light:\n \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n transparent:\n \"border-transparent bg-transparent text-gray-950 dark:text-white\",\n contrast: \"border-white bg-white text-gray-950\",\n success:\n \"border-green-600 bg-green-600 text-white dark:border-green-500 dark:bg-green-500\",\n error:\n \"border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500\",\n primary:\n \"border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950\",\n secondary:\n \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n destructive: \"border-red bg-red text-white\",\n white: \"border-gray-200 bg-white text-brand-primary\",\n brandLight:\n \"border-brand-secondary bg-brand-secondary text-brand-primary-hover\",\n outline:\n \"border border-gray-200 border-solid bg-transparent text-gray-800 focus-visible:ring-gray-500 dark:border-gray-800 dark:bg-transparent dark:text-white dark:focus-visible:ring-gray-400\",\n },\n size: {\n default: \"h-8 px-4 py-2 leading-8\",\n xs: \"h-5 gap-1.5 px-2 text-xs leading-5\",\n sm: \"h-6 px-2.5 leading-6
|
|
4
|
+
"sourcesContent": ["/**\n * @module Badge\n *\n * Small status indicators and labels for highlighting information.\n * Supports multiple color variants and sizes for different contexts.\n *\n * @see {@link https://ui.shadcn.com/docs/components/badge Shadcn Badge}\n *\n * @example\n * // Basic badge\n * <Badge>New</Badge>\n *\n * @example\n * // Badge variants\n * <Badge variant=\"brand\">Premium</Badge>\n * <Badge variant=\"success\">Active</Badge>\n * <Badge variant=\"error\">Expired</Badge>\n *\n * @example\n * // As a child element (e.g., wrapping a link)\n * <Badge asChild variant=\"outline\">\n * <a href=\"/pricing\">View Plans</a>\n * </Badge>\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * CVA variants for Badge styling.\n * Includes color variants matching Button component for consistency.\n */\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-300\",\n {\n variants: {\n variant: {\n // Matching button variants (without hover/disabled states)\n subtle:\n \"border-1 border-gray-150 border-solid bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white\",\n brand:\n \"border-1 border-brand-primary border-solid bg-brand-primary text-white\",\n brandSecondary:\n \"border-1 border-brand-secondary border-solid bg-brand-secondary text-brand-primary-hover dark:border-gray-900 dark:bg-gray-900 dark:text-white\",\n bold: \"border-gray-950 bg-gray-950 text-white dark:border-white dark:bg-white dark:text-gray-950\",\n light:\n \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n transparent:\n \"border-transparent bg-transparent text-gray-950 dark:text-white\",\n contrast: \"border-white bg-white text-gray-950\",\n success:\n \"border-green-600 bg-green-600 text-white dark:border-green-500 dark:bg-green-500\",\n error:\n \"border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500\",\n primary:\n \"border-gray-900 bg-gray-900 text-white dark:border-gray-50 dark:bg-gray-50 dark:text-gray-950\",\n secondary:\n \"border-gray-150 bg-gray-100 text-gray-950 dark:border-gray-800 dark:bg-gray-800 dark:text-white\",\n destructive: \"border-red bg-red text-white\",\n white: \"border-gray-200 bg-white text-brand-primary\",\n brandLight:\n \"border-brand-secondary bg-brand-secondary text-brand-primary-hover\",\n outline:\n \"border border-gray-200 border-solid bg-transparent text-gray-800 focus-visible:ring-gray-500 dark:border-gray-800 dark:bg-transparent dark:text-white dark:focus-visible:ring-gray-400\",\n },\n size: {\n default: \"h-8 px-4 py-2 leading-8\",\n xs: \"h-5 gap-1.5 px-2 text-xs leading-5\",\n sm: \"h-6 px-2.5 text-sm leading-6\",\n lg: \"h-10 gap-4 px-8 text-lg leading-10\",\n icon: \"h-8 w-8 leading-8\",\n },\n shadow: {\n true: \"shadow\",\n false: \"\",\n },\n strong: {\n true: \"font-semibold\",\n false: \"\",\n },\n },\n defaultVariants: {\n variant: \"bold\",\n size: \"default\",\n shadow: false,\n strong: false,\n },\n }\n);\n\n/**\n * Props for the Badge component.\n *\n * @property variant - Color scheme: `brand`, `brandSecondary`, `success`, `error`, `subtle`, `bold`, etc.\n * @property size - Size variant: `xs`, `sm`, `default`, `lg`, `icon`\n * @property shadow - Add drop shadow when true\n * @property strong - Use semibold font weight when true\n * @property asChild - Render as child element (uses Radix Slot)\n * @property ref - Ref to the underlying div element\n */\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {\n asChild?: boolean;\n ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Displays a small label or status indicator.\n *\n * Common use cases:\n * - Subscription status (Free, Premium)\n * - Item counts\n * - Status indicators (New, Sale, Popular)\n * - Tags and categories\n */\nconst Badge = ({\n className,\n variant,\n size,\n shadow,\n strong,\n asChild = false,\n ref,\n ...props\n}: BadgeProps) => {\n const Comp = asChild ? SlotPrimitive.Slot : \"div\";\n\n return (\n <Comp\n className={cn(\n badgeVariants({ variant, size, shadow, strong }),\n className\n )}\n ref={ref}\n {...props}\n />\n );\n};\n\nexport { Badge, badgeVariants };\n"],
|
|
5
5
|
"mappings": "AAmII;AA3GJ,SAAS,WAA8B;AACvC,SAAS,QAAQ,qBAAqB;AAGtC,SAAS,UAAU;AAMnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA,QAEP,QACE;AAAA,QACF,OACE;AAAA,QACF,gBACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,QACF,aACE;AAAA,QACF,UAAU;AAAA,QACV,SACE;AAAA,QACF,OACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,aAAa;AAAA,QACb,OAAO;AAAA,QACP,YACE;AAAA,QACF,SACE;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AA4BA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAkB;AAChB,QAAM,OAAO,UAAU,cAAc,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,cAAc,EAAE,SAAS,MAAM,QAAQ,OAAO,CAAC;AAAA,QAC/C;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@music-vine/cadence",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -105,7 +105,6 @@
|
|
|
105
105
|
},
|
|
106
106
|
"devDependencies": {
|
|
107
107
|
"@biomejs/biome": "^2.3.3",
|
|
108
|
-
"@playwright/test": "^1.58.2",
|
|
109
108
|
"@storybook/addon-a11y": "^10.1.11",
|
|
110
109
|
"@storybook/addon-docs": "^10.1.11",
|
|
111
110
|
"@storybook/addon-links": "^10.1.11",
|
|
@@ -116,7 +115,6 @@
|
|
|
116
115
|
"@testing-library/react": "^16.3.0",
|
|
117
116
|
"@testing-library/user-event": "^14.6.1",
|
|
118
117
|
"@types/lodash": "^4.17.13",
|
|
119
|
-
"@types/pixelmatch": "^5.2.6",
|
|
120
118
|
"@types/react": "^19.0.0",
|
|
121
119
|
"@types/react-dom": "^19.0.0",
|
|
122
120
|
"@vitest/coverage-v8": "^3.2.4",
|
|
@@ -125,14 +123,10 @@
|
|
|
125
123
|
"esbuild": "^0.25.0",
|
|
126
124
|
"glob": "^11.0.0",
|
|
127
125
|
"jsdom": "^26.1.0",
|
|
128
|
-
"pixelmatch": "^7.1.0",
|
|
129
|
-
"pngjs": "^7.0.0",
|
|
130
126
|
"postcss": "^8.5.13",
|
|
131
127
|
"rimraf": "^6.0.1",
|
|
132
128
|
"storybook": "^10.2.10",
|
|
133
129
|
"tailwindcss": "^4.1.18",
|
|
134
|
-
"tailwindcss-v3": "npm:tailwindcss@^3.4.18",
|
|
135
|
-
"tsx": "^4.21.0",
|
|
136
130
|
"typescript": "^5.2.2",
|
|
137
131
|
"vite": "^8.0.10",
|
|
138
132
|
"vitest": "^3.2.4"
|
|
@@ -146,11 +140,6 @@
|
|
|
146
140
|
"test:ui": "vitest --ui",
|
|
147
141
|
"test:run": "vitest run",
|
|
148
142
|
"test:coverage": "vitest run --coverage",
|
|
149
|
-
"test:visual": "pnpm run test:visual:build && playwright test --config visual-tests/playwright.config.ts",
|
|
150
|
-
"test:visual:build": "pnpm run build && tsx visual-tests/fixtures/build-fixtures.ts",
|
|
151
|
-
"test:visual:update": "pnpm run test:visual -- --update-snapshots",
|
|
152
|
-
"test:visual:ui": "playwright test --config visual-tests/playwright.config.ts --ui",
|
|
153
|
-
"test:visual:report": "playwright show-report visual-tests/reports",
|
|
154
143
|
"storybook": "storybook dev -p 6007",
|
|
155
144
|
"build-storybook": "storybook build --output-dir storybook-static",
|
|
156
145
|
"preview-storybook": "npx http-server storybook-static -p 6007"
|