@aglyn/shared-ui-jsx 1.0.0-beta.143

package/src/lib/components/aglyn-text.js

@@ -0,0 +1,44 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { forwardRef } from "react";
+export const AglynText = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children } = props, rest = _object_without_properties_loose(props, [
+        "children"
+    ]);
+    // `aglyn-text` is not a registered custom element and never was — there is
+    // no `customElements.define` for it anywhere in the repo. React renders an
+    // unknown lowercase tag as-is, which is all this needs to be.
+    const Tag = 'aglyn-text';
+    // React refuses an element that carries both, and the JSX children slot
+    // counts as `children` even when the value in it is undefined on some
+    // toolchains — so the formatted branch is a separate element expression
+    // rather than a conditional inside one.
+    if (rest.dangerouslySetInnerHTML) return /*#__PURE__*/ _jsx(Tag, _extends({
+        ref: ref
+    }, rest));
+    return /*#__PURE__*/ _jsx(Tag, _extends({
+        ref: ref
+    }, rest, {
+        children: children
+    }));
+});
+AglynText.displayName = 'AglynText';
+export default AglynText;
+
+//# sourceMappingURL=aglyn-text.js.map

package/src/lib/components/aglyn-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/aglyn-text.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react'\n\n/**\n * The authored text of a leaf, as a plain element (AGL-2011).\n *\n * ## Why this is no longer a shadow host\n *\n * This used to be `ShadowDom.AglynText` — a `shadowDomRootFactory` host that\n * `attachShadow`ed and then rendered the string through a `createPortal` into\n * the shadow root. The tag name is unchanged, so every\n * `querySelectorAll('aglyn-text')` and every editor ref target still resolves;\n * what is gone is the shadow boundary.\n *\n * A shadow root exists to encapsulate STYLE, and here it encapsulated nothing.\n * Measured on the live `/pricing` page: **960 hosts, 960 shadow roots holding a\n * single bare text node, zero elements inside any of them, and zero carrying\n * any CSS** — no `adoptedStyleSheets`, no `<style>`, no `<link>`. There was\n * nothing for a selector to match, and inherited typography (font, colour,\n * line-height) crosses a shadow boundary regardless. The encapsulation was a\n * no-op.\n *\n * The COSTS were not. A shadow root makes text invisible to `textContent`,\n * and the repo paid for that four separate times:\n *\n *  - **AGL-2349 shipped a bug.** Every published split accordion summary named\n *    its chevron \"Toggle section\", because the label could not be read back.\n *    `accordion.tsx` still carries the bespoke `childText` React-tree walker\n *    written to work around it.\n *  - Legal-page verification had to read the **Flight payload** rather than the\n *    DOM (`published-legal-pages.ts`).\n *  - `leaf.spec.tsx` records that `textContent` cannot see it.\n *  - Every external check — drift tooling, a11y tooling, find-in-page — needed\n *    a bespoke shadow-piercing walk before the page would yield any text.\n *\n * ## Why dropping it is safe\n *\n * The original reason for the shadow root was to give the editor a ref target\n * for inline editing. That is not load-bearing: an ELEMENT provides the ref,\n * not a shadow root, and the besigner's inline text and markdown editors mount\n * **light-DOM** `contenteditable` halves (`besigner/core` → `text-entry.ts`).\n * Nothing edits inside this element.\n *\n * Layout is unchanged: an unknown element defaults to `display: inline`, which\n * is what the shadow HOST already was, and the host was always in the light\n * tree — only its CONTENT moved.\n *\n * Hydration gets simpler rather than riskier. The old component rendered the\n * text as light DOM on the server and during the first client render, then\n * attached the shadow in a layout effect and re-rendered the same string\n * through a portal; the light copy stopped displaying only because a shadow\n * host without slots hides its children. Now the server output is final — and\n * a page like `/pricing` does 960 fewer `attachShadow` calls and mounts 960\n * fewer portals.\n */\nexport interface AglynTextProps {\n  children?: any\n  /**\n   * Sanitized author markup, for a leaf whose text carries formatting\n   * (AGL-2557). Every caller passes the output of `sanitizeAuthorHtml`,\n   * re-sanitized on each render per AGL-497 — this element does no filtering\n   * of its own and must never be handed a raw stored value.\n   *\n   * It rides this element rather than a wrapper of its own so the formatted\n   * label and the plain one are the SAME edit target on the canvas, which is\n   * the element the besigner looks for (AGL-2556).\n   */\n  dangerouslySetInnerHTML?: { __html: string }\n}\n\nexport const AglynText = forwardRef<HTMLElement, AglynTextProps>(\n  (props, ref) => {\n    const { children, ...rest } = props\n    // `aglyn-text` is not a registered custom element and never was — there is\n    // no `customElements.define` for it anywhere in the repo. React renders an\n    // unknown lowercase tag as-is, which is all this needs to be.\n    const Tag = 'aglyn-text' as any\n    // React refuses an element that carries both, and the JSX children slot\n    // counts as `children` even when the value in it is undefined on some\n    // toolchains — so the formatted branch is a separate element expression\n    // rather than a conditional inside one.\n    if (rest.dangerouslySetInnerHTML) return <Tag ref={ref} {...rest} />\n    return (\n      <Tag ref={ref} {...rest}>\n        {children}\n      </Tag>\n    )\n  },\n)\nAglynText.displayName = 'AglynText'\n\nexport default AglynText\n"],"names":["forwardRef","AglynText","props","ref","children","rest","Tag","dangerouslySetInnerHTML","displayName"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,UAAU,QAAQ,QAAO;AAqElC,OAAO,MAAMC,0BAAYD,WACvB,CAACE,OAAOC;IACN,MAAM,EAAEC,QAAQ,EAAW,GAAGF,OAATG,wCAASH;;;IAC9B,2EAA2E;IAC3E,2EAA2E;IAC3E,8DAA8D;IAC9D,MAAMI,MAAM;IACZ,wEAAwE;IACxE,sEAAsE;IACtE,wEAAwE;IACxE,wCAAwC;IACxC,IAAID,KAAKE,uBAAuB,EAAE,qBAAO,KAACD;QAAIH,KAAKA;OAASE;IAC5D,qBACE,KAACC;QAAIH,KAAKA;OAASE;kBAChBD;;AAGP,GACD;AACDH,UAAUO,WAAW,GAAG;AAExB,eAAeP,UAAS"}

package/src/lib/components/app-link.d.ts

@@ -0,0 +1,74 @@
+import type { ButtonBaseProps as MuiButtonBaseProps, ButtonProps as MuiButtonProps, FabProps as MuiFabProps, IconButtonProps as MuiIconButtonProps, LinkProps as MuiLinkProps } from '@mui/material';
+import { type NextLinkProps } from './next-link';
+export type AppLinkVariant = 'naked' | 'button' | 'button-base' | 'icon-button' | 'fab' | 'text' | 'default' | undefined | never;
+type BaseLinkProps = Omit<NextLinkProps, 'hrefTo'>;
+export type ButtonBaseProps = MuiButtonBaseProps<any, BaseLinkProps>;
+export type ButtonProps = MuiButtonProps<any, BaseLinkProps>;
+export type DefaultProps = TextProps;
+export type FabProps = MuiFabProps<any, BaseLinkProps>;
+export type IconButtonProps = MuiIconButtonProps<any, BaseLinkProps>;
+export type NakedProps = MuiLinkProps<any, BaseLinkProps>;
+export type TextProps = MuiLinkProps<any, BaseLinkProps>;
+export type AppLinkVariantDefault = Extract<AppLinkVariant, 'text' | 'default' | undefined | never>;
+export type AppLinkProps<T = AppLinkVariant> = T extends string ? T extends AppLinkVariant ? T extends AppLinkVariantDefault ? DefaultProps & {
+    componentVariant?: T;
+} : T extends 'button' ? ButtonProps & {
+    componentVariant: T;
+} : T extends 'button-base' ? ButtonBaseProps & {
+    componentVariant: T;
+} : T extends 'icon-button' ? IconButtonProps & {
+    componentVariant: T;
+} : T extends 'fab' ? FabProps & {
+    componentVariant: T;
+} : T extends 'naked' ? NakedProps & {
+    componentVariant: T;
+} : never : never : DefaultProps & {
+    componentVariant?: undefined | never;
+};
+export type AppLinkSimpleLinkProps = AppLinkProps<AppLinkVariantDefault>;
+export type AppLinkNakedLinkProps = AppLinkProps<'naked'>;
+export type AppLinkButtonProps = AppLinkProps<'button'>;
+export type AppLinkButtonBaseProps = AppLinkProps<'button-base'>;
+export type AppLinkIconButtonProps = AppLinkProps<'icon-button'>;
+export type AppLinkFabProps = AppLinkProps<'fab'>;
+export declare const appLinkClassKey: import("@aglyn/shared-ui-theme").ClassKeyMap<"disabled" | "active" | "activeAsAncestor" | "variantButton" | "variantButtonBase" | "variantDefault" | "variantFab" | "variantIconButton" | "variantNaked" | "variantText", "AglynAppLink">;
+/**
+ * A Material-UI styled version of a "composed" Next.js Link.
+ *
+ * Specify the `componentVariant` props to conditionally render output element
+ * componentVariant === 'naked' = NextLink
+ * componentVariant === 'button' = MuiButton
+ * componentVariant === any = MuiLink
+ */
+declare const AppLink: import("react").ForwardRefExoticComponent<(Omit<BaseLinkProps & import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant?: "text";
+}, "ref"> | Omit<BaseLinkProps & import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant?: "default";
+}, "ref"> | Omit<BaseLinkProps & import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant: "naked";
+}, "ref"> | Omit<BaseLinkProps & import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, string | number> & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant: "button";
+}, "ref"> | Omit<BaseLinkProps & import("@mui/material").ButtonBaseOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant: "button-base";
+}, "ref"> | Omit<BaseLinkProps & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, string | number> & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant: "icon-button";
+}, "ref"> | Omit<BaseLinkProps & import("@mui/material").FabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, string | number> & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof NextLinkProps> & {
+    component?: React.ElementType | undefined;
+} & {
+    componentVariant: "fab";
+}, "ref">) & import("react").RefAttributes<any>>;
+type AppLink = typeof AppLink;
+export { AppLink };
+export default AppLink;

