sparkdesign 0.4.9 → 0.4.10

package/cli/registry/basic/rating.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const ratingVariants = cva('inline-flex items-center gap-1', {
+  variants: {
+    size: {
+      sm: '[--rating-size:1rem]',
+      md: '[--rating-size:1.25rem]',
+      lg: '[--rating-size:1.5rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+type RatingPrecision = 1 | 0.5
+
+export interface RatingProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,
+    VariantProps<typeof ratingVariants> {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  max?: number
+  precision?: RatingPrecision
+  readOnly?: boolean
+  disabled?: boolean
+  showValue?: boolean
+  label?: string
+}
+
+function clampRating(value: number, max: number, precision: RatingPrecision) {
+  const normalized = Math.max(0, Math.min(max, value))
+  return Math.round(normalized / precision) * precision
+}
+
+function RatingStar({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 20 20"
+      className={cn('size-[var(--rating-size)]', className)}
+    >
+      <path d="M10 1.7l2.3 4.7 5.2.8-3.8 3.7.9 5.2-4.6-2.5-4.6 2.5.9-5.2-3.8-3.7 5.2-.8L10 1.7z" />
+    </svg>
+  )
+}
+
+const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      className,
+      size,
+      value,
+      defaultValue = 0,
+      onValueChange,
+      max = 5,
+      precision = 1,
+      readOnly = false,
+      disabled = false,
+      showValue = false,
+      label = 'Rating',
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue)
+    const currentValue = clampRating(value ?? internalValue, max, precision)
+    const interactive = !readOnly && !disabled
+
+    const commitValue = (nextValue: number) => {
+      const next = clampRating(nextValue, max, precision)
+      if (value == null) setInternalValue(next)
+      onValueChange?.(next)
+    }
+
+    return (
+      <div
+        ref={ref}
+        role={interactive ? 'radiogroup' : 'img'}
+        aria-label={label}
+        aria-disabled={disabled || undefined}
+        aria-readonly={readOnly || undefined}
+        aria-valuenow={!interactive ? currentValue : undefined}
+        aria-valuemax={!interactive ? max : undefined}
+        data-slot="rating"
+        data-disabled={disabled || undefined}
+        className={cn(
+          ratingVariants({ size }),
+          disabled && 'cursor-not-allowed opacity-50',
+          className
+        )}
+        {...props}
+      >
+        {Array.from({ length: max }, (_, index) => {
+          const starValue = index + 1
+          const fillRatio = Math.max(0, Math.min(1, currentValue - index))
+          const halfValue = starValue - 0.5
+          return (
+            <span
+              key={starValue}
+              className="relative inline-flex size-[var(--rating-size)] shrink-0 text-border-tertiary"
+            >
+              <RatingStar className="fill-current" />
+              <span
+                aria-hidden="true"
+                className="absolute inset-0 overflow-hidden text-warning"
+                style={{ width: `${fillRatio * 100}%` }}
+              >
+                <RatingStar className="fill-current" />
+              </span>
+              {interactive ? (
+                precision === 0.5 ? (
+                  <span className="absolute inset-0 grid grid-cols-2">
+                    <button
+                      type="button"
+                      role="radio"
+                      aria-label={`${halfValue} of ${max}`}
+                      aria-checked={currentValue === halfValue}
+                      className="cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border"
+                      onClick={() => commitValue(halfValue)}
+                    />
+                    <button
+                      type="button"
+                      role="radio"
+                      aria-label={`${starValue} of ${max}`}
+                      aria-checked={currentValue === starValue}
+                      className="cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border"
+                      onClick={() => commitValue(starValue)}
+                    />
+                  </span>
+                ) : (
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-label={`${starValue} of ${max}`}
+                    aria-checked={currentValue === starValue}
+                    className="absolute inset-0 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border"
+                    onClick={() => commitValue(starValue)}
+                  />
+                )
+              ) : null}
+            </span>
+          )
+        })}
+        {showValue ? (
+          <span className="ml-1 text-sm font-medium text-text-secondary">
+            {currentValue.toFixed(precision === 0.5 && currentValue % 1 ? 1 : 0)}
+          </span>
+        ) : null}
+      </div>
+    )
+  }
+)
+Rating.displayName = 'Rating'
+
+export { Rating, ratingVariants }
+export type { RatingPrecision }

package/cli/registry/basic/sidebar.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils"
 import { Button } from "./button"
 import { Input } from "./input"
 import { Separator } from "./separator"
-import { Sheet, SheetContent } from "./sheet"
+import { Drawer as Sheet, DrawerContent as SheetContent } from "./drawer"
 import { Skeleton } from "./skeleton"
 import { Tooltip } from "./tooltip"
 

package/cli/registry/basic/stepper.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+type StepStatus = 'complete' | 'current' | 'upcoming' | 'error'
+
+const stepperVariants = cva('group/stepper flex w-full', {
+  variants: {
+    orientation: {
+      horizontal: 'items-start',
+      vertical: 'flex-col',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})
+
+export interface StepperProps
+  extends React.OlHTMLAttributes<HTMLOListElement>,
+    VariantProps<typeof stepperVariants> {}
+
+export interface StepperItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  status?: StepStatus
+}
+
+export type StepperIndicatorProps = React.HTMLAttributes<HTMLSpanElement>
+export type StepperContentProps = React.HTMLAttributes<HTMLDivElement>
+export type StepperTitleProps = React.HTMLAttributes<HTMLDivElement>
+export type StepperDescriptionProps = React.HTMLAttributes<HTMLDivElement>
+export type StepperSeparatorProps = React.HTMLAttributes<HTMLSpanElement>
+
+function CheckIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" className="size-3.5">
+      <path
+        fill="currentColor"
+        d="M6.2 11.3 2.9 8l1-1 2.3 2.3 5-5 1 1-6 6z"
+      />
+    </svg>
+  )
+}
+
+function Stepper({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: StepperProps) {
+  return (
+    <ol
+      data-slot="stepper"
+      data-orientation={orientation}
+      className={cn(stepperVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function StepperItem({
+  className,
+  status = 'upcoming',
+  ...props
+}: StepperItemProps) {
+  return (
+    <li
+      data-slot="stepper-item"
+      data-status={status}
+      className={cn(
+        'group/stepper-item relative flex min-w-0 flex-1 gap-3',
+        'group-data-[orientation=horizontal]/stepper:flex-col group-data-[orientation=horizontal]/stepper:items-center group-data-[orientation=horizontal]/stepper:gap-2 group-data-[orientation=horizontal]/stepper:text-center',
+        'data-[status=current]:text-text data-[status=upcoming]:text-text-tertiary',
+        'data-[status=complete]:text-text data-[status=error]:text-error',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepperIndicator({ className, children, ...props }: StepperIndicatorProps) {
+  return (
+    <span
+      data-slot="stepper-indicator"
+      className={cn(
+        'z-10 flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors',
+        'border-border-tertiary bg-bg-container text-text-tertiary',
+        'group-data-[status=complete]/stepper-item:border-primary group-data-[status=complete]/stepper-item:bg-primary group-data-[status=complete]/stepper-item:text-text-on-primary',
+        'group-data-[status=current]/stepper-item:border-primary group-data-[status=current]/stepper-item:text-primary',
+        'group-data-[status=error]/stepper-item:border-error group-data-[status=error]/stepper-item:bg-error-bg group-data-[status=error]/stepper-item:text-error',
+        className
+      )}
+      {...props}
+    >
+      <span className="group-data-[status=complete]/stepper-item:hidden">
+        {children}
+      </span>
+      <span className="hidden group-data-[status=complete]/stepper-item:inline-flex">
+        <CheckIcon />
+      </span>
+    </span>
+  )
+}
+
+function StepperContent({ className, ...props }: StepperContentProps) {
+  return (
+    <div
+      data-slot="stepper-content"
+      className={cn(
+        'min-w-0 flex-1 pb-6 group-data-[orientation=horizontal]/stepper:pb-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function StepperTitle({ className, ...props }: StepperTitleProps) {
+  return (
+    <div
+      data-slot="stepper-title"
+      className={cn('text-sm font-medium leading-5 text-current', className)}
+      {...props}
+    />
+  )
+}
+
+function StepperDescription({ className, ...props }: StepperDescriptionProps) {
+  return (
+    <div
+      data-slot="stepper-description"
+      className={cn('mt-1 text-sm leading-5 text-text-tertiary', className)}
+      {...props}
+    />
+  )
+}
+
+function StepperSeparator({ className, ...props }: StepperSeparatorProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="stepper-separator"
+      className={cn(
+        'absolute left-3.5 top-7 h-[calc(100%-1.75rem)] w-px -translate-x-1/2 bg-border-tertiary',
+        'group-data-[orientation=horizontal]/stepper:left-[calc(50%+1rem)] group-data-[orientation=horizontal]/stepper:right-[calc(-50%+1rem)] group-data-[orientation=horizontal]/stepper:top-3.5 group-data-[orientation=horizontal]/stepper:h-px group-data-[orientation=horizontal]/stepper:w-auto group-data-[orientation=horizontal]/stepper:translate-x-0',
+        'group-data-[status=complete]/stepper-item:bg-primary',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Stepper,
+  StepperItem,
+  StepperIndicator,
+  StepperContent,
+  StepperTitle,
+  StepperDescription,
+  StepperSeparator,
+}
+export type { StepStatus }

package/cli/registry/basic/timeline.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const timelineMarkerVariants = cva(
+  'mt-1.5 flex size-2.5 shrink-0 rounded-full ring-4 ring-bg-base',
+  {
+    variants: {
+      tone: {
+        default: 'bg-border',
+        primary: 'bg-primary',
+        success: 'bg-success',
+        warning: 'bg-warning',
+        error: 'bg-error',
+      },
+    },
+    defaultVariants: {
+      tone: 'default',
+    },
+  }
+)
+
+export type TimelineProps = React.OlHTMLAttributes<HTMLOListElement>
+export type TimelineItemProps = React.LiHTMLAttributes<HTMLLIElement>
+export type TimelineContentProps = React.HTMLAttributes<HTMLDivElement>
+export type TimelineTitleProps = React.HTMLAttributes<HTMLDivElement>
+export type TimelineDescriptionProps = React.HTMLAttributes<HTMLDivElement>
+export type TimelineTimeProps = React.TimeHTMLAttributes<HTMLTimeElement>
+export type TimelineConnectorProps = React.HTMLAttributes<HTMLSpanElement>
+export interface TimelineMarkerProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof timelineMarkerVariants> {}
+
+function Timeline({ className, ...props }: TimelineProps) {
+  return (
+    <ol
+      data-slot="timeline"
+      className={cn('flex flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineItem({ className, ...props }: TimelineItemProps) {
+  return (
+    <li
+      data-slot="timeline-item"
+      className={cn('group/timeline-item relative grid grid-cols-[auto_minmax(0,1fr)] gap-3 pb-6 last:pb-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineMarker({ className, tone, ...props }: TimelineMarkerProps) {
+  return (
+    <span
+      data-slot="timeline-marker"
+      className={cn(timelineMarkerVariants({ tone }), className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineConnector({ className, ...props }: TimelineConnectorProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="timeline-connector"
+      className={cn(
+        'absolute left-1.5 top-5 h-[calc(100%-1.25rem)] w-px bg-border-tertiary group-last/timeline-item:hidden',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TimelineContent({ className, ...props }: TimelineContentProps) {
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn('min-w-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineTitle({ className, ...props }: TimelineTitleProps) {
+  return (
+    <div
+      data-slot="timeline-title"
+      className={cn('text-sm font-medium leading-5 text-text', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineDescription({ className, ...props }: TimelineDescriptionProps) {
+  return (
+    <div
+      data-slot="timeline-description"
+      className={cn('mt-1 text-sm leading-6 text-text-tertiary', className)}
+      {...props}
+    />
+  )
+}
+
+function TimelineTime({ className, ...props }: TimelineTimeProps) {
+  return (
+    <time
+      data-slot="timeline-time"
+      className={cn('mt-1 block text-xs leading-5 text-text-quaternary', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  TimelineConnector,
+  TimelineContent,
+  TimelineTitle,
+  TimelineDescription,
+  TimelineTime,
+  timelineMarkerVariants,
+}

package/cli/registry/chat/permission-card.tsx

@@ -103,7 +103,7 @@ export const PermissionCard = forwardRef<HTMLDivElement, PermissionCardProps>(
         <p className="mb-2 ml-6 text-xs leading-xs text-text-tertiary">
           {isLoadingIntent ? (
             <span className="inline-flex items-center gap-1.5">
-              <div className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-text-tertiary border-t-transparent" />
+              <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-text-tertiary border-t-transparent" />
               <span>{displayDescription}</span>
             </span>
           ) : (

package/cli/registry/meta.json

@@ -968,6 +968,18 @@
       "react-dom"
     ]
   },
+  "rating": {
+    "files": [
+      "basic/rating.tsx"
+    ],
+    "dependencies": [
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "reasoning-step": {
     "files": [
       "chat/reasoning-step/index.tsx",
@@ -1109,23 +1121,6 @@
       "react-dom"
     ]
   },
-  "sheet": {
-    "files": [
-      "basic/sheet.tsx",
-      "basic/drawer.tsx",
-      "basic/icons-inline.tsx",
-      "basic/theme-from-document.ts"
-    ],
-    "dependencies": [
-      "@radix-ui/react-dialog",
-      "class-variance-authority",
-      "framer-motion"
-    ],
-    "peerDependencies": [
-      "react",
-      "react-dom"
-    ]
-  },
   "shimmering-text": {
     "files": [
       "basic/shimmering-text.tsx",
@@ -1149,7 +1144,6 @@
       "basic/icons-inline.tsx",
       "basic/input.tsx",
       "basic/separator.tsx",
-      "basic/sheet.tsx",
       "basic/drawer.tsx",
       "basic/theme-from-document.ts",
       "basic/skeleton.tsx",
@@ -1211,23 +1205,22 @@
       "react-dom"
     ]
   },
-  "sonner": {
+  "spinner": {
     "files": [
-      "basic/sonner.tsx",
-      "basic/theme-from-document.ts"
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
-      "sonner"
+      "class-variance-authority"
     ],
     "peerDependencies": [
       "react",
       "react-dom"
     ]
   },
-  "spinner": {
+  "stepper": {
     "files": [
-      "basic/spinner.tsx",
-      "basic/icons-inline.tsx"
+      "basic/stepper.tsx"
     ],
     "dependencies": [
       "class-variance-authority"
@@ -1359,6 +1352,18 @@
       "react-dom"
     ]
   },
+  "timeline": {
+    "files": [
+      "basic/timeline.tsx"
+    ],
+    "dependencies": [
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "toast": {
     "files": [
       "basic/sonner.tsx",

package/dist/registry/basic/calendar.d.ts

@@ -2,7 +2,7 @@
  * [WHO]: Calendar and CalendarDayButton date grid primitives.
  * [FROM]: React, react-day-picker, registry/basic/button, registry/lib/utils.
  * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
- * [HERE]: registry/basic/calendar.tsx — tokenized shadcn-derived calendar primitive.
+ * [HERE]: registry/basic/calendar.tsx — tokenized shadcn-compatible Calendar primitive.
  *
  * [PROTOCOL]:
  * 1. Keep this P3 header in sync when the public contract changes.

package/dist/registry/basic/combobox.d.ts

@@ -18,6 +18,7 @@ export interface ComboboxOption {
 }
 export interface ComboboxProps {
     options: ComboboxOption[];
+    size?: 'default' | 'compact';
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -33,5 +34,5 @@ export interface ComboboxProps {
     name?: string;
     'aria-label'?: string;
 }
-declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, className, contentClassName, triggerClassName, align, id, name, 'aria-label': ariaLabel, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, size, disabled, className, contentClassName, triggerClassName, align, id, name, 'aria-label': ariaLabel, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 export { Combobox };

package/dist/registry/basic/date-picker.d.ts

@@ -1,8 +1,8 @@
 /**
- * [WHO]: DatePicker — Popover + Calendar composition matching shadcn parity.
+ * [WHO]: DatePicker composes a Spark trigger with the shared Calendar in a Popover.
  * [FROM]: React, date-fns, registry/basic/button, registry/basic/calendar, registry/basic/popover, registry/lib/utils.
  * [TO]: sparkdesign package consumers; output of CLI `add date-picker` when registered.
- * [HERE]: registry/basic/date-picker.tsx — Spark Design source; tokenized shadcn-compatible date picker.
+ * [HERE]: registry/basic/date-picker.tsx — Spark Design date picker source.
  *
  * [PROTOCOL]:
  * 1. Render a Button trigger that surfaces the selected date using project typography/tokens.

package/dist/registry/basic/popover.d.ts

@@ -18,6 +18,8 @@ export interface PopoverContentProps extends React.ComponentPropsWithoutRef<type
     /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
     dataStyle?: string;
     dataTheme?: string;
+    /** Popover internal padding; keep default to avoid breaking existing usages */
+    contentPadding?: 'default' | 'compact' | 'none';
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/registry/basic/rating.d.ts

@@ -0,0 +1,31 @@
+/**
+ * [WHO]: Rating component for tokenized star scoring and preference feedback.
+ * [FROM]: React, class-variance-authority, registry/lib/utils.
+ * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
+ * [HERE]: registry/basic/rating.tsx — interactive or read-only rating primitive.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const ratingVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type RatingPrecision = 1 | 0.5;
+export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, VariantProps<typeof ratingVariants> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    max?: number;
+    precision?: RatingPrecision;
+    readOnly?: boolean;
+    disabled?: boolean;
+    showValue?: boolean;
+    label?: string;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+export { Rating, ratingVariants };
+export type { RatingPrecision };

package/dist/registry/basic/stepper.d.ts

@@ -0,0 +1,36 @@
+/**
+ * [WHO]: Stepper primitives for linear setup, checkout, and workflow progress.
+ * [FROM]: React, class-variance-authority, registry/lib/utils.
+ * [TO]: sparkdesign package consumers; Showcase; CLI registry copies.
+ * [HERE]: registry/basic/stepper.tsx — tokenized horizontal/vertical stepper.
+ *
+ * [PROTOCOL]:
+ * 1. Keep this P3 header in sync when the public contract changes.
+ * 2. Update module AGENTS.md (P2) and root AGENTS.md (P1) when boundaries change.
+ * 3. Follow design tokens and explicit type exports.
+ */
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+type StepStatus = 'complete' | 'current' | 'upcoming' | 'error';
+declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement>, VariantProps<typeof stepperVariants> {
+}
+export interface StepperItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    status?: StepStatus;
+}
+export type StepperIndicatorProps = React.HTMLAttributes<HTMLSpanElement>;
+export type StepperContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type StepperTitleProps = React.HTMLAttributes<HTMLDivElement>;
+export type StepperDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export type StepperSeparatorProps = React.HTMLAttributes<HTMLSpanElement>;
+declare function Stepper({ className, orientation, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperItem({ className, status, ...props }: StepperItemProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperIndicator({ className, children, ...props }: StepperIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperContent({ className, ...props }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperTitle({ className, ...props }: StepperTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperDescription({ className, ...props }: StepperDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperSeparator({ className, ...props }: StepperSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Stepper, StepperItem, StepperIndicator, StepperContent, StepperTitle, StepperDescription, StepperSeparator, };
+export type { StepStatus };