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

package/esm/Note/Note.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NormalTypes } from '../utils/prop-types';
+import { BolioUIThemes } from '../Themes/Presets';
 import type { AnyElement } from '../utils/types';
 export type NoteTypes = NormalTypes;
 interface Props {
@@ -12,6 +13,15 @@ interface Props {
 }
 type NativeAttrs = Omit<React.HTMLAttributes<AnyElement>, keyof Props>;
 export type NoteProps = Props & NativeAttrs;
+export declare const getStatusColor: (type: NoteTypes, { filled, light, subtle }: {
+    filled: boolean;
+    light: boolean;
+    subtle: boolean;
+}, theme: BolioUIThemes) => {
+    color: string;
+    borderColor: string;
+    bgColor: string;
+};
 export declare const NoteComponent: React.ForwardRefExoticComponent<Props & NativeAttrs & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/esm/Note/index.js

@@ -1,7 +1,8 @@
 'use client';
 import {
   Note_default
-} from "../chunk-AFBCMW2I.js";
+} from "../chunk-CGS2MT3G.js";
+import "../chunk-26KDVRFS.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";

package/esm/Popover/index.js

@@ -1,8 +1,8 @@
 'use client';
 import {
   Popover_default
-} from "../chunk-GGCVPMXO.js";
-import "../chunk-XF4TPE2W.js";
+} from "../chunk-Y432C24Z.js";
+import "../chunk-IL7L3BEL.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
 import "../chunk-LDTDMDE6.js";
@@ -12,6 +12,7 @@ import "../chunk-BSDZWWUS.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-DGXZP4VJ.js";
 import "../chunk-3WPRUUZ6.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Select/index.js

@@ -1,20 +1,21 @@
 'use client';
 import {
   Select_default
-} from "../chunk-DIMJQLWY.js";
+} from "../chunk-XUNC7RB7.js";
 import "../chunk-JFNYQSEZ.js";
-import "../chunk-AG2NWQYL.js";
+import "../chunk-KBZEYKCZ.js";
+import "../chunk-WCTANCLG.js";
 import "../chunk-DSX6YDJM.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
-import "../chunk-KBZEYKCZ.js";
 import "../chunk-AXYDJGTN.js";
-import "../chunk-LDTDMDE6.js";
-import "../chunk-BXDUHMWS.js";
 import "../chunk-33BUV2RX.js";
 import "../chunk-GGD4BGH2.js";
+import "../chunk-LDTDMDE6.js";
+import "../chunk-BXDUHMWS.js";
 import "../chunk-ZRORQ2WH.js";
 import "../chunk-GJZT47MP.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Table/index.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   Table_default
-} from "../chunk-ZNDN2VPZ.js";
+} from "../chunk-Y5CFWIGV.js";
 import "../chunk-E5EDUOQT.js";
-import "../chunk-JJFOGZ6V.js";
 import "../chunk-HKOESPKZ.js";
+import "../chunk-JJFOGZ6V.js";
 import "../chunk-AXYDJGTN.js";
 import "../chunk-33BUV2RX.js";
 import "../chunk-GGD4BGH2.js";

package/esm/Toolbar/Toolbar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type ToolbarProps = Props & NativeAttrs;
+declare const Toolbar: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Toolbar;

package/esm/Toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type ToolbarSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export default ToolbarSeparator;

package/esm/Toolbar/index.d.ts

@@ -0,0 +1,9 @@
+import Toolbar from './Toolbar';
+import ToolbarSeparator from './ToolbarSeparator';
+export type ToolbarComponentType = typeof Toolbar & {
+    Separator: typeof ToolbarSeparator;
+};
+export type { ToolbarProps } from './Toolbar';
+export type { ToolbarSeparatorProps } from './ToolbarSeparator';
+declare const _default: ToolbarComponentType;
+export default _default;

package/esm/Toolbar/index.js

@@ -0,0 +1,14 @@
+'use client';
+import {
+  Toolbar_default
+} from "../chunk-Q3I54DUS.js";
+import "../chunk-MAICNLTY.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-V5I4ORQQ.js";
+import "../chunk-FEA5BJ35.js";
+import "../chunk-X5PGXMVQ.js";
+import "../chunk-SZIX7BM5.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Toolbar_default as default
+};

package/esm/Tooltip/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Tooltip_default
-} from "../chunk-XF4TPE2W.js";
+} from "../chunk-IL7L3BEL.js";
 import "../chunk-V57PNXMD.js";
 import "../chunk-JJFOGZ6V.js";
 import "../chunk-LDTDMDE6.js";
