dyn calling works + vibed dioxus ui components + some mo provision prototyping

parts/mize.ui/dioxus-components/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "dioxus-components"
+version = "0.1.0"
+edition = "2021"
+description = "Styled Dioxus UI components (mize palette)"
+license = "MIT OR Apache-2.0"
+
+[dependencies]
+dioxus = { version = "0.7", default-features = false }
+dioxus-primitives = { git = "https://github.com/DioxusLabs/components", default-features = false }
+dioxus-code = { version = "0.1.0", default-features = false, features = ["macro", "lang-css"] }
+dioxus-icons = "0.1.0"
+
+[features]
+default = []
+web = ["dioxus/web", "dioxus-primitives/web"]
+desktop = ["dioxus/desktop"]

parts/mize.ui/dioxus-components/PLAN.md

@@ -0,0 +1,7 @@
+# dioxus-components MVP plan (approved)
+
+Library of styled Dioxus components copied from upstream preview, restyled with the mize palette (light + dark).
+
+- MVP: button, input, textarea, label, checkbox, switch, dialog, separator, avatar, badge, card, scroll_area
+- dioxus-primitives via git (DioxusLabs/components) — crates.io is a stub
+- Plain Rust lib; consumers include theme.css and set `html[data-theme]`

parts/mize.ui/dioxus-components/assets/theme.css

