@inkra/react 0.2.0 → 0.3.0

package/dist/styles.css

@@ -1247,6 +1247,10 @@
   gap: 0;
 }
 
+.inkra-input-number__controls .inkra-button {
+  touch-action: none;
+}
+
 .inkra-slider {
   --inkra-slider-track-size: 8px;
   --inkra-slider-thumb-size: 24px;
@@ -1643,7 +1647,7 @@
 }
 
 .inkra-overlay__backdrop {
-  animation: inkra-overlay-backdrop-in var(--inkra-motion-normal) var(--inkra-ease);
+  animation: inkra-overlay-backdrop-in var(--inkra-motion-normal) var(--inkra-ease) both;
   background: var(--inkra-overlay);
   inset: 0;
   position: fixed;
@@ -1651,11 +1655,11 @@
 }
 
 .inkra-overlay__backdrop[data-state="closed"] {
-  animation: inkra-overlay-backdrop-out var(--inkra-motion-normal) var(--inkra-ease);
+  animation: inkra-overlay-backdrop-out var(--inkra-motion-normal) var(--inkra-ease) both;
 }
 
 .inkra-overlay__content {
-  animation: inkra-overlay-content-in var(--inkra-motion-normal) var(--inkra-ease);
+  animation: inkra-overlay-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
   inset-block-start: 50%;
   inset-inline-start: 50%;
   max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
@@ -1667,7 +1671,8 @@
 }
 
 .inkra-overlay__content[data-state="closed"] {
-  animation: inkra-overlay-content-out var(--inkra-motion-normal) var(--inkra-ease);
+  animation: inkra-overlay-content-out var(--inkra-motion-normal) var(--inkra-ease) both;
+  pointer-events: none;
 }
 
 .inkra-overlay__content:focus-visible,
@@ -1765,7 +1770,7 @@
 }
 
 .inkra-popover__content {
-  animation: inkra-popover-content-in var(--inkra-motion-normal) var(--inkra-ease);
+  animation: inkra-popover-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
   max-height: min(70vh, var(--radix-popover-content-available-height, 70vh));
   max-width: min(24rem, calc(100vw - var(--inkra-space-8)));
   outline: 0;
@@ -1775,7 +1780,8 @@
 }
 
 .inkra-popover__content[data-state="closed"] {
-  animation: inkra-popover-content-out var(--inkra-motion-normal) var(--inkra-ease);
+  animation: inkra-popover-content-out var(--inkra-motion-normal) var(--inkra-ease) both;
+  pointer-events: none;
 }
 
 .inkra-popover__surface {
@@ -1871,7 +1877,7 @@
   .inkra-overlay__backdrop,
   .inkra-overlay__content,
   .inkra-popover__content {
-    animation: none;
+    animation: none !important;
   }
 }
 
@@ -1903,7 +1909,7 @@
 
   .inkra-overlay__content,
   .inkra-popover__content {
-    animation: none;
+    animation: none !important;
     max-height: none;
     max-width: none;
     position: static;
@@ -2400,7 +2406,7 @@
 @media print { .inkra-tabs__selection, .inkra-tabs__focus-ring { display: none !important; } }
 
 .inkra-tooltip__content {
-  animation: inkra-tooltip-content-in var(--inkra-motion-fast) var(--inkra-ease);
+  animation: inkra-tooltip-content-in var(--inkra-motion-fast) var(--inkra-ease) both;
   max-width: min(20rem, calc(100vw - var(--inkra-space-4)));
   outline: 0;
   transform-origin: var(--radix-tooltip-content-transform-origin);
@@ -2408,7 +2414,8 @@
 }
 
 .inkra-tooltip__content[data-state="closed"] {
-  animation: inkra-tooltip-content-out var(--inkra-motion-fast) var(--inkra-ease);
+  animation: inkra-tooltip-content-out var(--inkra-motion-fast) var(--inkra-ease) both;
+  pointer-events: none;
 }
 
 .inkra-tooltip__surface {
@@ -2452,7 +2459,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .inkra-tooltip__content {
-    animation: none;
+    animation: none !important;
   }
 }
 
@@ -2593,6 +2600,25 @@
   padding: var(--inkra-space-2) var(--inkra-space-3) var(--inkra-space-4);
 }
 
