@synetics/ui 0.7.0-alpha

package/src/components/organisms/drawer/drawer.syn

@@ -0,0 +1,112 @@
+/**
+ * Drawer component - Side panel overlay
+ */
+
+import { cn } from '@synetics/design-tokens';
+import { Portal, useEffect } from '@synetics/synetics.dev';
+import type { IDrawerProps } from './drawer.type';
+
+export const Drawer = ({
+  open,
+  onClose,
+  placement = 'right',
+  size = 'md',
+  showBackdrop = true,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  children,
+  className,
+  ...rest
+}: IDrawerProps): HTMLElement => {
+  // Handle escape key
+  useEffect(() => {
+    if (!open || !closeOnEscape) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [open, closeOnEscape, onClose]);
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = '';
+      };
+    }
+  }, [open]);
+
+  if (!open) return <div style="display: none;" />;
+
+  // Size classes
+  const sizeClasses = {
+    sm: placement === 'left' || placement === 'right' ? 'w-64' : 'h-64',
+    md: placement === 'left' || placement === 'right' ? 'w-96' : 'h-96',
+    lg: placement === 'left' || placement === 'right' ? 'w-[32rem]' : 'h-[32rem]',
+    xl: placement === 'left' || placement === 'right' ? 'w-[48rem]' : 'h-[48rem]',
+    full: placement === 'left' || placement === 'right' ? 'w-full' : 'h-full',
+  };
+
+  // Placement classes
+  const placementClasses = {
+    left: 'left-0 top-0 h-full',
+    right: 'right-0 top-0 h-full',
+    top: 'top-0 left-0 w-full',
+    bottom: 'bottom-0 left-0 w-full',
+  };
+
+  // Transform classes for slide animation
+  const transformClasses = {
+    left: open ? 'translate-x-0' : '-translate-x-full',
+    right: open ? 'translate-x-0' : 'translate-x-full',
+    top: open ? 'translate-y-0' : '-translate-y-full',
+    bottom: open ? 'translate-y-0' : 'translate-y-full',
+  };
+
+  const backdropClasses = cn(
+    'fixed inset-0 bg-black/60 backdrop-blur-sm z-40',
+    'transition-opacity duration-300 animate-fade-in',
+    open ? 'opacity-100' : 'opacity-0'
+  );
+
+  const drawerClasses = cn(
+    'fixed z-50 bg-white dark:bg-gray-800 shadow-2xl',
+    'transition-all duration-300 ease-in-out',
+    'overflow-y-auto overflow-x-hidden',
+    sizeClasses[size],
+    placementClasses[placement],
+    transformClasses[placement],
+    className
+  );
+
+  const backdrop = showBackdrop ? (
+    <div
+      className={backdropClasses}
+      onClick={() => closeOnBackdropClick && onClose()}
+      aria-hidden="true"
+    />
+  ) : null;
+
+  return (
+    <Portal>
+      <>
+        {backdrop}
+        <div
+          className={drawerClasses}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="drawer-title"
+          {...rest}
+        >
+          {children}
+        </div>
+      </>
+    </Portal>
+  );
+};

package/src/components/organisms/drawer/drawer.type.ts

@@ -0,0 +1,53 @@
+/**
+ * Drawer component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+import type { DrawerPlacement, DrawerSize } from '../../enums';
+
+export interface IDrawerProps extends Pulsar.HtmlExtends<'div'> {
+  /**
+   * Is drawer open
+   */
+  readonly open: boolean;
+
+  /**
+   * Close handler
+   */
+  readonly onClose: () => void;
+
+  /**
+   * Drawer placement
+   * @default 'right'
+   */
+  readonly placement?: DrawerPlacement;
+
+  /**
+   * Drawer size
+   * @default 'md'
+   */
+  readonly size?: DrawerSize;
+
+  /**
+   * Show backdrop
+   * @default true
+   */
+  readonly showBackdrop?: boolean;
+
+  /**
+   * Close on backdrop click
+   * @default true
+   */
+  readonly closeOnBackdropClick?: boolean;
+
+  /**
+   * Close on escape key
+   * @default true
+   */
+  readonly closeOnEscape?: boolean;
+
+  /**
+   * Drawer content
+   */
+  readonly children: HTMLElement | HTMLElement[];
+}

