specra 0.2.1 → 0.2.3

package/dist/components/docs/Step.svelte

@@ -9,7 +9,7 @@
   let { title, children }: Props = $props();
 </script>
 
-<div class="step-item relative pl-8 pb-6 border-l-2 border-border last:border-l-0 last:pb-0">
+<div class="step-item relative pl-8 pb-8 border-l-2 border-border last:border-l-0 last:pb-0">
   <div class="mb-2">
     <h3 class="text-lg font-semibold text-foreground">{title}</h3>
   </div>
@@ -27,7 +27,8 @@
   .step-item::before {
     content: counter(step);
     position: absolute;
-    left: 0;
+    top: 0;
+    left: -1px;
     transform: translateX(-50%);
     width: 2rem;
     height: 2rem;
@@ -38,7 +39,7 @@
     font-size: 0.875rem;
     font-weight: 600;
     z-index: 10;
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
+    background: var(--primary);
+    color: var(--primary-foreground);
   }
 </style>

package/dist/components/docs/Steps.svelte

@@ -8,7 +8,7 @@
   let { children }: Props = $props();
 </script>
 
-<div class="my-6 ml-4 space-y-6" style="counter-reset: step;">
+<div class="my-6 ml-4" style="counter-reset: step;">
   {#if children}
     {@render children()}
   {/if}

package/dist/components/docs/Timeline.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<div class="my-6 ml-4" style="counter-reset: timeline-step;">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/docs/Timeline.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/docs/TimelineItem.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    date?: string;
+    icon?: string;
+    children?: Snippet;
+  }
+
+  let { title, date, icon, children }: Props = $props();
+</script>
+
+<div class="timeline-item relative pl-8 pb-8 border-l-2 border-border last:border-l-0 last:pb-0">
+  <div class="mb-2">
+    <h3 class="text-lg font-semibold text-foreground">{title}</h3>
+    {#if date}
+      <span class="text-sm text-muted-foreground">{date}</span>
+    {/if}
+  </div>
+  <div class="prose prose-sm dark:prose-invert max-w-none [&>*:last-child]:mb-0">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .timeline-item {
+    counter-increment: timeline-step;
+  }
+  .timeline-item::before {
+    content: counter(timeline-step);
+    position: absolute;
+    top: 0;
+    left: -1px;
+    transform: translateX(-50%);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    z-index: 10;
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
+</style>

package/dist/components/docs/TimelineItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    date?: string;
+    icon?: string;
+    children?: Snippet;
+}
+declare const TimelineItem: import("svelte").Component<Props, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/components/docs/componentTextProps.js

@@ -24,6 +24,8 @@ export const COMPONENT_TEXT_PROPS = {
     CodeBlock: ["filename"],
     // Step components
     Step: ["title"],
+    // Timeline components
+    TimelineItem: ["title", "date"],
 };
 export function extractComponentPropsText(mdx) {
     return mdx.replace(/<([A-Z][\w]*)\b([^/>]*)\/>/g, (_, component, props) => {

package/dist/components/docs/index.d.ts

@@ -46,6 +46,8 @@ export { default as Steps } from './Steps.svelte';
 export { default as Tab } from './Tab.svelte';
 export { default as TabGroups } from './TabGroups.svelte';
 export { default as TableOfContents } from './TableOfContents.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as TimelineItem } from './TimelineItem.svelte';
 export { default as Tabs } from './Tabs.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
 export { default as Tooltip } from './Tooltip.svelte';

package/dist/components/docs/index.js

@@ -47,6 +47,8 @@ export { default as Steps } from './Steps.svelte';
 export { default as Tab } from './Tab.svelte';
 export { default as TabGroups } from './TabGroups.svelte';
 export { default as TableOfContents } from './TableOfContents.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as TimelineItem } from './TimelineItem.svelte';
 export { default as Tabs } from './Tabs.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
 export { default as Tooltip } from './Tooltip.svelte';

package/dist/mdx-components.js

@@ -13,9 +13,9 @@
  * <Callout type="info">This is a callout</Callout>
  * ```
  */
-import { Callout, Accordion, AccordionItem, Tabs, Tab, Image, Video, Card, CardGrid, ImageCard, ImageCardGrid, Steps, Step, Icon, Mermaid, Math, Columns, Column, DocBadge, Tooltip, Frame, CodeBlock, ApiEndpoint, ApiParams, ApiResponse, ApiPlayground, ApiReference, } from './components/docs';
+import { Callout, Accordion, AccordionItem, Tabs, Tab, Image, Video, Card, CardGrid, ImageCard, ImageCardGrid, Steps, Step, Icon, Mermaid, Math, Columns, Column, DocBadge, Tooltip, Frame, CodeBlock, Timeline, TimelineItem, ApiEndpoint, ApiParams, ApiResponse, ApiPlayground, ApiReference, } from './components/docs';
 // Re-export all MDX-usable components
-export { Callout, Accordion, AccordionItem, Tabs, Tab, Image, Video, Card, CardGrid, ImageCard, ImageCardGrid, Steps, Step, Icon, Mermaid, Math, Columns, Column, DocBadge, Tooltip, Frame, CodeBlock, ApiEndpoint, ApiParams, ApiResponse, ApiPlayground, ApiReference, };
+export { Callout, Accordion, AccordionItem, Tabs, Tab, Image, Video, Card, CardGrid, ImageCard, ImageCardGrid, Steps, Step, Icon, Mermaid, Math, Columns, Column, DocBadge, Tooltip, Frame, CodeBlock, Timeline, TimelineItem, ApiEndpoint, ApiParams, ApiResponse, ApiPlayground, ApiReference, };
 /**
  * Component map for passing to layout components that render MDX content.
  */
@@ -43,6 +43,8 @@ export const mdxComponents = {
     Tooltip,
     Frame,
     CodeBlock,
+    Timeline,
+    TimelineItem,
     ApiEndpoint,
     ApiParams,
     ApiResponse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specra",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A modern documentation library for SvelteKit with built-in versioning, API reference generation, full-text search, and MDX support",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",