@memoreco/ui 0.2.3 → 0.2.5

package/dist/ui/src/components/code-sample.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+
+export interface CodeSampleProps {
+    /**
+     * Optional caption displayed above the code block
+     */
+    caption?: string;
+    /**
+     * Code content - can be a plain string or React elements for custom syntax highlighting
+     */
+    children: React.ReactNode;
+    /**
+     * Plain text version for clipboard copy (if children is JSX, provide this)
+     */
+    plainText?: string;
+    /**
+     * Enable keyboard shortcut (spacebar) to copy code
+     * @default false
+     */
+    enableSpacebar?: boolean;
+    /**
+     * Show copy success toast notification
+     * @default true
+     */
+    showToast?: boolean;
+    /**
+     * Maximum height for code block with scroll
+     * @default "60vh"
+     */
+    maxHeight?: string;
+    /**
+     * Custom className for the code block container
+     */
+    className?: string;
+}
+/**
+ * CodeSample: Professional code display component with copy functionality
+ *
+ * Features:
+ * - Copy to clipboard with animated feedback
+ * - Hover tooltip showing "Copy" hint
+ * - Optional keyboard shortcut (spacebar) for quick copy
+ * - Smooth scale animation on button press
+ * - Portal-based tooltip positioning
+ * - Toast notifications for copy success/failure
+ * - Supports both plain text and custom JSX syntax highlighting
+ *
+ * Usage:
+ * ```tsx
+ * // Simple usage with plain text
+ * <CodeSample caption="Example">
+ *   {`const hello = "world";`}
+ * </CodeSample>
+ *
+ * // Advanced usage with custom syntax highlighting
+ * <CodeSample caption="React Example" plainText={plainTextVersion}>
+ *   <span className="text-purple-400">import</span> ...
+ * </CodeSample>
+ * ```
+ */
+export declare function CodeSample({ caption, children, plainText, enableSpacebar, showToast, maxHeight, className, }: CodeSampleProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/src/components/thumbnail-card.d.ts

@@ -0,0 +1,25 @@
+export interface ThumbnailCardProps {
+    url: string;
+    imageUrl?: string;
+    status: "loading" | "ready" | "error";
+    onClick?: () => void;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    showHostname?: boolean;
+}
+/**
+ * ThumbnailCard - Displays a thumbnail preview card with loading/error states
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailCard
+ *   url="https://example.com"
+ *   imageUrl="https://cdn.example.com/screenshot.png"
+ *   status="ready"
+ *   onClick={() => console.log('clicked')}
+ *   size="md"
+ *   showHostname={true}
+ * />
+ * ```
+ */
+export declare function ThumbnailCard({ url, imageUrl, status, onClick, className, size, showHostname, }: ThumbnailCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/src/components/thumbnail-preview.d.ts

@@ -0,0 +1,21 @@
+export interface ThumbnailPreviewOverlayProps {
+    url: string;
+    imageUrl?: string;
+    status: "loading" | "ready" | "error";
+    onClose: () => void;
+    className?: string;
+}
+/**
+ * ThumbnailPreviewOverlay - Full-screen overlay for previewing thumbnails
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailPreviewOverlay
+ *   url="https://example.com"
+ *   imageUrl="https://cdn.example.com/screenshot.png"
+ *   status="ready"
+ *   onClose={() => setPreview(null)}
+ * />
+ * ```
+ */
+export declare function ThumbnailPreviewOverlay({ url, imageUrl, status, onClose, className, }: ThumbnailPreviewOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/src/components/thumbnail-strip.d.ts

@@ -0,0 +1,30 @@
+export interface ThumbnailData {
+    url: string;
+    imageUrl?: string;
+    status: "loading" | "ready" | "error";
+}
+export interface ThumbnailStripProps {
+    thumbnails: ThumbnailData[];
+    onThumbnailClick?: (thumbnail: ThumbnailData) => void;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    showHostname?: boolean;
+    maxDisplay?: number;
+}
+/**
+ * ThumbnailStrip - Displays a horizontal strip of thumbnail cards
+ *
+ * @example
+ * ```tsx
+ * <ThumbnailStrip
+ *   thumbnails={[
+ *     { url: "https://example.com", imageUrl: "...", status: "ready" },
+ *     { url: "https://figma.com", status: "loading" },
+ *   ]}
+ *   onThumbnailClick={(thumb) => setPreview(thumb)}
+ *   size="md"
+ *   maxDisplay={5}
+ * />
+ * ```
+ */
+export declare function ThumbnailStrip({ thumbnails, onThumbnailClick, className, size, showHostname, maxDisplay, }: ThumbnailStripProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/src/index.d.ts

@@ -15,6 +15,10 @@ export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, Dialog
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, } from './components/select';
 export { Checkbox } from './components/checkbox';
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/alert-dialog';
+export { CodeSample } from './components/code-sample';
+export { ThumbnailCard } from './components/thumbnail-card';
+export { ThumbnailPreviewOverlay } from './components/thumbnail-preview';
+export { ThumbnailStrip } from './components/thumbnail-strip';
 export type { ButtonProps } from './components/button';
 export type { CardProps } from './components/card';
 export type { InputProps } from './components/input';
@@ -23,5 +27,9 @@ export type { FormProps, FormFieldProps } from './components/form';
 export type { BadgeProps } from './components/badge';
 export type { SeparatorProps } from './components/separator';
 export type { DiscLoaderProps } from './components/disc-loader';
+export type { CodeSampleProps } from './components/code-sample';
+export type { ThumbnailCardProps } from './components/thumbnail-card';
+export type { ThumbnailPreviewOverlayProps } from './components/thumbnail-preview';
+export type { ThumbnailStripProps, ThumbnailData as UIThumbnailData } from './components/thumbnail-strip';
 export { cn } from './lib/utils';
-export declare const UI_LIBRARY_VERSION = "0.2.3";
+export declare const UI_LIBRARY_VERSION = "0.2.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memoreco/ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Memoreco shared UI components with Shadcn",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",