+.inkra-accordion__content[data-state="open"] > .inkra-accordion__content-body {
+  animation: inkra-accordion-body-in var(--inkra-motion-normal) var(--inkra-ease);
+}
+
+.inkra-accordion__content[data-state="closed"] > .inkra-accordion__content-body {
+  animation: inkra-accordion-body-out var(--inkra-motion-normal) var(--inkra-ease) both;
+  pointer-events: none;
+}
+
+@keyframes inkra-accordion-body-in {
+  from { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes inkra-accordion-body-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
+}
+
 .inkra-accordion__divider {
   color: var(--inkra-border);
   inset-block-end: -4px;
@@ -2636,7 +2662,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .inkra-accordion__content {
+  .inkra-accordion__content,
+  .inkra-accordion__content-body {
     animation: none !important;
   }
 
@@ -2666,8 +2693,9 @@
 }
 
 @media print {
-  .inkra-accordion__content {
-    animation: none;
+  .inkra-accordion__content,
+  .inkra-accordion__content-body {
+    animation: none !important;
   }
 }
 
@@ -3034,17 +3062,49 @@
   .inkra-table tr[data-selected] { outline: 1px solid Highlight; }
 }
 
-.inkra-menu { min-width: 180px; max-width: min(320px, calc(100vw - 16px)); outline: 0; z-index: calc(40 + var(--inkra-floating-layer-offset, 0)); }
+.inkra-menu {
+  --inkra-menu-enter-x: 0px;
+  --inkra-menu-enter-y: var(--inkra-space-1);
+  min-width: 180px;
+  max-width: min(320px, calc(100vw - 16px));
+  outline: 0;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  z-index: calc(40 + var(--inkra-floating-layer-offset, 0));
+}
+.inkra-menu[data-side="top"] { --inkra-menu-enter-y: calc(-1 * var(--inkra-space-1)); }
+.inkra-menu[data-side="left"] { --inkra-menu-enter-x: calc(-1 * var(--inkra-space-1)); --inkra-menu-enter-y: 0px; }
+.inkra-menu[data-side="right"] { --inkra-menu-enter-x: var(--inkra-space-1); --inkra-menu-enter-y: 0px; }
+.inkra-menu[data-state="open"] { animation: inkra-menu-enter var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-menu[data-state="closed"] { animation: inkra-menu-exit var(--inkra-motion-fast) var(--inkra-ease) both; pointer-events: none; }
 .inkra-menu__paper { padding: 4px; max-height: var(--radix-dropdown-menu-content-available-height); overflow-y: auto; }
 .inkra-menu__item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; color: var(--inkra-ink); outline: 0; cursor: default; font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
 .inkra-menu__item[data-destructive] { color: var(--inkra-danger-foreground); }
 .inkra-menu__item[data-disabled] { opacity: 0.5; pointer-events: none; }
-.inkra-menu__highlight { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
+.inkra-menu__highlight { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--inkra-motion-fast) var(--inkra-ease); }
 .inkra-menu__item[data-highlighted] > .inkra-menu__highlight { opacity: 1; }
 .inkra-menu__icon { display: inline-flex; width: 16px; height: 16px; flex: none; position: relative; }
 .inkra-menu__label { position: relative; min-width: 0; overflow-wrap: anywhere; }
 .inkra-menu__group-label { padding: 8px 12px; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
 .inkra-menu__separator { height: 8px; }
+
+@keyframes inkra-menu-enter {
+  from { opacity: 0; transform: translate(var(--inkra-menu-enter-x), var(--inkra-menu-enter-y)); }
+  to { opacity: 1; transform: translate(0, 0); }
+}
+
+@keyframes inkra-menu-exit {
+  from { opacity: 1; transform: translate(0, 0); }
+  to { opacity: 0; transform: translate(var(--inkra-menu-enter-x), var(--inkra-menu-enter-y)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-menu { animation: none !important; }
+  .inkra-menu__highlight { transition: none; }
+}
+
+@media print {
+  .inkra-menu { animation: none !important; }
+}
 @media (forced-colors: active) {
   .inkra-menu { border: 1px solid CanvasText; background: Canvas; }
   .inkra-menu__item[data-highlighted] { outline: 2px solid Highlight; outline-offset: -2px; }
@@ -3491,7 +3551,12 @@
 
 .inkra-number-ticker__prefix,
 .inkra-number-ticker__suffix {
+  align-items: center;
+  align-self: center;
   color: var(--inkra-ink-muted);
+  display: inline-flex;
+  flex: none;
+  gap: var(--inkra-space-1, 4px);
   min-width: 0;
 }
 
@@ -5867,6 +5932,8 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 .inkra-sortable__item:not([data-disabled]) { cursor: grab; }
+.inkra-sortable__item[data-handle] { cursor: auto; }
+.inkra-sortable__item:not([data-disabled]):not([data-handle]) { touch-action: none; }
 .inkra-sortable__item[data-dragging] { cursor: grabbing; z-index: 1; }
 .inkra-sortable__item:focus { outline: none; }
 
@@ -6461,6 +6528,22 @@ div.inkra-choice-grid > .inkra-radio-group {
   }
 }
 
+.inkra-virtual-list__frame {
+  min-inline-size: 0;
+  position: relative;
+}
+
+.inkra-virtual-list__focus {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.inkra-virtual-list__frame:has(> .inkra-virtual-list:focus-visible) > .inkra-virtual-list__focus {
+  opacity: 1;
+}
+
 .inkra-virtual-list {
   block-size: 20rem;
   color: var(--inkra-ink);
@@ -6481,8 +6564,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 .inkra-virtual-list:focus-visible {
-  outline: var(--inkra-focus-width) solid var(--inkra-focus);
-  outline-offset: calc(-1 * var(--inkra-focus-width));
+  outline: none;
 }
 
 .inkra-virtual-list__items {
@@ -6535,8 +6617,12 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 @media (forced-colors: active) {
-  .inkra-virtual-list { border: 1px solid CanvasText; }
-  .inkra-virtual-list:focus-visible { outline-color: Highlight; }
+  .inkra-virtual-list__frame { border: 1px solid CanvasText; }
+  .inkra-virtual-list:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-color: Highlight;
+    outline-offset: calc(-1 * var(--inkra-focus-width));
+  }
   .inkra-virtual-list__item > .inkra-virtual-list__separator {
     inset-block-start: 0;
     opacity: 1;
@@ -7643,8 +7729,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .inkra-alert-dialog__content[data-state="closed"] {
   animation: inkra-alert-dialog-content-out var(--inkra-motion-normal) var(--inkra-ease);
+  pointer-events: none;
 }
 
+.inkra-alert-dialog__backdrop[data-state],
+.inkra-alert-dialog__content[data-state] { animation-fill-mode: both; }
+
 .inkra-alert-dialog__content:focus-visible {
   outline: var(--inkra-focus-width) solid var(--inkra-focus);
   outline-offset: var(--inkra-focus-offset);
@@ -7724,7 +7814,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 @media (prefers-reduced-motion: reduce) {
   .inkra-alert-dialog__backdrop,
-  .inkra-alert-dialog__content { animation: none; }
+  .inkra-alert-dialog__content { animation: none !important; }
+}
+
+@media print {
+  .inkra-alert-dialog__backdrop,
+  .inkra-alert-dialog__content { animation: none !important; }
 }
 
 @media (forced-colors: active) {
@@ -7765,6 +7860,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .inkra-drawer__content[data-state="closed"][data-direction="top"] { animation: inkra-drawer-top-out var(--inkra-motion-slow) var(--inkra-ease); }
 .inkra-drawer__content[data-state="closed"][data-direction="bottom"] { animation: inkra-drawer-bottom-out var(--inkra-motion-slow) var(--inkra-ease); }
 
+.inkra-drawer__backdrop[data-state],
+.inkra-drawer__content[data-state][data-direction] { animation-fill-mode: both; }
+.inkra-drawer__content[data-state="closed"] { pointer-events: none; }
+
 .inkra-drawer__surface,
 .inkra-drawer__layout { block-size: 100%; display: flex; flex-direction: column; min-height: 0; inline-size: 100%; }
 .inkra-drawer__surface { color: var(--inkra-ink); position: relative; }
@@ -7814,7 +7913,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 @media (prefers-reduced-motion: reduce) {
   .inkra-drawer__backdrop,
-  .inkra-drawer__content { animation: none; }
+  .inkra-drawer__content { animation: none !important; }
+}
+
+@media print {
+  .inkra-drawer__backdrop,
+  .inkra-drawer__content { animation: none !important; }
 }
 
 @media (forced-colors: active) {
@@ -8055,8 +8159,29 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .inkra-tree__description { min-width: 0; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
 .inkra-tree__item[data-disabled] .inkra-tree__item-content { opacity: .55; }
 .inkra-tree__empty { min-height: 72px; display: grid; place-items: center; padding: var(--inkra-space-4); color: var(--inkra-ink-muted); text-align: center; }
+
+.inkra-tree__item-content { animation: inkra-tree-row-in var(--inkra-motion-normal) var(--inkra-ease); }
+.inkra-tree__selection { animation: inkra-tree-selection-in var(--inkra-motion-fast) var(--inkra-ease); }
+
+@keyframes inkra-tree-row-in {
+  from { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes inkra-tree-selection-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .inkra-tree__chevron { transition: none; }
+  .inkra-tree__item-content,
+  .inkra-tree__selection { animation: none !important; }
+}
+
+@media print {
+  .inkra-tree__item-content,
+  .inkra-tree__selection { animation: none !important; }
 }
 @media (forced-colors: active) {
   .inkra-tree__item[data-selected] .inkra-tree__item-content { outline: 1px solid Highlight; color: HighlightText; background: Highlight; forced-color-adjust: none; }

package/dist/tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@ export declare function TooltipRoot(props: TooltipRootProps): import("react").JS
 export type TooltipTriggerProps = TooltipPrimitive.TooltipTriggerProps;
 export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type TooltipPortalProps = TooltipPrimitive.TooltipPortalProps;
-export declare function TooltipPortal({ children, ...props }: TooltipPortalProps): import("react").JSX.Element;
+export declare function TooltipPortal({ children, ...props }: TooltipPortalProps): import("react").ReactNode;
 export interface TooltipContentProps extends TooltipPrimitive.TooltipContentProps {
     seed?: string | number;
     surfaceClassName?: string;

package/dist/tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { forwardRef, useId } from 'react';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef } from '../overlay/themeBridge.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 function classes(...values) {
@@ -16,10 +16,11 @@ export const TooltipTrigger = forwardRef(function TooltipTrigger(props, forwarde
     return _jsx(TooltipPrimitive.Trigger, { ...props, ref: ref });
 });
 export function TooltipPortal({ children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(TooltipPrimitive.Portal, { ...props, children: child }));
 }
 export const TooltipContent = forwardRef(function TooltipContent({ children, className, seed, sideOffset = 6, surfaceClassName, surfaceRadius = 6, surfaceVariant = 'paper', ...props }, ref) {
     const generatedId = useId();
+    props = usePortalThemeProps(props);
     const resolvedSeed = seed ?? `inkra-tooltip-${generatedId}`;
     return (_jsx(TooltipPrimitive.Content, { ...props, className: classes('inkra-tooltip__content', className), ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: classes('inkra-tooltip__surface', surfaceClassName), radius: surfaceRadius, seed: resolvedSeed, variant: surfaceVariant, children: _jsx("div", { className: "inkra-tooltip__content-body", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }) }) }));
 });

package/dist/virtual-list/index.js

@@ -4,6 +4,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilLine } from '../PencilLine.js';
+import { PencilText } from '../PencilText.js';
 import { clampVirtualListIndex, getVirtualListSsrIndexes, normalizeVirtualListOverscan, normalizeVirtualListSize, normalizeVirtualListSpacing, virtualListKeyAttribute, } from './model.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
@@ -109,7 +110,7 @@ function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabe
                         } },
                         row.index > 0 && _jsx(PencilLine, { className: "inkra-virtual-list__separator", seed: `virtual-list-separator-${virtualListKeyAttribute(row.key)}`, weight: 0.75 }),
                         renderItem(state));
-                }) }), items.length === 0 && _jsx("div", { className: "inkra-virtual-list__empty", role: "status", children: empty ?? emptyLabel })] });
+                }) }), items.length === 0 && _jsx("div", { className: "inkra-virtual-list__empty", role: "status", children: empty ?? _jsx(PencilText, { children: emptyLabel }) })] });
     const rootProps = {
         ...props,
         'aria-label': ariaLabel,
@@ -123,6 +124,6 @@ function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabe
     };
     return externalScroll
         ? _jsx("div", { ...rootProps, ref: rootRef, children: content })
-        : _jsx(PencilSurface, { ...rootProps, as: "div", radius: 8, ref: rootRef, seed: "virtual-list", variant: "paper", children: content });
+        : _jsxs(PencilSurface, { as: "div", className: "inkra-virtual-list__frame", radius: 8, seed: "virtual-list", variant: "paper", children: [_jsx("div", { ...rootProps, ref: rootRef, children: content }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-virtual-list__focus", radius: 8, seed: "virtual-list-focus", variant: "outline" })] });
 }
 export const VirtualList = forwardRef(VirtualListInner);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",
@@ -101,13 +101,14 @@
     "@radix-ui/react-slider": "^1.6.1",
     "@radix-ui/react-tabs": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.4.1",
-    "@tanstack/react-virtual": "3.14.22",
     "@tanstack/react-table": "^8.21.3",
-    "@xyflow/react": "^12.12.0",
+    "@tanstack/react-virtual": "3.14.22",
     "@types/geojson": "^7946.0.16",
+    "@xyflow/react": "^12.12.0",
     "cmdk": "^1.1.1",
     "d3-scale": "4.0.2",
     "d3-shape": "3.2.0",
+    "decimal.js": "10.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "leaflet": "^1.9.4",