@sntxindu/ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Syntax Industries, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,145 @@
+# @syntax-industries/ui
+
+Enterprise-grade React UI component library built with Radix UI and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @syntax-industries/ui
+# or
+yarn add @syntax-industries/ui
+# or
+pnpm add @syntax-industries/ui
+```
+
+## Peer Dependencies
+
+Make sure you have the following installed:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Setup
+
+### 1. Import the CSS
+
+In your main application file (e.g., `_app.tsx` or `layout.tsx`):
+
+```tsx
+import '@syntax-industries/ui/styles.css'
+```
+
+### 2. Configure Tailwind
+
+Add the component library to your `tailwind.config.js`:
+
+```js
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@syntax-industries/ui/dist/**/*.{js,mjs}',
+  ],
+  // ... rest of your config
+}
+```
+
+## Usage
+
+### Import Components
+
+```tsx
+import { Button, Card, Badge } from '@syntax-industries/ui'
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+        <CardDescription>Get started with Syntax Industries UI</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Your content here</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Get Started</Button>
+        <Badge>New</Badge>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+### Individual Component Imports
+
+For better tree-shaking, you can import components individually:
+
+```tsx
+import { Button } from '@syntax-industries/ui/components/button'
+import { Card } from '@syntax-industries/ui/components/card'
+```
+
+## Available Components
+
+- **Buttons**: `Button`, `ButtonGroup`
+- **Cards**: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`
+- **Forms**: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `Label`
+- **Feedback**: `Alert`, `Badge`, `Progress`, `Spinner`, `Skeleton`, `Tooltip`
+- **Navigation**: `Breadcrumb`, `Pagination`, `Tabs`, `Accordion`
+- **Overlays**: `Dialog`, `Sheet`, `Popover`, `HoverCard`, `DropdownMenu`, `ContextMenu`
+- **Data Display**: `Table`, `Avatar`, `Calendar`, `ScrollArea`
+- **Layout**: `Separator`, `Collapsible`, `ResizablePanel`
+- **Controls**: `Toggle`, `ToggleGroup`, `Combobox`, `Command`
+- **Typography**: `Kbd`
+
+## Theming
+
+The components use CSS variables for theming. You can customize the theme in your global CSS:
+
+```css
+:root {
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  /* ... other variables */
+}
+
+.dark {
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  /* ... other variables */
+}
+```
+
+## Component Customization
+
+All components accept a `className` prop for custom styling:
+
+```tsx
+<Button className="custom-class">
+  Custom Styled Button
+</Button>
+```
+
+## TypeScript Support
+
+Full TypeScript support with type definitions included.
+
+```tsx
+import type { ButtonProps } from '@syntax-industries/ui'
+
+const MyButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />
+}
+```
+
+## License
+
+MIT © Syntax Industries, Inc.
+
+## Support
+
+For issues and feature requests, please visit our [GitHub repository](https://github.com/syntax-industries/ui).