Merge pull request #94 from Siumauricio/docs/v1.12.0

feat(docs): v1.12.0

README.md

@@ -84,6 +84,7 @@ Here is a list of all of the components that are currently available in RippleUI
 - Popover
 - Sidebar
 - Spinners / Loaders
+- Input File
 - More components soon....
 
 ## 🤝 Contributing

docs/components/styles/Hero.tsx

@@ -10,7 +10,6 @@ export const Hero = () => {
         <div className="flex flex-row justify-center px-4 md:gap-24">
           <div className="flex max-w-3xl flex-col gap-4 pt-10 sm:gap-0 sm:pb-24 sm:pt-20  lg:pt-52">
             <div className="flex flex-col gap-4">
-              <div className="spinn"></div>
               <h1>
                 <span className="text-[40px] font-bold leading-none text-primary  sm:text-5xl lg:text-6xl">
                   Ripple UI
@@ -19,7 +18,6 @@ export const Hero = () => {
                   Ultimate toolkit for modern interface design.
                 </span>
               </h1>
-
               <p className="pr-10 text-base  text-content2">
                 Ripple UI is a collection of components and utilities that are
                 used to build modern interfaces. It is built on top of Tailwind

docs/content/components/input-file.mdx

@@ -0,0 +1,90 @@
+---
+title: Input File
+description:  Input File component is used to capture any types of files from the user.
+---
+
+# Input File
+
+Ripple UI comes with a set of input file components that can be used to capture any types of files from the user.
+
+## Default
+
+Simple example of Input File.
+
+<input type="file" className="input-file" />
+
+```html
+ <input type="file" className="input-file" />
+```
+
+## Colors
+
+Input File colors
+
+<div className="flex flex-wrap gap-4">
+ <input type="file" className="input-file input-file-primary" />
+<input type="file" className="input-file input-file-secondary" />
+<input type="file" className="input-file input-file-success" />
+<input type="file" className="input-file input-file-error" />
+<input type="file" className="input-file input-file-warning" />
+</div>
+
+```html
+<input type="file" className="input-file input-file-primary" />
+<input type="file" className="input-file input-file-secondary" />
+<input type="file" className="input-file input-file-success" />
+<input type="file" className="input-file input-file-error" />
+<input type="file" className="input-file input-file-warning" />
+```
+
+## Sizes
+
+Input sizes
+
+<div className="flex flex-wrap flex-col gap-4">
+    <input type="file" className="input-file input-file-xs" />
+    <input type="file" className="input-file input-file-sm" />
+    <input type="file" className="input-file input-file-md" />
+    <input type="file" className="input-file input-file-lg" />
+    <input type="file" className="input-file input-file-xl" />
+</div>
+
+```html
+<input type="file" className="input-file input-file-xs" />
+<input type="file" className="input-file input-file-sm" />
+<input type="file" className="input-file input-file-md" />
+<input type="file" className="input-file input-file-lg" />
+<input type="file" className="input-file input-file-xl" />
+```
+
+## Custom
+
+You can customize the input file component by using the following structure.
+
+<input type="file" className="input-file file:bg-pink-600 border-pink-500 file:text-white" />
+
+```html
+<input type="file" className="input-file file:bg-pink-600 border-pink-500 file:text-white" />
+```
+
+## API
+<Attributes >
+<Attributes.Title>Input File Classes</Attributes.Title>
+
+| class                 | Description                                        |
+| --------------------- | -------------------------------------------------- |
+| input-file            | Input File class                                   |
+| input-file-primary    | Input File with primary color                           |
+| input-file-secondary  | Input File with secondary color                           |
+| input-file-success    | Input File with success color                           |
+| input-file-error      | Input File with error color                           |
+| input-file-warning    | Input File with warning color                           |
+| input-file-xs         | Input File with extra small size                           |
+| input-file-sm         | Input File with small size                           |
+| input-file-md         | Input File with medium size                           |
+| input-file-lg         | Input File with large size                           |
+| input-file-xl         | Input File with extra large size                           |
+
+</Attributes>
+
+

docs/package.json

@@ -34,7 +34,7 @@
     "react-dom": "18.2.0",
     "rehype-slug": "^5.1.0",
     "remark-mdx-code-meta": "^2.0.0",
-    "rippleui": "^1.11.0",
+    "rippleui": "^1.12.0",
     "typescript": "4.9.3"
   },
   "devDependencies": {

docs/pages/docs/[[...page]].tsx

@@ -79,7 +79,13 @@ function getPrevNext(route: string) {
     const links = item.links;
 
     for (let i = 0; i < links.length; i++) {
-      if (links[i].children?.toString().toLowerCase() === children) {
+      console.log(
+        links[i].children?.toString().toLowerCase().replace(" ", "-")
+      );
+      if (
+        links[i].children?.toString().toLowerCase().replace(" ", "-") ===
+        children
+      ) {
         if (i > 0) {
           prev = links[i - 1];
         }

docs/utils/items.ts

@@ -46,7 +46,7 @@ export const items: Items[] = [
       { href: "/docs/components/button", children: "Button" },
       {
         href: "/docs/components/button-group",
-        children: "ButtonGroup",
+        children: "Button Group",
       },
 
       { href: "/docs/components/card", children: "Card" },
@@ -63,7 +63,13 @@ export const items: Items[] = [
       },
       { href: "/docs/components/dropdown", children: "Dropdown" },
       { href: "/docs/components/forms", children: "Forms" },
+
       { href: "/docs/components/input", children: "Input" },
+      {
+        href: "/docs/components/input-file",
+        children: "Input File",
+        isNew: true,
+      },
       {
         href: "/docs/components/link",
         children: "Link",

standalone-cli/package.json

@@ -19,7 +19,7 @@
     "move-file-cli": "^3.0.0",
     "pkg": "^5.8.0",
     "rimraf": "^3.0.2",
-    "rippleui": "^1.11.0",
+    "rippleui": "^1.12.0",
     "tailwindcss": "^3.3.1"
   },
   "pkg": {