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

package/esm/{chunk-SGWX6H4Y.js → chunk-RWRFOGCU.js}

@@ -1,6 +1,9 @@
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   Loading_default
 } from "./chunk-LMDBE6T6.js";
@@ -231,6 +234,7 @@ var ButtonDropdownComponent = React3.forwardRef(
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current);
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const colors = getColor(theme.palette, type);
     const itemChildren = pickChild(children, ButtonDropdownItem_default)[1];
     const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(
@@ -328,9 +332,9 @@ var ButtonDropdownComponent = React3.forwardRef(
               {
                 className: ButtonDropdown_module_css_default.content,
                 style: {
-                  boxShadow: theme.expressiveness.shadowMedium,
+                  boxShadow: surface.shadow,
                   transform: "translateY(4px)",
-                  backgroundColor: type === "default" ? theme.palette.background : colors.bgColor
+                  backgroundColor: type === "default" ? surface.bg : colors.bgColor
                 },
                 children: itemChildrenWithoutMain
               }

package/esm/{chunk-STYC6O24.js → chunk-SJVWKNGY.js}

@@ -9,7 +9,10 @@ import {
 } from "./chunk-ZRORQ2WH.js";
 import {
   Button_default
-} from "./chunk-DXHNQANX.js";
+} from "./chunk-TPZUTHTQ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_theme_default
 } from "./chunk-V5I4ORQQ.js";
@@ -140,12 +143,13 @@ var Tour = React.forwardRef(
       ...above ? { bottom: window.innerHeight - rect.top + spotlightPadding + GAP } : { top: rect.bottom + spotlightPadding + GAP }
     } : { width };
     const dark = theme.type === "dark";
+    const surface = getSurface(theme);
     const tourStyle = {
       "--tour-color": theme.palette.foreground,
       "--tour-muted": theme.palette.accents_5,
       "--tour-radius": theme.layout.radius,
-      "--tour-bg": dark ? theme.palette.accents_3 : theme.palette.background,
-      "--tour-shadow": theme.expressiveness.shadowMedium,
+      "--tour-bg": surface.bg,
+      "--tour-shadow": surface.shadow,
       "--tour-dim": dark ? "rgb(0 0 0 / 60%)" : "rgb(0 0 0 / 55%)",
       ...style
     };

package/esm/{chunk-P245HSVB.js → chunk-TLVSZCKU.js}

@@ -273,7 +273,8 @@ var CalendarComponent = React.forwardRef(
       "--calendar-margin-left": SCALES.ml(0),
       "--calendar-weekday-color": theme.palette.accents_5,
       "--calendar-radius": theme.layout.radius,
-      "--calendar-hover-bg": theme.palette.accents_2,
+      // a popup around the calendar (DatePicker) sets its own, lighter hover
+      "--calendar-hover-bg": `var(--calendar-popup-hover, ${theme.palette.accents_2})`,
       "--calendar-focus-outline": theme.palette.primary,
       "--calendar-disabled-color": theme.palette.accents_3,
       "--calendar-today-border": theme.palette.accents_4,

package/esm/{chunk-AG2NWQYL.js → chunk-WCTANCLG.js}

@@ -83,7 +83,9 @@ var Dropdown = React.memo(
         width: nativeWidth,
         elementTop
       } = getRefRect(parent, getPopupContainer);
-      setRect({ top, left, right, width: nativeWidth, elementTop });
+      setRect(
+        (prev) => prev.top === top && prev.left === left && prev.right === right && prev.width === nativeWidth && prev.elementTop === elementTop ? prev : { top, left, right, width: nativeWidth, elementTop }
+      );
     };
     use_resize_default(updateRect);
     use_click_anywhere_default(() => {

package/esm/{chunk-DIMJQLWY.js → chunk-XUNC7RB7.js}

@@ -1,18 +1,21 @@
 import {
   Grid_default
 } from "./chunk-JFNYQSEZ.js";
-import {
-  dropdown_default
-} from "./chunk-AG2NWQYL.js";
 import {
   getColors
 } from "./chunk-KBZEYKCZ.js";
+import {
+  dropdown_default
+} from "./chunk-WCTANCLG.js";
 import {
   log_warning_default
 } from "./chunk-AXYDJGTN.js";
 import {
   use_current_state_default
 } from "./chunk-33BUV2RX.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -93,6 +96,7 @@ var SelectDropdown = React3.forwardRef(
     getPopupContainer
   }, dropdownRef) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const internalDropdownRef = useRef(null);
     const { ref } = useSelectContext();
     const classes = use_classes_default(SelectDropdown_module_css_default.selectDropdown, className);
