@k8slens/lds-carousel 0.23.0 → 0.24.0

package/README.md

@@ -1,14 +1,22 @@
-# Lens Design System – React Carousel component
+# @k8slens/lds-carousel
 
-## Documentation
-Browse the documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/carousel).
+Carousel component for the Lens Design System – auto-playing slide carousel with dot navigation.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-carousel @k8slens/lds-tokens
+```
+
+## Setup
 
-## Usage in React apps
-- run `npm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-carousel`
-- import `@k8slens/lds-tokens/lib/es/font-imports.css` in your React app to include fonts
-- import `@k8slens/lds/lib/es/index.css` in your React app to include core styles
-- import `@k8slens/lds-carousel/lib/es/index.css` in your React app to include Carousel styles
-- Use in a component:
+```tsx
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
+import "@k8slens/lds/lib/es/index.css";
+import "@k8slens/lds-carousel/lib/es/index.css";
+```
+
+## Usage
 
 ```tsx
 import Carousel from "@k8slens/lds-carousel";
@@ -22,9 +30,12 @@ export const Component = () => (
 );
 ```
 
-### Autoplay first slide when it's a video
+### Video Autoplay
+
+To autoplay a video on the first slide:
+
 ```tsx
-import Carousel from "@k8slens/lds-carousel";
+import { Carousel } from "@k8slens/lds-carousel";
 
 export const Component = () => {
   const videoRef = React.useRef<HTMLVideoElement>(null);
@@ -34,19 +45,17 @@ export const Component = () => {
 
   useEffect(() => {
     if (videoRef?.current && playing && !isVideoPlaying) {
-      videoRef.current.play().catch((e) => {
-        console.log(e);
-      });
+      videoRef.current.play().catch(console.log);
     }
   }, [videoRef, playing, isVideoPlaying]);
 
   return (
-    <Carousel>
+    <Carousel isVideoPlaying={isVideoPlaying} setVideoPlaying={setVideoPlaying}>
       <video
-        key="video-1" // Key needs to include the word "video"
+        key="video-1" // Key must include "video"
         ref={videoRef}
         autoPlay={playing}
-        src="src"
+        src="video.mp4"
         muted // Mute video to avoid autoplay issues
         onPlay={() => setIsVideoPlaying(true)}
         onPause={() => setIsVideoPlaying(false)}
@@ -57,5 +66,19 @@ export const Component = () => {
       <img src="src" alt="Alt text" />
     </Carousel>
   );
-}
-```
+};
+```
+
+## Documentation
+
+Browse examples at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/carousel).
+
+## AI Assistance
+
+This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `AGENTS.md` or `CLAUDE.md`):
+
+```markdown
+Read node_modules/@k8slens/lds-carousel/llms.txt for carousel API reference.
+
+Use the LDS Carousel component instead of custom implementations.
+```

package/llms.txt

@@ -0,0 +1,68 @@
+# @k8slens/lds-carousel
+
+> Carousel component for the Lens Design System - auto-playing slide carousel with dot navigation.
+
+Built on Embla Carousel with autoplay support.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-carousel @k8slens/lds-tokens
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom clsx
+```
+
+## Setup
+
+Import required styles in your app entry point:
+
+```tsx
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
+import "@k8slens/lds/lib/es/index.css";
+import "@k8slens/lds-carousel/lib/es/index.css";
+```
+
+## Usage
+
+```tsx
+import { Carousel } from "@k8slens/lds-carousel";
+
+<Carousel>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</Carousel>
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isVideoPlaying` | `boolean` | Control video autoplay state |
+| `setVideoPlaying` | `(playing: boolean) => void` | Callback for video state changes |
+| `className` | `string` | Additional CSS classes |
+| `children` | `ReactNode` | Slide content |
+
+## Features
+
+- Auto-advances every 8 seconds
+- Loop navigation
+- Dot indicators
+- Stops on user interaction
+- Video autoplay integration
+
+## Dependencies
+
+This package depends on `@k8slens/lds` core components and Embla Carousel.
+
+## Documentation
+
+- [Lens Design System](https://lens-design-system.k8slens.dev/)
+
+## Optional
+
+- [npm Package](https://www.npmjs.com/package/@k8slens/lds-carousel)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-carousel",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Lens Design System – React Carousel component",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -15,7 +15,8 @@
   "types": "./lib/es/index.d.ts",
   "type": "module",
   "files": [
-    "lib/"
+    "lib/",
+    "llms.txt"
   ],
   "scripts": {
     "start": "npm run rollup-watch",
@@ -23,16 +24,16 @@
     "rollup-watch": "rollup -c --watch --waitForBundleInput",
     "rollup": "rollup -c",
     "clean": "rimraf lib",
-    "lint": "eslint .",
-    "format": "eslint --fix ."
+    "lint": "oxlint .",
+    "format": "oxlint --fix . && prettier --write ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.57.0",
+    "@k8slens/lds": "^0.58.0",
     "embla-carousel-autoplay": "8.0.0-rc11",
     "embla-carousel-react": "8.0.0-rc11"
   },
   "devDependencies": {
-    "@k8slens/lds-tokens": "^0.58.0",
+    "@k8slens/lds-tokens": "^0.59.0",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0",
@@ -55,5 +56,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "dc375594fe63bf08745b6cfa09c4dc8437a4dc03"
+  "gitHead": "e41693e45edd36a94e34ab286d4ededba24f5daf"
 }