package/src/components/organisms/drawer/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Drawer component exports
+ */
+
+export { Drawer } from './drawer.syn';
+export type { IDrawerProps } from './drawer.type';

package/src/components/organisms/footer/footer.syn

@@ -0,0 +1,53 @@
+/**
+ * Footer component implementation
+ * Framework: Pulsar
+ * Organism: Page footer with copyright and links
+ */
+
+import { cn } from '@synetics/design-tokens';
+import { Skeleton } from '../../atoms/skeleton';
+import { Typography } from '../../atoms/typography';
+import { ComponentConfigBuilder } from '../../utils/component-config-builder/component-config-builder';
+import { ComponentStylingBuilder } from '../../utils/component-styling-builder/component-styling-builder';
+import { type IFooterProps } from './footer.type';
+
+// External to the component so it's compiled ONCE!
+const footerDefaultConfig = new ComponentConfigBuilder('primary').build();
+
+// External to the component so it's compiled ONCE!
+const footerDefaultStyling = new ComponentStylingBuilder()
+  .base('bg-neutral-50/95 backdrop-blur-sm border-t border-neutral-200 transition-all duration-300')
+  .build();
+
+/**
+ * Footer component
+ * Creates a page footer with copyright and links - organism component
+ */
+export const Footer = ({
+  config = footerDefaultConfig,
+  styling = footerDefaultStyling,
+  copyright,
+  links,
+  ...rest
+}: IFooterProps): HTMLElement =>
+  config.loading ? (
+    <Skeleton width="w-full" height="h-32" rounded="none" />
+  ) : (
+    <footer
+      className={cn(styling.base, config.className, styling.custom)}
+      ariaBusy={config.loading ? 'true' : 'false'}
+      {...rest}
+    >
+      <div className="container mx-auto px-4 py-8">
+        {links ? <div className="mb-4">{links}</div> : null}
+        {copyright ? (
+          <Typography
+            variant="caption"
+            config={new ComponentConfigBuilder('primary').className('text-neutral-500').build()}
+          >
+            {copyright}
+          </Typography>
+        ) : null}
+      </div>
+    </footer>
+  );

package/src/components/organisms/footer/footer.type.ts

@@ -0,0 +1,20 @@
+/**
+ * Footer component props interface
+ * Organism: Page footer with content sections
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev'
+import { type IComponentConfig } from '../../utils/component-config-builder/component-config.type'
+import { type IComponentStyling } from '../../utils/component-styling-builder/component-styling.type'
+
+export interface IFooterProps extends Pulsar.HtmlExtends<'footer'> {
+  // Component configuration
+  readonly config?: IComponentConfig
+  
+  // Component styling
+  readonly styling?: IComponentStyling
+  
+  // Footer sections
+  readonly copyright?: string
+  readonly links?: HTMLElement
+}

package/src/components/organisms/footer/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Footer component exports
+ */
+
+export { Footer } from './footer.syn';
+export type { IFooterProps } from './footer.type';

package/src/components/organisms/header/header.syn

@@ -0,0 +1,52 @@
+//  * Header component implementation
+//  * Framework: Pulsar
+//  * Organism: Page header with logo, navigation, and actions
+//  */
+
+import { cn } from '@synetics/design-tokens';
+import { Skeleton } from '../../atoms/skeleton';
+import { ComponentConfigBuilder } from '../../utils/component-config-builder/component-config-builder';
+import { ComponentStylingBuilder } from '../../utils/component-styling-builder/component-styling-builder';
+import { type IHeaderProps } from './header.type';
+
+// External to the component so it's compiled ONCE!
+const headerDefaultConfig = new ComponentConfigBuilder('primary').build();
+
+// External to the component so it's compiled ONCE!
+const headerDefaultStyling = new ComponentStylingBuilder()
+  .base('bg-white/95 backdrop-blur-sm border-b border-neutral-200 transition-all duration-300')
+  .build();
+
+/**
+ * Header component
+ * Creates a page header with logo, nav, and actions - organism component
+ */
+export const Header = ({
+  config = headerDefaultConfig,
+  styling = headerDefaultStyling,
+  logo,
+  navigation,
+  actions,
+  sticky = false,
+  ...rest
+}: IHeaderProps): HTMLElement =>
+  config.loading ? (
+    <Skeleton width="w-full" height="h-16" rounded="none" />
+  ) : (
+    <header
+      className={cn(
+        styling.base,
+        sticky ? 'sticky top-0 z-50' : '',
+        config.className,
+        styling.custom
+      )}
+      ariaBusy={config.loading ? 'true' : 'false'}
+      {...rest}
+    >
+      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+        {logo ? <div className="flex-shrink-0">{logo}</div> : null}
+        {navigation ? <nav className="flex-1 mx-8">{navigation}</nav> : null}
+        {actions ? <div className="flex-shrink-0">{actions}</div> : null}
+      </div>
+    </header>
+  );

