Feature/input

book-examples/leptos/Cargo.toml

@@ -21,13 +21,16 @@ shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = tru
 shadcn-ui-leptos-badge = { path = "../../packages/leptos/badge", optional = true }
 shadcn-ui-leptos-button = { path = "../../packages/leptos/button", optional = true }
 shadcn-ui-leptos-card = { path = "../../packages/leptos/card", optional = true }
+shadcn-ui-leptos-input = { path = "../../packages/leptos/input", optional = true }
+
 
 [features]
 default = [
     "alert",
     "badge",
     "button",
     "card",
+    "input",
 ]
 alert = [
     "dep:lucide-leptos",
@@ -45,3 +48,7 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
+input = [
+    "dep:shadcn-ui-leptos-button",
+    "dep:shadcn-ui-leptos-input",
+]

book-examples/leptos/src/default.rs

@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "input")]
+mod input;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "input")]
+        {
+            component_view(self::input::InputRoutes, ())
+        },
     );
 
     view! {

book-examples/leptos/src/default/components/ui.rs

@@ -8,3 +8,6 @@ pub use shadcn_ui_leptos_badge::default as badge;
 pub use shadcn_ui_leptos_button::default as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::default as card;
+
+#[cfg(feature = "input")]
+pub use shadcn_ui_leptos_input::default as input;

book-examples/leptos/src/default/input.rs

@@ -0,0 +1,30 @@
+#[allow(clippy::module_inception)]
+mod input;
+mod input_disabled;
+mod input_file;
+mod input_form;
+mod input_with_button;
+mod input_with_label;
+mod input_with_text;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn InputRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/input") view=Outlet>
+            <Route path=path!("/") view=input::InputDemo />
+            <Route path=path!("/disabled") view=input_disabled::InputDisabledDemo />
+            <Route path=path!("/file") view=input_file::InputFileDemo />
+            <Route path=path!("/form") view=input_form::InputFormDemo />
+            <Route path=path!("/with-button") view=input_with_button::InputWithButtonDemo />
+            <Route path=path!("/with-label") view=input_with_label::InputWithLabelDemo />
+            <Route path=path!("/with-text") view=input_with_text::InputWithTextDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}

book-examples/leptos/src/default/input/input.rs

@@ -0,0 +1,10 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputDemo() -> impl IntoView {
+    view! {
+        <Input r#type=InputType::Email placeholder="Email" />
+    }
+}

book-examples/leptos/src/default/input/input_disabled.rs

@@ -0,0 +1,10 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputDisabledDemo() -> impl IntoView {
+    view! {
+        <Input disabled=true r#type=InputType::Email placeholder="Email" is_error=true   />
+    }
+}

book-examples/leptos/src/default/input/input_file.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputFileDemo() -> impl IntoView {
+    view! {
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+            <label r#for="picture">"Picture"</label>
+            <Input id="picture" r#type=InputType::File />
+        </div>
+    }
+}

book-examples/leptos/src/default/input/input_form.rs

@@ -0,0 +1,11 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputFormDemo() -> impl IntoView {
+    view! {
+        <h1>"Input Form needs to be implemented yet"</h1>
+        <Input r#type=InputType::Password placeholder="Email" />
+    }
+}

book-examples/leptos/src/default/input/input_with_button.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::button::{Button, ButtonVariant};
+use crate::default::components::ui::input::{Input, InputType};
+#[component]
+pub fn InputWithButtonDemo() -> impl IntoView {
+    view! {
+        <div class="flex w-full max-w-sm items-center space-x-2">
+            <Input r#type=InputType::Email placeholder="Email" />
+            <Button r#type="Submit" variant=ButtonVariant::Secondary>"Subscribe"</Button>
+        </div>
+    }
+}

book-examples/leptos/src/default/input/input_with_label.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputWithLabelDemo() -> impl IntoView {
+    view! {
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+            <label r#for="email">"Email"</label>
+            <Input r#type=InputType::Email id="email" placeholder="Email" />
+        </div>
+    }
+}

book-examples/leptos/src/default/input/input_with_text.rs

@@ -0,0 +1,14 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputWithTextDemo() -> impl IntoView {
+    view! {
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+            <label r#for="email-2">"Email"</label>
+            <Input r#type=InputType::Email id="email-2" placeholder="Email" />
+            <p class="text-sm text-muted-foreground">"Enter your email address."</p>
+        </div>
+    }
+}

book-examples/leptos/src/new_york.rs

