feat: add new components

.gitmodules

@@ -58,3 +58,18 @@
 [submodule "badges-rs"]
 	path = badges-rs
 	url = https://github.com/opensass/badges-rs.git
+[submodule "coders"]
+	path = coders
+	url = https://github.com/opensass/coders
+[submodule "otprs"]
+	path = otprs
+	url = https://github.com/opensass/otprs
+[submodule "form-rs"]
+	path = form-rs
+	url = https://github.com/opensass/form-rs
+[submodule "sushi-rs"]
+	path = sushi-rs
+	url = https://github.com/opensass/sushi-rs
+[submodule "pride-rs"]
+	path = pride-rs
+	url = https://github.com/opensass/pride-rs

src/#

@@ -0,0 +1 @@
+# Data Display

src/#1

@@ -0,0 +1 @@
+# Data Display

src/#2

@@ -0,0 +1 @@
+# Landing Page

src/#3

@@ -0,0 +1 @@
+# Scroll

src/#4

@@ -0,0 +1 @@
+# Localization

src/#5

@@ -0,0 +1 @@
+# System

src/SUMMARY.md

@@ -4,63 +4,63 @@
 
 - [Introduction](./introduction.md)
 - [Components](./components.md)
-  - [Data Display]()
+  - [Data Display](#1)
     - [Accordion](./components/accordion-rs.md)
     - [Avatar](./components/avatar-rs.md)
-    - [Badge](./components/badges-rs.md)
+    - [Badge](./components/badge-rs.md)
     - [Card](./components/card-rs.md)
-    - [Code (TODO)]()
+    - [Code](./components/code-rs.md)
+    - [ELD](./components/eld.md)
     - [Image](./components/image-rs.md)
-    - [Snippet (TODO)]()
     - [Table](./components/table-rs.md)
-    - [User (TODO)]()
-  - [Data Entry]()
-    - [Checkbox (TODO)]()
-    - [Form (TODO)]()
+  - [Data Entry](<>)
+    - [Checkbox (TODO)](<>)
+    - [Form](./components/form-rs.md)
     - [Input](./components/input-rs.md)
-    - [Listbox (TODO)]()
-    - [OTP (TODO)]()
+    - [Listbox (TODO)](<>)
+    - [OTP](./components/otp-rs.md)
     - [Radio](./components/radio-rs.md)
     - [Select](./components/select-rs.md)
     - [Slider](./components/slider-rs.md)
-    - [Switch (TODO)]()
-  - [Date & Time]()
-    - [Calendar (TODO)]()
-    - [Date (TODO)]()
-    - [Time Input (TODO)]()
-  - [Feedback]()
+    - [Switch (TODO)](<>)
+  - [Date & Time](<>)
+    - [Calendar (TODO)](<>)
+    - [Date (TODO)](<>)
+    - [Time Input (TODO)](<>)
+  - [Feedback](<>)
     - [Alert](./components/alert-rs.md)
-    - [Progress (TODO)]()
+    - [Progress (TODO)](<>)
     - [Skeleton](./components/skeleton-rs.md)
-    - [Spinner (TODO)]()
-    - [Toast (TODO)]()
-    - [Tooltip (TODO)]()
-  - [Landing Page]()
+    - [Spinner (TODO)](<>)
+    - [Toast (TODO)](<>)
+    - [Tooltip (TODO)](<>)
+  - [Landing Page](#2)
     - [Hero](./components/hero.md)
-  - [Navigation]()
-    - [Breadcrumbs (TODO)]()
+    - [Pride](./components/pride-rs.md)
+    - [Sushi](./components/sushi-rs.md)
+  - [Navigation](<>)
+    - [Breadcrumbs (TODO)](<>)
     - [Browser](./components/browser-rs.md)
     - [Navbar](./components/navbar.md)
-    - [Pagination (TODO)]()
+    - [Pagination (TODO)](<>)
     - [Sidebar](./components/sidebar.md)
-    - [Tabs (TODO)]()
-  - [Overlays]()
-    - [Drawer (TODO)]()
-    - [Dropdown (TODO)]()
-    - [Modal (TODO)]()
-    - [Popover (TODO)]()
-  - [Structure]()
-    - [Divider (TODO)]()
-    - [Spacer (TODO)]()
-  - [Utilities]()
-    - [Autocomplete (TODO)]()
-    - [Kbd (TODO)]()
-    - [OTP (TODO)]()
-  - [Localization]()
+    - [Tabs (TODO)](<>)
+  - [Overlays](<>)
+    - [Drawer (TODO)](<>)
+    - [Dropdown (TODO)](<>)
+    - [Modal (TODO)](<>)
+    - [Popover (TODO)](<>)
+  - [Scroll](#3)
+    - [Scroll](./components/scroll-rs.md)
+  - [Structure](<>)
+    - [Divider (TODO)](<>)
+    - [Spacer (TODO)](<>)
+  - [Utilities](<>)
+    - [Autocomplete (TODO)](<>)
+    - [Kbd (TODO)](<>)
+  - [Localization](#4)
     - [I18n](./components/i18n.md)
-  - [System]()
-    - [ELD](./components/eld.md)
+  - [System](#5)
     - [Theme](./components/theme.md)
-  - [Typography]()
-    - [Kbd (TODO)]()
-    - [Link (TODO)]()
+  - [Typography](<>)
+    - [Link (TODO)](<>)

src/components.md

@@ -1,23 +1,24 @@
 # 🧩 Open SASS Components
 
-**Open SASS Components** are a growing collection of UI elements designed to be **modular**, **framework-agnostic**, and **ready for any stack**. All components are built with flexibility in mind and work with **TailwindCSS**, **Bootstrap**, or **vanilla CSS**.
+**Open SASS Components** are a growing collection of UI elements designed to be **modular**, **framework-agnostic**, and **ready for any stack**. All components are built with flexibility in mind and work across **Yew**, **Dioxus**, and **Leptos**.
 
 ## 📦 Component Categories
 
-| Category     | Components                                                                           |
-| ------------ | ------------------------------------------------------------------------------------ |
-| Data Display | `Accordion`, `Avatar`, `Badge`, `Card`, `Code`, `Image`, `Snippet`, `Table`, `User`  |
-| Data Entry   | `Checkbox`, `Form`, `Input`, `Listbox`, `OTP`, `Radio`, `Select`, `Slider`, `Switch` |
-| Date & Time  | `Calendar`, `Date`, `Time Input`                                                     |
-| Feedback     | `Alert`, `Progress`, `Skeleton`, `Spinner`, `Toast`, `Tooltip`                       |
-| Landing Page | `Hero`                                                                               |
-| Navigation   | `Breadcrumbs`, `Browser`, `Navbar`, `Pagination`, `Sidebar`, `Tabs`                  |
-| Overlays     | `Drawer`, `Dropdown`, `Modal`, `Popover`                                             |
-| Structure    | `Divider`, `Spacer`                                                                  |
-| Utilities    | `Autocomplete`, `Kbd`, `OTP`                                                         |
-| Localization | `I18n`                                                                               |
-| System       | `ELD`, `Theme`                                                                       |
-| Typography   | `Kbd`, `Link`                                                                        |
+| Category     | Components                                                                           | Status    |
+| ------------ | ------------------------------------------------------------------------------------ | --------- |
+| Data Display | `Accordion`, `Avatar`, `Badge`, `Card`, `Code`, `ELD`, `Image`, `Table`              | ✅ Stable |
+| Data Entry   | `Form`, `Input`, `OTP`, `Radio`, `Select`, `Slider`, `Checkbox`, `Listbox`, `Switch` | ✅ / 🚧   |
+| Date & Time  | `Calendar`, `Date`, `Time Input`                                                     | 🚧 TODO   |
+| Feedback     | `Alert`, `Skeleton`, `Progress`, `Spinner`, `Toast`, `Tooltip`                       | ✅ / 🚧   |
+| Landing Page | `Hero`, `Pride`, `Sushi`                                                             | ✅ Stable |
+| Navigation   | `Browser`, `Navbar`, `Sidebar`, `Breadcrumbs`, `Pagination`, `Tabs`                  | ✅ / 🚧   |
+| Overlays     | `Drawer`, `Dropdown`, `Modal`, `Popover`                                             | 🚧 TODO   |
+| Scroll       | `Scroll`                                                                             | ✅ Stable |
+| Structure    | `Divider`, `Spacer`                                                                  | 🚧 TODO   |
+| Utilities    | `Autocomplete`, `Kbd`                                                                | 🚧 TODO   |
+| Localization | `I18n`                                                                               | ✅ Stable |
+| System       | `Theme`                                                                              | ✅ Stable |
+| Typography   | `Link`                                                                               | 🚧 TODO   |
 
 ## 🚀 Getting Started
 
@@ -27,91 +28,75 @@ To use a component, simply import it via the CLI:
 os add component-name framework-name
 ```
 
-## 💡 Example: `Accordion` Component (Yew / Rust)
-
-### ✅ Works with Any CSS Framework
-
-### 🌀 TailwindCSS
-
-```rust
-<Accordion
-    size={Size::Medium}
-    expanded={html! { <h3>{ "Section Expanded" }</h3> }}
-    collapsed={html! { <h3>{ "Section Collapsed" }</h3> }}
-    class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md shadow"
-    expanded_class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
-    collapsed_class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300"
-    content_class="p-4"
-    style=""
-    expanded_style=""
-    collapsed_style=""
-    content_style=""
-    will_open={on_will_open.clone()}
-    did_open={on_did_open.clone()}
-    will_close={on_will_close.clone()}
-    did_close={on_did_close.clone()}
->
-    <List>
-        <Item align={Align::Left}>{ "Item 1 - Left" }</Item>
-        <Item align={Align::Right}>{ "Item 2 - Right" }</Item>
-    </List>
-</Accordion>
+For example, to add `accordion-rs` to a Yew project:
+
+```sh
+os add accordion-rs yew
 ```
 
-### 🎩 Bootstrap
-
-```rust
-<Accordion
-    size={Size::Medium}
-    expanded={html! { <h3 class="accordion-header">{ "Section Expanded" }</h3> }}
-    collapsed={html! { <h3 class="accordion-header collapsed">{ "Section Collapsed" }</h3> }}
-    class="accordion border border-secondary rounded"
-    expanded_class="accordion-body bg-light text-dark"
-    collapsed_class="accordion-body bg-white text-secondary"
-    content_class="accordion-collapse"
-    style=""
-    expanded_style=""
-    collapsed_style=""
-    content_style="padding: 1rem;"
-    will_open={on_will_open.clone()}
-    did_open={on_did_open.clone()}
-    will_close={on_will_close.clone()}
-    did_close={on_did_close.clone()}
->
-    <List>
-        <Item align={Align::Left}>{ "Item 1 - Left" }</Item>
-        <Item align={Align::Right}>{ "Item 2 - Right" }</Item>
-    </List>
-</Accordion>
+Or to a Dioxus project:
+
+```sh
+os add accordion-rs dio
 ```
 
-### 🧱 Vanilla CSS
-
-```rust
-<Accordion
-    size={Size::Medium}
-    expanded={html! { <h3 class="os-accordion-title">{ "Section Expanded" }</h3> }}
-    collapsed={html! { <h3 class="os-accordion-title os-collapsed">{ "Section Collapsed" }</h3> }}
-    class="os-accordion-container"
-    expanded_class="os-expanded"
-    collapsed_class="os-collapsed"
-    content_class="os-content"
-    style="border: 1px solid #ccc; border-radius: 6px;"
-    expanded_style="background: #f0f8ff; color: #003366;"
-    collapsed_style="background: #fafafa; color: #666;"
-    content_style="padding: 1rem;"
-    will_open={on_will_open.clone()}
-    did_open={on_did_open.clone()}
-    will_close={on_will_close.clone()}
-    did_close={on_did_close.clone()}
->
-    <List>
-        <Item align={Align::Left}>{ "Item 1 - Left" }</Item>
-        <Item align={Align::Right}>{ "Item 2 - Right" }</Item>
-    </List>
-</Accordion>
+Or to a Leptos project:
+
+```sh
+os add accordion-rs lep
 ```
 
+## 🔗 Framework Support
+
+| Component      | Yew | Dioxus | Leptos |
+| -------------- | :-: | :----: | :----: |
+| `accordion-rs` | ✅  |   ✅   |   ✅   |
+| `alert-rs`     | ✅  |   ✅   |   ✅   |
+| `avatar-rs`    | ✅  |   ✅   |   ✅   |
+| `badge-rs`     | ✅  |   ✅   |   ✅   |
+| `browser-rs`   | ✅  |   ✅   |   -    |
+| `card-rs`      | ✅  |   ✅   |   ✅   |
+| `code-rs`      | ✅  |   ✅   |   ✅   |
+| `form-rs`      | ✅  |   ✅   |   ✅   |
+| `hero`         | ✅  |   ✅   |   ✅   |
+| `i18n-rs`      | ✅  |   ✅   |   ✅   |
+| `image-rs`     | ✅  |   ✅   |   ✅   |
+| `input-rs`     | ✅  |   ✅   |   ✅   |
+| `navbar`       | ✅  |   ✅   |   ✅   |
+| `otp-rs`       | ✅  |   ✅   |   ✅   |
+| `pride-rs`     | ✅  |   ✅   |   -    |
+| `radio-rs`     | ✅  |   ✅   |   ✅   |
+| `scroll-rs`    | ✅  |   ✅   |   ✅   |
+| `select-rs`    | ✅  |   ✅   |   ✅   |
+| `sidebar`      | ✅  |   ✅   |   ✅   |
+| `skeleton-rs`  | ✅  |   ✅   |   ✅   |
+| `slider-rs`    | ✅  |   ✅   |   ✅   |
+| `sushi-rs`     | ✅  |   ✅   |   ✅   |
+| `table-rs`     | ✅  |   ✅   |   ✅   |
+| `theme-rs`     | ✅  |   ✅   |   -    |
+| `Checkbox`     | 🚧  |   🚧   |   🚧   |
+| `Listbox`      | 🚧  |   🚧   |   🚧   |
+| `Switch`       | 🚧  |   🚧   |   🚧   |
+| `Calendar`     | 🚧  |   🚧   |   🚧   |
+| `Date`         | 🚧  |   🚧   |   🚧   |
+| `Time Input`   | 🚧  |   🚧   |   🚧   |
+| `Progress`     | 🚧  |   🚧   |   🚧   |
+| `Spinner`      | 🚧  |   🚧   |   🚧   |
+| `Toast`        | 🚧  |   🚧   |   🚧   |
+| `Tooltip`      | 🚧  |   🚧   |   🚧   |
+| `Breadcrumbs`  | 🚧  |   🚧   |   🚧   |
+| `Pagination`   | 🚧  |   🚧   |   🚧   |
+| `Tabs`         | 🚧  |   🚧   |   🚧   |
+| `Drawer`       | 🚧  |   🚧   |   🚧   |
+| `Dropdown`     | 🚧  |   🚧   |   🚧   |
+| `Modal`        | 🚧  |   🚧   |   🚧   |
+| `Popover`      | 🚧  |   🚧   |   🚧   |
+| `Divider`      | 🚧  |   🚧   |   🚧   |
+| `Spacer`       | 🚧  |   🚧   |   🚧   |
+| `Autocomplete` | 🚧  |   🚧   |   🚧   |
+| `Kbd`          | 🚧  |   🚧   |   🚧   |
+| `Link`         | 🚧  |   🚧   |   🚧   |
+
 ## 🧰 Component Features
 
 - [x] Accessible markup (ARIA support where applicable).

src/components/avatar-rs.md

@@ -54,7 +54,7 @@ os add avatar yew
 ## Usage
 
 <iframe
-  src="https://avatar-rs.netlify.app"
+  src="https://avatar-dio.netlify.app"
   title="Avatar RS Dioxus Examples"
   loading="lazy"
   allowfullscreen
@@ -89,7 +89,7 @@ os add avatar dio
 ## Usage
 
 <iframe
-  src="https://avatar-rs.netlify.app"
+  src="https://avatar-lep.netlify.app"
   title="Avatar RS Leptos Examples"
   loading="lazy"
   allowfullscreen