@fragments-sdk/ui 0.7.5 → 0.8.1

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,535 @@
+import * as React from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { DayPicker, UI, SelectionState, DayFlag } from 'react-day-picker';
+import { format } from 'date-fns';
+import styles from './DatePicker.module.scss';
+// Import globals to ensure CSS variables are defined
+import '../../styles/globals.scss';
+
+// ============================================
+// Types
+// ============================================
+
+export type { DateRange, Matcher } from 'react-day-picker';
+import type { DateRange, Matcher, Locale } from 'react-day-picker';
+
+export interface DatePickerProps {
+  children: React.ReactNode;
+  /** Selection mode */
+  mode?: 'single' | 'range';
+  /** Controlled date (single mode) */
+  selected?: Date | null;
+  /** Controlled range (range mode) */
+  selectedRange?: DateRange | null;
+  /** Single selection callback */
+  onSelect?: (date: Date | null) => void;
+  /** Range selection callback */
+  onRangeSelect?: (range: DateRange | null) => void;
+  /** Number of months displayed side-by-side */
+  numberOfMonths?: number;
+  /** Disable the picker */
+  disabled?: boolean;
+  /** react-day-picker Matcher for disabled dates */
+  disabledDates?: Matcher | Matcher[];
+  /** Trigger placeholder text */
+  placeholder?: string;
+  /** date-fns locale for i18n */
+  locale?: Locale;
+  /** Always show 6 rows */
+  fixedWeeks?: boolean;
+  /** Custom trigger date formatter */
+  formatDate?: (date: Date) => string;
+  /** Custom trigger range formatter */
+  formatRange?: (range: DateRange) => string;
+  /** Controlled popover open state */
+  open?: boolean;
+  /** Popover open state change callback */
+  onOpenChange?: (open: boolean) => void;
+  /** Hidden input name for forms */
+  name?: string;
+}
+
+export interface DatePickerTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  placeholder?: string;
+}
+
+export interface DatePickerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+}
+
+export interface DatePickerCalendarProps {
+  /** Override number of months from root */
+  numberOfMonths?: number;
+  className?: string;
+}
+
+export interface DatePickerPresetProps {
+  children: React.ReactNode;
+  /** Date to select (single mode) */
+  date?: Date;
+  /** Range to select (range mode) */
+  range?: DateRange;
+  className?: string;
+}
+
+// ============================================
+// Icons
+// ============================================
+
+function CalendarIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+      <line x1="16" y1="2" x2="16" y2="6" />
+      <line x1="8" y1="2" x2="8" y2="6" />
+      <line x1="3" y1="10" x2="21" y2="10" />
+    </svg>
+  );
+}
+
+function ChevronLeftIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  );
+}
+
+// ============================================
+// Context
+// ============================================
+
+interface DatePickerContextValue {
+  mode: 'single' | 'range';
+  selected: Date | null;
+  selectedRange: DateRange | null;
+  setSelected: (date: Date | null) => void;
+  setSelectedRange: (range: DateRange | null) => void;
+  numberOfMonths: number;
+  disabled: boolean;
+  disabledDates?: Matcher | Matcher[];
+  placeholder: string;
+  locale?: Locale;
+  fixedWeeks: boolean;
+  formatDate: (date: Date) => string;
+  formatRange: (range: DateRange) => string;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  isControlledOpen: boolean;
+  name?: string;
+}
+
+const DatePickerContext = React.createContext<DatePickerContextValue | null>(null);
+
+function useDatePickerContext() {
+  const context = React.useContext(DatePickerContext);
+  if (!context) {
+    throw new Error('DatePicker compound components must be used within <DatePicker>');
+  }
+  return context;
+}
+
+// ============================================
+// Default formatters
+// ============================================
+
+function defaultFormatDate(date: Date): string {
+  return format(date, 'PPP');
+}
+
+function defaultFormatRange(range: DateRange): string {
+  if (!range.from) return '';
+  if (!range.to) return format(range.from, 'LLL dd, y');
+  return `${format(range.from, 'LLL dd, y')} - ${format(range.to, 'LLL dd, y')}`;
+}
+
+// ============================================
+// ClassNames mapping
+// ============================================
+
+const calendarClassNames = {
+  [UI.Root]: styles.calendar,
+  [UI.Months]: styles.months,
+  [UI.Month]: styles.month,
+  [UI.MonthCaption]: styles.monthCaption,
+  [UI.CaptionLabel]: styles.captionLabel,
+  [UI.Nav]: styles.nav,
+  [UI.PreviousMonthButton]: styles.navButton,
+  [UI.NextMonthButton]: styles.navButton,
+  [UI.MonthGrid]: styles.monthGrid,
+  [UI.Weekdays]: styles.weekdays,
+  [UI.Weekday]: styles.weekday,
+  [UI.Weeks]: styles.weeks,
+  [UI.Week]: styles.week,
+  [UI.Day]: styles.day,
+  [UI.DayButton]: styles.dayButton,
+  [UI.Chevron]: styles.chevron,
+  [SelectionState.selected]: styles.selected,
+  [SelectionState.range_start]: styles.rangeStart,
+  [SelectionState.range_middle]: styles.rangeMiddle,
+  [SelectionState.range_end]: styles.rangeEnd,
+  [DayFlag.today]: styles.today,
+  [DayFlag.outside]: styles.outside,
+  [DayFlag.disabled]: styles.disabled,
+  [DayFlag.focused]: styles.focused,
+};
+
+// ============================================
+// Components
+// ============================================
+
+function DatePickerRoot({
+  children,
+  mode = 'single',
+  selected: selectedProp,
+  selectedRange: selectedRangeProp,
+  onSelect,
+  onRangeSelect,
+  numberOfMonths = 1,
+  disabled = false,
+  disabledDates,
+  placeholder,
+  locale,
+  fixedWeeks = false,
+  formatDate: formatDateProp,
+  formatRange: formatRangeProp,
+  open: openProp,
+  onOpenChange,
+  name,
+}: DatePickerProps) {
+  const [internalSelected, setInternalSelected] = React.useState<Date | null>(
+    selectedProp ?? null
+  );
+  const [internalRange, setInternalRange] = React.useState<DateRange | null>(
+    selectedRangeProp ?? null
+  );
+  const [internalOpen, setInternalOpen] = React.useState(false);
+
+  const isControlledOpen = openProp !== undefined;
+  const isOpen = isControlledOpen ? openProp : internalOpen;
+
+  // Sync controlled selected
+  React.useEffect(() => {
+    if (selectedProp !== undefined) {
+      setInternalSelected(selectedProp);
+    }
+  }, [selectedProp]);
+
+  // Sync controlled range
+  React.useEffect(() => {
+    if (selectedRangeProp !== undefined) {
+      setInternalRange(selectedRangeProp);
+    }
+  }, [selectedRangeProp]);
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      if (!isControlledOpen) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlledOpen, onOpenChange]
+  );
+
+  const setSelected = React.useCallback(
+    (date: Date | null) => {
+      if (selectedProp === undefined) {
+        setInternalSelected(date);
+      }
+      onSelect?.(date);
+
+      // Auto-close after single selection (uncontrolled)
+      if (!isControlledOpen && date) {
+        setTimeout(() => {
+          setInternalOpen(false);
+          onOpenChange?.(false);
+        }, 150);
+      }
+    },
+    [selectedProp, onSelect, isControlledOpen, onOpenChange]
+  );
+
+  const setSelectedRange = React.useCallback(
+    (range: DateRange | null) => {
+      if (selectedRangeProp === undefined) {
+        setInternalRange(range);
+      }
+      onRangeSelect?.(range);
+
+      // Range mode never auto-closes. The user closes manually via
+      // click-outside, Escape, or clicking the trigger again. This
+      // matches shadcn behavior and avoids premature close on first
+      // click or preset selection.
+    },
+    [selectedRangeProp, onRangeSelect, isControlledOpen, onOpenChange]
+  );
+
+  const defaultPlaceholder = mode === 'range' ? 'Select date range' : 'Pick a date';
+
+  const contextValue = React.useMemo<DatePickerContextValue>(
+    () => ({
+      mode,
+      selected: selectedProp !== undefined ? selectedProp : internalSelected,
+      selectedRange: selectedRangeProp !== undefined ? selectedRangeProp : internalRange,
+      setSelected,
+      setSelectedRange,
+      numberOfMonths,
+      disabled,
+      disabledDates,
+      placeholder: placeholder ?? defaultPlaceholder,
+      locale,
+      fixedWeeks,
+      formatDate: formatDateProp ?? defaultFormatDate,
+      formatRange: formatRangeProp ?? defaultFormatRange,
+      isOpen,
+      setIsOpen: handleOpenChange,
+      isControlledOpen,
+      name,
+    }),
+    [
+      mode,
+      selectedProp,
+      internalSelected,
+      selectedRangeProp,
+      internalRange,
+      setSelected,
+      setSelectedRange,
+      numberOfMonths,
+      disabled,
+      disabledDates,
+      placeholder,
+      defaultPlaceholder,
+      locale,
+      fixedWeeks,
+      formatDateProp,
+      formatRangeProp,
+      isOpen,
+      handleOpenChange,
+      isControlledOpen,
+      name,
+    ]
+  );
+
+  return (
+    <DatePickerContext.Provider value={contextValue}>
+      <BasePopover.Root
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+      >
+        {children}
+      </BasePopover.Root>
+      {name && (
+        <input
+          type="hidden"
+          name={name}
+          value={
+            mode === 'single'
+              ? (contextValue.selected?.toISOString() ?? '')
+              : contextValue.selectedRange
+                ? `${contextValue.selectedRange.from?.toISOString() ?? ''},${contextValue.selectedRange.to?.toISOString() ?? ''}`
+                : ''
+          }
+        />
+      )}
+    </DatePickerContext.Provider>
+  );
+}
+
+function DatePickerTrigger({ children, placeholder, className, ...htmlProps }: DatePickerTriggerProps) {
+  const ctx = useDatePickerContext();
+  const placeholderText = placeholder ?? ctx.placeholder;
+
+  const classes = [styles.trigger, className].filter(Boolean).join(' ');
+
+  let displayText: string | null = null;
+  if (ctx.mode === 'single' && ctx.selected) {
+    displayText = ctx.formatDate(ctx.selected);
+  } else if (ctx.mode === 'range' && ctx.selectedRange?.from) {
+    displayText = ctx.formatRange(ctx.selectedRange);
+  }
+
+  return (
+    <BasePopover.Trigger
+      {...htmlProps}
+      className={classes}
+      disabled={ctx.disabled}
+    >
+      {children ?? (
+        <>
+          <span className={styles.triggerIcon}>
+            <CalendarIcon />
+          </span>
+          <span className={displayText ? styles.triggerValue : styles.triggerPlaceholder}>
+            {displayText ?? placeholderText}
+          </span>
+        </>
+      )}
+    </BasePopover.Trigger>
+  );
+}
+
+function DatePickerContent({
+  children,
+  className,
+  sideOffset = 4,
+  align = 'start',
+  ...htmlProps
+}: DatePickerContentProps) {
+  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');
+
+  return (
+    <BasePopover.Portal>
+      <BasePopover.Positioner
+        side="bottom"
+        align={align}
+        sideOffset={sideOffset}
+        className={styles.positioner}
+      >
+        <BasePopover.Popup {...htmlProps} className={popupClasses}>
+          {children}
+        </BasePopover.Popup>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  );
+}
+
+function DatePickerCalendar({ numberOfMonths: numberOfMonthsProp, className }: DatePickerCalendarProps) {
+  const ctx = useDatePickerContext();
+  const monthCount = numberOfMonthsProp ?? ctx.numberOfMonths;
+
+  const calendarClasses = className
+    ? { ...calendarClassNames, [UI.Root]: [styles.calendar, className].join(' ') }
+    : calendarClassNames;
+
+  const components = React.useMemo(
+    () => ({
+      Chevron: (props: { orientation?: string }) =>
+        props.orientation === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />,
+    }),
+    []
+  );
+
+  if (ctx.mode === 'range') {
+    const rangeSelected = ctx.selectedRange
+      ? { from: ctx.selectedRange.from ?? undefined, to: ctx.selectedRange.to ?? undefined }
+      : undefined;
+
+    return (
+      <DayPicker
+        mode="range"
+        selected={rangeSelected}
+        onSelect={(range) => {
+          ctx.setSelectedRange(range ? { from: range.from ?? undefined, to: range.to ?? undefined } : null);
+        }}
+        numberOfMonths={monthCount}
+        disabled={ctx.disabledDates}
+        locale={ctx.locale}
+        fixedWeeks={ctx.fixedWeeks}
+        classNames={calendarClasses}
+        components={components}
+        showOutsideDays
+      />
+    );
+  }
+
+  return (
+    <DayPicker
+      mode="single"
+      selected={ctx.selected ?? undefined}
+      onSelect={(date) => {
+        ctx.setSelected(date ?? null);
+      }}
+      numberOfMonths={monthCount}
+      disabled={ctx.disabledDates}
+      locale={ctx.locale}
+      fixedWeeks={ctx.fixedWeeks}
+      classNames={calendarClasses}
+      components={components}
+      showOutsideDays
+    />
+  );
+}
+
+function DatePickerPreset({ children, date, range, className }: DatePickerPresetProps) {
+  const ctx = useDatePickerContext();
+  const classes = [styles.preset, className].filter(Boolean).join(' ');
+
+  const handleClick = React.useCallback(() => {
+    if (ctx.mode === 'single' && date) {
+      ctx.setSelected(date);
+    } else if (ctx.mode === 'range' && range) {
+      ctx.setSelectedRange(range);
+    }
+  }, [ctx, date, range]);
+
+  return (
+    <button type="button" className={classes} onClick={handleClick}>
+      {children}
+    </button>
+  );
+}
+
+// ============================================
+// Export compound component
+// ============================================
+
+export const DatePicker = Object.assign(DatePickerRoot, {
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent,
+  Calendar: DatePickerCalendar,
+  Preset: DatePickerPreset,
+});
+
+// Re-export individual components
+export {
+  DatePickerRoot,
+  DatePickerTrigger,
+  DatePickerContent,
+  DatePickerCalendar,
+  DatePickerPreset,
+};

