Socket
Socket
Sign inDemoInstall

theui-sveltekit

Package Overview
Dependencies
225
Maintainers
1
Versions
79
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0-beta.58 to 1.0.0-beta.59

4

LICENSE.md
# MIT License
<br><br>
<h3 class="mt-0 text-2xl">{"Copyright " + {(new Date()).getFullYear()} + " TheUI"}</h3>

@@ -7,2 +9,2 @@ <br>

<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>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.</p>
<p>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.</p>

430

package.json
{
"name": "theui-sveltekit",
"version": "1.0.0-beta.58",
"version": "1.0.0-beta.59",
"description": "theui-sveltekit A component library by TheUI. Out-of-the-box accessible and easy to customize built with TailwindCSS.",

@@ -25,3 +25,4 @@ "author": {

"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --plugin-search-dir . --write ."
},

@@ -33,17 +34,19 @@ "engines": {

"devDependencies": {
"@playwright/test": "^1.38.1",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/package": "^2.2.2",
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/package": "^2.2.6",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"postcss-load-config": "^4.0.1",
"svelte": "^4.2.1",
"svelte-check": "^3.5.2",
"svelte-preprocess": "^5.0.4",
"svelte2tsx": "^0.6.23",
"tailwindcss": "^3.3.3",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^4.5.0",
"vitest": "^0.32.4"
"postcss": "^8.4.32",
"postcss-load-config": "^5.0.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-preprocess": "^5.1.3",
"svelte2tsx": "^0.7.0",
"tailwindcss": "^3.3.6",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3",
"vitest": "^1.2.0"
},

@@ -54,25 +57,25 @@ "peerDependencies": {

"dependencies": {
"@sveltejs/kit": "^1.25.2",
"@tailwindcss/forms": "^0.5.6",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@tiptap/core": "^2.1.6",
"@tiptap/extension-code": "^2.1.6",
"@tiptap/extension-color": "^2.1.6",
"@tiptap/extension-highlight": "^2.1.11",
"@tiptap/extension-image": "^2.1.6",
"@tiptap/extension-link": "^2.1.6",
"@tiptap/extension-placeholder": "^2.1.6",
"@tiptap/extension-subscript": "^2.1.11",
"@tiptap/extension-superscript": "^2.1.11",
"@tiptap/extension-table": "^2.1.6",
"@tiptap/extension-table-cell": "^2.1.6",
"@tiptap/extension-table-header": "^2.1.6",
"@tiptap/extension-table-row": "^2.1.6",
"@tiptap/core": "^2.1.16",
"@tiptap/extension-code": "^2.1.16",
"@tiptap/extension-color": "^2.1.16",
"@tiptap/extension-highlight": "^2.1.16",
"@tiptap/extension-image": "^2.1.16",
"@tiptap/extension-link": "^2.1.16",
"@tiptap/extension-placeholder": "^2.1.16",
"@tiptap/extension-subscript": "^2.1.16",
"@tiptap/extension-superscript": "^2.1.16",
"@tiptap/extension-table": "^2.1.16",
"@tiptap/extension-table-cell": "^2.1.16",
"@tiptap/extension-table-header": "^2.1.16",
"@tiptap/extension-table-row": "^2.1.16",
"@tiptap/extension-text-align": "^2.1.11",
"@tiptap/extension-text-style": "^2.1.6",
"@tiptap/extension-typography": "^2.1.6",
"@tiptap/extension-underline": "^2.1.6",
"@tiptap/extension-youtube": "^2.1.6",
"@tiptap/pm": "^2.1.6",
"@tiptap/starter-kit": "^2.1.6",
"@tiptap/extension-text-style": "^2.1.16",
"@tiptap/extension-typography": "^2.1.16",
"@tiptap/extension-underline": "^2.1.16",
"@tiptap/extension-youtube": "^2.1.16",
"@tiptap/pm": "^2.1.16",
"@tiptap/starter-kit": "^2.1.16",
"prettier": "^3.2.5",
"tailwind-merge": "^1.14.0"

@@ -86,2 +89,48 @@ },

"types": "./dist/index.d.ts",
"keywords": [
"sveltekit-components",
"svelte",
"sveltekit",
"components",
"tailwindcss",
"theui",
"mbparvez",
"ui",
"accordion",
"alert",
"badges",
"breadcrumbs",
"buttons",
"buttons-groups",
"chips",
"collapses",
"container",
"dropdown",
"form",
"checkbox",
"editor",
"fieldset",
"file-input",
"helper",
"input",
"label",
"radio",
"select",
"textarea",
"toggle",
"svg-icon",
"modals",
"navbar",
"notifications",
"offcanvas",
"pagination",
"exit pop-up",
"entry pop-up",
"progress",
"table",
"tabs",
"tooltips",
"darkmode",
"close"
],
"exports": {

@@ -92,257 +141,208 @@ ".": {

},
"./functions": "./dist/functions.ts",
"./preset": "./dist/preset.cjs",
"./stores": "./dist/stores.ts",
"./style": "./dist/style.postcss",
"./Accordion.svelte": {
"svelte": "./dist/Accordion/Accordion.svelte",
"types": "./dist/Accordion/Accordion.svelte.d.ts"
"types": "./dist/Accordion\\Accordion.svelte.d.ts",
"svelte": "./dist/Accordion\\Accordion.svelte"
},
"./AccordionItem.svelte": {
"svelte": "./dist/Accordion/AccordionItem.svelte",
"types": "./dist/Accordion/AccordionItem.svelte.d.ts"
"types": "./dist/Accordion\\AccordionItem.svelte.d.ts",
"svelte": "./dist/Accordion\\AccordionItem.svelte"
},
"./Alert.svelte": {
"svelte": "./dist/Alert/Alert.svelte",
"types": "./dist/Alert/Alert.svelte.d.ts"
"types": "./dist/Alert\\Alert.svelte.d.ts",
"svelte": "./dist/Alert\\Alert.svelte"
},
"./Badge.svelte": {
"svelte": "./dist/Badge/Badge.svelte",
"types": "./dist/Badge/Badge.svelte.d.ts"
"types": "./dist/Badge\\Badge.svelte.d.ts",
"svelte": "./dist/Badge\\Badge.svelte"
},
"./Breadcrumb.svelte": {
"svelte": "./dist/Breadcrumb/Breadcrumb.svelte",
"types": "./dist/Breadcrumb/Breadcrumb.svelte.d.ts"
"types": "./dist/Breadcrumb\\Breadcrumb.svelte.d.ts",
"svelte": "./dist/Breadcrumb\\Breadcrumb.svelte"
},
"./Button.svelte": {
"svelte": "./dist/Button/Button.svelte",
"types": "./dist/Button/Button.svelte.d.ts"
"types": "./dist/Button\\Button.svelte.d.ts",
"svelte": "./dist/Button\\Button.svelte"
},
"./ButtonGroup.svelte": {
"svelte": "./dist/Button/ButtonGroup.svelte",
"types": "./dist/Button/ButtonGroup.svelte.d.ts"
"types": "./dist/Button\\ButtonGroup.svelte.d.ts",
"svelte": "./dist/Button\\ButtonGroup.svelte"
},
"./Chips.svelte": {
"svelte": "./dist/Chips/Chips.svelte",
"types": "./dist/Chips/Chips.svelte.d.ts"
"types": "./dist/Chips\\Chips.svelte.d.ts",
"svelte": "./dist/Chips\\Chips.svelte"
},
"./Collapse.svelte": {
"svelte": "./dist/Collapse/Collapse.svelte",
"types": "./dist/Collapse/Collapse.svelte.d.ts"
"types": "./dist/Collapse\\Collapse.svelte.d.ts",
"svelte": "./dist/Collapse\\Collapse.svelte"
},
"./Container.svelte": {
"svelte": "./dist/Container/Container.svelte",
"types": "./dist/Container/Container.svelte.d.ts"
"types": "./dist/Container\\Container.svelte.d.ts",
"svelte": "./dist/Container\\Container.svelte"
},
"./Dropdown.svelte": {
"types": "./dist/Dropdown/Dropdown.svelte.d.ts",
"svelte": "./dist/Dropdown/Dropdown.svelte"
"types": "./dist/Dropdown\\Dropdown.svelte.d.ts",
"svelte": "./dist/Dropdown\\Dropdown.svelte"
},
"./DropdownItem.svelte": {
"types": "./dist/Dropdown/DropdownItem.svelte.d.ts",
"svelte": "./dist/Dropdown/DropdownItem.svelte"
"types": "./dist/Dropdown\\DropdownItem.svelte.d.ts",
"svelte": "./dist/Dropdown\\DropdownItem.svelte"
},
"./Checkbox.svelte": {
"types": "./dist/Form\\Checkbox.svelte.d.ts",
"svelte": "./dist/Form\\Checkbox.svelte"
},
"./Editor.svelte": {
"types": "./dist/Form\\Editor.svelte.d.ts",
"svelte": "./dist/Form\\Editor.svelte"
},
"./Fieldset.svelte": {
"types": "./dist/Form\\Fieldset.svelte.d.ts",
"svelte": "./dist/Form\\Fieldset.svelte"
},
"./FileInput.svelte": {
"types": "./dist/Form\\FileInput.svelte.d.ts",
"svelte": "./dist/Form\\FileInput.svelte"
},
"./Form.svelte": {
"types": "./dist/Form\\Form.svelte.d.ts",
"svelte": "./dist/Form\\Form.svelte"
},
"./Helper.svelte": {
"types": "./dist/Form\\Helper.svelte.d.ts",
"svelte": "./dist/Form\\Helper.svelte"
},
"./Input.svelte": {
"types": "./dist/Form\\Input.svelte.d.ts",
"svelte": "./dist/Form\\Input.svelte"
},
"./Label.svelte": {
"types": "./dist/Form\\Label.svelte.d.ts",
"svelte": "./dist/Form\\Label.svelte"
},
"./Radio.svelte": {
"types": "./dist/Form\\Radio.svelte.d.ts",
"svelte": "./dist/Form\\Radio.svelte"
},
"./Select.svelte": {
"types": "./dist/Form\\Select.svelte.d.ts",
"svelte": "./dist/Form\\Select.svelte"
},
"./Textarea.svelte": {
"types": "./dist/Form\\Textarea.svelte.d.ts",
"svelte": "./dist/Form\\Textarea.svelte"
},
"./Toggle.svelte": {
"types": "./dist/Form\\Toggle.svelte.d.ts",
"svelte": "./dist/Form\\Toggle.svelte"
},
"./Modal.svelte": {
"svelte": "./dist/Modal/Modal.svelte",
"types": "./dist/Modal/Modal.svelte.d.ts"
"types": "./dist/Modal\\Modal.svelte.d.ts",
"svelte": "./dist/Modal\\Modal.svelte"
},
"./Navbar.svelte": {
"svelte": "./dist/Navbar/Navbar.svelte",
"types": "./dist/Navbar/Navbar.svelte.d.ts"
"types": "./dist/Navbar\\Navbar.svelte.d.ts",
"svelte": "./dist/Navbar\\Navbar.svelte"
},
"./NavBrand.svelte": {
"svelte": "./dist/Navbar/NavBrand.svelte",
"types": "./dist/Navbar/NavBrand.svelte.d.ts"
"types": "./dist/Navbar\\NavBrand.svelte.d.ts",
"svelte": "./dist/Navbar\\NavBrand.svelte"
},
"./NavCollapse.svelte": {
"svelte": "./dist/Navbar/NavCollapse.svelte",
"types": "./dist/Navbar/NavCollapse.svelte.d.ts"
"types": "./dist/Navbar\\NavCollapse.svelte.d.ts",
"svelte": "./dist/Navbar\\NavCollapse.svelte"
},
"./NavContainer.svelte": {
"svelte": "./dist/Navbar/NavContainer.svelte",
"types": "./dist/Navbar/NavContainer.svelte.d.ts"
"types": "./dist/Navbar\\NavContainer.svelte.d.ts",
"svelte": "./dist/Navbar\\NavContainer.svelte"
},
"./NavDropdown.svelte": {
"svelte": "./dist/Navbar/NavDropdown.svelte",
"types": "./dist/Navbar/NavDropdown.svelte.d.ts"
"types": "./dist/Navbar\\NavDropdown.svelte.d.ts",
"svelte": "./dist/Navbar\\NavDropdown.svelte"
},
"./NavLink.svelte": {
"svelte": "./dist/Navbar/NavLink.svelte",
"types": "./dist/Navbar/NavLink.svelte.d.ts"
"types": "./dist/Navbar\\NavLink.svelte.d.ts",
"svelte": "./dist/Navbar\\NavLink.svelte"
},
"./NavToggle.svelte": {
"svelte": "./dist/Navbar/Navbar.svelte",
"types": "./dist/Navbar/Navbar.svelte.d.ts"
"types": "./dist/Navbar\\NavToggle.svelte.d.ts",
"svelte": "./dist/Navbar\\NavToggle.svelte"
},
"./Notification.svelte": {
"svelte": "./dist/Notification/Notification.svelte",
"types": "./dist/Notification/Notification.svelte.d.ts"
"types": "./dist/Notification\\Notification.svelte.d.ts",
"svelte": "./dist/Notification\\Notification.svelte"
},
"./Offcanvas.svelte": {
"svelte": "./dist/Offcanvas/Offcanvas.svelte",
"types": "./dist/Offcanvas/Offcanvas.svelte.d.ts"
"types": "./dist/Offcanvas\\Offcanvas.svelte.d.ts",
"svelte": "./dist/Offcanvas\\Offcanvas.svelte"
},
"./Pagination.svelte": {
"svelte": "./dist/Pagination/Pagination.svelte",
"types": "./dist/Pagination/Pagination.svelte.d.ts"
"types": "./dist/Pagination\\Pagination.svelte.d.ts",
"svelte": "./dist/Pagination\\Pagination.svelte"
},
"./Popup.svelte": {
"svelte": "./dist/Popup/Popup.svelte",
"types": "./dist/Popup/Popup.svelte.d.ts"
"types": "./dist/Popup\\Popup.svelte.d.ts",
"svelte": "./dist/Popup\\Popup.svelte"
},
"./Progress.svelte": {
"svelte": "./dist/Progress/Progress.svelte",
"types": "./dist/Progress/Progress.svelte.d.ts"
"types": "./dist/Progress\\Progress.svelte.d.ts",
"svelte": "./dist/Progress\\Progress.svelte"
},
"./Svg.svelte": {
"svelte": "./dist/Svg/Svg.svelte",
"types": "./dist/Svg/Svg.svelte.d.ts"
"types": "./dist/Svg\\Svg.svelte.d.ts",
"svelte": "./dist/Svg\\Svg.svelte"
},
"./Table.svelte": {
"svelte": "./dist/Table/Table.svelte",
"types": "./dist/Table/Table.svelte.d.ts"
"types": "./dist/Table\\Table.svelte.d.ts",
"svelte": "./dist/Table\\Table.svelte"
},
"./TBody.svelte": {
"svelte": "./dist/Table/TBody.svelte",
"types": "./dist/Table/TBody.svelte.d.ts"
"types": "./dist/Table\\TBody.svelte.d.ts",
"svelte": "./dist/Table\\TBody.svelte"
},
"./TD.svelte": {
"svelte": "./dist/Table/TD.svelte",
"types": "./dist/Table/TD.svelte.d.ts"
"types": "./dist/Table\\TD.svelte.d.ts",
"svelte": "./dist/Table\\TD.svelte"
},
"./TH.svelte": {
"svelte": "./dist/Table/TH.svelte",
"types": "./dist/Table/TH.svelte.d.ts"
"types": "./dist/Table\\TH.svelte.d.ts",
"svelte": "./dist/Table\\TH.svelte"
},
"./THead.svelte": {
"svelte": "./dist/Table/THead.svelte",
"types": "./dist/Table/THead.svelte.d.ts"
"types": "./dist/Table\\THead.svelte.d.ts",
"svelte": "./dist/Table\\THead.svelte"
},
"./TR.svelte": {
"svelte": "./dist/Table/TR.svelte",
"types": "./dist/Table/TR.svelte.d.ts"
"types": "./dist/Table\\TR.svelte.d.ts",
"svelte": "./dist/Table\\TR.svelte"
},
"./Tab.svelte": {
"svelte": "./dist/Tabs/Tab.svelte",
"types": "./dist/Tabs/Tab.svelte.d.ts"
"types": "./dist/Tabs\\Tab.svelte.d.ts",
"svelte": "./dist/Tabs\\Tab.svelte"
},
"./TabList.svelte": {
"svelte": "./dist/Tabs/TabList.svelte",
"types": "./dist/Tabs/TabList.svelte.d.ts"
"types": "./dist/Tabs\\TabList.svelte.d.ts",
"svelte": "./dist/Tabs\\TabList.svelte"
},
"./TabPanel.svelte": {
"svelte": "./dist/Tabs/TabPanel.svelte",
"types": "./dist/Tabs/TabPanel.svelte.d.ts"
"types": "./dist/Tabs\\TabPanel.svelte.d.ts",
"svelte": "./dist/Tabs\\TabPanel.svelte"
},
"./Tabs.svelte": {
"svelte": "./dist/Tabs/Tabs.svelte",
"types": "./dist/Tabs/Tabs.svelte.d.ts"
"types": "./dist/Tabs\\Tabs.svelte.d.ts",
"svelte": "./dist/Tabs\\Tabs.svelte"
},
"./Tooltip.svelte": {
"svelte": "./dist/Tooltip/Tooltip.svelte",
"types": "./dist/Tooltip/Tooltip.svelte.d.ts"
"types": "./dist/Tooltip\\Tooltip.svelte.d.ts",
"svelte": "./dist/Tooltip\\Tooltip.svelte"
},
"./Close.svelte": {
"svelte": "./dist/Form/Close.svelte",
"types": "./dist/Utility/Close.svelte.d.ts"
"types": "./dist/Utility\\Close.svelte.d.ts",
"svelte": "./dist/Utility\\Close.svelte"
},
"./DarkMode.svelte": {
"svelte": "./dist/Utility/DarkMode.svelte",
"types": "./dist/Utility/DarkMode.svelte.d.ts"
"types": "./dist/Utility\\DarkMode.svelte.d.ts",
"svelte": "./dist/Utility\\DarkMode.svelte"
},
"./Checkbox.svelte": {
"svelte": "./dist/Form/Checkbox.svelte",
"types": "./dist/Form/Checkbox.svelte.d.ts"
},
"./Editor.svelte": {
"svelte": "./dist/Form/Editor.svelte",
"types": "./dist/Form/Editor.svelte.d.ts"
},
"./Fieldset.svelte": {
"svelte": "./dist/Form/Fieldset.svelte",
"types": "./dist/Form/Fieldset.svelte.d.ts"
},
"./FileInput.svelte": {
"svelte": "./dist/Form/FileInput.svelte",
"types": "./dist/Form/FileInput.svelte.d.ts"
},
"./Form.svelte": {
"svelte": "./dist/Form/Form.svelte",
"types": "./dist/Form/Form.svelte.d.ts"
},
"./Helper.svelte": {
"svelte": "./dist/Form/Helper.svelte",
"types": "./dist/Form/Helper.svelte.d.ts"
},
"./Input.svelte": {
"svelte": "./dist/Form/Input.svelte",
"types": "./dist/Form/Input.svelte.d.ts"
},
"./Label.svelte": {
"svelte": "./dist/Form/Label.svelte",
"types": "./dist/Form/Label.svelte.d.ts"
},
"./Radio.svelte": {
"svelte": "./dist/Form/Radio.svelte",
"types": "./dist/Form/Radio.svelte.d.ts"
},
"./Select.svelte": {
"svelte": "./dist/Form/Select.svelte",
"types": "./dist/Form/Select.svelte.d.ts"
},
"./Textarea.svelte": {
"svelte": "./dist/Form/Textarea.svelte",
"types": "./dist/Form/Textarea.svelte.d.ts"
},
"./Toggle.svelte": {
"svelte": "./dist/Form/Toggle.svelte",
"types": "./dist/Form/Toggle.svelte.d.ts"
}
},
"keywords": [
"sveltekit-components",
"svelte",
"sveltekit",
"components",
"tailwindcss",
"theui",
"mbparvez",
"ui",
"accordion",
"alert",
"badges",
"breadcrumbs",
"buttons",
"buttons-groups",
"chips",
"collapses",
"container",
"dropdown",
"form",
"checkbox",
"editor",
"fieldset",
"file-input",
"helper",
"input",
"label",
"radio",
"select",
"textarea",
"toggle",
"svg-icon",
"modals",
"navbar",
"notifications",
"offcanvas",
"pagination",
"exit pop-up",
"entry pop-up",
"progress",
"table",
"tabs",
"tooltips",
"darkmode",
"close"
]
}
"./package.json": "./package.json"
}
}

