bmj-ui 1.0.2 → 1.0.4

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "bmj-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Headless component library meticulously crafted for rapid dashboard development. Professional, polished, and ready for production.",
   "license": "ISC",
   "author": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "rollup": "rollup -c --bundleConfigAsCjs"

package/src/components/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Moon, Sun } from "lucide-react";
-import { Button } from "./ui/button";
+import { Button } from "./ui/button.tsx";
 
 export function ThemeToggle({ className }: { className?: string }) {
   const [theme, setTheme] = React.useState<"light" | "dark">(() => {

package/src/components/bmj-ui/AppSidebar.tsx

@@ -11,7 +11,7 @@ import {
   SidebarGroupLabel,
   SidebarGroupContent,
   useSidebar,
-} from "../ui/sidebar";
+} from "../ui/sidebar.tsx";
 import {
   LayoutDashboard,
   Settings,

package/src/components/bmj-ui/ChartCard.tsx

@@ -4,8 +4,8 @@ import {
   CardHeader,
   CardTitle,
   CardDescription,
-} from "../ui/card";
-import { Skeleton } from "../ui/skeleton";
+} from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.tsx";
 import {
   ResponsiveContainer,
   AreaChart,
@@ -21,7 +21,7 @@ import {
   Tooltip,
   CartesianGrid,
 } from "recharts";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 interface ChartCardProps {
   title: string;

package/src/components/bmj-ui/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { SidebarProvider, SidebarInset } from "../ui/sidebar";
-import { AppSidebar, SidebarItem } from "./AppSidebar";
-import { Topbar } from "./Topbar";
+import { SidebarProvider, SidebarInset } from "../ui/sidebar.tsx";
+import { AppSidebar, SidebarItem } from "./AppSidebar.tsx";
+import { Topbar } from "./Topbar.tsx";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;

package/src/components/bmj-ui/StatCard.tsx

@@ -1,7 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { Skeleton } from "../ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.tsx";
+import { Skeleton } from "../ui/skeleton.tsx";
 import { TrendingUp, TrendingDown, LucideIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 import { motion } from "motion/react";
 
 interface StatCardProps {

package/src/components/bmj-ui/Topbar.tsx

@@ -1,5 +1,5 @@
-import { SidebarTrigger } from "../ui/sidebar";
-import { ThemeToggle } from "../ThemeToggle";
+import { SidebarTrigger } from "../ui/sidebar.tsx";
+import { ThemeToggle } from "../ThemeToggle.tsx";
 import {
   Search,
   Bell,
@@ -9,8 +9,8 @@ import {
   Zap,
   LogOut,
 } from "lucide-react";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
+import { Input } from "../ui/input.tsx";
+import { Button } from "../ui/button.tsx";
 import { toast } from "sonner";
 import {
   DropdownMenu,
@@ -20,7 +20,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
+} from "../ui/dropdown-menu.tsx";
 
 export function Topbar() {
   const handleItemClick = (label: string) => {

package/src/components/bmj-ui/index.ts

@@ -1,5 +1,5 @@
-export * from "./DashboardLayout";
-export * from "./StatCard";
-export * from "./ChartCard";
-export * from "./AppSidebar";
-export * from "./Topbar";
+export * from "./DashboardLayout.tsx";
+export * from "./StatCard.tsx";
+export * from "./ChartCard.tsx";
+export * from "./AppSidebar.tsx";
+export * from "./Topbar.tsx";

package/src/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 const badgeVariants = cva(
   "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",

package/src/components/ui/button.tsx

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function Card({
   className,

package/src/components/ui/dialog.tsx

@@ -3,8 +3,8 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
+import { cn } from "../../lib/utils.tsx";
+import { Button } from "./button.tsx";
 import { XIcon } from "lucide-react";
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {

package/src/components/ui/dropdown-menu.tsx

@@ -1,9 +1,7 @@
-"use client";
-
 import * as React from "react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 import { ChevronRightIcon, CheckIcon } from "lucide-react";
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {

package/src/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Input as InputPrimitive } from "@base-ui/react/input";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (

package/src/components/ui/scroll-area.tsx

@@ -1,6 +1,6 @@
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function ScrollArea({
   className,

package/src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 
 const Select = SelectPrimitive.Root;

package/src/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function Separator({
   className,

package/src/components/ui/sheet.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
+import { cn } from "../../lib/utils.tsx";
+import { Button } from "./button.tsx";
 import { XIcon } from "lucide-react";
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {

package/src/components/ui/sidebar.tsx

@@ -5,20 +5,20 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { useIsMobile } from "../../hooks/use-mobile";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Separator } from "./separator";
+import { useIsMobile } from "../../hooks/use-mobile.tsx";
+import { cn } from "../../lib/utils.tsx";
+import { Button } from "./button.tsx";
+import { Input } from "./input.tsx";
+import { Separator } from "./separator.tsx";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "./sheet";
-import { Skeleton } from "./skeleton";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+} from "./sheet.tsx";
+import { Skeleton } from "./skeleton.tsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.tsx";
 import { PanelLeftIcon } from "lucide-react";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";

package/src/components/ui/skeleton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/ui/table.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (

package/src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function Tabs({
   className,

package/src/components/ui/tooltip.tsx

@@ -2,7 +2,7 @@
 
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.tsx";
 
 function TooltipProvider({
   delay = 0,

package/src/index.ts

@@ -1,7 +1,7 @@
-import { AppSidebar } from "./components/bmj-ui/AppSidebar";
-import { ChartCard } from "./components/bmj-ui/ChartCard";
-import { DashboardLayout } from "./components/bmj-ui/DashboardLayout";
-import { StatCard } from "./components/bmj-ui/StatCard";
-import { Topbar } from "./components/bmj-ui/Topbar";
+import { AppSidebar } from "./components/bmj-ui/AppSidebar.tsx";
+import { ChartCard } from "./components/bmj-ui/ChartCard.tsx";
+import { DashboardLayout } from "./components/bmj-ui/DashboardLayout.tsx";
+import { StatCard } from "./components/bmj-ui/StatCard.tsx";
+import { Topbar } from "./components/bmj-ui/Topbar.tsx";
 
 export { AppSidebar, ChartCard, DashboardLayout, StatCard, Topbar };

package/tsconfig.json

@@ -16,7 +16,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true
   },
   "include": ["src"]
 }