package/src/components/Dialog/Dialog.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Dialog } from '.';
 import { Button } from '../Button';
 
-export default defineSegment({
+export default defineFragment({
   component: Dialog,
 
   meta: {

package/src/components/EmptyState/EmptyState.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { EmptyState } from '.';
 import { Button } from '../Button';
 
@@ -54,7 +54,7 @@ const InboxIcon = () => (
   </svg>
 );
 
-export default defineSegment({
+export default defineFragment({
   component: EmptyState,
 
   meta: {

package/src/components/Field/Field.fragment.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Field } from '.';
 import { Input } from '../Input';
 import { Grid } from '../Grid';
 
-export default defineSegment({
+export default defineFragment({
   component: Field,
 
   meta: {
@@ -42,6 +42,11 @@ export default defineSegment({
   },
 
   props: {
+    children: {
+      type: 'node',
+      description: 'Field content (Label, Control, Description, Error)',
+      required: true,
+    },
     name: {
       type: 'string',
       description: 'Field name, used for error distribution from Form',
@@ -67,10 +72,6 @@ export default defineSegment({
       type: 'number',
       description: 'Debounce time in ms for onChange validation',
     },
-    className: {
-      type: 'string',
-      description: 'Additional CSS class',
-    },
   },
 
   relations: [

package/src/components/Fieldset/Fieldset.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Fieldset } from '.';
 import { Field } from '../Field';
 import { Input } from '../Input';
@@ -8,7 +8,7 @@ import { Select } from '../Select';
 import { Checkbox } from '../Checkbox';
 import { Grid } from '../Grid';
 
-export default defineSegment({
+export default defineFragment({
   component: Fieldset,
 
   meta: {
@@ -43,14 +43,15 @@ export default defineSegment({
   },
 
   props: {
+    children: {
+      type: 'node',
+      description: 'Fieldset content including Fieldset.Legend and form fields',
+      required: true,
+    },
     disabled: {
       type: 'boolean',
       description: 'Disables all fields within the fieldset',
     },
-    className: {
-      type: 'string',
-      description: 'Additional CSS class',
-    },
   },
 
   relations: [

package/src/components/Form/Form.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineSegment } from '@fragments/core';
+import { defineFragment } from '@fragments/core';
 import { Form } from '.';
 import { Field } from '../Field';
 import { Fieldset } from '../Fieldset';
@@ -12,7 +12,7 @@ import { Toggle } from '../Toggle';
 import { Button } from '../Button';
 import { Grid } from '../Grid';
 
-export default defineSegment({
+export default defineFragment({
   component: Form,
 
   meta: {
@@ -48,6 +48,11 @@ export default defineSegment({
   },
 
   props: {
+    children: {
+      type: 'node',
+      description: 'Form content',
+      required: true,
+    },
     errors: {
       type: 'object',
       description: 'Server-side errors keyed by field name',
@@ -60,9 +65,10 @@ export default defineSegment({
       type: 'function',
       description: 'Called with field name when errors should be cleared',
     },
-    className: {
-      type: 'string',
-      description: 'Additional CSS class',
+    validationMode: {
+      type: 'enum',
+      description: 'When field validation should run',
+      values: ['onSubmit', 'onBlur', 'onChange'],
     },
   },
 

package/src/components/Form/index.tsx

@@ -19,7 +19,7 @@ export interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, '
 // Component
 // ============================================
 
-export function Form({
+function FormRoot({
   children,
   errors,
   onFormSubmit,
@@ -51,3 +51,7 @@ export function Form({
     </BaseForm>
   );
 }
+
+export const Form = Object.assign(FormRoot, {
+  Root: FormRoot,
+});