@microlight/core 0.10.0 → 0.11.0

package/dist/server/components/Link.js

@@ -1,12 +1,12 @@
 'use client';
 
 import React from 'react';
-import { Link as JoyLink } from '@mui/joy';
 import NextLink from 'next/link';
 import PropTypes from 'prop-types';
+import { cn } from "../utils/css/cn";
 export default function Link({
   href = '/',
-  sx = {},
+  className = '',
   target = '_self',
   onClick = () => {},
   children,
@@ -18,33 +18,24 @@ export default function Link({
         if (onClick) {
           onClick(e);
         }
-      }} sx={sx}>
+      }} className={className}>
           {children}
         </Component>
       </NextLink>;
   }
-  const defaultSx = {
-    backgroundColor: "transparent",
-    "&:hover": {
-      backgroundColor: "none"
-    }
-  };
-  return <JoyLink color="neutral" component={NextLink} underline="none" target={target} href={href} sx={{
-    ...defaultSx,
-    ...sx
-  }} onClick={e => {
+  return <NextLink href={href} target={target} className={cn("text-foreground no-underline bg-transparent hover:bg-transparent", className)} onClick={e => {
     if (onClick) {
       onClick(e);
     }
   }}>
       {children}
-    </JoyLink>;
+    </NextLink>;
 }
 
 // For Storybook Documentation
 Link.propTypes = {
   children: PropTypes.node.isRequired,
-  sx: PropTypes.object,
+  className: PropTypes.string,
   onClick: PropTypes.func,
   Component: PropTypes.elementType,
   href: PropTypes.string.isRequired,

package/dist/server/components/MLInput.js

@@ -1,29 +1,26 @@
-import { FormControl, FormLabel, Input, Select, Option } from "@mui/joy";
+import { Label } from "./ui/label";
+import { Input } from "./ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 export default function MLInput({
   def,
   slug,
   searchParams
 }) {
-  return <>
-    <FormControl required={def.required} sx={{
-      mb: 2
-    }}>
-      <FormLabel sx={{
-        mb: 0.25
-      }}>{def.name}:</FormLabel>
-      {['string', 'number', 'date'].includes(def.type) && <Input size="sm" name={slug} placeholder={def.placeholder} defaultValue={searchParams[slug] || def.default || ""} type={def.type} />}
-      {def.type === 'file' &&
-      // Placeholder for future file input implementation
-      <Input size="sm" name={slug} placeholder={def.placeholder} type="file"
-      // Add any file-specific props here
-      />}
-      {def.type === 'dropdown' && <Select size="sm" name={slug} placeholder={def.placeholder} defaultValue={searchParams[slug] || def.default || ""}>
-          {def.options?.map(option => <Option key={option.value} value={option.value}>
-              {option.label || option.value}
-            </Option>)}
+  return <div className="mb-4">
+      <Label className="mb-1 block">
+        {def.name}:{def.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      {['string', 'number', 'date'].includes(def.type) && <Input size="sm" name={slug} placeholder={def.placeholder} defaultValue={searchParams[slug] || def.default || ""} type={def.type === 'string' ? 'text' : def.type} required={def.required} />}
+      {def.type === 'file' && <Input size="sm" name={slug} placeholder={def.placeholder} type="file" required={def.required} />}
+      {def.type === 'dropdown' && <Select name={slug} defaultValue={searchParams[slug] || def.default || ""} required={def.required}>
+          <SelectTrigger size="sm">
+            <SelectValue placeholder={def.placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {def.options?.map(option => <SelectItem key={option.value} value={option.value}>
+                {option.label || option.value}
+              </SelectItem>)}
+          </SelectContent>
         </Select>}
-    </FormControl>
-    {/* string input - {slug} <br/> */}
-    {/* <pre>{JSON.stringify(def,null,2)}</pre> */}
-  </>;
+    </div>;
 }

package/dist/server/components/Navbar/Navbar.js

@@ -2,68 +2,31 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-// import Logo from '../Logo';
-import { Box, Sheet, Button } from '@mui/joy';
+import { Button } from "../ui/button";
 export default function Navbar({
   user,
   signOut
 }) {
   const pathname = usePathname();
-  return <Sheet component="nav" sx={{
-    px: 1,
-    // py: 0.5,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    // boxShadow: 'sm',
-    borderBottom: '1px solid',
-    borderColor: 'divider',
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: '40px',
-    zIndex: 1000,
-    bgcolor: 'background.surface'
-    // bgcolor: 'white',
-  }}>
-			<Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 2
-    }}>
-				{/* <Logo offering='Transactions' /> */}
-				<Link href="/" style={{
-        textDecoration: 'none',
-        color: 'inherit'
-      }}>
-					<Box sx={{
-          fontWeight: 'bold'
-        }}>Microlight</Box>
+  return <nav className="px-2 flex items-center justify-between border-b border-border fixed top-0 left-0 right-0 h-10 z-[1000] bg-background">
+			<div className="flex items-center gap-4">
+				<Link href="/" className="no-underline text-inherit">
+					<span className="font-bold">Microlight</span>
 				</Link>
 
-				<Box sx={{
-        display: 'flex',
-        gap: 1
-      }}>
-					<Link href="/library" style={{
-          textDecoration: 'none'
-        }}>
-						<Button variant={pathname?.startsWith('/library') ? 'solid' : 'plain'} size="sm" color="neutral">
+				<div className="flex gap-2">
+					<Link href="/library" className="no-underline">
+						<Button variant={pathname?.startsWith('/library') ? 'default' : 'ghost'} size="sm">
 							Library
 						</Button>
 					</Link>
 
-					<Link href="/monitoring" style={{
-          textDecoration: 'none'
-        }}>
-						<Button variant={pathname?.startsWith('/monitoring') ? 'solid' : 'plain'} size="sm" color="neutral">
+					<Link href="/monitoring" className="no-underline">
+						<Button variant={pathname?.startsWith('/monitoring') ? 'default' : 'ghost'} size="sm">
 							Monitoring
 						</Button>
 					</Link>
-				</Box>
-			</Box>
-
-		</Sheet>;
-}
-;
+				</div>
+			</div>
+		</nav>;
+}

