@troshab/slidev-theme-troshab 0.1.0

package/example_slides/018-columns-four.md

@@ -0,0 +1,22 @@
+---
+layout: slide
+cols: 4
+---
+
+# Four Columns
+
+::col1::
+
+<Metric value="99.9%" label="Uptime" color="primary" variant="bare" size="sm" />
+
+::col2::
+
+<Metric value="< 50ms" label="Latency" color="success" variant="bare" size="sm" />
+
+::col3::
+
+<Metric value="1M+" label="Users" color="info" variant="bare" size="sm" />
+
+::col4::
+
+<Metric value="4.9/5" label="Rating" color="warning" variant="bare" size="sm" />

package/example_slides/019-columns-alignment.md

@@ -0,0 +1,23 @@
+---
+layout: slide
+cols: 2
+items: bottom
+---
+
+# Vertical Alignment
+
+::col1::
+
+### Short Content
+
+This column has less text.
+
+::col2::
+
+### Tall Content
+
+This column has more text to demonstrate bottom alignment.
+
+The `items: bottom` prop aligns both columns to the bottom edge.
+
+Other values: `top` (default), `center`, `bottom`

package/example_slides/020-columns-styled.md

@@ -0,0 +1,21 @@
+---
+layout: slide
+cols: 2
+gap: '4'
+colBg: ['primary', 'soft']
+colBorder: [true, true]
+---
+
+# Styled Columns
+
+::col1::
+
+### Highlighted
+
+`colBg` accepts semantic color names per column.
+
+::col2::
+
+### Standard
+
+`colBorder` adds a subtle border around each column.

package/example_slides/021-footnote-prop.md

@@ -0,0 +1,16 @@
+---
+layout: slide
+footnote: true
+---
+
+# Research Findings
+
+Key findings from our Q4 analysis:
+
+- User retention increased 23% after onboarding redesign
+- Mobile sessions grew 45% quarter-over-quarter
+- Average session duration: 12 minutes (up from 8)
+
+::footer::
+
+Source: Internal Analytics Dashboard, Q4 2024. Sample size: 50,000 users.

package/example_slides/022-iframe-fullscreen.md

@@ -0,0 +1,8 @@
+---
+layout: slide
+mode: fullscreen
+padding: false
+---
+
+::bg::
+<Iframe src="https://sli.dev/" />

package/example_slides/023-iframe-split.md

@@ -0,0 +1,18 @@
+---
+layout: slide
+mode: split
+split: [7, 5]
+---
+
+::left-bg::
+<Iframe src="https://sli.dev/" />
+
+::right::
+
+## Live Embed
+
+Iframes in background slots auto-fill the panel.
+
+In content slots, use the `height` prop:
+
+`<Iframe src="..." height="400px" />`

package/example_slides/024-section-components.md

@@ -0,0 +1,14 @@
+---
+layout: slide
+mode: fullscreen
+transition: fade
+---
+
+::bg::
+<Background :gradient="'subtle'" />
+
+::default::
+
+# Components
+
+13 primitives + 27 widgets for every presentation need

package/example_slides/025-styled-text.md

@@ -0,0 +1,9 @@
+---
+layout: slide
+mode: fullscreen
+---
+
+<StyledText tag="h1" align="center" color="primary">Header Level 1</StyledText>
+<StyledText tag="h2" align="center">Header Level 2</StyledText>
+<StyledText align="center" color="secondary">Subheader for secondary context</StyledText>
+<StyledText align="center" color="tertiary">Subheader with tertiary color</StyledText>

package/example_slides/026-styled-text.md

@@ -0,0 +1,15 @@
+---
+layout: slide
+---
+
+# StyledText Component
+
+<StyledText size="large" color="primary">Large primary text for emphasis</StyledText>
+
+<StyledText color="secondary">Secondary text for supporting details</StyledText>
+
+<StyledText size="small" color="tertiary">Small tertiary text for captions and labels</StyledText>
+
+<StyledText align="center" color="success">Centered success message</StyledText>
+
+**Props:** `color`, `size` (small / base / large), `align` (left / center / right)

package/example_slides/027-text-formatting.md

