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

package/esm/css/Dropzone.css

@@ -33,7 +33,6 @@
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease;
-  background-clip: padding-box;
 }
 
 .Dropzone-module_dropzone__-6nFN:hover .Dropzone-module_content__Uafwo {
@@ -88,7 +87,6 @@
   background-color: var(--dropzone-tile-bg);
   border: 1px solid var(--dropzone-border);
   border-radius: var(--dropzone-radius);
-  background-clip: padding-box;
 }
 
 .Dropzone-module_preview__pQ3gz {
@@ -133,7 +131,6 @@
   border-radius: 50%;
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Dropzone-module_remove__pjfHy:hover:not(:disabled) {

package/esm/css/Fieldset-FieldsetGroup.css

@@ -35,7 +35,6 @@
   border: 1px solid var(--fieldset-group-border);
   text-decoration: none;
   outline: none;
-  background-clip: padding-box;
 }
 
 .FieldsetGroup-module_button__kXAoU.FieldsetGroup-module_active__tJFHM {

package/esm/css/ImageZoom.css

@@ -0,0 +1,93 @@
+@layer ImageZoom {
+.ImageZoom-module_trigger__-42Bz {
+  display: inline-block;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  color: inherit;
+  cursor: zoom-in;
+  background: none;
+  border: 0;
+  border-radius: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ImageZoom-module_trigger__-42Bz:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.ImageZoom-module_dialog__TjA9E {
+  box-sizing: border-box;
+  max-width: 100vw;
+  max-height: 100vh;
+  padding: 1rem;
+  overflow: visible;
+  color: #fff;
+  background: transparent;
+  border: 0;
+}
+
+.ImageZoom-module_dialog__TjA9E::backdrop {
+  background: rgb(0 0 0 / 85%);
+}
+
+/* the page behind does not scroll while it is open */
+body:has(.ImageZoom-module_dialog__TjA9E[open]) {
+  overflow: hidden;
+}
+
+.ImageZoom-module_figure__YIBq1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.ImageZoom-module_zoomed__7gfCP {
+  display: block;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 6rem);
+  object-fit: contain;
+  cursor: zoom-out;
+  border-radius: 8px;
+}
+
+.ImageZoom-module_caption__6SFRA {
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.ImageZoom-module_close__iEiwJ {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0;
+  padding: 0;
+  color: #fff;
+  cursor: pointer;
+  background: rgb(255 255 255 / 12%);
+  border: 0;
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ImageZoom-module_close__iEiwJ:hover {
+  background: rgb(255 255 255 / 24%);
+}
+
+.ImageZoom-module_close__iEiwJ:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+}

package/esm/css/Input.css

@@ -26,7 +26,6 @@
   transition:
     border 0.2s ease 0s,
     color 0.2s ease 0s;
-  background-clip: padding-box;
 }
 
 .Input-module_inputWrapper__WpYTp:hover {

package/esm/css/Menu-MenuList.css

@@ -10,7 +10,6 @@
   border-radius: var(--menu-list-radius);
   box-shadow: var(--menu-list-shadow);
   outline: none;
-  background-clip: padding-box;
 }
 
 .MenuList-module_sub__Bjn8e {

package/esm/css/NumberInput.css

@@ -13,7 +13,6 @@
   border-radius: var(--input-radius);
   background-color: var(--input-bg);
   transition: border 0.2s ease;
-  background-clip: padding-box;
 }
 
 .NumberInput-module_numberInput__hOY3x:hover {

package/esm/css/PinInput.css

@@ -22,7 +22,6 @@
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease;
-  background-clip: padding-box;
 }
 
 .PinInput-module_box__DIU85:hover {

package/esm/css/Radio.css

@@ -53,7 +53,6 @@
   display: inline-grid;
   place-items: center;
   margin-right: calc(var(--radio-size) * 0.5);
-  background-clip: padding-box;
 }
 
 .Radio-module_point__O2nmm:before {

package/esm/css/SegmentedControl.css

@@ -8,7 +8,6 @@
   background-color: var(--segmented-bg);
   border: 1px solid var(--segmented-border);
   border-radius: var(--segmented-radius);
-  background-clip: padding-box;
 }
 
 }

package/esm/css/Select-SelectDropdown.css

@@ -10,7 +10,6 @@
   overflow-anchor: none;
   padding: 0.25em;
   scroll-behavior: smooth;
-  background-clip: padding-box;
 }
 
 }

