@microlight/core 0.10.0 → 0.11.0

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

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/css/cn";
+const tableVariants = cva("w-full caption-bottom text-sm", {
+  variants: {
+    variant: {
+      default: "",
+      compact: "[&_td]:py-2 [&_th]:py-2 [&_td]:px-2 [&_th]:px-2 [&_td]:text-sm [&_th]:text-xs"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+/** @type {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & { variant?: 'default' | 'compact' } & React.RefAttributes<HTMLTableElement>>} */
+const Table = React.forwardRef(({
+  className,
+  variant,
+  ...props
+}, ref) => <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn(tableVariants({
+    variant,
+    className
+  }))} {...props} />
+    </div>);
+Table.displayName = "Table";
+
+/** @type {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>} */
+const TableHeader = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />);
+TableHeader.displayName = "TableHeader";
+
+/** @type {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>} */
+const TableBody = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />);
+TableBody.displayName = "TableBody";
+
+/** @type {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>} */
+const TableFooter = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />);
+TableFooter.displayName = "TableFooter";
+
+/** @type {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>} */
+const TableRow = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />);
+TableRow.displayName = "TableRow";
+
+/** @type {React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>} */
+const TableHead = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />);
+TableHead.displayName = "TableHead";
+
+/** @type {React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>} */
+const TableCell = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />);
+TableCell.displayName = "TableCell";
+
+/** @type {React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>} */
+const TableCaption = React.forwardRef(({
+  className,
+  ...props
+}, ref) => <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />);
+TableCaption.displayName = "TableCaption";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, tableVariants };

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

