@enya-learning/nova 0.4.0

package/src/components/button/button.mdx

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

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

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

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

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

package/src/components/button-group/index.ts

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

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,228 @@
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+import { Button, buttonVariants } from "../button"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronDownIcon,
+} from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon
+                className={cn("size-4 rtl:rotate-180", className)}
+                {...props}
+              />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4 rtl:rotate-180", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

package/src/components/calendar/index.ts

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