@_linked/primitives 1.0.9 → 1.2.0

package/lib/cjs/components/TruncatedText.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TruncatedTextProps {
+    /** The full text content */
+    text: string;
+    /** Maximum number of characters to show before truncating (default: 80) */
+    maxLength?: number;
+}
+/**
+ * TruncatedText - Displays truncated text with hover/tap to show full content
+ *
+ * For long text fields, shows first N characters with ellipsis.
+ * On desktop: hover displays full text in a popover with copy button.
+ * On mobile: tap opens a dialog with full text and copy button.
+ */
+declare function TruncatedText({ text, maxLength }: TruncatedTextProps): React.JSX.Element;
+export { TruncatedText };

package/lib/cjs/components/TruncatedText.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TruncatedText = TruncatedText;
+const Dialog_js_1 = require("./Dialog.js");
+const HoverCard_js_1 = require("./HoverCard.js");
+const IconButton_js_1 = require("./IconButton.js");
+const react_1 = __importStar(require("react"));
+const TruncatedText_module_css_1 = __importDefault(require("./TruncatedText.module.css"));
+/**
+ * Two inline glyphs rather than a dependency on an icon set.
+ *
+ * This component needs exactly two, and a library whose contract is "a behaviour source plus
+ * a stylesheet" should not make every consumer install an icon package to draw a tick. They
+ * inherit `currentColor`, so they follow the button they sit in.
+ */
+const CheckGlyph = () => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+    react_1.default.createElement("polyline", { points: "20 6 9 17 4 12" })));
+const CopyGlyph = () => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+    react_1.default.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    react_1.default.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
+/**
+ * TruncatedText - Displays truncated text with hover/tap to show full content
+ *
+ * For long text fields, shows first N characters with ellipsis.
+ * On desktop: hover displays full text in a popover with copy button.
+ * On mobile: tap opens a dialog with full text and copy button.
+ */
+function TruncatedText({ text, maxLength = 80 }) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        // Check for touch device or small screen
+        const checkMobile = () => {
+            const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+            const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+            setIsMobile(hasTouchScreen || isSmallScreen);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    // If text is short enough, just render it directly
+    if (!text || text.length <= maxLength) {
+        return react_1.default.createElement("span", null, text || '-');
+    }
+    const truncatedText = text.slice(0, maxLength) + '...';
+    const handleCopy = (e) => __awaiter(this, void 0, void 0, function* () {
+        e.stopPropagation();
+        try {
+            yield navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy text:', err);
+        }
+    });
+    // Mobile: Use Dialog triggered by tap
+    if (isMobile) {
+        return (react_1.default.createElement(Dialog_js_1.Dialog.Root, null,
+            react_1.default.createElement(Dialog_js_1.Dialog.Trigger, { asChild: true },
+                react_1.default.createElement("span", { className: TruncatedText_module_css_1.default.truncatedText }, truncatedText)),
+            react_1.default.createElement(Dialog_js_1.Dialog.Content, { className: TruncatedText_module_css_1.default.dialogContent },
+                react_1.default.createElement(Dialog_js_1.Dialog.Header, null,
+                    react_1.default.createElement(Dialog_js_1.Dialog.Title, null, "Full Text")),
+                react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.dialogBody },
+                    react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.scrollArea },
+                        react_1.default.createElement("p", { className: TruncatedText_module_css_1.default.fullText }, text))),
+                react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.dialogFooter },
+                    react_1.default.createElement(IconButton_js_1.IconButton, { size: "small", variant: "ghost", className: TruncatedText_module_css_1.default.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (react_1.default.createElement(CheckGlyph, null)) : (react_1.default.createElement(CopyGlyph, null)))))));
+    }
+    // Desktop: Use HoverCard triggered by hover
+    return (react_1.default.createElement(HoverCard_js_1.HoverCard.Root, { openDelay: 300, closeDelay: 200 },
+        react_1.default.createElement(HoverCard_js_1.HoverCard.Trigger, { asChild: true },
+            react_1.default.createElement("span", { className: TruncatedText_module_css_1.default.truncatedText }, truncatedText)),
+        react_1.default.createElement(HoverCard_js_1.HoverCard.Portal, null,
+            react_1.default.createElement(HoverCard_js_1.HoverCard.Content, { side: "top", align: "start", sideOffset: 8, className: TruncatedText_module_css_1.default.hoverContent },
+                react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.contentWrapper },
+                    react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.scrollArea },
+                        react_1.default.createElement("p", { className: TruncatedText_module_css_1.default.fullText }, text)),
+                    react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.copyButtonWrapper },
+                        react_1.default.createElement(IconButton_js_1.IconButton, { size: "small", variant: "ghost", className: TruncatedText_module_css_1.default.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (react_1.default.createElement(CheckGlyph, null)) : (react_1.default.createElement(CopyGlyph, null))))),
+                react_1.default.createElement(HoverCard_js_1.HoverCard.Arrow, { className: TruncatedText_module_css_1.default.arrow })))));
+}
+//# sourceMappingURL=TruncatedText.js.map

