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

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 {
@@ -27,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 {
@@ -62,7 +62,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 {
@@ -23,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/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/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/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

@@ -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';
@@ -60,6 +64,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';
@@ -68,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';
@@ -108,10 +116,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 +134,10 @@ 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';
 export type { TreeProps, TreeNodeData } from './Tree';
 export { default as Toggle } from './Toggle';