package/src/lib/components/app-link.js

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2024 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { generateComponentClassKeys } from "@aglyn/shared-ui-theme";
+import { _isObj } from "@aglyn/shared-util-tools";
+import { truthy } from "@aglyn/shared-util-tools";
+// AGL-926: `Fab` and `IconButton` used to be pulled in with `next/dynamic`,
+// which returns a plain function component and therefore swallows the ref.
+// That made those two variants unusable as a child of anything that clones
+// its child and measures it — MUI `Tooltip` threw
+// `childNode.getAttribute is not a function` and took out every help tip.
+// They are ordinary static imports now, like the other four variants.
+import { Button as MuiButton, ButtonBase as MuiButtonBase, Fab as MuiFab, IconButton as MuiIconButton, Link as MuiLink } from "@mui/material";
+import clsx from "clsx";
+import { usePathname } from "next/navigation";
+import { forwardRef, useMemo } from "react";
+import NextLink from "./next-link.js";
+export const appLinkClassKey = generateComponentClassKeys('AglynAppLink', [
+    'active',
+    'activeAsAncestor',
+    'disabled',
+    'variantButton',
+    'variantButtonBase',
+    'variantDefault',
+    'variantFab',
+    'variantIconButton',
+    'variantNaked',
+    'variantText'
+]);
+/**
+ * A Material-UI styled version of a "composed" Next.js Link.
+ *
+ * Specify the `componentVariant` props to conditionally render output element
+ * componentVariant === 'naked' = NextLink
+ * componentVariant === 'button' = MuiButton
+ * componentVariant === any = MuiLink
+ */ const AppLink = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _usePathname;
+    const { className, componentVariant, href } = props, rest = _object_without_properties_loose(props, [
+        "className",
+        "componentVariant",
+        "href"
+    ]);
+    const variant = componentVariant;
+    const pathname = (_usePathname = usePathname()) != null ? _usePathname : '';
+    const [active, activeAsAncestor] = useMemo(()=>{
+        const hrefPath = _isObj(href) ? href['pathname'] : href, samePath = hrefPath === pathname, isRootHref = hrefPath === '/', pathIsAncestor = pathname.startsWith(hrefPath), currentlyNested = pathname.lastIndexOf('/') > 0, isSpecified = truthy(hrefPath);
+        const active = isSpecified && samePath;
+        const activeAsAncestor = isSpecified && !isRootHref && currentlyNested && pathIsAncestor;
+        return [
+            active,
+            !active && activeAsAncestor
+        ];
+    }, [
+        href,
+        pathname
+    ]);
+    const elemClassName = clsx({
+        [appLinkClassKey.active]: active || truthy(rest['active']),
+        [appLinkClassKey.activeAsAncestor]: activeAsAncestor,
+        [appLinkClassKey.disabled]: truthy(rest['disabled']),
+        [appLinkClassKey.variantNaked]: variant === 'naked',
+        [appLinkClassKey.variantButton]: variant === 'button',
+        [appLinkClassKey.variantButtonBase]: variant === 'button-base',
+        [appLinkClassKey.variantIconButton]: variant === 'icon-button',
+        [appLinkClassKey.variantFab]: variant === 'fab',
+        [appLinkClassKey.variantText]: variant === 'text' || variant === 'default' || !variant,
+        [appLinkClassKey.variantDefault]: variant === 'default' || !variant
+    }, className);
+    switch(variant){
+        case 'naked':
+            return /*#__PURE__*/ _jsx(NextLink, _extends({
+                ref: ref,
+                className: elemClassName,
+                hrefTo: href || ''
+            }, rest));
+        case 'button':
+            return /*#__PURE__*/ _jsx(MuiButton, _extends({
+                ref: ref,
+                className: elemClassName,
+                component: NextLink,
+                nativeButton: false,
+                hrefTo: href || ''
+            }, rest));
+        case 'button-base':
+            return /*#__PURE__*/ _jsx(MuiButtonBase, _extends({
+                ref: ref,
+                className: elemClassName,
+                component: NextLink,
+                nativeButton: false,
+                hrefTo: href || ''
+            }, rest));
+        case 'icon-button':
+            return /*#__PURE__*/ _jsx(MuiIconButton, _extends({
+                ref: ref,
+                className: elemClassName,
+                component: NextLink,
+                nativeButton: false,
+                hrefTo: href || ''
+            }, rest));
+        case 'fab':
+            return /*#__PURE__*/ _jsx(MuiFab, _extends({
+                ref: ref,
+                className: elemClassName,
+                component: NextLink,
+                nativeButton: false,
+                hrefTo: href || ''
+            }, rest));
+        default:
+            return /*#__PURE__*/ _jsx(MuiLink, _extends({
+                ref: ref,
+                className: elemClassName,
+                component: NextLink,
+                hrefTo: href || ''
+            }, rest));
+    }
+});
+AppLink.displayName = 'AppLink';
+AppLink.aglyn = true;
+export { AppLink };
+export default AppLink;
+
+//# sourceMappingURL=app-link.js.map

package/src/lib/components/app-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/app-link.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2024 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { generateComponentClassKeys } from '@aglyn/shared-ui-theme'\nimport { _isObj } from '@aglyn/shared-util-tools'\nimport { truthy } from '@aglyn/shared-util-tools'\nimport type {\n  ButtonBaseProps as MuiButtonBaseProps,\n  ButtonProps as MuiButtonProps,\n  FabProps as MuiFabProps,\n  IconButtonProps as MuiIconButtonProps,\n  LinkProps as MuiLinkProps,\n} from '@mui/material'\n// AGL-926: `Fab` and `IconButton` used to be pulled in with `next/dynamic`,\n// which returns a plain function component and therefore swallows the ref.\n// That made those two variants unusable as a child of anything that clones\n// its child and measures it — MUI `Tooltip` threw\n// `childNode.getAttribute is not a function` and took out every help tip.\n// They are ordinary static imports now, like the other four variants.\nimport {\n  Button as MuiButton,\n  ButtonBase as MuiButtonBase,\n  Fab as MuiFab,\n  IconButton as MuiIconButton,\n  Link as MuiLink,\n} from '@mui/material'\nimport clsx from 'clsx'\nimport { usePathname } from 'next/navigation'\nimport { forwardRef, type Ref, useMemo } from 'react'\nimport NextLink, { type NextLinkProps } from './next-link'\n\nexport type AppLinkVariant =\n  | 'naked'\n  | 'button'\n  | 'button-base'\n  | 'icon-button'\n  | 'fab'\n  | 'text'\n  | 'default'\n  | undefined\n  | never\n\ntype BaseLinkProps = Omit<NextLinkProps, 'hrefTo'>\nexport type ButtonBaseProps = MuiButtonBaseProps<any, BaseLinkProps>\nexport type ButtonProps = MuiButtonProps<any, BaseLinkProps>\nexport type DefaultProps = TextProps\nexport type FabProps = MuiFabProps<any, BaseLinkProps>\nexport type IconButtonProps = MuiIconButtonProps<any, BaseLinkProps>\nexport type NakedProps = MuiLinkProps<any, BaseLinkProps>\nexport type TextProps = MuiLinkProps<any, BaseLinkProps>\n\nexport type AppLinkVariantDefault = Extract<\n  AppLinkVariant,\n  'text' | 'default' | undefined | never\n>\n\nexport type AppLinkProps<T = AppLinkVariant> = T extends string\n  ? T extends AppLinkVariant\n    ? T extends AppLinkVariantDefault\n      ? DefaultProps & { componentVariant?: T }\n      : T extends 'button'\n        ? ButtonProps & { componentVariant: T }\n        : T extends 'button-base'\n          ? ButtonBaseProps & { componentVariant: T }\n          : T extends 'icon-button'\n            ? IconButtonProps & { componentVariant: T }\n            : T extends 'fab'\n              ? FabProps & { componentVariant: T }\n              : T extends 'naked'\n                ? NakedProps & { componentVariant: T }\n                : never\n    : never\n  : DefaultProps & { componentVariant?: undefined | never }\n\nexport type AppLinkSimpleLinkProps = AppLinkProps<AppLinkVariantDefault>\nexport type AppLinkNakedLinkProps = AppLinkProps<'naked'>\nexport type AppLinkButtonProps = AppLinkProps<'button'>\nexport type AppLinkButtonBaseProps = AppLinkProps<'button-base'>\nexport type AppLinkIconButtonProps = AppLinkProps<'icon-button'>\nexport type AppLinkFabProps = AppLinkProps<'fab'>\n\nexport const appLinkClassKey = generateComponentClassKeys('AglynAppLink', [\n  'active',\n  'activeAsAncestor',\n  'disabled',\n  'variantButton',\n  'variantButtonBase',\n  'variantDefault',\n  'variantFab',\n  'variantIconButton',\n  'variantNaked',\n  'variantText',\n])\n\n/**\n * A Material-UI styled version of a \"composed\" Next.js Link.\n *\n * Specify the `componentVariant` props to conditionally render output element\n * componentVariant === 'naked' = NextLink\n * componentVariant === 'button' = MuiButton\n * componentVariant === any = MuiLink\n */\nconst AppLink = forwardRef(\n  <T extends AppLinkVariant>(props: AppLinkProps<T>, ref: Ref<any>) => {\n    const { className, componentVariant, href, ...rest } = props\n\n    const variant = componentVariant\n    const pathname = usePathname() ?? ''\n    const [active, activeAsAncestor] = useMemo(() => {\n      const hrefPath = _isObj(href) ? href['pathname'] : href,\n        samePath = hrefPath === pathname,\n        isRootHref = hrefPath === '/',\n        pathIsAncestor = pathname.startsWith(hrefPath),\n        currentlyNested = pathname.lastIndexOf('/') > 0,\n        isSpecified = truthy(hrefPath)\n      const active = isSpecified && samePath\n      const activeAsAncestor =\n        isSpecified && !isRootHref && currentlyNested && pathIsAncestor\n      return [active, !active && activeAsAncestor]\n    }, [href, pathname])\n\n    const elemClassName = clsx(\n      {\n        [appLinkClassKey.active]: active || truthy(rest['active']),\n        [appLinkClassKey.activeAsAncestor]: activeAsAncestor,\n        [appLinkClassKey.disabled]: truthy(rest['disabled']),\n        [appLinkClassKey.variantNaked]: variant === 'naked',\n        [appLinkClassKey.variantButton]: variant === 'button',\n        [appLinkClassKey.variantButtonBase]: variant === 'button-base',\n        [appLinkClassKey.variantIconButton]: variant === 'icon-button',\n        [appLinkClassKey.variantFab]: variant === 'fab',\n        [appLinkClassKey.variantText]:\n          variant === 'text' || variant === 'default' || !variant,\n        [appLinkClassKey.variantDefault]: variant === 'default' || !variant,\n      },\n      className,\n    )\n\n    switch (variant) {\n      case 'naked':\n        return (\n          <NextLink\n            ref={ref}\n            className={elemClassName}\n            hrefTo={href || ''}\n            {...rest}\n          />\n        )\n\n      case 'button':\n        return (\n          <MuiButton\n            ref={ref}\n            className={elemClassName}\n            component={NextLink}\n            nativeButton={false}\n            hrefTo={href || ''}\n            {...rest}\n          />\n        )\n\n      case 'button-base':\n        return (\n          <MuiButtonBase\n            ref={ref}\n            className={elemClassName}\n            component={NextLink}\n            nativeButton={false}\n            hrefTo={href || ''}\n            {...rest}\n          />\n        )\n\n      case 'icon-button':\n        return (\n          <MuiIconButton\n            ref={ref}\n            className={elemClassName}\n            component={NextLink}\n            nativeButton={false}\n            hrefTo={href || ''}\n            {...rest}\n          />\n        )\n\n      case 'fab':\n        return (\n          <MuiFab\n            ref={ref}\n            className={elemClassName}\n            component={NextLink}\n            nativeButton={false}\n            hrefTo={href || ''}\n            {...rest}\n          />\n        )\n\n      default:\n        return (\n          <MuiLink\n            ref={ref}\n            className={elemClassName}\n            component={NextLink}\n            hrefTo={href || ''}\n            {...rest}\n          />\n        )\n    }\n  },\n)\nAppLink.displayName = 'AppLink'\nAppLink.aglyn = true\n\ntype AppLink = typeof AppLink\nexport { AppLink }\nexport default AppLink\n"],"names":["generateComponentClassKeys","_isObj","truthy","Button","MuiButton","ButtonBase","MuiButtonBase","Fab","MuiFab","IconButton","MuiIconButton","Link","MuiLink","clsx","usePathname","forwardRef","useMemo","NextLink","appLinkClassKey","AppLink","props","ref","className","componentVariant","href","rest","variant","pathname","active","activeAsAncestor","hrefPath","samePath","isRootHref","pathIsAncestor","startsWith","currentlyNested","lastIndexOf","isSpecified","elemClassName","disabled","variantNaked","variantButton","variantButtonBase","variantIconButton","variantFab","variantText","variantDefault","hrefTo","component","nativeButton","displayName","aglyn"],"mappings":"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"}

