@sybilion/uilib 1.3.16 → 1.3.18

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.js

@@ -1,10 +1,10 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useCallback, useEffect } from 'react';
 import { useIsTouchDevice } from '../../../hooks/useIsTouchDevice.js';
 import S from './InteractionOverlay.styl.js';
 
-function InteractionOverlay({ className, children, }) {
+function InteractionOverlay({ className, children, message = 'Touch to interact', }) {
     const isTouchDevice = useIsTouchDevice();
     const [isVisible, setIsVisible] = useState(true);
     const handleClick = useCallback(() => {
@@ -29,7 +29,7 @@ function InteractionOverlay({ className, children, }) {
     if (!isTouchDevice) {
         return jsx(Fragment, { children: children });
     }
-    return (jsx("div", { className: cn(S.root, !isVisible && S.hidden, className), onClick: handleClick, children: children }));
+    return (jsxs("div", { className: cn(S.root, !isVisible && S.hidden, className), children: [children, jsx("button", { type: "button", className: S.overlay, onClick: handleClick, "aria-label": message, children: jsx("span", { className: S.message, children: message }) })] }));
 }
 
 export { InteractionOverlay };

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractionOverlay_root__9FV58{inset:0;opacity:.7;pointer-events:auto;position:relative;transition:opacity .2s ease-out}.InteractionOverlay_root__9FV58:after{content:\"\";height:100%;inset:0;position:absolute;touch-action:manipulation;width:100%;z-index:4}.InteractionOverlay_root__9FV58.InteractionOverlay_hidden__NRlgG{opacity:1;pointer-events:none}";
-var S = {"root":"InteractionOverlay_root__9FV58","hidden":"InteractionOverlay_hidden__NRlgG"};
+var css_248z = ".InteractionOverlay_root__9FV58{position:relative}.InteractionOverlay_overlay__Nwawr{background:transparent;border:none;box-shadow:inset 0 0 80px 40px var(--overlay-background-color);cursor:pointer;inset:0;margin:0;padding:0;position:absolute;touch-action:manipulation;transition:box-shadow .2s ease-out;z-index:4}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr{box-shadow:inset 0 0 0 0 var(--overlay-background-color);pointer-events:none}.InteractionOverlay_message__oCuPR{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--overlay-background-color) 80%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);border-radius:9999px;box-shadow:0 0 24px 10px var(--overlay-background-color),0 0 0 1px color-mix(in srgb,var(--overlay-background-color) 40%,transparent);color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;line-height:1.25;padding:var(--p-3) var(--p-5);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s ease-out;transition-property:transform,opacity;white-space:nowrap;z-index:1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_message__oCuPR{opacity:0;transform:translate(-50%,-50%) scale(.3)}:root{--overlay-background-color:var(--page-color)}";
+var S = {"root":"InteractionOverlay_root__9FV58","overlay":"InteractionOverlay_overlay__Nwawr","hidden":"InteractionOverlay_hidden__NRlgG","message":"InteractionOverlay_message__oCuPR"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Logo/Logo.js

@@ -1,15 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import S from './Logo.styl.js';
+import LogoMarkSvg from './logo.svg.js';
 
-/**
- * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
- * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
- * Same path as the favicon `<link href>`.
- */
-const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg';
 function Logo({ showText = true, size = 'md', className, ...props }) {
-    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx("img", { src: SYBILION_STANDALONE_LOGO_PUBLIC_URL, alt: showText ? '' : 'Sybilion', className: S.icon, ...(showText ? { 'aria-hidden': true } : {}) }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
+    return (jsxs("div", { className: cn(S.root, S[size], className), ...props, children: [jsx(LogoMarkSvg, { className: S.icon, ...(showText
+                    ? { 'aria-hidden': true }
+                    : { 'aria-label': 'Sybilion', role: 'img' }) }), showText && jsx("span", { className: S.text, children: "Sybilion" })] }));
 }
 
-export { Logo, SYBILION_STANDALONE_LOGO_PUBLIC_URL };
+export { Logo, LogoMarkSvg as LogoMark };

package/dist/esm/components/ui/Logo/logo.svg.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgLogo = function SvgLogo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "#C259FF",
+    d: "M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z",
+    style: {
+      strokeWidth: 0.13252
+    }
+  }));
+};
+var LogoMarkSvg = SvgLogo;
+
+export { LogoMarkSvg as default };

package/dist/esm/index.js

@@ -119,3 +119,4 @@ export { ChartTooltipContent } from './components/ui/Chart/components/ChartToolt
 export { ChartLegendContent } from './components/ui/Chart/components/ChartLegendContent.js';
 export { BaseChartWrapper } from './components/ui/Chart/components/BaseChartWrapper.js';
 export { default as DialogStyles } from './components/ui/Dialog/Dialog.styl.js';
+export { default as LogoMark } from './components/ui/Logo/logo.svg.js';

package/dist/esm/types/src/components/ui/InteractionOverlay/InteractionOverlay.d.ts

@@ -1,6 +1,7 @@
 interface InteractionOverlayProps {
     className?: string;
     children?: React.ReactNode;
+    message?: string;
 }
-export declare function InteractionOverlay({ className, children, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractionOverlay({ className, children, message, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/ui/Logo/Logo.d.ts

@@ -1,7 +1,9 @@
 import type { LogoProps } from './Logo.types';
+import LogoMarkSvg from './logo.svg';
+export { LogoMarkSvg as LogoMark };
 /**
- * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
- * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
+ * Public URL for standalone apps. Copy `@sybilion/uilib/logo.svg` (Logo component asset)
+ * to `public/logo.svg` (app template README documents postinstall copies).
  * Same path as the favicon `<link href>`.
  */
 export declare const SYBILION_STANDALONE_LOGO_PUBLIC_URL: "/logo.svg";

package/dist/esm/types/src/components/ui/Logo/index.d.ts

@@ -1,2 +1,2 @@
-export { Logo } from './Logo';
+export { Logo, LogoMark } from './Logo';
 export type { LogoProps, LogoSize } from './Logo.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.16",
+  "version": "1.3.18",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -35,7 +35,7 @@
       "default": "./dist/esm/hooks/index.js"
     },
     "./src/*": "./src/*",
-    "./logo.svg": "./src/assets/logo.svg"
+    "./logo.svg": "./src/components/ui/Logo/logo.svg"
   },
   "files": [
     "assets",
@@ -52,6 +52,7 @@
     "tests:watch": "jest --watch",
     "ts": "tsc --noEmit",
     "dev": "NODE_OPTIONS='--loader ts-node/esm' NODE_ENV=development webpack-dev-server --mode=development --config ./src/docs/config/webpack.config.js --progress",
+    "prebuild": "cp src/components/ui/Logo/logo.svg assets/logo.svg",
     "build": "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",
     "build:watch": "yarn build --watch",
     "build:compress": "COMPRESS=true yarn build",

package/src/components/ui/InteractionOverlay/InteractionOverlay.styl

@@ -1,19 +1,50 @@
 .root
   position relative
-  inset 0
-  opacity 0.7
-  transition opacity 200ms ease-out
-  pointer-events auto
 
-  &::after
-    content ''
-    position absolute
-    inset 0
-    width 100%
-    height 100%
-    z-index 4
-    touch-action manipulation
+.overlay
+  position absolute
+  inset 0
+  z-index 4
+  border none
+  padding 0
+  margin 0
+  cursor pointer
+  touch-action manipulation
+  background transparent
+  box-shadow inset 0 0 80px 40px var(--overlay-background-color)
+  transition box-shadow 200ms ease-out
 
-  &.hidden
-    opacity 1
+  .hidden &
+    box-shadow inset 0 0 0 0 var(--overlay-background-color)
     pointer-events none
+
+.message
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  pointer-events none
+  z-index 1
+  font-size 0.875rem
+  font-weight 500
+  line-height 1.25
+  color var(--foreground)
+  white-space nowrap
+  padding var(--p-3) var(--p-5)
+  border-radius 9999px
+  border 1px solid unquote('color-mix(in srgb, var(--foreground) 14%, transparent)')
+  background-color unquote('color-mix(in srgb, var(--overlay-background-color) 80%, transparent)')
+  backdrop-filter blur(10px)
+  box-shadow \
+    0 0 24px 10px var(--overlay-background-color), \
+    0 0 0 1px unquote('color-mix(in srgb, var(--overlay-background-color) 40%, transparent)')
+  transition 200ms ease-out
+  transition-property transform, opacity
+
+  .hidden &
+    transform translate(-50%, -50%) scale(.3)
+    opacity 0
+
+
+:global(:root)
+  --overlay-background-color var(--page-color)

package/src/components/ui/InteractionOverlay/InteractionOverlay.styl.d.ts

@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'hidden': string;
+  'message': string;
+  'overlay': string;
   'root': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/InteractionOverlay/InteractionOverlay.tsx

@@ -8,11 +8,13 @@ import S from './InteractionOverlay.styl';
 interface InteractionOverlayProps {
   className?: string;
   children?: React.ReactNode;
+  message?: string;
 }
 
 export function InteractionOverlay({
   className,
   children,
+  message = 'Touch to interact',
 }: InteractionOverlayProps) {
   const isTouchDevice = useIsTouchDevice();
   const [isVisible, setIsVisible] = useState(true);
@@ -45,11 +47,16 @@ export function InteractionOverlay({
   }
 
   return (
-    <div
-      className={cn(S.root, !isVisible && S.hidden, className)}
-      onClick={handleClick}
-    >
+    <div className={cn(S.root, !isVisible && S.hidden, className)}>
       {children}
+      <button
+        type="button"
+        className={S.overlay}
+        onClick={handleClick}
+        aria-label={message}
+      >
+        <span className={S.message}>{message}</span>
+      </button>
     </div>
   );
 }

package/src/components/ui/Logo/Logo.tsx

@@ -2,10 +2,13 @@ import cn from 'classnames';
 
 import S from './Logo.styl';
 import type { LogoProps } from './Logo.types';
+import LogoMarkSvg from './logo.svg';
+
+export { LogoMarkSvg as LogoMark };
 
 /**
- * Public URL for the Sybilion logo in standalone apps. Copy `@sybilion/uilib/logo.svg`
- * to `public/logo.svg` (Sybilion app template README documents postinstall copies).
+ * Public URL for standalone apps. Copy `@sybilion/uilib/logo.svg` (Logo component asset)
+ * to `public/logo.svg` (app template README documents postinstall copies).
  * Same path as the favicon `<link href>`.
  */
 export const SYBILION_STANDALONE_LOGO_PUBLIC_URL = '/logo.svg' as const;
@@ -18,11 +21,11 @@ export function Logo({
 }: LogoProps) {
   return (
     <div className={cn(S.root, S[size], className)} {...props}>
-      <img
-        src={SYBILION_STANDALONE_LOGO_PUBLIC_URL}
-        alt={showText ? '' : 'Sybilion'}
+      <LogoMarkSvg
         className={S.icon}
-        {...(showText ? { 'aria-hidden': true } : {})}
+        {...(showText
+          ? { 'aria-hidden': true }
+          : { 'aria-label': 'Sybilion', role: 'img' })}
       />
       {showText && <span className={S.text}>Sybilion</span>}
     </div>

package/src/components/ui/Logo/index.ts

@@ -1,5 +1,5 @@
 // Export main component
-export { Logo } from './Logo';
+export { Logo, LogoMark } from './Logo';
 
 // Export types that external components might need
 export type { LogoProps, LogoSize } from './Logo.types';

package/src/{assets → components/ui/Logo}/logo.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-	<path fill="#59f0ff" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
+	<path fill="#C259FF" d="M13.43 24.023h-2.836v-2.836h2.836zm-2.835-2.844H5.63v-2.74h4.965Zm10.527-2.74h-2.726v2.74h-4.965v-2.74h4.952v-4.965h2.74zm-15.5 0h-2.74v-4.965h2.74ZM2.87 13.462H.034v-2.836H2.87Zm21.096 0H21.13v-2.836h2.836zM5.617 10.635h-2.74V5.669h2.74zm15.505 0h-2.74V5.669h2.74zM10.588 2.927v2.74H5.623v-2.74Zm2.842 0h4.96v2.74h-4.966v-2.74h-2.83V.09h2.836z" style="stroke-width:.13252" />
 </svg>

package/src/docs/DocsShell.tsx

@@ -1,6 +1,7 @@
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { AppHeaderHost } from '#uilib/components/ui/AppHeader';
+import { LogoMark } from '#uilib/components/ui/Logo';
 import { AppShell, AppShellMainContent } from '#uilib/components/ui/Page';
 import { PageFooter } from '#uilib/components/ui/Page/PageFooter/PageFooter';
 import { PageScroll } from '#uilib/components/ui/Page/PageScroll/PageScroll';
@@ -8,7 +9,6 @@ import { SybilionAppHeader } from '#uilib/components/widgets/SybilionAppHeader';
 import { ThemeToggle } from '#uilib/docs/App/ThemeToggle';
 import { DocsSidebar } from '#uilib/docs/components/DocsSidebar/DocsSidebar';
 
-import LogoSvg from '../../assets/logo.svg';
 import S from './DocsShell.styl';
 
 export function DocsShell() {
@@ -24,7 +24,7 @@ export function DocsShell() {
           header={<AppHeaderHost />}
           footer={
             <PageFooter
-              logo={<LogoSvg />}
+              logo={<LogoMark />}
               versionLink="/releases"
               versionLabel="1.0.0-docs"
             />

package/src/docs/config/webpack.config.js

@@ -20,7 +20,7 @@ const FaviconWebpackPlugin = require('favicons-webpack-plugin');
 const pkg = require('../../../package.json');
 
 const themeStyl = pathResolve(paths.src, 'theme.styl');
-const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
+const logoSvgPath = pathResolve(paths.src, 'components/ui/Logo/logo.svg');
 
 /** GitHub Pages project sites live at /<repo>/; set PUBLIC_PATH=/repo-name/ for production deploy. */
 function normalizePublicPath(raw) {
@@ -211,6 +211,11 @@ export default (env, argv) => {
             to: paths.build,
             noErrorOnMissing: true,
           },
+          {
+            from: logoSvgPath,
+            to: `${paths.assets}/logo.svg`,
+            noErrorOnMissing: true,
+          },
         ],
       }),