├── .npmrc ├── packages ├── svelte │ ├── src │ │ └── index.ts │ ├── tsup.config.ts │ ├── tsconfig.json │ ├── package.json │ └── CHANGELOG.md ├── core │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── package.json │ └── CHANGELOG.md ├── solid │ ├── src │ │ ├── index.ts │ │ ├── types.ts │ │ └── define-stepper.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── package.json │ ├── README.md │ └── CHANGELOG.md ├── react │ ├── vite.config.ts │ ├── src │ │ ├── index.ts │ │ ├── types.ts │ │ └── define-stepper.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── package.json │ └── README.md └── vue │ ├── src │ ├── index.ts │ ├── components.ts │ ├── types.ts │ └── define-stepper.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── package.json │ └── README.md ├── apps └── docs │ ├── lib │ ├── cn.ts │ ├── utils.ts │ ├── is-active.ts │ ├── source.ts │ ├── metadata.ts │ └── use-copy-button.ts │ ├── content │ └── docs │ │ ├── meta.json │ │ ├── svelte │ │ ├── meta.json │ │ └── index.mdx │ │ ├── solid │ │ ├── meta.json │ │ ├── installation.mdx │ │ ├── index.mdx │ │ └── api-references │ │ │ ├── define.mdx │ │ │ └── utils.mdx │ │ ├── vue │ │ ├── meta.json │ │ ├── installation.mdx │ │ ├── migration │ │ │ └── migrating-to-v2.mdx │ │ ├── index.mdx │ │ └── api-references │ │ │ ├── define.mdx │ │ │ └── utils.mdx │ │ └── react │ │ ├── examples │ │ ├── conform-react.mdx │ │ ├── react-hook-form.mdx │ │ ├── scoped.mdx │ │ ├── multi-scoped.mdx │ │ └── basic.mdx │ │ ├── shadcn │ │ ├── introduction.mdx │ │ └── examples.mdx │ │ ├── migration │ │ ├── migrating-to-v5.mdx │ │ ├── migrating-to-v3.mdx │ │ └── migrating-to-v2.mdx │ │ ├── installation.mdx │ │ ├── meta.json │ │ ├── index.mdx │ │ └── api-references │ │ ├── define.mdx │ │ ├── scoped.mdx │ │ ├── schema-validation.mdx │ │ └── utils.mdx │ ├── app │ ├── icon.png │ ├── apple-icon.png │ ├── og │ │ └── [...slug] │ │ │ ├── JetBrainsMono-Bold.ttf │ │ │ ├── JetBrainsMono-Regular.ttf │ │ │ ├── route.tsx │ │ │ └── og.tsx │ ├── robots.txt │ ├── api │ │ └── search │ │ │ └── route.ts │ ├── (home) │ │ ├── layout.tsx │ │ └── page.tsx │ ├── sitemap.ts │ ├── favicon.svg │ ├── layout.tsx │ ├── layout.config.tsx │ └── docs │ │ ├── layout.tsx │ │ └── [[...slug]] │ │ └── page.tsx │ ├── postcss.config.mjs │ ├── public │ └── banner.png │ ├── cli.json │ ├── components │ ├── steps.tsx │ ├── demo-viewer.tsx │ ├── ui │ │ ├── button.tsx │ │ ├── collapsible.tsx │ │ ├── popover.tsx │ │ ├── scroll-area.tsx │ │ └── tabs.tsx │ ├── heading.tsx │ ├── highlighter-code.tsx │ ├── card.tsx │ ├── callout.tsx │ ├── open-in-v0.tsx │ ├── files.tsx │ ├── layout │ │ ├── language-toggle.tsx │ │ └── root-toggle.tsx │ ├── home │ │ └── cta.tsx │ ├── accordion.tsx │ └── banner.tsx │ ├── next.config.mjs │ ├── registry │ └── new-york │ │ ├── blocks │ │ ├── stepper-demo │ │ │ ├── page.tsx │ │ │ └── components │ │ │ │ └── stepper-demo.tsx │ │ ├── stepper-with-form │ │ │ └── page.tsx │ │ ├── stepper-with-icon │ │ │ ├── page.tsx │ │ │ └── components │ │ │ │ └── stepper-with-icon.tsx │ │ ├── stepper-with-tracking │ │ │ ├── page.tsx │ │ │ └── components │ │ │ │ └── stepper-with-tracking.tsx │ │ ├── stepper-with-variants │ │ │ └── page.tsx │ │ ├── stepper-with-description │ │ │ ├── page.tsx │ │ │ └── components │ │ │ │ └── stepper-with-description.tsx │ │ ├── stepper-with-label-orientation │ │ │ ├── page.tsx │ │ │ └── components │ │ │ │ └── stepper-with-label-orientation.tsx │ │ └── stepper-with-responsive-variant │ │ │ ├── page.tsx │ │ │ ├── hooks │ │ │ └── use-media-query.ts │ │ │ └── components │ │ │ └── stepper-with-responsive-variant.tsx │ │ └── ui │ │ ├── label.tsx │ │ ├── input.tsx │ │ ├── radio-group.tsx │ │ ├── button.tsx │ │ └── form.tsx │ ├── .gitignore │ ├── components.json │ ├── source.config.ts │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── .vscode └── settings.json ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── pull_request_template.md └── workflows │ └── release.yml ├── pnpm-workspace.yaml ├── .changeset ├── config.json └── README.md ├── turbo.json ├── .gitignore ├── package.json ├── biome.json ├── CONTRIBUTING.md └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/svelte/src/index.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/lib/cn.ts: -------------------------------------------------------------------------------- 1 | export { twMerge as cn } from 'tailwind-merge'; 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/index.ts: -------------------------------------------------------------------------------- 1 | export type * from "./types"; 2 | export * from "./utils"; 3 | -------------------------------------------------------------------------------- /apps/docs/content/docs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": ["react", "solid", "svelte", "vue"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/solid/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./define-stepper"; 2 | export type * from "./types"; 3 | -------------------------------------------------------------------------------- /apps/docs/app/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damianricobelli/stepperize/HEAD/apps/docs/app/icon.png -------------------------------------------------------------------------------- /apps/docs/app/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damianricobelli/stepperize/HEAD/apps/docs/app/apple-icon.png -------------------------------------------------------------------------------- /apps/docs/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /apps/docs/public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damianricobelli/stepperize/HEAD/apps/docs/public/banner.png -------------------------------------------------------------------------------- /apps/docs/app/og/[...slug]/JetBrainsMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damianricobelli/stepperize/HEAD/apps/docs/app/og/[...slug]/JetBrainsMono-Bold.ttf -------------------------------------------------------------------------------- /apps/docs/app/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | Host: https://stepperize.vercel.app 5 | 6 | Sitemap: https://stepperize.vercel.app/sitemap.xml 7 | -------------------------------------------------------------------------------- /apps/docs/app/og/[...slug]/JetBrainsMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damianricobelli/stepperize/HEAD/apps/docs/app/og/[...slug]/JetBrainsMono-Regular.ttf -------------------------------------------------------------------------------- /apps/docs/cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "aliases": { 3 | "cn": "./lib/utils.ts", 4 | "componentsDir": "./components", 5 | "uiDir": "./components/ui", 6 | "libDir": "./lib" 7 | } 8 | } -------------------------------------------------------------------------------- /apps/docs/content/docs/svelte/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Svelte", 3 | "root": true, 4 | "description": "Stepperize for Svelte", 5 | "pages": ["---Getting Started---", "index"] 6 | } 7 | -------------------------------------------------------------------------------- /packages/react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config"; 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true, 6 | environment: "jsdom", 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /apps/docs/app/api/search/route.ts: -------------------------------------------------------------------------------- 1 | import { source } from '@/lib/source'; 2 | import { createFromSource } from 'fumadocs-core/search/server'; 3 | 4 | export const { GET } = createFromSource(source); 5 | -------------------------------------------------------------------------------- /apps/docs/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /packages/react/src/index.ts: -------------------------------------------------------------------------------- 1 | // Types 2 | export type { Step, Stepper, Get } from "@stepperize/core"; 3 | export type { StepperReturn, ScopedProps } from "./types"; 4 | // Define Stepper 5 | export * from "./define-stepper"; 6 | -------------------------------------------------------------------------------- /packages/vue/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { StepperReturn, ScopedProps } from "./types"; 2 | export type { Step, Stepper, Get } from "@stepperize/core"; 3 | 4 | export * from "./define-stepper"; 5 | export * from "./components"; 6 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # These owners will be the default owners for everything in 2 | # the repo. Unless a later match takes precedence, they will 3 | # be requested for review when someone opens a pull request. 4 | 5 | @damianricobelli 6 | -------------------------------------------------------------------------------- /apps/docs/content/docs/svelte/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: A powerful library for creating flexible Stepper components in Svelte 4 | icon: Album 5 | --- 6 | 7 | 8 | Both the documents and the Svelte package are not yet ready. 9 | 10 | -------------------------------------------------------------------------------- /apps/docs/app/(home)/layout.tsx: -------------------------------------------------------------------------------- 1 | import { baseOptions } from "@/app/layout.config"; 2 | import { HomeLayout } from "fumadocs-ui/layouts/home"; 3 | import type { ReactNode } from "react"; 4 | 5 | export default function Layout({ children }: { children: ReactNode }) { 6 | return {children}; 7 | } 8 | -------------------------------------------------------------------------------- /apps/docs/components/steps.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react'; 2 | 3 | export function Steps({ children }: { children: ReactNode }) { 4 | return
{children}
; 5 | } 6 | 7 | export function Step({ children }: { children: ReactNode }) { 8 | return
{children}
; 9 | } 10 | -------------------------------------------------------------------------------- /apps/docs/lib/is-active.ts: -------------------------------------------------------------------------------- 1 | export function isActive( 2 | url: string, 3 | pathname: string, 4 | nested = true, 5 | ): boolean { 6 | if (url.endsWith('/')) url = url.slice(0, -1); 7 | if (pathname.endsWith('/')) pathname = pathname.slice(0, -1); 8 | 9 | return url === pathname || (nested && pathname.startsWith(`${url}/`)); 10 | } 11 | -------------------------------------------------------------------------------- /apps/docs/content/docs/solid/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "React", 3 | "root": true, 4 | "description": "Stepperize for React", 5 | "pages": [ 6 | "---Getting Started---", 7 | "index", 8 | "installation", 9 | "---API References---", 10 | "api-references/define", 11 | "api-references/hook", 12 | "api-references/utils" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/svelte/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "tsup"; 2 | 3 | export default defineConfig({ 4 | entry: ["src/index.ts"], 5 | format: ["cjs", "esm"], 6 | dts: true, 7 | sourcemap: false, 8 | clean: true, 9 | minify: true, 10 | treeshake: true, 11 | external: ["react", "react-dom"], 12 | tsconfig: "tsconfig.json", 13 | }); 14 | -------------------------------------------------------------------------------- /apps/docs/next.config.mjs: -------------------------------------------------------------------------------- 1 | import { createMDX } from "fumadocs-mdx/next"; 2 | 3 | const withMDX = createMDX(); 4 | 5 | /** @type {import('next').NextConfig} */ 6 | const config = { 7 | reactStrictMode: true, 8 | serverExternalPackages: ["twoslash", "typescript"], 9 | experimental: { 10 | turbopackScopeHoisting: false 11 | } 12 | }; 13 | 14 | export default withMDX(config); 15 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "apps/*" 3 | - "packages/*" 4 | catalog: 5 | "@testing-library/jest-dom": ^6.9.1 6 | "@testing-library/react": ^16.3.0 7 | "@types/react": ^19.2.0 8 | "@types/react-dom": ^19.2.0 9 | jsdom: ^27.0.0 10 | react: ^19.2.0 11 | react-dom: ^19.2.0 12 | tsup: ^8.5.0 13 | terser: ^5.44.0 14 | typescript: ^5.9.3 15 | vitest: ^3.2.4 16 | -------------------------------------------------------------------------------- /apps/docs/components/demo-viewer.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { cva } from "class-variance-authority"; 4 | 5 | export const DemoViewer = ({ src, className }: { src: string; className?: string }) => { 6 | return