@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/candlestick-chart/candlestick-chart.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 const DEFAULT_WIDTH = 760;
@@ -156,60 +155,59 @@ function SessionPill({ sessionChange }) {
     }
   );
 }
-const CandlestickChart = React.forwardRef(
-  ({
-    as: Heading = "h3",
-    className,
-    data,
-    height = DEFAULT_HEIGHT,
-    showGrid = true,
-    width = DEFAULT_WIDTH,
-    ...props
-  }, reference) => {
-    const firstCandle = data[0];
-    const finalCandle = data.at(-1);
-    if (!firstCandle || !finalCandle) {
-      return null;
-    }
-    const metrics = buildMetrics(data, height, width);
-    const sessionChange = finalCandle.close - firstCandle.open;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "OHLC session" }),
-              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
-            ] }),
-            /* @__PURE__ */ jsx(SessionPill, { sessionChange })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              "aria-label": "Candlestick chart",
-              className: "h-full w-full",
-              height,
-              role: "img",
-              viewBox: `0 0 ${width} ${height}`,
-              width,
-              children: [
-                /* @__PURE__ */ jsx(PriceGrid, { metrics, showGrid, width }),
-                /* @__PURE__ */ jsx(CandleMarks, { data, height, metrics })
-              ]
-            }
-          )
-        ]
-      }
-    );
+const CandlestickChart = ({
+  as: Heading = "h3",
+  className,
+  data,
+  height = DEFAULT_HEIGHT,
+  ref: reference,
+  showGrid = true,
+  width = DEFAULT_WIDTH,
+  ...props
+}) => {
+  const firstCandle = data[0];
+  const finalCandle = data.at(-1);
+  if (!firstCandle || !finalCandle) {
+    return null;
   }
-);
+  const metrics = buildMetrics(data, height, width);
+  const sessionChange = finalCandle.close - firstCandle.open;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "OHLC session" }),
+            /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
+          ] }),
+          /* @__PURE__ */ jsx(SessionPill, { sessionChange })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-label": "Candlestick chart",
+            className: "h-full w-full",
+            height,
+            role: "img",
+            viewBox: `0 0 ${width} ${height}`,
+            width,
+            children: [
+              /* @__PURE__ */ jsx(PriceGrid, { metrics, showGrid, width }),
+              /* @__PURE__ */ jsx(CandleMarks, { data, height, metrics })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 CandlestickChart.displayName = "CandlestickChart";
 export {
   CandlestickChart

package/dist/components/canvas-shell/canvas-shell.js

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 function toInsetValue(value) {
   if (typeof value === "number") {
@@ -158,14 +157,17 @@ function renderLegacyCanvasShell({
     }
   );
 }
-function renderFloatingContent(children, contentStyle) {
+function CanvasShellContent({
+  content,
+  contentStyle
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative z-0 h-full w-full min-h-0 min-w-0",
       "data-slot": "canvas-shell-content",
       style: contentStyle,
-      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-0 min-w-0 overflow-hidden", children })
+      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-0 min-w-0 overflow-hidden", children: content })
     }
   );
 }
@@ -230,7 +232,7 @@ function renderFloatingCanvasShell({
             topBar: hasTopBar ? topBar : void 0
           }
         ),
-        renderFloatingContent(children, contentStyle),
+        /* @__PURE__ */ jsx(CanvasShellContent, { content: children, contentStyle }),
         /* @__PURE__ */ jsx(
           CanvasShellChromeAfter,
           {
@@ -243,7 +245,10 @@ function renderFloatingCanvasShell({
     }
   );
 }
-const CanvasShell = forwardRef((props, ref) => {
+const CanvasShell = ({
+  ref,
+  ...props
+}) => {
   const { bottomBar, chromeInset, contentPadding, leftBar, rightBar } = props;
   const hasExplicitChromeInset = Object.prototype.hasOwnProperty.call(
     props,
@@ -254,7 +259,7 @@ const CanvasShell = forwardRef((props, ref) => {
     return renderLegacyCanvasShell(props, ref);
   }
   return renderFloatingCanvasShell(props, ref);
-});
+};
 CanvasShell.displayName = "CanvasShell";
 export {
   CanvasShell

package/dist/components/canvas-view/canvas-view.js

@@ -1,7 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useEffect,
   useId,
@@ -425,79 +424,78 @@ function CanvasContentLayer({
     overlay ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20", children: overlay }) : null
   ] });
 }
-const CanvasView = forwardRef(
-  ({
-    children,
-    className,
-    defaultViewport = DEFAULT_VIEWPORT,
-    maxZoom = 2,
-    minZoom = 0.5,
-    onViewportChange,
-    overlay,
-    zoomStep = 0.1,
-    ...props
-  }, ref) => {
-    const instructionsId = useId();
-    const interactionRef = useRef(null);
-    const viewportState = useViewportState({
-      defaultViewport,
-      maxZoom,
-      minZoom,
-      onViewportChange
-    });
-    const keyboard = useCanvasKeyboardInteractions({
-      containerRef: interactionRef,
-      nudgeViewport: viewportState.nudgeViewport,
-      resetViewport: viewportState.resetViewport,
-      setViewport: viewportState.setViewport,
-      viewportRef: viewportState.viewportRef,
-      zoomStep
-    });
-    const pointer = useCanvasPointerInteractions({
-      isSpacePressed: keyboard.isSpacePressed,
-      setViewport: viewportState.setViewport,
-      viewportRef: viewportState.viewportRef
-    });
-    usePreventBodySelection(pointer.isDragging);
-    useCanvasViewHandle(ref, viewportState);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          CanvasInteractionLayer,
-          {
-            containerRef: interactionRef,
-            instructionsId,
-            isDragging: pointer.isDragging,
-            isSpacePressed: keyboard.isSpacePressed,
-            onBlur: keyboard.handleBlur,
-            onKeyDown: keyboard.handleKeyDown,
-            onKeyUp: keyboard.handleKeyUp,
-            onPointerCancel: pointer.handlePointerCancel,
-            onPointerDown: pointer.handlePointerDown,
-            onPointerMove: pointer.handlePointerMove,
-            onPointerUp: pointer.handlePointerUp,
-            viewport: viewportState.viewport,
-            children: /* @__PURE__ */ jsx(
-              CanvasContentLayer,
-              {
-                isDragging: pointer.isDragging,
-                overlay,
-                viewport: viewportState.viewport,
-                children
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
+const CanvasView = ({
+  children,
+  className,
+  defaultViewport = DEFAULT_VIEWPORT,
+  maxZoom = 2,
+  minZoom = 0.5,
+  onViewportChange,
+  overlay,
+  ref,
+  zoomStep = 0.1,
+  ...props
+}) => {
+  const instructionsId = useId();
+  const interactionRef = useRef(null);
+  const viewportState = useViewportState({
+    defaultViewport,
+    maxZoom,
+    minZoom,
+    onViewportChange
+  });
+  const keyboard = useCanvasKeyboardInteractions({
+    containerRef: interactionRef,
+    nudgeViewport: viewportState.nudgeViewport,
+    resetViewport: viewportState.resetViewport,
+    setViewport: viewportState.setViewport,
+    viewportRef: viewportState.viewportRef,
+    zoomStep
+  });
+  const pointer = useCanvasPointerInteractions({
+    isSpacePressed: keyboard.isSpacePressed,
+    setViewport: viewportState.setViewport,
+    viewportRef: viewportState.viewportRef
+  });
+  usePreventBodySelection(pointer.isDragging);
+  useCanvasViewHandle(ref, viewportState);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CanvasInteractionLayer,
+        {
+          containerRef: interactionRef,
+          instructionsId,
+          isDragging: pointer.isDragging,
+          isSpacePressed: keyboard.isSpacePressed,
+          onBlur: keyboard.handleBlur,
+          onKeyDown: keyboard.handleKeyDown,
+          onKeyUp: keyboard.handleKeyUp,
+          onPointerCancel: pointer.handlePointerCancel,
+          onPointerDown: pointer.handlePointerDown,
+          onPointerMove: pointer.handlePointerMove,
+          onPointerUp: pointer.handlePointerUp,
+          viewport: viewportState.viewport,
+          children: /* @__PURE__ */ jsx(
+            CanvasContentLayer,
+            {
+              isDragging: pointer.isDragging,
+              overlay,
+              viewport: viewportState.viewport,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
 CanvasView.displayName = "CanvasView";
 export {
   CanvasView

package/dist/components/card/card.js

@@ -1,7 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
-const Card = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const Card = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -11,18 +14,26 @@ const Card = React.forwardRef(({ className, ...props }, reference) => /* @__PURE
     ref: reference,
     ...props
   }
-));
+);
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const CardHeader = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn("flex flex-col space-y-1.5 p-6", className),
     ref: reference,
     ...props
   }
-));
+);
 CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const CardTitle = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -32,27 +43,39 @@ const CardTitle = React.forwardRef(({ className, ...props }, reference) => /* @_
     ref: reference,
     ...props
   }
-));
+);
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const CardDescription = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn("text-sm text-muted-foreground", className),
     ref: reference,
     ...props
   }
-));
+);
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ref: reference, ...props }));
+const CardContent = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ref: reference, ...props });
 CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const CardFooter = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn("flex items-center p-6 pt-0", className),
     ref: reference,
     ...props
   }
-));
+);
 CardFooter.displayName = "CardFooter";
 export {
   Card,

package/dist/components/card-flip/card-flip.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function Inner({
+  back,
+  flipOnHover,
+  flipped,
+  front
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative h-full min-h-40 transition-transform duration-500 [transform-style:preserve-3d] motion-reduce:transition-none",
+        flipOnHover && "group-hover:[transform:rotateY(180deg)]",
+        !flipOnHover && flipped && "[transform:rotateY(180deg)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [backface-visibility:hidden]", children: front }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [backface-visibility:hidden] [transform:rotateY(180deg)]", children: back })
+      ]
+    }
+  );
+}
+const CardFlip = ({
+  back,
+  className,
+  flipOnHover = true,
+  front,
+  ref,
+  ...props
+}) => {
+  const [flipped, setFlipped] = React.useState(false);
+  const base = cn(
+    "relative min-h-40 [perspective:1000px]",
+    flipOnHover && "group",
+    className
+  );
+  if (flipOnHover) {
+    return /* @__PURE__ */ jsx("div", { className: base, ref, ...props, children: /* @__PURE__ */ jsx(Inner, { back, flipOnHover: true, flipped, front }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: base,
+      onClick: () => {
+        setFlipped((current) => !current);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setFlipped((current) => !current);
+        }
+      },
+      ref,
+      role: "button",
+      tabIndex: 0,
+      ...props,
+      children: /* @__PURE__ */ jsx(Inner, { back, flipOnHover: false, flipped, front })
+    }
+  );
+};
+CardFlip.displayName = "CardFlip";
+export {
+  CardFlip
+};

package/dist/components/card-flip/index.js

@@ -0,0 +1,4 @@
+import { CardFlip } from "./card-flip";
+export {
+  CardFlip
+};