@bolio-ui/core 3.0.0-alpha.2 → 3.0.1

package/esm/css/Mention.css

@@ -0,0 +1,93 @@
+@layer Mention {
+.Mention-module_mention__R3-5t {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  font-size: var(--mention-font-size);
+  width: var(--mention-width);
+  height: var(--mention-height);
+  margin: var(--mention-margin-top) var(--mention-margin-right)
+    var(--mention-margin-bottom) var(--mention-margin-left);
+}
+
+.Mention-module_field__U5FXf {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 12.5em;
+  padding: 0.625em 0.875em;
+  font: inherit;
+  line-height: 1.5;
+  color: var(--mention-field-color);
+  background-color: var(--mention-field-bg);
+  border: 1px solid var(--mention-field-border);
+  border-radius: var(--mention-radius);
+  outline: none;
+  resize: vertical;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.Mention-module_field__U5FXf::placeholder {
+  color: var(--mention-placeholder-color);
+}
+
+.Mention-module_field__U5FXf:hover {
+  border-color: var(--mention-field-hover-border);
+  background-color: var(--mention-field-hover-bg);
+}
+
+.Mention-module_field__U5FXf:focus {
+  border-color: var(--mention-focus-border-color);
+  background-clip: padding-box;
+}
+
+.Mention-module_field__U5FXf:disabled {
+  cursor: not-allowed;
+}
+
+.Mention-module_list__QQ5RM,
+.Mention-module_empty__YkZOO {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  box-sizing: border-box;
+  background-color: var(--mention-bg);
+  border: 1px solid var(--mention-border-color);
+  border-radius: var(--mention-radius);
+  box-shadow: var(--mention-shadow);
+}
+
+.Mention-module_list__QQ5RM {
+  max-height: 15em;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.25em;
+  list-style: none;
+}
+
+.Mention-module_option__8CupI {
+  padding: 0.5em 0.75em;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--mention-text-color);
+}
+
+.Mention-module_active__8GmDl {
+  background-color: var(--mention-active-bg);
+}
+
+.Mention-module_disabled__4PL94 {
+  cursor: not-allowed;
+  color: var(--mention-empty-color);
+}
+
+.Mention-module_empty__YkZOO {
+  padding: 0.75em;
+  color: var(--mention-empty-color);
+}
+
+}

