From ed3eba27ec9fa92d09763d2b193a1e25baf12c6e Mon Sep 17 00:00:00 2001 From: Om Prakash Das Date: Thu, 2 Jul 2026 18:39:11 +0530 Subject: [PATCH] first commit --- .dockerignore | 8 + .gitignore | 25 + .prettierrc | 19 + CLAUDE.md | 815 +++ Dockerfile | 18 + README.md | 65 + docker-compose.yml | 11 + index.html | 94 + nginx.conf | 21 + package-lock.json | 6024 +++++++++++++++++ package.json | 58 + pnpm-lock.yaml | 4102 +++++++++++ public/apple-touch-icon.png | Bin 0 -> 13533 bytes public/favicon.svg | 10 + public/icon-512.png | Bin 0 -> 89362 bytes public/og-image.png | Bin 0 -> 222473 bytes public/robots.txt | 2 + public/site.webmanifest | 14 + .../application/carousel/carousel-base.tsx | 306 + .../application/charts/charts-base.tsx | 138 + .../application/empty-state/empty-state.tsx | 343 + .../file-upload/file-upload-base.tsx | 392 ++ .../loading-indicator/loading-indicator.tsx | 121 + src/components/application/modals/modal.tsx | 39 + .../pagination/pagination-base.tsx | 376 + .../application/pagination/pagination-dot.tsx | 52 + .../pagination/pagination-line.tsx | 48 + .../application/pagination/pagination.tsx | 480 ++ .../slideout-menus/slideout-menu.tsx | 121 + src/components/application/table/table.tsx | 305 + src/components/application/tabs/tabs.tsx | 228 + .../base/avatar/avatar-label-group.tsx | 29 + .../base/avatar/avatar-profile-photo.tsx | 135 + src/components/base/avatar/avatar.tsx | 160 + .../base-components/avatar-add-button.tsx | 32 + .../base-components/avatar-company-icon.tsx | 24 + .../avatar/base-components/avatar-count.tsx | 14 + .../avatar-online-indicator.tsx | 48 + .../base/avatar/base-components/index.tsx | 4 + .../avatar/base-components/verified-tick.tsx | 32 + src/components/base/avatar/utils.ts | 12 + src/components/base/badges/badge-groups.tsx | 174 + src/components/base/badges/badge-types.ts | 264 + src/components/base/badges/badges.tsx | 415 ++ .../base/button-group/button-group.tsx | 104 + .../buttons/app-store-buttons-outline.tsx | 376 + .../base/buttons/app-store-buttons.tsx | 565 ++ .../base/buttons/button-utility.tsx | 117 + src/components/base/buttons/button.tsx | 257 + src/components/base/buttons/close-button.tsx | 40 + src/components/base/buttons/social-button.tsx | 143 + src/components/base/buttons/social-logos.tsx | 113 + src/components/base/checkbox/checkbox.tsx | 117 + .../dropdown/dropdown-account-breadcrumb.tsx | 89 + .../base/dropdown/dropdown-account-button.tsx | 72 + .../dropdown/dropdown-account-card-md.tsx | 97 + .../dropdown/dropdown-account-card-sm.tsx | 99 + .../dropdown/dropdown-account-card-xs.tsx | 76 + .../base/dropdown/dropdown-avatar.tsx | 78 + .../dropdown/dropdown-button-advanced.tsx | 115 + .../base/dropdown/dropdown-button-link.tsx | 51 + .../base/dropdown/dropdown-button-simple.tsx | 41 + .../base/dropdown/dropdown-icon-advanced.tsx | 96 + .../base/dropdown/dropdown-icon-simple.tsx | 37 + .../base/dropdown/dropdown-integration.tsx | 59 + .../dropdown/dropdown-search-advanced.tsx | 93 + .../base/dropdown/dropdown-search-simple.tsx | 62 + src/components/base/dropdown/dropdown.tsx | 192 + src/components/base/form/form.tsx | 8 + src/components/base/input/hint-text.tsx | 36 + src/components/base/input/input-date.tsx | 263 + src/components/base/input/input-file.tsx | 141 + src/components/base/input/input-group.tsx | 155 + src/components/base/input/input-number.tsx | 195 + .../base/input/input-tags-outer.tsx | 211 + src/components/base/input/input-tags.tsx | 321 + src/components/base/input/input.tsx | 304 + src/components/base/input/label.tsx | 60 + src/components/base/input/pin-input.tsx | 152 + .../progress-indicators/progress-circles.tsx | 174 + .../progress-indicators.tsx | 121 + .../progress-indicators/simple-circle.tsx | 27 + .../base/radio-buttons/radio-buttons.tsx | 121 + src/components/base/select/combobox.tsx | 174 + src/components/base/select/multi-select.tsx | 327 + src/components/base/select/popover.tsx | 35 + src/components/base/select/select-item.tsx | 133 + src/components/base/select/select-native.tsx | 95 + src/components/base/select/select-shared.tsx | 49 + src/components/base/select/select.tsx | 134 + src/components/base/select/tag-select.tsx | 401 ++ src/components/base/slider/slider.tsx | 73 + .../tags/base-components/tag-checkbox.tsx | 43 + .../base/tags/base-components/tag-close-x.tsx | 32 + src/components/base/tags/tags.tsx | 183 + src/components/base/textarea/textarea.tsx | 120 + src/components/base/toggle/toggle.tsx | 137 + src/components/base/tooltip/tooltip.tsx | 107 + src/components/foundations/dot-icon.tsx | 22 + .../featured-icon/featured-icon.tsx | 154 + .../integration-icons/bolt-icon.tsx | 16 + .../integration-icons/chatgpt-icon.tsx | 14 + .../integration-icons/claude-icon.tsx | 14 + .../integration-icons/cursor-icon.tsx | 14 + .../integration-icons/figma-icon.tsx | 40 + .../integration-icons/gemini-icon.tsx | 240 + .../integration-icons/github-icon.tsx | 16 + .../integration-icons/grok-icon.tsx | 16 + .../foundations/integration-icons/index.tsx | 16 + .../integration-icons/lovable-icon.tsx | 123 + .../integration-icons/nextjs-icon.tsx | 57 + .../integration-icons/perplexity-icon.tsx | 25 + .../integration-icons/react-icon.tsx | 22 + .../integration-icons/replit-icon.tsx | 24 + .../integration-icons/tailwind-css-icon.tsx | 14 + .../foundations/integration-icons/v0-icon.tsx | 20 + .../integration-icons/vite-icon.tsx | 56 + .../logo/untitledui-logo-minimal.tsx | 170 + .../foundations/logo/untitledui-logo.tsx | 58 + .../foundations/payment-icons/affirm-icon.tsx | 28 + .../payment-icons/afterpay-icon.tsx | 40 + .../foundations/payment-icons/alipay-icon.tsx | 48 + .../foundations/payment-icons/amazon-icon.tsx | 28 + .../foundations/payment-icons/amex-icon.tsx | 17 + .../payment-icons/apple-pay-icon.tsx | 25 + .../foundations/payment-icons/ayden-icon.tsx | 35 + .../payment-icons/bancontact-icon.tsx | 32 + .../payment-icons/binance-pay-icon.tsx | 56 + .../payment-icons/bitcoin-cash-icon.tsx | 22 + .../payment-icons/bitcoin-icon.tsx | 22 + .../foundations/payment-icons/bitpay-icon.tsx | 22 + .../payment-icons/braintree-icon.tsx | 107 + .../payment-icons/cash-app-pay-icon.tsx | 21 + .../payment-icons/citadele-icon.tsx | 22 + .../payment-icons/coinbase-icon.tsx | 22 + .../payment-icons/diners-club-icon.tsx | 24 + .../payment-icons/discover-icon.tsx | 32 + .../foundations/payment-icons/elo-icon.tsx | 36 + .../payment-icons/etherium-icon.tsx | 25 + .../payment-icons/forbrugsforeningen-icon.tsx | 22 + .../payment-icons/giropay-icon.tsx | 30 + .../payment-icons/google-pay-icon.tsx | 40 + .../foundations/payment-icons/ideal-icon.tsx | 28 + .../foundations/payment-icons/index.tsx | 56 + .../payment-icons/interac-icon.tsx | 37 + .../foundations/payment-icons/jcb-icon.tsx | 44 + .../foundations/payment-icons/klarna-icon.tsx | 15 + .../payment-icons/lightcoin-icon.tsx | 24 + .../payment-icons/maestro-icon.tsx | 32 + .../payment-icons/mastercard-icon.tsx | 37 + .../payment-icons/payoneer-icon.tsx | 30 + .../foundations/payment-icons/paypal-icon.tsx | 43 + .../payment-icons/paysafe-icon.tsx | 30 + .../foundations/payment-icons/qiwi-icon.tsx | 22 + .../payment-icons/razorpay-icon.tsx | 52 + .../payment-icons/revolut-icon.tsx | 24 + .../foundations/payment-icons/ru-pay-icon.tsx | 40 + .../payment-icons/samsung-pay-icon.tsx | 52 + .../foundations/payment-icons/sepa-icon.tsx | 28 + .../payment-icons/shop-pay-icon.tsx | 15 + .../payment-icons/shopee-pay-icon.tsx | 59 + .../foundations/payment-icons/skrill-icon.tsx | 22 + .../foundations/payment-icons/sofort-icon.tsx | 17 + .../foundations/payment-icons/stripe-icon.tsx | 25 + .../payment-icons/union-pay-icon.tsx | 35 + .../foundations/payment-icons/upi-icon.tsx | 110 + .../foundations/payment-icons/venmo-icon.tsx | 38 + .../payment-icons/verifone-icon.tsx | 30 + .../foundations/payment-icons/visa-icon.tsx | 25 + .../payment-icons/we-chat-icon.tsx | 22 + .../payment-icons/we-chat-pay-icon.tsx | 30 + .../payment-icons/webmoney-icon.tsx | 26 + .../foundations/payment-icons/wise-icon.tsx | 15 + .../foundations/payment-icons/yandex-icon.tsx | 22 + .../foundations/payment-icons/zelle-icon.tsx | 39 + .../payment-icons/zip-pay-icon.tsx | 43 + .../foundations/play-button-icon.tsx | 45 + src/components/foundations/rating-badge.tsx | 142 + src/components/foundations/rating-stars.tsx | 75 + .../foundations/social-icons/angel-list.tsx | 18 + .../foundations/social-icons/apple.tsx | 18 + .../foundations/social-icons/clubhouse.tsx | 22 + .../foundations/social-icons/discord.tsx | 28 + .../foundations/social-icons/dribbble.tsx | 20 + .../foundations/social-icons/facebook.tsx | 18 + .../foundations/social-icons/figma.tsx | 20 + .../foundations/social-icons/github.tsx | 20 + .../foundations/social-icons/google.tsx | 20 + .../foundations/social-icons/index.tsx | 22 + .../foundations/social-icons/instagram.tsx | 26 + .../foundations/social-icons/layers.tsx | 36 + .../foundations/social-icons/linkedin.tsx | 18 + .../foundations/social-icons/pinterest.tsx | 18 + .../foundations/social-icons/reddit.tsx | 20 + .../foundations/social-icons/signal.tsx | 18 + .../foundations/social-icons/snapchat.tsx | 18 + .../foundations/social-icons/telegram.tsx | 20 + .../foundations/social-icons/tiktok.tsx | 18 + .../foundations/social-icons/tumblr.tsx | 18 + .../foundations/social-icons/twitter.tsx | 18 + src/components/foundations/social-icons/x.tsx | 20 + .../foundations/social-icons/youtube.tsx | 18 + .../base-components/nav-menu-item.tsx | 40 + .../dropdown-header-navigation.tsx | 51 + .../marketing/header-navigation/header.tsx | 248 + .../background-patterns/circle.tsx | 113 + .../background-patterns/grid-check.tsx | 2520 +++++++ .../background-patterns/grid.tsx | 231 + .../background-patterns/index.tsx | 25 + .../background-patterns/square.tsx | 180 + .../shared-assets/credit-card/credit-card.tsx | 235 + .../shared-assets/credit-card/icons.tsx | 73 + .../shared-assets/illustrations/box.tsx | 257 + .../shared-assets/illustrations/cloud.tsx | 281 + .../illustrations/credit-card.tsx | 303 + .../shared-assets/illustrations/documents.tsx | 538 ++ .../shared-assets/illustrations/index.tsx | 26 + .../shared-assets/iphone-mockup.tsx | 170 + src/components/shared-assets/qr-code.tsx | 83 + .../shared-assets/section-divider.tsx | 10 + src/features/editor-pane.tsx | 49 + src/features/header.tsx | 107 + src/features/preview-pane.tsx | 39 + src/features/upload-zone.tsx | 50 + src/hooks/use-breakpoint.ts | 34 + src/hooks/use-clipboard.ts | 77 + src/hooks/use-document.ts | 75 + src/hooks/use-resize-observer.ts | 67 + src/hooks/use-resolved-theme.ts | 20 + src/lib/export.ts | 142 + src/lib/markdown.ts | 18 + src/lib/sample.ts | 52 + src/main.tsx | 24 + src/pages/home-screen.tsx | 75 + src/pages/markdown-studio.tsx | 154 + src/pages/not-found.tsx | 32 + src/providers/router-provider.tsx | 16 + src/providers/theme-provider.tsx | 82 + src/styles/globals.css | 75 + src/styles/markdown.css | 87 + src/styles/theme.css | 856 +++ src/styles/typography.css | 430 ++ src/types/vite-env.d.ts | 1 + src/utils/countries.tsx | 1349 ++++ src/utils/cx.ts | 24 + src/utils/is-react-component.ts | 33 + src/utils/timezones.tsx | 57 + tsconfig.app.json | 30 + tsconfig.json | 13 + tsconfig.node.json | 24 + vite.config.ts | 13 + 251 files changed, 36276 insertions(+) create mode 100644 .dockerignore create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 CLAUDE.md create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 docker-compose.yml create mode 100644 index.html create mode 100644 nginx.conf create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 public/apple-touch-icon.png create mode 100644 public/favicon.svg create mode 100644 public/icon-512.png create mode 100644 public/og-image.png create mode 100644 public/robots.txt create mode 100644 public/site.webmanifest create mode 100644 src/components/application/carousel/carousel-base.tsx create mode 100644 src/components/application/charts/charts-base.tsx create mode 100644 src/components/application/empty-state/empty-state.tsx create mode 100644 src/components/application/file-upload/file-upload-base.tsx create mode 100644 src/components/application/loading-indicator/loading-indicator.tsx create mode 100644 src/components/application/modals/modal.tsx create mode 100644 src/components/application/pagination/pagination-base.tsx create mode 100644 src/components/application/pagination/pagination-dot.tsx create mode 100644 src/components/application/pagination/pagination-line.tsx create mode 100644 src/components/application/pagination/pagination.tsx create mode 100644 src/components/application/slideout-menus/slideout-menu.tsx create mode 100644 src/components/application/table/table.tsx create mode 100644 src/components/application/tabs/tabs.tsx create mode 100644 src/components/base/avatar/avatar-label-group.tsx create mode 100644 src/components/base/avatar/avatar-profile-photo.tsx create mode 100644 src/components/base/avatar/avatar.tsx create mode 100644 src/components/base/avatar/base-components/avatar-add-button.tsx create mode 100644 src/components/base/avatar/base-components/avatar-company-icon.tsx create mode 100644 src/components/base/avatar/base-components/avatar-count.tsx create mode 100644 src/components/base/avatar/base-components/avatar-online-indicator.tsx create mode 100644 src/components/base/avatar/base-components/index.tsx create mode 100644 src/components/base/avatar/base-components/verified-tick.tsx create mode 100644 src/components/base/avatar/utils.ts create mode 100644 src/components/base/badges/badge-groups.tsx create mode 100644 src/components/base/badges/badge-types.ts create mode 100644 src/components/base/badges/badges.tsx create mode 100644 src/components/base/button-group/button-group.tsx create mode 100644 src/components/base/buttons/app-store-buttons-outline.tsx create mode 100644 src/components/base/buttons/app-store-buttons.tsx create mode 100644 src/components/base/buttons/button-utility.tsx create mode 100644 src/components/base/buttons/button.tsx create mode 100644 src/components/base/buttons/close-button.tsx create mode 100644 src/components/base/buttons/social-button.tsx create mode 100644 src/components/base/buttons/social-logos.tsx create mode 100644 src/components/base/checkbox/checkbox.tsx create mode 100644 src/components/base/dropdown/dropdown-account-breadcrumb.tsx create mode 100644 src/components/base/dropdown/dropdown-account-button.tsx create mode 100644 src/components/base/dropdown/dropdown-account-card-md.tsx create mode 100644 src/components/base/dropdown/dropdown-account-card-sm.tsx create mode 100644 src/components/base/dropdown/dropdown-account-card-xs.tsx create mode 100644 src/components/base/dropdown/dropdown-avatar.tsx create mode 100644 src/components/base/dropdown/dropdown-button-advanced.tsx create mode 100644 src/components/base/dropdown/dropdown-button-link.tsx create mode 100644 src/components/base/dropdown/dropdown-button-simple.tsx create mode 100644 src/components/base/dropdown/dropdown-icon-advanced.tsx create mode 100644 src/components/base/dropdown/dropdown-icon-simple.tsx create mode 100644 src/components/base/dropdown/dropdown-integration.tsx create mode 100644 src/components/base/dropdown/dropdown-search-advanced.tsx create mode 100644 src/components/base/dropdown/dropdown-search-simple.tsx create mode 100644 src/components/base/dropdown/dropdown.tsx create mode 100644 src/components/base/form/form.tsx create mode 100644 src/components/base/input/hint-text.tsx create mode 100644 src/components/base/input/input-date.tsx create mode 100644 src/components/base/input/input-file.tsx create mode 100644 src/components/base/input/input-group.tsx create mode 100644 src/components/base/input/input-number.tsx create mode 100644 src/components/base/input/input-tags-outer.tsx create mode 100644 src/components/base/input/input-tags.tsx create mode 100644 src/components/base/input/input.tsx create mode 100644 src/components/base/input/label.tsx create mode 100644 src/components/base/input/pin-input.tsx create mode 100644 src/components/base/progress-indicators/progress-circles.tsx create mode 100644 src/components/base/progress-indicators/progress-indicators.tsx create mode 100644 src/components/base/progress-indicators/simple-circle.tsx create mode 100644 src/components/base/radio-buttons/radio-buttons.tsx create mode 100644 src/components/base/select/combobox.tsx create mode 100644 src/components/base/select/multi-select.tsx create mode 100644 src/components/base/select/popover.tsx create mode 100644 src/components/base/select/select-item.tsx create mode 100644 src/components/base/select/select-native.tsx create mode 100644 src/components/base/select/select-shared.tsx create mode 100644 src/components/base/select/select.tsx create mode 100644 src/components/base/select/tag-select.tsx create mode 100644 src/components/base/slider/slider.tsx create mode 100644 src/components/base/tags/base-components/tag-checkbox.tsx create mode 100644 src/components/base/tags/base-components/tag-close-x.tsx create mode 100644 src/components/base/tags/tags.tsx create mode 100644 src/components/base/textarea/textarea.tsx create mode 100644 src/components/base/toggle/toggle.tsx create mode 100644 src/components/base/tooltip/tooltip.tsx create mode 100644 src/components/foundations/dot-icon.tsx create mode 100644 src/components/foundations/featured-icon/featured-icon.tsx create mode 100644 src/components/foundations/integration-icons/bolt-icon.tsx create mode 100644 src/components/foundations/integration-icons/chatgpt-icon.tsx create mode 100644 src/components/foundations/integration-icons/claude-icon.tsx create mode 100644 src/components/foundations/integration-icons/cursor-icon.tsx create mode 100644 src/components/foundations/integration-icons/figma-icon.tsx create mode 100644 src/components/foundations/integration-icons/gemini-icon.tsx create mode 100644 src/components/foundations/integration-icons/github-icon.tsx create mode 100644 src/components/foundations/integration-icons/grok-icon.tsx create mode 100644 src/components/foundations/integration-icons/index.tsx create mode 100644 src/components/foundations/integration-icons/lovable-icon.tsx create mode 100644 src/components/foundations/integration-icons/nextjs-icon.tsx create mode 100644 src/components/foundations/integration-icons/perplexity-icon.tsx create mode 100644 src/components/foundations/integration-icons/react-icon.tsx create mode 100644 src/components/foundations/integration-icons/replit-icon.tsx create mode 100644 src/components/foundations/integration-icons/tailwind-css-icon.tsx create mode 100644 src/components/foundations/integration-icons/v0-icon.tsx create mode 100644 src/components/foundations/integration-icons/vite-icon.tsx create mode 100644 src/components/foundations/logo/untitledui-logo-minimal.tsx create mode 100644 src/components/foundations/logo/untitledui-logo.tsx create mode 100644 src/components/foundations/payment-icons/affirm-icon.tsx create mode 100644 src/components/foundations/payment-icons/afterpay-icon.tsx create mode 100644 src/components/foundations/payment-icons/alipay-icon.tsx create mode 100644 src/components/foundations/payment-icons/amazon-icon.tsx create mode 100644 src/components/foundations/payment-icons/amex-icon.tsx create mode 100644 src/components/foundations/payment-icons/apple-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/ayden-icon.tsx create mode 100644 src/components/foundations/payment-icons/bancontact-icon.tsx create mode 100644 src/components/foundations/payment-icons/binance-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/bitcoin-cash-icon.tsx create mode 100644 src/components/foundations/payment-icons/bitcoin-icon.tsx create mode 100644 src/components/foundations/payment-icons/bitpay-icon.tsx create mode 100644 src/components/foundations/payment-icons/braintree-icon.tsx create mode 100644 src/components/foundations/payment-icons/cash-app-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/citadele-icon.tsx create mode 100644 src/components/foundations/payment-icons/coinbase-icon.tsx create mode 100644 src/components/foundations/payment-icons/diners-club-icon.tsx create mode 100644 src/components/foundations/payment-icons/discover-icon.tsx create mode 100644 src/components/foundations/payment-icons/elo-icon.tsx create mode 100644 src/components/foundations/payment-icons/etherium-icon.tsx create mode 100644 src/components/foundations/payment-icons/forbrugsforeningen-icon.tsx create mode 100644 src/components/foundations/payment-icons/giropay-icon.tsx create mode 100644 src/components/foundations/payment-icons/google-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/ideal-icon.tsx create mode 100644 src/components/foundations/payment-icons/index.tsx create mode 100644 src/components/foundations/payment-icons/interac-icon.tsx create mode 100644 src/components/foundations/payment-icons/jcb-icon.tsx create mode 100644 src/components/foundations/payment-icons/klarna-icon.tsx create mode 100644 src/components/foundations/payment-icons/lightcoin-icon.tsx create mode 100644 src/components/foundations/payment-icons/maestro-icon.tsx create mode 100644 src/components/foundations/payment-icons/mastercard-icon.tsx create mode 100644 src/components/foundations/payment-icons/payoneer-icon.tsx create mode 100644 src/components/foundations/payment-icons/paypal-icon.tsx create mode 100644 src/components/foundations/payment-icons/paysafe-icon.tsx create mode 100644 src/components/foundations/payment-icons/qiwi-icon.tsx create mode 100644 src/components/foundations/payment-icons/razorpay-icon.tsx create mode 100644 src/components/foundations/payment-icons/revolut-icon.tsx create mode 100644 src/components/foundations/payment-icons/ru-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/samsung-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/sepa-icon.tsx create mode 100644 src/components/foundations/payment-icons/shop-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/shopee-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/skrill-icon.tsx create mode 100644 src/components/foundations/payment-icons/sofort-icon.tsx create mode 100644 src/components/foundations/payment-icons/stripe-icon.tsx create mode 100644 src/components/foundations/payment-icons/union-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/upi-icon.tsx create mode 100644 src/components/foundations/payment-icons/venmo-icon.tsx create mode 100644 src/components/foundations/payment-icons/verifone-icon.tsx create mode 100644 src/components/foundations/payment-icons/visa-icon.tsx create mode 100644 src/components/foundations/payment-icons/we-chat-icon.tsx create mode 100644 src/components/foundations/payment-icons/we-chat-pay-icon.tsx create mode 100644 src/components/foundations/payment-icons/webmoney-icon.tsx create mode 100644 src/components/foundations/payment-icons/wise-icon.tsx create mode 100644 src/components/foundations/payment-icons/yandex-icon.tsx create mode 100644 src/components/foundations/payment-icons/zelle-icon.tsx create mode 100644 src/components/foundations/payment-icons/zip-pay-icon.tsx create mode 100644 src/components/foundations/play-button-icon.tsx create mode 100644 src/components/foundations/rating-badge.tsx create mode 100644 src/components/foundations/rating-stars.tsx create mode 100644 src/components/foundations/social-icons/angel-list.tsx create mode 100644 src/components/foundations/social-icons/apple.tsx create mode 100644 src/components/foundations/social-icons/clubhouse.tsx create mode 100644 src/components/foundations/social-icons/discord.tsx create mode 100644 src/components/foundations/social-icons/dribbble.tsx create mode 100644 src/components/foundations/social-icons/facebook.tsx create mode 100644 src/components/foundations/social-icons/figma.tsx create mode 100644 src/components/foundations/social-icons/github.tsx create mode 100644 src/components/foundations/social-icons/google.tsx create mode 100644 src/components/foundations/social-icons/index.tsx create mode 100644 src/components/foundations/social-icons/instagram.tsx create mode 100644 src/components/foundations/social-icons/layers.tsx create mode 100644 src/components/foundations/social-icons/linkedin.tsx create mode 100644 src/components/foundations/social-icons/pinterest.tsx create mode 100644 src/components/foundations/social-icons/reddit.tsx create mode 100644 src/components/foundations/social-icons/signal.tsx create mode 100644 src/components/foundations/social-icons/snapchat.tsx create mode 100644 src/components/foundations/social-icons/telegram.tsx create mode 100644 src/components/foundations/social-icons/tiktok.tsx create mode 100644 src/components/foundations/social-icons/tumblr.tsx create mode 100644 src/components/foundations/social-icons/twitter.tsx create mode 100644 src/components/foundations/social-icons/x.tsx create mode 100644 src/components/foundations/social-icons/youtube.tsx create mode 100644 src/components/marketing/header-navigation/base-components/nav-menu-item.tsx create mode 100644 src/components/marketing/header-navigation/dropdown-header-navigation.tsx create mode 100644 src/components/marketing/header-navigation/header.tsx create mode 100644 src/components/shared-assets/background-patterns/circle.tsx create mode 100644 src/components/shared-assets/background-patterns/grid-check.tsx create mode 100644 src/components/shared-assets/background-patterns/grid.tsx create mode 100644 src/components/shared-assets/background-patterns/index.tsx create mode 100644 src/components/shared-assets/background-patterns/square.tsx create mode 100644 src/components/shared-assets/credit-card/credit-card.tsx create mode 100644 src/components/shared-assets/credit-card/icons.tsx create mode 100644 src/components/shared-assets/illustrations/box.tsx create mode 100644 src/components/shared-assets/illustrations/cloud.tsx create mode 100644 src/components/shared-assets/illustrations/credit-card.tsx create mode 100644 src/components/shared-assets/illustrations/documents.tsx create mode 100644 src/components/shared-assets/illustrations/index.tsx create mode 100644 src/components/shared-assets/iphone-mockup.tsx create mode 100644 src/components/shared-assets/qr-code.tsx create mode 100644 src/components/shared-assets/section-divider.tsx create mode 100644 src/features/editor-pane.tsx create mode 100644 src/features/header.tsx create mode 100644 src/features/preview-pane.tsx create mode 100644 src/features/upload-zone.tsx create mode 100644 src/hooks/use-breakpoint.ts create mode 100644 src/hooks/use-clipboard.ts create mode 100644 src/hooks/use-document.ts create mode 100644 src/hooks/use-resize-observer.ts create mode 100644 src/hooks/use-resolved-theme.ts create mode 100644 src/lib/export.ts create mode 100644 src/lib/markdown.ts create mode 100644 src/lib/sample.ts create mode 100644 src/main.tsx create mode 100644 src/pages/home-screen.tsx create mode 100644 src/pages/markdown-studio.tsx create mode 100644 src/pages/not-found.tsx create mode 100644 src/providers/router-provider.tsx create mode 100644 src/providers/theme-provider.tsx create mode 100755 src/styles/globals.css create mode 100644 src/styles/markdown.css create mode 100644 src/styles/theme.css create mode 100644 src/styles/typography.css create mode 100644 src/types/vite-env.d.ts create mode 100644 src/utils/countries.tsx create mode 100644 src/utils/cx.ts create mode 100644 src/utils/is-react-component.ts create mode 100644 src/utils/timezones.tsx create mode 100644 tsconfig.app.json create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..b1ffc8f --- /dev/null +++ b/.dockerignore @@ -0,0 +1,8 @@ +node_modules +dist +.git +.github +.claude +Dockerfile +docker-compose.yml +*.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7ceb59f --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? +.env diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f4b9b99 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,19 @@ +{ + "printWidth": 160, + "tabWidth": 4, + "plugins": [ + "@trivago/prettier-plugin-sort-imports", + "prettier-plugin-tailwindcss" + ], + "tailwindFunctions": ["sortCx", "cx"], + "importOrder": [ + "^react$", + "^react-dom$", + "^(?!react$|react-dom$|@/|\\.).*", + "^@/.*", + "^\\.{1,2}/.*" + ], + "importOrderSeparation": false, + "importOrderSortSpecifiers": true, + "tailwindStylesheet": "./src/styles/globals.css" +} diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..5d70e8f --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,815 @@ +## Project Overview + +This is an **Untitled UI React** component library project built with: + +- **React 19** with TypeScript +- **Tailwind CSS v4.2** for styling +- **React Aria Components** as the foundation for accessibility and behavior + +## Key Architecture Principles + +### Component Foundation + +- All components are built on **React Aria Components** for consistent accessibility and behavior +- Components follow the compound component pattern with sub-components (e.g., `Select.Item`, `Select.ComboBox`) +- TypeScript is used throughout for type safety + +### Import Naming Convention + +**CRITICAL**: All imports from `react-aria-components` must be prefixed with `Aria*` for clarity and consistency: + +```typescript +// ✅ Correct +import { Button as AriaButton, TextField as AriaTextField } from "react-aria-components"; +// ❌ Incorrect +import { Button, TextField } from "react-aria-components"; +``` + +This convention: + +- Prevents naming conflicts with custom components +- Makes it clear when using base React Aria components +- Maintains consistency across the entire codebase + +### File Naming Convention + +**IMPORTANT**: All files must be named in **kebab-case** for consistency: + +``` +✅ Correct: +- date-picker.tsx +- user-profile.tsx +- api-client.ts +- auth-context.tsx + +❌ Incorrect: +- DatePicker.tsx +- userProfile.tsx +- apiClient.ts +- AuthContext.tsx +``` + +This applies to all file types including: + +- Component files (.tsx, .jsx) +- TypeScript/JavaScript files (.ts, .js) +- Style files (.css, .scss) +- Test files (.test.ts, .spec.tsx) +- Configuration files (when creating new ones) + +## Development Commands + +```bash +# Development +npm run dev # Start Vite development server (http://localhost:5173) +npm run build # Build for production (TypeScript compilation + Vite build) +``` + +## Project Structure + +### Application Architecture + +``` +src/ +├── components/ +│ ├── base/ # Core UI components (Button, Input, Select, etc.) +│ ├── application/ # Complex application components +│ ├── foundations/ # Design tokens and foundational elements +│ ├── marketing/ # Marketing-specific components +│ └── shared-assets/ # Reusable assets and illustrations +├── hooks/ # Custom React hooks +├── pages/ # Route components +├── providers/ # React context providers +├── styles/ # Global styles and theme +├── types/ # TypeScript type definitions +└── utils/ # Utility functions +``` + +### Component Patterns + +#### 1. Base Components + +Located in `components/base/`, these are the building blocks: + +- `Button` - All button variants with loading states +- `Input` - Text inputs with validation and icons +- `Select` - Dropdown selections with complex options +- `Checkbox`, `Radio`, `Toggle` - Form controls +- `Avatar`, `Badge`, `Tooltip` - Display components + +#### 2. Application Components + +Located in `components/application/`, these are complex UI patterns: + +- `DatePicker` - Calendar-based date selection +- `Modal` - Overlay dialogs +- `Pagination` - Data navigation +- `Table` - Data display with sorting +- `Tabs` - Content organization + +#### 3. Styling Architecture + +- Uses a `sortCx` utility for organized style objects +- Follows size variants: `sm`, `md`, `lg`, `xl` +- Color variants: `primary`, `secondary`, `tertiary`, `destructive`, etc. +- Responsive and state-aware styling with Tailwind + +#### 4. Component Props Pattern + +```typescript +interface CommonProps { + size?: "sm" | "md" | "lg"; + isDisabled?: boolean; + isLoading?: boolean; + // ... other common props +} + +interface ButtonProps extends CommonProps, HTMLButtonElement { + color?: "primary" | "secondary" | "tertiary"; + iconLeading?: FC | ReactNode; + iconTrailing?: FC | ReactNode; +} +``` + +## Styling Guidelines + +### Tailwind CSS v4.2 + +- Uses the latest Tailwind CSS v4.2 features +- Custom design tokens defined in theme configuration +- Consistent spacing, colors, and typography scales + +### Brand Color Customization + +To change the main brand color across the entire application: + +1. **Update Brand Color Variables**: Edit `src/styles/theme.css` and modify the `--color-brand-*` variables +2. **Maintain Color Scale**: Ensure you provide a complete color scale from 25 to 950 with proper contrast ratios +3. **Example Brand Color Scale**: + ```css + --color-brand-25: rgb(252 250 255); /* Lightest tint */ + --color-brand-50: rgb(249 245 255); + --color-brand-100: rgb(244 235 255); + --color-brand-200: rgb(233 215 254); + --color-brand-300: rgb(214 187 251); + --color-brand-400: rgb(182 146 246); + --color-brand-500: rgb(158 119 237); /* Base brand color */ + --color-brand-600: rgb(127 86 217); /* Primary interactive color */ + --color-brand-700: rgb(105 65 198); + --color-brand-800: rgb(83 56 158); + --color-brand-900: rgb(66 48 125); + --color-brand-950: rgb(44 28 95); /* Darkest shade */ + ``` + +The color scale automatically adapts to both light and dark modes through the CSS variable system. + +### Style Organization + +```typescript +export const styles = sortCx({ + common: { + root: "base-classes-here", + icon: "icon-classes-here", + }, + sizes: { + sm: { root: "small-size-classes" }, + md: { root: "medium-size-classes" }, + }, + colors: { + primary: { root: "primary-color-classes" }, + secondary: { root: "secondary-color-classes" }, + }, +}); +``` + +### Utility Functions + +- `cx()` - Class name utility (from `@/utils/cx`) +- `sortCx()` - Organized style objects +- `isReactComponent()` - Component type checking + +## Icon Usage + +### Available Libraries + +- `@untitledui/icons` - 1,100+ line-style icons (free) +- `@untitledui/file-icons` - File type icons +- `@untitledui-pro/icons` - 4,600+ icons in 4 styles (Requires PRO access) + +### Import & Usage + +```typescript +// Recommended: Named imports (tree-shakeable) +import { Home01, Settings01, ChevronDown } from "@untitledui/icons"; + +// Component props - pass as reference + + +// Standalone usage + + +// As JSX element - MUST include data-icon + +``` + +### Styling + +```typescript +// Size: use size-4 (16px), size-5 (20px), size-6 (24px) + + +// Color: use semantic text colors + + +// Stroke width (line icons only) + + +// Accessibility: decorative icons need aria-hidden +