@timmbr/ui 1.0.0-beta → 1.2.0

package/dist/components/ImageUpload/subcomponents/ImageUploadSinglePreview.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Eye, Trash2 } from '@timmbr/icons';
+import { imagePreviewContainerVariants } from '../ImageUpload.styles.js';
+import { PlayIcon, UploadCloudIcon } from './ImageUploadIcons.js';
+import { isVideoMedia } from '../ImageUpload.helpers.js';
+import { Button } from '../../Button/Button.js';
+
+const ImageUploadSinglePreview = ({
+  item,
+  aspectRatio,
+  disabled = false,
+  isUploading = false,
+  enablePreviewModal = true,
+  onReplace,
+  onRemove,
+  onPreview
+}) => {
+  const isVideo = isVideoMedia(item);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: aspectRatio === "square" ? {
+        width: "120px",
+        height: "120px",
+        minWidth: "120px",
+        minHeight: "120px",
+        maxWidth: "120px",
+        maxHeight: "120px"
+      } : void 0,
+      className: cn(imagePreviewContainerVariants({ aspectRatio })),
+      children: [
+        isVideo ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: item.url,
+            className: "w-full h-full object-cover",
+            muted: true,
+            loop: true,
+            playsInline: true,
+            onMouseEnter: (e) => e.currentTarget.play().catch(() => {
+            }),
+            onMouseLeave: (e) => {
+              const v = e.currentTarget;
+              v.pause();
+              v.currentTime = 0;
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.url,
+            alt: item.name || "Uploaded preview",
+            className: cn(
+              "w-full h-full",
+              aspectRatio === "square" ? "object-contain p-2" : "object-cover"
+            )
+          }
+        ),
+        isVideo && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-10 bg-black/65 backdrop-blur-md text-white text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/20 flex items-center gap-1 shadow-sm pointer-events-none", children: [
+          /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }),
+          /* @__PURE__ */ jsx("span", { children: "Video" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-1 backdrop-blur-[2px]", children: aspectRatio === "square" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          enablePreviewModal && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "size-8 rounded-lg bg-black/60 hover:bg-black/85 text-white flex items-center justify-center border border-white/20 transition-all cursor-pointer shadow-xs",
+              onClick: onPreview,
+              title: "Preview full size",
+              children: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || isUploading,
+              onClick: onReplace,
+              className: "size-8 rounded-lg bg-primary hover:bg-primary/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              title: "Replace image",
+              children: /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || isUploading,
+              onClick: onRemove,
+              className: "size-8 rounded-lg bg-destructive hover:bg-destructive/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              title: "Remove image",
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          enablePreviewModal && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              className: "border-white/40 bg-black/40 text-white hover:bg-black/60 hover:text-white backdrop-blur-xs",
+              onClick: onPreview,
+              leftIcon: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }),
+              children: "Preview"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "default",
+              size: "sm",
+              disabled: disabled || isUploading,
+              onClick: onReplace,
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled: disabled || isUploading,
+              className: "border-destructive/60 bg-destructive/80 text-white hover:bg-destructive hover:text-white",
+              onClick: onRemove,
+              leftIcon: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
+              children: "Remove"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+ImageUploadSinglePreview.displayName = "ImageUploadSinglePreview";
+
+export { ImageUploadSinglePreview };

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ImageUploadItem } from '../ImageUpload.types';
+export interface ImageUploadThumbnailCardProps {
+    item: ImageUploadItem;
+    index: number;
+    layout?: 'grid' | 'scroll';
+    disabled?: boolean;
+    enablePreviewModal?: boolean;
+    shouldAnimate?: boolean;
+    onPreview: (e: React.MouseEvent) => void;
+    onRemove: (e: React.MouseEvent) => void;
+}
+export declare const ImageUploadThumbnailCard: React.FC<ImageUploadThumbnailCardProps>;
+export interface ImageUploadTaskCardProps {
+    id: string;
+    name: string;
+    previewUrl: string;
+    isVideo: boolean;
+    layout?: 'grid' | 'scroll';
+    shouldAnimate?: boolean;
+}
+export declare const ImageUploadTaskCard: React.FC<ImageUploadTaskCardProps>;
+//# sourceMappingURL=ImageUploadThumbnailCard.d.ts.map

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadThumbnailCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAwF5E,CAAC;AAIF,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4ClE,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Eye, Trash2 } from '@timmbr/icons';
+import { motion, scaleVariants, getTransition } from '@timmbr/motion';
+import { thumbnailCardVariants } from '../ImageUpload.styles.js';
+import { PlayIcon } from './ImageUploadIcons.js';
+import { isVideoMedia } from '../ImageUpload.helpers.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+
+const ImageUploadThumbnailCard = ({
+  item,
+  index,
+  layout = "grid",
+  disabled = false,
+  enablePreviewModal = true,
+  shouldAnimate = true,
+  onPreview,
+  onRemove
+}) => {
+  const isVideo = isVideoMedia(item);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: shouldAnimate,
+      initial: shouldAnimate ? "hidden" : false,
+      animate: shouldAnimate ? "visible" : void 0,
+      exit: shouldAnimate ? "exit" : void 0,
+      variants: shouldAnimate ? scaleVariants : void 0,
+      transition: getTransition("spring"),
+      className: cn(
+        thumbnailCardVariants({ aspectRatio: "square" }),
+        layout === "scroll" && "shrink-0 w-36 sm:w-40 snap-start"
+      ),
+      children: [
+        isVideo ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: item.url,
+            className: "w-full h-full object-cover",
+            muted: true,
+            playsInline: true,
+            preload: "metadata"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.url,
+            alt: item.name || `Media #${index + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1.5 pointer-events-none", children: index === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-black/65 backdrop-blur-md text-white text-[10px] font-semibold px-2 py-0.5 rounded-full border border-white/20 shadow-md flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.8)]" }),
+          /* @__PURE__ */ jsx("span", { children: "Cover" })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-black/55 backdrop-blur-md text-white/90 text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/10 shadow-sm", children: [
+          "#",
+          index + 1
+        ] }) }),
+        isVideo && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 bg-black/65 backdrop-blur-md text-white p-1 rounded-full border border-white/20 shadow-md pointer-events-none", children: /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/55 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 backdrop-blur-[2px] z-20", children: [
+          enablePreviewModal && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onPreview,
+              className: "size-8 rounded-full bg-white/25 hover:bg-white/40 text-white flex items-center justify-center transition-colors shadow-xs cursor-pointer",
+              title: "Preview full size",
+              children: /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: onRemove,
+              className: "size-8 rounded-full bg-destructive/90 hover:bg-destructive text-white flex items-center justify-center transition-colors shadow-xs cursor-pointer",
+              title: "Remove item",
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+            }
+          )
+        ] })
+      ]
+    },
+    item.key || item.url || index
+  );
+};
+ImageUploadThumbnailCard.displayName = "ImageUploadThumbnailCard";
+const ImageUploadTaskCard = ({
+  id,
+  name,
+  previewUrl,
+  isVideo,
+  layout = "grid",
+  shouldAnimate = true
+}) => {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: shouldAnimate,
+      initial: shouldAnimate ? "hidden" : false,
+      animate: shouldAnimate ? "visible" : void 0,
+      exit: shouldAnimate ? "exit" : void 0,
+      variants: shouldAnimate ? scaleVariants : void 0,
+      transition: getTransition("fast"),
+      className: cn(
+        thumbnailCardVariants({ aspectRatio: "square" }),
+        "border-primary/50 bg-primary-50/20 dark:bg-primary-950/20",
+        layout === "scroll" && "shrink-0 w-36 sm:w-40 snap-start"
+      ),
+      children: [
+        isVideo ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: previewUrl,
+            className: "w-full h-full object-cover blur-xs scale-105 opacity-60",
+            muted: true
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: previewUrl,
+            alt: name,
+            className: "w-full h-full object-cover blur-xs scale-105 opacity-60"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1.5 p-2 text-center", children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-white" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-white line-clamp-1 max-w-full px-1", children: name })
+        ] })
+      ]
+    },
+    id
+  );
+};
+ImageUploadTaskCard.displayName = "ImageUploadTaskCard";
+
+export { ImageUploadTaskCard, ImageUploadThumbnailCard };

package/dist/components/ImageUpload/subcomponents/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ImageUploadIcons';
+export * from './ImageUploadDropzone';
+export * from './ImageUploadSinglePreview';
+export * from './ImageUploadThumbnailCard';
+export * from './ImageUploadModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageUpload/subcomponents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC"}

package/dist/components/Inline/Inline.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const inlineVariants: (props?: ({
-    align?: "center" | "end" | "start" | "baseline" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InlineVariants = VariantProps<typeof inlineVariants>;

package/dist/components/Input/Input.js

@@ -175,12 +175,12 @@ const Input = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-0.5 flex items-center gap-1.5 text-left",
+                "text-xs mt-1 flex items-center gap-1.5 text-left",
                 isError ? "text-destructive font-medium" : "text-muted-foreground"
               ),
               children: [
                 isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+                /* @__PURE__ */ jsx("span", { className: "leading-normal", children: errorMessage || helperText })
               ]
             }
           )

package/dist/components/Input/Input.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const inputWrapperVariants: (props?: ({
-    variant?: "outline" | "filled" | "subtle" | null | undefined;
+    variant?: "filled" | "outline" | "subtle" | null | undefined;
     size?: "default" | "sm" | "lg" | "md" | null | undefined;
     isError?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;

package/dist/components/Input/Input.styles.js

@@ -33,7 +33,7 @@ const inputWrapperVariants = cva(
   }
 );
 const inputFieldVariants = cva(
-  "w-full h-full bg-transparent font-sans border-0 p-0 text-foreground placeholder:text-muted focus:outline-none focus:ring-0 focus-visible:outline-none disabled:cursor-not-allowed"
+  "w-full h-full bg-transparent font-sans border-0 p-0 text-foreground placeholder:text-muted focus:outline-none focus:ring-0 focus-visible:outline-none disabled:cursor-not-allowed [box-shadow:none] [&:-webkit-autofill]:[-webkit-background-clip:text] [&:-webkit-autofill]:[background-clip:text] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[caret-color:currentColor] [&:-webkit-autofill]:[transition:background-color_5000000s_ease-in-out_0s] [&:-webkit-autofill]:[box-shadow:none] [&:autofill]:[-webkit-background-clip:text] [&:autofill]:[background-clip:text] [&:autofill]:[-webkit-text-fill-color:currentColor] [&:autofill]:[caret-color:currentColor] [&:autofill]:[transition:background-color_5000000s_ease-in-out_0s] [&:autofill]:[box-shadow:none]"
 );
 
 export { inputFieldVariants, inputWrapperVariants };

package/dist/components/Input/Input.types.d.ts

@@ -41,7 +41,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     /**
      * HTML input type (text, password, email, number, search, tel, url, date, etc.).
      */
-    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | (string & {});
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | (string & Record<never, never>);
     /**
      * Whether to display an interactive show/hide password toggle button when type="password".
      * Defaults to true.

package/dist/components/Input/Input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { LinkButtonProps } from './LinkButton.types';
+/**
+ * LinkButton is a unified navigation component for internal, cross-zone, and external links.
+ *
+ * NAVIGATION RULES:
+ * 1. Internal same-zone navigation: Uses Next.js `next/link` by default for client-side SPA routing and prefetching.
+ * 2. Cross-zone boundary navigation: Uses native HTML `<a>` navigation when `crossZone={true}` or when `zone` points
+ *    to an external zone. NEVER use `next/link` across zone boundaries.
+ * 3. Default variant: Styled as a link by default, with button visual styling available via variant props.
+ */
+export declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/components/LinkButton/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,2FAyMtB,CAAC"}

package/dist/components/LinkButton/LinkButton.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import NextLink from 'next/link';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { SpinnerIcon } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { linkButtonVariants } from './LinkButton.styles.js';
+import { useTimmbrConfig, resolveZoneHref } from '../../providers/TimmbrConfigProvider.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const LinkButton = React.forwardRef(
+  ({
+    className,
+    style,
+    variant,
+    size,
+    asChild = false,
+    motion,
+    leftIcon,
+    rightIcon,
+    loading = false,
+    loadingText,
+    disabled = false,
+    href,
+    zone,
+    crossZone = false,
+    prefetch,
+    replace,
+    scroll,
+    target,
+    rel,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const config = useTimmbrConfig();
+    const globalMotion = useGlobalAnimation();
+    const resolvedVariant = variant ?? config.components?.button?.defaultVariant ?? "default";
+    const resolvedSize = size ?? config.components?.button?.defaultSize ?? "default";
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    const isDisabled = disabled || loading;
+    const resolvedHref = href ? resolveZoneHref(href, zone, config.zones?.zones) : void 0;
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    const buttonClassName = cn(
+      linkButtonVariants({
+        variant: resolvedVariant,
+        size: resolvedSize,
+        disabled: isDisabled,
+        className
+      }),
+      !shouldAnimate && "transition-none active:scale-100",
+      motionClass
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: buttonClassName,
+          style,
+          "data-slot": "link-button",
+          "aria-disabled": isDisabled ? "true" : void 0,
+          tabIndex: isDisabled ? -1 : props.tabIndex,
+          onClick: handleClick,
+          ...props,
+          children
+        }
+      );
+    }
+    const content = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SpinnerIcon, { size: resolvedSize === "sm" ? 14 : 18 }),
+      loadingText ? /* @__PURE__ */ jsx("span", { children: loadingText }) : children
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-flex shrink-0 items-center justify-center pointer-events-none",
+          "data-slot": "link-button-left-icon",
+          children: leftIcon
+        }
+      ),
+      children && /* @__PURE__ */ jsx("span", { children }),
+      rightIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-flex shrink-0 items-center justify-center pointer-events-none",
+          "data-slot": "link-button-right-icon",
+          children: rightIcon
+        }
+      )
+    ] });
+    if (isDisabled) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          "data-slot": "link-button",
+          "data-testid": "timmbr-link-button",
+          "aria-disabled": "true",
+          tabIndex: -1,
+          style,
+          onClick: handleClick,
+          className: buttonClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    const isExternal = Boolean(resolvedHref) && (resolvedHref.startsWith("http://") || resolvedHref.startsWith("https://") || resolvedHref.startsWith("mailto:") || resolvedHref.startsWith("tel:") || target === "_blank");
+    const isDifferentZone = Boolean(zone) && Boolean(config.zones?.currentZone) && zone !== config.zones?.currentZone;
+    const requiresCrossZone = crossZone || isDifferentZone || Boolean(zone && !config.zones?.currentZone);
+    const resolvedRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
+    if (requiresCrossZone || isExternal) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href: resolvedHref ?? "#",
+          target,
+          rel: resolvedRel,
+          "data-slot": "link-button",
+          "data-cross-zone": requiresCrossZone ? "true" : void 0,
+          "data-testid": "timmbr-link-button",
+          style,
+          onClick: handleClick,
+          className: buttonClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    if (resolvedHref) {
+      return /* @__PURE__ */ jsx(
+        NextLink,
+        {
+          ref,
+          href: resolvedHref,
+          prefetch,
+          replace,
+          scroll,
+          target,
+          rel: resolvedRel,
+          "data-slot": "link-button",
+          "data-testid": "timmbr-link-button",
+          style,
+          onClick: handleClick,
+          className: buttonClassName,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        "data-slot": "link-button",
+        "data-testid": "timmbr-link-button",
+        style,
+        onClick: handleClick,
+        className: buttonClassName,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+LinkButton.displayName = "LinkButton";
+
+export { LinkButton };

package/dist/components/LinkButton/LinkButton.styles.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const linkButtonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "md" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type LinkButtonVariants = VariantProps<typeof linkButtonVariants>;
+//# sourceMappingURL=LinkButton.styles.d.ts.map

package/dist/components/LinkButton/LinkButton.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,kBAAkB;;;;8EAiE9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/LinkButton/LinkButton.styles.js

@@ -0,0 +1,61 @@
+import { cva } from 'class-variance-authority';
+
+const linkButtonVariants = cva(
+  "inline-flex items-center justify-center font-sans transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 select-none no-underline",
+  {
+    variants: {
+      variant: {
+        default: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
+        link: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
+        primary: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-bg-subtle hover:brightness-105 active:bg-secondary-foreground/10 active:brightness-95 shadow-xs hover:shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 hover:border-grey-400 dark:hover:border-grey-600 active:scale-[0.98] font-semibold whitespace-nowrap",
+        ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 active:scale-[0.98] font-semibold whitespace-nowrap",
+        destructive: "bg-destructive text-white hover:bg-red-700 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        muted: "text-grey-600 dark:text-grey-400 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100",
+        subtle: "text-foreground/80 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        default: "text-sm gap-1.5",
+        md: "text-sm gap-1.5",
+        lg: "text-base gap-2",
+        icon: "p-1 shrink-0"
+      },
+      disabled: {
+        true: "pointer-events-none opacity-50 cursor-not-allowed",
+        false: "cursor-pointer"
+      }
+    },
+    compoundVariants: [
+      // Button sizing variants when rendered with button appearance
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: "sm",
+        className: "h-9 px-3 rounded-[2px] gap-2"
+      },
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: ["default", "md"],
+        className: "h-11 px-5 rounded-[2px] gap-2"
+      },
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: "lg",
+        className: "h-[52px] px-6 rounded-[2px] gap-2"
+      },
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: "icon",
+        className: "h-10 w-10 p-0 rounded-[2px]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      disabled: false
+    }
+  }
+);
+
+export { linkButtonVariants };