@hive-ui/side-modal 0.3.1

package/dist/index.d.mts

@@ -0,0 +1,150 @@
+import { BoxProps } from "@hive-ui/box";
+import { NonModalDialogPrimitivePopoverInitialState, NonModalDialogPrimitiveStateReturn, NonModalDialogPrimitiveStateReturn as SideModalStateReturn } from "@hive-ui/non-modal-dialog-primitive";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { ButtonProps } from "@hive-ui/button";
+import { HeadingProps } from "@hive-ui/heading";
+//#region src/SideModal.d.ts
+type SideModalProps = Pick<BoxProps<"div">, "element" | "children"> & {
+  /**
+  * Title of the dialog for screen readers.
+  *
+  * @type {string}
+  * @memberof SideModalProps
+  */
+  "aria-label": string;
+  /**
+  * Set to false to disable closing the SideModal when the "Escape" key is pressed.
+  *
+  * @default true
+  * @type {boolean}
+  * @memberof SideModalProps
+  */
+  hideOnEsc?: boolean;
+};
+declare const SideModal: _$react.ForwardRefExoticComponent<Pick<BoxProps<"div">, "children" | "element"> & {
+  /**
+  * Title of the dialog for screen readers.
+  *
+  * @type {string}
+  * @memberof SideModalProps
+  */
+  "aria-label": string;
+  /**
+  * Set to false to disable closing the SideModal when the "Escape" key is pressed.
+  *
+  * @default true
+  * @type {boolean}
+  * @memberof SideModalProps
+  */
+  hideOnEsc?: boolean;
+} & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/SideModalButton.d.ts
+type SideModalButtonProps = Omit<ButtonProps, "as"> & {
+  /**
+  * The id of the SideModal that the button controls
+  *
+  * @type {string}
+  */
+  id?: string;
+};
+declare const SideModalButton: _$react.ForwardRefExoticComponent<Omit<ButtonProps, "as"> & {
+  /**
+  * The id of the SideModal that the button controls
+  *
+  * @type {string}
+  */
+  id?: string;
+} & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/SideModalHeader.d.ts
+type SideModalHeaderProps = Pick<BoxProps<"div">, "element" | "children"> & {
+  /**
+   * The dismiss button text label
+   *
+   * @default "close"
+   * @type {string}
+   * @memberof SideModalHeaderProps
+   */
+  i18nDismissLabel?: string;
+};
+declare const SideModalHeader: _$react.ForwardRefExoticComponent<Pick<BoxProps<"div">, "children" | "element"> & {
+  /**
+   * The dismiss button text label
+   *
+   * @default "close"
+   * @type {string}
+   * @memberof SideModalHeaderProps
+   */
+  i18nDismissLabel?: string;
+} & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/SideModalHeading.d.ts
+type SideModalHeadingProps = Omit<HeadingProps, "marginBottom" | "variant" | "as"> & {
+  /**
+   * The element the `SideModalHeading` will render
+   *
+   * @default "h2"
+   * @type {("h1" | "h2" | "h3" | "h4" | "h5" | "h6")}
+   * @memberof SideModalHeadingProps
+   */
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+declare const SideModalHeading: _$react.ForwardRefExoticComponent<Omit<HeadingProps, "as" | "marginBottom" | "variant"> & {
+  /**
+   * The element the `SideModalHeading` will render
+   *
+   * @default "h2"
+   * @type {("h1" | "h2" | "h3" | "h4" | "h5" | "h6")}
+   * @memberof SideModalHeadingProps
+   */
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/SideModalContainer.d.ts
+type SideModalContainerProps = NonModalDialogPrimitivePopoverInitialState & {
+  children: NonNullable<ReactNode>;
+  /**
+   * Returned state from `useSideModalState` hook
+   *
+   * @type {SideModalStateReturn}
+   * @memberof SideModalContainerProps
+   */
+  state?: SideModalStateReturn;
+};
+declare const SideModalContainer: _$react.NamedExoticComponent<SideModalContainerProps>;
+//#endregion
+//#region src/SideModalBody.d.ts
+type SideModalBodyProps = Pick<BoxProps<"div">, "element" | "children">;
+declare const SideModalBody: _$react.ForwardRefExoticComponent<SideModalBodyProps & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/SideModalFooter.d.ts
+type SideModalFooterProps = Pick<BoxProps<"div">, "element" | "children">;
+declare const SideModalFooter: _$react.ForwardRefExoticComponent<SideModalFooterProps & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/SideModalFooterActions.d.ts
+type JustifyOptions = "flex-start" | "flex-end" | "space-between";
+type SideModalFooterActionsProps = Pick<BoxProps<"div">, "element" | "children"> & {
+  /**
+  * Sets the `justify-content` CSS property.
+  *
+  * @type {JustifyOptions}
+  * @memberof SideModalFooterActionsProps
+  */
+  justifyContent?: JustifyOptions;
+};
+declare const SideModalFooterActions: _$react.ForwardRefExoticComponent<Pick<BoxProps<"div">, "children" | "element"> & {
+  /**
+  * Sets the `justify-content` CSS property.
+  *
+  * @type {JustifyOptions}
+  * @memberof SideModalFooterActionsProps
+  */
+  justifyContent?: JustifyOptions;
+} & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/useSideModalState.d.ts
+declare const useSideModalState: (options: NonModalDialogPrimitivePopoverInitialState) => NonModalDialogPrimitiveStateReturn;
+//#endregion
+export { SideModal, SideModalBody, type SideModalBodyProps, SideModalButton, type SideModalButtonProps, SideModalContainer, type SideModalContainerProps, SideModalFooter, SideModalFooterActions, type SideModalFooterActionsProps, type SideModalFooterProps, SideModalHeader, type SideModalHeaderProps, SideModalHeading, type SideModalHeadingProps, type SideModalProps, type SideModalStateReturn, useSideModalState };

package/dist/index.mjs

@@ -0,0 +1,198 @@
+import { animated, useTransition } from "@hive-ui/animation-library";
+import { Box } from "@hive-ui/box";
+import { hiveBaseStyles } from "@hive-ui/theme";
+import { styled } from "@hive-ui/css-library";
+import { NonModalDialogDisclosurePrimitive, NonModalDialogPrimitive, useNonModalDialogPrimitiveState } from "@hive-ui/non-modal-dialog-primitive";
+import { createContext, forwardRef, memo, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@hive-ui/button";
+import { CloseIcon } from "@hive-ui/icons/CloseIcon";
+import { ScreenReaderOnly } from "@hive-ui/screen-reader-only";
+import { Heading } from "@hive-ui/heading";
+//#region src/SideModalContext.ts
+const SideModalContext = createContext({});
+//#endregion
+//#region src/SideModal.tsx
+const AnimatedBox = animated(Box);
+const StyledBox = styled(Box)(hiveBaseStyles);
+const getAnimationStates = () => ({
+	from: {
+		opacity: 0,
+		transform: `translateX(100%)`
+	},
+	enter: {
+		opacity: 1,
+		transform: `translateX(0%)`
+	},
+	leave: {
+		opacity: 0,
+		transform: `translateX(100%)`
+	},
+	config: {
+		mass: .5,
+		tension: 220,
+		friction: 20
+	}
+});
+const SideModal = forwardRef(({ element = "SIDE_MODAL", hideOnEsc, children, ...props }, ref) => {
+	const dialog = useContext(SideModalContext);
+	const transitions = useTransition(dialog.visible, getAnimationStates());
+	return /* @__PURE__ */ jsx(NonModalDialogPrimitive, {
+		...dialog,
+		...props,
+		preventBodyScroll: false,
+		hideOnClickOutside: false,
+		hideOnEsc,
+		element: `${element}_CONTAINER`,
+		ref,
+		as: Box,
+		zIndex: "zIndex80",
+		position: "fixed",
+		top: "0 !important",
+		right: "0 !important",
+		bottom: "0 !important",
+		left: "auto !important",
+		transform: "none !important",
+		_focus: { outline: "none" },
+		children: /* @__PURE__ */ jsx(StyledBox, { children: transitions((styles, item) => {
+			return item && /* @__PURE__ */ jsx(AnimatedBox, {
+				style: styles,
+				element,
+				display: "grid",
+				gridTemplateRows: "auto 1fr auto",
+				height: "100vh",
+				backgroundColor: "colorBackgroundWeaker",
+				boxShadow: "shadowElevationLeft20",
+				width: "51rem",
+				children
+			});
+		}) })
+	});
+});
+//#endregion
+//#region src/SideModalButton.tsx
+const SideModalButton = forwardRef(({ element = "SIDE_MODAL_BUTTON", children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NonModalDialogDisclosurePrimitive, {
+		element,
+		...useContext(SideModalContext),
+		...props,
+		as: Button,
+		ref,
+		children
+	});
+});
+//#endregion
+//#region src/SideModalHeader.tsx
+const SideModalHeader = forwardRef(({ element = "SIDE_MODAL_HEADER", i18nDismissLabel = "close", children, ...props }, ref) => {
+	const { hide } = useContext(SideModalContext);
+	return /* @__PURE__ */ jsxs(Box, {
+		...props,
+		ref,
+		paddingRight: "space90",
+		paddingLeft: "space90",
+		paddingTop: "space90",
+		element,
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "flex-start",
+		children: [/* @__PURE__ */ jsx(Box, {
+			display: "flex",
+			flexGrow: 1,
+			marginRight: "space70",
+			children
+		}), /* @__PURE__ */ jsxs(Button, {
+			element: `${element}_CLOSE_BUTTON`,
+			variant: "secondary_icon",
+			size: "reset",
+			onClick: hide,
+			children: [/* @__PURE__ */ jsx(CloseIcon, {
+				element: `${element}_CLOSE_ICON`,
+				decorative: true,
+				size: "sizeIcon50"
+			}), /* @__PURE__ */ jsx(ScreenReaderOnly, { children: i18nDismissLabel })]
+		})]
+	});
+});
+//#endregion
+//#region src/SideModalHeading.tsx
+const SideModalHeading = forwardRef(({ element = "SIDE_MODAL_HEADING", as = "h2", children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Heading, {
+		...props,
+		as,
+		element,
+		marginBottom: "space0",
+		variant: "heading30",
+		ref,
+		children
+	});
+});
+//#endregion
+//#region src/SideModalContainer.tsx
+const BaseSideModalContainer = ({ gutter, placement, modal, children, state, ...initialState }) => {
+	const dialog = state || useNonModalDialogPrimitiveState({
+		modal: true,
+		unstable_fixed: true,
+		...initialState
+	});
+	return /* @__PURE__ */ jsx(SideModalContext.Provider, {
+		value: { ...dialog },
+		children
+	});
+};
+BaseSideModalContainer.displayName = "BaseSideModalContainer";
+const SideModalContainer = memo(BaseSideModalContainer);
+SideModalContainer.displayName = "SideModalContainer";
+//#endregion
+//#region src/SideModalBody.tsx
+const SideModalBody = forwardRef(({ element = "SIDE_MODAL_BODY", children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		...props,
+		element,
+		ref,
+		overflowY: "auto",
+		padding: "space90",
+		children
+	});
+});
+//#endregion
+//#region src/SideModalFooter.tsx
+const SideModalFooter = forwardRef(({ element = "SIDE_MODAL_FOOTER", children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		...props,
+		as: "div",
+		element,
+		ref,
+		paddingRight: "space90",
+		paddingLeft: "space90",
+		paddingBottom: "space90",
+		display: "flex",
+		children
+	});
+});
+//#endregion
+//#region src/SideModalFooterActions.tsx
+const SideModalFooterActions = forwardRef(({ element = "SIDE_MODAL_FOOTER_ACTIONS", justifyContent = "flex-start", children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		...props,
+		display: "flex",
+		justifyContent,
+		flexWrap: "wrap",
+		flexGrow: 1,
+		element,
+		columnGap: "space50",
+		alignItems: "center",
+		ref,
+		children
+	});
+});
+//#endregion
+//#region src/useSideModalState.ts
+const useSideModalState = (options) => {
+	return useNonModalDialogPrimitiveState({
+		modal: true,
+		unstable_fixed: true,
+		...options
+	});
+};
+//#endregion
+export { SideModal, SideModalBody, SideModalButton, SideModalContainer, SideModalFooter, SideModalFooterActions, SideModalHeader, SideModalHeading, useSideModalState };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@hive-ui/side-modal",
+  "version": "0.3.1",
+  "description": "Hive UI Side Modal Component",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "dependencies": {
+    "@hive-ui/box": "^0.3.1",
+    "@hive-ui/button": "^0.3.1",
+    "@hive-ui/heading": "^0.3.1",
+    "@hive-ui/icons": "^0.3.1",
+    "@hive-ui/screen-reader-only": "^0.3.1",
+    "@hive-ui/animation-library": "^0.3.1",
+    "@hive-ui/theme": "^0.3.1",
+    "@hive-ui/css-library": "^0.3.1",
+    "@hive-ui/non-modal-dialog-primitive": "^0.3.1",
+    "@hive-ui/style-props": "^0.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.2",
+    "@typescript/native-preview": "7.0.0-dev.20260509.2",
+    "bumpp": "^11.1.0",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.1.20",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.20"
+  },
+  "peerDependencies": {
+    "react": "19.2.6"
+  }
+}