@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/layout.tsx

@@ -0,0 +1,43 @@
+import { Slot } from "@radix-ui/react-slot";
+import { PropsWithChildren, ReactElement } from "react";
+
+import { cn } from "../hooks";
+
+export interface FormLayoutProps extends PropsWithChildren {
+  align?: "start" | "center" | "end" | "baseline";
+  asChild?: boolean;
+  className?: string;
+  orientation?: "label-left" | "label-top";
+  children: [ReactElement, ReactElement];
+}
+
+/**
+ * Convenience layout wrapper for demos and description/content pairs.
+ */
+export function FormLayout({
+  asChild,
+  className,
+  align = "center",
+  orientation = "label-top",
+  children,
+}: FormLayoutProps) {
+  const Com = asChild ? Slot : "div";
+
+  return (
+    <Com
+      className={cn(
+        {
+          "items-baseline": align === "baseline",
+          "items-center": align === "center",
+          "items-start": align === "start",
+          "items-end": align === "end",
+          "gap-xs flex flex-col items-stretch": orientation === "label-top",
+          "gap-xs grid grid-cols-[1fr_2fr] text-center": orientation === "label-left",
+        },
+        className,
+      )}
+    >
+      {children}
+    </Com>
+  );
+}

package/src/ui/layouts/dock-layout/DockLayoutView.tsx

@@ -0,0 +1,128 @@
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+import {
+  DockLayout,
+  DockLayoutBottom,
+  DockLayoutContent,
+  DockLayoutLeft,
+  DockLayoutRight,
+  DockLayoutTop,
+} from "./LayoutSlots";
+
+interface DockLayoutViewProps {
+  left?: ReactNode;
+  right?: ReactNode;
+  top?: ReactNode;
+  bottom?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  leftClassName?: string;
+  rightClassName?: string;
+  topClassName?: string;
+  bottomClassName?: string;
+  contentClassName?: string;
+}
+
+export const DockLayoutView = ({
+  left,
+  right,
+  top,
+  bottom,
+  children,
+  className,
+  leftClassName,
+  rightClassName,
+  topClassName,
+  bottomClassName,
+  contentClassName,
+}: DockLayoutViewProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const leftRef = useRef<HTMLDivElement>(null);
+  const rightRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [isBottomFullWidth, setIsBottomFullWidth] = useState(false);
+
+  useEffect(() => {
+    const checkBottomWidth = () => {
+      if (!containerRef.current || !bottom || !measureRef.current) return;
+
+      const containerWidth = containerRef.current.offsetWidth;
+      const leftWidth = leftRef.current?.offsetWidth || 0;
+      const rightWidth = rightRef.current?.offsetWidth || 0;
+      const availableWidth = containerWidth - leftWidth - rightWidth;
+
+      const bottomActualWidth = measureRef.current.scrollWidth;
+
+      setIsBottomFullWidth(bottomActualWidth > 0 && availableWidth < bottomActualWidth);
+    };
+
+    const resizeObserver = new ResizeObserver(checkBottomWidth);
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    if (leftRef.current) {
+      resizeObserver.observe(leftRef.current);
+    }
+    if (rightRef.current) {
+      resizeObserver.observe(rightRef.current);
+    }
+    if (measureRef.current) {
+      resizeObserver.observe(measureRef.current);
+      checkBottomWidth();
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [bottom, left, right]);
+
+  return (
+    <DockLayout ref={containerRef} className={className}>
+      {bottom && (
+        <div
+          ref={measureRef}
+          className="pointer-events-none absolute -top-[9999px] left-0 opacity-0"
+          style={{ width: "max-content" }}
+        >
+          <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>
+        </div>
+      )}
+
+      {top && <DockLayoutTop className={topClassName}>{top}</DockLayoutTop>}
+
+      <div className="flex flex-1 overflow-hidden">
+        {left && (
+          <div ref={leftRef}>
+            <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>
+          </div>
+        )}
+
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
+
+          {bottom && !isBottomFullWidth && (
+            <div className="flex justify-center">
+              <DockLayoutBottom ref={bottomRef} className={bottomClassName}>
+                {bottom}
+              </DockLayoutBottom>
+            </div>
+          )}
+        </div>
+
+        {right && (
+          <div ref={rightRef}>
+            <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>
+          </div>
+        )}
+      </div>
+
+      {bottom && isBottomFullWidth && (
+        <DockLayoutBottom ref={bottomRef} className={bottomClassName}>
+          {bottom}
+        </DockLayoutBottom>
+      )}
+    </DockLayout>
+  );
+};

package/src/ui/layouts/dock-layout/LayoutSlots.tsx

@@ -0,0 +1,85 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { ComponentProps } from "react";
+import { forwardRef } from "react";
+
+import { cn } from "../../../hooks";
+
+export const DockLayout = forwardRef<HTMLDivElement, ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={cn("relative flex h-full w-full flex-col overflow-hidden", className)}
+      />
+    );
+  },
+);
+
+DockLayout.displayName = "DockLayout";
+
+interface DockLayoutChildProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+}
+
+export function DockLayoutContent({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "relative flex flex-1 flex-col items-center justify-center overflow-auto",
+        className,
+      )}
+    />
+  );
+}
+
+export function DockLayoutLeft({ className, asChild, ...props }: Readonly<DockLayoutChildProps>) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      {...props}
+      className={cn(
+        "bg-bg-primary flex h-full flex-shrink-0 flex-col items-start gap-4",
+        className,
+      )}
+    />
+  );
+}
+
+export function DockLayoutTop({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "absolute top-4 left-1/2 z-20 flex -translate-x-1/2 transform items-start justify-center",
+        className,
+      )}
+    />
+  );
+}
+
+export function DockLayoutRight({ className, asChild, ...props }: Readonly<DockLayoutChildProps>) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      {...props}
+      className={cn("bg-bg-primary flex h-full flex-shrink-0 flex-col items-end gap-4", className)}
+    />
+  );
+}
+
+export const DockLayoutBottom = forwardRef<HTMLDivElement, DockLayoutChildProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        {...props}
+        className={cn("bg-bg-primary inline-flex w-full flex-shrink-0 justify-center", className)}
+      />
+    );
+  },
+);
+
+DockLayoutBottom.displayName = "DockLayoutBottom";

