@music-vine/cadence 0.1.0

package/dist/icons/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Cadence Icons
+ *
+ * All Lucide icons are re-exported, plus custom Uppbeat icons.
+ *
+ * @example
+ * import { Play, Pause, Tick, PremiumStar } from '@music-vine/cadence/icons';
+ */
+export * from "lucide-react";
+export * from "./custom/boards-indicator";
+export * from "./custom/download-history";
+export * from "./custom/exclamation-mark-in-octagon";
+export * from "./custom/pin";
+export * from "./custom/premium-star";
+export * from "./custom/social";
+export { Tick } from "./custom/tick";
+export * from "./custom/tick-in-circle";
+export * from "./custom/tick-small";
+export * from "./custom/uppbeat-credit";
+//# sourceMappingURL=index.d.ts.map

package/dist/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sCAAsC,CAAC;AACrD,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAEtC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC"}

package/dist/icons/index.js

@@ -0,0 +1,15 @@
+export * from "lucide-react";
+export * from "./custom/boards-indicator";
+export * from "./custom/download-history";
+export * from "./custom/exclamation-mark-in-octagon";
+export * from "./custom/pin";
+export * from "./custom/premium-star";
+export * from "./custom/social";
+import { Tick } from "./custom/tick";
+export * from "./custom/tick-in-circle";
+export * from "./custom/tick-small";
+export * from "./custom/uppbeat-credit";
+export {
+  Tick
+};
+//# sourceMappingURL=index.js.map

package/dist/icons/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/icons/index.ts"],
+  "sourcesContent": ["/**\n * Cadence Icons\n *\n * All Lucide icons are re-exported, plus custom Uppbeat icons.\n *\n * @example\n * import { Play, Pause, Tick, PremiumStar } from '@music-vine/cadence/icons';\n */\n\n// Re-export ALL Lucide icons\nexport * from \"lucide-react\";\nexport * from \"./custom/boards-indicator\";\nexport * from \"./custom/download-history\";\nexport * from \"./custom/exclamation-mark-in-octagon\";\nexport * from \"./custom/pin\";\nexport * from \"./custom/premium-star\";\n// Social icons\nexport * from \"./custom/social\";\n// Custom Uppbeat icons\nexport { Tick } from \"./custom/tick\";\nexport * from \"./custom/tick-in-circle\";\nexport * from \"./custom/tick-small\";\nexport * from \"./custom/uppbeat-credit\";\n"],
+  "mappings": "AAUA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,SAAS,YAAY;AACrB,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Cadence Design System
+ *
+ * The main entry point re-exports everything from components.
+ * For icons, use the subpath import to avoid naming conflicts:
+ *
+ * @example
+ * // Import UI components
+ * import { Button, Input, List } from '@music-vine/cadence/ui';
+ *
+ * // Import icons (includes ALL lucide icons + custom icons)
+ * import { Play, Pause, List as ListIcon } from '@music-vine/cadence/icons';
+ *
+ * // Import styles (CSS)
+ * import '@music-vine/cadence/styles';
+ */
+export * from "./components";
+export { cn } from "./lib/utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,cAAc,cAAc,CAAC;AAO7B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from "./components";
+import { cn } from "./lib/utils";
+export {
+  cn
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["/**\n * Cadence Design System\n *\n * The main entry point re-exports everything from components.\n * For icons, use the subpath import to avoid naming conflicts:\n *\n * @example\n * // Import UI components\n * import { Button, Input, List } from '@music-vine/cadence/ui';\n *\n * // Import icons (includes ALL lucide icons + custom icons)\n * import { Play, Pause, List as ListIcon } from '@music-vine/cadence/icons';\n *\n * // Import styles (CSS)\n * import '@music-vine/cadence/styles';\n */\n\n// Re-export all components\nexport * from \"./components\";\n\n// Note: Icons are NOT re-exported here to avoid naming conflicts\n// (e.g., lucide's `List` icon vs typography `List` component)\n// Import icons from '@music-vine/cadence/icons' instead\n\n// Re-export utilities\nexport { cn } from \"./lib/utils\";\n"],
+  "mappings": "AAkBA,cAAc;AAOd,SAAS,UAAU;",
+  "names": []
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { type ClassValue } from "clsx";
+/**
+ * Merge Tailwind CSS classes with clsx and tailwind-merge
+ * This ensures proper handling of conflicting classes
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;;GAGG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/lib/utils.ts"],
+  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge\n * This ensures proper handling of conflicting classes\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],
+  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAMjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;",
+  "names": []
+}

package/dist/styles/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/styles/storybook.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Storybook-specific global styles */
+body {
+  font-family: "DM Sans", system-ui, sans-serif;
+}
+
+/* Theme dark mode support */
+.theme-dark {
+  background-color: #151a20;
+  color: #fff;
+}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@music-vine/cadence",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "description": "Cadence Design System - UI components and icons for Uppbeat",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "ui": ["./dist/components/index.d.ts"],
+      "icons": ["./dist/icons/index.d.ts"],
+      "tailwind.config": ["./tailwind.config.ts"]
+    }
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./ui": {
+      "source": "./src/components/index.ts",
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./icons": {
+      "source": "./src/icons/index.ts",
+      "import": "./dist/icons/index.js",
+      "types": "./dist/icons/index.d.ts"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./tailwind.config": "./tailwind.config.ts"
+  },
+  "files": ["dist", "tailwind.config.ts"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Music-Vine/uppbeat-frontend.git",
+    "directory": "packages/cadence"
+  },
+  "homepage": "https://github.com/Music-Vine/uppbeat-frontend/tree/main/packages/cadence",
+  "bugs": {
+    "url": "https://github.com/Music-Vine/uppbeat-frontend/issues"
+  },
+  "keywords": ["react", "components", "ui", "design-system", "tailwind", "uppbeat"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "dev": "node build.js --watch",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.5.1",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.531.0",
+    "motion": "^12.0.0",
+    "radix-ui": "^1.1.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
+    "esbuild": "^0.24.2",
+    "glob": "^11.0.0",
+    "postcss": "^8.4.49",
+    "rimraf": "^6.0.1",
+    "storybook": "^10.1.11",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.2.2",
+    "vite": "^6.0.7"
+  }
+}

