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

package/dist/chunk-ZNNLYTW5.js

@@ -0,0 +1,64 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Divider/Divider.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _jsxruntime = require('react/jsx-runtime');
+var getColor = (type, palette) => {
+  const colors = {
+    default: palette.border,
+    primary: palette.primaryLight,
+    secondary: palette.secondaryLight,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    info: palette.infoLight,
+    dark: palette.foreground,
+    lite: palette.accents_1
+  };
+  return colors[type];
+};
+var DividerComponent = _react2.default.forwardRef(({
+  type = "default",
+  align = "center",
+  children,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "divider", className);
+  const color = _react.useMemo.call(void 0, () => getColor(type, theme.palette), [type, theme.palette]);
+  const alignClassName = _react.useMemo.call(void 0, () => {
+    if (!align || align === "center") return "";
+    if (align === "left" || align === "start") return "start";
+    return "end";
+  }, [align]);
+  const alignClasses = _chunk5KUROAEPjs.use_classes_default.call(void 0, "text", alignClassName);
+  const textColor = type === "default" ? theme.palette.foreground : color;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, role: "separator", ...props, className: _style2.default.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _style2.default.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || ""), children }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "1488853092", dynamic: [color, SCALES.font(1), SCALES.width(1, "auto"), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor], children: `.divider.__jsx-style-dynamic-selector{max-width:100%;background-color:${color};position:relative;font-size:${SCALES.font(1)};width:${SCALES.width(1, "auto")};height:${SCALES.height(0.0625)};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)};}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 0.75em;font-size:inherit;font-weight:bold;text-transform:capitalize;background-color:${theme.palette.background};color:${textColor};z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}` })
+  ] });
+});
+DividerComponent.displayName = "BolioUIDivider";
+var Divider = _chunkS62PPQHNjs.with_scale_default.call(void 0, DividerComponent);
+var Divider_default = Divider;
+
+// core/Divider/index.ts
+var Divider_default2 = Divider_default;
+
+
+
+exports.Divider_default = Divider_default2;

package/dist/chunk-ZQ25CQCG.js

