v3.0.4 — Math Curves & Bug Fixes

What's New

Math Curve Components ✨

Three new animation components powered by parametric mathematical curves — no external animation library required:

• MathCurveLoader — animated loading spinner with curve types like Lissajous, rose, spiral, and more
• MathCurveProgress — progress bar rendered as an animated mathematical curve
• MathCurveBackground — full-bleed animated curve background for page sections

# React
npx shadcn@latest add https://boldkit.dev/r/math-curve-loader.json
npx shadcn@latest add https://boldkit.dev/r/math-curve-progress.json
npx shadcn@latest add https://boldkit.dev/r/math-curve-background.json

---

Bug Fixes

• Dropzone: Added keyboard handler (Enter/Space opens picker), WCAG focus ring, and aria-label
• Carousel: Fixed key={index} anti-pattern; aria-labels now include total slide count ("slide 1 of 5")
• Slider: Fixed key={index} on thumb elements; added dev warning when switching controlled/uncontrolled
• Gauge Chart: Replaced index-based keys with stable content-derived keys
• Sankey Chart: Removed unsafe non-null assertion (!) on Map lookup
• Tree View: Replaced node.children! with safe (node.children ?? []) guard
• Rating / Kbd: Stable string-prefixed keys instead of bare index
• SEO: JSON.stringify now guarded against circular reference crashes; structuredData type tightened to unknown
• AuthFormsDoc: Removed debug console.log calls from live preview props
• Math Curve components: Wrapped in ErrorBoundary for page-crash resilience

Infrastructure

• Resolved all 12 npm security vulnerabilities (npm audit fix)
• ESLint now covers packages/vue/**/*.vue files
• vercel.json: removed self-referential no-op rewrite rules
• package.json: added react/react-dom peer dependencies (>=18)
• packages/vue/package.json: added vue peer dependency (>=3)

Docs

• README updated with math curve components, shape builder, and corrected counts
• CONTRIBUTING.md rewritten with Vue component guide, registry system docs, and design token reference

v3.0.3 — Bug Fixes

Bug Fixes

Vue Components

• SparklineChart: Fixed crash when data prop is an empty array (Math.min/max spread on empty array)
• RadialBarChart: Fixed crash when data prop is an empty array
• GaugeChart: Fixed NaN percentage when max === min (now defaults to 50%)
• Slider: Active pointermove/pointerup document listeners are now properly removed in onUnmounted if the component is destroyed during an active drag

React Components

• Slider: Keyboard navigation timeout is now stored in a ref and cleared on unmount, preventing a potential state update on an unmounted component
• Dropzone: reset() now also clears the hidden file input's value, so re-selecting the same file correctly triggers onChange

Hooks

• use-framework: Removed redundant useEffect that re-read localStorage after the useState initializer already did, eliminating an unnecessary extra render on mount

v3.0.2 — Chart Edge Cases & Registry Fixes

Bug Fixes

React Charts

• Sparkline: Fixed area/line stroke color — was always using foreground (black) instead of the trend-aware resolvedColor
• HeatmapChart: Guard against empty data array causing Infinity in Math.min/max
• RadialBarChart: Guard against empty data array causing -Infinity in Math.max
• GaugeChart: Guard against NaN percentage when min === max
• RadarChart: Type-safe label — label.toString() on a ReactNode would render [object Object]; now falls back to key

React Components

• Marquee: Removed dead [&:hover_.marquee-content]:pause class that generated no CSS (pause is handled per-element)

Vue Components

• Marquee: Same dead selector removed
• DateRangePicker: Fixed placeholder visibility check from !selectedRange to !selectedRange?.from — an object with no from is truthy

Registry

• empty-state: Added missing empty-state entry to registry.json and registry/default/ui/ so it's installable via shadcn CLI
• Vue chart registries: Removed duplicate 'utils' entry from funnel-chart, treemap-chart, heatmap-chart, sankey-chart registry dependencies
• Regenerated all public/r/ registry JSON files

v3.0.1 — Bug Fix Release

Bug Fixes

React Components