@@ -114,8 +118,8 @@ var SelectDropdown = React3.forwardRef(
             className: classes,
             style: {
               "--select-dropdown-radius": theme.layout.radius,
-              "--select-dropdown-shadow": theme.expressiveness.shadowMedium,
-              "--select-dropdown-bg": colors.bgColor,
+              "--select-dropdown-shadow": surface.shadow,
+              "--select-dropdown-bg": colors.bgColor === theme.palette.background ? surface.bg : colors.bgColor,
               "--select-dropdown-border": colors.borderColor,
               "--select-dropdown-color": colors.color,
               ...dropdownStyle

package/esm/{chunk-GGCVPMXO.js → chunk-Y432C24Z.js}

@@ -1,6 +1,6 @@
 import {
   Tooltip_default
-} from "./chunk-XF4TPE2W.js";
+} from "./chunk-IL7L3BEL.js";
 import {
   use_latest_default
 } from "./chunk-ZRORQ2WH.js";

package/esm/{chunk-BHQRX76X.js → chunk-YLLPYRJH.js}

@@ -6,10 +6,13 @@ import {
   fromISO,
   startOfDay,
   toISO
-} from "./chunk-P245HSVB.js";
+} from "./chunk-TLVSZCKU.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -60,6 +63,7 @@ var DateRangePickerComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const colors = getColors(theme.palette, type, disabled, {
       filled,
@@ -140,7 +144,8 @@ var DateRangePickerComponent = React.forwardRef(
       "--daterange-margin-right": SCALES.mr(0),
       "--daterange-margin-bottom": SCALES.mb(0),
       "--daterange-margin-left": SCALES.ml(0),
-      "--daterange-bg": theme.palette.background,
+      "--daterange-bg": surface.bg,
+      "--calendar-popup-hover": surface.hover,
       "--daterange-border-color": theme.palette.border,
       "--daterange-radius": rounded ? "25px" : theme.layout.radius,
       "--daterange-popup-radius": theme.layout.radius,
@@ -154,7 +159,7 @@ var DateRangePickerComponent = React.forwardRef(
       "--daterange-separator-color": colors.iconColor,
       "--daterange-toggle-color": colors.iconColor,
       "--daterange-toggle-hover-color": colors.color,
-      "--daterange-shadow": theme.expressiveness.shadowMedium,
+      "--daterange-shadow": surface.shadow,
       ...style
     };
     const inputProps = {

package/esm/css/Alert.css

@@ -0,0 +1,53 @@
+@layer Alert {
+.Alert-module_alert__Ghxl7 {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  line-height: 1.6;
+}
+
+.Alert-module_alert__Ghxl7 p {
+  margin: 0;
+}
+
+.Alert-module_icon__hcZdu {
+  display: inline-flex;
+  flex: none;
+  margin-top: 0.2em;
+}
+
+.Alert-module_body__SuUYD {
+  flex: 1;
+  min-width: 0;
+}
+
+.Alert-module_title__8yipK {
+  font-weight: 600;
+}
+
+.Alert-module_close__ZPg5d {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin: 0.15em -0.25em 0 0;
+  padding: 0.25em;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.Alert-module_close__ZPg5d:hover {
+  opacity: 1;
+}
+
+.Alert-module_close__ZPg5d:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+}

package/esm/css/Chip-ChipGroup.css

@@ -0,0 +1,8 @@
+@layer Chip-ChipGroup {
+.ChipGroup-module_group__6ARIk {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+}

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/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/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/esm/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/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/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/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/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';