@enya-learning/nova 0.4.0 → 0.4.1

package/src/components/avatar/avatar.tsx

@@ -1,107 +0,0 @@
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
-
-import { cn } from "../../lib/utils"
-
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}: AvatarPrimitive.Root.Props & {
-  size?: "default" | "sm" | "lg"
-}) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn(
-        "aspect-square size-full rounded-full object-cover",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: AvatarPrimitive.Fallback.Props) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-}

package/src/components/avatar/index.ts

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

package/src/components/badge/badge.tsx

@@ -1,52 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
-      {
-        className: cn(badgeVariants({ variant }), className),
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant,
-    },
-  })
-}
-
-export { Badge, badgeVariants }

package/src/components/badge/index.ts

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

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,122 +0,0 @@
-import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-
-import { cn } from "../../lib/utils"
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
-
-function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      aria-label="breadcrumb"
-      data-slot="breadcrumb"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"a">) {
-  return useRender({
-    defaultTagName: "a",
-    props: mergeProps<"a">(
-      {
-        className: cn("transition-colors hover:text-foreground", className),
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "breadcrumb-link",
-    },
-  })
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("font-normal text-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
-    </li>
-  )
-}
-
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn(
-        "flex size-5 items-center justify-center [&>svg]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <MoreHorizontalIcon />
-      <span className="sr-only">More</span>
-    </span>
-  )
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

package/src/components/breadcrumb/index.ts

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

package/src/components/button/button.mdx

@@ -1,255 +0,0 @@
----
-title: Button
-description: Triggers an action or event when activated.
----
-
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as ButtonStories from './button.stories';
-import { Button, buttonVariants } from './button';
-import { Spinner } from '../spinner';
-import { ButtonGroup } from '../button-group';
-import { MailIcon, ArrowRightIcon, PlusIcon } from 'lucide-react';
-
-<Meta of={ButtonStories} />
-
-# Button
-
-Triggers an action or event when activated. Use buttons for form submissions, confirmations, and primary user actions.
-
-## Usage
-
-```tsx
-import { Button } from "@enya-learning/nova/components/button";
-```
-
-```tsx
-<Button variant="outline">Button</Button>
-```
-
-## Examples
-
-### Variants
-
-Seven visual variants for different levels of emphasis.
-
-<div className="my-4 flex flex-wrap items-center gap-2 rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="default">Default</Button>
-  <Button variant="accent">Accent</Button>
-  <Button variant="outline">Outline</Button>
-  <Button variant="secondary">Secondary</Button>
-  <Button variant="ghost">Ghost</Button>
-  <Button variant="destructive">Destructive</Button>
-  <Button variant="link">Link</Button>
-</div>
-
-<Canvas of={ButtonStories.AllVariants} />
-
-### Default
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button>Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Default} />
-
-### Accent
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="accent">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Accent} />
-
-### Outline
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="outline">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Outline} />
-
-### Secondary
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="secondary">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Secondary} />
-
-### Ghost
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="ghost">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Ghost} />
-
-### Destructive
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="destructive">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Destructive} />
-
-### Link
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button variant="link">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Link} />
-
-### Size
-
-Use the `size` prop to change the size of the button.
-
-<div className="my-4 flex flex-wrap items-center gap-3 rounded-xl border border-border bg-muted/30 p-8">
-  <Button size="xs">Extra Small</Button>
-  <Button size="sm">Small</Button>
-  <Button size="default">Default</Button>
-  <Button size="lg">Large</Button>
-  <Button size="xl">Extra Large</Button>
-</div>
-
-<Canvas of={ButtonStories.AllSizes} />
-
-### Icon
-
-Use `size="icon"` for square icon-only buttons. Always include an accessible `aria-label`.
-
-```tsx
-<Button size="icon" aria-label="Add">
-  <PlusIcon />
-</Button>
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button size="icon" aria-label="Add">
-    <PlusIcon />
-  </Button>
-</div>
-
-<Canvas of={ButtonStories.Icon} />
-
-### With Icon
-
-Add `data-icon="inline-start"` or `data-icon="inline-end"` to the icon for correct spacing.
-
-```tsx
-<Button>
-  <MailIcon data-icon="inline-start" />
-  Send email
-</Button>
-
-<Button>
-  Continue
-  <ArrowRightIcon data-icon="inline-end" />
-</Button>
-```
-
-<div className="my-4 flex flex-wrap items-center gap-3 rounded-xl border border-border bg-muted/30 p-8">
-  <Button><MailIcon data-icon="inline-start" /> Send email</Button>
-  <Button>Continue <ArrowRightIcon data-icon="inline-end" /></Button>
-</div>
-
-<Canvas of={ButtonStories.WithIconStart} />
-
-<Canvas of={ButtonStories.WithIconEnd} />
-
-### Rounded
-
-Add `className="rounded-full"` to make the button fully rounded.
-
-```tsx
-<Button className="rounded-full">Rounded</Button>
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button className="rounded-full">Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Rounded} />
-
-### Spinner
-
-Render a `<Spinner />` inside the button to show a loading state. Add `data-icon="inline-start"` or `data-icon="inline-end"` for correct spacing.
-
-```tsx
-<Button disabled>
-  <Spinner data-icon="inline-start" />
-  Processing
-</Button>
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button disabled><Spinner data-icon="inline-start" /> Processing</Button>
-</div>
-
-<Canvas of={ButtonStories.WithSpinner} />
-
-### Disabled
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <Button disabled>Button</Button>
-</div>
-
-<Canvas of={ButtonStories.Disabled} />
-
-### Button Group
-
-To create a button group, use the `ButtonGroup` component. See the [Button Group](?path=/docs/components-button-group--docs) story for details.
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <ButtonGroup>
-    <Button variant="outline">Back</Button>
-    <Button variant="outline">Cancel</Button>
-    <Button>Save</Button>
-  </ButtonGroup>
-</div>
-
-<Canvas of={ButtonStories.ButtonGroupDemo} />
-
-### As Link
-
-Use the `buttonVariants` helper to style any element as a button. This is the correct approach for links — **do not** use `<Button render={<a />} />` because Base UI always applies `role="button"`, which overrides the semantic link role on `<a>` elements.
-
-```tsx
-import { buttonVariants } from "@enya-learning/nova/components/button";
-
-<a href="/dashboard" className={buttonVariants({ variant: "default" })}>
-  Go to Dashboard
-</a>
-```
-
-<div className="my-4 flex items-center justify-center rounded-xl border border-border bg-muted/30 p-8">
-  <a href="#" className={buttonVariants({ variant: "default" })}>Link as Button</a>
-</div>
-
-<Canvas of={ButtonStories.AsLink} />
-
-## API Reference
-
-### Button
-
-| Prop | Type | Default |
-|------|------|---------|
-| `variant` | `"default" \| "accent" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"` | `"default"` |
-| `size` | `"default" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| "icon-xl"` | `"default"` |
-| `disabled` | `boolean` | `false` |
-| `className` | `string` | — |
-| `children` | `React.ReactNode` | — |
-
-All other props are forwarded to the underlying [Base UI Button](https://base-ui.com/components/button) element.
-
-### buttonVariants
-
-```tsx
-import { buttonVariants } from "@enya-learning/nova/components/button";
-
-buttonVariants({ variant?: ButtonVariant, size?: ButtonSize }): string
-```
-
-Returns the computed class string for the given variant and size. Use this to style non-`<button>` elements (e.g. `<a>`, `<Link>`) with button appearance.
-
-<Controls of={ButtonStories.Default} />

package/src/components/button/button.tsx

@@ -1,59 +0,0 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        accent: "bg-accent text-primary-foreground hover:bg-accent/80",
-        default: "bg-foreground text-primary-foreground hover:bg-foreground/80",
-        outline:
-          "border-border bg-nova-white hover:bg-input/30 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
-        xl: "h-15 gap-2 rounded-full px-5 text-2xl has-data-[icon=inline-end]:pe-4 has-data-[icon=inline-start]:ps-4",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-        "icon-xl": "size-12",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/src/components/button/index.ts

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

package/src/components/button-group/button-group.tsx

@@ -1,87 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-import { Separator } from "../separator"
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0",
-        vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  }
-)
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupText({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">) {
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(
-      {
-        className: cn(
-          "flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-          className
-        ),
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "button-group-text",
-    },
-  })
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}