@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/motion/sheet.ts

@@ -1,65 +1,88 @@
-import { gsap, EASE, registerMotion } from '../core/gsap';
-import { motionSpring } from '../core/physics-spring';
-import { reduced } from '../core/reduced';
-import { clearStyles } from '../core/styles';
-import { TIMING } from '../core/timing';
-import { backdropVeil, ghostOf } from './surface';
-
-/*
- * project sheet: the surface rises from below the screen (0.72 s,
- * cubic(.16,1,.3,1)) while the page behind ([data-mk-underlay]) sinks to
- * scale .98 / opacity .4 on a 300/30 spring. It closes through an inert copy
- * that drops away, so focus returns at once.
- */
-
-const UNDERLAY_STYLES = ['transform', 'translate', 'rotate', 'scale', 'transform-origin', 'opacity'];
-
-export function sheetOpen(surface: HTMLElement) {
-  if (reduced()) return null;
-  registerMotion();
-  return gsap.fromTo(surface, { yPercent: 100 }, { yPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
-}
-
-/** Drop a copy of the (still open) sheet off the bottom of the screen. */
-export function sheetClose(surface: HTMLElement, { inPlace = false }: { inPlace?: boolean } = {}) {
-  registerMotion();
-  const dragged = inPlace ? Number(gsap.getProperty(surface, 'y')) || 0 : 0;
-  gsap.killTweensOf(surface);
-  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
-  const ghost = reduced() ? null : ghostOf(surface);
-  if (!ghost) return null;
-  const veil = backdropVeil(surface);
-  document.body.append(veil, ghost);
-  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close, ease: 'power3.in', onComplete: () => veil.remove() });
-  return gsap.fromTo(
-    ghost,
-    { y: dragged, yPercent: 0 },
-    { yPercent: 100, duration: TIMING.sheet.close, ease: EASE.sheet, onComplete: () => ghost.remove() },
-  );
-}
-
-export function pushUnderlay(elements: HTMLElement[]) {
-  if (!elements.length || reduced()) return;
-  registerMotion();
-  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
-  gsap.to(elements, {
-    scale: TIMING.sheet.underlayScale,
-    opacity: TIMING.sheet.underlayOpacity,
-    transformOrigin: '50% 0',
-    duration,
-    ease,
-    overwrite: 'auto',
-  });
-}
-
-export function releaseUnderlay(elements: HTMLElement[], animated = true) {
-  if (!elements.length) return;
-  const restore = () => clearStyles(elements, UNDERLAY_STYLES);
-  if (!animated || reduced()) {
-    gsap.killTweensOf(elements);
-    restore();
-    return;
-  }
-  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
-  gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: 'auto', onComplete: restore });
-}
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { motionSpring } from '../core/physics-spring';
+import { reduced } from '../core/reduced';
+import { clearStyles } from '../core/styles';
+import { TIMING } from '../core/timing';
+import { backdropVeil, ghostOf } from './surface';
+
+/*
+ * project sheet: the surface rises from below the screen (0.72 s,
+ * cubic(.16,1,.3,1)) while the page behind ([data-mk-underlay]) sinks to
+ * scale .98 / opacity .4 on a 300/30 spring. It closes through an inert copy
+ * that drops away, so focus returns at once.
+ */
+
+const UNDERLAY_STYLES = ['transform', 'translate', 'rotate', 'scale', 'transform-origin', 'opacity'];
+
+export function sheetOpen(surface: HTMLElement) {
+  if (reduced()) return null;
+  registerMotion();
+  return gsap.fromTo(surface, { yPercent: 100 }, { yPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
+}
+
+/** Side of a drawer surface: data-mk-drawer="left", else right. */
+const slideFrom = (surface: HTMLElement) => (surface.dataset.mkDrawer === 'left' ? -1 : 1);
+
+/** Drawer: the surface slides in from its side on the sheet curve. */
+export function slideOpen(surface: HTMLElement) {
+  if (reduced()) return null;
+  registerMotion();
+  return gsap.fromTo(surface, { xPercent: 104 * slideFrom(surface) }, { xPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
+}
+
+/** Slide a copy of the (still open) drawer back off its side, so focus returns at once. */
+export function slideClose(surface: HTMLElement) {
+  registerMotion();
+  gsap.killTweensOf(surface);
+  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) return null;
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close * 0.8, ease: 'power3.in', onComplete: () => veil.remove() });
+  return gsap.to(ghost, { xPercent: 104 * slideFrom(surface), duration: TIMING.sheet.close * 0.8, ease: 'power3.in', onComplete: () => ghost.remove() });
+}
+
+/** Drop a copy of the (still open) sheet off the bottom of the screen. */
+export function sheetClose(surface: HTMLElement, { inPlace = false }: { inPlace?: boolean } = {}) {
+  registerMotion();
+  const dragged = inPlace ? Number(gsap.getProperty(surface, 'y')) || 0 : 0;
+  gsap.killTweensOf(surface);
+  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) return null;
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close, ease: 'power3.in', onComplete: () => veil.remove() });
+  return gsap.fromTo(
+    ghost,
+    { y: dragged, yPercent: 0 },
+    { yPercent: 100, duration: TIMING.sheet.close, ease: EASE.sheet, onComplete: () => ghost.remove() },
+  );
+}
+
+export function pushUnderlay(elements: HTMLElement[]) {
+  if (!elements.length || reduced()) return;
+  registerMotion();
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, {
+    scale: TIMING.sheet.underlayScale,
+    opacity: TIMING.sheet.underlayOpacity,
+    transformOrigin: '50% 0',
+    duration,
+    ease,
+    overwrite: 'auto',
+  });
+}
+
+export function releaseUnderlay(elements: HTMLElement[], animated = true) {
+  if (!elements.length) return;
+  const restore = () => clearStyles(elements, UNDERLAY_STYLES);
+  if (!animated || reduced()) {
+    gsap.killTweensOf(elements);
+    restore();
+    return;
+  }
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: 'auto', onComplete: restore });
+}