@@ -0,0 +1,44 @@
+/* mize UI theme — include once; toggle via html[data-theme="light"|"dark"] */
+
+html[data-theme="dark"] {
+  --dark: initial;
+  --light: ;
+}
+
+html[data-theme="light"] {
+  --dark: ;
+  --light: initial;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --dark: initial;
+    --light: ;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    --dark: ;
+    --light: initial;
+  }
+}
+
+:root {
+  --bg: var(--dark, #171d18) var(--light, #f7f8f4);
+  --surface: var(--dark, #242d25) var(--light, #ffffff);
+  --surface-2: var(--dark, #2c362d) var(--light, #eff2ea);
+  --text: var(--dark, #f2f4ea) var(--light, #20251c);
+  --text-2: var(--dark, #aab5a4) var(--light, #66705e);
+  --border: var(--dark, #3a463a) var(--light, #dfe4d9);
+  --accent: var(--dark, #d7e47d) var(--light, #fec251);
+  --accent-text: var(--dark, #d7e47d) var(--light, #79500f);
+  --success: var(--dark, #b9d987) var(--light, #526f32);
+  --info: var(--dark, #b9e4eb) var(--light, #376777);
+  --warning: var(--dark, #ffd77f) var(--light, #a66b13);
+  --danger: var(--dark, #ff9b8e) var(--light, #b94d42);
+
+  /* On-accent fill text: dark ink on light accent, dark surface on dark accent */
+  --on-accent: var(--dark, #171d18) var(--light, #79500f);
+  --focus-ring: var(--accent);
+}

parts/mize.ui/dioxus-components/src/components/avatar/component.rs

@@ -0,0 +1,206 @@
+use dioxus::prelude::*;
+use dioxus_primitives::dioxus_attributes::attributes;
+use dioxus_primitives::avatar::{self, AvatarState};
+use dioxus_primitives::merge_attributes;
+
+#[css_module("/src/components/avatar/style.css")]
+struct Styles;
+
+#[derive(Clone, Copy, PartialEq, Default)]
+pub enum AvatarImageSize {
+    #[default]
+    Small,
+    Medium,
+    Large,
+}
+
+impl AvatarImageSize {
+    fn to_class(self) -> &'static str {
+        match self {
+            AvatarImageSize::Small => Styles::dx_avatar_sm.inner,
+            AvatarImageSize::Medium => Styles::dx_avatar_md.inner,
+            AvatarImageSize::Large => Styles::dx_avatar_lg.inner,
+        }
+    }
+}
+
+#[derive(Clone, Copy, PartialEq, Default)]
+pub enum AvatarShape {
+    #[default]
+    Circle,
+    Rounded,
+}
+
+impl AvatarShape {
+    fn to_class(self) -> &'static str {
+        match self {
+            AvatarShape::Circle => Styles::dx_avatar_circle.inner,
+            AvatarShape::Rounded => Styles::dx_avatar_rounded.inner,
+        }
+    }
+}
+
+/// The props for the [`Avatar`] root component.
+#[derive(Props, Clone, PartialEq)]
+pub struct AvatarProps {
+    /// Callback when image loads successfully.
+    #[props(default)]
+    pub on_load: Option<EventHandler<()>>,
+
+    /// Callback when image fails to load.
+    #[props(default)]
+    pub on_error: Option<EventHandler<()>>,
+
+    /// Callback when the avatar state changes.
+    #[props(default)]
+    pub on_state_change: Option<EventHandler<AvatarState>>,
+
+    #[props(default)]
+    pub size: AvatarImageSize,
+
+    #[props(default)]
+    pub shape: AvatarShape,
+
+    /// Additional attributes for the avatar element.
+    #[props(extends = GlobalAttributes)]
+    pub attributes: Vec<Attribute>,
+
+    /// The fallback content shown while the image is loading or if it fails to load.
+    pub children: Element,
+}
+
+#[component]
+pub fn Avatar(props: AvatarProps) -> Element {
+    let class = format!(
+        "{} {} {}",
+        Styles::dx_avatar,
+        props.size.to_class(),
+        props.shape.to_class()
+    );
+    let base = attributes!(span {
+        class
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        avatar::Avatar {
+            on_load: props.on_load,
+            on_error: props.on_error,
+            on_state_change: props.on_state_change,
+            attributes: merged,
+            {props.children}
+        }
+    }
+}
+
+#[derive(Props, Clone, PartialEq)]
+pub struct AvatarImageProps {
+    #[props(default)]
+    pub id: ReadSignal<Option<String>>,
+
+    pub src: String,
+
+    #[props(default)]
+    pub alt: String,
+
+    #[props(extends = GlobalAttributes)]
+    pub attributes: Vec<Attribute>,
+}
+
+#[component]
+pub fn AvatarImage(props: AvatarImageProps) -> Element {
+    let base = attributes!(img {
+        class: Styles::dx_avatar_image,
+        draggable: "false",
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        avatar::AvatarImage {
+            id: props.id,
+            src: props.src,
+            alt: props.alt,
+            attributes: merged,
+        }
+    }
+}
+
+#[derive(Props, Clone, PartialEq)]
+pub struct AvatarFallbackProps {
+    #[props(extends = GlobalAttributes)]
+    pub attributes: Vec<Attribute>,
+
+    pub children: Element,
+}
+
+#[component]
+pub fn AvatarFallback(props: AvatarFallbackProps) -> Element {
+    let base = attributes!(span {
+        class: Styles::dx_avatar_fallback,
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        avatar::AvatarFallback {
+            attributes: merged,
+            {props.children}
+        }
+    }
+}
+
+/// The props for the [`ImageAvatar`] convenience component.
+#[derive(Props, Clone, PartialEq)]
+pub struct ImageAvatarProps {
+    /// The image source URL.
+    pub src: String,
+
+    /// The image alt text.
+    #[props(default)]
+    pub alt: String,
+
+    /// Callback when image loads successfully.
+    #[props(default)]
+    pub on_load: Option<EventHandler<()>>,
+
+    /// Callback when image fails to load.
+    #[props(default)]
+    pub on_error: Option<EventHandler<()>>,
+
+    /// Callback when the avatar state changes.
+    #[props(default)]
+    pub on_state_change: Option<EventHandler<AvatarState>>,
+
+    #[props(default)]
+    pub size: AvatarImageSize,
+
+    #[props(default)]
+    pub shape: AvatarShape,
+
+    /// Additional attributes for the avatar element.
+    #[props(extends = GlobalAttributes)]
+    pub attributes: Vec<Attribute>,
+
+    /// The fallback content shown while the image is loading or if it fails to load.
+    pub children: Element,
+}
+
+#[component]
+pub fn ImageAvatar(props: ImageAvatarProps) -> Element {
+    rsx! {
+        Avatar {
+            on_load: props.on_load,
+            on_error: props.on_error,
+            on_state_change: props.on_state_change,
+            size: props.size,
+            shape: props.shape,
+            attributes: props.attributes,
+            AvatarImage {
+                src: props.src,
+                alt: props.alt,
+            }
+            AvatarFallback {
+                {props.children}
+            }
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/avatar/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/avatar/style.css

@@ -0,0 +1,84 @@
+.dx-avatar {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.dx-avatar-image {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.dx-avatar-sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.875rem;
+}
+
+.dx-avatar-md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1rem;
+}
+
+.dx-avatar-lg {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1.5rem;
+}
+
+.dx-avatar-circle {
+  border-radius: 50%;
+}
+
+.dx-avatar-rounded {
+  border-radius: 0.375rem;
+}
+
+.dx-avatar[data-state="loading"] {
+  animation: dx-pulse 1.5s infinite ease-in-out;
+  background: var(--surface-2);
+}
+
+.dx-avatar[data-state="empty"] {
+  background: var(--surface-2);
+}
+
+@keyframes dx-pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.dx-avatar-fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-size: inherit;
+}
+
+.dx-avatar[data-state="error"] .dx-avatar-fallback {
+  background: var(--surface-2);
+  color: var(--text-2);
+}

parts/mize.ui/dioxus-components/src/components/badge/component.rs

@@ -0,0 +1,74 @@
+use dioxus::prelude::*;
+use dioxus_icons::lucide::BadgeCheck;
+
+#[css_module("/src/components/badge/style.css")]
+struct Styles;
+
+#[derive(Copy, Clone, PartialEq, Default)]
+#[non_exhaustive]
+pub enum BadgeVariant {
+    #[default]
+    Primary,
+    Secondary,
+    Destructive,
+    Outline,
+}
+
+impl BadgeVariant {
+    pub fn class(&self) -> &'static str {
+        match self {
+            BadgeVariant::Primary => "primary",
+            BadgeVariant::Secondary => "secondary",
+            BadgeVariant::Destructive => "destructive",
+            BadgeVariant::Outline => "outline",
+        }
+    }
+}
+
+/// The props for the [`Badge`] component.
+#[derive(Props, Clone, PartialEq)]
+pub struct BadgeProps {
+    #[props(default)]
+    pub variant: BadgeVariant,
+
+    /// Additional attributes to extend the badge element
+    #[props(extends = GlobalAttributes)]
+    pub attributes: Vec<Attribute>,
+
+    /// The children of the badge element
+    pub children: Element,
+}
+
+#[component]
+pub fn Badge(props: BadgeProps) -> Element {
+    rsx! {
+        BadgeElement {
+            "padding": true,
+            variant: props.variant,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+fn BadgeElement(props: BadgeProps) -> Element {
+    rsx! {
+        span {
+            class: Styles::dx_badge,
+            "data-style": props.variant.class(),
+            ..props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn VerifiedIcon() -> Element {
+    rsx! {
+        BadgeCheck {
+            size: "12px",
+            stroke: "var(--text)",
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/badge/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/badge/style.css

@@ -0,0 +1,37 @@
+.dx-badge {
+  display: inline-flex;
+  min-width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+  gap: 4px;
+  line-height: 1;
+}
+
+.dx-badge[padding="true"] {
+  padding: 0 8px;
+}
+
+.dx-badge[data-style="primary"] {
+  background-color: var(--accent);
+  color: var(--on-accent);
+}
+
+.dx-badge[data-style="secondary"] {
+  background-color: var(--surface-2);
+  color: var(--text);
+}
+
+.dx-badge[data-style="outline"] {
+  border: 1px solid var(--border);
+  background-color: var(--surface);
+  color: var(--text-2);
+}
+
+.dx-badge[data-style="destructive"] {
+  background-color: var(--danger);
+  color: var(--dark, #171d18) var(--light, #ffffff);
+}

parts/mize.ui/dioxus-components/src/components/button/component.rs

@@ -0,0 +1,108 @@
+use dioxus::prelude::*;
+use dioxus_primitives::dioxus_attributes::attributes;
+use dioxus_primitives::merge_attributes;
+
+#[css_module("/src/components/button/style.css")]
+struct Styles;
+
+#[derive(Copy, Clone, PartialEq, Default)]
+#[non_exhaustive]
+pub enum ButtonVariant {
+    #[default]
+    Primary,
+    Secondary,
+    Destructive,
+    Outline,
+    Ghost,
+    Link,
+}
+
+impl ButtonVariant {
+    pub fn class(&self) -> &'static str {
+        match self {
+            ButtonVariant::Primary => "primary",
+            ButtonVariant::Secondary => "secondary",
+            ButtonVariant::Destructive => "destructive",
+            ButtonVariant::Outline => "outline",
+            ButtonVariant::Ghost => "ghost",
+            ButtonVariant::Link => "link",
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq, Default)]
+#[non_exhaustive]
+pub enum ButtonSize {
+    Xs,
+    Sm,
+    #[default]
+    Default,
+    Lg,
+    Icon,
+    IconXs,
+    IconSm,
+    IconLg,
+}
+
+impl ButtonSize {
+    pub fn class(&self) -> &'static str {
+        match self {
+            ButtonSize::Xs => "xs",
+            ButtonSize::Sm => "sm",
+            ButtonSize::Default => "default",
+            ButtonSize::Lg => "lg",
+            ButtonSize::Icon => "icon",
+            ButtonSize::IconXs => "icon-xs",
+            ButtonSize::IconSm => "icon-sm",
+            ButtonSize::IconLg => "icon-lg",
+        }
+    }
+}
+
+#[component]
+pub fn Button(
+    #[props(default)] variant: ButtonVariant,
+    #[props(default)] size: ButtonSize,
+    #[props(extends=GlobalAttributes)]
+    #[props(extends=button)]
+    attributes: Vec<Attribute>,
+    onclick: Option<EventHandler<MouseEvent>>,
+    onmousedown: Option<EventHandler<MouseEvent>>,
+    onmouseup: Option<EventHandler<MouseEvent>>,
+    onkeydown: Option<EventHandler<KeyboardEvent>>,
+    children: Element,
+) -> Element {
+    let base = attributes!(button {
+        class: Styles::dx_button,
+        "data-style": variant.class(),
+        "data-size": size.class(),
+    });
+    let merged = merge_attributes(vec![base, attributes]);
+
+    rsx! {
+        button {
+            onclick: move |event| {
+                if let Some(f) = &onclick {
+                    f.call(event);
+                }
+            },
+            onmousedown: move |event| {
+                if let Some(f) = &onmousedown {
+                    f.call(event);
+                }
+            },
+            onmouseup: move |event| {
+                if let Some(f) = &onmouseup {
+                    f.call(event);
+                }
+            },
+            onkeydown: move |event| {
+                if let Some(f) = &onkeydown {
+                    f.call(event);
+                }
+            },
+            ..merged,
+            {children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/button/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/button/style.css

@@ -0,0 +1,195 @@
+.dx-button {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  gap: 0.5rem;
+  line-height: 1.25rem;
+  outline: none;
+  transition-duration: 150ms;
+  transition-property: background-color, color, box-shadow, border-color, opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+.dx-button svg {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.dx-button svg:not([class*="size-"]) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dx-button[data-size="xs"] {
+  height: 1.5rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  gap: 0.25rem;
+  line-height: 1rem;
+}
+
+.dx-button[data-size="xs"]:has(> svg) {
+  padding-inline: 0.375rem;
+}
+
+.dx-button[data-size="xs"] svg:not([class*="size-"]) {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.dx-button[data-size="sm"] {
+  height: 1.875rem;
+  padding: 0 0.625rem;
+  gap: 0.375rem;
+}
+
+.dx-button[data-size="sm"]:has(> svg) {
+  padding-inline: 0.5rem;
+}
+
+.dx-button[data-size="default"] {
+  height: 2rem;
+  padding: 0.375rem 1rem;
+}
+
+.dx-button[data-size="default"]:has(> svg) {
+  padding-inline: 0.75rem;
+}
+
+.dx-button[data-size="lg"] {
+  height: 2.375rem;
+  padding: 0 1.25rem;
+}
+
+.dx-button[data-size="lg"]:has(> svg) {
+  padding-inline: 1rem;
+}
+
+.dx-button[data-size="icon"] {
+  width: 2rem;
+  height: 2rem;
+}
+
+.dx-button[data-size="icon"] svg:not([class*="size-"]) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dx-button[data-size="icon-xs"] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.dx-button[data-size="icon-xs"] svg:not([class*="size-"]) {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.dx-button[data-size="icon-sm"] {
+  width: 1.875rem;
+  height: 1.875rem;
+}
+
+.dx-button[data-size="icon-sm"] svg:not([class*="size-"]) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dx-button[data-size="icon-lg"] {
+  width: 2.375rem;
+  height: 2.375rem;
+}
+
+.dx-button[data-size="icon-lg"] svg:not([class*="size-"]) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dx-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.dx-button[data-style="primary"] {
+  background-color: var(--accent);
+  color: var(--on-accent);
+}
+
+.dx-button[data-style="primary"]:not(:disabled):hover {
+  background-color: color-mix(in oklab, var(--accent) 88%, var(--text));
+}
+
+.dx-button[data-style="secondary"] {
+  background-color: var(--surface-2);
+  color: var(--text);
+}
+
+.dx-button[data-style="secondary"]:not(:disabled):hover {
+  background-color: color-mix(in oklab, var(--surface-2) 85%, var(--text));
+}
+
+.dx-button[data-style="ghost"] {
+  background-color: transparent;
+  color: var(--text-2);
+}
+
+.dx-button[data-style="ghost"]:not(:disabled):hover {
+  background-color: var(--surface-2);
+  color: var(--text);
+}
+
+.dx-button[data-style="outline"] {
+  border: 1px solid var(--border);
+  background-color: var(--surface);
+  color: var(--text);
+}
+
+.dx-button[data-style="outline"]:not(:disabled):hover {
+  background-color: var(--surface-2);
+}
+
+.dx-button[data-style="destructive"] {
+  background-color: var(--danger);
+  color: var(--dark, #171d18) var(--light, #ffffff);
+}
+
+.dx-button[data-style="destructive"]:not(:disabled):hover {
+  background-color: color-mix(in oklab, var(--danger) 88%, var(--text));
+}
+
+.dx-button[data-style="destructive"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}
+
+.dx-button[data-style="link"] {
+  background-color: transparent;
+  color: var(--accent-text);
+  text-decoration: none;
+  text-underline-offset: 0.25rem;
+}
+
+.dx-button[data-style="link"]:not(:disabled):hover {
+  text-decoration: underline;
+}
+
+.dx-button:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 45%, transparent);
+}
+
+.dx-button[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+
+.dx-button[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 40%, transparent);
+}

parts/mize.ui/dioxus-components/src/components/card/component.rs

@@ -0,0 +1,109 @@
+use dioxus::prelude::*;
+
+#[css_module("/src/components/card/style.css")]
+struct Styles;
+
+#[component]
+pub fn Card(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card,
+            "data-slot": "card",
+            ..attributes,
+            {children}
+        }
+    }
+}
+
+#[component]
+pub fn CardHeader(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card_header,
+            "data-slot": "card-header",
+            ..attributes,
+            {children}
+        }
+    }
+}
+
+#[component]
+pub fn CardTitle(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card_title,
+            "data-slot": "card-title",
+            ..attributes,
+            {children}
+        }
+    }
+}
+
+#[component]
+pub fn CardDescription(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card_description,
+            "data-slot": "card-description",
+            ..attributes,
+            {children}
+        }
+    }
+}
+
+#[component]
+pub fn CardAction(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card_action,
+            "data-slot": "card-action",
+            ..attributes,
+            {children}
+        }
+    }
+}
+
+#[component]
+pub fn CardContent(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card_content,
+            "data-slot": "card-content",
+            ..attributes,
+            {children}
+        }
+    }
+}
+
+#[component]
+pub fn CardFooter(
+    #[props(extends=GlobalAttributes)] attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        div {
+            class: Styles::dx_card_footer,
+            "data-slot": "card-footer",
+            ..attributes,
+            {children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/card/mod.rs

@@ -0,0 +1,3 @@
+mod component;
+pub use component::*;
+

parts/mize.ui/dioxus-components/src/components/card/style.css

@@ -0,0 +1,52 @@
+.dx-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background-color: var(--surface);
+  box-shadow: 0 1px 0 rgb(0 0 0 / 8%);
+  color: var(--text);
+  gap: 1rem;
+}
+
+.dx-card-header {
+  display: grid;
+  align-items: start;
+  padding: 0 1rem;
+  gap: 0.375rem;
+  grid-auto-rows: min-content;
+  grid-template-rows: auto auto;
+}
+
+.dx-card-header:has([data-slot="card-action"]) {
+  grid-template-columns: 1fr auto;
+}
+
+.dx-card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.dx-card-description {
+  color: var(--text-2);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.dx-card-action {
+  grid-column-start: 2;
+  grid-row: 1 / span 2;
+  place-self: start end;
+}
+
+.dx-card-content {
+  padding: 0 1rem;
+}
+
+.dx-card-footer {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}

parts/mize.ui/dioxus-components/src/components/checkbox/component.rs

@@ -0,0 +1,26 @@
+use dioxus::prelude::*;
+use dioxus_icons::lucide::Check;
+use dioxus_primitives::checkbox::{self, CheckboxProps};
+
+#[css_module("/src/components/checkbox/style.css")]
+struct Styles;
+
+#[component]
+pub fn Checkbox(props: CheckboxProps) -> Element {
+    rsx! {
+        checkbox::Checkbox {
+            class: Styles::dx_checkbox,
+            checked: props.checked,
+            default_checked: props.default_checked,
+            required: props.required,
+            disabled: props.disabled,
+            name: props.name,
+            value: props.value,
+            on_checked_change: props.on_checked_change,
+            attributes: props.attributes,
+            checkbox::CheckboxIndicator { class: Styles::dx_checkbox_indicator,
+                Check { size: "1rem" }
+            }
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/checkbox/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/checkbox/style.css

@@ -0,0 +1,34 @@
+.dx-checkbox {
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  margin: 0;
+  background-color: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--border);
+  color: var(--on-accent);
+  cursor: pointer;
+}
+
+.dx-checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dx-checkbox[data-state="checked"] {
+  background-color: var(--accent);
+  box-shadow: none;
+  color: var(--on-accent);
+}
+
+.dx-checkbox:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
+}
+
+.dx-checkbox[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

parts/mize.ui/dioxus-components/src/components/dialog/component.rs

@@ -0,0 +1,62 @@
+use dioxus::prelude::*;
+use dioxus_primitives::dialog::{self, DialogDescriptionProps, DialogRootProps, DialogTitleProps};
+use dioxus_primitives::{dioxus_attributes::attributes, merge_attributes};
+
+#[css_module("/src/components/dialog/style.css")]
+struct Styles;
+
+#[component]
+pub fn Dialog(props: DialogRootProps) -> Element {
+    let base = attributes!(div {
+        class: Styles::dx_dialog,
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        dialog::DialogRoot {
+            class: Styles::dx_dialog_backdrop,
+            id: props.id,
+            is_modal: props.is_modal,
+            open: props.open,
+            default_open: props.default_open,
+            on_open_change: props.on_open_change,
+            dialog::DialogContent {
+                class: None,
+                attributes: merged,
+                {props.children}
+            }
+        }
+    }
+}
+
+#[component]
+pub fn DialogTitle(props: DialogTitleProps) -> Element {
+    let base = attributes!(h2 {
+        class: Styles::dx_dialog_title,
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        dialog::DialogTitle {
+            id: props.id,
+            attributes: merged,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn DialogDescription(props: DialogDescriptionProps) -> Element {
+    let base = attributes!(p {
+        class: Styles::dx_dialog_description,
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        dialog::DialogDescription {
+            id: props.id,
+            attributes: merged,
+            {props.children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/dialog/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/dialog/style.css

@@ -0,0 +1,100 @@
+.dx-dialog-backdrop {
+  position: fixed;
+  z-index: 1000;
+  background: rgb(23 29 24 / 55%);
+  inset: 0;
+  opacity: 0;
+  will-change: opacity;
+}
+
+.dx-dialog-backdrop[data-state="closed"] {
+  animation: dx-dialog-backdrop-animate-out 150ms ease-in forwards;
+  pointer-events: none;
+}
+
+@keyframes dx-dialog-backdrop-animate-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.dx-dialog-backdrop[data-state="open"] {
+  animation: dx-dialog-backdrop-animate-in 150ms ease-out forwards;
+}
+
+@keyframes dx-dialog-backdrop-animate-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.dx-dialog {
+  position: fixed;
+  z-index: 1001;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  width: 100%;
+  max-width: calc(100% - 2rem);
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 1.5rem 1.25rem 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  margin: 0;
+  background: var(--surface);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
+  color: var(--text);
+  font-family: inherit;
+  gap: 0.75rem;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+
+.dx-dialog-title {
+  margin: 0;
+  color: var(--text);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.dx-dialog-description {
+  margin: 0;
+  color: var(--text-2);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+@media (width >= 40rem) {
+  .dx-dialog {
+    max-width: 28rem;
+    text-align: left;
+  }
+}
+
+.dx-dialog-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  align-self: flex-start;
+  padding: 0;
+  border: none;
+  margin: 0;
+  background: none;
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.dx-dialog-close:hover {
+  color: var(--text);
+}

parts/mize.ui/dioxus-components/src/components/input/component.rs

@@ -0,0 +1,57 @@
+use dioxus::prelude::*;
+#[css_module("/src/components/input/style.css")]
+struct Styles;
+
+#[component]
+pub fn Input(
+    oninput: Option<EventHandler<FormEvent>>,
+    onchange: Option<EventHandler<FormEvent>>,
+    oninvalid: Option<EventHandler<FormEvent>>,
+    onselect: Option<EventHandler<SelectionEvent>>,
+    onselectionchange: Option<EventHandler<SelectionEvent>>,
+    onfocus: Option<EventHandler<FocusEvent>>,
+    onblur: Option<EventHandler<FocusEvent>>,
+    onfocusin: Option<EventHandler<FocusEvent>>,
+    onfocusout: Option<EventHandler<FocusEvent>>,
+    onkeydown: Option<EventHandler<KeyboardEvent>>,
+    onkeypress: Option<EventHandler<KeyboardEvent>>,
+    onkeyup: Option<EventHandler<KeyboardEvent>>,
+    onwheel: Option<EventHandler<WheelEvent>>,
+    oncompositionstart: Option<EventHandler<CompositionEvent>>,
+    oncompositionupdate: Option<EventHandler<CompositionEvent>>,
+    oncompositionend: Option<EventHandler<CompositionEvent>>,
+    oncopy: Option<EventHandler<ClipboardEvent>>,
+    oncut: Option<EventHandler<ClipboardEvent>>,
+    onpaste: Option<EventHandler<ClipboardEvent>>,
+    #[props(extends=GlobalAttributes)]
+    #[props(extends=input)]
+    attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        input {
+            class: Styles::dx_input,
+            oninput: move |e| _ = oninput.map(|callback| callback(e)),
+            onchange: move |e| _ = onchange.map(|callback| callback(e)),
+            oninvalid: move |e| _ = oninvalid.map(|callback| callback(e)),
+            onselect: move |e| _ = onselect.map(|callback| callback(e)),
+            onselectionchange: move |e| _ = onselectionchange.map(|callback| callback(e)),
+            onfocus: move |e| _ = onfocus.map(|callback| callback(e)),
+            onblur: move |e| _ = onblur.map(|callback| callback(e)),
+            onfocusin: move |e| _ = onfocusin.map(|callback| callback(e)),
+            onfocusout: move |e| _ = onfocusout.map(|callback| callback(e)),
+            onkeydown: move |e| _ = onkeydown.map(|callback| callback(e)),
+            onkeypress: move |e| _ = onkeypress.map(|callback| callback(e)),
+            onkeyup: move |e| _ = onkeyup.map(|callback| callback(e)),
+            onwheel: move |e| _ = onwheel.map(|callback| callback(e)),
+            oncompositionstart: move |e| _ = oncompositionstart.map(|callback| callback(e)),
+            oncompositionupdate: move |e| _ = oncompositionupdate.map(|callback| callback(e)),
+            oncompositionend: move |e| _ = oncompositionend.map(|callback| callback(e)),
+            oncopy: move |e| _ = oncopy.map(|callback| callback(e)),
+            oncut: move |e| _ = oncut.map(|callback| callback(e)),
+            onpaste: move |e| _ = onpaste.map(|callback| callback(e)),
+            ..attributes,
+            {children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/input/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/input/style.css

@@ -0,0 +1,40 @@
+.dx-input {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--border);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.875rem;
+  gap: 0.25rem;
+  outline: none;
+  transition: background-color 100ms ease-out, box-shadow 100ms ease-out;
+}
+
+.dx-input::placeholder {
+  color: var(--text-2);
+}
+
+.dx-input:disabled {
+  color: var(--text-2);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dx-input:hover:not(:disabled) {
+  background-color: color-mix(in oklab, var(--surface-2) 90%, var(--text));
+}
+
+.dx-input:focus-visible {
+  background-color: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
+  color: var(--text);
+  outline: none;
+}

parts/mize.ui/dioxus-components/src/components/label/component.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+use dioxus_primitives::label::{self, LabelProps};
+#[css_module("/src/components/label/style.css")]
+struct Styles;
+
+#[component]
+pub fn Label(props: LabelProps) -> Element {
+    rsx! {
+        label::Label {
+            class: Styles::dx_label,
+            html_for: props.html_for,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/label/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/label/style.css

@@ -0,0 +1,9 @@
+.dx-label {
+  display: flex;
+  align-items: center;
+  color: var(--text-2);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+}

parts/mize.ui/dioxus-components/src/components/mod.rs

@@ -0,0 +1,25 @@
+pub mod avatar;
+pub mod badge;
+pub mod button;
+pub mod card;
+pub mod checkbox;
+pub mod dialog;
+pub mod input;
+pub mod label;
+pub mod scroll_area;
+pub mod separator;
+pub mod switch;
+pub mod textarea;
+
+pub use avatar::*;
+pub use badge::*;
+pub use button::*;
+pub use card::*;
+pub use checkbox::*;
+pub use dialog::*;
+pub use input::*;
+pub use label::*;
+pub use scroll_area::*;
+pub use separator::*;
+pub use switch::*;
+pub use textarea::*;

parts/mize.ui/dioxus-components/src/components/scroll_area/component.rs

@@ -0,0 +1,7 @@
+use dioxus::prelude::*;
+use dioxus_primitives::scroll_area::{self, ScrollAreaProps};
+
+#[component]
+pub fn ScrollArea(props: ScrollAreaProps) -> Element {
+    scroll_area::ScrollArea(props)
+}

parts/mize.ui/dioxus-components/src/components/scroll_area/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/scroll_area/style.css

@@ -0,0 +1 @@
+/* Scroll area uses unstyled dioxus-primitives; no extra styles for MVP. */

parts/mize.ui/dioxus-components/src/components/separator/component.rs

@@ -0,0 +1,23 @@
+use dioxus::prelude::*;
+use dioxus_primitives::separator::{self, SeparatorProps};
+use dioxus_primitives::{dioxus_attributes::attributes, merge_attributes};
+
+#[css_module("/src/components/separator/style.css")]
+struct Styles;
+
+#[component]
+pub fn Separator(props: SeparatorProps) -> Element {
+    let base = attributes!(div {
+        class: Styles::dx_separator,
+    });
+    let merged = merge_attributes(vec![base, props.attributes]);
+
+    rsx! {
+        separator::Separator {
+            horizontal: props.horizontal,
+            decorative: props.decorative,
+            attributes: merged,
+            {props.children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/separator/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/separator/style.css

@@ -0,0 +1,13 @@
+.dx-separator {
+  background-color: var(--border);
+}
+
+.dx-separator[data-orientation="horizontal"] {
+  width: 100%;
+  height: 1px;
+}
+
+.dx-separator[data-orientation="vertical"] {
+  width: 1px;
+  height: 100%;
+}

parts/mize.ui/dioxus-components/src/components/switch/component.rs

@@ -0,0 +1,23 @@
+use dioxus::prelude::*;
+use dioxus_primitives::switch::{self, SwitchProps};
+
+#[css_module("/src/components/switch/style.css")]
+struct Styles;
+
+#[component]
+pub fn Switch(props: SwitchProps) -> Element {
+    rsx! {
+        switch::Switch {
+            class: Styles::dx_switch,
+            checked: props.checked,
+            default_checked: props.default_checked,
+            disabled: props.disabled,
+            required: props.required,
+            name: props.name,
+            value: props.value,
+            on_checked_change: props.on_checked_change,
+            attributes: props.attributes,
+            switch::SwitchThumb { class: Styles::dx_switch_thumb }
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/switch/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/switch/style.css

@@ -0,0 +1,41 @@
+.dx-switch {
+  all: unset;
+  position: relative;
+  width: 2rem;
+  height: 1.15rem;
+  border-radius: 9999px;
+  background-color: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--border);
+  cursor: pointer;
+  transition: background-color 150ms, box-shadow 150ms;
+}
+
+.dx-switch[data-state="checked"] {
+  background-color: var(--accent);
+  box-shadow: none;
+}
+
+.dx-switch:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent);
+}
+
+.dx-switch-thumb {
+  display: block;
+  width: calc(1.15rem - 2px);
+  height: calc(1.15rem - 2px);
+  border-radius: 9999px;
+  background-color: var(--text);
+  transform: translateX(1px);
+  transition: transform 150ms, background-color 150ms;
+  will-change: transform;
+}
+
+.dx-switch[data-state="checked"] .dx-switch-thumb {
+  background-color: var(--on-accent);
+  transform: translateX(calc(2rem - 1px - (1.15rem - 2px)));
+}
+
+.dx-switch[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

parts/mize.ui/dioxus-components/src/components/textarea/component.rs

@@ -0,0 +1,82 @@
+use dioxus::prelude::*;
+
+#[css_module("/src/components/textarea/style.css")]
+struct Styles;
+
+#[derive(Copy, Clone, PartialEq, Default)]
+#[non_exhaustive]
+pub enum TextareaVariant {
+    #[default]
+    Default,
+    Fade,
+    Outline,
+    Ghost,
+}
+
+impl TextareaVariant {
+    pub fn class(&self) -> &'static str {
+        match self {
+            TextareaVariant::Default => "default",
+            TextareaVariant::Fade => "fade",
+            TextareaVariant::Outline => "outline",
+            TextareaVariant::Ghost => "ghost",
+        }
+    }
+}
+
+#[component]
+pub fn Textarea(
+    oninput: Option<EventHandler<FormEvent>>,
+    onchange: Option<EventHandler<FormEvent>>,
+    oninvalid: Option<EventHandler<FormEvent>>,
+    onselect: Option<EventHandler<SelectionEvent>>,
+    onselectionchange: Option<EventHandler<SelectionEvent>>,
+    onfocus: Option<EventHandler<FocusEvent>>,
+    onblur: Option<EventHandler<FocusEvent>>,
+    onfocusin: Option<EventHandler<FocusEvent>>,
+    onfocusout: Option<EventHandler<FocusEvent>>,
+    onkeydown: Option<EventHandler<KeyboardEvent>>,
+    onkeypress: Option<EventHandler<KeyboardEvent>>,
+    onkeyup: Option<EventHandler<KeyboardEvent>>,
+    oncompositionstart: Option<EventHandler<CompositionEvent>>,
+    oncompositionupdate: Option<EventHandler<CompositionEvent>>,
+    oncompositionend: Option<EventHandler<CompositionEvent>>,
+    oncopy: Option<EventHandler<ClipboardEvent>>,
+    oncut: Option<EventHandler<ClipboardEvent>>,
+    onpaste: Option<EventHandler<ClipboardEvent>>,
+    onmounted: Option<EventHandler<MountedEvent>>,
+    #[props(default)] variant: TextareaVariant,
+    #[props(extends=GlobalAttributes)]
+    #[props(extends=textarea)]
+    attributes: Vec<Attribute>,
+    children: Element,
+) -> Element {
+    rsx! {
+        textarea {
+            class: Styles::dx_textarea,
+            "data-slot": "textarea",
+            "data-style": variant.class(),
+            oninput: move |e| _ = oninput.map(|callback| callback(e)),
+            onchange: move |e| _ = onchange.map(|callback| callback(e)),
+            oninvalid: move |e| _ = oninvalid.map(|callback| callback(e)),
+            onselect: move |e| _ = onselect.map(|callback| callback(e)),
+            onselectionchange: move |e| _ = onselectionchange.map(|callback| callback(e)),
+            onfocus: move |e| _ = onfocus.map(|callback| callback(e)),
+            onblur: move |e| _ = onblur.map(|callback| callback(e)),
+            onfocusin: move |e| _ = onfocusin.map(|callback| callback(e)),
+            onfocusout: move |e| _ = onfocusout.map(|callback| callback(e)),
+            onkeydown: move |e| _ = onkeydown.map(|callback| callback(e)),
+            onkeypress: move |e| _ = onkeypress.map(|callback| callback(e)),
+            onkeyup: move |e| _ = onkeyup.map(|callback| callback(e)),
+            oncompositionstart: move |e| _ = oncompositionstart.map(|callback| callback(e)),
+            oncompositionupdate: move |e| _ = oncompositionupdate.map(|callback| callback(e)),
+            oncompositionend: move |e| _ = oncompositionend.map(|callback| callback(e)),
+            oncopy: move |e| _ = oncopy.map(|callback| callback(e)),
+            oncut: move |e| _ = oncut.map(|callback| callback(e)),
+            onpaste: move |e| _ = onpaste.map(|callback| callback(e)),
+            onmounted: move |e| _ = onmounted.map(|callback| callback(e)),
+            ..attributes,
+            {children}
+        }
+    }
+}

parts/mize.ui/dioxus-components/src/components/textarea/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

parts/mize.ui/dioxus-components/src/components/textarea/style.css

@@ -0,0 +1,84 @@
+.dx-textarea {
+  width: 100%;
+  min-height: 4rem;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 0.375rem;
+  margin: 0;
+  appearance: none;
+  background: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  resize: vertical;
+  transition: background-color 100ms ease-out, border-color 100ms ease-out, box-shadow 100ms ease-out;
+}
+
+.dx-textarea:disabled {
+  color: var(--text-2);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dx-textarea::placeholder {
+  color: var(--text-2);
+}
+
+.dx-textarea[data-style="default"] {
+  background: var(--surface-2);
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.dx-textarea[data-style="default"]:hover:not(:disabled),
+.dx-textarea[data-style="default"]:focus {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.dx-textarea[data-style="default"]:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent);
+}
+
+.dx-textarea[data-style="fade"] {
+  background: var(--surface-2);
+}
+
+.dx-textarea[data-style="fade"]:hover:not(:disabled),
+.dx-textarea[data-style="fade"]:focus {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.dx-textarea[data-style="outline"] {
+  border: 1px solid var(--border);
+  background-color: var(--surface);
+}
+
+.dx-textarea[data-style="outline"]:hover:not(:disabled, :focus) {
+  border-color: color-mix(in oklab, var(--border) 70%, var(--text));
+}
+
+.dx-textarea[data-style="outline"]:focus {
+  border-color: var(--accent);
+}
+
+.dx-textarea[data-style="outline"]:invalid,
+.dx-textarea[data-style="outline"][aria-invalid="true"] {
+  border-color: var(--danger);
+}
+
+.dx-textarea[data-style="ghost"] {
+  background-color: transparent;
+}
+
+.dx-textarea[data-style="ghost"]:hover:not(:disabled) {
+  background-color: var(--surface-2);
+  color: var(--text);
+}
+
+.dx-textarea[data-style="ghost"]:focus {
+  box-shadow: inset 0 0 0 1px var(--accent);
+}

parts/mize.ui/dioxus-components/src/lib.rs

@@ -0,0 +1,14 @@
+//! Styled Dioxus UI components using the mize color palette.
+//!
+//! Include [`THEME`] once at the app root (e.g. a stylesheet link), and set
+//! `html[data-theme="light"]` or `html[data-theme="dark"]` to switch themes.
+
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+pub mod components;
+pub use components::*;
+
+/// Global theme stylesheet (`assets/theme.css`). Link this once in your app.
+pub const THEME: Asset = asset!("/assets/theme.css");