package/src/ui/layouts/dock-layout/index.tsx

@@ -0,0 +1,2 @@
+export * from "./LayoutSlots";
+export * from "./DockLayoutView";

package/src/ui/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from "./dock-layout";
+export * from "./liquid-layout";

package/src/ui/layouts/liquid-layout/LayoutSlots.tsx

@@ -0,0 +1,82 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { ComponentProps } from "react";
+
+import { cn } from "../../../hooks";
+
+export function LiquidLayout({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "pointer-events-none relative z-1 grid h-full w-full grid-cols-3 grid-rows-[1fr_auto] flex-col justify-between overflow-hidden p-4",
+        className,
+      )}
+    />
+  );
+}
+
+interface LiquidLayoutChildProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+}
+
+export function LiquidLayoutContent({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return <div {...props} className={cn("pointer-events-auto absolute inset-0 -z-1", className)} />;
+}
+
+export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "order-2 col-start-1 flex flex-col items-start gap-4 [&>*]:pointer-events-auto",
+        className,
+      )}
+    />
+  );
+}
+
+export function LiquidLayoutTop({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "order-3 col-start-2 flex items-start justify-center [&>*]:pointer-events-auto",
+        className,
+      )}
+    />
+  );
+}
+
+export function LiquidLayoutRight({
+  className,
+  asChild,
+  ...props
+}: Readonly<LiquidLayoutChildProps>) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      {...props}
+      className={cn(
+        "order-4 col-start-3 flex flex-col items-end gap-4 [&>*]:pointer-events-auto",
+        className,
+      )}
+    />
+  );
+}
+
+export function LiquidLayoutBottom({
+  className,
+  asChild,
+  ...props
+}: Readonly<LiquidLayoutChildProps>) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      {...props}
+      className={cn(
+        "order-5 col-span-3 col-start-1 flex justify-center [&>*]:pointer-events-auto",
+        className,
+      )}
+    />
+  );
+}

package/src/ui/layouts/liquid-layout/LiquidLayoutView.tsx

@@ -0,0 +1,76 @@
+import { type ReactNode } from "react";
+
+import {
+  LiquidLayout,
+  LiquidLayoutBottom,
+  LiquidLayoutContent,
+  LiquidLayoutLeft,
+  LiquidLayoutRight,
+  LiquidLayoutTop,
+} from "./LayoutSlots";
+import { cn } from "../../../hooks";
+
+/**
+ * Props for the LiquidLayoutView component
+ */
+interface LiquidLayoutViewProps {
+  /** Content to display in the left slot */
+  left?: ReactNode;
+  /** Content to display in the right slot */
+  right?: ReactNode;
+  /** Content to display in the top slot */
+  top?: ReactNode;
+  /** Content to display in the bottom slot */
+  bottom?: ReactNode;
+  /** Main content to display in the center */
+  children?: ReactNode;
+  /** Additional CSS classes to apply to the root element */
+  className?: string;
+  /** CSS classes to apply to the left slot */
+  leftClassName?: string;
+  /** CSS classes to apply to the right slot */
+  rightClassName?: string;
+  /** CSS classes to apply to the top slot */
+  topClassName?: string;
+  /** CSS classes to apply to the bottom slot */
+  bottomClassName?: string;
+  /** CSS classes to apply to the content slot */
+  contentClassName?: string;
+}
+
+/**
+ * A flexible liquid layout component with slots for left, right, top, bottom, and center content.
+ * The layout adapts to different content and screen sizes while maintaining proper positioning.
+ *
+ * @param props - The component props
+ * @returns A liquid layout with positioned content slots
+ */
+export const LiquidLayoutView = ({
+  left,
+  right,
+  top,
+  bottom,
+  children,
+  className,
+  leftClassName,
+  rightClassName,
+  topClassName,
+  bottomClassName,
+  contentClassName,
+}: LiquidLayoutViewProps) => {
+  return (
+    <LiquidLayout className={className}>
+      <LiquidLayoutContent
+        className={cn("absolute flex flex-col items-center justify-center", contentClassName)}
+      >
+        {children}
+      </LiquidLayoutContent>
+      {bottom && (
+        <LiquidLayoutBottom className={cn("mt-4", bottomClassName)}>{bottom}</LiquidLayoutBottom>
+      )}
+      {right && <LiquidLayoutRight className={rightClassName}>{right}</LiquidLayoutRight>}
+      {left && <LiquidLayoutLeft className={leftClassName}>{left}</LiquidLayoutLeft>}
+      {top && <LiquidLayoutTop className={topClassName}>{top}</LiquidLayoutTop>}
+    </LiquidLayout>
+  );
+};

