@synetics/ui 0.7.0-alpha

package/src/components/molecules/alert/alert-icon.syn

@@ -0,0 +1,19 @@
+/**
+ * AlertIcon component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IAlertIconProps } from './alert-icon.type';
+
+/**
+ * AlertIcon component
+ * Icon container for Alert component
+ */
+export const AlertIcon = ({ children, className, ...rest }: IAlertIconProps): HTMLElement => {
+  return (
+    <div className={cn('flex-shrink-0 w-5 h-5', className)} {...rest}>
+      {children}
+    </div>
+  );
+};

package/src/components/molecules/alert/alert-icon.type.ts

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

package/src/components/molecules/alert/alert-title.syn

@@ -0,0 +1,19 @@
+/**
+ * AlertTitle component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IAlertTitleProps } from './alert-title.type';
+
+/**
+ * AlertTitle component
+ * Title text for Alert component
+ */
+export const AlertTitle = ({ children, className, ...rest }: IAlertTitleProps): HTMLElement => {
+  return (
+    <h5 className={cn('font-semibold text-sm', className)} {...rest}>
+      {children}
+    </h5>
+  );
+};

package/src/components/molecules/alert/alert-title.type.ts

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

package/src/components/molecules/alert/alert.syn

@@ -0,0 +1,76 @@
+/**
+ * Alert component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IAlertProps } from './alert.type';
+
+/**
+ * Alert component
+ * Displays contextual feedback messages with variants
+ */
+export const Alert = ({
+  variant = 'info',
+  closable = false,
+  onClose,
+  children,
+  className,
+  ...rest
+}: IAlertProps): HTMLElement => {
+  let isVisible = true;
+  let alertElement: HTMLElement | null = null;
+
+  const variantClasses = {
+    success: 'bg-green-50 border-green-200 text-green-800',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    error: 'bg-red-50 border-red-200 text-red-800',
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+  };
+
+  const handleClose = () => {
+    if (alertElement) {
+      alertElement.classList.add('opacity-0', 'scale-95');
+      setTimeout(() => {
+        if (alertElement) {
+          alertElement.classList.add('hidden');
+        }
+        isVisible = false;
+        onClose?.();
+      }, 200);
+    }
+  };
+
+  return (
+    <div
+      ref={(el: HTMLDivElement | null) => (alertElement = el)}
+      className={cn(
+        'relative flex items-start gap-3 px-4 py-3.5 border-l-4 rounded-r-lg shadow-sm',
+        'transition-all duration-200 animate-slide-in-up',
+        variantClasses[variant],
+        className
+      )}
+      role="alert"
+      {...rest}
+    >
+      {children}
+      {closable && (
+        <button
+          type="button"
+          className="ml-auto text-current hover:opacity-70 transition-opacity"
+          onclick={handleClose}
+          aria-label="Close"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/molecules/alert/alert.type.ts

@@ -0,0 +1,17 @@
+/**
+ * Alert component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+import type { AlertVariant } from '../../enums/alert-variant.type';
+
+/**
+ * Alert component props
+ * Extends Pulsar.HtmlExtends<'div'> which includes className property
+ */
+export interface IAlertProps extends Pulsar.HtmlExtends<'div'> {
+  readonly variant?: AlertVariant;
+  readonly closable?: boolean;
+  readonly onClose?: () => void;
+  readonly children: any;
+}

package/src/components/molecules/alert/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Alert component - Index
+ */
+
+export { AlertDescription } from './alert-description.syn';
+export type { IAlertDescriptionProps } from './alert-description.type';
+export { AlertIcon } from './alert-icon.syn';
+export type { IAlertIconProps } from './alert-icon.type';
+export { AlertTitle } from './alert-title.syn';
+export type { IAlertTitleProps } from './alert-title.type';
+export { Alert } from './alert.syn';
+export type { IAlertProps } from './alert.type';

package/src/components/molecules/badge/badge.syn

@@ -0,0 +1,66 @@
+/**
+ * Badge component implementation
+ * Framework: Pulsar
+ * Molecule: Composes text and optional icon
+ */
+
+import { badgeSizeClasses, cn, roundedClasses } 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 IBadgeProps } from './badge.type';
+
+// External to the component so it's compiled ONCE!
+const badgeDefaultConfig = new ComponentConfigBuilder('primary')
+  .variant('solid')
+  .size('sm')
+  .rounded('md')
+  .build();
+
+// External to the component so it's compiled ONCE!
+const badgeDefaultStyling = new ComponentStylingBuilder()
+  .base('inline-flex items-center gap-1 font-medium')
+  .background('bg-primary-100 text-primary-800')
+  .border('border border-primary-200')
+  .build();
+
+/**
+ * Badge component
+ * Creates a badge with optional icon - molecule component (can contain multiple elements)
+ */
+export const Badge = ({
+  config = badgeDefaultConfig,
+  styling = badgeDefaultStyling,
+  label,
+  icon,
+  iconPosition = 'left',
+  dot = false,
+  children,
+  ...rest
+}: IBadgeProps): HTMLElement => {
+  if (config.loading) {
+    return <Skeleton width="w-16" height="h-6" rounded={config.rounded} />;
+  }
+
+  const className = cn(
+    styling.base,
+    styling.background,
+    styling.border,
+    'transition-all duration-200',
+    config.size ? badgeSizeClasses[config.size] : '',
+    config.rounded ? roundedClasses[config.rounded] : '',
+    config.className,
+    styling.custom
+  );
+
+  const content = children || label;
+
+  return (
+    <span className={className} ariaBusy={config.loading ? 'true' : 'false'} {...rest}>
+      {dot && <span className="w-1.5 h-1.5 rounded-full bg-current" />}
+      {iconPosition === 'left' && icon}
+      {content}
+      {iconPosition === 'right' && icon}
+    </span>
+  );
+};

package/src/components/molecules/badge/badge.type.ts

@@ -0,0 +1,25 @@
+/**
+ * Badge component props interface
+ * Molecule: Composes icon + text content
+ */
+
+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 IBadgeProps extends Pulsar.HtmlExtends<'span'> {
+  // Component configuration
+  readonly config?: IComponentConfig
+  
+  // Component styling
+  readonly styling?: IComponentStyling
+  
+  // Content
+  readonly label?: string
+  readonly children?: string | number | HTMLElement | Array<string | number | HTMLElement>
+  readonly icon?: HTMLElement
+  readonly iconPosition?: 'left' | 'right'
+  
+  // Visual
+  readonly dot?: boolean
+}

package/src/components/molecules/badge/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Badge component exports
+ */
+
+export { Badge } from './badge.syn';
+export type { IBadgeProps } from './badge.type';

package/src/components/molecules/breadcrumbs/breadcrumb-item.type.ts

@@ -0,0 +1,23 @@
+/**
+ * Breadcrumb Item component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+
+export interface IBreadcrumbItemProps extends Pulsar.HtmlExtends<'li'> {
+  /**
+   * Link href
+   */
+  readonly href?: string;
+
+  /**
+   * Is current page
+   * @default false
+   */
+  readonly current?: boolean;
+
+  /**
+   * Item content
+   */
+  readonly children: string | HTMLElement;
+}

package/src/components/molecules/breadcrumbs/breadcrumbs.syn

@@ -0,0 +1,60 @@
+/**
+ * Breadcrumbs Component - Declarative Implementation
+ * Navigation breadcrumb trail
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IBreadcrumbItemProps } from './breadcrumb-item.type';
+import type { IBreadcrumbsProps } from './breadcrumbs.type';
+
+/**
+ * Breadcrumbs component
+ * Creates a navigation breadcrumb trail - molecule component
+ */
+export const Breadcrumbs = ({
+  separator = '/',
+  children,
+  className,
+  ...rest
+}: IBreadcrumbsProps): HTMLElement => {
+  const breadcrumbsClasses = cn('flex items-center space-x-2 text-sm', className);
+
+  return (
+    <nav aria-label="Breadcrumb" className={breadcrumbsClasses} {...rest}>
+      <ol className="flex items-center space-x-2">{children}</ol>
+    </nav>
+  );
+};
+
+/**
+ * BreadcrumbItem component
+ * Individual breadcrumb item
+ */
+export const BreadcrumbItem = ({
+  href,
+  current = false,
+  children,
+  className,
+  ...rest
+}: IBreadcrumbItemProps): HTMLElement => {
+  const itemClasses = cn(
+    'flex items-center transition-colors duration-150',
+    current
+      ? 'text-gray-900 dark:text-white font-medium'
+      : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300',
+    className
+  );
+
+  return (
+    <li className={itemClasses} {...rest}>
+      {href && !current ? (
+        <a href={href} className="hover:underline transition-all duration-150 touch-target">
+          {children}
+        </a>
+      ) : (
+        <span aria-current={current ? 'page' : undefined}>{children}</span>
+      )}
+      {!current && <span className="mx-2 text-gray-400">/</span>}
+    </li>
+  );
+};

package/src/components/molecules/breadcrumbs/breadcrumbs.type.ts

@@ -0,0 +1,18 @@
+/**
+ * Breadcrumbs component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+
+export interface IBreadcrumbsProps extends Pulsar.HtmlExtends<'nav'> {
+  /**
+   * Breadcrumb separator
+   * @default '/'
+   */
+  readonly separator?: string | HTMLElement;
+
+  /**
+   * Breadcrumb items
+   */
+  readonly children: HTMLElement | HTMLElement[];
+}

package/src/components/molecules/breadcrumbs/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Breadcrumbs Module
+ * Exports the Breadcrumbs component
+ */
+
+export type { IBreadcrumbItemProps } from './breadcrumb-item.type';
+export { BreadcrumbItem, Breadcrumbs } from './breadcrumbs.syn';
+export type { IBreadcrumbsProps } from './breadcrumbs.type';

package/src/components/molecules/button/button.syn

@@ -0,0 +1,124 @@
+/**
+ * Button component implementation
+ * Framework: Pulsar
+ */
+
+import {
+  cn,
+  componentSizes,
+  roundedClasses,
+  shadowClasses,
+  transitionDurationClasses,
+} 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 IButtonProps } from './button.type';
+
+// External to the component so it's compiled ONCE!
+const buttonDefaultConfig = new ComponentConfigBuilder('primary')
+  .variant('solid')
+  .size('md')
+  .rounded('md')
+  .transition(true)
+  .build();
+
+// External to the component so it's compiled ONCE!
+const buttonDefaultStyling = new ComponentStylingBuilder()
+  .base(
+    'inline-flex items-center justify-center font-medium border focus:outline-none state-layer touch-target relative'
+  )
+  .background('bg-primary-600 hover:bg-primary-700 active:bg-primary-800')
+  .border('border-transparent')
+  .transition('transition-all duration-200')
+  .hover('hover:shadow-lg hover:scale-[1.02]')
+  .focus('focus:ring-4 focus:ring-primary-100 focus:ring-offset-2 focus:shadow-lg')
+  .active('active:scale-[0.98] active:shadow-md')
+  .disabled('opacity-40 cursor-not-allowed pointer-events-none')
+  .custom('text-white')
+  .build();
+
+/**
+ * Button component
+ * Creates an accessible button element - atomic component (single element output)
+ */
+export const Button = ({
+  config = buttonDefaultConfig,
+  styling = buttonDefaultStyling,
+  type = 'button',
+  children,
+  onclick,
+  ...rest
+}: IButtonProps): HTMLElement => {
+  console.log('[Button] Called with config:', config);
+
+  if (config.loading) {
+    const skeleton = (
+      <Skeleton
+        width={config.fullWidth ? 'w-full' : 'w-32'}
+        height={config.size ? componentSizes[config.size].height : 'h-10'}
+        rounded={config.rounded}
+      />
+    );
+    console.log(
+      '[Button] Returning Skeleton:',
+      skeleton,
+      'instanceof HTMLElement:',
+      skeleton instanceof HTMLElement
+    );
+    return skeleton;
+  }
+
+  // Variant styling - using inline classes since builder styles are already set
+  const variantStyles = {
+    solid: 'bg-primary-600 hover:bg-primary-700 text-white border-transparent',
+    outline: 'bg-transparent border-primary-600 text-primary-600 hover:bg-primary-50',
+    ghost: 'bg-transparent border-transparent text-primary-600 hover:bg-primary-50',
+    text: 'bg-transparent border-transparent text-primary-600 hover:bg-primary-50',
+  };
+
+  const variantClass = config.variant
+    ? variantStyles[config.variant as keyof typeof variantStyles]
+    : '';
+
+  const className = cn(
+    styling.base,
+    variantClass || styling.background, // Use variant or default background
+    styling.border,
+    styling.custom, // Contains text-white
+    styling.transition,
+    config.size ? componentSizes[config.size].padding : '',
+    config.size ? componentSizes[config.size].fontSize : '',
+    config.fullWidth ? 'w-full' : '',
+    config.rounded ? roundedClasses[config.rounded] : '',
+    config.shadow ? shadowClasses[config.shadow] : '',
+    config.transitionDuration ? transitionDurationClasses[config.transitionDuration] : '',
+    config.disabled ? styling.disabled : '',
+    config.hover ? styling.hover : '',
+    config.focus ? styling.focus : '',
+    config.active ? styling.active : '',
+    config.className,
+    styling.custom
+  );
+
+  const button = (
+    <button
+      type={type}
+      className={className}
+      disabled={config.disabled || false}
+      ariaBusy={config.loading ? 'true' : 'false'}
+      onclick={onclick}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+
+  console.log(
+    '[Button] Returning button:',
+    button,
+    'instanceof HTMLElement:',
+    button instanceof HTMLElement
+  );
+  return button;
+};

package/src/components/molecules/button/button.type.ts

@@ -0,0 +1,24 @@
+/**
+ * Button component props interface
+ * [COPILOT] this is a simple button atomic component
+ * [COPILOT] for complex buttons with icons, labels, spinners - use molecules
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+import { type ButtonType } from '../../enums/button-type.type';
+import { type IComponentConfig } from '../../utils/component-config-builder/component-config.type';
+import { type IComponentStyling } from '../../utils/component-styling-builder/component-styling.type';
+
+export interface IButtonProps extends Pulsar.HtmlExtends<'button'> {
+  // Component configuration
+  readonly config?: IComponentConfig;
+
+  // Component styling
+  readonly styling?: IComponentStyling;
+
+  // Button behavior
+  readonly type?: ButtonType;
+
+  // Button content
+  readonly children?: any;
+}

package/src/components/molecules/button/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Button component - Index
+ * Export main component, types, and factory variants
+ */
+
+export { Button } from './button.syn';
+export { type IButtonProps } from './button.type';
+
+// Factory variants

package/src/components/molecules/dropdown/dropdown-item.syn

@@ -0,0 +1,30 @@
+/**
+ * Dropdown Item Component
+ * Individual dropdown menu item
+ */
+
+import type { IDropdownItemProps } from './dropdown-item.type';
+import './dropdown.css';
+
+export const DropdownItem = ({
+  children,
+  onclick,
+  disabled = false,
+  className,
+}: IDropdownItemProps) => {
+  const handleClick = (e: MouseEvent) => {
+    if (disabled) return;
+    onclick?.(e);
+  };
+
+  return (
+    <button
+      className={`dropdown-item state-layer touch-target${disabled ? ' dropdown-item-disabled' : ''}${className ? ` ${className}` : ''}`}
+      onclick={handleClick}
+      disabled={disabled}
+      type="button"
+    >
+      <span className="dropdown-item-label">{children}</span>
+    </button>
+  );
+};

package/src/components/molecules/dropdown/dropdown-item.type.ts

@@ -0,0 +1,11 @@
+/**
+ * DropdownItem component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+
+export interface IDropdownItemProps extends Pulsar.HtmlExtends<'button'> {
+  readonly onclick?: (event: MouseEvent) => void;
+  readonly disabled?: boolean;
+  readonly children: any;
+}