package/src/lib/components/aspect-ratio.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface AspectRatioClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the content element. */
+    content: string;
+    /** Styles applied to the content element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the content element if `color="neutral"`. */
+    colorNeutral: string;
+    /** Styles applied to the content element if `color="danger"`. */
+    colorDanger: string;
+    /** Styles applied to the content element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the content element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the content element if `color="warning"`. */
+    colorWarning: string;
+    /** Styles applied to the root element when color inversion is triggered. */
+    colorContext: string;
+    /** Styles applied to the content element if `variant="plain"`. */
+    variantPlain: string;
+    /** Styles applied to the content element if `variant="outlined"`. */
+    variantOutlined: string;
+    /** Styles applied to the content element if `variant="soft"`. */
+    variantSoft: string;
+    /** Styles applied to the content element if `variant="solid"`. */
+    variantSolid: string;
+}
+export type AspectRatioClassKey = keyof AspectRatioClasses;
+export declare function getAspectRatioUtilityClass(slot: string): string;
+type AspectRatioOwnerState = {
+    ratio?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    objectFit?: '-moz-initial' | 'contain' | 'cover' | 'fill' | 'inherit' | 'initial' | 'none' | 'revert-layer' | 'revert' | 'scale-down' | 'unset';
+    variant?: 'outlined' | 'plain' | 'soft' | 'solid' | string;
+    color?: 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+};
+export interface AspectRatioProps extends AspectRatioOwnerState {
+    children?: JSX.Children;
+}
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<any>>;
+export default AspectRatio;

