shadcn-ui-react 0.7.5 → 0.7.7

package/README.md

@@ -1,6 +1,6 @@
 # 🧩 shadcn-ui-react
 
-A modern React UI kit inspired by shadcn/ui. It includes accessible Radix primitives, production-ready shared components, form helpers for `react-hook-form`, Tailwind CSS styling, and reusable demos you can copy into your app.
+A production-ready React UI library that packages `shadcn/ui` components into a single reusable library, with Tailwind CSS styling, Radix UI primitives, form helpers, and ready-to-use demos.
 
 ---
 
@@ -22,11 +22,11 @@ npm install react react-dom
 
 ---
 
-## 🚀 Getting Started
+## 🚀 Getting started
 
-### 1. Import global styles
+### 1. Import the global styles
 
-In your `main.tsx`, `App.tsx`, or layout file:
+Import the package stylesheet once in your app entry file, layout, or root component.
 
 ```tsx
 import 'shadcn-ui-react/dist/style.css';
@@ -39,11 +39,9 @@ import { Button } from 'shadcn-ui-react';
 
 export default function App() {
   return (
-    <div className="p-6">
+    <div className="flex gap-3 p-6">
       <Button>Save</Button>
-      <Button variant="outline" className="ml-2">
-        Cancel
-      </Button>
+      <Button variant="outline">Cancel</Button>
     </div>
   );
 }
@@ -51,46 +49,103 @@ export default function App() {
 
 ---
 
-## 🏭 Production scripts
-
-```bash
-npm run typecheck
-npm run test
-npm run build
-```
-
-The package is configured as an ESM library and exports compiled CSS:
-
-```tsx
-import 'shadcn-ui-react/dist/style.css';
-import { Button, FormField, DataTable } from 'shadcn-ui-react';
-```
+## 🧱 Available Components
+
+### 📦 UI Primitives
+
+- `Accordion`
+- `Alert`
+- `AlertDialog`
+- `Avatar`
+- `Badge`
+- `Breadcrumb`
+- `Button`
+- `IconButton`
+- `Calendar`
+- `Card`
+- `Carousel`
+- `Checkbox`
+- `Collapsible`
+- `Command`
+- `ContextMenu`
+- `Dialog`
+- `Drawer`
+- `DropdownMenu`
+- `HoverCard`
+- `Input`
+- `InputOtp`
+- `Label`
+- `Menubar`
+- `Modal`
+- `NavigationMenu`
+- `Pagination`
+- `Popover`
+- `Progress`
+- `RadioGroup`
+- `Resizable`
+- `ScrollArea`
+- `Select`
+- `Separator`
+- `Sheet`
+- `Skeleton`
+- `Slider`
+- `Sonner`
+- `Switch`
+- `Table`
+- `Tabs`
+- `Textarea`
+- `Toast`
+- `Toaster`
+- `Toggle`
+- `ToggleGroup`
+- `Tooltip`
 
 ---
 
-## 🧱 Available components
-
-### UI primitives
+### 🧠 Forms
+
+- `Form`
+- `FormField`
+- `FormSelect`
+- `FormCheckbox`
+- `FormItem`
+- `FormControl`
+- `FormLabel`
+- `FormDescription`
+- `FormMessage`
+- `UiInput`
+- `UiSelect`
+- `UiCheckbox`
 
-`Accordion`, `Alert`, `AlertDialog`, `Avatar`, `Badge`, `Breadcrumb`, `Button`, `IconButton`, `Calendar`, `Card`, `Carousel`, `Checkbox`, `Collapsible`, `Command`, `ContextMenu`, `Dialog`, `Drawer`, `DropdownMenu`, `HoverCard`, `Input`, `InputOtp`, `Label`, `Menubar`, `Modal`, `NavigationMenu`, `Pagination`, `Popover`, `Progress`, `RadioGroup`, `Resizable`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Skeleton`, `Slider`, `Sonner`, `Switch`, `Table`, `Tabs`, `Textarea`, `Toast`, `Toaster`, `Toggle`, `ToggleGroup`, `Tooltip`.
-
-### Form helpers
+---
 
-`Form`, `FormField`, `FormSelect`, `FormCheckbox`, `FormItem`, `FormControl`, `FormLabel`, `FormDescription`, `FormMessage`, `UiInput`, `UiSelect`, `UiCheckbox`.
+### 🧩 Shared Components
 
-### Shared components
+- `AlertModal`
+- `Breadcrumbs`
+- `DataTable`
+- `DataTableSkeleton`
+- `Dropzone`
+- `FileUpload`
+- `Heading`
+- `PageHead`
+- `PaginationSection`
+- `SearchInput`
+- `SearchableSelect`
 
-`AlertModal`, `Breadcrumbs`, `DataTable`, `DataTableSkeleton`, `Dropzone`, `FileUpload`, `Heading`, `PageHead`, `PaginationSection`, `SearchInput`, `SearchableSelect`.
+---
 
-### Utilities
+### 🛠️ Utilities
 
-`cn`, `useToast`, `toast`, `Icons`, `useSidebar`.
+- `cn`
+- `useToast`
+- `toast`
+- `Icons`
+- `useSidebar`
 
 ---
 
