@object-ui/components 3.3.0 → 3.3.1

package/src/index.css

@@ -1,245 +0,0 @@
-@import 'tailwindcss';
-
-/* Scan sources for Tailwind classes */
-@source '../src/**/*.{ts,tsx}';
-
-/* Tailwind plugin for animations */
-@plugin 'tailwindcss-animate';
-
-/* Define theme colors for Tailwind 4 */
-@theme {
-  /* Border radius tokens */
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  /* Color tokens mapped to CSS variables */
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-sidebar: hsl(var(--sidebar));
-  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
-  --color-sidebar-primary: hsl(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: hsl(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-  --color-sidebar-border: hsl(var(--sidebar-border));
-  --color-sidebar-ring: hsl(var(--sidebar-ring));
-
-  /* Chart colors */
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
-}
-
-/* CSS custom properties for theme */
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-
-  --radius: 0.5rem;
-
-  --config-panel-width: 320px;
-
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-
-  /* Sidebar colors */
-  --sidebar: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
-
-  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-
-  /* Sidebar colors for dark mode */
-  --sidebar: 240 5.9% 10%;
-  --sidebar-foreground: 240 4.8% 95.9%;
-  --sidebar-primary: 224.3 76.3% 48%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 3.7% 15.9%;
-  --sidebar-accent-foreground: 240 4.8% 95.9%;
-  --sidebar-border: 240 3.7% 15.9%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
-}
-
-* {
-  border-color: hsl(var(--border));
-}
-
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-}
-
-/* Sidebar explicit rules for Tailwind 4 compatibility */
-
-/* Icon mode: collapsed state = icon width, expanded state = full width */
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-  width: var(--sidebar-width-icon);
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-  width: var(--sidebar-width);
-}
-
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-  width: calc(var(--sidebar-width-icon) + 1rem);
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-  width: var(--sidebar-width);
-}
-
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-  width: var(--sidebar-width);
-}
-
-/* Labels visibility - only hide when BOTH icon mode AND collapsed */
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 0;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 1;
-}
-
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: -2rem;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: 0;
-}
-
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: none;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: block;
-}
-
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: hidden;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: visible;
-}
-
-/* Menu button behavior - collapsed = icon only, expanded = full width */
-.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode {
-  width: 2rem !important;
-  height: 2rem !important;
-  padding: 0.5rem !important;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode {
-  width: 100%;
-  height: auto;
-  padding: 0.5rem;
-}
-
-.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode-lg {
-  padding: 0 !important;
-}
-
-.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode-lg {
-  padding: 0.5rem;
-}
-
-/* Offcanvas mode: always collapsed = 0 width */
-.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
-  width: 0;
-}

package/src/index.ts

@@ -1,47 +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 './index.css';
-
-// Register all ObjectUI renderers (side-effects)
-import './renderers'; 
-
-// Export utils
-export { cn } from './lib/utils';
-export { renderChildren } from './lib/utils';
-export { cva } from 'class-variance-authority';
-
-// Export placeholder registration
-export { registerPlaceholders } from './renderers/placeholders';
-
-// Export raw Shadcn UI components
-export * from './ui';
-export * from './custom';
-
-// Export hooks
-export { useConfigDraft } from './hooks/use-config-draft';
-export type { UseConfigDraftOptions, UseConfigDraftReturn } from './hooks/use-config-draft';
-
-// Export config panel types
-export type {
-  ControlType,
-  ConfigField,
-  ConfigSection,
-  ConfigPanelSchema,
-} from './types/config-panel';
-
-// Export an init function to ensure components are registered
-// This is a workaround for bundlers that might tree-shake side-effect imports
-export function initializeComponents() {
-  // This function exists to ensure the import side-effects above are executed
-  // Simply importing this module should register all components
-  return true;
-}
-
-// Debug panel (tree-shakeable — only included when imported)
-export * from './debug';

package/src/lib/use-sync-external-store-shim.ts

@@ -1,10 +0,0 @@
-/**
- * ESM re-export of useSyncExternalStore from React.
- *
- * React 18+ ships useSyncExternalStore natively. The CJS shim package
- * (`use-sync-external-store/shim`) uses `require("react")` which
- * produces a Rolldown `require` polyfill incompatible with Next.js
- * Turbopack SSR. This module provides the same API surface using a
- * static ESM import instead.
- */
-export { useSyncExternalStore } from 'react';

package/src/lib/use-sync-external-store-with-selector-shim.ts

