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

package/esm/css/TagsInput.css

@@ -0,0 +1,99 @@
+@layer TagsInput {
+.TagsInput-module_withLabel__-n8Kq {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.TagsInput-module_field__ieR7N {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375em;
+  box-sizing: border-box;
+  min-height: var(--input-height);
+  padding: 0.25em 0.625em;
+  border: 1px solid var(--input-border);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg);
+  cursor: text;
+  transition: border 0.2s ease;
+}
+
+.TagsInput-module_field__ieR7N:hover {
+  border-color: var(--input-hover-border);
+  background-color: var(--input-hover-bg);
+}
+
+.TagsInput-module_field__ieR7N:focus-within {
+  border-color: var(--input-focus-border);
+}
+
+.TagsInput-module_field__ieR7N.TagsInput-module_disabled__cCN-w {
+  cursor: not-allowed;
+}
+
+.TagsInput-module_tag__dhER4 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0.125em 0.25em 0.125em 0.625em;
+  line-height: 1.5;
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: calc(var(--input-radius) - 2px);
+  overflow-wrap: anywhere;
+}
+
+.TagsInput-module_remove__oullb {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.125em;
+  font: inherit;
+  color: var(--tag-remove-color);
+  background-color: none;
+  border: 0;
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.TagsInput-module_remove__oullb:hover:not(:disabled) {
+  color: var(--tag-remove-hover-color);
+}
+
+.TagsInput-module_remove__oullb:focus-visible {
+  outline: 2px solid var(--input-focus-border);
+}
+
+.TagsInput-module_remove__oullb:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.TagsInput-module_input__RFYNn {
+  flex: 1;
+  min-width: 6em;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--input-color);
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.TagsInput-module_input__RFYNn::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.TagsInput-module_input__RFYNn:disabled {
+  cursor: not-allowed;
+}
+
+}

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/Tree.css

@@ -0,0 +1,88 @@
+@layer Tree {
+.Tree-module_tree__2jgbS {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--tree-color);
+}
+
+.Tree-module_group__H2325 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.Tree-module_item__wk8rO {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.Tree-module_row__lm4LA {
+  display: flex;
+  align-items: center;
+  gap: 0.375em;
+  box-sizing: border-box;
+  padding: 0.375em 0.5em 0.375em calc(0.5em + var(--tree-level) * 1.25em);
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--tree-radius);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.Tree-module_row__lm4LA:hover {
+  background: var(--tree-hover-bg);
+}
+
+.Tree-module_selected__DwSTb,
+.Tree-module_selected__DwSTb:hover {
+  color: var(--tree-selected-color);
+  background: var(--tree-selected-bg);
+}
+
+.Tree-module_item__wk8rO:focus-visible > .Tree-module_row__lm4LA {
+  outline: 2px solid var(--tree-focus);
+  outline-offset: -2px;
+}
+
+.Tree-module_disabled__9ghlS,
+.Tree-module_disabled__9ghlS:hover {
+  color: var(--tree-disabled-color);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.Tree-module_chevron__V-147 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+}
+
+.Tree-module_chevronIcon__YhP38 {
+  transition: transform 0.15s ease;
+}
+
+.Tree-module_open__kBS5H {
+  transform: rotate(90deg);
+}
+
+.Tree-module_icon__wiWbw {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--tree-icon-color);
+}
+
+.Tree-module_label__EoRFb {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+}

package/esm/index.d.ts

@@ -18,6 +18,8 @@ export { default as Capacity } from './Capacity';
 export type { CapacityProps } from './Capacity';
 export { default as Card } from './Card';
 export type { CardProps, CardContentProps, CardFooterProps } from './Card';
+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 Code } from './Code';
@@ -26,12 +28,18 @@ export { default as Col } from './Col';
 export type { ColProps } from './Col';
 export { default as Collapse } from './Collapse';
 export type { CollapseProps, CollapseGroupProps } from './Collapse';
+export { default as ColorInput } from './ColorInput';
+export type { ColorInputProps } from './ColorInput';
+export { default as ColorPicker } from './ColorPicker';
+export type { ColorPickerProps } from './ColorPicker';
 export { default as Combobox } from './Combobox';
 export type { ComboboxProps, ComboboxOption } from './Combobox';
 export { default as Container } from './Container';
 export type { ContainerProps } from './Container';
 export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { default as DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerProps } from './DateRangePicker';
 export { default as Description } from './Description';
 export type { DescriptionProps } from './Description';
 export { default as Display } from './Display';
@@ -44,12 +52,16 @@ export { default as EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 export { default as Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
+export { default as Dropzone } from './Dropzone';
+export type { DropzoneProps, FileRejection, FileRejectionReason } from './Dropzone';
 export { default as Fieldset } from './Fieldset';
 export type { FieldsetProps, FieldsetTitleProps, FieldsetSubtitleProps, FieldsetGroupProps, FieldsetFooterProps, FieldsetContentProps } from './Fieldset';
 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';
@@ -70,6 +82,8 @@ export { default as Page } from './Page';
 export type { PageProps, PageHeaderProps, PageContentProps, PageFooterProps } from './Page';
 export { default as Pagination } from './Pagination';
 export type { PaginationProps, PaginationNextProps, PaginationPreviousProps } from './Pagination';
+export { default as PinInput } from './PinInput';
+export type { PinInputProps } from './PinInput';
 export { default as Popover } from './Popover';
 export type { PopoverProps, PopoverItemProps } from './Popover';
 export { default as Progress } from './Progress';
@@ -82,6 +96,8 @@ export { default as Row } from './Row';
 export type { RowProps } from './Row';
 export { default as Section } from './Section';
 export type { SectionProps } from './Section';
+export { default as SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlValue } from './SegmentedControl';
 export { default as Select } from './Select';
 export type { SelectProps, SelectOptionProps } from './Select';
 export { default as Skeleton } from './Skeleton';
@@ -94,20 +110,28 @@ 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';
 export type { TagProps } from './Tag';
+export { default as TagsInput } from './TagsInput';
+export type { TagsInputProps } from './TagsInput';
 export { default as Text } from './Text';
 export type { TextProps } from './Text';
 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';
 export type { ToggleProps } from './Toggle';
 export { default as Tooltip } from './Tooltip';
@@ -129,6 +153,8 @@ export { default as useModal } from './use-modal';
 export { default as useTabs } from './use-tabs';
 export { default as useClickAway } from './use-click-away';
 export { default as useCurrentState } from './use-current-state';
+export { default as ContextMenu } from './ContextMenu';
+export type { ContextMenuProps } from './ContextMenu';
 export { default as CssBaseline } from './CssBaseline';
 export { default as useTheme } from './use-theme';
 export { default as useClasses } from './use-classes';