@public-essentials/core

A comprehensive TypeScript library providing core UI components and utilities for modern web applications.

Features

• 🎯 24 Core Components - Essential UI building blocks
• 🔧 TypeScript Support - Full type definitions included
• 📦 Individual Imports - Import only what you need
• 🎨 Tailwind CSS Ready - Designed for utility-first CSS
• ⚡ Modern Build - ES modules and CommonJS support
• 🔌 Plugin Architecture - Extensible component system

Installation

npm install @public-essentials/core

Usage

Full Import

// Import all components
import * as CoreUI from '@public-essentials/core';

// Or CommonJS
const CoreUI = require('@public-essentials/core');

Individual Imports

// Import specific components (recommended for tree-shaking)
import { HSAccordion } from '@public-essentials/core/accordion';
import { HSCarousel } from 'core-ui-components/carousel';
import { HSDropdown } from 'core-ui-components/dropdown';

// Or CommonJS
const { HSAccordion } = require('@public-essentials/core/accordion');
const { HSCarousel } = require('core-ui-components/carousel');

Tailwind CSS Plugin

// tailwind.config.js
module.exports = {
  content: [
    'node_modules/@public-essentials/core/dist/*.js'
  ],
  plugins: [
    require('@public-essentials/core/plugin')
  ],
}

Initialize Components

// Initialize all components
import '@public-essentials/core';

// Or initialize specific components
import { HSAccordion } from '@public-essentials/core/accordion';
HSAccordion.autoInit();

Available Components

| Component | Import | Description | |-----------|--------|-------------| | Accordion | @public-essentials/core/accordion | Collapsible content panels | | Carousel | @core/ui/carousel | Image/content carousel | | Collapse | @core/ui/collapse | Expandable content sections | | Combobox | @core/ui/combobox | Searchable select dropdown | | Copy Markup | @core/ui/copy-markup | Copy-to-clipboard functionality | | DataTable | @core/ui/datatable | Enhanced data tables | | Dropdown | @core/ui/dropdown | Dropdown menus | | File Upload | @core/ui/file-upload | File upload with drag & drop | | Input Number | @core/ui/input-number | Numeric input controls | | Layout Splitter | @core/ui/layout-splitter | Resizable layout panels | | Overlay | @core/ui/overlay | Modal and overlay components | | Pin Input | @core/ui/pin-input | PIN/OTP input fields | | Range Slider | @core/ui/range-slider | Range selection sliders | | Remove Element | @core/ui/remove-element | Element removal utilities | | Scrollspy | @core/ui/scrollspy | Scroll-based navigation | | Select | @core/ui/select | Enhanced select dropdowns | | Stepper | @core/ui/stepper | Multi-step form navigation | | Strong Password | @core/ui/strong-password | Password strength validation | | Tabs | @core/ui/tabs | Tabbed content interface | | Textarea Auto Height | @core/ui/textarea-auto-height | Auto-resizing textareas | | Theme Switch | @core/ui/theme-switch | Dark/light mode toggle | | Toggle Count | @core/ui/toggle-count | Counter with toggle controls | | Toggle Password | @core/ui/toggle-password | Password visibility toggle | | Tooltip | @core/ui/tooltip | Contextual tooltips | | Tree View | @core/ui/tree-view | Hierarchical tree navigation |

TypeScript Support

Full TypeScript definitions are included. All components are strongly typed:

import { HSAccordion, IAccordionOptions } from 'core-ui-components/accordion';

const options: IAccordionOptions = {
  toggle: true,
  alwaysOpen: false
};

const accordion = new HSAccordion(element, options);

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License - see LICENSE file for details.

Contributing

This is a core utility library. For issues and contributions, please contact the development team.