package/lib/cjs/components/TruncatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../../src/components/TruncatedText.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/TruncatedText.module.css

@@ -0,0 +1,162 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+/* ============================================================================
+   TruncatedText.module.css
+
+   Truncated text component with hover popover for full content.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Truncated Text Trigger === */
+.truncatedText {
+  cursor: help;
+  border-bottom: 1px dotted var(--truncated-text-gray-400, var(--color-gray-400));
+}
+
+/* === Hover Card Content === */
+.hoverContent {
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-field);
+  box-shadow: var(--surface-shadow);
+  padding: var(--space-sm);
+  max-width: 400px;
+  min-width: 200px;
+  z-index: 1000;
+}
+
+/* === Content Wrapper === */
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+/* === Scroll Area === */
+.scrollArea {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+/* === Full Text === */
+.fullText {
+  font-size: var(--typography-small-size);
+  color: var(--text-primary);
+  line-height: 1.5;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* === Copy Button Wrapper === */
+.copyButtonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid var(--surface-border);
+  padding-top: var(--space-xs);
+  margin-top: var(--space-xs);
+}
+
+/* === Copy Button === */
+.copyButton {
+  color: var(--truncated-text-tertiary-500, var(--color-tertiary-500)) !important;
+  padding: var(--space-xs) !important;
+}
+
+.copyButton:hover {
+  color: var(--truncated-text-tertiary-600, var(--color-tertiary-600)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--truncated-text-tertiary-500, var(--color-tertiary-500)) 12%,
+    transparent
+  ) !important;
+}
+
+/* === Arrow === */
+.arrow {
+  fill: var(--surface-bg);
+}
+
+/* ============================================================================
+   Mobile Dialog Styles
+   ============================================================================ */
+
+.dialogContent {
+  max-width: 90vw;
+  width: 400px;
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
+}
+
+.dialogBody {
+  padding: var(--space-sm) 0;
+  color: var(--text-primary);
+}
+
+.dialogFooter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: var(--space-xs);
+  border-top: 1px solid var(--surface-border);
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+[data-theme='dark'] .truncatedText {
+  border-bottom-color: var(--truncated-text-gray-500, var(--color-gray-500));
+}
+
+[data-theme='dark'] .hoverContent {
+  background-color: var(--surface-bg);
+  border-color: var(--surface-border);
+}
+
+/* .fullText uses --text-primary which auto-adjusts for dark mode */
+
+[data-theme='dark'] .copyButtonWrapper {
+  border-top-color: var(--surface-border);
+}
+
+[data-theme='dark'] .copyButton {
+  color: var(--truncated-text-tertiary-400, var(--color-tertiary-400)) !important;
+}
+
+[data-theme='dark'] .copyButton:hover {
+  color: var(--truncated-text-tertiary-300, var(--color-tertiary-300)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--truncated-text-tertiary-500, var(--color-tertiary-500)) 15%,
+    transparent
+  ) !important;
+}
+
+[data-theme='dark'] .arrow {
+  fill: var(--surface-bg);
+}
+
+[data-theme='dark'] .dialogContent {
+  background-color: var(--surface-bg);
+  border-color: var(--surface-border);
+}
+
+/* .dialogBody uses --text-primary which auto-adjusts for dark mode */
+
+[data-theme='dark'] .dialogFooter {
+  border-top-color: var(--surface-border);
+}
+
+/* Dialog close button in dark mode */
+[data-theme='dark'] .dialogContent button[aria-label="Close"],
+[data-theme='dark'] .dialogContent [class*="Close"] {
+  color: var(--truncated-text-gray-400, var(--color-gray-400));
+}
+
+[data-theme='dark'] .dialogContent button[aria-label="Close"]:hover,
+[data-theme='dark'] .dialogContent [class*="Close"]:hover {
+  color: var(--truncated-text-gray-200, var(--color-gray-200));
+  background-color: var(--truncated-text-gray-700, var(--color-gray-700));
+}

package/lib/cjs/hooks/useReducedMotion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether the viewer has asked for reduced motion.
+ *
+ * Plain `matchMedia`, deliberately: this is the one piece of the motion story that every
+ * component needs and that carries no dependency, so it lives here rather than travelling
+ * with an animation library.
+ *
+ * Starts `false` and corrects on mount. Server-rendered markup cannot know the preference,
+ * and rendering the still version first would flash into motion for everyone else; erring
+ * toward motion and stopping it is the less disruptive order.
+ */
+export declare function useReducedMotion(): boolean;

package/lib/cjs/hooks/useReducedMotion.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReducedMotion = useReducedMotion;
+const react_1 = require("react");
+/**
+ * Whether the viewer has asked for reduced motion.
+ *
+ * Plain `matchMedia`, deliberately: this is the one piece of the motion story that every
+ * component needs and that carries no dependency, so it lives here rather than travelling
+ * with an animation library.
+ *
+ * Starts `false` and corrects on mount. Server-rendered markup cannot know the preference,
+ * and rendering the still version first would flash into motion for everyone else; erring
+ * toward motion and stopping it is the less disruptive order.
+ */
+function useReducedMotion() {
+    const [reduced, setReduced] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        setReduced(query.matches);
+        const onChange = (event) => setReduced(event.matches);
+        // `addEventListener` on MediaQueryList is not in older Safari; both are kept because a
+        // component library cannot choose its host browser.
+        if (query.addEventListener) {
+            query.addEventListener('change', onChange);
+            return () => query.removeEventListener('change', onChange);
+        }
+        query.addListener(onChange);
+        return () => query.removeListener(onChange);
+    }, []);
+    return reduced;
+}
+//# sourceMappingURL=useReducedMotion.js.map

package/lib/cjs/hooks/useReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.js","sourceRoot":"","sources":["../../../src/hooks/useReducedMotion.ts"],"names":[],"mappings":";;AAaA,4CAmBC;AAhCD,iCAA0C;AAE1C;;;;;;;;;;GAUG;AACH,SAAgB,gBAAgB;IAC9B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU;YAAE,OAAO;QAChE,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;QACpE,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3E,uFAAuF;QACvF,oDAAoD;QACpD,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAC3C,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC7D,CAAC;QACD,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC5B,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/lib/cjs/index.d.ts

@@ -1,6 +1,7 @@
 import './theme.css';
 import './types.js';
 import './ontologies/primitives.js';
+import './components/Badge.js';
 import './components/Button.js';
 import './components/Input.js';
 import './components/Tabs.js';
@@ -34,6 +35,10 @@ import './components/NavigationMenu.js';
 import './components/Menubar.js';
 import './components/MultiSelect.js';
 import './components/Spinner.js';
+import './components/ConfirmDialog.js';
+import './components/SkeletonLoader.js';
+import './components/ImageThumb.js';
+import './components/TruncatedText.js';
 import './components/Breadcrumb.js';
 import './components/Drawer.js';
 import './components/IconButton.js';
@@ -43,3 +48,4 @@ import './components/Form.js';
 import './components/Toolbar.js';
 import './components/VisuallyHidden.js';
 import './hooks/use-toast.js';
+export * from './motion.js';

package/lib/cjs/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./theme.css");
 require("./types.js");
@@ -6,6 +20,7 @@ require("./ontologies/primitives.js");
 //SHAPES FIRST
 // import './shapes/YourShape.js';
 //THEN COMPONENTS
+require("./components/Badge.js");
 require("./components/Button.js");
 require("./components/Input.js");
 require("./components/Tabs.js");
@@ -39,6 +54,10 @@ require("./components/NavigationMenu.js");
 require("./components/Menubar.js");
 require("./components/MultiSelect.js");
 require("./components/Spinner.js");
+require("./components/ConfirmDialog.js");
+require("./components/SkeletonLoader.js");
+require("./components/ImageThumb.js");
+require("./components/TruncatedText.js");
 require("./components/Breadcrumb.js");
 require("./components/Drawer.js");
 require("./components/IconButton.js");
@@ -48,4 +67,7 @@ require("./components/Form.js");
 require("./components/Toolbar.js");
 require("./components/VisuallyHidden.js");
 require("./hooks/use-toast.js");
+// The motion presets. Reachable from the entry point so tsc emits them: this package's
+// tsconfig compiles what `index.ts` reaches, not the whole src tree.
+__exportStar(require("./motion.js"), exports);
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,iCAA+B;AAC/B,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,yCAAuC;AACvC,0CAAwC;AACxC,sCAAoC;AACpC,yCAAuC;AACvC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B;AAE9B,uFAAuF;AACvF,qEAAqE;AACrE,8CAA4B"}

package/lib/cjs/motion.d.ts

@@ -0,0 +1,219 @@
+/**
+ * Motion presets.
+ *
+ * Design tokens that happen to be objects rather than CSS custom properties, because that is
+ * the shape an animation library consumes. Same purpose as a colour token: one definition of
+ * "how a list staggers in", so two surfaces cannot disagree about it.
+ *
+ * This module imports **nothing**, not even types. Every export is a plain object whose type
+ * is inferred, and an inferred object literal is structurally assignable to `framer-motion`'s
+ * `Variants` and `Transition` at the point of use — so a consumer gets full checking without
+ * this package depending on the animation library at all.
+ *
+ * That matters more than it looks. Naming the types here would mean a devDependency to build
+ * and a peer to consume, which is how the workspace ended up with two copies of
+ * `framer-motion` and presets from one that were not assignable to the other. A library that
+ * animates with CSS should not carry an animation library so it can describe some constants.
+ */
+import { useReducedMotion } from './hooks/useReducedMotion.js';
+/**
+ * Shared animation variants for consistent motion across the app
+ */
+export declare const fadeInUp: {
+    initial: {
+        opacity: number;
+        y: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+    };
+    exit: {
+        opacity: number;
+        y: number;
+    };
+};
+export declare const fadeIn: {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const scaleIn: {
+    initial: {
+        opacity: number;
+        scale: number;
+    };
+    animate: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+    };
+};
+export declare const slideInRight: {
+    initial: {
+        x: number;
+        opacity: number;
+    };
+    animate: {
+        x: number;
+        opacity: number;
+    };
+    exit: {
+        x: number;
+        opacity: number;
+    };
+};
+/**
+ * Easing and transition configurations
+ */
+/**
+ * A cubic-bezier easing: the four control points, as a tuple.
+ *
+ * The tuple type is load-bearing. Written inline, `[0.16, 1, 0.3, 1]` infers as `number[]`,
+ * which is not assignable to an animation library's easing type — it wants exactly four
+ * numbers. Naming it once fixes that and stops the curve being retyped at each use.
+ */
+export type Easing = [number, number, number, number];
+/** The shared ease-out curve. Decelerates hard at the end, so motion settles rather than stops. */
+export declare const EASE_OUT_CURVE: Easing;
+export declare const spring: {
+    type: string;
+    stiffness: number;
+    damping: number;
+};
+export declare const easeOut: {
+    duration: number;
+    ease: Easing;
+};
+export declare const easeSlow: {
+    duration: number;
+    ease: Easing;
+};
+/**
+ * Stagger animation configurations
+ */
+export declare const staggerContainer: {
+    animate: {
+        transition: {
+            staggerChildren: number;
+        };
+    };
+};
+export declare const staggerItem: {
+    initial: {
+        opacity: number;
+        y: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+    };
+};
+/**
+ * Slower stagger for table rows - more subtle and elegant
+ */
+export declare const tableStaggerContainer: {
+    animate: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+};
+export declare const tableRowItem: {
+    initial: {
+        opacity: number;
+        y: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+        transition: {
+            duration: number;
+            ease: Easing;
+        };
+    };
+};
+/**
+ * Stagger for card grids - elegant cascade effect
+ */
+export declare const cardGridContainer: {
+    hidden: {
+        opacity: number;
+    };
+    visible: {
+        opacity: number;
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+};
+export declare const cardGridItem: {
+    hidden: {
+        opacity: number;
+        y: number;
+        scale: number;
+    };
+    visible: {
+        opacity: number;
+        y: number;
+        scale: number;
+        transition: {
+            duration: number;
+            ease: Easing;
+        };
+    };
+};
+/**
+ * Stagger for list items - subtle slide-in effect
+ */
+export declare const listContainer: {
+    hidden: {
+        opacity: number;
+    };
+    visible: {
+        opacity: number;
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+};
+export declare const listItem: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            duration: number;
+            ease: Easing;
+        };
+    };
+};
+/**
+ * Re-exported so a component reaching for the motion presets does not have to know that the
+ * preference hook lives elsewhere. It carries no animation dependency of its own.
+ */
+export { useReducedMotion };
+/**
+ * Get appropriate transition based on reduced motion preference
+ */
+export declare const getTransition: (reducedMotion: boolean) => {
+    duration: number;
+    ease: Easing;
+} | {
+    duration: number;
+};