StudioCMS UI is an Astro-native, fully accessible UI library.
-
All the components you need, without the pain of React.
-
-
-
-
-
-
-
- Divider
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Why install another Framework just for UI?
+
+
StudioCMS UI is an Astro-native, fully accessible UI library.
+
All the components you need, without the pain of React.
+
+
+
+
+
+
+
+ Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/content/docs/docs/changelog.md b/docs/src/content/docs/docs/changelog.md
index 1fd389b8..4cdf0e2d 100644
--- a/docs/src/content/docs/docs/changelog.md
+++ b/docs/src/content/docs/docs/changelog.md
@@ -1,139 +1,379 @@
----
-# Warning: This file is generated automatically. Do not edit!
-title: Release Notes
-description: Release notes for the @studiocms/ui package.
-editUrl: false
----
-
-This document contains release notes for the `@studiocms/ui` package.
-For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
-
-## 0.4.11
-
-- [#69](https://github.com/withstudiocms/ui/pull/69) [`ef29352`](https://github.com/withstudiocms/ui/commit/ef29352b03b87a34da163ade2aae6652ce819251) Thanks [@louisescher](https://github.com/louisescher)! - Fixes broken styles for flat success buttons in light mode and starlight tabs when used in cards
-
-## 0.4.10
-
-- [#63](https://github.com/withstudiocms/ui/pull/63) [`dc7b723`](https://github.com/withstudiocms/ui/commit/dc7b723c86ae9bafd9b8dba626be2345a92a2568) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adds a value prop to the checkbox
-
-## 0.4.9
-
-- [#61](https://github.com/withstudiocms/ui/pull/61) [`59f4c05`](https://github.com/withstudiocms/ui/commit/59f4c05d303686b139fef632d69c2edf49895ea3) Thanks [@louisescher](https://github.com/louisescher)! - Fixes card footers to be hidden should they have no content
-
-## 0.4.8
-
-- [#59](https://github.com/withstudiocms/ui/pull/59) [`f71057d`](https://github.com/withstudiocms/ui/commit/f71057dcc00468d9c4f5584cbbc384dc987c136a) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Add viewbox attribute for IconBase component
-
-## 0.4.7
-
-- [#56](https://github.com/withstudiocms/ui/pull/56) [`40ae2ea`](https://github.com/withstudiocms/ui/commit/40ae2eaa60f0b0df6e0447be5f3e362cbb9bff76) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Add option to disable global CSS injection and allow users to import the global css themselves.
-
- Basic Example of how to import:
-
- ```astro
- ---
- import "studiocms:ui/global-css";
- ---
- ```
-
-## 0.4.6
-
-- [#52](https://github.com/withstudiocms/ui/pull/52) [`65eea2c`](https://github.com/withstudiocms/ui/commit/65eea2cff78c2c38314de9b3fe4b65173c81ea90) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update Input component to allow search type
-
-## 0.4.5
-
-- [#50](https://github.com/withstudiocms/ui/pull/50) [`51d5565`](https://github.com/withstudiocms/ui/commit/51d556504790741ad3b6cd23092b9be0a92e8157) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - fix weird icon sizing during build
-
-## 0.4.4
-
-- [#48](https://github.com/withstudiocms/ui/pull/48) [`4a43e03`](https://github.com/withstudiocms/ui/commit/4a43e031b2395ca1cf72c8343638f5836178944e) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Fix Icon component requiring functions from Iconify Utils lib during runtime as well as extend usage possibilities.
-
- NEW:
-
- - `IconBase` component exported from `studiocms:ui/components` which allows passing custom image collections from Iconify.
-
- Updated:
-
- - `Icon` component to use this new system.
-
-## 0.4.3
-
-- [#46](https://github.com/withstudiocms/ui/pull/46) [`29ea967`](https://github.com/withstudiocms/ui/commit/29ea967c2cee935715de0f4787b603d69997e84b) Thanks [@louisescher](https://github.com/louisescher)! - Fixes icons getting cut off in certain circumstances and changes dropdown links to include icons
-
-## 0.4.2
-
-- [#44](https://github.com/withstudiocms/ui/pull/44) [`99a2f79`](https://github.com/withstudiocms/ui/commit/99a2f7959b4269d47c99c87a06ea6711c74a373e) Thanks [@louisescher](https://github.com/louisescher)! - Fixes compatibility issues with Astro view transitions
-
-## 0.4.1
-
-- [#40](https://github.com/withstudiocms/ui/pull/40) [`641e4b0`](https://github.com/withstudiocms/ui/commit/641e4b09574eb3d54c08b52be65e36233c2bbd6a) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update publish config and files included
-
-## 0.4.0
-
-- [#36](https://github.com/withstudiocms/ui/pull/36) [`07e2d9e`](https://github.com/withstudiocms/ui/commit/07e2d9e5a473bdcd516bf4d43e8274988ec796e6) Thanks [@louisescher](https://github.com/louisescher)! - Implement Build step and migrate all exported components into virtual modules
-
- Instead of `@studiocms/ui/components` use `studiocms:ui/components`
-
- For more information see https://ui.studiocms.dev
-
-- [#36](https://github.com/withstudiocms/ui/pull/36) [`07e2d9e`](https://github.com/withstudiocms/ui/commit/07e2d9e5a473bdcd516bf4d43e8274988ec796e6) Thanks [@louisescher](https://github.com/louisescher)! - Add a few new components:
-
- - Accordion
- - Badge
- - Breadcrumbs
- - Group
- - Progress
- - Sidebar
-
- Add two new colors
-
- - `info` (Blue)
- - `monochrome` (Black/White)
-
- Add the ability to pass a CSS file for customization of all colors
-
-## 0.3.2
-
-- [#33](https://github.com/withstudiocms/ui/pull/33) [`58e223c`](https://github.com/withstudiocms/ui/commit/58e223c861321e95c8db064be67e28e4563b4ff3) Thanks [@louisescher](https://github.com/louisescher)! - Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots
-
-## 0.3.1
-
-- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows
-
-## 0.3.0
-
-- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
-
- This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
- an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
-
- ### Components
-
- - Added a new `` component based on the tabs on the homepage.
- - Updated the `` component to include a new "filled" style.
-
- ### Utilities
-
- - Moved the `ThemeHelper` class to its own category in the docs.
-
- ### Accessibility
-
- - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
-
-## 0.1.0
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `` component's available types
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility
-
-## 0.0.1
-
-- Initial Testing release
+---
+# Warning: This file is generated automatically. Do not edit!
+title: Release Notes
+description: Release notes for the @studiocms/ui package.
+editUrl: false
+---
+
+This document contains release notes for the `@studiocms/ui` package.
+For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
+
+## 1.2.0
+
+- [#158](https://github.com/withstudiocms/ui/pull/158) [`b62de6c`](https://github.com/withstudiocms/ui/commit/b62de6cb0e982030749f2819ffdb9d6966844685) Thanks [@louisescher](https://github.com/louisescher)! - Adds support for Astro v6.
+
+- [#158](https://github.com/withstudiocms/ui/pull/158) [`b62de6c`](https://github.com/withstudiocms/ui/commit/b62de6cb0e982030749f2819ffdb9d6966844685) Thanks [@louisescher](https://github.com/louisescher)! - Adds a new `noInjectResetCSS` option to disable the reset styles
+
+## 1.1.2
+
+- [#156](https://github.com/withstudiocms/ui/pull/156) [`6efe380`](https://github.com/withstudiocms/ui/commit/6efe3804cdc50062ef5fd8872bb3e4a1d6926126) Thanks [@louisescher](https://github.com/louisescher)! - Adjusts footer CSS to no longer display mobile version on devices with a 13" screen
+
+## 1.1.1
+
+- [#154](https://github.com/withstudiocms/ui/pull/154) [`0115293`](https://github.com/withstudiocms/ui/commit/01152938f81ccaeb2ee05684483cad610d1eae96) Thanks [@jellydeck](https://github.com/jellydeck)! - Fixes Alert component icon, header alignment and missing virtual type declaration
+
+## 1.1.0
+
+- [#152](https://github.com/withstudiocms/ui/pull/152) [`9b89906`](https://github.com/withstudiocms/ui/commit/9b89906974fbb513737cc5de0f02af9742c5b955) Thanks [@jellydeck](https://github.com/jellydeck)! - adds "Alert" component, used to display important message, tip, information and warning to the user.
+
+## 1.0.1
+
+- [#148](https://github.com/withstudiocms/ui/pull/148) [`36d994d`](https://github.com/withstudiocms/ui/commit/36d994d7689391588539358d114d7bcad24c79e0) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Fixes global window augmentation for tooltips (no user-facing changes, just better types!)
+
+- [#150](https://github.com/withstudiocms/ui/pull/150) [`c7e6f2d`](https://github.com/withstudiocms/ui/commit/c7e6f2d5efe6c50dc852ff5602992f4ccf1540c0) Thanks [@louisescher](https://github.com/louisescher)! - Removes a leftover TODO comment
+
+## 1.0.0
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Moves the following helpers into their own virtual modules:
+
+ - `studiocms:ui/components/toaster/client` - `toast`
+ - `studiocms:ui/components/modal/client` - `ModalHelper`
+ - `studiocms:ui/components/dropdown/client` - `DropdownHelper`
+ - `studiocms:ui/components/progress/client` - `ProgressHelper`
+ - `studiocms:ui/components/sidebar/client` - `SingleSidebarHelper, DoubleSidebarHelper`
+
+ There is also a new `studiocms:ui/components/client` joined module that contains all the above component helpers.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Update Icon component to utilize all iconifyJSON icons that have been passed through into the config
+
+ ### Breaking Changes
+
+ - Default Icon names are now prefixed with `heroicons:` instead of just the icons name. This allows user-defined icons to be used without conflicting with the pre-shipped icons.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Colors have been adjusted to look better for all components. Badge variants now default to "outlined" and the "default" value has been deprecated. The deprecation was due to the badges failing WGAG AAA guidelines. All projects using the "default" variant should be updated to use "outlined" instead.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Introduce individual component virtual exports alongside the bundled barrel virtual export `'studiocms:ui/components'`
+
+ You can now import for example `Button` component from `studiocms:ui/components/button`
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Updates the Tabs components to optionally use a custom ID
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Migrate from injected types to ambient types for static virtual modules
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Adds a skeleton loading state component
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Removes ThemeToggle as it was causing a error when added to the virtual module, it is now recommended to use the ThemeHelper directly
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Refactors the select components into web components
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Changes the inputs icon color to var(--text-muted)
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes #91, alert type is respected and shows appropriate colors
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes the focus outline of buttons within groups sometimes being hidden behind other buttons in the same group.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes toggle colors, adds new "gray" color for toggle circles, and adds a light variant for the default flat colors.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes Select components UI bug, where list items had no background and showed bullet points
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - - Refactored the accordion component so it works with the Tabs component, and with nested accordions
+ - Refactored the Tabs component to support nested tabs
+ - Added a new `active` prop to the Tabs component to set the initial active tab
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes an issue where the toaster HTML Element would have an unnecessary comma attribute due to a typo.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Changes the way colors are declared to allow for a better customization experience.
+
+ Before, we would use raw HSL values in order to be able to modify them later on:
+
+ ```css
+ :root {
+ --background-base: 0 0% 6%;
+ }
+ ```
+
+ This introduces an unnecessary hurdle to customization, since most other libraries ship with either their own color values and spaces or a different approach entirely. Thus, the goal of this PR is to replace this approach with a simpler one. We will now default to HSL functions instead of the raw values:
+
+ ```css
+ :root {
+ --background-base: hsl(0 0% 6%);
+ }
+ ```
+
+ Migrating from this can be a little tedious if the old system was used in custom components. You can use this regular expression with VSCode's (or any other IDE's) search & replace feature to replace all instances of the old syntax with the new:
+
+ **Search Value**: `hsl[a]?\((var\([A-Za-z-\d]+\))\)`
+ **Replace Value**: `$1`
+
+ Please make sure to manually search for `hsl(var(` and `hsla(var(` after running the above to make sure all previous values have been replaced.
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes buttons within dropdowns not displaying properly within a group
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - adds the tooltip component
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Adds optional icons and help texts to inputs
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Improve icon handling and processing, allowing icon sets defined in the config to also use `-` in their name (e.g. 'simple-icons')
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixed undeclared css variables for flat button style
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Fixes ambient type declarations
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Adds StudioCMS Typography using a `.prose` class
+
+- [#85](https://github.com/withstudiocms/ui/pull/85) [`a7e37a5`](https://github.com/withstudiocms/ui/commit/a7e37a5ca91cf1d485aa3a8dc6c0b34aab18cca1) Thanks [@louisescher](https://github.com/louisescher)! - Adds a missing background color to modals
+
+## 1.0.0-beta.6
+
+- [#140](https://github.com/withstudiocms/ui/pull/140) [`e70e8b4`](https://github.com/withstudiocms/ui/commit/e70e8b425454b9276bb7fe22905ef40724f36e67) Thanks [@louisescher](https://github.com/louisescher)! - Adds a missing background color to modals
+
+## 1.0.0-beta.5
+
+- [#136](https://github.com/withstudiocms/ui/pull/136) [`4cdc396`](https://github.com/withstudiocms/ui/commit/4cdc3960fe804feef040e3a09ae046ae72a3eb5d) Thanks [@louisescher](https://github.com/louisescher)! - Refactors the select components into web components
+
+- [#138](https://github.com/withstudiocms/ui/pull/138) [`deec8e5`](https://github.com/withstudiocms/ui/commit/deec8e5e7bcc1fdfcdeefe78c4002fdda9d93d86) Thanks [@louisescher](https://github.com/louisescher)! - Changes the inputs icon color to var(--text-muted)
+
+## 1.0.0-beta.4
+
+- [#137](https://github.com/withstudiocms/ui/pull/137) [`dee51eb`](https://github.com/withstudiocms/ui/commit/dee51ebcf063a6bcdfca25a69d20d2d1447409b8) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Moves the following helpers into their own virtual modules:
+
+ - `studiocms:ui/components/toaster/client` - `toast`
+ - `studiocms:ui/components/modal/client` - `ModalHelper`
+ - `studiocms:ui/components/dropdown/client` - `DropdownHelper`
+ - `studiocms:ui/components/progress/client` - `ProgressHelper`
+ - `studiocms:ui/components/sidebar/client` - `SingleSidebarHelper, DoubleSidebarHelper`
+
+ There is also a new `studiocms:ui/components/client` joined module that contains all the above component helpers.
+
+- [#133](https://github.com/withstudiocms/ui/pull/133) [`8e2172d`](https://github.com/withstudiocms/ui/commit/8e2172d3e108924c5b2d680d5bc795716e5a7078) Thanks [@RATIU5](https://github.com/RATIU5)! - Fixed undeclared css variables for flat button style
+
+## 1.0.0-beta.3
+
+- [#130](https://github.com/withstudiocms/ui/pull/130) [`57f900d`](https://github.com/withstudiocms/ui/commit/57f900d40d37ae64ce1aaf984509d646b401a16b) Thanks [@RATIU5](https://github.com/RATIU5)! - Fixes toggle colors, adds new "gray" color for toggle circles, and adds a light variant for the default flat colors.
+
+## 1.0.0-beta.2
+
+- [#125](https://github.com/withstudiocms/ui/pull/125) [`9473be8`](https://github.com/withstudiocms/ui/commit/9473be82b5c1b226248e7028dce31b013534f3ba) Thanks [@RATIU5](https://github.com/RATIU5)! - Colors have been adjusted to look better for all components. Badge variants now default to "outlined" and the "default" value has been deprecated. The deprecation was due to the badges failing WGAG AAA guidelines. All projects using the "default" variant should be updated to use "outlined" instead.
+
+- [#118](https://github.com/withstudiocms/ui/pull/118) [`1779190`](https://github.com/withstudiocms/ui/commit/1779190849e80ed21af4eeac3b36553cb4c8447f) Thanks [@RATIU5](https://github.com/RATIU5)! - Updates the Tabs components to optionally use a custom ID
+
+- [#119](https://github.com/withstudiocms/ui/pull/119) [`6bdc0ee`](https://github.com/withstudiocms/ui/commit/6bdc0ee2b99fd984caf49f83a680a23c7c1d497a) Thanks [@louisescher](https://github.com/louisescher)! - Fixes an issue where the toaster HTML Element would have an unnecessary comma attribute due to a typo.
+
+- [#124](https://github.com/withstudiocms/ui/pull/124) [`8a2f606`](https://github.com/withstudiocms/ui/commit/8a2f6060d1c25c9a537a078c21e967c5d998ef8b) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Improve icon handling and processing, allowing icon sets defined in the config to also use `-` in their name (e.g. 'simple-icons')
+
+## 1.0.0-beta.1
+
+- [#110](https://github.com/withstudiocms/ui/pull/110) [`8bb4637`](https://github.com/withstudiocms/ui/commit/8bb4637f84dcc66cba8ed68d36d31671fb3b3058) Thanks [@louisescher](https://github.com/louisescher)! - Fixes the focus outline of buttons within groups sometimes being hidden behind other buttons in the same group.
+
+- [#112](https://github.com/withstudiocms/ui/pull/112) [`ba10776`](https://github.com/withstudiocms/ui/commit/ba10776d35c04f1abff7451ece468689fbfe1212) Thanks [@louisescher](https://github.com/louisescher)! - Fixes buttons within dropdowns not displaying properly within a group
+
+- [#111](https://github.com/withstudiocms/ui/pull/111) [`f2fc787`](https://github.com/withstudiocms/ui/commit/f2fc787501445ba150c409d38ddedc7fa4cf5034) Thanks [@louisescher](https://github.com/louisescher)! - Adds optional icons and help texts to inputs
+
+## 1.0.0-beta.0
+
+- [#88](https://github.com/withstudiocms/ui/pull/88) [`b96fe4d`](https://github.com/withstudiocms/ui/commit/b96fe4d7b88fced72a65c96a4aa893f9bc164af8) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update Icon component to utilize all iconifyJSON icons that have been passed through into the config
+
+ ### Breaking Changes
+
+ - Default Icon names are now prefixed with `heroicons:` instead of just the icons name. This allows user-defined icons to be used without conflicting with the pre-shipped icons.
+
+- [#106](https://github.com/withstudiocms/ui/pull/106) [`613830e`](https://github.com/withstudiocms/ui/commit/613830edf9625a52166d3f520e6b513b2e96128f) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Introduce individual component virtual exports alongside the bundled barrel virtual export `'studiocms:ui/components'`
+
+ You can now import for example `Button` component from `studiocms:ui/components/button`
+
+- [#89](https://github.com/withstudiocms/ui/pull/89) [`ce1f6fc`](https://github.com/withstudiocms/ui/commit/ce1f6fcbad376fd0fd2cc65d251baec6ccd5cc10) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Migrate from injected types to ambient types for static virtual modules
+
+- [#86](https://github.com/withstudiocms/ui/pull/86) [`63e3b9e`](https://github.com/withstudiocms/ui/commit/63e3b9e2a2c2d3b2162de4b4a9c88cc6eed25f96) Thanks [@RATIU5](https://github.com/RATIU5)! - Adds a skeleton loading state component
+
+- [#87](https://github.com/withstudiocms/ui/pull/87) [`80d1970`](https://github.com/withstudiocms/ui/commit/80d1970a7b91860efafcac69139379a7e3e900eb) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Removes ThemeToggle as it was causing a error when added to the virtual module, it is now recommended to use the ThemeHelper directly
+
+- [#92](https://github.com/withstudiocms/ui/pull/92) [`bd47caf`](https://github.com/withstudiocms/ui/commit/bd47cafc61f9688d3541b6cebf80471c5d1b5475) Thanks [@RATIU5](https://github.com/RATIU5)! - Fixes #91, alert type is respected and shows appropriate colors
+
+- [#103](https://github.com/withstudiocms/ui/pull/103) [`111e685`](https://github.com/withstudiocms/ui/commit/111e685e622e61d0549b9d2e2344dd16dfea2259) Thanks [@RATIU5](https://github.com/RATIU5)! - Fixes Select components UI bug, where list items had no background and showed bullet points
+
+- [#104](https://github.com/withstudiocms/ui/pull/104) [`f708d9d`](https://github.com/withstudiocms/ui/commit/f708d9d17ecf72fc9821901c0e8c41516025c992) Thanks [@RATIU5](https://github.com/RATIU5)! - - Refactored the accordion component so it works with the Tabs component, and with nested accordions
+ - Refactored the Tabs component to support nested tabs
+ - Added a new `active` prop to the Tabs component to set the initial active tab
+
+- [#96](https://github.com/withstudiocms/ui/pull/96) [`ddf67da`](https://github.com/withstudiocms/ui/commit/ddf67da745b4fe9c68077fd01f7c04b9994fbdac) Thanks [@louisescher](https://github.com/louisescher)! - Changes the way colors are declared to allow for a better customization experience.
+
+ Before, we would use raw HSL values in order to be able to modify them later on:
+
+ ```css
+ :root {
+ --background-base: 0 0% 6%;
+ }
+ ```
+
+ This introduces an unnecessary hurdle to customization, since most other libraries ship with either their own color values and spaces or a different approach entirely. Thus, the goal of this PR is to replace this approach with a simpler one. We will now default to HSL functions instead of the raw values:
+
+ ```css
+ :root {
+ --background-base: hsl(0 0% 6%);
+ }
+ ```
+
+ Migrating from this can be a little tedious if the old system was used in custom components. You can use this regular expression with VSCode's (or any other IDE's) search & replace feature to replace all instances of the old syntax with the new:
+
+ **Search Value**: `hsl[a]?\((var\([A-Za-z-\d]+\))\)`
+ **Replace Value**: `$1`
+
+ Please make sure to manually search for `hsl(var(` and `hsla(var(` after running the above to make sure all previous values have been replaced.
+
+- [#101](https://github.com/withstudiocms/ui/pull/101) [`12eba39`](https://github.com/withstudiocms/ui/commit/12eba3931e50fd5eb727e8aedae3bf57d051014c) Thanks [@RATIU5](https://github.com/RATIU5)! - adds the tooltip component
+
+- [#93](https://github.com/withstudiocms/ui/pull/93) [`bb5ab5a`](https://github.com/withstudiocms/ui/commit/bb5ab5ab409dd96245498631dd35e1d78b742d35) Thanks [@RATIU5](https://github.com/RATIU5)! - Adds StudioCMS Typography using a `.prose` class
+
+## 0.4.17
+
+- [#94](https://github.com/withstudiocms/ui/pull/94) [`2b89d92`](https://github.com/withstudiocms/ui/commit/2b89d92eb95277cdb65be6839851bd75650661a9) Thanks [@RATIU5](https://github.com/RATIU5)! - prevents overflow select dropdowns with a scrollable container and enables toggling the dropdown via svg icon click
+
+## 0.4.16
+
+- [#83](https://github.com/withstudiocms/ui/pull/83) [`9fc5efb`](https://github.com/withstudiocms/ui/commit/9fc5efb169b7d534cc67d95ecf5f716adace8db4) Thanks [@louisescher](https://github.com/louisescher)! - Fixes selects not being form compatible
+
+## 0.4.15
+
+- [#81](https://github.com/withstudiocms/ui/pull/81) [`cbee510`](https://github.com/withstudiocms/ui/commit/cbee5108ad7355cd810297d28bfce7350c931d7f) Thanks [@RATIU5](https://github.com/RATIU5)! - fixes select interfaces and types and adds safety check to prevent duplicate event listeners
+
+## 0.4.14
+
+- [#78](https://github.com/withstudiocms/ui/pull/78) [`c27bf16`](https://github.com/withstudiocms/ui/commit/c27bf1633d6ba3d537e7afcd5515be403f477553) Thanks [@louisescher](https://github.com/louisescher)! - Fixes mismatched IDs in the CSS for the double sidebar component
+
+## 0.4.13
+
+- [#67](https://github.com/withstudiocms/ui/pull/67) [`ad073b3`](https://github.com/withstudiocms/ui/commit/ad073b3a3cc9fc3d0a9d82fdada17ff487bcca0a) Thanks [@RATIU5](https://github.com/RATIU5)! - Adds multi-select functionality on the select component
+
+## 0.4.12
+
+- [#72](https://github.com/withstudiocms/ui/pull/72) [`f183732`](https://github.com/withstudiocms/ui/commit/f18373291c20ffbd69c1e0fb3c23526931f1d8da) Thanks [@louisescher](https://github.com/louisescher)! - Fixes a z-index for starlight variant tabs being too great
+
+## 0.4.11
+
+- [#69](https://github.com/withstudiocms/ui/pull/69) [`ef29352`](https://github.com/withstudiocms/ui/commit/ef29352b03b87a34da163ade2aae6652ce819251) Thanks [@louisescher](https://github.com/louisescher)! - Fixes broken styles for flat success buttons in light mode and starlight tabs when used in cards
+
+## 0.4.10
+
+- [#63](https://github.com/withstudiocms/ui/pull/63) [`dc7b723`](https://github.com/withstudiocms/ui/commit/dc7b723c86ae9bafd9b8dba626be2345a92a2568) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adds a value prop to the checkbox
+
+## 0.4.9
+
+- [#61](https://github.com/withstudiocms/ui/pull/61) [`59f4c05`](https://github.com/withstudiocms/ui/commit/59f4c05d303686b139fef632d69c2edf49895ea3) Thanks [@louisescher](https://github.com/louisescher)! - Fixes card footers to be hidden should they have no content
+
+## 0.4.8
+
+- [#59](https://github.com/withstudiocms/ui/pull/59) [`f71057d`](https://github.com/withstudiocms/ui/commit/f71057dcc00468d9c4f5584cbbc384dc987c136a) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Add viewbox attribute for IconBase component
+
+## 0.4.7
+
+- [#56](https://github.com/withstudiocms/ui/pull/56) [`40ae2ea`](https://github.com/withstudiocms/ui/commit/40ae2eaa60f0b0df6e0447be5f3e362cbb9bff76) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Add option to disable global CSS injection and allow users to import the global css themselves.
+
+ Basic Example of how to import:
+
+ ```astro
+ ---
+ import "studiocms:ui/global-css";
+ ---
+ ```
+
+## 0.4.6
+
+- [#52](https://github.com/withstudiocms/ui/pull/52) [`65eea2c`](https://github.com/withstudiocms/ui/commit/65eea2cff78c2c38314de9b3fe4b65173c81ea90) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update Input component to allow search type
+
+## 0.4.5
+
+- [#50](https://github.com/withstudiocms/ui/pull/50) [`51d5565`](https://github.com/withstudiocms/ui/commit/51d556504790741ad3b6cd23092b9be0a92e8157) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - fix weird icon sizing during build
+
+## 0.4.4
+
+- [#48](https://github.com/withstudiocms/ui/pull/48) [`4a43e03`](https://github.com/withstudiocms/ui/commit/4a43e031b2395ca1cf72c8343638f5836178944e) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Fix Icon component requiring functions from Iconify Utils lib during runtime as well as extend usage possibilities.
+
+ NEW:
+
+ - `IconBase` component exported from `studiocms:ui/components` which allows passing custom image collections from Iconify.
+
+ Updated:
+
+ - `Icon` component to use this new system.
+
+## 0.4.3
+
+- [#46](https://github.com/withstudiocms/ui/pull/46) [`29ea967`](https://github.com/withstudiocms/ui/commit/29ea967c2cee935715de0f4787b603d69997e84b) Thanks [@louisescher](https://github.com/louisescher)! - Fixes icons getting cut off in certain circumstances and changes dropdown links to include icons
+
+## 0.4.2
+
+- [#44](https://github.com/withstudiocms/ui/pull/44) [`99a2f79`](https://github.com/withstudiocms/ui/commit/99a2f7959b4269d47c99c87a06ea6711c74a373e) Thanks [@louisescher](https://github.com/louisescher)! - Fixes compatibility issues with Astro view transitions
+
+## 0.4.1
+
+- [#40](https://github.com/withstudiocms/ui/pull/40) [`641e4b0`](https://github.com/withstudiocms/ui/commit/641e4b09574eb3d54c08b52be65e36233c2bbd6a) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update publish config and files included
+
+## 0.4.0
+
+- [#36](https://github.com/withstudiocms/ui/pull/36) [`07e2d9e`](https://github.com/withstudiocms/ui/commit/07e2d9e5a473bdcd516bf4d43e8274988ec796e6) Thanks [@louisescher](https://github.com/louisescher)! - Implement Build step and migrate all exported components into virtual modules
+
+ Instead of `@studiocms/ui/components` use `studiocms:ui/components`
+
+ For more information see https://ui.studiocms.dev
+
+- [#36](https://github.com/withstudiocms/ui/pull/36) [`07e2d9e`](https://github.com/withstudiocms/ui/commit/07e2d9e5a473bdcd516bf4d43e8274988ec796e6) Thanks [@louisescher](https://github.com/louisescher)! - Add a few new components:
+
+ - Accordion
+ - Badge
+ - Breadcrumbs
+ - Group
+ - Progress
+ - Sidebar
+
+ Add two new colors
+
+ - `info` (Blue)
+ - `monochrome` (Black/White)
+
+ Add the ability to pass a CSS file for customization of all colors
+
+## 0.3.2
+
+- [#33](https://github.com/withstudiocms/ui/pull/33) [`58e223c`](https://github.com/withstudiocms/ui/commit/58e223c861321e95c8db064be67e28e4563b4ff3) Thanks [@louisescher](https://github.com/louisescher)! - Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots
+
+## 0.3.1
+
+- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows
+
+## 0.3.0
+
+- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
+
+ This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
+ an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
+
+ ### Components
+
+ - Added a new `` component based on the tabs on the homepage.
+ - Updated the `` component to include a new "filled" style.
+
+ ### Utilities
+
+ - Moved the `ThemeHelper` class to its own category in the docs.
+
+ ### Accessibility
+
+ - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
+
+## 0.1.0
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `` component's available types
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility
+
+## 0.0.1
+
+- Initial Testing release
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index 68ff4d5a..102d124c 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -27,163 +27,164 @@ for (let i = 0; i < socialProofEntries.length; i += chunkSize) {
chunkedSocialProofEntries.push(chunk);
}
---
-
-
-
-
Modal
- across obsidian skies, frosty breath lingers."}>
-
-
-
-
-
-
-
+
+
+
+
+
Modal
+ across obsidian skies, frosty breath lingers."}
+ />
+
+
+
+
+
+
+
diff --git a/packages/studiocms_ui/package.json b/packages/studiocms_ui/package.json
index 01bcfc7a..f4bbc6f6 100644
--- a/packages/studiocms_ui/package.json
+++ b/packages/studiocms_ui/package.json
@@ -73,8 +73,7 @@
"dependencies": {
"@iconify-json/heroicons": "catalog:",
"@iconify/types": "^2.0.0",
- "astro-transition-event-polyfill": "^1.2.1",
- "astro-integration-kit": "^0.20.0"
+ "astro-transition-event-polyfill": "^1.2.2"
},
"peerDependencies": {
"astro": "catalog:peers",
diff --git a/packages/studiocms_ui/src/index.ts b/packages/studiocms_ui/src/index.ts
index 629e5990..c19b5672 100644
--- a/packages/studiocms_ui/src/index.ts
+++ b/packages/studiocms_ui/src/index.ts
@@ -16,7 +16,6 @@ import fs from 'node:fs';
import type { IconifyJSON } from '@iconify/types';
import { icons as heroicons } from '@iconify-json/heroicons';
import type { AstroIntegration } from 'astro';
-import { addVirtualImports, createResolver } from 'astro-integration-kit';
import transitionEventPolyfill from 'astro-transition-event-polyfill';
import { studiocmsLogo } from './toolbar/icon.js';
import { generateIconTypes } from './utils/typegen.js';
@@ -76,6 +75,18 @@ type IconifyCollections = {
availableIcons: string[];
};
+function virtualImportsPlugin(name: string, imports: Record) {
+ return {
+ name,
+ resolveId(id: string) {
+ if (id in imports) return `\0${id}`;
+ },
+ load(id: string) {
+ if (id.startsWith('\0')) return imports[id.slice(1)];
+ },
+ };
+}
+
export function createIconifyCollection(icons?: Record): IconifyCollections {
const collections: Record = {};
const collectionNames: string[] = [];
@@ -117,9 +128,6 @@ export function createIconifyCollection(icons?: Record): Ic
* @returns {AstroIntegration} The Astro integration object.
*/
export default function integration(options: Options = {}): AstroIntegration {
- // Resolve paths relative to the current file (pkg/src/index.ts)
- const { resolve } = createResolver(import.meta.url);
-
const optIcons: Record = {
heroicons,
};
@@ -137,146 +145,156 @@ export default function integration(options: Options = {}): AstroIntegration {
/* v8 ignore start */
/** Astro integrations cannot be properly tested for code coverage */
'astro:config:setup': (params) => {
- const { addDevToolbarApp, injectScript, updateConfig } = params;
- const { resolve: rootResolve } = createResolver(params.config.root.pathname);
-
- updateConfig({
- integrations: [transitionEventPolyfill()],
- });
-
- if (options.icons) {
- for (const [prefix, collection] of Object.entries(options.icons)) {
- if (!optIcons[prefix]) {
- optIcons[prefix] = collection;
+ try {
+ const { addDevToolbarApp, injectScript, updateConfig } = params;
+
+ updateConfig({
+ integrations: [transitionEventPolyfill()],
+ });
+
+ if (options.icons) {
+ for (const [prefix, collection] of Object.entries(options.icons)) {
+ if (!optIcons[prefix]) {
+ optIcons[prefix] = collection;
+ }
}
}
- }
-
- icons = createIconifyCollection(optIcons);
-
- const componentMap: Record = {
- 'studiocms:ui/components/alert': `export { default as Alert } from '${resolve('./components/Alert/Alert.astro')}';`,
- 'studiocms:ui/components/button': `export { default as Button } from '${resolve('./components/Button/Button.astro')}';`,
- 'studiocms:ui/components/divider': `export { default as Divider } from '${resolve('./components/Divider/Divider.astro')}';`,
- 'studiocms:ui/components/input': `export { default as Input } from '${resolve('./components/Input/Input.astro')}';`,
- 'studiocms:ui/components/textarea': `export { default as Textarea } from '${resolve('./components/Textarea/Textarea.astro')}';`,
- 'studiocms:ui/components/row': `export { default as Row } from '${resolve('./components/Row/Row.astro')}';`,
- 'studiocms:ui/components/center': `export { default as Center } from '${resolve('./components/Center/Center.astro')}';`,
- 'studiocms:ui/components/checkbox': `export { default as Checkbox } from '${resolve('./components/Checkbox/Checkbox.astro')}';`,
- 'studiocms:ui/components/toggle': `export { default as Toggle } from '${resolve('./components/Toggle/Toggle.astro')}';`,
- 'studiocms:ui/components/radiogroup': `export { default as RadioGroup } from '${resolve('./components/RadioGroup/RadioGroup.astro')}';`,
- 'studiocms:ui/components/toaster': `export { default as Toaster } from '${resolve('./components/Toast/Toaster.astro')}';`,
- 'studiocms:ui/components/toaster/client': `export { toast } from '${resolve('./components/Toast/toast.js')}';`,
- 'studiocms:ui/components/card': `export { default as Card } from '${resolve('./components/Card/Card.astro')}';`,
- 'studiocms:ui/components/modal': `export { default as Modal } from '${resolve('./components/Modal/Modal.astro')}';`,
- 'studiocms:ui/components/modal/client': `export { ModalHelper } from '${resolve('./components/Modal/modal.js')}';`,
- 'studiocms:ui/components/select': `
- export { default as Select } from '${resolve('./components/Select/Select.astro')}';
- export { default as SearchSelect } from '${resolve('./components/SearchSelect/SearchSelect.astro')}';
- `,
- 'studiocms:ui/components/dropdown': `export { default as Dropdown } from '${resolve('./components/Dropdown/Dropdown.astro')}';`,
- 'studiocms:ui/components/dropdown/client': `export { DropdownHelper } from '${resolve('./components/Dropdown/dropdown.js')}';`,
- 'studiocms:ui/components/user': `export { default as User } from '${resolve('./components/User/User.astro')}';`,
- 'studiocms:ui/components/tabs': `
- export { default as Tabs } from '${resolve('./components/Tabs/Tabs.astro')}';
- export { default as TabItem } from '${resolve('./components/Tabs/TabItem.astro')}';
- `,
- 'studiocms:ui/components/accordion': `
- export { default as Accordion } from '${resolve('./components/Accordion/Accordion.astro')}';
- export { default as AccordionItem } from '${resolve('./components/Accordion/Item.astro')}';
- `,
- 'studiocms:ui/components/footer': `export { default as Footer } from '${resolve('./components/Footer/Footer.astro')}';`,
- 'studiocms:ui/components/progress': `export { default as Progress } from '${resolve('./components/Progress/Progress.astro')}';`,
- 'studiocms:ui/components/progress/client': `export { ProgressHelper } from '${resolve('./components/Progress/helper.js')}';`,
- 'studiocms:ui/components/sidebar': `
- export { default as Sidebar } from '${resolve('./components/Sidebar/Single.astro')}';
- export { default as DoubleSidebar } from '${resolve('./components/Sidebar/Double.astro')}';
- `,
- 'studiocms:ui/components/sidebar/client': `export { SingleSidebarHelper, DoubleSidebarHelper } from '${resolve('./components/Sidebar/helpers.js')}';`,
- 'studiocms:ui/components/breadcrumbs': `export { default as Breadcrumbs } from '${resolve('./components/Breadcrumbs/Breadcrumbs.astro')}';`,
- 'studiocms:ui/components/group': `export { default as Group } from '${resolve('./components/Group/Group.astro')}';`,
- 'studiocms:ui/components/badge': `export { default as Badge } from '${resolve('./components/Badge/Badge.astro')}';`,
- 'studiocms:ui/components/icon': `
- export { default as Icon } from '${resolve('./components/Icon/Icon.astro')}';
- export { default as IconBase } from '${resolve('./components/Icon/IconBase.astro')}';
- `,
- 'studiocms:ui/components/skeleton': `export { default as Skeleton } from '${resolve('./components/Skeleton/Skeleton.astro')}';`,
- 'studiocms:ui/components/tooltip': `export { default as Tooltip } from '${resolve('./components/Tooltip/Tooltip.astro')}';`,
- };
-
- const ServerComponents = Object.entries(componentMap).filter(
- ([key]) => !key.endsWith('/client')
- );
- const ClientComponents = Object.entries(componentMap).filter(([key]) =>
- key.endsWith('/client')
- );
-
- const virtualComponents: Record = {
- ...componentMap,
- 'studiocms:ui/components': ServerComponents.map(([_, value]) => value).join('\n'),
- 'studiocms:ui/components/client': ClientComponents.map(([_, value]) => value).join('\n'),
- };
-
- addVirtualImports(params, {
- name: '@studiocms/ui',
- imports: {
- // Internal Version
- 'studiocms:ui/version': `export default '${pkgJson.version}';`,
- // Styles
- 'studiocms:ui/global-css': `import '${resolve('./css/global.css')}';`,
- 'studiocms:ui/reset-css': `import '${resolve('./css/resets.css')}';`,
- 'studiocms:ui/prose': `import '${resolve('./css/prose.css')}';`,
- 'studiocms:ui/custom-css': `import '${rootResolve(options.customCss ? options.customCss : '')}';`,
- // Scripts
- 'studiocms:ui/scripts/checkbox': `import '${resolve('./components/Checkbox/checkbox.js')}';`,
- 'studiocms:ui/scripts/radiogroup': `import '${resolve('./components/RadioGroup/radiogroup.js')}';`,
- 'studiocms:ui/scripts/searchselect': `import '${resolve('./components/SearchSelect/searchselect.js')}';`,
- 'studiocms:ui/scripts/select': `import '${resolve('./components/Select/select.js')}';`,
- 'studiocms:ui/scripts/tabs': `import '${resolve('./components/Tabs/tabs.js')}';`,
- 'studiocms:ui/scripts/themetoggle': `import '${resolve('./components/ThemeToggle/themetoggle.js')}';`,
- 'studiocms:ui/scripts/toaster': `import '${resolve('./components/Toast/toaster.js')}';`,
- 'studiocms:ui/scripts/toast': `import '${resolve('./components/Toast/toast.js')}';`,
- 'studiocms:ui/scripts/toggle': `import '${resolve('./components/Toggle/toggle.js')}';`,
- 'studiocms:ui/scripts/tooltip': `import '${resolve('./components/Tooltip/tooltip.js')}';`,
- 'studiocms:ui/scripts/accordion': `import '${resolve('./components/Accordion/accordion.js')}';`,
- 'studiocms:ui/scripts/progress': `import '${resolve('./components/Progress/progress.js')}';`,
- 'studiocms:ui/components/select/script': `
- export { SUISelectElement } from '${resolve('./components/Select/select.js')}';
+ icons = createIconifyCollection(optIcons);
+
+ const componentMap: Record = {
+ 'studiocms:ui/components/alert': `export { default as Alert } from '${new URL('./components/Alert/Alert.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/button': `export { default as Button } from '${new URL('./components/Button/Button.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/divider': `export { default as Divider } from '${new URL('./components/Divider/Divider.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/input': `export { default as Input } from '${new URL('./components/Input/Input.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/textarea': `export { default as Textarea } from '${new URL('./components/Textarea/Textarea.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/row': `export { default as Row } from '${new URL('./components/Row/Row.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/center': `export { default as Center } from '${new URL('./components/Center/Center.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/checkbox': `export { default as Checkbox } from '${new URL('./components/Checkbox/Checkbox.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/toggle': `export { default as Toggle } from '${new URL('./components/Toggle/Toggle.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/radiogroup': `export { default as RadioGroup } from '${new URL('./components/RadioGroup/RadioGroup.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/toaster': `export { default as Toaster } from '${new URL('./components/Toast/Toaster.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/toaster/client': `export { toast } from '${new URL('./components/Toast/toast.js', import.meta.url)}';`,
+ 'studiocms:ui/components/card': `export { default as Card } from '${new URL('./components/Card/Card.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/modal': `export { default as Modal } from '${new URL('./components/Modal/Modal.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/modal/client': `export { ModalHelper } from '${new URL('./components/Modal/modal.js', import.meta.url)}';`,
+ 'studiocms:ui/components/select': `
+ export { default as Select } from '${new URL('./components/Select/Select.astro', import.meta.url)}';
+ export { default as SearchSelect } from '${new URL('./components/SearchSelect/SearchSelect.astro', import.meta.url)}';
`,
- // Components
- ...virtualComponents,
-
- 'studiocms:ui/utils': `
- export { ThemeHelper, Theme } from '${resolve('./utils/ThemeHelper.js')}';
+ 'studiocms:ui/components/dropdown': `export { default as Dropdown } from '${new URL('./components/Dropdown/Dropdown.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/dropdown/client': `export { DropdownHelper } from '${new URL('./components/Dropdown/dropdown.js', import.meta.url)}';`,
+ 'studiocms:ui/components/user': `export { default as User } from '${new URL('./components/User/User.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/tabs': `
+ export { default as Tabs } from '${new URL('./components/Tabs/Tabs.astro', import.meta.url)}';
+ export { default as TabItem } from '${new URL('./components/Tabs/TabItem.astro', import.meta.url)}';
`,
-
- 'studiocms:ui/icons': `
- ${icons.integrationCollections ? icons.integrationCollections : ''}
- export const availableIcons = ${JSON.stringify(icons.availableIcons)};
- export const iconCollections = ${JSON.stringify(icons.collectionNames)};
+ 'studiocms:ui/components/accordion': `
+ export { default as Accordion } from '${new URL('./components/Accordion/Accordion.astro', import.meta.url)}';
+ export { default as AccordionItem } from '${new URL('./components/Accordion/Item.astro', import.meta.url)}';
+ `,
+ 'studiocms:ui/components/footer': `export { default as Footer } from '${new URL('./components/Footer/Footer.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/progress': `export { default as Progress } from '${new URL('./components/Progress/Progress.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/progress/client': `export { ProgressHelper } from '${new URL('./components/Progress/helper.js', import.meta.url)}';`,
+ 'studiocms:ui/components/sidebar': `
+ export { default as Sidebar } from '${new URL('./components/Sidebar/Single.astro', import.meta.url)}';
+ export { default as DoubleSidebar } from '${new URL('./components/Sidebar/Double.astro', import.meta.url)}';
+ `,
+ 'studiocms:ui/components/sidebar/client': `export { SingleSidebarHelper, DoubleSidebarHelper } from '${new URL('./components/Sidebar/helpers.js', import.meta.url)}';`,
+ 'studiocms:ui/components/breadcrumbs': `export { default as Breadcrumbs } from '${new URL('./components/Breadcrumbs/Breadcrumbs.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/group': `export { default as Group } from '${new URL('./components/Group/Group.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/badge': `export { default as Badge } from '${new URL('./components/Badge/Badge.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/icon': `
+ export { default as Icon } from '${new URL('./components/Icon/Icon.astro', import.meta.url)}';
+ export { default as IconBase } from '${new URL('./components/Icon/IconBase.astro', import.meta.url)}';
`,
- },
- });
+ 'studiocms:ui/components/skeleton': `export { default as Skeleton } from '${new URL('./components/Skeleton/Skeleton.astro', import.meta.url)}';`,
+ 'studiocms:ui/components/tooltip': `export { default as Tooltip } from '${new URL('./components/Tooltip/Tooltip.astro', import.meta.url)}';`,
+ };
+
+ const ServerComponents = Object.entries(componentMap).filter(
+ ([key]) => !key.endsWith('/client')
+ );
+
+ const ClientComponents = Object.entries(componentMap).filter(([key]) =>
+ key.endsWith('/client')
+ );
+
+ const virtualComponents: Record = {
+ ...componentMap,
+ 'studiocms:ui/components': ServerComponents.map(([_, value]) => value).join('\n'),
+ 'studiocms:ui/components/client': ClientComponents.map(([_, value]) => value).join(
+ '\n'
+ ),
+ };
+
+ updateConfig({
+ vite: {
+ plugins: [
+ virtualImportsPlugin('@studiocms/ui', {
+ // Internal Version
+ 'studiocms:ui/version': `export default '${pkgJson.version}';`,
+ // Styles
+ 'studiocms:ui/global-css': `import '${new URL('./css/global.css', import.meta.url)}';`,
+ 'studiocms:ui/reset-css': `import '${new URL('./css/resets.css', import.meta.url)}';`,
+ 'studiocms:ui/prose': `import '${new URL('./css/prose.css', import.meta.url)}';`,
+ 'studiocms:ui/custom-css': options.customCss
+ ? `import '${new URL(options.customCss, params.config.root.pathname)}';`
+ : '',
+ // Scripts
+ 'studiocms:ui/scripts/checkbox': `import '${new URL('./components/Checkbox/checkbox.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/radiogroup': `import '${new URL('./components/RadioGroup/radiogroup.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/searchselect': `import '${new URL('./components/SearchSelect/searchselect.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/select': `import '${new URL('./components/Select/select.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/tabs': `import '${new URL('./components/Tabs/tabs.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/themetoggle': `import '${new URL('./components/ThemeToggle/themetoggle.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/toaster': `import '${new URL('./components/Toast/toaster.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/toast': `import '${new URL('./components/Toast/toast.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/toggle': `import '${new URL('./components/Toggle/toggle.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/tooltip': `import '${new URL('./components/Tooltip/tooltip.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/accordion': `import '${new URL('./components/Accordion/accordion.js', import.meta.url)}';`,
+ 'studiocms:ui/scripts/progress': `import '${new URL('./components/Progress/progress.js', import.meta.url)}';`,
+ 'studiocms:ui/components/select/script': `
+ export { SUISelectElement } from '${new URL('./components/Select/select.js', import.meta.url)}';
+ `,
+ // Components
+ ...virtualComponents,
+
+ 'studiocms:ui/utils': `
+ export { ThemeHelper, Theme } from '${new URL('./utils/ThemeHelper.js', import.meta.url)}';
+ `,
+
+ 'studiocms:ui/icons': `
+ ${icons.integrationCollections ? icons.integrationCollections : ''}
+ export const availableIcons = ${JSON.stringify(icons.availableIcons)};
+ export const iconCollections = ${JSON.stringify(icons.collectionNames)};
+ `,
+ }),
+ ],
+ },
+ });
+
+ if (!options.noInjectResetCSS || !options.noInjectCSS) {
+ injectScript('page-ssr', `import 'studiocms:ui/reset-css';`);
+ }
- if (!options.noInjectResetCSS || !options.noInjectCSS) {
- injectScript('page-ssr', `import 'studiocms:ui/reset-css';`);
- }
+ if (!options.noInjectCSS) {
+ injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
+ }
- if (!options.noInjectCSS) {
- injectScript('page-ssr', `import 'studiocms:ui/global-css';`);
- }
+ if (options.customCss) {
+ injectScript('page-ssr', `import 'studiocms:ui/custom-css';`);
+ }
- if (options.customCss) {
- injectScript('page-ssr', `import 'studiocms:ui/custom-css';`);
+ addDevToolbarApp({
+ id: 'studiocms-ui-toolbar',
+ name: 'StudioCMS/UI',
+ entrypoint: new URL('./toolbar/index.js', import.meta.url),
+ icon: studiocmsLogo,
+ });
+ } catch (err) {
+ console.error(err);
}
-
- addDevToolbarApp({
- id: 'studiocms-ui-toolbar',
- name: 'StudioCMS/UI',
- entrypoint: resolve('./toolbar/index.js'),
- icon: studiocmsLogo,
- });
},
'astro:config:done': ({ injectTypes }) => {
injectTypes(
diff --git a/packages/studiocms_ui/src/utils/typegen.ts b/packages/studiocms_ui/src/utils/typegen.ts
index 23a346c4..5f6c99e0 100644
--- a/packages/studiocms_ui/src/utils/typegen.ts
+++ b/packages/studiocms_ui/src/utils/typegen.ts
@@ -1,8 +1,5 @@
import fs from 'node:fs';
import type { InjectedType } from 'astro';
-import { createResolver } from 'astro-integration-kit';
-
-const { resolve } = createResolver(import.meta.url);
export function generateIconTypes(
filename: string,
@@ -12,7 +9,7 @@ export function generateIconTypes(
iconCollections: string;
}
): InjectedType {
- const stubFile = fs.readFileSync(resolve('./stubs/icons-d-ts.stub'), 'utf-8');
+ const stubFile = fs.readFileSync(new URL('./stubs/icons-d-ts.stub', import.meta.url), 'utf-8');
const outputFile = stubFile
.replace('$$COLLECTIONS$$', replacers.collections)
.replace('$$AVAILABLE_ICONS$$', replacers.availableIcons)
diff --git a/packages/studiocms_ui/src/virtuals.d.ts b/packages/studiocms_ui/src/virtuals.d.ts
index 2043b438..66f27712 100644
--- a/packages/studiocms_ui/src/virtuals.d.ts
+++ b/packages/studiocms_ui/src/virtuals.d.ts
@@ -5,6 +5,8 @@ declare module 'studiocms:ui/version' {
declare module 'studiocms:ui/global-css' {}
+declare module 'studiocms:ui/reset-css' {}
+
declare module 'studiocms:ui/custom-css' {}
declare module 'studiocms:ui/scripts/*' {}
diff --git a/packages/studiocms_ui/test/components/__snapshots__/SearchSelect.test.ts.snap b/packages/studiocms_ui/test/components/__snapshots__/SearchSelect.test.ts.snap
index dad6496a..fbb8f7bd 100644
--- a/packages/studiocms_ui/test/components/__snapshots__/SearchSelect.test.ts.snap
+++ b/packages/studiocms_ui/test/components/__snapshots__/SearchSelect.test.ts.snap
@@ -1,3 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`SearchSelect Component > renders SearchSelect component correctly 1`] = `"