[ { "path": ".devcontainer/devcontainer.json", "content": "{\n \"image\": \"mcr.microsoft.com/devcontainers/python:3.14-trixie\",\n \"postCreateCommand\": \"/bin/bash -c 'python -m pip install uv && python -m uv sync & git clone https://github.com/reflex-dev/reflex-examples; wait'\",\n \"forwardPorts\": [3000, 8000],\n \"portsAttributes\": {\n \"3000\": {\n \"label\": \"Frontend\",\n \"onAutoForward\": \"notify\"\n },\n \"8000\": {\n \"label\": \"Backend\"\n }\n }\n}\n" }, { "path": ".github/CODEOWNERS", "content": "@reflex-dev/reflex-team\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"\"\nassignees: \"\"\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n\n- Code/Link to Repo:\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Specifics (please complete the following information):**\n\n- Python Version:\n- Reflex Version:\n- OS:\n- Browser (Optional):\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/build_issue.md", "content": "---\nname: Build Issue\nabout: Report an issue related to reflex.build\ntitle: \"[BUILD] \" # This acts as a hint, but users can change it.\nlabels: build\nassignees: \"\"\n---\n\n## Describe the issue\n\nProvide details about the issue.\n\n...\n\n## Expected behavior\n\nWhat should have happened?\n\n...\n\n## Steps to reproduce (if applicable)\n\n1.\n2.\n3.\n\n## Environment\n\n- Reflex Version:\n- Python Version:\n- OS:\n- Browser:\n" }, { "path": ".github/ISSUE_TEMPLATE/cloud_issue.md", "content": "---\nname: Cloud Issue\nabout: Report an issue related to Reflex Cloud\ntitle: \"[CLOUD] \" # This acts as a hint, but users can change it.\nlabels: cloud\nassignees: \"\"\n---\n\n## Describe the issue\n\nProvide details about the issue.\n\n...\n\n## Expected behavior\n\nWhat should have happened?\n\n...\n\n## Steps to reproduce (if applicable)\n\n1.\n2.\n3.\n\n## Environment\n\n- Reflex Version:\n- Python Version:\n- OS:\n- Browser:\n" }, { "path": ".github/ISSUE_TEMPLATE/custom_component_request.md", "content": "---\nname: Custom Component Request\nabout: Suggest a new custom component for Reflex\ntitle: \"\"\nlabels: \"custom component request\"\nassignees: \"\"\n---\n\n**Describe the Custom Component**\nA clear and concise description of what the custom component does.\n\n- What is the purpose of the custom component?\n\n- What is the expected behavior of the custom component?\n\n- What are the use cases for the custom component?\n\n**Specifics (please complete the following information):**\n\n- Do you have a specific react package in mind? (Optional):\n\n**Additional context**\nAdd any other context about the custom component here.\n" }, { "path": ".github/ISSUE_TEMPLATE/enhancement_request.md", "content": "---\nname: Enhancement Request\nabout: Suggest an enhancement for an existing Reflex feature.\ntitle: \"\"\nlabels: \"enhancement\"\nassignees: \"\"\n---\n\n**Describe the Enhancement you want**\nA clear and concise description of what the improvement does.\n\n- Which feature do you want to improve? (and what problem does it have)\n\n- What is the benefit of the enhancement?\n\n- Show an example/usecase were the improvement are needed.\n\n**Additional context**\nAdd any other context here.\n" }, { "path": ".github/ISSUE_TEMPLATE/enterprise_issue.md", "content": "---\nname: Enterprise Issue\nabout: Report an issue related to Reflex Enterprise\ntitle: \"[ENTERPRISE] \" # This acts as a hint, but users can change it.\nlabels: enterprise\nassignees: \"\"\n---\n\n## Describe the issue\n\nProvide details about the issue.\n\n...\n\n## Expected behavior\n\nWhat should have happened?\n\n...\n\n## Steps to reproduce (if applicable)\n\n1.\n2.\n3.\n\n## Environment\n\n- Reflex Version:\n- Python Version:\n- OS:\n- Browser:\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature Request\nabout: Suggest a new feature for Reflex\ntitle: \"\"\nlabels: \"feature request\"\nassignees: \"\"\n---\n\n**Describe the Features**\nA clear and concise description of what the features does.\n\n- What is the purpose of the feature?\n\n- Show an example / use cases for the new feature.\n\n**Additional context**\nAdd any other context here.\n" }, { "path": ".github/actions/setup_build_env/action.yml", "content": "# Entry conditions:\n# - `setup/checkout` has already happened\n# - working dir is the root directory of your project (e.g. `reflex/`).\n# - You have a `uv.lock` file in the root directory of your project\n# - You have a `pyproject.toml` file in the root directory of your project\n#\n# Exit conditions:\n# - Python of version `python-version` is ready to be invoked as `python`.\n# - If `run-uv-sync` is true, deps as defined in `pyproject.toml` will have been installed into the venv at `create-venv-at-path`.\n\nname: \"Setup Reflex build environment\"\ndescription: \"Sets up Python, install uv (cached), install project deps (cached)\"\ninputs:\n python-version:\n description: \"Python version setup\"\n required: true\n run-uv-sync:\n description: \"Whether to run uv sync on current dir\"\n required: false\n default: false\n create-venv-at-path:\n description: \"Path to venv (if uv sync is enabled)\"\n required: false\n default: \".venv\"\n\nruns:\n using: \"composite\"\n steps:\n - name: Install UV\n uses: astral-sh/setup-uv@v6\n with:\n python-version: ${{ inputs.python-version }}\n enable-cache: true\n prune-cache: false\n activate-environment: true\n cache-dependency-glob: \"uv.lock\"\n - name: Setup Node\n uses: actions/setup-node@v4\n with:\n node-version: 22\n - name: Install Dependencies\n if: inputs.run-uv-sync == 'true'\n run: uv sync\n shell: bash\n" }, { "path": ".github/codeql-config.yml", "content": "paths:\n - .github\n - reflex\n - reflex/.templates\npaths-ignore:\n - \"**/tests/**\"\n" }, { "path": ".github/pull_request_template.md", "content": "### All Submissions:\n\n- [ ] Have you followed the guidelines stated in [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) file?\n- [ ] Have you checked to ensure there aren't any other open [Pull Requests](https://github.com/reflex-dev/reflex/pulls) for the desired changed?\n\n\n\n### Type of change\n\nPlease delete options that are not relevant.\n\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New feature (non-breaking change which adds functionality)\n- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)\n- [ ] This change requires a documentation update\n\n### New Feature Submission:\n\n- [ ] Does your submission pass the tests?\n- [ ] Have you linted your code locally prior to submission?\n\n### Changes To Core Features:\n\n- [ ] Have you added an explanation of what your changes do and why you'd like us to include them?\n- [ ] Have you written new tests for your core changes, as applicable?\n- [ ] Have you successfully ran tests with your changes locally?\n\n### **After** these steps, you're ready to open a pull request.\n\n a. Give a descriptive title to your PR.\n\n b. Describe your changes.\n\n c. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes (if such).\n" }, { "path": ".github/workflows/check_node_latest.yml", "content": "name: integration-node-latest\npermissions:\n contents: read\n\non:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\n\nenv:\n REFLEX_TELEMETRY_ENABLED: false\n\njobs:\n check_latest_node:\n runs-on: ubuntu-22.04\n strategy:\n matrix:\n split_index: [1, 2]\n node-version: [\"node\"]\n fail-fast: false\n\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: 3.13\n run-uv-sync: true\n\n - uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n - run: uv run playwright install --with-deps\n - run: |\n uv run pytest tests/test_node_version.py -v\n uv run pytest tests/integration --splits 2 -v --group ${{matrix.split_index}}\n" }, { "path": ".github/workflows/check_outdated_dependencies.yml", "content": "name: check-outdated-dependencies\npermissions:\n contents: read\n\non:\n push: # This will trigger the action when a pull request is opened or updated.\n branches:\n - \"release/**\" # This will trigger the action when any branch starting with \"release/\" is created.\n workflow_dispatch: # Allow manual triggering if needed.\n\njobs:\n backend:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: 3.13\n run-uv-sync: true\n\n - name: Check outdated backend dependencies\n run: |\n outdated=$(uv pip list --outdated)\n echo \"Outdated:\"\n echo \"$outdated\"\n\n filtered_outdated=$(echo \"$outdated\" | grep -vE 'pyright|ruff' || true)\n\n if [ ! -z \"$filtered_outdated\" ]; then\n echo \"Outdated dependencies found:\"\n echo \"$filtered_outdated\"\n exit 1\n else\n echo \"All dependencies are up to date. (pyright and ruff are ignored)\"\n fi\n\n frontend:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: 3.13\n run-uv-sync: true\n\n - name: Clone Reflex Website Repo\n uses: actions/checkout@v4\n with:\n repository: reflex-dev/reflex-web\n ref: main\n path: reflex-web\n - name: Compile pyproject.toml into requirements.txt\n working-directory: ./reflex-web\n run: |\n uv pip compile pyproject.toml --no-annotate --no-header --no-deps --output-file requirements.txt\n grep -ivE \"reflex \" requirements.txt > requirements.txt.tmp && mv requirements.txt.tmp requirements.txt\n - name: Install Requirements for reflex-web\n working-directory: ./reflex-web\n run: uv pip install -r requirements.txt\n - name: Init Website for reflex-web\n working-directory: ./reflex-web\n run: uv run reflex init\n - name: Run Website and Check for errors\n run: |\n uv run bash scripts/integration.sh ./reflex-web dev\n - name: Check outdated frontend dependencies\n working-directory: ./reflex-web/.web\n run: |\n raw_outdated=$(/home/runner/.local/share/reflex/bun/bin/bun outdated)\n outdated=$(echo \"$raw_outdated\" | grep -vE '\\|\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\|' || true)\n echo \"Outdated:\"\n echo \"$outdated\"\n\n # Ignore 3rd party dependencies that are not updated.\n filtered_outdated=$(echo \"$outdated\" | grep -vE 'Package|@chakra-ui|lucide-react|@splinetool/runtime|ag-grid-react|framer-motion|ag-grid' || true)\n no_extra=$(echo \"$filtered_outdated\" | grep -vE '\\|\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-\\-' || true)\n\n\n if [ ! -z \"$no_extra\" ]; then\n echo \"Outdated dependencies found:\"\n echo \"$filtered_outdated\"\n exit 1\n else\n echo \"All dependencies are up to date. (3rd party packages are ignored)\"\n fi\n" }, { "path": ".github/workflows/codeql.yml", "content": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# You may wish to alter this file to override the set of languages analyzed,\n# or to provide custom queries or build logic.\n#\n# ******** NOTE ********\n# We have attempted to detect the languages in your repository. Please check\n# the `language` matrix defined below to confirm you have the correct set of\n# supported CodeQL languages.\n#\nname: \"CodeQL Advanced\"\n\non:\n push:\n branches: [\"main\"]\n pull_request:\n branches: [\"main\"]\n schedule:\n - cron: \"36 7 * * 4\"\n\njobs:\n analyze:\n name: Analyze (${{ matrix.language }})\n # Runner size impacts CodeQL analysis time. To learn more, please see:\n # - https://gh.io/recommended-hardware-resources-for-running-codeql\n # - https://gh.io/supported-runners-and-hardware-resources\n # - https://gh.io/using-larger-runners (GitHub.com only)\n # Consider using larger runners or machines with greater resources for possible analysis time improvements.\n runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}\n permissions:\n # required for all workflows\n security-events: write\n\n # required to fetch internal or private CodeQL packs\n packages: read\n\n # only required for workflows in private repositories\n actions: read\n contents: read\n\n strategy:\n fail-fast: false\n matrix:\n include:\n - language: javascript-typescript\n build-mode: none\n - language: python\n build-mode: none\n - language: actions\n build-mode: none\n # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'\n # Use `c-cpp` to analyze code written in C, C++ or both\n # Use 'java-kotlin' to analyze code written in Java, Kotlin or both\n # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both\n # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,\n # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.\n # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how\n # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages\n steps:\n - name: Checkout repository\n uses: actions/checkout@v4\n\n # Add any setup steps before running the `github/codeql-action/init` action.\n # This includes steps like installing compilers or runtimes (`actions/setup-node`\n # or others). This is typically only required for manual builds.\n # - name: Setup runtime (example)\n # uses: actions/setup-example@v1\n\n # Initializes the CodeQL tools for scanning.\n - name: Initialize CodeQL\n uses: github/codeql-action/init@v4\n with:\n languages: ${{ matrix.language }}\n config-file: .github/codeql-config.yml\n build-mode: ${{ matrix.build-mode }}\n # If you wish to specify custom queries, you can do so here or in a config file.\n # By default, queries listed here will override any specified in a config file.\n # Prefix the list here with \"+\" to use these queries and those in the config file.\n\n # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs\n # queries: security-extended,security-and-quality\n\n # If the analyze step fails for one of the languages you are analyzing with\n # \"We were unable to automatically build your code\", modify the matrix above\n # to set the build mode to \"manual\" for that language. Then modify this step\n # to build your code.\n # ℹ️ Command-line programs to run using the OS shell.\n # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun\n - if: matrix.build-mode == 'manual'\n shell: bash\n run: |\n echo 'If you are using a \"manual\" build mode for one or more of the' \\\n 'languages you are analyzing, replace this with the commands to build' \\\n 'your code, for example:'\n echo ' make bootstrap'\n echo ' make release'\n exit 1\n\n - name: Perform CodeQL Analysis\n uses: github/codeql-action/analyze@v4\n with:\n category: \"/language:${{matrix.language}}\"\n" }, { "path": ".github/workflows/dependency-review.yml", "content": "name: \"Dependency Review\"\non: [pull_request]\n\npermissions:\n contents: read\n\njobs:\n dependency-review:\n runs-on: ubuntu-latest\n steps:\n - name: \"Checkout Repository\"\n uses: actions/checkout@v4\n - name: \"Dependency Review\"\n uses: actions/dependency-review-action@v4\n with:\n allow-licenses: Apache-2.0, BSD-2-Clause, BSD-3-Clause, HPND, ISC, MIT, MPL-2.0, Unlicense, Python-2.0, Python-2.0.1, Apache-2.0 AND MIT, BSD-2-Clause AND BSD-3-Clause, Apache-2.0 AND BSD-3-Clause\n allow-dependencies-licenses: \"pkg:pypi/lazy-loader\"\n" }, { "path": ".github/workflows/integration_app_harness.yml", "content": "name: integration-app-harness\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.id }}\n cancel-in-progress: true\n\non:\n push:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n pull_request:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\nenv:\n APP_HARNESS_HEADLESS: 1\n PYTHONUNBUFFERED: 1\n\npermissions:\n contents: read\n\njobs:\n integration-app-harness:\n timeout-minutes: 30\n strategy:\n matrix:\n state_manager: [\"redis\", \"memory\"]\n python-version: [\"3.11\", \"3.12\", \"3.13\", \"3.14\"]\n split_index: [1, 2]\n fail-fast: false\n runs-on: ubuntu-22.04\n services:\n # Label used to access the service container\n redis:\n image: ${{ matrix.state_manager == 'redis' && 'redis' || '' }}\n # Set health checks to wait until redis has started\n options: >-\n --health-cmd \"redis-cli ping\"\n --health-interval 10s\n --health-timeout 5s\n --health-retries 5\n ports:\n # Maps port 6379 on service container to the host\n - 6379:6379\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: ${{ matrix.python-version }}\n run-uv-sync: true\n\n - name: Install playwright\n run: uv run playwright install chromium --only-shell\n\n - name: Run app harness tests\n env:\n REFLEX_REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}\n run: uv run pytest tests/integration --reruns 3 -v --maxfail=5 --splits 2 --group ${{matrix.split_index}}\n" }, { "path": ".github/workflows/integration_tests.yml", "content": "name: integration-tests\n\non:\n push:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n pull_request:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.id }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\ndefaults:\n run:\n shell: bash\n\nenv:\n # Windows CI would fail without this.\n # Ref: https://gist.github.com/NodeJSmith/e7e37f2d3f162456869f015f842bcf15\n # TODO: can we fix windows encoding natively within reflex? Bug above can hit real users too (less common, but possible)\n # - Catch encoding errors when printing logs\n # - Best effort print lines that contain illegal chars (map to some default char, etc.)\n PYTHONIOENCODING: \"utf8\"\n REFLEX_TELEMETRY_ENABLED: false\n NODE_OPTIONS: \"--max_old_space_size=8192\"\n PR_TITLE: ${{ github.event.pull_request.title }}\n\njobs:\n example-counter-and-nba-proxy:\n env:\n OUTPUT_FILE: import_benchmark.json\n timeout-minutes: 30\n strategy:\n # Prioritize getting more information out of the workflow (even if something fails)\n fail-fast: false\n matrix:\n # Show OS combos first in GUI\n os: [ubuntu-latest, windows-latest]\n python-version: [\"3.10\", \"3.11\", \"3.12\", \"3.13\"]\n\n runs-on: ${{ matrix.os }}\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: ${{ matrix.python-version }}\n run-uv-sync: true\n\n - name: Clone Reflex Examples Repo\n uses: actions/checkout@v4\n with:\n repository: reflex-dev/reflex-examples\n path: reflex-examples\n - name: Install requirements for counter example\n working-directory: ./reflex-examples/counter\n run: |\n uv pip install -r requirements.txt\n - name: Check export --backend-only before init for counter example\n working-directory: ./reflex-examples/counter\n run: |\n uv run reflex export --backend-only\n - name: Check run --backend-only before init for counter example\n run: |\n uv run bash scripts/integration.sh ./reflex-examples/counter dev 8001 --backend-only --backend-port 8001\n - name: Init Website for counter example\n working-directory: ./reflex-examples/counter\n run: |\n uv run reflex init --loglevel debug\n - name: Check export for counter example\n working-directory: ./reflex-examples/counter\n run: |\n uv run reflex export\n - name: Run Website and Check for errors\n run: |\n # Check that npm is home\n npm -v\n uv run bash scripts/integration.sh ./reflex-examples/counter dev\n - name: Install requirements for nba proxy example\n working-directory: ./reflex-examples/nba-proxy\n run: |\n uv pip install -r requirements.txt\n - name: Check export --backend-only before init for nba-proxy example\n working-directory: ./reflex-examples/nba-proxy\n run: |\n uv run reflex export --backend-only\n - name: Init Website for nba-proxy example\n working-directory: ./reflex-examples/nba-proxy\n run: |\n uv run reflex init --loglevel debug\n - name: Run Website and Check for errors\n run: |\n # Check that npm is home\n npm -v\n uv run bash scripts/integration.sh ./reflex-examples/nba-proxy dev\n\n reflex-web:\n strategy:\n fail-fast: false\n matrix:\n python-version: [\"3.11\", \"3.12\"]\n\n env:\n REFLEX_WEB_WINDOWS_OVERRIDE: \"1\"\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: ${{ matrix.python-version }}\n run-uv-sync: true\n\n - name: Clone Reflex Website Repo\n uses: actions/checkout@v4\n with:\n repository: reflex-dev/reflex-web\n ref: main\n path: reflex-web\n submodules: recursive\n\n - name: Compile pyproject.toml into requirements.txt\n working-directory: ./reflex-web\n run: |\n uv pip compile pyproject.toml --no-annotate --no-header --no-deps --output-file requirements.txt\n grep -ivE \"reflex \" requirements.txt > requirements.txt.tmp && mv requirements.txt.tmp requirements.txt\n - name: Install Requirements for reflex-web\n working-directory: ./reflex-web\n run: uv pip install -r requirements.txt\n - name: Init Website for reflex-web\n working-directory: ./reflex-web\n run: uv run --active --no-sync reflex init\n - name: Run Website and Check for errors\n run: |\n # Check that npm is home\n npm -v\n uv run --active --no-sync bash scripts/integration.sh ./reflex-web prod\n\n rx-shout-from-template:\n strategy:\n fail-fast: false\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: 3.14\n run-uv-sync: true\n\n - name: Create app directory\n run: mkdir rx-shout-from-template\n - name: Init reflex-web from template\n run: uv run reflex init --template https://github.com/masenf/rx_shout\n working-directory: ./rx-shout-from-template\n - name: ignore reflex pin in requirements\n run: sed -i -e '/reflex==/d' requirements.txt\n working-directory: ./rx-shout-from-template\n - name: Install additional dependencies\n run: uv pip install -r requirements.txt\n working-directory: ./rx-shout-from-template\n - name: Run Website and Check for errors\n run: |\n # Check that npm is home\n npm -v\n uv run bash scripts/integration.sh ./rx-shout-from-template prod\n\n reflex-web-macos:\n if: github.event_name == 'push' && github.ref == 'refs/heads/main'\n strategy:\n fail-fast: false\n matrix:\n # Note: py311 version chosen due to available arm64 darwin builds.\n python-version: [\"3.11\", \"3.12\"]\n runs-on: macos-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: ${{ matrix.python-version }}\n run-uv-sync: true\n\n - name: Clone Reflex Website Repo\n uses: actions/checkout@v4\n with:\n repository: reflex-dev/reflex-web\n ref: main\n path: reflex-web\n submodules: recursive\n - name: Compile pyproject.toml into requirements.txt\n working-directory: ./reflex-web\n run: |\n uv pip compile pyproject.toml --no-annotate --no-header --no-deps --output-file requirements.txt\n grep -ivE \"reflex \" requirements.txt > requirements.txt.tmp && mv requirements.txt.tmp requirements.txt\n - name: Install Requirements for reflex-web\n working-directory: ./reflex-web\n run: uv pip install -r requirements.txt\n - name: Init Website for reflex-web\n working-directory: ./reflex-web\n run: uv run --active --no-sync reflex init\n - name: Run Website and Check for errors\n run: |\n # Check that npm is home\n npm -v\n uv run --active --no-sync bash scripts/integration.sh ./reflex-web prod\n" }, { "path": ".github/workflows/performance.yml", "content": "name: performance-tests\npermissions:\n contents: read\n\non:\n push:\n branches:\n - \"main\" # or \"master\"\n paths-ignore:\n - \"**/*.md\"\n pull_request:\n workflow_dispatch:\n\nenv:\n REFLEX_TELEMETRY_ENABLED: false\n NODE_OPTIONS: \"--max_old_space_size=8192\"\n PR_TITLE: ${{ github.event.pull_request.title }}\n APP_HARNESS_HEADLESS: 1\n PYTHONUNBUFFERED: 1\n\njobs:\n benchmarks:\n name: Run benchmarks\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Install uv\n uses: astral-sh/setup-uv@v6\n\n - name: Set up Python\n uses: actions/setup-python@v5\n with:\n python-version: \"3.14\"\n\n - name: Install dependencies\n run: uv sync --all-extras --dev\n\n - name: Run benchmarks\n uses: CodSpeedHQ/action@v4\n with:\n mode: instrumentation\n run: uv run pytest -v tests/benchmarks --codspeed\n" }, { "path": ".github/workflows/pre-commit.yml", "content": "name: pre-commit\npermissions:\n contents: read\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.id }}\n cancel-in-progress: true\n\non:\n pull_request:\n branches: [\"main\"]\n push:\n # Note even though this job is called \"pre-commit\" and runs \"pre-commit\", this job will run\n # also POST-commit on main also! In case there are mishandled merge conflicts / bad auto-resolves\n # when merging into main branch.\n branches: [\"main\"]\n\njobs:\n pre-commit:\n timeout-minutes: 30\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: 3.14\n run-uv-sync: true\n - uses: actions/checkout@v4\n with:\n clean: false\n - run: uv run pre-commit run --all-files --show-diff-on-failure\n" }, { "path": ".github/workflows/publish.yml", "content": "name: Publish to PyPI\n\non:\n workflow_dispatch:\n\njobs:\n publish:\n runs-on: ubuntu-latest\n environment:\n name: pypi\n permissions:\n id-token: write\n contents: read\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Install uv\n uses: astral-sh/setup-uv@v7\n\n - name: Build\n run: uv build\n\n - name: Verify .pyi files in wheel\n run: |\n if unzip -l dist/*.whl | grep '\\.pyi$'; then\n echo \"✓ .pyi files found in distribution\"\n else\n echo \"Error: No .pyi files found in wheel\"\n exit 1\n fi\n\n - name: Publish\n run: uv publish\n" }, { "path": ".github/workflows/reflex_init_in_docker_test.yml", "content": "name: reflex-init-in-docker-test\npermissions:\n contents: read\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.id }}\n cancel-in-progress: true\n\non:\n push:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n pull_request:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n\njobs:\n # TODO we can extend to various starting points (e.g. Ubuntu with node, without node, with unzip, without unzip, etc.)\n # Currently starting point is: Ubuntu + unzip, xz-utils, Python suite. No node.\n reflex-install-and-init:\n timeout-minutes: 30\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - shell: bash\n run: |\n # Run reflex init in a docker container\n\n # cwd is repo root\n docker build -f tests/integration/init-test/Dockerfile -t reflex-init-test tests/integration/init-test\n docker run --rm -v $(pwd):/reflex-repo/ reflex-init-test /reflex-repo/tests/integration/init-test/in_docker_test_script.sh\n" }, { "path": ".github/workflows/unit_tests.yml", "content": "name: unit-tests\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.id }}\n cancel-in-progress: true\n\non:\n push:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n pull_request:\n branches: [\"main\"]\n paths-ignore:\n - \"**/*.md\"\n\npermissions:\n contents: read\n\ndefaults:\n run:\n shell: bash\n\njobs:\n unit-tests:\n timeout-minutes: 30\n strategy:\n fail-fast: false\n matrix:\n os: [ubuntu-latest, windows-latest]\n python-version: [\"3.10\", \"3.11\", \"3.12\", \"3.13\", \"3.14\"]\n runs-on: ${{ matrix.os }}\n\n # Service containers to run with `runner-job`\n services:\n # Label used to access the service container\n redis:\n image: ${{ matrix.os == 'ubuntu-latest' && 'redis' || '' }}\n # Set health checks to wait until redis has started\n options: >-\n --health-cmd \"redis-cli ping\"\n --health-interval 10s\n --health-timeout 5s\n --health-retries 5\n ports:\n # Maps port 6379 on service container to the host\n - 6379:6379\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: ${{ matrix.python-version }}\n run-uv-sync: true\n\n - name: Run unit tests\n run: |\n export PYTHONUNBUFFERED=1\n uv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n - name: Run unit tests w/ redis\n if: ${{ matrix.os == 'ubuntu-latest' }}\n run: |\n export PYTHONUNBUFFERED=1\n export REFLEX_REDIS_URL=redis://localhost:6379\n uv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n - name: Run unit tests w/ redis and OPLOCK_ENABLED\n if: ${{ matrix.os == 'ubuntu-latest' }}\n run: |\n export PYTHONUNBUFFERED=1\n export REFLEX_REDIS_URL=redis://localhost:6379\n export REFLEX_OPLOCK_ENABLED=true\n uv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n # Change to explicitly install v1 when reflex-hosting-cli is compatible with v2\n - name: Run unit tests w/ pydantic v1\n run: |\n export PYTHONUNBUFFERED=1\n uv pip install \"pydantic~=1.10\"\n uv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n - name: Generate coverage report\n run: uv run coverage html\n\n unit-tests-macos:\n timeout-minutes: 30\n if: github.event_name == 'push' && github.ref == 'refs/heads/main'\n strategy:\n fail-fast: false\n matrix:\n python-version: [\"3.10\", \"3.11\", \"3.12\", \"3.13\", \"3.14\"]\n runs-on: macos-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/actions/setup_build_env\n with:\n python-version: ${{ matrix.python-version }}\n run-uv-sync: true\n\n - name: Run unit tests\n run: |\n export PYTHONUNBUFFERED=1\n uv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n - name: Run unit tests w/ pydantic v1\n run: |\n export PYTHONUNBUFFERED=1\n uv pip install \"pydantic~=1.10\"\n uv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n" }, { "path": ".gitignore", "content": "**/.DS_Store\n**/*.pyc\nassets/external/*\ndist/*\nexamples/\n.web\n.states\n.idea\n.vscode\n.coverage\n.coverage.*\n.venv\nvenv\nrequirements.txt\n.pyi_generator_last_run\n.pyi_generator_diff\nreflex.db\n.codspeed\n.env\n.env.*\nnode_modules\npackage-lock.json\n*.pyi\n.pre-commit-config.yaml" }, { "path": ".python-version", "content": "3.14" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socioeconomic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n- Demonstrating empathy and kindness toward other people\n- Being respectful of differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the\n overall community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language or imagery, and sexual attention or\n advances of any kind\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or email\n address, without their explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nopensource@reflex.dev.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community as well as any sort of private interaction with the people.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n" }, { "path": "CONTRIBUTING.md", "content": "# Reflex Contributing Guidelines\n\nFor an extensive guide on the different ways to contribute to Reflex see our [Contributing Guide on Notion](https://www.notion.so/reflex-dev/2107ab2bc166497db951b8d742748284?v=f0eaff78fa984b5ab15d204af58907d7).\n\n## Running a Local Build of Reflex\n\nHere is a quick guide on how to run Reflex repo locally so you can start contributing to the project.\n\n**Prerequisites:**\n\n- uv version >= 0.6.0 and add it to your path (see [UV Docs](https://docs.astral.sh/uv/getting-started/installation/) for more info).\n\n**1. Fork this repository:**\nFork this repository by clicking on the `Fork` button on the top right.\n\n**2. Clone Reflex and navigate into the repo:**\n\n```bash\ngit clone https://github.com//reflex.git\ncd reflex\n```\n\n**3. Install your local Reflex build:**\n\n```bash\nuv sync\n```\n\n**4. Now create an examples folder so you can test the local Python build in this repository.**\n\n- We have the `examples` folder in the `.gitignore`, so your changes in `reflex/examples` won't be reflected in your commit.\n\n```bash\nmkdir examples\ncd examples\n```\n\n**5. Init and Run**\n\n```bash\nuv run reflex init\nuv run reflex run\n```\n\nAll the changes you make to the repository will be reflected in your running app.\n\n- We have the examples folder in the .gitignore, so your changes in reflex/examples won't be reflected in your commit.\n\n## 🧪 Testing and QA\n\nAny feature or significant change added should be accompanied with unit tests.\n\nWithin the 'test' directory of Reflex you can add to a test file already there or create a new test python file if it doesn't fit into the existing layout.\n\n#### What to unit test?\n\n- Any feature or significant change that has been added.\n- Any edge cases or potential problem areas.\n- Any interactions between different parts of the code.\n\n## ✅ Making a PR\n\nOnce you solve a current issue or improvement to Reflex, you can make a PR, and we will review the changes.\n\nBefore submitting, a pull request, ensure the following steps are taken and test passing.\n\nIn your `reflex` directory run make sure all the unit tests are still passing using the following command.\nThis will fail if code coverage is below 70%.\n\n```bash\nuv run pytest tests/units --cov --no-cov-on-fail --cov-report=\n```\n\nNext make sure all the following tests pass. This ensures that every new change has proper documentation and type checking.\n\n```bash\nuv run ruff check .\nuv run pyright reflex tests\nfind reflex tests -name \"*.py\" -not -path reflex/reflex.py | xargs uv run darglint\n```\n\nFinally, run `ruff` to format your code.\n\n```bash\nuv run ruff format .\n```\n\nConsider installing git pre-commit hooks so Ruff, Pyright, Darglint and `make_pyi` will run automatically before each commit.\n\n```bash\nuv run pre-commit install\n```\n\nThat's it you can now submit your PR. Thanks for contributing to Reflex!\n\n## Editing Templates\n\nTo edit the templates in Reflex you can do so in two way.\n\nChange to the basic `blank` template can be done in the `reflex/.templates/apps/blank` directory.\n\nOthers templates can be edited in their own repository. For example the `sidebar` template can be found in the [`reflex-sidebar`](https://github.com/reflex-dev/sidebar-template) repository.\n\n## Other Notes\n\nFor some pull requests when adding new components you will have to generate a pyi file for the new component. This is done by running the following command in the `reflex` directory.\n\n(Please check in with the team before adding a new component to Reflex we are cautious about adding new components to Reflex's core.)\n\n```bash\nuv run python -m reflex.utils.pyi_generator\n```\n" }, { "path": "LICENSE", "content": " Apache License\n Version 2.0, January 2004\n https://www.apache.org/licenses/LICENSE-2.0\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION \n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2023, Pynecone, Inc.\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "MCP_README.md", "content": "# Reflex MCP Server\n\nThe Reflex MCP Server provides comprehensive access to Reflex framework documentation and component information through the Model Context Protocol (MCP). This server is deployed and ready to use with your MCP-compatible AI tools.\n\nCheck the documentation at https://reflex.dev/docs/ai-builder/integrations/mcp-overview\n" }, { "path": "README.md", "content": "
\n\"Reflex\n\n
\n\n### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n[![Twitter](https://img.shields.io/twitter/follow/getreflex)](https://x.com/getreflex)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n> [!NOTE]\n> 🚀 **Try [Reflex Build](https://build.reflex.dev/)** – our AI-powered app builder that generates full-stack Reflex applications in seconds.\n\n---\n\n# Introduction\n\nReflex is a library to build full-stack web apps in pure Python.\n\nKey features:\n\n- **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.\n- **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.\n- **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.\n\nSee our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) to learn how Reflex works under the hood.\n\n## ⚙️ Installation\n\n**Important:** We strongly recommend using a virtual environment to ensure the `reflex` command is available in your PATH.\n\n## 🥳 Create your first app\n\n### 1. Create the project directory\n\nReplace `my_app_name` with your project name:\n\n```bash\nmkdir my_app_name\ncd my_app_name\n```\n\n### 2. Set up a virtual environment\n\nCreate and activate virtual environment\n\n```bash\n# On Windows:\npython -m venv .venv\n.venv\\Scripts\\activate\n\n# On macOS/Linux:\npython3 -m venv .venv\nsource .venv/bin/activate\n```\n\n### 3. Install Reflex\n\nReflex is available as a pip package (Requires Python 3.10+):\n\n```bash\npip install reflex\n```\n\n### 4. Initialize the project\n\nThis command initializes a template app in your new directory:\n\n```bash\nreflex init\n```\n\n### 5. Run the app\n\nYou can run this app in development mode:\n\n```bash\nreflex run\n```\n\nYou should see your app running at http://localhost:3000.\n\nNow you can modify the source code in `my_app_name/my_app_name.py`. Reflex has fast refreshes so you can see your changes instantly when you save your code.\n\n### Troubleshooting\n\nIf you installed Reflex without a virtual environment and the `reflex` command is not found, you can run commands using: `python3 -m reflex init` and `python3 -m reflex run`\n\n## 🫧 Example App\n\nLet's go over an example: creating an image generation UI around [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). For simplicity, we just call the [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), but you could replace this with an ML model run locally.\n\n \n\n
\n\"A\n
\n\n \n\nHere is the complete code to create this. This is all done in one Python file!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Add state and page to the app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Let's break this down.\n\n
\n\"Explaining\n
\n\n### **Reflex UI**\n\nLet's start with the UI.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nThis `index` function defines the frontend of the app.\n\nWe use different components such as `center`, `vstack`, `input`, and `button` to build the frontend. Components can be nested within each other\nto create complex layouts. And you can use keyword args to style them with the full power of CSS.\n\nReflex comes with [60+ built-in components](https://reflex.dev/docs/library) to help you get started. We are actively adding more components, and it's easy to [create your own components](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **State**\n\nReflex represents your UI as a function of your state.\n\n```python\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nThe state defines all the variables (called vars) in an app that can change and the functions that change them.\n\nHere the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to disable the button (during image generation) and when to show the resulting image.\n\n### **Event Handlers**\n\n```python\ndef get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nWithin the state, we define functions called event handlers that change the state vars. Event handlers are the way that we can modify the state in Reflex. They can be called in response to user actions, such as clicking a button or typing in a text box. These actions are called events.\n\nOur DALL·E app has an event handler, `get_image` which gets this image from the OpenAI API. Using `yield` in the middle of an event handler will cause the UI to update. Otherwise the UI will update at the end of the event handler.\n\n### **Routing**\n\nFinally, we define our app.\n\n```python\napp = rx.App()\n```\n\nWe add a page from the root of the app to the index component. We also add a title that will show up in the page preview/browser tab.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nYou can create a multi-page app by adding more pages.\n\n## 📑 Resources\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Component Library](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Status\n\nReflex launched in December 2022 with the name Pynecone.\n\n🚀 Introducing [Reflex Build](https://build.reflex.dev/) — Our AI-Powered Builder\nReflex Build uses AI to generate complete full-stack Python applications. It helps you quickly create, customize, and refine your Reflex apps — from frontend components to backend logic — so you can focus on your ideas instead of boilerplate code. Whether you’re prototyping or scaling, Reflex Build accelerates development by intelligently scaffolding and optimizing your app’s entire stack.\n\nAlongside this, [Reflex Cloud](https://cloud.reflex.dev) launched in 2025 to offer the best hosting experience for your Reflex apps. We’re continuously improving the platform with new features and capabilities.\n\nReflex has new releases and features coming every week! Make sure to :star: star and :eyes: watch this repository to stay up to date.\n\n## Contributing\n\nWe welcome contributions of any size! Below are some good ways to get started in the Reflex community.\n\n- **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.\n- **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.\n- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.\n\nWe are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## All Thanks To Our Contributors:\n\n\n \n\n\n## License\n\nReflex is open-source and licensed under the [Apache License 2.0](https://raw.githubusercontent.com/reflex-dev/reflex/main/LICENSE).\n" }, { "path": "SECURITY.md", "content": "# Security Policy\n\n## Supported Versions\n\n| Version | Supported |\n| -------- | ------------------ |\n| >= 0.7.0 | :white_check_mark: |\n\n## Reporting a Vulnerability\n\nPlease report any security vulnerabilities by using: https://github.com/reflex-dev/reflex/security/advisories/new\n" }, { "path": "docker-example/README.md", "content": "# Reflex Docker Examples\n\nThis directory contains several examples of how to deploy Reflex apps using docker.\n\nIn all cases, ensure that your `requirements.txt` file is up to date and\nincludes the `reflex` package.\n\n## `simple-two-port`\n\nThe most basic production deployment exposes two HTTP ports and relies on an\nexisting load balancer to forward the traffic appropriately.\n\n## `simple-one-port`\n\nThis deployment exports the frontend statically and serves it via a single HTTP\nport using Caddy. This is useful for platforms that only support a single port\nor where running a node server in the container is undesirable.\n\n## `production-compose`\n\nThis deployment is intended for use with a standalone VPS that is only hosting a\nsingle Reflex app. It provides the entire stack in a single `compose.yaml`\nincluding a webserver, one or more backend instances, redis, and a postgres\ndatabase.\n\n## `production-app-platform`\n\nThis example deployment is intended for use with App hosting platforms, like\nAzure, AWS, or Google Cloud Run. It is the backend of the deployment, which\ndepends on a separately hosted redis instance and static frontend deployment.\n" }, { "path": "docker-example/production-app-platform/.dockerignore", "content": ".web\n.git\n__pycache__/*\nDockerfile\nuploaded_files\n" }, { "path": "docker-example/production-app-platform/Dockerfile", "content": "# This docker file is intended to be used with container hosting services\n#\n# After deploying this image, get the URL pointing to the backend service\n# and run API_URL=https://path-to-my-container.example.com reflex export frontend\n# then copy the contents of `frontend.zip` to your static file server (github pages, s3, etc).\n#\n# Azure Static Web App example:\n# npx @azure/static-web-apps-cli deploy --env production --app-location .web/build/client\n#\n# For dynamic routes to function properly, ensure that 404s are redirected to /404 on the\n# static file host (for github pages, this works out of the box; remember to create .nojekyll).\n#\n# For azure static web apps, add `staticwebapp.config.json` to to `.web/build/client` with the following:\n# {\n# \"responseOverrides\": {\n# \"404\": {\n# \"rewrite\": \"/404.html\"\n# }\n# }\n# }\n#\n# Note: many container hosting platforms require amd64 images, so when building on an M1 Mac\n# for example, pass `docker build --platform=linux/amd64 ...`\n\n# Stage 1: init\nFROM python:3.13 as init\n\nARG uv=/root/.local/bin/uv\n\n# Install `uv` for faster package bootstrapping\nADD --chmod=755 https://astral.sh/uv/install.sh /install.sh\nRUN /install.sh && rm /install.sh\n\n# Copy local context to `/app` inside container (see .dockerignore)\nWORKDIR /app\nCOPY . .\nRUN mkdir -p /app/data /app/uploaded_files\n\n# Create virtualenv which will be copied into final container\nENV VIRTUAL_ENV=/app/.venv\nENV PATH=\"$VIRTUAL_ENV/bin:$PATH\"\nRUN $uv venv\n\n# Install app requirements and reflex inside virtualenv\nRUN $uv pip install -r requirements.txt\n\n# Deploy templates and prepare app\nRUN reflex init\n\n# Stage 2: copy artifacts into slim image \nFROM python:3.13-slim\nWORKDIR /app\nRUN adduser --disabled-password --home /app reflex\nCOPY --chown=reflex --from=init /app /app\n# Install libpq-dev for psycopg (skip if not using postgres).\nRUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*\nUSER reflex\nENV PATH=\"/app/.venv/bin:$PATH\" PYTHONUNBUFFERED=1\n\n# Needed until Reflex properly passes SIGTERM on backend.\nSTOPSIGNAL SIGKILL\n\n# Always apply migrations before starting the backend.\nCMD [ -d alembic ] && reflex db migrate; \\\n exec reflex run --env prod --backend-only --backend-port ${PORT:-8000}\n" }, { "path": "docker-example/production-app-platform/README.md", "content": "# production-app-platform\n\nThis example deployment is intended for use with App hosting platforms, like\nAzure, AWS, or Google Cloud Run.\n\n## Architecture\n\nThe production deployment consists of a few pieces:\n\n- Backend container - built by `Dockerfile` Runs the Reflex backend\n service on port 8000 and is scalable to multiple instances.\n- Redis container - A single instance the standard `redis` docker image should\n share private networking with the backend\n- Static frontend - HTML/CSS/JS files that are hosted via a CDN or static file\n server. This is not included in the docker image.\n\n## Deployment\n\nThese general steps do not cover the specifics of each platform, but all platforms should\nsupport the concepts described here.\n\n### Vnet\n\nAll containers in the deployment should be hooked up to the same virtual private\nnetwork so they can access the redis service and optionally the database server.\nThe vnet should not be exposed to the internet, use an ingress rule to terminate\nTLS at the load balancer and forward the traffic to a backend service replica.\n\n### Redis\n\nDeploy a `redis` instance on the vnet.\n\n### Backend\n\nThe backend is built by the `Dockerfile` in this directory. When deploying the\nbackend, be sure to set REFLEX_REDIS_URL=redis://internal-redis-hostname to connect to\nthe redis service.\n\n### Ingress\n\nConfigure the load balancer for the app to forward traffic to port 8000 on the\nbackend service replicas. Most platforms will generate an ingress hostname\nautomatically. Make sure when you access the ingress endpoint on `/ping` that it\nreturns \"pong\", indicating that the backend is up an available.\n\n### Frontend\n\nThe frontend should be hosted on a static file server or CDN.\n\n**Important**: when exporting the frontend, set the API_URL environment variable\nto the ingress hostname of the backend service.\n\nIf you will host the frontend from a path other than the root, set the\n`REFLEX_FRONTEND_PATH` environment variable appropriately when exporting the frontend.\n\nMost static hosts will automatically use the `/404.html` file to handle 404\nerrors. _This is essential for dynamic routes to work correctly._ Ensure that\nmissing routes return the `/404.html` content to the user if this is not the\ndefault behavior.\n\n_For Github Pages_: ensure the file `.nojekyll` is present in the root of the repo\nto avoid special processing of underscore-prefix directories, like `_next`.\n\n## Platform Notes\n\nThe following sections are currently a work in progress and may be incomplete.\n\n### Azure\n\nIn the Azure load balancer, per-message deflate is not supported. Add the following\nto your `rxconfig.py` to workaround this issue.\n\n```python\nimport uvicorn.workers\n\nimport reflex as rx\n\n\nclass NoWSPerMessageDeflate(uvicorn.workers.UvicornH11Worker):\n CONFIG_KWARGS = {\n **uvicorn.workers.UvicornH11Worker.CONFIG_KWARGS,\n \"ws_per_message_deflate\": False,\n }\n\n\nconfig = rx.Config(\n app_name=\"my_app\",\n gunicorn_worker_class=\"rxconfig.NoWSPerMessageDeflate\",\n)\n```\n\n#### Persistent Storage\n\nIf you need to use a database or upload files, you cannot save them to the\ncontainer volume. Use Azure Files and mount it into the container at /app/uploaded_files.\n\n#### Resource Types\n\n- Create a new vnet with 10.0.0.0/16\n - Create a new subnet for redis, database, and containers\n- Deploy redis as a Container Instances\n- Deploy database server as \"Azure Database for PostgreSQL\"\n - Create a new database for the app\n - Set db-url as a secret containing the db user/password connection string\n- Deploy Storage account for uploaded files\n - Enable access from the vnet and container subnet\n - Create a new file share\n - In the environment, create a new files share (get the storage key)\n- Deploy the backend as a Container App\n - Create a custom Container App Environment linked up to the same vnet as the redis container.\n - Set REFLEX_REDIS_URL and REFLEX_DB_URL environment variables\n - Add the volume from the environment\n - Add the volume mount to the container\n- Deploy the frontend as a Static Web App\n" }, { "path": "docker-example/production-compose/.dockerignore", "content": ".web\n.git\n__pycache__/*\nDockerfile\nCaddy.Dockerfile\ncompose.yaml\ncompose.*.yaml\nuploaded_files\n" }, { "path": "docker-example/production-compose/Caddy.Dockerfile", "content": "FROM library/caddy\n\nCOPY --from=local/reflex-app /app/.web/build/client /srv\nADD Caddyfile /etc/caddy/Caddyfile" }, { "path": "docker-example/production-compose/Caddyfile", "content": "{$DOMAIN}\n\nencode gzip\n\n@backend_routes path /_event/* /ping /_upload /_upload/*\nhandle @backend_routes {\n\treverse_proxy app:8000\n}\n\nroot * /srv\nroute {\n\ttry_files {path} {path}/ /404.html\n\tfile_server\n}\n" }, { "path": "docker-example/production-compose/Dockerfile", "content": "# This docker file is intended to be used with docker compose to deploy a production\n# instance of a Reflex app.\n\n# Stage 1: init\nFROM python:3.13 as init\n\nARG uv=/root/.local/bin/uv\n\n# Install `uv` for faster package bootstrapping\nADD --chmod=755 https://astral.sh/uv/install.sh /install.sh\nRUN /install.sh && rm /install.sh\n\n# Copy local context to `/app` inside container (see .dockerignore)\nWORKDIR /app\nCOPY . .\nRUN mkdir -p /app/data /app/uploaded_files\n\n# Create virtualenv which will be copied into final container\nENV VIRTUAL_ENV=/app/.venv\nENV PATH=\"$VIRTUAL_ENV/bin:$PATH\"\nRUN $uv venv\n\n# Install app requirements and reflex inside virtualenv\nRUN $uv pip install -r requirements.txt\n\n# Deploy templates and prepare app\nRUN reflex init\n\n# Export static copy of frontend to /app/.web/build/client\nRUN reflex export --frontend-only --no-zip\n\n# Copy static files out of /app to save space in backend image\nRUN mv .web/build/client /tmp/client\nRUN rm -rf .web && mkdir -p .web/build\nRUN mv /tmp/client .web/build/client\n\n# Stage 2: copy artifacts into slim image \nFROM python:3.13-slim\nWORKDIR /app\nRUN adduser --disabled-password --home /app reflex\nCOPY --chown=reflex --from=init /app /app\n# Install libpq-dev for psycopg (skip if not using postgres).\nRUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*\nUSER reflex\nENV PATH=\"/app/.venv/bin:$PATH\" PYTHONUNBUFFERED=1\n\n# Needed until Reflex properly passes SIGTERM on backend.\nSTOPSIGNAL SIGKILL\n\n# Always apply migrations before starting the backend.\nCMD [ -d alembic ] && reflex db migrate; \\\n exec reflex run --env prod --backend-only\n" }, { "path": "docker-example/production-compose/README.md", "content": "# production-compose\n\nThis example production deployment uses automatic TLS with Caddy serving static\nfiles for the frontend and proxying requests to both the frontend and backend.\nIt is intended for use with a standalone VPS that is only hosting a single\nReflex app.\n\nThe production app container (`Dockerfile`), builds and exports the frontend\nstatically (to be served by Caddy). The resulting image only runs the backend\nservice.\n\nThe `webserver` service, based on `Caddy.Dockerfile`, copies the static frontend\nand `Caddyfile` into the container to configure the reverse proxy routes that will\nforward requests to the backend service. Caddy will automatically provision TLS\nfor localhost or the domain specified in the environment variable `DOMAIN`.\n\nThis type of deployment should use less memory and be more performant since\nnodejs is not required at runtime.\n\n## Customize `Caddyfile` (optional)\n\nIf the app uses additional backend API routes, those should be added to the\n`@backend_routes` path matcher to ensure they are forwarded to the backend.\n\n## Build Reflex Production Service\n\nDuring build, set `DOMAIN` environment variable to the domain where the app will\nbe hosted! (Do not include http or https, it will always use https).\n\n**If `DOMAIN` is not provided, the service will default to `localhost`.**\n\n```bash\nDOMAIN=example.com docker compose build\n```\n\nThis will build both the `app` service from the `prod.Dockerfile` and the `webserver`\nservice via `Caddy.Dockerfile`.\n\n## Run Reflex Production Service\n\n```bash\nDOMAIN=example.com docker compose up\n```\n\nThe app should be available at the specified domain via HTTPS. Certificate\nprovisioning will occur automatically and may take a few minutes.\n\n### Data Persistence\n\nNamed docker volumes are used to persist the app database (`db-data`),\nuploaded_files (`upload-data`), and caddy TLS keys and certificates\n(`caddy-data`).\n\n## More Robust Deployment\n\nFor a more robust deployment, consider bringing the service up with\n`compose.prod.yaml` which includes postgres database and redis cache, allowing\nthe backend to run with multiple workers and service more requests.\n\n```bash\nDOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml up -d\n```\n\nPostgres uses its own named docker volume for data persistence.\n\n## Admin Tools\n\nWhen needed, the services in `compose.tools.yaml` can be brought up, providing\ngraphical database administration (Adminer on http://localhost:8080) and a\nredis cache browser (redis-commander on http://localhost:8081). It is not recommended\nto deploy these services if they are not in active use.\n\n```bash\nDOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d\n```\n" }, { "path": "docker-example/production-compose/compose.prod.yaml", "content": "# Use this override file to run the app in prod mode with postgres and redis\n# docker compose -f compose.yaml -f compose.prod.yaml up -d\nservices:\n db:\n image: postgres\n restart: always\n environment:\n POSTGRES_PASSWORD: secret\n volumes:\n - postgres-data:/var/lib/postgresql/data\n\n redis:\n image: redis\n restart: always\n\n app:\n environment:\n REFLEX_DB_URL: postgresql+psycopg://postgres:secret@db/postgres\n REFLEX_REDIS_URL: redis://redis:6379\n depends_on:\n - db\n - redis\n\nvolumes:\n postgres-data:\n" }, { "path": "docker-example/production-compose/compose.tools.yaml", "content": "# Use this override file with `compose.prod.yaml` to run admin tools\n# for production services.\n# docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d\nservices:\n adminer:\n image: adminer\n ports:\n - 8080:8080\n\n redis-commander:\n image: ghcr.io/joeferner/redis-commander:latest\n environment:\n - REDIS_HOSTS=local:redis:6379\n ports:\n - \"8081:8081\"\n\nvolumes:\n redis-ui-settings:\n" }, { "path": "docker-example/production-compose/compose.yaml", "content": "# Base compose file production deployment of reflex app with Caddy webserver\n# providing TLS termination and reverse proxying.\n#\n# See `compose.prod.yaml` for more robust and performant deployment option.\n#\n# During build and run, set environment DOMAIN pointing\n# to publicly accessible domain where app will be hosted\nservices:\n app:\n image: local/reflex-app\n environment:\n REFLEX_DB_URL: sqlite:///data/reflex.db\n build:\n context: .\n volumes:\n - db-data:/app/data\n - upload-data:/app/uploaded_files\n restart: always\n\n webserver:\n environment:\n DOMAIN: ${DOMAIN:-localhost}\n ports:\n - 443:443\n - 80:80 # For acme-challenge via HTTP.\n build:\n context: .\n dockerfile: Caddy.Dockerfile\n volumes:\n - caddy-data:/root/.caddy\n restart: always\n depends_on:\n - app\n\nvolumes:\n # SQLite data\n db-data:\n # Uploaded files\n upload-data:\n # TLS keys and certificates\n caddy-data:\n" }, { "path": "docker-example/production-one-port/.dockerignore", "content": ".web\n!.web/bun.lockb\n!.web/package.json\n" }, { "path": "docker-example/production-one-port/Caddyfile", "content": ":{$PORT}\n\nencode gzip\n\n@backend_routes path /_event/* /ping /_upload /_upload/*\nhandle @backend_routes {\n\treverse_proxy localhost:8000\n}\n\nroot * /srv\nroute {\n\ttry_files {path} {path}/ /404.html\n\tfile_server\n}\n" }, { "path": "docker-example/production-one-port/Dockerfile", "content": "# This Dockerfile is used to deploy a single-container Reflex app instance\n# to services like Render, Railway, Heroku, GCP, and others.\n\n# If the service expects a different port, provide it here (f.e Render expects port 10000)\nARG PORT=8080\n# Only set for local/direct access. When TLS is used, the API_URL is assumed to be the same as the frontend.\nARG API_URL\n\n# It uses a reverse proxy to serve the frontend statically and proxy to backend\n# from a single exposed port, expecting TLS termination to be handled at the\n# edge by the given platform.\nFROM python:3.13 as builder\n\nRUN mkdir -p /app/.web\nRUN python -m venv /app/.venv\nENV PATH=\"/app/.venv/bin:$PATH\"\n\nWORKDIR /app\n\n# Install python app requirements and reflex in the container\nCOPY requirements.txt .\nRUN pip install -r requirements.txt\n\n# Install reflex helper utilities like bun/node\nCOPY rxconfig.py ./\nRUN reflex init\n\n# Install pre-cached frontend dependencies (if exist)\nCOPY *.web/bun.lockb *.web/package.json .web/\nRUN if [ -f .web/bun.lockb ]; then cd .web && ~/.local/share/reflex/bun/bin/bun install --frozen-lockfile; fi\n\n# Copy local context to `/app` inside container (see .dockerignore)\nCOPY . .\n\nARG PORT API_URL\n# Download other npm dependencies and compile frontend\nRUN REFLEX_API_URL=${API_URL:-http://localhost:$PORT} reflex export --loglevel debug --frontend-only --no-zip && mv .web/build/client/* /srv/ && rm -rf .web\n\n\n# Final image with only necessary files\nFROM python:3.13-slim\n\n# Install Caddy and redis server inside image\nRUN apt-get update -y && apt-get install -y caddy redis-server && rm -rf /var/lib/apt/lists/*\n\nARG PORT API_URL\nENV PATH=\"/app/.venv/bin:$PATH\" PORT=$PORT REFLEX_API_URL=${API_URL:-http://localhost:$PORT} REFLEX_REDIS_URL=redis://localhost PYTHONUNBUFFERED=1\n\nWORKDIR /app\nCOPY --from=builder /app /app\nCOPY --from=builder /srv /srv\n\n# Needed until Reflex properly passes SIGTERM on backend.\nSTOPSIGNAL SIGKILL\n\nEXPOSE $PORT\n\n# Apply migrations before starting the backend.\nCMD [ -d alembic ] && reflex db migrate; \\\n caddy start && \\\n redis-server --daemonize yes && \\\n exec reflex run --env prod --backend-only\n" }, { "path": "docker-example/production-one-port/README.md", "content": "# production-one-port\n\nThis docker deployment runs Reflex in prod mode, exposing a single HTTP port:\n\n- `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.\n\nThe deployment also runs a local Redis server to store state for each user.\n\nConceptually it is similar to the `simple-one-port` example except it:\n\n- has layer caching for python, reflex, and node dependencies\n- uses multi-stage build to reduce the size of the final image\n\nUsing this method may be preferable for deploying in memory constrained\nenvironments, because it serves a static frontend export, rather than running\nthe Vite server via node.\n\n## Build\n\n```console\ndocker build -t reflex-production-one-port .\n```\n\n## Run\n\n```console\ndocker run -p 8080:8080 reflex-production-one-port\n```\n\nNote that this container has _no persistence_ and will lose all data when\nstopped. You can use bind mounts or named volumes to persist the database and\nuploaded_files directories as needed.\n\n## Usage\n\nThis container should be used with an existing load balancer or reverse proxy to\nterminate TLS.\n\nIt is also useful for deploying to simple app platforms, such as Render or Heroku.\n" }, { "path": "docker-example/simple-one-port/.dockerignore", "content": ".web\n.git\n__pycache__/*\nDockerfile\nuploaded_files\n" }, { "path": "docker-example/simple-one-port/Caddyfile", "content": ":{$PORT}\n\nencode gzip\n\n@backend_routes path /_event/* /ping /_upload /_upload/*\nhandle @backend_routes {\n\treverse_proxy localhost:8000\n}\n\nroot * /srv\nroute {\n\ttry_files {path} {path}/ /404.html\n\tfile_server\n}\n" }, { "path": "docker-example/simple-one-port/Dockerfile", "content": "# This Dockerfile is used to deploy a single-container Reflex app instance\n# to services like Render, Railway, Heroku, GCP, and others.\n\n# It uses a reverse proxy to serve the frontend statically and proxy to backend\n# from a single exposed port, expecting TLS termination to be handled at the\n# edge by the given platform.\nFROM python:3.13\n\n# If the service expects a different port, provide it here (f.e Render expects port 10000)\nARG PORT=8080\n# Only set for local/direct access. When TLS is used, the API_URL is assumed to be the same as the frontend.\nARG API_URL\nENV PORT=$PORT REFLEX_API_URL=${API_URL:-http://localhost:$PORT} REFLEX_REDIS_URL=redis://localhost PYTHONUNBUFFERED=1\n\n# Install Caddy and redis server inside image\nRUN apt-get update -y && apt-get install -y caddy redis-server && rm -rf /var/lib/apt/lists/*\n\nWORKDIR /app\n\n# Copy local context to `/app` inside container (see .dockerignore)\nCOPY . .\n\n# Install app requirements and reflex in the container\nRUN pip install -r requirements.txt\n\n# Deploy templates and prepare app\nRUN reflex init\n\n# Download all npm dependencies and compile frontend\nRUN reflex export --frontend-only --no-zip && mv .web/build/client/* /srv/ && rm -rf .web\n\n# Needed until Reflex properly passes SIGTERM on backend.\nSTOPSIGNAL SIGKILL\n\nEXPOSE $PORT\n\n# Apply migrations before starting the backend.\nCMD [ -d alembic ] && reflex db migrate; \\\n caddy start && \\\n redis-server --daemonize yes && \\\n exec reflex run --env prod --backend-only\n" }, { "path": "docker-example/simple-one-port/README.md", "content": "# simple-one-port\n\nThis docker deployment runs Reflex in prod mode, exposing a single HTTP port:\n\n- `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.\n\nThe deployment also runs a local Redis server to store state for each user.\n\nUsing this method may be preferable for deploying in memory constrained\nenvironments, because it serves a static frontend export, rather than running\nthe Vite server via node.\n\nFor platforms which only terminate TLS to a single port, this container can be\ndeployed instead of the `simple-two-port` example.\n\n## Build\n\n```console\ndocker build -t reflex-simple-one-port .\n```\n\n## Run\n\n```console\ndocker run -p 8080:8080 reflex-simple-one-port\n```\n\nNote that this container has _no persistence_ and will lose all data when\nstopped. You can use bind mounts or named volumes to persist the database and\nuploaded_files directories as needed.\n\n## Usage\n\nThis container should be used with an existing load balancer or reverse proxy to\nterminate TLS.\n\nIt is also useful for deploying to simple app platforms, such as Render or Heroku.\n" }, { "path": "docker-example/simple-two-port/.dockerignore", "content": ".web\n.git\n__pycache__/*\nDockerfile\nuploaded_files\n" }, { "path": "docker-example/simple-two-port/Dockerfile", "content": "# This Dockerfile is used to deploy a simple single-container Reflex app instance.\nFROM python:3.13\n\nRUN apt-get update && apt-get install -y redis-server && rm -rf /var/lib/apt/lists/*\nENV REFLEX_REDIS_URL=redis://localhost PYTHONUNBUFFERED=1\n\n# Copy local context to `/app` inside container (see .dockerignore)\nWORKDIR /app\nCOPY . .\n\n# Install app requirements and reflex in the container\nRUN pip install -r requirements.txt\n\n# Deploy templates and prepare app\nRUN reflex init\n\n# Download all npm dependencies and compile frontend\nRUN reflex export --frontend-only --no-zip\n\n# Needed until Reflex properly passes SIGTERM on backend.\nSTOPSIGNAL SIGKILL\n\n# Always apply migrations before starting the backend.\nCMD [ -d alembic ] && reflex db migrate; \\\n redis-server --daemonize yes && \\\n exec reflex run --env prod\n" }, { "path": "docker-example/simple-two-port/README.md", "content": "# simple-two-port\n\nThis docker deployment runs Reflex in prod mode, exposing two HTTP ports:\n\n- `3000` - node server using optimized production build\n- `8000` - python gunicorn server hosting the Reflex backend\n\nThe deployment also runs a local Redis server to store state for each user.\n\n## Build\n\n```console\ndocker build -t reflex-simple-two-port .\n```\n\n## Run\n\n```console\ndocker run -p 3000:3000 -p 8000:8000 reflex-simple-two-port\n```\n\nNote that this container has _no persistence_ and will lose all data when\nstopped. You can use bind mounts or named volumes to persist the database and\nuploaded_files directories as needed.\n\n## Usage\n\nThis container should be used with an existing load balancer or reverse proxy to\nroute traffic to the appropriate port inside the container.\n\nFor example, the following Caddyfile can be used to terminate TLS and forward\ntraffic to the frontend and backend from outside the container.\n\n```\nmy-domain.com\n\nencode gzip\n\n@backend_routes path /_event/* /ping /_upload /_upload/*\nhandle @backend_routes {\n\treverse_proxy localhost:8000\n}\n\nreverse_proxy localhost:3000\n```\n" }, { "path": "docs/DEBUGGING.md", "content": "# Debugging\n\nIt is possible to run Reflex apps in dev mode under a debugger.\n\n1. Run Reflex as a module: `python -m reflex run --env dev`\n2. Set current working directory to the dir containing `rxconfig.py`\n\n## VSCode\n\nThe following launch configuration can be used to interactively debug a Reflex\napp with breakpoints.\n\n```json\n{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"name\": \"Reflex App\",\n \"type\": \"python\",\n \"request\": \"launch\",\n \"module\": \"reflex\",\n \"args\": \"run --env dev\",\n \"justMyCode\": true,\n \"cwd\": \"${fileDirname}/..\"\n }\n ]\n}\n```\n" }, { "path": "docs/de/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ Performante, anpassbare Web-Apps in purem Python. Bereitstellung in Sekunden. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex ist eine Bibliothek, mit der man Full-Stack-Web-Applikationen in purem Python erstellen kann.\n\nWesentliche Merkmale:\n\n- **Pures Python** - Schreibe dein Front- und Backend in Python, es gibt also keinen Grund, JavaScript zu lernen.\n- **Volle Flexibilität** - Reflex ist einfach zu handhaben, kann aber auch für komplexe Anwendungen skaliert werden.\n- **Sofortige Bereitstellung** - Nach dem Erstellen kannst du deine App mit einem [einzigen Befehl](https://reflex.dev/docs/hosting/deploy-quick-start/) bereitstellen oder auf deinem eigenen Server hosten.\n\nAuf unserer [Architektur-Seite](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) erfahren Sie, wie Reflex unter der Haube funktioniert.\n\n## ⚙️ Installation\n\nÖffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 Erstelle deine erste App\n\nDie Installation von `reflex` installiert auch das `reflex`-Kommandozeilen-Tool.\n\nTeste, ob die Installation erfolgreich war, indem du ein neues Projekt erstellst. (Ersetze `my_app_name` durch deinen Projektnamen):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\nDieser Befehl initialisiert eine Vorlage in deinem neuen Verzeichnis.\n\nDu kannst diese App im Entwicklungsmodus ausführen:\n\n```bash\nreflex run\n```\n\nDu solltest deine App unter http://localhost:3000 laufen sehen.\n\nNun kannst du den Quellcode in `my_app_name/my_app_name.py` ändern. Reflex hat schnelle Aktualisierungen, sodass du deine Änderungen sofort siehst, wenn du deinen Code speicherst.\n\n## 🫧 Beispiel-App\n\nLass uns ein Beispiel durchgehen: die Erstellung einer Benutzeroberfläche für die Bildgenerierung mit [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Zur Vereinfachung rufen wir einfach die [OpenAI-API](https://platform.openai.com/docs/api-reference/authentication) auf, aber du könntest dies auch durch ein lokal ausgeführtes ML-Modell ersetzen.\n\n \n\n
\n\"Eine\n
\n\n \n\nHier ist der komplette Code, um dies zu erstellen. Das alles wird in einer Python-Datei gemacht!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"Der Zustand der App.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Hole das Bild aus dem Prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Füge Zustand und Seite zur App hinzu.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Schauen wir uns das mal genauer an.\n\n
\n\"Erläuterung\n
\n\n### **Reflex-UI**\n\nFangen wir mit der Benutzeroberfläche an.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nDiese `index`-Funktion definiert das Frontend der App.\n\nWir verwenden verschiedene Komponenten wie `center`, `vstack`, `input` und `button`, um das Frontend zu erstellen. Komponenten können ineinander verschachtelt werden, um komplexe Layouts zu erstellen. Und du kannst Schlüsselwortargumente verwenden, um sie mit der vollen Kraft von CSS zu stylen.\n\nReflex wird mit [über 60 eingebauten Komponenten](https://reflex.dev/docs/library) geliefert, die dir den Einstieg erleichtern. Wir fügen aktiv weitere Komponenten hinzu, und es ist einfach, [eigene Komponenten zu erstellen](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **State**\n\nReflex stellt deine Benutzeroberfläche als Funktion deines Zustands dar.\n\n```python\nclass State(rx.State):\n \"\"\"Der Zustand der App.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nDer Zustand definiert alle Variablen (genannt Vars) in einer App, die sich ändern können, und die Funktionen, die sie ändern.\n\nHier besteht der Zustand aus einem `prompt` und einer `image_url`. Es gibt auch die Booleans `processing` und `complete`, um anzuzeigen, wann der Button deaktiviert werden soll (während der Bildgenerierung) und wann das resultierende Bild angezeigt werden soll.\n\n### **Event-Handler**\n\n```python\ndef get_image(self):\n \"\"\"Hole das Bild aus dem Prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nInnerhalb des Zustands definieren wir Funktionen, die als Event-Handler bezeichnet werden und die Zustand-Variablen ändern. Event-Handler sind die Art und Weise, wie wir den Zustand in Reflex ändern können. Sie können als Reaktion auf Benutzeraktionen aufgerufen werden, z.B. beim Klicken auf eine Schaltfläche oder bei der Eingabe in ein Textfeld. Diese Aktionen werden als Ereignisse bezeichnet.\n\nUnsere DALL-E.-App hat einen Event-Handler, `get_image`, der dieses Bild von der OpenAI-API abruft. Die Verwendung von `yield` in der Mitte eines Event-Handlers führt zu einer Aktualisierung der Benutzeroberfläche. Andernfalls wird die Benutzeroberfläche am Ende des Ereignishandlers aktualisiert.\n\n### **Routing**\n\nSchließlich definieren wir unsere App.\n\n```python\napp = rx.App()\n```\n\nWir fügen der Indexkomponente eine Seite aus dem Stammverzeichnis der Anwendung hinzu. Wir fügen auch einen Titel hinzu, der in der Seitenvorschau/Browser-Registerkarte angezeigt wird.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nDu kannst eine mehrseitige App erstellen, indem du weitere Seiten hinzufügst.\n\n## 📑 Ressourcen\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Komponentenbibliothek](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Bereitstellung](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Status\n\nReflex wurde im Dezember 2022 unter dem Namen Pynecone gestartet.\n\nAb 2025 wurde [Reflex Cloud](https://cloud.reflex.dev) gestartet, um die beste Hosting-Erfahrung für Reflex-Apps zu bieten. Wir werden es weiterhin entwickeln und mehr Funktionen implementieren.\n\nReflex hat wöchentliche Veröffentlichungen und neue Features! Stelle sicher, dass du dieses Repository mit einem :star: Stern markierst und :eyes: beobachtest, um auf dem Laufenden zu bleiben.\n\n## Beitragende\n\nWir begrüßen Beiträge jeder Größe! Hier sind einige gute Möglichkeiten, um in der Reflex-Community zu starten.\n\n- **Tritt unserem Discord bei**: Unser [Discord](https://discord.gg/T5WSbC2YtQ) ist der beste Ort, um Hilfe für dein Reflex-Projekt zu bekommen und zu besprechen, wie du beitragen kannst.\n- **GitHub-Diskussionen**: Eine großartige Möglichkeit, über Funktionen zu sprechen, die du hinzugefügt haben möchtest oder Dinge, die verwirrend sind/geklärt werden müssen.\n- **GitHub-Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) sind eine ausgezeichnete Möglichkeit, Bugs zu melden. Außerdem kannst du versuchen, ein bestehendes Problem zu lösen und eine PR einzureichen.\n\nWir suchen aktiv nach Mitwirkenden, unabhängig von deinem Erfahrungslevel oder deiner Erfahrung. Um beizutragen, sieh dir [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) an.\n\n## Vielen Dank an unsere Mitwirkenden:\n\n\n \n\n\n## Lizenz\n\nReflex ist Open-Source und lizenziert unter der [Apache License 2.0](/LICENSE).\n" }, { "path": "docs/es/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ Aplicaciones web personalizables y eficaces en Python puro. Despliega tu aplicación en segundos. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![Versiones](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentación](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex es una biblioteca para construir aplicaciones web full-stack en Python puro.\n\nCaracterísticas clave:\n\n- **Python puro** - Escribe el frontend y backend de tu aplicación en Python, sin necesidad de aprender JavaScript.\n- **Flexibilidad total** - Reflex es fácil para empezar, pero también puede escalar a aplicaciones complejas.\n- **Despliegue instantáneo** - Después de construir, despliega tu aplicación con un [solo comando](https://reflex.dev/docs/hosting/deploy-quick-start/) u hospédala en tu propio servidor.\n\nConsulta nuestra [página de arquitectura](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) para aprender cómo funciona Reflex en detalle.\n\n## ⚙️ Instalación\n\nAbra un terminal y ejecute (Requiere Python 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 Crea tu primera aplicación\n\nAl instalar `reflex` también se instala la herramienta de línea de comandos `reflex`.\n\nCompruebe que la instalación se ha realizado correctamente creando un nuevo proyecto. (Sustituye `my_app_name` por el nombre de tu proyecto):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\nEste comando inicializa una plantilla en tu nuevo directorio.\n\nPuedes iniciar esta aplicación en modo de desarrollo:\n\n```bash\nreflex run\n```\n\nDebería ver su aplicación ejecutándose en http://localhost:3000.\n\nAhora puede modificar el código fuente en `my_app_name/my_app_name.py`. Reflex se actualiza rápidamente para que pueda ver los cambios al instante cuando guarde el código.\n\n## 🫧 Ejemplo de una Aplicación\n\nVeamos un ejemplo: crearemos una UI de generación de imágenes en torno a [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Para simplificar, solo llamamos a la [API de OpenAI](https://platform.openai.com/docs/api-reference/authentication), pero podrías reemplazar esto con un modelo ML ejecutado localmente.\n\n \n\n
\n\"Un\n
\n\n \n\nAquí está el código completo para crear esto. ¡Todo esto se hace en un archivo de Python!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\nclass State(rx.State):\n \"\"\"El estado de la aplicación\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Obtiene la imagen desde la consulta.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Agrega el estado y la pagina a la aplicación\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Vamos a analizarlo.\n\n
\n\"Explicando\n
\n\n### **Reflex UI**\n\nEmpezemos por la interfaz de usuario (UI).\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nEsta función `index` define el frontend de la aplicación.\n\nUtilizamos diferentes componentes como `center`, `vstack`, `input`, y `button` para construir el frontend. Los componentes pueden anidarse unos dentro de otros para crear diseños complejos. Además, puedes usar argumentos de tipo keyword para darles estilo con toda la potencia de CSS.\n\nReflex viene con [mas de 60 componentes incorporados](https://reflex.dev/docs/library) para ayudarle a empezar. Estamos añadiendo activamente más componentes y es fácil [crear sus propios componentes](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **Estado**\n\nReflex representa su UI como una función de su estado (State).\n\n```python\nclass State(rx.State):\n \"\"\"El estado de la aplicación\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n```\n\nEl estado (State) define todas las variables (llamadas vars) de una aplicación que pueden cambiar y las funciones que las modifican.\n\nAquí el estado se compone de `prompt` e `image_url`. También están los booleanos `processing` y `complete` para indicar cuando se deshabilite el botón (durante la generación de la imagen) y cuando se muestre la imagen resultante.\n\n### **Manejadores de Evento**\n\n```python\ndef get_image(self):\n \"\"\"Obtiene la imagen desde la consulta.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nDentro del estado, definimos funciones llamadas manejadores de eventos que cambian las variables de estado. Los Manejadores de Evento son la manera que podemos modificar el estado en Reflex. Pueden ser activados en respuesta a las acciones del usuario, como hacer clic en un botón o escribir en un cuadro de texto. Estas acciones se llaman eventos.\n\nNuestra aplicación DALL·E tiene un manipulador de eventos, `get_image` que recibe esta imagen del OpenAI API. El uso de `yield` en medio de un manipulador de eventos hará que la UI se actualice. De lo contrario, la interfaz se actualizará al final del manejador de eventos.\n\n### **Enrutamiento**\n\nPor último, definimos nuestra app.\n\n```python\napp = rx.App()\n```\n\nAñadimos una página desde la raíz (root) de la aplicación al componente de índice (index). También agregamos un título que se mostrará en la vista previa de la página/pestaña del navegador.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nPuedes crear una aplicación multipágina añadiendo más páginas.\n\n## 📑 Recursos\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Librería de componentes](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Despliegue](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Estado\n\nReflex se lanzó en diciembre de 2022 con el nombre de Pynecone.\n\nA partir de 2025, [Reflex Cloud](https://cloud.reflex.dev) se ha lanzado para proporcionar la mejor experiencia de alojamiento para aplicaciones Reflex. Continuaremos desarrollándolo e implementando más características.\n\n¡Reflex tiene nuevas versiones y características cada semana! Asegúrate de :star: marcar como favorito y :eyes: seguir este repositorio para mantenerte actualizado.\n\n## Contribuciones\n\n¡Aceptamos contribuciones de cualquier tamaño! A continuación encontrará algunas buenas formas de iniciarse en la comunidad Reflex.\n\n- **Únete a nuestro Discord**: Nuestro [Discord](https://discord.gg/T5WSbC2YtQ) es el mejor lugar para obtener ayuda en su proyecto Reflex y discutir cómo puedes contribuir.\n- **Discusiones de GitHub**: Una excelente manera de hablar sobre las características que deseas agregar o las cosas que te resultan confusas o necesitan aclaración.\n- **GitHub Issues**: Las incidencias son una forma excelente de informar de errores. Además, puedes intentar resolver un problema existente y enviar un PR.\n\nBuscamos colaboradores, sin importar su nivel o experiencia. Para contribuir consulta [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## Todo Gracias A Nuestros Contribuidores:\n\n\n \n\n\n## Licencia\n\nReflex es de código abierto y está licenciado bajo la [Apache License 2.0](/LICENSE).\n" }, { "path": "docs/in/README.md", "content": "
\n\"Reflex\n\"Reflex\n\n
\n\n### **✨ प्रदर्शनकारी, अनुकूलित वेब ऐप्स, शुद्ध Python में। सेकंडों में तैनात करें। ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n# Reflex\n\nReflex शुद्ध पायथन में पूर्ण-स्टैक वेब ऐप्स बनाने के लिए एक लाइब्रेरी है।\n\nमुख्य विशेषताएँ:\n\n- **शुद्ध पायथन** - अपने ऐप के फ्रंटएंड और बैकएंड को पायथन में लिखें, जावास्क्रिप्ट सीखने की जरूरत नहीं है।\n- **पूर्ण लचीलापन** - Reflex के साथ शुरुआत करना आसान है, लेकिन यह जटिल ऐप्स के लिए भी स्केल कर सकता है।\n- **तुरंत तैनाती** - बिल्डिंग के बाद, अपने ऐप को [एकल कमांड](https://reflex.dev/docs/hosting/deploy-quick-start/) के साथ तैनात करें या इसे अपने सर्वर पर होस्ट करें।\n\nReflex के अंदर के कामकाज को जानने के लिए हमारे [आर्किटेक्चर पेज](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) को देखें।\n\n## ⚙️ इंस्टॉलेशन (Installation)\n\nएक टर्मिनल खोलें और चलाएं (Python 3.10+ की आवश्यकता है):\n\n```bash\npip install reflex\n```\n\n## 🥳 अपना पहला ऐप बनाएं (Create your first App)\n\nreflex को इंस्टॉल करने से ही reflex कमांड लाइन टूल भी इंस्टॉल हो जाता है।\n\nसुनिश्चित करें कि इंस्टॉलेशन सफल थी, एक नया प्रोजेक्ट बनाकर इसे टेस्ट करें। ('my_app_name' की जगह अपने प्रोजेक्ट का नाम रखें):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\nयह कमांड आपकी नयी डायरेक्टरी में एक टेम्पलेट ऐप को प्रारंभ करता है।\n\nआप इस ऐप को development मोड में चला सकते हैं:\n\n```bash\nreflex run\n```\n\nआपको http://localhost:3000 पर अपने ऐप को चलते हुए देखना चाहिए।\n\nअब आप my_app_name/my_app_name.py में source कोड को संशोधित कर सकते हैं। Reflex में तेज रिफ्रेश की सुविधा है, इसलिए जब आप अपनी कोड को सहेजते हैं, तो आप अपने बदलावों को तुरंत देख सकते हैं।\n\n## 🫧 उदाहरण ऐप (Example App)\n\nएक उदाहरण पर चलते हैं: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node) से एक इमेज उत्पन्न करने के लिए UI। सरलता के लिए, हम सिर्फ [OpenAI API](https://platform.openai.com/docs/api-reference/authentication) को बुलाते हैं, लेकिन आप इसे ML मॉडल से बदल सकते हैं locally।\n\n \n\n
\n\"DALL·E\n
\n\n \n\nयहाँ पर इसका पूरा कोड है जिससे यह बनाया जा सकता है। यह सब एक ही Python फ़ाइल में किया गया है!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Add state and page to the app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## इसे समझते हैं।\n\n
\n\"DALL-E\n
\n\n### **Reflex UI**\n\nहम UI के साथ शुरू करेंगे।\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nयह `index` फ़ंक्शन एप्लिकेशन की फ़्रंटएंड को परिभाषित करता है।\n\nहम फ़्रंटएंड बनाने के लिए `center`, `vstack`, `input`, और `button` जैसे विभिन्न components का उपयोग करते हैं। Components को एक-दूसरे के भीतर डाल सकते हैं विस्तारित लेआउट बनाने के लिए। और आप CSS की पूरी ताक़त के साथ इन्हें स्टाइल करने के लिए कीवर्ड आर्ग्यूमेंट (keyword args) का उपयोग कर सकते हैं।\n\nरिफ़्लेक्स के पास [60+ built-in components](https://reflex.dev/docs/library) हैं जो आपको शुरुआती मदद के लिए हैं। हम बहुत से components जोड़ रहे हैं, और अपने खुद के components बनाना भी आसान है। [create your own components](https://reflex.dev/docs/wrapping-react/overview/)\n\n### **स्टेट (State)**\n\nReflex आपके UI को आपकी स्टेट (state) के एक फ़ंक्शन के रूप में प्रस्तुत करता है।\n\n```python\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n```\n\nस्टेट (state) ऐप में उन सभी वेरिएबल्स (vars) को परिभाषित करती है जो बदल सकती हैं और उन फ़ंक्शनों को जो उन्हें बदलते हैं।\n\nयहां स्टेट (state) में `prompt` और `image_url` शामिल हैं। प्रगति और छवि दिखाने के लिए `processing` और `complete` बूलियन भी हैं।\n\n### **इवेंट हैंडलर (Event Handlers)**\n\n```python\ndef get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nस्टेट (state) के अंदर, हम इवेंट हैंडलर्स (event handlers) को परिभाषित करते हैं जो स्टेट वेरिएबल्स को बदलते हैं। इवेंट हैंडलर्स (event handlers) से reflex में स्टेट (state) को मॉडिफ़ाय किया जा सकता हैं। इन्हें उपयोगकर्ता क्रियाओं (user actions) के प्रति प्रतिक्रिया (response) के रूप में बुलाया जा सकता है, जैसे कि बटन को क्लिक करना या टेक्स्ट बॉक्स में टाइप करना। इन क्रियाओं को इवेंट्स (events) कहा जाता है।\n\nहमारे DALL·E. ऐप में एक इवेंट हैंडलर `get_image` है जिससे यह OpenAI API से इमेज प्राप्त करता है। इवेंट हैंडलर में `yield` का उपयोग करने कि वजह से UI अपडेट हो जाएगा। अन्यथा UI इवेंट हैंडलर के अंत में अपडेट होगा।\n\n### **रूटिंग (Routing)**\n\nआखिरकार, हम अपने एप्लिकेशन को परिभाषित करते हैं।\n\n```python\napp = rx.App()\n```\n\nहम अपने एप्लिकेशन के रूट से इंडेक्स कॉम्पोनेंट तक एक पेज को जोड़ते हैं। हम एक शीर्षक भी जोड़ते हैं जो पेज प्रीव्यू/ब्राउज़र टैब में दिखाई देगा।\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nआप और पेज जोड़कर एक मल्टी-पेज एप्लिकेशन बना सकते हैं।\n\n## 📑 संसाधन (Resources)\n\n
\n\n📑 [दस्तावेज़](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [ब्लॉग](https://reflex.dev/blog)   |   📱 [कॉम्पोनेंट लाइब्रेरी](https://reflex.dev/docs/library)   |   🖼️ [टेम्पलेट्स](https://reflex.dev/templates/)   |   🛸 [तैनाती](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ स्टेटस (Status)\n\nReflex दिसंबर 2022 में Pynecone नाम से शुरू हुआ।\n\n2025 की शुरुआत से, [Reflex Cloud](https://cloud.reflex.dev) लॉन्च किया गया है जो Reflex ऐप्स के लिए सर्वोत्तम होस्टिंग अनुभव प्रदान करता है। हम इसे विकसित करना और अधिक सुविधाएँ लागू करना जारी रखेंगे।\n\nReflex में हर सप्ताह नए रिलीज़ और फीचर्स आ रहे हैं! सुनिश्चित करें कि :star: स्टार और :eyes: वॉच इस रेपोजिटरी को अपडेट रहने के लिए।\n\n## (योगदान) Contributing\n\nहम हर तरह के योगदान का स्वागत करते हैं! रिफ्लेक्स कम्यूनिटी में शुरुआत करने के कुछ अच्छे तरीके नीचे दिए गए हैं।\n\n- **Join Our Discord** (डिस्कॉर्ड सर्वर से जुड़ें): हमारा [Discord](https://discord.gg/T5WSbC2YtQ) रिफ्लेक्स प्रोजेक्ट पर सहायता प्राप्त करने और आप कैसे योगदान दे सकते हैं, इस पर चर्चा करने के लिए सबसे अच्छी जगह है।\n- **GitHub Discussions** (गिटहब चर्चाएँ): उन सुविधाओं के बारे में बात करने का एक शानदार तरीका जिन्हें आप जोड़ना चाहते हैं या ऐसी चीज़ें जो भ्रमित करने वाली हैं/स्पष्टीकरण की आवश्यकता है।\n- **GitHub Issues** (गिटहब समस्याएं): [Issues](https://github.com/reflex-dev/reflex/issues) बग की रिपोर्ट करने का एक शानदार तरीका है। इसके अतिरिक्त, आप किसी मौजूदा समस्या को हल करने का प्रयास कर सकते हैं और एक पीआर सबमिट कर सकते हैं।\n\nहम सक्रिय रूप से योगदानकर्ताओं की तलाश कर रहे हैं, चाहे आपका कौशल स्तर या अनुभव कुछ भी हो। योगदान करने के लिए [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) देखें।\n\n## हमारे सभी योगदानकर्ताओं का धन्यवाद:\n\n\n \n\n\n## लाइसेंस (License)\n\nरिफ्लेक्स ओपन-सोर्स है और [अपाचे लाइसेंस 2.0](/LICENSE) के तहत लाइसेंस प्राप्त है।\n" }, { "path": "docs/it/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ App web performanti e personalizzabili in puro Python. Distribuisci in pochi secondi. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex è una libreria per sviluppare applicazioni web full-stack in Python puro.\n\nCaratteristiche principali:\n\n- **Python Puro** - Scrivi il frontend e il backend della tua app interamente in Python, senza bisogno di imparare Javascript.\n- **Flessibilità Totale** - Reflex è facile da iniziare, ma può anche gestire app complesse.\n- **Distribuzione Istantanea** - Dopo lo sviluppo, distribuisci la tua app con un [singolo comando](https://reflex.dev/docs/hosting/deploy-quick-start/) o ospitala sul tuo server.\n\nConsulta la nostra [pagina di architettura](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) per scoprire come funziona Reflex sotto il cofano.\n\n## ⚙️ Installazione\n\nApri un terminale ed esegui (Richiede Python 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 Crea la tua prima app\n\nInstallando `reflex` si installa anche lo strumento da riga di comando `reflex`.\n\nVerifica che l'installazione sia stata eseguita correttamente creando un nuovo progetto. (Sostituisci `nome_app` con il nome del tuo progetto):\n\n```bash\nmkdir nome_app\ncd nome_app\nreflex init\n```\n\nQuesto comando inizializza un'app template nella tua nuova directory.\n\nPuoi eseguire questa app in modalità sviluppo con:\n\n```bash\nreflex run\n```\n\nDovresti vedere la tua app in esecuzione su http://localhost:3000.\n\nOra puoi modificare il codice sorgente in `nome_app/nome_app.py`. Reflex offre aggiornamenti rapidi, così puoi vedere le tue modifiche istantaneamente quando salvi il tuo codice.\n\n## 🫧 Esempio App\n\nEsaminiamo un esempio: creare un'interfaccia utente per la generazione di immagini attorno a [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Per semplicità, chiamiamo semplicemente l'[API OpenAI](https://platform.openai.com/docs/api-reference/authentication), ma potresti sostituirla con un modello ML eseguito localmente.\n\n \n\n
\n\"Un\n
\n\n \n\nEcco il codice completo per crearlo. Tutto fatto in un unico file Python!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"Lo stato dell'app.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Ottieni l'immagine dal prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Vuoto\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Inserisci un prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Genera Immagine\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Aggiungi stato e pagina all'app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Analizziamolo.\n\n
\n\"Spiegazione\n
\n\n### **Reflex UI**\n\nCominciamo con l'UI.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nQuesta funzione `index` definisce il frontend dell'app.\n\nUtilizziamo diversi componenti come `center`, `vstack`, `input`, e `button` per costruire il frontend. I componenti possono essere annidati gli uni negli altri per creare layout complessi. E puoi utilizzare argomenti chiave per stilizzarli con tutta la potenza di CSS.\n\nReflex offre [più di 60 componenti integrati](https://reflex.dev/docs/library) per aiutarti a iniziare. Stiamo attivamente aggiungendo più componenti ed è facile [creare i tuoi componenti](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **Stato (State)**\n\nReflex rappresenta la tua UI come una funzione del tuo stato.\n\n```python\nclass State(rx.State):\n \"\"\"Lo stato dell'app.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nLo stato definisce tutte le variabili (chiamate vars) in un'app che possono cambiare e le funzioni che le cambiano.\n\nQui lo stato è composto da un `prompt` e `image_url`. Ci sono anche i booleani `processing` e `complete` per indicare quando disabilitare il pulsante (durante la generazione dell'immagine) e quando mostrare l'immagine risultante.\n\n### **Gestori di Eventi (Event Handlers)**\n\n```python\ndef get_image(self):\n \"\"\"Ottieni l'immagine dal prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Vuoto\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nDentro lo stato, definiamo funzioni chiamate gestori di eventi che cambiano le vars dello stato. I gestori di eventi sono il modo in cui possiamo modificare lo stato in Reflex. Possono essere chiamati in risposta alle azioni dell'utente, come fare clic su un pulsante o digitare in una casella di testo. Queste azioni vengono chiamate eventi.\n\nLa nostra app DALL·E ha un gestore di eventi, `get_image` con cui ottiene questa immagine dall'API OpenAI. Utilizzando `yield` nel mezzo di un gestore di eventi farà sì che l'UI venga aggiornata. Altrimenti, l'UI verrà aggiornata alla fine del gestore di eventi.\n\n### **Instradamento (Routing)**\n\nInfine, definiamo la nostra app.\n\n```python\napp = rx.App()\n```\n\nAggiungiamo una pagina dalla radice dell'app al componente dell'indice. Aggiungiamo anche un titolo che apparirà nell'anteprima della pagina/scheda del browser.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nPuoi creare un'app multi-pagina aggiungendo altre pagine.\n\n## 📑 Risorse\n\n
\n\n📑 [Documentazione](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Libreria Componenti](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Distribuzione](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Stato\n\nReflex è stato lanciato nel dicembre 2022 con il nome Pynecone.\n\nA partire dal 2025, [Reflex Cloud](https://cloud.reflex.dev) è stato lanciato per fornire la migliore esperienza di hosting per le app Reflex. Continueremo a svilupparlo e implementare più funzionalità.\n\nReflex ha nuove versioni e funzionalità in arrivo ogni settimana! Assicurati di :star: mettere una stella e :eyes: osservare questa repository per rimanere aggiornato.\n\n## Contribuire\n\nDiamo il benvenuto a contributi di qualsiasi dimensione! Di seguito sono alcuni modi per iniziare nella comunità Reflex.\n\n- **Unisciti al nostro Discord**: Il nostro [Discord](https://discord.gg/T5WSbC2YtQ) è posto migliore per ottenere aiuto sul tuo progetto Reflex e per discutere come puoi contribuire.\n- **Discussioni su GitHub**: Un ottimo modo per parlare delle funzionalità che desideri aggiungere o di cose che creano confusione o necessitano chiarimenti.\n- **GitHub Issues**: Le [Issues](https://github.com/reflex-dev/reflex/issues) sono un ottimo modo per segnalare bug. Inoltre, puoi provare a risolvere un problema esistente e inviare un PR.\n\nStiamo attivamente cercando collaboratori, indipendentemente dal tuo livello di abilità o esperienza. Per contribuire, consulta [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## Un Grazie a Tutti i Nostri Contributori:\n\n\n \n\n\n## Licenza\n\nReflex è open-source e rilasciato sotto la [Licenza Apache 2.0](/LICENSE).\n" }, { "path": "docs/ja/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ 即時デプロイが可能な、Pure Python で作ったパフォーマンスと汎用性が高い Web アプリケーション ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex は Python のみでフルスタック Web アプリケーションを作成できるライブラリです。\n\n主な特徴:\n\n- **Pure Python** - Web アプリケーションのフロントエンドとバックエンドを Python のみで実装できるため、Javascript を学ぶ必要がありません。\n- **高い柔軟性** - Reflex は簡単に始められて、複雑なアプリケーションまで作成できます。\n- **即時デプロイ** - ビルド後、すぐにデプロイが可能です。[単純な CLI コマンド](https://reflex.dev/docs/hosting/deploy-quick-start/)を使ったアプリケーションのデプロイや、自身のサーバーへのホストができます。\n\nReflex がどのように動作しているかを知るには、[アーキテクチャページ](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)をご覧ください。\n\n## ⚙️ インストール\n\nターミナルを開いて以下のコマンドを実行してください。（Python 3.10 以上が必要です。）:\n\n```bash\npip install reflex\n```\n\n## 🥳 最初のアプリケーションを作ろう\n\n`reflex`をインストールすると、`reflex`の CLI ツールが自動でインストールされます。\n\n新しいプロジェクトを作成して、インストールが成功しているかを確認しましょう。（`my_app_name`を自身のプロジェクト名に書き換えて実行ください。）:\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\n上記のコマンドを実行すると、新しいフォルダにテンプレートアプリを作成します。\n\n下記のコマンドを実行すると、開発モードでアプリを開始します。\n\n```bash\nreflex run\n```\n\nhttp://localhost:3000 にアクセスしてアプリの動作を見ることができます。\n\n`my_app_name/my_app_name.py`のソースコードを編集してみましょう！Reflex は fast refresh なので、ソースを保存した直後に変更が Web ページに反映されます。\n\n## 🫧 実装例\n\n実装例を見てみましょう: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node)を中心とした画像生成 UI を作成しました。説明を簡単にするためにここでは[OpenAI API](https://platform.openai.com/docs/api-reference/authentication)を呼んでいますが、ローカルで動作している機械学習モデルに置き換えることも可能です。\n\n \n\n
\n\"DALL·Eのフロントエンドラッパーです。画像を生成している過程を表示しています。\"\n
\n\n \n\n画像生成 UI のソースコードの全貌を見てみましょう。下記のように、単一の Python ファイルで作れます！\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"アプリのステート\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"プロンプトからイメージを取得する\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# ステートとページをアプリに追加\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## それぞれの実装を見てみましょう\n\n
\n\"DALL-E\n
\n\n### **Reflex UI**\n\nUI から見てみましょう。\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\n`index`関数において、アプリのフロントエンドを定義しています。\n\nフロントエンドを実装するにあたり、`center`、`vstack`、`input`、`button`など異なるコンポーネントを使用しています。コンポーネントはお互いにネストが可能であり、複雑なレイアウトを作成できます。また、keyword args を使うことで、CSS の機能をすべて使ったスタイルが可能です。\n\nReflex は[60 を超える内臓コンポーネント](https://reflex.dev/docs/library)があるため、すぐに始められます。私たちは、積極的にコンポーネントを追加していますが、簡単に[自身のコンポーネントを追加](https://reflex.dev/docs/wrapping-react/overview/)することも可能です。\n\n### **ステート**\n\nReflex はステートの関数を用いて UI を表示します。\n\n```python\nclass State(rx.State):\n \"\"\"アプリのステート\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nステートでは、アプリで変更が可能な全ての変数（vars と呼びます）と、vars の変更が可能な関数を定義します。\n\nこの例では、ステートを`prompt`と`image_url`で構成しています。そして、ブール型の`processing`と`complete`を用いて、ボタンを無効にするタイミング（画像生成中）や生成された画像を表示するタイミングを示しています。\n\n### **イベントハンドラ**\n\n```python\ndef get_image(self):\n \"\"\"プロンプトからイメージを取得する\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nステートにおいて、ステートの vars を変更できるイベントハンドラ関数を定義しています。イベントハンドラは Reflex において、ステートの vars を変更する方法です。ボタンクリックやテキストボックスの入力など、ユーザのアクションに応じてイベントハンドラが呼ばれます。\n\nDALL·E.アプリには、OpenAI API からイメージを取得する`get_image`関数があります。イベントハンドラの最後で UI の更新がかかるため、関数の途中に`yield`を入れることで先に UI を更新しています。\n\n### **ルーティング**\n\n最後に、アプリを定義します。\n\n```python\napp = rx.App()\n```\n\nアプリにページを追加し、ドキュメントルートを index コンポーネントにルーティングしています。更に、ページのプレビューやブラウザタブに表示されるタイトルを記載しています。\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nページを追加することで、マルチページアプリケーションを作成できます。\n\n## 📑 リソース\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Component Library](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ ステータス\n\n2022 年 12 月に、Reflex は Pynecone という名前でローンチしました。\n\n2025 年から [Reflex Cloud](https://cloud.reflex.dev) がローンチされ、Reflex アプリケーションの最高のホスティング体験を提供しています。私たちは引き続き開発を続け、より多くの機能を実装していきます。\n\nReflex は毎週、新しいリリースや機能追加を行っています！最新情報を逃さないために、 :star: Star や :eyes: Watch をお願いします。\n\n## コントリビュート\n\n様々なサイズのコントリビュートを歓迎しています！Reflex コミュニティに入るための方法を、いくつかリストアップします。\n\n- **Discord に参加**: [Discord](https://discord.gg/T5WSbC2YtQ)は、Reflex プロジェクトの相談や、コントリビュートについての話し合いをするための、最適な場所です。\n- **GitHub Discussions**: GitHub Discussions では、追加したい機能や、複雑で解明が必要な事柄についての議論に適している場所です。\n- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)はバグの報告に適している場所です。また、課題を解決した PR のサブミットにチャレンジしていただくことも、可能です。\n\nスキルや経験に関わらず、私たちはコントリビュータを積極的に探しています。コントリビュートするために、[CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)をご覧ください。\n\n## 私たちのコントリビュータに感謝！:\n\n\n \n\n\n## ライセンス\n\nReflex はオープンソースであり、[Apache License 2.0](/LICENSE)に基づいてライセンス供与されます。\n" }, { "path": "docs/kr/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ 순수 Python으로 고성능 사용자 정의 웹앱을 만들어 보세요. 몇 초만에 배포 가능합니다. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex는 순수 Python으로 풀스택 웹 앱을 구축하기 위한 라이브러리입니다.\n\n주요 기능:\n\n- **순수 Python** - 앱의 프론트엔드와 백엔드를 모두 Python으로 작성하며, Javascript를 배울 필요가 없습니다.\n- **완전한 유연성** - Reflex는 시작하기 쉽지만, 복잡한 앱으로도 확장할 수 있습니다.\n- **즉시 배포** - 앱을 빌드한 후 [단일 명령어](https://reflex.dev/docs/hosting/deploy-quick-start/)로 배포하거나 자체 서버에서 호스팅할 수 있습니다.\n\nReflex가 내부적으로 어떻게 작동하는지 알아보려면 [아키텍처 페이지](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)를 참조하세요.\n\n## ⚙️ 설치\n\n터미널을 열고 실행하세요. (Python 3.10+ 필요):\n\n```bash\npip install reflex\n```\n\n## 🥳 첫 앱 만들기\n\n`reflex`를 설치하면, `reflex` 명령어 라인 도구도 설치됩니다.\n\n새 프로젝트를 생성하여 설치가 성공적인지 확인합니다. (`my_app_name`을 프로젝트 이름으로 변경합니다.):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\n이 명령어는 새 디렉토리에 템플릿 앱을 초기화합니다.\n\n개발 모드에서 이 앱을 실행할 수 있습니다:\n\n```bash\nreflex run\n```\n\nhttp://localhost:3000 에서 앱이 실행 됩니다.\n\n이제 `my_app_name/my_app_name.py`에서 소스코드를 수정할 수 있습니다. Reflex는 빠른 새로고침을 지원하므로 코드를 저장할 때마다 즉시 변경 사항을 볼 수 있습니다.\n\n## 🫧 예시 앱\n\n예시를 살펴보겠습니다: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node)를 중심으로 이미지 생성 UI를 만들어 보겠습니다. 간단하게 하기 위해 [OpenAI API](https://platform.openai.com/docs/api-reference/authentication)를 호출했지만, 이를 로컬에서 실행되는 ML 모델로 대체할 수 있습니다.\n\n \n\n
\n\"A\n
\n\n \n\n이것이 완성된 코드입니다. 이 모든 것은 하나의 Python 파일에서 이루어집니다!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Add state and page to the app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## 하나씩 살펴보겠습니다.\n\n
\n\"Explaining\n
\n\n### **Reflex UI**\n\nUI부터 시작해봅시다.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\n`index` 함수는 앱의 프론트엔드를 정의합니다.\n\n`center`, `vstack`, `input`, `button`과 같은 다양한 컴포넌트를 사용하여 프론트엔드를 구축합니다.\n컴포넌트들은 복잡한 레이아웃을 만들기 위해 서로 중첩될 수 있습니다.\n그리고 키워드 인자를 사용하여 CSS의 모든 기능을 사용하여 스타일을 지정할 수 있습니다.\n\nReflex는 시작하기 위한 [60개 이상의 기본 컴포넌트](https://reflex.dev/docs/library)를 제공하고 있습니다. 더 많은 컴포넌트를 추가하고 있으며, [자신만의 컴포넌트를 생성하는 것](https://reflex.dev/docs/wrapping-react/overview/)도 쉽습니다.\n\n### **State**\n\nReflex는 UI를 State 함수로 표현합니다.\n\n```python\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n```\n\nstate는 앱에서 변경될 수 있는 모든 변수(vars로 불림)와 이러한 변수를 변경하는 함수를 정의합니다.\n\n여기서 state는 `prompt`와 `image_url`로 구성됩니다. 또한 `processing`과 `complete`라는 불리언 값이 있습니다. 이 값들은 이미지 생성 중 버튼을 비활성화할 때와, 결과 이미지를 표시할 때를 나타냅니다.\n\n### **Event Handlers**\n\n```python\ndef get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nState 내에서, state vars를 변경하는 이벤트 핸들러라고 불리는 함수를 정의합니다. 이벤트 핸들러는 Reflex에서 state를 변경하는 방법입니다. 버튼을 클릭하거나 텍스트 상자에 입력하는 것과 같이 사용자 동작에 응답하여 호출될 수 있습니다. 이러한 동작을 이벤트라고 합니다.\n\nDALL·E. 앱에는 OpenAI API에서 이미지를 가져오는 `get_image` 이벤트 핸들러가 있습니다. 이벤트 핸들러의 중간에 `yield`를 사용하면 UI가 업데이트됩니다. 그렇지 않으면 UI는 이벤트 핸들러의 끝에서 업데이트됩니다.\n\n### **Routing**\n\n마지막으로, 앱을 정의합니다.\n\n```python\napp = rx.App()\n```\n\n앱의 루트에서 index 컴포넌트로 페이지를 추가합니다. 또한 페이지 미리보기/브라우저 탭에 표시될 제목도 추가합니다.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\n여러 페이지를 추가하여 멀티 페이지 앱을 만들 수 있습니다.\n\n## 📑 자료\n\n
\n\n📑 [문서](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [블로그](https://reflex.dev/blog)   |   📱 [컴포넌트 라이브러리](https://reflex.dev/docs/library)   |   🖼️ [템플릿](https://reflex.dev/templates/)   |   🛸 [배포](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ 상태\n\nReflex는 2022년 12월 Pynecone이라는 이름으로 출시되었습니다.\n\n2025년부터 [Reflex Cloud](https://cloud.reflex.dev)가 출시되어 Reflex 앱을 위한 최상의 호스팅 경험을 제공합니다. 우리는 계속해서 개발하고 더 많은 기능을 구현할 예정입니다.\n\nReflex는 매주 새로운 릴리즈와 기능을 제공합니다! 최신 정보를 확인하려면 :star: Star와 :eyes: Watch를 눌러 이 저장소를 확인하세요.\n\n## 기여\n\n우리는 모든 기여를 환영합니다! 아래는 Reflex 커뮤니티에 참여하는 좋은 방법입니다.\n\n- **Discord 참여**: 우리의 [Discord](https://discord.gg/T5WSbC2YtQ)는 Reflex 프로젝트에 대한 도움을 받고 기여하는 방법을 논의하는 최고의 장소입니다.\n- **GitHub Discussions**: 추가하고 싶은 기능이나 혼란스럽거나 해결이 필요한 것들에 대해 이야기하는 좋은 방법입니다.\n- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)는 버그를 보고하는 훌륭한 방법입니다. 또한, 기존의 이슈를 해결하고 PR을 제출할 수 있습니다.\n\n우리는 능력이나 경험에 상관없이 적극적으로 기여자를 찾고 있습니다. 기여하려면 [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)를 확인하세요.\n\n## 모든 기여자들에게 감사드립니다:\n\n\n \n\n\n## License\n\nReflex는 오픈소스이며 [Apache License 2.0](/LICENSE)로 라이선스가 부여됩니다.\n" }, { "path": "docs/pe/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ برنامه های تحت وب قابل تنظیم، کارآمد تماما پایتونی که در چند ثانیه مستقر(دپلوی) می‎شود. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex - رفلکس\n\nرفلکس(Reflex) یک کتابخانه برای ساخت برنامه های وب فول استک تماما پایتونی است.\n\nویژگی های کلیدی:\n\n- **تماما پایتونی** - فرانت اند و بک اند برنامه خود را همه در پایتون بنویسید، بدون نیاز به یادگیری جاوا اسکریپت.\n- **انعطاف پذیری کامل** - شروع به کار با Reflex آسان است، اما می تواند به برنامه های پیچیده نیز تبدیل شود.\n- **دپلوی فوری** - پس از ساخت، برنامه خود را با [یک دستور](https://reflex.dev/docs/hosting/deploy-quick-start/) دپلوی کنید یا آن را روی سرور خود میزبانی کنید.\n\nبرای آشنایی با نحوه عملکرد Reflex [صفحه معماری](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) را ببینید.\n\n## ⚙️ Installation - نصب و راه اندازی\n\nیک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 اولین برنامه خود را ایجاد کنید\n\nنصب `reflex` همچنین `reflex` در خط فرمان را نصب میکند.\n\nبا ایجاد یک پروژه جدید موفقیت آمیز بودن نصب را تست کنید. (`my_app_name` را با اسم پروژه خودتان جایگزین کنید):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\nاین دستور یک برنامه الگو(تمپلیت) را در فهرست(دایرکتوری) جدید شما مقداردهی اولیه می کند\n\nمی توانید این برنامه را در حالت توسعه(development) اجرا کنید:\n\n```bash\nreflex run\n```\n\nباید برنامه خود را در حال اجرا ببینید در http://localhost:3000.\n\nاکنون می‌توانید کد منبع را در «my_app_name/my_app_name.py» تغییر دهید. Reflex دارای تازه‌سازی‌های سریعی است، بنابراین می‌توانید تغییرات خود را بلافاصله پس از ذخیره کد خود مشاهده کنید.\n\n## 🫧 Example App - برنامه نمونه\n\nبیایید یک مثال بزنیم: ایجاد یک رابط کاربری برای تولید تصویر [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). برای سادگی، ما فراخوانی میکنیم [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), اما می توانید آن را با یک مدل ML که به صورت محلی اجرا می شود جایگزین کنید.\n\n \n\n
\n\"A\n
\n\n \n\nدر اینجا کد کامل برای ایجاد این پروژه آمده است. همه اینها در یک فایل پایتون انجام می شود!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Add state and page to the app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## بیاید سادش کنیم\n\n
\n\"Explaining\n
\n\n### **Reflex UI - رابط کاربری رفلکس**\n\nبیایید با رابط کاربری شروع کنیم.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nتابع `index` قسمت فرانت اند برنامه را تعریف می کند.\n\nما از اجزای مختلفی مثل `center`, `vstack`, `input` و `button` استفاده میکنیم تا فرانت اند را بسازیم. اجزاء را می توان درون یکدیگر قرار داد\nبرای ایجاد طرح بندی های پیچیده می توانید از args کلمات کلیدی برای استایل دادن به آنها از CSS استفاده کنید.\n\nرفلکس دارای [بیش از 60 جزء](https://reflex.dev/docs/library) برای کمک به شما برای شروع. ما به طور فعال اجزای بیشتری را اضافه می کنیم, و این خیلی آسان است که [اجزا خود را بسازید](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **State - حالت**\n\nرفلکس رابط کاربری شما را به عنوان تابعی از وضعیت شما نشان می دهد.\n\n```python\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nحالت تمام متغیرها(variables) (به نام vars) را در یک برنامه که می توانند تغییر دهند و توابعی که آنها را تغییر می دهند تعریف می کند..\n\nدر اینجا حالت از یک `prompt` و `image_url` تشکیل شده است. همچنین دو بولی `processing` و `complete` برای نشان دادن زمان غیرفعال کردن دکمه (در طول تولید تصویر) و زمان نمایش تصویر نتیجه وجود دارد.\n\n### **Event Handlers - کنترل کنندگان رویداد**\n\n```python\ndef get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nدر داخل حالت، توابعی به نام کنترل کننده رویداد تعریف می کنیم که متغیرهای حالت را تغییر می دهند. کنترل کننده های رویداد راهی هستند که می توانیم وضعیت را در Reflex تغییر دهیم. آنها را می توان در پاسخ به اقدامات کاربر، مانند کلیک کردن روی یک دکمه یا تایپ کردن در یک متن، فراخوانی کرد. به این اعمال وقایع می گویند.\n\nبرنامه DALL·E ما دارای یک کنترل کننده رویداد، `get_image` است که این تصویر را از OpenAI API دریافت می کند. استفاده از `yield` در وسط کنترل‌کننده رویداد باعث به‌روزرسانی رابط کاربری می‌شود. در غیر این صورت رابط کاربری در پایان کنترل کننده رویداد به روز می شود.\n\n### **Routing - مسیریابی**\n\nبالاخره اپلیکیشن خود را تعریف می کنیم.\n\n```python\napp = rx.App()\n```\n\nما یک صفحه از root برنامه را به جزء index اضافه می کنیم. ما همچنین عنوانی را اضافه می کنیم که در برگه پیش نمایش/مرورگر صفحه نمایش داده می شود.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nبا افزودن صفحات بیشتر می توانید یک برنامه چند صفحه ای ایجاد کنید.\n\n## 📑 Resources - منابع\n\n
\n\n📑 [اسناد](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [وبلاگ](https://reflex.dev/blog)   |   📱 [کتابخانه جزء](https://reflex.dev/docs/library)   |   🖼️ [قالب ها](https://reflex.dev/templates/)   |   🛸 [استقرار](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Status - وضعیت\n\nرفلکس(reflex) در دسامبر 2022 با نام Pynecone راه اندازی شد.\n\nاز سال 2025، [Reflex Cloud](https://cloud.reflex.dev) برای فراهم کردن بهترین تجربه میزبانی برای برنامه های Reflex راه‌اندازی شده است. ما به توسعه آن ادامه خواهیم داد و ویژگی‌های بیشتری را پیاده‌سازی خواهیم کرد.\n\nرفلکس(reflex) هر هفته نسخه ها و ویژگی های جدیدی دارد! مطمئن شوید که :star: ستاره و :eyes: این مخزن را تماشا کنید تا به روز بمانید.\n\n## Contributing - مشارکت کردن\n\nما از مشارکت در هر اندازه استقبال می کنیم! در زیر چند راه خوب برای شروع در انجمن رفلکس آورده شده است.\n\n- **به Discord ما بپیوندید**: [Discord](https://discord.gg/T5WSbC2YtQ) ما بهترین مکان برای دریافت کمک در مورد پروژه Reflex و بحث در مورد اینکه چگونه می توانید کمک کنید است.\n- **بحث های GitHub**: راهی عالی برای صحبت در مورد ویژگی هایی که می خواهید اضافه کنید یا چیزهایی که گیج کننده هستند/نیاز به توضیح دارند.\n- **قسمت مشکلات GitHub**: [قسمت مشکلات](https://github.com/reflex-dev/reflex/issues) یک راه عالی برای گزارش اشکال هستند. علاوه بر این، می توانید یک مشکل موجود را حل کنید و یک PR(pull request) ارسال کنید.\n\nما فعالانه به دنبال مشارکت کنندگان هستیم، فارغ از سطح مهارت یا تجربه شما. برای مشارکت [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) را بررسی کنید.\n\n## All Thanks To Our Contributors - با تشکر از همکاران ما:\n\n\n \n\n\n## License - مجوز\n\nرفلکس متن باز و تحت مجوز [Apache License 2.0](/LICENSE) است.\n" }, { "path": "docs/pt/pt_br/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ Web apps customizáveis, performáticos, em Python puro. Faça deploy em segundos. ✨**\n\n[![Versão PyPI](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versões](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentação](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex é uma biblioteca para construir aplicações web full-stack em Python puro.\n\nPrincipais características:\n\n- **Python Puro** - Escreva o frontend e o backend da sua aplicação inteiramente em Python, sem necessidade de aprender Javascript.\n- **Flexibilidade Total** - O Reflex é fácil de começar a usar, mas também pode escalar para aplicações complexas.\n- **Deploy Instantâneo** - Após a construção, faça o deploy da sua aplicação com um [único comando](https://reflex.dev/docs/hosting/deploy-quick-start/) ou hospede-a em seu próprio servidor.\n\nVeja nossa [página de arquitetura](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) para aprender como o Reflex funciona internamente.\n\n## ⚙️ Instalação\n\nAbra um terminal e execute (Requer Python 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 Crie o seu primeiro app\n\nInstalar `reflex` também instala a ferramenta de linha de comando `reflex`.\n\nCrie um novo projeto para verificar se a instalação foi bem sucedida. (Mude `nome_do_meu_app` com o nome do seu projeto):\n\n```bash\nmkdir nome_do_meu_app\ncd nome_do_meu_app\nreflex init\n```\n\nEste comando inicializa um app base no seu novo diretório.\n\nVocê pode executar este app em modo desenvolvimento:\n\n```bash\nreflex run\n```\n\nVocê deve conseguir verificar seu app sendo executado em http://localhost:3000.\n\nAgora, você pode modificar o código fonte em `nome_do_meu_app/nome_do_meu_app.py`. O Reflex apresenta recarregamento rápido para que você possa ver suas mudanças instantaneamente quando você salva o seu código.\n\n## 🫧 Exemplo de App\n\nVeja o seguinte exemplo: criar uma interface de criação de imagens por meio do [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Para fins de simplicidade, vamos apenas chamar a [API da OpenAI](https://platform.openai.com/docs/api-reference/authentication), mas você pode substituir esta solução por um modelo de ML executado localmente.\n\n \n\n
\n\"Um\n
\n\n \n\nAqui está o código completo para criar este projeto. Isso tudo foi feito apenas em um arquivo Python!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"Estado da aplicação.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Obtenção da imagem a partir do prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Adição do estado e da página no app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Vamos por partes.\n\n
\n\"Explicando\n
\n\n### **Reflex UI**\n\nVamos começar com a UI (Interface de Usuário)\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nEsta função `index` define o frontend do app.\n\nUsamos diferentes componentes, como `center`, `vstack`, `input` e `button`, para construir o frontend. Componentes podem ser aninhados um no do outro\npara criar layouts mais complexos. E você pode usar argumentos de chave-valor para estilizá-los com todo o poder do CSS.\n\nO Reflex vem com [60+ componentes nativos](https://reflex.dev/docs/library) para te ajudar a começar. Estamos adicionando ativamente mais componentes, e é fácil [criar seus próprios componentes](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **Estado**\n\nO Reflex representa a sua UI como uma função do seu estado.\n\n```python\nclass State(rx.State):\n \"\"\"Estado da aplicação.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nO estado define todas as variáveis (chamadas de vars) em um app que podem mudar e as funções que as alteram.\n\nAqui, o estado é composto por um `prompt` e uma `image_url`. Há também os booleanos `processing` e `complete` para indicar quando desabilitar o botão (durante a geração da imagem) e quando mostrar a imagem resultante.\n\n### **Handlers de Eventos**\n\n```python\ndef get_image(self):\n \"\"\"Obtenção da imagem a partir do prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nDentro do estado, são definidas funções chamadas de Handlers de Eventos, que podem mudar as variáveis do estado. Handlers de Eventos são a forma com a qual podemos modificar o estado dentro do Reflex. Eles podem ser chamados como resposta a uma ação do usuário, como o clique de um botão ou a escrita em uma caixa de texto. Estas ações são chamadas de eventos.\n\nNosso app DALL-E possui um Handler de Evento chamado `get_image`, que obtêm a imagem da API da OpenAI. Usar `yield` no meio de um Handler de Evento causa a atualização da UI do seu app. Caso contrário, a UI seria atualizada no fim da execução de um Handler de Evento.\n\n### **Rotas**\n\nFinalmente, definimos nosso app.\n\n```python\napp = rx.App()\n```\n\nAdicionamos uma página na raíz do app, apontando para o componente index. Também adicionamos um título que irá aparecer na visualização da página/aba do navegador.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nVocê pode criar um app com múltiplas páginas adicionando mais páginas.\n\n## 📑 Recursos\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Biblioteca de Componentes](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Status\n\nO Reflex foi lançado em Dezembro de 2022 com o nome Pynecone.\n\nA partir de 2025, o [Reflex Cloud](https://cloud.reflex.dev) foi lançado para fornecer a melhor experiência de hospedagem para apps Reflex. Continuaremos a desenvolvê-lo e implementar mais recursos.\n\nO Reflex tem novas versões e recursos chegando toda semana! Certifique-se de marcar com :star: estrela e :eyes: observar este repositório para se manter atualizado.\n\n## Contribuições\n\nNós somos abertos a contribuições de qualquer tamanho! Abaixo, seguem algumas boas formas de começar a contribuir para a comunidade do Reflex.\n\n- **Entre no nosso Discord**: Nosso [Discord](https://discord.gg/T5WSbC2YtQ) é o melhor lugar para conseguir ajuda no seu projeto Reflex e para discutir como você pode contribuir.\n- **Discussões no GitHub**: Uma boa forma de conversar sobre funcionalidades que você gostaria de ver ou coisas que ainda estão confusas/exigem ajuda.\n- **Issues no GitHub**: [Issues](https://github.com/reflex-dev/reflex/issues) são uma excelente forma de reportar bugs. Além disso, você pode tentar resolver alguma issue existente e enviar um PR.\n\nEstamos ativamente buscando novos contribuidores, não importa o seu nível de habilidade ou experiência. Para contribuir, confira [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md).\n\n## Todo Agradecimento aos Nossos Contribuidores:\n\n\n \n\n\n## Licença\n\nO Reflex é de código aberto e licenciado sob a [Apache License 2.0](/LICENSE).\n" }, { "path": "docs/tr/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ Saf Python'da performanslı, özelleştirilebilir web uygulamaları. Saniyeler içinde dağıtın. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex, saf Python'da tam yığın web uygulamaları oluşturmak için bir kütüphanedir.\n\nTemel özellikler:\n\n- **Saf Python** - Uygulamanızın ön uç ve arka uç kısımlarının tamamını Python'da yazın, Javascript öğrenmenize gerek yok.\n- **Tam Esneklik** - Reflex ile başlamak kolaydır, ancak karmaşık uygulamalara da ölçeklenebilir.\n- **Anında Dağıtım** - Oluşturduktan sonra, uygulamanızı [tek bir komutla](https://reflex.dev/docs/hosting/deploy-quick-start/) dağıtın veya kendi sunucunuzda barındırın.\n\nReflex'in perde arkasında nasıl çalıştığını öğrenmek için [mimari sayfamıza](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) göz atın.\n\n## ⚙️ Kurulum\n\nBir terminal açın ve çalıştırın (Python 3.10+ gerekir):\n\n```bash\npip install reflex\n```\n\n## 🥳 İlk Uygulamanı Oluştur\n\n`reflex`'i kurduğunuzda `reflex` komut satırı aracınıda kurmuş olursunuz.\n\nKurulumun başarılı olduğunu test etmek için yeni bir proje oluşturun. (`my_app_name`'i proje ismiyle değiştirin.):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\nBu komut ile birlikte yeni oluşturduğunuz dizinde bir şablon uygulaması oluşturur.\n\nUygulamanızı geliştirme modunda başlatabilirsiniz:\n\n```bash\nreflex run\n```\n\nUygulamanızın http://localhost:3000 adresinde çalıştığını görmelisiniz.\n\nŞimdi `my_app_name/my_app_name.py` yolundaki kaynak kodu düzenleyebilirsiniz. Reflex'in hızlı yenileme özelliği vardır, böylece kodunuzu kaydettiğinizde değişikliklerinizi anında görebilirsiniz.\n\n## 🫧 Örnek Uygulama\n\nBir örnek üzerinden gidelim: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node) kullanarak bir görüntü oluşturma arayüzü oluşturalım. Basit olması açısından, yalnızca [OpenAI API](https://platform.openai.com/docs/api-reference/authentication)'ını kullanıyoruz, ancak bunu yerel olarak çalıştırılan bir ML modeliyle değiştirebilirsiniz.\n\n \n\n
\n\"A\n
\n\n \n\nİşte bunu oluşturmak için kodun tamamı. Her şey sadece bir Python dosyasıyla hazırlandı!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"Uygulama durumu.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Prompt'tan görüntüyü alın.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Sayfa ve durumu uygulamaya ekleyin.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Daha Detaylı İceleyelim\n\n
\n\"DALL-E\n
\n\n### **Reflex UI**\n\nUI (Kullanıcı Arayüzü) ile başlayalım.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nBu `index` fonkisyonu uygulamanın frontend'ini tanımlar.\n\nFrontend'i oluşturmak için `center`, `vstack`, `input`, ve `button` gibi farklı bileşenler kullanıyoruz. Karmaşık düzenler oluşturmak için bileşenleri birbirinin içine yerleştirilebiliriz. Ayrıca bunları CSS'nin tüm gücüyle şekillendirmek için anahtar kelime argümanları kullanabilirsiniz.\n\nReflex, işinizi kolaylaştırmak için [60'tan fazla dahili bileşen](https://reflex.dev/docs/library) içerir. Aktif olarak yeni bileşen ekliyoruz ve [kendi bileşenlerinizi oluşturmak](https://reflex.dev/docs/wrapping-react/overview/) oldukça kolay.\n\n### **Durum (State)**\n\nReflex arayüzünüzü durumunuzun bir fonksiyonu olarak temsil eder.\n\n```python\nclass State(rx.State):\n \"\"\"Uygulama durumu.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n```\n\nDurum (State), bir uygulamadaki değişebilen tüm değişkenleri (vars olarak adlandırılır) ve bunları değiştiren fonksiyonları tanımlar.\n\nBurada durum `prompt` ve `image_url`inden oluşur. Ayrıca düğmenin ne zaman devre dışı bırakılacağını (görüntü oluşturma sırasında) ve görüntünün ne zaman gösterileceğini belirtmek için `processing` ve `complete` booleanları da vardır.\n\n### **Olay İşleyicileri (Event Handlers)**\n\n```python\ndef get_image(self):\n \"\"\"Prompt'tan görüntüyü alın.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nDurum içinde, durum değişkenlerini değiştiren olay işleyicileri adı verilen fonksiyonları tanımlarız. Olay işleyicileri, Reflex'te durumu değiştirebilmemizi sağlar. Bir düğmeye tıklamak veya bir metin kutusuna yazı yazmak gibi kullanıcı eylemlerine yanıt olarak çağrılabilirler. Bu eylemlere olay denir.\n\nDALL·E uygulamamız OpenAI API'ından bu görüntüyü almak için `get_image` adlı bir olay işleyicisine sahiptir. Bir olay işleyicisinin ortasında `yield`ın kullanılması UI'ın güncellenmesini sağlar. Aksi takdirde UI olay işleyicisinin sonunda güncellenecektir.\n\n### **Yönlendirme (Routing)**\n\nEn sonunda uygulamamızı tanımlıyoruz.\n\n```python\napp = rx.App()\n```\n\nUygulamamızın kök dizinine index bileşeninden bir sayfa ekliyoruz. Ayrıca sayfa önizlemesinde/tarayıcı sekmesinde görünecek bir başlık ekliyoruz.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nDaha fazla sayfa ekleyerek çok sayfalı bir uygulama oluşturabilirsiniz.\n\n## 📑 Kaynaklar\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Component Library](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Durum\n\nReflex, Aralık 2022'de Pynecone adıyla piyasaya sürüldü.\n\n2025'in başından itibaren, Reflex uygulamaları için en iyi barındırma deneyimini sunmak amacıyla [Reflex Cloud](https://cloud.reflex.dev) hizmete girmiştir. Bunu geliştirmeye ve daha fazla özellik eklemeye devam edeceğiz.\n\nReflex'in her hafta yeni sürümleri ve özellikleri geliyor! Güncel kalmak için bu depoyu :star: yıldızlamayı ve :eyes: izlediğinizden emin olun.\n\n## Katkı\n\nHer boyuttaki katkıları memnuniyetle karşılıyoruz! Aşağıda Reflex topluluğuna adım atmanın bazı yolları mevcut.\n\n- **Discord Kanalımıza Katılın**: [Discord'umuz](https://discord.gg/T5WSbC2YtQ), Reflex projeniz hakkında yardım almak ve nasıl katkıda bulunabileceğinizi tartışmak için en iyi yerdir.\n- **GitHub Discussions**: Eklemek istediğiniz özellikler veya kafa karıştırıcı, açıklığa kavuşturulması gereken şeyler hakkında konuşmanın harika bir yolu.\n- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) hataları bildirmenin mükemmel bir yoludur. Ayrıca mevcut bir sorunu deneyip çözebilir ve bir PR (Pull Requests) gönderebilirsiniz.\n\nBeceri düzeyiniz veya deneyiminiz ne olursa olsun aktif olarak katkıda bulunacak kişiler arıyoruz. Katkı sağlamak için katkı sağlama rehberimize bakabilirsiniz: [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## Hepsi Katkıda Bulunanlar Sayesinde:\n\n\n \n\n\n## Lisans\n\nReflex açık kaynaklıdır ve [Apache License 2.0](/LICENSE) altında lisanslıdır.\n" }, { "path": "docs/vi/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ Ứng dụng web hiệu suất cao, tùy chỉnh bằng Python thuần. Deploy trong vài giây. ✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex là một thư viện để xây dựng ứng dụng web toàn bộ bằng Python thuần.\n\nCác tính năng chính:\n\n- **Python thuần tuý** - Viết toàn bộ ứng dụng cả backend và frontend hoàn toàn bằng Python, không cần học JavaScript.\n- **Full Flexibility** - Reflex dễ dàng để bắt đầu, nhưng cũng có thể mở rộng lên các ứng dụng phức tạp.\n- **Deploy Instantly** - Sau khi xây dựng ứng dụng, bạn có thể triển khai bằng [một dòng lệnh](https://reflex.dev/docs/hosting/deploy-quick-start/) hoặc triển khai trên server của riêng bạn.\n\nĐọc [bài viết về kiến trúc hệ thống](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) để hiểu rõ các hoạt động của Reflex.\n\n## ⚙️ Cài đặt\n\nMở cửa sổ lệnh và chạy (Yêu cầu Python phiên bản 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 Tạo ứng dụng đầu tiên\n\nCài đặt `reflex` cũng như cài đặt công cụ dòng lệnh `reflex`.\n\nKiểm tra việc cài đặt đã thành công hay chưa bằng cách tạo mới một ứng dụng. (Thay `my_app_name` bằng tên ứng dụng của bạn):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\nLệnh này tạo ra một ứng dụng mẫu trong một thư mục mới.\n\nBạn có thể chạy ứng dụng ở chế độ phát triển.\n\n```bash\nreflex run\n```\n\nBạn có thể xem ứng dụng của bạn ở địa chỉ http://localhost:3000.\n\nBạn có thể thay đổi mã nguồn ở `my_app_name/my_app_name.py`. Reflex nhanh chóng làm mới và bạn có thể thấy thay đổi trên ứng dụng của bạn ngay lập tức khi bạn lưu file.\n\n## 🫧 Ứng dụng ví dụ\n\nBắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Để cho đơn giản, chúng ta sẽ sử dụng [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), nhưng bạn có thể sử dụng model của chính bạn được triển khai trên local.\n\n \n\n
\n\"A\n
\n\n \n\nĐây là toàn bộ đoạn mã để xây dựng ứng dụng trên. Nó được viết hoàn toàn trong một file Python!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Add state and page to the app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## Hãy phân tích chi tiết.\n\n
\n\"Explaining\n
\n\n### **Reflex UI**\n\nBắt đầu với giao diện chính.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\nHàm `index` định nghĩa phần giao diện chính của ứng dụng.\n\nChúng tôi sử dụng các component (thành phần) khác nhau như `center`, `vstack`, `input` và `button` để xây dựng giao diện phía trước.\nCác component có thể được lồng vào nhau để tạo ra các bố cục phức tạp. Và bạn cũng có thể sử dụng từ khoá `args` để tận dụng đầy đủ sức mạnh của CSS.\n\nReflex có đến hơn [60 component được xây dựng sẵn](https://reflex.dev/docs/library) để giúp bạn bắt đầu. Chúng ta có thể tạo ra một component mới khá dễ dàng, thao khảo: [xây dựng component của riêng bạn](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **State**\n\nReflex biểu diễn giao diện bằng các hàm của state (trạng thái).\n\n```python\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nMột state định nghĩa các biến (được gọi là vars) có thể thay đổi trong một ứng dụng và cho phép các hàm có thể thay đổi chúng.\n\nTại đây state được cấu thành từ một `prompt` và `image_url`.\nCó cũng những biến boolean `processing` và `complete`\nđể chỉ ra khi nào tắt nút (trong quá trình tạo hình ảnh)\nvà khi nào hiển thị hình ảnh kết quả.\n\n### **Event Handlers**\n\n```python\ndef get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\nVới các state, chúng ta định nghĩa các hàm có thể thay đổi state vars được gọi là event handlers. Event handler là cách chúng ta có thể thay đổi state trong Reflex. Chúng có thể là phản hồi khi người dùng thao tác, chằng hạn khi nhấn vào nút hoặc khi đang nhập trong text box. Các hành động này được gọi là event.\n\nỨng dụng DALL·E. của chúng ta có một event handler, `get_image` để lấy hình ảnh từ OpenAI API. Sử dụng từ khoá `yield` in ở giữa event handler để cập nhật giao diện. Hoặc giao diện có thể cập nhật ở cuối event handler.\n\n### **Routing**\n\nCuối cùng, chúng ta định nghĩa một ứng dụng.\n\n```python\napp = rx.App()\n```\n\nChúng ta thêm một trang ở đầu ứng dụng bằng index component. Chúng ta cũng thêm tiêu đề của ứng dụng để hiển thị lên trình duyệt.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\nBạn có thể tạo một ứng dụng nhiều trang bằng cách thêm trang.\n\n## 📑 Tài liệu\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Component Library](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Status\n\nReflex phát hành vào tháng 12/2022 với tên là Pynecone.\n\nTừ năm 2025, [Reflex Cloud](https://cloud.reflex.dev) đã ra mắt để cung cấp trải nghiệm lưu trữ tốt nhất cho các ứng dụng Reflex. Chúng tôi sẽ tiếp tục phát triển và triển khai thêm nhiều tính năng mới.\n\nReflex ra phiên bản mới với các tính năng mới hàng tuần! Hãy :star: star và :eyes: watch repo này để thấy các cập nhật mới nhất.\n\n## Contributing\n\nChúng tôi chào đón mọi đóng góp dù lớn hay nhỏ. Dưới đây là các cách để bắt đầu với cộng đồng Reflex.\n\n- **Discord**: [Discord](https://discord.gg/T5WSbC2YtQ) của chúng tôi là nơi tốt nhất để nhờ sự giúp đỡ và thảo luận các bạn có thể đóng góp.\n- **GitHub Discussions**: Là cách tốt nhất để thảo luận về các tính năng mà bạn có thể đóng góp hoặc những điều bạn chưa rõ.\n- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) là nơi tốt nhất để thông báo. Ngoài ra bạn có thể sửa chữa các vấn đề bằng cách tạo PR.\n\nChúng tôi luôn sẵn sàng tìm kiếm các contributor, bất kể kinh nghiệm. Để tham gia đóng góp, xin mời xem\n[CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## Xin cảm ơn các Contributors:\n\n\n \n\n\n## License\n\nReflex là mã nguồn mở và sử dụng giấy phép [Apache License 2.0](/LICENSE).\n" }, { "path": "docs/zh/zh_cn/README.md", "content": "
\n\"Reflex\n
\n\n### **✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex 是一个使用纯 Python 构建全栈 web 应用的库。\n\n关键特性：\n\n- **纯 Python** - 前端、后端开发全都使用 Python，不需要学习 Javascript。\n- **完整的灵活性** - Reflex 很容易上手, 并且也可以扩展到复杂的应用程序。\n- **立即部署** - 构建后，使用[单个命令](https://reflex.dev/docs/hosting/deploy-quick-start/)就能部署应用程序；或者也可以将其托管在您自己的服务器上。\n\n请参阅我们的[架构页](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)了解 Reflex 如何工作。\n\n## ⚙️ 安装\n\n打开一个终端并且运行(要求 Python3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 创建您的第一个应用程序\n\n安装 Reflex 的同时也会安装 `reflex` 命令行工具.\n\n通过创建一个新项目来测试是否安装成功(请把 my_app_name 替代为您的项目名字):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\n这段命令会在新文件夹初始化一个应用程序模板.\n\n您可以在开发者模式下运行这个应用程序:\n\n```bash\nreflex run\n```\n\n您可以看到您的应用程序运行在 http://localhost:3000.\n\n现在您可以在以下位置修改代码 `my_app_name/my_app_name.py`,Reflex 拥有快速刷新(fast refresh),所以您可以在保存代码后马上看到更改.\n\n## 🫧 范例\n\n让我们来看一个例子: 创建一个使用 [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node) 进行图像生成的图形界面.为了保持范例简单,我们只使用 OpenAI API,但是您可以将其替换成本地端的 ML 模型.\n\n \n\n
\n\"DALL·E的前端界面,\n
\n\n \n\n这是这个范例的完整代码,只需要一个 Python 文件就可以完成!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# Add state and page to the app.\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## 让我们分解以上步骤.\n\n
\n\"解释\n
\n\n### **Reflex UI**\n\n让我们从 UI 开始.\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\n这个 `index` 函数定义了应用程序的前端.\n\n我们用不同的组件比如 `center`, `vstack`, `input`, 和 `button` 来创建前端, 组件之间可以相互嵌入,来创建复杂的布局.\n并且您可以使用关键字参数来使用 CSS 的全部功能.\n\nReflex 拥有 [60+ 个内置组件](https://reflex.dev/docs/library) 来帮助您开始创建应用程序. 我们正在积极添加组件, 但是您也可以容易的 [创建自己的组件](https://reflex.dev/docs/wrapping-react/overview/).\n\n### **State**\n\nReflex 用 State 来渲染您的 UI.\n\n```python\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\nState 定义了所有可能会发生变化的变量(称为 vars)以及能够改变这些变量的函数.\n\n在这个范例中,State 由 `prompt` 和 `image_url` 组成.此外,State 还包含有两个布尔值 `processing` 和 `complete`,用于指示何时显示循环进度指示器和图像.\n\n### **Event Handlers**\n\n```python\ndef get_image(self):\n \"\"\"Get the image from the prompt.\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\n在 State 中,我们定义了称为事件处理器(event handlers)的函数,用于改变状态变量(state vars).在 Reflex 中,事件处理器是我们可以修改状态的方式.它们可以作为对用户操作的响应而被调用,例如点击一个按钮或在文本框中输入.这些操作被称为事件.\n\n我们的 DALL·E 应用有一个事件处理器,名为 `get_image`,它用于从 OpenAI API 获取图像.在事件处理器中使用 `yield` 将导致 UI 进行更新.否则,UI 将在事件处理器结束时进行更新.\n\n### **Routing**\n\n最后,定义我们的应用程序.\n\n```python\napp = rx.App()\n```\n\n我们添加从应用程序根目录到 index 组件的路由.我们还添加了一个在页面预览或浏览器标签中显示的标题.\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\n您可以通过增加更多页面来创建一个多页面的应用.\n\n## 📑 资源\n\n
\n\n📑 [文档](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [日志](https://reflex.dev/blog)   |   📱 [组件库](https://reflex.dev/docs/library)   |   🖼️ [模板](https://reflex.dev/templates/)   |   🛸 [部署](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ Reflex 的状态\n\nReflex 于 2022 年 12 月以 Pynecone 的名称推出.\n\n从 2025 年开始，[Reflex Cloud](https://cloud.reflex.dev)已经推出，为 Reflex 应用提供最佳的托管体验。我们将继续开发并实现更多功能。\n\nReflex 每周都有新功能和发布新版本! 确保您按下 :star: 收藏和 :eyes: 关注 这个 仓库来确保知道最新信息.\n\n## 贡献\n\n我们欢迎任何大小的贡献,以下是几个好的方法来加入 Reflex 社群.\n\n- **加入我们的 Discord**: 我们的 [Discord](https://discord.gg/T5WSbC2YtQ) 是帮助您加入 Reflex 项目和讨论或贡献最棒的地方.\n- **GitHub Discussions**: 一个来讨论您想要添加的功能或是需要澄清的事情的好地方.\n- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)是报告错误的绝佳地方,另外您可以试着解决一些现有 issue 并提交 PR.\n\n我们正在积极寻找贡献者,无关您的技能或经验水平. 若要贡献，请查看[CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## 感谢我们所有的贡献者:\n\n\n \n\n\n## 授权\n\nReflex 是一个开源项目,使用 [Apache License 2.0](/LICENSE) 授权.\n" }, { "path": "docs/zh/zh_tw/README.md", "content": "
\n\"Reflex\n
\n\n**✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。✨**\n\n[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)\n![versions](https://img.shields.io/pypi/pyversions/reflex.svg)\n[![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)\n[![PyPI Downloads](https://static.pepy.tech/badge/reflex)](https://pepy.tech/projects/reflex)\n[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)\n\n
\n\n---\n\n[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)\n\n---\n\n# Reflex\n\nReflex 是一個可以用純 Python 構建全端網頁應用程式的函式庫。\n\n主要特色：\n\n- **純 Python** - 您可以用 Python 撰寫應用程式的前端和後端，無需學習 Javascript。\n- **完全靈活性** - Reflex 易於上手，但也可以擴展到複雜的應用程式。\n- **立即部署** - 構建後，只需使用[單一指令](https://reflex.dev/docs/hosting/deploy-quick-start/)即可部署您的應用程式，或在您自己的伺服器上託管。\n\n請參閱我們的[架構頁面](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)了解 Reflex 如何在底層運作。\n\n## ⚙️ 安裝\n\n開啟一個終端機並且執行 (需要 Python 3.10+):\n\n```bash\npip install reflex\n```\n\n## 🥳 建立你的第一個應用程式\n\n安裝 Reflex 的同時也會安裝 `reflex` 命令行工具。\n\n通過創建一個新專案來測試是否安裝成功。(把 my_app_name 作為新專案名稱):\n\n```bash\nmkdir my_app_name\ncd my_app_name\nreflex init\n```\n\n此命令會初始化一個應用程式模板在你的新資料夾中。\n\n你可以在開發者模式運行這個應用程式:\n\n```bash\nreflex run\n```\n\n你可以看到你的應用程式運行在 http://localhost:3000。\n\n現在在以下位置修改原始碼 `my_app_name/my_app_name.py`，Reflex 擁有快速刷新功能，存儲程式碼後便可立即看到改變。\n\n## 🫧 範例應用程式\n\n讓我們來看一個例子: 建立一個使用 DALL·E 的圖形使用者介面，為了保持範例簡單，我們只呼叫 OpenAI API，而這部份可以置換掉，改為執行成本地端的 ML 模型。\n\n \n\n
\n\"A\n
\n\n \n\n下方為該應用之完整程式碼，這一切都只需要一個 Python 檔案就能作到!\n\n```python\nimport reflex as rx\nimport openai\n\nopenai_client = openai.OpenAI()\n\n\nclass State(rx.State):\n \"\"\"應用程式狀態\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n def get_image(self):\n \"\"\"透過提示詞取得圖片\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n\n\ndef index():\n return rx.center(\n rx.vstack(\n rx.heading(\"DALL-E\", font_size=\"1.5em\"),\n rx.input(\n placeholder=\"Enter a prompt..\",\n on_blur=State.set_prompt,\n width=\"25em\",\n ),\n rx.button(\n \"Generate Image\",\n on_click=State.get_image,\n width=\"25em\",\n loading=State.processing\n ),\n rx.cond(\n State.complete,\n rx.image(src=State.image_url, width=\"20em\"),\n ),\n align=\"center\",\n ),\n width=\"100%\",\n height=\"100vh\",\n )\n\n# 把狀態跟頁面添加到應用程式。\napp = rx.App()\napp.add_page(index, title=\"Reflex:DALL-E\")\n```\n\n## 讓我們來拆解一下。\n\n
\n\"解釋\n
\n\n### **Reflex 使用者介面**\n\n讓我們從使用介面開始。\n\n```python\ndef index():\n return rx.center(\n ...\n )\n```\n\n這個 `index` 函式定義了應用程式的前端.\n\n我們用不同的元件像是 `center`, `vstack`, `input`, 和 `button` 來建立前端，元件之間可互相套入以建立出複雜的版面配置。並且您可使用關鍵字引數 _keyword args_ 運行 CSS 全部功能來設計這些元件們的樣式。\n\nReflex 擁有 [60+ 內建元件](https://reflex.dev/docs/library) 來幫助你開始建立應用程式。我們正積極添加元件，你也可以簡單地 [創建自己所屬的元件](https://reflex.dev/docs/wrapping-react/overview/)。\n\n### **應用程式狀態**\n\nReflex 使用應用程式狀態中的函式來渲染你的 UI。\n\n```python\nclass State(rx.State):\n \"\"\"應用程式狀態\"\"\"\n prompt = \"\"\n image_url = \"\"\n processing = False\n complete = False\n\n```\n\n應用程式狀態定義了應用程式中所有可以更改的變數及變更他們的函式 (稱為 vars)。\n\n這裡的狀態由 `prompt` 和 `image_url`組成， 以及布林變數 `processing` 和 `complete` 來指示何時顯示進度條及圖片。\n\n### **事件處理程序**\n\n```python\ndef get_image(self):\n \"\"\"透過提示詞取得圖片\"\"\"\n if self.prompt == \"\":\n return rx.window_alert(\"Prompt Empty\")\n\n self.processing, self.complete = True, False\n yield\n response = openai_client.images.generate(\n prompt=self.prompt, n=1, size=\"1024x1024\"\n )\n self.image_url = response.data[0].url\n self.processing, self.complete = False, True\n```\n\n在應用程式狀態中，我們定義稱之為事件處理程序的函式來改變其 vars. 事件處理程序是我們用來改變 Reflex 應用程式狀態的方法。\n\n當使用者動作被響應時，對應的事件處理程序就會被呼叫。點擊按鈕或是文字框輸入都是使用者動作，它們被稱之為事件。\n\n我們的 DALL·E. 應用程式有一個事件處理程序 `get_image`，它透過 Open AI API 取得圖片。在事件處理程序中使用 `yield` 將讓使用者介面中途更新，若不使用的話，使用介面只能在事件處理程序結束時才更新。\n\n### **路由**\n\n最後，我們定義我們的應用程式 app。\n\n```python\napp = rx.App()\n```\n\n添加從應用程式根目錄(root of the app) 到 index 元件的路由。 我們也添加了一個標題將會顯示在 預覽/瀏覽 分頁。\n\n```python\napp.add_page(index, title=\"DALL-E\")\n```\n\n你可以添加更多頁面至路由藉此來建立多頁面應用程式(multi-page app)\n\n## 📑 資源\n\n
\n\n📑 [Docs](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [Blog](https://reflex.dev/blog)   |   📱 [Component Library](https://reflex.dev/docs/library)   |   🖼️ [Templates](https://reflex.dev/templates/)   |   🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  \n\n
\n\n## ✅ 產品狀態\n\nReflex 在 2022 年 12 月以 Pynecone 的名字推出。\n\n自 2025 年起，[Reflex Cloud](https://cloud.reflex.dev) 已推出，為 Reflex 應用程式提供最佳的託管體驗。我們將繼續開發並實施更多功能。\n\nReflex 每周都有新功能和釋出新版本! 確保你按下 :star: 和 :eyes: watch 這個 repository 來確保知道最新資訊。\n\n## 貢獻\n\n我們歡迎任何大小的貢獻，以下是一些加入 Reflex 社群的好方法。\n\n- **加入我們的 Discord**: 我們的 [Discord](https://discord.gg/T5WSbC2YtQ) 是獲取 Reflex 專案幫助和討論如何貢獻的最佳地方。\n- **GitHub Discussions**: 這是一個討論您想新增的功能或對於一些困惑/需要澄清事項的好方法。\n- **GitHub Issues**: 在 [Issues](https://github.com/reflex-dev/reflex/issues) 頁面報告錯誤是一個絕佳的方式。此外，您也可以嘗試解決現有 Issue 並提交 PR。\n\n我們積極尋找貢獻者，不論您的技能水平或經驗如何。要貢獻，請查看 [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)\n\n## 感謝所有貢獻者:\n\n\n \n\n\n## 授權\n\nReflex 是一個開源專案且使用 [Apache License 2.0](/LICENSE) 授權。\n" }, { "path": "pyi_hashes.json", "content": "{\n \"reflex/__init__.pyi\": \"0a3ae880e256b9fd3b960e12a2cb51a7\",\n \"reflex/components/__init__.pyi\": \"ac05995852baa81062ba3d18fbc489fb\",\n \"reflex/components/base/__init__.pyi\": \"16e47bf19e0d62835a605baa3d039c5a\",\n \"reflex/components/base/app_wrap.pyi\": \"22e94feaa9fe675bcae51c412f5b67f1\",\n \"reflex/components/base/body.pyi\": \"e8ab029a730824bab6d4211203609e6a\",\n \"reflex/components/base/document.pyi\": \"311c53c90a60587a82e760103758a3cf\",\n \"reflex/components/base/error_boundary.pyi\": \"a678cceea014cb16048647257cd24ba6\",\n \"reflex/components/base/fragment.pyi\": \"745f1be02c23a0b25d7c52d7423ec76a\",\n \"reflex/components/base/link.pyi\": \"0bc1d26ee29d8864aed14a12991bd47d\",\n \"reflex/components/base/meta.pyi\": \"129aecf65ab53f756c4d1cbe1d0b188d\",\n \"reflex/components/base/script.pyi\": \"e5f506d1d0d6712cb9e597a781eb3941\",\n \"reflex/components/base/strict_mode.pyi\": \"6b72e16caadf7158ab744a0ab751b010\",\n \"reflex/components/core/__init__.pyi\": \"007170b97e58bdf28b2aee381d91c0c7\",\n \"reflex/components/core/auto_scroll.pyi\": \"18068d22aca7244a08cd0c5a897c0950\",\n \"reflex/components/core/banner.pyi\": \"fd93e7a92961de8524718ad32135c37c\",\n \"reflex/components/core/clipboard.pyi\": \"a844eb927d9bc2a43f5e88161b258539\",\n \"reflex/components/core/debounce.pyi\": \"055da7aa890f44fb4d48bd5978f1a874\",\n \"reflex/components/core/helmet.pyi\": \"43f8497c8fafe51e29dca1dd535d143a\",\n \"reflex/components/core/html.pyi\": \"86eb9d4c1bb4807547b2950d9a32e9fd\",\n \"reflex/components/core/sticky.pyi\": \"cb763b986a9b0654d1a3f33440dfcf60\",\n \"reflex/components/core/upload.pyi\": \"6dc28804a6dddf903e31162e87c1b023\",\n \"reflex/components/core/window_events.pyi\": \"af33ccec866b9540ee7fbec6dbfbd151\",\n \"reflex/components/datadisplay/__init__.pyi\": \"52755871369acbfd3a96b46b9a11d32e\",\n \"reflex/components/datadisplay/code.pyi\": \"b86769987ef4d1cbdddb461be88539fd\",\n \"reflex/components/datadisplay/dataeditor.pyi\": \"9b85f3cf6156293cd9961eb17a0ea684\",\n \"reflex/components/datadisplay/shiki_code_block.pyi\": \"1d53e75b6be0d3385a342e7b3011babd\",\n \"reflex/components/el/__init__.pyi\": \"0adfd001a926a2a40aee94f6fa725ecc\",\n \"reflex/components/el/element.pyi\": \"c5974a92fbc310e42d0f6cfdd13472f4\",\n \"reflex/components/el/elements/__init__.pyi\": \"29512d7a6b29c6dc5ff68d3b31f26528\",\n \"reflex/components/el/elements/base.pyi\": \"3f74c7ea573ea29b055b0cd48b040d2c\",\n \"reflex/components/el/elements/forms.pyi\": \"8b6bb2fbaf4bad828b076e2f7c8444d0\",\n \"reflex/components/el/elements/inline.pyi\": \"3549cd6ad45217aa6387800911b641c3\",\n \"reflex/components/el/elements/media.pyi\": \"9b97220aa99783d402b6e278c4069043\",\n \"reflex/components/el/elements/metadata.pyi\": \"24448004b7aa07f1225028a85bd49fef\",\n \"reflex/components/el/elements/other.pyi\": \"0c4d5d0b955d8596bf6cf4a48d7decdb\",\n \"reflex/components/el/elements/scripts.pyi\": \"d33df9f21f7e838376b2b5024beef7c9\",\n \"reflex/components/el/elements/sectioning.pyi\": \"3c5a7e4caa9c25da0ae788f02466eac4\",\n \"reflex/components/el/elements/tables.pyi\": \"686eb70ea7d8c4dafb0cc5c284e76184\",\n \"reflex/components/el/elements/typography.pyi\": \"684e83dde887dba12badd0fb75c87c04\",\n \"reflex/components/gridjs/datatable.pyi\": \"98a7e1b3f3b60cafcdfcd8879750ee42\",\n \"reflex/components/lucide/icon.pyi\": \"1db10f2b544908dd20c56ca4bc33d5e0\",\n \"reflex/components/markdown/markdown.pyi\": \"4c4bca6fb0643abb90aca9c0bb87f722\",\n \"reflex/components/moment/moment.pyi\": \"e1952f1c2c82cef85d91e970d1be64ab\",\n \"reflex/components/plotly/plotly.pyi\": \"4311a0aae2abcc9226abb6a273f96372\",\n \"reflex/components/radix/__init__.pyi\": \"5d8e3579912473e563676bfc71f29191\",\n \"reflex/components/radix/primitives/__init__.pyi\": \"01c388fe7a1f5426a16676404344edf6\",\n \"reflex/components/radix/primitives/accordion.pyi\": \"19484eca0ad53f538f5db04c09921738\",\n \"reflex/components/radix/primitives/base.pyi\": \"9ef34884fb6028dc017df5e2db639c81\",\n \"reflex/components/radix/primitives/dialog.pyi\": \"9ee73362bb59619c482b6b0d07033f37\",\n \"reflex/components/radix/primitives/drawer.pyi\": \"921e45dfaf5b9131ef27c561c3acca2e\",\n \"reflex/components/radix/primitives/form.pyi\": \"17002a3e9d7f52b3207614f6c1c9a24a\",\n \"reflex/components/radix/primitives/progress.pyi\": \"c917952d57ddb3e138a40c4005120d5e\",\n \"reflex/components/radix/primitives/slider.pyi\": \"4ff06f0025d47f166132909b09ab96f8\",\n \"reflex/components/radix/themes/__init__.pyi\": \"582b4a7ead62b2ae8605e17fa084c063\",\n \"reflex/components/radix/themes/base.pyi\": \"3e1ccd5ce5fef0b2898025193ee3d069\",\n \"reflex/components/radix/themes/color_mode.pyi\": \"dda570583355d8c0d8f607be457ba7a1\",\n \"reflex/components/radix/themes/components/__init__.pyi\": \"efa279ee05479d7bb8a64d49da808d03\",\n \"reflex/components/radix/themes/components/alert_dialog.pyi\": \"eed422fcc1ff5ccf3dbf6934699bd0b1\",\n \"reflex/components/radix/themes/components/aspect_ratio.pyi\": \"71de4160d79840561c48b570197a4152\",\n \"reflex/components/radix/themes/components/avatar.pyi\": \"e40c2f0fda6d2c028d83681a27f3fb96\",\n \"reflex/components/radix/themes/components/badge.pyi\": \"58fd1a9c5d2f8762e2a0370311731ff5\",\n \"reflex/components/radix/themes/components/button.pyi\": \"50f0b08ad5d1d1054ab537152f0f5c43\",\n \"reflex/components/radix/themes/components/callout.pyi\": \"547f2570ffbd10db36b745566e9f1b17\",\n \"reflex/components/radix/themes/components/card.pyi\": \"f7adb83f7b001a11bdd7fd6791fb3ffb\",\n \"reflex/components/radix/themes/components/checkbox.pyi\": \"8eabb6887a5d0849a43e086a284814c2\",\n \"reflex/components/radix/themes/components/checkbox_cards.pyi\": \"1d567fd04b4425abd5cc5aad10108aa9\",\n \"reflex/components/radix/themes/components/checkbox_group.pyi\": \"8638582a623036f8893a3fa6080f2672\",\n \"reflex/components/radix/themes/components/context_menu.pyi\": \"b9499d8bdd2c5565621fea5fe7d7a25a\",\n \"reflex/components/radix/themes/components/data_list.pyi\": \"6f8d9c582e084c23966b992158193b72\",\n \"reflex/components/radix/themes/components/dialog.pyi\": \"d2615f1a68c80ff930444d054b598c13\",\n \"reflex/components/radix/themes/components/dropdown_menu.pyi\": \"43f8770c9adf93c73398d68f79048424\",\n \"reflex/components/radix/themes/components/hover_card.pyi\": \"a96f4433237f9994decf935deff9f269\",\n \"reflex/components/radix/themes/components/icon_button.pyi\": \"f12a874bad243a81e5c8740a1d86c6bc\",\n \"reflex/components/radix/themes/components/inset.pyi\": \"bd7a2186b553bd4c86d83ff50c784066\",\n \"reflex/components/radix/themes/components/popover.pyi\": \"91f8edefeb232cc6d48690b1838144c2\",\n \"reflex/components/radix/themes/components/progress.pyi\": \"0e59587d5b3c8fe0d0067587f144e5b0\",\n \"reflex/components/radix/themes/components/radio.pyi\": \"f375aa5ac746679618ea7dad257e3224\",\n \"reflex/components/radix/themes/components/radio_cards.pyi\": \"9dc34a1ce2a1924eb1f41438ef84e80b\",\n \"reflex/components/radix/themes/components/radio_group.pyi\": \"173254cf91908bcf6aa4fa21a747e2cf\",\n \"reflex/components/radix/themes/components/scroll_area.pyi\": \"2e3539b0f6895dda127ee96e9864dbf9\",\n \"reflex/components/radix/themes/components/segmented_control.pyi\": \"1776f1ad936bae402007802b1ee98906\",\n \"reflex/components/radix/themes/components/select.pyi\": \"2c7aee592972ff5f05da08154aa981c8\",\n \"reflex/components/radix/themes/components/separator.pyi\": \"79e550cc10ee455f35d75d0e236fedd2\",\n \"reflex/components/radix/themes/components/skeleton.pyi\": \"a25d3ceb56f99f736ea463579845c454\",\n \"reflex/components/radix/themes/components/slider.pyi\": \"305a34c14ca8656ca9267e4c31aaa388\",\n \"reflex/components/radix/themes/components/spinner.pyi\": \"b7e689e7d75635e379242fd113a1ea9a\",\n \"reflex/components/radix/themes/components/switch.pyi\": \"f1ba948750a74126cda990e89a3ec7ef\",\n \"reflex/components/radix/themes/components/table.pyi\": \"eefbbd1904deae3d166fcad28b20fd4a\",\n \"reflex/components/radix/themes/components/tabs.pyi\": \"a533d2509a6798fe0ab7275b0152519d\",\n \"reflex/components/radix/themes/components/text_area.pyi\": \"4af55e5d18a5b9d56717bf31b23ea543\",\n \"reflex/components/radix/themes/components/text_field.pyi\": \"232618b744076db98d861ea1b9eb3192\",\n \"reflex/components/radix/themes/components/tooltip.pyi\": \"2b8366200ce92ec4784ca3ec4152e676\",\n \"reflex/components/radix/themes/layout/__init__.pyi\": \"73eefc509a49215b1797b5b5d28d035e\",\n \"reflex/components/radix/themes/layout/base.pyi\": \"5be31d7dadd23ab544e53762423d123e\",\n \"reflex/components/radix/themes/layout/box.pyi\": \"dbaed1c50c668805fc7b71d22f878254\",\n \"reflex/components/radix/themes/layout/center.pyi\": \"17323694217e8ad7611adb683f8d96ce\",\n \"reflex/components/radix/themes/layout/container.pyi\": \"24222fd7ffa2dc05f709eab6c7b9643c\",\n \"reflex/components/radix/themes/layout/flex.pyi\": \"0307e9dbe6a5784140121d77c8f67a86\",\n \"reflex/components/radix/themes/layout/grid.pyi\": \"95c9edb8bdd4e39dc1bd6bc2a8ca0933\",\n \"reflex/components/radix/themes/layout/list.pyi\": \"049ecf827ef0ba8de2d76dbf7b1c562c\",\n \"reflex/components/radix/themes/layout/section.pyi\": \"a51952b9b5c8227aa3024373dedcad5d\",\n \"reflex/components/radix/themes/layout/spacer.pyi\": \"c35accf0f2f742c90a23675ff1fb960d\",\n \"reflex/components/radix/themes/layout/stack.pyi\": \"271d3315c6196356d3ced759520d4e7d\",\n \"reflex/components/radix/themes/typography/__init__.pyi\": \"b8ef970530397e9984004961f3aaee62\",\n \"reflex/components/radix/themes/typography/blockquote.pyi\": \"080c71899532f5dbf4cf143e7a5ad3bf\",\n \"reflex/components/radix/themes/typography/code.pyi\": \"7ffe785d55979cf8ff97ea040f3e2b64\",\n \"reflex/components/radix/themes/typography/heading.pyi\": \"0ebb38915cd0521fd59c569e04d288bb\",\n \"reflex/components/radix/themes/typography/link.pyi\": \"64878125a37d47d676c9adf8156d8c41\",\n \"reflex/components/radix/themes/typography/text.pyi\": \"50f9ca15a941e4b77ddd12e77aa3c03e\",\n \"reflex/components/react_player/audio.pyi\": \"0e1690ff1f1f39bc748278d292238350\",\n \"reflex/components/react_player/react_player.pyi\": \"5ccd373b94ed1d3934ae6afc46bd6fe4\",\n \"reflex/components/react_player/video.pyi\": \"998671c06103d797c554d9278eb3b2a0\",\n \"reflex/components/react_router/dom.pyi\": \"3042fa630b7e26a7378fe045d7fbf4af\",\n \"reflex/components/recharts/__init__.pyi\": \"6ee7f1ca2c0912f389ba6f3251a74d99\",\n \"reflex/components/recharts/cartesian.pyi\": \"d138261ab8259d5208c2f028b9f708bd\",\n \"reflex/components/recharts/charts.pyi\": \"013036b9c00ad85a570efdb813c1bc40\",\n \"reflex/components/recharts/general.pyi\": \"d87ff9b85b2a204be01753690df4fb11\",\n \"reflex/components/recharts/polar.pyi\": \"b8b1a3e996e066facdf4f8c9eb363137\",\n \"reflex/components/recharts/recharts.pyi\": \"d5c9fc57a03b419748f0408c23319eee\",\n \"reflex/components/sonner/toast.pyi\": \"dca44901640cda9d58c62ff8434faa3e\"\n}\n" }, { "path": "pyproject.toml", "content": "[project]\nname = \"reflex\"\nversion = \"0.9.0dev1\"\ndescription = \"Web apps in pure Python.\"\nlicense.text = \"Apache-2.0\"\nauthors = [\n { name = \"Nikhil Rao\" },\n { name = \"Alek Petuskey\" },\n { name = \"Masen Furer\" },\n { name = \"Elijah Ahianyo\" },\n { name = \"Thomas Brandeho\" },\n { name = \"Khaleel Al-Adhami\" },\n]\nmaintainers = [\n { name = \"Masen Furer\" },\n { name = \"Khaleel Al-Adhami\" },\n { email = \"maintainers@reflex.dev\" },\n]\nreadme = \"README.md\"\nkeywords = [\"web\", \"framework\"]\nrequires-python = \">=3.10,<4.0\"\ndependencies = [\n \"alembic >=1.15.2,<2.0\",\n \"click >=8.2\",\n \"granian[reload] >=2.5.5\",\n \"httpx >=0.23.3,<1.0\",\n \"packaging >=24.2,<27\",\n \"platformdirs >=4.3.7,<5.0\",\n \"psutil >=7.0.0,<8.0; sys_platform == 'win32'\",\n \"pydantic >=1.10.21,<3.0\",\n \"python-multipart >=0.0.20,<1.0\",\n \"python-socketio >=5.12.0,<6.0\",\n \"redis >=5.2.1,<8.0\",\n \"reflex-hosting-cli >=0.1.61\",\n \"rich >=13,<15\",\n \"sqlmodel >=0.0.27,<0.1\",\n \"starlette >=0.47.0\",\n \"typing_extensions >=4.13.0\",\n \"wrapt >=1.17.0,<3.0\",\n]\n\nclassifiers = [\n \"Development Status :: 4 - Beta\",\n \"License :: OSI Approved :: Apache Software License\",\n \"Programming Language :: Python :: 3\",\n \"Programming Language :: Python :: 3.10\",\n \"Programming Language :: Python :: 3.11\",\n \"Programming Language :: Python :: 3.12\",\n \"Programming Language :: Python :: 3.13\",\n \"Programming Language :: Python :: 3.14\",\n]\n\n[project.optional-dependencies]\ndb = [\n \"alembic >=1.15.2,<2.0\",\n \"pydantic >=1.10.21,<3.0\",\n \"sqlmodel >=0.0.24,<0.1\",\n]\nmonitoring = [\"pyleak >=0.1.14,<1.0\"]\n\n[project.urls]\nhomepage = \"https://reflex.dev\"\nrepository = \"https://github.com/reflex-dev/reflex\"\ndocumentation = \"https://reflex.dev/docs/getting-started/introduction\"\n\n[project.scripts]\nreflex = \"reflex.reflex:cli\"\n\n[dependency-groups]\ndev = [\n \"asynctest\",\n \"darglint\",\n \"dill\",\n \"fastapi\",\n \"hatchling\",\n \"libsass\",\n \"numpy\",\n \"pandas\",\n \"pillow\",\n \"playwright\",\n \"plotly\",\n \"pre-commit\",\n \"psutil\",\n \"psycopg[binary]\",\n \"pyleak >=0.1.14,<1.0\",\n \"pyright\",\n \"pytest-asyncio\",\n \"pytest-benchmark\",\n \"pytest-codspeed\",\n \"pytest-cov\",\n \"pytest-mock\",\n \"pytest-playwright\",\n \"pytest-rerunfailures\",\n \"pytest-split\",\n \"pytest\",\n \"python-dotenv\",\n \"ruff\",\n \"selenium\",\n \"starlette-admin\",\n \"toml\",\n \"uvicorn\",\n]\n\n\n[build-system]\nrequires = [\"hatchling\"]\nbuild-backend = \"hatchling.build\"\n\n[tool.hatch.build]\ninclude = [\"reflex\", \"scripts/hatch_build.py\"]\ntargets.sdist.artifacts = [\"*.pyi\"]\ntargets.wheel.artifacts = [\"*.pyi\"]\n\n[tool.hatch.build.hooks.custom]\npath = \"scripts/hatch_build.py\"\ndependencies = [\"plotly\", \"ruff\", \"pre_commit\", \"toml\"]\nrequire-runtime-dependencies = true\n\n[tool.pyright]\nreportIncompatibleMethodOverride = false\n\n[tool.ruff]\ntarget-version = \"py310\"\noutput-format = \"concise\"\nlint.isort.split-on-trailing-comma = false\npreview = true\nlint.select = [\"ALL\"]\nlint.ignore = [\n \"A\",\n \"ANN002\",\n \"ANN003\",\n \"ANN2\",\n \"ANN4\",\n \"ARG\",\n \"BLE\",\n \"C901\",\n \"COM\",\n \"CPY001\",\n \"D205\",\n \"DOC202\",\n \"DOC501\",\n \"DOC502\",\n \"DTZ\",\n \"E501\",\n \"F403\",\n \"FBT\",\n \"FIX\",\n \"FURB189\",\n \"FURB140\",\n \"G004\",\n \"ISC003\",\n \"PLC\",\n \"PLR\",\n \"PLW\",\n \"PT011\",\n \"PT012\",\n \"PYI\",\n \"RUF012\",\n \"RUF067\",\n \"S\",\n \"SLF\",\n \"SLOT\",\n \"TC\",\n \"TD\",\n \"TRY0\",\n]\nlint.pydocstyle.convention = \"google\"\nlint.flake8-bugbear.extend-immutable-calls = [\n \"reflex.utils.types.Unset\",\n \"reflex.vars.base.Var.create\",\n]\n\n[tool.ruff.lint.per-file-ignores]\n\"__init__.py\" = [\"F401\"]\n\"tests/*.py\" = [\n \"ANN001\",\n \"D100\",\n \"D103\",\n \"D104\",\n \"INP\",\n \"B018\",\n \"PERF\",\n \"T\",\n \"N\",\n]\n\"benchmarks/*.py\" = [\"ANN001\", \"D100\", \"D103\", \"D104\", \"B018\", \"PERF\", \"T\", \"N\"]\n\"reflex/.templates/*.py\" = [\"D100\", \"D103\", \"D104\"]\n\"*.pyi\" = [\"D301\", \"D415\", \"D417\", \"D418\", \"E742\", \"N\", \"PGH\"]\n\"pyi_generator.py\" = [\"N802\"]\n\"reflex/constants/*.py\" = [\"N\"]\n\"reflex/.templates/apps/blank/code/*\" = [\"INP001\"]\n\"*/blank.py\" = [\"I001\"]\n\n[tool.pytest.ini_options]\nfilterwarnings = \"ignore:fields may not start with an underscore:RuntimeWarning\"\nasyncio_default_fixture_loop_scope = \"function\"\nasyncio_mode = \"auto\"\n\n[tool.codespell]\nskip = \"docs/*,*.html,examples/*, *.pyi, poetry.lock, uv.lock\"\nignore-words-list = \"te, TreeE\"\n\n\n[tool.coverage.run]\nsource = [\"reflex\"]\nbranch = true\nomit = [\n \"*/pyi_generator.py\",\n \"reflex/__main__.py\",\n \"reflex/app_module_for_backend.py\",\n \"reflex/components/chakra/*\",\n \"reflex/experimental/*\",\n]\n\n[tool.coverage.report]\nshow_missing = true\n# TODO bump back to 79\nfail_under = 70\nprecision = 2\nignore_errors = true\n\nexclude_also = [\n \"def __repr__\",\n # Don't complain about missing debug-only code:\n \"if self.debug\",\n # Don't complain if tests don't hit defensive assertion code:\n \"raise AssertionError\",\n \"raise NotImplementedError\",\n # Regexes for lines to exclude from consideration\n \"if 0:\",\n # Don't complain if non-runnable code isn't run:\n \"if __name__ == .__main__.:\",\n # Don't complain about abstract methods, they aren't run:\n \"@(abc.)?abstractmethod\",\n # Don't complain about overloaded methods:\n \"@overload\",\n]\n\n[tool.coverage.html]\ndirectory = \"coverage_html_report\"\n\n[tool.pre-commit]\nfail_fast = true\n\n[[tool.pre-commit.repos]]\nrepo = \"https://github.com/astral-sh/ruff-pre-commit\"\nrev = \"v0.15.6\"\nhooks = [\n { id = \"ruff-format\", args = [\n \"reflex\",\n \"tests\",\n ] },\n { id = \"ruff-check\", args = [\n \"--fix\",\n \"--exit-non-zero-on-fix\",\n ], exclude = \"^integration/benchmarks/\" },\n]\n\n[[tool.pre-commit.repos]]\nrepo = \"https://github.com/codespell-project/codespell\"\nrev = \"v2.4.1\"\nhooks = [\n { id = \"codespell\", args = [\n \"reflex\",\n ], additional_dependencies = [\n \"tomli\",\n ] },\n]\n\n# Run pyi check before pyright because pyright can fail if pyi files are wrong.\n[[tool.pre-commit.repos]]\nrepo = \"local\"\nhooks = [\n { id = \"update-pyi-files\", name = \"update-pyi-files\", always_run = true, language = \"system\", require_serial = true, description = \"Update pyi files as needed\", entry = \"python3 scripts/make_pyi.py\" },\n]\n\n[[tool.pre-commit.repos]]\nrepo = \"https://github.com/RobertCraigie/pyright-python\"\nrev = \"v1.1.408\"\nhooks = [{ id = \"pyright\", args = [\"reflex\", \"tests\"], language = \"system\" }]\n\n[[tool.pre-commit.repos]]\nrepo = \"https://github.com/pre-commit/mirrors-prettier\"\nrev = \"f62a70a3a7114896b062de517d72829ea1c884b6\"\nhooks = [{ id = \"prettier\", require_serial = true }]\n\n[tool.uv]\nrequired-version = \">=0.7.0\"\n" }, { "path": "reflex/.templates/apps/blank/code/__init__.py", "content": "" }, { "path": "reflex/.templates/apps/blank/code/blank.py", "content": "\"\"\"Welcome to Reflex! This file outlines the steps to create a basic app.\"\"\"\n\nimport reflex as rx\n\nfrom rxconfig import config\n\n\nclass State(rx.State):\n \"\"\"The app state.\"\"\"\n\n\ndef index() -> rx.Component:\n # Welcome Page (Index)\n return rx.container(\n rx.color_mode.button(position=\"top-right\"),\n rx.vstack(\n rx.heading(\"Welcome to Reflex!\", size=\"9\"),\n rx.text(\n \"Get started by editing \",\n rx.code(f\"{config.app_name}/{config.app_name}.py\"),\n size=\"5\",\n ),\n rx.link(\n rx.button(\"Check out our docs!\"),\n href=\"https://reflex.dev/docs/getting-started/introduction/\",\n is_external=True,\n ),\n spacing=\"5\",\n justify=\"center\",\n min_height=\"85vh\",\n ),\n )\n\n\napp = rx.App()\napp.add_page(index)\n" }, { "path": "reflex/.templates/web/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n/_static\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\n# DS_Store\n.DS_Store" }, { "path": "reflex/.templates/web/app/entry.client.js", "content": "import { startTransition } from \"react\";\nimport { hydrateRoot } from \"react-dom/client\";\nimport { HydratedRouter } from \"react-router/dom\";\nimport { createElement } from \"react\";\n\nstartTransition(() => {\n hydrateRoot(document, createElement(HydratedRouter));\n});\n" }, { "path": "reflex/.templates/web/app/routes.js", "content": "import { route } from \"@react-router/dev/routes\";\nimport { flatRoutes } from \"@react-router/fs-routes\";\n\nexport default [\n ...(await flatRoutes({\n ignoredRouteFiles: [\"routes/\\\\[404\\\\]._index.jsx\"],\n })),\n route(\"*\", \"routes/[404]._index.jsx\"),\n];\n" }, { "path": "reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js", "content": "import { useTheme } from \"$/utils/react-theme\";\nimport { createElement, useEffect } from \"react\";\nimport { ColorModeContext, defaultColorMode } from \"$/utils/context\";\n\nexport default function RadixThemesColorModeProvider({ children }) {\n const { theme, resolvedTheme, setTheme } = useTheme();\n\n const toggleColorMode = () => {\n setTheme(resolvedTheme === \"light\" ? \"dark\" : \"light\");\n };\n\n const setColorMode = (mode) => {\n const allowedModes = [\"light\", \"dark\", \"system\"];\n if (!allowedModes.includes(mode)) {\n console.error(\n `Invalid color mode \"${mode}\". Defaulting to \"${defaultColorMode}\".`,\n );\n mode = defaultColorMode;\n }\n setTheme(mode);\n };\n\n useEffect(() => {\n const radixRoot = document.querySelector(\n '.radix-themes[data-is-root-theme=\"true\"]',\n );\n if (radixRoot) {\n radixRoot.classList.remove(\"light\", \"dark\");\n radixRoot.classList.add(resolvedTheme);\n }\n }, [resolvedTheme]);\n\n return createElement(\n ColorModeContext.Provider,\n {\n value: {\n rawColorMode: theme,\n resolvedColorMode: resolvedTheme,\n toggleColorMode,\n setColorMode,\n },\n },\n children,\n );\n}\n" }, { "path": "reflex/.templates/web/components/shiki/code.js", "content": "import { useEffect, useState, createElement } from \"react\";\nimport { codeToHtml } from \"shiki\";\n\n/**\n * Code component that uses Shiki to convert code to HTML and render it.\n *\n * @param code - The code to be highlighted.\n * @param theme - The theme to be used for highlighting.\n * @param language - The language of the code.\n * @param transformers - The transformers to be applied to the code.\n * @param decorations - The decorations to be applied to the code.\n * @param divProps - Additional properties to be passed to the div element.\n * @returns The rendered code block.\n */\nexport function Code({\n code,\n theme,\n language,\n transformers,\n decorations,\n ...divProps\n}) {\n const [codeResult, setCodeResult] = useState(\"\");\n useEffect(() => {\n async function fetchCode() {\n const result = await codeToHtml(code, {\n lang: language,\n theme,\n transformers,\n decorations,\n });\n setCodeResult(result);\n }\n fetchCode();\n }, [code, language, theme, transformers, decorations]);\n return createElement(\"div\", {\n dangerouslySetInnerHTML: { __html: codeResult },\n ...divProps,\n });\n}\n" }, { "path": "reflex/.templates/web/jsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"$/*\": [\"*\"],\n \"@/*\": [\"public/*\"]\n }\n }\n}\n" }, { "path": "reflex/.templates/web/postcss.config.js", "content": "export default {\n plugins: {\n \"postcss-import\": {},\n autoprefixer: {},\n },\n};\n" }, { "path": "reflex/.templates/web/react-router.config.js", "content": "export default {\n future: {\n unstable_optimizeDeps: true,\n },\n ssr: false,\n};\n" }, { "path": "reflex/.templates/web/styles/__reflex_style_reset.css", "content": "@layer __reflex_base {\n /*\n 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n 2. Remove default margins and padding\n 3. Reset all borders.\n */\n\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 2 */\n border: 0 solid; /* 3 */\n }\n\n /*\n 1. Use a consistent sensible line-height in all browsers.\n 2. Prevent adjustments of font size after orientation changes in iOS.\n 3. Use a more readable tab size.\n 4. Use the user's configured `sans` font-family by default.\n 5. Use the user's configured `sans` font-feature-settings by default.\n 6. Use the user's configured `sans` font-variation-settings by default.\n 7. Disable tap highlights on iOS.\n */\n\n html,\n :host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n tab-size: 4; /* 3 */\n font-family:\n --default-font-family, ui-sans-serif, system-ui, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: --default-font-feature-settings, normal; /* 5 */\n font-variation-settings: --default-font-variation-settings, normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n }\n\n /*\n 1. Add the correct height in Firefox.\n 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n 3. Reset the default border style to a 1px solid border.\n */\n\n hr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n }\n\n /*\n Add the correct text decoration in Chrome, Edge, and Safari.\n */\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n /*\n Remove the default font size and weight for headings.\n */\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n /*\n Reset links to optimize for opt-in styling instead of opt-out.\n */\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n /*\n Add the correct font weight in Edge and Safari.\n */\n\n b,\n strong {\n font-weight: bolder;\n }\n\n /*\n 1. Use the user's configured `mono` font-family by default.\n 2. Use the user's configured `mono` font-feature-settings by default.\n 3. Use the user's configured `mono` font-variation-settings by default.\n 4. Correct the odd `em` font sizing in all browsers.\n */\n\n code,\n kbd,\n samp,\n pre {\n font-family:\n --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco,\n Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: --default-mono-font-feature-settings, normal; /* 2 */\n font-variation-settings:\n --default-mono-font-variation-settings, normal; /* 3 */\n font-size: 1em; /* 4 */\n }\n\n /*\n Add the correct font size in all browsers.\n */\n\n small {\n font-size: 80%;\n }\n\n /*\n Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n */\n\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n /*\n 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n 3. Remove gaps between table borders by default.\n */\n\n table {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n }\n\n /*\n Use the modern Firefox focus style for all focusable elements.\n */\n\n :-moz-focusring {\n outline: auto;\n }\n\n /*\n Add the correct vertical alignment in Chrome and Firefox.\n */\n\n progress {\n vertical-align: baseline;\n }\n\n /*\n Add the correct display in Chrome and Safari.\n */\n\n summary {\n display: list-item;\n }\n\n /*\n Make lists unstyled by default.\n */\n\n ol,\n ul,\n menu {\n list-style: none;\n }\n\n /*\n 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n */\n\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n }\n\n /*\n Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n */\n\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n\n /*\n 1. Inherit font styles in all browsers.\n 2. Remove border radius in all browsers.\n 3. Remove background color in all browsers.\n 4. Ensure consistent opacity for disabled states in all browsers.\n */\n\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n border-radius: 0; /* 2 */\n background-color: transparent; /* 3 */\n opacity: 1; /* 4 */\n }\n\n /*\n Restore default font weight.\n */\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n /*\n Restore indentation.\n */\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n /*\n Restore space after button.\n */\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n /*\n Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n */\n\n ::placeholder {\n opacity: 1;\n }\n\n /*\n Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not\n crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)\n */\n\n @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or\n (contain-intrinsic-size: 1px) /* Safari 17+ */ {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n\n /*\n Prevent resizing textareas horizontally by default.\n */\n\n textarea {\n resize: vertical;\n }\n\n /*\n Remove the inner padding in Chrome and Safari on macOS.\n */\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n /*\n 1. Ensure date/time inputs have the same height when empty in iOS Safari.\n 2. Ensure text alignment can be changed on date/time inputs in iOS Safari.\n */\n\n ::-webkit-date-and-time-value {\n min-height: 1lh; /* 1 */\n text-align: inherit; /* 2 */\n }\n\n /*\n Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.\n */\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n /*\n Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.\n */\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n /*\n Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n */\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n /*\n Correct the inability to style the border radius in iOS Safari.\n */\n\n button,\n input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]),\n ::file-selector-button {\n appearance: button;\n }\n\n /*\n Correct the cursor style of increment and decrement buttons in Safari.\n */\n\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n /*\n Make elements with the HTML hidden attribute stay hidden by default.\n */\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n" }, { "path": "reflex/.templates/web/utils/helpers/dataeditor.js", "content": "import { GridCellKind } from \"@glideapps/glide-data-grid\";\n\nexport function getDEColumn(columns, col) {\n let c = columns[col];\n c.pos = col;\n return c;\n}\n\nexport function getDERow(data, row) {\n return data[row];\n}\n\nexport function locateCell(row, column) {\n if (Array.isArray(row)) {\n return row[column.pos];\n } else {\n return row[column.id];\n }\n}\n\nexport function formatCell(value, column) {\n const editable = column.editable ?? true;\n switch (column.type) {\n case \"int\":\n case \"float\":\n return {\n kind: GridCellKind.Number,\n data: value,\n displayData: value + \"\",\n readonly: !editable,\n allowOverlay: editable,\n };\n case \"datetime\":\n // value = moment format?\n case \"str\":\n return {\n kind: GridCellKind.Text,\n data: value,\n displayData: value,\n readonly: !editable,\n allowOverlay: editable,\n };\n case \"bool\":\n return {\n kind: GridCellKind.Boolean,\n data: value,\n readonly: !editable,\n };\n default:\n console.log(\n \"Warning: column.type is undefined for column.title=\" + column.title,\n );\n return {\n kind: GridCellKind.Text,\n data: value,\n displayData: column.type,\n };\n }\n}\n\nexport function formatDataEditorCells(col, row, columns, data) {\n if (row < data.length && col < columns.length) {\n const column = getDEColumn(columns, col);\n const rowData = getDERow(data, row);\n const cellData = locateCell(rowData, column);\n return formatCell(cellData, column);\n }\n return { kind: GridCellKind.Loading };\n}\n" }, { "path": "reflex/.templates/web/utils/helpers/debounce.js", "content": "const debounce_timeout_id = {};\n\n/**\n * Generic debounce helper\n *\n * @param {string} name - the name of the event to debounce\n * @param {function} func - the function to call after debouncing\n * @param {number} delay - the time in milliseconds to wait before calling the function\n */\nexport default function debounce(name, func, delay) {\n const key = `${name}__${delay}`;\n clearTimeout(debounce_timeout_id[key]);\n debounce_timeout_id[key] = setTimeout(() => {\n func();\n delete debounce_timeout_id[key];\n }, delay);\n}\n" }, { "path": "reflex/.templates/web/utils/helpers/paste.js", "content": "import { useEffect, useRef } from \"react\";\n\nconst handle_paste_data = (clipboardData) =>\n new Promise((resolve, reject) => {\n const pasted_data = [];\n const n_items = clipboardData.items.length;\n const extract_data = (item) => {\n const type = item.type;\n if (item.kind === \"string\") {\n item.getAsString((data) => {\n pasted_data.push([type, data]);\n if (pasted_data.length === n_items) {\n resolve(pasted_data);\n }\n });\n } else if (item.kind === \"file\") {\n const file = item.getAsFile();\n const reader = new FileReader();\n reader.onload = (e) => {\n pasted_data.push([type, e.target.result]);\n if (pasted_data.length === n_items) {\n resolve(pasted_data);\n }\n };\n if (type.indexOf(\"text/\") === 0) {\n reader.readAsText(file);\n } else {\n reader.readAsDataURL(file);\n }\n }\n };\n for (const item of clipboardData.items) {\n extract_data(item);\n }\n });\n\nexport default function usePasteHandler(target_ids, event_actions, on_paste) {\n const onPasteRef = useRef(on_paste);\n const eventActionsRef = useRef(event_actions);\n\n useEffect(() => {\n onPasteRef.current = on_paste;\n }, [on_paste]);\n useEffect(() => {\n eventActionsRef.current = event_actions;\n }, [event_actions]);\n\n useEffect(() => {\n const handle_paste = (_ev) => {\n eventActionsRef.current?.preventDefault && _ev.preventDefault();\n eventActionsRef.current?.stopPropagation && _ev.stopPropagation();\n handle_paste_data(_ev.clipboardData).then(onPasteRef.current);\n };\n\n let cleanupListeners = null;\n let observer = null;\n\n const attachListeners = (targets) => {\n targets.forEach((target) =>\n target.addEventListener(\"paste\", handle_paste, false),\n );\n return () => {\n targets.forEach((target) =>\n target.removeEventListener(\"paste\", handle_paste, false),\n );\n };\n };\n\n const tryAttach = () => {\n if (target_ids.length === 0) {\n cleanupListeners = attachListeners([document]);\n return true;\n }\n const targets = target_ids\n .map((id) => document.getElementById(id))\n .filter((element) => !!element);\n\n if (targets.length === target_ids.length) {\n cleanupListeners = attachListeners(targets);\n return true;\n }\n\n return false;\n };\n\n if (!tryAttach()) {\n observer = new MutationObserver(() => {\n if (tryAttach()) {\n observer.disconnect();\n observer = null;\n }\n });\n observer.observe(document.body, { childList: true, subtree: true });\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n if (cleanupListeners) {\n cleanupListeners();\n }\n };\n }, [target_ids]);\n}\n" }, { "path": "reflex/.templates/web/utils/helpers/range.js", "content": "/**\n * Simulate the python range() builtin function.\n * inspired by https://dev.to/guyariely/using-python-range-in-javascript-337p\n *\n * If needed outside of an iterator context, use `Array.from(range(10))` or\n * spread syntax `[...range(10)]` to get an array.\n *\n * @param {number} start: the start or end of the range.\n * @param {number} stop: the end of the range.\n * @param {number} step: the step of the range.\n * @returns {object} an object with a Symbol.iterator method over the range\n */\nexport default function range(start, stop, step) {\n return {\n [Symbol.iterator]() {\n if (stop === undefined) {\n stop = start;\n start = 0;\n }\n if (step === undefined) {\n step = 1;\n }\n\n let i = start - step;\n\n return {\n next() {\n i += step;\n if ((step > 0 && i < stop) || (step < 0 && i > stop)) {\n return {\n value: i,\n done: false,\n };\n }\n return {\n value: undefined,\n done: true,\n };\n },\n };\n },\n };\n}\n" }, { "path": "reflex/.templates/web/utils/helpers/throttle.js", "content": "const in_throttle = {};\n\n/**\n * Generic throttle helper\n *\n * @param {string} name - the name of the event to throttle\n * @param {number} limit - time in milliseconds between events\n * @returns true if the event is allowed to execute, false if it is throttled\n */\nexport default function throttle(name, limit) {\n const key = `${name}__${limit}`;\n if (!in_throttle[key]) {\n in_throttle[key] = true;\n\n setTimeout(() => {\n delete in_throttle[key];\n }, limit);\n // function was not throttled, so allow execution\n return true;\n }\n return false;\n}\n" }, { "path": "reflex/.templates/web/utils/helpers/upload.js", "content": "import JSON5 from \"json5\";\nimport env from \"$/env.json\";\n\n/**\n * Upload files to the server.\n *\n * @param state The state to apply the delta to.\n * @param handler The handler to use.\n * @param upload_id The upload id to use.\n * @param on_upload_progress The function to call on upload progress.\n * @param socket the websocket connection\n * @param extra_headers Extra headers to send with the request.\n * @param refs The refs object to store the abort controller in.\n * @param getBackendURL Function to get the backend URL.\n * @param getToken Function to get the Reflex token.\n *\n * @returns The response from posting to the UPLOADURL endpoint.\n */\nexport const uploadFiles = async (\n handler,\n files,\n upload_id,\n on_upload_progress,\n extra_headers,\n socket,\n refs,\n getBackendURL,\n getToken,\n) => {\n // return if there's no file to upload\n if (files === undefined || files.length === 0) {\n return false;\n }\n\n const upload_ref_name = `__upload_controllers_${upload_id}`;\n\n if (refs[upload_ref_name]) {\n console.log(\"Upload already in progress for \", upload_id);\n return false;\n }\n\n // Track how many partial updates have been processed for this upload.\n let resp_idx = 0;\n const eventHandler = (progressEvent) => {\n const event_callbacks = socket._callbacks.$event;\n // Whenever called, responseText will contain the entire response so far.\n const chunks = progressEvent.event.target.responseText.trim().split(\"\\n\");\n // So only process _new_ chunks beyond resp_idx.\n chunks.slice(resp_idx).map((chunk_json) => {\n try {\n const chunk = JSON5.parse(chunk_json);\n event_callbacks.map((f, ix) => {\n f(chunk)\n .then(() => {\n if (ix === event_callbacks.length - 1) {\n // Mark this chunk as processed.\n resp_idx += 1;\n }\n })\n .catch((e) => {\n if (progressEvent.progress === 1) {\n // Chunk may be incomplete, so only report errors when full response is available.\n console.log(\"Error processing chunk\", chunk, e);\n }\n return;\n });\n });\n } catch (e) {\n if (progressEvent.progress === 1) {\n console.log(\"Error parsing chunk\", chunk_json, e);\n }\n return;\n }\n });\n };\n\n const controller = new AbortController();\n const formdata = new FormData();\n\n // Add the token and handler to the file name.\n files.forEach((file) => {\n formdata.append(\"files\", file, file.path || file.name);\n });\n\n // Send the file to the server.\n refs[upload_ref_name] = controller;\n\n return new Promise((resolve, reject) => {\n const xhr = new XMLHttpRequest();\n\n // Set up event handlers\n xhr.onload = function () {\n if (xhr.status >= 200 && xhr.status < 300) {\n resolve({\n data: xhr.responseText,\n status: xhr.status,\n statusText: xhr.statusText,\n headers: {\n get: (name) => xhr.getResponseHeader(name),\n },\n });\n } else {\n reject(new Error(`HTTP error! status: ${xhr.status}`));\n }\n };\n\n xhr.onerror = function () {\n reject(new Error(\"Network error\"));\n };\n\n xhr.onabort = function () {\n reject(new Error(\"Upload aborted\"));\n };\n\n // Handle upload progress\n if (on_upload_progress) {\n xhr.upload.onprogress = function (event) {\n if (event.lengthComputable) {\n const progressEvent = {\n loaded: event.loaded,\n total: event.total,\n progress: event.loaded / event.total,\n };\n on_upload_progress(progressEvent);\n }\n };\n }\n\n // Handle download progress with streaming response parsing\n xhr.onprogress = function (event) {\n if (eventHandler) {\n const progressEvent = {\n event: {\n target: {\n responseText: xhr.responseText,\n },\n },\n progress: event.lengthComputable ? event.loaded / event.total : 0,\n };\n eventHandler(progressEvent);\n }\n };\n\n // Handle abort controller\n controller.signal.addEventListener(\"abort\", () => {\n xhr.abort();\n });\n\n // Configure and send request\n xhr.open(\"POST\", getBackendURL(env.UPLOAD));\n xhr.setRequestHeader(\"Reflex-Client-Token\", getToken());\n xhr.setRequestHeader(\"Reflex-Event-Handler\", handler);\n for (const [key, value] of Object.entries(extra_headers || {})) {\n xhr.setRequestHeader(key, value);\n }\n\n try {\n xhr.send(formdata);\n } catch (error) {\n reject(error);\n }\n })\n .catch((error) => {\n console.log(\"Upload error:\", error.message);\n return false;\n })\n .finally(() => {\n delete refs[upload_ref_name];\n });\n};\n" }, { "path": "reflex/.templates/web/utils/react-theme.js", "content": "import {\n createContext,\n useContext,\n useState,\n useEffect,\n createElement,\n useRef,\n useMemo,\n} from \"react\";\n\nimport { isDevMode, defaultColorMode } from \"$/utils/context\";\n\nconst ThemeContext = createContext({\n theme: defaultColorMode,\n resolvedTheme: defaultColorMode !== \"system\" ? defaultColorMode : \"light\",\n setTheme: () => {},\n});\n\nexport function ThemeProvider({ children, defaultTheme = \"system\" }) {\n const [theme, setTheme] = useState(defaultTheme);\n const [systemTheme, setSystemTheme] = useState(\n defaultTheme !== \"system\" ? defaultTheme : \"light\",\n );\n const [isInitialized, setIsInitialized] = useState(false);\n\n const firstRender = useRef(true);\n\n useEffect(() => {\n if (!firstRender.current) {\n return;\n }\n\n firstRender.current = false;\n\n if (isDevMode) {\n const lastCompiledTheme = localStorage.getItem(\"last_compiled_theme\");\n if (lastCompiledTheme !== defaultColorMode) {\n // on app startup, make sure the application color mode is persisted correctly.\n localStorage.setItem(\"last_compiled_theme\", defaultColorMode);\n setIsInitialized(true);\n return;\n }\n }\n\n // Load saved theme from localStorage\n const savedTheme = localStorage.getItem(\"theme\") || defaultTheme;\n setTheme(savedTheme);\n setIsInitialized(true);\n });\n\n const resolvedTheme = useMemo(\n () => (theme === \"system\" ? systemTheme : theme),\n [theme, systemTheme],\n );\n\n useEffect(() => {\n // Set up media query for system preference detection\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n // Listen for system preference changes\n const handleChange = () => {\n setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n };\n\n handleChange();\n\n mediaQuery.addEventListener(\"change\", handleChange);\n\n return () => {\n mediaQuery.removeEventListener(\"change\", handleChange);\n };\n });\n\n // Save theme to localStorage whenever it changes\n // Skip saving only if theme key already exists and we haven't initialized yet\n useEffect(() => {\n const existingTheme = localStorage.getItem(\"theme\");\n if (!isInitialized && existingTheme !== null) return;\n localStorage.setItem(\"theme\", theme);\n }, [theme]);\n\n useEffect(() => {\n if (!isInitialized) return;\n const root = window.document.documentElement;\n root.classList.remove(\"light\", \"dark\");\n root.classList.add(resolvedTheme);\n root.style.colorScheme = resolvedTheme;\n }, [resolvedTheme, isInitialized]);\n\n return createElement(\n ThemeContext.Provider,\n { value: { theme, resolvedTheme, setTheme } },\n children,\n );\n}\n\nexport function useTheme() {\n return useContext(ThemeContext);\n}\n" }, { "path": "reflex/.templates/web/utils/state.js", "content": "// State management for Reflex web apps.\nimport io from \"socket.io-client\";\nimport JSON5 from \"json5\";\nimport env from \"$/env.json\";\nimport reflexEnvironment from \"$/reflex.json\";\nimport Cookies from \"universal-cookie\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n useLocation,\n useNavigate,\n useSearchParams,\n useParams,\n} from \"react-router\";\nimport {\n initialEvents,\n initialState,\n onLoadInternalEvent,\n state_name,\n exception_state_name,\n} from \"$/utils/context\";\nimport debounce from \"$/utils/helpers/debounce\";\nimport throttle from \"$/utils/helpers/throttle\";\nimport { uploadFiles } from \"$/utils/helpers/upload\";\n\n// Endpoint URLs.\nconst EVENTURL = env.EVENT;\n\n// These hostnames indicate that the backend and frontend are reachable via the same domain.\nconst SAME_DOMAIN_HOSTNAMES = [\"localhost\", \"0.0.0.0\", \"::\", \"0:0:0:0:0:0:0:0\"];\n\n// Global variable to hold the token.\nlet token;\n\n// Key for the token in the session storage.\nconst TOKEN_KEY = \"token\";\n\n// create cookie instance\nconst cookies = new Cookies();\n\n// Dictionary holding component references.\nexport const refs = {};\n\n// Flag ensures that only one event is processing on the backend concurrently.\nlet event_processing = false;\n// Array holding pending events to be processed.\nconst event_queue = [];\n\n/**\n * Generate a UUID (Used for session tokens).\n * Taken from: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid\n * @returns A UUID.\n */\nexport const generateUUID = () => {\n let d = new Date().getTime(),\n d2 = (performance && performance.now && performance.now() * 1000) || 0;\n return \"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\".replace(/[xy]/g, (c) => {\n let r = Math.random() * 16;\n if (d > 0) {\n r = ((d + r) % 16) | 0;\n d = Math.floor(d / 16);\n } else {\n r = ((d2 + r) % 16) | 0;\n d2 = Math.floor(d2 / 16);\n }\n return (c == \"x\" ? r : (r & 0x7) | 0x8).toString(16);\n });\n};\n\n/**\n * Get the token for the current session.\n * @returns The token.\n */\nexport const getToken = () => {\n if (token) {\n return token;\n }\n if (typeof window !== \"undefined\") {\n if (!window.sessionStorage.getItem(TOKEN_KEY)) {\n window.sessionStorage.setItem(TOKEN_KEY, generateUUID());\n }\n token = window.sessionStorage.getItem(TOKEN_KEY);\n }\n return token;\n};\n\n/**\n * Get the URL for the backend server\n * @param url_str The URL string to parse.\n * @returns The given URL modified to point to the actual backend server.\n */\nexport const getBackendURL = (url_str) => {\n if ((url_str ?? undefined) === undefined) {\n url_str = env.PING;\n }\n // Get backend URL object from the endpoint.\n const endpoint = new URL(url_str);\n if (\n typeof window !== \"undefined\" &&\n SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)\n ) {\n // Use the frontend domain to access the backend\n const frontend_hostname = window.location.hostname;\n endpoint.hostname = frontend_hostname;\n if (window.location.protocol === \"https:\") {\n if (endpoint.protocol === \"ws:\") {\n endpoint.protocol = \"wss:\";\n } else if (endpoint.protocol === \"http:\") {\n endpoint.protocol = \"https:\";\n }\n endpoint.port = \"\"; // Assume websocket is on https port via load balancer.\n }\n }\n return endpoint;\n};\n\n/**\n * Check if the backend is disabled.\n *\n * @returns True if the backend is disabled, false otherwise.\n */\nexport const isBackendDisabled = () => {\n const cookie = document.cookie\n .split(\"; \")\n .find((row) => row.startsWith(\"backend-enabled=\"));\n return cookie !== undefined && cookie.split(\"=\")[1] == \"false\";\n};\n\n/**\n * Determine if any event in the event queue is stateful.\n *\n * @returns True if there's any event that requires state and False if none of them do.\n */\nexport const isStateful = () => {\n if (event_queue.length === 0) {\n return false;\n }\n return event_queue.some((event) => event.name.startsWith(\"reflex___state\"));\n};\n\n/**\n * Apply a delta to the state.\n * @param state The state to apply the delta to.\n * @param delta The delta to apply.\n */\nexport const applyDelta = (state, delta) => {\n return { ...state, ...delta };\n};\n\n/**\n * Evaluate a dynamic component.\n * @param component The component to evaluate.\n * @returns The evaluated component.\n */\nexport const evalReactComponent = async (component) => {\n if (!window.React && window.__reflex) {\n window.React = window.__reflex.react;\n }\n const encodedJs = encodeURIComponent(component);\n const dataUri = \"data:text/javascript;charset=utf-8,\" + encodedJs;\n const module = await eval(`import(dataUri)`);\n return module.default;\n};\n\n/**\n * Only Queue and process events when websocket connection exists.\n * @param event The event to queue.\n * @param socket The socket object to send the event on.\n * @param navigate The navigate function from React Router\n * @param params The params object from React Router\n *\n * @returns Adds event to queue and processes it if websocket exits, does nothing otherwise.\n */\nexport const queueEventIfSocketExists = async (\n events,\n socket,\n navigate,\n params,\n) => {\n if (!socket) {\n return;\n }\n await queueEvents(events, socket, false, navigate, params);\n};\n\n/**\n * Check if a string is a valid HTTP URL.\n * @param string The string to check.\n *\n * @returns The URL object if valid, undefined otherwise.\n * */\nfunction urlFrom(string) {\n try {\n return new URL(string);\n } catch {\n return undefined;\n }\n return undefined;\n}\n\n/**\n * Handle frontend event or send the event to the backend via Websocket.\n * @param event The event to send.\n * @param socket The socket object to send the event on.\n * @param navigate The navigate function from useNavigate\n * @param params The params object from useParams\n *\n * @returns True if the event was sent, false if it was handled locally.\n */\nexport const applyEvent = async (event, socket, navigate, params) => {\n // Handle special events\n if (event.name == \"_redirect\") {\n if ((event.payload.path ?? undefined) === undefined) {\n return false;\n }\n if (event.payload.external) {\n window.open(\n event.payload.path,\n \"_blank\",\n \"noopener\" + (event.payload.popup ? \",popup\" : \"\"),\n );\n return false;\n }\n const url = urlFrom(event.payload.path);\n let pathname = event.payload.path;\n if (url) {\n if (url.host !== window.location.host) {\n // External URL\n window.location.assign(event.payload.path);\n return false;\n } else {\n pathname = url.pathname + url.search + url.hash;\n }\n }\n if (event.payload.replace) {\n navigate(pathname, { replace: true });\n } else {\n navigate(pathname);\n }\n return false;\n }\n\n if (event.name == \"_remove_cookie\") {\n cookies.remove(event.payload.key, { ...event.payload.options });\n queueEventIfSocketExists(initialEvents(), socket, navigate, params);\n return false;\n }\n\n if (event.name == \"_clear_local_storage\") {\n localStorage.clear();\n queueEventIfSocketExists(initialEvents(), socket, navigate, params);\n return false;\n }\n\n if (event.name == \"_remove_local_storage\") {\n localStorage.removeItem(event.payload.key);\n queueEventIfSocketExists(initialEvents(), socket, navigate, params);\n return false;\n }\n\n if (event.name == \"_clear_session_storage\") {\n sessionStorage.clear();\n queueEventIfSocketExists(initialEvents(), socket, navigate, params);\n return false;\n }\n\n if (event.name == \"_remove_session_storage\") {\n sessionStorage.removeItem(event.payload.key);\n queueEventIfSocketExists(initialEvents(), socket, navigate, params);\n return false;\n }\n\n if (event.name == \"_download\") {\n const a = document.createElement(\"a\");\n a.hidden = true;\n a.href = event.payload.url;\n // Special case when linking to uploaded files\n if (a.href.includes(\"getBackendURL(env.UPLOAD)\")) {\n a.href = eval?.(\n event.payload.url.replace(\n \"getBackendURL(env.UPLOAD)\",\n `\"${getBackendURL(env.UPLOAD)}\"`,\n ),\n );\n }\n a.download = event.payload.filename;\n a.click();\n a.remove();\n return false;\n }\n\n if (event.name == \"_set_focus\") {\n const ref =\n event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;\n const current = ref?.current;\n if (current === undefined || current?.focus === undefined) {\n console.error(\n `No element found for ref ${event.payload.ref} in _set_focus`,\n );\n } else {\n current.focus();\n }\n return false;\n }\n\n if (event.name == \"_blur_focus\") {\n const ref =\n event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;\n const current = ref?.current;\n if (current === undefined || current?.blur === undefined) {\n console.error(\n `No element found for ref ${event.payload.ref} in _blur_focus`,\n );\n } else {\n current.blur();\n }\n return false;\n }\n\n if (event.name == \"_set_value\") {\n const ref =\n event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;\n if (ref.current) {\n ref.current.value = event.payload.value;\n }\n return false;\n }\n\n if (\n event.name == \"_call_function\" &&\n typeof event.payload.function !== \"string\"\n ) {\n try {\n const eval_result = event.payload.function();\n if (event.payload.callback) {\n const final_result =\n !!eval_result && typeof eval_result.then === \"function\"\n ? await eval_result\n : eval_result;\n const callback =\n typeof event.payload.callback === \"string\"\n ? eval(event.payload.callback)\n : event.payload.callback;\n callback(final_result);\n }\n } catch (e) {\n console.log(\"_call_function\", e);\n if (window && window?.onerror) {\n window.onerror(e.message, null, null, null, e);\n }\n }\n return false;\n }\n\n if (event.name == \"_call_script\" || event.name == \"_call_function\") {\n try {\n const eval_result =\n event.name == \"_call_script\"\n ? eval(event.payload.javascript_code)\n : eval(event.payload.function)();\n\n if (event.payload.callback) {\n const final_result =\n !!eval_result && typeof eval_result.then === \"function\"\n ? await eval_result\n : eval_result;\n const callback =\n typeof event.payload.callback === \"string\"\n ? eval(event.payload.callback)\n : event.payload.callback;\n callback(final_result);\n }\n } catch (e) {\n console.log(\"_call_script\", e);\n if (window && window?.onerror) {\n window.onerror(e.message, null, null, null, e);\n }\n }\n return false;\n }\n\n // Update token and router data (if missing).\n event.token = getToken();\n if (\n event.router_data === undefined ||\n Object.keys(event.router_data).length === 0\n ) {\n // Since we don't have router directly, we need to get info from our hooks\n event.router_data = {\n pathname: window.location.pathname,\n query: {\n ...Object.fromEntries(new URLSearchParams(window.location.search)),\n ...params(),\n },\n asPath:\n window.location.pathname +\n window.location.search +\n window.location.hash,\n };\n }\n\n // Send the event to the server.\n if (socket) {\n socket.emit(\"event\", event);\n return true;\n }\n\n return false;\n};\n\n/**\n * Send an event to the server via REST.\n * @param event The current event.\n * @param socket The socket object to send the response event(s) on.\n * @param navigate The navigate function from React Router\n * @param params The params object from React Router\n *\n * @returns Whether the event was sent.\n */\nexport const applyRestEvent = async (event, socket, navigate, params) => {\n let eventSent = false;\n if (event.handler === \"uploadFiles\") {\n if (event.payload.files === undefined || event.payload.files.length === 0) {\n // Submit the event over the websocket to trigger the event handler.\n return await applyEvent(\n ReflexEvent(event.name, { files: [] }),\n socket,\n navigate,\n params,\n );\n }\n\n // Start upload, but do not wait for it, which would block other events.\n uploadFiles(\n event.name,\n event.payload.files,\n event.payload.upload_id,\n event.payload.on_upload_progress,\n event.payload.extra_headers,\n socket,\n refs,\n getBackendURL,\n getToken,\n );\n return false;\n }\n return eventSent;\n};\n\n/**\n * Resolve a socket reference to the actual socket object.\n * Handles both ref objects ({ current: Socket }) and raw sockets.\n * @param socket Either a ref object or raw socket.\n * @returns The actual socket object.\n */\nconst resolveSocket = (socket) => {\n return socket?.current ?? socket;\n};\n\n/**\n * Queue events to be processed and trigger processing of queue.\n * @param events Array of events to queue.\n * @param socket The socket object to send the event on.\n * @param prepend Whether to place the events at the beginning of the queue.\n * @param navigate The navigate function from React Router\n * @param params The params object from React Router\n */\nexport const queueEvents = async (\n events,\n socket,\n prepend,\n navigate,\n params,\n) => {\n if (prepend) {\n // Drain the existing queue and place it after the given events.\n events = [\n ...events,\n ...Array.from({ length: event_queue.length }).map(() =>\n event_queue.shift(),\n ),\n ];\n }\n event_queue.push(...events.filter((e) => e !== undefined && e !== null));\n await processEvent(resolveSocket(socket), navigate, params);\n};\n\n/**\n * Process an event off the event queue.\n * @param socket The socket object to send the event on.\n * @param navigate The navigate function from React Router\n * @param params The params object from React Router\n */\nexport const processEvent = async (socket, navigate, params) => {\n // Only proceed if the socket is up or no event in the queue uses state, otherwise we throw the event into the void\n if (isStateful() && !(socket && socket.connected)) {\n return;\n }\n\n // Only proceed if we're not already processing an event.\n if (event_queue.length === 0 || event_processing) {\n return;\n }\n\n // Set processing to true to block other events from being processed.\n event_processing = true;\n\n // Apply the next event in the queue.\n const event = event_queue.shift();\n\n let eventSent = false;\n // Process events with handlers via REST and all others via websockets.\n if (event.handler) {\n eventSent = await applyRestEvent(event, socket, navigate, params);\n } else {\n eventSent = await applyEvent(event, socket, navigate, params);\n }\n // If no event was sent, set processing to false.\n if (!eventSent) {\n event_processing = false;\n // recursively call processEvent to drain the queue, since there is\n // no state update to trigger the useEffect event loop.\n await processEvent(socket, navigate, params);\n }\n};\n\n/**\n * Connect to a websocket and set the handlers.\n * @param socket The socket object to connect.\n * @param dispatch The function to queue state update\n * @param transports The transports to use.\n * @param setConnectErrors The function to update connection error value.\n * @param client_storage The client storage object from context.js\n * @param navigate The navigate function from React Router\n * @param params The params object from React Router\n */\nexport const connect = async (\n socket,\n dispatch,\n transports,\n setConnectErrors,\n client_storage = {},\n navigate,\n params,\n) => {\n // Socket already allocated, just reconnect it if needed.\n if (socket.current) {\n if (!socket.current.connected) {\n socket.current.reconnect();\n }\n return;\n }\n\n // Get backend URL object from the endpoint.\n const endpoint = getBackendURL(EVENTURL);\n const on_hydrated_queue = [];\n\n // Create the socket.\n socket.current = io(endpoint.href, {\n path: endpoint[\"pathname\"],\n transports: transports,\n protocols: [reflexEnvironment.version],\n autoUnref: false,\n query: { token: getToken() },\n reconnection: false, // Reconnection will be handled manually.\n });\n socket.current.wait_connect = !socket.current.connected;\n // Ensure undefined fields in events are sent as null instead of removed\n socket.current.io.encoder.replacer = (k, v) => (v === undefined ? null : v);\n socket.current.io.decoder.tryParse = (str) => {\n try {\n return JSON5.parse(str);\n } catch (e) {\n return false;\n }\n };\n // Set up a reconnect helper function\n socket.current.reconnect = () => {\n if (\n socket.current &&\n !socket.current.connected &&\n !socket.current.wait_connect\n ) {\n socket.current.wait_connect = true;\n socket.current.rehydrate = true;\n socket.current.io.opts.query = { token: getToken() }; // Update token for reconnect.\n socket.current.connect();\n }\n };\n\n function checkVisibility() {\n if (document.visibilityState === \"visible\") {\n if (!socket.current) {\n connect(\n socket,\n dispatch,\n transports,\n setConnectErrors,\n client_storage,\n navigate,\n params,\n );\n } else if (!socket.current.connected) {\n console.log(\"Socket is disconnected, attempting to reconnect \");\n socket.current.reconnect();\n } else {\n console.log(\"Socket is reconnected \");\n }\n }\n }\n\n const disconnectTrigger = (event) => {\n if (socket.current?.connected) {\n console.log(\"Disconnect websocket on unload\");\n socket.current.disconnect();\n }\n };\n\n const pagehideHandler = (event) => {\n if (event.persisted && socket.current?.connected) {\n console.log(\"Disconnect backend before bfcache on navigation\");\n socket.current.disconnect();\n }\n };\n\n // Once the socket is open, hydrate the page.\n socket.current.on(\"connect\", async () => {\n socket.current.wait_connect = false;\n setConnectErrors([]);\n window.addEventListener(\"pagehide\", pagehideHandler);\n window.addEventListener(\"beforeunload\", disconnectTrigger);\n window.addEventListener(\"unload\", disconnectTrigger);\n if (socket.current.rehydrate) {\n socket.current.rehydrate = false;\n queueEvents(\n initialEvents(),\n socket,\n true,\n navigate,\n () => params.current,\n );\n }\n // Drain any initial events from the queue.\n while (event_queue.length > 0 && !event_processing) {\n await processEvent(socket.current, navigate, () => params.current);\n }\n });\n\n socket.current.on(\"connect_error\", (error) => {\n socket.current.wait_connect = false;\n let n_connect_errors = 0;\n setConnectErrors((connectErrors) => {\n const new_errors = [...connectErrors.slice(-9), error];\n n_connect_errors = new_errors.length;\n return new_errors;\n });\n window.setTimeout(() => {\n if (socket.current && !socket.current.connected) {\n socket.current.reconnect();\n }\n }, 200 * n_connect_errors); // Incremental backoff\n });\n\n // When the socket disconnects reset the event_processing flag\n socket.current.on(\"disconnect\", (reason, details) => {\n socket.current.wait_connect = false;\n const try_reconnect =\n reason !== \"io server disconnect\" && reason !== \"io client disconnect\";\n event_processing = false;\n window.removeEventListener(\"unload\", disconnectTrigger);\n window.removeEventListener(\"beforeunload\", disconnectTrigger);\n window.removeEventListener(\"pagehide\", pagehideHandler);\n if (try_reconnect) {\n // Attempt to reconnect transient non-intentional disconnects.\n socket.current.reconnect();\n }\n });\n\n // On each received message, queue the updates and events.\n socket.current.on(\"event\", async (update) => {\n for (const substate in update.delta) {\n dispatch[substate](update.delta[substate]);\n // handle events waiting for `is_hydrated`\n if (\n substate === state_name &&\n update.delta[substate]?.is_hydrated_rx_state_\n ) {\n queueEvents(on_hydrated_queue, socket, false, navigate, params);\n on_hydrated_queue.length = 0;\n }\n }\n applyClientStorageDelta(client_storage, update.delta);\n if (update.final !== null) {\n event_processing = !update.final;\n }\n if (update.events) {\n queueEvents(update.events, socket, false, navigate, params);\n }\n });\n socket.current.on(\"reload\", async (event) => {\n event_processing = false;\n on_hydrated_queue.push(event);\n queueEvents(initialEvents(), socket, true, navigate, params);\n });\n socket.current.on(\"new_token\", async (new_token) => {\n token = new_token;\n window.sessionStorage.setItem(TOKEN_KEY, new_token);\n });\n\n document.addEventListener(\"visibilitychange\", checkVisibility);\n};\n\n/**\n * Create an event object.\n * @param {string} name The name of the event.\n * @param {Object.} payload The payload of the event.\n * @param {Object.} event_actions The actions to take on the event.\n * @param {string} handler The client handler to process event.\n * @returns The event object.\n */\nexport const ReflexEvent = (\n name,\n payload = {},\n event_actions = {},\n handler = null,\n) => {\n return { name, payload, handler, event_actions };\n};\n\n/**\n * Package client-side storage values as payload to send to the\n * backend with the hydrate event\n * @param client_storage The client storage object from context.js\n * @returns payload dict of client storage values\n */\nexport const hydrateClientStorage = (client_storage) => {\n const client_storage_values = {};\n if (client_storage.cookies) {\n for (const state_key in client_storage.cookies) {\n const cookie_options = client_storage.cookies[state_key];\n const cookie_name = cookie_options.name || state_key;\n const cookie_value = cookies.get(cookie_name, { doNotParse: true });\n if (cookie_value !== undefined) {\n client_storage_values[state_key] = cookie_value;\n }\n }\n }\n if (client_storage.local_storage && typeof window !== \"undefined\") {\n for (const state_key in client_storage.local_storage) {\n const options = client_storage.local_storage[state_key];\n const local_storage_value = localStorage.getItem(\n options.name || state_key,\n );\n if (local_storage_value !== null) {\n client_storage_values[state_key] = local_storage_value;\n }\n }\n }\n if (client_storage.session_storage && typeof window != \"undefined\") {\n for (const state_key in client_storage.session_storage) {\n const session_options = client_storage.session_storage[state_key];\n const session_storage_value = sessionStorage.getItem(\n session_options.name || state_key,\n );\n if (session_storage_value != null) {\n client_storage_values[state_key] = session_storage_value;\n }\n }\n }\n if (\n client_storage.cookies ||\n client_storage.local_storage ||\n client_storage.session_storage\n ) {\n return client_storage_values;\n }\n return {};\n};\n\n/**\n * Update client storage values based on backend state delta.\n * @param client_storage The client storage object from context.js\n * @param delta The state update from the backend\n */\nconst applyClientStorageDelta = (client_storage, delta) => {\n // find the main state and check for is_hydrated\n const unqualified_states = Object.keys(delta).filter(\n (key) => key.split(\".\").length === 1,\n );\n if (unqualified_states.length === 1) {\n const main_state = delta[unqualified_states[0]];\n if (\n main_state.is_hydrated_rx_state_ !== undefined &&\n !main_state.is_hydrated_rx_state_\n ) {\n // skip if the state is not hydrated yet, since all client storage\n // values are sent in the hydrate event\n return;\n }\n }\n // Save known client storage values to cookies and localStorage.\n for (const substate in delta) {\n for (const key in delta[substate]) {\n const state_key = `${substate}.${key}`;\n if (client_storage.cookies && state_key in client_storage.cookies) {\n const cookie_options = { ...client_storage.cookies[state_key] };\n const cookie_name = cookie_options.name || state_key;\n delete cookie_options.name; // name is not a valid cookie option\n cookies.set(cookie_name, delta[substate][key], cookie_options);\n } else if (\n client_storage.local_storage &&\n state_key in client_storage.local_storage &&\n typeof window !== \"undefined\"\n ) {\n const options = client_storage.local_storage[state_key];\n localStorage.setItem(options.name || state_key, delta[substate][key]);\n } else if (\n client_storage.session_storage &&\n state_key in client_storage.session_storage &&\n typeof window !== \"undefined\"\n ) {\n const session_options = client_storage.session_storage[state_key];\n sessionStorage.setItem(\n session_options.name || state_key,\n delta[substate][key],\n );\n }\n }\n }\n};\n\n/**\n * Establish websocket event loop for a React Router page.\n * @param dispatch The reducer dispatch function to update state.\n * @param initial_events The initial app events.\n * @param client_storage The client storage object from context.js\n *\n * @returns [addEvents, connectErrors] -\n * addEvents is used to queue an event, and\n * connectErrors is an array of reactive js error from the websocket connection (or null if connected).\n */\nexport const useEventLoop = (\n dispatch,\n initial_events = () => [],\n client_storage = {},\n) => {\n const socket = useRef(null);\n const location = useLocation();\n const navigate = useNavigate();\n const paramsR = useParams();\n const prevLocationRef = useRef(location);\n const [searchParams] = useSearchParams();\n const [connectErrors, setConnectErrors] = useState([]);\n const params = useRef(paramsR);\n const mounted = useRef(false);\n\n useEffect(() => {\n const { \"*\": splat, ...remainingParams } = paramsR;\n if (splat) {\n params.current = { ...remainingParams, splat: splat.split(\"/\") };\n } else {\n params.current = remainingParams;\n }\n }, [paramsR]);\n\n const ensureSocketConnected = useCallback(async () => {\n if (!mounted.current) {\n // During hot reload, some components may still have a reference to\n // addEvents, so avoid reconnecting the socket of an unmounted event loop.\n return;\n }\n // only use websockets if state is present and backend is not disabled (reflex cloud).\n if (\n Object.keys(initialState).length > 1 &&\n !isBackendDisabled() &&\n !socket.current?.connected\n ) {\n // Initialize the websocket connection.\n await connect(\n socket,\n dispatch,\n [env.TRANSPORT],\n setConnectErrors,\n client_storage,\n navigate,\n () => params.current,\n );\n }\n }, [\n socket,\n dispatch,\n setConnectErrors,\n client_storage,\n navigate,\n params,\n mounted,\n ]);\n\n // Function to add new events to the event queue.\n const addEvents = useCallback((events, args, event_actions) => {\n const _events = events.filter((e) => e !== undefined && e !== null);\n if (!event_actions?.temporal) {\n // Reconnect socket if needed for non-temporal events.\n ensureSocketConnected();\n }\n\n if (!(args instanceof Array)) {\n args = [args];\n }\n\n event_actions = _events.reduce(\n (acc, e) => ({ ...acc, ...e.event_actions }),\n event_actions ?? {},\n );\n\n const _e = args.filter((o) => o?.preventDefault !== undefined)[0];\n\n if (event_actions?.preventDefault && _e?.preventDefault) {\n _e.preventDefault();\n }\n if (event_actions?.stopPropagation && _e?.stopPropagation) {\n _e.stopPropagation();\n }\n const combined_name = _events.map((e) => e.name).join(\"+++\");\n if (event_actions?.temporal) {\n if (!socket.current || !socket.current.connected) {\n return; // don't queue when the backend is not connected\n }\n }\n if (event_actions?.throttle) {\n // If throttle returns false, the events are not added to the queue.\n if (!throttle(combined_name, event_actions.throttle)) {\n return;\n }\n }\n if (event_actions?.debounce) {\n // If debounce is used, queue the events after some delay\n debounce(\n combined_name,\n () =>\n queueEvents(_events, socket, false, navigate, () => params.current),\n event_actions.debounce,\n );\n } else {\n queueEvents(_events, socket, false, navigate, () => params.current);\n }\n }, []);\n\n const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode\n useEffect(() => {\n if (!sentHydrate.current) {\n queueEvents(\n initial_events(),\n socket,\n true,\n navigate,\n () => params.current,\n );\n sentHydrate.current = true;\n }\n }, []);\n\n // Handle frontend errors and send them to the backend via websocket.\n useEffect(() => {\n if (typeof window === \"undefined\") {\n return;\n }\n\n window.onerror = function (msg, url, lineNo, columnNo, error) {\n addEvents([\n ReflexEvent(`${exception_state_name}.handle_frontend_exception`, {\n info: error.name + \": \" + error.message + \"\\n\" + error.stack,\n component_stack: \"\",\n }),\n ]);\n return false;\n };\n\n //NOTE: Only works in Chrome v49+\n //https://github.com/mknichel/javascript-errors?tab=readme-ov-file#promise-rejection-events\n window.onunhandledrejection = function (event) {\n addEvents([\n ReflexEvent(`${exception_state_name}.handle_frontend_exception`, {\n info:\n event.reason?.name +\n \": \" +\n event.reason?.message +\n \"\\n\" +\n event.reason?.stack,\n component_stack: \"\",\n }),\n ]);\n return false;\n };\n }, []);\n\n // Handle socket connect/disconnect.\n useEffect(() => {\n // Initialize the websocket connection.\n mounted.current = true;\n ensureSocketConnected();\n\n // Cleanup function.\n return () => {\n mounted.current = false;\n if (socket.current) {\n socket.current.disconnect();\n socket.current.off();\n socket.current = null;\n }\n };\n }, []);\n\n // Main event loop.\n useEffect(() => {\n // Skip if the backend is disabled\n if (isBackendDisabled() || !socket.current || !socket.current.connected) {\n return;\n }\n (async () => {\n // Process all outstanding events.\n while (event_queue.length > 0 && !event_processing) {\n await ensureSocketConnected();\n await processEvent(socket.current, navigate, () => params.current);\n }\n })();\n });\n\n // localStorage event handling\n useEffect(() => {\n const storage_to_state_map = {};\n\n if (client_storage.local_storage && typeof window !== \"undefined\") {\n for (const state_key in client_storage.local_storage) {\n const options = client_storage.local_storage[state_key];\n if (options.sync) {\n const local_storage_value_key = options.name || state_key;\n storage_to_state_map[local_storage_value_key] = state_key;\n }\n }\n }\n\n // e is StorageEvent\n const handleStorage = (e) => {\n if (storage_to_state_map[e.key]) {\n const vars = {};\n vars[storage_to_state_map[e.key]] = e.newValue;\n const event = ReflexEvent(\n `${state_name}.reflex___state____update_vars_internal_state.update_vars_internal`,\n { vars: vars },\n );\n addEvents([event], e);\n }\n };\n\n window.addEventListener(\"storage\", handleStorage);\n return () => window.removeEventListener(\"storage\", handleStorage);\n });\n\n const handleNavigationEvents = useRef(false);\n // Route after the initial page hydration\n useEffect(() => {\n // The first time this effect runs is initial load, so don't handle\n // any navigation events.\n if (!handleNavigationEvents.current) {\n handleNavigationEvents.current = true;\n return;\n }\n if (location.state?.fromNotFound) {\n // If the redirect is from a 404 page, we skip onLoadInternalEvent,\n // since it was already run when the 404 page was first rendered.\n return;\n }\n // This will run when the location changes\n if (\n location.pathname + location.search ===\n prevLocationRef.current.pathname + prevLocationRef.current.search\n ) {\n if (location.hash) {\n // If the hash is the same, we don't need to do anything.\n return;\n }\n }\n\n // Equivalent to routeChangeStart - runs when navigation begins\n const main_state_dispatch = dispatch[\"reflex___state____state\"];\n if (main_state_dispatch !== undefined) {\n main_state_dispatch({ is_hydrated_rx_state_: false });\n }\n\n // Equivalent to routeChangeComplete - runs after navigation completes\n addEvents(onLoadInternalEvent());\n\n // Update the ref\n prevLocationRef.current = location;\n }, [location, dispatch, onLoadInternalEvent, addEvents]);\n\n return [addEvents, connectErrors];\n};\n\n/***\n * Check if a value is truthy in python.\n * @param val The value to check.\n * @returns True if the value is truthy, false otherwise.\n */\nexport const isTrue = (val) => {\n if (Array.isArray(val)) return val.length > 0;\n if (val === Object(val)) return Object.keys(val).length > 0;\n return Boolean(val);\n};\n\n/***\n * Check if a value is not null or undefined.\n * @param val The value to check.\n * @returns True if the value is not null or undefined, false otherwise.\n */\nexport const isNotNullOrUndefined = (val) => {\n return (val ?? undefined) !== undefined;\n};\n\n/**\n * Get the value from a ref.\n * @param ref The ref to get the value from.\n * @returns The value.\n */\nexport const getRefValue = (ref) => {\n if (!ref || !ref.current) {\n return;\n }\n if (ref.current.type == \"checkbox\") {\n return ref.current.checked; // chakra\n } else if (\n ref.current.className?.includes(\"rt-CheckboxRoot\") ||\n ref.current.className?.includes(\"rt-SwitchRoot\")\n ) {\n return ref.current.ariaChecked == \"true\"; // radix\n } else if (ref.current.className?.includes(\"rt-SliderRoot\")) {\n // find the actual slider\n return ref.current.querySelector(\".rt-SliderThumb\")?.ariaValueNow;\n } else {\n //querySelector(\":checked\") is needed to get value from radio_group\n return (\n ref.current.value ||\n (ref.current.querySelector &&\n ref.current.querySelector(\":checked\") &&\n ref.current.querySelector(\":checked\")?.value)\n );\n }\n};\n\n/**\n * Get the values from a ref array.\n * @param refs The refs to get the values from.\n * @returns The values array.\n */\nexport const getRefValues = (refs) => {\n if (!refs) {\n return;\n }\n // getAttribute is used by RangeSlider because it doesn't assign value\n return refs.map((ref) =>\n ref.current\n ? ref.current.value || ref.current.getAttribute(\"aria-valuenow\")\n : null,\n );\n};\n\n/**\n * Spread two arrays or two objects.\n * @param first The first array or object.\n * @param second The second array or object.\n * @returns The final merged array or object.\n */\nexport const spreadArraysOrObjects = (first, second) => {\n if (Array.isArray(first) && Array.isArray(second)) {\n return [...first, ...second];\n } else if (typeof first === \"object\" && typeof second === \"object\") {\n return { ...first, ...second };\n } else {\n throw new Error(\"Both parameters must be either arrays or objects.\");\n }\n};\n" }, { "path": "reflex/.templates/web/vite-plugin-safari-cachebust.js", "content": "/* vite-plugin-safari-cachebust.js\n *\n * Rewrite modulepreload tags and ESM imports to include a cache-busting\n * query parameter for Safari browser.\n *\n * https://github.com/remix-run/react-router/issues/12761\n *\n * The issue seems to be Safari over-aggressive caching of ESM imports (and modulepreload)\n * which does not respect the cache-control headers sent by the server. This approach\n * allows hot reload to work in Safari when adding routes or changing dependencies.\n *\n * No equivalent transformation is needed for production builds, as the\n * output already contains the file hash in the name.\n */\n\n/**\n * @typedef {import('vite').Plugin} Plugin\n * @typedef {import('vite').ViteDevServer} ViteDevServer\n * @typedef {import('http').IncomingMessage} IncomingMessage\n * @typedef {import('http').ServerResponse} ServerResponse\n * @typedef {import('connect').NextHandleFunction} NextHandleFunction\n */\n\nconst pluginName = \"vite-plugin-safari-cachebust\";\n\n/**\n * Creates a Vite plugin that adds cache-busting for Safari browsers\n * @returns {Plugin} The Vite plugin\n */\nexport default function safariCacheBustPlugin() {\n return {\n name: pluginName,\n /**\n * Configure the dev server with the Safari middleware\n * @param {ViteDevServer} server - The Vite dev server instance\n */\n configureServer(server) {\n server.middlewares.use(createSafariMiddleware());\n },\n };\n}\n\n/**\n * Determines if the user agent is Safari\n * @param {string} ua - The user agent string\n * @returns {boolean} True if the browser is Safari\n */\nfunction isSafari(ua) {\n return /Safari/.test(ua) && !/Chrome/.test(ua);\n}\n\n/**\n * Creates a middleware that adds cache-busting for Safari browsers\n * @returns {NextHandleFunction} The middleware function\n */\nfunction createSafariMiddleware() {\n // Set when a log message for rewriting n links has been emitted.\n let _have_logged_n = -1;\n\n /**\n * Rewrites module import links in HTML content with cache-busting parameters\n * @param {string} html - The HTML content to process\n * @returns {string} The processed HTML content\n */\n function rewriteModuleImports(html) {\n const currentTimestamp = new Date().getTime();\n const parts = html.split(/(]*>)/g);\n /** @type {[string, string][]} */\n const replacements = parts\n .map((chunk) => {\n const match = chunk.match(\n //,\n );\n if (!match) return;\n\n const [fullMatch, href, rest] = match;\n if (/^(https?:)?\\/\\//.test(href)) return;\n\n try {\n const newHref = href.includes(\"?\")\n ? `${href}&__reflex_ts=${currentTimestamp}`\n : `${href}?__reflex_ts=${currentTimestamp}`;\n return [href, newHref];\n } catch {\n // no worries;\n }\n })\n .filter(Boolean);\n if (replacements.length && _have_logged_n !== replacements.length) {\n _have_logged_n = replacements.length;\n console.debug(\n `[${pluginName}] Rewrote ${replacements.length} modulepreload links with __reflex_ts param.`,\n );\n }\n return replacements.reduce((accumulator, [target, replacement]) => {\n return accumulator.split(target).join(replacement);\n }, html);\n }\n\n /**\n * Middleware function to handle Safari cache busting\n * @param {IncomingMessage} req - The incoming request\n * @param {ServerResponse} res - The server response\n * @param {(err?: any) => void} next - The next middleware function\n * @returns {void}\n */\n return function safariCacheBustMiddleware(req, res, next) {\n const ua = req.headers[\"user-agent\"] || \"\";\n // Remove our special cache bust query param to avoid affecting lower middleware layers.\n if (\n req.url &&\n (req.url.includes(\"?__reflex_ts=\") || req.url.includes(\"&__reflex_ts=\"))\n ) {\n req.url = req.url.replace(/(\\?|&)__reflex_ts=\\d+/, \"\");\n return next();\n }\n\n // Only apply this middleware for Safari browsers.\n if (!isSafari(ua)) return next();\n\n // Only transform requests that want HTML.\n const header_accept = req.headers[\"accept\"] || \"\";\n if (\n typeof header_accept !== \"string\" ||\n !header_accept.includes(\"text/html\")\n ) {\n return next();\n }\n\n let buffer = \"\";\n const _end = res.end.bind(res);\n\n res.setHeader(\"x-modified-by\", \"vite-plugin-safari-cachebust\");\n /**\n * Overridden write method to collect chunks\n * @param {any} chunk - The chunk to write\n * @param {...any} args - Additional arguments\n * @returns {boolean} Result of the write operation\n */\n res.write = function (chunk, ...args) {\n buffer += chunk instanceof Buffer ? chunk.toString(\"utf-8\") : chunk;\n return true;\n };\n\n /**\n * Overridden end method to process and send the final response\n * @param {any} chunk - The final chunk to write\n * @param {...any} args - Additional arguments\n * @returns {ServerResponse} The server response\n */\n res.end = function (chunk, ...args) {\n if (chunk) {\n buffer += chunk instanceof Buffer ? chunk.toString(\"utf-8\") : chunk;\n }\n buffer = rewriteModuleImports(buffer);\n return _end(buffer, ...args);\n };\n return next();\n };\n}\n" }, { "path": "reflex/__init__.py", "content": "\"\"\"Import all classes and functions the end user will need to make an app.\n\nAnything imported here will be available in the default Reflex import as `rx.*`.\n\nDynamic Imports\n---------------\nReflex utilizes dynamic imports, or lazy loading, to reduce startup/import times.\nWith this approach, imports are delayed until they are actually needed. We use\nthe `lazy_loader` library(https://github.com/scientific-python/lazy_loader) to achieve this.\n\nHow it works\n--------------\n`lazy_loader.attach` takes two optional arguments: `submodules` and `submod_attrs`.\n- `submodules` typically points to directories or files to be accessed.\n- `submod_attrs` defines a mapping of directory or file names as keys with a list\n of attributes or modules to access.\n\nExample directory structure:\n\nreflex/\n |_ components/\n |_ radix/\n |_ themes/\n |_ components/\n |_ box.py\n\nTo add `box` under the `rx` namespace (`rx.box`), add the relative path to `submod_attrs` in\n`reflex/__init__.py` (this file):\n\n```python\nlazy_loader.attach(\n submodules={\"components\"},\n submod_attrs={\n \"components.radix.themes.components.box\": [\"box\"]\n }\n)\n```\n\nThis implies that `box` will be imported from `reflex/components/radix/themes/components/box.py`.\n\nTo add box under the `rx.radix` namespace (`rx.radix.box`), add the relative path to the\nsubmod_attrs argument in `reflex/components/radix/__init__.py`:\n\n```python\nlazy_loader.attach(\n submodules = {\"themes\"},\n submod_attrs = {\n \"themes.components.box\": [\"box\"]\n }\n)\n```\n\nNote: It is important to specify the immediate submodules of a directory in the submodules\nargument to ensure they are registered at runtime. For example, 'components' for reflex,\n'radix' for components, 'themes' for radix, etc.\n\n\nPyi_generator\n--------------\nTo generate `.pyi` files for `__init__.py` files, we read the `_SUBMODULES` and `_SUBMOD_ATTRS`\nattributes to generate the import statements. It is highly recommended to define these with\nthe provided annotations to facilitate their generation.\n\n\nAliases\n------------\nThis is a special case to specify an alias for a component.\nAs an example, we use this typically for `rx.list` where defining `list` attribute in the list.py\novershadows python's list object which messes up the pyi generation for `list.pyi`. As a result, aliases\nshould be used for similar cases like this. Note that this logic is employed to fix the pyi generation and alias\nshould still be defined or accessible. Check out the __getattr__ logic in `reflex/components/radix/themes/layouts/list.py`\n\n```python\nlazy_loader.attach(\n submodules={\"components\"},\n submod_attrs={\n \"components.radix.themes.layouts\": [(\"list_ns\", \"list\")]\n }\n)\n```\n\nIn the example above, you will be able to do `rx.list`\n\"\"\"\n\nfrom __future__ import annotations\n\nimport sys\n\nfrom reflex.utils import lazy_loader\n\nif sys.version_info < (3, 11):\n from reflex.utils import console\n\n console.warn(\n \"Reflex support for Python 3.10 is deprecated and will be removed in a future release. Please upgrade to Python 3.11 or higher for continued support.\"\n )\n del console\ndel sys\n\nRADIX_THEMES_MAPPING: dict = {\n \"components.radix.themes.base\": [\"color_mode\", \"theme\", \"theme_panel\"],\n \"components.radix.themes.color_mode\": [\"color_mode\"],\n}\nRADIX_THEMES_COMPONENTS_MAPPING: dict = {\n **{\n f\"components.radix.themes.components.{mod}\": [mod]\n for mod in [\n \"alert_dialog\",\n \"aspect_ratio\",\n \"avatar\",\n \"badge\",\n \"button\",\n \"callout\",\n \"card\",\n \"checkbox\",\n \"context_menu\",\n \"data_list\",\n \"dialog\",\n \"hover_card\",\n \"icon_button\",\n \"input\",\n \"inset\",\n \"popover\",\n \"scroll_area\",\n \"select\",\n \"skeleton\",\n \"slider\",\n \"spinner\",\n \"switch\",\n \"table\",\n \"tabs\",\n \"text_area\",\n \"tooltip\",\n \"segmented_control\",\n \"radio_cards\",\n \"checkbox_cards\",\n \"checkbox_group\",\n ]\n },\n \"components.radix.themes.components.text_field\": [\"text_field\", \"input\"],\n \"components.radix.themes.components.radio_group\": [\"radio\", \"radio_group\"],\n \"components.radix.themes.components.dropdown_menu\": [\"menu\", \"dropdown_menu\"],\n \"components.radix.themes.components.separator\": [\"divider\", \"separator\"],\n \"components.radix.themes.components.progress\": [\"progress\"],\n}\n\nRADIX_THEMES_LAYOUT_MAPPING: dict = {\n \"components.radix.themes.layout.box\": [\n \"box\",\n ],\n \"components.radix.themes.layout.center\": [\n \"center\",\n ],\n \"components.radix.themes.layout.container\": [\n \"container\",\n ],\n \"components.radix.themes.layout.flex\": [\n \"flex\",\n ],\n \"components.radix.themes.layout.grid\": [\n \"grid\",\n ],\n \"components.radix.themes.layout.section\": [\n \"section\",\n ],\n \"components.radix.themes.layout.spacer\": [\n \"spacer\",\n ],\n \"components.radix.themes.layout.stack\": [\n \"stack\",\n \"hstack\",\n \"vstack\",\n ],\n \"components.radix.themes.layout.list\": [\n (\"list_ns\", \"list\"),\n \"list_item\",\n \"ordered_list\",\n \"unordered_list\",\n ],\n}\n\nRADIX_THEMES_TYPOGRAPHY_MAPPING: dict = {\n \"components.radix.themes.typography.blockquote\": [\n \"blockquote\",\n ],\n \"components.radix.themes.typography.code\": [\n \"code\",\n ],\n \"components.radix.themes.typography.heading\": [\n \"heading\",\n ],\n \"components.radix.themes.typography.link\": [\n \"link\",\n ],\n \"components.radix.themes.typography.text\": [\n \"text\",\n ],\n}\n\nRADIX_PRIMITIVES_MAPPING: dict = {\n \"components.radix.primitives.accordion\": [\n \"accordion\",\n ],\n \"components.radix.primitives.drawer\": [\n \"drawer\",\n ],\n \"components.radix.primitives.form\": [\n \"form\",\n ],\n \"components.radix.primitives.progress\": [\n \"progress\",\n ],\n}\n\nRADIX_PRIMITIVES_SHORTCUT_MAPPING: dict = {\n k: v for k, v in RADIX_PRIMITIVES_MAPPING.items() if \"progress\" not in k\n}\n\nCOMPONENTS_CORE_MAPPING: dict = {\n \"components.core.banner\": [\n \"connection_banner\",\n \"connection_modal\",\n ],\n \"components.core.cond\": [\"cond\", \"color_mode_cond\"],\n \"components.core.foreach\": [\"foreach\"],\n \"components.core.debounce\": [\"debounce_input\"],\n \"components.core.html\": [\"html\"],\n \"components.core.match\": [\"match\"],\n \"components.core.clipboard\": [\"clipboard\"],\n \"components.core.colors\": [\"color\"],\n \"components.core.breakpoints\": [\"breakpoints\"],\n \"components.core.responsive\": [\n \"desktop_only\",\n \"mobile_and_tablet\",\n \"mobile_only\",\n \"tablet_and_desktop\",\n \"tablet_only\",\n ],\n \"components.core.upload\": [\n \"cancel_upload\",\n \"clear_selected_files\",\n \"get_upload_dir\",\n \"get_upload_url\",\n \"selected_files\",\n \"upload\",\n ],\n \"components.core.auto_scroll\": [\"auto_scroll\"],\n \"components.core.window_events\": [\"window_event_listener\"],\n}\n\nCOMPONENTS_BASE_MAPPING: dict = {\n \"components.base.fragment\": [\"fragment\", \"Fragment\"],\n \"components.base.script\": [\"script\", \"Script\"],\n}\n\nRADIX_MAPPING: dict = {\n **RADIX_THEMES_MAPPING,\n **RADIX_THEMES_COMPONENTS_MAPPING,\n **RADIX_THEMES_TYPOGRAPHY_MAPPING,\n **RADIX_THEMES_LAYOUT_MAPPING,\n **RADIX_PRIMITIVES_SHORTCUT_MAPPING,\n}\n\n_MAPPING: dict = {\n \"experimental\": [\"_x\"],\n \"admin\": [\"AdminDash\"],\n \"app\": [\"App\", \"UploadFile\"],\n \"assets\": [\"asset\"],\n \"base\": [\"Base\"],\n \"components.component\": [\n \"Component\",\n \"NoSSRComponent\",\n \"memo\",\n \"ComponentNamespace\",\n ],\n \"components.el.elements.media\": [\"image\"],\n \"components.lucide\": [\"icon\"],\n **COMPONENTS_BASE_MAPPING,\n \"components\": [\"el\", \"radix\", \"lucide\", \"recharts\"],\n \"components.markdown\": [\"markdown\"],\n **RADIX_MAPPING,\n \"components.plotly\": [\"plotly\"],\n \"components.react_player\": [\"audio\", \"video\"],\n **COMPONENTS_CORE_MAPPING,\n \"components.datadisplay.code\": [\n \"code_block\",\n ],\n \"components.datadisplay.dataeditor\": [\n \"data_editor\",\n \"data_editor_theme\",\n ],\n \"components.sonner.toast\": [\"toast\"],\n \"components.props\": [\"PropsBase\"],\n \"components.datadisplay.logo\": [\"logo\"],\n \"components.gridjs\": [\"data_table\"],\n \"components.moment\": [\"MomentDelta\", \"moment\"],\n \"config\": [\"Config\", \"DBConfig\"],\n \"constants\": [\"Env\"],\n \"constants.colors\": [\"Color\"],\n \"event\": [\n \"event\",\n \"EventChain\",\n \"EventHandler\",\n \"call_script\",\n \"call_function\",\n \"run_script\",\n \"clear_local_storage\",\n \"clear_session_storage\",\n \"console_log\",\n \"download\",\n \"noop\",\n \"prevent_default\",\n \"redirect\",\n \"remove_cookie\",\n \"remove_local_storage\",\n \"remove_session_storage\",\n \"set_clipboard\",\n \"set_focus\",\n \"scroll_to\",\n \"set_value\",\n \"stop_propagation\",\n \"upload_files\",\n \"window_alert\",\n ],\n \"istate.storage\": [\n \"Cookie\",\n \"LocalStorage\",\n \"SessionStorage\",\n ],\n \"middleware\": [\"middleware\", \"Middleware\"],\n \"model\": [\"asession\", \"session\", \"Model\", \"ModelRegistry\"],\n \"page\": [\"page\"],\n \"state\": [\n \"var\",\n \"ComponentState\",\n \"State\",\n \"dynamic\",\n ],\n \"istate.shared\": [\"SharedState\"],\n \"istate.wrappers\": [\"get_state\"],\n \"style\": [\"Style\", \"toggle_color_mode\"],\n \"utils.imports\": [\"ImportDict\", \"ImportVar\"],\n \"utils.misc\": [\"run_in_thread\"],\n \"utils.serializers\": [\"serializer\"],\n \"vars\": [\"Var\", \"field\", \"Field\"],\n}\n\n_SUBMODULES: set[str] = {\n \"components\",\n \"app\",\n \"style\",\n \"admin\",\n \"base\",\n \"model\",\n \"testing\",\n \"utils\",\n \"vars\",\n \"config\",\n \"compiler\",\n \"plugins\",\n}\n_SUBMOD_ATTRS: dict = _MAPPING\ngetattr, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n)\n\n\ndef __getattr__(name: str):\n return getattr(name)\n" }, { "path": "reflex/__main__.py", "content": "\"\"\"reflex package invocation entry point.\"\"\"\n\nfrom .reflex import cli\n\nif __name__ == \"__main__\":\n cli()\n" }, { "path": "reflex/admin.py", "content": "\"\"\"The Reflex Admin Dashboard.\"\"\"\n\nfrom __future__ import annotations\n\nfrom dataclasses import dataclass, field\nfrom typing import TYPE_CHECKING\n\nif TYPE_CHECKING:\n from starlette_admin.base import BaseAdmin as Admin\n\n\n@dataclass\nclass AdminDash:\n \"\"\"Data used to build the admin dashboard.\"\"\"\n\n models: list = field(default_factory=list)\n view_overrides: dict = field(default_factory=dict)\n admin: Admin | None = None\n" }, { "path": "reflex/app.py", "content": "\"\"\"The main Reflex app.\"\"\"\n\nfrom __future__ import annotations\n\nimport asyncio\nimport concurrent.futures\nimport contextlib\nimport copy\nimport dataclasses\nimport functools\nimport inspect\nimport json\nimport operator\nimport sys\nimport time\nimport traceback\nimport urllib.parse\nfrom collections.abc import (\n AsyncGenerator,\n AsyncIterator,\n Awaitable,\n Callable,\n Coroutine,\n Mapping,\n Sequence,\n)\nfrom datetime import datetime\nfrom itertools import chain\nfrom pathlib import Path\nfrom timeit import default_timer as timer\nfrom types import SimpleNamespace\nfrom typing import TYPE_CHECKING, Any, BinaryIO, ParamSpec, get_args, get_type_hints\n\nfrom rich.progress import MofNCompleteColumn, Progress, TimeElapsedColumn\nfrom socketio import ASGIApp as EngineIOApp\nfrom socketio import AsyncNamespace, AsyncServer\nfrom starlette.applications import Starlette\nfrom starlette.datastructures import Headers\nfrom starlette.datastructures import UploadFile as StarletteUploadFile\nfrom starlette.exceptions import HTTPException\nfrom starlette.middleware import cors\nfrom starlette.requests import ClientDisconnect, Request\nfrom starlette.responses import JSONResponse, Response, StreamingResponse\nfrom starlette.staticfiles import StaticFiles\nfrom typing_extensions import Unpack\n\nfrom reflex import constants\nfrom reflex.admin import AdminDash\nfrom reflex.app_mixins import AppMixin, LifespanMixin, MiddlewareMixin\nfrom reflex.compiler import compiler\nfrom reflex.compiler import utils as compiler_utils\nfrom reflex.compiler.compiler import (\n ExecutorSafeFunctions,\n compile_theme,\n readable_name_from_component,\n)\nfrom reflex.components.base.app_wrap import AppWrap\nfrom reflex.components.base.error_boundary import ErrorBoundary\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.base.strict_mode import StrictMode\nfrom reflex.components.component import (\n CUSTOM_COMPONENTS,\n Component,\n ComponentStyle,\n evaluate_style_namespaces,\n)\nfrom reflex.components.core.banner import (\n backend_disabled,\n connection_pulser,\n connection_toaster,\n)\nfrom reflex.components.core.breakpoints import set_breakpoints\nfrom reflex.components.core.sticky import sticky\nfrom reflex.components.radix import themes\nfrom reflex.components.sonner.toast import toast\nfrom reflex.config import get_config\nfrom reflex.environment import ExecutorType, environment\nfrom reflex.event import (\n _EVENT_FIELDS,\n Event,\n EventSpec,\n EventType,\n IndividualEventType,\n get_hydrate_event,\n noop,\n)\nfrom reflex.istate.manager import StateModificationContext\nfrom reflex.istate.proxy import StateProxy\nfrom reflex.page import DECORATED_PAGES\nfrom reflex.route import (\n get_route_args,\n replace_brackets_with_keywords,\n verify_route_validity,\n)\nfrom reflex.state import (\n BaseState,\n RouterData,\n State,\n StateManager,\n StateUpdate,\n _split_substate_key,\n _substate_key,\n all_base_state_classes,\n code_uses_state_contexts,\n)\nfrom reflex.utils import (\n codespaces,\n console,\n exceptions,\n format,\n frontend_skeleton,\n js_runtimes,\n path_ops,\n prerequisites,\n types,\n)\nfrom reflex.utils.exec import (\n get_compile_context,\n is_prod_mode,\n is_testing_env,\n should_prerender_routes,\n)\nfrom reflex.utils.imports import ImportVar\nfrom reflex.utils.misc import run_in_thread\nfrom reflex.utils.token_manager import RedisTokenManager, TokenManager\nfrom reflex.utils.types import ASGIApp, Message, Receive, Scope, Send\n\nif TYPE_CHECKING:\n from reflex.vars import Var\n\n # Define custom types.\n ComponentCallable = Callable[[], Component | tuple[Component, ...] | str | Var]\nelse:\n ComponentCallable = Callable[[], Component | tuple[Component, ...] | str]\n\nReducer = Callable[[Event], Coroutine[Any, Any, StateUpdate]]\n\n\ndef default_frontend_exception_handler(exception: Exception) -> None:\n \"\"\"Default frontend exception handler function.\n\n Args:\n exception: The exception.\n\n \"\"\"\n console.error(f\"[Reflex Frontend Exception]\\n {exception}\\n\")\n\n\ndef default_backend_exception_handler(exception: Exception) -> EventSpec:\n \"\"\"Default backend exception handler function.\n\n Args:\n exception: The exception.\n\n Returns:\n EventSpec: The window alert event.\n\n \"\"\"\n from reflex.components.sonner.toast import toast\n\n error = traceback.format_exc()\n\n console.error(f\"[Reflex Backend Exception]\\n {error}\\n\")\n\n error_message = (\n [\"Contact the website administrator.\"]\n if is_prod_mode()\n else [f\"{type(exception).__name__}: {exception}.\", \"See logs for details.\"]\n )\n\n return toast(\n \"An error occurred.\",\n level=\"error\",\n fallback_to_alert=True,\n description=\"
\".join(error_message),\n position=\"top-center\",\n id=\"backend_error\",\n style={\"width\": \"500px\"},\n )\n\n\ndef extra_overlay_function() -> Component | None:\n \"\"\"Extra overlay function to add to the overlay component.\n\n Returns:\n The extra overlay function.\n \"\"\"\n config = get_config()\n\n extra_config = config.extra_overlay_function\n config_overlay = None\n if extra_config:\n module, _, function_name = extra_config.rpartition(\".\")\n try:\n module = __import__(module)\n config_overlay = Fragment.create(getattr(module, function_name)())\n config_overlay._get_all_imports()\n except Exception as e:\n from reflex.compiler.utils import save_error\n\n log_path = save_error(e)\n\n console.error(\n f\"Error loading extra_overlay_function {extra_config}. Error saved to {log_path}\"\n )\n\n return config_overlay\n\n\ndef default_overlay_component() -> Component:\n \"\"\"Default overlay_component attribute for App.\n\n Returns:\n The default overlay_component, which is a connection_modal.\n \"\"\"\n from reflex.components.component import memo\n\n def default_overlay_components():\n return Fragment.create(\n connection_pulser(),\n connection_toaster(),\n *(\n [backend_disabled()]\n if get_compile_context() == constants.CompileContext.DEPLOY\n else []\n ),\n *codespaces.codespaces_auto_redirect(),\n )\n\n return Fragment.create(memo(default_overlay_components)())\n\n\ndef default_error_boundary(*children: Component, **props) -> Component:\n \"\"\"Default error_boundary attribute for App.\n\n Args:\n *children: The children to render in the error boundary.\n **props: The props to pass to the error boundary.\n\n Returns:\n The default error_boundary, which is an ErrorBoundary.\n\n \"\"\"\n return ErrorBoundary.create(\n *children,\n **props,\n )\n\n\n@dataclasses.dataclass(frozen=True)\nclass UploadFile(StarletteUploadFile):\n \"\"\"A file uploaded to the server.\n\n Args:\n file: The standard Python file object (non-async).\n filename: The original file name.\n size: The size of the file in bytes.\n headers: The headers of the request.\n \"\"\"\n\n file: BinaryIO\n\n path: Path | None = dataclasses.field(default=None)\n\n size: int | None = dataclasses.field(default=None)\n\n headers: Headers = dataclasses.field(default_factory=Headers)\n\n @property\n def filename(self) -> str | None:\n \"\"\"Get the name of the uploaded file.\n\n Returns:\n The name of the uploaded file.\n \"\"\"\n return self.name\n\n @property\n def name(self) -> str | None:\n \"\"\"Get the name of the uploaded file.\n\n Returns:\n The name of the uploaded file.\n \"\"\"\n if self.path:\n return self.path.name\n return None\n\n\n@dataclasses.dataclass(\n frozen=True,\n)\nclass UnevaluatedPage:\n \"\"\"An uncompiled page.\"\"\"\n\n component: Component | ComponentCallable\n route: str\n title: Var | str | None\n description: Var | str | None\n image: str\n on_load: EventType[()] | None\n meta: Sequence[Mapping[str, Any] | Component]\n context: Mapping[str, Any]\n\n def merged_with(self, other: UnevaluatedPage) -> UnevaluatedPage:\n \"\"\"Merge the other page into this one.\n\n Args:\n other: The other page to merge with.\n\n Returns:\n The merged page.\n \"\"\"\n return dataclasses.replace(\n self,\n title=self.title if self.title is not None else other.title,\n description=self.description\n if self.description is not None\n else other.description,\n on_load=self.on_load if self.on_load is not None else other.on_load,\n context=self.context if self.context is not None else other.context,\n )\n\n\nP = ParamSpec(\"P\")\n\n\n@dataclasses.dataclass()\nclass App(MiddlewareMixin, LifespanMixin):\n \"\"\"The main Reflex app that encapsulates the backend and frontend.\n\n Every Reflex app needs an app defined in its main module.\n\n ```python\n # app.py\n import reflex as rx\n\n # Define state and pages\n ...\n\n app = rx.App(\n # Set global level style.\n style={...},\n # Set the top level theme.\n theme=rx.theme(accent_color=\"blue\"),\n )\n ```\n \"\"\"\n\n # The global [theme](https://reflex.dev/docs/styling/theming/#theme) for the entire app.\n theme: Component | None = dataclasses.field(\n default_factory=lambda: themes.theme(accent_color=\"blue\")\n )\n\n # The [global style](https://reflex.dev/docs/styling/overview/#global-styles}) for the app.\n style: ComponentStyle = dataclasses.field(default_factory=dict)\n\n # A list of URLs to [stylesheets](https://reflex.dev/docs/styling/custom-stylesheets/) to include in the app.\n stylesheets: list[str] = dataclasses.field(default_factory=list)\n\n # Whether to include CSS reset for margin and padding (defaults to True).\n reset_style: bool = dataclasses.field(default=True)\n\n # A component that is present on every page (defaults to the Connection Error banner).\n overlay_component: Component | ComponentCallable | None = dataclasses.field(\n default=None\n )\n\n # App wraps to be applied to the whole app. Expected to be a dictionary of (order, name) to a function that takes whether the state is enabled and optionally returns a component.\n app_wraps: dict[tuple[int, str], Callable[[bool], Component | None]] = (\n dataclasses.field(\n default_factory=lambda: {\n (55, \"ErrorBoundary\"): (\n lambda stateful: default_error_boundary(\n **({\"on_error\": noop()} if not stateful else {})\n )\n ),\n (5, \"Overlay\"): (\n lambda stateful: default_overlay_component() if stateful else None\n ),\n (4, \"ExtraOverlay\"): lambda stateful: extra_overlay_function(),\n }\n )\n )\n\n # Extra app wraps to be applied to the whole app.\n extra_app_wraps: dict[tuple[int, str], Callable[[bool], Component | None]] = (\n dataclasses.field(default_factory=dict)\n )\n\n # Components to add to the head of every page.\n head_components: list[Component] = dataclasses.field(default_factory=list)\n\n # The Socket.IO AsyncServer instance.\n sio: AsyncServer | None = None\n\n # The language to add to the html root tag of every page.\n html_lang: str | None = None\n\n # Attributes to add to the html root tag of every page.\n html_custom_attrs: dict[str, str] | None = None\n\n # A map from a route to an unevaluated page.\n _unevaluated_pages: dict[str, UnevaluatedPage] = dataclasses.field(\n default_factory=dict\n )\n\n # A map from a page route to the component to render. Users should use `add_page`.\n _pages: dict[str, Component] = dataclasses.field(default_factory=dict)\n\n # A mapping of pages which created states as they were being evaluated.\n _stateful_pages: dict[str, None] = dataclasses.field(default_factory=dict)\n\n # The backend API object.\n _api: Starlette | None = None\n\n # The state class to use for the app.\n _state: type[BaseState] | None = None\n\n # Whether to enable state for the app. If False, the app will not use state.\n enable_state: bool = True\n\n # Class to manage many client states.\n _state_manager: StateManager | None = None\n\n # Mapping from a route to event handlers to trigger when the page loads.\n _load_events: dict[str, list[IndividualEventType[()]]] = dataclasses.field(\n default_factory=dict\n )\n\n # Admin dashboard to view and manage the database.\n admin_dash: AdminDash | None = None\n\n # The async server name space.\n _event_namespace: EventNamespace | None = None\n\n # Background tasks that are currently running.\n _background_tasks: set[asyncio.Task] = dataclasses.field(default_factory=set)\n\n # Frontend Error Handler Function\n frontend_exception_handler: Callable[[Exception], None] = (\n default_frontend_exception_handler\n )\n\n # Backend Error Handler Function\n backend_exception_handler: Callable[\n [Exception], EventSpec | list[EventSpec] | None\n ] = default_backend_exception_handler\n\n # Put the toast provider in the app wrap.\n toaster: Component | None = dataclasses.field(default_factory=toast.provider)\n\n # Transform the ASGI app before running it.\n api_transformer: (\n Sequence[Callable[[ASGIApp], ASGIApp] | Starlette]\n | Callable[[ASGIApp], ASGIApp]\n | Starlette\n | None\n ) = None\n\n @property\n def event_namespace(self) -> EventNamespace | None:\n \"\"\"Get the event namespace.\n\n Returns:\n The event namespace.\n \"\"\"\n return self._event_namespace\n\n def __post_init__(self):\n \"\"\"Initialize the app.\n\n Raises:\n ValueError: If the event namespace is not provided in the config.\n Also, if there are multiple client subclasses of rx.BaseState(Subclasses of rx.BaseState should consist\n of the DefaultState and the client app state).\n \"\"\"\n # Special case to allow test cases have multiple subclasses of rx.BaseState.\n if not is_testing_env() and BaseState.__subclasses__() != [State]:\n # Only rx.State is allowed as Base State subclass.\n msg = \"rx.BaseState cannot be subclassed directly. Use rx.State instead\"\n raise ValueError(msg)\n\n get_config(reload=True)\n\n if \"breakpoints\" in self.style:\n set_breakpoints(self.style.pop(\"breakpoints\"))\n\n # Set up the API.\n self._api = Starlette()\n App._add_cors(self._api)\n self._add_default_endpoints()\n\n for clz in App.__mro__:\n if clz == App:\n continue\n if issubclass(clz, AppMixin):\n clz._init_mixin(self)\n\n if self.enable_state:\n self._enable_state()\n\n # Set up the admin dash.\n self._setup_admin_dash()\n\n if sys.platform == \"win32\" and not is_prod_mode():\n # Hack to fix Windows hot reload issue.\n from reflex.utils.compat import windows_hot_reload_lifespan_hack\n\n self.register_lifespan_task(windows_hot_reload_lifespan_hack)\n\n def _enable_state(self) -> None:\n \"\"\"Enable state for the app.\"\"\"\n if not self._state:\n self._state = State\n self._setup_state()\n\n def _setup_state(self) -> None:\n \"\"\"Set up the state for the app.\n\n Raises:\n RuntimeError: If the socket server is invalid.\n \"\"\"\n if not self._state:\n return\n\n config = get_config()\n\n # Set up the state manager.\n self._state_manager = StateManager.create(state=self._state)\n\n # Set up the Socket.IO AsyncServer.\n if not self.sio:\n self.sio = AsyncServer(\n async_mode=\"asgi\",\n cors_allowed_origins=(\n (\n \"*\"\n if config.cors_allowed_origins == (\"*\",)\n else list(config.cors_allowed_origins)\n )\n if config.transport == \"websocket\"\n else []\n ),\n cors_credentials=config.transport == \"websocket\",\n max_http_buffer_size=environment.REFLEX_SOCKET_MAX_HTTP_BUFFER_SIZE.get(),\n ping_interval=environment.REFLEX_SOCKET_INTERVAL.get(),\n ping_timeout=environment.REFLEX_SOCKET_TIMEOUT.get(),\n json=SimpleNamespace(\n dumps=staticmethod(format.json_dumps),\n loads=staticmethod(json.loads),\n ),\n allow_upgrades=False,\n transports=[config.transport],\n )\n elif getattr(self.sio, \"async_mode\", \"\") != \"asgi\":\n msg = f\"Custom `sio` must use `async_mode='asgi'`, not '{self.sio.async_mode}'.\"\n raise RuntimeError(msg)\n\n # Create the socket app. Note event endpoint constant replaces the default 'socket.io' path.\n socket_app = EngineIOApp(self.sio, socketio_path=\"\")\n namespace = config.get_event_namespace()\n\n # Create the event namespace and attach the main app. Not related to any paths.\n self._event_namespace = EventNamespace(namespace, self)\n\n # Register the event namespace with the socket.\n self.sio.register_namespace(self.event_namespace)\n # Mount the socket app with the API.\n if self._api:\n\n class HeaderMiddleware:\n def __init__(self, app: ASGIApp):\n self.app = app\n\n async def __call__(self, scope: Scope, receive: Receive, send: Send):\n original_send = send\n\n async def modified_send(message: Message):\n if message[\"type\"] == \"websocket.accept\":\n if scope.get(\"subprotocols\"):\n # The following *does* say \"subprotocol\" instead of \"subprotocols\", intentionally.\n message[\"subprotocol\"] = scope[\"subprotocols\"][0]\n\n headers = dict(message.get(\"headers\", []))\n header_key = b\"sec-websocket-protocol\"\n if subprotocol := headers.get(header_key):\n message[\"headers\"] = [\n *message.get(\"headers\", []),\n (header_key, subprotocol),\n ]\n\n return await original_send(message)\n\n return await self.app(scope, receive, modified_send)\n\n socket_app_with_headers = HeaderMiddleware(socket_app)\n self._api.mount(str(constants.Endpoint.EVENT), socket_app_with_headers)\n\n # Check the exception handlers\n self._validate_exception_handlers()\n\n def __repr__(self) -> str:\n \"\"\"Get the string representation of the app.\n\n Returns:\n The string representation of the app.\n \"\"\"\n return f\"\"\n\n def __call__(self) -> ASGIApp:\n \"\"\"Run the backend api instance.\n\n Returns:\n The backend api.\n\n Raises:\n ValueError: If the app has not been initialized.\n \"\"\"\n from reflex.assets import remove_stale_external_asset_symlinks\n from reflex.vars.base import GLOBAL_CACHE\n\n # Clean up stale symlinks in assets/external/ before compiling, so that\n # rx.asset(shared=True) symlink re-creation doesn't trigger further reloads.\n remove_stale_external_asset_symlinks()\n\n self._compile(prerender_routes=should_prerender_routes())\n\n config = get_config()\n\n for plugin in config.plugins:\n plugin.post_compile(app=self)\n\n # We will not be making more vars, so we can clear the global cache to free up memory.\n GLOBAL_CACHE.clear()\n\n if not self._api:\n msg = \"The app has not been initialized.\"\n raise ValueError(msg)\n\n asgi_app = self._api\n\n if environment.REFLEX_MOUNT_FRONTEND_COMPILED_APP.get():\n asgi_app.mount(\n \"/\" + config.frontend_path.strip(\"/\"),\n StaticFiles(\n directory=prerequisites.get_web_dir()\n / constants.Dirs.STATIC\n / config.frontend_path.strip(\"/\"),\n html=True,\n ),\n name=\"frontend\",\n )\n\n if self.api_transformer is not None:\n api_transformers: Sequence[Starlette | Callable[[ASGIApp], ASGIApp]] = (\n [self.api_transformer]\n if not isinstance(self.api_transformer, Sequence)\n else self.api_transformer\n )\n\n for api_transformer in api_transformers:\n if isinstance(api_transformer, Starlette):\n # Mount the api to the starlette app.\n App._add_cors(api_transformer)\n api_transformer.mount(\"\", asgi_app)\n asgi_app = api_transformer\n else:\n # Transform the asgi app.\n asgi_app = api_transformer(asgi_app)\n\n top_asgi_app = Starlette(lifespan=self._run_lifespan_tasks)\n top_asgi_app.mount(\"\", asgi_app)\n App._add_cors(top_asgi_app)\n\n return top_asgi_app\n\n def _add_default_endpoints(self):\n \"\"\"Add default api endpoints (ping).\"\"\"\n # To test the server.\n if not self._api:\n return\n\n self._api.add_route(\n str(constants.Endpoint.PING),\n ping,\n methods=[\"GET\"],\n )\n self._api.add_route(\n str(constants.Endpoint.HEALTH),\n health,\n methods=[\"GET\"],\n )\n\n def _add_optional_endpoints(self):\n \"\"\"Add optional api endpoints (_upload).\"\"\"\n from reflex.components.core.upload import Upload, get_upload_dir\n\n if not self._api:\n return\n upload_is_used_marker = (\n prerequisites.get_backend_dir() / constants.Dirs.UPLOAD_IS_USED\n )\n if Upload.is_used or upload_is_used_marker.exists():\n # To upload files.\n self._api.add_route(\n str(constants.Endpoint.UPLOAD),\n upload(self),\n methods=[\"POST\"],\n )\n\n # To access uploaded files.\n self._api.mount(\n str(constants.Endpoint.UPLOAD),\n StaticFiles(directory=get_upload_dir()),\n name=\"uploaded_files\",\n )\n\n upload_is_used_marker.parent.mkdir(parents=True, exist_ok=True)\n upload_is_used_marker.touch()\n if codespaces.is_running_in_codespaces():\n self._api.add_route(\n str(constants.Endpoint.AUTH_CODESPACE),\n codespaces.auth_codespace,\n methods=[\"GET\"],\n )\n if environment.REFLEX_ADD_ALL_ROUTES_ENDPOINT.get():\n self.add_all_routes_endpoint()\n\n @staticmethod\n def _add_cors(api: Starlette):\n \"\"\"Add CORS middleware to the app.\n\n Args:\n api: The Starlette app to add CORS middleware to.\n \"\"\"\n api.add_middleware(\n cors.CORSMiddleware,\n allow_credentials=True,\n allow_methods=[\"*\"],\n allow_headers=[\"*\"],\n allow_origins=get_config().cors_allowed_origins,\n )\n\n @property\n def state_manager(self) -> StateManager:\n \"\"\"Get the state manager.\n\n Returns:\n The initialized state manager.\n\n Raises:\n ValueError: if the state has not been initialized.\n \"\"\"\n if self._state_manager is None:\n msg = \"The state manager has not been initialized.\"\n raise ValueError(msg)\n return self._state_manager\n\n @staticmethod\n def _generate_component(component: Component | ComponentCallable) -> Component:\n \"\"\"Generate a component from a callable.\n\n Args:\n component: The component function to call or Component to return as-is.\n\n Returns:\n The generated component.\n \"\"\"\n from reflex.compiler.compiler import into_component\n\n return into_component(component)\n\n def add_page(\n self,\n component: Component | ComponentCallable | None = None,\n route: str | None = None,\n title: str | Var | None = None,\n description: str | Var | None = None,\n image: str = constants.DefaultPage.IMAGE,\n on_load: EventType[()] | None = None,\n meta: Sequence[Mapping[str, Any] | Component] = constants.DefaultPage.META_LIST,\n context: dict[str, Any] | None = None,\n ):\n \"\"\"Add a page to the app.\n\n If the component is a callable, by default the route is the name of the\n function. Otherwise, a route must be provided.\n\n Args:\n component: The component to display at the page.\n route: The route to display the component at.\n title: The title of the page.\n description: The description of the page.\n image: The image to display on the page.\n on_load: The event handler(s) that will be called each time the page load.\n meta: The metadata of the page.\n context: Values passed to page for custom page-specific logic.\n\n Raises:\n PageValueError: When the component is not set for a non-404 page.\n RouteValueError: When the specified route name already exists.\n \"\"\"\n # If the route is not set, get it from the callable.\n if route is None:\n if not isinstance(component, Callable):\n msg = \"Route must be set if component is not a callable.\"\n raise exceptions.RouteValueError(msg)\n # Format the route.\n route = format.format_route(format.to_kebab_case(component.__name__))\n else:\n route = format.format_route(route)\n\n if route == constants.Page404.SLUG:\n if component is None:\n from reflex.components.el.elements import span\n\n component = span(\"404: Page not found\")\n component = self._generate_component(component)\n title = title or constants.Page404.TITLE\n description = description or constants.Page404.DESCRIPTION\n image = image or constants.Page404.IMAGE\n else:\n if component is None:\n msg = \"Component must be set for a non-404 page.\"\n raise exceptions.PageValueError(msg)\n\n # Check if the route given is valid\n verify_route_validity(route)\n\n unevaluated_page = UnevaluatedPage(\n component=component,\n route=route,\n title=title,\n description=description,\n image=image,\n on_load=on_load,\n meta=meta,\n context=context or {},\n )\n\n if route in self._unevaluated_pages:\n if self._unevaluated_pages[route].component is component:\n unevaluated_page = unevaluated_page.merged_with(\n self._unevaluated_pages[route]\n )\n console.warn(\n f\"Page {route} is being redefined with the same component.\"\n )\n else:\n route_name = (\n f\"`{route}` or `/`\"\n if route == constants.PageNames.INDEX_ROUTE\n else f\"`{route}`\"\n )\n existing_component = self._unevaluated_pages[route].component\n msg = (\n f\"Tried to add page {readable_name_from_component(component)} with route {route_name} but \"\n f\"page {readable_name_from_component(existing_component)} with the same route already exists. \"\n \"Make sure you do not have two pages with the same route.\"\n )\n raise exceptions.RouteValueError(msg)\n\n # Setup dynamic args for the route.\n # this state assignment is only required for tests using the deprecated state kwarg for App\n state = self._state or State\n state.setup_dynamic_args(get_route_args(route))\n\n self._load_events[route] = (\n (on_load if isinstance(on_load, list) else [on_load])\n if on_load is not None\n else []\n )\n\n self._unevaluated_pages[route] = unevaluated_page\n\n def _compile_page(self, route: str, save_page: bool = True):\n \"\"\"Compile a page.\n\n Args:\n route: The route of the page to compile.\n save_page: If True, the compiled page is saved to self._pages.\n \"\"\"\n n_states_before = len(all_base_state_classes)\n component = compiler.compile_unevaluated_page(\n route, self._unevaluated_pages[route], self.style, self.theme\n )\n\n # Indicate that evaluating this page creates one or more state classes.\n if len(all_base_state_classes) > n_states_before:\n self._stateful_pages[route] = None\n\n # Add the page.\n self._check_routes_conflict(route)\n if save_page:\n self._pages[route] = component\n\n @functools.cached_property\n def router(self) -> Callable[[str], str | None]:\n \"\"\"Get the route computer function.\n\n Returns:\n The route computer function.\n \"\"\"\n from reflex.route import get_router\n\n return get_router(list(dict.fromkeys([*self._unevaluated_pages, *self._pages])))\n\n def get_load_events(self, path: str) -> list[IndividualEventType[()]]:\n \"\"\"Get the load events for a route.\n\n Args:\n path: The route to get the load events for.\n\n Returns:\n The load events for the route.\n \"\"\"\n four_oh_four_load_events = self._load_events.get(\"404\", [])\n route = self.router(path)\n if not route:\n # If the path is not a valid route, return the 404 page load events.\n return four_oh_four_load_events\n return self._load_events.get(\n route,\n four_oh_four_load_events,\n )\n\n def _check_routes_conflict(self, new_route: str):\n \"\"\"Verify if there is any conflict between the new route and any existing route.\n\n Based on conflicts that React Router would throw if not intercepted.\n\n Args:\n new_route: the route being newly added.\n\n Raises:\n RouteValueError: exception showing which conflict exist with the route to be added\n \"\"\"\n from reflex.utils.exceptions import RouteValueError\n\n if \"[\" not in new_route:\n return\n\n segments = (\n constants.RouteRegex.SINGLE_SEGMENT,\n constants.RouteRegex.DOUBLE_SEGMENT,\n constants.RouteRegex.DOUBLE_CATCHALL_SEGMENT,\n )\n for route in self._pages:\n replaced_route = replace_brackets_with_keywords(route)\n for rw, r, nr in zip(\n replaced_route.split(\"/\"),\n route.split(\"/\"),\n new_route.split(\"/\"),\n strict=False,\n ):\n if rw in segments and r != nr:\n # If the slugs in the segments of both routes are not the same, then the route is invalid\n msg = f\"You cannot use different slug names for the same dynamic path in {route} and {new_route} ('{r}' != '{nr}')\"\n raise RouteValueError(msg)\n if rw not in segments and r != nr:\n # if the section being compared in both routes is not a dynamic segment(i.e not wrapped in brackets)\n # then we are guaranteed that the route is valid and there's no need checking the rest.\n # eg. /posts/[id]/info/[slug1] and /posts/[id]/info1/[slug1] is always going to be valid since\n # info1 will break away into its own tree.\n break\n\n def _setup_admin_dash(self):\n \"\"\"Setup the admin dash.\"\"\"\n try:\n from starlette_admin.contrib.sqla.admin import Admin\n from starlette_admin.contrib.sqla.view import ModelView\n\n from reflex.model import Model\n except ImportError:\n return\n\n # Get the admin dash.\n if not self._api:\n return\n\n admin_dash = self.admin_dash\n\n if admin_dash and admin_dash.models:\n # Build the admin dashboard\n admin = admin_dash.admin or Admin(\n engine=Model.get_db_engine(),\n title=\"Reflex Admin Dashboard\",\n logo_url=\"https://reflex.dev/Reflex.svg\",\n )\n\n for model in admin_dash.models:\n view = admin_dash.view_overrides.get(model, ModelView)\n admin.add_view(view(model))\n\n admin.mount_to(self._api)\n\n def _get_frontend_packages(self, imports: dict[str, set[ImportVar]]):\n \"\"\"Gets the frontend packages to be installed and filters out the unnecessary ones.\n\n Args:\n imports: A dictionary containing the imports used in the current page.\n\n Example:\n >>> _get_frontend_packages({\"react\": \"16.14.0\", \"react-dom\": \"16.14.0\"})\n \"\"\"\n dependencies = constants.PackageJson.DEPENDENCIES\n dev_dependencies = constants.PackageJson.DEV_DEPENDENCIES\n page_imports = {\n i\n for i, tags in imports.items()\n if i not in dependencies\n and i not in dev_dependencies\n and not any(i.startswith(prefix) for prefix in [\"/\", \"$/\", \".\"])\n and i != \"\"\n and any(tag.install for tag in tags)\n }\n pinned = {i.rpartition(\"@\")[0] for i in page_imports if \"@\" in i}\n page_imports = {i for i in page_imports if i not in pinned}\n\n frontend_packages = get_config().frontend_packages\n filtered_frontend_packages = []\n for package in frontend_packages:\n if package in page_imports:\n console.warn(\n f\"React packages and their dependencies are inferred from Component.library and Component.lib_dependencies, remove `{package}` from `frontend_packages`\"\n )\n continue\n filtered_frontend_packages.append(package)\n page_imports.update(filtered_frontend_packages)\n js_runtimes.install_frontend_packages(page_imports, get_config())\n\n def _app_root(self, app_wrappers: dict[tuple[int, str], Component]) -> Component:\n for component in tuple(app_wrappers.values()):\n app_wrappers.update(component._get_all_app_wrap_components())\n order = sorted(app_wrappers, key=operator.itemgetter(0), reverse=True)\n root = copy.deepcopy(app_wrappers[order[0]])\n\n def reducer(parent: Component, key: tuple[int, str]) -> Component:\n child = copy.deepcopy(app_wrappers[key])\n parent.children.append(child)\n return child\n\n functools.reduce(\n lambda parent, key: reducer(parent, key),\n order[1:],\n root,\n )\n return root\n\n def _should_compile(self) -> bool:\n \"\"\"Check if the app should be compiled.\n\n Returns:\n Whether the app should be compiled.\n \"\"\"\n # Check the environment variable.\n if environment.REFLEX_SKIP_COMPILE.get():\n return False\n\n nocompile = prerequisites.get_web_dir() / constants.NOCOMPILE_FILE\n\n # Check the nocompile file.\n if nocompile.exists():\n # Delete the nocompile file\n nocompile.unlink(missing_ok=True)\n return False\n\n # By default, compile the app.\n return True\n\n def _add_overlay_to_component(\n self, component: Component, overlay_component: Component\n ) -> Component:\n children = component.children\n\n if children[0] == overlay_component:\n return component\n\n return Fragment.create(overlay_component, *children)\n\n def _setup_overlay_component(self):\n \"\"\"If a State is not used and no overlay_component is specified, do not render the connection modal.\"\"\"\n if self.overlay_component is None:\n return\n console.deprecate(\n feature_name=\"overlay_component\",\n reason=\"Use `extra_app_wraps` to add the overlay component instead.\",\n deprecation_version=\"0.8.2\",\n removal_version=\"0.9.0\",\n )\n overlay_component = self._generate_component(self.overlay_component)\n for k, component in self._pages.items():\n self._pages[k] = self._add_overlay_to_component(\n component, overlay_component\n )\n\n def _setup_sticky_badge(self):\n \"\"\"Add the sticky badge to the app.\"\"\"\n from reflex.components.component import memo\n\n @memo\n def memoized_badge():\n sticky_badge = sticky()\n sticky_badge._add_style_recursive({})\n return sticky_badge\n\n self.app_wraps[0, \"StickyBadge\"] = lambda _: memoized_badge()\n\n def _apply_decorated_pages(self):\n \"\"\"Add @rx.page decorated pages to the app.\"\"\"\n app_name = get_config().app_name\n for render, kwargs in DECORATED_PAGES[app_name]:\n self.add_page(render, **kwargs)\n\n def _validate_var_dependencies(self, state: type[BaseState] | None = None) -> None:\n \"\"\"Validate the dependencies of the vars in the app.\n\n Args:\n state: The state to validate the dependencies for.\n\n Raises:\n VarDependencyError: When a computed var has an invalid dependency.\n \"\"\"\n if not self._state:\n return\n\n if not state:\n state = self._state\n\n for var in state.computed_vars.values():\n if not var._cache:\n continue\n deps = var._deps(objclass=state)\n for state_name, dep_set in deps.items():\n state_cls = (\n state.get_root_state().get_class_substate(state_name)\n if state_name != state.get_full_name()\n else state\n )\n for dep in dep_set:\n if dep not in state_cls.vars and dep not in state_cls.backend_vars:\n msg = f\"ComputedVar {var._name} on state {state.__name__} has an invalid dependency {state_name}.{dep}\"\n raise exceptions.VarDependencyError(msg)\n\n for substate in state.class_subclasses:\n self._validate_var_dependencies(substate)\n\n def _compile(\n self,\n prerender_routes: bool = False,\n dry_run: bool = False,\n use_rich: bool = True,\n ):\n \"\"\"Compile the app and output it to the pages folder.\n\n Args:\n prerender_routes: Whether to prerender the routes.\n dry_run: Whether to compile the app without saving it.\n use_rich: Whether to use rich progress bars.\n\n Raises:\n ReflexRuntimeError: When any page uses state, but no rx.State subclass is defined.\n FileNotFoundError: When a plugin requires a file that does not exist.\n \"\"\"\n from reflex.utils.exceptions import ReflexRuntimeError\n\n self._apply_decorated_pages()\n\n self._pages = {}\n\n def get_compilation_time() -> str:\n return str(datetime.now().time()).split(\".\")[0]\n\n should_compile = self._should_compile()\n backend_dir = prerequisites.get_backend_dir()\n if not dry_run and not should_compile and backend_dir.exists():\n stateful_pages_marker = backend_dir / constants.Dirs.STATEFUL_PAGES\n if stateful_pages_marker.exists():\n with stateful_pages_marker.open(\"r\") as f:\n stateful_pages = json.load(f)\n for route in stateful_pages:\n console.debug(f\"BE Evaluating stateful page: {route}\")\n self._compile_page(route, save_page=False)\n self._add_optional_endpoints()\n return\n\n # Render a default 404 page if the user didn't supply one\n if constants.Page404.SLUG not in self._unevaluated_pages:\n self.add_page(route=constants.Page404.SLUG)\n\n # Fix up the style.\n self.style = evaluate_style_namespaces(self.style)\n\n # Add the app wrappers.\n app_wrappers: dict[tuple[int, str], Component] = {\n # Default app wrap component renders {children}\n (0, \"AppWrap\"): AppWrap.create()\n }\n\n if self.theme is not None:\n # If a theme component was provided, wrap the app with it\n app_wrappers[20, \"Theme\"] = self.theme\n\n # Get the env mode.\n config = get_config()\n\n if config.react_strict_mode:\n app_wrappers[200, \"StrictMode\"] = StrictMode.create()\n\n if not should_compile and not dry_run:\n with console.timing(\"Evaluate Pages (Backend)\"):\n for route in self._unevaluated_pages:\n console.debug(f\"Evaluating page: {route}\")\n self._compile_page(route, save_page=should_compile)\n\n # Save the pages which created new states at eval time.\n self._write_stateful_pages_marker()\n\n # Add the optional endpoints (_upload)\n self._add_optional_endpoints()\n\n return\n\n # Create a progress bar.\n progress = (\n Progress(\n *Progress.get_default_columns()[:-1],\n MofNCompleteColumn(),\n TimeElapsedColumn(),\n )\n if use_rich\n else console.PoorProgress()\n )\n\n # try to be somewhat accurate - but still not 100%\n adhoc_steps_without_executor = 7\n fixed_pages_within_executor = 4\n plugin_count = len(config.plugins)\n progress.start()\n task = progress.add_task(\n f\"[{get_compilation_time()}] Compiling:\",\n total=len(self._unevaluated_pages)\n + ((len(self._unevaluated_pages) + len(self._pages)) * 3)\n + fixed_pages_within_executor\n + adhoc_steps_without_executor\n + plugin_count,\n )\n\n with console.timing(\"Evaluate Pages (Frontend)\"):\n performance_metrics: list[tuple[str, float]] = []\n for route in self._unevaluated_pages:\n console.debug(f\"Evaluating page: {route}\")\n start = timer()\n self._compile_page(route, save_page=should_compile)\n end = timer()\n performance_metrics.append((route, end - start))\n progress.advance(task)\n console.debug(\n \"Slowest pages:\\n\"\n + \"\\n\".join(\n f\"{route}: {time * 1000:.1f}ms\"\n for route, time in sorted(\n performance_metrics, key=operator.itemgetter(1), reverse=True\n )[:10]\n )\n )\n # Save the pages which created new states at eval time.\n self._write_stateful_pages_marker()\n\n # Add the optional endpoints (_upload)\n self._add_optional_endpoints()\n\n self._validate_var_dependencies()\n self._setup_overlay_component()\n\n if config.show_built_with_reflex is None:\n if (\n get_compile_context() == constants.CompileContext.DEPLOY\n and prerequisites.get_user_tier() in [\"pro\", \"team\", \"enterprise\"]\n ):\n config.show_built_with_reflex = False\n else:\n config.show_built_with_reflex = True\n\n if is_prod_mode() and config.show_built_with_reflex:\n self._setup_sticky_badge()\n\n progress.advance(task)\n\n # Store the compile results.\n compile_results: list[tuple[str, str]] = []\n\n progress.advance(task)\n\n # Track imports found.\n all_imports = {}\n\n if (toaster := self.toaster) is not None:\n from reflex.components.component import memo\n\n @memo\n def memoized_toast_provider():\n return toaster\n\n toast_provider = Fragment.create(memoized_toast_provider())\n\n app_wrappers[44, \"ToasterProvider\"] = toast_provider\n\n # Add the app wraps to the app.\n for key, app_wrap in chain(\n self.app_wraps.items(), self.extra_app_wraps.items()\n ):\n # If the app wrap is a callable, generate the component\n component = app_wrap(self._state is not None)\n if component is not None:\n app_wrappers[key] = component\n\n # Compile custom components.\n (\n memo_components_output,\n memo_components_result,\n memo_components_imports,\n ) = compiler.compile_memo_components(dict.fromkeys(CUSTOM_COMPONENTS.values()))\n compile_results.append((memo_components_output, memo_components_result))\n all_imports.update(memo_components_imports)\n progress.advance(task)\n\n with console.timing(\"Collect all imports and app wraps\"):\n # This has to happen before compiling stateful components as that\n # prevents recursive functions from reaching all components.\n for component in self._pages.values():\n # Add component._get_all_imports() to all_imports.\n all_imports.update(component._get_all_imports())\n\n # Add the app wrappers from this component.\n app_wrappers.update(component._get_all_app_wrap_components())\n\n progress.advance(task)\n\n # Perform auto-memoization of stateful components.\n with console.timing(\"Auto-memoize StatefulComponents\"):\n (\n stateful_components_path,\n stateful_components_code,\n page_components,\n ) = compiler.compile_stateful_components(\n self._pages.values(),\n progress_function=lambda task=task: progress.advance(task),\n )\n progress.advance(task)\n\n # Catch \"static\" apps (that do not define a rx.State subclass) which are trying to access rx.State.\n if code_uses_state_contexts(stateful_components_code) and self._state is None:\n msg = (\n \"To access rx.State in frontend components, at least one \"\n \"subclass of rx.State must be defined in the app.\"\n )\n raise ReflexRuntimeError(msg)\n compile_results.append((stateful_components_path, stateful_components_code))\n\n progress.advance(task)\n\n # Compile the root document before fork.\n compile_results.append(\n compiler.compile_document_root(\n self.head_components,\n html_lang=self.html_lang,\n html_custom_attrs=(\n {\"suppressHydrationWarning\": True, **self.html_custom_attrs}\n if self.html_custom_attrs\n else {\"suppressHydrationWarning\": True}\n ),\n )\n )\n\n progress.advance(task)\n\n # Copy the assets.\n assets_src = Path.cwd() / constants.Dirs.APP_ASSETS\n if assets_src.is_dir() and not dry_run:\n with console.timing(\"Copy assets\"):\n path_ops.update_directory_tree(\n src=assets_src,\n dest=(\n Path.cwd() / prerequisites.get_web_dir() / constants.Dirs.PUBLIC\n ),\n )\n\n executor = ExecutorType.get_executor_from_environment()\n\n for route, component in zip(self._pages, page_components, strict=True):\n ExecutorSafeFunctions.COMPONENTS[route] = component\n\n modify_files_tasks: list[tuple[str, str, Callable[[str], str]]] = []\n\n with console.timing(\"Compile to Javascript\"), executor as executor:\n result_futures: list[\n concurrent.futures.Future[\n list[tuple[str, str]] | tuple[str, str] | None\n ]\n ] = []\n\n def _submit_work(\n fn: Callable[P, list[tuple[str, str]] | tuple[str, str] | None],\n *args: P.args,\n **kwargs: P.kwargs,\n ):\n f = executor.submit(fn, *args, **kwargs)\n f.add_done_callback(lambda _: progress.advance(task))\n result_futures.append(f)\n\n # Compile the pre-compiled pages.\n for route in self._pages:\n _submit_work(\n ExecutorSafeFunctions.compile_page,\n route,\n )\n\n # Compile the root stylesheet with base styles.\n _submit_work(\n compiler.compile_root_stylesheet, self.stylesheets, self.reset_style\n )\n\n # Compile the theme.\n _submit_work(compile_theme, self.style)\n\n def _submit_work_without_advancing(\n fn: Callable[P, list[tuple[str, str]] | tuple[str, str] | None],\n *args: P.args,\n **kwargs: P.kwargs,\n ):\n f = executor.submit(fn, *args, **kwargs)\n result_futures.append(f)\n\n for plugin in config.plugins:\n plugin.pre_compile(\n add_save_task=_submit_work_without_advancing,\n add_modify_task=(\n lambda *args, plugin=plugin: modify_files_tasks.append((\n plugin.__class__.__module__ + plugin.__class__.__name__,\n *args,\n ))\n ),\n unevaluated_pages=list(self._unevaluated_pages.values()),\n )\n\n # Wait for all compilation tasks to complete.\n for future in concurrent.futures.as_completed(result_futures):\n if (result := future.result()) is not None:\n if isinstance(result, list):\n compile_results.extend(result)\n else:\n compile_results.append(result)\n\n progress.advance(task, advance=len(config.plugins))\n\n app_root = self._app_root(app_wrappers=app_wrappers)\n\n # Get imports from AppWrap components.\n all_imports.update(app_root._get_all_imports())\n\n progress.advance(task)\n\n # Compile the contexts.\n compile_results.append(\n compiler.compile_contexts(self._state, self.theme),\n )\n if self.theme is not None:\n # Fix #2992 by removing the top-level appearance prop\n self.theme.appearance = None # pyright: ignore[reportAttributeAccessIssue]\n progress.advance(task)\n\n # Compile the app root.\n compile_results.append(\n compiler.compile_app(app_root),\n )\n progress.advance(task)\n\n progress.stop()\n\n if dry_run:\n return\n\n # Install frontend packages.\n with console.timing(\"Install Frontend Packages\"):\n self._get_frontend_packages(all_imports)\n\n # Setup the react-router.config.js\n frontend_skeleton.update_react_router_config(\n prerender_routes=prerender_routes,\n )\n\n if is_prod_mode():\n # Empty the .web pages directory.\n compiler.purge_web_pages_dir()\n else:\n # In dev mode, delete removed pages and update existing pages.\n keep_files = [Path(output_path) for output_path, _ in compile_results]\n for p in Path(\n prerequisites.get_web_dir()\n / constants.Dirs.PAGES\n / constants.Dirs.ROUTES\n ).rglob(\"*\"):\n if p.is_file() and p not in keep_files:\n # Remove pages that are no longer in the app.\n p.unlink()\n\n output_mapping: dict[Path, str] = {}\n for output_path, code in compile_results:\n path = compiler_utils.resolve_path_of_web_dir(output_path)\n if path in output_mapping:\n console.warn(\n f\"Path {path} has two different outputs. The first one will be used.\"\n )\n else:\n output_mapping[path] = code\n\n for plugin in config.plugins:\n for static_file_path, content in plugin.get_static_assets():\n path = compiler_utils.resolve_path_of_web_dir(static_file_path)\n if path in output_mapping:\n console.warn(\n f\"Plugin {plugin.__class__.__name__} is trying to write to {path} but it already exists. The plugin file will be ignored.\"\n )\n else:\n output_mapping[path] = (\n content.decode(\"utf-8\")\n if isinstance(content, bytes)\n else content\n )\n\n for plugin_name, file_path, modify_fn in modify_files_tasks:\n path = compiler_utils.resolve_path_of_web_dir(file_path)\n file_content = output_mapping.get(path)\n if file_content is None:\n if path.exists():\n file_content = path.read_text()\n else:\n msg = f\"Plugin {plugin_name} is trying to modify {path} but it does not exist.\"\n raise FileNotFoundError(msg)\n output_mapping[path] = modify_fn(file_content)\n\n with console.timing(\"Write to Disk\"):\n for output_path, code in output_mapping.items():\n compiler_utils.write_file(output_path, code)\n\n def _write_stateful_pages_marker(self):\n \"\"\"Write list of routes that create dynamic states for the backend to use later.\"\"\"\n if self._state is not None:\n stateful_pages_marker = (\n prerequisites.get_backend_dir() / constants.Dirs.STATEFUL_PAGES\n )\n stateful_pages_marker.parent.mkdir(parents=True, exist_ok=True)\n with stateful_pages_marker.open(\"w\") as f:\n json.dump(list(self._stateful_pages), f)\n\n def add_all_routes_endpoint(self):\n \"\"\"Add an endpoint to the app that returns all the routes.\"\"\"\n if not self._api:\n return\n\n def all_routes(_request: Request) -> Response:\n return JSONResponse(list(self._unevaluated_pages.keys()))\n\n self._api.add_route(\n str(constants.Endpoint.ALL_ROUTES), all_routes, methods=[\"GET\"]\n )\n\n @contextlib.asynccontextmanager\n async def modify_state(\n self,\n token: str,\n background: bool = False,\n previous_dirty_vars: dict[str, set[str]] | None = None,\n **context: Unpack[StateModificationContext],\n ) -> AsyncIterator[BaseState]:\n \"\"\"Modify the state out of band.\n\n Args:\n token: The token to modify the state for.\n background: Whether the modification is happening in a background task.\n previous_dirty_vars: Vars that are considered dirty from a previous operation.\n\n Yields:\n The state to modify.\n\n Raises:\n RuntimeError: If the app has not been initialized yet.\n \"\"\"\n if self.event_namespace is None:\n msg = \"App has not been initialized yet.\"\n raise RuntimeError(msg)\n\n # Get exclusive access to the state.\n async with self.state_manager.modify_state_with_links(\n token, previous_dirty_vars=previous_dirty_vars, **context\n ) as state:\n # No other event handler can modify the state while in this context.\n yield state\n delta = await state._get_resolved_delta()\n state._clean()\n if delta:\n # When the frontend vars are modified emit the delta to the frontend.\n await self.event_namespace.emit_update(\n update=StateUpdate(\n delta=delta,\n final=True if not background else None,\n ),\n token=token,\n )\n\n def _process_background(\n self, state: BaseState, event: Event\n ) -> asyncio.Task | None:\n \"\"\"Process an event in the background and emit updates as they arrive.\n\n Args:\n state: The state to process the event for.\n event: The event to process.\n\n Returns:\n Task if the event was backgroundable, otherwise None\n \"\"\"\n substate, handler = state._get_event_handler(event)\n\n if not handler.is_background:\n return None\n\n substate = StateProxy(substate, event)\n\n async def _coro():\n \"\"\"Coroutine to process the event and emit updates inside an asyncio.Task.\n\n Raises:\n RuntimeError: If the app has not been initialized yet.\n \"\"\"\n if self.event_namespace is None:\n msg = \"App has not been initialized yet.\"\n raise RuntimeError(msg)\n\n # Process the event.\n async for update in state._process_event(\n handler=handler, state=substate, payload=event.payload\n ):\n # Postprocess the event.\n update = await self._postprocess(state, event, update)\n\n # Send the update to the client.\n await self.event_namespace.emit_update(\n update=update,\n token=event.token,\n )\n\n task = asyncio.create_task(\n _coro(),\n name=f\"reflex_background_task|{event.name}|{time.time()}|{event.token}\",\n )\n self._background_tasks.add(task)\n # Clean up task from background_tasks set when complete.\n task.add_done_callback(self._background_tasks.discard)\n return task\n\n def _validate_exception_handlers(self):\n \"\"\"Validate the custom event exception handlers for front- and backend.\n\n Raises:\n ValueError: If the custom exception handlers are invalid.\n\n \"\"\"\n frontend_arg_spec = {\n \"exception\": Exception,\n }\n\n backend_arg_spec = {\n \"exception\": Exception,\n }\n\n for handler_domain, handler_fn, handler_spec in zip(\n [\"frontend\", \"backend\"],\n [self.frontend_exception_handler, self.backend_exception_handler],\n [\n frontend_arg_spec,\n backend_arg_spec,\n ],\n strict=True,\n ):\n if hasattr(handler_fn, \"__name__\"):\n fn_name_ = handler_fn.__name__\n else:\n fn_name_ = type(handler_fn).__name__\n\n if isinstance(handler_fn, functools.partial):\n msg = f\"Provided custom {handler_domain} exception handler `{fn_name_}` is a partial function. Please provide a named function instead.\"\n raise ValueError(msg)\n\n if not callable(handler_fn):\n msg = f\"Provided custom {handler_domain} exception handler `{fn_name_}` is not a function.\"\n raise ValueError(msg)\n\n # Allow named functions only as lambda functions cannot be introspected\n if fn_name_ == \"\":\n msg = f\"Provided custom {handler_domain} exception handler `{fn_name_}` is a lambda function. Please use a named function instead.\"\n raise ValueError(msg)\n\n # Check if the function has the necessary annotations and types in the right order\n argspec = inspect.getfullargspec(handler_fn)\n arg_annotations = {\n k: eval(v) if isinstance(v, str) else v\n for k, v in argspec.annotations.items()\n if k not in [\"args\", \"kwargs\", \"return\"]\n }\n\n for required_arg_index, required_arg in enumerate(handler_spec):\n if required_arg not in arg_annotations:\n msg = f\"Provided custom {handler_domain} exception handler `{fn_name_}` does not take the required argument `{required_arg}`\"\n raise ValueError(msg)\n if list(arg_annotations.keys())[required_arg_index] != required_arg:\n msg = (\n f\"Provided custom {handler_domain} exception handler `{fn_name_}` has the wrong argument order.\"\n f\"Expected `{required_arg}` as the {required_arg_index + 1} argument but got `{list(arg_annotations.keys())[required_arg_index]}`\"\n )\n raise ValueError(msg)\n\n if not issubclass(arg_annotations[required_arg], Exception):\n msg = (\n f\"Provided custom {handler_domain} exception handler `{fn_name_}` has the wrong type for {required_arg} argument.\"\n f\"Expected to be `Exception` but got `{arg_annotations[required_arg]}`\"\n )\n raise ValueError(msg)\n\n # Check if the return type is valid for backend exception handler\n if handler_domain == \"backend\":\n sig = inspect.signature(self.backend_exception_handler)\n return_type = (\n eval(sig.return_annotation)\n if isinstance(sig.return_annotation, str)\n else sig.return_annotation\n )\n\n valid = bool(\n return_type == EventSpec\n or return_type == EventSpec | None\n or return_type == list[EventSpec]\n or return_type == inspect.Signature.empty\n or return_type is None\n )\n\n if not valid:\n msg = (\n f\"Provided custom {handler_domain} exception handler `{fn_name_}` has the wrong return type.\"\n f\"Expected `EventSpec | list[EventSpec] | None` but got `{return_type}`\"\n )\n raise ValueError(msg)\n\n\nasync def process(\n app: App, event: Event, sid: str, headers: dict, client_ip: str\n) -> AsyncGenerator[StateUpdate]:\n \"\"\"Process an event.\n\n Args:\n app: The app to process the event for.\n event: The event to process.\n sid: The Socket.IO session id.\n headers: The client headers.\n client_ip: The client_ip.\n\n Yields:\n The state updates after processing the event.\n\n Raises:\n Exception: If a reflex specific error occurs during processing the event.\n \"\"\"\n from reflex.utils import telemetry\n\n try:\n # Add request data to the state.\n router_data = event.router_data\n router_data.update({\n constants.RouteVar.QUERY: format.format_query_params(event.router_data),\n constants.RouteVar.CLIENT_TOKEN: event.token,\n constants.RouteVar.SESSION_ID: sid,\n constants.RouteVar.HEADERS: headers,\n constants.RouteVar.CLIENT_IP: client_ip,\n })\n # Get the state for the session exclusively.\n async with app.state_manager.modify_state_with_links(\n event.substate_token, event=event\n ) as state:\n # When this is a brand new instance of the state, signal the\n # frontend to reload before processing it.\n if (\n not state.router_data\n and event.name != get_hydrate_event(state)\n and app.event_namespace is not None\n ):\n await asyncio.create_task(\n app.event_namespace.emit(\n \"reload\",\n data=event,\n to=sid,\n ),\n name=f\"reflex_emit_reload|{event.name}|{time.time()}|{event.token}\",\n )\n return\n router_data[constants.RouteVar.PATH] = \"/\" + (\n app.router(path) or \"404\"\n if (path := router_data.get(constants.RouteVar.PATH))\n else \"404\"\n ).removeprefix(\"/\")\n # re-assign only when the value is different\n if state.router_data != router_data:\n # assignment will recurse into substates and force recalculation of\n # dependent ComputedVar (dynamic route variables)\n state.router_data = router_data\n state.router = RouterData.from_router_data(router_data)\n\n # Preprocess the event.\n update = await app._preprocess(state, event)\n\n # If there was an update, yield it.\n if update is not None:\n yield update\n\n # Only process the event if there is no update.\n else:\n if app._process_background(state, event) is not None:\n # `final=True` allows the frontend send more events immediately.\n yield StateUpdate(final=True)\n else:\n # Process the event synchronously.\n async for update in state._process(event):\n # Postprocess the event.\n update = await app._postprocess(state, event, update)\n\n # Yield the update.\n yield update\n except Exception as ex:\n telemetry.send_error(ex, context=\"backend\")\n\n app.backend_exception_handler(ex)\n raise\n\n\ndef ping(_request: Request) -> Response:\n \"\"\"Test API endpoint.\n\n Args:\n _request: The Starlette request object.\n\n Returns:\n The response.\n \"\"\"\n return JSONResponse(\"pong\")\n\n\nasync def health(_request: Request) -> JSONResponse:\n \"\"\"Health check endpoint to assess the status of the database and Redis services.\n\n Args:\n _request: The Starlette request object.\n\n Returns:\n JSONResponse: A JSON object with the health status:\n - \"status\" (bool): Overall health, True if all checks pass.\n - \"db\" (bool or str): Database status - True, False, or \"NA\".\n - \"redis\" (bool or str): Redis status - True, False, or \"NA\".\n \"\"\"\n health_status = {\"status\": True}\n status_code = 200\n\n tasks = []\n\n if prerequisites.check_db_used():\n from reflex.model import get_db_status\n\n tasks.append(run_in_thread(get_db_status))\n if prerequisites.check_redis_used():\n tasks.append(prerequisites.get_redis_status())\n\n results = await asyncio.gather(*tasks)\n\n for result in results:\n health_status |= result\n\n if \"redis\" in health_status and health_status[\"redis\"] is None:\n health_status[\"redis\"] = False\n\n if not all(health_status.values()):\n health_status[\"status\"] = False\n status_code = 503\n\n return JSONResponse(content=health_status, status_code=status_code)\n\n\nclass _UploadStreamingResponse(StreamingResponse):\n \"\"\"Streaming response that always releases upload form resources.\"\"\"\n\n _on_finish: Callable[[], Awaitable[None]]\n\n def __init__(\n self,\n *args: Any,\n on_finish: Callable[[], Awaitable[None]],\n **kwargs: Any,\n ) -> None:\n super().__init__(*args, **kwargs)\n self._on_finish = on_finish\n\n async def __call__(self, scope: Scope, receive: Receive, send: Send) -> None:\n try:\n await super().__call__(scope, receive, send)\n finally:\n await self._on_finish()\n\n\ndef upload(app: App):\n \"\"\"Upload a file.\n\n Args:\n app: The app to upload the file for.\n\n Returns:\n The upload function.\n \"\"\"\n\n async def upload_file(request: Request):\n \"\"\"Upload a file.\n\n Args:\n request: The Starlette request object.\n\n Returns:\n StreamingResponse yielding newline-delimited JSON of StateUpdate\n emitted by the upload handler.\n\n Raises:\n UploadValueError: if there are no args with supported annotation.\n UploadTypeError: if a background task is used as the handler.\n HTTPException: when the request does not include token / handler headers.\n \"\"\"\n from reflex.utils.exceptions import UploadTypeError, UploadValueError\n\n # Get the files from the request.\n try:\n form_data = await request.form()\n except ClientDisconnect:\n return Response() # user cancelled\n\n form_data_closed = False\n\n async def _close_form_data() -> None:\n \"\"\"Close the parsed form data exactly once.\"\"\"\n nonlocal form_data_closed\n if form_data_closed:\n return\n form_data_closed = True\n await form_data.close()\n\n async def _create_upload_event() -> Event:\n \"\"\"Create an upload event using the live Starlette temp files.\n\n Returns:\n The upload event backed by the original temp files.\n \"\"\"\n files = form_data.getlist(\"files\")\n if not files:\n msg = \"No files were uploaded.\"\n raise UploadValueError(msg)\n\n token = request.headers.get(\"reflex-client-token\")\n handler = request.headers.get(\"reflex-event-handler\")\n\n if not token or not handler:\n raise HTTPException(\n status_code=400,\n detail=\"Missing reflex-client-token or reflex-event-handler header.\",\n )\n\n # Get the state for the session.\n substate_token = _substate_key(token, handler.rpartition(\".\")[0])\n state = await app.state_manager.get_state(substate_token)\n\n handler_upload_param = ()\n\n _current_state, event_handler = state._get_event_handler(handler)\n\n if event_handler.is_background:\n msg = f\"@rx.event(background=True) is not supported for upload handler `{handler}`.\"\n raise UploadTypeError(msg)\n func = event_handler.fn\n if isinstance(func, functools.partial):\n func = func.func\n for k, v in get_type_hints(func).items():\n if types.is_generic_alias(v) and types._issubclass(\n get_args(v)[0],\n UploadFile,\n ):\n handler_upload_param = (k, v)\n break\n\n if not handler_upload_param:\n msg = (\n f\"`{handler}` handler should have a parameter annotated as \"\n \"list[rx.UploadFile]\"\n )\n raise UploadValueError(msg)\n\n # Keep the parsed form data alive until the upload event finishes so\n # the underlying Starlette temp files remain available to the handler.\n file_uploads = []\n for file in files:\n if not isinstance(file, StarletteUploadFile):\n raise UploadValueError(\n \"Uploaded file is not an UploadFile.\" + str(file)\n )\n file_uploads.append(\n UploadFile(\n file=file.file,\n path=Path(file.filename.lstrip(\"/\")) if file.filename else None,\n size=file.size,\n headers=file.headers,\n )\n )\n\n return Event(\n token=token,\n name=handler,\n payload={handler_upload_param[0]: file_uploads},\n )\n\n event: Event | None = None\n try:\n event = await _create_upload_event()\n finally:\n if event is None:\n await _close_form_data()\n\n async def _ndjson_updates():\n \"\"\"Process the upload event, generating ndjson updates.\n\n Yields:\n Each state update as JSON followed by a new line.\n \"\"\"\n # Process the event.\n async with app.state_manager.modify_state_with_links(\n event.substate_token, event=event\n ) as state:\n async for update in state._process(event):\n # Postprocess the event.\n update = await app._postprocess(state, event, update)\n yield update.json() + \"\\n\"\n\n # Stream updates to client\n return _UploadStreamingResponse(\n _ndjson_updates(),\n media_type=\"application/x-ndjson\",\n on_finish=_close_form_data,\n )\n\n return upload_file\n\n\nclass EventNamespace(AsyncNamespace):\n \"\"\"The event namespace.\"\"\"\n\n # The application object.\n app: App\n\n def __init__(self, namespace: str, app: App):\n \"\"\"Initialize the event namespace.\n\n Args:\n namespace: The namespace.\n app: The application object.\n \"\"\"\n super().__init__(namespace)\n self.app = app\n\n # Use TokenManager for distributed duplicate tab prevention\n self._token_manager = TokenManager.create()\n\n @property\n def token_to_sid(self) -> Mapping[str, str]:\n \"\"\"Get token to SID mapping for backward compatibility.\n\n Note: this mapping is read-only.\n\n Returns:\n The token to SID mapping.\n \"\"\"\n # For backward compatibility, expose the underlying dict\n return self._token_manager.token_to_sid\n\n @property\n def sid_to_token(self) -> dict[str, str]:\n \"\"\"Get SID to token mapping for backward compatibility.\n\n Returns:\n The SID to token mapping dict.\n \"\"\"\n # For backward compatibility, expose the underlying dict\n return self._token_manager.sid_to_token\n\n async def on_connect(self, sid: str, environ: dict):\n \"\"\"Event for when the websocket is connected.\n\n Args:\n sid: The Socket.IO session id.\n environ: The request information, including HTTP headers.\n \"\"\"\n if isinstance(self._token_manager, RedisTokenManager):\n # Make sure this instance is watching for updates from other instances.\n self._token_manager.ensure_lost_and_found_task(self.emit_update)\n query_params = urllib.parse.parse_qs(environ.get(\"QUERY_STRING\", \"\"))\n token_list = query_params.get(\"token\", [])\n if token_list:\n await self.link_token_to_sid(sid, token_list[0])\n else:\n console.warn(f\"No token provided in connection for session {sid}\")\n\n subprotocol = environ.get(\"HTTP_SEC_WEBSOCKET_PROTOCOL\")\n if subprotocol and subprotocol != constants.Reflex.VERSION:\n console.warn(\n f\"Frontend version {subprotocol} for session {sid} does not match the backend version {constants.Reflex.VERSION}.\"\n )\n\n def on_disconnect(self, sid: str) -> asyncio.Task | None:\n \"\"\"Event for when the websocket disconnects.\n\n Args:\n sid: The Socket.IO session id.\n\n Returns:\n An asyncio Task for cleaning up the token, or None.\n \"\"\"\n # Get token before cleaning up\n disconnect_token = self.sid_to_token.get(sid)\n if disconnect_token:\n # Use async cleanup through token manager\n task = asyncio.create_task(\n self._token_manager.disconnect_token(disconnect_token, sid),\n name=f\"reflex_disconnect_token|{disconnect_token}|{time.time()}\",\n )\n # Don't await to avoid blocking disconnect, but handle potential errors\n task.add_done_callback(\n lambda t: (\n t.exception()\n and console.error(f\"Token cleanup error: {t.exception()}\")\n )\n )\n return task\n return None\n\n async def emit_update(self, update: StateUpdate, token: str) -> None:\n \"\"\"Emit an update to the client.\n\n Args:\n update: The state update to send.\n token: The client token (tab) associated with the event.\n \"\"\"\n client_token, _ = _split_substate_key(token)\n socket_record = self._token_manager.token_to_socket.get(client_token)\n if (\n socket_record is None\n or socket_record.instance_id != self._token_manager.instance_id\n ):\n if isinstance(self._token_manager, RedisTokenManager):\n # The socket belongs to another instance of the app, send it to the lost and found.\n if not await self._token_manager.emit_lost_and_found(\n client_token, update\n ):\n console.warn(\n f\"Failed to send delta to lost and found for client {token!r}\"\n )\n else:\n # If the socket record is None, we are not connected to a client. Prevent sending\n # updates to all clients.\n console.warn(\n f\"Attempting to send delta to disconnected client {token!r}\"\n )\n return\n # Creating a task prevents the update from being blocked behind other coroutines.\n await asyncio.create_task(\n self.emit(str(constants.SocketEvent.EVENT), update, to=socket_record.sid),\n name=f\"reflex_emit_event|{token}|{socket_record.sid}|{time.time()}\",\n )\n\n async def on_event(self, sid: str, data: Any):\n \"\"\"Event for receiving front-end websocket events.\n\n Args:\n sid: The Socket.IO session id.\n data: The event data.\n\n Raises:\n RuntimeError: If the Socket.IO is badly initialized.\n EventDeserializationError: If the event data is not a dictionary.\n \"\"\"\n fields = data\n\n if isinstance(fields, str):\n console.warn(\n \"Received event data as a string. This generally should not happen and may indicate a bug.\"\n f\" Event data: {fields}\"\n )\n try:\n fields = json.loads(fields)\n except json.JSONDecodeError as ex:\n msg = f\"Failed to deserialize event data: {fields}.\"\n raise exceptions.EventDeserializationError(msg) from ex\n\n if not isinstance(fields, dict):\n msg = f\"Event data must be a dictionary, but received {fields} of type {type(fields)}.\"\n raise exceptions.EventDeserializationError(msg)\n\n try:\n # Get the event.\n event = Event(**{k: v for k, v in fields.items() if k in _EVENT_FIELDS})\n except (TypeError, ValueError) as ex:\n msg = f\"Failed to deserialize event data: {fields}.\"\n raise exceptions.EventDeserializationError(msg) from ex\n\n # Correct the token if it doesn't match what we expect for this SID\n expected_token = self.sid_to_token.get(sid)\n if expected_token and event.token != expected_token:\n # Create new event with corrected token since Event is frozen\n from dataclasses import replace\n\n event = replace(event, token=expected_token)\n\n # Get the event environment.\n if self.app.sio is None:\n msg = \"Socket.IO is not initialized.\"\n raise RuntimeError(msg)\n environ = self.app.sio.get_environ(sid, self.namespace)\n if environ is None:\n msg = \"Socket.IO environ is not initialized.\"\n raise RuntimeError(msg)\n\n # Get the client headers.\n headers = {\n k.decode(\"utf-8\"): v.decode(\"utf-8\")\n for (k, v) in environ[\"asgi.scope\"][\"headers\"]\n }\n\n # Get the client IP\n try:\n client_ip = environ[\"asgi.scope\"][\"client\"][0]\n headers[\"asgi-scope-client\"] = client_ip\n except (KeyError, IndexError):\n client_ip = environ.get(\"REMOTE_ADDR\", \"0.0.0.0\")\n\n # Unroll reverse proxy forwarded headers.\n client_ip = (\n headers\n .get(\n \"x-forwarded-for\",\n client_ip,\n )\n .partition(\",\")[0]\n .strip()\n )\n\n async with contextlib.aclosing(\n process(self.app, event, sid, headers, client_ip)\n ) as updates_gen:\n # Process the events.\n async for update in updates_gen:\n # Emit the update from processing the event.\n await self.emit_update(update=update, token=event.token)\n\n async def on_ping(self, sid: str):\n \"\"\"Event for testing the API endpoint.\n\n Args:\n sid: The Socket.IO session id.\n \"\"\"\n # Emit the test event.\n await self.emit(str(constants.SocketEvent.PING), \"pong\", to=sid)\n\n async def link_token_to_sid(self, sid: str, token: str):\n \"\"\"Link a token to a session id.\n\n Args:\n sid: The Socket.IO session id.\n token: The client token.\n \"\"\"\n # Use TokenManager for duplicate detection and Redis support\n new_token = await self._token_manager.link_token_to_sid(token, sid)\n\n if new_token:\n # Duplicate detected, emit new token to client\n await self.emit(\"new_token\", new_token, to=sid)\n\n # Update client state to apply new sid/token for running background tasks.\n async with self.app.state_manager.modify_state(\n _substate_key(new_token or token, self.app.state_manager.state)\n ) as state:\n state.router_data[constants.RouteVar.SESSION_ID] = sid\n state.router = RouterData.from_router_data(state.router_data)\n" }, { "path": "reflex/app_mixins/__init__.py", "content": "\"\"\"Reflex AppMixins package.\"\"\"\n\nfrom .lifespan import LifespanMixin\nfrom .middleware import MiddlewareMixin\nfrom .mixin import AppMixin\n" }, { "path": "reflex/app_mixins/lifespan.py", "content": "\"\"\"Mixin that allow tasks to run during the whole app lifespan.\"\"\"\n\nfrom __future__ import annotations\n\nimport asyncio\nimport contextlib\nimport dataclasses\nimport functools\nimport inspect\nimport time\nfrom collections.abc import Callable, Coroutine\n\nfrom starlette.applications import Starlette\n\nfrom reflex.utils import console\nfrom reflex.utils.exceptions import InvalidLifespanTaskTypeError\n\nfrom .mixin import AppMixin\n\n\n@dataclasses.dataclass\nclass LifespanMixin(AppMixin):\n \"\"\"A Mixin that allow tasks to run during the whole app lifespan.\"\"\"\n\n # Lifespan tasks that are planned to run.\n lifespan_tasks: set[asyncio.Task | Callable] = dataclasses.field(\n default_factory=set\n )\n\n @contextlib.asynccontextmanager\n async def _run_lifespan_tasks(self, app: Starlette):\n running_tasks = []\n try:\n async with contextlib.AsyncExitStack() as stack:\n for task in self.lifespan_tasks:\n run_msg = f\"Started lifespan task: {task.__name__} as {{type}}\" # pyright: ignore [reportAttributeAccessIssue]\n if isinstance(task, asyncio.Task):\n running_tasks.append(task)\n else:\n task_name = task.__name__\n signature = inspect.signature(task)\n if \"app\" in signature.parameters:\n task = functools.partial(task, app=app)\n t_ = task()\n if isinstance(t_, contextlib._AsyncGeneratorContextManager):\n await stack.enter_async_context(t_)\n console.debug(run_msg.format(type=\"asynccontextmanager\"))\n elif isinstance(t_, Coroutine):\n task_ = asyncio.create_task(\n t_,\n name=f\"reflex_lifespan_task|{task_name}|{time.time()}\",\n )\n task_.add_done_callback(lambda t: t.result())\n running_tasks.append(task_)\n console.debug(run_msg.format(type=\"coroutine\"))\n else:\n console.debug(run_msg.format(type=\"function\"))\n yield\n finally:\n for task in running_tasks:\n console.debug(f\"Canceling lifespan task: {task}\")\n task.cancel(msg=\"lifespan_cleanup\")\n # Disassociate sid / token pairings so they can be reconnected properly.\n try:\n event_namespace = self.event_namespace # pyright: ignore[reportAttributeAccessIssue]\n except AttributeError:\n pass\n else:\n try:\n if event_namespace:\n await event_namespace._token_manager.disconnect_all()\n except Exception as e:\n console.error(f\"Error during lifespan cleanup: {e}\")\n # Flush any pending writes from the state manager.\n try:\n state_manager = self.state_manager # pyright: ignore[reportAttributeAccessIssue]\n except AttributeError:\n pass\n else:\n await state_manager.close()\n\n def register_lifespan_task(self, task: Callable | asyncio.Task, **task_kwargs):\n \"\"\"Register a task to run during the lifespan of the app.\n\n Args:\n task: The task to register.\n **task_kwargs: The kwargs of the task.\n\n Raises:\n InvalidLifespanTaskTypeError: If the task is a generator function.\n \"\"\"\n if inspect.isgeneratorfunction(task) or inspect.isasyncgenfunction(task):\n msg = f\"Task {task.__name__} of type generator must be decorated with contextlib.asynccontextmanager.\"\n raise InvalidLifespanTaskTypeError(msg)\n\n task_name = task.__name__ # pyright: ignore [reportAttributeAccessIssue]\n if task_kwargs:\n original_task = task\n task = functools.partial(task, **task_kwargs) # pyright: ignore [reportArgumentType]\n functools.update_wrapper(task, original_task) # pyright: ignore [reportArgumentType]\n self.lifespan_tasks.add(task)\n console.debug(f\"Registered lifespan task: {task_name}\")\n" }, { "path": "reflex/app_mixins/middleware.py", "content": "\"\"\"Middleware Mixin that allow to add middleware to the app.\"\"\"\n\nfrom __future__ import annotations\n\nimport dataclasses\nimport inspect\n\nfrom reflex.event import Event\nfrom reflex.middleware import HydrateMiddleware, Middleware\nfrom reflex.state import BaseState, StateUpdate\n\nfrom .mixin import AppMixin\n\n\n@dataclasses.dataclass\nclass MiddlewareMixin(AppMixin):\n \"\"\"Middleware Mixin that allow to add middleware to the app.\"\"\"\n\n # Middleware to add to the app. Users should use `add_middleware`.\n _middlewares: list[Middleware] = dataclasses.field(default_factory=list)\n\n def _init_mixin(self):\n self._middlewares.append(HydrateMiddleware())\n\n def add_middleware(self, middleware: Middleware, index: int | None = None):\n \"\"\"Add middleware to the app.\n\n Args:\n middleware: The middleware to add.\n index: The index to add the middleware at.\n \"\"\"\n if index is None:\n self._middlewares.append(middleware)\n else:\n self._middlewares.insert(index, middleware)\n\n async def _preprocess(self, state: BaseState, event: Event) -> StateUpdate | None:\n \"\"\"Preprocess the event.\n\n This is where middleware can modify the event before it is processed.\n Each middleware is called in the order it was added to the app.\n\n If a middleware returns an update, the event is not processed and the\n update is returned.\n\n Args:\n state: The state to preprocess.\n event: The event to preprocess.\n\n Returns:\n An optional state to return.\n \"\"\"\n for middleware in self._middlewares:\n out = middleware.preprocess(app=self, state=state, event=event) # pyright: ignore [reportArgumentType]\n if inspect.isawaitable(out):\n out = await out\n if out is not None:\n return out\n return None\n\n async def _postprocess(\n self, state: BaseState, event: Event, update: StateUpdate\n ) -> StateUpdate:\n \"\"\"Postprocess the event.\n\n This is where middleware can modify the delta after it is processed.\n Each middleware is called in the order it was added to the app.\n\n Args:\n state: The state to postprocess.\n event: The event to postprocess.\n update: The current state update.\n\n Returns:\n The state update to return.\n \"\"\"\n out = update\n for middleware in self._middlewares:\n out = middleware.postprocess(\n app=self, # pyright: ignore [reportArgumentType]\n state=state,\n event=event,\n update=update,\n )\n if inspect.isawaitable(out):\n out = await out\n return out # pyright: ignore[reportReturnType]\n" }, { "path": "reflex/app_mixins/mixin.py", "content": "\"\"\"Default mixin for all app mixins.\"\"\"\n\nimport dataclasses\n\n\n@dataclasses.dataclass\nclass AppMixin:\n \"\"\"Define the base class for all app mixins.\"\"\"\n\n def _init_mixin(self):\n \"\"\"Initialize the mixin.\n\n Any App mixin can override this method to perform any initialization.\n \"\"\"\n" }, { "path": "reflex/assets.py", "content": "\"\"\"Helper functions for adding assets to the app.\"\"\"\n\nimport inspect\nfrom pathlib import Path\n\nfrom reflex import constants\nfrom reflex.environment import EnvironmentVariables\n\n\ndef remove_stale_external_asset_symlinks():\n \"\"\"Remove broken symlinks and empty directories in assets/external/.\n\n When a Python module directory that uses rx.asset(shared=True) is renamed\n or deleted, stale symlinks remain in assets/external/ pointing to the old\n path. This cleanup prevents issues with file watchers detecting symlink\n re-creation during import.\n \"\"\"\n external_dir = (\n Path.cwd() / constants.Dirs.APP_ASSETS / constants.Dirs.EXTERNAL_APP_ASSETS\n )\n if not external_dir.exists():\n return\n\n # Remove broken symlinks.\n broken = [\n p\n for p in external_dir.rglob(\"*\")\n if p.is_symlink() and not p.resolve().exists()\n ]\n for path in broken:\n path.unlink()\n\n # Remove empty directories left behind (deepest first).\n for dirpath in sorted(external_dir.rglob(\"*\"), reverse=True):\n if dirpath.is_dir() and not dirpath.is_symlink() and not any(dirpath.iterdir()):\n dirpath.rmdir()\n\n\ndef asset(\n path: str,\n shared: bool = False,\n subfolder: str | None = None,\n _stack_level: int = 1,\n) -> str:\n \"\"\"Add an asset to the app, either shared as a symlink or local.\n\n Shared/External/Library assets:\n Place the file next to your including python file.\n Links the file to the app's external assets directory.\n\n Example:\n ```python\n # my_custom_javascript.js is a shared asset located next to the including python file.\n rx.script(src=rx.asset(path=\"my_custom_javascript.js\", shared=True))\n rx.image(src=rx.asset(path=\"test_image.png\", shared=True, subfolder=\"subfolder\"))\n ```\n\n Local/Internal assets:\n Place the file in the app's assets/ directory.\n\n Example:\n ```python\n # local_image.png is an asset located in the app's assets/ directory. It cannot be shared when developing a library.\n rx.image(src=rx.asset(path=\"local_image.png\"))\n ```\n\n Args:\n path: The relative path of the asset.\n subfolder: The directory to place the shared asset in.\n shared: Whether to expose the asset to other apps.\n _stack_level: The stack level to determine the calling file, defaults to\n the immediate caller 1. When using rx.asset via a helper function,\n increase this number for each helper function in the stack.\n\n Returns:\n The relative URL to the asset.\n\n Raises:\n FileNotFoundError: If the file does not exist.\n ValueError: If subfolder is provided for local assets.\n \"\"\"\n assets = constants.Dirs.APP_ASSETS\n backend_only = EnvironmentVariables.REFLEX_BACKEND_ONLY.get()\n\n # Local asset handling\n if not shared:\n cwd = Path.cwd()\n src_file_local = cwd / assets / path\n if subfolder is not None:\n msg = \"Subfolder is not supported for local assets.\"\n raise ValueError(msg)\n if not backend_only and not src_file_local.exists():\n msg = f\"File not found: {src_file_local}\"\n raise FileNotFoundError(msg)\n return f\"/{path}\"\n\n # Shared asset handling\n # Determine the file by which the asset is exposed.\n frame = inspect.stack()[_stack_level]\n calling_file = frame.filename\n module = inspect.getmodule(frame[0])\n assert module is not None\n\n external = constants.Dirs.EXTERNAL_APP_ASSETS\n src_file_shared = Path(calling_file).parent / path\n if not src_file_shared.exists():\n msg = f\"File not found: {src_file_shared}\"\n raise FileNotFoundError(msg)\n\n caller_module_path = module.__name__.replace(\".\", \"/\")\n subfolder = f\"{caller_module_path}/{subfolder}\" if subfolder else caller_module_path\n\n # Symlink the asset to the app's external assets directory if running frontend.\n if not backend_only:\n # Create the asset folder in the currently compiling app.\n asset_folder = Path.cwd() / assets / external / subfolder\n asset_folder.mkdir(parents=True, exist_ok=True)\n\n dst_file = asset_folder / path\n\n if not dst_file.exists() and (\n not dst_file.is_symlink() or dst_file.resolve() != src_file_shared.resolve()\n ):\n try:\n dst_file.symlink_to(src_file_shared)\n except FileExistsError:\n # This happens when Simon builds the app on a bind mount in a docker container.\n dst_file.unlink()\n dst_file.symlink_to(src_file_shared)\n\n return f\"/{external}/{subfolder}/{path}\"\n" }, { "path": "reflex/base.py", "content": "\"\"\"Define the base Reflex class.\"\"\"\n\nfrom importlib.util import find_spec\n\nif find_spec(\"pydantic\") and find_spec(\"pydantic.v1\"):\n from pydantic.v1 import BaseModel\n\n from reflex.utils.compat import ModelMetaclassLazyAnnotations\n\n class Base(BaseModel, metaclass=ModelMetaclassLazyAnnotations):\n \"\"\"The base class subclassed by all Reflex classes.\n\n This class wraps Pydantic and provides common methods such as\n serialization and setting fields.\n\n Any data structure that needs to be transferred between the\n frontend and backend should subclass this class.\n \"\"\"\n\n class Config:\n \"\"\"Pydantic config.\"\"\"\n\n arbitrary_types_allowed = True\n use_enum_values = True\n extra = \"allow\"\n\n def __init_subclass__(cls):\n \"\"\"Warn that rx.Base is deprecated.\"\"\"\n from reflex.utils import console\n\n console.deprecate(\n feature_name=\"rx.Base\",\n reason=f\"{cls!r} is subclassing rx.Base. You can subclass from `pydantic.BaseModel` directly instead or use dataclasses if possible.\",\n deprecation_version=\"0.8.15\",\n removal_version=\"0.9.0\",\n )\n super().__init_subclass__()\n\n def json(self) -> str:\n \"\"\"Convert the object to a json string.\n\n Returns:\n The object as a json string.\n \"\"\"\n from reflex.utils.serializers import serialize\n\n return self.__config__.json_dumps(\n self.dict(),\n default=serialize,\n )\n\nelse:\n\n class PydanticNotFoundFallback:\n \"\"\"Fallback base class for environments without Pydantic.\"\"\"\n\n def __init__(self, *args, **kwargs):\n \"\"\"Initialize the base class.\n\n Args:\n *args: Positional arguments.\n **kwargs: Keyword arguments.\n\n Raises:\n ImportError: As Pydantic is not installed.\n \"\"\"\n msg = (\n \"Pydantic is not installed. Please install it to use rx.Base.\"\n \"You can install it with `pip install pydantic`.\"\n )\n raise ImportError(msg)\n\n Base = PydanticNotFoundFallback # pyright: ignore[reportAssignmentType]\n" }, { "path": "reflex/compiler/__init__.py", "content": "\"\"\"The Reflex compiler.\"\"\"\n" }, { "path": "reflex/compiler/compiler.py", "content": "\"\"\"Compiler for the reflex apps.\"\"\"\n\nfrom __future__ import annotations\n\nimport sys\nfrom collections.abc import Callable, Iterable, Sequence\nfrom inspect import getmodule\nfrom pathlib import Path\nfrom typing import TYPE_CHECKING, Any\n\nfrom reflex import constants\nfrom reflex.compiler import templates, utils\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import (\n BaseComponent,\n Component,\n ComponentStyle,\n CustomComponent,\n StatefulComponent,\n)\nfrom reflex.config import get_config\nfrom reflex.constants.compiler import PageNames, ResetStylesheet\nfrom reflex.constants.state import FIELD_MARKER\nfrom reflex.environment import environment\nfrom reflex.state import BaseState\nfrom reflex.style import SYSTEM_COLOR_MODE\nfrom reflex.utils import console, path_ops\nfrom reflex.utils.exceptions import ReflexError\nfrom reflex.utils.exec import is_prod_mode\nfrom reflex.utils.format import to_title_case\nfrom reflex.utils.imports import ImportVar, ParsedImportDict\nfrom reflex.utils.prerequisites import get_web_dir\nfrom reflex.vars.base import LiteralVar, Var\n\n\ndef _apply_common_imports(\n imports: dict[str, list[ImportVar]],\n):\n imports.setdefault(\"@emotion/react\", []).append(ImportVar(\"jsx\"))\n imports.setdefault(\"react\", []).extend(\n [ImportVar(\"Fragment\"), ImportVar(\"useEffect\")],\n )\n\n\ndef _compile_document_root(root: Component) -> str:\n \"\"\"Compile the document root.\n\n Args:\n root: The document root to compile.\n\n Returns:\n The compiled document root.\n \"\"\"\n document_root_imports = root._get_all_imports()\n _apply_common_imports(document_root_imports)\n return templates.document_root_template(\n imports=utils.compile_imports(document_root_imports),\n document=root.render(),\n )\n\n\ndef _normalize_library_name(lib: str) -> str:\n \"\"\"Normalize the library name.\n\n Args:\n lib: The library name to normalize.\n\n Returns:\n The normalized library name.\n \"\"\"\n if lib == \"react\":\n return \"React\"\n return lib.replace(\"$/\", \"\").replace(\"@\", \"\").replace(\"/\", \"_\").replace(\"-\", \"_\")\n\n\ndef _compile_app(app_root: Component) -> str:\n \"\"\"Compile the app template component.\n\n Args:\n app_root: The app root to compile.\n\n Returns:\n The compiled app.\n \"\"\"\n from reflex.components.dynamic import bundled_libraries\n\n window_libraries = [\n (_normalize_library_name(name), name) for name in bundled_libraries\n ]\n\n window_libraries_deduped = list(dict.fromkeys(window_libraries))\n\n app_root_imports = app_root._get_all_imports()\n _apply_common_imports(app_root_imports)\n\n return templates.app_root_template(\n imports=utils.compile_imports(app_root_imports),\n custom_codes=app_root._get_all_custom_code(),\n hooks=app_root._get_all_hooks(),\n window_libraries=window_libraries_deduped,\n render=app_root.render(),\n dynamic_imports=app_root._get_all_dynamic_imports(),\n )\n\n\ndef _compile_theme(theme: str) -> str:\n \"\"\"Compile the theme.\n\n Args:\n theme: The theme to compile.\n\n Returns:\n The compiled theme.\n \"\"\"\n return templates.theme_template(theme=theme)\n\n\ndef _compile_contexts(state: type[BaseState] | None, theme: Component | None) -> str:\n \"\"\"Compile the initial state and contexts.\n\n Args:\n state: The app state.\n theme: The top-level app theme.\n\n Returns:\n The compiled context file.\n \"\"\"\n appearance = getattr(theme, \"appearance\", None)\n if appearance is None or str(LiteralVar.create(appearance)) == '\"inherit\"':\n appearance = LiteralVar.create(SYSTEM_COLOR_MODE)\n\n return (\n templates.context_template(\n initial_state=utils.compile_state(state),\n state_name=state.get_name(),\n client_storage=utils.compile_client_storage(state),\n is_dev_mode=not is_prod_mode(),\n default_color_mode=str(appearance),\n )\n if state\n else templates.context_template(\n is_dev_mode=not is_prod_mode(),\n default_color_mode=str(appearance),\n )\n )\n\n\ndef _compile_page(component: BaseComponent) -> str:\n \"\"\"Compile the component.\n\n Args:\n component: The component to compile.\n\n Returns:\n The compiled component.\n \"\"\"\n imports = component._get_all_imports()\n _apply_common_imports(imports)\n imports = utils.compile_imports(imports)\n\n # Compile the code to render the component.\n return templates.page_template(\n imports=imports,\n dynamic_imports=sorted(component._get_all_dynamic_imports()),\n custom_codes=component._get_all_custom_code(),\n hooks=component._get_all_hooks(),\n render=component.render(),\n )\n\n\ndef compile_root_stylesheet(\n stylesheets: list[str], reset_style: bool = True\n) -> tuple[str, str]:\n \"\"\"Compile the root stylesheet.\n\n Args:\n stylesheets: The stylesheets to include in the root stylesheet.\n reset_style: Whether to include CSS reset for margin and padding.\n\n Returns:\n The path and code of the compiled root stylesheet.\n \"\"\"\n output_path = utils.get_root_stylesheet_path()\n\n code = _compile_root_stylesheet(stylesheets, reset_style)\n\n return output_path, code\n\n\ndef _validate_stylesheet(stylesheet_full_path: Path, assets_app_path: Path) -> None:\n \"\"\"Validate the stylesheet.\n\n Args:\n stylesheet_full_path: The stylesheet to validate.\n assets_app_path: The path to the assets directory.\n\n Raises:\n ValueError: If the stylesheet is not supported.\n FileNotFoundError: If the stylesheet is not found.\n \"\"\"\n suffix = stylesheet_full_path.suffix[1:] if stylesheet_full_path.suffix else \"\"\n if suffix not in constants.Reflex.STYLESHEETS_SUPPORTED:\n msg = f\"Stylesheet file {stylesheet_full_path} is not supported.\"\n raise ValueError(msg)\n if not stylesheet_full_path.absolute().is_relative_to(assets_app_path.absolute()):\n msg = f\"Cannot include stylesheets from outside the assets directory: {stylesheet_full_path}\"\n raise FileNotFoundError(msg)\n if not stylesheet_full_path.name:\n msg = f\"Stylesheet file name cannot be empty: {stylesheet_full_path}\"\n raise ValueError(msg)\n if (\n len(\n stylesheet_full_path\n .absolute()\n .relative_to(assets_app_path.absolute())\n .parts\n )\n == 1\n and stylesheet_full_path.stem == PageNames.STYLESHEET_ROOT\n ):\n msg = f\"Stylesheet file name cannot be '{PageNames.STYLESHEET_ROOT}': {stylesheet_full_path}\"\n raise ValueError(msg)\n\n\nRADIX_THEMES_STYLESHEET = \"@radix-ui/themes/styles.css\"\n\n\ndef _compile_root_stylesheet(stylesheets: list[str], reset_style: bool = True) -> str:\n \"\"\"Compile the root stylesheet.\n\n Args:\n stylesheets: The stylesheets to include in the root stylesheet.\n reset_style: Whether to include CSS reset for margin and padding.\n\n Returns:\n The compiled root stylesheet.\n\n Raises:\n FileNotFoundError: If a specified stylesheet in assets directory does not exist.\n \"\"\"\n # Add stylesheets from plugins.\n sheets = []\n\n # Add CSS reset if enabled\n if reset_style:\n # Reference the vendored style reset file (automatically copied from .templates/web)\n sheets.append(f\"./{ResetStylesheet.FILENAME}\")\n\n sheets.extend(\n [RADIX_THEMES_STYLESHEET]\n + [\n sheet\n for plugin in get_config().plugins\n for sheet in plugin.get_stylesheet_paths()\n ]\n )\n\n failed_to_import_sass = False\n assets_app_path = Path.cwd() / constants.Dirs.APP_ASSETS\n\n stylesheets_files: list[Path] = []\n stylesheets_urls = []\n\n for stylesheet in stylesheets:\n if not utils.is_valid_url(stylesheet):\n # check if stylesheet provided exists.\n stylesheet_full_path = assets_app_path / stylesheet.strip(\"/\")\n\n if not stylesheet_full_path.exists():\n msg = f\"The stylesheet file {stylesheet_full_path} does not exist.\"\n raise FileNotFoundError(msg)\n\n if stylesheet_full_path.is_dir():\n all_files = (\n file\n for ext in constants.Reflex.STYLESHEETS_SUPPORTED\n for file in stylesheet_full_path.rglob(\"*.\" + ext)\n )\n for file in all_files:\n if file.is_dir():\n continue\n # Validate the stylesheet.\n _validate_stylesheet(file, assets_app_path)\n stylesheets_files.append(file)\n\n else:\n # Validate the stylesheet.\n _validate_stylesheet(stylesheet_full_path, assets_app_path)\n stylesheets_files.append(stylesheet_full_path)\n else:\n stylesheets_urls.append(stylesheet)\n\n sheets.extend(dict.fromkeys(stylesheets_urls))\n\n for stylesheet in stylesheets_files:\n target_path = stylesheet.relative_to(assets_app_path).with_suffix(\".css\")\n target = get_web_dir() / constants.Dirs.STYLES / target_path\n\n target.parent.mkdir(parents=True, exist_ok=True)\n\n if stylesheet.suffix == \".css\":\n path_ops.cp(src=stylesheet, dest=target, overwrite=True)\n else:\n try:\n from sass import compile as sass_compile\n\n target.write_text(\n data=sass_compile(\n filename=str(stylesheet),\n output_style=\"compressed\",\n ),\n encoding=\"utf8\",\n )\n except ImportError:\n failed_to_import_sass = True\n\n str_target_path = \"./\" + str(target_path)\n sheets.append(str_target_path) if str_target_path not in sheets else None\n\n if failed_to_import_sass:\n console.error(\n 'The `libsass` package is required to compile sass/scss stylesheet files. Run `pip install \"libsass>=0.23.0\"`.'\n )\n\n return templates.styles_template(stylesheets=sheets)\n\n\ndef _compile_component(component: Component | StatefulComponent) -> str:\n \"\"\"Compile a single component.\n\n Args:\n component: The component to compile.\n\n Returns:\n The compiled component.\n \"\"\"\n return templates.component_template(component=component)\n\n\ndef _compile_memo_components(\n components: Iterable[CustomComponent],\n) -> tuple[str, dict[str, list[ImportVar]]]:\n \"\"\"Compile the components.\n\n Args:\n components: The components to compile.\n\n Returns:\n The compiled components.\n \"\"\"\n imports = {\n \"react\": [ImportVar(tag=\"memo\")],\n f\"$/{constants.Dirs.STATE_PATH}\": [ImportVar(tag=\"isTrue\")],\n }\n component_renders = []\n\n # Compile each component.\n for component in components:\n component_render, component_imports = utils.compile_custom_component(component)\n component_renders.append(component_render)\n imports = utils.merge_imports(imports, component_imports)\n\n _apply_common_imports(imports)\n\n dynamic_imports = {\n comp_import: None\n for comp_render in component_renders\n if \"dynamic_imports\" in comp_render\n for comp_import in comp_render[\"dynamic_imports\"]\n }\n\n custom_codes = {\n comp_custom_code: None\n for comp_render in component_renders\n for comp_custom_code in comp_render.get(\"custom_code\", [])\n }\n\n # Compile the components page.\n return (\n templates.memo_components_template(\n imports=utils.compile_imports(imports),\n components=component_renders,\n dynamic_imports=sorted(dynamic_imports),\n custom_codes=custom_codes,\n ),\n imports,\n )\n\n\ndef _get_shared_components_recursive(\n component: BaseComponent,\n rendered_components: dict[str, None],\n all_import_dicts: list[ParsedImportDict],\n):\n \"\"\"Get the shared components for a component and its children.\n\n A shared component is a StatefulComponent that appears in 2 or more\n pages and is a candidate for writing to a common file and importing\n into each page where it is used.\n\n Args:\n component: The component to collect shared StatefulComponents for.\n rendered_components: A dict to store the rendered shared components in.\n all_import_dicts: A list to store the imports of all shared components in.\n \"\"\"\n for child in component.children:\n # Depth-first traversal.\n _get_shared_components_recursive(child, rendered_components, all_import_dicts)\n\n # When the component is referenced by more than one page, render it\n # to be included in the STATEFUL_COMPONENTS module.\n # Skip this step in dev mode, thereby avoiding potential hot reload errors for larger apps\n if isinstance(component, StatefulComponent) and component.references > 1:\n # Reset this flag to render the actual component.\n component.rendered_as_shared = False\n\n # Include dynamic imports in the shared component.\n if dynamic_imports := component._get_all_dynamic_imports():\n rendered_components.update(dict.fromkeys(dynamic_imports))\n\n # Include custom code in the shared component.\n rendered_components.update(component._get_all_custom_code(export=True))\n\n # Include all imports in the shared component.\n all_import_dicts.append(component._get_all_imports())\n\n # Indicate that this component now imports from the shared file.\n component.rendered_as_shared = True\n\n\ndef _compile_stateful_components(\n page_components: list[BaseComponent],\n) -> str:\n \"\"\"Walk the page components and extract shared stateful components.\n\n Any StatefulComponent that is shared by more than one page will be rendered\n to a separate module and marked rendered_as_shared so subsequent\n renderings will import the component from the shared module instead of\n directly including the code for it.\n\n Args:\n page_components: The Components or StatefulComponents to compile.\n\n Returns:\n The rendered stateful components code.\n \"\"\"\n all_import_dicts = []\n rendered_components = {}\n\n for page_component in page_components:\n _get_shared_components_recursive(\n page_component, rendered_components, all_import_dicts\n )\n\n # Don't import from the file that we're about to create.\n all_imports = utils.merge_imports(*all_import_dicts)\n all_imports.pop(\n f\"$/{constants.Dirs.UTILS}/{constants.PageNames.STATEFUL_COMPONENTS}\", None\n )\n if rendered_components:\n _apply_common_imports(all_imports)\n\n return templates.stateful_components_template(\n imports=utils.compile_imports(all_imports),\n memoized_code=\"\\n\".join(rendered_components),\n )\n\n\ndef compile_document_root(\n head_components: list[Component],\n html_lang: str | None = None,\n html_custom_attrs: dict[str, Var | Any] | None = None,\n) -> tuple[str, str]:\n \"\"\"Compile the document root.\n\n Args:\n head_components: The components to include in the head.\n html_lang: The language of the document, will be added to the html root element.\n html_custom_attrs: custom attributes added to the html root element.\n\n Returns:\n The path and code of the compiled document root.\n \"\"\"\n # Get the path for the output file.\n output_path = str(\n get_web_dir() / constants.Dirs.PAGES / constants.PageNames.DOCUMENT_ROOT\n )\n\n # Create the document root.\n document_root = utils.create_document_root(\n head_components, html_lang=html_lang, html_custom_attrs=html_custom_attrs\n )\n\n # Compile the document root.\n code = _compile_document_root(document_root)\n return output_path, code\n\n\ndef compile_app(app_root: Component) -> tuple[str, str]:\n \"\"\"Compile the app root.\n\n Args:\n app_root: The app root component to compile.\n\n Returns:\n The path and code of the compiled app wrapper.\n \"\"\"\n # Get the path for the output file.\n output_path = str(\n get_web_dir() / constants.Dirs.PAGES / constants.PageNames.APP_ROOT\n )\n\n # Compile the document root.\n code = _compile_app(app_root)\n return output_path, code\n\n\ndef compile_theme(style: ComponentStyle) -> tuple[str, str]:\n \"\"\"Compile the theme.\n\n Args:\n style: The style to compile.\n\n Returns:\n The path and code of the compiled theme.\n \"\"\"\n output_path = utils.get_theme_path()\n\n # Create the theme.\n theme = utils.create_theme(style)\n\n # Compile the theme.\n code = _compile_theme(str(LiteralVar.create(theme)))\n return output_path, code\n\n\ndef compile_contexts(\n state: type[BaseState] | None,\n theme: Component | None,\n) -> tuple[str, str]:\n \"\"\"Compile the initial state / context.\n\n Args:\n state: The app state.\n theme: The top-level app theme.\n\n Returns:\n The path and code of the compiled context.\n \"\"\"\n # Get the path for the output file.\n output_path = utils.get_context_path()\n\n return output_path, _compile_contexts(state, theme)\n\n\ndef compile_page(path: str, component: BaseComponent) -> tuple[str, str]:\n \"\"\"Compile a single page.\n\n Args:\n path: The path to compile the page to.\n component: The component to compile.\n\n Returns:\n The path and code of the compiled page.\n \"\"\"\n # Get the path for the output file.\n output_path = utils.get_page_path(path)\n\n # Add the style to the component.\n code = _compile_page(component)\n return output_path, code\n\n\ndef compile_memo_components(\n components: Iterable[CustomComponent],\n) -> tuple[str, str, dict[str, list[ImportVar]]]:\n \"\"\"Compile the custom components.\n\n Args:\n components: The custom components to compile.\n\n Returns:\n The path and code of the compiled components.\n \"\"\"\n # Get the path for the output file.\n output_path = utils.get_components_path()\n\n # Compile the components.\n code, imports = _compile_memo_components(components)\n return output_path, code, imports\n\n\ndef compile_stateful_components(\n pages: Iterable[Component],\n progress_function: Callable[[], None],\n) -> tuple[str, str, list[BaseComponent]]:\n \"\"\"Separately compile components that depend on State vars.\n\n StatefulComponents are compiled as their own component functions with their own\n useContext declarations, which allows page components to be stateless and avoid\n re-rendering along with parts of the page that actually depend on state.\n\n Args:\n pages: The pages to extract stateful components from.\n progress_function: A function to call to indicate progress, called once per page.\n\n Returns:\n The path and code of the compiled stateful components.\n \"\"\"\n output_path = utils.get_stateful_components_path()\n\n page_components = []\n for page in pages:\n # Compile the stateful components\n page_component = StatefulComponent.compile_from(page) or page\n progress_function()\n page_components.append(page_component)\n\n code = _compile_stateful_components(page_components) if is_prod_mode() else \"\"\n return output_path, code, page_components\n\n\ndef purge_web_pages_dir():\n \"\"\"Empty out .web/pages directory.\"\"\"\n if not is_prod_mode() and environment.REFLEX_PERSIST_WEB_DIR.get():\n # Skip purging the web directory in dev mode if REFLEX_PERSIST_WEB_DIR is set.\n return\n\n # Empty out the web pages directory.\n utils.empty_dir(\n get_web_dir() / constants.Dirs.PAGES,\n keep_files=[\"routes.js\", \"entry.client.js\"],\n )\n\n\nif TYPE_CHECKING:\n from reflex.app import ComponentCallable, UnevaluatedPage\n\n\ndef _into_component_once(\n component: Component\n | ComponentCallable\n | tuple[Component, ...]\n | str\n | Var\n | int\n | float,\n) -> Component | None:\n \"\"\"Convert a component to a Component.\n\n Args:\n component: The component to convert.\n\n Returns:\n The converted component.\n \"\"\"\n if isinstance(component, Component):\n return component\n if isinstance(component, (Var, int, float, str)):\n return Fragment.create(component)\n if isinstance(component, Sequence):\n return Fragment.create(*component)\n return None\n\n\ndef readable_name_from_component(\n component: Component | ComponentCallable,\n) -> str | None:\n \"\"\"Get the readable name of a component.\n\n Args:\n component: The component to get the name of.\n\n Returns:\n The readable name of the component.\n \"\"\"\n if isinstance(component, Component):\n return type(component).__name__\n if isinstance(component, (Var, int, float, str)):\n return str(component)\n if isinstance(component, Sequence):\n return \", \".join(str(c) for c in component)\n if callable(component):\n module_name = getattr(component, \"__module__\", None)\n if module_name is not None:\n module = getmodule(component)\n if module is not None:\n module_name = module.__name__\n if module_name is not None:\n return f\"{module_name}.{component.__name__}\"\n return component.__name__\n return None\n\n\ndef _modify_exception(e: Exception) -> None:\n \"\"\"Modify the exception to make it more readable.\n\n Args:\n e: The exception to modify.\n \"\"\"\n if len(e.args) == 1 and isinstance((msg := e.args[0]), str):\n while (state_index := msg.find(\"reflex___\")) != -1:\n dot_index = msg.find(\".\", state_index)\n if dot_index == -1:\n break\n state_name = msg[state_index:dot_index]\n module_dot_state_name = state_name.replace(\"___\", \".\").rsplit(\"__\", 1)[-1]\n module_path, _, state_snake_case = module_dot_state_name.rpartition(\".\")\n if not state_snake_case:\n break\n actual_state_name = to_title_case(state_snake_case)\n msg = (\n f\"{msg[:state_index]}{module_path}.{actual_state_name}{msg[dot_index:]}\"\n )\n\n msg = msg.replace(FIELD_MARKER, \"\")\n\n e.args = (msg,)\n\n\ndef into_component(component: Component | ComponentCallable) -> Component:\n \"\"\"Convert a component to a Component.\n\n Args:\n component: The component to convert.\n\n Returns:\n The converted component.\n\n Raises:\n TypeError: If the component is not a Component.\n\n # noqa: DAR401\n \"\"\"\n if (converted := _into_component_once(component)) is not None:\n return converted\n if not callable(component):\n msg = f\"Expected a Component or callable, got {component!r} of type {type(component)}\"\n raise TypeError(msg)\n\n try:\n component_called = component()\n except KeyError as e:\n if isinstance(e, ReflexError):\n _modify_exception(e)\n raise\n key = e.args[0] if e.args else None\n if key is not None and isinstance(key, Var):\n raise TypeError(\n \"Cannot access a primitive map with a Var. Consider calling rx.Var.create() on the map.\"\n ).with_traceback(e.__traceback__) from None\n raise\n except TypeError as e:\n if isinstance(e, ReflexError):\n _modify_exception(e)\n raise\n message = e.args[0] if e.args else None\n if message and isinstance(message, str):\n if message.endswith(\"has no len()\") and (\n \"ArrayCastedVar\" in message\n or \"ObjectCastedVar\" in message\n or \"StringCastedVar\" in message\n ):\n raise TypeError(\n \"Cannot pass a Var to a built-in function. Consider using .length() for accessing the length of an iterable Var.\"\n ).with_traceback(e.__traceback__) from None\n if message.endswith((\n \"indices must be integers or slices, not NumberCastedVar\",\n \"indices must be integers or slices, not BooleanCastedVar\",\n )):\n raise TypeError(\n \"Cannot index into a primitive sequence with a Var. Consider calling rx.Var.create() on the sequence.\"\n ).with_traceback(e.__traceback__) from None\n if \"CastedVar\" in str(e):\n raise TypeError(\n \"Cannot pass a Var to a built-in function. Consider moving the operation to the backend, using existing Var operations, or defining a custom Var operation.\"\n ).with_traceback(e.__traceback__) from None\n raise\n except ReflexError as e:\n _modify_exception(e)\n raise\n\n if (converted := _into_component_once(component_called)) is not None:\n return converted\n\n msg = f\"Expected a Component, got {component_called!r} of type {type(component_called)}\"\n raise TypeError(msg)\n\n\ndef compile_unevaluated_page(\n route: str,\n page: UnevaluatedPage,\n style: ComponentStyle | None = None,\n theme: Component | None = None,\n) -> Component:\n \"\"\"Compiles an uncompiled page into a component and adds meta information.\n\n Args:\n route: The route of the page.\n page: The uncompiled page object.\n style: The style of the page.\n theme: The theme of the page.\n\n Returns:\n The compiled component and whether state should be enabled.\n\n Raises:\n Exception: If an error occurs while evaluating the page.\n \"\"\"\n try:\n # Generate the component if it is a callable.\n component = into_component(page.component)\n\n component._add_style_recursive(style or {}, theme)\n\n from reflex.utils.format import make_default_page_title\n\n component = Fragment.create(component)\n\n meta_args = {\n \"title\": (\n page.title\n if page.title is not None\n else make_default_page_title(get_config().app_name, route)\n ),\n \"image\": page.image,\n \"meta\": page.meta,\n }\n\n if page.description is not None:\n meta_args[\"description\"] = page.description\n\n # Add meta information to the component.\n utils.add_meta(\n component,\n **meta_args,\n )\n\n except Exception as e:\n if sys.version_info >= (3, 11):\n e.add_note(f\"Happened while evaluating page {route!r}\")\n raise\n else:\n return component\n\n\nclass ExecutorSafeFunctions:\n \"\"\"Helper class to allow parallelisation of parts of the compilation process.\n\n This class (and its class attributes) are available at global scope.\n\n In a multiprocessing context (like when using a ProcessPoolExecutor), the content of this\n global class is logically replicated to any FORKED process.\n\n How it works:\n * Before the child process is forked, ensure that we stash any input data required by any future\n function call in the child process.\n * After the child process is forked, the child process will have a copy of the global class, which\n includes the previously stashed input data.\n * Any task submitted to the child process simply needs a way to communicate which input data the\n requested function call requires.\n\n Why do we need this? Passing input data directly to child process often not possible because the input data is not picklable.\n The mechanic described here removes the need to pickle the input data at all.\n\n Limitations:\n * This can never support returning unpicklable OUTPUT data.\n * Any object mutations done by the child process will not propagate back to the parent process (fork goes one way!).\n\n \"\"\"\n\n COMPONENTS: dict[str, BaseComponent] = {}\n UNCOMPILED_PAGES: dict[str, UnevaluatedPage] = {}\n\n @classmethod\n def compile_page(cls, route: str) -> tuple[str, str]:\n \"\"\"Compile a page.\n\n Args:\n route: The route of the page to compile.\n\n Returns:\n The path and code of the compiled page.\n \"\"\"\n return compile_page(route, cls.COMPONENTS[route])\n\n @classmethod\n def compile_unevaluated_page(\n cls,\n route: str,\n style: ComponentStyle,\n theme: Component | None,\n ) -> tuple[str, Component, tuple[str, str]]:\n \"\"\"Compile an unevaluated page.\n\n Args:\n route: The route of the page to compile.\n style: The style of the page.\n theme: The theme of the page.\n\n Returns:\n The route, compiled component, and compiled page.\n \"\"\"\n component = compile_unevaluated_page(\n route, cls.UNCOMPILED_PAGES[route], style, theme\n )\n return route, component, compile_page(route, component)\n\n @classmethod\n def compile_theme(cls, style: ComponentStyle | None) -> tuple[str, str]:\n \"\"\"Compile the theme.\n\n Args:\n style: The style to compile.\n\n Returns:\n The path and code of the compiled theme.\n\n Raises:\n ValueError: If the style is not set.\n \"\"\"\n if style is None:\n msg = \"STYLE should be set\"\n raise ValueError(msg)\n return compile_theme(style)\n" }, { "path": "reflex/compiler/templates.py", "content": "\"\"\"Templates to use in the reflex compiler.\"\"\"\n\nfrom __future__ import annotations\n\nimport json\nfrom collections.abc import Iterable, Mapping\nfrom typing import TYPE_CHECKING, Any, Literal\n\nfrom reflex import constants\nfrom reflex.constants import Hooks\nfrom reflex.constants.state import CAMEL_CASE_MEMO_MARKER\nfrom reflex.utils.format import format_state_name, json_dumps\nfrom reflex.vars.base import VarData\n\nif TYPE_CHECKING:\n from reflex.compiler.utils import _ImportDict\n from reflex.components.component import Component, StatefulComponent\n\n\ndef _sort_hooks(\n hooks: dict[str, VarData | None],\n) -> tuple[list[str], list[str], list[str]]:\n \"\"\"Sort the hooks by their position.\n\n Args:\n hooks: The hooks to sort.\n\n Returns:\n The sorted hooks.\n \"\"\"\n internal_hooks = []\n pre_trigger_hooks = []\n post_trigger_hooks = []\n\n for hook, data in hooks.items():\n if data and data.position and data.position == Hooks.HookPosition.INTERNAL:\n internal_hooks.append(hook)\n elif not data or (\n not data.position\n or data.position == constants.Hooks.HookPosition.PRE_TRIGGER\n ):\n pre_trigger_hooks.append(hook)\n elif (\n data\n and data.position\n and data.position == constants.Hooks.HookPosition.POST_TRIGGER\n ):\n post_trigger_hooks.append(hook)\n\n return internal_hooks, pre_trigger_hooks, post_trigger_hooks\n\n\nclass _RenderUtils:\n @staticmethod\n def render(component: Mapping[str, Any] | str) -> str:\n if isinstance(component, str):\n return component or \"null\"\n if \"iterable\" in component:\n return _RenderUtils.render_iterable_tag(component)\n if \"match_cases\" in component:\n return _RenderUtils.render_match_tag(component)\n if \"cond_state\" in component:\n return _RenderUtils.render_condition_tag(component)\n if (contents := component.get(\"contents\")) is not None:\n return contents or \"null\"\n return _RenderUtils.render_tag(component)\n\n @staticmethod\n def render_tag(component: Mapping[str, Any]) -> str:\n name = component.get(\"name\") or \"Fragment\"\n props = f\"{{{','.join(component['props'])}}}\"\n rendered_children = [\n _RenderUtils.render(child)\n for child in component.get(\"children\", [])\n if child\n ]\n\n return f\"jsx({name},{props},{','.join(rendered_children)})\"\n\n @staticmethod\n def render_condition_tag(component: Any) -> str:\n return f\"({component['cond_state']}?({_RenderUtils.render(component['true_value'])}):({_RenderUtils.render(component['false_value'])}))\"\n\n @staticmethod\n def render_iterable_tag(component: Any) -> str:\n children_rendered = \"\".join([\n _RenderUtils.render(child) for child in component.get(\"children\", [])\n ])\n return f\"Array.prototype.map.call({component['iterable_state']} ?? [],(({component['arg_name']},{component['arg_index']})=>({children_rendered})))\"\n\n @staticmethod\n def render_match_tag(component: Any) -> str:\n cases_code = \"\"\n for conditions, return_value in component[\"match_cases\"]:\n for condition in conditions:\n cases_code += f\" case JSON.stringify({condition}):\\n\"\n cases_code += f\"\"\" return {_RenderUtils.render(return_value)};\n break;\n\"\"\"\n\n return f\"\"\"(() => {{\n switch (JSON.stringify({component[\"cond\"]})) {{\n{cases_code} default:\n return {_RenderUtils.render(component[\"default\"])};\n break;\n }}\n}})()\"\"\"\n\n @staticmethod\n def get_import(module: _ImportDict) -> str:\n default_import = module[\"default\"]\n rest_imports = module[\"rest\"]\n\n if default_import and rest_imports:\n rest_imports_str = \",\".join(sorted(rest_imports))\n return f'import {default_import}, {{{rest_imports_str}}} from \"{module[\"lib\"]}\"'\n if default_import:\n return f'import {default_import} from \"{module[\"lib\"]}\"'\n if rest_imports:\n rest_imports_str = \",\".join(sorted(rest_imports))\n return f'import {{{rest_imports_str}}} from \"{module[\"lib\"]}\"'\n return f'import \"{module[\"lib\"]}\"'\n\n\ndef rxconfig_template(app_name: str):\n \"\"\"Template for the Reflex config file.\n\n Args:\n app_name: The name of the application.\n\n Returns:\n Rendered Reflex config file content as string.\n \"\"\"\n return f\"\"\"import reflex as rx\n\nconfig = rx.Config(\n app_name=\"{app_name}\",\n plugins=[\n rx.plugins.SitemapPlugin(),\n rx.plugins.TailwindV4Plugin(),\n ]\n)\"\"\"\n\n\ndef document_root_template(*, imports: list[_ImportDict], document: dict[str, Any]):\n \"\"\"Template for the document root.\n\n Args:\n imports: List of import statements.\n document: Document root component.\n\n Returns:\n Rendered document root code as string.\n \"\"\"\n imports_rendered = \"\\n\".join([_RenderUtils.get_import(mod) for mod in imports])\n return f\"\"\"{imports_rendered}\n\nexport function Layout({{children}}) {{\n return (\n {_RenderUtils.render(document)}\n )\n}}\"\"\"\n\n\ndef app_root_template(\n *,\n imports: list[_ImportDict],\n custom_codes: Iterable[str],\n hooks: dict[str, VarData | None],\n window_libraries: list[tuple[str, str]],\n render: dict[str, Any],\n dynamic_imports: set[str],\n):\n \"\"\"Template for the App root.\n\n Args:\n imports: The list of import statements.\n custom_codes: The set of custom code snippets.\n hooks: The dictionary of hooks.\n window_libraries: The list of window libraries.\n render: The dictionary of render functions.\n dynamic_imports: The set of dynamic imports.\n\n Returns:\n Rendered App root component as string.\n \"\"\"\n imports_str = \"\\n\".join([_RenderUtils.get_import(mod) for mod in imports])\n dynamic_imports_str = \"\\n\".join(dynamic_imports)\n\n custom_code_str = \"\\n\".join(custom_codes)\n\n import_window_libraries = \"\\n\".join([\n f'import * as {lib_alias} from \"{lib_path}\";'\n for lib_alias, lib_path in window_libraries\n ])\n\n window_imports_str = \"\\n\".join([\n f' \"{lib_path}\": {lib_alias},' for lib_alias, lib_path in window_libraries\n ])\n\n return f\"\"\"\n{imports_str}\n{dynamic_imports_str}\nimport {{ EventLoopProvider, StateProvider, defaultColorMode }} from \"$/utils/context\";\nimport {{ ThemeProvider }} from '$/utils/react-theme';\nimport {{ Layout as AppLayout }} from './_document';\nimport {{ Outlet }} from 'react-router';\n{import_window_libraries}\n\n{custom_code_str}\n\nfunction AppWrap({{children}}) {{\n{_render_hooks(hooks)}\nreturn ({_RenderUtils.render(render)})\n}}\n\n\nexport function Layout({{children}}) {{\n useEffect(() => {{\n // Make contexts and state objects available globally for dynamic eval'd components\n let windowImports = {{\n {window_imports_str}\n }};\n window[\"__reflex\"] = windowImports;\n }}, []);\n\n return jsx(AppLayout, {{}},\n jsx(ThemeProvider, {{defaultTheme: defaultColorMode, attribute: \"class\"}},\n jsx(StateProvider, {{}},\n jsx(EventLoopProvider, {{}},\n jsx(AppWrap, {{}}, children)\n )\n )\n )\n );\n}}\n\nexport default function App() {{\n return jsx(Outlet, {{}});\n}}\n\n\"\"\"\n\n\ndef theme_template(theme: str):\n \"\"\"Template for the theme file.\n\n Args:\n theme: The theme to render.\n\n Returns:\n Rendered theme file content as string.\n \"\"\"\n return f\"\"\"export default {theme}\"\"\"\n\n\ndef context_template(\n *,\n is_dev_mode: bool,\n default_color_mode: str,\n initial_state: dict[str, Any] | None = None,\n state_name: str | None = None,\n client_storage: dict[str, dict[str, dict[str, Any]]] | None = None,\n):\n \"\"\"Template for the context file.\n\n Args:\n initial_state: The initial state for the context.\n state_name: The name of the state.\n client_storage: The client storage for the context.\n is_dev_mode: Whether the app is in development mode.\n default_color_mode: The default color mode for the context.\n\n Returns:\n Rendered context file content as string.\n \"\"\"\n initial_state = initial_state or {}\n state_contexts_str = \"\".join([\n f\"{format_state_name(state_name)}: createContext(null),\"\n for state_name in initial_state\n ])\n\n state_str = (\n rf\"\"\"\nexport const state_name = \"{state_name}\"\n\nexport const exception_state_name = \"{constants.CompileVars.FRONTEND_EXCEPTION_STATE_FULL}\"\n\n// These events are triggered on initial load and each page navigation.\nexport const onLoadInternalEvent = () => {{\n const internal_events = [];\n\n // Get tracked cookie and local storage vars to send to the backend.\n const client_storage_vars = hydrateClientStorage(clientStorage);\n // But only send the vars if any are actually set in the browser.\n if (client_storage_vars && Object.keys(client_storage_vars).length !== 0) {{\n internal_events.push(\n ReflexEvent(\n '{state_name}.{constants.CompileVars.UPDATE_VARS_INTERNAL}',\n {{vars: client_storage_vars}},\n ),\n );\n }}\n\n // `on_load_internal` triggers the correct on_load event(s) for the current page.\n // If the page does not define any on_load event, this will just set `is_hydrated = true`.\n internal_events.push(ReflexEvent('{state_name}.{constants.CompileVars.ON_LOAD_INTERNAL}'));\n\n return internal_events;\n}}\n\n// The following events are sent when the websocket connects or reconnects.\nexport const initialEvents = () => [\n ReflexEvent('{state_name}.{constants.CompileVars.HYDRATE}'),\n ...onLoadInternalEvent()\n]\n \"\"\"\n if state_name\n else \"\"\"\nexport const state_name = undefined\n\nexport const exception_state_name = undefined\n\nexport const onLoadInternalEvent = () => []\n\nexport const initialEvents = () => []\n\"\"\"\n )\n\n state_reducer_str = \"\\n\".join(\n rf'const [{format_state_name(state_name)}, dispatch_{format_state_name(state_name)}] = useReducer(applyDelta, initialState[\"{state_name}\"])'\n for state_name in initial_state\n )\n\n create_state_contexts_str = \"\\n\".join(\n rf\"createElement(StateContexts.{format_state_name(state_name)},{{value: {format_state_name(state_name)}}},\"\n for state_name in initial_state\n )\n\n dispatchers_str = \"\\n\".join(\n f'\"{state_name}\": dispatch_{format_state_name(state_name)},'\n for state_name in initial_state\n )\n\n return rf\"\"\"import {{ createContext, useContext, useMemo, useReducer, useState, createElement, useEffect }} from \"react\"\nimport {{ applyDelta, ReflexEvent, hydrateClientStorage, useEventLoop, refs }} from \"$/utils/state\"\nimport {{ jsx }} from \"@emotion/react\";\n\nexport const initialState = {\"{}\" if not initial_state else json_dumps(initial_state)}\n\nexport const defaultColorMode = {default_color_mode}\nexport const ColorModeContext = createContext(null);\nexport const UploadFilesContext = createContext(null);\nexport const DispatchContext = createContext(null);\nexport const StateContexts = {{{state_contexts_str}}};\nexport const EventLoopContext = createContext(null);\nexport const clientStorage = {\"{}\" if client_storage is None else json.dumps(client_storage)}\n\n{state_str}\n\nexport const isDevMode = {json.dumps(is_dev_mode)};\n\nexport function UploadFilesProvider({{ children }}) {{\n const [filesById, setFilesById] = useState({{}})\n refs[\"__clear_selected_files\"] = (id) => setFilesById(filesById => {{\n const newFilesById = {{...filesById}}\n delete newFilesById[id]\n return newFilesById\n }})\n return createElement(\n UploadFilesContext.Provider,\n {{ value: [filesById, setFilesById] }},\n children\n );\n}}\n\nexport function ClientSide(component) {{\n return ({{ children, ...props }}) => {{\n const [Component, setComponent] = useState(null);\n useEffect(() => {{\n async function load() {{\n const comp = await component();\n setComponent(() => comp);\n }}\n load();\n }}, []);\n return Component ? jsx(Component, props, children) : null;\n }};\n}}\n\nexport function EventLoopProvider({{ children }}) {{\n const dispatch = useContext(DispatchContext)\n const [addEvents, connectErrors] = useEventLoop(\n dispatch,\n initialEvents,\n clientStorage,\n )\n return createElement(\n EventLoopContext.Provider,\n {{ value: [addEvents, connectErrors] }},\n children\n );\n}}\n\nexport function StateProvider({{ children }}) {{\n {state_reducer_str}\n const dispatchers = useMemo(() => {{\n return {{\n {dispatchers_str}\n }}\n }}, [])\n\n return (\n {create_state_contexts_str}\n createElement(DispatchContext, {{value: dispatchers}}, children)\n {\")\" * len(initial_state)}\n )\n}}\"\"\"\n\n\ndef component_template(component: Component | StatefulComponent):\n \"\"\"Template to render a component tag.\n\n Args:\n component: The component to render.\n\n Returns:\n Rendered component as string.\n \"\"\"\n return _RenderUtils.render(component.render())\n\n\ndef page_template(\n imports: Iterable[_ImportDict],\n dynamic_imports: Iterable[str],\n custom_codes: Iterable[str],\n hooks: dict[str, VarData | None],\n render: dict[str, Any],\n):\n \"\"\"Template for a single react page.\n\n Args:\n imports: List of import statements.\n dynamic_imports: List of dynamic import statements.\n custom_codes: List of custom code snippets.\n hooks: Dictionary of hooks.\n render: Render function for the component.\n\n Returns:\n Rendered React page component as string.\n \"\"\"\n imports_str = \"\\n\".join([_RenderUtils.get_import(imp) for imp in imports])\n custom_code_str = \"\\n\".join(custom_codes)\n dynamic_imports_str = \"\\n\".join(dynamic_imports)\n\n hooks_str = _render_hooks(hooks)\n return f\"\"\"{imports_str}\n\n{dynamic_imports_str}\n\n{custom_code_str}\n\nexport default function Component() {{\n{hooks_str}\n\n return (\n {_RenderUtils.render(render)}\n )\n}}\"\"\"\n\n\ndef package_json_template(\n scripts: dict[str, str],\n dependencies: dict[str, str],\n dev_dependencies: dict[str, str],\n overrides: dict[str, str],\n):\n \"\"\"Template for package.json.\n\n Args:\n scripts: The scripts to include in the package.json file.\n dependencies: The dependencies to include in the package.json file.\n dev_dependencies: The devDependencies to include in the package.json file.\n overrides: The overrides to include in the package.json file.\n\n Returns:\n Rendered package.json content as string.\n \"\"\"\n return json.dumps({\n \"name\": \"reflex\",\n \"type\": \"module\",\n \"scripts\": scripts,\n \"dependencies\": dependencies,\n \"devDependencies\": dev_dependencies,\n \"overrides\": overrides,\n })\n\n\ndef vite_config_template(\n base: str,\n hmr: bool,\n force_full_reload: bool,\n experimental_hmr: bool,\n sourcemap: bool | Literal[\"inline\", \"hidden\"],\n allowed_hosts: bool | list[str] = False,\n):\n \"\"\"Template for vite.config.js.\n\n Args:\n base: The base path for the Vite config.\n hmr: Whether to enable hot module replacement.\n force_full_reload: Whether to force a full reload on changes.\n experimental_hmr: Whether to enable experimental HMR features.\n sourcemap: The sourcemap configuration.\n allowed_hosts: Allow all hosts (True), specific hosts (list of strings), or only localhost (False).\n\n Returns:\n Rendered vite.config.js content as string.\n \"\"\"\n if allowed_hosts is True:\n allowed_hosts_line = \"\\n allowedHosts: true,\"\n elif isinstance(allowed_hosts, list) and allowed_hosts:\n allowed_hosts_line = f\"\\n allowedHosts: {json.dumps(allowed_hosts)},\"\n else:\n allowed_hosts_line = \"\"\n return rf\"\"\"import {{ fileURLToPath, URL }} from \"url\";\nimport {{ reactRouter }} from \"@react-router/dev/vite\";\nimport {{ defineConfig }} from \"vite\";\nimport safariCacheBustPlugin from \"./vite-plugin-safari-cachebust\";\n\n// Ensure that bun always uses the react-dom/server.node functions.\nfunction alwaysUseReactDomServerNode() {{\n return {{\n name: \"vite-plugin-always-use-react-dom-server-node\",\n enforce: \"pre\",\n\n resolveId(source, importer) {{\n if (\n typeof importer === \"string\" &&\n importer.endsWith(\"/entry.server.node.tsx\") &&\n source.includes(\"react-dom/server\")\n ) {{\n return this.resolve(\"react-dom/server.node\", importer, {{\n skipSelf: true,\n }});\n }}\n return null;\n }},\n }};\n}}\n\nfunction fullReload() {{\n return {{\n name: \"full-reload\",\n enforce: \"pre\",\n handleHotUpdate({{ server }}) {{\n server.ws.send({{\n type: \"full-reload\",\n }});\n return [];\n }}\n }};\n}}\n\nexport default defineConfig((config) => ({{\n plugins: [\n alwaysUseReactDomServerNode(),\n reactRouter(),\n safariCacheBustPlugin(),\n ].concat({\"[fullReload()]\" if force_full_reload else \"[]\"}),\n build: {{\n assetsDir: \"{base}assets\".slice(1),\n sourcemap: {\"true\" if sourcemap is True else \"false\" if sourcemap is False else repr(sourcemap)},\n rollupOptions: {{\n onwarn(warning, warn) {{\n if (warning.code === \"EVAL\" && warning.id && warning.id.endsWith(\"state.js\")) return;\n warn(warning);\n }},\n jsx: {{}},\n output: {{\n advancedChunks: {{\n groups: [\n {{\n test: /env.json/,\n name: \"reflex-env\",\n }},\n ],\n }},\n }},\n }},\n }},\n experimental: {{\n enableNativePlugin: false,\n hmr: {\"true\" if experimental_hmr else \"false\"},\n }},\n server: {{\n port: process.env.PORT,{allowed_hosts_line}\n hmr: {\"true\" if hmr else \"false\"},\n watch: {{\n ignored: [\n \"**/.web/backend/**\",\n \"**/.web/reflex.install_frontend_packages.cached\",\n ],\n }},\n }},\n resolve: {{\n mainFields: [\"browser\", \"module\", \"jsnext\"],\n alias: [\n {{\n find: \"$\",\n replacement: fileURLToPath(new URL(\"./\", import.meta.url)),\n }},\n {{\n find: \"@\",\n replacement: fileURLToPath(new URL(\"./public\", import.meta.url)),\n }},\n ],\n }},\n}}));\"\"\"\n\n\ndef stateful_component_template(\n tag_name: str, memo_trigger_hooks: list[str], component: Component, export: bool\n):\n \"\"\"Template for stateful component.\n\n Args:\n tag_name: The tag name for the component.\n memo_trigger_hooks: The memo trigger hooks for the component.\n component: The component to render.\n export: Whether to export the component.\n\n Returns:\n Rendered stateful component code as string.\n \"\"\"\n all_hooks = component._get_all_hooks()\n return f\"\"\"\n{\"export \" if export else \"\"}function {tag_name} () {{\n {_render_hooks(all_hooks, memo_trigger_hooks)}\n return (\n {_RenderUtils.render(component.render())}\n )\n}}\n\"\"\"\n\n\ndef stateful_components_template(imports: list[_ImportDict], memoized_code: str) -> str:\n \"\"\"Template for stateful components.\n\n Args:\n imports: List of import statements.\n memoized_code: Memoized code for stateful components.\n\n Returns:\n Rendered stateful components code as string.\n \"\"\"\n imports_str = \"\\n\".join([_RenderUtils.get_import(imp) for imp in imports])\n return f\"{imports_str}\\n{memoized_code}\"\n\n\ndef memo_components_template(\n imports: list[_ImportDict],\n components: list[dict[str, Any]],\n dynamic_imports: Iterable[str],\n custom_codes: Iterable[str],\n) -> str:\n \"\"\"Template for custom component.\n\n Args:\n imports: List of import statements.\n components: List of component definitions.\n dynamic_imports: List of dynamic import statements.\n custom_codes: List of custom code snippets.\n\n Returns:\n Rendered custom component code as string.\n \"\"\"\n imports_str = \"\\n\".join([_RenderUtils.get_import(imp) for imp in imports])\n dynamic_imports_str = \"\\n\".join(dynamic_imports)\n custom_code_str = \"\\n\".join(custom_codes)\n\n components_code = \"\"\n for component in components:\n components_code += f\"\"\"\nexport const {component[\"name\"]} = memo(({{ {\",\".join([f\"{prop}:{prop}{CAMEL_CASE_MEMO_MARKER}\" for prop in component.get(\"props\", [])])} }}) => {{\n {_render_hooks(component.get(\"hooks\", {}))}\n return(\n {_RenderUtils.render(component[\"render\"])}\n )\n}});\n\"\"\"\n\n return f\"\"\"\n{imports_str}\n\n{dynamic_imports_str}\n\n{custom_code_str}\n\n{components_code}\"\"\"\n\n\ndef styles_template(stylesheets: list[str]) -> str:\n \"\"\"Template for styles.css.\n\n Args:\n stylesheets: List of stylesheets to include.\n\n Returns:\n Rendered styles.css content as string.\n \"\"\"\n return \"@layer __reflex_base;\\n\" + \"\\n\".join([\n f\"@import url('{sheet_name}');\" for sheet_name in stylesheets\n ])\n\n\ndef _render_hooks(hooks: dict[str, VarData | None], memo: list | None = None) -> str:\n \"\"\"Render hooks for macros.\n\n Args:\n hooks: Dictionary of hooks to render.\n memo: Optional list of memo hooks.\n\n Returns:\n Rendered hooks code as string.\n \"\"\"\n internal, pre_trigger, post_trigger = _sort_hooks(hooks)\n internal_str = \"\\n\".join(internal)\n pre_trigger_str = \"\\n\".join(pre_trigger)\n post_trigger_str = \"\\n\".join(post_trigger)\n memo_str = \"\\n\".join(memo) if memo is not None else \"\"\n return f\"{internal_str}\\n{pre_trigger_str}\\n{memo_str}\\n{post_trigger_str}\"\n" }, { "path": "reflex/compiler/utils.py", "content": "\"\"\"Common utility functions used in the compiler.\"\"\"\n\nfrom __future__ import annotations\n\nimport asyncio\nimport concurrent.futures\nimport operator\nimport traceback\nfrom collections.abc import Mapping, Sequence\nfrom datetime import datetime\nfrom pathlib import Path\nfrom typing import Any, TypedDict\nfrom urllib.parse import urlparse\n\nfrom reflex import constants\nfrom reflex.components.base import Description, Image, Scripts\nfrom reflex.components.base.document import Links, ScrollRestoration\nfrom reflex.components.base.document import Meta as ReactMeta\nfrom reflex.components.component import Component, ComponentStyle, CustomComponent\nfrom reflex.components.el.elements.metadata import Head, Link, Meta, Title\nfrom reflex.components.el.elements.other import Html\nfrom reflex.components.el.elements.sectioning import Body\nfrom reflex.constants.state import FIELD_MARKER\nfrom reflex.istate.storage import Cookie, LocalStorage, SessionStorage\nfrom reflex.state import BaseState, _resolve_delta\nfrom reflex.style import Style\nfrom reflex.utils import format, imports, path_ops\nfrom reflex.utils.imports import ImportVar, ParsedImportDict\nfrom reflex.utils.prerequisites import get_web_dir\nfrom reflex.vars.base import Field, Var, VarData\n\n# To re-export this function.\nmerge_imports = imports.merge_imports\n\n\ndef compile_import_statement(fields: list[ImportVar]) -> tuple[str, list[str]]:\n \"\"\"Compile an import statement.\n\n Args:\n fields: The set of fields to import from the library.\n\n Returns:\n The libraries for default and rest.\n default: default library. When install \"import def from library\".\n rest: rest of libraries. When install \"import {rest1, rest2} from library\"\n\n Raises:\n ValueError: If there is more than one default import.\n \"\"\"\n # ignore the ImportVar fields with render=False during compilation\n fields_set = {field for field in fields if field.render}\n\n # Check for default imports.\n defaults = {field for field in fields_set if field.is_default}\n if len(defaults) >= 2:\n msg = \"Only one default import is allowed.\"\n raise ValueError(msg)\n\n # Get the default import, and the specific imports.\n default = next(iter({field.name for field in defaults}), \"\")\n rest = {field.name for field in fields_set - defaults}\n\n return default, sorted(rest)\n\n\ndef validate_imports(import_dict: ParsedImportDict):\n \"\"\"Verify that the same Tag is not used in multiple import.\n\n Args:\n import_dict: The dict of imports to validate\n\n Raises:\n ValueError: if a conflict on \"tag/alias\" is detected for an import.\n \"\"\"\n used_tags = {}\n for lib, imported_items in import_dict.items():\n for imported_item in imported_items:\n import_name = (\n f\"{imported_item.tag}/{imported_item.alias}\"\n if imported_item.alias\n else imported_item.tag\n )\n if import_name in used_tags:\n already_imported = used_tags[import_name]\n if (already_imported[0] == \"$\" and already_imported[1:] == lib) or (\n lib[0] == \"$\" and lib[1:] == already_imported\n ):\n used_tags[import_name] = lib if lib[0] == \"$\" else already_imported\n continue\n msg = f\"Can not compile, the tag {import_name} is used multiple time from {lib} and {used_tags[import_name]}\"\n raise ValueError(msg)\n if import_name is not None:\n used_tags[import_name] = lib\n\n\nclass _ImportDict(TypedDict):\n lib: str\n default: str\n rest: list[str]\n\n\ndef compile_imports(import_dict: ParsedImportDict) -> list[_ImportDict]:\n \"\"\"Compile an import dict.\n\n Args:\n import_dict: The import dict to compile.\n\n Returns:\n The list of import dict.\n\n Raises:\n ValueError: If an import in the dict is invalid.\n \"\"\"\n collapsed_import_dict: ParsedImportDict = imports.collapse_imports(import_dict)\n validate_imports(collapsed_import_dict)\n import_dicts: list[_ImportDict] = []\n for lib, fields in collapsed_import_dict.items():\n # prevent lib from being rendered on the page if all imports are non rendered kind\n if not any(f.render for f in fields):\n continue\n\n lib_paths: dict[str, list[ImportVar]] = {}\n\n for field in fields:\n lib_paths.setdefault(field.package_path, []).append(field)\n\n compiled = {\n path: compile_import_statement(fields) for path, fields in lib_paths.items()\n }\n\n for path, (default, rest) in compiled.items():\n if not lib:\n if default:\n msg = \"No default field allowed for empty library.\"\n raise ValueError(msg)\n if rest is None or len(rest) == 0:\n msg = \"No fields to import.\"\n raise ValueError(msg)\n import_dicts.extend(get_import_dict(module) for module in sorted(rest))\n continue\n\n # remove the version before rendering the package imports\n formatted_lib = format.format_library_name(lib) + (\n path if path != \"/\" else \"\"\n )\n\n import_dicts.append(get_import_dict(formatted_lib, default, rest))\n return import_dicts\n\n\ndef get_import_dict(\n lib: str, default: str = \"\", rest: list[str] | None = None\n) -> _ImportDict:\n \"\"\"Get dictionary for import template.\n\n Args:\n lib: The importing react library.\n default: The default module to import.\n rest: The rest module to import.\n\n Returns:\n A dictionary for import template.\n \"\"\"\n return _ImportDict(\n lib=lib,\n default=default,\n rest=rest or [],\n )\n\n\ndef save_error(error: Exception) -> str:\n \"\"\"Save the error to a file.\n\n Args:\n error: The error to save.\n\n Returns:\n The path of the saved error.\n \"\"\"\n timestamp = datetime.now().strftime(\"%Y-%m-%d__%H-%M-%S\")\n constants.Reflex.LOGS_DIR.mkdir(parents=True, exist_ok=True)\n log_path = constants.Reflex.LOGS_DIR / f\"error_{timestamp}.log\"\n traceback.TracebackException.from_exception(error).print(file=log_path.open(\"w+\"))\n return str(log_path)\n\n\ndef _sorted_keys(d: Mapping[str, Any]) -> dict[str, Any]:\n \"\"\"Sort the keys of a dictionary.\n\n Args:\n d: The dictionary to sort.\n\n Returns:\n A new dictionary with sorted keys.\n \"\"\"\n return dict(sorted(d.items(), key=operator.itemgetter(0)))\n\n\ndef compile_state(state: type[BaseState]) -> dict:\n \"\"\"Compile the state of the app.\n\n Args:\n state: The app state object.\n\n Returns:\n A dictionary of the compiled state.\n \"\"\"\n initial_state = state(_reflex_internal_init=True).dict(initial=True)\n try:\n _ = asyncio.get_running_loop()\n except RuntimeError:\n pass\n else:\n with concurrent.futures.ThreadPoolExecutor() as pool:\n resolved_initial_state = pool.submit(\n asyncio.run, _resolve_delta(initial_state)\n ).result()\n return _sorted_keys(resolved_initial_state)\n\n # Normally the compile runs before any event loop starts, we asyncio.run is available for calling.\n return _sorted_keys(asyncio.run(_resolve_delta(initial_state)))\n\n\ndef _compile_client_storage_field(\n field: Field,\n) -> (\n tuple[\n type[Cookie] | type[LocalStorage] | type[SessionStorage],\n dict[str, Any],\n ]\n | tuple[None, None]\n):\n \"\"\"Compile the given cookie, local_storage or session_storage field.\n\n Args:\n field: The possible cookie field to compile.\n\n Returns:\n A dictionary of the compiled cookie or None if the field is not cookie-like.\n \"\"\"\n for field_type in (Cookie, LocalStorage, SessionStorage):\n if isinstance(field.default, field_type):\n cs_obj = field.default\n elif isinstance(field.type_, type) and issubclass(field.type_, field_type):\n cs_obj = field.type_()\n else:\n continue\n return field_type, cs_obj.options()\n return None, None\n\n\ndef _compile_client_storage_recursive(\n state: type[BaseState],\n) -> tuple[\n dict[str, dict[str, Any]], dict[str, dict[str, Any]], dict[str, dict[str, Any]]\n]:\n \"\"\"Compile the client-side storage for the given state recursively.\n\n Args:\n state: The app state object.\n\n Returns:\n A tuple of the compiled client-side storage info: (cookies, local_storage, session_storage).\n \"\"\"\n cookies: dict[str, dict[str, Any]] = {}\n local_storage: dict[str, dict[str, Any]] = {}\n session_storage: dict[str, dict[str, Any]] = {}\n state_name = state.get_full_name()\n for name, field in state.__fields__.items():\n if name in state.inherited_vars:\n # only include vars defined in this state\n continue\n state_key = f\"{state_name}.{name}\" + FIELD_MARKER\n field_type, options = _compile_client_storage_field(field)\n if field_type is None or options is None:\n continue\n if field_type is Cookie:\n cookies[state_key] = options\n elif field_type is LocalStorage:\n local_storage[state_key] = options\n elif field_type is SessionStorage:\n session_storage[state_key] = options\n else:\n continue\n for substate in state.get_substates():\n (\n substate_cookies,\n substate_local_storage,\n substate_session_storage,\n ) = _compile_client_storage_recursive(substate)\n cookies.update(substate_cookies)\n local_storage.update(substate_local_storage)\n session_storage.update(substate_session_storage)\n return cookies, local_storage, session_storage\n\n\ndef compile_client_storage(\n state: type[BaseState],\n) -> dict[str, dict[str, dict[str, Any]]]:\n \"\"\"Compile the client-side storage for the given state.\n\n Args:\n state: The app state object.\n\n Returns:\n A dictionary of the compiled client-side storage info.\n \"\"\"\n cookies, local_storage, session_storage = _compile_client_storage_recursive(state)\n return {\n constants.COOKIES: cookies,\n constants.LOCAL_STORAGE: local_storage,\n constants.SESSION_STORAGE: session_storage,\n }\n\n\ndef compile_custom_component(\n component: CustomComponent,\n) -> tuple[dict, ParsedImportDict]:\n \"\"\"Compile a custom component.\n\n Args:\n component: The custom component to compile.\n\n Returns:\n A tuple of the compiled component and the imports required by the component.\n \"\"\"\n # Render the component.\n render = component.get_component()\n\n # Get the imports.\n imports: ParsedImportDict = {\n lib: fields\n for lib, fields in render._get_all_imports().items()\n if lib != component.library\n }\n\n imports.setdefault(\"@emotion/react\", []).append(ImportVar(\"jsx\"))\n\n # Concatenate the props.\n props = list(component.props)\n\n # Compile the component.\n return (\n {\n \"name\": component.tag,\n \"props\": props,\n \"render\": render.render(),\n \"hooks\": render._get_all_hooks(),\n \"custom_code\": render._get_all_custom_code(),\n \"dynamic_imports\": render._get_all_dynamic_imports(),\n },\n imports,\n )\n\n\ndef create_document_root(\n head_components: Sequence[Component] | None = None,\n html_lang: str | None = None,\n html_custom_attrs: dict[str, Var | Any] | None = None,\n) -> Component:\n \"\"\"Create the document root.\n\n Args:\n head_components: The components to add to the head.\n html_lang: The language of the document, will be added to the html root element.\n html_custom_attrs: custom attributes added to the html root element.\n\n Returns:\n The document root.\n \"\"\"\n from reflex.utils.misc import preload_color_theme\n\n existing_meta_types = set()\n\n for component in head_components or []:\n if isinstance(component, Meta):\n if component.char_set is not None: # pyright: ignore[reportAttributeAccessIssue]\n existing_meta_types.add(\"char_set\")\n if (\n (name := component.name) is not None # pyright: ignore[reportAttributeAccessIssue]\n and name.equals(Var.create(\"viewport\"))\n ):\n existing_meta_types.add(\"viewport\")\n\n # Always include the framework meta and link tags.\n always_head_components = [\n ReactMeta.create(),\n Link.create(\n rel=\"stylesheet\",\n type=\"text/css\",\n href=Var(\n \"reflexGlobalStyles\",\n _var_data=VarData(\n imports={\n \"$/styles/__reflex_global_styles.css?url\": [\n ImportVar(tag=\"reflexGlobalStyles\", is_default=True)\n ]\n }\n ),\n ),\n ),\n Links.create(),\n ]\n maybe_head_components = []\n # Only include these if the user has not specified them.\n if \"char_set\" not in existing_meta_types:\n maybe_head_components.append(Meta.create(char_set=\"utf-8\"))\n if \"viewport\" not in existing_meta_types:\n maybe_head_components.append(\n Meta.create(name=\"viewport\", content=\"width=device-width, initial-scale=1\")\n )\n\n # Add theme preload script as the very first component to prevent FOUC\n theme_preload_components = [preload_color_theme()]\n\n head_components = [\n *theme_preload_components,\n *(head_components or []),\n *maybe_head_components,\n *always_head_components,\n ]\n html_component = Html.create(\n Head.create(*head_components),\n Body.create(\n Var(\"children\"),\n ScrollRestoration.create(),\n Scripts.create(),\n ),\n lang=html_lang or \"en\",\n custom_attrs=html_custom_attrs or {},\n )\n hooks = html_component._get_all_hooks()\n if hooks:\n msg = \"You cannot use stateful components or hooks in the document root. Check your head components.\"\n raise ValueError(msg)\n return html_component\n\n\ndef create_theme(style: ComponentStyle) -> dict:\n \"\"\"Create the base style for the app.\n\n Args:\n style: The style dict for the app.\n\n Returns:\n The base style for the app.\n \"\"\"\n # Get the global style from the style dict.\n style_rules = Style({k: v for k, v in style.items() if isinstance(k, str)})\n\n root_style = {\n # Root styles.\n \":root\": Style({\n f\"*{k}\": v for k, v in style_rules.items() if k.startswith(\":\")\n }),\n # Body styles.\n \"body\": Style(\n {k: v for k, v in style_rules.items() if not k.startswith(\":\")},\n ),\n }\n\n # Return the theme.\n return {\"styles\": {\"global\": root_style}}\n\n\ndef _format_route_part(part: str) -> str:\n if part.startswith(\"[\") and part.endswith(\"]\"):\n if part.startswith((\"[...\", \"[[...\")):\n return \"$\"\n if part.startswith(\"[[\"):\n return \"($\" + part.removeprefix(\"[[\").removesuffix(\"]]\") + \")\"\n # We don't add [] here since we are reusing them from the input\n return \"$\" + part\n return \"[\" + part + \"]\"\n\n\ndef _path_to_file_stem(path: str) -> str:\n if path == \"index\":\n return \"_index\"\n path = path if path != \"index\" else \"/\"\n name = \".\".join([_format_route_part(part) for part in path.split(\"/\")]).lstrip(\".\")\n return name + \"._index\" if not name.endswith(\"$\") else name\n\n\ndef get_page_path(path: str) -> str:\n \"\"\"Get the path of the compiled JS file for the given page.\n\n Args:\n path: The path of the page.\n\n Returns:\n The path of the compiled JS file.\n \"\"\"\n return str(\n get_web_dir()\n / constants.Dirs.PAGES\n / constants.Dirs.ROUTES\n / (_path_to_file_stem(path) + constants.Ext.JSX)\n )\n\n\ndef get_theme_path() -> str:\n \"\"\"Get the path of the base theme style.\n\n Returns:\n The path of the theme style.\n \"\"\"\n return str(\n get_web_dir()\n / constants.Dirs.UTILS\n / (constants.PageNames.THEME + constants.Ext.JS)\n )\n\n\ndef get_root_stylesheet_path() -> str:\n \"\"\"Get the path of the app root file.\n\n Returns:\n The path of the app root file.\n \"\"\"\n return str(\n get_web_dir()\n / constants.Dirs.STYLES\n / (constants.PageNames.STYLESHEET_ROOT + constants.Ext.CSS)\n )\n\n\ndef get_context_path() -> str:\n \"\"\"Get the path of the context / initial state file.\n\n Returns:\n The path of the context module.\n \"\"\"\n return str(get_web_dir() / (constants.Dirs.CONTEXTS_PATH + constants.Ext.JS))\n\n\ndef get_components_path() -> str:\n \"\"\"Get the path of the compiled components.\n\n Returns:\n The path of the compiled components.\n \"\"\"\n return str(\n get_web_dir()\n / constants.Dirs.UTILS\n / (constants.PageNames.COMPONENTS + constants.Ext.JSX),\n )\n\n\ndef get_stateful_components_path() -> str:\n \"\"\"Get the path of the compiled stateful components.\n\n Returns:\n The path of the compiled stateful components.\n \"\"\"\n return str(\n get_web_dir()\n / constants.Dirs.UTILS\n / (constants.PageNames.STATEFUL_COMPONENTS + constants.Ext.JSX)\n )\n\n\ndef add_meta(\n page: Component,\n title: str,\n image: str,\n meta: Sequence[Mapping[str, Any] | Component],\n description: str | None = None,\n) -> Component:\n \"\"\"Add metadata to a page.\n\n Args:\n page: The component for the page.\n title: The title of the page.\n image: The image for the page.\n meta: The metadata list.\n description: The description of the page.\n\n Returns:\n The component with the metadata added.\n \"\"\"\n meta_tags = [\n item if isinstance(item, Component) else Meta.create(**item) for item in meta\n ]\n\n children: list[Any] = [Title.create(title)]\n if description:\n children.append(Description.create(content=description))\n children.append(Image.create(content=image))\n\n page.children.extend(children)\n page.children.extend(meta_tags)\n\n return page\n\n\ndef resolve_path_of_web_dir(path: str | Path) -> Path:\n \"\"\"Get the path under the web directory.\n\n Args:\n path: The path to get. It can be a relative or absolute path.\n\n Returns:\n The path under the web directory.\n \"\"\"\n path = Path(path)\n web_dir = get_web_dir()\n if path.is_relative_to(web_dir):\n return path.absolute()\n return (web_dir / path).absolute()\n\n\ndef write_file(path: str | Path, code: str):\n \"\"\"Write the given code to the given path.\n\n Args:\n path: The path to write the code to.\n code: The code to write.\n \"\"\"\n path = Path(path)\n path.parent.mkdir(parents=True, exist_ok=True)\n if path.exists() and path.read_text(encoding=\"utf-8\") == code:\n return\n path.write_text(code, encoding=\"utf-8\")\n\n\ndef empty_dir(path: str | Path, keep_files: list[str] | None = None):\n \"\"\"Remove all files and folders in a directory except for the keep_files.\n\n Args:\n path: The path to the directory that will be emptied\n keep_files: List of filenames or foldernames that will not be deleted.\n \"\"\"\n path = Path(path)\n\n # If the directory does not exist, return.\n if not path.exists():\n return\n\n # Remove all files and folders in the directory.\n keep_files = keep_files or []\n for element in path.iterdir():\n if element.name not in keep_files:\n path_ops.rm(element)\n\n\ndef is_valid_url(url: str) -> bool:\n \"\"\"Check if a url is valid.\n\n Args:\n url: The Url to check.\n\n Returns:\n Whether url is valid.\n \"\"\"\n result = urlparse(url)\n return all([result.scheme, result.netloc])\n" }, { "path": "reflex/components/__init__.py", "content": "\"\"\"Import all the components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_SUBMODULES: set[str] = {\n \"lucide\",\n \"core\",\n \"datadisplay\",\n \"gridjs\",\n \"markdown\",\n \"moment\",\n \"plotly\",\n \"radix\",\n \"react_player\",\n \"react_router\",\n \"sonner\",\n \"el\",\n \"base\",\n \"recharts\",\n}\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"component\": [\n \"Component\",\n \"NoSSRComponent\",\n ],\n}\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/base/__init__.py", "content": "\"\"\"Base components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_SUBMODULES: set[str] = {\"app_wrap\", \"bare\"}\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"body\": [\"Body\"],\n \"document\": [\"Scripts\", \"Outlet\", \"ScrollRestoration\", \"Links\", \"Meta\"],\n \"fragment\": [\n \"Fragment\",\n \"fragment\",\n ],\n \"error_boundary\": [\n \"ErrorBoundary\",\n \"error_boundary\",\n ],\n \"link\": [\"RawLink\", \"ScriptTag\"],\n \"meta\": [\"Description\", \"Image\", \"Meta\", \"Title\"],\n \"script\": [\"Script\", \"script\"],\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/base/app_wrap.py", "content": "\"\"\"Top-level component that wraps the entire app.\"\"\"\n\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import Component\nfrom reflex.vars.base import Var\n\n\nclass AppWrap(Fragment):\n \"\"\"Top-level component that wraps the entire app.\"\"\"\n\n @classmethod\n def create(cls) -> Component:\n \"\"\"Create a new AppWrap component.\n\n Returns:\n A new AppWrap component containing {children}.\n \"\"\"\n return super().create(Var(_js_expr=\"children\"))\n" }, { "path": "reflex/components/base/bare.py", "content": "\"\"\"A bare component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Iterator, Sequence\nfrom typing import Any\n\nfrom reflex.components.component import BaseComponent, Component, ComponentStyle\nfrom reflex.components.tags import Tag\nfrom reflex.components.tags.tagless import Tagless\nfrom reflex.environment import PerformanceMode, environment\nfrom reflex.utils import console\nfrom reflex.utils.decorator import once\nfrom reflex.utils.imports import ParsedImportDict\nfrom reflex.vars import BooleanVar, ObjectVar, Var\nfrom reflex.vars.base import GLOBAL_CACHE, VarData\nfrom reflex.vars.sequence import LiteralStringVar\n\n\n@once\ndef get_performance_mode():\n \"\"\"Get the performance mode.\n\n Returns:\n The performance mode.\n \"\"\"\n return environment.REFLEX_PERF_MODE.get()\n\n\ndef validate_str(value: str):\n \"\"\"Validate a string value.\n\n Args:\n value: The value to validate.\n\n Raises:\n ValueError: If the value is a Var and the performance mode is set to raise.\n \"\"\"\n perf_mode = get_performance_mode()\n if perf_mode != PerformanceMode.OFF and value.startswith(\"reflex___state\"):\n if perf_mode == PerformanceMode.WARN:\n console.warn(\n f\"Output includes {value!s} which will be displayed as a string. If you are calling `str` on a Var, consider using .to_string() instead.\"\n )\n elif perf_mode == PerformanceMode.RAISE:\n msg = f\"Output includes {value!s} which will be displayed as a string. If you are calling `str` on a Var, consider using .to_string() instead.\"\n raise ValueError(msg)\n\n\ndef _components_from_var(var: Var) -> Sequence[BaseComponent]:\n var_data = var._get_all_var_data()\n return var_data.components if var_data else ()\n\n\nclass Bare(Component):\n \"\"\"A component with no tag.\"\"\"\n\n contents: Var[Any]\n\n @classmethod\n def create(cls, contents: Any) -> Component:\n \"\"\"Create a Bare component, with no tag.\n\n Args:\n contents: The contents of the component.\n\n Returns:\n The component.\n \"\"\"\n if isinstance(contents, Var):\n if isinstance(contents, LiteralStringVar):\n validate_str(contents._var_value)\n return cls._unsafe_create(children=[], contents=contents)\n if isinstance(contents, str):\n validate_str(contents)\n contents = Var.create(contents if contents is not None else \"\")\n\n return cls._unsafe_create(children=[], contents=contents)\n\n def _get_all_hooks_internal(self) -> dict[str, VarData | None]:\n \"\"\"Include the hooks for the component.\n\n Returns:\n The hooks for the component.\n \"\"\"\n hooks = super()._get_all_hooks_internal()\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n hooks |= component._get_all_hooks_internal()\n return hooks\n\n def _get_all_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Include the hooks for the component.\n\n Returns:\n The hooks for the component.\n \"\"\"\n hooks = super()._get_all_hooks()\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n hooks |= component._get_all_hooks()\n return hooks\n\n def _get_all_imports(self, collapse: bool = False) -> ParsedImportDict:\n \"\"\"Include the imports for the component.\n\n Args:\n collapse: Whether to collapse the imports.\n\n Returns:\n The imports for the component.\n \"\"\"\n imports = super()._get_all_imports(collapse=collapse)\n if isinstance(self.contents, Var):\n var_data = self.contents._get_all_var_data()\n if var_data:\n imports |= {k: list(v) for k, v in var_data.imports}\n return imports\n\n def _get_all_dynamic_imports(self) -> set[str]:\n \"\"\"Get dynamic imports for the component.\n\n Returns:\n The dynamic imports.\n \"\"\"\n dynamic_imports = super()._get_all_dynamic_imports()\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n dynamic_imports |= component._get_all_dynamic_imports()\n return dynamic_imports\n\n def _get_all_custom_code(self) -> dict[str, None]:\n \"\"\"Get custom code for the component.\n\n Returns:\n The custom code.\n \"\"\"\n custom_code = super()._get_all_custom_code()\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n custom_code |= component._get_all_custom_code()\n return custom_code\n\n def _get_all_app_wrap_components(\n self, *, ignore_ids: set[int] | None = None\n ) -> dict[tuple[int, str], Component]:\n \"\"\"Get the components that should be wrapped in the app.\n\n Args:\n ignore_ids: The ids to ignore when collecting components.\n\n Returns:\n The components that should be wrapped in the app.\n \"\"\"\n ignore_ids = ignore_ids or set()\n app_wrap_components = super()._get_all_app_wrap_components(\n ignore_ids=ignore_ids\n )\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n component_id = id(component)\n if isinstance(component, Component) and component_id not in ignore_ids:\n ignore_ids.add(component_id)\n app_wrap_components |= component._get_all_app_wrap_components(\n ignore_ids=ignore_ids\n )\n return app_wrap_components\n\n def _get_all_refs(self) -> dict[str, None]:\n \"\"\"Get the refs for the children of the component.\n\n Returns:\n The refs for the children.\n \"\"\"\n refs = super()._get_all_refs()\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n refs |= component._get_all_refs()\n return refs\n\n def _render(self) -> Tag:\n contents = (\n Var.create(self.contents)\n if not isinstance(self.contents, Var)\n else self.contents\n )\n if isinstance(contents, (BooleanVar, ObjectVar)):\n return Tagless(contents=f\"{contents.to_string()!s}\")\n return Tagless(contents=f\"{contents!s}\")\n\n def render(self) -> dict:\n \"\"\"Render the component as a dictionary.\n\n This is overridden to provide a short performant path for rendering.\n\n Returns:\n The rendered component.\n \"\"\"\n contents = (\n Var.create(self.contents)\n if not isinstance(self.contents, Var)\n else self.contents\n )\n if isinstance(contents, (BooleanVar, ObjectVar)):\n return {\"contents\": f\"{contents.to_string()!s}\"}\n return {\"contents\": f\"{contents!s}\"}\n\n def _add_style_recursive(\n self, style: ComponentStyle, theme: Component | None = None\n ) -> Component:\n \"\"\"Add style to the component and its children.\n\n Args:\n style: The style to add.\n theme: The theme to add.\n\n Returns:\n The component with the style added.\n \"\"\"\n new_self = super()._add_style_recursive(style, theme)\n\n are_components_touched = False\n\n if isinstance(self.contents, Var):\n for component in _components_from_var(self.contents):\n if isinstance(component, Component):\n component._add_style_recursive(style, theme)\n are_components_touched = True\n\n if are_components_touched:\n GLOBAL_CACHE.clear()\n\n return new_self\n\n def _get_vars(\n self, include_children: bool = False, ignore_ids: set[int] | None = None\n ) -> Iterator[Var]:\n \"\"\"Walk all Vars used in this component.\n\n Args:\n include_children: Whether to include Vars from children.\n ignore_ids: The ids to ignore.\n\n Yields:\n The contents if it is a Var, otherwise nothing.\n \"\"\"\n yield self.contents\n" }, { "path": "reflex/components/base/body.py", "content": "\"\"\"Display the page body.\"\"\"\n\nfrom reflex.components.el import elements\n\n\nclass Body(elements.Body):\n \"\"\"A body component.\"\"\"\n" }, { "path": "reflex/components/base/document.py", "content": "\"\"\"Document components.\"\"\"\n\nfrom reflex.components.component import Component\n\n\nclass ReactRouterLib(Component):\n \"\"\"Root document components.\"\"\"\n\n library = \"react-router\"\n\n\nclass Meta(ReactRouterLib):\n \"\"\"The document meta tags.\"\"\"\n\n tag = \"Meta\"\n\n\nclass Links(ReactRouterLib):\n \"\"\"The document link tags.\"\"\"\n\n tag = \"Links\"\n\n\nclass ScrollRestoration(ReactRouterLib):\n \"\"\"The document scroll restoration.\"\"\"\n\n tag = \"ScrollRestoration\"\n\n\nclass Outlet(ReactRouterLib):\n \"\"\"The document outlet.\"\"\"\n\n tag = \"Outlet\"\n\n\nclass Scripts(ReactRouterLib):\n \"\"\"The document main scripts.\"\"\"\n\n tag = \"Scripts\"\n" }, { "path": "reflex/components/base/error_boundary.py", "content": "\"\"\"A React Error Boundary component that catches unhandled frontend exceptions.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.component import Component\nfrom reflex.components.datadisplay.logo import svg_logo\nfrom reflex.components.el import a, button, div, h2, hr, p, pre, svg\nfrom reflex.event import EventHandler, set_clipboard\nfrom reflex.state import FrontendEventExceptionState\nfrom reflex.vars.base import Var\nfrom reflex.vars.function import ArgsFunctionOperation\nfrom reflex.vars.object import ObjectVar\n\n\ndef on_error_spec(\n error: ObjectVar[dict[str, str]], info: ObjectVar[dict[str, str]]\n) -> tuple[Var[str], Var[str]]:\n \"\"\"The spec for the on_error event handler.\n\n Args:\n error: The error message.\n info: Additional information about the error.\n\n Returns:\n The arguments for the event handler.\n \"\"\"\n return (\n error.name.to(str) + \": \" + error.message.to(str) + \"\\n\" + error.stack.to(str),\n info.componentStack,\n )\n\n\n_ERROR_DISPLAY: str = r\"\"\"event_args.error.name + ': ' + event_args.error.message + '\\n' + event_args.error.stack\"\"\"\n\n\nclass ErrorBoundary(Component):\n \"\"\"A React Error Boundary component that catches unhandled frontend exceptions.\"\"\"\n\n library = \"react-error-boundary@6.1.1\"\n tag = \"ErrorBoundary\"\n\n # Fired when the boundary catches an error.\n on_error: EventHandler[on_error_spec]\n\n # Rendered instead of the children when an error is caught.\n fallback_render: Var[Component]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create an ErrorBoundary component.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The ErrorBoundary component.\n \"\"\"\n if \"on_error\" not in props:\n props[\"on_error\"] = FrontendEventExceptionState.handle_frontend_exception\n if \"fallback_render\" not in props:\n props[\"fallback_render\"] = ArgsFunctionOperation.create(\n (\"event_args\",),\n Var.create(\n div(\n div(\n div(\n svg(\n svg.circle(cx=\"12\", cy=\"12\", r=\"10\"),\n svg.path(d=\"M16 16s-1.5-2-4-2-4 2-4 2\"),\n svg.line(x1=\"9\", x2=\"9.01\", y1=\"9\", y2=\"9\"),\n svg.line(x1=\"15\", x2=\"15.01\", y1=\"9\", y2=\"9\"),\n xmlns=\"http://www.w3.org/2000/svg\",\n width=\"25vmin\",\n view_box=\"0 0 24 24\",\n class_name=\"lucide lucide-frown-icon lucide-frown\",\n custom_attrs={\n \"fill\": \"none\",\n \"stroke\": \"currentColor\",\n \"stroke-width\": \"2\",\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n },\n ),\n h2(\n \"An error occurred while rendering this page.\",\n font_size=\"5vmin\",\n font_weight=\"bold\",\n ),\n opacity=\"0.5\",\n display=\"flex\",\n gap=\"4vmin\",\n align_items=\"center\",\n ),\n p(\n \"This is an error with the application itself. Refreshing the page might help.\",\n opacity=\"0.75\",\n margin_block=\"1rem\",\n ),\n div(\n div(\n pre(\n Var(_js_expr=_ERROR_DISPLAY),\n word_break=\"break-word\",\n white_space=\"pre-wrap\",\n ),\n padding=\"0.5rem\",\n ),\n width=\"100%\",\n background=\"color-mix(in srgb, currentColor 5%, transparent)\",\n max_height=\"15rem\",\n overflow=\"auto\",\n border_radius=\"0.4rem\",\n ),\n button(\n \"Copy\",\n on_click=set_clipboard(Var(_js_expr=_ERROR_DISPLAY)),\n padding=\"0.35rem 1.35rem\",\n margin_block=\"0.5rem\",\n margin_inline_start=\"auto\",\n background=\"color-mix(in srgb, currentColor 15%, transparent)\",\n border_radius=\"0.4rem\",\n width=\"fit-content\",\n _hover={\n \"background\": \"color-mix(in srgb, currentColor 25%, transparent)\"\n },\n _active={\n \"background\": \"color-mix(in srgb, currentColor 35%, transparent)\"\n },\n ),\n hr(\n border_color=\"currentColor\",\n opacity=\"0.25\",\n ),\n a(\n div(\n \"Built with \",\n svg_logo(\"currentColor\"),\n display=\"flex\",\n align_items=\"baseline\",\n justify_content=\"center\",\n font_family=\"monospace\",\n gap=\"0.5rem\",\n ),\n href=\"https://reflex.dev\",\n ),\n display=\"flex\",\n flex_direction=\"column\",\n gap=\"0.5rem\",\n max_width=\"min(80ch, 90vw)\",\n border_radius=\"0.25rem\",\n padding=\"1rem\",\n ),\n height=\"100%\",\n width=\"100%\",\n position=\"absolute\",\n background_color=\"#fff\",\n color=\"#000\",\n display=\"flex\",\n align_items=\"center\",\n justify_content=\"center\",\n )\n ),\n _var_type=Component,\n )\n else:\n props[\"fallback_render\"] = ArgsFunctionOperation.create(\n (\"event_args\",),\n props[\"fallback_render\"],\n _var_type=Component,\n )\n return super().create(*children, **props)\n\n\nerror_boundary = ErrorBoundary.create\n" }, { "path": "reflex/components/base/fragment.py", "content": "\"\"\"React fragments to enable bare returns of component trees from functions.\"\"\"\n\nfrom reflex.components.component import Component\n\n\nclass Fragment(Component):\n \"\"\"A React fragment to return multiple components from a function without wrapping it in a container.\"\"\"\n\n library = \"react\"\n tag = \"Fragment\"\n\n\nfragment = Fragment.create\n" }, { "path": "reflex/components/base/link.py", "content": "\"\"\"Display the title of the current page.\"\"\"\n\nfrom reflex.components.el.elements.base import BaseHTML\nfrom reflex.vars.base import Var\n\n\nclass RawLink(BaseHTML):\n \"\"\"A component that displays the title of the current page.\"\"\"\n\n tag = \"link\"\n\n # The href.\n href: Var[str]\n\n # The type of link.\n rel: Var[str]\n\n\nclass ScriptTag(BaseHTML):\n \"\"\"A script tag with the specified type and source.\"\"\"\n\n tag = \"script\"\n\n # The type of script represented.\n type_: Var[str]\n\n # The URI of an external script.\n source: Var[str]\n\n # Metadata to verify the content of the script.\n integrity: Var[str]\n\n # Whether to allow cross-origin requests.\n crossorigin: Var[str]\n\n # Indicates which referrer to send when fetching the script.\n referrer_policy: Var[str]\n\n # Whether to asynchronously load the script.\n is_async: Var[bool]\n\n # Whether to defer loading the script.\n defer: Var[bool]\n" }, { "path": "reflex/components/base/meta.py", "content": "\"\"\"Display the title of the current page.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.base.bare import Bare\nfrom reflex.components.el import elements\nfrom reflex.components.el.elements.metadata import Meta as Meta # for compatibility\nfrom reflex.vars.base import Var\n\n\nclass Title(elements.Title):\n \"\"\"A component that displays the title of the current page.\"\"\"\n\n def render(self) -> dict:\n \"\"\"Render the title component.\n\n Returns:\n The rendered title component.\n\n Raises:\n ValueError: If the title is not a single string.\n \"\"\"\n # Make sure the title is a single string.\n if len(self.children) != 1 or not isinstance(self.children[0], Bare):\n msg = \"Title must be a single string.\"\n raise ValueError(msg)\n return super().render()\n\n\nclass Description(elements.Meta):\n \"\"\"A component that displays the title of the current page.\"\"\"\n\n # The type of the description.\n name: Var[str] = Var.create(\"description\")\n\n\nclass Image(elements.Meta):\n \"\"\"A component that displays the title of the current page.\"\"\"\n\n # The type of the image.\n property: Var[str] = Var.create(\"og:image\")\n" }, { "path": "reflex/components/base/script.py", "content": "\"\"\"Wrapper for the script element. Uses the Helmet component to manage the head.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components import el as elements\nfrom reflex.components.core.helmet import helmet\nfrom reflex.utils import console\n\n\nclass Script(elements.Script):\n \"\"\"Wrapper for the script element.\"\"\"\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ):\n \"\"\"Display the script element.\n\n Args:\n *children: The children of the element.\n **props: The properties of the element.\n\n Returns:\n The script element.\n\n Raises:\n ValueError: If neither children nor src is specified.\n \"\"\"\n async_ = props.pop(\"async_\", None)\n char_set = props.pop(\"char_set\", None)\n cross_origin = props.pop(\"cross_origin\", None)\n defer = props.pop(\"defer\", None)\n integrity = props.pop(\"integrity\", None)\n referrer_policy = props.pop(\"referrer_policy\", None)\n src = props.pop(\"src\", None)\n type = props.pop(\"type\", None)\n key = props.pop(\"key\", None)\n id = props.pop(\"id\", None)\n class_name = props.pop(\"class_name\", None)\n custom_attrs = props.pop(\"custom_attrs\", None)\n on_mount = props.pop(\"on_mount\", None)\n on_unmount = props.pop(\"on_unmount\", None)\n\n if props:\n console.warn(\n f\"rx.script does not support the following properties: {list(props.keys())}\"\n )\n\n if not children and not src:\n msg = \"You must specify either children or src for the script element.\"\n raise ValueError(msg)\n\n return helmet(\n elements.Script.create(\n *children,\n async_=async_,\n char_set=char_set,\n cross_origin=cross_origin,\n defer=defer,\n integrity=integrity,\n referrer_policy=referrer_policy,\n src=src,\n type=type,\n key=key,\n id=id,\n class_name=class_name,\n custom_attrs=custom_attrs,\n on_mount=on_mount,\n on_unmount=on_unmount,\n )\n )\n\n\nscript = Script.create\n" }, { "path": "reflex/components/base/strict_mode.py", "content": "\"\"\"Module for the StrictMode component.\"\"\"\n\nfrom reflex.components.component import Component\n\n\nclass StrictMode(Component):\n \"\"\"A React strict mode component to enable strict mode for its children.\"\"\"\n\n library = \"react\"\n tag = \"StrictMode\"\n" }, { "path": "reflex/components/component.py", "content": "\"\"\"Base component definitions.\"\"\"\n\nfrom __future__ import annotations\n\nimport contextlib\nimport copy\nimport dataclasses\nimport enum\nimport functools\nimport inspect\nimport typing\nfrom abc import ABC, ABCMeta, abstractmethod\nfrom collections.abc import Callable, Iterable, Iterator, Mapping, Sequence\nfrom dataclasses import _MISSING_TYPE, MISSING\nfrom functools import wraps\nfrom hashlib import md5\nfrom types import SimpleNamespace\nfrom typing import TYPE_CHECKING, Any, ClassVar, TypeVar, cast, get_args, get_origin\n\nfrom rich.markup import escape\nfrom typing_extensions import dataclass_transform\n\nimport reflex.state\nfrom reflex import constants\nfrom reflex.compiler.templates import stateful_component_template\nfrom reflex.components.core.breakpoints import Breakpoints\nfrom reflex.components.dynamic import load_dynamic_serializer\nfrom reflex.components.field import BaseField, FieldBasedMeta\nfrom reflex.components.tags import Tag\nfrom reflex.constants import (\n Dirs,\n EventTriggers,\n Hooks,\n Imports,\n MemoizationDisposition,\n MemoizationMode,\n PageNames,\n)\nfrom reflex.constants.compiler import SpecialAttributes\nfrom reflex.constants.state import CAMEL_CASE_MEMO_MARKER, FRONTEND_EVENT_STATE\nfrom reflex.event import (\n EventCallback,\n EventChain,\n EventHandler,\n EventSpec,\n args_specs_from_fields,\n no_args_event_spec,\n parse_args_spec,\n pointer_event_spec,\n run_script,\n unwrap_var_annotation,\n)\nfrom reflex.style import Style, format_as_emotion\nfrom reflex.utils import console, format, imports, types\nfrom reflex.utils.imports import ImportDict, ImportVar, ParsedImportDict\nfrom reflex.vars import VarData\nfrom reflex.vars.base import (\n CachedVarOperation,\n LiteralNoneVar,\n LiteralVar,\n Var,\n cached_property_no_lock,\n)\nfrom reflex.vars.function import ArgsFunctionOperation, FunctionStringVar, FunctionVar\nfrom reflex.vars.number import ternary_operation\nfrom reflex.vars.object import ObjectVar\nfrom reflex.vars.sequence import LiteralArrayVar, LiteralStringVar, StringVar\n\nFIELD_TYPE = TypeVar(\"FIELD_TYPE\")\n\n\nclass ComponentField(BaseField[FIELD_TYPE]):\n \"\"\"A field for a component.\"\"\"\n\n def __init__(\n self,\n default: FIELD_TYPE | _MISSING_TYPE = MISSING,\n default_factory: Callable[[], FIELD_TYPE] | None = None,\n is_javascript: bool | None = None,\n annotated_type: type[Any] | _MISSING_TYPE = MISSING,\n ) -> None:\n \"\"\"Initialize the field.\n\n Args:\n default: The default value for the field.\n default_factory: The default factory for the field.\n is_javascript: Whether the field is a javascript property.\n annotated_type: The annotated type for the field.\n \"\"\"\n super().__init__(default, default_factory, annotated_type)\n self.is_javascript = is_javascript\n\n def __repr__(self) -> str:\n \"\"\"Represent the field in a readable format.\n\n Returns:\n The string representation of the field.\n \"\"\"\n annotated_type_str = (\n f\", annotated_type={self.annotated_type!r}\"\n if self.annotated_type is not MISSING\n else \"\"\n )\n if self.default is not MISSING:\n return f\"ComponentField(default={self.default!r}, is_javascript={self.is_javascript!r}{annotated_type_str})\"\n return f\"ComponentField(default_factory={self.default_factory!r}, is_javascript={self.is_javascript!r}{annotated_type_str})\"\n\n\ndef field(\n default: FIELD_TYPE | _MISSING_TYPE = MISSING,\n default_factory: Callable[[], FIELD_TYPE] | None = None,\n is_javascript_property: bool | None = None,\n) -> FIELD_TYPE:\n \"\"\"Create a field for a component.\n\n Args:\n default: The default value for the field.\n default_factory: The default factory for the field.\n is_javascript_property: Whether the field is a javascript property.\n\n Returns:\n The field for the component.\n\n Raises:\n ValueError: If both default and default_factory are specified.\n \"\"\"\n if default is not MISSING and default_factory is not None:\n msg = \"cannot specify both default and default_factory\"\n raise ValueError(msg)\n return ComponentField( # pyright: ignore [reportReturnType]\n default=default,\n default_factory=default_factory,\n is_javascript=is_javascript_property,\n )\n\n\n@dataclass_transform(kw_only_default=True, field_specifiers=(field,))\nclass BaseComponentMeta(FieldBasedMeta, ABCMeta):\n \"\"\"Meta class for BaseComponent.\"\"\"\n\n if TYPE_CHECKING:\n _inherited_fields: Mapping[str, ComponentField]\n _own_fields: Mapping[str, ComponentField]\n _fields: Mapping[str, ComponentField]\n _js_fields: Mapping[str, ComponentField]\n\n @classmethod\n def _process_annotated_fields(\n cls,\n namespace: dict[str, Any],\n annotations: dict[str, Any],\n inherited_fields: dict[str, ComponentField],\n ) -> dict[str, ComponentField]:\n own_fields: dict[str, ComponentField] = {}\n\n for key, annotation in annotations.items():\n value = namespace.get(key, MISSING)\n\n if types.is_classvar(annotation):\n # If the annotation is a classvar, skip it.\n continue\n\n if value is MISSING:\n value = ComponentField(\n default=None,\n is_javascript=(key[0] != \"_\"),\n annotated_type=annotation,\n )\n elif not isinstance(value, ComponentField):\n value = ComponentField(\n default=value,\n is_javascript=(\n (key[0] != \"_\")\n if (existing_field := inherited_fields.get(key)) is None\n else existing_field.is_javascript\n ),\n annotated_type=annotation,\n )\n else:\n value = ComponentField(\n default=value.default,\n default_factory=value.default_factory,\n is_javascript=value.is_javascript,\n annotated_type=annotation,\n )\n\n own_fields[key] = value\n\n return own_fields\n\n @classmethod\n def _create_field(\n cls,\n annotated_type: Any,\n default: Any = MISSING,\n default_factory: Callable[[], Any] | None = None,\n ) -> ComponentField:\n return ComponentField(\n annotated_type=annotated_type,\n default=default,\n default_factory=default_factory,\n is_javascript=True, # Default for components\n )\n\n @classmethod\n def _process_field_overrides(\n cls,\n namespace: dict[str, Any],\n annotations: dict[str, Any],\n inherited_fields: dict[str, Any],\n ) -> dict[str, ComponentField]:\n own_fields: dict[str, ComponentField] = {}\n\n for key, value, inherited_field in [\n (key, value, inherited_field)\n for key, value in namespace.items()\n if key not in annotations\n and ((inherited_field := inherited_fields.get(key)) is not None)\n ]:\n new_field = ComponentField(\n default=value,\n is_javascript=inherited_field.is_javascript,\n annotated_type=inherited_field.annotated_type,\n )\n own_fields[key] = new_field\n\n return own_fields\n\n @classmethod\n def _finalize_fields(\n cls,\n namespace: dict[str, Any],\n inherited_fields: dict[str, ComponentField],\n own_fields: dict[str, ComponentField],\n ) -> None:\n # Call parent implementation\n super()._finalize_fields(namespace, inherited_fields, own_fields)\n\n # Add JavaScript fields mapping\n all_fields = namespace[\"_fields\"]\n namespace[\"_js_fields\"] = {\n key: value\n for key, value in all_fields.items()\n if value.is_javascript is True\n }\n\n\nclass BaseComponent(metaclass=BaseComponentMeta):\n \"\"\"The base class for all Reflex components.\n\n This is something that can be rendered as a Component via the Reflex compiler.\n \"\"\"\n\n # The children nested within the component.\n children: list[BaseComponent] = field(\n default_factory=list, is_javascript_property=False\n )\n\n # The library that the component is based on.\n library: str | None = field(default=None, is_javascript_property=False)\n\n # List here the non-react dependency needed by `library`\n lib_dependencies: list[str] = field(\n default_factory=list, is_javascript_property=False\n )\n\n # The tag to use when rendering the component.\n tag: str | None = field(default=None, is_javascript_property=False)\n\n def __init__(\n self,\n **kwargs,\n ):\n \"\"\"Initialize the component.\n\n Args:\n **kwargs: The kwargs to pass to the component.\n \"\"\"\n for key, value in kwargs.items():\n setattr(self, key, value)\n for name, value in self.get_fields().items():\n if name not in kwargs:\n setattr(self, name, value.default_value())\n\n def set(self, **kwargs):\n \"\"\"Set the component props.\n\n Args:\n **kwargs: The kwargs to set.\n\n Returns:\n The component with the updated props.\n \"\"\"\n for key, value in kwargs.items():\n setattr(self, key, value)\n return self\n\n def __eq__(self, value: Any) -> bool:\n \"\"\"Check if the component is equal to another value.\n\n Args:\n value: The value to compare to.\n\n Returns:\n Whether the component is equal to the value.\n \"\"\"\n return type(self) is type(value) and bool(\n getattr(self, key) == getattr(value, key) for key in self.get_fields()\n )\n\n @classmethod\n def get_fields(cls) -> Mapping[str, ComponentField]:\n \"\"\"Get the fields of the component.\n\n Returns:\n The fields of the component.\n \"\"\"\n return cls._fields\n\n @classmethod\n def get_js_fields(cls) -> Mapping[str, ComponentField]:\n \"\"\"Get the javascript fields of the component.\n\n Returns:\n The javascript fields of the component.\n \"\"\"\n return cls._js_fields\n\n @abstractmethod\n def render(self) -> dict:\n \"\"\"Render the component.\n\n Returns:\n The dictionary for template of the component.\n \"\"\"\n\n @abstractmethod\n def _get_all_hooks_internal(self) -> dict[str, VarData | None]:\n \"\"\"Get the reflex internal hooks for the component and its children.\n\n Returns:\n The code that should appear just before user-defined hooks.\n \"\"\"\n\n @abstractmethod\n def _get_all_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Get the React hooks for this component.\n\n Returns:\n The code that should appear just before returning the rendered component.\n \"\"\"\n\n @abstractmethod\n def _get_all_imports(self) -> ParsedImportDict:\n \"\"\"Get all the libraries and fields that are used by the component.\n\n Returns:\n The import dict with the required imports.\n \"\"\"\n\n @abstractmethod\n def _get_all_dynamic_imports(self) -> set[str]:\n \"\"\"Get dynamic imports for the component.\n\n Returns:\n The dynamic imports.\n \"\"\"\n\n @abstractmethod\n def _get_all_custom_code(self) -> dict[str, None]:\n \"\"\"Get custom code for the component.\n\n Returns:\n The custom code.\n \"\"\"\n\n @abstractmethod\n def _get_all_refs(self) -> dict[str, None]:\n \"\"\"Get the refs for the children of the component.\n\n Returns:\n The refs for the children.\n \"\"\"\n\n\nclass ComponentNamespace(SimpleNamespace):\n \"\"\"A namespace to manage components with subcomponents.\"\"\"\n\n def __hash__(self) -> int: # pyright: ignore [reportIncompatibleVariableOverride]\n \"\"\"Get the hash of the namespace.\n\n Returns:\n The hash of the namespace.\n \"\"\"\n return hash(type(self).__name__)\n\n\ndef evaluate_style_namespaces(style: ComponentStyle) -> dict:\n \"\"\"Evaluate namespaces in the style.\n\n Args:\n style: The style to evaluate.\n\n Returns:\n The evaluated style.\n \"\"\"\n return {\n k.__call__ if isinstance(k, ComponentNamespace) else k: v\n for k, v in style.items()\n }\n\n\n# Map from component to styling.\nComponentStyle = dict[str | type[BaseComponent] | Callable | ComponentNamespace, Any]\nComponentChildTypes = (*types.PrimitiveTypes, Var, BaseComponent, type(None))\n\n\ndef _satisfies_type_hint(obj: Any, type_hint: Any) -> bool:\n return types._isinstance(\n obj,\n type_hint,\n nested=1,\n treat_var_as_type=True,\n treat_mutable_obj_as_immutable=(\n isinstance(obj, Var) and not isinstance(obj, LiteralVar)\n ),\n )\n\n\ndef satisfies_type_hint(obj: Any, type_hint: Any) -> bool:\n \"\"\"Check if an object satisfies a type hint.\n\n Args:\n obj: The object to check.\n type_hint: The type hint to check against.\n\n Returns:\n Whether the object satisfies the type hint.\n \"\"\"\n if _satisfies_type_hint(obj, type_hint):\n return True\n if _satisfies_type_hint(obj, type_hint | None):\n obj = (\n obj\n if not isinstance(obj, Var)\n else (obj._var_value if isinstance(obj, LiteralVar) else obj)\n )\n console.warn(\n \"Passing None to a Var that is not explicitly marked as Optional (| None) is deprecated. \"\n f\"Passed {obj!s} of type {escape(str(type(obj) if not isinstance(obj, Var) else obj._var_type))} to {escape(str(type_hint))}.\"\n )\n return True\n return False\n\n\ndef _components_from(\n component_or_var: BaseComponent | Var,\n) -> tuple[BaseComponent, ...]:\n \"\"\"Get the components from a component or Var.\n\n Args:\n component_or_var: The component or Var to get the components from.\n\n Returns:\n The components.\n \"\"\"\n if isinstance(component_or_var, Var):\n var_data = component_or_var._get_all_var_data()\n return var_data.components if var_data else ()\n if isinstance(component_or_var, BaseComponent):\n return (component_or_var,)\n return ()\n\n\ndef _hash_str(value: str) -> str:\n return md5(f'\"{value}\"'.encode(), usedforsecurity=False).hexdigest()\n\n\ndef _hash_sequence(value: Sequence) -> str:\n return _hash_str(str([_deterministic_hash(v) for v in value]))\n\n\ndef _hash_dict(value: dict) -> str:\n return _hash_sequence(\n sorted([(k, _deterministic_hash(v)) for k, v in value.items()])\n )\n\n\ndef _deterministic_hash(value: object) -> str:\n \"\"\"Hash a rendered dictionary.\n\n Args:\n value: The dictionary to hash.\n\n Returns:\n The hash of the dictionary.\n\n Raises:\n TypeError: If the value is not hashable.\n \"\"\"\n if value is None:\n # Hash None as a special case.\n return \"None\"\n if isinstance(value, (int, float, enum.Enum)):\n # Hash numbers and booleans directly.\n return str(value)\n if isinstance(value, str):\n return _hash_str(value)\n if isinstance(value, dict):\n return _hash_dict(value)\n if isinstance(value, (tuple, list)):\n # Hash tuples by hashing each element.\n return _hash_sequence(value)\n if isinstance(value, Var):\n return _hash_str(\n str((value._js_expr, _deterministic_hash(value._get_all_var_data())))\n )\n if dataclasses.is_dataclass(value):\n return _hash_dict({\n k.name: getattr(value, k.name) for k in dataclasses.fields(value)\n })\n if isinstance(value, BaseComponent):\n # If the value is a component, hash its rendered code.\n return _hash_dict(value.render())\n\n msg = (\n f\"Cannot hash value `{value}` of type `{type(value).__name__}`. \"\n \"Only BaseComponent, Var, VarData, dict, str, tuple, and enum.Enum are supported.\"\n )\n raise TypeError(msg)\n\n\nDEFAULT_TRIGGERS: Mapping[str, types.ArgsSpec | Sequence[types.ArgsSpec]] = {\n EventTriggers.ON_FOCUS: no_args_event_spec,\n EventTriggers.ON_BLUR: no_args_event_spec,\n EventTriggers.ON_CLICK: pointer_event_spec, # pyright: ignore [reportAssignmentType]\n EventTriggers.ON_CONTEXT_MENU: pointer_event_spec, # pyright: ignore [reportAssignmentType]\n EventTriggers.ON_DOUBLE_CLICK: pointer_event_spec, # pyright: ignore [reportAssignmentType]\n EventTriggers.ON_MOUSE_DOWN: no_args_event_spec,\n EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,\n EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,\n EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,\n EventTriggers.ON_MOUSE_OUT: no_args_event_spec,\n EventTriggers.ON_MOUSE_OVER: no_args_event_spec,\n EventTriggers.ON_MOUSE_UP: no_args_event_spec,\n EventTriggers.ON_SCROLL: no_args_event_spec,\n EventTriggers.ON_SCROLL_END: no_args_event_spec,\n EventTriggers.ON_MOUNT: no_args_event_spec,\n EventTriggers.ON_UNMOUNT: no_args_event_spec,\n}\n\nT = TypeVar(\"T\", bound=\"Component\")\n\n\nclass Component(BaseComponent, ABC):\n \"\"\"A component with style, event trigger and other props.\"\"\"\n\n # The style of the component.\n style: Style = field(default_factory=Style, is_javascript_property=False)\n\n # A mapping from event triggers to event chains.\n event_triggers: dict[str, EventChain | Var] = field(\n default_factory=dict, is_javascript_property=False\n )\n\n # The alias for the tag.\n alias: str | None = field(default=None, is_javascript_property=False)\n\n # Whether the component is a global scope tag. True for tags like `html`, `head`, `body`.\n _is_tag_in_global_scope: ClassVar[bool] = False\n\n # Whether the import is default or named.\n is_default: bool | None = field(default=False, is_javascript_property=False)\n\n # A unique key for the component.\n key: Any = field(default=None, is_javascript_property=False)\n\n # The id for the component.\n id: Any = field(default=None, is_javascript_property=False)\n\n # The Var to pass as the ref to the component.\n ref: Var | None = field(default=None, is_javascript_property=False)\n\n # The class name for the component.\n class_name: Any = field(default=None, is_javascript_property=False)\n\n # Special component props.\n special_props: list[Var] = field(default_factory=list, is_javascript_property=False)\n\n # components that cannot be children\n _invalid_children: ClassVar[list[str]] = []\n\n # only components that are allowed as children\n _valid_children: ClassVar[list[str]] = []\n\n # only components that are allowed as parent\n _valid_parents: ClassVar[list[str]] = []\n\n # props to change the name of\n _rename_props: ClassVar[dict[str, str]] = {}\n\n # custom attribute\n custom_attrs: dict[str, Var | Any] = field(\n default_factory=dict, is_javascript_property=False\n )\n\n # When to memoize this component and its children.\n _memoization_mode: MemoizationMode = field(\n default_factory=MemoizationMode, is_javascript_property=False\n )\n\n # State class associated with this component instance\n State: type[reflex.state.State] | None = field(\n default=None, is_javascript_property=False\n )\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the component.\n\n This method should be implemented by subclasses to add new imports for the component.\n\n Implementations do NOT need to call super(). The result of calling\n add_imports in each parent class will be merged internally.\n\n Returns:\n The additional imports for this component subclass.\n\n The format of the return value is a dictionary where the keys are the\n library names (with optional npm-style version specifications) mapping\n to a single name to be imported, or a list names to be imported.\n\n For advanced use cases, the values can be ImportVar instances (for\n example, to provide an alias or mark that an import is the default\n export from the given library).\n\n ```python\n return {\n \"react\": \"useEffect\",\n \"react-draggable\": [\"DraggableCore\", rx.ImportVar(tag=\"Draggable\", is_default=True)],\n }\n ```\n \"\"\"\n return {}\n\n def add_hooks(self) -> list[str | Var]:\n \"\"\"Add hooks inside the component function.\n\n Hooks are pieces of literal Javascript code that is inserted inside the\n React component function.\n\n Each logical hook should be a separate string in the list.\n\n Common strings will be deduplicated and inserted into the component\n function only once, so define const variables and other identical code\n in their own strings to avoid defining the same const or hook multiple\n times.\n\n If a hook depends on specific data from the component instance, be sure\n to use unique values inside the string to _avoid_ deduplication.\n\n Implementations do NOT need to call super(). The result of calling\n add_hooks in each parent class will be merged and deduplicated internally.\n\n Returns:\n The additional hooks for this component subclass.\n\n ```python\n return [\n \"const [count, setCount] = useState(0);\",\n \"useEffect(() => { setCount((prev) => prev + 1); console.log(`mounted ${count} times`); }, []);\",\n ]\n ```\n \"\"\"\n return []\n\n def add_custom_code(self) -> list[str]:\n \"\"\"Add custom Javascript code into the page that contains this component.\n\n Custom code is inserted at module level, after any imports.\n\n Each string of custom code is deduplicated per-page, so take care to\n avoid defining the same const or function differently from different\n component instances.\n\n Custom code is useful for defining global functions or constants which\n can then be referenced inside hooks or used by component vars.\n\n Implementations do NOT need to call super(). The result of calling\n add_custom_code in each parent class will be merged and deduplicated internally.\n\n Returns:\n The additional custom code for this component subclass.\n\n ```python\n return [\n \"const translatePoints = (event) => { return { x: event.clientX, y: event.clientY }; };\",\n ]\n ```\n \"\"\"\n return []\n\n @classmethod\n def __init_subclass__(cls, **kwargs):\n \"\"\"Set default properties.\n\n Args:\n **kwargs: The kwargs to pass to the superclass.\n \"\"\"\n super().__init_subclass__(**kwargs)\n\n # Ensure renamed props from parent classes are applied to the subclass.\n if cls._rename_props:\n inherited_rename_props = {}\n for parent in reversed(cls.mro()):\n if issubclass(parent, Component) and parent._rename_props:\n inherited_rename_props.update(parent._rename_props)\n cls._rename_props = inherited_rename_props\n\n def __init__(self, **kwargs):\n \"\"\"Initialize the custom component.\n\n Args:\n **kwargs: The kwargs to pass to the component.\n \"\"\"\n console.error(\n \"Instantiating components directly is not supported.\"\n f\" Use `{self.__class__.__name__}.create` method instead.\"\n )\n\n def _post_init(self, *args, **kwargs):\n \"\"\"Initialize the component.\n\n Args:\n *args: Args to initialize the component.\n **kwargs: Kwargs to initialize the component.\n\n Raises:\n TypeError: If an invalid prop is passed.\n ValueError: If an event trigger passed is not valid.\n \"\"\"\n # Set the id and children initially.\n children = kwargs.get(\"children\", [])\n\n self._validate_component_children(children)\n\n # Get the component fields, triggers, and props.\n fields = self.get_fields()\n component_specific_triggers = self.get_event_triggers()\n props = self.get_props()\n\n # Add any events triggers.\n if \"event_triggers\" not in kwargs:\n kwargs[\"event_triggers\"] = {}\n kwargs[\"event_triggers\"] = kwargs[\"event_triggers\"].copy()\n\n # Iterate through the kwargs and set the props.\n for key, value in kwargs.items():\n if (\n key.startswith(\"on_\")\n and key not in component_specific_triggers\n and key not in props\n ):\n valid_triggers = sorted(component_specific_triggers.keys())\n msg = (\n f\"The {(comp_name := type(self).__name__)} does not take in an `{key}` event trigger. \"\n f\"Valid triggers for {comp_name}: {valid_triggers}. \"\n f\"If {comp_name} is a third party component make sure to add `{key}` to the component's event triggers. \"\n f\"visit https://reflex.dev/docs/wrapping-react/guide/#event-triggers for more info.\"\n )\n raise ValueError(msg)\n if key in component_specific_triggers:\n # Event triggers are bound to event chains.\n is_var = False\n elif key in props:\n # Set the field type.\n is_var = (\n field.type_origin is Var if (field := fields.get(key)) else False\n )\n else:\n continue\n\n # Check whether the key is a component prop.\n if is_var:\n try:\n kwargs[key] = LiteralVar.create(value)\n\n # Get the passed type and the var type.\n passed_type = kwargs[key]._var_type\n expected_type = types.get_args(\n types.get_field_type(type(self), key)\n )[0]\n except TypeError:\n # If it is not a valid var, check the base types.\n passed_type = type(value)\n expected_type = types.get_field_type(type(self), key)\n\n if not satisfies_type_hint(value, expected_type):\n value_name = value._js_expr if isinstance(value, Var) else value\n\n additional_info = (\n \" You can call `.bool()` on the value to convert it to a boolean.\"\n if expected_type is bool and isinstance(value, Var)\n else \"\"\n )\n\n raise TypeError(\n f\"Invalid var passed for prop {type(self).__name__}.{key}, expected type {expected_type}, got value {value_name} of type {passed_type}.\"\n + additional_info\n )\n # Check if the key is an event trigger.\n if key in component_specific_triggers:\n kwargs[\"event_triggers\"][key] = EventChain.create(\n value=value,\n args_spec=component_specific_triggers[key],\n key=key,\n )\n\n # Remove any keys that were added as events.\n for key in kwargs[\"event_triggers\"]:\n kwargs.pop(key, None)\n\n # Place data_ and aria_ attributes into custom_attrs\n special_attributes = [\n key\n for key in kwargs\n if key not in fields and SpecialAttributes.is_special(key)\n ]\n if special_attributes:\n custom_attrs = kwargs.setdefault(\"custom_attrs\", {})\n custom_attrs.update({\n format.to_kebab_case(key): kwargs.pop(key) for key in special_attributes\n })\n\n # Add style props to the component.\n style = kwargs.get(\"style\", {})\n if isinstance(style, Sequence):\n if any(not isinstance(s, Mapping) for s in style):\n msg = \"Style must be a dictionary or a list of dictionaries.\"\n raise TypeError(msg)\n # Merge styles, the later ones overriding keys in the earlier ones.\n style = {\n k: v\n for style_dict in style\n for k, v in cast(Mapping, style_dict).items()\n }\n\n if isinstance(style, (Breakpoints, Var)):\n style = {\n # Assign the Breakpoints to the self-referential selector to avoid squashing down to a regular dict.\n \"&\": style,\n }\n\n fields_style = self.get_fields()[\"style\"]\n\n kwargs[\"style\"] = Style({\n **fields_style.default_value(),\n **style,\n **{attr: value for attr, value in kwargs.items() if attr not in fields},\n })\n\n # Convert class_name to str if it's list\n class_name = kwargs.get(\"class_name\", \"\")\n if isinstance(class_name, (list, tuple)):\n has_var = False\n for c in class_name:\n if isinstance(c, str):\n continue\n if isinstance(c, Var):\n if not isinstance(c, StringVar) and not issubclass(\n c._var_type, str\n ):\n msg = f\"Invalid class_name passed for prop {type(self).__name__}.class_name, expected type str, got value {c._js_expr} of type {c._var_type}.\"\n raise TypeError(msg)\n has_var = True\n else:\n msg = f\"Invalid class_name passed for prop {type(self).__name__}.class_name, expected type str, got value {c} of type {type(c)}.\"\n raise TypeError(msg)\n if has_var:\n kwargs[\"class_name\"] = LiteralArrayVar.create(\n class_name, _var_type=list[str]\n ).join(\" \")\n else:\n kwargs[\"class_name\"] = \" \".join(class_name)\n elif (\n isinstance(class_name, Var)\n and not isinstance(class_name, StringVar)\n and not issubclass(class_name._var_type, str)\n ):\n msg = f\"Invalid class_name passed for prop {type(self).__name__}.class_name, expected type str, got value {class_name._js_expr} of type {class_name._var_type}.\"\n raise TypeError(msg)\n # Construct the component.\n for key, value in kwargs.items():\n setattr(self, key, value)\n\n @classmethod\n def get_event_triggers(cls) -> dict[str, types.ArgsSpec | Sequence[types.ArgsSpec]]:\n \"\"\"Get the event triggers for the component.\n\n Returns:\n The event triggers.\n \"\"\"\n # Look for component specific triggers,\n # e.g. variable declared as EventHandler types.\n return DEFAULT_TRIGGERS | args_specs_from_fields(cls.get_fields()) # pyright: ignore [reportOperatorIssue]\n\n def __repr__(self) -> str:\n \"\"\"Represent the component in React.\n\n Returns:\n The code to render the component.\n \"\"\"\n return format.json_dumps(self.render())\n\n def __str__(self) -> str:\n \"\"\"Represent the component in React.\n\n Returns:\n The code to render the component.\n \"\"\"\n from reflex.compiler.compiler import _compile_component\n\n return _compile_component(self)\n\n def _exclude_props(self) -> list[str]:\n \"\"\"Props to exclude when adding the component props to the Tag.\n\n Returns:\n A list of component props to exclude.\n \"\"\"\n return []\n\n def _render(self, props: dict[str, Any] | None = None) -> Tag:\n \"\"\"Define how to render the component in React.\n\n Args:\n props: The props to render (if None, then use get_props).\n\n Returns:\n The tag to render.\n \"\"\"\n # Create the base tag.\n name = (self.tag if not self.alias else self.alias) or \"\"\n if self._is_tag_in_global_scope and self.library is None:\n name = '\"' + name + '\"'\n\n # Create the base tag.\n tag = Tag(\n name=name,\n special_props=self.special_props.copy(),\n )\n\n if props is None:\n # Add component props to the tag.\n props = {\n attr.removesuffix(\"_\"): getattr(self, attr) for attr in self.get_props()\n }\n\n # Add ref to element if `ref` is None and `id` is not None.\n if self.ref is not None:\n props[\"ref\"] = self.ref\n elif (ref := self.get_ref()) is not None:\n props[\"ref\"] = Var(_js_expr=ref)\n else:\n props = props.copy()\n\n props.update(\n **{\n trigger: handler\n for trigger, handler in self.event_triggers.items()\n if trigger not in {EventTriggers.ON_MOUNT, EventTriggers.ON_UNMOUNT}\n },\n key=self.key,\n id=self.id,\n class_name=self.class_name,\n )\n props.update(self._get_style())\n props.update(self.custom_attrs)\n\n # remove excluded props from prop dict before adding to tag.\n for prop_to_exclude in self._exclude_props():\n props.pop(prop_to_exclude, None)\n\n return tag.add_props(**props)\n\n @classmethod\n @functools.cache\n def get_props(cls) -> Iterable[str]:\n \"\"\"Get the unique fields for the component.\n\n Returns:\n The unique fields.\n \"\"\"\n return cls.get_js_fields()\n\n @classmethod\n @functools.cache\n def get_initial_props(cls) -> set[str]:\n \"\"\"Get the initial props to set for the component.\n\n Returns:\n The initial props to set.\n \"\"\"\n return set()\n\n @functools.cached_property\n def _get_component_prop_property(self) -> Sequence[BaseComponent]:\n return [\n component\n for prop in self.get_props()\n if (value := getattr(self, prop)) is not None\n and isinstance(value, (BaseComponent, Var))\n for component in _components_from(value)\n ]\n\n def _get_components_in_props(self) -> Sequence[BaseComponent]:\n \"\"\"Get the components in the props.\n\n Returns:\n The components in the props\n \"\"\"\n return self._get_component_prop_property\n\n @classmethod\n def _validate_children(cls, children: tuple | list):\n from reflex.utils.exceptions import ChildrenTypeError\n\n for child in children:\n if isinstance(child, (tuple, list)):\n cls._validate_children(child)\n\n # Make sure the child is a valid type.\n if isinstance(child, dict) or not isinstance(child, ComponentChildTypes):\n raise ChildrenTypeError(component=cls.__name__, child=child)\n\n @classmethod\n def create(cls: type[T], *children, **props) -> T:\n \"\"\"Create the component.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The component.\n \"\"\"\n # Import here to avoid circular imports.\n from reflex.components.base.bare import Bare\n from reflex.components.base.fragment import Fragment\n\n # Filter out None props\n props = {key: value for key, value in props.items() if value is not None}\n\n # Validate all the children.\n cls._validate_children(children)\n\n children_normalized = [\n (\n child\n if isinstance(child, Component)\n else (\n Fragment.create(*child)\n if isinstance(child, tuple)\n else Bare.create(contents=LiteralVar.create(child))\n )\n )\n for child in children\n ]\n\n return cls._create(children_normalized, **props)\n\n @classmethod\n def _create(cls: type[T], children: Sequence[BaseComponent], **props: Any) -> T:\n \"\"\"Create the component.\n\n Args:\n children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The component.\n \"\"\"\n comp = cls.__new__(cls)\n super(Component, comp).__init__(id=props.get(\"id\"), children=list(children))\n comp._post_init(children=list(children), **props)\n return comp\n\n @classmethod\n def _unsafe_create(\n cls: type[T], children: Sequence[BaseComponent], **props: Any\n ) -> T:\n \"\"\"Create the component without running post_init.\n\n Args:\n children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The component.\n \"\"\"\n comp = cls.__new__(cls)\n super(Component, comp).__init__(id=props.get(\"id\"), children=list(children))\n for prop, value in props.items():\n setattr(comp, prop, value)\n return comp\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Downstream components can override this method to return a style dict\n that will be applied to the component.\n\n Returns:\n The style to add.\n \"\"\"\n return None\n\n def _add_style(self) -> Style:\n \"\"\"Call add_style for all bases in the MRO.\n\n Downstream components should NOT override. Use add_style instead.\n\n Returns:\n The style to add.\n \"\"\"\n styles = []\n\n # Walk the MRO to call all `add_style` methods.\n for base in self._iter_parent_classes_with_method(\"add_style\"):\n s = base.add_style(self)\n if s is not None:\n styles.append(s)\n\n style_ = Style()\n for s in reversed(styles):\n style_.update(s)\n return style_\n\n def _get_component_style(self, styles: ComponentStyle | Style) -> Style | None:\n \"\"\"Get the style to the component from `App.style`.\n\n Args:\n styles: The style to apply.\n\n Returns:\n The style of the component.\n \"\"\"\n component_style = None\n if (style := styles.get(type(self))) is not None: # pyright: ignore [reportArgumentType]\n component_style = Style(style)\n if (style := styles.get(self.create)) is not None: # pyright: ignore [reportArgumentType]\n component_style = Style(style)\n return component_style\n\n def _add_style_recursive(\n self, style: ComponentStyle | Style, theme: Component | None = None\n ) -> Component:\n \"\"\"Add additional style to the component and its children.\n\n Apply order is as follows (with the latest overriding the earliest):\n 1. Default style from `_add_style`/`add_style`.\n 2. User-defined style from `App.style`.\n 3. User-defined style from `Component.style`.\n 4. style dict and css props passed to the component instance.\n\n Args:\n style: A dict from component to styling.\n theme: The theme to apply. (for retro-compatibility with deprecated _apply_theme API)\n\n Returns:\n The component with the additional style.\n\n Raises:\n UserWarning: If `_add_style` has been overridden.\n \"\"\"\n # 1. Default style from `_add_style`/`add_style`.\n if type(self)._add_style != Component._add_style:\n msg = \"Do not override _add_style directly. Use add_style instead.\"\n raise UserWarning(msg)\n new_style = self._add_style()\n style_vars = [new_style._var_data]\n\n # 2. User-defined style from `App.style`.\n component_style = self._get_component_style(style)\n if component_style:\n new_style.update(component_style)\n style_vars.append(component_style._var_data)\n\n # 4. style dict and css props passed to the component instance.\n new_style.update(self.style)\n style_vars.append(self.style._var_data)\n\n new_style._var_data = VarData.merge(*style_vars)\n\n # Assign the new style\n self.style = new_style\n\n # Recursively add style to the children.\n for child in self.children:\n # Skip BaseComponent and StatefulComponent children.\n if not isinstance(child, Component):\n continue\n child._add_style_recursive(style, theme)\n return self\n\n def _get_style(self) -> dict:\n \"\"\"Get the style for the component.\n\n Returns:\n The dictionary of the component style as value and the style notation as key.\n \"\"\"\n if isinstance(self.style, Var):\n return {\"css\": self.style}\n emotion_style = format_as_emotion(self.style)\n return (\n {\"css\": LiteralVar.create(emotion_style)}\n if emotion_style is not None\n else {}\n )\n\n def render(self) -> dict:\n \"\"\"Render the component.\n\n Returns:\n The dictionary for template of component.\n \"\"\"\n tag = self._render()\n rendered_dict = dict(\n tag.set(\n children=[child.render() for child in self.children],\n )\n )\n self._replace_prop_names(rendered_dict)\n return rendered_dict\n\n def _replace_prop_names(self, rendered_dict: dict) -> None:\n \"\"\"Replace the prop names in the render dictionary.\n\n Args:\n rendered_dict: The render dictionary with all the component props and event handlers.\n \"\"\"\n # fast path\n if not self._rename_props:\n return\n\n for ix, prop in enumerate(rendered_dict[\"props\"]):\n for old_prop, new_prop in self._rename_props.items():\n if prop.startswith(old_prop):\n rendered_dict[\"props\"][ix] = prop.replace(old_prop, new_prop, 1)\n\n def _validate_component_children(self, children: list[Component]):\n \"\"\"Validate the children components.\n\n Args:\n children: The children of the component.\n\n \"\"\"\n from reflex.components.base.fragment import Fragment\n from reflex.components.core.cond import Cond\n from reflex.components.core.foreach import Foreach\n from reflex.components.core.match import Match\n\n no_valid_parents_defined = all(child._valid_parents == [] for child in children)\n if (\n not self._invalid_children\n and not self._valid_children\n and no_valid_parents_defined\n ):\n return\n\n comp_name = type(self).__name__\n allowed_components = [\n comp.__name__ for comp in (Fragment, Foreach, Cond, Match)\n ]\n\n def validate_child(child: Any):\n child_name = type(child).__name__\n\n # Iterate through the immediate children of fragment\n if isinstance(child, Fragment):\n for c in child.children:\n validate_child(c)\n\n if isinstance(child, Cond):\n validate_child(child.children[0])\n validate_child(child.children[1])\n\n if isinstance(child, Match):\n for cases in child.match_cases:\n validate_child(cases[-1])\n validate_child(child.default)\n\n if self._invalid_children and child_name in self._invalid_children:\n msg = f\"The component `{comp_name}` cannot have `{child_name}` as a child component\"\n raise ValueError(msg)\n\n if self._valid_children and child_name not in [\n *self._valid_children,\n *allowed_components,\n ]:\n valid_child_list = \", \".join([\n f\"`{v_child}`\" for v_child in self._valid_children\n ])\n msg = f\"The component `{comp_name}` only allows the components: {valid_child_list} as children. Got `{child_name}` instead.\"\n raise ValueError(msg)\n\n if child._valid_parents and all(\n clz_name not in [*child._valid_parents, *allowed_components]\n for clz_name in self._iter_parent_classes_names()\n ):\n valid_parent_list = \", \".join([\n f\"`{v_parent}`\" for v_parent in child._valid_parents\n ])\n msg = f\"The component `{child_name}` can only be a child of the components: {valid_parent_list}. Got `{comp_name}` instead.\"\n raise ValueError(msg)\n\n for child in children:\n validate_child(child)\n\n @staticmethod\n def _get_vars_from_event_triggers(\n event_triggers: dict[str, EventChain | Var],\n ) -> Iterator[tuple[str, list[Var]]]:\n \"\"\"Get the Vars associated with each event trigger.\n\n Args:\n event_triggers: The event triggers from the component instance.\n\n Yields:\n tuple of (event_name, event_vars)\n \"\"\"\n for event_trigger, event in event_triggers.items():\n if isinstance(event, Var):\n yield event_trigger, [event]\n elif isinstance(event, EventChain):\n event_args = []\n for spec in event.events:\n if isinstance(spec, EventSpec):\n for args in spec.args:\n event_args.extend(args)\n else:\n event_args.append(spec)\n yield event_trigger, event_args\n\n def _get_vars(\n self, include_children: bool = False, ignore_ids: set[int] | None = None\n ) -> Iterator[Var]:\n \"\"\"Walk all Vars used in this component.\n\n Args:\n include_children: Whether to include Vars from children.\n ignore_ids: The ids to ignore.\n\n Yields:\n Each var referenced by the component (props, styles, event handlers).\n \"\"\"\n ignore_ids = ignore_ids or set()\n vars: list[Var] | None = getattr(self, \"__vars\", None)\n if vars is not None:\n yield from vars\n vars = self.__vars = []\n # Get Vars associated with event trigger arguments.\n for _, event_vars in self._get_vars_from_event_triggers(self.event_triggers):\n vars.extend(event_vars)\n\n # Get Vars associated with component props.\n for prop in self.get_props():\n prop_var = getattr(self, prop)\n if isinstance(prop_var, Var):\n vars.append(prop_var)\n\n # Style keeps track of its own VarData instance, so embed in a temp Var that is yielded.\n if (isinstance(self.style, dict) and self.style) or isinstance(self.style, Var):\n vars.append(\n Var(\n _js_expr=\"style\",\n _var_type=str,\n _var_data=VarData.merge(self.style._var_data),\n )\n )\n\n # Special props are always Var instances.\n vars.extend(self.special_props)\n\n # Get Vars associated with common Component props.\n for comp_prop in (\n self.class_name,\n self.id,\n self.key,\n *self.custom_attrs.values(),\n ):\n if isinstance(comp_prop, Var):\n vars.append(comp_prop)\n elif isinstance(comp_prop, str):\n # Collapse VarData encoded in f-strings.\n var = LiteralStringVar.create(comp_prop)\n if var._get_all_var_data() is not None:\n vars.append(var)\n\n # Get Vars associated with children.\n if include_children:\n for child in self.children:\n if not isinstance(child, Component) or id(child) in ignore_ids:\n continue\n ignore_ids.add(id(child))\n child_vars = child._get_vars(\n include_children=include_children, ignore_ids=ignore_ids\n )\n vars.extend(child_vars)\n\n yield from vars\n\n def _event_trigger_values_use_state(self) -> bool:\n \"\"\"Check if the values of a component's event trigger use state.\n\n Returns:\n True if any of the component's event trigger values uses State.\n \"\"\"\n for trigger in self.event_triggers.values():\n if isinstance(trigger, EventChain):\n for event in trigger.events:\n if isinstance(event, EventCallback):\n continue\n if isinstance(event, EventSpec):\n if (\n event.handler.state_full_name\n and event.handler.state_full_name != FRONTEND_EVENT_STATE\n ):\n return True\n else:\n if event._var_state:\n return True\n elif isinstance(trigger, Var) and trigger._var_state:\n return True\n return False\n\n def _has_stateful_event_triggers(self):\n \"\"\"Check if component or children have any event triggers that use state.\n\n Returns:\n True if the component or children have any event triggers that uses state.\n \"\"\"\n if self.event_triggers and self._event_trigger_values_use_state():\n return True\n for child in self.children:\n if isinstance(child, Component) and child._has_stateful_event_triggers():\n return True\n return False\n\n @classmethod\n def _iter_parent_classes_names(cls) -> Iterator[str]:\n for clz in cls.mro():\n if clz is Component:\n break\n yield clz.__name__\n\n @classmethod\n def _iter_parent_classes_with_method(cls, method: str) -> Sequence[type[Component]]:\n \"\"\"Iterate through parent classes that define a given method.\n\n Used for handling the `add_*` API functions that internally simulate a super() call chain.\n\n Args:\n method: The method to look for.\n\n Returns:\n A sequence of parent classes that define the method (differently than the base).\n \"\"\"\n current_class_method = getattr(Component, method, None)\n seen_methods = (\n {current_class_method} if current_class_method is not None else set()\n )\n clzs: list[type[Component]] = []\n for clz in cls.mro():\n if clz is Component:\n break\n if not issubclass(clz, Component):\n continue\n method_func = getattr(clz, method, None)\n if not callable(method_func) or method_func in seen_methods:\n continue\n seen_methods.add(method_func)\n clzs.append(clz)\n return clzs\n\n def _get_custom_code(self) -> str | None:\n \"\"\"Get custom code for the component.\n\n Returns:\n The custom code.\n \"\"\"\n return None\n\n def _get_all_custom_code(self) -> dict[str, None]:\n \"\"\"Get custom code for the component and its children.\n\n Returns:\n The custom code.\n \"\"\"\n # Store the code in a set to avoid duplicates.\n code: dict[str, None] = {}\n\n # Add the custom code for this component.\n custom_code = self._get_custom_code()\n if custom_code is not None:\n code[custom_code] = None\n\n for component in self._get_components_in_props():\n code |= component._get_all_custom_code()\n\n # Add the custom code from add_custom_code method.\n for clz in self._iter_parent_classes_with_method(\"add_custom_code\"):\n for item in clz.add_custom_code(self):\n code[item] = None\n\n # Add the custom code for the children.\n for child in self.children:\n code |= child._get_all_custom_code()\n\n # Return the code.\n return code\n\n def _get_dynamic_imports(self) -> str | None:\n \"\"\"Get dynamic import for the component.\n\n Returns:\n The dynamic import.\n \"\"\"\n return None\n\n def _get_all_dynamic_imports(self) -> set[str]:\n \"\"\"Get dynamic imports for the component and its children.\n\n Returns:\n The dynamic imports.\n \"\"\"\n # Store the import in a set to avoid duplicates.\n dynamic_imports: set[str] = set()\n\n # Get dynamic import for this component.\n dynamic_import = self._get_dynamic_imports()\n if dynamic_import:\n dynamic_imports.add(dynamic_import)\n\n # Get the dynamic imports from children\n for child in self.children:\n dynamic_imports |= child._get_all_dynamic_imports()\n\n for component in self._get_components_in_props():\n dynamic_imports |= component._get_all_dynamic_imports()\n\n # Return the dynamic imports\n return dynamic_imports\n\n def _get_dependencies_imports(self) -> ParsedImportDict:\n \"\"\"Get the imports from lib_dependencies for installing.\n\n Returns:\n The dependencies imports of the component.\n \"\"\"\n return {\n dep: [ImportVar(tag=None, render=False)] for dep in self.lib_dependencies\n }\n\n def _get_hooks_imports(self) -> ParsedImportDict:\n \"\"\"Get the imports required by certain hooks.\n\n Returns:\n The imports required for all selected hooks.\n \"\"\"\n imports_ = {}\n\n if self._get_ref_hook() is not None:\n # Handle hooks needed for attaching react refs to DOM nodes.\n imports_.setdefault(\"react\", set()).add(ImportVar(tag=\"useRef\"))\n imports_.setdefault(f\"$/{Dirs.STATE_PATH}\", set()).add(\n ImportVar(tag=\"refs\")\n )\n\n if self._get_mount_lifecycle_hook():\n # Handle hooks for `on_mount` / `on_unmount`.\n imports_.setdefault(\"react\", set()).add(ImportVar(tag=\"useEffect\"))\n\n other_imports = []\n user_hooks = self._get_hooks()\n user_hooks_data = (\n VarData.merge(user_hooks._get_all_var_data())\n if user_hooks is not None and isinstance(user_hooks, Var)\n else None\n )\n if user_hooks_data is not None:\n other_imports.append(user_hooks_data.imports)\n other_imports.extend(\n hook_vardata.imports\n for hook_vardata in self._get_added_hooks().values()\n if hook_vardata is not None\n )\n\n return imports.merge_imports(imports_, *other_imports)\n\n def _get_imports(self) -> ParsedImportDict:\n \"\"\"Get all the libraries and fields that are used by the component.\n\n Returns:\n The imports needed by the component.\n \"\"\"\n imports_ = (\n {self.library: [self.import_var]}\n if self.library is not None and self.tag is not None\n else {}\n )\n\n # Get static imports required for event processing.\n event_imports = Imports.EVENTS if self.event_triggers else {}\n\n # Collect imports from Vars used directly by this component.\n var_imports = [\n dict(var_data.imports)\n for var in self._get_vars()\n if (var_data := var._get_all_var_data()) is not None\n ]\n\n added_import_dicts: list[ParsedImportDict] = []\n for clz in self._iter_parent_classes_with_method(\"add_imports\"):\n list_of_import_dict = clz.add_imports(self)\n\n if not isinstance(list_of_import_dict, list):\n added_import_dicts.append(imports.parse_imports(list_of_import_dict))\n else:\n added_import_dicts.extend([\n imports.parse_imports(item) for item in list_of_import_dict\n ])\n\n return imports.merge_parsed_imports(\n self._get_dependencies_imports(),\n self._get_hooks_imports(),\n imports_,\n event_imports,\n *var_imports,\n *added_import_dicts,\n )\n\n def _get_all_imports(self, collapse: bool = False) -> ParsedImportDict:\n \"\"\"Get all the libraries and fields that are used by the component and its children.\n\n Args:\n collapse: Whether to collapse the imports by removing duplicates.\n\n Returns:\n The import dict with the required imports.\n \"\"\"\n imports_ = imports.merge_parsed_imports(\n self._get_imports(), *[child._get_all_imports() for child in self.children]\n )\n return imports.collapse_imports(imports_) if collapse else imports_\n\n def _get_mount_lifecycle_hook(self) -> str | None:\n \"\"\"Generate the component lifecycle hook.\n\n Returns:\n The useEffect hook for managing `on_mount` and `on_unmount` events.\n \"\"\"\n # pop on_mount and on_unmount from event_triggers since these are handled by\n # hooks, not as actually props in the component\n on_mount = self.event_triggers.get(EventTriggers.ON_MOUNT, None)\n on_unmount = self.event_triggers.get(EventTriggers.ON_UNMOUNT, None)\n if on_mount is not None:\n on_mount = str(LiteralVar.create(on_mount)) + \"()\"\n if on_unmount is not None:\n on_unmount = str(LiteralVar.create(on_unmount)) + \"()\"\n if on_mount is not None or on_unmount is not None:\n return f\"\"\"\n useEffect(() => {{\n {on_mount or \"\"}\n return () => {{\n {on_unmount or \"\"}\n }}\n }}, []);\"\"\"\n return None\n\n def _get_ref_hook(self) -> Var | None:\n \"\"\"Generate the ref hook for the component.\n\n Returns:\n The useRef hook for managing refs.\n \"\"\"\n ref = self.get_ref()\n if ref is not None:\n return Var(\n f\"const {ref} = useRef(null); {Var(_js_expr=ref)._as_ref()!s} = {ref};\",\n _var_data=VarData(position=Hooks.HookPosition.INTERNAL),\n )\n return None\n\n def _get_vars_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Get the hooks required by vars referenced in this component.\n\n Returns:\n The hooks for the vars.\n \"\"\"\n vars_hooks = {}\n for var in self._get_vars():\n var_data = var._get_all_var_data()\n if var_data is not None:\n vars_hooks.update(\n var_data.hooks\n if isinstance(var_data.hooks, dict)\n else {\n k: VarData(position=Hooks.HookPosition.INTERNAL)\n for k in var_data.hooks\n }\n )\n for component in var_data.components:\n vars_hooks.update(component._get_all_hooks())\n return vars_hooks\n\n def _get_events_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Get the hooks required by events referenced in this component.\n\n Returns:\n The hooks for the events.\n \"\"\"\n return (\n {Hooks.EVENTS: VarData(position=Hooks.HookPosition.INTERNAL)}\n if self.event_triggers\n else {}\n )\n\n def _get_hooks_internal(self) -> dict[str, VarData | None]:\n \"\"\"Get the React hooks for this component managed by the framework.\n\n Downstream components should NOT override this method to avoid breaking\n framework functionality.\n\n Returns:\n The internally managed hooks.\n \"\"\"\n return {\n **{\n str(hook): VarData(position=Hooks.HookPosition.INTERNAL)\n for hook in [self._get_ref_hook(), self._get_mount_lifecycle_hook()]\n if hook is not None\n },\n **self._get_vars_hooks(),\n **self._get_events_hooks(),\n }\n\n def _get_added_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Get the hooks added via `add_hooks` method.\n\n Returns:\n The deduplicated hooks and imports added by the component and parent components.\n \"\"\"\n code = {}\n\n def extract_var_hooks(hook: Var):\n var_data = VarData.merge(hook._get_all_var_data())\n if var_data is not None:\n for sub_hook in var_data.hooks:\n code[sub_hook] = None\n\n if str(hook) in code:\n code[str(hook)] = VarData.merge(var_data, code[str(hook)])\n else:\n code[str(hook)] = var_data\n\n # Add the hook code from add_hooks for each parent class (this is reversed to preserve\n # the order of the hooks in the final output)\n for clz in reversed(self._iter_parent_classes_with_method(\"add_hooks\")):\n for hook in clz.add_hooks(self):\n if isinstance(hook, Var):\n extract_var_hooks(hook)\n else:\n code[hook] = None\n\n return code\n\n def _get_hooks(self) -> str | None:\n \"\"\"Get the React hooks for this component.\n\n Downstream components should override this method to add their own hooks.\n\n Returns:\n The hooks for just this component.\n \"\"\"\n return\n\n def _get_all_hooks_internal(self) -> dict[str, VarData | None]:\n \"\"\"Get the reflex internal hooks for the component and its children.\n\n Returns:\n The code that should appear just before user-defined hooks.\n \"\"\"\n # Store the code in a set to avoid duplicates.\n code = self._get_hooks_internal()\n\n # Add the hook code for the children.\n for child in self.children:\n code.update(child._get_all_hooks_internal())\n\n return code\n\n def _get_all_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Get the React hooks for this component and its children.\n\n Returns:\n The code that should appear just before returning the rendered component.\n \"\"\"\n code = {}\n\n # Add the internal hooks for this component.\n code.update(self._get_hooks_internal())\n\n # Add the hook code for this component.\n hooks = self._get_hooks()\n if hooks is not None:\n code[hooks] = None\n\n code.update(self._get_added_hooks())\n\n # Add the hook code for the children.\n for child in self.children:\n code.update(child._get_all_hooks())\n\n return code\n\n def get_ref(self) -> str | None:\n \"\"\"Get the name of the ref for the component.\n\n Returns:\n The ref name.\n \"\"\"\n # do not create a ref if the id is dynamic or unspecified\n if self.id is None or isinstance(self.id, Var):\n return None\n return format.format_ref(self.id)\n\n def _get_all_refs(self) -> dict[str, None]:\n \"\"\"Get the refs for the children of the component.\n\n Returns:\n The refs for the children.\n \"\"\"\n refs = {}\n ref = self.get_ref()\n if ref is not None:\n refs[ref] = None\n for child in self.children:\n refs |= child._get_all_refs()\n for component in self._get_components_in_props():\n refs |= component._get_all_refs()\n\n return refs\n\n @property\n def import_var(self):\n \"\"\"The tag to import.\n\n Returns:\n An import var.\n \"\"\"\n # If the tag is dot-qualified, only import the left-most name.\n tag = self.tag.partition(\".\")[0] if self.tag else None\n alias = self.alias.partition(\".\")[0] if self.alias else None\n return ImportVar(tag=tag, is_default=self.is_default, alias=alias)\n\n @staticmethod\n def _get_app_wrap_components() -> dict[tuple[int, str], Component]:\n \"\"\"Get the app wrap components for the component.\n\n Returns:\n The app wrap components.\n \"\"\"\n return {}\n\n def _get_all_app_wrap_components(\n self, *, ignore_ids: set[int] | None = None\n ) -> dict[tuple[int, str], Component]:\n \"\"\"Get the app wrap components for the component and its children.\n\n Args:\n ignore_ids: A set of component IDs to ignore. Used to avoid duplicates.\n\n Returns:\n The app wrap components.\n \"\"\"\n ignore_ids = ignore_ids or set()\n # Store the components in a set to avoid duplicates.\n components = self._get_app_wrap_components()\n\n for component in tuple(components.values()):\n component_id = id(component)\n if component_id in ignore_ids:\n continue\n ignore_ids.add(component_id)\n components.update(\n component._get_all_app_wrap_components(ignore_ids=ignore_ids)\n )\n\n # Add the app wrap components for the children.\n for child in self.children:\n child_id = id(child)\n # Skip BaseComponent and StatefulComponent children.\n if not isinstance(child, Component) or child_id in ignore_ids:\n continue\n ignore_ids.add(child_id)\n components.update(child._get_all_app_wrap_components(ignore_ids=ignore_ids))\n\n # Return the components.\n return components\n\n\nclass CustomComponent(Component):\n \"\"\"A custom user-defined component.\"\"\"\n\n # Use the components library.\n library = f\"$/{Dirs.COMPONENTS_PATH}\"\n\n # The function that creates the component.\n component_fn: Callable[..., Component] = field(default=Component.create)\n\n # The props of the component.\n props: dict[str, Any] = field(default_factory=dict)\n\n def _post_init(self, **kwargs):\n \"\"\"Initialize the custom component.\n\n Args:\n **kwargs: The kwargs to pass to the component.\n \"\"\"\n component_fn = kwargs.get(\"component_fn\")\n\n # Set the props.\n props_types = typing.get_type_hints(component_fn) if component_fn else {}\n props = {key: value for key, value in kwargs.items() if key in props_types}\n kwargs = {key: value for key, value in kwargs.items() if key not in props_types}\n\n event_types = {\n key\n for key in props\n if (\n (get_origin((annotation := props_types.get(key))) or annotation)\n == EventHandler\n )\n }\n\n def get_args_spec(key: str) -> types.ArgsSpec | Sequence[types.ArgsSpec]:\n type_ = props_types[key]\n\n return (\n args[0]\n if (args := get_args(type_))\n else (\n annotation_args[1]\n if get_origin(\n annotation := inspect.getfullargspec(component_fn).annotations[\n key\n ]\n )\n is typing.Annotated\n and (annotation_args := get_args(annotation))\n else no_args_event_spec\n )\n )\n\n super()._post_init(\n event_triggers={\n key: EventChain.create(\n value=props[key],\n args_spec=get_args_spec(key),\n key=key,\n )\n for key in event_types\n },\n **kwargs,\n )\n\n to_camel_cased_props = {\n format.to_camel_case(key): None for key in props if key not in event_types\n }\n self.get_props = lambda: to_camel_cased_props # pyright: ignore [reportIncompatibleVariableOverride]\n\n # Unset the style.\n self.style = Style()\n\n # Set the tag to the name of the function.\n self.tag = format.to_title_case(self.component_fn.__name__)\n\n for key, value in props.items():\n # Skip kwargs that are not props.\n if key not in props_types:\n continue\n\n camel_cased_key = format.to_camel_case(key)\n\n # Get the type based on the annotation.\n type_ = props_types[key]\n\n # Handle event chains.\n if type_ is EventHandler:\n inspect.getfullargspec(component_fn).annotations[key]\n self.props[camel_cased_key] = EventChain.create(\n value=value, args_spec=get_args_spec(key), key=key\n )\n continue\n\n value = LiteralVar.create(value)\n self.props[camel_cased_key] = value\n setattr(self, camel_cased_key, value)\n\n def __eq__(self, other: Any) -> bool:\n \"\"\"Check if the component is equal to another.\n\n Args:\n other: The other component.\n\n Returns:\n Whether the component is equal to the other.\n \"\"\"\n return isinstance(other, CustomComponent) and self.tag == other.tag\n\n def __hash__(self) -> int:\n \"\"\"Get the hash of the component.\n\n Returns:\n The hash of the component.\n \"\"\"\n return hash(self.tag)\n\n @classmethod\n def get_props(cls) -> Iterable[str]:\n \"\"\"Get the props for the component.\n\n Returns:\n The set of component props.\n \"\"\"\n return ()\n\n @staticmethod\n def _get_event_spec_from_args_spec(name: str, event: EventChain) -> Callable:\n \"\"\"Get the event spec from the args spec.\n\n Args:\n name: The name of the event\n event: The args spec.\n\n Returns:\n The event spec.\n \"\"\"\n\n def fn(*args):\n return run_script(Var(name).to(FunctionVar).call(*args))\n\n if event.args_spec:\n arg_spec = (\n event.args_spec\n if not isinstance(event.args_spec, Sequence)\n else event.args_spec[0]\n )\n names = inspect.getfullargspec(arg_spec).args\n fn.__signature__ = inspect.Signature( # pyright: ignore[reportFunctionMemberAccess]\n parameters=[\n inspect.Parameter(\n name=name,\n kind=inspect.Parameter.POSITIONAL_ONLY,\n annotation=arg._var_type,\n )\n for name, arg in zip(\n names, parse_args_spec(event.args_spec)[0], strict=True\n )\n ]\n )\n\n return fn\n\n def get_prop_vars(self) -> list[Var | Callable]:\n \"\"\"Get the prop vars.\n\n Returns:\n The prop vars.\n \"\"\"\n return [\n Var(\n _js_expr=name + CAMEL_CASE_MEMO_MARKER,\n _var_type=(prop._var_type if isinstance(prop, Var) else type(prop)),\n ).guess_type()\n if isinstance(prop, Var) or not isinstance(prop, EventChain)\n else CustomComponent._get_event_spec_from_args_spec(\n name + CAMEL_CASE_MEMO_MARKER, prop\n )\n for name, prop in self.props.items()\n ]\n\n @functools.cache # noqa: B019\n def get_component(self) -> Component:\n \"\"\"Render the component.\n\n Returns:\n The code to render the component.\n \"\"\"\n component = self.component_fn(*self.get_prop_vars())\n\n try:\n from reflex.utils.prerequisites import get_and_validate_app\n\n style = get_and_validate_app().app.style\n except Exception:\n style = {}\n\n component._add_style_recursive(style)\n return component\n\n def _get_all_app_wrap_components(\n self, *, ignore_ids: set[int] | None = None\n ) -> dict[tuple[int, str], Component]:\n \"\"\"Get the app wrap components for the custom component.\n\n Args:\n ignore_ids: A set of IDs to ignore to avoid infinite recursion.\n\n Returns:\n The app wrap components.\n \"\"\"\n ignore_ids = ignore_ids or set()\n component = self.get_component()\n if id(component) in ignore_ids:\n return {}\n ignore_ids.add(id(component))\n return self.get_component()._get_all_app_wrap_components(ignore_ids=ignore_ids)\n\n\nCUSTOM_COMPONENTS: dict[str, CustomComponent] = {}\n\n\ndef _register_custom_component(\n component_fn: Callable[..., Component],\n):\n \"\"\"Register a custom component to be compiled.\n\n Args:\n component_fn: The function that creates the component.\n\n Returns:\n The custom component.\n\n Raises:\n TypeError: If the tag name cannot be determined.\n \"\"\"\n dummy_props = {\n prop: (\n Var(\n \"\",\n _var_type=unwrap_var_annotation(annotation),\n ).guess_type()\n if not types.safe_issubclass(annotation, EventHandler)\n else EventSpec(handler=EventHandler(fn=no_args_event_spec))\n )\n for prop, annotation in typing.get_type_hints(component_fn).items()\n if prop != \"return\"\n }\n dummy_component = CustomComponent._create(\n children=[],\n component_fn=component_fn,\n **dummy_props,\n )\n if dummy_component.tag is None:\n msg = f\"Could not determine the tag name for {component_fn!r}\"\n raise TypeError(msg)\n CUSTOM_COMPONENTS[dummy_component.tag] = dummy_component\n return dummy_component\n\n\ndef custom_component(\n component_fn: Callable[..., Component],\n) -> Callable[..., CustomComponent]:\n \"\"\"Create a custom component from a function.\n\n Args:\n component_fn: The function that creates the component.\n\n Returns:\n The decorated function.\n \"\"\"\n\n @wraps(component_fn)\n def wrapper(*children, **props) -> CustomComponent:\n # Remove the children from the props.\n props.pop(\"children\", None)\n return CustomComponent._create(\n children=list(children), component_fn=component_fn, **props\n )\n\n # Register this component so it can be compiled.\n dummy_component = _register_custom_component(component_fn)\n if tag := dummy_component.tag:\n object.__setattr__(\n wrapper,\n \"_as_var\",\n lambda: Var(\n tag,\n _var_type=type[Component],\n _var_data=VarData(\n imports={\n f\"$/{constants.Dirs.UTILS}/components\": [ImportVar(tag=tag)],\n \"@emotion/react\": [\n ImportVar(tag=\"jsx\"),\n ],\n }\n ),\n ),\n )\n\n return wrapper\n\n\n# Alias memo to custom_component.\nmemo = custom_component\n\n\nclass NoSSRComponent(Component):\n \"\"\"A dynamic component that is not rendered on the server.\"\"\"\n\n def _get_import_name(self) -> str | None:\n if not self.library:\n return None\n return f\"${self.library}\" if self.library.startswith(\"/\") else self.library\n\n def _get_imports(self) -> ParsedImportDict:\n \"\"\"Get the imports for the component.\n\n Returns:\n The imports for dynamically importing the component at module load time.\n \"\"\"\n # React lazy import mechanism.\n dynamic_import = {\n f\"$/{constants.Dirs.UTILS}/context\": [ImportVar(tag=\"ClientSide\")],\n }\n\n # The normal imports for this component.\n imports_ = super()._get_imports()\n\n # Do NOT import the main library/tag statically.\n import_name = self._get_import_name()\n if import_name is not None:\n with contextlib.suppress(ValueError):\n imports_[import_name].remove(self.import_var)\n imports_[import_name].append(ImportVar(tag=None, render=False))\n\n return imports.merge_imports(\n dynamic_import,\n imports_,\n self._get_dependencies_imports(),\n )\n\n def _get_dynamic_imports(self) -> str:\n # extract the correct import name from library name\n base_import_name = self._get_import_name()\n if base_import_name is None:\n msg = \"Undefined library for NoSSRComponent\"\n raise ValueError(msg)\n import_name = format.format_library_name(base_import_name)\n\n library_import = f\"import('{import_name}')\"\n mod_import = (\n # https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-named-exports\n f\".then((mod) => mod.{self.tag})\"\n if not self.is_default\n else \".then((mod) => mod.default.default ?? mod.default)\"\n )\n return (\n f\"const {self.alias or self.tag} = ClientSide(() => \"\n + library_import\n + mod_import\n + \")\"\n )\n\n\nclass StatefulComponent(BaseComponent):\n \"\"\"A component that depends on state and is rendered outside of the page component.\n\n If a StatefulComponent is used in multiple pages, it will be rendered to a common file and\n imported into each page that uses it.\n\n A stateful component has a tag name that includes a hash of the code that it renders\n to. This tag name refers to the specific component with the specific props that it\n was created with.\n \"\"\"\n\n # A lookup table to caching memoized component instances.\n tag_to_stateful_component: ClassVar[dict[str, StatefulComponent]] = {}\n\n # Reference to the original component that was memoized into this component.\n component: Component = field(\n default_factory=Component, is_javascript_property=False\n )\n\n # How many times this component is referenced in the app.\n references: int = field(default=0, is_javascript_property=False)\n\n # Whether the component has already been rendered to a shared file.\n rendered_as_shared: bool = field(default=False, is_javascript_property=False)\n\n memo_trigger_hooks: list[str] = field(\n default_factory=list, is_javascript_property=False\n )\n\n @classmethod\n def create(cls, component: Component) -> StatefulComponent | None:\n \"\"\"Create a stateful component from a component.\n\n Args:\n component: The component to memoize.\n\n Returns:\n The stateful component or None if the component should not be memoized.\n \"\"\"\n from reflex.components.core.foreach import Foreach\n\n if component._memoization_mode.disposition == MemoizationDisposition.NEVER:\n # Never memoize this component.\n return None\n\n if component.tag is None:\n # Only memoize components with a tag.\n return None\n\n # If _var_data is found in this component, it is a candidate for auto-memoization.\n should_memoize = False\n\n # If the component requests to be memoized, then ignore other checks.\n if component._memoization_mode.disposition == MemoizationDisposition.ALWAYS:\n should_memoize = True\n\n if not should_memoize:\n # Determine if any Vars have associated data.\n for prop_var in component._get_vars(include_children=True):\n if prop_var._get_all_var_data():\n should_memoize = True\n break\n\n if not should_memoize:\n # Check for special-cases in child components.\n for child in component.children:\n # Skip BaseComponent and StatefulComponent children.\n if not isinstance(child, Component):\n continue\n # Always consider Foreach something that must be memoized by the parent.\n if isinstance(child, Foreach):\n should_memoize = True\n break\n child = cls._child_var(child)\n if isinstance(child, Var) and child._get_all_var_data():\n should_memoize = True\n break\n\n if should_memoize or component.event_triggers:\n # Render the component to determine tag+hash based on component code.\n tag_name = cls._get_tag_name(component)\n if tag_name is None:\n return None\n\n # Look up the tag in the cache\n stateful_component = cls.tag_to_stateful_component.get(tag_name)\n if stateful_component is None:\n memo_trigger_hooks = cls._fix_event_triggers(component)\n # Set the stateful component in the cache for the given tag.\n stateful_component = cls.tag_to_stateful_component.setdefault(\n tag_name,\n cls(\n children=component.children,\n component=component,\n tag=tag_name,\n memo_trigger_hooks=memo_trigger_hooks,\n ),\n )\n # Bump the reference count -- multiple pages referencing the same component\n # will result in writing it to a common file.\n stateful_component.references += 1\n return stateful_component\n\n # Return None to indicate this component should not be memoized.\n return None\n\n @staticmethod\n def _child_var(child: Component) -> Var | Component:\n \"\"\"Get the Var from a child component.\n\n This method is used for special cases when the StatefulComponent should actually\n wrap the parent component of the child instead of recursing into the children\n and memoizing them independently.\n\n Args:\n child: The child component.\n\n Returns:\n The Var from the child component or the child itself (for regular cases).\n \"\"\"\n from reflex.components.base.bare import Bare\n from reflex.components.core.cond import Cond\n from reflex.components.core.foreach import Foreach\n from reflex.components.core.match import Match\n\n if isinstance(child, Bare):\n return child.contents\n if isinstance(child, Cond):\n return child.cond\n if isinstance(child, Foreach):\n return child.iterable\n if isinstance(child, Match):\n return child.cond\n return child\n\n @classmethod\n def _get_tag_name(cls, component: Component) -> str | None:\n \"\"\"Get the tag based on rendering the given component.\n\n Args:\n component: The component to render.\n\n Returns:\n The tag for the stateful component.\n \"\"\"\n # Get the render dict for the component.\n rendered_code = component.render()\n if not rendered_code:\n # Never memoize non-visual components.\n return None\n\n # Compute the hash based on the rendered code.\n code_hash = _hash_str(_deterministic_hash(rendered_code))\n\n # Format the tag name including the hash.\n return format.format_state_name(\n f\"{component.tag or 'Comp'}_{code_hash}\"\n ).capitalize()\n\n def _render_stateful_code(\n self,\n export: bool = False,\n ) -> str:\n if not self.tag:\n return \"\"\n # Render the code for this component and hooks.\n return stateful_component_template(\n tag_name=self.tag,\n memo_trigger_hooks=self.memo_trigger_hooks,\n component=self.component,\n export=export,\n )\n\n @classmethod\n def _fix_event_triggers(\n cls,\n component: Component,\n ) -> list[str]:\n \"\"\"Render the code for a stateful component.\n\n Args:\n component: The component to render.\n\n Returns:\n The memoized event trigger hooks for the component.\n \"\"\"\n # Memoize event triggers useCallback to avoid unnecessary re-renders.\n memo_event_triggers = tuple(cls._get_memoized_event_triggers(component).items())\n\n # Trigger hooks stored separately to write after the normal hooks (see stateful_component.js.jinja2)\n memo_trigger_hooks: list[str] = []\n\n if memo_event_triggers:\n # Copy the component to avoid mutating the original.\n component = copy.copy(component)\n\n for event_trigger, (\n memo_trigger,\n memo_trigger_hook,\n ) in memo_event_triggers:\n # Replace the event trigger with the memoized version.\n memo_trigger_hooks.append(memo_trigger_hook)\n component.event_triggers[event_trigger] = memo_trigger\n\n return memo_trigger_hooks\n\n @staticmethod\n def _get_hook_deps(hook: str) -> list[str]:\n \"\"\"Extract var deps from a hook.\n\n Args:\n hook: The hook line to extract deps from.\n\n Returns:\n A list of var names created by the hook declaration.\n \"\"\"\n # Ensure that the hook is a var declaration.\n var_decl = hook.partition(\"=\")[0].strip()\n if not any(var_decl.startswith(kw) for kw in [\"const \", \"let \", \"var \"]):\n return []\n\n # Extract the var name from the declaration.\n _, _, var_name = var_decl.partition(\" \")\n var_name = var_name.strip()\n\n # Break up array and object destructuring if used.\n if var_name.startswith((\"[\", \"{\")):\n return [\n v.strip().replace(\"...\", \"\") for v in var_name.strip(\"[]{}\").split(\",\")\n ]\n return [var_name]\n\n @staticmethod\n def _get_deps_from_event_trigger(\n event: EventChain | EventSpec | Var,\n ) -> dict[str, None]:\n \"\"\"Get the dependencies accessed by event triggers.\n\n Args:\n event: The event trigger to extract deps from.\n\n Returns:\n The dependencies accessed by the event triggers.\n \"\"\"\n events: list = [event]\n deps = {}\n\n if isinstance(event, EventChain):\n events.extend(event.events)\n\n for ev in events:\n if isinstance(ev, EventSpec):\n for arg in ev.args:\n for a in arg:\n var_datas = VarData.merge(a._get_all_var_data())\n if var_datas and var_datas.deps is not None:\n deps |= {str(dep): None for dep in var_datas.deps}\n return deps\n\n @classmethod\n def _get_memoized_event_triggers(\n cls,\n component: Component,\n ) -> dict[str, tuple[Var, str]]:\n \"\"\"Memoize event handler functions with useCallback to avoid unnecessary re-renders.\n\n Args:\n component: The component with events to memoize.\n\n Returns:\n A dict of event trigger name to a tuple of the memoized event trigger Var and\n the hook code that memoizes the event handler.\n \"\"\"\n trigger_memo = {}\n for event_trigger, event_args in component._get_vars_from_event_triggers(\n component.event_triggers\n ):\n if event_trigger in {\n EventTriggers.ON_MOUNT,\n EventTriggers.ON_UNMOUNT,\n EventTriggers.ON_SUBMIT,\n }:\n # Do not memoize lifecycle or submit events.\n continue\n\n # Get the actual EventSpec and render it.\n event = component.event_triggers[event_trigger]\n rendered_chain = str(LiteralVar.create(event))\n\n # Hash the rendered EventChain to get a deterministic function name.\n chain_hash = md5(str(rendered_chain).encode(\"utf-8\")).hexdigest()\n memo_name = f\"{event_trigger}_{chain_hash}\"\n\n # Calculate Var dependencies accessed by the handler for useCallback dep array.\n var_deps = [\"addEvents\", \"ReflexEvent\"]\n\n # Get deps from event trigger var data.\n var_deps.extend(cls._get_deps_from_event_trigger(event))\n\n # Get deps from hooks.\n for arg in event_args:\n var_data = arg._get_all_var_data()\n if var_data is None:\n continue\n for hook in var_data.hooks:\n var_deps.extend(cls._get_hook_deps(hook))\n memo_var_data = VarData.merge(\n *[var._get_all_var_data() for var in event_args],\n VarData(\n imports={\"react\": [ImportVar(tag=\"useCallback\")]},\n ),\n )\n\n # Store the memoized function name and hook code for this event trigger.\n trigger_memo[event_trigger] = (\n Var(_js_expr=memo_name)._replace(\n _var_type=EventChain, merge_var_data=memo_var_data\n ),\n f\"const {memo_name} = useCallback({rendered_chain}, [{', '.join(var_deps)}])\",\n )\n return trigger_memo\n\n def _get_all_hooks_internal(self) -> dict[str, VarData | None]:\n \"\"\"Get the reflex internal hooks for the component and its children.\n\n Returns:\n The code that should appear just before user-defined hooks.\n \"\"\"\n return {}\n\n def _get_all_hooks(self) -> dict[str, VarData | None]:\n \"\"\"Get the React hooks for this component.\n\n Returns:\n The code that should appear just before returning the rendered component.\n \"\"\"\n return {}\n\n def _get_all_imports(self) -> ParsedImportDict:\n \"\"\"Get all the libraries and fields that are used by the component.\n\n Returns:\n The import dict with the required imports.\n \"\"\"\n if self.rendered_as_shared:\n return {\n f\"$/{Dirs.UTILS}/{PageNames.STATEFUL_COMPONENTS}\": [\n ImportVar(tag=self.tag)\n ]\n }\n return self.component._get_all_imports()\n\n def _get_all_dynamic_imports(self) -> set[str]:\n \"\"\"Get dynamic imports for the component.\n\n Returns:\n The dynamic imports.\n \"\"\"\n if self.rendered_as_shared:\n return set()\n return self.component._get_all_dynamic_imports()\n\n def _get_all_custom_code(self, export: bool = False) -> dict[str, None]:\n \"\"\"Get custom code for the component.\n\n Args:\n export: Whether to export the component.\n\n Returns:\n The custom code.\n \"\"\"\n if self.rendered_as_shared:\n return {}\n return self.component._get_all_custom_code() | ({\n self._render_stateful_code(export=export): None\n })\n\n def _get_all_refs(self) -> dict[str, None]:\n \"\"\"Get the refs for the children of the component.\n\n Returns:\n The refs for the children.\n \"\"\"\n if self.rendered_as_shared:\n return {}\n return self.component._get_all_refs()\n\n def render(self) -> dict:\n \"\"\"Define how to render the component in React.\n\n Returns:\n The tag to render.\n \"\"\"\n return dict(Tag(name=self.tag or \"\"))\n\n def __str__(self) -> str:\n \"\"\"Represent the component in React.\n\n Returns:\n The code to render the component.\n \"\"\"\n from reflex.compiler.compiler import _compile_component\n\n return _compile_component(self)\n\n @classmethod\n def compile_from(cls, component: BaseComponent) -> BaseComponent:\n \"\"\"Walk through the component tree and memoize all stateful components.\n\n Args:\n component: The component to memoize.\n\n Returns:\n The memoized component tree.\n \"\"\"\n if isinstance(component, Component):\n if component._memoization_mode.recursive:\n # Recursively memoize stateful children (default).\n component.children = [\n cls.compile_from(child) for child in component.children\n ]\n # Memoize this component if it depends on state.\n stateful_component = cls.create(component)\n if stateful_component is not None:\n return stateful_component\n return component\n\n\nclass MemoizationLeaf(Component):\n \"\"\"A component that does not separately memoize its children.\n\n Any component which depends on finding the exact names of children\n components within it, should be a memoization leaf so the compiler\n does not replace the provided child tags with memoized tags.\n\n During creation, a memoization leaf will mark itself as wanting to be\n memoized if any of its children return any hooks.\n \"\"\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a new memoization leaf component.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The memoization leaf\n \"\"\"\n comp = super().create(*children, **props)\n if comp._get_all_hooks():\n comp._memoization_mode = dataclasses.replace(\n comp._memoization_mode, disposition=MemoizationDisposition.ALWAYS\n )\n return comp\n\n\nload_dynamic_serializer()\n\n\nclass ComponentVar(Var[Component], python_types=BaseComponent):\n \"\"\"A Var that represents a Component.\"\"\"\n\n\ndef empty_component() -> Component:\n \"\"\"Create an empty component.\n\n Returns:\n An empty component.\n \"\"\"\n from reflex.components.base.bare import Bare\n\n return Bare.create(\"\")\n\n\ndef render_dict_to_var(tag: dict | Component | str) -> Var:\n \"\"\"Convert a render dict to a Var.\n\n Args:\n tag: The render dict.\n\n Returns:\n The Var.\n \"\"\"\n if not isinstance(tag, dict):\n if isinstance(tag, Component):\n return render_dict_to_var(tag.render())\n return Var.create(tag)\n\n if \"contents\" in tag:\n return Var(tag[\"contents\"])\n\n if \"iterable\" in tag:\n function_return = LiteralArrayVar.create([\n render_dict_to_var(child.render()) for child in tag[\"children\"]\n ])\n\n func = ArgsFunctionOperation.create(\n (tag[\"arg_var_name\"], tag[\"index_var_name\"]),\n function_return,\n )\n\n return FunctionStringVar.create(\"Array.prototype.map.call\").call(\n tag[\"iterable\"]\n if not isinstance(tag[\"iterable\"], ObjectVar)\n else tag[\"iterable\"].items(),\n func,\n )\n\n if \"match_cases\" in tag:\n element = Var(tag[\"cond\"])\n\n conditionals = render_dict_to_var(tag[\"default\"])\n\n for case in tag[\"match_cases\"][::-1]:\n conditions, return_value = case\n condition = Var.create(False)\n for pattern in conditions:\n condition = condition | (\n Var(pattern).to_string() == element.to_string()\n )\n\n conditionals = ternary_operation(\n condition,\n render_dict_to_var(return_value),\n conditionals,\n )\n\n return conditionals\n\n if \"cond_state\" in tag:\n return ternary_operation(\n Var(tag[\"cond_state\"]),\n render_dict_to_var(tag[\"true_value\"]),\n render_dict_to_var(tag[\"false_value\"])\n if tag[\"false_value\"] is not None\n else LiteralNoneVar.create(),\n )\n\n props = Var(\"({\" + \",\".join(tag[\"props\"]) + \"})\")\n\n raw_tag_name = tag.get(\"name\")\n tag_name = Var(raw_tag_name or \"Fragment\")\n\n return FunctionStringVar.create(\n \"jsx\",\n ).call(\n tag_name,\n props,\n *[render_dict_to_var(child) for child in tag[\"children\"]],\n )\n\n\n@dataclasses.dataclass(\n eq=False,\n frozen=True,\n slots=True,\n)\nclass LiteralComponentVar(CachedVarOperation, LiteralVar, ComponentVar):\n \"\"\"A Var that represents a Component.\"\"\"\n\n _var_value: BaseComponent = dataclasses.field(default_factory=empty_component)\n\n @cached_property_no_lock\n def _cached_var_name(self) -> str:\n \"\"\"Get the name of the var.\n\n Returns:\n The name of the var.\n \"\"\"\n return str(render_dict_to_var(self._var_value.render()))\n\n @cached_property_no_lock\n def _cached_get_all_var_data(self) -> VarData | None:\n \"\"\"Get the VarData for the var.\n\n Returns:\n The VarData for the var.\n \"\"\"\n return VarData.merge(\n self._var_data,\n VarData(\n imports={\n \"@emotion/react\": [\"jsx\"],\n \"react\": [\"Fragment\"],\n },\n ),\n VarData(\n imports=self._var_value._get_all_imports(),\n ),\n )\n\n def __hash__(self) -> int:\n \"\"\"Get the hash of the var.\n\n Returns:\n The hash of the var.\n \"\"\"\n return hash((type(self).__name__, self._js_expr))\n\n @classmethod\n def create(\n cls,\n value: Component,\n _var_data: VarData | None = None,\n ):\n \"\"\"Create a var from a value.\n\n Args:\n value: The value of the var.\n _var_data: Additional hooks and imports associated with the Var.\n\n Returns:\n The var.\n \"\"\"\n var_datas = [\n var_data\n for var in value._get_vars(include_children=True)\n if (var_data := var._get_all_var_data())\n ]\n\n return LiteralComponentVar(\n _js_expr=\"\",\n _var_type=type(value),\n _var_data=VarData.merge(\n _var_data,\n *var_datas,\n VarData(\n components=(value,),\n ),\n ),\n _var_value=value,\n )\n" }, { "path": "reflex/components/core/__init__.py", "content": "\"\"\"Core Reflex components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_SUBMODULES: set[str] = {\"layout\"}\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"banner\": [\n \"ConnectionBanner\",\n \"ConnectionModal\",\n \"ConnectionPulser\",\n \"ConnectionToaster\",\n \"connection_banner\",\n \"connection_modal\",\n \"connection_toaster\",\n \"connection_pulser\",\n ],\n \"clipboard\": [\"Clipboard\", \"clipboard\"],\n \"colors\": [\n \"color\",\n ],\n \"cond\": [\"Cond\", \"color_mode_cond\", \"cond\"],\n \"debounce\": [\"DebounceInput\", \"debounce_input\"],\n \"foreach\": [\n \"foreach\",\n \"Foreach\",\n ],\n \"html\": [\"html\", \"Html\"],\n \"helmet\": [\"Helmet\"],\n \"match\": [\n \"match\",\n \"Match\",\n ],\n \"breakpoints\": [\"breakpoints\", \"set_breakpoints\"],\n \"responsive\": [\n \"desktop_only\",\n \"mobile_and_tablet\",\n \"mobile_only\",\n \"tablet_and_desktop\",\n \"tablet_only\",\n ],\n \"upload\": [\n \"upload\",\n \"cancel_upload\",\n \"clear_selected_files\",\n \"get_upload_dir\",\n \"get_upload_url\",\n \"selected_files\",\n ],\n \"auto_scroll\": [\"auto_scroll\"],\n \"window_events\": [\"WindowEventListener\", \"window_event_listener\"],\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/core/auto_scroll.py", "content": "\"\"\"A component that automatically scrolls to the bottom when new content is added.\"\"\"\n\nfrom __future__ import annotations\n\nimport dataclasses\n\nfrom reflex.components.el.elements.typography import Div\nfrom reflex.constants.compiler import MemoizationDisposition, MemoizationMode\nfrom reflex.utils.imports import ImportDict\nfrom reflex.vars.base import Var, get_unique_variable_name\n\n\nclass AutoScroll(Div):\n \"\"\"A div that automatically scrolls to the bottom when new content is added.\"\"\"\n\n _memoization_mode = MemoizationMode(\n disposition=MemoizationDisposition.ALWAYS, recursive=False\n )\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create an AutoScroll component.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n An AutoScroll component.\n \"\"\"\n props.setdefault(\"overflow\", \"auto\")\n props.setdefault(\"id\", get_unique_variable_name())\n component = super().create(*children, **props)\n if \"key\" in props:\n component._memoization_mode = dataclasses.replace(\n component._memoization_mode, recursive=True\n )\n return component\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports required for the component.\n\n Returns:\n The imports required for the component.\n \"\"\"\n return {\"react\": [\"useEffect\", \"useRef\"]}\n\n def add_hooks(self) -> list[str | Var]:\n \"\"\"Add hooks required for the component.\n\n Returns:\n The hooks required for the component.\n \"\"\"\n ref_name = self.get_ref()\n unique_id = ref_name\n return [\n f\"const wasNearBottom_{unique_id} = useRef(false);\",\n f\"const hadScrollbar_{unique_id} = useRef(false);\",\n f\"\"\"\nconst checkIfNearBottom_{unique_id} = () => {{\n if (!{ref_name}.current) return;\n\n const container = {ref_name}.current;\n const nearBottomThreshold = 50; // pixels from bottom to trigger auto-scroll\n\n const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;\n\n wasNearBottom_{unique_id}.current = distanceFromBottom <= nearBottomThreshold;\n\n // Track if container had a scrollbar\n hadScrollbar_{unique_id}.current = container.scrollHeight > container.clientHeight;\n}};\n\"\"\",\n f\"\"\"\nconst scrollToBottomIfNeeded_{unique_id} = () => {{\n if (!{ref_name}.current) return;\n\n const container = {ref_name}.current;\n const hasScrollbarNow = container.scrollHeight > container.clientHeight;\n\n // Scroll if:\n // 1. User was near bottom, OR\n // 2. Container didn't have scrollbar before but does now\n if (wasNearBottom_{unique_id}.current || (!hadScrollbar_{unique_id}.current && hasScrollbarNow)) {{\n container.scrollTop = container.scrollHeight;\n }}\n\n // Update scrollbar state for next check\n hadScrollbar_{unique_id}.current = hasScrollbarNow;\n}};\n\"\"\",\n f\"\"\"\nuseEffect(() => {{\n const container = {ref_name}.current;\n if (!container) return;\n\n scrollToBottomIfNeeded_{unique_id}();\n\n // Create ResizeObserver to detect height changes\n const resizeObserver = new ResizeObserver(() => {{\n scrollToBottomIfNeeded_{unique_id}();\n }});\n\n // Track scroll position before height changes\n container.addEventListener('scroll', checkIfNearBottom_{unique_id});\n\n // Initial check\n checkIfNearBottom_{unique_id}();\n\n // Observe container for size changes\n resizeObserver.observe(container);\n\n return () => {{\n container.removeEventListener('scroll', checkIfNearBottom_{unique_id});\n resizeObserver.disconnect();\n }};\n}});\n\"\"\",\n ]\n\n\nauto_scroll = AutoScroll.create\n" }, { "path": "reflex/components/core/banner.py", "content": "\"\"\"Banner components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex import constants\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import Component\nfrom reflex.components.core.cond import cond\nfrom reflex.components.el.elements.typography import Div\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.radix.themes.components.dialog import (\n DialogContent,\n DialogRoot,\n DialogTitle,\n)\nfrom reflex.components.radix.themes.layout.flex import Flex\nfrom reflex.components.radix.themes.typography.text import Text\nfrom reflex.components.sonner.toast import ToastProps, toast_ref\nfrom reflex.constants import Dirs, Hooks, Imports\nfrom reflex.constants.compiler import CompileVars\nfrom reflex.environment import environment\nfrom reflex.utils.imports import ImportVar\nfrom reflex.vars import VarData\nfrom reflex.vars.base import LiteralVar, Var\nfrom reflex.vars.function import FunctionStringVar\nfrom reflex.vars.number import BooleanVar\nfrom reflex.vars.sequence import LiteralArrayVar\n\nconnect_error_var_data: VarData = VarData(\n imports=Imports.EVENTS,\n hooks={Hooks.EVENTS: None},\n)\n\nconnect_errors = Var(\n _js_expr=CompileVars.CONNECT_ERROR, _var_data=connect_error_var_data\n)\n\nconnection_error = Var(\n _js_expr=\"((connectErrors.length > 0) ? connectErrors[connectErrors.length - 1].message : '')\",\n _var_data=connect_error_var_data,\n)\n\nconnection_errors_count = Var(\n _js_expr=\"connectErrors.length\", _var_data=connect_error_var_data\n)\n\nhas_connection_errors = Var(\n _js_expr=\"(connectErrors.length > 0)\", _var_data=connect_error_var_data\n).to(BooleanVar)\n\nhas_too_many_connection_errors = Var(\n _js_expr=\"(connectErrors.length >= 2)\", _var_data=connect_error_var_data\n).to(BooleanVar)\n\n\nclass WebsocketTargetURL(Var):\n \"\"\"A component that renders the websocket target URL.\"\"\"\n\n @classmethod\n def create(cls) -> Var:\n \"\"\"Create a websocket target URL component.\n\n Returns:\n The websocket target URL component.\n \"\"\"\n return Var(\n _js_expr=\"getBackendURL(env.EVENT).href\",\n _var_data=VarData(\n imports={\n \"$/env.json\": [ImportVar(tag=\"env\", is_default=True)],\n f\"$/{Dirs.STATE_PATH}\": [ImportVar(tag=\"getBackendURL\")],\n },\n ),\n _var_type=WebsocketTargetURL,\n )\n\n\ndef default_connection_error() -> list[str | Var | Component]:\n \"\"\"Get the default connection error message.\n\n Returns:\n The default connection error message.\n \"\"\"\n return [\n \"Cannot connect to server: \",\n connection_error,\n \". Check if server is reachable at \",\n WebsocketTargetURL.create(),\n ]\n\n\nclass ConnectionToaster(Fragment):\n \"\"\"A connection toaster component.\"\"\"\n\n def add_hooks(self) -> list[str | Var]:\n \"\"\"Add the hooks for the connection toaster.\n\n Returns:\n The hooks for the connection toaster.\n \"\"\"\n toast_id = \"websocket-error\"\n target_url = WebsocketTargetURL.create()\n props = ToastProps(\n description=LiteralVar.create(\n f\"Check if server is reachable at {target_url}\",\n ),\n close_button=True,\n duration=120000,\n id=toast_id,\n ) # pyright: ignore [reportCallIssue]\n\n if environment.REFLEX_DOES_BACKEND_COLD_START.get():\n loading_message = Var.create(\"Backend is starting.\")\n backend_is_loading_toast_var = Var(\n f\"toast?.loading({loading_message!s}, {{...toast_props, description: '', closeButton: false, onDismiss: () => setUserDismissed(true)}},)\"\n )\n backend_is_not_responding = Var.create(\"Backend is not responding.\")\n backend_is_down_toast_var = Var(\n f\"toast?.error({backend_is_not_responding!s}, {{...toast_props, description: '', onDismiss: () => setUserDismissed(true)}},)\"\n )\n toast_var = Var(\n f\"\"\"\nif (waitedForBackend) {{\n {backend_is_down_toast_var!s}\n}} else {{\n {backend_is_loading_toast_var!s};\n}}\nsetTimeout(() => {{\n if ({has_too_many_connection_errors!s}) {{\n setWaitedForBackend(true);\n }}\n}}, {environment.REFLEX_BACKEND_COLD_START_TIMEOUT.get() * 1000});\n\"\"\"\n )\n else:\n loading_message = Var.create(\n f\"Cannot connect to server: {connection_error}.\"\n )\n toast_var = Var(\n f\"toast?.error({loading_message!s}, {{...toast_props, onDismiss: () => setUserDismissed(true)}},)\"\n )\n\n individual_hooks = [\n Var(f\"const toast = {toast_ref};\"),\n f\"const toast_props = {LiteralVar.create(props)!s};\",\n \"const [userDismissed, setUserDismissed] = useState(false);\",\n \"const [waitedForBackend, setWaitedForBackend] = useState(false);\",\n FunctionStringVar(\n \"useEffect\",\n _var_data=VarData(\n imports={\n \"react\": (\"useEffect\", \"useState\"),\n **(\n dict(var_data.imports)\n if (var_data := target_url._get_all_var_data()) is not None\n else {}\n ),\n }\n ),\n ).call(\n # TODO: This breaks the assumption that Vars are JS expressions\n Var(\n _js_expr=f\"\"\"\n() => {{\n if ({has_too_many_connection_errors!s}) {{\n if (!userDismissed) {{\n {toast_var!s}\n }}\n }} else {{\n toast?.dismiss(\"{toast_id}\");\n setUserDismissed(false); // after reconnection reset dismissed state\n }}\n}}\n\"\"\"\n ),\n LiteralArrayVar.create([connect_errors, Var(\"waitedForBackend\")]),\n ),\n ]\n\n return [\n Hooks.EVENTS,\n *individual_hooks,\n ]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a connection toaster component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The connection toaster component.\n \"\"\"\n return super().create(*children, **props)\n\n\nclass ConnectionBanner(Component):\n \"\"\"A connection banner component.\"\"\"\n\n @classmethod\n def create(cls, comp: Component | None = None) -> Component:\n \"\"\"Create a connection banner component.\n\n Args:\n comp: The component to render when there's a server connection error.\n\n Returns:\n The connection banner component.\n \"\"\"\n if not comp:\n comp = Flex.create(\n Text.create(\n *default_connection_error(),\n color=\"black\",\n size=\"4\",\n ),\n justify=\"center\",\n background_color=\"crimson\",\n width=\"100vw\",\n padding=\"5px\",\n position=\"fixed\",\n )\n\n return cond(has_connection_errors, comp)\n\n\nclass ConnectionModal(Component):\n \"\"\"A connection status modal window.\"\"\"\n\n @classmethod\n def create(cls, comp: Component | None = None) -> Component:\n \"\"\"Create a connection banner component.\n\n Args:\n comp: The component to render when there's a server connection error.\n\n Returns:\n The connection banner component.\n \"\"\"\n if not comp:\n comp = Text.create(*default_connection_error())\n return cond(\n has_too_many_connection_errors,\n DialogRoot.create(\n DialogContent.create(\n DialogTitle.create(\"Connection Error\"),\n comp,\n ),\n open=has_too_many_connection_errors,\n z_index=9999,\n ),\n )\n\n\nclass WifiOffPulse(Icon):\n \"\"\"A wifi_off icon with an animated opacity pulse.\"\"\"\n\n @classmethod\n def create(cls, *children, **props) -> Icon:\n \"\"\"Create a wifi_off icon with an animated opacity pulse.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The icon component with default props applied.\n \"\"\"\n pulse_var = Var(r\"keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\").to(\n str\n )\n return super().create(\n \"wifi_off\",\n color=props.pop(\"color\", \"crimson\"),\n size=props.pop(\"size\", 32),\n z_index=props.pop(\"z_index\", 9999),\n position=props.pop(\"position\", \"fixed\"),\n bottom=props.pop(\"bottom\", \"33px\"),\n right=props.pop(\"right\", \"33px\"),\n animation=LiteralVar.create(f\"{pulse_var} 1s infinite\"),\n **props,\n )\n\n def add_imports(self) -> dict[str, str | ImportVar | list[str | ImportVar]]:\n \"\"\"Add imports for the WifiOffPulse component.\n\n Returns:\n The import dict.\n \"\"\"\n return {\"@emotion/react\": [ImportVar(tag=\"keyframes\")]}\n\n\nclass ConnectionPulser(Div):\n \"\"\"A connection pulser component.\"\"\"\n\n @classmethod\n def create(cls, **props) -> Component:\n \"\"\"Create a connection pulser component.\n\n Args:\n **props: The properties of the component.\n\n Returns:\n The connection pulser component.\n \"\"\"\n return super().create(\n cond(\n has_connection_errors,\n WifiOffPulse.create(**props),\n ),\n title=f\"Connection Error: {connection_error}\",\n position=\"fixed\",\n width=\"100vw\",\n height=\"0\",\n )\n\n\nclass BackendDisabled(Div):\n \"\"\"A component that displays a message when the backend is disabled.\"\"\"\n\n @classmethod\n def create(cls, **props) -> Component:\n \"\"\"Create a backend disabled component.\n\n Args:\n **props: The properties of the component.\n\n Returns:\n The backend disabled component.\n \"\"\"\n import reflex as rx\n\n is_backend_disabled = Var(\n \"backendDisabled\",\n _var_type=bool,\n _var_data=VarData(\n hooks={\n \"const [backendDisabled, setBackendDisabled] = useState(false);\": None,\n \"useEffect(() => { setBackendDisabled(isBackendDisabled()); }, []);\": None,\n },\n imports={\n f\"$/{constants.Dirs.STATE_PATH}\": [\n ImportVar(tag=\"isBackendDisabled\")\n ],\n },\n ),\n )\n\n return super().create(\n rx.cond(\n is_backend_disabled,\n rx.box(\n rx.el.link(\n rel=\"preconnect\",\n href=\"https://fonts.googleapis.com\",\n ),\n rx.el.link(\n rel=\"preconnect\",\n href=\"https://fonts.gstatic.com\",\n crossorigin=\"\",\n ),\n rx.el.link(\n href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,500;0,600&display=swap\",\n rel=\"stylesheet\",\n ),\n rx.box(\n rx.vstack(\n rx.text(\n \"This app is paused\",\n font_size=\"1.5rem\",\n font_weight=\"600\",\n line_height=\"1.25rem\",\n letter_spacing=\"-0.0375rem\",\n ),\n rx.hstack(\n rx.el.svg(\n rx.el.path(\n d=\"M6.90816 1.34341C7.61776 1.10786 8.38256 1.10786 9.09216 1.34341C9.7989 1.57799 10.3538 2.13435 10.9112 2.91605C11.4668 3.69515 12.0807 4.78145 12.872 6.18175L12.9031 6.23672C13.6946 7.63721 14.3085 8.72348 14.6911 9.60441C15.0755 10.4896 15.267 11.2539 15.1142 11.9881C14.9604 12.7275 14.5811 13.3997 14.0287 13.9079C13.4776 14.4147 12.7273 14.6286 11.7826 14.7313C10.8432 14.8334 9.6143 14.8334 8.0327 14.8334H7.9677C6.38604 14.8334 5.15719 14.8334 4.21778 14.7313C3.27301 14.6286 2.52269 14.4147 1.97164 13.9079C1.41924 13.3997 1.03995 12.7275 0.88613 11.9881C0.733363 11.2539 0.92483 10.4896 1.30926 9.60441C1.69184 8.72348 2.30573 7.63721 3.09722 6.23671L3.12828 6.18175C3.91964 4.78146 4.53355 3.69515 5.08914 2.91605C5.64658 2.13435 6.20146 1.57799 6.90816 1.34341ZM7.3335 11.3334C7.3335 10.9652 7.63063 10.6667 7.99716 10.6667H8.00316C8.3697 10.6667 8.66683 10.9652 8.66683 11.3334C8.66683 11.7016 8.3697 12.0001 8.00316 12.0001H7.99716C7.63063 12.0001 7.3335 11.7016 7.3335 11.3334ZM7.3335 8.66675C7.3335 9.03495 7.63196 9.33341 8.00016 9.33341C8.36836 9.33341 8.66683 9.03495 8.66683 8.66675V6.00008C8.66683 5.63189 8.36836 5.33341 8.00016 5.33341C7.63196 5.33341 7.3335 5.63189 7.3335 6.00008V8.66675Z\",\n fill_rule=\"evenodd\",\n clip_rule=\"evenodd\",\n fill=rx.color(\"amber\", 11),\n ),\n width=\"16\",\n height=\"16\",\n viewBox=\"0 0 16 16\",\n fill=\"none\",\n xmlns=\"http://www.w3.org/2000/svg\",\n margin_top=\"0.125rem\",\n flex_shrink=\"0\",\n ),\n rx.text(\n \"If you are the owner of this app, visit \",\n rx.link(\n \"Reflex Cloud\",\n color=rx.color(\"amber\", 11),\n underline=\"always\",\n _hover={\n \"color\": rx.color(\"amber\", 11),\n \"text_decoration_color\": rx.color(\n \"amber\", 11\n ),\n },\n text_decoration_color=rx.color(\"amber\", 10),\n href=\"https://cloud.reflex.dev/\",\n font_weight=\"600\",\n is_external=True,\n ),\n \" for more information on how to resume your app.\",\n font_size=\"0.875rem\",\n font_weight=\"500\",\n line_height=\"1.25rem\",\n letter_spacing=\"-0.01094rem\",\n color=rx.color(\"amber\", 11),\n ),\n align=\"start\",\n gap=\"0.625rem\",\n border_radius=\"0.75rem\",\n border_width=\"1px\",\n border_color=rx.color(\"amber\", 5),\n background_color=rx.color(\"amber\", 3),\n padding=\"0.625rem\",\n ),\n rx.link(\n rx.el.button(\n \"Resume app\",\n color=\"rgba(252, 252, 253, 1)\",\n font_size=\"0.875rem\",\n font_weight=\"600\",\n line_height=\"1.25rem\",\n letter_spacing=\"-0.01094rem\",\n height=\"2.5rem\",\n padding=\"0rem 0.75rem\",\n width=\"100%\",\n border_radius=\"0.75rem\",\n background=f\"linear-gradient(180deg, {rx.color('violet', 9)} 0%, {rx.color('violet', 10)} 100%)\",\n _hover={\n \"background\": f\"linear-gradient(180deg, {rx.color('violet', 10)} 0%, {rx.color('violet', 10)} 100%)\",\n },\n ),\n width=\"100%\",\n underline=\"none\",\n href=\"https://cloud.reflex.dev/\",\n is_external=True,\n ),\n gap=\"1rem\",\n ),\n font_family='\"Instrument Sans\", \"Helvetica\", \"Arial\", sans-serif',\n position=\"fixed\",\n top=\"50%\",\n left=\"50%\",\n transform=\"translate(-50%, -50%)\",\n width=\"60ch\",\n max_width=\"90vw\",\n border_radius=\"0.75rem\",\n border_width=\"1px\",\n border_color=rx.color(\"slate\", 4),\n padding=\"1.5rem\",\n background_color=rx.color(\"slate\", 1),\n box_shadow=\"0px 2px 5px 0px light-dark(rgba(28, 32, 36, 0.03), rgba(0, 0, 0, 0.00))\",\n ),\n position=\"fixed\",\n z_index=9999,\n backdrop_filter=\"grayscale(1) blur(5px)\",\n width=\"100dvw\",\n height=\"100dvh\",\n ),\n )\n )\n\n\nconnection_banner = ConnectionBanner.create\nconnection_modal = ConnectionModal.create\nconnection_toaster = ConnectionToaster.create\nconnection_pulser = ConnectionPulser.create\nbackend_disabled = BackendDisabled.create\n" }, { "path": "reflex/components/core/breakpoints.py", "content": "\"\"\"Breakpoints utility.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import TypeVar\n\nbreakpoints_values = [\"30em\", \"48em\", \"62em\", \"80em\", \"96em\"]\nbreakpoint_names = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n\n\ndef set_breakpoints(values: tuple[str, str, str, str, str]):\n \"\"\"Overwrite default breakpoint values.\n\n Args:\n values: CSS values in order defining the breakpoints of responsive layouts\n \"\"\"\n breakpoints_values.clear()\n breakpoints_values.extend(values)\n\n\nK = TypeVar(\"K\", bound=str)\nV = TypeVar(\"V\")\n\n\nclass Breakpoints(dict[K, V]):\n \"\"\"A responsive styling helper.\"\"\"\n\n def factorize(self):\n \"\"\"Removes references to breakpoints names and instead replaces them with their corresponding values.\n\n Returns:\n The factorized breakpoints.\n \"\"\"\n return Breakpoints({\n (\n breakpoints_values[breakpoint_names.index(k)]\n if k in breakpoint_names\n else (\"0px\" if k == \"initial\" else k)\n ): v\n for k, v in self.items()\n if v is not None\n })\n\n @classmethod\n def create(\n cls,\n custom: dict[K, V] | None = None,\n initial: V | None = None,\n xs: V | None = None,\n sm: V | None = None,\n md: V | None = None,\n lg: V | None = None,\n xl: V | None = None,\n ):\n \"\"\"Create a new instance of the helper. Only provide a custom component OR use named props.\n\n Args:\n custom: Custom mapping using CSS values or variables.\n initial: Styling when in the initial width\n xs: Styling when in the extra-small width\n sm: Styling when in the small width\n md: Styling when in the medium width\n lg: Styling when in the large width\n xl: Styling when in the extra-large width\n\n Returns:\n The responsive mapping.\n\n Raises:\n ValueError: If both custom and any other named parameters are provided.\n \"\"\"\n thresholds = [initial, xs, sm, md, lg, xl]\n\n if custom is not None:\n if any(threshold is not None for threshold in thresholds):\n msg = \"Named props cannot be used with custom thresholds\"\n raise ValueError(msg)\n\n return Breakpoints(custom)\n return Breakpoints({\n k: v\n for k, v in zip([\"initial\", *breakpoint_names], thresholds, strict=True)\n if v is not None\n })\n\n\nbreakpoints = Breakpoints.create\n\nT = TypeVar(\"T\")\n\nResponsive = T | Breakpoints[str, T]\n" }, { "path": "reflex/components/core/clipboard.py", "content": "\"\"\"Global on_paste handling for Reflex app.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\n\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.tags.tag import Tag\nfrom reflex.constants.compiler import Hooks\nfrom reflex.event import EventChain, EventHandler, passthrough_event_spec\nfrom reflex.utils.format import format_prop, wrap\nfrom reflex.utils.imports import ImportVar\nfrom reflex.vars import get_unique_variable_name\nfrom reflex.vars.base import Var, VarData\n\n\nclass Clipboard(Fragment):\n \"\"\"Clipboard component.\"\"\"\n\n # The element ids to attach the event listener to. Defaults to all child components or the document.\n targets: Var[Sequence[str]]\n\n # Called when the user pastes data into the document. Data is a list of tuples of (mime_type, data). Binary types will be base64 encoded as a data uri.\n on_paste: EventHandler[passthrough_event_spec(list[tuple[str, str]])]\n\n # Save the original event actions for the on_paste event.\n on_paste_event_actions: Var[dict[str, bool | int]]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a Clipboard component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Clipboard Component.\n \"\"\"\n if \"targets\" not in props:\n # Add all children as targets if not specified.\n targets = props.setdefault(\"targets\", [])\n for c in children:\n if c.id is None:\n c.id = f\"clipboard_{get_unique_variable_name()}\"\n targets.append(c.id)\n\n if \"on_paste\" in props:\n # Capture the event actions for the on_paste handler if not specified.\n props.setdefault(\"on_paste_event_actions\", props[\"on_paste\"].event_actions)\n\n return super().create(*children, **props)\n\n def _exclude_props(self) -> list[str]:\n return [*super()._exclude_props(), \"on_paste\", \"on_paste_event_actions\"]\n\n def _render(self) -> Tag:\n tag = super()._render()\n # Ensure a different Fragment component is created whenever targets differ\n return tag.remove_props(\"targets\").add_props(key=self.targets)\n\n def add_imports(self) -> dict[str, ImportVar]:\n \"\"\"Add the imports for the Clipboard component.\n\n Returns:\n The import dict for the component.\n \"\"\"\n return {\n \"$/utils/helpers/paste.js\": ImportVar(\n tag=\"usePasteHandler\", is_default=True\n ),\n }\n\n def add_hooks(self) -> list[str | Var[str]]:\n \"\"\"Add hook to register paste event listener.\n\n Returns:\n The hooks to add to the component.\n \"\"\"\n on_paste = self.event_triggers[\"on_paste\"]\n if on_paste is None:\n return []\n if isinstance(on_paste, EventChain):\n on_paste = wrap(str(format_prop(on_paste)).strip(\"{}\"), \"(\")\n hook_expr = f\"usePasteHandler({self.targets!s}, {self.on_paste_event_actions!s}, {on_paste!s})\"\n\n return [\n Var(\n hook_expr,\n _var_type=\"str\",\n _var_data=VarData(position=Hooks.HookPosition.POST_TRIGGER),\n ),\n ]\n\n\nclipboard = Clipboard.create\n" }, { "path": "reflex/components/core/colors.py", "content": "\"\"\"The colors used in Reflex are a wrapper around https://www.radix-ui.com/colors.\"\"\"\n\nfrom reflex.constants.base import REFLEX_VAR_OPENING_TAG\nfrom reflex.constants.colors import (\n COLORS,\n MAX_SHADE_VALUE,\n MIN_SHADE_VALUE,\n Color,\n ColorType,\n ShadeType,\n)\nfrom reflex.vars.base import Var\n\n\ndef color(\n color: ColorType | Var[str],\n shade: ShadeType | Var[int] = 7,\n alpha: bool | Var[bool] = False,\n) -> Color:\n \"\"\"Create a color object.\n\n Args:\n color: The color to use.\n shade: The shade of the color to use.\n alpha: Whether to use the alpha variant of the color.\n\n Returns:\n The color object.\n\n Raises:\n ValueError: If the color, shade, or alpha are not valid.\n \"\"\"\n if isinstance(color, str):\n if color not in COLORS and REFLEX_VAR_OPENING_TAG not in color:\n msg = f\"Color must be one of {COLORS}, received {color}\"\n raise ValueError(msg)\n elif not isinstance(color, Var):\n msg = \"Color must be a string or a Var\"\n raise ValueError(msg)\n\n if isinstance(shade, int):\n if shade < MIN_SHADE_VALUE or shade > MAX_SHADE_VALUE:\n msg = f\"Shade must be between {MIN_SHADE_VALUE} and {MAX_SHADE_VALUE}\"\n raise ValueError(msg)\n elif not isinstance(shade, Var):\n msg = \"Shade must be an integer or a Var\"\n raise ValueError(msg)\n\n if not isinstance(alpha, (bool, Var)):\n msg = \"Alpha must be a boolean or a Var\"\n raise ValueError(msg)\n\n return Color(color, shade, alpha)\n" }, { "path": "reflex/components/core/cond.py", "content": "\"\"\"Create a list of components from an iterable.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, overload\n\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import BaseComponent, Component\nfrom reflex.components.tags import CondTag, Tag\nfrom reflex.constants import Dirs\nfrom reflex.style import LIGHT_COLOR_MODE, resolved_color_mode\nfrom reflex.utils import types\nfrom reflex.utils.imports import ImportDict, ImportVar\nfrom reflex.vars import VarData\nfrom reflex.vars.base import LiteralVar, Var\nfrom reflex.vars.number import ternary_operation\n\n_IS_TRUE_IMPORT: ImportDict = {\n f\"$/{Dirs.STATE_PATH}\": [ImportVar(tag=\"isTrue\")],\n}\n\n\nclass Cond(Component):\n \"\"\"Render one of two components based on a condition.\"\"\"\n\n # The cond to determine which component to render.\n cond: Var[Any]\n\n @classmethod\n def create(\n cls,\n cond: Var,\n comp1: BaseComponent,\n comp2: BaseComponent | types.Unset = types.Unset(),\n ) -> Component:\n \"\"\"Create a conditional component.\n\n Args:\n cond: The cond to determine which component to render.\n comp1: The component to render if the cond is true.\n comp2: The component to render if the cond is false.\n\n Returns:\n The conditional component.\n \"\"\"\n # Wrap everything in fragments.\n if type(comp1) is not Fragment:\n comp1 = Fragment.create(comp1)\n if isinstance(comp2, types.Unset) or type(comp2) is not Fragment:\n comp2 = (\n Fragment.create(comp2)\n if not isinstance(comp2, types.Unset)\n else Fragment.create()\n )\n return Fragment.create(\n cls._create(\n children=[comp1, comp2],\n cond=cond,\n )\n )\n\n def _render(self) -> Tag:\n return CondTag(\n cond_state=str(self.cond),\n true_value=self.children[0].render(),\n false_value=self.children[1].render(),\n )\n\n def render(self) -> dict:\n \"\"\"Render the component.\n\n Returns:\n The dictionary for template of component.\n \"\"\"\n return {\n \"cond_state\": str(self.cond),\n \"true_value\": self.children[0].render(),\n \"false_value\": self.children[1].render(),\n }\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add imports for the Cond component.\n\n Returns:\n The import dict for the component.\n \"\"\"\n var_data = VarData.merge(self.cond._get_all_var_data())\n\n imports = var_data.old_school_imports() if var_data else {}\n\n return {**imports, **_IS_TRUE_IMPORT}\n\n\n@overload\ndef cond(condition: Any, c1: Component, c2: Any, /) -> Component: ... # pyright: ignore [reportOverlappingOverload]\n\n\n@overload\ndef cond(condition: Any, c1: Component, /) -> Component: ...\n\n\n@overload\ndef cond(condition: Any, c1: Any, c2: Component, /) -> Component: ... # pyright: ignore [reportOverlappingOverload]\n\n\n@overload\ndef cond(condition: Any, c1: Any, c2: Any, /) -> Var: ...\n\n\ndef cond(condition: Any, c1: Any, c2: Any = types.Unset(), /) -> Component | Var:\n \"\"\"Create a conditional component or Prop.\n\n Args:\n condition: The cond to determine which component to render.\n c1: The component or prop to render if the cond_var is true.\n c2: The component or prop to render if the cond_var is false.\n\n Returns:\n The conditional component.\n\n Raises:\n ValueError: If the arguments are invalid.\n \"\"\"\n # Convert the condition to a Var.\n cond_var = LiteralVar.create(condition)\n if cond_var is None:\n msg = \"The condition must be set.\"\n raise ValueError(msg)\n\n # If the first component is a component, create a Cond component.\n if isinstance(c1, BaseComponent):\n if not isinstance(c2, types.Unset) and not isinstance(c2, BaseComponent):\n return Cond.create(cond_var.bool(), c1, Fragment.create(c2))\n return Cond.create(cond_var.bool(), c1, c2)\n\n # Otherwise, create a conditional Var.\n # Check that the second argument is valid.\n if isinstance(c2, BaseComponent):\n return Cond.create(cond_var.bool(), Fragment.create(c1), c2)\n if isinstance(c2, types.Unset):\n msg = \"For conditional vars, the second argument must be set.\"\n raise ValueError(msg)\n\n # convert the truth and false cond parts into vars so the _var_data can be obtained.\n c1_var = Var.create(c1)\n c2_var = Var.create(c2)\n\n if c1_var is cond_var or c1_var.equals(cond_var):\n c1_var = c1_var.to(types.value_inside_optional(c1_var._var_type))\n\n # Create the conditional var.\n return ternary_operation(\n cond_var.bool(),\n c1_var,\n c2_var,\n )\n\n\n@overload\ndef color_mode_cond(light: Component, dark: Component | None = None) -> Component: ... # pyright: ignore [reportOverlappingOverload]\n\n\n@overload\ndef color_mode_cond(light: Any, dark: Any = None) -> Var: ...\n\n\ndef color_mode_cond(light: Any, dark: Any = None) -> Var | Component:\n \"\"\"Create a component or Prop based on color_mode.\n\n Args:\n light: The component or prop to render if color_mode is default\n dark: The component or prop to render if color_mode is non-default\n\n Returns:\n The conditional component or prop.\n \"\"\"\n return cond(\n resolved_color_mode == LiteralVar.create(LIGHT_COLOR_MODE),\n light,\n dark,\n )\n" }, { "path": "reflex/components/core/debounce.py", "content": "\"\"\"Wrapper around react-debounce-input.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any\n\nfrom reflex.components.component import Component\nfrom reflex.constants import EventTriggers\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.vars import VarData\nfrom reflex.vars.base import Var\n\nDEFAULT_DEBOUNCE_TIMEOUT = 300\n\n\nclass DebounceInput(Component):\n \"\"\"The DebounceInput component is used to buffer input events on the client side.\n\n It is intended to wrap various form controls and should be used whenever a\n fully-controlled input is needed to prevent lost input data when the backend\n is experiencing high latency.\n \"\"\"\n\n library = \"react-debounce-input@3.3.0\"\n tag = \"DebounceInput\"\n is_default = True\n\n # Minimum input characters before triggering the on_change event\n min_length: Var[int]\n\n # Time to wait between end of input and triggering on_change\n debounce_timeout: Var[int] = Var.create(DEFAULT_DEBOUNCE_TIMEOUT)\n\n # If true, notify when Enter key is pressed\n force_notify_by_enter: Var[bool]\n\n # If true, notify when form control loses focus\n force_notify_on_blur: Var[bool]\n\n # If provided, create a fully-controlled input\n value: Var[str | int | float]\n\n # The ref to attach to the created input\n input_ref: Var[str]\n\n # The element to wrap\n element: Var[type[Component]]\n\n # Fired when the input value changes\n on_change: EventHandler[no_args_event_spec]\n\n @classmethod\n def create(cls, *children: Component, **props: Any) -> Component:\n \"\"\"Create a DebounceInput component.\n\n Carry first child props directly on this tag.\n\n Since react-debounce-input wants to create and manage the underlying\n input component itself, we carry all props, events, and styles from\n the child, and then neuter the child's render method so it produces no output.\n\n Args:\n children: The child component to wrap.\n props: The component props.\n\n Returns:\n The DebounceInput component.\n\n Raises:\n RuntimeError: unless exactly one child element is provided.\n ValueError: if the child element does not have an on_change handler.\n \"\"\"\n if len(children) != 1:\n msg = (\n \"Provide a single child for DebounceInput, such as rx.input() or \"\n \"rx.text_area()\"\n )\n raise RuntimeError(msg)\n\n child = children[0]\n if \"on_change\" not in child.event_triggers:\n msg = \"DebounceInput child requires an on_change handler\"\n raise ValueError(msg)\n\n # Carry known props and event_triggers from the child.\n props_from_child = {\n p: getattr(child, p)\n for p in cls.get_props()\n if getattr(child, p, None) is not None\n }\n props[EventTriggers.ON_CHANGE] = child.event_triggers.pop(\n EventTriggers.ON_CHANGE\n )\n props = {**props_from_child, **props}\n\n # Carry all other child props directly via custom_attrs\n other_props = {\n p: getattr(child, p)\n for p in child.get_props()\n if p not in props_from_child and getattr(child, p) is not None\n }\n props.setdefault(\"custom_attrs\", {}).update(other_props, **child.custom_attrs)\n\n # Carry base Component props.\n props.setdefault(\"style\", {}).update(child.style)\n if child.class_name is not None:\n props[\"class_name\"] = f\"{props.get('class_name', '')} {child.class_name}\"\n for field in (\"key\", \"special_props\"):\n if getattr(child, field) is not None:\n props[field] = getattr(child, field)\n child_ref = child.get_ref()\n if props.get(\"input_ref\") is None and child_ref:\n props[\"input_ref\"] = Var(_js_expr=child_ref, _var_type=str)\n if child.id is not None:\n props[\"id\"] = child.id\n\n # Set the child element to wrap, including any imports/hooks from the child.\n props.setdefault(\n \"element\",\n Var(\n _js_expr=str(child.alias or child.tag),\n _var_type=type[Component],\n _var_data=VarData(\n imports=child._get_imports(),\n hooks=child._get_all_hooks(),\n ),\n ),\n )\n\n component = super().create(**props)\n component._get_style = child._get_style\n component.event_triggers.update(child.event_triggers)\n component.children = child.children\n component._rename_props = child._rename_props # pyright: ignore[reportAttributeAccessIssue]\n outer_get_all_custom_code = component._get_all_custom_code\n component._get_all_custom_code = lambda: (\n outer_get_all_custom_code() | (child._get_all_custom_code())\n )\n return component\n\n def _render(self):\n return super()._render().remove_props(\"ref\")\n\n\ndebounce_input = DebounceInput.create\n" }, { "path": "reflex/components/core/foreach.py", "content": "\"\"\"Create a list of components from an iterable.\"\"\"\n\nfrom __future__ import annotations\n\nimport functools\nimport inspect\nfrom collections.abc import Callable, Iterable\nfrom hashlib import md5\nfrom typing import Any\n\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import Component, field\nfrom reflex.components.core.cond import cond\nfrom reflex.components.tags import IterTag\nfrom reflex.constants import MemoizationMode\nfrom reflex.constants.state import FIELD_MARKER\nfrom reflex.state import ComponentState\nfrom reflex.utils import types\nfrom reflex.utils.exceptions import UntypedVarError\nfrom reflex.vars.base import LiteralVar, Var\n\n\nclass ForeachVarError(TypeError):\n \"\"\"Raised when the iterable type is Any.\"\"\"\n\n\nclass ForeachRenderError(TypeError):\n \"\"\"Raised when there is an error with the foreach render function.\"\"\"\n\n\nclass Foreach(Component):\n \"\"\"A component that takes in an iterable and a render function and renders a list of components.\"\"\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n # The iterable to create components from.\n iterable: Var[Iterable]\n\n # A function from the render args to the component.\n render_fn: Callable = field(default=Fragment.create, is_javascript_property=False)\n\n @classmethod\n def create(\n cls,\n iterable: Var[Iterable] | Iterable,\n render_fn: Callable,\n ) -> Foreach:\n \"\"\"Create a foreach component.\n\n Args:\n iterable: The iterable to create components from.\n render_fn: A function from the render args to the component.\n\n Returns:\n The foreach component.\n\n Raises:\n ForeachVarError: If the iterable is of type Any.\n TypeError: If the render function is a ComponentState.\n UntypedVarError: If the iterable is of type Any without a type annotation.\n\n # noqa: DAR401 with_traceback\n # noqa: DAR402 UntypedVarError\n \"\"\"\n from reflex.vars import ArrayVar, ObjectVar, StringVar\n\n iterable = (\n LiteralVar.create(iterable).guess_type()\n if not isinstance(iterable, Var)\n else iterable.guess_type()\n )\n\n if iterable._var_type == Any:\n msg = (\n f\"Could not foreach over var `{iterable!s}` of type Any. \"\n \"(If you are trying to foreach over a state var, add a type annotation to the var). \"\n \"See https://reflex.dev/docs/library/dynamic-rendering/foreach/\"\n )\n raise ForeachVarError(msg)\n\n if (\n hasattr(render_fn, \"__qualname__\")\n and render_fn.__qualname__ == ComponentState.create.__qualname__\n ):\n msg = \"Using a ComponentState as `render_fn` inside `rx.foreach` is not supported yet.\"\n raise TypeError(msg)\n\n if isinstance(iterable, ObjectVar):\n iterable = iterable.entries()\n\n if isinstance(iterable, StringVar):\n iterable = iterable.split()\n\n if not isinstance(iterable, ArrayVar):\n msg = (\n f\"Could not foreach over var `{iterable!s}` of type {iterable._var_type}. \"\n \"See https://reflex.dev/docs/library/dynamic-rendering/foreach/\"\n )\n raise ForeachVarError(msg)\n\n if types.is_optional(iterable._var_type):\n iterable = cond(iterable, iterable, [])\n\n component = cls._create(\n children=[],\n iterable=iterable,\n render_fn=render_fn,\n )\n try:\n # Keep a ref to a rendered component to determine correct imports/hooks/styles.\n component.children = [component._render().render_component()]\n except UntypedVarError as e:\n raise UntypedVarError(\n iterable,\n \"foreach\",\n \"https://reflex.dev/docs/library/dynamic-rendering/foreach/\",\n ).with_traceback(e.__traceback__) from None\n return component\n\n def _render(self) -> IterTag:\n props = {}\n\n render_sig = inspect.signature(self.render_fn)\n params = list(render_sig.parameters.values())\n\n # Validate the render function signature.\n if len(params) == 0 or len(params) > 2:\n msg = (\n \"Expected 1 or 2 parameters in foreach render function, got \"\n f\"{[p.name for p in params]}. See \"\n \"https://reflex.dev/docs/library/dynamic-rendering/foreach/\"\n )\n raise ForeachRenderError(msg)\n\n if len(params) >= 1:\n # Determine the arg var name based on the params accepted by render_fn.\n props[\"arg_var_name\"] = params[0].name + FIELD_MARKER\n\n if len(params) == 2:\n # Determine the index var name based on the params accepted by render_fn.\n props[\"index_var_name\"] = params[1].name + FIELD_MARKER\n else:\n render_fn = self.render_fn\n # Otherwise, use a deterministic index, based on the render function bytecode.\n if (render_fn_code := getattr(render_fn, \"__code__\", None)) is not None:\n code_hash = md5(render_fn_code.co_code).hexdigest()\n elif isinstance(render_fn, functools.partial):\n code_hash = md5(render_fn.func.__code__.co_code).hexdigest()\n else:\n code_hash = md5(repr(render_fn).encode()).hexdigest()\n props[\"index_var_name\"] = f\"index_{code_hash}\"\n\n return IterTag(\n iterable=self.iterable,\n render_fn=self.render_fn,\n children=self.children,\n **props,\n )\n\n def render(self):\n \"\"\"Render the component.\n\n Returns:\n The dictionary for template of component.\n \"\"\"\n tag = self._render()\n\n return dict(\n tag,\n iterable_state=str(tag.iterable),\n arg_name=tag.arg_var_name,\n arg_index=tag.index_var_name,\n )\n\n\nforeach = Foreach.create\n" }, { "path": "reflex/components/core/helmet.py", "content": "\"\"\"Helmet component module.\"\"\"\n\nfrom reflex.components.component import Component\n\n\nclass Helmet(Component):\n \"\"\"A helmet component.\"\"\"\n\n library = \"react-helmet@6.1.0\"\n\n tag = \"Helmet\"\n\n\nhelmet = Helmet.create\n" }, { "path": "reflex/components/core/html.py", "content": "\"\"\"A html component.\"\"\"\n\nfrom reflex.components.el.elements.typography import Div\nfrom reflex.vars.base import Var\n\n\nclass Html(Div):\n \"\"\"Render the html.\n\n Returns:\n The code to render the html component.\n \"\"\"\n\n # The HTML to render.\n dangerouslySetInnerHTML: Var[dict[str, str]] # noqa: N815\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a html component.\n\n Args:\n *children: The children of the component.\n **props: The props to pass to the component.\n\n Returns:\n The html component.\n\n Raises:\n ValueError: If children are not provided or more than one child is provided.\n \"\"\"\n # If children are not provided, throw an error.\n if len(children) != 1:\n msg = \"Must provide children to the html component.\"\n raise ValueError(msg)\n props[\"dangerouslySetInnerHTML\"] = {\"__html\": children[0]}\n\n # Apply the default classname\n given_class_name = props.pop(\"class_name\", [])\n if isinstance(given_class_name, str):\n given_class_name = [given_class_name]\n props[\"class_name\"] = [\"rx-Html\", *given_class_name]\n\n # Create the component.\n return super().create(**props)\n\n\nhtml = Html.create\n" }, { "path": "reflex/components/core/layout/__init__.py", "content": "\"\"\"Core layout components.\"\"\"\n" }, { "path": "reflex/components/core/match.py", "content": "\"\"\"rx.match.\"\"\"\n\nimport textwrap\nfrom typing import Any, cast\n\nfrom reflex.components.base import Fragment\nfrom reflex.components.component import BaseComponent, Component, MemoizationLeaf, field\nfrom reflex.components.tags import Tag\nfrom reflex.components.tags.match_tag import MatchTag\nfrom reflex.style import Style\nfrom reflex.utils import format\nfrom reflex.utils.exceptions import MatchTypeError\nfrom reflex.utils.imports import ImportDict\nfrom reflex.vars import VarData\nfrom reflex.vars.base import LiteralVar, Var\n\n\nclass Match(MemoizationLeaf):\n \"\"\"Match cases based on a condition.\"\"\"\n\n # The condition to determine which case to match.\n cond: Var[Any]\n\n # The list of match cases to be matched.\n match_cases: list[tuple[list[Var], BaseComponent]] = field(\n default_factory=list, is_javascript_property=False\n )\n\n # The catchall case to match.\n default: BaseComponent = field(\n default_factory=Fragment.create, is_javascript_property=False\n )\n\n @classmethod\n def create(cls, cond: Any, *cases) -> Component | Var:\n \"\"\"Create a Match Component.\n\n Args:\n cond: The condition to determine which case to match.\n cases: This list of cases to match.\n\n Returns:\n The match component.\n\n Raises:\n ValueError: When a default case is not provided for cases with Var return types.\n \"\"\"\n match_cond_var = cls._create_condition_var(cond)\n cases, default = cls._process_cases(list(cases))\n match_cases = cls._process_match_cases(cases)\n\n match_cases = cls._validate_return_types(match_cases)\n\n if default is None and isinstance(match_cases[0][1], Var):\n msg = \"For cases with return types as Vars, a default case must be provided\"\n raise ValueError(msg)\n\n return cls._create_match_cond_var_or_component(\n match_cond_var, match_cases, default\n )\n\n @classmethod\n def _create_condition_var(cls, cond: Any) -> Var:\n \"\"\"Convert the condition to a Var.\n\n Args:\n cond: The condition.\n\n Returns:\n The condition as a base var\n\n Raises:\n ValueError: If the condition is not provided.\n \"\"\"\n match_cond_var = LiteralVar.create(cond)\n\n if match_cond_var is None:\n msg = \"The condition must be set\"\n raise ValueError(msg)\n return match_cond_var\n\n @classmethod\n def _process_cases(\n cls, cases: list\n ) -> tuple[list[tuple], Var | BaseComponent | None]:\n \"\"\"Process the list of match cases and the catchall default case.\n\n Args:\n cases: The list of match cases.\n\n Returns:\n The default case and the list of match case tuples.\n\n Raises:\n ValueError: If there are multiple default cases.\n \"\"\"\n if not cases:\n msg = \"rx.match should have at least one case.\"\n raise ValueError(msg)\n\n if not isinstance(cases[-1], tuple):\n *cases, default_return = cases\n default_return = (\n cls._create_case_var_with_var_data(default_return)\n if not isinstance(default_return, BaseComponent)\n else default_return\n )\n else:\n default_return = None\n\n if any(case for case in cases if not isinstance(case, tuple)):\n msg = \"rx.match should have tuples of cases and one default case as the last argument.\"\n raise ValueError(msg)\n\n if not cases:\n msg = \"rx.match should have at least one case.\"\n raise ValueError(msg)\n\n return cases, default_return\n\n @classmethod\n def _create_case_var_with_var_data(cls, case_element: Any) -> Var:\n \"\"\"Convert a case element into a Var.If the case\n is a Style type, we extract the var data and merge it with the\n newly created Var.\n\n Args:\n case_element: The case element.\n\n Returns:\n The case element Var.\n \"\"\"\n var_data = case_element._var_data if isinstance(case_element, Style) else None\n return LiteralVar.create(case_element, _var_data=var_data)\n\n @classmethod\n def _process_match_cases(\n cls, cases: list[tuple]\n ) -> list[tuple[list[Var], BaseComponent | Var]]:\n \"\"\"Process the individual match cases.\n\n Args:\n cases: The match cases.\n\n Returns:\n The processed match cases.\n\n Raises:\n ValueError: If the default case is not the last case or the tuple elements are less than 2.\n \"\"\"\n match_cases: list[tuple[list[Var], BaseComponent | Var]] = []\n for case_index, case in enumerate(cases):\n # There should be at least two elements in a case tuple(a condition and return value)\n if len(case) < 2:\n msg = \"A case tuple should have at least a match case element and a return value.\"\n raise ValueError(msg)\n\n *conditions, return_value = case\n\n conditions_vars: list[Var] = []\n for condition_index, condition in enumerate(conditions):\n if isinstance(condition, BaseComponent):\n msg = f\"Match condition {condition_index} of case {case_index} cannot be a component.\"\n raise ValueError(msg)\n conditions_vars.append(cls._create_case_var_with_var_data(condition))\n\n return_value = (\n cls._create_case_var_with_var_data(return_value)\n if not isinstance(return_value, BaseComponent)\n else return_value\n )\n\n if not isinstance(return_value, (Var, BaseComponent)):\n msg = \"Return value must be a var or component\"\n raise ValueError(msg)\n\n match_cases.append((conditions_vars, return_value))\n\n return match_cases\n\n @classmethod\n def _validate_return_types(\n cls, match_cases: list[tuple[list[Var], BaseComponent | Var]]\n ) -> list[tuple[list[Var], Var]] | list[tuple[list[Var], BaseComponent]]:\n \"\"\"Validate that match cases have the same return types.\n\n Args:\n match_cases: The match cases.\n\n Returns:\n The validated match cases.\n\n Raises:\n MatchTypeError: If the return types of cases are different.\n \"\"\"\n first_case_return = match_cases[0][-1]\n return_type = type(first_case_return)\n\n if isinstance(first_case_return, BaseComponent):\n return_type = BaseComponent\n elif isinstance(first_case_return, Var):\n return_type = Var\n\n cases = []\n for index, case in enumerate(match_cases):\n conditions, return_value = case\n if not isinstance(return_value, return_type):\n msg = (\n f\"Match cases should have the same return types. Case {index} with return \"\n f\"value `{return_value._js_expr if isinstance(return_value, Var) else textwrap.shorten(str(return_value), width=250)}`\"\n f\" of type {type(return_value)!r} is not {return_type}\"\n )\n raise MatchTypeError(msg)\n cases.append((conditions, return_value))\n return cases\n\n @classmethod\n def _create_match_cond_var_or_component(\n cls,\n match_cond_var: Var,\n match_cases: list[tuple[list[Var], BaseComponent]]\n | list[tuple[list[Var], Var]],\n default: Var | BaseComponent | None,\n ) -> Component | Var:\n \"\"\"Create and return the match condition var or component.\n\n Args:\n match_cond_var: The match condition.\n match_cases: The list of match cases.\n default: The default case.\n\n Returns:\n The match component wrapped in a fragment or the match var.\n \"\"\"\n if isinstance(match_cases[0][1], BaseComponent):\n if default is None:\n default = Fragment.create()\n\n return Fragment.create(\n cls._create(\n cond=match_cond_var,\n match_cases=match_cases,\n default=default,\n children=[case[1] for case in match_cases] + [default], # pyright: ignore [reportArgumentType]\n )\n )\n\n match_cases = cast(\"list[tuple[list[Var], Var]]\", match_cases)\n default = cast(\"Var\", default)\n\n return Var(\n _js_expr=format.format_match(\n cond=str(match_cond_var),\n match_cases=match_cases,\n default=default,\n ),\n _var_type=default._var_type,\n _var_data=VarData.merge(\n match_cond_var._get_all_var_data(),\n *[el._get_all_var_data() for case in match_cases for el in case[0]],\n *[case[1]._get_all_var_data() for case in match_cases],\n default._get_all_var_data(),\n ),\n )\n\n def _render(self) -> Tag:\n return MatchTag(\n cond=str(self.cond),\n match_cases=[\n ([str(cond) for cond in conditions], return_value.render())\n for conditions, return_value in self.match_cases\n ],\n default=self.default.render(),\n )\n\n def render(self) -> dict:\n \"\"\"Render the component.\n\n Returns:\n The dictionary for template of component.\n \"\"\"\n return dict(self._render())\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add imports for the Match component.\n\n Returns:\n The import dict.\n \"\"\"\n var_data = VarData.merge(self.cond._get_all_var_data())\n return var_data.old_school_imports() if var_data else {}\n\n\nmatch = Match.create\n" }, { "path": "reflex/components/core/responsive.py", "content": "\"\"\"Responsive components.\"\"\"\n\nfrom reflex.components.radix.themes.layout.box import Box\n\n\n# Add responsive styles shortcuts.\ndef mobile_only(*children, **props):\n \"\"\"Create a component that is only visible on mobile.\n\n Args:\n *children: The children to pass to the component.\n **props: The props to pass to the component.\n\n Returns:\n The component.\n \"\"\"\n return Box.create(*children, **props, display=[\"block\", \"none\", \"none\", \"none\"])\n\n\ndef tablet_only(*children, **props):\n \"\"\"Create a component that is only visible on tablet.\n\n Args:\n *children: The children to pass to the component.\n **props: The props to pass to the component.\n\n Returns:\n The component.\n \"\"\"\n return Box.create(*children, **props, display=[\"none\", \"block\", \"block\", \"none\"])\n\n\ndef desktop_only(*children, **props):\n \"\"\"Create a component that is only visible on desktop.\n\n Args:\n *children: The children to pass to the component.\n **props: The props to pass to the component.\n\n Returns:\n The component.\n \"\"\"\n return Box.create(*children, **props, display=[\"none\", \"none\", \"none\", \"block\"])\n\n\ndef tablet_and_desktop(*children, **props):\n \"\"\"Create a component that is only visible on tablet and desktop.\n\n Args:\n *children: The children to pass to the component.\n **props: The props to pass to the component.\n\n Returns:\n The component.\n \"\"\"\n return Box.create(*children, **props, display=[\"none\", \"block\", \"block\", \"block\"])\n\n\ndef mobile_and_tablet(*children, **props):\n \"\"\"Create a component that is only visible on mobile and tablet.\n\n Args:\n *children: The children to pass to the component.\n **props: The props to pass to the component.\n\n Returns:\n The component.\n \"\"\"\n return Box.create(*children, **props, display=[\"block\", \"block\", \"block\", \"none\"])\n" }, { "path": "reflex/components/core/sticky.py", "content": "\"\"\"Components for displaying the Reflex sticky logo.\"\"\"\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.colors import color\nfrom reflex.components.core.cond import color_mode_cond\nfrom reflex.components.core.responsive import desktop_only\nfrom reflex.components.el.elements.inline import A\nfrom reflex.components.el.elements.media import Path, Rect, Svg\nfrom reflex.components.radix.themes.typography.text import Text\nfrom reflex.style import Style\n\n\nclass StickyLogo(Svg):\n \"\"\"A simple Reflex logo SVG with only the letter R.\"\"\"\n\n @classmethod\n def create(cls):\n \"\"\"Create the simple Reflex logo SVG.\n\n Returns:\n The simple Reflex logo SVG.\n \"\"\"\n return super().create(\n Rect.create(width=\"16\", height=\"16\", rx=\"2\", fill=\"#6E56CF\"),\n Path.create(d=\"M10 9V13H12V9H10Z\", fill=\"white\"),\n Path.create(d=\"M4 3V13H6V9H10V7H6V5H10V7H12V3H4Z\", fill=\"white\"),\n width=\"16\",\n height=\"16\",\n viewBox=\"0 0 16 16\",\n xmlns=\"http://www.w3.org/2000/svg\",\n )\n\n def add_style(self):\n \"\"\"Add the style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return Style({\n \"fill\": \"white\",\n })\n\n\nclass StickyLabel(Text):\n \"\"\"A label that displays the Reflex sticky.\"\"\"\n\n @classmethod\n def create(cls):\n \"\"\"Create the sticky label.\n\n Returns:\n The sticky label.\n \"\"\"\n return super().create(\"Built with Reflex\")\n\n def add_style(self):\n \"\"\"Add the style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return Style({\n \"color\": color(\"slate\", 1),\n \"font_weight\": \"600\",\n \"font_family\": \"'Instrument Sans', sans-serif\",\n \"font_size\": \"0.875rem\",\n \"line_height\": \"1rem\",\n \"letter_spacing\": \"-0.00656rem\",\n })\n\n\nclass StickyBadge(A):\n \"\"\"A badge that displays the Reflex sticky logo.\"\"\"\n\n @classmethod\n def create(cls):\n \"\"\"Create the sticky badge.\n\n Returns:\n The sticky badge.\n \"\"\"\n return super().create(\n StickyLogo.create(),\n desktop_only(StickyLabel.create()),\n href=\"https://reflex.dev\",\n target=\"_blank\",\n width=\"auto\",\n padding=\"0.375rem\",\n align=\"center\",\n text_align=\"center\",\n )\n\n def add_style(self):\n \"\"\"Add the style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return Style(\n {\n \"position\": \"fixed\",\n \"bottom\": \"1rem\",\n \"right\": \"1rem\",\n \"display\": \"flex\",\n \"flex-direction\": \"row\",\n \"gap\": \"0.375rem\",\n \"align-items\": \"center\",\n \"width\": \"auto\",\n \"border-radius\": \"0.5rem\",\n \"color\": color_mode_cond(\"#E5E7EB\", \"#27282B\"),\n \"border\": color_mode_cond(\"1px solid #27282B\", \"1px solid #E5E7EB\"),\n \"background-color\": color_mode_cond(\"#151618\", \"#FCFCFD\"),\n \"padding\": \"0.375rem\",\n \"transition\": \"background-color 0.2s ease-in-out\",\n \"box-shadow\": \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n \"z-index\": \"9998\",\n \"cursor\": \"pointer\",\n },\n )\n\n\nclass StickyNamespace(ComponentNamespace):\n \"\"\"Sticky components namespace.\"\"\"\n\n __call__ = staticmethod(StickyBadge.create)\n label = staticmethod(StickyLabel.create)\n logo = staticmethod(StickyLogo.create)\n\n\nsticky = StickyNamespace()\n" }, { "path": "reflex/components/core/upload.py", "content": "\"\"\"A file upload component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Callable, Sequence\nfrom pathlib import Path\nfrom typing import Any, ClassVar\n\nfrom reflex.app import UploadFile\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import (\n Component,\n ComponentNamespace,\n MemoizationLeaf,\n StatefulComponent,\n field,\n)\nfrom reflex.components.core.cond import cond\nfrom reflex.components.el.elements.forms import Input\nfrom reflex.components.radix.themes.layout.box import Box\nfrom reflex.components.sonner.toast import toast\nfrom reflex.constants import Dirs\nfrom reflex.constants.compiler import Hooks, Imports\nfrom reflex.environment import environment\nfrom reflex.event import (\n CallableEventSpec,\n EventChain,\n EventHandler,\n EventSpec,\n call_event_fn,\n call_event_handler,\n parse_args_spec,\n passthrough_event_spec,\n run_script,\n upload_files,\n)\nfrom reflex.style import Style\nfrom reflex.utils import format\nfrom reflex.utils.imports import ImportVar\nfrom reflex.vars import VarData\nfrom reflex.vars.base import Var, get_unique_variable_name\nfrom reflex.vars.function import FunctionVar\nfrom reflex.vars.object import ObjectVar\nfrom reflex.vars.sequence import ArrayVar, LiteralStringVar\n\nDEFAULT_UPLOAD_ID: str = \"default\"\n\nupload_files_context_var_data: VarData = VarData(\n imports={\n \"react\": \"useContext\",\n f\"$/{Dirs.CONTEXTS_PATH}\": \"UploadFilesContext\",\n },\n hooks={\n \"const [filesById, setFilesById] = useContext(UploadFilesContext);\": None,\n },\n)\n\n\ndef upload_file(id_: str | Var[str] = DEFAULT_UPLOAD_ID) -> Var:\n \"\"\"Get the file upload drop trigger.\n\n This var is passed to the dropzone component to update the file list when a\n drop occurs.\n\n Args:\n id_: The id of the upload to get the drop trigger for.\n\n Returns:\n A var referencing the file upload drop trigger.\n \"\"\"\n id_var = LiteralStringVar.create(id_) if not isinstance(id_, Var) else id_\n var_name = f\"\"\"e => setFilesById(filesById => {{\n const updatedFilesById = Object.assign({{}}, filesById);\n updatedFilesById[{id_var!s}] = e;\n return updatedFilesById;\n }})\n \"\"\"\n\n return Var(\n _js_expr=var_name,\n _var_type=EventChain,\n _var_data=VarData.merge(\n upload_files_context_var_data, id_var._get_all_var_data()\n ),\n )\n\n\ndef selected_files(id_: str | Var[str] = DEFAULT_UPLOAD_ID) -> Var:\n \"\"\"Get the list of selected files.\n\n Args:\n id_: The id of the upload to get the selected files for.\n\n Returns:\n A var referencing the list of selected file paths.\n \"\"\"\n id_var = LiteralStringVar.create(id_) if not isinstance(id_, Var) else id_\n return Var(\n _js_expr=f\"(filesById[{id_var!s}] ? filesById[{id_var!s}].map((f) => f.name) : [])\",\n _var_type=list[str],\n _var_data=VarData.merge(\n upload_files_context_var_data, id_var._get_all_var_data()\n ),\n ).guess_type()\n\n\n@CallableEventSpec\ndef clear_selected_files(id_: str = DEFAULT_UPLOAD_ID) -> EventSpec:\n \"\"\"Clear the list of selected files.\n\n Args:\n id_: The id of the upload to clear.\n\n Returns:\n An event spec that clears the list of selected files when triggered.\n \"\"\"\n # UploadFilesProvider assigns a special function to clear selected files\n # into the shared global refs object to make it accessible outside a React\n # component via `run_script` (otherwise backend could never clear files).\n return run_script(Var(\"__clear_selected_files\")._as_ref().to(FunctionVar).call(id_))\n\n\ndef cancel_upload(upload_id: str) -> EventSpec:\n \"\"\"Cancel an upload.\n\n Args:\n upload_id: The id of the upload to cancel.\n\n Returns:\n An event spec that cancels the upload when triggered.\n \"\"\"\n controller = Var(f\"__upload_controllers_{upload_id}\")._as_ref()\n return run_script(f\"{controller}?.abort()\")\n\n\ndef get_upload_dir() -> Path:\n \"\"\"Get the directory where uploaded files are stored.\n\n Returns:\n The directory where uploaded files are stored.\n \"\"\"\n Upload.is_used = True\n\n uploaded_files_dir = environment.REFLEX_UPLOADED_FILES_DIR.get()\n uploaded_files_dir.mkdir(parents=True, exist_ok=True)\n return uploaded_files_dir\n\n\nuploaded_files_url_prefix = Var(\n _js_expr=\"getBackendURL(env.UPLOAD)\",\n _var_data=VarData(\n imports={\n f\"$/{Dirs.STATE_PATH}\": \"getBackendURL\",\n \"$/env.json\": ImportVar(tag=\"env\", is_default=True),\n }\n ),\n).to(str)\n\n\ndef get_upload_url(file_path: str | Var[str]) -> Var[str]:\n \"\"\"Get the URL of an uploaded file.\n\n Args:\n file_path: The path of the uploaded file.\n\n Returns:\n The URL of the uploaded file to be rendered from the frontend (as a str-encoded Var).\n \"\"\"\n Upload.is_used = True\n\n return Var.create(f\"{uploaded_files_url_prefix}/{file_path}\")\n\n\n_on_drop_spec = passthrough_event_spec(list[UploadFile])\n\n\ndef _default_drop_rejected(rejected_files: ArrayVar[list[dict[str, Any]]]) -> EventSpec:\n \"\"\"Event handler for showing a toast with rejected file info.\n\n Args:\n rejected_files: The files that were rejected.\n\n Returns:\n An event spec that shows a toast with the rejected file info when triggered.\n \"\"\"\n\n def _format_rejected_file_record(rf: ObjectVar[dict[str, Any]]) -> str:\n rf = rf.to(ObjectVar, dict[str, dict[str, Any]])\n file = rf[\"file\"].to(ObjectVar, dict[str, Any])\n errors = rf[\"errors\"].to(ArrayVar, list[dict[str, Any]])\n return f\"{file['path']}: {errors.foreach(lambda kv: kv['message']).join(', ')}\" # noqa: FURB118\n\n return toast.error(\n title=\"Files not Accepted\",\n description=rejected_files\n .to(ArrayVar)\n .foreach(_format_rejected_file_record)\n .join(\"\\n\\n\"),\n close_button=True,\n style={\"white_space\": \"pre-line\"},\n )\n\n\nclass UploadFilesProvider(Component):\n \"\"\"AppWrap component that provides a dict of selected files by ID via useContext.\"\"\"\n\n library = f\"$/{Dirs.CONTEXTS_PATH}\"\n tag = \"UploadFilesProvider\"\n\n\nclass GhostUpload(Fragment):\n \"\"\"A ghost upload component.\"\"\"\n\n # Fired when files are dropped.\n on_drop: EventHandler[_on_drop_spec]\n\n # Fired when dropped files do not meet the specified criteria.\n on_drop_rejected: EventHandler[_on_drop_spec]\n\n\nclass Upload(MemoizationLeaf):\n \"\"\"A file upload component.\"\"\"\n\n library = \"react-dropzone@15.0.0\"\n\n tag = \"\"\n\n # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as\n # values.\n # supported MIME types: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types\n accept: Var[dict[str, Sequence] | None]\n\n # Whether the dropzone is disabled.\n disabled: Var[bool]\n\n # The maximum number of files that can be uploaded.\n max_files: Var[int]\n\n # The maximum file size (bytes) that can be uploaded.\n max_size: Var[int]\n\n # The minimum file size (bytes) that can be uploaded.\n min_size: Var[int]\n\n # Whether to allow multiple files to be uploaded.\n multiple: Var[bool]\n\n # Whether to disable click to upload.\n no_click: Var[bool]\n\n # Whether to disable drag and drop.\n no_drag: Var[bool]\n\n # Whether to disable using the space/enter keys to upload.\n no_keyboard: Var[bool]\n\n # Marked True when any Upload component is created.\n is_used: ClassVar[bool] = False\n\n # Fired when files are dropped.\n on_drop: EventHandler[_on_drop_spec]\n\n # Fired when dropped files do not meet the specified criteria.\n on_drop_rejected: EventHandler[_on_drop_spec]\n\n # Style rules to apply when actively dragging.\n drag_active_style: Style | None = field(default=None, is_javascript_property=False)\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create an upload component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The upload component.\n \"\"\"\n # Mark the Upload component as used in the app.\n cls.is_used = True\n\n props.setdefault(\"multiple\", True)\n\n # Apply the default classname\n given_class_name = props.pop(\"class_name\", [])\n if isinstance(given_class_name, str):\n given_class_name = [given_class_name]\n props[\"class_name\"] = [\"rx-Upload\", *given_class_name]\n\n # get only upload component props\n supported_props = set(cls.get_props()) | {\"on_drop\"}\n upload_props = {\n key: value for key, value in props.items() if key in supported_props\n }\n\n # Create the component.\n upload_props[\"id\"] = upload_id = props.get(\"id\", DEFAULT_UPLOAD_ID)\n\n if upload_props.get(\"on_drop\") is None:\n # If on_drop is not provided, save files to be uploaded later.\n upload_props[\"on_drop\"] = upload_file(upload_id)\n else:\n on_drop = (\n [on_drop_prop]\n if not isinstance(on_drop_prop := upload_props[\"on_drop\"], Sequence)\n else list(on_drop_prop)\n )\n for ix, event in enumerate(on_drop):\n if isinstance(event, EventHandler):\n event = event(upload_files(upload_id))\n if isinstance(event, EventSpec):\n # Call the lambda to get the event chain.\n event = call_event_handler(event, _on_drop_spec)\n elif isinstance(event, Callable):\n # Call the lambda to get the event chain.\n event = call_event_fn(event, _on_drop_spec)\n if isinstance(event, EventSpec):\n # Update the provided args for direct use with on_drop.\n event = event.with_args(\n args=tuple(\n cls._update_arg_tuple_for_on_drop(arg_value)\n for arg_value in event.args\n ),\n )\n on_drop[ix] = event\n upload_props[\"on_drop\"] = on_drop\n\n if upload_props.get(\"on_drop_rejected\") is None:\n # If on_drop_rejected is not provided, show an error toast.\n upload_props[\"on_drop_rejected\"] = _default_drop_rejected\n\n input_props_unique_name = get_unique_variable_name()\n root_props_unique_name = get_unique_variable_name()\n is_drag_active_unique_name = get_unique_variable_name()\n drag_active_css_class_unique_name = get_unique_variable_name() + \"-drag-active\"\n\n # Handle special style when dragging over the drop zone.\n if \"drag_active_style\" in props:\n props.setdefault(\"style\", Style())[\n f\"&:where(.{drag_active_css_class_unique_name})\"\n ] = props.pop(\"drag_active_style\")\n props[\"class_name\"].append(\n cond(\n Var(is_drag_active_unique_name),\n drag_active_css_class_unique_name,\n \"\",\n ),\n )\n\n event_triggers = StatefulComponent._get_memoized_event_triggers(\n GhostUpload.create(\n on_drop=upload_props[\"on_drop\"],\n on_drop_rejected=upload_props[\"on_drop_rejected\"],\n )\n )\n callback_hooks = []\n for trigger_name, (event_var, callback_str) in event_triggers.items():\n upload_props[trigger_name] = event_var\n callback_hooks.append(callback_str)\n\n upload_props = {\n format.to_camel_case(key): value for key, value in upload_props.items()\n }\n\n use_dropzone_arguments = Var.create(upload_props)\n\n left_side = (\n \"const { \"\n f\"getRootProps: {root_props_unique_name}, \"\n f\"getInputProps: {input_props_unique_name}, \"\n f\"isDragActive: {is_drag_active_unique_name}\"\n \"}\"\n )\n right_side = f\"useDropzone({use_dropzone_arguments!s})\"\n\n var_data = VarData.merge(\n VarData(\n imports=Imports.EVENTS,\n hooks={Hooks.EVENTS: None},\n ),\n use_dropzone_arguments._get_all_var_data(),\n VarData(\n hooks={\n **dict.fromkeys(callback_hooks, None),\n f\"{left_side} = {right_side};\": None,\n },\n imports={\n \"react-dropzone\": \"useDropzone\",\n **Imports.EVENTS,\n },\n ),\n )\n\n # The file input to use.\n upload = Input.create(type=\"file\")\n upload.special_props = [\n Var(\n _js_expr=f\"{input_props_unique_name}()\",\n _var_type=None,\n _var_data=var_data,\n )\n ]\n\n # The dropzone to use.\n zone = Box.create(\n upload,\n *children,\n **{k: v for k, v in props.items() if k not in supported_props},\n )\n zone.special_props = [\n Var(\n _js_expr=f\"{root_props_unique_name}()\",\n _var_type=None,\n _var_data=var_data,\n )\n ]\n\n return super().create(\n zone,\n )\n\n @classmethod\n def _update_arg_tuple_for_on_drop(cls, arg_value: tuple[Var, Var]):\n \"\"\"Helper to update caller-provided EventSpec args for direct use with on_drop.\n\n Args:\n arg_value: The arg tuple to update (if necessary).\n\n Returns:\n The updated arg_value tuple when arg is \"files\", otherwise the original arg_value.\n \"\"\"\n if arg_value[0]._js_expr == \"files\":\n placeholders, _ = parse_args_spec(_on_drop_spec)\n placeholder = placeholders[0]\n return (arg_value[0], placeholder)\n return arg_value\n\n @staticmethod\n def _get_app_wrap_components() -> dict[tuple[int, str], Component]:\n return {\n (5, \"UploadFilesProvider\"): UploadFilesProvider.create(),\n }\n\n\nclass StyledUpload(Upload):\n \"\"\"The styled Upload Component.\"\"\"\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the styled upload component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The styled upload component.\n \"\"\"\n # Set default props.\n props.setdefault(\"border\", \"1px dashed var(--accent-12)\")\n props.setdefault(\"padding\", \"5em\")\n props.setdefault(\"textAlign\", \"center\")\n\n # Mark the Upload component as used in the app.\n Upload.is_used = True\n\n return super().create(\n *children,\n **props,\n )\n\n\nclass UploadNamespace(ComponentNamespace):\n \"\"\"Upload component namespace.\"\"\"\n\n root = Upload.create\n __call__ = StyledUpload.create\n\n\nupload = UploadNamespace()\n" }, { "path": "reflex/components/core/window_events.py", "content": "\"\"\"Window event listener component for Reflex.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, cast\n\nimport reflex as rx\nfrom reflex.components.base.fragment import Fragment\nfrom reflex.components.component import StatefulComponent, field\nfrom reflex.constants.compiler import Hooks\nfrom reflex.event import key_event, no_args_event_spec\nfrom reflex.vars.base import Var, VarData\nfrom reflex.vars.object import ObjectVar\n\n\ndef _on_resize_spec() -> tuple[Var[int], Var[int]]:\n \"\"\"Args spec for the on_resize event trigger.\n\n Returns:\n A tuple containing window width and height variables.\n \"\"\"\n return (Var(\"window.innerWidth\"), Var(\"window.innerHeight\"))\n\n\ndef _on_scroll_spec() -> tuple[Var[float], Var[float]]:\n \"\"\"Args spec for the on_scroll event trigger.\n\n Returns:\n A tuple containing window scroll X and Y position variables.\n \"\"\"\n return (Var(\"window.scrollX\"), Var(\"window.scrollY\"))\n\n\ndef _on_visibility_change_spec() -> tuple[Var[bool]]:\n \"\"\"Args spec for the on_visibility_change event trigger.\n\n Returns:\n A tuple containing the document hidden state variable.\n \"\"\"\n return (Var(\"document.hidden\"),)\n\n\ndef _on_storage_spec(e: ObjectVar) -> tuple[Var[str], Var[str], Var[str], Var[str]]:\n \"\"\"Args spec for the on_storage event trigger.\n\n Args:\n e: The storage event.\n\n Returns:\n A tuple containing key, old value, new value, and URL variables.\n \"\"\"\n return (e.key.to(str), e.oldValue.to(str), e.newValue.to(str), e.url.to(str))\n\n\nclass WindowEventListener(Fragment):\n \"\"\"A component that listens for window events.\"\"\"\n\n # Event handlers\n on_resize: rx.EventHandler[_on_resize_spec]\n on_scroll: rx.EventHandler[_on_scroll_spec]\n on_focus: rx.EventHandler[no_args_event_spec]\n on_blur: rx.EventHandler[no_args_event_spec]\n on_visibility_change: rx.EventHandler[_on_visibility_change_spec]\n on_before_unload: rx.EventHandler[no_args_event_spec]\n on_key_down: rx.EventHandler[key_event]\n on_popstate: rx.EventHandler[no_args_event_spec]\n on_storage: rx.EventHandler[_on_storage_spec]\n\n hooks: list[str] = field(default_factory=list, is_javascript_property=False)\n\n @classmethod\n def create(cls, **props) -> WindowEventListener:\n \"\"\"Create a WindowEventListener component.\n\n Args:\n **props: The props to set on the component.\n\n Returns:\n The created component.\n \"\"\"\n real_component = cast(\"WindowEventListener\", super().create(**props))\n hooks = StatefulComponent._fix_event_triggers(real_component)\n real_component.hooks = hooks\n return real_component\n\n def _exclude_props(self) -> list[str]:\n \"\"\"Exclude event handler props from being passed to Fragment.\n\n Returns:\n List of prop names to exclude from the Fragment.\n \"\"\"\n return [*super()._exclude_props(), *self.event_triggers.keys()]\n\n def add_hooks(self) -> list[str | Var[Any]]:\n \"\"\"Add hooks to register window event listeners.\n\n Returns:\n The hooks to add to the component.\n \"\"\"\n hooks: list[str | Var[Any]] = [*self.hooks]\n\n for prop_name, event_trigger in self.event_triggers.items():\n # Get JS event name: remove on_ prefix and underscores\n event_name = prop_name.removeprefix(\"on_\").replace(\"_\", \"\")\n\n hook_expr = f\"\"\"\nuseEffect(() => {{\n if (typeof window === 'undefined') return;\n const fn = {Var.create(event_trigger)};\n window.addEventListener('{event_name}', fn);\n return () => window.removeEventListener('{event_name}', fn);\n}}, []);\n \"\"\"\n\n hooks.append(\n Var(\n hook_expr,\n _var_data=VarData(position=Hooks.HookPosition.POST_TRIGGER),\n )\n )\n\n return hooks\n\n\nwindow_event_listener = WindowEventListener.create\n" }, { "path": "reflex/components/datadisplay/__init__.py", "content": "\"\"\"Data grid components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"code\": [\n \"CodeBlock\",\n \"code_block\",\n \"LiteralCodeLanguage\",\n ],\n \"dataeditor\": [\"data_editor\", \"data_editor_theme\", \"DataEditorTheme\"],\n \"logo\": [\"logo\"],\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/datadisplay/code.py", "content": "\"\"\"A code component.\"\"\"\n\nfrom __future__ import annotations\n\nimport dataclasses\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.component import Component, ComponentNamespace, field\nfrom reflex.components.core.cond import color_mode_cond\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.radix.themes.components.button import Button\nfrom reflex.components.radix.themes.layout.box import Box\nfrom reflex.constants.colors import Color\nfrom reflex.event import set_clipboard\nfrom reflex.style import Style\nfrom reflex.utils import format\nfrom reflex.utils.imports import ImportVar\nfrom reflex.vars.base import LiteralVar, Var, VarData\n\nLiteralCodeLanguage = Literal[\n \"abap\",\n \"abnf\",\n \"actionscript\",\n \"ada\",\n \"agda\",\n \"al\",\n \"antlr4\",\n \"apacheconf\",\n \"apex\",\n \"apl\",\n \"applescript\",\n \"aql\",\n \"arduino\",\n \"arff\",\n \"asciidoc\",\n \"asm6502\",\n \"asmatmel\",\n \"aspnet\",\n \"autohotkey\",\n \"autoit\",\n \"avisynth\",\n \"avro-idl\",\n \"bash\",\n \"basic\",\n \"batch\",\n \"bbcode\",\n \"bicep\",\n \"birb\",\n \"bison\",\n \"bnf\",\n \"brainfuck\",\n \"brightscript\",\n \"bro\",\n \"bsl\",\n \"c\",\n \"cfscript\",\n \"chaiscript\",\n \"cil\",\n \"clike\",\n \"clojure\",\n \"cmake\",\n \"cobol\",\n \"coffeescript\",\n \"concurnas\",\n \"coq\",\n \"core\",\n \"cpp\",\n \"crystal\",\n \"csharp\",\n \"cshtml\",\n \"csp\",\n \"css\",\n \"css-extras\",\n \"csv\",\n \"cypher\",\n \"d\",\n \"dart\",\n \"dataweave\",\n \"dax\",\n \"dhall\",\n \"diff\",\n \"django\",\n \"dns-zone-file\",\n \"docker\",\n \"dot\",\n \"ebnf\",\n \"editorconfig\",\n \"eiffel\",\n \"ejs\",\n \"elixir\",\n \"elm\",\n \"erb\",\n \"erlang\",\n \"etlua\",\n \"excel-formula\",\n \"factor\",\n \"false\",\n \"firestore-security-rules\",\n \"flow\",\n \"fortran\",\n \"fsharp\",\n \"ftl\",\n \"gap\",\n \"gcode\",\n \"gdscript\",\n \"gedcom\",\n \"gherkin\",\n \"git\",\n \"glsl\",\n \"gml\",\n \"gn\",\n \"go\",\n \"go-module\",\n \"graphql\",\n \"groovy\",\n \"haml\",\n \"handlebars\",\n \"haskell\",\n \"haxe\",\n \"hcl\",\n \"hlsl\",\n \"hoon\",\n \"hpkp\",\n \"hsts\",\n \"http\",\n \"ichigojam\",\n \"icon\",\n \"icu-message-format\",\n \"idris\",\n \"iecst\",\n \"ignore\",\n \"index\",\n \"inform7\",\n \"ini\",\n \"io\",\n \"j\",\n \"java\",\n \"javadoc\",\n \"javadoclike\",\n \"javascript\",\n \"javastacktrace\",\n \"jexl\",\n \"jolie\",\n \"jq\",\n \"js-extras\",\n \"js-templates\",\n \"jsdoc\",\n \"json\",\n \"json5\",\n \"jsonp\",\n \"jsstacktrace\",\n \"jsx\",\n \"julia\",\n \"keepalived\",\n \"keyman\",\n \"kotlin\",\n \"kumir\",\n \"kusto\",\n \"latex\",\n \"latte\",\n \"less\",\n \"lilypond\",\n \"liquid\",\n \"lisp\",\n \"livescript\",\n \"llvm\",\n \"log\",\n \"lolcode\",\n \"lua\",\n \"magma\",\n \"makefile\",\n \"markdown\",\n \"markup\",\n \"markup-templating\",\n \"matlab\",\n \"maxscript\",\n \"mel\",\n \"mermaid\",\n \"mizar\",\n \"mongodb\",\n \"monkey\",\n \"moonscript\",\n \"n1ql\",\n \"n4js\",\n \"nand2tetris-hdl\",\n \"naniscript\",\n \"nasm\",\n \"neon\",\n \"nevod\",\n \"nginx\",\n \"nim\",\n \"nix\",\n \"nsis\",\n \"objectivec\",\n \"ocaml\",\n \"opencl\",\n \"openqasm\",\n \"oz\",\n \"parigp\",\n \"parser\",\n \"pascal\",\n \"pascaligo\",\n \"pcaxis\",\n \"peoplecode\",\n \"perl\",\n \"php\",\n \"php-extras\",\n \"phpdoc\",\n \"plsql\",\n \"powerquery\",\n \"powershell\",\n \"processing\",\n \"prolog\",\n \"promql\",\n \"properties\",\n \"protobuf\",\n \"psl\",\n \"pug\",\n \"puppet\",\n \"pure\",\n \"purebasic\",\n \"purescript\",\n \"python\",\n \"q\",\n \"qml\",\n \"qore\",\n \"qsharp\",\n \"r\",\n \"racket\",\n \"reason\",\n \"regex\",\n \"rego\",\n \"renpy\",\n \"rest\",\n \"rip\",\n \"roboconf\",\n \"robotframework\",\n \"ruby\",\n \"rust\",\n \"sas\",\n \"sass\",\n \"scala\",\n \"scheme\",\n \"scss\",\n \"shell-session\",\n \"smali\",\n \"smalltalk\",\n \"smarty\",\n \"sml\",\n \"solidity\",\n \"solution-file\",\n \"soy\",\n \"sparql\",\n \"splunk-spl\",\n \"sqf\",\n \"sql\",\n \"squirrel\",\n \"stan\",\n \"stylus\",\n \"swift\",\n \"systemd\",\n \"t4-cs\",\n \"t4-templating\",\n \"t4-vb\",\n \"tap\",\n \"tcl\",\n \"textile\",\n \"toml\",\n \"tremor\",\n \"tsx\",\n \"tt2\",\n \"turtle\",\n \"twig\",\n \"typescript\",\n \"typoscript\",\n \"unrealscript\",\n \"uorazor\",\n \"uri\",\n \"v\",\n \"vala\",\n \"vbnet\",\n \"velocity\",\n \"verilog\",\n \"vhdl\",\n \"vim\",\n \"visual-basic\",\n \"warpscript\",\n \"wasm\",\n \"web-idl\",\n \"wiki\",\n \"wolfram\",\n \"wren\",\n \"xeora\",\n \"xml-doc\",\n \"xojo\",\n \"xquery\",\n \"yaml\",\n \"yang\",\n \"zig\",\n]\n\n\ndef construct_theme_var(theme: str) -> Var[Theme]:\n \"\"\"Construct a theme var.\n\n Args:\n theme: The theme to construct.\n\n Returns:\n The constructed theme var.\n \"\"\"\n return Var(\n theme,\n _var_data=VarData(\n imports={\n f\"react-syntax-highlighter/dist/esm/styles/prism/{format.to_kebab_case(theme)}\": [\n ImportVar(tag=theme, is_default=True, install=False)\n ]\n }\n ),\n )\n\n\n@dataclasses.dataclass(init=False)\nclass Theme:\n \"\"\"Themes for the CodeBlock component.\"\"\"\n\n a11y_dark: ClassVar[Var[Theme]] = construct_theme_var(\"a11yDark\")\n atom_dark: ClassVar[Var[Theme]] = construct_theme_var(\"atomDark\")\n cb: ClassVar[Var[Theme]] = construct_theme_var(\"cb\")\n coldark_cold: ClassVar[Var[Theme]] = construct_theme_var(\"coldarkCold\")\n coldark_dark: ClassVar[Var[Theme]] = construct_theme_var(\"coldarkDark\")\n coy: ClassVar[Var[Theme]] = construct_theme_var(\"coy\")\n coy_without_shadows: ClassVar[Var[Theme]] = construct_theme_var(\"coyWithoutShadows\")\n darcula: ClassVar[Var[Theme]] = construct_theme_var(\"darcula\")\n dark: ClassVar[Var[Theme]] = construct_theme_var(\"oneDark\")\n dracula: ClassVar[Var[Theme]] = construct_theme_var(\"dracula\")\n duotone_dark: ClassVar[Var[Theme]] = construct_theme_var(\"duotoneDark\")\n duotone_earth: ClassVar[Var[Theme]] = construct_theme_var(\"duotoneEarth\")\n duotone_forest: ClassVar[Var[Theme]] = construct_theme_var(\"duotoneForest\")\n duotone_light: ClassVar[Var[Theme]] = construct_theme_var(\"duotoneLight\")\n duotone_sea: ClassVar[Var[Theme]] = construct_theme_var(\"duotoneSea\")\n duotone_space: ClassVar[Var[Theme]] = construct_theme_var(\"duotoneSpace\")\n funky: ClassVar[Var[Theme]] = construct_theme_var(\"funky\")\n ghcolors: ClassVar[Var[Theme]] = construct_theme_var(\"ghcolors\")\n gruvbox_dark: ClassVar[Var[Theme]] = construct_theme_var(\"gruvboxDark\")\n gruvbox_light: ClassVar[Var[Theme]] = construct_theme_var(\"gruvboxLight\")\n holi_theme: ClassVar[Var[Theme]] = construct_theme_var(\"holiTheme\")\n hopscotch: ClassVar[Var[Theme]] = construct_theme_var(\"hopscotch\")\n light: ClassVar[Var[Theme]] = construct_theme_var(\"oneLight\")\n lucario: ClassVar[Var[Theme]] = construct_theme_var(\"lucario\")\n material_dark: ClassVar[Var[Theme]] = construct_theme_var(\"materialDark\")\n material_light: ClassVar[Var[Theme]] = construct_theme_var(\"materialLight\")\n material_oceanic: ClassVar[Var[Theme]] = construct_theme_var(\"materialOceanic\")\n night_owl: ClassVar[Var[Theme]] = construct_theme_var(\"nightOwl\")\n nord: ClassVar[Var[Theme]] = construct_theme_var(\"nord\")\n okaidia: ClassVar[Var[Theme]] = construct_theme_var(\"okaidia\")\n one_dark: ClassVar[Var[Theme]] = construct_theme_var(\"oneDark\")\n one_light: ClassVar[Var[Theme]] = construct_theme_var(\"oneLight\")\n pojoaque: ClassVar[Var[Theme]] = construct_theme_var(\"pojoaque\")\n prism: ClassVar[Var[Theme]] = construct_theme_var(\"prism\")\n shades_of_purple: ClassVar[Var[Theme]] = construct_theme_var(\"shadesOfPurple\")\n solarized_dark_atom: ClassVar[Var[Theme]] = construct_theme_var(\"solarizedDarkAtom\")\n solarizedlight: ClassVar[Var[Theme]] = construct_theme_var(\"solarizedlight\")\n synthwave84: ClassVar[Var[Theme]] = construct_theme_var(\"synthwave84\")\n tomorrow: ClassVar[Var[Theme]] = construct_theme_var(\"tomorrow\")\n twilight: ClassVar[Var[Theme]] = construct_theme_var(\"twilight\")\n vs: ClassVar[Var[Theme]] = construct_theme_var(\"vs\")\n vs_dark: ClassVar[Var[Theme]] = construct_theme_var(\"vsDark\")\n vsc_dark_plus: ClassVar[Var[Theme]] = construct_theme_var(\"vscDarkPlus\")\n xonokai: ClassVar[Var[Theme]] = construct_theme_var(\"xonokai\")\n z_touch: ClassVar[Var[Theme]] = construct_theme_var(\"zTouch\")\n\n\nfor theme_name in dir(Theme):\n if theme_name.startswith(\"_\"):\n continue\n setattr(Theme, theme_name, getattr(Theme, theme_name)._replace(_var_type=Theme))\n\n\nclass CodeBlock(Component, MarkdownComponentMap):\n \"\"\"A code block.\"\"\"\n\n library = \"react-syntax-highlighter@16.1.1\"\n\n tag = \"PrismAsyncLight\"\n\n alias = \"SyntaxHighlighter\"\n\n # The theme to use (\"light\" or \"dark\").\n theme: Var[Theme | str] = Theme.one_light\n\n # The language to use.\n language: Var[LiteralCodeLanguage] = Var.create(\"python\")\n\n # The code to display.\n code: Var[str]\n\n # If this is enabled line numbers will be shown next to the code block.\n show_line_numbers: Var[bool]\n\n # The starting line number to use.\n starting_line_number: Var[int]\n\n # Whether to wrap long lines.\n wrap_long_lines: Var[bool]\n\n # A custom style for the code block.\n custom_style: dict[str, str | Var | Color] = field(\n default_factory=dict, is_javascript_property=False\n )\n\n # Props passed down to the code tag.\n code_tag_props: Var[dict[str, str | dict[str, str]]]\n\n # Whether a copy button should appear.\n can_copy: bool | None = field(\n default=False,\n is_javascript_property=False,\n )\n\n # A custom copy button to override the default one.\n copy_button: bool | Component | None = field(\n default=None,\n is_javascript_property=False,\n )\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ):\n \"\"\"Create a text component.\n\n Args:\n *children: The children of the component.\n **props: The props to pass to the component.\n\n Returns:\n The text component.\n \"\"\"\n # This component handles style in a special prop.\n custom_style = props.pop(\"custom_style\", {})\n can_copy = props.pop(\"can_copy\", False)\n copy_button = props.pop(\"copy_button\", None)\n\n # react-syntax-highlighter doesn't have an explicit \"light\" or \"dark\" theme so we use one-light and one-dark\n # themes respectively to ensure code compatibility.\n if \"theme\" not in props:\n # Default color scheme responds to global color mode.\n props[\"theme\"] = color_mode_cond(\n light=Theme.one_light,\n dark=Theme.one_dark,\n )\n\n if can_copy:\n code = children[0]\n copy_button = (\n copy_button\n if copy_button is not None\n else Button.create(\n Icon.create(tag=\"copy\"),\n on_click=set_clipboard(code),\n style=Style({\"position\": \"absolute\", \"top\": \"0.5em\", \"right\": \"0\"}),\n )\n )\n custom_style.update({\"padding\": \"1em 3.2em 1em 1em\"})\n else:\n copy_button = None\n\n # Transfer style props to the custom style prop.\n for key, value in props.items():\n if key not in cls.get_fields():\n custom_style[key] = value\n\n # Carry the children (code) via props\n if children:\n props[\"code\"] = children[0]\n if not isinstance(props[\"code\"], Var):\n props[\"code\"] = LiteralVar.create(props[\"code\"])\n\n # Create the component.\n code_block = super().create(\n **props,\n custom_style=Style(custom_style),\n )\n\n if copy_button:\n return Box.create(code_block, copy_button, position=\"relative\")\n return code_block\n\n def add_style(self):\n \"\"\"Add style to the component.\"\"\"\n self.custom_style.update(self.style)\n\n def _render(self):\n out = super()._render()\n\n theme = self.theme\n\n return (\n out\n .add_props(style=theme)\n .remove_props(\"theme\", \"code\")\n .add_props(\n children=self.code,\n )\n )\n\n\nclass CodeblockNamespace(ComponentNamespace):\n \"\"\"Namespace for the CodeBlock component.\"\"\"\n\n themes = Theme\n\n __call__ = CodeBlock.create\n\n\ncode_block = CodeblockNamespace()\n" }, { "path": "reflex/components/datadisplay/dataeditor.py", "content": "\"\"\"Data Editor component from glide-data-grid.\"\"\"\n\nfrom __future__ import annotations\n\nimport dataclasses\nfrom collections.abc import Mapping, Sequence\nfrom enum import Enum\nfrom typing import Any, Literal, TypedDict\n\nfrom reflex.components.component import Component, NoSSRComponent\nfrom reflex.components.literals import LiteralRowMarker\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.utils import console, format, types\nfrom reflex.utils.imports import ImportDict, ImportVar\nfrom reflex.utils.serializers import serializer\nfrom reflex.vars import get_unique_variable_name\nfrom reflex.vars.base import Var\nfrom reflex.vars.function import FunctionStringVar\nfrom reflex.vars.sequence import ArrayVar\n\n\n# TODO: Fix the serialization issue for custom types.\nclass GridColumnIcons(Enum):\n \"\"\"An Enum for the available icons in DataEditor.\"\"\"\n\n Array = \"array\"\n AudioUri = \"audio_uri\"\n Boolean = \"boolean\"\n HeaderCode = \"code\"\n Date = \"date\"\n Email = \"email\"\n Emoji = \"emoji\"\n GeoDistance = \"geo_distance\"\n IfThenElse = \"if_then_else\"\n Image = \"image\"\n JoinStrings = \"join_strings\"\n Lookup = \"lookup\"\n Markdown = \"markdown\"\n Math = \"math\"\n Number = \"number\"\n Phone = \"phone\"\n Reference = \"reference\"\n Rollup = \"rollup\"\n RowID = \"row_id\"\n SingleValue = \"single_value\"\n SplitString = \"split_string\"\n String = \"string\"\n TextTemplate = \"text_template\"\n Time = \"time\"\n Uri = \"uri\"\n VideoUri = \"video_uri\"\n\n\n@dataclasses.dataclass\nclass DataEditorThemeBase:\n \"\"\"The theme for the DataEditor component.\"\"\"\n\n accent_color: str | None = None\n accent_fg: str | None = None\n accent_light: str | None = None\n base_font_style: str | None = None\n bg_bubble: str | None = None\n bg_bubble_selected: str | None = None\n bg_cell: str | None = None\n bg_cell_medium: str | None = None\n bg_header: str | None = None\n bg_header_has_focus: str | None = None\n bg_header_hovered: str | None = None\n bg_icon_header: str | None = None\n bg_search_result: str | None = None\n border_color: str | None = None\n cell_horizontal_padding: int | None = None\n cell_vertical_padding: int | None = None\n drilldown_border: str | None = None\n editor_font_size: str | None = None\n fg_icon_header: str | None = None\n font_family: str | None = None\n header_bottom_border_color: str | None = None\n header_font_style: str | None = None\n horizontal_border_color: str | None = None\n line_height: int | None = None\n link_color: str | None = None\n text_bubble: str | None = None\n text_dark: str | None = None\n text_group_header: str | None = None\n text_header: str | None = None\n text_header_selected: str | None = None\n text_light: str | None = None\n text_medium: str | None = None\n\n\n@dataclasses.dataclass(init=False)\nclass DataEditorTheme(DataEditorThemeBase):\n \"\"\"The theme for the DataEditor component.\"\"\"\n\n def __init__(self, **kwargs: Any):\n \"\"\"Initialize the DataEditorTheme.\n\n Args:\n **kwargs: The keyword arguments to initialize the theme.\n \"\"\"\n kwargs = {format.to_snake_case(k): v for k, v in kwargs.items()}\n super().__init__(**kwargs)\n\n\nclass Bounds(TypedDict):\n \"\"\"The bounds of the group header.\"\"\"\n\n x: int\n y: int\n width: int\n height: int\n\n\nclass CompatSelection(TypedDict):\n \"\"\"The selection.\"\"\"\n\n items: list\n\n\nclass Rectangle(TypedDict):\n \"\"\"The bounds of the group header.\"\"\"\n\n x: int\n y: int\n width: int\n height: int\n\n\nclass GridSelectionCurrent(TypedDict):\n \"\"\"The current selection.\"\"\"\n\n cell: tuple[int, int]\n range: Rectangle\n rangeStack: list[Rectangle]\n\n\nclass GridSelection(TypedDict):\n \"\"\"The grid selection.\"\"\"\n\n current: GridSelectionCurrent | None\n columns: CompatSelection\n rows: CompatSelection\n\n\nclass GroupHeaderClickedEventArgs(TypedDict):\n \"\"\"The arguments for the group header clicked event.\"\"\"\n\n kind: str\n group: str\n location: tuple[int, int]\n bounds: Bounds\n isEdge: bool\n shiftKey: bool\n ctrlKey: bool\n metaKey: bool\n isTouch: bool\n localEventX: int\n localEventY: int\n button: int\n buttons: int\n scrollEdge: tuple[int, int]\n\n\nclass GridCell(TypedDict):\n \"\"\"The grid cell.\"\"\"\n\n span: list[int] | None\n\n\nclass GridColumn(TypedDict):\n \"\"\"The grid column.\"\"\"\n\n title: str\n group: str | None\n\n\nclass DataEditor(NoSSRComponent):\n \"\"\"The DataEditor Component.\"\"\"\n\n tag = \"DataEditor\"\n is_default = True\n library: str | None = \"@glideapps/glide-data-grid@6.0.3\"\n lib_dependencies: list[str] = [\n \"lodash@4.17.23\",\n \"react-responsive-carousel@3.2.23\",\n ]\n\n # Number of rows.\n rows: Var[int]\n\n # Headers of the columns for the data grid.\n columns: Var[Sequence[dict[str, Any]]]\n\n # The data.\n data: Var[Sequence[Sequence[Any]]]\n\n # The name of the callback used to find the data to display.\n get_cell_content: Var[str]\n\n # Allow selection for copying.\n get_cells_for_selection: Var[bool]\n\n # Allow paste.\n on_paste: Var[bool]\n\n # Controls the drawing of the focus ring.\n draw_focus_ring: Var[bool]\n\n # Enables or disables the overlay shadow when scrolling horizontally.\n fixed_shadow_x: Var[bool]\n\n # Enables or disables the overlay shadow when scrolling vertically.\n fixed_shadow_y: Var[bool]\n\n # Controls the presence of the fill indicator\n fill_handle: Var[bool]\n\n # The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.\n freeze_columns: Var[int]\n\n # Controls the header of the group header row.\n group_header_height: Var[int]\n\n # Controls the height of the header row.\n header_height: Var[int]\n\n # Additional header icons:\n # header_icons: Var[Any] # (TODO: must be a map of name: svg) #noqa: ERA001\n\n # The maximum width a column can be automatically sized to.\n max_column_auto_width: Var[int]\n\n # The maximum width a column can be resized to.\n max_column_width: Var[int]\n\n # The minimum width a column can be resized to.\n min_column_width: Var[int]\n\n # Determines the height of each row.\n row_height: Var[int]\n\n # Kind of row markers. Options are: \"none\", \"number\", \"checkbox\", \"both\", \"checkbox-visible\", \"clickable-number\".\n row_markers: Var[LiteralRowMarker]\n\n # Changes the starting index for row markers.\n row_marker_start_index: Var[int]\n\n # Sets the width of row markers in pixels, if unset row markers will automatically size.\n row_marker_width: Var[int]\n\n # Enable horizontal smooth scrolling.\n smooth_scroll_x: Var[bool]\n\n # Enable vertical smooth scrolling.\n smooth_scroll_y: Var[bool]\n\n # Controls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.\n vertical_border: Var[bool] # TODO: support a mapping (dict[int, bool])\n\n # Allow columns selections. (\"none\", \"single\", \"multi\")\n column_select: Var[Literal[\"none\", \"single\", \"multi\"]]\n\n # Allow range selections. (\"none\", \"cell\", \"rect\", \"multi-cell\", \"multi-rect\").\n range_select: Var[Literal[\"none\", \"cell\", \"rect\", \"multi-cell\", \"multi-rect\"]]\n\n # Allow row selections. (\"none\", \"single\", \"multi\").\n row_select: Var[Literal[\"none\", \"single\", \"multi\"]]\n\n # Prevent diagonal scrolling.\n prevent_diagonal_scrolling: Var[bool]\n\n # Allow to scroll past the limit of the actual content on the horizontal axis.\n overscroll_x: Var[int]\n\n # Allow to scroll past the limit of the actual content on the vertical axis.\n overscroll_y: Var[int]\n\n # Initial scroll offset on the horizontal axis.\n scroll_offset_x: Var[int]\n\n # Initial scroll offset on the vertical axis.\n scroll_offset_y: Var[int]\n\n # Controls which types of range selections can exist at the same time. (\"exclusive\", \"mixed\").\n range_selection_blending: Var[Literal[\"exclusive\", \"mixed\"]]\n\n # Controls which types of column selections can exist at the same time. (\"exclusive\", \"mixed\").\n column_selection_blending: Var[Literal[\"exclusive\", \"mixed\"]]\n\n # Controls which types of row selections can exist at the same time. (\"exclusive\", \"mixed\").\n row_selection_blending: Var[Literal[\"exclusive\", \"mixed\"]]\n\n # Controls row marker selection behavior. \"auto\" adapts to touch/mouse, \"multi\" acts as if Ctrl is pressed. (\"auto\", \"multi\").\n row_selection_mode: Var[Literal[\"auto\", \"multi\"]]\n\n # Controls how spans are handled in selections. (\"default\", \"allowPartial\").\n span_range_behavior: Var[Literal[\"default\", \"allowPartial\"]]\n\n # global theme\n theme: Var[DataEditorTheme | dict]\n\n # Fired when a cell is activated.\n on_cell_activated: EventHandler[passthrough_event_spec(tuple[int, int])]\n\n # Fired when a cell is clicked.\n on_cell_clicked: EventHandler[passthrough_event_spec(tuple[int, int])]\n\n # Fired when a cell is right-clicked.\n on_cell_context_menu: EventHandler[passthrough_event_spec(tuple[int, int])]\n\n # Fired when a cell is edited.\n on_cell_edited: EventHandler[passthrough_event_spec(tuple[int, int], GridCell)]\n\n # Fired when a group header is clicked.\n on_group_header_clicked: EventHandler[\n passthrough_event_spec(tuple[int, int], GridCell)\n ]\n\n # Fired when a group header is right-clicked.\n on_group_header_context_menu: EventHandler[\n passthrough_event_spec(int, GroupHeaderClickedEventArgs)\n ]\n\n # Fired when a group header is renamed.\n on_group_header_renamed: EventHandler[passthrough_event_spec(str, str)]\n\n # Fired when a header is clicked.\n on_header_clicked: EventHandler[passthrough_event_spec(tuple[int, int])]\n\n # Fired when a header is right-clicked.\n on_header_context_menu: EventHandler[passthrough_event_spec(tuple[int, int])]\n\n # Fired when a header menu item is clicked.\n on_header_menu_click: EventHandler[passthrough_event_spec(int, Rectangle)]\n\n # Fired when an item is hovered.\n on_item_hovered: EventHandler[passthrough_event_spec(tuple[int, int])]\n\n # Fired when a selection is deleted.\n on_delete: EventHandler[passthrough_event_spec(GridSelection)]\n\n # Fired when editing is finished.\n on_finished_editing: EventHandler[\n passthrough_event_spec(GridCell | None, tuple[int, int])\n ]\n\n # Fired when a row is appended.\n on_row_appended: EventHandler[no_args_event_spec]\n\n # The current grid selection state (columns, rows, and current cell/range). Must be used when on_grid_selection_change is used otherwise updates will not be reflected in the grid.\n grid_selection: Var[GridSelection]\n\n # Fired when the grid selection changes. Will pass the current selection, the selected columns and the selected rows.\n on_grid_selection_change: EventHandler[passthrough_event_spec(GridSelection)]\n\n # Fired when the selection is cleared.\n on_selection_cleared: EventHandler[no_args_event_spec]\n\n # Fired when a column is resized.\n on_column_resize: EventHandler[passthrough_event_spec(GridColumn, int)]\n\n # Shows search bar.\n show_search: Var[bool]\n\n # Fired when the search close button is clicked.\n on_search_close: EventHandler[no_args_event_spec]\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add imports for the component.\n\n Returns:\n The import dict.\n \"\"\"\n if self.library is None:\n return {}\n return {\n \"\": f\"{format.format_library_name(self.library)}/dist/index.css\",\n self.library: [\"GridCellKind\", \"CompactSelection\"],\n \"$/utils/helpers/dataeditor.js\": ImportVar(\n tag=\"formatDataEditorCells\", is_default=False, install=False\n ),\n }\n\n def add_custom_code(self) -> list[str]:\n \"\"\"Add custom code for reconstructing GridSelection with CompactSelection objects.\n\n Note: When using on_grid_selection_change, Glide Data Grid will not update its internal selection state automatically. Instead,\n the grid_selection prop must be updated with a GridSelection object that has CompactSelection objects for the columns and rows properties.\n This function provides the necessary JavaScript code to reconstruct the GridSelection object from a dict representation.\n\n Returns:\n JavaScript code to reconstruct GridSelection.\n \"\"\"\n return [\n \"\"\"\n function reconstructGridSelection(selection) {\n if (!selection || typeof selection !== 'object') {\n return undefined;\n }\n\n const reconstructCompactSelection = (data) => {\n if (!data || !data.items || !Array.isArray(data.items)) {\n return CompactSelection.empty();\n }\n\n const items = data.items;\n if (items.length === 0) {\n return CompactSelection.empty();\n }\n\n let result = CompactSelection.empty();\n\n // Items are stored as [start, end) ranges in CompactSelection internal format\n for (const item of items) {\n if (Array.isArray(item) && item.length === 2) {\n const [start, end] = item;\n result = result.add([start, end]);\n }\n }\n\n return result;\n };\n\n return {\n current: selection.current || undefined,\n columns: reconstructCompactSelection(selection.columns),\n rows: reconstructCompactSelection(selection.rows)\n };\n }\n \"\"\"\n ]\n\n def add_hooks(self) -> list[str]:\n \"\"\"Get the hooks to render.\n\n Returns:\n The hooks to render.\n \"\"\"\n # Define the id of the component in case multiple are used in the same page.\n editor_id = get_unique_variable_name()\n\n # Define the name of the getData callback associated with this component and assign to get_cell_content.\n if self.get_cell_content is not None:\n data_callback = self.get_cell_content._js_expr\n else:\n data_callback = f\"getData_{editor_id}\"\n self.get_cell_content = Var(_js_expr=data_callback)\n\n code = [f\"function {data_callback}([col, row]){{\"]\n\n columns_path = str(self.columns)\n data_path = str(self.data)\n\n code.extend([\n f\" return formatDataEditorCells(col, row, {columns_path}, {data_path});\",\n \" }\",\n ])\n\n return [\"\\n\".join(code)]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the DataEditor component.\n\n Args:\n *children: The children of the data editor.\n **props: The props of the data editor.\n\n Returns:\n The DataEditor component.&\n\n Raises:\n ValueError: invalid input.\n \"\"\"\n from reflex.components.el import Div\n\n columns = props.get(\"columns\", [])\n data = props.get(\"data\", [])\n rows = props.get(\"rows\")\n\n # If rows is not provided, determine from data.\n if rows is None:\n if isinstance(data, Var) and not isinstance(data, ArrayVar):\n msg = \"DataEditor data must be an ArrayVar if rows is not provided.\"\n raise ValueError(msg)\n\n props[\"rows\"] = data.length() if isinstance(data, ArrayVar) else len(data)\n\n if not isinstance(columns, Var) and len(columns):\n if types.is_dataframe(type(data)) or (\n isinstance(data, Var) and types.is_dataframe(data._var_type)\n ):\n msg = \"Cannot pass in both a pandas dataframe and columns to the data_editor component.\"\n raise ValueError(msg)\n props[\"columns\"] = [\n format.format_data_editor_column(col) for col in columns\n ]\n\n if \"theme\" in props:\n theme = props.get(\"theme\")\n if isinstance(theme, Mapping):\n props[\"theme\"] = DataEditorTheme(**theme)\n\n # Allow by default to select a region of cells in the grid.\n props.setdefault(\"get_cells_for_selection\", True)\n\n # Disable on_paste by default if not provided.\n props.setdefault(\"on_paste\", False)\n\n if props.pop(\"get_cell_content\", None) is not None:\n console.warn(\n \"get_cell_content is not user configurable, the provided value will be discarded\"\n )\n\n # Apply the reconstruction function to grid_selection if it's a Var\n if (grid_selection := props.get(\"grid_selection\")) is not None and isinstance(\n grid_selection, Var\n ):\n props[\"grid_selection\"] = FunctionStringVar.create(\n \"reconstructGridSelection\"\n ).call(grid_selection)\n\n grid = super().create(*children, **props)\n return Div.create(\n grid,\n width=props.pop(\"width\", \"100%\"),\n height=props.pop(\"height\", \"100%\"),\n )\n\n @staticmethod\n def _get_app_wrap_components() -> dict[tuple[int, str], Component]:\n \"\"\"Get the app wrap components for the component.\n\n Returns:\n The app wrap components.\n \"\"\"\n from reflex.components.el import Div\n\n class Portal(Div):\n def get_ref(self):\n return None\n\n return {\n (-1, \"DataEditorPortal\"): Portal.create(\n id=\"portal\",\n position=\"fixed\",\n top=0,\n )\n }\n\n\n@serializer\ndef serialize_dataeditortheme(theme: DataEditorTheme):\n \"\"\"The serializer for the data editor theme.\n\n Args:\n theme: The theme to serialize.\n\n Returns:\n The serialized theme.\n \"\"\"\n return {\n format.to_camel_case(k): v for k, v in theme.__dict__.items() if v is not None\n }\n\n\ndata_editor = DataEditor.create\ndata_editor_theme = DataEditorTheme\n" }, { "path": "reflex/components/datadisplay/logo.py", "content": "\"\"\"A Reflex logo component.\"\"\"\n\nimport reflex as rx\n\nSVG_COLOR = rx.color_mode_cond(\"#110F1F\", \"white\")\n\n\ndef svg_logo(color: str | rx.Var[str] = SVG_COLOR, **props):\n \"\"\"A Reflex logo SVG.\n\n Args:\n color: The color of the logo.\n props: Extra props to pass to the svg component.\n\n Returns:\n The Reflex logo SVG.\n \"\"\"\n\n def logo_path(d: str):\n return rx.el.path(d=d)\n\n paths = [\n \"M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z\",\n \"M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z\",\n \"M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z\",\n \"M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z\",\n \"M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z\",\n \"M47.04 4.8799V0.399902H49.28V4.8799H47.04ZM53.76 4.8799V0.399902H56V4.8799H53.76ZM49.28 7.1199V4.8799H53.76V7.1199H49.28ZM47.04 11.5999V7.1199H49.28V11.5999H47.04ZM53.76 11.5999V7.1199H56V11.5999H53.76Z\",\n ]\n\n return rx.el.svg(\n *[logo_path(d) for d in paths],\n rx.el.title(\"Reflex\"),\n aria_label=\"Reflex\",\n role=\"img\",\n width=props.pop(\"width\", \"56\"),\n height=props.pop(\"height\", \"12\"),\n fill=color,\n xmlns=\"http://www.w3.org/2000/svg\",\n **props,\n )\n\n\ndef logo(**props):\n \"\"\"A Reflex logo.\n\n Args:\n **props: The props to pass to the component.\n\n Returns:\n The logo component.\n \"\"\"\n return rx.center(\n rx.link(\n rx.hstack(\n \"Built with \",\n svg_logo(),\n text_align=\"center\",\n align=\"center\",\n padding=\"1em\",\n ),\n href=\"https://reflex.dev\",\n size=\"3\",\n ),\n width=props.pop(\"width\", \"100%\"),\n **props,\n )\n" }, { "path": "reflex/components/datadisplay/shiki_code_block.py", "content": "\"\"\"Shiki syntax hghlighter component.\"\"\"\n\nfrom __future__ import annotations\n\nimport dataclasses\nimport re\nfrom collections import defaultdict\nfrom dataclasses import dataclass\nfrom typing import Any, Literal\n\nfrom reflex.components.component import Component, ComponentNamespace, field\nfrom reflex.components.core.colors import color\nfrom reflex.components.core.cond import color_mode_cond\nfrom reflex.components.el.elements.forms import Button\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.props import NoExtrasAllowedProps\nfrom reflex.components.radix.themes.layout.box import Box\nfrom reflex.event import run_script, set_clipboard\nfrom reflex.style import Style\nfrom reflex.utils.exceptions import VarTypeError\nfrom reflex.utils.imports import ImportVar\nfrom reflex.vars.base import LiteralVar, Var\nfrom reflex.vars.function import FunctionStringVar\nfrom reflex.vars.sequence import StringVar, string_replace_operation\n\n\ndef copy_script() -> Any:\n \"\"\"Copy script for the code block and modify the child SVG element.\n\n Returns:\n Any: The result of calling the script.\n \"\"\"\n return run_script(\n \"\"\"\n// Event listener for the parent click\ndocument.addEventListener('click', function(event) {\n // Find the closest button (parent element)\n const parent = event.target.closest('button');\n // If the parent is found\n if (parent) {\n // Find the SVG element within the parent\n const svgIcon = parent.querySelector('svg');\n // If the SVG exists, proceed with the script\n if (svgIcon) {\n const originalPath = svgIcon.innerHTML;\n const checkmarkPath = ''; // Checkmark SVG path\n function transition(element, scale, opacity) {\n element.style.transform = `scale(${scale})`;\n element.style.opacity = opacity;\n }\n // Animate the SVG\n transition(svgIcon, 0, '0');\n setTimeout(() => {\n svgIcon.innerHTML = checkmarkPath; // Replace content with checkmark\n svgIcon.setAttribute('viewBox', '0 0 24 24'); // Adjust viewBox if necessary\n transition(svgIcon, 1, '1');\n setTimeout(() => {\n transition(svgIcon, 0, '0');\n setTimeout(() => {\n svgIcon.innerHTML = originalPath; // Restore original SVG content\n transition(svgIcon, 1, '1');\n }, 125);\n }, 600);\n }, 125);\n } else {\n // console.error('SVG element not found within the parent.');\n }\n } else {\n // console.error('Parent element not found.');\n }\n})\n\"\"\"\n )\n\n\nSHIKIJS_TRANSFORMER_FNS = {\n \"transformerNotationDiff\",\n \"transformerNotationHighlight\",\n \"transformerNotationWordHighlight\",\n \"transformerNotationFocus\",\n \"transformerNotationErrorLevel\",\n \"transformerRenderWhitespace\",\n \"transformerMetaHighlight\",\n \"transformerMetaWordHighlight\",\n \"transformerCompactLineOptions\",\n # TODO: this transformer when included adds a weird behavior which removes other code lines. Need to figure out why.\n # \"transformerRemoveLineBreak\",\n \"transformerRemoveNotationEscape\",\n}\nLINE_NUMBER_STYLING = {\n \"code\": {\n \"counter-reset\": \"step\",\n \"counter-increment\": \"step 0\",\n \"display\": \"grid\",\n \"line-height\": \"1.7\",\n \"font-size\": \"0.875em\",\n },\n \"code .line::before\": {\n \"content\": \"counter(step)\",\n \"counter-increment\": \"step\",\n \"width\": \"1rem\",\n \"margin-right\": \"1.5rem\",\n \"display\": \"inline-block\",\n \"text-align\": \"right\",\n \"color\": \"rgba(115,138,148,.4)\",\n },\n}\nBOX_PARENT_STYLING = {\n \"pre\": {\n \"margin\": \"0\",\n \"padding\": \"24px\",\n \"background\": \"transparent\",\n \"overflow-x\": \"auto\",\n \"border-radius\": \"6px\",\n },\n}\n\nTHEME_MAPPING = {\n \"light\": \"one-light\",\n \"dark\": \"one-dark-pro\",\n \"a11y-dark\": \"github-dark\",\n}\nLANGUAGE_MAPPING = {\"bash\": \"shellscript\"}\nLiteralCodeLanguage = Literal[\n \"abap\",\n \"actionscript-3\",\n \"ada\",\n \"angular-html\",\n \"angular-ts\",\n \"apache\",\n \"apex\",\n \"apl\",\n \"applescript\",\n \"ara\",\n \"asciidoc\",\n \"asm\",\n \"astro\",\n \"awk\",\n \"ballerina\",\n \"bat\",\n \"beancount\",\n \"berry\",\n \"bibtex\",\n \"bicep\",\n \"blade\",\n \"c\",\n \"cadence\",\n \"clarity\",\n \"clojure\",\n \"cmake\",\n \"cobol\",\n \"codeowners\",\n \"codeql\",\n \"coffee\",\n \"common-lisp\",\n \"coq\",\n \"cpp\",\n \"crystal\",\n \"csharp\",\n \"css\",\n \"csv\",\n \"cue\",\n \"cypher\",\n \"d\",\n \"dart\",\n \"dax\",\n \"desktop\",\n \"diff\",\n \"docker\",\n \"dotenv\",\n \"dream-maker\",\n \"edge\",\n \"elixir\",\n \"elm\",\n \"emacs-lisp\",\n \"erb\",\n \"erlang\",\n \"fennel\",\n \"fish\",\n \"fluent\",\n \"fortran-fixed-form\",\n \"fortran-free-form\",\n \"fsharp\",\n \"gdresource\",\n \"gdscript\",\n \"gdshader\",\n \"genie\",\n \"gherkin\",\n \"git-commit\",\n \"git-rebase\",\n \"gleam\",\n \"glimmer-js\",\n \"glimmer-ts\",\n \"glsl\",\n \"gnuplot\",\n \"go\",\n \"graphql\",\n \"groovy\",\n \"hack\",\n \"haml\",\n \"handlebars\",\n \"haskell\",\n \"haxe\",\n \"hcl\",\n \"hjson\",\n \"hlsl\",\n \"html\",\n \"html-derivative\",\n \"http\",\n \"hxml\",\n \"hy\",\n \"imba\",\n \"ini\",\n \"java\",\n \"javascript\",\n \"jinja\",\n \"jison\",\n \"json\",\n \"json5\",\n \"jsonc\",\n \"jsonl\",\n \"jsonnet\",\n \"jssm\",\n \"jsx\",\n \"julia\",\n \"kotlin\",\n \"kusto\",\n \"latex\",\n \"lean\",\n \"less\",\n \"liquid\",\n \"log\",\n \"logo\",\n \"lua\",\n \"luau\",\n \"make\",\n \"markdown\",\n \"marko\",\n \"matlab\",\n \"mdc\",\n \"mdx\",\n \"mermaid\",\n \"mojo\",\n \"move\",\n \"narrat\",\n \"nextflow\",\n \"nginx\",\n \"nim\",\n \"nix\",\n \"nushell\",\n \"objective-c\",\n \"objective-cpp\",\n \"ocaml\",\n \"pascal\",\n \"perl\",\n \"php\",\n \"plain\",\n \"plsql\",\n \"po\",\n \"postcss\",\n \"powerquery\",\n \"powershell\",\n \"prisma\",\n \"prolog\",\n \"proto\",\n \"pug\",\n \"puppet\",\n \"purescript\",\n \"python\",\n \"qml\",\n \"qmldir\",\n \"qss\",\n \"r\",\n \"racket\",\n \"raku\",\n \"razor\",\n \"reg\",\n \"regexp\",\n \"rel\",\n \"riscv\",\n \"rst\",\n \"ruby\",\n \"rust\",\n \"sas\",\n \"sass\",\n \"scala\",\n \"scheme\",\n \"scss\",\n \"shaderlab\",\n \"shellscript\",\n \"shellsession\",\n \"smalltalk\",\n \"solidity\",\n \"soy\",\n \"sparql\",\n \"splunk\",\n \"sql\",\n \"ssh-config\",\n \"stata\",\n \"stylus\",\n \"svelte\",\n \"swift\",\n \"system-verilog\",\n \"systemd\",\n \"tasl\",\n \"tcl\",\n \"templ\",\n \"terraform\",\n \"tex\",\n \"toml\",\n \"ts-tags\",\n \"tsv\",\n \"tsx\",\n \"turtle\",\n \"twig\",\n \"typescript\",\n \"typespec\",\n \"typst\",\n \"v\",\n \"vala\",\n \"vb\",\n \"verilog\",\n \"vhdl\",\n \"viml\",\n \"vue\",\n \"vue-html\",\n \"vyper\",\n \"wasm\",\n \"wenyan\",\n \"wgsl\",\n \"wikitext\",\n \"wolfram\",\n \"xml\",\n \"xsl\",\n \"yaml\",\n \"zenscript\",\n \"zig\",\n]\nLiteralCodeTheme = Literal[\n \"andromeeda\",\n \"aurora-x\",\n \"ayu-dark\",\n \"catppuccin-frappe\",\n \"catppuccin-latte\",\n \"catppuccin-macchiato\",\n \"catppuccin-mocha\",\n \"dark-plus\",\n \"dracula\",\n \"dracula-soft\",\n \"everforest-dark\",\n \"everforest-light\",\n \"github-dark\",\n \"github-dark-default\",\n \"github-dark-dimmed\",\n \"github-dark-high-contrast\",\n \"github-light\",\n \"github-light-default\",\n \"github-light-high-contrast\",\n \"houston\",\n \"laserwave\",\n \"light-plus\",\n \"material-theme\",\n \"material-theme-darker\",\n \"material-theme-lighter\",\n \"material-theme-ocean\",\n \"material-theme-palenight\",\n \"min-dark\",\n \"min-light\",\n \"monokai\",\n \"night-owl\",\n \"nord\",\n \"one-dark-pro\",\n \"one-light\",\n \"plastic\",\n \"poimandres\",\n \"red\",\n # rose-pine themes dont work with the current version of shikijs transformers\n # https://github.com/shikijs/shiki/issues/730\n \"rose-pine\",\n \"rose-pine-dawn\",\n \"rose-pine-moon\",\n \"slack-dark\",\n \"slack-ochin\",\n \"snazzy-light\",\n \"solarized-dark\",\n \"solarized-light\",\n \"synthwave-84\",\n \"tokyo-night\",\n \"vesper\",\n \"vitesse-black\",\n \"vitesse-dark\",\n \"vitesse-light\",\n]\n\n\nclass Position(NoExtrasAllowedProps):\n \"\"\"Position of the decoration.\"\"\"\n\n line: int\n character: int\n\n\nclass ShikiDecorations(NoExtrasAllowedProps):\n \"\"\"Decorations for the code block.\"\"\"\n\n start: int | Position\n end: int | Position\n tag_name: str = \"span\"\n properties: dict[str, Any] = {}\n always_wrap: bool = False\n\n\n@dataclass(kw_only=True)\nclass ShikiBaseTransformers:\n \"\"\"Base for creating transformers.\"\"\"\n\n library: str = \"\"\n fns: list[FunctionStringVar] = dataclasses.field(default_factory=list)\n style: Style | None = dataclasses.field(default=None)\n\n\n@dataclass(kw_only=True)\nclass ShikiJsTransformer(ShikiBaseTransformers):\n \"\"\"A Wrapped shikijs transformer.\"\"\"\n\n library: str = \"@shikijs/transformers@3.3.0\"\n fns: list[FunctionStringVar] = dataclasses.field(\n default_factory=lambda: [\n FunctionStringVar.create(fn) for fn in SHIKIJS_TRANSFORMER_FNS\n ]\n )\n style: Style | None = dataclasses.field(\n default_factory=lambda: Style({\n \"code\": {\n \"line-height\": \"1.7\",\n \"font-size\": \"0.875em\",\n \"display\": \"grid\",\n },\n # Diffs\n \".diff\": {\n \"margin\": \"0 -24px\",\n \"padding\": \"0 24px\",\n \"width\": \"calc(100% + 48px)\",\n \"display\": \"inline-block\",\n },\n \".diff.add\": {\n \"background-color\": \"rgba(16, 185, 129, .14)\",\n \"position\": \"relative\",\n },\n \".diff.remove\": {\n \"background-color\": \"rgba(244, 63, 94, .14)\",\n \"opacity\": \"0.7\",\n \"position\": \"relative\",\n },\n \".diff.remove:after\": {\n \"position\": \"absolute\",\n \"left\": \"10px\",\n \"content\": \"'-'\",\n \"color\": \"#b34e52\",\n },\n \".diff.add:after\": {\n \"position\": \"absolute\",\n \"left\": \"10px\",\n \"content\": \"'+'\",\n \"color\": \"#18794e\",\n },\n # Highlight\n \".highlighted\": {\n \"background-color\": \"rgba(142, 150, 170, .14)\",\n \"margin\": \"0 -24px\",\n \"padding\": \"0 24px\",\n \"width\": \"calc(100% + 48px)\",\n \"display\": \"inline-block\",\n },\n \".highlighted.error\": {\n \"background-color\": \"rgba(244, 63, 94, .14)\",\n },\n \".highlighted.warning\": {\n \"background-color\": \"rgba(234, 179, 8, .14)\",\n },\n # Highlighted Word\n \".highlighted-word\": {\n \"background-color\": color(\"gray\", 2),\n \"border\": f\"1px solid {color('gray', 5)}\",\n \"padding\": \"1px 3px\",\n \"margin\": \"-1px -3px\",\n \"border-radius\": \"4px\",\n },\n # Focused Lines\n \".has-focused .line:not(.focused)\": {\n \"opacity\": \"0.7\",\n \"filter\": \"blur(0.095rem)\",\n \"transition\": \"filter .35s, opacity .35s\",\n },\n \".has-focused:hover .line:not(.focused)\": {\n \"opacity\": \"1\",\n \"filter\": \"none\",\n },\n # White Space\n # \".tab, .space\": {\n # \"position\": \"relative\", # noqa: ERA001\n # },\n # \".tab::before\": {\n # \"content\": \"'⇥'\", # noqa: ERA001\n # \"position\": \"absolute\", # noqa: ERA001\n # \"opacity\": \"0.3\",# noqa: ERA001\n # },\n # \".space::before\": {\n # \"content\": \"'·'\", # noqa: ERA001\n # \"position\": \"absolute\", # noqa: ERA001\n # \"opacity\": \"0.3\", # noqa: ERA001\n # },\n })\n )\n\n def __init__(self, **kwargs):\n \"\"\"Initialize the transformer.\n\n Args:\n kwargs: Kwargs to initialize the props.\n\n \"\"\"\n fns = kwargs.pop(\"fns\", None)\n style = kwargs.pop(\"style\", None)\n if fns:\n kwargs[\"fns\"] = [\n (\n FunctionStringVar.create(x)\n if not isinstance(x, FunctionStringVar)\n else x\n )\n for x in fns\n ]\n\n if style:\n kwargs[\"style\"] = Style(style)\n super().__init__(**kwargs)\n\n\nclass ShikiCodeBlock(Component, MarkdownComponentMap):\n \"\"\"A Code block.\"\"\"\n\n library = \"/components/shiki/code\"\n\n tag = \"Code\"\n\n alias = \"ShikiCode\"\n\n lib_dependencies: list[str] = [\"shiki@3.3.0\"]\n\n # The language to use.\n language: Var[LiteralCodeLanguage] = Var.create(\"python\")\n\n # The theme to use (\"light\" or \"dark\").\n theme: Var[LiteralCodeTheme] = Var.create(\"one-light\")\n\n # The set of themes to use for different modes.\n themes: Var[list[dict[str, Any]] | dict[str, str]]\n\n # The code to display.\n code: Var[str]\n\n # The transformers to use for the syntax highlighter.\n transformers: Var[list[ShikiBaseTransformers | dict[str, Any]]] = Var.create([])\n\n # The decorations to use for the syntax highlighter.\n decorations: Var[list[ShikiDecorations]] = Var.create([])\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/).\n\n Args:\n *children: The children of the component.\n **props: The props to pass to the component.\n\n Returns:\n The code block component.\n \"\"\"\n # Separate props for the code block and the wrapper\n code_block_props = {}\n code_wrapper_props = {}\n decorations = props.pop(\"decorations\", [])\n\n class_props = cls.get_props()\n\n # Distribute props between the code block and wrapper\n for key, value in props.items():\n (code_block_props if key in class_props else code_wrapper_props)[key] = (\n value\n )\n\n # cast decorations into ShikiDecorations.\n decorations = [\n ShikiDecorations(**decoration)\n if not isinstance(decoration, ShikiDecorations)\n else decoration\n for decoration in decorations\n ]\n code_block_props[\"decorations\"] = decorations\n\n code_block_props[\"code\"] = children[0]\n code_block = super().create(**code_block_props)\n\n transformer_styles = {}\n # Collect styles from transformers and wrapper\n for transformer in code_block.transformers._var_value: # pyright: ignore [reportAttributeAccessIssue]\n if isinstance(transformer, ShikiBaseTransformers) and transformer.style:\n transformer_styles.update(transformer.style)\n transformer_styles.update(code_wrapper_props.pop(\"style\", {}))\n\n return Box.create(\n code_block,\n *children[1:],\n style=Style({**transformer_styles, **BOX_PARENT_STYLING}),\n **code_wrapper_props,\n )\n\n def add_imports(self) -> dict[str, list[str]]:\n \"\"\"Add the necessary imports.\n We add all referenced transformer functions as imports from their corresponding\n libraries.\n\n Returns:\n Imports for the component.\n\n Raises:\n ValueError: If the transformers are not of type LiteralVar.\n \"\"\"\n imports = defaultdict(list)\n if not isinstance(self.transformers, LiteralVar):\n msg = f\"transformers should be a LiteralVar type. Got {type(self.transformers)} instead.\"\n raise ValueError(msg)\n for transformer in self.transformers._var_value:\n if isinstance(transformer, ShikiBaseTransformers):\n imports[transformer.library].extend([\n ImportVar(tag=str(fn)) for fn in transformer.fns\n ])\n if transformer.library not in self.lib_dependencies:\n self.lib_dependencies.append(transformer.library)\n return imports\n\n @classmethod\n def create_transformer(cls, library: str, fns: list[str]) -> ShikiBaseTransformers:\n \"\"\"Create a transformer from a third party library.\n\n Args:\n library: The name of the library.\n fns: The str names of the functions/callables to invoke from the library.\n\n Returns:\n A transformer for the specified library.\n\n Raises:\n ValueError: If a supplied function name is not valid str.\n \"\"\"\n if any(not isinstance(fn_name, str) for fn_name in fns):\n msg = f\"the function names should be str names of functions in the specified transformer: {library!r}\"\n raise ValueError(msg)\n return ShikiBaseTransformers(\n library=library,\n fns=[FunctionStringVar.create(fn) for fn in fns], # pyright: ignore [reportCallIssue]\n )\n\n def _render(self, props: dict[str, Any] | None = None):\n \"\"\"Renders the component with the given properties, processing transformers if present.\n\n Args:\n props: Optional properties to pass to the render function.\n\n Returns:\n Rendered component output.\n \"\"\"\n # Ensure props is initialized from class attributes if not provided\n props = props or {\n attr.rstrip(\"_\"): getattr(self, attr) for attr in self.get_props()\n }\n\n # Extract transformers and apply transformations\n transformers = props.get(\"transformers\")\n if transformers is not None:\n transformed_values = self._process_transformers(transformers._var_value)\n props[\"transformers\"] = LiteralVar.create(transformed_values)\n\n return super()._render(props)\n\n def _process_transformers(self, transformer_list: list) -> list:\n \"\"\"Processes a list of transformers, applying transformations where necessary.\n\n Args:\n transformer_list: List of transformer objects or values.\n\n Returns:\n list: A list of transformed values.\n \"\"\"\n processed = []\n\n for transformer in transformer_list:\n if isinstance(transformer, ShikiBaseTransformers):\n processed.extend(fn.call() for fn in transformer.fns)\n else:\n processed.append(transformer)\n\n return processed\n\n\nclass ShikiHighLevelCodeBlock(ShikiCodeBlock):\n \"\"\"High level component for the shiki syntax highlighter.\"\"\"\n\n # If this is enabled, the default transformers(shikijs transformer) will be used.\n use_transformers: Var[bool]\n\n # If this is enabled line numbers will be shown next to the code block.\n show_line_numbers: Var[bool]\n\n # Whether a copy button should appear.\n can_copy: bool = field(default=False, is_javascript_property=False)\n\n # copy_button: A custom copy button to override the default one.\n copy_button: Component | bool | None = field(\n default=None, is_javascript_property=False\n )\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create a code block component using [shiki syntax highlighter](https://shiki.matsu.io/).\n\n Args:\n *children: The children of the component.\n **props: The props to pass to the component.\n\n Returns:\n The code block component.\n \"\"\"\n use_transformers = props.pop(\"use_transformers\", False)\n show_line_numbers = props.pop(\"show_line_numbers\", False)\n language = props.pop(\"language\", None)\n can_copy = props.pop(\"can_copy\", False)\n copy_button = props.pop(\"copy_button\", None)\n\n if use_transformers:\n props[\"transformers\"] = [ShikiJsTransformer()]\n\n if language is not None:\n props[\"language\"] = cls._map_languages(language)\n\n # line numbers are generated via css\n if show_line_numbers:\n props[\"style\"] = {**LINE_NUMBER_STYLING, **props.get(\"style\", {})}\n\n theme = props.pop(\"theme\", None)\n props[\"theme\"] = props[\"theme\"] = (\n cls._map_themes(theme)\n if theme is not None\n else color_mode_cond( # Default color scheme responds to global color mode.\n light=\"one-light\",\n dark=\"one-dark-pro\",\n )\n )\n\n if can_copy:\n code = children[0]\n copy_button = (\n copy_button\n if copy_button is not None\n else Button.create(\n Icon.create(tag=\"copy\", size=16, color=color(\"gray\", 11)),\n on_click=[\n set_clipboard(cls._strip_transformer_triggers(code)),\n copy_script(),\n ],\n style=Style({\n \"position\": \"absolute\",\n \"top\": \"4px\",\n \"right\": \"4px\",\n \"background\": color(\"gray\", 3),\n \"border\": \"1px solid\",\n \"border-color\": color(\"gray\", 5),\n \"border-radius\": \"6px\",\n \"padding\": \"5px\",\n \"opacity\": \"1\",\n \"cursor\": \"pointer\",\n \"_hover\": {\n \"background\": color(\"gray\", 4),\n },\n \"transition\": \"background 0.250s ease-out\",\n \"&>svg\": {\n \"transition\": \"transform 0.250s ease-out, opacity 0.250s ease-out\",\n },\n \"_active\": {\n \"background\": color(\"gray\", 5),\n },\n }),\n )\n )\n\n if copy_button:\n return ShikiCodeBlock.create(\n children[0], copy_button, position=\"relative\", **props\n )\n return ShikiCodeBlock.create(children[0], **props)\n\n @staticmethod\n def _map_themes(theme: str) -> str:\n if isinstance(theme, str) and theme in THEME_MAPPING:\n return THEME_MAPPING[theme]\n return theme\n\n @staticmethod\n def _map_languages(language: str) -> str:\n if isinstance(language, str) and language in LANGUAGE_MAPPING:\n return LANGUAGE_MAPPING[language]\n return language\n\n @staticmethod\n def _strip_transformer_triggers(code: str | StringVar) -> StringVar | str:\n if not isinstance(code, (StringVar, str)):\n msg = f\"code should be string literal or a StringVar type. Got {type(code)} instead.\"\n raise VarTypeError(msg)\n regex_pattern = r\"[\\/#]+ *\\[!code.*?\\]\"\n\n if isinstance(code, Var):\n return string_replace_operation(\n code, StringVar(_js_expr=f\"/{regex_pattern}/g\", _var_type=str), \"\"\n )\n if isinstance(code, str):\n return re.sub(regex_pattern, \"\", code)\n return None\n\n\nclass TransformerNamespace(ComponentNamespace):\n \"\"\"Namespace for the Transformers.\"\"\"\n\n shikijs = ShikiJsTransformer\n\n\nclass CodeblockNamespace(ComponentNamespace):\n \"\"\"Namespace for the CodeBlock component.\"\"\"\n\n root = staticmethod(ShikiCodeBlock.create)\n create_transformer = staticmethod(ShikiCodeBlock.create_transformer)\n transformers = TransformerNamespace()\n __call__ = staticmethod(ShikiHighLevelCodeBlock.create)\n\n\ncode_block = CodeblockNamespace()\n" }, { "path": "reflex/components/dynamic.py", "content": "\"\"\"Components that are dynamically generated on the backend.\"\"\"\n\nfrom typing import TYPE_CHECKING, Union\n\nfrom reflex import constants\nfrom reflex.utils import imports\nfrom reflex.utils.exceptions import DynamicComponentMissingLibraryError\nfrom reflex.utils.format import format_library_name\nfrom reflex.utils.serializers import serializer\nfrom reflex.vars import Var, get_unique_variable_name\nfrom reflex.vars.base import VarData, transform\n\nif TYPE_CHECKING:\n from reflex.components.component import Component\n\n\ndef get_cdn_url(lib: str) -> str:\n \"\"\"Get the CDN URL for a library.\n\n Args:\n lib: The library to get the CDN URL for.\n\n Returns:\n The CDN URL for the library.\n \"\"\"\n return f\"https://cdn.jsdelivr.net/npm/{lib}\" + \"/+esm\"\n\n\nbundled_libraries = [\n \"react\",\n \"@radix-ui/themes\",\n \"@emotion/react\",\n f\"$/{constants.Dirs.UTILS}/context\",\n f\"$/{constants.Dirs.UTILS}/state\",\n f\"$/{constants.Dirs.UTILS}/components\",\n]\n\n\ndef bundle_library(component: Union[\"Component\", str]):\n \"\"\"Bundle a library with the component.\n\n Args:\n component: The component to bundle the library with.\n\n Raises:\n DynamicComponentMissingLibraryError: Raised when a dynamic component is missing a library.\n \"\"\"\n if isinstance(component, str):\n bundled_libraries.append(component)\n return\n if component.library is None:\n msg = \"Component must have a library to bundle.\"\n raise DynamicComponentMissingLibraryError(msg)\n bundled_libraries.append(format_library_name(component.library))\n\n\ndef load_dynamic_serializer():\n \"\"\"Load the serializer for dynamic components.\"\"\"\n # Causes a circular import, so we import here.\n from reflex.components.component import Component\n\n @serializer\n def make_component(component: Component) -> str:\n \"\"\"Generate the code for a dynamic component.\n\n Args:\n component: The component to generate code for.\n\n Returns:\n The generated code\n \"\"\"\n # Causes a circular import, so we import here.\n from reflex.compiler import compiler, templates, utils\n from reflex.components.base.bare import Bare\n\n component = Bare.create(Var.create(component))\n\n rendered_components = {}\n # Include dynamic imports in the shared component.\n if dynamic_imports := component._get_all_dynamic_imports():\n rendered_components.update(dict.fromkeys(dynamic_imports))\n\n # Include custom code in the shared component.\n rendered_components.update(component._get_all_custom_code())\n\n rendered_components[\n templates.stateful_component_template(\n tag_name=\"MySSRComponent\",\n memo_trigger_hooks=[],\n component=component,\n export=True,\n )\n ] = None\n\n libs_in_window = bundled_libraries\n\n component_imports = component._get_all_imports()\n compiler._apply_common_imports(component_imports)\n\n imports = {}\n for lib, names in component_imports.items():\n formatted_lib_name = format_library_name(lib)\n if (\n not lib.startswith((\".\", \"/\", \"$/\"))\n and not lib.startswith(\"http\")\n and formatted_lib_name not in libs_in_window\n ):\n imports[get_cdn_url(lib)] = names\n else:\n imports[lib] = names\n\n module_code_lines = templates.stateful_components_template(\n imports=utils.compile_imports(imports),\n memoized_code=\"\\n\".join(rendered_components),\n ).splitlines()\n\n # Rewrite imports from `/` to destructure from window\n for ix, line in enumerate(module_code_lines[:]):\n if line.startswith(\"import \"):\n if 'from \"$/' in line or 'from \"/' in line:\n module_code_lines[ix] = (\n line\n .replace(\"import \", \"const \", 1)\n .replace(\" as \", \": \")\n .replace(\" from \", \" = window['__reflex'][\", 1)\n + \"]\"\n )\n else:\n for lib in libs_in_window:\n if f'from \"{lib}\"' in line:\n module_code_lines[ix] = (\n line\n .replace(\"import \", \"const \", 1)\n .replace(\n f' from \"{lib}\"', f\" = window.__reflex['{lib}']\", 1\n )\n .replace(\" as \", \": \")\n )\n if line.startswith(\"export function\"):\n module_code_lines[ix] = line.replace(\n \"export function\", \"export default function\", 1\n )\n line_stripped = line.strip()\n if line_stripped.startswith(\"{\") and line_stripped.endswith(\"}\"):\n module_code_lines[ix] = line_stripped[1:-1]\n\n module_code_lines.insert(0, \"const React = window.__reflex.react;\")\n\n function_line = next(\n index\n for index, line in enumerate(module_code_lines)\n if line.startswith(\"export default function\")\n )\n\n module_code_lines = [\n line\n for _, line in sorted(\n enumerate(module_code_lines),\n key=lambda x: (\n not (x[1].startswith(\"import \") and x[0] < function_line),\n x[0],\n ),\n )\n ]\n\n return \"\\n\".join([\n \"//__reflex_evaluate\",\n *module_code_lines,\n ])\n\n @transform\n def evaluate_component(js_string: Var[str]) -> Var[Component]:\n \"\"\"Evaluate a component.\n\n Args:\n js_string: The JavaScript string to evaluate.\n\n Returns:\n The evaluated JavaScript string.\n \"\"\"\n unique_var_name = get_unique_variable_name()\n\n return js_string._replace(\n _js_expr=unique_var_name,\n _var_type=Component,\n merge_var_data=VarData.merge(\n VarData(\n imports={\n f\"$/{constants.Dirs.STATE_PATH}\": [\n imports.ImportVar(tag=\"evalReactComponent\"),\n ],\n \"react\": [\n imports.ImportVar(tag=\"useState\"),\n imports.ImportVar(tag=\"useEffect\"),\n ],\n },\n hooks={\n f\"const [{unique_var_name}, set_{unique_var_name}] = useState(null);\": None,\n \"useEffect(() => {\"\n \"let isMounted = true;\"\n f\"evalReactComponent({js_string!s})\"\n \".then((component) => {\"\n \"if (isMounted) {\"\n f\"set_{unique_var_name}(component);\"\n \"}\"\n \"});\"\n \"return () => {\"\n \"isMounted = false;\"\n \"};\"\n \"}\"\n f\", [{js_string!s}]);\": None,\n },\n ),\n ),\n )\n" }, { "path": "reflex/components/el/__init__.py", "content": "\"\"\"The el package exports raw HTML elements.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\nfrom . import elements\n\n_SUBMODULES: set[str] = {\"elements\"}\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n # rx.el.a is replaced by React Router's Link.\n f\"elements.{k}\": [attr for attr in attrs if attr != \"a\"]\n for k, attrs in elements._MAPPING.items()\n}\n_EXTRA_MAPPINGS: dict[str, str] = {\n \"a\": \"reflex.components.react_router.link\",\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n **_EXTRA_MAPPINGS,\n)\n" }, { "path": "reflex/components/el/element.py", "content": "\"\"\"Base class definition for raw HTML elements.\"\"\"\n\nfrom typing import ClassVar\n\nfrom reflex.components.component import Component\n\n\nclass Element(Component):\n \"\"\"The base class for all raw HTML elements.\"\"\"\n\n _is_tag_in_global_scope: ClassVar[bool] = True\n\n def __eq__(self, other: object):\n \"\"\"Two elements are equal if they have the same tag.\n\n Args:\n other: The other element.\n\n Returns:\n True if the elements have the same tag, False otherwise.\n \"\"\"\n return isinstance(other, Element) and self.tag == other.tag\n" }, { "path": "reflex/components/el/elements/__init__.py", "content": "\"\"\"Element classes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_MAPPING = {\n \"forms\": [\n \"button\",\n \"datalist\",\n \"fieldset\",\n \"form\",\n \"input\",\n \"label\",\n \"legend\",\n \"meter\",\n \"optgroup\",\n \"option\",\n \"output\",\n \"progress\",\n \"select\",\n \"textarea\",\n ],\n \"inline\": [\n \"a\",\n \"abbr\",\n \"b\",\n \"bdi\",\n \"bdo\",\n \"br\",\n \"cite\",\n \"code\",\n \"data\",\n \"dfn\",\n \"em\",\n \"i\",\n \"kbd\",\n \"mark\",\n \"q\",\n \"rp\",\n \"rt\",\n \"ruby\",\n \"s\",\n \"samp\",\n \"small\",\n \"span\",\n \"strong\",\n \"sub\",\n \"sup\",\n \"time\",\n \"u\",\n \"wbr\",\n ],\n \"media\": [\n \"area\",\n \"audio\",\n \"img\",\n \"image\",\n \"map\",\n \"track\",\n \"video\",\n \"embed\",\n \"iframe\",\n \"object\",\n \"picture\",\n \"portal\",\n \"source\",\n \"svg\",\n \"text\",\n \"line\",\n \"circle\",\n \"g\",\n \"ellipse\",\n \"rect\",\n \"polygon\",\n \"path\",\n \"stop\",\n \"linear_gradient\",\n \"radial_gradient\",\n \"defs\",\n \"marker\",\n ],\n \"metadata\": [\n \"base\",\n \"head\",\n \"link\",\n \"meta\",\n \"title\",\n \"style\",\n ],\n \"other\": [\"details\", \"dialog\", \"summary\", \"slot\", \"template\", \"math\", \"html\"],\n \"scripts\": [\"canvas\", \"noscript\", \"script\"],\n \"sectioning\": [\n \"address\",\n \"article\",\n \"aside\",\n \"body\",\n \"header\",\n \"footer\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"h4\",\n \"h5\",\n \"h6\",\n \"main\",\n \"nav\",\n \"section\",\n ],\n \"tables\": [\n \"caption\",\n \"col\",\n \"colgroup\",\n \"table\",\n \"td\",\n \"tfoot\",\n \"th\",\n \"thead\",\n \"tr\",\n \"tbody\",\n ],\n \"typography\": [\n \"blockquote\",\n \"dd\",\n \"div\",\n \"dl\",\n \"dt\",\n \"figcaption\",\n \"figure\",\n \"hr\",\n \"ol\",\n \"li\",\n \"p\",\n \"pre\",\n \"ul\",\n \"ins\",\n \"del_\",\n \"Del\",\n ],\n}\n\n\nEXCLUDE = [\"del_\", \"Del\", \"image\", \"style\"]\nfor v in _MAPPING.values():\n from reflex.utils.format import to_camel_case\n\n v.extend([\n to_camel_case(mod)[0].upper() + to_camel_case(mod)[1:]\n for mod in v\n if mod not in EXCLUDE\n ])\n\n_MAPPING[\"metadata\"].extend([\"StyleEl\"])\n\n_SUBMOD_ATTRS: dict[str, list[str]] = _MAPPING\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/el/elements/base.py", "content": "\"\"\"Base classes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.el.element import Element\nfrom reflex.vars.base import Var\n\nAutoCapitalize = Literal[\"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"]\nContentEditable = Literal[\"inherit\", \"plaintext-only\"] | bool\nEnterKeyHint = Literal[\"enter\", \"done\", \"go\", \"next\", \"previous\", \"search\", \"send\"]\nInputMode = Literal[\n \"none\", \"text\", \"tel\", \"url\", \"email\", \"numeric\", \"decimal\", \"search\", \"search\"\n]\nAriaRole = Literal[\n \"alert\",\n \"alertdialog\",\n \"application\",\n \"article\",\n \"banner\",\n \"button\",\n \"cell\",\n \"checkbox\",\n \"columnheader\",\n \"combobox\",\n \"complementary\",\n \"contentinfo\",\n \"definition\",\n \"dialog\",\n \"directory\",\n \"document\",\n \"feed\",\n \"figure\",\n \"form\",\n \"grid\",\n \"gridcell\",\n \"group\",\n \"heading\",\n \"img\",\n \"link\",\n \"list\",\n \"listbox\",\n \"listitem\",\n \"log\",\n \"main\",\n \"marquee\",\n \"math\",\n \"menu\",\n \"menubar\",\n \"menuitem\",\n \"menuitemcheckbox\",\n \"menuitemradio\",\n \"navigation\",\n \"none\",\n \"note\",\n \"option\",\n \"presentation\",\n \"progressbar\",\n \"radio\",\n \"radiogroup\",\n \"region\",\n \"row\",\n \"rowgroup\",\n \"rowheader\",\n \"scrollbar\",\n \"search\",\n \"searchbox\",\n \"separator\",\n \"slider\",\n \"spinbutton\",\n \"status\",\n \"switch\",\n \"tab\",\n \"table\",\n \"tablist\",\n \"tabpanel\",\n \"term\",\n \"textbox\",\n \"timer\",\n \"toolbar\",\n \"tooltip\",\n \"tree\",\n \"treegrid\",\n \"treeitem\",\n]\n\n\nclass BaseHTML(Element):\n \"\"\"Base class for common attributes.\"\"\"\n\n # Provides a hint for generating a keyboard shortcut for the current element.\n access_key: Var[str]\n\n # Controls whether and how text input is automatically capitalized as it is entered/edited by the user.\n auto_capitalize: Var[AutoCapitalize]\n\n # Indicates whether the element's content is editable.\n content_editable: Var[ContentEditable]\n\n # Defines the ID of a element which will serve as the element's context menu.\n context_menu: Var[str]\n\n # Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)\n dir: Var[str]\n\n # Defines whether the element can be dragged.\n draggable: Var[bool]\n\n # Hints what media types the media element is able to play.\n enter_key_hint: Var[EnterKeyHint]\n\n # Defines whether the element is hidden.\n hidden: Var[bool]\n\n # Defines the type of the element.\n input_mode: Var[InputMode]\n\n # Defines the name of the element for metadata purposes.\n item_prop: Var[str]\n\n # Defines the language used in the element.\n lang: Var[str]\n\n # Defines the role of the element.\n role: Var[AriaRole]\n\n # Assigns a slot in a shadow DOM shadow tree to an element.\n slot: Var[str]\n\n # Defines whether the element may be checked for spelling errors.\n spell_check: Var[bool]\n\n # Defines the position of the current element in the tabbing order.\n tab_index: Var[int]\n\n # Defines a tooltip for the element.\n title: Var[str]\n" }, { "path": "reflex/components/el/elements/forms.py", "content": "\"\"\"Forms classes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Iterator\nfrom hashlib import md5\nfrom typing import Any, ClassVar, Literal\n\nfrom reflex.components.el.element import Element\nfrom reflex.components.tags.tag import Tag\nfrom reflex.constants import Dirs, EventTriggers\nfrom reflex.event import (\n FORM_DATA,\n EventChain,\n EventHandler,\n checked_input_event,\n float_input_event,\n input_event,\n int_input_event,\n key_event,\n on_submit_event,\n on_submit_string_event,\n prevent_default,\n)\nfrom reflex.utils.imports import ImportDict\nfrom reflex.vars import VarData\nfrom reflex.vars.base import LiteralVar, Var\nfrom reflex.vars.number import ternary_operation\n\nfrom .base import BaseHTML\n\n\ndef _handle_submit_js_template(\n handle_submit_unique_name: str,\n form_data: str,\n field_ref_mapping: str,\n on_submit_event_chain: str,\n reset_on_submit: str,\n) -> str:\n \"\"\"Generate handle submit JS using f-string formatting.\n\n Args:\n handle_submit_unique_name: Unique name for the handle submit function.\n form_data: Name of the form data variable.\n field_ref_mapping: JSON string of field reference mappings.\n on_submit_event_chain: Event chain for the submit handler.\n reset_on_submit: Boolean string indicating if form should reset after submit.\n\n Returns:\n JavaScript code for the form submit handler.\n \"\"\"\n return f\"\"\"\n const handleSubmit_{handle_submit_unique_name} = useCallback((ev) => {{\n const $form = ev.target\n ev.preventDefault()\n const {form_data} = {{...Object.fromEntries(new FormData($form).entries()), ...{field_ref_mapping}}};\n\n ({on_submit_event_chain}(ev));\n\n if ({reset_on_submit}) {{\n $form.reset()\n }}\n }})\n \"\"\"\n\n\nButtonType = Literal[\"submit\", \"reset\", \"button\"]\n\n\nclass Button(BaseHTML):\n \"\"\"Display the button element.\"\"\"\n\n tag = \"button\"\n\n # Automatically focuses the button when the page loads\n auto_focus: Var[bool]\n\n # Disables the button\n disabled: Var[bool]\n\n # Associates the button with a form (by id)\n form: Var[str]\n\n # URL to send the form data to (for type=\"submit\" buttons)\n form_action: Var[str]\n\n # How the form data should be encoded when submitting to the server (for type=\"submit\" buttons)\n form_enc_type: Var[str]\n\n # HTTP method to use for sending form data (for type=\"submit\" buttons)\n form_method: Var[str]\n\n # Bypasses form validation when submitting (for type=\"submit\" buttons)\n form_no_validate: Var[bool]\n\n # Specifies where to display the response after submitting the form (for type=\"submit\" buttons)\n form_target: Var[str]\n\n # Name of the button, used when sending form data\n name: Var[str]\n\n # Type of the button (submit, reset, or button)\n type: Var[ButtonType]\n\n # Value of the button, used when sending form data\n value: Var[str | int | float]\n\n _invalid_children: ClassVar[list[str]] = [\"Button\"]\n\n\nclass Datalist(BaseHTML):\n \"\"\"Display the datalist element.\"\"\"\n\n tag = \"datalist\"\n\n\nclass Fieldset(Element):\n \"\"\"Display the fieldset element.\"\"\"\n\n tag = \"fieldset\"\n\n # Disables all the form control descendants of the fieldset\n disabled: Var[bool]\n\n # Associates the fieldset with a form (by id)\n form: Var[str]\n\n # Name of the fieldset, used for scripting\n name: Var[str]\n\n\nclass Form(BaseHTML):\n \"\"\"Display the form element.\"\"\"\n\n tag = \"form\"\n\n # MIME types the server accepts for file upload\n accept: Var[str]\n\n # Character encodings to be used for form submission\n accept_charset: Var[str]\n\n # URL where the form's data should be submitted\n action: Var[str]\n\n # Whether the form should have autocomplete enabled\n auto_complete: Var[str]\n\n # Encoding type for the form data when submitted\n enc_type: Var[str]\n\n # HTTP method to use for form submission\n method: Var[str]\n\n # Name of the form\n name: Var[str]\n\n # Indicates that the form should not be validated on submit\n no_validate: Var[bool]\n\n # Where to display the response after submitting the form\n target: Var[str]\n\n # If true, the form will be cleared after submit.\n reset_on_submit: Var[bool] = Var.create(False)\n\n # The name used to make this form's submit handler function unique.\n handle_submit_unique_name: Var[str]\n\n # Fired when the form is submitted\n on_submit: EventHandler[on_submit_event, on_submit_string_event]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a form component.\n\n Args:\n *children: The children of the form.\n **props: The properties of the form.\n\n Returns:\n The form component.\n \"\"\"\n if \"on_submit\" not in props:\n props[\"on_submit\"] = prevent_default\n\n if \"handle_submit_unique_name\" in props:\n return super().create(*children, **props)\n\n # Render the form hooks and use the hash of the resulting code to create a unique name.\n props[\"handle_submit_unique_name\"] = \"\"\n form = super().create(*children, **props)\n form.handle_submit_unique_name = md5( # pyright: ignore[reportAttributeAccessIssue]\n str(form._get_all_hooks()).encode(\"utf-8\")\n ).hexdigest()\n return form\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add imports needed by the form component.\n\n Returns:\n The imports for the form component.\n \"\"\"\n return {\n \"react\": \"useCallback\",\n f\"$/{Dirs.STATE_PATH}\": [\"getRefValue\", \"getRefValues\"],\n }\n\n def add_hooks(self) -> list[str]:\n \"\"\"Add hooks for the form.\n\n Returns:\n The hooks for the form.\n \"\"\"\n if EventTriggers.ON_SUBMIT not in self.event_triggers:\n return []\n return [\n _handle_submit_js_template(\n handle_submit_unique_name=str(self.handle_submit_unique_name),\n form_data=str(FORM_DATA),\n field_ref_mapping=str(LiteralVar.create(self._get_form_refs())),\n on_submit_event_chain=str(\n LiteralVar.create(self.event_triggers[EventTriggers.ON_SUBMIT])\n ),\n reset_on_submit=str(self.reset_on_submit).lower(),\n )\n ]\n\n def _render(self) -> Tag:\n render_tag = super()._render()\n if EventTriggers.ON_SUBMIT in self.event_triggers:\n render_tag = render_tag.add_props(**{\n EventTriggers.ON_SUBMIT: Var(\n _js_expr=f\"handleSubmit_{self.handle_submit_unique_name}\",\n _var_type=EventChain,\n )\n })\n return render_tag\n\n def _get_form_refs(self) -> dict[str, Any]:\n # Send all the input refs to the handler.\n form_refs = {}\n for ref in self._get_all_refs():\n # when ref start with refs_ it's an array of refs, so we need different method\n # to collect data\n if ref.startswith(\"refs_\"):\n ref_var = Var(_js_expr=ref[:-3])._as_ref()\n form_refs[ref[len(\"refs_\") : -3]] = Var(\n _js_expr=f\"getRefValues({ref_var!s})\",\n _var_data=VarData.merge(ref_var._get_all_var_data()),\n )\n else:\n ref_var = Var(_js_expr=ref)._as_ref()\n form_refs[ref[4:]] = Var(\n _js_expr=f\"getRefValue({ref_var!s})\",\n _var_data=VarData.merge(ref_var._get_all_var_data()),\n )\n return form_refs\n\n def _get_vars(\n self, include_children: bool = True, ignore_ids: set[int] | None = None\n ) -> Iterator[Var]:\n yield from super()._get_vars(\n include_children=include_children, ignore_ids=ignore_ids\n )\n yield from self._get_form_refs().values()\n\n def _exclude_props(self) -> list[str]:\n return [\n *super()._exclude_props(),\n \"reset_on_submit\",\n \"handle_submit_unique_name\",\n ]\n\n\nHTMLInputTypeAttribute = Literal[\n \"button\",\n \"checkbox\",\n \"color\",\n \"date\",\n \"datetime-local\",\n \"email\",\n \"file\",\n \"hidden\",\n \"image\",\n \"month\",\n \"number\",\n \"password\",\n \"radio\",\n \"range\",\n \"reset\",\n \"search\",\n \"submit\",\n \"tel\",\n \"text\",\n \"time\",\n \"url\",\n \"week\",\n]\n\n\nclass BaseInput(BaseHTML):\n \"\"\"A base class for input elements.\"\"\"\n\n tag = \"input\"\n\n # Accepted types of files when the input is file type\n accept: Var[str]\n\n # Alternate text for input type=\"image\"\n alt: Var[str]\n\n # Whether the input should have autocomplete enabled\n auto_complete: Var[str]\n\n # Automatically focuses the input when the page loads\n auto_focus: Var[bool]\n\n # Captures media from the user (camera or microphone)\n capture: Var[Literal[\"user\", \"environment\"] | bool]\n\n # Indicates whether the input is checked (for checkboxes and radio buttons)\n checked: Var[bool]\n\n # The initial value (for checkboxes and radio buttons)\n default_checked: Var[bool]\n\n # The initial value for a text field\n default_value: Var[str | int | float]\n\n # Disables the input\n disabled: Var[bool]\n\n # Associates the input with a form (by id)\n form: Var[str]\n\n # URL to send the form data to (for type=\"submit\" buttons)\n form_action: Var[str]\n\n # How the form data should be encoded when submitting to the server (for type=\"submit\" buttons)\n form_enc_type: Var[str]\n\n # HTTP method to use for sending form data (for type=\"submit\" buttons)\n form_method: Var[str]\n\n # Bypasses form validation when submitting (for type=\"submit\" buttons)\n form_no_validate: Var[bool]\n\n # Specifies where to display the response after submitting the form (for type=\"submit\" buttons)\n form_target: Var[str]\n\n # References a datalist for suggested options\n list: Var[str]\n\n # Specifies the maximum value for the input\n max: Var[str | int | float]\n\n # Specifies the maximum number of characters allowed in the input\n max_length: Var[int | float]\n\n # Specifies the minimum number of characters required in the input\n min_length: Var[int | float]\n\n # Specifies the minimum value for the input\n min: Var[str | int | float]\n\n # Indicates whether multiple values can be entered in an input of the type email or file\n multiple: Var[bool]\n\n # Name of the input, used when sending form data\n name: Var[str]\n\n # Regex pattern the input's value must match to be valid\n pattern: Var[str]\n\n # Placeholder text in the input\n placeholder: Var[str]\n\n # Indicates whether the input is read-only\n read_only: Var[bool]\n\n # Indicates that the input is required\n required: Var[bool]\n\n # Specifies the visible width of a text control\n size: Var[str | int | float]\n\n # URL for image inputs\n src: Var[str]\n\n # Specifies the legal number intervals for an input\n step: Var[str | int | float]\n\n # Specifies the type of input\n type: Var[HTMLInputTypeAttribute]\n\n # Value of the input\n value: Var[str | int | float]\n\n # Fired when a key is pressed down\n on_key_down: EventHandler[key_event]\n\n # Fired when a key is released\n on_key_up: EventHandler[key_event]\n\n\nclass CheckboxInput(BaseInput):\n \"\"\"Display the input element.\"\"\"\n\n # Fired when the input value changes\n on_change: EventHandler[checked_input_event]\n\n # Fired when the input gains focus\n on_focus: EventHandler[checked_input_event]\n\n # Fired when the input loses focus\n on_blur: EventHandler[checked_input_event]\n\n\nclass ValueNumberInput(BaseInput):\n \"\"\"Display the input element.\"\"\"\n\n # Fired when the input value changes\n on_change: EventHandler[float_input_event, int_input_event, input_event]\n\n # Fired when the input gains focus\n on_focus: EventHandler[float_input_event, int_input_event, input_event]\n\n # Fired when the input loses focus\n on_blur: EventHandler[float_input_event, int_input_event, input_event]\n\n\nclass Input(BaseInput):\n \"\"\"Display the input element.\"\"\"\n\n # Fired when the input value changes\n on_change: EventHandler[input_event]\n\n # Fired when the input gains focus\n on_focus: EventHandler[input_event]\n\n # Fired when the input loses focus\n on_blur: EventHandler[input_event]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create an Input component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The component.\n \"\"\"\n value = props.get(\"value\")\n\n # React expects an empty string(instead of null) for controlled inputs.\n if value is not None:\n value_var = Var.create(value)\n props[\"value\"] = ternary_operation(\n value_var.is_not_none(), value_var, Var.create(\"\")\n )\n\n if cls is Input:\n input_type = props.get(\"type\")\n\n if isinstance(input_type, str) and input_type == \"checkbox\":\n # Checkbox inputs should use the CheckboxInput class\n return CheckboxInput.create(*children, **props)\n\n if isinstance(input_type, str) and (\n input_type == \"number\" or input_type == \"range\"\n ):\n # Number inputs should use the ValueNumberInput class\n return ValueNumberInput.create(*children, **props)\n\n return super().create(*children, **props)\n\n\nclass Label(BaseHTML):\n \"\"\"Display the label element.\"\"\"\n\n tag = \"label\"\n\n # ID of a form control with which the label is associated\n html_for: Var[str]\n\n # Associates the label with a form (by id)\n form: Var[str]\n\n\nclass Legend(BaseHTML):\n \"\"\"Display the legend element.\"\"\"\n\n tag = \"legend\"\n\n\nclass Meter(BaseHTML):\n \"\"\"Display the meter element.\"\"\"\n\n tag = \"meter\"\n\n # Associates the meter with a form (by id)\n form: Var[str]\n\n # High limit of range (above this is considered high value)\n high: Var[str | int | float]\n\n # Low limit of range (below this is considered low value)\n low: Var[str | int | float]\n\n # Maximum value of the range\n max: Var[str | int | float]\n\n # Minimum value of the range\n min: Var[str | int | float]\n\n # Optimum value in the range\n optimum: Var[str | int | float]\n\n # Current value of the meter\n value: Var[str | int | float]\n\n\nclass Optgroup(BaseHTML):\n \"\"\"Display the optgroup element.\"\"\"\n\n tag = \"optgroup\"\n\n # Disables the optgroup\n disabled: Var[bool]\n\n # Label for the optgroup\n label: Var[str]\n\n\nclass Option(BaseHTML):\n \"\"\"Display the option element.\"\"\"\n\n tag = \"option\"\n\n # Disables the option\n disabled: Var[bool]\n\n # Label for the option, if the text is not the label\n label: Var[str]\n\n # Indicates that the option is initially selected\n selected: Var[bool]\n\n # Value to be sent as form data\n value: Var[str | int | float]\n\n\nclass Output(BaseHTML):\n \"\"\"Display the output element.\"\"\"\n\n tag = \"output\"\n\n # Associates the output with one or more elements (by their IDs)\n html_for: Var[str]\n\n # Associates the output with a form (by id)\n form: Var[str]\n\n # Name of the output element for form submission\n name: Var[str]\n\n\nclass Progress(BaseHTML):\n \"\"\"Display the progress element.\"\"\"\n\n tag = \"progress\"\n\n # Associates the progress element with a form (by id)\n form: Var[str]\n\n # Maximum value of the progress indicator\n max: Var[str | int | float]\n\n # Current value of the progress indicator\n value: Var[str | int | float]\n\n\nclass Select(BaseHTML):\n \"\"\"Display the select element.\"\"\"\n\n tag = \"select\"\n\n # Whether the form control should have autocomplete enabled\n auto_complete: Var[str]\n\n # Automatically focuses the select when the page loads\n auto_focus: Var[bool]\n\n # Disables the select control\n disabled: Var[bool]\n\n # Associates the select with a form (by id)\n form: Var[str]\n\n # Indicates that multiple options can be selected\n multiple: Var[bool]\n\n # Name of the select, used when submitting the form\n name: Var[str]\n\n # Indicates that the select control must have a selected option\n required: Var[bool]\n\n # Number of visible options in a drop-down list\n size: Var[str | int]\n\n # Fired when the select value changes\n on_change: EventHandler[input_event]\n\n # The controlled value of the select, read only unless used with on_change\n value: Var[str]\n\n # The default value of the select when initially rendered\n default_value: Var[str]\n\n\nAUTO_HEIGHT_JS = \"\"\"\nconst autoHeightOnInput = (e, is_enabled) => {\n if (is_enabled) {\n const el = e.target;\n el.style.overflowY = \"scroll\";\n el.style.height = \"auto\";\n el.style.height = (e.target.scrollHeight) + \"px\";\n if (el.form && !el.form.data_resize_on_reset) {\n el.form.addEventListener(\"reset\", () => window.setTimeout(() => autoHeightOnInput(e, is_enabled), 0))\n el.form.data_resize_on_reset = true;\n }\n }\n}\n\"\"\"\n\n\nENTER_KEY_SUBMIT_JS = \"\"\"\nconst enterKeySubmitOnKeyDown = (e, is_enabled) => {\n if (is_enabled && e.which === 13 && !e.shiftKey) {\n e.preventDefault();\n if (!e.repeat) {\n if (e.target.form) {\n e.target.form.requestSubmit();\n }\n }\n }\n}\n\"\"\"\n\n\nclass Textarea(BaseHTML):\n \"\"\"Display the textarea element.\"\"\"\n\n tag = \"textarea\"\n\n # Whether the form control should have autocomplete enabled\n auto_complete: Var[str]\n\n # Automatically focuses the textarea when the page loads\n auto_focus: Var[bool]\n\n # Automatically fit the content height to the text (use min-height with this prop)\n auto_height: Var[bool]\n\n # Visible width of the text control, in average character widths\n cols: Var[str | int]\n\n # The default value of the textarea when initially rendered\n default_value: Var[str]\n\n # Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted\n dirname: Var[str]\n\n # Disables the textarea\n disabled: Var[bool]\n\n # Enter key submits form (shift-enter adds new line)\n enter_key_submit: Var[bool]\n\n # Associates the textarea with a form (by id)\n form: Var[str]\n\n # Maximum number of characters allowed in the textarea\n max_length: Var[str | int]\n\n # Minimum number of characters required in the textarea\n min_length: Var[str | int]\n\n # Name of the textarea, used when submitting the form\n name: Var[str]\n\n # Placeholder text in the textarea\n placeholder: Var[str]\n\n # Indicates whether the textarea is read-only\n read_only: Var[bool]\n\n # Indicates that the textarea is required\n required: Var[bool]\n\n # Visible number of lines in the text control\n rows: Var[str | int]\n\n # The controlled value of the textarea, read only unless used with on_change\n value: Var[str]\n\n # How the text in the textarea is to be wrapped when submitting the form\n wrap: Var[str]\n\n # Fired when the input value changes\n on_change: EventHandler[input_event]\n\n # Fired when the input gains focus\n on_focus: EventHandler[input_event]\n\n # Fired when the input loses focus\n on_blur: EventHandler[input_event]\n\n # Fired when a key is pressed down\n on_key_down: EventHandler[key_event]\n\n # Fired when a key is released\n on_key_up: EventHandler[key_event]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a textarea component.\n\n Args:\n *children: The children of the textarea.\n **props: The properties of the textarea.\n\n Returns:\n The textarea component.\n\n Raises:\n ValueError: when `enter_key_submit` is combined with `on_key_down`.\n \"\"\"\n enter_key_submit = props.get(\"enter_key_submit\")\n auto_height = props.get(\"auto_height\")\n custom_attrs = props.setdefault(\"custom_attrs\", {})\n\n if enter_key_submit is not None:\n enter_key_submit = Var.create(enter_key_submit)\n if \"on_key_down\" in props:\n msg = \"Cannot combine `enter_key_submit` with `on_key_down`.\"\n raise ValueError(msg)\n custom_attrs[\"on_key_down\"] = Var(\n _js_expr=f\"(e) => enterKeySubmitOnKeyDown(e, {enter_key_submit!s})\",\n _var_data=VarData.merge(enter_key_submit._get_all_var_data()),\n )\n if auto_height is not None:\n auto_height = Var.create(auto_height)\n custom_attrs[\"on_input\"] = Var(\n _js_expr=f\"(e) => autoHeightOnInput(e, {auto_height!s})\",\n _var_data=VarData.merge(auto_height._get_all_var_data()),\n )\n return super().create(*children, **props)\n\n def _exclude_props(self) -> list[str]:\n return [\n *super()._exclude_props(),\n \"auto_height\",\n \"enter_key_submit\",\n ]\n\n def _get_all_custom_code(self) -> dict[str, None]:\n \"\"\"Include the custom code for auto_height and enter_key_submit functionality.\n\n Returns:\n The custom code for the component.\n \"\"\"\n custom_code = super()._get_all_custom_code()\n if self.auto_height is not None:\n custom_code[AUTO_HEIGHT_JS] = None\n if self.enter_key_submit is not None:\n custom_code[ENTER_KEY_SUBMIT_JS] = None\n return custom_code\n\n\nbutton = Button.create\ndatalist = Datalist.create\nfieldset = Fieldset.create\nform = Form.create\ninput = Input.create\nlabel = Label.create\nlegend = Legend.create\nmeter = Meter.create\noptgroup = Optgroup.create\noption = Option.create\noutput = Output.create\nprogress = Progress.create\nselect = Select.create\ntextarea = Textarea.create\n" }, { "path": "reflex/components/el/elements/inline.py", "content": "\"\"\"Inline classes.\"\"\"\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\nReferrerPolicy = Literal[\n \"\",\n \"no-referrer\",\n \"no-referrer-when-downgrade\",\n \"origin\",\n \"origin-when-cross-origin\",\n \"same-origin\",\n \"strict-origin\",\n \"strict-origin-when-cross-origin\",\n \"unsafe-url\",\n]\n\n\nclass A(BaseHTML): # Inherits common attributes from BaseMeta\n \"\"\"Display the 'a' element.\"\"\"\n\n tag = \"a\"\n\n # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.\n download: Var[str | bool]\n\n # Specifies the URL of the page the link goes to\n href: Var[str]\n\n # Specifies the language of the linked document\n href_lang: Var[str]\n\n # Specifies what media/device the linked document is optimized for\n media: Var[str]\n\n # Specifies which referrer is sent when fetching the resource\n ping: Var[str]\n\n # Specifies the relationship between the current document and the linked document\n referrer_policy: Var[ReferrerPolicy]\n\n # Specifies the relationship between the linked document and the current document\n rel: Var[str]\n\n # Specifies where to open the linked document\n target: Var[str | Literal[\"_self\", \"_blank\", \"_parent\", \"_top\"]]\n\n _invalid_children: ClassVar[list[str]] = [\"A\"]\n\n\nclass Abbr(BaseHTML):\n \"\"\"Display the abbr element.\"\"\"\n\n tag = \"abbr\"\n\n\nclass B(BaseHTML):\n \"\"\"Display the b element.\"\"\"\n\n tag = \"b\"\n\n\nclass Bdi(BaseHTML):\n \"\"\"Display the bdi element.\"\"\"\n\n tag = \"bdi\"\n\n\nclass Bdo(BaseHTML):\n \"\"\"Display the bdo element.\"\"\"\n\n tag = \"bdo\"\n\n\nclass Br(BaseHTML):\n \"\"\"Display the br element.\"\"\"\n\n tag = \"br\"\n\n\nclass Cite(BaseHTML):\n \"\"\"Display the cite element.\"\"\"\n\n tag = \"cite\"\n\n\nclass Code(BaseHTML):\n \"\"\"Display the code element.\"\"\"\n\n tag = \"code\"\n\n\nclass Data(BaseHTML):\n \"\"\"Display the data element.\"\"\"\n\n tag = \"data\"\n\n # Specifies the machine-readable translation of the data element.\n value: Var[str | int | float]\n\n\nclass Dfn(BaseHTML):\n \"\"\"Display the dfn element.\"\"\"\n\n tag = \"dfn\"\n\n\nclass Em(BaseHTML):\n \"\"\"Display the em element.\"\"\"\n\n tag = \"em\"\n\n\nclass I(BaseHTML): # noqa: E742\n \"\"\"Display the i element.\"\"\"\n\n tag = \"i\"\n\n\nclass Kbd(BaseHTML):\n \"\"\"Display the kbd element.\"\"\"\n\n tag = \"kbd\"\n\n\nclass Mark(BaseHTML):\n \"\"\"Display the mark element.\"\"\"\n\n tag = \"mark\"\n\n\nclass Q(BaseHTML):\n \"\"\"Display the q element.\"\"\"\n\n tag = \"q\"\n\n # Specifies the source URL of the quote.\n cite: Var[str]\n\n\nclass Rp(BaseHTML):\n \"\"\"Display the rp element.\"\"\"\n\n tag = \"rp\"\n\n\nclass Rt(BaseHTML):\n \"\"\"Display the rt element.\"\"\"\n\n tag = \"rt\"\n\n\nclass Ruby(BaseHTML):\n \"\"\"Display the ruby element.\"\"\"\n\n tag = \"ruby\"\n\n\nclass S(BaseHTML):\n \"\"\"Display the s element.\"\"\"\n\n tag = \"s\"\n\n\nclass Samp(BaseHTML):\n \"\"\"Display the samp element.\"\"\"\n\n tag = \"samp\"\n\n\nclass Small(BaseHTML):\n \"\"\"Display the small element.\"\"\"\n\n tag = \"small\"\n\n\nclass Span(BaseHTML):\n \"\"\"Display the span element.\"\"\"\n\n tag = \"span\"\n\n\nclass Strong(BaseHTML):\n \"\"\"Display the strong element.\"\"\"\n\n tag = \"strong\"\n\n\nclass Sub(BaseHTML):\n \"\"\"Display the sub element.\"\"\"\n\n tag = \"sub\"\n\n\nclass Sup(BaseHTML):\n \"\"\"Display the sup element.\"\"\"\n\n tag = \"sup\"\n\n\nclass Time(BaseHTML):\n \"\"\"Display the time element.\"\"\"\n\n tag = \"time\"\n\n # Specifies the date and/or time of the element.\n date_time: Var[str]\n\n\nclass U(BaseHTML):\n \"\"\"Display the u element.\"\"\"\n\n tag = \"u\"\n\n\nclass Wbr(BaseHTML):\n \"\"\"Display the wbr element.\"\"\"\n\n tag = \"wbr\"\n\n\na = A.create\nabbr = Abbr.create\nb = B.create\nbdi = Bdi.create\nbdo = Bdo.create\nbr = Br.create\ncite = Cite.create\ncode = Code.create\ndata = Data.create\ndfn = Dfn.create\nem = Em.create\ni = I.create\nkbd = Kbd.create\nmark = Mark.create\nq = Q.create\nrp = Rp.create\nrt = Rt.create\nruby = Ruby.create\ns = S.create\nsamp = Samp.create\nsmall = Small.create\nspan = Span.create\nstrong = Strong.create\nsub = Sub.create\nsup = Sup.create\ntime = Time.create\nu = U.create\nwbr = Wbr.create\n" }, { "path": "reflex/components/el/elements/media.py", "content": "\"\"\"Media classes.\"\"\"\n\nfrom typing import Any, Literal\n\nfrom reflex import Component, ComponentNamespace\nfrom reflex.components.el.elements.inline import ReferrerPolicy\nfrom reflex.constants.colors import Color\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\n\nclass Area(BaseHTML):\n \"\"\"Display the area element.\"\"\"\n\n tag = \"area\"\n\n # Alternate text for the area, used for accessibility\n alt: Var[str]\n\n # Coordinates to define the shape of the area\n coords: Var[str]\n\n # Specifies that the target will be downloaded when clicked\n download: Var[str | bool]\n\n # Hyperlink reference for the area\n href: Var[str]\n\n # Language of the linked resource\n href_lang: Var[str]\n\n # Specifies what media/device the linked resource is optimized for\n media: Var[str]\n\n # Specifies which referrer information to send with the link\n referrer_policy: Var[ReferrerPolicy]\n\n # Specifies the relationship of the target object to the link object\n rel: Var[str]\n\n # Defines the shape of the area (rectangle, circle, polygon)\n shape: Var[str]\n\n # Specifies where to open the linked document\n target: Var[str]\n\n\nCrossOrigin = Literal[\"anonymous\", \"use-credentials\", \"\"]\n\n\nclass Audio(BaseHTML):\n \"\"\"Display the audio element.\"\"\"\n\n tag = \"audio\"\n\n # Specifies that the audio will start playing as soon as it is ready\n auto_play: Var[bool]\n\n # Displays the standard audio controls\n controls: Var[bool]\n\n # Configures the CORS requests for the element\n cross_origin: Var[CrossOrigin]\n\n # Specifies that the audio will loop\n loop: Var[bool]\n\n # Indicates whether the audio is muted by default\n muted: Var[bool]\n\n # Specifies how the audio file should be preloaded\n preload: Var[str]\n\n # URL of the audio to play\n src: Var[str]\n\n\nImageDecoding = Literal[\"async\", \"auto\", \"sync\"]\nImageLoading = Literal[\"eager\", \"lazy\"]\n\n\nclass Img(BaseHTML):\n \"\"\"Display the img element.\"\"\"\n\n tag = \"img\"\n\n # Alternative text for the image\n alt: Var[str]\n\n # Configures the CORS requests for the image\n cross_origin: Var[CrossOrigin]\n\n # How the image should be decoded\n decoding: Var[ImageDecoding]\n\n # Specifies the loading behavior of the image\n loading: Var[ImageLoading]\n\n # Referrer policy for the image\n referrer_policy: Var[ReferrerPolicy]\n\n # Sizes of the image for different layouts\n sizes: Var[str]\n\n # URL of the image to display\n src: Var[Any]\n\n # A set of source sizes and URLs for responsive images\n src_set: Var[str]\n\n # The name of the map to use with the image\n use_map: Var[str]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Override create method to apply source attribute to value if user fails to pass in attribute.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The component.\n \"\"\"\n return (\n super().create(src=children[0], **props)\n if children\n else super().create(*children, **props)\n )\n\n\nclass Map(BaseHTML):\n \"\"\"Display the map element.\"\"\"\n\n tag = \"map\"\n\n # Name of the map, referenced by the 'usemap' attribute in 'img' and 'object' elements\n name: Var[str]\n\n\nclass Track(BaseHTML):\n \"\"\"Display the track element.\"\"\"\n\n tag = \"track\"\n\n # Indicates that the track should be enabled unless the user's preferences indicate otherwise\n default: Var[bool]\n\n # Specifies the kind of text track\n kind: Var[str]\n\n # Title of the text track, used by the browser when listing available text tracks\n label: Var[str]\n\n # URL of the track file\n src: Var[str]\n\n # Language of the track text data\n src_lang: Var[str]\n\n\nclass Video(BaseHTML):\n \"\"\"Display the video element.\"\"\"\n\n tag = \"video\"\n\n # Specifies that the video will start playing as soon as it is ready\n auto_play: Var[bool]\n\n # Displays the standard video controls\n controls: Var[bool]\n\n # Configures the CORS requests for the video\n cross_origin: Var[CrossOrigin]\n\n # Specifies that the video will loop\n loop: Var[bool]\n\n # Indicates whether the video is muted by default\n muted: Var[bool]\n\n # Indicates that the video should play 'inline', inside its element's playback area\n plays_inline: Var[bool]\n\n # URL of an image to show while the video is downloading, or until the user hits the play button\n poster: Var[str]\n\n # Specifies how the video file should be preloaded\n preload: Var[str]\n\n # URL of the video to play\n src: Var[str]\n\n\nclass Embed(BaseHTML):\n \"\"\"Display the embed element.\"\"\"\n\n tag = \"embed\"\n\n # URL of the embedded content\n src: Var[str]\n\n # Media type of the embedded content\n type: Var[str]\n\n\nclass Iframe(BaseHTML):\n \"\"\"Display the iframe element.\"\"\"\n\n tag = \"iframe\"\n\n # Permissions policy for the iframe\n allow: Var[str]\n\n # Specifies the loading behavior of the iframe\n loading: Var[Literal[\"eager\", \"lazy\"]]\n\n # Name of the iframe, used as a target for hyperlinks and forms\n name: Var[str]\n\n # Referrer policy for the iframe\n referrer_policy: Var[ReferrerPolicy]\n\n # Security restrictions for the content in the iframe\n sandbox: Var[str]\n\n # URL of the document to display in the iframe\n src: Var[str]\n\n # HTML content to embed directly within the iframe\n src_doc: Var[str]\n\n\nclass Object(BaseHTML):\n \"\"\"Display the object element.\"\"\"\n\n tag = \"object\"\n\n # URL of the data to be used by the object\n data: Var[str]\n\n # Associates the object with a form element\n form: Var[str]\n\n # Name of the object, used for scripting or as a target for forms and links\n name: Var[str]\n\n # Media type of the data specified in the data attribute\n type: Var[str]\n\n # Name of an image map to use with the object\n use_map: Var[str]\n\n\nclass Picture(BaseHTML):\n \"\"\"Display the picture element.\"\"\"\n\n tag = \"picture\"\n\n\nclass Portal(BaseHTML):\n \"\"\"Display the portal element.\"\"\"\n\n tag = \"portal\"\n\n\nclass Source(BaseHTML):\n \"\"\"Display the source element.\"\"\"\n\n tag = \"source\"\n\n # Media query indicating what device the linked resource is optimized for\n media: Var[str]\n\n # Sizes of the source for different layouts\n sizes: Var[str]\n\n # URL of the media file or an image for the element to use\n src: Var[str]\n\n # A set of source sizes and URLs for responsive images\n src_set: Var[str]\n\n # Media type of the source\n type: Var[str]\n\n\nclass Svg(BaseHTML):\n \"\"\"Display the svg element.\"\"\"\n\n tag = \"svg\"\n # The width of the svg.\n width: Var[str | int]\n # The height of the svg.\n height: Var[str | int]\n # The XML namespace declaration.\n xmlns: Var[str]\n # The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.\n view_box: Var[str]\n # Controls how the SVG scales to fit its viewport.\n preserve_aspect_ratio: Var[str]\n # Defines a list of transform definitions that are applied to an element and the element's children.\n transform: Var[str]\n\n\nclass Text(BaseHTML):\n \"\"\"The SVG text component.\"\"\"\n\n tag = \"text\"\n # The x coordinate of the starting point of the text baseline.\n x: Var[str | int]\n # The y coordinate of the starting point of the text baseline.\n y: Var[str | int]\n # Shifts the text position horizontally from a previous text element.\n dx: Var[str | int]\n # Shifts the text position vertically from a previous text element.\n dy: Var[str | int]\n # Rotates orientation of each individual glyph.\n rotate: Var[str | int]\n # How the text is stretched or compressed to fit the width defined by the text_length attribute.\n length_adjust: Var[str]\n # A width that the text should be scaled to fit.\n text_length: Var[str | int]\n\n\nclass Line(BaseHTML):\n \"\"\"The SVG line component.\"\"\"\n\n tag = \"line\"\n # The x-axis coordinate of the line starting point.\n x1: Var[str | int]\n # The x-axis coordinate of the the line ending point.\n x2: Var[str | int]\n # The y-axis coordinate of the line starting point.\n y1: Var[str | int]\n # The y-axis coordinate of the the line ending point.\n y2: Var[str | int]\n # The total path length, in user units.\n path_length: Var[int]\n\n\nclass Circle(BaseHTML):\n \"\"\"The SVG circle component.\"\"\"\n\n tag = \"circle\"\n # The x-axis coordinate of the center of the circle.\n cx: Var[str | int]\n # The y-axis coordinate of the center of the circle.\n cy: Var[str | int]\n # The radius of the circle.\n r: Var[str | int]\n # The total length for the circle's circumference, in user units.\n path_length: Var[int]\n\n\nclass Ellipse(BaseHTML):\n \"\"\"The SVG ellipse component.\"\"\"\n\n tag = \"ellipse\"\n # The x position of the center of the ellipse.\n cx: Var[str | int]\n # The y position of the center of the ellipse.\n cy: Var[str | int]\n # The radius of the ellipse on the x axis.\n rx: Var[str | int]\n # The radius of the ellipse on the y axis.\n ry: Var[str | int]\n # The total length for the ellipse's circumference, in user units.\n path_length: Var[int]\n\n\nclass Rect(BaseHTML):\n \"\"\"The SVG rect component.\"\"\"\n\n tag = \"rect\"\n # The x coordinate of the rect.\n x: Var[str | int]\n # The y coordinate of the rect.\n y: Var[str | int]\n # The width of the rect\n width: Var[str | int]\n # The height of the rect.\n height: Var[str | int]\n # The horizontal corner radius of the rect. Defaults to ry if it is specified.\n rx: Var[str | int]\n # The vertical corner radius of the rect. Defaults to rx if it is specified.\n ry: Var[str | int]\n # The total length of the rectangle's perimeter, in user units.\n path_length: Var[int]\n\n\nclass Polygon(BaseHTML):\n \"\"\"The SVG polygon component.\"\"\"\n\n tag = \"polygon\"\n # defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.\n points: Var[str]\n # This prop lets specify the total length for the path, in user units.\n path_length: Var[int]\n\n\nclass Polyline(BaseHTML):\n \"\"\"The SVG polyline component.\"\"\"\n\n tag = \"polyline\"\n # List of points (pairs of x,y coordinates) that define the polyline.\n points: Var[str]\n # The total path length, in user units.\n path_length: Var[int]\n\n\nclass Defs(BaseHTML):\n \"\"\"Display the defs element.\"\"\"\n\n tag = \"defs\"\n\n\nclass LinearGradient(BaseHTML):\n \"\"\"Display the linearGradient element.\"\"\"\n\n tag = \"linearGradient\"\n\n # Units for the gradient.\n gradient_units: Var[str | bool]\n\n # Transform applied to the gradient.\n gradient_transform: Var[str | bool]\n\n # Method used to spread the gradient.\n spread_method: Var[str | bool]\n\n # Reference to another gradient to inherit from.\n href: Var[str]\n\n # X coordinate of the starting point of the gradient.\n x1: Var[str | int | float]\n\n # X coordinate of the ending point of the gradient.\n x2: Var[str | int | float]\n\n # Y coordinate of the starting point of the gradient.\n y1: Var[str | int | float]\n\n # Y coordinate of the ending point of the gradient.\n y2: Var[str | int | float]\n\n\nclass RadialGradient(BaseHTML):\n \"\"\"Display the radialGradient element.\"\"\"\n\n tag = \"radialGradient\"\n\n # The x coordinate of the end circle of the radial gradient.\n cx: Var[str | int | float]\n\n # The y coordinate of the end circle of the radial gradient.\n cy: Var[str | int | float]\n\n # The radius of the start circle of the radial gradient.\n fr: Var[str | int | float]\n\n # The x coordinate of the start circle of the radial gradient.\n fx: Var[str | int | float]\n\n # The y coordinate of the start circle of the radial gradient.\n fy: Var[str | int | float]\n\n # Units for the gradient.\n gradient_units: Var[str | bool]\n\n # Transform applied to the gradient.\n gradient_transform: Var[str | bool]\n\n # Reference to another gradient to inherit from.\n href: Var[str]\n\n # The radius of the end circle of the radial gradient.\n r: Var[str | int | float]\n\n # Method used to spread the gradient.\n spread_method: Var[str | bool]\n\n\nclass Stop(BaseHTML):\n \"\"\"Display the stop element.\"\"\"\n\n tag = \"stop\"\n\n # Offset of the gradient stop.\n offset: Var[str | float | int]\n\n # Color of the gradient stop.\n stop_color: Var[str | Color | bool]\n\n # Opacity of the gradient stop.\n stop_opacity: Var[str | float | int | bool]\n\n\nclass Path(BaseHTML):\n \"\"\"Display the path element.\"\"\"\n\n tag = \"path\"\n\n # Defines the shape of the path.\n d: Var[str | int | float]\n # The total path length, in user units.\n path_length: Var[int]\n\n\nclass Marker(BaseHTML):\n \"\"\"Display the marker element.\"\"\"\n\n tag = \"marker\"\n\n # The height of the marker viewport.\n marker_height: Var[str | int | float]\n\n # The width of the marker viewport.\n marker_width: Var[str | int | float]\n\n # The coordinate system for the marker attributes.\n marker_units: Var[str]\n\n # The orientation of the marker relative to the shape it is attached to.\n orient: Var[str | int | float]\n\n # How the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.\n preserve_aspect_ratio: Var[str]\n\n # The x coordinate for the reference point of the marker.\n ref_x: Var[str | int | float]\n\n # The y coordinate for the reference point of the marker.\n ref_y: Var[str | int | float]\n\n # The bound of the SVG viewport for the current SVG fragment.\n view_box: Var[str]\n\n\nclass G(BaseHTML):\n \"\"\"The SVG g component, used to group other SVG elements.\"\"\"\n\n tag = \"g\"\n\n # The fill color of the group.\n fill: Var[str | Color]\n\n # The fill opacity of the group.\n fill_opacity: Var[str | int | float]\n\n # The stroke color of the group.\n stroke: Var[str | Color]\n\n # The stroke opacity of the group.\n stroke_opacity: Var[str | int | float]\n\n # The stroke width of the group.\n stroke_width: Var[str | int | float]\n\n # The transform applied to the group.\n transform: Var[str]\n\n\nclass SvgImage(BaseHTML):\n \"\"\"The SVG image component.\"\"\"\n\n tag = \"image\"\n\n # URL of the image to display.\n href: Var[str]\n\n # X coordinate of the image.\n x: Var[str | int]\n\n # Y coordinate of the image.\n y: Var[str | int]\n\n # Width of the image.\n width: Var[str | int]\n\n # Height of the image.\n height: Var[str | int]\n\n # How the image should scale to fit its viewport.\n preserve_aspect_ratio: Var[str]\n\n # CORS settings for the image.\n crossorigin: Var[str]\n\n\nclass Use(BaseHTML):\n \"\"\"The SVG use component for reusing defined elements.\"\"\"\n\n tag = \"use\"\n\n # Reference to the element to reuse.\n href: Var[str]\n\n # X coordinate where the referenced element should be positioned.\n x: Var[str | int]\n\n # Y coordinate where the referenced element should be positioned.\n y: Var[str | int]\n\n # Width of the referenced element.\n width: Var[str | int]\n\n # Height of the referenced element.\n height: Var[str | int]\n\n\nclass TSpan(BaseHTML):\n \"\"\"The SVG tspan component for text spans within text elements.\"\"\"\n\n tag = \"tspan\"\n\n # X coordinate of the text.\n x: Var[str | int]\n\n # Y coordinate of the text.\n y: Var[str | int]\n\n # Horizontal offset from the previous text element.\n dx: Var[str | int]\n\n # Vertical offset from the previous text element.\n dy: Var[str | int]\n\n # Rotation of the text.\n rotate: Var[str | int]\n\n # How the text is stretched or compressed to fit the width defined by text_length.\n length_adjust: Var[str]\n\n # A width that the text should be scaled to fit.\n text_length: Var[str | int]\n\n\nclass TextPath(BaseHTML):\n \"\"\"The SVG textPath component for text along a path.\"\"\"\n\n tag = \"textPath\"\n\n # Reference to the path along which the text should be rendered.\n href: Var[str]\n\n # Inline path data.\n path: Var[str]\n\n # Distance along the path from its beginning to the initial position of the text.\n start_offset: Var[str | int]\n\n # Method for rendering text along the path.\n method: Var[str]\n\n # Spacing method for text.\n spacing: Var[str]\n\n # Which side of the path the text should be rendered on.\n side: Var[str]\n\n # How the text is stretched or compressed to fit the specified length.\n length_adjust: Var[str]\n\n # Target length for the text.\n text_length: Var[str | int]\n\n\nclass Pattern(BaseHTML):\n \"\"\"The SVG pattern component for defining repeating patterns.\"\"\"\n\n tag = \"pattern\"\n\n # X coordinate of the pattern.\n x: Var[str | int]\n\n # Y coordinate of the pattern.\n y: Var[str | int]\n\n # Width of the pattern.\n width: Var[str | int]\n\n # Height of the pattern.\n height: Var[str | int]\n\n # Units for the pattern coordinates.\n pattern_units: Var[str]\n\n # Units for the pattern content coordinates.\n pattern_content_units: Var[str]\n\n # Transform applied to the pattern.\n pattern_transform: Var[str]\n\n # ViewBox definition for the pattern.\n view_box: Var[str]\n\n # How the pattern should scale to fit its viewport.\n preserve_aspect_ratio: Var[str]\n\n # Reference to another pattern to inherit from.\n href: Var[str]\n\n\nclass ClipPath(BaseHTML):\n \"\"\"The SVG clipPath component for defining clipping paths.\"\"\"\n\n tag = \"clipPath\"\n\n # Units for the clipping path coordinates.\n clip_path_units: Var[str]\n\n\nclass Symbol(BaseHTML):\n \"\"\"The SVG symbol component for defining reusable symbols.\"\"\"\n\n tag = \"symbol\"\n\n # ViewBox definition for the symbol.\n view_box: Var[str]\n\n # How the symbol should scale to fit its viewport.\n preserve_aspect_ratio: Var[str]\n\n # Reference X coordinate.\n ref_x: Var[str | int]\n\n # Reference Y coordinate.\n ref_y: Var[str | int]\n\n\nclass Mask(BaseHTML):\n \"\"\"The SVG mask component for defining masks.\"\"\"\n\n tag = \"mask\"\n\n # X coordinate of the mask.\n x: Var[str | int]\n\n # Y coordinate of the mask.\n y: Var[str | int]\n\n # Width of the mask.\n width: Var[str | int]\n\n # Height of the mask.\n height: Var[str | int]\n\n # Units for the mask coordinates.\n mask_units: Var[str]\n\n # Units for the mask content coordinates.\n mask_content_units: Var[str]\n\n\nclass ForeignObject(BaseHTML):\n \"\"\"The SVG foreignObject component for embedding foreign content.\"\"\"\n\n tag = \"foreignObject\"\n\n # X coordinate of the foreign object.\n x: Var[str | int]\n\n # Y coordinate of the foreign object.\n y: Var[str | int]\n\n # Width of the foreign object.\n width: Var[str | int]\n\n # Height of the foreign object.\n height: Var[str | int]\n\n\nclass SvgA(BaseHTML):\n \"\"\"The SVG anchor component for creating links.\"\"\"\n\n tag = \"a\"\n\n # URL of the link.\n href: Var[str]\n\n # Where to open the linked resource.\n target: Var[str]\n\n # Download attribute for the link.\n download: Var[str]\n\n # Relationship between the current document and the linked resource.\n rel: Var[str]\n\n # Language of the linked resource.\n hreflang: Var[str]\n\n # MIME type of the linked resource.\n type: Var[str]\n\n # Referrer policy for the link.\n referrerpolicy: Var[str]\n\n\nclass Animate(BaseHTML):\n \"\"\"The SVG animate component for animations.\"\"\"\n\n tag = \"animate\"\n\n # Name of the attribute to animate.\n attribute_name: Var[str]\n\n # Starting value of the animation.\n from_: Var[str]\n\n # Ending value of the animation.\n to: Var[str]\n\n # Duration of the animation.\n dur: Var[str]\n\n # When the animation should begin.\n begin: Var[str]\n\n # When the animation should end.\n end: Var[str]\n\n # Number of times to repeat the animation.\n repeat_count: Var[str]\n\n # How values should be calculated during the animation.\n calc_mode: Var[str]\n\n # List of values for the animation.\n values: Var[str]\n\n # Key times for the animation values.\n key_times: Var[str]\n\n # Key splines for smooth transitions.\n key_splines: Var[str]\n\n # Whether animation values should accumulate.\n accumulate: Var[str]\n\n # Whether animation values should be additive.\n additive: Var[str]\n\n # Reference to the target element.\n href: Var[str]\n\n\nclass AnimateMotion(BaseHTML):\n \"\"\"The SVG animateMotion component for motion animations.\"\"\"\n\n tag = \"animateMotion\"\n\n # Path along which to animate.\n path: Var[str]\n\n # Duration of the animation.\n dur: Var[str]\n\n # When the animation should begin.\n begin: Var[str]\n\n # When the animation should end.\n end: Var[str]\n\n # Number of times to repeat the animation.\n repeat_count: Var[str]\n\n # Rotation behavior during motion.\n rotate: Var[str]\n\n # Key times for the motion.\n key_times: Var[str]\n\n # Key points along the path.\n key_points: Var[str]\n\n # Reference to the target element.\n href: Var[str]\n\n\nclass AnimateTransform(BaseHTML):\n \"\"\"The SVG animateTransform component for transform animations.\"\"\"\n\n tag = \"animateTransform\"\n\n # Name of the transform attribute to animate.\n attribute_name: Var[str]\n\n # Type of transformation.\n type: Var[str]\n\n # Starting value of the transformation.\n from_: Var[str]\n\n # Ending value of the transformation.\n to: Var[str]\n\n # Duration of the animation.\n dur: Var[str]\n\n # When the animation should begin.\n begin: Var[str]\n\n # When the animation should end.\n end: Var[str]\n\n # Number of times to repeat the animation.\n repeat_count: Var[str]\n\n # List of values for the transformation.\n values: Var[str]\n\n # Reference to the target element.\n href: Var[str]\n\n\nclass Set(BaseHTML):\n \"\"\"The SVG set component for setting attribute values.\"\"\"\n\n tag = \"set\"\n\n # Name of the attribute to set.\n attribute_name: Var[str]\n\n # Value to set the attribute to.\n to: Var[str]\n\n # When to set the attribute.\n begin: Var[str]\n\n # Duration for which to maintain the value.\n dur: Var[str]\n\n # When to end the setting.\n end: Var[str]\n\n # Reference to the target element.\n href: Var[str]\n\n\nclass MPath(BaseHTML):\n \"\"\"The SVG mpath component for motion path references.\"\"\"\n\n tag = \"mpath\"\n\n # Reference to a path element.\n href: Var[str]\n\n\nclass Desc(BaseHTML):\n \"\"\"The SVG desc component for descriptions.\"\"\"\n\n tag = \"desc\"\n\n\nclass Title(BaseHTML):\n \"\"\"The SVG title component for titles.\"\"\"\n\n tag = \"title\"\n\n\nclass Metadata(BaseHTML):\n \"\"\"The SVG metadata component for metadata.\"\"\"\n\n tag = \"metadata\"\n\n\nclass Script(BaseHTML):\n \"\"\"The SVG script component for scripts.\"\"\"\n\n tag = \"script\"\n\n # MIME type of the script.\n type: Var[str]\n\n # URL of external script.\n href: Var[str]\n\n # CORS settings for the script.\n crossorigin: Var[str]\n\n\nclass SvgStyle(BaseHTML):\n \"\"\"The SVG style component for stylesheets.\"\"\"\n\n tag = \"style\"\n\n # MIME type of the stylesheet.\n type: Var[str]\n\n # Media query for the stylesheet.\n media: Var[str]\n\n # Title of the stylesheet.\n title: Var[str]\n\n\nclass Switch(BaseHTML):\n \"\"\"The SVG switch component for conditional processing.\"\"\"\n\n tag = \"switch\"\n\n\nclass View(BaseHTML):\n \"\"\"The SVG view component for view definitions.\"\"\"\n\n tag = \"view\"\n\n # ViewBox definition for the view.\n view_box: Var[str]\n\n # How the view should scale to fit its viewport.\n preserve_aspect_ratio: Var[str]\n\n\nclass SVG(ComponentNamespace):\n \"\"\"SVG component namespace.\"\"\"\n\n text = staticmethod(Text.create)\n line = staticmethod(Line.create)\n circle = staticmethod(Circle.create)\n ellipse = staticmethod(Ellipse.create)\n rect = staticmethod(Rect.create)\n polygon = staticmethod(Polygon.create)\n polyline = staticmethod(Polyline.create)\n path = staticmethod(Path.create)\n stop = staticmethod(Stop.create)\n linear_gradient = staticmethod(LinearGradient.create)\n radial_gradient = staticmethod(RadialGradient.create)\n defs = staticmethod(Defs.create)\n marker = staticmethod(Marker.create)\n g = staticmethod(G.create)\n image = staticmethod(SvgImage.create)\n use = staticmethod(Use.create)\n tspan = staticmethod(TSpan.create)\n text_path = staticmethod(TextPath.create)\n pattern = staticmethod(Pattern.create)\n clip_path = staticmethod(ClipPath.create)\n symbol = staticmethod(Symbol.create)\n mask = staticmethod(Mask.create)\n foreign_object = staticmethod(ForeignObject.create)\n a = staticmethod(SvgA.create)\n animate = staticmethod(Animate.create)\n animate_motion = staticmethod(AnimateMotion.create)\n animate_transform = staticmethod(AnimateTransform.create)\n set = staticmethod(Set.create)\n mpath = staticmethod(MPath.create)\n desc = staticmethod(Desc.create)\n title = staticmethod(Title.create)\n metadata = staticmethod(Metadata.create)\n script = staticmethod(Script.create)\n style = staticmethod(SvgStyle.create)\n switch = staticmethod(Switch.create)\n view = staticmethod(View.create)\n __call__ = staticmethod(Svg.create)\n\n\ntext = Text.create\nline = Line.create\ncircle = Circle.create\nellipse = Ellipse.create\nrect = Rect.create\npolygon = Polygon.create\npolyline = Polyline.create\npath = Path.create\nstop = Stop.create\nlinear_gradient = LinearGradient.create\nradial_gradient = RadialGradient.create\ndefs = Defs.create\nmarker = Marker.create\ng = G.create\nuse = Use.create\ntspan = TSpan.create\ntext_path = TextPath.create\npattern = Pattern.create\nclip_path = ClipPath.create\nsymbol = Symbol.create\nmask = Mask.create\nforeign_object = ForeignObject.create\nanimate = Animate.create\nanimate_motion = AnimateMotion.create\nanimate_transform = AnimateTransform.create\nset_svg = Set.create\nmpath = MPath.create\ndesc = Desc.create\nmetadata = Metadata.create\nswitch = Switch.create\nview = View.create\narea = Area.create\naudio = Audio.create\nimage = img = Img.create\nmap = Map.create\ntrack = Track.create\nvideo = Video.create\nembed = Embed.create\niframe = Iframe.create\nobject = Object.create\npicture = Picture.create\nportal = Portal.create\nsource = Source.create\nsvg = SVG()\n" }, { "path": "reflex/components/el/elements/metadata.py", "content": "\"\"\"Metadata classes.\"\"\"\n\nfrom reflex.components.el.element import Element\nfrom reflex.components.el.elements.inline import ReferrerPolicy\nfrom reflex.components.el.elements.media import CrossOrigin\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\n\nclass Base(BaseHTML):\n \"\"\"Display the base element.\"\"\"\n\n tag = \"base\"\n\n href: Var[str]\n target: Var[str]\n\n\nclass Head(BaseHTML):\n \"\"\"Display the head element.\"\"\"\n\n tag = \"head\"\n\n\nclass Link(BaseHTML):\n \"\"\"Display the link element.\"\"\"\n\n tag = \"link\"\n\n # Specifies the CORS settings for the linked resource\n cross_origin: Var[CrossOrigin]\n\n # Specifies the URL of the linked document/resource\n href: Var[str]\n\n # Specifies the language of the text in the linked document\n href_lang: Var[str]\n\n # Allows a browser to check the fetched link for integrity\n integrity: Var[str]\n\n # Specifies on what device the linked document will be displayed\n media: Var[str]\n\n # Specifies the referrer policy of the linked document\n referrer_policy: Var[ReferrerPolicy]\n\n # Specifies the relationship between the current document and the linked one\n rel: Var[str]\n\n # Specifies the sizes of icons for visual media\n sizes: Var[str]\n\n # Specifies the MIME type of the linked document\n type: Var[str]\n\n\nclass Meta(BaseHTML): # Inherits common attributes from BaseHTML\n \"\"\"Display the meta element.\"\"\"\n\n tag = \"meta\" # The HTML tag for this element is \n\n # Specifies the character encoding for the HTML document\n char_set: Var[str]\n\n # Defines the content of the metadata\n content: Var[str]\n\n # Provides an HTTP header for the information/value of the content attribute\n http_equiv: Var[str]\n\n # Specifies a name for the metadata\n name: Var[str]\n\n # The type of metadata value.\n property: Var[str]\n\n\nclass Title(Element):\n \"\"\"Display the title element.\"\"\"\n\n tag = \"title\"\n\n\n# Had to be named with an underscore so it doesn't conflict with reflex.style Style in pyi\nclass StyleEl(Element):\n \"\"\"Display the style element.\"\"\"\n\n tag = \"style\"\n\n media: Var[str]\n\n suppress_hydration_warning: Var[bool] = Var.create(True)\n\n\nbase = Base.create\nhead = Head.create\nlink = Link.create\nmeta = Meta.create\ntitle = Title.create\nstyle = StyleEl.create\n" }, { "path": "reflex/components/el/elements/other.py", "content": "\"\"\"Other classes.\"\"\"\n\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\n\nclass Details(BaseHTML):\n \"\"\"Display the details element.\"\"\"\n\n tag = \"details\"\n\n # Indicates whether the details will be visible (expanded) to the user\n open: Var[bool]\n\n\nclass Dialog(BaseHTML):\n \"\"\"Display the dialog element.\"\"\"\n\n tag = \"dialog\"\n\n # Indicates whether the dialog is active and can be interacted with\n open: Var[bool]\n\n\nclass Summary(BaseHTML):\n \"\"\"Display the summary element.\n\n Used as a summary or caption for a
element.\n \"\"\"\n\n tag = \"summary\"\n\n\nclass Slot(BaseHTML):\n \"\"\"Display the slot element.\n\n Used as a placeholder inside a web component.\n \"\"\"\n\n tag = \"slot\"\n\n\nclass Template(BaseHTML):\n \"\"\"Display the template element.\n\n Used for declaring fragments of HTML that can be cloned and inserted in the document.\n \"\"\"\n\n tag = \"template\"\n\n\nclass Math(BaseHTML):\n \"\"\"Display the math element.\n\n Represents a mathematical expression.\n \"\"\"\n\n tag = \"math\"\n\n\nclass Html(BaseHTML):\n \"\"\"Display the html element.\"\"\"\n\n tag = \"html\"\n\n # Specifies the URL of the document's cache manifest (obsolete in HTML5)\n manifest: Var[str]\n\n\ndetails = Details.create\ndialog = Dialog.create\nsummary = Summary.create\nslot = Slot.create\ntemplate = Template.create\nmath = Math.create\nhtml = Html.create\n" }, { "path": "reflex/components/el/elements/scripts.py", "content": "\"\"\"Scripts classes.\"\"\"\n\nfrom reflex.components.el.elements.inline import ReferrerPolicy\nfrom reflex.components.el.elements.media import CrossOrigin\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\n\nclass Canvas(BaseHTML):\n \"\"\"Display the canvas element.\"\"\"\n\n tag = \"canvas\"\n\n\nclass Noscript(BaseHTML):\n \"\"\"Display the noscript element.\"\"\"\n\n tag = \"noscript\"\n\n\nclass Script(BaseHTML):\n \"\"\"Display the script element.\"\"\"\n\n tag = \"script\"\n\n # Indicates that the script should be executed asynchronously\n async_: Var[bool]\n\n # Character encoding of the external script\n char_set: Var[str]\n\n # Configures the CORS requests for the script\n cross_origin: Var[CrossOrigin]\n\n # Indicates that the script should be executed after the page has finished parsing\n defer: Var[bool]\n\n # Security feature allowing browsers to verify what they fetch\n integrity: Var[str]\n\n # Specifies which referrer information to send when fetching the script\n referrer_policy: Var[ReferrerPolicy]\n\n # URL of an external script\n src: Var[str]\n\n # Specifies the MIME type of the script\n type: Var[str]\n\n\ncanvas = Canvas.create\nnoscript = Noscript.create\nscript = Script.create\n" }, { "path": "reflex/components/el/elements/sectioning.py", "content": "\"\"\"Sectioning classes.\"\"\"\n\nfrom .base import BaseHTML\n\n\nclass Body(BaseHTML):\n \"\"\"Display the body element.\"\"\"\n\n tag = \"body\"\n\n\nclass Address(BaseHTML):\n \"\"\"Display the address element.\"\"\"\n\n tag = \"address\"\n\n\nclass Article(BaseHTML):\n \"\"\"Display the article element.\"\"\"\n\n tag = \"article\"\n\n\nclass Aside(BaseHTML):\n \"\"\"Display the aside element.\"\"\"\n\n tag = \"aside\"\n\n\nclass Footer(BaseHTML):\n \"\"\"Display the footer element.\"\"\"\n\n tag = \"footer\"\n\n\nclass Header(BaseHTML):\n \"\"\"Display the header element.\"\"\"\n\n tag = \"header\"\n\n\nclass H1(BaseHTML):\n \"\"\"Display the h1 element.\"\"\"\n\n tag = \"h1\"\n\n\nclass H2(BaseHTML):\n \"\"\"Display the h1 element.\"\"\"\n\n tag = \"h2\"\n\n\nclass H3(BaseHTML):\n \"\"\"Display the h1 element.\"\"\"\n\n tag = \"h3\"\n\n\nclass H4(BaseHTML):\n \"\"\"Display the h1 element.\"\"\"\n\n tag = \"h4\"\n\n\nclass H5(BaseHTML):\n \"\"\"Display the h1 element.\"\"\"\n\n tag = \"h5\"\n\n\nclass H6(BaseHTML):\n \"\"\"Display the h1 element.\"\"\"\n\n tag = \"h6\"\n\n\nclass Main(BaseHTML):\n \"\"\"Display the main element.\"\"\"\n\n tag = \"main\"\n\n\nclass Nav(BaseHTML):\n \"\"\"Display the nav element.\"\"\"\n\n tag = \"nav\"\n\n\nclass Section(BaseHTML):\n \"\"\"Display the section element.\"\"\"\n\n tag = \"section\"\n\n\naddress = Address.create\narticle = Article.create\naside = Aside.create\nbody = Body.create\nheader = Header.create\nfooter = Footer.create\nh1 = H1.create\nh2 = H2.create\nh3 = H3.create\nh4 = H4.create\nh5 = H5.create\nh6 = H6.create\nmain = Main.create\nnav = Nav.create\nsection = Section.create\n" }, { "path": "reflex/components/el/elements/tables.py", "content": "\"\"\"Tables classes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\n\nclass Caption(BaseHTML):\n \"\"\"Display the caption element.\"\"\"\n\n tag = \"caption\"\n\n\nclass Col(BaseHTML):\n \"\"\"Display the col element.\"\"\"\n\n tag = \"col\"\n\n # Number of columns the col element spans\n span: Var[int]\n\n\nclass Colgroup(BaseHTML):\n \"\"\"Display the colgroup element.\"\"\"\n\n tag = \"colgroup\"\n\n # Number of columns the colgroup element spans\n span: Var[int]\n\n\nclass Table(BaseHTML):\n \"\"\"Display the table element.\"\"\"\n\n tag = \"table\"\n\n # Alignment of the table\n align: Var[Literal[\"left\", \"center\", \"right\"]]\n\n # Provides a summary of the table's purpose and structure\n summary: Var[str]\n\n\nclass Tbody(BaseHTML):\n \"\"\"Display the tbody element.\"\"\"\n\n tag = \"tbody\"\n\n\nclass Td(BaseHTML):\n \"\"\"Display the td element.\"\"\"\n\n tag = \"td\"\n\n # Alignment of the content within the table cell\n align: Var[Literal[\"left\", \"center\", \"right\", \"justify\", \"char\"]]\n\n # Number of columns a cell should span\n col_span: Var[int]\n\n # IDs of the headers associated with this cell\n headers: Var[str]\n\n # Number of rows a cell should span\n row_span: Var[int]\n\n\nclass Tfoot(BaseHTML):\n \"\"\"Display the tfoot element.\"\"\"\n\n tag = \"tfoot\"\n\n\nclass Th(BaseHTML):\n \"\"\"Display the th element.\"\"\"\n\n tag = \"th\"\n\n # Alignment of the content within the table header cell\n align: Var[Literal[\"left\", \"center\", \"right\", \"justify\", \"char\"]]\n\n # Number of columns a header cell should span\n col_span: Var[int]\n\n # IDs of the headers associated with this header cell\n headers: Var[str]\n\n # Number of rows a header cell should span\n row_span: Var[int]\n\n # Scope of the header cell (row, col, rowgroup, colgroup)\n scope: Var[str]\n\n\nclass Thead(BaseHTML):\n \"\"\"Display the thead element.\"\"\"\n\n tag = \"thead\"\n\n\nclass Tr(BaseHTML):\n \"\"\"Display the tr element.\"\"\"\n\n tag = \"tr\"\n\n\ncaption = Caption.create\ncol = Col.create\ncolgroup = Colgroup.create\ntable = Table.create\ntbody = Tbody.create\ntd = Td.create\ntfoot = Tfoot.create\nth = Th.create\nthead = Thead.create\ntr = Tr.create\n" }, { "path": "reflex/components/el/elements/typography.py", "content": "\"\"\"Typography classes.\"\"\"\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.vars.base import Var\n\nfrom .base import BaseHTML\n\n\nclass Blockquote(BaseHTML):\n \"\"\"Display the blockquote element.\"\"\"\n\n tag = \"blockquote\"\n\n # Define the title of a work.\n cite: Var[str]\n\n\nclass Dd(BaseHTML):\n \"\"\"Display the dd element.\"\"\"\n\n tag = \"dd\"\n\n\nclass Div(BaseHTML):\n \"\"\"Display the div element.\"\"\"\n\n tag = \"div\"\n\n\nclass Dl(BaseHTML):\n \"\"\"Display the dl element.\"\"\"\n\n tag = \"dl\"\n\n\nclass Dt(BaseHTML):\n \"\"\"Display the dt element.\"\"\"\n\n tag = \"dt\"\n\n\nclass Figcaption(BaseHTML):\n \"\"\"Display the figcaption element.\"\"\"\n\n tag = \"figcaption\"\n\n\nclass Figure(BaseHTML):\n \"\"\"Display the figure element.\"\"\"\n\n tag = \"figure\"\n\n\nclass Hr(BaseHTML):\n \"\"\"Display the hr element.\"\"\"\n\n tag = \"hr\"\n\n\nclass Li(BaseHTML):\n \"\"\"Display the li element.\"\"\"\n\n tag = \"li\"\n\n\nclass Menu(BaseHTML):\n \"\"\"Display the menu element.\"\"\"\n\n tag = \"menu\"\n\n # Specifies that the menu element is a context menu.\n type: Var[str]\n\n\nclass Ol(BaseHTML):\n \"\"\"Display the ol element.\"\"\"\n\n tag = \"ol\"\n\n # Reverses the order of the list.\n reversed: Var[bool]\n\n # Specifies the start value of the first list item in an ordered list.\n start: Var[int]\n\n # Specifies the kind of marker to use in the list (letters or numbers).\n type: Var[Literal[\"1\", \"a\", \"A\", \"i\", \"I\"]]\n\n\nclass P(BaseHTML):\n \"\"\"Display the p element.\"\"\"\n\n tag = \"p\"\n\n _invalid_children: ClassVar[list] = [\"P\", \"Ol\", \"Ul\", \"Div\"]\n\n\nclass Pre(BaseHTML):\n \"\"\"Display the pre element.\"\"\"\n\n tag = \"pre\"\n\n\nclass Ul(BaseHTML):\n \"\"\"Display the ul element.\"\"\"\n\n tag = \"ul\"\n\n\nclass Ins(BaseHTML):\n \"\"\"Display the ins element.\"\"\"\n\n tag = \"ins\"\n\n # Specifies the URL of the document that explains the reason why the text was inserted/changed.\n cite: Var[str]\n\n # Specifies the date and time of when the text was inserted/changed.\n date_time: Var[str]\n\n\nclass Del(BaseHTML):\n \"\"\"Display the del element.\"\"\"\n\n tag = \"del\"\n\n # Specifies the URL of the document that explains the reason why the text was deleted.\n cite: Var[str]\n\n # Specifies the date and time of when the text was deleted.\n date_time: Var[str]\n\n\nblockquote = Blockquote.create\ndd = Dd.create\ndiv = Div.create\ndl = Dl.create\ndt = Dt.create\nfigcaption = Figcaption.create\nfigure = Figure.create\nhr = Hr.create\nli = Li.create\nol = Ol.create\np = P.create\npre = Pre.create\nul = Ul.create\nins = Ins.create\ndel_ = Del.create # 'del' is a reserved keyword in Python\n" }, { "path": "reflex/components/field.py", "content": "\"\"\"Shared field infrastructure for components and props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Callable\nfrom dataclasses import _MISSING_TYPE, MISSING\nfrom typing import Annotated, Any, Generic, TypeVar, get_origin\n\nfrom reflex.utils import types\nfrom reflex.utils.compat import annotations_from_namespace\n\nFIELD_TYPE = TypeVar(\"FIELD_TYPE\")\n\n\nclass BaseField(Generic[FIELD_TYPE]):\n \"\"\"Base field class used by internal metadata classes.\"\"\"\n\n def __init__(\n self,\n default: FIELD_TYPE | _MISSING_TYPE = MISSING,\n default_factory: Callable[[], FIELD_TYPE] | None = None,\n annotated_type: type[Any] | _MISSING_TYPE = MISSING,\n ) -> None:\n \"\"\"Initialize the field.\n\n Args:\n default: The default value for the field.\n default_factory: The default factory for the field.\n annotated_type: The annotated type for the field.\n \"\"\"\n self.default = default\n self.default_factory = default_factory\n self.outer_type_ = self.annotated_type = annotated_type\n\n # Process type annotation\n type_origin = get_origin(annotated_type) or annotated_type\n if type_origin is Annotated:\n type_origin = annotated_type.__origin__ # pyright: ignore [reportAttributeAccessIssue]\n # For Annotated types, use the actual type inside the annotation\n self.type_ = annotated_type\n else:\n # For other types (including Union), preserve the original type\n self.type_ = annotated_type\n self.type_origin = type_origin\n\n def default_value(self) -> FIELD_TYPE:\n \"\"\"Get the default value for the field.\n\n Returns:\n The default value for the field.\n\n Raises:\n ValueError: If no default value or factory is provided.\n \"\"\"\n if self.default is not MISSING:\n return self.default\n if self.default_factory is not None:\n return self.default_factory()\n msg = \"No default value or factory provided.\"\n raise ValueError(msg)\n\n\nclass FieldBasedMeta(type):\n \"\"\"Shared metaclass for field-based classes like components and props.\n\n Provides common field inheritance and processing logic for both\n PropsBaseMeta and BaseComponentMeta.\n \"\"\"\n\n def __new__(\n cls, name: str, bases: tuple[type, ...], namespace: dict[str, Any]\n ) -> type:\n \"\"\"Create a new field-based class.\n\n Args:\n name: The name of the class.\n bases: The base classes.\n namespace: The class namespace.\n\n Returns:\n The new class.\n \"\"\"\n # Collect inherited fields from base classes\n inherited_fields = cls._collect_inherited_fields(bases)\n\n # Get annotations from the namespace\n annotations = cls._resolve_annotations(namespace, name)\n\n # Process field overrides (fields with values but no annotations)\n own_fields = cls._process_field_overrides(\n namespace, annotations, inherited_fields\n )\n\n # Process annotated fields\n own_fields.update(\n cls._process_annotated_fields(namespace, annotations, inherited_fields)\n )\n\n # Finalize fields and store on class\n cls._finalize_fields(namespace, inherited_fields, own_fields)\n\n return super().__new__(cls, name, bases, namespace)\n\n @classmethod\n def _collect_inherited_fields(cls, bases: tuple[type, ...]) -> dict[str, Any]:\n inherited_fields: dict[str, Any] = {}\n\n # Collect inherited fields from base classes\n for base in bases[::-1]:\n if hasattr(base, \"_inherited_fields\"):\n inherited_fields.update(base._inherited_fields)\n for base in bases[::-1]:\n if hasattr(base, \"_own_fields\"):\n inherited_fields.update(base._own_fields)\n\n return inherited_fields\n\n @classmethod\n def _resolve_annotations(\n cls, namespace: dict[str, Any], name: str\n ) -> dict[str, Any]:\n return types.resolve_annotations(\n annotations_from_namespace(namespace),\n namespace[\"__module__\"],\n )\n\n @classmethod\n def _process_field_overrides(\n cls,\n namespace: dict[str, Any],\n annotations: dict[str, Any],\n inherited_fields: dict[str, Any],\n ) -> dict[str, Any]:\n own_fields: dict[str, Any] = {}\n\n for key, value in namespace.items():\n if key not in annotations and key in inherited_fields:\n inherited_field = inherited_fields[key]\n new_field = cls._create_field(\n annotated_type=inherited_field.annotated_type,\n default=value,\n default_factory=None,\n )\n own_fields[key] = new_field\n\n return own_fields\n\n @classmethod\n def _process_annotated_fields(\n cls,\n namespace: dict[str, Any],\n annotations: dict[str, Any],\n inherited_fields: dict[str, Any],\n ) -> dict[str, Any]:\n raise NotImplementedError\n\n @classmethod\n def _create_field(\n cls,\n annotated_type: Any,\n default: Any = MISSING,\n default_factory: Callable[[], Any] | None = None,\n ) -> Any:\n raise NotImplementedError\n\n @classmethod\n def _finalize_fields(\n cls,\n namespace: dict[str, Any],\n inherited_fields: dict[str, Any],\n own_fields: dict[str, Any],\n ) -> None:\n # Combine all fields\n all_fields = inherited_fields | own_fields\n\n # Set field names for compatibility\n for field_name, field in all_fields.items():\n field._name = field_name\n\n # Store field mappings on the class\n namespace[\"_own_fields\"] = own_fields\n namespace[\"_inherited_fields\"] = inherited_fields\n namespace[\"_fields\"] = all_fields\n" }, { "path": "reflex/components/gridjs/__init__.py", "content": "\"\"\"Grid components.\"\"\"\n\nfrom .datatable import DataTable\n\ndata_table = DataTable.create\n" }, { "path": "reflex/components/gridjs/datatable.py", "content": "\"\"\"Table components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any\n\nfrom reflex.components.component import NoSSRComponent\nfrom reflex.components.tags import Tag\nfrom reflex.utils import types\nfrom reflex.utils.imports import ImportDict\nfrom reflex.utils.serializers import serialize\nfrom reflex.vars.base import LiteralVar, Var, is_computed_var\n\n\nclass Gridjs(NoSSRComponent):\n \"\"\"A component that wraps a nivo bar component.\"\"\"\n\n library = \"gridjs-react@6.1.1\"\n\n lib_dependencies: list[str] = [\"gridjs@6.2.0\"]\n\n\nclass DataTable(Gridjs):\n \"\"\"A data table component.\"\"\"\n\n tag = \"Grid\"\n\n alias = \"DataTableGrid\"\n\n # The data to display. Either a list of lists or a pandas dataframe.\n data: Any\n\n # The list of columns to display. Required if data is a list and should not be provided\n # if the data field is a dataframe\n columns: Var[Sequence]\n\n # Enable a search bar.\n search: Var[bool]\n\n # Enable sorting on columns.\n sort: Var[bool]\n\n # Enable resizable columns.\n resizable: Var[bool]\n\n # Enable pagination.\n pagination: Var[bool | dict]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a datatable component.\n\n Args:\n *children: The children of the component.\n **props: The props to pass to the component.\n\n Returns:\n The datatable component.\n\n Raises:\n ValueError: If a pandas dataframe is passed in and columns are also provided.\n \"\"\"\n data = props.get(\"data\")\n columns = props.get(\"columns\")\n\n # The annotation should be provided if data is a computed var. We need this to know how to\n # render pandas dataframes.\n if is_computed_var(data) and data._var_type == Any:\n msg = \"Annotation of the computed var assigned to the data field should be provided.\"\n raise ValueError(msg)\n\n if (\n columns is not None\n and is_computed_var(columns)\n and columns._var_type == Any\n ):\n msg = \"Annotation of the computed var assigned to the column field should be provided.\"\n raise ValueError(msg)\n\n # If data is a pandas dataframe and columns are provided throw an error.\n if (\n types.is_dataframe(type(data))\n or (isinstance(data, Var) and types.is_dataframe(data._var_type))\n ) and columns is not None:\n msg = \"Cannot pass in both a pandas dataframe and columns to the data_table component.\"\n raise ValueError(msg)\n\n # If data is a list and columns are not provided, throw an error\n if (\n (isinstance(data, Var) and types.typehint_issubclass(data._var_type, list))\n or isinstance(data, list)\n ) and columns is None:\n msg = \"column field should be specified when the data field is a list type\"\n raise ValueError(msg)\n\n # Create the component.\n return super().create(\n *children,\n **props,\n )\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add the imports for the datatable component.\n\n Returns:\n The import dict for the component.\n \"\"\"\n return {\"\": \"gridjs/dist/theme/mermaid.css\"}\n\n def _render(self) -> Tag:\n if isinstance(self.data, Var) and types.is_dataframe(self.data._var_type):\n self.columns = self.data._replace(\n _js_expr=f\"{self.data._js_expr}.columns\",\n _var_type=list[Any],\n )\n self.data = self.data._replace(\n _js_expr=f\"{self.data._js_expr}.data\",\n _var_type=list[list[Any]],\n )\n if types.is_dataframe(type(self.data)):\n # If given a pandas df break up the data and columns\n data = serialize(self.data)\n if not isinstance(data, dict):\n msg = \"Serialized dataframe should be a dict.\"\n raise ValueError(msg)\n self.columns = LiteralVar.create(data[\"columns\"])\n self.data = LiteralVar.create(data[\"data\"])\n\n # Render the table.\n return super()._render()\n" }, { "path": "reflex/components/literals.py", "content": "\"\"\"Literal custom type used by Reflex.\"\"\"\n\nfrom typing import Literal\n\n# Base Literals\nLiteralInputType = Literal[\n \"button\",\n \"checkbox\",\n \"color\",\n \"date\",\n \"datetime-local\",\n \"email\",\n \"file\",\n \"hidden\",\n \"image\",\n \"month\",\n \"number\",\n \"password\",\n \"radio\",\n \"range\",\n \"reset\",\n \"search\",\n \"submit\",\n \"tel\",\n \"text\",\n \"time\",\n \"url\",\n \"week\",\n]\n\n\nLiteralRowMarker = Literal[\n \"none\", \"number\", \"checkbox\", \"both\", \"checkbox-visible\", \"clickable-number\"\n]\n" }, { "path": "reflex/components/lucide/__init__.py", "content": "\"\"\"Lucide Icon Component.\"\"\"\n\nfrom .icon import Icon\n\nicon = Icon.create\n" }, { "path": "reflex/components/lucide/icon.py", "content": "\"\"\"Lucide Icon component.\"\"\"\n\nfrom reflex.components.component import Component\nfrom reflex.utils import console, format\nfrom reflex.utils.imports import ImportVar\nfrom reflex.vars.base import LiteralVar, Var\nfrom reflex.vars.sequence import LiteralStringVar, StringVar\n\nLUCIDE_LIBRARY = \"lucide-react@0.577.0\"\n\n\nclass LucideIconComponent(Component):\n \"\"\"Lucide Icon Component.\"\"\"\n\n library = LUCIDE_LIBRARY\n\n\nclass Icon(LucideIconComponent):\n \"\"\"An Icon component.\"\"\"\n\n tag = \"None\"\n\n # The size of the icon in pixels.\n size: Var[int]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Initialize the Icon component.\n\n Run some additional checks on Icon component.\n\n Args:\n *children: The positional arguments\n **props: The keyword arguments\n\n Returns:\n The created component.\n\n Raises:\n AttributeError: The errors tied to bad usage of the Icon component.\n TypeError: If the icon name is not a string.\n \"\"\"\n if children:\n if len(children) == 1:\n child = Var.create(children[0]).guess_type()\n if not isinstance(child, StringVar):\n msg = f\"Icon name must be a string, got {children[0]._var_type if isinstance(children[0], Var) else children[0]}\"\n raise AttributeError(msg)\n props[\"tag\"] = children[0]\n else:\n msg = f\"Passing multiple children to Icon component is not allowed: remove positional arguments {children[1:]} to fix\"\n raise AttributeError(msg)\n if \"tag\" not in props:\n msg = \"Missing 'tag' keyword-argument for Icon\"\n raise AttributeError(msg)\n\n tag_var: Var | LiteralVar = Var.create(props.pop(\"tag\"))\n if isinstance(tag_var, LiteralVar):\n if isinstance(tag_var, LiteralStringVar):\n tag = format.to_snake_case(tag_var._var_value.lower())\n else:\n msg = f\"Icon name must be a string, got {type(tag_var)}\"\n raise TypeError(msg)\n elif isinstance(tag_var, Var):\n tag_stringified = tag_var.guess_type()\n if not isinstance(tag_stringified, StringVar):\n msg = f\"Icon name must be a string, got {tag_var._var_type}\"\n raise TypeError(msg)\n return DynamicIcon.create(name=tag_stringified.replace(\"_\", \"-\"), **props)\n\n if tag not in LUCIDE_ICON_LIST:\n icons_sorted = sorted(\n LUCIDE_ICON_LIST,\n key=lambda s, tag=tag: format.length_of_largest_common_substring(\n tag, s\n ),\n reverse=True,\n )\n console.warn(\n f\"Invalid icon tag: {tag}. Please use one of the following: {', '.join(icons_sorted[0:10])}, ...\"\n \"\\nSee full list at https://reflex.dev/docs/library/data-display/icon/#icons-list. Using 'circle_help' icon instead.\"\n )\n tag = \"circle_help\"\n\n props[\"tag\"] = LUCIDE_ICON_MAPPING_OVERRIDE.get(tag, format.to_title_case(tag))\n props[\"alias\"] = f\"Lucide{props['tag']}\"\n return super().create(**props)\n\n\nclass DynamicIcon(LucideIconComponent):\n \"\"\"A DynamicIcon component.\"\"\"\n\n tag = \"DynamicIcon\"\n\n name: Var[str]\n size: Var[int]\n\n def _get_imports(self):\n imports_ = super()._get_imports()\n if self.library:\n imports_.pop(self.library)\n imports_[LUCIDE_LIBRARY] = [\n ImportVar(\"DynamicIcon\", package_path=\"/dynamic.mjs\")\n ]\n return imports_\n\n\nLUCIDE_ICON_LIST = [\n \"a_arrow_down\",\n \"a_arrow_up\",\n \"a_large_small\",\n \"accessibility\",\n \"activity\",\n \"air_vent\",\n \"airplay\",\n \"alarm_clock_check\",\n \"alarm_clock_minus\",\n \"alarm_clock_off\",\n \"alarm_clock_plus\",\n \"alarm_clock\",\n \"alarm_smoke\",\n \"album\",\n \"align_center_horizontal\",\n \"align_center_vertical\",\n \"align_center\",\n \"align_end_horizontal\",\n \"align_end_vertical\",\n \"align_horizontal_distribute_center\",\n \"align_horizontal_distribute_end\",\n \"align_horizontal_distribute_start\",\n \"align_horizontal_justify_center\",\n \"align_horizontal_justify_end\",\n \"align_horizontal_justify_start\",\n \"align_horizontal_space_around\",\n \"align_horizontal_space_between\",\n \"align_justify\",\n \"align_left\",\n \"align_right\",\n \"align_start_horizontal\",\n \"align_start_vertical\",\n \"align_vertical_distribute_center\",\n \"align_vertical_distribute_end\",\n \"align_vertical_distribute_start\",\n \"align_vertical_justify_center\",\n \"align_vertical_justify_end\",\n \"align_vertical_justify_start\",\n \"align_vertical_space_around\",\n \"align_vertical_space_between\",\n \"ambulance\",\n \"ampersand\",\n \"ampersands\",\n \"amphora\",\n \"anchor\",\n \"angry\",\n \"annoyed\",\n \"antenna\",\n \"anvil\",\n \"aperture\",\n \"app_window_mac\",\n \"app_window\",\n \"apple\",\n \"archive_restore\",\n \"archive_x\",\n \"archive\",\n \"area_chart\",\n \"armchair\",\n \"arrow_big_down_dash\",\n \"arrow_big_down\",\n \"arrow_big_left_dash\",\n \"arrow_big_left\",\n \"arrow_big_right_dash\",\n \"arrow_big_right\",\n \"arrow_big_up_dash\",\n \"arrow_big_up\",\n \"arrow_down_0_1\",\n \"arrow_down_1_0\",\n \"arrow_down_a_z\",\n \"arrow_down_from_line\",\n \"arrow_down_left\",\n \"arrow_down_narrow_wide\",\n \"arrow_down_right\",\n \"arrow_down_to_dot\",\n \"arrow_down_to_line\",\n \"arrow_down_up\",\n \"arrow_down_wide_narrow\",\n \"arrow_down_z_a\",\n \"arrow_down\",\n \"arrow_left_from_line\",\n \"arrow_left_right\",\n \"arrow_left_to_line\",\n \"arrow_left\",\n \"arrow_right_from_line\",\n \"arrow_right_left\",\n \"arrow_right_to_line\",\n \"arrow_right\",\n \"arrow_up_0_1\",\n \"arrow_up_1_0\",\n \"arrow_up_a_z\",\n \"arrow_up_down\",\n \"arrow_up_from_dot\",\n \"arrow_up_from_line\",\n \"arrow_up_left\",\n \"arrow_up_narrow_wide\",\n \"arrow_up_right\",\n \"arrow_up_to_line\",\n \"arrow_up_wide_narrow\",\n \"arrow_up_z_a\",\n \"arrow_up\",\n \"arrows_up_from_line\",\n \"asterisk\",\n \"at_sign\",\n \"atom\",\n \"audio_lines\",\n \"audio_waveform\",\n \"award\",\n \"axe\",\n \"axis_3d\",\n \"baby\",\n \"backpack\",\n \"badge_alert\",\n \"badge_cent\",\n \"badge_check\",\n \"badge_dollar_sign\",\n \"badge_euro\",\n \"badge_help\",\n \"badge_indian_rupee\",\n \"badge_info\",\n \"badge_japanese_yen\",\n \"badge_minus\",\n \"badge_percent\",\n \"badge_plus\",\n \"badge_pound_sterling\",\n \"badge_russian_ruble\",\n \"badge_swiss_franc\",\n \"badge_turkish_lira\",\n \"badge_x\",\n \"badge\",\n \"baggage_claim\",\n \"balloon\",\n \"ban\",\n \"banana\",\n \"bandage\",\n \"banknote_arrow_down\",\n \"banknote_x\",\n \"banknote\",\n \"bar_chart_2\",\n \"bar_chart_3\",\n \"bar_chart_4\",\n \"bar_chart_big\",\n \"bar_chart_horizontal_big\",\n \"bar_chart_horizontal\",\n \"bar_chart\",\n \"barcode\",\n \"barrel\",\n \"baseline\",\n \"bath\",\n \"battery_charging\",\n \"battery_full\",\n \"battery_low\",\n \"battery_medium\",\n \"battery_plus\",\n \"battery_warning\",\n \"battery\",\n \"beaker\",\n \"bean_off\",\n \"bean\",\n \"bed_double\",\n \"bed_single\",\n \"bed\",\n \"beef\",\n \"beer_off\",\n \"beer\",\n \"bell_dot\",\n \"bell_electric\",\n \"bell_minus\",\n \"bell_off\",\n \"bell_plus\",\n \"bell_ring\",\n \"bell\",\n \"between_horizontal_end\",\n \"between_horizontal_start\",\n \"between_vertical_end\",\n \"between_vertical_start\",\n \"biceps_flexed\",\n \"bike\",\n \"binary\",\n \"binoculars\",\n \"biohazard\",\n \"bird\",\n \"birdhouse\",\n \"bitcoin\",\n \"blend\",\n \"blinds\",\n \"blocks\",\n \"bluetooth_connected\",\n \"bluetooth_off\",\n \"bluetooth_searching\",\n \"bluetooth\",\n \"bold\",\n \"bolt\",\n \"bomb\",\n \"bone\",\n \"book_a\",\n \"book_alert\",\n \"book_audio\",\n \"book_check\",\n \"book_copy\",\n \"book_dashed\",\n \"book_down\",\n \"book_headphones\",\n \"book_heart\",\n \"book_image\",\n \"book_key\",\n \"book_lock\",\n \"book_marked\",\n \"book_minus\",\n \"book_open_check\",\n \"book_open_text\",\n \"book_open\",\n \"book_plus\",\n \"book_search\",\n \"book_text\",\n \"book_type\",\n \"book_up_2\",\n \"book_up\",\n \"book_user\",\n \"book_x\",\n \"book\",\n \"bookmark_check\",\n \"bookmark_minus\",\n \"bookmark_plus\",\n \"bookmark_x\",\n \"bookmark\",\n \"boom_box\",\n \"bot_message_square\",\n \"bot_off\",\n \"bot\",\n \"bottle_wine\",\n \"bow_arrow\",\n \"box_select\",\n \"box\",\n \"boxes\",\n \"braces\",\n \"brackets\",\n \"brain_circuit\",\n \"brain_cog\",\n \"brain\",\n \"brick_wall_fire\",\n \"brick_wall_shield\",\n \"brick_wall\",\n \"briefcase_business\",\n \"briefcase_conveyor_belt\",\n \"briefcase_medical\",\n \"briefcase\",\n \"bring_to_front\",\n \"brush_cleaning\",\n \"brush\",\n \"bubbles\",\n \"bug_off\",\n \"bug_play\",\n \"bug\",\n \"building_2\",\n \"building\",\n \"bus_front\",\n \"bus\",\n \"cable_car\",\n \"cable\",\n \"cake_slice\",\n \"cake\",\n \"calculator\",\n \"calendar_1\",\n \"calendar_arrow_down\",\n \"calendar_arrow_up\",\n \"calendar_check_2\",\n \"calendar_check\",\n \"calendar_clock\",\n \"calendar_cog\",\n \"calendar_days\",\n \"calendar_fold\",\n \"calendar_heart\",\n \"calendar_minus_2\",\n \"calendar_minus\",\n \"calendar_off\",\n \"calendar_plus_2\",\n \"calendar_plus\",\n \"calendar_range\",\n \"calendar_search\",\n \"calendar_sync\",\n \"calendar_x_2\",\n \"calendar_x\",\n \"calendar\",\n \"calendars\",\n \"camera_off\",\n \"camera\",\n \"candlestick_chart\",\n \"candy_cane\",\n \"candy_off\",\n \"candy\",\n \"cannabis_off\",\n \"cannabis\",\n \"captions_off\",\n \"captions\",\n \"car_front\",\n \"car_taxi_front\",\n \"car\",\n \"caravan\",\n \"card_sim\",\n \"carrot\",\n \"case_lower\",\n \"case_sensitive\",\n \"case_upper\",\n \"cassette_tape\",\n \"cast\",\n \"castle\",\n \"cat\",\n \"cctv\",\n \"chart_area\",\n \"chart_bar_big\",\n \"chart_bar_decreasing\",\n \"chart_bar_increasing\",\n \"chart_bar_stacked\",\n \"chart_bar\",\n \"chart_candlestick\",\n \"chart_column_big\",\n \"chart_column_decreasing\",\n \"chart_column_increasing\",\n \"chart_column_stacked\",\n \"chart_column\",\n \"chart_gantt\",\n \"chart_line\",\n \"chart_network\",\n \"chart_no_axes_column_decreasing\",\n \"chart_no_axes_column_increasing\",\n \"chart_no_axes_column\",\n \"chart_no_axes_combined\",\n \"chart_no_axes_gantt\",\n \"chart_pie\",\n \"chart_scatter\",\n \"chart_spline\",\n \"check_check\",\n \"check_line\",\n \"check\",\n \"chef_hat\",\n \"cherry\",\n \"chess_bishop\",\n \"chess_king\",\n \"chess_knight\",\n \"chess_pawn\",\n \"chess_queen\",\n \"chess_rook\",\n \"chevron_down\",\n \"chevron_first\",\n \"chevron_last\",\n \"chevron_left\",\n \"chevron_right\",\n \"chevron_up\",\n \"chevrons_down_up\",\n \"chevrons_down\",\n \"chevrons_left_right_ellipsis\",\n \"chevrons_left_right\",\n \"chevrons_left\",\n \"chevrons_right_left\",\n \"chevrons_right\",\n \"chevrons_up_down\",\n \"chevrons_up\",\n \"chrome\",\n \"chromium\",\n \"church\",\n \"cigarette_off\",\n \"cigarette\",\n \"circle_alert\",\n \"circle_arrow_down\",\n \"circle_arrow_left\",\n \"circle_arrow_out_down_left\",\n \"circle_arrow_out_down_right\",\n \"circle_arrow_out_up_left\",\n \"circle_arrow_out_up_right\",\n \"circle_arrow_right\",\n \"circle_arrow_up\",\n \"circle_check_big\",\n \"circle_check\",\n \"circle_chevron_down\",\n \"circle_chevron_left\",\n \"circle_chevron_right\",\n \"circle_chevron_up\",\n \"circle_dashed\",\n \"circle_divide\",\n \"circle_dollar_sign\",\n \"circle_dot_dashed\",\n \"circle_dot\",\n \"circle_ellipsis\",\n \"circle_equal\",\n \"circle_fading_arrow_up\",\n \"circle_fading_plus\",\n \"circle_gauge\",\n \"circle_help\",\n \"circle_minus\",\n \"circle_off\",\n \"circle_parking_off\",\n \"circle_parking\",\n \"circle_pause\",\n \"circle_percent\",\n \"circle_pile\",\n \"circle_play\",\n \"circle_plus\",\n \"circle_pound_sterling\",\n \"circle_power\",\n \"circle_slash_2\",\n \"circle_slash\",\n \"circle_small\",\n \"circle_star\",\n \"circle_stop\",\n \"circle_user_round\",\n \"circle_user\",\n \"circle_x\",\n \"circle\",\n \"circuit_board\",\n \"citrus\",\n \"clapperboard\",\n \"clipboard_check\",\n \"clipboard_clock\",\n \"clipboard_copy\",\n \"clipboard_list\",\n \"clipboard_minus\",\n \"clipboard_paste\",\n \"clipboard_pen_line\",\n \"clipboard_pen\",\n \"clipboard_plus\",\n \"clipboard_type\",\n \"clipboard_x\",\n \"clipboard\",\n \"clock_1\",\n \"clock_10\",\n \"clock_11\",\n \"clock_12\",\n \"clock_2\",\n \"clock_3\",\n \"clock_4\",\n \"clock_5\",\n \"clock_6\",\n \"clock_7\",\n \"clock_8\",\n \"clock_9\",\n \"clock_alert\",\n \"clock_arrow_down\",\n \"clock_arrow_up\",\n \"clock_check\",\n \"clock_fading\",\n \"clock_plus\",\n \"clock\",\n \"closed_caption\",\n \"cloud_alert\",\n \"cloud_backup\",\n \"cloud_check\",\n \"cloud_cog\",\n \"cloud_download\",\n \"cloud_drizzle\",\n \"cloud_fog\",\n \"cloud_hail\",\n \"cloud_lightning\",\n \"cloud_moon_rain\",\n \"cloud_moon\",\n \"cloud_off\",\n \"cloud_rain_wind\",\n \"cloud_rain\",\n \"cloud_snow\",\n \"cloud_sun_rain\",\n \"cloud_sun\",\n \"cloud_sync\",\n \"cloud_upload\",\n \"cloud\",\n \"cloudy\",\n \"clover\",\n \"club\",\n \"code_xml\",\n \"code\",\n \"codepen\",\n \"codesandbox\",\n \"coffee\",\n \"cog\",\n \"coins\",\n \"columns_2\",\n \"columns_3_cog\",\n \"columns_3\",\n \"columns_4\",\n \"combine\",\n \"command\",\n \"compass\",\n \"component\",\n \"computer\",\n \"concierge_bell\",\n \"cone\",\n \"construction\",\n \"contact_round\",\n \"contact\",\n \"container\",\n \"contrast\",\n \"cookie\",\n \"cooking_pot\",\n \"copy_check\",\n \"copy_minus\",\n \"copy_plus\",\n \"copy_slash\",\n \"copy_x\",\n \"copy\",\n \"copyleft\",\n \"copyright\",\n \"corner_down_left\",\n \"corner_down_right\",\n \"corner_left_down\",\n \"corner_left_up\",\n \"corner_right_down\",\n \"corner_right_up\",\n \"corner_up_left\",\n \"corner_up_right\",\n \"cpu\",\n \"creative_commons\",\n \"credit_card\",\n \"croissant\",\n \"crop\",\n \"cross\",\n \"crosshair\",\n \"crown\",\n \"cuboid\",\n \"cup_soda\",\n \"currency\",\n \"cylinder\",\n \"dam\",\n \"database_backup\",\n \"database_search\",\n \"database_zap\",\n \"database\",\n \"decimals_arrow_left\",\n \"decimals_arrow_right\",\n \"delete\",\n \"dessert\",\n \"diameter\",\n \"diamond_minus\",\n \"diamond_percent\",\n \"diamond_plus\",\n \"diamond\",\n \"dice_1\",\n \"dice_2\",\n \"dice_3\",\n \"dice_4\",\n \"dice_5\",\n \"dice_6\",\n \"dices\",\n \"diff\",\n \"disc_2\",\n \"disc_3\",\n \"disc_album\",\n \"disc\",\n \"divide\",\n \"dna_off\",\n \"dna\",\n \"dock\",\n \"dog\",\n \"dollar_sign\",\n \"donut\",\n \"door_closed_locked\",\n \"door_closed\",\n \"door_open\",\n \"dot\",\n \"download\",\n \"drafting_compass\",\n \"drama\",\n \"dribbble\",\n \"drill\",\n \"drone\",\n \"droplet_off\",\n \"droplet\",\n \"droplets\",\n \"drum\",\n \"drumstick\",\n \"dumbbell\",\n \"ear_off\",\n \"ear\",\n \"earth_lock\",\n \"earth\",\n \"eclipse\",\n \"egg_fried\",\n \"egg_off\",\n \"egg\",\n \"ellipse\",\n \"ellipsis_vertical\",\n \"ellipsis\",\n \"equal_approximately\",\n \"equal_not\",\n \"equal\",\n \"eraser\",\n \"ethernet_port\",\n \"euro\",\n \"ev_charger\",\n \"expand\",\n \"external_link\",\n \"eye_closed\",\n \"eye_off\",\n \"eye\",\n \"facebook\",\n \"factory\",\n \"fan\",\n \"fast_forward\",\n \"feather\",\n \"fence\",\n \"ferris_wheel\",\n \"figma\",\n \"file_archive\",\n \"file_audio_2\",\n \"file_audio\",\n \"file_axis_3d\",\n \"file_badge_2\",\n \"file_badge\",\n \"file_bar_chart_2\",\n \"file_bar_chart\",\n \"file_box\",\n \"file_chart_column_increasing\",\n \"file_chart_column\",\n \"file_chart_line\",\n \"file_chart_pie\",\n \"file_check_2\",\n \"file_check\",\n \"file_clock\",\n \"file_code_2\",\n \"file_code\",\n \"file_cog\",\n \"file_diff\",\n \"file_digit\",\n \"file_down\",\n \"file_heart\",\n \"file_image\",\n \"file_input\",\n \"file_json_2\",\n \"file_json\",\n \"file_key_2\",\n \"file_key\",\n \"file_line_chart\",\n \"file_lock_2\",\n \"file_lock\",\n \"file_minus_2\",\n \"file_minus\",\n \"file_music\",\n \"file_output\",\n \"file_pen_line\",\n \"file_pen\",\n \"file_pie_chart\",\n \"file_plus_2\",\n \"file_plus\",\n \"file_question\",\n \"file_scan\",\n \"file_search_2\",\n \"file_search\",\n \"file_sliders\",\n \"file_spreadsheet\",\n \"file_stack\",\n \"file_symlink\",\n \"file_terminal\",\n \"file_text\",\n \"file_type_2\",\n \"file_type\",\n \"file_up\",\n \"file_user\",\n \"file_video_2\",\n \"file_video\",\n \"file_volume_2\",\n \"file_volume\",\n \"file_warning\",\n \"file_x_2\",\n \"file_x\",\n \"file\",\n \"files\",\n \"film\",\n \"filter_x\",\n \"filter\",\n \"fingerprint_pattern\",\n \"fingerprint\",\n \"fire_extinguisher\",\n \"fish_off\",\n \"fish_symbol\",\n \"fish\",\n \"fishing_hook\",\n \"fishing_rod\",\n \"flag_off\",\n \"flag_triangle_left\",\n \"flag_triangle_right\",\n \"flag\",\n \"flame_kindling\",\n \"flame\",\n \"flashlight_off\",\n \"flashlight\",\n \"flask_conical_off\",\n \"flask_conical\",\n \"flask_round\",\n \"flip_horizontal_2\",\n \"flip_horizontal\",\n \"flip_vertical_2\",\n \"flip_vertical\",\n \"flower_2\",\n \"flower\",\n \"focus\",\n \"fold_horizontal\",\n \"fold_vertical\",\n \"folder_archive\",\n \"folder_check\",\n \"folder_clock\",\n \"folder_closed\",\n \"folder_code\",\n \"folder_cog\",\n \"folder_dot\",\n \"folder_down\",\n \"folder_git_2\",\n \"folder_git\",\n \"folder_heart\",\n \"folder_input\",\n \"folder_kanban\",\n \"folder_key\",\n \"folder_lock\",\n \"folder_minus\",\n \"folder_open_dot\",\n \"folder_open\",\n \"folder_output\",\n \"folder_pen\",\n \"folder_plus\",\n \"folder_root\",\n \"folder_search_2\",\n \"folder_search\",\n \"folder_symlink\",\n \"folder_sync\",\n \"folder_tree\",\n \"folder_up\",\n \"folder_x\",\n \"folder\",\n \"folders\",\n \"footprints\",\n \"forklift\",\n \"form\",\n \"forward\",\n \"frame\",\n \"framer\",\n \"frown\",\n \"fuel\",\n \"fullscreen\",\n \"funnel_plus\",\n \"funnel_x\",\n \"funnel\",\n \"gallery_horizontal_end\",\n \"gallery_horizontal\",\n \"gallery_thumbnails\",\n \"gallery_vertical_end\",\n \"gallery_vertical\",\n \"gamepad_2\",\n \"gamepad_directional\",\n \"gamepad\",\n \"gantt_chart\",\n \"gauge\",\n \"gavel\",\n \"gem\",\n \"georgian_lari\",\n \"ghost\",\n \"gift\",\n \"git_branch_minus\",\n \"git_branch_plus\",\n \"git_branch\",\n \"git_commit_horizontal\",\n \"git_commit_vertical\",\n \"git_compare_arrows\",\n \"git_compare\",\n \"git_fork\",\n \"git_graph\",\n \"git_merge_conflict\",\n \"git_merge\",\n \"git_pull_request_arrow\",\n \"git_pull_request_closed\",\n \"git_pull_request_create_arrow\",\n \"git_pull_request_create\",\n \"git_pull_request_draft\",\n \"git_pull_request\",\n \"github\",\n \"gitlab\",\n \"glass_water\",\n \"glasses\",\n \"globe_lock\",\n \"globe_off\",\n \"globe_x\",\n \"globe\",\n \"goal\",\n \"gpu\",\n \"grab\",\n \"graduation_cap\",\n \"grape\",\n \"grid_2x_2_check\",\n \"grid_2x_2_plus\",\n \"grid_2x_2_x\",\n \"grid_2x_2\",\n \"grid_2x2\",\n \"grid_3x_3\",\n \"grid_3x2\",\n \"grid_3x3\",\n \"grip_horizontal\",\n \"grip_vertical\",\n \"grip\",\n \"group\",\n \"guitar\",\n \"ham\",\n \"hamburger\",\n \"hammer\",\n \"hand_coins\",\n \"hand_fist\",\n \"hand_heart\",\n \"hand_helping\",\n \"hand_metal\",\n \"hand_platter\",\n \"hand\",\n \"handbag\",\n \"handshake\",\n \"hard_drive_download\",\n \"hard_drive_upload\",\n \"hard_drive\",\n \"hard_hat\",\n \"hash\",\n \"hat_glasses\",\n \"haze\",\n \"hd\",\n \"hdmi_port\",\n \"heading_1\",\n \"heading_2\",\n \"heading_3\",\n \"heading_4\",\n \"heading_5\",\n \"heading_6\",\n \"heading\",\n \"headphone_off\",\n \"headphones\",\n \"headset\",\n \"heart_crack\",\n \"heart_handshake\",\n \"heart_minus\",\n \"heart_off\",\n \"heart_plus\",\n \"heart_pulse\",\n \"heart\",\n \"heater\",\n \"helicopter\",\n \"hexagon\",\n \"highlighter\",\n \"history\",\n \"home\",\n \"hop_off\",\n \"hop\",\n \"hospital\",\n \"hotel\",\n \"hourglass\",\n \"house_heart\",\n \"house_plug\",\n \"house_plus\",\n \"house_wifi\",\n \"house\",\n \"ice_cream_bowl\",\n \"ice_cream_cone\",\n \"id_card_lanyard\",\n \"id_card\",\n \"image_down\",\n \"image_minus\",\n \"image_off\",\n \"image_play\",\n \"image_plus\",\n \"image_up\",\n \"image_upscale\",\n \"image\",\n \"images\",\n \"import\",\n \"inbox\",\n \"indent_decrease\",\n \"indent_increase\",\n \"indian_rupee\",\n \"infinity\",\n \"info\",\n \"inspection_panel\",\n \"instagram\",\n \"italic\",\n \"iteration_ccw\",\n \"iteration_cw\",\n \"japanese_yen\",\n \"joystick\",\n \"kanban\",\n \"kayak\",\n \"key_round\",\n \"key_square\",\n \"key\",\n \"keyboard_music\",\n \"keyboard_off\",\n \"keyboard\",\n \"lamp_ceiling\",\n \"lamp_desk\",\n \"lamp_floor\",\n \"lamp_wall_down\",\n \"lamp_wall_up\",\n \"lamp\",\n \"land_plot\",\n \"landmark\",\n \"languages\",\n \"laptop_minimal_check\",\n \"laptop_minimal\",\n \"laptop\",\n \"lasso_select\",\n \"lasso\",\n \"laugh\",\n \"layers_2\",\n \"layers_3\",\n \"layers_plus\",\n \"layers\",\n \"layout_dashboard\",\n \"layout_grid\",\n \"layout_list\",\n \"layout_panel_left\",\n \"layout_panel_top\",\n \"layout_template\",\n \"leaf\",\n \"leafy_green\",\n \"lectern\",\n \"lens_concave\",\n \"lens_convex\",\n \"letter_text\",\n \"library_big\",\n \"library\",\n \"life_buoy\",\n \"ligature\",\n \"lightbulb_off\",\n \"lightbulb\",\n \"line_chart\",\n \"line_dot_right_horizontal\",\n \"line_squiggle\",\n \"link_2_off\",\n \"link_2\",\n \"link\",\n \"linkedin\",\n \"list_check\",\n \"list_checks\",\n \"list_chevrons_down_up\",\n \"list_collapse\",\n \"list_end\",\n \"list_filter_plus\",\n \"list_filter\",\n \"list_minus\",\n \"list_music\",\n \"list_ordered\",\n \"list_plus\",\n \"list_restart\",\n \"list_start\",\n \"list_todo\",\n \"list_tree\",\n \"list_video\",\n \"list_x\",\n \"list\",\n \"loader_circle\",\n \"loader_pinwheel\",\n \"loader\",\n \"locate_fixed\",\n \"locate_off\",\n \"locate\",\n \"location_edit\",\n \"lock_keyhole_open\",\n \"lock_keyhole\",\n \"lock_open\",\n \"lock\",\n \"log_in\",\n \"log_out\",\n \"logs\",\n \"lollipop\",\n \"luggage\",\n \"magnet\",\n \"mail_check\",\n \"mail_minus\",\n \"mail_open\",\n \"mail_plus\",\n \"mail_question\",\n \"mail_search\",\n \"mail_warning\",\n \"mail_x\",\n \"mail\",\n \"mailbox\",\n \"mails\",\n \"map_minus\",\n \"map_pin_check_inside\",\n \"map_pin_check\",\n \"map_pin_house\",\n \"map_pin_minus_inside\",\n \"map_pin_minus\",\n \"map_pin_off\",\n \"map_pin_plus_inside\",\n \"map_pin_plus\",\n \"map_pin_x_inside\",\n \"map_pin_x\",\n \"map_pin\",\n \"map_pinned\",\n \"map_plus\",\n \"map\",\n \"mars_stroke\",\n \"martini\",\n \"maximize_2\",\n \"maximize\",\n \"medal\",\n \"megaphone_off\",\n \"megaphone\",\n \"meh\",\n \"memory_stick\",\n \"menu\",\n \"merge\",\n \"message_circle_check\",\n \"message_circle_code\",\n \"message_circle_dashed\",\n \"message_circle_heart\",\n \"message_circle_more\",\n \"message_circle_off\",\n \"message_circle_plus\",\n \"message_circle_question\",\n \"message_circle_reply\",\n \"message_circle_warning\",\n \"message_circle_x\",\n \"message_circle\",\n \"message_square_check\",\n \"message_square_code\",\n \"message_square_dashed\",\n \"message_square_diff\",\n \"message_square_dot\",\n \"message_square_heart\",\n \"message_square_lock\",\n \"message_square_more\",\n \"message_square_off\",\n \"message_square_plus\",\n \"message_square_quote\",\n \"message_square_reply\",\n \"message_square_share\",\n \"message_square_text\",\n \"message_square_warning\",\n \"message_square_x\",\n \"message_square\",\n \"messages_square\",\n \"metronome\",\n \"mic_off\",\n \"mic_vocal\",\n \"mic\",\n \"microchip\",\n \"microscope\",\n \"microwave\",\n \"milestone\",\n \"milk_off\",\n \"milk\",\n \"minimize_2\",\n \"minimize\",\n \"minus\",\n \"mirror_rectangular\",\n \"mirror_round\",\n \"monitor_check\",\n \"monitor_cloud\",\n \"monitor_cog\",\n \"monitor_dot\",\n \"monitor_down\",\n \"monitor_off\",\n \"monitor_pause\",\n \"monitor_play\",\n \"monitor_smartphone\",\n \"monitor_speaker\",\n \"monitor_stop\",\n \"monitor_up\",\n \"monitor_x\",\n \"monitor\",\n \"moon_star\",\n \"moon\",\n \"motorbike\",\n \"mountain_snow\",\n \"mountain\",\n \"mouse_left\",\n \"mouse_off\",\n \"mouse_pointer_2_off\",\n \"mouse_pointer_2\",\n \"mouse_pointer_ban\",\n \"mouse_pointer_click\",\n \"mouse_pointer\",\n \"mouse_right\",\n \"mouse\",\n \"move_3d\",\n \"move_diagonal_2\",\n \"move_diagonal\",\n \"move_down_left\",\n \"move_down_right\",\n \"move_down\",\n \"move_horizontal\",\n \"move_left\",\n \"move_right\",\n \"move_up_left\",\n \"move_up_right\",\n \"move_up\",\n \"move_vertical\",\n \"move\",\n \"music_2\",\n \"music_3\",\n \"music_4\",\n \"music\",\n \"navigation_2_off\",\n \"navigation_2\",\n \"navigation_off\",\n \"navigation\",\n \"network\",\n \"newspaper\",\n \"nfc\",\n \"non_binary\",\n \"notebook_pen\",\n \"notebook_tabs\",\n \"notebook_text\",\n \"notebook\",\n \"notepad_text_dashed\",\n \"notepad_text\",\n \"nut_off\",\n \"nut\",\n \"octagon_alert\",\n \"octagon_minus\",\n \"octagon_pause\",\n \"octagon_x\",\n \"octagon\",\n \"omega\",\n \"option\",\n \"orbit\",\n \"origami\",\n \"package_2\",\n \"package_check\",\n \"package_minus\",\n \"package_open\",\n \"package_plus\",\n \"package_search\",\n \"package_x\",\n \"package\",\n \"paint_bucket\",\n \"paint_roller\",\n \"paintbrush_2\",\n \"paintbrush_vertical\",\n \"paintbrush\",\n \"palette\",\n \"panda\",\n \"panel_bottom_close\",\n \"panel_bottom_dashed\",\n \"panel_bottom_open\",\n \"panel_bottom\",\n \"panel_left_close\",\n \"panel_left_dashed\",\n \"panel_left_open\",\n \"panel_left_right_dashed\",\n \"panel_left\",\n \"panel_right_close\",\n \"panel_right_dashed\",\n \"panel_right_open\",\n \"panel_right\",\n \"panel_top_bottom_dashed\",\n \"panel_top_close\",\n \"panel_top_dashed\",\n \"panel_top_open\",\n \"panel_top\",\n \"panels_left_bottom\",\n \"panels_right_bottom\",\n \"panels_top_left\",\n \"paperclip\",\n \"parentheses\",\n \"parking_meter\",\n \"party_popper\",\n \"pause\",\n \"paw_print\",\n \"pc_case\",\n \"pen_line\",\n \"pen_off\",\n \"pen_tool\",\n \"pen\",\n \"pencil_line\",\n \"pencil_off\",\n \"pencil_ruler\",\n \"pencil\",\n \"pentagon\",\n \"percent\",\n \"person_standing\",\n \"philippine_peso\",\n \"phone_call\",\n \"phone_forwarded\",\n \"phone_incoming\",\n \"phone_missed\",\n \"phone_off\",\n \"phone_outgoing\",\n \"phone\",\n \"pi\",\n \"piano\",\n \"pickaxe\",\n \"picture_in_picture_2\",\n \"picture_in_picture\",\n \"pie_chart\",\n \"piggy_bank\",\n \"pilcrow_left\",\n \"pilcrow_right\",\n \"pilcrow\",\n \"pill_bottle\",\n \"pill\",\n \"pin_off\",\n \"pin\",\n \"pipette\",\n \"pizza\",\n \"plane_landing\",\n \"plane_takeoff\",\n \"plane\",\n \"play\",\n \"plug_2\",\n \"plug_zap_2\",\n \"plug_zap\",\n \"plug\",\n \"plus\",\n \"pocket_knife\",\n \"pocket\",\n \"podcast\",\n \"pointer_off\",\n \"pointer\",\n \"popcorn\",\n \"popsicle\",\n \"pound_sterling\",\n \"power_off\",\n \"power\",\n \"presentation\",\n \"printer_check\",\n \"printer_x\",\n \"printer\",\n \"projector\",\n \"proportions\",\n \"puzzle\",\n \"pyramid\",\n \"qr_code\",\n \"quote\",\n \"rabbit\",\n \"radar\",\n \"radiation\",\n \"radical\",\n \"radio_receiver\",\n \"radio_tower\",\n \"radio\",\n \"radius\",\n \"rail_symbol\",\n \"rainbow\",\n \"rat\",\n \"ratio\",\n \"receipt_cent\",\n \"receipt_euro\",\n \"receipt_indian_rupee\",\n \"receipt_japanese_yen\",\n \"receipt_pound_sterling\",\n \"receipt_russian_ruble\",\n \"receipt_swiss_franc\",\n \"receipt_text\",\n \"receipt_turkish_lira\",\n \"receipt\",\n \"rectangle_circle\",\n \"rectangle_ellipsis\",\n \"rectangle_goggles\",\n \"rectangle_horizontal\",\n \"rectangle_vertical\",\n \"recycle\",\n \"redo_2\",\n \"redo_dot\",\n \"redo\",\n \"refresh_ccw_dot\",\n \"refresh_ccw\",\n \"refresh_cw_off\",\n \"refresh_cw\",\n \"refrigerator\",\n \"regex\",\n \"remove_formatting\",\n \"repeat_1\",\n \"repeat_2\",\n \"repeat\",\n \"replace_all\",\n \"replace\",\n \"reply_all\",\n \"reply\",\n \"rewind\",\n \"ribbon\",\n \"rocket\",\n \"rocking_chair\",\n \"roller_coaster\",\n \"rose\",\n \"rotate_3d\",\n \"rotate_ccw_key\",\n \"rotate_ccw_square\",\n \"rotate_ccw\",\n \"rotate_cw_square\",\n \"rotate_cw\",\n \"route_off\",\n \"route\",\n \"router\",\n \"rows_2\",\n \"rows_3\",\n \"rows_4\",\n \"rss\",\n \"ruler_dimension_line\",\n \"ruler\",\n \"russian_ruble\",\n \"sailboat\",\n \"salad\",\n \"sandwich\",\n \"satellite_dish\",\n \"satellite\",\n \"saudi_riyal\",\n \"save_all\",\n \"save_off\",\n \"save\",\n \"scale_3d\",\n \"scale\",\n \"scaling\",\n \"scan_barcode\",\n \"scan_eye\",\n \"scan_face\",\n \"scan_heart\",\n \"scan_line\",\n \"scan_qr_code\",\n \"scan_search\",\n \"scan_text\",\n \"scan\",\n \"scatter_chart\",\n \"school\",\n \"scissors_line_dashed\",\n \"scissors\",\n \"scooter\",\n \"screen_share_off\",\n \"screen_share\",\n \"scroll_text\",\n \"scroll\",\n \"search_alert\",\n \"search_check\",\n \"search_code\",\n \"search_slash\",\n \"search_x\",\n \"search\",\n \"section\",\n \"send_horizontal\",\n \"send_to_back\",\n \"send\",\n \"separator_horizontal\",\n \"separator_vertical\",\n \"server_cog\",\n \"server_crash\",\n \"server_off\",\n \"server\",\n \"settings_2\",\n \"settings\",\n \"shapes\",\n \"share_2\",\n \"share\",\n \"sheet\",\n \"shell\",\n \"shelving_unit\",\n \"shield_alert\",\n \"shield_ban\",\n \"shield_check\",\n \"shield_ellipsis\",\n \"shield_half\",\n \"shield_minus\",\n \"shield_off\",\n \"shield_plus\",\n \"shield_question\",\n \"shield_user\",\n \"shield_x\",\n \"shield\",\n \"ship_wheel\",\n \"ship\",\n \"shirt\",\n \"shopping_bag\",\n \"shopping_basket\",\n \"shopping_cart\",\n \"shovel\",\n \"shower_head\",\n \"shredder\",\n \"shrimp\",\n \"shrink\",\n \"shrub\",\n \"shuffle\",\n \"sigma\",\n \"signal_high\",\n \"signal_low\",\n \"signal_medium\",\n \"signal_zero\",\n \"signal\",\n \"signature\",\n \"signpost_big\",\n \"signpost\",\n \"siren\",\n \"skip_back\",\n \"skip_forward\",\n \"skull\",\n \"slack\",\n \"slash\",\n \"slice\",\n \"sliders_horizontal\",\n \"sliders_vertical\",\n \"smartphone_charging\",\n \"smartphone_nfc\",\n \"smartphone\",\n \"smile_plus\",\n \"smile\",\n \"snail\",\n \"snowflake\",\n \"soap_dispenser_droplet\",\n \"sofa\",\n \"solar_panel\",\n \"soup\",\n \"space\",\n \"spade\",\n \"sparkle\",\n \"sparkles\",\n \"speaker\",\n \"speech\",\n \"spell_check_2\",\n \"spell_check\",\n \"spline_pointer\",\n \"spline\",\n \"split\",\n \"spool\",\n \"spotlight\",\n \"spray_can\",\n \"sprout\",\n \"square_activity\",\n \"square_arrow_down_left\",\n \"square_arrow_down_right\",\n \"square_arrow_down\",\n \"square_arrow_left\",\n \"square_arrow_out_down_left\",\n \"square_arrow_out_down_right\",\n \"square_arrow_out_up_left\",\n \"square_arrow_out_up_right\",\n \"square_arrow_right_enter\",\n \"square_arrow_right_exit\",\n \"square_arrow_right\",\n \"square_arrow_up_left\",\n \"square_arrow_up_right\",\n \"square_arrow_up\",\n \"square_asterisk\",\n \"square_bottom_dashed_scissors\",\n \"square_chart_gantt\",\n \"square_check_big\",\n \"square_check\",\n \"square_chevron_down\",\n \"square_chevron_left\",\n \"square_chevron_right\",\n \"square_chevron_up\",\n \"square_code\",\n \"square_dashed_bottom_code\",\n \"square_dashed_bottom\",\n \"square_dashed_kanban\",\n \"square_dashed_mouse_pointer\",\n \"square_dashed_top_solid\",\n \"square_dashed\",\n \"square_divide\",\n \"square_dot\",\n \"square_equal\",\n \"square_function\",\n \"square_gantt_chart\",\n \"square_kanban\",\n \"square_library\",\n \"square_m\",\n \"square_menu\",\n \"square_minus\",\n \"square_mouse_pointer\",\n \"square_parking_off\",\n \"square_parking\",\n \"square_pen\",\n \"square_percent\",\n \"square_pi\",\n \"square_pilcrow\",\n \"square_play\",\n \"square_plus\",\n \"square_power\",\n \"square_radical\",\n \"square_round_corner\",\n \"square_scissors\",\n \"square_sigma\",\n \"square_slash\",\n \"square_split_horizontal\",\n \"square_split_vertical\",\n \"square_square\",\n \"square_stack\",\n \"square_terminal\",\n \"square_user_round\",\n \"square_user\",\n \"square_x\",\n \"square_centerline_dashed_horizontal\",\n \"square_centerline_dashed_vertical\",\n \"square\",\n \"squares_exclude\",\n \"squares_intersect\",\n \"squares_subtract\",\n \"squares_unite\",\n \"squircle_dashed\",\n \"squircle\",\n \"squirrel\",\n \"stamp\",\n \"star_half\",\n \"star_off\",\n \"star\",\n \"step_back\",\n \"step_forward\",\n \"stethoscope\",\n \"sticker\",\n \"sticky_note\",\n \"stone\",\n \"store\",\n \"stretch_horizontal\",\n \"stretch_vertical\",\n \"strikethrough\",\n \"subscript\",\n \"sun_dim\",\n \"sun_medium\",\n \"sun_moon\",\n \"sun_snow\",\n \"sun\",\n \"sunrise\",\n \"sunset\",\n \"superscript\",\n \"swatch_book\",\n \"swiss_franc\",\n \"switch_camera\",\n \"sword\",\n \"swords\",\n \"syringe\",\n \"table_2\",\n \"table_cells_merge\",\n \"table_cells_split\",\n \"table_columns_split\",\n \"table_of_contents\",\n \"table_properties\",\n \"table_rows_split\",\n \"table\",\n \"tablet_smartphone\",\n \"tablet\",\n \"tablets\",\n \"tag\",\n \"tags\",\n \"tally_1\",\n \"tally_2\",\n \"tally_3\",\n \"tally_4\",\n \"tally_5\",\n \"tangent\",\n \"target\",\n \"telescope\",\n \"tent_tree\",\n \"tent\",\n \"terminal\",\n \"test_tube_diagonal\",\n \"test_tube\",\n \"test_tubes\",\n \"text_cursor_input\",\n \"text_cursor\",\n \"text_quote\",\n \"text_search\",\n \"text_select\",\n \"text\",\n \"theater\",\n \"thermometer_snowflake\",\n \"thermometer_sun\",\n \"thermometer\",\n \"thumbs_down\",\n \"thumbs_up\",\n \"ticket_check\",\n \"ticket_minus\",\n \"ticket_percent\",\n \"ticket_plus\",\n \"ticket_slash\",\n \"ticket_x\",\n \"ticket\",\n \"tickets_plane\",\n \"tickets\",\n \"timer_off\",\n \"timer_reset\",\n \"timer\",\n \"toggle_left\",\n \"toggle_right\",\n \"toilet\",\n \"tool_case\",\n \"toolbox\",\n \"tornado\",\n \"torus\",\n \"touchpad_off\",\n \"touchpad\",\n \"towel_rack\",\n \"tower_control\",\n \"toy_brick\",\n \"tractor\",\n \"traffic_cone\",\n \"train_front_tunnel\",\n \"train_front\",\n \"train_track\",\n \"tram_front\",\n \"transgender\",\n \"trash_2\",\n \"trash\",\n \"tree_deciduous\",\n \"tree_palm\",\n \"tree_pine\",\n \"trees\",\n \"trello\",\n \"trending_down\",\n \"trending_up_down\",\n \"trending_up\",\n \"triangle_alert\",\n \"triangle_dashed\",\n \"triangle_right\",\n \"triangle\",\n \"trophy\",\n \"truck_electric\",\n \"truck\",\n \"turkish_lira\",\n \"turntable\",\n \"turtle\",\n \"tv_2\",\n \"tv_minimal_play\",\n \"tv_minimal\",\n \"tv\",\n \"twitch\",\n \"twitter\",\n \"type_outline\",\n \"type\",\n \"umbrella_off\",\n \"umbrella\",\n \"underline\",\n \"undo_2\",\n \"undo_dot\",\n \"undo\",\n \"unfold_horizontal\",\n \"unfold_vertical\",\n \"ungroup\",\n \"university\",\n \"unlink_2\",\n \"unlink\",\n \"unplug\",\n \"upload\",\n \"usb\",\n \"user_check\",\n \"user_cog\",\n \"user_key\",\n \"user_lock\",\n \"user_minus\",\n \"user_pen\",\n \"user_plus\",\n \"user_round_check\",\n \"user_round_cog\",\n \"user_round_key\",\n \"user_round_minus\",\n \"user_round_pen\",\n \"user_round_plus\",\n \"user_round_search\",\n \"user_round_x\",\n \"user_round\",\n \"user_search\",\n \"user_star\",\n \"user_x\",\n \"user\",\n \"users_round\",\n \"users\",\n \"utensils_crossed\",\n \"utensils\",\n \"utility_pole\",\n \"van\",\n \"variable\",\n \"vault\",\n \"vector_square\",\n \"vegan\",\n \"venetian_mask\",\n \"venus_and_mars\",\n \"venus\",\n \"vibrate_off\",\n \"vibrate\",\n \"video_off\",\n \"video\",\n \"videotape\",\n \"view\",\n \"voicemail\",\n \"volleyball\",\n \"volume_1\",\n \"volume_2\",\n \"volume_off\",\n \"volume_x\",\n \"volume\",\n \"vote\",\n \"wallet_cards\",\n \"wallet_minimal\",\n \"wallet\",\n \"wallpaper\",\n \"wand_sparkles\",\n \"wand\",\n \"warehouse\",\n \"washing_machine\",\n \"watch\",\n \"waves_arrow_down\",\n \"waves_arrow_up\",\n \"waves_ladder\",\n \"waves\",\n \"waypoints\",\n \"webcam\",\n \"webhook_off\",\n \"webhook\",\n \"weight_tilde\",\n \"weight\",\n \"wheat_off\",\n \"wheat\",\n \"whole_word\",\n \"wifi_cog\",\n \"wifi_high\",\n \"wifi_low\",\n \"wifi_off\",\n \"wifi_pen\",\n \"wifi_sync\",\n \"wifi_zero\",\n \"wifi\",\n \"wind_arrow_down\",\n \"wind\",\n \"wine_off\",\n \"wine\",\n \"workflow\",\n \"worm\",\n \"wrap_text\",\n \"wrench\",\n \"x_line_top\",\n \"x\",\n \"youtube\",\n \"zap_off\",\n \"zap\",\n \"zoom_in\",\n \"zoom_out\",\n]\n\n# The default transformation of some icon names doesn't match how the\n# icons are exported from Lucide. Manual overrides can go here.\nLUCIDE_ICON_MAPPING_OVERRIDE = {\n \"grid_3x2\": \"Grid3x2Icon\",\n \"fingerprint\": \"FingerprintPattern\",\n}\n" }, { "path": "reflex/components/markdown/__init__.py", "content": "\"\"\"Markdown components.\"\"\"\n\nfrom .markdown import markdown as markdown\n" }, { "path": "reflex/components/markdown/markdown.py", "content": "\"\"\"Markdown component.\"\"\"\n\nfrom __future__ import annotations\n\nimport dataclasses\nimport textwrap\nfrom collections.abc import Callable, Sequence\nfrom functools import lru_cache\nfrom hashlib import md5\nfrom types import SimpleNamespace\nfrom typing import Any\n\nfrom reflex.components.component import (\n BaseComponent,\n Component,\n ComponentNamespace,\n CustomComponent,\n field,\n)\nfrom reflex.components.el.elements.typography import Div\nfrom reflex.components.tags.tag import Tag\nfrom reflex.utils import console\nfrom reflex.utils.imports import ImportDict, ImportTypes, ImportVar\nfrom reflex.vars.base import LiteralVar, Var, VarData\nfrom reflex.vars.function import ArgsFunctionOperation, DestructuredArg\nfrom reflex.vars.number import ternary_operation\nfrom reflex.vars.sequence import LiteralArrayVar\n\n# Special vars used in the component map.\n_CHILDREN = Var(_js_expr=\"children\", _var_type=str)\n_PROPS = Var(_js_expr=\"props\")\n_PROPS_SPREAD = Var(_js_expr=\"...props\")\n_REST = Var(_js_expr=\"rest\")\n_REST_SPREAD = Var(_js_expr=\"...rest\")\n_MOCK_ARG = Var(_js_expr=\"\", _var_type=str)\n_LANGUAGE = Var(_js_expr=\"_language\", _var_type=str)\n\n\nclass Plugin(SimpleNamespace):\n \"\"\"Create new remark/rehype plugin or access pre-wrapped plugins.\"\"\"\n\n @staticmethod\n def create(\n package: str,\n tag: str,\n additional_imports: dict[str, ImportTypes] | None = None,\n **import_var_kwargs,\n ) -> Var:\n \"\"\"Create a plugin Var.\n\n Args:\n package: The package to import the plugin from.\n tag: The imported identifier.\n additional_imports: Additional imports to include in the VarData, such as CSS.\n **import_var_kwargs: Additional kwargs to pass to the ImportVar.\n\n Returns:\n The plugin Var.\n \"\"\"\n import_var_kwargs.setdefault(\"is_default\", True)\n return Var(\n _js_expr=tag,\n _var_data=VarData(\n imports={\n package: ImportVar(\n tag=tag,\n **import_var_kwargs,\n ),\n **(additional_imports or {}),\n }\n ),\n )\n\n __call__ = create\n\n math = create(\"remark-math@6.0.0\", \"remarkMath\")\n gfm = create(\"remark-gfm@4.0.1\", \"remarkGfm\")\n unwrap_images = create(\"rehype-unwrap-images@1.0.0\", \"rehypeUnwrapImages\")\n katex = create(\n \"rehype-katex@7.0.1\",\n \"rehypeKatex\",\n additional_imports={\n \"\": \"katex/dist/katex.min.css\",\n },\n )\n raw = create(\"rehype-raw@7.0.0\", \"rehypeRaw\")\n _undefined = Var(_js_expr=\"() => undefined\")\n\n\ndef _h1(value: object):\n from reflex.components.radix.themes.typography.heading import Heading\n\n return Heading.create(value, as_=\"h1\", size=\"6\", margin_y=\"0.5em\")\n\n\ndef _h2(value: object):\n from reflex.components.radix.themes.typography.heading import Heading\n\n return Heading.create(value, as_=\"h2\", size=\"5\", margin_y=\"0.5em\")\n\n\ndef _h3(value: object):\n from reflex.components.radix.themes.typography.heading import Heading\n\n return Heading.create(value, as_=\"h3\", size=\"4\", margin_y=\"0.5em\")\n\n\ndef _h4(value: object):\n from reflex.components.radix.themes.typography.heading import Heading\n\n return Heading.create(value, as_=\"h4\", size=\"3\", margin_y=\"0.5em\")\n\n\ndef _h5(value: object):\n from reflex.components.radix.themes.typography.heading import Heading\n\n return Heading.create(value, as_=\"h5\", size=\"2\", margin_y=\"0.5em\")\n\n\ndef _h6(value: object):\n from reflex.components.radix.themes.typography.heading import Heading\n\n return Heading.create(value, as_=\"h6\", size=\"1\", margin_y=\"0.5em\")\n\n\ndef _p(value: object):\n from reflex.components.radix.themes.typography.text import Text\n\n return Text.create(value, margin_y=\"1em\")\n\n\ndef _ul(value: object):\n from reflex.components.radix.themes.layout.list import UnorderedList\n\n return UnorderedList.create(value, margin_y=\"1em\")\n\n\ndef _ol(value: object):\n from reflex.components.radix.themes.layout.list import OrderedList\n\n return OrderedList.create(value, margin_y=\"1em\")\n\n\ndef _li(value: object):\n from reflex.components.radix.themes.layout.list import ListItem\n\n return ListItem.create(value, margin_y=\"0.5em\")\n\n\ndef _a(value: object):\n from reflex.components.radix.themes.typography.link import Link\n\n return Link.create(value)\n\n\ndef _code(value: object):\n from reflex.components.radix.themes.typography.code import Code\n\n return Code.create(value)\n\n\ndef _codeblock(value: object, **props):\n from reflex.components.datadisplay.code import CodeBlock\n\n return CodeBlock.create(value, margin_y=\"1em\", wrap_long_lines=True, **props)\n\n\n# Component Mapping\n@lru_cache\ndef get_base_component_map() -> dict[str, Callable]:\n \"\"\"Get the base component map.\n\n Returns:\n The base component map.\n \"\"\"\n return {\n \"h1\": _h1,\n \"h2\": _h2,\n \"h3\": _h3,\n \"h4\": _h4,\n \"h5\": _h5,\n \"h6\": _h6,\n \"p\": _p,\n \"ul\": _ul,\n \"ol\": _ol,\n \"li\": _li,\n \"a\": _a,\n \"code\": _code,\n \"pre\": _codeblock,\n }\n\n\n@dataclasses.dataclass()\nclass MarkdownComponentMap:\n \"\"\"Mixin class for handling custom component maps in Markdown components.\"\"\"\n\n _explicit_return: bool = dataclasses.field(default=False)\n\n @classmethod\n def get_component_map_custom_code(cls) -> Var:\n \"\"\"Get the custom code for the component map.\n\n Returns:\n The custom code for the component map.\n \"\"\"\n return Var(\"\")\n\n @classmethod\n def create_map_fn_var(\n cls,\n fn_body: Var | None = None,\n fn_args: Sequence[str] | None = None,\n explicit_return: bool | None = None,\n var_data: VarData | None = None,\n ) -> Var:\n \"\"\"Create a function Var for the component map.\n\n Args:\n fn_body: The formatted component as a string.\n fn_args: The function arguments.\n explicit_return: Whether to use explicit return syntax.\n var_data: The var data for the function.\n\n Returns:\n The function Var for the component map.\n \"\"\"\n fn_args = fn_args or cls.get_fn_args()\n fn_body = fn_body if fn_body is not None else cls.get_fn_body()\n explicit_return = explicit_return or cls._explicit_return\n\n return ArgsFunctionOperation.create(\n args_names=(DestructuredArg(fields=tuple(fn_args)),),\n return_expr=fn_body,\n explicit_return=explicit_return,\n _var_data=var_data,\n )\n\n @classmethod\n def get_fn_args(cls) -> Sequence[str]:\n \"\"\"Get the function arguments for the component map.\n\n Returns:\n The function arguments as a list of strings.\n \"\"\"\n return [\"node\", _CHILDREN._js_expr, _PROPS_SPREAD._js_expr]\n\n @classmethod\n def get_fn_body(cls) -> Var:\n \"\"\"Get the function body for the component map.\n\n Returns:\n The function body as a string.\n \"\"\"\n return Var(_js_expr=\"undefined\", _var_type=None)\n\n\nclass Markdown(Component):\n \"\"\"A markdown component.\"\"\"\n\n library = \"react-markdown@10.1.0\"\n\n tag = \"ReactMarkdown\"\n\n is_default = True\n\n # The component map from a tag to a lambda that creates a component.\n component_map: dict[str, Any] = field(\n default_factory=dict, is_javascript_property=False\n )\n\n # The hash of the component map, generated at create() time.\n component_map_hash: str = field(default=\"\", is_javascript_property=False)\n\n # Remark plugins to use when rendering the content. Provide (plugin, options) if the plugin requires options.\n remark_plugins: Var[Sequence[Var | tuple[Var, Var]]]\n\n # Rehype (HTML processor) plugins to use when rendering the content. Provide (plugin, options) if the plugin requires options.\n rehype_plugins: Var[Sequence[Var | tuple[Var, Var]]]\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create a markdown component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The markdown component.\n\n Raises:\n ValueError: If the children are not valid.\n \"\"\"\n if len(children) != 1 or not isinstance(children[0], (str, Var)):\n msg = \"Markdown component must have exactly one child containing the markdown source.\"\n raise ValueError(msg)\n\n # Update the base component map with the custom component map.\n component_map = {**get_base_component_map(), **props.pop(\"component_map\", {})}\n if \"codeblock\" in component_map:\n console.deprecate(\n feature_name=\"'codeblock' in component_map\",\n reason=\"Use 'pre' instead of 'codeblock' to customize code block rendering in markdown\",\n deprecation_version=\"0.8.25\",\n removal_version=\"0.9.0\",\n )\n component_map[\"pre\"] = component_map.pop(\"codeblock\")\n\n # Get the markdown source.\n src = children[0]\n\n # Dedent the source.\n if isinstance(src, str):\n src = textwrap.dedent(src)\n\n # Create the component.\n return super().create(\n src,\n component_map=component_map,\n component_map_hash=cls._component_map_hash(component_map),\n **props,\n )\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the markdown component.\n\n Returns:\n The imports for the markdown component.\n \"\"\"\n return [\n *[\n component(_MOCK_ARG)._get_all_imports()\n for component in self.component_map.values()\n ],\n *(\n [codeblock_var_data.old_school_imports()]\n if (\n codeblock_var_data\n := self._get_codeblock_fn_var()._get_all_var_data()\n )\n is not None\n else []\n ),\n ]\n\n def _get_tag_map_fn_var(self, tag: str) -> Var:\n return self._get_map_fn_var_from_children(self.get_component(tag), tag)\n\n def format_component_map(self) -> dict[str, Var]:\n \"\"\"Format the component map for rendering.\n\n Returns:\n The formatted component map.\n \"\"\"\n components = {\n tag: self._get_tag_map_fn_var(tag)\n for tag in self.component_map\n if tag != \"pre\"\n }\n\n # Special handling for code blocks to extract the language.\n components[\"pre\"] = self._get_codeblock_fn_var()\n\n return components\n\n def _get_codeblock_fn_var(self) -> Var:\n \"\"\"Get the function variable for codeblock.\n\n This function creates a Var that represents a function to handle\n both code blocks in markdown.\n\n Returns:\n The Var for pre code.\n \"\"\"\n # Get any custom code from the code block \"pre\" component.\n custom_code_list = self._get_map_fn_custom_code_from_children(\n self.get_component(\"pre\")\n )\n var_data = VarData.merge(*[\n code._get_all_var_data()\n for code in custom_code_list\n if isinstance(code, Var)\n ])\n codeblock_custom_code = \"\\n\".join(map(str, custom_code_list))\n\n # Format the code to handle code block with language extraction.\n formatted_code = f\"\"\"\nconst {{node: childNode, className, children: components, {_PROPS_SPREAD._js_expr}}} = {_REST._js_expr}.children.props;\nconst {_CHILDREN._js_expr} = String(Array.isArray(components) ? components.join('\\\\n') : components).replace(/\\\\n$/, '');\nconst match = (className || '').match(/language-(?.*)/);\nlet {_LANGUAGE!s} = match ? match[1] : '';\n{codeblock_custom_code};\n return {self.format_component(\"pre\", language=_LANGUAGE)};\n \"\"\".replace(\"\\n\", \" \")\n\n return MarkdownComponentMap.create_map_fn_var(\n fn_body=Var(_js_expr=formatted_code),\n fn_args=[\"node\", _REST_SPREAD._js_expr],\n explicit_return=True,\n var_data=var_data,\n )\n\n def get_component(self, tag: str, **props) -> Component:\n \"\"\"Get the component for a tag and props.\n\n Args:\n tag: The tag of the component.\n **props: The props of the component.\n\n Returns:\n The component.\n\n Raises:\n ValueError: If the tag is invalid.\n \"\"\"\n # Check the tag is valid.\n if tag not in self.component_map:\n msg = f\"No markdown component found for tag: {tag}.\"\n raise ValueError(msg)\n\n # If the children are set as a prop, don't pass them as children.\n children = [_CHILDREN] if props.get(\"children\") is None else []\n # Get the component.\n return self.component_map[tag](*children, **props).set(special_props=[_PROPS])\n\n def format_component(self, tag: str, **props) -> str:\n \"\"\"Format a component for rendering in the component map.\n\n Args:\n tag: The tag of the component.\n **props: Extra props to pass to the component function.\n\n Returns:\n The formatted component.\n \"\"\"\n return str(self.get_component(tag, **props)).replace(\"\\n\", \"\")\n\n def _get_map_fn_var_from_children(self, component: Component, tag: str) -> Var:\n \"\"\"Create a function Var for the component map for the specified tag.\n\n Args:\n component: The component to check for custom code.\n tag: The tag of the component.\n\n Returns:\n The function Var for the component map.\n \"\"\"\n formatted_component = Var(\n _js_expr=f\"({self.format_component(tag)})\", _var_type=str\n )\n if isinstance(component, MarkdownComponentMap):\n return component.create_map_fn_var(fn_body=formatted_component)\n\n # fallback to the default fn Var creation if the component is not a MarkdownComponentMap.\n return MarkdownComponentMap.create_map_fn_var(fn_body=formatted_component)\n\n def _get_map_fn_custom_code_from_children(\n self, component: BaseComponent\n ) -> list[str | Var]:\n \"\"\"Recursively get markdown custom code from children components.\n\n Args:\n component: The component to check for custom code.\n\n Returns:\n A list of markdown custom code strings.\n \"\"\"\n custom_code_list: list[str | Var] = []\n if isinstance(component, MarkdownComponentMap):\n custom_code_list.append(component.get_component_map_custom_code())\n\n # If the component is a custom component(rx.memo), obtain the underlining\n # component and get the custom code from the children.\n if isinstance(component, CustomComponent):\n custom_code_list.extend(\n self._get_map_fn_custom_code_from_children(\n component.component_fn(*component.get_prop_vars())\n )\n )\n elif isinstance(component, Component):\n for child in component.children:\n custom_code_list.extend(\n self._get_map_fn_custom_code_from_children(child)\n )\n\n return custom_code_list\n\n @staticmethod\n def _component_map_hash(component_map: dict) -> str:\n inp = str({\n tag: (\n f\"{component.__module__}.{component.__qualname__}\"\n if (\n \"<\" not in component.__name__\n ) # simple way to check against lambdas\n else component(_MOCK_ARG)\n )\n for tag, component in component_map.items()\n }).encode()\n return md5(inp).hexdigest()\n\n def _get_component_map_name(self) -> str:\n return f\"ComponentMap_{self.component_map_hash}\"\n\n def _get_custom_code(self) -> str | None:\n hooks = {}\n from reflex.compiler.templates import _render_hooks\n\n for component_factory in self.component_map.values():\n comp = component_factory(_MOCK_ARG)\n hooks.update(comp._get_all_hooks())\n formatted_hooks = _render_hooks(hooks)\n return f\"\"\"\n function {self._get_component_map_name()} () {{\n {formatted_hooks}\n return (\n {LiteralVar.create(self.format_component_map())!s}\n )\n }}\n \"\"\"\n\n def _render(self) -> Tag:\n return (\n super()\n ._render()\n .add_props(\n components=Var(_js_expr=f\"{self._get_component_map_name()}()\"),\n )\n .remove_props(\"componentMap\", \"componentMapHash\")\n )\n\n\nclass MarkdownWrapper(Div):\n \"\"\"A markdown component, with optional div-wrapping when style props are given.\"\"\"\n\n @classmethod\n def create(\n cls,\n *children,\n use_math: bool | Var[bool] = True,\n use_gfm: bool | Var[bool] = True,\n use_unwrap_images: bool | Var[bool] = True,\n use_katex: bool | Var[bool] = True,\n use_raw: bool | Var[bool] = True,\n **props,\n ) -> Component:\n \"\"\"Create a markdown component.\n\n Args:\n *children: The children of the component.\n use_math: Whether to use the remark-math plugin.\n use_gfm: Whether to use the GitHub Flavored Markdown plugin.\n use_unwrap_images: Whether to use the unwrap images plugin.\n use_katex: Whether to use the KaTeX plugin.\n use_raw: Whether to use the raw HTML plugin.\n **props: The properties of the component.\n\n Returns:\n The markdown component or div wrapping markdown component.\n\n Raises:\n ValueError: If the children are not valid.\n \"\"\"\n # Assemble the plugin lists.\n builtin_remark_plugins = []\n if isinstance(use_math, Var):\n builtin_remark_plugins.append(\n ternary_operation(\n use_math, markdown.plugin.math, markdown.plugin._undefined\n )\n )\n elif use_math:\n builtin_remark_plugins.append(markdown.plugin.math)\n if isinstance(use_gfm, Var):\n builtin_remark_plugins.append(\n ternary_operation(\n use_gfm, markdown.plugin.gfm, markdown.plugin._undefined\n )\n )\n elif use_gfm:\n builtin_remark_plugins.append(markdown.plugin.gfm)\n remark_plugins = LiteralArrayVar.create(builtin_remark_plugins)\n if (user_remark_plugins := props.pop(\"remark_plugins\", None)) is not None:\n if not isinstance(user_remark_plugins, Var):\n user_remark_plugins = Var.create(user_remark_plugins)\n remark_plugins = remark_plugins + user_remark_plugins.to(list)\n\n builtin_rehype_plugins = []\n if isinstance(use_katex, Var):\n builtin_rehype_plugins.append(\n ternary_operation(\n use_katex, markdown.plugin.katex, markdown.plugin._undefined\n )\n )\n elif use_katex:\n builtin_rehype_plugins.append(markdown.plugin.katex)\n if isinstance(use_raw, Var):\n builtin_rehype_plugins.append(\n ternary_operation(\n use_raw, markdown.plugin.raw, markdown.plugin._undefined\n )\n )\n elif use_raw:\n builtin_rehype_plugins.append(markdown.plugin.raw)\n if isinstance(use_unwrap_images, Var):\n builtin_rehype_plugins.append(\n ternary_operation(\n use_unwrap_images,\n markdown.plugin.unwrap_images,\n markdown.plugin._undefined,\n )\n )\n elif use_unwrap_images:\n builtin_rehype_plugins.append(markdown.plugin.unwrap_images)\n rehype_plugins = LiteralArrayVar.create(builtin_rehype_plugins)\n if (user_rehype_plugins := props.pop(\"rehype_plugins\", None)) is not None:\n if not isinstance(user_rehype_plugins, Var):\n user_rehype_plugins = Var.create(user_rehype_plugins)\n rehype_plugins = rehype_plugins + user_rehype_plugins.to(list)\n\n return super().create(\n Markdown.create(\n *children,\n component_map=props.pop(\"component_map\", {}),\n remark_plugins=remark_plugins.to(list[Var | tuple[Var, Var]]),\n rehype_plugins=rehype_plugins.to(list[Var | tuple[Var, Var]]),\n ),\n **props,\n )\n\n\nclass MarkdownNamespace(ComponentNamespace):\n \"\"\"A namespace for markdown components.\"\"\"\n\n __call__ = staticmethod(MarkdownWrapper.create)\n root = staticmethod(Markdown.create)\n plugin = Plugin()\n\n\nmarkdown = MarkdownNamespace()\n" }, { "path": "reflex/components/moment/__init__.py", "content": "\"\"\"Moment.js component.\"\"\"\n\nfrom .moment import Moment, MomentDelta\n\nmoment = Moment.create\n" }, { "path": "reflex/components/moment/moment.py", "content": "\"\"\"Moment component for humanized date rendering.\"\"\"\n\nimport dataclasses\nfrom datetime import date, datetime, time, timedelta\n\nfrom reflex.components.component import NoSSRComponent\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.utils.imports import ImportDict\nfrom reflex.vars.base import LiteralVar, Var\n\n\n@dataclasses.dataclass(frozen=True)\nclass MomentDelta:\n \"\"\"A delta used for add/subtract prop in Moment.\"\"\"\n\n years: int | None = dataclasses.field(default=None)\n quarters: int | None = dataclasses.field(default=None)\n months: int | None = dataclasses.field(default=None)\n weeks: int | None = dataclasses.field(default=None)\n days: int | None = dataclasses.field(default=None)\n hours: int | None = dataclasses.field(default=None)\n minutes: int | None = dataclasses.field(default=None)\n seconds: int | None = dataclasses.field(default=None)\n milliseconds: int | None = dataclasses.field(default=None)\n\n\nclass Moment(NoSSRComponent):\n \"\"\"The Moment component.\"\"\"\n\n tag: str | None = \"Moment\"\n is_default = True\n library: str | None = \"react-moment@1.2.2\"\n lib_dependencies: list[str] = [\"moment@2.30.1\"]\n\n # How often the date update (how often time update / 0 to disable).\n interval: Var[int]\n\n # Formats the date according to the given format string.\n format: Var[str]\n\n # When formatting duration time, the largest-magnitude tokens are automatically trimmed when they have no value.\n trim: Var[bool]\n\n # Use the parse attribute to tell moment how to parse the given date when non-standard.\n parse: Var[str]\n\n # Add a delta to the base date (keys are \"years\", \"quarters\", \"months\", \"weeks\", \"days\", \"hours\", \"minutes\", \"seconds\")\n add: Var[MomentDelta]\n\n # Subtract a delta to the base date (keys are \"years\", \"quarters\", \"months\", \"weeks\", \"days\", \"hours\", \"minutes\", \"seconds\")\n subtract: Var[MomentDelta]\n\n # Displays the date as the time from now, e.g. \"5 minutes ago\".\n from_now: Var[bool]\n\n # Displays the relative time in a short format using abbreviated units (e.g., \"1h\", \"2d\", \"3mo\", \"1y\" instead of \"1 hour ago\", \"2 days ago\", etc.).\n from_now_short: Var[bool]\n\n # Setting fromNowDuring will display the relative time as with fromNow but just during its value in milliseconds, after that format will be used instead.\n from_now_during: Var[int]\n\n # Similar to fromNow, but gives the opposite interval.\n to_now: Var[bool]\n\n # Adds a title attribute to the element with the complete date.\n with_title: Var[bool]\n\n # How the title date is formatted when using the withTitle attribute.\n title_format: Var[str]\n\n # Show the different between this date and the rendered child.\n diff: Var[str]\n\n # Display the diff as decimal.\n decimal: Var[bool]\n\n # Display the diff in given unit.\n unit: Var[str]\n\n # Shows the duration (elapsed time) between two dates. duration property should be behind date property time-wise.\n duration: Var[str]\n\n # The date to display (also work if passed as children).\n date: Var[str | datetime | date | time | timedelta]\n\n # Shows the duration (elapsed time) between now and the provided datetime.\n duration_from_now: Var[bool]\n\n # Tells Moment to parse the given date value as a unix timestamp.\n unix: Var[bool]\n\n # Outputs the result in local time.\n local: Var[bool]\n\n # Display the date in the given timezone.\n tz: Var[str]\n\n # The locale to use when rendering.\n locale: Var[str]\n\n # Fires when the date changes.\n on_change: EventHandler[passthrough_event_spec(str)]\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add the imports for the Moment component.\n\n Returns:\n The import dict for the component.\n \"\"\"\n imports = {}\n\n if isinstance(self.locale, LiteralVar):\n imports[\"\"] = f\"moment/locale/{self.locale._var_value}\"\n elif self.locale is not None:\n # If the user is using a variable for the locale, we can't know the\n # value at compile time so import all locales available.\n imports[\"\"] = \"moment/min/locales\"\n if self.tz is not None:\n imports[\"moment-timezone\"] = \"\"\n\n return imports\n" }, { "path": "reflex/components/plotly/__init__.py", "content": "\"\"\"Plotly components.\"\"\"\n\nfrom reflex.components.component import ComponentNamespace\n\nfrom .plotly import (\n Plotly,\n PlotlyBasic,\n PlotlyCartesian,\n PlotlyFinance,\n PlotlyGeo,\n PlotlyGl2d,\n PlotlyGl3d,\n PlotlyMapbox,\n PlotlyStrict,\n)\n\n\nclass PlotlyNamespace(ComponentNamespace):\n \"\"\"Plotly namespace.\"\"\"\n\n __call__ = Plotly.create\n basic = PlotlyBasic.create\n cartesian = PlotlyCartesian.create\n geo = PlotlyGeo.create\n gl2d = PlotlyGl2d.create\n gl3d = PlotlyGl3d.create\n finance = PlotlyFinance.create\n mapbox = PlotlyMapbox.create\n strict = PlotlyStrict.create\n\n\nplotly = PlotlyNamespace()\n" }, { "path": "reflex/components/plotly/plotly.py", "content": "\"\"\"Component for displaying a plotly graph.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import TYPE_CHECKING, Any, TypedDict, TypeVar\n\nfrom reflex.components.component import Component, NoSSRComponent\nfrom reflex.components.core.cond import color_mode_cond\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.utils import console\nfrom reflex.utils.imports import ImportDict, ImportVar\nfrom reflex.vars.base import LiteralVar, Var\n\ntry:\n from plotly.graph_objs import Figure\n from plotly.graph_objs.layout import Template\n\nexcept ImportError:\n console.warn(\"Plotly is not installed. Please run `pip install plotly`.\")\n if not TYPE_CHECKING:\n Figure = Any\n Template = Any\n\n\ndef _event_points_data_signature(e0: Var) -> tuple[Var[list[Point]]]:\n \"\"\"For plotly events with event data containing a point array.\n\n Args:\n e0: The event data.\n\n Returns:\n The event data and the extracted points.\n \"\"\"\n return (Var(_js_expr=f\"extractPoints({e0}?.points)\"),)\n\n\nT = TypeVar(\"T\")\n\nItemOrList = T | list[T]\n\n\nclass BBox(TypedDict):\n \"\"\"Bounding box for a point in a plotly graph.\"\"\"\n\n x0: float | int | None\n x1: float | int | None\n y0: float | int | None\n y1: float | int | None\n z0: float | int | None\n z1: float | int | None\n\n\nclass Point(TypedDict):\n \"\"\"A point in a plotly graph.\"\"\"\n\n x: float | int | None\n y: float | int | None\n z: float | int | None\n lat: float | int | None\n lon: float | int | None\n curveNumber: int | None\n pointNumber: int | None\n pointNumbers: list[int] | None\n pointIndex: int | None\n markerColor: ItemOrList[ItemOrList[float | int | str | None]] | None\n markerSize: ItemOrList[ItemOrList[float | int | None,]] | None\n bbox: BBox | None\n\n\nclass Plotly(NoSSRComponent):\n \"\"\"Display a plotly graph.\"\"\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js@3.4.0\"]\n\n tag = \"Plot\"\n\n is_default = True\n\n # The figure to display. This can be a plotly figure or a plotly data json.\n data: Var[Figure]\n\n # The layout of the graph.\n layout: Var[dict]\n\n # The template for visual appearance of the graph.\n template: Var[Template]\n\n # The config of the graph.\n config: Var[dict]\n\n # If true, the graph will resize when the window is resized.\n use_resize_handler: Var[bool] = LiteralVar.create(True)\n\n # Fired after the plot is redrawn.\n on_after_plot: EventHandler[no_args_event_spec]\n\n # Fired after the plot was animated.\n on_animated: EventHandler[no_args_event_spec]\n\n # Fired while animating a single frame (does not currently pass data through).\n on_animating_frame: EventHandler[no_args_event_spec]\n\n # Fired when an animation is interrupted (to start a new animation for example).\n on_animation_interrupted: EventHandler[no_args_event_spec]\n\n # Fired when the plot is responsively sized.\n on_autosize: EventHandler[no_args_event_spec]\n\n # Fired whenever mouse moves over a plot.\n on_before_hover: EventHandler[no_args_event_spec]\n\n # Fired when a plotly UI button is clicked.\n on_button_clicked: EventHandler[no_args_event_spec]\n\n # Fired when the plot is clicked.\n on_click: EventHandler[_event_points_data_signature]\n\n # Fired when a selection is cleared (via double click).\n on_deselect: EventHandler[no_args_event_spec]\n\n # Fired when the plot is double clicked.\n on_double_click: EventHandler[no_args_event_spec]\n\n # Fired when a plot element is hovered over.\n on_hover: EventHandler[_event_points_data_signature]\n\n # Fired after the plot is laid out (zoom, pan, etc).\n on_relayout: EventHandler[no_args_event_spec]\n\n # Fired while the plot is being laid out.\n on_relayouting: EventHandler[no_args_event_spec]\n\n # Fired after the plot style is changed.\n on_restyle: EventHandler[no_args_event_spec]\n\n # Fired after the plot is redrawn.\n on_redraw: EventHandler[no_args_event_spec]\n\n # Fired after selecting plot elements.\n on_selected: EventHandler[_event_points_data_signature]\n\n # Fired while dragging a selection.\n on_selecting: EventHandler[_event_points_data_signature]\n\n # Fired while an animation is occurring.\n on_transitioning: EventHandler[no_args_event_spec]\n\n # Fired when a transition is stopped early.\n on_transition_interrupted: EventHandler[no_args_event_spec]\n\n # Fired when a hovered element is no longer hovered.\n on_unhover: EventHandler[_event_points_data_signature]\n\n def add_imports(self) -> dict[str, str]:\n \"\"\"Add imports for the plotly component.\n\n Returns:\n The imports for the plotly component.\n \"\"\"\n return {\n # For merging plotly data/layout/templates.\n \"mergician@v2.0.2\": \"mergician\"\n }\n\n def add_custom_code(self) -> list[str]:\n \"\"\"Add custom codes for processing the plotly points data.\n\n Returns:\n Custom code snippets for the module level.\n \"\"\"\n return [\n \"const removeUndefined = (obj) => {Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]); return obj}\",\n \"\"\"\nconst extractPoints = (points) => {\n if (!points) return [];\n return points.map(point => {\n const bbox = point.bbox ? removeUndefined({\n x0: point.bbox.x0,\n x1: point.bbox.x1,\n y0: point.bbox.y0,\n y1: point.bbox.y1,\n z0: point.bbox.y0,\n z1: point.bbox.y1,\n }) : undefined;\n return removeUndefined({\n x: point.x,\n y: point.y,\n z: point.z,\n lat: point.lat,\n lon: point.lon,\n curveNumber: point.curveNumber,\n pointNumber: point.pointNumber,\n pointNumbers: point.pointNumbers,\n pointIndex: point.pointIndex,\n markerColor: point['marker.color'],\n markerSize: point['marker.size'],\n bbox: bbox,\n })\n })\n}\n\"\"\",\n ]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the Plotly component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Plotly component.\n \"\"\"\n from plotly.graph_objs.layout import Template\n from plotly.io import templates\n\n responsive_template = color_mode_cond(\n light=LiteralVar.create(templates[\"plotly\"]),\n dark=LiteralVar.create(templates[\"plotly_dark\"]),\n )\n if isinstance(responsive_template, Var):\n # Mark the conditional Var as a Template to avoid type mismatch\n responsive_template = responsive_template.to(Template)\n props.setdefault(\"template\", responsive_template)\n return super().create(*children, **props)\n\n def _exclude_props(self) -> set[str]:\n # These props are handled specially in the _render function\n return {\"data\", \"layout\", \"template\"}\n\n def _render(self):\n tag = super()._render()\n figure = self.data.to(dict) if self.data is not None else Var.create({})\n merge_dicts = [] # Data will be merged and spread from these dict Vars\n if self.layout is not None:\n # Why is this not a literal dict? Great question... it didn't work\n # reliably because of how _var_name_unwrapped strips the outer curly\n # brackets if any of the contained Vars depend on state.\n layout_dict = LiteralVar.create({\"layout\": self.layout})\n merge_dicts.append(layout_dict)\n if self.template is not None:\n template_dict = LiteralVar.create({\"layout\": {\"template\": self.template}})\n merge_dicts.append(template_dict._without_data())\n if merge_dicts:\n tag = tag.set(\n special_props=[\n *tag.special_props,\n # Merge all dictionaries and spread the result over props.\n Var(\n _js_expr=f\"{{...mergician({figure!s},\"\n f\"{','.join(str(md) for md in merge_dicts)})}}\",\n ),\n ]\n )\n else:\n tag = tag.set(\n special_props=[\n *tag.special_props,\n # Spread the figure dict over props, nothing to merge.\n Var(_js_expr=str(figure)),\n ]\n )\n return tag\n\n\nCREATE_PLOTLY_COMPONENT: ImportDict = {\n \"react-plotly.js\": [\n ImportVar(\n tag=\"createPlotlyComponent\",\n is_default=True,\n package_path=\"/factory\",\n ),\n ]\n}\n\n\ndef dynamic_plotly_import(name: str, package: str) -> str:\n \"\"\"Create a dynamic import for a plotly component.\n\n Args:\n name: The name of the component.\n package: The package path of the component.\n\n Returns:\n The dynamic import for the plotly component.\n \"\"\"\n library_import = f\"import('{package}')\"\n mod_import = \".then((mod) => createPlotlyComponent(mod))\"\n return f\"\"\"\nconst {name} = ClientSide(() =>\n {library_import}{mod_import}\n)\n\"\"\"\n\n\nclass PlotlyBasic(Plotly):\n \"\"\"Display a basic plotly graph.\"\"\"\n\n tag: str = \"BasicPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-basic-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly basic component.\n\n Returns:\n The imports for the plotly basic component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly basic component.\n\n Returns:\n The dynamic imports for the plotly basic component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-basic-dist-min\")\n\n\nclass PlotlyCartesian(Plotly):\n \"\"\"Display a plotly cartesian graph.\"\"\"\n\n tag: str = \"CartesianPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-cartesian-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly cartesian component.\n\n Returns:\n The imports for the plotly cartesian component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly cartesian component.\n\n Returns:\n The dynamic imports for the plotly cartesian component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-cartesian-dist-min\")\n\n\nclass PlotlyGeo(Plotly):\n \"\"\"Display a plotly geo graph.\"\"\"\n\n tag: str = \"GeoPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-geo-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly geo component.\n\n Returns:\n The imports for the plotly geo component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly geo component.\n\n Returns:\n The dynamic imports for the plotly geo component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-geo-dist-min\")\n\n\nclass PlotlyGl3d(Plotly):\n \"\"\"Display a plotly 3d graph.\"\"\"\n\n tag: str = \"Gl3dPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-gl3d-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly 3d component.\n\n Returns:\n The imports for the plotly 3d component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly 3d component.\n\n Returns:\n The dynamic imports for the plotly 3d component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-gl3d-dist-min\")\n\n\nclass PlotlyGl2d(Plotly):\n \"\"\"Display a plotly 2d graph.\"\"\"\n\n tag: str = \"Gl2dPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-gl2d-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly 2d component.\n\n Returns:\n The imports for the plotly 2d component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly 2d component.\n\n Returns:\n The dynamic imports for the plotly 2d component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-gl2d-dist-min\")\n\n\nclass PlotlyMapbox(Plotly):\n \"\"\"Display a plotly mapbox graph.\"\"\"\n\n tag: str = \"MapboxPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-mapbox-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly mapbox component.\n\n Returns:\n The imports for the plotly mapbox component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly mapbox component.\n\n Returns:\n The dynamic imports for the plotly mapbox component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-mapbox-dist-min\")\n\n\nclass PlotlyFinance(Plotly):\n \"\"\"Display a plotly finance graph.\"\"\"\n\n tag: str = \"FinancePlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-finance-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly finance component.\n\n Returns:\n The imports for the plotly finance component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly finance component.\n\n Returns:\n The dynamic imports for the plotly finance component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-finance-dist-min\")\n\n\nclass PlotlyStrict(Plotly):\n \"\"\"Display a plotly strict graph.\"\"\"\n\n tag: str = \"StrictPlotlyPlot\"\n\n library = \"react-plotly.js@2.6.0\"\n\n lib_dependencies: list[str] = [\"plotly.js-strict-dist-min@3.4.0\"]\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the plotly strict component.\n\n Returns:\n The imports for the plotly strict component.\n \"\"\"\n return CREATE_PLOTLY_COMPONENT\n\n def _get_dynamic_imports(self) -> str:\n \"\"\"Get the dynamic imports for the plotly strict component.\n\n Returns:\n The dynamic imports for the plotly strict component.\n \"\"\"\n return dynamic_plotly_import(self.tag, \"plotly.js-strict-dist-min\")\n" }, { "path": "reflex/components/props.py", "content": "\"\"\"A class that holds props to be passed or applied to a component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Callable\nfrom dataclasses import _MISSING_TYPE, MISSING\nfrom typing import Any, TypeVar, get_args, get_origin\n\nfrom typing_extensions import dataclass_transform\n\nfrom reflex.components.field import BaseField, FieldBasedMeta\nfrom reflex.event import EventChain, args_specs_from_fields\nfrom reflex.utils import format\nfrom reflex.utils.exceptions import InvalidPropValueError\nfrom reflex.utils.serializers import serializer\nfrom reflex.utils.types import is_union\nfrom reflex.vars.object import LiteralObjectVar\n\nPROPS_FIELD_TYPE = TypeVar(\"PROPS_FIELD_TYPE\")\n\n\ndef _get_props_subclass(field_type: Any) -> type | None:\n \"\"\"Extract the Props subclass from a field type annotation.\n\n Args:\n field_type: The type annotation to check.\n\n Returns:\n The Props subclass if found, None otherwise.\n \"\"\"\n from reflex.utils.types import typehint_issubclass\n\n # For direct class types, we can return them directly if they're Props subclasses\n if isinstance(field_type, type):\n return field_type if typehint_issubclass(field_type, PropsBase) else None\n\n # For Union types, check each union member\n if is_union(field_type):\n for arg in get_args(field_type):\n result = _get_props_subclass(arg)\n if result is not None:\n return result\n\n return None\n\n\ndef _find_props_in_list_annotation(field_type: Any) -> type | None:\n \"\"\"Find Props subclass within a list type annotation.\n\n Args:\n field_type: The type annotation to check (e.g., list[SomeProps] or list[SomeProps] | None).\n\n Returns:\n The Props subclass if found in a list annotation, None otherwise.\n \"\"\"\n origin = get_origin(field_type)\n if origin is list:\n args = get_args(field_type)\n if args:\n return _get_props_subclass(args[0])\n\n # Handle Union types - check if any union member is a list\n if is_union(field_type):\n for arg in get_args(field_type):\n if arg is not type(None): # Skip None from Optional\n list_element = _find_props_in_list_annotation(arg)\n if list_element is not None:\n return list_element\n\n return None\n\n\nclass PropsField(BaseField[PROPS_FIELD_TYPE]):\n \"\"\"A field for a props class.\"\"\"\n\n def __init__(\n self,\n default: PROPS_FIELD_TYPE | _MISSING_TYPE = MISSING,\n default_factory: Callable[[], PROPS_FIELD_TYPE] | None = None,\n annotated_type: type[Any] | _MISSING_TYPE = MISSING,\n ) -> None:\n \"\"\"Initialize the field.\n\n Args:\n default: The default value for the field.\n default_factory: The default factory for the field.\n annotated_type: The annotated type for the field.\n \"\"\"\n super().__init__(default, default_factory, annotated_type)\n self._name: str = \"\" # Will be set by metaclass\n\n @property\n def required(self) -> bool:\n \"\"\"Check if the field is required (for Pydantic compatibility).\n\n Returns:\n True if the field has no default value or factory.\n \"\"\"\n return self.default is MISSING and self.default_factory is None\n\n @property\n def name(self) -> str | None:\n \"\"\"Field name (for Pydantic compatibility).\n\n Note: This is set by the metaclass when processing fields.\n\n Returns:\n The field name if set, None otherwise.\n \"\"\"\n return getattr(self, \"_name\", None)\n\n def get_default(self) -> Any:\n \"\"\"Get the default value (for Pydantic compatibility).\n\n Returns:\n The default value for the field, or None if required.\n \"\"\"\n try:\n return self.default_value()\n except ValueError:\n # Field is required (no default)\n return None\n\n def __repr__(self) -> str:\n \"\"\"Represent the field in a readable format.\n\n Returns:\n The string representation of the field.\n \"\"\"\n annotated_type_str = (\n f\", annotated_type={self.annotated_type!r}\"\n if self.annotated_type is not MISSING\n else \"\"\n )\n if self.default is not MISSING:\n return f\"PropsField(default={self.default!r}{annotated_type_str})\"\n return (\n f\"PropsField(default_factory={self.default_factory!r}{annotated_type_str})\"\n )\n\n\ndef props_field(\n default: PROPS_FIELD_TYPE | _MISSING_TYPE = MISSING,\n default_factory: Callable[[], PROPS_FIELD_TYPE] | None = None,\n) -> PROPS_FIELD_TYPE:\n \"\"\"Create a field for a props class.\n\n Args:\n default: The default value for the field.\n default_factory: The default factory for the field.\n\n Returns:\n The field for the props class.\n\n Raises:\n ValueError: If both default and default_factory are specified.\n \"\"\"\n if default is not MISSING and default_factory is not None:\n msg = \"cannot specify both default and default_factory\"\n raise ValueError(msg)\n return PropsField( # pyright: ignore [reportReturnType]\n default=default,\n default_factory=default_factory,\n annotated_type=MISSING,\n )\n\n\n@dataclass_transform(field_specifiers=(props_field,))\nclass PropsBaseMeta(FieldBasedMeta):\n \"\"\"Meta class for PropsBase.\"\"\"\n\n @classmethod\n def _process_annotated_fields(\n cls,\n namespace: dict[str, Any],\n annotations: dict[str, Any],\n inherited_fields: dict[str, PropsField],\n ) -> dict[str, PropsField]:\n own_fields: dict[str, PropsField] = {}\n\n for key, annotation in annotations.items():\n value = namespace.get(key, MISSING)\n\n if value is MISSING:\n # Field with only annotation, no default value\n field = PropsField(annotated_type=annotation, default=None)\n elif not isinstance(value, PropsField):\n # Field with default value\n field = PropsField(annotated_type=annotation, default=value)\n else:\n # Field is already a PropsField, update annotation\n field = PropsField(\n annotated_type=annotation,\n default=value.default,\n default_factory=value.default_factory,\n )\n\n own_fields[key] = field\n\n return own_fields\n\n @classmethod\n def _create_field(\n cls,\n annotated_type: Any,\n default: Any = MISSING,\n default_factory: Callable[[], Any] | None = None,\n ) -> PropsField:\n return PropsField(\n annotated_type=annotated_type,\n default=default,\n default_factory=default_factory,\n )\n\n @classmethod\n def _finalize_fields(\n cls,\n namespace: dict[str, Any],\n inherited_fields: dict[str, PropsField],\n own_fields: dict[str, PropsField],\n ) -> None:\n # Call parent implementation\n super()._finalize_fields(namespace, inherited_fields, own_fields)\n\n # Add Pydantic compatibility\n namespace[\"__fields__\"] = namespace[\"_fields\"]\n\n\nclass PropsBase(metaclass=PropsBaseMeta):\n \"\"\"Base for a class containing props that can be serialized as a JS object.\"\"\"\n\n def __init__(self, **kwargs):\n \"\"\"Initialize the props with field values.\n\n Args:\n **kwargs: The field values to set.\n \"\"\"\n # Set field values from kwargs with nested object instantiation\n for key, value in kwargs.items():\n field_info = self.get_fields().get(key)\n if field_info:\n field_type = field_info.annotated_type\n\n # Check if this field expects a specific Props type and we got a dict\n if isinstance(value, dict):\n props_class = _get_props_subclass(field_type)\n if props_class is not None:\n value = props_class(**value)\n\n # Check if this field expects a list of Props and we got a list of dicts\n elif isinstance(value, list):\n element_type = _find_props_in_list_annotation(field_type)\n if element_type is not None:\n # Convert each dict in the list to the appropriate Props class\n value = [\n element_type(**item) if isinstance(item, dict) else item\n for item in value\n ]\n\n setattr(self, key, value)\n\n # Set default values for fields not provided\n for field_name, field in self.get_fields().items():\n if field_name not in kwargs:\n if field.default is not MISSING:\n setattr(self, field_name, field.default)\n elif field.default_factory is not None:\n setattr(self, field_name, field.default_factory())\n # Note: Fields with no default and no factory remain unset (required fields)\n\n # Convert EventHandler to EventChain\n args_specs = args_specs_from_fields(self.get_fields())\n for handler_name, args_spec in args_specs.items():\n if (handler := getattr(self, handler_name, None)) is not None:\n setattr(\n self,\n handler_name,\n EventChain.create(\n value=handler,\n args_spec=args_spec,\n key=handler_name,\n ),\n )\n\n @classmethod\n def get_fields(cls) -> dict[str, Any]:\n \"\"\"Get the fields of the object.\n\n Returns:\n The fields of the object.\n \"\"\"\n return getattr(cls, \"_fields\", {})\n\n def json(self) -> str:\n \"\"\"Convert the object to a json-like string.\n\n Vars will be unwrapped so they can represent actual JS var names and functions.\n\n Keys will be converted to camelCase.\n\n Returns:\n The object as a Javascript Object literal.\n \"\"\"\n return LiteralObjectVar.create({\n format.to_camel_case(key): value for key, value in self.dict().items()\n }).json()\n\n def dict(\n self,\n exclude_none: bool = True,\n include: set[str] | None = None,\n exclude: set[str] | None = None,\n **kwargs,\n ):\n \"\"\"Convert the object to a dictionary.\n\n Keys will be converted to camelCase.\n By default, None values are excluded (exclude_none=True).\n\n Args:\n exclude_none: Whether to exclude None values.\n include: Fields to include in the output.\n exclude: Fields to exclude from the output.\n **kwargs: Additional keyword arguments (for compatibility).\n\n Returns:\n The object as a dictionary.\n \"\"\"\n result = {}\n\n for field_name in self.get_fields():\n if hasattr(self, field_name):\n value = getattr(self, field_name)\n\n # Apply include/exclude filters\n if include is not None and field_name not in include:\n continue\n if exclude is not None and field_name in exclude:\n continue\n\n # Apply exclude_none logic\n if exclude_none and value is None:\n continue\n\n # Recursively convert nested structures\n value = self._convert_to_camel_case(\n value, exclude_none, include, exclude\n )\n\n # Convert key to camelCase\n camel_key = format.to_camel_case(field_name)\n result[camel_key] = value\n\n return result\n\n def _convert_to_camel_case(\n self,\n value: Any,\n exclude_none: bool = True,\n include: set[str] | None = None,\n exclude: set[str] | None = None,\n ) -> Any:\n \"\"\"Recursively convert nested dictionaries and lists to camelCase.\n\n Args:\n value: The value to convert.\n exclude_none: Whether to exclude None values.\n include: Fields to include in the output.\n exclude: Fields to exclude from the output.\n\n Returns:\n The converted value with camelCase keys.\n \"\"\"\n if isinstance(value, PropsBase):\n # Convert nested PropsBase objects\n return value.dict(\n exclude_none=exclude_none, include=include, exclude=exclude\n )\n if isinstance(value, dict):\n # Convert dictionary keys to camelCase\n return {\n format.to_camel_case(k): self._convert_to_camel_case(\n v, exclude_none, include, exclude\n )\n for k, v in value.items()\n if not (exclude_none and v is None)\n }\n if isinstance(value, (list, tuple)):\n # Convert list/tuple items recursively\n return [\n self._convert_to_camel_case(item, exclude_none, include, exclude)\n for item in value\n ]\n # Return primitive values as-is\n return value\n\n\n@serializer(to=dict)\ndef serialize_props_base(value: PropsBase) -> dict:\n \"\"\"Serialize a PropsBase instance.\n\n Unlike serialize_base, this preserves callables (lambdas) since they're\n needed for AG Grid and other components that process them on the frontend.\n\n Args:\n value: The PropsBase instance to serialize.\n\n Returns:\n Dictionary representation of the PropsBase instance.\n \"\"\"\n return value.dict()\n\n\nclass NoExtrasAllowedProps(PropsBase):\n \"\"\"A class that holds props to be passed or applied to a component with no extra props allowed.\"\"\"\n\n def __init__(self, component_name: str | None = None, **kwargs):\n \"\"\"Initialize the props with validation.\n\n Args:\n component_name: The custom name of the component.\n kwargs: Kwargs to initialize the props.\n\n Raises:\n InvalidPropValueError: If invalid props are passed on instantiation.\n \"\"\"\n component_name = component_name or type(self).__name__\n\n # Validate fields BEFORE setting them\n known_fields = set(self.__class__.get_fields().keys())\n provided_fields = set(kwargs.keys())\n invalid_fields = provided_fields - known_fields\n\n if invalid_fields:\n invalid_fields_str = \", \".join(invalid_fields)\n supported_props_str = \", \".join(f'\"{field}\"' for field in known_fields)\n msg = f\"Invalid prop(s) {invalid_fields_str} for {component_name!r}. Supported props are {supported_props_str}\"\n raise InvalidPropValueError(msg)\n\n # Use parent class initialization after validation\n super().__init__(**kwargs)\n" }, { "path": "reflex/components/radix/__init__.py", "content": "\"\"\"Namespace for components provided by @radix-ui packages.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex import RADIX_MAPPING\nfrom reflex.utils import lazy_loader\n\n_SUBMODULES: set[str] = {\"themes\", \"primitives\"}\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"\".join(k.split(\"components.radix.\")[-1]): v for k, v in RADIX_MAPPING.items()\n}\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/radix/primitives/__init__.py", "content": "\"\"\"Radix primitive components (https://www.radix-ui.com/primitives).\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex import RADIX_PRIMITIVES_MAPPING\nfrom reflex.utils import lazy_loader\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"\".join(k.split(\"components.radix.primitives.\")[-1]): v\n for k, v in RADIX_PRIMITIVES_MAPPING.items()\n} | {\"dialog\": [\"dialog\"]}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/radix/primitives/accordion.py", "content": "\"\"\"Radix accordion components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any, ClassVar, Literal\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.colors import color\nfrom reflex.components.core.cond import cond\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.radix.primitives.base import RadixPrimitiveComponent\nfrom reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler\nfrom reflex.style import Style\nfrom reflex.vars import get_uuid_string_var\nfrom reflex.vars.base import LiteralVar, Var\n\nLiteralAccordionType = Literal[\"single\", \"multiple\"]\nLiteralAccordionDir = Literal[\"ltr\", \"rtl\"]\nLiteralAccordionOrientation = Literal[\"vertical\", \"horizontal\"]\nLiteralAccordionVariant = Literal[\"classic\", \"soft\", \"surface\", \"outline\", \"ghost\"]\n\nDEFAULT_ANIMATION_DURATION = 250\nDEFAULT_ANIMATION_EASING = \"cubic-bezier(0.87, 0, 0.13, 1)\"\n\n\ndef _inherited_variant_selector(\n variant: Var[LiteralAccordionVariant] | LiteralAccordionVariant,\n *selectors: str,\n) -> str:\n \"\"\"Create a multi CSS selector for targeting variant against the given selectors.\n\n Args:\n variant: The variant to target.\n selectors: The selectors to apply the variant to (default &)\n\n Returns:\n A CSS selector that is more specific on elements that directly set the variant.\n \"\"\"\n if not selectors:\n selectors = (\"&\",)\n # Prefer the `data-variant` that is set directly on the selector,\n # but also inherit the `data-variant` from any parent element.\n return \", \".join([\n f\"{selector}[data-variant='{variant}'], *:where([data-variant='{variant}']) {selector}\"\n for selector in selectors\n ])\n\n\nclass AccordionComponent(RadixPrimitiveComponent):\n \"\"\"Base class for all @radix-ui/accordion components.\"\"\"\n\n library = \"@radix-ui/react-accordion@1.2.12\"\n\n # The color scheme of the component.\n color_scheme: Var[LiteralAccentColor]\n\n # The variant of the component.\n variant: Var[LiteralAccordionVariant]\n\n def add_style(self):\n \"\"\"Add style to the component.\"\"\"\n if self.color_scheme is not None:\n self.custom_attrs[\"data-accent-color\"] = self.color_scheme\n if self.variant is not None:\n self.custom_attrs[\"data-variant\"] = self.variant\n\n def _exclude_props(self) -> list[str]:\n return [\"color_scheme\", \"variant\"]\n\n\ndef on_value_change(value: Var[str | list[str]]) -> tuple[Var[str | list[str]]]:\n \"\"\"Handle the on_value_change event.\n\n Args:\n value: The value of the event.\n\n Returns:\n The value of the event.\n \"\"\"\n return (value,)\n\n\nclass AccordionRoot(AccordionComponent):\n \"\"\"An accordion component.\"\"\"\n\n tag = \"Root\"\n\n alias = \"RadixAccordionRoot\"\n\n # The type of accordion (single or multiple).\n type: Var[LiteralAccordionType]\n\n # The value of the item to expand.\n value: Var[str | Sequence[str]]\n\n # The default value of the item to expand.\n default_value: Var[str | Sequence[str]]\n\n # Whether or not the accordion is collapsible.\n collapsible: Var[bool]\n\n # Whether or not the accordion is disabled.\n disabled: Var[bool]\n\n # The reading direction of the accordion when applicable.\n dir: Var[LiteralAccordionDir]\n\n # The orientation of the accordion.\n orientation: Var[LiteralAccordionOrientation]\n\n # The radius of the accordion corners.\n radius: Var[LiteralRadius]\n\n # The time in milliseconds to animate open and close\n duration: Var[int] = LiteralVar.create(DEFAULT_ANIMATION_DURATION)\n\n # The easing function to use for the animation.\n easing: Var[str] = LiteralVar.create(DEFAULT_ANIMATION_EASING)\n\n # Whether to show divider lines between items.\n show_dividers: Var[bool]\n\n _valid_children: ClassVar[list[str]] = [\"AccordionItem\"]\n\n # Fired when the opened the accordions changes.\n on_value_change: EventHandler[on_value_change]\n\n def _exclude_props(self) -> list[str]:\n return [\n *super()._exclude_props(),\n \"radius\",\n \"duration\",\n \"easing\",\n \"show_dividers\",\n ]\n\n def add_style(self):\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n if self.radius is not None:\n self.custom_attrs[\"data-radius\"] = self.radius\n if self.variant is None:\n # The default variant is classic\n self.custom_attrs[\"data-variant\"] = \"classic\"\n\n style = {\n \"border_radius\": \"var(--radius-4)\",\n \"box_shadow\": f\"0 2px 10px {color('black', 1, alpha=True)}\",\n \"&[data-variant='classic']\": {\n \"background_color\": color(\"accent\", 9),\n \"box_shadow\": f\"0 2px 10px {color('black', 4, alpha=True)}\",\n },\n \"&[data-variant='soft']\": {\n \"background_color\": color(\"accent\", 3),\n },\n \"&[data-variant='outline']\": {\n \"border\": f\"1px solid {color('accent', 6)}\",\n },\n \"&[data-variant='surface']\": {\n \"border\": f\"1px solid {color('accent', 6)}\",\n \"background_color\": \"var(--accent-surface)\",\n },\n \"&[data-variant='ghost']\": {\n \"background_color\": \"none\",\n \"box_shadow\": \"None\",\n },\n \"--animation-duration\": f\"{self.duration}ms\",\n \"--animation-easing\": self.easing,\n }\n if self.show_dividers is not None:\n style[\"--divider-px\"] = cond(self.show_dividers, \"1px\", \"0\")\n else:\n style[\"&[data-variant='outline']\"][\"--divider-px\"] = \"1px\"\n style[\"&[data-variant='surface']\"][\"--divider-px\"] = \"1px\"\n return Style(style)\n\n\nclass AccordionItem(AccordionComponent):\n \"\"\"An accordion component.\"\"\"\n\n tag = \"Item\"\n\n alias = \"RadixAccordionItem\"\n\n # A unique identifier for the item.\n value: Var[str]\n\n # When true, prevents the user from interacting with the item.\n disabled: Var[bool]\n\n # The header of the accordion item.\n header: Var[Component | str]\n\n # The content of the accordion item.\n content: Var[Component | str | None] = Var.create(None)\n\n _valid_children: ClassVar[list[str]] = [\n \"AccordionHeader\",\n \"AccordionTrigger\",\n \"AccordionContent\",\n ]\n\n _valid_parents: ClassVar[list[str]] = [\"AccordionRoot\"]\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create an accordion item.\n\n Args:\n *children: The list of children to use if header and content are not provided.\n **props: Additional properties to apply to the accordion item.\n\n Returns:\n The accordion item.\n \"\"\"\n header = props.pop(\"header\", None)\n content = props.pop(\"content\", None)\n\n # The item requires a value to toggle (use a random unique name if not provided).\n value = props.pop(\"value\", get_uuid_string_var())\n\n if \"AccordionItem\" not in (\n cls_name := props.pop(\"class_name\", \"AccordionItem\")\n ):\n cls_name = f\"{cls_name} AccordionItem\"\n\n color_scheme = props.get(\"color_scheme\")\n variant = props.get(\"variant\")\n\n if (header is not None) and (content is not None):\n children = [\n AccordionHeader.create(\n AccordionTrigger.create(\n header,\n AccordionIcon.create(\n color_scheme=color_scheme,\n variant=variant,\n ),\n color_scheme=color_scheme,\n variant=variant,\n ),\n color_scheme=color_scheme,\n variant=variant,\n ),\n AccordionContent.create(\n content,\n color_scheme=color_scheme,\n variant=variant,\n ),\n ]\n\n return super().create(*children, value=value, **props, class_name=cls_name)\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n divider_style = f\"var(--divider-px) solid {color('gray', 6, alpha=True)}\"\n return {\n \"overflow\": \"hidden\",\n \"width\": \"100%\",\n \"margin_top\": \"1px\",\n \"border_top\": divider_style,\n \"&:first-child\": {\n \"margin_top\": 0,\n \"border_top\": 0,\n \"border_top_left_radius\": \"var(--radius-4)\",\n \"border_top_right_radius\": \"var(--radius-4)\",\n },\n \"&:last-child\": {\n \"border_bottom_left_radius\": \"var(--radius-4)\",\n \"border_bottom_right_radius\": \"var(--radius-4)\",\n },\n \"&:focus-within\": {\n \"position\": \"relative\",\n \"z_index\": 1,\n },\n _inherited_variant_selector(\"ghost\", \"&:first-child\"): {\n \"border_radius\": 0,\n \"border_top\": divider_style,\n },\n _inherited_variant_selector(\"ghost\", \"&:last-child\"): {\n \"border_radius\": 0,\n \"border_bottom\": divider_style,\n },\n }\n\n def _exclude_props(self) -> list[str]:\n return [\"header\", \"content\"]\n\n\nclass AccordionHeader(AccordionComponent):\n \"\"\"An accordion component.\"\"\"\n\n tag = \"Header\"\n\n alias = \"RadixAccordionHeader\"\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the Accordion header component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Accordion header Component.\n \"\"\"\n if \"AccordionHeader\" not in (\n cls_name := props.pop(\"class_name\", \"AccordionHeader\")\n ):\n cls_name = f\"{cls_name} AccordionHeader\"\n\n return super().create(*children, class_name=cls_name, **props)\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"display\": \"flex\",\n # Reset some values to ensure consistent styling without tailwind reset.\n \"margin\": \"0\",\n }\n\n\nclass AccordionTrigger(AccordionComponent):\n \"\"\"An accordion component.\"\"\"\n\n tag = \"Trigger\"\n\n alias = \"RadixAccordionTrigger\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the Accordion trigger component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Accordion trigger Component.\n \"\"\"\n if \"AccordionTrigger\" not in (\n cls_name := props.pop(\"class_name\", \"AccordionTrigger\")\n ):\n cls_name = f\"{cls_name} AccordionTrigger\"\n\n return super().create(*children, class_name=cls_name, **props)\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"color\": color(\"accent\", 11),\n \"font_size\": \"1.1em\",\n \"line_height\": 1,\n \"justify_content\": \"space-between\",\n \"align_items\": \"center\",\n \"flex\": 1,\n \"display\": \"flex\",\n \"padding\": \"var(--space-3) var(--space-4)\",\n \"width\": \"100%\",\n \"box_shadow\": f\"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}\",\n \"&[data-state='open'] > .AccordionChevron\": {\n \"transform\": \"rotate(180deg)\",\n },\n \"&:hover\": {\n \"background_color\": color(\"accent\", 4),\n },\n \"& > .AccordionChevron\": {\n \"transition\": \"transform var(--animation-duration) var(--animation-easing)\",\n },\n _inherited_variant_selector(\"classic\"): {\n \"color\": \"var(--accent-contrast)\",\n \"&:hover\": {\n \"background_color\": color(\"accent\", 10),\n },\n \"& > .AccordionChevron\": {\n \"color\": \"var(--accent-contrast)\",\n },\n },\n # Reset some values to ensure consistent styling without tailwind reset.\n \"background\": \"none\",\n \"border\": \"none\",\n }\n\n\nclass AccordionIcon(Icon):\n \"\"\"An accordion icon component.\"\"\"\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the Accordion icon component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Accordion icon Component.\n \"\"\"\n if \"AccordionChevron\" not in (\n cls_name := props.pop(\"class_name\", \"AccordionChevron\")\n ):\n cls_name = f\"{cls_name} AccordionChevron\"\n\n return super().create(tag=\"chevron_down\", class_name=cls_name, **props)\n\n\nSLIDE_DOWN = Var(\n r'keyframes({ from: { height: 0 }, to: { height: \"var(--radix-accordion-content-height)\" } })'\n)\nSLIDE_UP = Var(\n r'keyframes({ from: { height: \"var(--radix-accordion-content-height)\" }, to: { height: 0 } })'\n)\n\n\nclass AccordionContent(AccordionComponent):\n \"\"\"An accordion component.\"\"\"\n\n tag = \"Content\"\n\n alias = \"RadixAccordionContent\"\n\n def add_imports(self) -> dict:\n \"\"\"Add imports to the component.\n\n Returns:\n The imports of the component.\n \"\"\"\n return {\"@emotion/react\": \"keyframes\"}\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create the Accordion content component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Accordion content Component.\n \"\"\"\n if \"AccordionContent\" not in (\n cls_name := props.pop(\"class_name\", \"AccordionContent\")\n ):\n cls_name = f\"{cls_name} AccordionContent\"\n\n return super().create(*children, class_name=cls_name, **props)\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n slide_down = SLIDE_DOWN.to(str) + Var.create(\n \" var(--animation-duration) var(--animation-easing)\",\n )\n\n slide_up = SLIDE_UP.to(str) + Var.create(\n \" var(--animation-duration) var(--animation-easing)\",\n )\n\n return {\n \"overflow\": \"hidden\",\n \"color\": color(\"accent\", 11),\n \"padding_x\": \"var(--space-4)\",\n # Apply before and after content to avoid height animation jank.\n \"&:before, &:after\": {\n \"content\": \"' '\",\n \"display\": \"block\",\n \"height\": \"var(--space-3)\",\n },\n \"&[data-state='open']\": {\"animation\": slide_down},\n \"&[data-state='closed']\": {\"animation\": slide_up},\n _inherited_variant_selector(\"classic\"): {\n \"color\": \"var(--accent-contrast)\",\n },\n }\n\n\nclass Accordion(ComponentNamespace):\n \"\"\"Accordion component.\"\"\"\n\n content = staticmethod(AccordionContent.create)\n header = staticmethod(AccordionHeader.create)\n item = staticmethod(AccordionItem.create)\n icon = staticmethod(AccordionIcon.create)\n root = staticmethod(AccordionRoot.create)\n trigger = staticmethod(AccordionTrigger.create)\n\n\naccordion = Accordion()\n" }, { "path": "reflex/components/radix/primitives/base.py", "content": "\"\"\"The base component for Radix primitives.\"\"\"\n\nfrom typing import Any\n\nfrom reflex.components.component import Component\nfrom reflex.components.tags.tag import Tag\nfrom reflex.utils import format\nfrom reflex.vars.base import Var\n\n\nclass RadixPrimitiveComponent(Component):\n \"\"\"Basic component for radix Primitives.\"\"\"\n\n # Change the default rendered element for the one passed as a child.\n as_child: Var[bool]\n\n\nclass RadixPrimitiveComponentWithClassName(RadixPrimitiveComponent):\n \"\"\"Basic component for radix Primitives with a class name prop.\"\"\"\n\n def _render(self) -> Tag:\n return (\n super()\n ._render()\n .add_props(\n class_name=f\"{format.to_title_case(self.tag or '')} {self.class_name or ''}\"\n )\n )\n\n\nclass RadixPrimitiveTriggerComponent(RadixPrimitiveComponent):\n \"\"\"Base class for Trigger, Close, Cancel, and Accept components.\n\n These components trigger some action in an overlay component that depends on the\n on_click event, and thus if a child is provided and has on_click specified, it\n will overtake the internal action, unless it is wrapped in some inert component,\n in this case, a Flex.\n \"\"\"\n\n @classmethod\n def create(cls, *children: Any, **props: Any) -> Component:\n \"\"\"Create a new RadixPrimitiveTriggerComponent instance.\n\n Args:\n children: The children of the component.\n props: The properties of the component.\n\n Returns:\n The new RadixPrimitiveTriggerComponent instance.\n \"\"\"\n from reflex.components.el.elements.typography import Div\n\n for child in children:\n if \"on_click\" in getattr(child, \"event_triggers\", {}):\n children = (Div.create(*children),)\n break\n return super().create(*children, **props)\n" }, { "path": "reflex/components/radix/primitives/dialog.py", "content": "\"\"\"Interactive components provided by @radix-ui/react-dialog.\"\"\"\n\nfrom typing import Any, ClassVar\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.el import elements\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nfrom .base import RadixPrimitiveComponent, RadixPrimitiveTriggerComponent\n\n\nclass DialogElement(RadixPrimitiveComponent):\n \"\"\"Base class for all @radix-ui/react-dialog components.\"\"\"\n\n library = \"@radix-ui/react-dialog@1.1.15\"\n\n\nclass DialogRoot(DialogElement):\n \"\"\"Root component for Dialog.\"\"\"\n\n tag = \"Root\"\n alias = \"RadixPrimitiveDialogRoot\"\n\n # The controlled open state of the dialog.\n open: Var[bool]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.\n modal: Var[bool]\n\n _valid_children: ClassVar[list[str]] = [\n \"DialogTrigger\",\n \"DialogPortal\",\n ]\n\n\nclass DialogPortal(DialogElement):\n \"\"\"Portal component for Dialog.\"\"\"\n\n tag = \"Portal\"\n alias = \"RadixPrimitiveDialogPortal\"\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by Dialog.Overlay and Dialog.Content.\n force_mount: Var[bool]\n\n # Specify a container element to portal the content into.\n container: Var[Any]\n\n _valid_parents: ClassVar[list[str]] = [\"DialogRoot\"]\n\n\nclass DialogOverlay(DialogElement):\n \"\"\"A layer that covers the inert portion of the view when the dialog is open.\"\"\"\n\n tag = \"Overlay\"\n alias = \"RadixPrimitiveDialogOverlay\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.\n force_mount: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"DialogPortal\"]\n\n\nclass DialogTrigger(DialogElement, RadixPrimitiveTriggerComponent):\n \"\"\"Trigger an action or event, to open a Dialog modal.\"\"\"\n\n tag = \"Trigger\"\n alias = \"RadixPrimitiveDialogTrigger\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n _valid_parents: ClassVar[list[str]] = [\"DialogRoot\"]\n\n\nclass DialogContent(elements.Div, DialogElement):\n \"\"\"Content component to display inside a Dialog modal.\"\"\"\n\n tag = \"Content\"\n alias = \"RadixPrimitiveDialogContent\"\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.\n force_mount: Var[bool]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Fired when the dialog is opened.\n on_open_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the dialog is closed.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the dialog.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when the pointer interacts outside the dialog.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n _valid_parents: ClassVar[list[str]] = [\"DialogPortal\"]\n\n\nclass DialogTitle(DialogElement):\n \"\"\"Title component to display inside a Dialog modal.\"\"\"\n\n tag = \"Title\"\n alias = \"RadixPrimitiveDialogTitle\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n\nclass DialogDescription(DialogElement):\n \"\"\"Description component to display inside a Dialog modal.\"\"\"\n\n tag = \"Description\"\n alias = \"RadixPrimitiveDialogDescription\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n\nclass DialogClose(DialogElement, RadixPrimitiveTriggerComponent):\n \"\"\"Close button component to close an open Dialog modal.\"\"\"\n\n tag = \"Close\"\n alias = \"RadixPrimitiveDialogClose\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n\nclass Dialog(ComponentNamespace):\n \"\"\"Dialog components namespace.\"\"\"\n\n root = __call__ = staticmethod(DialogRoot.create)\n portal = staticmethod(DialogPortal.create)\n trigger = staticmethod(DialogTrigger.create)\n title = staticmethod(DialogTitle.create)\n overlay = staticmethod(DialogOverlay.create)\n content = staticmethod(DialogContent.create)\n description = staticmethod(DialogDescription.create)\n close = staticmethod(DialogClose.create)\n\n\ndialog = Dialog()\n" }, { "path": "reflex/components/radix/primitives/drawer.py", "content": "\"\"\"Drawer components based on Radix primitives.\"\"\"\n\n# Based on Vaul: https://github.com/emilkowalski/vaul\n# Style based on https://ui.shadcn.com/docs/components/drawer\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any, Literal\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.radix.primitives.base import RadixPrimitiveComponent\nfrom reflex.components.radix.themes.base import Theme\nfrom reflex.components.radix.themes.layout.flex import Flex\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\n\nclass DrawerComponent(RadixPrimitiveComponent):\n \"\"\"A Drawer component.\"\"\"\n\n library = \"vaul@1.1.2\"\n\n lib_dependencies: list[str] = [\"@radix-ui/react-dialog@1.1.15\"]\n\n\nLiteralDirectionType = Literal[\"top\", \"bottom\", \"left\", \"right\"]\n\n\nclass DrawerRoot(DrawerComponent):\n \"\"\"The Root component of a Drawer, contains all parts of a drawer.\"\"\"\n\n tag = \"Drawer.Root\"\n\n alias = \"Vaul\" + tag\n\n # The open state of the drawer when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # Whether the drawer is open or not.\n open: Var[bool]\n\n # Fires when the drawer is opened or closed.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # When `False`, it allows interaction with elements outside of the drawer without closing it. Defaults to `True`.\n modal: Var[bool]\n\n # Direction of the drawer. This adjusts the animations and the drag direction. Defaults to `\"bottom\"`\n direction: Var[LiteralDirectionType]\n\n # Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered.\n on_animation_end: EventHandler[passthrough_event_spec(bool)]\n\n # When `False`, dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in combination with the open prop, otherwise you won't be able to open/close the drawer.\n dismissible: Var[bool]\n\n # When `True`, dragging will only be possible by the handle.\n handle_only: Var[bool]\n\n # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.\n snap_points: Sequence[str | float] | None\n\n # Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.\n fade_from_index: Var[int]\n\n # Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms\n scroll_lock_timeout: Var[int]\n\n # When `True`, it prevents scroll restoration. Defaults to `True`.\n prevent_scroll_restoration: Var[bool]\n\n # Enable background scaling, it requires container element with `vaul-drawer-wrapper` attribute to scale its background.\n should_scale_background: Var[bool]\n\n # Number between 0 and 1 that determines when the drawer should be closed.\n close_threshold: Var[float]\n\n\nclass DrawerTrigger(DrawerComponent):\n \"\"\"The button that opens the dialog.\"\"\"\n\n tag = \"Drawer.Trigger\"\n\n alias = \"Vaul\" + tag\n\n # Defaults to true, if the first child acts as the trigger.\n as_child: Var[bool] = Var.create(True)\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n @classmethod\n def create(cls, *children: Any, **props: Any) -> Component:\n \"\"\"Create a new DrawerTrigger instance.\n\n Args:\n *children: The children of the element.\n **props: The properties of the element.\n\n Returns:\n The new DrawerTrigger instance.\n \"\"\"\n for child in children:\n if \"on_click\" in getattr(child, \"event_triggers\", {}):\n children = (Flex.create(*children),)\n break\n return super().create(*children, **props)\n\n\nclass DrawerPortal(DrawerComponent):\n \"\"\"Portals your drawer into the body.\"\"\"\n\n tag = \"Drawer.Portal\"\n\n alias = \"Vaul\" + tag\n\n\n# Based on https://www.radix-ui.com/primitives/docs/components/dialog#content\nclass DrawerContent(DrawerComponent):\n \"\"\"Content that should be rendered in the drawer.\"\"\"\n\n tag = \"Drawer.Content\"\n\n alias = \"Vaul\" + tag\n\n # Style set partially based on the source code at https://ui.shadcn.com/docs/components/drawer\n def add_style(self) -> dict:\n \"\"\"Get the style for the component.\n\n Returns:\n The dictionary of the component style as value and the style notation as key.\n \"\"\"\n return {\n \"left\": \"0\",\n \"right\": \"0\",\n \"bottom\": \"0\",\n \"top\": \"0\",\n \"position\": \"fixed\",\n \"z_index\": 50,\n \"display\": \"flex\",\n }\n\n # Fired when the drawer content is opened.\n on_open_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the drawer content is closed.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the drawer content.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when interacting outside the drawer content.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a Drawer Content.\n We wrap the Drawer content in an `rx.theme` to make radix themes definitions available to\n rendered div in the DOM. This is because Vaul Drawer injects the Drawer overlay content in a sibling\n div to the root div rendered by radix which contains styling definitions. Wrapping in `rx.theme`\n makes the styling available to the overlay.\n\n Args:\n *children: The list of children to use.\n **props: Additional properties to apply to the drawer content.\n\n Returns:\n The drawer content.\n \"\"\"\n comp = super().create(*children, **props)\n\n return Theme.create(comp)\n\n\nclass DrawerOverlay(DrawerComponent):\n \"\"\"A layer that covers the inert portion of the view when the dialog is open.\"\"\"\n\n tag = \"Drawer.Overlay\"\n\n alias = \"Vaul\" + tag\n\n # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer\n def add_style(self) -> dict:\n \"\"\"Get the style for the component.\n\n Returns:\n The dictionary of the component style as value and the style notation as key.\n \"\"\"\n return {\n \"position\": \"fixed\",\n \"left\": \"0\",\n \"right\": \"0\",\n \"bottom\": \"0\",\n \"top\": \"0\",\n \"z_index\": 50,\n \"background\": \"rgba(0, 0, 0, 0.5)\",\n }\n\n\nclass DrawerClose(DrawerTrigger):\n \"\"\"A button that closes the drawer.\"\"\"\n\n tag = \"Drawer.Close\"\n\n alias = \"Vaul\" + tag\n\n\nclass DrawerTitle(DrawerComponent):\n \"\"\"A title for the drawer.\"\"\"\n\n tag = \"Drawer.Title\"\n\n alias = \"Vaul\" + tag\n\n # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer\n def add_style(self) -> dict:\n \"\"\"Get the style for the component.\n\n Returns:\n The dictionary of the component style as value and the style notation as key.\n \"\"\"\n return {\n \"font-size\": \"1.125rem\",\n \"font-weight\": \"600\",\n \"line-height\": \"1\",\n \"letter-spacing\": \"-0.05em\",\n }\n\n\nclass DrawerDescription(DrawerComponent):\n \"\"\"A description for the drawer.\"\"\"\n\n tag = \"Drawer.Description\"\n\n alias = \"Vaul\" + tag\n\n # Style set based on the source code at https://ui.shadcn.com/docs/components/drawer\n def add_style(self) -> dict:\n \"\"\"Get the style for the component.\n\n Returns:\n The dictionary of the component style as value and the style notation as key.\n \"\"\"\n return {\n \"font-size\": \"0.875rem\",\n }\n\n\nclass DrawerHandle(DrawerComponent):\n \"\"\"A description for the drawer.\"\"\"\n\n tag = \"Drawer.Handle\"\n\n alias = \"Vaul\" + tag\n\n\nclass Drawer(ComponentNamespace):\n \"\"\"A namespace for Drawer components.\"\"\"\n\n root = __call__ = staticmethod(DrawerRoot.create)\n trigger = staticmethod(DrawerTrigger.create)\n portal = staticmethod(DrawerPortal.create)\n content = staticmethod(DrawerContent.create)\n overlay = staticmethod(DrawerOverlay.create)\n close = staticmethod(DrawerClose.create)\n title = staticmethod(DrawerTitle.create)\n description = staticmethod(DrawerDescription.create)\n handle = staticmethod(DrawerHandle.create)\n\n\ndrawer = Drawer()\n" }, { "path": "reflex/components/radix/primitives/form.py", "content": "\"\"\"Radix form component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.debounce import DebounceInput\nfrom reflex.components.el.elements.forms import Form as HTMLForm\nfrom reflex.components.radix.themes.components.text_field import TextFieldRoot\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.vars.base import Var\n\nfrom .base import RadixPrimitiveComponentWithClassName\n\n\nclass FormComponent(RadixPrimitiveComponentWithClassName):\n \"\"\"Base class for all @radix-ui/react-form components.\"\"\"\n\n library = \"@radix-ui/react-form@0.1.8\"\n\n\nclass FormRoot(FormComponent, HTMLForm):\n \"\"\"The root component of a radix form.\"\"\"\n\n tag = \"Root\"\n\n alias = \"RadixFormRoot\"\n\n # Fired when the errors are cleared.\n on_clear_server_errors: EventHandler[no_args_event_spec]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\"width\": \"100%\"}\n\n\nclass FormField(FormComponent):\n \"\"\"A form field component.\"\"\"\n\n tag = \"Field\"\n\n alias = \"RadixFormField\"\n\n # The name of the form field, that is passed down to the control and used to match with validation messages.\n name: Var[str]\n\n # Flag to mark the form field as invalid, for server side validation.\n server_invalid: Var[bool]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\"display\": \"grid\", \"margin_bottom\": \"10px\"}\n\n\nclass FormLabel(FormComponent):\n \"\"\"A form label component.\"\"\"\n\n tag = \"Label\"\n\n alias = \"RadixFormLabel\"\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\"font_size\": \"15px\", \"font_weight\": \"500\", \"line_height\": \"35px\"}\n\n\nclass FormControl(FormComponent):\n \"\"\"A form control component.\"\"\"\n\n tag = \"Control\"\n\n alias = \"RadixFormControl\"\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a Form Control component.\n\n Args:\n *children: The children of the form.\n **props: The properties of the form.\n\n Returns:\n The form control component.\n\n Raises:\n ValueError: If the number of children is greater than 1.\n TypeError: If a child exists but it is not a TextFieldInput.\n \"\"\"\n if len(children) > 1:\n msg = f\"FormControl can only have at most one child, got {len(children)} children\"\n raise ValueError(msg)\n for child in children:\n if not isinstance(child, (TextFieldRoot, DebounceInput)):\n msg = \"Only Radix TextFieldRoot and DebounceInput are allowed as children of FormControl\"\n raise TypeError(msg)\n return super().create(*children, **props)\n\n\nLiteralMatcher = Literal[\n \"badInput\",\n \"patternMismatch\",\n \"rangeOverflow\",\n \"rangeUnderflow\",\n \"stepMismatch\",\n \"tooLong\",\n \"tooShort\",\n \"typeMismatch\",\n \"valid\",\n \"valueMissing\",\n]\n\n\nclass FormMessage(FormComponent):\n \"\"\"A form message component.\"\"\"\n\n tag = \"Message\"\n\n alias = \"RadixFormMessage\"\n\n # Used to target a specific field by name when rendering outside of a Field part.\n name: Var[str]\n\n # Used to indicate on which condition the message should be visible.\n match: Var[LiteralMatcher]\n\n # Forces the message to be shown. This is useful when using server-side validation.\n force_match: Var[bool]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\"font_size\": \"13px\", \"opacity\": \"0.8\", \"color\": \"white\"}\n\n\nclass FormValidityState(FormComponent):\n \"\"\"A form validity state component.\"\"\"\n\n tag = \"ValidityState\"\n alias = \"RadixFormValidityState\"\n\n\nclass FormSubmit(FormComponent):\n \"\"\"A form submit component.\"\"\"\n\n tag = \"Submit\"\n alias = \"RadixFormSubmit\"\n\n\n# This class is created mainly for reflex-web docs.\nclass Form(FormRoot):\n \"\"\"The Form component.\"\"\"\n\n\nclass FormNamespace(ComponentNamespace):\n \"\"\"Form components.\"\"\"\n\n root = staticmethod(FormRoot.create)\n control = staticmethod(FormControl.create)\n field = staticmethod(FormField.create)\n label = staticmethod(FormLabel.create)\n message = staticmethod(FormMessage.create)\n submit = staticmethod(FormSubmit.create)\n validity_state = staticmethod(FormValidityState.create)\n __call__ = staticmethod(Form.create)\n\n\nform = FormNamespace()\n" }, { "path": "reflex/components/radix/primitives/progress.py", "content": "\"\"\"Progress.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.colors import color\nfrom reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION\nfrom reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName\nfrom reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius\nfrom reflex.vars.base import Var\n\n\nclass ProgressComponent(RadixPrimitiveComponentWithClassName):\n \"\"\"A Progress component.\"\"\"\n\n library = \"@radix-ui/react-progress@1.1.8\"\n\n\nclass ProgressRoot(ProgressComponent):\n \"\"\"The Progress Root component.\"\"\"\n\n tag = \"Root\"\n alias = \"RadixProgressRoot\"\n\n # Override theme radius for progress bar: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n if self.radius is not None:\n self.custom_attrs[\"data-radius\"] = self.radius\n\n return {\n \"position\": \"relative\",\n \"overflow\": \"hidden\",\n \"background\": color(\"gray\", 3, alpha=True),\n \"border_radius\": \"max(var(--radius-2), var(--radius-full))\",\n \"width\": \"100%\",\n \"height\": \"20px\",\n \"boxShadow\": f\"inset 0 0 0 1px {color('gray', 5, alpha=True)}\",\n }\n\n def _exclude_props(self) -> list[str]:\n return [\"radius\"]\n\n\nclass ProgressIndicator(ProgressComponent):\n \"\"\"The Progress bar indicator.\"\"\"\n\n tag = \"Indicator\"\n\n alias = \"RadixProgressIndicator\"\n\n # The current progress value.\n value: Var[int | None]\n\n # The maximum progress value.\n max: Var[int | None]\n\n # The color scheme of the progress indicator.\n color_scheme: Var[LiteralAccentColor]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n if self.color_scheme is not None:\n self.custom_attrs[\"data-accent-color\"] = self.color_scheme\n\n return {\n \"background_color\": color(\"accent\", 9),\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"transition\": f\"transform {DEFAULT_ANIMATION_DURATION}ms linear\",\n \"&[data_state='loading']\": {\n \"transition\": f\"transform {DEFAULT_ANIMATION_DURATION}ms linear\",\n },\n \"transform\": f\"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))\",\n \"boxShadow\": \"inset 0 0 0 1px var(--gray-a5)\",\n }\n\n def _exclude_props(self) -> list[str]:\n return [\"color_scheme\"]\n\n\nclass Progress(ProgressRoot):\n \"\"\"The high-level Progress component.\"\"\"\n\n # Override theme color for progress bar indicator\n color_scheme: Var[LiteralAccentColor]\n\n # The current progress value.\n value: Var[int | None]\n\n # The maximum progress value.\n max: Var[int | None]\n\n @classmethod\n def create(cls, **props) -> Component:\n \"\"\"High-level API for progress bar.\n\n Args:\n **props: The props of the progress bar.\n\n Returns:\n The progress bar.\n \"\"\"\n progress_indicator_props = {}\n if \"color_scheme\" in props:\n progress_indicator_props[\"color_scheme\"] = props.pop(\"color_scheme\")\n\n return ProgressRoot.create(\n ProgressIndicator.create(\n value=props.pop(\"value\", 0),\n max=props.pop(\"max\", 100),\n **progress_indicator_props,\n ),\n **props,\n )\n\n\nclass ProgressNamespace(ComponentNamespace):\n \"\"\"High-level API for progress bar.\"\"\"\n\n root = staticmethod(ProgressRoot.create)\n indicator = staticmethod(ProgressIndicator.create)\n __call__ = staticmethod(Progress.create)\n\n\nprogress = ProgressNamespace()\n" }, { "path": "reflex/components/radix/primitives/slider.py", "content": "\"\"\"Radix slider components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any, Literal\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nLiteralSliderOrientation = Literal[\"horizontal\", \"vertical\"]\nLiteralSliderDir = Literal[\"ltr\", \"rtl\"]\n\n\nclass SliderComponent(RadixPrimitiveComponentWithClassName):\n \"\"\"Base class for all @radix-ui/react-slider components.\"\"\"\n\n library = \"@radix-ui/react-slider@1.3.6\"\n\n\nclass SliderRoot(SliderComponent):\n \"\"\"The Slider component containing all slider parts.\"\"\"\n\n tag = \"Root\"\n alias = \"RadixSliderRoot\"\n\n default_value: Var[Sequence[int]]\n\n value: Var[Sequence[int]]\n\n name: Var[str]\n\n disabled: Var[bool]\n\n orientation: Var[LiteralSliderOrientation]\n\n dir: Var[LiteralSliderDir]\n\n inverted: Var[bool]\n\n min: Var[int]\n\n max: Var[int]\n\n step: Var[int]\n\n min_steps_between_thumbs: Var[int]\n\n # Fired when the value of a thumb changes.\n on_value_change: EventHandler[passthrough_event_spec(list[float])]\n\n # Fired when a thumb is released.\n on_value_commit: EventHandler[passthrough_event_spec(list[float])]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"position\": \"relative\",\n \"display\": \"flex\",\n \"align_items\": \"center\",\n \"user_select\": \"none\",\n \"touch_action\": \"none\",\n \"width\": \"200px\",\n \"height\": \"20px\",\n \"&[data-orientation='vertical']\": {\n \"flex_direction\": \"column\",\n \"width\": \"20px\",\n \"height\": \"100px\",\n },\n }\n\n\nclass SliderTrack(SliderComponent):\n \"\"\"A Slider Track component.\"\"\"\n\n tag = \"Track\"\n alias = \"RadixSliderTrack\"\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"position\": \"relative\",\n \"flex_grow\": \"1\",\n \"background_color\": \"black\",\n \"border_radius\": \"9999px\",\n \"height\": \"3px\",\n \"&[data-orientation='vertical']\": {\"width\": \"3px\"},\n }\n\n\nclass SliderRange(SliderComponent):\n \"\"\"A SliderRange component.\"\"\"\n\n tag = \"Range\"\n alias = \"RadixSliderRange\"\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"position\": \"absolute\",\n \"background_color\": \"white\",\n \"height\": \"100%\",\n \"&[data-orientation='vertical']\": {\"width\": \"100%\"},\n }\n\n\nclass SliderThumb(SliderComponent):\n \"\"\"A SliderThumb component.\"\"\"\n\n tag = \"Thumb\"\n alias = \"RadixSliderThumb\"\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"display\": \"block\",\n \"width\": \"20px\",\n \"height\": \"20px\",\n \"background_color\": \"black\",\n \"box_shadow\": \"0 2px 10px black\",\n \"border_radius\": \"10px\",\n \"&:hover\": {\n \"background_color\": \"gray\",\n },\n \"&:focus\": {\n \"outline\": \"none\",\n \"box_shadow\": \"0 0 0 4px gray\",\n },\n }\n\n\nclass Slider(ComponentNamespace):\n \"\"\"High level API for slider.\"\"\"\n\n root = staticmethod(SliderRoot.create)\n track = staticmethod(SliderTrack.create)\n range = staticmethod(SliderRange.create)\n thumb = staticmethod(SliderThumb.create)\n\n @staticmethod\n def __call__(**props) -> Component:\n \"\"\"High level API for slider.\n\n Args:\n **props: The props of the slider.\n\n Returns:\n A slider component.\n \"\"\"\n track = SliderTrack.create(SliderRange.create())\n # if default_value is not set, the thumbs will not render properly but the slider will still work\n if \"default_value\" in props:\n children = [\n track,\n *[SliderThumb.create() for _ in props.get(\"default_value\", [])],\n ]\n else:\n children = [\n track,\n # Foreach.create(props.get(\"value\"), lambda e: SliderThumb.create()), # foreach doesn't render Thumbs properly # noqa: ERA001\n ]\n\n return SliderRoot.create(*children, **props)\n\n\nslider = Slider()\n" }, { "path": "reflex/components/radix/themes/__init__.py", "content": "\"\"\"Namespace for components provided by the @radix-ui/themes library.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_SUBMODULES: set[str] = {\"components\", \"layout\", \"typography\"}\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"base\": [\n \"theme\",\n \"theme_panel\",\n ],\n \"color_mode\": [\n \"color_mode\",\n ],\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submodules=_SUBMODULES,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/radix/themes/base.py", "content": "\"\"\"Base classes for radix-themes components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, ClassVar, Literal\n\nfrom reflex.components import Component\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.tags import Tag\nfrom reflex.utils.imports import ImportDict, ImportVar\nfrom reflex.vars.base import Var\n\nLiteralAlign = Literal[\"start\", \"center\", \"end\", \"baseline\", \"stretch\"]\nLiteralJustify = Literal[\"start\", \"center\", \"end\", \"between\"]\nLiteralSpacing = Literal[\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]\nLiteralVariant = Literal[\"classic\", \"solid\", \"soft\", \"surface\", \"outline\", \"ghost\"]\nLiteralAppearance = Literal[\"inherit\", \"light\", \"dark\"]\nLiteralGrayColor = Literal[\"gray\", \"mauve\", \"slate\", \"sage\", \"olive\", \"sand\", \"auto\"]\nLiteralPanelBackground = Literal[\"solid\", \"translucent\"]\nLiteralRadius = Literal[\"none\", \"small\", \"medium\", \"large\", \"full\"]\nLiteralScaling = Literal[\"90%\", \"95%\", \"100%\", \"105%\", \"110%\"]\nLiteralAccentColor = Literal[\n \"tomato\",\n \"red\",\n \"ruby\",\n \"crimson\",\n \"pink\",\n \"plum\",\n \"purple\",\n \"violet\",\n \"iris\",\n \"indigo\",\n \"blue\",\n \"cyan\",\n \"teal\",\n \"jade\",\n \"green\",\n \"grass\",\n \"brown\",\n \"orange\",\n \"sky\",\n \"mint\",\n \"lime\",\n \"yellow\",\n \"amber\",\n \"gold\",\n \"bronze\",\n \"gray\",\n]\n\n\nclass CommonMarginProps(Component):\n \"\"\"Many radix-themes elements accept shorthand margin props.\"\"\"\n\n # Margin: \"0\" - \"9\" # noqa: ERA001\n m: Var[LiteralSpacing]\n\n # Margin horizontal: \"0\" - \"9\"\n mx: Var[LiteralSpacing]\n\n # Margin vertical: \"0\" - \"9\"\n my: Var[LiteralSpacing]\n\n # Margin top: \"0\" - \"9\"\n mt: Var[LiteralSpacing]\n\n # Margin right: \"0\" - \"9\"\n mr: Var[LiteralSpacing]\n\n # Margin bottom: \"0\" - \"9\"\n mb: Var[LiteralSpacing]\n\n # Margin left: \"0\" - \"9\"\n ml: Var[LiteralSpacing]\n\n\nclass CommonPaddingProps(Component):\n \"\"\"Many radix-themes elements accept shorthand padding props.\"\"\"\n\n # Padding: \"0\" - \"9\" # noqa: ERA001\n p: Var[Responsive[LiteralSpacing]]\n\n # Padding horizontal: \"0\" - \"9\"\n px: Var[Responsive[LiteralSpacing]]\n\n # Padding vertical: \"0\" - \"9\"\n py: Var[Responsive[LiteralSpacing]]\n\n # Padding top: \"0\" - \"9\"\n pt: Var[Responsive[LiteralSpacing]]\n\n # Padding right: \"0\" - \"9\"\n pr: Var[Responsive[LiteralSpacing]]\n\n # Padding bottom: \"0\" - \"9\"\n pb: Var[Responsive[LiteralSpacing]]\n\n # Padding left: \"0\" - \"9\"\n pl: Var[Responsive[LiteralSpacing]]\n\n\nclass RadixLoadingProp(Component):\n \"\"\"Base class for components that can be in a loading state.\"\"\"\n\n # If set, show an rx.spinner instead of the component children.\n loading: Var[bool]\n\n\nclass RadixThemesComponent(Component):\n \"\"\"Base class for all @radix-ui/themes components.\"\"\"\n\n library = \"@radix-ui/themes@3.3.0\"\n\n # \"Fake\" prop color_scheme is used to avoid shadowing CSS prop \"color\".\n _rename_props: ClassVar[dict[str, str]] = {\"colorScheme\": \"color\"}\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create a new component instance.\n\n Will prepend \"RadixThemes\" to the component tag to avoid conflicts with\n other UI libraries for common names, like Text and Button.\n\n Args:\n *children: Child components.\n **props: Component properties.\n\n Returns:\n A new component instance.\n \"\"\"\n component = super().create(*children, **props)\n if component.library is None:\n component.library = RadixThemesComponent.get_fields()[\n \"library\"\n ].default_value()\n component.alias = \"RadixThemes\" + (component.tag or type(component).__name__)\n return component\n\n @staticmethod\n def _get_app_wrap_components() -> dict[tuple[int, str], Component]:\n return {\n (45, \"RadixThemesColorModeProvider\"): RadixThemesColorModeProvider.create(),\n }\n\n\nclass RadixThemesTriggerComponent(RadixThemesComponent):\n \"\"\"Base class for Trigger, Close, Cancel, and Accept components.\n\n These components trigger some action in an overlay component that depends on the\n on_click event, and thus if a child is provided and has on_click specified, it\n will overtake the internal action, unless it is wrapped in some inert component,\n in this case, a Flex.\n \"\"\"\n\n @classmethod\n def create(cls, *children: Any, **props: Any) -> Component:\n \"\"\"Create a new RadixThemesTriggerComponent instance.\n\n Args:\n children: The children of the component.\n props: The properties of the component.\n\n Returns:\n The new RadixThemesTriggerComponent instance.\n \"\"\"\n from .layout.flex import Flex\n\n for child in children:\n if \"on_click\" in getattr(child, \"event_triggers\", {}):\n children = (Flex.create(*children),)\n break\n return super().create(*children, **props)\n\n\nclass Theme(RadixThemesComponent):\n \"\"\"A theme provider for radix components.\n\n This should be applied as `App.theme` to apply the theme to all radix\n components in the app with the given settings.\n\n It can also be used in a normal page to apply specified properties to all\n child elements as an override of the main theme.\n \"\"\"\n\n tag = \"Theme\"\n\n # Whether to apply the themes background color to the theme node. Defaults to True.\n has_background: Var[bool]\n\n # Override light or dark mode theme: \"inherit\" | \"light\" | \"dark\". Defaults to \"inherit\".\n appearance: Var[LiteralAppearance]\n\n # The color used for default buttons, typography, backgrounds, etc\n accent_color: Var[LiteralAccentColor]\n\n # The shade of gray, defaults to \"auto\".\n gray_color: Var[LiteralGrayColor]\n\n # Whether panel backgrounds are translucent: \"solid\" | \"translucent\" (default)\n panel_background: Var[LiteralPanelBackground]\n\n # Element border radius: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\". Defaults to \"medium\".\n radius: Var[LiteralRadius]\n\n # Scale of all theme items: \"90%\" | \"95%\" | \"100%\" | \"105%\" | \"110%\". Defaults to \"100%\"\n scaling: Var[LiteralScaling]\n\n @classmethod\n def create(\n cls,\n *children,\n color_mode: LiteralAppearance | None = None,\n theme_panel: bool = False,\n **props,\n ) -> Component:\n \"\"\"Create a new Radix Theme specification.\n\n Args:\n *children: Child components.\n color_mode: Map to appearance prop.\n theme_panel: Whether to include a panel for editing the theme.\n **props: Component properties.\n\n Returns:\n A new component instance.\n \"\"\"\n if color_mode is not None:\n props[\"appearance\"] = color_mode\n if theme_panel:\n children = [ThemePanel.create(), *children]\n return super().create(*children, **props)\n\n def add_imports(self) -> ImportDict | list[ImportDict]:\n \"\"\"Add imports for the Theme component.\n\n Returns:\n The import dict.\n \"\"\"\n return {\n \"$/utils/theme\": [ImportVar(tag=\"theme\", is_default=True)],\n }\n\n def _render(self, props: dict[str, Any] | None = None) -> Tag:\n tag = super()._render(props)\n return tag.add_props(\n css=Var(\n _js_expr=\"{...theme.styles.global[':root'], ...theme.styles.global.body}\"\n ),\n ).remove_props(\"appearance\")\n\n\nclass ThemePanel(RadixThemesComponent):\n \"\"\"Visual editor for creating and editing themes.\n\n Include as a child component of Theme to use in your app.\n \"\"\"\n\n tag = \"ThemePanel\"\n\n # Whether the panel is open. Defaults to False.\n default_open: Var[bool]\n\n def add_imports(self) -> dict[str, str]:\n \"\"\"Add imports for the ThemePanel component.\n\n Returns:\n The import dict.\n \"\"\"\n return {\"react\": \"useEffect\"}\n\n\nclass RadixThemesColorModeProvider(Component):\n \"\"\"React-themes integration for radix themes components.\"\"\"\n\n library = \"$/components/reflex/radix_themes_color_mode_provider\"\n tag = \"RadixThemesColorModeProvider\"\n is_default = True\n\n\ntheme = Theme.create\ntheme_panel = ThemePanel.create\n" }, { "path": "reflex/components/radix/themes/color_mode.py", "content": "\"\"\"A switch component for toggling color_mode.\n\nTo style components based on color mode, use style props with `color_mode_cond`:\n\n```\nrx.text(\n \"Hover over me\",\n _hover={\n \"background\": rx.color_mode_cond(\n light=\"var(--accent-2)\",\n dark=\"var(--accent-4)\",\n ),\n },\n)\n```\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, Literal, get_args\n\nfrom reflex.components.component import BaseComponent, field\nfrom reflex.components.core.cond import Cond, color_mode_cond, cond\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.radix.themes.components.dropdown_menu import dropdown_menu\nfrom reflex.components.radix.themes.components.switch import Switch\nfrom reflex.style import (\n LIGHT_COLOR_MODE,\n color_mode,\n resolved_color_mode,\n set_color_mode,\n toggle_color_mode,\n)\nfrom reflex.vars.base import Var\nfrom reflex.vars.sequence import LiteralArrayVar\n\nfrom .components.icon_button import IconButton\n\nDEFAULT_LIGHT_ICON: Icon = Icon.create(tag=\"sun\")\nDEFAULT_DARK_ICON: Icon = Icon.create(tag=\"moon\")\n\n\nclass ColorModeIcon(Cond):\n \"\"\"Displays the current color mode as an icon.\"\"\"\n\n @classmethod\n def create(\n cls,\n light_component: BaseComponent | None = None,\n dark_component: BaseComponent | None = None,\n ):\n \"\"\"Create an icon component based on color_mode.\n\n Args:\n light_component: the component to display when color mode is default\n dark_component: the component to display when color mode is dark (non-default)\n\n Returns:\n The conditionally rendered component\n \"\"\"\n return color_mode_cond(\n light=light_component or DEFAULT_LIGHT_ICON,\n dark=dark_component or DEFAULT_DARK_ICON,\n )\n\n\nLiteralPosition = Literal[\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"]\n\nposition_values: list[str] = list(get_args(LiteralPosition))\n\nposition_map: dict[str, list[str]] = {\n \"position\": position_values,\n \"left\": [\"top-left\", \"bottom-left\"],\n \"right\": [\"top-right\", \"bottom-right\"],\n \"top\": [\"top-left\", \"top-right\"],\n \"bottom\": [\"bottom-left\", \"bottom-right\"],\n}\n\n\n# needed to inverse contains for find\ndef _find(const: list[str], var: Any):\n return LiteralArrayVar.create(const).contains(var)\n\n\ndef _set_var_default(\n props: dict, position: Any, prop: str, default1: str, default2: str | Var = \"\"\n):\n props.setdefault(\n prop, cond(_find(position_map[prop], position), default1, default2)\n )\n\n\ndef _set_static_default(props: dict, position: Any, prop: str, default: str):\n if prop in position:\n props.setdefault(prop, default)\n\n\nclass ColorModeIconButton(IconButton):\n \"\"\"Icon Button for toggling light / dark mode via toggle_color_mode.\"\"\"\n\n # The position of the icon button. Follow document flow if None.\n position: LiteralPosition | Var[LiteralPosition] | None = field(\n default=None, is_javascript_property=False\n )\n\n # Allow picking the \"system\" value for the color mode.\n allow_system: bool = field(default=False, is_javascript_property=False)\n\n @classmethod\n def create(\n cls,\n **props,\n ):\n \"\"\"Create an icon button component that calls toggle_color_mode on click.\n\n Args:\n **props: The props to pass to the component.\n\n Returns:\n The button component.\n \"\"\"\n position: str | Var = props.pop(\"position\", None)\n allow_system = props.pop(\"allow_system\", False)\n\n # position is used to set nice defaults for positioning the icon button\n if isinstance(position, Var):\n _set_var_default(props, position, \"position\", \"fixed\", position)\n _set_var_default(props, position, \"bottom\", \"2rem\")\n _set_var_default(props, position, \"top\", \"2rem\")\n _set_var_default(props, position, \"left\", \"2rem\")\n _set_var_default(props, position, \"right\", \"2rem\")\n elif position is not None:\n if position in position_values:\n props.setdefault(\"position\", \"fixed\")\n _set_static_default(props, position, \"bottom\", \"2rem\")\n _set_static_default(props, position, \"top\", \"2rem\")\n _set_static_default(props, position, \"left\", \"2rem\")\n _set_static_default(props, position, \"right\", \"2rem\")\n else:\n props[\"position\"] = position\n\n props.setdefault(\"background\", \"transparent\")\n props.setdefault(\"color\", \"inherit\")\n props.setdefault(\"z_index\", \"20\")\n props.setdefault(\":hover\", {\"cursor\": \"pointer\"})\n\n if allow_system:\n\n def color_mode_item(_color_mode: Literal[\"light\", \"dark\", \"system\"]):\n return dropdown_menu.item(\n _color_mode.title(), on_click=set_color_mode(_color_mode)\n )\n\n return dropdown_menu.root(\n dropdown_menu.trigger(\n super().create(\n ColorModeIcon.create(),\n ),\n **props,\n ),\n dropdown_menu.content(\n color_mode_item(\"light\"),\n color_mode_item(\"dark\"),\n color_mode_item(\"system\"),\n ),\n )\n return IconButton.create(\n ColorModeIcon.create(),\n on_click=toggle_color_mode,\n **props,\n )\n\n\nclass ColorModeSwitch(Switch):\n \"\"\"Switch for toggling light / dark mode via toggle_color_mode.\"\"\"\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a switch component bound to color_mode.\n\n Args:\n *children: The children of the component.\n **props: The props to pass to the component.\n\n Returns:\n The switch component.\n \"\"\"\n return Switch.create(\n *children,\n checked=resolved_color_mode != LIGHT_COLOR_MODE,\n on_change=toggle_color_mode,\n **props,\n )\n\n\nclass ColorModeNamespace(Var):\n \"\"\"Namespace for color mode components.\"\"\"\n\n icon = staticmethod(ColorModeIcon.create)\n button = staticmethod(ColorModeIconButton.create)\n switch = staticmethod(ColorModeSwitch.create)\n\n\ncolor_mode = color_mode_var_and_namespace = ColorModeNamespace(\n _js_expr=color_mode._js_expr,\n _var_type=color_mode._var_type,\n _var_data=color_mode._get_all_var_data(),\n)\n" }, { "path": "reflex/components/radix/themes/components/__init__.py", "content": "\"\"\"Radix themes components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex import RADIX_THEMES_COMPONENTS_MAPPING\nfrom reflex.utils import lazy_loader\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"\".join(k.split(\"components.radix.themes.components.\")[-1]): v\n for k, v in RADIX_THEMES_COMPONENTS_MAPPING.items()\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/radix/themes/components/alert_dialog.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n RadixThemesComponent,\n RadixThemesTriggerComponent,\n)\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nLiteralContentSize = Literal[\"1\", \"2\", \"3\", \"4\"]\n\n\nclass AlertDialogRoot(RadixThemesComponent):\n \"\"\"Contains all the parts of the dialog.\"\"\"\n\n tag = \"AlertDialog.Root\"\n\n # The controlled open state of the dialog.\n open: Var[bool]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n\nclass AlertDialogTrigger(RadixThemesTriggerComponent):\n \"\"\"Wraps the control that will open the dialog.\"\"\"\n\n tag = \"AlertDialog.Trigger\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass AlertDialogContent(elements.Div, RadixThemesComponent):\n \"\"\"Contains the content of the dialog. This component is based on the div element.\"\"\"\n\n tag = \"AlertDialog.Content\"\n\n # The size of the content.\n size: Var[Responsive[LiteralContentSize]]\n\n # Whether to force mount the content on open.\n force_mount: Var[bool]\n\n # Fired when the dialog is opened.\n on_open_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the dialog is closed.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n\nclass AlertDialogTitle(RadixThemesComponent):\n \"\"\"An accessible title that is announced when the dialog is opened.\n This part is based on the Heading component with a pre-defined font size and\n leading trim on top.\n \"\"\"\n\n tag = \"AlertDialog.Title\"\n\n\nclass AlertDialogDescription(RadixThemesComponent):\n \"\"\"An optional accessible description that is announced when the dialog is opened.\n This part is based on the Text component with a pre-defined font size.\n \"\"\"\n\n tag = \"AlertDialog.Description\"\n\n\nclass AlertDialogAction(RadixThemesTriggerComponent):\n \"\"\"Wraps the control that will close the dialog. This should be distinguished\n visually from the Cancel control.\n \"\"\"\n\n tag = \"AlertDialog.Action\"\n\n\nclass AlertDialogCancel(RadixThemesTriggerComponent):\n \"\"\"Wraps the control that will close the dialog. This should be distinguished\n visually from the Action control.\n \"\"\"\n\n tag = \"AlertDialog.Cancel\"\n\n\nclass AlertDialog(ComponentNamespace):\n \"\"\"AlertDialog components namespace.\"\"\"\n\n root = staticmethod(AlertDialogRoot.create)\n trigger = staticmethod(AlertDialogTrigger.create)\n content = staticmethod(AlertDialogContent.create)\n title = staticmethod(AlertDialogTitle.create)\n description = staticmethod(AlertDialogDescription.create)\n action = staticmethod(AlertDialogAction.create)\n cancel = staticmethod(AlertDialogCancel.create)\n\n\nalert_dialog = AlertDialog()\n" }, { "path": "reflex/components/radix/themes/components/aspect_ratio.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass AspectRatio(RadixThemesComponent):\n \"\"\"Displays content with a desired ratio.\"\"\"\n\n tag = \"AspectRatio\"\n\n # The ratio of the width to the height of the element\n ratio: Var[float | int]\n\n\naspect_ratio = AspectRatio.create\n" }, { "path": "reflex/components/radix/themes/components/avatar.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nLiteralSize = Literal[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]\n\n\nclass Avatar(RadixThemesComponent):\n \"\"\"An image element with a fallback for representing the user.\"\"\"\n\n tag = \"Avatar\"\n\n # The variant of the avatar\n variant: Var[Literal[\"solid\", \"soft\"]]\n\n # The size of the avatar: \"1\" - \"9\"\n size: Var[Responsive[LiteralSize]]\n\n # Color theme of the avatar\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the avatar with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for avatar: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n # The src of the avatar image\n src: Var[str]\n\n # The rendered fallback text\n fallback: Var[str]\n\n\navatar = Avatar.create\n" }, { "path": "reflex/components/radix/themes/components/badge.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\n\nclass Badge(elements.Span, RadixThemesComponent):\n \"\"\"A stylized badge element.\"\"\"\n\n tag = \"Badge\"\n\n # The variant of the badge\n variant: Var[Literal[\"solid\", \"soft\", \"surface\", \"outline\"]]\n\n # The size of the badge\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Color theme of the badge\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the badge with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for badge: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n\nbadge = Badge.create\n" }, { "path": "reflex/components/radix/themes/components/button.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n LiteralVariant,\n RadixLoadingProp,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nLiteralButtonSize = Literal[\"1\", \"2\", \"3\", \"4\"]\n\n\nclass Button(elements.Button, RadixLoadingProp, RadixThemesComponent):\n \"\"\"Trigger an action or event, such as submitting a form or displaying a dialog.\"\"\"\n\n tag = \"Button\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Button size \"1\" - \"4\"\n size: Var[Responsive[LiteralButtonSize]]\n\n # Variant of button: \"solid\" | \"soft\" | \"outline\" | \"ghost\"\n variant: Var[LiteralVariant]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the button with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for button: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n\nbutton = Button.create\n" }, { "path": "reflex/components/radix/themes/components/callout.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nimport reflex as rx\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\nCalloutVariant = Literal[\"soft\", \"surface\", \"outline\"]\n\n\nclass CalloutRoot(elements.Div, RadixThemesComponent):\n \"\"\"Groups Icon and Text parts of a Callout.\"\"\"\n\n tag = \"Callout.Root\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Size \"1\" - \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button: \"soft\" | \"surface\" | \"outline\"\n variant: Var[CalloutVariant]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the button with higher contrast color against background\n high_contrast: Var[bool]\n\n\nclass CalloutIcon(elements.Div, RadixThemesComponent):\n \"\"\"Provides width and height for the icon associated with the callout.\"\"\"\n\n tag = \"Callout.Icon\"\n\n\nclass CalloutText(elements.P, RadixThemesComponent):\n \"\"\"Renders the callout text. This component is based on the p element.\"\"\"\n\n tag = \"Callout.Text\"\n\n\nclass Callout(CalloutRoot):\n \"\"\"A short message to attract user's attention.\"\"\"\n\n # The text of the callout.\n text: Var[str]\n\n # The icon of the callout.\n icon: Var[str]\n\n @classmethod\n def create(cls, text: str | Var[str], **props) -> Component:\n \"\"\"Create a callout component.\n\n Args:\n text: The text of the callout.\n **props: The properties of the component.\n\n Returns:\n The callout component.\n \"\"\"\n return CalloutRoot.create(\n (\n CalloutIcon.create(Icon.create(tag=props[\"icon\"]))\n if \"icon\" in props\n else rx.fragment()\n ),\n CalloutText.create(text),\n **props,\n )\n\n\nclass CalloutNamespace(ComponentNamespace):\n \"\"\"Callout components namespace.\"\"\"\n\n root = staticmethod(CalloutRoot.create)\n icon = staticmethod(CalloutIcon.create)\n text = staticmethod(CalloutText.create)\n __call__ = staticmethod(Callout.create)\n\n\ncallout = CalloutNamespace()\n" }, { "path": "reflex/components/radix/themes/components/card.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass Card(elements.Div, RadixThemesComponent):\n \"\"\"Container that groups related content and actions.\"\"\"\n\n tag = \"Card\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Card size: \"1\" - \"5\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\", \"4\", \"5\"],]]\n\n # Variant of Card: \"surface\" | \"classic\" | \"ghost\"\n variant: Var[Literal[\"surface\", \"classic\", \"ghost\"]]\n\n\ncard = Card.create\n" }, { "path": "reflex/components/radix/themes/components/checkbox.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralSpacing,\n RadixThemesComponent,\n)\nfrom reflex.components.radix.themes.layout.flex import Flex\nfrom reflex.components.radix.themes.typography.text import Text\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nLiteralCheckboxSize = Literal[\"1\", \"2\", \"3\"]\nLiteralCheckboxVariant = Literal[\"classic\", \"surface\", \"soft\"]\n\n\nclass Checkbox(RadixThemesComponent):\n \"\"\"Selects a single value, typically for submission in a form.\"\"\"\n\n tag = \"Checkbox\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Checkbox size \"1\" - \"3\"\n size: Var[Responsive[LiteralCheckboxSize]]\n\n # Variant of checkbox: \"classic\" | \"surface\" | \"soft\"\n variant: Var[LiteralCheckboxVariant]\n\n # Override theme color for checkbox\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the checkbox with higher contrast color against background\n high_contrast: Var[bool]\n\n # Whether the checkbox is checked by default\n default_checked: Var[bool]\n\n # Whether the checkbox is checked\n checked: Var[bool]\n\n # Whether the checkbox is disabled\n disabled: Var[bool]\n\n # Whether the checkbox is required\n required: Var[bool]\n\n # The name of the checkbox control when submitting the form.\n name: Var[str]\n\n # The value of the checkbox control when submitting the form.\n value: Var[str]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onCheckedChange\"}\n\n # Fired when the checkbox is checked or unchecked.\n on_change: EventHandler[passthrough_event_spec(bool)]\n\n\nclass HighLevelCheckbox(RadixThemesComponent):\n \"\"\"A checkbox component with a label.\"\"\"\n\n tag = \"Checkbox\"\n\n # The text label for the checkbox.\n text: Var[str]\n\n # The gap between the checkbox and the label.\n spacing: Var[LiteralSpacing]\n\n # The size of the checkbox \"1\" - \"3\".\n size: Var[LiteralCheckboxSize]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Variant of checkbox: \"classic\" | \"surface\" | \"soft\"\n variant: Var[LiteralCheckboxVariant]\n\n # Override theme color for checkbox\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the checkbox with higher contrast color against background\n high_contrast: Var[bool]\n\n # Whether the checkbox is checked by default\n default_checked: Var[bool]\n\n # Whether the checkbox is checked\n checked: Var[bool]\n\n # Whether the checkbox is disabled\n disabled: Var[bool]\n\n # Whether the checkbox is required\n required: Var[bool]\n\n # The name of the checkbox control when submitting the form.\n name: Var[str]\n\n # The value of the checkbox control when submitting the form.\n value: Var[str]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onCheckedChange\"}\n\n # Fired when the checkbox is checked or unchecked.\n on_change: EventHandler[passthrough_event_spec(bool)]\n\n @classmethod\n def create(cls, text: Var[str] = Var.create(\"\"), **props) -> Component:\n \"\"\"Create a checkbox with a label.\n\n Args:\n text: The text of the label.\n **props: Additional properties to apply to the checkbox item.\n\n Returns:\n The checkbox component with a label.\n \"\"\"\n spacing = props.pop(\"spacing\", \"2\")\n size = props.pop(\"size\", \"2\")\n flex_props = {}\n if \"gap\" in props:\n flex_props[\"gap\"] = props.pop(\"gap\", None)\n\n return Text.create(\n Flex.create(\n Checkbox.create(\n size=size,\n **props,\n ),\n text,\n spacing=spacing,\n **flex_props,\n ),\n as_=\"label\",\n size=size,\n )\n\n\nclass CheckboxNamespace(ComponentNamespace):\n \"\"\"Checkbox components namespace.\"\"\"\n\n __call__ = staticmethod(HighLevelCheckbox.create)\n\n\ncheckbox = CheckboxNamespace()\n" }, { "path": "reflex/components/radix/themes/components/checkbox_cards.py", "content": "\"\"\"Components for the Radix CheckboxCards component.\"\"\"\n\nfrom types import SimpleNamespace\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass CheckboxCardsRoot(RadixThemesComponent):\n \"\"\"Root element for a CheckboxCards component.\"\"\"\n\n tag = \"CheckboxCards.Root\"\n\n # The size of the checkbox cards: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button: \"classic\" | \"surface\" | \"soft\"\n variant: Var[Literal[\"classic\", \"surface\"]]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Uses a higher contrast color for the component.\n high_contrast: Var[bool]\n\n # The number of columns:\n columns: Var[Responsive[str | Literal[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]]]\n\n # The gap between the checkbox cards:\n gap: Var[Responsive[str | Literal[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]]]\n\n\nclass CheckboxCardsItem(RadixThemesComponent):\n \"\"\"An item in the CheckboxCards component.\"\"\"\n\n tag = \"CheckboxCards.Item\"\n\n\nclass CheckboxCards(SimpleNamespace):\n \"\"\"CheckboxCards components namespace.\"\"\"\n\n root = staticmethod(CheckboxCardsRoot.create)\n item = staticmethod(CheckboxCardsItem.create)\n\n\ncheckbox_cards = CheckboxCards()\n" }, { "path": "reflex/components/radix/themes/components/checkbox_group.py", "content": "\"\"\"Components for the CheckboxGroup component of Radix Themes.\"\"\"\n\nfrom collections.abc import Sequence\nfrom types import SimpleNamespace\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass CheckboxGroupRoot(RadixThemesComponent):\n \"\"\"Root element for a CheckboxGroup component.\"\"\"\n\n tag = \"CheckboxGroup.Root\"\n\n # Use the size prop to control the checkbox size.\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button: \"classic\" | \"surface\" | \"soft\"\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Uses a higher contrast color for the component.\n high_contrast: Var[bool]\n\n # determines which checkboxes, if any, are checked by default.\n default_value: Var[Sequence[str]]\n\n # used to assign a name to the entire group of checkboxes\n name: Var[str]\n\n\nclass CheckboxGroupItem(RadixThemesComponent):\n \"\"\"An item in the CheckboxGroup component.\"\"\"\n\n tag = \"CheckboxGroup.Item\"\n\n # specifies the value associated with a particular checkbox option.\n value: Var[str]\n\n # Use the native disabled attribute to create a disabled checkbox.\n disabled: Var[bool]\n\n\nclass CheckboxGroup(SimpleNamespace):\n \"\"\"CheckboxGroup components namespace.\"\"\"\n\n root = staticmethod(CheckboxGroupRoot.create)\n item = staticmethod(CheckboxGroupItem.create)\n\n\ncheckbox_group = CheckboxGroup()\n" }, { "path": "reflex/components/radix/themes/components/context_menu.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nfrom .checkbox import Checkbox\nfrom .radio_group import HighLevelRadioGroup\n\nLiteralDirType = Literal[\"ltr\", \"rtl\"]\n\nLiteralSizeType = Literal[\"1\", \"2\"]\n\nLiteralVariantType = Literal[\"solid\", \"soft\"]\n\nLiteralSideType = Literal[\"top\", \"right\", \"bottom\", \"left\"]\n\nLiteralAlignType = Literal[\"start\", \"center\", \"end\"]\n\nLiteralStickyType = Literal[\n \"partial\",\n \"always\",\n]\n\n\nclass ContextMenuRoot(RadixThemesComponent):\n \"\"\"Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press.\"\"\"\n\n tag = \"ContextMenu.Root\"\n\n # The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n modal: Var[bool]\n\n _invalid_children: ClassVar[list[str]] = [\"ContextMenuItem\"]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.\n dir: Var[LiteralDirType]\n\n\nclass ContextMenuTrigger(RadixThemesComponent):\n \"\"\"Wraps the element that will open the context menu.\"\"\"\n\n tag = \"ContextMenu.Trigger\"\n\n # Whether the trigger is disabled\n disabled: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"ContextMenuRoot\"]\n\n _invalid_children: ClassVar[list[str]] = [\"ContextMenuContent\"]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass ContextMenuContent(RadixThemesComponent):\n \"\"\"The component that pops out when the context menu is open.\"\"\"\n\n tag = \"ContextMenu.Content\"\n\n # Dropdown Menu Content size \"1\" - \"2\"\n size: Var[Responsive[LiteralSizeType]]\n\n # Variant of Dropdown Menu Content: \"solid\" | \"soft\"\n variant: Var[LiteralVariantType]\n\n # Override theme color for Dropdown Menu Content\n color_scheme: Var[LiteralAccentColor]\n\n # Renders the Dropdown Menu Content in higher contrast\n high_contrast: Var[bool]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.\n loop: Var[bool]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n force_mount: Var[bool]\n\n # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to \"top\".\n side: Var[LiteralSideType]\n\n # The distance in pixels from the trigger. Defaults to 0.\n side_offset: Var[float | int]\n\n # The preferred alignment against the trigger. May change when collisions occur. Defaults to \"center\".\n align: Var[LiteralAlignType]\n\n # An offset in pixels from the \"start\" or \"end\" alignment options.\n align_offset: Var[float | int]\n\n # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { \"top\": 20, \"left\": 20 }. Defaults to 0.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless. Defaults to \"partial\".\n sticky: Var[LiteralStickyType]\n\n # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.\n hide_when_detached: Var[bool]\n\n # Fired when focus moves back after closing.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when a pointer down event happens outside the context menu.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when focus moves outside the context menu.\n on_focus_outside: EventHandler[no_args_event_spec]\n\n # Fired when the pointer interacts outside the context menu.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n\nclass ContextMenuSub(RadixThemesComponent):\n \"\"\"Contains all the parts of a submenu.\"\"\"\n\n tag = \"ContextMenu.Sub\"\n\n # The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.\n open: Var[bool]\n\n # The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n\nclass ContextMenuSubTrigger(RadixThemesComponent):\n \"\"\"An item that opens a submenu.\"\"\"\n\n tag = \"ContextMenu.SubTrigger\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # Whether the trigger is disabled\n disabled: Var[bool]\n\n # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.\n text_value: Var[str]\n\n _valid_parents: ClassVar[list[str]] = [\"ContextMenuContent\", \"ContextMenuSub\"]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass ContextMenuSubContent(RadixThemesComponent):\n \"\"\"The component that pops out when a submenu is open.\"\"\"\n\n tag = \"ContextMenu.SubContent\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.\n loop: Var[bool]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n force_mount: Var[bool]\n\n # The distance in pixels from the trigger. Defaults to 0.\n side_offset: Var[float | int]\n\n # An offset in pixels from the \"start\" or \"end\" alignment options.\n align_offset: Var[float | int]\n\n # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { \"top\": 20, \"left\": 20 }. Defaults to 0.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless. Defaults to \"partial\".\n sticky: Var[LiteralStickyType]\n\n # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.\n hide_when_detached: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"ContextMenuSub\"]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when a pointer down event happens outside the context menu.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when focus moves outside the context menu.\n on_focus_outside: EventHandler[no_args_event_spec]\n\n # Fired when interacting outside the context menu.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n\nclass ContextMenuItem(RadixThemesComponent):\n \"\"\"The component that contains the context menu items.\"\"\"\n\n tag = \"ContextMenu.Item\"\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Shortcut to render a menu item as a link\n shortcut: Var[str]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When true, prevents the user from interacting with the item.\n disabled: Var[bool]\n\n # Optional text used for typeahead purposes. By default the typeahead behavior will use the content of the item. Use this when the content is complex, or you have non-textual content inside.\n text_value: Var[str]\n\n _valid_parents: ClassVar[list[str]] = [\n \"ContextMenuContent\",\n \"ContextMenuSubContent\",\n \"ContextMenuGroup\",\n ]\n\n # Fired when the item is selected.\n on_select: EventHandler[no_args_event_spec]\n\n\nclass ContextMenuSeparator(RadixThemesComponent):\n \"\"\"Separates items in a context menu.\"\"\"\n\n tag = \"ContextMenu.Separator\"\n\n\nclass ContextMenuCheckbox(Checkbox):\n \"\"\"The component that contains the checkbox.\"\"\"\n\n tag = \"ContextMenu.CheckboxItem\"\n\n # Text to render as shortcut.\n shortcut: Var[str]\n\n\nclass ContextMenuLabel(RadixThemesComponent):\n \"\"\"The component that contains the label.\"\"\"\n\n tag = \"ContextMenu.Label\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n\nclass ContextMenuGroup(RadixThemesComponent):\n \"\"\"The component that contains the group.\"\"\"\n\n tag = \"ContextMenu.Group\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\n \"ContextMenuContent\",\n \"ContextMenuSubContent\",\n ]\n\n\nclass ContextMenuRadioGroup(RadixThemesComponent):\n \"\"\"The component that contains context menu radio items.\"\"\"\n\n tag = \"ContextMenu.RadioGroup\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # The value of the selected item in the group.\n value: Var[str]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n # Fired when the value of the radio group changes.\n on_change: EventHandler[passthrough_event_spec(str)]\n\n _valid_parents: ClassVar[list[str]] = [\n \"ContextMenuRadioItem\",\n \"ContextMenuSubContent\",\n \"ContextMenuContent\",\n \"ContextMenuSub\",\n ]\n\n\nclass ContextMenuRadioItem(HighLevelRadioGroup):\n \"\"\"The component that contains context menu radio items.\"\"\"\n\n tag = \"ContextMenu.RadioItem\"\n\n # Override theme color for Dropdown Menu Content\n color_scheme: Var[LiteralAccentColor]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # The unique value of the item.\n value: Var[str]\n\n # When true, prevents the user from interacting with the item.\n disabled: Var[bool]\n\n # Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the context menu from closing when selecting that item.\n on_select: EventHandler[no_args_event_spec]\n\n # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.\n text_value: Var[str]\n\n\nclass ContextMenu(ComponentNamespace):\n \"\"\"Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press.\"\"\"\n\n root = staticmethod(ContextMenuRoot.create)\n trigger = staticmethod(ContextMenuTrigger.create)\n content = staticmethod(ContextMenuContent.create)\n sub = staticmethod(ContextMenuSub.create)\n sub_trigger = staticmethod(ContextMenuSubTrigger.create)\n sub_content = staticmethod(ContextMenuSubContent.create)\n item = staticmethod(ContextMenuItem.create)\n separator = staticmethod(ContextMenuSeparator.create)\n checkbox = staticmethod(ContextMenuCheckbox.create)\n label = staticmethod(ContextMenuLabel.create)\n group = staticmethod(ContextMenuGroup.create)\n radio_group = staticmethod(ContextMenuRadioGroup.create)\n radio = staticmethod(ContextMenuRadioItem.create)\n\n\ncontext_menu = ContextMenu()\n" }, { "path": "reflex/components/radix/themes/components/data_list.py", "content": "\"\"\"Components for the DataList component of Radix Themes.\"\"\"\n\nfrom types import SimpleNamespace\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass DataListRoot(RadixThemesComponent):\n \"\"\"Root element for a DataList component.\"\"\"\n\n tag = \"DataList.Root\"\n\n # The orientation of the data list item: \"horizontal\" | \"vertical\"\n orientation: Var[Responsive[Literal[\"horizontal\", \"vertical\"]]]\n\n # The size of the data list item: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Trims the leading whitespace from the start or end of the text.\n trim: Var[Responsive[Literal[\"normal\", \"start\", \"end\", \"both\"]]]\n\n\nclass DataListItem(RadixThemesComponent):\n \"\"\"An item in the DataList component.\"\"\"\n\n tag = \"DataList.Item\"\n\n # The alignment of the data list item within its container.\n align: Var[Responsive[Literal[\"start\", \"center\", \"end\", \"baseline\", \"stretch\"]]]\n\n\nclass DataListLabel(RadixThemesComponent):\n \"\"\"A label in the DataList component.\"\"\"\n\n tag = \"DataList.Label\"\n\n # The width of the component\n width: Var[Responsive[str]]\n\n # The minimum width of the component\n min_width: Var[Responsive[str]]\n\n # The maximum width of the component\n max_width: Var[Responsive[str]]\n\n # The color scheme for the DataList component.\n color_scheme: Var[LiteralAccentColor]\n\n\nclass DataListValue(RadixThemesComponent):\n \"\"\"A value in the DataList component.\"\"\"\n\n tag = \"DataList.Value\"\n\n\nclass DataList(SimpleNamespace):\n \"\"\"DataList components namespace.\"\"\"\n\n root = staticmethod(DataListRoot.create)\n item = staticmethod(DataListItem.create)\n label = staticmethod(DataListLabel.create)\n value = staticmethod(DataListValue.create)\n\n\ndata_list = DataList()\n" }, { "path": "reflex/components/radix/themes/components/dialog.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n RadixThemesComponent,\n RadixThemesTriggerComponent,\n)\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\n\nclass DialogRoot(RadixThemesComponent):\n \"\"\"Root component for Dialog.\"\"\"\n\n tag = \"Dialog.Root\"\n\n # The controlled open state of the dialog.\n open: Var[bool]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n\nclass DialogTrigger(RadixThemesTriggerComponent):\n \"\"\"Trigger an action or event, to open a Dialog modal.\"\"\"\n\n tag = \"Dialog.Trigger\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass DialogTitle(RadixThemesComponent):\n \"\"\"Title component to display inside a Dialog modal.\"\"\"\n\n tag = \"Dialog.Title\"\n\n\nclass DialogContent(elements.Div, RadixThemesComponent):\n \"\"\"Content component to display inside a Dialog modal.\"\"\"\n\n tag = \"Dialog.Content\"\n\n # DialogContent size \"1\" - \"4\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\", \"4\"]]]\n\n # Fired when the dialog is opened.\n on_open_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the dialog is closed.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the dialog.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when the pointer interacts outside the dialog.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n\nclass DialogDescription(RadixThemesComponent):\n \"\"\"Description component to display inside a Dialog modal.\"\"\"\n\n tag = \"Dialog.Description\"\n\n\nclass DialogClose(RadixThemesTriggerComponent):\n \"\"\"Close button component to close an open Dialog modal.\"\"\"\n\n tag = \"Dialog.Close\"\n\n\nclass Dialog(ComponentNamespace):\n \"\"\"Dialog components namespace.\"\"\"\n\n root = __call__ = staticmethod(DialogRoot.create)\n trigger = staticmethod(DialogTrigger.create)\n title = staticmethod(DialogTitle.create)\n content = staticmethod(DialogContent.create)\n description = staticmethod(DialogDescription.create)\n close = staticmethod(DialogClose.create)\n\n\ndialog = Dialog()\n" }, { "path": "reflex/components/radix/themes/components/dropdown_menu.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n RadixThemesComponent,\n RadixThemesTriggerComponent,\n)\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nLiteralDirType = Literal[\"ltr\", \"rtl\"]\n\nLiteralSizeType = Literal[\"1\", \"2\"]\n\nLiteralVariantType = Literal[\"solid\", \"soft\"]\n\nLiteralSideType = Literal[\"top\", \"right\", \"bottom\", \"left\"]\n\nLiteralAlignType = Literal[\"start\", \"center\", \"end\"]\n\nLiteralStickyType = Literal[\n \"partial\",\n \"always\",\n]\n\n\nclass DropdownMenuRoot(RadixThemesComponent):\n \"\"\"The Dropdown Menu Root Component.\"\"\"\n\n tag = \"DropdownMenu.Root\"\n\n # The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.\n open: Var[bool]\n\n # The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.\n modal: Var[bool]\n\n # The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.\n dir: Var[LiteralDirType]\n\n _invalid_children: ClassVar[list[str]] = [\"DropdownMenuItem\"]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n\nclass DropdownMenuTrigger(RadixThemesTriggerComponent):\n \"\"\"The button that toggles the dropdown menu.\"\"\"\n\n tag = \"DropdownMenu.Trigger\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"DropdownMenuRoot\"]\n\n _invalid_children: ClassVar[list[str]] = [\"DropdownMenuContent\"]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass DropdownMenuContent(RadixThemesComponent):\n \"\"\"The Dropdown Menu Content component that pops out when the dropdown menu is open.\"\"\"\n\n tag = \"DropdownMenu.Content\"\n\n # Dropdown Menu Content size \"1\" - \"2\"\n size: Var[Responsive[LiteralSizeType]]\n\n # Variant of Dropdown Menu Content: \"solid\" | \"soft\"\n variant: Var[LiteralVariantType]\n\n # Override theme color for Dropdown Menu Content\n color_scheme: Var[LiteralAccentColor]\n\n # Renders the Dropdown Menu Content in higher contrast\n high_contrast: Var[bool]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.\n loop: Var[bool]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n force_mount: Var[bool]\n\n # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to \"top\".\n side: Var[LiteralSideType]\n\n # The distance in pixels from the trigger. Defaults to 0.\n side_offset: Var[float | int]\n\n # The preferred alignment against the trigger. May change when collisions occur. Defaults to \"center\".\n align: Var[LiteralAlignType]\n\n # An offset in pixels from the \"start\" or \"end\" alignment options.\n align_offset: Var[float | int]\n\n # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { \"top\": 20, \"left\": 20 }. Defaults to 0.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless. Defaults to \"partial\".\n sticky: Var[LiteralStickyType]\n\n # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.\n hide_when_detached: Var[bool]\n\n # Fired when the dialog is closed.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the dialog.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when focus moves outside the dialog.\n on_focus_outside: EventHandler[no_args_event_spec]\n\n # Fired when the pointer interacts outside the dialog.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n\nclass DropdownMenuSubTrigger(RadixThemesTriggerComponent):\n \"\"\"An item that opens a submenu.\"\"\"\n\n tag = \"DropdownMenu.SubTrigger\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When true, prevents the user from interacting with the item.\n disabled: Var[bool]\n\n # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.\n text_value: Var[str]\n\n _valid_parents: ClassVar[list[str]] = [\"DropdownMenuContent\", \"DropdownMenuSub\"]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass DropdownMenuSub(RadixThemesComponent):\n \"\"\"Contains all the parts of a submenu.\"\"\"\n\n tag = \"DropdownMenu.Sub\"\n\n # The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.\n open: Var[bool]\n\n # The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n\nclass DropdownMenuSubContent(RadixThemesComponent):\n \"\"\"The component that pops out when a submenu is open. Must be rendered inside DropdownMenuSub.\"\"\"\n\n tag = \"DropdownMenu.SubContent\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.\n loop: Var[bool]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n force_mount: Var[bool]\n\n # The distance in pixels from the trigger. Defaults to 0.\n side_offset: Var[float | int]\n\n # An offset in pixels from the \"start\" or \"end\" alignment options.\n align_offset: Var[float | int]\n\n # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { \"top\": 20, \"left\": 20 }. Defaults to 0.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless. Defaults to \"partial\".\n sticky: Var[LiteralStickyType]\n\n # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.\n hide_when_detached: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"DropdownMenuSub\"]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the dialog.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when focus moves outside the dialog.\n on_focus_outside: EventHandler[no_args_event_spec]\n\n # Fired when the pointer interacts outside the dialog.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n\nclass DropdownMenuItem(RadixThemesComponent):\n \"\"\"The Dropdown Menu Item Component.\"\"\"\n\n tag = \"DropdownMenu.Item\"\n\n # Override theme color for Dropdown Menu Item\n color_scheme: Var[LiteralAccentColor]\n\n # Shortcut to render a menu item as a link\n shortcut: Var[str]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.\n as_child: Var[bool]\n\n # When true, prevents the user from interacting with the item.\n disabled: Var[bool]\n\n # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.\n text_value: Var[str]\n\n _valid_parents: ClassVar[list[str]] = [\n \"DropdownMenuContent\",\n \"DropdownMenuSubContent\",\n ]\n\n # Fired when the item is selected.\n on_select: EventHandler[no_args_event_spec]\n\n\nclass DropdownMenuSeparator(RadixThemesComponent):\n \"\"\"Dropdown Menu Separator Component. Used to visually separate items in the dropdown menu.\"\"\"\n\n tag = \"DropdownMenu.Separator\"\n\n\nclass DropdownMenu(ComponentNamespace):\n \"\"\"DropdownMenu components namespace.\"\"\"\n\n root = staticmethod(DropdownMenuRoot.create)\n trigger = staticmethod(DropdownMenuTrigger.create)\n content = staticmethod(DropdownMenuContent.create)\n sub_trigger = staticmethod(DropdownMenuSubTrigger.create)\n sub = staticmethod(DropdownMenuSub.create)\n sub_content = staticmethod(DropdownMenuSubContent.create)\n item = staticmethod(DropdownMenuItem.create)\n separator = staticmethod(DropdownMenuSeparator.create)\n\n\nmenu = dropdown_menu = DropdownMenu()\n" }, { "path": "reflex/components/radix/themes/components/hover_card.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n RadixThemesComponent,\n RadixThemesTriggerComponent,\n)\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.vars.base import Var\n\n\nclass HoverCardRoot(RadixThemesComponent):\n \"\"\"For sighted users to preview content available behind a link.\"\"\"\n\n tag = \"HoverCard.Root\"\n\n # The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # The controlled open state of the hover card. Must be used in conjunction with onOpenChange.\n open: Var[bool]\n\n # The duration from when the mouse enters the trigger until the hover card opens.\n open_delay: Var[int]\n\n # The duration from when the mouse leaves the trigger until the hover card closes.\n close_delay: Var[int]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n\nclass HoverCardTrigger(RadixThemesTriggerComponent):\n \"\"\"Wraps the link that will open the hover card.\"\"\"\n\n tag = \"HoverCard.Trigger\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass HoverCardContent(elements.Div, RadixThemesComponent):\n \"\"\"Contains the content of the open hover card.\"\"\"\n\n tag = \"HoverCard.Content\"\n\n # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n side: Var[Responsive[Literal[\"top\", \"right\", \"bottom\", \"left\"]]]\n\n # The distance in pixels from the trigger.\n side_offset: Var[int]\n\n # The preferred alignment against the trigger. May change when collisions occur.\n align: Var[Literal[\"start\", \"center\", \"end\"]]\n\n # An offset in pixels from the \"start\" or \"end\" alignment options.\n align_offset: Var[int]\n\n # Whether or not the hover card should avoid collisions with its trigger.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless\n sticky: Var[Literal[\"partial\", \"always\"]]\n\n # Whether to hide the content when the trigger becomes fully occluded.\n hide_when_detached: Var[bool]\n\n # Hovercard size \"1\" - \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n\nclass HoverCard(ComponentNamespace):\n \"\"\"For sighted users to preview content available behind a link.\"\"\"\n\n root = __call__ = staticmethod(HoverCardRoot.create)\n trigger = staticmethod(HoverCardTrigger.create)\n content = staticmethod(HoverCardContent.create)\n\n\nhover_card = HoverCard()\n" }, { "path": "reflex/components/radix/themes/components/icon_button.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.core.match import Match\nfrom reflex.components.el import elements\nfrom reflex.components.lucide import Icon\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n LiteralVariant,\n RadixLoadingProp,\n RadixThemesComponent,\n)\nfrom reflex.style import Style\nfrom reflex.vars.base import Var\n\nLiteralButtonSize = Literal[\"1\", \"2\", \"3\", \"4\"]\n\nRADIX_TO_LUCIDE_SIZE = {\"1\": 12, \"2\": 24, \"3\": 36, \"4\": 48}\n\n\nclass IconButton(elements.Button, RadixLoadingProp, RadixThemesComponent):\n \"\"\"A button designed specifically for usage with a single icon.\"\"\"\n\n tag = \"IconButton\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Button size \"1\" - \"4\"\n size: Var[Responsive[LiteralButtonSize]]\n\n # Variant of button: \"classic\" | \"solid\" | \"soft\" | \"surface\" | \"outline\" | \"ghost\"\n variant: Var[LiteralVariant]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the button with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for button: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a IconButton component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The IconButton component.\n\n Raises:\n ValueError: If no children are passed.\n \"\"\"\n if children:\n if isinstance(children[0], str):\n children = [\n Icon.create(\n children[0],\n )\n ]\n else:\n msg = \"IconButton requires a child icon. Pass a string as the first child or a rx.icon.\"\n raise ValueError(msg)\n if \"size\" in props:\n if isinstance(props[\"size\"], str):\n children[0].size = RADIX_TO_LUCIDE_SIZE[props[\"size\"]] # pyright: ignore[reportAttributeAccessIssue]\n else:\n size_map_var = Match.create(\n props[\"size\"],\n *list(RADIX_TO_LUCIDE_SIZE.items()),\n 12,\n )\n if not isinstance(size_map_var, Var):\n msg = f\"Match did not return a Var: {size_map_var}\"\n raise ValueError(msg)\n children[0].size = size_map_var # pyright: ignore[reportAttributeAccessIssue]\n return super().create(*children, **props)\n\n def add_style(self):\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return Style({\"padding\": \"6px\"})\n\n\nicon_button = IconButton.create\n" }, { "path": "reflex/components/radix/themes/components/inset.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.vars.base import Var\n\nLiteralButtonSize = Literal[\"1\", \"2\", \"3\", \"4\"]\n\n\nclass Inset(elements.Div, RadixThemesComponent):\n \"\"\"Applies a negative margin to allow content to bleed into the surrounding container.\"\"\"\n\n tag = \"Inset\"\n\n # The side\n side: Var[Responsive[Literal[\"x\", \"y\", \"top\", \"bottom\", \"right\", \"left\"]]]\n\n # How to clip the element's content: \"border-box\" | \"padding-box\"\n clip: Var[Responsive[Literal[\"border-box\", \"padding-box\"]]]\n\n # Padding\n p: Var[Responsive[int | str]]\n\n # Padding on the x axis\n px: Var[Responsive[int | str]]\n\n # Padding on the y axis\n py: Var[Responsive[int | str]]\n\n # Padding on the top\n pt: Var[Responsive[int | str]]\n\n # Padding on the right\n pr: Var[Responsive[int | str]]\n\n # Padding on the bottom\n pb: Var[Responsive[int | str]]\n\n # Padding on the left\n pl: Var[Responsive[int | str]]\n\n\ninset = Inset.create\n" }, { "path": "reflex/components/radix/themes/components/popover.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n RadixThemesComponent,\n RadixThemesTriggerComponent,\n)\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\n\nclass PopoverRoot(RadixThemesComponent):\n \"\"\"Floating element for displaying rich content, triggered by a button.\"\"\"\n\n tag = \"Popover.Root\"\n\n # The controlled open state of the popover.\n open: Var[bool]\n\n # The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.\n modal: Var[bool]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # The open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n\nclass PopoverTrigger(RadixThemesTriggerComponent):\n \"\"\"Wraps the control that will open the popover.\"\"\"\n\n tag = \"Popover.Trigger\"\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass PopoverContent(elements.Div, RadixThemesComponent):\n \"\"\"Contains content to be rendered in the open popover.\"\"\"\n\n tag = \"Popover.Content\"\n\n # Size of the button: \"1\" | \"2\" | \"3\" | \"4\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\", \"4\"]]]\n\n # The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n side: Var[Literal[\"top\", \"right\", \"bottom\", \"left\"]]\n\n # The distance in pixels from the anchor.\n side_offset: Var[int]\n\n # The preferred alignment against the anchor. May change when collisions occur.\n align: Var[Literal[\"start\", \"center\", \"end\"]]\n\n # The vertical distance in pixels from the anchor.\n align_offset: Var[int]\n\n # When true, overrides the side andalign preferences to prevent collisions with boundary edges.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { \"top\": 20, \"left\": 20 }. Defaults to 0.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless. Defaults to \"partial\".\n sticky: Var[Literal[\"partial\", \"always\"]]\n\n # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.\n hide_when_detached: Var[bool]\n\n # Fired when the dialog is opened.\n on_open_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the dialog is closed.\n on_close_auto_focus: EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the dialog.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n # Fired when focus moves outside the dialog.\n on_focus_outside: EventHandler[no_args_event_spec]\n\n # Fired when the pointer interacts outside the dialog.\n on_interact_outside: EventHandler[no_args_event_spec]\n\n\nclass PopoverClose(RadixThemesTriggerComponent):\n \"\"\"Wraps the control that will close the popover.\"\"\"\n\n tag = \"Popover.Close\"\n\n\nclass Popover(ComponentNamespace):\n \"\"\"Floating element for displaying rich content, triggered by a button.\"\"\"\n\n root = staticmethod(PopoverRoot.create)\n trigger = staticmethod(PopoverTrigger.create)\n content = staticmethod(PopoverContent.create)\n close = staticmethod(PopoverClose.create)\n\n\npopover = Popover()\n" }, { "path": "reflex/components/radix/themes/components/progress.py", "content": "\"\"\"Progress from Radix Themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.style import Style\nfrom reflex.vars.base import Var\n\n\nclass Progress(RadixThemesComponent):\n \"\"\"A progress bar component.\"\"\"\n\n tag = \"Progress\"\n\n # The value of the progress bar: 0 to max (default 100)\n value: Var[int]\n\n # The maximum progress value.\n max: Var[int]\n\n # The size of the progress bar: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # The variant of the progress bar: \"classic\" | \"surface\" | \"soft\"\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]]\n\n # The color theme of the progress bar\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the progress bar with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for progress bar: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[Literal[\"none\", \"small\", \"medium\", \"large\", \"full\"]]\n\n # The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.\n duration: Var[str]\n\n # The color of the progress bar fill animation.\n fill_color: Var[str]\n\n @staticmethod\n def _color_selector(color: str) -> Style:\n \"\"\"Return a style object with the correct color and css selector.\n\n Args:\n color: Color of the fill part.\n\n Returns:\n Style: Style object with the correct css selector and color.\n \"\"\"\n return Style({\".rt-ProgressIndicator\": {\"background_color\": color}})\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a Progress component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The Progress Component.\n \"\"\"\n props.setdefault(\"width\", \"100%\")\n if \"fill_color\" in props:\n color = props.get(\"fill_color\", \"\")\n style = props.get(\"style\", {})\n style = style | cls._color_selector(color)\n props[\"style\"] = style\n\n return super().create(*children, **props)\n\n\nprogress = Progress.create\n" }, { "path": "reflex/components/radix/themes/components/radio.py", "content": "\"\"\"Radio component from Radix Themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass Radio(RadixThemesComponent):\n \"\"\"A radio component.\"\"\"\n\n tag = \"Radio\"\n\n # The size of the radio: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button: \"classic\" | \"surface\" | \"soft\"\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Uses a higher contrast color for the component.\n high_contrast: Var[bool]\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child = Var[bool]\n\n\nradio = Radio.create\n" }, { "path": "reflex/components/radix/themes/components/radio_cards.py", "content": "\"\"\"Radio component from Radix Themes.\"\"\"\n\nfrom types import SimpleNamespace\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.vars.base import Var\n\n\nclass RadioCardsRoot(RadixThemesComponent):\n \"\"\"Root element for RadioCards component.\"\"\"\n\n tag = \"RadioCards.Root\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # The size of the checkbox cards: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button: \"classic\" | \"surface\" | \"soft\"\n variant: Var[Literal[\"classic\", \"surface\"]]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Uses a higher contrast color for the component.\n high_contrast: Var[bool]\n\n # The number of columns:\n columns: Var[Responsive[str | Literal[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]]]\n\n # The gap between the checkbox cards:\n gap: Var[Responsive[str | Literal[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]]]\n\n default_value: Var[str]\n\n # The controlled value of the radio item to check. Should be used in conjunction with onValueChange.\n value: Var[str]\n\n # The name of the group. Submitted with its owning form as part of a name/value pair.\n name: Var[str]\n\n # When true, prevents the user from interacting with radio items.\n disabled: Var[bool]\n\n # When true, indicates that the user must check a radio item before the owning form can be submitted.\n required: Var[bool]\n\n # The orientation of the component.\n orientation: Var[Literal[\"horizontal\", \"vertical\", \"undefined\"]]\n\n # The reading direction of the radio group. If omitted,\n # inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.\n dir: Var[Literal[\"ltr\", \"rtl\"]]\n\n # When true, keyboard navigation will loop from last item to first, and vice versa.\n loop: Var[bool]\n\n # Event handler called when the value changes.\n on_value_change: EventHandler[passthrough_event_spec(str)]\n\n\nclass RadioCardsItem(RadixThemesComponent):\n \"\"\"Item element for RadioCards component.\"\"\"\n\n tag = \"RadioCards.Item\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # The value given as data when submitted with a name.\n value: Var[str]\n\n # When true, prevents the user from interacting with the radio item.\n disabled: Var[bool]\n\n # When true, indicates that the user must check the radio item before the owning form can be submitted.\n required: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"RadioCardsRoot\"]\n\n\nclass RadioCards(SimpleNamespace):\n \"\"\"RadioCards components namespace.\"\"\"\n\n root = staticmethod(RadioCardsRoot.create)\n item = staticmethod(RadioCardsItem.create)\n\n\nradio_cards = RadioCards()\n" }, { "path": "reflex/components/radix/themes/components/radio_group.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Literal\n\nimport reflex as rx\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralSpacing,\n RadixThemesComponent,\n)\nfrom reflex.components.radix.themes.layout.flex import Flex\nfrom reflex.components.radix.themes.typography.text import Text\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.utils import types\nfrom reflex.vars.base import LiteralVar, Var\nfrom reflex.vars.sequence import StringVar\n\nLiteralFlexDirection = Literal[\"row\", \"column\", \"row-reverse\", \"column-reverse\"]\n\n\nclass RadioGroupRoot(RadixThemesComponent):\n \"\"\"A set of interactive radio buttons where only one can be selected at a time.\"\"\"\n\n tag = \"RadioGroup.Root\"\n\n # The size of the radio group: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]] = LiteralVar.create(\"2\")\n\n # The variant of the radio group\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]] = LiteralVar.create(\"classic\")\n\n # The color of the radio group\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the radio group with higher contrast color against background\n high_contrast: Var[bool]\n\n # The controlled value of the radio item to check. Should be used in conjunction with on_change.\n value: Var[str]\n\n # The initial value of checked radio item. Should be used in conjunction with on_change.\n default_value: Var[str]\n\n # Whether the radio group is disabled\n disabled: Var[bool]\n\n # The name of the group. Submitted with its owning form as part of a name/value pair.\n name: Var[str]\n\n # Whether the radio group is required\n required: Var[bool]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n # Fired when the value of the radio group changes.\n on_change: EventHandler[passthrough_event_spec(str)]\n\n\nclass RadioGroupItem(RadixThemesComponent):\n \"\"\"An item in the group that can be checked.\"\"\"\n\n tag = \"RadioGroup.Item\"\n\n # The value of the radio item to check. Should be used in conjunction with on_change.\n value: Var[str]\n\n # When true, prevents the user from interacting with the radio item.\n disabled: Var[bool]\n\n # When true, indicates that the user must check the radio item before the owning form can be submitted.\n required: Var[bool]\n\n\nclass HighLevelRadioGroup(RadixThemesComponent):\n \"\"\"High level wrapper for the RadioGroup component.\"\"\"\n\n # The items of the radio group.\n items: Var[Sequence[str]]\n\n # The direction of the radio group.\n direction: Var[LiteralFlexDirection] = LiteralVar.create(\"row\")\n\n # The gap between the items of the radio group.\n spacing: Var[LiteralSpacing] = LiteralVar.create(\"2\")\n\n # The size of the radio group.\n size: Var[Literal[\"1\", \"2\", \"3\"]] = LiteralVar.create(\"2\")\n\n # The variant of the radio group\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]] = LiteralVar.create(\"classic\")\n\n # The color of the radio group\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the radio group with higher contrast color against background\n high_contrast: Var[bool]\n\n # The controlled value of the radio item to check. Should be used in conjunction with on_change.\n value: Var[str]\n\n # The initial value of checked radio item. Should be used in conjunction with on_change.\n default_value: Var[str]\n\n # Whether the radio group is disabled\n disabled: Var[bool]\n\n # The name of the group. Submitted with its owning form as part of a name/value pair.\n name: Var[str]\n\n # Whether the radio group is required\n required: Var[bool]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n @classmethod\n def create(\n cls,\n items: Var[Sequence[str | int | float | list | dict | bool | None]],\n **props,\n ) -> Component:\n \"\"\"Create a radio group component.\n\n Args:\n items: The items of the radio group.\n **props: Additional properties to apply to the accordion item.\n\n Returns:\n The created radio group component.\n\n Raises:\n TypeError: If the type of items is invalid.\n \"\"\"\n direction = props.pop(\"direction\", \"row\")\n spacing = props.pop(\"spacing\", \"2\")\n size = props.pop(\"size\", \"2\")\n variant = props.pop(\"variant\", \"classic\")\n color_scheme = props.pop(\"color_scheme\", None)\n default_value = props.pop(\"default_value\", \"\")\n\n if not isinstance(items, (list, Var)) or (\n isinstance(items, Var) and not types._issubclass(items._var_type, list)\n ):\n items_type = type(items) if not isinstance(items, Var) else items._var_type\n msg = f\"The radio group component takes in a list, got {items_type} instead\"\n raise TypeError(msg)\n\n default_value = LiteralVar.create(default_value)\n\n # convert only non-strings to json(JSON.stringify) so quotes are not rendered\n # for string literal types.\n if isinstance(default_value, str) or (\n isinstance(default_value, Var) and default_value._var_type is str\n ):\n default_value = LiteralVar.create(default_value)\n else:\n default_value = LiteralVar.create(default_value).to_string()\n\n def radio_group_item(value: Var) -> Component:\n item_value = rx.cond(\n value.js_type() == \"string\",\n value,\n value.to_string(),\n ).to(StringVar)\n\n return Text.create(\n Flex.create(\n RadioGroupItem.create(\n value=item_value,\n disabled=props.get(\"disabled\", LiteralVar.create(False)),\n ),\n item_value,\n spacing=\"2\",\n ),\n size=size,\n as_=\"label\",\n )\n\n children = [\n rx.foreach(\n items,\n radio_group_item,\n )\n ]\n\n return RadioGroupRoot.create(\n Flex.create(\n *children,\n direction=direction,\n spacing=spacing,\n ),\n size=size,\n variant=variant,\n color_scheme=color_scheme,\n default_value=default_value,\n **props,\n )\n\n\nclass RadioGroup(ComponentNamespace):\n \"\"\"RadioGroup components namespace.\"\"\"\n\n root = staticmethod(RadioGroupRoot.create)\n item = staticmethod(RadioGroupItem.create)\n __call__ = staticmethod(HighLevelRadioGroup.create)\n\n\nradio = radio_group = RadioGroup()\n" }, { "path": "reflex/components/radix/themes/components/scroll_area.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass ScrollArea(RadixThemesComponent):\n \"\"\"Custom styled, cross-browser scrollable area using native functionality.\"\"\"\n\n tag = \"ScrollArea\"\n\n # The alignment of the scroll area\n scrollbars: Var[Literal[\"vertical\", \"horizontal\", \"both\"]]\n\n # Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. \"auto\" | \"always\" | \"scroll\" | \"hover\"\n type: Var[Literal[\"auto\", \"always\", \"scroll\", \"hover\"]]\n\n # If type is set to either \"scroll\" or \"hover\", this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.\n scroll_hide_delay: Var[int]\n\n\nscroll_area = ScrollArea.create\n" }, { "path": "reflex/components/radix/themes/components/segmented_control.py", "content": "\"\"\"SegmentedControl from Radix Themes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom types import SimpleNamespace\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.event import EventHandler\nfrom reflex.vars.base import Var\n\n\ndef on_value_change(\n value: Var[str | list[str]],\n) -> tuple[Var[str | list[str]]]:\n \"\"\"Handle the on_value_change event.\n\n Args:\n value: The value of the event.\n\n Returns:\n The value of the event.\n \"\"\"\n return (value,)\n\n\nclass SegmentedControlRoot(RadixThemesComponent):\n \"\"\"Root element for a SegmentedControl component.\"\"\"\n\n tag = \"SegmentedControl.Root\"\n\n # The size of the segmented control: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button: \"classic\" | \"surface\"\n variant: Var[Literal[\"classic\", \"surface\"]]\n\n # The type of the segmented control, either \"single\" for selecting one option or \"multiple\" for selecting multiple options.\n type: Var[Literal[\"single\", \"multiple\"]]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # The radius of the segmented control: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[Literal[\"none\", \"small\", \"medium\", \"large\", \"full\"]]\n\n # The default value of the segmented control.\n default_value: Var[str | Sequence[str]]\n\n # The current value of the segmented control.\n value: Var[str | Sequence[str]]\n\n # Handles the `onChange` event for the SegmentedControl component.\n on_change: EventHandler[on_value_change]\n\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n\nclass SegmentedControlItem(RadixThemesComponent):\n \"\"\"An item in the SegmentedControl component.\"\"\"\n\n tag = \"SegmentedControl.Item\"\n\n # The value of the item.\n value: Var[str]\n\n _valid_parents: ClassVar[list[str]] = [\"SegmentedControlRoot\"]\n\n\nclass SegmentedControl(SimpleNamespace):\n \"\"\"SegmentedControl components namespace.\"\"\"\n\n root = staticmethod(SegmentedControlRoot.create)\n item = staticmethod(SegmentedControlItem.create)\n\n\nsegmented_control = SegmentedControl()\n" }, { "path": "reflex/components/radix/themes/components/select.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom collections.abc import Sequence\nfrom typing import ClassVar, Literal\n\nimport reflex as rx\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n RadixThemesComponent,\n)\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import no_args_event_spec, passthrough_event_spec\nfrom reflex.vars.base import Var\n\n\nclass SelectRoot(RadixThemesComponent):\n \"\"\"Displays a list of options for the user to pick from, triggered by a button.\"\"\"\n\n tag = \"Select.Root\"\n\n # The size of the select: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # The value of the select when initially rendered. Use when you do not need to control the state of the select.\n default_value: Var[str]\n\n # The controlled value of the select. Should be used in conjunction with on_change.\n value: Var[str]\n\n # The open state of the select when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # The controlled open state of the select. Must be used in conjunction with on_open_change.\n open: Var[bool]\n\n # The name of the select control when submitting the form.\n name: Var[str]\n\n # When True, prevents the user from interacting with select.\n disabled: Var[bool]\n\n # When True, indicates that the user must select a value before the owning form can be submitted.\n required: Var[bool]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n # Fired when the value of the select changes.\n on_change: rx.EventHandler[passthrough_event_spec(str)]\n\n # Fired when the select is opened or closed.\n on_open_change: rx.EventHandler[passthrough_event_spec(bool)]\n\n\nclass SelectTrigger(RadixThemesComponent):\n \"\"\"The button that toggles the select.\"\"\"\n\n tag = \"Select.Trigger\"\n\n # Variant of the select trigger\n variant: Var[Literal[\"classic\", \"surface\", \"soft\", \"ghost\"]]\n\n # The color of the select trigger\n color_scheme: Var[LiteralAccentColor]\n\n # The radius of the select trigger\n radius: Var[LiteralRadius]\n\n # The placeholder of the select trigger\n placeholder: Var[str]\n\n _valid_parents: ClassVar[list[str]] = [\"SelectRoot\"]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nclass SelectContent(RadixThemesComponent):\n \"\"\"The component that pops out when the select is open.\"\"\"\n\n tag = \"Select.Content\"\n\n # The variant of the select content\n variant: Var[Literal[\"solid\", \"soft\"]]\n\n # The color of the select content\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the select content with higher contrast color against background\n high_contrast: Var[bool]\n\n # The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as our other primitives, for example Popover or DropdownMenu.\n position: Var[Literal[\"item-aligned\", \"popper\"]]\n\n # The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. Only available when position is set to popper.\n side: Var[Literal[\"top\", \"right\", \"bottom\", \"left\"]]\n\n # The distance in pixels from the anchor. Only available when position is set to popper.\n side_offset: Var[int]\n\n # The preferred alignment against the anchor. May change when collisions occur. Only available when position is set to popper.\n align: Var[Literal[\"start\", \"center\", \"end\"]]\n\n # The vertical distance in pixels from the anchor. Only available when position is set to popper.\n align_offset: Var[int]\n\n # Fired when the select content is closed.\n on_close_auto_focus: rx.EventHandler[no_args_event_spec]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: rx.EventHandler[no_args_event_spec]\n\n # Fired when a pointer down event happens outside the select content.\n on_pointer_down_outside: rx.EventHandler[no_args_event_spec]\n\n\nclass SelectGroup(RadixThemesComponent):\n \"\"\"Used to group multiple items.\"\"\"\n\n tag = \"Select.Group\"\n\n _valid_parents: ClassVar[list[str]] = [\"SelectContent\"]\n\n\nclass SelectItem(RadixThemesComponent):\n \"\"\"The component that contains the select items.\"\"\"\n\n tag = \"Select.Item\"\n\n # The value given as data when submitting a form with a name.\n value: Var[str]\n\n # Whether the select item is disabled\n disabled: Var[bool]\n\n _valid_parents: ClassVar[list[str]] = [\"SelectGroup\", \"SelectContent\"]\n\n\nclass SelectLabel(RadixThemesComponent):\n \"\"\"Used to render the label of a group, it isn't focusable using arrow keys.\"\"\"\n\n tag = \"Select.Label\"\n\n _valid_parents: ClassVar[list[str]] = [\"SelectGroup\"]\n\n\nclass SelectSeparator(RadixThemesComponent):\n \"\"\"Used to visually separate items in the Select.\"\"\"\n\n tag = \"Select.Separator\"\n\n\nclass HighLevelSelect(SelectRoot):\n \"\"\"High level wrapper for the Select component.\"\"\"\n\n # The items of the select.\n items: Var[Sequence[str]]\n\n # The placeholder of the select.\n placeholder: Var[str]\n\n # The label of the select.\n label: Var[str]\n\n # The color of the select.\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the select with higher contrast color against background.\n high_contrast: Var[bool]\n\n # The variant of the select.\n variant: Var[Literal[\"classic\", \"surface\", \"soft\", \"ghost\"]]\n\n # The radius of the select.\n radius: Var[LiteralRadius]\n\n # The width of the select.\n width: Var[str]\n\n # The positioning mode to use. Default is \"item-aligned\".\n position: Var[Literal[\"item-aligned\", \"popper\"]]\n\n @classmethod\n def create(cls, items: list[str] | Var[list[str]], **props) -> Component:\n \"\"\"Create a select component.\n\n Args:\n items: The items of the select.\n **props: Additional properties to apply to the select component.\n\n Returns:\n The select component.\n \"\"\"\n trigger_prop_list = [\n \"id\",\n \"placeholder\",\n \"variant\",\n \"radius\",\n \"width\",\n \"flex_shrink\",\n \"custom_attrs\",\n ]\n\n content_props = {\n prop: props.pop(prop)\n for prop in [\"high_contrast\", \"position\"]\n if prop in props\n }\n\n trigger_props = {\n prop: props.pop(prop) for prop in trigger_prop_list if prop in props\n }\n\n color_scheme = props.pop(\"color_scheme\", None)\n\n if color_scheme is not None:\n content_props[\"color_scheme\"] = color_scheme\n trigger_props[\"color_scheme\"] = color_scheme\n\n label = props.pop(\"label\", None)\n\n if isinstance(items, Var):\n child = [\n rx.foreach(items, lambda item: SelectItem.create(item, value=item))\n ]\n else:\n child = [SelectItem.create(item, value=item) for item in items]\n\n return SelectRoot.create(\n SelectTrigger.create(\n **trigger_props,\n ),\n SelectContent.create(\n SelectGroup.create(\n SelectLabel.create(label) if label is not None else \"\",\n *child,\n ),\n **content_props,\n ),\n **props,\n )\n\n\nclass Select(ComponentNamespace):\n \"\"\"Select components namespace.\"\"\"\n\n root = staticmethod(SelectRoot.create)\n trigger = staticmethod(SelectTrigger.create)\n content = staticmethod(SelectContent.create)\n group = staticmethod(SelectGroup.create)\n item = staticmethod(SelectItem.create)\n separator = staticmethod(SelectSeparator.create)\n label = staticmethod(SelectLabel.create)\n __call__ = staticmethod(HighLevelSelect.create)\n\n\nselect = Select()\n" }, { "path": "reflex/components/radix/themes/components/separator.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import LiteralVar, Var\n\nLiteralSeparatorSize = Literal[\"1\", \"2\", \"3\", \"4\"]\n\n\nclass Separator(RadixThemesComponent):\n \"\"\"Visually or semantically separates content.\"\"\"\n\n tag = \"Separator\"\n\n # The size of the separator: \"1\" | \"2\" | \"3\" | \"4\"\n size: Var[Responsive[LiteralSeparatorSize]] = LiteralVar.create(\"4\")\n\n # The color of the separator\n color_scheme: Var[LiteralAccentColor]\n\n # The orientation of the separator.\n orientation: Var[Responsive[Literal[\"horizontal\", \"vertical\"]]]\n\n # When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.\n decorative: Var[bool]\n\n\n# Alias to divider.\ndivider = separator = Separator.create\n" }, { "path": "reflex/components/radix/themes/components/skeleton.py", "content": "\"\"\"Skeleton theme from Radix components.\"\"\"\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import RadixLoadingProp, RadixThemesComponent\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.vars.base import Var\n\n\nclass Skeleton(RadixLoadingProp, RadixThemesComponent):\n \"\"\"Skeleton component.\"\"\"\n\n tag = \"Skeleton\"\n\n # The width of the skeleton\n width: Var[Responsive[str]]\n\n # The minimum width of the skeleton\n min_width: Var[Responsive[str]]\n\n # The maximum width of the skeleton\n max_width: Var[Responsive[str]]\n\n # The height of the skeleton\n height: Var[Responsive[str]]\n\n # The minimum height of the skeleton\n min_height: Var[Responsive[str]]\n\n # The maximum height of the skeleton\n max_height: Var[Responsive[str]]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n\nskeleton = Skeleton.create\n" }, { "path": "reflex/components/radix/themes/components/slider.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Literal\n\nfrom reflex.components.component import Component\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.utils.types import typehint_issubclass\nfrom reflex.vars.base import Var\n\non_value_event_spec = (\n passthrough_event_spec(list[float]),\n passthrough_event_spec(list[int]),\n)\n\n\nclass Slider(RadixThemesComponent):\n \"\"\"Provides user selection from a range of values.\"\"\"\n\n tag = \"Slider\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Button size \"1\" - \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # Variant of button\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]]\n\n # Override theme color for button\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the button with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for button: \"none\" | \"small\" | \"full\"\n radius: Var[Literal[\"none\", \"small\", \"full\"]]\n\n # The value of the slider when initially rendered. Use when you do not need to control the state of the slider.\n default_value: Var[Sequence[float | int] | float | int]\n\n # The controlled value of the slider. Must be used in conjunction with onValueChange.\n value: Var[Sequence[float | int]]\n\n # The name of the slider. Submitted with its owning form as part of a name/value pair.\n name: Var[str]\n\n # The width of the slider.\n width: Var[str | None] = Var.create(\"100%\")\n\n # The minimum value of the slider.\n min: Var[float | int]\n\n # The maximum value of the slider.\n max: Var[float | int]\n\n # The step value of the slider.\n step: Var[float | int]\n\n # Whether the slider is disabled\n disabled: Var[bool]\n\n # The orientation of the slider.\n orientation: Var[Literal[\"horizontal\", \"vertical\"]]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n # Fired when the value of the slider changes.\n on_change: EventHandler[on_value_event_spec]\n\n # Fired when a thumb is released after being dragged.\n on_value_commit: EventHandler[on_value_event_spec]\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create a Slider component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The component.\n \"\"\"\n default_value = props.pop(\"default_value\", [50])\n width = props.pop(\"width\", \"100%\")\n\n if isinstance(default_value, Var):\n if typehint_issubclass(default_value._var_type, int | float):\n default_value = [default_value]\n\n elif isinstance(default_value, (int, float)):\n default_value = [default_value]\n\n style = props.setdefault(\"style\", {})\n style.update({\n \"width\": width,\n })\n return super().create(*children, default_value=default_value, **props)\n\n\nslider = Slider.create\n" }, { "path": "reflex/components/radix/themes/components/spinner.py", "content": "\"\"\"Radix Spinner Component.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import RadixLoadingProp, RadixThemesComponent\nfrom reflex.vars.base import Var\n\nLiteralSpinnerSize = Literal[\"1\", \"2\", \"3\"]\n\n\nclass Spinner(RadixLoadingProp, RadixThemesComponent):\n \"\"\"A spinner component.\"\"\"\n\n tag = \"Spinner\"\n\n is_default = False\n\n # The size of the spinner.\n size: Var[Responsive[LiteralSpinnerSize]]\n\n\nspinner = Spinner.create\n" }, { "path": "reflex/components/radix/themes/components/switch.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nLiteralSwitchSize = Literal[\"1\", \"2\", \"3\"]\n\n\nclass Switch(RadixThemesComponent):\n \"\"\"A toggle switch alternative to the checkbox.\"\"\"\n\n tag = \"Switch\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Whether the switch is checked by default\n default_checked: Var[bool]\n\n # Whether the switch is checked\n checked: Var[bool]\n\n # If true, prevent the user from interacting with the switch\n disabled: Var[bool]\n\n # If true, the user must interact with the switch to submit the form\n required: Var[bool]\n\n # The name of the switch (when submitting a form)\n name: Var[str]\n\n # The value associated with the \"on\" position\n value: Var[str]\n\n # Switch size \"1\" - \"4\"\n size: Var[Responsive[LiteralSwitchSize]]\n\n # Variant of switch: \"classic\" | \"surface\" | \"soft\"\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]]\n\n # Override theme color for switch\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the switch with higher contrast color against background\n high_contrast: Var[bool]\n\n # Override theme radius for switch: \"none\" | \"small\" | \"full\"\n radius: Var[Literal[\"none\", \"small\", \"full\"]]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onCheckedChange\"}\n\n # Fired when the value of the switch changes\n on_change: EventHandler[passthrough_event_spec(bool)]\n\n\nswitch = Switch.create\n" }, { "path": "reflex/components/radix/themes/components/table.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import CommonPaddingProps, RadixThemesComponent\nfrom reflex.vars.base import Var\n\n\nclass TableRoot(elements.Table, RadixThemesComponent):\n \"\"\"A semantic table for presenting tabular data.\"\"\"\n\n tag = \"Table.Root\"\n\n # The size of the table: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[Literal[\"1\", \"2\", \"3\"]]]\n\n # The variant of the table\n variant: Var[Literal[\"surface\", \"ghost\"]]\n\n\nclass TableHeader(elements.Thead, RadixThemesComponent):\n \"\"\"The header of the table defines column names and other non-data elements.\"\"\"\n\n tag = \"Table.Header\"\n\n _invalid_children: ClassVar[list[str]] = [\"TableBody\"]\n\n _valid_parents: ClassVar[list[str]] = [\"TableRoot\"]\n\n\nclass TableRow(elements.Tr, RadixThemesComponent):\n \"\"\"A row containing table cells.\"\"\"\n\n tag = \"Table.Row\"\n\n # The alignment of the row\n align: Var[Literal[\"start\", \"center\", \"end\", \"baseline\"]]\n\n _invalid_children: ClassVar[list[str]] = [\"TableBody\", \"TableHeader\", \"TableRow\"]\n\n\nclass TableColumnHeaderCell(elements.Th, RadixThemesComponent):\n \"\"\"A table cell that is semantically treated as a column header.\"\"\"\n\n tag = \"Table.ColumnHeaderCell\"\n\n # The justification of the column\n justify: Var[Literal[\"start\", \"center\", \"end\"]]\n\n # The minimum width of the cell\n min_width: Var[Responsive[str]]\n\n # The maximum width of the cell\n max_width: Var[Responsive[str]]\n\n _invalid_children: ClassVar[list[str]] = [\n \"TableBody\",\n \"TableHeader\",\n \"TableRow\",\n \"TableCell\",\n \"TableColumnHeaderCell\",\n \"TableRowHeaderCell\",\n ]\n\n\nclass TableBody(elements.Tbody, RadixThemesComponent):\n \"\"\"The body of the table contains the data rows.\"\"\"\n\n tag = \"Table.Body\"\n\n _invalid_children: ClassVar[list[str]] = [\n \"TableHeader\",\n \"TableRowHeaderCell\",\n \"TableColumnHeaderCell\",\n \"TableCell\",\n ]\n\n _valid_parents: ClassVar[list[str]] = [\"TableRoot\"]\n\n\nclass TableCell(elements.Td, CommonPaddingProps, RadixThemesComponent):\n \"\"\"A cell containing data.\"\"\"\n\n tag = \"Table.Cell\"\n\n # The justification of the column\n justify: Var[Literal[\"start\", \"center\", \"end\"]]\n\n # The minimum width of the cell\n min_width: Var[Responsive[str]]\n\n # The maximum width of the cell\n max_width: Var[Responsive[str]]\n\n _invalid_children: ClassVar[list[str]] = [\n \"TableBody\",\n \"TableHeader\",\n \"TableRowHeaderCell\",\n \"TableColumnHeaderCell\",\n \"TableCell\",\n ]\n\n\nclass TableRowHeaderCell(elements.Th, CommonPaddingProps, RadixThemesComponent):\n \"\"\"A table cell that is semantically treated as a row header.\"\"\"\n\n tag = \"Table.RowHeaderCell\"\n\n # The justification of the column\n justify: Var[Literal[\"start\", \"center\", \"end\"]]\n\n # The minimum width of the cell\n min_width: Var[Responsive[str]]\n\n # The maximum width of the cell\n max_width: Var[Responsive[str]]\n\n _invalid_children: ClassVar[list[str]] = [\n \"TableBody\",\n \"TableHeader\",\n \"TableRow\",\n \"TableCell\",\n \"TableColumnHeaderCell\",\n \"TableRowHeaderCell\",\n ]\n\n\nclass Table(ComponentNamespace):\n \"\"\"Table components namespace.\"\"\"\n\n root = staticmethod(TableRoot.create)\n header = staticmethod(TableHeader.create)\n body = staticmethod(TableBody.create)\n row = staticmethod(TableRow.create)\n cell = staticmethod(TableCell.create)\n column_header_cell = staticmethod(TableColumnHeaderCell.create)\n row_header_cell = staticmethod(TableRowHeaderCell.create)\n\n\ntable = Table()\n" }, { "path": "reflex/components/radix/themes/components/tabs.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, ClassVar, Literal\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.core.colors import color\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, passthrough_event_spec\nfrom reflex.vars.base import Var\n\nvertical_orientation_css = \"&[data-orientation='vertical']\"\n\n\nclass TabsRoot(RadixThemesComponent):\n \"\"\"Set of content sections to be displayed one at a time.\"\"\"\n\n tag = \"Tabs.Root\"\n\n # The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.\n default_value: Var[str]\n\n # The controlled value of the tab that should be active. Use when you need to control the state of the tabs.\n value: Var[str]\n\n # The orientation of the tabs.\n orientation: Var[Literal[\"horizontal\", \"vertical\"]]\n\n # Reading direction of the tabs.\n dir: Var[Literal[\"ltr\", \"rtl\"]]\n\n # The mode of activation for the tabs. \"automatic\" will activate the tab when focused. \"manual\" will activate the tab when clicked.\n activation_mode: Var[Literal[\"automatic\", \"manual\"]]\n\n # Props to rename\n _rename_props = {\"onChange\": \"onValueChange\"}\n\n # Fired when the value of the tabs changes.\n on_change: EventHandler[passthrough_event_spec(str)]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style for the component.\n\n Returns:\n The style to add.\n \"\"\"\n return {\n vertical_orientation_css: {\n \"display\": \"flex\",\n }\n }\n\n\nclass TabsList(RadixThemesComponent):\n \"\"\"Contains the triggers that sit alongside the active content.\"\"\"\n\n tag = \"Tabs.List\"\n\n # Tabs size \"1\" - \"2\"\n size: Var[Responsive[Literal[\"1\", \"2\"]]]\n\n # When true, the tabs will loop when reaching the end.\n loop: Var[bool]\n\n def add_style(self):\n \"\"\"Add style for the component.\n\n Returns:\n The style to add.\n \"\"\"\n return {\n vertical_orientation_css: {\n \"display\": \"block\",\n \"box_shadow\": f\"inset -1px 0 0 0 {color('gray', 5, alpha=True)}\",\n },\n }\n\n\nclass TabsTrigger(RadixThemesComponent):\n \"\"\"The button that activates its associated content.\"\"\"\n\n tag = \"Tabs.Trigger\"\n\n # The value of the tab. Must be unique for each tab.\n value: Var[str]\n\n # Whether the tab is disabled\n disabled: Var[bool]\n\n # The color of the line under the tab when active.\n color_scheme: Var[LiteralAccentColor]\n\n _valid_parents: ClassVar[list[str]] = [\"TabsList\"]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a TabsTrigger component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The TabsTrigger Component.\n \"\"\"\n if \"color_scheme\" in props:\n custom_attrs = props.setdefault(\"custom_attrs\", {})\n custom_attrs[\"data-accent-color\"] = props[\"color_scheme\"]\n return super().create(*children, **props)\n\n def _exclude_props(self) -> list[str]:\n return [\"color_scheme\"]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style for the component.\n\n Returns:\n The style to add.\n \"\"\"\n return {vertical_orientation_css: {\"width\": \"100%\"}}\n\n\nclass TabsContent(RadixThemesComponent):\n \"\"\"Contains the content associated with each trigger.\"\"\"\n\n tag = \"Tabs.Content\"\n\n # The value of the tab. Must be unique for each tab.\n value: Var[str]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n force_mount: Var[bool]\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style for the component.\n\n Returns:\n The style to add.\n \"\"\"\n return {\n vertical_orientation_css: {\"width\": \"100%\", \"margin\": None},\n }\n\n\nclass Tabs(ComponentNamespace):\n \"\"\"Set of content sections to be displayed one at a time.\"\"\"\n\n root = __call__ = staticmethod(TabsRoot.create)\n list = staticmethod(TabsList.create)\n trigger = staticmethod(TabsTrigger.create)\n content = staticmethod(TabsContent.create)\n\n\ntabs = Tabs()\n" }, { "path": "reflex/components/radix/themes/components/text_area.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.core.debounce import DebounceInput\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nLiteralTextAreaSize = Literal[\"1\", \"2\", \"3\"]\n\nLiteralTextAreaResize = Literal[\"none\", \"vertical\", \"horizontal\", \"both\"]\n\n\nclass TextArea(RadixThemesComponent, elements.Textarea):\n \"\"\"The input part of a TextArea, may be used by itself.\"\"\"\n\n tag = \"TextArea\"\n\n # The size of the text area: \"1\" | \"2\" | \"3\"\n size: Var[Responsive[LiteralTextAreaSize]]\n\n # The variant of the text area\n variant: Var[Literal[\"classic\", \"surface\", \"soft\"]]\n\n # The resize behavior of the text area: \"none\" | \"vertical\" | \"horizontal\" | \"both\"\n resize: Var[Responsive[LiteralTextAreaResize]]\n\n # The color of the text area\n color_scheme: Var[LiteralAccentColor]\n\n # The radius of the text area: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n # Whether the form control should have autocomplete enabled\n auto_complete: Var[bool]\n\n # Automatically focuses the textarea when the page loads\n auto_focus: Var[bool]\n\n # The default value of the textarea when initially rendered\n default_value: Var[str]\n\n # Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted\n dirname: Var[str]\n\n # Disables the textarea\n disabled: Var[bool]\n\n # Associates the textarea with a form (by id)\n form: Var[str]\n\n # Maximum number of characters allowed in the textarea\n max_length: Var[int]\n\n # Minimum number of characters required in the textarea\n min_length: Var[int]\n\n # Name of the textarea, used when submitting the form\n name: Var[str]\n\n # Placeholder text in the textarea\n placeholder: Var[str]\n\n # Indicates whether the textarea is read-only\n read_only: Var[bool]\n\n # Indicates that the textarea is required\n required: Var[bool]\n\n # Visible number of lines in the text control\n rows: Var[str]\n\n # The controlled value of the textarea, read only unless used with on_change\n value: Var[str]\n\n # How the text in the textarea is to be wrapped when submitting the form\n wrap: Var[str]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create an Input component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The component.\n \"\"\"\n if props.get(\"value\") is not None and props.get(\"on_change\") is not None:\n # create a debounced input if the user requests full control to avoid typing jank\n return DebounceInput.create(super().create(*children, **props))\n return super().create(*children, **props)\n\n def add_style(self):\n \"\"\"Add the style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n added_style: dict[str, dict] = {}\n added_style.setdefault(\"& textarea\", {})\n if \"padding\" in self.style:\n added_style[\"& textarea\"][\"padding\"] = self.style.pop(\"padding\")\n return added_style\n\n\ntext_area = TextArea.create\n" }, { "path": "reflex/components/radix/themes/components/text_field.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component, ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.core.debounce import DebounceInput\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralRadius,\n RadixThemesComponent,\n)\nfrom reflex.event import EventHandler, input_event, key_event\nfrom reflex.utils.types import is_optional\nfrom reflex.vars.base import Var\nfrom reflex.vars.number import ternary_operation\n\nLiteralTextFieldSize = Literal[\"1\", \"2\", \"3\"]\nLiteralTextFieldVariant = Literal[\"classic\", \"surface\", \"soft\"]\n\n\nclass TextFieldRoot(elements.Input, RadixThemesComponent):\n \"\"\"Captures user input with an optional slot for buttons and icons.\"\"\"\n\n tag = \"TextField.Root\"\n\n # Text field size \"1\" - \"3\"\n size: Var[Responsive[LiteralTextFieldSize]]\n\n # Variant of text field: \"classic\" | \"surface\" | \"soft\"\n variant: Var[LiteralTextFieldVariant]\n\n # Override theme color for text field\n color_scheme: Var[LiteralAccentColor]\n\n # Override theme radius for text field: \"none\" | \"small\" | \"medium\" | \"large\" | \"full\"\n radius: Var[LiteralRadius]\n\n # Whether the input should have autocomplete enabled\n auto_complete: Var[bool]\n\n # The value of the input when initially rendered.\n default_value: Var[str]\n\n # Disables the input\n disabled: Var[bool]\n\n # Specifies the maximum number of characters allowed in the input\n max_length: Var[int]\n\n # Specifies the minimum number of characters required in the input\n min_length: Var[int]\n\n # Name of the input, used when sending form data\n name: Var[str]\n\n # Placeholder text in the input\n placeholder: Var[str]\n\n # Indicates whether the input is read-only\n read_only: Var[bool]\n\n # Indicates that the input is required\n required: Var[bool]\n\n # Specifies the type of input\n type: Var[str]\n\n # Value of the input\n value: Var[str | int | float]\n\n # References a datalist for suggested options\n list: Var[str]\n\n # Fired when the value of the textarea changes.\n on_change: EventHandler[input_event]\n\n # Fired when the textarea is focused.\n on_focus: EventHandler[input_event]\n\n # Fired when the textarea is blurred.\n on_blur: EventHandler[input_event]\n\n # Fired when a key is pressed down.\n on_key_down: EventHandler[key_event]\n\n # Fired when a key is released.\n on_key_up: EventHandler[key_event]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create an Input component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The component.\n \"\"\"\n value = props.get(\"value\")\n\n # React expects an empty string(instead of null) for controlled inputs.\n if value is not None and is_optional(\n (value_var := Var.create(value))._var_type\n ):\n value_var_is_not_none = value_var != Var.create(None)\n value_var_is_not_undefined = value_var != Var(_js_expr=\"undefined\")\n props[\"value\"] = ternary_operation(\n value_var_is_not_none & value_var_is_not_undefined,\n value,\n Var.create(\"\"),\n )\n\n component = super().create(*children, **props)\n if props.get(\"value\") is not None and props.get(\"on_change\") is not None:\n # create a debounced input if the user requests full control to avoid typing jank\n return DebounceInput.create(component)\n return component\n\n\nclass TextFieldSlot(RadixThemesComponent):\n \"\"\"Contains icons or buttons associated with an Input.\"\"\"\n\n tag = \"TextField.Slot\"\n\n # Override theme color for text field slot\n color_scheme: Var[LiteralAccentColor]\n\n # Which side of the input the slot should be placed on\n side: Var[Literal[\"left\", \"right\"]]\n\n\nclass TextField(ComponentNamespace):\n \"\"\"TextField components namespace.\"\"\"\n\n slot = staticmethod(TextFieldSlot.create)\n __call__ = staticmethod(TextFieldRoot.create)\n\n\ninput = text_field = TextField()\n" }, { "path": "reflex/components/radix/themes/components/tooltip.py", "content": "\"\"\"Interactive components provided by @radix-ui/themes.\"\"\"\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.constants.compiler import MemoizationMode\nfrom reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec\nfrom reflex.utils import format\nfrom reflex.vars.base import Var\n\nLiteralSideType = Literal[\n \"top\",\n \"right\",\n \"bottom\",\n \"left\",\n]\n\nLiteralAlignType = Literal[\n \"start\",\n \"center\",\n \"end\",\n]\n\nLiteralStickyType = Literal[\n \"partial\",\n \"always\",\n]\n\n\nARIA_LABEL_KEY = \"aria_label\"\n\n\n# The Tooltip inherits props from the Tooltip.Root, Tooltip.Portal, Tooltip.Content\nclass Tooltip(RadixThemesComponent):\n \"\"\"Floating element that provides a control with contextual information via pointer or focus.\"\"\"\n\n tag = \"Tooltip\"\n\n # The content of the tooltip.\n content: Var[str]\n\n # The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.\n default_open: Var[bool]\n\n # The controlled open state of the tooltip. Must be used in conjunction with `on_open_change`.\n open: Var[bool]\n\n # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to \"top\".\n side: Var[LiteralSideType]\n\n # The distance in pixels from the trigger. Defaults to 0.\n side_offset: Var[float | int]\n\n # The preferred alignment against the trigger. May change when collisions occur. Defaults to \"center\".\n align: Var[LiteralAlignType]\n\n # An offset in pixels from the \"start\" or \"end\" alignment options.\n align_offset: Var[float | int]\n\n # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.\n avoid_collisions: Var[bool]\n\n # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { \"top\": 20, \"left\": 20 }. Defaults to 0.\n collision_padding: Var[float | int | dict[str, float | int]]\n\n # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.\n arrow_padding: Var[float | int]\n\n # The sticky behavior on the align axis. \"partial\" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst \"always\" will keep the content in the boundary regardless. Defaults to \"partial\".\n sticky: Var[LiteralStickyType]\n\n # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.\n hide_when_detached: Var[bool]\n\n # Override the duration in milliseconds to customize the open delay for a specific tooltip. Default is 700.\n delay_duration: Var[float | int]\n\n # Prevents Tooltip content from remaining open when hovering.\n disable_hoverable_content: Var[bool]\n\n # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n force_mount: Var[bool]\n\n # By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.\n aria_label: Var[str]\n\n # Fired when the open state changes.\n on_open_change: EventHandler[passthrough_event_spec(bool)]\n\n # Fired when the escape key is pressed.\n on_escape_key_down: EventHandler[no_args_event_spec]\n\n # Fired when the pointer is down outside the tooltip.\n on_pointer_down_outside: EventHandler[no_args_event_spec]\n\n _memoization_mode = MemoizationMode(recursive=False)\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Initialize the Tooltip component.\n\n Run some additional handling on the props.\n\n Args:\n *children: The positional arguments\n **props: The keyword arguments\n\n Returns:\n The created component.\n \"\"\"\n if props.get(ARIA_LABEL_KEY) is not None:\n props[format.to_kebab_case(ARIA_LABEL_KEY)] = props.pop(ARIA_LABEL_KEY)\n\n return super().create(*children, **props)\n\n\ntooltip = Tooltip.create\n" }, { "path": "reflex/components/radix/themes/layout/__init__.py", "content": "\"\"\"Layout components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex import RADIX_THEMES_LAYOUT_MAPPING\nfrom reflex.utils import lazy_loader\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"\".join(k.split(\"components.radix.themes.layout.\")[-1]): v\n for k, v in RADIX_THEMES_LAYOUT_MAPPING.items()\n}\n\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/radix/themes/layout/base.py", "content": "\"\"\"Declarative layout and common spacing props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import (\n CommonMarginProps,\n CommonPaddingProps,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nLiteralBoolNumber = Literal[\"0\", \"1\"]\n\n\nclass LayoutComponent(CommonMarginProps, CommonPaddingProps, RadixThemesComponent):\n \"\"\"Box, Flex and Grid are foundational elements you'll use to construct\n layouts. Box provides block-level spacing and sizing, while Flex and Grid\n let you create flexible columns, rows and grids.\n \"\"\"\n\n # Whether the element will take up the smallest possible space: \"0\" | \"1\"\n flex_shrink: Var[Responsive[LiteralBoolNumber]]\n\n # Whether the element will take up the largest possible space: \"0\" | \"1\"\n flex_grow: Var[Responsive[LiteralBoolNumber]]\n" }, { "path": "reflex/components/radix/themes/layout/box.py", "content": "\"\"\"Declarative layout and common spacing props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import RadixThemesComponent\n\n\nclass Box(elements.Div, RadixThemesComponent):\n \"\"\"A fundamental layout building block, based on `div` element.\"\"\"\n\n tag = \"Box\"\n\n\nbox = Box.create\n" }, { "path": "reflex/components/radix/themes/layout/center.py", "content": "\"\"\"A center component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any\n\nfrom .flex import Flex\n\n\nclass Center(Flex):\n \"\"\"A center component.\"\"\"\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style that center the content.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"display\": \"flex\",\n \"align_items\": \"center\",\n \"justify_content\": \"center\",\n }\n\n\ncenter = Center.create\n" }, { "path": "reflex/components/radix/themes/layout/container.py", "content": "\"\"\"Declarative layout and common spacing props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.style import STACK_CHILDREN_FULL_WIDTH\nfrom reflex.vars.base import LiteralVar, Var\n\nLiteralContainerSize = Literal[\"1\", \"2\", \"3\", \"4\"]\n\n\nclass Container(elements.Div, RadixThemesComponent):\n \"\"\"Constrains the maximum width of page content.\n\n See https://www.radix-ui.com/themes/docs/components/container\n \"\"\"\n\n tag = \"Container\"\n\n # The size of the container: \"1\" - \"4\" (default \"3\")\n size: Var[Responsive[LiteralContainerSize]] = LiteralVar.create(\"3\")\n\n @classmethod\n def create(\n cls,\n *children,\n padding: str = \"16px\",\n stack_children_full_width: bool = False,\n **props,\n ):\n \"\"\"Create the container component.\n\n Args:\n children: The children components.\n padding: The padding of the container.\n stack_children_full_width: If True, any vstack/hstack children will have 100% width.\n props: The properties of the container.\n\n Returns:\n The container component.\n \"\"\"\n if stack_children_full_width:\n props[\"style\"] = {**STACK_CHILDREN_FULL_WIDTH, **props.pop(\"style\", {})}\n return super().create(\n *children,\n padding=padding,\n **props,\n )\n\n\ncontainer = Container.create\n" }, { "path": "reflex/components/radix/themes/layout/flex.py", "content": "\"\"\"Declarative layout and common spacing props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n LiteralAlign,\n LiteralJustify,\n LiteralSpacing,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nLiteralFlexDirection = Literal[\"row\", \"column\", \"row-reverse\", \"column-reverse\"]\nLiteralFlexWrap = Literal[\"nowrap\", \"wrap\", \"wrap-reverse\"]\n\n\nclass Flex(elements.Div, RadixThemesComponent):\n \"\"\"Component for creating flex layouts.\"\"\"\n\n tag = \"Flex\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # How child items are laid out: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\n direction: Var[Responsive[LiteralFlexDirection]]\n\n # Alignment of children along the main axis: \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\"\n align: Var[Responsive[LiteralAlign]]\n\n # Alignment of children along the cross axis: \"start\" | \"center\" | \"end\" | \"between\"\n justify: Var[Responsive[LiteralJustify]]\n\n # Whether children should wrap when they reach the end of their container: \"nowrap\" | \"wrap\" | \"wrap-reverse\"\n wrap: Var[Responsive[LiteralFlexWrap]]\n\n # Gap between children: \"0\" - \"9\"\n spacing: Var[Responsive[LiteralSpacing]]\n\n # Reflex maps the \"spacing\" prop to \"gap\" prop.\n _rename_props: ClassVar[dict[str, str]] = {\"spacing\": \"gap\"}\n\n\nflex = Flex.create\n" }, { "path": "reflex/components/radix/themes/layout/grid.py", "content": "\"\"\"Declarative layout and common spacing props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import ClassVar, Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import (\n LiteralAlign,\n LiteralJustify,\n LiteralSpacing,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nLiteralGridFlow = Literal[\"row\", \"column\", \"dense\", \"row-dense\", \"column-dense\"]\n\n\nclass Grid(elements.Div, RadixThemesComponent):\n \"\"\"Component for creating grid layouts.\"\"\"\n\n tag = \"Grid\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Number of columns\n columns: Var[Responsive[str]]\n\n # Number of rows\n rows: Var[Responsive[str]]\n\n # How the grid items are laid out: \"row\" | \"column\" | \"dense\" | \"row-dense\" | \"column-dense\"\n flow: Var[Responsive[LiteralGridFlow]]\n\n # Alignment of children along the main axis: \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\"\n align: Var[Responsive[LiteralAlign]]\n\n # Alignment of children along the cross axis: \"start\" | \"center\" | \"end\" | \"between\"\n justify: Var[Responsive[LiteralJustify]]\n\n # Gap between children: \"0\" - \"9\"\n spacing: Var[Responsive[LiteralSpacing]]\n\n # Gap between children horizontal: \"0\" - \"9\"\n spacing_x: Var[Responsive[LiteralSpacing]]\n\n # Gap between children vertical: \"0\" - \"9\"\n spacing_y: Var[Responsive[LiteralSpacing]]\n\n # Reflex maps the \"spacing\" prop to \"gap\" prop.\n _rename_props: ClassVar[dict[str, str]] = {\n \"spacing\": \"gap\",\n \"spacing_x\": \"gap_x\",\n \"spacing_y\": \"gap_y\",\n }\n\n\ngrid = Grid.create\n" }, { "path": "reflex/components/radix/themes/layout/list.py", "content": "\"\"\"List components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Iterable\nfrom typing import Any, Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.foreach import Foreach\nfrom reflex.components.el.elements.base import BaseHTML\nfrom reflex.components.el.elements.typography import Li, Ol, Ul\nfrom reflex.components.lucide.icon import Icon\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.radix.themes.typography.text import Text\nfrom reflex.vars.base import Var\n\nLiteralListStyleTypeUnordered = Literal[\n \"none\",\n \"disc\",\n \"circle\",\n \"square\",\n]\n\nLiteralListStyleTypeOrdered = Literal[\n \"none\",\n \"decimal\",\n \"decimal-leading-zero\",\n \"lower-roman\",\n \"upper-roman\",\n \"lower-greek\",\n \"lower-latin\",\n \"upper-latin\",\n \"armenian\",\n \"georgian\",\n \"lower-alpha\",\n \"upper-alpha\",\n \"hiragana\",\n \"katakana\",\n]\n\n\nclass BaseList(BaseHTML, MarkdownComponentMap):\n \"\"\"Base class for ordered and unordered lists.\"\"\"\n\n tag = \"ul\"\n\n # The style of the list. Default to \"none\".\n list_style_type: Var[\n LiteralListStyleTypeUnordered | LiteralListStyleTypeOrdered\n ] = Var.create(\"none\")\n\n # A list of items to add to the list.\n items: Var[Iterable] = Var.create([])\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ):\n \"\"\"Create a list component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The list component.\n \"\"\"\n items = props.pop(\"items\", None)\n list_style_type = props.pop(\"list_style_type\", \"none\")\n\n if not children and items is not None:\n if isinstance(items, Var):\n children = [Foreach.create(items, ListItem.create)]\n else:\n children = [ListItem.create(item) for item in items]\n props[\"direction\"] = \"column\"\n style = props.setdefault(\"style\", {})\n style[\"list_style_type\"] = list_style_type\n if \"gap\" in props:\n style[\"gap\"] = props[\"gap\"]\n return super().create(*children, **props)\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"direction\": \"column\",\n }\n\n def _exclude_props(self) -> list[str]:\n return [\"items\", \"list_style_type\"]\n\n\nclass UnorderedList(BaseList, Ul):\n \"\"\"Display an unordered list.\"\"\"\n\n tag = \"ul\"\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ):\n \"\"\"Create an unordered list component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The list component.\n \"\"\"\n items = props.pop(\"items\", None)\n list_style_type = props.pop(\"list_style_type\", \"disc\")\n\n props[\"margin_left\"] = props.get(\"margin_left\", \"1.5rem\")\n return super().create(\n *children, items=items, list_style_type=list_style_type, **props\n )\n\n\nclass OrderedList(BaseList, Ol):\n \"\"\"Display an ordered list.\"\"\"\n\n tag = \"ol\"\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ):\n \"\"\"Create an ordered list component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The list component.\n \"\"\"\n items = props.pop(\"items\", None)\n list_style_type = props.pop(\"list_style_type\", \"decimal\")\n\n props[\"margin_left\"] = props.get(\"margin_left\", \"1.5rem\")\n return super().create(\n *children, items=items, list_style_type=list_style_type, **props\n )\n\n\nclass ListItem(Li, MarkdownComponentMap):\n \"\"\"Display an item of an ordered or unordered list.\"\"\"\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a list item component.\n\n Args:\n *children: The children of the component.\n **props: The properties of the component.\n\n Returns:\n The list item component.\n \"\"\"\n for child in children:\n if isinstance(child, Text):\n child.as_ = \"span\" # pyright: ignore[reportAttributeAccessIssue]\n elif isinstance(child, Icon) and \"display\" not in child.style:\n child.style[\"display\"] = \"inline\"\n return super().create(*children, **props)\n\n\nclass List(ComponentNamespace):\n \"\"\"List components.\"\"\"\n\n item = staticmethod(ListItem.create)\n ordered = staticmethod(OrderedList.create)\n unordered = staticmethod(UnorderedList.create)\n __call__ = staticmethod(BaseList.create)\n\n\nlist_ns = List()\nlist_item = list_ns.item\nordered_list = list_ns.ordered\nunordered_list = list_ns.unordered\n\n\ndef __getattr__(name: Any):\n # special case for when accessing list to avoid shadowing\n # python's built in list object.\n if name == \"list\":\n return list_ns\n try:\n return globals()[name]\n except KeyError:\n msg = f\"module '{__name__} has no attribute '{name}'\"\n raise AttributeError(msg) from None\n" }, { "path": "reflex/components/radix/themes/layout/section.py", "content": "\"\"\"Declarative layout and common spacing props.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import RadixThemesComponent\nfrom reflex.vars.base import LiteralVar, Var\n\nLiteralSectionSize = Literal[\"1\", \"2\", \"3\"]\n\n\nclass Section(elements.Section, RadixThemesComponent):\n \"\"\"Denotes a section of page content.\"\"\"\n\n tag = \"Section\"\n\n # The size of the section: \"1\" - \"3\" (default \"2\")\n size: Var[Responsive[LiteralSectionSize]] = LiteralVar.create(\"2\")\n\n\nsection = Section.create\n" }, { "path": "reflex/components/radix/themes/layout/spacer.py", "content": "\"\"\"A spacer component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any\n\nfrom .flex import Flex\n\n\nclass Spacer(Flex):\n \"\"\"A spacer component.\"\"\"\n\n def add_style(self) -> dict[str, Any] | None:\n \"\"\"Add style to the component.\n\n Returns:\n The style of the component.\n \"\"\"\n return {\n \"flex\": 1,\n \"justify_self\": \"stretch\",\n \"align_self\": \"stretch\",\n }\n\n\nspacer = Spacer.create\n" }, { "path": "reflex/components/radix/themes/layout/stack.py", "content": "\"\"\"Stack components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.component import Component\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.radix.themes.base import LiteralAlign, LiteralSpacing\nfrom reflex.vars.base import Var\n\nfrom .flex import Flex, LiteralFlexDirection\n\n\nclass Stack(Flex):\n \"\"\"A stack component.\"\"\"\n\n # The spacing between each stack item.\n spacing: Var[Responsive[LiteralSpacing]] = Var.create(\"3\")\n\n # The alignment of the stack items.\n align: Var[Responsive[LiteralAlign]] = Var.create(\"start\")\n\n @classmethod\n def create(\n cls,\n *children,\n **props,\n ) -> Component:\n \"\"\"Create a new instance of the component.\n\n Args:\n *children: The children of the stack.\n **props: The properties of the stack.\n\n Returns:\n The stack component.\n \"\"\"\n # Apply the default classname\n given_class_name = props.pop(\"class_name\", [])\n if not isinstance(given_class_name, list):\n given_class_name = [given_class_name]\n props[\"class_name\"] = [\"rx-Stack\", *given_class_name]\n\n return super().create(\n *children,\n **props,\n )\n\n\nclass VStack(Stack):\n \"\"\"A vertical stack component.\"\"\"\n\n # The direction of the stack.\n direction: Var[Responsive[LiteralFlexDirection]] = Var.create(\"column\")\n\n\nclass HStack(Stack):\n \"\"\"A horizontal stack component.\"\"\"\n\n # The direction of the stack.\n direction: Var[Responsive[LiteralFlexDirection]] = Var.create(\"row\")\n\n\nstack = Stack.create\nhstack = HStack.create\nvstack = VStack.create\n" }, { "path": "reflex/components/radix/themes/typography/__init__.py", "content": "\"\"\"Typographic components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex import RADIX_THEMES_TYPOGRAPHY_MAPPING\nfrom reflex.utils import lazy_loader\n\n_SUBMOD_ATTRS: dict[str, list[str]] = {\n \"\".join(k.split(\"components.radix.themes.typography.\")[-1]): v\n for k, v in RADIX_THEMES_TYPOGRAPHY_MAPPING.items()\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/radix/themes/typography/base.py", "content": "\"\"\"Components for rendering text.\n\nhttps://www.radix-ui.com/themes/docs/theme/typography\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nLiteralTextWeight = Literal[\"light\", \"regular\", \"medium\", \"bold\"]\nLiteralTextAlign = Literal[\"left\", \"center\", \"right\"]\nLiteralTextSize = Literal[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]\nLiteralTextTrim = Literal[\"normal\", \"start\", \"end\", \"both\"]\n" }, { "path": "reflex/components/radix/themes/typography/blockquote.py", "content": "\"\"\"Components for rendering heading.\n\nhttps://www.radix-ui.com/themes/docs/theme/typography\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\nfrom .base import LiteralTextSize, LiteralTextWeight\n\n\nclass Blockquote(elements.Blockquote, RadixThemesComponent):\n \"\"\"A block level extended quotation.\"\"\"\n\n tag = \"Blockquote\"\n\n # Text size: \"1\" - \"9\"\n size: Var[Responsive[LiteralTextSize]]\n\n # Thickness of text: \"light\" | \"regular\" | \"medium\" | \"bold\"\n weight: Var[Responsive[LiteralTextWeight]]\n\n # Overrides the accent color inherited from the Theme.\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the text with higher contrast color\n high_contrast: Var[bool]\n\n\nblockquote = Blockquote.create\n" }, { "path": "reflex/components/radix/themes/typography/code.py", "content": "\"\"\"Components for rendering heading.\n\nhttps://www.radix-ui.com/themes/docs/theme/typography\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.radix.themes.base import (\n LiteralAccentColor,\n LiteralVariant,\n RadixThemesComponent,\n)\nfrom reflex.vars.base import Var\n\nfrom .base import LiteralTextSize, LiteralTextWeight\n\n\nclass Code(elements.Code, RadixThemesComponent, MarkdownComponentMap):\n \"\"\"A block level extended quotation.\"\"\"\n\n tag = \"Code\"\n\n # The visual variant to apply: \"solid\" | \"soft\" | \"outline\" | \"ghost\"\n variant: Var[LiteralVariant]\n\n # Text size: \"1\" - \"9\"\n size: Var[Responsive[LiteralTextSize]]\n\n # Thickness of text: \"light\" | \"regular\" | \"medium\" | \"bold\"\n weight: Var[Responsive[LiteralTextWeight]]\n\n # Overrides the accent color inherited from the Theme.\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the text with higher contrast color\n high_contrast: Var[bool]\n\n\ncode = Code.create\n" }, { "path": "reflex/components/radix/themes/typography/heading.py", "content": "\"\"\"Components for rendering heading.\n\nhttps://www.radix-ui.com/themes/docs/theme/typography\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\nfrom .base import LiteralTextAlign, LiteralTextSize, LiteralTextTrim, LiteralTextWeight\n\n\nclass Heading(elements.H1, RadixThemesComponent, MarkdownComponentMap):\n \"\"\"A foundational text primitive based on the element.\"\"\"\n\n tag = \"Heading\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)\n as_: Var[str]\n\n # Text size: \"1\" - \"9\"\n size: Var[Responsive[LiteralTextSize]]\n\n # Thickness of text: \"light\" | \"regular\" | \"medium\" | \"bold\"\n weight: Var[Responsive[LiteralTextWeight]]\n\n # Alignment of text in element: \"left\" | \"center\" | \"right\"\n align: Var[Responsive[LiteralTextAlign]]\n\n # Removes the leading trim space: \"normal\" | \"start\" | \"end\" | \"both\"\n trim: Var[Responsive[LiteralTextTrim]]\n\n # Overrides the accent color inherited from the Theme.\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the text with higher contrast color\n high_contrast: Var[bool]\n\n\nheading = Heading.create\n" }, { "path": "reflex/components/radix/themes/typography/link.py", "content": "\"\"\"Components for rendering heading.\n\nhttps://www.radix-ui.com/themes/docs/theme/typography\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.component import Component, MemoizationLeaf\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.core.colors import color\nfrom reflex.components.core.cond import cond\nfrom reflex.components.el.elements.inline import A\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.components.react_router.dom import ReactRouterLink\nfrom reflex.utils.imports import ImportDict, ImportVar\nfrom reflex.vars.base import Var\n\nfrom .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight\n\nLiteralLinkUnderline = Literal[\"auto\", \"hover\", \"always\", \"none\"]\n\n\n_KNOWN_REACT_ROUTER_LINK_PROPS = frozenset(ReactRouterLink.get_props())\n\n\nclass Link(RadixThemesComponent, A, MemoizationLeaf, MarkdownComponentMap):\n \"\"\"A semantic element for navigation between pages.\"\"\"\n\n tag = \"Link\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Text size: \"1\" - \"9\"\n size: Var[Responsive[LiteralTextSize]]\n\n # Thickness of text: \"light\" | \"regular\" | \"medium\" | \"bold\"\n weight: Var[Responsive[LiteralTextWeight]]\n\n # Removes the leading trim space: \"normal\" | \"start\" | \"end\" | \"both\"\n trim: Var[Responsive[LiteralTextTrim]]\n\n # Sets the visibility of the underline affordance: \"auto\" | \"hover\" | \"always\" | \"none\"\n underline: Var[LiteralLinkUnderline]\n\n # Overrides the accent color inherited from the Theme.\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the text with higher contrast color\n high_contrast: Var[bool]\n\n # If True, the link will open in a new tab\n is_external: Var[bool]\n\n def add_imports(self) -> ImportDict:\n \"\"\"Add imports for the Link component.\n\n Returns:\n The import dict.\n \"\"\"\n return {\n \"react-router\": [ImportVar(tag=\"Link\", alias=\"ReactRouterLink\")],\n }\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a Link component.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n Component: The link component\n\n Raises:\n ValueError: in case of missing children\n \"\"\"\n props.setdefault(\"_hover\", {\"color\": color(\"accent\", 8)})\n href = props.get(\"href\")\n\n is_external = props.pop(\"is_external\", None)\n\n if is_external is not None:\n props[\"target\"] = cond(is_external, \"_blank\", \"\")\n\n if href is not None:\n if not len(children):\n msg = \"Link without a child will not display\"\n raise ValueError(msg)\n\n if \"as_child\" not in props:\n # Extract props for the ReactRouterLink, the rest go to the Link/A element.\n react_router_link_props = {}\n for prop in props.copy():\n if prop in _KNOWN_REACT_ROUTER_LINK_PROPS:\n react_router_link_props[prop] = props.pop(prop)\n\n react_router_link_props[\"to\"] = react_router_link_props.pop(\n \"href\", href\n )\n\n # If user does not use `as_child`, by default we render using react_router_link to avoid page refresh during internal navigation\n return super().create(\n ReactRouterLink.create(*children, **react_router_link_props),\n as_child=True,\n **props,\n )\n else:\n props[\"href\"] = \"#\"\n\n return super().create(*children, **props)\n\n\nlink = Link.create\n" }, { "path": "reflex/components/radix/themes/typography/text.py", "content": "\"\"\"Components for rendering text.\n\nhttps://www.radix-ui.com/themes/docs/theme/typography\n\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Literal\n\nfrom reflex.components.component import ComponentNamespace\nfrom reflex.components.core.breakpoints import Responsive\nfrom reflex.components.el import elements\nfrom reflex.components.markdown.markdown import MarkdownComponentMap\nfrom reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent\nfrom reflex.vars.base import Var\n\nfrom .base import LiteralTextAlign, LiteralTextSize, LiteralTextTrim, LiteralTextWeight\n\nLiteralType = Literal[\n \"p\",\n \"label\",\n \"div\",\n \"span\",\n \"b\",\n \"i\",\n \"u\",\n \"abbr\",\n \"cite\",\n \"del\",\n \"em\",\n \"ins\",\n \"kbd\",\n \"mark\",\n \"s\",\n \"samp\",\n \"sub\",\n \"sup\",\n]\n\n\nclass Text(elements.Span, RadixThemesComponent, MarkdownComponentMap):\n \"\"\"A foundational text primitive based on the element.\"\"\"\n\n tag = \"Text\"\n\n # Change the default rendered element for the one passed as a child, merging their props and behavior.\n as_child: Var[bool]\n\n # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)\n as_: Var[LiteralType] = Var.create(\"p\")\n\n # Text size: \"1\" - \"9\"\n size: Var[Responsive[LiteralTextSize]]\n\n # Thickness of text: \"light\" | \"regular\" | \"medium\" | \"bold\"\n weight: Var[Responsive[LiteralTextWeight]]\n\n # Alignment of text in element: \"left\" | \"center\" | \"right\"\n align: Var[Responsive[LiteralTextAlign]]\n\n # Removes the leading trim space: \"normal\" | \"start\" | \"end\" | \"both\"\n trim: Var[Responsive[LiteralTextTrim]]\n\n # Overrides the accent color inherited from the Theme.\n color_scheme: Var[LiteralAccentColor]\n\n # Whether to render the text with higher contrast color\n high_contrast: Var[bool]\n\n\nclass Span(Text):\n \"\"\"A variant of text rendering as element.\"\"\"\n\n as_: Var[LiteralType] = Var.create(\"span\")\n\n\nclass Em(elements.Em, RadixThemesComponent):\n \"\"\"Marks text to stress emphasis.\"\"\"\n\n tag = \"Em\"\n\n\nclass Kbd(elements.Kbd, RadixThemesComponent):\n \"\"\"Represents keyboard input or a hotkey.\"\"\"\n\n tag = \"Kbd\"\n\n # Text size: \"1\" - \"9\"\n size: Var[LiteralTextSize]\n\n\nclass Quote(elements.Q, RadixThemesComponent):\n \"\"\"A short inline quotation.\"\"\"\n\n tag = \"Quote\"\n\n\nclass Strong(elements.Strong, RadixThemesComponent):\n \"\"\"Marks text to signify strong importance.\"\"\"\n\n tag = \"Strong\"\n\n\nclass TextNamespace(ComponentNamespace):\n \"\"\"Checkbox components namespace.\"\"\"\n\n __call__ = staticmethod(Text.create)\n em = staticmethod(Em.create)\n kbd = staticmethod(Kbd.create)\n quote = staticmethod(Quote.create)\n strong = staticmethod(Strong.create)\n span = staticmethod(Span.create)\n\n\ntext = TextNamespace()\n" }, { "path": "reflex/components/react_player/__init__.py", "content": "\"\"\"React Player component for audio and video.\"\"\"\n\nfrom . import react_player\nfrom .audio import Audio\nfrom .video import Video\n\naudio = Audio.create\nvideo = Video.create\n" }, { "path": "reflex/components/react_player/audio.py", "content": "\"\"\"A audio component.\"\"\"\n\nfrom reflex.components.react_player.react_player import ReactPlayer\n\n\nclass Audio(ReactPlayer):\n \"\"\"Audio component share with Video component.\"\"\"\n" }, { "path": "reflex/components/react_player/react_player.py", "content": "\"\"\"React-Player component.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import Any, TypedDict\n\nfrom reflex.components.component import Component\nfrom reflex.components.core.cond import cond\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.utils import console\nfrom reflex.vars.base import Var\nfrom reflex.vars.object import ObjectVar\n\nReactPlayerEvent = ObjectVar[dict[str, dict[str, dict[str, Any]]]]\n\n\nclass Progress(TypedDict):\n \"\"\"Callback containing played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds.\"\"\"\n\n played: float\n playedSeconds: float\n loaded: float\n loadedSeconds: float\n duration: float\n\n\ndef _on_progress_signature(event: ReactPlayerEvent) -> list[Var[Progress]]:\n \"\"\"Type signature for on_progress event.\n\n Args:\n event: The event variable.\n\n Returns:\n The progress information extracted from the event.\n \"\"\"\n player_info = event[\"target\"][\"api\"][\"playerInfo\"].to(dict)\n progress_state = player_info[\"progressState\"].to(dict)\n current = progress_state[\"current\"].to(float)\n loaded = progress_state[\"loaded\"].to(float)\n duration = progress_state[\"duration\"].to(float)\n return [\n cond(\n progress_state,\n {\n \"played\": cond(duration, current / duration, 0.0),\n \"playedSeconds\": current,\n \"loaded\": cond(duration, loaded / duration, 0.0),\n \"loadedSeconds\": loaded,\n \"duration\": duration,\n },\n {\n \"played\": 0.0,\n \"playedSeconds\": 0.0,\n \"loaded\": 0.0,\n \"loadedSeconds\": 0.0,\n \"duration\": 0.0,\n },\n ).to(Progress)\n ]\n\n\ndef _player_info_key_or_zero(event: ReactPlayerEvent, key: str) -> Var[float]:\n \"\"\"Helper to extract a value from playerInfo or return 0.0 if not available.\n\n Args:\n event: The event variable.\n key: The key to extract from playerInfo.\n\n Returns:\n The extracted value or 0.0 if not available.\n \"\"\"\n player_info = event[\"target\"][\"api\"][\"playerInfo\"].to(dict)\n return cond(\n player_info[key],\n player_info[key],\n 0.0,\n ).to(float)\n\n\ndef _on_time_update_signature(event: ReactPlayerEvent) -> list[Var[float]]:\n \"\"\"Type signature for on_time_update event.\n\n Args:\n event: The event variable.\n\n Returns:\n The current timestamp in seconds.\n \"\"\"\n return [_player_info_key_or_zero(event, \"currentTime\")]\n\n\ndef _on_duration_change_signature(event: ReactPlayerEvent) -> list[Var[float]]:\n \"\"\"Type signature for on_duration_change event.\n\n Args:\n event: The event variable.\n\n Returns:\n The active media's duration in seconds.\n \"\"\"\n return [_player_info_key_or_zero(event, \"duration\")]\n\n\ndef _on_rate_change_signature(event: ReactPlayerEvent) -> list[Var[float]]:\n \"\"\"Type signature for on_rate_change event.\n\n Args:\n event: The event variable.\n\n Returns:\n The current playback rate.\n \"\"\"\n return [_player_info_key_or_zero(event, \"playbackRate\")]\n\n\n_DEPRECATED_PROP_MAP = {\n \"url\": \"src\",\n \"on_duration\": \"on_duration_change\",\n \"on_playback_rate_change\": \"on_rate_change\",\n \"on_seek\": \"on_seeked\",\n \"on_buffer\": \"on_waiting\",\n \"on_buffer_end\": \"on_playing\",\n \"on_enable_pip\": \"on_enter_picture_in_picture\",\n \"on_disable_pip\": \"on_leave_picture_in_picture\",\n}\n\n\nclass ReactPlayer(Component):\n \"\"\"Using react-player and not implement all props and callback yet.\n reference: https://github.com/cookpete/react-player.\n \"\"\"\n\n library = \"react-player@3.4.0\"\n\n tag = \"ReactPlayer\"\n\n is_default = True\n\n # The url of a video or song to play\n src: Var[str | list[str] | list[dict[str, str]]]\n\n # Set to true or false to pause or play the media\n playing: Var[bool]\n\n # Set to true or false to loop the media\n loop: Var[bool]\n\n # Set to true or false to display native player controls.\n controls: Var[bool] = Var.create(True)\n\n # Set to true to show just the video thumbnail, which loads the full player on click\n light: Var[bool]\n\n # Set the volume of the player, between 0 and 1\n volume: Var[float]\n\n # Mutes the player\n muted: Var[bool]\n\n # Player-specific configuration parameters.\n config: Var[dict[str, Any]]\n\n # Set to true to disable the default remote playback option on supported devices.\n disable_remote_playback: Var[bool]\n\n # Called when media is loaded and ready to play. If playing is set to true, media will play immediately.\n on_ready: EventHandler[no_args_event_spec]\n\n # Called when media starts playing.\n on_start: EventHandler[no_args_event_spec]\n\n # Called when playing is set to true.\n on_play: EventHandler[no_args_event_spec]\n\n # Called when media starts or resumes playing after pausing or buffering.\n on_playing: EventHandler[no_args_event_spec]\n\n # Called while the video is loading only. Contains played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds. eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }\n on_progress: EventHandler[_on_progress_signature]\n\n # Called when the media's current time changes (~4Hz, use .throttle to limit calls to backend).\n on_time_update: EventHandler[_on_time_update_signature]\n\n # Callback containing duration of the media, in seconds.\n on_duration_change: EventHandler[_on_duration_change_signature]\n\n # Called when media is paused.\n on_pause: EventHandler[no_args_event_spec]\n\n # Called when media starts buffering.\n on_waiting: EventHandler[no_args_event_spec]\n\n # Called when the media is seeking.\n on_seeking: EventHandler[no_args_event_spec]\n\n # Called when media seeks with seconds parameter.\n on_seeked: EventHandler[_on_time_update_signature]\n\n # Called when playback rate of the player changed. Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths.\n on_rate_change: EventHandler[_on_rate_change_signature]\n\n # Called when media finishes playing. Does not fire when loop is set to true.\n on_ended: EventHandler[no_args_event_spec]\n\n # Called when an error occurs whilst attempting to play media.\n on_error: EventHandler[no_args_event_spec]\n\n # Called when user clicks the light mode preview.\n on_click_preview: EventHandler[no_args_event_spec]\n\n # Called when picture-in-picture mode is enabled.\n on_enter_picture_in_picture: EventHandler[no_args_event_spec]\n\n # Called when picture-in-picture mode is disabled.\n on_leave_picture_in_picture: EventHandler[no_args_event_spec]\n\n @classmethod\n def create(cls, *children, **props) -> ReactPlayer:\n \"\"\"Create a component.\n\n Args:\n children: The children of the component.\n props: The props of the component.\n\n Returns:\n The created component.\n\n Raises:\n ValueError: If both a deprecated prop and its replacement are both passed.\n \"\"\"\n for prop, new_prop in _DEPRECATED_PROP_MAP.items():\n if prop in props:\n if new_prop in props:\n msg = (\n f\"The prop {prop!r} is deprecated, but the replacement {new_prop!r} is also passed. Please remove {prop!r}.\",\n )\n raise ValueError(msg)\n console.warn(\n f\"The prop {prop!r} has been replaced by {new_prop!r}, please update your code.\",\n )\n props[new_prop] = props.pop(prop)\n return super().create(*children, **props) # type: ignore[return-value]\n\n def _render(self, props: dict[str, Any] | None = None):\n \"\"\"Render the component. Adds width and height set to None because\n react-player will set them to some random value that overrides the\n css width and height.\n\n Args:\n props: The props to pass to the component.\n\n Returns:\n The rendered component.\n \"\"\"\n return (\n super()\n ._render(props)\n .add_props(\n width=Var.create(None),\n height=Var.create(None),\n )\n )\n" }, { "path": "reflex/components/react_player/video.py", "content": "\"\"\"A video component.\"\"\"\n\nfrom reflex.components.react_player.react_player import ReactPlayer\n\n\nclass Video(ReactPlayer):\n \"\"\"Video component share with audio component.\"\"\"\n" }, { "path": "reflex/components/react_router/__init__.py", "content": "\"\"\"React-router internal components.\"\"\"\n\nfrom .dom import ReactRouterLink\n\nlink = ReactRouterLink.create\n" }, { "path": "reflex/components/react_router/dom.py", "content": "\"\"\"Components for client side navigation within React Router applications.\"\"\"\n\nfrom __future__ import annotations\n\nfrom typing import ClassVar, Literal, TypedDict\n\nfrom reflex.components.el.elements.inline import A\nfrom reflex.vars.base import Var\n\nLiteralLinkDiscover = Literal[\"none\", \"render\"]\n\n\nclass To(TypedDict):\n \"\"\"Structured object for navigating via the `to` prop.\"\"\"\n\n # A URL pathname, beginning with a /\n pathname: str\n\n # A URL search string, beginning with a ?.\n search: str\n\n # A URL fragment identifier, beginning with a #.\n hash: str\n\n\nclass ReactRouterLink(A):\n \"\"\"Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an .\"\"\"\n\n library = \"react-router\"\n\n tag = \"Link\"\n\n alias = \"ReactRouterLink\"\n\n # The page to link to.\n to: Var[str | To]\n\n # Replaces the current entry in the history stack instead of pushing a new one onto it.\n replace: Var[bool]\n\n # Will use document navigation instead of client side routing when the link is clicked: the browser will handle the transition normally (as if it were an ).\n reload_document: Var[bool]\n\n # Prevents the scroll position from being reset to the top of the window when the link is clicked and the app is using ScrollRestoration. This only prevents new locations resetting scroll to the top, scroll position will be restored for back/forward button navigation.\n prevent_scroll_reset: Var[bool]\n\n # Defines the link discovery behavior\n discover: Var[LiteralLinkDiscover]\n\n # Enables a View Transition for this navigation.\n view_transition: Var[bool]\n\n @classmethod\n def create(cls, *children, **props):\n \"\"\"Create a ReactRouterLink component for client-side navigation.\n\n Args:\n *children: The children of the component.\n **props: The props of the component.\n\n Returns:\n The ReactRouterLink component.\n \"\"\"\n # React Router special behavior is triggered on the `to` prop, not href.\n if \"to\" not in props and \"href\" in props:\n props[\"to\"] = props.pop(\"href\")\n return super().create(*children, **props)\n\n _invalid_children: ClassVar[list[str]] = [\"A\", \"ReactRouterLink\"]\n" }, { "path": "reflex/components/recharts/__init__.py", "content": "\"\"\"Recharts components.\"\"\"\n\nfrom __future__ import annotations\n\nfrom reflex.utils import lazy_loader\n\n_SUBMOD_ATTRS: dict = {\n \"cartesian\": [\n \"area\",\n \"Area\",\n \"bar\",\n \"Bar\",\n \"line\",\n \"Line\",\n \"scatter\",\n \"Scatter\",\n \"x_axis\",\n \"XAxis\",\n \"y_axis\",\n \"YAxis\",\n \"z_axis\",\n \"ZAxis\",\n \"brush\",\n \"Brush\",\n \"cartesian_axis\",\n \"CartesianAxis\",\n \"cartesian_grid\",\n \"CartesianGrid\",\n \"reference_line\",\n \"ReferenceLine\",\n \"reference_dot\",\n \"ReferenceDot\",\n \"reference_area\",\n \"ReferenceArea\",\n \"error_bar\",\n \"ErrorBar\",\n \"funnel\",\n \"Funnel\",\n ],\n \"charts\": [\n \"area_chart\",\n \"AreaChart\",\n \"bar_chart\",\n \"BarChart\",\n \"line_chart\",\n \"LineChart\",\n \"composed_chart\",\n \"ComposedChart\",\n \"pie_chart\",\n \"PieChart\",\n \"radar_chart\",\n \"RadarChart\",\n \"radial_bar_chart\",\n \"RadialBarChart\",\n \"scatter_chart\",\n \"ScatterChart\",\n \"funnel_chart\",\n \"FunnelChart\",\n \"treemap\",\n \"Treemap\",\n ],\n \"general\": [\n \"responsive_container\",\n \"ResponsiveContainer\",\n \"legend\",\n \"Legend\",\n \"tooltip\",\n \"graphing_tooltip\",\n \"GraphingTooltip\",\n \"label\",\n \"Label\",\n \"label_list\",\n \"LabelList\",\n \"cell\",\n \"Cell\",\n ],\n \"polar\": [\n \"pie\",\n \"Pie\",\n \"radar\",\n \"Radar\",\n \"radial_bar\",\n \"RadialBar\",\n \"polar_angle_axis\",\n \"PolarAngleAxis\",\n \"polar_grid\",\n \"PolarGrid\",\n \"polar_radius_axis\",\n \"PolarRadiusAxis\",\n ],\n \"recharts\": [\n \"LiteralAnimationEasing\",\n \"LiteralAxisType\",\n \"LiteralBarChartStackOffset\",\n \"LiteralComposedChartBaseValue\",\n \"LiteralCurveType\",\n \"LiteralDirection\",\n \"LiteralGridType\",\n \"LiteralIconType\",\n \"LiteralIfOverflow\",\n \"LiteralInterval\",\n \"LiteralLayout\",\n \"LiteralLegendAlign\",\n \"LiteralLegendType\",\n \"LiteralLineType\",\n \"LiteralOrientation\",\n \"LiteralOrientationLeftRightMiddle\",\n \"LiteralOrientationTopBottom\",\n \"LiteralOrientationTopBottomLeftRight\",\n \"LiteralPolarRadiusType\",\n \"LiteralScale\",\n \"LiteralShape\",\n \"LiteralStackOffset\",\n \"LiteralSyncMethod\",\n \"LiteralVerticalAlign\",\n ],\n}\n\n__getattr__, __dir__, __all__ = lazy_loader.attach(\n __name__,\n submod_attrs=_SUBMOD_ATTRS,\n)\n" }, { "path": "reflex/components/recharts/cartesian.py", "content": "\"\"\"Cartesian charts in Recharts.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any, ClassVar, TypedDict\n\nfrom reflex.constants import EventTriggers\nfrom reflex.constants.colors import Color\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.vars.base import LiteralVar, Var\n\nfrom .recharts import (\n ACTIVE_DOT_TYPE,\n LiteralAnimationEasing,\n LiteralCurveType,\n LiteralDirection,\n LiteralIfOverflow,\n LiteralInterval,\n LiteralIntervalAxis,\n LiteralLayout,\n LiteralLegendType,\n LiteralLineType,\n LiteralOrientationLeftRight,\n LiteralOrientationTopBottom,\n LiteralOrientationTopBottomLeftRight,\n LiteralPolarRadiusType,\n LiteralScale,\n LiteralShape,\n LiteralTextAnchor,\n Recharts,\n)\n\n\nclass Axis(Recharts):\n \"\"\"A base class for axes in Recharts.\"\"\"\n\n # The key of data displayed in the axis.\n data_key: Var[str | int]\n\n # If set true, the axis do not display in the chart. Default: False\n hide: Var[bool]\n\n # The width of axis which is usually calculated internally.\n width: Var[str | int]\n\n # The height of axis, which can be set by user.\n height: Var[str | int]\n\n # The type of axis 'number' | 'category'\n type_: Var[LiteralPolarRadiusType]\n\n # If set 0, all the ticks will be shown. If set preserveStart\", \"preserveEnd\" or \"preserveStartEnd\", the ticks which is to be shown or hidden will be calculated automatically. Default: \"preserveEnd\"\n interval: Var[LiteralIntervalAxis | int]\n\n # Allow the ticks of Axis to be decimals or not. Default: True\n allow_decimals: Var[bool]\n\n # When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain. Default: False\n allow_data_overflow: Var[bool]\n\n # Allow the axis has duplicated categorys or not when the type of axis is \"category\". Default: True\n allow_duplicated_category: Var[bool]\n\n # The range of the axis. Work best in conjunction with allow_data_overflow. Default: [0, \"auto\"]\n domain: Var[Sequence]\n\n # If set false, no axis line will be drawn. Default: True\n axis_line: Var[bool]\n\n # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside. Default: False\n mirror: Var[bool]\n\n # Reverse the ticks or not. Default: False\n reversed: Var[bool]\n\n # The label of axis, which appears next to the axis.\n label: Var[str | int | dict[str, Any]]\n\n # If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold'. Default: \"auto\"\n scale: Var[LiteralScale]\n\n # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.\n unit: Var[str | int]\n\n # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.\n name: Var[str | int]\n\n # Set the values of axis ticks manually.\n ticks: Var[Sequence[str | int]]\n\n # If set false, no ticks will be drawn.\n tick: Var[bool | dict]\n\n # The count of axis ticks. Not used if 'type' is 'category'. Default: 5\n tick_count: Var[int]\n\n # If set false, no axis tick lines will be drawn. Default: True\n tick_line: Var[bool]\n\n # The length of tick line. Default: 6\n tick_size: Var[int]\n\n # The minimum gap between two adjacent labels. Default: 5\n min_tick_gap: Var[int]\n\n # The stroke color of axis. Default: rx.color(\"gray\", 9)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"gray\", 9))\n\n # The text anchor of axis. Default: \"middle\"\n text_anchor: Var[LiteralTextAnchor]\n\n # The customized event handler of click on the ticks of this axis\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousedown on the ticks of this axis\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the ticks of this axis\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the ticks of this axis\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the ticks of this axis\n on_mouse_out: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the ticks of this axis\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the ticks of this axis\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n\nclass XAxis(Axis):\n \"\"\"An XAxis component in Recharts.\"\"\"\n\n tag = \"XAxis\"\n\n alias = \"RechartsXAxis\"\n\n # The orientation of axis 'top' | 'bottom'. Default: \"bottom\"\n orientation: Var[LiteralOrientationTopBottom]\n\n # The id of x-axis which is corresponding to the data. Default: 0\n x_axis_id: Var[str | int]\n\n # Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden. Default: False\n include_hidden: Var[bool]\n\n # The angle of axis ticks. Default: 0\n angle: Var[int]\n\n # Specify the padding of x-axis. Default: {\"left\": 0, \"right\": 0}\n padding: Var[dict[str, int]]\n\n\nclass YAxis(Axis):\n \"\"\"A YAxis component in Recharts.\"\"\"\n\n tag = \"YAxis\"\n\n alias = \"RechartsYAxis\"\n\n # The orientation of axis 'left' | 'right'. Default: \"left\"\n orientation: Var[LiteralOrientationLeftRight]\n\n # The id of y-axis which is corresponding to the data. Default: 0\n y_axis_id: Var[str | int]\n\n # Specify the padding of y-axis. Default: {\"top\": 0, \"bottom\": 0}\n padding: Var[dict[str, int]]\n\n\nclass ZAxis(Recharts):\n \"\"\"A ZAxis component in Recharts.\"\"\"\n\n tag = \"ZAxis\"\n\n alias = \"RechartsZAxis\"\n\n # The key of data displayed in the axis.\n data_key: Var[str | int]\n\n # The unique id of z-axis. Default: 0\n z_axis_id: Var[str | int]\n\n # The range of axis. Default: [60, 400]\n range: Var[Sequence[int]] = LiteralVar.create([60, 400])\n\n # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.\n unit: Var[str | int]\n\n # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.\n name: Var[str | int]\n\n # If 'auto' set, the scale function is decided by the type of chart, and the props type. Default: \"auto\"\n scale: Var[LiteralScale]\n\n\nclass Brush(Recharts):\n \"\"\"A Brush component in Recharts.\"\"\"\n\n tag = \"Brush\"\n\n alias = \"RechartsBrush\"\n\n # Stroke color. Default: rx.color(\"gray\", 9)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"gray\", 9))\n\n # The fill color of brush. Default: rx.color(\"gray\", 2)\n fill: Var[str | Color] = LiteralVar.create(Color(\"gray\", 2))\n\n # The key of data displayed in the axis.\n data_key: Var[str | int]\n\n # The x-coordinate of brush. Default: 0\n x: Var[int]\n\n # The y-coordinate of brush. Default: 0\n y: Var[int]\n\n # The width of brush. Default: 0\n width: Var[int]\n\n # The height of brush. Default: 40\n height: Var[int]\n\n # The original data of a LineChart, a BarChart or an AreaChart.\n data: Var[Sequence[Any]]\n\n # The width of each traveller. Default: 5\n traveller_width: Var[int]\n\n # The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time. Default: 1\n gap: Var[int]\n\n # The default start index of brush. If the option is not set, the start index will be 0. Default: 0\n start_index: Var[int]\n\n # The default end index of brush. If the option is not set, the end index will be calculated by the length of data.\n end_index: Var[int]\n\n @classmethod\n def get_event_triggers(cls) -> dict[str, Var | Any]:\n \"\"\"Get the event triggers that pass the component's value to the handler.\n\n Returns:\n A dict mapping the event trigger to the var that is passed to the handler.\n \"\"\"\n return {\n EventTriggers.ON_CHANGE: no_args_event_spec,\n }\n\n\nclass Cartesian(Recharts):\n \"\"\"A base class for cartesian charts in Recharts.\"\"\"\n\n # The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'\n layout: Var[LiteralLayout]\n\n # The key of a group of data which should be unique in an area chart.\n data_key: Var[str | int]\n\n # The id of x-axis which is corresponding to the data. Default: 0\n x_axis_id: Var[str | int]\n\n # The id of y-axis which is corresponding to the data. Default: 0\n y_axis_id: Var[str | int]\n\n # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none' optional\n legend_type: Var[LiteralLegendType]\n\n # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. Default: False\n label: Var[bool | dict[str, Any]]\n\n # If set false, animation of bar will be disabled. Default: True\n is_animation_active: Var[bool]\n\n # Specifies when the animation should begin, the unit of this option is ms. Default: 0\n animation_begin: Var[int]\n\n # Specifies the duration of animation, the unit of this option is ms. Default: 1500\n animation_duration: Var[int]\n\n # The type of easing function. Default: \"ease\"\n animation_easing: Var[LiteralAnimationEasing]\n\n # The unit of data. This option will be used in tooltip.\n unit: Var[str | int]\n\n # The name of data. This option will be used in tooltip and legend to represent the component. If no value was set to this option, the value of dataKey will be used alternatively.\n name: Var[str | int]\n\n # The customized event handler of animation start\n on_animation_start: EventHandler[no_args_event_spec]\n\n # The customized event handler of animation end\n on_animation_end: EventHandler[no_args_event_spec]\n\n # The customized event handler of click on the component in this group\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousedown on the component in this group\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the component in this group\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the component in this group\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseover on the component in this group\n on_mouse_over: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the component in this group\n on_mouse_out: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the component in this group\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the component in this group\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n\nclass Area(Cartesian):\n \"\"\"An Area component in Recharts.\"\"\"\n\n tag = \"Area\"\n\n alias = \"RechartsArea\"\n\n # The color of the line stroke. Default: rx.color(\"accent\", 9)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"accent\", 9))\n\n # The width of the line stroke. Default: 1\n stroke_width: Var[str | int | float]\n\n # The color of the area fill. Default: rx.color(\"accent\", 5)\n fill: Var[str | Color] = LiteralVar.create(Color(\"accent\", 5))\n\n # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'. Default: \"monotone\"\n type_: Var[LiteralCurveType] = LiteralVar.create(\"monotone\")\n\n # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. Default: False\n dot: Var[ACTIVE_DOT_TYPE]\n\n # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {stroke: rx.color(\"accent\", 2), fill: rx.color(\"accent\", 10)}\n active_dot: Var[ACTIVE_DOT_TYPE] = LiteralVar.create({\n \"stroke\": Color(\"accent\", 2),\n \"fill\": Color(\"accent\", 10),\n })\n\n # The value which can describle the line, usually calculated internally.\n base_line: Var[int | Sequence[dict[str, Any]]]\n\n # The coordinates of all the points in the area, usually calculated internally.\n points: Var[Sequence[dict[str, Any]]]\n\n # The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order.\n stack_id: Var[str | int]\n\n # Whether to connect a graph area across null points. Default: False\n connect_nulls: Var[bool]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"LabelList\"]\n\n\nclass Bar(Cartesian):\n \"\"\"A Bar component in Recharts.\"\"\"\n\n tag = \"Bar\"\n\n alias = \"RechartsBar\"\n\n # The color of the line stroke.\n stroke: Var[str | Color]\n\n # The width of the line stroke.\n stroke_width: Var[str | int | float]\n\n # The width of the line stroke. Default: Color(\"accent\", 9)\n fill: Var[str | Color] = LiteralVar.create(Color(\"accent\", 9))\n\n # If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. Default: False\n background: Var[bool]\n\n # The stack id of bar, when two bars have the same value axis and same stack_id, then the two bars are stacked in order.\n stack_id: Var[str]\n\n # The unit of data. This option will be used in tooltip.\n unit: Var[str | int]\n\n # The minimal height of a bar in a horizontal BarChart, or the minimal width of a bar in a vertical BarChart. By default, 0 values are not shown. To visualize a 0 (or close to zero) point, set the minimal point size to a pixel value like 3. In stacked bar charts, minPointSize might not be respected for tightly packed values. So we strongly recommend not using this prop in stacked BarCharts.\n min_point_size: Var[int]\n\n # The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.\n name: Var[str | int]\n\n # Size of the bar (if one bar_size is set then a bar_size must be set for all bars)\n bar_size: Var[int]\n\n # Max size of the bar\n max_bar_size: Var[int]\n\n # If set a value, the option is the radius of all the rounded corners. If set a array, the option are in turn the radiuses of top-left corner, top-right corner, bottom-right corner, bottom-left corner. Default: 0\n radius: Var[int | Sequence[int]]\n\n # The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object.\n # active_bar: Var[Union[bool, dict[str, Any]]] #noqa: ERA001\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"Cell\", \"LabelList\", \"ErrorBar\"]\n\n\nclass Line(Cartesian):\n \"\"\"A Line component in Recharts.\"\"\"\n\n tag = \"Line\"\n\n alias = \"RechartsLine\"\n\n # The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.\n type_: Var[LiteralCurveType]\n\n # The color of the line stroke. Default: rx.color(\"accent\", 9)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"accent\", 9))\n\n # The width of the line stroke. Default: 1\n stroke_width: Var[str | int | float]\n\n # The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {\"stroke\": rx.color(\"accent\", 10), \"fill\": rx.color(\"accent\", 4)}\n dot: Var[ACTIVE_DOT_TYPE] = LiteralVar.create({\n \"stroke\": Color(\"accent\", 10),\n \"fill\": Color(\"accent\", 4),\n })\n\n # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {\"stroke\": rx.color(\"accent\", 2), \"fill\": rx.color(\"accent\", 10)}\n active_dot: Var[ACTIVE_DOT_TYPE] = LiteralVar.create({\n \"stroke\": Color(\"accent\", 2),\n \"fill\": Color(\"accent\", 10),\n })\n\n # Hides the line when true, useful when toggling visibility state via legend. Default: False\n hide: Var[bool]\n\n # Whether to connect a graph line across null points.\n connect_nulls: Var[bool]\n\n # The unit of data. This option will be used in tooltip.\n unit: Var[str | int]\n\n # The coordinates of all the points in the line, usually calculated internally.\n points: Var[Sequence[dict[str, Any]]]\n\n # The pattern of dashes and gaps used to paint the line.\n stroke_dasharray: Var[str]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"LabelList\", \"ErrorBar\"]\n\n\nclass Scatter(Recharts):\n \"\"\"A Scatter component in Recharts.\"\"\"\n\n tag = \"Scatter\"\n\n alias = \"RechartsScatter\"\n\n # The source data, in which each element is an object.\n data: Var[Sequence[dict[str, Any]]]\n\n # The name of the data. It is used to represent the scatter in legend.\n name: Var[str]\n\n # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'. Default: \"circle\"\n legend_type: Var[LiteralLegendType]\n\n # The id of x-axis which is corresponding to the data. Default: 0\n x_axis_id: Var[str | int]\n\n # The id of y-axis which is corresponding to the data. Default: 0\n y_axis_id: Var[str | int]\n\n # The id of z-axis which is corresponding to the data. Default: 0\n z_axis_id: Var[str | int]\n\n # If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. Default: False\n line: Var[bool]\n\n # If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'. Default: \"circle\"\n shape: Var[LiteralShape]\n\n # If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'. Default: \"joint\"\n line_type: Var[LiteralLineType]\n\n # The fill color of the scatter. Default: rx.color(\"accent\", 9)\n fill: Var[str | Color] = LiteralVar.create(Color(\"accent\", 9))\n\n # Valid children components.\n _valid_children: ClassVar[list[str]] = [\"LabelList\", \"ErrorBar\"]\n\n # If set false, animation of bar will be disabled. Default: True in CSR, False in SSR\n is_animation_active: Var[bool]\n\n # Specifies when the animation should begin, the unit of this option is ms. Default: 0\n animation_begin: Var[int]\n\n # Specifies the duration of animation, the unit of this option is ms. Default: 1500\n animation_duration: Var[int]\n\n # The type of easing function. Default: \"ease\"\n animation_easing: Var[LiteralAnimationEasing]\n\n # The customized event handler of click on the component in this group\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousedown on the component in this group\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the component in this group\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the component in this group\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseover on the component in this group\n on_mouse_over: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the component in this group\n on_mouse_out: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the component in this group\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the component in this group\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n\nclass Funnel(Recharts):\n \"\"\"A Funnel component in Recharts.\"\"\"\n\n tag = \"Funnel\"\n\n alias = \"RechartsFunnel\"\n\n # The source data, in which each element is an object.\n data: Var[Sequence[dict[str, Any]]]\n\n # The key or getter of a group of data which should be unique in a FunnelChart.\n data_key: Var[str | int]\n\n # The key of each sector's name. Default: \"name\"\n name_key: Var[str]\n\n # The type of icon in legend. If set to 'none', no legend item will be rendered. Default: \"line\"\n legend_type: Var[LiteralLegendType]\n\n # If set false, animation of line will be disabled. Default: True\n is_animation_active: Var[bool]\n\n # Specifies when the animation should begin, the unit of this option is ms. Default: 0\n animation_begin: Var[int]\n\n # Specifies the duration of animation, the unit of this option is ms. Default: 1500\n animation_duration: Var[int]\n\n # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default \"ease\"\n animation_easing: Var[LiteralAnimationEasing]\n\n # Stroke color. Default: rx.color(\"gray\", 3)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"gray\", 3))\n\n # The coordinates of all the trapezoids in the funnel, usually calculated internally.\n trapezoids: Var[Sequence[dict[str, Any]]]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"LabelList\", \"Cell\"]\n\n # The customized event handler of animation start\n on_animation_start: EventHandler[no_args_event_spec]\n\n # The customized event handler of animation end\n on_animation_end: EventHandler[no_args_event_spec]\n\n # The customized event handler of click on the component in this group\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousedown on the component in this group\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the component in this group\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the component in this group\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseover on the component in this group\n on_mouse_over: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the component in this group\n on_mouse_out: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the component in this group\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the component in this group\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n\nclass ErrorBar(Recharts):\n \"\"\"An ErrorBar component in Recharts.\"\"\"\n\n tag = \"ErrorBar\"\n\n alias = \"RechartsErrorBar\"\n\n # Only used for ScatterChart with error bars in two directions. Only accepts a value of \"x\" or \"y\" and makes the error bars lie in that direction.\n direction: Var[LiteralDirection]\n\n # The key of a group of data which should be unique in an area chart.\n data_key: Var[str | int]\n\n # The width of the error bar ends. Default: 5\n width: Var[int]\n\n # The stroke color of error bar. Default: rx.color(\"gray\", 8)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"gray\", 8))\n\n # The stroke width of error bar. Default: 1.5\n stroke_width: Var[str | int | float]\n\n\nclass Reference(Recharts):\n \"\"\"A base class for reference components in Reference.\"\"\"\n\n # The id of x-axis which is corresponding to the data. Default: 0\n x_axis_id: Var[str | int]\n\n # The id of y-axis which is corresponding to the data. Default: 0\n y_axis_id: Var[str | int]\n\n # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: \"discard\"\n if_overflow: Var[LiteralIfOverflow]\n\n # If set a string or a number, default label will be drawn, and the option is content.\n label: Var[str | int]\n\n\nclass Segment(TypedDict):\n \"\"\"A segment in a ReferenceLine or ReferenceArea.\"\"\"\n\n x: str | int\n y: str | int\n\n\nclass ReferenceLine(Reference):\n \"\"\"A ReferenceLine component in Recharts.\"\"\"\n\n tag = \"ReferenceLine\"\n\n alias = \"RechartsReferenceLine\"\n\n # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.\n x: Var[str | int]\n\n # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.\n y: Var[str | int]\n\n # The color of the reference line.\n stroke: Var[str | Color]\n\n # The width of the stroke. Default: 1\n stroke_width: Var[str | int | float]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"Label\"]\n\n # Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine.\n segment: Var[Sequence[Segment]]\n\n\nclass ReferenceDot(Reference):\n \"\"\"A ReferenceDot component in Recharts.\"\"\"\n\n tag = \"ReferenceDot\"\n\n alias = \"RechartsReferenceDot\"\n\n # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.\n x: Var[str | int]\n\n # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.\n y: Var[str | int]\n\n # The radius of dot.\n r: Var[int]\n\n # The color of the area fill.\n fill: Var[str | Color]\n\n # The color of the line stroke.\n stroke: Var[str | Color]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"Label\"]\n\n # The customized event handler of click on the component in this chart\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousedown on the component in this chart\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the component in this chart\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseover on the component in this chart\n on_mouse_over: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the component in this chart\n on_mouse_out: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the component in this chart\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the component in this chart\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the component in this chart\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n\nclass ReferenceArea(Recharts):\n \"\"\"A ReferenceArea component in Recharts.\"\"\"\n\n tag = \"ReferenceArea\"\n\n alias = \"RechartsReferenceArea\"\n\n # Stroke color\n stroke: Var[str | Color]\n\n # Fill color\n fill: Var[str | Color]\n\n # The opacity of area.\n fill_opacity: Var[float]\n\n # The id of x-axis which is corresponding to the data.\n x_axis_id: Var[str | int]\n\n # The id of y-axis which is corresponding to the data.\n y_axis_id: Var[str | int]\n\n # A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.\n x1: Var[str | int]\n\n # A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.\n x2: Var[str | int]\n\n # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.\n y1: Var[str | int]\n\n # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.\n y2: Var[str | int]\n\n # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: \"discard\"\n if_overflow: Var[LiteralIfOverflow]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"Label\"]\n\n\nclass Grid(Recharts):\n \"\"\"A base class for grid components in Recharts.\"\"\"\n\n # The x-coordinate of grid. Default: 0\n x: Var[int]\n\n # The y-coordinate of grid. Default: 0\n y: Var[int]\n\n # The width of grid. Default: 0\n width: Var[int]\n\n # The height of grid. Default: 0\n height: Var[int]\n\n\nclass CartesianGrid(Grid):\n \"\"\"A CartesianGrid component in Recharts.\"\"\"\n\n tag = \"CartesianGrid\"\n\n alias = \"RechartsCartesianGrid\"\n\n # The horizontal line configuration. Default: True\n horizontal: Var[bool]\n\n # The vertical line configuration. Default: True\n vertical: Var[bool]\n\n # The x-coordinates in pixel values of all vertical lines. Default: []\n vertical_points: Var[Sequence[str | int]]\n\n # The x-coordinates in pixel values of all vertical lines. Default: []\n horizontal_points: Var[Sequence[str | int]]\n\n # The background of grid.\n fill: Var[str | Color]\n\n # The opacity of the background used to fill the space between grid lines.\n fill_opacity: Var[float]\n\n # The pattern of dashes and gaps used to paint the lines of the grid.\n stroke_dasharray: Var[str]\n\n # the stroke color of grid. Default: rx.color(\"gray\", 7)\n stroke: Var[str | Color] = LiteralVar.create(Color(\"gray\", 7))\n\n\nclass CartesianAxis(Grid):\n \"\"\"A CartesianAxis component in Recharts.\"\"\"\n\n tag = \"CartesianAxis\"\n\n alias = \"RechartsCartesianAxis\"\n\n # The orientation of axis 'top' | 'bottom' | 'left' | 'right'. Default: \"bottom\"\n orientation: Var[LiteralOrientationTopBottomLeftRight]\n\n # The box of viewing area. Default: {\"x\": 0, \"y\": 0, \"width\": 0, \"height\": 0}\n view_box: Var[dict[str, Any]]\n\n # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line. Default: True\n axis_line: Var[bool | dict]\n\n # If set false, no ticks will be drawn.\n tick: Var[bool | dict]\n\n # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines. Default: True\n tick_line: Var[bool]\n\n # The length of tick line. Default: 6\n tick_size: Var[int]\n\n # If set 0, all the ticks will be shown. If set preserveStart\", \"preserveEnd\" or \"preserveStartEnd\", the ticks which is to be shown or hidden will be calculated automatically. Default: \"preserveEnd\"\n interval: Var[LiteralInterval]\n\n # If set a string or a number, default label will be drawn, and the option is content.\n label: Var[str | int]\n\n # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside. Default: False\n mirror: Var[bool]\n\n # The margin between tick line and tick.\n tick_margin: Var[int]\n\n\narea = Area.create\nbar = Bar.create\nline = Line.create\nscatter = Scatter.create\nx_axis = XAxis.create\ny_axis = YAxis.create\nz_axis = ZAxis.create\nbrush = Brush.create\ncartesian_axis = CartesianAxis.create\ncartesian_grid = CartesianGrid.create\nreference_line = ReferenceLine.create\nreference_dot = ReferenceDot.create\nreference_area = ReferenceArea.create\nerror_bar = ErrorBar.create\nfunnel = Funnel.create\n" }, { "path": "reflex/components/recharts/charts.py", "content": "\"\"\"A module that defines the chart components in Recharts.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any, ClassVar\n\nfrom reflex.components.component import Component\nfrom reflex.components.recharts.general import ResponsiveContainer\nfrom reflex.constants import EventTriggers\nfrom reflex.constants.colors import Color\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.vars.base import Var\n\nfrom .recharts import (\n LiteralAnimationEasing,\n LiteralComposedChartBaseValue,\n LiteralLayout,\n LiteralStackOffset,\n LiteralSyncMethod,\n RechartsCharts,\n)\n\n\nclass ChartBase(RechartsCharts):\n \"\"\"A component that wraps a Recharts charts.\"\"\"\n\n # The width of chart container. String or Integer\n width: Var[str | int] = Var.create(\"100%\")\n\n # The height of chart container.\n height: Var[str | int] = Var.create(\"100%\")\n\n # The customized event handler of click on the component in this chart\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the component in this chart\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the component in this chart\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the component in this chart\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n @staticmethod\n def _ensure_valid_dimension(name: str, value: Any) -> None:\n \"\"\"Ensure that the value is an int type or str percentage.\n\n Unfortunately str Vars cannot be checked and are implicitly not allowed.\n\n Args:\n name: The name of the prop.\n value: The value to check.\n\n Raises:\n ValueError: If the value is not an int type or str percentage.\n \"\"\"\n if value is None:\n return\n if isinstance(value, int):\n return\n if isinstance(value, str) and value.endswith(\"%\"):\n return\n if isinstance(value, Var) and issubclass(value._var_type, int):\n return\n msg = (\n f\"Chart {name} must be specified as int pixels or percentage, not {value!r}. \"\n \"CSS unit dimensions are allowed on parent container.\"\n )\n raise ValueError(msg)\n\n @classmethod\n def create(cls, *children: Any, **props: Any) -> Component:\n \"\"\"Create a chart component.\n\n Args:\n *children: The children of the chart component.\n **props: The properties of the chart component.\n\n Returns:\n The chart component wrapped in a responsive container.\n \"\"\"\n width = props.pop(\"width\", None)\n height = props.pop(\"height\", None)\n cls._ensure_valid_dimension(\"width\", width)\n cls._ensure_valid_dimension(\"height\", height)\n\n # Ensure that the min_height and min_width are set to prevent the chart from collapsing.\n # We are using small values so that height and width can still be used over min_height and min_width.\n # Without this, sometimes the chart will not be visible. Causing confusion to the user.\n # With this, the user will see a small chart and can adjust the height and width and can figure out that the issue is with the size.\n min_height = props.pop(\"min_height\", 10)\n min_width = props.pop(\"min_width\", 10)\n\n return ResponsiveContainer.create(\n super().create(*children, **props),\n width=width if width is not None else \"100%\",\n height=height if height is not None else \"100%\",\n min_width=min_width,\n min_height=min_height,\n )\n\n\nclass CategoricalChartBase(ChartBase):\n \"\"\"A component that wraps a Categorical Recharts charts.\"\"\"\n\n # The source data, in which each element is an object.\n data: Var[Sequence[dict[str, Any]]]\n\n # The sizes of whitespace around the chart, i.e. {\"top\": 50, \"right\": 30, \"left\": 20, \"bottom\": 5}.\n margin: Var[dict[str, Any]]\n\n # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.\n sync_id: Var[str]\n\n # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: \"index\"\n sync_method: Var[LiteralSyncMethod]\n\n # The layout of area in the chart. 'horizontal' | 'vertical'. Default: \"horizontal\"\n layout: Var[LiteralLayout]\n\n # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'\n stack_offset: Var[LiteralStackOffset]\n\n\nclass AreaChart(CategoricalChartBase):\n \"\"\"An Area chart component in Recharts.\"\"\"\n\n tag = \"AreaChart\"\n\n alias = \"RechartsAreaChart\"\n\n # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. Default: \"auto\"\n base_value: Var[int | LiteralComposedChartBaseValue]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"XAxis\",\n \"YAxis\",\n \"ReferenceArea\",\n \"ReferenceDot\",\n \"ReferenceLine\",\n \"Brush\",\n \"CartesianGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Area\",\n \"Defs\",\n ]\n\n\nclass BarChart(CategoricalChartBase):\n \"\"\"A Bar chart component in Recharts.\"\"\"\n\n tag = \"BarChart\"\n\n alias = \"RechartsBarChart\"\n\n # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: \"10%\"\n bar_category_gap: Var[str | int]\n\n # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. Default: 4\n bar_gap: Var[str | int]\n\n # The width of all the bars in the chart. Number\n bar_size: Var[int]\n\n # The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.\n max_bar_size: Var[int]\n\n # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. Default: \"none\"\n stack_offset: Var[LiteralStackOffset]\n\n # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.) Default: False\n reverse_stack_order: Var[bool]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"XAxis\",\n \"YAxis\",\n \"ReferenceArea\",\n \"ReferenceDot\",\n \"ReferenceLine\",\n \"Brush\",\n \"CartesianGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Bar\",\n ]\n\n\nclass LineChart(CategoricalChartBase):\n \"\"\"A Line chart component in Recharts.\"\"\"\n\n tag = \"LineChart\"\n\n alias = \"RechartsLineChart\"\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"XAxis\",\n \"YAxis\",\n \"ReferenceArea\",\n \"ReferenceDot\",\n \"ReferenceLine\",\n \"Brush\",\n \"CartesianGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Line\",\n ]\n\n\nclass ComposedChart(CategoricalChartBase):\n \"\"\"A Composed chart component in Recharts.\"\"\"\n\n tag = \"ComposedChart\"\n\n alias = \"RechartsComposedChart\"\n\n # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. Default: \"auto\"\n base_value: Var[int | LiteralComposedChartBaseValue]\n\n # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: \"10%\"\n bar_category_gap: Var[str | int]\n\n # The gap between two bars in the same category. Default: 4\n bar_gap: Var[int]\n\n # The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.\n bar_size: Var[int]\n\n # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position). Default: False\n reverse_stack_order: Var[bool]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"XAxis\",\n \"YAxis\",\n \"ReferenceArea\",\n \"ReferenceDot\",\n \"ReferenceLine\",\n \"Brush\",\n \"CartesianGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Area\",\n \"Line\",\n \"Bar\",\n ]\n\n\nclass PieChart(ChartBase):\n \"\"\"A Pie chart component in Recharts.\"\"\"\n\n tag = \"PieChart\"\n\n alias = \"RechartsPieChart\"\n\n # The sizes of whitespace around the chart, i.e. {\"top\": 50, \"right\": 30, \"left\": 20, \"bottom\": 5}.\n margin: Var[dict[str, Any]]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"PolarAngleAxis\",\n \"PolarRadiusAxis\",\n \"PolarGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Pie\",\n ]\n\n # The customized event handler of mousedown on the sectors in this group\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the sectors in this group\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseover on the sectors in this group\n on_mouse_over: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the sectors in this group\n on_mouse_out: EventHandler[no_args_event_spec]\n\n\nclass RadarChart(ChartBase):\n \"\"\"A Radar chart component in Recharts.\"\"\"\n\n tag = \"RadarChart\"\n\n alias = \"RechartsRadarChart\"\n\n # The source data, in which each element is an object.\n data: Var[Sequence[dict[str, Any]]]\n\n # The sizes of whitespace around the chart, i.e. {\"top\": 50, \"right\": 30, \"left\": 20, \"bottom\": 5}. Default: {\"top\": 0, \"right\": 0, \"left\": 0, \"bottom\": 0}\n margin: Var[dict[str, Any]]\n\n # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. Default: \"50%\"\n cx: Var[int | str]\n\n # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. Default: \"50%\"\n cy: Var[int | str]\n\n # The angle of first radial direction line. Default: 90\n start_angle: Var[int]\n\n # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. Default: -270\n end_angle: Var[int]\n\n # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: 0\n inner_radius: Var[int | str]\n\n # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: \"80%\"\n outer_radius: Var[int | str]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"PolarAngleAxis\",\n \"PolarRadiusAxis\",\n \"PolarGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Radar\",\n ]\n\n @classmethod\n def get_event_triggers(cls) -> dict[str, Var | Any]:\n \"\"\"Get the event triggers that pass the component's value to the handler.\n\n Returns:\n A dict mapping the event trigger to the var that is passed to the handler.\n \"\"\"\n return {\n EventTriggers.ON_CLICK: no_args_event_spec,\n EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,\n EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,\n }\n\n\nclass RadialBarChart(ChartBase):\n \"\"\"A RadialBar chart component in Recharts.\"\"\"\n\n tag = \"RadialBarChart\"\n\n alias = \"RechartsRadialBarChart\"\n\n # The source data which each element is an object.\n data: Var[Sequence[dict[str, Any]]]\n\n # The sizes of whitespace around the chart. Default: {\"top\": 5, \"right\": 5, \"left\": 5 \"bottom\": 5}\n margin: Var[dict[str, Any]]\n\n # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. Default: \"50%\"\n cx: Var[int | str]\n\n # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. Default: \"50%\"\n cy: Var[int | str]\n\n # The angle of first radial direction line. Default: 0\n start_angle: Var[int]\n\n # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. Default: 360\n end_angle: Var[int]\n\n # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: \"30%\"\n inner_radius: Var[int | str]\n\n # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: \"100%\"\n outer_radius: Var[int | str]\n\n # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: \"10%\"\n bar_category_gap: Var[int | str]\n\n # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. Default: 4\n bar_gap: Var[str]\n\n # The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.\n bar_size: Var[int]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"PolarAngleAxis\",\n \"PolarRadiusAxis\",\n \"PolarGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"RadialBar\",\n ]\n\n\nclass ScatterChart(ChartBase):\n \"\"\"A Scatter chart component in Recharts.\"\"\"\n\n tag = \"ScatterChart\"\n\n alias = \"RechartsScatterChart\"\n\n # The sizes of whitespace around the chart. Default: {\"top\": 5, \"right\": 5, \"bottom\": 5, \"left\": 5}\n margin: Var[dict[str, Any]]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"XAxis\",\n \"YAxis\",\n \"ZAxis\",\n \"ReferenceArea\",\n \"ReferenceDot\",\n \"ReferenceLine\",\n \"Brush\",\n \"CartesianGrid\",\n \"Legend\",\n \"GraphingTooltip\",\n \"Scatter\",\n ]\n\n @classmethod\n def get_event_triggers(cls) -> dict[str, Var | Any]:\n \"\"\"Get the event triggers that pass the component's value to the handler.\n\n Returns:\n A dict mapping the event trigger to the var that is passed to the handler.\n \"\"\"\n return {\n EventTriggers.ON_CLICK: no_args_event_spec,\n EventTriggers.ON_MOUSE_DOWN: no_args_event_spec,\n EventTriggers.ON_MOUSE_UP: no_args_event_spec,\n EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,\n EventTriggers.ON_MOUSE_OVER: no_args_event_spec,\n EventTriggers.ON_MOUSE_OUT: no_args_event_spec,\n EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,\n EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,\n }\n\n\nclass FunnelChart(ChartBase):\n \"\"\"A Funnel chart component in Recharts.\"\"\"\n\n tag = \"FunnelChart\"\n\n alias = \"RechartsFunnelChart\"\n\n # The layout of bars in the chart. Default: \"centric\"\n layout: Var[str]\n\n # The sizes of whitespace around the chart. Default: {\"top\": 5, \"right\": 5, \"bottom\": 5, \"left\": 5}\n margin: Var[dict[str, Any]]\n\n # The stroke color of each bar. String | Object\n stroke: Var[str | Color]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\"Legend\", \"GraphingTooltip\", \"Funnel\"]\n\n\nclass Treemap(RechartsCharts):\n \"\"\"A Treemap chart component in Recharts.\"\"\"\n\n tag = \"Treemap\"\n\n alias = \"RechartsTreemap\"\n\n # The width of chart container. String or Integer. Default: \"100%\"\n width: Var[str | int] = Var.create(\"100%\")\n\n # The height of chart container. String or Integer. Default: \"100%\"\n height: Var[str | int] = Var.create(\"100%\")\n\n # data of treemap. Array\n data: Var[Sequence[dict[str, Any]]]\n\n # The key of a group of data which should be unique in a treemap. String | Number. Default: \"value\"\n data_key: Var[str | int]\n\n # The key of each sector's name. String. Default: \"name\"\n name_key: Var[str]\n\n # The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number\n aspect_ratio: Var[int]\n\n # If set false, animation of area will be disabled. Default: True\n is_animation_active: Var[bool]\n\n # Specifies when the animation should begin, the unit of this option is ms. Default: 0\n animation_begin: Var[int]\n\n # Specifies the duration of animation, the unit of this option is ms. Default: 1500\n animation_duration: Var[int]\n\n # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default: \"ease\"\n animation_easing: Var[LiteralAnimationEasing]\n\n # The customized event handler of animation start\n on_animation_start: EventHandler[no_args_event_spec]\n\n # The customized event handler of animation end\n on_animation_end: EventHandler[no_args_event_spec]\n\n @classmethod\n def create(cls, *children, **props) -> Component:\n \"\"\"Create a chart component.\n\n Args:\n *children: The children of the chart component.\n **props: The properties of the chart component.\n\n Returns:\n The Treemap component wrapped in a responsive container.\n \"\"\"\n return ResponsiveContainer.create(\n super().create(*children, **props),\n width=props.pop(\"width\", \"100%\"),\n height=props.pop(\"height\", \"100%\"),\n )\n\n\narea_chart = AreaChart.create\nbar_chart = BarChart.create\nline_chart = LineChart.create\ncomposed_chart = ComposedChart.create\npie_chart = PieChart.create\nradar_chart = RadarChart.create\nradial_bar_chart = RadialBarChart.create\nscatter_chart = ScatterChart.create\nfunnel_chart = FunnelChart.create\ntreemap = Treemap.create\n" }, { "path": "reflex/components/recharts/general.py", "content": "\"\"\"General components for Recharts.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typing import Any, ClassVar\n\nfrom reflex.components.component import MemoizationLeaf\nfrom reflex.constants.colors import Color\nfrom reflex.event import EventHandler, no_args_event_spec\nfrom reflex.vars.base import LiteralVar, Var\n\nfrom .recharts import (\n LiteralAnimationEasing,\n LiteralIconType,\n LiteralLayout,\n LiteralLegendAlign,\n LiteralPosition,\n LiteralVerticalAlign,\n Recharts,\n)\n\n\nclass ResponsiveContainer(Recharts, MemoizationLeaf):\n \"\"\"A base class for responsive containers in Recharts.\"\"\"\n\n tag = \"ResponsiveContainer\"\n\n alias = \"RechartsResponsiveContainer\"\n\n # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number\n aspect: Var[int]\n\n # The width of chart container. Can be a number or string. Default: \"100%\"\n width: Var[int | str]\n\n # The height of chart container. Can be a number or string. Default: \"100%\"\n height: Var[int | str]\n\n # The minimum width of chart container. Number or string.\n min_width: Var[int | str]\n\n # The minimum height of chart container. Number or string.\n min_height: Var[int | str]\n\n # If specified a positive number, debounced function will be used to handle the resize event. Default: 0\n debounce: Var[int]\n\n # If specified provides a callback providing the updated chart width and height values.\n on_resize: EventHandler[no_args_event_spec]\n\n # Valid children components\n _valid_children: ClassVar[list[str]] = [\n \"AreaChart\",\n \"BarChart\",\n \"LineChart\",\n \"PieChart\",\n \"RadarChart\",\n \"RadialBarChart\",\n \"ResponsiveContainer\",\n \"ScatterChart\",\n \"Treemap\",\n \"ComposedChart\",\n \"FunnelChart\",\n ]\n\n\nclass Legend(Recharts):\n \"\"\"A Legend component in Recharts.\"\"\"\n\n tag = \"Legend\"\n\n alias = \"RechartsLegend\"\n\n # The width of legend container. Number\n width: Var[int]\n\n # The height of legend container. Number\n height: Var[int]\n\n # The layout of legend items. 'horizontal' | 'vertical'. Default: \"horizontal\"\n layout: Var[LiteralLayout]\n\n # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'. Default: \"center\"\n align: Var[LiteralLegendAlign]\n\n # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'. Default: \"bottom\"\n vertical_align: Var[LiteralVerticalAlign]\n\n # The size of icon in each legend item. Default: 14\n icon_size: Var[int]\n\n # The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'\n icon_type: Var[LiteralIconType]\n\n # The source data of the content to be displayed in the legend, usually calculated internally. Default: []\n payload: Var[Sequence[dict[str, Any]]]\n\n # The width of chart container, usually calculated internally.\n chart_width: Var[int]\n\n # The height of chart container, usually calculated internally.\n chart_height: Var[int]\n\n # The margin of chart container, usually calculated internally.\n margin: Var[dict[str, Any]]\n\n # The customized event handler of click on the items in this group\n on_click: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousedown on the items in this group\n on_mouse_down: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseup on the items in this group\n on_mouse_up: EventHandler[no_args_event_spec]\n\n # The customized event handler of mousemove on the items in this group\n on_mouse_move: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseover on the items in this group\n on_mouse_over: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseout on the items in this group\n on_mouse_out: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseenter on the items in this group\n on_mouse_enter: EventHandler[no_args_event_spec]\n\n # The customized event handler of mouseleave on the items in this group\n on_mouse_leave: EventHandler[no_args_event_spec]\n\n\nclass GraphingTooltip(Recharts):\n \"\"\"A Tooltip component in Recharts.\"\"\"\n\n tag = \"Tooltip\"\n\n alias = \"RechartsTooltip\"\n\n # The separator between name and value. Default: \":\"\n separator: Var[str]\n\n # The offset size of tooltip. Number. Default: 10\n offset: Var[int]\n\n # When an item of the payload has value null or undefined, this item won't be displayed. Default: True\n filter_null: Var[bool]\n\n # If set false, no cursor will be drawn when tooltip is active. Default: {\"strokeWidth\": 1, \"fill\": rx.color(\"gray\", 3)}\n cursor: Var[dict[str, Any] | bool] = LiteralVar.create({\n \"strokeWidth\": 1,\n \"fill\": Color(\"gray\", 3),\n })\n\n # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.\n view_box: Var[dict[str, Any]]\n\n # The style of default tooltip content item which is a li element. Default: {\"color\": rx.color(\"gray\", 12)}\n item_style: Var[dict[str, Any]] = LiteralVar.create({\n \"color\": Color(\"gray\", 12),\n })\n\n # The style of tooltip wrapper which is a dom element. Default: {}\n wrapper_style: Var[dict[str, Any]]\n\n # The style of tooltip content which is a dom element. Default: {\"background\": rx.color(\"gray\", 1), \"borderColor\": rx.color(\"gray\", 4), \"borderRadius\": \"8px\"}\n content_style: Var[dict[str, Any]] = LiteralVar.create({\n \"background\": Color(\"gray\", 1),\n \"borderColor\": Color(\"gray\", 4),\n \"borderRadius\": \"8px\",\n })\n\n # The style of default tooltip label which is a p element. Default: {\"color\": rx.color(\"gray\", 11)}\n label_style: Var[dict[str, Any]] = LiteralVar.create({\"color\": Color(\"gray\", 11)})\n\n # This option allows the tooltip to extend beyond the viewBox of the chart itself. Default: {\"x\": False, \"y\": False}\n allow_escape_view_box: Var[dict[str, bool]]\n\n # If set true, the tooltip is displayed. If set false, the tooltip is hidden, usually calculated internally. Default: False\n active: Var[bool]\n\n # If this field is set, the tooltip position will be fixed and will not move anymore.\n position: Var[dict[str, Any]]\n\n # The coordinate of tooltip which is usually calculated internally. Default: {\"x\": 0, \"y\": 0}\n coordinate: Var[dict[str, Any]]\n\n # If set false, animation of tooltip will be disabled. Default: True\n is_animation_active: Var[bool]\n\n # Specifies the duration of animation, the unit of this option is ms. Default: 1500\n animation_duration: Var[int]\n\n # The type of easing function. Default: \"ease\"\n animation_easing: Var[LiteralAnimationEasing]\n\n\nclass Label(Recharts):\n \"\"\"A Label component in Recharts.\"\"\"\n\n tag = \"Label\"\n\n alias = \"RechartsLabel\"\n\n # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.\n view_box: Var[dict[str, Any]]\n\n # The value of label, which can be specified by this props or the children of