@@ -10,6 +10,7 @@ import "../chunk-ZRORQ2WH.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-DGXZP4VJ.js";
 import "../chunk-3WPRUUZ6.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/Tour/index.js

@@ -1,16 +1,17 @@
 'use client';
 import {
   Tour_default
-} from "../chunk-STYC6O24.js";
+} from "../chunk-SJVWKNGY.js";
 import "../chunk-AXYDJGTN.js";
 import "../chunk-BXDUHMWS.js";
 import "../chunk-ZRORQ2WH.js";
-import "../chunk-DXHNQANX.js";
+import "../chunk-TPZUTHTQ.js";
 import "../chunk-BSDZWWUS.js";
+import "../chunk-NDERASK2.js";
 import "../chunk-GJZT47MP.js";
 import "../chunk-RZBEZ26A.js";
+import "../chunk-EUYSKHRS.js";
 import "../chunk-LMDBE6T6.js";
-import "../chunk-NDERASK2.js";
 import "../chunk-MAICNLTY.js";
 import "../chunk-UX2B3G6U.js";
 import "../chunk-V5I4ORQQ.js";

package/esm/{chunk-PGQYW6YF.js → chunk-25NFUHLR.js}

@@ -4,7 +4,7 @@ import {
   ModalTitle_default,
   backdrop_default,
   use_body_scroll_default
-} from "./chunk-TKIUVNKP.js";
+} from "./chunk-XKJDF225.js";
 import {
   use_keyboard_default
 } from "./chunk-F3AL4TQZ.js";
