Draft marquee

apps/docs/content/docs/marquee.mdx

@@ -0,0 +1,179 @@
+---
+title: Marquee
+description: Marquees are a great way to show a list of items in a horizontal scrolling motion.
+icon: GalleryHorizontalEnd
+---
+
+import { AutoTypeTable } from 'fumadocs-typescript/ui';
+
+<PoweredBy packages={[
+  { name: 'react-fast-marquee', url: 'https://www.react-fast-marquee.com/' },
+  { name: 'useHooks', url: 'https://usehooks.com/' },
+]} />
+
+<Preview name="marquee" code={`'use client';
+
+import {
+  Marquee,
+  MarqueeItem,
+  MarqueeFade,
+  MarqueeContent,
+} from '@/components/ui/kibo-ui/marquee';
+
+const Example = () => (
+  <div className="py-4">
+    <Marquee>
+      <MarqueeFade side="left" />
+      <MarqueeFade side="right" />
+      <MarqueeContent>
+        {new Array(10).fill(null).map((_, index) => (
+          <MarqueeItem key={index} className="w-16 h-16">
+            <img
+              src={\`https://placehold.co/64x64?random=\${index}\`}
+              alt={\`Image \${index}\`}
+              className="rounded-full overflow-hidden"
+            />
+          </MarqueeItem>
+        ))}
+      </MarqueeContent>
+    </Marquee>
+  </div>
+);
+
+export default Example;`} />
+
+## Installation
+
+<Installer packageName="marquee" />
+
+## Features
+
+- Drag and drop items between groups
+- Customize the item contents
+
+## Examples
+
+### Without fading
+
+<Preview name="marquee" code={`'use client';
+
+import {
+  Marquee,
+  MarqueeItem,
+  MarqueeFade,
+  MarqueeContent,
+} from '@/components/ui/kibo-ui/marquee';
+
+const Example = () => (
+  <div className="py-4">
+    <Marquee>
+      <MarqueeContent>
+        {new Array(10).fill(null).map((_, index) => (
+          <MarqueeItem key={index} className="w-16 h-16">
+            <img
+              src={\`https://placehold.co/64x64?random=\${index}\`}
+              alt={\`Image \${index}\`}
+              className="rounded-full overflow-hidden"
+            />
+          </MarqueeItem>
+        ))}
+      </MarqueeContent>
+    </Marquee>
+  </div>
+);
+
+export default Example;`} />
+
+### Without pre-defined options
+
+<Preview name="marquee" code={`'use client';
+
+import {
+  Marquee,
+  MarqueeItem,
+  MarqueeFade,
+  MarqueeContent,
+} from '@/components/ui/kibo-ui/marquee';
+
+const Example = () => (
+  <div className="py-4">
+    <Marquee>
+      <MarqueeFade side="left" />
+      <MarqueeFade side="right" />
+      <MarqueeContent loop={1} autoFill={false} pauseOnHover={false}>
+        {new Array(10).fill(null).map((_, index) => (
+          <MarqueeItem key={index} className="w-16 h-16">
+            <img
+              src={\`https://placehold.co/64x64?random=\${index}\`}
+              alt={\`Image \${index}\`}
+              className="rounded-full overflow-hidden"
+            />
+          </MarqueeItem>
+        ))}
+      </MarqueeContent>
+    </Marquee>
+  </div>
+);
+
+export default Example;`} />
+
+### Custom spacing
+
+<Preview name="marquee" code={`'use client';
+
+import {
+  Marquee,
+  MarqueeItem,
+  MarqueeFade,
+  MarqueeContent,
+} from '@/components/ui/kibo-ui/marquee';
+
+const Example = () => (
+  <div className="py-4">
+    <Marquee>
+      <MarqueeFade side="left" />
+      <MarqueeFade side="right" />
+      <MarqueeContent>
+        {new Array(10).fill(null).map((_, index) => (
+          <MarqueeItem key={index} className="w-16 h-16 -mx-2">
+            <img
+              src={\`https://placehold.co/64x64?random=\${index}\`}
+              alt={\`Image \${index}\`}
+              className="rounded-full overflow-hidden ring-2 ring-background"
+            />
+          </MarqueeItem>
+        ))}
+      </MarqueeContent>
+    </Marquee>
+  </div>
+);
+
+export default Example;`} />
+
+## Props
+
+The marquee component is made up of the following subcomponents:
+
+### Marquee
+
+The `Marquee` component is used to display the marquee.
+
+<AutoTypeTable path="node_modules/@repo/marquee/index.tsx" name="MarqueeProps" />
+
+### MarqueeContent
+
+The `MarqueeContent` component is used to display the content of the marquee.
+
+<AutoTypeTable path="node_modules/@repo/marquee/index.tsx" name="MarqueeContentProps" />
+
+### MarqueeFade
+
+The `MarqueeFade` component is used to display the fade effect on the marquee.
+
+<AutoTypeTable path="node_modules/@repo/marquee/index.tsx" name="MarqueeFadeProps" />
+
+### MarqueeItem
+
+The `MarqueeItem` component is used to display an item.
+
+<AutoTypeTable path="node_modules/@repo/marquee/index.tsx" name="MarqueeItemProps" />

