From 93b5dc7dc5f53bcda658ae53dbfdea8fa91e1dd8 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Wed, 29 Jan 2025 16:55:50 +0100 Subject: [PATCH 001/143] ui playground --- apps/ui-playground/.gitignore | 41 +++ apps/ui-playground/README.md | 36 ++ apps/ui-playground/app/favicon.ico | Bin 0 -> 25931 bytes apps/ui-playground/app/globals.css | 485 ++++++++++++++++++++++++++ apps/ui-playground/app/layout.tsx | 31 ++ apps/ui-playground/app/page.tsx | 5 + apps/ui-playground/eslint.config.mjs | 16 + apps/ui-playground/next.config.ts | 7 + apps/ui-playground/package.json | 30 ++ apps/ui-playground/postcss.config.mjs | 8 + apps/ui-playground/tailwind.config.ts | 8 + apps/ui-playground/tsconfig.json | 27 ++ 12 files changed, 694 insertions(+) create mode 100644 apps/ui-playground/.gitignore create mode 100644 apps/ui-playground/README.md create mode 100644 apps/ui-playground/app/favicon.ico create mode 100644 apps/ui-playground/app/globals.css create mode 100644 apps/ui-playground/app/layout.tsx create mode 100644 apps/ui-playground/app/page.tsx create mode 100644 apps/ui-playground/eslint.config.mjs create mode 100644 apps/ui-playground/next.config.ts create mode 100644 apps/ui-playground/package.json create mode 100644 apps/ui-playground/postcss.config.mjs create mode 100644 apps/ui-playground/tailwind.config.ts create mode 100644 apps/ui-playground/tsconfig.json diff --git a/apps/ui-playground/.gitignore b/apps/ui-playground/.gitignore new file mode 100644 index 00000000000000..5ef6a520780202 --- /dev/null +++ b/apps/ui-playground/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/apps/ui-playground/README.md b/apps/ui-playground/README.md new file mode 100644 index 00000000000000..e215bc4ccf138b --- /dev/null +++ b/apps/ui-playground/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/apps/ui-playground/app/favicon.ico b/apps/ui-playground/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 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 LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/apps/ui-playground/app/globals.css b/apps/ui-playground/app/globals.css new file mode 100644 index 00000000000000..4c25942b20f5f0 --- /dev/null +++ b/apps/ui-playground/app/globals.css @@ -0,0 +1,485 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +/** +* Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC +*/ +:root { + /* background */ + + --cal-bg-emphasis: hsla(220,13%,91%,1); + --cal-bg: hsla(0,0%,100%,1); + --cal-bg-subtle: hsla(220, 14%, 96%,1); + --cal-bg-muted: hsla(210,20%,98%,1); + --cal-bg-inverted: hsla(0,0%,6%,1); + + /* background -> components*/ + --cal-bg-info: hsla(218,83%,98%,1); + --cal-bg-success: hsla(134,76%,94%,1); + --cal-bg-attention: hsla(37, 86%, 92%, 1); + --cal-bg-error: hsla(3,66%,93%,1); + --cal-bg-dark-error: hsla(2, 55%, 30%, 1); + + /* Borders */ + --cal-border-emphasis: hsla(218, 11%, 65%, 1); + --cal-border: hsla(216, 12%, 84%, 1); + --cal-border-subtle: hsla(220, 13%, 91%, 1); + --cal-border-booker: #e5e7eb; + --cal-border-muted: hsla(220, 14%, 96%, 1); + --cal-border-error: hsla(4, 63%, 41%, 1); + --cal-border-focus: hsla(0, 0%, 10%, 1); + + /* Content/Text */ + --cal-text-emphasis: hsla(217, 19%, 27%, 1); + --cal-text: hsla(217, 19%, 27%, 1); + --cal-text-subtle: hsla(220, 9%, 46%, 1); + --cal-text-muted: hsla(218, 11%, 65%, 1); + --cal-text-inverted: hsla(0, 0%, 100%, 1); + + /* Content/Text -> components */ + --cal-text-info: hsla(228, 56%, 33%, 1); + --cal-text-success: hsla(133, 34%, 24%, 1); + --cal-text-attention: hsla(16, 62%, 28%, 1); + --cal-text-error: hsla(2, 55%, 30%, 1); + + /* Brand shinanigans + -> These will be computed for the users theme at runtime. + */ + --cal-brand: hsla(221, 39%, 11%, 1); + --cal-brand-emphasis: hsla(0, 0%, 6%, 1); + --cal-brand-text: hsla(0, 0%, 100%, 1); +} +.dark { + /* background */ + + --cal-bg-emphasis: hsla(0, 0%, 25%, 1); + --cal-bg: hsla(0, 0%, 10%, 1); + --cal-bg-subtle: hsla(0, 0%, 18%, 1); + --cal-bg-muted: hsla(0, 0%, 12%, 1); + --cal-bg-inverted: hsla(220, 14%, 96%, 1); + + /* background -> components*/ + --cal-bg-info: hsla(228, 56%, 33%, 1); + --cal-bg-success: hsla(133, 34%, 24%, 1); + --cal-bg-attention: hsla(16, 62%, 28%, 1); + --cal-bg-error: hsla(2, 55%, 30%, 1); + --cal-bg-dark-error: hsla(2, 55%, 30%, 1); + + /* Borders */ + --cal-border-emphasis: hsla(0, 0%, 46%, 1); + --cal-border: hsla(0, 0%, 34%, 1); + --cal-border-subtle: hsla(0, 0%, 22%, 1); + --cal-border-booker: hsla(0, 0%, 22%, 1); + --cal-border-muted: hsla(0, 0%, 18%, 1); + --cal-border-error: hsla(4, 63%, 41%, 1); + --cal-border-focus: hsla(0, 0%, 100%, 1); + + /* Content/Text */ + --cal-text-emphasis: hsla(240, 20%, 99%, 1); + --cal-text: hsla(0, 0%, 84%, 1); + --cal-text-subtle: hsla(0, 0%, 65%, 1); + --cal-text-muted: hsla(0, 0%, 34%, 1); + --cal-text-inverted: hsla(0, 0%, 10%, 1); + + /* Content/Text -> components */ + --cal-text-info: hsla(218, 83%, 93%, 1); + --cal-text-success: hsla(134, 76%, 94%, 1); + --cal-text-attention: hsla(37, 86%, 92%, 1); + --cal-text-error: hsla(3, 66%, 93%, 1); + + /* Brand shenanigans + -> These will be computed for the users theme at runtime. + */ + --cal-brand: hsla(0, 0%, 100%, 1); + --cal-brand-emphasis: hsla(218, 11%, 65%, 1); + --cal-brand-text: hsla(0, 0%, 0%,1); +} + +@layer base { + * { + @apply border-default + } +} + +::-moz-selection { + color: var(--cal-brand-text); + background: var(--cal-brand); +} + +::selection { + color: var(--cal-brand-text); + background: var(--cal-brand); +} + +body  { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +/* + Desktop App specific CSS + https://docs.todesktop.com/ +*/ + +html.todesktop-platform-win32 .todesktop\:\!bg-transparent{ + background: inherit !important; +} + +/* disable user selection on buttons, links and images on desktop app */ +html.todesktop button, +html.todesktop a, +html.todesktop img, +html.todesktop header { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default !important; +} + +html.todesktop, +html.todesktop div { + cursor: default !important; +} + +/* make header draggable on desktop app */ +html.todesktop header { + -webkit-app-region: drag; +} + +html.todesktop header button, +html.todesktop header a { + -webkit-app-region: no-drag; +} + +html.todesktop-platform-darwin body, html.todesktop-platform-darwin aside { + background: transparent !important; +} + +html.todesktop-platform-darwin.dark main.bg-default { + background: rgba(0, 0, 0, 0.6) !important; +} + +html.todesktop-platform-darwin.light main.bg-default { + background: rgba(255, 255, 255, 0.8) !important; +} + +html.todesktop.light { + --cal-bg-emphasis: hsla(0, 0%, 11%, 0.1); +} + +html.todesktop.dark { + --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3); +} + +/* + Adds Utility to hide scrollbar to tailwind + https://github.com/tailwindlabs/tailwindcss/discussions/2394 + https://github.com/tailwindlabs/tailwindcss/pull/5732 +*/ +@layer utilities { + /* Chrome, Safari and Opera */ + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } +} + +/* + * Override the default tailwindcss-forms styling (default is: 'colors.blue.600') + * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006 + */ +[type="text"]:focus, +[type="email"]:focus, +[type="url"]:focus, +[type="password"]:focus, +[type="number"]:focus, +[type="date"]:focus, +[type="datetime-local"]:focus, +[type="month"]:focus, +[type="search"]:focus, +[type="tel"]:focus, +[type="checkbox"]:focus, +[type="radio"]:focus, +[type="time"]:focus, +[type="week"]:focus, +[multiple]:focus, +textarea:focus, +select:focus { + --tw-ring-color: var(--brand-color); + border-color: var(--brand-color); +} + +@layer components { + .scroll-bar { + @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent; + } +} + +/* TODO: avoid global specific css */ +/* button[role="switch"][data-state="checked"] span { + transform: translateX(16px); +} */ + +@layer components { + /* slider */ + .slider { + @apply relative flex h-4 w-40 select-none items-center; + } + + .slider > .slider-track { + @apply relative h-1 flex-grow rounded-md bg-gray-400; + } + + .slider .slider-range { + @apply absolute h-full rounded-full bg-gray-700; + } + + .slider .slider-thumb { + @apply block h-3 w-3 cursor-pointer rounded-full bg-gray-700 transition-all; + } + + .slider .slider-thumb:hover { + @apply bg-gray-600; + } + + .slider .slider-thumb:focus { + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); + } +} + +/* hide chat bubble on mobile */ +@media only screen and (max-width: 768px) { + /* Intercom FAB*/ + #launcher { + display: none !important; + } + + /* Zendesk FAB*/ + div[role="presentation"] > iframe { + display: none !important; + } + + /* Helpscout FAB*/ + .BeaconFabButtonFrame { + margin-left: -30px; + left: 50%; + bottom: 28px !important; + z-index: 1058 !important; + } +} + +/* TODO: implement styling for react-multi-email */ + +/* !important to override react-dates */ +.DateRangePickerInput__withBorder { + border: 0 !important; +} +.DateInput_input { + border: 1px solid #d1d5db !important; + border-radius: 2px !important; + font-size: inherit !important; + font-weight: inherit !important; + color: #000; + padding: 11px ​11px 9px !important; + line-height: 16px !important; +} + +.DateInput_input__focused { + border: 2px solid #000 !important; + border-radius: 2px !important; + box-shadow: none !important; + padding: 10px ​10px 9px !important; +} + +.DateRangePickerInput_arrow { + padding: 0px 10px; +} + +.loader { + display: block; + width: 30px; + height: 30px; + margin: 60px auto; + position: relative; + border-width: 4px; + border-style: solid; + animation: loader 2s infinite ease; +} + +.loader-inner { + vertical-align: top; + display: inline-block; + width: 100%; + animation: loader-inner 2s infinite ease-in; +} + +.no-ring-inset { + --tw-ring-inset: unset; +} + +@keyframes loader { + 0% { + transform: rotate(0deg); + } + + 25% { + transform: rotate(180deg); + } + + 50% { + transform: rotate(180deg); + } + + 75% { + transform: rotate(360deg); + } + + 100% { + transform: rotate(360deg); + } +} + +@keyframes loader-inner { + 0% { + height: 0%; + } + + 25% { + height: 0%; + } + + 50% { + height: 100%; + } + + 75% { + height: 100%; + } + + 100% { + height: 0%; + } +} + +.text-inverted-important { + color: white !important; +} + +@layer utilities { + .transition-max-width { + -webkit-transition-property: max-width; + transition-property: max-width; + } +} + +#timeZone input:focus { + box-shadow: none; +} + +/* react-date-picker forces a border upon us, cast it away */ +.react-date-picker__wrapper { + border: none !important; +} + +.react-date-picker__inputGroup__input { + padding-top: 0; + padding-bottom: 0; +} + +/* animations */ +.slideInBottom { + animation-duration: 0.3s; + animation-fill-mode: both; + animation-name: slideInBottom; +} + +@keyframes slideInBottom { + from { + opacity: 0; + transform: translateY(30%); + pointer-events: none; + } + to { + opacity: 1; + pointer-events: auto; + } +} + +/* animations */ +.slideInTop { + animation-duration: 0.3s; + animation-fill-mode: both; + animation-name: slideInTop; +} + +@keyframes slideInTop { + from { + opacity: 0; + transform: translateY(-20%); + pointer-events: none; + } + to { + opacity: 1; + pointer-events: auto; + transform: translateY(0%); + } +} + +.fadeIn { + animation-duration: 0.3s; + animation-fill-mode: both; + animation-name: fadeIn; + animation-timing-function: ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/** + * Makes sure h-screen works on mobile Safari. By default h-screen + * does not take into account the height of the address bar, causing + * weird behaviour when scrolling — sometimes the height will be correct + * and sometimes it won't, depending on whether the address bar is + * in 'collapsed' state or not. + * @see: https://benborgers.com/posts/tailwind-h-screen + */ +@supports (-webkit-touch-callout: none) { + .h-screen { + height: -webkit-fill-available; + } +} + +::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.react-tel-input .country-list .country:hover, +.react-tel-input .country-list .country.highlight { + @apply !bg-emphasis; +} + +.react-tel-input .flag-dropdown .selected-flag, +.react-tel-input .flag-dropdown.open .selected-flag { + @apply !bg-default; +} + +.react-tel-input .flag-dropdown { + @apply !border-r-default left-0.5 !border-y-0 !border-l-0; +} + +.intercom-lightweight-app { + @apply z-40 !important; +} diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx new file mode 100644 index 00000000000000..a521089ba04653 --- /dev/null +++ b/apps/ui-playground/app/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; + +import "./globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/apps/ui-playground/app/page.tsx b/apps/ui-playground/app/page.tsx new file mode 100644 index 00000000000000..18bb6f0c614c3c --- /dev/null +++ b/apps/ui-playground/app/page.tsx @@ -0,0 +1,5 @@ +// import AvatarDemo from "./_components/AvatarDemo"; + +export default function Home() { + return
{/* */}
; +} diff --git a/apps/ui-playground/eslint.config.mjs b/apps/ui-playground/eslint.config.mjs new file mode 100644 index 00000000000000..c85fb67c463f20 --- /dev/null +++ b/apps/ui-playground/eslint.config.mjs @@ -0,0 +1,16 @@ +import { dirname } from "path"; +import { fileURLToPath } from "url"; +import { FlatCompat } from "@eslint/eslintrc"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const compat = new FlatCompat({ + baseDirectory: __dirname, +}); + +const eslintConfig = [ + ...compat.extends("next/core-web-vitals", "next/typescript"), +]; + +export default eslintConfig; diff --git a/apps/ui-playground/next.config.ts b/apps/ui-playground/next.config.ts new file mode 100644 index 00000000000000..e9ffa3083ad279 --- /dev/null +++ b/apps/ui-playground/next.config.ts @@ -0,0 +1,7 @@ +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = { + /* config options here */ +}; + +export default nextConfig; diff --git a/apps/ui-playground/package.json b/apps/ui-playground/package.json new file mode 100644 index 00000000000000..79f7abbe38155b --- /dev/null +++ b/apps/ui-playground/package.json @@ -0,0 +1,30 @@ +{ + "name": "ui-playground", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --turbopack --port=1337", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@calcom/config": "*", + "@calcom/lib": "*", + "@calcom/ui": "*", + "next": "15.1.6", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "@eslint/eslintrc": "^3", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "eslint": "^9", + "eslint-config-next": "15.1.6", + "postcss": "^8", + "tailwindcss": "^3.4.1", + "typescript": "^5" + } +} diff --git a/apps/ui-playground/postcss.config.mjs b/apps/ui-playground/postcss.config.mjs new file mode 100644 index 00000000000000..1a69fd2a450afc --- /dev/null +++ b/apps/ui-playground/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/apps/ui-playground/tailwind.config.ts b/apps/ui-playground/tailwind.config.ts new file mode 100644 index 00000000000000..f21d47baefefee --- /dev/null +++ b/apps/ui-playground/tailwind.config.ts @@ -0,0 +1,8 @@ +import base from "@calcom/config/tailwind-preset"; + +/** @type {import('tailwindcss').Config} */ +module.exports = { + ...base, + content: [...base.content], + plugins: [...base.plugins, require("tailwindcss-animate")], +}; diff --git a/apps/ui-playground/tsconfig.json b/apps/ui-playground/tsconfig.json new file mode 100644 index 00000000000000..d8b93235f205ef --- /dev/null +++ b/apps/ui-playground/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} From 079a5a4ed419d55fea6908fd76ab58520c053f19 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Wed, 29 Jan 2025 21:14:07 +0100 Subject: [PATCH 002/143] add types to ui --- apps/ui-playground/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/ui-playground/package.json b/apps/ui-playground/package.json index 79f7abbe38155b..2ea3dbc6c57b6d 100644 --- a/apps/ui-playground/package.json +++ b/apps/ui-playground/package.json @@ -17,6 +17,7 @@ "react-dom": "^18.0.0" }, "devDependencies": { + "@calcom/types": "*", "@eslint/eslintrc": "^3", "@types/node": "^20", "@types/react": "^18", From 8c0959529fe062a0a74c958b98616d66dbcf2167 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Wed, 29 Jan 2025 21:25:27 +0100 Subject: [PATCH 003/143] push avatar ignore ts and eslint errors --- apps/ui-playground/next.config.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/ui-playground/next.config.ts b/apps/ui-playground/next.config.ts index e9ffa3083ad279..5ca340c47656a8 100644 --- a/apps/ui-playground/next.config.ts +++ b/apps/ui-playground/next.config.ts @@ -2,6 +2,12 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ + eslint: { + ignoreDuringBuilds: true, + }, + typescript: { + ignoreBuildErrors: true, + }, }; export default nextConfig; From ccf13c5ce9de0957b48cf7393050fe1492bcbe91 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Thu, 30 Jan 2025 07:59:31 +0000 Subject: [PATCH 004/143] feat: V3 UI avatar (#18997) * avatar playground * add overflow-hidden back for loading indicator * update lock --- .../app/_components/AvatarDemo.tsx | 94 + apps/ui-playground/app/page.tsx | 8 +- .../workflows/components/WorkflowListPage.tsx | 2 +- packages/ui/components/avatar/Avatar.tsx | 6 +- yarn.lock | 2268 ++++++++++++++++- 5 files changed, 2358 insertions(+), 20 deletions(-) create mode 100644 apps/ui-playground/app/_components/AvatarDemo.tsx diff --git a/apps/ui-playground/app/_components/AvatarDemo.tsx b/apps/ui-playground/app/_components/AvatarDemo.tsx new file mode 100644 index 00000000000000..d52409a9c7cc02 --- /dev/null +++ b/apps/ui-playground/app/_components/AvatarDemo.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { useState } from "react"; + +import { Avatar } from "@calcom/ui"; + +export default function AvatarDemo() { + const [isOpen, setIsOpen] = useState(true); + const sizes = ["xs", "xsm", "sm", "md", "mdLg", "lg", "xl"] as const; + const sampleImage = "https://app.cal.com/api/avatar/e9f012f2-8516-4012-b967-6fe1844a7b40.png"; + + return ( +
+ + + {isOpen && ( +
+ {/* Size variations */} +
+

Size Variations

+
+ {sizes.map((size) => ( +
+ + {size} +
+ ))} +
+
+ + {/* With and without image */} +
+

With/Without Image

+
+
+ + With Image +
+
+ + Without Image +
+
+
+ + {/* With tooltip */} +
+

With Tooltip

+
+
+ + Hover to see tooltip +
+
+
+ + {/* With link */} +
+

With Link

+
+
+ + Clickable +
+
+
+ + {/* With indicator */} +
+

With Indicator

+
+
+ + } + /> + With Status Indicator +
+
+
+
+ )} +
+ ); +} diff --git a/apps/ui-playground/app/page.tsx b/apps/ui-playground/app/page.tsx index 18bb6f0c614c3c..f65e1d38e0c703 100644 --- a/apps/ui-playground/app/page.tsx +++ b/apps/ui-playground/app/page.tsx @@ -1,5 +1,9 @@ -// import AvatarDemo from "./_components/AvatarDemo"; +import AvatarDemo from "./_components/AvatarDemo"; export default function Home() { - return
{/* */}
; + return ( +
+ +
+ ); } diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx index d21e49c441f3ba..5ca5c1bf3e1b03 100644 --- a/packages/features/ee/workflows/components/WorkflowListPage.tsx +++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx @@ -239,7 +239,7 @@ export default function WorkflowListPage({ workflows }: Props) { workflow?.team.logo, workflow.team?.name as string )} - size="xxs" + size="xs" className="mt-[3px] inline-flex justify-center" />
{workflow.team.name}
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx index 07ee3808fd8a58..4c0fb41f8c20f4 100644 --- a/packages/ui/components/avatar/Avatar.tsx +++ b/packages/ui/components/avatar/Avatar.tsx @@ -11,7 +11,7 @@ type Maybe = T | null | undefined; export type AvatarProps = { className?: string; - size?: "xxs" | "xs" | "xsm" | "sm" | "md" | "mdLg" | "lg" | "xl"; + size?: "xs" | "xsm" | "sm" | "md" | "mdLg" | "lg" | "xl"; imageSrc?: Maybe; title?: string; alt: string; @@ -24,11 +24,11 @@ export type AvatarProps = { }; const sizesPropsBySize = { - xxs: "w-3.5 h-3.5 min-w-3.5 min-h-3.5", // 14px xs: "w-4 h-4 min-w-4 min-h-4 max-h-4", // 16px xsm: "w-5 h-5 min-w-5 min-h-5", // 20px sm: "w-6 h-6 min-w-6 min-h-6", // 24px md: "w-8 h-8 min-w-8 min-h-8", // 32px + // We're missing a few steps inbetween will clean up this scale when we start doing V3 pages mdLg: "w-10 h-10 min-w-10 min-h-10", //40px lg: "w-16 h-16 min-w-16 min-h-16", // 64px xl: "w-24 h-24 min-w-24 min-h-24", // 96px @@ -41,7 +41,7 @@ export function Avatar(props: AvatarProps) { =8.0.0 + checksum: a7ffc838eb6a9ef594cda348458ccf38f34439ac77dc090fa1c120024bcd4eb911dfd74d5ef44d42063e7949fa7c5123ce714a015c4abb917d4124be1bd32bfe + languageName: node + linkType: hard + +"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1": + version: 4.12.1 + resolution: "@eslint-community/regexpp@npm:4.12.1" + checksum: 0d628680e204bc316d545b4993d3658427ca404ae646ce541fcc65306b8c712c340e5e573e30fb9f85f4855c0c5f6dca9868931f2fcced06417fbe1a0c6cd2d6 + languageName: node + linkType: hard + +"@eslint/config-array@npm:^0.19.0": + version: 0.19.1 + resolution: "@eslint/config-array@npm:0.19.1" + dependencies: + "@eslint/object-schema": ^2.1.5 + debug: ^4.3.1 + minimatch: ^3.1.2 + checksum: 421aad712a5ef1a3d118b5e0857f79c080f9dd619a76ce19d20105d381521583786f7abb1195744af9e62a5124e6657066eb6780e920f4001846bd91c1a665f0 + languageName: node + linkType: hard + +"@eslint/core@npm:^0.10.0": + version: 0.10.0 + resolution: "@eslint/core@npm:0.10.0" + dependencies: + "@types/json-schema": ^7.0.15 + checksum: 851fa099b3fef00e7ff8ece14523aff0822d3e1b47b047ab0a0d898e80c1362a22aa8b7778727231c383246932ecb63de79b4448ec1e500901c578580b087573 + languageName: node + linkType: hard + "@eslint/eslintrc@npm:^1.4.1": version: 1.4.1 resolution: "@eslint/eslintrc@npm:1.4.1" @@ -6278,6 +6325,47 @@ __metadata: languageName: node linkType: hard +"@eslint/eslintrc@npm:^3, @eslint/eslintrc@npm:^3.2.0": + version: 3.2.0 + resolution: "@eslint/eslintrc@npm:3.2.0" + dependencies: + ajv: ^6.12.4 + debug: ^4.3.2 + espree: ^10.0.1 + globals: ^14.0.0 + ignore: ^5.2.0 + import-fresh: ^3.2.1 + js-yaml: ^4.1.0 + minimatch: ^3.1.2 + strip-json-comments: ^3.1.1 + checksum: c898e4d12f4c9a79a61ee3c91e38eea5627a04e021cb749191e8537445858bfe32f810eca0cb2dc9902b8ad8b65ca07ef7221dc4bad52afe60cbbf50ec56c236 + languageName: node + linkType: hard + +"@eslint/js@npm:9.19.0": + version: 9.19.0 + resolution: "@eslint/js@npm:9.19.0" + checksum: bf4077b390894408408c8b5ca48c2cdaf91bce94e0a3b7ff4e79a2cb2d3ecc76d87b52b30af812285acf550e7a849138d2aad2cab0b0b5c0c9f7944fd45ba31f + languageName: node + linkType: hard + +"@eslint/object-schema@npm:^2.1.5": + version: 2.1.5 + resolution: "@eslint/object-schema@npm:2.1.5" + checksum: 5facffc832bae93c510f4d38f0f1cbfebd3d7ec772ece6b801bd09bf2dce52e781f4dea500aa133d02257e04ed6a3958fa18cbaed1f9623974a804ee60a8ca54 + languageName: node + linkType: hard + +"@eslint/plugin-kit@npm:^0.2.5": + version: 0.2.5 + resolution: "@eslint/plugin-kit@npm:0.2.5" + dependencies: + "@eslint/core": ^0.10.0 + levn: ^0.4.1 + checksum: 423db33e67ff16f6db71bf8bfc8d5b0c2c4fe6f2209131e5886a573bf994bfc72ab4f825068d6521f186247731d4c9d48eb42a5e5ce389c6faa275752c0e9459 + languageName: node + linkType: hard + "@ewsjs/ntlm-client@npm:^3.0.1": version: 3.0.1 resolution: "@ewsjs/ntlm-client@npm:3.0.1" @@ -6680,6 +6768,23 @@ __metadata: languageName: node linkType: hard +"@humanfs/core@npm:^0.19.1": + version: 0.19.1 + resolution: "@humanfs/core@npm:0.19.1" + checksum: 611e0545146f55ddfdd5c20239cfb7911f9d0e28258787c4fc1a1f6214250830c9367aaaeace0096ed90b6739bee1e9c52ad5ba8adaf74ab8b449119303babfe + languageName: node + linkType: hard + +"@humanfs/node@npm:^0.16.6": + version: 0.16.6 + resolution: "@humanfs/node@npm:0.16.6" + dependencies: + "@humanfs/core": ^0.19.1 + "@humanwhocodes/retry": ^0.3.0 + checksum: f9cb52bb235f8b9c6fcff43a7e500669a38f8d6ce26593404a9b56365a1644e0ed60c720dc65ff6a696b1f85f3563ab055bb554ec8674f2559085ba840e47710 + languageName: node + linkType: hard + "@humanwhocodes/config-array@npm:^0.11.8": version: 0.11.8 resolution: "@humanwhocodes/config-array@npm:0.11.8" @@ -6705,6 +6810,20 @@ __metadata: languageName: node linkType: hard +"@humanwhocodes/retry@npm:^0.3.0": + version: 0.3.1 + resolution: "@humanwhocodes/retry@npm:0.3.1" + checksum: 7e5517bb51dbea3e02ab6cacef59a8f4b0ca023fc4b0b8cbc40de0ad29f46edd50b897c6e7fba79366a0217e3f48e2da8975056f6c35cfe19d9cc48f1d03c1dd + languageName: node + linkType: hard + +"@humanwhocodes/retry@npm:^0.4.1": + version: 0.4.1 + resolution: "@humanwhocodes/retry@npm:0.4.1" + checksum: f11167c28e8266faba470fd273cbaafe2827523492bc18c5623015adb7ed66f46b2e542e3d756fed9ca614300249267814220c2f5f03a59e07fdfa64fc14ad52 + languageName: node + linkType: hard + "@iarna/toml@npm:2.2.5": version: 2.2.5 resolution: "@iarna/toml@npm:2.2.5" @@ -6712,6 +6831,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-darwin-arm64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-darwin-arm64": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-darwin-x64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-darwin-x64": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.5": + version: 1.0.5 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-arm64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-arm64": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-arm@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-arm": 1.0.5 + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-s390x@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-s390x": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-x64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-x64": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": 1.0.4 + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-wasm32@npm:0.33.5" + dependencies: + "@emnapi/runtime": ^1.2.0 + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-win32-ia32@npm:0.33.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-win32-x64@npm:0.33.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@ioredis/commands@npm:^1.1.1": version: 1.2.0 resolution: "@ioredis/commands@npm:1.2.0" @@ -8438,6 +8732,13 @@ __metadata: languageName: node linkType: hard +"@next/env@npm:15.1.6": + version: 15.1.6 + resolution: "@next/env@npm:15.1.6" + checksum: 53c34de78f1fdd9dfafe50e5d435ff62b5176cfcf94b990c70337d99d4c36b4a9944892586396be34fa0d0fefdef97963764b88c78ff2988fbcc2ee1ab46ada0 + languageName: node + linkType: hard + "@next/eslint-plugin-next@npm:13.2.1": version: 13.2.1 resolution: "@next/eslint-plugin-next@npm:13.2.1" @@ -8456,6 +8757,15 @@ __metadata: languageName: node linkType: hard +"@next/eslint-plugin-next@npm:15.1.6": + version: 15.1.6 + resolution: "@next/eslint-plugin-next@npm:15.1.6" + dependencies: + fast-glob: 3.3.1 + checksum: e519faaab2bef3995d369d9e84043e1c1d806085077b7107f5c7e5c923f9c4ee0c530277ef1bb1239b8ed34caa43d8b2b29182dacd786729f00e4627c84021df + languageName: node + linkType: hard + "@next/swc-darwin-arm64@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-darwin-arm64@npm:13.5.7" @@ -8470,6 +8780,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-darwin-arm64@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-darwin-arm64@npm:15.1.6" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@next/swc-darwin-x64@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-darwin-x64@npm:13.5.7" @@ -8484,6 +8801,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-darwin-x64@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-darwin-x64@npm:15.1.6" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@next/swc-linux-arm64-gnu@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-linux-arm64-gnu@npm:13.5.7" @@ -8498,6 +8822,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-linux-arm64-gnu@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-linux-arm64-gnu@npm:15.1.6" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@next/swc-linux-arm64-musl@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-linux-arm64-musl@npm:13.5.7" @@ -8512,6 +8843,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-linux-arm64-musl@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-linux-arm64-musl@npm:15.1.6" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@next/swc-linux-x64-gnu@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-linux-x64-gnu@npm:13.5.7" @@ -8526,6 +8864,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-linux-x64-gnu@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-linux-x64-gnu@npm:15.1.6" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@next/swc-linux-x64-musl@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-linux-x64-musl@npm:13.5.7" @@ -8540,6 +8885,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-linux-x64-musl@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-linux-x64-musl@npm:15.1.6" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@next/swc-win32-arm64-msvc@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-win32-arm64-msvc@npm:13.5.7" @@ -8554,6 +8906,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-win32-arm64-msvc@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-win32-arm64-msvc@npm:15.1.6" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@next/swc-win32-ia32-msvc@npm:13.5.7": version: 13.5.7 resolution: "@next/swc-win32-ia32-msvc@npm:13.5.7" @@ -8582,6 +8941,13 @@ __metadata: languageName: node linkType: hard +"@next/swc-win32-x64-msvc@npm:15.1.6": + version: 15.1.6 + resolution: "@next/swc-win32-x64-msvc@npm:15.1.6" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@next/third-parties@npm:^14.2.5": version: 14.2.5 resolution: "@next/third-parties@npm:14.2.5" @@ -12844,6 +13210,13 @@ __metadata: languageName: node linkType: hard +"@rtsao/scc@npm:^1.1.0": + version: 1.1.0 + resolution: "@rtsao/scc@npm:1.1.0" + checksum: 17d04adf404e04c1e61391ed97bca5117d4c2767a76ae3e879390d6dec7b317fcae68afbf9e98badee075d0b64fa60f287729c4942021b4d19cd01db77385c01 + languageName: node + linkType: hard + "@rushstack/eslint-patch@npm:^1.1.3": version: 1.1.3 resolution: "@rushstack/eslint-patch@npm:1.1.3" @@ -12851,6 +13224,13 @@ __metadata: languageName: node linkType: hard +"@rushstack/eslint-patch@npm:^1.10.3": + version: 1.10.5 + resolution: "@rushstack/eslint-patch@npm:1.10.5" + checksum: c7df90efeb77e4311f70549c1b0c41455e3a4f0c0cf2696e560d9a535f129d63ab84c98d0a3de95ed2d369d5281b541af819f99002bfd38e185e59c355b58d69 + languageName: node + linkType: hard + "@rushstack/eslint-patch@npm:^1.3.3": version: 1.7.2 resolution: "@rushstack/eslint-patch@npm:1.7.2" @@ -15207,6 +15587,13 @@ __metadata: languageName: node linkType: hard +"@swc/counter@npm:0.1.3, @swc/counter@npm:^0.1.3": + version: 0.1.3 + resolution: "@swc/counter@npm:0.1.3" + checksum: df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598 + languageName: node + linkType: hard + "@swc/counter@npm:^0.1.1": version: 0.1.2 resolution: "@swc/counter@npm:0.1.2" @@ -15214,10 +15601,12 @@ __metadata: languageName: node linkType: hard -"@swc/counter@npm:^0.1.3": - version: 0.1.3 - resolution: "@swc/counter@npm:0.1.3" - checksum: df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598 +"@swc/helpers@npm:0.5.15": + version: 0.5.15 + resolution: "@swc/helpers@npm:0.5.15" + dependencies: + tslib: ^2.8.0 + checksum: 1a9e0dbb792b2d1e0c914d69c201dbc96af3a0e6e6e8cf5a7f7d6a5d7b0e8b762915cd4447acb6b040e2ecc1ed49822875a7239f99a2d63c96c3c3407fb6fccf languageName: node linkType: hard @@ -16041,6 +16430,13 @@ __metadata: languageName: node linkType: hard +"@types/estree@npm:^1.0.6": + version: 1.0.6 + resolution: "@types/estree@npm:1.0.6" + checksum: 8825d6e729e16445d9a1dd2fb1db2edc5ed400799064cd4d028150701031af012ba30d6d03fe9df40f4d7a437d0de6d2b256020152b7b09bde9f2e420afdffd9 + languageName: node + linkType: hard + "@types/express-jwt@npm:0.0.42": version: 0.0.42 resolution: "@types/express-jwt@npm:0.0.42" @@ -16289,6 +16685,13 @@ __metadata: languageName: node linkType: hard +"@types/json-schema@npm:^7.0.15": + version: 7.0.15 + resolution: "@types/json-schema@npm:7.0.15" + checksum: 97ed0cb44d4070aecea772b7b2e2ed971e10c81ec87dd4ecc160322ffa55ff330dace1793489540e3e318d90942064bb697cc0f8989391797792d919737b3b98 + languageName: node + linkType: hard + "@types/json5@npm:^0.0.29": version: 0.0.29 resolution: "@types/json5@npm:0.0.29" @@ -17046,6 +17449,27 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": + version: 8.22.0 + resolution: "@typescript-eslint/eslint-plugin@npm:8.22.0" + dependencies: + "@eslint-community/regexpp": ^4.10.0 + "@typescript-eslint/scope-manager": 8.22.0 + "@typescript-eslint/type-utils": 8.22.0 + "@typescript-eslint/utils": 8.22.0 + "@typescript-eslint/visitor-keys": 8.22.0 + graphemer: ^1.4.0 + ignore: ^5.3.1 + natural-compare: ^1.4.0 + ts-api-utils: ^2.0.0 + peerDependencies: + "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0 + eslint: ^8.57.0 || ^9.0.0 + typescript: ">=4.8.4 <5.8.0" + checksum: f5e2fdea362c4478db3928f2d1913d29f0dc07c9795cc38ea31970512679eedae0f7e27db82d00f422077da4d4493b3d6fe45554f00984b91b28adf96f6b6548 + languageName: node + linkType: hard + "@typescript-eslint/eslint-plugin@npm:^5.52.0": version: 5.52.0 resolution: "@typescript-eslint/eslint-plugin@npm:5.52.0" @@ -17088,6 +17512,22 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": + version: 8.22.0 + resolution: "@typescript-eslint/parser@npm:8.22.0" + dependencies: + "@typescript-eslint/scope-manager": 8.22.0 + "@typescript-eslint/types": 8.22.0 + "@typescript-eslint/typescript-estree": 8.22.0 + "@typescript-eslint/visitor-keys": 8.22.0 + debug: ^4.3.4 + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: ">=4.8.4 <5.8.0" + checksum: 1c5923d76e175ebf30d0d546063ad7f7117ad4d58053f10b6bddccde791d58ea390a6dc80720527d6e7ba2ec64271990372a589b67a50f3c5cdc1c4828f9759b + languageName: node + linkType: hard + "@typescript-eslint/parser@npm:^5.42.0": version: 5.48.0 resolution: "@typescript-eslint/parser@npm:5.48.0" @@ -17152,6 +17592,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/scope-manager@npm:8.22.0": + version: 8.22.0 + resolution: "@typescript-eslint/scope-manager@npm:8.22.0" + dependencies: + "@typescript-eslint/types": 8.22.0 + "@typescript-eslint/visitor-keys": 8.22.0 + checksum: 0aa51fbf3a226b8392fa87f554514bf710c85635754dfeda7375c807ac098aa61a748f1a35c00f6c1ba20e2bdf8568c5a863511b3961a08fb2351d0d2efbdb9c + languageName: node + linkType: hard + "@typescript-eslint/type-utils@npm:5.52.0": version: 5.52.0 resolution: "@typescript-eslint/type-utils@npm:5.52.0" @@ -17169,6 +17619,21 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/type-utils@npm:8.22.0": + version: 8.22.0 + resolution: "@typescript-eslint/type-utils@npm:8.22.0" + dependencies: + "@typescript-eslint/typescript-estree": 8.22.0 + "@typescript-eslint/utils": 8.22.0 + debug: ^4.3.4 + ts-api-utils: ^2.0.0 + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: ">=4.8.4 <5.8.0" + checksum: 1edc3bffc2f6abd723406ac8e0a36b0f8b1a3cb5b07a798733939807d89a3af25a06093de50a184e38d74fa59b9ffaa72ec45f93ce26003833da5c0984c4ced6 + languageName: node + linkType: hard + "@typescript-eslint/types@npm:5.48.0": version: 5.48.0 resolution: "@typescript-eslint/types@npm:5.48.0" @@ -17197,6 +17662,13 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/types@npm:8.22.0": + version: 8.22.0 + resolution: "@typescript-eslint/types@npm:8.22.0" + checksum: 37fae8f21fe15a18f4d825df919e779f38facb59699a675265f7f7392181558473223e32040b89221672da65c6323de6acce09774ae1f4211d27123a435124e1 + languageName: node + linkType: hard + "@typescript-eslint/typescript-estree@npm:5.48.0": version: 5.48.0 resolution: "@typescript-eslint/typescript-estree@npm:5.48.0" @@ -17270,6 +17742,24 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/typescript-estree@npm:8.22.0": + version: 8.22.0 + resolution: "@typescript-eslint/typescript-estree@npm:8.22.0" + dependencies: + "@typescript-eslint/types": 8.22.0 + "@typescript-eslint/visitor-keys": 8.22.0 + debug: ^4.3.4 + fast-glob: ^3.3.2 + is-glob: ^4.0.3 + minimatch: ^9.0.4 + semver: ^7.6.0 + ts-api-utils: ^2.0.0 + peerDependencies: + typescript: ">=4.8.4 <5.8.0" + checksum: e7fd70486931ab02c418d30960d789a806e258cf3d0a06f7a74e65405356c89026cd00f97a657ba250e06eeec82216ce3f2091cd98c20a22b9521af78050deb8 + languageName: node + linkType: hard + "@typescript-eslint/utils@npm:5.52.0, @typescript-eslint/utils@npm:^5.52.0": version: 5.52.0 resolution: "@typescript-eslint/utils@npm:5.52.0" @@ -17288,6 +17778,21 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/utils@npm:8.22.0": + version: 8.22.0 + resolution: "@typescript-eslint/utils@npm:8.22.0" + dependencies: + "@eslint-community/eslint-utils": ^4.4.0 + "@typescript-eslint/scope-manager": 8.22.0 + "@typescript-eslint/types": 8.22.0 + "@typescript-eslint/typescript-estree": 8.22.0 + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: ">=4.8.4 <5.8.0" + checksum: 976cd0e2ac6cb6799fc1935d9c115e3144340fadc544d1a7ebec69b684d5f48c0e3a6721b82a76ff420899019c0ba3e38d8611d1da59c8e1379a86f0fb8580fc + languageName: node + linkType: hard + "@typescript-eslint/visitor-keys@npm:5.48.0": version: 5.48.0 resolution: "@typescript-eslint/visitor-keys@npm:5.48.0" @@ -17328,6 +17833,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/visitor-keys@npm:8.22.0": + version: 8.22.0 + resolution: "@typescript-eslint/visitor-keys@npm:8.22.0" + dependencies: + "@typescript-eslint/types": 8.22.0 + eslint-visitor-keys: ^4.2.0 + checksum: df205177bcd30fb7320698724d42936f1063c1fc5c5ddc2c4091175dcca351d70fe7d5d5703ff73a1849e9974c3387b2cfefb372c2355e53b66f6d9848b97a2c + languageName: node + linkType: hard + "@unkey/api@npm:^0.19.4": version: 0.19.4 resolution: "@unkey/api@npm:0.19.4" @@ -18133,6 +18648,15 @@ __metadata: languageName: node linkType: hard +"acorn@npm:^8.14.0": + version: 8.14.0 + resolution: "acorn@npm:8.14.0" + bin: + acorn: bin/acorn + checksum: 8755074ba55fff94e84e81c72f1013c2d9c78e973c31231c8ae505a5f966859baf654bddd75046bffd73ce816b149298977fff5077a3033dedba0ae2aad152d4 + languageName: node + linkType: hard + "acorn@npm:^8.5.0": version: 8.7.1 resolution: "acorn@npm:8.7.1" @@ -18620,6 +19144,13 @@ __metadata: languageName: node linkType: hard +"aria-query@npm:^5.3.2": + version: 5.3.2 + resolution: "aria-query@npm:5.3.2" + checksum: d971175c85c10df0f6d14adfe6f1292409196114ab3c62f238e208b53103686f46cc70695a4f775b73bc65f6a09b6a092fd963c4f3a5a7d690c8fc5094925717 + languageName: node + linkType: hard + "arr-rotate@npm:^1.0.0": version: 1.0.0 resolution: "arr-rotate@npm:1.0.0" @@ -18647,6 +19178,16 @@ __metadata: languageName: node linkType: hard +"array-buffer-byte-length@npm:^1.0.2": + version: 1.0.2 + resolution: "array-buffer-byte-length@npm:1.0.2" + dependencies: + call-bound: ^1.0.3 + is-array-buffer: ^3.0.5 + checksum: 0ae3786195c3211b423e5be8dd93357870e6fb66357d81da968c2c39ef43583ef6eece1f9cb1caccdae4806739c65dea832b44b8593414313cd76a89795fca63 + languageName: node + linkType: hard + "array-flatten@npm:1.1.1": version: 1.1.1 resolution: "array-flatten@npm:1.1.1" @@ -18706,6 +19247,20 @@ __metadata: languageName: node linkType: hard +"array-includes@npm:^3.1.8": + version: 3.1.8 + resolution: "array-includes@npm:3.1.8" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.2 + es-object-atoms: ^1.0.0 + get-intrinsic: ^1.2.4 + is-string: ^1.0.7 + checksum: eb39ba5530f64e4d8acab39297c11c1c5be2a4ea188ab2b34aba5fb7224d918f77717a9d57a3e2900caaa8440e59431bdaf5c974d5212ef65d97f132e38e2d91 + languageName: node + linkType: hard + "array-timsort@npm:^1.0.3": version: 1.0.3 resolution: "array-timsort@npm:1.0.3" @@ -18746,6 +19301,20 @@ __metadata: languageName: node linkType: hard +"array.prototype.findlast@npm:^1.2.5": + version: 1.2.5 + resolution: "array.prototype.findlast@npm:1.2.5" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.2 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + es-shim-unscopables: ^1.0.2 + checksum: 83ce4ad95bae07f136d316f5a7c3a5b911ac3296c3476abe60225bc4a17938bf37541972fcc37dd5adbc99cbb9c928c70bbbfc1c1ce549d41a415144030bb446 + languageName: node + linkType: hard + "array.prototype.findlastindex@npm:^1.2.3": version: 1.2.4 resolution: "array.prototype.findlastindex@npm:1.2.4" @@ -18759,6 +19328,20 @@ __metadata: languageName: node linkType: hard +"array.prototype.findlastindex@npm:^1.2.5": + version: 1.2.5 + resolution: "array.prototype.findlastindex@npm:1.2.5" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.2 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + es-shim-unscopables: ^1.0.2 + checksum: 2c81cff2a75deb95bf1ed89b6f5f2bfbfb882211e3b7cc59c3d6b87df774cd9d6b36949a8ae39ac476e092c1d4a4905f5ee11a86a456abb10f35f8211ae4e710 + languageName: node + linkType: hard + "array.prototype.flat@npm:^1.2.3": version: 1.3.1 resolution: "array.prototype.flat@npm:1.3.1" @@ -18830,6 +19413,18 @@ __metadata: languageName: node linkType: hard +"array.prototype.flatmap@npm:^1.3.3": + version: 1.3.3 + resolution: "array.prototype.flatmap@npm:1.3.3" + dependencies: + call-bind: ^1.0.8 + define-properties: ^1.2.1 + es-abstract: ^1.23.5 + es-shim-unscopables: ^1.0.2 + checksum: 11b4de09b1cf008be6031bb507d997ad6f1892e57dc9153583de6ebca0f74ea403fffe0f203461d359de05048d609f3f480d9b46fed4099652d8b62cc972f284 + languageName: node + linkType: hard + "array.prototype.map@npm:^1.0.5": version: 1.0.7 resolution: "array.prototype.map@npm:1.0.7" @@ -18882,6 +19477,19 @@ __metadata: languageName: node linkType: hard +"array.prototype.tosorted@npm:^1.1.4": + version: 1.1.4 + resolution: "array.prototype.tosorted@npm:1.1.4" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.3 + es-errors: ^1.3.0 + es-shim-unscopables: ^1.0.2 + checksum: e4142d6f556bcbb4f393c02e7dbaea9af8f620c040450c2be137c9cbbd1a17f216b9c688c5f2c08fbb038ab83f55993fa6efdd9a05881d84693c7bcb5422127a + languageName: node + linkType: hard + "arraybuffer.prototype.slice@npm:^1.0.2": version: 1.0.2 resolution: "arraybuffer.prototype.slice@npm:1.0.2" @@ -18913,6 +19521,21 @@ __metadata: languageName: node linkType: hard +"arraybuffer.prototype.slice@npm:^1.0.4": + version: 1.0.4 + resolution: "arraybuffer.prototype.slice@npm:1.0.4" + dependencies: + array-buffer-byte-length: ^1.0.1 + call-bind: ^1.0.8 + define-properties: ^1.2.1 + es-abstract: ^1.23.5 + es-errors: ^1.3.0 + get-intrinsic: ^1.2.6 + is-array-buffer: ^3.0.4 + checksum: b1d1fd20be4e972a3779b1569226f6740170dca10f07aa4421d42cefeec61391e79c557cda8e771f5baefe47d878178cd4438f60916ce831813c08132bced765 + languageName: node + linkType: hard + "arrify@npm:^1.0.1": version: 1.0.1 resolution: "arrify@npm:1.0.1" @@ -19205,6 +19828,13 @@ __metadata: languageName: node linkType: hard +"axe-core@npm:^4.10.0": + version: 4.10.2 + resolution: "axe-core@npm:4.10.2" + checksum: 2b9b1c93ea73ea9f206604e4e17bd771d2d835f077bde54517d73028b8865c69b209460e73d5b109968cbdb39ab3d28943efa5695189bd79e16421ce1706719e + languageName: node + linkType: hard + "axe-core@npm:^4.3.5": version: 4.4.1 resolution: "axe-core@npm:4.4.1" @@ -19320,6 +19950,13 @@ __metadata: languageName: node linkType: hard +"axobject-query@npm:^4.1.0": + version: 4.1.0 + resolution: "axobject-query@npm:4.1.0" + checksum: 7d1e87bf0aa7ae7a76cd39ab627b7c48fda3dc40181303d9adce4ba1d5b5ce73b5e5403ee6626ec8e91090448c887294d6144e24b6741a976f5be9347e3ae1df + languageName: node + linkType: hard + "b4a@npm:^1.6.4": version: 1.6.4 resolution: "b4a@npm:1.6.4" @@ -19810,6 +20447,15 @@ __metadata: languageName: node linkType: hard +"braces@npm:^3.0.3": + version: 3.0.3 + resolution: "braces@npm:3.0.3" + dependencies: + fill-range: ^7.1.1 + checksum: b95aa0b3bd909f6cd1720ffcf031aeaf46154dd88b4da01f9a1d3f7ea866a79eba76a6d01cbc3c422b2ee5cdc39a4f02491058d5df0d7bf6e6a162a832df1f69 + languageName: node + linkType: hard + "breakword@npm:^1.0.5": version: 1.0.5 resolution: "breakword@npm:1.0.5" @@ -20309,6 +20955,16 @@ __metadata: languageName: unknown linkType: soft +"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1": + version: 1.0.1 + resolution: "call-bind-apply-helpers@npm:1.0.1" + dependencies: + es-errors: ^1.3.0 + function-bind: ^1.1.2 + checksum: 3c55343261bb387c58a4762d15ad9d42053659a62681ec5eb50690c6b52a4a666302a01d557133ce6533e8bd04530ee3b209f23dd06c9577a1925556f8fcccdf + languageName: node + linkType: hard + "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2": version: 1.0.2 resolution: "call-bind@npm:1.0.2" @@ -20343,6 +20999,28 @@ __metadata: languageName: node linkType: hard +"call-bind@npm:^1.0.8": + version: 1.0.8 + resolution: "call-bind@npm:1.0.8" + dependencies: + call-bind-apply-helpers: ^1.0.0 + es-define-property: ^1.0.0 + get-intrinsic: ^1.2.4 + set-function-length: ^1.2.2 + checksum: aa2899bce917a5392fd73bd32e71799c37c0b7ab454e0ed13af7f6727549091182aade8bbb7b55f304a5bc436d543241c14090fb8a3137e9875e23f444f4f5a9 + languageName: node + linkType: hard + +"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3": + version: 1.0.3 + resolution: "call-bound@npm:1.0.3" + dependencies: + call-bind-apply-helpers: ^1.0.1 + get-intrinsic: ^1.2.6 + checksum: a93bbe0f2d0a2d6c144a4349ccd0593d5d0d5d9309b69101710644af8964286420062f2cc3114dca120b9bc8cc07507952d4b1b3ea7672e0d7f6f1675efedb32 + languageName: node + linkType: hard + "call-me-maybe@npm:^1.0.1": version: 1.0.1 resolution: "call-me-maybe@npm:1.0.1" @@ -20451,6 +21129,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001579": + version: 1.0.30001696 + resolution: "caniuse-lite@npm:1.0.30001696" + checksum: 079be180f364b63fb85415fa3948d1e9646aa655f8678a827e9b533712e14d727c2983397603ce7107b995226f6590d96bf26ef2032e756ef6ee09898feee5f9 + languageName: node + linkType: hard + "caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001591": version: 1.0.30001597 resolution: "caniuse-lite@npm:1.0.30001597" @@ -22056,6 +22741,17 @@ __metadata: languageName: node linkType: hard +"cross-spawn@npm:^7.0.6": + version: 7.0.6 + resolution: "cross-spawn@npm:7.0.6" + dependencies: + path-key: ^3.1.0 + shebang-command: ^2.0.0 + which: ^2.0.1 + checksum: 8d306efacaf6f3f60e0224c287664093fa9185680b2d195852ba9a863f85d02dcc737094c6e512175f8ee0161f9b87c73c6826034c2422e39de7d6569cf4503b + languageName: node + linkType: hard + "crypt@npm:0.0.2": version: 0.0.2 resolution: "crypt@npm:0.0.2" @@ -22506,6 +23202,17 @@ __metadata: languageName: node linkType: hard +"data-view-buffer@npm:^1.0.2": + version: 1.0.2 + resolution: "data-view-buffer@npm:1.0.2" + dependencies: + call-bound: ^1.0.3 + es-errors: ^1.3.0 + is-data-view: ^1.0.2 + checksum: 1e1cd509c3037ac0f8ba320da3d1f8bf1a9f09b0be09394b5e40781b8cc15ff9834967ba7c9f843a425b34f9fe14ce44cf055af6662c44263424c1eb8d65659b + languageName: node + linkType: hard + "data-view-byte-length@npm:^1.0.0, data-view-byte-length@npm:^1.0.1": version: 1.0.1 resolution: "data-view-byte-length@npm:1.0.1" @@ -22517,6 +23224,17 @@ __metadata: languageName: node linkType: hard +"data-view-byte-length@npm:^1.0.2": + version: 1.0.2 + resolution: "data-view-byte-length@npm:1.0.2" + dependencies: + call-bound: ^1.0.3 + es-errors: ^1.3.0 + is-data-view: ^1.0.2 + checksum: 3600c91ced1cfa935f19ef2abae11029e01738de8d229354d3b2a172bf0d7e4ed08ff8f53294b715569fdf72dfeaa96aa7652f479c0f60570878d88e7e8bddf6 + languageName: node + linkType: hard + "data-view-byte-offset@npm:^1.0.0": version: 1.0.0 resolution: "data-view-byte-offset@npm:1.0.0" @@ -22528,6 +23246,17 @@ __metadata: languageName: node linkType: hard +"data-view-byte-offset@npm:^1.0.1": + version: 1.0.1 + resolution: "data-view-byte-offset@npm:1.0.1" + dependencies: + call-bound: ^1.0.2 + es-errors: ^1.3.0 + is-data-view: ^1.0.1 + checksum: 8dd492cd51d19970876626b5b5169fbb67ca31ec1d1d3238ee6a71820ca8b80cafb141c485999db1ee1ef02f2cc3b99424c5eda8d59e852d9ebb79ab290eb5ee + languageName: node + linkType: hard + "date-fns@npm:^2.28.0": version: 2.29.3 resolution: "date-fns@npm:2.29.3" @@ -23000,7 +23729,7 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.1": +"detect-libc@npm:^2.0.1, detect-libc@npm:^2.0.3": version: 2.0.3 resolution: "detect-libc@npm:2.0.3" checksum: 2ba6a939ae55f189aea996ac67afceb650413c7a34726ee92c40fb0deb2400d57ef94631a8a3f052055eea7efb0f99a9b5e6ce923415daa3e68221f963cfc27d @@ -23424,6 +24153,17 @@ __metadata: languageName: node linkType: hard +"dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "dunder-proto@npm:1.0.1" + dependencies: + call-bind-apply-helpers: ^1.0.1 + es-errors: ^1.3.0 + gopd: ^1.2.0 + checksum: 149207e36f07bd4941921b0ca929e3a28f1da7bd6b6ff8ff7f4e2f2e460675af4576eeba359c635723dc189b64cdd4787e0255897d5b135ccc5d15cb8685fc90 + languageName: node + linkType: hard + "duplexer@npm:^0.1.1, duplexer@npm:^0.1.2, duplexer@npm:~0.1.1": version: 0.1.2 resolution: "duplexer@npm:0.1.2" @@ -23791,6 +24531,65 @@ __metadata: languageName: node linkType: hard +"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9": + version: 1.23.9 + resolution: "es-abstract@npm:1.23.9" + dependencies: + array-buffer-byte-length: ^1.0.2 + arraybuffer.prototype.slice: ^1.0.4 + available-typed-arrays: ^1.0.7 + call-bind: ^1.0.8 + call-bound: ^1.0.3 + data-view-buffer: ^1.0.2 + data-view-byte-length: ^1.0.2 + data-view-byte-offset: ^1.0.1 + es-define-property: ^1.0.1 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + es-set-tostringtag: ^2.1.0 + es-to-primitive: ^1.3.0 + function.prototype.name: ^1.1.8 + get-intrinsic: ^1.2.7 + get-proto: ^1.0.0 + get-symbol-description: ^1.1.0 + globalthis: ^1.0.4 + gopd: ^1.2.0 + has-property-descriptors: ^1.0.2 + has-proto: ^1.2.0 + has-symbols: ^1.1.0 + hasown: ^2.0.2 + internal-slot: ^1.1.0 + is-array-buffer: ^3.0.5 + is-callable: ^1.2.7 + is-data-view: ^1.0.2 + is-regex: ^1.2.1 + is-shared-array-buffer: ^1.0.4 + is-string: ^1.1.1 + is-typed-array: ^1.1.15 + is-weakref: ^1.1.0 + math-intrinsics: ^1.1.0 + object-inspect: ^1.13.3 + object-keys: ^1.1.1 + object.assign: ^4.1.7 + own-keys: ^1.0.1 + regexp.prototype.flags: ^1.5.3 + safe-array-concat: ^1.1.3 + safe-push-apply: ^1.0.0 + safe-regex-test: ^1.1.0 + set-proto: ^1.0.0 + string.prototype.trim: ^1.2.10 + string.prototype.trimend: ^1.0.9 + string.prototype.trimstart: ^1.0.8 + typed-array-buffer: ^1.0.3 + typed-array-byte-length: ^1.0.3 + typed-array-byte-offset: ^1.0.4 + typed-array-length: ^1.0.7 + unbox-primitive: ^1.1.0 + which-typed-array: ^1.1.18 + checksum: f3ee2614159ca197f97414ab36e3f406ee748ce2f97ffbf09e420726db5a442ce13f1e574601468bff6e6eb81588e6c9ce1ac6c03868a37c7cd48ac679f8485a + languageName: node + linkType: hard + "es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1": version: 1.19.2 resolution: "es-abstract@npm:1.19.2" @@ -24068,6 +24867,13 @@ __metadata: languageName: node linkType: hard +"es-define-property@npm:^1.0.1": + version: 1.0.1 + resolution: "es-define-property@npm:1.0.1" + checksum: 0512f4e5d564021c9e3a644437b0155af2679d10d80f21adaf868e64d30efdfbd321631956f20f42d655fedb2e3a027da479fad3fa6048f768eb453a80a5f80a + languageName: node + linkType: hard + "es-errors@npm:^1.0.0, es-errors@npm:^1.1.0, es-errors@npm:^1.2.1, es-errors@npm:^1.3.0": version: 1.3.0 resolution: "es-errors@npm:1.3.0" @@ -24115,6 +24921,30 @@ __metadata: languageName: node linkType: hard +"es-iterator-helpers@npm:^1.2.1": + version: 1.2.1 + resolution: "es-iterator-helpers@npm:1.2.1" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.3 + define-properties: ^1.2.1 + es-abstract: ^1.23.6 + es-errors: ^1.3.0 + es-set-tostringtag: ^2.0.3 + function-bind: ^1.1.2 + get-intrinsic: ^1.2.6 + globalthis: ^1.0.4 + gopd: ^1.2.0 + has-property-descriptors: ^1.0.2 + has-proto: ^1.2.0 + has-symbols: ^1.1.0 + internal-slot: ^1.1.0 + iterator.prototype: ^1.1.4 + safe-array-concat: ^1.1.3 + checksum: 952808dd1df3643d67ec7adf20c30b36e5eecadfbf36354e6f39ed3266c8e0acf3446ce9bc465e38723d613cb1d915c1c07c140df65bdce85da012a6e7bda62b + languageName: node + linkType: hard + "es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.4.1": version: 1.4.1 resolution: "es-module-lexer@npm:1.4.1" @@ -24160,6 +24990,18 @@ __metadata: languageName: node linkType: hard +"es-set-tostringtag@npm:^2.1.0": + version: 2.1.0 + resolution: "es-set-tostringtag@npm:2.1.0" + dependencies: + es-errors: ^1.3.0 + get-intrinsic: ^1.2.6 + has-tostringtag: ^1.0.2 + hasown: ^2.0.2 + checksum: 789f35de4be3dc8d11fdcb91bc26af4ae3e6d602caa93299a8c45cf05d36cc5081454ae2a6d3afa09cceca214b76c046e4f8151e092e6fc7feeb5efb9e794fc6 + languageName: node + linkType: hard + "es-shim-unscopables@npm:^1.0.0": version: 1.0.0 resolution: "es-shim-unscopables@npm:1.0.0" @@ -24189,6 +25031,17 @@ __metadata: languageName: node linkType: hard +"es-to-primitive@npm:^1.3.0": + version: 1.3.0 + resolution: "es-to-primitive@npm:1.3.0" + dependencies: + is-callable: ^1.2.7 + is-date-object: ^1.0.5 + is-symbol: ^1.0.4 + checksum: 966965880356486cd4d1fe9a523deda2084c81b3702d951212c098f5f2ee93605d1b7c1840062efb48a07d892641c7ed1bc194db563645c0dd2b919cb6d65b93 + languageName: node + linkType: hard + "es6-promise@npm:^4.2.4": version: 4.2.8 resolution: "es6-promise@npm:4.2.8" @@ -24538,6 +25391,30 @@ __metadata: languageName: node linkType: hard +"eslint-config-next@npm:15.1.6": + version: 15.1.6 + resolution: "eslint-config-next@npm:15.1.6" + dependencies: + "@next/eslint-plugin-next": 15.1.6 + "@rushstack/eslint-patch": ^1.10.3 + "@typescript-eslint/eslint-plugin": ^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0 + "@typescript-eslint/parser": ^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0 + eslint-import-resolver-node: ^0.3.6 + eslint-import-resolver-typescript: ^3.5.2 + eslint-plugin-import: ^2.31.0 + eslint-plugin-jsx-a11y: ^6.10.0 + eslint-plugin-react: ^7.37.0 + eslint-plugin-react-hooks: ^5.0.0 + peerDependencies: + eslint: ^7.23.0 || ^8.0.0 || ^9.0.0 + typescript: ">=3.3.1" + peerDependenciesMeta: + typescript: + optional: true + checksum: 6f3d3fa46c5a52b75ced00d332cce9224fb16c7a79a65402cfed23f0a9690729603fb10fadd9f7adaa261ebf9c25867c1f94f8375334c7f6cfac5d8d4c615ec0 + languageName: node + linkType: hard + "eslint-config-next@npm:^13.2.1": version: 13.2.1 resolution: "eslint-config-next@npm:13.2.1" @@ -24622,6 +25499,18 @@ __metadata: languageName: node linkType: hard +"eslint-module-utils@npm:^2.12.0": + version: 2.12.0 + resolution: "eslint-module-utils@npm:2.12.0" + dependencies: + debug: ^3.2.7 + peerDependenciesMeta: + eslint: + optional: true + checksum: be3ac52e0971c6f46daeb1a7e760e45c7c45f820c8cc211799f85f10f04ccbf7afc17039165d56cb2da7f7ca9cec2b3a777013cddf0b976784b37eb9efa24180 + languageName: node + linkType: hard + "eslint-module-utils@npm:^2.7.3": version: 2.7.3 resolution: "eslint-module-utils@npm:2.7.3" @@ -24694,6 +25583,60 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-import@npm:^2.31.0": + version: 2.31.0 + resolution: "eslint-plugin-import@npm:2.31.0" + dependencies: + "@rtsao/scc": ^1.1.0 + array-includes: ^3.1.8 + array.prototype.findlastindex: ^1.2.5 + array.prototype.flat: ^1.3.2 + array.prototype.flatmap: ^1.3.2 + debug: ^3.2.7 + doctrine: ^2.1.0 + eslint-import-resolver-node: ^0.3.9 + eslint-module-utils: ^2.12.0 + hasown: ^2.0.2 + is-core-module: ^2.15.1 + is-glob: ^4.0.3 + minimatch: ^3.1.2 + object.fromentries: ^2.0.8 + object.groupby: ^1.0.3 + object.values: ^1.2.0 + semver: ^6.3.1 + string.prototype.trimend: ^1.0.8 + tsconfig-paths: ^3.15.0 + peerDependencies: + eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9 + checksum: b1d2ac268b3582ff1af2a72a2c476eae4d250c100f2e335b6e102036e4a35efa530b80ec578dfc36761fabb34a635b9bf5ab071abe9d4404a4bb054fdf22d415 + languageName: node + linkType: hard + +"eslint-plugin-jsx-a11y@npm:^6.10.0": + version: 6.10.2 + resolution: "eslint-plugin-jsx-a11y@npm:6.10.2" + dependencies: + aria-query: ^5.3.2 + array-includes: ^3.1.8 + array.prototype.flatmap: ^1.3.2 + ast-types-flow: ^0.0.8 + axe-core: ^4.10.0 + axobject-query: ^4.1.0 + damerau-levenshtein: ^1.0.8 + emoji-regex: ^9.2.2 + hasown: ^2.0.2 + jsx-ast-utils: ^3.3.5 + language-tags: ^1.0.9 + minimatch: ^3.1.2 + object.fromentries: ^2.0.8 + safe-regex-test: ^1.0.3 + string.prototype.includes: ^2.0.1 + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9 + checksum: 0cc861398fa26ada61ed5703eef5b335495fcb96253263dcd5e399488ff019a2636372021baacc040e3560d1a34bfcd5d5ad9f1754f44cd0509c956f7df94050 + languageName: node + linkType: hard + "eslint-plugin-jsx-a11y@npm:^6.5.1": version: 6.5.1 resolution: "eslint-plugin-jsx-a11y@npm:6.5.1" @@ -24797,6 +25740,15 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-react-hooks@npm:^5.0.0": + version: 5.1.0 + resolution: "eslint-plugin-react-hooks@npm:5.1.0" + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 + checksum: 14d2692214ea15b19ef330a9abf51cb8c1586339d9e758ebd61b182be68dd772af56462b04e4b9d2be923d72f46db61e8d32fcf37c248b04949c0b02f5bfb3c0 + languageName: node + linkType: hard + "eslint-plugin-react@npm:^7.30.1": version: 7.30.1 resolution: "eslint-plugin-react@npm:7.30.1" @@ -24874,6 +25826,34 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-react@npm:^7.37.0": + version: 7.37.4 + resolution: "eslint-plugin-react@npm:7.37.4" + dependencies: + array-includes: ^3.1.8 + array.prototype.findlast: ^1.2.5 + array.prototype.flatmap: ^1.3.3 + array.prototype.tosorted: ^1.1.4 + doctrine: ^2.1.0 + es-iterator-helpers: ^1.2.1 + estraverse: ^5.3.0 + hasown: ^2.0.2 + jsx-ast-utils: ^2.4.1 || ^3.0.0 + minimatch: ^3.1.2 + object.entries: ^1.1.8 + object.fromentries: ^2.0.8 + object.values: ^1.2.1 + prop-types: ^15.8.1 + resolve: ^2.0.0-next.5 + semver: ^6.3.1 + string.prototype.matchall: ^4.0.12 + string.prototype.repeat: ^1.0.0 + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7 + checksum: 8a37bdc9b347bf3a1273fef73dfbc39279cc3e58441940a5e13b3ba4e82b34132d1d1172db9d6746f153ee981280bd6bd06a9065fb453388c68f4bebe0d9f839 + languageName: node + linkType: hard + "eslint-plugin-turbo@npm:0.0.7": version: 0.0.7 resolution: "eslint-plugin-turbo@npm:0.0.7" @@ -24934,6 +25914,16 @@ __metadata: languageName: node linkType: hard +"eslint-scope@npm:^8.2.0": + version: 8.2.0 + resolution: "eslint-scope@npm:8.2.0" + dependencies: + esrecurse: ^4.3.0 + estraverse: ^5.2.0 + checksum: 750eff4672ca2bf274ec0d1bbeae08aadd53c1907d5c6aff5564d8e047a5f49afa8ae6eee333cab637fd3ebcab2141659d8f2f040f6fdc982b0f61f8bf03136f + languageName: node + linkType: hard + "eslint-utils@npm:^3.0.0": version: 3.0.0 resolution: "eslint-utils@npm:3.0.0" @@ -24959,13 +25949,20 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.4.1": +"eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" checksum: 36e9ef87fca698b6fd7ca5ca35d7b2b6eeaaf106572e2f7fd31c12d3bfdaccdb587bba6d3621067e5aece31c8c3a348b93922ab8f7b2cbc6aaab5e1d89040c60 languageName: node linkType: hard +"eslint-visitor-keys@npm:^4.2.0": + version: 4.2.0 + resolution: "eslint-visitor-keys@npm:4.2.0" + checksum: 779c604672b570bb4da84cef32f6abb085ac78379779c1122d7879eade8bb38ae715645324597cf23232d03cef06032c9844d25c73625bc282a5bfd30247e5b5 + languageName: node + linkType: hard + "eslint@npm:^8.34.0": version: 8.34.0 resolution: "eslint@npm:8.34.0" @@ -25015,6 +26012,55 @@ __metadata: languageName: node linkType: hard +"eslint@npm:^9": + version: 9.19.0 + resolution: "eslint@npm:9.19.0" + dependencies: + "@eslint-community/eslint-utils": ^4.2.0 + "@eslint-community/regexpp": ^4.12.1 + "@eslint/config-array": ^0.19.0 + "@eslint/core": ^0.10.0 + "@eslint/eslintrc": ^3.2.0 + "@eslint/js": 9.19.0 + "@eslint/plugin-kit": ^0.2.5 + "@humanfs/node": ^0.16.6 + "@humanwhocodes/module-importer": ^1.0.1 + "@humanwhocodes/retry": ^0.4.1 + "@types/estree": ^1.0.6 + "@types/json-schema": ^7.0.15 + ajv: ^6.12.4 + chalk: ^4.0.0 + cross-spawn: ^7.0.6 + debug: ^4.3.2 + escape-string-regexp: ^4.0.0 + eslint-scope: ^8.2.0 + eslint-visitor-keys: ^4.2.0 + espree: ^10.3.0 + esquery: ^1.5.0 + esutils: ^2.0.2 + fast-deep-equal: ^3.1.3 + file-entry-cache: ^8.0.0 + find-up: ^5.0.0 + glob-parent: ^6.0.2 + ignore: ^5.2.0 + imurmurhash: ^0.1.4 + is-glob: ^4.0.0 + json-stable-stringify-without-jsonify: ^1.0.1 + lodash.merge: ^4.6.2 + minimatch: ^3.1.2 + natural-compare: ^1.4.0 + optionator: ^0.9.3 + peerDependencies: + jiti: "*" + peerDependenciesMeta: + jiti: + optional: true + bin: + eslint: bin/eslint.js + checksum: 173c77ac3fd8fa69a9367c457f8048088450911f6f927b189bcc2fd1dcca71422346952cdb7217948d692f67b3e36238f5264717187e83a1cdbd1b37b89e3877 + languageName: node + linkType: hard + "esm@npm:^3.2.25": version: 3.2.25 resolution: "esm@npm:3.2.25" @@ -25022,6 +26068,17 @@ __metadata: languageName: node linkType: hard +"espree@npm:^10.0.1, espree@npm:^10.3.0": + version: 10.3.0 + resolution: "espree@npm:10.3.0" + dependencies: + acorn: ^8.14.0 + acorn-jsx: ^5.3.2 + eslint-visitor-keys: ^4.2.0 + checksum: 63e8030ff5a98cea7f8b3e3a1487c998665e28d674af08b9b3100ed991670eb3cbb0e308c4548c79e03762753838fbe530c783f17309450d6b47a889fee72bef + languageName: node + linkType: hard + "espree@npm:^9.4.0": version: 9.4.1 resolution: "espree@npm:9.4.1" @@ -25052,6 +26109,15 @@ __metadata: languageName: node linkType: hard +"esquery@npm:^1.5.0": + version: 1.6.0 + resolution: "esquery@npm:1.6.0" + dependencies: + estraverse: ^5.1.0 + checksum: 08ec4fe446d9ab27186da274d979558557fbdbbd10968fa9758552482720c54152a5640e08b9009e5a30706b66aba510692054d4129d32d0e12e05bbc0b96fb2 + languageName: node + linkType: hard + "esrecurse@npm:^4.3.0": version: 4.3.0 resolution: "esrecurse@npm:4.3.0" @@ -25438,6 +26504,19 @@ __metadata: languageName: node linkType: hard +"fast-glob@npm:3.3.1": + version: 3.3.1 + resolution: "fast-glob@npm:3.3.1" + dependencies: + "@nodelib/fs.stat": ^2.0.2 + "@nodelib/fs.walk": ^1.2.3 + glob-parent: ^5.1.2 + merge2: ^1.3.0 + micromatch: ^4.0.4 + checksum: b6f3add6403e02cf3a798bfbb1183d0f6da2afd368f27456010c0bc1f9640aea308243d4cb2c0ab142f618276e65ecb8be1661d7c62a7b4e5ba774b9ce5432e5 + languageName: node + linkType: hard + "fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9": version: 3.2.11 resolution: "fast-glob@npm:3.2.11" @@ -25773,6 +26852,15 @@ __metadata: languageName: node linkType: hard +"file-entry-cache@npm:^8.0.0": + version: 8.0.0 + resolution: "file-entry-cache@npm:8.0.0" + dependencies: + flat-cache: ^4.0.0 + checksum: f67802d3334809048c69b3d458f672e1b6d26daefda701761c81f203b80149c35dea04d78ea4238969dd617678e530876722a0634c43031a0957f10cc3ed190f + languageName: node + linkType: hard + "file-system-cache@npm:2.3.0": version: 2.3.0 resolution: "file-system-cache@npm:2.3.0" @@ -25815,6 +26903,15 @@ __metadata: languageName: node linkType: hard +"fill-range@npm:^7.1.1": + version: 7.1.1 + resolution: "fill-range@npm:7.1.1" + dependencies: + to-regex-range: ^5.0.1 + checksum: b4abfbca3839a3d55e4ae5ec62e131e2e356bf4859ce8480c64c4876100f4df292a63e5bb1618e1d7460282ca2b305653064f01654474aa35c68000980f17798 + languageName: node + linkType: hard + "filter-obj@npm:^2.0.2": version: 2.0.2 resolution: "filter-obj@npm:2.0.2" @@ -25959,6 +27056,16 @@ __metadata: languageName: node linkType: hard +"flat-cache@npm:^4.0.0": + version: 4.0.1 + resolution: "flat-cache@npm:4.0.1" + dependencies: + flatted: ^3.2.9 + keyv: ^4.5.4 + checksum: 899fc86bf6df093547d76e7bfaeb900824b869d7d457d02e9b8aae24836f0a99fbad79328cfd6415ee8908f180699bf259dc7614f793447cb14f707caf5996f6 + languageName: node + linkType: hard + "flatted@npm:^3.1.0": version: 3.2.5 resolution: "flatted@npm:3.2.5" @@ -25966,6 +27073,13 @@ __metadata: languageName: node linkType: hard +"flatted@npm:^3.2.9": + version: 3.3.2 + resolution: "flatted@npm:3.3.2" + checksum: ac3c159742e01d0e860a861164bcfd35bb567ccbebb8a0dd041e61cf3c64a435b917dd1e7ed1c380c2ebca85735fb16644485ec33665bc6aafc3b316aa1eed44 + languageName: node + linkType: hard + "flatted@npm:^3.3.1": version: 3.3.1 resolution: "flatted@npm:3.3.1" @@ -26524,6 +27638,20 @@ __metadata: languageName: node linkType: hard +"function.prototype.name@npm:^1.1.8": + version: 1.1.8 + resolution: "function.prototype.name@npm:1.1.8" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.3 + define-properties: ^1.2.1 + functions-have-names: ^1.2.3 + hasown: ^2.0.2 + is-callable: ^1.2.7 + checksum: 3a366535dc08b25f40a322efefa83b2da3cd0f6da41db7775f2339679120ef63b6c7e967266182609e655b8f0a8f65596ed21c7fd72ad8bd5621c2340edd4010 + languageName: node + linkType: hard + "functions-have-names@npm:^1.2.2, functions-have-names@npm:^1.2.3": version: 1.2.3 resolution: "functions-have-names@npm:1.2.3" @@ -26692,6 +27820,24 @@ __metadata: languageName: node linkType: hard +"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7": + version: 1.2.7 + resolution: "get-intrinsic@npm:1.2.7" + dependencies: + call-bind-apply-helpers: ^1.0.1 + es-define-property: ^1.0.1 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + function-bind: ^1.1.2 + get-proto: ^1.0.0 + gopd: ^1.2.0 + has-symbols: ^1.1.0 + hasown: ^2.0.2 + math-intrinsics: ^1.1.0 + checksum: a1597b3b432074f805b6a0ba1182130dd6517c0ea0c4eecc4b8834c803913e1ea62dfc412865be795b3dacb1555a21775b70cf9af7a18b1454ff3414e5442d4a + languageName: node + linkType: hard + "get-nonce@npm:^1.0.0": version: 1.0.1 resolution: "get-nonce@npm:1.0.1" @@ -26727,6 +27873,16 @@ __metadata: languageName: node linkType: hard +"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "get-proto@npm:1.0.1" + dependencies: + dunder-proto: ^1.0.1 + es-object-atoms: ^1.0.0 + checksum: 4fc96afdb58ced9a67558698b91433e6b037aaa6f1493af77498d7c85b141382cf223c0e5946f334fb328ee85dfe6edd06d218eaf09556f4bc4ec6005d7f5f7b + languageName: node + linkType: hard + "get-stream@npm:^6.0.0, get-stream@npm:^6.0.1": version: 6.0.1 resolution: "get-stream@npm:6.0.1" @@ -26772,6 +27928,17 @@ __metadata: languageName: node linkType: hard +"get-symbol-description@npm:^1.1.0": + version: 1.1.0 + resolution: "get-symbol-description@npm:1.1.0" + dependencies: + call-bound: ^1.0.3 + es-errors: ^1.3.0 + get-intrinsic: ^1.2.6 + checksum: 655ed04db48ee65ef2ddbe096540d4405e79ba0a7f54225775fef43a7e2afcb93a77d141c5f05fdef0afce2eb93bcbfb3597142189d562ac167ff183582683cd + languageName: node + linkType: hard + "get-tsconfig@npm:^4.2.0": version: 4.3.0 resolution: "get-tsconfig@npm:4.3.0" @@ -27063,6 +28230,13 @@ __metadata: languageName: node linkType: hard +"globals@npm:^14.0.0": + version: 14.0.0 + resolution: "globals@npm:14.0.0" + checksum: 534b8216736a5425737f59f6e6a5c7f386254560c9f41d24a9227d60ee3ad4a9e82c5b85def0e212e9d92162f83a92544be4c7fd4c902cb913736c10e08237ac + languageName: node + linkType: hard + "globalthis@npm:^1.0.3": version: 1.0.3 resolution: "globalthis@npm:1.0.3" @@ -27072,6 +28246,16 @@ __metadata: languageName: node linkType: hard +"globalthis@npm:^1.0.4": + version: 1.0.4 + resolution: "globalthis@npm:1.0.4" + dependencies: + define-properties: ^1.2.1 + gopd: ^1.0.1 + checksum: 39ad667ad9f01476474633a1834a70842041f70a55571e8dcef5fb957980a92da5022db5430fca8aecc5d47704ae30618c0bc877a579c70710c904e9ef06108a + languageName: node + linkType: hard + "globalyzer@npm:0.1.0": version: 0.1.0 resolution: "globalyzer@npm:0.1.0" @@ -27252,6 +28436,13 @@ __metadata: languageName: node linkType: hard +"gopd@npm:^1.2.0": + version: 1.2.0 + resolution: "gopd@npm:1.2.0" + checksum: cc6d8e655e360955bdccaca51a12a474268f95bb793fc3e1f2bdadb075f28bfd1fd988dab872daf77a61d78cbaf13744bc8727a17cfb1d150d76047d805375f3 + languageName: node + linkType: hard + "got@npm:13.0.0": version: 13.0.0 resolution: "got@npm:13.0.0" @@ -27328,6 +28519,13 @@ __metadata: languageName: node linkType: hard +"graphemer@npm:^1.4.0": + version: 1.4.0 + resolution: "graphemer@npm:1.4.0" + checksum: bab8f0be9b568857c7bec9fda95a89f87b783546d02951c40c33f84d05bb7da3fd10f863a9beb901463669b6583173a8c8cc6d6b306ea2b9b9d5d3d943c3a673 + languageName: node + linkType: hard + "graphql@npm:^16.3.0": version: 16.5.0 resolution: "graphql@npm:16.5.0" @@ -27527,6 +28725,15 @@ __metadata: languageName: node linkType: hard +"has-proto@npm:^1.2.0": + version: 1.2.0 + resolution: "has-proto@npm:1.2.0" + dependencies: + dunder-proto: ^1.0.0 + checksum: f55010cb94caa56308041d77967c72a02ffd71386b23f9afa8447e58bc92d49d15c19bf75173713468e92fe3fb1680b03b115da39c21c32c74886d1d50d3e7ff + languageName: node + linkType: hard + "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3": version: 1.0.3 resolution: "has-symbols@npm:1.0.3" @@ -27534,6 +28741,13 @@ __metadata: languageName: node linkType: hard +"has-symbols@npm:^1.1.0": + version: 1.1.0 + resolution: "has-symbols@npm:1.1.0" + checksum: b2316c7302a0e8ba3aaba215f834e96c22c86f192e7310bdf689dd0e6999510c89b00fbc5742571507cebf25764d68c988b3a0da217369a73596191ac0ce694b + languageName: node + linkType: hard + "has-tostringtag@npm:^1.0.0": version: 1.0.0 resolution: "has-tostringtag@npm:1.0.0" @@ -28272,6 +29486,13 @@ __metadata: languageName: node linkType: hard +"ignore@npm:^5.3.1": + version: 5.3.2 + resolution: "ignore@npm:5.3.2" + checksum: 2acfd32a573260ea522ea0bfeff880af426d68f6831f973129e2ba7363f422923cf53aab62f8369cbf4667c7b25b6f8a3761b34ecdb284ea18e87a5262a865be + languageName: node + linkType: hard + "image-q@npm:^4.0.0": version: 4.0.0 resolution: "image-q@npm:4.0.0" @@ -28665,6 +29886,17 @@ __metadata: languageName: node linkType: hard +"internal-slot@npm:^1.1.0": + version: 1.1.0 + resolution: "internal-slot@npm:1.1.0" + dependencies: + es-errors: ^1.3.0 + hasown: ^2.0.2 + side-channel: ^1.1.0 + checksum: 8e0991c2d048cc08dab0a91f573c99f6a4215075887517ea4fa32203ce8aea60fa03f95b177977fa27eb502e5168366d0f3e02c762b799691411d49900611861 + languageName: node + linkType: hard + "internmap@npm:1 - 2": version: 2.0.3 resolution: "internmap@npm:2.0.3" @@ -28796,6 +30028,17 @@ __metadata: languageName: node linkType: hard +"is-array-buffer@npm:^3.0.5": + version: 3.0.5 + resolution: "is-array-buffer@npm:3.0.5" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.3 + get-intrinsic: ^1.2.6 + checksum: f137a2a6e77af682cdbffef1e633c140cf596f72321baf8bba0f4ef22685eb4339dde23dfe9e9ca430b5f961dee4d46577dcf12b792b68518c8449b134fb9156 + languageName: node + linkType: hard + "is-arrayish@npm:^0.2.1": version: 0.2.1 resolution: "is-arrayish@npm:0.2.1" @@ -28828,6 +30071,15 @@ __metadata: languageName: node linkType: hard +"is-bigint@npm:^1.1.0": + version: 1.1.0 + resolution: "is-bigint@npm:1.1.0" + dependencies: + has-bigints: ^1.0.2 + checksum: ee1544f0e664f253306786ed1dce494b8cf242ef415d6375d8545b4d8816b0f054bd9f948a8988ae2c6325d1c28260dd02978236b2f7b8fb70dfc4838a6c9fa7 + languageName: node + linkType: hard + "is-binary-path@npm:~2.1.0": version: 2.1.0 resolution: "is-binary-path@npm:2.1.0" @@ -28847,6 +30099,16 @@ __metadata: languageName: node linkType: hard +"is-boolean-object@npm:^1.2.1": + version: 1.2.1 + resolution: "is-boolean-object@npm:1.2.1" + dependencies: + call-bound: ^1.0.2 + has-tostringtag: ^1.0.2 + checksum: 2672609f0f2536172873810a38ec006a415e43ddc6a240f7638a1659cb20dfa91cc75c8a1bed36247bb046aa8f0eab945f20d1203bc69606418bd129c745f861 + languageName: node + linkType: hard + "is-buffer@npm:~1.1.6": version: 1.1.6 resolution: "is-buffer@npm:1.1.6" @@ -28926,6 +30188,15 @@ __metadata: languageName: node linkType: hard +"is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0": + version: 2.16.1 + resolution: "is-core-module@npm:2.16.1" + dependencies: + hasown: ^2.0.2 + checksum: 6ec5b3c42d9cbf1ac23f164b16b8a140c3cec338bf8f884c076ca89950c7cc04c33e78f02b8cae7ff4751f3247e3174b2330f1fe4de194c7210deb8b1ea316a7 + languageName: node + linkType: hard + "is-core-module@npm:^2.2.0, is-core-module@npm:^2.8.1": version: 2.8.1 resolution: "is-core-module@npm:2.8.1" @@ -28953,6 +30224,17 @@ __metadata: languageName: node linkType: hard +"is-data-view@npm:^1.0.2": + version: 1.0.2 + resolution: "is-data-view@npm:1.0.2" + dependencies: + call-bound: ^1.0.2 + get-intrinsic: ^1.2.6 + is-typed-array: ^1.1.13 + checksum: 31600dd19932eae7fd304567e465709ffbfa17fa236427c9c864148e1b54eb2146357fcf3aed9b686dee13c217e1bb5a649cb3b9c479e1004c0648e9febde1b2 + languageName: node + linkType: hard + "is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5": version: 1.0.5 resolution: "is-date-object@npm:1.0.5" @@ -28962,6 +30244,16 @@ __metadata: languageName: node linkType: hard +"is-date-object@npm:^1.1.0": + version: 1.1.0 + resolution: "is-date-object@npm:1.1.0" + dependencies: + call-bound: ^1.0.2 + has-tostringtag: ^1.0.2 + checksum: d6c36ab9d20971d65f3fc64cef940d57a4900a2ac85fb488a46d164c2072a33da1cb51eefcc039e3e5c208acbce343d3480b84ab5ff0983f617512da2742562a + languageName: node + linkType: hard + "is-decimal@npm:^1.0.0": version: 1.0.4 resolution: "is-decimal@npm:1.0.4" @@ -29027,6 +30319,15 @@ __metadata: languageName: node linkType: hard +"is-finalizationregistry@npm:^1.1.0": + version: 1.1.1 + resolution: "is-finalizationregistry@npm:1.1.1" + dependencies: + call-bound: ^1.0.3 + checksum: 38c646c506e64ead41a36c182d91639833311970b6b6c6268634f109eef0a1a9d2f1f2e499ef4cb43c744a13443c4cdd2f0812d5afdcee5e9b65b72b28c48557 + languageName: node + linkType: hard + "is-fullwidth-code-point@npm:^3.0.0": version: 3.0.0 resolution: "is-fullwidth-code-point@npm:3.0.0" @@ -29215,6 +30516,16 @@ __metadata: languageName: node linkType: hard +"is-number-object@npm:^1.1.1": + version: 1.1.1 + resolution: "is-number-object@npm:1.1.1" + dependencies: + call-bound: ^1.0.3 + has-tostringtag: ^1.0.2 + checksum: 6517f0a0e8c4b197a21afb45cd3053dc711e79d45d8878aa3565de38d0102b130ca8732485122c7b336e98c27dacd5236854e3e6526e0eb30cae64956535662f + languageName: node + linkType: hard + "is-number@npm:^7.0.0": version: 7.0.0 resolution: "is-number@npm:7.0.0" @@ -29334,6 +30645,18 @@ __metadata: languageName: node linkType: hard +"is-regex@npm:^1.2.1": + version: 1.2.1 + resolution: "is-regex@npm:1.2.1" + dependencies: + call-bound: ^1.0.2 + gopd: ^1.2.0 + has-tostringtag: ^1.0.2 + hasown: ^2.0.2 + checksum: 99ee0b6d30ef1bb61fa4b22fae7056c6c9b3c693803c0c284ff7a8570f83075a7d38cda53b06b7996d441215c27895ea5d1af62124562e13d91b3dbec41a5e13 + languageName: node + linkType: hard + "is-regexp@npm:^1.0.0": version: 1.0.0 resolution: "is-regexp@npm:1.0.0" @@ -29387,6 +30710,15 @@ __metadata: languageName: node linkType: hard +"is-shared-array-buffer@npm:^1.0.4": + version: 1.0.4 + resolution: "is-shared-array-buffer@npm:1.0.4" + dependencies: + call-bound: ^1.0.3 + checksum: 1611fedc175796eebb88f4dfc393dd969a4a8e6c69cadaff424ee9d4464f9f026399a5f84a90f7c62d6d7ee04e3626a912149726de102b0bd6c1ee6a9868fa5a + languageName: node + linkType: hard + "is-ssh@npm:^1.4.0": version: 1.4.0 resolution: "is-ssh@npm:1.4.0" @@ -29426,6 +30758,16 @@ __metadata: languageName: node linkType: hard +"is-string@npm:^1.1.1": + version: 1.1.1 + resolution: "is-string@npm:1.1.1" + dependencies: + call-bound: ^1.0.3 + has-tostringtag: ^1.0.2 + checksum: 2eeaaff605250f5e836ea3500d33d1a5d3aa98d008641d9d42fb941e929ffd25972326c2ef912987e54c95b6f10416281aaf1b35cdf81992cfb7524c5de8e193 + languageName: node + linkType: hard + "is-subdir@npm:^1.1.1": version: 1.2.0 resolution: "is-subdir@npm:1.2.0" @@ -29444,6 +30786,17 @@ __metadata: languageName: node linkType: hard +"is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1": + version: 1.1.1 + resolution: "is-symbol@npm:1.1.1" + dependencies: + call-bound: ^1.0.2 + has-symbols: ^1.1.0 + safe-regex-test: ^1.1.0 + checksum: bfafacf037af6f3c9d68820b74be4ae8a736a658a3344072df9642a090016e281797ba8edbeb1c83425879aae55d1cb1f30b38bf132d703692b2570367358032 + languageName: node + linkType: hard + "is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.12, is-typed-array@npm:^1.1.3, is-typed-array@npm:^1.1.9": version: 1.1.12 resolution: "is-typed-array@npm:1.1.12" @@ -29462,6 +30815,15 @@ __metadata: languageName: node linkType: hard +"is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15": + version: 1.1.15 + resolution: "is-typed-array@npm:1.1.15" + dependencies: + which-typed-array: ^1.1.16 + checksum: ea7cfc46c282f805d19a9ab2084fd4542fed99219ee9dbfbc26284728bd713a51eac66daa74eca00ae0a43b61322920ba334793607dc39907465913e921e0892 + languageName: node + linkType: hard + "is-typedarray@npm:^1.0.0, is-typedarray@npm:~1.0.0": version: 1.0.0 resolution: "is-typedarray@npm:1.0.0" @@ -29515,6 +30877,15 @@ __metadata: languageName: node linkType: hard +"is-weakref@npm:^1.1.0": + version: 1.1.0 + resolution: "is-weakref@npm:1.1.0" + dependencies: + call-bound: ^1.0.2 + checksum: 2a2f3a1746ee1baecf9ac6483d903cd3f8ef3cca88e2baa42f2e85ea064bd246d218eed5f6d479fc1c76dae2231e71133b6b86160e821d176932be9fae3da4da + languageName: node + linkType: hard + "is-weakset@npm:^2.0.3": version: 2.0.3 resolution: "is-weakset@npm:2.0.3" @@ -29766,6 +31137,20 @@ __metadata: languageName: node linkType: hard +"iterator.prototype@npm:^1.1.4": + version: 1.1.5 + resolution: "iterator.prototype@npm:1.1.5" + dependencies: + define-data-property: ^1.1.4 + es-object-atoms: ^1.0.0 + get-intrinsic: ^1.2.6 + get-proto: ^1.0.0 + has-symbols: ^1.1.0 + set-function-name: ^2.0.2 + checksum: 7db23c42629ba4790e6e15f78b555f41dbd08818c85af306988364bd19d86716a1187cb333444f3a0036bfc078a0e9cb7ec67fef3a61662736d16410d7f77869 + languageName: node + linkType: hard + "jackspeak@npm:^2.0.3, jackspeak@npm:^2.3.5": version: 2.3.6 resolution: "jackspeak@npm:2.3.6" @@ -30392,6 +31777,15 @@ __metadata: languageName: node linkType: hard +"jiti@npm:^1.21.6": + version: 1.21.7 + resolution: "jiti@npm:1.21.7" + bin: + jiti: bin/jiti.js + checksum: 9cd20dabf82e3a4cceecb746a69381da7acda93d34eed0cdb9c9bdff3bce07e4f2f4a016ca89924392c935297d9aedc58ff9f7d3281bc5293319ad244926e0b7 + languageName: node + linkType: hard + "jju@npm:~1.4.0": version: 1.4.0 resolution: "jju@npm:1.4.0" @@ -30991,7 +32385,7 @@ __metadata: languageName: node linkType: hard -"keyv@npm:^4.5.3": +"keyv@npm:^4.5.3, keyv@npm:^4.5.4": version: 4.5.4 resolution: "keyv@npm:4.5.4" dependencies: @@ -31281,6 +32675,13 @@ __metadata: languageName: node linkType: hard +"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.3": + version: 3.1.3 + resolution: "lilconfig@npm:3.1.3" + checksum: 644eb10830350f9cdc88610f71a921f510574ed02424b57b0b3abb66ea725d7a082559552524a842f4e0272c196b88dfe1ff7d35ffcc6f45736777185cd67c9a + languageName: node + linkType: hard + "limiter@npm:^1.1.5": version: 1.1.5 resolution: "limiter@npm:1.1.5" @@ -32292,6 +33693,13 @@ __metadata: languageName: node linkType: hard +"math-intrinsics@npm:^1.1.0": + version: 1.1.0 + resolution: "math-intrinsics@npm:1.1.0" + checksum: 0e513b29d120f478c85a70f49da0b8b19bc638975eca466f2eeae0071f3ad00454c621bf66e16dd435896c208e719fc91ad79bbfba4e400fe0b372e7c1c9c9a2 + languageName: node + linkType: hard + "maxmin@npm:^2.1.0": version: 2.1.0 resolution: "maxmin@npm:2.1.0" @@ -32513,6 +33921,16 @@ __metadata: languageName: node linkType: hard +"micromatch@npm:^4.0.8": + version: 4.0.8 + resolution: "micromatch@npm:4.0.8" + dependencies: + braces: ^3.0.3 + picomatch: ^2.3.1 + checksum: 79920eb634e6f400b464a954fcfa589c4e7c7143209488e44baf627f9affc8b1e306f41f4f0deedde97e69cb725920879462d3e750ab3bd3c1aed675bb3a8966 + languageName: node + linkType: hard + "miller-rabin@npm:^4.0.0": version: 4.0.1 resolution: "miller-rabin@npm:4.0.1" @@ -33345,6 +34763,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^3.3.8": + version: 3.3.8 + resolution: "nanoid@npm:3.3.8" + bin: + nanoid: bin/nanoid.cjs + checksum: dfe0adbc0c77e9655b550c333075f51bb28cfc7568afbf3237249904f9c86c9aaaed1f113f0fddddba75673ee31c758c30c43d4414f014a52a7a626efc5958c9 + languageName: node + linkType: hard + "napi-build-utils@npm:^1.0.1": version: 1.0.2 resolution: "napi-build-utils@npm:1.0.2" @@ -33647,6 +35074,67 @@ __metadata: languageName: node linkType: hard +"next@npm:15.1.6": + version: 15.1.6 + resolution: "next@npm:15.1.6" + dependencies: + "@next/env": 15.1.6 + "@next/swc-darwin-arm64": 15.1.6 + "@next/swc-darwin-x64": 15.1.6 + "@next/swc-linux-arm64-gnu": 15.1.6 + "@next/swc-linux-arm64-musl": 15.1.6 + "@next/swc-linux-x64-gnu": 15.1.6 + "@next/swc-linux-x64-musl": 15.1.6 + "@next/swc-win32-arm64-msvc": 15.1.6 + "@next/swc-win32-x64-msvc": 15.1.6 + "@swc/counter": 0.1.3 + "@swc/helpers": 0.5.15 + busboy: 1.6.0 + caniuse-lite: ^1.0.30001579 + postcss: 8.4.31 + sharp: ^0.33.5 + styled-jsx: 5.1.6 + peerDependencies: + "@opentelemetry/api": ^1.1.0 + "@playwright/test": ^1.41.2 + babel-plugin-react-compiler: "*" + react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0 + react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0 + sass: ^1.3.0 + dependenciesMeta: + "@next/swc-darwin-arm64": + optional: true + "@next/swc-darwin-x64": + optional: true + "@next/swc-linux-arm64-gnu": + optional: true + "@next/swc-linux-arm64-musl": + optional: true + "@next/swc-linux-x64-gnu": + optional: true + "@next/swc-linux-x64-musl": + optional: true + "@next/swc-win32-arm64-msvc": + optional: true + "@next/swc-win32-x64-msvc": + optional: true + sharp: + optional: true + peerDependenciesMeta: + "@opentelemetry/api": + optional: true + "@playwright/test": + optional: true + babel-plugin-react-compiler: + optional: true + sass: + optional: true + bin: + next: dist/bin/next + checksum: 8f12910738ff6bc437db40c9580c4478a44178f63b8034190c99fed8ffb4033a210551f829ed68008509717c72d33fd28a2f5551c835474027a0ede6eb56d8e2 + languageName: node + linkType: hard + "next@npm:^13.5.6": version: 13.5.7 resolution: "next@npm:13.5.7" @@ -34355,6 +35843,13 @@ __metadata: languageName: node linkType: hard +"object-inspect@npm:^1.13.3": + version: 1.13.3 + resolution: "object-inspect@npm:1.13.3" + checksum: 8c962102117241e18ea403b84d2521f78291b774b03a29ee80a9863621d88265ffd11d0d7e435c4c2cea0dc2a2fbf8bbc92255737a05536590f2df2e8756f297 + languageName: node + linkType: hard + "object-is@npm:^1.1.5": version: 1.1.5 resolution: "object-is@npm:1.1.5" @@ -34433,6 +35928,20 @@ __metadata: languageName: node linkType: hard +"object.assign@npm:^4.1.7": + version: 4.1.7 + resolution: "object.assign@npm:4.1.7" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.3 + define-properties: ^1.2.1 + es-object-atoms: ^1.0.0 + has-symbols: ^1.1.0 + object-keys: ^1.1.1 + checksum: 60e07d2651cf4f5528c485f1aa4dbded9b384c47d80e8187cefd11320abb1aebebf78df5483451dfa549059f8281c21f7b4bf7d19e9e5e97d8d617df0df298de + languageName: node + linkType: hard + "object.entries@npm:^1.1.5": version: 1.1.5 resolution: "object.entries@npm:1.1.5" @@ -34466,6 +35975,17 @@ __metadata: languageName: node linkType: hard +"object.entries@npm:^1.1.8": + version: 1.1.8 + resolution: "object.entries@npm:1.1.8" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-object-atoms: ^1.0.0 + checksum: 5314877cb637ef3437a30bba61d9bacdb3ce74bf73ac101518be0633c37840c8cc67407edb341f766e8093b3d7516d5c3358f25adfee4a2c697c0ec4c8491907 + languageName: node + linkType: hard + "object.fromentries@npm:^2.0.5": version: 2.0.5 resolution: "object.fromentries@npm:2.0.5" @@ -34499,6 +36019,18 @@ __metadata: languageName: node linkType: hard +"object.fromentries@npm:^2.0.8": + version: 2.0.8 + resolution: "object.fromentries@npm:2.0.8" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.2 + es-object-atoms: ^1.0.0 + checksum: 29b2207a2db2782d7ced83f93b3ff5d425f901945f3665ffda1821e30a7253cd1fd6b891a64279976098137ddfa883d748787a6fea53ecdb51f8df8b8cec0ae1 + languageName: node + linkType: hard + "object.groupby@npm:^1.0.1": version: 1.0.2 resolution: "object.groupby@npm:1.0.2" @@ -34512,6 +36044,17 @@ __metadata: languageName: node linkType: hard +"object.groupby@npm:^1.0.3": + version: 1.0.3 + resolution: "object.groupby@npm:1.0.3" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.2 + checksum: 0d30693ca3ace29720bffd20b3130451dca7a56c612e1926c0a1a15e4306061d84410bdb1456be2656c5aca53c81b7a3661eceaa362db1bba6669c2c9b6d1982 + languageName: node + linkType: hard + "object.hasown@npm:^1.1.1": version: 1.1.1 resolution: "object.hasown@npm:1.1.1" @@ -34575,6 +36118,18 @@ __metadata: languageName: node linkType: hard +"object.values@npm:^1.2.0, object.values@npm:^1.2.1": + version: 1.2.1 + resolution: "object.values@npm:1.2.1" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.3 + define-properties: ^1.2.1 + es-object-atoms: ^1.0.0 + checksum: f9b9a2a125ccf8ded29414d7c056ae0d187b833ee74919821fc60d7e216626db220d9cb3cf33f965c84aaaa96133626ca13b80f3c158b673976dc8cfcfcd26bb + languageName: node + linkType: hard + "objectorarray@npm:^1.0.5": version: 1.0.5 resolution: "objectorarray@npm:1.0.5" @@ -34844,6 +36399,20 @@ __metadata: languageName: node linkType: hard +"optionator@npm:^0.9.3": + version: 0.9.4 + resolution: "optionator@npm:0.9.4" + dependencies: + deep-is: ^0.1.3 + fast-levenshtein: ^2.0.6 + levn: ^0.4.1 + prelude-ls: ^1.2.1 + type-check: ^0.4.0 + word-wrap: ^1.2.5 + checksum: ecbd010e3dc73e05d239976422d9ef54a82a13f37c11ca5911dff41c98a6c7f0f163b27f922c37e7f8340af9d36febd3b6e9cef508f3339d4c393d7276d716bb + languageName: node + linkType: hard + "options-defaults@npm:^2.0.39": version: 2.0.40 resolution: "options-defaults@npm:2.0.40" @@ -34934,6 +36503,17 @@ __metadata: languageName: node linkType: hard +"own-keys@npm:^1.0.1": + version: 1.0.1 + resolution: "own-keys@npm:1.0.1" + dependencies: + get-intrinsic: ^1.2.6 + object-keys: ^1.1.1 + safe-push-apply: ^1.0.0 + checksum: cc9dd7d85c4ccfbe8109fce307d581ac7ede7b26de892b537873fbce2dc6a206d89aea0630dbb98e47ce0873517cefeaa7be15fcf94aaf4764a3b34b474a5b61 + languageName: node + linkType: hard + "p-cancelable@npm:^3.0.0": version: 3.0.0 resolution: "p-cancelable@npm:3.0.0" @@ -35768,6 +37348,13 @@ __metadata: languageName: node linkType: hard +"picocolors@npm:^1.1.1": + version: 1.1.1 + resolution: "picocolors@npm:1.1.1" + checksum: e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045 + languageName: node + linkType: hard + "picomatch@npm:3.0.1": version: 3.0.1 resolution: "picomatch@npm:3.0.1" @@ -36046,6 +37633,24 @@ __metadata: languageName: node linkType: hard +"postcss-load-config@npm:^4.0.2": + version: 4.0.2 + resolution: "postcss-load-config@npm:4.0.2" + dependencies: + lilconfig: ^3.0.0 + yaml: ^2.3.4 + peerDependencies: + postcss: ">=8.0.9" + ts-node: ">=9.0.0" + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + checksum: 7c27dd3801db4eae207a5116fed2db6b1ebb780b40c3dd62a3e57e087093a8e6a14ee17ada729fee903152d6ef4826c6339eb135bee6208e0f3140d7e8090185 + languageName: node + linkType: hard + "postcss-loader@npm:^7.0.2": version: 7.3.3 resolution: "postcss-loader@npm:7.3.3" @@ -36115,6 +37720,17 @@ __metadata: languageName: node linkType: hard +"postcss-nested@npm:^6.2.0": + version: 6.2.0 + resolution: "postcss-nested@npm:6.2.0" + dependencies: + postcss-selector-parser: ^6.1.1 + peerDependencies: + postcss: ^8.2.14 + checksum: 2c86ecf2d0ce68f27c87c7e24ae22dc6dd5515a89fcaf372b2627906e11f5c1f36e4a09e4c15c20fd4a23d628b3d945c35839f44496fbee9a25866258006671b + languageName: node + linkType: hard + "postcss-prefixer@npm:^3.0.0": version: 3.0.0 resolution: "postcss-prefixer@npm:3.0.0" @@ -36164,6 +37780,16 @@ __metadata: languageName: node linkType: hard +"postcss-selector-parser@npm:^6.1.1, postcss-selector-parser@npm:^6.1.2": + version: 6.1.2 + resolution: "postcss-selector-parser@npm:6.1.2" + dependencies: + cssesc: ^3.0.0 + util-deprecate: ^1.0.2 + checksum: ce9440fc42a5419d103f4c7c1847cb75488f3ac9cbe81093b408ee9701193a509f664b4d10a2b4d82c694ee7495e022f8f482d254f92b7ffd9ed9dea696c6f84 + languageName: node + linkType: hard + "postcss-value-parser@npm:^3.3.0": version: 3.3.1 resolution: "postcss-value-parser@npm:3.3.1" @@ -36277,6 +37903,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.47": + version: 8.5.1 + resolution: "postcss@npm:8.5.1" + dependencies: + nanoid: ^3.3.8 + picocolors: ^1.1.1 + source-map-js: ^1.2.1 + checksum: cfdcfcd019fca78160341080ba8986cf80cd6e9ca327ba61b86c03e95043e9bce56ad2e018851858039fd7264781797360bfba718dd216b17b3cd803a5134f2f + languageName: node + linkType: hard + "postgres-array@npm:~2.0.0": version: 2.0.0 resolution: "postgres-array@npm:2.0.0" @@ -37444,6 +39081,18 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:^18.0.0": + version: 18.3.1 + resolution: "react-dom@npm:18.3.1" + dependencies: + loose-envify: ^1.1.0 + scheduler: ^0.23.2 + peerDependencies: + react: ^18.3.1 + checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9 + languageName: node + linkType: hard + "react-easy-crop@npm:^3.5.2": version: 3.5.3 resolution: "react-easy-crop@npm:3.5.3" @@ -38116,6 +39765,15 @@ __metadata: languageName: node linkType: hard +"react@npm:^18.0.0": + version: 18.3.1 + resolution: "react@npm:18.3.1" + dependencies: + loose-envify: ^1.1.0 + checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376 + languageName: node + linkType: hard + "read-cache@npm:^1.0.0": version: 1.0.0 resolution: "read-cache@npm:1.0.0" @@ -38474,6 +40132,22 @@ __metadata: languageName: node linkType: hard +"reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9": + version: 1.0.10 + resolution: "reflect.getprototypeof@npm:1.0.10" + dependencies: + call-bind: ^1.0.8 + define-properties: ^1.2.1 + es-abstract: ^1.23.9 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + get-intrinsic: ^1.2.7 + get-proto: ^1.0.1 + which-builtin-type: ^1.2.1 + checksum: ccc5debeb66125e276ae73909cecb27e47c35d9bb79d9cc8d8d055f008c58010ab8cb401299786e505e4aab733a64cba9daf5f312a58e96a43df66adad221870 + languageName: node + linkType: hard + "refractor@npm:^3.6.0": version: 3.6.0 resolution: "refractor@npm:3.6.0" @@ -38582,6 +40256,20 @@ __metadata: languageName: node linkType: hard +"regexp.prototype.flags@npm:^1.5.3": + version: 1.5.4 + resolution: "regexp.prototype.flags@npm:1.5.4" + dependencies: + call-bind: ^1.0.8 + define-properties: ^1.2.1 + es-errors: ^1.3.0 + get-proto: ^1.0.1 + gopd: ^1.2.0 + set-function-name: ^2.0.2 + checksum: 18cb667e56cb328d2dda569d7f04e3ea78f2683135b866d606538cf7b1d4271f7f749f09608c877527799e6cf350e531368f3c7a20ccd1bb41048a48926bdeeb + languageName: node + linkType: hard + "regexpp@npm:^3.2.0": version: 3.2.0 resolution: "regexpp@npm:3.2.0" @@ -38936,6 +40624,19 @@ __metadata: languageName: node linkType: hard +"resolve@npm:^1.22.8": + version: 1.22.10 + resolution: "resolve@npm:1.22.10" + dependencies: + is-core-module: ^2.16.0 + path-parse: ^1.0.7 + supports-preserve-symlinks-flag: ^1.0.0 + bin: + resolve: bin/resolve + checksum: ab7a32ff4046fcd7c6fdd525b24a7527847d03c3650c733b909b01b757f92eb23510afa9cc3e9bf3f26a3e073b48c88c706dfd4c1d2fb4a16a96b73b6328ddcf + languageName: node + linkType: hard + "resolve@npm:^2.0.0-next.3": version: 2.0.0-next.3 resolution: "resolve@npm:2.0.0-next.3" @@ -39021,6 +40722,19 @@ __metadata: languageName: node linkType: hard +"resolve@patch:resolve@^1.22.8#~builtin": + version: 1.22.10 + resolution: "resolve@patch:resolve@npm%3A1.22.10#~builtin::version=1.22.10&hash=c3c19d" + dependencies: + is-core-module: ^2.16.0 + path-parse: ^1.0.7 + supports-preserve-symlinks-flag: ^1.0.0 + bin: + resolve: bin/resolve + checksum: 8aac1e4e4628bd00bf4b94b23de137dd3fe44097a8d528fd66db74484be929936e20c696e1a3edf4488f37e14180b73df6f600992baea3e089e8674291f16c9d + languageName: node + linkType: hard + "resolve@patch:resolve@^2.0.0-next.3#~builtin": version: 2.0.0-next.3 resolution: "resolve@patch:resolve@npm%3A2.0.0-next.3#~builtin::version=2.0.0-next.3&hash=c3c19d" @@ -39534,6 +41248,19 @@ __metadata: languageName: node linkType: hard +"safe-array-concat@npm:^1.1.3": + version: 1.1.3 + resolution: "safe-array-concat@npm:1.1.3" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.2 + get-intrinsic: ^1.2.6 + has-symbols: ^1.1.0 + isarray: ^2.0.5 + checksum: 00f6a68140e67e813f3ad5e73e6dedcf3e42a9fa01f04d44b0d3f7b1f4b257af876832a9bfc82ac76f307e8a6cc652e3cf95876048a26cbec451847cf6ae3707 + languageName: node + linkType: hard + "safe-buffer@npm:*, safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:~5.2.0": version: 5.2.1 resolution: "safe-buffer@npm:5.2.1" @@ -39548,6 +41275,16 @@ __metadata: languageName: node linkType: hard +"safe-push-apply@npm:^1.0.0": + version: 1.0.0 + resolution: "safe-push-apply@npm:1.0.0" + dependencies: + es-errors: ^1.3.0 + isarray: ^2.0.5 + checksum: 8c11cbee6dc8ff5cc0f3d95eef7052e43494591384015902e4292aef4ae9e539908288520ed97179cee17d6ffb450fe5f05a46ce7a1749685f7524fd568ab5db + languageName: node + linkType: hard + "safe-regex-test@npm:^1.0.0": version: 1.0.0 resolution: "safe-regex-test@npm:1.0.0" @@ -39570,6 +41307,17 @@ __metadata: languageName: node linkType: hard +"safe-regex-test@npm:^1.1.0": + version: 1.1.0 + resolution: "safe-regex-test@npm:1.1.0" + dependencies: + call-bound: ^1.0.2 + es-errors: ^1.3.0 + is-regex: ^1.2.1 + checksum: 3c809abeb81977c9ed6c869c83aca6873ea0f3ab0f806b8edbba5582d51713f8a6e9757d24d2b4b088f563801475ea946c8e77e7713e8c65cdd02305b6caedab + languageName: node + linkType: hard + "safe-stable-stringify@npm:^2.3.1": version: 2.4.3 resolution: "safe-stable-stringify@npm:2.4.3" @@ -39676,6 +41424,15 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.23.2": + version: 0.23.2 + resolution: "scheduler@npm:0.23.2" + dependencies: + loose-envify: ^1.1.0 + checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4 + languageName: node + linkType: hard + "schema-dts@npm:^1.1.0": version: 1.1.0 resolution: "schema-dts@npm:1.1.0" @@ -39843,6 +41600,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.6.0, semver@npm:^7.6.3": + version: 7.7.0 + resolution: "semver@npm:7.7.0" + bin: + semver: bin/semver.js + checksum: a4eefdada9c40df120935b73b0b86080d22f375ed9b950403a4b6a90cc036e552d903ff3c7c3e865823c434ee6c6473908b13d64c84aa307423d3a998e654652 + languageName: node + linkType: hard + "semver@npm:~2.3.1": version: 2.3.2 resolution: "semver@npm:2.3.2" @@ -39968,7 +41734,7 @@ __metadata: languageName: node linkType: hard -"set-function-length@npm:^1.2.1": +"set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" dependencies: @@ -39993,6 +41759,18 @@ __metadata: languageName: node linkType: hard +"set-function-name@npm:^2.0.2": + version: 2.0.2 + resolution: "set-function-name@npm:2.0.2" + dependencies: + define-data-property: ^1.1.4 + es-errors: ^1.3.0 + functions-have-names: ^1.2.3 + has-property-descriptors: ^1.0.2 + checksum: d6229a71527fd0404399fc6227e0ff0652800362510822a291925c9d7b48a1ca1a468b11b281471c34cd5a2da0db4f5d7ff315a61d26655e77f6e971e6d0c80f + languageName: node + linkType: hard + "set-harmonic-interval@npm:^1.0.1": version: 1.0.1 resolution: "set-harmonic-interval@npm:1.0.1" @@ -40000,6 +41778,17 @@ __metadata: languageName: node linkType: hard +"set-proto@npm:^1.0.0": + version: 1.0.0 + resolution: "set-proto@npm:1.0.0" + dependencies: + dunder-proto: ^1.0.1 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + checksum: ec27cbbe334598547e99024403e96da32aca3e530583e4dba7f5db1c43cbc4affa9adfbd77c7b2c210b9b8b2e7b2e600bad2a6c44fd62e804d8233f96bbb62f4 + languageName: node + linkType: hard + "setimmediate@npm:^1.0.4": version: 1.0.5 resolution: "setimmediate@npm:1.0.5" @@ -40059,6 +41848,75 @@ __metadata: languageName: node linkType: hard +"sharp@npm:^0.33.5": + version: 0.33.5 + resolution: "sharp@npm:0.33.5" + dependencies: + "@img/sharp-darwin-arm64": 0.33.5 + "@img/sharp-darwin-x64": 0.33.5 + "@img/sharp-libvips-darwin-arm64": 1.0.4 + "@img/sharp-libvips-darwin-x64": 1.0.4 + "@img/sharp-libvips-linux-arm": 1.0.5 + "@img/sharp-libvips-linux-arm64": 1.0.4 + "@img/sharp-libvips-linux-s390x": 1.0.4 + "@img/sharp-libvips-linux-x64": 1.0.4 + "@img/sharp-libvips-linuxmusl-arm64": 1.0.4 + "@img/sharp-libvips-linuxmusl-x64": 1.0.4 + "@img/sharp-linux-arm": 0.33.5 + "@img/sharp-linux-arm64": 0.33.5 + "@img/sharp-linux-s390x": 0.33.5 + "@img/sharp-linux-x64": 0.33.5 + "@img/sharp-linuxmusl-arm64": 0.33.5 + "@img/sharp-linuxmusl-x64": 0.33.5 + "@img/sharp-wasm32": 0.33.5 + "@img/sharp-win32-ia32": 0.33.5 + "@img/sharp-win32-x64": 0.33.5 + color: ^4.2.3 + detect-libc: ^2.0.3 + semver: ^7.6.3 + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 04beae89910ac65c5f145f88de162e8466bec67705f497ace128de849c24d168993e016f33a343a1f3c30b25d2a90c3e62b017a9a0d25452371556f6cd2471e4 + languageName: node + linkType: hard + "shebang-command@npm:^1.2.0": version: 1.2.0 resolution: "shebang-command@npm:1.2.0" @@ -40128,6 +41986,41 @@ __metadata: languageName: node linkType: hard +"side-channel-list@npm:^1.0.0": + version: 1.0.0 + resolution: "side-channel-list@npm:1.0.0" + dependencies: + es-errors: ^1.3.0 + object-inspect: ^1.13.3 + checksum: 603b928997abd21c5a5f02ae6b9cc36b72e3176ad6827fab0417ead74580cc4fb4d5c7d0a8a2ff4ead34d0f9e35701ed7a41853dac8a6d1a664fcce1a044f86f + languageName: node + linkType: hard + +"side-channel-map@npm:^1.0.1": + version: 1.0.1 + resolution: "side-channel-map@npm:1.0.1" + dependencies: + call-bound: ^1.0.2 + es-errors: ^1.3.0 + get-intrinsic: ^1.2.5 + object-inspect: ^1.13.3 + checksum: 42501371cdf71f4ccbbc9c9e2eb00aaaab80a4c1c429d5e8da713fd4d39ef3b8d4a4b37ed4f275798a65260a551a7131fd87fe67e922dba4ac18586d6aab8b06 + languageName: node + linkType: hard + +"side-channel-weakmap@npm:^1.0.2": + version: 1.0.2 + resolution: "side-channel-weakmap@npm:1.0.2" + dependencies: + call-bound: ^1.0.2 + es-errors: ^1.3.0 + get-intrinsic: ^1.2.5 + object-inspect: ^1.13.3 + side-channel-map: ^1.0.1 + checksum: a815c89bc78c5723c714ea1a77c938377ea710af20d4fb886d362b0d1f8ac73a17816a5f6640f354017d7e292a43da9c5e876c22145bac00b76cfb3468001736 + languageName: node + linkType: hard + "side-channel@npm:^1.0.4": version: 1.0.4 resolution: "side-channel@npm:1.0.4" @@ -40151,6 +42044,19 @@ __metadata: languageName: node linkType: hard +"side-channel@npm:^1.1.0": + version: 1.1.0 + resolution: "side-channel@npm:1.1.0" + dependencies: + es-errors: ^1.3.0 + object-inspect: ^1.13.3 + side-channel-list: ^1.0.0 + side-channel-map: ^1.0.1 + side-channel-weakmap: ^1.0.2 + checksum: bf73d6d6682034603eb8e99c63b50155017ed78a522d27c2acec0388a792c3ede3238b878b953a08157093b85d05797217d270b7666ba1f111345fbe933380ff + languageName: node + linkType: hard + "siginfo@npm:^2.0.0": version: 2.0.0 resolution: "siginfo@npm:2.0.0" @@ -41011,6 +42917,17 @@ __metadata: languageName: node linkType: hard +"string.prototype.includes@npm:^2.0.1": + version: 2.0.1 + resolution: "string.prototype.includes@npm:2.0.1" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-abstract: ^1.23.3 + checksum: ed4b7058b092f30d41c4df1e3e805eeea92479d2c7a886aa30f42ae32fde8924a10cc99cccc99c29b8e18c48216608a0fe6bf887f8b4aadf9559096a758f313a + languageName: node + linkType: hard + "string.prototype.matchall@npm:^4.0.10": version: 4.0.10 resolution: "string.prototype.matchall@npm:4.0.10" @@ -41028,6 +42945,27 @@ __metadata: languageName: node linkType: hard +"string.prototype.matchall@npm:^4.0.12": + version: 4.0.12 + resolution: "string.prototype.matchall@npm:4.0.12" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.3 + define-properties: ^1.2.1 + es-abstract: ^1.23.6 + es-errors: ^1.3.0 + es-object-atoms: ^1.0.0 + get-intrinsic: ^1.2.6 + gopd: ^1.2.0 + has-symbols: ^1.1.0 + internal-slot: ^1.1.0 + regexp.prototype.flags: ^1.5.3 + set-function-name: ^2.0.2 + side-channel: ^1.1.0 + checksum: 98a09d6af91bfc6ee25556f3d7cd6646d02f5f08bda55d45528ed273d266d55a71af7291fe3fc76854deffb9168cc1a917d0b07a7d5a178c7e9537c99e6d2b57 + languageName: node + linkType: hard + "string.prototype.matchall@npm:^4.0.7": version: 4.0.7 resolution: "string.prototype.matchall@npm:4.0.7" @@ -41071,6 +43009,31 @@ __metadata: languageName: node linkType: hard +"string.prototype.repeat@npm:^1.0.0": + version: 1.0.0 + resolution: "string.prototype.repeat@npm:1.0.0" + dependencies: + define-properties: ^1.1.3 + es-abstract: ^1.17.5 + checksum: 95dfc514ed7f328d80a066dabbfbbb1615c3e51490351085409db2eb7cbfed7ea29fdadaf277647fbf9f4a1e10e6dd9e95e78c0fd2c4e6bb6723ea6e59401004 + languageName: node + linkType: hard + +"string.prototype.trim@npm:^1.2.10": + version: 1.2.10 + resolution: "string.prototype.trim@npm:1.2.10" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.2 + define-data-property: ^1.1.4 + define-properties: ^1.2.1 + es-abstract: ^1.23.5 + es-object-atoms: ^1.0.0 + has-property-descriptors: ^1.0.2 + checksum: 87659cd8561237b6c69f5376328fda934693aedde17bb7a2c57008e9d9ff992d0c253a391c7d8d50114e0e49ff7daf86a362f7961cf92f7564cd01342ca2e385 + languageName: node + linkType: hard + "string.prototype.trim@npm:^1.2.8": version: 1.2.8 resolution: "string.prototype.trim@npm:1.2.8" @@ -41137,6 +43100,18 @@ __metadata: languageName: node linkType: hard +"string.prototype.trimend@npm:^1.0.9": + version: 1.0.9 + resolution: "string.prototype.trimend@npm:1.0.9" + dependencies: + call-bind: ^1.0.8 + call-bound: ^1.0.2 + define-properties: ^1.2.1 + es-object-atoms: ^1.0.0 + checksum: cb86f639f41d791a43627784be2175daa9ca3259c7cb83e7a207a729909b74f2ea0ec5d85de5761e6835e5f443e9420c6ff3f63a845378e4a61dd793177bc287 + languageName: node + linkType: hard + "string.prototype.trimstart@npm:^1.0.4": version: 1.0.4 resolution: "string.prototype.trimstart@npm:1.0.4" @@ -41169,6 +43144,17 @@ __metadata: languageName: node linkType: hard +"string.prototype.trimstart@npm:^1.0.8": + version: 1.0.8 + resolution: "string.prototype.trimstart@npm:1.0.8" + dependencies: + call-bind: ^1.0.7 + define-properties: ^1.2.1 + es-object-atoms: ^1.0.0 + checksum: df1007a7f580a49d692375d996521dc14fd103acda7f3034b3c558a60b82beeed3a64fa91e494e164581793a8ab0ae2f59578a49896a7af6583c1f20472bce96 + languageName: node + linkType: hard + "string_decoder@npm:^1.0.0, string_decoder@npm:^1.1.1, string_decoder@npm:^1.3.0": version: 1.3.0 resolution: "string_decoder@npm:1.3.0" @@ -41386,6 +43372,22 @@ __metadata: languageName: node linkType: hard +"styled-jsx@npm:5.1.6": + version: 5.1.6 + resolution: "styled-jsx@npm:5.1.6" + dependencies: + client-only: 0.0.1 + peerDependencies: + react: ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" + peerDependenciesMeta: + "@babel/core": + optional: true + babel-plugin-macros: + optional: true + checksum: 879ad68e3e81adcf4373038aaafe55f968294955593660e173fbf679204aff158c59966716a60b29af72dc88795cfb2c479b6d2c3c87b2b2d282f3e27cc66461 + languageName: node + linkType: hard + "stylis@npm:4.0.13": version: 4.0.13 resolution: "stylis@npm:4.0.13" @@ -41418,6 +43420,24 @@ __metadata: languageName: node linkType: hard +"sucrase@npm:^3.35.0": + version: 3.35.0 + resolution: "sucrase@npm:3.35.0" + dependencies: + "@jridgewell/gen-mapping": ^0.3.2 + commander: ^4.0.0 + glob: ^10.3.10 + lines-and-columns: ^1.1.6 + mz: ^2.7.0 + pirates: ^4.0.1 + ts-interface-checker: ^0.1.9 + bin: + sucrase: bin/sucrase + sucrase-node: bin/sucrase-node + checksum: 9fc5792a9ab8a14dcf9c47dcb704431d35c1cdff1d17d55d382a31c2e8e3063870ad32ce120a80915498486246d612e30cda44f1624d9d9a10423e1a43487ad1 + languageName: node + linkType: hard + "superagent@npm:^5.1.1": version: 5.3.1 resolution: "superagent@npm:5.3.1" @@ -41835,6 +43855,39 @@ __metadata: languageName: node linkType: hard +"tailwindcss@npm:^3.4.1": + version: 3.4.17 + resolution: "tailwindcss@npm:3.4.17" + dependencies: + "@alloc/quick-lru": ^5.2.0 + arg: ^5.0.2 + chokidar: ^3.6.0 + didyoumean: ^1.2.2 + dlv: ^1.1.3 + fast-glob: ^3.3.2 + glob-parent: ^6.0.2 + is-glob: ^4.0.3 + jiti: ^1.21.6 + lilconfig: ^3.1.3 + micromatch: ^4.0.8 + normalize-path: ^3.0.0 + object-hash: ^3.0.0 + picocolors: ^1.1.1 + postcss: ^8.4.47 + postcss-import: ^15.1.0 + postcss-js: ^4.0.1 + postcss-load-config: ^4.0.2 + postcss-nested: ^6.2.0 + postcss-selector-parser: ^6.1.2 + resolve: ^1.22.8 + sucrase: ^3.35.0 + bin: + tailwind: lib/cli.js + tailwindcss: lib/cli.js + checksum: bda962f30e9a2f0567e2ee936ec863d5178958078e577ced13da60b3af779062a53a7e95f2f32b5c558f12a7477dea3ce071441a7362c6d7bf50bc9e166728a4 + languageName: node + linkType: hard + "tapable@npm:^2.0.0, tapable@npm:^2.1.1, tapable@npm:^2.2.0, tapable@npm:^2.2.1": version: 2.2.1 resolution: "tapable@npm:2.2.1" @@ -42549,6 +44602,15 @@ __metadata: languageName: node linkType: hard +"ts-api-utils@npm:^2.0.0": + version: 2.0.0 + resolution: "ts-api-utils@npm:2.0.0" + peerDependencies: + typescript: ">=4.8.4" + checksum: f16f3e4e3308e7ad7ccf0bec3e0cb2e06b46c2d6919c40b6439e37912409c72f14340d231343b2b1b8cc17c2b8b01c5f2418690ea788312db6ca4e72cf2df6d8 + languageName: node + linkType: hard + "ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0": version: 2.2.0 resolution: "ts-dedent@npm:2.2.0" @@ -42895,6 +44957,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.8.0": + version: 2.8.1 + resolution: "tslib@npm:2.8.1" + checksum: e4aba30e632b8c8902b47587fd13345e2827fa639e7c3121074d5ee0880723282411a8838f830b55100cbe4517672f84a2472667d355b81e8af165a55dc6203a + languageName: node + linkType: hard + "tslog@npm:^4.9.2": version: 4.9.2 resolution: "tslog@npm:4.9.2" @@ -43205,6 +45274,17 @@ __metadata: languageName: node linkType: hard +"typed-array-buffer@npm:^1.0.3": + version: 1.0.3 + resolution: "typed-array-buffer@npm:1.0.3" + dependencies: + call-bound: ^1.0.3 + es-errors: ^1.3.0 + is-typed-array: ^1.1.14 + checksum: 3fb91f0735fb413b2bbaaca9fabe7b8fc14a3fa5a5a7546bab8a57e755be0e3788d893195ad9c2b842620592de0e68d4c077d4c2c41f04ec25b8b5bb82fa9a80 + languageName: node + linkType: hard + "typed-array-byte-length@npm:^1.0.0": version: 1.0.0 resolution: "typed-array-byte-length@npm:1.0.0" @@ -43230,6 +45310,19 @@ __metadata: languageName: node linkType: hard +"typed-array-byte-length@npm:^1.0.3": + version: 1.0.3 + resolution: "typed-array-byte-length@npm:1.0.3" + dependencies: + call-bind: ^1.0.8 + for-each: ^0.3.3 + gopd: ^1.2.0 + has-proto: ^1.2.0 + is-typed-array: ^1.1.14 + checksum: cda9352178ebeab073ad6499b03e938ebc30c4efaea63a26839d89c4b1da9d2640b0d937fc2bd1f049eb0a38def6fbe8a061b601292ae62fe079a410ce56e3a6 + languageName: node + linkType: hard + "typed-array-byte-offset@npm:^1.0.0": version: 1.0.0 resolution: "typed-array-byte-offset@npm:1.0.0" @@ -43257,6 +45350,21 @@ __metadata: languageName: node linkType: hard +"typed-array-byte-offset@npm:^1.0.4": + version: 1.0.4 + resolution: "typed-array-byte-offset@npm:1.0.4" + dependencies: + available-typed-arrays: ^1.0.7 + call-bind: ^1.0.8 + for-each: ^0.3.3 + gopd: ^1.2.0 + has-proto: ^1.2.0 + is-typed-array: ^1.1.15 + reflect.getprototypeof: ^1.0.9 + checksum: 670b7e6bb1d3c2cf6160f27f9f529e60c3f6f9611c67e47ca70ca5cfa24ad95415694c49d1dbfeda016d3372cab7dfc9e38c7b3e1bb8d692cae13a63d3c144d7 + languageName: node + linkType: hard + "typed-array-length@npm:^1.0.4": version: 1.0.4 resolution: "typed-array-length@npm:1.0.4" @@ -43282,6 +45390,20 @@ __metadata: languageName: node linkType: hard +"typed-array-length@npm:^1.0.7": + version: 1.0.7 + resolution: "typed-array-length@npm:1.0.7" + dependencies: + call-bind: ^1.0.7 + for-each: ^0.3.3 + gopd: ^1.0.1 + is-typed-array: ^1.1.13 + possible-typed-array-names: ^1.0.0 + reflect.getprototypeof: ^1.0.6 + checksum: deb1a4ffdb27cd930b02c7030cb3e8e0993084c643208e52696e18ea6dd3953dfc37b939df06ff78170423d353dc8b10d5bae5796f3711c1b3abe52872b3774c + languageName: node + linkType: hard + "typedarray-to-buffer@npm:^3.1.5": version: 3.1.5 resolution: "typedarray-to-buffer@npm:3.1.5" @@ -43405,6 +45527,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^5": + version: 5.7.3 + resolution: "typescript@npm:5.7.3" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 6c38b1e989918e576f0307e6ee013522ea480dfce5f3ca85c9b2d8adb1edeffd37f4f30cd68de0c38a44563d12ba922bdb7e36aa2dac9c51de5d561e6e9a2e9c + languageName: node + linkType: hard + "typescript@npm:^5.2.2, typescript@npm:^5.3.3": version: 5.4.2 resolution: "typescript@npm:5.4.2" @@ -43445,6 +45577,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@^5#~builtin": + version: 5.7.3 + resolution: "typescript@patch:typescript@npm%3A5.7.3#~builtin::version=5.7.3&hash=1f5320" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 633cd749d6cd7bc842c6b6245847173bba99742a60776fae3c0fbcc0d1733cd51a733995e5f4dadd8afb0e64e57d3c7dbbeae953a072ee303940eca69e22f311 + languageName: node + linkType: hard + "typescript@patch:typescript@^5.2.2#~builtin, typescript@patch:typescript@^5.3.3#~builtin": version: 5.4.2 resolution: "typescript@patch:typescript@npm%3A5.4.2#~builtin::version=5.4.2&hash=1f5320" @@ -43488,6 +45630,28 @@ __metadata: languageName: node linkType: hard +"ui-playground@workspace:apps/ui-playground": + version: 0.0.0-use.local + resolution: "ui-playground@workspace:apps/ui-playground" + dependencies: + "@calcom/config": "*" + "@calcom/lib": "*" + "@calcom/ui": "*" + "@eslint/eslintrc": ^3 + "@types/node": ^20 + "@types/react": ^18 + "@types/react-dom": ^18 + eslint: ^9 + eslint-config-next: 15.1.6 + next: 15.1.6 + postcss: ^8 + react: ^18.0.0 + react-dom: ^18.0.0 + tailwindcss: ^3.4.1 + typescript: ^5 + languageName: unknown + linkType: soft + "uid@npm:2.0.2": version: 2.0.2 resolution: "uid@npm:2.0.2" @@ -43521,6 +45685,18 @@ __metadata: languageName: node linkType: hard +"unbox-primitive@npm:^1.1.0": + version: 1.1.0 + resolution: "unbox-primitive@npm:1.1.0" + dependencies: + call-bound: ^1.0.3 + has-bigints: ^1.0.2 + has-symbols: ^1.1.0 + which-boxed-primitive: ^1.1.1 + checksum: 729f13b84a5bfa3fead1d8139cee5c38514e63a8d6a437819a473e241ba87eeb593646568621c7fc7f133db300ef18d65d1a5a60dc9c7beb9000364d93c581df + languageName: node + linkType: hard + "undici@npm:^5.28.2": version: 5.28.4 resolution: "undici@npm:5.28.4" @@ -44896,6 +47072,19 @@ __metadata: languageName: node linkType: hard +"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1": + version: 1.1.1 + resolution: "which-boxed-primitive@npm:1.1.1" + dependencies: + is-bigint: ^1.1.0 + is-boolean-object: ^1.2.1 + is-number-object: ^1.1.1 + is-string: ^1.1.1 + is-symbol: ^1.1.1 + checksum: ee41d0260e4fd39551ad77700c7047d3d281ec03d356f5e5c8393fe160ba0db53ef446ff547d05f76ffabfd8ad9df7c9a827e12d4cccdbc8fccf9239ff8ac21e + languageName: node + linkType: hard + "which-builtin-type@npm:^1.1.3": version: 1.1.3 resolution: "which-builtin-type@npm:1.1.3" @@ -44916,7 +47105,28 @@ __metadata: languageName: node linkType: hard -"which-collection@npm:^1.0.1": +"which-builtin-type@npm:^1.2.1": + version: 1.2.1 + resolution: "which-builtin-type@npm:1.2.1" + dependencies: + call-bound: ^1.0.2 + function.prototype.name: ^1.1.6 + has-tostringtag: ^1.0.2 + is-async-function: ^2.0.0 + is-date-object: ^1.1.0 + is-finalizationregistry: ^1.1.0 + is-generator-function: ^1.0.10 + is-regex: ^1.2.1 + is-weakref: ^1.0.2 + isarray: ^2.0.5 + which-boxed-primitive: ^1.1.0 + which-collection: ^1.0.2 + which-typed-array: ^1.1.16 + checksum: 7a3617ba0e7cafb795f74db418df889867d12bce39a477f3ee29c6092aa64d396955bf2a64eae3726d8578440e26777695544057b373c45a8bcf5fbe920bf633 + languageName: node + linkType: hard + +"which-collection@npm:^1.0.1, which-collection@npm:^1.0.2": version: 1.0.2 resolution: "which-collection@npm:1.0.2" dependencies: @@ -44971,6 +47181,20 @@ __metadata: languageName: node linkType: hard +"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18": + version: 1.1.18 + resolution: "which-typed-array@npm:1.1.18" + dependencies: + available-typed-arrays: ^1.0.7 + call-bind: ^1.0.8 + call-bound: ^1.0.3 + for-each: ^0.3.3 + gopd: ^1.2.0 + has-tostringtag: ^1.0.2 + checksum: d2feea7f51af66b3a240397aa41c796585033e1069f18e5b6d4cd3878538a1e7780596fd3ea9bf347c43d9e98e13be09b37d9ea3887cef29b11bc291fd47bb52 + languageName: node + linkType: hard + "which@npm:^1.2.9": version: 1.3.1 resolution: "which@npm:1.3.1" @@ -45107,6 +47331,13 @@ __metadata: languageName: node linkType: hard +"word-wrap@npm:^1.2.5": + version: 1.2.5 + resolution: "word-wrap@npm:1.2.5" + checksum: f93ba3586fc181f94afdaff3a6fef27920b4b6d9eaefed0f428f8e07adea2a7f54a5f2830ce59406c8416f033f86902b91eb824072354645eea687dff3691ccb + languageName: node + linkType: hard + "wordwrap@npm:^1.0.0": version: 1.0.0 resolution: "wordwrap@npm:1.0.0" @@ -45498,6 +47729,15 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^2.3.4": + version: 2.7.0 + resolution: "yaml@npm:2.7.0" + bin: + yaml: bin.mjs + checksum: 6e8b2f9b9d1b18b10274d58eb3a47ec223d9a93245a890dcb34d62865f7e744747190a9b9177d5f0ef4ea2e44ad2c0214993deb42e0800766203ac46f00a12dd + languageName: node + linkType: hard + "yargs-parser@npm:21.1.1, yargs-parser@npm:^21.0.1, yargs-parser@npm:^21.1.1": version: 21.1.1 resolution: "yargs-parser@npm:21.1.1" From 66c18539547d802b30929a94d81273f7034a869f Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Thu, 30 Jan 2025 08:03:04 +0000 Subject: [PATCH 005/143] feat: v3/badge (#18999) * badge intro * fix text on small badge * add dark mode warning --- .../app/_components/BadgeDemo.tsx | 116 ++++++++++++++++++ .../app/_components/PageContent.tsx | 26 ++++ apps/ui-playground/app/page.tsx | 8 +- packages/config/tailwind-preset.js | 51 +++++++- packages/ui/components/badge/Badge.tsx | 7 +- 5 files changed, 198 insertions(+), 10 deletions(-) create mode 100644 apps/ui-playground/app/_components/BadgeDemo.tsx create mode 100644 apps/ui-playground/app/_components/PageContent.tsx diff --git a/apps/ui-playground/app/_components/BadgeDemo.tsx b/apps/ui-playground/app/_components/BadgeDemo.tsx new file mode 100644 index 00000000000000..7d9f49dc97af84 --- /dev/null +++ b/apps/ui-playground/app/_components/BadgeDemo.tsx @@ -0,0 +1,116 @@ +"use client"; + +import { useState } from "react"; + +import { Badge } from "@calcom/ui"; + +export default function BadgeDemo() { + const [isOpen, setIsOpen] = useState(true); + + const variants = [ + "default", + "warning", + "orange", + "success", + "green", + "gray", + "blue", + "red", + "error", + "grayWithoutHover", + ] as const; + + const sizes = ["sm", "md", "lg"] as const; + + return ( +
+ + + {isOpen && ( +
+ {/* Variants with Sizes */} + {variants.map((variant) => ( +
+

{variant}

+
+ {sizes.map((size) => ( +
+ + {variant} + + {size} +
+ ))} +
+
+ ))} + + {/* With Icons */} +
+

With Icons

+
+ {variants.map((variant) => ( +
+ + {variant} + + Icon +
+ ))} +
+
+ + {/* With Dots */} +
+

With Dots

+
+ {variants.map((variant) => ( +
+ + {variant} + + Dot +
+ ))} +
+
+ + {/* Interactive */} +
+

Interactive

+
+ {variants.map((variant) => ( +
+ alert(`${variant} badge clicked!`)}> + Click me + + Clickable +
+ ))} +
+
+ + {/* Rounded */} +
+

Rounded

+
+ {variants.map((variant) => ( +
+ + 1 + + {variant} +
+ ))} +
+
+
+ )} +
+ ); +} diff --git a/apps/ui-playground/app/_components/PageContent.tsx b/apps/ui-playground/app/_components/PageContent.tsx new file mode 100644 index 00000000000000..4aac9acc23c044 --- /dev/null +++ b/apps/ui-playground/app/_components/PageContent.tsx @@ -0,0 +1,26 @@ +"use client"; + +import { useState } from "react"; + +import { Button } from "@calcom/ui"; + +import AvatarDemo from "./AvatarDemo"; +import BadgeDemo from "./BadgeDemo"; + +export default function PageContent() { + const [isDark, setIsDark] = useState(false); + + return ( +
+
+
+ +
+ + +
+
+ ); +} diff --git a/apps/ui-playground/app/page.tsx b/apps/ui-playground/app/page.tsx index f65e1d38e0c703..5804d1c249c322 100644 --- a/apps/ui-playground/app/page.tsx +++ b/apps/ui-playground/app/page.tsx @@ -1,9 +1,5 @@ -import AvatarDemo from "./_components/AvatarDemo"; +import PageContent from "./_components/PageContent"; export default function Home() { - return ( -
- -
- ); + return ; } diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js index 6f21acbe0ff211..eacd9083a48ed7 100644 --- a/packages/config/tailwind-preset.js +++ b/packages/config/tailwind-preset.js @@ -1,5 +1,6 @@ const plugin = require("tailwindcss/plugin"); const { fontFamily } = require("tailwindcss/defaultTheme"); +const colors = require("tailwindcss/colors"); /** @type {import('tailwindcss').Config} */ const subtleColor = "#E5E7EB"; @@ -59,6 +60,54 @@ module.exports = { 800: "#e8e8e8", 900: "#f3f4f6", }, + semantic: { + info: { + subtle: colors.blue["100"], + emphasis: colors.blue["500"], + }, + success: { + subtle: colors.green["100"], + emphasis: colors.green["500"], + }, + attention: { + subtle: colors.orange["100"], + emphasis: colors.orange["500"], + }, + error: { + subtle: colors.red["100"], + emphasis: colors.red["500"], + }, + }, + visualization: { + 1: { + subtle: colors.pink["100"], + emphasis: colors.pink["500"], + }, + 2: { + subtle: colors.purple["100"], + emphasis: colors.purple["500"], + }, + 3: { + subtle: colors.blue["100"], + emphasis: colors.blue["500"], + }, + 4: { + subtle: colors.green["100"], + emphasis: colors.green["500"], + }, + 5: { + subtle: colors.yellow["100"], + emphasis: colors.yellow["500"], + }, + 6: { + subtle: colors.orange["100"], + emphasis: colors.orange["500"], + }, + 7: { + subtle: colors.red["100"], + emphasis: colors.red["500"], + }, + }, }, borderColor: { emphasis: "var(--cal-border-emphasis, #9CA3AF)", @@ -78,7 +127,7 @@ module.exports = { muted: "var(--cal-text-muted, #9CA3AF)", inverted: "var(--cal-text-inverted, white)", info: "var(--cal-text-info, #253985)", - success: "var(--cal-text-success, #285231)", + success: "var(--cal-text-success, #0B6638)", attention: "var(--cal-text-attention, #73321B)", error: "var(--cal-text-error, #752522)", brand: "var(--cal-brand-text,'white')", diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx index a1fad26c2e1d3d..1d9bac04b9aef5 100644 --- a/packages/ui/components/badge/Badge.tsx +++ b/packages/ui/components/badge/Badge.tsx @@ -20,11 +20,12 @@ export const badgeStyles = cva("font-medium inline-flex items-center justify-cen red: "bg-error text-error", error: "bg-error text-error", grayWithoutHover: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800", + purple: "bg-purple-50 text-purple-800", }, size: { - sm: "px-1 py-0.5 text-xs leading-3", - md: "py-1 px-1.5 text-xs leading-3", - lg: "py-1 px-2 text-sm leading-4", + sm: "px-1 py-1 text-[10px] leading-none", + md: "py-1 px-1.5 text-xs leading-none", + lg: "py-1 px-1.5 text-sm leading-none", }, }, defaultVariants: { From 9668bbb07ab9738c391c08577d7a5feac65ba453 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Thu, 30 Jan 2025 10:33:07 +0000 Subject: [PATCH 006/143] feat: v3/button (#19014) * TOC * wip buttons * shadows * secondary * semantic colours * minimal buttons * update disabled states --- apps/storybook/styles/storybook-styles.css | 2 +- .../app/_components/AvatarDemo.tsx | 12 +- .../app/_components/ButtonDemo.tsx | 143 +++++++++ .../app/_components/PageContent.tsx | 42 ++- .../app/_components/TableOfContents.tsx | 215 ++++++++++++++ apps/ui-playground/app/globals.css | 3 +- apps/ui-playground/app/layout.tsx | 23 +- apps/ui-playground/package.json | 1 + apps/web/styles/globals.css | 3 +- packages/config/tailwind-preset.js | 23 ++ packages/config/theme/colors.css | 3 +- packages/platform/atoms/globals.css | 5 +- packages/ui/components/button/Button.tsx | 127 +++++++- yarn.lock | 280 ++++++++++++++++++ 14 files changed, 832 insertions(+), 50 deletions(-) create mode 100644 apps/ui-playground/app/_components/ButtonDemo.tsx create mode 100644 apps/ui-playground/app/_components/TableOfContents.tsx diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css index 78d8ce13b7dbe2..e373c86cd35257 100644 --- a/apps/storybook/styles/storybook-styles.css +++ b/apps/storybook/styles/storybook-styles.css @@ -230,7 +230,7 @@ --cal-text-info: hsla(228, 56%, 33%, 1); --cal-text-success: hsla(133, 34%, 24%, 1); --cal-text-attention: hsla(16, 62%, 28%, 1); - --cal-text-error: hsla(2, 55%, 30%, 1); + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shinanigans -> These will be computed for the users theme at runtime. diff --git a/apps/ui-playground/app/_components/AvatarDemo.tsx b/apps/ui-playground/app/_components/AvatarDemo.tsx index d52409a9c7cc02..6909ffab44330a 100644 --- a/apps/ui-playground/app/_components/AvatarDemo.tsx +++ b/apps/ui-playground/app/_components/AvatarDemo.tsx @@ -10,7 +10,7 @@ export default function AvatarDemo() { const sampleImage = "https://app.cal.com/api/avatar/e9f012f2-8516-4012-b967-6fe1844a7b40.png"; return ( -
+
+ + {isOpen && ( +
+ {/* Variants with Colors */} + {variants.map((variant) => ( +
+

+ {variant === "button" ? "Default" : variant} +

+
+ {colors.map((color) => ( +
+

{color}

+
+ {sizes.map((size) => ( +
+ + {size} +
+ ))} +
+
+ ))} +
+
+ ))} + + {/* With Icons */} +
+

With Icons

+
+ {colors.map((color) => ( +
+ + Start Icon +
+ ))} +
+
+ {colors.map((color) => ( +
+ + End Icon +
+ ))} +
+
+ + {/* Loading State */} +
+

Loading State

+
+ {colors.map((color) => ( +
+ + Loading +
+ ))} +
+
+ + {/* Disabled State */} +
+

Disabled State

+
+ {colors.map((color) => ( +
+ + Disabled +
+ ))} +
+
+ + {/* With Tooltip +
+

With Tooltip

+
+ {colors.map((color) => ( +
+ + Tooltip +
+ ))} +
+
*/} + + {/* As Link */} + +
+ )} +
+ ); +} diff --git a/apps/ui-playground/app/_components/PageContent.tsx b/apps/ui-playground/app/_components/PageContent.tsx index 4aac9acc23c044..bdb0310534dba6 100644 --- a/apps/ui-playground/app/_components/PageContent.tsx +++ b/apps/ui-playground/app/_components/PageContent.tsx @@ -6,20 +6,46 @@ import { Button } from "@calcom/ui"; import AvatarDemo from "./AvatarDemo"; import BadgeDemo from "./BadgeDemo"; +import ButtonDemo from "./ButtonDemo"; +import TableOfContents from "./TableOfContents"; export default function PageContent() { const [isDark, setIsDark] = useState(false); return ( -
-
-
- +
+
+
+
+ +
+
+
+ +
+
+ {/* Sidebar */} +
+
+ +
+
+ + {/* Main content */} +
+
+ +
+
+ +
+
+ +
+
- -
); diff --git a/apps/ui-playground/app/_components/TableOfContents.tsx b/apps/ui-playground/app/_components/TableOfContents.tsx new file mode 100644 index 00000000000000..b9030857f2bbc4 --- /dev/null +++ b/apps/ui-playground/app/_components/TableOfContents.tsx @@ -0,0 +1,215 @@ +"use client"; + +import { useEffect, useState } from "react"; + +import { Button, Input } from "@calcom/ui"; + +type Section = { + id: string; + title: string; + subsections?: { id: string; title: string }[]; +}; + +const sections: Section[] = [ + { + id: "avatar", + title: "Avatar", + subsections: [ + { id: "avatar-sizes", title: "Size Variations" }, + { id: "avatar-images", title: "With/Without Image" }, + { id: "avatar-tooltip", title: "With Tooltip" }, + { id: "avatar-link", title: "With Link" }, + { id: "avatar-indicator", title: "With Indicator" }, + ], + }, + { + id: "badge", + title: "Badge", + subsections: [ + { id: "badge-variants", title: "Variants" }, + { id: "badge-icons", title: "With Icons" }, + { id: "badge-dots", title: "With Dots" }, + { id: "badge-interactive", title: "Interactive" }, + { id: "badge-rounded", title: "Rounded" }, + ], + }, + { + id: "button", + title: "Button", + subsections: [ + { id: "button-default", title: "Default" }, + { id: "button-icon", title: "Icon" }, + { id: "button-fab", title: "Fab" }, + { id: "button-icons", title: "With Icons" }, + { id: "button-loading", title: "Loading State" }, + { id: "button-disabled", title: "Disabled State" }, + { id: "button-link", title: "As Link" }, + ], + }, +]; + +const STORAGE_KEY = "ui-playground-toc-state"; + +export default function TableOfContents() { + const [activeSection, setActiveSection] = useState(""); + const [expandedSections, setExpandedSections] = useState>({}); + const [searchQuery, setSearchQuery] = useState(""); + + // Load expanded sections state from localStorage + useEffect(() => { + const savedState = localStorage.getItem(STORAGE_KEY); + if (savedState) { + try { + const parsed = JSON.parse(savedState); + setExpandedSections(parsed); + } catch (e) { + console.error("Failed to parse saved TOC state"); + } + } else { + // Default to all sections expanded + const defaultState = sections.reduce((acc, section) => { + acc[section.id] = true; + return acc; + }, {} as Record); + setExpandedSections(defaultState); + localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultState)); + } + }, []); + + // Save expanded sections state to localStorage + useEffect(() => { + if (Object.keys(expandedSections).length > 0) { + localStorage.setItem(STORAGE_KEY, JSON.stringify(expandedSections)); + } + }, [expandedSections]); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id); + } + }); + }, + { + rootMargin: "-20% 0% -35% 0%", + threshold: 0, + } + ); + + document.querySelectorAll("section[id]").forEach((section) => { + observer.observe(section); + }); + + return () => { + observer.disconnect(); + }; + }, []); + + // Auto-expand sections with matching search results + useEffect(() => { + if (searchQuery) { + const matchingSections = sections.reduce((acc, section) => { + const sectionMatches = section.title.toLowerCase().includes(searchQuery.toLowerCase()); + const subsectionMatches = section.subsections?.some((subsection) => + subsection.title.toLowerCase().includes(searchQuery.toLowerCase()) + ); + if (sectionMatches || subsectionMatches) { + acc[section.id] = true; + } + return acc; + }, {} as Record); + + setExpandedSections((prev) => ({ + ...prev, + ...matchingSections, + })); + } + }, [searchQuery]); + + const scrollToSection = (id: string) => { + const element = document.getElementById(id); + if (element) { + const yOffset = -100; + const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset; + window.scrollTo({ top: y, behavior: "smooth" }); + } + }; + + const toggleSection = (sectionId: string) => { + setExpandedSections((prev) => ({ + ...prev, + [sectionId]: !prev[sectionId], + })); + }; + + const filteredSections = sections.map((section) => ({ + ...section, + subsections: section.subsections?.filter((subsection) => + subsection.title.toLowerCase().includes(searchQuery.toLowerCase()) + ), + matches: section.title.toLowerCase().includes(searchQuery.toLowerCase()), + })); + + return ( + + ); +} diff --git a/apps/ui-playground/app/globals.css b/apps/ui-playground/app/globals.css index 4c25942b20f5f0..cf3960d19532ec 100644 --- a/apps/ui-playground/app/globals.css +++ b/apps/ui-playground/app/globals.css @@ -40,8 +40,7 @@ --cal-text-info: hsla(228, 56%, 33%, 1); --cal-text-success: hsla(133, 34%, 24%, 1); --cal-text-attention: hsla(16, 62%, 28%, 1); - --cal-text-error: hsla(2, 55%, 30%, 1); - + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shinanigans -> These will be computed for the users theme at runtime. */ diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx index a521089ba04653..509deb41dc8d27 100644 --- a/apps/ui-playground/app/layout.tsx +++ b/apps/ui-playground/app/layout.tsx @@ -1,31 +1,30 @@ +import { TooltipProvider } from "@radix-ui/react-tooltip"; import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Inter, Geist_Mono } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const inter = Inter({ subsets: ["latin"], + variable: "--font-inter", }); const geistMono = Geist_Mono({ - variable: "--font-geist-mono", subsets: ["latin"], + variable: "--font-geist-mono", }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "UI Playground", + description: "A playground for Cal.com UI components", }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - {children} + + {children} + ); } diff --git a/apps/ui-playground/package.json b/apps/ui-playground/package.json index 2ea3dbc6c57b6d..45f32df0a92079 100644 --- a/apps/ui-playground/package.json +++ b/apps/ui-playground/package.json @@ -12,6 +12,7 @@ "@calcom/config": "*", "@calcom/lib": "*", "@calcom/ui": "*", + "@radix-ui/react-tooltip": "^1.1.7", "next": "15.1.6", "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index 7a9021fe68dbc0..2cfa9ee88adc5e 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -40,8 +40,7 @@ --cal-text-info: hsla(228, 56%, 33%, 1); --cal-text-success: hsla(133, 34%, 24%, 1); --cal-text-attention: hsla(16, 62%, 28%, 1); - --cal-text-error: hsla(2, 55%, 30%, 1); - + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shinanigans -> These will be computed for the users theme at runtime. */ diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js index eacd9083a48ed7..7308dfeff44910 100644 --- a/packages/config/tailwind-preset.js +++ b/packages/config/tailwind-preset.js @@ -119,6 +119,11 @@ module.exports = { focus: "var(--cal-border-focus, #1A1A1A)", "cal-bg": "var(--cal-bg, white)", "cal-bg-muted": "var(--cal-bg-muted)", + semantic: { + danager: { + subtle: colors.red[200], + }, + }, }, textColor: { emphasis: "var(--cal-text-emphasis, #111827)", @@ -211,6 +216,21 @@ module.exports = { backgroundImage: { "gradient-primary": "radial-gradient(162.05% 170% at 109.58% 35%, #667593 0%, #E3E3E3 100%)", }, + boxShadow: { + "solid-gray-rested": + "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.40) inset", + "solid-gray-hover": + "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.40) inset", + "solid-gray-active": + "0px 3px 1px 0px rgba(0, 0, 0, 0.40) inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.40) inset", + "outline-gray-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)", + "outline-gray-hover": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)", + "outline-gray-active": "0px 2px 1px 0px rgba(0, 0, 0, 0.05) inset", + "outline-red-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)", + "outline-red-hover": "0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 3px 0px rgba(0, 0, 0, 0.08)", + "outline-red-active": + "0px 1px 1px 0px rgba(127, 29, 29, 0.06), 0px 0px 3px 0px rgba(127, 29, 29, 0.08), 0px 2px 2px 1px rgba(127, 29, 29, 0.06) inset", + }, }, }, plugins: [ @@ -232,6 +252,9 @@ module.exports = { }, }); }), + plugin(function ({ addVariant }) { + addVariant("enabled", "&:not(:disabled)"); + }), ], variants: { scrollbar: ["dark"], diff --git a/packages/config/theme/colors.css b/packages/config/theme/colors.css index 528238f007f377..344416086436d4 100644 --- a/packages/config/theme/colors.css +++ b/packages/config/theme/colors.css @@ -32,8 +32,7 @@ --cal-text-info: #253985; --cal-text-success: #285231; --cal-text-attention: #73321b; - --cal-text-error: #752522; - + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shenanigans -> These will be computed for the users theme at runtime. */ diff --git a/packages/platform/atoms/globals.css b/packages/platform/atoms/globals.css index 2f9bcdaf45c888..34cf5288c61d32 100644 --- a/packages/platform/atoms/globals.css +++ b/packages/platform/atoms/globals.css @@ -73,8 +73,7 @@ --cal-text-info: #253985; --cal-text-success: #285231; --cal-text-attention: #73321b; - --cal-text-error: #752522; - + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shinanigans -> These will be computed for the users theme at runtime. */ @@ -13346,7 +13345,7 @@ select { --cal-text-info: #253883; --cal-text-success: #285231; --cal-text-attention: #74331b; - --cal-text-error: #772522; + --cal-text-error: #7F1D1D; --cal-brand: #111827; --cal-brand-emphasis: #0f0f0f; --cal-brand-text: #fff diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx index 2458742a150234..7cd4f174878577 100644 --- a/packages/ui/components/button/Button.tsx +++ b/packages/ui/components/button/Button.tsx @@ -40,7 +40,7 @@ export type ButtonProps = ButtonBaseProps & ); export const buttonClasses = cva( - "whitespace-nowrap inline-flex items-center text-sm font-medium relative rounded-md transition disabled:cursor-not-allowed", + "whitespace-nowrap inline-flex items-center text-sm font-medium relative rounded-[10px] transition disabled:cursor-not-allowed", { variants: { variant: { @@ -49,19 +49,114 @@ export const buttonClasses = cva( fab: "rounded-full justify-center md:rounded-md radix-state-open:rotate-45 md:radix-state-open:rotate-0 radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none", }, color: { - primary: - "bg-brand-default hover:bg-brand-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-default text-brand disabled:bg-brand-subtle disabled:text-brand-subtle disabled:opacity-40 disabled:hover:bg-brand-subtle disabled:hover:text-brand-default disabled:hover:opacity-40", - secondary: - "text-emphasis border border-default bg-default hover:bg-muted hover:border-emphasis focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-opacity-30 disabled:hover:text-muted disabled:hover:border-subtle disabled:hover:bg-default", - minimal: - "text-emphasis hover:bg-subtle focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis disabled:border-subtle disabled:bg-opacity-30 disabled:text-muted disabled:hover:bg-transparent disabled:hover:text-muted disabled:hover:border-subtle", - destructive: - "border border-default text-emphasis hover:text-red-700 dark:hover:text-red-100 focus-visible:text-red-700 hover:border-red-100 focus-visible:border-red-100 hover:bg-error focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700 disabled:bg-red-100 disabled:border-red-200 disabled:text-red-700 disabled:hover:border-red-200 disabled:opacity-40", + primary: [ + // Base colors + "bg-brand-default", + "text-brand", + // Hover state + "hover:bg-brand-emphasis", + // Focus state + "focus-visible:outline-none", + "focus-visible:ring-2", + "focus-visible:ring-offset", + "focus-visible:ring-brand-default", + // Border + "border border-brand-default", + // Disabled + "disabled:opacity-30", + // Shadows and effects + "shadow-solid-gray-rested", + "enabled:hover:shadow-solid-gray-hover", + "enabled:active:shadow-solid-gray-active", + "transition-shadow", + "duration-200", + ], + + secondary: [ + // Base colors and border + "bg-default", + "text-default", + "border", + "border-default", + // Hover state + "enabled:hover:bg-muted", + "enabled:hover:border-emphasis", + "enabled:hover:text-emphasis", + // Disabled + "disabled:opacity-30", + // Focus state + "focus-visible:bg-subtle", + "focus-visible:outline-none", + "focus-visible:ring-2", + "focus-visible:ring-offset", + "focus-visible:ring-empthasis", + // Shadows and effects + "shadow-outline-gray-rested", + "enabled:hover:shadow-outline-gray-hover", + "enabled:active:shadow-outline-gray-active", + "transition-shadow", + "duration-200", + ], + + minimal: [ + // Base color + "text-subtle", + "border border-transparent", + // Hover + "enabled:hover:bg-subtle", + "enabled:hover:text-emphasis", + "enabled:hover:border-subtle hover:border", + // Disabled + "disabled:opacity-30", + // Focus + "focus-visible:bg-subtle", + "focus-visible:outline-none", + "focus-visible:ring-2", + "focus-visible:ring-offset", + "focus-visible:ring-empthasis", + + // Shadows and effects + "enabled:active:shadow-outline-gray-active", + "transition-shadow", + "duration-200", + ], + + destructive: [ + // Base colors and border + "border", + "border-default", + "text-error", + // Hover state + "dark:hover:text-red-100", + "hover:border-semantic-danager-subtle", + "hover:bg-error", + // Focus state + "focus-visible:text-red-700", + "focus-visible:border-red-100", + "focus-visible:bg-error", + "focus-visible:outline-none", + "focus-visible:ring-2", + "focus-visible:ring-offset", + "focus-visible:ring-red-700", + // Disabled state + "disabled:bg-red-100", + "disabled:border-red-200", + "disabled:text-red-700", + "disabled:hover:border-red-200", + "disabled:opacity-30", + // Shadows and effects + "shadow-outline-red-rested", + "enabled:hover:shadow-outline-red-hover", + "enabled:active:shadow-outline-red-active", + "transition-shadow", + "duration-200", + ], }, size: { - sm: "px-3 py-2 leading-4 rounded-md" /** For backwards compatibility */, - base: "h-9 px-4 py-2.5 ", - lg: "h-[36px] px-4 py-2.5 ", + xs: "h-6 px-2 py-2 leading-none text-xs rounded-md", + sm: "h-7 px-2 py-1.5 leading-none text-sm" /** For backwards compatibility */, + base: "px-2.5 py-2 text-sm leading-none", + lg: "px-4 py-2.5 ", }, loading: { true: "cursor-wait", @@ -72,7 +167,7 @@ export const buttonClasses = cva( { loading: true, color: "primary", - className: "bg-brand-subtle text-brand-subtle", + className: "opacity-30", }, // Secondary variants { @@ -180,7 +275,11 @@ export const Button = forwardRef ))} - {variant === "fab" ? {props.children} : props.children} + {variant === "fab" ? ( + {props.children} + ) : ( + {props.children} + )} {loading && (
Date: Thu, 30 Jan 2025 12:13:08 +0100 Subject: [PATCH 007/143] checkbox --- .../app/_components/CheckboxDemo.tsx | 94 +++++++++++++++++++ .../app/_components/PageContent.tsx | 13 ++- .../app/_components/TableOfContents.tsx | 10 ++ .../ui/components/form/checkbox/Checkbox.tsx | 19 +++- 4 files changed, 129 insertions(+), 7 deletions(-) create mode 100644 apps/ui-playground/app/_components/CheckboxDemo.tsx diff --git a/apps/ui-playground/app/_components/CheckboxDemo.tsx b/apps/ui-playground/app/_components/CheckboxDemo.tsx new file mode 100644 index 00000000000000..ebd208542a4ba4 --- /dev/null +++ b/apps/ui-playground/app/_components/CheckboxDemo.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { useState } from "react"; + +import { Checkbox, CheckboxField } from "@calcom/ui"; + +export default function CheckboxDemo() { + const [isOpen, setIsOpen] = useState(true); + + return ( +
+ + + {isOpen && ( +
+ {/* Basic Checkboxes */} +
+

Basic

+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ + {/* With Description */} +
+

With Description

+
+ + + +
+
+ + {/* Label Positions */} +
+

Label Positions

+
+ +
+ +
+
+
+ + {/* With Information Icon */} +
+

With Information Icon

+ +
+
+ )} +
+ ); +} diff --git a/apps/ui-playground/app/_components/PageContent.tsx b/apps/ui-playground/app/_components/PageContent.tsx index bdb0310534dba6..136f9e3eb553ff 100644 --- a/apps/ui-playground/app/_components/PageContent.tsx +++ b/apps/ui-playground/app/_components/PageContent.tsx @@ -7,6 +7,7 @@ import { Button } from "@calcom/ui"; import AvatarDemo from "./AvatarDemo"; import BadgeDemo from "./BadgeDemo"; import ButtonDemo from "./ButtonDemo"; +import CheckboxDemo from "./CheckboxDemo"; import TableOfContents from "./TableOfContents"; export default function PageContent() { @@ -14,11 +15,11 @@ export default function PageContent() { return (
-
+
@@ -28,7 +29,7 @@ export default function PageContent() {
{/* Sidebar */}
-
+
@@ -38,12 +39,18 @@ export default function PageContent() {
+
+
+ +
+ +
diff --git a/apps/ui-playground/app/_components/TableOfContents.tsx b/apps/ui-playground/app/_components/TableOfContents.tsx index b9030857f2bbc4..0415abbe96289d 100644 --- a/apps/ui-playground/app/_components/TableOfContents.tsx +++ b/apps/ui-playground/app/_components/TableOfContents.tsx @@ -46,6 +46,16 @@ const sections: Section[] = [ { id: "button-link", title: "As Link" }, ], }, + { + id: "checkbox", + title: "Checkbox", + subsections: [ + { id: "checkbox-basic", title: "Basic" }, + { id: "checkbox-description", title: "With Description" }, + { id: "checkbox-label", title: "Label Positions" }, + { id: "checkbox-info", title: "With Information Icon" }, + ], + }, ]; const STORAGE_KEY = "ui-playground-toc-state"; diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx index d951af317c493b..c63a5fe9cbc671 100644 --- a/packages/ui/components/form/checkbox/Checkbox.tsx +++ b/packages/ui/components/form/checkbox/Checkbox.tsx @@ -10,7 +10,7 @@ import { Icon } from "../../icon"; type Props = InputHTMLAttributes & { label?: React.ReactNode; - description: string; + description?: string; descriptionAsLabel?: boolean; informationIconText?: string; error?: boolean; @@ -63,7 +63,7 @@ const CheckboxField = forwardRef(
)}
-
+
{React.createElement( descriptionAsLabel ? "label" : "div", { @@ -94,14 +94,25 @@ const CheckboxField = forwardRef(
{descriptionAsSafeHtml ? ( ) : ( - {description} + + {description} + )} )} From 23bcafefd5e018a29f7cc4880289afb5dc2e05d8 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 14:37:25 +0100 Subject: [PATCH 008/143] dropdown v3 --- .../app/_components/DropdownDemo.tsx | 195 ++++++++++++++++++ .../app/_components/PageContent.tsx | 5 + .../app/_components/TableOfContents.tsx | 9 + packages/config/tailwind-preset.js | 4 +- packages/ui/components/dropdown/Dropdown.tsx | 20 +- 5 files changed, 222 insertions(+), 11 deletions(-) create mode 100644 apps/ui-playground/app/_components/DropdownDemo.tsx diff --git a/apps/ui-playground/app/_components/DropdownDemo.tsx b/apps/ui-playground/app/_components/DropdownDemo.tsx new file mode 100644 index 00000000000000..800604f0d0c10e --- /dev/null +++ b/apps/ui-playground/app/_components/DropdownDemo.tsx @@ -0,0 +1,195 @@ +"use client"; + +import { useState } from "react"; + +import type { IconName } from "@calcom/ui"; +import { Avatar } from "@calcom/ui"; +import { Button } from "@calcom/ui"; +import { + Dropdown, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownItem, + DropdownMenuLabel, + DropdownMenuSeparator, +} from "@calcom/ui/dropdown"; + +export default function DropdownDemo() { + const [isOpen, setIsOpen] = useState(true); + + const menuItems = [ + { label: "View", icon: "eye", kbd: "V" }, + { label: "Edit", icon: "edit", kbd: "E" }, + { label: "Share", icon: "share", kbd: "⌘S" }, + { label: "Delete", icon: "trash", destructive: true, kbd: "⌘⌫" }, + ] as { + label: string; + icon: IconName; + destructive?: boolean; + kbd?: string; + }[]; + + return ( +
+ + + {isOpen && ( +
+ {/* Button Trigger */} + + + {/* Avatar Trigger */} + + + +
+ )} +
+ ); +} diff --git a/apps/ui-playground/app/_components/PageContent.tsx b/apps/ui-playground/app/_components/PageContent.tsx index 136f9e3eb553ff..676990e0213fcc 100644 --- a/apps/ui-playground/app/_components/PageContent.tsx +++ b/apps/ui-playground/app/_components/PageContent.tsx @@ -8,6 +8,7 @@ import AvatarDemo from "./AvatarDemo"; import BadgeDemo from "./BadgeDemo"; import ButtonDemo from "./ButtonDemo"; import CheckboxDemo from "./CheckboxDemo"; +import DropdownDemo from "./DropdownDemo"; import TableOfContents from "./TableOfContents"; export default function PageContent() { @@ -51,6 +52,10 @@ export default function PageContent() {
+ +
diff --git a/apps/ui-playground/app/_components/TableOfContents.tsx b/apps/ui-playground/app/_components/TableOfContents.tsx index 0415abbe96289d..393541da3a16d6 100644 --- a/apps/ui-playground/app/_components/TableOfContents.tsx +++ b/apps/ui-playground/app/_components/TableOfContents.tsx @@ -56,6 +56,15 @@ const sections: Section[] = [ { id: "checkbox-info", title: "With Information Icon" }, ], }, + { + id: "dropdown", + title: "Dropdown", + subsections: [ + { id: "dropdown-button", title: "Button Trigger" }, + { id: "dropdown-avatar", title: "Avatar Trigger" }, + { id: "dropdown-sizes", title: "Different Sizes" }, + ], + }, ]; const STORAGE_KEY = "ui-playground-toc-state"; diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js index 7308dfeff44910..23a7880600fdd5 100644 --- a/packages/config/tailwind-preset.js +++ b/packages/config/tailwind-preset.js @@ -176,9 +176,6 @@ module.exports = { drawerSlideLeftAndFade: "drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)", drawerSlideRightAndFade: "drawerSlideRightAndFade 150ms ease-in", }, - boxShadow: { - dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)", - }, borderWidth: { "booker-width": "var(--cal-border-booker-width, 1px)", }, @@ -217,6 +214,7 @@ module.exports = { "gradient-primary": "radial-gradient(162.05% 170% at 109.58% 35%, #667593 0%, #E3E3E3 100%)", }, boxShadow: { + dropdown: "0px 5px 20px 0px rgba(0, 0, 0, 0.10), 0px 10px 40px 0px rgba(0, 0, 0, 0.03)", "solid-gray-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.40) inset", "solid-gray-hover": diff --git a/packages/ui/components/dropdown/Dropdown.tsx b/packages/ui/components/dropdown/Dropdown.tsx index b973b8bf25ae6d..6f3d21b897f4d5 100644 --- a/packages/ui/components/dropdown/Dropdown.tsx +++ b/packages/ui/components/dropdown/Dropdown.tsx @@ -39,8 +39,8 @@ export const DropdownMenuContent = forwardRef*:first-child]:mt-1 [&>*:last-child]:mb-1", + "shadow-dropdown bg-default border-subtle relative z-10 origin-top-right space-y-1 rounded-xl border p-1 text-sm", + "w-[220px] [&>*:first-child]:mt-1 [&>*:last-child]:mb-1", props.className )} ref={forwardedRef}> @@ -53,7 +53,10 @@ DropdownMenuContent.displayName = "DropdownMenuContent"; type DropdownMenuLabelProps = ComponentProps<(typeof DropdownMenuPrimitive)["Label"]>; export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => ( - + ); type DropdownMenuItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>; @@ -129,6 +132,7 @@ type DropdownItemProps = { color?: ButtonColor; StartIcon?: IconName; CustomStartIcon?: React.ReactNode; + kbd?: string; EndIcon?: IconName; href?: string; disabled?: boolean; @@ -161,15 +165,15 @@ export const DropdownItem = (props: DropdownItemProps) => { <> {CustomStartIcon || (StartIcon && )} -
{children}
+
+ {children} +
{EndIcon && } From 11e13457cdf8e0aacdba72527099157d5be097d8 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 14:40:46 +0100 Subject: [PATCH 009/143] load icons --- apps/ui-playground/app/layout.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx index 509deb41dc8d27..6d54c260081358 100644 --- a/apps/ui-playground/app/layout.tsx +++ b/apps/ui-playground/app/layout.tsx @@ -2,6 +2,8 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"; import type { Metadata } from "next"; import { Inter, Geist_Mono } from "next/font/google"; +import { IconSprites } from "@calcom/ui"; + import "./globals.css"; const inter = Inter({ @@ -24,6 +26,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {children} + ); From 3bc44f6b096584da47955aa135eae39f63a3441f Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 14:53:01 +0100 Subject: [PATCH 010/143] fix design sections --- .../app/_components/AvatarDemo.tsx | 137 ++++---- .../app/_components/BadgeDemo.tsx | 31 +- .../app/_components/ButtonDemo.tsx | 206 +++++------- .../app/_components/CheckboxDemo.tsx | 26 +- .../app/_components/DemoSection.tsx | 46 +++ .../app/_components/DropdownDemo.tsx | 297 ++++++++---------- 6 files changed, 358 insertions(+), 385 deletions(-) create mode 100644 apps/ui-playground/app/_components/DemoSection.tsx diff --git a/apps/ui-playground/app/_components/AvatarDemo.tsx b/apps/ui-playground/app/_components/AvatarDemo.tsx index 6909ffab44330a..2b1d5f4d7a6f18 100644 --- a/apps/ui-playground/app/_components/AvatarDemo.tsx +++ b/apps/ui-playground/app/_components/AvatarDemo.tsx @@ -1,94 +1,77 @@ "use client"; -import { useState } from "react"; - import { Avatar } from "@calcom/ui"; +import DemoSection, { DemoSubSection } from "./DemoSection"; + export default function AvatarDemo() { - const [isOpen, setIsOpen] = useState(true); const sizes = ["xs", "xsm", "sm", "md", "mdLg", "lg", "xl"] as const; const sampleImage = "https://app.cal.com/api/avatar/e9f012f2-8516-4012-b967-6fe1844a7b40.png"; return ( -
- - - {isOpen && ( -
- {/* Size variations */} -
-

Size Variations

-
- {sizes.map((size) => ( -
- - {size} -
- ))} + + {/* Size variations */} + +
+ {sizes.map((size) => ( +
+ + {size}
-
+ ))} +
+ - {/* With and without image */} -
-

With/Without Image

-
-
- - With Image -
-
- - Without Image -
-
-
+ {/* With and without image */} + +
+
+ + With Image +
+
+ + Without Image +
+
+ - {/* With tooltip */} -
-

With Tooltip

-
-
- - Hover to see tooltip -
-
-
+ {/* With tooltip */} + +
+
+ + Hover to see tooltip +
+
+ - {/* With link */} - + {/* With link */} + +
+
+ + Clickable +
+
+ - {/* With indicator */} -
-

With Indicator

-
-
- - } - /> - With Status Indicator -
-
-
+ {/* With indicator */} + +
+
+ + } + /> + With Status Indicator +
- )} -
+ + ); } diff --git a/apps/ui-playground/app/_components/BadgeDemo.tsx b/apps/ui-playground/app/_components/BadgeDemo.tsx index 7d9f49dc97af84..ea83efbd55b8a1 100644 --- a/apps/ui-playground/app/_components/BadgeDemo.tsx +++ b/apps/ui-playground/app/_components/BadgeDemo.tsx @@ -4,6 +4,8 @@ import { useState } from "react"; import { Badge } from "@calcom/ui"; +import DemoSection, { DemoSubSection } from "./DemoSection"; + export default function BadgeDemo() { const [isOpen, setIsOpen] = useState(true); @@ -32,11 +34,10 @@ export default function BadgeDemo() { {isOpen && ( -
+ {/* Variants with Sizes */} {variants.map((variant) => ( -
-

{variant}

+
{sizes.map((size) => (
@@ -47,12 +48,11 @@ export default function BadgeDemo() {
))}
-
+ ))} {/* With Icons */} -
-

With Icons

+
{variants.map((variant) => (
@@ -63,11 +63,10 @@ export default function BadgeDemo() {
))}
-
+ {/* With Dots */} -
-

With Dots

+
{variants.map((variant) => (
@@ -78,11 +77,10 @@ export default function BadgeDemo() {
))}
-
+ {/* Interactive */} -
-

Interactive

+
{variants.map((variant) => (
@@ -93,11 +91,10 @@ export default function BadgeDemo() {
))}
-
+ {/* Rounded */} -
-

Rounded

+
{variants.map((variant) => (
@@ -108,8 +105,8 @@ export default function BadgeDemo() {
))}
-
-
+ + )}
); diff --git a/apps/ui-playground/app/_components/ButtonDemo.tsx b/apps/ui-playground/app/_components/ButtonDemo.tsx index cfe0f863f94aea..5a6113aeb2b6a3 100644 --- a/apps/ui-playground/app/_components/ButtonDemo.tsx +++ b/apps/ui-playground/app/_components/ButtonDemo.tsx @@ -1,143 +1,111 @@ "use client"; -import { useState } from "react"; - import { Button } from "@calcom/ui"; -export default function ButtonDemo() { - const [isOpen, setIsOpen] = useState(true); +import DemoSection, { DemoSubSection } from "./DemoSection"; +export default function ButtonDemo() { const variants = ["button", "icon"] as const; const colors = ["primary", "secondary", "minimal", "destructive"] as const; const sizes = ["xs", "sm", "base", "lg"] as const; return ( -
- - - {isOpen && ( -
- {/* Variants with Colors */} - {variants.map((variant) => ( -
-

- {variant === "button" ? "Default" : variant} -

-
- {colors.map((color) => ( -
-

{color}

-
- {sizes.map((size) => ( -
- - {size} -
- ))} + + {/* Variants with Colors */} + {variants.map((variant) => ( + +
+ {colors.map((color) => ( +
+

{color}

+
+ {sizes.map((size) => ( +
+ + {size}
-
- ))} + ))} +
-
- ))} + ))} +
+ + ))} - {/* With Icons */} -
-

With Icons

-
- {colors.map((color) => ( -
- - Start Icon -
- ))} -
-
- {colors.map((color) => ( -
- - End Icon -
- ))} + {/* With Icons */} + +
+ {colors.map((color) => ( +
+ + Start Icon
-
- - {/* Loading State */} -
-

Loading State

-
- {colors.map((color) => ( -
- - Loading -
- ))} + ))} +
+
+ {colors.map((color) => ( +
+ + End Icon
-
+ ))} +
+ - {/* Disabled State */} -
-

Disabled State

-
- {colors.map((color) => ( -
- - Disabled -
- ))} + {/* Loading State */} + +
+ {colors.map((color) => ( +
+ + Loading
-
+ ))} +
+ - {/* With Tooltip -
-

With Tooltip

-
- {colors.map((color) => ( -
- - Tooltip -
- ))} + {/* Disabled State */} + +
+ {colors.map((color) => ( +
+ + Disabled
-
*/} + ))} +
+ - {/* As Link */} - + ))}
- )} -
+ + ); } diff --git a/apps/ui-playground/app/_components/CheckboxDemo.tsx b/apps/ui-playground/app/_components/CheckboxDemo.tsx index ebd208542a4ba4..202e79950c8c4b 100644 --- a/apps/ui-playground/app/_components/CheckboxDemo.tsx +++ b/apps/ui-playground/app/_components/CheckboxDemo.tsx @@ -4,6 +4,8 @@ import { useState } from "react"; import { Checkbox, CheckboxField } from "@calcom/ui"; +import DemoSection, { DemoSubSection } from "./DemoSection"; + export default function CheckboxDemo() { const [isOpen, setIsOpen] = useState(true); @@ -17,10 +19,9 @@ export default function CheckboxDemo() { {isOpen && ( -
+ {/* Basic Checkboxes */} -
-

Basic

+
@@ -38,11 +39,10 @@ export default function CheckboxDemo() {
-
+ {/* With Description */} -
-

With Description

+
-
+ {/* Label Positions */} -
-

Label Positions

+
- + {/* With Information Icon */} -
-

With Information Icon

+ -
-
+ + )}
); diff --git a/apps/ui-playground/app/_components/DemoSection.tsx b/apps/ui-playground/app/_components/DemoSection.tsx new file mode 100644 index 00000000000000..a1c0b188898130 --- /dev/null +++ b/apps/ui-playground/app/_components/DemoSection.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { useState } from "react"; + +import { Badge } from "@calcom/ui"; + +interface DemoSectionProps { + title: string; + children: React.ReactNode; + approvedByDesign?: boolean; +} + +export default function DemoSection({ title, children, approvedByDesign }: DemoSectionProps) { + const [isOpen, setIsOpen] = useState(true); + + return ( +
+ + + {isOpen &&
{children}
} +
+ ); +} + +interface DemoSubSectionProps { + id: string; + title: string; + children: React.ReactNode; +} + +export function DemoSubSection({ id, title, children }: DemoSubSectionProps) { + return ( +
+

{title}

+ {children} +
+ ); +} diff --git a/apps/ui-playground/app/_components/DropdownDemo.tsx b/apps/ui-playground/app/_components/DropdownDemo.tsx index 800604f0d0c10e..1490ff3eaeb75b 100644 --- a/apps/ui-playground/app/_components/DropdownDemo.tsx +++ b/apps/ui-playground/app/_components/DropdownDemo.tsx @@ -1,7 +1,5 @@ "use client"; -import { useState } from "react"; - import type { IconName } from "@calcom/ui"; import { Avatar } from "@calcom/ui"; import { Button } from "@calcom/ui"; @@ -14,9 +12,9 @@ import { DropdownMenuSeparator, } from "@calcom/ui/dropdown"; -export default function DropdownDemo() { - const [isOpen, setIsOpen] = useState(true); +import DemoSection, { DemoSubSection } from "./DemoSection"; +export default function DropdownDemo() { const menuItems = [ { label: "View", icon: "eye", kbd: "V" }, { label: "Edit", icon: "edit", kbd: "E" }, @@ -30,166 +28,149 @@ export default function DropdownDemo() { }[]; return ( -
- + + {/* Button Trigger */} + +
+ {/* Default Button */} +
+ + + + + + Actions + {menuItems.map((item) => ( + + {item.label} + + ))} + + + Default +
- {isOpen && ( -
- {/* Button Trigger */} -
- + {/* Avatar Trigger */} + +
+
+ + + + + + Profile + + View Profile + Settings + + Sign out + + + Avatar Menu +
+
+ - {/* Avatar Trigger */} - + {/* More Examples */} + +
+
+ + + + + + My account + Profile + Billing + Settings + Keyboard Shortcuts + + Team + Invite users + New team + + Github + Support + API + + +
- + + + + + + Rename + Duplicate + Move + Delete + +
- )} -
+ + ); } From c89b6b4abad6f9b8a1697026155c9e0b01c9034b Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 14:57:15 +0100 Subject: [PATCH 011/143] fix icon gap --- packages/ui/components/button/Button.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx index 7cd4f174878577..42b5b29f1433cc 100644 --- a/packages/ui/components/button/Button.tsx +++ b/packages/ui/components/button/Button.tsx @@ -40,7 +40,7 @@ export type ButtonProps = ButtonBaseProps & ); export const buttonClasses = cva( - "whitespace-nowrap inline-flex items-center text-sm font-medium relative rounded-[10px] transition disabled:cursor-not-allowed", + "whitespace-nowrap inline-flex items-center text-sm font-medium relative rounded-[10px] transition disabled:cursor-not-allowed gap-1", { variants: { variant: { @@ -258,10 +258,7 @@ export const Button = forwardRef {variant === "fab" ? ( <> - + ) : ( @@ -269,7 +266,7 @@ export const Button = forwardRef )} @@ -312,7 +309,7 @@ export const Button = forwardRef )} From 1944f4321342487e5b0ee49e1ff75fbc6b2fc7ca Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 15:06:15 +0100 Subject: [PATCH 012/143] fix --- apps/ui-playground/app/layout.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx index 6d54c260081358..d18ea30f7e4222 100644 --- a/apps/ui-playground/app/layout.tsx +++ b/apps/ui-playground/app/layout.tsx @@ -1,3 +1,5 @@ +"use client"; + import { TooltipProvider } from "@radix-ui/react-tooltip"; import type { Metadata } from "next"; import { Inter, Geist_Mono } from "next/font/google"; From f99f747a074770fded2dce959a487e079602f5ca Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 15:08:49 +0100 Subject: [PATCH 013/143] remove client component from rsc --- apps/ui-playground/app/_components/PageContent.tsx | 3 ++- apps/ui-playground/app/layout.tsx | 5 ----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/ui-playground/app/_components/PageContent.tsx b/apps/ui-playground/app/_components/PageContent.tsx index 676990e0213fcc..b0a93112adfcd2 100644 --- a/apps/ui-playground/app/_components/PageContent.tsx +++ b/apps/ui-playground/app/_components/PageContent.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; -import { Button } from "@calcom/ui"; +import { Button, IconSprites } from "@calcom/ui"; import AvatarDemo from "./AvatarDemo"; import BadgeDemo from "./BadgeDemo"; @@ -59,6 +59,7 @@ export default function PageContent() {
+ ); } diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx index d18ea30f7e4222..509deb41dc8d27 100644 --- a/apps/ui-playground/app/layout.tsx +++ b/apps/ui-playground/app/layout.tsx @@ -1,11 +1,7 @@ -"use client"; - import { TooltipProvider } from "@radix-ui/react-tooltip"; import type { Metadata } from "next"; import { Inter, Geist_Mono } from "next/font/google"; -import { IconSprites } from "@calcom/ui"; - import "./globals.css"; const inter = Inter({ @@ -28,7 +24,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {children} - ); From e64a84fbd152e9fe3f1f6ee7bbedb84ddedcee1e Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 16:39:17 +0100 Subject: [PATCH 014/143] use peer as avatar --- apps/ui-playground/app/_components/AvatarDemo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/ui-playground/app/_components/AvatarDemo.tsx b/apps/ui-playground/app/_components/AvatarDemo.tsx index 2b1d5f4d7a6f18..cf279001d93512 100644 --- a/apps/ui-playground/app/_components/AvatarDemo.tsx +++ b/apps/ui-playground/app/_components/AvatarDemo.tsx @@ -6,7 +6,7 @@ import DemoSection, { DemoSubSection } from "./DemoSection"; export default function AvatarDemo() { const sizes = ["xs", "xsm", "sm", "md", "mdLg", "lg", "xl"] as const; - const sampleImage = "https://app.cal.com/api/avatar/e9f012f2-8516-4012-b967-6fe1844a7b40.png"; + const sampleImage = "https://cal.com/stakeholder/peer.jpg"; return ( From a37a9510d75086f3c3b19265c779e06d62670feb Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 30 Jan 2025 17:05:03 +0100 Subject: [PATCH 015/143] gif --- apps/ui-playground/app/_components/TableOfContents.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/ui-playground/app/_components/TableOfContents.tsx b/apps/ui-playground/app/_components/TableOfContents.tsx index 393541da3a16d6..98698eea2c5b53 100644 --- a/apps/ui-playground/app/_components/TableOfContents.tsx +++ b/apps/ui-playground/app/_components/TableOfContents.tsx @@ -174,6 +174,14 @@ export default function TableOfContents() { return ( - ); -} diff --git a/apps/ui-playground/app/_components/TabsDemo.tsx b/apps/ui-playground/app/_components/TabsDemo.tsx deleted file mode 100644 index 32e78109cf9d97..00000000000000 --- a/apps/ui-playground/app/_components/TabsDemo.tsx +++ /dev/null @@ -1,146 +0,0 @@ -"use client"; - -import { useState } from "react"; - -import type { VerticalTabItemProps } from "@calcom/ui"; -import { Icon, HorizontalTabs, VerticalTabs } from "@calcom/ui"; - -import DemoSection, { DemoSubSection } from "./DemoSection"; - -const tabItems = [ - { - name: "Overview", - href: "#", - icon: "grid-3x3", - }, - { - name: "Settings", - href: "#", - icon: "settings", - }, - { - name: "Notifications", - href: "#", - icon: "bell", - info: "3 unread notifications", - }, - { - name: "Profile", - href: "#", - avatar: "https://avatars.githubusercontent.com/u/8019099?v=4", - }, -] as const; - -const verticalTabItems = [ - { - name: "Overview", - href: "#", - icon: "grid-3x3", - }, - { - name: "Settings", - href: "#", - icon: "settings", - children: [ - { - name: "General", - href: "#", - }, - { - name: "Security", - href: "#", - }, - { - name: "Notifications", - href: "#", - }, - ], - }, - { - name: "Notifications", - href: "#", - icon: "bell", - info: "3 unread notifications", - }, - { - name: "Documentation", - href: "https://docs.example.com", - icon: "book-open", - isExternalLink: true, - }, - { - name: "Disabled Tab", - href: "#", - icon: "lock", - disabled: true, - }, -] as VerticalTabItemProps[]; - -export default function TabsDemo() { - const [activeTab, setActiveTab] = useState("Overview"); - - return ( - - -
-
-

Basic

- ({ - ...item, - icon: undefined, - onClick: () => setActiveTab(item.name), - isActive: activeTab === item.name, - }))} - /> -
- -
-

With Icons

- ({ - ...item, - onClick: () => setActiveTab(item.name), - isActive: activeTab === item.name, - }))} - /> -
- -
-

With Actions

- ({ - ...item, - onClick: () => setActiveTab(item.name), - isActive: activeTab === item.name, - }))} - actions={ - - } - /> -
-
- - - -
-
-

Basic

-
- ({ - ...item, - onClick: () => setActiveTab(item.name), - isActive: activeTab === item.name, - }))} - /> -
-
-
- - - ); -} diff --git a/apps/ui-playground/app/_components/TextFieldDemo.tsx b/apps/ui-playground/app/_components/TextFieldDemo.tsx deleted file mode 100644 index e6c9b2de45fac7..00000000000000 --- a/apps/ui-playground/app/_components/TextFieldDemo.tsx +++ /dev/null @@ -1,249 +0,0 @@ -"use client"; - -import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm } from "react-hook-form"; -import { z } from "zod"; - -import { Button, Icon, InputField } from "@calcom/ui"; - -import DemoSection, { DemoSubSection } from "./DemoSection"; - -const formSchema = z.object({ - // Basic fields - basicSmall: z.string().min(2, "Must be at least 2 characters"), - basicMedium: z.string().min(2, "Must be at least 2 characters"), - - // Fields with hints - hintSmall: z.string().min(2, "Must be at least 2 characters"), - hintMedium: z.string().min(2, "Must be at least 2 characters"), - errorSmall: z.string().min(5, "Must be at least 5 characters"), - errorMedium: z.string().min(5, "Must be at least 5 characters"), - multiHintSmall: z.string().min(3, "Must be at least 3 characters"), - multiHintMedium: z.string().min(3, "Must be at least 3 characters"), - - // Fields with add-ons - username: z.string().min(2, "Username must be at least 2 characters"), - domain: z.string().min(2, "Domain must be at least 2 characters"), - website: z.string().url("Must be a valid URL"), - date: z.string().min(1, "Please select a date"), - - // Label variations - leftLabel: z.string().optional(), - rightLabel: z.string().optional(), - noLabel: z.string().optional(), - withHint: z.string().optional(), -}); - -type FormValues = z.infer; - -export default function TextFieldDemo() { - const onSubmit = (data: FormValues) => { - console.log("Form submitted:", data); - }; - - const form = useForm({ - resolver: zodResolver(formSchema), - defaultValues: { - // Basic fields - basicSmall: "", - basicMedium: "", - - // Fields with hints - hintSmall: "", - hintMedium: "", - errorSmall: "", - errorMedium: "", - multiHintSmall: "", - multiHintMedium: "", - - // Fields with add-ons - username: "", - domain: "", - website: "", - date: "", - - // Label variations - leftLabel: "", - rightLabel: "", - noLabel: "", - withHint: "", - }, - }); - - return ( - -
- {/* Basic TextField */} - -
-
- - -
-
- - - {/* With Hints and Errors */} - -
-
-
- - - - - - -
-
-
- - - {/* With Add-ons */} - -
-
- } - {...form.register("username")} - error={form.formState.errors.username?.message} - /> - - - } - onClickAddon={() => alert("Add-on clicked!")} - {...form.register("date")} - error={form.formState.errors.date?.message} - /> -
-
- - - {/* Label Variations */} - -
-
- - - } - {...form.register("noLabel")} - error={form.formState.errors.noLabel?.message} - /> - -
-
- - - {/* Form Actions */} -
- - -
-
- - ); -} diff --git a/apps/ui-playground/app/_components/ThemePicker.tsx b/apps/ui-playground/app/_components/ThemePicker.tsx deleted file mode 100644 index fcc49fb9d33a84..00000000000000 --- a/apps/ui-playground/app/_components/ThemePicker.tsx +++ /dev/null @@ -1,104 +0,0 @@ -"use client"; - -import { ColorPicker } from "@/app/_components/ThemePicker/ColorPicker"; -import { SpacingPicker } from "@/app/_components/ThemePicker/SpacingPicker"; -import { useEffect, useState } from "react"; - -import { Button, Dialog, DialogContent, DialogHeader, DialogTrigger } from "@calcom/ui"; - -import { RadiusPicker } from "./ThemePicker/RadiusPicker"; - -export default function ThemePicker() { - const [isOpen, setIsOpen] = useState(false); - const [savedTheme, setSavedTheme] = useState(() => { - if (typeof window !== "undefined") { - const saved = localStorage.getItem("cal-theme"); - return saved ? JSON.parse(saved) : {}; - } - return {}; - }); - const [previewTheme, setPreviewTheme] = useState(savedTheme); - - // Apply preview theme - useEffect(() => { - if (Object.keys(previewTheme).length > 0) { - Object.entries(previewTheme).forEach(([key, value]) => { - document.documentElement.style.setProperty(key, value as string); - }); - } - }, [previewTheme]); - - // Reset preview when dialog closes - useEffect(() => { - if (!isOpen) { - setPreviewTheme(savedTheme); - } - }, [isOpen, savedTheme]); - - const handleSave = () => { - localStorage.setItem("cal-theme", JSON.stringify(previewTheme)); - setSavedTheme(previewTheme); - setIsOpen(false); - }; - - const handleReset = () => { - const emptyTheme = {}; - localStorage.setItem("cal-theme", JSON.stringify(emptyTheme)); - setSavedTheme(emptyTheme); - setPreviewTheme(emptyTheme); - setIsOpen(false); - }; - - return ( - - - - - - -
-
-

Colors

- setPreviewTheme((prev) => ({ ...prev, ...colorUpdates }))} - /> -
-
-

Spacing

- setPreviewTheme((prev) => ({ ...prev, ...spacingUpdates }))} - /> -
-
-

Border Radius

- setPreviewTheme((prev) => ({ ...prev, ...radiusUpdates }))} - /> -
-
- - -
-
- - - ); -} diff --git a/apps/ui-playground/app/_components/ThemePicker/ColorPicker.tsx b/apps/ui-playground/app/_components/ThemePicker/ColorPicker.tsx deleted file mode 100644 index 91a23cb0d1d6a8..00000000000000 --- a/apps/ui-playground/app/_components/ThemePicker/ColorPicker.tsx +++ /dev/null @@ -1,62 +0,0 @@ -"use client"; - -import { Label } from "@calcom/ui"; - -interface ColorPickerProps { - value: Record; - onChange: (updates: Record) => void; -} - -export function ColorPicker({ value, onChange }: ColorPickerProps) { - const handleColorChange = (variable: string, color: string) => { - onChange({ [variable]: color }); - }; - - return ( -
-
- {/* Standard Colors */} -
- - handleColorChange("--cal-bg", e.target.value)} - className="h-8 w-full cursor-pointer" - /> -
-
- - handleColorChange("--cal-text", e.target.value)} - className="h-8 w-full cursor-pointer" - /> -
-
- - {/* Semantic Colors */} -
-
- - handleColorChange("--cal-bg-semantic-success", e.target.value)} - className="h-8 w-full cursor-pointer" - /> -
-
- - handleColorChange("--cal-bg-semantic-error", e.target.value)} - className="h-8 w-full cursor-pointer" - /> -
-
-
- ); -} diff --git a/apps/ui-playground/app/_components/ThemePicker/RadiusPicker.tsx b/apps/ui-playground/app/_components/ThemePicker/RadiusPicker.tsx deleted file mode 100644 index f6cd513b8436c1..00000000000000 --- a/apps/ui-playground/app/_components/ThemePicker/RadiusPicker.tsx +++ /dev/null @@ -1,76 +0,0 @@ -"use client"; - -import { Label, RangeSlider } from "@calcom/ui"; - -interface RadiusPickerProps { - value: Record; - onChange: (updates: Record) => void; -} - -export function RadiusPicker({ value, onChange }: RadiusPickerProps) { - // Default base unit is 0.25rem (4px) - const baseUnit = parseFloat(value["--cal-radius"]?.replace("rem", "") || "0.25"); - - const handleBaseUnitChange = (newBaseUnit: number) => { - // Create all radius variables based on the base unit - const updates: Record = { - "--cal-radius-none": "0px", - "--cal-radius-sm": `${newBaseUnit * 0.5}rem`, - "--cal-radius": `${newBaseUnit}rem`, - "--cal-radius-md": `${newBaseUnit * 1.5}rem`, - "--cal-radius-lg": `${newBaseUnit * 2}rem`, - "--cal-radius-xl": `${newBaseUnit * 3}rem`, - "--cal-radius-2xl": `${newBaseUnit * 4}rem`, - "--cal-radius-3xl": `${newBaseUnit * 6}rem`, - "--cal-radius-full": "9999px", - }; - onChange(updates); - }; - - return ( -
-
- -
-
- handleBaseUnitChange(values[0] / 4)} - aria-label="Base border radius" - /> -
- {baseUnit}rem - {baseUnit * 16}px -
-
-
-
- - {/* Preview */} -
- -
-
-
- rounded-sm -
-
-
- rounded -
-
-
- rounded-lg -
-
-
- rounded-full -
-
-
-
- ); -} diff --git a/apps/ui-playground/app/_components/ThemePicker/SpacingPicker.tsx b/apps/ui-playground/app/_components/ThemePicker/SpacingPicker.tsx deleted file mode 100644 index 500ec9dab9cce9..00000000000000 --- a/apps/ui-playground/app/_components/ThemePicker/SpacingPicker.tsx +++ /dev/null @@ -1,84 +0,0 @@ -"use client"; - -import { Label, RangeSlider } from "@calcom/ui"; - -interface SpacingPickerProps { - value: Record; - onChange: (updates: Record) => void; -} - -export function SpacingPicker({ value, onChange }: SpacingPickerProps) { - // Default base unit is 0.25rem (4px) - const baseUnit = parseFloat(value["--cal-spacing-1"]?.replace("rem", "") || "0.25"); - - const handleBaseUnitChange = (newBaseUnit: number) => { - // Create all spacing variables based on the base unit - const updates: Record = { - "--cal-spacing-0": "0px", - "--cal-spacing-px": "1px", - "--cal-spacing-0_5": `${newBaseUnit * 0.5}rem`, - "--cal-spacing-1": `${newBaseUnit}rem`, - "--cal-spacing-1_5": `${newBaseUnit * 1.5}rem`, - "--cal-spacing-2": `${newBaseUnit * 2}rem`, - "--cal-spacing-2_5": `${newBaseUnit * 2.5}rem`, - "--cal-spacing-3": `${newBaseUnit * 3}rem`, - "--cal-spacing-3_5": `${newBaseUnit * 3.5}rem`, - "--cal-spacing-4": `${newBaseUnit * 4}rem`, - "--cal-spacing-5": `${newBaseUnit * 5}rem`, - "--cal-spacing-6": `${newBaseUnit * 6}rem`, - "--cal-spacing-7": `${newBaseUnit * 7}rem`, - "--cal-spacing-8": `${newBaseUnit * 8}rem`, - "--cal-spacing-9": `${newBaseUnit * 9}rem`, - "--cal-spacing-10": `${newBaseUnit * 10}rem`, - "--cal-spacing-11": `${newBaseUnit * 11}rem`, - "--cal-spacing-12": `${newBaseUnit * 12}rem`, - "--cal-spacing-14": `${newBaseUnit * 14}rem`, - "--cal-spacing-16": `${newBaseUnit * 16}rem`, - "--cal-spacing-20": `${newBaseUnit * 20}rem`, - }; - onChange(updates); - }; - - return ( -
-
- -
-
- handleBaseUnitChange(values[0] / 4)} - aria-label="Base spacing unit" - /> -
- {baseUnit}rem - {baseUnit * 16}px -
-
-
-
- - {/* Preview */} -
- -
-
-
- p-1 -
-
-
- p-2 -
-
-
- p-4 -
-
-
-
- ); -} diff --git a/apps/ui-playground/app/_components/ToastDemo.tsx b/apps/ui-playground/app/_components/ToastDemo.tsx deleted file mode 100644 index 2b9e0ef9172e38..00000000000000 --- a/apps/ui-playground/app/_components/ToastDemo.tsx +++ /dev/null @@ -1,118 +0,0 @@ -"use client"; - -import { useState } from "react"; - -import { Button } from "@calcom/ui"; -import { showToast, SuccessToast, ErrorToast, WarningToast } from "@calcom/ui"; - -import DemoSection, { DemoSubSection } from "./DemoSection"; - -export default function ToastDemo() { - const variants = ["success", "warning", "error"] as const; - const positions = [ - "top-left", - "top-center", - "top-right", - "bottom-left", - "bottom-center", - "bottom-right", - ] as const; - - const [demoToastId] = useState("demo-toast"); - - const handleShowToast = (variant: (typeof variants)[number], position?: (typeof positions)[number]) => { - showToast(`This is a ${variant} toast message`, variant, { - position: position || "bottom-center", - }); - }; - - const dummyCloseHandler = () => { - // Dummy close handler for demo toasts - }; - - return ( - - {/* Toast Components */} - -
- - - -
- - - {/* Interactive Variants */} - -
- {variants.map((variant) => ( -
- - {variant} -
- ))} -
- - - {/* Positions */} - -
- {positions.map((position) => ( -
- - {position} -
- ))} -
- - - {/* Custom Duration */} - -
-
- - Short -
-
- - Long -
-
- - - ); -} diff --git a/apps/ui-playground/app/api/search/route.ts b/apps/ui-playground/app/api/search/route.ts new file mode 100644 index 00000000000000..e10d2f3b120336 --- /dev/null +++ b/apps/ui-playground/app/api/search/route.ts @@ -0,0 +1,16 @@ +import { componentSource } from "@/app/source"; +import { createSearchAPI } from "fumadocs-core/search/server"; + +const indexes = [componentSource].flatMap((src) => + src.getPages().map((page) => ({ + title: page.data.title, + description: page.data.description, + structuredData: page.data.structuredData, + id: page.url, + url: page.url, + })) +); + +export const { GET } = createSearchAPI("advanced", { + indexes, +}); diff --git a/apps/ui-playground/app/components/icon-swatch.tsx b/apps/ui-playground/app/components/icon-swatch.tsx new file mode 100644 index 00000000000000..0fbc6cce8a8807 --- /dev/null +++ b/apps/ui-playground/app/components/icon-swatch.tsx @@ -0,0 +1,21 @@ +import type { PropsWithChildren } from "react"; + +type Props = { + name: string; +}; +export const Icon: React.FC> = (props) => { + return ( +
+
+ {props.children} +
+ + {"<"} + {props.name} + {"/>"} + +
+ ); +}; + +Icon.displayName = "Icon"; diff --git a/apps/ui-playground/app/components/render.tsx b/apps/ui-playground/app/components/render.tsx new file mode 100644 index 00000000000000..e00a23687d2261 --- /dev/null +++ b/apps/ui-playground/app/components/render.tsx @@ -0,0 +1,56 @@ +"use client"; + +import { type PropsWithChildren, useState } from "react"; + +import className from "@calcom/lib/classNames"; +import { Button } from "@calcom/ui"; + +type Props = { + customCodeSnippet?: string; +}; + +export const RenderComponentWithSnippet: React.FC> = (props) => { + const [open, setOpen] = useState(false); + // const snippet = + // props.customCodeSnippet ?? + // reactElementToJSXString(props.children, { + // showFunctions: true, + // useBooleanShorthandSyntax: true, + + // displayName: (node) => { + // // @ts-ignore + // return node?.type.displayName ?? node?.type ?? "Unknown"; + // }, + // }); + return ( +
+
{props.children}
+ +
+ +
+ +
+
+ {/* 
+            {snippet
+              .split("\n")
+              .map((_line, i) => i + 1)
+              .join("\n")}
+
+ 
{snippet}
*/} +
+
+
+ ); +}; diff --git a/apps/ui-playground/app/components/row.tsx b/apps/ui-playground/app/components/row.tsx new file mode 100644 index 00000000000000..f5ca400e44b73e --- /dev/null +++ b/apps/ui-playground/app/components/row.tsx @@ -0,0 +1,7 @@ +import type { PropsWithChildren } from "react"; + +export const Row: React.FC = (props) => { + return
{props.children}
; +}; + +Row.displayName = "Row"; diff --git a/apps/ui-playground/app/design/[[...slug]]/page.tsx b/apps/ui-playground/app/design/[[...slug]]/page.tsx new file mode 100644 index 00000000000000..fe713fb8d3cead --- /dev/null +++ b/apps/ui-playground/app/design/[[...slug]]/page.tsx @@ -0,0 +1,49 @@ +import { componentSource } from "@/app/source"; +import { createTypeTable } from "fumadocs-typescript/ui"; +import defaultMdxComponents from "fumadocs-ui/mdx"; +import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page"; +import type { Metadata } from "next"; +import { notFound } from "next/navigation"; + +export default async function Page(props: { params: Promise<{ slug?: string[] }> }) { + const params = await props.params; + + const page = componentSource.getPage(params.slug); + + if (!page) { + notFound(); + } + const { AutoTypeTable } = createTypeTable(); + + const MDX = page.data.body; + + return ( + // @ts-expect-error idk why fumadocs doersnt like this + + {page.data.title} + + {page.data.description} + + + {/* @ts-expect-error idk why fumadocs doersnt like this */} + + + + ); +} + +export async function generateStaticParams() { + return componentSource.generateParams(); +} + +export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) { + const page = componentSource.getPage((await params).slug); + if (!page) { + notFound(); + } + + return { + title: page.data.title, + description: page.data.description, + } satisfies Metadata; +} diff --git a/apps/ui-playground/app/design/layout.tsx b/apps/ui-playground/app/design/layout.tsx new file mode 100644 index 00000000000000..331fb23b362b91 --- /dev/null +++ b/apps/ui-playground/app/design/layout.tsx @@ -0,0 +1,17 @@ +import { componentSource } from "@/app/source"; +import { DocsLayout } from "fumadocs-ui/layouts/notebook"; +import type { ReactNode } from "react"; + +import { IconSprites } from "@calcom/ui"; + +import { baseOptions } from "../layout.config"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + // @ts-expect-error weird type check + + {children} + + + ); +} diff --git a/apps/ui-playground/app/favicon.ico b/apps/ui-playground/app/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/apps/ui-playground/app/globals.css b/apps/ui-playground/app/global.css similarity index 100% rename from apps/ui-playground/app/globals.css rename to apps/ui-playground/app/global.css diff --git a/apps/ui-playground/app/layout.config.tsx b/apps/ui-playground/app/layout.config.tsx new file mode 100644 index 00000000000000..4426a6bf6061fd --- /dev/null +++ b/apps/ui-playground/app/layout.config.tsx @@ -0,0 +1,26 @@ +import type { HomeLayoutProps } from "fumadocs-ui/layouts/home"; + +/** + * Shared layout configurations + * + * you can configure layouts individually from: + * Home Layout: app/(home)/layout.tsx + * Docs Layout: app/docs/layout.tsx + */ +export const baseOptions: HomeLayoutProps = { + nav: { + title: "Cal.com", + }, + githubUrl: "https://github.com/calcom/cal.com", + links: [ + { + text: "Design", + url: "/design", + active: "nested-url", + }, + { + text: "GitHub", + url: "https://github.com/calcom/cal.com", + }, + ], +}; diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx index 74c01a4505c78d..8b61737d260dfb 100644 --- a/apps/ui-playground/app/layout.tsx +++ b/apps/ui-playground/app/layout.tsx @@ -1,22 +1,16 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"; -import type { Metadata } from "next"; -import { Inter, Geist_Mono } from "next/font/google"; +import { RootProvider } from "fumadocs-ui/provider"; +import { Inter } from "next/font/google"; import localFont from "next/font/local"; import { Suspense } from "react"; -import { Toaster } from "react-hot-toast"; -import "./globals.css"; +import "./global.css"; const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }); -const geistMono = Geist_Mono({ - subsets: ["latin"], - variable: "--font-geist-mono", -}); - const calFont = localFont({ src: "../fonts/CalSans-SemiBold.woff2", variable: "--font-cal", @@ -25,20 +19,16 @@ const calFont = localFont({ weight: "600", }); -export const metadata: Metadata = { - title: "UI Playground", - description: "A playground for Cal.com UI components", -}; - export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - Loading...
}>{children} - - + className={`${inter.variable} ${calFont.variable} bg-default font-[family-name:var(--font-inter)] antialiased`}> + + + Loading...
}>{children} + + ); diff --git a/apps/ui-playground/app/page.tsx b/apps/ui-playground/app/page.tsx deleted file mode 100644 index 5804d1c249c322..00000000000000 --- a/apps/ui-playground/app/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import PageContent from "./_components/PageContent"; - -export default function Home() { - return ; -} diff --git a/apps/ui-playground/app/source.ts b/apps/ui-playground/app/source.ts new file mode 100644 index 00000000000000..ac2303ab9d7e9d --- /dev/null +++ b/apps/ui-playground/app/source.ts @@ -0,0 +1,13 @@ +import { components, docs, meta } from "@/.source"; +import { loader } from "fumadocs-core/source"; +import { createMDXSource } from "fumadocs-mdx"; + +export const source = loader({ + baseUrl: "/docs", + source: createMDXSource(docs, meta), +}); + +export const componentSource = loader({ + baseUrl: "/design", + source: createMDXSource(components, []), +}); diff --git a/apps/ui-playground/content/design/colors.mdx b/apps/ui-playground/content/design/colors.mdx new file mode 100644 index 00000000000000..1e1ba102a92404 --- /dev/null +++ b/apps/ui-playground/content/design/colors.mdx @@ -0,0 +1,128 @@ +--- +title: Colors +description: Color scale and usage +--- + + + + + + + +Unkey uses [Radix Colors](https://www.radix-ui.com/colors) and its scale. +Darkmode is handled automatically, outside of specific edge cases we don't need to apply separate `dark:` classes. + +| Step | Use Case | +|-------|-----------------------------------------| +| 1 | App background | +| 2 | Subtle background | +| 3 | UI element background | +| 4 | Hovered UI element background | +| 5 | Active / Selected UI element background | +| 6 | Subtle borders and separators | +| 7 | UI element border and focus rings | +| 8 | Hovered UI element border | +| 9 | Solid backgrounds | +| 10 | Hovered solid backgrounds | +| 11 | Low-contrast text | +| 12 | High-contrast text | + +[Read more](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) + + +## gray +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +## success +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +## info +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +## warning +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +## error +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +## feature +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/ui-playground/content/design/components/alert.actions.tsx b/apps/ui-playground/content/design/components/alert.actions.tsx new file mode 100644 index 00000000000000..608085fb5c96b5 --- /dev/null +++ b/apps/ui-playground/content/design/components/alert.actions.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Alert } from "@calcom/ui"; + +const severities = ["neutral", "info", "warning", "error"] as const; + +export const ActionsExample: React.FC = () => ( + +
+ {severities.map((severity) => ( + + + +
+ } + /> + ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/alert.basic.tsx b/apps/ui-playground/content/design/components/alert.basic.tsx new file mode 100644 index 00000000000000..f06d1e2252601f --- /dev/null +++ b/apps/ui-playground/content/design/components/alert.basic.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Alert } from "@calcom/ui"; + +const severities = ["neutral", "info", "warning", "error"] as const; + +export const BasicExample: React.FC = () => ( + +
+ {severities.map((severity) => ( + + ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/alert.customIconColor.tsx b/apps/ui-playground/content/design/components/alert.customIconColor.tsx new file mode 100644 index 00000000000000..f3f041d6944266 --- /dev/null +++ b/apps/ui-playground/content/design/components/alert.customIconColor.tsx @@ -0,0 +1,24 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Alert } from "@calcom/ui"; + +const severities = ["neutral", "info", "warning", "error"] as const; + +export const CustomIconColorExample: React.FC = () => ( + +
+ {severities.map((severity) => ( + + ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/alert.customIcons.tsx b/apps/ui-playground/content/design/components/alert.customIcons.tsx new file mode 100644 index 00000000000000..ee9c9747bb9f8d --- /dev/null +++ b/apps/ui-playground/content/design/components/alert.customIcons.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Alert } from "@calcom/ui"; + +const severities = ["neutral", "info", "warning", "error"] as const; +const customIcons = ["info", "alert-triangle", "circle-x", "circle-check", "bell"] as const; + +export const CustomIconsExample: React.FC = () => ( + +
+ {severities.map((severity, index) => ( + + ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/alert.mdx b/apps/ui-playground/content/design/components/alert.mdx new file mode 100644 index 00000000000000..0ade2eb19c996a --- /dev/null +++ b/apps/ui-playground/content/design/components/alert.mdx @@ -0,0 +1,41 @@ +--- +title: Alert +--- +import { Alert } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { BasicExample } from "./alert.basic" +import { ActionsExample } from "./alert.actions" +import { CustomIconsExample } from "./alert.customIcons" +import { CustomIconColorExample } from "./alert.customIconColor" +import { NoTitleExample } from "./alert.noTitle" + +## Basic Alerts + +Alerts come in different severities to convey different levels of importance. + + + +## Alerts with Actions + +Alerts can include action buttons to provide users with immediate options. + + + +## Custom Icons + +You can customize the alert icon to better match your message context. + + + +## Custom Icon Colors + +The icon color can be customized independently of the alert severity. + + + +## Without Title + +For simpler messages, alerts can be displayed without a title. + + diff --git a/apps/ui-playground/content/design/components/alert.noTitle.tsx b/apps/ui-playground/content/design/components/alert.noTitle.tsx new file mode 100644 index 00000000000000..e1a22281429f6d --- /dev/null +++ b/apps/ui-playground/content/design/components/alert.noTitle.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Alert } from "@calcom/ui"; + +const severities = ["neutral", "info", "warning", "error"] as const; + +export const NoTitleExample: React.FC = () => ( + +
+ {severities.map((severity) => ( + + ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/avatar.image.tsx b/apps/ui-playground/content/design/components/avatar.image.tsx new file mode 100644 index 00000000000000..b1e0d69ed105f6 --- /dev/null +++ b/apps/ui-playground/content/design/components/avatar.image.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar } from "@calcom/ui"; + +const sampleImage = "https://cal.com/stakeholder/peer.jpg"; + +export const ImageExample: React.FC = () => ( + +
+
+ + With Image +
+
+ + Without Image +
+
+ +); diff --git a/apps/ui-playground/content/design/components/avatar.indicator.tsx b/apps/ui-playground/content/design/components/avatar.indicator.tsx new file mode 100644 index 00000000000000..736dcf6fd250ab --- /dev/null +++ b/apps/ui-playground/content/design/components/avatar.indicator.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar } from "@calcom/ui"; + +const sampleImage = "https://cal.com/stakeholder/peer.jpg"; + +export const IndicatorExample: React.FC = () => ( + +
+
+ + } + /> + With Status Indicator +
+
+ +); diff --git a/apps/ui-playground/content/design/components/avatar.link.tsx b/apps/ui-playground/content/design/components/avatar.link.tsx new file mode 100644 index 00000000000000..0f823eb107276e --- /dev/null +++ b/apps/ui-playground/content/design/components/avatar.link.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar } from "@calcom/ui"; + +const sampleImage = "https://cal.com/stakeholder/peer.jpg"; + +export const LinkExample: React.FC = () => ( + +
+
+ + Clickable +
+
+ +); diff --git a/apps/ui-playground/content/design/components/avatar.mdx b/apps/ui-playground/content/design/components/avatar.mdx new file mode 100644 index 00000000000000..268483f3202df1 --- /dev/null +++ b/apps/ui-playground/content/design/components/avatar.mdx @@ -0,0 +1,41 @@ +--- +title: Avatar +--- +import { Avatar } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { SizesExample } from "./avatar.sizes" +import { ImageExample } from "./avatar.image" +import { TooltipExample } from "./avatar.tooltip" +import { LinkExample } from "./avatar.link" +import { IndicatorExample } from "./avatar.indicator" + +## Size Variations + +Avatars come in different sizes to suit various use cases. + + + +## With and Without Image + +Avatars can display either an image or a fallback placeholder. + + + +## With Tooltip + +Avatars can show additional information on hover using tooltips. + + + +## With Link + +Avatars can be made clickable by providing an href. + + + +## With Indicator + +Avatars can include status indicators or badges. + + diff --git a/apps/ui-playground/content/design/components/avatar.sizes.tsx b/apps/ui-playground/content/design/components/avatar.sizes.tsx new file mode 100644 index 00000000000000..102be01a2b1e1c --- /dev/null +++ b/apps/ui-playground/content/design/components/avatar.sizes.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar } from "@calcom/ui"; + +const sizes = ["xs", "xsm", "sm", "md", "mdLg", "lg", "xl"] as const; +const sampleImage = "https://cal.com/stakeholder/peer.jpg"; + +export const SizesExample: React.FC = () => ( + +
+ {sizes.map((size) => ( +
+ + {size} +
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/avatar.tooltip.tsx b/apps/ui-playground/content/design/components/avatar.tooltip.tsx new file mode 100644 index 00000000000000..ed5fc54c05e629 --- /dev/null +++ b/apps/ui-playground/content/design/components/avatar.tooltip.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar } from "@calcom/ui"; + +const sampleImage = "https://cal.com/stakeholder/peer.jpg"; + +export const TooltipExample: React.FC = () => ( + +
+
+ + Hover to see tooltip +
+
+ +); diff --git a/apps/ui-playground/content/design/components/badge.dots.tsx b/apps/ui-playground/content/design/components/badge.dots.tsx new file mode 100644 index 00000000000000..cb505bba0c0836 --- /dev/null +++ b/apps/ui-playground/content/design/components/badge.dots.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Badge } from "@calcom/ui"; + +const variants = [ + "default", + "warning", + "orange", + "success", + "green", + "gray", + "blue", + "red", + "error", + "grayWithoutHover", +] as const; + +export const DotsExample: React.FC = () => ( + +
+ {variants.map((variant) => ( +
+ + {variant} + + Dot +
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/badge.icons.tsx b/apps/ui-playground/content/design/components/badge.icons.tsx new file mode 100644 index 00000000000000..824b4cb0b927b6 --- /dev/null +++ b/apps/ui-playground/content/design/components/badge.icons.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Badge } from "@calcom/ui"; + +const variants = [ + "default", + "warning", + "orange", + "success", + "green", + "gray", + "blue", + "red", + "error", + "grayWithoutHover", +] as const; + +export const IconsExample: React.FC = () => ( + +
+ {variants.map((variant) => ( +
+ + {variant} + + Icon +
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/badge.interactive.tsx b/apps/ui-playground/content/design/components/badge.interactive.tsx new file mode 100644 index 00000000000000..d5256ba3d5c44f --- /dev/null +++ b/apps/ui-playground/content/design/components/badge.interactive.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Badge } from "@calcom/ui"; + +const variants = [ + "default", + "warning", + "orange", + "success", + "green", + "gray", + "blue", + "red", + "error", + "grayWithoutHover", +] as const; + +export const InteractiveExample: React.FC = () => ( + +
+ {variants.map((variant) => ( +
+ alert(`${variant} badge clicked!`)}> + Click me + + Clickable +
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/badge.mdx b/apps/ui-playground/content/design/components/badge.mdx new file mode 100644 index 00000000000000..07e22c0d2a646a --- /dev/null +++ b/apps/ui-playground/content/design/components/badge.mdx @@ -0,0 +1,41 @@ +--- +title: Badge +--- +import { Badge } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { VariantsExample } from "./badge.variants" +import { IconsExample } from "./badge.icons" +import { DotsExample } from "./badge.dots" +import { InteractiveExample } from "./badge.interactive" +import { RoundedExample } from "./badge.rounded" + +## Variants and Sizes + +Badges come in different variants and sizes to suit various use cases. + + + +## With Icons + +Badges can include icons to provide additional visual context. + + + +## With Dots + +Badges can include dots, useful for showing status or notifications. + + + +## Interactive + +Badges can be made interactive with click handlers. + + + +## Rounded + +Badges can be fully rounded, useful for numerical indicators. + + diff --git a/apps/ui-playground/content/design/components/badge.rounded.tsx b/apps/ui-playground/content/design/components/badge.rounded.tsx new file mode 100644 index 00000000000000..663f020f89bfdf --- /dev/null +++ b/apps/ui-playground/content/design/components/badge.rounded.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Badge } from "@calcom/ui"; + +const variants = [ + "default", + "warning", + "orange", + "success", + "green", + "gray", + "blue", + "red", + "error", + "grayWithoutHover", +] as const; + +export const RoundedExample: React.FC = () => ( + +
+ {variants.map((variant) => ( +
+ + 1 + + {variant} +
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/badge.variants.tsx b/apps/ui-playground/content/design/components/badge.variants.tsx new file mode 100644 index 00000000000000..feb2b495d8e821 --- /dev/null +++ b/apps/ui-playground/content/design/components/badge.variants.tsx @@ -0,0 +1,42 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Badge } from "@calcom/ui"; + +const variants = [ + "default", + "warning", + "orange", + "success", + "green", + "gray", + "blue", + "red", + "error", + "grayWithoutHover", +] as const; + +const sizes = ["sm", "md", "lg"] as const; + +export const VariantsExample: React.FC = () => ( + +
+ {variants.map((variant) => ( +
+

{variant}

+
+ {sizes.map((size) => ( +
+ + {variant} + + {size} +
+ ))} +
+
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/button.disabled.tsx b/apps/ui-playground/content/design/components/button.disabled.tsx new file mode 100644 index 00000000000000..e78eec80b19440 --- /dev/null +++ b/apps/ui-playground/content/design/components/button.disabled.tsx @@ -0,0 +1,42 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; + +import { Button } from "@calcom/ui"; + +const colors = ["primary", "secondary", "minimal", "destructive"] as const; + +export const DisabledExample: React.FC = () => ( + +
+
+

Disabled State

+ + {colors.map((color) => ( +
+ + Disabled +
+ ))} + +
+ +
+

Disabled with Icons

+ + {colors.map((color) => ( +
+ + With Icon +
+ ))} + +
+
+ +); diff --git a/apps/ui-playground/content/design/components/button.icons.tsx b/apps/ui-playground/content/design/components/button.icons.tsx new file mode 100644 index 00000000000000..103abe1a3190fa --- /dev/null +++ b/apps/ui-playground/content/design/components/button.icons.tsx @@ -0,0 +1,42 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; + +import { Button } from "@calcom/ui"; + +const colors = ["primary", "secondary", "minimal", "destructive"] as const; + +export const IconsExample: React.FC = () => ( + +
+
+

Start Icon

+ + {colors.map((color) => ( +
+ + Start Icon +
+ ))} + +
+ +
+

End Icon

+ + {colors.map((color) => ( +
+ + End Icon +
+ ))} + +
+
+ +); diff --git a/apps/ui-playground/content/design/components/button.loading.tsx b/apps/ui-playground/content/design/components/button.loading.tsx new file mode 100644 index 00000000000000..e7bee88cfbe125 --- /dev/null +++ b/apps/ui-playground/content/design/components/button.loading.tsx @@ -0,0 +1,44 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; + +import { Button } from "@calcom/ui"; + +const colors = ["primary", "secondary", "minimal", "destructive"] as const; + +export const LoadingExample: React.FC = () => { + return ( + +
+
+

Loading State

+ + {colors.map((color) => ( +
+ + Loading +
+ ))} + +
+ +
+

Loading with Icons

+ + {colors.map((color) => ( +
+ + With Icon +
+ ))} + +
+
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/button.mdx b/apps/ui-playground/content/design/components/button.mdx new file mode 100644 index 00000000000000..04bb08157a230f --- /dev/null +++ b/apps/ui-playground/content/design/components/button.mdx @@ -0,0 +1,49 @@ +--- +title: Button +--- +import { Button } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { OnClickExample } from "./button.onClick" +import { VariantExample } from "./button.variant" +import { IconsExample } from "./button.icons" +import { LoadingExample } from "./button.loading" +import { DisabledExample } from "./button.disabled" + +## Variants and Colors + +Buttons come in different variants and colors to suit different purposes. Each variant can be combined with any color and size. + + + +## Icons + +Buttons can include icons at the start or end. The icon color and size are automatically handled by the button component. + + + +## Loading State + +Buttons can show a loading state to indicate an ongoing action. The loading spinner replaces the button text while maintaining the button's width. + + + +## Disabled State + +Buttons can be disabled to indicate that they are not interactive. The disabled state is visually distinct and prevents any click events. + + + +## onClick Events + +Buttons handle click events like any other button component. You can provide an onClick handler to respond to user interactions. + + + +Providing a loading state will add a spinner on the left side of the button. + + + +## Disabled + + diff --git a/apps/ui-playground/content/design/components/button.onClick.tsx b/apps/ui-playground/content/design/components/button.onClick.tsx new file mode 100644 index 00000000000000..c7d1081fad21aa --- /dev/null +++ b/apps/ui-playground/content/design/components/button.onClick.tsx @@ -0,0 +1,14 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; + +import { Button } from "@calcom/ui"; + +export const OnClickExample: React.FC = () => ( + + + + + +); diff --git a/apps/ui-playground/content/design/components/button.variant.tsx b/apps/ui-playground/content/design/components/button.variant.tsx new file mode 100644 index 00000000000000..1d5dae77669b0e --- /dev/null +++ b/apps/ui-playground/content/design/components/button.variant.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; + +import { Button } from "@calcom/ui"; + +const variants = ["button", "icon"] as const; +const colors = ["primary", "secondary", "minimal", "destructive"] as const; +const sizes = ["xs", "sm", "base", "lg"] as const; + +export const VariantExample: React.FC = () => ( + +
+ {variants.map((variant) => ( +
+

{variant === "button" ? "Default" : variant}

+
+ {colors.map((color) => ( +
+

{color}

+ + {sizes.map((size) => ( +
+ + {size} +
+ ))} + +
+ ))} +
+
+ ))} +
+ +); diff --git a/apps/ui-playground/content/design/components/checkbox.basic.tsx b/apps/ui-playground/content/design/components/checkbox.basic.tsx new file mode 100644 index 00000000000000..a8b6f9cb5e1d27 --- /dev/null +++ b/apps/ui-playground/content/design/components/checkbox.basic.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Checkbox } from "@calcom/ui"; + +export const BasicExample: React.FC = () => ( + +
+
+ + Unchecked +
+ +
+ + Checked +
+ +
+ + Disabled +
+ +
+ + Disabled Checked +
+
+ +); diff --git a/apps/ui-playground/content/design/components/checkbox.description.tsx b/apps/ui-playground/content/design/components/checkbox.description.tsx new file mode 100644 index 00000000000000..1bdccdb838f23e --- /dev/null +++ b/apps/ui-playground/content/design/components/checkbox.description.tsx @@ -0,0 +1,15 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { CheckboxField } from "@calcom/ui"; + +export const DescriptionExample: React.FC = () => ( + +
+ + + +
+ +); diff --git a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx new file mode 100644 index 00000000000000..26178ba595131f --- /dev/null +++ b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx @@ -0,0 +1,16 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { CheckboxField } from "@calcom/ui"; + +export const InfoIconExample: React.FC = () => ( + + + +); diff --git a/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx b/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx new file mode 100644 index 00000000000000..e2d20c78d686d8 --- /dev/null +++ b/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx @@ -0,0 +1,24 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { CheckboxField } from "@calcom/ui"; + +export const LabelPositionExample: React.FC = () => ( + +
+ +
+ +
+
+ +); diff --git a/apps/ui-playground/content/design/components/checkbox.mdx b/apps/ui-playground/content/design/components/checkbox.mdx new file mode 100644 index 00000000000000..067f23a668c0ab --- /dev/null +++ b/apps/ui-playground/content/design/components/checkbox.mdx @@ -0,0 +1,34 @@ +--- +title: Checkbox +--- +import { Checkbox } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { BasicExample } from "./checkbox.basic" +import { DescriptionExample } from "./checkbox.description" +import { LabelPositionExample } from "./checkbox.labelPosition" +import { InfoIconExample } from "./checkbox.infoIcon" + +## Basic Usage + +Checkboxes in their various states - unchecked, checked, disabled, and disabled checked. + + + +## With Description + +Checkboxes can include descriptions to provide additional context. + + + +## Label Positions + +Labels can be positioned above or to the side of the checkbox. + + + +## With Information Icon + +Checkboxes can include an information icon with a tooltip for additional details. + + diff --git a/apps/ui-playground/content/design/components/dialog.basic.tsx b/apps/ui-playground/content/design/components/dialog.basic.tsx new file mode 100644 index 00000000000000..3b75fc51a6e779 --- /dev/null +++ b/apps/ui-playground/content/design/components/dialog.basic.tsx @@ -0,0 +1,32 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { Button, Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui"; + +export const BasicExample: React.FC = () => { + const [open, setOpen] = useState(false); + + return ( + +
+ + + +

+ Dialogs are used to display content that requires user attention or interaction. They appear + above the page content and must be closed before interacting with the page again. +

+ + + + + + +
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/dialog.confirmation.tsx b/apps/ui-playground/content/design/components/dialog.confirmation.tsx new file mode 100644 index 00000000000000..21a652275ee0cc --- /dev/null +++ b/apps/ui-playground/content/design/components/dialog.confirmation.tsx @@ -0,0 +1,36 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { Button, Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui"; + +export const ConfirmationExample: React.FC = () => { + const [open, setOpen] = useState(false); + + return ( + +
+ + + + + + + + + +
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/dialog.form.tsx b/apps/ui-playground/content/design/components/dialog.form.tsx new file mode 100644 index 00000000000000..1a6e6636c907c2 --- /dev/null +++ b/apps/ui-playground/content/design/components/dialog.form.tsx @@ -0,0 +1,54 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { Button, Dialog, DialogClose, DialogContent, DialogFooter, TextAreaField } from "@calcom/ui"; + +export const FormExample: React.FC = () => { + const [open, setOpen] = useState(false); + const [formInput, setFormInput] = useState(""); + + return ( + +
+ + + +
+ + Your Feedback + (Optional) + + } + value={formInput} + onChange={(e) => setFormInput(e.target.value)} + /> +
+ + + + + + +
+

Current Form Input:

+ 
+            {formInput || "No input yet"}
+
+
+
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/dialog.largeContent.tsx b/apps/ui-playground/content/design/components/dialog.largeContent.tsx new file mode 100644 index 00000000000000..5482d6070c2cc7 --- /dev/null +++ b/apps/ui-playground/content/design/components/dialog.largeContent.tsx @@ -0,0 +1,57 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { Button, Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui"; + +export const LargeContentExample: React.FC = () => { + const [open, setOpen] = useState(false); + + return ( + +
+ + + +
+ {Array.from({ length: 5 }).map((_, i) => ( +
+

Section {i + 1}

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus + hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend + nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis + nisl tempor. +

+

+ Suspendisse in orci enim. Integer vel sapien at risus ultrices ornare nec sit amet nibh. + Duis blandit lectus ac odio rhoncus non congue diam bibendum. Aliquam erat volutpat. +

+ {i === 2 && ( +
+

Important Notice

+

+ This is a highlighted section within the content to demonstrate how different UI + elements appear within a scrollable dialog. +

+
+ )} +
+ ))} +
+ + Decline + + + + +
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/dialog.mdx b/apps/ui-playground/content/design/components/dialog.mdx new file mode 100644 index 00000000000000..5e832e2a0ad6f2 --- /dev/null +++ b/apps/ui-playground/content/design/components/dialog.mdx @@ -0,0 +1,34 @@ +--- +title: Dialog +--- +import { Dialog } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { BasicExample } from "./dialog.basic" +import { LargeContentExample } from "./dialog.largeContent" +import { FormExample } from "./dialog.form" +import { ConfirmationExample } from "./dialog.confirmation" + +## Basic Dialog + +A simple dialog with a title, description, and action buttons. + + + +## Large Content Dialog + +A dialog that can handle scrollable content, such as terms and conditions. + + + +## Form Dialog + +A dialog containing a form for user input. + + + +## Confirmation Dialog + +A dialog for confirming destructive actions. + + diff --git a/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx new file mode 100644 index 00000000000000..b6cba60c0b64c6 --- /dev/null +++ b/apps/ui-playground/content/design/components/dropdown.avatarTrigger.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar } from "@calcom/ui"; +import { + Dropdown, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownItem, + DropdownMenuLabel, + DropdownMenuSeparator, +} from "@calcom/ui/dropdown"; + +export const AvatarTriggerExample: React.FC = () => ( + +
+
+ + + + + + Profile + + View Profile + Settings + + Sign out + + + Avatar Menu +
+
+ +); diff --git a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx new file mode 100644 index 00000000000000..126caa46eb82c3 --- /dev/null +++ b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import type { IconName } from "@calcom/ui"; +import { Button } from "@calcom/ui"; +import { + Dropdown, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownItem, + DropdownMenuLabel, +} from "@calcom/ui/dropdown"; + +const menuItems = [ + { label: "View", icon: "eye", kbd: "V" }, + { label: "Edit", icon: "edit", kbd: "E" }, + { label: "Share", icon: "share", kbd: "⌘S" }, + { label: "Delete", icon: "trash", destructive: true, kbd: "⌘⌫" }, +] as { + label: string; + icon: IconName; + destructive?: boolean; + kbd?: string; +}[]; + +export const ButtonTriggerExample: React.FC = () => ( + +
+ {/* Default Button */} +
+ + + + + + Actions + {menuItems.map((item) => ( + + {item.label} + + ))} + + + Default +
+ + {/* Button with Icon */} +
+ + + + + + Quick Actions + {menuItems.map((item) => ( + + {item.label} + + ))} + + + With Icon +
+ + {/* Icon Button */} +
+ + +
+
+ +); diff --git a/apps/ui-playground/content/design/components/dropdown.complex.tsx b/apps/ui-playground/content/design/components/dropdown.complex.tsx new file mode 100644 index 00000000000000..494c9c371e2d2b --- /dev/null +++ b/apps/ui-playground/content/design/components/dropdown.complex.tsx @@ -0,0 +1,87 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Avatar, Button } from "@calcom/ui"; +import { + Dropdown, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownItem, + DropdownMenuLabel, + DropdownMenuSeparator, +} from "@calcom/ui/dropdown"; + +export const ComplexExample: React.FC = () => ( + +
+ {/* Example 1: Complex Menu Structure */} +
+ + + + + + My account + Profile + Billing + Settings + Keyboard Shortcuts + + Team + Invite users + New team + + Github + Support + API + + + Complex Menu +
+ + {/* Example 2: Avatar with Icons */} +
+ + + + + + peer@cal.com + + My account + Plan + Billing + Integrations + Module + + + Log out + + + + With Icons +
+ + {/* Example 3: Simple Actions */} +
+ + + + + + Rename + Duplicate + Move + Delete + + + Simple Actions +
+
+ +); diff --git a/apps/ui-playground/content/design/components/dropdown.mdx b/apps/ui-playground/content/design/components/dropdown.mdx new file mode 100644 index 00000000000000..cf59584ee5004b --- /dev/null +++ b/apps/ui-playground/content/design/components/dropdown.mdx @@ -0,0 +1,27 @@ +--- +title: Dropdown +--- +import { Dropdown } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { ButtonTriggerExample } from "./dropdown.buttonTrigger" +import { AvatarTriggerExample } from "./dropdown.avatarTrigger" +import { ComplexExample } from "./dropdown.complex" + +## Button Trigger + +Dropdowns can be triggered by various types of buttons. + + + +## Avatar Trigger + +Dropdowns can be triggered by avatar components, commonly used for profile menus. + + + +## Complex Examples + +More complex dropdown examples with various combinations of labels, icons, and separators. + + diff --git a/apps/ui-playground/content/design/components/emptyScreen.basic.tsx b/apps/ui-playground/content/design/components/emptyScreen.basic.tsx new file mode 100644 index 00000000000000..f9a4dbb0a6a94d --- /dev/null +++ b/apps/ui-playground/content/design/components/emptyScreen.basic.tsx @@ -0,0 +1,17 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { EmptyScreen } from "@calcom/ui"; + +export const BasicExample: React.FC = () => ( + + alert("Create Meeting clicked")} + /> + +); diff --git a/apps/ui-playground/content/design/components/emptyScreen.border.tsx b/apps/ui-playground/content/design/components/emptyScreen.border.tsx new file mode 100644 index 00000000000000..a8ab8de75ef03b --- /dev/null +++ b/apps/ui-playground/content/design/components/emptyScreen.border.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { EmptyScreen } from "@calcom/ui"; + +export const BorderExample: React.FC = () => ( + +
+ {/* Without Border */} +
+

Without Border

+ alert("Browse Apps clicked")} + border={false} + /> +
+ + {/* With Solid Border */} +
+

With Solid Border

+ alert("Compose clicked")} + dashedBorder={false} + /> +
+
+ +); diff --git a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx new file mode 100644 index 00000000000000..85cbd063902d22 --- /dev/null +++ b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { EmptyScreen } from "@calcom/ui"; + +export const CustomIconExample: React.FC = () => ( + + alert("Add Members clicked")} + /> + +); diff --git a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx new file mode 100644 index 00000000000000..1e4ddfbf0a115a --- /dev/null +++ b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { EmptyScreen } from "@calcom/ui"; + +export const HtmlContentExample: React.FC = () => ( + + + Custom Headline with HTML + + } + description={ +
+

This is a custom description with multiple paragraphs.

+

+ You can include any HTML content here. +

+
+ } + buttonText="Learn More" + buttonOnClick={() => alert("Learn More clicked")} + /> + +); diff --git a/apps/ui-playground/content/design/components/emptyScreen.mdx b/apps/ui-playground/content/design/components/emptyScreen.mdx new file mode 100644 index 00000000000000..32becba75e29a2 --- /dev/null +++ b/apps/ui-playground/content/design/components/emptyScreen.mdx @@ -0,0 +1,41 @@ +--- +title: Empty Screen +--- +import { EmptyScreen } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { BasicExample } from "./emptyScreen.basic" +import { CustomIconExample } from "./emptyScreen.customIcon" +import { RawButtonExample } from "./emptyScreen.rawButton" +import { BorderExample } from "./emptyScreen.border" +import { HtmlContentExample } from "./emptyScreen.htmlContent" + +## Basic Usage + +A simple empty screen with an icon, headline, description, and action button. + + + +## Custom Icon + +Empty screen with a custom icon and styling. + + + +## Raw Button + +Empty screen with custom button layout. + + + +## Border Variations + +Empty screen with different border styles. + + + +## HTML Content + +Empty screen with custom HTML content in headline and description. + + diff --git a/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx b/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx new file mode 100644 index 00000000000000..20b02b768e4a0a --- /dev/null +++ b/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Button, EmptyScreen } from "@calcom/ui"; + +export const RawButtonExample: React.FC = () => ( + + + + +
+ } + /> + +); diff --git a/apps/ui-playground/content/design/components/form.addOns.tsx b/apps/ui-playground/content/design/components/form.addOns.tsx new file mode 100644 index 00000000000000..60177299d77e14 --- /dev/null +++ b/apps/ui-playground/content/design/components/form.addOns.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useForm } from "react-hook-form"; + +import { Button, Icon, InputField } from "@calcom/ui"; + +type FormValues = { + website: string; + githubUsername: string; + customDomain: string; +}; + +export const AddOnsExample: React.FC = () => { + const form = useForm({ + defaultValues: { + website: "", + githubUsername: "", + customDomain: "", + }, + }); + + const onSubmit = (data: FormValues) => { + console.log("Form submitted:", data); + }; + + return ( + +
+ + } + {...form.register("githubUsername")} + error={form.formState.errors.githubUsername?.message} + /> + +
+ + +
+ +
+ ); +}; diff --git a/apps/ui-playground/content/design/components/form.basic.tsx b/apps/ui-playground/content/design/components/form.basic.tsx new file mode 100644 index 00000000000000..7ca8310f3059b0 --- /dev/null +++ b/apps/ui-playground/content/design/components/form.basic.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useForm } from "react-hook-form"; + +import { Button, InputField } from "@calcom/ui"; + +type FormValues = { + username: string; + email: string; + password: string; +}; + +export const BasicExample: React.FC = () => { + const form = useForm({ + defaultValues: { + username: "", + email: "", + password: "", + }, + }); + + const onSubmit = (data: FormValues) => { + console.log("Form submitted:", data); + }; + + return ( + +
+ + + +
+ + +
+ +
+ ); +}; diff --git a/apps/ui-playground/content/design/components/form.mdx b/apps/ui-playground/content/design/components/form.mdx new file mode 100644 index 00000000000000..e49856bf058d33 --- /dev/null +++ b/apps/ui-playground/content/design/components/form.mdx @@ -0,0 +1,26 @@ +--- +title: Form +--- +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { BasicExample } from "./form.basic" +import { AddOnsExample } from "./form.addOns" +import { SpecialFieldsExample } from "./form.specialFields" + +## Basic Fields + +Basic form fields with validation using React Hook Form and Zod. + + + +## Fields with Add-ons + +Form fields with leading and trailing add-ons. + + + +## Number and Special Fields + +Form fields for numbers and special input types. + + diff --git a/apps/ui-playground/content/design/components/form.specialFields.tsx b/apps/ui-playground/content/design/components/form.specialFields.tsx new file mode 100644 index 00000000000000..ea29bf772c32a0 --- /dev/null +++ b/apps/ui-playground/content/design/components/form.specialFields.tsx @@ -0,0 +1,52 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useForm } from "react-hook-form"; + +import { Button, InputField } from "@calcom/ui"; + +type FormValues = { + age?: number; + phone?: string; +}; + +export const SpecialFieldsExample: React.FC = () => { + const form = useForm({ + defaultValues: { + age: undefined, + phone: "", + }, + }); + + const onSubmit = (data: FormValues) => { + console.log("Form submitted:", data); + }; + + return ( + +
+ + +
+ + +
+ +
+ ); +}; diff --git a/apps/ui-playground/content/design/components/input.mdx b/apps/ui-playground/content/design/components/input.mdx new file mode 100644 index 00000000000000..c2d9d898fa8831 --- /dev/null +++ b/apps/ui-playground/content/design/components/input.mdx @@ -0,0 +1,34 @@ +--- +title: Input +--- +import { Input } from "@calcom/ui" +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +import { StatesExample } from "./input.states" +import { TypesExample } from "./input.types" +import { WidthsExample } from "./input.widths" +import { ValuesExample } from "./input.values" + +## States + +Input fields in different states: default, disabled, and readonly. + + + +## Types + +Different types of input fields for various data types. + + + +## Widths + +Input fields with different width configurations. + + + +## With Values + +Input fields with default values and placeholders. + + diff --git a/apps/ui-playground/content/design/components/input.states.tsx b/apps/ui-playground/content/design/components/input.states.tsx new file mode 100644 index 00000000000000..27e01742c31e14 --- /dev/null +++ b/apps/ui-playground/content/design/components/input.states.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Input } from "@calcom/ui"; + +const states = ["default", "disabled", "readonly"] as const; +const sizes = ["sm", "md"] as const; + +export const StatesExample: React.FC = () => ( + +
+
+ {states.map((state) => ( +
+

{state}

+
+ {sizes.map((size) => ( +
+ + {size} +
+ ))} +
+
+ ))} +
+
+ +); diff --git a/apps/ui-playground/content/design/components/input.types.tsx b/apps/ui-playground/content/design/components/input.types.tsx new file mode 100644 index 00000000000000..924d9ea82732a9 --- /dev/null +++ b/apps/ui-playground/content/design/components/input.types.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Input } from "@calcom/ui"; + +const types = ["text", "email", "password", "number", "tel", "url", "search"] as const; +const sizes = ["sm", "md"] as const; + +export const TypesExample: React.FC = () => ( + +
+
+ {types.map((type) => ( +
+

{type}

+
+ {sizes.map((size) => ( +
+ + {size} +
+ ))} +
+
+ ))} +
+
+ +); diff --git a/apps/ui-playground/content/design/components/input.values.tsx b/apps/ui-playground/content/design/components/input.values.tsx new file mode 100644 index 00000000000000..021437c8c7a121 --- /dev/null +++ b/apps/ui-playground/content/design/components/input.values.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Input } from "@calcom/ui"; + +const sizes = ["sm", "md"] as const; + +export const ValuesExample: React.FC = () => ( + +
+
+ {sizes.map((size) => ( +
+

Size: {size}

+
+
+

Default Value

+ +
+
+

Placeholder

+ +
+
+
+ ))} +
+
+ +); diff --git a/apps/ui-playground/content/design/components/input.widths.tsx b/apps/ui-playground/content/design/components/input.widths.tsx new file mode 100644 index 00000000000000..d653f09aacec44 --- /dev/null +++ b/apps/ui-playground/content/design/components/input.widths.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Input } from "@calcom/ui"; + +const sizes = ["sm", "md"] as const; + +export const WidthsExample: React.FC = () => ( + +
+
+ {sizes.map((size) => ( +
+

Size: {size}

+
+
+

Full Width

+ +
+
+

Auto Width

+ +
+
+
+ ))} +
+
+ +); diff --git a/apps/ui-playground/content/design/components/navigation.items.tsx b/apps/ui-playground/content/design/components/navigation.items.tsx new file mode 100644 index 00000000000000..3d2b078cf1982e --- /dev/null +++ b/apps/ui-playground/content/design/components/navigation.items.tsx @@ -0,0 +1,91 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Badge, NavigationItem } from "@calcom/ui"; + +export const ItemsExample: React.FC = () => ( + +
+
+

Basic Items

+ + +
+ +
+

With Badge

+ 3, + }} + /> + New, + }} + /> +
+ +
+

Active State

+ + 3, + isCurrent: true, + }} + /> + + +
+
+ +); diff --git a/apps/ui-playground/content/design/components/navigation.mdx b/apps/ui-playground/content/design/components/navigation.mdx new file mode 100644 index 00000000000000..9ade7e1b4fbdbc --- /dev/null +++ b/apps/ui-playground/content/design/components/navigation.mdx @@ -0,0 +1,19 @@ +--- +title: Navigation +--- +import { RenderComponentWithSnippet } from "@/app/components/render" +import { Row } from "@/app/components/row" +// import { SidebarExample } from "./navigation.sidebar.tsx" +import { ItemsExample } from "./navigation.items.tsx" + +{/* ## Sidebar Navigation + +Full sidebar navigation with logo, sections, and footer. + + */} + +## Navigation Items + +Individual navigation items with different states and variants. + + diff --git a/apps/ui-playground/content/design/components/navigation.sidebar.tsx b/apps/ui-playground/content/design/components/navigation.sidebar.tsx new file mode 100644 index 00000000000000..c5cdcc1aab24ee --- /dev/null +++ b/apps/ui-playground/content/design/components/navigation.sidebar.tsx @@ -0,0 +1,204 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { NavigationItem } from "@calcom/ui"; + +export const SidebarExample: React.FC = () => { + const [isDeelExpanded, setIsDeelExpanded] = useState(true); + + return ( + +
+ + + + + +
Manage
+ + + +
+ + +
+
+ + + + + + + + + + + setIsDeelExpanded(!isDeelExpanded), + child: [ + { name: "Profile", href: "#profile" }, + { name: "Members", href: "#members" }, + { name: "Event Types", href: "#event-types" }, + { name: "Appearance", href: "#appearance" }, + { name: "Billing", href: "#billing" }, + { name: "Booking Limits", href: "#booking-limits" }, + { name: "Attributes", href: "#attributes" }, + { name: "Segments", href: "#segments", isCurrent: true }, + ], + }} + /> + + +
+ + ); +}; diff --git a/apps/ui-playground/app/_components/RangeSliderDemo.tsx b/apps/ui-playground/content/design/components/rangeslider.basic.tsx similarity index 78% rename from apps/ui-playground/app/_components/RangeSliderDemo.tsx rename to apps/ui-playground/content/design/components/rangeslider.basic.tsx index e48f93467c8a8c..fe3cf5ca05572d 100644 --- a/apps/ui-playground/app/_components/RangeSliderDemo.tsx +++ b/apps/ui-playground/content/design/components/rangeslider.basic.tsx @@ -1,20 +1,18 @@ "use client"; +import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; import { RangeSlider } from "@calcom/ui"; -import DemoSection, { DemoSubSection } from "./DemoSection"; - -export default function RangeSliderDemo() { +export const BasicExample: React.FC = () => { const [singleValue, setSingleValue] = useState([50]); const [rangeValue, setRangeValue] = useState([20, 80]); const [steppedValue, setSteppedValue] = useState([25]); return ( - - {/* Basic Slider */} - + +
@@ -29,10 +27,6 @@ export default function RangeSliderDemo() { />
- - - {/* Range Slider */} -
@@ -49,10 +43,7 @@ export default function RangeSliderDemo() { />
- - {/* Stepped Slider */} -
@@ -67,10 +58,6 @@ export default function RangeSliderDemo() { />
- - - {/* Disabled State */} -
@@ -79,7 +66,7 @@ export default function RangeSliderDemo() {
- - +
+ ); -} +}; diff --git a/apps/ui-playground/content/design/components/rangeslider.mdx b/apps/ui-playground/content/design/components/rangeslider.mdx new file mode 100644 index 00000000000000..7112fb715b8c43 --- /dev/null +++ b/apps/ui-playground/content/design/components/rangeslider.mdx @@ -0,0 +1,21 @@ +--- +title: Range Slider +--- + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; + +import { BasicExample } from "./rangeslider.basic.tsx"; +import { PopoverExample } from "./rangeslider.popover"; + +## Basic + +Basic range slider for selecting numeric values. + + + +## With Popover + +Range slider with a popover showing the current value. + + diff --git a/apps/ui-playground/content/design/components/rangeslider.popover.tsx b/apps/ui-playground/content/design/components/rangeslider.popover.tsx new file mode 100644 index 00000000000000..937dae17075e71 --- /dev/null +++ b/apps/ui-playground/content/design/components/rangeslider.popover.tsx @@ -0,0 +1,71 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { RangeSliderPopover } from "@calcom/ui"; + +export const PopoverExample: React.FC = () => { + const [defaultRange, setDefaultRange] = useState([15, 30]); + const [customRange, setCustomRange] = useState([5, 20]); + const [largeRange, setLargeRange] = useState([0, 100]); + + return ( + +
+
+

Default Range (15-30 mins)

+ +
+ +
+

Custom Range with Success Badge (5-20 mins)

+ +
+ +
+

Large Range with Warning Badge (0-100 mins)

+ +
+ +
+

Selected Values:

+ 
+            {JSON.stringify(
+              {
+                defaultRange,
+                customRange,
+                largeRange,
+              },
+              null,
+              2
+            )}
+
+
+
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/select.async.tsx b/apps/ui-playground/content/design/components/select.async.tsx new file mode 100644 index 00000000000000..a8056999d86abf --- /dev/null +++ b/apps/ui-playground/content/design/components/select.async.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useCallback, useState } from "react"; + +import { Select } from "@calcom/ui"; +import { showToast } from "@calcom/ui"; + +const countries = [ + { value: "us", label: "United States" }, + { value: "uk", label: "United Kingdom" }, + { value: "ca", label: "Canada" }, + { value: "fr", label: "France" }, + { value: "de", label: "Germany" }, + { value: "it", label: "Italy" }, + { value: "es", label: "Spain" }, + { value: "au", label: "Australia" }, + { value: "jp", label: "Japan" }, + { value: "br", label: "Brazil" }, +]; + +// Simulate an API call with delay +const searchCountries = (query: string) => { + return new Promise<{ value: string; label: string }[]>((resolve) => { + setTimeout(() => { + const filtered = countries.filter((country) => + country.label.toLowerCase().includes(query.toLowerCase()) + ); + resolve(filtered); + }, 1000); // Simulate network delay + }); +}; + +export const AsyncExample: React.FC = () => { + const [asyncOptions, setAsyncOptions] = useState<{ value: string; label: string }[]>([]); + const [isLoading, setIsLoading] = useState(false); + + const handleValueChange = (newValue: unknown, actionMeta: { action: string }) => { + showToast(`Selected: ${JSON.stringify(newValue)}, Action: ${actionMeta.action}`, "success"); + }; + + const loadOptions = useCallback(async (inputValue: string) => { + setIsLoading(true); + try { + const results = await searchCountries(inputValue); + setAsyncOptions(results); + } catch (error) { + showToast("Error loading options", "error"); + } finally { + setIsLoading(false); + } + }, []); + + return ( + +
+ { + if (value) { + loadOptions(value); + } + }} + isLoading={isLoading} + placeholder="Search for a country... (small)" + noOptionsMessage={({ inputValue }) => + inputValue ? "No countries found" : "Start typing to search..." + } + onChange={handleValueChange} + size="sm" + /> +
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/select.basic.tsx b/apps/ui-playground/content/design/components/select.basic.tsx new file mode 100644 index 00000000000000..4b2234d043e68b --- /dev/null +++ b/apps/ui-playground/content/design/components/select.basic.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { useState } from "react"; + +import { Select } from "@calcom/ui"; + +const options = [ + { value: "chocolate", label: "Chocolate" }, + { value: "strawberry", label: "Strawberry" }, + { value: "vanilla", label: "Vanilla" }, + { value: "mint", label: "Mint" }, + { value: "coffee", label: "Coffee" }, +]; + +export const BasicExample: React.FC = () => { + const [singleValue, setSingleValue] = useState<{ value: string; label: string } | null>(null); + + return ( + +
+ setSingleValue(newValue)} + isClearable + placeholder="Small size select..." + size="sm" + /> +
+ + ); +}; diff --git a/apps/ui-playground/content/design/components/select.disabled.tsx b/apps/ui-playground/content/design/components/select.disabled.tsx new file mode 100644 index 00000000000000..9a033290bfdff1 --- /dev/null +++ b/apps/ui-playground/content/design/components/select.disabled.tsx @@ -0,0 +1,27 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Select, SelectField } from "@calcom/ui"; + +const options = [ + { value: "chocolate", label: "Chocolate" }, + { value: "strawberry", label: "Strawberry" }, + { value: "vanilla", label: "Vanilla" }, + { value: "mint", label: "Mint" }, + { value: "coffee", label: "Coffee" }, +]; + +export const DisabledExample: React.FC = () => ( + +
+ +
+ +); diff --git a/apps/ui-playground/content/design/components/select.loading.tsx b/apps/ui-playground/content/design/components/select.loading.tsx new file mode 100644 index 00000000000000..e3a704f2eb2330 --- /dev/null +++ b/apps/ui-playground/content/design/components/select.loading.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { RenderComponentWithSnippet } from "@/app/components/render"; + +import { Select } from "@calcom/ui"; + +const options = [ + { value: "chocolate", label: "Chocolate" }, + { value: "strawberry", label: "Strawberry" }, + { value: "vanilla", label: "Vanilla" }, + { value: "mint", label: "Mint" }, + { value: "coffee", label: "Coffee" }, +]; + +export const LoadingExample: React.FC = () => ( + +
+ setMultiValue(newValue as { value: string; label: string }[])} + isMulti + isClearable + placeholder="Choose multiple flavors..." + /> + setSearchQuery(e.target.value)} + className="border-subtle bg-default text-emphasis focus:ring-emphasis placeholder:text-subtle w-full rounded-md border px-4 py-2 focus:outline-none focus:ring-2" + /> +
+
+ {filteredIcons.map((iconName) => ( +
+
+
+ +
+

{iconName}

+
+ +
+ ))} +
+
+ + ); +}; diff --git a/apps/ui-playground/components/ui/SpacingTable.tsx b/apps/ui-playground/components/ui/SpacingTable.tsx new file mode 100644 index 00000000000000..6d8f296a63079f --- /dev/null +++ b/apps/ui-playground/components/ui/SpacingTable.tsx @@ -0,0 +1,45 @@ +"use client"; + +import React from "react"; +import { Toaster } from "react-hot-toast"; + +interface SpacingToken { + name: string; + value: string; + pixels: string; +} + +interface SpacingTableProps { + tokens: SpacingToken[]; +} + +export const SpacingTable: React.FC = ({ tokens }) => { + return ( + <> + +
+
+ {tokens.map((token, index) => ( +
+
+
+

+ {token.name === "px" ? "px" : `${token.name} (${token.pixels})`} +

+
+
+
+
+
+
+ ))} +
+
+ + ); +}; diff --git a/apps/ui-playground/content/design/icons.mdx b/apps/ui-playground/content/design/icons.mdx new file mode 100644 index 00000000000000..cf840f2edc4853 --- /dev/null +++ b/apps/ui-playground/content/design/icons.mdx @@ -0,0 +1,31 @@ +--- +title: Icons +description: Cal.com's icon system using Lucide icons +--- + +import { IconGrid } from '@/components/ui/IconGrid'; + +# Icon System + +Our icon system is built using [Lucide](https://lucide.dev/) icons, providing a consistent and scalable set of icons across the application. All icons are available through the `Icon` component from `@calcom/ui`. + +## Usage + +```tsx +import { Icon } from "@calcom/ui"; + +// Basic usage + + +// With different size + + +// With different color + +``` + +## Available Icons + +Search and browse all available icons. Hover over an icon to copy its component code or name. + + diff --git a/apps/ui-playground/content/design/spacing.mdx b/apps/ui-playground/content/design/spacing.mdx new file mode 100644 index 00000000000000..29e50bdd8837af --- /dev/null +++ b/apps/ui-playground/content/design/spacing.mdx @@ -0,0 +1,39 @@ +--- +title: Spacing +description: Cal.com's spacing system follows the Tailwind spacing scale +--- + +import { SpacingTable } from '@/components/ui/SpacingTable'; + +export const spacingTokens = [ + { name: '0', value: '0', pixels: '0px' }, + { name: 'px', value: '1px', pixels: '1px' }, + { name: '0.5', value: '0.125rem', pixels: '2px' }, + { name: '1', value: '0.25rem', pixels: '4px' }, + { name: '1.5', value: '0.375rem', pixels: '6px' }, + { name: '2', value: '0.5rem', pixels: '8px' }, + { name: '2.5', value: '0.625rem', pixels: '10px' }, + { name: '3', value: '0.75rem', pixels: '12px' }, + { name: '4', value: '1rem', pixels: '16px' }, + { name: '5', value: '1.25rem', pixels: '20px' }, + { name: '6', value: '1.5rem', pixels: '24px' }, + { name: '8', value: '2rem', pixels: '32px' }, + { name: '9', value: '2.25rem', pixels: '36px' }, + { name: '10', value: '2.5rem', pixels: '40px' }, + { name: '12', value: '3rem', pixels: '48px' }, + { name: '14', value: '3.5rem', pixels: '56px' }, + { name: '16', value: '4rem', pixels: '64px' }, + { name: '20', value: '5rem', pixels: '80px' }, +]; + +# Spacing System + +Our spacing system follows the Tailwind spacing scale, providing consistent spacing values across the application. Each spacing token can be used with various utility classes: + +- **Padding**: `p-{size}`, `px-{size}`, `py-{size}`, `pt-{size}`, `pr-{size}`, `pb-{size}`, `pl-{size}` +- **Margin**: `m-{size}`, `mx-{size}`, `my-{size}`, `mt-{size}`, `mr-{size}`, `mb-{size}`, `ml-{size}` +- **Gap**: `gap-{size}`, `gap-x-{size}`, `gap-y-{size}` + +Hover over each token to copy its utility classes or pixel value. + + From eed418042f227264608662d40746706afdd308b0 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 6 Feb 2025 14:33:10 +0100 Subject: [PATCH 060/143] add border radius and shadow tables --- .../components/ui/BorderRadiusTable.tsx | 65 +++++++++ .../components/ui/ShadowTable.tsx | 126 ++++++++++++++++++ .../content/design/border-radius.mdx | 32 +++++ apps/ui-playground/content/design/shadows.mdx | 58 ++++++++ 4 files changed, 281 insertions(+) create mode 100644 apps/ui-playground/components/ui/BorderRadiusTable.tsx create mode 100644 apps/ui-playground/components/ui/ShadowTable.tsx create mode 100644 apps/ui-playground/content/design/border-radius.mdx create mode 100644 apps/ui-playground/content/design/shadows.mdx diff --git a/apps/ui-playground/components/ui/BorderRadiusTable.tsx b/apps/ui-playground/components/ui/BorderRadiusTable.tsx new file mode 100644 index 00000000000000..b88197d4fee81e --- /dev/null +++ b/apps/ui-playground/components/ui/BorderRadiusTable.tsx @@ -0,0 +1,65 @@ +"use client"; + +import React from "react"; +import { Toaster } from "react-hot-toast"; + +import { showToast } from "@calcom/ui"; + +interface BorderRadiusToken { + name: string; + value: string; + className: string; +} + +interface BorderRadiusTableProps { + tokens: BorderRadiusToken[]; +} + +const tokens: BorderRadiusToken[] = [ + { name: "None", value: "0px", className: "rounded-none" }, + { name: "Small", value: "0.125rem", className: "rounded-sm" }, + { name: "Default", value: "0.25rem", className: "rounded" }, + { name: "Medium", value: "0.375rem", className: "rounded-md" }, + { name: "Large", value: "0.5rem", className: "rounded-lg" }, + { name: "XLarge", value: "0.75rem", className: "rounded-xl" }, + { name: "2XLarge", value: "1rem", className: "rounded-2xl" }, + { name: "3XLarge", value: "1.5rem", className: "rounded-3xl" }, + { name: "Full", value: "9999px", className: "rounded-full" }, +]; + +export const BorderRadiusTable: React.FC = () => { + const handleCopy = async (value: string) => { + try { + await navigator.clipboard.writeText(value); + showToast(`Copied ${value}`, "success"); + } catch (error) { + console.error("Failed to copy:", error); + showToast("Failed to copy", "error"); + } + }; + + return ( + <> + +
+ {tokens.map((token) => ( +
handleCopy(token.className)} + className="border-subtle bg-default group relative cursor-pointer overflow-hidden rounded-lg border p-4 hover:bg-gray-50"> +
+
+
+

{token.name}

+

{token.className}

+
+

{token.value}

+
+
+
+
+ ))} +
+ + ); +}; diff --git a/apps/ui-playground/components/ui/ShadowTable.tsx b/apps/ui-playground/components/ui/ShadowTable.tsx new file mode 100644 index 00000000000000..3cec29abfe4e28 --- /dev/null +++ b/apps/ui-playground/components/ui/ShadowTable.tsx @@ -0,0 +1,126 @@ +"use client"; + +import React from "react"; +import { Toaster } from "react-hot-toast"; + +import { showToast } from "@calcom/ui"; + +interface ShadowToken { + name: string; + className: string; + description: string; +} + +interface ShadowTableProps { + tokens: ShadowToken[]; +} + +const tokens: ShadowToken[] = [ + { + name: "Dropdown", + className: "shadow-dropdown", + description: "Used for dropdown menus and popovers", + }, + { + name: "Solid Gray Rested", + className: "shadow-solid-gray-rested", + description: "Default state for solid gray buttons", + }, + { + name: "Solid Gray Hover", + className: "shadow-solid-gray-hover", + description: "Hover state for solid gray buttons", + }, + { + name: "Solid Gray Active", + className: "shadow-solid-gray-active", + description: "Active/pressed state for solid gray buttons", + }, + { + name: "Outline Gray Rested", + className: "shadow-outline-gray-rested", + description: "Default state for outline gray buttons", + }, + { + name: "Outline Gray Hover", + className: "shadow-outline-gray-hover", + description: "Hover state for outline gray buttons", + }, + { + name: "Outline Gray Active", + className: "shadow-outline-gray-active", + description: "Active/pressed state for outline gray buttons", + }, + { + name: "Outline Red Rested", + className: "shadow-outline-red-rested", + description: "Default state for outline red buttons", + }, + { + name: "Outline Red Hover", + className: "shadow-outline-red-hover", + description: "Hover state for outline red buttons", + }, + { + name: "Outline Red Active", + className: "shadow-outline-red-active", + description: "Active/pressed state for outline red buttons", + }, + { + name: "Elevation Low", + className: "shadow-elevation-low", + description: "Subtle elevation for UI elements", + }, + { + name: "Button Solid Brand Default", + className: "shadow-button-solid-brand-default", + description: "Default state for solid brand buttons", + }, + { + name: "Button Solid Brand Hover", + className: "shadow-button-solid-brand-hover", + description: "Hover state for solid brand buttons", + }, + { + name: "Button Solid Brand Active", + className: "shadow-button-solid-brand-active", + description: "Active/pressed state for solid brand buttons", + }, +]; + +export const ShadowTable: React.FC = () => { + const handleCopy = async (value: string) => { + try { + await navigator.clipboard.writeText(value); + showToast(`Copied ${value}`, "success"); + } catch (error) { + console.error("Failed to copy:", error); + showToast("Failed to copy", "error"); + } + }; + + return ( + <> + +
+ {tokens.map((token) => ( +
handleCopy(token.className)} + className="group relative cursor-pointer"> +
+
+
+

{token.name}

+

{token.className}

+
+

{token.description}

+
+
+
+ ))} +
+ + ); +}; diff --git a/apps/ui-playground/content/design/border-radius.mdx b/apps/ui-playground/content/design/border-radius.mdx new file mode 100644 index 00000000000000..804233da3f9919 --- /dev/null +++ b/apps/ui-playground/content/design/border-radius.mdx @@ -0,0 +1,32 @@ +--- +title: Border Radius +description: Cal.com's border radius system +--- + +import { BorderRadiusTable } from '@/components/ui/BorderRadiusTable'; + +# Border Radius + +Our design system uses a consistent set of border radius values to create a cohesive and modern interface. The border radius scale ranges from none (sharp corners) to full (completely rounded). + +## Usage + +```tsx +// No border radius +
Sharp corners
+ +// Default radius +
Default rounded corners
+ +// Larger radius +
Larger rounded corners
+ +// Fully rounded (useful for pills, badges) +
Completely rounded
+``` + +## Border Radius Scale + +Click on any radius to copy its Tailwind class name. Each preview shows how the radius appears when applied. + + diff --git a/apps/ui-playground/content/design/shadows.mdx b/apps/ui-playground/content/design/shadows.mdx new file mode 100644 index 00000000000000..996c29cb9f15d6 --- /dev/null +++ b/apps/ui-playground/content/design/shadows.mdx @@ -0,0 +1,58 @@ +--- +title: Shadows +description: Cal.com's shadow system for depth and elevation +--- + +import { ShadowTable } from '@/components/ui/ShadowTable'; + +# Shadows + +Our shadow system is designed to create visual hierarchy and depth in the interface. We provide specific shadows for different components and states, ensuring consistent interaction patterns across the application. + +## Shadow Categories + +### Component-Specific Shadows +- **Dropdown**: Used for dropdown menus and popovers +- **Button States**: Different shadows for default, hover, and active states +- **Brand Buttons**: Special shadows for brand-colored buttons + +### State-Based Shadows +- **Rested State**: Default appearance +- **Hover State**: Enhanced depth when hovering +- **Active State**: Pressed appearance + +## Usage Examples + +### Dropdowns and Popovers +```tsx +
+ Dropdown Content +
+``` + +### Solid Gray Buttons +```tsx + +``` + +### Outline Buttons +```tsx + +``` + +### Brand Buttons +```tsx + +``` + +## Shadow Preview + +Click on any shadow to copy its Tailwind class name. Each card demonstrates how the shadow appears when applied. + + From c593a5521aca119ec7ae9a0294efca8e06c0316b Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 6 Feb 2025 14:58:11 +0100 Subject: [PATCH 061/143] fix colours and border radius --- .../components/ui/BorderRadiusTable.tsx | 2 +- apps/ui-playground/content/design/colors.mdx | 357 ++++++------------ 2 files changed, 107 insertions(+), 252 deletions(-) diff --git a/apps/ui-playground/components/ui/BorderRadiusTable.tsx b/apps/ui-playground/components/ui/BorderRadiusTable.tsx index b88197d4fee81e..13819a5f9fa894 100644 --- a/apps/ui-playground/components/ui/BorderRadiusTable.tsx +++ b/apps/ui-playground/components/ui/BorderRadiusTable.tsx @@ -46,7 +46,7 @@ export const BorderRadiusTable: React.FC = () => {
handleCopy(token.className)} - className="border-subtle bg-default group relative cursor-pointer overflow-hidden rounded-lg border p-4 hover:bg-gray-50"> + className="border-subtle bg-default hover:bg-subtle group relative cursor-pointer overflow-hidden rounded-lg border p-4">
diff --git a/apps/ui-playground/content/design/colors.mdx b/apps/ui-playground/content/design/colors.mdx index adf9d8c2dfb583..d751b7f121a6d4 100644 --- a/apps/ui-playground/content/design/colors.mdx +++ b/apps/ui-playground/content/design/colors.mdx @@ -8,282 +8,137 @@ import { TypeTable } from '@/components/ui/TypeTable'; export const backgroundTokens = { title: 'Background Tokens', colors: [ - { name: 'bg.default', value: 'white / stone-900', className: 'bg-default' }, - { name: 'bg.muted', value: 'gray-50 / stone-800', className: 'bg-muted' }, - { name: 'bg.subtle', value: 'gray-100 / stone-700', className: 'bg-subtle' }, - { name: 'bg.emphasis', value: 'gray-200 / stone-600', className: 'bg-emphasis' }, - { name: 'bg.inverted', value: 'gray-900 / stone-50', className: 'bg-inverted' }, + { name: 'emphasis', value: 'var(--cal-bg-emphasis)', className: 'bg-emphasis' }, + { name: 'default', value: 'var(--cal-bg, white)', className: 'bg-default' }, + { name: 'subtle', value: 'var(--cal-bg-subtle)', className: 'bg-subtle' }, + { name: 'muted', value: 'var(--cal-bg-muted)', className: 'bg-muted' }, + { name: 'inverted', value: 'var(--cal-bg-inverted)', className: 'bg-inverted' }, + ], +}; + +export const primaryBackgroundTokens = { + title: 'Primary Background Tokens', + colors: [ + { name: 'primary.default', value: 'var(--cal-bg-primary)', className: 'bg-primary-default' }, + { name: 'primary.emphasis', value: 'var(--cal-bg-primary-emphasis)', className: 'bg-primary-emphasis' }, + { name: 'primary.muted', value: 'var(--cal-bg-primary-muted)', className: 'bg-primary-muted' }, + ], +}; + +export const brandTokens = { + title: 'Brand Colors', + colors: [ + { name: 'brand.default', value: 'var(--cal-brand,#111827)', className: 'bg-brand-default' }, + { name: 'brand.emphasis', value: 'var(--cal-brand-emphasis,#101010)', className: 'bg-brand-emphasis' }, + { name: 'brand.subtle', value: 'var(--cal-brand-subtle,#9CA3AF)', className: 'bg-brand-subtle' }, + { name: 'brand.accent', value: 'var(--cal-brand-accent,white)', className: 'bg-brand-accent' }, ], }; export const semanticBackgroundTokens = { title: 'Semantic Background Tokens', colors: [ - { name: 'bg.semantic.info.subtle', value: 'blue-100 / blue-800', className: 'bg-blue-100 dark:bg-blue-800' }, - { name: 'bg.semantic.info.emphasis', value: 'blue-500', className: 'bg-blue-500' }, - { name: 'bg.semantic.success.subtle', value: 'green-100 / green-800', className: 'bg-green-100 dark:bg-green-800' }, - { name: 'bg.semantic.success.emphasis', value: 'green-500', className: 'bg-green-500' }, - { name: 'bg.semantic.attention.subtle', value: 'orange-100 / orange-800', className: 'bg-orange-100 dark:bg-orange-800' }, - { name: 'bg.semantic.attention.emphasis', value: 'orange-500', className: 'bg-orange-500' }, - { name: 'bg.semantic.error.subtle', value: 'red-100 / red-800', className: 'bg-red-100 dark:bg-red-800' }, - { name: 'bg.semantic.error.emphasis', value: 'red-500', className: 'bg-red-500' }, + { name: 'semantic.info.subtle', value: 'var(--cal-bg-semantic-info-subtle)', className: 'bg-semantic-info-subtle' }, + { name: 'semantic.info.emphasis', value: 'var(--cal-bg-semantic-info-emphasis)', className: 'bg-semantic-info-emphasis' }, + { name: 'semantic.success.subtle', value: 'var(--cal-bg-semantic-success-subtle)', className: 'bg-semantic-success-subtle' }, + { name: 'semantic.success.emphasis', value: 'var(--cal-bg-semantic-success-emphasis)', className: 'bg-semantic-success-emphasis' }, + { name: 'semantic.attention.subtle', value: 'var(--cal-bg-semantic-attention-subtle)', className: 'bg-semantic-attention-subtle' }, + { name: 'semantic.attention.emphasis', value: 'var(--cal-bg-semantic-attention-emphasis)', className: 'bg-semantic-attention-emphasis' }, + { name: 'semantic.error.subtle', value: 'var(--cal-bg-semantic-error-subtle)', className: 'bg-semantic-error-subtle' }, + { name: 'semantic.error.emphasis', value: 'var(--cal-bg-semantic-error-emphasis)', className: 'bg-semantic-error-emphasis' }, ], }; export const borderTokens = { title: 'Border Tokens', colors: [ - { name: 'border.default', value: 'gray-300 / stone-600', className: 'bg-gray-300 dark:bg-stone-600' }, - { name: 'border.muted', value: 'gray-100 / stone-500', className: 'bg-gray-100 dark:bg-stone-500' }, - { name: 'border.subtle', value: 'gray-200 / stone-700', className: 'bg-gray-200 dark:bg-stone-700' }, - { name: 'border.emphasis', value: 'gray-400 / stone-800', className: 'bg-gray-400 dark:bg-stone-800' }, + { name: 'border.emphasis', value: 'var(--cal-border-emphasis)', className: 'border-emphasis' }, + { name: 'border.default', value: 'var(--cal-border)', className: 'border-default' }, + { name: 'border.subtle', value: 'var(--cal-border-subtle)', className: 'border-subtle' }, + { name: 'border.muted', value: 'var(--cal-border-muted)', className: 'border-muted' }, + { name: 'border.semantic.error', value: 'var(--cal-border-semantic-error)', className: 'border-semantic-error' }, ], }; export const textTokens = { title: 'Text Tokens', - description: 'Text colors shown on white/dark background for contrast', + description: 'Semantic text colors for various purposes', colors: [ - { name: 'text.emphasis', value: 'gray-900 / stone-50', className: 'bg-gray-900 dark:bg-stone-50' }, - { name: 'text.default', value: 'gray-700 / stone-300', className: 'bg-gray-700 dark:bg-stone-300' }, - { name: 'text.subtle', value: 'gray-500 / stone-400', className: 'bg-gray-500 dark:bg-stone-400' }, - { name: 'text.muted', value: 'gray-400 / stone-400', className: 'bg-gray-400 dark:bg-stone-400' }, - { name: 'text.inverted', value: 'white / black', className: 'bg-white dark:bg-black' }, - ], -}; - -export const brandTokens = { - title: 'Brand Colors', - colors: [ - { name: 'brand.default', value: '#111827', className: 'bg-[#111827]' }, - { name: 'brand.emphasis', value: '#101010', className: 'bg-[#101010]' }, - { name: 'brand.subtle', value: '#9CA3AF', className: 'bg-[#9CA3AF]' }, - { name: 'brand.accent', value: 'white', className: 'bg-white' }, + { name: 'text.emphasis', value: 'var(--cal-text-emphasis)', className: 'text-emphasis' }, + { name: 'text.default', value: 'var(--cal-text)', className: 'text-default' }, + { name: 'text.subtle', value: 'var(--cal-text-subtle)', className: 'text-subtle' }, + { name: 'text.muted', value: 'var(--cal-text-muted)', className: 'text-muted' }, + { name: 'text.inverted', value: 'var(--cal-text-inverted)', className: 'text-inverted' }, ], }; # Color System -Our color system follows the Tailwind color system with some modifications to match our brand. The system is organized into three main categories: - -1. Core Colors -2. Light Mode Semantic Tokens -3. Dark Mode Semantic Tokens - - - -## Core Colors - -These are our primitive color values that serve as the foundation for our design system. +Our color system is built on semantic tokens that provide consistent theming across light and dark modes. The system is organized into five main categories: -### Gray (Modified for Brand) -| Shade | Value | -|-------|--------| -| 50 | bg.muted (Light) | -| 100 | bg.subtle | -| 200 | bg.emphasis | -| ... | ... | -| 900 | bg.inverted | - -### Brand Colors -| Color | Usage | -|-------|--------| -| Default | #111827 | -| Emphasis | #101010 | -| Subtle | #9CA3AF | -| Accent | white | - -### Standard Colors -- Red (50-900) -- Orange (50-900) -- Yellow (50-900) -- Green (50-900) -- Blue (50-900) -- Purple (50-900) -- Pink (50-900) - -## Light Mode Semantic Tokens - -### Background Tokens -| Token | Maps To | -|-------|---------| -| bg.default | white | -| bg.muted | gray-50 | -| bg.subtle | gray-100 | -| bg.emphasis | gray-200 | -| bg.inverted | gray-900 | - -### Semantic Background -| Token | Maps To | -|-------|---------| -| bg.semantic.info.subtle | blue-100 | -| bg.semantic.info.emphasis | blue-500 | -| bg.semantic.success.subtle | green-100 | -| bg.semantic.success.emphasis | green-500 | -| bg.semantic.attention.subtle | orange-100 | -| bg.semantic.attention.emphasis | orange-500 | -| bg.semantic.error.subtle | red-100 | -| bg.semantic.error.emphasis | red-500 | - -### Border Tokens -| Token | Maps To | -|-------|---------| -| border.default | gray-300 | -| border.muted | gray-100 | -| border.subtle | gray-200 | -| border.emphasis | gray-400 | - -### Content/Text Tokens -| Token | Maps To | -|-------|---------| -| text.emphasis | gray-900 | -| text.default | gray-700 | -| text.subtle | gray-500 | -| text.muted | gray-400 | -| text.inverted | white | - -## Dark Mode Semantic Tokens - -### Background Tokens -| Token | Maps To | -|-------|---------| -| bg.default | stone-900 | -| bg.muted | stone-800 | -| bg.subtle | stone-700 | -| bg.emphasis | stone-600 | -| bg.inverted | stone-50 | - -### Semantic Background -| Token | Maps To | -|-------|---------| -| bg.semantic.info.subtle | blue-800 | -| bg.semantic.info.emphasis | blue-500 | -| bg.semantic.success.subtle | green-800 | -| bg.semantic.success.emphasis | green-500 | -| bg.semantic.attention.subtle | orange-800 | -| bg.semantic.attention.emphasis | orange-500 | -| bg.semantic.error.subtle | red-800 | -| bg.semantic.error.emphasis | red-500 | - -### Border Tokens -| Token | Maps To | -|-------|---------| -| border.default | stone-600 | -| border.muted | stone-500 | -| border.subtle | stone-700 | -| border.emphasis | stone-800 | - -### Content/Text Tokens -| Token | Maps To | -|-------|---------| -| text.emphasis | stone-50 | -| text.default | stone-300 | -| text.subtle | stone-400 | -| text.muted | stone-400 | -| text.inverted | black | +1. Background Colors +2. Primary Colors +3. Brand Colors +4. Semantic Colors +5. Text & Border Colors ## Usage Guidelines -1. Always use semantic tokens instead of direct color values -2. Dark mode is handled automatically through our token system -3. For custom components, follow the semantic token naming convention -4. Use visualization tokens for data visualization and charts -5. Brand colors should be used sparingly and primarily for brand elements - - -## gray -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -## success -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -## info -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -## warning -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -## error -
-
-
-
-
-
-
-
-
-
-
-
-
-
+1. **Use Semantic Tokens**: Always prefer semantic tokens over direct color values to maintain consistency and theme support. +2. **Dark Mode Support**: Our semantic tokens automatically handle dark mode transitions. +3. **Component Design**: When creating new components, follow the semantic token system: + - Use `bg-*` tokens for backgrounds + - Use `text-*` tokens for text content + - Use `border-*` tokens for borders +4. **Semantic States**: Use semantic color variations to convey meaning: + - Info: For informational UI elements + - Success: For successful actions and positive states + - Attention: For warnings and important notices + - Error: For error states and destructive actions +5. **Brand Colors**: Use brand colors sparingly and primarily for: + - Primary CTAs + - Brand identity elements + - Key interactive components + + +## Using Semantic Tokens + +Our color tokens are CSS variables that automatically handle light and dark mode transitions. Here's how to use them: + +### Background Colors +```tsx +// Basic backgrounds +
Default background
+
Subtle background
+
Emphasis background
+ +// Primary backgrounds +
Primary background
+
Primary emphasis
+``` + +### Semantic Colors +```tsx +// Info states +
Info subtle
+
Info emphasis
+ +// Success states +
Success subtle
+
Success emphasis
+ +// Error states +
Error subtle
+
Error emphasis
+``` + +### Text Colors +```tsx +

