astro-better-steps 0.1.0

package/README.md

@@ -0,0 +1,57 @@
+# astro-better-steps
+
+Numbered step-by-step component for Astro. Wraps an ordered list with auto-numbered circular badges and a vertical connector line between steps. No Tailwind required.
+
+## Installation
+
+```
+npm install astro-better-steps
+```
+
+Import the stylesheet once in your root layout:
+
+```astro
+---
+import 'astro-better-steps/style.css';
+---
+```
+
+## Usage
+
+Wrap any `<ol>` with `<Steps>`. The component uses CSS counters to number each `<li>` automatically.
+
+```astro
+---
+import { Steps } from 'astro-better-steps';
+---
+
+<Steps>
+  <ol>
+    <li>Install the dependencies.</li>
+    <li>Configure your environment variables.</li>
+    <li>Start the development server.</li>
+  </ol>
+</Steps>
+```
+
+Each `<li>` can contain any content including headings, code blocks, and nested lists.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | `''` | Extra CSS classes on the wrapper element |
+
+## Dark mode
+
+The stylesheet uses a `.dark` ancestor class (compatible with Tailwind's `darkMode: 'class'`). When `.dark` is present on `<html>` or any ancestor, the step badges switch to indigo dark mode colors.
+
+No `@media (prefers-color-scheme: dark)` rules are included. If your project needs OS-based dark mode without a class toggle, add this to your project CSS:
+
+```css
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]) {
+    /* .dark rules are applied by JS in most Tailwind setups */
+  }
+}
+```

package/Steps.astro

@@ -0,0 +1,9 @@
+---
+export interface Props {
+  class?: string;
+}
+const { class: className } = Astro.props;
+---
+<div class:list={['steps-container', className]}>
+  <slot />
+</div>

package/index.js

@@ -0,0 +1 @@
+export { default as Steps } from './Steps.astro';

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "astro-better-steps",
+  "version": "0.1.0",
+  "description": "Numbered step-by-step component for Astro",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./style.css": "./style.css",
+    "./Steps.astro": "./Steps.astro"
+  },
+  "files": [
+    "*.js",
+    "*.astro",
+    "*.css"
+  ],
+  "keywords": ["astro", "steps", "numbered", "tutorial"],
+  "license": "MIT"
+}

package/style.css

@@ -0,0 +1,65 @@
+/*
+  astro-better-steps/style.css
+  Dark mode: .dark ancestor class (Tailwind darkMode: 'class' compatible).
+*/
+
+.steps-container ol {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+  counter-reset: step;
+}
+
+.steps-container ol > li {
+  position: relative;
+  padding-left: 3rem;
+  padding-bottom: 2rem;
+  min-height: 2rem;
+  counter-increment: step;
+}
+
+/* numbered circle */
+.steps-container ol > li::before {
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid #c7d2fe;
+  background-color: #eef2ff;
+  color: #1e1b4b;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* vertical connector line */
+.steps-container ol > li::after {
+  content: '';
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.9375rem;
+  top: 2.5rem;
+  width: 1px;
+  background-color: #c7d2fe;
+}
+
+.steps-container ol > li:last-child::after {
+  display: none;
+}
+
+/* dark mode */
+.dark .steps-container ol > li::before {
+  border-color: #3730a3;
+  background-color: #312e81;
+  color: #e0e7ff;
+}
+
+.dark .steps-container ol > li::after {
+  background-color: #3730a3;
+}