@justanarthur/modo-ui 0.1.0 → 0.2.0

package/dist/shared/{components-61ckf42z.js → components-zfnmn5d4.js}

@@ -1,39 +1,39 @@
-import {
-  slotRender
-} from "./components-5vxtcp88.js";
-import {
-  Button
-} from "./components-5pkcfprd.js";
 import {
   useIcon
-} from "./components-m5br529r.js";
-import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
-  SurfaceProvider,
-  useSurface
-} from "./components-csxz9f52.js";
+} from "./components-zrkzcayz.js";
 import {
   MorphPartScope,
   MorphSurface
-} from "./components-jxgznftn.js";
+} from "./components-0q0sqfh4.js";
+import {
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
 import {
   useShape
-} from "./components-7zp99w5d.js";
+} from "./components-cv16mryv.js";
 import {
-  useControllableState
-} from "./components-dg0w8g5p.js";
+  useSizeVariant2,
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
-  useMorph,
-  useMorphOrigin
-} from "./components-7nww01w4.js";
+  slotRender
+} from "./components-3ky44908.js";
 import {
-  useSize,
-  useSizeVariant
-} from "./components-x3rz4cyn.js";
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  Button2
+} from "./components-b2wyq2cq.js";
 
 // components/overlays/dialog/index.tsx
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
@@ -52,8 +52,8 @@ var DialogContext = createContext({
   open: false,
   origin: { current: {} }
 });
-var useDialogState = () => useContext(DialogContext);
-var DialogTrigger = forwardRef(({ render, asChild, children, ...props }, ref) => {
+var useDialogState2 = () => useContext(DialogContext);
+var DialogTrigger2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
   const el = slotRender(render, asChild, children);
   return el ? /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
     ref,
@@ -65,8 +65,8 @@ var DialogTrigger = forwardRef(({ render, asChild, children, ...props }, ref) =>
     children
   });
 });
-DialogTrigger.displayName = "DialogTrigger";
-var DialogClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
+DialogTrigger2.displayName = "DialogTrigger";
+var DialogClose2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
   const el = slotRender(render, asChild, children);
   return el ? /* @__PURE__ */ jsx(DialogPrimitive.Close, {
     ref,
@@ -78,8 +78,8 @@ var DialogClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
     children
   });
 });