package/src/components/organisms/header/header.type.ts

@@ -0,0 +1,24 @@
+/**
+ * Header component props interface
+ * Organism: Page header with logo, navigation, and actions
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev'
+import { type IComponentConfig } from '../../utils/component-config-builder/component-config.type'
+import { type IComponentStyling } from '../../utils/component-styling-builder/component-styling.type'
+
+export interface IHeaderProps extends Pulsar.HtmlExtends<'header'> {
+  // Component configuration
+  readonly config?: IComponentConfig
+  
+  // Component styling
+  readonly styling?: IComponentStyling
+  
+  // Header sections
+  readonly logo?: HTMLElement
+  readonly navigation?: HTMLElement
+  readonly actions?: HTMLElement
+  
+  // Layout
+  readonly sticky?: boolean
+}

package/src/components/organisms/header/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Header component exports
+ */
+
+export { Header } from './header.syn';
+export type { IHeaderProps } from './header.type';

package/src/components/organisms/modal/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Modal component - Index
+ */
+
+export { ModalBody } from './modal-body.syn';
+export type { IModalBodyProps } from './modal-body.type';
+export { ModalFooter } from './modal-footer.syn';
+export type { IModalFooterProps } from './modal-footer.type';
+export { ModalHeader } from './modal-header.syn';
+export type { IModalHeaderProps } from './modal-header.type';
+export { Modal } from './modal.syn';
+export type { IModalProps } from './modal.type';

package/src/components/organisms/modal/modal-body.syn

@@ -0,0 +1,19 @@
+/**
+ * ModalBody component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IModalBodyProps } from './modal-body.type';
+
+/**
+ * ModalBody component
+ * Body section for Modal component
+ */
+export const ModalBody = ({ children, className, ...rest }: IModalBodyProps): HTMLElement => {
+  return (
+    <div className={cn('px-6 py-4', className)} {...rest}>
+      {children}
+    </div>
+  );
+};

package/src/components/organisms/modal/modal-body.type.ts

@@ -0,0 +1,9 @@
+import type { Pulsar } from '@synetics/synetics.dev';
+
+/**
+ * ModalBody component props interface
+ */
+
+export interface IModalBodyProps extends Pulsar.HtmlExtends<'div'> {
+  readonly children: any;
+}

package/src/components/organisms/modal/modal-footer.syn

