@shohojdhara/atomix 0.5.1 → 0.5.4

package/scripts/cli/templates/next-templates.js

@@ -3,22 +3,40 @@
  * Optimized for Server Components and App Router
  */
 
+/**
+ * Simple Server Component — valid displayName, Props, JSDoc, a11y; no forwardRef (server).
+ */
 export const nextTemplates = {
-  /**
-   * Simple Server Component
-   */
-  simple: (name) => `/**
- * ${name} Component (Server Component)
+  simple: (name) => `import React from 'react';
+
+export interface ${name}Props {
+  /** Optional heading override */
+  title?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * ${name} — presentational server component (Atomix scaffold).
+ *
+ * @param props - ${name} properties
  */
-import React from 'react';
+export default function ${name}(props: ${name}Props) {
+  const { title = '${name}', children } = props;
 
-export default function ${name}() {
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>${name} Component</h1>
-    </div>
+    <section
+      className={\`c-${name.toLowerCase()}\`}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1 className={\`c-${name.toLowerCase()}__title\`}>{title}</h1>
+      {children}
+    </section>
   );
 }
+
+${name}.displayName = '${name}';
 `,
 
   /**
@@ -26,47 +44,80 @@ export default function ${name}() {
    */
   client: (name) => `'use client';
 
+import React, { forwardRef, useState } from 'react';
+
+export interface ${name}Props {
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
 /**
- * ${name} Component (Client Component)
+ * ${name} — client component with local state (Atomix scaffold).
  */
-import React, { useState } from 'react';
-
-export default function ${name}() {
+const ${name}Inner = forwardRef<HTMLDivElement, ${name}Props>(function ${name}Inner(
+  { title = '${name}', children, className = '' },
+  ref
+) {
   const [active, setActive] = useState(false);
 
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>${name} Component</h1>
-      <button onClick={() => setActive(!active)}>
+    <section
+      ref={ref}
+      className={[\`c-${name.toLowerCase()}\`, className].filter(Boolean).join(' ')}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1 className={\`c-${name.toLowerCase()}__title\`}>{title}</h1>
+      {children}
+      <button type="button" onClick={() => setActive(!active)} aria-pressed={active}>
         Toggle: {active ? 'On' : 'Off'}
       </button>
-    </div>
+    </section>
   );
-}
+});
+
+${name}Inner.displayName = '${name}';
+
+export default ${name}Inner;
 `,
 
   /**
    * Complex Server Component with async data
    */
-  complex: (name) => `/**
- * ${name} Component (Server Component with Data)
- */
-import React from 'react';
+  complex: (name) => `import React from 'react';
 
-async function getData() {
-  // Simulating data fetch
+export interface ${name}Props {
+  title?: string;
+}
+
+async function getData(): Promise<{ title: string }> {
   return { title: '${name}' };
 }
 
-export default async function ${name}() {
+/**
+ * ${name} — async server component (Atomix scaffold).
+ */
+async function ${name}(props: ${name}Props) {
   const data = await getData();
+  const title = props.title ?? data.title;
 
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>{data.title}</h1>
-      <p>This is a complex Next.js server component.</p>
-    </div>
+    <section
+      className={\`c-${name.toLowerCase()}\`}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1>{title}</h1>
+      <p>This is a complex Next.js server component scaffold.</p>
+    </section>
   );
 }
+
+${name}.displayName = '${name}';
+
+export default ${name};
 `
 };

package/scripts/cli/templates/storybook-templates.js

@@ -5,8 +5,13 @@
 
 /**
  * Basic Storybook story template
+ * @param {string} name - Component name
+ * @param {{ storybookCssImport?: string }} [opts]
  */
-export const basicStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+export const basicStoryTemplate = (name, opts = {}) => {
+  const cssImport = opts.storybookCssImport || '@shohojdhara/atomix/scss';
+  return `import '${cssImport}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ${name} } from './${name}';
 
 const meta: Meta<typeof ${name}> = {
@@ -66,11 +71,15 @@ export const Glass: Story = {
   },
 };
 `;
+};
 
 /**
  * Enhanced Storybook story template with detailed documentation
  */
-export const enhancedStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+export const enhancedStoryTemplate = (name, opts = {}) => {
+  const cssImport = opts.storybookCssImport || '@shohojdhara/atomix/scss';
+  return `import '${cssImport}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ${name} } from './${name}';
 
 const meta: Meta<typeof ${name}> = {
@@ -226,6 +235,7 @@ export const CustomContent: Story = {
   },
 };
 `;
+};
 
 /**
  * Storybook templates object

package/scripts/cli/utils/detector.js

@@ -7,15 +7,52 @@ import { readFile } from 'fs/promises';
 import { join } from 'path';
 import { existsSync } from 'fs';
 
+const NEXT_CONFIG_FILES = [
+  'next.config.js',
+  'next.config.mjs',
+  'next.config.ts',
+  'next.config.cjs'
+];
+
+const VITE_CONFIG_FILES = [
+  'vite.config.js',
+  'vite.config.mjs',
+  'vite.config.ts',
+  'vite.config.cjs'
+];
+
+function hasFileInRoot(projectRoot, filenames) {
+  return filenames.some((name) => existsSync(join(projectRoot, name)));
+}
+
+function hasNextSignals(projectRoot, allDeps) {
+  if (allDeps.next) return true;
+  return hasFileInRoot(projectRoot, NEXT_CONFIG_FILES);
+}
+
+function hasViteSignals(projectRoot, allDeps) {
+  if (allDeps.vite) return true;
+  return hasFileInRoot(projectRoot, VITE_CONFIG_FILES);
+}
+
 /**
  * Detect the framework from package.json and project structure
  * @param {string} projectRoot - The root directory of the project
+ * @param {{ framework?: string }} [options] - Optional override: 'react' | 'next' | 'vanilla'
  * @returns {Promise<'react' | 'next' | 'vanilla'>}
  */
-export async function detectFramework(projectRoot = process.cwd()) {
+export async function detectFramework(projectRoot = process.cwd(), options = {}) {
+  const override = options.framework;
+  if (override) {
+    const o = String(override).toLowerCase();
+    if (o === 'react' || o === 'next' || o === 'vanilla') {
+      return o;
+    }
+  }
+
   try {
     const packageJsonPath = join(projectRoot, 'package.json');
-    
+
     if (!existsSync(packageJsonPath)) {
       return 'vanilla';
     }
@@ -26,17 +63,18 @@ export async function detectFramework(projectRoot = process.cwd()) {
       ...(packageJson.devDependencies || {})
     };
 
-    if (allDeps.next) {
+    if (hasNextSignals(projectRoot, allDeps)) {
       return 'next';
     }
 
-    if (allDeps.react) {
+    const hasReact = Boolean(allDeps.react);
+
+    if (hasViteSignals(projectRoot, allDeps) && hasReact) {
       return 'react';
     }
 
-    // Check for framework specific files
-    if (existsSync(join(projectRoot, 'next.config.js')) || existsSync(join(projectRoot, 'next.config.mjs'))) {
-      return 'next';
+    if (hasReact) {
+      return 'react';
     }
 
     return 'vanilla';

package/scripts/cli/utils/diagnostics.js

@@ -9,6 +9,7 @@ import { join } from 'path';
 import { readFile } from 'fs/promises';
 import { logger } from './logger.js';
 import { configLoader } from '../internal/config-loader.js';
+import { templateEngine } from '../internal/template-engine.js';
 
 /**
  * Check Node.js and NPM versions
@@ -256,6 +257,83 @@ export async function checkTokens(projectRoot = process.cwd()) {
   return results;
 }
 
+/**
+ * Generator: writable output path, optional Storybook, template registry
+ */
+export async function checkGenerator(projectRoot = process.cwd()) {
+  const results = [];
+
+  const config = await configLoader.load(projectRoot);
+  const gen = config.generator || {};
+  const out = gen.outputPath || './src/components';
+  const outPath = join(projectRoot, out);
+
+  if (existsSync(outPath)) {
+    try {
+      accessSync(outPath, constants.W_OK);
+      results.push({
+        name: 'Generator: output path',
+        status: 'pass',
+        message: `Writable: ${out}`,
+        suggestion: null
+      });
+    } catch {
+      results.push({
+        name: 'Generator: output path',
+        status: 'fail',
+        message: `Not writable: ${out}`,
+        suggestion: 'Fix permissions or set generator.outputPath in atomix.config.'
+      });
+    }
+  } else {
+    results.push({
+      name: 'Generator: output path',
+      status: 'warn',
+      message: `Missing (will be created): ${out}`,
+      suggestion: 'Create the directory or run generate to scaffold components.'
+    });
+  }
+
+  const storybookHints = ['@storybook/react', '@storybook/react-vite', '@storybook/nextjs', 'storybook'];
+  let hasStorybook = false;
+  const pkgPath = join(projectRoot, 'package.json');
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
+      const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+      hasStorybook = storybookHints.some((d) => Boolean(deps[d]));
+    } catch {
+      /* ignore */
+    }
+  }
+
+  results.push({
+    name: 'Storybook (optional)',
+    status: hasStorybook ? 'pass' : 'warn',
+    message: hasStorybook ? 'Storybook-related dependency found' : 'No Storybook in package.json',
+    suggestion: hasStorybook ? null : 'Add Storybook if you rely on generated .stories.tsx files.'
+  });
+
+  try {
+    const frameworks = templateEngine.getSupportedFrameworks();
+    results.push({
+      name: 'Generator: template registry',
+      status: frameworks.length ? 'pass' : 'fail',
+      message: frameworks.length ? `Frameworks: ${frameworks.join(', ')}` : 'Empty registry',
+      suggestion: frameworks.length ? null : 'CLI template registry failed to load.'
+    });
+  } catch (error) {
+    results.push({
+      name: 'Generator: template registry',
+      status: 'fail',
+      message: error.message,
+      suggestion: 'Reinstall the Atomix package or check scripts/cli installation.'
+    });
+  }
+
+  return results;
+}
+
 /**
  * Check directory permissions
  */

package/scripts/cli/utils/telemetry.js

@@ -14,6 +14,16 @@ class Telemetry {
     this.logs = [];
     this.startTime = null;
     this.currentCommand = null;
+    /** @type {Record<string, unknown>} */
+    this.pendingExtra = {};
+  }
+
+  /**
+   * Merge fields into the next stop() log entry (e.g. generate framework).
+   * @param {Record<string, unknown>} extra
+   */
+  recordExtra(extra) {
+    this.pendingExtra = { ...this.pendingExtra, ...extra };
   }
 
   /**
@@ -43,9 +53,12 @@ class Telemetry {
       duration: parseFloat(duration.toFixed(2)),
       timestamp: new Date().toISOString(),
       success,
+      ...this.pendingExtra,
       ...extra
     };
 
+    this.pendingExtra = {};
+
     // Anonymize if needed
     if (config.anonymize !== false) {
       delete logEntry.path;

package/src/components/Accordion/Accordion.stories.tsx

@@ -263,6 +263,10 @@ export const WithAllProps: Story = {
 };
 
 export const CompoundUsage: Story = {
+  args: {
+    title: 'Compound Accordion Example',
+    children: <p>Compound pattern content</p>
+  },
   render: args => (
     <Accordion {...args}>
       <Accordion.Header>

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -93,7 +93,7 @@ interface AtomixGlassContainerProps
   // Phase 1: Animation System props
   shaderTime?: number;
 
-  contentRef?: React.RefObject<HTMLDivElement>;
+  contentRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
 }
 

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -0,0 +1,219 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`] = `
+<div>
+  <div
+    class="c-atomix-glass"
+    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-container-position: absolute; --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-right: auto; --atomix-glass-bottom: auto; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05); --atomix-glass-overlay-highlight-opacity: 0; --atomix-glass-overlay-highlight-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 60%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-3-opacity: 0; --atomix-glass-base-opacity: 0; --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-highlight-opacity: 0;"
+  >
+    <div
+      class="c-atomix-glass__container   "
+      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(0.1px) saturate(140%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25); --atomix-glass-container-padding: 0;"
+    >
+      <div
+        class="c-atomix-glass__inner"
+      >
+        <div
+          class="c-atomix-glass__filter"
+        >
+          <svg
+            aria-hidden="true"
+            style="position: absolute; width: 100%; height: 100%; inset: 0;"
+          >
+            <defs>
+              <radialgradient
+                cx="50%"
+                cy="50%"
+                id="atomix-glass-filter-_r_f_-edge-mask"
+                r="50%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="76%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="white"
+                  stop-opacity="1"
+                />
+              </radialgradient>
+              <filter
+                color-interpolation-filters="sRGB"
+                height="170%"
+                id="atomix-glass-filter-_r_f_"
+                width="170%"
+                x="-35%"
+                y="-35%"
+              >
+                <feimage
+                  height="100%"
+                  href="data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
+                  id="atomix-glass-filter-_r_f_-image"
+                  preserveAspectRatio="xMidYMid slice"
+                  result="DISPLACEMENT_MAP"
+                  width="100%"
+                  x="0"
+                  y="0"
+                />
+                <fecolormatrix
+                  in="DISPLACEMENT_MAP"
+                  result="EDGE_INTENSITY"
+                  type="matrix"
+                  values="0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0 0 0 1 0"
+                />
+                <fecomponenttransfer
+                  in="EDGE_INTENSITY"
+                  result="EDGE_MASK"
+                >
+                  <fefunca
+                    tableValues="0 0.1 1"
+                    type="discrete"
+                  />
+                </fecomponenttransfer>
+                <feoffset
+                  dx="0"
+                  dy="0"
+                  in="SourceGraphic"
+                  result="CENTER_ORIGINAL"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="RED_DISPLACED"
+                  scale="-70"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="RED_DISPLACED"
+                  result="RED_CHANNEL"
+                  type="matrix"
+                  values="1 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="GREEN_DISPLACED"
+                  scale="-72.8"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="GREEN_DISPLACED"
+                  result="GREEN_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 1 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="BLUE_DISPLACED"
+                  scale="-74.2"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="BLUE_DISPLACED"
+                  result="BLUE_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 1 0 0
+                 0 0 0 1 0"
+                />
+                <feblend
+                  in="GREEN_CHANNEL"
+                  in2="BLUE_CHANNEL"
+                  mode="screen"
+                  result="GB_COMBINED"
+                />
+                <feblend
+                  in="RED_CHANNEL"
+                  in2="GB_COMBINED"
+                  mode="screen"
+                  result="RGB_COMBINED"
+                />
+                <fegaussianblur
+                  in="RGB_COMBINED"
+                  result="ABERRATED_BLURRED"
+                  stdDeviation="0"
+                />
+                <fecomposite
+                  in="ABERRATED_BLURRED"
+                  in2="EDGE_MASK"
+                  operator="in"
+                  result="EDGE_ABERRATION"
+                />
+                <fecomponenttransfer
+                  in="EDGE_MASK"
+                  result="INVERTED_MASK"
+                >
+                  <fefunca
+                    tableValues="1 0"
+                    type="table"
+                  />
+                </fecomponenttransfer>
+                <fecomposite
+                  in="CENTER_ORIGINAL"
+                  in2="INVERTED_MASK"
+                  operator="in"
+                  result="CENTER_CLEAN"
+                />
+                <fecomposite
+                  in="EDGE_ABERRATION"
+                  in2="CENTER_CLEAN"
+                  operator="over"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div
+            class="c-atomix-glass__filter-overlay"
+            style="filter: url(#atomix-glass-filter-_r_f_);"
+          />
+          <div
+            class="c-atomix-glass__filter-shadow"
+          />
+        </div>
+        <div
+          class="c-atomix-glass__content"
+        >
+          <div>
+            Default Glass
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--dark c-atomix-glass__background-layer--hidden"
+    />
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--black c-atomix-glass__background-layer--hidden"
+    />
+    <span
+      class="c-atomix-glass__border-backdrop"
+    />
+    <span
+      class="c-atomix-glass__border-1"
+    />
+    <span
+      class="c-atomix-glass__border-2"
+    />
+  </div>
+</div>
+`;

package/src/components/AtomixGlass/glass-utils.ts

@@ -173,7 +173,7 @@ export const extractBorderRadiusFromDOMElement = (element: HTMLElement | null):
 /**
  * Extract border-radius from React element
  */
-export const extractBorderRadiusFromElement = (element: React.ReactElement): number | null => {
+export const extractBorderRadiusFromElement = (element: React.ReactElement<any>): number | null => {
   if (!element || !element.props) {
     return null;
   }