package/esm/css/Select-SelectOption.css

@@ -21,7 +21,6 @@
     var(--select-option-padding-bottom) var(--select-option-padding-left);
   margin: var(--select-option-margin-top) var(--select-option-margin-right)
     var(--select-option-margin-bottom) var(--select-option-margin-left);
-  background-clip: padding-box;
 }
 
 .SelectOption-module_option__NAlFp:hover {

package/esm/css/Select.css

@@ -22,7 +22,6 @@
     var(--select-padding-bottom) var(--select-padding-left);
   margin: var(--select-margin-top) var(--select-margin-right)
     var(--select-margin-bottom) var(--select-margin-left);
-  background-clip: padding-box;
 }
 
 .Select-module_multiple__QrOT5 {

package/esm/css/Splitter.css

@@ -0,0 +1,77 @@
+@layer Splitter {
+.Splitter-module_splitter__ZxGeO {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+.Splitter-module_horizontal__1LuP6 {
+  grid-template-columns: var(--splitter-template);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.Splitter-module_vertical__APNTT {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: var(--splitter-template);
+}
+
+/* the panels share the room in proportion to their size, and the lines keep
+   their own width */
+.Splitter-module_panel__UyXwt {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.Splitter-module_handle__zkBUq {
+  position: relative;
+  background: var(--splitter-line);
+  outline: none;
+  touch-action: none;
+  transition: background-color 0.15s ease;
+}
+
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq {
+  width: 1px;
+  cursor: col-resize;
+}
+
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq {
+  height: 1px;
+  cursor: row-resize;
+}
+
+/* a wider area to grab, around the line */
+.Splitter-module_handle__zkBUq::before {
+  position: absolute;
+  content: '';
+}
+
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq::before {
+  inset: 0 -4px;
+}
+
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq::before {
+  inset: -4px 0;
+}
+
+.Splitter-module_handle__zkBUq:hover,
+.Splitter-module_handle__zkBUq:focus-visible,
+.Splitter-module_handle__zkBUq:active {
+  background: var(--splitter-active);
+}
+
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq:hover,
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq:focus-visible,
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq:active {
+  box-shadow: 0 0 0 1px var(--splitter-active);
+}
+
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq:hover,
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq:focus-visible,
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq:active {
+  box-shadow: 0 0 0 1px var(--splitter-active);
+}
+
+}

package/esm/css/Table-TableBody.css

@@ -24,4 +24,14 @@
   flex-flow: row wrap;
 }
 
+.TableBody-module_selected__7adtQ,
+.TableBody-module_selected__7adtQ:hover {
+  background-color: var(--table-body-selected-bg);
+}
+
+.TableBody-module_tr__lTn-M td.TableBody-module_selectCell__S8ZZn {
+  width: 1%;
+  white-space: nowrap;
+}
+
 }

package/esm/css/Table-TableHead.css

@@ -44,4 +44,45 @@
   text-transform: uppercase;
 }
 
+.TableHead-module_selectCell__JRdGg {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.TableHead-module_sortButton__whwp3 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375em;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.TableHead-module_sortButton__whwp3:hover {
+  color: var(--table-head-sorted-color);
+}
+
+.TableHead-module_sortButton__whwp3:focus-visible {
+  outline: 2px solid var(--table-head-focus-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.TableHead-module_sortIcon__VsHqp {
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+.TableHead-module_sorted__-6XtK {
+  color: var(--table-head-sorted-color);
+  opacity: 1;
+}
+
 }

package/esm/css/Table-TableSelectBox.css

@@ -0,0 +1,11 @@
+@layer Table-TableSelectBox {
+.TableSelectBox-module_box__UXj-E {
+  display: block;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--table-select-accent);
+}
+
+}

package/esm/css/TagsInput.css

@@ -17,7 +17,6 @@
   background-color: var(--input-bg);
   cursor: text;
   transition: border 0.2s ease;
-  background-clip: padding-box;
 }
 
 .TagsInput-module_field__ieR7N:hover {
@@ -62,7 +61,6 @@
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
-  background-clip: padding-box;
 }
 
 .TagsInput-module_remove__oullb:hover:not(:disabled) {

package/esm/css/Textarea.css

@@ -13,7 +13,6 @@
     color 0.2s ease 0s;
   min-width: 12.5rem;
   max-width: 95vw;
-  background-clip: padding-box;
 }
 
 .Textarea-module_wrapper__AgIvs:hover {

package/esm/css/Toggle.css

@@ -36,7 +36,6 @@
   border: 1px solid transparent;
   background-color: var(--toggle-bg);
   padding: 0;
-  background-clip: padding-box;
 }
 
 .Toggle-module_inner__aQgyY {

package/esm/css/Tour.css

@@ -0,0 +1,81 @@
+@layer Tour {
+.Tour-module_tour__FLAxG {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+}
+
+/* the page is dimmed by a shadow around the target, so the target itself
+   stays clear */
+.Tour-module_spotlight__o7ukV {
+  position: fixed;
+  pointer-events: none;
+  border-radius: 8px;
+  box-shadow: 0 0 0 100vmax var(--tour-dim);
+  transition:
+    left 0.2s ease,
+    top 0.2s ease,
+    width 0.2s ease,
+    height 0.2s ease;
+}
+
+.Tour-module_dim__ZPmGZ {
+  position: fixed;
+  inset: 0;
+  background: var(--tour-dim);
+}
+
+.Tour-module_card__p9LCI {
+  position: fixed;
+  box-sizing: border-box;
+  max-width: calc(100vw - 16px);
+  padding: 1rem;
+  color: var(--tour-color);
+  background: var(--tour-bg);
+  border-radius: var(--tour-radius);
+  box-shadow: var(--tour-shadow);
+  outline: none;
+}
+
+.Tour-module_centered__KJvbZ {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.Tour-module_count__2K7-G {
+  font-size: 0.75rem;
+  color: var(--tour-muted);
+}
+
+.Tour-module_title__Z-spV {
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.Tour-module_content__qLvnb {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--tour-muted);
+}
+
+.Tour-module_actions__HKbHi {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.Tour-module_spacer__dkdPy {
+  flex: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Tour-module_spotlight__o7ukV {
+    transition: none;
+  }
+}
+
+}

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

@@ -12,7 +12,6 @@
   box-shadow: var(--toast-item-shadow);
   transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1);
   overflow: hidden;
-  background-clip: padding-box;
 }
 
 .toast-item-module_message__qzTg9 {

package/esm/index.d.ts

@@ -60,6 +60,8 @@ export { default as Grid } from './Grid';
 export type { GridProps, GridContainerProps } from './Grid';
 export { default as Image } from './Image';
 export type { ImageProps, ImageBrowserProps } from './Image';
+export { default as ImageZoom } from './ImageZoom';
+export type { ImageZoomProps } from './ImageZoom';
 export { default as Input } from './Input';
 export type { InputProps, InputPasswordProps } from './Input';
 export { default as Keyboard } from './Keyboard';
@@ -108,10 +110,12 @@ export { default as Spacer } from './Spacer';
 export type { SpacerProps } from './Spacer';
 export { default as Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
+export { default as Splitter } from './Splitter';
+export type { SplitterProps, SplitterPanelProps, SplitterDirection } from './Splitter';
 export { default as Stepper } from './Stepper';
 export type { StepperProps, StepperOrientation, StepperStepProps } from './Stepper';
 export { default as Table } from './Table';
-export type { TableProps, TableColumnProps } from './Table';
+export type { TableProps, TableColumnProps, TableKey, TableSort, TableSortDirection } from './Table';
 export { default as Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
 export { default as Tag } from './Tag';
@@ -124,6 +128,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 Tour } from './Tour';
+export type { TourProps, TourStep } from './Tour';
 export { default as Tree } from './Tree';
 export type { TreeProps, TreeNodeData } from './Tree';
 export { default as Toggle } from './Toggle';

package/esm/index.js

@@ -1,4 +1,7 @@
 'use client';
+import {
+  use_tabs_default
+} from "./chunk-I6WWABJN.js";
 import {
   use_input_default
 } from "./chunk-J4K4LRBI.js";
@@ -9,14 +12,26 @@ import {
   use_modal_default
 } from "./chunk-YDYRM2KN.js";
 import {
-  use_tabs_default
-} from "./chunk-I6WWABJN.js";
+  Timeline_default
+} from "./chunk-AHWF22ZQ.js";
+import {
+  Toggle_default
+} from "./chunk-T74YHCG6.js";
+import {
+  Tour_default
+} from "./chunk-STYC6O24.js";
 import {
   Tree_default
 } from "./chunk-K6UULETP.js";
 import {
   use_all_themes_default
 } from "./chunk-QILHI3LO.js";
+import {
+  Stepper_default
+} from "./chunk-KWKFVS32.js";
+import {
+  Table_default
+} from "./chunk-ZNDN2VPZ.js";
 import {
   Tabs_default,
   highlight_default
@@ -31,11 +46,8 @@ import {
   Text_default
 } from "./chunk-A6N5PIXN.js";
 import {
-  Timeline_default
-} from "./chunk-AHWF22ZQ.js";
-import {
-  Toggle_default
-} from "./chunk-T74YHCG6.js";
+  Select_default
+} from "./chunk-DIMJQLWY.js";
 import {
   Skeleton_default
 } from "./chunk-67WAS5AY.js";
@@ -57,15 +69,15 @@ import {
 import {
   Spinner_default
 } from "./chunk-TZ7TOEP3.js";
+import {
+  Splitter_default
+} from "./chunk-FFEAKF3A.js";
 import {
   Stat_default
 } from "./chunk-5M4QUTS4.js";
 import {
-  Stepper_default
-} from "./chunk-KWKFVS32.js";
-import {
-  Table_default
-} from "./chunk-TKICX5R6.js";
+  PinInput_default
+} from "./chunk-X4TPC7HS.js";
 import {
   Popover_default
 } from "./chunk-GGCVPMXO.js";
@@ -91,8 +103,8 @@ import {
   SegmentedControl_default
 } from "./chunk-2A4BSQ66.js";
 import {
-  Select_default
-} from "./chunk-DIMJQLWY.js";
+  Marquee_default
+} from "./chunk-TJUNBMNF.js";
 import {
   Note_default
 } from "./chunk-AFBCMW2I.js";
@@ -105,24 +117,21 @@ import {
 import {
   Pagination_default
 } from "./chunk-E5EDUOQT.js";
-import {
-  PinInput_default
-} from "./chunk-X4TPC7HS.js";
 import {
   Fieldset_default
 } from "./chunk-WXW7BYE7.js";
 import {
   Grid_default
 } from "./chunk-JFNYQSEZ.js";
+import {
+  ImageZoom_default
+} from "./chunk-REWKR7S3.js";
 import {
   Keyboard_default
 } from "./chunk-RRFCNZ2T.js";
-import {
-  Marquee_default
-} from "./chunk-TJUNBMNF.js";
 import {
   DateRangePicker_default
-} from "./chunk-GYFW5NLU.js";
+} from "./chunk-BHQRX76X.js";
 import {
   Description_default
 } from "./chunk-SDC2VF5K.js";
@@ -180,10 +189,10 @@ import {
 } from "./chunk-GJ77XHZ3.js";
 import {
   ContextMenu_default
-} from "./chunk-AVO2SK2I.js";
+} from "./chunk-3S6G7WGK.js";
 import {
   Menu_default
-} from "./chunk-XLPOECCE.js";
+} from "./chunk-FL6J36B7.js";
 import "./chunk-AG2NWQYL.js";
 import {
   useRect
@@ -192,7 +201,7 @@ import "./chunk-V57PNXMD.js";
 import "./chunk-JJFOGZ6V.js";
 import {
   CssBaseline_default
-} from "./chunk-TDJGMSGT.js";
+} from "./chunk-WIIDIZYK.js";
 import {
   DatePicker_default
 } from "./chunk-2EYJZXS4.js";
@@ -325,6 +334,7 @@ export {
   Grid_default as Grid,
   highlight_default as Highlight,
   Image_default as Image,
+  ImageZoom_default as ImageZoom,
   Input_default as Input,
   KeyCode,
   KeyMod,
@@ -354,6 +364,7 @@ export {
   Snippet_default as Snippet,
   Spacer_default as Spacer,
   Spinner_default as Spinner,
+  Splitter_default as Splitter,
   Stat_default as Stat,
   Stepper_default as Stepper,
   Table_default as Table,
@@ -366,6 +377,7 @@ export {
   Timeline_default as Timeline,
   Toggle_default as Toggle,
   Tooltip_default as Tooltip,
+  Tour_default as Tour,
   Tree_default as Tree,
   use_all_themes_default as useAllThemes,
   use_body_scroll_default as useBodyScroll,