From eee7ce68798b9345cb969942cd279c3acc054ad6 Mon Sep 17 00:00:00 2001 From: Christoffer Hallas Date: Thu, 29 Jun 2023 09:27:03 -0400 Subject: [PATCH 01/67] docs(www): add remix and tabbed installation docs (#753) * docs: add react with vite installation guide * refactor(docs): move Ract with vite page into installation.mdx as tab * fix(docs): remove classnames and wrapper divs * fix(docs): update tsconfig file path to default @ * feat: added remix installation docs * feat: added tabbed installation docs * fix: remove log statement * fix: cleaned up, restored usage notice, removed vite for now * fix: moved installation.mdx into folder --------- Co-authored-by: Samuel Adebayo Co-authored-by: shadcn --- apps/www/components/framework-docs.tsx | 22 +++++ apps/www/components/mdx-components.tsx | 7 ++ apps/www/content/docs/installation/index.mdx | 27 ++++++ .../nextjs.mdx} | 16 +--- apps/www/content/docs/installation/remix.mdx | 90 +++++++++++++++++++ 5 files changed, 148 insertions(+), 14 deletions(-) create mode 100644 apps/www/components/framework-docs.tsx create mode 100644 apps/www/content/docs/installation/index.mdx rename apps/www/content/docs/{installation.mdx => installation/nextjs.mdx} (83%) create mode 100644 apps/www/content/docs/installation/remix.mdx diff --git a/apps/www/components/framework-docs.tsx b/apps/www/components/framework-docs.tsx new file mode 100644 index 00000000000..2bebd696167 --- /dev/null +++ b/apps/www/components/framework-docs.tsx @@ -0,0 +1,22 @@ +"use client" + +import * as React from "react" +import { allDocs } from "contentlayer/generated" + +import { Mdx } from "./mdx-components" + +interface FrameworkDocsProps extends React.HTMLAttributes { + data: string +} + +export function FrameworkDocs({ ...props }: FrameworkDocsProps) { + const frameworkDoc = allDocs.find( + (doc) => doc.slug === `/docs/installation/${props.data}` + ) + + if (!frameworkDoc) { + return null + } + + return +} diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx index 3cbae0a1e29..6e0a6a65a34 100644 --- a/apps/www/components/mdx-components.tsx +++ b/apps/www/components/mdx-components.tsx @@ -14,6 +14,7 @@ import { ComponentExample } from "@/components/component-example" import { ComponentPreview } from "@/components/component-preview" import { ComponentSource } from "@/components/component-source" import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button" +import { FrameworkDocs } from "@/components/framework-docs" import { StyleWrapper } from "@/components/style-wrapper" import { Accordion, @@ -284,6 +285,12 @@ const components = { {...props} /> ), + FrameworkDocs: ({ + className, + ...props + }: React.ComponentProps) => ( + + ), } interface MdxProps { diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx new file mode 100644 index 00000000000..3c7fe0e783a --- /dev/null +++ b/apps/www/content/docs/installation/index.mdx @@ -0,0 +1,27 @@ +--- +title: Installation +description: How to install dependencies and structure your app. +--- + + + + Next.js + Remix + + + + + + + + + +That's it. You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add +``` + +## Other frameworks + +I'm looking for help writing guides for other frameworks. Help me write those guides by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation/nextjs.mdx similarity index 83% rename from apps/www/content/docs/installation.mdx rename to apps/www/content/docs/installation/nextjs.mdx index 190b16acc44..68045bedd46 100644 --- a/apps/www/content/docs/installation.mdx +++ b/apps/www/content/docs/installation/nextjs.mdx @@ -1,10 +1,8 @@ --- -title: Installation -description: How to install dependencies and structure your app. +title: Next.js +description: Learn how to install and use with Next.js. --- -## Next.js - ### Create project @@ -73,13 +71,3 @@ Here's how I structure my app. I use Next.js, but this is not required. - The `styles` folder contains the global CSS. - -That's it. You can now start adding components to your project. - -```bash -npx shadcn-ui@latest add -``` - -## Other frameworks - -I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx new file mode 100644 index 00000000000..9754111dca1 --- /dev/null +++ b/apps/www/content/docs/installation/remix.mdx @@ -0,0 +1,90 @@ +--- +title: Remix +description: Learn how to install and use with Remix. +--- + + + +### Create project + +Start by creating a new Remix project using `create-remix`: + +```bash +npx create-remix@latest my-app +``` + +### Run the CLI + +Run the `shadcn-ui` init command to setup your project: + +```bash +npx shadcn-ui@latest init +``` + +### Configure components.json + +You will be asked a few questions to configure `components.json`: + +```txt showLineNumbers +Which style would you like to use? › Default +Which color would you like to use as base color? › Slate +Where is your global CSS file? › › app/tailwind.css +Do you want to use CSS variables for colors? › no / yes +Where is your tailwind.config.js located? › tailwind.config.js +Configure the import alias for components: › ~/components +Configure the import alias for utils: › ~/lib/utils +Are you using React Server Components? › no +``` + +### App structure + +- Place the UI components in the `app/components/ui` folder. +- Your own components can be placed in the `app/components` folder. +- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where I define the `cn` helper. +- The `app/tailwind.css` file contains the global CSS. + +### Enable Tailwind and PostCSS + +We have to install tailwindcss and autoprefixer. + +```bash +pnpm add -D tailwindcss@latest autoprefixer@latest +``` + +Then we create a `postcss.config.js` file: + +```js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` + +And finally we add the following to our `remix.config.js` file: + +```js {4-5} +/** @type {import('@remix-run/dev').AppConfig} */ +module.exports = { + ... + tailwind: true, + postcss: true, + ... +}; +``` + +### Include tailwind.css in your Remix app + +In your `app/root.tsx` file, import the `tailwind.css` file: + +```js {1, 4} +import styles from "./tailwind.css" + +export const links: LinksFunction = () => [ + { rel: "stylesheet", href: styles }, + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +] +``` + + From 1f004243d43b7644539e7f83d58d2b4e899d0789 Mon Sep 17 00:00:00 2001 From: Samuel Adebayo Date: Fri, 30 Jun 2023 10:21:10 -0700 Subject: [PATCH 02/67] docs(www): add react with vite installation guide (#714) * docs: add react with vite installation guide * refactor(docs): move Ract with vite page into installation.mdx as tab * fix(docs): remove classnames and wrapper divs * fix(docs): update tsconfig file path to default @ * docs(www): fix code style --------- Co-authored-by: Samuel Adebayo Co-authored-by: shadcn --- apps/www/content/docs/installation/index.mdx | 4 + apps/www/content/docs/installation/vite.mdx | 84 ++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 apps/www/content/docs/installation/vite.mdx diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index 3c7fe0e783a..875d6102810 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -7,6 +7,7 @@ description: How to install dependencies and structure your app. Next.js Remix + Vite @@ -14,6 +15,9 @@ description: How to install dependencies and structure your app. + + + That's it. You can now start adding components to your project. diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx new file mode 100644 index 00000000000..f9c41a34e7f --- /dev/null +++ b/apps/www/content/docs/installation/vite.mdx @@ -0,0 +1,84 @@ +--- +title: Vite +description: Learn how to install and use with Vite. +--- + + + +### Create project + +Start by creating a new React project using `vite`: + +```bash +npm create vite@latest +``` + +### Add Tailwind and its configuration + +Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files: + +```bash +npm install -D tailwindcss postcss autoprefixer + +npx tailwindcss init -p +``` + +### Edit tsconfig.json + +Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error + +```typescript +"baseUrl": ".", +"paths": { + "@/*": ["./src/*"] +} +``` + +### Update vite.config.ts + +Add the code below to the vite.config.ts so your app can resolve paths without error + +```bash +# (so you can import "path" without error) +npm i -D @types/node +``` + +```typescript +import path from "path" +import react from "@vitejs/plugin-react" +import { defineConfig } from "vite" + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +}) +``` + +### Run the CLI + +Run the `shadcn-ui` init command to setup your project: + +```bash +npx shadcn-ui@latest init +``` + +### Configure components.json + +You will be asked a few questions to configure `components.json`: + +```txt showLineNumbers +Which style would you like to use? › Default +Which color would you like to use as base color? › Slate +Where is your global CSS file? › › src/index.css +Do you want to use CSS variables for colors? › no / yes +Where is your tailwind.config.js located? › tailwind.config.js +Configure the import alias for components: › @/components +Configure the import alias for utils: › @/lib/utils +Are you using React Server Components? › no / yes (no) +``` + + From ea6699adbff352c6c03faa7d79317db37e6ad9c1 Mon Sep 17 00:00:00 2001 From: shadcn Date: Fri, 30 Jun 2023 22:37:43 +0400 Subject: [PATCH 03/67] feat: restructure installation docs --- apps/www/components/mdx-components.tsx | 14 +- apps/www/config/docs.ts | 26 +- apps/www/content/docs/installation/index.mdx | 76 ++++-- apps/www/content/docs/installation/manual.mdx | 243 ++++++++++++++++++ .../installation/{nextjs.mdx => next.mdx} | 26 +- apps/www/content/docs/installation/remix.mdx | 42 ++- apps/www/content/docs/installation/vite.mdx | 24 +- apps/www/package.json | 6 +- apps/www/styles/mdx.css | 4 + pnpm-lock.yaml | 179 ++++++------- 10 files changed, 511 insertions(+), 129 deletions(-) create mode 100644 apps/www/content/docs/installation/manual.mdx rename apps/www/content/docs/installation/{nextjs.mdx => next.mdx} (77%) diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx index 6e0a6a65a34..5a5dc408141 100644 --- a/apps/www/components/mdx-components.tsx +++ b/apps/www/components/mdx-components.tsx @@ -2,6 +2,7 @@ import * as React from "react" import Image from "next/image" +import Link, { LinkProps } from "next/link" import { useMDXComponent } from "next-contentlayer/hooks" import { NpmCommands } from "types/unist" @@ -242,7 +243,7 @@ const components = { ), Steps: ({ ...props }) => (
), @@ -279,7 +280,7 @@ const components = { }: React.ComponentProps) => ( ) => ( ), + LinkedCard: ({ className, ...props }: React.ComponentProps) => ( + + ), } interface MdxProps { diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 5a89162f209..56cb80004e3 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -68,6 +68,11 @@ export const docsConfig: DocsConfig = { href: "/docs/components/typography", items: [], }, + { + title: "Figma", + href: "/docs/figma", + items: [], + }, { title: "Changelog", href: "/docs/changelog", @@ -76,11 +81,26 @@ export const docsConfig: DocsConfig = { ], }, { - title: "Community", + title: "Installation", items: [ { - title: "Figma", - href: "/docs/figma", + title: "Next.js", + href: "/docs/installation/next", + items: [], + }, + { + title: "Vite", + href: "/docs/installation/vite", + items: [], + }, + { + title: "Remix", + href: "/docs/installation/remix", + items: [], + }, + { + title: "Manual", + href: "/docs/installation/manual", items: [], }, ], diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index 875d6102810..baf2921b5f1 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -3,28 +3,60 @@ title: Installation description: How to install dependencies and structure your app. --- - - - Next.js - Remix - Vite - - - - - - - - - - - - -That's it. You can now start adding components to your project. - -```bash -npx shadcn-ui@latest add -``` +
+ + + Next.js + + +

Next.js

+ + + + Vite + + +

Vite

+ + + + Remix + + +

Remix

+ + + + React + + +

Manual

+ +
## Other frameworks diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx new file mode 100644 index 00000000000..f5058a25980 --- /dev/null +++ b/apps/www/content/docs/installation/manual.mdx @@ -0,0 +1,243 @@ +--- +title: Manual Installation +description: Add dependencies to your project manually. +--- + + + +### Add Tailwind CSS + +Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project. + +[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation) + +### Add dependencies + +Add the following dependencies to your project: + +```bash +npm install tailwindcss-animate class-variance-authority clsx tailwind-merge +``` + +### Add icon library + +If you're using the `default` style, install `lucide-react`: + +```bash +npm install lucide-react +``` + +If you're using the `new-york` style, install `@radix-ui/react-icons`: + +```bash +npm install @radix-ui/react-icons +``` + +### Configure path aliases + +I use the `@` alias. This is how I configure it in tsconfig.json: + +```json {3-6} title="tsconfig.json" +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + } + } +} +``` + +The `@` alias is a preference. You can use other aliases if you want. + +**If you use a different alias such as ~, you'll need to update import statements when adding components.** + +### Configure tailwind.config.js + +Here's what my `tailwind.config.js` file looks like: + +```js title="tailwind.config.js" +const { fontFamily } = require("tailwindcss/defaultTheme") + +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: `var(--radius)`, + md: `calc(var(--radius) - 2px)`, + sm: "calc(var(--radius) - 4px)", + }, + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + }, + keyframes: { + "accordion-down": { + from: { height: 0 }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: 0 }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} +``` + +### Configure styles + +Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming). + +```css title="styles.css" +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --radius: 0.5rem; + } + + .dark { + --background: 224 71% 4%; + --foreground: 213 31% 91%; + + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + + --popover: 224 71% 4%; + --popover-foreground: 215 20.2% 65.1%; + + --border: 216 34% 17%; + --input: 216 34% 17%; + + --card: 224 71% 4%; + --card-foreground: 213 31% 91%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 1.2%; + + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 210 40% 98%; + + --destructive: 0 63% 31%; + --destructive-foreground: 210 40% 98%; + + --ring: 216 34% 17%; + + --radius: 0.5rem; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; + } +} +``` + +### Add a cn helper + +I use a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in `lib/utils.ts`: + +```ts title="lib/utils.ts" +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} +``` + +### That's it + +You can now start adding components to your project. + + diff --git a/apps/www/content/docs/installation/nextjs.mdx b/apps/www/content/docs/installation/next.mdx similarity index 77% rename from apps/www/content/docs/installation/nextjs.mdx rename to apps/www/content/docs/installation/next.mdx index 68045bedd46..c7a0cbb6ed4 100644 --- a/apps/www/content/docs/installation/nextjs.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -1,6 +1,6 @@ --- title: Next.js -description: Learn how to install and use with Next.js. +description: Install and configure Next.js. --- @@ -38,7 +38,7 @@ Are you using React Server Components? › no / yes ### App structure -Here's how I structure my app. I use Next.js, but this is not required. +Here's how I structure my Next.js apps. You can use this as a reference: ```txt {6-10,14-15} . @@ -70,4 +70,26 @@ Here's how I structure my app. I use Next.js, but this is not required. - The `lib` folder contains all the utility functions. I have a `utils.ts` where I define the `cn` helper. - The `styles` folder contains the global CSS. +### That's it + +You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add button +``` + +The command above will add the `Button` component to your project. You can then import it like this: + +```tsx {1,6} showLineNumbers +import { Button } from "@/components/ui" + +export default function Home() { + return ( +
+ +
+ ) +} +``` + diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index 9754111dca1..b6d925fe888 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -1,6 +1,6 @@ --- title: Remix -description: Learn how to install and use with Remix. +description: Install and configure Remix. --- @@ -28,7 +28,7 @@ You will be asked a few questions to configure `components.json`: ```txt showLineNumbers Which style would you like to use? › Default Which color would you like to use as base color? › Slate -Where is your global CSS file? › › app/tailwind.css +Where is your global CSS file? › app/tailwind.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › ~/components @@ -38,17 +38,21 @@ Are you using React Server Components? › no ### App structure + + +**Note**: This app structure is only a suggestion. You can place the files wherever you want. + + + - Place the UI components in the `app/components/ui` folder. - Your own components can be placed in the `app/components` folder. -- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where I define the `cn` helper. +- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper. - The `app/tailwind.css` file contains the global CSS. -### Enable Tailwind and PostCSS - -We have to install tailwindcss and autoprefixer. +### Install Tailwind CSS ```bash -pnpm add -D tailwindcss@latest autoprefixer@latest +npm add -D tailwindcss@latest autoprefixer@latest ``` Then we create a `postcss.config.js` file: @@ -74,7 +78,7 @@ module.exports = { }; ``` -### Include tailwind.css in your Remix app +### Add `tailwind.css` to your app In your `app/root.tsx` file, import the `tailwind.css` file: @@ -87,4 +91,26 @@ export const links: LinksFunction = () => [ ] ``` +### That's it + +You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add button +``` + +The command above will add the `Button` component to your project. You can then import it like this: + +```tsx {1,6} showLineNumbers +import { Button } from "@/components/ui" + +export default function Home() { + return ( +
+ +
+ ) +} +``` + diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index f9c41a34e7f..d369a49e941 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -1,6 +1,6 @@ --- title: Vite -description: Learn how to install and use with Vite. +description: Install and configure Vite. --- @@ -81,4 +81,26 @@ Configure the import alias for utils: › @/lib/utils Are you using React Server Components? › no / yes (no) ``` +### That's it + +You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add button +``` + +The command above will add the `Button` component to your project. You can then import it like this: + +```tsx {1,6} showLineNumbers +import { Button } from "@/components/ui" + +export default function Home() { + return ( +
+ +
+ ) +} +``` + diff --git a/apps/www/package.json b/apps/www/package.json index 9f67c000129..dee32ae792d 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -53,13 +53,13 @@ "class-variance-authority": "^0.4.0", "clsx": "^1.2.1", "cmdk": "^0.2.0", - "contentlayer": "0.3.3", + "contentlayer": "0.3.4", "date-fns": "^2.30.0", "jotai": "^2.1.0", "lodash.template": "^4.5.0", "lucide-react": "0.214.0", - "next": "13.4.6", - "next-contentlayer": "0.3.3", + "next": "13.4.8-canary.13", + "next-contentlayer": "0.3.4", "next-themes": "^0.2.1", "react": "^18.2.0", "react-day-picker": "^8.7.1", diff --git a/apps/www/styles/mdx.css b/apps/www/styles/mdx.css index 7110db21b53..8f7ba69222c 100644 --- a/apps/www/styles/mdx.css +++ b/apps/www/styles/mdx.css @@ -65,3 +65,7 @@ [data-rehype-pretty-code-title] + pre { @apply mt-2; } + +.mdx > .steps:first-child > h3:first-child { + @apply mt-0; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 745eb1e7f0b..dd1e39ea028 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -216,8 +216,8 @@ importers: specifier: ^0.2.0 version: 0.2.0(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) contentlayer: - specifier: 0.3.3 - version: 0.3.3(esbuild@0.17.19) + specifier: 0.3.4 + version: 0.3.4(esbuild@0.17.19) date-fns: specifier: ^2.30.0 version: 2.30.0 @@ -231,14 +231,14 @@ importers: specifier: 0.214.0 version: 0.214.0(react@18.2.0) next: - specifier: 13.4.6 - version: 13.4.6(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + specifier: 13.4.8-canary.13 + version: 13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) next-contentlayer: - specifier: 0.3.3 - version: 0.3.3(esbuild@0.17.19)(next@13.4.6)(react-dom@18.2.0)(react@18.2.0) + specifier: 0.3.4 + version: 0.3.4(contentlayer@0.3.4)(esbuild@0.17.19)(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@13.4.6)(react-dom@18.2.0)(react@18.2.0) + version: 0.2.1(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1052,12 +1052,12 @@ packages: chalk: 4.1.2 dev: false - /@contentlayer/cli@0.3.3(esbuild@0.17.19): - resolution: {integrity: sha512-wucAa2WLewqGLqcHeb6taXVNv/9UXCGRWkC/PC1HXKKrVkngdGuQtKGNp+jzeNBlS5ShObeAgo+usIsxgp1EcA==} + /@contentlayer/cli@0.3.4(esbuild@0.17.19): + resolution: {integrity: sha512-vNDwgLuhYNu+m70NZ3XK9kexKNguuxPXg7Yvzj3B34cEilQjjzSrcTY/i+AIQm9V7uT5GGshx9ukzPf+SmoszQ==} dependencies: - '@contentlayer/core': 0.3.3(esbuild@0.17.19) - '@contentlayer/utils': 0.3.3 - clipanion: 3.2.0(typanion@3.12.1) + '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/utils': 0.3.4 + clipanion: 3.2.1(typanion@3.12.1) typanion: 3.12.1 transitivePeerDependencies: - '@effect-ts/otel-node' @@ -1066,10 +1066,10 @@ packages: - supports-color dev: false - /@contentlayer/client@0.3.3(esbuild@0.17.19): - resolution: {integrity: sha512-fnZbh1fF0Zg+kE0+juIunNLqStNigBdrzWhg+F/uGnD+Nd+tWSGJMRr6YnoEHfwmldtG9Jq8PJ2KG5/2EIZf8g==} + /@contentlayer/client@0.3.4(esbuild@0.17.19): + resolution: {integrity: sha512-QSlLyc3y4PtdC5lFw0L4wTZUH8BQnv2nk37hNCsPAqGf+dRO7TLAzdc+2/mVIRgK+vSH+pSOzjLsQpFxxXRTZA==} dependencies: - '@contentlayer/core': 0.3.3(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19) transitivePeerDependencies: - '@effect-ts/otel-node' - esbuild @@ -1077,10 +1077,10 @@ packages: - supports-color dev: false - /@contentlayer/core@0.3.3(esbuild@0.17.19): - resolution: {integrity: sha512-g0SeiN0Y8vBSXA9oMHDTIb/1l0oIeKKt251QXM0lRt2V4A+t3kNskSG5CVEXNN8T60F3PO6lhNUJcLQqIXMbMw==} + /@contentlayer/core@0.3.4(esbuild@0.17.19): + resolution: {integrity: sha512-o68oBLwfYZ+2vtgfk1lgHxOl3LoxvRNiUfeQ8IWFWy/L4wnIkKIqLZX01zlRE5IzYM+ZMMN5V0cKQlO7DsyR9g==} peerDependencies: - esbuild: 0.17.x + esbuild: 0.17.x || 0.18.x markdown-wasm: 1.x peerDependenciesMeta: esbuild: @@ -1088,7 +1088,7 @@ packages: markdown-wasm: optional: true dependencies: - '@contentlayer/utils': 0.3.3 + '@contentlayer/utils': 0.3.4 camel-case: 4.1.2 comment-json: 4.2.3 esbuild: 0.17.19 @@ -1099,18 +1099,18 @@ packages: remark-parse: 10.0.2 remark-rehype: 10.1.0 source-map-support: 0.5.21 - type-fest: 3.11.1 + type-fest: 3.12.0 unified: 10.1.2 transitivePeerDependencies: - '@effect-ts/otel-node' - supports-color dev: false - /@contentlayer/source-files@0.3.3(esbuild@0.17.19): - resolution: {integrity: sha512-DU1A3gTF90gTigqKpcBqtiGSbtBXzrFGLWSDOc5PtOqbM8+nzkQXLu9KBRMmE1n9jPOgAbyVV+O+R8aRPiBimQ==} + /@contentlayer/source-files@0.3.4(esbuild@0.17.19): + resolution: {integrity: sha512-4njyn0OFPu7WY4tAjMxiJgWOKeiHuBOGdQ36EYE03iij/pPPRbiWbL+cmLccYXUFEW58mDwpqROZZm6pnxjRDQ==} dependencies: - '@contentlayer/core': 0.3.3(esbuild@0.17.19) - '@contentlayer/utils': 0.3.3 + '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/utils': 0.3.4 chokidar: 3.5.3 fast-glob: 3.2.12 gray-matter: 4.0.3 @@ -1118,7 +1118,7 @@ packages: micromatch: 4.0.5 ts-pattern: 4.3.0 unified: 10.1.2 - yaml: 1.10.2 + yaml: 2.3.1 zod: 3.21.4 transitivePeerDependencies: - '@effect-ts/otel-node' @@ -1127,12 +1127,12 @@ packages: - supports-color dev: false - /@contentlayer/source-remote-files@0.3.3(esbuild@0.17.19): - resolution: {integrity: sha512-OepjzWkrkO/9pByNmuQfxF6q+5hzs7Q2obQPJchk1Kn3mRWGywc7jIaKr689DlsI6wHBJU6bECnFmsya+A8FJA==} + /@contentlayer/source-remote-files@0.3.4(esbuild@0.17.19): + resolution: {integrity: sha512-cyiv4sNUySZvR0uAKlM+kSAELzNd2h2QT1R2e41dRKbwOUVxeLfmGiLugr0aVac6Q3xYcD99dbHyR1xWPV+w9w==} dependencies: - '@contentlayer/core': 0.3.3(esbuild@0.17.19) - '@contentlayer/source-files': 0.3.3(esbuild@0.17.19) - '@contentlayer/utils': 0.3.3 + '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/source-files': 0.3.4(esbuild@0.17.19) + '@contentlayer/utils': 0.3.4 transitivePeerDependencies: - '@effect-ts/otel-node' - esbuild @@ -1140,8 +1140,8 @@ packages: - supports-color dev: false - /@contentlayer/utils@0.3.3: - resolution: {integrity: sha512-vKWY8kE5EGFpr+bcDjmC3/oeTc/Lyn3wZryfq/IEIAx6Fw1bjtt/2Epq55nmAsmGlBiBOROlI/yUhNUJHN96Zw==} + /@contentlayer/utils@0.3.4: + resolution: {integrity: sha512-ZWWOhbUWYQ2QHoLIlcUnEo7X4ZbwcyFPuzVQWWMkK43BxCveyQtZwBIzfyx54sqVzi0GUmKP8bHzsLQT0QxaLQ==} peerDependencies: '@effect-ts/otel-node': '*' peerDependenciesMeta: @@ -1168,9 +1168,9 @@ packages: hash-wasm: 4.9.0 inflection: 2.0.1 memfs: 3.5.1 - oo-ascii-tree: 1.82.0 + oo-ascii-tree: 1.84.0 ts-pattern: 4.3.0 - type-fest: 3.11.1 + type-fest: 3.12.0 dev: false /@cspotcode/source-map-support@0.8.1: @@ -1711,8 +1711,8 @@ packages: resolution: {integrity: sha512-q/y7VZj/9YpgzDe64Zi6rY1xPizx80JjlU2BTevlajtaE3w1LqweH1gGgxou2N7hdFosXHjGrI4OUvtFXXhGLg==} dev: false - /@next/env@13.4.6: - resolution: {integrity: sha512-nqUxEtvDqFhmV1/awSg0K2XHNwkftNaiUqCYO9e6+MYmqNObpKVl7OgMkGaQ2SZnFx5YqF0t60ZJTlyJIDAijg==} + /@next/env@13.4.8-canary.13: + resolution: {integrity: sha512-udCBFvXLUnm5C0MdMW3K7swu8TXPE/utgHh4gjLT42gm0rSdML5BYMmeSP4WGkYfifP26FQTGnKiU9YYQOwBeg==} dev: false /@next/eslint-plugin-next@13.0.0: @@ -1736,8 +1736,8 @@ packages: dev: false optional: true - /@next/swc-darwin-arm64@13.4.6: - resolution: {integrity: sha512-ahi6VP98o4HV19rkOXPSUu+ovfHfUxbJQ7VVJ7gL2FnZRr7onEFC1oGQ6NQHpm8CxpIzSSBW79kumlFMOmZVjg==} + /@next/swc-darwin-arm64@13.4.8-canary.13: + resolution: {integrity: sha512-bGKzCa8UBfpigSnND3GNiswJO7JZqBh/1m3FLLQJzTMOsdWwKcIbk3QP3Xk10cgHP4qLe3W+BikaOjdOZO0NRQ==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -1754,8 +1754,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@13.4.6: - resolution: {integrity: sha512-13cXxKFsPJIJKzUqrU5XB1mc0xbUgYsRcdH6/rB8c4NMEbWGdtD4QoK9ShN31TZdePpD4k416Ur7p+deMIxnnA==} + /@next/swc-darwin-x64@13.4.8-canary.13: + resolution: {integrity: sha512-IvEqoqYR+DEHmjFOtSM7ne+go+9Lf11QwejdLi64VEt7QxJTQNak6AC8UBJDY+CiYbPy/y+sLBhjkf6BZE6g/w==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -1772,8 +1772,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@13.4.6: - resolution: {integrity: sha512-Ti+NMHEjTNktCVxNjeWbYgmZvA2AqMMI2AMlzkXsU7W4pXCMhrryAmAIoo+7YdJbsx01JQWYVxGe62G6DoCLaA==} + /@next/swc-linux-arm64-gnu@13.4.8-canary.13: + resolution: {integrity: sha512-fVX4vrveaAqVgvmiWx5deza+KenrwKD4z+ckz9oTbIxjVcouV3u4ur7UUB8jR9Z6ZYN5X2tW95imA4SgzH0jWA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -1790,8 +1790,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@13.4.6: - resolution: {integrity: sha512-OHoC6gO7XfjstgwR+z6UHKlvhqJfyMtNaJidjx3sEcfaDwS7R2lqR5AABi8PuilGgi0BO0O0sCXqLlpp3a0emQ==} + /@next/swc-linux-arm64-musl@13.4.8-canary.13: + resolution: {integrity: sha512-qEfBWp3IsbC5+yKXmC5r1ZI2wT8G28u6plW6E5twR1CBnQud9bOc980E8WMZDnp3V5iTNB0UK0Ja8l/yw/9lwA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -1808,8 +1808,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@13.4.6: - resolution: {integrity: sha512-zHZxPGkUlpfNJCboUrFqwlwEX5vI9LSN70b8XEb0DYzzlrZyCyOi7hwDp/+3Urm9AB7YCAJkgR5Sp1XBVjHdfQ==} + /@next/swc-linux-x64-gnu@13.4.8-canary.13: + resolution: {integrity: sha512-qVst+PTEuySR8RJ246auKADnZVygK6EwnjRysCuRmuRCFFGWkqoZcqLY/wNmjqFNSOsXGUjIMoL2Ey3ZstQ5kw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -1826,8 +1826,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@13.4.6: - resolution: {integrity: sha512-K/Y8lYGTwTpv5ME8PSJxwxLolaDRdVy+lOd9yMRMiQE0BLUhtxtCWC9ypV42uh9WpLjoaD0joOsB9Q6mbrSGJg==} + /@next/swc-linux-x64-musl@13.4.8-canary.13: + resolution: {integrity: sha512-ts7/ILlQCsVWlNfYhgElnXKmKDYkE91uHV7asbdkfLOUCUAFDdwMTBMHMM0lsCM6iBmj/gVfW3s5BUTdG/VlVQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -1844,8 +1844,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@13.4.6: - resolution: {integrity: sha512-U6LtxEUrjBL2tpW+Kr1nHCSJWNeIed7U7l5o7FiKGGwGgIlFi4UHDiLI6TQ2lxi20fAU33CsruV3U0GuzMlXIw==} + /@next/swc-win32-arm64-msvc@13.4.8-canary.13: + resolution: {integrity: sha512-X9zay3u/PwGvrEg8E6hLC5iNhOVf8ZTQ4BtovFwsoMg87/8bIptXKI2acLo+YTmCJiwdj1j0xJQAG50Zb5Hq/Q==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -1862,8 +1862,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@13.4.6: - resolution: {integrity: sha512-eEBeAqpCfhdPSlCZCayjCiyIllVqy4tcqvm1xmg3BgJG0G5ITiMM4Cw2WVeRSgWDJqQGRyyb+q8Y2ltzhXOWsQ==} + /@next/swc-win32-ia32-msvc@13.4.8-canary.13: + resolution: {integrity: sha512-qmsWtLaFJIUHqBe3S3wg+DBbwFmvGe2kWJP/Ij7zr5Rv/6IxIPy7WLfBnxzlEUEUC58sy+dvCfdkj+jLOfqKTQ==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -1880,8 +1880,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@13.4.6: - resolution: {integrity: sha512-OrZs94AuO3ZS5tnqlyPRNgfWvboXaDQCi5aXGve3o3C+Sj0ctMUV9+Do+0zMvvLRumR8E0PTWKvtz9n5vzIsWw==} + /@next/swc-win32-x64-msvc@13.4.8-canary.13: + resolution: {integrity: sha512-WkVbvoDgpRR0x40Yrxhvv94ZgDPxfi7bVGkY+BbugWrJK2VRePyD6Tjuo6dfm7iDBMABqDOmwixpOxxzpLSbHA==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -4510,8 +4510,8 @@ packages: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} dev: false - /clipanion@3.2.0(typanion@3.12.1): - resolution: {integrity: sha512-XaPQiJQZKbyaaDbv5yR/cAt/ORfZfENkr4wGQj+Go/Uf/65ofTQBCPirgWFeJctZW24V3mxrFiEnEmqBflrJYA==} + /clipanion@3.2.1(typanion@3.12.1): + resolution: {integrity: sha512-dYFdjLb7y1ajfxQopN05mylEpK9ZX0sO1/RfMXdfmwjlIsPkbh4p7A682x++zFPLDCo1x3p82dtljHf5cW2LKA==} peerDependencies: typanion: '*' dependencies: @@ -4668,18 +4668,18 @@ packages: yargs: 17.7.2 dev: false - /contentlayer@0.3.3(esbuild@0.17.19): - resolution: {integrity: sha512-BpEdeMmXd/Hsm3nP1v5GeQb58YtrGDJcYKEO/Xk/R7lwr9JKhgiXTXshULHBr36gVwV2pVw4sZIBBANOpWKxaw==} + /contentlayer@0.3.4(esbuild@0.17.19): + resolution: {integrity: sha512-FYDdTUFaN4yqep0waswrhcXjmMJnPD5iXDTtxcUCGdklfuIrXM2xLx51xl748cHmGA6IsC+27YZFxU6Ym13QIA==} engines: {node: '>=14.18'} hasBin: true requiresBuild: true dependencies: - '@contentlayer/cli': 0.3.3(esbuild@0.17.19) - '@contentlayer/client': 0.3.3(esbuild@0.17.19) - '@contentlayer/core': 0.3.3(esbuild@0.17.19) - '@contentlayer/source-files': 0.3.3(esbuild@0.17.19) - '@contentlayer/source-remote-files': 0.3.3(esbuild@0.17.19) - '@contentlayer/utils': 0.3.3 + '@contentlayer/cli': 0.3.4(esbuild@0.17.19) + '@contentlayer/client': 0.3.4(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/source-files': 0.3.4(esbuild@0.17.19) + '@contentlayer/source-remote-files': 0.3.4(esbuild@0.17.19) + '@contentlayer/utils': 0.3.4 transitivePeerDependencies: - '@effect-ts/otel-node' - esbuild @@ -7888,16 +7888,18 @@ packages: /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - /next-contentlayer@0.3.3(esbuild@0.17.19)(next@13.4.6)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-XYHRtDWBZ6ZI4F5dJ3Zy0wD2VeNLyifXuGihlmInTVLCtMiACZMae9N7nuhSZtlpXW5xec5wOV9pYhjoICV52A==} + /next-contentlayer@0.3.4(contentlayer@0.3.4)(esbuild@0.17.19)(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UtUCwgAl159KwfhNaOwyiI7Lg6sdioyKMeh+E7jxx0CJ29JuXGxBEYmCI6+72NxFGIFZKx8lvttbbQhbnYWYSw==} peerDependencies: + contentlayer: 0.3.4 next: ^12 || ^13 react: '*' react-dom: '*' dependencies: - '@contentlayer/core': 0.3.3(esbuild@0.17.19) - '@contentlayer/utils': 0.3.3 - next: 13.4.6(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/utils': 0.3.4 + contentlayer: 0.3.4(esbuild@0.17.19) + next: 13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) transitivePeerDependencies: @@ -7919,14 +7921,14 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /next-themes@0.2.1(next@13.4.6)(react-dom@18.2.0)(react@18.2.0): + /next-themes@0.2.1(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} peerDependencies: next: '*' react: '*' react-dom: '*' dependencies: - next: 13.4.6(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false @@ -7973,8 +7975,8 @@ packages: - babel-plugin-macros dev: false - /next@13.4.6(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-sjVqjxU+U2aXZnYt4Ud6CTLNNwWjdSfMgemGpIQJcN3Z7Jni9xRWbR0ie5fQzCg87aLqQVhKA2ud2gPoqJ9lGw==} + /next@13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-bm4WMe4R6GGoPCsDFhLywPethVfg+ZKqMaesC9xYuLvylxasOFLRYb5o7zAfcsaCXx//kqnsxOkn6meZQmNAZg==} engines: {node: '>=16.8.0'} hasBin: true peerDependencies: @@ -7991,7 +7993,7 @@ packages: sass: optional: true dependencies: - '@next/env': 13.4.6 + '@next/env': 13.4.8-canary.13 '@opentelemetry/api': 1.4.1 '@swc/helpers': 0.5.1 busboy: 1.6.0 @@ -8003,15 +8005,15 @@ packages: watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.4.6 - '@next/swc-darwin-x64': 13.4.6 - '@next/swc-linux-arm64-gnu': 13.4.6 - '@next/swc-linux-arm64-musl': 13.4.6 - '@next/swc-linux-x64-gnu': 13.4.6 - '@next/swc-linux-x64-musl': 13.4.6 - '@next/swc-win32-arm64-msvc': 13.4.6 - '@next/swc-win32-ia32-msvc': 13.4.6 - '@next/swc-win32-x64-msvc': 13.4.6 + '@next/swc-darwin-arm64': 13.4.8-canary.13 + '@next/swc-darwin-x64': 13.4.8-canary.13 + '@next/swc-linux-arm64-gnu': 13.4.8-canary.13 + '@next/swc-linux-arm64-musl': 13.4.8-canary.13 + '@next/swc-linux-x64-gnu': 13.4.8-canary.13 + '@next/swc-linux-x64-musl': 13.4.8-canary.13 + '@next/swc-win32-arm64-msvc': 13.4.8-canary.13 + '@next/swc-win32-ia32-msvc': 13.4.8-canary.13 + '@next/swc-win32-x64-msvc': 13.4.8-canary.13 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -8197,9 +8199,9 @@ packages: mimic-fn: 4.0.0 dev: false - /oo-ascii-tree@1.82.0: - resolution: {integrity: sha512-I9tWDtyeOMkQ6L6+RFwscmxUNAbBxhTsdHZk7NnjZZszKvFvWGN/XpPyCU/sY0u5zsAsi4AJYPMy4ZZkx7+iNA==} - engines: {node: '>= 14.6.0'} + /oo-ascii-tree@1.84.0: + resolution: {integrity: sha512-8bvsAKFAQ7HwU3lAEDwsKYDkTqsDTsRTkr3J0gvH1U805d2no9rUNYptWzg3oYku5h5mr9Bko+BIh1pjSD8qrg==} + engines: {node: '>= 14.17.0'} dev: false /open@9.1.0: @@ -10147,8 +10149,8 @@ packages: engines: {node: '>=10'} dev: true - /type-fest@3.11.1: - resolution: {integrity: sha512-aCuRNRERRVh33lgQaJRlUxZqzfhzwTrsE98Mc3o3VXqmiaQdHacgUtJ0esp+7MvZ92qhtzKPeusaX6vIEcoreA==} + /type-fest@3.12.0: + resolution: {integrity: sha512-qj9wWsnFvVEMUDbESiilKeXeHL7FwwiFcogfhfyjmvT968RXSvnl23f1JOClTHYItsi7o501C/7qVllscUP3oA==} engines: {node: '>=14.16'} dev: false @@ -10709,6 +10711,7 @@ packages: /yaml@1.10.2: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} + dev: true /yaml@2.3.1: resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==} From 0857bfe8899af5e9b772d0e2e357e263f7d6f4f2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 30 Jun 2023 22:56:01 +0400 Subject: [PATCH 04/67] chore(release): version packages (#737) Co-authored-by: github-actions[bot] --- .changeset/lovely-otters-rescue.md | 5 ----- packages/cli/CHANGELOG.md | 6 ++++++ packages/cli/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/lovely-otters-rescue.md diff --git a/.changeset/lovely-otters-rescue.md b/.changeset/lovely-otters-rescue.md deleted file mode 100644 index 6eba3a5c8c5..00000000000 --- a/.changeset/lovely-otters-rescue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"shadcn-ui": patch ---- - -fix(cli): use bun add when bun detected diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index e3c84a4386a..4e66e326b59 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,11 @@ # @shadcn/ui +## 0.2.3 + +### Patch Changes + +- [#707](https://github.com/shadcn/ui/pull/707) [`c337753`](https://github.com/shadcn/ui/commit/c3377530f43baa95c9e41cce7c07b1a4db1e3ee6) Thanks [@MarkLyck](https://github.com/MarkLyck)! - fix(cli): use bun add when bun detected + ## 0.2.2 ### Patch Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index db6471534de..c79b8e1308a 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "shadcn-ui", - "version": "0.2.2", + "version": "0.2.3", "description": "Add components to your apps.", "publishConfig": { "access": "public" From b14081631f4c0488dbd6ad5449f5c1e474d12c5a Mon Sep 17 00:00:00 2001 From: shadcn Date: Fri, 30 Jun 2023 23:32:17 +0400 Subject: [PATCH 05/67] docs(www): fix link --- apps/www/content/docs/installation/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index baf2921b5f1..325ce603343 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -43,7 +43,7 @@ description: How to install dependencies and structure your app.

Remix

- + Date: Tue, 4 Jul 2023 00:23:52 +0600 Subject: [PATCH 06/67] docs(www): add installation guide for Gatsby (#822) * docs: add installation guide for Gatsby * docs: add PR review changes --- apps/www/config/docs.ts | 5 + apps/www/content/docs/installation/gatsby.mdx | 118 ++++++++++++++++++ apps/www/content/docs/installation/index.mdx | 13 ++ 3 files changed, 136 insertions(+) create mode 100644 apps/www/content/docs/installation/gatsby.mdx diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 56cb80004e3..a9a82327605 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -98,6 +98,11 @@ export const docsConfig: DocsConfig = { href: "/docs/installation/remix", items: [], }, + { + title: "Gatsby", + href: "/docs/installation/gatsby", + items: [], + }, { title: "Manual", href: "/docs/installation/manual", diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx new file mode 100644 index 00000000000..acc62c1824c --- /dev/null +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -0,0 +1,118 @@ +--- +title: Gatsby +description: Install and configure Gatsby. +--- + + + +### Create project + +Start by creating a new Gatsby project using `Gatsby CLI`: + +```bash +npx gatsby new +``` + +### Configure your Gatsby project to use TypeScript and Tailwind CSS + +You will be asked a few questions to configure your project: + +```txt showLineNumbers +✔ What would you like to call your site? +· your-app-name +✔ What would you like to name the folder where your site will be created? +· your-app-name +✔ Will you be using JavaScript or TypeScript? +· TypeScript +✔ Will you be using a CMS? +· Choose whatever you want +✔ Would you like to install a styling system? +· Tailwind CSS +✔ Would you like to install additional features with other plugins? +· Choose whatever you want +✔ Shall we do this? (Y/n) · Yes +``` + +### Edit tsconfig.json file + +Add the code below to the tsconfig.json file to resolve paths: + +```ts {4-9} showLineNumbers +{ + "compilerOptions": { + // ... + "baseUrl": ".", + "paths": { + "@/*": [ + "./src/*" + ] + } + // ... + } +} +``` + +### Create gatsby-node.js file + +Create a `gatsby-node.js` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node.js` file so your app can resolve paths: + +```js +const path = require("path") +exports.onCreateWebpackConfig = ({ actions }) => { + actions.setWebpackConfig({ + resolve: { + alias: { + "@/components": path.resolve(__dirname, "src/components"), + "@/lib/utils": path.resolve(__dirname, "src/lib/utils"), + }, + }, + }) +} +``` + +### Run the CLI + +Run the `shadcn-ui` init command to setup your project: + +```bash +npx shadcn-ui@latest init +``` + +### Configure components.json + +You will be asked a few questions to configure `components.json`: + +```txt showLineNumbers +Which style would you like to use? › Default +Which color would you like to use as base color? › Slate +Where is your global CSS file? › › ./src/styles/globals.css +Do you want to use CSS variables for colors? › no / yes +Where is your tailwind.config.js located? › tailwind.config.js +Configure the import alias for components: › @/components +Configure the import alias for utils: › @/lib/utils +Are you using React Server Components? › no +``` + +### That's it + +You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add button +``` + +The command above will add the `Button` component to your project. You can then import it like this: + +```tsx {1,6} showLineNumbers +import { Button } from "@/components/ui" + +export default function Home() { + return ( +
+ +
+ ) +} +``` + + diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index 325ce603343..a3aca8cc28a 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -43,6 +43,19 @@ description: How to install dependencies and structure your app.

Remix

 + + + Gatsby + + +

Gatsby

+ Date: Tue, 4 Jul 2023 08:02:34 +0200 Subject: [PATCH 07/67] docs(www): add astro installation guide (#824) --- apps/www/config/docs.ts | 5 + apps/www/content/docs/installation/astro.mdx | 136 +++++++++++++++++++ apps/www/content/docs/installation/index.mdx | 16 +++ 3 files changed, 157 insertions(+) create mode 100644 apps/www/content/docs/installation/astro.mdx diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index a9a82327605..c5a61801710 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -103,6 +103,11 @@ export const docsConfig: DocsConfig = { href: "/docs/installation/gatsby", items: [], }, + { + title: "Astro", + href: "/docs/installation/astro", + items: [], + }, { title: "Manual", href: "/docs/installation/manual", diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx new file mode 100644 index 00000000000..62204248abc --- /dev/null +++ b/apps/www/content/docs/installation/astro.mdx @@ -0,0 +1,136 @@ +--- +title: Astro +description: Install and configure Astro. +--- + + + +### Create project + +Start by creating a new Astro project: + +```bash +npm create astro@latest +``` + +### Configure your Astro project + +You will be asked a few questions to configure your project: + +```txt showLineNumbers +- Where should we create your new project? +./your-app-name +- How would you like to start your new project? +Choose a starter template (or Empty) +- Install dependencies? +Yes +- Do you plan to write TypeScript? +Yes +- How strict should TypeScript be? +Strict +- Initialize a new git repository? (optional) +Yes/No +``` + +### Add React to your project + +Install React using the Astro CLI: + +```bash +npx astro add react +``` + + + +Answer `Yes` to all the question prompted by the CLI when installing React. + + + +### Add Tailwind CSS to your project + +Install Tailwind CSS using the Astro CLI: + +```bash +npx astro add tailwind +``` + + + +Answer `Yes` to all the question prompted by the CLI when installing Tailwind CSS. + + + +### Edit tsconfig.json file + +Add the code below to the tsconfig.json file to resolve paths: + +```json {2-7} showLineNumbers +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + } +} +``` + +### Run the CLI + +Run the `shadcn-ui` init command to setup your project: + +```bash +npx shadcn-ui@latest init +``` + +### Configure components.json + +You will be asked a few questions to configure `components.json`: + +```txt showLineNumbers +Which style would you like to use? › Default +Which color would you like to use as base color? › Slate +Where is your global CSS file? › › ./src/styles/globals.css +Do you want to use CSS variables for colors? › no / yes +Where is your tailwind.config.js located? › tailwind.config.cjs +Configure the import alias for components: › @/components +Configure the import alias for utils: › @/lib/utils +Are you using React Server Components? › no +``` + +### Import the globals.css file + +Import the `globals.css` file in the `src/index.astro` file: + +```ts {2} showLineNumbers +--- +import '@/styles/globals.css' +--- +``` + +### That's it + +You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add button +``` + +The command above will add the `Button` component to your project. You can then import it like this: + +```astro {2,10} showLineNumbers +--- +import { Button } from "@/components/ui/button" +--- + + + + Astro + + + + + +``` + + diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index a3aca8cc28a..914abfd7a07 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -56,6 +56,22 @@ description: How to install dependencies and structure your app.

