@enya-learning/nova 0.4.0

package/src/styles/theme-nova.css

@@ -0,0 +1,201 @@
+@theme {
+  --color-nova-background: light-dark(
+    var(--color-nova-white),
+    var(--color-nova-black)
+  );
+
+  --color-nova-primary: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+  --color-nova-primary-foreground: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-900)
+  );
+
+  --color-nova-secondary: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-800)
+  );
+  --color-nova-secondary-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+
+  --color-nova-muted: light-dark(
+    var(--color-nova-zinc-50),
+    var(--color-nova-zinc-800)
+  );
+  --color-nova-muted-foreground: light-dark(
+    var(--color-nova-zinc-500),
+    var(--color-nova-zinc-400)
+  );
+
+  --color-nova-accent: light-dark(
+    var(--color-nova-brand-500),
+    var(--color-nova-brand-400)
+  );
+  --color-nova-accent-foreground: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-900)
+  );
+
+  /*DO NOT REFERENCE AS IT MIGHT BE DELETED IN THE FUTURE*/
+  --color-nova-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+
+  --color-nova-card: light-dark(
+    var(--color-nova-zinc-50),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-card-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+
+  --color-nova-popover: light-dark(
+    var(--color-nova-zinc-50),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-popover-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+
+  --color-nova-info: light-dark(
+    var(--color-nova-blue-600),
+    var(--color-nova-blue-400)
+  );
+  --color-nova-info-foreground: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-info-soft: light-dark(
+    var(--color-nova-blue-50),
+    var(--color-nova-blue-950)
+  );
+  --color-nova-info-soft-foreground: light-dark(
+    var(--color-nova-blue-700),
+    var(--color-nova-blue-300)
+  );
+
+  --color-nova-success: light-dark(
+    var(--color-nova-emerald-600),
+    var(--color-nova-emerald-400)
+  );
+  --color-nova-success-foreground: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-success-soft: light-dark(
+    var(--color-nova-emerald-50),
+    var(--color-nova-emerald-950)
+  );
+  --color-nova-success-soft-foreground: light-dark(
+    var(--color-nova-emerald-700),
+    var(--color-nova-emerald-300)
+  );
+
+  --color-nova-warning: light-dark(
+    var(--color-nova-amber-500),
+    var(--color-nova-amber-400)
+  );
+  --color-nova-warning-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-warning-soft: light-dark(
+    var(--color-nova-amber-50),
+    var(--color-nova-amber-950)
+  );
+  --color-nova-warning-soft-foreground: light-dark(
+    var(--color-nova-amber-700),
+    var(--color-nova-amber-300)
+  );
+
+  --color-nova-destructive: light-dark(
+    var(--color-nova-red-600),
+    var(--color-nova-red-400)
+  );
+  --color-nova-destructive-foreground: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-destructive-soft: light-dark(
+    var(--color-nova-red-50),
+    var(--color-nova-red-950)
+  );
+  --color-nova-destructive-soft-foreground: light-dark(
+    var(--color-nova-red-700),
+    var(--color-nova-red-300)
+  );
+
+  --color-nova-border: light-dark(
+    var(--color-nova-zinc-200),
+    var(--color-nova-zinc-800)
+  );
+  --color-nova-input: light-dark(
+    var(--color-nova-zinc-300),
+    var(--color-nova-zinc-700)
+  );
+  --color-nova-ring: light-dark(
+    var(--color-nova-brand-500),
+    var(--color-nova-brand-400)
+  );
+
+  --color-nova-chart-1: light-dark(
+    var(--color-nova-brand-600),
+    var(--color-nova-brand-400)
+  );
+  --color-nova-chart-2: light-dark(
+    var(--color-nova-emerald-800),
+    var(--color-nova-emerald-200)
+  );
+  --color-nova-chart-3: light-dark(
+    var(--color-nova-yellow-600),
+    var(--color-nova-yellow-400)
+  );
+  --color-nova-chart-4: light-dark(
+    var(--color-nova-blue-800),
+    var(--color-nova-blue-400)
+  );
+  --color-nova-chart-5: light-dark(
+    var(--color-nova-red-600),
+    var(--color-nova-red-400)
+  );
+
+  --color-nova-sidebar: light-dark(
+    var(--color-nova-zinc-50),
+    var(--color-nova-zinc-950)
+  );
+  --color-nova-sidebar-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+  --color-nova-sidebar-primary: light-dark(
+    var(--color-nova-brand-600),
+    var(--color-nova-brand-400)
+  );
+  --color-nova-sidebar-primary-foreground: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-900)
+  );
+  --color-nova-sidebar-accent: light-dark(
+    var(--color-nova-zinc-100),
+    var(--color-nova-zinc-800)
+  );
+  --color-nova-sidebar-accent-foreground: light-dark(
+    var(--color-nova-zinc-900),
+    var(--color-nova-zinc-100)
+  );
+  --color-nova-sidebar-border: light-dark(
+    var(--color-nova-zinc-200),
+    var(--color-nova-zinc-800)
+  );
+  --color-nova-sidebar-ring: light-dark(
+    var(--color-nova-brand-600),
+    var(--color-nova-brand-400)
+  );
+}

