@enya-learning/nova 0.4.0 → 0.4.1

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -1,270 +0,0 @@
-import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-
-import { cn } from "../../lib/utils"
-import { ChevronRightIcon, CheckIcon } from "lucide-react"
-
-function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-}
-
-function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
-  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
-}
-
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}: MenuPrimitive.Popup.Props &
-  Pick<
-    MenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
-  return (
-    <MenuPrimitive.Portal>
-      <MenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-      >
-        <MenuPrimitive.Popup
-          data-slot="dropdown-menu-content"
-          className={cn(
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          )}
-          {...props}
-        />
-      </MenuPrimitive.Positioner>
-    </MenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: MenuPrimitive.GroupLabel.Props & {
-  inset?: boolean
-}) {
-  return (
-    <MenuPrimitive.GroupLabel
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-3 py-2.5 text-xs text-muted-foreground data-inset:ps-9.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: MenuPrimitive.Item.Props & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <MenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: MenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean
-}) {
-  return (
-    <MenuPrimitive.SubmenuTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ms-auto rtl:rotate-180" />
-    </MenuPrimitive.SubmenuTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  align = "start",
-  alignOffset = -3,
-  side = "inline-end",
-  sideOffset = 0,
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuContent>) {
-  return (
-    <DropdownMenuContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "w-auto min-w-36 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-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
-      )}
-      align={align}
-      alignOffset={alignOffset}
-      side={side}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: MenuPrimitive.CheckboxItem.Props & {
-  inset?: boolean
-}) {
-  return (
-    <MenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-2 ps-3 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span
-        className="pointer-events-none absolute end-2 flex items-center justify-center"
-        data-slot="dropdown-menu-checkbox-item-indicator"
-      >
-        <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon />
-        </MenuPrimitive.CheckboxItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
-  return (
-    <MenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: MenuPrimitive.RadioItem.Props & {
-  inset?: boolean
-}) {
-  return (
-    <MenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-2 ps-3 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span
-        className="pointer-events-none absolute end-2 flex items-center justify-center"
-        data-slot="dropdown-menu-radio-item-indicator"
-      >
-        <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon />
-        </MenuPrimitive.RadioItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: MenuPrimitive.Separator.Props) {
-  return (
-    <MenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border/50", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}

package/src/components/dropdown-menu/index.ts

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

package/src/components/empty/empty.tsx

@@ -1,104 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty"
-      className={cn(
-        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-header"
-      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-const emptyMediaVariants = cva(
-  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function EmptyMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
-  return (
-    <div
-      data-slot="empty-icon"
-      data-variant={variant}
-      className={cn(emptyMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-title"
-      className={cn(
-        "font-heading text-lg font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <div
-      data-slot="empty-description"
-      className={cn(
-        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-content"
-      className={cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-}

package/src/components/empty/index.ts

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

package/src/components/enya-logo/enya-logo.mdx

@@ -1,174 +0,0 @@
----
-title: Enya Logo
-description: Enya Learning brand logo component with icon, wordmark, and full logo variants.
----
-
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as EnyaLogoStories from './enya-logo.stories';
-import { EnyaLogo, generateEnyaLogoSvg } from './enya-logo';
-
-<Meta of={EnyaLogoStories} />
-
-# Enya Logo
-
-The `EnyaLogo` component renders the Enya Learning brand identity as an inline SVG. It supports three variants (icon, wordmark, full), two orientations for the full logo (horizontal, vertical), and three color schemes (primary, black, white).
-
-## Usage
-
-```tsx
-import { EnyaLogo } from "@enya-learning/nova/components/enya-logo";
-```
-
-```tsx
-<EnyaLogo className="w-40" />
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo className="w-40" />
-</div>
-
-<Canvas of={EnyaLogoStories.Default} />
-
-## Examples
-
-### Full Logo — Horizontal
-
-The default layout places the icon to the left and the wordmark to the right.
-
-```tsx
-<EnyaLogo variant="full" orientation="horizontal" className="w-56" />
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo variant="full" orientation="horizontal" className="w-56" />
-</div>
-
-<Canvas of={EnyaLogoStories.HorizontalPrimary} />
-
-### Full Logo — Vertical
-
-Use `orientation="vertical"` to stack the icon above the wordmark.
-
-```tsx
-<EnyaLogo variant="full" orientation="vertical" className="w-36" />
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo variant="full" orientation="vertical" className="w-36" />
-</div>
-
-<Canvas of={EnyaLogoStories.VerticalPrimary} />
-
-### Icon Only
-
-Use `variant="icon"` to display just the brand mark with its colored background square.
-
-```tsx
-<EnyaLogo variant="icon" className="w-16" />
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo variant="icon" className="w-16" />
-</div>
-
-<Canvas of={EnyaLogoStories.IconPrimary} />
-
-### Wordmark Only
-
-Use `variant="wordmark"` to display the "Enya learning" text without the icon.
-
-```tsx
-<EnyaLogo variant="wordmark" className="w-64" />
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo variant="wordmark" className="w-64" />
-</div>
-
-<Canvas of={EnyaLogoStories.WordmarkDark} />
-
-### Color Variants
-
-Three color schemes are available for every variant. Use `primary` on light or neutral backgrounds, `black` on dark backgrounds.
-
-```tsx
-<EnyaLogo color="primary" className="w-40" />
-<EnyaLogo color="white" className="w-40" />
-<EnyaLogo color="black" className="w-40" />
-```
-
-<div className="my-4 flex flex-wrap items-center gap-8 rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo color="primary" className="w-40" />
-  <EnyaLogo color="white" className="w-40" />
-  <div className="rounded-lg bg-[#151515] p-4">
-    <EnyaLogo color="black" className="w-40" />
-  </div>
-</div>
-
-<Canvas of={EnyaLogoStories.HorizontalPrimary} />
-<Canvas of={EnyaLogoStories.HorizontalWhite} />
-<Canvas of={EnyaLogoStories.HorizontalBlack} />
-
-### Sizing
-
-Size the logo with a Tailwind width class. The height scales automatically to maintain aspect ratio.
-
-```tsx
-<EnyaLogo className="w-24" />
-<EnyaLogo className="w-40" />
-<EnyaLogo className="w-56" />
-```
-
-<div className="my-4 flex flex-wrap items-end gap-6 rounded-xl border border-border bg-muted/30 p-8">
-  <EnyaLogo className="w-24" />
-  <EnyaLogo className="w-40" />
-  <EnyaLogo className="w-56" />
-</div>
-
-## SVG Generation
-
-Use `generateEnyaLogoSvg()` to get copy-paste ready SVG markup for non-React contexts such as emails, PDFs, or design tools.
-
-```ts
-import { generateEnyaLogoSvg } from "@enya-learning/nova/components/enya-logo";
-
-// Icon SVG
-const iconSvg = generateEnyaLogoSvg({ variant: "icon" });
-
-// Full horizontal logo, primary color
-const fullSvg = generateEnyaLogoSvg({ variant: "full", orientation: "horizontal", color: "primary" });
-
-// Copy to clipboard
-await navigator.clipboard.writeText(
-  generateEnyaLogoSvg({ variant: "icon", color: "primary" }),
-);
-```
-
-## API Reference
-
-### EnyaLogo
-
-`EnyaLogo` extends `SVGSVGElement` and forwards all standard SVG attributes to the root `<svg>` element.
-
-| Prop | Type | Default |
-|------|------|---------|
-| `variant` | `"full" \| "icon" \| "wordmark"` | `"full"` |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
-| `color` | `"primary" \| "black" \| "white"` | `"primary"` |
-| `className` | `string` | — |
-
-`orientation` only applies when `variant="full"`. All other `SVGSVGElement` props (`aria-label`, `style`, `data-*`, etc.) are forwarded directly.
-
-### generateEnyaLogoSvg
-
-```ts
-generateEnyaLogoSvg(options?: {
-  variant?: "full" | "icon" | "wordmark";
-  orientation?: "horizontal" | "vertical";
-  color?: "primary" | "black" | "white";
-}): string
-```
-
-Returns a raw SVG string. All options default to the same values as `EnyaLogo`.
-
-<Controls of={EnyaLogoStories.Default} />