package/esm/css/Menu-MenuItem.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuItem {
+@layer Menu {
 .MenuItem-module_menuItem__hgTYG {
   display: flex;
   align-items: center;

package/esm/css/Menu-MenuList.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuList {
+@layer Menu {
 .MenuList-module_menuList__8VtPL {
   box-sizing: border-box;
   min-width: 12em;

package/esm/css/Menu-MenuSub.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuSub {
+@layer Menu {
 .MenuSub-module_menuSub__yZ0fN {
   position: relative;
 }

package/esm/css/Modal-ModalAction.css

@@ -1,8 +1,13 @@
-@layer Modal-ModalAction {
+@layer Modal {
 .ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:hover,
-.ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:focus {
+.ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:focus-visible {
   color: var(--modal-action-hover-color);
   background-color: var(--modal-action-hover-bg);
 }
 
+/* Shrinking the pressed action exposes the footer around it as an edge */
+.ModalAction-module_action__hEtmQ.btn:active {
+  transform: none;
+}
+
 }

package/esm/css/Modal-ModalActions.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalActions {
+@layer Modal {
 .ModalActions-module_footer__gDr-2 {
   display: flex;
   overflow: hidden;
@@ -10,8 +10,15 @@
   right: 0;
 }
 
-.ModalActions-module_footer__gDr-2 > button.btn + button.btn {
-  border-left: 1px solid var(--modal-actions-border);
+/* The action sets its border inline, so the divider is drawn as a pseudo-element */
+.ModalActions-module_footer__gDr-2 > button.btn + button.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  background-color: var(--modal-actions-border);
 }
 
 .ModalActions-module_spacer__zek5w {

package/esm/css/Modal-ModalContent.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalContent {
+@layer Modal {
 .ModalContent-module_content__RXGwI {
   position: relative;
   text-align: left;

package/esm/css/Modal-ModalSubtitle.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalSubtitle {
+@layer Modal {
 .ModalSubtitle-module_subtitle__Hudi- {
   font-weight: normal;
   display: inline-block;

package/esm/css/Modal-ModalTitle.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalTitle {
+@layer Modal {
 .ModalTitle-module_title__ThnLn {
   line-height: 1.6;
   font-weight: normal;

package/esm/css/Modal-ModalWrapper.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalWrapper {
+@layer Modal {
 .ModalWrapper-module_wrapper__DGcJw {
   max-width: 100%;
   vertical-align: middle;

package/esm/css/NumberInput.css

@@ -22,6 +22,7 @@
 
 .NumberInput-module_numberInput__hOY3x:focus-within {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .NumberInput-module_numberInput__hOY3x.NumberInput-module_disabled__gDhCu {

package/esm/css/Page-PageHeader.css

@@ -1,4 +1,4 @@
-@layer Page-PageHeader {
+@layer Page {
 .PageHeader-module_center__yFLt0 {
   display: flex;
   justify-content: center;

package/esm/css/Pagination-PaginationEllipsis.css

@@ -1,4 +1,4 @@
-@layer Pagination-PaginationEllipsis {
+@layer Pagination {
 .PaginationEllipsis-module_svg__2Fipb {
   color: currentColor;
   stroke: currentColor;

package/esm/css/Pagination-PaginationItem.css

@@ -1,4 +1,4 @@
-@layer Pagination-PaginationItem {
+@layer Pagination {
 .PaginationItem-module_li__luFDz {
   margin-right: 0.428em;
   display: inline-block;

package/esm/css/PinInput.css

@@ -31,6 +31,7 @@
 
 .PinInput-module_box__DIU85:focus {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .PinInput-module_box__DIU85:disabled {

package/esm/css/Popover-PopoverItem.css

@@ -1,4 +1,4 @@
-@layer Popover-PopoverItem {
+@layer Popover {
 .PopoverItem-module_item__ntzzC {
   display: flex;
   box-sizing: border-box;

package/esm/css/Radio-RadioGroup.css

@@ -1,4 +1,4 @@
-@layer Radio-RadioGroup {
+@layer Radio {
 .RadioGroup-module_radioGroup__6XPZE {
   display: flex;
 }

package/esm/css/SegmentedControl-SegmentedControlItem.css

@@ -1,4 +1,4 @@
-@layer SegmentedControl-SegmentedControlItem {
+@layer SegmentedControl {
 .SegmentedControlItem-module_item__R48V1 {
   position: relative;
   display: flex;

package/esm/css/Select-SelectDropdown.css

@@ -1,4 +1,4 @@
-@layer Select-SelectDropdown {
+@layer Select {
 .SelectDropdown-module_selectDropdown__gcGH- {
   border-radius: var(--select-dropdown-radius);
   border: 1px solid var(--select-dropdown-border);

package/esm/css/Select-SelectIcon.css

@@ -1,4 +1,4 @@
-@layer Select-SelectIcon {
+@layer Select {
 .SelectIcon-module_icon__vgja5 {
   color: inherit;
   stroke: currentColor;

package/esm/css/Select-SelectIconClear.css

@@ -1,4 +1,4 @@
-@layer Select-SelectIconClear {
+@layer Select {
 .SelectIconClear-module_clearIcon__p5IH4 {
   padding: 0 0 0 0.5em;
   margin: 0;

package/esm/css/Select-SelectInput.css

@@ -1,4 +1,4 @@
-@layer Select-SelectInput {
+@layer Select {
 .SelectInput-module_input__xsgNv {
   position: fixed;
   top: -10000px;

package/esm/css/Select-SelectMultipleValue.css

@@ -1,4 +1,4 @@
-@layer Select-SelectMultipleValue {
+@layer Select {
 .SelectMultipleValue-module_item__P4Dn3 {
   display: inline-flex;
   justify-items: center;

package/esm/css/Select-SelectOption.css

@@ -1,4 +1,4 @@
-@layer Select-SelectOption {
+@layer Select {
 .SelectOption-module_option__NAlFp {
   display: flex;
   max-width: 100%;

package/esm/css/Shared-backdrop.css

@@ -1,4 +1,4 @@
-@layer Shared-backdrop {
+@layer Shared {
 .backdrop-module_backdrop__fZn5s {
   position: fixed;
   top: 0;

package/esm/css/Shared-ellipsis.css

@@ -1,4 +1,4 @@
-@layer Shared-ellipsis {
+@layer Shared {
 .ellipsis-module_ellipsis__kLorN {
   overflow: hidden;
   text-overflow: ellipsis;

package/esm/css/Slider-SliderDot.css

@@ -1,4 +1,4 @@
-@layer Slider-SliderDot {
+@layer Slider {
 .SliderDot-module_dot__1VxCn {
   position: absolute;
   top: 50%;

package/esm/css/Slider-SliderMark.css

@@ -1,4 +1,4 @@
-@layer Slider-SliderMark {
+@layer Slider {
 .SliderMark-module_span__gKYKM {
   position: absolute;
   width: 2px;

package/esm/css/Snippet-SnippetIcon.css

@@ -1,4 +1,4 @@
-@layer Snippet-SnippetIcon {
+@layer Snippet {
 .SnippetIcon-module_icon__HUZlq {
   width: 1.69em;
   height: 1.69em;

package/esm/css/Stepper-StepperStep.css

@@ -1,4 +1,4 @@
-@layer Stepper-StepperStep {
+@layer Stepper {
 .StepperStep-module_step__Of2Aj {
   display: flex;
   flex: 1;

package/esm/css/Table-TableBody.css

@@ -1,4 +1,4 @@
-@layer Table-TableBody {
+@layer Table {
 .TableBody-module_tr__lTn-M {
   transition: background-color 0.25s ease;
   font-size: inherit;

package/esm/css/Table-TableHead.css

@@ -1,4 +1,4 @@
-@layer Table-TableHead {
+@layer Table {
 .TableHead-module_thead__zMtMt {
   border-collapse: separate;
   border-spacing: 0;

package/esm/css/Table-TableSelectBox.css

@@ -1,4 +1,4 @@
-@layer Table-TableSelectBox {
+@layer Table {
 .TableSelectBox-module_box__UXj-E {
   display: block;
   width: 1em;

package/esm/css/Tabs-TabsItem.css

@@ -1,4 +1,4 @@
-@layer Tabs-TabsItem {
+@layer Tabs {
 .TabsItem-module_tab__uI-6R {
   position: relative;
   box-sizing: border-box;

package/esm/css/TagsInput.css

@@ -26,6 +26,7 @@
 
 .TagsInput-module_field__ieR7N:focus-within {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .TagsInput-module_field__ieR7N.TagsInput-module_disabled__cCN-w {

package/esm/css/Textarea.css

@@ -22,6 +22,7 @@
 
 .Textarea-module_wrapper__AgIvs.Textarea-module_hover__pK4xh {
   border-color: var(--textarea-focus-border);
+  background-clip: padding-box;
 }
 
 .Textarea-module_wrapper__AgIvs.Textarea-module_disabled__M-zKD {

package/esm/css/Toolbar.css

@@ -0,0 +1,32 @@
+@layer Toolbar {
+.Toolbar-module_toolbar__GZv6U {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  width: fit-content;
+  padding: 0.25em;
+  border: 1px solid var(--toolbar-border);
+  border-radius: var(--toolbar-radius);
+}
+
+.Toolbar-module_vertical__bTAsV {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.Toolbar-module_separator__Gs9-M {
+  flex: none;
+  align-self: stretch;
+  width: 1px;
+  margin: 0.125em 0.25em;
+  background: var(--toolbar-border);
+}
+
+.Toolbar-module_vertical__bTAsV .Toolbar-module_separator__Gs9-M {
+  width: auto;
+  height: 1px;
+  margin: 0.25em 0.125em;
+}
+
+}

package/esm/css/Tooltip-TooltipContent.css

@@ -1,4 +1,4 @@
-@layer Tooltip-TooltipContent {
+@layer Tooltip {
 .TooltipContent-module_tooltipContent__zfz-P {
   box-sizing: border-box;
   position: absolute;

package/esm/css/Tooltip-TooltipIcon.css

@@ -1,4 +1,4 @@
-@layer Tooltip-TooltipIcon {
+@layer Tooltip {
 .TooltipIcon-module_icon__lx2Kw {
   width: 0;
   height: 0;

package/esm/css/use-toasts-toast-container.css

@@ -1,4 +1,4 @@
-@layer use-toasts-toast-container {
+@layer use-toasts {
 .toast-container-module_toasts__wLlVr {
   position: fixed;
   width: auto;

package/esm/css/use-toasts-toast-item.css

@@ -1,4 +1,4 @@
-@layer use-toasts-toast-item {
+@layer use-toasts {
 .toast-item-module_toast__R-DjO {
   max-height: var(--toast-item-max-height);
   display: flex;

package/esm/index.d.ts

@@ -1,3 +1,5 @@
+export { default as Alert } from './Alert';
+export type { AlertProps } from './Alert';
 export { default as Avatar } from './Avatar';
 export type { AvatarProps, AvatarGroupProps } from './Avatar';
 export { default as Badge } from './Badge';
@@ -22,6 +24,8 @@ export { default as Carousel } from './Carousel';
 export type { CarouselProps } from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export type { CheckboxProps, CheckboxGroupProps } from './Checkbox';
+export { default as Chip } from './Chip';
+export type { ChipProps, ChipGroupProps } from './Chip';
 export { default as Code } from './Code';
 export type { CodeProps } from './Code';
 export { default as Col } from './Col';
@@ -70,6 +74,8 @@ export { default as Link } from './Link';
 export type { LinkProps } from './Link';
 export { default as Loading } from './Loading';
 export type { LoadingProps } from './Loading';
+export { default as Mention } from './Mention';
+export type { MentionProps, MentionOption } from './Mention';
 export { default as Menu } from './Menu';
 export type { MenuProps, MenuItemProps, MenuCheckboxItemProps, MenuRadioItemProps, MenuRadioGroupProps, MenuLabelProps, MenuDividerProps, MenuSubProps } from './Menu';
 export { default as Modal } from './Modal';
@@ -128,6 +134,8 @@ export { default as Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
 export { default as Themes } from './Themes';
 export type { BolioUIThemes, BolioUIUserTheme } from './Themes';
+export { default as Toolbar } from './Toolbar';
+export type { ToolbarProps, ToolbarSeparatorProps } from './Toolbar';
 export { default as Tour } from './Tour';
 export type { TourProps, TourStep } from './Tour';
 export { default as Tree } from './Tree';