@sociallane/elements 1.0.0

package/packages/core/includes/traits/trait-animation-controls.php

@@ -0,0 +1,194 @@
+<?php
+/**
+ * Trait: Animation Controls
+ *
+ * Reusable Elementor controls for GSAP scroll animations.
+ * Enables end users to enable/disable and configure animations per widget.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements\Traits;
+
+use Elementor\Controls_Manager;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Trait Animation_Controls
+ */
+trait Animation_Controls {
+
+	/**
+	 * Register animation section with master toggle and entrance options.
+	 *
+	 * @param bool $include_headline If true, adds headline split control before ending.
+	 * @param bool $include_stagger  If true, adds stagger controls before ending.
+	 */
+	protected function register_animation_controls( bool $include_headline = false, bool $include_stagger = false ): void {
+		$this->start_controls_section(
+			'section_animation',
+			[
+				'label' => __( 'Animation', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'enable_animation',
+			[
+				'label'   => __( 'Enable Animations', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'animation_type',
+			[
+				'label'     => __( 'Entrance Animation', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'fade-up',
+				'options'   => [
+					'none'       => __( 'None', 'sociallane-elements' ),
+					'fade-up'    => __( 'Fade Up', 'sociallane-elements' ),
+					'fade-down'  => __( 'Fade Down', 'sociallane-elements' ),
+					'fade-left'  => __( 'Fade Left', 'sociallane-elements' ),
+					'fade-right' => __( 'Fade Right', 'sociallane-elements' ),
+					'scale'      => __( 'Scale', 'sociallane-elements' ),
+					'rotate'     => __( 'Rotate', 'sociallane-elements' ),
+				],
+				'condition' => [ 'enable_animation' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'animation_delay',
+			[
+				'label'     => __( 'Delay (seconds)', 'sociallane-elements' ),
+				'type'      => Controls_Manager::NUMBER,
+				'default'   => 0,
+				'min'       => 0,
+				'max'       => 3,
+				'step'      => 0.1,
+				'condition' => [ 'enable_animation' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'animation_duration',
+			[
+				'label'     => __( 'Duration (seconds)', 'sociallane-elements' ),
+				'type'      => Controls_Manager::NUMBER,
+				'default'   => 0.6,
+				'min'       => 0.1,
+				'max'       => 3,
+				'step'      => 0.1,
+				'condition' => [ 'enable_animation' => 'yes' ],
+			]
+		);
+
+		if ( $include_headline ) {
+			$this->add_control(
+				'headline_animation',
+				[
+					'label'     => __( 'Headline Animation', 'sociallane-elements' ),
+					'type'      => Controls_Manager::SELECT,
+					'default'   => 'none',
+					'options'   => [
+						'none'  => __( 'None', 'sociallane-elements' ),
+						'words' => __( 'Split Words', 'sociallane-elements' ),
+						'chars' => __( 'Split Characters', 'sociallane-elements' ),
+						'lines' => __( 'Split Lines', 'sociallane-elements' ),
+					],
+					'condition' => [ 'enable_animation' => 'yes' ],
+				]
+			);
+		}
+
+		if ( $include_stagger ) {
+			$this->add_control(
+				'stagger_animation',
+				[
+					'label'     => __( 'Stagger Items', 'sociallane-elements' ),
+					'type'      => Controls_Manager::SWITCHER,
+					'default'   => 'yes',
+					'condition' => [ 'enable_animation' => 'yes' ],
+				]
+			);
+			$this->add_control(
+				'stagger_delay',
+				[
+					'label'     => __( 'Stagger Delay (seconds)', 'sociallane-elements' ),
+					'type'      => Controls_Manager::NUMBER,
+					'default'   => 0.1,
+					'min'       => 0.01,
+					'max'       => 0.5,
+					'step'      => 0.01,
+					'condition' => [
+						'enable_animation'  => 'yes',
+						'stagger_animation' => 'yes',
+					],
+				]
+			);
+		}
+
+		$this->end_controls_section();
+	}
+
+	/**
+	 * Register headline split animation controls.
+	 * Call after register_animation_controls to add headline-specific options to the animation section.
+	 * Use register_animation_controls_with_headline() to add both in one call.
+	 */
+	protected function register_headline_animation_controls(): void {
+		$this->add_control(
+			'headline_animation',
+			[
+				'label'     => __( 'Headline Animation', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'none',
+				'options'   => [
+					'none'  => __( 'None', 'sociallane-elements' ),
+					'words' => __( 'Split Words', 'sociallane-elements' ),
+					'chars' => __( 'Split Characters', 'sociallane-elements' ),
+					'lines' => __( 'Split Lines', 'sociallane-elements' ),
+				],
+				'condition' => [ 'enable_animation' => 'yes' ],
+			]
+		);
+	}
+
+	/**
+	 * Register stagger controls for list/card widgets.
+	 */
+	protected function register_stagger_controls(): void {
+		$this->add_control(
+			'stagger_animation',
+			[
+				'label'     => __( 'Stagger Items', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SWITCHER,
+				'default'   => 'yes',
+				'condition' => [ 'enable_animation' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'stagger_delay',
+			[
+				'label'     => __( 'Stagger Delay (seconds)', 'sociallane-elements' ),
+				'type'      => Controls_Manager::NUMBER,
+				'default'   => 0.1,
+				'min'       => 0.01,
+				'max'       => 0.5,
+				'step'      => 0.01,
+				'condition' => [
+					'enable_animation'  => 'yes',
+					'stagger_animation' => 'yes',
+				],
+			]
+		);
+	}
+}

package/packages/core/includes/traits/trait-common-controls.php

@@ -0,0 +1,239 @@
+<?php
+/**
+ * Trait: Common Elementor Controls
+ *
+ * Shared control registration for widgets that use eyebrow, headline, description,
+ * image, and dual CTA patterns. Reduces duplication across widget classes.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements\Traits;
+
+use Elementor\Controls_Manager;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Trait Common_Controls
+ */
+trait Common_Controls {
+
+	/**
+	 * Register eyebrow + text control pair.
+	 *
+	 * @param array $args Optional overrides: condition, eyebrow_placeholder
+	 */
+	protected function register_eyebrow_controls( array $args = [] ): void {
+		$use_condition = $args['condition'] ?? false;
+		$placeholder   = $args['eyebrow_placeholder'] ?? esc_html__( 'Lorem ipsum', 'sociallane-elements' );
+		$default       = $args['eyebrow_default'] ?? null;
+		$cond          = $use_condition ? [ 'condition' => [ 'show_eyebrow' => 'yes' ] ] : [];
+
+		$eyebrow_field = [
+			'label'       => esc_html__( 'Eyebrow', 'sociallane-elements' ),
+			'type'        => Controls_Manager::TEXT,
+			'placeholder' => $placeholder,
+		];
+		if ( $default !== null ) {
+			$eyebrow_field['default'] = $default;
+		}
+		$this->add_control( 'show_eyebrow', [
+			'label'   => esc_html__( 'Show Eyebrow', 'sociallane-elements' ),
+			'type'    => Controls_Manager::SWITCHER,
+			'default' => 'yes',
+		] );
+		$this->add_control( 'eyebrow', array_merge( $eyebrow_field, $cond ) );
+	}
+
+	/**
+	 * Register headline + headline_tag control pair.
+	 *
+	 * @param string $default_tag  Default heading tag (h1, h2, h3)
+	 * @param array  $args         Optional: condition, label, placeholder, type (TEXT or TEXTAREA), rows
+	 */
+	protected function register_headline_controls( string $default_tag = 'h2', array $args = [] ): void {
+		$use_condition = $args['condition'] ?? false;
+		$label         = $args['label'] ?? esc_html__( 'Headline', 'sociallane-elements' );
+		$placeholder   = $args['placeholder'] ?? esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' );
+		$type          = $args['type'] ?? Controls_Manager::TEXT;
+		$cond          = $use_condition ? [ 'condition' => [ 'show_headline' => 'yes' ] ] : [];
+
+		$headline_args = [
+			'label'       => $label,
+			'type'        => $type,
+			'default'     => $placeholder,
+			'label_block' => true,
+		];
+		if ( $type === Controls_Manager::TEXTAREA && isset( $args['rows'] ) ) {
+			$headline_args['rows'] = $args['rows'];
+		}
+
+		$this->add_control( 'show_headline', [
+			'label'   => esc_html__( 'Show Headline', 'sociallane-elements' ),
+			'type'    => Controls_Manager::SWITCHER,
+			'default' => 'yes',
+		] );
+		$this->add_control( 'headline', array_merge( $headline_args, $cond ) );
+		$this->add_control( 'headline_tag', array_merge( [
+			'label'   => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+			'type'    => Controls_Manager::SELECT,
+			'default' => $default_tag,
+			'options' => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3' ],
+		], $cond ) );
+	}
+
+	/**
+	 * Register description control with optional show switcher.
+	 *
+	 * @param array $args Optional: condition, label, default, rows
+	 */
+	protected function register_description_controls( array $args = [] ): void {
+		$condition = $args['condition'] ?? false;
+		$label     = $args['label'] ?? esc_html__( 'Description', 'sociallane-elements' );
+		$default   = $args['default'] ?? esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' );
+		$rows      = $args['rows'] ?? 3;
+		$cond      = $condition ? [ 'condition' => [ 'show_description' => 'yes' ] ] : [];
+
+		$this->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'description',
+			array_merge(
+				[
+					'label'   => $label,
+					'type'    => Controls_Manager::TEXTAREA,
+					'default' => $default,
+					'rows'    => $rows,
+				],
+				$cond
+			)
+		);
+	}
+
+	/**
+	 * Register image + image_alt control pair.
+	 *
+	 * @param array $args Optional: condition, label
+	 */
+	protected function register_image_controls( array $args = [] ): void {
+		$use_condition = $args['condition'] ?? false;
+		$cond          = $use_condition ? [ 'condition' => [ 'show_image' => 'yes' ] ] : [];
+
+		$this->add_control(
+			'show_image',
+			[
+				'label'   => esc_html__( 'Show Image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'image',
+			array_merge(
+				[
+					'label'   => esc_html__( 'Image', 'sociallane-elements' ),
+					'type'    => Controls_Manager::MEDIA,
+					'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+				],
+				$cond
+			)
+		);
+		$this->add_control(
+			'image_alt',
+			array_merge(
+				[
+					'label'       => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+					'type'        => Controls_Manager::TEXT,
+					'description' => esc_html__( 'Required for accessibility', 'sociallane-elements' ),
+					'label_block' => true,
+				],
+				$cond
+			)
+		);
+	}
+
+	/**
+	 * Register dual CTA controls (primary + secondary).
+	 *
+	 * @param array $args Optional: primary_style, secondary_style
+	 */
+	protected function register_dual_cta_controls( array $args = [] ): void {
+		$primary_style   = $args['primary_style'] ?? 'primary';
+		$secondary_style = $args['secondary_style'] ?? 'outline';
+
+		$this->add_control(
+			'show_cta_primary',
+			[
+				'label'   => esc_html__( 'Show Primary Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'cta_primary_text',
+			[
+				'label'   => esc_html__( 'Primary Button Text', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+			]
+		);
+		$this->add_control(
+			'cta_primary_url',
+			[
+				'label' => esc_html__( 'Primary Button URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+		$this->add_control(
+			'cta_primary_style',
+			[
+				'label'   => esc_html__( 'Primary Button Style', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => $primary_style,
+				'options' => function_exists( 'sociallane_get_button_preset_options' ) ? sociallane_get_button_preset_options() : [ 'primary' => 'Primary' ],
+			]
+		);
+
+		$this->add_control(
+			'show_cta_secondary',
+			[
+				'label'   => esc_html__( 'Show Secondary Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'cta_secondary_text',
+			[
+				'label'   => esc_html__( 'Secondary Button Text', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+			]
+		);
+		$this->add_control(
+			'cta_secondary_url',
+			[
+				'label' => esc_html__( 'Secondary Button URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+		$this->add_control(
+			'cta_secondary_style',
+			[
+				'label'   => esc_html__( 'Secondary Button Style', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => $secondary_style,
+				'options' => function_exists( 'sociallane_get_button_preset_options' ) ? sociallane_get_button_preset_options() : [ 'outline' => 'Outline' ],
+			]
+		);
+	}
+}

package/packages/core/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@sociallane/core",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./css": "./assets/dist/tailwind.css",
+    "./js": "./assets/dist/animations.js"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/vite": "^4",
+    "tailwindcss": "^4",
+    "vite": "^5.1.4"
+  },
+  "dependencies": {
+    "gsap": "^3.14.2",
+    "lenis": "^1.3.17"
+  }
+}

package/packages/core/vite.config.js

@@ -0,0 +1,123 @@
+/**
+ * Vite Configuration — @sociallane/core
+ *
+ * Builds Tailwind CSS and GSAP animations for SocialLane Elements.
+ * Output: packages/core/assets/dist/
+ *
+ * @see https://vitejs.dev/config/
+ * @see https://tailwindcss.com/docs/installation/using-vite
+ */
+
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { readdirSync } from 'fs';
+import tailwindcss from '@tailwindcss/vite';
+
+/**
+ * Collect PHP and CSS file paths under dir (for build --watch). Tailwind @source
+ * scans PHP for classes; adding them to the watcher triggers rebuild on change.
+ */
+function collectWatchFiles(
+  dir,
+  ext,
+  files = [],
+  skip = new Set(['node_modules', '.git', 'vendor', 'assets/dist'])
+) {
+  try {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const path = resolve(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (!skip.has(entry.name)) collectWatchFiles(path, ext, files, skip);
+      } else if (entry.name.endsWith(ext)) {
+        files.push(path);
+      }
+    }
+  } catch (_) {}
+  return files;
+}
+
+/** Plugin: in build --watch, watch PHP/CSS so Tailwind rebuilds when templates change. */
+function watchTailwindContent() {
+  return {
+    name: 'watch-tailwind-content',
+    apply: 'build',
+    buildStart() {
+      const root = __dirname;
+      for (const file of collectWatchFiles(root, '.php'))
+        this.addWatchFile(file);
+      for (const file of collectWatchFiles(resolve(root, 'assets'), '.css'))
+        this.addWatchFile(file);
+      for (const file of collectWatchFiles(resolve(root, 'assets'), '.js'))
+        this.addWatchFile(file);
+    },
+  };
+}
+
+export default defineConfig(({ mode }) => {
+  const isDev = mode === 'development';
+
+  return {
+    plugins: [tailwindcss(), watchTailwindContent()],
+
+    build: {
+      outDir: 'assets/dist',
+      manifest: true,
+      emptyOutDir: true,
+      watch: {
+        usePolling: true,
+        interval: 300,
+      },
+      rollupOptions: {
+        input: {
+          tailwind: resolve(__dirname, 'assets/css/tailwind.css'),
+          animations: resolve(__dirname, 'assets/js/animations.js'),
+        },
+        output: {
+          entryFileNames: '[name]-[hash].js',
+          chunkFileNames: '[name]-[hash].js',
+          assetFileNames: '[name]-[hash][extname]',
+        },
+      },
+      minify: 'esbuild',
+      cssCodeSplit: true,
+      sourcemap: isDev,
+      target: 'es2020',
+    },
+
+    server: {
+      host: 'localhost',
+      port: 5173,
+      strictPort: true,
+      cors: true,
+      https: isDev,
+      allowedHosts: isDev ? true : [],
+      hmr: {
+        host: 'localhost',
+        port: 5173,
+        protocol: isDev ? 'wss' : 'ws',
+        clientPort: 5173,
+      },
+      watch: {
+        include: ['**/*.php', '**/*.css'],
+        usePolling: true,
+        interval: 300,
+      },
+    },
+
+    css: {
+      devSourcemap: true,
+    },
+
+    optimizeDeps: {
+      include: [],
+    },
+
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'assets'),
+        '@css': resolve(__dirname, 'assets/css'),
+        '@js': resolve(__dirname, 'assets/js'),
+      },
+    },
+  };
+});