@fibery/ui-kit 2.0.1 → 2.1.1

package/src/palettes/warm-user.ts

@@ -1,54 +1,9 @@
-import {ThemePalette} from "../palette-generator";
+import {warmCore} from "./warm";
+import type {ThemePalette} from "../design-system/types";
 
 export const warmUserPalette: ThemePalette = {
+  ...warmCore,
   key: "warm-user",
-  white: "rgb(255,253,250)",
-  whiteA: [
-    null,
-    "rgba(255,255,254,0)",
-    "rgba(255,255,254,0.01)",
-    "rgba(255,255,254,0.03)",
-    "rgba(255,255,254,0.06)",
-    "rgba(255,255,254,0.09)",
-    "rgba(255,255,254,0.12)",
-    "rgba(255,255,254,0.18)",
-    "rgba(255,255,254,0.25)",
-    "rgba(255,255,254,0.39)",
-    "rgba(255,255,254,0.45)",
-    "rgba(255,255,254,0.59)",
-    "rgba(255,255,254,0.92)",
-  ],
-  black: "rgb(31,26,24)",
-  blackA: [
-    null,
-    "rgba(0,0,0,0.01)",
-    "rgba(0,0,0,0.03)",
-    "rgba(0,0,0,0.05)",
-    "rgba(0,0,0,0.07)",
-    "rgba(0,0,0,0.09)",
-    "rgba(0,0,0,0.11)",
-    "rgba(0,0,0,0.14)",
-    "rgba(0,0,0,0.22)",
-    "rgba(0,0,0,0.44)",
-    "rgba(0,0,0,0.48)",
-    "rgba(0,0,0,0.57)",
-    "rgba(0,0,0,0.91)",
-  ],
-  base: [
-    null,
-    "rgb(255,251,244)",
-    "rgb(253,246,239)",
-    "rgb(250,244,236)",
-    "rgb(243,236,229)",
-    "rgb(237,231,224)",
-    "rgb(232,226,219)",
-    "rgb(225,218,211)",
-    "rgb(204,198,191)",
-    "rgb(163,157,150)",
-    "rgb(125,119,112)",
-    "rgb(99,94,87)",
-    "rgb(27,22,17)",
-  ],
   accent: [
     null,
     "rgb(250,252,253)",
@@ -64,101 +19,6 @@ export const warmUserPalette: ThemePalette = {
     "rgb(0,111,139)",
     "rgb(0,42,54)",
   ],
-  red: [
-    null,
-    "rgb(254,251,251)",
-    "rgb(255,250,250)",
-    "rgb(255,241,240)",
-    "rgb(255,232,231)",
-    "rgb(253,220,219)",
-    "rgb(250,203,202)",
-    "rgb(244,179,178)",
-    "rgb(237,150,150)",
-    "rgb(211,62,75)",
-    "rgb(200,35,59)",
-    "rgb(175,36,54)",
-    "rgb(69,11,17)",
-  ],
-  teal: [
-    null,
-    "rgb(251,252,252)",
-    "rgb(250,252,252)",
-    "rgb(239,247,245)",
-    "rgb(229,242,239)",
-    "rgb(214,234,230)",
-    "rgb(196,224,217)",
-    "rgb(169,208,200)",
-    "rgb(135,191,179)",
-    "rgb(0,144,126)",
-    "rgb(0,132,114)",
-    "rgb(0,116,101)",
-    "rgb(0,44,37)",
-  ],
-  yellow: [
-    null,
-    "rgb(253,252,247)",
-    "rgb(255,252,228)",
-    "rgb(255,250,207)",
-    "rgb(255,247,185)",
-    "rgb(255,242,160)",
-    "rgb(248,231,135)",
-    "rgb(233,213,104)",
-    "rgb(222,194,0)",
-    "rgb(247,217,0)",
-    "rgb(237,208,0)",
-    "rgb(130,113,0)",
-    "rgb(47,42,14)",
-  ],
-  // warm-light-user ⬆
-  // FIXME drop or apply conditionally
-  // ⬇ warm-dark-user
-  // "white": "rgb(255,252,247)",
-  // "whiteA": [
-  //   null,
-  //   "rgba(255,255,254,0)",
-  //   "rgba(255,255,254,0.01)",
-  //   "rgba(255,255,254,0.03)",
-  //   "rgba(255,255,254,0.06)",
-  //   "rgba(255,255,254,0.09)",
-  //   "rgba(255,255,254,0.12)",
-  //   "rgba(255,255,254,0.18)",
-  //   "rgba(255,255,254,0.25)",
-  //   "rgba(255,255,254,0.39)",
-  //   "rgba(255,255,254,0.45)",
-  //   "rgba(255,255,254,0.59)",
-  //   "rgba(255,255,254,0.92)"
-  // ],
-  // "black": "rgb(5,4,4)",
-  // "blackA": [
-  //   null,
-  //   "rgba(0,0,0,0.01)",
-  //   "rgba(0,0,0,0.03)",
-  //   "rgba(0,0,0,0.05)",
-  //   "rgba(0,0,0,0.07)",
-  //   "rgba(0,0,0,0.09)",
-  //   "rgba(0,0,0,0.11)",
-  //   "rgba(0,0,0,0.14)",
-  //   "rgba(0,0,0,0.22)",
-  //   "rgba(0,0,0,0.44)",
-  //   "rgba(0,0,0,0.48)",
-  //   "rgba(0,0,0,0.57)",
-  //   "rgba(0,0,0,0.91)"
-  // ],
-  baseDark: [
-    null,
-    "rgb(26,22,20)",
-    "rgb(32,27,25)",
-    "rgb(39,35,33)",
-    "rgb(45,40,38)",
-    "rgb(50,45,43)",
-    "rgb(55,50,48)",
-    "rgb(65,60,58)",
-    "rgb(86,80,78)",
-    "rgb(117,111,109)",
-    "rgb(132,126,124)",
-    "rgb(166,159,157)",
-    "rgb(224,212,206)",
-  ],
   accentDark: [
     null,
     "rgb(16,25,28)",
@@ -174,49 +34,4 @@ export const warmUserPalette: ThemePalette = {
     "rgb(124,189,210)",
     "rgb(232,244,248)",
   ],
-  redDark: [
-    null,
-    "rgb(33,19,19)",
-    "rgb(47,19,20)",
-    "rgb(67,22,25)",
-    "rgb(80,21,27)",
-    "rgb(91,26,32)",
-    "rgb(104,33,39)",
-    "rgb(136,27,42)",
-    "rgb(175,9,47)",
-    "rgb(213,50,71)",
-    "rgb(225,78,91)",
-    "rgb(244,146,147)",
-    "rgb(255,236,235)",
-  ],
-  tealDark: [
-    null,
-    "rgb(16,25,23)",
-    "rgb(14,33,29)",
-    "rgb(11,46,40)",
-    "rgb(5,53,46)",
-    "rgb(8,61,53)",
-    "rgb(14,71,63)",
-    "rgb(0,89,77)",
-    "rgb(0,112,97)",
-    "rgb(0,143,125)",
-    "rgb(37,157,140)",
-    "rgb(128,192,180)",
-    "rgb(233,244,242)",
-  ],
-  yellowDark: [
-    null,
-    "rgb(24,20,0)",
-    "rgb(34,28,0)",
-    "rgb(43,36,0)",
-    "rgb(47,40,0)",
-    "rgb(58,50,0)",
-    "rgb(69,59,0)",
-    "rgb(85,73,0)",
-    "rgb(110,95,0)",
-    "rgb(248,216,0)",
-    "rgb(255,236,78)",
-    "rgb(227,198,0)",
-    "rgb(255,249,207)",
-  ],
 };

package/src/palettes/warm.ts

@@ -0,0 +1,158 @@
+import {common} from "./common";
+import type {ThemePaletteCore} from "../design-system/types";
+
+export const warmCore: ThemePaletteCore = {
+  ...common,
+  white: "rgb(255,253,250)",
+  whiteA: [
+    null,
+    "rgba(255,255,254,0)",
+    "rgba(255,255,254,0.01)",
+    "rgba(255,255,254,0.03)",
+    "rgba(255,255,254,0.06)",
+    "rgba(255,255,254,0.09)",
+    "rgba(255,255,254,0.12)",
+    "rgba(255,255,254,0.18)",
+    "rgba(255,255,254,0.25)",
+    "rgba(255,255,254,0.39)",
+    "rgba(255,255,254,0.45)",
+    "rgba(255,255,254,0.59)",
+    "rgba(255,255,254,0.92)",
+  ],
+  black: "rgb(31,26,24)",
+  blackA: [
+    null,
+    "rgba(0,0,0,0.01)",
+    "rgba(0,0,0,0.03)",
+    "rgba(0,0,0,0.05)",
+    "rgba(0,0,0,0.07)",
+    "rgba(0,0,0,0.09)",
+    "rgba(0,0,0,0.11)",
+    "rgba(0,0,0,0.14)",
+    "rgba(0,0,0,0.22)",
+    "rgba(0,0,0,0.44)",
+    "rgba(0,0,0,0.48)",
+    "rgba(0,0,0,0.57)",
+    "rgba(0,0,0,0.91)",
+  ],
+  base: [
+    null,
+    "rgb(255,251,244)",
+    "rgb(253,246,239)",
+    "rgb(250,244,236)",
+    "rgb(243,236,229)",
+    "rgb(237,231,224)",
+    "rgb(232,226,219)",
+    "rgb(225,218,211)",
+    "rgb(204,198,191)",
+    "rgb(163,157,150)",
+    "rgb(125,119,112)",
+    "rgb(99,94,87)",
+    "rgb(27,22,17)",
+  ],
+  red: [
+    null,
+    "rgb(254,251,251)",
+    "rgb(255,250,250)",
+    "rgb(255,241,240)",
+    "rgb(255,232,231)",
+    "rgb(253,220,219)",
+    "rgb(250,203,202)",
+    "rgb(244,179,178)",
+    "rgb(237,150,150)",
+    "rgb(211,62,75)",
+    "rgb(200,35,59)",
+    "rgb(175,36,54)",
+    "rgb(69,11,17)",
+  ],
+  teal: [
+    null,
+    "rgb(251,252,252)",
+    "rgb(250,252,252)",
+    "rgb(239,247,245)",
+    "rgb(229,242,239)",
+    "rgb(214,234,230)",
+    "rgb(196,224,217)",
+    "rgb(169,208,200)",
+    "rgb(135,191,179)",
+    "rgb(0,144,126)",
+    "rgb(0,132,114)",
+    "rgb(0,116,101)",
+    "rgb(0,44,37)",
+  ],
+  yellow: [
+    null,
+    "rgb(253,252,247)",
+    "rgb(255,252,228)",
+    "rgb(255,250,207)",
+    "rgb(255,247,185)",
+    "rgb(255,242,160)",
+    "rgb(248,231,135)",
+    "rgb(233,213,104)",
+    "rgb(222,194,0)",
+    "rgb(247,217,0)",
+    "rgb(237,208,0)",
+    "rgb(130,113,0)",
+    "rgb(47,42,14)",
+  ],
+  baseDark: [
+    null,
+    "rgb(26,22,20)",
+    "rgb(32,27,25)",
+    "rgb(39,35,33)",
+    "rgb(45,40,38)",
+    "rgb(50,45,43)",
+    "rgb(55,50,48)",
+    "rgb(65,60,58)",
+    "rgb(86,80,78)",
+    "rgb(117,111,109)",
+    "rgb(132,126,124)",
+    "rgb(166,159,157)",
+    "rgb(224,212,206)",
+  ],
+  redDark: [
+    null,
+    "rgb(33,19,19)",
+    "rgb(47,19,20)",
+    "rgb(67,22,25)",
+    "rgb(80,21,27)",
+    "rgb(91,26,32)",
+    "rgb(104,33,39)",
+    "rgb(136,27,42)",
+    "rgb(175,9,47)",
+    "rgb(213,50,71)",
+    "rgb(225,78,91)",
+    "rgb(244,146,147)",
+    "rgb(255,236,235)",
+  ],
+  tealDark: [
+    null,
+    "rgb(16,25,23)",
+    "rgb(14,33,29)",
+    "rgb(11,46,40)",
+    "rgb(5,53,46)",
+    "rgb(8,61,53)",
+    "rgb(14,71,63)",
+    "rgb(0,89,77)",
+    "rgb(0,112,97)",
+    "rgb(0,143,125)",
+    "rgb(37,157,140)",
+    "rgb(128,192,180)",
+    "rgb(233,244,242)",
+  ],
+  yellowDark: [
+    null,
+    "rgb(24,20,0)",
+    "rgb(34,28,0)",
+    "rgb(43,36,0)",
+    "rgb(47,40,0)",
+    "rgb(58,50,0)",
+    "rgb(69,59,0)",
+    "rgb(85,73,0)",
+    "rgb(110,95,0)",
+    "rgb(248,216,0)",
+    "rgb(255,236,78)",
+    "rgb(227,198,0)",
+    "rgb(255,249,207)",
+  ],
+};

package/src/popover/index.tsx

@@ -1,3 +1,4 @@
+// oxlint-disable max-lines
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {usePointerDownOutside} from "@fibery/react/src/use-pointer-down-outside";
@@ -14,6 +15,7 @@ import {
   isValidElement,
   MouseEvent,
   ReactNode,
+  useCallback,
   useEffect,
   useId,
   useImperativeHandle,
@@ -38,13 +40,14 @@ import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {getElementRef} from "./get-element-ref";
 import {MobilePopover} from "./mobile-popover";
 import {FocusScope, FocusScopeProps} from "@radix-ui/react-focus-scope";
+import {useOpenPopoverTracker} from "../open-popover-tracker";
 
 type PopoverContextValue = {
   contentId: string;
   open: boolean;
   disabled?: boolean;
-  onOpen?: () => unknown;
-  onClose?: (event: Event) => unknown;
+  onOpen: () => unknown;
+  onClose: (event: Event) => unknown;
   triggerElement: Reference;
   setTriggerElement: (value: Reference) => void;
   popupElement: HTMLDivElement | null;
@@ -57,18 +60,39 @@ type PopoverRootProps = {
   children: ReactNode;
   open: boolean;
   disabled?: boolean;
-  onOpen?: () => unknown;
-  onClose?: (event: Event) => unknown;
   // For legacy popup component support
   triggerElement?: Reference;
   setTriggerElement?: (value: Reference) => void;
   popupElement?: HTMLDivElement | null;
   setPopupElement?: (value: HTMLDivElement | null) => void;
+  onOpenChange?: (value: boolean) => void;
+  /** @deprecated Use onOpenChange prop instead **/
+  onOpen?: () => unknown;
+  /** @deprecated Use onOpenChange prop instead **/
+  onClose?: (event: Event) => unknown;
 };
 
 const Root = (props: PopoverRootProps) => {
-  const {children, open, disabled = false, onOpen, onClose, ...rest} = props;
+  const {children, open, disabled = false, onOpenChange, onOpen, onClose, ...rest} = props;
   const contentId = useId();
+  const {onOpenChange: onOpenPopoverChange} = useOpenPopoverTracker();
+
+  const onOpenComposed = useCallback(() => {
+    onOpenChange?.(true);
+    onOpen?.();
+  }, [onOpenChange, onOpen]);
+  const onCloseComposed = useCallback(
+    (event: Event) => {
+      onOpenChange?.(false);
+      onClose?.(event);
+    },
+    [onOpenChange, onClose]
+  );
+
+  useEffect(() => {
+    onOpenPopoverChange(open);
+    return () => onOpenPopoverChange(false);
+  }, [open, onOpenPopoverChange]);
 
   const [triggerElement, setTriggerElement] = useControllableState<Reference>({
     value: rest.triggerElement,
@@ -91,8 +115,8 @@ const Root = (props: PopoverRootProps) => {
       popupElement,
       setPopupElement: composedSetPopupElement,
       open,
-      onClose,
-      onOpen,
+      onOpen: onOpenComposed,
+      onClose: onCloseComposed,
     };
   }, [
     contentId,
@@ -102,8 +126,8 @@ const Root = (props: PopoverRootProps) => {
     popupElement,
     composedSetPopupElement,
     open,
-    onClose,
-    onOpen,
+    onOpenComposed,
+    onCloseComposed,
   ]);
 
   return <PopoverProvider value={contextValue}>{children}</PopoverProvider>;
@@ -154,7 +178,7 @@ const Trigger = forwardRef<HTMLDivElement, PopoverTriggerProps>((props, ref) =>
       return;
     }
     if (e.button === 0) {
-      open ? onClose?.(e as unknown as Event) : onOpen?.();
+      open ? onClose(e as unknown as Event) : onOpen();
     }
   };
 

package/src/popover/mobile-popover.tsx

@@ -16,7 +16,9 @@ import {ThemeProvider} from "../theme-provider";
 import {useMobilePopover} from "./mobile-popover-context";
 
 const mobileAnimationClassName = css`
-  transition: transform ${transition}, opacity ${transition};
+  transition:
+    transform ${transition},
+    opacity ${transition};
   transform: translateY(0);
   opacity: 1;
 
@@ -104,7 +106,7 @@ export function MobilePopover({
       <div
         className={cx(
           css`
-            border-top: ${themeVars.separators.opacity5};
+            border-top: ${themeVars.borderSeparatorDimmed};
             min-width: 0;
           `,
           mobilePopupContentClassName

package/src/popover/popup-modifiers-context.ts

@@ -1,12 +1,12 @@
 import {createContext} from "@fibery/react/src/create-context";
-import {getPopupContainerElement} from "../utils-dom";
+import {getPopupContainerElement} from "../dom-utils";
 import {$TSFixMe} from "../tsfixme";
 import {Modifier} from "react-popper";
-import {PopoverOldProps} from "./popover-old";
+import {PopoverContentProps} from "./index";
 
 export const [PopupModifiersProvider, usePopupModifiers] = createContext<{
   getPopupContainer: () => HTMLElement;
   additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
-  preventOverflowOptions?: PopoverOldProps["preventOverflowOptions"];
-  flipOptions?: PopoverOldProps["flipOptions"];
+  preventOverflowOptions?: PopoverContentProps["preventOverflowOptions"];
+  flipOptions?: PopoverContentProps["flipOptions"];
 }>("PopupModifiersProvider", {getPopupContainer: getPopupContainerElement});