@@ -0,0 +1,28 @@
+---
+layout: slide
+cols: 2
+---
+
+# Text Formatting
+
+::col1::
+
+### Inline Styles
+
+<div><StyledText inline bold>Bold text</StyledText> - emphasis</div>
+<div><StyledText inline italic>Italic text</StyledText> - terms</div>
+<div><StyledText inline underline>Underlined</StyledText> - links</div>
+<div><StyledText inline strike>Strikethrough</StyledText> - removed</div>
+<div><StyledText inline mono>monospace</StyledText> - code</div>
+<div><StyledText inline kbd>Ctrl+S</StyledText> - shortcut</div>
+
+::col2::
+
+### Colors + Effects
+
+<div><StyledText inline bold color="primary">Primary bold</StyledText></div>
+<div><StyledText inline bold color="danger">Danger bold</StyledText></div>
+<div><StyledText inline highlight="warning">Warning highlight</StyledText></div>
+<div><StyledText inline highlight="success">Success highlight</StyledText></div>
+<div><StyledText inline gradient>Gradient text</StyledText></div>
+<div><StyledText inline uppercase bold size="small">Label text</StyledText></div>

package/example_slides/028-text-spoiler.md

@@ -0,0 +1,15 @@
+---
+layout: slide
+---
+
+# Text: Spoiler + Color Combos
+
+### Interactive Spoiler
+
+Click to reveal: <StyledText inline spoiler>Hidden answer that appears on click</StyledText>
+
+### Color Combinations
+
+<div><StyledText inline bold color="primary" highlight="info">Primary on info highlight</StyledText></div>
+<div><StyledText inline bold color="danger" underline>Danger underlined</StyledText> <StyledText inline italic color="success">Success italic</StyledText></div>
+<div><StyledText inline mono color="warning">warning_code</StyledText> <StyledText inline kbd>Esc</StyledText> + <StyledText inline kbd>Shift</StyledText> + <StyledText inline kbd>P</StyledText></div>

package/example_slides/029-icon-component.md

@@ -0,0 +1,47 @@
+---
+layout: slide
+cols: 3
+gap: '2'
+---
+
+# Icon Component
+
+::col1::
+
+#### Sizes
+
+<StyledList marker="none">
+
+- <Icon name="ph-star" size="sm" /> sm
+- <Icon name="ph-star" size="md" /> md
+- <Icon name="ph-star" size="lg" /> lg
+- <Icon name="ph-star" size="xl" /> xl
+
+</StyledList>
+
+::col2::
+
+#### Weights
+
+<StyledList marker="none">
+
+- <Icon name="ph-heart" size="lg" /> regular
+- <Icon name="ph-heart-bold" size="lg" /> bold
+- <Icon name="ph-heart-fill" size="lg" /> fill
+- <Icon name="ph-heart-duotone" size="lg" /> duotone
+
+</StyledList>
+
+::col3::
+
+#### Semantic Colors
+
+<StyledList marker="none">
+
+- <Icon name="ph-check-circle-fill" size="lg" color="success" /> success
+- <Icon name="ph-warning-fill" size="lg" color="warning" /> warning
+- <Icon name="ph-x-circle-fill" size="lg" color="danger" /> danger
+- <Icon name="ph-info-fill" size="lg" color="info" /> info
+- <Icon name="ph-star-fill" size="lg" color="primary" /> primary
+
+</StyledList>

package/example_slides/030-metric-component.md

@@ -0,0 +1,29 @@
+---
+layout: slide
+cols: 3
+gap: '4'
+---
+
+# Metric Component
+
+::col1::
+
+<Metric :value="10000" label="Users" color="primary" animated separator="," size="md" variant="bare" />
+
+Animated count-up from 0
+
+::col2::
+
+<Metric value="$2.5M" label="Revenue" color="success" gradient size="md" variant="bare" />
+
+Gradient text (static)
+
+::col3::
+
+<Metric :value="99.99" label="Uptime %" color="info" animated suffix="%" :decimals="2" :from="95" size="md" variant="bare">
+  <template #icon>
+    <Icon name="ph-chart-line-up-bold" size="lg" color="info" />
+  </template>
+</Metric>
+
+Count-up from 95 with icon

package/example_slides/031-person-card.md

@@ -0,0 +1,33 @@
+---
+layout: slide
+cols: 3
+gap: '4'
+---
+
+# PersonCard Component
+
+::col1::
+
+<PersonCard name="Sarah Chen" role="CTO" color="primary" />
+
+### Default (vertical)
+
+Auto-generates initials from name
+
+::col2::
+
+<PersonCard name="Alex Kim" role="Lead Engineer" avatar="https://picsum.photos/seed/alex/200/200" color="info" horizontal />
+
+### Horizontal
+
+With avatar image
+
+::col3::
+
+<PersonCard name="Maria Lopez" role="Designer" color="accent">
+
+Vue, Figma, Design Systems
+
+</PersonCard>
+
+### With slot content