Gatsby

 + + + Astro + + +

Astro

+ Date: Tue, 4 Jul 2023 08:55:01 +0200 Subject: [PATCH 08/67] docs(www): improve Gatsby guide (#826) --- apps/www/content/docs/installation/gatsby.mdx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index acc62c1824c..87ac29fbb1b 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -7,10 +7,10 @@ description: Install and configure Gatsby. ### Create project -Start by creating a new Gatsby project using `Gatsby CLI`: +Start by creating a new Gatsby project using `create-gatsby`: ```bash -npx gatsby new +npm init gatsby ``` ### Configure your Gatsby project to use TypeScript and Tailwind CSS @@ -35,7 +35,7 @@ You will be asked a few questions to configure your project: ### Edit tsconfig.json file -Add the code below to the tsconfig.json file to resolve paths: +Add the code below to the `tsconfig.json` file to resolve paths: ```ts {4-9} showLineNumbers { @@ -52,13 +52,14 @@ Add the code below to the tsconfig.json file to resolve paths: } ``` -### Create gatsby-node.js file +### Create gatsby-node.ts file -Create a `gatsby-node.js` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node.js` file so your app can resolve paths: +Create a `gatsby-node.ts` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node` file so your app can resolve paths: -```js -const path = require("path") -exports.onCreateWebpackConfig = ({ actions }) => { +```ts +import * as path from "path" + +export const onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { alias: { From b4dda36cc928995a49099aa2e153d7a976d43f4b Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 4 Jul 2023 12:01:50 +0400 Subject: [PATCH 09/67] docs(www): add radix-ui deps install (#827) --- apps/www/content/docs/components/accordion.mdx | 6 ++++++ apps/www/content/docs/components/alert-dialog.mdx | 6 ++++++ apps/www/content/docs/components/aspect-ratio.mdx | 6 ++++++ apps/www/content/docs/components/avatar.mdx | 6 ++++++ apps/www/content/docs/components/button.mdx | 6 ++++++ apps/www/content/docs/components/calendar.mdx | 10 ++++++++++ apps/www/content/docs/components/checkbox.mdx | 6 ++++++ apps/www/content/docs/components/collapsible.mdx | 6 ++++++ apps/www/content/docs/components/command.mdx | 6 ++++++ apps/www/content/docs/components/context-menu.mdx | 6 ++++++ apps/www/content/docs/components/dialog.mdx | 6 ++++++ apps/www/content/docs/components/dropdown-menu.mdx | 6 ++++++ apps/www/content/docs/components/hover-card.mdx | 6 ++++++ apps/www/content/docs/components/label.mdx | 6 ++++++ apps/www/content/docs/components/menubar.mdx | 6 ++++++ apps/www/content/docs/components/navigation-menu.mdx | 6 ++++++ apps/www/content/docs/components/popover.mdx | 6 ++++++ apps/www/content/docs/components/progress.mdx | 6 ++++++ apps/www/content/docs/components/radio-group.mdx | 6 ++++++ apps/www/content/docs/components/scroll-area.mdx | 6 ++++++ apps/www/content/docs/components/select.mdx | 6 ++++++ apps/www/content/docs/components/separator.mdx | 5 +++++ apps/www/content/docs/components/sheet.mdx | 6 ++++++ apps/www/content/docs/components/slider.mdx | 6 ++++++ apps/www/content/docs/components/switch.mdx | 6 ++++++ apps/www/content/docs/components/tabs.mdx | 6 ++++++ apps/www/content/docs/components/toast.mdx | 6 ++++++ apps/www/content/docs/components/toggle.mdx | 6 ++++++ apps/www/content/docs/components/tooltip.mdx | 6 ++++++ 29 files changed, 177 insertions(+) diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx index 3542dfbe5a2..41ca737ee86 100644 --- a/apps/www/content/docs/components/accordion.mdx +++ b/apps/www/content/docs/components/accordion.mdx @@ -67,6 +67,12 @@ module.exports = { +Install the following dependencies: + +```bash +npm install @radix-ui/react-accordion +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx index eb191ff6872..443969623ab 100644 --- a/apps/www/content/docs/components/alert-dialog.mdx +++ b/apps/www/content/docs/components/alert-dialog.mdx @@ -30,6 +30,12 @@ npx shadcn-ui@latest add alert-dialog +Install the following dependencies: + +```bash +npm install @radix-ui/react-alert-dialog +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx index 773238adfc5..9984b58e5fd 100644 --- a/apps/www/content/docs/components/aspect-ratio.mdx +++ b/apps/www/content/docs/components/aspect-ratio.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add aspect-ratio +Install the following dependencies: + +```bash +npm install @radix-ui/react-aspect-ratio +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx index 5eec3019c13..defd9ddc961 100644 --- a/apps/www/content/docs/components/avatar.mdx +++ b/apps/www/content/docs/components/avatar.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add avatar +Install the following dependencies: + +```bash +npm install @radix-ui/react-avatar +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx index d61ac4c1684..1a80d206f05 100644 --- a/apps/www/content/docs/components/button.mdx +++ b/apps/www/content/docs/components/button.mdx @@ -27,6 +27,12 @@ npx shadcn-ui@latest add button +Install the following dependencies: + +```bash +npm install @radix-ui/react-slot +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx index 146c5caab9e..f276a9d551c 100644 --- a/apps/www/content/docs/components/calendar.mdx +++ b/apps/www/content/docs/components/calendar.mdx @@ -30,6 +30,16 @@ npx shadcn-ui@latest add calendar +Install the following dependencies: + +```bash +npm install react-day-picker date-fns +``` + +Add the `Button` component to your project. + +The `Calendar` component uses the `Button` component. Make sure you have it installed in your project. + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx index da8f30a75f0..e8be109eacc 100644 --- a/apps/www/content/docs/components/checkbox.mdx +++ b/apps/www/content/docs/components/checkbox.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add checkbox +Install the following dependencies: + +```bash +npm install @radix-ui/react-checkbox +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/collapsible.mdx b/apps/www/content/docs/components/collapsible.mdx index 2e9ce76e812..f95fb03f5ee 100644 --- a/apps/www/content/docs/components/collapsible.mdx +++ b/apps/www/content/docs/components/collapsible.mdx @@ -30,6 +30,12 @@ npx shadcn-ui@latest add collapsible +Install the following dependencies: + +```bash +npm install @radix-ui/react-collapsible +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx index 6ca274186b1..536ee713b95 100644 --- a/apps/www/content/docs/components/command.mdx +++ b/apps/www/content/docs/components/command.mdx @@ -34,6 +34,12 @@ npx shadcn-ui@latest add command +Install the following dependencies: + +```bash +npm install cmdk +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx index ef2bb995f6e..d0097638f38 100644 --- a/apps/www/content/docs/components/context-menu.mdx +++ b/apps/www/content/docs/components/context-menu.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add context-menu +Install the following dependencies: + +```bash +npm install @radix-ui/react-context-menu +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx index 1f350394314..d617754e509 100644 --- a/apps/www/content/docs/components/dialog.mdx +++ b/apps/www/content/docs/components/dialog.mdx @@ -30,6 +30,12 @@ npx shadcn-ui@latest add dialog +Install the following dependencies: + +```bash +npm install @radix-ui/react-dialog +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx index ff8730d196e..6f16fb961a1 100644 --- a/apps/www/content/docs/components/dropdown-menu.mdx +++ b/apps/www/content/docs/components/dropdown-menu.mdx @@ -30,6 +30,12 @@ npx shadcn-ui@latest add dropdown-menu +Install the following dependencies: + +```bash +npm install @radix-ui/react-dropdown-menu +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/hover-card.mdx b/apps/www/content/docs/components/hover-card.mdx index 0273ec8bf70..974e9ef6920 100644 --- a/apps/www/content/docs/components/hover-card.mdx +++ b/apps/www/content/docs/components/hover-card.mdx @@ -27,6 +27,12 @@ npx shadcn-ui@latest add hover-card +Install the following dependencies: + +```bash +npm install @radix-ui/react-hover-card +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/label.mdx b/apps/www/content/docs/components/label.mdx index c95d9c779fa..1cfaec654fe 100644 --- a/apps/www/content/docs/components/label.mdx +++ b/apps/www/content/docs/components/label.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add label +Install the following dependencies: + +```bash +npm install @radix-ui/react-label +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx index a7625d4a40c..3dd554e560b 100644 --- a/apps/www/content/docs/components/menubar.mdx +++ b/apps/www/content/docs/components/menubar.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add menubar +Install the following dependencies: + +```bash +npm install @radix-ui/react-menubar +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/navigation-menu.mdx b/apps/www/content/docs/components/navigation-menu.mdx index f801077fd61..d65c1813545 100644 --- a/apps/www/content/docs/components/navigation-menu.mdx +++ b/apps/www/content/docs/components/navigation-menu.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add navigation-menu +Install the following dependencies: + +```bash +npm install @radix-ui/react-navigation-menu +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx index 26cb2649a23..0179f16be06 100644 --- a/apps/www/content/docs/components/popover.mdx +++ b/apps/www/content/docs/components/popover.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add popover +Install the following dependencies: + +```bash +npm install @radix-ui/react-popover +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx index f362f0b811b..0274dba2c79 100644 --- a/apps/www/content/docs/components/progress.mdx +++ b/apps/www/content/docs/components/progress.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add progress +Install the following dependencies: + +```bash +npm install @radix-ui/react-progress +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/radio-group.mdx b/apps/www/content/docs/components/radio-group.mdx index ba1530f4c12..e18d0ddb065 100644 --- a/apps/www/content/docs/components/radio-group.mdx +++ b/apps/www/content/docs/components/radio-group.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add radio-group +Install the following dependencies: + +```bash +npm install @radix-ui/react-radio-group +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx index 5120e9e66b2..1244e4cc9ba 100644 --- a/apps/www/content/docs/components/scroll-area.mdx +++ b/apps/www/content/docs/components/scroll-area.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add scroll-area +Install the following dependencies: + +```bash +npm install @radix-ui/react-scroll-area +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx index 2ada78957d0..d1f7f40e503 100644 --- a/apps/www/content/docs/components/select.mdx +++ b/apps/www/content/docs/components/select.mdx @@ -30,6 +30,12 @@ npx shadcn-ui@latest add select +Install the following dependencies: + +```bash +npm install @radix-ui/react-select +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx index 87e7123e606..17ac178f5f5 100644 --- a/apps/www/content/docs/components/separator.mdx +++ b/apps/www/content/docs/components/separator.mdx @@ -28,6 +28,11 @@ npx shadcn-ui@latest add separator +Install the following dependencies: + +```bash +npm install @radix-ui/react-separator +``` Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/sheet.mdx b/apps/www/content/docs/components/sheet.mdx index ccadaca7df9..6d6190fd706 100644 --- a/apps/www/content/docs/components/sheet.mdx +++ b/apps/www/content/docs/components/sheet.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add sheet +Install the following dependencies: + +```bash +npm install @radix-ui/react-dialog +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/slider.mdx b/apps/www/content/docs/components/slider.mdx index 2900c15b649..02b4a582c3b 100644 --- a/apps/www/content/docs/components/slider.mdx +++ b/apps/www/content/docs/components/slider.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add slider +Install the following dependencies: + +```bash +npm install @radix-ui/react-slider +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx index 2bad0bc1645..dcae9ffc75a 100644 --- a/apps/www/content/docs/components/switch.mdx +++ b/apps/www/content/docs/components/switch.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add switch +Install the following dependencies: + +```bash +npm install @radix-ui/react-switch +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx index 8cbaa1e2b5b..3f01fbd6992 100644 --- a/apps/www/content/docs/components/tabs.mdx +++ b/apps/www/content/docs/components/tabs.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add tabs +Install the following dependencies: + +```bash +npm install @radix-ui/react-tabs +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx index caa8ef2a07a..0ab9999fd7d 100644 --- a/apps/www/content/docs/components/toast.mdx +++ b/apps/www/content/docs/components/toast.mdx @@ -53,6 +53,12 @@ export default function RootLayout({ children }) { +Install the following dependencies: + +```bash +npm install @radix-ui/react-toast +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx index 5258731eeff..793b76b73ea 100644 --- a/apps/www/content/docs/components/toggle.mdx +++ b/apps/www/content/docs/components/toggle.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add toggle +Install the following dependencies: + +```bash +npm install @radix-ui/react-toggle +``` + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx index bd93d2d74a3..358d93b691e 100644 --- a/apps/www/content/docs/components/tooltip.mdx +++ b/apps/www/content/docs/components/tooltip.mdx @@ -29,6 +29,12 @@ npx shadcn-ui@latest add tooltip +Install the following dependencies: + +```bash +npm install @radix-ui/react-tooltip +``` + Copy and paste the following code into your project. From f78a4aaa28923a363bf17e6a5aad4b7b80a692bd Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 4 Jul 2023 17:04:22 +0400 Subject: [PATCH 10/67] chore(www): site updates (#829) * chore(www): update to latest Next.js * feat(www): replace lucide icons --- apps/www/app/docs/[[...slug]]/page.tsx | 5 +- apps/www/app/examples/authentication/page.tsx | 15 +- .../examples/cards/components/github-card.tsx | 21 ++- .../cards/components/notifications.tsx | 8 +- .../cards/components/payment-method.tsx | 16 +- .../cards/components/report-an-issue.tsx | 5 +- .../cards/components/team-members.tsx | 6 +- apps/www/app/examples/cards/page.tsx | 3 +- apps/www/app/examples/cards/styles.css | 63 ------- .../components/date-range-picker.tsx | 2 +- .../dashboard/components/team-switcher.tsx | 13 +- .../dashboard/components/user-nav.tsx | 19 +- apps/www/app/examples/dashboard/page.tsx | 61 ++++++- .../examples/forms/account/account-form.tsx | 6 +- .../forms/appearance/appearance-form.tsx | 4 +- .../app/examples/forms/notifications/page.tsx | 1 - apps/www/app/examples/layout.tsx | 4 +- .../music/components/album-artwork.tsx | 19 +- .../app/examples/music/components/menu.tsx | 30 +++- .../components/podcast-empty-placeholder.tsx | 19 +- .../app/examples/music/components/sidebar.tsx | 151 +++++++++++++--- apps/www/app/examples/music/page.tsx | 10 +- apps/www/app/examples/music/styles.css | 65 ------- .../examples/playground/components/icons.tsx | 153 ---------------- .../playground/components/model-selector.tsx | 6 +- .../playground/components/preset-actions.tsx | 6 +- .../playground/components/preset-selector.tsx | 6 +- .../playground/components/preset-share.tsx | 4 +- apps/www/app/examples/playground/page.tsx | 166 ++++++++++++++++-- apps/www/app/examples/playground/styles.css | 65 ------- .../components/data-table-column-header.tsx | 19 +- .../components/data-table-faceted-filter.tsx | 8 +- .../components/data-table-pagination.tsx | 20 +-- .../components/data-table-row-actions.tsx | 25 +-- .../tasks/components/data-table-toolbar.tsx | 4 +- .../components/data-table-view-options.tsx | 4 +- .../examples/tasks/components/user-nav.tsx | 19 +- apps/www/app/examples/tasks/data/data.tsx | 34 ++-- apps/www/app/page.tsx | 4 +- apps/www/components/callout.tsx | 1 - apps/www/components/command-menu.tsx | 18 +- apps/www/components/component-preview.tsx | 4 +- apps/www/components/copy-button.tsx | 20 +-- apps/www/components/examples-nav.tsx | 4 +- apps/www/components/icons.tsx | 100 ++++------- apps/www/components/mobile-nav.tsx | 4 +- apps/www/components/mode-toggle.tsx | 15 +- apps/www/components/pager.tsx | 6 +- apps/www/package.json | 3 +- pnpm-lock.yaml | 126 ++++++------- 50 files changed, 681 insertions(+), 709 deletions(-) delete mode 100644 apps/www/app/examples/cards/styles.css delete mode 100644 apps/www/app/examples/music/styles.css delete mode 100644 apps/www/app/examples/playground/components/icons.tsx delete mode 100644 apps/www/app/examples/playground/styles.css diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx index a7806347bc9..11443efd0cf 100644 --- a/apps/www/app/docs/[[...slug]]/page.tsx +++ b/apps/www/app/docs/[[...slug]]/page.tsx @@ -4,7 +4,7 @@ import { allDocs } from "contentlayer/generated" import "@/styles/mdx.css" import type { Metadata } from "next" import Link from "next/link" -import { ChevronRight } from "lucide-react" +import { ChevronRightIcon } from "@radix-ui/react-icons" import Balancer from "react-wrap-balancer" import { siteConfig } from "@/config/site" @@ -16,7 +16,6 @@ import { DocsPager } from "@/components/pager" import { DashboardTableOfContents } from "@/components/toc" import { badgeVariants } from "@/registry/new-york/ui/badge" import { ScrollArea } from "@/registry/new-york/ui/scroll-area" -import { Separator } from "@/registry/new-york/ui/separator" interface DocPageProps { params: { @@ -95,7 +94,7 @@ export default async function DocPage({ params }: DocPageProps) {
Docs
- +
{doc.title}
diff --git a/apps/www/app/examples/authentication/page.tsx b/apps/www/app/examples/authentication/page.tsx index 3207e14c6b0..b838f102b83 100644 --- a/apps/www/app/examples/authentication/page.tsx +++ b/apps/www/app/examples/authentication/page.tsx @@ -1,7 +1,6 @@ import { Metadata } from "next" import Image from "next/image" import Link from "next/link" -import { Command } from "lucide-react" import { cn } from "@/lib/utils" import { buttonVariants } from "@/registry/new-york/ui/button" @@ -44,7 +43,19 @@ export default function AuthenticationPage() {
- Acme Inc + + + + Acme Inc
diff --git a/apps/www/app/examples/cards/components/github-card.tsx b/apps/www/app/examples/cards/components/github-card.tsx index b8f464fa953..cc9fc668f47 100644 --- a/apps/www/app/examples/cards/components/github-card.tsx +++ b/apps/www/app/examples/cards/components/github-card.tsx @@ -1,4 +1,9 @@ -import { ChevronDown, Circle, Plus, Star } from "lucide-react" +import { + ChevronDownIcon, + CircleIcon, + PlusIcon, + StarIcon, +} from "@radix-ui/react-icons" import { Button } from "@/registry/new-york/ui/button" import { @@ -31,15 +36,15 @@ export function DemoGithub() {
- - Inspiration - Create List + Create List @@ -66,11 +71,11 @@ export function DemoGithub() {
- + TypeScript
- + 20k
Updated April 2023
diff --git a/apps/www/app/examples/cards/components/notifications.tsx b/apps/www/app/examples/cards/components/notifications.tsx index c2204c06942..c0a2cec57cb 100644 --- a/apps/www/app/examples/cards/components/notifications.tsx +++ b/apps/www/app/examples/cards/components/notifications.tsx @@ -1,4 +1,4 @@ -import { AtSign, Bell, BellOff } from "lucide-react" +import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons" import { Card, @@ -19,7 +19,7 @@ export function DemoNotifications() {
- +

Everything

@@ -28,7 +28,7 @@ export function DemoNotifications() {

- +

Available

@@ -37,7 +37,7 @@ export function DemoNotifications() {

- +

Ignoring

diff --git a/apps/www/app/examples/cards/components/payment-method.tsx b/apps/www/app/examples/cards/components/payment-method.tsx index 1a2522234ee..08f7420c939 100644 --- a/apps/www/app/examples/cards/components/payment-method.tsx +++ b/apps/www/app/examples/cards/components/payment-method.tsx @@ -1,5 +1,3 @@ -import { CreditCard } from "lucide-react" - import { Icons } from "@/components/icons" import { Button } from "@/registry/new-york/ui/button" import { @@ -37,7 +35,19 @@ export function DemoPaymentMethod() { className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary" > - + + + + Card

Set the font you want to use in the dashboard. diff --git a/apps/www/app/examples/forms/notifications/page.tsx b/apps/www/app/examples/forms/notifications/page.tsx index 7def678c724..4e0c2547f12 100644 --- a/apps/www/app/examples/forms/notifications/page.tsx +++ b/apps/www/app/examples/forms/notifications/page.tsx @@ -1,5 +1,4 @@ import { Separator } from "@/registry/new-york/ui/separator" -import { AccountForm } from "@/app/examples/forms/account/account-form" import { NotificationsForm } from "@/app/examples/forms/notifications/notifications-form" export default function SettingsNotificationsPage() { diff --git a/apps/www/app/examples/layout.tsx b/apps/www/app/examples/layout.tsx index ff0db742395..2a2a672e4c0 100644 --- a/apps/www/app/examples/layout.tsx +++ b/apps/www/app/examples/layout.tsx @@ -1,6 +1,6 @@ import { Metadata } from "next" import Link from "next/link" -import { ChevronRight } from "lucide-react" +import { ArrowRightIcon } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" import { ExamplesNav } from "@/components/examples-nav" @@ -35,7 +35,7 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) { Introducing Style, a new CLI and more. - + Check out some examples. diff --git a/apps/www/app/examples/music/components/album-artwork.tsx b/apps/www/app/examples/music/components/album-artwork.tsx index ae9529dfc59..a226c83bcc5 100644 --- a/apps/www/app/examples/music/components/album-artwork.tsx +++ b/apps/www/app/examples/music/components/album-artwork.tsx @@ -1,8 +1,7 @@ import Image from "next/image" -import { ListMusic, PlusCircle } from "lucide-react" +import { PlusCircledIcon } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" -import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio" import { ContextMenu, ContextMenuContent, @@ -55,13 +54,25 @@ export function AlbumArtwork({ Add to Playlist - + New Playlist {playlists.map((playlist) => ( - {playlist} + + + + {playlist} ))} diff --git a/apps/www/app/examples/music/components/menu.tsx b/apps/www/app/examples/music/components/menu.tsx index 46b9576df96..b85f16f9662 100644 --- a/apps/www/app/examples/music/components/menu.tsx +++ b/apps/www/app/examples/music/components/menu.tsx @@ -1,5 +1,3 @@ -import { Globe, Mic } from "lucide-react" - import { Menubar, MenubarCheckboxItem, @@ -130,13 +128,37 @@ export function Menu() { Smart Dictation...{" "} - + + + + Emoji & Symbols{" "} - + + + + diff --git a/apps/www/app/examples/music/components/podcast-empty-placeholder.tsx b/apps/www/app/examples/music/components/podcast-empty-placeholder.tsx index 0445d9e446e..d160cc4a95d 100644 --- a/apps/www/app/examples/music/components/podcast-empty-placeholder.tsx +++ b/apps/www/app/examples/music/components/podcast-empty-placeholder.tsx @@ -1,5 +1,3 @@ -import { Plus, Podcast } from "lucide-react" - import { Button } from "@/registry/new-york/ui/button" import { Dialog, @@ -17,7 +15,21 @@ export function PodcastEmptyPlaceholder() { return (
- + + + + + +

No episodes added

You have not added any podcasts. Add one below. @@ -25,7 +37,6 @@ export function PodcastEmptyPlaceholder() {

diff --git a/apps/www/app/examples/music/components/sidebar.tsx b/apps/www/app/examples/music/components/sidebar.tsx index bf71200972e..9d197309b41 100644 --- a/apps/www/app/examples/music/components/sidebar.tsx +++ b/apps/www/app/examples/music/components/sidebar.tsx @@ -1,15 +1,3 @@ -import { - LayoutGrid, - Library, - ListMusic, - Mic2, - Music, - Music2, - PlayCircle, - Radio, - User, -} from "lucide-react" - import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" import { ScrollArea } from "@/registry/new-york/ui/scroll-area" @@ -30,15 +18,56 @@ export function Sidebar({ className, playlists }: SidebarProps) {
@@ -49,23 +78,88 @@ export function Sidebar({ className, playlists }: SidebarProps) {
@@ -82,7 +176,22 @@ export function Sidebar({ className, playlists }: SidebarProps) { variant="ghost" className="w-full justify-start font-normal" > - + + + + + + + {playlist} ))} diff --git a/apps/www/app/examples/music/page.tsx b/apps/www/app/examples/music/page.tsx index 6bd227ae8ce..40960c6b180 100644 --- a/apps/www/app/examples/music/page.tsx +++ b/apps/www/app/examples/music/page.tsx @@ -1,5 +1,8 @@ import { Metadata } from "next" +import Image from "next/image" +import { PlusCircledIcon } from "@radix-ui/react-icons" +import { Button } from "@/registry/new-york/ui/button" import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" import { Separator } from "@/registry/new-york/ui/separator" import { @@ -15,11 +18,6 @@ import { PodcastEmptyPlaceholder } from "./components/podcast-empty-placeholder" import { Sidebar } from "./components/sidebar" import { listenNowAlbums, madeForYouAlbums } from "./data/albums" import { playlists } from "./data/playlists" -import "./styles.css" -import Image from "next/image" -import { PlusCircle } from "lucide-react" - -import { Button } from "@/registry/new-york/ui/button" export const metadata: Metadata = { title: "Music App", @@ -66,7 +64,7 @@ export default function MusicPage() {
diff --git a/apps/www/app/examples/music/styles.css b/apps/www/app/examples/music/styles.css deleted file mode 100644 index c6ce384e5df..00000000000 --- a/apps/www/app/examples/music/styles.css +++ /dev/null @@ -1,65 +0,0 @@ -[data-section="music"] { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 243 5% 96%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 349 89% 60%; - --primary-foreground: 0 0% 100%; - - --secondary: 243 11% 4%; - --secondary-foreground: 0 0% 98%; - - --accent: 243 11% 4%; - --accent-foreground: 0 0% 100%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 349 89% 60%; - - --radius: 0.5rem; -} - -.dark [data-section="music"] { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 349 89% 60%; - --primary-foreground: 0 0% 100%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 0.5rem; -} diff --git a/apps/www/app/examples/playground/components/icons.tsx b/apps/www/app/examples/playground/components/icons.tsx deleted file mode 100644 index 537f6854be9..00000000000 --- a/apps/www/app/examples/playground/components/icons.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { - AlertTriangle, - ArrowRight, - Check, - ChevronLeft, - ChevronRight, - ClipboardCheck, - Copy, - CreditCard, - Fingerprint, - HelpCircle, - Laptop, - Loader2, - LucideProps, - Moon, - MoreVertical, - Plus, - Settings, - SunMedium, - Trash, - Twitter, - User, - X, - type Icon as LucideIcon, -} from "lucide-react" - -export type Icon = LucideIcon - -export const Icons = { - logo: Fingerprint, - close: X, - spinner: Loader2, - chevronLeft: ChevronLeft, - chevronRight: ChevronRight, - trash: Trash, - settings: Settings, - billing: CreditCard, - ellipsis: MoreVertical, - add: Plus, - warning: AlertTriangle, - user: User, - arrowRight: ArrowRight, - help: HelpCircle, - twitter: Twitter, - check: Check, - copy: Copy, - copyDone: ClipboardCheck, - sun: SunMedium, - moon: Moon, - laptop: Laptop, - gitHub: (props: LucideProps) => ( - - - - ), - completeMode: ({ ...props }: LucideProps) => ( - - - - - - - - - - ), - insertMode: ({ ...props }: LucideProps) => ( - - - - - - - ), - editMode: ({ ...props }: LucideProps) => ( - - - - - - - - - ), -} diff --git a/apps/www/app/examples/playground/components/model-selector.tsx b/apps/www/app/examples/playground/components/model-selector.tsx index 2f09bb84ac9..6eefef49459 100644 --- a/apps/www/app/examples/playground/components/model-selector.tsx +++ b/apps/www/app/examples/playground/components/model-selector.tsx @@ -1,8 +1,8 @@ "use client" import * as React from "react" +import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" import { PopoverProps } from "@radix-ui/react-popover" -import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { useMutationObserver } from "@/hooks/use-mutation-observer" @@ -64,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) { className="w-full justify-between" > {selectedModel ? selectedModel.name : "Select a model..."} - + @@ -152,7 +152,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) { className="aria-selected:bg-primary aria-selected:text-primary-foreground" > {model.name} - setIsOpen(true)}> - Content filter preferences @@ -55,7 +54,6 @@ export function PresetActions() { onSelect={() => setShowDeleteDialog(true)} className="text-red-600" > - Delete preset diff --git a/apps/www/app/examples/playground/components/preset-selector.tsx b/apps/www/app/examples/playground/components/preset-selector.tsx index fa7d796f8ee..e8d6595df48 100644 --- a/apps/www/app/examples/playground/components/preset-selector.tsx +++ b/apps/www/app/examples/playground/components/preset-selector.tsx @@ -2,8 +2,8 @@ import * as React from "react" import { useRouter } from "next/navigation" +import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" import { PopoverProps } from "@radix-ui/react-popover" -import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -42,7 +42,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) { className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]" > {selectedPreset ? selectedPreset.name : "Load a preset..."} - + @@ -59,7 +59,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) { }} > {preset.name} -
diff --git a/apps/www/app/examples/playground/page.tsx b/apps/www/app/examples/playground/page.tsx index 57071e54c4c..0ab59665ae5 100644 --- a/apps/www/app/examples/playground/page.tsx +++ b/apps/www/app/examples/playground/page.tsx @@ -1,5 +1,6 @@ import { Metadata } from "next" -import { History } from "lucide-react" +import Image from "next/image" +import { CounterClockwiseClockIcon } from "@radix-ui/react-icons" import { Button } from "@/registry/new-york/ui/button" import { @@ -18,7 +19,6 @@ import { import { Textarea } from "@/registry/new-york/ui/textarea" import { CodeViewer } from "./components/code-viewer" -import { Icons } from "./components/icons" import { MaxLengthSelector } from "./components/maxlength-selector" import { ModelSelector } from "./components/model-selector" import { PresetActions } from "./components/preset-actions" @@ -29,8 +29,6 @@ import { TemperatureSelector } from "./components/temperature-selector" import { TopPSelector } from "./components/top-p-selector" import { models, types } from "./data/models" import { presets } from "./data/presets" -import "./styles.css" -import Image from "next/image" export const metadata: Metadata = { title: "Playground", @@ -91,15 +89,163 @@ export default function PlaygroundPage() { Complete - + + + + + + + + + Insert - + + + + + + Edit - + + + + + + + +
@@ -119,7 +265,7 @@ export default function PlaygroundPage() {
@@ -137,7 +283,7 @@ export default function PlaygroundPage() {
@@ -168,7 +314,7 @@ export default function PlaygroundPage() {
diff --git a/apps/www/app/examples/playground/styles.css b/apps/www/app/examples/playground/styles.css deleted file mode 100644 index 282038de98f..00000000000 --- a/apps/www/app/examples/playground/styles.css +++ /dev/null @@ -1,65 +0,0 @@ -[data-section="playground"] { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 154 79% 96%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --primary: 143 72% 29%; - --primary-foreground: 141 75% 97%; - - --secondary: 145 80% 10%; - --secondary-foreground: 141 75% 97%; - - --accent: 154 79% 96%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 158 64% 52%; - - --radius: 0rem; -} - -.dark [data-section="playground"] { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --primary: 143 72% 29%; - --primary-foreground: 141 75% 97%; - - --secondary: 145 80% 10%; - --secondary-foreground: 141 75% 97%; - - --accent: 154 79% 96%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 158 64% 52%; - - --radius: 0rem; -} diff --git a/apps/www/app/examples/tasks/components/data-table-column-header.tsx b/apps/www/app/examples/tasks/components/data-table-column-header.tsx index 2437da4af2d..7df71bb4a12 100644 --- a/apps/www/app/examples/tasks/components/data-table-column-header.tsx +++ b/apps/www/app/examples/tasks/components/data-table-column-header.tsx @@ -1,5 +1,10 @@ +import { + ArrowDownIcon, + ArrowUpIcon, + CaretSortIcon, + EyeNoneIcon, +} from "@radix-ui/react-icons" import { Column } from "@tanstack/react-table" -import { ChevronsUpDown, EyeOff, SortAsc, SortDesc } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -37,26 +42,26 @@ export function DataTableColumnHeader({ > {title} {column.getIsSorted() === "desc" ? ( - + ) : column.getIsSorted() === "asc" ? ( - + ) : ( - + )} column.toggleSorting(false)}> - + Asc column.toggleSorting(true)}> - + Desc column.toggleVisibility(false)}> - + Hide diff --git a/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx index 2d1707a8148..105ca00497c 100644 --- a/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx +++ b/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx @@ -1,6 +1,6 @@ import * as React from "react" +import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons" import { Column } from "@tanstack/react-table" -import { Check, LucideIcon, PlusCircle } from "lucide-react" import { cn } from "@/lib/utils" import { Badge } from "@/registry/new-york/ui/badge" @@ -27,7 +27,7 @@ interface DataTableFacetedFilter { options: { label: string value: string - icon?: LucideIcon + icon?: React.ComponentType<{ className?: string }> }[] } @@ -43,7 +43,7 @@ export function DataTableFacetedFilter({ diff --git a/apps/www/app/examples/tasks/components/data-table-row-actions.tsx b/apps/www/app/examples/tasks/components/data-table-row-actions.tsx index dd8517781b4..2dfa8cd2069 100644 --- a/apps/www/app/examples/tasks/components/data-table-row-actions.tsx +++ b/apps/www/app/examples/tasks/components/data-table-row-actions.tsx @@ -1,7 +1,7 @@ "use client" +import { DotsHorizontalIcon } from "@radix-ui/react-icons" import { Row } from "@tanstack/react-table" -import { Copy, MoreHorizontal, Pen, Star, Tags, Trash } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -37,29 +37,17 @@ export function DataTableRowActions({ variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" > - + Open menu - - - Edit - - - - Make a copy - - - - Favorite - + Edit + Make a copy + Favorite - - - Labels - + Labels {labels.map((label) => ( @@ -72,7 +60,6 @@ export function DataTableRowActions({ - Delete ⌘⌫ diff --git a/apps/www/app/examples/tasks/components/data-table-toolbar.tsx b/apps/www/app/examples/tasks/components/data-table-toolbar.tsx index 4f3fc61e9d8..b396f6c0018 100644 --- a/apps/www/app/examples/tasks/components/data-table-toolbar.tsx +++ b/apps/www/app/examples/tasks/components/data-table-toolbar.tsx @@ -1,7 +1,7 @@ "use client" +import { Cross2Icon } from "@radix-ui/react-icons" import { Table } from "@tanstack/react-table" -import { X } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { Input } from "@/registry/new-york/ui/input" @@ -51,7 +51,7 @@ export function DataTableToolbar({ className="h-8 px-2 lg:px-3" > Reset - + )} diff --git a/apps/www/app/examples/tasks/components/data-table-view-options.tsx b/apps/www/app/examples/tasks/components/data-table-view-options.tsx index c9f2c9988c2..270bd8edf16 100644 --- a/apps/www/app/examples/tasks/components/data-table-view-options.tsx +++ b/apps/www/app/examples/tasks/components/data-table-view-options.tsx @@ -1,8 +1,8 @@ "use client" import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu" +import { MixerHorizontalIcon } from "@radix-ui/react-icons" import { Table } from "@tanstack/react-table" -import { SlidersHorizontal } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -28,7 +28,7 @@ export function DataTableViewOptions({ size="sm" className="ml-auto hidden h-8 lg:flex" > - + View diff --git a/apps/www/app/examples/tasks/components/user-nav.tsx b/apps/www/app/examples/tasks/components/user-nav.tsx index edfa2dec9fe..3d64ca71e88 100644 --- a/apps/www/app/examples/tasks/components/user-nav.tsx +++ b/apps/www/app/examples/tasks/components/user-nav.tsx @@ -1,5 +1,3 @@ -import { CreditCard, LogOut, PlusCircle, Settings, User } from "lucide-react" - import { Avatar, AvatarFallback, @@ -40,29 +38,22 @@ export function UserNav() { - - Profile + Profile ⇧⌘P - - Billing + Billing ⌘B - - Settings + Settings ⌘S - - - New Team - + New Team - - Log out + Log out ⇧⌘Q diff --git a/apps/www/app/examples/tasks/data/data.tsx b/apps/www/app/examples/tasks/data/data.tsx index 1d1e7684454..a507982f623 100644 --- a/apps/www/app/examples/tasks/data/data.tsx +++ b/apps/www/app/examples/tasks/data/data.tsx @@ -1,13 +1,13 @@ import { - ArrowDownToLine, - ArrowRightToLine, - ArrowUpCircle, - ArrowUpToLine, - CheckCircle2, - Circle, - HelpCircle, - XCircle, -} from "lucide-react" + ArrowDownIcon, + ArrowRightIcon, + ArrowUpIcon, + CheckCircledIcon, + CircleIcon, + CrossCircledIcon, + QuestionMarkCircledIcon, + StopwatchIcon, +} from "@radix-ui/react-icons" export const labels = [ { @@ -28,27 +28,27 @@ export const statuses = [ { value: "backlog", label: "Backlog", - icon: HelpCircle, + icon: QuestionMarkCircledIcon, }, { value: "todo", label: "Todo", - icon: Circle, + icon: CircleIcon, }, { value: "in progress", label: "In Progress", - icon: ArrowUpCircle, + icon: StopwatchIcon, }, { value: "done", label: "Done", - icon: CheckCircle2, + icon: CheckCircledIcon, }, { value: "canceled", label: "Canceled", - icon: XCircle, + icon: CrossCircledIcon, }, ] @@ -56,16 +56,16 @@ export const priorities = [ { label: "Low", value: "low", - icon: ArrowDownToLine, + icon: ArrowDownIcon, }, { label: "Medium", value: "medium", - icon: ArrowRightToLine, + icon: ArrowRightIcon, }, { label: "High", value: "high", - icon: ArrowUpToLine, + icon: ArrowUpIcon, }, ] diff --git a/apps/www/app/page.tsx b/apps/www/app/page.tsx index ced96c87586..8670b4f1685 100644 --- a/apps/www/app/page.tsx +++ b/apps/www/app/page.tsx @@ -1,6 +1,6 @@ import Image from "next/image" import Link from "next/link" -import { ChevronRight } from "lucide-react" +import { ArrowRightIcon } from "@radix-ui/react-icons" import { siteConfig } from "@/config/site" import { cn } from "@/lib/utils" @@ -28,7 +28,7 @@ export default function IndexPage() { Introducing Style, a new CLI and more. - + Build your component library. diff --git a/apps/www/components/callout.tsx b/apps/www/components/callout.tsx index 6c07ffa1583..848d8717b21 100644 --- a/apps/www/components/callout.tsx +++ b/apps/www/components/callout.tsx @@ -1,4 +1,3 @@ -import { cn } from "@/lib/utils" import { Alert, AlertDescription, diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx index 41c6aecb48c..1dd9af19406 100644 --- a/apps/www/components/command-menu.tsx +++ b/apps/www/components/command-menu.tsx @@ -3,7 +3,13 @@ import * as React from "react" import { useRouter } from "next/navigation" import { DialogProps } from "@radix-ui/react-alert-dialog" -import { Circle, File, Laptop, Moon, SunMedium } from "lucide-react" +import { + CircleIcon, + FileIcon, + LaptopIcon, + MoonIcon, + SunIcon, +} from "@radix-ui/react-icons" import { useTheme } from "next-themes" import { docsConfig } from "@/config/docs" @@ -72,7 +78,7 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => router.push(navItem.href as string)) }} > - + {navItem.title} ))} @@ -88,7 +94,7 @@ export function CommandMenu({ ...props }: DialogProps) { }} >
- +
{navItem.title} @@ -98,15 +104,15 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => setTheme("light"))}> - + Light runCommand(() => setTheme("dark"))}> - + Dark runCommand(() => setTheme("system"))}> - + System diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx index a1c5bd6c8b6..6efa2216b0b 100644 --- a/apps/www/components/component-preview.tsx +++ b/apps/www/components/component-preview.tsx @@ -2,11 +2,11 @@ import * as React from "react" import { Index } from "@/__registry__" -import { Loader2 } from "lucide-react" import { cn } from "@/lib/utils" import { useConfig } from "@/hooks/use-config" import { CopyButton, CopyWithClassNames } from "@/components/copy-button" +import { Icons } from "@/components/icons" import { StyleSwitcher } from "@/components/style-switcher" import { ThemeWrapper } from "@/components/theme-wrapper" import { @@ -116,7 +116,7 @@ export function ComponentPreview({ - + Loading... } diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx index 97489753d60..97a0e87a013 100644 --- a/apps/www/components/copy-button.tsx +++ b/apps/www/components/copy-button.tsx @@ -2,11 +2,11 @@ import * as React from "react" import { DropdownMenuTriggerProps } from "@radix-ui/react-dropdown-menu" +import { CheckIcon, CopyIcon } from "@radix-ui/react-icons" import { NpmCommands } from "types/unist" import { Event, trackEvent } from "@/lib/events" import { cn } from "@/lib/utils" -import { Icons } from "@/components/icons" import { Button } from "@/registry/new-york/ui/button" import { DropdownMenu, @@ -69,9 +69,9 @@ export function CopyButton({ > Copy {hasCopied ? ( - + ) : ( - + )} ) @@ -114,21 +114,19 @@ export function CopyWithClassNames({ )} > {hasCopied ? ( - + ) : ( - + )} Copy copyToClipboard(value)}> - - Component + Component copyToClipboard(classNames)}> - - Classname + Classname @@ -178,9 +176,9 @@ export function CopyNpmCommandButton({ )} > {hasCopied ? ( - + ) : ( - + )} Copy diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx index 636eeec3bbd..4cd2521f35e 100644 --- a/apps/www/components/examples-nav.tsx +++ b/apps/www/components/examples-nav.tsx @@ -2,7 +2,7 @@ import Link from "next/link" import { usePathname } from "next/navigation" -import { ArrowRight } from "lucide-react" +import { ArrowRightIcon } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" @@ -97,7 +97,7 @@ export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) { className="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex" > View code - + ) } diff --git a/apps/www/components/icons.tsx b/apps/www/components/icons.tsx index 5f14a60d3f4..58f873d7bec 100644 --- a/apps/www/components/icons.tsx +++ b/apps/www/components/icons.tsx @@ -1,36 +1,7 @@ -import { - AlertTriangle, - ArrowRight, - Check, - ChevronLeft, - ChevronRight, - ClipboardCheck, - Copy, - CreditCard, - File, - FileText, - HelpCircle, - Image, - Laptop, - Loader2, - LucideProps, - Moon, - MoreVertical, - Pizza, - Plus, - Settings, - SunMedium, - Trash, - Twitter, - User, - X, - type Icon as LucideIcon, -} from "lucide-react" - -export type Icon = LucideIcon +type IconProps = React.HTMLAttributes export const Icons = { - logo: (props: LucideProps) => ( + logo: (props: IconProps) => ( ), - close: X, - spinner: Loader2, - chevronLeft: ChevronLeft, - chevronRight: ChevronRight, - trash: Trash, - post: FileText, - page: File, - media: Image, - settings: Settings, - billing: CreditCard, - ellipsis: MoreVertical, - add: Plus, - warning: AlertTriangle, - user: User, - arrowRight: ArrowRight, - help: HelpCircle, - pizza: Pizza, - twitter: Twitter, - check: Check, - copy: Copy, - copyDone: ClipboardCheck, - sun: SunMedium, - moon: Moon, - laptop: Laptop, - gitHub: (props: LucideProps) => ( + twitter: (props: IconProps) => ( + + + + ), + gitHub: (props: IconProps) => ( ), - radix: (props: LucideProps) => ( + radix: (props: IconProps) => ( ), - aria: (props: LucideProps) => ( + aria: (props: IconProps) => ( ), - npm: (props: LucideProps) => ( + npm: (props: IconProps) => ( ), - yarn: (props: LucideProps) => ( + yarn: (props: IconProps) => ( ), - pnpm: (props: LucideProps) => ( + pnpm: (props: IconProps) => ( ), - react: (props: LucideProps) => ( + react: (props: IconProps) => ( ), - tailwind: (props: LucideProps) => ( + tailwind: (props: IconProps) => ( ), - google: (props: LucideProps) => ( + google: (props: IconProps) => ( ), - apple: (props: LucideProps) => ( + apple: (props: IconProps) => ( ), - paypal: (props: LucideProps) => ( + paypal: (props: IconProps) => ( ), + spinner: (props: IconProps) => ( + + + + ), } diff --git a/apps/www/components/mobile-nav.tsx b/apps/www/components/mobile-nav.tsx index 96c9657d150..b2e24f5a3d2 100644 --- a/apps/www/components/mobile-nav.tsx +++ b/apps/www/components/mobile-nav.tsx @@ -3,7 +3,7 @@ import * as React from "react" import Link, { LinkProps } from "next/link" import { useRouter } from "next/navigation" -import { SidebarOpen } from "lucide-react" +import { ViewVerticalIcon } from "@radix-ui/react-icons" import { docsConfig } from "@/config/docs" import { siteConfig } from "@/config/site" @@ -23,7 +23,7 @@ export function MobileNav() { variant="ghost" className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden" > - + Toggle Menu diff --git a/apps/www/components/mode-toggle.tsx b/apps/www/components/mode-toggle.tsx index 25bbbb8ec62..fbbee37417e 100644 --- a/apps/www/components/mode-toggle.tsx +++ b/apps/www/components/mode-toggle.tsx @@ -1,9 +1,9 @@ "use client" import * as React from "react" +import { MoonIcon, SunIcon } from "@radix-ui/react-icons" import { useTheme } from "next-themes" -import { Icons } from "@/components/icons" import { Button } from "@/registry/new-york/ui/button" import { DropdownMenu, @@ -19,23 +19,20 @@ export function ModeToggle() { setTheme("light")}> - - Light + Light setTheme("dark")}> - - Dark + Dark setTheme("system")}> - - System + System diff --git a/apps/www/components/pager.tsx b/apps/www/components/pager.tsx index 8904a3473fb..ec9e37c1b02 100644 --- a/apps/www/components/pager.tsx +++ b/apps/www/components/pager.tsx @@ -1,10 +1,10 @@ import Link from "next/link" +import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" import { Doc } from "contentlayer/generated" import { NavItem, NavItemWithChildren } from "types/nav" import { docsConfig } from "@/config/docs" import { cn } from "@/lib/utils" -import { Icons } from "@/components/icons" import { buttonVariants } from "@/registry/new-york/ui/button" interface DocsPagerProps { @@ -25,7 +25,7 @@ export function DocsPager({ doc }: DocsPagerProps) { href={pager.prev.href} className={buttonVariants({ variant: "outline" })} > - + {pager.prev.title} )} @@ -35,7 +35,7 @@ export function DocsPager({ doc }: DocsPagerProps) { className={cn(buttonVariants({ variant: "outline" }), "ml-auto")} > {pager.next.title} - + )} diff --git a/apps/www/package.json b/apps/www/package.json index dee32ae792d..5b5b3ff9e68 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -58,7 +58,8 @@ "jotai": "^2.1.0", "lodash.template": "^4.5.0", "lucide-react": "0.214.0", - "next": "13.4.8-canary.13", + "markdown-wasm": "^1.2.0", + "next": "13.4.8", "next-contentlayer": "0.3.4", "next-themes": "^0.2.1", "react": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd1e39ea028..3755a62547c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -217,7 +217,7 @@ importers: version: 0.2.0(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) contentlayer: specifier: 0.3.4 - version: 0.3.4(esbuild@0.17.19) + version: 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) date-fns: specifier: ^2.30.0 version: 2.30.0 @@ -230,15 +230,18 @@ importers: lucide-react: specifier: 0.214.0 version: 0.214.0(react@18.2.0) + markdown-wasm: + specifier: ^1.2.0 + version: 1.2.0 next: - specifier: 13.4.8-canary.13 - version: 13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + specifier: 13.4.8 + version: 13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) next-contentlayer: specifier: 0.3.4 - version: 0.3.4(contentlayer@0.3.4)(esbuild@0.17.19)(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0) + version: 0.3.4(contentlayer@0.3.4)(esbuild@0.17.19)(markdown-wasm@1.2.0)(next@13.4.8)(react-dom@18.2.0)(react@18.2.0) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0) + version: 0.2.1(next@13.4.8)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1052,10 +1055,10 @@ packages: chalk: 4.1.2 dev: false - /@contentlayer/cli@0.3.4(esbuild@0.17.19): + /@contentlayer/cli@0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0): resolution: {integrity: sha512-vNDwgLuhYNu+m70NZ3XK9kexKNguuxPXg7Yvzj3B34cEilQjjzSrcTY/i+AIQm9V7uT5GGshx9ukzPf+SmoszQ==} dependencies: - '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) '@contentlayer/utils': 0.3.4 clipanion: 3.2.1(typanion@3.12.1) typanion: 3.12.1 @@ -1066,10 +1069,10 @@ packages: - supports-color dev: false - /@contentlayer/client@0.3.4(esbuild@0.17.19): + /@contentlayer/client@0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0): resolution: {integrity: sha512-QSlLyc3y4PtdC5lFw0L4wTZUH8BQnv2nk37hNCsPAqGf+dRO7TLAzdc+2/mVIRgK+vSH+pSOzjLsQpFxxXRTZA==} dependencies: - '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) transitivePeerDependencies: - '@effect-ts/otel-node' - esbuild @@ -1077,7 +1080,7 @@ packages: - supports-color dev: false - /@contentlayer/core@0.3.4(esbuild@0.17.19): + /@contentlayer/core@0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0): resolution: {integrity: sha512-o68oBLwfYZ+2vtgfk1lgHxOl3LoxvRNiUfeQ8IWFWy/L4wnIkKIqLZX01zlRE5IzYM+ZMMN5V0cKQlO7DsyR9g==} peerDependencies: esbuild: 0.17.x || 0.18.x @@ -1093,6 +1096,7 @@ packages: comment-json: 4.2.3 esbuild: 0.17.19 gray-matter: 4.0.3 + markdown-wasm: 1.2.0 mdx-bundler: 9.2.1(esbuild@0.17.19) rehype-stringify: 9.0.3 remark-frontmatter: 4.0.1 @@ -1106,10 +1110,10 @@ packages: - supports-color dev: false - /@contentlayer/source-files@0.3.4(esbuild@0.17.19): + /@contentlayer/source-files@0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0): resolution: {integrity: sha512-4njyn0OFPu7WY4tAjMxiJgWOKeiHuBOGdQ36EYE03iij/pPPRbiWbL+cmLccYXUFEW58mDwpqROZZm6pnxjRDQ==} dependencies: - '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) '@contentlayer/utils': 0.3.4 chokidar: 3.5.3 fast-glob: 3.2.12 @@ -1127,11 +1131,11 @@ packages: - supports-color dev: false - /@contentlayer/source-remote-files@0.3.4(esbuild@0.17.19): + /@contentlayer/source-remote-files@0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0): resolution: {integrity: sha512-cyiv4sNUySZvR0uAKlM+kSAELzNd2h2QT1R2e41dRKbwOUVxeLfmGiLugr0aVac6Q3xYcD99dbHyR1xWPV+w9w==} dependencies: - '@contentlayer/core': 0.3.4(esbuild@0.17.19) - '@contentlayer/source-files': 0.3.4(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) + '@contentlayer/source-files': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) '@contentlayer/utils': 0.3.4 transitivePeerDependencies: - '@effect-ts/otel-node' @@ -1711,8 +1715,8 @@ packages: resolution: {integrity: sha512-q/y7VZj/9YpgzDe64Zi6rY1xPizx80JjlU2BTevlajtaE3w1LqweH1gGgxou2N7hdFosXHjGrI4OUvtFXXhGLg==} dev: false - /@next/env@13.4.8-canary.13: - resolution: {integrity: sha512-udCBFvXLUnm5C0MdMW3K7swu8TXPE/utgHh4gjLT42gm0rSdML5BYMmeSP4WGkYfifP26FQTGnKiU9YYQOwBeg==} + /@next/env@13.4.8: + resolution: {integrity: sha512-twuSf1klb3k9wXI7IZhbZGtFCWvGD4wXTY2rmvzIgVhXhs7ISThrbNyutBx3jWIL8Y/Hk9+woytFz5QsgtcRKQ==} dev: false /@next/eslint-plugin-next@13.0.0: @@ -1736,8 +1740,8 @@ packages: dev: false optional: true - /@next/swc-darwin-arm64@13.4.8-canary.13: - resolution: {integrity: sha512-bGKzCa8UBfpigSnND3GNiswJO7JZqBh/1m3FLLQJzTMOsdWwKcIbk3QP3Xk10cgHP4qLe3W+BikaOjdOZO0NRQ==} + /@next/swc-darwin-arm64@13.4.8: + resolution: {integrity: sha512-MSFplVM4dTWOuKAUv0XR9gY7AWtMSBu9os9f+kp+s5rWhM1I2CdR3obFttd6366nS/W/VZxbPM5oEIdlIa46zA==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -1754,8 +1758,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@13.4.8-canary.13: - resolution: {integrity: sha512-IvEqoqYR+DEHmjFOtSM7ne+go+9Lf11QwejdLi64VEt7QxJTQNak6AC8UBJDY+CiYbPy/y+sLBhjkf6BZE6g/w==} + /@next/swc-darwin-x64@13.4.8: + resolution: {integrity: sha512-Reox+UXgonon9P0WNDE6w85DGtyBqGitl/ryznOvn6TvfxEaZIpTgeu3ZrJLU9dHSMhiK7YAM793mE/Zii2/Qw==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -1772,8 +1776,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@13.4.8-canary.13: - resolution: {integrity: sha512-fVX4vrveaAqVgvmiWx5deza+KenrwKD4z+ckz9oTbIxjVcouV3u4ur7UUB8jR9Z6ZYN5X2tW95imA4SgzH0jWA==} + /@next/swc-linux-arm64-gnu@13.4.8: + resolution: {integrity: sha512-kdyzYvAYtqQVgzIKNN7e1rLU8aZv86FDSRqPlOkKZlvqudvTO0iohuTPmnEEDlECeBM6qRPShNffotDcU/R2KA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -1790,8 +1794,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@13.4.8-canary.13: - resolution: {integrity: sha512-qEfBWp3IsbC5+yKXmC5r1ZI2wT8G28u6plW6E5twR1CBnQud9bOc980E8WMZDnp3V5iTNB0UK0Ja8l/yw/9lwA==} + /@next/swc-linux-arm64-musl@13.4.8: + resolution: {integrity: sha512-oWxx4yRkUGcR81XwbI+T0zhZ3bDF6V1aVLpG+C7hSG50ULpV8gC39UxVO22/bv93ZlcfMY4zl8xkz9Klct6dpQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -1808,8 +1812,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@13.4.8-canary.13: - resolution: {integrity: sha512-qVst+PTEuySR8RJ246auKADnZVygK6EwnjRysCuRmuRCFFGWkqoZcqLY/wNmjqFNSOsXGUjIMoL2Ey3ZstQ5kw==} + /@next/swc-linux-x64-gnu@13.4.8: + resolution: {integrity: sha512-anhtvuO6eE9YRhYnaEGTfbpH3L5gT/9qPFcNoi6xS432r/4DAtpJY8kNktqkTVevVIC/pVumqO8tV59PR3zbNg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -1826,8 +1830,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@13.4.8-canary.13: - resolution: {integrity: sha512-ts7/ILlQCsVWlNfYhgElnXKmKDYkE91uHV7asbdkfLOUCUAFDdwMTBMHMM0lsCM6iBmj/gVfW3s5BUTdG/VlVQ==} + /@next/swc-linux-x64-musl@13.4.8: + resolution: {integrity: sha512-aR+J4wWfNgH1DwCCBNjan7Iumx0lLtn+2/rEYuhIrYLY4vnxqSVGz9u3fXcgUwo6Q9LT8NFkaqK1vPprdq+BXg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -1844,8 +1848,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@13.4.8-canary.13: - resolution: {integrity: sha512-X9zay3u/PwGvrEg8E6hLC5iNhOVf8ZTQ4BtovFwsoMg87/8bIptXKI2acLo+YTmCJiwdj1j0xJQAG50Zb5Hq/Q==} + /@next/swc-win32-arm64-msvc@13.4.8: + resolution: {integrity: sha512-OWBKIrJwQBTqrat0xhxEB/jcsjJR3+diD9nc/Y8F1mRdQzsn4bPsomgJyuqPVZs6Lz3K18qdIkvywmfSq75SsQ==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -1862,8 +1866,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@13.4.8-canary.13: - resolution: {integrity: sha512-qmsWtLaFJIUHqBe3S3wg+DBbwFmvGe2kWJP/Ij7zr5Rv/6IxIPy7WLfBnxzlEUEUC58sy+dvCfdkj+jLOfqKTQ==} + /@next/swc-win32-ia32-msvc@13.4.8: + resolution: {integrity: sha512-agiPWGjUndXGTOn4ChbKipQXRA6/UPkywAWIkx7BhgGv48TiJfHTK6MGfBoL9tS6B4mtW39++uy0wFPnfD0JWg==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -1880,8 +1884,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@13.4.8-canary.13: - resolution: {integrity: sha512-WkVbvoDgpRR0x40Yrxhvv94ZgDPxfi7bVGkY+BbugWrJK2VRePyD6Tjuo6dfm7iDBMABqDOmwixpOxxzpLSbHA==} + /@next/swc-win32-x64-msvc@13.4.8: + resolution: {integrity: sha512-UIRKoByVKbuR6SnFG4JM8EMFlJrfEGuUQ1ihxzEleWcNwRMMiVaCj1KyqfTOW8VTQhJ0u8P1Ngg6q1RwnIBTtw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -4668,17 +4672,17 @@ packages: yargs: 17.7.2 dev: false - /contentlayer@0.3.4(esbuild@0.17.19): + /contentlayer@0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0): resolution: {integrity: sha512-FYDdTUFaN4yqep0waswrhcXjmMJnPD5iXDTtxcUCGdklfuIrXM2xLx51xl748cHmGA6IsC+27YZFxU6Ym13QIA==} engines: {node: '>=14.18'} hasBin: true requiresBuild: true dependencies: - '@contentlayer/cli': 0.3.4(esbuild@0.17.19) - '@contentlayer/client': 0.3.4(esbuild@0.17.19) - '@contentlayer/core': 0.3.4(esbuild@0.17.19) - '@contentlayer/source-files': 0.3.4(esbuild@0.17.19) - '@contentlayer/source-remote-files': 0.3.4(esbuild@0.17.19) + '@contentlayer/cli': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) + '@contentlayer/client': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) + '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) + '@contentlayer/source-files': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) + '@contentlayer/source-remote-files': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) '@contentlayer/utils': 0.3.4 transitivePeerDependencies: - '@effect-ts/otel-node' @@ -7167,6 +7171,10 @@ packages: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} dev: true + /markdown-wasm@1.2.0: + resolution: {integrity: sha512-S12OTkyXCkOgI1n1rZY9cg4bK/PGu80Emjpvwp8BEjwCxhPV3yddF0U6+QhCitdBsI1tzWcoeahmW7k0Pq81OA==} + dev: false + /md5-hex@3.0.1: resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==} engines: {node: '>=8'} @@ -7888,7 +7896,7 @@ packages: /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - /next-contentlayer@0.3.4(contentlayer@0.3.4)(esbuild@0.17.19)(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0): + /next-contentlayer@0.3.4(contentlayer@0.3.4)(esbuild@0.17.19)(markdown-wasm@1.2.0)(next@13.4.8)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-UtUCwgAl159KwfhNaOwyiI7Lg6sdioyKMeh+E7jxx0CJ29JuXGxBEYmCI6+72NxFGIFZKx8lvttbbQhbnYWYSw==} peerDependencies: contentlayer: 0.3.4 @@ -7896,10 +7904,10 @@ packages: react: '*' react-dom: '*' dependencies: - '@contentlayer/core': 0.3.4(esbuild@0.17.19) + '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) '@contentlayer/utils': 0.3.4 - contentlayer: 0.3.4(esbuild@0.17.19) - next: 13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + contentlayer: 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) + next: 13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) transitivePeerDependencies: @@ -7921,14 +7929,14 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /next-themes@0.2.1(next@13.4.8-canary.13)(react-dom@18.2.0)(react@18.2.0): + /next-themes@0.2.1(next@13.4.8)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} peerDependencies: next: '*' react: '*' react-dom: '*' dependencies: - next: 13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false @@ -7975,8 +7983,8 @@ packages: - babel-plugin-macros dev: false - /next@13.4.8-canary.13(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-bm4WMe4R6GGoPCsDFhLywPethVfg+ZKqMaesC9xYuLvylxasOFLRYb5o7zAfcsaCXx//kqnsxOkn6meZQmNAZg==} + /next@13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-lxUjndYKjZHGK3CWeN2RI+/6ni6EUvjiqGWXAYPxUfGIdFGQ5XoisrqAJ/dF74aP27buAfs8MKIbIMMdxjqSBg==} engines: {node: '>=16.8.0'} hasBin: true peerDependencies: @@ -7993,7 +8001,7 @@ packages: sass: optional: true dependencies: - '@next/env': 13.4.8-canary.13 + '@next/env': 13.4.8 '@opentelemetry/api': 1.4.1 '@swc/helpers': 0.5.1 busboy: 1.6.0 @@ -8005,15 +8013,15 @@ packages: watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.4.8-canary.13 - '@next/swc-darwin-x64': 13.4.8-canary.13 - '@next/swc-linux-arm64-gnu': 13.4.8-canary.13 - '@next/swc-linux-arm64-musl': 13.4.8-canary.13 - '@next/swc-linux-x64-gnu': 13.4.8-canary.13 - '@next/swc-linux-x64-musl': 13.4.8-canary.13 - '@next/swc-win32-arm64-msvc': 13.4.8-canary.13 - '@next/swc-win32-ia32-msvc': 13.4.8-canary.13 - '@next/swc-win32-x64-msvc': 13.4.8-canary.13 + '@next/swc-darwin-arm64': 13.4.8 + '@next/swc-darwin-x64': 13.4.8 + '@next/swc-linux-arm64-gnu': 13.4.8 + '@next/swc-linux-arm64-musl': 13.4.8 + '@next/swc-linux-x64-gnu': 13.4.8 + '@next/swc-linux-x64-musl': 13.4.8 + '@next/swc-win32-arm64-msvc': 13.4.8 + '@next/swc-win32-ia32-msvc': 13.4.8 + '@next/swc-win32-x64-msvc': 13.4.8 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros From edc653c01e6d4d5a51f3e414f2aeeb77af758257 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 4 Jul 2023 23:22:20 +0400 Subject: [PATCH 11/67] feat(shadcn-ui): add support for jsx (#834) --- .changeset/spicy-games-arrive.md | 5 + apps/www/config/docs.ts | 5 + apps/www/content/docs/about.mdx | 20 + apps/www/content/docs/changelog.mdx | 42 +++ apps/www/content/docs/index.mdx | 8 - apps/www/content/docs/installation/astro.mdx | 1 + apps/www/content/docs/installation/gatsby.mdx | 1 + apps/www/content/docs/installation/index.mdx | 42 ++- apps/www/content/docs/installation/next.mdx | 1 + apps/www/content/docs/installation/remix.mdx | 1 + apps/www/content/docs/installation/vite.mdx | 1 + apps/www/public/schema.json | 3 + packages/cli/package.json | 7 + packages/cli/src/commands/add.ts | 6 +- packages/cli/src/commands/diff.ts | 2 +- packages/cli/src/commands/init.ts | 27 +- packages/cli/src/utils/get-config.ts | 3 +- packages/cli/src/utils/templates.ts | 24 +- packages/cli/src/utils/transformers/index.ts | 10 +- .../src/utils/transformers/transform-jsx.ts | 95 +++++ .../test/fixtures/config-jsx/components.json | 14 + .../test/fixtures/config-jsx/jsconfig.json | 7 + .../cli/test/fixtures/config-jsx/package.json | 7 + packages/cli/test/utils/get-config.test.ts | 39 ++ .../cli/test/utils/transform-css-vars.test.ts | 3 + .../cli/test/utils/transform-import.test.ts | 3 + packages/cli/test/utils/transform-rsc.test.ts | 4 + pnpm-lock.yaml | 341 ++++++++++++++++-- 28 files changed, 666 insertions(+), 56 deletions(-) create mode 100644 .changeset/spicy-games-arrive.md create mode 100644 apps/www/content/docs/about.mdx create mode 100644 packages/cli/src/utils/transformers/transform-jsx.ts create mode 100644 packages/cli/test/fixtures/config-jsx/components.json create mode 100644 packages/cli/test/fixtures/config-jsx/jsconfig.json create mode 100644 packages/cli/test/fixtures/config-jsx/package.json diff --git a/.changeset/spicy-games-arrive.md b/.changeset/spicy-games-arrive.md new file mode 100644 index 00000000000..aaee5b1b3a2 --- /dev/null +++ b/.changeset/spicy-games-arrive.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": minor +--- + +add support for jsx diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index c5a61801710..e41fdf49d89 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -78,6 +78,11 @@ export const docsConfig: DocsConfig = { href: "/docs/changelog", items: [], }, + { + title: "About", + href: "/docs/about", + items: [], + }, ], }, { diff --git a/apps/www/content/docs/about.mdx b/apps/www/content/docs/about.mdx new file mode 100644 index 00000000000..ab523185c5b --- /dev/null +++ b/apps/www/content/docs/about.mdx @@ -0,0 +1,20 @@ +--- +title: About +description: Powered by amazing open source projects. +--- + +## About + +[ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com). + +## Credits + +- [Radix UI](https://radix-ui.com) - For the primitives. +- [Vercel](https://vercel.com) - Where I host all my projects. +- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra. +- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`. +- [cmdk](https://cmdk.paco.me) - For the `` component. + +## License + +MIT © [shadcn](https://shadcn.com) diff --git a/apps/www/content/docs/changelog.mdx b/apps/www/content/docs/changelog.mdx index 000d41bd7de..0d085612948 100644 --- a/apps/www/content/docs/changelog.mdx +++ b/apps/www/content/docs/changelog.mdx @@ -4,6 +4,48 @@ description: Latest updates and announcements. toc: false --- +## July 2023 - JavaScript + +This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. + +However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli). + +```txt +Would you like to use TypeScript (recommended)? no +``` + +To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file. + +```json {10} title="components.json" +{ + "style": "default", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app/globals.css", + "baseColor": "zinc", + "cssVariables": true + }, + "rsc": false, + "tsx": false, + "aliases": { + "utils": "~/lib/utils", + "components": "~/components" + } +} +``` + +To configure import aliases, you can use the following `jsconfig.json`: + +```json {4} title="jsconfig.json" +{ + "compilerOptions": { + "paths": { + "@/*": ["./*"] + } + } +} +``` + ## June 2023 - New CLI, Styles and more I have a lot of updates to share with you today: diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx index 341365f8251..90f7ed4ef72 100644 --- a/apps/www/content/docs/index.mdx +++ b/apps/www/content/docs/index.mdx @@ -65,11 +65,3 @@ But hey, let me know if you do. I'd love to see what you build. - -## Credits - -- [Radix UI](https://radix-ui.com) - For the primitives. -- [Vercel](https://vercel.com) - Where I host all my projects. -- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra. -- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`. -- [cmdk](https://cmdk.paco.me) - For the `` component. diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx index 62204248abc..1e84289240d 100644 --- a/apps/www/content/docs/installation/astro.mdx +++ b/apps/www/content/docs/installation/astro.mdx @@ -88,6 +88,7 @@ npx shadcn-ui@latest init You will be asked a few questions to configure `components.json`: ```txt showLineNumbers +Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › › ./src/styles/globals.css diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index 87ac29fbb1b..a680cd2fa32 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -84,6 +84,7 @@ npx shadcn-ui@latest init You will be asked a few questions to configure `components.json`: ```txt showLineNumbers +Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › › ./src/styles/globals.css diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx index 914abfd7a07..309e8306521 100644 --- a/apps/www/content/docs/installation/index.mdx +++ b/apps/www/content/docs/installation/index.mdx @@ -3,7 +3,9 @@ title: Installation description: How to install dependencies and structure your app. --- -
+## Frameworks + +
-## Other frameworks +## TypeScript + +This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. + +However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli). + +To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file. + +```json {10} title="components.json" +{ + "style": "default", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app/globals.css", + "baseColor": "zinc", + "cssVariables": true + }, + "rsc": false, + "tsx": false, + "aliases": { + "utils": "~/lib/utils", + "components": "~/components" + } +} +``` + +To configure import aliases, you can use the following `jsconfig.json`: -I'm looking for help writing guides for other frameworks. Help me write those guides by [opening an PR](https://github.com/shadcn/ui). +```json {4} title="jsconfig.json" +{ + "compilerOptions": { + "paths": { + "@/*": ["./*"] + } + } +} +``` diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index c7a0cbb6ed4..0fe520f5fdc 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -26,6 +26,7 @@ npx shadcn-ui@latest init You will be asked a few questions to configure `components.json`: ```txt showLineNumbers +Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › › app/globals.css diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index b6d925fe888..2b484a10094 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -26,6 +26,7 @@ npx shadcn-ui@latest init You will be asked a few questions to configure `components.json`: ```txt showLineNumbers +Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › app/tailwind.css diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index d369a49e941..bf1195037a7 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -71,6 +71,7 @@ npx shadcn-ui@latest init You will be asked a few questions to configure `components.json`: ```txt showLineNumbers +Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › › src/index.css diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json index 99fbf179d13..14c922a8fbd 100644 --- a/apps/www/public/schema.json +++ b/apps/www/public/schema.json @@ -27,6 +27,9 @@ "rsc": { "type": "boolean" }, + "tsx": { + "type": "boolean" + }, "aliases": { "type": "object", "properties": { diff --git a/packages/cli/package.json b/packages/cli/package.json index c79b8e1308a..72b409908f7 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -45,6 +45,9 @@ }, "dependencies": { "@antfu/ni": "^0.21.4", + "@babel/core": "^7.22.1", + "@babel/parser": "^7.22.6", + "@babel/plugin-transform-typescript": "^7.22.5", "chalk": "5.2.0", "commander": "^10.0.0", "cosmiconfig": "^8.1.3", @@ -52,16 +55,20 @@ "execa": "^7.0.0", "fs-extra": "^11.1.0", "https-proxy-agent": "^6.2.0", + "lodash.template": "^4.5.0", "node-fetch": "^3.3.0", "ora": "^6.1.2", "prompts": "^2.4.2", + "recast": "^0.23.2", "ts-morph": "^18.0.0", "tsconfig-paths": "^4.2.0", "zod": "^3.20.2" }, "devDependencies": { + "@types/babel__core": "^7.20.1", "@types/diff": "^5.0.3", "@types/fs-extra": "^11.0.1", + "@types/lodash.template": "^4.5.1", "@types/prompts": "^2.4.2", "rimraf": "^4.1.3", "tsup": "^6.6.3", diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts index 1f209613960..46ef641575a 100644 --- a/packages/cli/src/commands/add.ts +++ b/packages/cli/src/commands/add.ts @@ -143,7 +143,7 @@ export const add = new Command() } for (const file of item.files) { - const filePath = path.resolve(targetDir, file.name) + let filePath = path.resolve(targetDir, file.name) // Run transformers. const content = await transform({ @@ -153,6 +153,10 @@ export const add = new Command() baseColor, }) + if (!config.tsx) { + filePath = filePath.replace(/\.tsx$/, ".jsx") + } + await fs.writeFile(filePath, content) } diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts index 214d84f3712..37308eaa89f 100644 --- a/packages/cli/src/commands/diff.ts +++ b/packages/cli/src/commands/diff.ts @@ -166,7 +166,7 @@ async function diffComponent( baseColor, }) - const patch = diffLines(registryContent, fileContent) + const patch = diffLines(registryContent as string, fileContent) if (patch.length > 1) { changes.push({ file: file.name, diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index f21931a03c7..598ab6d60ee 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -2,7 +2,6 @@ import { existsSync, promises as fs } from "fs" import path from "path" import { DEFAULT_COMPONENTS, - DEFAULT_TAILWIND_BASE_COLOR, DEFAULT_TAILWIND_CONFIG, DEFAULT_TAILWIND_CSS, DEFAULT_UTILS, @@ -23,6 +22,7 @@ import * as templates from "@/src/utils/templates" import chalk from "chalk" import { Command } from "commander" import { execa } from "execa" +import template from "lodash.template" import ora from "ora" import prompts from "prompts" import * as z from "zod" @@ -86,6 +86,16 @@ export async function promptForConfig( const baseColors = await getRegistryBaseColors() const options = await prompts([ + { + type: "toggle", + name: "typescript", + message: `Would you like to use ${highlight( + "TypeScript" + )} (recommended)?`, + initial: defaultConfig?.tsx ?? true, + active: "yes", + inactive: "no", + }, { type: "select", name: "style", @@ -115,7 +125,9 @@ export async function promptForConfig( { type: "toggle", name: "tailwindCssVariables", - message: `Do you want to use ${highlight("CSS variables")} for colors?`, + message: `Would you like to use ${highlight( + "CSS variables" + )} for colors?`, initial: defaultConfig?.tailwind.cssVariables ?? true, active: "yes", inactive: "no", @@ -158,6 +170,7 @@ export async function promptForConfig( cssVariables: options.tailwindCssVariables, }, rsc: options.rsc, + tsx: options.typescript, aliases: { utils: options.utils, components: options.components, @@ -213,12 +226,14 @@ export async function runInit(cwd: string, config: Config) { } } + const extension = config.tsx ? "ts" : "js" + // Write tailwind config. await fs.writeFile( config.resolvedPaths.tailwindConfig, config.tailwind.cssVariables - ? templates.TAILWIND_CONFIG_WITH_VARIABLES - : templates.TAILWIND_CONFIG, + ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension }) + : template(templates.TAILWIND_CONFIG)({ extension }), "utf8" ) @@ -236,8 +251,8 @@ export async function runInit(cwd: string, config: Config) { // Write cn file. await fs.writeFile( - `${config.resolvedPaths.utils}.ts`, - templates.UTILS, + `${config.resolvedPaths.utils}.${extension}`, + extension === "ts" ? templates.UTILS : templates.UTILS_JS, "utf8" ) diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts index 54b056c4b50..b6376d70294 100644 --- a/packages/cli/src/utils/get-config.ts +++ b/packages/cli/src/utils/get-config.ts @@ -22,6 +22,7 @@ export const rawConfigSchema = z $schema: z.string().optional(), style: z.string(), rsc: z.coerce.boolean().default(false), + tsx: z.coerce.boolean().default(true), tailwind: z.object({ config: z.string(), css: z.string(), @@ -89,6 +90,6 @@ export async function getRawConfig(cwd: string): Promise { return rawConfigSchema.parse(configResult.config) } catch (error) { - throw new Error(`Invald configuration found in ${cwd}/components.json.`) + throw new Error(`Invalid configuration found in ${cwd}/components.json.`) } } diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 523ef7171ba..5af47c2f49a 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -6,14 +6,22 @@ export function cn(...inputs: ClassValue[]) { } ` +export const UTILS_JS = `import { clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs) { + return twMerge(clsx(inputs)) +} +` + export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', ], theme: { container: { @@ -47,10 +55,10 @@ export const TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss'). module.exports = { darkMode: ["class"], content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', ], theme: { container: { diff --git a/packages/cli/src/utils/transformers/index.ts b/packages/cli/src/utils/transformers/index.ts index ef38cbae439..b5699d71e64 100644 --- a/packages/cli/src/utils/transformers/index.ts +++ b/packages/cli/src/utils/transformers/index.ts @@ -5,6 +5,7 @@ import { Config } from "@/src/utils/get-config" import { registryBaseColorSchema } from "@/src/utils/registry/schema" import { transformCssVars } from "@/src/utils/transformers/transform-css-vars" import { transformImport } from "@/src/utils/transformers/transform-import" +import { transformJsx } from "@/src/utils/transformers/transform-jsx" import { transformRsc } from "@/src/utils/transformers/transform-rsc" import { Project, ScriptKind, type SourceFile } from "ts-morph" import * as z from "zod" @@ -16,11 +17,11 @@ export type TransformOpts = { baseColor?: z.infer } -export type Transformer = ( +export type Transformer = ( opts: TransformOpts & { sourceFile: SourceFile } -) => Promise +) => Promise const transformers: Transformer[] = [ transformImport, @@ -47,5 +48,8 @@ export async function transform(opts: TransformOpts) { transformer({ sourceFile, ...opts }) } - return sourceFile.getFullText() + return await transformJsx({ + sourceFile, + ...opts, + }) } diff --git a/packages/cli/src/utils/transformers/transform-jsx.ts b/packages/cli/src/utils/transformers/transform-jsx.ts new file mode 100644 index 00000000000..81f6bb597de --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-jsx.ts @@ -0,0 +1,95 @@ +import { type Transformer } from "@/src/utils/transformers" +import { transformFromAstSync } from "@babel/core" +import { ParserOptions, parse } from "@babel/parser" +// @ts-ignore +import transformTypescript from "@babel/plugin-transform-typescript" +import * as recast from "recast" + +// TODO. +// I'm using recast for the AST here. +// Figure out if ts-morph AST is compatible with Babel. + +// This is a copy of the babel options from recast/parser. +// The goal here is to tolerate as much syntax as possible. +// We want to be able to parse any valid tsx code. +// See https://github.com/benjamn/recast/blob/master/parsers/_babel_options.ts. +const PARSE_OPTIONS: ParserOptions = { + sourceType: "module", + allowImportExportEverywhere: true, + allowReturnOutsideFunction: true, + startLine: 1, + tokens: true, + plugins: [ + "asyncGenerators", + "bigInt", + "classPrivateMethods", + "classPrivateProperties", + "classProperties", + "classStaticBlock", + "decimal", + "decorators-legacy", + "doExpressions", + "dynamicImport", + "exportDefaultFrom", + "exportNamespaceFrom", + "functionBind", + "functionSent", + "importAssertions", + "importMeta", + "nullishCoalescingOperator", + "numericSeparator", + "objectRestSpread", + "optionalCatchBinding", + "optionalChaining", + [ + "pipelineOperator", + { + proposal: "minimal", + }, + ], + [ + "recordAndTuple", + { + syntaxType: "hash", + }, + ], + "throwExpressions", + "topLevelAwait", + "v8intrinsic", + "typescript", + "jsx", + ], +} + +export const transformJsx: Transformer = async ({ + sourceFile, + config, +}) => { + const output = sourceFile.getFullText() + + if (config.tsx) { + return output + } + + const ast = recast.parse(output, { + parser: { + parse: (code: string) => { + return parse(code, PARSE_OPTIONS) + }, + }, + }) + + const result = transformFromAstSync(ast, output, { + cloneInputAst: false, + code: false, + ast: true, + plugins: [transformTypescript], + configFile: false, + }) + + if (!result || !result.ast) { + throw new Error("Failed to transform JSX") + } + + return recast.print(result.ast).code +} diff --git a/packages/cli/test/fixtures/config-jsx/components.json b/packages/cli/test/fixtures/config-jsx/components.json new file mode 100644 index 00000000000..92b1f5e029b --- /dev/null +++ b/packages/cli/test/fixtures/config-jsx/components.json @@ -0,0 +1,14 @@ +{ + "style": "default", + "tsx": false, + "tailwind": { + "config": "./tailwind.config.js", + "css": "./src/assets/css/tailwind.css", + "baseColor": "neutral", + "cssVariables": false + }, + "aliases": { + "utils": "@/lib/utils", + "components": "@/components" + } +} diff --git a/packages/cli/test/fixtures/config-jsx/jsconfig.json b/packages/cli/test/fixtures/config-jsx/jsconfig.json new file mode 100644 index 00000000000..2a2e4b3bf8b --- /dev/null +++ b/packages/cli/test/fixtures/config-jsx/jsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./*"] + } + } +} diff --git a/packages/cli/test/fixtures/config-jsx/package.json b/packages/cli/test/fixtures/config-jsx/package.json new file mode 100644 index 00000000000..b239ba4a65d --- /dev/null +++ b/packages/cli/test/fixtures/config-jsx/package.json @@ -0,0 +1,7 @@ +{ + "name": "test-cli-config-partial", + "version": "1.0.0", + "main": "index.js", + "author": "shadcn", + "license": "MIT" +} diff --git a/packages/cli/test/utils/get-config.test.ts b/packages/cli/test/utils/get-config.test.ts index b56c1fb9be5..5ab65a37326 100644 --- a/packages/cli/test/utils/get-config.test.ts +++ b/packages/cli/test/utils/get-config.test.ts @@ -19,6 +19,7 @@ test("get raw config", async () => { cssVariables: false, }, rsc: false, + tsx: true, aliases: { components: "@/components", utils: "@/lib/utils", @@ -50,6 +51,7 @@ test("get config", async () => { cssVariables: false, }, rsc: false, + tsx: true, aliases: { components: "@/components", utils: "@/lib/utils", @@ -83,6 +85,7 @@ test("get config", async () => { ).toEqual({ style: "new-york", rsc: false, + tsx: true, tailwind: { config: "tailwind.config.ts", baseColor: "zinc", @@ -116,4 +119,40 @@ test("get config", async () => { ), }, }) + + expect( + await getConfig(path.resolve(__dirname, "../fixtures/config-jsx")) + ).toEqual({ + style: "default", + tailwind: { + config: "./tailwind.config.js", + css: "./src/assets/css/tailwind.css", + baseColor: "neutral", + cssVariables: false, + }, + rsc: false, + tsx: false, + aliases: { + components: "@/components", + utils: "@/lib/utils", + }, + resolvedPaths: { + tailwindConfig: path.resolve( + __dirname, + "../fixtures/config-jsx", + "tailwind.config.js" + ), + tailwindCss: path.resolve( + __dirname, + "../fixtures/config-jsx", + "./src/assets/css/tailwind.css" + ), + components: path.resolve( + __dirname, + "../fixtures/config-jsx", + "./components" + ), + utils: path.resolve(__dirname, "../fixtures/config-jsx", "./lib/utils"), + }, + }) }) diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts index 1b37a5c9b0f..46ad6916a58 100644 --- a/packages/cli/test/utils/transform-css-vars.test.ts +++ b/packages/cli/test/utils/transform-css-vars.test.ts @@ -13,6 +13,7 @@ export function Foo() { }" `, config: { + tsx: true, tailwind: { baseColor: "stone", cssVariables: true, @@ -35,6 +36,7 @@ export function Foo() { }" `, config: { + tsx: true, tailwind: { baseColor: "stone", cssVariables: false, @@ -57,6 +59,7 @@ export function Foo() { }" `, config: { + tsx: true, tailwind: { baseColor: "stone", cssVariables: false, diff --git a/packages/cli/test/utils/transform-import.test.ts b/packages/cli/test/utils/transform-import.test.ts index 98475ade320..4c36cd25056 100644 --- a/packages/cli/test/utils/transform-import.test.ts +++ b/packages/cli/test/utils/transform-import.test.ts @@ -15,6 +15,7 @@ import { Foo } from "bar" import { cn } from "@/lib/utils" `, config: { + tsx: true, tailwind: { baseColor: "neutral", cssVariables: true, @@ -40,6 +41,7 @@ import { Foo } from "bar" import { bar } from "@/lib/utils/bar" `, config: { + tsx: true, aliases: { components: "~/src/components", utils: "~/lib", @@ -61,6 +63,7 @@ import { Foo } from "bar" import { bar } from "@/lib/utils/bar" `, config: { + tsx: true, aliases: { components: "~/src/components", utils: "~/src/utils", diff --git a/packages/cli/test/utils/transform-rsc.test.ts b/packages/cli/test/utils/transform-rsc.test.ts index e370d5ea21e..73e0105d75d 100644 --- a/packages/cli/test/utils/transform-rsc.test.ts +++ b/packages/cli/test/utils/transform-rsc.test.ts @@ -10,6 +10,7 @@ test("transform rsc", async () => { import { Foo } from "bar" `, config: { + tsx: true, rsc: true, }, }) @@ -24,6 +25,7 @@ import { Foo } from "bar" import { Foo } from "bar" `, config: { + tsx: true, rsc: true, }, }) @@ -38,6 +40,7 @@ import { Foo } from "bar" import { Foo } from "bar" `, config: { + tsx: true, rsc: false, }, }) @@ -54,6 +57,7 @@ import { Foo } from "bar" "use client" `, config: { + tsx: true, rsc: false, }, }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3755a62547c..3032dd740bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -342,6 +342,15 @@ importers: '@antfu/ni': specifier: ^0.21.4 version: 0.21.4 + '@babel/core': + specifier: ^7.22.1 + version: 7.22.1 + '@babel/parser': + specifier: ^7.22.6 + version: 7.22.6 + '@babel/plugin-transform-typescript': + specifier: ^7.22.5 + version: 7.22.5(@babel/core@7.22.1) chalk: specifier: 5.2.0 version: 5.2.0 @@ -363,6 +372,9 @@ importers: https-proxy-agent: specifier: ^6.2.0 version: 6.2.0 + lodash.template: + specifier: ^4.5.0 + version: 4.5.0 node-fetch: specifier: ^3.3.0 version: 3.3.0 @@ -372,6 +384,9 @@ importers: prompts: specifier: ^2.4.2 version: 2.4.2 + recast: + specifier: ^0.23.2 + version: 0.23.2 ts-morph: specifier: ^18.0.0 version: 18.0.0 @@ -382,12 +397,18 @@ importers: specifier: ^3.20.2 version: 3.20.2 devDependencies: + '@types/babel__core': + specifier: ^7.20.1 + version: 7.20.1 '@types/diff': specifier: ^5.0.3 version: 5.0.3 '@types/fs-extra': specifier: ^11.0.1 version: 11.0.1 + '@types/lodash.template': + specifier: ^4.5.1 + version: 4.5.1 '@types/prompts': specifier: ^2.4.2 version: 2.4.2 @@ -510,6 +531,13 @@ packages: dependencies: '@babel/highlight': 7.18.6 + /@babel/code-frame@7.22.5: + resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/highlight': 7.22.5 + dev: false + /@babel/compat-data@7.22.3: resolution: {integrity: sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==} engines: {node: '>=6.9.0'} @@ -524,7 +552,7 @@ packages: '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.22.1) '@babel/helper-module-transforms': 7.22.1 '@babel/helpers': 7.22.3 - '@babel/parser': 7.22.3 + '@babel/parser': 7.22.6 '@babel/template': 7.21.9 '@babel/traverse': 7.22.1 '@babel/types': 7.22.3 @@ -540,10 +568,27 @@ packages: resolution: {integrity: sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.18 + jsesc: 2.5.2 + + /@babel/generator@7.22.5: + resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 jsesc: 2.5.2 + dev: false + + /@babel/helper-annotate-as-pure@7.22.5: + resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: false /@babel/helper-compilation-targets@7.22.1(@babel/core@7.22.1): resolution: {integrity: sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==} @@ -558,28 +603,75 @@ packages: lru-cache: 5.1.1 semver: 6.3.0 + /@babel/helper-create-class-features-plugin@7.22.6(@babel/core@7.22.1): + resolution: {integrity: sha512-iwdzgtSiBxF6ni6mzVnZCF3xt5qE6cEA0J7nFt8QOAWZ0zjCFceEgpn3vtb2V7WFR6QzP2jmIFOHMTRo7eNJjQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.22.1 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-function-name': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.22.5 + '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/helper-replace-supers': 7.22.5 + '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@nicolo-ribaudo/semver-v6': 6.3.3 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/helper-environment-visitor@7.22.1: resolution: {integrity: sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==} engines: {node: '>=6.9.0'} + /@babel/helper-environment-visitor@7.22.5: + resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/helper-function-name@7.21.0: resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==} engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.21.9 - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 + + /@babel/helper-function-name@7.22.5: + resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.22.5 + '@babel/types': 7.22.5 + dev: false /@babel/helper-hoist-variables@7.18.6: resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 + + /@babel/helper-hoist-variables@7.22.5: + resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: false + + /@babel/helper-member-expression-to-functions@7.22.5: + resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: false /@babel/helper-module-imports@7.21.4: resolution: {integrity: sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 /@babel/helper-module-transforms@7.22.1: resolution: {integrity: sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==} @@ -589,31 +681,71 @@ packages: '@babel/helper-module-imports': 7.21.4 '@babel/helper-simple-access': 7.21.5 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/helper-validator-identifier': 7.19.1 + '@babel/helper-validator-identifier': 7.22.5 '@babel/template': 7.21.9 '@babel/traverse': 7.22.1 - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 + transitivePeerDependencies: + - supports-color + + /@babel/helper-optimise-call-expression@7.22.5: + resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: false + + /@babel/helper-plugin-utils@7.22.5: + resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} + engines: {node: '>=6.9.0'} + dev: false + + /@babel/helper-replace-supers@7.22.5: + resolution: {integrity: sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.22.5 + '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/template': 7.22.5 + '@babel/traverse': 7.22.6 + '@babel/types': 7.22.5 transitivePeerDependencies: - supports-color + dev: false /@babel/helper-simple-access@7.21.5: resolution: {integrity: sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 + + /@babel/helper-skip-transparent-expression-wrappers@7.22.5: + resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: false /@babel/helper-split-export-declaration@7.18.6: resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 - /@babel/helper-string-parser@7.21.5: - resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==} + /@babel/helper-split-export-declaration@7.22.6: + resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: false - /@babel/helper-validator-identifier@7.19.1: - resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==} + /@babel/helper-string-parser@7.22.5: + resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} + engines: {node: '>=6.9.0'} + + /@babel/helper-validator-identifier@7.22.5: + resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} /@babel/helper-validator-option@7.21.0: @@ -626,7 +758,7 @@ packages: dependencies: '@babel/template': 7.21.9 '@babel/traverse': 7.22.1 - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 transitivePeerDependencies: - supports-color @@ -634,16 +766,50 @@ packages: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-validator-identifier': 7.19.1 + '@babel/helper-validator-identifier': 7.22.5 + chalk: 2.4.2 + js-tokens: 4.0.0 + + /@babel/highlight@7.22.5: + resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-validator-identifier': 7.22.5 chalk: 2.4.2 js-tokens: 4.0.0 + dev: false - /@babel/parser@7.22.3: - resolution: {integrity: sha512-vrukxyW/ep8UD1UDzOYpTKQ6abgjFoeG6L+4ar9+c5TN9QnlqiOi6QK7LSR5ewm/ERyGkT/Ai6VboNrxhbr9Uw==} + /@babel/parser@7.22.6: + resolution: {integrity: sha512-EIQu22vNkceq3LbjAq7knDf/UmtI2qbcNI8GRBlijez6TpQLvSodJPYfydQmNA5buwkxxxa/PVI44jjYZ+/cLw==} engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.22.3 + '@babel/types': 7.22.5 + + /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.1): + resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.22.1 + '@babel/helper-plugin-utils': 7.22.5 + dev: false + + /@babel/plugin-transform-typescript@7.22.5(@babel/core@7.22.1): + resolution: {integrity: sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.22.1 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-create-class-features-plugin': 7.22.6(@babel/core@7.22.1) + '@babel/helper-plugin-utils': 7.22.5 + '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.1) + transitivePeerDependencies: + - supports-color + dev: false /@babel/runtime@7.22.3: resolution: {integrity: sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==} @@ -656,8 +822,17 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.21.4 - '@babel/parser': 7.22.3 - '@babel/types': 7.22.3 + '@babel/parser': 7.22.6 + '@babel/types': 7.22.5 + + /@babel/template@7.22.5: + resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.22.5 + '@babel/parser': 7.22.6 + '@babel/types': 7.22.5 + dev: false /@babel/traverse@7.22.1: resolution: {integrity: sha512-lAWkdCoUFnmwLBhIRLciFntGYsIIoC6vIbN8zrLPqBnJmPu7Z6nzqnKd7FsxQUNAvZfVZ0x6KdNvNp8zWIOHSQ==} @@ -669,19 +844,45 @@ packages: '@babel/helper-function-name': 7.21.0 '@babel/helper-hoist-variables': 7.18.6 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': 7.22.3 - '@babel/types': 7.22.3 + '@babel/parser': 7.22.6 + '@babel/types': 7.22.5 + debug: 4.3.4 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + + /@babel/traverse@7.22.6: + resolution: {integrity: sha512-53CijMvKlLIDlOTrdWiHileRddlIiwUIyCKqYa7lYnnPldXCG5dUSN38uT0cA6i7rHWNKJLH0VU/Kxdr1GzB3w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.22.5 + '@babel/generator': 7.22.5 + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-function-name': 7.22.5 + '@babel/helper-hoist-variables': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/parser': 7.22.6 + '@babel/types': 7.22.5 debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color + dev: false /@babel/types@7.22.3: resolution: {integrity: sha512-P3na3xIQHTKY4L0YOG7pM8M8uoUIB910WQaSiiMCZUC2Cy8XFEQONGABFnHWBa2gpGKODTAJcNhi5Zk0sLRrzg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-string-parser': 7.21.5 - '@babel/helper-validator-identifier': 7.19.1 + '@babel/helper-string-parser': 7.22.5 + '@babel/helper-validator-identifier': 7.22.5 + to-fast-properties: 2.0.0 + + /@babel/types@7.22.5: + resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.22.5 + '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 /@changesets/apply-release-plan@6.1.3: @@ -1550,7 +1751,7 @@ packages: dependencies: '@babel/core': 7.22.1 '@babel/generator': 7.22.3 - '@babel/parser': 7.22.3 + '@babel/parser': 7.22.6 '@babel/traverse': 7.22.1 '@babel/types': 7.22.3 javascript-natural-sort: 0.7.1 @@ -1893,6 +2094,11 @@ packages: dev: false optional: true + /@nicolo-ribaudo/semver-v6@6.3.3: + resolution: {integrity: sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==} + hasBin: true + dev: false + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -3647,6 +3853,35 @@ packages: '@types/estree': 1.0.1 dev: false + /@types/babel__core@7.20.1: + resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==} + dependencies: + '@babel/parser': 7.22.6 + '@babel/types': 7.22.5 + '@types/babel__generator': 7.6.4 + '@types/babel__template': 7.4.1 + '@types/babel__traverse': 7.20.1 + dev: true + + /@types/babel__generator@7.6.4: + resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@types/babel__template@7.4.1: + resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} + dependencies: + '@babel/parser': 7.22.6 + '@babel/types': 7.22.5 + dev: true + + /@types/babel__traverse@7.20.1: + resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==} + dependencies: + '@babel/types': 7.22.5 + dev: true + /@types/chai-subset@1.3.3: resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==} dependencies: @@ -4163,6 +4398,15 @@ packages: engines: {node: '>=8'} dev: false + /assert@2.0.0: + resolution: {integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==} + dependencies: + es6-object-assign: 1.1.0 + is-nan: 1.3.2 + object-is: 1.1.5 + util: 0.12.5 + dev: false + /assertion-error@1.1.0: resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} dev: false @@ -4170,6 +4414,13 @@ packages: /ast-types-flow@0.0.7: resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==} + /ast-types@0.16.1: + resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} + engines: {node: '>=4'} + dependencies: + tslib: 2.5.2 + dev: false + /astring@1.8.5: resolution: {integrity: sha512-TuBbdn7jWVzf8dmFGTaRpW8qgANtWLi1qJLnkfGO5uVf6jf9f/F4B1H35tnOI+qVYZo3p3i8WZlbZOuPAE0wEA==} hasBin: true @@ -5257,6 +5508,10 @@ packages: is-date-object: 1.0.5 is-symbol: 1.0.4 + /es6-object-assign@1.1.0: + resolution: {integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==} + dev: false + /esbuild@0.17.19: resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==} engines: {node: '>=12'} @@ -6629,6 +6884,13 @@ packages: engines: {node: '>=8'} dev: false + /is-generator-function@1.0.10: + resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==} + engines: {node: '>= 0.4'} + dependencies: + has-tostringtag: 1.0.0 + dev: false + /is-glob@4.0.3: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} @@ -6655,6 +6917,14 @@ packages: /is-map@2.0.2: resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} + /is-nan@1.3.2: + resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==} + engines: {node: '>= 0.4'} + dependencies: + call-bind: 1.0.2 + define-properties: 1.2.0 + dev: false + /is-negative-zero@2.0.2: resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==} engines: {node: '>= 0.4'} @@ -8902,6 +9172,17 @@ packages: dependencies: picomatch: 2.3.1 + /recast@0.23.2: + resolution: {integrity: sha512-Qv6cPfVZyMOtPszK6PgW70pUgm7gPlFitAPf0Q69rlOA0zLw2XdDcNmPbVGYicFGT9O8I7TZ/0ryJD+6COvIPw==} + engines: {node: '>= 4'} + dependencies: + assert: 2.0.0 + ast-types: 0.16.1 + esprima: 4.0.1 + source-map: 0.6.1 + tslib: 2.5.2 + dev: false + /recharts-scale@0.4.5: resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==} dependencies: @@ -10330,6 +10611,16 @@ packages: /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + /util@0.12.5: + resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==} + dependencies: + inherits: 2.0.4 + is-arguments: 1.1.1 + is-generator-function: 1.0.10 + is-typed-array: 1.1.10 + which-typed-array: 1.1.9 + dev: false + /uuid@8.3.2: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true From 25a41cfe2aa874db577bd49dd68ee74ef9e27454 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 4 Jul 2023 23:26:32 +0400 Subject: [PATCH 12/67] chore(release): version packages (#835) Co-authored-by: github-actions[bot] --- .changeset/spicy-games-arrive.md | 5 ----- packages/cli/CHANGELOG.md | 6 ++++++ packages/cli/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/spicy-games-arrive.md diff --git a/.changeset/spicy-games-arrive.md b/.changeset/spicy-games-arrive.md deleted file mode 100644 index aaee5b1b3a2..00000000000 --- a/.changeset/spicy-games-arrive.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"shadcn-ui": minor ---- - -add support for jsx diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 4e66e326b59..e9aa1f1dbbe 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,11 @@ # @shadcn/ui +## 0.3.0 + +### Minor Changes + +- [#834](https://github.com/shadcn/ui/pull/834) [`edc653c`](https://github.com/shadcn/ui/commit/edc653c01e6d4d5a51f3e414f2aeeb77af758257) Thanks [@shadcn](https://github.com/shadcn)! - add support for jsx + ## 0.2.3 ### Patch Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index 72b409908f7..8e3a79bba33 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "shadcn-ui", - "version": "0.2.3", + "version": "0.3.0", "description": "Add components to your apps.", "publishConfig": { "access": "public" From 54b1f5b66121a5574115e497deb668887e5be0cd Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 5 Jul 2023 23:00:03 +0400 Subject: [PATCH 13/67] feat: update next-template --- apps/www/content/docs/changelog.mdx | 4 +- pnpm-lock.yaml | 897 ++++++++++++++++++++------- templates/next-template/package.json | 16 +- 3 files changed, 685 insertions(+), 232 deletions(-) diff --git a/apps/www/content/docs/changelog.mdx b/apps/www/content/docs/changelog.mdx index 0d085612948..2c5cf13d35b 100644 --- a/apps/www/content/docs/changelog.mdx +++ b/apps/www/content/docs/changelog.mdx @@ -6,9 +6,9 @@ toc: false ## July 2023 - JavaScript -This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. +This project and the components are written in TypeScript. **We recommend using TypeScript for your project as well**. -However we provide a JavaScript version of the components as well. The JavaScript version is available via the [cli](/docs/cli). +However we provide a JavaScript version of the components, available via the [cli](/docs/cli). ```txt Would you like to use TypeScript (recommended)? no diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3032dd740bf..db1bb1a5a5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -429,7 +429,7 @@ importers: dependencies: '@radix-ui/react-slot': specifier: ^1.0.2 - version: 1.0.2(@types/react@18.2.7)(react@18.2.0) + version: 1.0.2(@types/react@18.2.14)(react@18.2.0) class-variance-authority: specifier: ^0.4.0 version: 0.4.0(typescript@4.9.5) @@ -440,11 +440,11 @@ importers: specifier: 0.105.0-alpha.4 version: 0.105.0-alpha.4(react@18.2.0) next: - specifier: ^13.4.4 - version: 13.4.4(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0) + specifier: ^13.4.8 + version: 13.4.8(@babel/core@7.22.6)(react-dom@18.2.0)(react@18.2.0) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@13.4.4)(react-dom@18.2.0)(react@18.2.0) + version: 0.2.1(next@13.4.8)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -455,11 +455,11 @@ importers: specifier: ^0.31.3 version: 0.31.3 tailwind-merge: - specifier: ^1.12.0 - version: 1.12.0 + specifier: ^1.13.2 + version: 1.13.2 tailwindcss-animate: - specifier: ^1.0.5 - version: 1.0.5(tailwindcss@3.3.2) + specifier: ^1.0.6 + version: 1.0.6(tailwindcss@3.3.2) devDependencies: '@ianvs/prettier-plugin-sort-imports': specifier: ^3.7.2 @@ -468,32 +468,32 @@ importers: specifier: ^17.0.45 version: 17.0.45 '@types/react': - specifier: ^18.2.7 - version: 18.2.7 + specifier: ^18.2.14 + version: 18.2.14 '@types/react-dom': - specifier: ^18.2.4 - version: 18.2.4 + specifier: ^18.2.6 + version: 18.2.6 '@typescript-eslint/parser': - specifier: ^5.59.7 - version: 5.59.7(eslint@8.41.0)(typescript@4.9.5) + specifier: ^5.61.0 + version: 5.61.0(eslint@8.44.0)(typescript@4.9.5) autoprefixer: specifier: ^10.4.14 version: 10.4.14(postcss@8.4.24) eslint: - specifier: ^8.41.0 - version: 8.41.0 + specifier: ^8.44.0 + version: 8.44.0 eslint-config-next: specifier: 13.0.0 - version: 13.0.0(eslint@8.41.0)(typescript@4.9.5) + version: 13.0.0(eslint@8.44.0)(typescript@4.9.5) eslint-config-prettier: specifier: ^8.8.0 - version: 8.8.0(eslint@8.41.0) + version: 8.8.0(eslint@8.44.0) eslint-plugin-react: specifier: ^7.32.2 - version: 7.32.2(eslint@8.41.0) + version: 7.32.2(eslint@8.44.0) eslint-plugin-tailwindcss: - specifier: ^3.12.0 - version: 3.12.0(tailwindcss@3.3.2) + specifier: ^3.13.0 + version: 3.13.0(tailwindcss@3.3.2) postcss: specifier: ^8.4.24 version: 8.4.24 @@ -509,6 +509,11 @@ importers: packages: + /@aashutoshrathi/word-wrap@1.2.6: + resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==} + engines: {node: '>=0.10.0'} + dev: true + /@alloc/quick-lru@5.2.0: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} @@ -530,17 +535,22 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/highlight': 7.18.6 + dev: false /@babel/code-frame@7.22.5: resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==} engines: {node: '>=6.9.0'} dependencies: '@babel/highlight': 7.22.5 - dev: false /@babel/compat-data@7.22.3: resolution: {integrity: sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==} engines: {node: '>=6.9.0'} + dev: false + + /@babel/compat-data@7.22.6: + resolution: {integrity: sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==} + engines: {node: '>=6.9.0'} /@babel/core@7.22.1: resolution: {integrity: sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==} @@ -563,6 +573,29 @@ packages: semver: 6.3.0 transitivePeerDependencies: - supports-color + dev: false + + /@babel/core@7.22.6: + resolution: {integrity: sha512-HPIyDa6n+HKw5dEuway3vVAhBboYCtREBMp+IWeseZy6TFtzn6MHkCH2KKYUOC/vKKwgSMHQW4htBOrmuRPXfw==} + engines: {node: '>=6.9.0'} + dependencies: + '@ampproject/remapping': 2.2.1 + '@babel/code-frame': 7.22.5 + '@babel/generator': 7.22.5 + '@babel/helper-compilation-targets': 7.22.6(@babel/core@7.22.6) + '@babel/helper-module-transforms': 7.22.5 + '@babel/helpers': 7.22.6 + '@babel/parser': 7.22.6 + '@babel/template': 7.22.5 + '@babel/traverse': 7.22.6 + '@babel/types': 7.22.5 + '@nicolo-ribaudo/semver-v6': 6.3.3 + convert-source-map: 1.9.0 + debug: 4.3.4 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + transitivePeerDependencies: + - supports-color /@babel/generator@7.22.3: resolution: {integrity: sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==} @@ -572,6 +605,7 @@ packages: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 jsesc: 2.5.2 + dev: false /@babel/generator@7.22.5: resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==} @@ -581,7 +615,6 @@ packages: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 jsesc: 2.5.2 - dev: false /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} @@ -599,9 +632,23 @@ packages: '@babel/compat-data': 7.22.3 '@babel/core': 7.22.1 '@babel/helper-validator-option': 7.21.0 - browserslist: 4.21.7 + browserslist: 4.21.9 lru-cache: 5.1.1 semver: 6.3.0 + dev: false + + /@babel/helper-compilation-targets@7.22.6(@babel/core@7.22.6): + resolution: {integrity: sha512-534sYEqWD9VfUm3IPn2SLcH4Q3P86XL+QvqdC7ZsFrzyyPF3T4XGiVghF6PTYNdWg6pXuoqXxNQAhbYeEInTzA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/compat-data': 7.22.6 + '@babel/core': 7.22.6 + '@babel/helper-validator-option': 7.22.5 + '@nicolo-ribaudo/semver-v6': 6.3.3 + browserslist: 4.21.9 + lru-cache: 5.1.1 /@babel/helper-create-class-features-plugin@7.22.6(@babel/core@7.22.1): resolution: {integrity: sha512-iwdzgtSiBxF6ni6mzVnZCF3xt5qE6cEA0J7nFt8QOAWZ0zjCFceEgpn3vtb2V7WFR6QzP2jmIFOHMTRo7eNJjQ==} @@ -626,11 +673,11 @@ packages: /@babel/helper-environment-visitor@7.22.1: resolution: {integrity: sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==} engines: {node: '>=6.9.0'} + dev: false /@babel/helper-environment-visitor@7.22.5: resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==} engines: {node: '>=6.9.0'} - dev: false /@babel/helper-function-name@7.21.0: resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==} @@ -638,6 +685,7 @@ packages: dependencies: '@babel/template': 7.21.9 '@babel/types': 7.22.5 + dev: false /@babel/helper-function-name@7.22.5: resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==} @@ -645,20 +693,19 @@ packages: dependencies: '@babel/template': 7.22.5 '@babel/types': 7.22.5 - dev: false /@babel/helper-hoist-variables@7.18.6: resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 + dev: false /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 - dev: false /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} @@ -672,6 +719,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 + dev: false + + /@babel/helper-module-imports@7.22.5: + resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 /@babel/helper-module-transforms@7.22.1: resolution: {integrity: sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==} @@ -687,6 +741,22 @@ packages: '@babel/types': 7.22.5 transitivePeerDependencies: - supports-color + dev: false + + /@babel/helper-module-transforms@7.22.5: + resolution: {integrity: sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-environment-visitor': 7.22.5 + '@babel/helper-module-imports': 7.22.5 + '@babel/helper-simple-access': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/helper-validator-identifier': 7.22.5 + '@babel/template': 7.22.5 + '@babel/traverse': 7.22.6 + '@babel/types': 7.22.5 + transitivePeerDependencies: + - supports-color /@babel/helper-optimise-call-expression@7.22.5: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} @@ -719,6 +789,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 + dev: false + + /@babel/helper-simple-access@7.22.5: + resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} @@ -732,13 +809,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 + dev: false /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.22.5 - dev: false /@babel/helper-string-parser@7.22.5: resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} @@ -751,6 +828,11 @@ packages: /@babel/helper-validator-option@7.21.0: resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==} engines: {node: '>=6.9.0'} + dev: false + + /@babel/helper-validator-option@7.22.5: + resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==} + engines: {node: '>=6.9.0'} /@babel/helpers@7.22.3: resolution: {integrity: sha512-jBJ7jWblbgr7r6wYZHMdIqKc73ycaTcCaWRq4/2LpuPHcx7xMlZvpGQkOYc9HeSjn6rcx15CPlgVcBtZ4WZJ2w==} @@ -761,6 +843,17 @@ packages: '@babel/types': 7.22.5 transitivePeerDependencies: - supports-color + dev: false + + /@babel/helpers@7.22.6: + resolution: {integrity: sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.22.5 + '@babel/traverse': 7.22.6 + '@babel/types': 7.22.5 + transitivePeerDependencies: + - supports-color /@babel/highlight@7.18.6: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} @@ -769,6 +862,7 @@ packages: '@babel/helper-validator-identifier': 7.22.5 chalk: 2.4.2 js-tokens: 4.0.0 + dev: false /@babel/highlight@7.22.5: resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==} @@ -777,7 +871,6 @@ packages: '@babel/helper-validator-identifier': 7.22.5 chalk: 2.4.2 js-tokens: 4.0.0 - dev: false /@babel/parser@7.22.6: resolution: {integrity: sha512-EIQu22vNkceq3LbjAq7knDf/UmtI2qbcNI8GRBlijez6TpQLvSodJPYfydQmNA5buwkxxxa/PVI44jjYZ+/cLw==} @@ -816,6 +909,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.11 + dev: false + + /@babel/runtime@7.22.6: + resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.13.11 /@babel/template@7.21.9: resolution: {integrity: sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==} @@ -824,6 +924,7 @@ packages: '@babel/code-frame': 7.21.4 '@babel/parser': 7.22.6 '@babel/types': 7.22.5 + dev: false /@babel/template@7.22.5: resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==} @@ -832,7 +933,6 @@ packages: '@babel/code-frame': 7.22.5 '@babel/parser': 7.22.6 '@babel/types': 7.22.5 - dev: false /@babel/traverse@7.22.1: resolution: {integrity: sha512-lAWkdCoUFnmwLBhIRLciFntGYsIIoC6vIbN8zrLPqBnJmPu7Z6nzqnKd7FsxQUNAvZfVZ0x6KdNvNp8zWIOHSQ==} @@ -850,6 +950,7 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color + dev: false /@babel/traverse@7.22.6: resolution: {integrity: sha512-53CijMvKlLIDlOTrdWiHileRddlIiwUIyCKqYa7lYnnPldXCG5dUSN38uT0cA6i7rHWNKJLH0VU/Kxdr1GzB3w==} @@ -867,7 +968,6 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color - dev: false /@babel/types@7.22.3: resolution: {integrity: sha512-P3na3xIQHTKY4L0YOG7pM8M8uoUIB910WQaSiiMCZUC2Cy8XFEQONGABFnHWBa2gpGKODTAJcNhi5Zk0sLRrzg==} @@ -876,6 +976,7 @@ packages: '@babel/helper-string-parser': 7.22.5 '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 + dev: false /@babel/types@7.22.5: resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==} @@ -1317,7 +1418,7 @@ packages: '@contentlayer/core': 0.3.4(esbuild@0.17.19)(markdown-wasm@1.2.0) '@contentlayer/utils': 0.3.4 chokidar: 3.5.3 - fast-glob: 3.2.12 + fast-glob: 3.3.0 gray-matter: 4.0.3 imagescript: 1.2.16 micromatch: 4.0.5 @@ -1641,6 +1742,16 @@ packages: eslint: 8.41.0 eslint-visitor-keys: 3.4.1 + /@eslint-community/eslint-utils@4.4.0(eslint@8.44.0): + resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 + dependencies: + eslint: 8.44.0 + eslint-visitor-keys: 3.4.1 + dev: true + /@eslint-community/regexpp@4.5.1: resolution: {integrity: sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==} engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} @@ -1661,10 +1772,32 @@ packages: transitivePeerDependencies: - supports-color + /@eslint/eslintrc@2.1.0: + resolution: {integrity: sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + ajv: 6.12.6 + debug: 4.3.4 + espree: 9.6.0 + globals: 13.20.0 + ignore: 5.2.4 + import-fresh: 3.3.0 + js-yaml: 4.1.0 + minimatch: 3.1.2 + strip-json-comments: 3.1.1 + transitivePeerDependencies: + - supports-color + dev: true + /@eslint/js@8.41.0: resolution: {integrity: sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + /@eslint/js@8.44.0: + resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dev: true + /@faker-js/faker@7.6.0: resolution: {integrity: sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==} engines: {node: '>=14.0.0', npm: '>=6.0.0'} @@ -1723,6 +1856,17 @@ packages: react-hook-form: 7.44.2(react@18.2.0) dev: false + /@humanwhocodes/config-array@0.11.10: + resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} + engines: {node: '>=10.10.0'} + dependencies: + '@humanwhocodes/object-schema': 1.2.1 + debug: 4.3.4 + minimatch: 3.1.2 + transitivePeerDependencies: + - supports-color + dev: true + /@humanwhocodes/config-array@0.11.8: resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==} engines: {node: '>=10.10.0'} @@ -1749,11 +1893,11 @@ packages: '@vue/compiler-sfc': optional: true dependencies: - '@babel/core': 7.22.1 - '@babel/generator': 7.22.3 + '@babel/core': 7.22.6 + '@babel/generator': 7.22.5 '@babel/parser': 7.22.6 - '@babel/traverse': 7.22.1 - '@babel/types': 7.22.3 + '@babel/traverse': 7.22.6 + '@babel/types': 7.22.5 javascript-natural-sort: 0.7.1 lodash.clone: 4.5.0 lodash.isequal: 4.5.0 @@ -1804,7 +1948,7 @@ packages: engines: {node: '>=12'} dependencies: jsbi: 4.3.0 - tslib: 2.5.2 + tslib: 2.6.0 dev: false /@manypkg/cli@0.20.0: @@ -1912,10 +2056,6 @@ packages: - supports-color dev: false - /@next/env@13.4.4: - resolution: {integrity: sha512-q/y7VZj/9YpgzDe64Zi6rY1xPizx80JjlU2BTevlajtaE3w1LqweH1gGgxou2N7hdFosXHjGrI4OUvtFXXhGLg==} - dev: false - /@next/env@13.4.8: resolution: {integrity: sha512-twuSf1klb3k9wXI7IZhbZGtFCWvGD4wXTY2rmvzIgVhXhs7ISThrbNyutBx3jWIL8Y/Hk9+woytFz5QsgtcRKQ==} dev: false @@ -1932,15 +2072,6 @@ packages: glob: 7.1.7 dev: false - /@next/swc-darwin-arm64@13.4.4: - resolution: {integrity: sha512-xfjgXvp4KalNUKZMHmsFxr1Ug+aGmmO6NWP0uoh4G3WFqP/mJ1xxfww0gMOeMeSq/Jyr5k7DvoZ2Pv+XOITTtw==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: false - optional: true - /@next/swc-darwin-arm64@13.4.8: resolution: {integrity: sha512-MSFplVM4dTWOuKAUv0XR9gY7AWtMSBu9os9f+kp+s5rWhM1I2CdR3obFttd6366nS/W/VZxbPM5oEIdlIa46zA==} engines: {node: '>= 10'} @@ -1950,15 +2081,6 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@13.4.4: - resolution: {integrity: sha512-ZY9Ti1hkIwJsxGus3nlubIkvYyB0gNOYxKrfsOrLEqD0I2iCX8D7w8v6QQZ2H+dDl6UT29oeEUdDUNGk4UEpfg==} - engines: {node: '>= 10'} - cpu: [x64] - os: [darwin] - requiresBuild: true - dev: false - optional: true - /@next/swc-darwin-x64@13.4.8: resolution: {integrity: sha512-Reox+UXgonon9P0WNDE6w85DGtyBqGitl/ryznOvn6TvfxEaZIpTgeu3ZrJLU9dHSMhiK7YAM793mE/Zii2/Qw==} engines: {node: '>= 10'} @@ -1968,15 +2090,6 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@13.4.4: - resolution: {integrity: sha512-+KZnDeMShYkpkqAvGCEDeqYTRADJXc6SY1jWXz+Uo6qWQO/Jd9CoyhTJwRSxvQA16MoYzvILkGaDqirkRNctyA==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: false - optional: true - /@next/swc-linux-arm64-gnu@13.4.8: resolution: {integrity: sha512-kdyzYvAYtqQVgzIKNN7e1rLU8aZv86FDSRqPlOkKZlvqudvTO0iohuTPmnEEDlECeBM6qRPShNffotDcU/R2KA==} engines: {node: '>= 10'} @@ -1986,15 +2099,6 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@13.4.4: - resolution: {integrity: sha512-evC1twrny2XDT4uOftoubZvW3EG0zs0ZxMwEtu/dDGVRO5n5pT48S8qqEIBGBUZYu/Xx4zzpOkIxx1vpWdE+9A==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: false - optional: true - /@next/swc-linux-arm64-musl@13.4.8: resolution: {integrity: sha512-oWxx4yRkUGcR81XwbI+T0zhZ3bDF6V1aVLpG+C7hSG50ULpV8gC39UxVO22/bv93ZlcfMY4zl8xkz9Klct6dpQ==} engines: {node: '>= 10'} @@ -2004,15 +2108,6 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@13.4.4: - resolution: {integrity: sha512-PX706XcCHr2FfkyhP2lpf+pX/tUvq6/ke7JYnnr0ykNdEMo+sb7cC/o91gnURh4sPYSiZJhsF2gbIqg9rciOHQ==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: false - optional: true - /@next/swc-linux-x64-gnu@13.4.8: resolution: {integrity: sha512-anhtvuO6eE9YRhYnaEGTfbpH3L5gT/9qPFcNoi6xS432r/4DAtpJY8kNktqkTVevVIC/pVumqO8tV59PR3zbNg==} engines: {node: '>= 10'} @@ -2022,15 +2117,6 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@13.4.4: - resolution: {integrity: sha512-TKUUx3Ftd95JlHV6XagEnqpT204Y+IsEa3awaYIjayn0MOGjgKZMZibqarK3B1FsMSPaieJf2FEAcu9z0yT5aA==} - engines: {node: '>= 10'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: false - optional: true - /@next/swc-linux-x64-musl@13.4.8: resolution: {integrity: sha512-aR+J4wWfNgH1DwCCBNjan7Iumx0lLtn+2/rEYuhIrYLY4vnxqSVGz9u3fXcgUwo6Q9LT8NFkaqK1vPprdq+BXg==} engines: {node: '>= 10'} @@ -2040,15 +2126,6 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@13.4.4: - resolution: {integrity: sha512-FP8AadgSq4+HPtim7WBkCMGbhr5vh9FePXiWx9+YOdjwdQocwoCK5ZVC3OW8oh3TWth6iJ0AXJ/yQ1q1cwSZ3A==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [win32] - requiresBuild: true - dev: false - optional: true - /@next/swc-win32-arm64-msvc@13.4.8: resolution: {integrity: sha512-OWBKIrJwQBTqrat0xhxEB/jcsjJR3+diD9nc/Y8F1mRdQzsn4bPsomgJyuqPVZs6Lz3K18qdIkvywmfSq75SsQ==} engines: {node: '>= 10'} @@ -2058,15 +2135,6 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@13.4.4: - resolution: {integrity: sha512-3WekVmtuA2MCdcAOrgrI+PuFiFURtSyyrN1I3UPtS0ckR2HtLqyqmS334Eulf15g1/bdwMteePdK363X/Y9JMg==} - engines: {node: '>= 10'} - cpu: [ia32] - os: [win32] - requiresBuild: true - dev: false - optional: true - /@next/swc-win32-ia32-msvc@13.4.8: resolution: {integrity: sha512-agiPWGjUndXGTOn4ChbKipQXRA6/UPkywAWIkx7BhgGv48TiJfHTK6MGfBoL9tS6B4mtW39++uy0wFPnfD0JWg==} engines: {node: '>= 10'} @@ -2076,15 +2144,6 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@13.4.4: - resolution: {integrity: sha512-AHRITu/CrlQ+qzoqQtEMfaTu7GHaQ6bziQln/pVWpOYC1wU+Mq6VQQFlsDtMCnDztPZtppAXdvvbNS7pcfRzlw==} - engines: {node: '>= 10'} - cpu: [x64] - os: [win32] - requiresBuild: true - dev: false - optional: true - /@next/swc-win32-x64-msvc@13.4.8: resolution: {integrity: sha512-UIRKoByVKbuR6SnFG4JM8EMFlJrfEGuUQ1ihxzEleWcNwRMMiVaCj1KyqfTOW8VTQhJ0u8P1Ngg6q1RwnIBTtw==} engines: {node: '>= 10'} @@ -2097,7 +2156,6 @@ packages: /@nicolo-ribaudo/semver-v6@6.3.3: resolution: {integrity: sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==} hasBin: true - dev: false /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} @@ -2281,7 +2339,7 @@ packages: '@opentelemetry/propagator-b3': 1.13.0(@opentelemetry/api@1.4.1) '@opentelemetry/propagator-jaeger': 1.13.0(@opentelemetry/api@1.4.1) '@opentelemetry/sdk-trace-base': 1.13.0(@opentelemetry/api@1.4.1) - semver: 7.5.1 + semver: 7.5.3 dev: false /@opentelemetry/semantic-conventions@1.13.0: @@ -2294,11 +2352,11 @@ packages: engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} dependencies: cross-spawn: 7.0.3 - fast-glob: 3.2.12 + fast-glob: 3.3.0 is-glob: 4.0.3 open: 9.1.0 picocolors: 1.0.0 - tslib: 2.5.2 + tslib: 2.6.0 dev: false /@protobufjs/aspromise@1.1.2: @@ -2353,7 +2411,7 @@ packages: /@radix-ui/primitive@1.0.0: resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==} dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 dev: false /@radix-ui/primitive@1.0.1: @@ -2589,7 +2647,21 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 + react: 18.2.0 + dev: false + + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.14)(react@18.2.0): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@types/react': 18.2.14 react: 18.2.0 dev: false @@ -2602,7 +2674,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@types/react': 18.2.7 react: 18.2.0 dev: false @@ -2638,7 +2710,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 react: 18.2.0 dev: false @@ -2662,7 +2734,7 @@ packages: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/primitive': 1.0.0 '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0) '@radix-ui/react-context': 1.0.0(react@18.2.0) @@ -2737,7 +2809,7 @@ packages: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/primitive': 1.0.0 '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0) '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0) @@ -2804,7 +2876,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 react: 18.2.0 dev: false @@ -2828,7 +2900,7 @@ packages: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0) '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0) @@ -2901,7 +2973,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0) react: 18.2.0 dev: false @@ -3115,7 +3187,7 @@ packages: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -3148,7 +3220,7 @@ packages: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0) '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0) react: 18.2.0 @@ -3183,7 +3255,7 @@ packages: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-slot': 1.0.0(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -3418,11 +3490,26 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0) react: 18.2.0 dev: false + /@radix-ui/react-slot@1.0.2(@types/react@18.2.14)(react@18.2.0): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0) + '@types/react': 18.2.14 + react: 18.2.0 + dev: false + /@radix-ui/react-slot@1.0.2(@types/react@18.2.7)(react@18.2.0): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -3432,7 +3519,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) '@types/react': 18.2.7 react: 18.2.0 @@ -3612,7 +3699,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 react: 18.2.0 dev: false @@ -3635,7 +3722,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0) react: 18.2.0 dev: false @@ -3660,7 +3747,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0) react: 18.2.0 dev: false @@ -3685,7 +3772,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 react: 18.2.0 dev: false @@ -3781,6 +3868,11 @@ packages: /@rushstack/eslint-patch@1.3.0: resolution: {integrity: sha512-IthPJsJR85GhOkp3Hvp8zFOPK5ynKn6STyHa/WZpioK7E1aYDiBzpqQPrngc14DszIUkIrdd3k9Iu0XSzlP/1w==} + dev: false + + /@rushstack/eslint-patch@1.3.2: + resolution: {integrity: sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==} + dev: true /@shuding/opentype.js@1.4.0-beta.0: resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==} @@ -3799,7 +3891,7 @@ packages: /@swc/helpers@0.5.1: resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==} dependencies: - tslib: 2.5.2 + tslib: 2.6.0 dev: false /@szmarczak/http-timer@1.1.2: @@ -3829,7 +3921,7 @@ packages: /@ts-morph/common@0.19.0: resolution: {integrity: sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==} dependencies: - fast-glob: 3.2.12 + fast-glob: 3.3.0 minimatch: 7.4.6 mkdirp: 2.1.6 path-browserify: 1.0.1 @@ -4064,6 +4156,19 @@ packages: dependencies: '@types/react': 18.2.7 + /@types/react-dom@18.2.6: + resolution: {integrity: sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==} + dependencies: + '@types/react': 18.2.14 + dev: true + + /@types/react@18.2.14: + resolution: {integrity: sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==} + dependencies: + '@types/prop-types': 15.7.5 + '@types/scheduler': 0.16.3 + csstype: 3.1.2 + /@types/react@18.2.7: resolution: {integrity: sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==} dependencies: @@ -4119,6 +4224,27 @@ packages: typescript: 4.9.5 transitivePeerDependencies: - supports-color + dev: false + + /@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@4.9.5): + resolution: {integrity: sha512-yGr4Sgyh8uO6fSi9hw3jAFXNBHbCtKKFMdX2IkT3ZqpKmtAq3lHS4ixB/COFuAIJpwl9/AqF7j72ZDWYKmIfvg==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/scope-manager': 5.61.0 + '@typescript-eslint/types': 5.61.0 + '@typescript-eslint/typescript-estree': 5.61.0(typescript@4.9.5) + debug: 4.3.4 + eslint: 8.44.0 + typescript: 4.9.5 + transitivePeerDependencies: + - supports-color + dev: true /@typescript-eslint/scope-manager@5.59.7: resolution: {integrity: sha512-FL6hkYWK9zBGdxT2wWEd2W8ocXMu3K94i3gvMrjXpx+koFYdYV7KprKfirpgY34vTGzEPPuKoERpP8kD5h7vZQ==} @@ -4126,10 +4252,25 @@ packages: dependencies: '@typescript-eslint/types': 5.59.7 '@typescript-eslint/visitor-keys': 5.59.7 + dev: false + + /@typescript-eslint/scope-manager@5.61.0: + resolution: {integrity: sha512-W8VoMjoSg7f7nqAROEmTt6LoBpn81AegP7uKhhW5KzYlehs8VV0ZW0fIDVbcZRcaP3aPSW+JZFua+ysQN+m/Nw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + '@typescript-eslint/types': 5.61.0 + '@typescript-eslint/visitor-keys': 5.61.0 + dev: true /@typescript-eslint/types@5.59.7: resolution: {integrity: sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dev: false + + /@typescript-eslint/types@5.61.0: + resolution: {integrity: sha512-ldyueo58KjngXpzloHUog/h9REmHl59G1b3a5Sng1GfBo14BkS3ZbMEb3693gnP1k//97lh7bKsp6/V/0v1veQ==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dev: true /@typescript-eslint/typescript-estree@5.59.7(typescript@4.9.5): resolution: {integrity: sha512-4A1NtZ1I3wMN2UGDkU9HMBL+TIQfbrh4uS0WDMMpf3xMRursDbqEf1ahh6vAAe3mObt8k3ZATnezwG4pdtWuUQ==} @@ -4150,6 +4291,28 @@ packages: typescript: 4.9.5 transitivePeerDependencies: - supports-color + dev: false + + /@typescript-eslint/typescript-estree@5.61.0(typescript@4.9.5): + resolution: {integrity: sha512-Fud90PxONnnLZ36oR5ClJBLTLfU4pIWBmnvGwTbEa2cXIqj70AEDEmOmpkFComjBZ/037ueKrOdHuYmSFVD7Rw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/types': 5.61.0 + '@typescript-eslint/visitor-keys': 5.61.0 + debug: 4.3.4 + globby: 11.1.0 + is-glob: 4.0.3 + semver: 7.5.3 + tsutils: 3.21.0(typescript@4.9.5) + typescript: 4.9.5 + transitivePeerDependencies: + - supports-color + dev: true /@typescript-eslint/visitor-keys@5.59.7: resolution: {integrity: sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==} @@ -4157,6 +4320,15 @@ packages: dependencies: '@typescript-eslint/types': 5.59.7 eslint-visitor-keys: 3.4.1 + dev: false + + /@typescript-eslint/visitor-keys@5.61.0: + resolution: {integrity: sha512-50XQ5VdbWrX06mQXhy93WywSFZZGsv3EOjq+lqp6WC2t+j3mb6A9xYVdrRxafvK88vg9k9u+CT4l6D8PEatjKg==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + '@typescript-eslint/types': 5.61.0 + eslint-visitor-keys: 3.4.1 + dev: true /@vercel/analytics@1.0.1: resolution: {integrity: sha512-Ux0c9qUfkcPqng3vrR0GTrlQdqNJ2JREn/2ydrVuKwM3RtMfF2mWX31Ijqo1opSjNAq6rK76PwtANw6kl6TAow==} @@ -4218,6 +4390,13 @@ packages: through: 2.3.8 dev: false + /acorn-jsx@5.3.2(acorn@8.10.0): + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + dependencies: + acorn: 8.10.0 + /acorn-jsx@5.3.2(acorn@8.8.2): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -4229,6 +4408,11 @@ packages: resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==} engines: {node: '>=0.4.0'} + /acorn@8.10.0: + resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} + engines: {node: '>=0.4.0'} + hasBin: true + /acorn@8.8.2: resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==} engines: {node: '>=0.4.0'} @@ -4327,6 +4511,13 @@ packages: resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==} dependencies: deep-equal: 2.2.1 + dev: false + + /aria-query@5.3.0: + resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} + dependencies: + dequal: 2.0.3 + dev: true /array-buffer-byte-length@1.0.0: resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==} @@ -4433,8 +4624,8 @@ packages: peerDependencies: postcss: ^8.1.0 dependencies: - browserslist: 4.21.7 - caniuse-lite: 1.0.30001489 + browserslist: 4.21.9 + caniuse-lite: 1.0.30001512 fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -4453,6 +4644,13 @@ packages: resolution: {integrity: sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==} dependencies: deep-equal: 2.2.1 + dev: false + + /axobject-query@3.2.1: + resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} + dependencies: + dequal: 2.0.3 + dev: true /bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -4531,15 +4729,15 @@ packages: wcwidth: 1.0.1 dev: false - /browserslist@4.21.7: - resolution: {integrity: sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==} + /browserslist@4.21.9: + resolution: {integrity: sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001489 - electron-to-chromium: 1.4.411 + caniuse-lite: 1.0.30001512 + electron-to-chromium: 1.4.450 node-releases: 2.0.12 - update-browserslist-db: 1.0.11(browserslist@4.21.7) + update-browserslist-db: 1.0.11(browserslist@4.21.9) /buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -4618,7 +4816,7 @@ packages: resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==} dependencies: pascal-case: 3.1.2 - tslib: 2.5.2 + tslib: 2.6.0 dev: false /camelcase-css@2.0.1: @@ -4645,6 +4843,10 @@ packages: /caniuse-lite@1.0.30001489: resolution: {integrity: sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==} + dev: false + + /caniuse-lite@1.0.30001512: + resolution: {integrity: sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw==} /ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} @@ -5273,6 +5475,7 @@ packages: which-boxed-primitive: 1.0.2 which-collection: 1.0.1 which-typed-array: 1.1.9 + dev: false /deep-extend@0.6.0: resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==} @@ -5375,7 +5578,7 @@ packages: /dom-helpers@3.4.0: resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==} dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 dev: false /dot-prop@5.3.0: @@ -5394,8 +5597,8 @@ packages: resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==} dev: false - /electron-to-chromium@1.4.411: - resolution: {integrity: sha512-5VXLW4Qw89vM2WTICHua/y8v7fKGDRVa2VPOtBB9IpLvW316B+xd8yD1wTmLPY2ot/00P/qt87xdolj4aG/Lzg==} + /electron-to-chromium@1.4.450: + resolution: {integrity: sha512-BLG5HxSELlrMx7dJ2s+8SFlsCtJp37Zpk2VAxyC6CZtbc+9AJeZHfYHbrlSgdXp6saQ8StMqOTEDaBKgA7u1sw==} /emoji-regex@10.2.1: resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==} @@ -5486,6 +5689,7 @@ packages: is-string: 1.0.7 isarray: 2.0.5 stop-iteration-iterator: 1.0.0 + dev: false /es-set-tostringtag@2.0.1: resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==} @@ -5558,7 +5762,7 @@ packages: engines: {node: '>=12'} dev: true - /eslint-config-next@13.0.0(eslint@8.41.0)(typescript@4.9.5): + /eslint-config-next@13.0.0(eslint@8.44.0)(typescript@4.9.5): resolution: {integrity: sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==} peerDependencies: eslint: ^7.23.0 || ^8.0.0 @@ -5568,15 +5772,15 @@ packages: optional: true dependencies: '@next/eslint-plugin-next': 13.0.0 - '@rushstack/eslint-patch': 1.3.0 - '@typescript-eslint/parser': 5.59.7(eslint@8.41.0)(typescript@4.9.5) - eslint: 8.41.0 + '@rushstack/eslint-patch': 1.3.2 + '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@4.9.5) + eslint: 8.44.0 eslint-import-resolver-node: 0.3.7 - eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.27.5)(eslint@8.41.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint@8.41.0) - eslint-plugin-jsx-a11y: 6.7.1(eslint@8.41.0) - eslint-plugin-react: 7.32.2(eslint@8.41.0) - eslint-plugin-react-hooks: 4.6.0(eslint@8.41.0) + eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.27.5)(eslint@8.44.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0) + eslint-plugin-jsx-a11y: 6.7.1(eslint@8.44.0) + eslint-plugin-react: 7.32.2(eslint@8.44.0) + eslint-plugin-react-hooks: 4.6.0(eslint@8.44.0) typescript: 4.9.5 transitivePeerDependencies: - eslint-import-resolver-webpack @@ -5598,7 +5802,7 @@ packages: eslint: 8.41.0 eslint-import-resolver-node: 0.3.7 eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.41.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint@8.41.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.41.0) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.41.0) eslint-plugin-react: 7.32.2(eslint@8.41.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.41.0) @@ -5615,6 +5819,16 @@ packages: eslint: '>=7.0.0' dependencies: eslint: 8.41.0 + dev: false + + /eslint-config-prettier@8.8.0(eslint@8.44.0): + resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==} + hasBin: true + peerDependencies: + eslint: '>=7.0.0' + dependencies: + eslint: 8.44.0 + dev: true /eslint-config-turbo@1.9.9(eslint@8.41.0): resolution: {integrity: sha512-OQLvRK9Ej/8HIEAW6e9hPu3nk1nCYWJ76voB4eOIaI2fYeIKC++0/r0zJPMOD8puo5V1DH+Gkd0XioKpL14ncg==} @@ -5634,7 +5848,7 @@ packages: transitivePeerDependencies: - supports-color - /eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.27.5)(eslint@8.41.0): + /eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.27.5)(eslint@8.44.0): resolution: {integrity: sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==} engines: {node: '>=4'} peerDependencies: @@ -5642,8 +5856,8 @@ packages: eslint-plugin-import: '*' dependencies: debug: 4.3.4 - eslint: 8.41.0 - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint@8.41.0) + eslint: 8.44.0 + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0) glob: 7.2.3 is-glob: 4.0.3 resolve: 1.22.2 @@ -5663,7 +5877,7 @@ packages: enhanced-resolve: 5.14.1 eslint: 8.41.0 eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.41.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint@8.41.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.41.0) get-tsconfig: 4.5.0 globby: 13.1.4 is-core-module: 2.12.1 @@ -5706,7 +5920,7 @@ packages: - supports-color dev: false - /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint@8.41.0): + /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0): resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} engines: {node: '>=4'} peerDependencies: @@ -5727,14 +5941,16 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.59.7(eslint@8.41.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@4.9.5) debug: 3.2.7 - eslint: 8.41.0 + eslint: 8.44.0 eslint-import-resolver-node: 0.3.7 + eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.27.5)(eslint@8.44.0) transitivePeerDependencies: - supports-color + dev: true - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.7)(eslint@8.41.0): + /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.41.0): resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} engines: {node: '>=4'} peerDependencies: @@ -5752,7 +5968,7 @@ packages: doctrine: 2.1.0 eslint: 8.41.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint@8.41.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.41.0) has: 1.0.3 is-core-module: 2.12.0 is-glob: 4.0.3 @@ -5765,6 +5981,40 @@ packages: - eslint-import-resolver-typescript - eslint-import-resolver-webpack - supports-color + dev: false + + /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0): + resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + dependencies: + '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@4.9.5) + array-includes: 3.1.6 + array.prototype.flat: 1.3.1 + array.prototype.flatmap: 1.3.1 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.44.0 + eslint-import-resolver-node: 0.3.7 + eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@2.7.1)(eslint@8.44.0) + has: 1.0.3 + is-core-module: 2.12.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.values: 1.1.6 + resolve: 1.22.2 + semver: 6.3.0 + tsconfig-paths: 3.14.2 + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + dev: true /eslint-plugin-jsx-a11y@6.7.1(eslint@8.41.0): resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==} @@ -5789,6 +6039,32 @@ packages: object.entries: 1.1.6 object.fromentries: 2.0.6 semver: 6.3.0 + dev: false + + /eslint-plugin-jsx-a11y@6.7.1(eslint@8.44.0): + resolution: {integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==} + engines: {node: '>=4.0'} + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 + dependencies: + '@babel/runtime': 7.22.6 + aria-query: 5.3.0 + array-includes: 3.1.6 + array.prototype.flatmap: 1.3.1 + ast-types-flow: 0.0.7 + axe-core: 4.7.2 + axobject-query: 3.2.1 + damerau-levenshtein: 1.0.8 + emoji-regex: 9.2.2 + eslint: 8.44.0 + has: 1.0.3 + jsx-ast-utils: 3.3.4 + language-tags: 1.0.5 + minimatch: 3.1.2 + object.entries: 1.1.6 + object.fromentries: 2.0.6 + semver: 6.3.0 + dev: true /eslint-plugin-react-hooks@4.6.0(eslint@8.41.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} @@ -5797,6 +6073,16 @@ packages: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 dependencies: eslint: 8.41.0 + dev: false + + /eslint-plugin-react-hooks@4.6.0(eslint@8.44.0): + resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} + engines: {node: '>=10'} + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 + dependencies: + eslint: 8.44.0 + dev: true /eslint-plugin-react@7.32.2(eslint@8.41.0): resolution: {integrity: sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==} @@ -5820,6 +6106,31 @@ packages: resolve: 2.0.0-next.4 semver: 6.3.0 string.prototype.matchall: 4.0.8 + dev: false + + /eslint-plugin-react@7.32.2(eslint@8.44.0): + resolution: {integrity: sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==} + engines: {node: '>=4'} + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 + dependencies: + array-includes: 3.1.6 + array.prototype.flatmap: 1.3.1 + array.prototype.tosorted: 1.1.1 + doctrine: 2.1.0 + eslint: 8.44.0 + estraverse: 5.3.0 + jsx-ast-utils: 3.3.3 + minimatch: 3.1.2 + object.entries: 1.1.6 + object.fromentries: 2.0.6 + object.hasown: 1.1.2 + object.values: 1.1.6 + prop-types: 15.8.1 + resolve: 2.0.0-next.4 + semver: 6.3.0 + string.prototype.matchall: 4.0.8 + dev: true /eslint-plugin-tailwindcss@3.12.0(tailwindcss@3.3.2): resolution: {integrity: sha512-DMfg8NcSV04V1v3iBgJGEhmRuapW36XZXyRV8WHdNFGEXGUkBwM9R8MujguKXeQKBG6VhjiX4t98rhzXdIlUFw==} @@ -5830,6 +6141,18 @@ packages: fast-glob: 3.2.12 postcss: 8.4.24 tailwindcss: 3.3.2(ts-node@10.9.1) + dev: false + + /eslint-plugin-tailwindcss@3.13.0(tailwindcss@3.3.2): + resolution: {integrity: sha512-Fcep4KDRLWaK3KmkQbdyKHG0P4GdXFmXdDaweTIPcgOP60OOuWFbh1++dufRT28Q4zpKTKaHwTsXPJ4O/EjU2Q==} + engines: {node: '>=12.13.0'} + peerDependencies: + tailwindcss: ^3.3.2 + dependencies: + fast-glob: 3.3.0 + postcss: 8.4.24 + tailwindcss: 3.3.2(ts-node@10.9.1) + dev: true /eslint-plugin-turbo@1.9.9(eslint@8.41.0): resolution: {integrity: sha512-BgtBMcgNd2YKiHbn1clRiEAmnlpSl19kt9yfIhFEsNIVPg2Gx0O1H++vWXGzMtT19mjHG4Unx0uIMRENKnDYLg==} @@ -5897,6 +6220,54 @@ packages: transitivePeerDependencies: - supports-color + /eslint@8.44.0: + resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + hasBin: true + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0) + '@eslint-community/regexpp': 4.5.1 + '@eslint/eslintrc': 2.1.0 + '@eslint/js': 8.44.0 + '@humanwhocodes/config-array': 0.11.10 + '@humanwhocodes/module-importer': 1.0.1 + '@nodelib/fs.walk': 1.2.8 + ajv: 6.12.6 + chalk: 4.1.2 + cross-spawn: 7.0.3 + debug: 4.3.4 + doctrine: 3.0.0 + escape-string-regexp: 4.0.0 + eslint-scope: 7.2.0 + eslint-visitor-keys: 3.4.1 + espree: 9.6.0 + esquery: 1.5.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 6.0.1 + find-up: 5.0.0 + glob-parent: 6.0.2 + globals: 13.20.0 + graphemer: 1.4.0 + ignore: 5.2.4 + import-fresh: 3.3.0 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + is-path-inside: 3.0.3 + js-yaml: 4.1.0 + json-stable-stringify-without-jsonify: 1.0.1 + levn: 0.4.1 + lodash.merge: 4.6.2 + minimatch: 3.1.2 + natural-compare: 1.4.0 + optionator: 0.9.3 + strip-ansi: 6.0.1 + strip-json-comments: 3.1.1 + text-table: 0.2.0 + transitivePeerDependencies: + - supports-color + dev: true + /espree@9.5.2: resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -5905,6 +6276,15 @@ packages: acorn-jsx: 5.3.2(acorn@8.8.2) eslint-visitor-keys: 3.4.1 + /espree@9.6.0: + resolution: {integrity: sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + acorn: 8.10.0 + acorn-jsx: 5.3.2(acorn@8.10.0) + eslint-visitor-keys: 3.4.1 + dev: true + /esprima@4.0.1: resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} engines: {node: '>=4'} @@ -6094,6 +6474,16 @@ packages: merge2: 1.4.1 micromatch: 4.0.5 + /fast-glob@3.3.0: + resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + /fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} @@ -6406,7 +6796,7 @@ packages: dependencies: array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.2.12 + fast-glob: 3.3.0 ignore: 5.2.4 merge2: 1.4.1 slash: 3.0.0 @@ -6416,7 +6806,7 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dependencies: dir-glob: 3.0.1 - fast-glob: 3.2.12 + fast-glob: 3.3.0 ignore: 5.2.4 merge2: 1.4.1 slash: 4.0.0 @@ -6789,6 +7179,7 @@ packages: dependencies: call-bind: 1.0.2 has-tostringtag: 1.0.0 + dev: false /is-array-buffer@3.0.2: resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==} @@ -6842,6 +7233,7 @@ packages: resolution: {integrity: sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==} dependencies: has: 1.0.3 + dev: false /is-core-module@2.12.1: resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==} @@ -6916,6 +7308,7 @@ packages: /is-map@2.0.2: resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} + dev: false /is-nan@1.3.2: resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==} @@ -6982,6 +7375,7 @@ packages: /is-set@2.0.2: resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==} + dev: false /is-shared-array-buffer@1.0.2: resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==} @@ -7040,6 +7434,7 @@ packages: /is-weakmap@2.0.1: resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==} + dev: false /is-weakref@1.0.2: resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} @@ -7051,6 +7446,7 @@ packages: dependencies: call-bind: 1.0.2 get-intrinsic: 1.2.1 + dev: false /is-windows@1.0.2: resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==} @@ -7066,6 +7462,7 @@ packages: /isarray@2.0.5: resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} + dev: false /isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -7187,6 +7584,16 @@ packages: array-includes: 3.1.6 object.assign: 4.1.4 + /jsx-ast-utils@3.3.4: + resolution: {integrity: sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==} + engines: {node: '>=4.0'} + dependencies: + array-includes: 3.1.6 + array.prototype.flat: 1.3.1 + object.assign: 4.1.4 + object.values: 1.1.6 + dev: true + /keyv@3.1.0: resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==} dependencies: @@ -7365,7 +7772,7 @@ packages: /lower-case@2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} dependencies: - tslib: 2.5.2 + tslib: 2.6.0 dev: false /lowercase-keys@1.0.1: @@ -7660,7 +8067,7 @@ packages: peerDependencies: esbuild: 0.* dependencies: - '@babel/runtime': 7.22.3 + '@babel/runtime': 7.22.6 '@esbuild-plugins/node-resolve': 0.1.4(esbuild@0.17.19) '@fal-works/esbuild-plugin-global-externals': 2.1.2 '@mdx-js/esbuild': 2.3.0(esbuild@0.17.19) @@ -7871,8 +8278,8 @@ packages: /micromark-extension-mdxjs@1.0.1: resolution: {integrity: sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==} dependencies: - acorn: 8.8.2 - acorn-jsx: 5.3.2(acorn@8.8.2) + acorn: 8.10.0 + acorn-jsx: 5.3.2(acorn@8.10.0) micromark-extension-mdx-expression: 1.0.5 micromark-extension-mdx-jsx: 1.0.4 micromark-extension-mdx-md: 1.0.1 @@ -8187,18 +8594,6 @@ packages: - supports-color dev: false - /next-themes@0.2.1(next@13.4.4)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} - peerDependencies: - next: '*' - react: '*' - react-dom: '*' - dependencies: - next: 13.4.4(@babel/core@7.22.1)(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-themes@0.2.1(next@13.4.8)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} peerDependencies: @@ -8206,13 +8601,13 @@ packages: react: '*' react-dom: '*' dependencies: - next: 13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.8(@babel/core@7.22.6)(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.4.4(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==} + /next@13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-lxUjndYKjZHGK3CWeN2RI+/6ni6EUvjiqGWXAYPxUfGIdFGQ5XoisrqAJ/dF74aP27buAfs8MKIbIMMdxjqSBg==} engines: {node: '>=16.8.0'} hasBin: true peerDependencies: @@ -8229,7 +8624,8 @@ packages: sass: optional: true dependencies: - '@next/env': 13.4.4 + '@next/env': 13.4.8 + '@opentelemetry/api': 1.4.1 '@swc/helpers': 0.5.1 busboy: 1.6.0 caniuse-lite: 1.0.30001489 @@ -8237,23 +8633,24 @@ packages: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(@babel/core@7.22.1)(react@18.2.0) + watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.4.4 - '@next/swc-darwin-x64': 13.4.4 - '@next/swc-linux-arm64-gnu': 13.4.4 - '@next/swc-linux-arm64-musl': 13.4.4 - '@next/swc-linux-x64-gnu': 13.4.4 - '@next/swc-linux-x64-musl': 13.4.4 - '@next/swc-win32-arm64-msvc': 13.4.4 - '@next/swc-win32-ia32-msvc': 13.4.4 - '@next/swc-win32-x64-msvc': 13.4.4 + '@next/swc-darwin-arm64': 13.4.8 + '@next/swc-darwin-x64': 13.4.8 + '@next/swc-linux-arm64-gnu': 13.4.8 + '@next/swc-linux-arm64-musl': 13.4.8 + '@next/swc-linux-x64-gnu': 13.4.8 + '@next/swc-linux-x64-musl': 13.4.8 + '@next/swc-win32-arm64-msvc': 13.4.8 + '@next/swc-win32-ia32-msvc': 13.4.8 + '@next/swc-win32-x64-msvc': 13.4.8 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros dev: false - /next@13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): + /next@13.4.8(@babel/core@7.22.6)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-lxUjndYKjZHGK3CWeN2RI+/6ni6EUvjiqGWXAYPxUfGIdFGQ5XoisrqAJ/dF74aP27buAfs8MKIbIMMdxjqSBg==} engines: {node: '>=16.8.0'} hasBin: true @@ -8272,14 +8669,13 @@ packages: optional: true dependencies: '@next/env': 13.4.8 - '@opentelemetry/api': 1.4.1 '@swc/helpers': 0.5.1 busboy: 1.6.0 caniuse-lite: 1.0.30001489 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.22.1)(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.22.6)(react@18.2.0) watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: @@ -8301,14 +8697,14 @@ packages: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} dependencies: lower-case: 2.0.2 - tslib: 2.5.2 + tslib: 2.6.0 dev: false - /node-abi@3.40.0: - resolution: {integrity: sha512-zNy02qivjjRosswoYmPi8hIKJRr8MpQyeKT6qlcq/OnOgA3Rhoae+IYOqsM9V5+JnHWmxKnWOT2GxvtqdtOCXA==} + /node-abi@3.45.0: + resolution: {integrity: sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==} engines: {node: '>=10'} dependencies: - semver: 7.5.1 + semver: 7.5.3 dev: false /node-addon-api@5.1.0: @@ -8368,7 +8764,7 @@ packages: dependencies: hosted-git-info: 4.1.0 is-core-module: 2.12.1 - semver: 7.5.1 + semver: 7.5.3 validate-npm-package-license: 3.0.4 dev: false @@ -8415,6 +8811,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.2.0 + dev: false /object-keys@1.1.1: resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==} @@ -8503,6 +8900,18 @@ packages: type-check: 0.4.0 word-wrap: 1.2.3 + /optionator@0.9.3: + resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==} + engines: {node: '>= 0.8.0'} + dependencies: + '@aashutoshrathi/word-wrap': 1.2.6 + deep-is: 0.1.4 + fast-levenshtein: 2.0.6 + levn: 0.4.1 + prelude-ls: 1.2.1 + type-check: 0.4.0 + dev: true + /ora@6.1.2: resolution: {integrity: sha512-EJQ3NiP5Xo94wJXIzAyOtSb0QEIAUu7m8t6UZ9krbz0vAJqr92JpcK/lEXg91q6B9pEGqrykkd2EQplnifDSBw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -8638,7 +9047,7 @@ packages: resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} dependencies: no-case: 3.0.4 - tslib: 2.5.2 + tslib: 2.6.0 dev: false /path-browserify@1.0.1: @@ -8826,7 +9235,7 @@ packages: minimist: 1.2.8 mkdirp-classic: 0.5.3 napi-build-utils: 1.0.2 - node-abi: 3.40.0 + node-abi: 3.45.0 pump: 3.0.0 rc: 1.2.8 simple-get: 4.0.1 @@ -9028,7 +9437,7 @@ packages: react: 18.2.0 react-remove-scroll-bar: 2.3.4(@types/react@18.2.7)(react@18.2.0) react-style-singleton: 2.2.1(@types/react@18.2.7)(react@18.2.0) - tslib: 2.5.2 + tslib: 2.6.0 use-callback-ref: 1.3.0(@types/react@18.2.7)(react@18.2.0) use-sidecar: 1.1.2(@types/react@18.2.7)(react@18.2.0) dev: false @@ -9590,6 +9999,14 @@ packages: hasBin: true dependencies: lru-cache: 6.0.0 + dev: false + + /semver@7.5.3: + resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==} + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: 6.0.0 /set-blocking@2.0.0: resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} @@ -9604,7 +10021,7 @@ packages: detect-libc: 2.0.1 node-addon-api: 5.1.0 prebuild-install: 7.1.1 - semver: 7.5.1 + semver: 7.5.3 simple-get: 4.0.1 tar-fs: 2.1.1 tunnel-agent: 0.6.0 @@ -9796,6 +10213,7 @@ packages: engines: {node: '>= 0.4'} dependencies: internal-slot: 1.0.5 + dev: false /stream-transform@2.1.3: resolution: {integrity: sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==} @@ -9951,6 +10369,24 @@ packages: react: 18.2.0 dev: false + /styled-jsx@5.1.1(@babel/core@7.22.6)(react@18.2.0): + resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} + engines: {node: '>= 12.0.0'} + peerDependencies: + '@babel/core': '*' + babel-plugin-macros: '*' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' + peerDependenciesMeta: + '@babel/core': + optional: true + babel-plugin-macros: + optional: true + dependencies: + '@babel/core': 7.22.6 + client-only: 0.0.1 + react: 18.2.0 + dev: false + /sucrase@3.32.0: resolution: {integrity: sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==} engines: {node: '>=8'} @@ -9992,13 +10428,17 @@ packages: engines: {node: ^14.18.0 || >=16.0.0} dependencies: '@pkgr/utils': 2.4.1 - tslib: 2.5.2 + tslib: 2.6.0 dev: false /tailwind-merge@1.12.0: resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==} dev: false + /tailwind-merge@1.13.2: + resolution: {integrity: sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==} + dev: false + /tailwindcss-animate@1.0.5(tailwindcss@3.3.2): resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==} peerDependencies: @@ -10007,6 +10447,14 @@ packages: tailwindcss: 3.3.2(ts-node@10.9.1) dev: false + /tailwindcss-animate@1.0.6(tailwindcss@3.3.2): + resolution: {integrity: sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + dependencies: + tailwindcss: 3.3.2(ts-node@10.9.1) + dev: false + /tailwindcss@3.3.2(ts-node@10.9.1): resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==} engines: {node: '>=14.0.0'} @@ -10267,6 +10715,10 @@ packages: resolution: {integrity: sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==} dev: false + /tslib@2.6.0: + resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==} + dev: false + /tsup@6.6.3(postcss@8.4.24)(ts-node@10.9.1)(typescript@4.9.5): resolution: {integrity: sha512-OLx/jFllYlVeZQ7sCHBuRVEQBBa1tFbouoc/gbYakyipjVQdWy/iQOvmExUA/ewap9iQ7tbJf9pW0PgcEFfJcQ==} engines: {node: '>=14.18'} @@ -10555,13 +11007,13 @@ packages: engines: {node: '>=8'} dev: false - /update-browserslist-db@1.0.11(browserslist@4.21.7): + /update-browserslist-db@1.0.11(browserslist@4.21.9): resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==} hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: - browserslist: 4.21.7 + browserslist: 4.21.9 escalade: 3.1.1 picocolors: 1.0.0 @@ -10916,6 +11368,7 @@ packages: is-set: 2.0.2 is-weakmap: 2.0.1 is-weakset: 2.0.2 + dev: false /which-module@2.0.1: resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==} diff --git a/templates/next-template/package.json b/templates/next-template/package.json index 863112cd21c..75f925958bb 100644 --- a/templates/next-template/package.json +++ b/templates/next-template/package.json @@ -18,26 +18,26 @@ "class-variance-authority": "^0.4.0", "clsx": "^1.2.1", "lucide-react": "0.105.0-alpha.4", - "next": "^13.4.4", + "next": "^13.4.8", "next-themes": "^0.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "sharp": "^0.31.3", - "tailwind-merge": "^1.12.0", - "tailwindcss-animate": "^1.0.5" + "tailwind-merge": "^1.13.2", + "tailwindcss-animate": "^1.0.6" }, "devDependencies": { "@ianvs/prettier-plugin-sort-imports": "^3.7.2", "@types/node": "^17.0.45", - "@types/react": "^18.2.7", - "@types/react-dom": "^18.2.4", - "@typescript-eslint/parser": "^5.59.7", + "@types/react": "^18.2.14", + "@types/react-dom": "^18.2.6", + "@typescript-eslint/parser": "^5.61.0", "autoprefixer": "^10.4.14", - "eslint": "^8.41.0", + "eslint": "^8.44.0", "eslint-config-next": "13.0.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-react": "^7.32.2", - "eslint-plugin-tailwindcss": "^3.12.0", + "eslint-plugin-tailwindcss": "^3.13.0", "postcss": "^8.4.24", "prettier": "^2.8.8", "tailwindcss": "^3.3.2", From ac5c727fc966a8cf859ced4a4074ddf9a31da922 Mon Sep 17 00:00:00 2001 From: vinay <94120295+vinaykulk621@users.noreply.github.com> Date: Thu, 6 Jul 2023 00:59:14 +0530 Subject: [PATCH 14/67] docs(www): add links to frameworks (#744) Co-authored-by: shadcn --- apps/www/content/docs/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx index 90f7ed4ef72..1588e156c37 100644 --- a/apps/www/content/docs/index.mdx +++ b/apps/www/content/docs/index.mdx @@ -46,7 +46,7 @@ Which frameworks are supported? -You can use any framework that supports React. Next.js, Astro, Remix, Gatsby etc. +You can use any framework that supports React. [Next.js](https://ui.shadcn.com/docs/installation/next), [Astro](https://ui.shadcn.com/docs/installation/astro), [Remix](https://ui.shadcn.com/docs/installation/remix), [Gatsby](https://ui.shadcn.com/docs/installation/gatsby) etc. From 26c8d0f662558aafd6c6a52e3c70dff0b668d207 Mon Sep 17 00:00:00 2001 From: Lennart Gastler Date: Wed, 12 Jul 2023 18:17:25 +0200 Subject: [PATCH 15/67] docs(www): improve astro guide (#858) --- apps/www/content/docs/installation/astro.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx index 1e84289240d..e689b207003 100644 --- a/apps/www/content/docs/installation/astro.mdx +++ b/apps/www/content/docs/installation/astro.mdx @@ -109,6 +109,20 @@ import '@/styles/globals.css' --- ``` +### Update astro tailwind config + +To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`. + +```ts {3-5} showLineNumbers +export default defineConfig({ + integrations: [ + tailwind({ + applyBaseStyles: false, + }), + ], +}) +``` + ### That's it You can now start adding components to your project. From f461ab091076c630eaa5ca1470bf8f6b5f9c85a8 Mon Sep 17 00:00:00 2001 From: Drew Greene Date: Thu, 13 Jul 2023 00:22:35 +0800 Subject: [PATCH 16/67] docs(www): update label in card demo (#799) Co-authored-by: shadcn --- .../registry/default/example/card-with-form.tsx | 16 ++++++++-------- .../registry/new-york/example/card-with-form.tsx | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/www/registry/default/example/card-with-form.tsx b/apps/www/registry/default/example/card-with-form.tsx index 8418a9b46d5..31c960e4f68 100644 --- a/apps/www/registry/default/example/card-with-form.tsx +++ b/apps/www/registry/default/example/card-with-form.tsx @@ -34,17 +34,17 @@ export default function CardWithForm() {
- +
diff --git a/apps/www/registry/new-york/example/card-with-form.tsx b/apps/www/registry/new-york/example/card-with-form.tsx index f055aafb3d3..dd77e264455 100644 --- a/apps/www/registry/new-york/example/card-with-form.tsx +++ b/apps/www/registry/new-york/example/card-with-form.tsx @@ -34,17 +34,17 @@ export default function CardWithForm() {
- +
From 5e172fc34fdf015aa0d141f52cc8c082b8ae6613 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pedro=20V=C3=ADtor=20Ribeiro=20Martins?= Date: Wed, 12 Jul 2023 13:34:05 -0300 Subject: [PATCH 17/67] docs(www): add typescript configuration question to cli docs (#898) Co-authored-by: shadcn --- apps/www/content/docs/cli.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx index c8bce1f0e0e..31d344a0ab3 100644 --- a/apps/www/content/docs/cli.mdx +++ b/apps/www/content/docs/cli.mdx @@ -16,6 +16,7 @@ npx shadcn-ui@latest init You will be asked a few questions to configure `components.json`: ```txt showLineNumbers +Would you like to use TypeScript (recommended)? no/yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › › app/globals.css From 91727ec4602a741127318d859ccf40ebf944d2e8 Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 27 Jul 2023 13:12:13 +0400 Subject: [PATCH 18/67] ci: rename repo owner (#1056) --- .github/workflows/prerelease-comment.yml | 2 +- .github/workflows/prerelease.yml | 2 +- .github/workflows/release.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/prerelease-comment.yml b/.github/workflows/prerelease-comment.yml index 51a4e55da87..ad21a549f9b 100644 --- a/.github/workflows/prerelease-comment.yml +++ b/.github/workflows/prerelease-comment.yml @@ -10,7 +10,7 @@ on: jobs: comment: if: | - github.repository_owner == 'shadcn' && + github.repository_owner == 'shadcn-ui' && ${{ github.event.workflow_run.conclusion == 'success' }} runs-on: ubuntu-latest name: Write comment to the PR diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml index d31a8ebaa80..ea414857c6f 100644 --- a/.github/workflows/prerelease.yml +++ b/.github/workflows/prerelease.yml @@ -10,7 +10,7 @@ on: jobs: prerelease: if: | - github.repository_owner == 'shadcn' && + github.repository_owner == 'shadcn-ui' && contains(github.event.pull_request.labels.*.name, '🚀 autorelease') name: Build & Publish a beta release to NPM runs-on: ubuntu-latest diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3ba8d4a6e8e..7ec48407d95 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -9,7 +9,7 @@ on: jobs: release: - if: ${{ github.repository_owner == 'shadcn' }} + if: ${{ github.repository_owner == 'shadcn-ui' }} name: Create a PR for release workflow runs-on: ubuntu-latest steps: From 6cf598d47f255658d0ca653fffe4058d59e325d5 Mon Sep 17 00:00:00 2001 From: munan56 Date: Fri, 28 Jul 2023 19:56:19 +0800 Subject: [PATCH 19/67] docs(www): update import path next.mdx (#1062) --- apps/www/content/docs/installation/next.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index 0fe520f5fdc..8cda7fde6fa 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -82,7 +82,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( From c9fecd4cdf54446a4cdcb24725bcaca5c6dfb98e Mon Sep 17 00:00:00 2001 From: Deveesh Shetty <89470104+Deveesh-Shetty@users.noreply.github.com> Date: Fri, 28 Jul 2023 17:33:43 +0530 Subject: [PATCH 20/67] fix(www): overflow issue in documentation (#1055) Co-authored-by: shadcn --- apps/www/app/docs/[[...slug]]/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx index 11443efd0cf..710e5a3a7a0 100644 --- a/apps/www/app/docs/[[...slug]]/page.tsx +++ b/apps/www/app/docs/[[...slug]]/page.tsx @@ -139,9 +139,11 @@ export default async function DocPage({ params }: DocPageProps) { {doc.toc && (
-
+
- +
+ +
From aca3ef97e35bd0b57c922a9189144efe725f771a Mon Sep 17 00:00:00 2001 From: shadcn Date: Fri, 28 Jul 2023 23:14:38 +0400 Subject: [PATCH 21/67] fix(www): responsive cards (#1066) --- apps/www/app/examples/cards/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/examples/cards/page.tsx b/apps/www/app/examples/cards/page.tsx index 8f3a94bfd51..2a5f91f64d7 100644 --- a/apps/www/app/examples/cards/page.tsx +++ b/apps/www/app/examples/cards/page.tsx @@ -75,7 +75,7 @@ export default function CardsPage() {
-
+
From da7729644c33edafbb175197e27f7477b71409c0 Mon Sep 17 00:00:00 2001 From: Abdulelah Date: Sun, 30 Jul 2023 14:33:18 +0300 Subject: [PATCH 22/67] fix(combobox): search language by label in examples (#989) Co-authored-by: shadcn --- apps/www/app/examples/forms/account/account-form.tsx | 6 +++--- apps/www/registry/default/example/combobox-form.tsx | 6 +++--- apps/www/registry/new-york/example/combobox-form.tsx | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/www/app/examples/forms/account/account-form.tsx b/apps/www/app/examples/forms/account/account-form.tsx index 082d29411a9..1f21b7fdd20 100644 --- a/apps/www/app/examples/forms/account/account-form.tsx +++ b/apps/www/app/examples/forms/account/account-form.tsx @@ -184,10 +184,10 @@ export function AccountForm() { {languages.map((language) => ( { - form.setValue("language", value) + onSelect={() => { + form.setValue("language", language.value) }} > {languages.map((language) => ( { - form.setValue("language", value) + onSelect={() => { + form.setValue("language", language.value) }} > {languages.map((language) => ( { - form.setValue("language", value) + onSelect={() => { + form.setValue("language", language.value) }} > {language.label} From 8cf0c7f3bac24cac9ec71255bba1c654d2170e0c Mon Sep 17 00:00:00 2001 From: Antsiferov Maxim Date: Sun, 30 Jul 2023 14:50:11 +0300 Subject: [PATCH 23/67] fix(alert): padding on Firefox (#1059) Co-authored-by: shadcn --- apps/www/pages/api/components.json | 2 +- apps/www/public/registry/styles/default/alert.json | 2 +- apps/www/public/registry/styles/new-york/alert.json | 2 +- apps/www/registry/default/ui/alert.tsx | 2 +- apps/www/registry/new-york/ui/alert.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/www/pages/api/components.json b/apps/www/pages/api/components.json index cf89b8f3f4f..94ff628884f 100644 --- a/apps/www/pages/api/components.json +++ b/apps/www/pages/api/components.json @@ -17,7 +17,7 @@ { "name": "alert.tsx", "dir": "components/ui", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "ui" diff --git a/apps/www/public/registry/styles/default/alert.json b/apps/www/public/registry/styles/default/alert.json index a04a1324a74..e1bc8d0fa79 100644 --- a/apps/www/public/registry/styles/default/alert.json +++ b/apps/www/public/registry/styles/default/alert.json @@ -3,7 +3,7 @@ "files": [ { "name": "alert.tsx", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/alert.json b/apps/www/public/registry/styles/new-york/alert.json index 2cc9a4ea497..6ba27db1fec 100644 --- a/apps/www/public/registry/styles/new-york/alert.json +++ b/apps/www/public/registry/styles/new-york/alert.json @@ -3,7 +3,7 @@ "files": [ { "name": "alert.tsx", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "components:ui" diff --git a/apps/www/registry/default/ui/alert.tsx b/apps/www/registry/default/ui/alert.tsx index b2730b3c45f..41fa7e0561a 100644 --- a/apps/www/registry/default/ui/alert.tsx +++ b/apps/www/registry/default/ui/alert.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( - "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { diff --git a/apps/www/registry/new-york/ui/alert.tsx b/apps/www/registry/new-york/ui/alert.tsx index 863d8fc3d91..9188e7402d9 100644 --- a/apps/www/registry/new-york/ui/alert.tsx +++ b/apps/www/registry/new-york/ui/alert.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( - "relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { From eaa91d43df73bff37167420220a78c9036aadf99 Mon Sep 17 00:00:00 2001 From: Bernardo Ferrari Date: Tue, 1 Aug 2023 12:07:03 -0300 Subject: [PATCH 24/67] style(card): remove extra spacing (#1082) --- apps/www/registry/default/ui/card.tsx | 2 +- apps/www/registry/new-york/ui/card.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/registry/default/ui/card.tsx b/apps/www/registry/default/ui/card.tsx index 47dc8358051..afa13ecfa3b 100644 --- a/apps/www/registry/default/ui/card.tsx +++ b/apps/www/registry/default/ui/card.tsx @@ -70,7 +70,7 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
)) diff --git a/apps/www/registry/new-york/ui/card.tsx b/apps/www/registry/new-york/ui/card.tsx index 9f7e6083b11..77e9fb789bf 100644 --- a/apps/www/registry/new-york/ui/card.tsx +++ b/apps/www/registry/new-york/ui/card.tsx @@ -67,7 +67,7 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
)) From 3210bed75507c15ac9d33d1e0aa5d123c5a060ec Mon Sep 17 00:00:00 2001 From: vinay <94120295+vinaykulk621@users.noreply.github.com> Date: Tue, 1 Aug 2023 20:51:18 +0530 Subject: [PATCH 25/67] fix(next-template): remove experimental `appdir` (#979) Co-authored-by: shadcn --- templates/next-template/next.config.mjs | 3 --- 1 file changed, 3 deletions(-) diff --git a/templates/next-template/next.config.mjs b/templates/next-template/next.config.mjs index b561a91ebdf..94be31c3d55 100644 --- a/templates/next-template/next.config.mjs +++ b/templates/next-template/next.config.mjs @@ -1,9 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, - experimental: { - appDir: true, - }, } export default nextConfig From cf95943446b39a45b6fba871dec40642a872f4a8 Mon Sep 17 00:00:00 2001 From: GrungeElFz <100631908+GrungeElFz@users.noreply.github.com> Date: Thu, 3 Aug 2023 10:03:44 -0500 Subject: [PATCH 26/67] docs(www): update import path for button (#839) Co-authored-by: shadcn --- apps/www/content/docs/installation/gatsby.mdx | 2 +- apps/www/content/docs/installation/remix.mdx | 2 +- apps/www/content/docs/installation/vite.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index a680cd2fa32..cd83d6f8f6b 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -106,7 +106,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index 2b484a10094..1468fce579c 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -103,7 +103,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index bf1195037a7..b198b23c30b 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -93,7 +93,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( From 8e5d080900cdca8c4fcb6dbc5aa91acdf3db7155 Mon Sep 17 00:00:00 2001 From: Alan Daniel <45767683+stylessh@users.noreply.github.com> Date: Thu, 3 Aug 2023 11:41:33 -0400 Subject: [PATCH 27/67] docs(www): add dark mode for Vite. (#814) Co-authored-by: shadcn --- apps/www/config/docs.ts | 15 ++ apps/www/content/docs/dark-mode/index.mdx | 37 +++++ .../{dark-mode.mdx => dark-mode/next.mdx} | 10 +- apps/www/content/docs/dark-mode/vite.mdx | 148 ++++++++++++++++++ 4 files changed, 203 insertions(+), 7 deletions(-) create mode 100644 apps/www/content/docs/dark-mode/index.mdx rename apps/www/content/docs/{dark-mode.mdx => dark-mode/next.mdx} (81%) create mode 100644 apps/www/content/docs/dark-mode/vite.mdx diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index e41fdf49d89..e192c0a94db 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -120,6 +120,21 @@ export const docsConfig: DocsConfig = { }, ], }, + { + title: "Dark Mode", + items: [ + { + title: "Next.js", + href: "/docs/dark-mode/next", + items: [], + }, + { + title: "Vite", + href: "/docs/dark-mode/vite", + items: [], + }, + ], + }, { title: "Components", items: [ diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx new file mode 100644 index 00000000000..214118d608a --- /dev/null +++ b/apps/www/content/docs/dark-mode/index.mdx @@ -0,0 +1,37 @@ +--- +title: Dark Mode +description: Adding dark mode to your site. +--- + +
+ + + Next.js + + +

Next.js

+ + + + Vite + + +

Vite

+ +
+ +## Other frameworks + +I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/dark-mode.mdx b/apps/www/content/docs/dark-mode/next.mdx similarity index 81% rename from apps/www/content/docs/dark-mode.mdx rename to apps/www/content/docs/dark-mode/next.mdx index 2c85e38da9a..ef7489cad7f 100644 --- a/apps/www/content/docs/dark-mode.mdx +++ b/apps/www/content/docs/dark-mode/next.mdx @@ -1,9 +1,9 @@ --- -title: Dark Mode -description: Adding dark mode to your site. +title: Next.js +description: Adding dark mode to your next app. --- -## Next.js +## Dark mode @@ -51,7 +51,3 @@ Place a mode toggle on your site to toggle between light and dark mode. - -## Other frameworks - -I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/dark-mode/vite.mdx b/apps/www/content/docs/dark-mode/vite.mdx new file mode 100644 index 00000000000..53afa996185 --- /dev/null +++ b/apps/www/content/docs/dark-mode/vite.mdx @@ -0,0 +1,148 @@ +--- +title: Vite +description: Adding dark mode to your vite app. +--- + +## Dark mode + + + +### Create a theme provider + +```tsx title="components/theme-provider.tsx" +import { createContext, useContext, useEffect, useState } from "react" + +type ThemeProviderProps = { + children: React.ReactNode + defaultTheme?: string + storageKey?: string +} + +type ThemeProviderState = { + theme: string + setTheme: (theme: string) => void +} + +const initialState = { + theme: "system", + setTheme: () => null, +} + +const ThemeProviderContext = createContext(initialState) + +export function ThemeProvider({ + children, + defaultTheme = "system", + storageKey = "vite-ui-theme", + ...props +}: ThemeProviderProps) { + const [theme, setTheme] = useState( + () => localStorage.getItem(storageKey) || defaultTheme + ) + + useEffect(() => { + const root = window.document.documentElement + + root.classList.remove("light", "dark") + + if (theme === "system") { + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? "dark" + : "light" + + root.classList.add(systemTheme) + return + } + + root.classList.add(theme) + }, [theme]) + + const value = { + theme, + setTheme: (theme: string) => { + localStorage.setItem(storageKey, theme) + setTheme(theme) + }, + } + + return ( + + {children} + + ) +} + +export const useTheme = () => { + const context = useContext(ThemeProviderContext) + + if (context === undefined) + throw new Error("useTheme must be used within a ThemeProvider") + + return context +} +``` + +### Wrap your root layout + +Add the `ThemeProvider` to your root layout. + +```tsx {1,5-7} title="App.tsx" +import { ThemeProvider } from "@/components/theme-provider" + +function App() { + return ( + + {children} + + ) +} + +export default App +``` + +### Add a mode toggle + +Place a mode toggle on your site to toggle between light and dark mode. + +```tsx title="components/mode-toggle.tsx" +import { Moon, Sun } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { useTheme } from "@/components/theme-provider" + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} +``` + + From 1532a158942d4742a762fdd7534aa05785a868ff Mon Sep 17 00:00:00 2001 From: Rudy Orre <44660069+rudyorre@users.noreply.github.com> Date: Thu, 3 Aug 2023 10:57:39 -0700 Subject: [PATCH 28/67] docs(www): add missing "command" component to imports (#550) Co-authored-by: shadcn --- apps/www/content/docs/components/command.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx index 536ee713b95..86a4505e3a6 100644 --- a/apps/www/content/docs/components/command.mdx +++ b/apps/www/content/docs/components/command.mdx @@ -56,6 +56,7 @@ npm install cmdk ```tsx import { + Command, CommandDialog, CommandEmpty, CommandGroup, From 6a1354e52d7fdc88dd7c3b70ff4c4bbfbf75017c Mon Sep 17 00:00:00 2001 From: vinay <94120295+vinaykulk621@users.noreply.github.com> Date: Thu, 3 Aug 2023 23:52:38 +0530 Subject: [PATCH 29/67] fix(examples): update keyboard shortcut for opening dialog on Windows (#1004) --- apps/www/content/docs/components/command.mdx | 3 ++- apps/www/registry/default/example/command-dialog.tsx | 3 ++- apps/www/registry/new-york/example/command-dialog.tsx | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx index 86a4505e3a6..4459f986a5b 100644 --- a/apps/www/content/docs/components/command.mdx +++ b/apps/www/content/docs/components/command.mdx @@ -102,7 +102,8 @@ export function CommandMenu() { React.useEffect(() => { const down = (e: KeyboardEvent) => { - if (e.key === "k" && e.metaKey) { + if (e.key === "k" && (e.metaKey || e.ctrlKey)) { + e.preventDefault() setOpen((open) => !open) } } diff --git a/apps/www/registry/default/example/command-dialog.tsx b/apps/www/registry/default/example/command-dialog.tsx index ea3ea397584..64c35c7166e 100644 --- a/apps/www/registry/default/example/command-dialog.tsx +++ b/apps/www/registry/default/example/command-dialog.tsx @@ -26,7 +26,8 @@ export default function CommandDialogDemo() { React.useEffect(() => { const down = (e: KeyboardEvent) => { - if (e.key === "j" && e.metaKey) { + if (e.key === "j" && (e.metaKey || e.ctrlKey)) { + e.preventDefault() setOpen((open) => !open) } } diff --git a/apps/www/registry/new-york/example/command-dialog.tsx b/apps/www/registry/new-york/example/command-dialog.tsx index abb11c67ba8..a40ff3cb9c7 100644 --- a/apps/www/registry/new-york/example/command-dialog.tsx +++ b/apps/www/registry/new-york/example/command-dialog.tsx @@ -26,7 +26,8 @@ export default function CommandDialogDemo() { React.useEffect(() => { const down = (e: KeyboardEvent) => { - if (e.key === "j" && e.metaKey) { + if (e.key === "j" && (e.metaKey || e.ctrlKey)) { + e.preventDefault() setOpen((open) => !open) } } From de3c34845b26e7afa1eed6a99f8440ca33575e43 Mon Sep 17 00:00:00 2001 From: Guten Ye Date: Fri, 4 Aug 2023 02:27:39 +0800 Subject: [PATCH 30/67] docs(www): update import in remix installation (#974) Co-authored-by: shadcn --- apps/www/content/docs/installation/remix.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index 1468fce579c..71235ba825e 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -103,7 +103,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui/button" +import { Button } from "~/components/ui/button" export default function Home() { return ( From 7962cee3841af6ed8237cac08b20d2c1dc071c8a Mon Sep 17 00:00:00 2001 From: Paul Ebose <49006567+plbstl@users.noreply.github.com> Date: Fri, 4 Aug 2023 14:03:41 +0100 Subject: [PATCH 31/67] docs(www): add api reference for components.json (#982) * docs: add api reference for component.json file * docs: use Link for internal links in component.json * docs(www): update docs for components.json --------- Co-authored-by: shadcn --- apps/www/components/mdx-components.tsx | 8 +- apps/www/config/docs.ts | 5 + apps/www/content/docs/components-json.mdx | 163 ++++++++++++++++++++++ 3 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 apps/www/content/docs/components-json.mdx diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx index 5a5dc408141..c8495d80f3d 100644 --- a/apps/www/components/mdx-components.tsx +++ b/apps/www/components/mdx-components.tsx @@ -2,7 +2,7 @@ import * as React from "react" import Image from "next/image" -import Link, { LinkProps } from "next/link" +import Link from "next/link" import { useMDXComponent } from "next-contentlayer/hooks" import { NpmCommands } from "types/unist" @@ -292,6 +292,12 @@ const components = { }: React.ComponentProps) => ( ), + Link: ({ className, ...props }: React.ComponentProps) => ( + + ), LinkedCard: ({ className, ...props }: React.ComponentProps) => ( + Note: The `components.json` file is optional and **only required if you're + using the CLI** to add components to your project. If you're using the copy + and paste method, you don't need this file. + + +You can create a `components.json` file in your project by running the following command: + +```bash +npx shadcn@latest init +``` + +See the CLI section for more information. + +## $schema + +You can see the JSON Schema for `components.json` [here](https://ui.shadcn.com/schema.json). + +```json title="components.json" +{ + "$schema": "https://ui.shadcn.com/schema.json" +} +``` + +## style + +The style for your components. **This cannot be changed after initialization.** + +```json title="components.json" +{ + "style": "default" | "new-york" +} +``` + + + +## tailwind + +Configuration to help the CLI understand how Tailwind CSS is set up in your project. + +See the installation section for how to set up Tailwind CSS. + +### tailwind.config + +Path to where your `tailwind.config.js` file is located. + +```json title="components.json" +{ + "tailwind": { + "config": "tailwind.config.js" | "tailwind.config.ts" + } +} +``` + +### tailwind.css + +Path to the CSS file that imports Tailwind CSS into your project. + +```json title="components.json" +{ + "tailwind": { + "css": "styles/global.css" + } +} +``` + +### tailwind.baseColor + +This is used to generate the default color palette for your components. **This cannot be changed after initialization.** + +```json title="components.json" +{ + "tailwind": { + "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc" + } +} +``` + +### tailwind.cssVariables + +You can choose between using CSS variables or Tailwind CSS utility classes for theming. + +To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`. + +```json title="components.json" +{ + "tailwind": { + "cssVariables": `true` | `false` + } +} +``` + +For more information, see the theming docs. + +**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components. + +## rsc + +Whether or not to enable support for React Server Components. + +The CLI automatically adds a `use client` directive to client components when set to `true`. + +```json title="components.json" +{ + "rsc": `true` | `false` +} +``` + +## tsx + +Choose between TypeScript or JavaScript components. + +Setting this option to `false` allows components to be added as JavaScript with the `.jsx` file extension. + +```json title="components.json" +{ + "tsx": `true` | `false` +} +``` + +## aliases + +The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location. + +Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file. + + + **Important:** If you're using the `src` directory, make sure it is included + under `paths` in your `tsconfig.json` or `jsconfig.json` file. + + +### aliases.utils + +Import alias for your utility functions. + +```json title="components.json" +{ + "aliases": { + "utils": "@/lib/utils" + } +} +``` + +### aliases.components + +Import alias for your components. + +```json title="components.json" +{ + "aliases": { + "components": "@/components" + } +} +``` From c598f198457d19cc8d57889955cd45f5c37094c4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Fri, 4 Aug 2023 20:54:46 +0400 Subject: [PATCH 32/67] docs(www): fix typo --- apps/www/content/docs/components-json.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/content/docs/components-json.mdx b/apps/www/content/docs/components-json.mdx index 91795a6744e..87b5f75d24b 100644 --- a/apps/www/content/docs/components-json.mdx +++ b/apps/www/content/docs/components-json.mdx @@ -16,7 +16,7 @@ We use it to understand how your project is set up and how to generate component You can create a `components.json` file in your project by running the following command: ```bash -npx shadcn@latest init +npx shadcn-ui@latest init ``` See the CLI section for more information. From 3c9f7ca0e20638bf75833ef920f9b23f5d97bc71 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 7 Aug 2023 22:39:16 +0400 Subject: [PATCH 33/67] feat: themes (#1135) --- apps/www/__registry__/index.tsx | 14 + apps/www/app/examples/dashboard/page.tsx | 2 +- apps/www/app/layout.tsx | 9 +- apps/www/app/themes/page.tsx | 38 + apps/www/app/themes/tabs.tsx | 73 ++ apps/www/components/copy-button.tsx | 2 +- apps/www/components/drawer.tsx | 31 + apps/www/components/main-nav.tsx | 12 + apps/www/components/site-header.tsx | 2 +- apps/www/components/theme-component.tsx | 52 ++ apps/www/components/theme-customizer.tsx | 629 +++++++++++++++++ apps/www/components/theme-switcher.tsx | 26 + apps/www/components/theme-wrapper.tsx | 27 +- apps/www/config/docs.ts | 4 + apps/www/hooks/use-config.ts | 2 + apps/www/lib/events.ts | 1 + apps/www/package.json | 1 + apps/www/public/registry/colors/gray.json | 62 +- apps/www/public/registry/colors/lime.json | 92 --- apps/www/public/registry/colors/neutral.json | 62 +- apps/www/public/registry/colors/slate.json | 62 +- apps/www/public/registry/colors/stone.json | 62 +- apps/www/public/registry/colors/zinc.json | 62 +- .../public/registry/styles/default/card.json | 2 +- .../registry/styles/default/select.json | 2 +- .../registry/styles/default/textarea.json | 2 +- .../registry/styles/new-york/alert.json | 2 +- .../registry/styles/new-york/button.json | 2 +- .../registry/styles/new-york/calendar.json | 2 +- .../public/registry/styles/new-york/card.json | 2 +- .../registry/styles/new-york/input.json | 2 +- apps/www/public/registry/themes.css | 654 ++++++++++++++++-- apps/www/public/registry/themes/gray.json | 48 ++ apps/www/public/registry/themes/neutral.json | 48 ++ apps/www/public/registry/themes/slate.json | 48 ++ apps/www/public/registry/themes/stone.json | 48 ++ apps/www/public/registry/themes/zinc.json | 48 ++ apps/www/registry/colors.ts | 30 +- .../default/example/cards/activity-goal.tsx | 132 ++++ .../default/example/cards/calendar.tsx | 26 + .../registry/default/example/cards/chat.tsx | 254 +++++++ .../default/example/cards/cookie-settings.tsx | 60 ++ .../default/example/cards/create-account.tsx | 60 ++ .../default/example/cards/data-table.tsx | 332 +++++++++ .../registry/default/example/cards/index.tsx | 63 ++ .../registry/default/example/cards/metric.tsx | 142 ++++ .../default/example/cards/payment-method.tsx | 148 ++++ .../default/example/cards/report-issue.tsx | 90 +++ .../registry/default/example/cards/share.tsx | 128 ++++ .../registry/default/example/cards/stats.tsx | 131 ++++ .../default/example/cards/team-members.tsx | 209 ++++++ apps/www/registry/default/ui/select.tsx | 2 +- apps/www/registry/default/ui/textarea.tsx | 2 +- .../new-york/example/cards/activity-goal.tsx | 132 ++++ .../new-york/example/cards/calendar.tsx | 26 + .../registry/new-york/example/cards/chat.tsx | 255 +++++++ .../example/cards/cookie-settings.tsx | 60 ++ .../new-york/example/cards/create-account.tsx | 60 ++ .../new-york/example/cards/data-table.tsx | 332 +++++++++ .../registry/new-york/example/cards/index.tsx | 63 ++ .../new-york/example/cards/metric.tsx | 142 ++++ .../new-york/example/cards/payment-method.tsx | 148 ++++ .../new-york/example/cards/report-issue.tsx | 90 +++ .../registry/new-york/example/cards/share.tsx | 126 ++++ .../registry/new-york/example/cards/stats.tsx | 131 ++++ .../new-york/example/cards/team-members.tsx | 209 ++++++ apps/www/registry/new-york/ui/alert.tsx | 2 +- apps/www/registry/new-york/ui/button.tsx | 2 +- apps/www/registry/new-york/ui/calendar.tsx | 9 +- apps/www/registry/new-york/ui/input.tsx | 2 +- apps/www/registry/registry.ts | 5 + apps/www/registry/themes.ts | 622 +++++++++++++++-- apps/www/scripts/build-registry.ts | 83 ++- apps/www/styles/globals.css | 45 +- pnpm-lock.yaml | 108 ++- tailwind.config.cjs | 1 + 76 files changed, 6194 insertions(+), 505 deletions(-) create mode 100644 apps/www/app/themes/page.tsx create mode 100644 apps/www/app/themes/tabs.tsx create mode 100644 apps/www/components/drawer.tsx create mode 100644 apps/www/components/theme-component.tsx create mode 100644 apps/www/components/theme-customizer.tsx create mode 100644 apps/www/components/theme-switcher.tsx delete mode 100644 apps/www/public/registry/colors/lime.json create mode 100644 apps/www/public/registry/themes/gray.json create mode 100644 apps/www/public/registry/themes/neutral.json create mode 100644 apps/www/public/registry/themes/slate.json create mode 100644 apps/www/public/registry/themes/stone.json create mode 100644 apps/www/public/registry/themes/zinc.json create mode 100644 apps/www/registry/default/example/cards/activity-goal.tsx create mode 100644 apps/www/registry/default/example/cards/calendar.tsx create mode 100644 apps/www/registry/default/example/cards/chat.tsx create mode 100644 apps/www/registry/default/example/cards/cookie-settings.tsx create mode 100644 apps/www/registry/default/example/cards/create-account.tsx create mode 100644 apps/www/registry/default/example/cards/data-table.tsx create mode 100644 apps/www/registry/default/example/cards/index.tsx create mode 100644 apps/www/registry/default/example/cards/metric.tsx create mode 100644 apps/www/registry/default/example/cards/payment-method.tsx create mode 100644 apps/www/registry/default/example/cards/report-issue.tsx create mode 100644 apps/www/registry/default/example/cards/share.tsx create mode 100644 apps/www/registry/default/example/cards/stats.tsx create mode 100644 apps/www/registry/default/example/cards/team-members.tsx create mode 100644 apps/www/registry/new-york/example/cards/activity-goal.tsx create mode 100644 apps/www/registry/new-york/example/cards/calendar.tsx create mode 100644 apps/www/registry/new-york/example/cards/chat.tsx create mode 100644 apps/www/registry/new-york/example/cards/cookie-settings.tsx create mode 100644 apps/www/registry/new-york/example/cards/create-account.tsx create mode 100644 apps/www/registry/new-york/example/cards/data-table.tsx create mode 100644 apps/www/registry/new-york/example/cards/index.tsx create mode 100644 apps/www/registry/new-york/example/cards/metric.tsx create mode 100644 apps/www/registry/new-york/example/cards/payment-method.tsx create mode 100644 apps/www/registry/new-york/example/cards/report-issue.tsx create mode 100644 apps/www/registry/new-york/example/cards/share.tsx create mode 100644 apps/www/registry/new-york/example/cards/stats.tsx create mode 100644 apps/www/registry/new-york/example/cards/team-members.tsx diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 4996505a07d..26fc8aace90 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -1006,6 +1006,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/default/example/mode-toggle")), files: ["registry/default/example/mode-toggle.tsx"], }, + "cards": { + name: "cards", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/cards")), + files: ["registry/default/example/cards/cards.tsx"], + }, }, "new-york": { "accordion": { name: "accordion", @@ -2008,5 +2015,12 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/new-york/example/mode-toggle")), files: ["registry/new-york/example/mode-toggle.tsx"], }, + "cards": { + name: "cards", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/cards")), + files: ["registry/new-york/example/cards/cards.tsx"], + }, }, } diff --git a/apps/www/app/examples/dashboard/page.tsx b/apps/www/app/examples/dashboard/page.tsx index 72fd6aa8701..95b532947fa 100644 --- a/apps/www/app/examples/dashboard/page.tsx +++ b/apps/www/app/examples/dashboard/page.tsx @@ -25,7 +25,7 @@ import { UserNav } from "@/app/examples/dashboard/components/user-nav" export const metadata: Metadata = { title: "Dashboard", - description: "Example dashboard app using the components.", + description: "Example dashboard app built using the components.", } export default function DashboardPage() { diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index 91a665a7702..fe7ca9e4d5d 100644 --- a/apps/www/app/layout.tsx +++ b/apps/www/app/layout.tsx @@ -9,6 +9,7 @@ import { ThemeProvider } from "@/components/providers" import { SiteFooter } from "@/components/site-footer" import { SiteHeader } from "@/components/site-header" import { TailwindIndicator } from "@/components/tailwind-indicator" +import { ThemeSwitcher } from "@/components/theme-switcher" import { Toaster as DefaultToaster } from "@/registry/default/ui/toaster" import { Toaster as NewYorkToaster } from "@/registry/new-york/ui/toaster" @@ -82,7 +83,12 @@ export default function RootLayout({ children }: RootLayoutProps) { fontSans.variable )} > - +
{children}
@@ -90,6 +96,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
+ diff --git a/apps/www/app/themes/page.tsx b/apps/www/app/themes/page.tsx new file mode 100644 index 00000000000..d50f7b707d7 --- /dev/null +++ b/apps/www/app/themes/page.tsx @@ -0,0 +1,38 @@ +import { Metadata } from "next" + +import "public/registry/themes.css" +import { + PageHeader, + PageHeaderDescription, + PageHeaderHeading, +} from "@/components/page-header" +import { ThemeCustomizer } from "@/components/theme-customizer" +import { ThemeWrapper } from "@/components/theme-wrapper" +import { ThemesTabs } from "@/app/themes/tabs" + +export const metadata: Metadata = { + title: "Themes", + description: "Hand-picked themes that you can copy and paste into your apps.", +} + +export default function ThemesPage() { + return ( +
+ + + Make it yours. + + Hand-picked themes that you can copy and paste into your apps. + + +
+ +
+ + +
+ ) +} diff --git a/apps/www/app/themes/tabs.tsx b/apps/www/app/themes/tabs.tsx new file mode 100644 index 00000000000..3a6fbd684ae --- /dev/null +++ b/apps/www/app/themes/tabs.tsx @@ -0,0 +1,73 @@ +"use client" + +import * as React from "react" + +import { useConfig } from "@/hooks/use-config" +import { ThemeWrapper } from "@/components/theme-wrapper" +import CardsDefault from "@/registry/default/example/cards" +import { Skeleton } from "@/registry/default/ui/skeleton" +import CardsNewYork from "@/registry/new-york/example/cards" + +export function ThemesTabs() { + const [mounted, setMounted] = React.useState(false) + const [config] = useConfig() + + React.useEffect(() => { + setMounted(true) + }, []) + + return ( +
+ {!mounted ? ( +
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + + +
+
+ + +
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+ +
+ +
+
+ ) : ( + + {config.style === "new-york" && } + {config.style === "default" && } + + )} +
+ ) +} diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx index 97a0e87a013..d7c4ef263a5 100644 --- a/apps/www/components/copy-button.tsx +++ b/apps/www/components/copy-button.tsx @@ -21,7 +21,7 @@ interface CopyButtonProps extends React.HTMLAttributes { event?: Event["name"] } -async function copyToClipboardWithMeta(value: string, event?: Event) { +export async function copyToClipboardWithMeta(value: string, event?: Event) { navigator.clipboard.writeText(value) if (event) { trackEvent(event) diff --git a/apps/www/components/drawer.tsx b/apps/www/components/drawer.tsx new file mode 100644 index 00000000000..4fab78df777 --- /dev/null +++ b/apps/www/components/drawer.tsx @@ -0,0 +1,31 @@ +"use client" + +import { forwardRef } from "react" +import { Drawer as DrawerPrimitive } from "vaul" + +import { cn } from "@/lib/utils" + +const DrawerTrigger = DrawerPrimitive.Trigger + +const DrawerContent = forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + +
+ {children} + + +)) +DrawerContent.displayName = "DrawerContent" + +export { DrawerTrigger, DrawerContent } diff --git a/apps/www/components/main-nav.tsx b/apps/www/components/main-nav.tsx index 2deb88fb908..03b0472889f 100644 --- a/apps/www/components/main-nav.tsx +++ b/apps/www/components/main-nav.tsx @@ -7,6 +7,7 @@ import { usePathname } from "next/navigation" import { siteConfig } from "@/config/site" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" +import { Badge } from "@/registry/new-york/ui/badge" export function MainNav() { const pathname = usePathname() @@ -40,6 +41,17 @@ export function MainNav() { > Components + + Themes + +
diff --git a/apps/www/components/theme-component.tsx b/apps/www/components/theme-component.tsx new file mode 100644 index 00000000000..3d56c3825df --- /dev/null +++ b/apps/www/components/theme-component.tsx @@ -0,0 +1,52 @@ +"use client" + +import * as React from "react" +import { Index } from "@/__registry__" + +import { cn } from "@/lib/utils" +import { useConfig } from "@/hooks/use-config" +import { Icons } from "@/components/icons" + +interface ThemeComponentProps extends React.HTMLAttributes { + name: string + extractClassname?: boolean + extractedClassNames?: string + align?: "center" | "start" | "end" +} + +export function ThemeComponent({ name, ...props }: ThemeComponentProps) { + const [config] = useConfig() + + const Preview = React.useMemo(() => { + const Component = Index[config.style][name]?.component + + if (!Component) { + return ( +

+ Component{" "} + + {name} + {" "} + not found in registry. +

+ ) + } + + return + }, [name, config.style]) + + return ( +
+ + + Loading... +
+ } + > + {Preview} + +
+ ) +} diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx new file mode 100644 index 00000000000..380db9a4f97 --- /dev/null +++ b/apps/www/components/theme-customizer.tsx @@ -0,0 +1,629 @@ +"use client" + +import * as React from "react" +import { + CheckIcon, + CopyIcon, + InfoCircledIcon, + MoonIcon, + ResetIcon, + SunIcon, +} from "@radix-ui/react-icons" +import template from "lodash.template" +import { Paintbrush } from "lucide-react" +import { useTheme } from "next-themes" + +import { cn } from "@/lib/utils" +import { useConfig } from "@/hooks/use-config" +import { copyToClipboardWithMeta } from "@/components/copy-button" +import { DrawerContent, DrawerTrigger } from "@/components/drawer" +import { ThemeWrapper } from "@/components/theme-wrapper" +import { Button } from "@/registry/new-york/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/registry/new-york/ui/dialog" +import { Label } from "@/registry/new-york/ui/label" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/registry/new-york/ui/popover" +import { Skeleton } from "@/registry/new-york/ui/skeleton" +import { Theme, themes } from "@/registry/themes" + +import "@/styles/mdx.css" +import { Drawer } from "vaul" + +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/new-york/ui/tooltip" + +export function ThemeCustomizer() { + const [config, setConfig] = useConfig() + const { resolvedTheme: mode } = useTheme() + const [mounted, setMounted] = React.useState(false) + + React.useEffect(() => { + setMounted(true) + }, []) + + return ( +
+ + + + + + + + +
+
+ {mounted ? ( + <> + {["zinc", "rose", "blue", "green", "orange"].map((color) => { + const theme = themes.find((theme) => theme.name === color) + const isActive = config.theme === color + + if (!theme) { + return null + } + + return ( + + + + + + {theme.label} + + + ) + })} + + ) : ( +
+ + + + + +
+ )} +
+ + + + + + + + +
+ +
+ ) +} + +function Customizer() { + const [mounted, setMounted] = React.useState(false) + const { setTheme: setMode, resolvedTheme: mode } = useTheme() + const [config, setConfig] = useConfig() + + React.useEffect(() => { + setMounted(true) + }, []) + + return ( + +
+
+
+ Customize +
+
+ Pick a style and color for your components. +
+
+ +
+
+
+
+ + + + + About styles + + +

+ What is the difference between the New York and Default style? +

+

+ A style comes with its own set of components, animations, + icons and more. +

+

+ The Default style has + larger inputs, uses lucide-react for icons and + tailwindcss-animate for animations. +

+

+ The New York style ships + with smaller buttons and cards with shadows. It uses icons + from Radix Icons. +

+ + +
+
+ + +
+
+
+ +
+ {themes.map((theme) => { + const isActive = config.theme === theme.name + + return mounted ? ( + + ) : ( + + ) + })} +
+
+
+ +
+ {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => { + return ( + + ) + })} +
+
+
+ +
+ {mounted ? ( + <> + + + + ) : ( + <> + + + + )} +
+
+
+ + ) +} + +function CopyCodeButton() { + const [config] = useConfig() + const activeTheme = themes.find((theme) => theme.name === config.theme) + const [hasCopied, setHasCopied] = React.useState(false) + + React.useEffect(() => { + setTimeout(() => { + setHasCopied(false) + }, 2000) + }, [hasCopied]) + + return ( + <> + {activeTheme && ( + + )} + + + + + + + Theme + + Copy and paste the following code into your CSS file. + + + + + {activeTheme && ( + + )} + + + + + ) +} + +function CustomizerCode() { + const [config] = useConfig() + const activeTheme = themes.find((theme) => theme.name === config.theme) + + return ( + +
+ 
+          
+            @layer base {
+              :root {
+            
+                  --background:{" "}
+              {activeTheme?.cssVars.light["background"]};
+            
+            
+                  --foreground:{" "}
+              {activeTheme?.cssVars.light["foreground"]};
+            
+            {[
+              "card",
+              "popover",
+              "primary",
+              "secondary",
+              "muted",
+              "accent",
+              "destructive",
+            ].map((prefix) => (
+              <>
+                
+                      --{prefix}:{" "}
+                  {
+                    activeTheme?.cssVars.light[
+                      prefix as keyof typeof activeTheme.cssVars.light
+                    ]
+                  }
+                  ;
+                
+                
+                      --{prefix}-foreground:{" "}
+                  {
+                    activeTheme?.cssVars.light[
+                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
+                    ]
+                  }
+                  ;
+                
+              
+            ))}
+            
+                  --border:{" "}
+              {activeTheme?.cssVars.light["border"]};
+            
+            
+                  --input:{" "}
+              {activeTheme?.cssVars.light["input"]};
+            
+            
+                  --ring:{" "}
+              {activeTheme?.cssVars.light["ring"]};
+            
+            
+                  --radius: {config.radius}rem;
+            
+              }
+             
+              .dark {
+            
+                  --background:{" "}
+              {activeTheme?.cssVars.dark["background"]};
+            
+            
+                  --foreground:{" "}
+              {activeTheme?.cssVars.dark["foreground"]};
+            
+            {[
+              "card",
+              "popover",
+              "primary",
+              "secondary",
+              "muted",
+              "accent",
+              "destructive",
+            ].map((prefix) => (
+              <>
+                
+                      --{prefix}:{" "}
+                  {
+                    activeTheme?.cssVars.dark[
+                      prefix as keyof typeof activeTheme.cssVars.dark
+                    ]
+                  }
+                  ;
+                
+                
+                      --{prefix}-foreground:{" "}
+                  {
+                    activeTheme?.cssVars.dark[
+                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
+                    ]
+                  }
+                  ;
+                
+              
+            ))}
+            
+                  --border:{" "}
+              {activeTheme?.cssVars.dark["border"]};
+            
+            
+                  --input:{" "}
+              {activeTheme?.cssVars.dark["input"]};
+            
+            
+                  --ring:{" "}
+              {activeTheme?.cssVars.dark["ring"]};
+            
+              }
+            }
+          
+
+
+ + ) +} + +function getThemeCode(theme: Theme, radius: number) { + if (!theme) { + return "" + } + + return template(BASE_STYLES_WITH_VARIABLES)({ + colors: theme.cssVars, + radius, + }) +} + +const BASE_STYLES_WITH_VARIABLES = ` +@layer base { + :root { + --background: <%- colors.light["background"] %>; + --foreground: <%- colors.light["foreground"] %>; + --card: <%- colors.light["card"] %>; + --card-foreground: <%- colors.light["card-foreground"] %>; + --popover: <%- colors.light["popover"] %>; + --popover-foreground: <%- colors.light["popover-foreground"] %>; + --primary: <%- colors.light["primary"] %>; + --primary-foreground: <%- colors.light["primary-foreground"] %>; + --secondary: <%- colors.light["secondary"] %>; + --secondary-foreground: <%- colors.light["secondary-foreground"] %>; + --muted: <%- colors.light["muted"] %>; + --muted-foreground: <%- colors.light["muted-foreground"] %>; + --accent: <%- colors.light["accent"] %>; + --accent-foreground: <%- colors.light["accent-foreground"] %>; + --destructive: <%- colors.light["destructive"] %>; + --destructive-foreground: <%- colors.light["destructive-foreground"] %>; + --border: <%- colors.light["border"] %>; + --input: <%- colors.light["input"] %>; + --ring: <%- colors.light["ring"] %>; + --radius: <%- radius %>rem; + } + + .dark { + --background: <%- colors.dark["background"] %>; + --foreground: <%- colors.dark["foreground"] %>; + --card: <%- colors.dark["card"] %>; + --card-foreground: <%- colors.dark["card-foreground"] %>; + --popover: <%- colors.dark["popover"] %>; + --popover-foreground: <%- colors.dark["popover-foreground"] %>; + --primary: <%- colors.dark["primary"] %>; + --primary-foreground: <%- colors.dark["primary-foreground"] %>; + --secondary: <%- colors.dark["secondary"] %>; + --secondary-foreground: <%- colors.dark["secondary-foreground"] %>; + --muted: <%- colors.dark["muted"] %>; + --muted-foreground: <%- colors.dark["muted-foreground"] %>; + --accent: <%- colors.dark["accent"] %>; + --accent-foreground: <%- colors.dark["accent-foreground"] %>; + --destructive: <%- colors.dark["destructive"] %>; + --destructive-foreground: <%- colors.dark["destructive-foreground"] %>; + --border: <%- colors.dark["border"] %>; + --input: <%- colors.dark["input"] %>; + --ring: <%- colors.dark["ring"] %>; + } +} +` diff --git a/apps/www/components/theme-switcher.tsx b/apps/www/components/theme-switcher.tsx new file mode 100644 index 00000000000..ed5951f24e5 --- /dev/null +++ b/apps/www/components/theme-switcher.tsx @@ -0,0 +1,26 @@ +"use client" + +import * as React from "react" +import { useSelectedLayoutSegment } from "next/navigation" + +import { useConfig } from "@/hooks/use-config" + +export function ThemeSwitcher() { + const [config] = useConfig() + const segment = useSelectedLayoutSegment() + + React.useEffect(() => { + document.body.classList.forEach((className) => { + if (className.match(/^theme.*/)) { + document.body.classList.remove(className) + } + }) + + const theme = segment === "themes" ? config.theme : null + if (theme) { + return document.body.classList.add(`theme-${theme}`) + } + }, [segment, config]) + + return null +} diff --git a/apps/www/components/theme-wrapper.tsx b/apps/www/components/theme-wrapper.tsx index d24b9dbcdc6..d4ac140af48 100644 --- a/apps/www/components/theme-wrapper.tsx +++ b/apps/www/components/theme-wrapper.tsx @@ -3,8 +3,31 @@ import { cn } from "@/lib/utils" import { useConfig } from "@/hooks/use-config" -export function ThemeWrapper({ children }: React.ComponentProps<"div">) { +interface ThemeWrapperProps extends React.ComponentProps<"div"> { + defaultTheme?: string +} + +export function ThemeWrapper({ + defaultTheme, + children, + className, +}: ThemeWrapperProps) { const [config] = useConfig() - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index c962a45643a..aa6a49adfd0 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -15,6 +15,10 @@ export const docsConfig: DocsConfig = { title: "Components", href: "/docs/components/accordion", }, + { + title: "Themes", + href: "/themes", + }, { title: "Examples", href: "/examples", diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts index 65394c6c14f..7c473bdcabb 100644 --- a/apps/www/hooks/use-config.ts +++ b/apps/www/hooks/use-config.ts @@ -7,11 +7,13 @@ import { Theme } from "@/registry/themes" type Config = { style: Style["name"] theme: Theme["name"] + radius: number } const configAtom = atomWithStorage("config", { style: "default", theme: "zinc", + radius: 0.5, }) export function useConfig() { diff --git a/apps/www/lib/events.ts b/apps/www/lib/events.ts index 3fb46004f48..f50cecec0ab 100644 --- a/apps/www/lib/events.ts +++ b/apps/www/lib/events.ts @@ -7,6 +7,7 @@ const eventSchema = z.object({ "copy_usage_import_code", "copy_usage_code", "copy_primitive_code", + "copy_theme_code", ]), // declare type AllowedPropertyValues = string | number | boolean | null properties: z diff --git a/apps/www/package.json b/apps/www/package.json index 5b5b3ff9e68..09273bfbba7 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -70,6 +70,7 @@ "recharts": "^2.6.2", "sharp": "^0.31.3", "tailwind-merge": "^1.12.0", + "vaul": "^0.2.0", "zod": "^3.21.4" }, "devDependencies": { diff --git a/apps/www/public/registry/colors/gray.json b/apps/www/public/registry/colors/gray.json index be08990361d..6de69e6d03d 100644 --- a/apps/www/public/registry/colors/gray.json +++ b/apps/www/public/registry/colors/gray.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "gray-950", - "muted": "gray-100", - "muted-foreground": "gray-500", - "popover": "white", - "popover-foreground": "gray-950", - "border": "gray-200", - "input": "gray-200", "card": "white", "card-foreground": "gray-950", + "popover": "white", + "popover-foreground": "gray-950", "primary": "gray-900", "primary-foreground": "gray-50", "secondary": "gray-100", "secondary-foreground": "gray-900", + "muted": "gray-100", + "muted-foreground": "gray-500", "accent": "gray-100", "accent-foreground": "gray-900", "destructive": "red-500", "destructive-foreground": "gray-50", - "ring": "gray-400" + "border": "gray-200", + "input": "gray-200", + "ring": "gray-950" }, "dark": { "background": "gray-950", "foreground": "gray-50", - "muted": "gray-800", - "muted-foreground": "gray-400", - "popover": "gray-950", - "popover-foreground": "gray-50", - "border": "gray-800", - "input": "gray-800", "card": "gray-950", "card-foreground": "gray-50", + "popover": "gray-950", + "popover-foreground": "gray-50", "primary": "gray-50", "primary-foreground": "gray-900", "secondary": "gray-800", "secondary-foreground": "gray-50", + "muted": "gray-800", + "muted-foreground": "gray-400", "accent": "gray-800", "accent-foreground": "gray-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "gray-800" + "destructive-foreground": "gray-50", + "border": "gray-800", + "input": "gray-800", + "ring": "gray-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "224 71.4% 4.1%", - "muted": "220 14.3% 95.9%", - "muted-foreground": "220 8.9% 46.1%", - "popover": "0 0% 100%", - "popover-foreground": "224 71.4% 4.1%", - "border": "220 13% 91%", - "input": "220 13% 91%", "card": "0 0% 100%", "card-foreground": "224 71.4% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "224 71.4% 4.1%", "primary": "220.9 39.3% 11%", "primary-foreground": "210 20% 98%", "secondary": "220 14.3% 95.9%", "secondary-foreground": "220.9 39.3% 11%", + "muted": "220 14.3% 95.9%", + "muted-foreground": "220 8.9% 46.1%", "accent": "220 14.3% 95.9%", "accent-foreground": "220.9 39.3% 11%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "210 20% 98%", - "ring": "217.9 10.6% 64.9%" + "border": "220 13% 91%", + "input": "220 13% 91%", + "ring": "224 71.4% 4.1%" }, "dark": { "background": "224 71.4% 4.1%", "foreground": "210 20% 98%", - "muted": "215 27.9% 16.9%", - "muted-foreground": "217.9 10.6% 64.9%", - "popover": "224 71.4% 4.1%", - "popover-foreground": "210 20% 98%", - "border": "215 27.9% 16.9%", - "input": "215 27.9% 16.9%", "card": "224 71.4% 4.1%", "card-foreground": "210 20% 98%", + "popover": "224 71.4% 4.1%", + "popover-foreground": "210 20% 98%", "primary": "210 20% 98%", "primary-foreground": "220.9 39.3% 11%", "secondary": "215 27.9% 16.9%", "secondary-foreground": "210 20% 98%", + "muted": "215 27.9% 16.9%", + "muted-foreground": "217.9 10.6% 64.9%", "accent": "215 27.9% 16.9%", "accent-foreground": "210 20% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "215 27.9% 16.9%" + "destructive-foreground": "210 20% 98%", + "border": "215 27.9% 16.9%", + "input": "215 27.9% 16.9%", + "ring": "216 12.2% 83.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n \n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n \n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n \n --border: 220 13% 91%;\n --input: 220 13% 91%;\n \n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n \n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n \n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n \n --ring: 217.9 10.6% 64.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n \n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n \n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n \n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n \n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n \n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n \n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n \n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 215 27.9% 16.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n \n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n \n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n \n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n \n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n \n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n \n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n \n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n \n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n \n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n \n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n \n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/lime.json b/apps/www/public/registry/colors/lime.json deleted file mode 100644 index 18a9e3dd1fd..00000000000 --- a/apps/www/public/registry/colors/lime.json +++ /dev/null @@ -1,92 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "lime-950", - "muted": "lime-100", - "muted-foreground": "lime-500", - "popover": "white", - "popover-foreground": "lime-950", - "border": "lime-200", - "input": "lime-200", - "card": "white", - "card-foreground": "lime-950", - "primary": "lime-900", - "primary-foreground": "lime-50", - "secondary": "lime-100", - "secondary-foreground": "lime-900", - "accent": "lime-100", - "accent-foreground": "lime-900", - "destructive": "red-500", - "destructive-foreground": "lime-50", - "ring": "lime-400" - }, - "dark": { - "background": "lime-950", - "foreground": "lime-50", - "muted": "lime-800", - "muted-foreground": "lime-400", - "popover": "lime-950", - "popover-foreground": "lime-50", - "border": "lime-800", - "input": "lime-800", - "card": "lime-950", - "card-foreground": "lime-50", - "primary": "lime-50", - "primary-foreground": "lime-900", - "secondary": "lime-800", - "secondary-foreground": "lime-50", - "accent": "lime-800", - "accent-foreground": "lime-50", - "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "lime-800" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "89.3 80.4% 10%", - "muted": "79.6 89.1% 89.2%", - "muted-foreground": "83.7 80.5% 44.3%", - "popover": "0 0% 100%", - "popover-foreground": "89.3 80.4% 10%", - "border": "80.9 88.5% 79.6%", - "input": "80.9 88.5% 79.6%", - "card": "0 0% 100%", - "card-foreground": "89.3 80.4% 10%", - "primary": "87.6 61.2% 20.2%", - "primary-foreground": "78.3 92% 95.1%", - "secondary": "79.6 89.1% 89.2%", - "secondary-foreground": "87.6 61.2% 20.2%", - "accent": "79.6 89.1% 89.2%", - "accent-foreground": "87.6 61.2% 20.2%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "78.3 92% 95.1%", - "ring": "82.7 78% 55.5%" - }, - "dark": { - "background": "89.3 80.4% 10%", - "foreground": "78.3 92% 95.1%", - "muted": "86.3 69% 22.7%", - "muted-foreground": "82.7 78% 55.5%", - "popover": "89.3 80.4% 10%", - "popover-foreground": "78.3 92% 95.1%", - "border": "86.3 69% 22.7%", - "input": "86.3 69% 22.7%", - "card": "89.3 80.4% 10%", - "card-foreground": "78.3 92% 95.1%", - "primary": "78.3 92% 95.1%", - "primary-foreground": "87.6 61.2% 20.2%", - "secondary": "86.3 69% 22.7%", - "secondary-foreground": "78.3 92% 95.1%", - "accent": "86.3 69% 22.7%", - "accent-foreground": "78.3 92% 95.1%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "86.3 69% 22.7%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 89.3 80.4% 10%;\n \n --muted: 79.6 89.1% 89.2%;\n --muted-foreground: 83.7 80.5% 44.3%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 89.3 80.4% 10%;\n \n --card: 0 0% 100%;\n --card-foreground: 89.3 80.4% 10%;\n \n --border: 80.9 88.5% 79.6%;\n --input: 80.9 88.5% 79.6%;\n \n --primary: 87.6 61.2% 20.2%;\n --primary-foreground: 78.3 92% 95.1%;\n \n --secondary: 79.6 89.1% 89.2%;\n --secondary-foreground: 87.6 61.2% 20.2%;\n \n --accent: 79.6 89.1% 89.2%;\n --accent-foreground: 87.6 61.2% 20.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 78.3 92% 95.1%;\n \n --ring: 82.7 78% 55.5%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 89.3 80.4% 10%;\n --foreground: 78.3 92% 95.1%;\n \n --muted: 86.3 69% 22.7%;\n --muted-foreground: 82.7 78% 55.5%;\n \n --popover: 89.3 80.4% 10%;\n --popover-foreground: 78.3 92% 95.1%;\n \n --card: 89.3 80.4% 10%;\n --card-foreground: 78.3 92% 95.1%;\n \n --border: 86.3 69% 22.7%;\n --input: 86.3 69% 22.7%;\n \n --primary: 78.3 92% 95.1%;\n --primary-foreground: 87.6 61.2% 20.2%;\n \n --secondary: 86.3 69% 22.7%;\n --secondary-foreground: 78.3 92% 95.1%;\n \n --accent: 86.3 69% 22.7%;\n --accent-foreground: 78.3 92% 95.1%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 86.3 69% 22.7%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/apps/www/public/registry/colors/neutral.json b/apps/www/public/registry/colors/neutral.json index c2488562ac6..2f29127b36d 100644 --- a/apps/www/public/registry/colors/neutral.json +++ b/apps/www/public/registry/colors/neutral.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "neutral-950", - "muted": "neutral-100", - "muted-foreground": "neutral-500", - "popover": "white", - "popover-foreground": "neutral-950", - "border": "neutral-200", - "input": "neutral-200", "card": "white", "card-foreground": "neutral-950", + "popover": "white", + "popover-foreground": "neutral-950", "primary": "neutral-900", "primary-foreground": "neutral-50", "secondary": "neutral-100", "secondary-foreground": "neutral-900", + "muted": "neutral-100", + "muted-foreground": "neutral-500", "accent": "neutral-100", "accent-foreground": "neutral-900", "destructive": "red-500", "destructive-foreground": "neutral-50", - "ring": "neutral-400" + "border": "neutral-200", + "input": "neutral-200", + "ring": "neutral-950" }, "dark": { "background": "neutral-950", "foreground": "neutral-50", - "muted": "neutral-800", - "muted-foreground": "neutral-400", - "popover": "neutral-950", - "popover-foreground": "neutral-50", - "border": "neutral-800", - "input": "neutral-800", "card": "neutral-950", "card-foreground": "neutral-50", + "popover": "neutral-950", + "popover-foreground": "neutral-50", "primary": "neutral-50", "primary-foreground": "neutral-900", "secondary": "neutral-800", "secondary-foreground": "neutral-50", + "muted": "neutral-800", + "muted-foreground": "neutral-400", "accent": "neutral-800", "accent-foreground": "neutral-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "neutral-800" + "destructive-foreground": "neutral-50", + "border": "neutral-800", + "input": "neutral-800", + "ring": "neutral-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "0 0% 3.9%", - "muted": "0 0% 96.1%", - "muted-foreground": "0 0% 45.1%", - "popover": "0 0% 100%", - "popover-foreground": "0 0% 3.9%", - "border": "0 0% 89.8%", - "input": "0 0% 89.8%", "card": "0 0% 100%", "card-foreground": "0 0% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "0 0% 3.9%", "primary": "0 0% 9%", "primary-foreground": "0 0% 98%", "secondary": "0 0% 96.1%", "secondary-foreground": "0 0% 9%", + "muted": "0 0% 96.1%", + "muted-foreground": "0 0% 45.1%", "accent": "0 0% 96.1%", "accent-foreground": "0 0% 9%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "0 0% 98%", - "ring": "0 0% 63.9%" + "border": "0 0% 89.8%", + "input": "0 0% 89.8%", + "ring": "0 0% 3.9%" }, "dark": { "background": "0 0% 3.9%", "foreground": "0 0% 98%", - "muted": "0 0% 14.9%", - "muted-foreground": "0 0% 63.9%", - "popover": "0 0% 3.9%", - "popover-foreground": "0 0% 98%", - "border": "0 0% 14.9%", - "input": "0 0% 14.9%", "card": "0 0% 3.9%", "card-foreground": "0 0% 98%", + "popover": "0 0% 3.9%", + "popover-foreground": "0 0% 98%", "primary": "0 0% 98%", "primary-foreground": "0 0% 9%", "secondary": "0 0% 14.9%", "secondary-foreground": "0 0% 98%", + "muted": "0 0% 14.9%", + "muted-foreground": "0 0% 63.9%", "accent": "0 0% 14.9%", "accent-foreground": "0 0% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "0 0% 14.9%" + "destructive-foreground": "0 0% 98%", + "border": "0 0% 14.9%", + "input": "0 0% 14.9%", + "ring": "0 0% 83.1%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n \n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n \n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n \n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n \n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n \n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n \n --ring: 0 0% 63.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n \n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n \n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n \n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n \n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 0 0% 14.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n \n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n \n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n \n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n \n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n \n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n \n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n \n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n \n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json index 46469cb783a..76fccfc2486 100644 --- a/apps/www/public/registry/colors/slate.json +++ b/apps/www/public/registry/colors/slate.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "slate-950", - "muted": "slate-100", - "muted-foreground": "slate-500", - "popover": "white", - "popover-foreground": "slate-950", - "border": "slate-200", - "input": "slate-200", "card": "white", "card-foreground": "slate-950", + "popover": "white", + "popover-foreground": "slate-950", "primary": "slate-900", "primary-foreground": "slate-50", "secondary": "slate-100", "secondary-foreground": "slate-900", + "muted": "slate-100", + "muted-foreground": "slate-500", "accent": "slate-100", "accent-foreground": "slate-900", "destructive": "red-500", "destructive-foreground": "slate-50", - "ring": "slate-400" + "border": "slate-200", + "input": "slate-200", + "ring": "slate-950" }, "dark": { "background": "slate-950", "foreground": "slate-50", - "muted": "slate-800", - "muted-foreground": "slate-400", - "popover": "slate-950", - "popover-foreground": "slate-50", - "border": "slate-800", - "input": "slate-800", "card": "slate-950", "card-foreground": "slate-50", + "popover": "slate-950", + "popover-foreground": "slate-50", "primary": "slate-50", "primary-foreground": "slate-900", "secondary": "slate-800", "secondary-foreground": "slate-50", + "muted": "slate-800", + "muted-foreground": "slate-400", "accent": "slate-800", "accent-foreground": "slate-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "slate-800" + "destructive-foreground": "slate-50", + "border": "slate-800", + "input": "slate-800", + "ring": "slate-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "222.2 84% 4.9%", - "muted": "210 40% 96.1%", - "muted-foreground": "215.4 16.3% 46.9%", - "popover": "0 0% 100%", - "popover-foreground": "222.2 84% 4.9%", - "border": "214.3 31.8% 91.4%", - "input": "214.3 31.8% 91.4%", "card": "0 0% 100%", "card-foreground": "222.2 84% 4.9%", + "popover": "0 0% 100%", + "popover-foreground": "222.2 84% 4.9%", "primary": "222.2 47.4% 11.2%", "primary-foreground": "210 40% 98%", "secondary": "210 40% 96.1%", "secondary-foreground": "222.2 47.4% 11.2%", + "muted": "210 40% 96.1%", + "muted-foreground": "215.4 16.3% 46.9%", "accent": "210 40% 96.1%", "accent-foreground": "222.2 47.4% 11.2%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "210 40% 98%", - "ring": "215 20.2% 65.1%" + "border": "214.3 31.8% 91.4%", + "input": "214.3 31.8% 91.4%", + "ring": "222.2 84% 4.9%" }, "dark": { "background": "222.2 84% 4.9%", "foreground": "210 40% 98%", - "muted": "217.2 32.6% 17.5%", - "muted-foreground": "215 20.2% 65.1%", - "popover": "222.2 84% 4.9%", - "popover-foreground": "210 40% 98%", - "border": "217.2 32.6% 17.5%", - "input": "217.2 32.6% 17.5%", "card": "222.2 84% 4.9%", "card-foreground": "210 40% 98%", + "popover": "222.2 84% 4.9%", + "popover-foreground": "210 40% 98%", "primary": "210 40% 98%", "primary-foreground": "222.2 47.4% 11.2%", "secondary": "217.2 32.6% 17.5%", "secondary-foreground": "210 40% 98%", + "muted": "217.2 32.6% 17.5%", + "muted-foreground": "215 20.2% 65.1%", "accent": "217.2 32.6% 17.5%", "accent-foreground": "210 40% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "217.2 32.6% 17.5%" + "destructive-foreground": "210 40% 98%", + "border": "217.2 32.6% 17.5%", + "input": "217.2 32.6% 17.5%", + "ring": "hsl(212.7,26.8%,83.9)" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n \n --ring: 215 20.2% 65.1%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 217.2 32.6% 17.5%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: hsl(212.7,26.8%,83.9);\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/stone.json b/apps/www/public/registry/colors/stone.json index 05e92bb5cc3..e06a13460d0 100644 --- a/apps/www/public/registry/colors/stone.json +++ b/apps/www/public/registry/colors/stone.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "stone-950", - "muted": "stone-100", - "muted-foreground": "stone-500", - "popover": "white", - "popover-foreground": "stone-950", - "border": "stone-200", - "input": "stone-200", "card": "white", "card-foreground": "stone-950", + "popover": "white", + "popover-foreground": "stone-950", "primary": "stone-900", "primary-foreground": "stone-50", "secondary": "stone-100", "secondary-foreground": "stone-900", + "muted": "stone-100", + "muted-foreground": "stone-500", "accent": "stone-100", "accent-foreground": "stone-900", "destructive": "red-500", "destructive-foreground": "stone-50", - "ring": "stone-400" + "border": "stone-200", + "input": "stone-200", + "ring": "stone-950" }, "dark": { "background": "stone-950", "foreground": "stone-50", - "muted": "stone-800", - "muted-foreground": "stone-400", - "popover": "stone-950", - "popover-foreground": "stone-50", - "border": "stone-800", - "input": "stone-800", "card": "stone-950", "card-foreground": "stone-50", + "popover": "stone-950", + "popover-foreground": "stone-50", "primary": "stone-50", "primary-foreground": "stone-900", "secondary": "stone-800", "secondary-foreground": "stone-50", + "muted": "stone-800", + "muted-foreground": "stone-400", "accent": "stone-800", "accent-foreground": "stone-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "stone-800" + "destructive-foreground": "stone-50", + "border": "stone-800", + "input": "stone-800", + "ring": "stone-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "20 14.3% 4.1%", - "muted": "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - "popover": "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - "border": "20 5.9% 90%", - "input": "20 5.9% 90%", "card": "0 0% 100%", "card-foreground": "20 14.3% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "20 14.3% 4.1%", "primary": "24 9.8% 10%", "primary-foreground": "60 9.1% 97.8%", "secondary": "60 4.8% 95.9%", "secondary-foreground": "24 9.8% 10%", + "muted": "60 4.8% 95.9%", + "muted-foreground": "25 5.3% 44.7%", "accent": "60 4.8% 95.9%", "accent-foreground": "24 9.8% 10%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "60 9.1% 97.8%", - "ring": "24 5.4% 63.9%" + "border": "20 5.9% 90%", + "input": "20 5.9% 90%", + "ring": "20 14.3% 4.1%" }, "dark": { "background": "20 14.3% 4.1%", "foreground": "60 9.1% 97.8%", - "muted": "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - "popover": "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - "border": "12 6.5% 15.1%", - "input": "12 6.5% 15.1%", "card": "20 14.3% 4.1%", "card-foreground": "60 9.1% 97.8%", + "popover": "20 14.3% 4.1%", + "popover-foreground": "60 9.1% 97.8%", "primary": "60 9.1% 97.8%", "primary-foreground": "24 9.8% 10%", "secondary": "12 6.5% 15.1%", "secondary-foreground": "60 9.1% 97.8%", + "muted": "12 6.5% 15.1%", + "muted-foreground": "24 5.4% 63.9%", "accent": "12 6.5% 15.1%", "accent-foreground": "60 9.1% 97.8%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "12 6.5% 15.1%" + "destructive-foreground": "60 9.1% 97.8%", + "border": "12 6.5% 15.1%", + "input": "12 6.5% 15.1%", + "ring": "24 5.7% 82.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n \n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n \n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n \n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n \n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n \n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n \n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n \n --ring: 24 5.4% 63.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n \n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n \n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n \n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n \n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n \n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n \n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n \n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 12 6.5% 15.1%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n \n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n \n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n \n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n \n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n \n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n \n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n \n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n \n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n \n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n \n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n \n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/zinc.json b/apps/www/public/registry/colors/zinc.json index c26bf0e86fc..b13b9e6c59e 100644 --- a/apps/www/public/registry/colors/zinc.json +++ b/apps/www/public/registry/colors/zinc.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "zinc-950", - "muted": "zinc-100", - "muted-foreground": "zinc-500", - "popover": "white", - "popover-foreground": "zinc-950", - "border": "zinc-200", - "input": "zinc-200", "card": "white", "card-foreground": "zinc-950", + "popover": "white", + "popover-foreground": "zinc-950", "primary": "zinc-900", "primary-foreground": "zinc-50", "secondary": "zinc-100", "secondary-foreground": "zinc-900", + "muted": "zinc-100", + "muted-foreground": "zinc-500", "accent": "zinc-100", "accent-foreground": "zinc-900", "destructive": "red-500", "destructive-foreground": "zinc-50", - "ring": "zinc-400" + "border": "zinc-200", + "input": "zinc-200", + "ring": "zinc-950" }, "dark": { "background": "zinc-950", "foreground": "zinc-50", - "muted": "zinc-800", - "muted-foreground": "zinc-400", - "popover": "zinc-950", - "popover-foreground": "zinc-50", - "border": "zinc-800", - "input": "zinc-800", "card": "zinc-950", "card-foreground": "zinc-50", + "popover": "zinc-950", + "popover-foreground": "zinc-50", "primary": "zinc-50", "primary-foreground": "zinc-900", "secondary": "zinc-800", "secondary-foreground": "zinc-50", + "muted": "zinc-800", + "muted-foreground": "zinc-400", "accent": "zinc-800", "accent-foreground": "zinc-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "zinc-800" + "destructive-foreground": "zinc-50", + "border": "zinc-800", + "input": "zinc-800", + "ring": "zinc-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "240 10% 3.9%", - "muted": "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - "popover": "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - "border": "240 5.9% 90%", - "input": "240 5.9% 90%", "card": "0 0% 100%", "card-foreground": "240 10% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", "primary": "240 5.9% 10%", "primary-foreground": "0 0% 98%", "secondary": "240 4.8% 95.9%", "secondary-foreground": "240 5.9% 10%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", "accent": "240 4.8% 95.9%", "accent-foreground": "240 5.9% 10%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "0 0% 98%", - "ring": "240 5% 64.9%" + "border": "240 5.9% 90%", + "input": "240 5.9% 90%", + "ring": "240 10% 3.9%" }, "dark": { "background": "240 10% 3.9%", "foreground": "0 0% 98%", - "muted": "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - "popover": "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - "border": "240 3.7% 15.9%", - "input": "240 3.7% 15.9%", "card": "240 10% 3.9%", "card-foreground": "0 0% 98%", + "popover": "240 10% 3.9%", + "popover-foreground": "0 0% 98%", "primary": "0 0% 98%", "primary-foreground": "240 5.9% 10%", "secondary": "240 3.7% 15.9%", "secondary-foreground": "0 0% 98%", + "muted": "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", "accent": "240 3.7% 15.9%", "accent-foreground": "0 0% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "240 3.7% 15.9%" + "destructive-foreground": "0 0% 98%", + "border": "240 3.7% 15.9%", + "input": "240 3.7% 15.9%", + "ring": "240 4.9% 83.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n \n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n \n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n \n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n \n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n \n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n \n --ring: 240 5% 64.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n \n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n \n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n \n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n \n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 240 3.7% 15.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n \n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n \n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n \n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n \n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n \n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n \n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n \n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n \n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/card.json b/apps/www/public/registry/styles/default/card.json index a039fbc8042..ef31d3a699f 100644 --- a/apps/www/public/registry/styles/default/card.json +++ b/apps/www/public/registry/styles/default/card.json @@ -3,7 +3,7 @@ "files": [ { "name": "card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/select.json b/apps/www/public/registry/styles/default/select.json index eee0a8e1742..514f67083d1 100644 --- a/apps/www/public/registry/styles/default/select.json +++ b/apps/www/public/registry/styles/default/select.json @@ -6,7 +6,7 @@ "files": [ { "name": "select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n {children}\n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n {children}\n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/textarea.json b/apps/www/public/registry/styles/default/textarea.json index acaa34ddcd7..1b94cf2117b 100644 --- a/apps/www/public/registry/styles/default/textarea.json +++ b/apps/www/public/registry/styles/default/textarea.json @@ -3,7 +3,7 @@ "files": [ { "name": "textarea.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes {}\n\nconst Textarea = React.forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n )\n }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes {}\n\nconst Textarea = React.forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n )\n }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/alert.json b/apps/www/public/registry/styles/new-york/alert.json index 6ba27db1fec..221afd4eae8 100644 --- a/apps/www/public/registry/styles/new-york/alert.json +++ b/apps/www/public/registry/styles/new-york/alert.json @@ -3,7 +3,7 @@ "files": [ { "name": "alert.tsx", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/button.json b/apps/www/public/registry/styles/new-york/button.json index 2efbdfea98f..7f667747851 100644 --- a/apps/www/public/registry/styles/new-york/button.json +++ b/apps/www/public/registry/styles/new-york/button.json @@ -6,7 +6,7 @@ "files": [ { "name": "button.tsx", - "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json index 0977b775b97..0998cfa90ae 100644 --- a/apps/www/public/registry/styles/new-york/calendar.json +++ b/apps/www/public/registry/styles/new-york/calendar.json @@ -10,7 +10,7 @@ "files": [ { "name": "calendar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside: \"text-muted-foreground opacity-50\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/card.json b/apps/www/public/registry/styles/new-york/card.json index 99405269f7d..af7ee0e12e5 100644 --- a/apps/www/public/registry/styles/new-york/card.json +++ b/apps/www/public/registry/styles/new-york/card.json @@ -3,7 +3,7 @@ "files": [ { "name": "card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/input.json b/apps/www/public/registry/styles/new-york/input.json index edd63acf738..937dea44fc1 100644 --- a/apps/www/public/registry/styles/new-york/input.json +++ b/apps/www/public/registry/styles/new-york/input.json @@ -3,7 +3,7 @@ "files": [ { "name": "input.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLAttributes {}\n\nconst Input = React.forwardRef(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLAttributes {}\n\nconst Input = React.forwardRef(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/themes.css b/apps/www/public/registry/themes.css index 6c4d9b8c7d1..9ab1ecafca3 100644 --- a/apps/www/public/registry/themes.css +++ b/apps/www/public/registry/themes.css @@ -1,5 +1,69 @@ - .theme-default { + .theme-zinc { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --popover: 0 0% 100%;; + --popover-foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 5.9% 10%; + + --radius: 0.5rem; + } + + .dark .theme-zinc { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 4.9% 83.9%; + } + + .theme-slate { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; @@ -15,7 +79,7 @@ --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; - --primary: 160 90% 46%; + --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; @@ -27,12 +91,12 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; - --ring: 215 20.2% 65.1%; + --ring: 222.2 84% 4.9%; --radius: 0.5rem; } - .dark .theme-default { + .dark .theme-slate { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; @@ -58,12 +122,268 @@ --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; + --destructive-foreground: 210 40% 98%; - --ring: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9; } - .theme-zinc { + .theme-stone { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 24 9.8% 10%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20 14.3% 4.1%; + + --radius: 0.95rem; + } + + .dark .theme-stone { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 60 9.1% 97.8%; + --primary-foreground: 24 9.8% 10%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 24 5.7% 82.9%; + } + + .theme-gray { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 220.9 39.3% 11%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 20% 98%; + + --ring: 224 71.4% 4.1%; + + --radius: 0.35rem; + } + + .dark .theme-gray { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 210 20% 98%; + --primary-foreground: 220.9 39.3% 11%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 216 12.2% 83.9%; + } + + .theme-neutral { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 0% 3.9%; + + --radius: ; + } + + .dark .theme-neutral { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 0% 83.1%; + } + + .theme-red { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 72.2% 50.6%; + + --radius: 0.4rem; + } + + .dark .theme-red { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 72.2% 50.6%; + } + + .theme-rose { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -79,8 +399,8 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; @@ -91,43 +411,107 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --ring: 240 5% 64.9%; + --ring: 346.8 77.2% 49.8%; --radius: 0.5rem; } - .dark .theme-zinc { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; + .dark .theme-rose { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; - --muted: 240 3.7% 15.9%; + --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - --accent: 240 3.7% 15.9%; + --accent: 12 6.5% 15.1%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; - --ring: 240 3.7% 15.9%; + --ring: 346.8 77.2% 49.8%; } - .theme-lime { + .theme-orange { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 24.6 95% 53.1%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 24.6 95% 53.1%; + + --radius: 0.95rem; + } + + .dark .theme-orange { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20.5 90.2% 48.2%; + } + + .theme-green { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -143,8 +527,8 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; - --primary: 87.6 61.2% 20.2%; - --primary-foreground: 0 0% 98%; + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; @@ -155,38 +539,230 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --ring: 240 5% 64.9%; + --ring: 142.1 76.2% 36.3%; - --radius: 0.5rem; + --radius: ; } - .dark .theme-lime { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; + .dark .theme-green { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; - --muted: 240 3.7% 15.9%; + --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; - --primary: 82 84.5% 67.1%; - --primary-foreground: 240 5.9% 10%; + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - --accent: 240 3.7% 15.9%; + --accent: 12 6.5% 15.1%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; - --ring: 240 3.7% 15.9%; + --ring: 142.4 71.8% 29.2%; + } + + .theme-blue { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --ring: 221.2 83.2% 53.3%; + + --radius: ; + } + + .dark .theme-blue { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 224.3 76.3% 48%; + } + + .theme-yellow { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 47.9 95.8% 53.1%; + --primary-foreground: 26 83.3% 14.1%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20 14.3% 4.1%; + + --radius: 0.95rem; + } + + .dark .theme-yellow { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 47.9 95.8% 53.1%; + --primary-foreground: 26 83.3% 14.1%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 35.5 91.7% 32.9%; + } + + .theme-violet { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 262.1 83.3% 57.8%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 20% 98%; + + --ring: 262.1 83.3% 57.8%; + + --radius: ; + } + + .dark .theme-violet { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 263.4 70% 50.4%; + --primary-foreground: 210 20% 98%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 263.4 70% 50.4%; } \ No newline at end of file diff --git a/apps/www/public/registry/themes/gray.json b/apps/www/public/registry/themes/gray.json new file mode 100644 index 00000000000..81742502abe --- /dev/null +++ b/apps/www/public/registry/themes/gray.json @@ -0,0 +1,48 @@ +{ + "name": "gray", + "label": "Gray", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "224 71.4% 4.1%", + "card": "0 0% 100%", + "card-foreground": "224 71.4% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "224 71.4% 4.1%", + "primary": "220.9 39.3% 11%", + "primary-foreground": "210 20% 98%", + "secondary": "220 14.3% 95.9%", + "secondary-foreground": "220.9 39.3% 11%", + "muted": "220 14.3% 95.9%", + "muted-foreground": "220 8.9% 46.1%", + "accent": "220 14.3% 95.9%", + "accent-foreground": "220.9 39.3% 11%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 20% 98%", + "border": "220 13% 91%", + "input": "220 13% 91%", + "ring": "224 71.4% 4.1%" + }, + "dark": { + "background": "224 71.4% 4.1%", + "foreground": "210 20% 98%", + "card": "224 71.4% 4.1%", + "card-foreground": "210 20% 98%", + "popover": "224 71.4% 4.1%", + "popover-foreground": "210 20% 98%", + "primary": "210 20% 98%", + "primary-foreground": "220.9 39.3% 11%", + "secondary": "215 27.9% 16.9%", + "secondary-foreground": "210 20% 98%", + "muted": "215 27.9% 16.9%", + "muted-foreground": "217.9 10.6% 64.9%", + "accent": "215 27.9% 16.9%", + "accent-foreground": "210 20% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 20% 98%", + "border": "215 27.9% 16.9%", + "input": "215 27.9% 16.9%", + "ring": "216 12.2% 83.9%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/neutral.json b/apps/www/public/registry/themes/neutral.json new file mode 100644 index 00000000000..e00dec7f4af --- /dev/null +++ b/apps/www/public/registry/themes/neutral.json @@ -0,0 +1,48 @@ +{ + "name": "neutral", + "label": "Neutral", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "0 0% 3.9%", + "card": "0 0% 100%", + "card-foreground": "0 0% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "0 0% 3.9%", + "primary": "0 0% 9%", + "primary-foreground": "0 0% 98%", + "secondary": "0 0% 96.1%", + "secondary-foreground": "0 0% 9%", + "muted": "0 0% 96.1%", + "muted-foreground": "0 0% 45.1%", + "accent": "0 0% 96.1%", + "accent-foreground": "0 0% 9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "border": "0 0% 89.8%", + "input": "0 0% 89.8%", + "ring": "0 0% 3.9%" + }, + "dark": { + "background": "0 0% 3.9%", + "foreground": "0 0% 98%", + "card": "0 0% 3.9%", + "card-foreground": "0 0% 98%", + "popover": "0 0% 3.9%", + "popover-foreground": "0 0% 98%", + "primary": "0 0% 98%", + "primary-foreground": "0 0% 9%", + "secondary": "0 0% 14.9%", + "secondary-foreground": "0 0% 98%", + "muted": "0 0% 14.9%", + "muted-foreground": "0 0% 63.9%", + "accent": "0 0% 14.9%", + "accent-foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + "border": "0 0% 14.9%", + "input": "0 0% 14.9%", + "ring": "0 0% 83.1%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/slate.json b/apps/www/public/registry/themes/slate.json new file mode 100644 index 00000000000..7423e439dd7 --- /dev/null +++ b/apps/www/public/registry/themes/slate.json @@ -0,0 +1,48 @@ +{ + "name": "slate", + "label": "Slate", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "222.2 84% 4.9%", + "card": "0 0% 100%", + "card-foreground": "222.2 84% 4.9%", + "popover": "0 0% 100%", + "popover-foreground": "222.2 84% 4.9%", + "primary": "222.2 47.4% 11.2%", + "primary-foreground": "210 40% 98%", + "secondary": "210 40% 96.1%", + "secondary-foreground": "222.2 47.4% 11.2%", + "muted": "210 40% 96.1%", + "muted-foreground": "215.4 16.3% 46.9%", + "accent": "210 40% 96.1%", + "accent-foreground": "222.2 47.4% 11.2%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 40% 98%", + "border": "214.3 31.8% 91.4%", + "input": "214.3 31.8% 91.4%", + "ring": "222.2 84% 4.9%" + }, + "dark": { + "background": "222.2 84% 4.9%", + "foreground": "210 40% 98%", + "card": "222.2 84% 4.9%", + "card-foreground": "210 40% 98%", + "popover": "222.2 84% 4.9%", + "popover-foreground": "210 40% 98%", + "primary": "210 40% 98%", + "primary-foreground": "222.2 47.4% 11.2%", + "secondary": "217.2 32.6% 17.5%", + "secondary-foreground": "210 40% 98%", + "muted": "217.2 32.6% 17.5%", + "muted-foreground": "215 20.2% 65.1%", + "accent": "217.2 32.6% 17.5%", + "accent-foreground": "210 40% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 40% 98%", + "border": "217.2 32.6% 17.5%", + "input": "217.2 32.6% 17.5%", + "ring": "hsl(212.7,26.8%,83.9)" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/stone.json b/apps/www/public/registry/themes/stone.json new file mode 100644 index 00000000000..8ff9ab5cad9 --- /dev/null +++ b/apps/www/public/registry/themes/stone.json @@ -0,0 +1,48 @@ +{ + "name": "stone", + "label": "Stone", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "20 14.3% 4.1%", + "card": "0 0% 100%", + "card-foreground": "20 14.3% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "20 14.3% 4.1%", + "primary": "24 9.8% 10%", + "primary-foreground": "60 9.1% 97.8%", + "secondary": "60 4.8% 95.9%", + "secondary-foreground": "24 9.8% 10%", + "muted": "60 4.8% 95.9%", + "muted-foreground": "25 5.3% 44.7%", + "accent": "60 4.8% 95.9%", + "accent-foreground": "24 9.8% 10%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "60 9.1% 97.8%", + "border": "20 5.9% 90%", + "input": "20 5.9% 90%", + "ring": "20 14.3% 4.1%" + }, + "dark": { + "background": "20 14.3% 4.1%", + "foreground": "60 9.1% 97.8%", + "card": "20 14.3% 4.1%", + "card-foreground": "60 9.1% 97.8%", + "popover": "20 14.3% 4.1%", + "popover-foreground": "60 9.1% 97.8%", + "primary": "60 9.1% 97.8%", + "primary-foreground": "24 9.8% 10%", + "secondary": "12 6.5% 15.1%", + "secondary-foreground": "60 9.1% 97.8%", + "muted": "12 6.5% 15.1%", + "muted-foreground": "24 5.4% 63.9%", + "accent": "12 6.5% 15.1%", + "accent-foreground": "60 9.1% 97.8%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "60 9.1% 97.8%", + "border": "12 6.5% 15.1%", + "input": "12 6.5% 15.1%", + "ring": "24 5.7% 82.9%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/zinc.json b/apps/www/public/registry/themes/zinc.json new file mode 100644 index 00000000000..b69bd36288e --- /dev/null +++ b/apps/www/public/registry/themes/zinc.json @@ -0,0 +1,48 @@ +{ + "name": "zinc", + "label": "Zinc", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "240 10% 3.9%", + "card": "0 0% 100%", + "card-foreground": "240 10% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "240 5.9% 10%", + "primary-foreground": "0 0% 98%", + "secondary": "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", + "accent": "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "border": "240 5.9% 90%", + "input": "240 5.9% 90%", + "ring": "240 10% 3.9%" + }, + "dark": { + "background": "240 10% 3.9%", + "foreground": "0 0% 98%", + "card": "240 10% 3.9%", + "card-foreground": "0 0% 98%", + "popover": "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + "primary": "0 0% 98%", + "primary-foreground": "240 5.9% 10%", + "secondary": "240 3.7% 15.9%", + "secondary-foreground": "0 0% 98%", + "muted": "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + "accent": "240 3.7% 15.9%", + "accent-foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + "border": "240 3.7% 15.9%", + "input": "240 3.7% 15.9%", + "ring": "240 4.9% 83.9%" + } + } +} \ No newline at end of file diff --git a/apps/www/registry/colors.ts b/apps/www/registry/colors.ts index 81265173f51..cbc310a63c4 100644 --- a/apps/www/registry/colors.ts +++ b/apps/www/registry/colors.ts @@ -1514,43 +1514,43 @@ export const colorMapping = { light: { background: "white", foreground: "{{base}}-950", - muted: "{{base}}-100", - "muted-foreground": "{{base}}-500", - popover: "white", - "popover-foreground": "{{base}}-950", - border: "{{base}}-200", - input: "{{base}}-200", card: "white", "card-foreground": "{{base}}-950", + popover: "white", + "popover-foreground": "{{base}}-950", primary: "{{base}}-900", "primary-foreground": "{{base}}-50", secondary: "{{base}}-100", "secondary-foreground": "{{base}}-900", + muted: "{{base}}-100", + "muted-foreground": "{{base}}-500", accent: "{{base}}-100", "accent-foreground": "{{base}}-900", destructive: "red-500", "destructive-foreground": "{{base}}-50", - ring: "{{base}}-400", + border: "{{base}}-200", + input: "{{base}}-200", + ring: "{{base}}-950", }, dark: { background: "{{base}}-950", foreground: "{{base}}-50", - muted: "{{base}}-800", - "muted-foreground": "{{base}}-400", - popover: "{{base}}-950", - "popover-foreground": "{{base}}-50", - border: "{{base}}-800", - input: "{{base}}-800", card: "{{base}}-950", "card-foreground": "{{base}}-50", + popover: "{{base}}-950", + "popover-foreground": "{{base}}-50", primary: "{{base}}-50", "primary-foreground": "{{base}}-900", secondary: "{{base}}-800", "secondary-foreground": "{{base}}-50", + muted: "{{base}}-800", + "muted-foreground": "{{base}}-400", accent: "{{base}}-800", "accent-foreground": "{{base}}-50", destructive: "red-900", - "destructive-foreground": "red-50", - ring: "{{base}}-800", + "destructive-foreground": "{{base}}-50", + border: "{{base}}-800", + input: "{{base}}-800", + ring: "{{base}}-300", }, } as const diff --git a/apps/www/registry/default/example/cards/activity-goal.tsx b/apps/www/registry/default/example/cards/activity-goal.tsx new file mode 100644 index 00000000000..a3997a6fed1 --- /dev/null +++ b/apps/www/registry/default/example/cards/activity-goal.tsx @@ -0,0 +1,132 @@ +"use client" + +import * as React from "react" +import { Minus, Plus } from "lucide-react" +import { useTheme } from "next-themes" +import { Bar, BarChart, ResponsiveContainer } from "recharts" + +import { useConfig } from "@/hooks/use-config" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { themes } from "@/registry/themes" + +const data = [ + { + goal: 400, + }, + { + goal: 300, + }, + { + goal: 200, + }, + { + goal: 300, + }, + { + goal: 200, + }, + { + goal: 278, + }, + { + goal: 189, + }, + { + goal: 239, + }, + { + goal: 300, + }, + { + goal: 200, + }, + { + goal: 278, + }, + { + goal: 189, + }, + { + goal: 349, + }, +] + +export function CardsActivityGoal() { + const { theme: mode } = useTheme() + const [config] = useConfig() + + const theme = themes.find((theme) => theme.name === config.theme) + const [goal, setGoal] = React.useState(350) + + function onClick(adjustment: number) { + setGoal(Math.max(200, Math.min(400, goal + adjustment))) + } + + return ( + + + Move Goal + Set your daily activity goal. + + +
+ +
+
{goal}
+
+ Calories/day +
+
+ +
+
+ + + + + +
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/calendar.tsx b/apps/www/registry/default/example/cards/calendar.tsx new file mode 100644 index 00000000000..39785387d89 --- /dev/null +++ b/apps/www/registry/default/example/cards/calendar.tsx @@ -0,0 +1,26 @@ +"use client" + +import { addDays } from "date-fns" + +import { Calendar } from "@/registry/default/ui/calendar" +import { Card, CardContent } from "@/registry/default/ui/card" + +const start = new Date(2023, 5, 5) + +export function CardsCalendar() { + return ( + + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/chat.tsx b/apps/www/registry/default/example/cards/chat.tsx new file mode 100644 index 00000000000..dd2e11e78a1 --- /dev/null +++ b/apps/www/registry/default/example/cards/chat.tsx @@ -0,0 +1,254 @@ +import * as React from "react" +import { Check, Plus, Send } from "lucide-react" + +import { cn } from "@/lib/utils" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardFooter, + CardHeader, +} from "@/registry/default/ui/card" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/registry/default/ui/command" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/registry/default/ui/dialog" +import { Input } from "@/registry/default/ui/input" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/registry/default/ui/tooltip" + +const users = [ + { + name: "Olivia Martin", + email: "m@example.com", + avatar: "/avatars/01.png", + }, + { + name: "Isabella Nguyen", + email: "isabella.nguyen@email.com", + avatar: "/avatars/03.png", + }, + { + name: "Emma Wilson", + email: "emma@example.com", + avatar: "/avatars/05.png", + }, + { + name: "Jackson Lee", + email: "lee@example.com", + avatar: "/avatars/02.png", + }, + { + name: "William Kim", + email: "will@email.com", + avatar: "/avatars/04.png", + }, +] as const + +type User = (typeof users)[number] + +export function CardsChat() { + const [open, setOpen] = React.useState(false) + const [selectedUsers, setSelectedUsers] = React.useState([]) + + const [messages, setMessages] = React.useState([ + { + role: "agent", + content: "Hi, how can I help you today?", + }, + { + role: "user", + content: "Hey, I'm having trouble with my account.", + }, + { + role: "agent", + content: "What seems to be the problem?", + }, + { + role: "user", + content: "I can't log in.", + }, + ]) + + return ( + <> + + +
+ + + OM + +
+

Sofia Davis

+

m@example.com

+
+
+ + + + + + New message + + + + +
+ {messages.map((message, index) => ( +
+ {message.content} +
+ ))} +
+ + +
{ + event.preventDefault() + setMessages([ + ...messages, + { + role: "user", + content: event.currentTarget.message.value, + }, + ]) + + event.currentTarget.message.value = "" + }} + className="flex w-full items-center space-x-2" + > + + +
+ + + + + + New message + + Invite a user to this thread. This will create a new group + message. + + + + + + No users found. + + {users.map((user) => ( + { + if (selectedUsers.includes(user)) { + return setSelectedUsers( + selectedUsers.filter( + (selectedUser) => selectedUser !== user + ) + ) + } + + return setSelectedUsers( + [...users].filter((u) => + [...selectedUsers, user].includes(u) + ) + ) + }} + > + + + {user.name[0]} + +
+

+ {user.name} +

+

+ {user.email} +

+
+ {selectedUsers.includes(user) ? ( + + ) : null} + + ))} + + + + + {selectedUsers.length > 0 ? ( +
+ {selectedUsers.map((user) => ( + + + {user.name[0]} + + ))} +
+ ) : ( +

+ Select users to add to this thread. +

+ )} + + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/cookie-settings.tsx b/apps/www/registry/default/example/cards/cookie-settings.tsx new file mode 100644 index 00000000000..11e6df7fcde --- /dev/null +++ b/apps/www/registry/default/example/cards/cookie-settings.tsx @@ -0,0 +1,60 @@ +"use client" + +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Label } from "@/registry/default/ui/label" +import { Switch } from "@/registry/default/ui/switch" + +export function CardsCookieSettings() { + return ( + + + Cookie Settings + Manage your cookie settings here. + + +
+ + +
+
+ + +
+
+ + +
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/create-account.tsx b/apps/www/registry/default/example/cards/create-account.tsx new file mode 100644 index 00000000000..ef7ef5b81ae --- /dev/null +++ b/apps/www/registry/default/example/cards/create-account.tsx @@ -0,0 +1,60 @@ +"use client" + +import { Icons } from "@/components/icons" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" + +export function CardsCreateAccount() { + return ( + + + Create an account + + Enter your email below to create your account + + + +
+ + +
+
+
+ +
+
+ + Or continue with + +
+
+
+ + +
+
+ + +
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/data-table.tsx b/apps/www/registry/default/example/cards/data-table.tsx new file mode 100644 index 00000000000..6df6f05b3ab --- /dev/null +++ b/apps/www/registry/default/example/cards/data-table.tsx @@ -0,0 +1,332 @@ +"use client" + +import * as React from "react" +import { + CaretSortIcon, + ChevronDownIcon, + DotsHorizontalIcon, +} from "@radix-ui/react-icons" +import { + ColumnDef, + ColumnFiltersState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table" + +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Checkbox } from "@/registry/default/ui/checkbox" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { Input } from "@/registry/default/ui/input" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/registry/default/ui/table" + +const data: Payment[] = [ + { + id: "m5gr84i9", + amount: 316, + status: "success", + email: "ken99@yahoo.com", + }, + { + id: "3u1reuv4", + amount: 242, + status: "success", + email: "Abe45@gmail.com", + }, + { + id: "derv1ws0", + amount: 837, + status: "processing", + email: "Monserrat44@gmail.com", + }, + { + id: "5kma53ae", + amount: 874, + status: "success", + email: "Silas22@gmail.com", + }, + { + id: "bhqecj4p", + amount: 721, + status: "failed", + email: "carmella@hotmail.com", + }, +] + +export type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + /> + ), + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => ( +
{row.getValue("status")}
+ ), + }, + { + accessorKey: "email", + header: ({ column }) => { + return ( + + ) + }, + cell: ({ row }) =>
{row.getValue("email")}
, + }, + { + accessorKey: "amount", + header: () =>
Amount
, + cell: ({ row }) => { + const amount = parseFloat(row.getValue("amount")) + + // Format the amount as a dollar amount + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + }).format(amount) + + return
{formatted}
+ }, + }, + { + id: "actions", + enableHiding: false, + cell: ({ row }) => { + const payment = row.original + + return ( + + + + + + Actions + navigator.clipboard.writeText(payment.id)} + > + Copy payment ID + + + View customer + View payment details + + + ) + }, + }, +] + +export function CardsDataTable() { + const [sorting, setSorting] = React.useState([]) + const [columnFilters, setColumnFilters] = React.useState( + [] + ) + const [columnVisibility, setColumnVisibility] = + React.useState({}) + const [rowSelection, setRowSelection] = React.useState({}) + + const table = useReactTable({ + data, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + }, + }) + + return ( + + + Payments + Manage your payments. + + +
+ + table.getColumn("email")?.setFilterValue(event.target.value) + } + className="max-w-sm" + /> + + + + + + {table + .getAllColumns() + .filter((column) => column.getCanHide()) + .map((column) => { + return ( + + column.toggleVisibility(!!value) + } + > + {column.id} + + ) + })} + + +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + +
+
+ + + ) +} diff --git a/apps/www/registry/default/example/cards/index.tsx b/apps/www/registry/default/example/cards/index.tsx new file mode 100644 index 00000000000..888fa37563c --- /dev/null +++ b/apps/www/registry/default/example/cards/index.tsx @@ -0,0 +1,63 @@ +import { CardsActivityGoal } from "@/registry/default/example/cards/activity-goal" +import { CardsCalendar } from "@/registry/default/example/cards/calendar" +import { CardsChat } from "@/registry/default/example/cards/chat" +import { CardsCookieSettings } from "@/registry/default/example/cards/cookie-settings" +import { CardsCreateAccount } from "@/registry/default/example/cards/create-account" +import { CardsDataTable } from "@/registry/default/example/cards/data-table" +import { CardsMetric } from "@/registry/default/example/cards/metric" +import { CardsPaymentMethod } from "@/registry/default/example/cards/payment-method" +import { CardsReportIssue } from "@/registry/default/example/cards/report-issue" +import { CardsShare } from "@/registry/default/example/cards/share" +import { CardsStats } from "@/registry/default/example/cards/stats" +import { CardsTeamMembers } from "@/registry/default/example/cards/team-members" + +export default function CardsDemo() { + return ( +
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + + +
+
+ + +
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ ) +} diff --git a/apps/www/registry/default/example/cards/metric.tsx b/apps/www/registry/default/example/cards/metric.tsx new file mode 100644 index 00000000000..2e6c962c8ed --- /dev/null +++ b/apps/www/registry/default/example/cards/metric.tsx @@ -0,0 +1,142 @@ +import { useTheme } from "next-themes" +import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts" + +import { useConfig } from "@/hooks/use-config" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { themes } from "@/registry/themes" + +const data = [ + { + average: 400, + today: 240, + }, + { + average: 300, + today: 139, + }, + { + average: 200, + today: 980, + }, + { + average: 278, + today: 390, + }, + { + average: 189, + today: 480, + }, + { + average: 239, + today: 380, + }, + { + average: 349, + today: 430, + }, +] + +export function CardsMetric() { + const { theme: mode } = useTheme() + const [config] = useConfig() + + const theme = themes.find((theme) => theme.name === config.theme) + + return ( + + + Exercise Minutes + + Your excercise minutes are ahead of where you normally are. + + + +
+ + + { + if (active && payload && payload.length) { + return ( +
+
+
+ + Average + + + {payload[0].value} + +
+
+ + Today + + + {payload[1].value} + +
+
+
+ ) + } + + return null + }} + /> + + + + +
+ + + ) +} diff --git a/apps/www/registry/default/example/cards/payment-method.tsx b/apps/www/registry/default/example/cards/payment-method.tsx new file mode 100644 index 00000000000..0aac70331e4 --- /dev/null +++ b/apps/www/registry/default/example/cards/payment-method.tsx @@ -0,0 +1,148 @@ +"use client" + +import { Icons } from "@/components/icons" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" +import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" + +export function CardsPaymentMethod() { + return ( + + + Payment Method + + Add a new payment method to your account. + + + + + + + + +
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/report-issue.tsx b/apps/www/registry/default/example/cards/report-issue.tsx new file mode 100644 index 00000000000..c2bf1317318 --- /dev/null +++ b/apps/www/registry/default/example/cards/report-issue.tsx @@ -0,0 +1,90 @@ +"use client" + +import * as React from "react" + +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" +import { Textarea } from "@/registry/default/ui/textarea" + +export function CardsReportIssue() { + const id = React.useId() + + return ( + + + Report an issue + + What area are you having problems with? + + + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +