@sps-woodland/modal 8.0.0-rc1

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/modal/Modal.css.d.ts

@@ -0,0 +1,19 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export declare type ModalKind = keyof typeof Tokens.component["modal"]["kind"];
+export declare type ModalSize = keyof typeof Tokens.component["modal"]["size"];
+interface ModalVariantDefinitions extends VariantDefinitions {
+    kind: RecipeVariant<ModalKind>;
+    size: RecipeVariant<ModalSize>;
+    fullHeight: BooleanRecipeVariant;
+}
+export declare const modal: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<ModalVariantDefinitions>;
+export declare const title: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ModalVariantDefinitions, "kind">>;
+export declare const titleContent: string;
+export declare const modalIcon: string;
+export declare const body: string;
+export declare const footer: string;
+export declare const closeButtonBox: string;
+export declare const closeButtonIcon: string;
+export declare const underlay: string;
+export {};

package/lib/modal/Modal.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ChildrenFn } from "@sps-woodland/core";
+import type { IconName } from "@sps-woodland/tokens";
+import type { AriaModalOverlayProps, AriaDialogProps, OverlayTriggerAria } from "react-aria";
+import type { OverlayTriggerState } from "react-stately";
+import * as React from "react";
+import type { ModalKind, ModalSize } from "./Modal.css";
+interface ModalPropsFromHook {
+    state: OverlayTriggerState;
+    overlayProps: OverlayTriggerAria["overlayProps"];
+}
+declare type ModalContentRenderFn = (close: OverlayTriggerState["close"]) => React.ReactNode;
+declare type ModalProps = ModalPropsFromHook & AriaModalOverlayProps & AriaDialogProps & {
+    kind?: ModalKind;
+    size?: ModalSize;
+    title: React.ReactNode | ModalContentRenderFn;
+    footer?: React.ReactNode | ModalContentRenderFn;
+    dismissable?: boolean;
+    onClose?: () => void;
+    focusElementOnOpen?: React.MutableRefObject<HTMLElement>;
+    fullHeight?: boolean;
+};
+export declare const ModalIcons: Record<ModalKind, IconName>;
+declare function ModalInternal({ children, className, "data-testid": dataTestId, kind, onBlur, onFocus, overlayProps, size, state, title, dismissable, onClose, fullHeight, ...rest }: ComponentProps<ModalProps, HTMLDivElement> & ChildrenFn<ModalContentRenderFn>): React.ReactElement;
+export declare function Modal(props: Parameters<typeof ModalInternal>[0]): React.ReactElement;
+export {};

package/lib/modal/useModal.d.ts

@@ -0,0 +1,16 @@
+import type { AriaButtonProps, OverlayTriggerAria } from "react-aria";
+import type { OverlayTriggerState, OverlayTriggerProps } from "react-stately";
+import type { RefObject } from "react";
+interface ModalPropsAndState {
+    triggerProps: Omit<AriaButtonProps, "onPress"> & {
+        onClick: AriaButtonProps["onPress"];
+        ref: RefObject<HTMLElement | null>;
+    };
+    modalState: OverlayTriggerProps;
+    modalProps: {
+        state: OverlayTriggerState;
+        overlayProps: OverlayTriggerAria["overlayProps"];
+    };
+}
+export declare function useModal(config?: OverlayTriggerProps): ModalPropsAndState;
+export {};

package/lib/modal-footer/ModalFooter.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function ModalFooter({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/style.css

@@ -0,0 +1 @@
+._3moto20{background-color:#fff;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-direction:column;overflow:hidden;max-height:100%}._3moto21{border-color:#007db8}._3moto22,._3moto23{border-color:#de002e}._3moto24{border-color:#0b8940}._3moto25,._3moto26{border-color:#e7760b}._3moto27{border-color:#4b5356}._3moto28{width:23.75rem}._3moto29{width:36.25rem}._3moto2a{width:48.75rem}._3moto2b{width:73.75rem}._3moto2c{height:100%}._3moto2e{align-items:center;color:#fff;display:flex;padding:1rem}._3moto2f{background-color:#4b5356}._3moto2g,._3moto2h{background-color:#de002e}._3moto2i{background-color:#007db8}._3moto2j{background-color:#0b8940}._3moto2k,._3moto2l{background-color:#e7760b}._3moto2m{flex-grow:1;font-size:.875rem;font-weight:600;line-height:1.25rem}._3moto2n{font-weight:600;line-height:.875rem;font-size:.875rem;padding-right:.5rem}._3moto2o{overflow-y:auto;padding:1rem;flex:1}._3moto2p{align-items:center;background-color:#f3f4f4;display:flex;justify-content:flex-end;padding:.5rem}._3moto2q{color:#fff;border-width:0}._3moto2r{padding:0 .25rem}._3moto2s{position:fixed;z-index:1000;top:0;left:0;bottom:0;right:0;background:#f3f4f4;display:flex;align-items:center;justify-content:center;padding:1rem}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@sps-woodland/modal",
+  "description": "SPS Woodland Design System modal component",
+  "version": "8.0.0-rc1",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/modal",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/modal#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@types/react": "^16.9.0",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "@vanilla-extract/sprinkles": "^1.5.0",
+    "@vanilla-extract/vite-plugin": "^3.6.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "vite": "^3.1.4",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1"
+  },
+  "dependencies": {
+    "react-aria": "^3.21.0",
+    "react-stately": "^3.19.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});