pure-uikit 1.3.11 → 1.3.12

package/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2024 Pure Team, LLC
+Copyright (c) 2020 A Beautiful Site, LLC
 
 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:
 

package/README.md

@@ -1,30 +1,151 @@
-# Pure UI
+# PureUI
 
-A forward-thinking library of web components.
+Documentation: [Pure UI](https://pureui.xyz)
 
-- Works with all frameworks 🧩
-- Works with CDNs 🚛
-- Fully customizable with CSS 🎨
-- Includes an official dark theme 🌛
-- Built with accessibility in mind ♿️
+Welcome to **PureUI**, a lightweight, customizable web component library based on **Shoelace Style**. PureUI extends Shoelace with advanced components designed for building responsive and interactive user interfaces with minimal effort.
 
-Develop in Hanoi, Vietnam by [Mr.P](https://www.facebook.com/ssjblue197).
+PureUI is built with web components, which means that you can use them in any framework you like, such as React, Vue, Angular, or even vanilla JavaScript. Web components are also framework-agnostic, so you can easily switch between frameworks without having to rewrite your UI code. Additionally, web components are encapsulated, which means that they are self-contained and don't pollute the global namespace, making it easier to maintain and debug your code.
 
----
+## Table of Contents
 
-<!-- Documentation: [Pure UI](https://pureui.xyz) -->
+1. [Introduction](#introduction)
+2. [Installation](#installation)
+3. [Usage](#usage)
+4. [Components Overview](#components-overview)
+5. [Customization](#customization)
+6. [Examples](#examples)
+7. [API Documentation](#api-documentation)
+8. [Contributing](#contributing)
+9. [License](#license)
 
-Source: [https://github.com/ssjblue197/pure-ui](https://github.com/ssjblue197/pure-ui)
+## 1. Introduction
 
----
+**PureUI** is a collection of web components designed to streamline the process of building modern UIs. It enhances **Shoelace** by adding more advanced components while maintaining simplicity and performance. With PureUI, you can easily integrate responsive, accessible, and themeable elements into your web applications.
+
+### Key Features:
+
+- **Customizable**: Built with customization in mind, PureUI components can be easily themed and adjusted to fit your design needs.
+- **Responsive**: PureUI provides components that adapt seamlessly to different screen sizes.
+- **Lightweight**: Focused on performance and efficiency, PureUI is designed to stay lightweight and fast.
+- **Localization**: Components can be easily localized using the `lang` attribute. This attribute allows you to specify a custom translation for any component.
+- **Advanced Components**: Includes a wide range of UI components like **Calendar**, **Data Table**, **Select Combobox**, **Pagination**, **Smart Container**, **File Upload**, and more.
+
+## 2. Installation
+
+PureUI can be easily installed using **npm**, **yarn**, or a CDN.
+
+### npm
+
+```bash
+npm install pure-uikit
+```
+
+### yarn
+
+```bash
+yarn add pure-uikit
+```
+
+### CDN
+
+Include the following script tag in your HTML file:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.9/cdn/themes/light.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.9/cdn/pure-ui-autoloader.js"></script>
+```
+
+## 3. Usage
+
+Once installed, you can start using PureUI components in your HTML or JavaScript files. Here's an example of using a **SmartContainer** component.
+
+```html
+<p-smart-container>
+  <p>This is a responsive container.</p>
+</p-smart-container>
+```
+
+## 4. Components Overview
+
+Here’s a brief overview of some of the most common and advanced PureUI components:
+
+- **SmartContainer**: A responsive container that adjusts its layout dynamically.
+- **Calendar**: An interactive calendar component with support for date selection and events.
+- **Data Table**: A powerful data table with sorting, filtering, and pagination features.
+- **Select Combobox**: A customizable dropdown with search functionality.
+- **Paginate**: A pagination component to navigate large datasets easily.
+- **File Upload**: A flexible file upload component with drag-and-drop support.
+- **More**: We encourage you to build more components and share them with the community. Please refer to the [Community](https://pureui.xyz/resources/community/) section for more information.
+
+## 5. Customization
+
+PureUI is designed to be highly customizable. You can override default styles using CSS variables or modify component behavior via attributes and methods.
 
-## Pure UI makers :arrow_double_up:
+### Example:
 
-Pure UI maker, or "Pure UI developers," can use this documentation to learn how to build Pure UI from source. You will need Node >= 14.17 to build and run the project locally.
+To customize a **Button**, you can use the following CSS variables:
 
-**You don't need to do any of this to use Pure UI!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Pure UI.
+```css
+p-button {
+  --button-background-color: #3498db;
+  --button-text-color: #ffffff;
+}
+```
+
+## 6. Examples
+
+### Basic SmartContainer Example
+
+```html
+<p-smart-container>
+  <h1>Welcome to PureUI</h1>
+  <p>This container adjusts its layout based on the screen size.</p>
+</p-smart-container>
+```
+
+### Calendar Example
+
+```html
+<p-calendar></p-calendar>
+```
+
+### Data Table Example
+
+```html
+<p-table>
+  <!-- table data here -->
+</p-table>
+```
+
+### File Upload Example
+
+```html
+<p-file-upload></p-file-upload>
+```
+
+## 7. API Documentation
+
+Each component in PureUI comes with its own set of attributes, properties, and events.
+
+For full API details, visit the [API documentation page](https://pureui.xyz/).
+
+## 8. Contributing
+
+We welcome contributions to PureUI! If you'd like to contribute, please follow the steps below:
+
+1. Fork the repository.
+2. Create a new branch.
+3. Submit a pull request.
+
+For detailed guidelines, check out our [contribution guide](https://pureui.xyz/resources/contributing/).
+
+## 9. License
+
+PureUI is licensed under the **MIT License**. See the [LICENSE](https://github.com/ssjblue197/pure-ui/blob/main/LICENSE.md) file for more details.
+
+---
 
-If that's not what you're trying to do, the [documentation website](https://pureui.xyz) is where you want to be.
+Thank you for choosing PureUI! We hope this library helps you build amazing user interfaces quickly and easily. For more information, visit our [official website](https://pureui.xuz).
 
 ### What are you using to build Pure UI?
 

package/{dist/chunks/chunk.MU3A5OA4.js → cdn/chunks/chunk.2IMVRTUT.js}

@@ -1,6 +1,6 @@
 import {
   PInput
-} from "./chunk.H6YGNQLN.js";
+} from "./chunk.MLB7JQJI.js";
 
 // src/react/input/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.63NK5R3L.js → cdn/chunks/chunk.2MDLXUJZ.js}

@@ -1,6 +1,6 @@
 import {
   PCheckbox
-} from "./chunk.FSAMLTIP.js";
+} from "./chunk.YHHEUVX5.js";
 
 // src/react/checkbox/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.GVVVGRLS.js → chunk.2UEA37S6.js}

@@ -1,6 +1,6 @@
 import {
   PRadioButton
-} from "./chunk.6P5DKVOF.js";
+} from "./chunk.HVHRIYKO.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = PRadioButton;

package/{dist/chunks/chunk.7Y2TR4ZQ.js → cdn/chunks/chunk.2WX43SB2.js}

@@ -1,6 +1,6 @@
 import {
   PVisuallyHidden
-} from "./chunk.LLM4GF2F.js";
+} from "./chunk.GHJQMKUG.js";
 
 // src/react/visually-hidden/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.PRX7UCDU.js → chunk.2ZSHNCTP.js}

@@ -1,6 +1,6 @@
 import {
   PProgressRing
-} from "./chunk.PTYRNZEN.js";
+} from "./chunk.MYYVEAVM.js";
 
 // src/react/progress-ring/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.XL767DNB.js → cdn/chunks/chunk.37WBNA4W.js}

@@ -1,6 +1,6 @@
 import {
   PInclude
-} from "./chunk.O7G7XGBX.js";
+} from "./chunk.4UMGYGCT.js";
 
 // src/react/include/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.ZQUBS3MD.js → chunk.3AMIWKXW.js}

@@ -1,6 +1,6 @@
 import {
   PFormatDate
-} from "./chunk.CTTNQDAJ.js";
+} from "./chunk.AJZ4HNF2.js";
 
 // src/components/format-date/format-date.ts
 var format_date_default = PFormatDate;

package/cdn/chunks/{chunk.JIXO5OOJ.js → chunk.3F6XERVM.js}

@@ -1,6 +1,6 @@
 import {
   PDialog
-} from "./chunk.2AOZTUR2.js";
+} from "./chunk.MWSIVBHK.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = PDialog;

package/cdn/chunks/{chunk.TAVXQL55.js → chunk.3M6MP2AW.js}

@@ -1,6 +1,6 @@
 import {
   PProgressRing
-} from "./chunk.PTYRNZEN.js";
+} from "./chunk.MYYVEAVM.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = PProgressRing;

package/cdn/chunks/{chunk.XWY3MZ6R.js → chunk.3QCCHMPF.js}

@@ -1,9 +1,9 @@
-import {
-  animation_styles_default
-} from "./chunk.MIO56OH6.js";
 import {
   dist_exports
 } from "./chunk.QAXMMGDR.js";
+import {
+  animation_styles_default
+} from "./chunk.MIO56OH6.js";
 import {
   watch
 } from "./chunk.FA5RT4K4.js";
@@ -11,7 +11,7 @@ import {
   PureElement,
   n,
   r2 as r
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.OAMNUIMI.js → chunk.3WBGMRRG.js}

@@ -1,6 +1,6 @@
 import {
   PPaginate
-} from "./chunk.DXTGRVGR.js";
+} from "./chunk.EN6ILE6O.js";
 
 // src/components/paginate/paginate.ts
 var paginate_default = PPaginate;

package/cdn/chunks/{chunk.TERVPTVV.js → chunk.437MRVQT.js}

@@ -1,6 +1,6 @@
 import {
   PRelativeTime
-} from "./chunk.ULH6JJDS.js";
+} from "./chunk.QSYI2SCW.js";
 
 // src/react/relative-time/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.DGNKYXNV.js → chunk.4CD7GO46.js}

@@ -13,13 +13,13 @@ import {
 } from "./chunk.A56LY5J2.js";
 import {
   PIcon
-} from "./chunk.6ZJIQ3OO.js";
+} from "./chunk.Q2N5XUX2.js";
 import {
   PureElement,
   e,
   n,
   r
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.RNXVFUL6.js → chunk.4CT47WHM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.5BTTH5Q4.js";
 import {
   PPopup
-} from "./chunk.APT7UDOP.js";
+} from "./chunk.TLT3SHPQ.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -18,15 +18,15 @@ import {
   animateTo,
   stopAnimations
 } from "./chunk.S7GYYU7Z.js";
+import {
+  LocalizeController
+} from "./chunk.3C33BQBP.js";
 import {
   to
 } from "./chunk.DQNILPUT.js";
 import {
   Rt
 } from "./chunk.A56LY5J2.js";
-import {
-  LocalizeController
-} from "./chunk.3C33BQBP.js";
 import {
   watch
 } from "./chunk.FA5RT4K4.js";
@@ -34,7 +34,7 @@ import {
   PureElement,
   e,
   n
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.TNTRQLAI.js → chunk.4UAHQBV3.js}

@@ -1,6 +1,6 @@
 import {
   PProgressBar
-} from "./chunk.BMB2XSW4.js";
+} from "./chunk.DFXCQH6E.js";
 
 // src/react/progress-bar/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.NLRCD5IF.js → chunk.4UMGYGCT.js}

@@ -10,7 +10,7 @@ import {
 import {
   PureElement,
   n
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.V4Y2KEDK.js → chunk.4ZFM42RV.js}

@@ -1,6 +1,6 @@
 import {
   PCarousel
-} from "./chunk.OF3LANBQ.js";
+} from "./chunk.NR67PS3K.js";
 
 // src/components/carousel/carousel.ts
 var carousel_default = PCarousel;

package/cdn/chunks/{chunk.SHKU6BRY.js → chunk.54ARGY7K.js}

@@ -1,6 +1,6 @@
 import {
   PTooltip
-} from "./chunk.OIF3E3FP.js";
+} from "./chunk.TPJ44ZP4.js";
 import {
   copy_button_styles_default
 } from "./chunk.RNZSUMOB.js";
@@ -8,21 +8,21 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.F6XYW4W5.js";
-import {
-  Rt
-} from "./chunk.A56LY5J2.js";
 import {
   LocalizeController
 } from "./chunk.3C33BQBP.js";
+import {
+  Rt
+} from "./chunk.A56LY5J2.js";
 import {
   PIcon
-} from "./chunk.6ZJIQ3OO.js";
+} from "./chunk.Q2N5XUX2.js";
 import {
   PureElement,
   e,
   n,
   r
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/{dist/chunks/chunk.IE3IBABG.js → cdn/chunks/chunk.57SLCBW6.js}

@@ -1,6 +1,6 @@
 import {
   PTab
-} from "./chunk.KLVKI5ZA.js";
+} from "./chunk.ATNYKWRJ.js";
 
 // src/react/tab/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.WNK36JEI.js → chunk.5JPQTWRA.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.HVX7WCKY.js";
 import {
   PCheckbox
-} from "./chunk.DD4E52IU.js";
+} from "./chunk.YHHEUVX5.js";
 import {
   Ft
 } from "./chunk.NYJ7YDN4.js";
 import {
   PSpinner
-} from "./chunk.S3BYOFL2.js";
+} from "./chunk.M2UVDWDV.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -19,15 +19,15 @@ import {
   shimKeyframesHeightAuto,
   stopAnimations
 } from "./chunk.S7GYYU7Z.js";
-import {
-  Rt
-} from "./chunk.A56LY5J2.js";
 import {
   LocalizeController
 } from "./chunk.3C33BQBP.js";
+import {
+  Rt
+} from "./chunk.A56LY5J2.js";
 import {
   PIcon
-} from "./chunk.6ZJIQ3OO.js";
+} from "./chunk.Q2N5XUX2.js";
 import {
   watch
 } from "./chunk.FA5RT4K4.js";
@@ -36,7 +36,7 @@ import {
   e,
   n,
   r
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.WBJHCPTT.js → chunk.5LGQSWGS.js}

@@ -1,6 +1,6 @@
 import {
   PInclude
-} from "./chunk.NLRCD5IF.js";
+} from "./chunk.4UMGYGCT.js";
 
 // src/components/include/include.ts
 var include_default = PInclude;

package/cdn/chunks/{chunk.XEFBTZSC.js → chunk.65KHYTKI.js}

@@ -1,6 +1,6 @@
 import {
   PAvatar
-} from "./chunk.AVDNDDYX.js";
+} from "./chunk.UVECENZ3.js";
 
 // src/react/avatar/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.WZF2WCDB.js → chunk.677Y7C4K.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.B4NXU6TF.js";
 import {
   PButtonGroup
-} from "./chunk.LY3LE5QZ.js";
+} from "./chunk.RCNAINO7.js";
 import {
   form_control_styles_default
 } from "./chunk.IQ5OJYFT.js";
@@ -27,7 +27,7 @@ import {
   e,
   n,
   r
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.VGCTNECY.js → chunk.67LBZALL.js}

@@ -1,6 +1,6 @@
 import {
   POption
-} from "./chunk.KH4ME4SU.js";
+} from "./chunk.GRBYA4V2.js";
 
 // src/components/option/option.ts
 var option_default = POption;

package/{dist/chunks/chunk.OWTXOI4D.js → cdn/chunks/chunk.6BI77NP5.js}

@@ -1,6 +1,6 @@
 import {
   PTooltip
-} from "./chunk.I6MDCBFW.js";
+} from "./chunk.TPJ44ZP4.js";
 
 // src/react/tooltip/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.3DMKIDBG.js → cdn/chunks/chunk.6JQYCKP4.js}

@@ -1,6 +1,6 @@
 import {
   PFormatNumber
-} from "./chunk.WQB6IAGN.js";
+} from "./chunk.HPOGJMJD.js";
 
 // src/react/format-number/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.KYNDDQVY.js → chunk.6PAUTCI2.js}

@@ -1,6 +1,6 @@
 import {
   PColorPicker
-} from "./chunk.7BEW3BPX.js";
+} from "./chunk.S7FCHB3E.js";
 
 // src/react/color-picker/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.FNNWKCOV.js → chunk.6PIMHMFH.js}

@@ -1,6 +1,6 @@
 import {
   PSmartContainer
-} from "./chunk.3MZ4TRYS.js";
+} from "./chunk.BKG7VKHW.js";
 
 // src/components/smart-container/smart-container.ts
 var smart_container_default = PSmartContainer;

package/{dist/chunks/chunk.J2WI4NNT.js → cdn/chunks/chunk.6VX4J4OB.js}

@@ -1,6 +1,6 @@
 import {
   POption
-} from "./chunk.HXZO3SHH.js";
+} from "./chunk.GRBYA4V2.js";
 
 // src/react/option/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.NV34MX24.js → chunk.74LC2X3Z.js}

@@ -1,6 +1,6 @@
 import {
   PMenuLabel
-} from "./chunk.OP56BTX4.js";
+} from "./chunk.PVTLBIH4.js";
 
 // src/react/menu-label/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.JIW4YQOD.js → chunk.7F6OZPNT.js}

@@ -7,12 +7,12 @@ import {
 import {
   clamp
 } from "./chunk.HF7GESMZ.js";
-import {
-  to
-} from "./chunk.DQNILPUT.js";
 import {
   LocalizeController
 } from "./chunk.3C33BQBP.js";
+import {
+  to
+} from "./chunk.DQNILPUT.js";
 import {
   watch
 } from "./chunk.FA5RT4K4.js";
@@ -20,7 +20,7 @@ import {
   PureElement,
   e,
   n
-} from "./chunk.MTYGR5YQ.js";
+} from "./chunk.QEGS5JSY.js";
 import {
   component_styles_default
 } from "./chunk.DNSDK7ZG.js";

package/cdn/chunks/{chunk.VB6QDAU2.js → chunk.7GUVBCZ5.js}

@@ -1,6 +1,6 @@
 import {
   PIconButton
-} from "./chunk.DGNKYXNV.js";
+} from "./chunk.4CD7GO46.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = PIconButton;

package/cdn/chunks/{chunk.CV5OXDIY.js → chunk.7LALR5BY.js}

@@ -1,6 +1,6 @@
 import {
   PAnimatedImage
-} from "./chunk.GGK37OVO.js";
+} from "./chunk.J7XDBBPC.js";
 
 // src/react/animated-image/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.6TB7OHOD.js → cdn/chunks/chunk.7QUORSJX.js}

@@ -1,6 +1,6 @@
 import {
   PSwitch
-} from "./chunk.ZMKVG2GC.js";
+} from "./chunk.LUDC7QBX.js";
 
 // src/components/switch/switch.ts
 var switch_default = PSwitch;

package/cdn/chunks/{chunk.OBL3PCZ5.js → chunk.A6M7HJMZ.js}

@@ -1,6 +1,6 @@
 import {
   PTextarea
-} from "./chunk.6PLDYUHN.js";
+} from "./chunk.Y2RREHIP.js";
 
 // src/react/textarea/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.HAB5SZAX.js → cdn/chunks/chunk.A7Y3AX7K.js}

@@ -1,6 +1,6 @@
 import {
   PDetails
-} from "./chunk.SHDINQ4D.js";
+} from "./chunk.BXLWXUV7.js";
 
 // src/react/details/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.LB57O5DL.js → cdn/chunks/chunk.AHWNC4ZQ.js}

@@ -1,6 +1,6 @@
 import {
   PPopup
-} from "./chunk.M4BTZ2LM.js";
+} from "./chunk.TLT3SHPQ.js";
 
 // src/react/popup/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.DOLP3MCM.js → chunk.AJ3UFPWH.js}

@@ -1,6 +1,6 @@
 import {
   PQrCode
-} from "./chunk.MS6FQUW7.js";
+} from "./chunk.Q2XEXSAM.js";
 
 // src/components/qr-code/qr-code.ts
 var qr_code_default = PQrCode;