@synetics/ui 0.7.0-alpha

package/src/components/molecules/tabs/tabs.syn

@@ -0,0 +1,74 @@
+/**
+ * Tabs component implementation
+ * Framework: Pulsar
+ * Molecule: Compound component for tabbed navigation
+ */
+
+import { cn } from '@synetics/design-tokens';
+import { useState } from '@synetics/synetics.dev';
+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 { ITabsProps } from './tabs.type';
+
+// External to the component so it's compiled ONCE!
+const tabsDefaultConfig = new ComponentConfigBuilder('primary').build();
+
+// External to the component so it's compiled ONCE!
+const tabsDefaultStyling = new ComponentStylingBuilder().base('w-full').build();
+
+/**
+ * Tabs component
+ * Creates a tabbed interface with keyboard navigation - compound component
+ */
+export const Tabs = ({
+  config = tabsDefaultConfig,
+  styling = tabsDefaultStyling,
+  defaultActiveId,
+  activeId,
+  onChange,
+  children,
+  class: className,
+  ...rest
+}: ITabsProps): HTMLElement => {
+  if (config.loading) {
+    return <Skeleton width="w-full" height="h-64" rounded="md" />;
+  }
+
+  const [internalActiveId, setInternalActiveId] = useState(defaultActiveId || '');
+
+  const currentActiveId = activeId !== undefined ? activeId : internalActiveId();
+
+  const handleTabChange = (id: string) => {
+    if (activeId === undefined) {
+      setInternalActiveId(id);
+    }
+    onChange?.(id);
+  };
+
+  // Clone children to pass context
+  const enhancedChildren = children.map((child: any) => {
+    if (child && typeof child === 'object' && 'props' in child) {
+      // Pass activeId and onChange to TabList and TabPanels
+      return {
+        ...child,
+        props: {
+          ...(child.props as any),
+          activeId: currentActiveId,
+          onTabChange: handleTabChange,
+        },
+      };
+    }
+    return child;
+  });
+
+  return (
+    <div
+      className={cn(styling.base, config.className, styling.custom, className)}
+      ariaBusy={config.loading ? 'true' : 'false'}
+      {...rest}
+    >
+      {enhancedChildren}
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Tabs component type definition
+ */
+
+import type { IComponentConfig } from '../../utils/component-config-builder/component-config.type';
+import type { IComponentStyling } from '../../utils/component-styling-builder/component-styling.type';
+
+export interface ITabsProps {
+  config?: IComponentConfig;
+  styling?: IComponentStyling;
+  defaultActiveId?: string;
+  activeId?: string;
+  onChange?: (id: string) => void;
+  children: HTMLElement[];
+  class?: string;
+  [key: string]: unknown;
+}

package/src/components/organisms/card/card.syn

@@ -0,0 +1,64 @@
+/**
+ * Card component implementation
+ * Framework: Pulsar
+ * Organism: Card with header, body, and footer sections
+ */
+
+import { cn, roundedClasses, shadowClasses } 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 ICardProps } from './card.type';
+
+// External to the component so it's compiled ONCE!
+const cardDefaultConfig = new ComponentConfigBuilder('primary').rounded('xl').shadow('sm').build();
+
+// External to the component so it's compiled ONCE!
+const cardDefaultStyling = new ComponentStylingBuilder()
+  .base('bg-white dark:bg-neutral-800 overflow-hidden transition-all duration-300 hover:shadow-lg')
+  .border('border border-neutral-200 dark:border-neutral-700')
+  .build();
+
+/**
+ * Card component
+ * Creates a card container with optional header/footer - organism component
+ */
+export const Card = ({
+  config = cardDefaultConfig,
+  styling = cardDefaultStyling,
+  header,
+  footer,
+  elevation = true,
+  bordered = true,
+  children,
+  ...rest
+}: ICardProps): HTMLElement => {
+  if (config.loading) {
+    return <Skeleton width="w-full" height="h-64" rounded={config.rounded} />;
+  }
+
+  const className = cn(
+    styling.base,
+    bordered ? styling.border : '',
+    elevation && config.shadow ? shadowClasses[config.shadow] : '',
+    config.rounded ? roundedClasses[config.rounded] : '',
+    config.className,
+    styling.custom
+  );
+
+  return (
+    <div className={className} ariaBusy={config.loading ? 'true' : 'false'} {...rest}>
+      {header && (
+        <div className="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
+          {header}
+        </div>
+      )}
+      <div className="px-6 py-4">{children}</div>
+      {footer && (
+        <div className="px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-750">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Card component props interface
+ * Organism: Composes header, body, footer 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 ICardProps extends Pulsar.HtmlExtends<'div'> {
+  // Component configuration
+  readonly config?: IComponentConfig
+  
+  // Component styling
+  readonly styling?: IComponentStyling
+  
+  // Card sections
+  readonly header?: HTMLElement
+  readonly footer?: HTMLElement
+  readonly children?: any
+  
+  // Visual
+  readonly elevation?: boolean
+  readonly bordered?: boolean
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Card component exports
+ */
+
+export { Card } from './card.syn';
+export type { ICardProps } from './card.type';

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

@@ -0,0 +1 @@
+// [COPILOT] this may contains up to 3 buttons resposive  thin mobiles stacks desktop inline

package/src/components/organisms/date-picker/components/date-picker.body.days.syn

@@ -0,0 +1,98 @@
+import { computeRange } from '../core/computed/compute-range';
+import { IDatePickerCell, IDatePickerRow } from '../core/models/date-picker.models';
+import { Button } from '../internal-components/button';
+import { ArrowLeftIcon, ArrowRightIcon } from '../internal-components/icons';
+import { Portal } from '../internal-components/portal';
+import DatePickerCell from './date-picker.cell';
+import { useDatePickerContext } from './date-picker.context';
+
+interface IDatePickerBodyDaysProps {
+  id: string;
+}
+
+const DatePickerBodyDays = ({ id }: IDatePickerBodyDaysProps) => {
+  const {
+    gridData,
+    updateSelectedCells,
+    selectedCells,
+    selectionMode,
+    internalDate,
+    updateInternalDate,
+    next,
+    previous,
+    close,
+  } = useDatePickerContext();
+
+  const handleDisplayInfos = (cell: IDatePickerCell) => {};
+
+  const handleMovePrevious = () => previous('MONTH');
+
+  const handleMoveNext = () => next('MONTH');
+
+  const onSelectedCell = (cell: IDatePickerCell) => {
+    if (cell.item?.isNextScope) {
+      if (!internalDate()) return;
+      next('MONTH');
+      return;
+    }
+    if (cell.item?.isPreviousScope) {
+      if (!internalDate()) return;
+      previous('MONTH');
+      return;
+    }
+
+    if (selectionMode() === 'single' || selectedCells().length > 1) {
+      updateSelectedCells([cell]);
+      if (cell.item?.date) {
+        const newDate = new Date(
+          internalDate().getFullYear(),
+          internalDate().getMonth(),
+          cell.item.date.day
+        );
+        updateInternalDate(newDate);
+      }
+      // Close drawer after single selection
+      if (selectionMode() === 'single') {
+        close();
+      }
+      return;
+    }
+
+    let newSelection: IDatePickerCell[] = [];
+    newSelection = [...selectedCells(), cell].sort((a, b) => a.ts - b.ts);
+    newSelection.push(...computeRange(newSelection));
+    updateSelectedCells(newSelection.sort((a, b) => a.ts - b.ts));
+  };
+
+  return (
+    <div className="date-picker-body-container">
+      <div className="date-picker-body-wrapper">
+        {gridData().map((dateRow: IDatePickerRow) => (
+          <div key={dateRow.id} className="date-picker-body-row">
+            {dateRow.cells.map((dateCell) => (
+              <DatePickerCell
+                gridDisplayMode="DAY"
+                selectedCells={selectedCells()}
+                onMouseEnter={handleDisplayInfos}
+                onSelected={onSelectedCell}
+                item={dateCell}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      <Portal id={id} slotName="previous">
+        <Button id="dp-previous" title="previous (<=)" onClick={handleMovePrevious}>
+          <ArrowLeftIcon />
+        </Button>
+      </Portal>
+      <Portal id={id} slotName="next">
+        <Button id="dp-next" title="next (=>)" onClick={handleMoveNext}>
+          <ArrowRightIcon />
+        </Button>
+      </Portal>
+    </div>
+  );
+};
+
+export default DatePickerBodyDays;

package/src/components/organisms/date-picker/components/date-picker.body.months.syn

@@ -0,0 +1,77 @@
+import { IDatePickerCell, IDatePickerRow } from '../core/models/date-picker.models';
+import { Button } from '../internal-components/button';
+import { ArrowLeftIcon, ArrowRightIcon } from '../internal-components/icons';
+import { Portal } from '../internal-components/portal';
+import DatePickerCell from './date-picker.cell';
+import { useDatePickerContext } from './date-picker.context';
+
+interface IDatePickerBodyMonthsProps {
+  id: string;
+}
+
+const DatePickerBodyMonths = ({ id }: IDatePickerBodyMonthsProps) => {
+  const {
+    gridData,
+    updateSelectedCells,
+    selectedCells,
+    internalDate,
+    updateInternalDate,
+    updateGridMode,
+    previous,
+    next,
+  } = useDatePickerContext();
+
+  const handleMovePrevious = () => previous('MONTH');
+
+  const handleMoveNext = () => next('MONTH');
+
+  const handleDisplayInfos = (cell: IDatePickerCell) => {};
+
+  const onSelectedCell = (cell: IDatePickerCell) => {
+    updateSelectedCells([cell]);
+
+    if (cell.item?.date) {
+      const newDate = new Date(
+        internalDate().getFullYear(),
+        cell.item.date.month,
+        internalDate().getDate()
+      );
+      updateInternalDate(newDate);
+      // Switch to day view after selecting month
+      updateGridMode('DAY');
+    }
+  };
+
+  return (
+    <div className="date-picker-body-container">
+      <div className="date-picker-body-wrapper">
+        {gridData().map((dateRow: IDatePickerRow) => (
+          <div key={dateRow.id} className="date-picker-body-row">
+            {dateRow.cells.map((dateCell) => (
+              <DatePickerCell
+                key={dateCell.code}
+                gridDisplayMode="MONTH"
+                selectedCells={selectedCells()}
+                onMouseEnter={handleDisplayInfos}
+                onSelected={onSelectedCell}
+                item={dateCell}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      <Portal id={id} slotName="previous">
+        <Button id="dp-previous" title="previous (<=)" onClick={handleMovePrevious}>
+          <ArrowLeftIcon />
+        </Button>
+      </Portal>
+      <Portal id={id} slotName="next">
+        <Button id="dp-next" title="next (=>)" onClick={handleMoveNext}>
+          <ArrowRightIcon />
+        </Button>
+      </Portal>
+    </div>
+  );
+};
+
+export default DatePickerBodyMonths;

package/src/components/organisms/date-picker/components/date-picker.body.years.syn

@@ -0,0 +1,86 @@
+import { IDatePickerCell, IDatePickerRow } from '../core/models/date-picker.models';
+import { Button } from '../internal-components/button';
+import { ArrowLeftIcon, ArrowRightIcon } from '../internal-components/icons';
+import { Portal } from '../internal-components/portal';
+import DatePickerCell from './date-picker.cell';
+import { useDatePickerContext } from './date-picker.context';
+
+interface IDatePickerBodyYearsProps {
+  id: string;
+}
+
+const DatePickerBodyYears = ({ id }: IDatePickerBodyYearsProps) => {
+  const {
+    gridData,
+    updateSelectedCells,
+    selectedCells,
+    internalDate,
+    updateInternalDate,
+    updateGridMode,
+    next,
+    previous,
+  } = useDatePickerContext();
+
+  const handleDisplayInfos = (cell: IDatePickerCell) => {};
+
+  const handleMovePrevious = () => previous();
+
+  const handleMoveNext = () => next();
+
+  const onSelectedCell = (cell: IDatePickerCell) => {
+    if (cell.item?.isNextScope) {
+      if (!internalDate()) return;
+      next();
+      return;
+    }
+    if (cell.item?.isPreviousScope) {
+      if (!internalDate()) return;
+      previous();
+      return;
+    }
+    updateSelectedCells([cell]);
+    if (cell.item?.date) {
+      const newDate = new Date(
+        cell.item.date.year,
+        internalDate().getMonth(),
+        internalDate().getDate()
+      );
+      updateInternalDate(newDate);
+      // Switch to month view after selecting year
+      updateGridMode('MONTH');
+    }
+  };
+
+  return (
+    <div className="date-picker-body-container">
+      <div className="date-picker-body-wrapper">
+        {gridData().map((dateRow: IDatePickerRow) => (
+          <div key={dateRow.id} className="date-picker-body-row">
+            {dateRow.cells.map((dateCell) => (
+              <DatePickerCell
+                key={dateCell.code}
+                gridDisplayMode="YEAR"
+                selectedCells={selectedCells()}
+                onMouseEnter={handleDisplayInfos}
+                onSelected={onSelectedCell}
+                item={dateCell}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      <Portal id={id} slotName="previous">
+        <Button id="dp-previous" title="previous (<=)" onClick={handleMovePrevious}>
+          <ArrowLeftIcon />
+        </Button>
+      </Portal>
+      <Portal id={id} slotName="next">
+        <Button id="dp-next" title="next (=>)" onClick={handleMoveNext}>
+          <ArrowRightIcon />
+        </Button>
+      </Portal>
+    </div>
+  );
+};
+
+export default DatePickerBodyYears;

package/src/components/organisms/date-picker/components/date-picker.cell.syn

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from '@synetics/synetics.dev';
+
+import { DatePickerDisplayType } from '../core/date-picker.types';
+import { IDatePickerCell } from '../core/models/date-picker.models';
+import { ifClass, newIFClass } from '../utils/class-utils';
+import DatePickerSwitch from './date-picker.switch';
+
+interface IDatePickerCellProps {
+  item: IDatePickerCell;
+  selectedCells: IDatePickerCell[];
+  gridDisplayMode: DatePickerDisplayType;
+  onMouseEnter: (item: IDatePickerCell) => void;
+  onSelected: (item: IDatePickerCell) => void;
+}
+
+/**
+ * A React functional component representing a single cell in a date picker grid.
+ */
+const DatePickerCell = ({
+  item,
+  onMouseEnter,
+  onSelected,
+  gridDisplayMode,
+  selectedCells,
+}: IDatePickerCellProps) => {
+  const [cellItem, setCellItem] = useState<IDatePickerCell>(item);
+
+  const handleMouseEnter = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onMouseEnter(item);
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!cellItem()?.item) return;
+
+    if (cellItem()?.item?.isCurrentScope) {
+      const newCellItem = { ...cellItem() };
+      if (!newCellItem?.item) return;
+      newCellItem.item.selected = !newCellItem.item.selected;
+      setCellItem(newCellItem);
+    }
+    onSelected(item);
+  };
+
+  useEffect(() => {
+    if (!cellItem()) return;
+    const newCellItem = { ...cellItem() };
+    if (!newCellItem?.item) return;
+    newCellItem.item.selected = !!selectedCells.find((o) => o.code === cellItem().code);
+    setCellItem(newCellItem);
+  });
+
+  const scope = useMemo(() => {
+    return item.item?.isNextScope ? 'next' : item.item?.isPreviousScope ? 'previous' : 'current';
+  });
+
+  const day = useMemo(() => {
+    return cellItem().id;
+  });
+
+  const month = useMemo(() => {
+    return (cellItem()?.item?.date?.month ?? 0) + 1;
+  });
+
+  const year = useMemo(() => {
+    return cellItem()?.item?.date?.year;
+  });
+
+  const classes = useMemo(() => {
+    return ifClass([
+      newIFClass('is-now', cellItem()?.item?.isNow),
+      newIFClass('is-weekend', cellItem()?.item?.isWeekEnd),
+      newIFClass('selected', cellItem()?.item?.selected),
+    ]);
+  });
+
+  return (
+    <div
+      className={`date-cell ${classes()} ${scope()}`}
+      onMouseEnter={handleMouseEnter}
+      onClick={handleClick}
+      data-code={cellItem()?.code}
+      data-testid={`date-cell-${gridDisplayMode.toLowerCase()}-${cellItem()?.id}`}
+      data-scope={scope()}
+      data-grid-mode={gridDisplayMode}
+      data-view={gridDisplayMode.toLowerCase()}
+    >
+      <div>
+        <DatePickerSwitch
+          definedGridMode={gridDisplayMode}
+          day={<span>{day()}</span>}
+          year={<span>{year()}</span>}
+          month={<span>{month()}</span>}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerCell;

package/src/components/organisms/date-picker/components/date-picker.context.ts

@@ -0,0 +1,36 @@
+import {
+  DatePickerDisplayType,
+  DatePickerGridModeType,
+  DatePickerSelectionModeType,
+} from '../core/date-picker.types';
+import { IDatePickerCell, IDatePickerRow } from '../core/models/date-picker.models';
+
+export interface IDatePickerContext {
+  selectionMode: () => DatePickerSelectionModeType;
+  gridMode: () => DatePickerGridModeType;
+  internalDate: () => Date;
+  gridData: () => IDatePickerRow[];
+  selectedCells: () => IDatePickerCell[];
+  updateInternalDate: (date: Date) => void;
+  updateSelectedCells: (cells: IDatePickerCell[]) => void;
+  updateGridMode: (gridMode: DatePickerGridModeType) => void;
+  next: (forceGridMode?: DatePickerGridModeType) => void;
+  previous: (forceGridMode?: DatePickerGridModeType) => void;
+  jumpToNow: () => void;
+  jumpToSelection: () => void;
+  clear: () => void;
+  close: () => void;
+}
+
+let _currentDatePickerContext: IDatePickerContext | null = null;
+
+export const setCurrentDatePickerContext = (context: IDatePickerContext) => {
+  _currentDatePickerContext = context;
+};
+
+export const useDatePickerContext = (): IDatePickerContext => {
+  if (!_currentDatePickerContext) {
+    throw new Error('useDatePickerContext must be used within a DatePicker provider');
+  }
+  return _currentDatePickerContext;
+};

package/src/components/organisms/date-picker/components/date-picker.drawer.content.ui.syn

@@ -0,0 +1,93 @@
+import { useEffect } from '@synetics/synetics.dev';
+
+import { DatePickerSelectionModeType } from '../core/date-picker.types';
+import { useObjectRef } from '../hooks/use-object-ref';
+import {
+  CalendarDateIcon,
+  CalendarEventIcon,
+  CalendarIcon,
+  CalendarRangeIcon,
+  WorldIcon,
+} from '../internal-components/icons';
+import { useToggleableContext } from '../toggleable/toggleable.context.hook';
+import DatePickerBodyDays from './date-picker.body.days';
+import DatePickerBodyMonths from './date-picker.body.months';
+import DatePickerBodyYears from './date-picker.body.years';
+import DatePickerDrawerHeader from './date-picker.header';
+import DatePickerSwitch from './date-picker.switch';
+
+interface IDatePickerDrawerProps {
+  id: string;
+  defaultSelectionMode?: DatePickerSelectionModeType;
+  showFooter?: boolean;
+  handleKeyDown: (e: KeyboardEvent) => void;
+  onClick: (e: MouseEvent) => void;
+  width?: string;
+  height?: string;
+}
+
+/**
+ * A functional component that renders a customizable DatePicker drawer UI.
+ */
+const DatePickerDrawerUI = ({
+  id,
+  showFooter,
+  defaultSelectionMode = 'single',
+  handleKeyDown,
+  onClick,
+  width,
+  height,
+}: IDatePickerDrawerProps) => {
+  const { mainRef, castedRefObject } = useObjectRef<HTMLDivElement>();
+  const { toggleState } = useToggleableContext();
+
+  useEffect(() => {
+    if (!castedRefObject || toggleState() === 'closed') return;
+    castedRefObject?.focus();
+  });
+
+  return (
+    <div
+      ref={mainRef}
+      tabIndex={0}
+      className="date-picker-container overflow-hidden"
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      style={{ width: width, height: height }}
+    >
+      <DatePickerDrawerHeader id={id} />
+
+      <div className="date-picker-body">
+        <DatePickerSwitch
+          day={<DatePickerBodyDays id={id} />}
+          year={<DatePickerBodyYears id={id} />}
+          month={<DatePickerBodyMonths id={id} />}
+        />
+      </div>
+
+      {showFooter && (
+        <div className="date-picker-footer">
+          <div className="grid-mode">
+            <div>grid mode: </div>
+            <div>
+              <DatePickerSwitch
+                day={<CalendarDateIcon />}
+                month={<CalendarIcon />}
+                year={<WorldIcon />}
+              />
+            </div>
+          </div>
+
+          <div className="grid-mode">
+            <div>selection mode: </div>
+            <div>
+              {defaultSelectionMode === 'range' ? <CalendarRangeIcon /> : <CalendarEventIcon />}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DatePickerDrawerUI;