-# ✨ Demos
-
-All demos use neutral sample data so they can be published in public documentation without referencing any private product, client, tenant, store, or internal business flow.
+## ✨ Demos
 
 ## 1. Button
 
@@ -228,7 +283,7 @@ import {
 
 const schema = z.object({
   name: z.string().min(2, 'Minimum 2 characters'),
-  email: z.string().email('Invalid email'),
+  email: z.string().email('Invalid email address'),
   password: z.string().min(8, 'Minimum 8 characters'),
   role: z.enum(['owner', 'editor', 'viewer']),
   accepted: z.boolean().refine(Boolean, 'You must accept the terms')
@@ -253,7 +308,11 @@ export function FormDemo() {
   };
 
   return (
-    <Form methods={form} onSubmit={onSubmit} formProps={{ className: 'space-y-4' }}>
+    <Form
+      methods={form}
+      onSubmit={onSubmit}
+      formProps={{ className: 'space-y-4' }}
+    >
       <FormField
         control={form.control}
         name="name"
@@ -326,8 +385,16 @@ export function SearchableSelectDemo() {
         { label: 'Apple', value: 'apple', keywords: 'fruit red green sweet' },
         { label: 'Banana', value: 'banana', keywords: 'fruit yellow tropical' },
         { label: 'Orange', value: 'orange', keywords: 'fruit citrus vitamin c' },
-        { label: 'Strawberry', value: 'strawberry', keywords: 'fruit berry red sweet' },
-        { label: 'Pineapple', value: 'pineapple', keywords: 'fruit tropical sweet' }
+        {
+          label: 'Strawberry',
+          value: 'strawberry',
+          keywords: 'fruit berry red sweet'
+        },
+        {
+          label: 'Pineapple',
+          value: 'pineapple',
+          keywords: 'fruit tropical sweet'
+        }
       ]}
     />
   );
@@ -350,7 +417,7 @@ export function AccordionDemo() {
       <AccordionItem value="item-1">
         <AccordionTrigger>What is included?</AccordionTrigger>
         <AccordionContent>
-          Accessible components, Tailwind styling, and reusable form helpers.
+          Accessible components, Tailwind CSS styling, and reusable form helpers.
         </AccordionContent>
       </AccordionItem>
     </Accordion>
@@ -447,6 +514,7 @@ const data: Project[] = [
 export function DataTableDemo() {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(5);
+
   const pageCount = Math.ceil(data.length / perPage);
   const visibleRows = data.slice((page - 1) * perPage, page * perPage);
 
@@ -540,7 +608,7 @@ export function ToastDemo() {
 
 ```tsx
 import { toast } from 'sonner';
-import { Button, ToasterSonner } from 'shadcn-ui-react';
+import { Button, Sonner } from 'shadcn-ui-react';
 
 export function SonnerDemo() {
   return (
@@ -548,7 +616,8 @@ export function SonnerDemo() {
       <Button onClick={() => toast.success('Operation completed')}>
         Notify
       </Button>
-      <ToasterSonner />
+
+      <Sonner />
     </>
   );
 }
@@ -569,11 +638,12 @@ export function CardDemo() {
   return (
     <Card className="max-w-md">
       <CardHeader>
-        <CardTitle className="flex items-center justify-between">
+        <CardTitle className="flex items-center justify-between gap-4">
           Starter Kit
           <Badge>New</Badge>
         </CardTitle>
       </CardHeader>
+
       <CardContent className="text-sm text-muted-foreground">
         A simple card example with a title, badge, and supporting description.
       </CardContent>
@@ -594,6 +664,7 @@ export function TabsDemo() {
         <TabsTrigger value="overview">Overview</TabsTrigger>
         <TabsTrigger value="settings">Settings</TabsTrigger>
       </TabsList>
+
       <TabsContent value="overview">General information goes here.</TabsContent>
       <TabsContent value="settings">Preferences and configuration go here.</TabsContent>
     </Tabs>
@@ -605,12 +676,28 @@ export function TabsDemo() {
 
 ## 💅 Theming
 
-This package uses Tailwind CSS variables. You can override the default theme from your app CSS:
+This package uses Tailwind CSS variables. You can override the default theme from your app CSS.
 
 ```css
 :root {
-  --primary: oklch(0.45 0.18 260);
-  --primary-foreground: oklch(0.98 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(64.12% 0.209 16.22);
+  --destructive-foreground: oklch(97.913% 0.00011 271.152);
+  --border: oklch(0.922 0 0);
+  --input: #fdfdfd;
+  --ring: 221.2 83.2% 53.3%;
+
   --radius: 0.75rem;
 }
 ```
@@ -619,4 +706,4 @@ This package uses Tailwind CSS variables. You can override the default theme fro
 
 ## 📝 License
 
-MIT.
+MIT.

package/dist/index.cjs

@@ -440,11 +440,11 @@ var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
   [
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "inline-flex min-w-max shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-md text-sm font-medium",
     "transition-all duration-200 active:scale-95",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2",
-    "disabled:pointer-events-none disabled:opacity-50",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
     "cursor-pointer select-none",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
   ].join(" "),
@@ -453,7 +453,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
       variant: {
         default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-primary bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
         link: "h-auto p-0 text-primary underline-offset-4 shadow-none hover:underline",
@@ -539,39 +539,29 @@ var Button = React3.forwardRef(
       className
     );
     const isDisabled = loading || disabled;
-    const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "inline-flex min-w-max flex-row items-center justify-center gap-2 whitespace-nowrap leading-none", children: [
       loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_lucide_react.Loader2,
         {
-          className: cn("size-4 animate-spin", loaderClassName),
+          className: cn("size-4 shrink-0 animate-spin", loaderClassName),
           "aria-hidden": "true"
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(loading && "opacity-90"), children })
+      children
     ] });
-    if (asChild) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_slot.Slot,
-        __spreadProps(__spreadValues({
-          ref,
-          className: classes,
-          "aria-disabled": isDisabled,
-          "data-loading": loading ? "true" : void 0
-        }, props), {
-          children
-        })
-      );
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "button",
+      Comp,
       __spreadProps(__spreadValues({
         ref,
-        type,
+        type: asChild ? void 0 : type,
         className: classes,
-        disabled: isDisabled,
+        disabled: asChild ? void 0 : isDisabled,
+        "aria-disabled": asChild ? isDisabled : void 0,
+        "aria-busy": loading ? true : void 0,
         "data-loading": loading ? "true" : void 0
       }, props), {
-        children: content
+        children: asChild ? children : content
       })
     );
   }

package/dist/index.js

@@ -153,14 +153,14 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import * as React3 from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva2(
   [
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "inline-flex min-w-max shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-md text-sm font-medium",
     "transition-all duration-200 active:scale-95",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2",
-    "disabled:pointer-events-none disabled:opacity-50",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
     "cursor-pointer select-none",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
   ].join(" "),
@@ -169,7 +169,7 @@ var buttonVariants = cva2(
       variant: {
         default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-primary bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
         link: "h-auto p-0 text-primary underline-offset-4 shadow-none hover:underline",
@@ -255,39 +255,29 @@ var Button = React3.forwardRef(
       className
     );
     const isDisabled = loading || disabled;
-    const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    const Comp = asChild ? Slot : "button";
+    const content = /* @__PURE__ */ jsxs2("span", { className: "inline-flex min-w-max flex-row items-center justify-center gap-2 whitespace-nowrap leading-none", children: [
       loading ? /* @__PURE__ */ jsx3(
         Loader2,
         {
-          className: cn("size-4 animate-spin", loaderClassName),
+          className: cn("size-4 shrink-0 animate-spin", loaderClassName),
           "aria-hidden": "true"
         }
       ) : null,
-      /* @__PURE__ */ jsx3("span", { className: cn(loading && "opacity-90"), children })
+      children
     ] });
-    if (asChild) {
-      return /* @__PURE__ */ jsx3(
-        Slot,
-        __spreadProps(__spreadValues({
-          ref,
-          className: classes,
-          "aria-disabled": isDisabled,
-          "data-loading": loading ? "true" : void 0
-        }, props), {
-          children
-        })
-      );
-    }
     return /* @__PURE__ */ jsx3(
-      "button",
+      Comp,
       __spreadProps(__spreadValues({
         ref,
-        type,
+        type: asChild ? void 0 : type,
         className: classes,
-        disabled: isDisabled,
+        disabled: asChild ? void 0 : isDisabled,
+        "aria-disabled": asChild ? isDisabled : void 0,
+        "aria-busy": loading ? true : void 0,
         "data-loading": loading ? "true" : void 0
       }, props), {
-        children: content
+        children: asChild ? children : content
       })
     );
   }
@@ -9267,7 +9257,7 @@ var AlertModal = ({
 
 // src/shared/breadcrumbs.tsx
 import { Slash } from "lucide-react";
-import { Fragment as Fragment2 } from "react";
+import { Fragment } from "react";
 import { jsx as jsx56, jsxs as jsxs29 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
@@ -9278,7 +9268,7 @@ function Breadcrumbs({
   return /* @__PURE__ */ jsx56(Breadcrumb, { className, children: /* @__PURE__ */ jsx56(BreadcrumbList, { className: classNameList, children: items.map((item, index) => {
     var _a;
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs29(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs29(Fragment, { children: [
       !isLast ? /* @__PURE__ */ jsx56(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ jsx56(BreadcrumbLink, { href: (_a = item.link) != null ? _a : "#", children: item.title }) }) : /* @__PURE__ */ jsx56(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ jsx56(BreadcrumbPage, { children: item.title }) }),
       !isLast ? /* @__PURE__ */ jsx56(BreadcrumbSeparator, { children: separator }) : null
     ] }, `${item.title}-${index}`);

package/dist/style.css

@@ -506,9 +506,6 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -747,6 +744,10 @@
   .min-w-full {
     min-width: 100%;
   }
+  .min-w-max {
+    min-width: -moz-max-content;
+    min-width: max-content;
+  }
   .flex-1 {
     flex: 1;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.3",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@eslint/config-array": "^0.23.5",