apps/docs/package.json

@@ -21,6 +21,7 @@
     "@repo/gantt": "workspace:*",
     "@repo/kanban": "workspace:*",
     "@repo/list": "workspace:*",
+    "@repo/marquee": "workspace:*",
     "@repo/shadcn-ui": "workspace:*",
     "@repo/table": "workspace:*",
     "@repo/tailwind-config": "workspace:*",

apps/docs/public/registry/marquee.json

@@ -0,0 +1,17 @@
+{
+  "name": "marquee",
+  "type": "registry:ui",
+  "registryDependencies": [],
+  "dependencies": [
+    "react-fast-marquee"
+  ],
+  "devDependencies": [],
+  "files": [
+    {
+      "type": "registry:ui",
+      "path": "index.tsx",
+      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport type { HTMLAttributes } from 'react';\nimport FastMarquee from 'react-fast-marquee';\nimport type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';\n\nexport type MarqueeProps = HTMLAttributes<HTMLDivElement>;\n\nexport const Marquee = ({ className, ...props }: MarqueeProps) => (\n  <div className={cn('relative', className)} {...props} />\n);\n\nexport type MarqueeContentProps = FastMarqueeProps;\n\nexport const MarqueeContent = ({\n  loop = 0,\n  autoFill = true,\n  pauseOnHover = true,\n  ...props\n}: MarqueeContentProps) => (\n  <FastMarquee\n    loop={loop}\n    autoFill={autoFill}\n    pauseOnHover={pauseOnHover}\n    {...props}\n  />\n);\n\nexport type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {\n  side: 'left' | 'right';\n};\n\nexport const MarqueeFade = ({\n  className,\n  side,\n  ...props\n}: MarqueeFadeProps) => (\n  <div\n    className={cn(\n      'absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent',\n      side === 'left' ? 'left-0 bg-gradient-to-r' : 'right-0 bg-gradient-to-l',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;\n\nexport const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (\n  <div\n    className={cn('mx-2 flex-shrink-0 object-contain', className)}\n    {...props}\n  />\n);\n",
+      "target": "ui/index.tsx"
+    }
+  ]
+}

packages/marquee/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'react';
+import FastMarquee from 'react-fast-marquee';
+import type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';
+
+export type MarqueeProps = HTMLAttributes<HTMLDivElement>;
+
+export const Marquee = ({ className, ...props }: MarqueeProps) => (
+  <div className={cn('relative', className)} {...props} />
+);
+
+export type MarqueeContentProps = FastMarqueeProps;
+
+export const MarqueeContent = ({
+  loop = 0,
+  autoFill = true,
+  pauseOnHover = true,
+  ...props
+}: MarqueeContentProps) => (
+  <FastMarquee
+    loop={loop}
+    autoFill={autoFill}
+    pauseOnHover={pauseOnHover}
+    {...props}
+  />
+);
+
+export type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {
+  side: 'left' | 'right';
+};
+
+export const MarqueeFade = ({
+  className,
+  side,
+  ...props
+}: MarqueeFadeProps) => (
+  <div
+    className={cn(
+      'absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent',
+      side === 'left' ? 'left-0 bg-gradient-to-r' : 'right-0 bg-gradient-to-l',
+      className
+    )}
+    {...props}
+  />
+);
+
+export type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;
+
+export const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (
+  <div
+    className={cn('mx-2 flex-shrink-0 object-contain', className)}
+    {...props}
+  />
+);

packages/marquee/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@repo/marquee",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@repo/shadcn-ui": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-fast-marquee": "^1.6.5"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}

packages/marquee/registry.ts

@@ -0,0 +1,25 @@
+import type { Registry } from '@repo/shadcn-ui';
+
+/*
+ * As shadcn/ui custom registry components are undocumented, here are some notes:
+ *
+ * - `registryDependencies` is an array of shadcn/ui component names that this component depends on.
+ * - `dependencies` is an array of npm package names that this component depends on.
+ * - `devDependencies` is an array of npm package names that this component depends on.
+ */
+
+export const ui: Registry = [
+  {
+    name: 'marquee',
+    type: 'registry:ui',
+    registryDependencies: [],
+    dependencies: ['react-fast-marquee'],
+    devDependencies: [],
+    files: [
+      {
+        path: 'index.tsx',
+        type: 'registry:ui',
+      },
+    ],
+  },
+];

packages/marquee/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@repo/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}