brd-ui-kit 0.0.5 → 0.0.6

package/README.md

@@ -1,150 +1,77 @@
-brd-ui-kit 🎨
-Modern React component library built with Tailwind CSS v4 and TypeScript.
+# brd-ui-kit
 
-📦 Installation
-bash
+Modern React component library with Tailwind CSS v4 and TypeScript.
+
+## Installation
+
+```bash
 npm install brd-ui-kit
 # or
 pnpm add brd-ui-kit
 # or
 yarn add brd-ui-kit
-🚀 Quick Start
-1. Import styles (choose one option)
-Option A: Import all styles at once (recommended)
+```
 
-jsx
-// In your app's entry file (main.jsx, App.jsx, or layout.jsx)
-import 'brd-ui-kit/styles.css';
-Option B: Import theme separately
+## Quick Start
 
-jsx
-import 'brd-ui-kit/theme.css'; // only theme variables
-import 'brd-ui-kit/styles.css'; // all styles
-2. Use components
-jsx
-import { Button, Card, Input } from 'brd-ui-kit';
+```jsx
+import 'brd-ui-kit/styles.css';
+import { Button, Card } from 'brd-ui-kit';
 
 function App() {
   return (
-    <Card className="p-4">
-      <h2 className="text-lg font-medium mb-4">Login</h2>
-      <Input placeholder="Email" className="mb-2" />
-      <Input type="password" placeholder="Password" className="mb-4" />
-      <Button variant="primary">Sign In</Button>
+    <Card>
+      <Button>Click me</Button>
     </Card>
   );
 }
-🎨 Tailwind CSS Setup
-If your project uses Tailwind CSS, add the package to your tailwind.config.js:
+```
+
+## Tailwind Setup
 
-js
+```js
+// tailwind.config.js
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/brd-ui-kit/**/*.{js,ts,jsx,tsx}", // 👈 important!
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    "./node_modules/brd-ui-kit/**/*.{js,ts,jsx,tsx}"
+  ]
 }
-📚 Components
-Available components:
-Component	Description
-Badge	Status and label badges
-Button	Primary, secondary, outline variants
-Card	Content containers
-Checkbox	Checkbox input
-Combobox	Autocomplete dropdown
-Dialog	Modal dialogs
-Field	Form field wrapper
-Icon	Icon component
-Input	Text input
-InputGroup	Grouped inputs
-Label	Form labels
-NavigationItem	Navigation items
-NavigationMenu	Navigation menus
-Pagination	Pagination controls
-Progress	Progress indicators
-RadioGroup	Radio buttons
-Separator	Divider lines
-Switch	Toggle switches
-Table	Data tables
-Tabs	Tabbed interfaces
-Textarea	Multi-line input
-Tooltip	Tooltips
-Typography	Text styles
-💡 Examples
-Button variants
-jsx
-<Button variant="primary">Primary</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="danger">Danger</Button>
-Form with validation
-jsx
-import { Field, Input, Button } from 'brd-ui-kit';
+```
 
-function LoginForm() {
-  return (
-    <Field>
-      <FieldLabel>Email</FieldLabel>
-      <Input type="email" placeholder="Enter your email" />
-      <FieldError>Email is required</FieldError>
-    </Field>
-  );
-}
-Dialog/Modal
-jsx
-import { Dialog, DialogTrigger, DialogContent, Button } from 'brd-ui-kit';
+## Components
+
+- `Button` — Primary, secondary, outline, ghost
+- `Card` — Content containers
+- `Input` — Text input
+- `Dialog` — Modal dialogs
+- `Tabs` — Tabbed interfaces
+- `Table` — Data tables
+- `Tooltip` — Tooltips
+- `Badge` — Status indicators
+- `Checkbox` — Checkbox input
+- `Switch` — Toggle switches
+- `RadioGroup` — Radio buttons
+- `Combobox` — Autocomplete dropdown
+
+## Examples
+
+```jsx
+import { Button } from 'brd-ui-kit';
 
 function Example() {
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogTitle>Confirm Action</DialogTitle>
-        <DialogDescription>
-          Are you sure you want to proceed?
-        </DialogDescription>
-        <DialogFooter>
-          <Button variant="outline">Cancel</Button>
-          <Button>Confirm</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+    </>
   );
 }
-🎯 TypeScript
-All components are fully typed:
-
-tsx
-import type { ButtonProps, InputProps } from 'brd-ui-kit';
-
-function CustomButton(props: ButtonProps) {
-  return <Button {...props} />;
-}
-🔧 Development
-bash
-# Install dependencies
-npm install
-
-# Run Storybook
-npm run storybook
-
-# Build the library
-npm run build
-
-# Lint and format
-npm run lint
-npm run format
-📄 License
-MIT © vladislav_mr
+```
 
-Made with ❤️ using React + TypeScript + Tailwind CSS v4
+## License
 
+MIT © vladislav_mr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brd-ui-kit",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "private": false,
   "scripts": {
@@ -19,7 +19,7 @@
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-"exports": {
+  "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
       "require": "./src/styles/globals.css"
     },
     "./style.css": {
-      "import": "./src/styles/globals.css", 
+      "import": "./src/styles/globals.css",
       "require": "./src/styles/globals.css"
     },
     "./src/styles/globals.css": {
@@ -45,7 +45,7 @@
     "dist",
     "README.md",
     "src/styles/globals.css",
-    "src/styles/theme.css"  
+    "src/styles/theme.css"
   ],
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -101,4 +101,4 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}