@sgx4u/ui 1.0.6

package/CHANGELOG.md

@@ -0,0 +1,69 @@
+# Changelog
+
+All notable changes to `@sgx4u/ui` are documented in this file.
+This project adheres to Semantic Versioning.
+
+## [1.0.0]
+
+#### Date - 30th Nov 2025
+
+### Added
+
+- Initial public release of `@sgx4u/ui`.
+- CLI commands: init, add, list, info, config, help with registry + dependency resolution.
+- Elements:
+    - `accordion`: A vertically stacked set of interactive headings that each reveal a section of content.
+    - `aspect-ratio`: Container that preserves a fixed width-to-height ratio for media and other content.
+    - `auto-complete`: Text input that suggests and lets users pick from a filtered list of options as they type.
+    - `backdrop`: A dimmed, often blurred layer that sits behind overlays to draw attention to foreground content.
+    - `background`: Decorative background components for applying animated gradients and ambient color effects behind your UI.
+    - `badge`: Compact label used to display counts, statuses, or short pieces of metadata.
+    - `breadcrumb`: A horizontal trail of links that helps users understand and navigate the hierarchy of a site or app.
+    - `button`: Pressable control used to trigger actions or events, with support for visual variants, sizes, and loading states.
+    - `button-group`: A collection of related buttons displayed as a single, visually connected group.
+    - `checkbox`: A square box that users can check or uncheck to represent boolean choices or multi-select lists.
+    - `click-away-listener`:Click away listener that uses a unique data-click-away-id for outside click detection.
+    - `container`: Layout wrapper used to arrange and align content using consistent flex or grid primitives.
+    - `dialog`: A window overlaid on the current page that focuses the user on a specific task or piece of information.
+    - `focus-trap`: Utility that keeps keyboard focus inside a given region while it is active.
+    - `highlight`: Text helper that visually emphasizes matches within content, often used for search results.
+    - `hover-card`: A small floating panel that reveals supplemental content when users hover or focus a trigger element.
+    - `icons`: Small reusable icon components, including controls like the password show/hide toggle.
+    - `image`: Enhanced image primitives for displaying pictures with optional progressive loading and performance-friendly defaults.
+    - `indicators`: Small visual markers, such as asterisks, used to call out required or special fields in forms.
+    - `input`: Single-line text field for capturing short pieces of information such as names, emails, or search queries.
+    - `label`: Text caption that describes and links to a form control, often showing required or validation state.
+    - `link`: A navigational element that takes users to another page, view, or section when activated.
+    - `list`: A semantic container for ordered or unordered groups of related list items.
+    - `list-item`: A single item inside a list, typically representing one entry in a collection of related content.
+    - `loader`: Visual indicator that communicates to users that content or actions are in progress.
+    - `popover`: A small overlay that appears near a trigger to display contextual information or actions.
+    - `portal`: Mechanism for rendering content into a different part of the DOM tree, often used for overlays and dialogs.
+    - `presence`: Helper that controls whether a child stays mounted while its enter and exit animations complete.
+    - `radio`: Single-selection form control typically used in groups where only one option can be active at a time.
+    - `select`: A dropdown control for choosing one or more options from a list, with an optional searchable variant.
+    - `separator`: Thin rule used to visually divide groups of content or UI controls.
+    - `sheet`: A panel that slides in from the edge of the screen to display contextual content without leaving the current page.
+    - `skeleton`: Placeholder UI used to represent content that is still loading.
+    - `slot`: Composition utility that lets components render their children as the actual DOM element while still receiving styling and behavior.
+    - `switch`: A two-state toggle used for turning a setting or feature on and off.
+    - `table`: A tabular data structure that organizes information into rows and columns.
+    - `tabs`: A set of stacked triggers that switch between different views or panels in the same space.
+    - `text`: Typography primitive for rendering semantic headings, paragraphs, and inline text.
+    - `text-style`: Inline text formatting primitives for emphasizing, underlining, or annotating existing content.
+    - `textarea`: Multiline text field for collecting longer free-form input such as comments, notes, or descriptions.
+    - `timeline`: Visual representation of a sequence of events or steps in a process.
+    - `toggle`: A pressable control that switches between on and off states, similar to a button with persistent pressed state.
+    - `tooltip`: A brief, non-interactive label that appears on hover or focus to describe another element.
+    - `visually-hidden`: Utility for content that should be available to screen readers but not visible on screen.
+
+<!--
+Add new versions below this line, following the same structure:
+
+## [x.y.z]
+
+### Added
+### Changed
+### Fixed
+### Removed
+-->

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2024 Subhajit Ghosh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,161 @@
+<p align="center">
+	<img src="https://github.com/sgx4u/sgx4u-ui/blob/production/logo.svg?raw=true" width="75px" align="center" alt="SGX4U" />
+	<h2 align="center">🌟 @sgx4u/ui 🌟</h2>
+	<p align="center">Accessible, efficient and customizable components to start your own project. Use this to build any project of any scale.</p>
+</p>
+
+<br/>
+
+<p align="center">
+	<!-- NPM Version -->
+	<img src="https://img.shields.io/npm/v/%40sgx4u%2Fui?style=for-the-badge&labelColor=353535&color=3b82f6" alt="Version">
+	<!-- License -->
+	<img src="https://img.shields.io/github/license/sgx4u/sgx4u-ui?style=for-the-badge&labelColor=353535&color=4f46e5" alt="License">
+	<!-- TypeScript -->
+	<img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript">
+	<!-- JavaScript -->
+	<img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
+	<!-- LinkedIn -->
+	<a href="https://www.linkedin.com/in/sgx4u" rel="nofollow"><img src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fwww.linkedin.com%2Fin%2Fsgx4u%2F&style=for-the-badge&logo=linkedin&label=SGX4U&labelColor=%230077B5&color=%23353535" alt="LinkedIn"></a>
+	<!-- X (Twitter) -->
+	<a href="https://x.com/sgx4u" rel="nofollow"><img src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fsgx4u&style=for-the-badge&logo=x&label=sgx4u&labelColor=353535" alt="X (Twitter)"></a>
+	<!-- Last Update -->
+	<img src="https://img.shields.io/npm/last-update/%40sgx4u%2Fui?style=for-the-badge&labelColor=353535&color=f15b2a" alt="Update">
+</p>
+
+<br/>
+
+## ⚜️ Table of Contents
+
+- [Overview](#overview)
+- [Links](#️-links)
+- [Features](#features)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [CLI Usage](#-cli-usage)
+- [Theming and Customization](#theming-and-customization)
+- [Contributing](#contributing)
+- [Versioning and Changelog](#versioning-and-changelog)
+
+<br/>
+
+## 💎 Overview
+
+`@sgx4u/ui` is a transparent, TypeScript-first React component library, designed to be fully readable, extendable, and production-ready. The main goal with this UI library is raw code accessibility, so that there is nothing hidden from the developer.
+
+`@sgx4u/ui` focuses on:
+
+- **No hidden abstractions**: You install real source code, not a black-box design system.
+- **Scalability**: Suitable for small prototypes and large-scale applications alike.
+- **Consistency**: Opinionated defaults that still stay easy to customize.
+- **Developer experience**: A CLI that lets you add and inspect components quickly.
+
+<br/>
+
+## 🔗 Links
+
+- [`SGX4U UI Docs`](ui.sgx4u.com) &dash; Package documentation and component examples.
+
+<br/>
+
+## Features
+
+- **Accessible by default**: Components are built with proper semantics, ARIA attributes, accessibility, and keyboard interactions in mind.
+- **TypeScript-first**: Fully typed APIs with explicit, predictable props for each component.
+- **Tailwind CSS-based**: Utility classes by default, with clear escape hatches for customization.
+- **CLI-driven**: Use the `sgx4u-ui` CLI to initialize projects, inspect components, and add new building blocks.
+- **Animation-ready**: Subtle, CSS-only animations are included to keep interfaces feeling smooth and responsive.
+- **Composable primitives**: Focus on primitives like `button`, `dialog`, `tabs`, and `text` that compose into more advanced UIs.
+
+<br/>
+
+## Requirements
+
+- **Node.js**: `>= 22.0.0`.
+- **Package manager**: `pnpm` is recommended for the best experience.
+- **Library & Framework**: React.js 19+, Next.js 16+.
+- **Styling**: Tailwind CSS 4+ configured in your project.
+
+## 💡Installation
+
+```sh
+npm install @sgx4u/ui       # npm
+yarn add @sgx4u/ui          # yarn
+pnpm add @sgx4u/ui          # pnpm
+```
+
+<br/>
+
+## Quick Start
+
+1. **Install the library**.
+
+    ```sh
+    pnpm add @sgx4u/ui
+    ```
+
+2. **Initialize SGX4U UI in your project**.
+
+    ```sh
+    pnpm dlx @sgx4u/ui init
+    ```
+
+3. **Add components in your project**.
+
+    ```sh
+    sgx4u-ui add button
+    ```
+
+4. **Start your dev server** (for example, with Next.js or Vite) and verify the component renders and behaves as expected.
+
+<br/>
+
+## 🚀 CLI Usage
+
+Install and use the CLI via `pnpm` (recommended) or your preferred package manager.
+
+```sh
+pnpm add @sgx4u/ui
+```
+
+Then use the `sgx4u-ui` commands:
+
+```sh
+# Initialize SGX4U UI in your project
+sgx4u-ui init
+
+# Install a component
+sgx4u-ui add <component-name>
+
+# Show available components
+sgx4u-ui list
+
+# Show information about a component
+sgx4u-ui info
+
+# Show configuration
+sgx4u-ui config
+
+# Show this help information
+sgx4u-ui help
+```
+
+<br/>
+
+## Theming and Customization
+
+`@sgx4u/ui` is designed to be themed and adapted to your design system.
+
+- **Tailwind tokens**: Extend your Tailwind configuration to align colors, spacing, and typography with your brand.
+- **Component overrides**: Because the source is fully accessible, you can copy and adapt components to your own conventions.
+- **Utility-first styling**: Use Tailwind utility classes to quickly adjust layout, spacing, and appearance without sacrificing consistency.
+
+For detailed theming guidance, see the docs in `ui.sgx4u.com/docs/styling`.
+
+<br/>
+
+## Versioning and Changelog
+
+This project follows Semantic Versioning.
+All notable changes are documented in [`CHANGELOG.md`](./CHANGELOG.md).

package/SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please report (suspected) security vulnerabilities to **[sgx2050@gmail.com](mailto:sgx2050@gmail.com)**. I will try my best to respond as soon as I can. If the issue is confirmed, I will release a patch as soon as possible depending on complexity.

package/SUPPORT.md

@@ -0,0 +1,5 @@
+# Support
+
+## Thanks to the Community
+
+I wholeheartedly welcome any support from the community. I am deeply grateful to everyone for helping me make a tool that helps my developer friends. Cheers...!!! Keep on making people achieve there digital dream.