186

README.md

@@ -23,8 +23,8 @@ <h1 align="center"> TheUI Sveltekit Components</h1>

* Accessible components
* Easy control of dark and light modes
* Effortless theming and branding with a single line of CSS
* Highly customizable
* RTL supports (Upcoming)
* Fully typed for enhanced development
- Accessible components
- Easy control of dark and light modes
- Effortless theming and branding with a single line of CSS
- Highly customizable
- RTL supports (Upcoming)
- Fully typed for enhanced development

@@ -35,44 +35,46 @@ <br>

* General Components
- General Components
* [Accordion](https://www.svelte.theui.dev/accordion)
* [Alert](https://www.svelte.theui.dev/alert)
* [Badge](https://www.svelte.theui.dev/badge)
* [Breadcrumb](https://www.svelte.theui.dev/breadcrumb)
* [Button](https://www.svelte.theui.dev/button)
* [Button group](https://www.svelte.theui.dev/button-group)
* [Chips](https://www.svelte.theui.dev/chips)
* [Collapse](https://www.svelte.theui.dev/collapse)
* [Container](https://www.svelte.theui.dev/container)
* [Dropdown](https://www.svelte.theui.dev/dropdown)
* [Modal](https://www.svelte.theui.dev/modal)
* [Navbar](https://www.svelte.theui.dev/navbar)
* [Notification](https://www.svelte.theui.dev/notification)
* [Offcanvas](https://www.svelte.theui.dev/offcanvas)
* [Pagination](https://www.svelte.theui.dev/pagination)
* [Popup (Exit and Entry popup)](https://www.svelte.theui.dev/popup)
* [Progress bar](https://www.svelte.theui.dev/progress-bar)
* [SVG](https://www.svelte.theui.dev/svg)
* [Table](https://www.svelte.theui.dev/table)
* [Tabs](https://www.svelte.theui.dev/tabs)
* [Tooltip](https://www.svelte.theui.dev/tooltip)
- [Accordion](https://www.svelte.theui.dev/components/accordion)
- [Alert](https://www.svelte.theui.dev/components/alert)
- [Badge](https://www.svelte.theui.dev/components/badge)
- [Breadcrumb](https://www.svelte.theui.dev/components/breadcrumb)
- [Button](https://www.svelte.theui.dev/components/button)
- [Button group](https://www.svelte.theui.dev/components/button-group)
- [Chips](https://www.svelte.theui.dev/components/chips)
- [Collapse](https://www.svelte.theui.dev/components/collapse)
- [Container](https://www.svelte.theui.dev/components/container)
- [Drawer](https://www.svelte.theui.dev/components/drawer)
- [Dropdown](https://www.svelte.theui.dev/components/dropdown)
- [Floating Button](https://www.svelte.theui.dev/components/float-button)
- [Modal](https://www.svelte.theui.dev/components/modal)
- [Navbar](https://www.svelte.theui.dev/components/navbar)
- [Notification](https://www.svelte.theui.dev/components/notification)
- [Pagination](https://www.svelte.theui.dev/components/pagination)
- [Popup (Exit & Entry popup)](https://www.svelte.theui.dev/components/popup)
- [Progress bar](https://www.svelte.theui.dev/components/progress-bar)
- [SVG](https://www.svelte.theui.dev/components/svg)
- [Table](https://www.svelte.theui.dev/components/table)
- [Tabs](https://www.svelte.theui.dev/components/tabs)
- [Tooltip](https://www.svelte.theui.dev/components/tooltip)
* Form Components
* [Form](https://www.svelte.theui.dev/form)
* [Fieldset](https://www.svelte.theui.dev/fieldset)
* [Helper text](https://www.svelte.theui.dev/helper-text)
* [Check-box](https://www.svelte.theui.dev/check-box)
* [Text editor](https://www.svelte.theui.dev/text-editor)
* [File input](https://www.svelte.theui.dev/file-input)
* [Input](https://www.svelte.theui.dev/input)
* [Label](https://www.svelte.theui.dev/label)
* [Radio button](https://www.svelte.theui.dev/radio-button)
* [Select](https://www.svelte.theui.dev/select)
* [Textarea](https://www.svelte.theui.dev/textarea)
* [Toggle](https://www.svelte.theui.dev/toggle)
- Form Components
* Utility
* [Close](https://www.svelte.theui.dev/close)
* [Dark mode](https://www.svelte.theui.dev/dark-mode)
- [Check-box](https://www.svelte.theui.dev/components/check-box)
- [Fieldset](https://www.svelte.theui.dev/components/fieldset)
- [File input](https://www.svelte.theui.dev/components/file-input)
- [Form](https://www.svelte.theui.dev/components/form)
- [Helper text](https://www.svelte.theui.dev/components/helper-text)
- [Input](https://www.svelte.theui.dev/components/input)
- [Label](https://www.svelte.theui.dev/components/label)
- [Radio button](https://www.svelte.theui.dev/components/radio-button)
- [Select](https://www.svelte.theui.dev/components/select)
- [Textarea](https://www.svelte.theui.dev/components/textarea)
- [Text editor](https://www.svelte.theui.dev/components/text-editor)
- [Toggle](https://www.svelte.theui.dev/components/toggle)
- Utility
- [Close](https://www.svelte.theui.dev/components/close)
- [Dark mode](https://www.svelte.theui.dev/components/dark-mode)
<br>

@@ -142,3 +144,3 @@

presets: [require("theui-sveltekit/preset")], // New line
darkMode: 'class',
darkMode: "class",
theme: {

@@ -153,2 +155,3 @@ extend: {},

```
If you wish to use the default colors or desire an instant design without any color customization, you can utilize the `style.postcss` file, which contains all the default CSS variables used in this component library. To do this, open `__layout.svelte` and import the core style file as follows:

@@ -166,26 +169,26 @@

```css
@layer base{
@layer base {
:root {
--ui-brand : 80 70 230; /* #5046E6 */
--ui-brand-active : 67 56 202; /* #4338CA */
--ui-brand-secondary : 253 230 138; /* #FDE68A */
--ui-brand-secondary-active : 252 211 77; /* #FCD34D */
--ui-text-on-brand : 255 255 255; /* #FFFFFF */
--ui-text-on-brand-secondary : 8 8 24; /* #080818 */
--ui-text-default : 8 8 24; /* #080818 */
--ui-bg-primary : 255 255 255; /* #FFFFFF */
--ui-bg-secondary : 243 244 246; /* #F3F4F6 */
--ui-bg-tertiary : 229 231 235; /* #E5E7EB */
--ui-brand: 80 70 230; /* #5046E6 */
--ui-brand-active: 67 56 202; /* #4338CA */
--ui-brand-secondary: 253 230 138; /* #FDE68A */
--ui-brand-secondary-active: 252 211 77; /* #FCD34D */
--ui-text-on-brand: 255 255 255; /* #FFFFFF */
--ui-text-on-brand-secondary: 8 8 24; /* #080818 */
--ui-text-default: 8 8 24; /* #080818 */
--ui-bg-primary: 255 255 255; /* #FFFFFF */
--ui-bg-secondary: 243 244 246; /* #F3F4F6 */
--ui-bg-tertiary: 229 231 235; /* #E5E7EB */
--max-width : 1408px;
--max-width: 1408px;
}
:root.dark {
--ui-text-default : 229 231 235; /* #E5E7EB */
--ui-bg-primary : 8 8 24; /* #080818 */
--ui-bg-secondary : 22 22 38; /* #161626 */
--ui-bg-tertiary : 32 32 48; /* #202030 */
--ui-text-default: 229 231 235; /* #E5E7EB */
--ui-bg-primary: 8 8 24; /* #080818 */
--ui-bg-secondary: 22 22 38; /* #161626 */
--ui-bg-tertiary: 32 32 48; /* #202030 */
}
body{
body {
@apply bg-primary text-default;

@@ -211,2 +214,3 @@ }

### **Utility Variables**
There `--max-width` CSS variable exclusively used in the `Container` component to ensure that the width of the component remains consistent throughout the entire design. There is no dedicated CSS class for this property. Instead, you can apply it using a Tailwind CSS arbitrary value like `max-w-[var(--max-width)]`.

@@ -237,2 +241,3 @@

```
> Brand colors are universally accessible, ready to be used in various parts of your design. However, it's important to note that text colors are distinct from background colors, and vice versa. This separation ensures that you have the appropriate colors for both text and background elements, allowing for effective and visually pleasing design combinations.

@@ -246,14 +251,14 @@

| CLASS | DESCRIPTION |
| --- | ----------- |
| .[...]-brand | Apply the brand color to your component by using the ".bg-brand" class for the background and ".text-brand" for the foreground. |
| .[...]-brand-active | Use these classes to indicate different states, such as active or hover, for an element. For example, apply the brand color with slight variations using ".bg-brand-active" for the background and ".text-brand-active" for the foreground. |
| .[...]-brand-secondary | If you wish to use a secondary brand color for your components, you can do so with the ".bg-brand-secondary" class for the background and ".text-brand-secondary" for the foreground. These classes offer additional design flexibility. |
| .[...]-brand-secondary-active | Similar to ".[...]-brand-active," but designed for the secondary brand color. |
| .text-on-brand | This class is for the foreground color when using the background color ".bg-brand." |
| .text-on-brand-secondary | This class serves as the foreground color when using the background color ".bg-brand-secondary." |
| .text-default | This class represents the default text/foreground color for the component library. |
| .bg-primary | Use this class for the default/primary background color. |
| .bg-secondary | Apply this class for the secondary background color. |
| .bg-tertiary | Utilize this class for the tertiary background color. |
| CLASS | DESCRIPTION |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| .[...]-brand | Apply the brand color to your component by using the ".bg-brand" class for the background and ".text-brand" for the foreground. |
| .[...]-brand-active | Use these classes to indicate different states, such as active or hover, for an element. For example, apply the brand color with slight variations using ".bg-brand-active" for the background and ".text-brand-active" for the foreground. |
| .[...]-brand-secondary | If you wish to use a secondary brand color for your components, you can do so with the ".bg-brand-secondary" class for the background and ".text-brand-secondary" for the foreground. These classes offer additional design flexibility. |
| .[...]-brand-secondary-active | Similar to ".[...]-brand-active," but designed for the secondary brand color. |
| .text-on-brand | This class is for the foreground color when using the background color ".bg-brand." |
| .text-on-brand-secondary | This class serves as the foreground color when using the background color ".bg-brand-secondary." |
| .text-default | This class represents the default text/foreground color for the component library. |
| .bg-primary | Use this class for the default/primary background color. |
| .bg-secondary | Apply this class for the secondary background color. |
| .bg-tertiary | Utilize this class for the tertiary background color. |

@@ -266,8 +271,8 @@ <br>

* Identify the CSS variable you wish to customize. For instance, let's say you want to set your brand color to "rgb(255, 0, 0)" and change the default text color to "rgb(0, 0, 0)."
* Open the `./src/app.css` or `./src/app.postcss` file in your project, which contains your TailwindCSS styles and add the following lines to the file:
- Identify the CSS variable you wish to customize. For instance, let's say you want to set your brand color to "rgb(255, 0, 0)" and change the default text color to "rgb(0, 0, 0)."
- Open the `./src/app.css` or `./src/app.postcss` file in your project, which contains your TailwindCSS styles and add the following lines to the file:
```css
--ui-brand : 255 0 0;
--ui-text-default : 0 0 0;
--ui-brand: 255 0 0;
--ui-text-default: 0 0 0;
```

@@ -291,13 +296,13 @@

| COMPONENT/Property | CLASS/Selector | VALUE (Z-INDEX) |
| ------------------ | -------------- | --------------- |
| Dropdown | .dropdown .backdrop | 10 |
| Dropdown | .dropdown-content | 11 |
| Sticky positioned | .sticky, [class$=:sticky] | 20 |
| Fixed positioned | .fixed, [class$=:fixed] | 30 |
| Offcanvas | .offcanvas | 40 |
| Modal | .modal | 50 |
| Popup | .popup | 60
| Tooltip | .tooltip | 70
| Notifications | .notifications | 80
| COMPONENT/Property | CLASS/Selector | VALUE (Z-INDEX) |
| ------------------ | ------------------------- | --------------- |
| Dropdown | .dropdown .backdrop | 10 |
| Dropdown | .dropdown-content | 11 |
| Sticky positioned | .sticky, [class$=:sticky] | 20 |
| Fixed positioned | .fixed, [class$=:fixed] | 30 |
| Offcanvas | .offcanvas | 40 |
| Modal | .modal | 50 |
| Popup | .popup | 60 |
| Tooltip | .tooltip | 70 |
| Notifications | .notifications | 80 |

@@ -307,2 +312,3 @@ <br>

## **Contributions**
Prior to commencing work on new features or bug fixes, kindly inform us. If you wish to propose a new feature, please create a feature request in [Github Issues](https://github.com/mbparvezme/theui-sveltekit/issues). This promotes open discussions and avoids redundant efforts. It encompasses tasks like adding new components, introducing utility features, and making major changes to existing work.

@@ -332,2 +338,2 @@

## **Special Thanks To [Gosoft.io](https://www.gosoft.io) and [BIPBY Digital](https://www.bipby.digital) for being our digital partner**
## **Special Thanks To [Gosoft.io](https://www.gosoft.io) and [BIPBY Digital](https://www.bipby.digital) for being our digital partner**
dist/Accordion/Accordion.svelte
dist/Accordion/Accordion.svelte.d.ts
dist/Accordion/AccordionItem.svelte
dist/Accordion/AccordionItem.svelte.d.ts
dist/Alert/Alert.svelte
dist/Alert/Alert.svelte.d.ts
dist/Badge/Badge.svelte
dist/Badge/Badge.svelte.d.ts
dist/Breadcrumb/Breadcrumb.svelte
dist/Breadcrumb/Breadcrumb.svelte.d.ts
dist/Button/Button.svelte
dist/Button/Button.svelte.d.ts
dist/Button/ButtonGroup.svelte
dist/Button/ButtonGroup.svelte.d.ts
dist/Chips/Chips.svelte
dist/Chips/Chips.svelte.d.ts
dist/Collapse/Collapse.svelte
dist/Collapse/Collapse.svelte.d.ts
dist/Container/Container.svelte
dist/Container/Container.svelte.d.ts
dist/Dropdown/Dropdown.svelte
dist/Dropdown/Dropdown.svelte.d.ts
dist/Dropdown/DropdownItem.svelte
dist/Dropdown/DropdownItem.svelte.d.ts
dist/Form/Checkbox.svelte
dist/Form/Checkbox.svelte.d.ts
dist/Form/Editor.svelte
dist/Form/Editor.svelte.d.ts
dist/Form/Fieldset.svelte
dist/Form/Fieldset.svelte.d.ts
dist/Form/FileInput.svelte
dist/Form/FileInput.svelte.d.ts
dist/Form/Form.svelte
dist/Form/Form.svelte.d.ts
dist/Form/Helper.svelte
dist/Form/Helper.svelte.d.ts
dist/Form/Input.svelte
dist/Form/Input.svelte.d.ts
dist/Form/Label.svelte
dist/Form/Label.svelte.d.ts
dist/Form/Radio.svelte
dist/Form/Radio.svelte.d.ts
dist/Form/Select.svelte
dist/Form/Select.svelte.d.ts
dist/Form/Textarea.svelte
dist/Form/Textarea.svelte.d.ts
dist/Form/Toggle.svelte
dist/Form/Toggle.svelte.d.ts
dist/functions.d.ts
dist/functions.js
dist/index.d.ts
dist/index.js
dist/Modal/Modal.svelte
dist/Modal/Modal.svelte.d.ts
dist/Navbar/Navbar.svelte
dist/Navbar/Navbar.svelte.d.ts
dist/Navbar/NavBrand.svelte
dist/Navbar/NavBrand.svelte.d.ts
dist/Navbar/NavCollapse.svelte
dist/Navbar/NavCollapse.svelte.d.ts
dist/Navbar/NavContainer.svelte
dist/Navbar/NavContainer.svelte.d.ts
dist/Navbar/NavDropdown.svelte
dist/Navbar/NavDropdown.svelte.d.ts
dist/Navbar/NavLink.svelte
dist/Navbar/NavLink.svelte.d.ts
dist/Navbar/NavToggle.svelte
dist/Navbar/NavToggle.svelte.d.ts
dist/Notification/Notification.svelte
dist/Notification/Notification.svelte.d.ts
dist/Notification/Store.d.ts
dist/Notification/Store.js
dist/Offcanvas/Offcanvas.svelte
dist/Offcanvas/Offcanvas.svelte.d.ts
dist/Pagination/Pagination.svelte
dist/Pagination/Pagination.svelte.d.ts
dist/Popup/Popup.svelte
dist/Popup/Popup.svelte.d.ts
dist/preset.cjs
dist/preset.d.cts
dist/Progress/Progress.svelte
dist/Progress/Progress.svelte.d.ts
dist/stores.d.ts
dist/stores.js
dist/style.postcss
dist/Svg/Svg.svelte
dist/Svg/Svg.svelte.d.ts
dist/Table/Table.svelte
dist/Table/Table.svelte.d.ts
dist/Table/TBody.svelte
dist/Table/TBody.svelte.d.ts
dist/Table/TD.svelte
dist/Table/TD.svelte.d.ts
dist/Table/TH.svelte
dist/Table/TH.svelte.d.ts
dist/Table/THead.svelte
dist/Table/THead.svelte.d.ts
dist/Table/TR.svelte
dist/Table/TR.svelte.d.ts
dist/Tabs/Tab.svelte
dist/Tabs/Tab.svelte.d.ts
dist/Tabs/TabList.svelte
dist/Tabs/TabList.svelte.d.ts
dist/Tabs/TabPanel.svelte
dist/Tabs/TabPanel.svelte.d.ts
dist/Tabs/Tabs.svelte
dist/Tabs/Tabs.svelte.d.ts
dist/Tooltip/Tooltip.svelte
dist/Tooltip/Tooltip.svelte.d.ts
dist/types.d.ts
dist/types.js
dist/Utility/Close.svelte
dist/Utility/Close.svelte.d.ts
dist/Utility/DarkMode.svelte
dist/Utility/DarkMode.svelte.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc