@_linked/primitives 1.0.9 → 1.2.0

package/lib/cjs/motion.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransition = exports.useReducedMotion = exports.listItem = exports.listContainer = exports.cardGridItem = exports.cardGridContainer = exports.tableRowItem = exports.tableStaggerContainer = exports.staggerItem = exports.staggerContainer = exports.easeSlow = exports.easeOut = exports.spring = exports.EASE_OUT_CURVE = exports.slideInRight = exports.scaleIn = exports.fadeIn = exports.fadeInUp = void 0;
+/**
+ * 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.
+ */
+const useReducedMotion_js_1 = require("./hooks/useReducedMotion.js");
+Object.defineProperty(exports, "useReducedMotion", { enumerable: true, get: function () { return useReducedMotion_js_1.useReducedMotion; } });
+/**
+ * Shared animation variants for consistent motion across the app
+ */
+// Fade animations
+exports.fadeInUp = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 },
+};
+exports.fadeIn = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+};
+exports.scaleIn = {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 },
+};
+exports.slideInRight = {
+    initial: { x: -20, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: -20, opacity: 0 },
+};
+/** The shared ease-out curve. Decelerates hard at the end, so motion settles rather than stops. */
+exports.EASE_OUT_CURVE = [0.16, 1, 0.3, 1];
+exports.spring = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+};
+exports.easeOut = {
+    duration: 0.2,
+    ease: exports.EASE_OUT_CURVE,
+};
+exports.easeSlow = {
+    duration: 0.3,
+    ease: exports.EASE_OUT_CURVE,
+};
+/**
+ * Stagger animation configurations
+ */
+exports.staggerContainer = {
+    animate: {
+        transition: {
+            staggerChildren: 0.05,
+        },
+    },
+};
+exports.staggerItem = {
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+};
+/**
+ * Slower stagger for table rows - more subtle and elegant
+ */
+exports.tableStaggerContainer = {
+    animate: {
+        transition: {
+            staggerChildren: 0.08,
+            delayChildren: 0.1,
+        },
+    },
+};
+exports.tableRowItem = {
+    initial: { opacity: 0, y: 8 },
+    animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.35,
+            ease: exports.EASE_OUT_CURVE,
+        },
+    },
+};
+/**
+ * Stagger for card grids - elegant cascade effect
+ */
+exports.cardGridContainer = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.04,
+            delayChildren: 0.05,
+        },
+    },
+};
+exports.cardGridItem = {
+    hidden: { opacity: 0, y: 12, scale: 0.98 },
+    visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            duration: 0.3,
+            ease: exports.EASE_OUT_CURVE,
+        },
+    },
+};
+/**
+ * Stagger for list items - subtle slide-in effect
+ */
+exports.listContainer = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.03,
+            delayChildren: 0.02,
+        },
+    },
+};
+exports.listItem = {
+    hidden: { opacity: 0, x: -8 },
+    visible: {
+        opacity: 1,
+        x: 0,
+        transition: {
+            duration: 0.25,
+            ease: exports.EASE_OUT_CURVE,
+        },
+    },
+};
+/**
+ * Get appropriate transition based on reduced motion preference
+ */
+const getTransition = (reducedMotion) => {
+    return reducedMotion ? { duration: 0 } : exports.easeOut;
+};
+exports.getTransition = getTransition;
+//# sourceMappingURL=motion.js.map

package/lib/cjs/motion.js.map

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

package/lib/cjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_linked/primitives",
-  "description": "lincd-primitives is a UI library based on Radix UI",
+  "description": "A UI component library: a headless behaviour source (Radix UI, cmdk, vaul, or hand-written) plus a CSS module reading @_linked/css design tokens — and no knowledge of data, of shapes, or of any particular application.",
   "author": {
     "name": "",
     "email": "",
@@ -8,9 +8,9 @@
   },
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "git+https://github.com/linked-cm/primitives.git"
   },
-  "version": "1.0.9",
+  "version": "1.2.0",
   "linkedPackage": true,
   "license": "ISC",
   "scripts": {
@@ -70,11 +70,11 @@
     "@_linked/cli": "^1.2",
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
+    "copyfiles": "^2.4.1",
+    "rimraf": "^5.0.7",
     "tsconfig-to-dual-package": "^1.2.0",
     "typescript": "^5.7.3",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "rimraf": "^5.0.7",
-    "copyfiles": "^2.4.1"
+    "typescript-plugin-css-modules": "^5.1.0"
   },
   "typesVersions": {
     "*": {

package/lib/esm/components/Badge.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * Badge — a small status/metadata label (badge, tag, chip, pill).
+ *
+ * One primitive, many looks: every axis is an independent prop so surfaces can
+ * swap variation without new components —
+ *
+ *   variant  solid | soft | outline | ghost      fill strength
+ *   color    neutral | primary | success | warning | danger | info
+ *   size     small | medium | large
+ *   shape    pill | rounded
+ *   dot      leading status dot in the badge color
+ *   asChild  render as the child element (a link, a button) via Radix Slot,
+ *            so an interactive badge keeps real semantics and focus behavior
+ *
+ * Theming follows the library contract: the component consumes `--badge-*`
+ * variables with working fallbacks, so it renders sensibly out of the box and
+ * apps re-skin it from their theme without touching the component.
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'small' | 'medium' | 'large';
+    shape?: 'pill' | 'rounded';
+    /** Leading status dot in the badge color. */
+    dot?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/lib/esm/components/Badge.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import style from './Badge.module.css';
+import { cl } from '@_linked/react/utils/ClassNames';
+import { Slot } from '@radix-ui/react-slot';
+const Badge = React.forwardRef(({ className, variant = 'soft', color = 'neutral', size = 'medium', shape = 'pill', dot = false, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'span';
+    return (React.createElement(Comp, { className: cl(style.Root, style[variant], style[color], style[size], style[shape], className), ref: ref, ...props }, asChild ? (children) : (React.createElement(React.Fragment, null,
+        dot && React.createElement("span", { className: style.dot, "aria-hidden": true }),
+        children))));
+});
+Badge.displayName = 'Badge';
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/lib/esm/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,KAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,IAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,KAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/lib/esm/components/Badge.module.css

@@ -0,0 +1,89 @@
+/* Badge — consumes `--badge-*` semantic variables with working fallbacks, so it
+   renders out of the box and apps re-skin it from their theme (same contract as
+   Button/Input: the component names the tokens, the app supplies them). */
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: solid 1px transparent;
+  gap: var(--badge-gap, 0.3em);
+  font-family: var(--badge-font-family, inherit);
+  font-weight: var(--badge-font-weight, 500);
+  line-height: var(--badge-line-height, 1.2);
+
+  /* Per-color base; every visual below derives from this one custom property,
+     which is what keeps the variant × color matrix to two small class sets. */
+  --_badge-color: var(--badge-color-neutral, #64748b);
+}
+
+/* ── color ─────────────────────────────────────────────────────────────── */
+.neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
+.primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
+.success { --_badge-color: var(--badge-color-success, #15803d); }
+.warning { --_badge-color: var(--badge-color-warning, #b45309); }
+.danger  { --_badge-color: var(--badge-color-danger, #b91c1c); }
+.info    { --_badge-color: var(--badge-color-info, #0369a1); }
+
+/* ── variant ───────────────────────────────────────────────────────────── */
+.solid {
+  background: var(--_badge-color);
+  color: var(--badge-solid-foreground, #fff);
+}
+.soft {
+  background: color-mix(in oklch, var(--_badge-color) 12%, transparent);
+  color: var(--_badge-color);
+}
+.outline {
+  border-color: color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  color: var(--_badge-color);
+}
+.ghost {
+  color: var(--_badge-color);
+}
+
+/* ── size ──────────────────────────────────────────────────────────────── */
+.small {
+  font-size: var(--badge-font-size-sm, 0.6875rem);
+  padding: var(--badge-padding-y-sm, 0.0625rem) var(--badge-padding-x-sm, 0.375rem);
+}
+.medium {
+  font-size: var(--badge-font-size, 0.75rem);
+  padding: var(--badge-padding-y, 0.125rem) var(--badge-padding-x, 0.5rem);
+}
+.large {
+  font-size: var(--badge-font-size-lg, 0.8125rem);
+  padding: var(--badge-padding-y-lg, 0.1875rem) var(--badge-padding-x-lg, 0.625rem);
+}
+
+/* ── shape ─────────────────────────────────────────────────────────────── */
+.pill { border-radius: var(--badge-radius-pill, 999px); }
+.rounded { border-radius: var(--badge-radius, var(--control-radius, 0.375rem)); }
+
+/* ── dot ───────────────────────────────────────────────────────────────── */
+.dot {
+  width: 0.375em;
+  height: 0.375em;
+  border-radius: 999px;
+  background: currentColor;
+  flex: none;
+}
+
+/* Interactive badges (asChild over a link/button) get hover/focus affordance
+   without imposing it on static ones. */
+a.Root,
+button.Root {
+  cursor: pointer;
+  transition: var(--transition-fast, background-color 120ms ease);
+  text-decoration: none;
+}
+a.Root:hover,
+button.Root:hover {
+  filter: brightness(0.95);
+}
+a.Root:focus-visible,
+button.Root:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--_badge-color) 45%, transparent);
+  outline-offset: 1px;
+}

package/lib/esm/components/Command.d.ts

@@ -27,7 +27,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -53,7 +53,7 @@ declare const Group: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const Item: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -108,7 +108,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -134,7 +134,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string;
         forceMount?: boolean;
@@ -145,7 +145,7 @@ export declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/esm/components/ConfirmDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    title: string;
+    message: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    /**
+     * `danger` for a destructive action. Not a colour — a statement about consequence, which
+     * is what `--intent-danger-*` exists to express.
+     */
+    tone?: 'default' | 'danger';
+    /** The confirm action is in flight: both buttons lock. */
+    isLoading?: boolean;
+    /** Withhold confirmation until the caller has something complete to confirm. */
+    confirmDisabled?: boolean;
+    /** Replaces the confirm label while loading. */
+    loadingContent?: React.ReactNode;
+    /** Wider layout, for multi-column content such as an impact preview. */
+    wide?: boolean;
+    className?: string;
+}
+/**
+ * "Are you sure?" — a title, a message, and two buttons.
+ *
+ * A composition over `AlertDialog` rather than its own dialog. The hand-rolled version this
+ * replaces built its own portal and its own backdrop, and in doing so had no focus trap, no
+ * escape handling, no `aria-modal` and no restoration of focus on close — a confirmation
+ * step that a keyboard or screen-reader user could not reliably complete, which is the worst
+ * possible component to get wrong, since the whole point is guarding a destructive action.
+ *
+ * `alertdialog` semantics are the right ones here, not `dialog`: it interrupts, and it must
+ * not be dismissed by clicking away.
+ */
+export declare function ConfirmDialog({ open, onOpenChange, onConfirm, title, message, confirmText, cancelText, tone, isLoading, confirmDisabled, loadingContent, wide, className, }: ConfirmDialogProps): React.JSX.Element;

package/lib/esm/components/ConfirmDialog.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cl } from '@_linked/react/utils/ClassNames';
+import { AlertDialog } from './AlertDialog.js';
+import { Button } from './Button.js';
+import style from './ConfirmDialog.module.css';
+/**
+ * "Are you sure?" — a title, a message, and two buttons.
+ *
+ * A composition over `AlertDialog` rather than its own dialog. The hand-rolled version this
+ * replaces built its own portal and its own backdrop, and in doing so had no focus trap, no
+ * escape handling, no `aria-modal` and no restoration of focus on close — a confirmation
+ * step that a keyboard or screen-reader user could not reliably complete, which is the worst
+ * possible component to get wrong, since the whole point is guarding a destructive action.
+ *
+ * `alertdialog` semantics are the right ones here, not `dialog`: it interrupts, and it must
+ * not be dismissed by clicking away.
+ */
+export function ConfirmDialog({ open, onOpenChange, onConfirm, title, message, confirmText = 'Confirm', cancelText = 'Cancel', tone = 'default', isLoading = false, confirmDisabled = false, loadingContent, wide = false, className, }) {
+    return (React.createElement(AlertDialog.Root, { open: open, onOpenChange: onOpenChange },
+        React.createElement(AlertDialog.Content, { className: cl(style.Content, wide && style.wide, className) },
+            React.createElement(AlertDialog.Header, null,
+                React.createElement(AlertDialog.Title, null, title),
+                React.createElement(AlertDialog.Description, { asChild: typeof message !== 'string' }, typeof message === 'string' ? message : React.createElement("div", null, message))),
+            React.createElement(AlertDialog.Footer, null,
+                React.createElement(AlertDialog.Cancel, { asChild: true },
+                    React.createElement(Button, { variant: "ghost", disabled: isLoading }, cancelText)),
+                React.createElement(Button, { className: cl(tone === 'danger' && style.danger), onClick: onConfirm, disabled: isLoading || confirmDisabled }, isLoading && loadingContent ? loadingContent : confirmText)))));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/lib/esm/components/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,EAAE,EAAC,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,4BAA4B,CAAC;AA0B/C;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,IAAI,GAAG,KAAK,EACZ,SAAS,GACU;IACnB,OAAO,CACL,oBAAC,WAAW,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY;QACtD,oBAAC,WAAW,CAAC,OAAO,IAClB,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC;YAE3D,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,KAAK,QAAE,KAAK,CAAqB;gBAI9C,oBAAC,WAAW,CAAC,WAAW,IAAC,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,IAC1D,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iCAAM,OAAO,CAAO,CACrC,CACP;YACrB,oBAAC,WAAW,CAAC,MAAM;gBACjB,oBAAC,WAAW,CAAC,MAAM,IAAC,OAAO;oBACzB,oBAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,SAAS,IACxC,UAAU,CACJ,CACU;gBAIrB,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,EAChD,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,IAAI,eAAe,IAErC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CACpD,CACU,CACD,CACL,CACpB,CAAC;AACJ,CAAC"}

package/lib/esm/components/ConfirmDialog.module.css

@@ -0,0 +1,22 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Content {
+  max-width: var(--confirm-dialog-width, 32rem);
+}
+
+.wide {
+  max-width: var(--confirm-dialog-width-wide, 56rem);
+}
+
+/* Destructive confirmation. Reads the intent family rather than a red primitive, so an app
+   that restyles what "danger" looks like restyles this too. */
+.danger {
+  background: var(--confirm-dialog-danger-bg, var(--intent-danger-icon));
+  border-color: var(--confirm-dialog-danger-border, var(--intent-danger-border));
+  color: var(--confirm-dialog-danger-text, var(--color-white));
+}
+
+.danger:hover:not(:disabled) {
+  background: var(--confirm-dialog-danger-bg-hover, var(--intent-danger-text));
+}

package/lib/esm/components/ImageThumb.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ImageThumbProps {
+    src: string;
+    size?: number;
+    hoverSize?: number;
+    alt?: string;
+    className?: string;
+    /** If true, clicking opens a full-screen lightbox preview */
+    clickToEnlarge?: boolean;
+}
+declare const ImageThumb: React.FC<ImageThumbProps>;
+/** Small inline thumbnail for use inside chips, badges, and dropdown options */
+export declare const InlineImageThumb: React.FC<{
+    src: string;
+    alt?: string;
+}>;
+export default ImageThumb;

package/lib/esm/components/ImageThumb.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { cl } from '@_linked/react/utils/ClassNames';
+import style from './ImageThumb.module.css';
+const ImageThumb = ({ src, size = 36, hoverSize = 280, alt = '', className = '', clickToEnlarge = true, }) => {
+    const [hover, setHover] = useState(false);
+    const [lightbox, setLightbox] = useState(false);
+    const [hoverPos, setHoverPos] = useState({
+        top: 0,
+        left: 0,
+    });
+    const thumbRef = useRef(null);
+    const handleMouseEnter = useCallback(() => {
+        if (thumbRef.current) {
+            const rect = thumbRef.current.getBoundingClientRect();
+            // Position the hover preview to the right of the thumbnail,
+            // but clamp so it doesn't overflow the viewport
+            const left = Math.min(rect.right + 8, window.innerWidth - hoverSize - 16);
+            const top = Math.max(8, Math.min(rect.top - hoverSize / 2 + size / 2, window.innerHeight - hoverSize - 16));
+            setHoverPos({ top, left });
+        }
+        setHover(true);
+    }, [hoverSize, size]);
+    const handleClick = useCallback((e) => {
+        if (clickToEnlarge) {
+            e.stopPropagation();
+            setHover(false);
+            setLightbox(true);
+        }
+    }, [clickToEnlarge]);
+    const closeLightbox = useCallback(() => {
+        setLightbox(false);
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: cl(style.root, className), onMouseEnter: handleMouseEnter, onMouseLeave: () => setHover(false) },
+            React.createElement("img", { ref: thumbRef, src: src, alt: alt, className: style.thumb, style: { width: size, height: size }, onClick: handleClick, loading: "lazy" }),
+            hover && !lightbox && (React.createElement("div", { className: cl(style.hoverPreview, hover && style.visible), style: {
+                    top: hoverPos.top,
+                    left: hoverPos.left,
+                    width: hoverSize,
+                    height: hoverSize,
+                } },
+                React.createElement("img", { src: src, alt: alt, className: style.hoverPreviewImage, style: { width: hoverSize, height: hoverSize } })))),
+        lightbox && (React.createElement("div", { className: style.previewOverlay, onClick: closeLightbox },
+            React.createElement("div", { className: cl(style.previewBackdrop, style.visible) }),
+            React.createElement("img", { src: src, alt: alt, className: cl(style.previewImage, style.visible) })))));
+};
+/** Small inline thumbnail for use inside chips, badges, and dropdown options */
+export const InlineImageThumb = ({ src, alt = '', }) => (React.createElement("img", { src: src, alt: alt, className: style.inlineThumb, loading: "lazy" }));
+export default ImageThumb;
+//# sourceMappingURL=ImageThumb.js.map

package/lib/esm/components/ImageThumb.js.map

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