@enya-learning/nova 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enya-learning/nova",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -62,18 +62,33 @@
     "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",
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles/tailwind": "./dist/styles/nova.css",
+    "./styles": "./dist/styles/nova.css",
+    "./globals.css": "./dist/styles/globals.css",
+    "./components/button": {
+      "types": "./dist/src/components/button/index.d.ts",
+      "default": "./dist/components/button.js"
+    },
+    "./components/enya-logo": {
+      "types": "./dist/src/components/enya-logo/index.d.ts",
+      "default": "./dist/components/enya-logo.js"
+    },
+    "./utils": {
+      "types": "./dist/src/utils/index.d.ts",
+      "default": "./dist/utils.js"
+    },
     "./eslint": "./src/eslint/index.js"
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "dist",
+    "src/eslint"
+  ],
   "sideEffects": [
     "*.css"
   ],

package/changelog.md

@@ -1,44 +0,0 @@
-# @enya-learning/nova
-
-## 0.4.0
-
-### Minor Changes
-
-- Add EnyaLogo component, expand Button variants and sizes, add
-  `nova/no-primitive-colors` ESLint rule, and introduce status color tokens.
-  - **EnyaLogo**: new brand SVG component with `variant` (color/mono/white) and
-    `size` props, full MDX docs and Storybook stories
-  - **Button**: new `accent` variant; new `xl`, `icon-xs`, `icon-sm`, `icon-lg`,
-    `icon-xl` sizes; updated default variant from `bg-primary` to
-    `bg-foreground` (Nova brand style); full MDX docs and expanded stories
-  - **ESLint**: new `nova/no-primitive-colors` rule prevents raw colour values —
-    enforces semantic token usage
-  - **Colours**: palette CSS variables single-sourced; status color tokens
-    added; Colours story reworked
-  - **Styles**: updated `nova-binding.css` and `theme-nova.css` with expanded
-    token set
-
-## 0.2.1
-
-### Patch Changes
-
-- bb05c41: updated typography styling for nova
-
-## 0.2.0
-
-### Minor Changes
-
-- 5be8520: Updated all components to have storybook definitions (regressions
-  still exist and not stable)
-
-## 0.1.0
-
-### Minor Changes
-
-- Initial release of Nova — Enya Learning's component library.
-  - Full component set built on Base UI primitives and Tailwind CSS v4
-  - Nova colour token system aligned with shadcn naming conventions, namespaced
-    under `nova-*`
-  - Design tokens generated from Style Dictionary with light/dark mode support
-  - Corrected peer dependency classification: `react`, `react-dom`, and
-    `lucide-react` are now peer dependencies rather than bundled dependencies

package/components.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "base-maia",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles/nova.css",
-    "baseColor": "neutral",
-    "cssVariables": false
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@enya-learning/nova/components",
-    "utils": "@enya-learning/nova/lib/utils",
-    "hooks": "@enya-learning/nova/hooks",
-    "lib": "@enya-learning/nova/lib",
-    "ui": "@enya-learning/nova/components"
-  },
-  "rtl": true,
-  "menuColor": "default",
-  "menuAccent": "subtle"
-}

package/eslint.config.js

@@ -1,30 +0,0 @@
-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/plopfile.mjs

@@ -1,49 +0,0 @@
-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

@@ -1,83 +0,0 @@
----
-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

@@ -1,81 +0,0 @@
-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

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

package/src/components/alert/alert.tsx

@@ -1,76 +0,0 @@
-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

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

package/src/components/alert-dialog/alert-dialog.tsx

@@ -1,187 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
-
-import { cn } from "../../lib/utils"
-import { Button } from "../button"
-
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
-  return (
-    <AlertDialogPrimitive.Backdrop
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-nova-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  size = "default",
-  ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Popup
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          "group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/5 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md rtl:translate-x-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        "font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  size = "default",
-  ...props
-}: AlertDialogPrimitive.Close.Props &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
-  return (
-    <AlertDialogPrimitive.Close
-      data-slot="alert-dialog-cancel"
-      className={cn(className)}
-      render={<Button variant={variant} size={size} />}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-}

package/src/components/alert-dialog/index.ts

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

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,22 +0,0 @@
-import { cn } from "../../lib/utils"
-
-function AspectRatio({
-  ratio,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & { ratio: number }) {
-  return (
-    <div
-      data-slot="aspect-ratio"
-      style={
-        {
-          "--ratio": ratio,
-        } as React.CSSProperties
-      }
-      className={cn("relative aspect-(--ratio)", className)}
-      {...props}
-    />
-  )
-}
-
-export { AspectRatio }

package/src/components/aspect-ratio/index.ts

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