@hubstr/kit 0.1.0

package/ui/src/base-ui/Modal/style.ts

@@ -0,0 +1,271 @@
+import { createStaticStyles } from 'antd-style';
+
+export const styles = createStaticStyles(({ css, cssVar }) => ({
+  backdrop: css`
+    position: fixed;
+    z-index: 1200;
+    inset: 0;
+
+    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);
+
+    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      opacity: 0;
+    }
+  `,
+
+  close: css`
+    cursor: pointer;
+
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-end: 12px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 12px;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
+
+    &:hover {
+      transform: scale(1.04);
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
+    }
+  `,
+
+  closeInline: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 12px;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
+
+    &:hover {
+      transform: scale(1.04);
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
+    }
+  `,
+
+  content: css`
+    overflow: hidden auto;
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+
+  footer: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+
+  header: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+
+  headerDraggable: css`
+    cursor: default;
+    user-select: none;
+  `,
+
+  popup: css`
+    pointer-events: none;
+
+    position: fixed;
+    z-index: 1201;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+
+  popupInner: css`
+    pointer-events: auto;
+
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    width: calc(100% - 32px);
+    max-width: 520px;
+    max-height: calc(100dvh - 64px);
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 12px;
+
+    background: ${cssVar.colorBgElevated};
+    box-shadow: ${cssVar.boxShadow};
+
+    transition:
+      transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);
+
+    &[data-starting-style] {
+      transform: scale(0.97);
+      opacity: 0;
+    }
+
+    &[data-ending-style] {
+      transform: scale(0.98);
+      opacity: 0;
+      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+      transition-duration: 120ms;
+    }
+  `,
+
+  title: css`
+    margin: 0;
+
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: ${cssVar.colorText};
+    letter-spacing: -0.005em;
+  `,
+
+  loadingSpinner: css`
+    @keyframes modal-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    display: inline-block;
+
+    width: 14px;
+    height: 14px;
+    border: 2px solid currentcolor;
+    border-block-start-color: transparent;
+    border-radius: 50%;
+
+    animation: modal-spin 0.6s linear infinite;
+  `,
+
+  fullscreenPopupInner: css`
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100dvh !important;
+    max-height: 100dvh !important;
+    border: none;
+    border-radius: 12px;
+  `,
+
+  fullscreenToggle: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 12px;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: transparent;
+
+    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
+
+    &:hover {
+      transform: scale(1.04);
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
+    }
+  `,
+
+  headerActions: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-inline-end: -4px;
+  `,
+
+  denyAnimation: css`
+    @keyframes modal-deny {
+      0%,
+      100% {
+        transform: translateX(0);
+      }
+
+      20% {
+        transform: translateX(-5px);
+      }
+
+      40% {
+        transform: translateX(5px);
+      }
+
+      60% {
+        transform: translateX(-3px);
+      }
+
+      80% {
+        transform: translateX(2px);
+      }
+    }
+
+    animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);
+  `,
+
+  viewport: css`
+    position: fixed;
+    z-index: 1200;
+    inset: 0;
+    overflow: auto;
+  `,
+}));

package/ui/src/base-ui/Modal/type.ts

@@ -0,0 +1,111 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+
+import type { ButtonProps as BaseButtonProps } from '../Button';
+
+export interface BaseModalProps {
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    backdrop?: string;
+    close?: string;
+    content?: string;
+    footer?: string;
+    header?: string;
+    popup?: string;
+    title?: string;
+  };
+  maskClosable?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onOpenChangeComplete?: (open: boolean) => void;
+  open?: boolean;
+  styles?: {
+    backdrop?: CSSProperties;
+    close?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    header?: CSSProperties;
+    popup?: CSSProperties;
+    title?: CSSProperties;
+  };
+  title?: ReactNode;
+  width?: number | string;
+}
+
+export interface ModalContextValue {
+  close: () => void;
+  setCanDismissByClickOutside: (value: boolean) => void;
+}
+
+export interface ModalInstance extends ModalContextValue {
+  destroy: () => void;
+  update: (nextProps: Partial<BaseModalProps>) => void;
+}
+
+export type ImperativeModalProps = BaseModalProps & {
+  content?: ReactNode;
+  footer?: ReactNode;
+};
+
+type ModalButtonProps = BaseButtonProps;
+
+export interface ModalComponentProps {
+  afterClose?: () => void;
+  afterOpenChange?: (open: boolean) => void;
+  allowFullscreen?: boolean;
+  cancelButtonProps?: ModalButtonProps;
+  cancelText?: ReactNode;
+  centered?: boolean;
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    body?: string;
+    footer?: string;
+    header?: string;
+    mask?: string;
+    title?: string;
+    wrapper?: string;
+  };
+  closable?: boolean;
+  closeIcon?: ReactNode;
+  confirmLoading?: boolean;
+  destroyOnHidden?: boolean;
+  draggable?: boolean;
+  footer?:
+    | ReactNode
+    | false
+    | null
+    | ((originNode: ReactNode, extra: { CancelBtn: React.FC; OkBtn: React.FC }) => ReactNode);
+  getContainer?: HTMLElement | false | null;
+  height?: number | string;
+  keyboard?: boolean;
+  loading?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  okButtonProps?: ModalButtonProps;
+  okText?: ReactNode;
+  onCancel?: (e: MouseEvent<HTMLButtonElement>) => void;
+  onOk?: (e: MouseEvent<HTMLButtonElement>) => void;
+  open?: boolean;
+  style?: CSSProperties;
+  styles?: {
+    body?: CSSProperties;
+    footer?: CSSProperties;
+    header?: CSSProperties;
+    mask?: CSSProperties;
+    title?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  title?: ReactNode | false;
+  width?: number | string;
+  zIndex?: number;
+}
+
+export interface ModalConfirmConfig {
+  cancelText?: ReactNode;
+  content?: ReactNode;
+  okButtonProps?: ModalButtonProps;
+  okText?: ReactNode;
+  onCancel?: () => void;
+  onOk?: (() => void) | (() => Promise<void>);
+  title?: ReactNode;
+}

package/ui/src/base-ui/Popover/ArrowIcon.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+export const PopoverArrowIcon = (
+  <svg aria-hidden="true" height="6" viewBox="0 0 12 6" width="12">
+    <path d="M0 6L6 0L12 6Z" data-role="fill" />
+    <path d="M0 6L6 0L12 6" data-role="stroke" />
+  </svg>
+);

package/ui/src/base-ui/Popover/Popover.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { type FC, use } from 'react';
+
+import { PopoverGroupHandleContext } from './groupContext';
+import { PopoverInGroup } from './PopoverInGroup';
+import { PopoverStandalone } from './PopoverStandalone';
+import { type PopoverProps } from './type';
+
+export { parseTrigger } from '@/utils/parseTrigger';
+
+const Popover: FC<PopoverProps> = (props) => {
+  const group = use(PopoverGroupHandleContext);
+
+  // Group mode is driven by trigger interactions; keep standalone behavior for controlled cases.
+  const canUseGroup =
+    Boolean(group) &&
+    props.open === undefined &&
+    props.defaultOpen === undefined &&
+    !props.standalone;
+
+  return canUseGroup ? <PopoverInGroup {...props} /> : <PopoverStandalone {...props} />;
+};
+
+Popover.displayName = 'Popover';
+
+export default Popover;

package/ui/src/base-ui/Popover/PopoverGroup.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { type FC, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+
+import {
+  useDestroyOnInvalidActiveTriggerElement,
+  useHidePopupWhenPositionerAtOrigin,
+} from '@/utils/destroyOnInvalidActiveTriggerElement';
+import { parseTrigger } from '@/utils/parseTrigger';
+import { placementMap } from '@/utils/placement';
+
+import { PopoverArrowIcon } from './ArrowIcon';
+import {
+  PopoverArrow,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverViewport,
+} from './atoms';
+import { PopoverProvider } from './context';
+import {
+  PopoverGroupHandleContext,
+  type PopoverGroupItem,
+  PopoverGroupPropsContext,
+  type PopoverGroupSharedProps,
+} from './groupContext';
+import { usePopoverPortalContainer } from './PopoverPortal';
+
+type PopoverGroupProps = PopoverGroupSharedProps & {
+  children: ReactNode;
+};
+
+const PopoverGroup: FC<PopoverGroupProps> = ({
+  children,
+  contentLayoutAnimation = false,
+  disableDestroyOnInvalidTrigger = false,
+  disableZeroOriginGuard = false,
+  ...sharedProps
+}) => {
+  const [{ handle, key }, setHandleState] = useState(() => ({
+    handle: BasePopover.createHandle<PopoverGroupItem>(),
+    key: 0,
+  }));
+  const activeItemRef = useRef<PopoverGroupItem | null>(null);
+  const destroy = useCallback(() => {
+    activeItemRef.current = null;
+    setHandleState(({ key }) => ({
+      handle: BasePopover.createHandle<PopoverGroupItem>(),
+      key: key + 1,
+    }));
+  }, []);
+  const close = useCallback(() => {
+    handle.close();
+  }, [handle]);
+  const contextValue = useMemo(() => ({ close }), [close]);
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    activeItemRef.current?.onOpenChange?.(open);
+  }, []);
+
+  useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {
+    enabled: !disableDestroyOnInvalidTrigger,
+  });
+  useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });
+
+  const portalContainer = usePopoverPortalContainer();
+
+  return (
+    <PopoverGroupHandleContext value={handle}>
+      <PopoverGroupPropsContext value={sharedProps}>
+        {children}
+        <BasePopover.Root handle={handle} key={key} onOpenChange={handleOpenChange}>
+          {({ payload }) => {
+            const item = (payload as PopoverGroupItem | null) ?? null;
+            activeItemRef.current = item;
+
+            if (!item?.content) return null;
+
+            const arrow = item.arrow ?? false;
+            const placement = item.placement ?? 'top';
+            const { openOnHover } = parseTrigger(item.trigger ?? 'hover');
+
+            const placementConfig = placementMap[placement] ?? placementMap.top;
+            const resolvedSideOffset = arrow ? 10 : 6;
+
+            const resolvedClassNames = {
+              arrow: item.classNames?.arrow,
+              popup: item.className,
+              positioner: item.classNames?.root,
+              viewport: item.classNames?.content,
+            };
+
+            const resolvedStyles = {
+              arrow: item.styles?.arrow,
+              positioner: {
+                ...item.styles?.root,
+                ...(item.zIndex !== undefined ? { zIndex: item.zIndex } : {}),
+              },
+              viewport: item.styles?.content,
+            };
+
+            const contentNode = (
+              <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>
+            );
+
+            const popup = (
+              <PopoverPositioner
+                align={placementConfig.align}
+                className={resolvedClassNames.positioner}
+                data-layout-animation={contentLayoutAnimation || undefined}
+                hoverTrigger={openOnHover}
+                placement={placement}
+                side={placementConfig.side}
+                sideOffset={resolvedSideOffset}
+                style={resolvedStyles.positioner}
+                {...item.positionerProps}
+              >
+                <PopoverPopup
+                  className={resolvedClassNames.popup}
+                  data-layout-animation={contentLayoutAnimation || undefined}
+                  {...item.popupProps}
+                >
+                  {arrow && (
+                    <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>
+                      {PopoverArrowIcon}
+                    </PopoverArrow>
+                  )}
+                  <PopoverViewport
+                    className={resolvedClassNames.viewport}
+                    style={resolvedStyles.viewport}
+                  >
+                    {contentNode}
+                  </PopoverViewport>
+                </PopoverPopup>
+              </PopoverPositioner>
+            );
+
+            return portalContainer ? (
+              <PopoverPortal container={portalContainer}>{popup}</PopoverPortal>
+            ) : null;
+          }}
+        </BasePopover.Root>
+      </PopoverGroupPropsContext>
+    </PopoverGroupHandleContext>
+  );
+};
+
+PopoverGroup.displayName = 'PopoverGroup';
+
+export default PopoverGroup;

package/ui/src/base-ui/Popover/PopoverInGroup.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { mergeProps } from '@base-ui/react/merge-props';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { cx } from 'antd-style';
+import { cloneElement, type FC, isValidElement, useMemo } from 'react';
+import { use } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+
+import { useNativeButton } from '@/hooks/useNativeButton';
+import { parseTrigger } from '@/utils/parseTrigger';
+
+import { PopoverGroupHandleContext } from './groupContext';
+import { type PopoverProps } from './type';
+import { useMergedPopoverProps } from './useMergedPopoverProps';
+
+export const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {
+  const group = use(PopoverGroupHandleContext);
+  const item = useMergedPopoverProps(props);
+
+  const { openOnHover } = useMemo(() => parseTrigger(item.trigger ?? 'hover'), [item.trigger]);
+
+  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;
+  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;
+  const disabled = Boolean(item.disabled);
+
+  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
+    children,
+    nativeButton: item.nativeButton,
+  });
+
+  // Don't render trigger behavior if no content
+  if (!item.content) {
+    return children as any;
+  }
+
+  const triggerProps = {
+    closeDelay: resolvedCloseDelay,
+    delay: resolvedOpenDelay,
+    disabled,
+    openOnHover: openOnHover && !disabled,
+    payload: item,
+  };
+
+  const triggerClassName = item.classNames?.trigger;
+
+  if (isValidElement(children)) {
+    return (
+      <BasePopover.Trigger
+        handle={group ?? undefined}
+        {...triggerProps}
+        nativeButton={resolvedNativeButton}
+        render={(renderProps) => {
+          // Base UI's trigger props include `type="button"` by default.
+          // If we render into a non-<button> element, that prop is invalid and can warn.
+          const resolvedProps = (() => {
+            if (isNativeButtonTriggerElement) return renderProps as any;
+            // eslint-disable-next-line unused-imports/no-unused-vars
+            const { type, ref: triggerRef, ...restProps } = renderProps as any;
+            return restProps;
+          })();
+
+          const mergedProps = mergeProps((children as any).props, resolvedProps);
+          return cloneElement(children as any, {
+            ...mergedProps,
+            className: cx(mergedProps.className, triggerClassName),
+            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),
+          });
+        }}
+      />
+    );
+  }
+
+  return (
+    <BasePopover.Trigger
+      handle={group ?? undefined}
+      {...triggerProps}
+      className={triggerClassName}
+      nativeButton={resolvedNativeButton}
+      ref={refProp}
+    >
+      {children}
+    </BasePopover.Trigger>
+  );
+};
+
+PopoverInGroup.displayName = 'PopoverInGroup';

package/ui/src/base-ui/Popover/PopoverPortal.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useAppElement } from '@/ThemeProvider';
+
+export const usePopoverPortalContainer = (
+  root?: HTMLElement | ShadowRoot | null,
+): HTMLElement | null => {
+  const appElement = useAppElement();
+  if (typeof document === 'undefined') return null;
+  return (root as HTMLElement | null) ?? appElement ?? document.body;
+};