feat(shadcn-ui): add support for aliases

2026-07-01 00:24:20 +00:00 · 2023-04-17 12:59:57 +04:00
parent 3819f07d9d
commit b5d43688b9
15 changed files with 756 additions and 306 deletions
--- a/.changeset/chatty-needles-search.md
+++ b/.changeset/chatty-needles-search.md
@@ -0,0 +1,5 @@
+---
+"shadcn-ui": patch
+---
+
+rename package to shadcn-ui
--- a/.github/workflows/prerelease-comment.yml
+++ b/.github/workflows/prerelease-comment.yml
@@ -28,7 +28,7 @@ jobs:

            for (const artifact of allArtifacts.data.artifacts) {
              // Extract the PR number and package version from the artifact name
-              const match = /^npm-package-@shadcn-ui@(.*?)-pr-(\d+)/.exec(artifact.name);
+              const match = /^npm-package-shadcn-ui@(.*?)-pr-(\d+)/.exec(artifact.name);
              
              if (match) {
                require("fs").appendFileSync(
@@ -49,7 +49,7 @@ jobs:
            A new prerelease is available for testing:

            ```sh
-            npx @shadcn/ui@${{ env.BETA_PACKAGE_VERSION }}
+            npx shadcn-ui@${{ env.BETA_PACKAGE_VERSION }}
            ```

      - name: "Remove the autorelease label once published"
--- a/.github/workflows/prerelease.yml
+++ b/.github/workflows/prerelease.yml
@@ -54,5 +54,5 @@ jobs:
      - name: Upload packaged artifact
        uses: actions/upload-artifact@v2
        with:
-          name: npm-package-@shadcn-ui@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
+          name: npm-package-shadcn-ui@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
          path: packages/cli/dist/index.js
--- a/apps/www/components/ui/use-toast.ts
+++ b/apps/www/components/ui/use-toast.ts
@@ -0,0 +1,189 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import { ToastActionElement, type ToastProps } from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+interface Toast extends Omit<ToasterToast, "id"> {}
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
--- a/apps/www/config/components.ts
+++ b/apps/www/config/components.ts
@@ -1,295 +1,179 @@
 export const components = [
  {
+    component: "accordion",
    name: "Accordion",
    dependencies: ["@radix-ui/react-accordion"],
-    files: [
-      {
-        name: "accordion.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/accordion.tsx"],
  },
  {
+    component: "alert-dialog",
    name: "Alert Dialog",
    dependencies: ["@radix-ui/react-alert-dialog"],
-    files: [
-      {
-        name: "alert-dialog.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/alert-dialog.tsx"],
  },
  {
+    component: "aspect-ratio",
    name: "Aspect Ratio",
    dependencies: ["@radix-ui/react-aspect-ratio"],
-    files: [
-      {
-        name: "aspect-ratio.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/aspect-ratio.tsx"],
  },
  {
+    component: "avatar",
    name: "Avatar",
    dependencies: ["@radix-ui/react-avatar"],
-    files: [
-      {
-        name: "avatar.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/avatar.tsx"],
  },
  {
+    component: "button",
    name: "Button",
-    files: [
-      {
-        name: "button.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/button.tsx"],
  },
  {
+    component: "checkbox",
    name: "Checkbox",
    dependencies: ["@radix-ui/react-checkbox"],
-    files: [
-      {
-        name: "checkbox.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/checkbox.tsx"],
  },
  {
+    component: "collapsible",
    name: "Collapsible",
    dependencies: ["@radix-ui/react-collapsible"],
-    files: [
-      {
-        name: "collapsible.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/collapsible.tsx"],
  },
  {
+    component: "command",
    name: "Command",
    dependencies: ["cmdk"],
-    files: [
-      {
-        name: "command.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/command.tsx"],
  },
  {
+    component: "context-menu",
    name: "Context Menu",
    dependencies: ["@radix-ui/react-context-menu"],
-    files: [
-      {
-        name: "context-menu.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/context-menu.tsx"],
  },
  {
+    component: "dialog",
    name: "Dialog",
    dependencies: ["@radix-ui/react-dialog"],
-    files: [
-      {
-        name: "dialog.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/dialog.tsx"],
  },
  {
+    component: "dropdown-menu",
    name: "Dropdown Menu",
    dependencies: ["@radix-ui/react-dropdown-menu"],
-    files: [
-      {
-        name: "dropdown-menu.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/dropdown-menu.tsx"],
  },
  {
+    component: "hover-card",
    name: "Hover Card",
    dependencies: ["@radix-ui/react-hover-card"],
-    files: [
-      {
-        name: "hover-card.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/hover-card.tsx"],
  },
-  { name: "Input", files: [{ name: "input.tsx", dir: "components/ui" }] },
  {
+    component: "input",
+    name: "Input",
+    files: ["components/ui/input.tsx"],
+  },
+  {
+    component: "label",
    name: "Label",
    dependencies: ["@radix-ui/react-label"],
-    files: [
-      {
-        name: "label.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/label.tsx"],
  },
  {
+    component: "menubar",
    name: "Menubar",
    dependencies: ["@radix-ui/react-menubar"],
-    files: [
-      {
-        name: "menubar.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/menubar.tsx"],
  },
  {
+    component: "navigation-menu",
    name: "Navigation Menu",
    dependencies: ["@radix-ui/react-navigation-menu"],
-    files: [
-      {
-        name: "navigation-menu.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/navigation-menu.tsx"],
  },
  {
+    component: "popover",
    name: "Popover",
    dependencies: ["@radix-ui/react-popover"],
-    files: [
-      {
-        name: "popover.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/popover.tsx"],
  },
  {
+    component: "progress",
    name: "Progress",
    dependencies: ["@radix-ui/react-progress"],
-    files: [
-      {
-        name: "progress.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/progress.tsx"],
  },
  {
+    component: "radio-group",
    name: "Radio Group",
    dependencies: ["@radix-ui/react-radio-group"],
-    files: [
-      {
-        name: "radio-group.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/radio-group.tsx"],
  },
  {
+    component: "scroll-area",
    name: "Scroll-area",
    dependencies: ["@radix-ui/react-scroll-area"],
-    files: [
-      {
-        name: "scroll-area.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/scroll-area.tsx"],
  },
  {
+    component: "select",
    name: "Select",
    dependencies: ["@radix-ui/react-select"],
-    files: [
-      {
-        name: "select.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/select.tsx"],
  },
  {
+    component: "separator",
    name: "Separator",
    dependencies: ["@radix-ui/react-separator"],
-    files: [
-      {
-        name: "separator.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/separator.tsx"],
  },
  {
+    component: "sheet",
    name: "Sheet",
    dependencies: ["@radix-ui/react-dialog"],
-    files: [
-      {
-        name: "sheet.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/sheet.tsx"],
  },
  {
+    component: "slider",
    name: "Slider",
    dependencies: ["@radix-ui/react-slider"],
-    files: [
-      {
-        name: "slider.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/slider.tsx"],
  },
  {
+    component: "switch",
    name: "Switch",
    dependencies: ["@radix-ui/react-switch"],
-    files: [
-      {
-        name: "switch.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/switch.tsx"],
  },
  {
+    component: "tabs",
    name: "Tabs",
    dependencies: ["@radix-ui/react-tabs"],
-    files: [
-      {
-        name: "tabs.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/tabs.tsx"],
  },
  {
+    component: "textarea",
    name: "Textarea",
-    files: [
-      {
-        name: "textarea.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/textarea.tsx"],
  },
  {
+    component: "toast",
    name: "Toast",
    dependencies: ["@radix-ui/react-toast"],
-    files: [
-      {
-        name: "toast.tsx",
-        dir: "components/ui",
-      },
-      {
-        name: "use-toast.ts",
-        dir: "hooks",
-      },
-    ],
+    files: ["components/ui/toast.tsx", "components/ui/use-toast.ts"],
  },
  {
+    component: "toggle",
    name: "Toggle",
    dependencies: ["@radix-ui/react-toggle"],
-    files: [
-      {
-        name: "toggle.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/toggle.tsx"],
  },
  {
+    component: "tooltip",
    name: "Tooltip",
    dependencies: ["@radix-ui/react-tooltip"],
-    files: [
-      {
-        name: "tooltip.tsx",
-        dir: "components/ui",
-      },
-    ],
+    files: ["components/ui/tooltip.tsx"],
  },
 ]
--- a/apps/www/next-env.d.ts
+++ b/apps/www/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/apps/www/pages/api/components.json
+++ b/apps/www/pages/api/components.json
--- a/apps/www/scripts/build-components.ts
+++ b/apps/www/scripts/build-components.ts
@@ -6,13 +6,11 @@ import { components } from "../config/components"
 const payload = components
  .map((component) => {
    const files = component.files?.map((file) => {
-      const content = fs.readFileSync(
-        path.join(process.cwd(), file.dir, file.name),
-        "utf8"
-      )
+      const content = fs.readFileSync(path.join(process.cwd(), file), "utf8")

      return {
-        ...file,
+        name: basename(file),
+        dir: dirname(file),
        content,
      }
    })
--- a/package.json
+++ b/package.json
@@ -16,10 +16,11 @@
  ],
  "scripts": {
    "build": "turbo run build",
-    "build:cli": "turbo --filter=@shadcn/ui build",
+    "build:cli": "turbo --filter=shadcn-ui build",
+    "build:components": "pnpm --filter=www build:components",
    "dev": "turbo run dev --parallel",
-    "dev:cli": "turbo --filter=@shadcn/ui dev",
-    "start:cli": "pnpm --filter=@shadcn/ui start:dev",
+    "dev:cli": "turbo --filter=shadcn-ui dev",
+    "start:cli": "pnpm --filter=shadcn-ui start:dev",
    "lint": "turbo run lint",
    "preview": "turbo run preview",
    "typecheck": "turbo run typecheck",
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -1,7 +1,7 @@
-# @shadcn/ui
+# shadcn-ui

 ## Usage

 ```
-npx @shadcn/ui
+npx shadcn-ui add
 ```
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@shadcn/ui",
+  "name": "shadcn-ui",
  "version": "0.0.4",
-  "description": "Add @shadcn/ui components to your app.",
+  "description": "Add components to your apps.",
  "publishConfig": {
    "access": "public"
  },
@@ -15,6 +15,9 @@
    "url": "https://github.com/shadcn/ui.git",
    "directory": "packages/cli"
  },
+  "files": [
+    "dist"
+  ],
  "keywords": [
    "components",
    "ui",
@@ -24,15 +27,13 @@
  ],
  "type": "module",
  "exports": "./dist/index.js",
-  "bin": {
-    "@shadcn/ui": "./dist/index.js"
-  },
+  "bin": "./dist/index.js",
  "scripts": {
    "dev": "tsup --watch",
    "build": "tsup",
    "typecheck": "tsc --noEmit",
    "clean": "rimraf dist && rimraf components",
-    "start:dev": "cross-env COMPONENTS_BASE_URL=http://localhost:3000 node dist/index.js",
+    "start:dev": "cross-env COMPONENTS_BASE_URL=http://localhost:3001 node dist/index.js",
    "start": "node dist/index.js",
    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
@@ -49,6 +50,7 @@
    "node-fetch": "^3.3.0",
    "ora": "^6.1.2",
    "prompts": "^2.4.2",
+    "react-day-picker": "^8.6.0",
    "zod": "^3.20.2"
  },
  "devDependencies": {
@@ -57,6 +59,6 @@
    "rimraf": "^4.1.3",
    "tsup": "^6.6.3",
    "type-fest": "^3.6.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.5.5"
  }
 }
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -9,6 +9,7 @@ import prompts from "prompts"
 import { Component, getAvailableComponents } from "./utils/get-components"
 import { getPackageInfo } from "./utils/get-package-info"
 import { getPackageManager } from "./utils/get-package-manager"
+import { getProjectInfo } from "./utils/get-project-info"
 import { logger } from "./utils/logger"

 process.on("SIGINT", () => process.exit(0))
@@ -16,10 +17,11 @@ process.on("SIGTERM", () => process.exit(0))

 async function main() {
  const packageInfo = await getPackageInfo()
+  const projectInfo = await getProjectInfo()

  const program = new Command()
-    .name("@shadcn/ui")
-    .description("Add @shadcn/ui components to your project")
+    .name("shadcn-ui")
+    .description("Add shadcn-ui components to your project")
    .version(
      packageInfo.version || "1.0.0",
      "-v, --version",
@@ -29,7 +31,8 @@ async function main() {
  program
    .command("add")
    .description("add components to your project")
-    .action(async () => {
+    .argument("[components...]", "name of components")
+    .action(async (components: string[]) => {
      logger.warn(
        "Running the following command will overwrite existing files."
      )
@@ -38,8 +41,26 @@ async function main() {
      )
      logger.warn("")

-      const { components, dir } = await promptForAddOptions()
-      if (!components?.length) {
+      const availableComponents = await getAvailableComponents()
+
+      if (!availableComponents?.length) {
+        logger.error(
+          "An error occurred while fetching components. Please try again."
+        )
+        process.exit(0)
+      }
+
+      let selectedComponents = availableComponents.filter((component) =>
+        components.includes(component.component)
+      )
+
+      if (!selectedComponents?.length) {
+        selectedComponents = await promptForComponents(availableComponents)
+      }
+
+      const dir = await promptForDestinationDir()
+
+      if (!selectedComponents?.length) {
        logger.warn("No components selected. Nothing to install.")
        process.exit(0)
      }
@@ -54,12 +75,19 @@ async function main() {

      const packageManager = getPackageManager()

-      logger.success(`Installing components...`)
-      for (const component of components) {
+      logger.success(
+        `Installing ${selectedComponents.length} component(s) and dependencies...`
+      )
+      for (const component of selectedComponents) {
        const componentSpinner = ora(`${component.name}...`).start()

        // Write the files.
        for (const file of component.files) {
+          // Replace alias with the project's alias.
+          if (projectInfo?.alias) {
+            file.content = file.content.replace(/@\//g, projectInfo.alias)
+          }
+
          const filePath = path.resolve(dir, file.name)
          await fs.writeFile(filePath, file.content)
        }
@@ -79,34 +107,24 @@ async function main() {
  program.parse()
 }

-type AddOptions = {
-  components: Component[]
-  dir: string
+async function promptForComponents(components: Component[]) {
+  const { components: selectedComponents } = await prompts({
+    type: "autocompleteMultiselect",
+    name: "components",
+    message: "Which component(s) would you like to add?",
+    hint: "Space to select. A to select all. I to invert selection.",
+    instructions: false,
+    choices: components.map((component) => ({
+      title: component.name,
+      value: component,
+    })),
+  })
+
+  return selectedComponents
 }

-async function promptForAddOptions() {
-  const availableComponents = await getAvailableComponents()
-
-  if (!availableComponents?.length) {
-    logger.error(
-      "An error occurred while fetching components. Please try again."
-    )
-    process.exit(0)
-  }
-
-  const options = await prompts([
-    {
-      type: "multiselect",
-      name: "components",
-      message: "Which component(s) would you like to add?",
-      hint: "Space to select. A to select all. I to invert selection.",
-      instructions: false,
-
-      choices: availableComponents.map((component) => ({
-        title: component.name,
-        value: component,
-      })),
-    },
+async function promptForDestinationDir() {
+  const { dir } = await prompts([
    {
      type: "text",
      name: "dir",
@@ -115,7 +133,7 @@ async function promptForAddOptions() {
    },
  ])

-  return options as AddOptions
+  return dir
 }

 main()
--- a/packages/cli/src/utils/get-components.ts
+++ b/packages/cli/src/utils/get-components.ts
@@ -4,6 +4,7 @@ import * as z from "zod"
 const baseUrl = process.env.COMPONENTS_BASE_URL ?? "https://ui.shadcn.com"

 const componentSchema = z.object({
+  component: z.string(),
  name: z.string(),
  dependencies: z.array(z.string()).optional(),
  files: z.array(
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -0,0 +1,26 @@
+import path from "path"
+import fs from "fs-extra"
+
+export async function getProjectInfo() {
+  try {
+    const tsconfigPath = path.join("tsconfig.json")
+    const tsconfig = await fs.readJSON(tsconfigPath)
+
+    if (!tsconfig) {
+      throw new Error("tsconfig.json is missing")
+    }
+
+    const paths = tsconfig.compilerOptions?.paths
+    if (!paths) {
+      throw new Error("tsconfig.json is missing paths")
+    }
+
+    const alias = Object.keys(paths)[0].replace("*", "")
+
+    return {
+      alias,
+    }
+  } catch (error) {
+    return null
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,9 +88,6 @@ importers:

  apps/www:
    dependencies:
-      "@next/font":
-        specifier: ^13.1.6
-        version: 13.1.6
      "@radix-ui/react-accessible-icon":
        specifier: ^1.0.1
        version: 1.0.1(react-dom@18.2.0)(react@18.2.0)
@@ -197,14 +194,14 @@ importers:
        specifier: 0.105.0-alpha.4
        version: 0.105.0-alpha.4(react@18.2.0)
      next:
-        specifier: ^13.1.6
-        version: 13.1.6(@babel/core@7.20.7)(react-dom@18.2.0)(react@18.2.0)
+        specifier: 13.2.4
+        version: 13.2.4(@babel/core@7.20.7)(@opentelemetry/api@1.1.0)(react-dom@18.2.0)(react@18.2.0)
      next-contentlayer:
        specifier: ^0.3.0
-        version: 0.3.0(esbuild@0.17.3)(next@13.1.6)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.3.0(esbuild@0.17.3)(next@13.2.4)(react-dom@18.2.0)(react@18.2.0)
      next-themes:
        specifier: ^0.2.1
-        version: 0.2.1(next@13.1.6)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.2.1(next@13.2.4)(react-dom@18.2.0)(react@18.2.0)
      react:
        specifier: ^18.2.0
        version: 18.2.0
@@ -471,6 +468,9 @@ importers:
      prompts:
        specifier: ^2.4.2
        version: 2.4.2
+      react-day-picker:
+        specifier: ^8.6.0
+        version: 8.6.0(date-fns@2.29.3)(react@18.2.0)
      zod:
        specifier: ^3.20.2
        version: 3.20.2
@@ -486,13 +486,13 @@ importers:
        version: 4.1.3
      tsup:
        specifier: ^6.6.3
-        version: 6.6.3(postcss@8.4.20)(ts-node@10.9.1)(typescript@4.9.5)
+        version: 6.6.3(postcss@8.4.20)(ts-node@10.9.1)(typescript@4.7.4)
      type-fest:
        specifier: ^3.6.1
        version: 3.6.1
      typescript:
-        specifier: ^4.9.5
-        version: 4.9.5
+        specifier: ^4.5.5
+        version: 4.7.4

  templates/next-template:
    dependencies:
@@ -1311,13 +1311,13 @@ packages:
      "@types/node": 14.18.35
      chalk: 4.1.2
      cosmiconfig: 7.1.0
-      cosmiconfig-typescript-loader: 4.3.0(@types/node@14.18.35)(cosmiconfig@7.1.0)(ts-node@10.9.1)(typescript@4.9.5)
+      cosmiconfig-typescript-loader: 4.3.0(@types/node@14.18.35)(cosmiconfig@7.1.0)(ts-node@10.9.1)(typescript@4.7.4)
      lodash.isplainobject: 4.0.6
      lodash.merge: 4.6.2
      lodash.uniq: 4.5.0
      resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@14.18.35)(typescript@4.9.5)
-      typescript: 4.9.5
+      ts-node: 10.9.1(@types/node@14.18.35)(typescript@4.7.4)
+      typescript: 4.7.4
    transitivePeerDependencies:
      - "@swc/core"
      - "@swc/wasm"
@@ -2478,6 +2478,13 @@ packages:
      }
    dev: false

+  /@next/env@13.2.4:
+    resolution:
+      {
+        integrity: sha512-+Mq3TtpkeeKFZanPturjcXt+KHfKYnLlX6jMLyCrmpq6OOs4i1GqBOAauSkii9QeKCMTYzGppar21JU57b/GEA==,
+      }
+    dev: false
+
  /@next/eslint-plugin-next@13.0.0:
    resolution:
      {
@@ -2505,6 +2512,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-android-arm-eabi@13.2.4:
+    resolution:
+      {
+        integrity: sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-android-arm64@13.1.6:
    resolution:
      {
@@ -2517,6 +2536,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-android-arm64@13.2.4:
+    resolution:
+      {
+        integrity: sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-darwin-arm64@13.1.6:
    resolution:
      {
@@ -2529,6 +2560,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-darwin-arm64@13.2.4:
+    resolution:
+      {
+        integrity: sha512-S6vBl+OrInP47TM3LlYx65betocKUUlTZDDKzTiRDbsRESeyIkBtZ6Qi5uT2zQs4imqllJznVjFd1bXLx3Aa6A==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-darwin-x64@13.1.6:
    resolution:
      {
@@ -2541,6 +2584,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-darwin-x64@13.2.4:
+    resolution:
+      {
+        integrity: sha512-a6LBuoYGcFOPGd4o8TPo7wmv5FnMr+Prz+vYHopEDuhDoMSHOnC+v+Ab4D7F0NMZkvQjEJQdJS3rqgFhlZmKlw==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-freebsd-x64@13.1.6:
    resolution:
      {
@@ -2553,6 +2608,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-freebsd-x64@13.2.4:
+    resolution:
+      {
+        integrity: sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-linux-arm-gnueabihf@13.1.6:
    resolution:
      {
@@ -2565,6 +2632,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-linux-arm-gnueabihf@13.2.4:
+    resolution:
+      {
+        integrity: sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-linux-arm64-gnu@13.1.6:
    resolution:
      {
@@ -2577,6 +2656,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-linux-arm64-gnu@13.2.4:
+    resolution:
+      {
+        integrity: sha512-xzYZdAeq883MwXgcwc72hqo/F/dwUxCukpDOkx/j1HTq/J0wJthMGjinN9wH5bPR98Mfeh1MZJ91WWPnZOedOg==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-linux-arm64-musl@13.1.6:
    resolution:
      {
@@ -2589,6 +2680,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-linux-arm64-musl@13.2.4:
+    resolution:
+      {
+        integrity: sha512-8rXr3WfmqSiYkb71qzuDP6I6R2T2tpkmf83elDN8z783N9nvTJf2E7eLx86wu2OJCi4T05nuxCsh4IOU3LQ5xw==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-linux-x64-gnu@13.1.6:
    resolution:
      {
@@ -2601,6 +2704,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-linux-x64-gnu@13.2.4:
+    resolution:
+      {
+        integrity: sha512-Ngxh51zGSlYJ4EfpKG4LI6WfquulNdtmHg1yuOYlaAr33KyPJp4HeN/tivBnAHcZkoNy0hh/SbwDyCnz5PFJQQ==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-linux-x64-musl@13.1.6:
    resolution:
      {
@@ -2613,6 +2728,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-linux-x64-musl@13.2.4:
+    resolution:
+      {
+        integrity: sha512-gOvwIYoSxd+j14LOcvJr+ekd9fwYT1RyMAHOp7znA10+l40wkFiMONPLWiZuHxfRk+Dy7YdNdDh3ImumvL6VwA==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-win32-arm64-msvc@13.1.6:
    resolution:
      {
@@ -2625,6 +2752,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-win32-arm64-msvc@13.2.4:
+    resolution:
+      {
+        integrity: sha512-q3NJzcfClgBm4HvdcnoEncmztxrA5GXqKeiZ/hADvC56pwNALt3ngDC6t6qr1YW9V/EPDxCYeaX4zYxHciW4Dw==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-win32-ia32-msvc@13.1.6:
    resolution:
      {
@@ -2637,6 +2776,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-win32-ia32-msvc@13.2.4:
+    resolution:
+      {
+        integrity: sha512-/eZ5ncmHUYtD2fc6EUmAIZlAJnVT2YmxDsKs1Ourx0ttTtvtma/WKlMV5NoUsyOez0f9ExLyOpeCoz5aj+MPXw==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@next/swc-win32-x64-msvc@13.1.6:
    resolution:
      {
@@ -2649,6 +2800,18 @@ packages:
    dev: false
    optional: true

+  /@next/swc-win32-x64-msvc@13.2.4:
+    resolution:
+      {
+        integrity: sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==,
+      }
+    engines: { node: ">= 10" }
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /@nodelib/fs.scandir@2.1.5:
    resolution:
      {
@@ -5645,7 +5808,7 @@ packages:
      }
    dev: false

-  /cosmiconfig-typescript-loader@4.3.0(@types/node@14.18.35)(cosmiconfig@7.1.0)(ts-node@10.9.1)(typescript@4.9.5):
+  /cosmiconfig-typescript-loader@4.3.0(@types/node@14.18.35)(cosmiconfig@7.1.0)(ts-node@10.9.1)(typescript@4.7.4):
    resolution:
      {
        integrity: sha512-NTxV1MFfZDLPiBMjxbHRwSh5LaLcPMwNdCutmnHJCKoVnlvldPWlllonKwrsRJ5pYZBIBGRWWU2tfvzxgeSW5Q==,
@@ -5659,8 +5822,8 @@ packages:
    dependencies:
      "@types/node": 14.18.35
      cosmiconfig: 7.1.0
-      ts-node: 10.9.1(@types/node@14.18.35)(typescript@4.9.5)
-      typescript: 4.9.5
+      ts-node: 10.9.1(@types/node@14.18.35)(typescript@4.7.4)
+      typescript: 4.7.4
    dev: true

  /cosmiconfig@7.1.0:
@@ -5826,6 +5989,14 @@ packages:
      }
    dev: false

+  /date-fns@2.29.3:
+    resolution:
+      {
+        integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==,
+      }
+    engines: { node: ">=0.11" }
+    dev: false
+
  /debug@2.6.9:
    resolution:
      {
@@ -9486,7 +9657,7 @@ packages:
        integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==,
      }

-  /next-contentlayer@0.3.0(esbuild@0.17.3)(next@13.1.6)(react-dom@18.2.0)(react@18.2.0):
+  /next-contentlayer@0.3.0(esbuild@0.17.3)(next@13.2.4)(react-dom@18.2.0)(react@18.2.0):
    resolution:
      {
        integrity: sha512-vt+RaD3nIgZ6oXadtZH19a1mpxvGEoiifdtmXqBSz4rHMRcMA1YZCuSWyj+P9uX7MDmIL6JT6QSp+hvTBMaxiw==,
@@ -9498,7 +9669,7 @@ packages:
    dependencies:
      "@contentlayer/core": 0.3.0(esbuild@0.17.3)
      "@contentlayer/utils": 0.3.0
-      next: 13.1.6(@babel/core@7.20.7)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.2.4(@babel/core@7.20.7)(@opentelemetry/api@1.1.0)(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
    transitivePeerDependencies:
@@ -9523,6 +9694,21 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /next-themes@0.2.1(next@13.2.4)(react-dom@18.2.0)(react@18.2.0):
+    resolution:
+      {
+        integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==,
+      }
+    peerDependencies:
+      next: "*"
+      react: "*"
+      react-dom: "*"
+    dependencies:
+      next: 13.2.4(@babel/core@7.20.7)(@opentelemetry/api@1.1.0)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /next@13.1.6(@babel/core@7.20.7)(react-dom@18.2.0)(react@18.2.0):
    resolution:
      {
@@ -9570,6 +9756,57 @@ packages:
      - babel-plugin-macros
    dev: false

+  /next@13.2.4(@babel/core@7.20.7)(@opentelemetry/api@1.1.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution:
+      {
+        integrity: sha512-g1I30317cThkEpvzfXujf0O4wtaQHtDCLhlivwlTJ885Ld+eOgcz7r3TGQzeU+cSRoNHtD8tsJgzxVdYojFssw==,
+      }
+    engines: { node: ">=14.6.0" }
+    hasBin: true
+    peerDependencies:
+      "@opentelemetry/api": ^1.4.0
+      fibers: ">= 3.1.0"
+      node-sass: ^6.0.0 || ^7.0.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      "@opentelemetry/api":
+        optional: true
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      "@next/env": 13.2.4
+      "@opentelemetry/api": 1.1.0
+      "@swc/helpers": 0.4.14
+      caniuse-lite: 1.0.30001439
+      postcss: 8.4.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.20.7)(react@18.2.0)
+    optionalDependencies:
+      "@next/swc-android-arm-eabi": 13.2.4
+      "@next/swc-android-arm64": 13.2.4
+      "@next/swc-darwin-arm64": 13.2.4
+      "@next/swc-darwin-x64": 13.2.4
+      "@next/swc-freebsd-x64": 13.2.4
+      "@next/swc-linux-arm-gnueabihf": 13.2.4
+      "@next/swc-linux-arm64-gnu": 13.2.4
+      "@next/swc-linux-arm64-musl": 13.2.4
+      "@next/swc-linux-x64-gnu": 13.2.4
+      "@next/swc-linux-x64-musl": 13.2.4
+      "@next/swc-win32-arm64-msvc": 13.2.4
+      "@next/swc-win32-ia32-msvc": 13.2.4
+      "@next/swc-win32-x64-msvc": 13.2.4
+    transitivePeerDependencies:
+      - "@babel/core"
+      - babel-plugin-macros
+    dev: false
+
  /no-case@3.0.4:
    resolution:
      {
@@ -10390,6 +10627,19 @@ packages:
      strip-json-comments: 2.0.1
    dev: false

+  /react-day-picker@8.6.0(date-fns@2.29.3)(react@18.2.0):
+    resolution:
+      {
+        integrity: sha512-n9/6abBZu+koSUBtsXqBfiOW44ROTjl7ebIqyaTQSO8i79bsCCgKCAyQP/1a79ySFkK4puGV1e7p7hK1ymdb/w==,
+      }
+    peerDependencies:
+      date-fns: ^2.28.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      date-fns: 2.29.3
+      react: 18.2.0
+    dev: false
+
  /react-dom@18.2.0(react@18.2.0):
    resolution:
      {
@@ -11782,7 +12032,7 @@ packages:
      }
    dev: true

-  /ts-node@10.9.1(@types/node@14.18.35)(typescript@4.9.5):
+  /ts-node@10.9.1(@types/node@14.18.35)(typescript@4.7.4):
    resolution:
      {
        integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==,
@@ -11811,7 +12061,7 @@ packages:
      create-require: 1.1.1
      diff: 4.0.2
      make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 4.7.4
      v8-compile-cache-lib: 3.0.1
      yn: 3.1.1
    dev: true
@@ -11880,7 +12130,7 @@ packages:
      }
    dev: false

-  /tsup@6.6.3(postcss@8.4.20)(ts-node@10.9.1)(typescript@4.9.5):
+  /tsup@6.6.3(postcss@8.4.20)(ts-node@10.9.1)(typescript@4.7.4):
    resolution:
      {
        integrity: sha512-OLx/jFllYlVeZQ7sCHBuRVEQBBa1tFbouoc/gbYakyipjVQdWy/iQOvmExUA/ewap9iQ7tbJf9pW0PgcEFfJcQ==,
@@ -11914,7 +12164,7 @@ packages:
      source-map: 0.8.0-beta.0
      sucrase: 3.29.0
      tree-kill: 1.2.2
-      typescript: 4.9.5
+      typescript: 4.7.4
    transitivePeerDependencies:
      - supports-color
      - ts-node
@@ -12146,15 +12396,6 @@ packages:
    engines: { node: ">=4.2.0" }
    hasBin: true

-  /typescript@4.9.5:
-    resolution:
-      {
-        integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==,
-      }
-    engines: { node: ">=4.2.0" }
-    hasBin: true
-    dev: true
-
  /unbox-primitive@1.0.2:
    resolution:
      {