• Stepper: Fixed orientation — horizontal/vertical layouts were rendering inverted
• Carousel: Fixed memory leak — reInit event listener not cleaned up on unmount
• Alert: Fixed AlertTitle ref type (HTMLParagraphElement → HTMLHeadingElement)
• LayeredCard: Fixed LayeredCardTitle ref type same way
• Badge: Removed inappropriate role="status" from decorative badges
• Card: Changed CardTitle from <div> to semantic <h3>
• Tour: Fixed X (close) button not calling onComplete callback
• Sticker: Replaced undefined bg-neon-pink with correct bg-[#ff2d78]
• Dropzone: Fixed file accumulation on re-drop (now replaces instead of appends); exposed reset() method
• Slider: Fixed stale closure in onValueCommit; cancel idle rAF on unmount
• Rating: Fixed ARIA roles — role="slider" → role="radiogroup" with role="radio" per star
• Timeline: Removed dead CVA status variants that all mapped to empty strings

React Charts

• GaugeChart: Implemented variant prop (semicircle / full / meter) with correct sweep angles and canvas sizing
• HeatmapChart: Implemented colorLow/colorHigh gradient using color-mix()
• SparklineChart: Replaced duplicate invisible series hack with custom dot renderer for end dot only
• RadialBarChart: Collapsed dead if/else branches in useMemo to single code path

Vue Components

• Stepper: Same orientation fix + added setTotalSteps to StepperContext interface
• Carousel: Added reInit cleanup in onUnmounted
• Tour: Fixed X button not calling onComplete + removed unused Teleport import
• Dropzone: Same replace-on-drop fix as React
• Slider: Same idle rAF cancellation fix
• TagInput: Added RegExp to delimiter prop type
• Rating: Fixed ARIA — role="radiogroup" + role="radio" + aria-checked per star
• EmptyState / EmptyStatePreset: Extracted shared CVA variants to empty-state-variants.ts

Vue Charts

• GaugeChart: Added variant prop matching React API
• SparklineChart: Replaced fragile hsl() string replacement with color-mix()
• chart-variants: Added overflow-hidden to chart container base styles

BoldKit v3.0.0 — Advanced Charts, Animated Shapes, Shape Builder & Docs Template

🚀 BoldKit v3.0.0

The biggest release yet. v3.0 brings 4 advanced chart types, fully animated SVG shapes, an interactive Shape Builder tool, a new Documentation Site template, 5 new theme presets, and a completely redesigned website — all with full React + Vue parity.

---

✨ What's New

📊 4 Advanced Charts

Four new chart types added to the library, available for both React (Recharts) and Vue (ECharts):

Chart	Description
Funnel Chart	Conversion funnels, sales pipelines, stage-based flows
Treemap Chart	Hierarchical data with nested proportional rectangles
Heatmap Chart	Matrix data with color intensity encoding (e.g. activity grids)
Sankey Chart	Flow diagrams showing quantity transfer between nodes

BoldKit now includes 14 chart types total.

# React
npx shadcn@latest add https://boldkit.dev/r/funnel-chart.json
npx shadcn@latest add https://boldkit.dev/r/treemap-chart.json
npx shadcn@latest add https://boldkit.dev/r/heatmap-chart.json
npx shadcn@latest add https://boldkit.dev/r/sankey-chart.json

# Vue
npx shadcn-vue@latest add https://boldkit.dev/r/vue/funnel-chart.json
npx shadcn-vue@latest add https://boldkit.dev/r/vue/treemap-chart.json
npx shadcn-vue@latest add https://boldkit.dev/r/vue/heatmap-chart.json
npx shadcn-vue@latest add https://boldkit.dev/r/vue/sankey-chart.json

---

🎭 Animated Shapes

All 42 SVG shapes now support animation and speed props — no extra CSS required.

7 animation types:

Animation	Effect
spin	Continuous rotation
pulse	Scale in/out breathing effect
float	Gentle vertical drift
wiggle	Playful side-to-side motion
bounce	Energetic up/down bounce
glitch	Distorted digital glitch

3 speed variants: slow · normal · fast

// React
<GearShape animation="spin" speed="slow" size={80} />
<Star5Shape animation="pulse" size={60} />
<BlobShape animation="float" speed="fast" size={100} />

// Vue
<GearShape animation="spin" speed="slow" :size="80" />

---

🔧 Shape Builder

A brand new interactive tool at boldkit.dev/shapes/builder.

• Pick any of the 42 shapes from a searchable, filterable grid
• Customize size, stroke width, fill, color (theme presets + custom hex), animation, and speed
• Live preview updates instantly
• Copy the generated React or Vue code with one click

---

📄 Documentation Site Template

A full-featured documentation layout template — the 7th template in BoldKit.

• Sticky header with search and navigation
• Collapsible sidebar with nested section groups
• Content area with code blocks, callouts, and table of contents
• Previous / next article navigation
• Breadcrumb trail
• Available for both React and Vue

Preview: boldkit.dev/templates/docs

---

🎨 5 New Theme Presets

The Theme Builder now includes 14 total presets (was 9):

Preset	Vibe
Cyberpunk	Toxic neon green + hot pink
Retro	Vintage burnt orange + teal
Pastel	Soft kawaii pinks and purples
Gold	Luxury amber + deep navy
Cherry	Bold Japanese red + forest green

🔧 Bug Fixes

• Fixed InvoiceList status tag overlapping action buttons in list view
• Fixed chart.tsx barrel file missing exports for new chart types (caused runtime module error)
• Fixed ScribbleUnderline shape missing animation/speed props
• Fixed Recharts Tooltip formatter type errors in funnel and treemap charts
• Fixed registry funnel-chart.tsx importing from non-existent ./types (broke Vercel build)
• Fixed SEO component canonical prop usage in DocsTemplate

---

📦 Registry

React and Vue registry files updated. The registry now generates 64 component files.

# Install any new chart (React)
npx shadcn@latest add https://boldkit.dev/r/[component].json

# Install any new chart (Vue)
npx shadcn-vue@latest add https://boldkit.dev/r/vue/[component].json

---

📊 By the Numbers

	v2.8.3	v3.0.0
Chart types	10	14
Templates	6	7
Theme presets	9	14
Shape animations	0	7 types
Registry files	60	64

---

Full Changelog: v2.8.3...v3.0.0

BoldKit v2.8.3 - Vue Component Parity

What's Changed

Vue Package Fixes

Added 6 missing Vue component exports and registry entries:

Component	Description
Dropzone	Drag-and-drop file upload with preview
EmptyState	Empty state placeholders with 8 presets
Kbd	Keyboard shortcut display
Spinner	Loading spinner (5 variants)
StatCard	Statistics card for dashboards
Stepper	Multi-step wizard component

These components already existed in the Vue package but were not exported or available via the shadcn-vue CLI.

Registry

• Vue registry now generates 60 component files (was 54)

Full Changelog: v2.8.2...v2.8.3

BoldKit v2.8.2 - Accessibility & Cleanup

What's Changed

Accessibility Improvements

• Added role="status" to Badge component for better screen reader support
• Added role="article" to Card component (with prop override support)
• Added role="img" and aria-label/aria-labelledby props to ChartContainer

Maintenance

• Removed unused react-resizable-panels dependency

Full Changelog: v2.8.1...v2.8.2

BoldKit v2.8.1 - Jelly Slider

Slider Component Upgrade

The Slider component has been completely rewritten with spring physics and jelly-like interactions.

New Features

• Spring Physics Animation - Smooth, bouncy thumb movement with configurable physics
• Jelly Squish Effect - Thumb squishes and stretches based on drag velocity
• Track Click Support - Click anywhere on the track to move the nearest thumb (especially useful for range sliders)
• Vertical Orientation - Full support for vertical sliders
• Keyboard Navigation - Arrow keys with bounce effect
• Zero Dependencies - Removed @radix-ui/react-slider dependency

New Props

Prop	Default	Description
stiffness	400	Spring stiffness (higher = snappier)
damping	28	Damping ratio (higher = less bouncy)
mass	1	Thumb mass (higher = more inertia)
orientation	'horizontal'	'horizontal' or 'vertical'

Physics Presets

// Snappy - quick response
<Slider stiffness={800} damping={40} mass={0.5} />

// Bouncy - more overshoot
<Slider stiffness={300} damping={12} mass={1} />

// Gooey - slow and heavy
<Slider stiffness={150} damping={15} mass={3} />

Usage

// Single value slider
<Slider defaultValue={[50]} />

// Range slider with two thumbs
<Slider defaultValue={[25, 75]} />

// Vertical slider
<Slider defaultValue={[50]} orientation="vertical" />

Full Changelog: v2.8.0...v2.8.1

BoldKit v2.8.0 - 10 New Components

New Components

Data & Forms

• Rating - Star/heart/circle rating with half-value support, keyboard navigation
• Tag Input - Multi-value input with suggestions, validation, and removable tags
• Time Picker - Popover-based picker with 12h/24h formats, minute steps, seconds support
• Date Range Picker - Dual calendar with presets sidebar, mobile responsive
• Data Table - Built on TanStack Table with sorting, filtering, pagination, row selection

Navigation & Advanced

• Carousel - Embla-based with dots, keyboard navigation, vertical/horizontal modes
• Timeline - Vertical/horizontal with status indicators (completed/current/upcoming)
• Tree View - Expandable with checkboxes, single/multiple selection, keyboard nav
• Sidebar - Collapsible with icon-only mode, mobile drawer, Cmd+B shortcut
• Tour - Step-by-step product tours with spotlight, custom positioning

Bug Fixes

• fix(data-table): increase rows per page selector width for double digits
• fix(sidebar): allow SidebarItem to work outside SidebarProvider context
• fix(time-picker): constrain width to 180px instead of full width
• fix(carousel): disable translate animation on nav buttons to prevent offset
• fix(tree-view): improve checkbox styling with neubrutalism borders and shadow
• fix(sidebar): improve toggle animation with icon rotation and smoother transitions
• fix(calendar): prevent nav arrows from overlapping with month name

Documentation

• Added comprehensive documentation pages for all 10 components
• React and Vue code examples for each component
• Multiple example sections showing different configurations

Installation

React:
```bash
npx shadcn@latest add "https://boldkit.dev/r/rating.json"
npx shadcn@latest add "https://boldkit.dev/r/tag-input.json"
npx shadcn@latest add "https://boldkit.dev/r/time-picker.json"
npx shadcn@latest add "https://boldkit.dev/r/date-range-picker.json"
npx shadcn@latest add "https://boldkit.dev/r/data-table.json"
npx shadcn@latest add "https://boldkit.dev/r/carousel.json"
npx shadcn@latest add "https://boldkit.dev/r/timeline.json"
npx shadcn@latest add "https://boldkit.dev/r/tree-view.json"
npx shadcn@latest add "https://boldkit.dev/r/sidebar.json"
npx shadcn@latest add "https://boldkit.dev/r/tour.json"
```

Full Changelog: v2.6.0...v2.8.0

v2.6.0 - Blocks Release

Section Blocks (15 total)

BoldKit v2.6.0 introduces 15 pre-built section blocks for landing pages and web applications.

Marketing Blocks (10)

• Hero Section - 5 variants (centered, split, video, animated, minimal)
• Feature Grid - 4 variants (grid, bento, alternating, icon-focused)
• Testimonials - 4 variants (single, carousel, grid, quote)
• Logo Cloud - 3 variants (simple, scrolling, grid)
• CTA Section - 5 variants (simple, background, newsletter, split, banner)
• Stats Section - 4 variants (simple, grid, with-icons, animated)
• Team Section - 3 variants (grid, carousel, detailed)
• FAQ Section - 3 variants (accordion, two-column, search)
• Footer Section - 4 variants (simple, multi-column, centered, minimal)
• Contact Section - 4 variants (centered, split, with-map, minimal)

Application Blocks (5)

• Auth Forms - 5 variants (login, register, forgot-password, reset-password, two-factor)
• Settings Page - 3 variants (profile, account, notifications)
• Onboarding Flow - 4 steps (welcome, profile, preferences, complete)
• Error Pages - 4 variants (404, 500, 403, maintenance)
• Invoice - 3 variants (simple, detailed, summary)

New Components

• Empty State - Flexible empty state component with presets (no-data, no-results, error, no-access, empty-inbox, no-notifications)

Documentation

• New /blocks overview page with visual previews
• Individual documentation pages for each block

Full Changelog

v2.5.0...v2.6.0