@enya-learning/nova 0.4.0

package/dist/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/dist/utils.js

@@ -0,0 +1,5 @@
+"use client";
+import { t as e } from "./chunks/utils-kyb5nny4y41y7hd8.js";
+export {
+  e as cn
+};

package/eslint.config.js

@@ -0,0 +1,30 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
+import eslintConfigPrettier from "eslint-config-prettier"
+import novaPlugin from "./src/eslint/index.js"
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      eslintConfigPrettier,
+    ],
+    plugins: { nova: novaPlugin },
+    languageOptions: {
+      globals: globals.browser,
+    },
+    rules: {
+      "react-refresh/only-export-components": "off",
+      "nova/no-primitive-colors": "error",
+    },
+  },
+])

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@enya-learning/nova",
+  "version": "0.4.0",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@fontsource-variable/geist-mono": "^5.2.8",
+    "@fontsource-variable/inter": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1.17.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10",
+    "@storybook/addon-a11y": "^10.4.2",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-themes": "^10.4.2",
+    "@storybook/react": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
+    "@tailwindcss/vite": "^4",
+    "@turbo/gen": "^2.9.15",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/ui": "^4.1.8",
+    "eslint": "^10",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17",
+    "plop": "^4.0.0",
+    "react-docgen-typescript": "^2.4.0",
+    "shadcn": "^4.10.0",
+    "storybook": "^10.4.2",
+    "tailwindcss": "^4",
+    "tsx": "^4.22.4",
+    "typescript": "~6",
+    "typescript-eslint": "^8",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles/tailwind": "./src/styles/nova.css",
+    "./styles": "./src/styles/nova.css",
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*/index.ts",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./utils": "./src/utils/index.ts",
+    "./eslint": "./src/eslint/index.js"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "vite build --mode production && tsx scripts/css-build.ts",
+    "dev": "vite build --watch --mode development",
+    "clean": "rm -rf dist",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "generate-docs": "tsx scripts/generate-docs.ts",
+    "new-component": "plop component"
+  }
+}

package/plopfile.mjs

@@ -0,0 +1,49 @@
+export default function (plop) {
+  plop.setGenerator("component", {
+    description: "Scaffold a new Nova component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "Component name (e.g. Button, DatePicker):",
+        validate: (value) =>
+          value.trim().length > 0 ? true : "Component name is required",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/components/{{kebabCase name}}/{{kebabCase name}}.tsx",
+        templateFile: "templates/component/component.tsx.hbs",
+      },
+      {
+        type: "add",
+        path: "src/components/{{kebabCase name}}/index.ts",
+        templateFile: "templates/component/index.ts.hbs",
+      },
+      {
+        type: "add",
+        path: "src/components/{{kebabCase name}}/{{kebabCase name}}.stories.tsx",
+        templateFile: "templates/component/stories.tsx.hbs",
+      },
+      {
+        type: "modify",
+        path: "src/index.ts",
+        pattern: /(export \* from "\.\/utils")/,
+        template: 'export * from "./components/{{kebabCase name}}"\n$1',
+      },
+      {
+        type: "modify",
+        path: "vite.config.ts",
+        pattern: /          \/\/ ADD_COMPONENT_ENTRY_HERE/,
+        template: [
+          '          "components/{{kebabCase name}}": resolve(',
+          "            __dirname,",
+          '            "src/components/{{kebabCase name}}/index.ts"',
+          "          ),",
+          "          // ADD_COMPONENT_ENTRY_HERE",
+        ].join("\n"),
+      },
+    ],
+  })
+}

package/src/components/accordion/accordion.mdx

@@ -0,0 +1,83 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+---
+
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as AccordionStories from './accordion.stories';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+A vertically stacked set of interactive headings that each reveal a section of content. Follows the WAI-ARIA Disclosure pattern.
+
+## Usage
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@enya-learning/nova/components/accordion";
+
+export default function Example() {
+  return (
+    <Accordion className="w-80">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## Examples
+
+### Single (default)
+
+Only one item can be open at a time. Opening a new item collapses the previous one.
+
+```tsx
+<Accordion className="w-80">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Is it styled?</AccordionTrigger>
+    <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-3">
+    <AccordionTrigger>Is it animated?</AccordionTrigger>
+    <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+<Canvas of={AccordionStories.Single} />
+
+### Multiple
+
+Add `multiple` to allow multiple items to be open simultaneously.
+
+```tsx
+<Accordion multiple className="w-80">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Section one</AccordionTrigger>
+    <AccordionContent>Content for the first section. Multiple can be open at once.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Section two</AccordionTrigger>
+    <AccordionContent>Content for the second section.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+<Canvas of={AccordionStories.Multiple} />
+
+## API Reference
+
+<Controls of={AccordionStories.Single} />

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,81 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "../../lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b data-open:bg-muted/50", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-start text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/accordion/index.ts

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

package/src/components/alert/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute end-3 top-2.5", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/components/alert/index.ts

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