package/tailwind.config.ts

@@ -0,0 +1,299 @@
+import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
+
+/**
+ * Cadence Design System - Tailwind Configuration
+ *
+ * This config can be used as a preset in consuming applications:
+ *
+ * @example
+ * // tailwind.config.ts
+ * import cadencePreset from '@music-vine/cadence/tailwind.config';
+ *
+ * export default {
+ *   presets: [cadencePreset],
+ *   content: ['./src/**\/*.{ts,tsx}'],
+ * } satisfies Config;
+ */
+
+const cadenceConfig: Config = {
+  content: ["./src/**/*.{ts,tsx}"],
+  darkMode: ["selector", ".theme-dark"],
+  theme: {
+    screens: {
+      xxs: "24rem",
+      xs: "36rem",
+      sm: "40rem",
+      md: "48rem",
+      lg: "64rem",
+      xl: "80rem",
+      "2xl": "96rem",
+      "3xl": "125rem",
+    },
+    fontSize: {
+      xxs: [
+        "0.625rem",
+        {
+          lineHeight: "1rem",
+          letterSpacing: "0rem",
+        },
+      ],
+      xs: [
+        "0.75rem",
+        {
+          lineHeight: "1rem",
+          letterSpacing: "0.004rem",
+        },
+      ],
+      sm: [
+        "0.875rem",
+        {
+          lineHeight: "1.25rem",
+          letterSpacing: "0.0025rem",
+        },
+      ],
+      base: [
+        "1rem",
+        {
+          lineHeight: "1.5rem",
+          letterSpacing: "0.005rem",
+        },
+      ],
+      lg: [
+        "1.125rem",
+        {
+          lineHeight: "1.75rem",
+          letterSpacing: "0.0015rem",
+        },
+      ],
+      xl: [
+        "1.25rem",
+        {
+          lineHeight: "2rem",
+          letterSpacing: "0rem",
+        },
+      ],
+      "2xl": [
+        "1.5rem",
+        {
+          lineHeight: "2rem",
+          letterSpacing: "0rem",
+        },
+      ],
+      "3xl": [
+        "1.875rem",
+        {
+          lineHeight: "2.25rem",
+          letterSpacing: "0rem",
+        },
+      ],
+      "4xl": [
+        "2.25rem",
+        {
+          lineHeight: "2.5rem",
+          letterSpacing: "-0.063rem",
+        },
+      ],
+      "5xl": [
+        "3rem",
+        {
+          lineHeight: "3.25rem",
+          letterSpacing: "-0.125rem",
+        },
+      ],
+      "6xl": [
+        "3.75rem",
+        {
+          lineHeight: "4.25rem",
+          letterSpacing: "-0.125rem",
+        },
+      ],
+      "7xl": [
+        "4.5rem",
+        {
+          lineHeight: "5rem",
+          letterSpacing: "-0.125rem",
+        },
+      ],
+      "8xl": [
+        "6rem",
+        {
+          lineHeight: "6.5rem",
+          letterSpacing: "-0.188rem",
+        },
+      ],
+      "9xl": [
+        "8rem",
+        {
+          lineHeight: "8rem",
+          letterSpacing: "-0.015rem",
+        },
+      ],
+    },
+    colors: {
+      inherit: "inherit",
+      current: "currentColor",
+      transparent: "transparent",
+      black: "#151A20",
+      white: "#FFF",
+      gray: {
+        50: "#F5F6F7",
+        100: "#EDEEF0",
+        150: "#E3E5E7",
+        200: "#D9DBDE",
+        300: "#C5C7CB",
+        400: "#B4B6BA",
+        500: "#A3A6AB",
+        600: "#7B818A",
+        700: "#5A646F",
+        800: "#3D4653",
+        850: "#323A45",
+        900: "#1D232C",
+        950: "#151A20",
+      },
+      pink: {
+        50: "#FFF1F4",
+        100: "#FFE4EA",
+        200: "#FECDDA",
+        300: "#FCA5BC",
+        400: "#F47299",
+        500: "#F23D75",
+        600: "#DF1F64",
+        700: "#BC1454",
+        800: "#871447",
+        900: "#5F152E",
+        950: "#461F34",
+      },
+      green: {
+        light: "#DEF7EA",
+        DEFAULT: "#33CA7F",
+        dark: "#2CAF6E",
+        50: "#E9FADA",
+        100: "#D4F6C1",
+        200: "#A5E4C8",
+        300: "#7AD6B0",
+        400: "#A1D879",
+        500: "#67994D",
+        600: "#4D7A33",
+        700: "#355222",
+        800: "#064C38",
+        900: "#253D17",
+        950: "#1A2810",
+      },
+      red: {
+        DEFAULT: "#FC5252",
+        50: "#FDECEC",
+        100: "#FFC9C9",
+        200: "#FFA8A8",
+        300: "#FF6B6B",
+        400: "#FF7B73",
+        500: "#E15757",
+        600: "#C03E3E",
+        700: "#9B2828",
+        800: "#800E0E",
+        900: "#721B1B",
+        950: "#4D1212",
+      },
+      blue: {
+        special: {
+          light: "#EAF3FE",
+          dark: "#5C98F3",
+        },
+        50: "#EAF3FE",
+        100: "#DFF9FD",
+        200: "#D6F7FB",
+        300: "#CCF4FC",
+        400: "#8AB8FF",
+        500: "#5C98F3",
+        600: "#18BADB",
+        700: "#129BC0",
+        800: "#0D86A9",
+        900: "#097495",
+        950: "#1E324D",
+      },
+      purple: {
+        50: "#F8EAFE",
+        400: "#DDA5FB",
+        500: "#8F5DAF",
+        950: "#473D57",
+      },
+      yellow: {
+        50: "#FFF3D1",
+        400: "#FFD34C",
+        500: "#FFB452",
+        950: "#443F29",
+      },
+      free: {
+        lighter: "#e6fcff",
+        light: "#D1F7FF80",
+        DEFAULT: "#37CFED",
+        dark: "#0AAFD0",
+      },
+      explicit: "#A72525",
+      credit: "#37CFED",
+    },
+    extend: {
+      borderRadius: {
+        sm: "4px",
+      },
+      fontFamily: {
+        sans: ["DM Sans", "system-ui", "sans-serif"],
+        // --font-heading should be defined by the consuming app (e.g., "Aeonik Fono Pro")
+        // Falls back to DM Sans if not defined
+        heading: [
+          'var(--font-heading, "DM Sans")',
+          "DM Sans",
+          "system-ui",
+          "sans-serif",
+        ],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        fadeIn: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        fadeOut: {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        slideDownAndFade: {
+          from: { opacity: "0", transform: "translateY(-2px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideUpAndFade: {
+          from: { opacity: "0", transform: "translateY(2px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        fadeIn: "fadeIn 350ms cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards",
+        fadeOut: "fadeOut 350ms cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards",
+        slideDownAndFade:
+          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+      },
+      boxShadow: {
+        card: "0px 1px 8px 0px rgba(0, 0, 0, 0.05)",
+        glow: "0px 1px 4px 0.5px #F23D75",
+        50: "0 1px 4px 0 rgba(21, 26, 32, 0.04)",
+        100: "0 6px 12px 0 rgba(21, 26, 32, 0.12)",
+      },
+      borderWidth: {
+        1: "1px",
+      },
+    },
+  },
+  plugins: [animate],
+};
+
+export default cadenceConfig;