@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/schema-display.d.cts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Badge } from '../ui/badge.cjs';
+import { Collapsible } from '../ui/collapsible.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+interface SchemaParameter {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    location?: "path" | "query" | "header";
+}
+interface SchemaProperty {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    properties?: SchemaProperty[];
+    items?: SchemaProperty;
+}
+type SchemaDisplayProps = HTMLAttributes<HTMLDivElement> & {
+    method: HttpMethod;
+    path: string;
+    description?: string;
+    parameters?: SchemaParameter[];
+    requestBody?: SchemaProperty[];
+    responseBody?: SchemaProperty[];
+};
+declare const SchemaDisplay: ({ method, path, description, parameters, requestBody, responseBody, className, children, ...props }: SchemaDisplayProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayHeader: ({ className, children, ...props }: SchemaDisplayHeaderProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayMethodProps = ComponentProps<typeof Badge>;
+declare const SchemaDisplayMethod: ({ className, children, ...props }: SchemaDisplayMethodProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayPathProps = HTMLAttributes<HTMLSpanElement>;
+declare const SchemaDisplayPath: ({ className, children, ...props }: SchemaDisplayPathProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const SchemaDisplayDescription: ({ className, children, ...props }: SchemaDisplayDescriptionProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayContentProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayContent: ({ className, children, ...props }: SchemaDisplayContentProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayParametersProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayParameters: ({ className, children, ...props }: SchemaDisplayParametersProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayParameterProps = HTMLAttributes<HTMLDivElement> & SchemaParameter;
+declare const SchemaDisplayParameter: ({ name, type, required, description, location, className, ...props }: SchemaDisplayParameterProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayRequestProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayRequest: ({ className, children, ...props }: SchemaDisplayRequestProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayResponseProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayResponse: ({ className, children, ...props }: SchemaDisplayResponseProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayBody: ({ className, children, ...props }: SchemaDisplayBodyProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayPropertyProps = HTMLAttributes<HTMLDivElement> & SchemaProperty & {
+    depth?: number;
+};
+declare const SchemaDisplayProperty: ({ name, type, required, description, properties, items, depth, className, ...props }: SchemaDisplayPropertyProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayExampleProps = HTMLAttributes<HTMLPreElement>;
+declare const SchemaDisplayExample: ({ className, children, ...props }: SchemaDisplayExampleProps) => react_jsx_runtime.JSX.Element;
+
+export { SchemaDisplay, SchemaDisplayBody, type SchemaDisplayBodyProps, SchemaDisplayContent, type SchemaDisplayContentProps, SchemaDisplayDescription, type SchemaDisplayDescriptionProps, SchemaDisplayExample, type SchemaDisplayExampleProps, SchemaDisplayHeader, type SchemaDisplayHeaderProps, SchemaDisplayMethod, type SchemaDisplayMethodProps, SchemaDisplayParameter, type SchemaDisplayParameterProps, SchemaDisplayParameters, type SchemaDisplayParametersProps, SchemaDisplayPath, type SchemaDisplayPathProps, SchemaDisplayProperty, type SchemaDisplayPropertyProps, type SchemaDisplayProps, SchemaDisplayRequest, type SchemaDisplayRequestProps, SchemaDisplayResponse, type SchemaDisplayResponseProps };

package/dist/components/ai-elements/schema-display.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Badge } from '../ui/badge.js';
+import { Collapsible } from '../ui/collapsible.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+interface SchemaParameter {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    location?: "path" | "query" | "header";
+}
+interface SchemaProperty {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    properties?: SchemaProperty[];
+    items?: SchemaProperty;
+}
+type SchemaDisplayProps = HTMLAttributes<HTMLDivElement> & {
+    method: HttpMethod;
+    path: string;
+    description?: string;
+    parameters?: SchemaParameter[];
+    requestBody?: SchemaProperty[];
+    responseBody?: SchemaProperty[];
+};
+declare const SchemaDisplay: ({ method, path, description, parameters, requestBody, responseBody, className, children, ...props }: SchemaDisplayProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayHeader: ({ className, children, ...props }: SchemaDisplayHeaderProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayMethodProps = ComponentProps<typeof Badge>;
+declare const SchemaDisplayMethod: ({ className, children, ...props }: SchemaDisplayMethodProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayPathProps = HTMLAttributes<HTMLSpanElement>;
+declare const SchemaDisplayPath: ({ className, children, ...props }: SchemaDisplayPathProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const SchemaDisplayDescription: ({ className, children, ...props }: SchemaDisplayDescriptionProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayContentProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayContent: ({ className, children, ...props }: SchemaDisplayContentProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayParametersProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayParameters: ({ className, children, ...props }: SchemaDisplayParametersProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayParameterProps = HTMLAttributes<HTMLDivElement> & SchemaParameter;
+declare const SchemaDisplayParameter: ({ name, type, required, description, location, className, ...props }: SchemaDisplayParameterProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayRequestProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayRequest: ({ className, children, ...props }: SchemaDisplayRequestProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayResponseProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayResponse: ({ className, children, ...props }: SchemaDisplayResponseProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayBody: ({ className, children, ...props }: SchemaDisplayBodyProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayPropertyProps = HTMLAttributes<HTMLDivElement> & SchemaProperty & {
+    depth?: number;
+};
+declare const SchemaDisplayProperty: ({ name, type, required, description, properties, items, depth, className, ...props }: SchemaDisplayPropertyProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayExampleProps = HTMLAttributes<HTMLPreElement>;
+declare const SchemaDisplayExample: ({ className, children, ...props }: SchemaDisplayExampleProps) => react_jsx_runtime.JSX.Element;
+
+export { SchemaDisplay, SchemaDisplayBody, type SchemaDisplayBodyProps, SchemaDisplayContent, type SchemaDisplayContentProps, SchemaDisplayDescription, type SchemaDisplayDescriptionProps, SchemaDisplayExample, type SchemaDisplayExampleProps, SchemaDisplayHeader, type SchemaDisplayHeaderProps, SchemaDisplayMethod, type SchemaDisplayMethodProps, SchemaDisplayParameter, type SchemaDisplayParameterProps, SchemaDisplayParameters, type SchemaDisplayParametersProps, SchemaDisplayPath, type SchemaDisplayPathProps, SchemaDisplayProperty, type SchemaDisplayPropertyProps, type SchemaDisplayProps, SchemaDisplayRequest, type SchemaDisplayRequestProps, SchemaDisplayResponse, type SchemaDisplayResponseProps };

package/dist/components/ai-elements/schema-display.js

@@ -0,0 +1,330 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { ChevronRightIcon } from "lucide-react";
+import { createContext, use, useMemo } from "react";
+const SchemaDisplayContext = createContext({
+  method: "GET",
+  path: ""
+});
+const SchemaDisplay = ({
+  method,
+  path,
+  description,
+  parameters,
+  requestBody,
+  responseBody,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      description,
+      method,
+      parameters,
+      path,
+      requestBody,
+      responseBody
+    }),
+    [description, method, parameters, path, requestBody, responseBody]
+  );
+  return /* @__PURE__ */ jsx(SchemaDisplayContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-lg border bg-background",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SchemaDisplayHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(SchemaDisplayMethod, {}),
+          /* @__PURE__ */ jsx(SchemaDisplayPath, {})
+        ] }) }),
+        description && /* @__PURE__ */ jsx(SchemaDisplayDescription, {}),
+        /* @__PURE__ */ jsxs(SchemaDisplayContent, { children: [
+          parameters && parameters.length > 0 && /* @__PURE__ */ jsx(SchemaDisplayParameters, {}),
+          requestBody && requestBody.length > 0 && /* @__PURE__ */ jsx(SchemaDisplayRequest, {}),
+          responseBody && responseBody.length > 0 && /* @__PURE__ */ jsx(SchemaDisplayResponse, {})
+        ] })
+      ] })
+    }
+  ) });
+};
+const SchemaDisplayHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-3 border-b px-4 py-3", className),
+    ...props,
+    children
+  }
+);
+const methodStyles = {
+  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  GET: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  PATCH: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  POST: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
+};
+const SchemaDisplayMethod = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { method } = use(SchemaDisplayContext);
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn("font-mono text-xs", methodStyles[method], className),
+      variant: "secondary",
+      ...props,
+      children: children ?? method
+    }
+  );
+};
+const SchemaDisplayPath = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { path } = use(SchemaDisplayContext);
+  const highlightedPath = path.replaceAll(
+    /\{([^}]+)\}/g,
+    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>'
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("font-mono text-sm", className),
+      dangerouslySetInnerHTML: { __html: children ?? highlightedPath },
+      ...props
+    }
+  );
+};
+const SchemaDisplayDescription = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { description } = use(SchemaDisplayContext);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "border-b px-4 py-3 text-muted-foreground text-sm",
+        className
+      ),
+      ...props,
+      children: children ?? description
+    }
+  );
+};
+const SchemaDisplayContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("divide-y", className), ...props, children });
+const SchemaDisplayParameters = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { parameters } = use(SchemaDisplayContext);
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn(className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Parameters" }),
+      /* @__PURE__ */ jsx(Badge, { className: "ml-auto text-xs", variant: "secondary", children: parameters?.length })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "divide-y border-t", children: children ?? parameters?.map((param) => /* @__PURE__ */ jsx(SchemaDisplayParameter, { ...param }, param.name)) }) })
+  ] });
+};
+const SchemaDisplayParameter = ({
+  name,
+  type,
+  required,
+  description,
+  location,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("px-4 py-3 pl-10", className), ...props, children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: name }),
+    /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: type }),
+    location && /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "secondary", children: location }),
+    required && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+        variant: "secondary",
+        children: "required"
+      }
+    )
+  ] }),
+  description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground text-sm", children: description })
+] });
+const SchemaDisplayRequest = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { requestBody } = use(SchemaDisplayContext);
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn(className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Request Body" })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "border-t", children: children ?? requestBody?.map((prop) => /* @__PURE__ */ jsx(SchemaDisplayProperty, { ...prop, depth: 0 }, prop.name)) }) })
+  ] });
+};
+const SchemaDisplayResponse = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { responseBody } = use(SchemaDisplayContext);
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn(className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Response" })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "border-t", children: children ?? responseBody?.map((prop) => /* @__PURE__ */ jsx(SchemaDisplayProperty, { ...prop, depth: 0 }, prop.name)) }) })
+  ] });
+};
+const SchemaDisplayBody = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("divide-y", className), ...props, children });
+const SchemaDisplayProperty = ({
+  name,
+  type,
+  required,
+  description,
+  properties,
+  items,
+  depth = 0,
+  className,
+  ...props
+}) => {
+  const hasChildren = properties || items;
+  const paddingLeft = 40 + depth * 16;
+  if (hasChildren) {
+    return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: depth < 2, children: [
+      /* @__PURE__ */ jsxs(
+        CollapsibleTrigger,
+        {
+          className: cn(
+            "group flex w-full items-center gap-2 py-3 text-left transition-colors hover:bg-muted/50",
+            className
+          ),
+          style: { paddingLeft },
+          children: [
+            /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: name }),
+            /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: type }),
+            required && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+                variant: "secondary",
+                children: "required"
+              }
+            )
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "pb-2 text-muted-foreground text-sm",
+          style: { paddingLeft: paddingLeft + 24 },
+          children: description
+        }
+      ),
+      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", { className: "divide-y border-t", children: [
+        properties?.map((prop) => /* @__PURE__ */ jsx(
+          SchemaDisplayProperty,
+          {
+            ...prop,
+            depth: depth + 1
+          },
+          prop.name
+        )),
+        items && /* @__PURE__ */ jsx(
+          SchemaDisplayProperty,
+          {
+            ...items,
+            depth: depth + 1,
+            name: `${name}[]`
+          }
+        )
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("py-3 pr-4", className),
+      style: { paddingLeft },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: name }),
+          /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: type }),
+          required && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+              variant: "secondary",
+              children: "required"
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 pl-6 text-muted-foreground text-sm", children: description })
+      ]
+    }
+  );
+};
+const SchemaDisplayExample = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "pre",
+  {
+    className: cn(
+      "mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+export {
+  SchemaDisplay,
+  SchemaDisplayBody,
+  SchemaDisplayContent,
+  SchemaDisplayDescription,
+  SchemaDisplayExample,
+  SchemaDisplayHeader,
+  SchemaDisplayMethod,
+  SchemaDisplayParameter,
+  SchemaDisplayParameters,
+  SchemaDisplayPath,
+  SchemaDisplayProperty,
+  SchemaDisplayRequest,
+  SchemaDisplayResponse
+};

package/dist/components/ai-elements/shimmer.cjs

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _react = require('motion/react');
+var _react3 = require('react');
+const motionComponentCache = /* @__PURE__ */ new Map();
+const getMotionComponent = (element) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = _react.motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const MotionComponent = getMotionComponent(
+    Component
+  );
+  const dynamicSpread = _react3.useMemo.call(void 0, 
+    () => (_nullishCoalesce(_optionalChain([children, 'optionalAccess', _ => _.length]), () => ( 0))) * spread,
+    [children, spread]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: _utils.cn.call(void 0, 
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: {
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY
+      },
+      children
+    }
+  );
+};
+const Shimmer = _react3.memo.call(void 0, ShimmerComponent);
+
+
+exports.Shimmer = Shimmer;

package/dist/components/ai-elements/shimmer.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+}
+declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => react_jsx_runtime.JSX.Element>;
+
+export { Shimmer, type TextShimmerProps };

package/dist/components/ai-elements/shimmer.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+}
+declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => react_jsx_runtime.JSX.Element>;
+
+export { Shimmer, type TextShimmerProps };

package/dist/components/ai-elements/shimmer.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { motion } from "motion/react";
+import { memo, useMemo } from "react";
+const motionComponentCache = /* @__PURE__ */ new Map();
+const getMotionComponent = (element) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const MotionComponent = getMotionComponent(
+    Component
+  );
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread]
+  );
+  return /* @__PURE__ */ jsx(
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: {
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY
+      },
+      children
+    }
+  );
+};
+const Shimmer = memo(ShimmerComponent);
+export {
+  Shimmer
+};