Gathering detailed insights and metrics for @tempots/beatui
Gathering detailed insights and metrics for @tempots/beatui
Gathering detailed insights and metrics for @tempots/beatui
Gathering detailed insights and metrics for @tempots/beatui
npm install @tempots/beatui
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Form
Checkbox
Dark Logo
List Controls (move up/down/first/last, remove, vertical/horizontal)
Draggable List Items
Divider (horizontal/vertical)
Spacer
Do not use data-status for modal, flyout, overlay and tooltip. Use classes instead. The can be bu-status-x classes.
Simplify Flyout by removing the status tracking that seems unnecessary and should be solved by useAnimatedToggle
Separate InputWrapper out of ControlInputWrapper so that it can be used without a controller
When Modal is on the smaller Media breakpoint, it should take the entire screen
When the drawer width (left or right open) or height (top or bottom open) is bigger than the available space it should take at most the available space
Implement Dialog. The main difference from Modal is that Dialog doesn't use Overlay and can only be closed via Escape (optionally if closable
) or using the close button. Clicking outside will not trigger a close action.
Modal should use ScrollablePanel to show the header/body/footer.
On iPhone/iPad the height of the Main panel of the AppShell should be limited to 100dhv minus header height or whatever
Styling of NativeSelect in Safari displays the default shaded style instead of the BeatUI skin.
A modern TypeScript UI component library built with @tempots/dom.
Built with @tempots/dom for lightweight and efficient DOM manipulation
TypeScript for type safety and better developer experience
Vite for fast development and optimized builds
Vitest for unit testing
Playwright for browser testing
ESLint and Prettier for code quality and consistent formatting
Layered CSS architecture with design tokens
Iconify integration for icons
Container queries for responsive components
1npm install @tempots/beatui 2# or 3pnpm add @tempots/beatui 4# or 5yarn add @tempots/beatui
You'll also need to install the peer dependencies:
1npm install @tempots/dom @tempots/std @tempots/ui 2# or 3pnpm add @tempots/dom @tempots/std @tempots/ui 4# or 5yarn add @tempots/dom @tempots/std @tempots/ui
Import the CSS in your main CSS file or entry point:
1@import '@tempots/beatui/css';
Or import it in your JavaScript/TypeScript entry point:
1import '@tempots/beatui/css';
1import { createButton, createCard } from '@tempots/beatui'; 2 3// Create a button 4const button = createButton({ 5 text: 'Click me', 6 variant: 'filled', 7 onClick: () => console.log('Button clicked'), 8}); 9 10// Create a card with the button 11const card = createCard({ 12 title: 'My Card', 13 content: 'This is a card component from BeatUI Library', 14 children: [button], 15}); 16 17// Add the card to the DOM 18document.body.appendChild(card);
BeatUI uses a layered CSS architecture:
@layer reset
- CSS resets and normalizations@layer base
- Base styles and design tokens@layer components
- Component styles with bc-
prefix@layer variants
- Component variants and modifiers@layer utilities
- Utility classes with bu-
prefix@layer overrides
- Custom overrides and exceptionsThe library includes comprehensive design tokens for:
See the monorepo README for development instructions.
The package includes convenient scripts for publishing different types of releases:
1# Patch release (0.0.1 → 0.0.2) - for bug fixes 2pnpm run release:patch 3 4# Minor release (0.0.1 → 0.1.0) - for new features 5pnpm run release:minor 6 7# Major release (0.0.1 → 1.0.0) - for breaking changes 8pnpm run release:major 9 10# Prerelease (0.0.1 → 0.0.2-0) - for beta/alpha versions 11pnpm run release:prerelease 12 13# Release without automatic git commit (manual git handling) 14pnpm run release:patch:no-commit 15pnpm run release:minor:no-commit 16pnpm run release:major:no-commit 17pnpm run release:prerelease:no-commit 18 19# Test publishing without actually publishing 20pnpm run release:dry 21 22# Show current version 23pnpm run version:show 24 25# Preview what the next version would be for each release type 26pnpm run version:next:patch # Shows next patch version 27pnpm run version:next:minor # Shows next minor version 28pnpm run version:next:major # Shows next major version 29pnpm run version:next:prerelease # Shows next prerelease version 30 31# Prepare package for release (clean, build, test) without publishing 32pnpm run release:prepare 33 34# Test what commit message would be created 35pnpm run release:commit:dry
Each release script follows this workflow:
The workflow ensures that:
--no-git-checks
after versioningNote: Prerelease versions are published with the next
tag, so they won't be installed by default with npm install @tempots/beatui
.
Automatic Git Commits (Default)
The main release scripts automatically commit version changes after successful publish:
package.json
to git stagingchore: release @tempots/beatui@{version}
Example commit messages:
chore: release @tempots/beatui@1.0.0
chore: release @tempots/beatui@1.1.0
chore: release @tempots/beatui@1.0.1
Manual Git Handling
If you prefer to handle git commits manually, use the :no-commit
variants:
pnpm run release:patch:no-commit
pnpm run release:minor:no-commit
pnpm run release:major:no-commit
pnpm run release:prerelease:no-commit
These scripts will publish successfully but leave git operations to you.
MIT
No vulnerabilities found.
No security vulnerabilities found.