@@ -0,0 +1,59 @@
+// @ts-check
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>} props
+ * @returns {React.JSX.Element}
+ */
+function Tabs({
+  className,
+  ...props
+}) {
+  return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>} props
+ * @returns {React.JSX.Element}
+ */
+function TabsList({
+  className,
+  ...props
+}) {
+  return <TabsPrimitive.List data-slot="tabs-list" className={cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>} props
+ * @returns {React.JSX.Element}
+ */
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return <TabsPrimitive.Trigger data-slot="tabs-trigger" className={cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>} props
+ * @returns {React.JSX.Element}
+ */
+function TabsContent({
+  className,
+  ...props
+}) {
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/css/cn";
+const typographyVariants = cva("",
+// base styles
+{
+  variants: {
+    variant: {
+      // Headings
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      // Title variants (from MUI Joy mapping)
+      "title-lg": "text-lg font-semibold leading-tight",
+      "title-md": "text-base font-medium leading-tight",
+      "title-sm": "text-sm font-medium leading-tight",
+      // Body text variants
+      "body-lg": "text-lg leading-7",
+      "body-md": "text-base leading-7",
+      "body-sm": "text-sm leading-6",
+      "body-xs": "text-xs leading-5",
+      // Special variants
+      lead: "text-xl text-muted-foreground",
+      large: "text-lg font-semibold",
+      small: "text-sm font-medium leading-none",
+      muted: "text-sm text-muted-foreground"
+    },
+    color: {
+      default: "",
+      muted: "text-muted-foreground",
+      success: "text-green-600",
+      warning: "text-yellow-600",
+      danger: "text-red-600",
+      primary: "text-primary",
+      neutral: "text-gray-600"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    }
+  },
+  defaultVariants: {
+    variant: "body-md",
+    color: "default"
+  }
+});
+
+/**
+ * @typedef {Object} TypographyOwnProps
+ * @property {React.ElementType} [as] - The component to render
+ * @property {'h1' | 'h2' | 'h3' | 'h4' | 'title-lg' | 'title-md' | 'title-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs'} [level] - Legacy MUI Joy level prop
+ * @property {React.ElementType} [component] - Legacy MUI Joy component prop
+ * @property {string} [className] - Custom className
+ * @property {React.ReactNode} [children] - Children content
+ * @property {'sm' | 'md' | 'lg' | 'xl'} [fontSize] - Legacy MUI Joy fontSize prop
+ * @property {'normal' | 'medium' | 'lg' | 'bold'} [fontWeight] - Legacy MUI Joy fontWeight prop
+ * @property {React.ReactNode} [startDecorator] - Element to render at the start
+ * @property {React.ReactNode} [endDecorator] - Element to render at the end
+ * @property {boolean} [noWrap] - Prevents text wrapping
+ * @property {React.CSSProperties | Object} [sx] - Style object
+ * @property {string} [title] - HTML title attribute
+ * @property {string} [variant] - Typography variant
+ * @property {'default' | 'muted' | 'success' | 'warning' | 'danger' | 'primary' | 'neutral'} [color] - Text color
+ * @property {'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'} [weight] - Font weight
+ * @property {'left' | 'center' | 'right' | 'justify'} [align] - Text alignment
+ */
+
+/** @typedef {TypographyOwnProps} TypographyProps */
+
+/**
+ * Get the default semantic element for a given variant/level
+ * @param {string | null} [variant]
+ * @param {string | null} [level]
+ * @returns {React.ElementType}
+ */
+function getDefaultElement(variant, level) {
+  const target = level || variant;
+  switch (target) {
+    case "h1":
+      return "h1";
+    case "h2":
+      return "h2";
+    case "h3":
+      return "h3";
+    case "h4":
+      return "h4";
+    case "title-lg":
+      return "h2";
+    case "title-md":
+      return "h3";
+    case "title-sm":
+      return "h4";
+    case "lead":
+      return "p";
+    case "large":
+      return "div";
+    case "small":
+      return "small";
+    case "muted":
+      return "p";
+    default:
+      return "p";
+  }
+}
+
+/**
+ * Convert legacy MUI Joy props to new variant system
+ * @param {TypographyProps} props
+ * @returns {string}
+ */
+function getLegacyVariant(props) {
+  // Handle legacy level prop
+  if (props.level) {
+    return props.level;
+  }
+
+  // Handle legacy fontSize + fontWeight combination
+  if (props.fontSize && props.fontWeight) {
+    if (props.fontSize === "md" && props.fontWeight === "lg") return "title-sm";
+    if (props.fontSize === "lg" && props.fontWeight === "lg") return "title-md";
+  }
+
+  // Handle standalone fontSize
+  if (props.fontSize) {
+    switch (props.fontSize) {
+      case "sm":
+        return "body-sm";
+      case "md":
+        return "body-md";
+      case "lg":
+        return "body-lg";
+      case "xl":
+        return "title-lg";
+    }
+  }
+  return props.variant || "body-md";
+}
+
+/**
+ * Convert legacy fontWeight to weight prop
+ * @param {string} [fontWeight]
+ * @returns {'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | undefined}
+ */
+function getLegacyWeight(fontWeight) {
+  switch (fontWeight) {
+    case "lg":
+      return "medium";
+    case "bold":
+      return "bold";
+    default:
+      return undefined;
+  }
+}
+
+/** @type {React.ForwardRefExoticComponent<TypographyProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>} */
+const Typography = React.forwardRef(({
+  as,
+  component,
+  level,
+  variant: variantProp,
+  color,
+  weight: weightProp,
+  align,
+  className,
+  fontSize,
+  fontWeight,
+  startDecorator,
+  endDecorator,
+  noWrap,
+  sx,
+  title,
+  children,
+  ...props
+}, ref) => {
+  // Handle legacy props
+  const variant = getLegacyVariant({
+    level,
+    variant: variantProp,
+    fontSize,
+    fontWeight
+  });
+  const weight = weightProp || getLegacyWeight(fontWeight);
+
+  // Determine the component to render
+  const Component = as || component || getDefaultElement(variant, level);
+
+  // Build className with noWrap support
+  const typographyClasses = cn(typographyVariants({
+    variant: variant,
+    color,
+    weight,
+    align
+  }), noWrap && "truncate whitespace-nowrap overflow-hidden", className);
+
+  // Handle sx prop by converting to inline styles (simplified approach)
+  const sxStyles = sx ? {
+    ...sx
+  } : undefined;
+
+  // If we have decorators, wrap in a flex container
+  if (startDecorator || endDecorator) {
+    return <Component className={cn("flex items-center gap-2", className)} style={sxStyles} title={noWrap ? title : undefined} ref={ref} {...props}>
+          {startDecorator && <span className="flex-shrink-0 flex items-center">
+              {startDecorator}
+            </span>}
+          <span className={typographyClasses}>
+            {children}
+          </span>
+          {endDecorator && <span className="flex-shrink-0 flex items-center">
+              {endDecorator}
+            </span>}
+        </Component>;
+  }
+  return <Component className={typographyClasses} style={sxStyles} title={noWrap ? title : undefined} ref={ref} {...props}>
+        {children}
+      </Component>;
+});
+Typography.displayName = "Typography";
+export { Typography, typographyVariants };

package/dist/server/utils/css/cn.js

@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge Tailwind CSS classes with clsx
+ * @param {...any} inputs - Class names to merge
+ * @returns {string} Merged class names
+ */
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microlight/core",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "type": "module",
   "scripts": {
@@ -29,14 +29,23 @@
   "dependencies": {
     "@babel/generator": "^7.26.10",
     "@babel/parser": "^7.26.10",
-    "@mui/joy": "^5.0.0-beta.51",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "async": "^3.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "commander": "^13.1.0",
     "cronstrue": "^2.53.0",
     "glob": "^11.0.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.562.0",
     "markdown-it": "^14.1.0",
     "next": "15.1.4",
     "next-nprogress-bar": "^2.4.3",
@@ -48,7 +57,10 @@
     "react-dom": "^19.0.0",
     "sequelize": "^6.37.5",
     "sqlite3": "^5.1.7",
-    "switchless": "0.19.1"
+    "switchless": "0.19.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.28.0",

package/dist/server/components/Icon.js

@@ -1,22 +0,0 @@
-/**
- * there is an issue with mui icons. 
- * manually setting the icons. 
- * the svgs of icons are picked up from fontawesome
- * https://fontawesome.com/search?ic=free
- */
-import React from 'react';
-import { AspectRatio } from '@mui/joy';
-export default function Icon({
-  color,
-  icon
-}) {
-  return <>
-    <AspectRatio ratio="1" sx={{
-      width: 20
-    }} variant="plain">
-      {icon == 'send' && <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>}
-      {icon == 'folder' && <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32l132.1 0c19.1 0 37.4 7.6 50.9 21.1L289.9 96 448 96c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16l-161.4 0c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7L64 80z" /></svg>}
-      {icon == 'ellipsis-vertical' && <svg fill={color} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z" /></svg>}
-    </AspectRatio>
-  </>;
-}