@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "input")]
+mod input;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "input")]
+        {
+            component_view(self::input::InputRoutes, ())
+        },
     );
 
     view! {

book-examples/leptos/src/new_york/components/ui.rs

@@ -8,3 +8,6 @@ pub use shadcn_ui_leptos_badge::new_york as badge;
 pub use shadcn_ui_leptos_button::new_york as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::new_york as card;
+
+#[cfg(feature = "input")]
+pub use shadcn_ui_leptos_input::new_york as input;

book-examples/leptos/src/new_york/input.rs

@@ -0,0 +1,30 @@
+#[allow(clippy::module_inception)]
+mod input;
+mod input_disabled;
+mod input_file;
+mod input_form;
+mod input_with_button;
+mod input_with_label;
+mod input_with_text;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn InputRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/input") view=Outlet>
+            <Route path=path!("/") view=input::InputDemo />
+            <Route path=path!("/disabled") view=input_disabled::InputDisabledDemo />
+            <Route path=path!("/file") view=input_file::InputFileDemo />
+            <Route path=path!("/form") view=input_form::InputFormDemo />
+            <Route path=path!("/with-button") view=input_with_button::InputWithButtonDemo />
+            <Route path=path!("/with-label") view=input_with_label::InputWithLabelDemo />
+            <Route path=path!("/with-text") view=input_with_text::InputWithTextDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}

book-examples/leptos/src/new_york/input/input.rs

@@ -0,0 +1,10 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputDemo() -> impl IntoView {
+    view! {
+        <Input r#type=InputType::Email placeholder="Email" />
+    }
+}

book-examples/leptos/src/new_york/input/input_disabled.rs

@@ -0,0 +1,10 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputDisabledDemo() -> impl IntoView {
+    view! {
+        <Input disabled=true r#type=InputType::Email placeholder="Email" />
+    }
+}

book-examples/leptos/src/new_york/input/input_file.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputFileDemo() -> impl IntoView {
+    view! {
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+            <label r#for="picture">"Picture"</label>
+            <Input id="picture" r#type=InputType::File />
+        </div>
+    }
+}

book-examples/leptos/src/new_york/input/input_form.rs

@@ -0,0 +1,11 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputFormDemo() -> impl IntoView {
+    view! {
+        <h1>"Input Form needs to be implemented yet"</h1>
+        <Input r#type=InputType::Password placeholder="Email" />
+    }
+}

book-examples/leptos/src/new_york/input/input_with_button.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::button::{Button, ButtonVariant};
+use crate::new_york::components::ui::input::{Input, InputType};
+#[component]
+pub fn InputWithButtonDemo() -> impl IntoView {
+    view! {
+        <div class="flex w-full max-w-sm items-center space-x-2">
+            <Input r#type=InputType::Email placeholder="Email" />
+            <Button r#type="Submit" variant=ButtonVariant::Secondary>"Subscribe"</Button>
+        </div>
+    }
+}

book-examples/leptos/src/new_york/input/input_with_label.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputWithLabelDemo() -> impl IntoView {
+    view! {
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+            <label r#for="email">"Email"</label>
+            <Input r#type=InputType::Email id="email" placeholder="Email" />
+        </div>
+    }
+}

book-examples/leptos/src/new_york/input/input_with_text.rs

@@ -0,0 +1,14 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::input::{Input, InputType};
+
+#[component]
+pub fn InputWithTextDemo() -> impl IntoView {
+    view! {
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+            <label r#for="email-2">"Email"</label>
+            <Input r#type=InputType::Email id="email-2" placeholder="Email" />
+            <p class="text-sm text-muted-foreground">"Enter your email address."</p>
+        </div>
+    }
+}

packages/leptos/input/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "shadcn-ui-leptos-input"
+description = "Leptos port of shadcn/ui Input."
+homepage = "https://shadcn-ui.rustforweb.org/components/input.html"
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+tailwind_fuse.workspace = true
+leptos.workspace = true
+leptos-node-ref.workspace = true
+leptos-style.workspace = true
+shadcn-ui-leptos-utils = { path = "../utils" }

packages/leptos/input/README.md

@@ -0,0 +1,21 @@
+<p align="center">
+    <a href="../../../logo.svg">
+        <img src="../../../logo.svg" width="300" height="200" alt="Rust shadcn/ui Logo">
+    </a>
+</p>
+
+<h1 align="center">shadcn-ui-leptos-input</h1>
+
+Displays a form input field or a component that looks like an input field.
+
+[Rust shadcn/ui](https://github.com/RustForWeb/shadcn-ui) is a Rust port of [shadcn/ui](https://ui.shadcn.com/).
+
+## Documentation
+
+See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/) for documentation.
+
+## Rust For Web
+
+The Rust shadcn/ui project is part of the [Rust For Web](https://github.com/RustForWeb).
+
+[Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.