package/src/lib/components/aspect-ratio.js

@@ -0,0 +1,153 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { unstable_composeClasses as composeClasses } from "@mui/base";
+import { capitalize, generateUtilityClass, generateUtilityClasses, useThemeProps } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+export function getAspectRatioUtilityClass(slot) {
+    return generateUtilityClass('MuiAspectRatio', slot);
+}
+const aspectRatioClasses = generateUtilityClasses('MuiAspectRatio', [
+    'root',
+    'content',
+    'colorPrimary',
+    'colorNeutral',
+    'colorDanger',
+    'colorInfo',
+    'colorSuccess',
+    'colorWarning',
+    'colorContext',
+    'variantPlain',
+    'variantOutlined',
+    'variantSoft',
+    'variantSolid'
+]);
+const useUtilityClasses = (ownerState)=>{
+    const { variant, color } = ownerState;
+    const slots = {
+        root: [
+            'root'
+        ],
+        content: [
+            'content',
+            variant && `variant${capitalize(variant)}`,
+            color && `color${capitalize(color)}`
+        ]
+    };
+    return composeClasses(slots, getAspectRatioUtilityClass, {});
+};
+// Use to control the width of the content, usually in a flexbox row container
+const AspectRatioRoot = styled('div', {
+    name: 'MuiAspectRatio',
+    slot: 'Root',
+    shouldForwardProp (propName) {
+        return propName !== 'ratio';
+    }
+})(({ ownerState })=>{
+    const minHeight = typeof ownerState.minHeight === 'number' ? `${ownerState.minHeight}px` : ownerState.minHeight;
+    const maxHeight = typeof ownerState.maxHeight === 'number' ? `${ownerState.maxHeight}px` : ownerState.maxHeight;
+    return {
+        // a context variable for any child component
+        '--AspectRatio-paddingBottom': minHeight || maxHeight ? `clamp(${minHeight || '0px'}, calc(100% / (${ownerState.ratio})), ${maxHeight || '9999px'})` : `calc(100% / (${ownerState.ratio}))`,
+        borderRadius: 'var(--AspectRatio-radius)',
+        flexDirection: 'column',
+        margin: 'var(--AspectRatio-margin)'
+    };
+});
+const AspectRatioContent = styled('div', {
+    name: 'MuiAspectRatio',
+    slot: 'Content',
+    overridesResolver: (props, styles)=>styles['content']
+})(({ theme, ownerState })=>{
+    var _theme_palette_ownerState_variant;
+    return [
+        {
+            flex: 1,
+            position: 'relative',
+            borderRadius: 'inherit',
+            height: 0,
+            paddingBottom: 'var(--AspectRatio-paddingBottom)',
+            overflow: 'hidden',
+            // use data-attribute instead of :first-child to support zero config SSR (emotion)
+            // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)
+            '& [data-first-child]': {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                boxSizing: 'border-box',
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                objectFit: ownerState.objectFit,
+                margin: 0,
+                padding: 0,
+                '& > img': {
+                    // support art-direction that uses <picture><img /></picture>
+                    width: '100%',
+                    height: '100%',
+                    objectFit: ownerState.objectFit
+                }
+            }
+        },
+        (_theme_palette_ownerState_variant = theme.palette[ownerState.variant]) == null ? void 0 : _theme_palette_ownerState_variant[ownerState.color]
+    ];
+});
+export const AspectRatio = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiAspectRatio'
+    });
+    const { children, ratio = '16 / 9', minHeight, maxHeight, objectFit = 'cover', color: colorProp = 'neutral', variant = 'soft' } = props, other = _object_without_properties_loose(props, [
+        "children",
+        "ratio",
+        "minHeight",
+        "maxHeight",
+        "objectFit",
+        "color",
+        "variant"
+    ]);
+    // const { getColor } = useColorInversion(variant)
+    // const color = getColor(inProps.color, colorProp)
+    const ownerState = _extends({}, props, {
+        minHeight,
+        maxHeight,
+        objectFit,
+        ratio,
+        // color,
+        variant
+    });
+    const classes = useUtilityClasses(ownerState);
+    return /*#__PURE__*/ _jsx(AspectRatioRoot, _extends({
+        className: classes.root,
+        ownerState: ownerState
+    }, other, {
+        children: /*#__PURE__*/ _jsx(AspectRatioContent, _extends({
+            className: classes.content,
+            ownerState: ownerState
+        }, other, {
+            children: Children.map(children, (child, index)=>index === 0 && /*#__PURE__*/ isValidElement(child) ? /*#__PURE__*/ cloneElement(child, {
+                    'data-first-child': ''
+                }) : child)
+        }))
+    }));
+});
+AspectRatio.displayName = 'AspectRatio';
+export default AspectRatio;
+
+//# sourceMappingURL=aspect-ratio.js.map