package/src/motion/surface.ts

@@ -78,6 +78,15 @@ export function ghostOf(surface: HTMLElement): HTMLElement | null {
   const ghost = document.createElement('div');
   ghost.className = surface.className;
   ghost.innerHTML = surface.innerHTML;
+  // The markup carries attributes, not what was typed or chosen since: copy the live values too.
+  const live = surface.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select');
+  ghost.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select').forEach((copy, i) => {
+    const source = live[i];
+    if (!source) return;
+    if (copy instanceof HTMLSelectElement) copy.selectedIndex = (source as HTMLSelectElement).selectedIndex;
+    else copy.value = source.value;
+    if (copy instanceof HTMLInputElement && source instanceof HTMLInputElement) copy.checked = source.checked;
+  });
   ghost.setAttribute('aria-hidden', 'true');
   ghost.inert = true;
   ghost.dataset.mkGhost = '';

package/src/react/index.ts

@@ -69,7 +69,7 @@ export {
   type ChatComposerProps,
 } from '../components/chat/react';
 export { Nav, type NavProps, type NavItem } from '../components/nav/react';
-export { NAV_STYLES, type NavStyle } from '../components/nav/engine';
+export { NAV_STYLES, NAV_STYLE_ALIASES, toNavStyle, type NavStyle, type NavStyleAlias } from '../components/nav/engine';
 export { Steps, type StepsProps } from '../components/steps/react';
 export { Cursor, type CursorProps } from '../components/cursor/react';
 export { Frost, type FrostProps } from './frost';
@@ -99,3 +99,73 @@ export { useWeightHover } from './use-weight-hover';
 export { useSticker } from './use-sticker';
 export { useScrollDock } from './use-scroll-dock';
 export { useLocalClock } from './use-local-clock';