@@ -0,0 +1,153 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkCPIFYIT3js = require('./chunk-CPIFYIT3.js');
+
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunkBSDZWWUSjs = require('./chunk-BSDZWWUS.js');
+
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Popover/Popover.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Popover/PopoverContext.ts
+
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: () => {
+  }
+};
+var PopoverContext = _react2.default.createContext(defaultContext);
+var usePopoverContext = () => _react.useContext.call(void 0, PopoverContext);
+
+// core/Popover/Popover.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var defaultProps = {
+  disableItemsAutoClose: false,
+  trigger: "click",
+  placement: "bottom",
+  portalClassName: "",
+  initialVisible: false,
+  hideArrow: false,
+  type: "default",
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: "",
+  onVisibleChange: (() => {
+  }),
+  visible: false
+};
+var PopoverComponent = _react2.default.forwardRef((popoverProps, ref) => {
+  const {
+    content,
+    children,
+    trigger,
+    placement,
+    initialVisible,
+    portalClassName,
+    disableItemsAutoClose,
+    onVisibleChange,
+    visible: customVisible,
+    type = "default",
+    ...props
+  } = _chunkBSDZWWUSjs.use_default_props_default.call(void 0, popoverProps, defaultProps);
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const [visible, setVisible] = _react.useState.call(void 0, initialVisible);
+  const textNode = _react.useMemo.call(void 0, () => _chunkUX2B3G6Ujs.getReactNode.call(void 0, content), [content]);
+  const onPopoverVisibleChange = _react.useCallback.call(void 0, (next) => {
+    setVisible(next);
+    onVisibleChange(next);
+  }, [onVisibleChange]);
+  const onChildClick = _react.useCallback.call(void 0, () => {
+    onPopoverVisibleChange(false);
+  }, [onPopoverVisibleChange]);
+  const value = _react.useMemo.call(void 0, () => ({
+    onItemClick: onChildClick,
+    disableItemsAutoClose
+  }), [onChildClick, disableItemsAutoClose]);
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "popover", portalClassName);
+  const latestChange = _chunkZRORQ2WHjs.use_latest_default.call(void 0, onPopoverVisibleChange);
+  _react.useEffect.call(void 0, () => {
+    if (customVisible === void 0) return;
+    latestChange.current(customVisible);
+  }, [customVisible, latestChange]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PopoverContext.Provider, { value, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCPIFYIT3js.Tooltip_default, { ref, initialVisible: false, text: textNode, trigger, placement, portalClassName: classes, visible, type, onVisibleChange: onPopoverVisibleChange, ...props, children }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "340951371", dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)], children: `.tooltip-content.popover > .inner{padding:${SCALES.pt(0.9)} ${SCALES.pr(0)} ${SCALES.pb(0.9)} ${SCALES.pl(0)};}` })
+  ] });
+});
+PopoverComponent.displayName = "BolioUIPopover";
+var Popover = _chunkS62PPQHNjs.with_scale_default.call(void 0, PopoverComponent);
+var Popover_default = Popover;
+
+// core/Popover/PopoverItem.tsx
+
+
+function PopoverItemComponent({
+  children,
+  line = false,
+  title = false,
+  className = "",
+  onClick,
+  disableAutoClose = false,
+  ...props
+}) {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const {
+    disableItemsAutoClose,
+    onItemClick
+  } = usePopoverContext();
+  const hasHandler = Boolean(onClick);
+  const dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line;
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "item", {
+    line,
+    title
+  }, className);
+  const clickHandler = (event) => {
+    if (onClick) onClick(event);
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+    onItemClick(event);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { onClick: clickHandler, ...props, className: _style2.default.dynamic([["3536126017", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? "pointer" : "default", theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+      children,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "3536126017", dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? "pointer" : "default", theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.font(0.925), theme.palette.foreground], children: `.item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.accents_5};-webkit-transition: color, background-color 150ms linear;transition: color, background-color 150ms linear;line-height:1.25em;font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};padding:${SCALES.pt(0.5)} ${SCALES.pr(0.75)} ${SCALES.pb(0.5)} ${SCALES.pl(0.75)};cursor:${hasHandler ? "pointer" : "default"};}.item.__jsx-style-dynamic-selector:hover{color:${theme.palette.foreground};}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:${theme.palette.border};height:${SCALES.height(0.0625)};margin:${SCALES.mt(0.35)} ${SCALES.mr(0)} ${SCALES.mb(0.35)} ${SCALES.ml(0)};width:${SCALES.width(1, "100%")};}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:${SCALES.font(0.925)};color:${theme.palette.foreground};}` })
+    ] }),
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverItem, { line: true, title: false })
+  ] });
+}
+PopoverItemComponent.displayName = "BolioUIPopoverItem";
+var PopoverItem = _chunkS62PPQHNjs.with_scale_default.call(void 0, PopoverItemComponent);
+var PopoverItem_default = PopoverItem;
+
+// core/Popover/index.ts
+Popover_default.Item = PopoverItem_default;
+Popover_default.Option = PopoverItem_default;
+var Popover_default2 = Popover_default;
+
+
+
+exports.Popover_default = Popover_default2;

package/dist/chunk-ZRORQ2WH.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/use-latest.ts
+var _react = require('react');
+var useLatest = (value) => {
+  const ref = _react.useRef.call(void 0, value);
+  _react.useEffect.call(void 0, () => {
+    ref.current = value;
+  });
+  return ref;
+};
+var use_latest_default = useLatest;
+
+
+
+exports.use_latest_default = use_latest_default;

package/dist/index.d.ts

@@ -56,10 +56,14 @@ 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 Menu } from './Menu';
+export type { MenuProps, MenuItemProps, MenuCheckboxItemProps, MenuRadioItemProps, MenuRadioGroupProps, MenuLabelProps, MenuDividerProps, MenuSubProps } from './Menu';
 export { default as Modal } from './Modal';
 export type { ModalProps, ModalTitleProps, ModalSubtitleProps, ModalContentProps, ModalActionProps } from './Modal';
 export { default as Note } from './Note';
 export type { NoteProps } from './Note';
+export { default as NumberInput } from './NumberInput';
+export type { NumberInputProps } from './NumberInput';
 export { default as Page } from './Page';
 export type { PageProps, PageHeaderProps, PageContentProps, PageFooterProps } from './Page';
 export { default as Pagination } from './Pagination';
@@ -78,6 +82,8 @@ export { default as Section } from './Section';
 export type { SectionProps } from './Section';
 export { default as Select } from './Select';
 export type { SelectProps, SelectOptionProps } from './Select';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
 export { default as Slider } from './Slider';
 export type { SliderProps } from './Slider';
 export { default as Snippet } from './Snippet';
@@ -86,6 +92,8 @@ 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 Stepper } from './Stepper';
+export type { StepperProps, StepperOrientation, StepperStepProps } from './Stepper';
 export { default as Table } from './Table';
 export type { TableProps, TableColumnProps } from './Table';
 export { default as Tabs } from './Tabs';