@libreapps/ui 5.4.1

package/bin/update-registry.js

@@ -0,0 +1,196 @@
+#!/usr/bin/env node
+
+/**
+ * This script updates the registry.json file based on components
+ * found in the registry directory. It's similar to the approach used by libreapps/ui.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+// Configuration
+const REGISTRY_DIR = path.resolve(__dirname, '../registry');
+const PUBLIC_DIR = path.resolve(__dirname, '../public');
+const OUTPUT_FILE = path.resolve(__dirname, '../registry.json');
+const REGISTRY_STYLES = ['default', 'new-york']; // Add other styles as needed
+
+// Schema for registry.json
+const registrySchema = {
+  "$schema": "https://ui.libreapps.com/schema/registry.json",
+  "name": "libreapps",
+  "homepage": "https://ui.libreapps.com",
+  "items": []
+};
+
+/**
+ * Main function to update the registry
+ */
+async function updateRegistry() {
+  try {
+    console.log('Updating registry.json...');
+    
+    // Find all registry components
+    const items = [];
+    
+    // Process each style directory
+    for (const style of REGISTRY_STYLES) {
+      const styleDir = path.join(REGISTRY_DIR, style);
+      
+      // Skip if style directory doesn't exist
+      if (!fs.existsSync(styleDir)) {
+        console.log(`Style directory not found: ${style}`);
+        continue;
+      }
+      
+      // Process UI components
+      const uiDir = path.join(styleDir, 'ui');
+      if (fs.existsSync(uiDir)) {
+        const uiComponents = glob.sync(`${uiDir}/**/!(*.test|*.spec).{ts,tsx,js,jsx}`);
+        
+        for (const filePath of uiComponents) {
+          const relativePath = path.relative(REGISTRY_DIR, filePath);
+          const dirName = path.basename(path.dirname(filePath));
+          const fileName = path.basename(filePath);
+          
+          // Skip index files and non-component files
+          if (fileName === 'index.ts' || fileName === 'index.tsx') continue;
+          
+          // Component name is usually the directory name
+          const name = dirName;
+          
+          // Check if component already exists in the registry
+          if (!items.find(item => item.name === name && item.type === 'registry:component')) {
+            const componentMeta = {
+              name,
+              type: 'registry:component',
+              description: `A ${name} component for your UI.`,
+              files: [
+                {
+                  path: relativePath,
+                  type: 'registry:component'
+                }
+              ],
+              registryDependencies: []
+            };
+            
+            // Try to parse dependencies from the file content
+            try {
+              const content = fs.readFileSync(filePath, 'utf8');
+              
+              // Find import statements for other components
+              const dependencies = [];
+              const importRegex = /import.*from ['"]@\/components\/ui\/([^'"]+)['"]/g;
+              let match;
+              
+              while ((match = importRegex.exec(content)) !== null) {
+                const dependency = match[1];
+                if (!dependencies.includes(dependency)) {
+                  dependencies.push(dependency);
+                }
+              }
+              
+              if (dependencies.length > 0) {
+                componentMeta.registryDependencies = dependencies;
+              }
+            } catch (error) {
+              console.warn(`Error parsing dependencies for ${name}:`, error.message);
+            }
+            
+            items.push(componentMeta);
+          }
+        }
+      }
+      
+      // Process other component types (blocks, etc.)
+      const blockDir = path.join(styleDir, 'block');
+      if (fs.existsSync(blockDir)) {
+        const blocks = glob.sync(`${blockDir}/**/!(*.test|*.spec).{ts,tsx,js,jsx}`);
+        
+        for (const filePath of blocks) {
+          const relativePath = path.relative(REGISTRY_DIR, filePath);
+          const dirName = path.basename(path.dirname(filePath));
+          
+          // Skip helper files
+          if (dirName === 'utils' || dirName === 'helpers') continue;
+          
+          // Block name is usually the directory name
+          const name = dirName;
+          
+          // Check if block already exists in the registry
+          if (!items.find(item => item.name === name && item.type === 'registry:block')) {
+            items.push({
+              name,
+              type: 'registry:block',
+              description: `A ${name} block for your UI.`,
+              files: [
+                {
+                  path: relativePath,
+                  type: 'registry:block'
+                }
+              ]
+            });
+          }
+        }
+      }
+    }
+    
+    // Add style definition
+    for (const style of REGISTRY_STYLES) {
+      items.push({
+        name: style,
+        type: 'registry:style',
+        description: `The ${style} style for LibreApps UI components.`,
+        files: []
+      });
+    }
+    
+    // Update registry.json
+    registrySchema.items = items;
+    
+    // Create output directory if it doesn't exist
+    const outputDir = path.dirname(OUTPUT_FILE);
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+    
+    // Write registry.json
+    fs.writeFileSync(OUTPUT_FILE, JSON.stringify(registrySchema, null, 2), 'utf8');
+    console.log(`Registry updated with ${items.length} items.`);
+    
+    // Create public/r directory if it doesn't exist
+    const publicRDir = path.join(PUBLIC_DIR, 'r');
+    if (!fs.existsSync(publicRDir)) {
+      fs.mkdirSync(publicRDir, { recursive: true });
+    }
+    
+    // Generate individual component JSON files
+    console.log('Generating individual component JSON files...');
+    for (const item of items) {
+      const componentFile = path.join(publicRDir, `${item.name}.json`);
+      
+      // Add content to files if they exist
+      if (item.files && item.files.length > 0) {
+        for (const file of item.files) {
+          const filePath = path.join(REGISTRY_DIR, file.path);
+          if (fs.existsSync(filePath)) {
+            file.content = fs.readFileSync(filePath, 'utf8');
+          }
+        }
+      }
+      
+      // Write component JSON file
+      fs.writeFileSync(componentFile, JSON.stringify(item, null, 2), 'utf8');
+    }
+    
+    console.log(`Generated ${items.length} component JSON files.`);
+    console.log('Registry update complete!');
+    
+  } catch (error) {
+    console.error('Error updating registry:', error);
+    process.exit(1);
+  }
+}
+
+// Run the update
+updateRegistry();