package/example_slides/032-styled-list.md

@@ -0,0 +1,50 @@
+---
+layout: slide
+cols: 2
+---
+
+# StyledList Component
+
+::col1::
+
+### Markers
+
+<StyledList marker="check" color="success">
+
+- Completed task one
+- Completed task two
+
+</StyledList>
+
+<StyledList marker="arrow" color="primary">
+
+- Next step one
+- Next step two
+
+</StyledList>
+
+<StyledList marker="star" color="warning">
+
+- Highlight one
+- Highlight two
+
+</StyledList>
+
+::col2::
+
+### Options
+
+<StyledList marker="number" color="info">
+
+- First item
+- Second item
+- Third item
+
+</StyledList>
+
+<StyledList marker="disc" columns="2">
+
+- Alpha
+- Beta
+
+</StyledList>

package/example_slides/033-color-swatch.md

@@ -0,0 +1,35 @@
+---
+layout: slide
+cols: 4
+gap: '2'
+---
+
+# Color Palette
+
+::col1::
+
+<ColorSwatch name="primary" />
+<ColorSwatch name="success" />
+<ColorSwatch name="bg" />
+
+::col2::
+
+<ColorSwatch name="warning" />
+<ColorSwatch name="danger" />
+<ColorSwatch name="bg-soft" />
+
+::col3::
+
+<ColorSwatch name="info" />
+<ColorSwatch name="accent" />
+<ColorSwatch name="bg-muted" />
+
+::col4::
+
+<ColorSwatch name="text" />
+<ColorSwatch name="text-secondary" />
+<ColorSwatch name="border" />
+
+::footer::
+
+Runtime-resolved CSS variables. Auto-updates on theme toggle.

package/example_slides/034-code-highlight.md

@@ -0,0 +1,9 @@
+---
+layout: slide
+---
+
+# CodeHighlight Component
+
+<CodeHighlight :code="'interface User {\n  id: string;\n  name: string;\n  role: string;\n}\n\nfunction getUser(id: string): User {\n  return db.findById(id);\n}'" filename="types.ts" lang="TypeScript" :highlights="[1, 5]" highlightColor="primary" />
+
+**Props:** `code`, `filename`, `lang`, `showLineNumbers`, `highlights`, `highlightColor`

package/example_slides/035-iframe-component.md

@@ -0,0 +1,9 @@
+---
+layout: slide
+---
+
+# Iframe in Content
+
+Use `height` prop for inline iframes (bg slot iframes auto-fill):
+
+<Iframe src="https://sli.dev/" height="315px" />

package/example_slides/036-callout.md

@@ -0,0 +1,15 @@
+---
+layout: slide
+---
+
+# Callout Component
+
+<Callout type="info" title="Information">
+Use callouts to highlight important details in your presentation.
+</Callout>
+
+<Callout type="tip" title="Pro Tip">
+Tips help users with best practices and shortcuts.
+</Callout>
+
+**Types:** `info`, `tip`, `warning`, `danger`, `note`

package/example_slides/037-card-grid.md

@@ -0,0 +1,27 @@
+---
+layout: slide
+cols: 2
+---
+
+## Card + CardGrid
+
+::col1::
+
+<CardGrid cols="2" gap="sm">
+  <Card title="Fast" icon="ph-lightning-fill">
+    Vite-powered builds
+  </Card>
+  <Card title="Secure" icon="ph-shield-check-fill">
+    Built-in security
+  </Card>
+</CardGrid>
+
+::col2::
+
+### Features
+
+- 2, 3, or 4 column grids
+- Gap sizes: sm, md, lg
+- Icon prop (Phosphor names)
+- Hover effects
+- Dark mode support

package/example_slides/038-stepper-variants.md

@@ -0,0 +1,18 @@
+---
+layout: slide
+cols: '3-9'
+items: top
+---
+
+# Stepper Variants
+
+::col1::
+### Dots
+<Stepper :items="['Research', 'Design', 'Build']" variant="dots" direction="vertical" :current="2" color="info" />
+
+::col2::
+### Numbers
+<Stepper :items="['Plan', 'Code', 'Test', 'Ship']" variant="numbers" :current="3" color="primary" />
+
+### Arrows
+<Stepper :items="['Start', 'Process', 'End']" variant="arrows" :current="2" color="success" />

package/example_slides/039-stepper-clicks.md