High emphasis text

+

Default text

+

Subtle text

+

Muted text

+``` + + -## feature -
-
-
-
-
-
-
-
-
-
-
-
-
-
From 2fbaf1ec2dc70ce7830c04bd9ae1a064cf4177b3 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Thu, 6 Feb 2025 16:33:28 +0100 Subject: [PATCH 062/143] remove prose undline via fumas fork --- apps/ui-playground/app/global.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/ui-playground/app/global.css b/apps/ui-playground/app/global.css index 56b1738f6de8ab..7907a9075b22f1 100644 --- a/apps/ui-playground/app/global.css +++ b/apps/ui-playground/app/global.css @@ -617,3 +617,7 @@ select:focus { .intercom-lightweight-app { @apply z-40 !important; } + +.prose :where(a:not([data-card])):not(:where([class~="not-prose"] *)) { + text-decoration: none; +} \ No newline at end of file From 0e5010b5038d27ed569107e2ca7a06cfd1075841 Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Fri, 7 Feb 2025 09:42:57 +0100 Subject: [PATCH 063/143] fix icon buttons sizes --- packages/ui/components/button/Button.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx index f30ade2de4113c..8a8360a83c5d0b 100644 --- a/packages/ui/components/button/Button.tsx +++ b/packages/ui/components/button/Button.tsx @@ -154,7 +154,7 @@ export const buttonClasses = cva( ], }, size: { - xs: "h-6 px-2 py-2 leading-none text-xs rounded-md", + xs: "h-6 p-2 leading-none text-xs rounded-md", sm: "h-7 px-2 py-1.5 leading-none text-sm" /** For backwards compatibility */, base: "px-2.5 py-2 text-sm leading-none", lg: "px-4 py-2.5 ", @@ -194,15 +194,25 @@ export const buttonClasses = cva( size: "base", className: "min-h-[36px] min-w-[36px] !p-2 hover:border-default", }, + { + variant: "icon", + size: "xs", + className: "min-h-5 min-w-5 !p-1 rounded-md", + }, { variant: "icon", size: "sm", - className: "h-6 w-6 !p-1", + className: "min-h-6 min-w-6 !p-1 rounded-md", + }, + { + variant: "icon", + size: "lg", + className: "min-h-10 min-w-10 !p-1", }, { variant: "fab", size: "base", - className: "h-14 md:h-9 md:w-auto md:px-4 md:py-2.5", + className: "min-h-14 md:min-h-9 md:min-w-auto md:px-4 md:py-2.5", }, ], defaultVariants: { From 397ab1549bbbea655e794aab60e4211cd3bb0efa Mon Sep 17 00:00:00 2001 From: Sean Brydon Date: Fri, 7 Feb 2025 09:59:09 +0100 Subject: [PATCH 064/143] button group component --- apps/ui-playground/app/components/render.tsx | 3 +- .../design/components/button.buttongroup.tsx | 62 +++++++++++++++++++ .../content/design/components/button.mdx | 17 +++++ .../ui/components/buttonGroup/ButtonGroup.tsx | 24 ++++--- 4 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 apps/ui-playground/content/design/components/button.buttongroup.tsx diff --git a/apps/ui-playground/app/components/render.tsx b/apps/ui-playground/app/components/render.tsx index e00a23687d2261..357736e92a9341 100644 --- a/apps/ui-playground/app/components/render.tsx +++ b/apps/ui-playground/app/components/render.tsx @@ -7,6 +7,7 @@ import { Button } from "@calcom/ui"; type Props = { customCodeSnippet?: string; + className?: string; }; export const RenderComponentWithSnippet: React.FC> = (props) => { @@ -24,7 +25,7 @@ export const RenderComponentWithSnippet: React.FC> = (p // }); return (
-
{props.children}
+
{props.children}
+ aria-current={isCurrent ? "page" : undefined}> + {props.icon && ( +