@@ -14,6 +14,9 @@ import {
 import {
   use_portal_default
 } from "./chunk-BXDUHMWS.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -75,6 +78,7 @@ var placementClasses = {
 };
 var DrawerWrapper = React.forwardRef(({ className = "", children, visible = false, placement, ...props }, ref) => {
   const theme = use_theme_default();
+  const surface = getSurface(theme, theme.expressiveness.shadowLarge);
   const { SCALES } = use_scale_default();
   const modalContent = useRef(null);
   useImperativeHandle(ref, () => modalContent.current);
@@ -87,10 +91,10 @@ var DrawerWrapper = React.forwardRef(({ className = "", children, visible = fals
     className
   );
   const wrapperStyle = {
-    backgroundColor: theme.palette.background,
+    backgroundColor: surface.bg,
     color: theme.palette.foreground,
     borderRadius: `calc(3 * ${theme.layout.radius})`,
-    boxShadow: theme.expressiveness.shadowLarge,
+    boxShadow: surface.shadow,
     fontSize: SCALES.font(1),
     "--drawer-wrapper-padding-left": SCALES.pl(1.3125),
     "--drawer-wrapper-padding-right": SCALES.pr(1.3125),

package/esm/{chunk-AFBCMW2I.js → chunk-26KDVRFS.js}

@@ -92,9 +92,7 @@ NoteComponent.displayName = "BolioUINote";
 var Note = with_scale_default(NoteComponent);
 var Note_default = Note;
 
-// core/Note/index.ts
-var Note_default2 = Note_default;
-
 export {
-  Note_default2 as Note_default
+  getStatusColor,
+  Note_default
 };

package/esm/{chunk-4ZGR7UMX.js → chunk-4DH6SOK4.js}

@@ -6,21 +6,24 @@ import {
   defaultToastLayout,
   useBolioUIContext
 } from "./chunk-A3BIV2QM.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
 import {
   css_transition_default
 } from "./chunk-LDTDMDE6.js";
 import {
   use_portal_default
 } from "./chunk-BXDUHMWS.js";
-import {
-  use_current_state_default
-} from "./chunk-33BUV2RX.js";
 import {
   use_latest_default
 } 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";
@@ -156,12 +159,13 @@ var ToastItem = React2.memo(({ toast, layout }) => {
     () => getTranslateByPlacement(placement),
     [placement]
   );
+  const surface = getSurface(theme, theme.expressiveness.shadowSmall);
   const toastStyle = {
     "--toast-item-max-height": maxHeight,
     "--toast-item-color": color,
-    "--toast-item-bg": bgColor,
+    "--toast-item-bg": bgColor === theme.palette.background ? surface.bg : bgColor,
     "--toast-item-radius": theme.layout.radius,
-    "--toast-item-shadow": theme.expressiveness.shadowSmall,
+    "--toast-item-shadow": surface.shadow,
     "--toast-item-margin": margin,
     "--toast-item-padding": padding,
     "--toast-item-enter-transform": enter,

package/esm/chunk-CGS2MT3G.js

@@ -0,0 +1,10 @@
+import {
+  Note_default
+} from "./chunk-26KDVRFS.js";
+
+// core/Note/index.ts
+var Note_default2 = Note_default;
+
+export {
+  Note_default2 as Note_default
+};

package/esm/{chunk-6ZBFUZSL.js → chunk-CU6SNPIM.js}

@@ -6,7 +6,7 @@ import {
   backdrop_default,
   useModalContext,
   use_body_scroll_default
-} from "./chunk-TKIUVNKP.js";
+} from "./chunk-XKJDF225.js";
 import {
   use_keyboard_default
 } from "./chunk-F3AL4TQZ.js";
@@ -18,7 +18,10 @@ import {
 } from "./chunk-BXDUHMWS.js";
 import {
   Button_default
-} from "./chunk-DXHNQANX.js";
+} from "./chunk-TPZUTHTQ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -81,11 +84,12 @@ var ModalWrapper = React.forwardRef(({ className = "", children, visible = false
       }
     }
   };
+  const surface = getSurface(theme, theme.expressiveness.shadowLarge);
   const wrapperStyle = {
-    backgroundColor: theme.palette.background,
+    backgroundColor: surface.bg,
     color: theme.palette.foreground,
     borderRadius: theme.layout.radius,
-    boxShadow: theme.expressiveness.shadowLarge,
+    boxShadow: surface.shadow,
     fontSize: SCALES.font(1),
     height: SCALES.height(1, "auto"),
     "--modal-wrapper-padding-left": SCALES.pl(1.3125),
@@ -163,15 +167,14 @@ var ModalActionComponent = React2.forwardRef(function({
   const color = useMemo(() => {
     return passive ? theme.palette.accents_5 : theme.palette.foreground;
   }, [theme.palette, passive]);
-  const bgColor = useMemo(() => {
-    return disabled ? theme.palette.accents_1 : theme.palette.background;
-  }, [theme.palette, disabled]);
+  const actionBg = theme.type === "dark" ? theme.palette.accents_2 : theme.palette.background;
+  const hoverBg = theme.type === "dark" ? theme.palette.accents_3 : theme.palette.accents_1;
   const classes = use_classes_default(ModalAction_module_css_default.action, className);
   const actionStyle = {
     fontSize: SCALES.font(0.75),
     border: "none",
     color,
-    backgroundColor: theme.palette.background,
+    backgroundColor: actionBg,
     display: "flex",
     WebkitBoxAlign: "center",
     alignItems: "center",
@@ -182,11 +185,10 @@ var ModalActionComponent = React2.forwardRef(function({
     borderRadius: 0,
     minWidth: 0,
     "--modal-action-hover-color": disabled ? color : theme.palette.foreground,
-    "--modal-action-hover-bg": disabled ? bgColor : theme.palette.accents_1
+    "--modal-action-hover-bg": disabled ? actionBg : hoverBg
   };
   const overrideProps = {
     ...props,
-    effect: false,
     ref: btnRef
   };
   return /* @__PURE__ */ jsx2(
@@ -222,6 +224,7 @@ var ModalActionsComponent = ({
 }) => {
   const theme = use_theme_default();
   const ref = useRef3(null);
+  const border = theme.type === "dark" ? theme.palette.accents_4 : theme.palette.border;
   const [height, setHeight] = useState("auto");
   useEffect2(() => {
     if (!ref.current) return;
@@ -236,10 +239,10 @@ var ModalActionsComponent = ({
         ...props,
         className: ModalActions_module_css_default.footer,
         style: {
-          borderTop: `1px solid ${theme.palette.border}`,
+          borderTop: `1px solid ${border}`,
           borderBottomLeftRadius: theme.layout.radius,
           borderBottomRightRadius: theme.layout.radius,
-          "--modal-actions-border": theme.palette.border
+          "--modal-actions-border": border
         },
         children
       }

package/esm/chunk-CY5KTINE.js

@@ -0,0 +1,107 @@
+import {
+  getStatusColor
+} from "./chunk-26KDVRFS.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Alert/Alert.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Alert/Alert.module.css.bolio-css-module-source
+var Alert_module_css_default = { "alert": "Alert-module_alert__Ghxl7", "icon": "Alert-module_icon__hcZdu", "body": "Alert-module_body__SuUYD", "title": "Alert-module_title__8yipK", "close": "Alert-module_close__ZPg5d" };
+
+// core/Alert/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AlertComponent = React.forwardRef(
+  ({
+    children,
+    type = "default",
+    title,
+    icon,
+    filled = false,
+    light = false,
+    subtle = false,
+    onClose,
+    closeLabel = "Close",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const { color, borderColor, bgColor } = useMemo(
+      () => getStatusColor(type, { filled, light, subtle }, theme),
+      [type, filled, light, subtle, theme]
+    );
+    const alertStyle = {
+      border: `1px solid ${borderColor}`,
+      color,
+      backgroundColor: bgColor,
+      borderRadius: theme.layout.radius,
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0.75)} ${SCALES.pr(1)} ${SCALES.pb(0.75)} ${SCALES.pl(1)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: type === "error" || type === "warning" ? "alert" : "status",
+        className: use_classes_default(Alert_module_css_default.alert, className),
+        ...props,
+        style: alertStyle,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: Alert_module_css_default.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: Alert_module_css_default.body, children: [
+            title && /* @__PURE__ */ jsx("div", { className: Alert_module_css_default.title, children: title }),
+            children
+          ] }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: Alert_module_css_default.close,
+              "aria-label": closeLabel,
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertComponent.displayName = "BolioUIAlert";
+var Alert = with_scale_default(AlertComponent);
+var Alert_default = Alert;
+
+// core/Alert/index.ts
+var Alert_default2 = Alert_default;
+
+export {
+  Alert_default2 as Alert_default
+};

package/esm/{chunk-IJGIEX5J.js → chunk-DEMQXB46.js}

@@ -11,6 +11,9 @@ import {
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -57,6 +60,7 @@ var ColorInputComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const generatedId = useId();
     const inputId = props.id || generatedId;
@@ -122,9 +126,9 @@ var ColorInputComponent = React.forwardRef(
       "--colorinput-focus-border": colors.focusBorder,
       "--colorinput-placeholder": colors.placeholderColor,
       "--colorinput-color": colors.color,
-      "--colorinput-popup-bg": theme.palette.background,
+      "--colorinput-popup-bg": surface.bg,
       "--colorinput-popup-border": theme.palette.border,
-      "--colorinput-shadow": theme.expressiveness.shadowMedium
+      "--colorinput-shadow": surface.shadow
     };
     return /* @__PURE__ */ jsxs(
       "div",

package/esm/{chunk-3S6G7WGK.js → chunk-DYYSUJ35.js}

@@ -1,6 +1,6 @@
 import {
   Menu_default
-} from "./chunk-FL6J36B7.js";
+} from "./chunk-FLUNRVVG.js";
 import {
   with_scale_default
 } from "./chunk-MAICNLTY.js";

package/esm/chunk-EUYSKHRS.js

@@ -0,0 +1,13 @@
+// core/utils/surface.ts
+var getSurface = (theme, shadow = theme.expressiveness.shadowMedium) => {
+  const dark = theme.type === "dark";
+  return {
+    bg: dark ? theme.palette.accents_3 : theme.palette.background,
+    hover: dark ? theme.palette.accents_4 : theme.palette.accents_2,
+    shadow: dark ? `0 2px 6px rgb(0 0 0 / 40%), ${shadow}` : shadow
+  };
+};
+
+export {
+  getSurface
+};

package/esm/{chunk-FL6J36B7.js → chunk-FLUNRVVG.js}

@@ -1,9 +1,12 @@
 import {
   dropdown_default
-} from "./chunk-AG2NWQYL.js";
+} from "./chunk-WCTANCLG.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -130,13 +133,14 @@ var MenuList = ({
     const isCharacter = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
     if (isCharacter) typeahead(event.key, items, index);
   };
+  const surface = getSurface(theme);
   const listStyle = {
     "--menu-list-font-size": SCALES.font(0.875),
     "--menu-list-color": theme.palette.foreground,
-    "--menu-list-bg": theme.palette.background,
+    "--menu-list-bg": surface.bg,
     "--menu-list-border-color": theme.palette.border,
     "--menu-list-radius": theme.layout.radius,
-    "--menu-list-shadow": theme.expressiveness.shadowMedium
+    "--menu-list-shadow": surface.shadow
   };
   return /* @__PURE__ */ jsx(MenuListContext.Provider, { value: { openSub, setOpenSub }, children: /* @__PURE__ */ jsx(
     "div",
@@ -321,7 +325,7 @@ var MenuItemBase = React4.forwardRef(
     };
     const itemStyle = {
       "--menu-item-color": theme.palette.foreground,
-      "--menu-item-focus-bg": theme.palette.accents_2,
+      "--menu-item-focus-bg": getSurface(theme).hover,
       "--menu-item-error-color": theme.palette.error,
       "--menu-item-error-focus-bg": theme.palette.errorLight,
       "--menu-item-error-focus-color": theme.palette.errorDark,