package/content/index.ts

@@ -0,0 +1,26 @@
+// General-purpose content components
+// Import from @libreapps/ui/content for high-level content blocks
+// These are NOT docs-specific - use them anywhere you need cards, tabs, steps, callouts, etc.
+
+// Card grid for navigation/features
+export { Card, Cards } from '../docs/components/card'
+export type { CardProps } from '../docs/components/card'
+
+// Enhanced tabs with items prop for simple usage
+export { Tab, Tabs, TabsList, TabsTrigger, TabsContent } from '../docs/components/tabs'
+export type { TabProps, TabsProps } from '../docs/components/tabs'
+
+// Step-by-step guides
+export { Step, Steps } from '../docs/components/steps'
+
+// Info/warning/error callouts
+export {
+  Callout,
+  CalloutContainer,
+  CalloutTitle,
+  CalloutDescription,
+} from '../docs/components/callout'
+export type { CalloutType, CalloutContainerProps } from '../docs/components/callout'
+
+// Enhanced accordions with URL hash integration
+export { Accordion, Accordions } from '../docs/components/accordion'

package/dist/3d/button.js

@@ -0,0 +1,298 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var utils = require('@libreapps/ui/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var button3DVariants = classVarianceAuthority.cva(
+  [
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+    "transform-gpu will-change-transform active:scale-95",
+    "before:absolute before:inset-0 before:rounded-md before:transition-all before:duration-150",
+    "after:absolute after:inset-0 after:rounded-md after:transition-all after:duration-150"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+          "before:bg-gradient-to-t before:from-primary/80 before:to-primary before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        destructive: [
+          "bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90",
+          "before:bg-gradient-to-t before:from-destructive/80 before:to-destructive before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        outline: [
+          "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "before:bg-gradient-to-t before:from-muted/50 before:to-background before:translate-y-1 before:border before:border-input",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        secondary: [
+          "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80",
+          "before:bg-gradient-to-t before:from-secondary/80 before:to-secondary before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        ghost: [
+          "text-foreground hover:bg-accent hover:text-accent-foreground",
+          "before:bg-gradient-to-t before:from-accent/30 before:to-accent/10 before:translate-y-1 before:opacity-0",
+          "hover:before:opacity-100 hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/10 after:to-transparent after:opacity-0",
+          "hover:after:opacity-50"
+        ],
+        link: [
+          "text-primary underline-offset-4 hover:underline",
+          "before:hidden after:hidden"
+        ],
+        neon: [
+          "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100",
+          "hover:shadow-purple-500/25 hover:shadow-2xl"
+        ],
+        glass: [
+          "bg-white/10 backdrop-blur-md border border-white/20 text-foreground shadow-lg",
+          "before:bg-gradient-to-t before:from-white/5 before:to-white/20 before:translate-y-1 before:backdrop-blur-md before:border before:border-white/20",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/30 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100"
+        ],
+        gradient: [
+          "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white shadow-lg",
+          "before:bg-gradient-to-t before:from-blue-600 before:via-purple-600 before:to-pink-600 before:translate-y-1 before:shadow-lg",
+          "hover:before:translate-y-0.5 active:before:translate-y-0",
+          "after:bg-gradient-to-b after:from-white/20 after:to-transparent after:opacity-0",
+          "hover:after:opacity-100",
+          "hover:bg-gradient-to-r hover:from-blue-400 hover:via-purple-400 hover:to-pink-400"
+        ]
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        xl: "h-12 rounded-lg px-10 text-base",
+        icon: "h-10 w-10"
+      },
+      depth: {
+        none: "before:translate-y-0",
+        sm: "before:translate-y-0.5 hover:before:translate-y-0 active:before:translate-y-0",
+        default: "before:translate-y-1 hover:before:translate-y-0.5 active:before:translate-y-0",
+        lg: "before:translate-y-1.5 hover:before:translate-y-0.5 active:before:translate-y-0",
+        xl: "before:translate-y-2 hover:before:translate-y-1 active:before:translate-y-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      depth: "default"
+    }
+  }
+);
+var Button3D = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    depth,
+    tiltOnHover = false,
+    glowIntensity = 0,
+    shadowColor,
+    pressAnimation = true,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    style,
+    ...props
+  }, ref) => {
+    const buttonRef = React__namespace.useRef(null);
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const [isPressed, setIsPressed] = React__namespace.useState(false);
+    const [tiltTransform, setTiltTransform] = React__namespace.useState({ x: 0, y: 0 });
+    const updateTilt = React__namespace.useCallback(
+      (e) => {
+        if (!tiltOnHover || !buttonRef.current) return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = (e.clientX - centerX) / (rect.width / 2);
+        const deltaY = (e.clientY - centerY) / (rect.height / 2);
+        setTiltTransform({
+          x: deltaY * -10,
+          // Inverted for more natural feel
+          y: deltaX * 10
+        });
+      },
+      [tiltOnHover]
+    );
+    const resetTilt = React__namespace.useCallback(() => {
+      setTiltTransform({ x: 0, y: 0 });
+    }, []);
+    const handleMouseEnter = React__namespace.useCallback(
+      (e) => {
+        setIsHovered(true);
+        onMouseEnter?.(e);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = React__namespace.useCallback(
+      (e) => {
+        setIsHovered(false);
+        resetTilt();
+        onMouseLeave?.(e);
+      },
+      [onMouseLeave, resetTilt]
+    );
+    const handleMouseMove = React__namespace.useCallback(
+      (e) => {
+        if (tiltOnHover) {
+          updateTilt(e);
+        }
+        onMouseMove?.(e);
+      },
+      [onMouseMove, tiltOnHover, updateTilt]
+    );
+    const handleMouseDown = React__namespace.useCallback(
+      (e) => {
+        if (pressAnimation) {
+          setIsPressed(true);
+        }
+        onMouseDown?.(e);
+      },
+      [onMouseDown, pressAnimation]
+    );
+    const handleMouseUp = React__namespace.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onMouseUp?.(e);
+      },
+      [onMouseUp]
+    );
+    React__namespace.useImperativeHandle(ref, () => buttonRef.current);
+    const buttonStyle = {
+      ...style,
+      transform: tiltOnHover ? `perspective(1000px) rotateX(${tiltTransform.x}deg) rotateY(${tiltTransform.y}deg) ${isPressed ? "translateY(1px)" : ""}` : isPressed ? "translateY(1px)" : void 0,
+      filter: glowIntensity > 0 ? `drop-shadow(0 0 ${glowIntensity * 4}px ${shadowColor || "currentColor"})` : void 0,
+      transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: buttonRef,
+        className: utils.cn(button3DVariants({ variant, size, depth }), className),
+        style: buttonStyle,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 flex items-center justify-center gap-2", children })
+      }
+    );
+  }
+);
+Button3D.displayName = "Button3D";
+var Button3DPreset = {
+  Hero: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "gradient",
+      size: "xl",
+      depth: "lg",
+      tiltOnHover: true,
+      glowIntensity: 2,
+      ...props
+    }
+  )),
+  CTA: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "neon",
+      size: "lg",
+      depth: "default",
+      tiltOnHover: true,
+      glowIntensity: 1,
+      ...props
+    }
+  )),
+  Glass: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "glass",
+      size: "default",
+      depth: "sm",
+      tiltOnHover: true,
+      ...props
+    }
+  )),
+  Minimal: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button3D, { ref, variant: "ghost", size: "default", depth: "sm", ...props })),
+  Danger: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Button3D,
+    {
+      ref,
+      variant: "destructive",
+      size: "default",
+      depth: "default",
+      shadowColor: "rgb(239 68 68)",
+      ...props
+    }
+  ))
+};
+Button3DPreset.Hero.displayName = "Button3DPreset.Hero";
+Button3DPreset.CTA.displayName = "Button3DPreset.CTA";
+Button3DPreset.Glass.displayName = "Button3DPreset.Glass";
+Button3DPreset.Minimal.displayName = "Button3DPreset.Minimal";
+Button3DPreset.Danger.displayName = "Button3DPreset.Danger";
+var Button3DLoading = React__namespace.forwardRef(({ loading = false, children, disabled, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button3D, { ref, disabled: disabled || loading, ...props, children: [
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent" }),
+    !loading && children
+  ] });
+});
+Button3DLoading.displayName = "Button3DLoading";
+
+exports.Button3D = Button3D;
+exports.Button3DLoading = Button3DLoading;
+exports.Button3DPreset = Button3DPreset;
+exports.button3DVariants = button3DVariants;