package/src/lib/components/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/aspect-ratio.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { unstable_composeClasses as composeClasses } from '@mui/base'\nimport {\n  capitalize,\n  generateUtilityClass,\n  generateUtilityClasses,\n  useThemeProps,\n} from '@mui/material'\nimport { styled } from '@mui/material/styles'\nimport { Children, cloneElement, forwardRef, isValidElement } from 'react'\n\nexport interface AspectRatioClasses {\n  /** Styles applied to the root element. */\n  root: string\n  /** Styles applied to the content element. */\n  content: string\n  /** Styles applied to the content element if `color=\"primary\"`. */\n  colorPrimary: string\n  /** Styles applied to the content element if `color=\"neutral\"`. */\n  colorNeutral: string\n  /** Styles applied to the content element if `color=\"danger\"`. */\n  colorDanger: string\n  /** Styles applied to the content element if `color=\"info\"`. */\n  colorInfo: string\n  /** Styles applied to the content element if `color=\"success\"`. */\n  colorSuccess: string\n  /** Styles applied to the content element if `color=\"warning\"`. */\n  colorWarning: string\n  /** Styles applied to the root element when color inversion is triggered. */\n  colorContext: string\n  /** Styles applied to the content element if `variant=\"plain\"`. */\n  variantPlain: string\n  /** Styles applied to the content element if `variant=\"outlined\"`. */\n  variantOutlined: string\n  /** Styles applied to the content element if `variant=\"soft\"`. */\n  variantSoft: string\n  /** Styles applied to the content element if `variant=\"solid\"`. */\n  variantSolid: string\n}\n\nexport type AspectRatioClassKey = keyof AspectRatioClasses\n\nexport function getAspectRatioUtilityClass(slot: string): string {\n  return generateUtilityClass('MuiAspectRatio', slot)\n}\n\nconst aspectRatioClasses: AspectRatioClasses = generateUtilityClasses(\n  'MuiAspectRatio',\n  [\n    'root',\n    'content',\n    'colorPrimary',\n    'colorNeutral',\n    'colorDanger',\n    'colorInfo',\n    'colorSuccess',\n    'colorWarning',\n    'colorContext',\n    'variantPlain',\n    'variantOutlined',\n    'variantSoft',\n    'variantSolid',\n  ],\n)\n\nconst useUtilityClasses = (ownerState: AspectRatioOwnerState) => {\n  const { variant, color } = ownerState\n  const slots = {\n    root: ['root'],\n    content: [\n      'content',\n      variant && `variant${capitalize(variant)}`,\n      color && `color${capitalize(color)}`,\n    ],\n  }\n\n  return composeClasses(slots, getAspectRatioUtilityClass, {})\n}\n\ntype AspectRatioOwnerState = {\n  ratio?: number | string\n  minHeight?: number | string\n  maxHeight?: number | string\n  objectFit?:\n    | '-moz-initial'\n    | 'contain'\n    | 'cover'\n    | 'fill'\n    | 'inherit'\n    | 'initial'\n    | 'none'\n    | 'revert-layer'\n    | 'revert'\n    | 'scale-down'\n    | 'unset'\n  variant?: 'outlined' | 'plain' | 'soft' | 'solid' | string\n  color?: 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning'\n}\n\n// Use to control the width of the content, usually in a flexbox row container\nconst AspectRatioRoot = styled('div', {\n  name: 'MuiAspectRatio',\n  slot: 'Root',\n  shouldForwardProp(propName) {\n    return propName !== 'ratio'\n  },\n})<{ ownerState: AspectRatioOwnerState }>(({ ownerState }) => {\n  const minHeight =\n    typeof ownerState.minHeight === 'number'\n      ? `${ownerState.minHeight}px`\n      : ownerState.minHeight\n  const maxHeight =\n    typeof ownerState.maxHeight === 'number'\n      ? `${ownerState.maxHeight}px`\n      : ownerState.maxHeight\n  return {\n    // a context variable for any child component\n    '--AspectRatio-paddingBottom':\n      minHeight || maxHeight\n        ? `clamp(${minHeight || '0px'}, calc(100% / (${ownerState.ratio})), ${\n            maxHeight || '9999px'\n          })`\n        : `calc(100% / (${ownerState.ratio}))`,\n    borderRadius: 'var(--AspectRatio-radius)',\n    flexDirection: 'column',\n    margin: 'var(--AspectRatio-margin)',\n  }\n})\n\nconst AspectRatioContent = styled('div', {\n  name: 'MuiAspectRatio',\n  slot: 'Content',\n  overridesResolver: (props, styles) => styles['content'],\n})<{ ownerState: AspectRatioOwnerState }>(({ theme, ownerState }) => [\n  {\n    flex: 1,\n    position: 'relative',\n    borderRadius: 'inherit',\n    height: 0,\n    paddingBottom: 'var(--AspectRatio-paddingBottom)',\n    overflow: 'hidden',\n    // use data-attribute instead of :first-child to support zero config SSR (emotion)\n    // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)\n    '& [data-first-child]': {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      objectFit: ownerState.objectFit,\n      margin: 0,\n      padding: 0,\n      '& > img': {\n        // support art-direction that uses <picture><img /></picture>\n        width: '100%',\n        height: '100%',\n        objectFit: ownerState.objectFit,\n      },\n    },\n  },\n  (theme.palette as unknown as Record<string, Record<string, unknown>>)[\n    ownerState.variant!\n  ]?.[ownerState.color!],\n])\n\nexport interface AspectRatioProps extends AspectRatioOwnerState {\n  children?: JSX.Children\n}\n\nexport const AspectRatio = forwardRef<any, AspectRatioProps>((inProps, ref) => {\n  const props = useThemeProps<any, typeof inProps & AspectRatioProps, any>({\n    props: inProps,\n    name: 'MuiAspectRatio',\n  })\n\n  const {\n    children,\n    ratio = '16 / 9',\n    minHeight,\n    maxHeight,\n    objectFit = 'cover',\n    color: colorProp = 'neutral',\n    variant = 'soft',\n    ...other\n  } = props\n  // const { getColor } = useColorInversion(variant)\n  // const color = getColor(inProps.color, colorProp)\n\n  const ownerState = {\n    ...props,\n    minHeight,\n    maxHeight,\n    objectFit,\n    ratio,\n    // color,\n    variant,\n  }\n\n  const classes = useUtilityClasses(ownerState)\n\n  return (\n    <AspectRatioRoot\n      className={classes.root}\n      ownerState={ownerState}\n      {...(other as any)}\n    >\n      <AspectRatioContent\n        className={classes.content}\n        ownerState={ownerState}\n        {...(other as any)}\n      >\n        {Children.map(children, (child, index) =>\n          index === 0 && isValidElement(child)\n            ? cloneElement(child, { 'data-first-child': '' } as Record<\n                string,\n                string\n              >)\n            : child,\n        )}\n      </AspectRatioContent>\n    </AspectRatioRoot>\n  )\n})\nAspectRatio.displayName = 'AspectRatio'\n\nexport default AspectRatio\n"],"names":["unstable_composeClasses","composeClasses","capitalize","generateUtilityClass","generateUtilityClasses","useThemeProps","styled","Children","cloneElement","forwardRef","isValidElement","getAspectRatioUtilityClass","slot","aspectRatioClasses","useUtilityClasses","ownerState","variant","color","slots","root","content","AspectRatioRoot","name","shouldForwardProp","propName","minHeight","maxHeight","ratio","borderRadius","flexDirection","margin","AspectRatioContent","overridesResolver","props","styles","theme","flex","position","height","paddingBottom","overflow","display","justifyContent","alignItems","boxSizing","width","objectFit","padding","palette","AspectRatio","inProps","ref","children","colorProp","other","classes","className","map","child","index","displayName"],"mappings":"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"}

package/src/lib/components/background-image.component.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2024 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type BoxProps as MuiBoxProps } from '@mui/material';
+import type { CSSProperties } from 'react';
+interface OverrideProps {
+    url: string;
+    parallax?: boolean;
+    bgPosition?: CSSProperties['backgroundPosition'];
+    bgRepeat?: CSSProperties['backgroundRepeat'];
+    bgSize?: CSSProperties['backgroundSize'];
+}
+export type BackgroundImageComponentProps = MuiBoxProps<any, OverrideProps>;
+export declare const BackgroundImageComponent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & OverrideProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme> | keyof OverrideProps> & {
+    component?: React.ElementType | undefined;
+}, {}, {}>;
+export default BackgroundImageComponent;

