yes

src/components/select/component.rs

@@ -1,20 +1,38 @@
 use dioxus::prelude::*;
 use dioxus_primitives::select::{
-    self, SelectGroupLabelProps, SelectGroupProps, SelectListProps, SelectOptionProps, SelectProps,
+    self, SelectGroupLabelProps, SelectGroupProps, SelectListProps, SelectMultiProps,
-    SelectTriggerProps, SelectValueProps,
+    SelectOptionProps, SelectProps, SelectTriggerProps, SelectValueProps,
 };
+use dioxus_primitives::icon;
 
 #[component]
 pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element {
     rsx! {
         select::Select {
-            class: "select",
+            class: "dx-select",
             value: props.value,
             default_value: props.default_value,
             on_value_change: props.on_value_change,
             disabled: props.disabled,
             name: props.name,
-            placeholder: props.placeholder,
+            roving_loop: props.roving_loop,
+            typeahead_timeout: props.typeahead_timeout,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn SelectMulti<T: Clone + PartialEq + 'static>(props: SelectMultiProps<T>) -> Element {
+    rsx! {
+        select::SelectMulti {
+            class: "dx-select",
+            values: props.values,
+            default_values: props.default_values,
+            on_values_change: props.on_values_change,
+            disabled: props.disabled,
+            name: props.name,
             roving_loop: props.roving_loop,
             typeahead_timeout: props.typeahead_timeout,
             attributes: props.attributes,
@@ -26,12 +44,13 @@ pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element
 #[component]
 pub fn SelectTrigger(props: SelectTriggerProps) -> Element {
     rsx! {
-        select::SelectTrigger { attributes: props.attributes,
+        select::SelectTrigger { class: "dx-select-trigger", attributes: props.attributes,
             {props.children}
-            svg {
+            icon::Icon {
-                class: "select-expand-icon",
+                class: "dx-select-expand-icon",
-                view_box: "0 0 24 24",
+                width: "20px",
-                xmlns: "http://www.w3.org/2000/svg",
+                height: "20px",
+                stroke: "var(--primary-color-7)",
                 polyline { points: "6 9 12 15 18 9" }
             }
         }
@@ -41,7 +60,10 @@ pub fn SelectTrigger(props: SelectTriggerProps) -> Element {
 #[component]
 pub fn SelectValue(props: SelectValueProps) -> Element {
     rsx! {
-        select::SelectValue { attributes: props.attributes }
+        select::SelectValue {
+            placeholder: props.placeholder,
+            attributes: props.attributes,
+        }
     }
 }
 
@@ -49,7 +71,7 @@ pub fn SelectValue(props: SelectValueProps) -> Element {
 pub fn SelectList(props: SelectListProps) -> Element {
     rsx! {
         select::SelectList {
-            class: "select-list",
+            class: "dx-select-list",
             id: props.id,
             attributes: props.attributes,
             {props.children}
@@ -61,7 +83,7 @@ pub fn SelectList(props: SelectListProps) -> Element {
 pub fn SelectGroup(props: SelectGroupProps) -> Element {
     rsx! {
         select::SelectGroup {
-            class: "select-group",
+            class: "dx-select-group",
             disabled: props.disabled,
             id: props.id,
             attributes: props.attributes,
@@ -74,7 +96,7 @@ pub fn SelectGroup(props: SelectGroupProps) -> Element {
 pub fn SelectGroupLabel(props: SelectGroupLabelProps) -> Element {
     rsx! {
         select::SelectGroupLabel {
-            class: "select-group-label",
+            class: "dx-select-group-label",
             id: props.id,
             attributes: props.attributes,
             {props.children}
@@ -86,7 +108,7 @@ pub fn SelectGroupLabel(props: SelectGroupLabelProps) -> Element {
 pub fn SelectOption<T: Clone + PartialEq + 'static>(props: SelectOptionProps<T>) -> Element {
     rsx! {
         select::SelectOption::<T> {
-            class: "select-option",
+            class: "dx-select-option",
             value: props.value,
             text_value: props.text_value,
             disabled: props.disabled,
@@ -104,10 +126,11 @@ pub fn SelectOption<T: Clone + PartialEq + 'static>(props: SelectOptionProps<T>)
 pub fn SelectItemIndicator() -> Element {
     rsx! {
         select::SelectItemIndicator {
-            svg {
+            icon::Icon {
-                class: "select-check-icon",
+                class: "dx-select-check-icon",
-                view_box: "0 0 24 24",
+                width: "1rem",
-                xmlns: "http://www.w3.org/2000/svg",
+                height: "1rem",
+                stroke: "var(--secondary-color-5)",
                 path { d: "M5 13l4 4L19 7" }
             }
         }

src/landing.rs

@@ -149,11 +149,14 @@ fn LandingPlaceholder() -> Element {
                             "Duration (H:M:S.MS)"
                         }
                         th { class: "uppercase bold whitespace-nowrap py-2 px-3",
-                            Select::<Option<TestStatus>> { placeholder: "STATUS",
+                            Select::<Option<TestStatus>> {
                                 SelectTrigger {
                                     class: "select-trigger mx-auto w-fit !bg-transparent !shadow-none !text-gray-400 cursor-pointer uppercase",
                                     aria_label: "Select Trigger",
-                                    SelectValue { class: "!bg-transparent !shadow-none !text-gray-400" }
+                                    SelectValue {
+                                        class: "!bg-transparent !shadow-none !text-gray-400",
+                                        placeholder: "STATUS",
+                                    }
                                 }
                                 SelectList { aria_label: "Select status",
                                     SelectGroup {
@@ -445,12 +448,14 @@ pub fn Landing() -> Element {
                         }
                         th { class: "uppercase bold whitespace-nowrap py-2 px-3",
                             Select::<Option<TestStatus>> {
-                                placeholder: "STATUS",
                                 on_value_change: move |value: Option<Option<TestStatus>>| filter.set(value.unwrap_or(None)),
                                 SelectTrigger {
                                     class: "select-trigger mx-auto w-fit !bg-transparent !shadow-none !text-gray-400 cursor-pointer uppercase",
                                     aria_label: "Select Trigger",
-                                    SelectValue { class: "!bg-transparent !shadow-none !text-gray-400" }
+                                    SelectValue {
+                                        class: "!bg-transparent !shadow-none !text-gray-400",
+                                        placeholder: "STATUS",
+                                    }
                                 }
                                 SelectList { aria_label: "Select status",
                                     SelectGroup {