+export { Attachment, type AttachmentProps, type AttachmentUpload } from '../components/attachment/react';
+export { Skeleton, type SkeletonProps } from '../components/skeleton/react';
+export { Questionnaire, type QuestionnaireProps, type Question, type QuestionType, type QuestionOption } from '../components/questionnaire/react';
+export { CodeBlock, type CodeBlockProps } from '../components/code-block/react';
+export { ContextMenu, type ContextMenuProps } from '../components/context-menu/react';
+export { Drawer, useDrawer, type DrawerRootProps } from '../components/drawer/react';
+export { LinkPreview, type LinkPreviewProps } from '../components/link-preview/react';
+export { Progress, type ProgressProps } from '../components/progress/react';
+export { RangeSlider, type RangeSliderProps } from '../components/range-slider/react';
+export { Chart, type ChartProps } from '../components/chart/react';
+export { CreditCard, type CreditCardProps } from '../components/credit-card/react';
+export { CommandSearch, type CommandSearchProps } from '../components/command-search/react';
+export type { CommandItem } from '../components/command-search/engine';
+export { HoldConfirm, type HoldConfirmProps } from '../components/hold-confirm/react';
+export { ImagePreview, type ImagePreviewProps, type PreviewImage } from '../components/image-preview/react';
+export { LikeButton, type LikeButtonProps } from '../components/like-button/react';
+export { NotificationBell, type NotificationBellProps } from '../components/notification-bell/react';
+export { PasswordStrength, type PasswordStrengthProps } from '../components/password-strength/react';
+export { ScratchCard, type ScratchCardProps } from '../components/scratch-card/react';
+export { StarRating, type StarRatingProps } from '../components/star-rating/react';
+export { SwipeActions, type SwipeActionsProps, type SwipeRowProps, type SwipeAction } from '../components/swipe-actions/react';
+export { ColorSlider, type ColorSliderProps } from '../components/color-slider/react';
+export { ColorArea, type ColorAreaProps } from '../components/color-area/react';
+export { ColorField, type ColorFieldProps } from '../components/color-field/react';
+export { ColorPicker, type ColorPickerProps } from '../components/color-picker/react';
+export { TimeField, type TimeFieldProps } from '../components/time-field/react';
+export { RangeCalendar, type RangeCalendarProps } from '../components/range-calendar/react';
+export { DateRangePicker, type DateRangePickerProps } from '../components/date-range-picker/react';
+export { Tooltip, type TooltipProps } from '../components/tooltip/react';
+export { Popover, type PopoverProps } from '../components/popover/react';
+export { LoadingButton, type LoadingButtonProps } from '../components/loading-button/react';
+export { Breadcrumb, type BreadcrumbProps } from '../components/breadcrumb/react';
+export { EmptyState, type EmptyStateProps } from '../components/empty-state/react';
+export { StatCard, type StatCardProps } from '../components/stat-card/react';
+export { ChartTooltip, type ChartTooltipProps } from '../components/chart-tooltip/react';
+export { MultiSelect, type MultiSelectProps } from '../components/multi-select/react';
+export { TagInput, type TagInputProps } from '../components/tag-input/react';
+export { DateTimePicker, type DateTimePickerProps } from '../components/date-time-picker/react';
+export { FilterBuilder, type FilterBuilderProps } from '../components/filter-builder/react';
+export { Timeline, type TimelineProps } from '../components/timeline/react';
+export type { TimelineEvent, TimelineStatus } from '../components/timeline/engine';
+export { ActivityFeed, type ActivityFeedProps, type ActivityFeedHandle } from '../components/activity-feed/react';
+export type { ActivityItem, ActivityActor, ActivityKind } from '../components/activity-feed/engine';
+export { TreeView, type TreeViewProps, type TreeViewHandle } from '../components/tree-view/react';
+export type { TreeNode } from '../core/tree';
+export { FileExplorer, type FileExplorerProps, type FileExplorerHandle } from '../components/file-explorer/react';
+export type { FileEntry, FileView, FileChange } from '../components/file-explorer/engine';
+export { JsonViewer, type JsonViewerProps, type JsonViewerHandle } from '../components/json-viewer/react';
+export { VirtualList, type VirtualListProps, type VirtualListHandle } from '../components/virtual-list/react';
+export { ResizablePanel, type ResizablePanelProps, type ResizablePanelHandle } from '../components/resizable-panel/react';
+export { SplitView, type SplitViewProps, type SplitViewHandle } from '../components/split-view/react';
+export { DataTable, type DataTableProps, type DataTableHandle } from '../components/data-table/react';
+export type { DataColumn, DataAction, DataRow, DataSort, RowId } from '../components/data-table/engine';
+export { EditableTable, type EditableTableProps, type EditableTableHandle } from '../components/editable-table/react';
+export type { EditableColumn, RowChange, EditorKind } from '../components/editable-table/engine';
+export { RichTextEditor, type RichTextEditorProps, type RichTextEditorHandle } from '../components/rich-text-editor/react';
+export type { RichCommand } from '../components/rich-text-editor/engine';
+export { Select, type SelectProps } from '../components/select/react';
+export { AddToCart, type AddToCartProps } from '../components/add-to-cart/react';
+export { ScrollIsland, type ScrollIslandProps } from '../components/scroll-island/react';
+export { PillButton, type PillButtonProps } from '../components/pill-button/react';
+export { Toolbar, type ToolbarProps } from '../components/toolbar/react';
+export { BidirectionalSlider, type BidirectionalSliderProps } from '../components/bidirectional-slider/react';
+export { VoiceDots, type VoiceDotsProps } from '../components/voice-dots/react';
+export { PieChart, type PieChartProps } from '../components/pie-chart/react';
+export { RadarChart, type RadarChartProps } from '../components/radar-chart/react';
+export { RadialChart, type RadialChartProps } from '../components/radial-chart/react';
+export { SankeyChart, type SankeyChartProps } from '../components/sankey-chart/react';
+export { HeatmapChart, type HeatmapChartProps } from '../components/heatmap-chart/react';
+export { OrbitMenu, type OrbitMenuProps } from '../components/orbit-menu/react';