-DialogClose.displayName = "DialogClose";
-var DialogContent = forwardRef(({
+DialogClose2.displayName = "DialogClose";
+var DialogContent2 = forwardRef(({
   className,
   children,
   size = "sm",
@@ -94,10 +94,10 @@ var DialogContent = forwardRef(({
 }, ref) => {
   const XIcon = useIcon("x");
   const shape = useShape();
-  const substrate = useSurface();
+  const substrate = useSurface2();
   const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8);
-  const compact = useSize().variant === "compact";
-  const { open, origin } = useDialogState();
+  const compact = useSize2().variant === "compact";
+  const { open, origin } = useDialogState2();
   const morph = useMorph(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
@@ -107,24 +107,24 @@ var DialogContent = forwardRef(({
         render: /* @__PURE__ */ jsx(motion.div, {
           style: { opacity: morph.progress }
         }),
-        className: cn(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
+        className: cn2(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
       }),
       /* @__PURE__ */ jsx(DialogPrimitive.Popup, {
         ref: morph.popupRef,
         ...props,
-        className: cn(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
-        children: /* @__PURE__ */ jsx(SurfaceProvider, {
+        className: cn2(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
+        children: /* @__PURE__ */ jsx(SurfaceProvider2, {
           value: dialogLevel,
           children: /* @__PURE__ */ jsxs(MorphSurface, {
             morph,
             bg: SURFACE_BG[dialogLevel],
             shadow: SURFACE_SHADOW[dialogLevel],
             radius: shape.container,
-            className: cn("p-6", className),
+            className: cn2("p-6", className),
             children: [
               children,
               showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
-                render: /* @__PURE__ */ jsxs(Button, {
+                render: /* @__PURE__ */ jsxs(Button2, {
                   variant: "ghost",
                   size: "icon-sm",
                   className: "absolute right-3 top-3",
@@ -144,38 +144,38 @@ var DialogContent = forwardRef(({
     ]
   });
 });
-DialogContent.displayName = "DialogContent";
-function DialogHeader({ className, ...props }) {
+DialogContent2.displayName = "DialogContent";
+function DialogHeader2({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", {
-    className: cn("flex flex-col gap-1.5 mb-4", className),
+    className: cn2("flex flex-col gap-1.5 mb-4", className),
     ...props
   });
 }
-function DialogFooter({ className, ...props }) {
+function DialogFooter2({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", {
-    className: cn("flex justify-end gap-2 mt-6", className),
+    className: cn2("flex justify-end gap-2 mt-6", className),
     ...props
   });
 }
-var DialogTitle = forwardRef(({ className, ...props }, ref) => {
-  const compact = useSizeVariant() === "compact";
+var DialogTitle2 = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSizeVariant2() === "compact";
   return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
     ref,
-    className: cn(compact ? "text-title-compact" : "text-title", "weight-bold text-foreground leading-tight", className),
+    className: cn2(compact ? "text-title-compact" : "text-title", "weight-bold text-foreground leading-tight", className),
     ...props
   });
 });
-DialogTitle.displayName = "DialogTitle";
-var DialogDescription = forwardRef(({ className, ...props }, ref) => {
-  const compact = useSizeVariant() === "compact";
+DialogTitle2.displayName = "DialogTitle";
+var DialogDescription2 = forwardRef(({ className, ...props }, ref) => {
+  const compact = useSizeVariant2() === "compact";
   return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
     ref,
-    className: cn(compact ? "text-body-compact" : "text-body", "text-muted-foreground", className),
+    className: cn2(compact ? "text-body-compact" : "text-body", "text-muted-foreground", className),
     ...props
   });
 });
-DialogDescription.displayName = "DialogDescription";
-function DialogState({ open, defaultOpen = false, onOpenChange, children }) {
+DialogDescription2.displayName = "DialogDescription";
+function DialogState2({ open, defaultOpen = false, onOpenChange, children }) {
   const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
   const { origin, capture } = useMorphOrigin();
   const id = useId();
@@ -196,8 +196,8 @@ function DialogState({ open, defaultOpen = false, onOpenChange, children }) {
     })
   });
 }
-function Dialog({ children, open, defaultOpen, onOpenChange, modal }) {
-  return /* @__PURE__ */ jsx(DialogState, {
+function Dialog2({ children, open, defaultOpen, onOpenChange, modal }) {
+  return /* @__PURE__ */ jsx(DialogState2, {
     open,
     defaultOpen,
     onOpenChange,
@@ -208,13 +208,13 @@ function Dialog({ children, open, defaultOpen, onOpenChange, modal }) {
     })
   });
 }
-Dialog.Trigger = DialogTrigger;
-Dialog.Content = DialogContent;
-Dialog.Header = DialogHeader;
-Dialog.Footer = DialogFooter;
-Dialog.Title = DialogTitle;
-Dialog.Description = DialogDescription;
-Dialog.Close = DialogClose;
-var dialog_default = Dialog;
+Dialog2.Trigger = DialogTrigger2;
+Dialog2.Content = DialogContent2;
+Dialog2.Header = DialogHeader2;
+Dialog2.Footer = DialogFooter2;
+Dialog2.Title = DialogTitle2;
+Dialog2.Description = DialogDescription2;
+Dialog2.Close = DialogClose2;
+var dialog_default = Dialog2;
 
-export { useDialogState, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogState, Dialog, dialog_default };
+export { useDialogState2, DialogTrigger2, DialogClose2, DialogContent2, DialogHeader2, DialogFooter2, DialogTitle2, DialogDescription2, DialogState2, Dialog2, dialog_default };

package/dist/shared/{components-m5br529r.js → components-zrkzcayz.js}

@@ -130,7 +130,7 @@ function useIcon(name) {
   const icons = useContext(IconContext);
   return (icons ?? defaultIcons)[name];
 }
-function IconProvider({ children, icons }) {
+function IconProvider2({ children, icons }) {
   const value = useMemo(() => ({ ...defaultIcons, ...icons }), [icons]);
   return /* @__PURE__ */ jsx(IconContext.Provider, {
     value,
@@ -138,4 +138,4 @@ function IconProvider({ children, icons }) {
   });
 }
 
-export { useIcon, IconProvider };
+export { useIcon, IconProvider2 };

package/dist/shared/{components-csxz9f52.js → components-zx6b6yby.js}

@@ -19,7 +19,7 @@ var SURFACE_SHADOW = {
   7: "shadow-surface-7",
   8: "shadow-surface-8"
 };
-function surfaceClasses(bgLevel, shadowLevel = bgLevel) {
+function surfaceClasses2(bgLevel, shadowLevel = bgLevel) {
   const bg = Math.round(Math.max(1, Math.min(8, bgLevel)));
   const shadow = Math.round(Math.max(1, Math.min(8, shadowLevel)));
   return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`;
@@ -29,14 +29,14 @@ function surfaceClasses(bgLevel, shadowLevel = bgLevel) {
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 var SurfaceContext = createContext(1);
-function useSurface() {
+function useSurface2() {
   return useContext(SurfaceContext);
 }
-function SurfaceProvider({ value, children }) {
+function SurfaceProvider2({ value, children }) {
   return /* @__PURE__ */ jsx(SurfaceContext.Provider, {
     value: Math.max(1, Math.min(8, value)),
     children
   });
 }
 
-export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses, useSurface, SurfaceProvider };
+export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses2, useSurface2, SurfaceProvider2 };

package/dist/styles.css

@@ -59,7 +59,7 @@
 }
 /* layer: theme */
 @layer theme{
-:root, :host { --radius-DEFAULT: 0.25rem; --spacing: 0.25rem; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --radius-none: 0; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --leading-tight: 1.25; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --leading-none: 1; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --leading-relaxed: 1.625; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --radius-md: 0.375rem; --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-sm: 0.25rem; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
+:root, :host { --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --spacing: 0.25rem; --ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1); --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; --radius-md: 0.375rem; --radius-DEFAULT: 0.25rem; --radius-none: 0; --radius-2xl: 1rem; --radius-lg: 0.5rem; --leading-snug: 1.375; --leading-normal: 1.5; --radius-xs: 0.125rem; --tracking-wide: 0.025em; --leading-relaxed: 1.625; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --radius-3xl: 1.5rem; --radius-xl: 0.75rem; --leading-none: 1; --radius-sm: 0.25rem; --leading-tight: 1.25; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
 }
 /* layer: base */
 @layer base{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justanarthur/modo-ui",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Fluid Functionalism (Base UI flavor, MIT © 2026 Micka Touillaud) ported to UnoCSS: motion springs, fluid hover, a two-step size ladder and an eight-level elevated surface system. Documented with modo.",
   "license": "MIT",
   "keywords": [
@@ -91,7 +91,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@justanarthur/modo": "0.7.3",
+    "@justanarthur/modo": "0.8.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "bunup": "^0.16.0",
@@ -102,4 +102,4 @@
     "unocss": "66.10.5",
     "vite": "^5.4.0"
   }
-}
+}

package/dist/shared/components-74c20v2f.js

@@ -1,32 +0,0 @@
-import {
-  SurfaceProvider,
-  surfaceClasses,
-  useSurface
-} from "./components-csxz9f52.js";
-import {
-  cn
-} from "./components-0f0as45n.js";
-
-// primitives/surface/index.tsx
-import {
-  forwardRef
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var Elevated = forwardRef(({ offset, shadowLevel, className, children, ...props }, ref) => {
-  const substrate = useSurface();
-  const level = Math.min(substrate + offset, 8);
-  return /* @__PURE__ */ jsx(SurfaceProvider, {
-    value: level,
-    children: /* @__PURE__ */ jsx("div", {
-      ref,
-      className: cn(surfaceClasses(level, shadowLevel ?? level), className),
-      ...props,
-      children
-    })
-  });
-});
-Elevated.displayName = "Elevated";
-Object.assign(Elevated, { Provider: SurfaceProvider });
-var surface_default = Elevated;
-
-export { Elevated, surface_default };

package/dist/shared/components-8hzbsfbd.js

@@ -1,123 +0,0 @@
-import {
-  SizeProvider
-} from "./components-vb033rns.js";
-import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
-import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
-import {
-  useSize
-} from "./components-x3rz4cyn.js";
-import {
-  cn
-} from "./components-0f0as45n.js";
-
-// components/table/index.tsx
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  useMemo,
-  useRef
-} from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TableContext = createContext(null);
-var Table = forwardRef(({ children, size, className, ...props }, ref) => {
-  const containerRef = useRef(null);
-  const sizeClasses = useSize(size);
-  const hover = useFluidHover(containerRef);
-  const { activeIndex, handlers, registerItem } = hover;
-  const contextValue = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
-  const table = /* @__PURE__ */ jsx(TableContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsxs("div", {
-      ref: containerRef,
-      className: "relative",
-      onMouseEnter: handlers.onMouseEnter,
-      onMouseMove: handlers.onMouseMove,
-      onMouseLeave: handlers.onMouseLeave,
-      onClick: handlers.onClick,
-      children: [
-        /* @__PURE__ */ jsx(FluidHoverHighlight, {
-          hover
-        }),
-        /* @__PURE__ */ jsx("table", {
-          ref,
-          className: cn("w-full border-collapse", sizeClasses.text, className),
-          ...props,
-          children
-        })
-      ]
-    })
-  });
-  return size ? /* @__PURE__ */ jsx(SizeProvider, {
-    size,
-    children: table
-  }) : table;
-});
-Table.displayName = "Table";
-var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
-  ref,
-  className: cn("", className),
-  ...props
-}));
-TableHeader.displayName = "TableHeader";
-var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
-  ref,
-  className: cn("", className),
-  ...props
-}));
-TableBody.displayName = "TableBody";
-var TableRow = forwardRef(({ index, className, style, ...props }, ref) => {
-  const internalRef = useRef(null);
-  const ctx = useContext(TableContext);
-  useRegisterFluidHoverItem(ctx?.registerItem, index, internalRef);
-  const isBodyRow = index !== undefined;
-  const activeIdx = ctx?.activeIndex ?? null;
-  const hideBorder = activeIdx !== null && (isBodyRow && (index === activeIdx || index === activeIdx - 1) || !isBodyRow && activeIdx === 0);
-  return /* @__PURE__ */ jsx("tr", {
-    ref: (node) => {
-      internalRef.current = node;
-      if (typeof ref === "function")
-        ref(node);
-      else if (ref)
-        ref.current = node;
-    },
-    "data-fluid-hover-index": index,
-    className: cn("group/row relative z-10 border-b transition-[border-color] duration-fast", hideBorder ? "border-transparent" : "border-accent/40", isBodyRow && activeIdx === index && "is-active", isBodyRow ? "weight-normal" : "weight-semibold", className),
-    style,
-    ...props
-  });
-});
-TableRow.displayName = "TableRow";
-var TableHead = forwardRef(({ className, ...props }, ref) => {
-  const sizeClasses = useSize();
-  return /* @__PURE__ */ jsx("th", {
-    ref,
-    className: cn("text-left text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
-    ...props
-  });
-});
-TableHead.displayName = "TableHead";
-var TableCell = forwardRef(({ className, ...props }, ref) => {
-  const sizeClasses = useSize();
-  return /* @__PURE__ */ jsx("td", {
-    ref,
-    className: cn("text-muted-foreground transition-colors duration-fast group-[.is-active]/row:text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
-    ...props
-  });
-});
-TableCell.displayName = "TableCell";
-Object.assign(Table, {
-  Header: TableHeader,
-  Body: TableBody,
-  Row: TableRow,
-  Head: TableHead,
-  Cell: TableCell
-});
-var table_default = Table;
-
-export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, table_default };

package/dist/shared/components-dphg9gjr.js

@@ -1,42 +0,0 @@
-import {
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogState,
-  DialogTitle,
-  DialogTrigger
-} from "./components-61ckf42z.js";
-
-// components/overlays/alert-dialog/index.tsx
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var AlertDialogContent = forwardRef(({ showCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsx(DialogContent, {
-  ref,
-  showCloseButton,
-  ...props
-}));
-AlertDialogContent.displayName = "AlertDialogContent";
-function AlertDialog({ children, open, defaultOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx(DialogState, {
-    open,
-    defaultOpen,
-    onOpenChange,
-    children: (root) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
-      ...root,
-      children
-    })
-  });
-}
-AlertDialog.Trigger = DialogTrigger;
-AlertDialog.Content = AlertDialogContent;
-AlertDialog.Header = DialogHeader;
-AlertDialog.Footer = DialogFooter;
-AlertDialog.Title = DialogTitle;
-AlertDialog.Description = DialogDescription;
-AlertDialog.Close = DialogClose;
-var alert_dialog_default = AlertDialog;
-
-export { AlertDialogContent, AlertDialog, alert_dialog_default };

package/dist/shared/components-kpbcms10.js

@@ -1,9 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-export { __require };