@@ -0,0 +1,25 @@
+/**
+ * ModalFooter component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IModalFooterProps } from './modal-footer.type';
+
+/**
+ * ModalFooter component
+ * Footer section for Modal component
+ */
+export const ModalFooter = ({ children, className, ...rest }: IModalFooterProps): HTMLElement => {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/organisms/modal/modal-footer.type.ts

@@ -0,0 +1,9 @@
+import type { Pulsar } from '@synetics/synetics.dev';
+
+/**
+ * ModalFooter component props interface
+ */
+
+export interface IModalFooterProps extends Pulsar.HtmlExtends<'div'> {
+  readonly children: any;
+}

package/src/components/organisms/modal/modal-header.syn

@@ -0,0 +1,25 @@
+/**
+ * ModalHeader component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IModalHeaderProps } from './modal-header.type';
+
+/**
+ * ModalHeader component
+ * Header section for Modal component
+ */
+export const ModalHeader = ({ children, className, ...rest }: IModalHeaderProps): HTMLElement => {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between px-6 py-4 border-b border-neutral-200',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/organisms/modal/modal-header.type.ts

@@ -0,0 +1,9 @@
+import type { Pulsar } from '@synetics/synetics.dev';
+
+/**
+ * ModalHeader component props interface
+ */
+
+export interface IModalHeaderProps extends Pulsar.HtmlExtends<'div'> {
+  readonly children: any;
+}

package/src/components/organisms/modal/modal-parts.syn

@@ -0,0 +1,21 @@
+/**
+ * Modal Parts Components
+ * Header, Body, and Footer components for Modal
+ */
+
+import type { IModalBodyProps } from './modal-body.type';
+import type { IModalFooterProps } from './modal-footer.type';
+import type { IModalHeaderProps } from './modal-header.type';
+import './modal.css';
+
+export const ModalHeader = ({ children, className }: IModalHeaderProps) => {
+  return <div className={`modal-header${className ? ` ${className}` : ''}`}>{children}</div>;
+};
+
+export const ModalBody = ({ children, className }: IModalBodyProps) => {
+  return <div className={`modal-body${className ? ` ${className}` : ''}`}>{children}</div>;
+};
+
+export const ModalFooter = ({ children, className }: IModalFooterProps) => {
+  return <div className={`modal-footer${className ? ` ${className}` : ''}`}>{children}</div>;
+};

package/src/components/organisms/modal/modal.syn

@@ -0,0 +1,104 @@
+/**
+ * Modal component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import { useKeyBindings } from '@synetics/synetics.dev';
+import type { IModalProps } from './modal.type';
+
+/**
+ * Modal component
+ * Accessible dialog with sizes, backdrop, and keyboard support
+ */
+export const Modal = ({
+  isOpen = false,
+  onClose,
+  size = 'md',
+  backdrop = true,
+  escapeToClose = true,
+  children,
+  className,
+  ...rest
+}: IModalProps): HTMLElement => {
+  let modalElement: HTMLElement | null = null;
+  let backdropElement: HTMLElement | null = null;
+
+  const sizeClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    full: 'max-w-full m-4',
+  };
+
+  const handleClose = () => {
+    if (modalElement && backdropElement) {
+      modalElement.classList.add('opacity-0', 'scale-95');
+      backdropElement.classList.add('opacity-0');
+
+      setTimeout(() => {
+        if (modalElement && backdropElement) {
+          modalElement.classList.add('hidden');
+          backdropElement.classList.add('hidden');
+        }
+        document.body.style.overflow = '';
+        onClose?.();
+      }, 200);
+    }
+  };
+
+  const handleBackdropClick = (e: MouseEvent) => {
+    if (e.target === backdropElement) {
+      handleClose();
+    }
+  };
+
+  const handleKeyDown = useKeyBindings({
+    onEscape: () => {
+      if (escapeToClose) {
+        handleClose();
+      }
+    },
+  });
+
+  // Apply scroll lock when modal is open
+  if (isOpen) {
+    document.body.style.overflow = 'hidden';
+  } else {
+    document.body.style.overflow = '';
+  }
+
+  return (
+    <>
+      {backdrop && (
+        <div
+          ref={(el: HTMLElement | null) => (backdropElement = el)}
+          className={cn(
+            'fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-40',
+            'transition-opacity duration-200 animate-fade-in',
+            !isOpen && 'hidden opacity-0'
+          )}
+          onClick={handleBackdropClick}
+        />
+      )}
+      <div
+        ref={(el: HTMLElement | null) => (modalElement = el)}
+        className={cn(
+          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50',
+          'w-full bg-white rounded-xl shadow-2xl',
+          'transition-all duration-200 animate-scale-in',
+          sizeClasses[size],
+          !isOpen && 'hidden opacity-0 scale-95',
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        onkeydown={handleKeyDown}
+        {...rest}
+      >
+        {children}
+      </div>
+    </>
+  );
+};

package/src/components/organisms/modal/modal.type.ts

@@ -0,0 +1,15 @@
+/**
+ * Modal component props interface
+ */
+
+import type { ModalSize } from '../../enums/modal-size.type';
+import type { Pulsar } from '@synetics/synetics.dev';
+
+export interface IModalProps extends Pulsar.HtmlExtends<'div'> {
+  readonly isOpen?: boolean;
+  readonly onClose?: () => void;
+  readonly size?: ModalSize;
+  readonly backdrop?: boolean;
+  readonly escapeToClose?: boolean;
+  readonly children: any;
+}