@@ -0,0 +1,49 @@
+---
+layout: slide
+---
+
+# Stepper: Clicks Mode
+
+<Stepper
+  :items="[
+    { label: 'Founded', date: '2020' },
+    { label: 'Series A', date: '2021' },
+    { label: 'Scale', date: '2022' },
+    { label: 'IPO', date: '2023' },
+  ]"
+  variant="numbers"
+  direction="vertical"
+  mode="clicks"
+  color="primary"
+  trackValign="top"
+  contentValign="top"
+>
+  <template #step1>
+
+### The Beginning
+
+Started in a garage with just an idea and a bold vision for the future of developer tools
+
+  </template>
+  <template #step2>
+
+### Growth Phase
+
+Raised $5M in Series A funding to accelerate product development and expand the team
+
+  </template>
+  <template #step3>
+
+### Going Global
+
+Grew to 100+ employees across three continents with offices in SF, London, and Tokyo
+
+  </template>
+  <template #step4>
+
+### Public Company
+
+Went public on NASDAQ with $2B valuation, serving 50K+ enterprise customers worldwide
+
+  </template>
+</Stepper>

package/example_slides/040-stepper-interactive.md

@@ -0,0 +1,28 @@
+---
+layout: slide
+---
+
+# Stepper: Interactive Panels
+
+<Stepper :items="['Research', 'Design', 'Develop', 'Launch']" variant="arrows" mode="clicks" color="primary">
+  <template #step1>
+
+Gather requirements and analyze user needs
+
+  </template>
+  <template #step2>
+
+Create wireframes and visual prototypes
+
+  </template>
+  <template #step3>
+
+Build features and write tests
+
+  </template>
+  <template #step4>
+
+Deploy to production and monitor
+
+  </template>
+</Stepper>

package/example_slides/041-tags-progress.md

@@ -0,0 +1,21 @@
+---
+layout: slide
+cols: 2
+---
+
+# Tags + Progress
+
+::col1::
+### Tags
+<Tags :items="['Vue 3', 'TypeScript', 'Slidev', 'UnoCSS']" />
+
+<Tags :items="['Frontend', 'Backend']" color="success" />
+
+<Tags :items="['v2.0', 'stable']" color="info" />
+
+::col2::
+### Progress Bar
+
+<Progress value="90" showPercentage />
+
+Tracks your position in the deck automatically.

package/example_slides/042-speech-bubble.md

@@ -0,0 +1,30 @@
+---
+layout: slide
+cols: 2
+---
+
+# SpeechBubble Component
+
+::col1::
+
+### Speech Bubbles
+
+<SpeechBubble position="bottom">
+Hello! I'm a speech bubble.
+</SpeechBubble>
+
+<SpeechBubble position="right" color="info">
+I point to the right
+</SpeechBubble>
+
+::col2::
+
+### Thought Bubbles
+
+<SpeechBubble shape="thought" position="bottom">
+Hmm, interesting idea...
+</SpeechBubble>
+
+<SpeechBubble shape="thought" color="success">
+Great success!
+</SpeechBubble>

package/example_slides/043-conversation.md

@@ -0,0 +1,13 @@
+---
+layout: slide
+---
+
+# Conversation Component
+
+<Conversation :messages="[
+  { from: 'Alice', text: 'Have you tried the new theme?' },
+  { from: 'Alice', text: 'Should we use it for the keynote?' },
+  { from: 'Bob', text: 'Yes! The dark mode looks great.' },
+  { from: 'Bob', text: 'Yes! The dark mode looks great.' },
+  { from: 'Alice', text: 'Should we use it for the keynote?' },
+]" mode="clicks" />

package/example_slides/044-device-iphone.md

@@ -0,0 +1,26 @@
+---
+layout: slide
+mode: split
+split: [5, 7]
+---
+
+::left::
+
+## DeviceMockup
+
+<StyledText color="secondary">
+
+CSS-only device frame with image or placeholder
+
+</StyledText>
+
+<StyledList marker="check" color="success">
+
+- Realistic bezels and notch
+- Auto-scales via `scale` prop
+- `image` prop or slot content
+
+</StyledList>
+
+::right::
+<DeviceMockup device="iphone" image="https://www.letemsvetemapplem.eu/wp-content/uploads/2025/03/iOS-19-1.png" :scale="0.7" />

package/example_slides/045-device-browser.md

@@ -0,0 +1,7 @@
+---
+layout: slide
+---
+
+# Device Mockup: Browser
+
+<DeviceMockup device="browser" url="https://sli.dev" title="Slidev" :scale="0.85" placeholder="Presentation slides for developers. Write in Markdown, style with CSS, present with confidence." />