@tan-ahmed/tan-ui-kit 0.1.7 → 0.1.9

package/README.md

@@ -31,32 +31,11 @@ npm install @tan-ahmed/tan-ui-kit
 
 See [INSTALLATION_TROUBLESHOOTING.md](./INSTALLATION_TROUBLESHOOTING.md) for more details.
 
-## Peer Dependencies
-
-This package requires the following peer dependencies:
-
-- `react`: ^18.0.0 || ^19.0.0
-- `react-dom`: ^18.0.0 || ^19.0.0
-
-All other dependencies (base-ui, class-variance-authority, clsx, tailwind-merge) are bundled with the library, so you don't need to install them separately.
-
-## Setup
-
-### 1. Configure Tailwind CSS v4
-
-This package uses **Tailwind CSS v4**. In your main CSS file (e.g., `src/index.css` or `src/main.css`), add:
-
-```css
-@import "tailwindcss";
-
-/* Your other styles... */
-```
-
-**That's it!** The package includes pre-generated CSS with all utility classes, so no additional configuration is needed.
+## Usage
 
-### 2. Import the Component and Styles
+### 1. Import styles in your entry file
 
-**Important:** Import the styles in your main entry point file:
+Import the styles once in your main entry point file:
 
 - **React (Vite/CRA)**: `src/main.tsx` or `src/index.tsx`
 - **Next.js (App Router)**: `app/layout.tsx` or `app/page.tsx`
@@ -66,20 +45,14 @@ This package uses **Tailwind CSS v4**. In your main CSS file (e.g., `src/index.c
 
 ```tsx
 // In your main entry point file (e.g., src/main.tsx, app.tsx, etc.)
-import "@tan-ahmed/tan-ui-kit/styles"; // ⚠️ Import this at the top of your entry file
-import { Button } from "@tan-ahmed/tan-ui-kit";
-
-function App() {
-  return <Button variant="destructive">Click me</Button>;
-}
+import "@tan-ahmed/tan-ui-kit/styles";
 ```
 
-## Usage
+### 2. Use components anywhere
 
-Import the styles once in your main entry point file (see Setup section above), then use components anywhere:
+After importing the styles, you can use components anywhere in your app:
 
 ```tsx
-// In your component files, you only need to import the component
 import { Button } from "@tan-ahmed/tan-ui-kit";
 
 function MyComponent() {
@@ -87,20 +60,21 @@ function MyComponent() {
 }
 ```
 
-## Development
+### Next.js App Router
 
-```bash
-# Install dependencies
-pnpm install
-
-# Start dev server
-pnpm dev
+This library is fully compatible with Next.js App Router. Components are automatically marked as Client Components, so you don't need to add `"use client"` directives when importing them:
 
-# Build
-pnpm build
+```tsx
+// app/page.tsx - No "use client" needed!
+import { Button } from "@tan-ahmed/tan-ui-kit";
 
-# Lint
-pnpm lint
+export default function Home() {
+  return (
+    <div>
+      <Button variant="destructive">Click me</Button>
+    </div>
+  );
+}
 ```
 
 ## License

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA4BnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA4BnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tan-ahmed/tan-ui-kit",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A React component library built with Tailwind CSS v4 and base-ui components",
   "type": "module",
   "module": "./dist/tan-ui-kit.es.js",
@@ -17,7 +17,11 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/components",
+    "src/lib",
+    "src/index.ts",
+    "README.md"
   ],
   "repository": {
     "type": "git",

package/src/components/ui/button.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/index.ts

@@ -0,0 +1,6 @@
+// Note: index.css is NOT imported here - it's pre-generated during build
+// The CSS is included in dist/tan-ui-kit.css via the build:css script
+
+// Export shadcn button
+export { Button, buttonVariants } from "./components/ui/button";
+// export type { ButtonProps } from "./components/ui/button";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}