diff --git a/Readme.md b/Readme.md index 0a17b26..7ba1a2a 100644 --- a/Readme.md +++ b/Readme.md @@ -46,8 +46,7 @@ You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fast Import only the components you need: ```javascript -import { $, $mount } from "sigpro"; -import { Button, Modal, Input, Alert } from "sigpro-ui"; +import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui"; const App = () => { const show = $(false); @@ -83,8 +82,7 @@ const myApp = () => Table({ items: [], columns: [] }); ## Basic Example ```javascript -import { $ } from "sigpro"; -import { Button, Toast, Div, H1 } from "sigpro-ui"; +import { $, Button, Toast, Div, H1 } from "sigpro-ui"; const App = () => { const count = $(0); @@ -105,86 +103,6 @@ const App = () => { $mount(App, "#app"); ``` ---- - -## Components Included - -| Category | Components | -| :--- | :--- | -| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput` | -| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` | -| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` | -| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` | -| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` | - ---- - -## Component Examples - -### Form with validation - -```javascript -import { Input, Button } from "sigpro-ui"; - -const email = $(""); - -Input({ - type: "email", - value: email, - placeholder: "your@email.com", - validate: (v) => !v.includes("@") ? "Invalid email" : null -}); -``` - -### Datepicker with range - -```javascript -import { Datepicker } from "sigpro-ui"; - -const dateRange = $(null); - -Datepicker({ - range: true, - value: dateRange, - hour: true // Include time selection -}); -``` - -### File upload with drag & drop - -```javascript -import { Fileinput } from "sigpro-ui"; - -Fileinput({ - max: 5, // Max size in MB - accept: "image/*", - onSelect: (files) => console.log(files) -}); -``` - ---- - -## Styling Customization - -SigPro UI comes with **Tailwind CSS v4 + daisyUI v5** pre-bundled. You can customize the theme by overriding CSS variables: - -```css -/* Override default theme colors */ -:root { - --color-primary: oklch(45% .24 277.023); - --color-secondary: oklch(65% .241 354.308); - --color-accent: oklch(77% .152 181.912); -} - -/* Or use data attributes for dark/light mode */ -[data-theme="dark"] { - --color-base-100: oklch(25.33% .016 252.42); - --color-primary: oklch(58% .233 277.117); -} -``` - ---- - ## License MIT © 2026 **SigPro Team**