@object-ui/components 3.3.0 → 3.3.1

package/src/custom/item.tsx

@@ -1,201 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from "react"
-import { Slot as SlotPrimitive } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../lib/utils"
-import { Separator } from "../ui/separator"
-
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      role="list"
-      data-slot="item-group"
-      className={cn("group/item-group flex flex-col", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="item-separator"
-      orientation="horizontal"
-      className={cn("my-0", className)}
-      {...props}
-    />
-  )
-}
-
-const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
-      },
-      size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? SlotPrimitive : "div"
-  return (
-    <Comp
-      data-slot="item"
-      data-variant={variant}
-      data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      data-slot="item-media"
-      data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-actions"
-      className={cn("flex items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemActions,
-  ItemGroup,
-  ItemSeparator,
-  ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
-}

package/src/custom/kbd.tsx

@@ -1,36 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { cn } from "../lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }

package/src/custom/mobile-dialog-content.tsx

@@ -1,67 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * MobileDialogContent
- *
- * A mobile-optimized wrapper around the upstream Shadcn DialogContent.
- * On mobile (< sm breakpoint), the dialog is full-screen with a larger
- * close-button touch target (≥ 44×44px per WCAG 2.5.5).
- * On tablet+ (≥ sm), it falls back to the standard centered dialog.
- *
- * This lives in `custom/` to avoid modifying the Shadcn-synced `ui/dialog.tsx`.
- */
-
-import * as React from 'react';
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { DialogOverlay, DialogPortal } from '../ui/dialog';
-
-export const MobileDialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        // Mobile-first: full-screen
-        'fixed inset-0 z-50 w-full bg-background p-4 shadow-lg duration-200',
-        'h-[100dvh]',
-        // Desktop (sm+): centered dialog with border + rounded corners
-        'sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%]',
-        'sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6',
-        // Animations
-        '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',
-        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
-        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close
-        className={cn(
-          'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity',
-          'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-          'disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-          // Mobile touch target ≥ 44×44px (WCAG 2.5.5)
-          'min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center',
-        )}
-      >
-        <X className="h-5 w-5 sm:h-4 sm:w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-MobileDialogContent.displayName = 'MobileDialogContent';

package/src/custom/native-select.tsx

@@ -1,33 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from "react"
-import { cn } from "../lib/utils"
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
-
-const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <select
-        className={cn(
-          "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </select>
-    )
-  }
-)
-NativeSelect.displayName = "NativeSelect"
-
-export { NativeSelect }

package/src/custom/navigation-overlay.tsx

@@ -1,334 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * NavigationOverlay
- *
- * A reusable component that renders record detail overlays based on
- * ViewNavigationConfig mode. Supports drawer (Sheet), modal (Dialog),
- * split (ResizablePanelGroup), and popover modes.
- *
- * Works in conjunction with useNavigationOverlay hook from @object-ui/react —
- * the hook manages state while this component handles the visual presentation.
- *
- * @example
- * ```tsx
- * import { useNavigationOverlay } from '@object-ui/react';
- * import { NavigationOverlay } from '@object-ui/components';
- *
- * const nav = useNavigationOverlay({
- *   navigation: schema.navigation,
- *   objectName: schema.objectName,
- * });
- *
- * return (
- *   <>
- *     <DataTable onRowClick={nav.handleClick} />
- *     <NavigationOverlay {...nav} title="Record Detail">
- *       {(record) => <RecordDetail record={record} />}
- *     </NavigationOverlay>
- *   </>
- * );
- * ```
- */
-
-import React from 'react';
-import { cn } from '../lib/utils';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from '../ui/sheet';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '../ui/dialog';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '../ui/popover';
-import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from '../ui/resizable';
-
-/** Navigation mode type — matches ViewNavigationConfig.mode */
-export type NavigationOverlayMode =
-  | 'page'
-  | 'drawer'
-  | 'modal'
-  | 'split'
-  | 'popover'
-  | 'new_window'
-  | 'none';
-
-export interface NavigationOverlayProps {
-  /** Whether the overlay is open */
-  isOpen: boolean;
-  /** The selected record */
-  selectedRecord: Record<string, unknown> | null;
-  /** The navigation mode */
-  mode: NavigationOverlayMode;
-  /** Close the overlay */
-  close: () => void;
-  /** Set open state (for controlled Sheet/Dialog onOpenChange) */
-  setIsOpen: (open: boolean) => void;
-  /** Width for the overlay (drawer/modal/split) */
-  width?: string | number;
-  /** Whether navigation is an overlay mode */
-  isOverlay: boolean;
-  /** Target view/form name from NavigationConfig */
-  view?: string;
-  /** Title for the overlay header */
-  title?: string;
-  /** Description for the overlay header */
-  description?: string;
-  /** CSS class for the overlay container */
-  className?: string;
-  /**
-   * Render function for the overlay content.
-   * Receives the selected record.
-   */
-  children: (record: Record<string, unknown>) => React.ReactNode;
-  /**
-   * Optional render function for a specific view/form based on `view` prop.
-   * When provided, this takes priority over `children` for rendering overlay content.
-   * Receives the selected record and the view name.
-   */
-  renderView?: (record: Record<string, unknown>, viewName: string) => React.ReactNode;
-  /**
-   * The main content to wrap (for split mode only).
-   * In split mode, the main content is rendered in the left panel.
-   */
-  mainContent?: React.ReactNode;
-  /**
-   * Popover trigger element (for popover mode).
-   */
-  popoverTrigger?: React.ReactNode;
-}
-
-/**
- * Resolve width to CSS-compatible value
- */
-function resolveWidth(width: string | number | undefined): string | undefined {
-  if (width == null) return undefined;
-  if (typeof width === 'number') return `${width}px`;
-  return width;
-}
-
-/**
- * Compute CSS style from NavigationConfig width
- */
-function getWidthStyle(width: string | number | undefined): React.CSSProperties {
-  const resolved = resolveWidth(width);
-  if (!resolved) return {};
-  return { maxWidth: resolved, width: '100%' };
-}
-
-/**
- * NavigationOverlay — renders record detail in the configured overlay mode.
- *
- * Supports:
- * - **drawer**: Right-side Sheet panel
- * - **modal**: Center Dialog overlay
- * - **split**: Side-by-side ResizablePanelGroup
- * - **popover**: Hoverable/clickable popover card
- * - **page / new_window / none**: No overlay rendered (handled by hook)
- */
-export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
-  isOpen,
-  selectedRecord,
-  mode,
-  close,
-  setIsOpen,
-  width,
-  view,
-  title,
-  description,
-  className,
-  children,
-  renderView,
-  mainContent,
-  popoverTrigger,
-}) => {
-  // Non-overlay modes don't render anything
-  if (mode === 'page' || mode === 'new_window' || mode === 'none') {
-    return null;
-  }
-
-  if (!selectedRecord) {
-    return null;
-  }
-
-  const widthStyle = getWidthStyle(width);
-  const resolvedTitle = title || 'Record Detail';
-
-  // Use renderView when both renderView and view are provided; otherwise fallback to children
-  const renderContent = (record: Record<string, unknown>) => {
-    if (renderView && view) {
-      return renderView(record, view);
-    }
-    return children(record);
-  };
-
-  // --- Drawer Mode (Sheet) ---
-  if (mode === 'drawer') {
-    return (
-      <Sheet open={isOpen} onOpenChange={setIsOpen}>
-        <SheetContent
-          side="right"
-          className={cn('w-full sm:max-w-2xl overflow-y-auto', className)}
-          style={widthStyle}
-        >
-          <SheetHeader>
-            <SheetTitle>{resolvedTitle}</SheetTitle>
-            {description && <SheetDescription>{description}</SheetDescription>}
-          </SheetHeader>
-          <div className="mt-4">
-            {renderContent(selectedRecord)}
-          </div>
-        </SheetContent>
-      </Sheet>
-    );
-  }
-
-  // --- Modal Mode (Dialog) ---
-  if (mode === 'modal') {
-    return (
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent
-          className={cn('max-w-2xl max-h-[90vh] overflow-y-auto', className)}
-          style={widthStyle}
-        >
-          <DialogHeader>
-            <DialogTitle>{resolvedTitle}</DialogTitle>
-            {description && <DialogDescription>{description}</DialogDescription>}
-          </DialogHeader>
-          <div className="mt-4">
-            {renderContent(selectedRecord)}
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  // --- Split Mode (Resizable Panels) ---
-  if (mode === 'split') {
-    if (!isOpen || !mainContent) {
-      return null;
-    }
-
-    // Calculate panel sizes based on width config
-    const detailPercent = width
-      ? typeof width === 'number'
-        ? Math.min(70, Math.max(20, (width / 1200) * 100))
-        : 40
-      : 40;
-    const mainPercent = 100 - detailPercent;
-
-    // Cast needed: ResizablePanelGroup has correct runtime behavior but
-    // vite-plugin-dts may not resolve the direction prop type correctly
-    const PanelGroup = ResizablePanelGroup as React.FC<any>;
-
-    return (
-      <PanelGroup direction="horizontal" className={cn('h-full', className)}>
-        <ResizablePanel defaultSize={mainPercent} minSize={30}>
-          {mainContent}
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={detailPercent} minSize={20}>
-          <div className="h-full overflow-y-auto p-4">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-semibold">{resolvedTitle}</h3>
-              <button
-                onClick={close}
-                className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                aria-label="Close panel"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </div>
-            {description && (
-              <p className="text-sm text-muted-foreground mb-4">{description}</p>
-            )}
-            {renderContent(selectedRecord)}
-          </div>
-        </ResizablePanel>
-      </PanelGroup>
-    );
-  }
-
-  // --- Popover Mode ---
-  if (mode === 'popover') {
-    if (!popoverTrigger) {
-      // Fallback: render as a compact floating card when no trigger element is provided
-      if (!isOpen) return null;
-      return (
-        <Dialog open={isOpen} onOpenChange={setIsOpen}>
-          <DialogContent
-            className={cn('w-96 max-h-[80vh] overflow-y-auto p-4', className)}
-            style={widthStyle}
-          >
-            <DialogHeader>
-              <DialogTitle className="text-sm">{resolvedTitle}</DialogTitle>
-              {description && <DialogDescription className="text-xs">{description}</DialogDescription>}
-            </DialogHeader>
-            <div className="mt-2">
-              {renderContent(selectedRecord)}
-            </div>
-          </DialogContent>
-        </Dialog>
-      );
-    }
-    return (
-      <Popover open={isOpen} onOpenChange={setIsOpen}>
-        {popoverTrigger && (
-          <PopoverTrigger asChild>
-            {popoverTrigger}
-          </PopoverTrigger>
-        )}
-        <PopoverContent
-          className={cn('w-96 max-h-[400px] overflow-y-auto p-4', className)}
-          style={widthStyle}
-        >
-          <div className="space-y-2">
-            <h4 className="text-sm font-semibold">{resolvedTitle}</h4>
-            {description && (
-              <p className="text-xs text-muted-foreground">{description}</p>
-            )}
-            {renderContent(selectedRecord)}
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  }
-
-  return null;
-};
-
-NavigationOverlay.displayName = 'NavigationOverlay';