package/dist/server/components/Navbar/NavbarContainer.js

@@ -1,26 +1,13 @@
 import Navbar from "./Navbar";
-import { Box } from "@mui/joy";
 export default function NavbarContainer({
   children
 }) {
   return <>
-    <Navbar /> 
-    <Box component="main" sx={{
-      pt: '40px',
-      display: 'flex'
-    }}>
-      <Box sx={{
-        flex: 1,
-        px: {
-          xs: 1,
-          sm: 1.5
-        },
-        pt: 0.5,
-        pb: 0,
-        minWidth: 0
-      }}>
-        {children}
-      </Box>
-    </Box>
-  </>;
+      <Navbar />
+      <main className="pt-10 flex">
+        <div className="flex-1 px-2 sm:px-3 pt-1 pb-0 min-w-0">
+          {children}
+        </div>
+      </main>
+    </>;
 }

package/dist/server/components/PageHeader.js

@@ -1,31 +1,24 @@
 'use client';
 
 import React from 'react';
-import { Box, Typography, Breadcrumbs } from '@mui/joy';
-import { Link as JoyLink } from '@mui/joy';
 import NextLink from 'next/link';
-
-// Create a basic link component in switchless and import it here
-const BreadcrumbLink = ({
-  href,
-  children
-}) => {
-  return <JoyLink color="primary" component={NextLink} href={href}>
-			{children}
-		</JoyLink>;
-};
+import { Typography } from "./ui/typography";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./ui/breadcrumb";
 const BreadcrumbsCustom = function ({
   breadcrumbs
 }) {
-  return <Breadcrumbs separator="›" aria-label="breadcrumbs" sx={{
-    p: 0
-  }}>
-			{breadcrumbs.map((b, index) => <React.Fragment key={index}>
-					{b.href ? <BreadcrumbLink key={b.href} href={b.href}>
-							{b.text}
-						</BreadcrumbLink> : <Typography key={b.text}>{b.text}</Typography>}
-				</React.Fragment>)}
-		</Breadcrumbs>;
+  return <Breadcrumb>
+			<BreadcrumbList>
+				{breadcrumbs.map((b, index) => <React.Fragment key={index}>
+						{index > 0 && <BreadcrumbSeparator>›</BreadcrumbSeparator>}
+						<BreadcrumbItem>
+							{b.href ? <BreadcrumbLink asChild>
+									<NextLink href={b.href}>{b.text}</NextLink>
+								</BreadcrumbLink> : <BreadcrumbPage>{b.text}</BreadcrumbPage>}
+						</BreadcrumbItem>
+					</React.Fragment>)}
+			</BreadcrumbList>
+		</Breadcrumb>;
 };
 export default function PageHeader({
   header = "PageHeader",
@@ -37,51 +30,26 @@ export default function PageHeader({
   if (headerLevel) level = headerLevel;
   const renderHeader = () => {
     if (React.isValidElement(header)) {
-      return header; // Return React component as is
+      return header;
     } else if (typeof header === 'string') {
       return <Typography level={level}>{header}</Typography>;
     } else if (typeof header === 'object') {
       const headerParts = Object.values(header);
       return <Typography level={level}>
-					{headerParts.length === 1 ? <span>
-							{headerParts[0]}
-						</span> : headerParts.map((part, index) => <span key={index} style={{
-          opacity: index === 1 ? 1 : 0.5
-        }}>
+					{headerParts.length === 1 ? <span>{headerParts[0]}</span> : headerParts.map((part, index) => <span key={index} className={index === 1 ? 'opacity-100' : 'opacity-50'}>
 								{part}{index < headerParts.length - 1 && ' '}
 							</span>)}
 				</Typography>;
     }
     return null;
   };
-  return <Box data-cy='page-header' sx={{
-    display: 'flex',
-    flexDirection: {
-      xs: 'column',
-      sm: 'row'
-    },
-    alignItems: {
-      xs: 'flex-start',
-      sm: 'center'
-    },
-    gap: {
-      xs: 1,
-      sm: 1
-    },
-    pt: 0.5
-  }}>
-			<Box sx={{
-      flexGrow: 1
-    }}>
+  return <div data-cy='page-header' className="flex flex-col sm:flex-row items-start sm:items-center gap-2 pt-1">
+			<div className="flex-grow">
 				{breadcrumbs && <BreadcrumbsCustom breadcrumbs={breadcrumbs} />}
 				{renderHeader()}
-			</Box>
-			{RightButtons && <Box sx={{
-      flexGrow: 0,
-      width: 'auto',
-      margin: "auto 0"
-    }}>
+			</div>
+			{RightButtons && <div className="flex-shrink-0 my-auto">
 					{typeof RightButtons === 'function' ? <RightButtons /> : RightButtons}
-				</Box>}
-		</Box>;
+				</div>}
+		</div>;
 }

package/dist/server/components/StatusChip.js

@@ -1,11 +1,11 @@
-import { Chip } from '@mui/joy';
-function chipStatusColor(status) {
-  if (status === 'complete') return 'success';else if (status === 'pending') return 'warning';else if (status === 'running') return 'primary';else return 'danger';
+import { Badge } from "./ui/badge";
+function chipStatusVariant(status) {
+  if (status === 'complete') return 'success';else if (status === 'pending') return 'warning';else if (status === 'running') return 'default';else return 'destructive';
 }
 export default function StatusChip({
   status
 }) {
-  return <Chip variant="soft" color={chipStatusColor(status)} size="sm">
+  return <Badge variant={chipStatusVariant(status)}>
       {status || 'pending'}
-    </Chip>;
+    </Badge>;
 }

package/dist/server/components/ui/alert.js

@@ -0,0 +1,61 @@
+// @ts-check
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/css/cn";
+const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground border-border",
+      destructive: "text-destructive bg-destructive/10 border-destructive/20 [&>svg]:text-destructive *:data-[slot=alert-description]:text-destructive/90",
+      warning: "text-amber-600 bg-amber-50 border-amber-200 [&>svg]:text-amber-600 *:data-[slot=alert-description]:text-amber-600/90 dark:text-amber-400 dark:bg-amber-950/20 dark:border-amber-800/20 dark:[&>svg]:text-amber-400",
+      success: "text-green-600 bg-green-50 border-green-200 [&>svg]:text-green-600 *:data-[slot=alert-description]:text-green-600/90 dark:text-green-400 dark:bg-green-950/20 dark:border-green-800/20 dark:[&>svg]:text-green-400"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+/**
+ * @param {{
+ *   className?: string,
+ *   variant?: 'default' | 'destructive' | 'warning' | 'success'
+ * } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return <div data-slot="alert" role="alert" className={cn(alertVariants({
+    variant
+  }), className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function AlertTitle({
+  className,
+  ...props
+}) {
+  return <div data-slot="alert-title" className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return <div data-slot="alert-description" className={cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className)} {...props} />;
+}
+export { Alert, AlertTitle, AlertDescription };

package/dist/server/components/ui/badge.js

@@ -0,0 +1,37 @@
+// @ts-check
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/css/cn";
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-red-100 text-red-800 hover:bg-red-200",
+      outline: "text-foreground",
+      warning: "border-transparent bg-yellow-100 text-yellow-800 hover:bg-yellow-200",
+      success: "border-transparent bg-green-100 text-green-800 hover:bg-green-200"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+/**
+ * @param {{
+ *   className?: string,
+ *   variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'warning' | 'success'
+ * } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return <div className={cn(badgeVariants({
+    variant
+  }), className)} {...props} />;
+}
+export { Badge, badgeVariants };

package/dist/server/components/ui/breadcrumb.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {React.ComponentProps<"nav">} props
+ */
+function Breadcrumb({
+  ...props
+}) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+/**
+ * @param {React.ComponentProps<"ol">} props
+ */
+function BreadcrumbList({
+  className,
+  ...props
+}) {
+  return <ol data-slot="breadcrumb-list" className={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)} {...props} />;
+}
+
+/**
+ * @param {React.ComponentProps<"li">} props
+ */
+function BreadcrumbItem({
+  className,
+  ...props
+}) {
+  return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
+}
+
+/**
+ * @param {React.ComponentProps<"a"> & { asChild?: boolean }} props
+ */
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return <Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props} />;
+}
+
+/**
+ * @param {React.ComponentProps<"span">} props
+ */
+function BreadcrumbPage({
+  className,
+  ...props
+}) {
+  return <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" className={cn("text-foreground font-normal", className)} {...props} />;
+}
+
+/**
+ * @param {React.ComponentProps<"li">} props
+ */
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+      {children ?? <ChevronRight />}
+    </li>;
+}
+
+/**
+ * @param {React.ComponentProps<"span">} props
+ */
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" className={cn("flex size-9 items-center justify-center", className)} {...props}>
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>;
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

package/dist/server/components/ui/button.js

@@ -0,0 +1,65 @@
+// @ts-check
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { cn } from "../../utils/css/cn";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+      destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+
+/**
+ * @param {{
+ *   className?: string,
+ *   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link',
+ *   size?: 'default' | 'sm' | 'lg' | 'icon',
+ *   asChild?: boolean,
+ *   loading?: boolean,
+ *   disabled?: boolean,
+ *   children?: React.ReactNode
+ * } & React.ButtonHTMLAttributes<HTMLButtonElement>} props
+ * @returns {React.JSX.Element}
+ */
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  children,
+  disabled,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const content = <>
+      {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+      {children}
+    </>;
+  return <Comp data-slot="button" className={cn(buttonVariants({
+    variant,
+    size,
+    className
+  }))} disabled={disabled || loading} {...props}>
+      {asChild ? <span className="inline-flex items-center gap-2">{content}</span> : content}
+    </Comp>;
+}
+export { Button, buttonVariants };