package/src/lib/components/background-image.component.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2024 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { styled } from "@aglyn/shared-ui-theme";
+import { _isEqualitySameType } from "@aglyn/shared-util-tools";
+import { Box as MuiBox } from "@mui/material";
+// Base on MuiBox (not 'div') so that the polymorphic `component` prop is
+// handled natively by Box. styled('div') passes `component` straight to the
+// DOM as an unknown attribute and never changes the rendered element type;
+// styled(Box) converts `component` into an element-type change before
+// rendering. MuiBox also owns sx/ownerState filtering, so we only need to
+// block the background-image-specific custom props here.
+export const BackgroundImageComponent = styled(MuiBox, {
+    name: 'BackgroundImage',
+    shouldForwardProp (propName) {
+        return !_isEqualitySameType(propName, null, 'url', 'parallax', 'bgPosition', 'bgSize', 'bgRepeat');
+    }
+})(({ url, parallax, bgRepeat = 'no-repeat', bgPosition = 'bottom center', bgSize = 'cover' })=>({
+        backgroundColor: 'inherit',
+        backgroundRepeat: bgRepeat,
+        backgroundPosition: bgPosition,
+        backgroundSize: bgSize,
+        backgroundImage: `url(${url})`,
+        backgroundAttachment: parallax ? 'fixed' : undefined
+    }));
+BackgroundImageComponent.displayName = 'BackgroundImageComponent';
+BackgroundImageComponent.aglyn = true;
+export default BackgroundImageComponent;
+
+//# sourceMappingURL=background-image.component.js.map