package/src/styles/typography.css

@@ -0,0 +1,215 @@
+/* Geist-style typography utilities.
+   Each class pre-sets font-size, line-height, letter-spacing, and font-weight.
+   All classes work with Tailwind variants: md:text-heading-32, hover:text-label-14, etc. */
+
+/* ─── Headings ─────────────────────────────────────────────────────────────── */
+
+@utility text-heading-72 {
+  font-size: 4.5rem;
+  line-height: 4.5rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-64 {
+  font-size: 4rem;
+  line-height: 4rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-56 {
+  font-size: 3.5rem;
+  line-height: 3.5rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-48 {
+  font-size: 3rem;
+  line-height: 3.5rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-40 {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-32 {
+  font-size: 2rem;
+  line-height: 2.5rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-24 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-20 {
+  font-size: 1.25rem;
+  line-height: 1.625;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-16 {
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+@utility text-heading-14 {
+  font-size: 0.875rem;
+  line-height: 1.25;
+  font-weight: 600;
+}
+
+/* ─── Buttons ──────────────────────────────────────────────────────────────── */
+
+@utility text-button-16 {
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+@utility text-button-14 {
+  font-size: 0.875rem;
+  line-height: 1.4286;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+@utility text-button-12 {
+  font-size: 0.75rem;
+  line-height: 1.3333;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+/* ─── Labels ───────────────────────────────────────────────────────────────── */
+
+@utility text-label-20 {
+  font-size: 1.25rem;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-18 {
+  font-size: 1.125rem;
+  line-height: 1.3333;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-16 {
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-14 {
+  font-size: 0.875rem;
+  line-height: 1.4286;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-14-mono {
+  font-size: 0.875rem;
+  line-height: 1.4286;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-family: var(--font-mono);
+}
+
+@utility text-label-13 {
+  font-size: 0.8125rem;
+  line-height: 1.2308;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-13-mono {
+  font-size: 0.8125rem;
+  line-height: 1.2308;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-family: var(--font-mono);
+}
+
+@utility text-label-12 {
+  font-size: 0.75rem;
+  line-height: 1.3333;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-12-mono {
+  font-size: 0.75rem;
+  line-height: 1.3333;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-family: var(--font-mono);
+}
+
+/* ─── Copy ─────────────────────────────────────────────────────────────────── */
+
+@utility text-copy-24 {
+  font-size: 1.5rem;
+  line-height: 1.6667;
+  font-weight: 400;
+}
+
+@utility text-copy-20 {
+  font-size: 1.25rem;
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+@utility text-copy-18 {
+  font-size: 1.125rem;
+  line-height: 1.5556;
+  font-weight: 400;
+}
+
+@utility text-copy-16 {
+  font-size: 1rem;
+  line-height: 1.625;
+  font-weight: 400;
+}
+
+@utility text-copy-14 {
+  font-size: 0.875rem;
+  line-height: 1.7143;
+  font-weight: 400;
+}
+
+@utility text-copy-13 {
+  font-size: 0.8125rem;
+  line-height: 1.5385;
+  font-weight: 400;
+}
+
+@utility text-copy-13-mono {
+  font-size: 0.8125rem;
+  line-height: 1.5385;
+  font-weight: 400;
+  font-family: var(--font-mono);
+}
+@utility text-copy-12 {
+  font-size: 0.75rem;
+  line-height: 150%;
+  font-weight: 400;
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "../lib/utils"

package/templates/component/component.tsx.hbs

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils"
+
+function {{pascalCase name}}({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="{{kebabCase name}}"
+      className={cn("", className)}
+      {...props}
+    />
+  )
+}
+
+export { {{pascalCase name}} }

package/templates/component/index.ts.hbs

@@ -0,0 +1 @@
+export * from "./{{kebabCase name}}"

package/templates/component/stories.tsx.hbs

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { {{pascalCase name}} } from "./{{kebabCase name}}"
+
+const meta: Meta<typeof {{pascalCase name}}> = {
+  title: "Components/{{pascalCase name}}",
+  component: {{pascalCase name}},
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "allowArbitraryExtensions": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.lint.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,101 @@
+import { defineConfig } from "vitest/config"
+import { resolve, dirname } from "path"
+import { fileURLToPath } from "url"
+import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default defineConfig(({ mode }) => {
+  const isDev = mode === "development"
+
+  return {
+    plugins: [
+      react(),
+      dts({
+        include: ["src/**/*"],
+        exclude: [
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "**/*.stories.ts",
+          "**/*.stories.tsx",
+        ],
+        compilerOptions: {
+          incremental: isDev,
+          tsBuildInfoFile: isDev ? "./.tsbuildinfo" : undefined,
+        },
+      }),
+    ],
+    build: {
+      lib: {
+        entry: {
+          index: resolve(__dirname, "src/index.ts"),
+          "components/button": resolve(
+            __dirname,
+            "src/components/button/index.ts"
+          ),
+          "components/enya-logo": resolve(
+            __dirname,
+            "src/components/enya-logo/index.ts"
+          ),
+          // ADD_COMPONENT_ENTRY_HERE
+          utils: resolve(__dirname, "src/utils/index.ts"),
+        },
+        formats: ["es"],
+        fileName: (_, entryName) => `${entryName}.js`,
+      },
+      rollupOptions: {
+        external: (id) => {
+          switch (true) {
+            case id === "react":
+            case id.startsWith("react/"):
+            case id === "react-dom":
+            case id.startsWith("react-dom/"):
+            case id === "lucide-react":
+            case id.startsWith("lucide-react/"):
+              return true
+            default:
+              return false
+          }
+        },
+        output: {
+          preserveModules: false,
+          chunkFileNames: (chunkInfo) => {
+            const name = chunkInfo.name.replace(/[-_]+$/, "") || "chunk"
+            return `chunks/${name}-[hash:16].js`
+          },
+          hashCharacters: "base36",
+          hoistTransitiveImports: false,
+          banner: (chunk) => {
+            if (
+              chunk.name?.includes("server") ||
+              chunk.fileName?.includes("server")
+            ) {
+              return ""
+            }
+            return '"use client";\n'
+          },
+          manualChunks: (id) => {
+            if (id.includes("node_modules")) {
+              if (id.includes("clsx") || id.includes("tailwind-merge"))
+                return "vendor-styling"
+              if (id.includes("@floating-ui")) return "vendor-floating-ui"
+              if (id.includes("@base-ui")) return "vendor-base-ui"
+            }
+          },
+        },
+        cache: isDev,
+      },
+      sourcemap: isDev ? "inline" : true,
+      minify: isDev ? false : "esbuild",
+      emptyOutDir: !isDev,
+    },
+    resolve: {
+      alias: { "@": resolve(__dirname, "src") },
+    },
+    test: {
+      include: ["src/**/*.test.{ts,tsx}"],
+    },
+  }
+})