@shohojdhara/atomix 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -302,4 +302,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/scripts/atomix-cli.js

@@ -78,6 +78,15 @@ const packageJson = JSON.parse(
 // CLI Configuration
 const DEBUG = process.env.ATOMIX_DEBUG === 'true' || process.argv.includes('--debug');
 
+const SENSITIVE_KEYS = /password|secret|token|api[-_]?key|access[-_]?key|auth[-_]?token|authorization|credential/i;
+
+function sensitiveDataReplacer(key, value) {
+  if (key && SENSITIVE_KEYS.test(key)) {
+    return '***REDACTED***';
+  }
+  return value;
+}
+
 /**
  * Debug logger
  */
@@ -85,7 +94,7 @@ function debug(message, data = null) {
   if (DEBUG) {
     console.log(chalk.gray(`[DEBUG] ${message}`));
     if (data) {
-      console.log(chalk.gray(JSON.stringify(data, null, 2),));
+      console.log(chalk.gray(JSON.stringify(data, sensitiveDataReplacer, 2)));
     }
   }
 }

package/scripts/cli/__tests__/utils.test.js

@@ -115,12 +115,16 @@ describe('CLI Utils', () => {
         'command | pipe',
         '`substitution`',
         '$(command)',
-        'input > /dev/null'
+        'input > /dev/null',
+        '"quoted"',
+        "'singlequoted'",
+        '" $(whoami) "',
+        "' ; rm -rf / '"
       ];
       
       dangerousInputs.forEach(input => {
         const sanitized = sanitizeInput(input);
-        expect(sanitized).not.toMatch(/[;&|`$<>]/);
+        expect(sanitized).not.toMatch(/[;&|`$<>\\"']/);
       });
     });
 

package/scripts/cli/migration-tools.js

@@ -3,7 +3,7 @@
  * Helps migrate from other design systems and CSS frameworks
  */
 
-import { readFile, writeFile, readdir, stat } from 'fs/promises';
+import { readFile, writeFile, readdir, lstat } from 'fs/promises';
 import { join, extname, relative } from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
@@ -329,7 +329,7 @@ async function getAllFiles(dir, extensions = []) {
 
     for (const entry of entries) {
       const fullPath = join(currentPath, entry);
-      const stats = await stat(fullPath);
+      const stats = await lstat(fullPath);
 
       if (stats.isDirectory()) {
         // Skip node_modules and hidden directories

package/scripts/cli/theme-bridge.js

@@ -3,11 +3,11 @@
  *
  * Bridges the TypeScript theme devtools CLI (src/lib/theme/devtools/CLI.ts) with the main JavaScript CLI.
  *
- * @dependency ts-node
+ * @dependency tsx
  * Theme subcommands (atomix theme validate|list|inspect|compare|export|create) run the TypeScript
- * theme CLI via ts-node. Ensure ts-node is installed in the project when using these commands:
- *   npm install --save-dev ts-node
- * If ts-node is missing, theme subcommands will fail; run `atomix doctor` to check availability.
+ * theme CLI via tsx. Ensure tsx is installed in the project when using these commands:
+ *   npm install --save-dev tsx
+ * If tsx is missing, theme subcommands will fail; run `atomix doctor` to check availability.
  */
 
 import { spawn } from 'child_process';
@@ -29,13 +29,11 @@ export async function executeThemeCommand(command, args = [], options = {}) {
     // Path to the theme CLI
     const themeCliPath = join(__dirname, '../../src/lib/theme/devtools/CLI.ts');
 
-    // Use ts-node to execute TypeScript CLI
-    const tsNodePath = join(__dirname, '../../node_modules/.bin/ts-node');
+    // Use tsx to execute TypeScript CLI
+    const tsxPath = join(__dirname, '../../node_modules/.bin/tsx');
 
     return new Promise((resolve, reject) => {
-      const child = spawn(tsNodePath, [
-        '--esm',
-        '--experimental-specifier-resolution=node',
+      const child = spawn(tsxPath, [
         themeCliPath,
         command,
         ...args

package/scripts/cli/utils.js

@@ -175,8 +175,9 @@ export function sanitizeInput(input) {
   }
 
   // Remove any shell metacharacters that could be dangerous
+  // Added single and double quotes to the blacklist to prevent shell injection
   return input
-    .replace(/[;&|`$<>\\]/g, '')
+    .replace(/[;&|`$<>\\"']/g, '')
     .replace(/\0/g, '') // Remove null bytes
     .trim();
 }

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

@@ -63,6 +63,7 @@ The Accordion component provides an expandable/collapsible container for content
 - Glass morphism effect support
 - Keyboard navigation support
 - Disabled state handling
+- **Compound Component Pattern** (new)
 
 ## Accessibility
 
@@ -81,6 +82,19 @@ The Accordion component provides an expandable/collapsible container for content
 </Accordion>
 \`\`\`
 
+### Compound Component Usage
+
+\`\`\`tsx
+<Accordion>
+  <Accordion.Header>
+    <span>Custom Header Content</span>
+  </Accordion.Header>
+  <Accordion.Body>
+    <p>Content goes here</p>
+  </Accordion.Body>
+</Accordion>
+\`\`\`
+
 ### With Custom Icon
 
 \`\`\`tsx
@@ -266,6 +280,32 @@ export const WithAllProps: Story = {
   },
 };
 
+export const CompoundUsage: Story = {
+  render: args => (
+    <Accordion {...args}>
+      <Accordion.Header>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <strong>Custom Header Layout</strong>
+          <span style={{ fontSize: '0.8em', color: '#666' }}>(with subtitle)</span>
+        </div>
+      </Accordion.Header>
+      <Accordion.Body>
+        <p>
+          This accordion uses the Compound Component pattern (Accordion.Header and Accordion.Body).
+          This allows for complete control over the header layout and content structure.
+        </p>
+      </Accordion.Body>
+    </Accordion>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the Compound Component usage pattern for custom header layouts.',
+      },
+    },
+  },
+};
+
 // ============================================================================
 // VARIANTS & STATES STORIES
 // ============================================================================

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useId, memo } from 'react';
+import React, { ReactNode, useId, memo, forwardRef } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
 import type {
@@ -9,7 +9,105 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export type AccordionProps = AccordionPropsType;
 
-export const Accordion: React.FC<AccordionProps> = memo(
+// Default icon
+const DefaultIcon = () => (
+  <i className="c-accordion__icon" aria-hidden="true">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  </i>
+);
+
+export interface AccordionHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+  title?: ReactNode;
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
+  isOpen?: boolean;
+}
+
+export const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
+  (
+    { title, icon, iconPosition = 'right', isOpen, children, className = '', ...props },
+    ref
+  ) => {
+    // Determine icon to render. Explicit check for undefined to allow null/false to hide icon.
+    const iconElement = icon === undefined ? <DefaultIcon /> : icon;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={className} // Parent injects the class names
+        {...props}
+      >
+        {title && <span className="c-accordion__title">{title}</span>}
+        {children}
+        {iconElement}
+      </button>
+    );
+  }
+);
+AccordionHeader.displayName = 'AccordionHeader';
+
+export interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  panelRef?: React.RefObject<HTMLDivElement>;
+  contentRef?: React.RefObject<HTMLDivElement>;
+}
+
+// Helper to merge refs
+function mergeRefs<T = any>(...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]) {
+  return (node: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
+  ({ children, className = '', panelRef, contentRef, ...props }, ref) => {
+    const mergedPanelRef = React.useMemo(() => mergeRefs(ref, panelRef), [ref, panelRef]);
+
+    return (
+      <div
+        ref={mergedPanelRef}
+        className={className} // Parent injects class names
+        role="region"
+        {...props}
+      >
+        <div
+          className={ACCORDION.SELECTORS.BODY.replace('.', '')}
+          ref={contentRef}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+AccordionBody.displayName = 'AccordionBody';
+
+type AccordionComponent = React.FC<AccordionProps> & {
+  Header: typeof AccordionHeader;
+  Body: typeof AccordionBody;
+};
+
+const AccordionImpl = memo(
   ({
     title,
     children,
@@ -24,7 +122,7 @@ export const Accordion: React.FC<AccordionProps> = memo(
     className = '',
     style,
     glass,
-  }) => {
+  }: AccordionProps) => {
     // Generate unique IDs for accessibility
     const instanceId = useId();
     const buttonId = `accordion-header-${instanceId}`;
@@ -49,59 +147,75 @@ export const Accordion: React.FC<AccordionProps> = memo(
       onClose,
     });
 
-    // Default icon
-    const defaultIcon = (
-      <i className="c-accordion__icon" aria-hidden="true">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </i>
+    const headerClassNames = generateHeaderClassNames();
+    const panelClassNames = ACCORDION.SELECTORS.PANEL.replace('.', '');
+
+    // Check for compound usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['AccordionHeader', 'AccordionBody'].includes((child.type as any).displayName)
     );
 
-    const accordionContent = (
+    const content = (
       <div
         className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
         style={style}
       >
-        <button
-          id={buttonId}
-          className={generateHeaderClassNames()}
-          onClick={toggle}
-          aria-expanded={state.isOpen}
-          aria-controls={panelId}
-          aria-disabled={disabled}
-          disabled={disabled}
-          type="button"
-        >
-          <span className="c-accordion__title">{title}</span>
-          {icon || defaultIcon}
-        </button>
-        <div
-          id={panelId}
-          className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
-          ref={panelRef as React.RefObject<HTMLDivElement>}
-          role="region"
-          aria-labelledby={buttonId}
-        >
-          <div
-            className={ACCORDION.SELECTORS.BODY.replace('.', '')}
-            ref={contentRef as React.RefObject<HTMLDivElement>}
-          >
-            {children}
-          </div>
-        </div>
+        {hasCompoundComponents ? (
+          React.Children.map(children, child => {
+            if (React.isValidElement(child)) {
+              if ((child.type as any).displayName === 'AccordionHeader') {
+                return React.cloneElement(child, {
+                  id: buttonId,
+                  className: `${headerClassNames} ${(child.props as any).className || ''}`.trim(),
+                  onClick: (e: React.MouseEvent) => {
+                    toggle();
+                    (child.props as any).onClick?.(e);
+                  },
+                  'aria-expanded': state.isOpen,
+                  'aria-controls': panelId,
+                  'aria-disabled': disabled,
+                  disabled: disabled,
+                  iconPosition: (child.props as any).iconPosition || iconPosition,
+                } as any);
+              }
+              if ((child.type as any).displayName === 'AccordionBody') {
+                return React.cloneElement(child, {
+                  id: panelId,
+                  className: `${panelClassNames} ${(child.props as any).className || ''}`.trim(),
+                  'aria-labelledby': buttonId,
+                  panelRef: panelRef,
+                  contentRef: contentRef,
+                } as any);
+              }
+            }
+            return child;
+          })
+        ) : (
+          <>
+            <AccordionHeader
+              id={buttonId}
+              className={headerClassNames}
+              onClick={toggle}
+              aria-expanded={state.isOpen}
+              aria-controls={panelId}
+              aria-disabled={disabled}
+              disabled={disabled}
+              title={title}
+              icon={icon}
+              iconPosition={iconPosition}
+            />
+            <AccordionBody
+              id={panelId}
+              className={panelClassNames}
+              aria-labelledby={buttonId}
+              panelRef={panelRef as React.RefObject<HTMLDivElement>}
+              contentRef={contentRef as React.RefObject<HTMLDivElement>}
+            >
+              {children}
+            </AccordionBody>
+          </>
+        )}
       </div>
     );
 
@@ -114,15 +228,19 @@ export const Accordion: React.FC<AccordionProps> = memo(
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return <AtomixGlass {...glassProps}>{accordionContent}</AtomixGlass>;
+      return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
     }
 
-    return accordionContent;
+    return content;
   }
 );
 
-// Set display name for debugging
-Accordion.displayName = 'Accordion';
+AccordionImpl.displayName = 'Accordion';
+
+// Attach subcomponents
+const AccordionWithSubcomponents = AccordionImpl as unknown as AccordionComponent;
+AccordionWithSubcomponents.Header = AccordionHeader;
+AccordionWithSubcomponents.Body = AccordionBody;
 
-// Export as default
-export default Accordion;
+export const Accordion = AccordionWithSubcomponents;
+export default Accordion as unknown as AccordionComponent;

package/src/components/Accordion/AccordionCompound.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Accordion } from './Accordion';
+import React from 'react';
+
+describe('Accordion Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Accordion title="Legacy Title" defaultOpen>
+        Legacy Content
+      </Accordion>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Accordion defaultOpen>
+        <Accordion.Header>
+          <span>Compound Header</span>
+        </Accordion.Header>
+        <Accordion.Body>
+          <p>Compound Body</p>
+        </Accordion.Body>
+      </Accordion>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.getByText('Compound Body')).toBeInTheDocument();
+  });
+
+  it('toggles visibility in compound mode', () => {
+    render(
+      <Accordion>
+        <Accordion.Header>Header</Accordion.Header>
+        <Accordion.Body>Body</Accordion.Body>
+      </Accordion>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('injects props into compound components', () => {
+    // We want to verify that aria-controls and aria-labelledby are correctly linked
+    // even in compound mode (since the parent injects IDs)
+    render(
+      <Accordion>
+        <Accordion.Header>Header</Accordion.Header>
+        <Accordion.Body>Body</Accordion.Body>
+      </Accordion>
+    );
+
+    const button = screen.getByRole('button');
+    const region = screen.getByRole('region');
+
+    const controlsId = button.getAttribute('aria-controls');
+    const labelledById = region.getAttribute('aria-labelledby');
+    const buttonId = button.getAttribute('id');
+    const regionId = region.getAttribute('id');
+
+    expect(controlsId).toBe(regionId);
+    expect(labelledById).toBe(buttonId);
+  });
+});