package/src/lib/components/background-image.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/background-image.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2024 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { styled } from '@aglyn/shared-ui-theme'\nimport { _isEqualitySameType } from '@aglyn/shared-util-tools'\nimport { Box as MuiBox, type BoxProps as MuiBoxProps } from '@mui/material'\nimport type { CSSProperties } from 'react'\n\ninterface OverrideProps {\n  url: string\n  parallax?: boolean\n  bgPosition?: CSSProperties['backgroundPosition']\n  bgRepeat?: CSSProperties['backgroundRepeat']\n  bgSize?: CSSProperties['backgroundSize']\n}\n\nexport type BackgroundImageComponentProps = MuiBoxProps<any, OverrideProps>\n\n// Base on MuiBox (not 'div') so that the polymorphic `component` prop is\n// handled natively by Box. styled('div') passes `component` straight to the\n// DOM as an unknown attribute and never changes the rendered element type;\n// styled(Box) converts `component` into an element-type change before\n// rendering. MuiBox also owns sx/ownerState filtering, so we only need to\n// block the background-image-specific custom props here.\nexport const BackgroundImageComponent = styled(MuiBox, {\n  name: 'BackgroundImage',\n  shouldForwardProp(propName) {\n    return !_isEqualitySameType(\n      propName,\n      null,\n      'url',\n      'parallax',\n      'bgPosition',\n      'bgSize',\n      'bgRepeat',\n    )\n  },\n})<BackgroundImageComponentProps>(\n  ({\n    url,\n    parallax,\n    bgRepeat = 'no-repeat',\n    bgPosition = 'bottom center',\n    bgSize = 'cover',\n  }) => ({\n    backgroundColor: 'inherit',\n    backgroundRepeat: bgRepeat,\n    backgroundPosition: bgPosition,\n    backgroundSize: bgSize,\n    backgroundImage: `url(${url})`,\n    backgroundAttachment: parallax ? 'fixed' : undefined,\n  }),\n)\n\nBackgroundImageComponent.displayName = 'BackgroundImageComponent'\nBackgroundImageComponent.aglyn = true\n\nexport default BackgroundImageComponent\n"],"names":["styled","_isEqualitySameType","Box","MuiBox","BackgroundImageComponent","name","shouldForwardProp","propName","url","parallax","bgRepeat","bgPosition","bgSize","backgroundColor","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","backgroundAttachment","undefined","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,yBAAwB;AAC/C,SAASC,mBAAmB,QAAQ,2BAA0B;AAC9D,SAASC,OAAOC,MAAM,QAAsC,gBAAe;AAa3E,yEAAyE;AACzE,4EAA4E;AAC5E,2EAA2E;AAC3E,sEAAsE;AACtE,0EAA0E;AAC1E,yDAAyD;AACzD,OAAO,MAAMC,2BAA2BJ,OAAOG,QAAQ;IACrDE,MAAM;IACNC,mBAAkBC,QAAQ;QACxB,OAAO,CAACN,oBACNM,UACA,MACA,OACA,YACA,cACA,UACA;IAEJ;AACF,GACE,CAAC,EACCC,GAAG,EACHC,QAAQ,EACRC,WAAW,WAAW,EACtBC,aAAa,eAAe,EAC5BC,SAAS,OAAO,EACjB,GAAM,CAAA;QACLC,iBAAiB;QACjBC,kBAAkBJ;QAClBK,oBAAoBJ;QACpBK,gBAAgBJ;QAChBK,iBAAiB,CAAC,IAAI,EAAET,IAAI,CAAC,CAAC;QAC9BU,sBAAsBT,WAAW,UAAUU;IAC7C,CAAA,GACD;AAEDf,yBAAyBgB,WAAW,GAAG;AACvChB,yBAAyBiB,KAAK,GAAG;AAEjC,eAAejB,yBAAwB"}