package/src/ui/layouts/liquid-layout/index.ts

@@ -0,0 +1 @@
+export * from "./LiquidLayoutView";

package/src/ui/modal.tsx

@@ -0,0 +1,211 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import { type ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+type ModalProps = ComponentProps<typeof DialogPrimitive.Root>;
+
+/**
+ * Modal root based on Radix Dialog.
+ */
+function Modal({ ...props }: ModalProps) {
+  return <DialogPrimitive.Root data-slot="modal" {...props} />;
+}
+
+type ModalTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+
+/** Trigger element that opens the modal. */
+function ModalTrigger({ ...props }: ModalTriggerProps) {
+  return <DialogPrimitive.Trigger data-slot="modal-trigger" {...props} />;
+}
+
+type ModalPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
+
+/** Portal for modal content/overlay. */
+function ModalPortal({ ...props }: ModalPortalProps) {
+  return <DialogPrimitive.Portal data-slot="modal-portal" {...props} />;
+}
+
+type ModalCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
+
+/** Close control for the modal. */
+function ModalClose({ ...props }: ModalCloseProps) {
+  return <DialogPrimitive.Close data-slot="modal-close" {...props} />;
+}
+
+const modalOverlayVariants = cva([
+  "fixed",
+  "inset-0",
+  "z-10",
+  "bg-bg-mask",
+  "transition-all",
+  "duration-200",
+]);
+
+type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+
+/** Fullscreen overlay displayed behind the modal. */
+function ModalOverlay({ className, ...props }: ModalOverlayProps) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="modal-overlay"
+      className={cn(modalOverlayVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+const modalContentVariants = cva([
+  "pb-xl",
+  "px-xl",
+  "bg-bg-primary",
+  "rounded-uk-xl",
+  "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+  "duration-200",
+  "transition-all",
+  "fixed",
+  "translate-x-[-50%]",
+  "translate-y-[-50%]",
+  "z-11",
+  "left-1/2",
+  "top-1/2",
+  "data-[state=open]:animate-in",
+  "data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0",
+  "data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95",
+  "data-[state=open]:zoom-in-95",
+  "liquid:liquid-bg",
+]);
+
+interface ModalContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+  showCloseButton?: boolean;
+}
+
+/**
+ * Modal content panel with optional close button.
+ */
+function ModalContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: ModalContentProps) {
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        data-slot="modal-content"
+        className={cn(modalContentVariants(), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="modal-close"
+            className={cn(
+              "absolute",
+              "right-[16px]",
+              "top-[16px]",
+              "w-[16px]",
+              "h-[16px]",
+              "rounded-uk-sm",
+              "cursor-pointer",
+              "hover:text-icon-highlight",
+              "text-icon-primary",
+              "flex",
+              "items-center",
+              "justify-center",
+            )}
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  );
+}
+
+type ModalHeaderProps = ComponentProps<"div">;
+
+/** Header container inside modal. */
+function ModalHeader({ className, ...props }: ModalHeaderProps) {
+  return <div data-slot="modal-header" className={cn("flex flex-col", className)} {...props} />;
+}
+
+type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+
+/** Title element for the modal. */
+function ModalTitle({ className, ...props }: ModalTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="modal-title"
+      className={cn(
+        "text-text-highlight",
+        "text-uk-lg",
+        "leading-uk-lg",
+        "font-medium",
+        "py-lg",
+        "px-xl",
+        "text-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+
+/** Secondary descriptive text within the modal. */
+function ModalDescription({ className, ...props }: ModalDescriptionProps) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="modal-description"
+      className={cn("text-text-primary", "text-uk-md", "leading-uk-md", "text-start", className)}
+      {...props}
+    />
+  );
+}
+
+type ModalFooterProps = ComponentProps<"div">;
+
+/** Footer row aligning actions to the end. */
+function ModalFooter({ className, ...props }: ModalFooterProps) {
+  return (
+    <div
+      data-slot="modal-footer"
+      className={cn("w-full", "flex", "justify-end", "gap-xs", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Modal,
+  ModalTrigger,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalDescription,
+  ModalFooter,
+  ModalClose,
+};
+
+export type {
+  ModalProps,
+  ModalTriggerProps,
+  ModalPortalProps,
+  ModalOverlayProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+  ModalFooterProps,
+  ModalCloseProps,
+};