[ { "path": ".eslintignore", "content": ".eslintrc.js\ndist\nout\napps/nativewind\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n root: true,\n // This tells ESLint to load the config from the package `eslint-config-custom`\n extends: ['custom'],\n settings: {\n next: {\n rootDir: ['apps/*/'],\n },\n },\n};\n" }, { "path": ".github/.kodiak.toml", "content": "# .kodiak.toml\nversion = 1\n\n[merge]\nautomerge_label = \"ship it\"\nrequire_automerge_label = false\nmethod = \"squash\"\ndelete_branch_on_merge = true\noptimistic_updates = true\nprioritize_ready_to_merge = true\nnotify_on_conflict = false\nblocking_labels = [\"no automerge\"]\n\n[merge.message]\ntitle = \"pull_request_title\"\nbody = \"pull_request_body\"\ninclude_coauthors = false\ninclude_pr_number = true\nbody_type = \"markdown\"\nstrip_html_comments = true\n\n[update]\nautoupdate_label = \"keep up-to-date\"\n" }, { "path": ".github/CODEOWNERS", "content": "* @baked-dev @Wyatt-SG @fraserdale @arturbien\n" }, { "path": ".github/ISSUE_TEMPLATE/1.report_bug.yml", "content": "name: Bug Report\ndescription: Create a bug report for Frosted UI\nlabels: ['template: bug']\nbody:\n - type: markdown\n attributes:\n value: |\n This template is to report Frosted bugs.\n Component or documentation requests should be opened as [discussions](https://github.com/whopio/frosted-ui/discussions).\n\n Before opening a new issue, please do a [search](https://github.com/whopio/frosted-ui/issues) of existing issues and :+1: upvote the existing issue instead. This will result in a quicker resolution.\n\n - type: input\n attributes:\n label: Link to the code that reproduces this issue or a replay of the bug\n description: |\n A link to a **public** GitHub repository or a CodeSandbox\n\n If a minimal reproduction can't be created, please share a [replay](https://www.replay.io/) of the bug which doesn't require sharing a private repo.\n\n **Skipping this/providing an invalid link will result in the issue being closed**\n validations:\n required: true\n - type: textarea\n attributes:\n label: To Reproduce\n description: A step-by-step description of how to reproduce the issue, based on the linked reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.\n placeholder: |\n 1. Render add leftIcon to Button\n 2. Click on Button\n 3. Y will happen\n validations:\n required: true\n - type: textarea\n attributes:\n label: Current vs. Expected behavior\n description: A clear and concise description of what the bug is, and what you expected to happen.\n placeholder: 'Following the steps from the previous section, I expected A to happen, but I observed B instead'\n validations:\n required: true\n - type: checkboxes\n attributes:\n label: Verify canary release\n description: 'Please run `npm install frosted-ui@canary` to try the canary version of Frosted that ships often. It includes all features and fixes that have not been released to the stable version yet. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'\n options:\n - label: I verified that the issue exists in the latest Frosted canary release\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Request new component\n url: https://github.com/whopio/frosted-ui/discussions/new?category=new-component\n about: Request a component to be added to Frosted UI\n - name: Request documentation\n url: https://github.com/whopio/frosted-ui/discussions/new?category=documentation\n about: Request documentation enhancements or changes\n" }, { "path": ".github/workflows/preview-release.yml", "content": "name: Publish Preview Release\non: [push, pull_request]\n\npermissions: {}\n\njobs:\n preview:\n name: Publish preview packages\n runs-on: ubuntu-latest\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n\n - name: Setup node\n uses: actions/setup-node@v4\n with:\n node-version: 22.x\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build packages\n run: pnpm turbo build\n\n - name: Publish preview release\n run: pnpm dlx pkg-pr-new publish --pnpm --packageManager=pnpm './packages/frosted-ui' './packages/frosted-ui-colors' './packages/frosted-ui-icons' './packages/frosted-ui-react-native'\n" }, { "path": ".github/workflows/pull-comment.yml", "content": "on:\n issue_comment:\n types:\n - created\n branches:\n - turbo-module/release-*\n excludeBranches:\n - turbo-module/release-*-canary\n\nname: Build, test, release\n\nconcurrency:\n group: update-relase-pr-${{ github.event.issue.number }}\n cancel-in-progress: false\n\njobs:\n update-relase-pr:\n name: Change the version of the release based on comments\n if: github.event.issue.pull_request\n runs-on: ubuntu-latest\n permissions:\n contents: write\n pull-requests: write\n steps:\n - uses: actions/checkout@v3\n with:\n ref: ${{ github.head_ref }}\n - name: Update package.json version number\n uses: whopio/turbo-module@v0.0.5\n with:\n action: update\n token: ${{ github.token }}\n" }, { "path": ".github/workflows/pull.yml", "content": "on:\n pull_request:\n types:\n - synchronize\n - opened\n\nname: PR\n\nconcurrency:\n group: pr-action-${{ github.event.pull_request.number }}\n cancel-in-progress: true\n\njobs:\n install:\n name: Install node modules\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n with:\n ref: ${{ github.head_ref }}\n - uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n - name: Setup node\n uses: actions/setup-node@v3\n with:\n node-version: 22.x\n check-latest: true\n cache: pnpm\n - name: Install all packages\n run: pnpm install\n\n lint:\n name: Lint repository\n needs: install\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n - name: Setup node\n uses: actions/setup-node@v3\n with:\n node-version: 22.x\n check-latest: true\n cache: pnpm\n - name: Install all packages\n run: pnpm install\n - name: Run eslint\n run: pnpx eslint@7.32.0 ./ --max-warnings 0\n - name: Run stylelint\n run: pnpm turbo lint:css\n\n build:\n name: Build packages\n needs: install\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n - name: Setup node\n uses: actions/setup-node@v3\n with:\n node-version: 22.x\n check-latest: true\n cache: pnpm\n - name: Install all packages\n run: pnpm install\n - name: Build packages\n run: pnpm turbo build\n\n test:\n name: Test repository\n needs: build\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n - name: Setup node\n uses: actions/setup-node@v3\n with:\n node-version: 22.x\n check-latest: true\n cache: pnpm\n - name: Install all packages\n run: pnpm install\n - name: Build packages\n run: pnpm turbo test\n" }, { "path": ".github/workflows/release.yml", "content": "on:\n push:\n branches:\n - main\n\nname: Build, test, release\n\nconcurrency:\n group: 'release'\n cancel-in-progress: false\n\njobs:\n release:\n name: Publish to npm and release on github\n runs-on: ubuntu-latest\n permissions:\n id-token: write\n contents: write\n pull-requests: write\n steps:\n - uses: actions/checkout@v3\n with:\n fetch-depth: 0\n ref: ${{ github.head_ref }}\n\n - name: Check package.json for version increase\n id: check\n uses: whopio/turbo-module@v0.1.0-canary.3\n with:\n action: check\n token: ${{ github.token }}\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n\n - name: Setup node\n uses: actions/setup-node@v4\n with:\n node-version: 22.x\n check-latest: true\n cache: pnpm\n\n - name: Debug OIDC env presence (no secrets)\n run: |\n echo \"GITHUB_ACTIONS=$GITHUB_ACTIONS\"\n echo \"ACTIONS_ID_TOKEN_REQUEST_URL: $([ -n \"$ACTIONS_ID_TOKEN_REQUEST_URL\" ] && echo present || echo missing)\"\n echo \"ACTIONS_ID_TOKEN_REQUEST_TOKEN: $([ -n \"$ACTIONS_ID_TOKEN_REQUEST_TOKEN\" ] && echo present || echo missing)\"\n echo \"node: $(node -v)\"\n echo \"npm: $(npm -v)\"\n\n - name: Upgrade npm for OIDC trusted publishing\n if: steps.check.outputs.can-publish == 'true'\n run: |\n corepack disable npm 2>/dev/null || true\n npm i -g npm@latest --force\n\n - name: Clear npm auth to force OIDC\n run: |\n npm config delete //registry.npmjs.org/:_authToken || true\n npm config delete @whop:registry || true\n if: steps.check.outputs.can-publish == 'true'\n\n - name: Install dependencies\n run: pnpm i\n\n - name: Fix bin permissions\n run: chmod +x node_modules/.bin/* packages/*/node_modules/.bin/* 2>/dev/null || true\n if: steps.check.outputs.can-publish == 'true'\n\n - name: Run turbo release flow\n env:\n NPM_CONFIG_PROVENANCE: 'true'\n NPM_CONFIG_REGISTRY: https://registry.npmjs.org\n NPM_CONFIG_ALWAYS_AUTH: 'false'\n NPM_CONFIG_LOGLEVEL: 'warn'\n TURBO_FORCE: 'true'\n TURBO_ENVIRONMENT_VARIABLES: ACTIONS_ID_TOKEN_REQUEST_URL,ACTIONS_ID_TOKEN_REQUEST_TOKEN,NPM_CONFIG_PROVENANCE,NPM_CONFIG_REGISTRY,NPM_CONFIG_ALWAYS_AUTH\n NODE_AUTH_TOKEN: ''\n run: pnpm turbo release ${{ steps.check.outputs.filter }} --env-mode=loose\n if: steps.check.outputs.can-publish == 'true'\n\n - name: Github Release\n id: release\n uses: whopio/turbo-module@v0.1.0-canary.3\n with:\n action: release\n token: ${{ github.token }}\n version: ${{ steps.check.outputs.version }}\n initial-commit: 3d821dfeec0e67a8b33de2993ba292e58b315d06\n if: steps.check.outputs.can-publish == 'true'\n\n - name: Sync auto-release PRs\n if: always()\n uses: whopio/turbo-module@v0.1.0-canary.3\n with:\n action: sync\n token: ${{ secrets.PAT_TOKEN }}\n published: ${{ steps.release.outputs.published }}\n initial-commit: 3d821dfeec0e67a8b33de2993ba292e58b315d06\n" }, { "path": ".github/workflows/sync-icons.yml", "content": "on:\n workflow_dispatch:\n\nname: Sync Icons from Figma\n\nconcurrency:\n group: 'sync-icons'\n cancel-in-progress: false\n\njobs:\n sync-icons:\n name: Generate icons and create PR\n runs-on: ubuntu-latest\n permissions:\n contents: write\n pull-requests: write\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n token: ${{ secrets.PAT_TOKEN }}\n\n - uses: pnpm/action-setup@v4\n with:\n version: 9.15.4\n\n - name: Setup node\n uses: actions/setup-node@v4\n with:\n node-version: 22.x\n check-latest: true\n cache: pnpm\n\n - name: Install all packages\n run: pnpm i\n\n - name: Generate icon source from Figma\n run: pnpm generate-src\n working-directory: ./packages/frosted-ui-icons\n env:\n FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}\n\n - name: Build icon package\n run: pnpm build\n working-directory: ./packages/frosted-ui-icons\n\n - name: Check for changes\n id: changes\n run: |\n git add -A\n if git diff --staged --quiet; then\n echo \"has_changes=false\" >> $GITHUB_OUTPUT\n else\n echo \"has_changes=true\" >> $GITHUB_OUTPUT\n fi\n\n - name: Create or update PR\n if: steps.changes.outputs.has_changes == 'true'\n uses: peter-evans/create-pull-request@v6\n with:\n token: ${{ secrets.PAT_TOKEN }}\n commit-message: 'chore(icons): sync icons from Figma'\n title: 'chore(icons): sync icons from Figma'\n body: |\n ## Icon Sync from Figma\n\n This PR was automatically generated by the \"Sync Icons from Figma\" workflow.\n\n ### Review Checklist\n - [ ] Check the Storybook preview for visual issues\n - [ ] Review the diff for unexpected icon deletions/renames\n - [ ] Verify no corrupted SVGs were generated\n\n ### What happens on merge?\n When this PR is merged to main, `turbo-module` will detect the icon changes and include `@frosted-ui/icons` in the next auto-release PR. Merge that PR to publish.\n branch: sync-icons\n delete-branch: true\n labels: |\n icons\n automated\n\n - name: No changes detected\n if: steps.changes.outputs.has_changes == 'false'\n run: |\n echo \"No changes detected in icons. Nothing to sync.\"\n echo \"::notice::No icon changes detected from Figma. The icons are already in sync.\"\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n.pnp.js\n\n# testing\ncoverage\n\n# build output\ndist/\npackages/frosted-ui/styles.css\npackages/frosted-ui/styles.lite.css\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# turbo\n.turbo\npackages/frosted-ui/build-storybook.log\n\n#storybook\nstorybook-static\n" }, { "path": ".npmrc", "content": "auto-install-peers=true" }, { "path": ".prettierrc.json", "content": "{\n \"arrowParens\": \"always\",\n \"bracketSameLine\": false,\n \"printWidth\": 120,\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"all\"\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"tailwindCSS.experimental.classRegex\": [\n [\"clsx\\\\(([^)]*)\\\\)\", \"(?:'|\\\"|`)([^']*)(?:'|\\\"|`)\"],\n [\"cn\\\\(([^)]*)\\\\)\", \"(?:'|\\\"|`)([^']*)(?:'|\\\"|`)\"]\n ],\n \"editor.codeActionsOnSave\": {\n \"source.addMissingImports\": \"explicit\",\n \"source.fixAll\": \"explicit\",\n \"source.fixAll.eslint\": \"explicit\",\n \"source.sortMembers\": \"explicit\",\n \"source.organizeImports\": \"explicit\"\n },\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"editor.formatOnPaste\": true,\n \"editor.formatOnSave\": true,\n \"typescript.updateImportsOnFileMove.enabled\": \"always\"\n}\n" }, { "path": "CLAUDE.md", "content": "# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Build/Test/Lint Commands\n\n### Monorepo\n- **Dev server**: `pnpm dev --filter=` (Example: `pnpm dev --filter=tailwind`)\n- **Build**: `pnpm build --filter=`\n- **Lint**: `pnpm lint --filter=`\n- **TypeCheck**: `pnpm typecheck --filter=`\n\n### Frosted UI Package\n- **Dev server**: `pnpm --filter=\"frosted-ui\" dev`\n- **Build**: `pnpm --filter=\"frosted-ui\" build`\n- **Lint**: `pnpm --filter=\"frosted-ui\" lint`\n- **Storybook**: `pnpm --filter=\"frosted-ui\" storybook`\n\n## Code Style Guidelines\n\n- **TypeScript**: Strict typing, ES2020 modules, 120 char line width, 2-space indentation\n- **React**: Functional components with hooks, JSX format\n- **CSS**: Tailwind CSS v4, PostCSS with nesting/custom media/imports\n- **Formatting**: Single quotes, semicolons required, trailing commas in multiline\n- **Project**: pnpm workspaces with Turborepo, NextJS for applications\n- **Commits**: Semantic commit messages (feat, fix, docs, style, refactor, perf, test, chore)\n- **Quality**: ESLint for linting, Prettier for formatting, Storybook for component docs" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Frosted UI\n\nIf you're reading this thank you for your interest in contributing to Frosted UI. Thank you for helping us make Frosted great! Here are a few guidelines to help contribute.\n\n- Before opening a PR be sure to search exiting [PRs](https://github.com/whopio/frosted-ui/pulls) or [issues](https://github.com/whopio/frosted-ui/issues) for an open or closed item that related to your submission.\n\n## PR Titles\n\nWe use semantic PR titles. Learn more about them [here](https://flank.github.io/flank/pr_titles/).\n\nExample:\n\n> feat(button): Add right icon\n\n## Linting\n\nWe use [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for formatting. We recommend installing both.\n\nTo lint all code you can run:\n\n```\npnpm lint\n```\n\n## Updating Storybook\n\nWhen creating new components or updating existing component APIs be sure to update the storybook.\n\nYou can run the storybook locally by running `pnpm --filter=\"frosted-ui\" storybook` and then navigating to `http://localhost:6006/`\n" }, { "path": "apps/tailwind/.eslintrc.js", "content": "module.exports = {\n root: true,\n extends: ['custom'],\n globals: {\n module: 'readonly',\n },\n};\n" }, { "path": "apps/tailwind/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n" }, { "path": "apps/tailwind/README.md", "content": "## Getting Started\n\nFirst, run the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n" }, { "path": "apps/tailwind/app/api/avatar/route.ts", "content": "import { NextResponse } from 'next/server';\n\nasync function wait(ms: number) {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nexport async function GET() {\n await wait(1000);\n return NextResponse.redirect('https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=160&h=160&dpr=2&q=80');\n}\n" }, { "path": "apps/tailwind/app/dashboard/page.tsx", "content": "import {\n AccessibilityIcon,\n CameraIcon,\n ChevronDownIcon,\n ClockIcon,\n CodeIcon,\n CookieIcon,\n DiscordLogoIcon,\n EnvelopeOpenIcon,\n GearIcon,\n GitHubLogoIcon,\n HomeIcon,\n LinkedInLogoIcon,\n MixerVerticalIcon,\n MobileIcon,\n // App icons\n NotionLogoIcon,\n ReloadIcon,\n RocketIcon,\n} from '@radix-ui/react-icons';\nimport {\n Accordion,\n Avatar,\n Breadcrumbs,\n Button,\n Card,\n Checkbox,\n DropdownMenu,\n Heading,\n IconButton,\n Inset,\n Popover,\n Separator,\n Strong,\n Text,\n TextArea,\n TextField,\n Theme,\n ThemePanel,\n Tooltip,\n} from 'frosted-ui';\n// import { HideCursor } from './hide-cursor';\n/* Inter variable setup */\nimport localFont from 'next/font/local';\nconst interVariable = localFont({\n src: '../../fonts/InterVariable.woff2',\n variable: '--inter-variable',\n});\nconst SidebarButton = ({ children }: { children: React.ReactNode }) => {\n return (\n \n {children}\n \n );\n};\nconst DashboardCard = () => {\n return (\n
\n \n
\n
\n \n
\n \n \n APPS SUPPORTED\n \n \n \n
\n \n Is it accessible?\n Yes. It adheres to the WAI-ARIA design pattern.\n \n\n \n Is it unstyled?\n \n Yes. It's unstyled by default, giving you freedom over the look and feel.\n \n \n\n \n Can it be animated?\n Yes! You can animate the Accordion with CSS or JavaScript.\n \n
\n \n
\n \n \n \n \n
\n
\n
\n
\n \n Trading\n \n \n Choose this to offer access to trading insights, tips, and lessons.\n \n
\n
\n
\n );\n};\n\nconst WhopSVG = () => {\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default function Dashboard() {\n return (\n /* Inter variable setup */\n \n \n {/* */}\n \n \n