diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 9e9f76d..bdf884a 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -2,7 +2,7 @@ fail_fast: true repos: - repo: https://github.com/astral-sh/ruff-pre-commit - rev: v0.14.13 + rev: v0.15.5 hooks: - id: ruff-check files: ^reflex_ui/ @@ -11,7 +11,7 @@ repos: files: ^reflex_ui/ - repo: https://github.com/codespell-project/codespell - rev: v2.4.1 + rev: v2.4.2 hooks: - id: codespell files: ^reflex_ui/ diff --git a/demo/assets/css/globals.css b/demo/assets/css/globals.css index 3072a18..e8af01f 100644 --- a/demo/assets/css/globals.css +++ b/demo/assets/css/globals.css @@ -1104,6 +1104,14 @@ 0px -24px 12px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)), 0px -8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)), 0px -2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)); + --shadow-button-bordered: + 0 0 0 1px var(--primary-9) inset, + 0 2px 0 0 rgba(255, 255, 255, 0.22) inset; + --shadow-button-outline: + 0 -1px 0 0 light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) inset, + 0 0 0 1px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) inset, + 0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0)), + 0 1px 4px 0 light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0)); /* Radius */ --radius-ui-xxs: calc(var(--radius) - 0.25rem); --radius-ui-xs: calc(var(--radius) - 0.125rem); diff --git a/reflex_ui/blocks/demo_form.py b/reflex_ui/blocks/demo_form.py index ff672ab..0ba204d 100644 --- a/reflex_ui/blocks/demo_form.py +++ b/reflex_ui/blocks/demo_form.py @@ -11,7 +11,6 @@ from reflex.vars.base import get_unique_variable_name import reflex_ui as ui -from reflex_ui.components.base.button import BUTTON_VARIANTS, DEFAULT_CLASS_NAME demo_form_error_message = ClientStateVar.create("demo_form_error_message", "") demo_form_open_cs = ClientStateVar.create("demo_form_open", False) @@ -226,9 +225,7 @@ def select_field( required=required, class_name=ui.cn( "w-full appearance-none pr-9", - DEFAULT_CLASS_NAME, - BUTTON_VARIANTS["variant"]["outline"], - BUTTON_VARIANTS["size"]["md"], + ui.button.class_names.for_button("outline", "md"), "outline-primary-6 focus:border-primary-6", ), ), diff --git a/reflex_ui/blocks/intro_form.py b/reflex_ui/blocks/intro_form.py index 23dd980..4f7e251 100644 --- a/reflex_ui/blocks/intro_form.py +++ b/reflex_ui/blocks/intro_form.py @@ -11,7 +11,6 @@ from reflex.vars.base import get_unique_variable_name import reflex_ui as ui -from reflex_ui.components.base.button import BUTTON_VARIANTS, DEFAULT_CLASS_NAME intro_form_error_message = ClientStateVar.create("intro_form_error_message", "") intro_form_open_cs = ClientStateVar.create("intro_form_open", False) @@ -227,9 +226,7 @@ def select_field( required=required, class_name=ui.cn( "w-full appearance-none pr-9", - DEFAULT_CLASS_NAME, - BUTTON_VARIANTS["variant"]["outline"], - BUTTON_VARIANTS["size"]["md"], + ui.button.class_names.for_button("outline", "md"), "outline-primary-6 focus:border-primary-6", ), ), diff --git a/reflex_ui/components/base/button.py b/reflex_ui/components/base/button.py index c053f6d..c092b49 100644 --- a/reflex_ui/components/base/button.py +++ b/reflex_ui/components/base/button.py @@ -2,6 +2,7 @@ from typing import Literal +from reflex.components.component import ComponentNamespace from reflex.components.core.cond import cond from reflex.components.el import Button as BaseButton from reflex.vars.base import Var @@ -10,7 +11,15 @@ from reflex_ui.components.icons.others import spinner LiteralButtonVariant = Literal[ - "primary", "destructive", "outline", "secondary", "ghost", "link", "dark" + "primary", + "primary-bordered", + "destructive", + "outline", + "outline-shadow", + "secondary", + "ghost", + "link", + "dark", ] LiteralButtonSize = Literal[ "xs", "sm", "md", "lg", "xl", "icon-xs", "icon-sm", "icon-md", "icon-lg", "icon-xl" @@ -21,8 +30,10 @@ BUTTON_VARIANTS = { "variant": { "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10", + "primary-bordered": "bg-primary-9 text-primary-contrast hover:bg-primary-10 shadow-button-bordered disabled:shadow-none", "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast", "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12", + "outline-shadow": "dark:border dark:border-secondary-a4 bg-white dark:bg-secondary-1 hover:bg-secondary-3 text-secondary-12 shadow-button-outline disabled:shadow-none", "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5", "ghost": "hover:bg-secondary-3 text-secondary-11", "link": "text-secondary-12 underline-offset-4 hover:underline", @@ -43,6 +54,18 @@ } +class ClassNames: + """Class names for button components.""" + + DEFAULT = DEFAULT_CLASS_NAME + VARIANTS = BUTTON_VARIANTS + + @staticmethod + def for_button(variant: str = "primary", size: str = "md") -> str: + """Return combined class string for the given variant and size.""" + return f"{ClassNames.DEFAULT} {ClassNames.VARIANTS['variant'][variant]} {ClassNames.VARIANTS['size'][size]}" + + class Button(BaseButton, CoreComponent): """A custom button component.""" @@ -109,4 +132,12 @@ def _exclude_props(self) -> list[str]: ] -button = Button.create +class ButtonNamespace(ComponentNamespace): + """Namespace for Button components.""" + + create = staticmethod(Button.create) + class_names = ClassNames + __call__ = staticmethod(Button.create) + + +button = ButtonNamespace() diff --git a/reflex_ui/components/base/button.pyi b/reflex_ui/components/base/button.pyi index 822dc55..b8cd041 100644 --- a/reflex_ui/components/base/button.pyi +++ b/reflex_ui/components/base/button.pyi @@ -6,6 +6,7 @@ from collections.abc import Mapping, Sequence from typing import Any, Literal +from reflex.components.component import ComponentNamespace from reflex.components.core.breakpoints import Breakpoints from reflex.components.el import Button as BaseButton from reflex.event import EventType, PointerEventInfo @@ -14,7 +15,15 @@ from reflex.vars.base import Var from reflex_ui.components.component import CoreComponent LiteralButtonVariant = Literal[ - "primary", "destructive", "outline", "secondary", "ghost", "link", "dark" + "primary", + "primary-bordered", + "destructive", + "outline", + "outline-shadow", + "secondary", + "ghost", + "link", + "dark", ] LiteralButtonSize = Literal[ "xs", "sm", "md", "lg", "xl", "icon-xs", "icon-sm", "icon-md", "icon-lg", "icon-xl" @@ -23,8 +32,10 @@ DEFAULT_CLASS_NAME = "inline-flex items-center justify-center whitespace-nowrap BUTTON_VARIANTS = { "variant": { "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10", + "primary-bordered": "bg-primary-9 text-primary-contrast hover:bg-primary-10 shadow-button-bordered disabled:shadow-none", "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast", "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12", + "outline-shadow": "dark:border dark:border-secondary-a4 bg-white dark:bg-secondary-1 hover:bg-secondary-3 text-secondary-12 shadow-button-outline disabled:shadow-none", "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5", "ghost": "hover:bg-secondary-3 text-secondary-11", "link": "text-secondary-12 underline-offset-4 hover:underline", @@ -44,13 +55,28 @@ BUTTON_VARIANTS = { }, } +class ClassNames: + DEFAULT = DEFAULT_CLASS_NAME + VARIANTS = BUTTON_VARIANTS + + @staticmethod + def for_button(variant: str = "primary", size: str = "md") -> str: ... + class Button(BaseButton, CoreComponent): @classmethod def create( cls, *children, variant: Literal[ - "dark", "destructive", "ghost", "link", "outline", "primary", "secondary" + "dark", + "destructive", + "ghost", + "link", + "outline", + "outline-shadow", + "primary", + "primary-bordered", + "secondary", ] | Var[ Literal[ @@ -59,7 +85,9 @@ class Button(BaseButton, CoreComponent): "ghost", "link", "outline", + "outline-shadow", "primary", + "primary-bordered", "secondary", ] ] @@ -320,4 +348,287 @@ class Button(BaseButton, CoreComponent): @staticmethod def validate_size(size: LiteralButtonSize): ... -button = Button.create +class ButtonNamespace(ComponentNamespace): + create = staticmethod(Button.create) + class_names = ClassNames + + @staticmethod + def __call__( + *children, + variant: Literal[ + "dark", + "destructive", + "ghost", + "link", + "outline", + "outline-shadow", + "primary", + "primary-bordered", + "secondary", + ] + | Var[ + Literal[ + "dark", + "destructive", + "ghost", + "link", + "outline", + "outline-shadow", + "primary", + "primary-bordered", + "secondary", + ] + ] + | None = None, + size: Literal[ + "icon-lg", + "icon-md", + "icon-sm", + "icon-xl", + "icon-xs", + "lg", + "md", + "sm", + "xl", + "xs", + ] + | Var[ + Literal[ + "icon-lg", + "icon-md", + "icon-sm", + "icon-xl", + "icon-xs", + "lg", + "md", + "sm", + "xl", + "xs", + ] + ] + | None = None, + loading: Var[bool] | bool | None = None, + auto_focus: Var[bool] | bool | None = None, + disabled: Var[bool] | bool | None = None, + form: Var[str] | str | None = None, + form_action: Var[str] | str | None = None, + form_enc_type: Var[str] | str | None = None, + form_method: Var[str] | str | None = None, + form_no_validate: Var[bool] | bool | None = None, + form_target: Var[str] | str | None = None, + name: Var[str] | str | None = None, + type: Literal["button", "reset", "submit"] + | Var[Literal["button", "reset", "submit"]] + | None = None, + value: Var[float | int | str] | float | int | str | None = None, + access_key: Var[str] | str | None = None, + auto_capitalize: Literal[ + "characters", "none", "off", "on", "sentences", "words" + ] + | Var[Literal["characters", "none", "off", "on", "sentences", "words"]] + | None = None, + content_editable: Literal["inherit", "plaintext-only"] + | Var[Literal["inherit", "plaintext-only"] | bool] + | bool + | None = None, + context_menu: Var[str] | str | None = None, + dir: Var[str] | str | None = None, + draggable: Var[bool] | bool | None = None, + enter_key_hint: Literal[ + "done", "enter", "go", "next", "previous", "search", "send" + ] + | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]] + | None = None, + hidden: Var[bool] | bool | None = None, + input_mode: Literal[ + "decimal", "email", "none", "numeric", "search", "tel", "text", "url" + ] + | Var[ + Literal[ + "decimal", "email", "none", "numeric", "search", "tel", "text", "url" + ] + ] + | None = None, + item_prop: Var[str] | str | None = None, + lang: Var[str] | str | None = None, + role: Literal[ + "alert", + "alertdialog", + "application", + "article", + "banner", + "button", + "cell", + "checkbox", + "columnheader", + "combobox", + "complementary", + "contentinfo", + "definition", + "dialog", + "directory", + "document", + "feed", + "figure", + "form", + "grid", + "gridcell", + "group", + "heading", + "img", + "link", + "list", + "listbox", + "listitem", + "log", + "main", + "marquee", + "math", + "menu", + "menubar", + "menuitem", + "menuitemcheckbox", + "menuitemradio", + "navigation", + "none", + "note", + "option", + "presentation", + "progressbar", + "radio", + "radiogroup", + "region", + "row", + "rowgroup", + "rowheader", + "scrollbar", + "search", + "searchbox", + "separator", + "slider", + "spinbutton", + "status", + "switch", + "tab", + "table", + "tablist", + "tabpanel", + "term", + "textbox", + "timer", + "toolbar", + "tooltip", + "tree", + "treegrid", + "treeitem", + ] + | Var[ + Literal[ + "alert", + "alertdialog", + "application", + "article", + "banner", + "button", + "cell", + "checkbox", + "columnheader", + "combobox", + "complementary", + "contentinfo", + "definition", + "dialog", + "directory", + "document", + "feed", + "figure", + "form", + "grid", + "gridcell", + "group", + "heading", + "img", + "link", + "list", + "listbox", + "listitem", + "log", + "main", + "marquee", + "math", + "menu", + "menubar", + "menuitem", + "menuitemcheckbox", + "menuitemradio", + "navigation", + "none", + "note", + "option", + "presentation", + "progressbar", + "radio", + "radiogroup", + "region", + "row", + "rowgroup", + "rowheader", + "scrollbar", + "search", + "searchbox", + "separator", + "slider", + "spinbutton", + "status", + "switch", + "tab", + "table", + "tablist", + "tabpanel", + "term", + "textbox", + "timer", + "toolbar", + "tooltip", + "tree", + "treegrid", + "treeitem", + ] + ] + | None = None, + slot: Var[str] | str | None = None, + spell_check: Var[bool] | bool | None = None, + tab_index: Var[int] | int | None = None, + title: Var[str] | str | None = None, + unstyled: Var[bool] | bool | None = None, + style: Sequence[Mapping[str, Any]] + | Mapping[str, Any] + | Var[Mapping[str, Any]] + | Breakpoints + | None = None, + key: Any | None = None, + id: Any | None = None, + ref: Var | None = None, + class_name: Any | None = None, + custom_attrs: dict[str, Var | Any] | None = None, + on_blur: EventType[()] | None = None, + on_click: EventType[()] | EventType[PointerEventInfo] | None = None, + on_context_menu: EventType[()] | EventType[PointerEventInfo] | None = None, + on_double_click: EventType[()] | EventType[PointerEventInfo] | None = None, + on_focus: EventType[()] | None = None, + on_mount: EventType[()] | None = None, + on_mouse_down: EventType[()] | None = None, + on_mouse_enter: EventType[()] | None = None, + on_mouse_leave: EventType[()] | None = None, + on_mouse_move: EventType[()] | None = None, + on_mouse_out: EventType[()] | None = None, + on_mouse_over: EventType[()] | None = None, + on_mouse_up: EventType[()] | None = None, + on_scroll: EventType[()] | None = None, + on_scroll_end: EventType[()] | None = None, + on_unmount: EventType[()] | None = None, + **props, + ) -> Button: + """Create the button component.""" + +button = ButtonNamespace() diff --git a/reflex_ui/components/base/context_menu.pyi b/reflex_ui/components/base/context_menu.pyi index 3867e1e..5235c89 100644 --- a/reflex_ui/components/base/context_menu.pyi +++ b/reflex_ui/components/base/context_menu.pyi @@ -590,8 +590,8 @@ class ContextMenuRadioGroup(ContextMenuBaseComponent): on_scroll_end: EventType[()] | None = None, on_unmount: EventType[()] | None = None, on_value_change: EventType[()] - | EventType[str | int] - | EventType[str | int, dict] + | EventType[int | str] + | EventType[int | str, dict] | None = None, **props, ) -> ContextMenuRadioGroup: diff --git a/reflex_ui/components/base/menu.py b/reflex_ui/components/base/menu.py index bb405c3..2db1b5e 100644 --- a/reflex_ui/components/base/menu.py +++ b/reflex_ui/components/base/menu.py @@ -574,7 +574,7 @@ class HighLevelMenu(MenuRoot): # Props for different component parts _item_props = {"close_on_click"} - _trigger_props = {"open_on_hover", "delay", "close_delay"} + _trigger_props = {"open_on_hover", "delay", "close_delay", "trigger_variant"} _positioner_props = { "align", "align_offset", @@ -612,6 +612,7 @@ def create(cls, *children, **props) -> BaseUIComponent: items = props.pop("items", []) size = props.pop("size", "md") trigger_label = props.pop("placeholder", "Open Menu") + trigger_variant = trigger_props.pop("trigger_variant", "outline") def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent: if isinstance(item, tuple): @@ -651,11 +652,10 @@ def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent: MenuTrigger.create( render_=( trigger - if trigger - else button( + or button( trigger_label, select_arrow(class_name="size-4 text-secondary-9"), - variant="outline", + variant=trigger_variant, class_name=ClassNames.TRIGGER, disabled=props.get("disabled", False), size=size, diff --git a/reflex_ui/components/base/menu.pyi b/reflex_ui/components/base/menu.pyi index 1505ce5..26ebab2 100644 --- a/reflex_ui/components/base/menu.pyi +++ b/reflex_ui/components/base/menu.pyi @@ -651,8 +651,8 @@ class MenuRadioGroup(MenuBaseComponent): on_scroll_end: EventType[()] | None = None, on_unmount: EventType[()] | None = None, on_value_change: EventType[()] - | EventType[str | int] - | EventType[str | int, dict] + | EventType[int | str] + | EventType[int | str, dict] | None = None, **props, ) -> MenuRadioGroup: diff --git a/reflex_ui/components/base/select.py b/reflex_ui/components/base/select.py index d67c27f..a216f95 100644 --- a/reflex_ui/components/base/select.py +++ b/reflex_ui/components/base/select.py @@ -8,7 +8,7 @@ from reflex.utils.imports import ImportVar from reflex.vars.base import Var -from reflex_ui.components.base.button import button +from reflex_ui.components.base.button import LiteralButtonVariant, button from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent from reflex_ui.components.icons.hugeicon import hi from reflex_ui.components.icons.others import select_arrow @@ -476,7 +476,7 @@ class HighLevelSelect(SelectRoot): size: Var[LiteralSelectSize] # Props for different component parts - _trigger_props = {"size"} + _trigger_props = {"size", "trigger_variant"} _value_props = {"placeholder"} _items_props = {"items"} _positioner_props = { @@ -516,6 +516,9 @@ def create(cls, *children, **props) -> BaseUIComponent: # Get extracted values with defaults size = trigger_props.get("size", "md") + trigger_variant: LiteralButtonVariant = trigger_props.get( + "trigger_variant", "outline" + ) items = items_props.get("items", []) # Create the items children @@ -570,7 +573,7 @@ def create(cls, *children, **props) -> BaseUIComponent: SelectIcon.create( select_arrow(class_name="size-4 text-secondary-9") ), - variant="outline", + variant=trigger_variant, size=size, type="button", class_name=ClassNames.TRIGGER, diff --git a/reflex_ui/components/base/tabs.py b/reflex_ui/components/base/tabs.py index bece165..150c8c3 100644 --- a/reflex_ui/components/base/tabs.py +++ b/reflex_ui/components/base/tabs.py @@ -17,7 +17,7 @@ class ClassNames: ROOT = "flex flex-col gap-2" LIST = "bg-secondary-3 inline-flex gap-1 p-1 items-center justify-start rounded-ui-md relative z-0" - TAB = "h-7 px-1.5 rounded-ui-sm justify-center items-center gap-1.5 inline-flex text-sm font-medium text-secondary-11 cursor-pointer z-[1] hover:text-secondary-12 transition-color text-nowrap data-[selected]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8" + TAB = "h-7 px-1.5 rounded-ui-sm justify-center items-center gap-1.5 inline-flex text-sm font-medium text-secondary-11 cursor-pointer z-[1] hover:text-secondary-12 transition-color text-nowrap data-[active]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8" INDICATOR = "absolute top-1/2 left-0 -z-1 h-7 w-(--active-tab-width) -translate-y-1/2 translate-x-(--active-tab-left) rounded-ui-sm bg-secondary-1 shadow-small transition-all duration-200 ease-in-out" PANEL = "flex flex-col gap-2" diff --git a/reflex_ui/components/base/tabs.pyi b/reflex_ui/components/base/tabs.pyi index 7651c95..8526933 100644 --- a/reflex_ui/components/base/tabs.pyi +++ b/reflex_ui/components/base/tabs.pyi @@ -18,7 +18,7 @@ LiteralOrientation = Literal["horizontal", "vertical"] class ClassNames: ROOT = "flex flex-col gap-2" LIST = "bg-secondary-3 inline-flex gap-1 p-1 items-center justify-start rounded-ui-md relative z-0" - TAB = "h-7 px-1.5 rounded-ui-sm justify-center items-center gap-1.5 inline-flex text-sm font-medium text-secondary-11 cursor-pointer z-[1] hover:text-secondary-12 transition-color text-nowrap data-[selected]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8" + TAB = "h-7 px-1.5 rounded-ui-sm justify-center items-center gap-1.5 inline-flex text-sm font-medium text-secondary-11 cursor-pointer z-[1] hover:text-secondary-12 transition-color text-nowrap data-[active]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8" INDICATOR = "absolute top-1/2 left-0 -z-1 h-7 w-(--active-tab-width) -translate-y-1/2 translate-x-(--active-tab-left) rounded-ui-sm bg-secondary-1 shadow-small transition-all duration-200 ease-in-out" PANEL = "flex flex-col gap-2" diff --git a/reflex_ui/components/icons/hugeicon.py b/reflex_ui/components/icons/hugeicon.py index a03d516..590f5d2 100644 --- a/reflex_ui/components/icons/hugeicon.py +++ b/reflex_ui/components/icons/hugeicon.py @@ -6,11 +6,14 @@ from reflex_ui.components.component import CoreComponent +REACT_LIBRARY = "@hugeicons/react@1.1.6" +CORE_ICONS_LIBRARY = "@hugeicons/core-free-icons@4.0.0" + class HugeIcon(CoreComponent): - """A HugeIcon component.""" + """A HugeIcon component using HugeiconsIcon from @hugeicons/react.""" - library = "@hugeicons/react@1.1.5" + library = REACT_LIBRARY tag = "HugeiconsIcon" @@ -24,10 +27,25 @@ class HugeIcon(CoreComponent): show_alt: Var[bool] # The size of the icon in pixels - size: Var[int] = Var.create(16) + size: Var[int | str] = Var.create(16) + + # Icon color (CSS color value) + color: Var[str] # The stroke width of the icon - stroke_width: Var[float] = Var.create(2) + stroke_width: Var[float] = Var.create(1.5) + + # When true, stroke width scales relative to icon size + absolute_stroke_width: Var[bool] + + # Primary color for multicolor icons (Bulk, Duotone, Twotone styles) + primary_color: Var[str] + + # Secondary color for multicolor icons (Bulk, Duotone, Twotone styles) + secondary_color: Var[str] + + # Disables the default opacity applied to the secondary color + disable_secondary_opacity: Var[bool] @classmethod def create(cls, *children, **props) -> Component: @@ -50,9 +68,7 @@ def create(cls, *children, **props) -> Component: props[prop] = Var( icon_name, _var_data=VarData( - imports={ - "@hugeicons/core-free-icons@3.1.1": ImportVar(tag=icon_name) - } + imports={CORE_ICONS_LIBRARY: ImportVar(tag=icon_name)} ), ) stroke_width = props.pop("stroke_width", 2) diff --git a/reflex_ui/components/icons/hugeicon.pyi b/reflex_ui/components/icons/hugeicon.pyi index ddd00a5..0fa9430 100644 --- a/reflex_ui/components/icons/hugeicon.pyi +++ b/reflex_ui/components/icons/hugeicon.pyi @@ -12,6 +12,9 @@ from reflex.vars.base import Var from reflex_ui.components.component import CoreComponent +REACT_LIBRARY = "@hugeicons/react@1.1.6" +CORE_ICONS_LIBRARY = "@hugeicons/core-free-icons@4.0.0" + class HugeIcon(CoreComponent): @classmethod def create( @@ -20,8 +23,13 @@ class HugeIcon(CoreComponent): icon: Var[str] | str | None = None, alt_icon: Var[str | None] | str | None = None, show_alt: Var[bool] | bool | None = None, - size: Var[int] | int | None = None, + size: Var[int | str] | int | str | None = None, + color: Var[str] | str | None = None, stroke_width: Var[float] | float | None = None, + absolute_stroke_width: Var[bool] | bool | None = None, + primary_color: Var[str] | str | None = None, + secondary_color: Var[str] | str | None = None, + disable_secondary_opacity: Var[bool] | bool | None = None, unstyled: Var[bool] | bool | None = None, style: Sequence[Mapping[str, Any]] | Mapping[str, Any] @@ -59,7 +67,12 @@ class HugeIcon(CoreComponent): alt_icon: Alternative icon for states/interactions show_alt: Whether to show the alternative icon size: The size of the icon in pixels + color: Icon color (CSS color value) stroke_width: The stroke width of the icon + absolute_stroke_width: When true, stroke width scales relative to icon size + primary_color: Primary color for multicolor icons (Bulk, Duotone, Twotone styles) + secondary_color: Secondary color for multicolor icons (Bulk, Duotone, Twotone styles) + disable_secondary_opacity: Disables the default opacity applied to the secondary color unstyled: Whether the component should be unstyled style: The style of the component. key: A unique key for the component. diff --git a/reflex_ui/components/icons/others.py b/reflex_ui/components/icons/others.py index ce8713e..34177c2 100644 --- a/reflex_ui/components/icons/others.py +++ b/reflex_ui/components/icons/others.py @@ -4,6 +4,7 @@ from reflex.components.el import svg from reflex.vars.base import Var +from reflex_ui.components.icons.hugeicon import hi from reflex_ui.utils.twmerge import cn @@ -46,18 +47,7 @@ def select_arrow_icon( class_name: str | Var[str] = "", ) -> Component: """A select arrow SVG icon.""" - return svg( - svg.path( - d="M4.99902 10.0003L7.99967 13.0003L10.999 10.0003M4.99902 6.00033L7.99967 3.00033L10.999 6.00033", - stroke="currentColor", - stroke_width="1.5", - stroke_linecap="round", - stroke_linejoin="round", - ), - xmlns="http://www.w3.org/2000/svg", - custom_attrs={"viewBox": "0 0 16 16"}, - class_name=cn("size-4 fill-none", class_name), - ) + return hi("ChevronDoubleCloseIcon", class_name=cn("rotate-90", class_name)) select_arrow = select_arrow_icon