@enhanced-dom/slides 0.0.7 → 0.1.0

package/components/icon.component.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IconWebComponent, IconWebComponentAttributes } from '@enhanced-dom/icon';
+import { type DetailedHTMLProps, HTMLAttributes } from 'react';
+import { IconWebComponent, type IconWebComponentAttributes } from '@enhanced-dom/icon';
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
-declare type IconComponentProps = IconWebComponentAttributes<IconDefinition> & React.DetailedHTMLProps<React.HTMLAttributes<IconWebComponent>, IconWebComponent>;
+declare type IconComponentProps = IconWebComponentAttributes<IconDefinition> & DetailedHTMLProps<HTMLAttributes<IconWebComponent>, IconWebComponent>;
 export declare const Icon: import("react").ComponentType<IconComponentProps> & {
     renderer: import("@enhanced-dom/webcomponent").IRenderingEngine;
 } & Record<string, AnalyserNode>;

package/components/scroll-top/scroll-top.component.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type ReactNode } from 'react';
 export declare const ScrollTop: ({ children }: {
-    children?: React.ReactNode;
-}) => import("theme-ui/jsx-runtime").JSX.Element;
+    children?: ReactNode;
+}) => import("react").JSX.Element;

package/components/scroll-top/scroll-top.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import React from 'react';
+import { useCallback, useState } from 'react';
 import ReactCardFlip from 'react-card-flip';
 import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
 import * as styles from './scroll-top.style.pcss';
@@ -22,16 +22,15 @@ const scrollOnKey = (e) => {
     scrollToTop();
 };
 export const ScrollTop = ({ children }) => {
-    const [isFlipped, setFlipped] = React.useState(false);
-    const showButton = React.useCallback(() => {
+    const [isFlipped, setFlipped] = useState(false);
+    const showButton = useCallback(() => {
         if (getBodyScroll()) {
             setFlipped(true);
         }
     }, [setFlipped]);
-    const showFront = React.useCallback(() => {
+    const showFront = useCallback(() => {
         setFlipped(false);
     }, [setFlipped]);
-    const buttonContents = children ? (_jsxs(ReactCardFlip, Object.assign({ isFlipped: isFlipped, flipDirection: "horizontal" }, { children: [_jsx("div", Object.assign({ className: styles.brandingFront }, { children: children }), void 0),
-            _jsx("div", Object.assign({ className: styles.brandingBack }, { children: _jsx(Icon, { className: styles.scrollIcon, config: { ...faArrowAltCircleUp, namespace: 'fa5' } }, void 0) }), void 0)] }), void 0)) : (_jsx("div", Object.assign({ className: styles.brandingBack }, { children: _jsx(Icon, { className: styles.scrollIcon, config: { ...faArrowAltCircleUp, namespace: 'fa5' } }, void 0) }), void 0));
-    return (_jsx("div", Object.assign({ className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront, onKeyDown: scrollOnKey }, { children: buttonContents }), void 0));
+    const buttonContents = children ? (_jsxs(ReactCardFlip, { isFlipped: isFlipped, flipDirection: "horizontal", children: [_jsx("div", { className: styles.brandingFront, children: children }), _jsx("div", { className: styles.brandingBack, children: _jsx(Icon, { className: styles.scrollIcon, config: { ...faArrowAltCircleUp, namespace: 'fa5' } }) })] })) : (_jsx("div", { className: styles.brandingBack, children: _jsx(Icon, { className: styles.scrollIcon, config: { ...faArrowAltCircleUp, namespace: 'fa5' } }) }));
+    return (_jsx("div", { className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront, onKeyDown: scrollOnKey, children: buttonContents }));
 };

package/components/scroll-top/scroll-top.style.pcss

@@ -41,6 +41,7 @@
     width: 100%;
     display: flex;
     justify-content: space-around;
+    align-items: center;
     padding: 0.5rem;
   }
 }

package/components/shell/header.component.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 export declare const ShellHeader: ({ title, author, profileLink, date, variant, }: {
     title: string;
     author: string;
     profileLink?: string;
     date: string;
     variant?: string;
-}) => import("theme-ui/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/components/shell/header.component.js

@@ -1,8 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { Themed } from 'theme-ui';
+import { Themed } from '@theme-ui/mdx';
 export const ShellHeader = ({ title, author, profileLink, date, variant = 'default', }) => {
-    return (_jsxs("header", { children: [_jsx(Themed.h1, { children: title }, void 0),
-            _jsxs(Themed.p, Object.assign({ sx: { variant: `styles.shell.${variant}.Author` } }, { children: [profileLink ? (_jsx(Themed.a, Object.assign({ href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' } }, { children: author }), void 0)) : (author),
-                    _jsx("br", {}, void 0),
-                    _jsx("span", Object.assign({ sx: { fontSize: 1 } }, { children: date }), void 0)] }), void 0)] }, void 0));
+    return (_jsxs("header", { children: [_jsx(Themed.h1, { children: title }), _jsxs(Themed.p, { sx: { variant: `styles.shell.${variant}.Author` }, children: [profileLink ? (_jsx(Themed.a, { href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' }, children: author })) : (author), _jsx("br", {}), _jsx("span", { sx: { fontSize: 1 }, children: date })] })] }));
 };

package/components/shell/shell.component.d.ts

@@ -1,18 +1,17 @@
-/** @jsxFrag React.Fragment */
-import { Theme } from 'theme-ui';
-import React from 'react';
+import { type Theme } from 'theme-ui';
+import { type ComponentProps, type FC, type ReactNode } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { ShellHeader } from './header.component';
 declare const BrandingSlot: ({ children }: {
-    children?: React.ReactNode;
-}) => import("theme-ui/jsx-runtime").JSX.Element;
-declare const ContentsSlot: React.FC<React.ComponentProps<typeof ShellHeader>>;
-export declare const Shell: React.FC<{
+    children?: ReactNode;
+}) => import("react").JSX.Element;
+declare const ContentsSlot: FC<ComponentProps<typeof ShellHeader>>;
+export declare const Shell: FC<{
     theme?: Theme;
     variant?: string;
 }> & {
     Branding: typeof BrandingSlot;
     Contents: typeof ContentsSlot;
-    mdxComponents: React.ComponentProps<typeof MDXProvider>['components'];
+    mdxComponents: ComponentProps<typeof MDXProvider>['components'];
 };
 export {};

package/components/shell/shell.component.js

@@ -1,34 +1,31 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxFrag React.Fragment */
-import { Themed, ThemeProvider } from 'theme-ui';
+import { ThemeUIProvider } from 'theme-ui';
+import { Themed } from '@theme-ui/mdx';
 import { Global } from '@emotion/react';
-import React from 'react';
+import { Children as ReactChildren } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import defaultTheme from '../../theme';
 import { ShellHeader } from './header.component';
 import { ScrollTop } from '../scroll-top';
 import { Heading2 } from '../toc';
 const BrandingSlot = ({ children }) => {
-    return _jsx(_Fragment, { children: children }, void 0);
+    return _jsx(_Fragment, { children: children });
 };
 const ContentsSlot = ({ children, ...rest }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(ShellHeader, Object.assign({}, rest), void 0), children || null] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(ShellHeader, { ...rest }), children || null] }));
 };
-const getBranding = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === BrandingSlot; });
-const getContents = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === ContentsSlot; });
+const getBranding = (children) => ReactChildren.toArray(children).find((item) => (item === null || item === void 0 ? void 0 : item.type) === BrandingSlot);
+const getContents = (children) => ReactChildren.toArray(children).find((item) => (item === null || item === void 0 ? void 0 : item.type) === ContentsSlot);
 export const Shell = ({ children, theme, variant = 'default' }) => {
     var _a, _b, _c, _d, _e;
     const branding = getBranding(children);
     const contents = getContents(children);
-    return (_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsxs(Themed.root, Object.assign({ sx: {
+    return (_jsx(ThemeUIProvider, { theme: theme, children: _jsxs(Themed.root, { sx: {
                 variant: `styles.shell.${variant}.Root`,
-            } }, { children: [_jsx(Global, { styles: {
+            }, children: [_jsx(Global, { styles: {
                         ...((_b = (_a = theme.styles.global) === null || _a === void 0 ? void 0 : _a[variant]) !== null && _b !== void 0 ? _b : {}),
                         body: { margin: 0, overflowX: 'hidden', ...((_e = (_d = (_c = theme.styles.global) === null || _c === void 0 ? void 0 : _c[variant]) === null || _d === void 0 ? void 0 : _d.body) !== null && _e !== void 0 ? _e : {}) },
-                    } }, void 0),
-                _jsx("aside", {}, void 0),
-                _jsxs("main", { children: [_jsx(MDXProvider, Object.assign({ components: Shell.mdxComponents, disableParentContext: true }, { children: contents }), void 0),
-                        branding ? _jsx(ScrollTop, { children: branding.props.children ? branding : null }, void 0) : null] }, void 0)] }), void 0) }), void 0));
+                    } }), _jsx("aside", {}), _jsxs("main", { children: [_jsx(MDXProvider, { components: Shell.mdxComponents, disableParentContext: true, children: contents }), branding ? _jsx(ScrollTop, { children: branding.props.children ? branding : null }) : null] })] }) }));
 };
 Shell.defaultProps = {
     theme: defaultTheme,

package/components/toc/heading2.component.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 export declare const Heading2: ({ children, id, className, ...forwarded }: React.BaseHTMLAttributes<HTMLElement> & {
     children: string;
     variant: string;
-}) => import("theme-ui/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/components/toc/heading2.component.js

@@ -30,7 +30,7 @@ export const Heading2 = ({ children, id, className, ...forwarded }) => {
     const handleCopyReset = useCallback(() => {
         setCopied(false);
     }, [setCopied]);
-    return (_jsx("h2", Object.assign({ className: classnames(styles.heading, className) }, forwarded, { tabIndex: 0, onKeyDown: handleKeyboardCopy, onBlur: handleCopyReset, 
+    return (_jsx("h2", { className: classnames(styles.heading, className), ...forwarded, tabIndex: 0, onKeyDown: handleKeyboardCopy, onBlur: handleCopyReset, 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-        role: "link" }, { children: _jsxs("a", Object.assign({ id: anchorRef, className: styles.anchor, href: url.toString() }, { children: [children, _jsx(Icon, { onClick: copied ? undefined : handleCopyLink, config: iconConfig, className: classnames(styles.icon, { [styles.copied]: copied }), title: copied ? 'Copied to clipboard!' : 'Copy link' }, void 0)] }), void 0) }), void 0));
+        role: "link", children: _jsxs("a", { id: anchorRef, className: styles.anchor, href: url.toString(), children: [children, _jsx(Icon, { onClick: copied ? undefined : handleCopyLink, config: iconConfig, className: classnames(styles.icon, { [styles.copied]: copied }), title: copied ? 'Copied to clipboard!' : 'Copy link' })] }) }));
 };

package/components/toc/toc.component.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface TocItemProps {
     heading: string;
     to?: string;
@@ -5,5 +6,5 @@ interface TocItemProps {
 }
 export declare const Toc: ({ headings }: {
     headings: TocItemProps[];
-}) => import("theme-ui/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export {};

package/components/toc/toc.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 const TocItem = ({ heading, to, explanation }) => {
     const anchor = to !== null && to !== void 0 ? to : heading;
-    return (_jsxs("li", { children: [_jsx("a", Object.assign({ href: `#${anchor.toLowerCase().replace(/\s/, '-')}` }, { children: _jsx("b", { children: heading }, void 0) }), void 0), explanation ? ': ' : '', explanation] }, void 0));
+    return (_jsxs("li", { children: [_jsx("a", { href: `#${anchor.toLowerCase().replace(/\s/, '-')}`, children: _jsx("b", { children: heading }) }), explanation ? ': ' : '', explanation] }));
 };
-export const Toc = ({ headings }) => (_jsx("ul", { children: headings.map((h, idx) => (_jsx(TocItem, Object.assign({}, h), idx))) }, void 0));
+export const Toc = ({ headings }) => (_jsx("ul", { children: headings.map((h, idx) => (_jsx(TocItem, { ...h }, idx))) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enhanced-dom/slides",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "Basic building blocks for html slides",
   "keywords": [],
   "repository": "https://github.com/enhanced-dom/slides.git",
@@ -8,29 +8,29 @@
   "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
   "main": "index.js",
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@enhanced-dom/fontawesome": "^0.0.5",
-    "@enhanced-dom/gatsby-waves": "^0.0.2",
-    "@enhanced-dom/icon": "^0.0.9",
-    "@enhanced-dom/react": "^0.0.17",
-    "@fontsource/montserrat": "^4.5.10",
-    "@fontsource/noto-serif": "^5.0.15",
-    "@mdx-js/react": "^2.3.0",
-    "@theme-ui/typography": "^0.14.5",
-    "deepmerge": "^4.2.2",
+    "@emotion/react": "^11.11.3",
+    "@enhanced-dom/fontawesome": "^0.1.0",
+    "@enhanced-dom/gatsby-waves": "^0.1.0",
+    "@enhanced-dom/icon": "^0.1.0",
+    "@enhanced-dom/react": "^0.1.0",
+    "@fontsource/montserrat": "^5.0.16",
+    "@fontsource/noto-serif": "^5.0.18",
+    "@mdx-js/react": "^3.0.1",
+    "@theme-ui/typography": "^0.16.2",
+    "deepmerge": "^4.3.1",
     "lodash.pick": "^4.4.0",
-    "react-card-flip": "^1.1.1",
+    "react-card-flip": "^1.2.2",
     "typography-theme-wordpress-2016": "^0.16.19"
   },
   "devDependencies": {
-    "@enhanced-dom/lint": "^0.0.9",
-    "@enhanced-dom/webpack": "^0.0.11",
-    "@types/lodash.pick": "^4.4.6",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5"
+    "@enhanced-dom/lint": "^0.1.4",
+    "@enhanced-dom/webpack": "^0.1.0",
+    "@types/lodash.pick": "^4.4.9",
+    "@types/react": "^17.0.75",
+    "@types/react-dom": "^17.0.25"
   },
   "engines": {
-    "node": ">=14.17.0",
-    "npm": ">=9.0.0"
+    "node": ">=18",
+    "npm": ">=10"
   }
 }