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

package/dist/css/Chip.css

@@ -0,0 +1,65 @@
+@layer Chip {
+.Chip-module_chip__r494r {
+  position: relative;
+  display: inline-flex;
+}
+
+.Chip-module_input__GhNGk {
+  position: absolute;
+  opacity: 0;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  font-size: 0;
+}
+
+.Chip-module_text__sYRMh {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0 0.875em;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--chip-color);
+  border: 1px solid var(--chip-border);
+  border-radius: 999px;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.Chip-module_text__sYRMh:hover {
+  background-color: var(--chip-hover-bg);
+}
+
+.Chip-module_input__GhNGk:checked + .Chip-module_text__sYRMh {
+  color: var(--chip-checked-color);
+  background-color: var(--chip-checked-bg);
+  border-color: var(--chip-checked-border);
+}
+
+.Chip-module_input__GhNGk:focus-visible + .Chip-module_text__sYRMh {
+  outline: 2px solid var(--chip-focus);
+  outline-offset: 2px;
+}
+
+.Chip-module_input__GhNGk:disabled + .Chip-module_text__sYRMh {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.Chip-module_input__GhNGk:disabled + .Chip-module_text__sYRMh:hover {
+  background-color: transparent;
+}
+
+.Chip-module_input__GhNGk:disabled:checked + .Chip-module_text__sYRMh:hover {
+  background-color: var(--chip-checked-bg);
+}
+
+}

package/dist/css/ColorInput.css

@@ -31,6 +31,7 @@
 
 .ColorInput-module_field__JQwJJ:focus-within {
   border-color: var(--colorinput-focus-border);
+  background-clip: padding-box;
 }
 
 .ColorInput-module_swatch__sLvyf {
@@ -41,10 +42,15 @@
   margin: 0;
   padding: 0;
   cursor: pointer;
-  border: 1px solid var(--colorinput-popup-border);
+  border: 0;
   border-radius: 6px;
   appearance: none;
   -webkit-appearance: none;
+  transition: transform 0.15s ease;
+}
+
+.ColorInput-module_swatch__sLvyf:not(:disabled):active {
+  transform: scale(0.9);
 }
 
 .ColorInput-module_swatch__sLvyf:focus-visible {

package/dist/css/ColorPicker.css

@@ -19,7 +19,6 @@
   height: 10em;
   cursor: crosshair;
   touch-action: none;
-  border: 1px solid var(--picker-border);
   border-radius: var(--picker-radius);
   background-image:
     linear-gradient(to top, #000, transparent),
@@ -40,6 +39,11 @@
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
   outline: none;
+  transition: transform 0.15s ease;
+}
+
+.ColorPicker-module_picker__b-U0f:not(.ColorPicker-module_disabled__jM1X3) .ColorPicker-module_panel__kComH:active .ColorPicker-module_thumb__Vi5yp {
+  transform: scale(1.2);
 }
 
 .ColorPicker-module_thumb__Vi5yp:focus-visible {

package/dist/css/Combobox.css

@@ -39,6 +39,7 @@
 
 .Combobox-module_input__ti3bv:focus {
   border-color: var(--combobox-focus-border-color);
+  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv:disabled {

package/dist/css/DatePicker.css

@@ -39,6 +39,7 @@
 
 .DatePicker-module_input__e7dhN:focus {
   border-color: var(--datepicker-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN:disabled {

package/dist/css/DateRangePicker.css

@@ -33,6 +33,7 @@
 
 .DateRangePicker-module_field__4UZhH:focus-within {
   border-color: var(--daterange-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DateRangePicker-module_input__h9sDj {

package/dist/css/Input.css

@@ -53,6 +53,7 @@
 
 .Input-module_inputWrapper__WpYTp.Input-module_hover__Gq-MR {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .Input-module_input__hCma0 {

package/dist/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/dist/css/Modal-ModalAction.css

@@ -1,8 +1,13 @@
 @layer Modal-ModalAction {
 .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/dist/css/Modal-ModalActions.css

@@ -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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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';