@@ -1,90 +0,0 @@
-/**
- * ESM re-export of useSyncExternalStoreWithSelector.
- *
- * The CJS shim package uses `require("react")` which produces a
- * Rolldown `require` polyfill incompatible with Next.js Turbopack SSR.
- * This module provides a pure-ESM implementation using React 18+
- * native useSyncExternalStore.
- */
-import { useRef, useEffect, useMemo, useDebugValue, useSyncExternalStore } from 'react';
-
-function is(x: unknown, y: unknown): boolean {
-  return (x === y && (0 !== x || 1 / (x as number) === 1 / (y as number))) || (x !== x && y !== y);
-}
-
-const objectIs: (x: unknown, y: unknown) => boolean =
-  typeof Object.is === 'function' ? Object.is : is;
-
-export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
-  subscribe: (onStoreChange: () => void) => () => void,
-  getSnapshot: () => Snapshot,
-  getServerSnapshot: undefined | null | (() => Snapshot),
-  selector: (snapshot: Snapshot) => Selection,
-  isEqual?: (a: Selection, b: Selection) => boolean,
-): Selection {
-  const instRef = useRef<{
-    hasValue: boolean;
-    value: Selection;
-  } | null>(null);
-  let inst: { hasValue: boolean; value: Selection };
-  if (instRef.current === null) {
-    inst = { hasValue: false, value: null as Selection };
-    instRef.current = inst;
-  } else {
-    inst = instRef.current;
-  }
-
-  const [getSelection, getServerSelection] = useMemo(() => {
-    let hasMemo = false;
-    let memoizedSnapshot: Snapshot;
-    let memoizedSelection: Selection;
-    const memoizedSelector = (nextSnapshot: Snapshot): Selection => {
-      if (!hasMemo) {
-        hasMemo = true;
-        memoizedSnapshot = nextSnapshot;
-        const nextSelection = selector(nextSnapshot);
-        if (isEqual !== undefined) {
-          if (inst.hasValue) {
-            const currentSelection = inst.value;
-            if (isEqual(currentSelection, nextSelection)) {
-              memoizedSelection = currentSelection;
-              return currentSelection;
-            }
-          }
-        }
-        memoizedSelection = nextSelection;
-        return nextSelection;
-      }
-      const prevSnapshot = memoizedSnapshot;
-      const prevSelection = memoizedSelection;
-      if (objectIs(prevSnapshot, nextSnapshot)) {
-        return prevSelection;
-      }
-      const nextSelection = selector(nextSnapshot);
-      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-        memoizedSnapshot = nextSnapshot;
-        return prevSelection;
-      }
-      memoizedSnapshot = nextSnapshot;
-      memoizedSelection = nextSelection;
-      return nextSelection;
-    };
-    const maybeGetServerSelection =
-      getServerSnapshot === undefined || getServerSnapshot === null
-        ? undefined
-        : () => memoizedSelector(getServerSnapshot());
-    return [() => memoizedSelector(getSnapshot()), maybeGetServerSelection];
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
-
-  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-
-  useEffect(() => {
-    inst.hasValue = true;
-    inst.value = value;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
-  useDebugValue(value);
-  return value;
-}

package/src/lib/utils.tsx

@@ -1,35 +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 { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-import { SchemaRenderer } from "@object-ui/react"
-import React from "react"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function renderChildren(children: any): React.ReactNode {
-  if (!children) return null;
-  if (typeof children === 'string' || typeof children === 'number') {
-    return children;
-  }
-  if (Array.isArray(children)) {
-    if (children.length === 0) return null;
-    // Unwrap single child to support Radix UI 'asChild' pattern which expects a single ReactElement, not an array
-    if (children.length === 1) {
-      return <SchemaRenderer schema={children[0]} />; 
-    }
-    return children.map((child, index) => (
-      <SchemaRenderer key={child.id || index} schema={child} />
-    ));
-  }
-  return <SchemaRenderer schema={children} />;
-}
-

package/src/new-components.test.ts

@@ -1,73 +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 { describe, it, expect, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
-
-describe('New Components Registration', () => {
-  // Import all renderers to register them
-  beforeAll(async () => {
-    await import('./renderers');
-  });
-
-  describe('Form Components', () => {
-    it('should register date-picker component', () => {
-      const component = ComponentRegistry.getConfig('date-picker');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Date Picker');
-    });
-
-    it('should register file-upload component', () => {
-      const component = ComponentRegistry.getConfig('file-upload');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('File Upload');
-    });
-  });
-
-  describe('Data Display Components', () => {
-    it('should register list component', () => {
-      const component = ComponentRegistry.getConfig('list');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('List');
-    });
-
-    it('should register tree-view component', () => {
-      const component = ComponentRegistry.getConfig('tree-view');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Tree View');
-    });
-  });
-
-  describe('Layout Components', () => {
-    it('should register grid component', () => {
-      const component = ComponentRegistry.getConfig('grid');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Grid Layout');
-    });
-
-    it('should register flex component', () => {
-      const component = ComponentRegistry.getConfig('flex');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Flex Layout');
-    });
-
-    it('should register container component', () => {
-      const component = ComponentRegistry.getConfig('container');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Container');
-    });
-  });
-
-  describe('Feedback Components', () => {
-    it('should register loading component', () => {
-      const component = ComponentRegistry.getConfig('loading');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Loading');
-    });
-  });
-});