diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 168cef6..073e558 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -1,14 +1,14 @@ fail_fast: true repos: - - repo: https://github.com/charliermarsh/ruff-pre-commit - rev: v0.11.9 + - repo: https://github.com/astral-sh/ruff-pre-commit + rev: v0.12.2 hooks: - - id: ruff-format - files: ^reflex_ui/ - - id: ruff + - id: ruff-check files: ^reflex_ui/ args: ["--fix", "--exit-non-zero-on-fix", "--no-unsafe-fixes"] + - id: ruff-format + files: ^reflex_ui/ - repo: https://github.com/codespell-project/codespell rev: v2.4.1 @@ -17,7 +17,7 @@ repos: files: ^reflex_ui/ - repo: https://github.com/RobertCraigie/pyright-python - rev: v1.1.402 + rev: v1.1.403 hooks: - id: pyright files: ^reflex_ui/ diff --git a/pyproject.toml b/pyproject.toml index 3d797d2..2015023 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -20,7 +20,7 @@ bump = true metadata = false [dependency-groups] -dev = ["pyright==1.1.402", "pre-commit"] +dev = ["pyright==1.1.403", "pre-commit"] [tool.codespell] skip = "*.pyi, uv.lock" diff --git a/reflex_ui/__init__.py b/reflex_ui/__init__.py index 6f756c5..7d6d222 100644 --- a/reflex_ui/__init__.py +++ b/reflex_ui/__init__.py @@ -19,6 +19,7 @@ "components.base.switch": ["switch"], "components.base.tabs": ["tabs"], "components.base.theme_switcher": ["theme_switcher"], + "components.base.toggle_group": ["toggle_group"], "components.base.toggle": ["toggle"], "components.base.tooltip": ["tooltip"], } diff --git a/reflex_ui/components/base/toggle_group.py b/reflex_ui/components/base/toggle_group.py new file mode 100644 index 0000000..093fe9b --- /dev/null +++ b/reflex_ui/components/base/toggle_group.py @@ -0,0 +1,69 @@ +"""Custom toggle group component.""" + +from typing import Literal + +from reflex.components.component import Component +from reflex.event import EventHandler, passthrough_event_spec +from reflex.utils.imports import ImportVar +from reflex.vars import Var + +from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent + +LiteralOrientation = Literal["horizontal", "vertical"] + + +class ClassNames: + """Class names for toggle group components.""" + + ROOT = "inline-flex items-center gap-1 p-1 rounded-md bg-secondary-3 data-[orientation=vertical]:flex-col data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed" + + +class ToggleGroupBaseComponent(BaseUIComponent): + """Base component for toggle group components.""" + + library = f"{PACKAGE_NAME}/toggle-group" + + @property + def import_var(self): + """Return the import variable for the toggle group component.""" + return ImportVar(tag="ToggleGroup", package_path="", install=False) + + +class ToggleGroupRoot(ToggleGroupBaseComponent): + """Provides a shared state to a series of toggle buttons.""" + + tag = "ToggleGroup" + + # The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of value. + default_value: Var[list[str | int]] + + # The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of default_value. + value: Var[list[str | int]] + + # Callback fired when the pressed states of the toggle group changes. + on_value_change: EventHandler[passthrough_event_spec(list[str | int], dict)] + + # When false only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When true multiple items can be pressed. Defaults to False. + toggle_multiple: Var[bool] + + # Whether the toggle group should ignore user interaction. Defaults to False. + disabled: Var[bool] + + # Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True. + loop: Var[bool] + + # The component orientation (layout flow direction). Defaults to "horizontal". + orientation: Var[LiteralOrientation] + + # The render prop + render_: Var[Component] + + @classmethod + def create(cls, *children, **props) -> Component: + """Create the toggle group root component.""" + props["data-slot"] = "toggle-group" + cls.set_class_name(ClassNames.ROOT, props) + return super().create(*children, **props) + + +toggle_group = ToggleGroupRoot.create diff --git a/uv.lock b/uv.lock index 723df7d..e44dd00 100644 --- a/uv.lock +++ b/uv.lock @@ -429,15 +429,15 @@ wheels = [ [[package]] name = "pyright" -version = "1.1.402" +version = "1.1.403" source = { registry = "https://pypi.org/simple" } dependencies = [ { name = "nodeenv" }, { name = "typing-extensions" }, ] -sdist = { url = "https://files.pythonhosted.org/packages/aa/04/ce0c132d00e20f2d2fb3b3e7c125264ca8b909e693841210534b1ea1752f/pyright-1.1.402.tar.gz", hash = "sha256:85a33c2d40cd4439c66aa946fd4ce71ab2f3f5b8c22ce36a623f59ac22937683", size = 3888207, upload-time = "2025-06-11T08:48:35.759Z" } +sdist = { url = "https://files.pythonhosted.org/packages/fe/f6/35f885264ff08c960b23d1542038d8da86971c5d8c955cfab195a4f672d7/pyright-1.1.403.tar.gz", hash = "sha256:3ab69b9f41c67fb5bbb4d7a36243256f0d549ed3608678d381d5f51863921104", size = 3913526, upload-time = "2025-07-09T07:15:52.882Z" } wheels = [ - { url = "https://files.pythonhosted.org/packages/fe/37/1a1c62d955e82adae588be8e374c7f77b165b6cb4203f7d581269959abbc/pyright-1.1.402-py3-none-any.whl", hash = "sha256:2c721f11869baac1884e846232800fe021c33f1b4acb3929cff321f7ea4e2982", size = 5624004, upload-time = "2025-06-11T08:48:33.998Z" }, + { url = "https://files.pythonhosted.org/packages/49/b6/b04e5c2f41a5ccad74a1a4759da41adb20b4bc9d59a5e08d29ba60084d07/pyright-1.1.403-py3-none-any.whl", hash = "sha256:c0eeca5aa76cbef3fcc271259bbd785753c7ad7bcac99a9162b4c4c7daed23b3", size = 5684504, upload-time = "2025-07-09T07:15:50.958Z" }, ] [[package]] @@ -567,7 +567,7 @@ requires-dist = [{ name = "reflex", specifier = ">=0.8.1" }] [package.metadata.requires-dev] dev = [ { name = "pre-commit" }, - { name = "pyright", specifier = "==1.1.402" }, + { name = "pyright", specifier = "==1.1.403" }, ] [[package]]